chore: release 1.9.4-naruto (#3180)

* fix(upload): fix options method (#3155)

* chore: update common

* fix(upload): fix options method

* chore: update common

---------

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

* chore: fix docs (#3161)

* chore: fix docs

* chore: fix lint

* fix(color-picker): 修复切换预览颜色时，通道按钮位置不变的问题 (#3163)

* feat(input): add borderless mode (#3162)

* feat: add label prop API for date pickers and range input (#3169)

---------

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

* fix(range-input): 修复 prefix/suffix 内容未应用居中样式的问题 (#3175)

* fix(range-input): add missing classes to fix unexpected align of prefix/suffix in component

* test(range-input): update snapshots for range-input and related components

* fix(select): fix default value missing (#3177)

* fix(select): fix default value missing

* chore: update snapshot

* chore: update common to synchronize style and docs fix (#3178)

* chore: release 1.9.4-naruto

---------

Signed-off-by: Siubeng <[email protected]>
Co-authored-by: Yunfei Shen <[email protected]>
Co-authored-by: fennghuang <[email protected]>
Co-authored-by: Siubeng <[email protected]>

helper/attributes.json

@@ -1505,7 +1505,7 @@
   },
   "t-checkbox/click": {
     "type": "event",
-    "description": "trigger on click\n\n点击时出发，一般用于外层阻止冒泡场景\n\n[docs](https://tdesign.tencent.com/vue/components/checkbox?tab=api#checkbox-events)"
+    "description": "trigger on click\n\n点击时触发，一般用于外层阻止冒泡场景\n\n[docs](https://tdesign.tencent.com/vue/components/checkbox?tab=api#checkbox-events)"
   },
   "t-checkbox-group/max": {
     "type": "Number",
@@ -4572,11 +4572,11 @@
   },
   "t-radio/click": {
     "type": "event",
-    "description": "trigger on click\n\n点击时出发，一般用于外层阻止冒泡场景\n\n[docs](https://tdesign.tencent.com/vue/components/radio?tab=api#radio-events)"
+    "description": "trigger on click\n\n点击时触发，一般用于外层阻止冒泡场景\n\n[docs](https://tdesign.tencent.com/vue/components/radio?tab=api#radio-events)"
   },
   "t-radio-button/click": {
     "type": "event",
-    "description": "trigger on click\n\n点击时出发，一般用于外层阻止冒泡场景\n\n[docs](https://tdesign.tencent.com/vue/components/radio?tab=api#radio-events)"
+    "description": "trigger on click\n\n点击时触发，一般用于外层阻止冒泡场景\n\n[docs](https://tdesign.tencent.com/vue/components/radio?tab=api#radio-events)"
   },
   "t-radio-group/allow-uncheck": {
     "type": "Boolean",

helper/web-types.json

@@ -4030,7 +4030,7 @@
               },
               {
                 "name": "click",
-                "description": "trigger on click\n\n点击时出发，一般用于外层阻止冒泡场景",
+                "description": "trigger on click\n\n点击时触发，一般用于外层阻止冒泡场景",
                 "doc-url": "https://tdesign.tencent.com/vue/components/checkbox?tab=api#checkbox-events"
               }
             ]
@@ -12143,7 +12143,7 @@
               },
               {
                 "name": "click",
-                "description": "trigger on click\n\n点击时出发，一般用于外层阻止冒泡场景",
+                "description": "trigger on click\n\n点击时触发，一般用于外层阻止冒泡场景",
                 "doc-url": "https://tdesign.tencent.com/vue/components/radio?tab=api#radio-events"
               }
             ]
@@ -12243,7 +12243,7 @@
               },
               {
                 "name": "click",
-                "description": "trigger on click\n\n点击时出发，一般用于外层阻止冒泡场景",
+                "description": "trigger on click\n\n点击时触发，一般用于外层阻止冒泡场景",
                 "doc-url": "https://tdesign.tencent.com/vue/components/radio?tab=api#radio-events"
               }
             ]

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tdesign-vue",
   "purename": "tdesign",
-  "version": "1.9.3-naruto",
+  "version": "1.9.4-naruto",
   "description": "tdesign-vue",
   "title": "tdesign-vue",
   "keywords": [
@@ -91,7 +91,7 @@
     "@types/tinycolor2": "^1.4.3",
     "@types/validator": "^13.1.3",
     "clipboard": "^2.0.8",
-    "dayjs": "^1.9.7",
+    "dayjs": "1.11.10",
     "lodash": "^4.17.21",
     "mitt": "^3.0.0",
     "raf": "^3.4.1",

src/color-picker/panel/slider.tsx

@@ -48,9 +48,9 @@ export default defineComponent({
       if (!width) {
         return;
       }
-      const left = Math.round((props.value / props.maxValue) * width);
+      const left = Math.round((props.value / props.maxValue) * 100);
       return {
-        left: `${left}px`,
+        left: `${left}%`,
         color: props.color.rgb,
       };
     });

src/date-picker/DatePicker.tsx

@@ -290,6 +290,7 @@ export default defineComponent({
         <TSelectInput
           disabled={isDisabled}
           value={inputValue}
+          label={this.label}
           status={this.status}
           tips={this.tips}
           popupProps={datePickerPopupProps}

src/date-picker/DateRangePicker.tsx

@@ -451,6 +451,7 @@ export default defineComponent({
       <div class={COMPONENT_NAME}>
         <TRangeInputPopup
           disabled={this.isDisabled}
+          label={this.label}
           status={this.status}
           tips={this.tips || this.$scopedSlots.tips}
           inputValue={inputValue as string[]}

src/date-picker/date-picker.md

@@ -14,6 +14,7 @@ enableTimePicker | Boolean | false | 是否显示时间选择 | N
 firstDayOfWeek | Number | 7 | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N
 format | String | 'YYYY-MM-DD' | 仅用于格式化日期显示的格式，不影响日期值。注意和 `valueType` 的区别，`valueType`会直接决定日期值 `value` 的格式。全局配置默认为：'YYYY-MM-DD'，[详细文档](https://day.js.org/docs/en/display/format) | N
 inputProps | Object | - | 透传给输入框（Input）组件的参数。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
+label | String / Slot / Function | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 mode | String | date | 选择器模式。可选项：year/quarter/month/week/date | N
 placeholder | String / Array | undefined | 占位符。TS 类型：`string` | N
 popupProps | Object | - | 透传给 popup 组件的参数。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
@@ -58,6 +59,7 @@ disabled | Boolean | - | 是否禁用组件 | N
 enableTimePicker | Boolean | false | 是否显示时间选择 | N
 firstDayOfWeek | Number | - | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N
 format | String | - | 用于格式化日期，[详细文档](https://day.js.org/docs/en/display/format) | N
+label | String / Slot / Function | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 mode | String | date | 选择器模式。可选项：year/quarter/month/week/date | N
 panelPreselection | Boolean | true | 在开始日期选中之前，面板是否显示预选状态，即是否高亮预选日期 | N
 placeholder | String / Array | - | 占位符，值为数组表示可分别为开始日期和结束日期设置占位符。TS 类型：`string \| Array<string>` | N

src/date-picker/date-range-picker-props.ts

@@ -38,6 +38,10 @@ export default {
     type: String,
     default: '',
   },
+  /** 左侧文本 */
+  label: {
+    type: [String, Function] as PropType<TdDateRangePickerProps['label']>,
+  },
   /** 选择器模式 */
   mode: {
     type: String as PropType<TdDateRangePickerProps['mode']>,

src/date-picker/props.ts

@@ -42,6 +42,10 @@ export default {
   inputProps: {
     type: Object as PropType<TdDatePickerProps['inputProps']>,
   },
+  /** 左侧文本 */
+  label: {
+    type: [String, Function] as PropType<TdDatePickerProps['label']>,
+  },
   /** 选择器模式 */
   mode: {
     type: String as PropType<TdDatePickerProps['mode']>,

src/date-picker/type.ts

@@ -52,6 +52,10 @@ export interface TdDatePickerProps {
    * 透传给输入框（Input）组件的参数
    */
   inputProps?: InputProps;
+  /**
+   * 左侧内容
+   */
+  label?: string | TNode;
   /**
    * 选择器模式
    * @default date
@@ -179,6 +183,10 @@ export interface TdDateRangePickerProps {
    * @default ''
    */
   format?: string;
+  /**
+   * 左侧文本
+   */
+  label?: string | TNode;
   /**
    * 选择器模式
    * @default date

src/dialog/dialog.tsx

@@ -266,7 +266,7 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DialogConfig>('d
         }
       }
     },
-    // 回车出发确认事件
+    // 回车触发确认事件
     keyboardEnterEvent(e: KeyboardEvent) {
       const { code } = e;
       if ((code === 'Enter' || code === 'NumpadEnter') && stack.top === this.uid) {

src/input/_example/borderless.vue

@@ -0,0 +1,7 @@
+<template>
+  <t-space direction="vertical" style="max-width: 500px">
+    <t-input placeholder="please input" clearable />
+    <t-input placeholder="borderless input" borderless clearable />
+  </t-space>
+</template>
+<script></script>

src/input/input.md

@@ -10,7 +10,7 @@ allowInputOverMax | Boolean | false | 超出 `maxlength` 或 `maxcharacter` 之
 autoWidth | Boolean | false | 宽度随内容自适应 | N
 autocomplete | String | undefined | 是否开启自动填充功能，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) | N
 autofocus | Boolean | false | 自动聚焦 | N
-borderless | Boolean | false | 【开发中】无边框模式 | N
+borderless | Boolean | false | 无边框模式 | N
 clearable | Boolean | false | 是否可清空 | N
 disabled | Boolean | - | 是否禁用输入框 | N
 format | Function | - | 指定输入框展示值的格式。注意 `type=number` 时请勿使用，此功能建议更为使用 `InputNumber` 组件。TS 类型：`InputFormatType` `type InputFormatType = (value: string) => string`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/input/type.ts) | N

src/input/input.tsx

@@ -111,6 +111,7 @@ export default mixins(
           [`${this.classPrefix}-align-${this.align}`]: this.align !== 'left',
           [`${this.classPrefix}-is-disabled`]: this.tDisabled,
           [`${this.classPrefix}-is-readonly`]: this.readonly,
+          [`${this.componentName}--borderless`]: this.borderless,
           [`${this.componentName}--focused`]: this.focused,
         },
       ];

src/radio/props.ts

@@ -39,6 +39,6 @@ export default {
   },
   /** 选中状态变化时触发 */
   onChange: Function as PropType<TdRadioProps['onChange']>,
-  /** 点击时出发，一般用于外层阻止冒泡场景 */
+  /** 点击时触发，一般用于外层阻止冒泡场景 */
   onClick: Function as PropType<TdRadioProps['onClick']>,
 };

src/radio/radio.md

@@ -14,14 +14,14 @@ label | String / Slot / Function | - | 主文案。TS 类型：`string \| TNode`
 name | String | - | HTML 元素原生属性 | N
 value | String / Number / Boolean | undefined | 单选按钮的值。TS 类型：`T` | N
 onChange | Function |  | TS 类型：`(checked: boolean, context: { e: Event }) => void`<br/>选中状态变化时触发 | N
-onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击时出发，一般用于外层阻止冒泡场景 | N
+onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击时触发，一般用于外层阻止冒泡场景 | N
 
 ### Radio Events
 
 名称 | 参数 | 描述
 -- | -- | --
 change | `(checked: boolean, context: { e: Event })` | 选中状态变化时触发
-click | `(context: { e: MouseEvent })` | 点击时出发，一般用于外层阻止冒泡场景
+click | `(context: { e: MouseEvent })` | 点击时触发，一般用于外层阻止冒泡场景
 
 ### RadioGroup Props
 

src/radio/type.ts

@@ -48,7 +48,7 @@ export interface TdRadioProps<T = RadioValue> {
    */
   onChange?: (checked: boolean, context: { e: Event }) => void;
   /**
-   * 点击时出发，一般用于外层阻止冒泡场景
+   * 点击时触发，一般用于外层阻止冒泡场景
    */
   onClick?: (context: { e: MouseEvent }) => void;
 }

src/range-input/range-input-popup-props.ts

@@ -37,6 +37,10 @@ export default {
   },
   /** 只读状态，值为真会隐藏输入框，且无法打开下拉框 */
   readonly: Boolean,
+  /** 左侧文本 */
+  label: {
+    type: [String, Function] as PropType<TdRangeInputPopupProps['label']>,
+  },
   /** 输入框状态 */
   status: {
     type: String as PropType<TdRangeInputPopupProps['status']>,

src/range-input/range-input-popup.tsx

@@ -58,6 +58,7 @@ export default defineComponent({
                 value: this.inputValue,
                 onChange: this.onInputChange,
                 disabled: this.disabled,
+                label: this.label,
                 status: this.status,
                 tips: this.tips,
                 ...(this.rangeInputProps as Object),

src/range-input/range-input.tsx

@@ -163,6 +163,8 @@ export default defineComponent({
             [STATUS.success]: this.status === 'success',
             [STATUS.warning]: this.status === 'warning',
             [STATUS.error]: this.status === 'error',
+            [`${COMPONENT_NAME}--prefix`]: prefixIconContent || labelContent,
+            [`${COMPONENT_NAME}--suffix`]: suffixIconContent || suffixContent,
           },
         ]}
         onMouseenter={handleMouseEnter}

src/range-input/type.ts

@@ -162,6 +162,10 @@ export interface TdRangeInputPopupProps {
    * 输入框的值
    */
   inputValue?: RangeInputValue;
+  /**
+   * 左侧文本
+   */
+  label?: string | TNode;
   /**
    * 输入框的值，非受控属性
    */

src/select/__tests__/__snapshots__/index.test.jsx.snap

@@ -6,7 +6,7 @@ exports[`Select > :props > :bordered 1`] = `
   class="t-select__wrap"
 >
   <div
-    class="t-select-input t-select"
+    class="t-select-input t-select-input--empty t-select"
   >
     <div
       class="t-input__wrap"
@@ -55,7 +55,7 @@ exports[`Select > :props > :clearable 1`] = `
   class="t-select__wrap"
 >
   <div
-    class="t-select-input t-select"
+    class="t-select-input t-select-input--empty t-select"
   >
     <div
       class="t-input__wrap"
@@ -104,7 +104,7 @@ exports[`Select > :props > :creatable 1`] = `
   class="t-select__wrap"
 >
   <div
-    class="t-select-input t-select"
+    class="t-select-input t-select-input--empty t-select"
   >
     <div
       class="t-input__wrap"
@@ -153,7 +153,7 @@ exports[`Select > :props > :disabled 1`] = `
   class="t-select__wrap"
 >
   <div
-    class="t-select-input t-select"
+    class="t-select-input t-select-input--empty t-select"
   >
     <div
       class="t-input__wrap"
@@ -170,7 +170,6 @@ exports[`Select > :props > :disabled 1`] = `
           disabled="disabled"
           placeholder="请选择"
           readonly="readonly"
-          title="false"
           type="text"
           unselectable="on"
         />
@@ -204,7 +203,7 @@ exports[`Select > :props > :labelInValue 1`] = `
   class="t-select__wrap"
 >
   <div
-    class="t-select-input t-select"
+    class="t-select-input t-select-input--empty t-select"
   >
     <div
       class="t-input__wrap"
@@ -253,7 +252,7 @@ exports[`Select > :props > :loading 1`] = `
   class="t-select__wrap"
 >
   <div
-    class="t-select-input t-select"
+    class="t-select-input t-select-input--empty t-select"
   >
     <div
       class="t-input__wrap"
@@ -365,7 +364,7 @@ exports[`Select > :props > :placeholder 1`] = `
   class="t-select__wrap"
 >
   <div
-    class="t-select-input t-select"
+    class="t-select-input t-select-input--empty t-select"
   >
     <div
       class="t-input__wrap"
@@ -415,7 +414,7 @@ exports[`Select > :props > :remote 1`] = `
   remote="true"
 >
   <div
-    class="t-select-input t-select"
+    class="t-select-input t-select-input--empty t-select"
   >
     <div
       class="t-input__wrap"
@@ -464,7 +463,7 @@ exports[`Select > :props > :reserveKeyword 1`] = `
   class="t-select__wrap"
 >
   <div
-    class="t-select-input t-select"
+    class="t-select-input t-select-input--empty t-select"
   >
     <div
       class="t-input__wrap"
@@ -513,7 +512,7 @@ exports[`Select > :props > :size 1`] = `
   class="t-select__wrap"
 >
   <div
-    class="t-select-input t-select"
+    class="t-select-input t-select-input--empty t-select"
   >
     <div
       class="t-input__wrap"

src/select/props.ts

@@ -94,7 +94,10 @@ export default {
     type: Object as PropType<TdSelectProps['popupProps']>,
   },
   /** 是否显示下拉框 */
-  popupVisible: Boolean,
+  popupVisible: {
+    type: Boolean,
+    default: undefined,
+  },
   /** 是否显示下拉框，非受控属性 */
   defaultPopupVisible: Boolean,
   /** 组件前置图标 */
@@ -159,10 +162,12 @@ export default {
   /** 选中值 */
   value: {
     type: [String, Number, Boolean, Object, Array] as PropType<TdSelectProps['value']>,
+    default: undefined,
   },
   /** 选中值，非受控属性 */
   defaultValue: {
     type: [String, Number, Boolean, Object, Array] as PropType<TdSelectProps['defaultValue']>,
+    default: undefined,
   },
   /** 自定义选中项呈现的内容 */
   valueDisplay: {

src/select/select-panel.tsx

@@ -163,7 +163,7 @@ export default defineComponent({
       }
       const target = (e.target || e.srcElement) as HTMLElement;
       const top = target.scrollTop;
-      // 排除横向滚动出发的纵向虚拟滚动计算
+      // 排除横向滚动触发的纵向虚拟滚动计算
       if (Math.abs(lastScrollY - top) > 5) {
         handleVirtualScroll();
         lastScrollY = top;