From 30444440fb7c58316aa74f01a965d62ca36261a3 Mon Sep 17 00:00:00 2001 From: pengYYY Date: Sat, 21 May 2022 16:53:56 +0800 Subject: [PATCH 1/9] fix: drawer esc close --- src/drawer/drawer.tsx | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/src/drawer/drawer.tsx b/src/drawer/drawer.tsx index af9ce1dac6..a55c4bdad7 100644 --- a/src/drawer/drawer.tsx +++ b/src/drawer/drawer.tsx @@ -1,4 +1,4 @@ -import { computed, defineComponent, nextTick, onUpdated, ref, watch } from 'vue'; +import { computed, defineComponent, nextTick, onUpdated, toRefs, ref, watch } from 'vue'; import { CloseIcon } from 'tdesign-icons-vue-next'; import { useConfig, usePrefixClass } from '../hooks/useConfig'; import { isServer, addClass, removeClass } from '../utils/dom'; @@ -14,17 +14,10 @@ type FooterButtonType = 'confirm' | 'cancel'; export default defineComponent({ name: 'TDrawer', - - components: { - CloseIcon, - TButton, - }, - directives: { TransferDom, }, props, - // TODO update:visible 是否是受控的 emits: ['update:visible'], setup(props, context) { const { global } = useConfig('drawer'); @@ -119,14 +112,14 @@ export default defineComponent({ const theme = isCancel ? 'default' : 'primary'; const isApiObject = typeof btnApi === 'object'; return ( - {btnApi && typeof btnApi === 'object' ? btnApi.content : btnApi} - + ); }; const isUseDefault = (btnApi: FooterButton) => { @@ -224,18 +217,19 @@ export default defineComponent({ render() { const { COMPONENT_NAME } = this; if (this.destroyOnClose && !this.visible) return; - const defaultCloseBtn = ; + const defaultCloseBtn = ; const body = renderContent(this, 'body', 'default'); const headerContent = renderTNodeJSX(this, 'header'); const defaultFooter = this.getDefaultFooter(); return (
{this.showOverlay &&
}
From 1a007d8f911a47673b94b992f3a180f4f4ab501b Mon Sep 17 00:00:00 2001 From: pengYYY Date: Sat, 21 May 2022 17:01:10 +0800 Subject: [PATCH 2/9] fix: menu error --- src/menu/submenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/menu/submenu.tsx b/src/menu/submenu.tsx index 54c27d5901..60600d2036 100644 --- a/src/menu/submenu.tsx +++ b/src/menu/submenu.tsx @@ -185,7 +185,7 @@ export default defineComponent({ class={[ // ...this.popupClass, `${this.classPrefix}-menu__spacer`, - `${this.classPrefix}-menu__spacer--${!this.isNested && this.head ? 'top' : 'left'}`, + `${this.classPrefix}-menu__spacer--${!this.isNested && this.isHead ? 'top' : 'left'}`, ]} onMouseenter={this.handleEnterPopup} onMouseleave={this.handleMouseLeavePopup} From c7da2236020144446a165fb208c8633cefa1963a Mon Sep 17 00:00:00 2001 From: pengYYY Date: Sat, 21 May 2022 17:22:12 +0800 Subject: [PATCH 3/9] fix: update snap --- test/snap/__snapshots__/csr.test.js.snap | 10 ++++++++++ test/snap/__snapshots__/ssr.test.js.snap | 18 +++++++++--------- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap index 1a1f8805a7..568cec8be0 100644 --- a/test/snap/__snapshots__/csr.test.js.snap +++ b/test/snap/__snapshots__/csr.test.js.snap @@ -44243,6 +44243,7 @@ exports[`csr snapshot test > csr test ./examples/config-provider/demos/popconfir
csr test ./examples/drawer/demos/attach-parent.vue
csr test ./examples/drawer/demos/base.vue 1`] = `
csr test ./examples/drawer/demos/custom.vue 1`] = `
csr test ./examples/drawer/demos/custom.vue 1`] = `
csr test ./examples/drawer/demos/custom.vue 1`] = `
csr test ./examples/drawer/demos/no-mask.vue 1`] =
csr test ./examples/drawer/demos/operation.vue 1`]
csr test ./examples/drawer/demos/placement.vue 1`]
csr test ./examples/drawer/demos/size.vue 1`] = `
ssr test ./examples/config-provider/demos/others.vu exports[`ssr snapshot test > ssr test ./examples/config-provider/demos/pagination.vue 1`] = `"
Total 36 items
+010
  • 5 / page
  • 10 / page
  • 20 / page
  • 50 / page
    • 1
    • 2
    • 3
    • 4
    jump to
    "`; -exports[`ssr snapshot test > ssr test ./examples/config-provider/demos/popconfirm.vue 1`] = `"
    Drawer

    This is a controlled drawer

    "`; +exports[`ssr snapshot test > ssr test ./examples/config-provider/demos/popconfirm.vue 1`] = `"
    Drawer

    This is a controlled drawer

    "`; exports[`ssr snapshot test > ssr test ./examples/config-provider/demos/table.vue 1`] = `"
    Type
    Platform
    Property
    Empty Data


    Type
    Platform
    Property
    ArrayVue(PC)A
    StringReact(PC)B
    ObjectMiniprogramC


    "`; @@ -307,23 +307,23 @@ exports[`ssr snapshot test > ssr test ./examples/divider/demos/text.vue 1`] = `" exports[`ssr snapshot test > ssr test ./examples/divider/demos/vertical.vue 1`] = `"
    正直
    进取
    合作
    创新
    "`; -exports[`ssr snapshot test > ssr test ./examples/drawer/demos/attach-parent.vue 1`] = `"
    抽屉标题

    This is a drawer

    抽屉弹出方向：

    抽屉弹出模式：


    "`; +exports[`ssr snapshot test > ssr test ./examples/drawer/demos/attach-parent.vue 1`] = `"
    抽屉标题

    This is a drawer

    抽屉弹出方向：

    抽屉弹出模式：


    "`; -exports[`ssr snapshot test > ssr test ./examples/drawer/demos/base.vue 1`] = `"
    header

    This is a controlled drawer

    "`; +exports[`ssr snapshot test > ssr test ./examples/drawer/demos/base.vue 1`] = `"
    header

    This is a controlled drawer

    "`; -exports[`ssr snapshot test > ssr test ./examples/drawer/demos/custom.vue 1`] = `"
    自定义头部

    This is the body of drawer

    抽屉标题

    This is the body of drawer

    I am the title

    This is the body of drawer

         
    "`; +exports[`ssr snapshot test > ssr test ./examples/drawer/demos/custom.vue 1`] = `"
    自定义头部

    This is the body of drawer

    抽屉标题

    This is the body of drawer

    I am the title

    This is the body of drawer

         
    "`; exports[`ssr snapshot test > ssr test ./examples/drawer/demos/destroy.vue 1`] = `"
    "`; -exports[`ssr snapshot test > ssr test ./examples/drawer/demos/no-mask.vue 1`] = `"
    抽屉标题

    抽屉的内容

    "`; +exports[`ssr snapshot test > ssr test ./examples/drawer/demos/no-mask.vue 1`] = `"
    抽屉标题

    抽屉的内容

    "`; -exports[`ssr snapshot test > ssr test ./examples/drawer/demos/operation.vue 1`] = `"
    标题名称
    标签 A
    标签 B
    标签 C
    "`; +exports[`ssr snapshot test > ssr test ./examples/drawer/demos/operation.vue 1`] = `"
    标题名称
    标签 A
    标签 B
    标签 C
    "`; -exports[`ssr snapshot test > ssr test ./examples/drawer/demos/placement.vue 1`] = `"
    标题名称

    抽屉的内容

    "`; +exports[`ssr snapshot test > ssr test ./examples/drawer/demos/placement.vue 1`] = `"
    标题名称

    抽屉的内容

    "`; -exports[`ssr snapshot test > ssr test ./examples/drawer/demos/popup.vue 1`] = `"
    抽屉标题

    抽屉的内容

    抽屉弹出模式：


    "`; +exports[`ssr snapshot test > ssr test ./examples/drawer/demos/popup.vue 1`] = `"
    抽屉标题

    抽屉的内容

    抽屉弹出模式：


    "`; -exports[`ssr snapshot test > ssr test ./examples/drawer/demos/size.vue 1`] = `"
    抽屉标题

    抽屉的内容

    "`; +exports[`ssr snapshot test > ssr test ./examples/drawer/demos/size.vue 1`] = `"
    抽屉标题

    抽屉的内容

    "`; exports[`ssr snapshot test > ssr test ./examples/dropdown/demos/base.vue 1`] = `"
    "`; From 4af931f482b1931d4d5c455de58d13f38f67f9ef Mon Sep 17 00:00:00 2001 From: pengYYY Date: Sat, 21 May 2022 20:41:59 +0800 Subject: [PATCH 4/9] fix: select createable --- src/select/props.ts | 7 ++++++- src/select/select.tsx | 18 ++++++++++-------- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/src/select/props.ts b/src/select/props.ts index 5fd62588fd..ffc17ed0a6 100644 --- a/src/select/props.ts +++ b/src/select/props.ts @@ -113,7 +113,12 @@ export default { selectInputProps: { type: Object as PropType, }, - /** 是否显示右侧箭头，默认显示 */ + /** 【讨论中】是否显示全选 */ + showCheckAlll: Boolean, + /** + * 是否显示右侧箭头，默认显示 + * @default true + */ showArrow: { type: Boolean, default: true, diff --git a/src/select/select.tsx b/src/select/select.tsx index 89d0a75b05..7f32e163af 100644 --- a/src/select/select.tsx +++ b/src/select/select.tsx @@ -192,11 +192,12 @@ export default defineComponent({ // to fix Computed property "showArrow" is already defined in Props. innerShowArrow(): boolean { return ( - !this.clearable || - !this.isHover || - this.disabled || - (!this.multiple && !this.value && this.value !== 0) || - (this.multiple && (!Array.isArray(this.value) || (Array.isArray(this.value) && !this.value.length))) + this.showArrow && + (!this.clearable || + !this.isHover || + this.disabled || + (!this.multiple && !this.value && this.value !== 0) || + (this.multiple && (!Array.isArray(this.value) || (Array.isArray(this.value) && !this.value.length)))) ); }, canFilter(): boolean { @@ -478,6 +479,10 @@ export default defineComponent({ emitEvent>(this, 'change', value, { trigger }); }, createOption(value: string) { + this.$nextTick(() => { + this.searchInput = ''; + this.showCreateOption = false; + }); emitEvent>(this, 'create', value); }, debounceOnRemote: debounce(function (this: any) { @@ -534,9 +539,6 @@ export default defineComponent({ case 'Enter': if (this.showCreateOption) { this.createOption(this.searchInput); - this.$nextTick(() => { - this.searchInput = ''; - }); } this.hoverOptions[this.hoverIndex] && this.onOptionClick(this.hoverOptions[this.hoverIndex][this.realValue], e); From 571fbf887e6b2548a029876fc201e4aff5234a7c Mon Sep 17 00:00:00 2001 From: pengYYY Date: Sat, 21 May 2022 21:35:21 +0800 Subject: [PATCH 5/9] fix: progress theme dynamic --- src/progress/progress.tsx | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/progress/progress.tsx b/src/progress/progress.tsx index fe6a5d37d4..76ef905f3a 100644 --- a/src/progress/progress.tsx +++ b/src/progress/progress.tsx @@ -1,4 +1,4 @@ -import { defineComponent, VNode, computed } from 'vue'; +import { defineComponent, VNode, computed, CSSProperties } from 'vue'; import { CloseCircleFilledIcon, CheckCircleFilledIcon, @@ -23,16 +23,20 @@ export default defineComponent({ if (props.percentage >= 100) { return 'success'; } - return props.status; + return props.status || 'default'; }); const trackBgStyle = computed(() => { - const height = typeof props.strokeWidth === 'string' ? props.strokeWidth : `${props.strokeWidth}px`; - return { - height, - backgroundColor: props.trackColor, - borderRadius: height, - }; + const style: CSSProperties = {}; + if (props.strokeWidth) { + const height = typeof props.strokeWidth === 'string' ? props.strokeWidth : `${props.strokeWidth}px`; + style.height = height; + style.borderRadius = height; + } + if (props.trackColor) { + style.backgroundColor = props.trackColor; + } + return style; }); const barStyle = computed(() => { From 1530acafeec4b9af812cccfa50cf3734fbf11ab6 Mon Sep 17 00:00:00 2001 From: pengYYY Date: Sat, 21 May 2022 21:37:27 +0800 Subject: [PATCH 6/9] fix: progress theme dynamic --- test/snap/__snapshots__/csr.test.js.snap | 65 +++++----------- test/snap/__snapshots__/ssr.test.js.snap | 12 +-- .../__snapshots__/index.test.jsx.snap | 77 +++++++------------ 3 files changed, 52 insertions(+), 102 deletions(-) diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap index 568cec8be0..1892c6ff28 100644 --- a/test/snap/__snapshots__/csr.test.js.snap +++ b/test/snap/__snapshots__/csr.test.js.snap @@ -75803,7 +75803,7 @@ exports[`csr snapshot test > csr test ./examples/progress/demos/circle.vue 1`] =
    csr test ./examples/progress/demos/circle.vue 1`] =
    csr test ./examples/progress/demos/circle.vue 1`] =
    csr test ./examples/progress/demos/circle.vue 1`] =
    csr test ./examples/progress/demos/custom.vue 1`] =
    csr test ./examples/progress/demos/custom.vue 1`] = data-v-9f8aa44c="" >
    csr test ./examples/progress/demos/custom.vue 1`] = data-v-9f8aa44c="" >
    csr test ./examples/progress/demos/custom.vue 1`] =
    csr test ./examples/progress/demos/custom.vue 1`] = >
    csr test ./examples/progress/demos/custom.vue 1`] =
    csr test ./examples/progress/demos/custom.vue 1`] = data-v-9f8aa44c="" >
    csr test ./examples/progress/demos/custom.vue 1`] =
    csr test ./examples/progress/demos/line.vue 1`] = ` data-v-c2968dc6="" >
    csr test ./examples/progress/demos/line.vue 1`] = ` >
    csr test ./examples/progress/demos/line.vue 1`] = ` >
    csr test ./examples/progress/demos/line.vue 1`] = ` >
    csr test ./examples/progress/demos/line.vue 1`] = ` >
    csr test ./examples/progress/demos/line.vue 1`] = ` >
    csr test ./examples/progress/demos/line.vue 1`] = ` >
    csr test ./examples/progress/demos/line.vue 1`] = ` >
    csr test ./examples/progress/demos/plump.vue 1`] = >
    csr test ./examples/progress/demos/plump.vue 1`] = >
    csr test ./examples/progress/demos/plump.vue 1`] =
    csr test ./examples/progress/demos/plump.vue 1`] =
    csr test ./examples/progress/demos/plump.vue 1`] =
    csr test ./examples/progress/demos/plump.vue 1`] =
    csr test ./examples/progress/demos/plump.vue 1`] =
    csr test ./examples/progress/demos/size.vue 1`] = `
    csr test ./examples/progress/demos/size.vue 1`] = `
    csr test ./examples/progress/demos/size.vue 1`] = `
    csr test ./examples/progress/demos/status.vue 1`] = >
    csr test ./examples/progress/demos/status.vue 1`] =
    csr test ./examples/progress/demos/status.vue 1`] = >
    csr test ./examples/progress/demos/status.vue 1`] =
    csr test ./examples/progress/demos/status.vue 1`] = >
    csr test ./examples/progress/demos/status.vue 1`] =
    csr test ./examples/progress/demos/status.vue 1`] = >
    ssr test ./examples/popup/demos/trigger-element.vue exports[`ssr snapshot test > ssr test ./examples/popup/demos/visible.vue 1`] = `"
    "`; -exports[`ssr snapshot test > ssr test ./examples/progress/demos/circle.vue 1`] = `"
    默认
    默认样式
    30%
    不显示数字
    自定义内容
    75day
    进度完成
    进度状态发生重大错误
    进度被中断
    默认不同尺寸
    小尺寸
    30%
    默认尺寸
    30%
    大尺寸
    75%
    "`; +exports[`ssr snapshot test > ssr test ./examples/progress/demos/circle.vue 1`] = `"
    默认
    默认样式
    30%
    不显示数字
    自定义内容
    75day
    进度完成
    进度状态发生重大错误
    进度被中断
    默认不同尺寸
    小尺寸
    30%
    默认尺寸
    30%
    大尺寸
    75%
    "`; -exports[`ssr snapshot test > ssr test ./examples/progress/demos/custom.vue 1`] = `"
    不显示标签
    自定义高度
    30%
    自定义尺寸
    30%
    自定义颜色
    30%
    44%
    自定义内容
    <div>45days</div>
    <div>45days</div>
    "`; +exports[`ssr snapshot test > ssr test ./examples/progress/demos/custom.vue 1`] = `"
    不显示标签
    自定义高度
    30%
    自定义尺寸
    30%
    自定义颜色
    30%
    44%
    自定义内容
    <div>45days</div>
    <div>45days</div>
    "`; -exports[`ssr snapshot test > ssr test ./examples/progress/demos/line.vue 1`] = `"

    默认在线形外展示进度和状态

    默认样式
    30%
    100%
    100%
    进度完成
    进度状态发生重大错误
    进度被中断
    渐变色
    60%

    可以在线形内展示进度信息

    默认样式
    30%
    进度0-10%时数字数字位置出现在目前进度的右边区域
    5%
    "`; +exports[`ssr snapshot test > ssr test ./examples/progress/demos/line.vue 1`] = `"

    默认在线形外展示进度和状态

    默认样式
    30%
    100%
    100%
    进度完成
    进度状态发生重大错误
    进度被中断
    渐变色
    60%

    可以在线形内展示进度信息

    默认样式
    30%
    进度0-10%时数字数字位置出现在目前进度的右边区域
    5%
    "`; -exports[`ssr snapshot test > ssr test ./examples/progress/demos/plump.vue 1`] = `"
    默认样式
    30%
    进度0-10%时数字数字位置出现在目前进度的右边区域
    5%
    100%
    100%
    进度完成
    30%
    进度状态发生重大错误
    30%
    进度被中断
    30%
    渐变色
    30%
    "`; +exports[`ssr snapshot test > ssr test ./examples/progress/demos/plump.vue 1`] = `"
    默认样式
    30%
    进度0-10%时数字数字位置出现在目前进度的右边区域
    5%
    100%
    100%
    进度完成
    30%
    进度状态发生重大错误
    30%
    进度被中断
    30%
    渐变色
    30%
    "`; -exports[`ssr snapshot test > ssr test ./examples/progress/demos/size.vue 1`] = `"
    默认
    30%
    默认不同尺寸
    小尺寸
    30%
    大尺寸
    75%
    "`; +exports[`ssr snapshot test > ssr test ./examples/progress/demos/size.vue 1`] = `"
    默认
    30%
    默认不同尺寸
    小尺寸
    30%
    大尺寸
    75%
    "`; -exports[`ssr snapshot test > ssr test ./examples/progress/demos/status.vue 1`] = `"
    进度完成：
    80%
    进度状态出现重大错误（如下载的文件有损）：
    80%
    进度被中断（如失去网络连接）
    80%
    "`; +exports[`ssr snapshot test > ssr test ./examples/progress/demos/status.vue 1`] = `"
    进度完成：
    80%
    进度状态出现重大错误（如下载的文件有损）：
    80%
    进度被中断（如失去网络连接）
    80%
    "`; exports[`ssr snapshot test > ssr test ./examples/radio/demos/base.vue 1`] = `"
    "`; diff --git a/test/unit/progress/__snapshots__/index.test.jsx.snap b/test/unit/progress/__snapshots__/index.test.jsx.snap index 6f57d3a755..31185a60fb 100644 --- a/test/unit/progress/__snapshots__/index.test.jsx.snap +++ b/test/unit/progress/__snapshots__/index.test.jsx.snap @@ -5,11 +5,10 @@ exports[`Progress > :props > :color > :color is Array, equal to ["#f00", "#0ff", class="t-progress" >
    :props > :color > :color is Object, equal to { "0%": "#f00", class="t-progress" >
    :props > :color > :color is String, equal to "#aaa" 1`] = ` class="t-progress" >
    :props > :label > :label is String, equal to "custom label t class="t-progress" >
    :props > :label > :label is TNode, equal to () => "tnode" 1` class="t-progress" >
    :props > :label > :label is boolean, equal to false 1`] = ` class="t-progress" >
    :props > :label > :label is boolean, equal to true 1`] = ` class="t-progress" >
    :props > :percentage > :percentage is between 0 to 100, equa class="t-progress" >
    :props > :percentage > :percentage is great equal than 100, >
    :props > :percentage > :percentage is less than 0, equal to class="t-progress" >
    :props > :size > :size is Number, equal to 50 1`] = ` class="t-progress" >
    :props > :size > :size is String, equal to "large" 1`] = ` class="t-progress" >
    :props > :size > :size is String, equal to "medium" 1`] = ` class="t-progress" >
    :props > :size > :size is String, equal to "small" 1`] = ` class="t-progress" >
    :props > :status > :status is active 1`] = ` >
    :props > :status > :status is error 1`] = ` >
    :props > :status > :status is success 1`] = ` >
    :props > :status > :status is warning 1`] = ` >
    :props > :strokeWidth > :strokeWidth is Number, equal to 50 class="t-progress" >
    :props > :strokeWidth > :strokeWidth is String, equal to "50 class="t-progress" >
    :props > :theme > :theme circle progress has t-progress__cir
    :props > :theme > :theme line and plump progress have t-prog class="t-progress" >
    :props > :theme > :theme line and plump progress have t-prog >
    :props > :theme > :theme line and plump progress have t-prog >
    :props > :theme > :theme line and plump progress have t-prog >
    :props > :theme > :theme:circle 1`] = `
    :props > :theme > :theme:line 1`] = ` class="t-progress" >
    :props > :theme > :theme:plump 1`] = ` >
    :props > :trackColor > :trackColor is "#aaa" 1`] = ` class="t-progress" >
    pure progress contains one class 1`] = ` class="t-progress" >
    Date: Sat, 21 May 2022 23:24:30 +0800 Subject: [PATCH 7/9] fix: transfer checked invaild --- examples/transfer/demos/base.vue | 2 +- examples/transfer/demos/search.vue | 3 +- src/transfer/components/transfer-list.tsx | 8 ++--- src/transfer/props.ts | 2 +- src/transfer/transfer.tsx | 44 +++++------------------ src/transfer/utils.ts | 6 ++-- test/snap/__snapshots__/csr.test.js.snap | 1 - test/unit/transfer/util.test.jsx | 8 ++--- 8 files changed, 22 insertions(+), 52 deletions(-) diff --git a/examples/transfer/demos/base.vue b/examples/transfer/demos/base.vue index 28c955de39..c5ba936126 100644 --- a/examples/transfer/demos/base.vue +++ b/examples/transfer/demos/base.vue @@ -5,7 +5,7 @@ :data="list" :checked="checked" @change="onChange" - @checkedChange="handleCheckedChange" + @checked-change="handleCheckedChange" />
    diff --git a/examples/transfer/demos/search.vue b/examples/transfer/demos/search.vue index a38611c43f..03babd14c6 100644 --- a/examples/transfer/demos/search.vue +++ b/examples/transfer/demos/search.vue @@ -1,6 +1,6 @@ diff --git a/src/transfer/components/transfer-list.tsx b/src/transfer/components/transfer-list.tsx index ef6ba8fff7..c463a98f43 100644 --- a/src/transfer/components/transfer-list.tsx +++ b/src/transfer/components/transfer-list.tsx @@ -10,7 +10,7 @@ import { } from '../interface'; import { PageInfo, TdPaginationProps, Pagination } from '../../pagination'; import { Checkbox as TCheckbox, CheckboxGroup as TCheckboxGroup, CheckboxProps } from '../../checkbox'; -import { getLeefCount, getDataValues } from '../utils'; +import { getLefCount, getDataValues } from '../utils'; import Search from './transfer-search'; import { useTNodeDefault } from '../../hooks/tnode'; @@ -121,9 +121,7 @@ export default defineComponent({ } : {}; }); - const hasFooter = computed(() => { - return !!slots.default; - }); + const isAllChecked = computed(() => { return ( props.checkedValue.length > 0 && @@ -135,7 +133,7 @@ export default defineComponent({ }); const totalCount = computed(() => { - return getLeefCount(props.dataSource); + return getLefCount(props.dataSource); }); const handlePaginationChange = (pageInfo: PageInfo) => { diff --git a/src/transfer/props.ts b/src/transfer/props.ts index 60be33e437..a26076cdb7 100644 --- a/src/transfer/props.ts +++ b/src/transfer/props.ts @@ -16,7 +16,7 @@ export default { /** 数据列表选中项 */ checked: { type: Array as PropType, - default: (): TdTransferProps['checked'] => [], + default: undefined, }, /** 数据列表选中项，非受控属性 */ defaultChecked: { diff --git a/src/transfer/transfer.tsx b/src/transfer/transfer.tsx index b9171047b9..0b6c4dfcc0 100644 --- a/src/transfer/transfer.tsx +++ b/src/transfer/transfer.tsx @@ -2,21 +2,14 @@ import { defineComponent, computed, toRefs, ref } from 'vue'; import pick from 'lodash/pick'; import TransferList from './components/transfer-list'; import TransferOperations from './components/transfer-operations'; -import { - TransferListType, - TransferItemOption, - CheckedOptions, - TransferValue, - EmptyType, - TargetParams, - SearchEvent, -} from './interface'; +import { TransferListType, CheckedOptions, TransferValue, EmptyType, TargetParams, SearchEvent } from './interface'; import { getTransferListOption, getDataValues, getTransferData, filterTransferData, TRANSFER_NAME } from './utils'; import { PageInfo, TdPaginationProps } from '../pagination/type'; import props from './props'; import { TNode } from '../common'; import useVModel from '../hooks/useVModel'; +import useDefaultValue from '../hooks/useDefaultValue'; // hooks import { useFormDisabled } from '../form/hooks'; @@ -33,18 +26,9 @@ export default defineComponent({ const disabled = useFormDisabled(); const classPrefix = usePrefixClass(); const { t, global } = useConfig('transfer'); - const { value, modelValue } = toRefs(props); + const { value, modelValue, checked } = toRefs(props); const [innerValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, props.onChange); - const initChecked = computed(() => { - if (props.checked && props.checked.length) { - return props.checked; - } - if (props.defaultChecked && props.defaultChecked.length) { - return props.defaultChecked; - } - return []; - }); - const checkedValueList = computed(() => initChecked.value); + const [innerChecked] = useDefaultValue(checked, props.defaultChecked, props.onCheckedChange, 'checked'); const valueList = ref(innerValue.value || []); const isTreeMode = computed(() => { @@ -67,8 +51,8 @@ export default defineComponent({ // 被选中的value const checkedValue = computed(() => { return { - [SOURCE]: getDataValues(sourceList.value, checkedValueList.value, { isTreeMode: isTreeMode.value }), - [TARGET]: getDataValues(targetList.value, checkedValueList.value, { isTreeMode: isTreeMode.value }), + [SOURCE]: getDataValues(sourceList.value, innerChecked.value, { isTreeMode: isTreeMode.value }), + [TARGET]: getDataValues(targetList.value, innerChecked.value, { isTreeMode: isTreeMode.value }), }; }); const hasFooter = computed(() => { @@ -115,9 +99,8 @@ export default defineComponent({ targetChecked, type: listType, }; - // 支持v-model:checked - // TODO: 换成 useVModel - props['onUpdate:checked']?.(checked); + // TODO onCheckedChange 参数有点不合理 + innerChecked.value = checked; props.onCheckedChange?.(event); }; @@ -158,16 +141,7 @@ export default defineComponent({ const transferToLeft = () => { transferTo(SOURCE); }; - const filterMethod = ( - transferList: Array, - targetValueList: Array, - needMatch: boolean, - ): Array => { - return transferList.filter((item) => { - const isMatch = targetValueList.includes(item.value); - return needMatch ? isMatch : !isMatch; - }); - }; + const handleScroll = (e: Event, listType: TransferListType) => { const target = e.target as HTMLElement; const bottomDistance = target.scrollHeight - target.scrollTop - target.clientHeight; diff --git a/src/transfer/utils.ts b/src/transfer/utils.ts index d56b0e4135..de8d868aff 100644 --- a/src/transfer/utils.ts +++ b/src/transfer/utils.ts @@ -181,11 +181,11 @@ function filterTransferData( } // 获取树节点的叶子数量 -function getLeefCount(nodes: Array): number { +function getLefCount(nodes: Array): number { let total = 0; nodes.forEach((child) => { if (child.children && child.children.length > 0) { - total += getLeefCount(child.children); + total += getLefCount(child.children); } else { total += 1; } @@ -200,5 +200,5 @@ export { getTransferData, cloneTreeWithFilter, filterTransferData, - getLeefCount, + getLefCount, }; diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap index 1892c6ff28..d78d685e3e 100644 --- a/test/snap/__snapshots__/csr.test.js.snap +++ b/test/snap/__snapshots__/csr.test.js.snap @@ -130292,7 +130292,6 @@ exports[`csr snapshot test > csr test ./examples/transfer/demos/pagination.vue 1 exports[`csr snapshot test > csr test ./examples/transfer/demos/search.vue 1`] = `
    diff --git a/test/unit/transfer/util.test.jsx b/test/unit/transfer/util.test.jsx index 7a8a6c629f..9d85b6bab7 100644 --- a/test/unit/transfer/util.test.jsx +++ b/test/unit/transfer/util.test.jsx @@ -1,4 +1,4 @@ -import { getDataValues, cloneTreeWithFilter, getLeefCount } from '@/src/transfer/utils'; +import { getDataValues, cloneTreeWithFilter, getLefCount } from '@/src/transfer/utils'; describe('Transfer', () => { describe('utils', () => { @@ -861,7 +861,7 @@ describe('Transfer', () => { }); }); - describe('getLeefCount', () => { + describe('getLefCount', () => { it('result test 1', () => { const data = [ { @@ -882,7 +882,7 @@ describe('Transfer', () => { ], }, ]; - expect(getLeefCount(data)).toEqual(4); + expect(getLefCount(data)).toEqual(4); }); it('result test 2', () => { @@ -977,7 +977,7 @@ describe('Transfer', () => { }, ]; - expect(getLeefCount(sourceTree)).toEqual(10); + expect(getLefCount(sourceTree)).toEqual(10); }); }); }); From 1d45c0213f154439bf8f2cd72f2540c91d17a523 Mon Sep 17 00:00:00 2001 From: pengYYY Date: Sun, 22 May 2022 00:07:53 +0800 Subject: [PATCH 8/9] fix: ts type --- src/hooks/useDefaultValue.ts | 6 +++--- src/hooks/useVModel.ts | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/hooks/useDefaultValue.ts b/src/hooks/useDefaultValue.ts index cd4e185a11..2cd65cccdf 100644 --- a/src/hooks/useDefaultValue.ts +++ b/src/hooks/useDefaultValue.ts @@ -2,12 +2,12 @@ import { ref, Ref, getCurrentInstance, watch } from 'vue'; import { ChangeHandler } from './useVModel'; // 用于实现 v-model:propsName -export default function useDefaultValue( +export default function useDefaultValue void>( value: Ref, defaultValue: T, - onChange: ChangeHandler, + onChange: P, propsName: string, -): [Ref, ChangeHandler] { +): [Ref, ChangeHandler] { const { emit, attrs } = getCurrentInstance(); const internalValue = ref(); internalValue.value = defaultValue; diff --git a/src/hooks/useVModel.ts b/src/hooks/useVModel.ts index ec9b575bd4..79083c04d7 100644 --- a/src/hooks/useVModel.ts +++ b/src/hooks/useVModel.ts @@ -1,15 +1,15 @@ import { ref, Ref, getCurrentInstance, watch } from 'vue'; -export type ChangeHandler = (value: T, ...args: P) => void; +export type ChangeHandler = (value: T, ...args: any) => void; -export default function useVModel( +export default function useVModel void>( value: Ref, modelValue: Ref, defaultValue: T, - onChange: ChangeHandler, + onChange: P, propName = 'value', // emit 和 eventName 用于支持 v-model 和 xxx.sync 语法糖 -): [Ref, ChangeHandler] { +): [Ref, ChangeHandler] { const { emit, attrs } = getCurrentInstance(); const internalValue: Ref = ref(); From d6ecd50785d8c68693d4f167bb75cce46f24356a Mon Sep 17 00:00:00 2001 From: pengYYY Date: Mon, 23 May 2022 10:50:39 +0800 Subject: [PATCH 9/9] feat: update _common --- src/_common | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_common b/src/_common index 3e7828ad11..0487f2ce98 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 3e7828ad11a37a70083f40359956a0591a97533d +Subproject commit 0487f2ce98b15de46590c26693e094874d988292