chore: release 1.10.6-naruto

CHANGELOG.md

@@ -5,6 +5,34 @@ toc: false
 docClass: timeline
 ---
 
+## 🌈 1.10.6 `2024-12-05`
+
+### 🚀 Features
+
+- `Icon`: 图标库发布 `0.3.0`版本，新增 907 个新图标；命名优化`blockchain` 重命名改为`transform-1`,`gesture-pray-1`重命名为`gesture-open`,`gesture-ranslation-1`重命名为`wave-bye`, `gesture-up-1`重命名为`gesture-typing`,`gesture-up-2`重命名为`gesture-right-slip`,`logo-wechat`重命名为`logo-wechat-stroke-filled`，移除`tree-list`、`logo-adobe-photoshop-1` 等错误图标 @uyarn ([#3392](https://github.com/Tencent/tdesign-vue/pull/3392))
+- `DatePicker`: 新增 `multiple` API, 用于支持多选日期的场景 @hkaikai ([#3407](https://github.com/Tencent/tdesign-vue/pull/3407))
+- `Dialog`: 新增 `beforeOpen` 和 `beforeClose` API @Wesley-0808 ([#3393](https://github.com/Tencent/tdesign-vue/pull/3393))
+- `Drawer`: 新增 `beforeOpen` 和 `beforeClose` API @Wesley-0808 ([#3393](https://github.com/Tencent/tdesign-vue/pull/3393))
+- `Form`: 表单组件同时支持 `change` 和 `blur` 的校验触发方式 @myronliu347 ([#3323](https://github.com/Tencent/tdesign-vue/pull/3323))
+- `Tree`: 支持通过`scrollTo`方法滚动到指定节点，`scrollToElement`方法仍保留 @uyarn ([#3415](https://github.com/Tencent/tdesign-vue/pull/3415))
+- `Tree`: 支持`scrollTo`方法通过唯一`key`滚动到指定节点，减少业务计算`index`的需求，具体方法参考示例 @uyarn ([#3415](https://github.com/Tencent/tdesign-vue/pull/3415))
+
+### 🐞 Bug Fixes
+
+- `Transfer`: 修复设置 pageSizeOptions 时切换 pageSize 无法生效得问题 @morningbao ([#3374](https://github.com/Tencent/tdesign-vue/pull/3374))
+- `InputNumber`: 限制输入超过范围外的数字未触发 `blur` 事件 @betavs ([#3399](https://github.com/Tencent/tdesign-vue/pull/3399))
+- `Select`: 修复搜索过滤选项列表时选中值显示错误问题 @morningbao ([#3410](https://github.com/Tencent/tdesign-vue/pull/3410))
+- `Transfer`: 修复树形组件选项禁用在全选下仍可选中的缺陷 @uyarn ([#3412](https://github.com/Tencent/tdesign-vue/pull/3412))
+- `Transer`: 修复拖拽排序向后移动的功能异常 @uyarn ([#3412](https://github.com/Tencent/tdesign-vue/pull/3412))
+- `Table`: 修复树形表格列改变时渲染出错的问题 @myronliu347 ([#3400](https://github.com/Tencent/tdesign-vue/pull/3400))
+- `Slider`: 修复`Slider`组件不支持受控用法的问题 @uyarn ([#3414](https://github.com/Tencent/tdesign-vue/pull/3414))
+
+### 📝 Documentation
+
+- `Icon`: 优化图标检索功能，支持中英文搜索图标 @uyarn ([#3392](https://github.com/Tencent/tdesign-vue/pull/3392))
+
+
+
 ## 🌈 1.10.5 `2024-11-08` 
 ### 🚀 Features
 - `Switch`: 新增 `before-change` API, 用于需要发起异步请求的场景 @centuryPark ([#3386](https://github.com/Tencent/tdesign-vue/pull/3386))

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tdesign-vue",
   "purename": "tdesign",
-  "version": "1.10.5-naruto",
+  "version": "1.10.6-naruto",
   "description": "tdesign-vue",
   "title": "tdesign-vue",
   "keywords": [
@@ -97,7 +97,7 @@
     "mitt": "^3.0.0",
     "raf": "^3.4.1",
     "sortablejs": "^1.15.0",
-    "tdesign-icons-vue": "^0.2.4",
+    "tdesign-icons-vue": "^0.3.2",
     "tinycolor2": "^1.4.2",
     "validator": "^13.5.1"
   },
@@ -178,7 +178,7 @@
     "rollup-plugin-styles": "^4.0.0",
     "rollup-plugin-terser": "~7.0.2",
     "rollup-plugin-vue": "^5.1.9",
-    "tdesign-icons-view": "^0.2.0",
+    "tdesign-icons-view": "^0.3.0",
     "tdesign-publish-cli": "^0.0.12",
     "tdesign-site-components": "^0.13.0",
     "tdesign-theme-generator": "^1.0.5",

site/src/components/page.vue

@@ -22,7 +22,7 @@ const docsMap = {
   en: enDocs,
 };
 
-const registryUrl = 'https://mirrors.tencent.com/npm/tdesign-vue';
+const registryUrl = 'https://service-edbzjd6y-1257786608.hk.apigw.tencentcs.com/release/npm/versions/tdesign-vue';
 
 export default {
   data() {

src/avatar/type.ts

@@ -6,7 +6,7 @@
 
 import { ImageProps } from '../image';
 import { PopupProps } from '../popup';
-import { TNode } from '../common';
+import { TNode, ShapeEnum } from '../common';
 
 export interface TdAvatarProps {
   /**
@@ -81,6 +81,4 @@ export interface TdAvatarGroupProps {
   size?: string;
 }
 
-export type ShapeEnum = 'circle' | 'round';
-
 export type CascadingValue = 'left-up' | 'right-up';

src/common.ts

@@ -58,6 +58,8 @@ export type TreeOptionData<T = string | number> = {
 
 export type SizeEnum = 'small' | 'medium' | 'large';
 
+export type ShapeEnum = 'circle' | 'round';
+
 export type HorizontalAlignEnum = 'left' | 'center' | 'right';
 
 export type VerticalAlignEnum = 'top' | 'middle' | 'bottom';

src/date-picker/DatePicker.tsx

@@ -3,28 +3,30 @@ import dayjs from 'dayjs';
 import { CalendarIcon as TdCalendarIcon } from 'tdesign-icons-vue';
 import isDate from 'lodash/isDate';
 
-import { usePrefixClass } from '../hooks/useConfig';
+import { usePrefixClass, useConfig } from '../hooks/useConfig';
 import { useGlobalIcon } from '../hooks/useGlobalIcon';
 import useSingle from './hooks/useSingle';
 import {
   parseToDayjs, getDefaultFormat, formatTime, formatDate,
 } from '../_common/js/date-picker/format';
 import {
-  subtractMonth, addMonth, extractTimeObj, covertToDate,
+  subtractMonth, addMonth, extractTimeObj, covertToDate, isSame,
 } from '../_common/js/date-picker/utils';
-import type { DateValue } from './type';
+import type { DateMultipleValue, DateValue } from './type';
 import props from './props';
 
 import TSelectInput from '../select-input';
 import TSinglePanel from './panel/SinglePanel';
 import useFormDisabled from '../hooks/useFormDisabled';
+import type { TagInputRemoveContext } from '../tag-input';
 
 export default defineComponent({
   name: 'TDatePicker',
   props,
   setup(props, { emit }) {
     const COMPONENT_NAME = usePrefixClass('date-picker');
     const { CalendarIcon } = useGlobalIcon({ CalendarIcon: TdCalendarIcon });
+    const { global } = useConfig('datePicker');
 
     const {
       inputValue,
@@ -45,13 +47,14 @@ export default defineComponent({
       mode: props.mode,
       format: props.format,
       valueType: props.valueType,
-      enableTimePicker: props.enableTimePicker,
+      enableTimePicker: props.multiple ? false : props.enableTimePicker,
     }));
 
     const { formDisabled } = useFormDisabled();
     const isDisabled = computed(() => formDisabled.value || props.disabled);
 
     watch(popupVisible, (visible) => {
+      if (props.multiple) return;
       // 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)
@@ -66,8 +69,8 @@ export default defineComponent({
 
       // 面板展开重置数据
       if (visible) {
-        year.value = parseToDayjs(value.value, formatRef.value.format).year();
-        month.value = parseToDayjs(value.value, formatRef.value.format).month();
+        year.value = parseToDayjs(value.value as DateValue, formatRef.value.format).year();
+        month.value = parseToDayjs(value.value as DateValue, formatRef.value.format).month();
         time.value = formatTime(value.value, formatRef.value.format, formatRef.value.timeFormat, props.defaultTime);
       } else {
         isHoverCell.value = false;
@@ -76,6 +79,7 @@ export default defineComponent({
 
     // 日期 hover
     function onCellMouseEnter(date: Date) {
+      if (props.multiple) return;
       isHoverCell.value = true;
       inputValue.value = formatDate(date, {
         format: formatRef.value.format,
@@ -84,6 +88,7 @@ export default defineComponent({
 
     // 日期 leave
     function onCellMouseLeave() {
+      if (props.multiple) return;
       isHoverCell.value = false;
       inputValue.value = formatDate(cacheValue.value, {
         format: formatRef.value.format,
@@ -103,6 +108,14 @@ export default defineComponent({
           format: formatRef.value.format,
         });
       } else {
+        if (props.multiple) {
+          const newDate = processDate(date);
+          onChange?.(newDate, {
+            dayjsValue: parseToDayjs(date, formatRef.value.format),
+            trigger: 'pick',
+          });
+          return;
+        }
         onChange?.(
           formatDate(date, {
             format: formatRef.value.format,
@@ -228,21 +241,56 @@ export default defineComponent({
       month.value = nextMonth;
     }
 
+    function processDate(date: Date) {
+      const val = value.value as DateMultipleValue;
+      const isSameDate = val.some((val) => isSame(dayjs(val).toDate(), date));
+      let currentDate: DateMultipleValue;
+
+      if (!isSameDate) {
+        currentDate = val.concat(
+          formatDate(date, { format: formatRef.value.format, targetFormat: formatRef.value.valueType }),
+        );
+      } else {
+        currentDate = val.filter(
+          (val) => formatDate(val, { format: formatRef.value.format, targetFormat: formatRef.value.valueType })
+            !== formatDate(date, { format: formatRef.value.format, targetFormat: formatRef.value.valueType }),
+        );
+      }
+
+      return currentDate.sort((a, b) => dayjs(a).valueOf() - dayjs(b).valueOf());
+    }
+
+    const onTagRemoveClick = (ctx: TagInputRemoveContext) => {
+      const removeDate = dayjs(ctx.item).toDate();
+      const newDate = processDate(removeDate);
+      onChange?.(newDate, {
+        dayjsValue: parseToDayjs(removeDate, formatRef.value.format),
+        trigger: 'tag-remove',
+      });
+    };
+
+    const onTagClearClick = ({ e }: { e: MouseEvent }) => {
+      e.stopPropagation();
+      popupVisible.value = false;
+      onChange?.([], { dayjsValue: dayjs(), trigger: 'clear' });
+    };
+
     const panelProps: any = computed(() => ({
-      value: cacheValue.value as string,
+      value: cacheValue.value,
       year: year.value,
       month: month.value,
       format: formatRef.value.format,
       mode: props.mode,
       presets: props.presets,
-      time: time.value as string,
+      time: props.multiple ? '' : time.value,
       disableDate: props.disableDate,
       disableTime: props.disableTime,
       firstDayOfWeek: props.firstDayOfWeek,
       timePickerProps: props.timePickerProps,
-      enableTimePicker: props.enableTimePicker,
+      enableTimePicker: props.multiple ? false : props.enableTimePicker,
       presetsPlacement: props.presetsPlacement,
       popupVisible: popupVisible.value,
+      multiple: props.multiple,
       onCellClick,
       onCellMouseEnter,
       onCellMouseLeave,
@@ -263,7 +311,10 @@ export default defineComponent({
       popupVisible,
       panelProps,
       isDisabled,
+      onTagRemoveClick,
+      onTagClearClick,
       CalendarIcon,
+      global,
     };
   },
   render() {
@@ -275,6 +326,8 @@ export default defineComponent({
       popupVisible,
       panelProps,
       isDisabled,
+      onTagRemoveClick,
+      onTagClearClick,
       CalendarIcon,
     } = this;
 
@@ -292,15 +345,25 @@ export default defineComponent({
           disabled={isDisabled}
           readonly={this.readonly}
           value={inputValue}
+          inputValue={this.multiple ? '' : (inputValue as string)}
           label={this.label}
           status={this.status}
           tips={this.tips}
           popupProps={datePickerPopupProps}
-          inputProps={{ suffixIcon: renderSuffixIcon(), ...datePickerInputProps }}
+          inputProps={{ ...datePickerInputProps }}
           popupVisible={popupVisible}
           clearable={this.clearable}
           allowInput={this.allowInput && !this.readonly}
           panel={() => <TSinglePanel {...{ props: panelProps }} />}
+          multiple={this.multiple}
+          placeholder={
+            this.placeholder ?? (this.global.placeholder as { [key in typeof this.mode]: string })[this.mode]
+          }
+          suffixIcon={renderSuffixIcon()}
+          tagInputProps={{
+            onRemove: onTagRemoveClick,
+          }}
+          onClear={onTagClearClick}
         />
       </div>
     );

src/date-picker/DatePickerPanel.tsx

@@ -64,7 +64,7 @@ export default defineComponent({
     }
 
     // 头部快速切换
-    function onJumperClick({ trigger }: { trigger: string }) {
+    function onJumperClick({ trigger }: { trigger: 'prev' | 'next' | 'current' }) {
       const triggerMap = {
         prev: 'arrow-previous',
         next: 'arrow-next',
@@ -95,24 +95,24 @@ export default defineComponent({
       if (year.value !== nextYear) {
         props.onYearChange?.({
           year: nextYear,
-          date: dayjs(value.value).toDate(),
+          date: parseToDayjs(value.value as DateValue, formatRef.value.format).toDate(),
           trigger: trigger === 'current' ? 'today' : (`year-${triggerMap[trigger]}` as DatePickerYearChangeTrigger),
         });
         emit('year-change', {
           year: nextYear,
-          date: dayjs(value.value).toDate(),
+          date: parseToDayjs(value.value as DateValue, formatRef.value.format).toDate(),
           trigger: trigger === 'current' ? 'today' : (`year-${triggerMap[trigger]}` as DatePickerYearChangeTrigger),
         });
       }
       if (month.value !== nextMonth) {
         props.onMonthChange?.({
           month: nextMonth,
-          date: dayjs(value.value).toDate(),
+          date: parseToDayjs(value.value as DateValue, formatRef.value.format).toDate(),
           trigger: trigger === 'current' ? 'today' : (`month-${triggerMap[trigger]}` as DatePickerMonthChangeTrigger),
         });
         emit('month-change', {
           month: nextMonth,
-          date: dayjs(value.value).toDate(),
+          date: parseToDayjs(value.value as DateValue, formatRef.value.format).toDate(),
           trigger: trigger === 'current' ? 'today' : (`month-${triggerMap[trigger]}` as DatePickerMonthChangeTrigger),
         });
       }
@@ -142,12 +142,12 @@ export default defineComponent({
 
       props.onTimeChange?.({
         time: val,
-        date: parseToDayjs(value.value, formatRef.value.format).toDate(),
+        date: parseToDayjs(value.value as DateValue, formatRef.value.format).toDate(),
         trigger: 'time-hour',
       });
       emit('time-change', {
         time: val,
-        date: parseToDayjs(value.value, formatRef.value.format).toDate(),
+        date: parseToDayjs(value.value as DateValue, formatRef.value.format).toDate(),
         trigger: 'time-hour',
       });
     }
@@ -183,12 +183,12 @@ export default defineComponent({
 
       props.onYearChange?.({
         year: year.value,
-        date: parseToDayjs(value.value, formatRef.value.format).toDate(),
+        date: parseToDayjs(value.value as DateValue, formatRef.value.format).toDate(),
         trigger: 'year-select',
       });
       emit('year-change', {
         year: year.value,
-        date: parseToDayjs(value.value, formatRef.value.format).toDate(),
+        date: parseToDayjs(value.value as DateValue, formatRef.value.format).toDate(),
         trigger: 'year-select',
       });
     }
@@ -198,12 +198,12 @@ export default defineComponent({
 
       props.onMonthChange?.({
         month: month.value,
-        date: parseToDayjs(value.value, formatRef.value.format).toDate(),
+        date: parseToDayjs(value.value as DateValue, formatRef.value.format).toDate(),
         trigger: 'month-select',
       });
       emit('month-change', {
         month: month.value,
-        date: parseToDayjs(value.value, formatRef.value.format).toDate(),
+        date: parseToDayjs(value.value as DateValue, formatRef.value.format).toDate(),
         trigger: 'month-select',
       });
     }

src/date-picker/DateRangePickerPanel.tsx

@@ -17,6 +17,7 @@ import TRangePanel from './panel/RangePanel';
 import useRangeValue from './hooks/useRangeValue';
 import { formatDate, getDefaultFormat, parseToDayjs } from '../_common/js/date-picker/format';
 import { subtractMonth, addMonth, extractTimeObj } from '../_common/js/date-picker/utils';
+import type { TdDateRangePickerProps } from './type';
 import { dateCorrection } from './utils';
 
 export default defineComponent({
@@ -37,7 +38,7 @@ export default defineComponent({
     panelPreselection: dateRangePickerProps.panelPreselection,
     ...dateRangePickerPanelProps,
   },
-  setup(props: TdDateRangePickerPanelProps, { emit, attrs }) {
+  setup(props: TdDateRangePickerPanelProps & { disableTime: TdDateRangePickerProps['disableTime'] }, { emit, attrs }) {
     const {
       value, year, month, time, cacheValue, isFirstValueSelected, onChange,
     } = useRangeValue(props);