diff --git a/packages/web-vue/components/select/__demo__/basic.md b/packages/web-vue/components/select/__demo__/basic.md index 0bda0de9c..e353fdb65 100644 --- a/packages/web-vue/components/select/__demo__/basic.md +++ b/packages/web-vue/components/select/__demo__/basic.md @@ -28,6 +28,10 @@ Use the `trigger-props` property to customize the properties of the drop-down bo Guangzhou Disabled + + + + Beijing Shanghai @@ -44,6 +48,7 @@ Use the `trigger-props` property to customize the properties of the drop-down bo Guangzhou Disabled + diff --git a/packages/web-vue/components/select/interface.ts b/packages/web-vue/components/select/interface.ts index 4aa5784b9..e344a8f00 100644 --- a/packages/web-vue/components/select/interface.ts +++ b/packages/web-vue/components/select/interface.ts @@ -5,18 +5,26 @@ import { VirtualListProps } from '../_components/virtual-list-v2/interface'; import { TriggerProps } from '../trigger'; export interface SelectProps { - options?: (string | number | SelectOptionData | SelectOptionGroup)[]; + options?: ( + | string + | number + | boolean + | SelectOptionData + | SelectOptionGroup + )[]; multiple?: boolean; modelValue?: | string | number + | boolean | Record - | (string | number | Record)[]; + | (string | number | boolean | Record)[]; defaultValue?: | string | number + | boolean | Record - | (string | number | Record)[]; + | (string | number | boolean | Record)[]; inputValue?: string; defaultInputValue?: string; size?: Size; @@ -41,7 +49,9 @@ export interface SelectProps { formatLabel?: (data: SelectOptionData) => string; fallbackOption?: | boolean - | ((value: string | number | Record) => SelectOptionData); + | (( + value: string | number | boolean | Record + ) => SelectOptionData); showExtraOptions?: boolean; valueKey?: string; searchDelay?: number; @@ -51,7 +61,11 @@ export interface SelectProps { showFooterOnEmpty?: boolean; } -export type SelectOptionValue = string | number | Record; +export type SelectOptionValue = + | string + | number + | boolean + | Record; export interface OptionValueWithKey { value: SelectOptionValue; @@ -65,7 +79,7 @@ export interface SelectOptionData { * @zh 选项值 * @en Option Value */ - value?: string | number | Record; + value?: string | number | boolean | Record; /** * @zh 选项内容 * @en Option content @@ -117,6 +131,7 @@ export interface SelectOptionGroup { export type SelectOption = | string | number + | boolean | SelectOptionData | SelectOptionGroup; diff --git a/packages/web-vue/components/select/option.vue b/packages/web-vue/components/select/option.vue index 817d465d0..db8eb5c40 100644 --- a/packages/web-vue/components/select/option.vue +++ b/packages/web-vue/components/select/option.vue @@ -63,7 +63,10 @@ export default defineComponent({ * @zh 选项值(如不填,会从内容中获取) * @en Option value (if not filled, it will be obtained from the content) */ - value: [String, Number, Object], + value: { + type: [String, Number, Boolean, Object], + default: undefined, + }, /** * @zh 选项标签(如不填,会从内容中获取) * @en Option label (if not filled, it will be obtained from the content) diff --git a/packages/web-vue/components/select/select.tsx b/packages/web-vue/components/select/select.tsx index aa7e96101..dc0969940 100644 --- a/packages/web-vue/components/select/select.tsx +++ b/packages/web-vue/components/select/select.tsx @@ -17,6 +17,7 @@ import { isNumber, isObject, isString, + isBoolean, isUndefined, } from '../_utils/is'; import { @@ -79,12 +80,14 @@ export default defineComponent({ * @en Value */ modelValue: { - type: [String, Number, Object, Array] as PropType< + type: [String, Number, Boolean, Object, Array] as PropType< | string | number + | boolean | Record - | (string | number | Record)[] + | (string | number | boolean | Record)[] >, + default: undefined, }, /** * @zh 默认值(非受控模式) @@ -92,11 +95,12 @@ export default defineComponent({ * @defaultValue '' \| [] */ defaultValue: { - type: [String, Number, Object, Array] as PropType< + type: [String, Number, Boolean, Object, Array] as PropType< | string | number + | boolean | Record - | (string | number | Record)[] + | (string | number | boolean | Record)[] >, default: (props: Data) => (isUndefined(props.multiple) ? '' : []), }, @@ -254,7 +258,7 @@ export default defineComponent({ */ options: { type: Array as PropType< - (string | number | SelectOptionData | SelectOptionGroup)[] + (string | number | boolean | SelectOptionData | SelectOptionGroup)[] >, default: () => [], }, @@ -290,7 +294,7 @@ export default defineComponent({ type: [Boolean, Function] as PropType< | boolean | (( - value: string | number | Record + value: string | number | boolean | Record ) => SelectOptionData) >, default: true, @@ -370,22 +374,24 @@ export default defineComponent({ value: | string | number + | boolean | Record - | (string | number | Record)[] + | (string | number | boolean | Record)[] ) => true, 'update:inputValue': (inputValue: string) => true, 'update:popupVisible': (visible: boolean) => true, /** * @zh 值发生改变时触发 * @en Triggered when the value changes - * @param { string | number | Record | (string | number | Record)[] } value + * @param { string | number | boolean | Record | (string | number | boolean | Record)[] } value */ 'change': ( value: | string | number + | boolean | Record - | (string | number | Record)[] + | (string | number | boolean | Record)[] ) => true, /** * @zh 输入框的值发生改变时触发 @@ -407,10 +413,11 @@ export default defineComponent({ /** * @zh 点击标签的删除按钮时触发 * @en Triggered when the delete button of the label is clicked - * @param {string | number | Record | undefined} removed + * @param {string | number | boolean | Record | undefined} removed */ - 'remove': (removed: string | number | Record | undefined) => - true, + 'remove': ( + removed: string | number | boolean | Record | undefined + ) => true, /** * @zh 用户搜索时触发 * @en Triggered when the user searches @@ -430,12 +437,12 @@ export default defineComponent({ /** * @zh 多选超出限制时触发 * @en Triggered when multiple selection exceeds the limit - * @param {string | number | Record | undefined} value + * @param {string | number | boolean | Record | undefined} value * @param {Event} ev * @version 2.18.0 */ 'exceedLimit': ( - value: string | number | Record | undefined, + value: string | number | boolean | Record | undefined, ev: Event ) => true, }, @@ -555,7 +562,10 @@ export default defineComponent({ const mergedValue = props.modelValue ?? _value.value; const valueArray = isArray(mergedValue) ? mergedValue - : mergedValue || isNumber(mergedValue) || isString(mergedValue) + : mergedValue || + isNumber(mergedValue) || + isString(mergedValue) || + isBoolean(mergedValue) ? [mergedValue] : []; return valueArray.map((value) => ({ @@ -596,7 +606,7 @@ export default defineComponent({ // extra value and option const getFallBackOption = ( - value: string | number | Record + value: string | number | boolean | Record ): SelectOptionData => { if (isFunction(props.fallbackOption)) { return props.fallbackOption(value); diff --git a/packages/web-vue/components/select/utils.ts b/packages/web-vue/components/select/utils.ts index 5df0bc18c..f0a6c3f3e 100644 --- a/packages/web-vue/components/select/utils.ts +++ b/packages/web-vue/components/select/utils.ts @@ -1,4 +1,10 @@ -import { isFunction, isNumber, isObject, isString } from '../_utils/is'; +import { + isBoolean, + isFunction, + isNumber, + isObject, + isString, +} from '../_utils/is'; import type { FilterOption, SelectOptionGroup, @@ -32,7 +38,7 @@ export const getKeyFromValue = ( if (isObject(value)) { return `__arco__option__object__${value[valueKey]}`; } - if (value || isNumber(value) || isString(value)) { + if (value || isNumber(value) || isString(value) || isBoolean(value)) { return `__arco__option__${typeof value}-${value}`; } return '';