From 8eab666986ab3664b4a9078d5561b56abab4fd3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E5=AE=87=E9=98=B3?= Date: Mon, 26 Aug 2024 13:31:46 +0800 Subject: [PATCH 1/7] fix(TimePicker): fixed only support hh:mm format --- src/time-picker/__tests__/index.test.jsx | 8 ++++ src/time-picker/panel/single-panel.tsx | 51 +++++++++++++++--------- 2 files changed, 41 insertions(+), 18 deletions(-) diff --git a/src/time-picker/__tests__/index.test.jsx b/src/time-picker/__tests__/index.test.jsx index 256afd20f..6f40a87b8 100644 --- a/src/time-picker/__tests__/index.test.jsx +++ b/src/time-picker/__tests__/index.test.jsx @@ -76,6 +76,14 @@ describe('TimePicker', () => { const panelNode = document.querySelector('.t-time-picker__panel'); // format为HH:mm 只展示两列 即时分 expect(panelNode.querySelectorAll('.t-time-picker__panel-body-scroll').length).toBe(2); + + await wrapper.setProps({ + popupProps: { + visible: true, + }, + format: 'HH时mm分', + }); + expect(panelNode.querySelectorAll('.t-time-picker__panel-body-scroll').length).toBe(2); panelNode.parentNode.removeChild(panelNode); }); diff --git a/src/time-picker/panel/single-panel.tsx b/src/time-picker/panel/single-panel.tsx index 5dacb513d..f600248cb 100644 --- a/src/time-picker/panel/single-panel.tsx +++ b/src/time-picker/panel/single-panel.tsx @@ -9,12 +9,7 @@ import customParseFormat from 'dayjs/plugin/customParseFormat'; import { panelColProps } from './props'; import { - EPickerCols, - TWELVE_HOUR_FORMAT, - TIME_FORMAT, - AM, - PM, - MERIDIEM_LIST, + EPickerCols, TWELVE_HOUR_FORMAT, AM, PM, MERIDIEM_LIST, } from '../../_common/js/time-picker/const'; import { closestLookup } from '../../_common/js/time-picker/utils'; import { useConfig } from '../../hooks/useConfig'; @@ -28,6 +23,8 @@ const panelOffset = { bottom: 21, }; +export const REGEX_FORMAT = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g; + export default defineComponent({ name: 'TTimePickerPanelCol', props: { @@ -82,22 +79,40 @@ export default defineComponent({ ); onMounted(() => { - const match = format.value.match(TIME_FORMAT); - - const [, startCol, hourCol, minuteCol, secondCol, milliSecondCol, endCol] = match; + const match = format.value.match(REGEX_FORMAT); const { meridiem, hour, minute, second, milliSecond, } = EPickerCols; - const renderCol = [ - startCol && meridiem, - hourCol && hour, - minuteCol && minute, - secondCol && second, - milliSecondCol && milliSecond, - endCol && meridiem, - ].filter((v) => !!v); - + const renderCol: EPickerCols[] = []; + + match.forEach((m) => { + switch (m) { + case 'H': + case 'HH': + case 'h': + case 'hh': + renderCol.push(hour); + break; + case 'a': + case 'A': + renderCol.push(meridiem); + break; + case 'm': + case 'mm': + renderCol.push(minute); + break; + case 's': + case 'ss': + renderCol.push(second); + break; + case 'SSS': + renderCol.push(milliSecond); + break; + default: + break; + } + }); cols.value = renderCol; }); From c44f9db7febb40593c113d29a6370c08f70ba3cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E5=AE=87=E9=98=B3?= Date: Tue, 27 Aug 2024 12:40:28 +0800 Subject: [PATCH 2/7] fix(TimePicker): disabled position only is start --- src/time-picker/panel/props.ts | 1 + src/time-picker/panel/time-picker-panel.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/src/time-picker/panel/props.ts b/src/time-picker/panel/props.ts index 7daa564d0..96c3b8e38 100644 --- a/src/time-picker/panel/props.ts +++ b/src/time-picker/panel/props.ts @@ -20,6 +20,7 @@ export const panelProps = () => ({ type: String, default: 'HH:mm:ss', }, + position: String, steps: { type: Array as PropType>, default: () => [1, 1, 1], diff --git a/src/time-picker/panel/time-picker-panel.tsx b/src/time-picker/panel/time-picker-panel.tsx index cee0d92d3..d9dce7406 100644 --- a/src/time-picker/panel/time-picker-panel.tsx +++ b/src/time-picker/panel/time-picker-panel.tsx @@ -109,6 +109,7 @@ export default defineComponent({ steps: this.steps || DEFAULT_STEPS, triggerScroll: this.triggerScroll, disableTime: this.disableTime, + position: this.position, resetTriggerScroll: this.resetTriggerScroll, isShowPanel: this.isShowPanel, hideDisabledTime: this.hideDisabledTime, From d5baa7d4450c18f2c91a2b4a415bff64fb78c944 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E5=AE=87=E9=98=B3?= Date: Thu, 5 Sep 2024 19:38:39 +0800 Subject: [PATCH 3/7] fix(Upload): fixed vue error on uploadPastedFiles is false --- src/upload/upload.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/upload/upload.tsx b/src/upload/upload.tsx index 90d1a338b..b1d75b402 100644 --- a/src/upload/upload.tsx +++ b/src/upload/upload.tsx @@ -94,9 +94,15 @@ export default defineComponent({ }, ]); + const handlePasteFileChange = (e: ClipboardEvent) => { + if (props.uploadPastedFiles) { + onPasteFileChange(e); + } + }; + return { ...uploadData, - onPasteFileChange, + handlePasteFileChange, commonDisplayFileProps, dragProps, uploadClasses, @@ -246,7 +252,7 @@ export default defineComponent({ render() { return ( -
+
Date: Sat, 7 Sep 2024 17:54:41 +0800 Subject: [PATCH 4/7] feat(DatePicker): support readonly --- src/date-picker/DatePicker.tsx | 3 ++- 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 +- 8 files changed, 24 insertions(+), 5 deletions(-) diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx index a3b6da517..69c6f9324 100644 --- a/src/date-picker/DatePicker.tsx +++ b/src/date-picker/DatePicker.tsx @@ -289,6 +289,7 @@ export default defineComponent({
} />
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 8ba92b08f..a36a485f4 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 aca02bb34..544bc0f42 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 6fec2f412..d43439858 100644 --- a/src/select-input/select-input.tsx +++ b/src/select-input/select-input.tsx @@ -124,7 +124,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 d8f924562..a8a2f5968 100644 --- a/src/select-input/useSingle.tsx +++ b/src/select-input/useSingle.tsx @@ -105,7 +105,7 @@ export default function useSingle(props: TdSelectInputProps, context: SetupConte label: () => prefixContent, autoWidth: props.autoWidth, autofocus: props.autofocus, - readonly: !props.allowInput, + readonly: !props.allowInput || props.readonly, placeholder: singleValueDisplay ? '' : props.placeholder, suffixIcon: !props.disabled && props.loading ? () => : props.suffixIcon, showClearIconOnEmpty: Boolean(!props.disabled && props.clearable && (inputValue.value || displayedValue)), From fd7093e6461dcf228b1a4006fd9bbaacc62dbd3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E5=AE=87=E9=98=B3?= Date: Sat, 7 Sep 2024 17:55:06 +0800 Subject: [PATCH 5/7] feat(TimePicker): support readonly --- src/time-picker/props.ts | 5 +++++ 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 ++++++++ 5 files changed, 21 insertions(+), 1 deletion(-) 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.tsx b/src/time-picker/time-picker.tsx index 025c0705a..52b71e6d5 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, 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 a9083889e..a85c14bee 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; + /** + * 只读状态，值为真会隐藏输入框，且无法打开下拉框 + */ + readonly?: boolean; /** * 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) * @default HH:mm:ss From f091c5ce5592d128b1c015a17fdcf94ddb18490b Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Mon, 9 Sep 2024 06:39:54 +0000 Subject: [PATCH 6/7] chore: update snapshot --- test/snap/__snapshots__/csr.test.js.snap | 2 ++ 1 file changed, 2 insertions(+) diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap index b35c8618e..cf347da7b 100644 --- a/test/snap/__snapshots__/csr.test.js.snap +++ b/test/snap/__snapshots__/csr.test.js.snap @@ -54323,6 +54323,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/layout.vue 1`] = `
csr test ./src/form/_example/layout.vue 1`] = `
Date: Wed, 11 Sep 2024 12:26:28 +0800 Subject: [PATCH 7/7] docs: add readonly in api --- src/date-picker/date-picker.en-US.md | 1 + src/date-picker/date-picker.md | 1 + src/time-picker/time-picker.en-US.md | 1 + src/time-picker/time-picker.md | 1 + 4 files changed, 4 insertions(+) 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/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` | 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` | N