feat(select): support boolean type (#2661)

arco-design · Sep 1, 2023 · 47120f7 · 47120f7
1 parent 1c861d5
commit 47120f7
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 25 deletions.
diff --git 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
       <a-option>Guangzhou</a-option>
       <a-option disabled>Disabled</a-option>
     </a-select>
+    <a-select :style="{width:'320px'}" placeholder="Please select ...">
+      <a-option :value="true">是</a-option>
+      <a-option :value="false">否</a-option>
+    </a-select>
     <a-select defaultValue="Beijing" :style="{width:'320px'}" placeholder="Please select ..." disabled>
       <a-option>Beijing</a-option>
       <a-option>Shanghai</a-option>
@@ -44,6 +48,7 @@ Use the `trigger-props` property to customize the properties of the drop-down bo
       <a-option>Guangzhou</a-option>
       <a-option disabled>Disabled</a-option>
     </a-select>
+    
   </a-space>
 </template>
 

diff --git 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, unknown>
-    | (string | number | Record<string, unknown>)[];
+    | (string | number | boolean | Record<string, unknown>)[];
   defaultValue?:
     | string
     | number
+    | boolean
     | Record<string, unknown>
-    | (string | number | Record<string, unknown>)[];
+    | (string | number | boolean | Record<string, unknown>)[];
   inputValue?: string;
   defaultInputValue?: string;
   size?: Size;
@@ -41,7 +49,9 @@ export interface SelectProps {
   formatLabel?: (data: SelectOptionData) => string;
   fallbackOption?:
     | boolean
-    | ((value: string | number | Record<string, unknown>) => SelectOptionData);
+    | ((
+        value: string | number | boolean | Record<string, unknown>
+      ) => SelectOptionData);
   showExtraOptions?: boolean;
   valueKey?: string;
   searchDelay?: number;
@@ -51,7 +61,11 @@ export interface SelectProps {
   showFooterOnEmpty?: boolean;
 }
 
-export type SelectOptionValue = string | number | Record<string, unknown>;
+export type SelectOptionValue =
+  | string
+  | number
+  | boolean
+  | Record<string, unknown>;
 
 export interface OptionValueWithKey {
   value: SelectOptionValue;
@@ -65,7 +79,7 @@ export interface SelectOptionData {
    * @zh 选项值
    * @en Option Value
    */
-  value?: string | number | Record<string, unknown>;
+  value?: string | number | boolean | Record<string, unknown>;
   /**
    * @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
@@ -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
@@ -17,6 +17,7 @@ import {
   isNumber,
   isObject,
   isString,
+  isBoolean,
   isUndefined,
 } from '../_utils/is';
 import {
@@ -79,24 +80,27 @@ 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, any>
-        | (string | number | Record<string, any>)[]
+        | (string | number | boolean | Record<string, any>)[]
       >,
+      default: undefined,
     },
     /**
      * @zh 默认值（非受控模式）
      * @en Default value (uncontrolled mode)
      * @defaultValue '' \| []
      */
     defaultValue: {
-      type: [String, Number, Object, Array] as PropType<
+      type: [String, Number, Boolean, Object, Array] as PropType<
         | string
         | number
+        | boolean
         | Record<string, unknown>
-        | (string | number | Record<string, unknown>)[]
+        | (string | number | boolean | Record<string, unknown>)[]
       >,
       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<string, unknown>
+            value: string | number | boolean | Record<string, unknown>
           ) => SelectOptionData)
       >,
       default: true,
@@ -370,22 +374,24 @@ export default defineComponent({
       value:
         | string
         | number
+        | boolean
         | Record<string, any>
-        | (string | number | Record<string, any>)[]
+        | (string | number | boolean | Record<string, any>)[]
     ) => true,
     'update:inputValue': (inputValue: string) => true,
     'update:popupVisible': (visible: boolean) => true,
     /**
      * @zh 值发生改变时触发
      * @en Triggered when the value changes
-     * @param { string | number | Record<string, any> | (string | number | Record<string, any>)[] } value
+     * @param { string | number | boolean | Record<string, any> | (string | number | boolean | Record<string, any>)[] } value
      */
     'change': (
       value:
         | string
         | number
+        | boolean
         | Record<string, any>
-        | (string | number | Record<string, any>)[]
+        | (string | number | boolean | Record<string, any>)[]
     ) => 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<string, any> | undefined} removed
+     * @param {string | number | boolean | Record<string, any> | undefined} removed
      */
-    'remove': (removed: string | number | Record<string, any> | undefined) =>
-      true,
+    'remove': (
+      removed: string | number | boolean | Record<string, any> | 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<string, any> | undefined} value
+     * @param {string | number | boolean | Record<string, any> | undefined} value
      * @param {Event} ev
      * @version 2.18.0
      */
     'exceedLimit': (
-      value: string | number | Record<string, any> | undefined,
+      value: string | number | boolean | Record<string, any> | 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<string, unknown>
+      value: string | number | boolean | Record<string, unknown>
     ): 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
@@ -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 '';