feat(1.6.3): weekly sync update to naruto (#2728)

* fix: 控制台报错 (#2702)

* feat: add cascader keys disabled (#2697)

* feat: add cascader keys disabled

* feat: add select keys.disabled api

* feat: add transfer keys.disabled

* feat: add tree keys.disabled api

* feat: add tree-select keys.disabled api

* fix: lint fix

* test: fix select test

* fix(checkbox): async options state (#2706)

* fix(image): async image.src (#2709)

* fix(image): async image.src

* fix(image): watch immediate

* chore(release): 1.6.2 (#2710)

* chore(release): 1.6.2

* chore: changelog's changes

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* chore: fix export type (#2711)

* chore: cascader TreeKeysType export position (#2712)

* feat(table): support ellipsis-content with slot (#2717)

* feat(table): support defined ellipsis-content with slot

* docs(table): update docs

* fix(Select): improve performance when filtering options (#2722)

* fix(Select): improve performance when filtering options

Co-authored-by: moonye6 <464461539@qq.com>

* chore: update snapshot

---------

Co-authored-by: moonye6 <464461539@qq.com>

* feat(Table): fix expandAll problem; support props.expandedTreeNodes control expanded nodes (#2719)

* feat(table): support table expand

* fix(table): expand all

* docs(table): update

* fix: lint error

* fix(table): expandOnRowClick and selectOnRowClick conflict

* feat(table): add removeChildren

* fix(cascader): 修复Cascader组件label属性自定义插槽不生效 (#2724)

* fix(cascader): where custom slot for label property in Cascader component was not working

* test(cascader): cascader tests

* chore: update snapshot

---------

Co-authored-by: Uyarn <uyarnchen@gmail.com>

* feat: release 1.6.3 (#2726)

* feat: release 1.6.3

* feat: update common

* chore: changelog's changes

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* chore: import api from vue

* chore: fix empty option

* chore: update CHANGELOG

---------

Co-authored-by: 龙风 <455947455@qq.com>
Co-authored-by: PY <pengyue970715@gmail.com>
Co-authored-by: sheepluo <yaoyanhuoyi@qq.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: moonye6 <464461539@qq.com>
Co-authored-by: bloglab <37498563+ubloglab@users.noreply.github.com>
Co-authored-by: azhe <xiaosansiji@gmail.com>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tdesign-vue",
   "purename": "tdesign",
-  "version": "1.6.1-naruto",
+  "version": "1.6.3-naruto",
   "description": "tdesign-vue",
   "title": "tdesign-vue",
   "keywords": [

src/cascader/_example/base.vue

@@ -1,5 +1,9 @@
 <template>
-  <t-cascader label="单选：" v-model="value" :options="options" clearable @change="onChange" />
+  <t-cascader v-model="value" :options="options" clearable @change="onChange">
+    <template #label>
+      <div>单选：</div>
+    </template>
+  </t-cascader>
 </template>
 <script>
 export default {

src/cascader/cascader.en-US.md

@@ -6,6 +6,7 @@
 name | type | default | description | required
 -- | -- | -- | -- | --
 autofocus | Boolean | - | \- | N
+borderless | Boolean | false | \- | N
 checkProps | Object | - | Typescript：`CheckboxProps`，[Checkbox API Documents](./checkbox?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N
 checkStrictly | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
@@ -15,7 +16,7 @@ empty | String / Slot / Function | - | Typescript：`string \| TNode`。[see mor
 filter | Function | - | Typescript：`(filterWords: string, node: TreeNodeModel) => boolean \| Promise<boolean>` | N
 filterable | Boolean | false | \- | N
 inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N
-keys | Object | - | Typescript：`CascaderKeysType` `interface CascaderKeysType { value?: string; label?: string; children?: string \| boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N
+keys | Object | - | Typescript：`TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 lazy | Boolean | true | \- | N
 load | Function | - | Typescript：`(node: TreeNodeModel<CascaderOption>) => Promise<Array<CascaderOption>>` | N
@@ -29,23 +30,24 @@ options | Array | [] | Typescript：`Array<CascaderOption>` | N
 placeholder | String | undefined | \- | N
 popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N
 popupVisible | Boolean | - | \- | N
+defaultPopupVisible | Boolean | - | uncontrolled property | N
 readonly | Boolean | false | \- | N
 reserveKeyword | Boolean | false | \- | N
 selectInputProps | Object | - | Typescript：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N
 showAllLevels | Boolean | true | \- | N
-size | String | medium | options：large/medium/small。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-status | String | default | options：default/success/warning/error | N
+size | String | medium | options: large/medium/small。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+status | String | default | options: default/success/warning/error | N
 suffix | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 suffixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 tagInputProps | Object | - | Typescript：`TagInputProps`，[TagInput API Documents](./tag-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N
 tagProps | Object | - | Typescript：`TagProps`，[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N
 tips | String / Slot / Function | - | tips at the bottom of cascader。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-trigger | String | click | options：click/hover | N
+trigger | String | click | options: click/hover | N
 value | String / Number / Array | [] | `v-model` is supported。Typescript：`CascaderValue<CascaderOption>` `type CascaderValue<T extends TreeOptionData = TreeOptionData> = string \| number \| T \| Array<CascaderValue<T>>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N
 defaultValue | String / Number / Array | [] | uncontrolled property。Typescript：`CascaderValue<CascaderOption>` `type CascaderValue<T extends TreeOptionData = TreeOptionData> = string \| number \| T \| Array<CascaderValue<T>>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N
 valueDisplay | String / Slot / Function | - | `MouseEvent<SVGElement>`。Typescript：`string \| TNode<{ value: CascaderValue<CascaderOption>; onClose: (index: number) => void; displayValue?: CascaderValue<CascaderOption> }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-valueMode | String | onlyLeaf | options：onlyLeaf/parentFirst/all | N
-valueType | String | single | options：single/full | N
+valueMode | String | onlyLeaf | options: onlyLeaf/parentFirst/all | N
+valueType | String | single | options: single/full | N
 onBlur | Function |  | Typescript：`(context: { value: CascaderValue<CascaderOption> } & SelectInputBlurContext ) => void`<br/> | N
 onChange | Function |  | Typescript：`(value: CascaderValue<CascaderOption>, context: CascaderChangeContext<CascaderOption>) => void`<br/>[see more ts definition](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 |  | Typescript：`(context: { value: CascaderValue<CascaderOption>; e: FocusEvent }) => void`<br/> | N

src/cascader/cascader.md

@@ -6,6 +6,7 @@
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 autofocus | Boolean | - | 自动聚焦 | N
+borderless | Boolean | false | 无边框模式 | N
 checkProps | Object | - | 参考 checkbox 组件 API。TS 类型：`CheckboxProps`，[Checkbox API Documents](./checkbox?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N
 checkStrictly | Boolean | false | 父子节点选中状态不再关联，可各自选中或取消 | N
 clearable | Boolean | false | 是否支持清空选项 | N
@@ -15,7 +16,7 @@ empty | String / Slot / Function | - | 无匹配选项时的内容，默认全
 filter | Function | - | 自定义过滤方法，用于对现有数据进行搜索过滤，判断是否过滤某一项数据。TS 类型：`(filterWords: string, node: TreeNodeModel) => boolean \| Promise<boolean>` | N
 filterable | Boolean | false | 是否可搜索 | 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
+keys | Object | - | 用来定义 value / label / children / disabled 在 `options` 中对应的字段别名。TS 类型：`TreeKeysType`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 label | String / Slot / Function | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 lazy | Boolean | true | 延迟加载 children 为 true 的子节点，即使 expandAll 被设置为 true，也同样延迟加载 | N
 load | Function | - | 加载子树数据的方法（仅当节点 children 为 true 时生效）。TS 类型：`(node: TreeNodeModel<CascaderOption>) => Promise<Array<CascaderOption>>` | N

src/cascader/cascader.tsx

@@ -11,7 +11,7 @@ import props from './props';
 
 import { useCascaderContext } from './hooks';
 import {
-  CascaderValue, CascaderKeysType, TdSelectInputProps, TdCascaderProps,
+  CascaderValue, TreeKeysType, TdSelectInputProps, TdCascaderProps,
 } from './interface';
 import { useConfig, usePrefixClass, useCommonClassName } from '../hooks/useConfig';
 import { PopupVisibleChangeContext } from '../popup';
@@ -102,7 +102,7 @@ export default defineComponent({
 
     const renderCollapsedItems = () => {
       const cascaderValue = this.innerValue || [];
-      const keys = (this.keys as CascaderKeysType) || DEFAULT_KEYS;
+      const keys = (this.keys as TreeKeysType) || DEFAULT_KEYS;
       const value = Array.isArray(cascaderValue) ? cascaderValue : [cascaderValue];
       const cascaderOptions = value.map((item) => {
         const tmpValue = typeof item === 'object' ? item[keys.value] : item;
@@ -217,6 +217,7 @@ export default defineComponent({
           tips: slots.tips,
           tag: slots.tag,
           suffix: slots.suffix,
+          label: slots.label,
         }}
       />
     );

src/cascader/interface.tsx

@@ -40,5 +40,6 @@ export type { TreeNodeValue } from '../_common/js/tree/types';
 export type { TreeOptionData } from '../_common/js/common';
 export type { TreeNodeModel } from '../tree';
 export type { TdSelectInputProps } from '../select-input/type';
+export type { TreeKeysType } from '../common';
 
 export const EVENT_NAME_WITH_KEBAB = ['remove', 'blur', 'focus'];

src/cascader/props.ts

@@ -10,6 +10,8 @@ import { PropType } from 'vue';
 export default {
   /** 自动聚焦 */
   autofocus: Boolean,
+  /** 无边框模式 */
+  borderless: Boolean,
   /** 参考 checkbox 组件 API */
   checkProps: {
     type: Object as PropType<TdCascaderProps['checkProps']>,
@@ -38,7 +40,7 @@ export default {
   inputProps: {
     type: Object as PropType<TdCascaderProps['inputProps']>,
   },
-  /** 用来定义 value / label / children 在 `options` 中对应的字段别名 */
+  /** 用来定义 value / label / children / disabled 在 `options` 中对应的字段别名 */
   keys: {
     type: Object as PropType<TdCascaderProps['keys']>,
   },

src/cascader/type.ts

@@ -12,13 +12,18 @@ import { TagInputProps } from '../tag-input';
 import { TagProps } from '../tag';
 import { TreeNodeModel } from '../tree';
 import { PopupVisibleChangeContext } from '../popup';
-import { TNode, TreeOptionData, SizeEnum } from '../common';
+import { TNode, TreeOptionData, SizeEnum, TreeKeysType } from '../common';
 
 export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOptionData> {
   /**
    * 自动聚焦
    */
   autofocus?: boolean;
+  /**
+   * 无边框模式
+   * @default false
+   */
+  borderless?: boolean;
   /**
    * 参考 checkbox 组件 API
    */
@@ -59,9 +64,9 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
    */
   inputProps?: InputProps;
   /**
-   * 用来定义 value / label / children 在 `options` 中对应的字段别名
+   * 用来定义 value / label / children / disabled 在 `options` 中对应的字段别名
    */
-  keys?: CascaderKeysType;
+  keys?: TreeKeysType;
   /**
    * 左侧文本
    */
@@ -226,12 +231,6 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
   onRemove?: (context: RemoveContext<CascaderOption>) => void;
 }
 
-export interface CascaderKeysType {
-  value?: string;
-  label?: string;
-  children?: string | boolean;
-}
-
 export type CascaderValue<T extends TreeOptionData = TreeOptionData> = string | number | T | Array<CascaderValue<T>>;
 
 export interface CascaderChangeContext<CascaderOption> {

src/checkbox/checkbox.tsx

@@ -37,7 +37,7 @@ export default defineComponent({
     const checkboxGroupExist = ref(false);
 
     const {
-      checked, indeterminate, disabled, value, lazyLoad,
+      checked, indeterminate, disabled, value, lazyLoad, label, data,
     } = toRefs(props);
     const [innerChecked, setInnerChecked] = useVModel(
       checked,
@@ -154,6 +154,10 @@ export default defineComponent({
 
     subscribeParentData(props.checkAll ? 'CHECK_ALL' : value.value);
 
+    watch([data, label], () => {
+      subscribeParentData(props.checkAll ? 'CHECK_ALL' : value.value);
+    });
+
     onBeforeUnmount(() => {
       checkboxStore.unSubscribe(props.checkAll ? 'CHECK_ALL' : value.value);
     });

src/checkbox/group.tsx

@@ -31,7 +31,9 @@ export default defineComponent({
     checkboxStore.init();
 
     const { isArray } = Array;
-    const { value, disabled, name } = toRefs(props);
+    const {
+      value, disabled, name, options,
+    } = toRefs(props);
     const [innerValue, setInnerValue] = useVModel(value, props.defaultValue, props.onChange);
 
     const optionList = ref<Array<CheckboxOptionObj>>([]);
@@ -59,6 +61,16 @@ export default defineComponent({
       checkboxStore.updateCheckbox({ disabled, maxExceeded, checkboxName });
     });
 
+    watch([options], () => {
+      nextTick(() => {
+        checkboxStore.updateCheckbox({
+          disabled: disabled.value,
+          maxExceeded: maxExceeded.value,
+          checkboxName: name.value,
+        });
+      });
+    });
+
     onMounted(() => {
       checkboxStore.updateCheckbox({
         disabled: disabled.value,
@@ -154,21 +166,30 @@ export default defineComponent({
     );
 
     watch(
-      [innerValue, isCheckAll, indeterminate],
-      ([val, isCheckAll, indeterminate], [oldValue]) => {
+      [innerValue],
+      ([val], [oldValue]) => {
         nextTick(() => {
           checkboxStore.updateChecked({
             checked: val,
             oldChecked: oldValue,
-            isCheckAll,
-            indeterminate,
+            isCheckAll: isCheckAll.value,
+            indeterminate: indeterminate.value,
           });
         });
       },
       { immediate: true },
     );
 
+    watch([isCheckAll, indeterminate, options], ([isCheckAll, indeterminate]) => {
+      checkboxStore.updateChecked({
+        checked: innerValue.value,
+        isCheckAll,
+        indeterminate,
+      });
+    });
+
     const addStoreKeyToCheckbox = (nodes: VNode[]) => {
+      if (!nodes) return;
       for (let i = 0, len = nodes.length; i < len; i++) {
         const vNode = nodes[i];
         if (vNode.componentOptions && /TCheckbox/.test(vNode.tag)) {

src/checkbox/store.ts

@@ -12,7 +12,7 @@ type ObserverMap = {
 
 export interface UpdateCheckedData {
   checked: CheckboxStoreData['checked'];
-  oldChecked: CheckboxStoreData['checked'];
+  oldChecked?: CheckboxStoreData['checked'];
   isCheckAll: boolean;
   indeterminate: boolean;
 }
@@ -45,7 +45,7 @@ class CheckboxStore {
   updateChecked({
     checked, isCheckAll, oldChecked, indeterminate,
   }: UpdateCheckedData) {
-    const changedChecked = getChangedChecked(checked, oldChecked);
+    const changedChecked = oldChecked ? getChangedChecked(checked, oldChecked) : checked;
     const checkedParams: ObserverListenerParams = {
       parentChecked: checked,
       parentIsCheckAll: isCheckAll,

src/common.ts

@@ -69,6 +69,11 @@ export type CSSSelector = string;
 export interface KeysType {
   value?: string;
   label?: string;
+  disabled?: string;
+}
+
+export interface TreeKeysType extends KeysType {
+  children?: string;
 }
 
 export interface HTMLElementAttributes {

src/image/_example/extra-always.vue

@@ -2,11 +2,7 @@
   <t-space :size="32">
     <t-space direction="vertical">
       <strong :style="{ fontSize: '20px' }">有遮罩</strong>
-      <t-image
-        src="https://tdesign.gtimg.com/demo/demo-image-1.png"
-        :style="{ width: '284px', height: '160px' }"
-        :overlayContent="renderMask"
-      />
+      <t-image :src="src" :style="{ width: '284px', height: '160px' }" :overlayContent="renderMask" />
     </t-space>
     <t-space direction="vertical">
       <strong :style="{ fontSize: '20px' }">无遮罩</strong>
@@ -27,6 +23,7 @@ import { Tag } from 'tdesign-vue';
 export default Vue.extend({
   data() {
     return {
+      src: '',
       // renderMask 支持插槽
       // eslint-disable-next-line
       renderMask: (h) => (
@@ -74,6 +71,12 @@ export default Vue.extend({
       ),
     };
   },
+  created() {
+    const timer = setTimeout(() => {
+      this.src = 'https://tdesign.gtimg.com/demo/demo-image-1.png';
+      clearTimeout(timer);
+    }, 100);
+  },
   methods: {},
 });
 </script>

src/image/image.tsx

@@ -53,7 +53,7 @@ export default defineComponent({
       ([src, globalConfig]) => {
         const { replaceImageSrc } = globalConfig || {};
         const tmpUrl = isFunction(replaceImageSrc) ? replaceImageSrc(props) : src;
-        if (tmpUrl === src) return;
+        if (tmpUrl === imageStrSrc.value && imageStrSrc.value) return;
         imageStrSrc.value = tmpUrl;
       },
       { immediate: true },

src/popup/plugin.tsx

@@ -167,7 +167,7 @@ const removeOverlayInstance = () => {
   }
 };
 
-export type PluginMethod = (triggerEl: string, content: TNode, popupProps?: TdPopupProps) => Instance;
+export type PluginMethod = (triggerEl: string | HTMLElement, content: TNode, popupProps?: TdPopupProps) => Instance;
 
 export const createPopupPlugin: PluginMethod = (trigger, content, popupProps) => {
   const hasTrigger = triggerType(popupProps?.trigger || 'hover');

src/select/_example/virtual-scroll.vue

@@ -4,6 +4,7 @@
     <t-select
       v-model="value1"
       :options="options"
+      filterable
       placeholder="请选择"
       :style="{ width: '300px' }"
       :scroll="{ type: 'virtual' }"

src/select/hooks/useSelectOptions.ts

@@ -8,8 +8,9 @@ import {
 } from 'vue';
 import get from 'lodash/get';
 import {
-  TdSelectProps, SelectKeysType, TdOptionProps, SelectOptionGroup, SelectValue,
+  TdSelectProps, TdOptionProps, SelectOptionGroup, SelectValue,
 } from '../type';
+import { KeysType } from '../../common';
 
 type UniOption = (TdOptionProps | SelectOptionGroup) & {
   index?: number;
@@ -19,7 +20,7 @@ type UniOption = (TdOptionProps | SelectOptionGroup) & {
 export default function useSelectOptions(
   props: TdSelectProps,
   instance: ComponentInternalInstance,
-  keys: Ref<SelectKeysType>,
+  keys: Ref<KeysType>,
 ) {
   // 内部 options 记录
   const options = ref<UniOption[]>([]);
@@ -33,12 +34,13 @@ export default function useSelectOptions(
     // 解析 props 中 options 字段的配置，以此初始化 innerOptions
     const innerOptions: UniOption[] = props.options?.map((option) => {
       const getFormatOption = (option: TdOptionProps) => {
-        const { value, label } = keys.value;
+        const { value, label, disabled } = keys.value;
         const res = {
           ...option,
           index: dynamicIndex,
           label: get(option, label),
           value: get(option, value),
+          disabled: get(option, disabled),
         };
         dynamicIndex += 1;
         return res;

src/select/option-props.ts

@@ -32,6 +32,6 @@ export default {
   },
   /** 选项值 */
   value: {
-    type: [String, Number, Boolean] as PropType<TdOptionProps['value']>,
+    type: [String, Number] as PropType<TdOptionProps['value']>,
   },
 };