From 9b775506e03c8a90024fe5d93759efc755c97562 Mon Sep 17 00:00:00 2001
From: myron <myronliu347@gmail.com>
Date: Wed, 11 Sep 2024 14:27:39 +0800
Subject: [PATCH] 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>
---
 src/date-picker/DatePicker.tsx             | 3 ++-
 src/date-picker/date-picker.en-US.md       | 1 +
 src/date-picker/date-picker.md             | 1 +
 src/date-picker/date-range-picker-props.ts | 5 +++++
 src/date-picker/hooks/useRange.ts          | 2 +-
 src/date-picker/props.ts                   | 5 +++++
 src/date-picker/type.ts                    | 8 ++++++++
 src/range-input/range-input-popup.tsx      | 2 +-
 src/select-input/select-input.tsx          | 2 +-
 src/select-input/useSingle.tsx             | 2 +-
 src/time-picker/props.ts                   | 5 +++++
 src/time-picker/time-picker.en-US.md       | 1 +
 src/time-picker/time-picker.md             | 1 +
 src/time-picker/time-picker.tsx            | 1 +
 src/time-picker/time-range-picker-props.ts | 5 +++++
 src/time-picker/time-range-picker.tsx      | 3 ++-
 src/time-picker/type.ts                    | 8 ++++++++
 test/snap/__snapshots__/csr.test.js.snap   | 2 ++
 18 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx
index 461e0f267..81d90f6b2 100644
--- 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
index a04cb7b39..21a45eb56 100644
--- 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
index c2a07f3be..54c693dd3 100644
--- 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
index 6a53709b2..619792390 100644
--- 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
index f45aae7f5..a06b58993 100644
--- 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
index a96d8a8bc..b9ba422ae 100644
--- 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
index ca27c784d..08d8b1373 100644
--- 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
index 18114b17b..861ef6542 100644
--- 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
index 64e252c23..979dfa6a3 100644
--- 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
index 93c9bfaeb..c304e3184 100644
--- 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
index c3d459c8b..69b7f3769 100644
--- 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
index 3c9145352..0591185e9 100644
--- 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
index 592d08ed2..600daccc1 100644
--- 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
index 64274c43c..de7bc42aa 100755
--- 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
index 7f17043f6..939beaaf6 100644
--- 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
index 4bca55b69..8f850cc72 100644
--- 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
index 0ff7ae6c3..3417b0773 100644
--- 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
index 2f33c94f7..fe9d4fd6f 100644
--- 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"