chore: release 1.10.4-naruto (#3367)

* chore(deps-dev): bump @rollup/plugin-node-resolve from 11.2.1 to 15.3.0 (#3352) Bumps [@rollup/plugin-node-resolve](https://github.com/rollup/plugins/tree/HEAD/packages/node-resolve) from 11.2.1 to 15.3.0. - [Changelog](https://github.com/rollup/plugins/blob/master/packages/node-resolve/CHANGELOG.md) - [Commits](https://github.com/rollup/plugins/commits/node-resolve-v15.3.0/packages/node-resolve) --- updated-dependencies: - dependency-name: "@rollup/plugin-node-resolve" dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix(tree): custom icons cannot be clicked without child nodes (#3354) * chore: fix select input demo (#3358) * chore: fix select input demo * chore: update snapshot * fix: fix shaking when dialog and drawer show (#3362) * fix: fix shaking when dialog and drawer show * chore: update common * feat(TimePicker): support autoswap API (#3363) * feat(timepicker): support autoswap API * feat(timepicker): support autoswap API * chore: live demo * chore: release 1.10.4 (#3366) * chore: release 1.10.4 * chore: changelog's changes --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * fix(cascader): custom option * chore: update CHANGELOG --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: 阿菜 Cai <[email protected]> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Tencent · Oct 18, 2024 · 2329afb · 2329afb
1 parent 5ad82a5
commit 2329afb
Show file tree

Hide file tree

Showing 19 changed files with 135 additions and 75 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,17 @@ toc: false
 docClass: timeline
 ---
 
+## 🌈 1.10.4 `2024-10-18` 
+### 🚀 Features
+- `TimePicker`: 新增 `autoSwap` API，支持`1.10.2` 版本之后仍支持保持选定的左右侧时间大小顺序 @uyarn ([#3363](https://github.com/Tencent/tdesign-vue/pull/3363))
+### 🐞 Bug Fixes
+- `Tree`: 修复叶子节点自定义的图标可被点击的问题 @RSS1102 ([#3354](https://github.com/Tencent/tdesign-vue/pull/3354))
+- `Drawer`: 修复打开 `drawer` 时页面抖动的问题 @RSS1102 @uyarn ([#3362](https://github.com/Tencent/tdesign-vue/pull/3362))
+- `Dialog`: 修复打开 `dialog` 时页面抖动的问题 @RSS1102 ([#3362](https://github.com/Tencent/tdesign-vue/pull/3362))
+- `Cascader`: 修复不能通过插槽自定义选项内容的问题
+### 🚧 Others
+- `DatePicker`: 移除文档中错误的`value` 类型描述
+
 ## 🌈 1.10.3 `2024-09-27` 
 ### 🐞 Bug Fixes
 - `Cascader`: 修复初始化滚动节点时未兼容单选父节点滚动的缺陷 @uyarn ([#3342](https://github.com/Tencent/tdesign-vue/pull/3342))

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tdesign-vue",
   "purename": "tdesign",
-  "version": "1.10.3-naruto",
+  "version": "1.10.4-naruto",
   "description": "tdesign-vue",
   "title": "tdesign-vue",
   "keywords": [
@@ -119,7 +119,7 @@
     "@rollup/plugin-babel": "^5.1.0",
     "@rollup/plugin-commonjs": "^18.0.0",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-replace": "^2.4.2",
     "@rollup/plugin-url": "^5.0.1",
     "@testing-library/dom": "^8.20.0",

diff --git a/src/cascader/components/Item.tsx b/src/cascader/components/Item.tsx
@@ -9,7 +9,9 @@ import TLoading from '../../loading';
 
 // type
 import { getKeepAnimationMixins } from '../../config-provider/config-receiver';
-import { CascaderContextType, TreeNodeValue, TreeNode } from '../interface';
+import {
+  CascaderContextType, TreeNodeValue, TreeNode, TdCascaderProps,
+} from '../interface';
 import { usePrefixClass, useCommonClassName } from '../../hooks/useConfig';
 import { useGlobalIcon } from '../../hooks/useGlobalIcon';
 import Ripple from '../../utils/ripple';
@@ -23,6 +25,9 @@ const props = {
       return {};
     },
   },
+  optionChild: {
+    type: [Object, Array] as PropType<TdCascaderProps['option']>,
+  },
   cascaderContext: {
     type: Object as PropType<CascaderContextType>,
   },
@@ -54,7 +59,7 @@ export default defineComponent({
   },
   render() {
     const {
-      iconClass, cascaderContext, itemClass, node, COMPONENT_NAME, onChange, ChevronRightIcon,
+      iconClass, cascaderContext, itemClass, node, COMPONENT_NAME, onChange, ChevronRightIcon, optionChild,
     } = this;
 
     function RenderLabelInner(node: TreeNode, cascaderContext: CascaderContextType) {
@@ -129,7 +134,10 @@ export default defineComponent({
           this.onMouseenter();
         }}
       >
-        {cascaderContext.multiple ? RenderCheckBox(node, cascaderContext) : RenderLabelContent(node, cascaderContext)}
+        {optionChild
+          || (cascaderContext.multiple
+            ? RenderCheckBox(node, cascaderContext)
+            : RenderLabelContent(node, cascaderContext))}
         {node.children
           && (node.loading ? <TLoading class={iconClass} size="small" /> : <ChevronRightIcon class={iconClass} />)}
       </li>

diff --git a/src/cascader/components/Panel.tsx b/src/cascader/components/Panel.tsx
@@ -4,6 +4,7 @@ import { TreeNode, CascaderContextType, CascaderValue } from '../interface';
 import CascaderProps from '../props';
 import { usePrefixClass, useConfig } from '../../hooks/useConfig';
 import { useTNodeDefault } from '../../hooks/tnode';
+import { getDefaultNode } from '../../hooks/render-tnode';
 
 import { getPanels } from '../core/helper';
 import { expendClickEffect, valueChangeEffect } from '../core/effect';
@@ -56,29 +57,38 @@ export default defineComponent({
       global, COMPONENT_NAME, handleExpand, renderTNodeJSXDefault, cascaderContext, panels, emit,
     } = this;
 
-    const renderItem = (node: TreeNode) => (
-      <Item
-        key={node.value}
-        node={node}
-        cascaderContext={cascaderContext}
-        {...{
-          props: {
-            node,
-            cascaderContext,
-            onClick: () => {
-              emit('click', node.value, node);
-              handleExpand(node, 'click');
-            },
-            onMouseenter: () => {
-              handleExpand(node, 'hover');
-            },
-            onChange: () => {
-              valueChangeEffect(node, cascaderContext);
+    const renderItem = (node: TreeNode, index: number) => {
+      const optionChild = node.data.content
+        ? getDefaultNode(node.data.content(this.$createElement))
+        : renderTNodeJSXDefault('option', {
+          params: { item: node.data, index },
+        });
+
+      return (
+        <Item
+          key={node.value}
+          node={node}
+          cascaderContext={cascaderContext}
+          {...{
+            props: {
+              node,
+              optionChild,
+              cascaderContext,
+              onClick: () => {
+                emit('click', node.value, node);
+                handleExpand(node, 'click');
+              },
+              onMouseenter: () => {
+                handleExpand(node, 'hover');
+              },
+              onChange: () => {
+                valueChangeEffect(node, cascaderContext);
+              },
             },
-          },
-        }}
-      />
-    );
+          }}
+        />
+      );
+    };
 
     const renderList = (treeNodes: TreeNode[], isFilter = false, segment = true, key = '1') => (
       <ul
@@ -92,7 +102,7 @@ export default defineComponent({
         ]}
         key={key}
       >
-        {treeNodes.map((node: TreeNode) => renderItem(node))}
+        {treeNodes.map((node: TreeNode, index: number) => renderItem(node, index))}
       </ul>
     );
 

diff --git a/src/date-picker/date-picker.en-US.md b/src/date-picker/date-picker.en-US.md
@@ -29,8 +29,8 @@ status | String | default | options: default/success/warning/error | N
 suffixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 timePickerProps | Object | - | Typescript：`TimePickerProps`，[TimePicker API Documents](./time-picker?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
 tips | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-value | String / Number / Array / Date | '' | `v-model` is supported。Typescript：`DateValue` `type DateValue = string \| number \| Date`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
-defaultValue | String / Number / Array / Date | '' | uncontrolled property。Typescript：`DateValue` `type DateValue = string \| number \| Date`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
+value | String / Number / Date | '' | `v-model` is supported。Typescript：`DateValue` `type DateValue = string \| number \| Date`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
+defaultValue | String / Number / Date | '' | uncontrolled property。Typescript：`DateValue` `type DateValue = string \| number \| Date`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
 valueType | String | - | Typescript：`DatePickerValueType` `type DatePickerValueType = 'time-stamp' \| 'Date' \| 'YYYY' \| 'YYYY-MM' \| 'YYYY-MM-DD' \| 'YYYY-MM-DD HH' \| 'YYYY-MM-DD HH:mm' \| 'YYYY-MM-DD HH:mm:ss' \| 'YYYY-MM-DD HH:mm:ss:SSS'` `type ValueTypeEnum = DatePickerValueType`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
 onBlur | Function |  | Typescript：`(context: { value: DateValue; e: FocusEvent }) => void`<br/> | N
 onChange | Function |  | Typescript：`(value: DateValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`import { Dayjs } from 'dayjs'`<br/><br/>`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear'`<br/> | N

diff --git a/src/date-picker/date-picker.md b/src/date-picker/date-picker.md
@@ -29,8 +29,8 @@ status | String | default | 输入框状态。可选项：default/success/warnin
 suffixIcon | Slot / Function | - | 用于自定义组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 timePickerProps | Object | - | 透传 TimePicker 组件属性。TS 类型：`TimePickerProps`，[TimePicker API Documents](./time-picker?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
 tips | String / Slot / Function | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-value | String / Number / Array / Date | '' | 选中值。支持语法糖 `v-model`。TS 类型：`DateValue` `type DateValue = string \| number \| Date`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
-defaultValue | String / Number / Array / Date | '' | 选中值。非受控属性。TS 类型：`DateValue` `type DateValue = string \| number \| Date`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
+value | String / Number / Date | '' | 选中值。支持语法糖 `v-model`。TS 类型：`DateValue` `type DateValue = string \| number \| Date`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
+defaultValue | String / Number / Date | '' | 选中值。非受控属性。TS 类型：`DateValue` `type DateValue = string \| number \| Date`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
 valueType | String | - | 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式。`ValueTypeEnum` 即将废弃，请更为使用 `DatePickerValueType`。TS 类型：`DatePickerValueType` `type DatePickerValueType = 'time-stamp' \| 'Date' \| 'YYYY' \| 'YYYY-MM' \| 'YYYY-MM-DD' \| 'YYYY-MM-DD HH' \| 'YYYY-MM-DD HH:mm' \| 'YYYY-MM-DD HH:mm:ss' \| 'YYYY-MM-DD HH:mm:ss:SSS'` `type ValueTypeEnum = DatePickerValueType`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
 onBlur | Function |  | TS 类型：`(context: { value: DateValue; e: FocusEvent }) => void`<br/>当输入框失去焦点时触发 | N
 onChange | Function |  | TS 类型：`(value: DateValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource }) => void`<br/>选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`import { Dayjs } from 'dayjs'`<br/><br/>`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear'`<br/> | N

diff --git a/src/drawer/drawer.tsx b/src/drawer/drawer.tsx
@@ -137,7 +137,8 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DrawerConfig>('d
   },
 
   mounted() {
-    const hasScrollBar = document.body.scrollHeight > document.body.clientHeight;
+    const hasScrollBar = window.innerWidth > document.documentElement.clientWidth;
+
     const scrollWidth = hasScrollBar ? getScrollbarWidth() : 0;
 
     this.styleEl = document.createElement('style');

diff --git a/src/select-input/_example-composition/multiple.vue b/src/select-input/_example-composition/multiple.vue
@@ -16,7 +16,7 @@
 
     <!-- :popup-props="{ trigger: 'hover' }" -->
     <t-select-input
-      :input-value:sync="inputValue"
+      :input-value.sync="inputValue"
       :value="value"
       :allow-input="allowInput"
       :placeholder="allowInput ? '请选择或输入' : '请选择'"

diff --git a/src/select-input/_example/multiple.vue b/src/select-input/_example/multiple.vue
@@ -16,7 +16,7 @@
 
     <!-- :popup-props="{ trigger: 'hover' }" -->
     <t-select-input
-      :input-value:sync="inputValue"
+      :input-value.sync="inputValue"
       :value="value"
       :allow-input="allowInput"
       :placeholder="allowInput ? '请选择或输入' : '请选择'"

diff --git a/src/time-picker/_usage/time-range-picker-props.json b/src/time-picker/_usage/time-range-picker-props.json
@@ -4,6 +4,12 @@
     "type": "Boolean",
     "defaultValue": false,
     "options": []
+  },
+   {
+    "name": "autoSwap",
+    "type": "Boolean",
+    "defaultValue": true,
+    "options": []
   },
   {
     "name": "borderless",

diff --git a/src/time-picker/time-picker.en-US.md b/src/time-picker/time-picker.en-US.md
@@ -50,6 +50,7 @@ pick | `(value: TimePickerValue, context: { e: MouseEvent })` | \-
 name | type | default | description | required
 -- | -- | -- | -- | --
 allowInput | Boolean | false | \- | N
+autoSwap | Boolean | true | \- | N
 borderless | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
 disableTime | Function | - | Typescript：`(h: number, m: number, s: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number> }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N

diff --git a/src/time-picker/time-picker.md b/src/time-picker/time-picker.md
@@ -50,6 +50,7 @@ pick | `(value: TimePickerValue, context: { e: MouseEvent })` | 面板选中值
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 allowInput | Boolean | false | 是否允许直接输入时间 | N
+autoSwap | Boolean | true | 是否自动调换左右区间的顺序，默认为 true；若需要支持跨天的场景，可以设置为 false | N
 borderless | Boolean | false | 无边框模式 | N
 clearable | Boolean | false | 是否允许清除选中值 | N
 disableTime | Function | - | 禁用时间项。TS 类型：`(h: number, m: number, s: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number> }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N

diff --git a/src/time-picker/time-range-picker-props.ts b/src/time-picker/time-range-picker-props.ts
@@ -10,6 +10,11 @@ import { PropType } from 'vue';
 export default {
   /** 是否允许直接输入时间 */
   allowInput: Boolean,
+  /** 是否自动调换左右区间的顺序，默认为 true；若需要支持跨天的场景，可以设置为 false */
+  autoSwap: {
+    type: Boolean,
+    default: true,
+  },
   /** 无边框模式 */
   borderless: Boolean,
   /** 是否允许清除选中值 */

diff --git a/src/time-picker/time-range-picker.tsx b/src/time-picker/time-range-picker.tsx
@@ -42,7 +42,6 @@ export default defineComponent({
     const currentPanelIdx = ref(undefined);
     const currentValue = ref<Array<string>>(TIME_PICKER_EMPTY);
     const isShowPanel = ref(false);
-    let openedPanels: number[] = [];
 
     const inputClasses = computed(() => [
       `${componentName.value}__group`,
@@ -73,7 +72,6 @@ export default defineComponent({
 
     const handleClick = ({ position }: { position: 'first' | 'second' }) => {
       currentPanelIdx.value = position === 'first' ? 0 : 1;
-      openedPanels.push(currentPanelIdx.value);
     };
 
     const handleTimeChange = (newValue: string) => {
@@ -84,18 +82,6 @@ export default defineComponent({
       }
     };
 
-    const setCurrentValue2InnerValue = () => {
-      const [startTime, endTime] = currentValue.value;
-      const startDayjs = dayjs(startTime, props.format);
-      const endDayjs = dayjs(endTime, props.format);
-
-      if (startDayjs.isAfter(endDayjs, 'second')) {
-        setInnerValue([currentValue.value[1], currentValue.value[0]]);
-      } else {
-        setInnerValue([currentValue.value[0], currentValue.value[1]]);
-      }
-    };
-
     const handleInputBlur = (value: TimeRangeValue, { e }: { e: FocusEvent }) => {
       if (props.allowInput) {
         const isValidTime = validateInputValue(currentValue.value[currentPanelIdx.value], format.value);
@@ -104,7 +90,6 @@ export default defineComponent({
           currentPanelIdx.value === 0
             ? (currentValue.value = [formattedVal, currentValue.value[1] ?? formattedVal])
             : (currentValue.value = [currentValue.value[0] ?? formattedVal, formattedVal]);
-          setCurrentValue2InnerValue();
         }
       }
       props.onBlur?.({ value, e });
@@ -120,33 +105,29 @@ export default defineComponent({
     };
 
     const handleClickConfirm = () => {
-      if (openedPanels.length < 2) {
-        currentPanelIdx.value = currentPanelIdx.value === 1 ? 0 : 1;
-        openedPanels.push(currentPanelIdx.value);
-        return;
-      }
-
-      const noValidIndex = currentValue.value.findIndex((v) => !validateInputValue(v, format.value));
-      if (noValidIndex !== -1) {
-        currentPanelIdx.value = noValidIndex;
-        openedPanels.push(currentPanelIdx.value);
-        return;
-      }
-
-      setCurrentValue2InnerValue();
+      const isValidTime = !currentValue.value.find((v) => !validateInputValue(v, format.value));
+      if (isValidTime) setInnerValue(currentValue.value);
+      if (props.autoSwap) autoSwapTime();
       isShowPanel.value = false;
     };
 
     const handleFocus = (value: TimeRangeValue, { e, position }: { e: FocusEvent; position: RangeInputPosition }) => {
-      const panelIndex = position === 'first' ? 0 : 1;
-      if (isShowPanel.value && currentPanelIdx.value !== panelIndex) {
-        currentPanelIdx.value = panelIndex;
-        openedPanels.push(currentPanelIdx.value);
-      }
       props.onFocus?.({ value, e, position: position === 'first' ? 'start' : 'end' });
       ctx.emit('focus', { value, e, position: position === 'first' ? 'start' : 'end' });
     };
 
+    const autoSwapTime = () => {
+      const [startTime, endTime] = currentValue.value;
+      const startDayjs = dayjs(startTime, props.format);
+      const endDayjs = dayjs(endTime, props.format);
+
+      if (startDayjs.isAfter(endDayjs, 'second')) {
+        setInnerValue([currentValue.value[1], currentValue.value[0]]);
+      } else {
+        setInnerValue([currentValue.value[0], currentValue.value[1]]);
+      }
+    };
+
     const handleOnPick = (pickValue: string, e: MouseEvent) => {
       let pickedRangeValue = [];
       let context: { e: MouseEvent; position?: TimeRangePickerPartial } = { e };
@@ -165,10 +146,7 @@ export default defineComponent({
       () => isShowPanel.value,
       () => {
         currentValue.value = isShowPanel.value ? innerValue.value ?? TIME_PICKER_EMPTY : TIME_PICKER_EMPTY;
-        if (!isShowPanel.value) {
-          currentPanelIdx.value = undefined;
-          openedPanels = [];
-        }
+        if (!isShowPanel.value) currentPanelIdx.value = undefined;
       },
     );
     return {

diff --git a/src/time-picker/type.ts b/src/time-picker/type.ts
@@ -134,6 +134,11 @@ export interface TdTimeRangePickerProps {
    * @default false
    */
   allowInput?: boolean;
+  /**
+   * 是否自动调换左右区间的顺序，默认为 true；若需要支持跨天的场景，可以设置为 false
+   * @default true
+   */
+  autoSwap?: boolean;
   /**
    * 无边框模式
    * @default false