feat: add form

Tencent · Apr 16, 2023 · de103ab · de103ab
1 parent 251f58f
commit de103ab
Show file tree

Hide file tree

Showing 45 changed files with 7,457 additions and 185 deletions.
diff --git a/package.json b/package.json
@@ -82,10 +82,12 @@
   "dependencies": {
     "@babel/runtime": "^7.16.5",
     "@types/lodash": "^4.14.178",
+    "@types/validator": "^13.6.3",
     "@vueuse/core": "^8.2.5",
     "dayjs": "^1.10.7",
     "lodash": "^4.17.21",
-    "tdesign-icons-vue-next": "^0.1.8"
+    "tdesign-icons-vue-next": "^0.1.8",
+    "validator": "^13.5.1"
   },
   "peerDependencies": {
     "vue": "^3.2.6"
@@ -117,8 +119,8 @@
     "@vitejs/plugin-vue-jsx": "^1.3.3",
     "@vitest/ui": "^0.16.0",
     "@vue/eslint-config-typescript": "^9.1.0",
-    "@vue/server-renderer": "^3.2.4",
     "@vue/runtime-core": "^3.2.41",
+    "@vue/server-renderer": "^3.2.4",
     "@vue/test-utils": "^2.0.0-rc.17",
     "autoprefixer": "^10.2.4",
     "axios": "^0.21.0",

diff --git a/site/docs.config.js b/site/docs.config.js
@@ -124,6 +124,12 @@ export default {
       title: '输入',
       type: 'component',
       children: [
+        {
+          title: 'Form 表单',
+          name: 'form',
+          path: '/mobile-vue/components/form',
+          component: () => import('@/form/form.md'),
+        },
         {
           title: 'Calendar 日历',
           name: 'calendar',

diff --git a/src/_common b/src/_common
diff --git a/src/badge/__test__/__snapshots__/demo.test.jsx.snap b/src/badge/__test__/__snapshots__/demo.test.jsx.snap
@@ -663,7 +663,7 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
           角标
         </div>
         <div
-          class="t-cell t-cell--middle t-cell--bordered"
+          class="t-cell t-cell--middle t-cell--borderless"
         >
           <div
             class="t-cell__left"
@@ -1102,7 +1102,7 @@ exports[`Badge > Badge themeVue demo works fine 1`] = `
     角标
   </div>
   <div
-    class="t-cell t-cell--middle t-cell--bordered"
+    class="t-cell t-cell--middle t-cell--borderless"
   >
     <div
       class="t-cell__left"

diff --git a/src/button/button.vue b/src/button/button.vue
@@ -14,6 +14,7 @@ import { useEmitEvent, renderContent, renderTNode, TNode } from '../shared';
 import CLASSNAMES from '../shared/constants';
 import ButtonProps from './props';
 import config from '../config';
+import { useFormDisabled } from '../form/hooks';
 
 const { prefix } = config;
 const name = `${prefix}-button`;
@@ -27,6 +28,7 @@ export default defineComponent({
   emits: ['click'],
   setup(props, context) {
     const emitEvent = useEmitEvent(props, context.emit);
+    const disabled = useFormDisabled();
     const internalInstance = getCurrentInstance();
     const buttonClass = computed(() => [
       `${name}`,
@@ -37,7 +39,7 @@ export default defineComponent({
         [`${name}--shape-${props.shape}`]: props.shape,
         [`${name}--ghost`]: props.ghost,
         [`${prefix}-is-block`]: props.block,
-        [CLASSNAMES.STATUS.disabled]: props.disabled,
+        [CLASSNAMES.STATUS.disabled]: props.disabled || disabled.value,
         [CLASSNAMES.STATUS.loading]: props.loading,
       },
     ]);
@@ -53,6 +55,7 @@ export default defineComponent({
     return {
       name,
       ...toRefs(props),
+      disabled,
       buttonContent,
       iconContent,
       buttonClass,

diff --git a/src/calendar/__test__/__snapshots__/demo.test.jsx.snap b/src/calendar/__test__/__snapshots__/demo.test.jsx.snap
@@ -2346,7 +2346,7 @@ exports[`Calendar > Calendar baseVue demo works fine 1`] = `
     <!--teleport end-->
   </div>
   <div
-    class="t-cell t-cell--middle t-cell--bordered"
+    class="t-cell t-cell--middle t-cell--borderless"
   >
     <div
       class="t-cell__left"
@@ -4736,7 +4736,7 @@ exports[`Calendar > Calendar customButtonVue demo works fine 1`] = `
     <!--teleport end-->
   </div>
   <div
-    class="t-cell t-cell--middle t-cell--bordered"
+    class="t-cell t-cell--middle t-cell--borderless"
   >
     <div
       class="t-cell__left"
@@ -5239,7 +5239,7 @@ exports[`Calendar > Calendar customRangeVue demo works fine 1`] = `
     <!--teleport end-->
   </div>
   <div
-    class="t-cell t-cell--middle t-cell--bordered"
+    class="t-cell t-cell--middle t-cell--borderless"
   >
     <div
       class="t-cell__left"
@@ -6291,7 +6291,7 @@ exports[`Calendar > Calendar customTextVue demo works fine 1`] = `
     <!--teleport end-->
   </div>
   <div
-    class="t-cell t-cell--middle t-cell--bordered"
+    class="t-cell t-cell--middle t-cell--borderless"
   >
     <div
       class="t-cell__left"
@@ -8716,7 +8716,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
             <!--teleport end-->
           </div>
           <div
-            class="t-cell t-cell--middle t-cell--bordered"
+            class="t-cell t-cell--middle t-cell--borderless"
           >
             <div
               class="t-cell__left"
@@ -11100,7 +11100,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
             <!--teleport end-->
           </div>
           <div
-            class="t-cell t-cell--middle t-cell--bordered"
+            class="t-cell t-cell--middle t-cell--borderless"
           >
             <div
               class="t-cell__left"
@@ -13484,7 +13484,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
             <!--teleport end-->
           </div>
           <div
-            class="t-cell t-cell--middle t-cell--bordered"
+            class="t-cell t-cell--middle t-cell--borderless"
           >
             <div
               class="t-cell__left"
@@ -14554,7 +14554,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
         <!--teleport end-->
       </div>
       <div
-        class="t-cell t-cell--middle t-cell--bordered"
+        class="t-cell t-cell--middle t-cell--borderless"
       >
         <div
           class="t-cell__left"
@@ -16938,7 +16938,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
         <!--teleport end-->
       </div>
       <div
-        class="t-cell t-cell--middle t-cell--bordered"
+        class="t-cell t-cell--middle t-cell--borderless"
       >
         <div
           class="t-cell__left"
@@ -17434,7 +17434,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
         <!--teleport end-->
       </div>
       <div
-        class="t-cell t-cell--middle t-cell--bordered"
+        class="t-cell t-cell--middle t-cell--borderless"
       >
         <div
           class="t-cell__left"
@@ -19842,7 +19842,7 @@ exports[`Calendar > Calendar multipleVue demo works fine 1`] = `
     <!--teleport end-->
   </div>
   <div
-    class="t-cell t-cell--middle t-cell--bordered"
+    class="t-cell t-cell--middle t-cell--borderless"
   >
     <div
       class="t-cell__left"
@@ -22229,7 +22229,7 @@ exports[`Calendar > Calendar rangeVue demo works fine 1`] = `
     <!--teleport end-->
   </div>
   <div
-    class="t-cell t-cell--middle t-cell--bordered"
+    class="t-cell t-cell--middle t-cell--borderless"
   >
     <div
       class="t-cell__left"

diff --git a/src/cascader/__test__/__snapshots__/demo.test.jsx.snap b/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
@@ -6,7 +6,7 @@ exports[`Cascader > Cascader baseVue demo works fine 1`] = `
 >
   
   <div
-    class="t-cell t-cell--middle t-cell--bordered"
+    class="t-cell t-cell--middle t-cell--borderless"
   >
     <div
       class="t-cell__left"
@@ -264,7 +264,7 @@ exports[`Cascader > Cascader keysVue demo works fine 1`] = `
 >
   
   <div
-    class="t-cell t-cell--middle t-cell--bordered"
+    class="t-cell t-cell--middle t-cell--borderless"
   >
     <div
       class="t-cell__left"
@@ -553,7 +553,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
       
       
       <div
-        class="t-cell t-cell--middle t-cell--bordered"
+        class="t-cell t-cell--middle t-cell--borderless"
       >
         <div
           class="t-cell__left"
@@ -824,7 +824,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
       
       
       <div
-        class="t-cell t-cell--middle t-cell--bordered"
+        class="t-cell t-cell--middle t-cell--borderless"
       >
         <div
           class="t-cell__left"
@@ -1069,7 +1069,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
       
       
       <div
-        class="t-cell t-cell--middle t-cell--bordered"
+        class="t-cell t-cell--middle t-cell--borderless"
       >
         <div
           class="t-cell__left"
@@ -1340,7 +1340,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
       
       
       <div
-        class="t-cell t-cell--middle t-cell--bordered"
+        class="t-cell t-cell--middle t-cell--borderless"
       >
         <div
           class="t-cell__left"
@@ -1611,7 +1611,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
       
       
       <div
-        class="t-cell t-cell--middle t-cell--bordered"
+        class="t-cell t-cell--middle t-cell--borderless"
       >
         <div
           class="t-cell__left"
@@ -1876,7 +1876,7 @@ exports[`Cascader > Cascader themeTabVue demo works fine 1`] = `
 >
   
   <div
-    class="t-cell t-cell--middle t-cell--bordered"
+    class="t-cell t-cell--middle t-cell--borderless"
   >
     <div
       class="t-cell__left"
@@ -2104,7 +2104,7 @@ exports[`Cascader > Cascader withTitleVue demo works fine 1`] = `
 >
   
   <div
-    class="t-cell t-cell--middle t-cell--bordered"
+    class="t-cell t-cell--middle t-cell--borderless"
   >
     <div
       class="t-cell__left"
@@ -2366,7 +2366,7 @@ exports[`Cascader > Cascader withValueVue demo works fine 1`] = `
 >
   
   <div
-    class="t-cell t-cell--middle t-cell--bordered"
+    class="t-cell t-cell--middle t-cell--borderless"
   >
     <div
       class="t-cell__left"
+6 −6		docs/miniprogram/_design/ActionSheet.md
+16 −15		docs/miniprogram/_design/Badge.md
+2 −5		docs/miniprogram/_design/Button.md
+11 −16		docs/miniprogram/_design/Calendar.md
+3 −7		docs/miniprogram/_design/Checkbox.md
+9 −11		docs/miniprogram/_design/CountDown.md
+11 −18		docs/miniprogram/_design/DateTimePicker.md
+9 −4		docs/miniprogram/_design/Dialog.md
+3 −3		docs/miniprogram/_design/Divider.md
+6 −11		docs/miniprogram/_design/Drawer.md
+9 −13		docs/miniprogram/_design/Empty.md
+6 −12		docs/miniprogram/_design/Fab.md
+2 −6		docs/miniprogram/_design/Image.md
+1 −4		docs/miniprogram/_design/ImageViewer.md
+14 −14		docs/miniprogram/_design/Indexes.md
+13 −17		docs/miniprogram/_design/Input.md
+12 −17		docs/miniprogram/_design/Loading.md
+9 −12		docs/miniprogram/_design/Message.md
+8 −9		docs/miniprogram/_design/Picker.md
+11 −16		docs/miniprogram/_design/Progress.md
+15 −11		docs/miniprogram/_design/PullDownRefresh.md
+1 −5		docs/miniprogram/_design/Radio.md
+5 −16		docs/miniprogram/_design/Rate.md
+12 −5		docs/miniprogram/_design/Result.md
+11 −25		docs/miniprogram/_design/Search.md
+52 −0		docs/miniprogram/_design/SideBar.md
+0 −47		docs/miniprogram/_design/Sidebar.md
+6 −7		docs/miniprogram/_design/Slider.md
+24 −27		docs/miniprogram/_design/Steps.md
+77 −0		docs/miniprogram/_design/SwipeCell.md
+3 −11		docs/miniprogram/_design/Switch.md
+7 −11		docs/miniprogram/_design/TabBar.md
+2 −8		docs/miniprogram/_design/Tabs.md
+15 −17		docs/miniprogram/_design/Textarea.md
+8 −12		docs/miniprogram/_design/Toast.md
+9 −16		docs/miniprogram/_design/Upload.md
+2 −5		docs/miniprogram/_design/avatar.md
+11 −12		docs/miniprogram/_design/cascader.md
+3 −6		docs/miniprogram/_design/link.md
+7 −6		docs/miniprogram/_design/navbar.md
+2 −4		docs/miniprogram/_design/swiper.md
+6 −6		docs/miniprogram/design/action-sheet.md
+2 −5		docs/miniprogram/design/avatar.md
+68 −0		docs/miniprogram/design/badge.md
+2 −5		docs/miniprogram/design/button.md
+51 −0		docs/miniprogram/design/calendar.md
+11 −12		docs/miniprogram/design/cascader.md
+3 −7		docs/miniprogram/design/checkbox.md
+50 −0		docs/miniprogram/design/count-down.md
+42 −0		docs/miniprogram/design/date-time-picker.md
+9 −4		docs/miniprogram/design/dialog.md
+3 −3		docs/miniprogram/design/divider.md
+6 −11		docs/miniprogram/design/drawer.md
+44 −0		docs/miniprogram/design/empty.md
+6 −12		docs/miniprogram/design/fab.md
+1 −4		docs/miniprogram/design/image-viewer.md
+2 −6		docs/miniprogram/design/image.md
+14 −14		docs/miniprogram/design/indexes.md
+72 −0		docs/miniprogram/design/input.md
+3 −6		docs/miniprogram/design/link.md
+58 −0		docs/miniprogram/design/loading.md
+50 −0		docs/miniprogram/design/message.md
+7 −6		docs/miniprogram/design/navbar.md
+40 −0		docs/miniprogram/design/picker.md
+62 −0		docs/miniprogram/design/progress.md
+15 −11		docs/miniprogram/design/pull-down-refresh.md
+1 −5		docs/miniprogram/design/radio.md
+53 −0		docs/miniprogram/design/rate.md
+55 −0		docs/miniprogram/design/result.md
+51 −0		docs/miniprogram/design/search.md
+50 −0		docs/miniprogram/design/sidebar.md
+6 −7		docs/miniprogram/design/slider.md
+74 −0		docs/miniprogram/design/steps.md
+16 −22		docs/miniprogram/design/swipecell.md
+2 −4		docs/miniprogram/design/swiper.md
+31 −0		docs/miniprogram/design/switch.md
+7 −11		docs/miniprogram/design/tab-bar.md
+2 −8		docs/miniprogram/design/tabs.md
+59 −0		docs/miniprogram/design/textarea.md
+51 −0		docs/miniprogram/design/toast.md
+45 −0		docs/miniprogram/design/upload.md
+1 −1		docs/mobile/api/message.md
+21 −3		docs/mobile/api_v2/dialog.md
+15 −0		docs/mobile/api_v2/form.md
+15 −0		docs/mobile/api_v2/link.md
+1 −1		docs/mobile/api_v2/message.md
+8 −8		style/mobile/components/dialog/v2/_index.less
+128 −0		style/mobile/components/form/_index.less
+5 −0		style/mobile/components/form/_var.less
+91 −0		style/mobile/components/link/v2/_index.less
+43 −0		style/mobile/components/link/v2/_var.less
+33 −0		style/mobile/components/message/v2/_index.less