refactor: cascader use select-input (#1074)

* refactor: cascader use select-input * feat: snap update * feat: update select-input readonly * chore: code optimize * feat: snap update * feat: replace style file * feat: common update * feat: add cascader panel * feat: add inputProps tagInputProps tagProps * fix: dialog box-sizing
Tencent · Jul 6, 2022 · e01748d · e01748d
1 parent 601e4ec
commit e01748d
Show file tree

Hide file tree

Showing 49 changed files with 2,870 additions and 2,338 deletions.
diff --git a/examples/cascader/cascader.md b/examples/cascader/cascader.md
@@ -11,8 +11,10 @@ clearable | Boolean | false | 是否支持清空选项 | N
 collapsedItems | Slot / Function | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。TS 类型：`TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 disabled | Boolean | false | 是否禁用组件 | N
 empty | String / Slot / Function | - | 无匹配选项时的内容，默认全局配置为 '暂无数据'。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+filter | Function | - | 自定义过滤方法，用于对现有数据进行搜索过滤，判断是否过滤某一项数据。TS 类型：`(filterWords: string, node: TreeNodeModel) => boolean | Promise<boolean>` | N
 filterable | Boolean | false | 是否可搜索 | N
-keys | Object | - | 用来定义 value / label / children 在 `options` 中对应的字段别名。TS 类型：`CascaderKeysType` `interface CascaderKeysType { value?: string; label?: string; children?: string }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N
+inputProps | Object | - | 透传 Input 输入框组件的全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N
+keys | Object | - | 用来定义 value / label / children 在 `options` 中对应的字段别名。TS 类型：`CascaderKeysType` `interface CascaderKeysType { value?: string; label?: string; children?: string | boolean }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N
 lazy | Boolean | true | 延迟加载 children 为 true 的子节点，即使 expandAll 被设置为 true，也同样延迟加载 | N
 load | Function | - | 加载子树数据的方法（仅当节点 children 为 true 时生效）。TS 类型：`(node: TreeNodeModel<CascaderOption>) => Promise<Array<CascaderOption>>` | N
 loading | Boolean | false | 是否为加载状态 | N
@@ -23,23 +25,30 @@ multiple | Boolean | false | 是否允许多选 | N
 options | Array | [] | 可选项数据源。TS 类型：`Array<CascaderOption>` | N
 placeholder | String | undefined | 占位符 | N
 popupProps | Object | - | 参考 popup 组件 API。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N
+popupVisible | Boolean | undefined | 是否显示下拉框 | N
+readonly | Boolean | false | 只读状态，值为真会隐藏输入框，且无法打开下拉框 | N
+selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N
 showAllLevels | Boolean | true | 选中值使用完整路径，输入框在单选时也显示完整路径 | N
 size | String | medium | 组件尺寸。可选项：large/medium/small。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+tagInputProps | Object | - | 透传 TagInput 标签输入框组件的全部属性。TS 类型：`TagInputProps`，[TagInput API Documents](./tag-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N
+tagProps | Object | - | 透传 Tag 标签组件全部属性。TS 类型：`TagProps`，[Tag API Documents](./tag?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N
 trigger | String | click | 展开下一层级的方式。可选项：click/hover | N
 value | String / Number / Array | [] | 选中项的值。支持语法糖 `v-model`。TS 类型：`CascaderValue<CascaderOption>` `type CascaderValue<T extends TreeOptionData = TreeOptionData> = string | number | T | Array<CascaderValue<T>>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N
 defaultValue | String / Number / Array | [] | 选中项的值。非受控属性。TS 类型：`CascaderValue<CascaderOption>` `type CascaderValue<T extends TreeOptionData = TreeOptionData> = string | number | T | Array<CascaderValue<T>>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N
 valueMode | String | onlyLeaf | 选中值模式。all 表示父节点和子节点全部会出现在选中值里面；parentFirst 表示当子节点全部选中时，仅父节点在选中值里面；onlyLeaf 表示无论什么情况，选中值仅呈现叶子节点。可选项：onlyLeaf/parentFirst/all | N
 valueType | String | single | 用于控制选中值的类型。single 表示输入输出值为 叶子结点值， full 表示输入输出值为全路径。可选项：single/full | N
 onBlur | Function |  | TS 类型：`(context: { value: CascaderValue<CascaderOption>; e: FocusEvent }) => void`<br/>当输入框失去焦点时触发 | N
-onChange | Function |  | TS 类型：`(value: CascaderValue<CascaderOption>, context: CascaderChangeContext<CascaderOption>) => void`<br/>选中值发生变化时触发。TreeNodeModel 从树组件中导出。`context.node` 表示触发事件的节点，`context.source` 表示触发事件的来源。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts)。<br/>`interface CascaderChangeContext<CascaderOption> { node?: TreeNodeModel<CascaderOption>; source: CascaderChangeSource }`<br/><br/>`import { TreeNodeModel } from '@Tree'`<br/><br/>`type CascaderChangeSource = 'invalid-value' | 'checked' | 'clear' | 'unchecked'`<br/> | N
+onChange | Function |  | TS 类型：`(value: CascaderValue<CascaderOption>, context: CascaderChangeContext<CascaderOption>) => void`<br/>选中值发生变化时触发。TreeNodeModel 从树组件中导出。`context.node` 表示触发事件的节点，`context.source` 表示触发事件的来源。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts)。<br/>`interface CascaderChangeContext<CascaderOption> { node?: TreeNodeModel<CascaderOption>; source: CascaderChangeSource }`<br/><br/>`import { TreeNodeModel } from '@Tree'`<br/><br/>`type CascaderChangeSource = 'invalid-value' | 'check' | 'clear' | 'uncheck'`<br/> | N
 onFocus | Function |  | TS 类型：`(context: { value: CascaderValue<CascaderOption>; e: FocusEvent }) => void`<br/>获得焦点时触发 | N
+onPopupVisibleChange | Function |  | TS 类型：`(visible: boolean, context: PopupVisibleChangeContext) => void`<br/>下拉框显示或隐藏时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts)。<br/>`import { PopupVisibleChangeContext } from '@Popup'`<br/> | N
 onRemove | Function |  | TS 类型：`(context: RemoveContext<CascaderOption>) => void`<br/>多选模式下，选中数据被移除时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts)。<br/>`interface RemoveContext<T> { value: CascaderValue<T>; node: TreeNodeModel<T> }`<br/> | N
 
 ### Cascader Events
 
 名称 | 参数 | 描述
 -- | -- | --
 blur | `(context: { value: CascaderValue<CascaderOption>; e: FocusEvent })` | 当输入框失去焦点时触发
-change | `(value: CascaderValue<CascaderOption>, context: CascaderChangeContext<CascaderOption>)` | 选中值发生变化时触发。TreeNodeModel 从树组件中导出。`context.node` 表示触发事件的节点，`context.source` 表示触发事件的来源。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts)。<br/>`interface CascaderChangeContext<CascaderOption> { node?: TreeNodeModel<CascaderOption>; source: CascaderChangeSource }`<br/><br/>`import { TreeNodeModel } from '@Tree'`<br/><br/>`type CascaderChangeSource = 'invalid-value' | 'checked' | 'clear' | 'unchecked'`<br/>
+change | `(value: CascaderValue<CascaderOption>, context: CascaderChangeContext<CascaderOption>)` | 选中值发生变化时触发。TreeNodeModel 从树组件中导出。`context.node` 表示触发事件的节点，`context.source` 表示触发事件的来源。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts)。<br/>`interface CascaderChangeContext<CascaderOption> { node?: TreeNodeModel<CascaderOption>; source: CascaderChangeSource }`<br/><br/>`import { TreeNodeModel } from '@Tree'`<br/><br/>`type CascaderChangeSource = 'invalid-value' | 'check' | 'clear' | 'uncheck'`<br/>
 focus | `(context: { value: CascaderValue<CascaderOption>; e: FocusEvent })` | 获得焦点时触发
+popup-visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | 下拉框显示或隐藏时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts)。<br/>`import { PopupVisibleChangeContext } from '@Popup'`<br/>
 remove | `(context: RemoveContext<CascaderOption>)` | 多选模式下，选中数据被移除时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts)。<br/>`interface RemoveContext<T> { value: CascaderValue<T>; node: TreeNodeModel<T> }`<br/>
diff --git a/examples/cascader/demos/base.vue b/examples/cascader/demos/base.vue
@@ -1,17 +1,8 @@
 <template>
   <div>
-    <t-cascader
-      v-model="value"
-      :options="options"
-      clearable
-      size="medium"
-      placeholder='请选择'
-      class="t-demo-cascader"
-      @change="onChange"
-    ></t-cascader>
+    <t-cascader v-model="value" :options="options" clearable @change="onChange" />
   </div>
 </template>
-
 <script>
 export default {
   data() {
@@ -61,11 +52,3 @@ export default {
   },
 };
 </script>
-<style scoped>
-.t-demo-cascader-title {
-  margin: 10px 0;
-}
-.t-demo-cascader + .t-demo-cascader {
-  margin-top: 16px;
-}
-</style>
diff --git a/examples/cascader/demos/check-strictly.vue b/examples/cascader/demos/check-strictly.vue
@@ -1,16 +1,9 @@
 <template>
-  <div>
-    <t-cascader class="t-demo-cascader" :options="options" v-model="value1" placeholder='请选择' check-strictly></t-cascader>
-    <t-cascader
-      class="t-demo-cascader"
-      :options="options"
-      v-model="value2"
-      check-strictly
-      multiple
-    ></t-cascader>
+  <div class="tdesign-demo-block-row">
+    <t-cascader v-model="value1" :options="options" check-strictly />
+    <t-cascader v-model="value2" :options="options" check-strictly multiple />
   </div>
 </template>
-
 <script>
 export default {
   data() {
@@ -111,8 +104,3 @@ export default {
   },
 };
 </script>
-<style scoped>
-.t-demo-cascader + .t-demo-cascader {
-  margin-top: 16px;
-}
-</style>
diff --git a/examples/cascader/demos/collapsed.vue b/examples/cascader/demos/collapsed.vue
@@ -1,26 +1,21 @@
 <template>
-  <div>
-    <t-cascader class="t-demo-cascader" :options="options" v-model="value" :onRemove="handleBlur" multiple :minCollapsedNum="1" />
-    <t-cascader class="t-demo-cascader" :options="options" v-model="value" :collapsedItems="collapsedItems" multiple :minCollapsedNum="1" />
-    <t-cascader class="t-demo-cascader" :options="options" v-model="value" multiple clearable :minCollapsedNum="1">
+  <div class="tdesign-demo-block-row">
+    <t-cascader v-model="value" :options="options" :on-remove="handleBlur" multiple :min-collapsed-num="1" />
+    <t-cascader v-model="value" :options="options" :collapsed-items="collapsedItems" multiple :min-collapsed-num="1" />
+    <t-cascader v-model="value" :options="options" multiple clearable :min-collapsed-num="1">
       <template #collapsedItems="{ collapsedSelectedItems, count }">
         <t-popup>
           <template #content>
-            <p
-              v-for="(item, index) in collapsedSelectedItems"
-              :key="index"
-              style="padding: 10px;"
-            >
-              {{item.label}}
+            <p v-for="(item, index) in collapsedSelectedItems" :key="index" style="padding: 10px">
+              {{ item.label }}
             </p>
           </template>
-          <span v-show="count > 0" style="color: #00A870;">+{{count}}</span>
+          <span v-show="count > 0" style="color: #00a870">+{{ count - 1 }}</span>
         </t-popup>
       </template>
     </t-cascader>
   </div>
 </template>
-
 <script lang="jsx">
 export default {
   data() {
@@ -64,21 +59,18 @@ export default {
     };
   },
   methods: {
-    collapsedItems(h, { value, count, collapsedSelectedItems }) {
+    collapsedItems(h, { value, count }) {
       if (!(value instanceof Array) || !count) return;
-      console.log('collapsedItems: ', value, collapsedSelectedItems, count);
       // hover展示全部已选项
       return (
         <t-popup>
           <div slot="content">
-          {
-            value.map((item) => (
+            {value.map((item) => (
               <p style="padding: 10px;">{item.label}</p>
-            ))
-          }
+            ))}
           </div>
           <span v-show={count > 0} style="color: #ED7B2F;">
-            +{count}
+            +{count - 1}
           </span>
         </t-popup>
       );
@@ -89,8 +81,3 @@ export default {
   },
 };
 </script>
-<style scoped>
-.t-demo-cascader + .t-demo-cascader {
-  margin-top: 16px;
-}
-</style>
diff --git a/examples/cascader/demos/disabled.vue b/examples/cascader/demos/disabled.vue
@@ -1,10 +1,9 @@
 <template>
-  <div>
-    <t-cascader class="t-demo-cascader" :options="options" v-model="value1" disabled></t-cascader>
-    <t-cascader class="t-demo-cascader" :options="options" v-model="value2" disabled multiple></t-cascader>
+  <div class="tdesign-demo-block-row">
+    <t-cascader v-model="value1" :options="options" disabled />
+    <t-cascader v-model="value2" :options="options" disabled multiple />
   </div>
 </template>
-
 <script>
 export default {
   data() {
@@ -49,8 +48,3 @@ export default {
   },
 };
 </script>
-<style scoped>
-.t-demo-cascader + .t-demo-cascader {
-  margin-top: 16px;
-}
-</style>
diff --git a/examples/cascader/demos/ellipsis.vue b/examples/cascader/demos/ellipsis.vue
@@ -1,9 +1,9 @@
 <template>
-  <div>
-    <t-cascader class="t-demo-cascader" :options="options" v-model="value" clearable placeholder='请选择'></t-cascader>
+  <div class="tdesign-demo-block-row t-cascader-demo">
+    <t-cascader v-model="value1" :options="options" clearable placeholder="请选择" />
+    <t-cascader v-model="value2" multiple :options="options" clearable placeholder="请选择" />
   </div>
 </template>
-
 <script>
 export default {
   data() {
@@ -42,13 +42,14 @@ export default {
           ],
         },
       ],
-      value: '1.1',
+      value1: '1.1',
+      value2: ['1.1'],
     };
   },
 };
 </script>
-<style scoped>
-.t-demo-cascader + .t-demo-cascader {
-  margin-top: 16px;
+<style>
+.t-cascader-demo {
+  width: 100%;
 }
 </style>
diff --git a/examples/cascader/demos/filterable.vue b/examples/cascader/demos/filterable.vue
@@ -1,17 +1,17 @@
 <template>
-  <div>
-    <t-cascader class="t-demo-cascader" :options="options" v-model="value" filterable clearable placeholder='请选择'></t-cascader>
-    <t-cascader class="t-demo-cascader" :options="options" v-model="value2" filterable clearable multiple placeholder='请选择' :minCollapsedNum="2"></t-cascader>
+  <div class="tdesign-demo-block-row">
+    <t-cascader v-model="value" :options="options" filterable clearable />
+    <t-cascader v-model="value2" :options="options" filterable clearable multiple :min-collapsed-num="2" />
+    <t-cascader v-model="value3" :filter="filterMethod" :options="options" clearable :min-collapsed-num="2" />
   </div>
 </template>
-
 <script>
 export default {
   data() {
     return {
       options: [
         {
-          label: '选项一',
+          label: '当选项一数据展示文本过长时',
           value: '1',
           children: [
             {
@@ -23,7 +23,7 @@ export default {
               value: '1.2',
             },
             {
-              label: '子选项三',
+              label: '当选项数据展示文本过长时',
               value: '1.3',
             },
           ],
@@ -37,20 +37,22 @@ export default {
               value: '2.1',
             },
             {
-              label: '子选项二',
+              label: '当选项数据展示文本过长时',
               value: '2.2',
             },
           ],
         },
       ],
       value: '',
       value2: ['1.1'],
+      value3: '',
     };
   },
+  methods: {
+    filterMethod(search, node) {
+      console.log('filter:', search, node.label);
+      return node.label.indexOf(search) !== -1;
+    },
+  },
 };
 </script>
-<style scoped>
-.t-demo-cascader + .t-demo-cascader {
-  margin-top: 16px;
-}
-</style>
diff --git a/examples/cascader/demos/keys.vue b/examples/cascader/demos/keys.vue
@@ -1,9 +1,20 @@
 <template>
-  <div>
-    <t-cascader class="t-demo-cascader" :keys="{ label: 'name', value: 'code', children: 'items' }" :options="options" v-model="value" clearable placeholder='请选择'></t-cascader>
+  <div class="tdesign-demo-block-row">
+    <t-cascader
+      v-model="value"
+      :keys="{ label: 'name', value: 'code', children: 'items' }"
+      :options="options"
+      clearable
+    />
+    <t-cascader
+      v-model="value2"
+      :keys="{ label: 'name', value: 'code', children: 'items' }"
+      :options="options"
+      multiple
+      clearable
+    />
   </div>
 </template>
-
 <script>
 export default {
   data() {
@@ -43,12 +54,8 @@ export default {
         },
       ],
       value: '1.1',
+      value2: ['1.1'],
     };
   },
 };
 </script>
-<style scoped>
-.t-demo-cascader + .t-demo-cascader {
-  margin-top: 16px;
-}
-</style>
diff --git a/examples/cascader/demos/load.vue b/examples/cascader/demos/load.vue
@@ -1,9 +1,8 @@
 <template>
   <div>
-    <t-cascader class="t-demo-cascader" :options="options" v-model="value" clearable :load="load" />
+    <t-cascader v-model="value" :options="options" clearable :load="load" />
   </div>
 </template>
-
 <script>
 export default {
   data() {
@@ -32,11 +31,11 @@ export default {
             nodes = [
               {
                 label: `${node.label}.1`,
-                children: node.level < 2,
+                children: node.level < 1,
               },
               {
                 label: `${node.label}.2`,
-                children: node.level < 2,
+                children: node.level < 1,
               },
             ];
           }
@@ -47,8 +46,3 @@ export default {
   },
 };
 </script>
-<style scoped>
-.t-demo-cascader + .t-demo-cascader {
-  margin-top: 16px;
-}
-</style>
diff --git a/examples/cascader/demos/max.vue b/examples/cascader/demos/max.vue
@@ -1,9 +1,8 @@
 <template>
   <div>
-    <t-cascader class="t-demo-cascader" :options="options" v-model="value" multiple clearable :max="3"/>
+    <t-cascader v-model="value" :options="options" multiple clearable :max="3" />
   </div>
 </template>
-
 <script>
 export default {
   data() {
@@ -47,8 +46,3 @@ export default {
   },
 };
 </script>
-<style scoped>
-.t-demo-cascader + .t-demo-cascader {
-  margin-top: 16px;
-}
-</style>