From a07b470e629422cde58848a8c1ed5930a2556c13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?w=C5=AB=20y=C4=81ng?= Date: Thu, 15 Aug 2024 20:09:34 +0800 Subject: [PATCH] chore: release 1.9.9-naruto (#3275) * chore: modify TEST_GUIDE link (#3239) * fix(table): table.columns.thClassName doesn't work (#3198) (#3238) * fix(table): table.columns.thClassName doesn't work (#3198) fix #3198 * test(table): add missing test: thClassName * fix(Upload): fix global icon replacement (#3244) * feat(borderless): support borderless API (#3249) * docs(Input): value type remove Number * feat: support borderless mode * docs(auto-complete): update doc * feat(descriptions): make layout type to be multiple type (#3252) * fix(TagInput): tagProps should effect minCollapseNum tag (#3260) * fix(TagInput): tagProps should effect minCollapseNum tag * chore: fix lint * chore(deps-dev): bump @babel/helper-module-imports from 7.22.5 to 7.24.7 (#3259) Bumps [@babel/helper-module-imports](https://github.com/babel/babel/tree/HEAD/packages/babel-helper-module-imports) from 7.22.5 to 7.24.7. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.24.7/packages/babel-helper-module-imports) --- updated-dependencies: - dependency-name: "@babel/helper-module-imports" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix(Form): fix Form scrollToFirstError bug (#3251) * fix(Form): fix form-item class name and scrollToFirstError get form-item class name * fix(Form): fix form-item class name and scrollToFirstError get form-item class name * fix(Form): test update --------- Co-authored-by: v-tangchenw * chore: remove ghost config from live demo (#3265) * chore: update common (#3273) * chore: update common * fix(cascader): fix remove and change trigger effect * chore: release 1.9.9 (#3274) * chore: release 1.9.9 * chore: changelog's changes --------- Co-authored-by: github-actions[bot] * chore: release 1.9.9-naruto * chore: release 1.9.9-naruto --------- Signed-off-by: dependabot[bot] Co-authored-by: theBestVayne <32293224+theBestVayne@users.noreply.github.com> Co-authored-by: liweijie0812 <674416404@qq.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: MorningUei <747651423@qq.com> Co-authored-by: v-tangchenw Co-authored-by: github-actions[bot] --- CHANGELOG.md | 18 ++ CONTRIBUTING.md | 2 +- package.json | 4 +- script/generate-usage/config.js | 39 ++- src/auto-complete/_usage/index.vue | 27 ++ src/auto-complete/_usage/props.json | 51 ++++ src/auto-complete/auto-complete.en-US.md | 8 +- src/auto-complete/auto-complete.md | 6 +- src/auto-complete/auto-complete.tsx | 1 + src/auto-complete/props.ts | 7 +- src/auto-complete/type.ts | 5 + src/button/_usage/props.json | 8 +- src/cascader/core/effect.ts | 37 +-- src/color-picker/color-picker.en-US.md | 16 +- src/color-picker/color-picker.md | 14 +- src/color-picker/color-picker.tsx | 1 + src/color-picker/props.ts | 9 +- src/color-picker/trigger.tsx | 5 + src/color-picker/type.ts | 13 +- src/common.ts | 5 +- src/date-picker/_usage/date-picker-props.json | 156 +++++----- .../_usage/date-range-picker-props.json | 156 +++++----- src/date-picker/date-picker.en-US.md | 30 +- src/date-picker/date-picker.md | 14 +- src/date-picker/date-range-picker-props.ts | 2 + src/date-picker/hooks/useRange.ts | 1 + src/date-picker/hooks/useSingle.ts | 1 + src/date-picker/props.ts | 2 + src/date-picker/type.ts | 12 +- src/descriptions/descriptions-body.tsx | 18 +- src/descriptions/descriptions.tsx | 7 +- src/form/form-item.tsx | 7 +- src/form/form.tsx | 4 +- src/input/_usage/props.json | 280 +++++++++--------- src/input/input.en-US.md | 7 +- src/input/input.md | 15 +- src/input/input.tsx | 1 + src/input/props.ts | 16 +- src/input/type.ts | 10 +- src/range-input/_usage/index.vue | 24 ++ src/range-input/_usage/props.json | 74 +++++ src/range-input/props.ts | 7 +- src/range-input/range-input-popup-props.ts | 8 +- src/range-input/range-input.en-US.md | 12 +- src/range-input/range-input.md | 10 +- src/range-input/range-input.tsx | 1 + src/range-input/type.ts | 13 +- src/table/__tests__/column.test.jsx | 22 ++ src/table/thead.tsx | 2 + src/tag-input/_usage/props.json | 136 +++++---- src/tag-input/props.ts | 9 +- src/tag-input/tag-input.en-US.md | 5 +- src/tag-input/tag-input.md | 5 +- src/tag-input/tag-input.tsx | 1 + src/tag-input/type.ts | 11 +- src/tag-input/useTagList.tsx | 2 +- src/time-picker/_usage/index.vue | 22 +- src/time-picker/_usage/props.json | 45 --- src/time-picker/_usage/time-picker-props.json | 82 +++++ .../_usage/time-range-picker-props.json | 82 +++++ src/time-picker/props.ts | 9 +- src/time-picker/time-picker.en-US.md | 8 +- src/time-picker/time-picker.md | 13 +- src/time-picker/time-picker.tsx | 1 + src/time-picker/time-range-picker-props.ts | 4 + src/time-picker/time-range-picker.tsx | 1 + src/time-picker/type.ts | 10 + src/upload/themes/multiple-flow-list.tsx | 22 +- src/upload/upload.tsx | 9 +- test/snap/__snapshots__/csr.test.js.snap | 52 ++-- test/snap/__snapshots__/ssr.test.js.snap | 30 +- 71 files changed, 1158 insertions(+), 589 deletions(-) create mode 100644 src/auto-complete/_usage/index.vue create mode 100644 src/auto-complete/_usage/props.json create mode 100644 src/range-input/_usage/index.vue create mode 100644 src/range-input/_usage/props.json delete mode 100644 src/time-picker/_usage/props.json create mode 100644 src/time-picker/_usage/time-picker-props.json create mode 100644 src/time-picker/_usage/time-range-picker-props.json diff --git a/CHANGELOG.md b/CHANGELOG.md index b0747ed98..8cef7d9c0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,24 @@ toc: false docClass: timeline --- +## 🌈 1.9.9 `2024-08-15` + +### 🚀 Features + +- `Table`: 新增支持 API `thClassName`，用于需要在列表头自定义类名的场景 @theBestVayne ([#3238](https://github.com/Tencent/tdesign-vue/pull/3238)) +- `Borderless`: AutoComplete、ColorPicker、DatePicker、TagInput、TimePicker 、RangeInput、DateRangePicker 、TimeRangePicker 等组件新增 borderless API，支持无边框模式 @liweijie0812 ([#3249](https://github.com/Tencent/tdesign-vue/pull/3249)) +- `Description`: layout 类型定义调整为字符串多类型 @liweijie0812 ([#3252](https://github.com/Tencent/tdesign-vue/pull/3252)) + +### 🐞 Bug Fixes + +- `Cascader`: 修复多选下点击清空按钮的功能异常及多次触发 `onChange` 事件的问题 @uyarn ([#3273](https://github.com/Tencent/tdesign-vue/pull/3273)) +- `Form`: 修复某种情况下 scrollToFirstError 失效的问题 @morningbao ([#3251](https://github.com/Tencent/tdesign-vue/pull/3251)) +- `InputNumber`: 修复小数点精度计算，以 0 开头的计算边界逻辑缺失导致计算错误的问题 @uyarn ([#3273](https://github.com/Tencent/tdesign-vue/pull/3273)) +- `Table`: 修复拖拽排序时，祖先节点内的顺序错误的问题 @uyarn ([#3273](https://github.com/Tencent/tdesign-vue/pull/3273)) +- `TagInput`: 修复`tagProps` 没有作用到折叠的标签上的缺陷 @uyarn ([#3260](https://github.com/Tencent/tdesign-vue/pull/3260)) +- `Upload`: 修复部分图标不支持全局替换的问题 @uyarn ([#3244](https://github.com/Tencent/tdesign-vue/pull/3244)) + + ## 🌈 1.9.8 `2024-07-11` ### 🚀 Features - `Icon`: 新增有序列表图标 `list-numbered`，优化`lock-off`图标的绘制路径 @DOUBLE-DENG ([icon#9f4acfd](https://github.com/Tencent/tdesign-icons/commit/9f4acfdda58f84f9bca71a22f033e27127dd26db)) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 0a5ec7acb..34b073fc0 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -84,7 +84,7 @@ npm run start ### 单元测试 & e2e 测试文档 -[组件测试文档](./test/README.md) +[组件测试文档](./TEST_GUIDE.md) ## 子仓库 tdesign-common diff --git a/package.json b/package.json index fb7c58921..abd1df719 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "tdesign-vue", "purename": "tdesign", - "version": "1.9.8-naruto", + "version": "1.9.9-naruto", "description": "tdesign-vue", "title": "tdesign-vue", "keywords": [ @@ -106,7 +106,7 @@ "devDependencies": { "@babel/cli": "^7.5.5", "@babel/core": "~7.22.5", - "@babel/helper-module-imports": "7.22.5", + "@babel/helper-module-imports": "7.24.7", "@babel/eslint-parser": "~7.23.10", "@babel/plugin-transform-class-properties": "^7.22.3", "@babel/plugin-transform-modules-commonjs": "^7.9.6", diff --git a/script/generate-usage/config.js b/script/generate-usage/config.js index 4e22f95d3..ce6c230fd 100644 --- a/script/generate-usage/config.js +++ b/script/generate-usage/config.js @@ -1,5 +1,17 @@ /* eslint-disable */ module.exports = { + 'auto-complete': { + panelStr: `const panelList = [{label: 'AutoComplete', value: 'AutoComplete'}];`, + render: { + AutoComplete: ``, + }, + }, + button: { + panelStr: `const panelList = [{label: 'button', value: 'button'}];`, + render: { + button: `确定`, + }, + }, button: { panelStr: `const panelList = [{label: 'button', value: 'button'}];`, render: { @@ -313,6 +325,12 @@ module.exports = { radio: `单选框`, }, }, + 'range-input': { + panelStr: `const panelList = [{label: 'rangeInput', value: 'rangeInput'}];`, + render: { + rangeInput: ``, + }, + }, select: { panelStr: `const panelList = [{label: 'select', value: 'select'}];`, render: { @@ -407,9 +425,26 @@ module.exports = { }, }, 'time-picker': { - panelStr: `const panelList = [{label: 'timePicker', value: 'timePicker'}];`, + importStr: ` + import timePickerConfigJson from './time-picker-props.json';\n + import timeRangePickerConfigJson from './time-range-picker-props.json';\n + `, + configStr: `const configList = ref(timePickerConfigJson);`, + panelStr: ` + const panelList = [ + {label: 'timePicker', value: 'timePicker', config: timePickerConfigJson}, + {label: 'timeRangePicker', value: 'timeRangePicker', config: timeRangePickerConfigJson} + ]; + `, + panelChangeStr: ` + function onPanelChange(panel) { + configList.value = panelList.find(item => item.value === panel).config; + usageCode.value = \`\`; + } + `, render: { - timePicker: ``, + timePicker: ``, + timeRangePicker: ``, }, }, timeline: { diff --git a/src/auto-complete/_usage/index.vue b/src/auto-complete/_usage/index.vue new file mode 100644 index 000000000..245c3e421 --- /dev/null +++ b/src/auto-complete/_usage/index.vue @@ -0,0 +1,27 @@ + + + + diff --git a/src/auto-complete/_usage/props.json b/src/auto-complete/_usage/props.json new file mode 100644 index 000000000..1bf818a15 --- /dev/null +++ b/src/auto-complete/_usage/props.json @@ -0,0 +1,51 @@ +[ + { + "name": "borderless", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "clearable", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "disabled", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "highlightKeyword", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "readonly", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "size", + "type": "enum", + "defaultValue": "medium", + "options": [ + { + "label": "small", + "value": "small" + }, + { + "label": "medium", + "value": "medium" + }, + { + "label": "large", + "value": "large" + } + ] + } + ] \ No newline at end of file diff --git a/src/auto-complete/auto-complete.en-US.md b/src/auto-complete/auto-complete.en-US.md index 0f885ef61..52fcfb067 100644 --- a/src/auto-complete/auto-complete.en-US.md +++ b/src/auto-complete/auto-complete.en-US.md @@ -1,14 +1,16 @@ :: BASE_DOC :: ## API + ### AutoComplete Props name | type | default | description | required -- | -- | -- | -- | -- autofocus | Boolean | - | \- | N +borderless | Boolean | false | \- | N clearable | Boolean | - | \- | N default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -disabled | Boolean | - | \- | N +disabled | Boolean | undefined | \- | N filter | Function | - | Typescript：`(filterWords: string, option: T) => boolean \| Promise` | N filterable | Boolean | true | \- | N highlightKeyword | Boolean | true | \- | N @@ -19,8 +21,8 @@ panelTopContent | String / Slot / Function | - | Typescript：`string \| TNode` 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/auto-complete/type.ts) | N readonly | Boolean | - | \- | 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 +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 textareaProps | Object | - | Typescript：`TextareaProps`，[Textarea API Documents](./textarea?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/auto-complete/type.ts) | N tips | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N triggerElement | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N diff --git a/src/auto-complete/auto-complete.md b/src/auto-complete/auto-complete.md index 2e1adf151..f516f6bd1 100644 --- a/src/auto-complete/auto-complete.md +++ b/src/auto-complete/auto-complete.md @@ -1,14 +1,16 @@ :: BASE_DOC :: ## API + ### AutoComplete Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- autofocus | Boolean | - | 自动获取焦点 | N +borderless | Boolean | false | 无边框模式 | N clearable | Boolean | - | 是否允许清空 | N default | String / Slot / Function | - | 触发显示联想词下拉框的元素，同 `triggerElement`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -disabled | Boolean | - | 是否禁用 | N +disabled | Boolean | undefined | 是否禁用 | N filter | Function | - | 自定义过滤规则，用于对现有数据进行搜索过滤，判断是否过滤某一项数据。参数 `filterWords` 表示搜索词，`option`表示单个选项内容，返回值为 `true` 保留该选项，返回值为 `false` 则隐藏该选项。使用该方法时无需设置 `filterable`。TS 类型：`(filterWords: string, option: T) => boolean \| Promise` | N filterable | Boolean | true | 是否根据输入内容过滤联想词。默认过滤规则不区分大小写，全文本任意位置匹配。如果默认搜索规则不符合业务需求，可以更为使用 `filter` 自定义过滤规则。部分场景下输入关键词和下拉联想词完全不同，此时可以设置为 `false` | N highlightKeyword | Boolean | true | 是否高亮联想词中和输入值的相同部分 | N diff --git a/src/auto-complete/auto-complete.tsx b/src/auto-complete/auto-complete.tsx index 00bb96257..7470cc497 100644 --- a/src/auto-complete/auto-complete.tsx +++ b/src/auto-complete/auto-complete.tsx @@ -154,6 +154,7 @@ export default defineComponent({ clearable={this.clearable} props={this.innerInputProps} scopedSlots={this.$scopedSlots} + borderless={this.borderless} /> ); // 联想词列表 diff --git a/src/auto-complete/props.ts b/src/auto-complete/props.ts index 7d9b3ec8c..3b9e4de8c 100644 --- a/src/auto-complete/props.ts +++ b/src/auto-complete/props.ts @@ -10,6 +10,8 @@ import { PropType } from 'vue'; export default { /** 自动获取焦点 */ autofocus: Boolean, + /** 无边框模式 */ + borderless: Boolean, /** 是否允许清空 */ clearable: Boolean, /** 触发显示联想词下拉框的元素，同 `triggerElement` */ @@ -17,7 +19,10 @@ export default { type: [String, Function] as PropType, }, /** 是否禁用 */ - disabled: Boolean, + disabled: { + type: Boolean, + default: undefined, + }, /** 自定义过滤规则，用于对现有数据进行搜索过滤，判断是否过滤某一项数据。参数 `filterWords` 表示搜索词，`option`表示单个选项内容，返回值为 `true` 保留该选项，返回值为 `false` 则隐藏该选项。使用该方法时无需设置 `filterable` */ filter: { type: Function as PropType, diff --git a/src/auto-complete/type.ts b/src/auto-complete/type.ts index b7d1d1cf1..be5b1f973 100644 --- a/src/auto-complete/type.ts +++ b/src/auto-complete/type.ts @@ -14,6 +14,11 @@ export interface TdAutoCompleteProps treeStore - .getNode(val) - .getPath() - .map((item) => item.value)); - - setValue(resValue, 'uncheck', node.getModel()); - if (isFunction(onRemove)) { - onRemove({ value: checked, node: node as any }); + // index equal to undefined means to click clear button + if (index !== undefined) { + const newValue = cloneDeep(value) as []; + const res = newValue.splice(index, 1); + const node = treeStore.getNodes(res[0])[0]; + + const checked = node.setChecked(!node.isChecked()); + // 处理不同数据类型 + const resValue = valueType === 'single' + ? checked + : checked.map((val) => treeStore + .getNode(val) + .getPath() + .map((item) => item.value)); + setValue(resValue, 'uncheck', node.getModel()); + if (isFunction(onRemove)) { + onRemove({ value: checked, node: node as any }); + } + } else if (isFunction(onRemove)) { + onRemove({ value, node: undefined }); } } diff --git a/src/color-picker/color-picker.en-US.md b/src/color-picker/color-picker.en-US.md index 4ea94ec8a..52da099e1 100644 --- a/src/color-picker/color-picker.en-US.md +++ b/src/color-picker/color-picker.en-US.md @@ -1,26 +1,28 @@ :: BASE_DOC :: ## API + ### ColorPicker Props name | type | default | description | required -- | -- | -- | -- | -- +borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N closeBtn | String / Boolean / Slot / Function | true | Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -colorModes | Array | ()=> ['monochrome', 'linear-gradient'] | Typescript：`Array<'monochrome' \| 'linear-gradient'>` | N -disabled | Boolean | - | \- | N +colorModes | Array | ["monochrome", "linear-gradient"] | Typescript：`Array<'monochrome' \| 'linear-gradient'>` | N +disabled | Boolean | undefined | \- | N enableAlpha | Boolean | false | \- | N enableMultipleGradient | Boolean | true | \- | N -format | String | RGB | options：RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N +format | String | RGB | options: RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N multiple | Boolean | false | \- | N popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N -recentColors | Array | [] | used color recently。`.sync` is supported。Typescript：`boolean \| Array` | N -defaultRecentColors | Array | [] | used color recently。uncontrolled property。Typescript：`boolean \| Array` | N +recentColors | Array | [] | used color recently。`.sync` is supported。Typescript：`boolean \| Array \| null` | N +defaultRecentColors | Array | [] | used color recently。uncontrolled property。Typescript：`boolean \| Array \| null` | N selectInputProps | Object | - | Typescript：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N showPrimaryColorPreview | Boolean | true | \- | 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 -swatchColors | Array | - | swatch colors。Typescript：`Array` | 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 +swatchColors | Array | - | swatch colors。Typescript：`Array \| null` | N value | String | - | color value。`v-model` is supported | N defaultValue | String | - | color value。uncontrolled property | N onChange | Function | | Typescript：`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts)。
`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input' \| 'preset' \| 'recent' `
| N diff --git a/src/color-picker/color-picker.md b/src/color-picker/color-picker.md index c875c7037..ceead6bc4 100644 --- a/src/color-picker/color-picker.md +++ b/src/color-picker/color-picker.md @@ -1,26 +1,28 @@ :: BASE_DOC :: ## API + ### ColorPicker Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否可清空 | N closeBtn | String / Boolean / Slot / Function | true | 关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 或 `undefined` 则不显示关闭按钮；值类型为函数，则表示自定义关闭按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -colorModes | Array | ()=> ['monochrome', 'linear-gradient'] | 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色。TS 类型：`Array<'monochrome' \| 'linear-gradient'>` | N -disabled | Boolean | - | 是否禁用组件 | N +colorModes | Array | ["monochrome", "linear-gradient"] | 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色。TS 类型：`Array<'monochrome' \| 'linear-gradient'>` | N +disabled | Boolean | undefined | 是否禁用组件 | N enableAlpha | Boolean | false | 是否开启透明通道 | N enableMultipleGradient | Boolean | true | 是否允许开启通过点击渐变轴增加渐变梯度，默认开启，关闭时只会存在起始和结束两个颜色 | N format | String | RGB | 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效。可选项：RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N inputProps | Object | - | 透传 Input 输入框组件全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N multiple | Boolean | false | 【开发中】是否允许选中多个颜色 | N popupProps | Object | - | 透传 Popup 组件全部属性，如 `placement` `overlayStyle` `overlayClassName` `trigger`等。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N -recentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”。支持语法糖 `.sync`。TS 类型：`boolean \| Array` | N -defaultRecentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”。非受控属性。TS 类型：`boolean \| Array` | N +recentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”。支持语法糖 `.sync`。TS 类型：`boolean \| Array \| null` | N +defaultRecentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”。非受控属性。TS 类型：`boolean \| Array \| null` | N selectInputProps | Object | - | 透传 SelectInputProps 筛选器输入框组件全部属性。TS 类型：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N showPrimaryColorPreview | Boolean | true | 是否展示颜色选择条右侧的颜色预览区域 | N size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -swatchColors | Array | - | 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色。TS 类型：`Array` | N +swatchColors | Array | - | 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色。TS 类型：`Array \| null` | N value | String | - | 色值。支持语法糖 `v-model` | N defaultValue | String | - | 色值。非受控属性 | N onChange | Function | | TS 类型：`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`
选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts)。
`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input' \| 'preset' \| 'recent' `
| N diff --git a/src/color-picker/color-picker.tsx b/src/color-picker/color-picker.tsx index b3c077ba4..f907aee43 100644 --- a/src/color-picker/color-picker.tsx +++ b/src/color-picker/color-picker.tsx @@ -103,6 +103,7 @@ export default defineComponent({ this, 'default', , - default: () => ['monochrome', 'linear-gradient'], + default: (): TdColorPickerProps['colorModes'] => ['monochrome', 'linear-gradient'], }, /** 是否禁用组件 */ - disabled: Boolean, + disabled: { + type: Boolean, + default: undefined, + }, /** 是否开启透明通道 */ enableAlpha: Boolean, /** 是否允许开启通过点击渐变轴增加渐变梯度，默认开启，关闭时只会存在起始和结束两个颜色 */ diff --git a/src/color-picker/trigger.tsx b/src/color-picker/trigger.tsx index a80ad8b69..170d465d0 100644 --- a/src/color-picker/trigger.tsx +++ b/src/color-picker/trigger.tsx @@ -17,6 +17,10 @@ export default defineComponent({ }, inheritAttrs: false, props: { + borderless: { + type: Boolean, + default: false, + }, color: { type: String, default: '', @@ -98,6 +102,7 @@ export default defineComponent({ ['monochrome', 'linear-gradient'] + * @default ["monochrome", "linear-gradient"] */ colorModes?: Array<'monochrome' | 'linear-gradient'>; /** @@ -61,12 +66,12 @@ export interface TdColorPickerProps { * 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色” * @default [] */ - recentColors?: boolean | Array; + recentColors?: boolean | Array | null; /** * 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”，非受控属性 * @default [] */ - defaultRecentColors?: boolean | Array; + defaultRecentColors?: boolean | Array | null; /** * 透传 SelectInputProps 筛选器输入框组件全部属性 */ @@ -84,7 +89,7 @@ export interface TdColorPickerProps { /** * 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色 */ - swatchColors?: Array; + swatchColors?: Array | null; /** * 色值 * @default '' diff --git a/src/common.ts b/src/common.ts index 78b9ec507..78a504810 100644 --- a/src/common.ts +++ b/src/common.ts @@ -62,10 +62,7 @@ export type HorizontalAlignEnum = 'left' | 'center' | 'right'; export type VerticalAlignEnum = 'top' | 'middle' | 'bottom'; -export enum LayoutEnum { - VERTICAL = 'vertical', - HORIZONTAL = 'horizontal', -} +export type LayoutEnum = 'vertical' | 'horizontal'; export type ClassName = { [className: string]: any } | ClassName[] | string; diff --git a/src/date-picker/_usage/date-picker-props.json b/src/date-picker/_usage/date-picker-props.json index 24206945e..89d8c056c 100644 --- a/src/date-picker/_usage/date-picker-props.json +++ b/src/date-picker/_usage/date-picker-props.json @@ -1,76 +1,82 @@ -[ - { - "name": "allowInput", - "type": "Boolean", - "defaultValue": false, - "options": [] - }, - { - "name": "clearable", - "type": "Boolean", - "defaultValue": false, - "options": [] - }, - { - "name": "disabled", - "type": "Boolean", - "defaultValue": false, - "options": [] - }, - { - "name": "enableTimePicker", - "type": "Boolean", - "defaultValue": false, - "options": [] - }, - { - "name": "mode", - "type": "enum", - "defaultValue": "date", - "options": [ - { - "label": "year", - "value": "year" - }, - { - "label": "quarter", - "value": "quarter" - }, - { - "label": "month", - "value": "month" - }, - { - "label": "week", - "value": "week" - }, - { - "label": "date", - "value": "date" - } - ] - }, - { - "name": "presetsPlacement", - "type": "enum", - "defaultValue": "bottom", - "options": [ - { - "label": "left", - "value": "left" - }, - { - "label": "top", - "value": "top" - }, - { - "label": "right", - "value": "right" - }, - { - "label": "bottom", - "value": "bottom" - } - ] - } +[ + { + "name": "allowInput", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "borderless", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "clearable", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "disabled", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "enableTimePicker", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "mode", + "type": "enum", + "defaultValue": "date", + "options": [ + { + "label": "year", + "value": "year" + }, + { + "label": "quarter", + "value": "quarter" + }, + { + "label": "month", + "value": "month" + }, + { + "label": "week", + "value": "week" + }, + { + "label": "date", + "value": "date" + } + ] + }, + { + "name": "presetsPlacement", + "type": "enum", + "defaultValue": "bottom", + "options": [ + { + "label": "left", + "value": "left" + }, + { + "label": "top", + "value": "top" + }, + { + "label": "right", + "value": "right" + }, + { + "label": "bottom", + "value": "bottom" + } + ] + } ] \ No newline at end of file diff --git a/src/date-picker/_usage/date-range-picker-props.json b/src/date-picker/_usage/date-range-picker-props.json index 24206945e..89d8c056c 100644 --- a/src/date-picker/_usage/date-range-picker-props.json +++ b/src/date-picker/_usage/date-range-picker-props.json @@ -1,76 +1,82 @@ -[ - { - "name": "allowInput", - "type": "Boolean", - "defaultValue": false, - "options": [] - }, - { - "name": "clearable", - "type": "Boolean", - "defaultValue": false, - "options": [] - }, - { - "name": "disabled", - "type": "Boolean", - "defaultValue": false, - "options": [] - }, - { - "name": "enableTimePicker", - "type": "Boolean", - "defaultValue": false, - "options": [] - }, - { - "name": "mode", - "type": "enum", - "defaultValue": "date", - "options": [ - { - "label": "year", - "value": "year" - }, - { - "label": "quarter", - "value": "quarter" - }, - { - "label": "month", - "value": "month" - }, - { - "label": "week", - "value": "week" - }, - { - "label": "date", - "value": "date" - } - ] - }, - { - "name": "presetsPlacement", - "type": "enum", - "defaultValue": "bottom", - "options": [ - { - "label": "left", - "value": "left" - }, - { - "label": "top", - "value": "top" - }, - { - "label": "right", - "value": "right" - }, - { - "label": "bottom", - "value": "bottom" - } - ] - } +[ + { + "name": "allowInput", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "borderless", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "clearable", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "disabled", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "enableTimePicker", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "mode", + "type": "enum", + "defaultValue": "date", + "options": [ + { + "label": "year", + "value": "year" + }, + { + "label": "quarter", + "value": "quarter" + }, + { + "label": "month", + "value": "month" + }, + { + "label": "week", + "value": "week" + }, + { + "label": "date", + "value": "date" + } + ] + }, + { + "name": "presetsPlacement", + "type": "enum", + "defaultValue": "bottom", + "options": [ + { + "label": "left", + "value": "left" + }, + { + "label": "top", + "value": "top" + }, + { + "label": "right", + "value": "right" + }, + { + "label": "bottom", + "value": "bottom" + } + ] + } ] \ No newline at end of file diff --git a/src/date-picker/date-picker.en-US.md b/src/date-picker/date-picker.en-US.md index e45329843..a04cb7b39 100644 --- a/src/date-picker/date-picker.en-US.md +++ b/src/date-picker/date-picker.en-US.md @@ -1,27 +1,30 @@ :: BASE_DOC :: ## API + ### DatePicker Props name | type | default | description | required -- | -- | -- | -- | -- allowInput | Boolean | false | \- | N +borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N defaultTime | String | '00:00:00' | Time selector default value | N disableDate | Object / Array / Function | - | Typescript：`DisableDate` `type DisableDate = Array \| DisableDateObj \| ((date: DateValue) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N disabled | Boolean | - | make DatePicker to be disabled | N enableTimePicker | Boolean | false | \- | N -firstDayOfWeek | Number | 7 | options：1/2/3/4/5/6/7 | N +firstDayOfWeek | Number | 7 | options: 1/2/3/4/5/6/7 | N format | String | 'YYYY-MM-DD' | \- | N inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N -mode | String | date | options：year/quarter/month/week/date | N +label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +mode | String | date | options: year/quarter/month/week/date | N placeholder | String / Array | undefined | Typescript：`string` | N popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N 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 -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 +presetsPlacement | String | bottom | options: left/top/right/bottom | 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 timePickerProps | Object | - | Typescript：`TimePickerProps`，[TimePicker API Documents](./time-picker?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N tips | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -46,35 +49,38 @@ focus | `(context: { value: DateValue; e: FocusEvent })` | \- pick | `(value: DateValue)` | \- preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | \- + ### DateRangePicker Props name | type | default | description | required -- | -- | -- | -- | -- allowInput | Boolean | false | \- | N +borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N defaultTime | Array | ["00:00:00", "23:59:59"] | Time selector default value。Typescript：`string[]` | N disableDate | Object / Array / Function | - | Typescript：`DisableRangeDate` `type DisableRangeDate = Array \| DisableDateObj \| ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }` `type DateRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N disabled | Boolean | - | \- | N enableTimePicker | Boolean | false | \- | N -firstDayOfWeek | Number | - | options：1/2/3/4/5/6/7 | N +firstDayOfWeek | Number | - | options: 1/2/3/4/5/6/7 | N format | String | - | \- | N -mode | String | date | options：year/quarter/month/week/date | N +label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +mode | String | date | options: year/quarter/month/week/date | N panelPreselection | Boolean | true | \- | N placeholder | String / Array | - | Typescript：`string \| Array` | N popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N prefixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N presets | Object | - | Typescript：`PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [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 +presetsPlacement | String | bottom | options: left/top/right/bottom | N rangeInputProps | Object | - | Typescript：`RangeInputProps`，[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N separator | String | - | \- | 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 +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 timePickerProps | Object | - | Typescript：`TimePickerProps`，[TimePicker API Documents](./time-picker?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N tips | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N value | Array | [] | `v-model` is supported。Typescript：`DateRangeValue` `type DateRangeValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N defaultValue | Array | [] | uncontrolled property。Typescript：`DateRangeValue` `type DateRangeValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N -valueType | String | - | options：time-stamp/Date/YYYY/YYYY-MM/YYYY-MM-DD/YYYY-MM-DD HH/YYYY-MM-DD HH:mm/YYYY-MM-DD HH:mm:ss/YYYY-MM-DD HH:mm:ss:SSS | N +valueType | String | - | options: time-stamp/Date/YYYY/YYYY-MM/YYYY-MM-DD/YYYY-MM-DD HH/YYYY-MM-DD HH:mm/YYYY-MM-DD HH:mm:ss/YYYY-MM-DD HH:mm:ss:SSS | N onBlur | Function | | Typescript：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`
| N onChange | Function | | Typescript：`(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: DatePickerTriggerSource }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`
| N onConfirm | Function | | Typescript：`(context: { date: Date[], e: MouseEvent, partial: DateRangePickerPartial }) => void`
| N @@ -95,6 +101,7 @@ input | `(context: { input: string; value: DateRangeValue; partial: DateRangePic pick | `(value: DateValue, context: PickContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`
preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | \- + ### DatePickerPanel Props name | type | default | description | required @@ -123,6 +130,7 @@ preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | \- time-change | `(context: { time: string, date: Date, trigger: DatePickerTimeChangeTrigger, e?: MouseEvent })` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`type DatePickerTimeChangeTrigger = 'time-hour' \| 'time-minute' \| 'time-second'`
year-change | `(context: { year: number, date: Date, trigger: DatePickerYearChangeTrigger, e?: MouseEvent })` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`type DatePickerYearChangeTrigger = 'year-select' \| 'year-arrow-next' \| 'year-arrow-previous' \| 'today'`
+ ### DateRangePickerPanel Props name | type | default | description | required diff --git a/src/date-picker/date-picker.md b/src/date-picker/date-picker.md index d0598b773..c2a07f3be 100644 --- a/src/date-picker/date-picker.md +++ b/src/date-picker/date-picker.md @@ -1,11 +1,13 @@ :: BASE_DOC :: ## API + ### DatePicker Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- allowInput | Boolean | false | 是否允许输入日期 | N +borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否显示清除按钮 | N defaultTime | String | '00:00:00' | 时间选择器默认值，当 value/defaultValue 未设置值时有效 | N disableDate | Object / Array / Function | - | 禁用日期，示例：['A', 'B'] 表示日期 A 和日期 B 会被禁用。`{ from: 'A', to: 'B' }` 表示在 A 到 B 之间的日期会被禁用。`{ before: 'A', after: 'B' }` 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01'，B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用。TS 类型：`DisableDate` `type DisableDate = Array \| DisableDateObj \| ((date: DateValue) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N @@ -47,11 +49,13 @@ focus | `(context: { value: DateValue; e: FocusEvent })` | 输入框获得焦点 pick | `(value: DateValue)` | 面板选中值后触发 preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | 点击预设按钮后触发 + ### DateRangePicker Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- allowInput | Boolean | false | 是否允许输入日期 | N +borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否显示清除按钮 | N defaultTime | Array | ["00:00:00", "23:59:59"] | 时间选择器默认值，当 value/defaultValue 未设置值时有效。TS 类型：`string[]` | N disableDate | Object / Array / Function | - | 禁用日期，示例：['A', 'B'] 表示日期 A 和日期 B 会被禁用。{ from: 'A', to: 'B' } 表示在 A 到 B 之间的日期会被禁用。{ before: 'A', after: 'B' } 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01'，B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用。TS 类型：`DisableRangeDate` `type DisableRangeDate = Array \| DisableDateObj \| ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }` `type DateRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N @@ -97,9 +101,10 @@ input | `(context: { input: string; value: DateRangeValue; partial: DateRangePic pick | `(value: DateValue, context: PickContext)` | 选中日期时触发，可能是开始日期，也可能是结束日期，第二个参数可以区分是开始日期或是结束日期。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`
preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | 点击预设按钮后触发 + ### DatePickerPanel Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- defaultTime | String | '00:00:00' | 时间选择器默认值，当 value/defaultValue 未设置值时有效 | N `Pick` | \- | - | 继承 `Pick` 中的全部属性 | N @@ -125,9 +130,10 @@ preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | 点击预设 time-change | `(context: { time: string, date: Date, trigger: DatePickerTimeChangeTrigger, e?: MouseEvent })` | 时间切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`type DatePickerTimeChangeTrigger = 'time-hour' \| 'time-minute' \| 'time-second'`
year-change | `(context: { year: number, date: Date, trigger: DatePickerYearChangeTrigger, e?: MouseEvent })` | 年份切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`type DatePickerYearChangeTrigger = 'year-select' \| 'year-arrow-next' \| 'year-arrow-previous' \| 'today'`
+ ### DateRangePickerPanel Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- defaultTime | Array | ["00:00:00", "23:59:59"] | 时间选择器默认值，当 value/defaultValue 未设置值时有效。TS 类型：`string[]` | N `Pick` | \- | - | 继承 `Pick` 中的全部属性 | N diff --git a/src/date-picker/date-range-picker-props.ts b/src/date-picker/date-range-picker-props.ts index 548de5881..6a53709b2 100644 --- a/src/date-picker/date-range-picker-props.ts +++ b/src/date-picker/date-range-picker-props.ts @@ -10,6 +10,8 @@ import { PropType } from 'vue'; export default { /** 是否允许输入日期 */ allowInput: Boolean, + /** 无边框模式 */ + borderless: Boolean, /** 是否显示清除按钮 */ clearable: Boolean, /** 时间选择器默认值，当 value/defaultValue 未设置值时有效 */ diff --git a/src/date-picker/hooks/useRange.ts b/src/date-picker/hooks/useRange.ts index a734f5005..f45aae7f5 100644 --- a/src/date-picker/hooks/useRange.ts +++ b/src/date-picker/hooks/useRange.ts @@ -36,6 +36,7 @@ export default function useRange(props: TdDateRangePickerProps, { emit }: any) { const rangeInputProps = computed(() => ({ ...props.rangeInputProps, ref: inputRef, + borderless: props.borderless, size: props.size, clearable: props.clearable, prefixIcon: props.prefixIcon, diff --git a/src/date-picker/hooks/useSingle.ts b/src/date-picker/hooks/useSingle.ts index 71d90ae46..572d6d660 100644 --- a/src/date-picker/hooks/useSingle.ts +++ b/src/date-picker/hooks/useSingle.ts @@ -38,6 +38,7 @@ export default function useSingle(props: TdDatePickerProps, { emit }: any) { const inputProps = computed(() => ({ ...props.inputProps, ref: inputRef, + borderless: props.borderless, size: props.size, prefixIcon: props.prefixIcon, placeholder: props.placeholder || global.value.placeholder[props.mode], diff --git a/src/date-picker/props.ts b/src/date-picker/props.ts index 84511a072..a96d8a8bc 100644 --- a/src/date-picker/props.ts +++ b/src/date-picker/props.ts @@ -10,6 +10,8 @@ import { PropType } from 'vue'; export default { /** 是否允许输入日期 */ allowInput: Boolean, + /** 无边框模式 */ + borderless: Boolean, /** 是否显示清除按钮 */ clearable: Boolean, /** 时间选择器默认值，当 value/defaultValue 未设置值时有效 */ diff --git a/src/date-picker/type.ts b/src/date-picker/type.ts index 7dcb6a5ba..ca27c784d 100644 --- a/src/date-picker/type.ts +++ b/src/date-picker/type.ts @@ -17,6 +17,11 @@ export interface TdDatePickerProps { * @default false */ allowInput?: boolean; + /** + * 无边框模式 + * @default false + */ + borderless?: boolean; /** * 是否显示清除按钮 * @default false @@ -53,7 +58,7 @@ export interface TdDatePickerProps { */ inputProps?: InputProps; /** - * 左侧内容 + * 左侧文本 */ label?: string | TNode; /** @@ -151,6 +156,11 @@ export interface TdDateRangePickerProps { * @default false */ allowInput?: boolean; + /** + * 无边框模式 + * @default false + */ + borderless?: boolean; /** * 是否显示清除按钮 * @default false diff --git a/src/descriptions/descriptions-body.tsx b/src/descriptions/descriptions-body.tsx index 919e02ac1..9151f7a48 100644 --- a/src/descriptions/descriptions-body.tsx +++ b/src/descriptions/descriptions-body.tsx @@ -28,7 +28,7 @@ export default defineComponent({ render() { const props = this.$props; - const label = (node: TdDescriptionItem, layout: LayoutEnum = LayoutEnum.HORIZONTAL) => { + const label = (node: TdDescriptionItem, layout: LayoutEnum = 'horizontal') => { const labelClass = [`${this.COMPONENT_NAME}__label`]; let label = null; @@ -41,7 +41,7 @@ export default defineComponent({ const propsData: Record = node.componentOptions.propsData || {}; span = propsData.span; } - const labelSpan = layout === LayoutEnum.HORIZONTAL ? 1 : span; + const labelSpan = layout === 'horizontal' ? 1 : span; return ( @@ -51,7 +51,7 @@ export default defineComponent({ ); }; - const content = (node: TdDescriptionItem, layout: LayoutEnum = LayoutEnum.HORIZONTAL) => { + const content = (node: TdDescriptionItem, layout: LayoutEnum = 'horizontal') => { const contentClass = [`${this.COMPONENT_NAME}__content`]; let content = null; @@ -64,7 +64,7 @@ export default defineComponent({ const propsData: Record = node.componentOptions.propsData || {}; span = propsData.span; } - const contentSpan = span > 1 && layout === LayoutEnum.HORIZONTAL ? span * 2 - 1 : span; + const contentSpan = span > 1 && layout === 'horizontal' ? span * 2 - 1 : span; return ( @@ -80,8 +80,8 @@ export default defineComponent({ const hh = (row: TdDescriptionItem[]) => {row.map((node) => [label(node), content(node)])}; const hv = (row: TdDescriptionItem[]) => [ - {row.map((node) => label(node, LayoutEnum.VERTICAL))}, - {row.map((node) => content(node, LayoutEnum.VERTICAL))}, + {row.map((node) => label(node, 'vertical'))}, + {row.map((node) => content(node, 'vertical'))}, ]; const vh = (row: TdDescriptionItem[]) => row.map((node) => ( @@ -94,13 +94,13 @@ export default defineComponent({ const vv = (row: TdDescriptionItem[]) => row.map((node) => [{label(node)}, {content(node)}]); const renderRow = (row: TdDescriptionItem[]) => { - if (this.descriptionsProps.layout === LayoutEnum.HORIZONTAL) { - if (this.descriptionsProps.itemLayout === LayoutEnum.HORIZONTAL) { + if (this.descriptionsProps.layout === 'horizontal') { + if (this.descriptionsProps.itemLayout === 'horizontal') { return hh(row); } return hv(row); } - if (this.descriptionsProps.itemLayout === LayoutEnum.HORIZONTAL) { + if (this.descriptionsProps.itemLayout === 'horizontal') { return vh(row); } return vv(row); diff --git a/src/descriptions/descriptions.tsx b/src/descriptions/descriptions.tsx index 711e2ef57..162e3d084 100644 --- a/src/descriptions/descriptions.tsx +++ b/src/descriptions/descriptions.tsx @@ -2,7 +2,6 @@ import isNil from 'lodash/isNil'; import isArray from 'lodash/isArray'; import { defineComponent, provide, ref } from 'vue'; -import { LayoutEnum } from '../common'; import { useTNodeJSX } from '../hooks/tnode'; import { useChildComponentSlots } from '../hooks'; import { usePrefixClass } from '../hooks/useConfig'; @@ -71,12 +70,12 @@ export default defineComponent({ } } - // 2. 判断布局，如果整体布局为 LayoutEnum.VERTICAL，那么直接返回即可。 - if (layout === LayoutEnum.VERTICAL) { + // 2. 判断布局，如果整体布局为 'vertical'，那么直接返回即可。 + if (layout === 'vertical') { return [items]; } - // 3. 布局为 LayoutEnum.HORIZONTAL 时，需要计算每一行的 item 个数 + // 3. 布局为 'horizontal' 时，需要计算每一行的 item 个数 let temp: TdDescriptionItem[] = []; let reset = column; diff --git a/src/form/form-item.tsx b/src/form/form-item.tsx index 481f3fe19..eaef7c80f 100644 --- a/src/form/form-item.tsx +++ b/src/form/form-item.tsx @@ -48,6 +48,11 @@ export interface FormItemConstructor extends Vue { form: FormInstance; } +export function getFormItemClassName(componentName: string, name?: string) { + if (!name) return ''; + return `${componentName}-item__${name}`.replace(/(\[|\]\.|'|")/g, '_'); +} + export default mixins(getConfigReceiverMixins('form'), getGlobalIconMixins()).extend({ name: 'TFormItem', @@ -89,7 +94,7 @@ export default mixins(getConfigReceiverMixins(' classes(): ClassName { return [ `${this.componentName}__item`, - `${this.componentName}-item__${this.name || ''}`, + getFormItemClassName(this.componentName, this.name), { [`${this.componentName}__item-with-help`]: this.help, [`${this.componentName}__item-with-extra`]: this.extraNode, diff --git a/src/form/form.tsx b/src/form/form.tsx index c51819b10..076f0c890 100644 --- a/src/form/form.tsx +++ b/src/form/form.tsx @@ -13,7 +13,7 @@ import { import props from './props'; import { FORM_CONTROL_COMPONENTS } from './const'; import { emitEvent } from '../utils/event'; -import FormItem, { FormItemValidateResult } from './form-item'; +import FormItem, { FormItemValidateResult, getFormItemClassName } from './form-item'; import { FormResetEvent, FormSubmitEvent, ClassName } from '../common'; import { getClassPrefixMixins } from '../config-provider/config-receiver'; import mixins from '../utils/mixins'; @@ -75,7 +75,7 @@ export default mixins(classPrefixMixins).extend({ if (r === true) return; const [firstKey] = Object.keys(r); if (this.scrollToFirstError) { - this.scrollTo(`.${this.componentName}-item__${firstKey}`); + this.scrollTo(`.${getFormItemClassName(this.componentName, firstKey)}`); } return r[firstKey][0].message; }, diff --git a/src/input/_usage/props.json b/src/input/_usage/props.json index 25eac33d2..1d16d6b3f 100644 --- a/src/input/_usage/props.json +++ b/src/input/_usage/props.json @@ -1,138 +1,144 @@ -[ - { - "name": "align", - "type": "enum", - "defaultValue": "left", - "options": [ - { - "label": "left", - "value": "left" - }, - { - "label": "center", - "value": "center" - }, - { - "label": "right", - "value": "right" - } - ] - }, - { - "name": "autofocus", - "type": "Boolean", - "defaultValue": false, - "options": [] - }, - { - "name": "autoWidth", - "type": "Boolean", - "defaultValue": false, - "options": [] - }, - { - "name": "clearable", - "type": "Boolean", - "defaultValue": false, - "options": [] - }, - { - "name": "disabled", - "type": "Boolean", - "defaultValue": false, - "options": [] - }, - { - "name": "readonly", - "type": "Boolean", - "defaultValue": false, - "options": [] - }, - { - "name": "showClearIconOnEmpty", - "type": "Boolean", - "defaultValue": false, - "options": [] - }, - { - "name": "size", - "type": "enum", - "defaultValue": "medium", - "options": [ - { - "label": "small", - "value": "small" - }, - { - "label": "medium", - "value": "medium" - }, - { - "label": "large", - "value": "large" - } - ] - }, - { - "name": "status", - "type": "enum", - "defaultValue": "", - "options": [ - { - "label": "default", - "value": "" - }, - { - "label": "success", - "value": "success" - }, - { - "label": "warning", - "value": "warning" - }, - { - "label": "error", - "value": "error" - } - ] - }, - { - "name": "type", - "type": "enum", - "defaultValue": "text", - "options": [ - { - "label": "text", - "value": "text" - }, - { - "label": "number", - "value": "number" - }, - { - "label": "url", - "value": "url" - }, - { - "label": "tel", - "value": "tel" - }, - { - "label": "password", - "value": "password" - }, - { - "label": "search", - "value": "search" - }, - { - "label": "submit", - "value": "submit" - }, - { - "label": "hidden", - "value": "hidden" - } - ] - } +[ + { + "name": "align", + "type": "enum", + "defaultValue": "left", + "options": [ + { + "label": "left", + "value": "left" + }, + { + "label": "center", + "value": "center" + }, + { + "label": "right", + "value": "right" + } + ] + }, + { + "name": "autofocus", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "autoWidth", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "borderless", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "clearable", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "disabled", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "readonly", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "showClearIconOnEmpty", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "size", + "type": "enum", + "defaultValue": "medium", + "options": [ + { + "label": "small", + "value": "small" + }, + { + "label": "medium", + "value": "medium" + }, + { + "label": "large", + "value": "large" + } + ] + }, + { + "name": "status", + "type": "enum", + "defaultValue": "", + "options": [ + { + "label": "default", + "value": "" + }, + { + "label": "success", + "value": "success" + }, + { + "label": "warning", + "value": "warning" + }, + { + "label": "error", + "value": "error" + } + ] + }, + { + "name": "type", + "type": "enum", + "defaultValue": "text", + "options": [ + { + "label": "text", + "value": "text" + }, + { + "label": "number", + "value": "number" + }, + { + "label": "url", + "value": "url" + }, + { + "label": "tel", + "value": "tel" + }, + { + "label": "password", + "value": "password" + }, + { + "label": "search", + "value": "search" + }, + { + "label": "submit", + "value": "submit" + }, + { + "label": "hidden", + "value": "hidden" + } + ] + } ] \ No newline at end of file diff --git a/src/input/input.en-US.md b/src/input/input.en-US.md index bf56c2eb0..d044a7444 100644 --- a/src/input/input.en-US.md +++ b/src/input/input.en-US.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Input Props name | type | default | description | required @@ -12,7 +13,7 @@ autocomplete | String | undefined | attribute of input element, [see here](https autofocus | Boolean | false | autofocus on first rendered | N borderless | Boolean | false | input without border | N clearable | Boolean | false | show clear icon, clicked to clear input value | N -disabled | Boolean | - | make input to be disabled | N +disabled | Boolean | undefined | make input to be disabled | N format | Function | - | input value formatter, `type=number` does not work. if you need to format number, `InputNumber` Component might be better。Typescript：`InputFormatType` `type InputFormatType = (value: string) => string`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/input/type.ts) | N inputClass | String / Object / Array | - | add className to the element with `t-input` class。Typescript：`ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N label | String / Slot / Function | - | text on the left of input。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -21,10 +22,11 @@ maxlength | String | - | \- | N name | String | - | \- | N placeholder | String | undefined | \- | N prefixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -readonly | Boolean | false | \- | N +readonly | Boolean | undefined | \- | N showClearIconOnEmpty | Boolean | false | show clear icon on empty input value | N showLimitNumber | Boolean | false | show limit number text on the right | N size | String | medium | make input to be different size。options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +spellCheck | Boolean | false | attribute of input element, [see here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/spellcheck) | N status | String | undefined | options: default/success/warning/error | N suffix | String / Slot / Function | - | suffix content before suffixIcon。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N suffixIcon | Slot / Function | - | suffix icon of input。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -70,6 +72,7 @@ paste | `(context: { e: ClipboardEvent; pasteValue: string })` | \- validate | `(context: { error?: 'exceed-maximum' \| 'below-minimum' })` | trigger on text length being over max length or max character wheel | `(context: { e: WheelEvent })` | trigger on mouse wheel + ### InputGroup Props name | type | default | description | required diff --git a/src/input/input.md b/src/input/input.md index 7aca3a615..c86793f93 100644 --- a/src/input/input.md +++ b/src/input/input.md @@ -1,30 +1,32 @@ :: BASE_DOC :: ## API + ### Input Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- align | String | left | 文本内容位置，居左/居中/居右。可选项：left/center/right | N allowInputOverMax | Boolean | false | 超出 `maxlength` 或 `maxcharacter` 之后是否允许继续输入 | N 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 +disabled | Boolean | undefined | 是否禁用输入框 | 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 inputClass | String / Object / Array | - | t-input 同级类名，示例：'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]`。TS 类型：`ClassName`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N label | String / Slot / Function | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 | N -maxlength | String | - | 用户最多可以输入的文本长度，一个中文等于一个计数长度。值为空，则表示不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 | N +maxlength | String / Number | - | 用户最多可以输入的文本长度，一个中文等于一个计数长度。默认为空，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 | N name | String | - | 名称 | N placeholder | String | undefined | 占位符 | N prefixIcon | Slot / Function | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -readonly | Boolean | false | 只读状态 | N +readonly | Boolean | undefined | 只读状态 | N showClearIconOnEmpty | Boolean | false | 输入框内容为空时，悬浮状态是否显示清空按钮，默认不显示 | N showLimitNumber | Boolean | false | 是否在输入框右侧显示字数统计 | N size | String | medium | 输入框尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +spellCheck | Boolean | false | 是否开启拼写检查，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/spellcheck) | N status | String | undefined | 输入框状态。默认情况会由组件内部根据实际情况呈现，如果文本过长引起的状态变化。可选项：default/success/warning/error | N suffix | String / Slot / Function | - | 后置图标前的后置内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N suffixIcon | Slot / Function | - | 组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -70,8 +72,9 @@ paste | `(context: { e: ClipboardEvent; pasteValue: string })` | 粘贴事件， validate | `(context: { error?: 'exceed-maximum' \| 'below-minimum' })` | 字数超出限制时触发 wheel | `(context: { e: WheelEvent })` | 输入框中滚动鼠标时触发 + ### InputGroup Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- separate | Boolean | - | 多个输入框之间是否需要间隔 | N diff --git a/src/input/input.tsx b/src/input/input.tsx index 6c9c733af..20d7bab4d 100644 --- a/src/input/input.tsx +++ b/src/input/input.tsx @@ -98,6 +98,7 @@ export default mixins( name: this.name || undefined, type: this.renderType, unselectable: this.readonly ? 'on' : 'off', + spellCheck: this.spellCheck, }); }, inputClasses(): ClassName { diff --git a/src/input/props.ts b/src/input/props.ts index b9db65c52..75f4d2c2a 100644 --- a/src/input/props.ts +++ b/src/input/props.ts @@ -28,12 +28,15 @@ export default { }, /** 自动聚焦 */ autofocus: Boolean, - /** 【开发中】无边框模式 */ + /** 是否开启无边框模式 */ borderless: Boolean, /** 是否可清空 */ clearable: Boolean, /** 是否禁用输入框 */ - disabled: Boolean, + disabled: { + type: Boolean, + default: undefined, + }, /** 指定输入框展示值的格式。注意 `type=number` 时请勿使用，此功能建议更为使用 `InputNumber` 组件 */ format: { type: Function as PropType, @@ -50,7 +53,7 @@ export default { maxcharacter: { type: Number, }, - /** 用户最多可以输入的文本长度，一个中文等于一个计数长度。值为空，则表示不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 */ + /** 用户最多可以输入的文本长度，一个中文等于一个计数长度。默认为空，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 */ maxlength: { type: Number, }, @@ -69,7 +72,10 @@ export default { type: Function as PropType, }, /** 只读状态 */ - readonly: Boolean, + readonly: { + type: Boolean, + default: undefined, + }, /** 输入框内容为空时，悬浮状态是否显示清空按钮，默认不显示 */ showClearIconOnEmpty: Boolean, /** 是否在输入框右侧显示字数统计 */ @@ -83,6 +89,8 @@ export default { return ['small', 'medium', 'large'].includes(val); }, }, + /** 是否开启拼写检查，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/spellcheck) */ + spellCheck: Boolean, /** 输入框状态。默认情况会由组件内部根据实际情况呈现，如果文本过长引起的状态变化 */ status: { type: String as PropType, diff --git a/src/input/type.ts b/src/input/type.ts index 89cafbe03..fdfbe122d 100644 --- a/src/input/type.ts +++ b/src/input/type.ts @@ -32,7 +32,7 @@ export interface TdInputProps { */ autofocus?: boolean; /** - * 【开发中】无边框模式 + * 是否开启无边框模式 * @default false */ borderless?: boolean; @@ -62,7 +62,7 @@ export interface TdInputProps { */ maxcharacter?: number; /** - * 用户最多可以输入的文本长度，一个中文等于一个计数长度。值为空，则表示不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 + * 用户最多可以输入的文本长度，一个中文等于一个计数长度。默认为空，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 */ maxlength?: number; /** @@ -80,7 +80,6 @@ export interface TdInputProps { prefixIcon?: TNode; /** * 只读状态 - * @default false */ readonly?: boolean; /** @@ -98,6 +97,11 @@ export interface TdInputProps { * @default medium */ size?: SizeEnum; + /** + * 是否开启拼写检查，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/spellcheck) + * @default false + */ + spellCheck?: boolean; /** * 输入框状态。默认情况会由组件内部根据实际情况呈现，如果文本过长引起的状态变化 */ diff --git a/src/range-input/_usage/index.vue b/src/range-input/_usage/index.vue new file mode 100644 index 000000000..7d4962fdb --- /dev/null +++ b/src/range-input/_usage/index.vue @@ -0,0 +1,24 @@ + + + + diff --git a/src/range-input/_usage/props.json b/src/range-input/_usage/props.json new file mode 100644 index 000000000..235dbc4bf --- /dev/null +++ b/src/range-input/_usage/props.json @@ -0,0 +1,74 @@ +[ + { + "name": "borderless", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "clearable", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "disabled", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "readonly", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "showClearIconOnEmpty", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "size", + "type": "enum", + "defaultValue": "medium", + "options": [ + { + "label": "small", + "value": "small" + }, + { + "label": "medium", + "value": "medium" + }, + { + "label": "large", + "value": "large" + } + ] + }, + { + "name": "status", + "type": "enum", + "defaultValue": "default", + "options": [ + { + "label": "default", + "value": "default" + }, + { + "label": "success", + "value": "success" + }, + { + "label": "warning", + "value": "warning" + }, + { + "label": "error", + "value": "error" + } + ] + } + ] \ No newline at end of file diff --git a/src/range-input/props.ts b/src/range-input/props.ts index f68dcdafc..92075f06d 100644 --- a/src/range-input/props.ts +++ b/src/range-input/props.ts @@ -12,10 +12,15 @@ export default { activeIndex: { type: Number, }, + /** 无边框模式 */ + borderless: Boolean, /** 是否可清空 */ clearable: Boolean, /** 是否禁用范围输入框 */ - disabled: Boolean, + disabled: { + type: Boolean, + default: undefined, + }, /** 指定输入框展示值的格式 */ format: { type: [Array, Function] as PropType, diff --git a/src/range-input/range-input-popup-props.ts b/src/range-input/range-input-popup-props.ts index 4abe1cf82..273773fe1 100644 --- a/src/range-input/range-input-popup-props.ts +++ b/src/range-input/range-input-popup-props.ts @@ -21,6 +21,10 @@ export default { defaultInputValue: { type: Array as PropType, }, + /** 左侧文本 */ + label: { + type: [String, Function] as PropType, + }, /** 下拉框内容，可完全自定义 */ panel: { type: [String, Function] as PropType, @@ -37,10 +41,6 @@ export default { }, /** 只读状态，值为真会隐藏输入框，且无法打开下拉框 */ readonly: Boolean, - /** 左侧文本 */ - label: { - type: [String, Function] as PropType, - }, /** 输入框状态 */ status: { type: String as PropType, diff --git a/src/range-input/range-input.en-US.md b/src/range-input/range-input.en-US.md index 098c1ed93..a160fee9f 100644 --- a/src/range-input/range-input.en-US.md +++ b/src/range-input/range-input.en-US.md @@ -1,13 +1,15 @@ :: BASE_DOC :: ## API + ### RangeInput Props name | type | default | description | required -- | -- | -- | -- | -- activeIndex | Number | - | \- | N +borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N -disabled | Boolean | - | \- | N +disabled | Boolean | undefined | \- | N format | Array / Function | - | Typescript：`InputFormatType \| Array` | N inputProps | Object / Array | - | Typescript：`InputProps \| Array`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/range-input/type.ts) | N label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -16,8 +18,8 @@ prefixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definitio readonly | Boolean | false | \- | N separator | String / Slot / Function | '-' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N showClearIconOnEmpty | Boolean | false | \- | N -size | String | medium | options：small/medium/large | N -status | String | default | options：default/success/warning/error | N +size | String | medium | options: small/medium/large | N +status | String | default | options: default/success/warning/error | N suffix | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N suffixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N tips | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -53,6 +55,7 @@ blur | `(options?: {position?: RangeInputPosition})` | \- | \- focus | `(options?: {position?: RangeInputPosition})` | \- | \- select | `(options?: {position?: RangeInputPosition})` | \- | \- + ### RangeInputPopup Props name | type | default | description | required @@ -61,12 +64,13 @@ autoWidth | Boolean | false | \- | N disabled | Boolean | - | \- | N inputValue | Array | - | `.sync` is supported。Typescript：`RangeInputValue` | N defaultInputValue | Array | - | uncontrolled property。Typescript：`RangeInputValue` | N +label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N panel | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/range-input/type.ts) | N popupVisible | Boolean | - | \- | N rangeInputProps | Object | - | Typescript：`RangeInputProps`，[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/range-input/type.ts) | N readonly | Boolean | false | \- | N -status | String | default | options：default/success/warning/error | N +status | String | default | options: default/success/warning/error | N tips | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N onInputChange | Function | | Typescript：`(value: RangeInputValue, context?: RangeInputValueChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/range-input/type.ts)。
`type RangeInputValueChangeContext = { e?: InputEvent \| MouseEvent; trigger?: 'input' \| 'clear', position?: RangeInputPosition }`
| N onPopupVisibleChange | Function | | Typescript：`(visible: boolean, context: PopupVisibleChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/range-input/type.ts)。
`import { PopupVisibleChangeContext } from '@Popup'`
| N diff --git a/src/range-input/range-input.md b/src/range-input/range-input.md index 587fc6723..b667b546b 100644 --- a/src/range-input/range-input.md +++ b/src/range-input/range-input.md @@ -1,13 +1,15 @@ :: BASE_DOC :: ## API + ### RangeInput Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- activeIndex | Number | - | 输入框高亮状态序号 | N +borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否可清空 | N -disabled | Boolean | - | 是否禁用范围输入框 | N +disabled | Boolean | undefined | 是否禁用范围输入框 | N format | Array / Function | - | 指定输入框展示值的格式。TS 类型：`InputFormatType \| Array` | N inputProps | Object / Array | - | 透传 Input 输入框组件全部属性，数组第一项表示第一个输入框属性，第二项表示第二个输入框属性。示例：`[{ label: 'A', name: 'A-name' }, { label: 'B', name: 'B-name' }]`。TS 类型：`InputProps \| Array`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/range-input/type.ts) | N label | String / Slot / Function | - | 左侧内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -53,14 +55,16 @@ blur | `(options?: {position?: RangeInputPosition})` | \- | 使其中一个输 focus | `(options?: {position?: RangeInputPosition})` | \- | 使其中一个输入框获得焦点 select | `(options?: {position?: RangeInputPosition})` | \- | 使其中一个输入框选中内容 + ### RangeInputPopup Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- autoWidth | Boolean | false | 宽度随内容自适应 | N disabled | Boolean | - | 是否禁用范围输入框，值为数组表示可分别控制某一个输入框是否禁用 | N inputValue | Array | - | 输入框的值。支持语法糖 `.sync`。TS 类型：`RangeInputValue` | N defaultInputValue | Array | - | 输入框的值。非受控属性。TS 类型：`RangeInputValue` | N +label | String / Slot / Function | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N panel | String / Slot / Function | - | 下拉框内容，可完全自定义。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N popupProps | Object | - | 透传 Popup 浮层组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/range-input/type.ts) | N popupVisible | Boolean | - | 是否显示下拉框 | N diff --git a/src/range-input/range-input.tsx b/src/range-input/range-input.tsx index 27c21d7b4..a7de713f3 100644 --- a/src/range-input/range-input.tsx +++ b/src/range-input/range-input.tsx @@ -165,6 +165,7 @@ export default defineComponent({ [STATUS.error]: this.status === 'error', [`${COMPONENT_NAME}--prefix`]: prefixIconContent || labelContent, [`${COMPONENT_NAME}--suffix`]: suffixIconContent || suffixContent, + [`${COMPONENT_NAME}--borderless`]: this.borderless, }, ]} onMouseenter={handleMouseEnter} diff --git a/src/range-input/type.ts b/src/range-input/type.ts index 70027e01a..59eae9c3e 100644 --- a/src/range-input/type.ts +++ b/src/range-input/type.ts @@ -15,6 +15,11 @@ export interface TdRangeInputProps { * 输入框高亮状态序号 */ activeIndex?: number; + /** + * 无边框模式 + * @default false + */ + borderless?: boolean; /** * 是否可清空 * @default false @@ -162,14 +167,14 @@ export interface TdRangeInputPopupProps { * 输入框的值 */ inputValue?: RangeInputValue; - /** - * 左侧文本 - */ - label?: string | TNode; /** * 输入框的值，非受控属性 */ defaultInputValue?: RangeInputValue; + /** + * 左侧文本 + */ + label?: string | TNode; /** * 下拉框内容，可完全自定义 */ diff --git a/src/table/__tests__/column.test.jsx b/src/table/__tests__/column.test.jsx index 5bcc3865b..bd98b5c28 100644 --- a/src/table/__tests__/column.test.jsx +++ b/src/table/__tests__/column.test.jsx @@ -74,5 +74,27 @@ TABLES.forEach((TTable) => { expect(tdList.at(3).classes('tdesign-class')).toBeTruthy(); expect(tdList.at(3).classes('tdesign-class1')).toBeFalsy(); }); + + // 校验逻辑与上面columns.className一致 + it('Props.columns.thClassName works fine', () => { + const columns = [ + { title: 'Index', colKey: 'index', thClassName: () => ['th-class'] }, + { title: 'Instance', colKey: 'instance', thClassName: 'th-class' }, + { title: 'description', colKey: 'description', thClassName: [{ 'th-class': true }] }, + { title: 'Owner', colKey: 'owner', thClassName: { 'th-class': true, 'th-class1': false } }, + ]; + const wrapper = mount({ + render() { + return ; + }, + }); + const thWrapper = wrapper.find('thead > tr'); + const thList = thWrapper.findAll('th'); + expect(thList.at(0).classes('th-class')).toBeTruthy(); + expect(thList.at(1).classes('th-class')).toBeTruthy(); + expect(thList.at(2).classes('th-class')).toBeTruthy(); + expect(thList.at(3).classes('th-class')).toBeTruthy(); + expect(thList.at(3).classes('th-class1')).toBeFalsy(); + }); }); }); diff --git a/src/table/thead.tsx b/src/table/thead.tsx index e9b4b9edf..00f987530 100644 --- a/src/table/thead.tsx +++ b/src/table/thead.tsx @@ -139,12 +139,14 @@ export default defineComponent({ rowIndex: -1, }; const customClasses = formatClassNames(col.className, { ...colParams, type: 'th' }); + const thCustomClasses = formatClassNames(col.thClassName, { ...colParams, type: 'th' }); const isLeftFixedActive = this.showColumnShadow.left && col.fixed === 'left'; const isRightFixedActive = this.showColumnShadow.right && col.fixed === 'right'; const canDragSort = this.thDraggable && !(isLeftFixedActive || isRightFixedActive); const thClasses = [ thStyles.classes, customClasses, + thCustomClasses, { // 受 rowspan 影响，部分 tr > th:first-child 需要补足左边框 [this.tableHeaderClasses.thBordered]: thBorderMap.get(col), diff --git a/src/tag-input/_usage/props.json b/src/tag-input/_usage/props.json index fafeee078..9aa3fa9bf 100644 --- a/src/tag-input/_usage/props.json +++ b/src/tag-input/_usage/props.json @@ -1,66 +1,72 @@ -[ - { - "name": "autoWidth", - "type": "Boolean", - "defaultValue": false, - "options": [] - }, - { - "name": "clearable", - "type": "Boolean", - "defaultValue": false, - "options": [] - }, - { - "name": "disabled", - "type": "Boolean", - "defaultValue": false, - "options": [] - }, - { - "name": "dragSort", - "type": "Boolean", - "defaultValue": false, - "options": [] - }, - { - "name": "excessTagsDisplayType", - "type": "enum", - "defaultValue": "scroll", - "options": [ - { - "label": "scroll", - "value": "scroll" - }, - { - "label": "break-line", - "value": "break-line" - } - ] - }, - { - "name": "readonly", - "type": "Boolean", - "defaultValue": false, - "options": [] - }, - { - "name": "size", - "type": "enum", - "defaultValue": "medium", - "options": [ - { - "label": "small", - "value": "small" - }, - { - "label": "medium", - "value": "medium" - }, - { - "label": "large", - "value": "large" - } - ] - } +[ + { + "name": "autoWidth", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "borderless", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "clearable", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "disabled", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "dragSort", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "excessTagsDisplayType", + "type": "enum", + "defaultValue": "scroll", + "options": [ + { + "label": "scroll", + "value": "scroll" + }, + { + "label": "break-line", + "value": "break-line" + } + ] + }, + { + "name": "readonly", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "size", + "type": "enum", + "defaultValue": "medium", + "options": [ + { + "label": "small", + "value": "small" + }, + { + "label": "medium", + "value": "medium" + }, + { + "label": "large", + "value": "large" + } + ] + } ] \ No newline at end of file diff --git a/src/tag-input/props.ts b/src/tag-input/props.ts index a30d02c66..772e8f6d6 100644 --- a/src/tag-input/props.ts +++ b/src/tag-input/props.ts @@ -10,6 +10,8 @@ import { PropType } from 'vue'; export default { /** 宽度随内容自适应 */ autoWidth: Boolean, + /** 无边框模式 */ + borderless: Boolean, /** 是否可清空 */ clearable: Boolean, /** 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调 */ @@ -17,7 +19,10 @@ export default { type: Function as PropType, }, /** 是否禁用标签输入框 */ - disabled: Boolean, + disabled: { + type: Boolean, + default: undefined, + }, /** 拖拽调整标签顺序 */ dragSort: Boolean, /** 标签超出时的呈现方式，有两种：横向滚动显示 和 换行显示 */ @@ -67,7 +72,7 @@ export default { }, /** 只读状态，值为真会隐藏标签移除按钮和输入框 */ readonly: Boolean, - /** 尺寸 */ + /** 组件尺寸 */ size: { type: String as PropType, default: 'medium' as TdTagInputProps['size'], diff --git a/src/tag-input/tag-input.en-US.md b/src/tag-input/tag-input.en-US.md index 9bce04c17..399905fb1 100644 --- a/src/tag-input/tag-input.en-US.md +++ b/src/tag-input/tag-input.en-US.md @@ -7,9 +7,10 @@ name | type | default | description | required -- | -- | -- | -- | -- autoWidth | Boolean | false | \- | N +borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: TagInputValue; collapsedSelectedItems: TagInputValue; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -disabled | Boolean | - | \- | N +disabled | Boolean | undefined | \- | N dragSort | Boolean | false | \- | N excessTagsDisplayType | String | break-line | options: scroll/break-line | N inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag-input/type.ts) | N @@ -21,7 +22,7 @@ minCollapsedNum | Number | 0 | \- | N placeholder | String | undefined | placeholder description | N prefixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N readonly | Boolean | false | \- | N -size | String | medium | options: small/medium/large | 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 | - | options: default/success/warning/error | N suffix | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | 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/tag-input/tag-input.md b/src/tag-input/tag-input.md index 9a79dec47..fdf817495 100644 --- a/src/tag-input/tag-input.md +++ b/src/tag-input/tag-input.md @@ -7,9 +7,10 @@ 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- autoWidth | Boolean | false | 宽度随内容自适应 | N +borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否可清空 | N collapsedItems | Slot / Function | - | 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调。TS 类型：`TNode<{ value: TagInputValue; collapsedSelectedItems: TagInputValue; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -disabled | Boolean | - | 是否禁用标签输入框 | N +disabled | Boolean | undefined | 是否禁用标签输入框 | N dragSort | Boolean | false | 拖拽调整标签顺序 | N excessTagsDisplayType | String | break-line | 标签超出时的呈现方式，有两种：横向滚动显示 和 换行显示。可选项：scroll/break-line | N inputProps | Object | - | 透传 Input 输入框组件全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag-input/type.ts) | N @@ -21,7 +22,7 @@ minCollapsedNum | Number | 0 | 最小折叠数量，用于标签数量过多的 placeholder | String | undefined | 占位符 | N prefixIcon | Slot / Function | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N readonly | Boolean | false | 只读状态，值为真会隐藏标签移除按钮和输入框 | N -size | String | medium | 尺寸。可选项：small/medium/large | N +size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N status | String | - | 输入框状态。可选项：default/success/warning/error | N suffix | String / Slot / Function | - | 后置图标前的后置内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N suffixIcon | Slot / Function | - | 组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N diff --git a/src/tag-input/tag-input.tsx b/src/tag-input/tag-input.tsx index 26bf06fdb..927213377 100644 --- a/src/tag-input/tag-input.tsx +++ b/src/tag-input/tag-input.tsx @@ -194,6 +194,7 @@ export default defineComponent({ return ( + +{len} ), diff --git a/src/time-picker/_usage/index.vue b/src/time-picker/_usage/index.vue index 0d6817be5..f43a2a60e 100644 --- a/src/time-picker/_usage/index.vue +++ b/src/time-picker/_usage/index.vue @@ -2,7 +2,10 @@ @@ -10,15 +13,24 @@ diff --git a/src/time-picker/_usage/props.json b/src/time-picker/_usage/props.json deleted file mode 100644 index e338fc2b8..000000000 --- a/src/time-picker/_usage/props.json +++ /dev/null @@ -1,45 +0,0 @@ -[ - { - "name": "allowInput", - "type": "Boolean", - "defaultValue": false, - "options": [] - }, - { - "name": "clearable", - "type": "Boolean", - "defaultValue": false, - "options": [] - }, - { - "name": "disabled", - "type": "Boolean", - "defaultValue": false, - "options": [] - }, - { - "name": "hideDisabledTime", - "type": "Boolean", - "defaultValue": true, - "options": [] - }, - { - "name": "size", - "type": "enum", - "defaultValue": "medium", - "options": [ - { - "label": "small", - "value": "small" - }, - { - "label": "medium", - "value": "medium" - }, - { - "label": "large", - "value": "large" - } - ] - } -] \ No newline at end of file diff --git a/src/time-picker/_usage/time-picker-props.json b/src/time-picker/_usage/time-picker-props.json new file mode 100644 index 000000000..89d8c056c --- /dev/null +++ b/src/time-picker/_usage/time-picker-props.json @@ -0,0 +1,82 @@ +[ + { + "name": "allowInput", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "borderless", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "clearable", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "disabled", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "enableTimePicker", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "mode", + "type": "enum", + "defaultValue": "date", + "options": [ + { + "label": "year", + "value": "year" + }, + { + "label": "quarter", + "value": "quarter" + }, + { + "label": "month", + "value": "month" + }, + { + "label": "week", + "value": "week" + }, + { + "label": "date", + "value": "date" + } + ] + }, + { + "name": "presetsPlacement", + "type": "enum", + "defaultValue": "bottom", + "options": [ + { + "label": "left", + "value": "left" + }, + { + "label": "top", + "value": "top" + }, + { + "label": "right", + "value": "right" + }, + { + "label": "bottom", + "value": "bottom" + } + ] + } +] \ No newline at end of file diff --git a/src/time-picker/_usage/time-range-picker-props.json b/src/time-picker/_usage/time-range-picker-props.json new file mode 100644 index 000000000..89d8c056c --- /dev/null +++ b/src/time-picker/_usage/time-range-picker-props.json @@ -0,0 +1,82 @@ +[ + { + "name": "allowInput", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "borderless", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "clearable", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "disabled", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "enableTimePicker", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, + { + "name": "mode", + "type": "enum", + "defaultValue": "date", + "options": [ + { + "label": "year", + "value": "year" + }, + { + "label": "quarter", + "value": "quarter" + }, + { + "label": "month", + "value": "month" + }, + { + "label": "week", + "value": "week" + }, + { + "label": "date", + "value": "date" + } + ] + }, + { + "name": "presetsPlacement", + "type": "enum", + "defaultValue": "bottom", + "options": [ + { + "label": "left", + "value": "left" + }, + { + "label": "top", + "value": "top" + }, + { + "label": "right", + "value": "right" + }, + { + "label": "bottom", + "value": "bottom" + } + ] + } +] \ No newline at end of file diff --git a/src/time-picker/props.ts b/src/time-picker/props.ts index 3c8e6cdf1..c3d459c8b 100644 --- a/src/time-picker/props.ts +++ b/src/time-picker/props.ts @@ -10,6 +10,8 @@ import { PropType } from 'vue'; export default { /** 是否允许直接输入时间 */ allowInput: Boolean, + /** 无边框模式 */ + borderless: Boolean, /** 是否允许清除选中值 */ clearable: Boolean, /** 禁用时间项的配置函数 */ @@ -17,7 +19,10 @@ export default { type: Function as PropType, }, /** 是否禁用组件 */ - disabled: Boolean, + disabled: { + type: Boolean, + default: undefined, + }, /** 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) */ format: { type: String, @@ -75,7 +80,7 @@ export default { /** 选中值 */ value: { type: String as PropType, - default: '', + default: undefined, }, /** 选中值，非受控属性 */ defaultValue: { diff --git a/src/time-picker/time-picker.en-US.md b/src/time-picker/time-picker.en-US.md index fff7569a2..3c9145352 100644 --- a/src/time-picker/time-picker.en-US.md +++ b/src/time-picker/time-picker.en-US.md @@ -1,14 +1,16 @@ :: BASE_DOC :: ## API + ### TimePicker Props name | type | default | description | required -- | -- | -- | -- | -- allowInput | Boolean | false | \- | N +borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N disableTime | Function | - | disable time config function。Typescript：`(h: number, m: number, s: number, ms: number) => Partial<{ hour: Array, minute: Array, second: Array, millisecond: Array }>` | N -disabled | Boolean | - | \- | N +disabled | Boolean | undefined | \- | N format | String | HH:mm:ss | \- | N hideDisabledTime | Boolean | true | \- | N inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N @@ -41,14 +43,16 @@ input | `(context: { value: TimePickerValue; e: InputEvent })` | \- open | `(context: { e: MouseEvent })` | \- pick | `(value: TimePickerValue, context: { e: MouseEvent })` | \- + ### TimeRangePicker Props name | type | default | description | required -- | -- | -- | -- | -- allowInput | Boolean | false | \- | N +borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N disableTime | Function | - | Typescript：`(h: number, m: number, s: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array, minute: Array, second: Array }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N -disabled | Boolean / Array | - | Typescript：`boolean \| Array` | N +disabled | Boolean / Array | undefined | Typescript：`boolean \| Array` | N format | String | HH:mm:ss | \- | N hideDisabledTime | Boolean | true | \- | N placeholder | String / Array | undefined | Typescript：`string \| Array` | N diff --git a/src/time-picker/time-picker.md b/src/time-picker/time-picker.md index 9749a3478..592d08ed2 100644 --- a/src/time-picker/time-picker.md +++ b/src/time-picker/time-picker.md @@ -1,14 +1,16 @@ :: BASE_DOC :: ## API + ### TimePicker Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- allowInput | Boolean | false | 是否允许直接输入时间 | N +borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否允许清除选中值 | N disableTime | Function | - | 禁用时间项的配置函数。TS 类型：`(h: number, m: number, s: number, ms: number) => Partial<{ hour: Array, minute: Array, second: Array, millisecond: Array }>` | N -disabled | Boolean | - | 是否禁用组件 | N +disabled | Boolean | undefined | 是否禁用组件 | N format | String | HH:mm:ss | 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) | N hideDisabledTime | Boolean | true | 是否隐藏禁用状态的时间项 | N inputProps | Object | - | 透传给输入框（Input）组件的参数。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N @@ -41,16 +43,19 @@ input | `(context: { value: TimePickerValue; e: InputEvent })` | 当输入框内 open | `(context: { e: MouseEvent })` | 面板打开时触发 pick | `(value: TimePickerValue, context: { e: MouseEvent })` | 面板选中值后触发 + ### TimeRangePicker Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- allowInput | Boolean | false | 是否允许直接输入时间 | N +borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否允许清除选中值 | N disableTime | Function | - | 禁用时间项。TS 类型：`(h: number, m: number, s: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array, minute: Array, second: Array }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N -disabled | Boolean / Array | - | 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用。TS 类型：`boolean \| Array` | N +disabled | Boolean / Array | undefined | 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用。TS 类型：`boolean \| Array` | N format | String | HH:mm:ss | 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) | N hideDisabledTime | Boolean | true | 是否隐藏禁用状态的时间项 | N +label | String / Slot / Function | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N placeholder | String / Array | undefined | 占位符，值为数组表示可分别为开始日期和结束日期设置占位符。TS 类型：`string \| Array` | 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 | - | 预设快捷时间范围选择，示例：{ '下午': ['13:00:00', '18:00:00'] }。TS 类型：`PresetTimeRange` `interface PresetTimeRange { [presetRageName: string]: TimeRangeValue \| (() => TimeRangeValue)}`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N diff --git a/src/time-picker/time-picker.tsx b/src/time-picker/time-picker.tsx index fb897990b..64274c43c 100755 --- a/src/time-picker/time-picker.tsx +++ b/src/time-picker/time-picker.tsx @@ -133,6 +133,7 @@ export default defineComponent({ onClear: this.handleClear, onBlur: this.handleInputBlur, onInputChange: this.handleInputChange, + borderless: this.borderless, disabled: this.isDisabled, clearable: this.clearable, allowInput: this.allowInput, diff --git a/src/time-picker/time-range-picker-props.ts b/src/time-picker/time-range-picker-props.ts index e7b030b04..7f17043f6 100644 --- a/src/time-picker/time-range-picker-props.ts +++ b/src/time-picker/time-range-picker-props.ts @@ -10,6 +10,8 @@ import { PropType } from 'vue'; export default { /** 是否允许直接输入时间 */ allowInput: Boolean, + /** 无边框模式 */ + borderless: Boolean, /** 是否允许清除选中值 */ clearable: Boolean, /** 禁用时间项 */ @@ -19,6 +21,7 @@ export default { /** 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用 */ disabled: { type: [Boolean, Array] as PropType, + default: undefined, }, /** 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) */ format: { @@ -77,6 +80,7 @@ export default { /** 选中值 */ value: { type: Array as PropType, + default: undefined, }, /** 选中值，非受控属性 */ defaultValue: { diff --git a/src/time-picker/time-range-picker.tsx b/src/time-picker/time-range-picker.tsx index b92a60fe5..4bca55b69 100644 --- a/src/time-picker/time-range-picker.tsx +++ b/src/time-picker/time-range-picker.tsx @@ -181,6 +181,7 @@ export default defineComponent({ tips: this.tips, rangeInputProps: { size: this.size, + borderless: this.borderless, clearable: this.clearable, class: this.inputClasses, // value: this.isShowPanel ? this.currentValue : this.innerValue ?? undefined, diff --git a/src/time-picker/type.ts b/src/time-picker/type.ts index 045c66479..0ff7ae6c3 100644 --- a/src/time-picker/type.ts +++ b/src/time-picker/type.ts @@ -16,6 +16,11 @@ export interface TdTimePickerProps { * @default false */ allowInput?: boolean; + /** + * 无边框模式 + * @default false + */ + borderless?: boolean; /** * 是否允许清除选中值 * @default false @@ -125,6 +130,11 @@ export interface TdTimeRangePickerProps { * @default false */ allowInput?: boolean; + /** + * 无边框模式 + * @default false + */ + borderless?: boolean; /** * 是否允许清除选中值 * @default false diff --git a/src/upload/themes/multiple-flow-list.tsx b/src/upload/themes/multiple-flow-list.tsx index 6a8ee7afa..99f6ab0c7 100644 --- a/src/upload/themes/multiple-flow-list.tsx +++ b/src/upload/themes/multiple-flow-list.tsx @@ -7,12 +7,12 @@ import { CheckCircleFilledIcon as TdCheckCircleFilledIcon, ErrorCircleFilledIcon as TdErrorCircleFilledIcon, TimeFilledIcon as TdTimeFilledIcon, - FileExcelIcon, - FilePdfIcon, - FileWordIcon, - FilePowerpointIcon, - FileIcon, - VideoIcon, + FileExcelIcon as TdFileExcelIcon, + FilePdfIcon as TdFilePdfIcon, + FileWordIcon as TdFileWordIcon, + FilePowerpointIcon as TdFilePowerpointIcon, + FileIcon as TdFileIcon, + VideoIcon as TdVideoIcon, } from 'tdesign-icons-vue'; import isFunction from 'lodash/isFunction'; import isObject from 'lodash/isObject'; @@ -81,6 +81,12 @@ export default defineComponent({ CheckCircleFilledIcon: TdCheckCircleFilledIcon, ErrorCircleFilledIcon: TdErrorCircleFilledIcon, TimeFilledIcon: TdTimeFilledIcon, + FileExcelIcon: TdFileExcelIcon, + FilePdfIcon: TdFilePdfIcon, + FileWordIcon: TdFileWordIcon, + FilePowerpointIcon: TdFilePowerpointIcon, + FileIcon: TdFileIcon, + VideoIcon: TdVideoIcon, }); const drag = useDrag(props.dragEvents, accept); @@ -375,6 +381,10 @@ export default defineComponent({ ); }, getFileThumbnailIcon(fileType: string) { + const { + FilePdfIcon, FileExcelIcon, FileWordIcon, FilePowerpointIcon, VideoIcon, FileIcon, + } = this.icons; + if (FILE_PDF_REGEXP.test(fileType)) { return ; } diff --git a/src/upload/upload.tsx b/src/upload/upload.tsx index e9013b5f4..34438cb10 100644 --- a/src/upload/upload.tsx +++ b/src/upload/upload.tsx @@ -1,7 +1,7 @@ import { computed, defineComponent, Ref, SetupContext, toRef, } from 'vue'; -import { UploadIcon } from 'tdesign-icons-vue'; +import { UploadIcon as TdUploadIcon } from 'tdesign-icons-vue'; import useFormDisabled from '../hooks/useFormDisabled'; import props from './props'; import NormalFile from './themes/normal-file'; @@ -18,6 +18,8 @@ import { getFileList } from '../_common/js/upload/utils'; import { formatToUploadFile } from '../_common/js/upload/main'; import { UploadFile } from './type'; +import useGlobalIcon from '../hooks/useGlobalIcon'; + export default defineComponent({ name: 'TUpload', @@ -45,6 +47,9 @@ export default defineComponent({ } = uploadData; const tDisabled = computed(() => formDisabled.value || innerDisabled.value); + const icons = useGlobalIcon({ + UploadIcon: TdUploadIcon, + }); const commonDisplayFileProps = computed(() => ({ accept: props.accept, @@ -115,11 +120,13 @@ export default defineComponent({ triggerButtonProps, sizeOverLimitMessage, tDisabled, + icons, }; }, methods: { renderTrigger() { + const { UploadIcon } = this.icons; const getDefaultTrigger = () => { if (this.theme === 'file-input') { return ( diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap index d2d2045f8..250ae09ba 100644 --- a/test/snap/__snapshots__/csr.test.js.snap +++ b/test/snap/__snapshots__/csr.test.js.snap @@ -16518,7 +16518,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/value.vue 1`] = ` class="t-form t-form-inline" >
csr test ./src/calendar/_example/value.vue 1`] = `
csr test ./src/form/_example/base.vue 1`] = `
@@ -51704,7 +51704,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/clear-validate.vue 1`]
@@ -51947,7 +51947,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/custom-validator.vue 1
csr test ./src/form/_example/disabled.vue 1`] = `
csr test ./src/form/_example/error-message.vue 1`]
@@ -53754,7 +53754,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/login.vue 1`] = `
csr test ./src/form/_example/reset.vue 1`] = `
csr test ./src/form/_example/size.vue 1`] = `
csr test ./src/form/_example/validate-complicated-d class="t-space-item" >
csr test ./src/form/_example/validate-complicated-d class="t-space-item" >
csr test ./src/form/_example/validate-complicated-d class="t-space-item" >
csr test ./src/form/_example/validate-complicated-d class="t-space-item" >
csr test ./src/form/_example/validate-complicated-d class="t-space-item" >
csr test ./src/form/_example/validate-complicated-d class="t-space-item" >
csr test ./src/form/_example/validate-complicated-d class="t-space-item" >
csr test ./src/form/_example/validate-complicated-d class="t-space-item" >
csr test ./src/form/_example/validate-message.vue 1
csr test ./src/form/_example/validator.vue 1`] = `
@@ -56782,7 +56782,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/validator-status.vue 1
csr test ./src/input-number/_example/status.vue 1`]
csr test ./src/input-number/_example/status.vue 1`] data-v-77658c68="" />
csr test ./src/input-number/_example/status.vue 1`] data-v-77658c68="" />
csr test ./src/input-number/_example/status.vue 1`] data-v-77658c68="" />
csr test ./src/timeline/_example/loading.vue 1`] = class="t-form" >
renders ./src/calendar/_example/range.vue correctly exports[`ssr snapshot test > renders ./src/calendar/_example/slot-props-api.vue correctly 1`] = `"
2021-12 工作安排
2021 年
12 月
隐藏周末
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
错误事件
警告事件
正常事件
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
一二三四五六日
"`; -exports[`ssr snapshot test > renders ./src/calendar/_example/value.vue correctly 1`] = `"

单个高亮日期

1998 年
11 月
隐藏周末
26
27
28
29
30
31
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
01
02
03
04
05
06
一二三四五六日

多个高亮日期

1998 年
11 月
隐藏周末
26
27
28
29
30
31
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
01
02
03
04
05
06
一二三四五六日
"`; +exports[`ssr snapshot test > renders ./src/calendar/_example/value.vue correctly 1`] = `"

单个高亮日期

1998 年
11 月
隐藏周末
26
27
28
29
30
31
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
01
02
03
04
05
06
一二三四五六日

多个高亮日期

1998 年
11 月
隐藏周末
26
27
28
29
30
31
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
01
02
03
04
05
06
一二三四五六日
"`; exports[`ssr snapshot test > renders ./src/calendar/_example/week.vue correctly 1`] = `"

使用插槽

2021 年
12 月
隐藏周末
29
30
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
01
02
星期1 星期2 星期3 星期4 星期5 星期6 星期天

使用week属性 - Array

2021 年
12 月
隐藏周末
28
29
30
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
01
星期1星期2星期3星期4星期5星期6星期天

使用week属性 - TNode

2021 年
12 月
隐藏周末
29
30
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
01
02
星期1星期2周三啦星期4星期5放假啦放假啦
"`; @@ -418,31 +418,31 @@ exports[`ssr snapshot test > renders ./src/dropdown/_example/theme.vue correctly exports[`ssr snapshot test > renders ./src/form/_example/align.vue correctly 1`] = `"
"`; -exports[`ssr snapshot test > renders ./src/form/_example/base.vue correctly 1`] = `"
这里可以展示一段说明文字
请用一句话介绍自己
"`; +exports[`ssr snapshot test > renders ./src/form/_example/base.vue correctly 1`] = `"
这里可以展示一段说明文字
请用一句话介绍自己
"`; -exports[`ssr snapshot test > renders ./src/form/_example/clear-validate.vue correctly 1`] = `"
这里可以展示一段说明文字
请用一句话介绍自己
"`; +exports[`ssr snapshot test > renders ./src/form/_example/clear-validate.vue correctly 1`] = `"
这里可以展示一段说明文字
请用一句话介绍自己
"`; -exports[`ssr snapshot test > renders ./src/form/_example/custom-validator.vue correctly 1`] = `"
同一个校验方法可输出不同的错误信息和类型，依次输入：1234 观察变化
自定义异步校验方法
"`; +exports[`ssr snapshot test > renders ./src/form/_example/custom-validator.vue correctly 1`] = `"
同一个校验方法可输出不同的错误信息和类型，依次输入：1234 观察变化
自定义异步校验方法
"`; -exports[`ssr snapshot test > renders ./src/form/_example/disabled.vue correctly 1`] = `"
接受
  • \\"\\"
    图片加载中
请选择单张图片文件上传
"`; +exports[`ssr snapshot test > renders ./src/form/_example/disabled.vue correctly 1`] = `"
接受
  • \\"\\"
    图片加载中
请选择单张图片文件上传
"`; -exports[`ssr snapshot test > renders ./src/form/_example/error-message.vue correctly 1`] = `"
这里可以展示一段说明文字
一句话介绍自己
"`; +exports[`ssr snapshot test > renders ./src/form/_example/error-message.vue correctly 1`] = `"
这里可以展示一段说明文字
一句话介绍自己
"`; exports[`ssr snapshot test > renders ./src/form/_example/layout.vue correctly 1`] = `"
"`; -exports[`ssr snapshot test > renders ./src/form/_example/login.vue correctly 1`] = `"
"`; +exports[`ssr snapshot test > renders ./src/form/_example/login.vue correctly 1`] = `"
"`; -exports[`ssr snapshot test > renders ./src/form/_example/reset.vue correctly 1`] = `"
"`; +exports[`ssr snapshot test > renders ./src/form/_example/reset.vue correctly 1`] = `"
"`; -exports[`ssr snapshot test > renders ./src/form/_example/size.vue correctly 1`] = `"
"`; +exports[`ssr snapshot test > renders ./src/form/_example/size.vue correctly 1`] = `"
"`; -exports[`ssr snapshot test > renders ./src/form/_example/validate-complicated-data.vue correctly 1`] = `"
"`; +exports[`ssr snapshot test > renders ./src/form/_example/validate-complicated-data.vue correctly 1`] = `"
"`; -exports[`ssr snapshot test > renders ./src/form/_example/validate-message.vue correctly 1`] = `"
这里可以展示一段说明文字
请用一句话介绍自己
"`; +exports[`ssr snapshot test > renders ./src/form/_example/validate-message.vue correctly 1`] = `"
这里可以展示一段说明文字
请用一句话介绍自己
"`; -exports[`ssr snapshot test > renders ./src/form/_example/validator.vue correctly 1`] = `"
这里可以展示一段说明文字
请用一句话介绍自己
"`; +exports[`ssr snapshot test > renders ./src/form/_example/validator.vue correctly 1`] = `"
这里可以展示一段说明文字
请用一句话介绍自己
"`; -exports[`ssr snapshot test > renders ./src/form/_example/validator-status.vue correctly 1`] = `"
"`; +exports[`ssr snapshot test > renders ./src/form/_example/validator-status.vue correctly 1`] = `"
"`; exports[`ssr snapshot test > renders ./src/grid/_example/base.vue correctly 1`] = `"
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
12
"`; @@ -580,7 +580,7 @@ exports[`ssr snapshot test > renders ./src/input-number/_example/normal.vue corr exports[`ssr snapshot test > renders ./src/input-number/_example/size.vue correctly 1`] = `"
"`; -exports[`ssr snapshot test > renders ./src/input-number/_example/status.vue correctly 1`] = `"
这是普通文本提示

校验通过文本提示

校验不通过文本提示

校验存在严重问题文本提示

"`; +exports[`ssr snapshot test > renders ./src/input-number/_example/status.vue correctly 1`] = `"
这是普通文本提示

校验通过文本提示

校验不通过文本提示

校验存在严重问题文本提示

"`; exports[`ssr snapshot test > renders ./src/input-number/_example/step.vue correctly 1`] = `"
"`; @@ -1179,7 +1179,7 @@ exports[`ssr snapshot test > renders ./src/timeline/_example/customDot.vue corre exports[`ssr snapshot test > renders ./src/timeline/_example/layout.vue correctly 1`] = `"

时间轴方向

对齐方式

label对齐方式

  • 事件一
    2022-01-01
  • 事件二
    2022-02-01
  • 事件三
    2022-03-01
  • 事件四
    2022-04-01
"`; -exports[`ssr snapshot test > renders ./src/timeline/_example/loading.vue correctly 1`] = `"
  • 事件一
    2022-01-01
  • 事件二
    2022-02-01
  • 事件三
    2022-03-01
  • 事件四
    2022-04-01
"`; +exports[`ssr snapshot test > renders ./src/timeline/_example/loading.vue correctly 1`] = `"
  • 事件一
    2022-01-01
  • 事件二
    2022-02-01
  • 事件三
    2022-03-01
  • 事件四
    2022-04-01
"`; exports[`ssr snapshot test > renders ./src/timeline/_example/reverse.vue correctly 1`] = `"
  • 事件一
    2022-01-01
  • 事件二
    2022-02-01
  • 事件三
    2022-03-01
  • 事件四
    2022-04-01
"`;