feat: date-picker and time-picker support readonly API (#3311)

* fix(TimePicker): fixed only support hh:mm format * fix(TimePicker): disabled position only is start * fix(Upload): fixed vue error on uploadPastedFiles is false * feat(DatePicker): support readonly * feat(TimePicker): support readonly * chore: update snapshot * docs: add readonly in api --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Tencent · Sep 24, 2024 · 9b77550 · 9b77550
1 parent 6603f13
commit 9b77550
Show file tree

Hide file tree

Showing 18 changed files with 51 additions and 6 deletions.
diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx
@@ -289,6 +289,7 @@ export default defineComponent({
       <div class={COMPONENT_NAME}>
         <TSelectInput
           disabled={isDisabled}
+          readonly={this.readonly}
           value={inputValue}
           label={this.label}
           status={this.status}
@@ -297,7 +298,7 @@ export default defineComponent({
           inputProps={{ suffixIcon: renderSuffixIcon(), ...datePickerInputProps }}
           popupVisible={popupVisible}
           clearable={this.clearable}
-          allowInput={this.allowInput}
+          allowInput={this.allowInput && !this.readonly}
           panel={() => <TSinglePanel {...{ props: panelProps }} />}
         />
       </div>

diff --git a/src/date-picker/date-picker.en-US.md b/src/date-picker/date-picker.en-US.md
@@ -23,6 +23,7 @@ popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./po
 prefixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 presets | Object | - | Typescript：`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
 presetsPlacement | String | bottom | options: left/top/right/bottom | N
+readonly | Boolean | false | \- | N
 size | String | medium | options: small/medium/large。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
 suffixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N

diff --git a/src/date-picker/date-picker.md b/src/date-picker/date-picker.md
@@ -23,6 +23,7 @@ popupProps | Object | - | 透传给 popup 组件的参数。TS 类型：`PopupPr
 prefixIcon | Slot / Function | - | 用于自定义组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 presets | Object | - | 预设快捷日期选择，示例：`{ '元旦': '2021-01-01', '昨天':  dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`。TS 类型：`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
 presetsPlacement | String | bottom | 预设面板展示区域（包含确定按钮）。可选项：left/top/right/bottom | N
+readonly | Boolean | false | 只读状态，值为真会隐藏输入框，且无法打开下拉框 | N
 size | String | medium | 输入框尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 status | String | default | 输入框状态。可选项：default/success/warning/error | N
 suffixIcon | Slot / Function | - | 用于自定义组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N

diff --git a/src/date-picker/date-range-picker-props.ts b/src/date-picker/date-range-picker-props.ts
@@ -25,6 +25,11 @@ export default {
   },
   /** 是否禁用组件 */
   disabled: Boolean,
+  /** 只读状态，值为真会隐藏输入框，且无法打开下拉框 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
   /** 是否显示时间选择 */
   enableTimePicker: Boolean,
   /** 第一天从星期几开始 */

diff --git a/src/date-picker/hooks/useRange.ts b/src/date-picker/hooks/useRange.ts
@@ -40,7 +40,7 @@ export default function useRange(props: TdDateRangePickerProps, { emit }: any) {
     size: props.size,
     clearable: props.clearable,
     prefixIcon: props.prefixIcon,
-    readonly: !props.allowInput,
+    readonly: !props.allowInput || props.readonly,
     separator: props.separator || global.value.rangeSeparator,
     placeholder: props.placeholder || global.value.placeholder[props.mode],
     activeIndex: popupVisible.value ? activeIndex.value : undefined,

diff --git a/src/date-picker/props.ts b/src/date-picker/props.ts
@@ -25,6 +25,11 @@ export default {
   },
   /** 是否禁用组件 */
   disabled: Boolean,
+  /** 只读状态，值为真会隐藏输入框，且无法打开下拉框 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
   /** 是否显示时间选择 */
   enableTimePicker: Boolean,
   /** 第一天从星期几开始 */

diff --git a/src/date-picker/type.ts b/src/date-picker/type.ts
@@ -40,6 +40,10 @@ export interface TdDatePickerProps {
    * 是否禁用组件
    */
   disabled?: boolean;
+  /**
+   * 是否只读
+   */
+  readonly?: Boolean;
   /**
    * 是否显示时间选择
    * @default false
@@ -179,6 +183,10 @@ export interface TdDateRangePickerProps {
    * 是否禁用组件
    */
   disabled?: boolean;
+  /**
+   * 是否只读
+   */
+  readonly?: Boolean;
   /**
    * 是否显示时间选择
    * @default false

diff --git a/src/range-input/range-input-popup.tsx b/src/range-input/range-input-popup.tsx
@@ -45,7 +45,7 @@ export default defineComponent({
           visible={this.popupVisible || innerPopupVisible}
           {...{
             props: {
-              disabled: this.disabled,
+              disabled: this.disabled || this.readonly,
               overlayInnerStyle: tOverlayInnerStyle,
               onVisibleChange: onInnerPopupVisibleChange,
               ...(this.popupProps as Object),

diff --git a/src/select-input/select-input.tsx b/src/select-input/select-input.tsx
@@ -129,7 +129,7 @@ export default defineComponent({
         scopedSlots={{ ...this.$scopedSlots, content: this.$scopedSlots.panel }}
         hideEmptyPopup={true}
         key={this.multiple ? 'multiple' : 'single'}
-        disabled={this.disabled}
+        disabled={this.disabled || this.readonly}
         on={{
           'visible-change': this.onInnerPopupVisibleChange,
         }}

diff --git a/src/select-input/useSingle.tsx b/src/select-input/useSingle.tsx
@@ -106,7 +106,7 @@ export default function useSingle(props: TdSelectInputProps, context: SetupConte
       label: prefixContent.length ? () => prefixContent : undefined,
       autoWidth: props.autoWidth,
       autofocus: props.autofocus,
-      readonly: !props.allowInput,
+      readonly: !props.allowInput || props.readonly,
       placeholder: singleValueDisplay ? '' : props.placeholder,
       suffixIcon: !props.disabled && props.loading ? () => <Loading loading size="small" /> : props.suffixIcon,
       showClearIconOnEmpty: Boolean(!props.disabled && props.clearable && (inputValue.value || displayedValue)),

diff --git a/src/time-picker/props.ts b/src/time-picker/props.ts
@@ -23,6 +23,11 @@ export default {
     type: Boolean,
     default: undefined,
   },
+  /** 只读状态，值为真会隐藏输入框，且无法打开下拉框 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
   /** 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) */
   format: {
     type: String,

diff --git a/src/time-picker/time-picker.en-US.md b/src/time-picker/time-picker.en-US.md
@@ -17,6 +17,7 @@ inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./in
 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/time-picker/type.ts) | N
 presets | Object | - | Typescript：`PresetTime` `interface PresetTime { [presetName: string]: TimePickerValue \| (() => TimePickerValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N
+readonly | Boolean | false | \- | N
 size | String | medium | options: small/medium/large | N
 status | String | default | options: default/success/warning/error | N
 steps | Array | [1, 1, 1] | Typescript：`Array<string \| number>` | N

diff --git a/src/time-picker/time-picker.md b/src/time-picker/time-picker.md
@@ -17,6 +17,7 @@ inputProps | Object | - | 透传给输入框（Input）组件的参数。TS 类
 placeholder | String | undefined | 占位符 | N
 popupProps | Object | - | 透传给 popup 组件的参数。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N
 presets | Object | - | 预设快捷时间选择，示例：`{ '前一小时': '11:00:00' }`。TS 类型：`PresetTime` `interface PresetTime { [presetName: string]: TimePickerValue \| (() => TimePickerValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N
+readonly | Boolean | false | 只读状态，值为真会隐藏输入框，且无法打开下拉框 | N
 size | String | medium | 尺寸。可选项：small/medium/large | N
 status | String | default | 输入框状态。可选项：default/success/warning/error | N
 steps | Array | [1, 1, 1] | 时间间隔步数，数组排列 [小时, 分钟, 秒]，示例：[2, 1, 1] 或者 ['2', '1', '1']。TS 类型：`Array<string \| number>` | N

diff --git a/src/time-picker/time-picker.tsx b/src/time-picker/time-picker.tsx
@@ -135,6 +135,7 @@ export default defineComponent({
               onInputChange: this.handleInputChange,
               borderless: this.borderless,
               disabled: this.isDisabled,
+              readonly: this.readonly,
               clearable: this.clearable,
               allowInput: this.allowInput,
               class: this.inputClasses,

diff --git a/src/time-picker/time-range-picker-props.ts b/src/time-picker/time-range-picker-props.ts
@@ -23,6 +23,11 @@ export default {
     type: [Boolean, Array] as PropType<TdTimeRangePickerProps['disabled']>,
     default: undefined,
   },
+  /** 只读状态，值为真会隐藏输入框，且无法打开下拉框 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
   /** 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) */
   format: {
     type: String,

diff --git a/src/time-picker/time-range-picker.tsx b/src/time-picker/time-range-picker.tsx
@@ -167,6 +167,7 @@ export default defineComponent({
             props: {
               onInputChange: this.handleInputChange,
               disabled: this.isDisabled,
+              readonly: this.readonly,
               popupVisible: this.isShowPanel,
               inputValue: this.isShowPanel ? this.currentValue : this.innerValue ?? TIME_PICKER_EMPTY,
               popupProps: {
@@ -191,7 +192,7 @@ export default defineComponent({
                 onClick: this.handleClick,
                 onFocus: this.handleFocus,
                 onBlur: this.handleInputBlur,
-                readonly: !this.allowInput,
+                readonly: this.readonly || !this.allowInput,
                 activeIndex: this.currentPanelIdx,
                 ...this.rangeInputProps,
               },

diff --git a/src/time-picker/type.ts b/src/time-picker/type.ts
@@ -39,6 +39,10 @@ export interface TdTimePickerProps {
    * 是否禁用组件
    */
   disabled?: boolean;
+  /**
+   * 只读状态，值为真会隐藏输入框，且无法打开下拉框
+   */
+  readonly?: boolean;
   /**
    * 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format)
    * @default HH:mm:ss
@@ -153,6 +157,10 @@ export interface TdTimeRangePickerProps {
    * 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用
    */
   disabled?: boolean | Array<boolean>;
+  /**
+   * 只读状态，值为真会隐藏输入框，且无法打开下拉框
+   */
+  readonly?: boolean;
   /**
    * 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format)
    * @default HH:mm:ss

diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap
@@ -54321,6 +54321,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/layout.vue 1`] = `
         </div>
         <div
           class="t-form__controls"
+          style="margin-left: calc(2em + 24px);"
         >
           <div
             class="t-form__controls-content"
@@ -54358,6 +54359,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/layout.vue 1`] = `
         </div>
         <div
           class="t-form__controls"
+          style="margin-left: calc(2em + 24px);"
         >
           <div
             class="t-form__controls-content"