From 51cdc7a8e40fa992a99098817535e98adef0467e Mon Sep 17 00:00:00 2001 From: jiechaowu Date: Tue, 8 Mar 2022 10:09:45 +0800 Subject: [PATCH 1/7] =?UTF-8?q?feat(input-number):=20=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E7=8A=B6=E6=80=81=E8=AE=BE=E7=BD=AE=E5=92=8C=E6=8F=90=E7=A4=BA?= =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/_common | 2 +- src/input-number/input-number.tsx | 11 ++++++++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/_common b/src/_common index d8add5ebe..3b7a8dded 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit d8add5ebe8ad63d21e24e5b39cd5195641e3bb34 +Subproject commit 3b7a8dded87c87bccf2362d3dd1b8ac757e47000 diff --git a/src/input-number/input-number.tsx b/src/input-number/input-number.tsx index 6c0092ced..e440d9664 100644 --- a/src/input-number/input-number.tsx +++ b/src/input-number/input-number.tsx @@ -9,8 +9,10 @@ import CLASSNAMES from '../utils/classnames'; import props from './props'; import { ChangeSource, TdInputNumberProps } from './type'; import { ClassName, TNodeReturnValue } from '../common'; +import { renderTNodeJSX } from '../utils/render-tnode'; const name = `${prefix}-input-number`; +const INPUT_NUMBER_TIPS_CLASS = `${prefix}-input-number__tips`; type InputNumberEvent = { on: { @@ -29,10 +31,11 @@ type ChangeContextEvent = InputEvent | MouseEvent | FocusEvent; type InputNumberAttr = { attrs: { disabled?: boolean; - readonly?: any; + readonly?: boolean; autocomplete?: string; ref: string; placeholder: string; + unselectable?: string; }; }; @@ -140,6 +143,7 @@ export default Vue.extend({ `${prefix}-input`, { [`${prefix}-is-error`]: this.isError, + [`${prefix}-is-${this.status}`]: this.status, [`${prefix}-align-${this.align}`]: this.align, }, ], @@ -151,6 +155,7 @@ export default Vue.extend({ `${prefix}-input__inner`, { [CLASSNAMES.STATUS.disabled]: this.tDisabled, + [`${prefix}-is-readonly`]: this.readonly, [`${name}-text-align`]: this.theme === 'row', }, ], @@ -172,9 +177,11 @@ export default Vue.extend({ return { attrs: { disabled: this.tDisabled, + readonly: this.readonly, autocomplete: 'off', ref: 'refInputElem', placeholder: this.placeholder, + unselectable: this.readonly ? 'on' : 'off', }, }; }, @@ -367,6 +374,7 @@ export default Vue.extend({ }, }, render(): VNode { + const tips = renderTNodeJSX(this, 'tips'); return (
{this.theme !== 'normal' && ( @@ -390,6 +398,7 @@ export default Vue.extend({ icon={this.increaseIcon} /> )} +
{tips}
); }, From 6a6ae84fcbe0f00b1c4d1b31482a85013c12bf02 Mon Sep 17 00:00:00 2001 From: jiechaowu Date: Tue, 8 Mar 2022 10:36:35 +0800 Subject: [PATCH 2/7] docs(input-number): add docs, api for input-number --- examples/input-number/input-number.md | 2 ++ src/_common | 2 +- src/input-number/props.ts | 8 ++++++++ src/input-number/type.ts | 10 ++++++++++ 4 files changed, 21 insertions(+), 1 deletion(-) diff --git a/examples/input-number/input-number.md b/examples/input-number/input-number.md index b18188858..02f4511a1 100644 --- a/examples/input-number/input-number.md +++ b/examples/input-number/input-number.md @@ -6,12 +6,14 @@ 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- align | String | - | 文本内容位置，居左/居中/居右。可选项：left/center/right | N +autoWidth | Boolean | false | 【开发中】宽度随内容自适应 | N decimalPlaces | Number | undefined | [小数位数](https://en.wiktionary.org/wiki/decimal_place) | N disabled | Boolean | false | 禁用组件 | N format | Function | - | 指定输入框展示值的格式。TS 类型：`(value: number) => number | string` | N max | Number | Infinity | 最大值 | N min | Number | -Infinity | 最小值 | N placeholder | String | undefined | 占位符 | N +readonly | Boolean | false | 只读状态 | N size | String | medium | 组件尺寸。可选项：small/medium/large | N status | String | - | 文本框状态。可选项：success/warning/error | N step | Number | 1 | 数值改变步数，可以是小数 | N diff --git a/src/_common b/src/_common index 3b7a8dded..5069dd2b2 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 3b7a8dded87c87bccf2362d3dd1b8ac757e47000 +Subproject commit 5069dd2b21caa549c926366c67cc044737165d21 diff --git a/src/input-number/props.ts b/src/input-number/props.ts index 5185c72af..4f52e8f27 100644 --- a/src/input-number/props.ts +++ b/src/input-number/props.ts @@ -12,9 +12,12 @@ export default { align: { type: String as PropType, validator(val: TdInputNumberProps['align']): boolean { + if (!val) return true; return ['left', 'center', 'right'].includes(val); }, }, + /** 【开发中】宽度随内容自适应 */ + autoWidth: Boolean, /** [小数位数](https://en.wiktionary.org/wiki/decimal_place) */ decimalPlaces: { type: Number, @@ -41,11 +44,14 @@ export default { type: String, default: undefined, }, + /** 只读状态 */ + readonly: Boolean, /** 组件尺寸 */ size: { type: String as PropType, default: 'medium' as TdInputNumberProps['size'], validator(val: TdInputNumberProps['size']): boolean { + if (!val) return true; return ['small', 'medium', 'large'].includes(val); }, }, @@ -53,6 +59,7 @@ export default { status: { type: String as PropType, validator(val: TdInputNumberProps['status']): boolean { + if (!val) return true; return ['success', 'warning', 'error'].includes(val); }, }, @@ -66,6 +73,7 @@ export default { type: String as PropType, default: 'row' as TdInputNumberProps['theme'], validator(val: TdInputNumberProps['theme']): boolean { + if (!val) return true; return ['column', 'row', 'normal'].includes(val); }, }, diff --git a/src/input-number/type.ts b/src/input-number/type.ts index a1908a44f..0265281b2 100644 --- a/src/input-number/type.ts +++ b/src/input-number/type.ts @@ -11,6 +11,11 @@ export interface TdInputNumberProps { * 文本内容位置，居左/居中/居右 */ align?: 'left' | 'center' | 'right'; + /** + * 【开发中】宽度随内容自适应 + * @default false + */ + autoWidth?: boolean; /** * [小数位数](https://en.wiktionary.org/wiki/decimal_place) */ @@ -38,6 +43,11 @@ export interface TdInputNumberProps { * 占位符 */ placeholder?: string; + /** + * 只读状态 + * @default false + */ + readonly?: boolean; /** * 组件尺寸 * @default medium From ee672e918c9c37db149c9727db0b6916b9cdce0a Mon Sep 17 00:00:00 2001 From: jiechaowu Date: Tue, 8 Mar 2022 10:37:47 +0800 Subject: [PATCH 3/7] =?UTF-8?q?feat(input-number):=20=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E7=8A=B6=E6=80=81demo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/input-number/demos/status.vue | 65 ++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 examples/input-number/demos/status.vue diff --git a/examples/input-number/demos/status.vue b/examples/input-number/demos/status.vue new file mode 100644 index 000000000..30116bd8d --- /dev/null +++ b/examples/input-number/demos/status.vue @@ -0,0 +1,65 @@ + + + + From 0fc2e02dad855a5347ea5b971285cd6a2c8cfe4f Mon Sep 17 00:00:00 2001 From: jiechaowu Date: Tue, 8 Mar 2022 11:41:27 +0800 Subject: [PATCH 4/7] test(input-number): add ssr test --- test/ssr/__snapshots__/ssr.test.js.snap | 244 +++++++++++++++++++++--- 1 file changed, 215 insertions(+), 29 deletions(-) diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap index 855c628f0..feae19557 100644 --- a/test/ssr/__snapshots__/ssr.test.js.snap +++ b/test/ssr/__snapshots__/ssr.test.js.snap @@ -3015,7 +3015,8 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/pagination.v
jump to
-
+
+
@@ -3979,7 +3980,8 @@ exports[`ssr snapshot test renders ./examples/form/demos/disabled.vue correctly
-
+
+
@@ -5298,34 +5300,40 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/align.vue corre
-
+
-
+
-
+
-
+
+
-
+
+
-
+
+
@@ -5336,9 +5344,10 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/center.vue corr
-
+
`; @@ -5348,9 +5357,10 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/default.vue cor
-
+
`; @@ -5360,9 +5370,10 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/disabled.vue co
-
+
`; @@ -5372,9 +5383,10 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/empty.vue corre
-
+
`; @@ -5384,9 +5396,10 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/format.vue corr
-
+
`; @@ -5396,9 +5409,10 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/left.vue correc
-
+
`; @@ -5406,7 +5420,8 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/left.vue correc exports[`ssr snapshot test renders ./examples/input-number/demos/normal.vue correctly 1`] = `
-
+
+
`; @@ -5416,35 +5431,196 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/size.vue correc
-
+
-
+
-
+
`; +exports[`ssr snapshot test renders ./examples/input-number/demos/status.vue correctly 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
这是普通文本提示
+
+
+
+
+
+
+
+
+
+
+
校验通过文本提示
+
+
+
+
+
+
+
+
+
+
+
校验不通过文本提示
+
+
+
+
+
+
+
+
+
+
+
校验存在严重问题文本提示
+
+
+
+
+
+
+`; + exports[`ssr snapshot test renders ./examples/input-number/demos/step.vue correctly 1`] = `
-
+
`; @@ -7654,7 +7830,8 @@ exports[`ssr snapshot test renders ./examples/pagination/demos/customizable.vue
跳至
-
+
+
页
@@ -7687,7 +7864,8 @@ exports[`ssr snapshot test renders ./examples/pagination/demos/disabled.vue corr
跳至
-
+
+
页
@@ -7743,7 +7921,8 @@ exports[`ssr snapshot test renders ./examples/pagination/demos/jump.vue correctl
跳至
-
+
+
页
@@ -9509,9 +9688,10 @@ exports[`ssr snapshot test renders ./examples/slider/demos/input-number.vue corr
-
+
@@ -9533,17 +9713,19 @@ exports[`ssr snapshot test renders ./examples/slider/demos/input-number.vue corr
-
+
-
+
@@ -9568,9 +9750,10 @@ exports[`ssr snapshot test renders ./examples/slider/demos/input-number-vertical
-
+
@@ -9592,17 +9775,19 @@ exports[`ssr snapshot test renders ./examples/slider/demos/input-number-vertical
-
+
-
+
@@ -12435,7 +12620,8 @@ exports[`ssr snapshot test renders ./examples/table/demos/pagination.vue correct
跳至
-
+
+
页
From dfe3e2196c17db606cb0f6f7730fe036e52e45ec Mon Sep 17 00:00:00 2001 From: jiechaowu Date: Tue, 8 Mar 2022 11:49:16 +0800 Subject: [PATCH 5/7] test(input-number): update unit test --- .../__snapshots__/demo.test.js.snap | 40 ++++++++++++++++ .../__snapshots__/index.test.js.snap | 48 ++++++++++++------- 2 files changed, 72 insertions(+), 16 deletions(-) diff --git a/test/unit/input-number/__snapshots__/demo.test.js.snap b/test/unit/input-number/__snapshots__/demo.test.js.snap index b59f6852e..80491c704 100644 --- a/test/unit/input-number/__snapshots__/demo.test.js.snap +++ b/test/unit/input-number/__snapshots__/demo.test.js.snap @@ -30,6 +30,7 @@ exports[`InputNumber center demo works fine 1`] = ` autocomplete="off" class="t-input__inner t-input-number-text-align" ref="refInputElem" + unselectable="off" /> +
`; @@ -84,6 +88,7 @@ exports[`InputNumber defaultDemo demo works fine 1`] = ` autocomplete="off" class="t-input__inner t-input-number-text-align" ref="refInputElem" + unselectable="off" /> +
`; @@ -139,6 +147,7 @@ exports[`InputNumber disabled demo works fine 1`] = ` class="t-input__inner t-is-disabled t-input-number-text-align" disabled="disabled" ref="refInputElem" + unselectable="off" /> +
`; @@ -193,6 +205,7 @@ exports[`InputNumber format demo works fine 1`] = ` autocomplete="off" class="t-input__inner t-input-number-text-align" ref="refInputElem" + unselectable="off" /> +
`; @@ -247,6 +263,7 @@ exports[`InputNumber left demo works fine 1`] = ` autocomplete="off" class="t-input__inner" ref="refInputElem" + unselectable="off" /> +
`; @@ -301,6 +321,7 @@ exports[`InputNumber size demo works fine 1`] = ` autocomplete="off" class="t-input__inner t-input-number-text-align" ref="refInputElem" + unselectable="off" /> +
+
+
`; @@ -456,6 +488,7 @@ exports[`InputNumber step demo works fine 1`] = ` autocomplete="off" class="t-input__inner t-input-number-text-align" ref="refInputElem" + unselectable="off" /> +
`; @@ -511,6 +547,7 @@ exports[`InputNumber undefined demo works fine 1`] = ` class="t-input__inner t-input-number-text-align" placeholder="输入" ref="refInputElem" + unselectable="off" /> +
`; diff --git a/test/unit/input-number/__snapshots__/index.test.js.snap b/test/unit/input-number/__snapshots__/index.test.js.snap index 8c045e236..3bd08ea46 100644 --- a/test/unit/input-number/__snapshots__/index.test.js.snap +++ b/test/unit/input-number/__snapshots__/index.test.js.snap @@ -4,9 +4,10 @@ exports[`InputNumber :props :defaultValue, default value 6 1`] = `
-
+
`; @@ -14,9 +15,10 @@ exports[`InputNumber :props :disabled, function can not be call 1`] = `
-
+
`; @@ -24,9 +26,10 @@ exports[`InputNumber :props :format, with 6% 1`] = `
-
+
`; @@ -34,9 +37,10 @@ exports[`InputNumber :props :max, value 6 < max 10 1`] = `
-
+
`; @@ -44,9 +48,10 @@ exports[`InputNumber :props :max, value 16 > max 10 1`] = `
-
+
`; @@ -54,9 +59,10 @@ exports[`InputNumber :props :min, value -1 < min 1 1`] = `
-
+
`; @@ -64,9 +70,10 @@ exports[`InputNumber :props :min, value 6 > min 1 1`] = `
-
+
`; @@ -74,9 +81,10 @@ exports[`InputNumber :props :mode, without class t-is-controls-right 1`] = `
-
+
`; @@ -84,9 +92,10 @@ exports[`InputNumber :props :mode:column, with class t-is-controls-right 1`] = `
-
+
`; @@ -94,9 +103,10 @@ exports[`InputNumber :props :mode:row, without class t-is-controls-right 1`] = `
-
+
`; @@ -104,9 +114,10 @@ exports[`InputNumber :props :size:large, with class t-size-l 1`] = `
-
+
`; @@ -114,9 +125,10 @@ exports[`InputNumber :props :size:medium, with class t-size-m 1`] = `
-
+
`; @@ -124,9 +136,10 @@ exports[`InputNumber :props :size:small, with class t-size-s 1`] = `
-
+
`; @@ -134,9 +147,10 @@ exports[`InputNumber :props :step, 2 1`] = `
-
+
`; @@ -144,9 +158,10 @@ exports[`InputNumber :props :value, 6 1`] = `
-
+
`; @@ -154,8 +169,9 @@ exports[`InputNumber :props class, with class t-input-number 1`] = `
-
+
`; From 07d363b4d1e7d925a445e41e1ab18e5e4dbc95d4 Mon Sep 17 00:00:00 2001 From: jiechaowu Date: Tue, 8 Mar 2022 11:59:22 +0800 Subject: [PATCH 6/7] test(input-number): add unit test for deps --- test/unit/pagination/__snapshots__/demo.test.js.snap | 11 ++++++++++- test/unit/slider/__snapshots__/index.test.js.snap | 3 ++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/test/unit/pagination/__snapshots__/demo.test.js.snap b/test/unit/pagination/__snapshots__/demo.test.js.snap index 4fbfd2889..1ceb43489 100644 --- a/test/unit/pagination/__snapshots__/demo.test.js.snap +++ b/test/unit/pagination/__snapshots__/demo.test.js.snap @@ -259,7 +259,8 @@ exports[`Pagination customizable demo works fine 1`] = `
跳至
-
+
+
页
@@ -411,8 +412,12 @@ exports[`Pagination disabled demo works fine 1`] = ` autocomplete="off" class="t-input__inner" ref="refInputElem" + unselectable="off" /> +
页 @@ -658,8 +663,12 @@ exports[`Pagination jump demo works fine 1`] = ` autocomplete="off" class="t-input__inner" ref="refInputElem" + unselectable="off" /> +
页 diff --git a/test/unit/slider/__snapshots__/index.test.js.snap b/test/unit/slider/__snapshots__/index.test.js.snap index bd2727a58..4ec2e4bed 100644 --- a/test/unit/slider/__snapshots__/index.test.js.snap +++ b/test/unit/slider/__snapshots__/index.test.js.snap @@ -41,9 +41,10 @@ exports[`Slider [marks] render right 1`] = `
-
+
From bc3551f8db26ee45ce54a5e010be1870d619124f Mon Sep 17 00:00:00 2001 From: jiechaowu Date: Thu, 10 Mar 2022 22:04:44 +0800 Subject: [PATCH 7/7] refactor(input-number): eslint --- src/cascader/utils/item.ts | 7 +-- src/form/form-item.tsx | 12 +++--- src/input-number/input-number.tsx | 11 ++--- src/select/select.tsx | 67 ++++++++++++++--------------- src/tree-select/tree-select.tsx | 71 +++++++++++++++---------------- 5 files changed, 82 insertions(+), 86 deletions(-) diff --git a/src/cascader/utils/item.ts b/src/cascader/utils/item.ts index e688dc414..89cd696aa 100644 --- a/src/cascader/utils/item.ts +++ b/src/cascader/utils/item.ts @@ -16,9 +16,10 @@ export function getLabelIsEllipsis(node: TreeNode, size: CascaderContextType['si } export function getNodeStatusClass(node: TreeNode, CLASSNAMES: any, cascaderContext: CascaderContextType) { - const { checkStrictly, multiple, value, max } = cascaderContext; - const expandedActive = - (!checkStrictly && node.expanded && (multiple ? !node.isLeaf() : true)) || (checkStrictly && node.expanded); + const { + checkStrictly, multiple, value, max, + } = cascaderContext; + const expandedActive = (!checkStrictly && node.expanded && (multiple ? !node.isLeaf() : true)) || (checkStrictly && node.expanded); const isLeaf = node.isLeaf(); diff --git a/src/form/form-item.tsx b/src/form/form-item.tsx index 3ef8d1c12..a4672da18 100644 --- a/src/form/form-item.tsx +++ b/src/form/form-item.tsx @@ -217,8 +217,7 @@ export default mixins(getConfigReceiverMixins('f async validate(trigger: ValidateTriggerType): Promise> { this.resetValidating = true; // 过滤不需要校验的规则 - const rules = - trigger === 'all' ? this.innerRules : this.innerRules.filter((item) => (item.trigger || 'change') === trigger); + const rules = trigger === 'all' ? this.innerRules : this.innerRules.filter((item) => (item.trigger || 'change') === trigger); // 校验结果，包含正确的校验信息 const r = await validate(this.value, rules); const errorList = r @@ -311,11 +310,10 @@ export default mixins(getConfigReceiverMixins('f } if (list && list[0]) { const type = list[0].type || 'error'; - const icon = - { - error: CloseCircleFilledIcon, - warning: ErrorCircleFilledIcon, - }[type] || CheckCircleFilledIcon; + const icon = { + error: CloseCircleFilledIcon, + warning: ErrorCircleFilledIcon, + }[type] || CheckCircleFilledIcon; return resultIcon(icon); } return null; diff --git a/src/input-number/input-number.tsx b/src/input-number/input-number.tsx index 849e9c900..5e2eecd42 100644 --- a/src/input-number/input-number.tsx +++ b/src/input-number/input-number.tsx @@ -1,5 +1,7 @@ import Vue, { VNode } from 'vue'; -import { AddIcon, RemoveIcon, ChevronDownIcon, ChevronUpIcon } from 'tdesign-icons-vue'; +import { + AddIcon, RemoveIcon, ChevronDownIcon, ChevronUpIcon, +} from 'tdesign-icons-vue'; import { emitEvent } from '../utils/event'; import { prefix } from '../config'; import TButton from '../button'; @@ -68,10 +70,9 @@ export default Vue.extend({ return this.tDisabled || this.isError || Number(this.value) + this.step > this.max; }, valueDecimalPlaces(): number { - const tempVal = - this.filterValue !== null && !isNaN(Number(this.filterValue)) && !isNaN(parseFloat(this.filterValue)) - ? this.filterValue - : String(this.value); + const tempVal = this.filterValue !== null && !isNaN(Number(this.filterValue)) && !isNaN(parseFloat(this.filterValue)) + ? this.filterValue + : String(this.value); const tempIndex = tempVal.indexOf('.') + 1; return tempIndex > 0 ? tempVal.length - tempIndex : 0; }, diff --git a/src/select/select.tsx b/src/select/select.tsx index 66b61ea96..c28095d85 100644 --- a/src/select/select.tsx +++ b/src/select/select.tsx @@ -16,7 +16,9 @@ import Tag from '../tag/index'; import FakeArrow from '../common-components/fake-arrow'; import Option from './option'; import props from './props'; -import { SelectOption, TdOptionProps, SelectValue, TdSelectProps, SelectOptionGroup } from './type'; +import { + SelectOption, TdOptionProps, SelectValue, TdSelectProps, SelectOptionGroup, +} from './type'; import { ClassName } from '../common'; import { emitEvent } from '../utils/event'; @@ -117,12 +119,12 @@ export default mixins(getConfigReceiverMixins('select')).exte }, showPlaceholder(): boolean { if ( - !this.showFilter && - ((!this.multiple && !this.selectedSingle) || - (!this.multiple && typeof this.value === 'object' && !this.selectedSingle) || - (this.multiple && !this.selectedMultiple.length) || - this.value === null || - this.value === undefined) + !this.showFilter + && ((!this.multiple && !this.selectedSingle) + || (!this.multiple && typeof this.value === 'object' && !this.selectedSingle) + || (this.multiple && !this.selectedMultiple.length) + || this.value === null + || this.value === undefined) ) { return true; } @@ -144,21 +146,21 @@ export default mixins(getConfigReceiverMixins('select')).exte }, showClose(): boolean { return Boolean( - this.clearable && - this.isHover && - !this.tDisabled && - ((!this.multiple && (this.value || this.value === 0)) || - (this.multiple && Array.isArray(this.value) && this.value.length)), + this.clearable + && this.isHover + && !this.tDisabled + && ((!this.multiple && (this.value || this.value === 0)) + || (this.multiple && Array.isArray(this.value) && this.value.length)), ); }, showRightArrow(): boolean { if (!this.showArrow) return false; return ( - !this.clearable || - !this.isHover || - this.tDisabled || - (!this.multiple && !this.value && this.value !== 0) || - (this.multiple && (!Array.isArray(this.value) || (Array.isArray(this.value) && !this.value.length))) + !this.clearable + || !this.isHover + || this.tDisabled + || (!this.multiple && !this.value && this.value !== 0) + || (this.multiple && (!Array.isArray(this.value) || (Array.isArray(this.value) && !this.value.length))) ); }, canFilter(): boolean { @@ -222,8 +224,7 @@ export default mixins(getConfigReceiverMixins('select')).exte if (this.filterable) { // 仅有filterable属性时，默认不区分大小写过滤label return this.realOptions.filter( - (option) => - option[this.realLabel].toString().toLowerCase().indexOf(this.searchInput.toString().toLowerCase()) !== -1, + (option) => option[this.realLabel].toString().toLowerCase().indexOf(this.searchInput.toString().toLowerCase()) !== -1, ); } return []; @@ -401,8 +402,7 @@ export default mixins(getConfigReceiverMixins('select')).exte }, getOptions(option: OptionInstance) { // create option值不push到options里 - if (option.$el && option.$el.className && option.$el.className.indexOf(`${name}__create-option--special`) !== -1) - return; + if (option.$el && option.$el.className && option.$el.className.indexOf(`${name}__create-option--special`) !== -1) return; const tmp = this.realOptions.filter( (item) => get(item, this.realValue) === option.value && get(item, this.realLabel) === option.label, ); @@ -499,8 +499,8 @@ export default mixins(getConfigReceiverMixins('select')).exte if (this.showCreateOption && this.hoverIndex === 0) { this.createOption(this.searchInput); } - this.hoverOptions[this.hoverIndex] && - this.onOptionClick(this.hoverOptions[this.hoverIndex][this.realValue], e); + this.hoverOptions[this.hoverIndex] + && this.onOptionClick(this.hoverOptions[this.hoverIndex][this.realValue], e); break; case 'Escape': case 'Tab': @@ -560,16 +560,14 @@ export default mixins(getConfigReceiverMixins('select')).exte this.$nextTick(() => { let styles = (this.popupProps && this.popupProps.overlayStyle) || {}; if (this.popupProps && isFunction(this.popupProps.overlayStyle)) { - styles = - this.popupProps.overlayStyle(this.$refs.select as HTMLElement, this.$refs.content as HTMLElement) || {}; + styles = this.popupProps.overlayStyle(this.$refs.select as HTMLElement, this.$refs.content as HTMLElement) || {}; } if (typeof styles === 'object' && !styles.width) { const elWidth = (this.$refs.select as HTMLElement).getBoundingClientRect().width; const popupWidth = this.getOverlayElm().getBoundingClientRect().width; - const width = - elWidth > DEFAULT_MAX_OVERLAY_WIDTH - ? elWidth - : Math.min(DEFAULT_MAX_OVERLAY_WIDTH, Math.max(elWidth, popupWidth)); + const width = elWidth > DEFAULT_MAX_OVERLAY_WIDTH + ? elWidth + : Math.min(DEFAULT_MAX_OVERLAY_WIDTH, Math.max(elWidth, popupWidth)); Vue.set(this.defaultProps, 'overlayStyle', { width: `${Math.ceil(width)}px` }); // issuse-549 弹出层出现滚动条时，需要加上滚动条宽度，否则会挤压宽度，导致出现省略号 if (this.checkScroll) { @@ -658,9 +656,8 @@ export default mixins(getConfigReceiverMixins('select')).exte } else if (this.multiple && Array.isArray(this.value) && this.value.length) { this.value.some((item: string | number | TdOptionProps) => { const targetIndex = Object.keys(this.hoverOptions).filter( - (i) => - (typeof item === 'object' && get(this.hoverOptions[i], this.realValue) === get(item, this.realValue)) || - get(this.hoverOptions[i], this.realValue) === item, + (i) => (typeof item === 'object' && get(this.hoverOptions[i], this.realValue) === get(item, this.realValue)) + || get(this.hoverOptions[i], this.realValue) === item, ); this.hoverIndex = targetIndex.length ? parseInt(targetIndex[targetIndex.length - 1], 10) : -1; return this.hoverIndex !== -1; @@ -772,8 +769,8 @@ export default mixins(getConfigReceiverMixins('select')).exte {showPlaceholder && {placeholderText}} {this.valueDisplay || this.$scopedSlots.valueDisplay ? renderTNodeJSX(this, 'valueDisplay', { - params: { value: selectedMultiple, onClose: (index: number) => this.removeTag(index) }, - }) + params: { value: selectedMultiple, onClose: (index: number) => this.removeTag(index) }, + }) : selectedMultiple.map((item: TdOptionProps, index: number) => ( ('select')).exte > {get(item, realLabel)} - ))} + ))} {this.collapsedItems || this.$scopedSlots.collapsedItems ? ( renderTNodeJSX(this, 'collapsedItems', { params: { diff --git a/src/tree-select/tree-select.tsx b/src/tree-select/tree-select.tsx index 0f716e644..9a5334ebf 100644 --- a/src/tree-select/tree-select.tsx +++ b/src/tree-select/tree-select.tsx @@ -103,11 +103,11 @@ export default mixins(getConfigReceiverMixins('treeSelect }, showArrow(): boolean { return ( - !this.clearable || - !this.isHover || - this.tDisabled || - (!this.multiple && !this.value && this.value !== 0) || - (this.multiple && isArray(this.value) && isEmpty(this.value)) + !this.clearable + || !this.isHover + || this.tDisabled + || (!this.multiple && !this.value && this.value !== 0) + || (this.multiple && isArray(this.value) && isEmpty(this.value)) ); }, showLoading(): boolean { @@ -115,19 +115,19 @@ export default mixins(getConfigReceiverMixins('treeSelect }, showClose(): boolean { return ( - this.clearable && - this.isHover && - !this.tDisabled && - ((!this.multiple && (!!this.value || this.value === 0)) || - (this.multiple && !isEmpty(this.value as Array))) + this.clearable + && this.isHover + && !this.tDisabled + && ((!this.multiple && (!!this.value || this.value === 0)) + || (this.multiple && !isEmpty(this.value as Array))) ); }, showPlaceholder(): boolean { if ( - !this.showFilter && - ((isString(this.value) && this.value === '' && !this.selectedSingle) || - (isArray(this.value) && isEmpty(this.value)) || - isNil(this.value)) + !this.showFilter + && ((isString(this.value) && this.value === '' && !this.selectedSingle) + || (isArray(this.value) && isEmpty(this.value)) + || isNil(this.value)) ) { return true; } @@ -357,7 +357,9 @@ export default mixins(getConfigReceiverMixins('treeSelect }, }, render(): VNode { - const { treeProps, popupObject, classes, popupClass, treeKey } = this; + const { + treeProps, popupObject, classes, popupClass, treeKey, + } = this; const iconStyle = { 'font-size': this.size }; const treeItem = ( ('treeSelect onFocus={(value: InputValue, context: InputFocustEventParams[1]) => this.focus(context)} /> ); - const tagItem = - !isEmpty(this.tagList) && (this.valueDisplay || this.$scopedSlots.valueDisplay) - ? renderTNodeJSX(this, 'valueDisplay', { - params: { - value: this.nodeInfo, - onClose: (index: number) => this.removeTag(index, null), - }, - }) - : this.tagList.map((label, index) => ( + const tagItem = !isEmpty(this.tagList) && (this.valueDisplay || this.$scopedSlots.valueDisplay) + ? renderTNodeJSX(this, 'valueDisplay', { + params: { + value: this.nodeInfo, + onClose: (index: number) => this.removeTag(index, null), + }, + }) + : this.tagList.map((label, index) => ( ('treeSelect > {label} - )); - const selectedSingle = - this.valueDisplay || this.$scopedSlots.valueDisplay ? ( - renderTNodeJSX(this, 'valueDisplay', { - params: { value: this.nodeInfo || { [this.realLabel]: '', [this.realValue]: '' } }, - }) - ) : ( + )); + const selectedSingle = this.valueDisplay || this.$scopedSlots.valueDisplay ? ( + renderTNodeJSX(this, 'valueDisplay', { + params: { value: this.nodeInfo || { [this.realLabel]: '', [this.realValue]: '' } }, + }) + ) : ( {this.selectedSingle} - ); - const collapsedItem = - (this.collapsedItems || this.$scopedSlots.collapsedItems) && - this.minCollapsedNum > 0 && - this.tagList.length > this.minCollapsedNum ? ( + ); + const collapsedItem = (this.collapsedItems || this.$scopedSlots.collapsedItems) + && this.minCollapsedNum > 0 + && this.tagList.length > this.minCollapsedNum ? ( renderTNodeJSX(this, 'collapsedItems', { params: { count: this.tagList.length - this.minCollapsedNum,