chore: release 1.9.2-naruto (#3141)

* chore: update group code (#3111)

* feat(Tag): 增加自定义颜色参数 (#3101)

* feat(tag): add color attribute to t-tag in order to customize tag color

feat #3004

* feat: tag自定义颜色下light和light-outline的背景色使用计算的色阶展示

feat #3004

* feat: 补充缺失的类型

* refactor(tag): 将获取颜色样式的代码抽取成方法

* feat(tag): 改用chorma计算色阶

* chore: update snapshot

* chore: update demo display

* feat(tag): use transparent color for the light mode t-tag when using with color props

* chore: update snapshot

* feat: 补充类型声明 & 清理多余依赖

---------

Co-authored-by: Uyarn <[email protected]>

* fix(transfer): trigger exception for the search event (#3118)

* chore: fix image locale and update snapshot (#3119)

* fix(loading): export directive alias (#3120)

Co-authored-by: yojim <[email protected]>

* feat(TagInput): expand the deletion function of collapsedItems(#2941) (#2942)

* feat(TagInput): expand the deletion function of collapsedItems(#2941)

* fix(TagInput): onClose parameter(#2941)

* chore: update api

* chore: update api

* chore: update api

* chore: update api

---------

Co-authored-by: Uyarn <[email protected]>

* fix(checkbox): checkboxGroup max effects disable status

* docs(dialog): add comment for usage precautions (#3126)

* fix(date-picker): over parse when valueType is Date (#3127)

* fix(date-picker): over parse when valueType is Date

* chore: fix lint

* docs(dialog): mention destroy DOM elements in dialog.md (#3125)

* docs(dialog): mention destroy DOM elements in dialog.md

* docs(dialog): add more specific description in dialog.md

* docs(dialog): update translations in dialog.en-US.md

* docs(dialog): update colons in dialog.en-US.md

* fix(menu): remove usage of `height` in menu demos (#3135)

* fix(menu): remove usage of `height` in menu demos

* fix(menu): update snapshots

* fix(table): use the `fixedRows` property console to report errors (#3134)

* fix(Transfer): fix tree data filter error (#3137)

* fix(Transfer): fix tree data filter error

* fix(Transfer): fix tree data filter error

* fix(datepicker): fix datepicker week parse error (#3138)

* chore: rename loading directive export (#3140)

* chore: release 1.9.2 (#3139)

* chore: release 1.9.2

* chore: update snapshot

---------

Co-authored-by: maoyiluo <[email protected]>
Co-authored-by: betavs <[email protected]>
Co-authored-by: Yoki <[email protected]>
Co-authored-by: yojim <[email protected]>
Co-authored-by: odinlin <[email protected]>
Co-authored-by: LoopZhou <[email protected]>
Co-authored-by: Lyan-u <[email protected]>
Co-authored-by: Yunfei Shen <[email protected]>

README-zh_CN.md

@@ -84,7 +84,7 @@ TDesign 欢迎任何愿意参与贡献的参与者。如果需要本地运行代
 
 有任何问题，建议通过 [Github issues](https://github.com/Tencent/tdesign-vue/issues) 反馈或扫码加入用户微信群。
 
-<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/Vue2-IM.png" width="200" />
+<img src="https://raw.githubusercontent.com/Tencent/tdesign/main/packages/components/src/images/groups/vue2-group.png" width="200" />
 
 # 开源协议
 

README.md

@@ -86,7 +86,7 @@ Contributing is welcome. Read [guidelines for contributing](https://github.com/T
 
 Create your [Github issues](https://github.com/Tencent/tdesign-vue/issues) or scan the QR code below to join our user groups
 
-<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/Vue2-IM.png" width="200" />
+<img src="https://raw.githubusercontent.com/Tencent/tdesign/main/packages/components/src/images/groups/vue2-group.png" width="200" />
 
 # License
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tdesign-vue",
   "purename": "tdesign",
-  "version": "1.9.1-naruto",
+  "version": "1.9.2-naruto",
   "description": "tdesign-vue",
   "title": "tdesign-vue",
   "keywords": [
@@ -106,6 +106,7 @@
   "devDependencies": {
     "@babel/cli": "^7.5.5",
     "@babel/core": "~7.22.5",
+    "@babel/helper-module-imports": "7.22.5",
     "@babel/eslint-parser": "~7.23.10",
     "@babel/plugin-transform-class-properties": "^7.22.3",
     "@babel/plugin-transform-modules-commonjs": "^7.9.6",

src/cascader/_example/collapsed.vue

@@ -1,19 +1,31 @@
 <template>
   <t-space direction="vertical">
+    <h3>default:</h3>
     <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 }}
-            </p>
-          </template>
-          <span v-show="count > 0" style="color: #00a870; margin-left: 10px">+{{ count }}</span>
-        </t-popup>
-      </template>
-    </t-cascader>
+
+    <h3>use collapsedItems:</h3>
+    <t-space>
+      <div>size control:</div>
+      <t-radio-group :value="size" :options="['small', 'medium', 'large']" @change="(value) => (size = value)" />
+    </t-space>
+    <t-space>
+      <span>disabled control:</span>
+      <t-checkbox :checked="disabled" @change="(value) => (disabled = value)" />
+    </t-space>
+    <t-space>
+      <span>readonly control:</span>
+      <t-checkbox :checked="readonly" @change="(value) => (readonly = value)" />
+    </t-space>
+    <t-cascader
+      v-model="value"
+      :options="options"
+      multiple
+      :min-collapsed-num="minCollapsedNum"
+      :collapsed-items="collapsedItems"
+      :size="size"
+      :disabled="disabled"
+      :readonly="readonly"
+    />
   </t-space>
 </template>
 <script lang="jsx">
@@ -55,23 +67,37 @@ export default {
         },
       ],
       value: ['1.1', '1.2', '1.3'],
+      size: 'medium',
+      disabled: false,
+      readonly: false,
+      minCollapsedNum: 1,
     };
   },
   methods: {
-    collapsedItems(h, { value: selectedValue, count }) {
-      if (!count) return;
-      const value = selectedValue instanceof Array ? selectedValue : [selectedValue];
-      // hover展示全部已选项
+    collapsedItems(h, { value, onClose }) {
+      if (!(value instanceof Array)) return null;
+      const count = value.length - this.minCollapsedNum;
+      const collapsedTags = value.slice(this.minCollapsedNum, value.length);
+      if (count <= 0) return null;
       return (
         <t-popup>
           <div slot="content">
-            {value.map((item) => (
-              <p style="padding: 10px;">{item.label}</p>
+            {collapsedTags.map((item, index) => (
+              <t-tag
+                key={item}
+                style={{ marginRight: '4px' }}
+                size={this.size}
+                disabled={this.disabled}
+                closable={!this.readonly && !this.disabled}
+                onClose={(context) => onClose({ e: context.e, index: this.minCollapsedNum + index })}
+              >
+                {item}
+              </t-tag>
             ))}
           </div>
-          <span v-show={count > 0} style="color: #ED7B2F; margin-left: 10px;">
-            +{count}
-          </span>
+          <t-tag size={this.size} disabled={this.disabled}>
+            Function - More({count})
+          </t-tag>
         </t-popup>
       );
     },

src/cascader/cascader.en-US.md

@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Cascader Props
 
 name | type | default | description | required
@@ -10,7 +11,7 @@ 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
-collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 disabled | Boolean | - | \- | N
 empty | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 filter | Function | - | Typescript：`(filterWords: string, node: TreeNodeModel) => boolean \| Promise<boolean>` | N
@@ -45,7 +46,7 @@ tips | String / Slot / Function | - | tips at the bottom of cascader。Typescrip
 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
+valueDisplay | String / Slot / Function | - | `MouseEvent<SVGElement>`。Typescript：`string \| TNode<{ value: CascaderValue<CascaderOption>; onClose: (index: number) => void; displayValue?: CascaderValue<CascaderOption>; selectedOptions: 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
 onBlur | Function |  | Typescript：`(context: { value: CascaderValue<CascaderOption> } & SelectInputBlurContext ) => void`<br/> | N

src/cascader/cascader.md

@@ -1,16 +1,17 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Cascader Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 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
-collapsedItems | Slot / Function | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量。TS 类型：`TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+collapsedItems | Slot / Function | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调。TS 类型：`TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 disabled | Boolean | - | 是否禁用组件 | 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
@@ -44,7 +45,7 @@ tips | String / Slot / Function | - | 输入框下方提示文本，会根据不
 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
-valueDisplay | String / Slot / Function | - | 【开发中】自定义选中项呈现的内容。TS 类型：`string \| TNode<{ value: CascaderValue<CascaderOption>; onClose: (index: number) => void; displayValue?: CascaderValue<CascaderOption> }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+valueDisplay | String / Slot / Function | - | 自定义选中项呈现的内容。TS 类型：`string \| TNode<{ value: CascaderValue<CascaderOption>; onClose: (index: number) => void; displayValue?: CascaderValue<CascaderOption>; selectedOptions: CascaderOption[] }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.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> } & SelectInputBlurContext ) => void`<br/>当输入框失去焦点时触发 | N

src/cascader/cascader.tsx

@@ -11,7 +11,7 @@ import props from './props';
 
 import { useCascaderContext } from './hooks';
 import {
-  CascaderValue, TreeKeysType, TdSelectInputProps, TdCascaderProps,
+  CascaderValue, TdSelectInputProps, TdCascaderProps,
 } from './interface';
 import { useConfig, usePrefixClass, useCommonClassName } from '../hooks/useConfig';
 import { PopupVisibleChangeContext } from '../popup';
@@ -22,12 +22,6 @@ import useFormDisabled from '../hooks/useFormDisabled';
 import { TagInputValue } from '../tag-input';
 import { renderTNodeJSX } from '../utils/render-tnode';
 
-const DEFAULT_KEYS = {
-  label: 'label',
-  value: 'value',
-  children: 'children',
-};
-
 export default defineComponent({
   name: 'TCascader',
 
@@ -124,24 +118,6 @@ export default defineComponent({
       );
     };
 
-    const renderCollapsedItems = () => {
-      const cascaderValue = this.innerValue || [];
-      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;
-        if (tmpValue === undefined) return null;
-        return cascaderContext.treeStore.getNode(tmpValue).data;
-      });
-      return renderTNodeJSX(this, 'collapsedItems', {
-        params: {
-          value: cascaderOptions,
-          collapsedSelectedItems: cascaderOptions.slice(0, this.minCollapsedNum),
-          count: value.length - this.minCollapsedNum,
-        },
-      });
-    };
-
     const {
       setVisible, visible, inputVal, setInputVal,
     } = cascaderContext;
@@ -159,7 +135,7 @@ export default defineComponent({
             keys: this.keys,
             allowInput: isFilterable,
             minCollapsedNum: this.minCollapsedNum,
-            collapsedItems: renderCollapsedItems,
+            collapsedItems: this.collapsedItems,
             label: this.label,
             valueDisplay: renderValueDisplay,
             suffix: this.suffix,
@@ -243,6 +219,7 @@ export default defineComponent({
           tag: slots.tag,
           suffix: slots.suffix,
           label: slots.label,
+          collapsedItems: slots.collapsedItems,
         }}
       />
     );

src/cascader/props.ts

@@ -20,7 +20,7 @@ export default {
   checkStrictly: Boolean,
   /** 是否支持清空选项 */
   clearable: Boolean,
-  /** 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量 */
+  /** 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调 */
   collapsedItems: {
     type: Function as PropType<TdCascaderProps['collapsedItems']>,
   },
@@ -165,7 +165,7 @@ export default {
     type: [String, Number, Array] as PropType<TdCascaderProps['defaultValue']>,
     default: (): TdCascaderProps['defaultValue'] => [],
   },
-  /** 【开发中】自定义选中项呈现的内容 */
+  /** 自定义选中项呈现的内容 */
   valueDisplay: {
     type: [String, Function] as PropType<TdCascaderProps['valueDisplay']>,
   },

src/cascader/type.ts

@@ -39,9 +39,14 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
    */
   clearable?: boolean;
   /**
-   * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量
+   * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调
    */
-  collapsedItems?: TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number }>;
+  collapsedItems?: TNode<{
+    value: CascaderOption[];
+    collapsedSelectedItems: CascaderOption[];
+    count: number;
+    onClose: (context: { index: number; e?: MouseEvent }) => void;
+  }>;
   /**
    * 是否禁用组件
    */
@@ -190,14 +195,15 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
    */
   defaultValue?: CascaderValue<CascaderOption>;
   /**
-   * 【开发中】自定义选中项呈现的内容
+   * 自定义选中项呈现的内容
    */
   valueDisplay?:
     | string
     | TNode<{
         value: CascaderValue<CascaderOption>;
         onClose: (index: number) => void;
         displayValue?: CascaderValue<CascaderOption>;
+        selectedOptions: CascaderOption[];
       }>;
   /**
    * 选中值模式。all 表示父节点和子节点全部会出现在选中值里面；parentFirst 表示当子节点全部选中时，仅父节点在选中值里面；onlyLeaf 表示无论什么情况，选中值仅呈现叶子节点

src/checkbox/checkbox.tsx

@@ -1,5 +1,5 @@
 import {
-  defineComponent, ref, toRefs, inject, watch, onBeforeUnmount, computed, nextTick,
+  defineComponent, ref, toRefs, inject, watch, onBeforeUnmount, computed,
 } from 'vue';
 import props from './props';
 import {
@@ -155,9 +155,9 @@ export default defineComponent({
            * checked state can influence disabled state because of `max`,
            * therefore we need to update disabled state after checked state changed
            */
-          nextTick(() => {
+          setTimeout(() => {
             handleParentDisabled(data);
-          });
+          }, 0);
           if (data.checkboxName) {
             tName.value = data.checkboxName;
           }

src/date-picker/DatePicker.tsx

@@ -1,6 +1,7 @@
 import { defineComponent, watch, computed } from 'vue';
 import dayjs from 'dayjs';
 import { CalendarIcon as TdCalendarIcon } from 'tdesign-icons-vue';
+import isDate from 'lodash/isDate';
 
 import { usePrefixClass } from '../hooks/useConfig';
 import { useGlobalIcon } from '../hooks/useGlobalIcon';
@@ -51,7 +52,10 @@ export default defineComponent({
     const isDisabled = computed(() => formDisabled.value || props.disabled);
 
     watch(popupVisible, (visible) => {
-      const dateValue = value.value ? covertToDate(value.value as string, formatRef.value?.valueType) : value.value;
+      // Date valueType、week mode 、quarter mode nad empty string don't need to be parsed
+      const dateValue = value.value && !isDate(value.value) && !['week', 'quarter'].includes(props.mode)
+        ? covertToDate(value.value as string, formatRef.value?.valueType)
+        : value.value;
 
       cacheValue.value = formatDate(dateValue, {
         format: formatRef.value.format,

src/dialog/_example-composition/plugin.vue

@@ -47,6 +47,7 @@ const handleDN = () => {
     },
   });
 };
+// 每一次执行方法，都会创建一个新的弹框，注意使用方法，避免多次创建重复内容
 const onConfirm = () => {
   const confirmDia = DialogPlugin.confirm({
     header: 'Dialog-Confirm-Plugin',