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/5] 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/5] 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/5] 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: Wed, 11 Sep 2024 12:22:59 +0800 Subject: [PATCH 4/5] fix(Treeselect): suport deep keys like entiry.label --- src/select-input/useMultiple.tsx | 6 ++--- src/select-input/useSingle.tsx | 3 ++- src/tree-select/tree-select.tsx | 3 ++- src/tree-select/useTreeSelect.ts | 42 +++++++++++++++----------------- src/tree-select/utils.ts | 8 ++++-- 5 files changed, 33 insertions(+), 29 deletions(-) diff --git a/src/select-input/useMultiple.tsx b/src/select-input/useMultiple.tsx index 9a3373e1d..868afbbd2 100644 --- a/src/select-input/useMultiple.tsx +++ b/src/select-input/useMultiple.tsx @@ -2,7 +2,7 @@ import { SetupContext, computed, ref, toRefs, } from '@vue/composition-api'; import isObject from 'lodash/isObject'; -import Vue from 'vue'; +import lodashGet from 'lodash/get'; import { TdSelectInputProps, SelectInputKeys } from './type'; import { SelectInputCommonProperties } from './interface'; import TagInput, { TagInputValue, TagInputProps } from '../tag-input'; @@ -37,9 +37,9 @@ export default function useMultiple(props: TdSelectInputProps, context: SetupCon const iKeys = computed(() => ({ ...DEFAULT_KEYS, ...props.keys })); const tags = computed(() => { if (!(props.value instanceof Array)) { - return isObject(props.value) ? [props.value[iKeys.value.label]] : [props.value]; + return isObject(props.value) ? [lodashGet(props.value, iKeys.value.label)] : [props.value]; } - return props.value.map((item) => (isObject(item) ? item[iKeys.value.label] : item)); + return props.value.map((item) => (isObject(item) ? lodashGet(item, iKeys.value.label) : item)); }); const tPlaceholder = computed(() => (!tags.value || !tags.value.length ? props.placeholder : '')); diff --git a/src/select-input/useSingle.tsx b/src/select-input/useSingle.tsx index d8f924562..c519933f7 100644 --- a/src/select-input/useSingle.tsx +++ b/src/select-input/useSingle.tsx @@ -4,6 +4,7 @@ import { import isObject from 'lodash/isObject'; import pick from 'lodash/pick'; +import lodashGet from 'lodash/get'; import { SelectInputCommonProperties } from './interface'; import { TdSelectInputProps } from './type'; import Input, { InputProps, StrInputProps } from '../input'; @@ -32,7 +33,7 @@ const DEFAULT_KEYS = { function getInputValue(value: TdSelectInputProps['value'], keys: TdSelectInputProps['keys']) { const iKeys = keys || DEFAULT_KEYS; - return isObject(value) ? value[iKeys.label] : value; + return isObject(value) ? lodashGet(value, iKeys.label) : value; } export default function useSingle(props: TdSelectInputProps, context: SetupContext) { diff --git a/src/tree-select/tree-select.tsx b/src/tree-select/tree-select.tsx index 7c2151ed6..ab0ef06d1 100644 --- a/src/tree-select/tree-select.tsx +++ b/src/tree-select/tree-select.tsx @@ -1,6 +1,7 @@ import { defineComponent, computed } from '@vue/composition-api'; import isArray from 'lodash/isArray'; import isFunction from 'lodash/isFunction'; +import lodashGet from 'lodash/get'; import Tree from '../tree'; import props from './props'; import SelectInput from '../select-input'; @@ -180,7 +181,7 @@ export default defineComponent({ ? { value: this.nodeInfo as TreeOptionData[], onClose: (index: number) => { - const value = this.nodeInfo.map((node: TreeOptionData) => node.value); + const value = this.nodeInfo.map((node: TreeOptionData) => lodashGet(node, this.tKeys.value)); this.tagChange(value, { trigger: 'tag-remove', index, diff --git a/src/tree-select/useTreeSelect.ts b/src/tree-select/useTreeSelect.ts index 20d51a073..ec2ccd1d3 100644 --- a/src/tree-select/useTreeSelect.ts +++ b/src/tree-select/useTreeSelect.ts @@ -2,6 +2,7 @@ import { SetupContext, ref, computed, toRefs, watch, } from '@vue/composition-api'; import isFunction from 'lodash/isFunction'; +import { get as lodashGet, set as lodashSet } from 'lodash'; import { RemoveOptions, TdTreeSelectProps, TreeSelectValue } from './type'; import { TreeProps, TreeInstanceFunctions, TreeNodeValue } from '../tree'; import { usePrefixClass, useConfig } from '../hooks/useConfig'; @@ -57,7 +58,7 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo const tKeys = computed(() => ({ ...DEFAULT_KEYS, ...props.treeProps?.keys, ...props.keys })); const inputPlaceholder = computed(() => { - let label = nodeInfo.value?.[tKeys.value.label]; + let label = nodeInfo.value ? lodashGet(nodeInfo.value, tKeys.value.label) : undefined; if (typeof label === 'number') label = String(label); return (innerVisible.value && label) || props.placeholder || global.value.placeholder; }); @@ -89,17 +90,17 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo // single tree-select use nodeInfo to compute singleActivated const singleActivated = computed(() => { if (props.multiple || !nodeInfo.value) return []; - if (nodeInfo.value instanceof Array) return [nodeInfo.value[0]?.[tKeys.value.value]]; - return [nodeInfo.value[tKeys.value.value]]; + if (nodeInfo.value instanceof Array) return [nodeInfo.value[0] ? lodashGet(nodeInfo.value[0], tKeys.value.value) : undefined]; + return [lodashGet(nodeInfo.value, tKeys.value.value)]; }); // multiple tree-select: use nodeInfo to compute multipleChecked, because nodeInfo also decided by treeSelectValue const multipleChecked = computed((): Array => { if (!props.multiple || !nodeInfo.value) return []; if (nodeInfo.value instanceof Array) { - return nodeInfo.value.map((item: TreeOptionData) => item[tKeys.value.value]); + return nodeInfo.value.map((item: TreeOptionData) => lodashGet(item, tKeys.value.value)); } - return [nodeInfo.value[tKeys.value.value]]; + return [lodashGet(nodeInfo.value, tKeys.value.value)]; }); // multiple tree select node info list @@ -109,15 +110,13 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo if (treeRef.value) { return list.map((item) => { const finalValue = typeof item === 'object' ? item.value : item; - return ( - treeRef.value.getItem(finalValue)?.data || { - [tKeys.value.label]: finalValue, - [tKeys.value.value]: finalValue, - } - ); + const obj = {}; + lodashSet(obj, tKeys.value.label, finalValue); + lodashSet(obj, tKeys.value.value, finalValue); + return treeRef.value.getItem(finalValue)?.data || obj; }); } - const onlyValues = list.map((item) => (typeof item === 'object' ? item[tKeys.value.value] : item)); + const onlyValues = list.map((item) => (typeof item === 'object' ? lodashGet(item, tKeys.value.value) : item)); return getNodeDataByValue(onlyValues, props.data, tKeys.value); } @@ -130,12 +129,10 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo const oneValue = Array.isArray(value) ? value[0] : value; const finalValue = typeof oneValue === 'object' ? oneValue.value : oneValue; if (treeRef.value) { - return ( - treeRef.value.getItem(finalValue)?.data || { - [tKeys.value.label]: finalValue, - [tKeys.value.value]: finalValue, - } - ); + const obj = {}; + lodashSet(obj, tKeys.value.label, finalValue); + lodashSet(obj, tKeys.value.value, finalValue); + return treeRef.value.getItem(finalValue)?.data || obj; } return getNodeDataByValue([finalValue], props.data, tKeys.value)[0]; } @@ -174,7 +171,7 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo // only for single tree select const treeNodeActive: TreeProps['onActive'] = (value, ctx) => { if (props.multiple) return; - if (treeSelectValue.value === ctx.node.data[tKeys.value.value]) { + if (treeSelectValue.value === lodashGet(ctx.node.data, tKeys.value.value)) { return; } const onlyLeafNode = Boolean( @@ -183,6 +180,7 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo && Array.isArray(ctx.node?.data?.children) && ctx.node?.data?.children?.length, ); + let current: TreeSelectValue = value; const nodeValue = Array.isArray(value) ? value[0] : value; current = isObjectValue.value ? treeRef.value.getItem(nodeValue) : nodeValue; @@ -196,9 +194,9 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo innerInputValue.value && setInnerInputValue('', { trigger: 'change', e: ctx.e }); }; - // label could be used as TNode, then use text to filter + // label could be used as TdNode, then use text to filter const defaultFilterFunction: TreeProps['filter'] = (node) => { - const label = node.data[tKeys.value.label]; + const label = lodashGet(node.data, tKeys.value.label); const searchLabel = isFunction(label) ? node.data.text : label || node.data.text; return searchLabel?.indexOf(innerInputValue.value) >= 0; }; @@ -238,7 +236,7 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo if (!fitTrigger) return; // handle remove event const current = treeSelectValue.value[index]; - const currentDeleteValue = typeof current === 'object' ? current[tKeys.value.value] : current; + const currentDeleteValue = typeof current === 'object' ? lodashGet(current, tKeys.value.value) : current; const currentNode = treeRef.value?.getItem(currentDeleteValue); const data = currentNode ? currentNode.data : getNodeDataByValue([currentDeleteValue], props.data, tKeys.value)[0]; if (fitTrigger) { diff --git a/src/tree-select/utils.ts b/src/tree-select/utils.ts index 566127a6f..5594989e4 100644 --- a/src/tree-select/utils.ts +++ b/src/tree-select/utils.ts @@ -1,3 +1,4 @@ +import { get as lodashGet, set as lodashSet } from 'lodash'; import { TreeOptionData, TreeKeysType } from '../common'; export function getNodeDataByValue( @@ -13,7 +14,7 @@ export function getNodeDataByValue( ) => { for (let i = 0, len = data.length; i < len; i++) { const item = data[i]; - const index = values.findIndex((val) => item[keys.value] === val); + const index = values.findIndex((val) => lodashGet(item, keys.value) === val); if (index !== -1) { // results.push(item); results.set(values[index], item); @@ -34,7 +35,10 @@ export function getNodeDataByValue( if (values.length && results.size < values.length) { values.forEach((value) => { if (!results.get(value)) { - results.set(value, { [keys.label]: value, [keys.value]: value }); + const obj = {}; + lodashSet(obj, keys.label, value); + lodashSet(obj, keys.value, value); + results.set(value, obj); } }); } From 977e30604235ca88ff869d0fc2443ccb46f971c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E5=AE=87=E9=98=B3?= Date: Sat, 14 Sep 2024 14:02:43 +0800 Subject: [PATCH 5/5] chore: change lodash import --- src/tree-select/useTreeSelect.ts | 3 ++- src/tree-select/utils.ts | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/tree-select/useTreeSelect.ts b/src/tree-select/useTreeSelect.ts index ec2ccd1d3..31b6ac482 100644 --- a/src/tree-select/useTreeSelect.ts +++ b/src/tree-select/useTreeSelect.ts @@ -2,7 +2,8 @@ import { SetupContext, ref, computed, toRefs, watch, } from '@vue/composition-api'; import isFunction from 'lodash/isFunction'; -import { get as lodashGet, set as lodashSet } from 'lodash'; +import lodashGet from 'lodash/get'; +import lodashSet from 'lodash/set'; import { RemoveOptions, TdTreeSelectProps, TreeSelectValue } from './type'; import { TreeProps, TreeInstanceFunctions, TreeNodeValue } from '../tree'; import { usePrefixClass, useConfig } from '../hooks/useConfig'; diff --git a/src/tree-select/utils.ts b/src/tree-select/utils.ts index 5594989e4..eaf24c885 100644 --- a/src/tree-select/utils.ts +++ b/src/tree-select/utils.ts @@ -1,4 +1,5 @@ -import { get as lodashGet, set as lodashSet } from 'lodash'; +import lodashGet from 'lodash/get'; +import lodashSet from 'lodash/set'; import { TreeOptionData, TreeKeysType } from '../common'; export function getNodeDataByValue(