docs(transfer): generate type/props/api (merge request !330)

Squash merge branch 'feature/auto/transfer' into 'develop' * fix(transfer): handle enter event * fix(transfer): 修复pageChange问题 * fix(transfer): remove useless code * fix(transfer): 修复checkAll判断 * refactor(transfer): change to tsx * refactor(transfer): move file to components directory * refactor(transfer): use functional component * refactor(transfer): 改成functional组件 * fix(transfer): 修复类型定义问题 * docs(transfer): pagination doesn't have default value * docs(transfer): add T to transfer api * test(transfer): 增加测试用例 * fix(transfer): 修复api问题 * fix(transfer): 修复direction含义 * fix(transfer): 修复props默认值错误 * fix(transfer): 修复page-change事件参数 * fix(transfer): 修复pagination参数问题 * test(utils): 增加emitEvent测试用例 * refactor(transfer): 添加eventEmit到公共utils * fix(transfer): 事件名改成中划线 * refactor(transfer): pagination 传参修改 * refactor(transfer): checked api 变更 * docs(transfer): update apis * refactor(transfer): 优化代码的写法 * refactor(transfer): 改成tsx写法 * refactor(transfer): 改成受控组件的方式 * docs(transfer): generate type/props/api
ubloglab · Apr 30, 2021 · e10347d · e10347d
1 parent e5aa10e
commit e10347d
Show file tree

Hide file tree

Showing 24 changed files with 1,766 additions and 355 deletions.
diff --git a/examples/transfer/demos/base.vue b/examples/transfer/demos/base.vue
@@ -2,16 +2,17 @@
   <t-transfer
     :data="list"
     v-model="targetValue"
-    @checkChange="checkChange"
+    :checked.sync="checked"
+    @change="onChange"
+    @checkedChange="handleCheckedChange"
   />
 </template>
 <script>
 const list = [];
 for (let i = 0; i < 20; i++) {
   list.push({
-    key: i.toString(),
-    title: `内容${i + 1}`,
-    description: `第${i + 1}段信息`,
+    value: i.toString(),
+    label: `内容${i + 1}`,
     disabled: i % 4 < 1,
   });
 }
@@ -20,12 +21,15 @@ export default {
     return {
       list,
       targetValue: [],
+      checked: [],
     };
   },
   methods: {
-    checkChange(sourceChecked, targetChecked) {
-      console.log('sourceChecked', sourceChecked);
-      console.log('targetChecked', targetChecked);
+    handleCheckedChange({ checked, sourceChecked, targetChecked, type }) {
+      console.log('handleCheckedChange', { checked, sourceChecked, targetChecked, type });
+    },
+    onChange(newTargetValue) {
+      console.log(newTargetValue);
     },
   },
 };

diff --git a/examples/transfer/demos/checked.vue b/examples/transfer/demos/checked.vue
@@ -0,0 +1,24 @@
+<template>
+  <t-transfer
+    :data="list"
+    :checked.sync="checked"
+  />
+</template>
+<script>
+const list = [];
+for (let i = 0; i < 20; i++) {
+  list.push({
+    value: i,
+    label: `内容${i + 1}`,
+    disabled: i % 4 < 1,
+  });
+}
+export default {
+  data() {
+    return {
+      list,
+      checked: list.map(item => item.value).filter(v => v % 2 === 0), // 偶数
+    };
+  },
+};
+</script>
diff --git a/examples/transfer/demos/custom.vue b/examples/transfer/demos/custom.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <t-transfer
+      :data="list"
+    >
+      <template v-slot:title="props" :name="123">
+        <div>{{props.type === 'target' ? '目标' : '来源'}}</div>
+      </template>
+      <template v-slot:operation="props" :name="123">
+        {{props.direction === 'left' ? '移除' : '加入'}}
+      </template>
+      <template v-slot:footer="props" :name="123">
+        <div style="padding:10px;border-top:1px solid #aaa;">
+          <span v-if="props.type === 'source'">选中并加入</span>
+          <span v-else>选中并移除</span>
+        </div>
+      </template>
+    </t-transfer>
+  </div>
+</template>
+<script>
+const list = [];
+for (let i = 0; i < 20; i++) {
+  list.push({
+    value: i.toString(),
+    label: `内容${i + 1}`,
+  });
+}
+export default {
+  data() {
+    return {
+      list,
+      targetValue: [],
+      checkedValue: [],
+    };
+  },
+};
+</script>
diff --git a/examples/transfer/demos/disabled.vue b/examples/transfer/demos/disabled.vue
@@ -0,0 +1,25 @@
+<template>
+  <t-transfer
+    :data="list"
+    :disabled="[false, true]"
+    :default-value="targetValue"
+  />
+</template>
+<script>
+const list = [];
+for (let i = 0; i < 20; i++) {
+  list.push({
+    value: i,
+    label: `内容${i + 1}`,
+    disabled: i % 4 < 1,
+  });
+}
+export default {
+  data() {
+    return {
+      list,
+      targetValue: list.map(item => item.value).filter(v => parseInt(v, 10) % 2 === 0), // 偶数
+    };
+  },
+};
+</script>
diff --git a/examples/transfer/demos/empty.vue b/examples/transfer/demos/empty.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <p style="margin: 10px 0px;">默认暂无数据</p>
+    <t-transfer
+      :data="list"
+    />
+    <p style="margin: 10px">自定义空状态</p>
+    <t-transfer
+      :data="list"
+      empty="No Data"
+    />
+  </div>
+</template>
+<script>
+const list = [];
+export default {
+  data() {
+    return {
+      list,
+    };
+  },
+};
+</script>
diff --git a/examples/transfer/demos/pagination.vue b/examples/transfer/demos/pagination.vue
@@ -5,15 +5,15 @@
     v-model="targetValue"
     :checked-value="checkedValue"
     :pagination="pagination"
+    :onPageChange="handlePageChange"
   />
 </template>
 <script>
 const list = [];
 for (let i = 0; i < 20; i++) {
   list.push({
-    key: i.toString(),
-    title: `内容${i + 1}`,
-    description: `第${i + 1}段信息`,
+    value: i.toString(),
+    label: `内容${i + 1}`,
   });
 }
 export default {
@@ -24,16 +24,19 @@ export default {
       checkedValue: [],
       pagination: [{
         pageSize: 10,
-        total: 20,
-        current: 1,
+        defaultCurrent: 1,
       },
       {
-        pageSize: 10,
-        total: 0,
-        current: 1,
+        pageSize: 5,
+        defaultCurrent: 1,
       },
       ],
     };
   },
+  methods: {
+    handlePageChange(...args) {
+      console.log('handlePageChange', args);
+    },
+  },
 };
 </script>
diff --git a/examples/transfer/demos/search.vue b/examples/transfer/demos/search.vue
@@ -11,9 +11,8 @@
 const list = [];
 for (let i = 0; i < 20; i++) {
   list.push({
-    key: i.toString(),
-    title: `内容${i + 1}`,
-    description: `第${i + 1}段信息`,
+    value: i.toString(),
+    label: `内容${i + 1}`,
   });
 }
 export default {

diff --git a/examples/transfer/demos/target-value.vue b/examples/transfer/demos/target-value.vue
@@ -0,0 +1,23 @@
+<template>
+  <t-transfer
+    :data="list"
+    v-model="targetValue"
+  />
+</template>
+<script>
+const list = [];
+for (let i = 0; i < 20; i++) {
+  list.push({
+    value: i.toString(),
+    label: `内容${i + 1}`,
+  });
+}
+export default {
+  data() {
+    return {
+      list,
+      targetValue: list.map(item => item.value).filter(v => parseInt(v, 10) % 2 === 0), // 偶数
+    };
+  },
+};
+</script>
diff --git a/examples/transfer/transfer.md b/examples/transfer/transfer.md
@@ -1,44 +1,82 @@
-:: BASE_DOC ::
+# Transfer 穿梭框
+
+在一定展示空间里对选项进行单个或批量移动从而完成挑选的数据容器。
+
+### 何时使用
+
+一组数据进行两种状态的分类时；
+
+有更多的空间进行选择时。
+
+## 1.组件类型
+### 1.1 基础穿梭框
+定义：两框之间的元素迁移，非常直观且有效。一个或多个元素选择后点击方向按钮转到另一列框中。左栏是“源”，右边是“目标”
+
+使用场景：需要两框之间的元素迁移时
+
+
+::: demo demos/base
+:::
+
+### 1.3 默认有目标元素
+
+
+::: demo demos/target-value
+:::
+
+
+
+### 1.4 默认有选中值
+
+::: demo demos/checked
+:::
+
+
+### 1.3 空数据
+
+
+::: demo demos/empty
+:::
+
+
+### 1.4 禁用状态
+
+
+::: demo demos/disabled
+:::
+
+
+
+
+
+### 1.2 带搜索框
+
+定义：在基础穿梭框上支持搜索功能
+
+使用场景：穿梭框中数据量较大时，提供给用户更快捷的数据项定位能力
+
+
+::: demo demos/search
+:::
+
+
 
 ### 1.4 带分页
 
 ::: demo demos/pagination
 :::
 
-### 1.5 高级用法
 
-::: demo demos/advanced-usage
+### 1.5 自定义标题、底部、操作按钮
+
+::: demo demos/custom
 :::
 
+
+
 ### 1.6 自定义渲染数据
 
 ::: demo demos/custom-render
 :::
 
-### Props
-
-| 属性                | 类型                            | 默认值                 | 必传 | 说明                                                                                                      |
-| ------------------- | ------------------------------- | ---------------------- | ---- | --------------------------------------------------------------------------------------------------------- |
-| data                | Array                           | []                     | Y    | 全量的数据，数组每项为一个对象                                                                            |
-| targetValue/v-model | Array\<String\|Number\|Symbol\> | []                     | Y    | 目标列索引集合，数组每项为数据的 key，Transfer 会把含有这些 key 值的数据筛选到右边                        |
-| checkedValue        | Array\<String\|Number\|Symbol\> | []                     | -    | 设置哪些被选中                                                                                            |
-| disabled            | A\|[A,A]                        | false                  | -    | A=Boolean,是否禁用，禁用列表+禁用按钮禁用 search                                                          |
-| search              | A\|[A,A]                        | false                  | -    | A=Boolean\|InputProps                                                                                     |
-| titles              | A\|[A,A]                        | ['源列表'，'目标列表'] | -    | A=String\|()=>Element                                                                                     | 标题集合，顺序从左到右 |
-| directions          | left\|right\|both               | both                   | -    | 控制穿梭方向展示，默认双向                                                                                |
-| operations          | A\|[A,A]                        | [>(图标),<(图标)]      | -    | A=String\|()=>Element，操作文案集合                                                                       |
-| pagination          | A\|[A,A]                        | -                      | -    | A=PaginationProps，使用分页样式，支持传 pagination 组件的 total，pageSize，current 属性，自定义列表下无效 |
-| checkAll            | A\|[A,A]                        | true                   | -    | A=Boolean,是否展示全选多选框                                                                              |
-| footer              | String\/Slot\/Function          | -                      | -    | 底部自定义渲染，作为 Function 时，参数为({direction:source\|target})                                      |
-| renderItem          | Slot\/Function                  | -                      | -    | 每行数据的渲染函数，返回值是 VNode，参数为({transferItem:Object,index:Number,direction:source\|target})   |
-| empty               | String\/Slot\/Function          | -                      | -    | 当列表为无数据状态时自定义渲染                                                                            |
-| targetOrder         | original\|push\|unshift         | original               | -    | 右侧的排序策略，original 保持和数据源相同的顺序                                                           |
-| rowKey              | Function\/String                | -                      | -    | 用于手动指定 key，优化框架层面的列表渲染性能                                                              |
-
-### Event
-
-| 事件        | 参数                                                        | 说明                           |
-| ----------- | ----------------------------------------------------------- | ------------------------------ |
-| change      | (targetValue:Array,direction:source\|target,moveKeys:Array) | 选项在两栏之间转移时的回调函数 |
-| checkChange | (sourceCheckValue:Array,targetCheckValue:Array)             | 选中项发生改变时的回调函数     |
-| scroll      | (e:Event,bottomDistance:Number)                             | 支持滚动到底部或者底部的距离   |
+:: BASE_PROPS ::
diff --git a/script/test/jest.base.conf.js b/script/test/jest.base.conf.js
@@ -24,6 +24,7 @@ module.exports = {
     '^@TdTypes/(.*)$': '<rootDir>/types/$1',
     '^@Button/(.*)$': '<rootDir>/src/button/index.ts',
     '^@Pagination/(.*)$': '<rootDir>/src/pagination/index.ts',
+    '^@Input/(.*)$': '<rootDir>/src/input/index.ts',
     '^@Breadcrumb/(.*)$': '<rootDir>/src/breadcrumb/index.ts',
     '^@Radio/(.*)$': '<rootDir>/src/radio/index.ts',
     '^@Checkbox/(.*)$': '<rootDir>/src/checkbox/index.ts',

diff --git a/src/input/index.ts b/src/input/index.ts
@@ -1,10 +1,13 @@
 import _Input from './input';
 import mapProps from '../utils/map-props';
 import setInstallFn from '../utils/setInstallFn';
+import { TdInputProps } from '@TdTypes/input/TdInputProps';
 
 const Input = mapProps(['value'])(_Input);
 
 setInstallFn('Input', Input);
 
+export type InputProps = TdInputProps;
+
 export { Input };
 export default Input;