fix: boolean with other type props ignore default value

common/config/src/props.ts

@@ -71,6 +71,21 @@ export function useProps<T>(
   }
 }
 
+export const booleanProp = {
+  type: Boolean,
+  default: null
+}
+
+export const booleanStringProp = {
+  type: [Boolean, String],
+  default: null
+}
+
+export const booleanNumberProp = {
+  type: [Boolean, Number],
+  default: null
+}
+
 export type ComponentSize = 'small' | 'default' | 'large'
 
 export const sizeProp = String as PropType<ComponentSize>
@@ -96,8 +111,3 @@ export function createStateProp() {
     }
   }
 }
-
-export const booleanProp = {
-  type: Boolean,
-  default: null
-}

components/alert/alert.vue

@@ -63,7 +63,10 @@ export default defineComponent({
     type: String as PropType<AlertType>,
     title: String,
     colorfulText: booleanProp,
-    icon: [Boolean, Object],
+    icon: {
+      type: [Boolean, Object],
+      default: null
+    },
     closable: booleanProp,
     iconColor: String,
     noBorder: booleanProp,

components/auto-complete/auto-complete.vue

@@ -70,11 +70,19 @@
 <script lang="ts">
 import { defineComponent, ref, computed, inject, watch, watchEffect } from 'vue'
 import { Icon } from '@/components/icon'
-// import { Option } from '@/components/option'
 import { Select } from '@/components/select'
 import { VALIDATE_FIELD, CLEAR_FIELD } from '@/components/form-item'
 import { placementWhileList } from '@vexip-ui/mixins'
-import { useProps, useLocale, createSizeProp, createStateProp, booleanProp, sizeProp, stateProp } from '@vexip-ui/config'
+import {
+  useProps,
+  useLocale,
+  booleanProp,
+  booleanStringProp,
+  sizeProp,
+  stateProp,
+  createSizeProp,
+  createStateProp
+} from '@vexip-ui/config'
 import { isNull, noop } from '@vexip-ui/utils'
 
 import type { PropType } from 'vue'
@@ -91,13 +99,16 @@ export default defineComponent({
   props: {
     size: sizeProp,
     state: stateProp,
-    transfer: [Boolean, String],
+    transfer: booleanStringProp,
     value: [String, Number],
     options: Array as PropType<RawOption[]>,
-    filter: [Boolean, Function] as PropType<
-      | boolean
-      | ((value: string | number, options: { label: string, value: string | number }) => boolean)
-    >,
+    filter: {
+      type: [Boolean, Function] as PropType<
+        | boolean
+        | ((value: string | number, options: { label: string, value: string | number }) => boolean)
+      >,
+      default: null
+    },
     prefix: Object,
     prefixColor: String,
     suffix: Object,

components/bubble/bubble.vue

@@ -10,7 +10,7 @@
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
 import { placementWhileList } from '@vexip-ui/mixins'
-import { useProps } from '@vexip-ui/config'
+import { useProps, booleanStringProp } from '@vexip-ui/config'
 
 import type { PropType, CSSProperties } from 'vue'
 import type { Placement } from '@vexip-ui/mixins'
@@ -22,7 +22,7 @@ export default defineComponent({
   props: {
     placement: String as PropType<Placement>,
     background: String,
-    shadow: [Boolean, String],
+    shadow: booleanStringProp,
     contentClass: [String, Object] as PropType<ClassType>
   },
   emits: ['click'],

components/carousel/carousel.vue

@@ -93,7 +93,7 @@ import {
   toRef
 } from 'vue'
 import { Icon } from '@/components/icon'
-import { useProps, booleanProp } from '@vexip-ui/config'
+import { useProps, booleanProp, booleanNumberProp } from '@vexip-ui/config'
 import { useHover } from '@vexip-ui/mixins'
 import { debounceMinor } from '@vexip-ui/utils'
 import { ArrowUp, ArrowRight, ArrowDown, ArrowLeft } from '@vexip-ui/icons'
@@ -115,7 +115,7 @@ export default defineComponent({
     loop: booleanProp,
     arrow: String as PropType<ArrowType>,
     arrowTrigger: String as PropType<ArrowTrigger>,
-    autoplay: [Boolean, Number],
+    autoplay: booleanNumberProp,
     pointer: String as PropType<PointerType>,
     speed: Number,
     activeOffset: Number,

components/color-picker/color-picker.vue

@@ -105,7 +105,16 @@ import ColorHue from './color-hue.vue'
 import ColorPalette from './color-palette.vue'
 import { VALIDATE_FIELD, CLEAR_FIELD } from '@/components/form-item'
 import { usePopper, placementWhileList, useClickOutside } from '@vexip-ui/mixins'
-import { useProps, useLocale, booleanProp, sizeProp, stateProp, createSizeProp, createStateProp } from '@vexip-ui/config'
+import {
+  useProps,
+  useLocale,
+  booleanProp,
+  booleanStringProp,
+  sizeProp,
+  stateProp,
+  createSizeProp,
+  createStateProp
+} from '@vexip-ui/config'
 import {
   noop,
   toFixed,
@@ -178,7 +187,7 @@ export default defineComponent({
     shortcut: booleanProp,
     shortcutList: Array as PropType<string[]>,
     placement: String as PropType<Placement>,
-    transfer: [Boolean, String],
+    transfer: booleanStringProp,
     outsideClose: booleanProp,
     clearable: booleanProp,
     disableValidate: booleanProp,

components/date-picker/date-picker.vue

@@ -124,7 +124,7 @@ import DateControl from './date-control.vue'
 import DatePane from './date-pane.vue'
 import { VALIDATE_FIELD, CLEAR_FIELD } from '@/components/form-item'
 import { useHover, usePopper, placementWhileList, useClickOutside } from '@vexip-ui/mixins'
-import { useProps, booleanProp, sizeProp, stateProp, createSizeProp, createStateProp } from '@vexip-ui/config'
+import { useProps, booleanProp, booleanStringProp, sizeProp, stateProp, createSizeProp, createStateProp } from '@vexip-ui/config'
 import { noop, toDate, isLeepYear, doubleDigits, boundRange } from '@vexip-ui/utils'
 import { CalendarR, CircleXmark, ArrowRightArrowLeft } from '@vexip-ui/icons'
 import { useColumn } from './helper'
@@ -151,7 +151,7 @@ export default defineComponent({
     type: String as PropType<DatePickerType>,
     visible: booleanProp,
     placement: String as PropType<Placement>,
-    transfer: [Boolean, String],
+    transfer: booleanStringProp,
     value: [Number, String, Date, Array] as PropType<Dateable | Dateable[]>,
     format: String,
     filler: String,

components/date-picker/time-picker.vue

@@ -151,7 +151,7 @@ import TimeControl from './time-control.vue'
 import TimeWheel from './time-wheel.vue'
 import { VALIDATE_FIELD, CLEAR_FIELD } from '@/components/form-item'
 import { useHover, usePopper, placementWhileList, useClickOutside } from '@vexip-ui/mixins'
-import { useProps, useLocale, booleanProp, sizeProp, stateProp, createSizeProp, createStateProp } from '@vexip-ui/config'
+import { useProps, useLocale, booleanProp, booleanStringProp, sizeProp, stateProp, createSizeProp, createStateProp } from '@vexip-ui/config'
 import { noop, doubleDigits, boundRange } from '@vexip-ui/utils'
 import { CircleXmark, ClockR, ArrowRightArrowLeft } from '@vexip-ui/icons'
 import { useColumn } from './helper'
@@ -179,7 +179,7 @@ export default defineComponent({
     state: stateProp,
     visible: booleanProp,
     placement: String as PropType<Placement>,
-    transfer: [Boolean, String],
+    transfer: booleanStringProp,
     format: String,
     separator: String,
     value: [String, Array] as PropType<string | string[]>,

components/drawer/drawer.vue

@@ -48,7 +48,7 @@
 import { defineComponent, ref, computed, watch, nextTick } from 'vue'
 import { Icon } from '@/components/icon'
 import { Masker } from '@/components/masker'
-import { useProps, booleanProp } from '@vexip-ui/config'
+import { useProps, booleanProp, booleanStringProp } from '@vexip-ui/config'
 import { isPromise } from '@vexip-ui/utils'
 import { Xmark } from '@vexip-ui/icons'
 
@@ -67,7 +67,7 @@ export default defineComponent({
     Xmark
   },
   props: {
-    transfer: [Boolean, String],
+    transfer: booleanStringProp,
     active: booleanProp,
     width: Number,
     height: Number,

components/dropdown/dropdown.vue

@@ -46,7 +46,7 @@ import {
 import { Portal } from '@/components/portal'
 import DropdownDrop from './dropdown-drop'
 import { useClickOutside, placementWhileList, usePopper, useTriggerHandler } from '@vexip-ui/mixins'
-import { useProps, booleanProp } from '@vexip-ui/config'
+import { useProps, booleanProp, booleanStringProp } from '@vexip-ui/config'
 import { useLabel } from './mixins'
 import { SELECT_HANDLER, DROP_SELECT_HANDLER } from './symbol'
 
@@ -69,7 +69,7 @@ export default defineComponent({
     trigger: String as PropType<DropdownTrigger>,
     label: [String, Number],
     transitionName: String,
-    transfer: [Boolean, String],
+    transfer: booleanStringProp,
     dropClass: [String, Object] as PropType<ClassType>,
     appear: booleanProp
   },

components/ellipsis/ellipsis.vue

@@ -51,7 +51,10 @@ export default defineComponent({
   },
   props: {
     placement: String as PropType<Placement>,
-    transfer: [Boolean, String],
+    transfer: {
+      type: [String, Boolean],
+      default: null
+    },
     noHover: booleanProp,
     transitionName: String,
     tooltipTheme: String as PropType<TooltipTheme>,

components/grid/cell.ts

@@ -26,7 +26,10 @@ export default defineComponent({
     lg: mediaProp,
     xl: mediaProp,
     xxl: mediaProp,
-    useFlex: [Boolean, Object] as PropType<boolean | Partial<CellFlex>>
+    useFlex: {
+      type: [Boolean, Object] as PropType<boolean | Partial<CellFlex>>,
+      default: null
+    }
   },
   setup(_props, { slots }) {
     const props = useProps('cell', _props, {

components/grid/grid.ts

@@ -29,7 +29,10 @@ export default defineComponent({
     dense: booleanProp,
     justify: String as PropType<GridJustify>,
     align: String as PropType<GridAlign>,
-    cellFlex: [Boolean, Object] as PropType<boolean | Partial<CellFlex>>
+    cellFlex: {
+      type: [Boolean, Object] as PropType<boolean | Partial<CellFlex>>,
+      default: null
+    }
   },
   setup(_props, { slots }) {
     const props = useProps('grid', _props, {

components/icon/icon.tsx

@@ -4,6 +4,11 @@ import { iconMap, register } from './register'
 
 import type { PropType, CSSProperties } from 'vue'
 
+const inOutProp = {
+  type: [Boolean, String] as PropType<boolean | 'in' | 'out'>,
+  default: null
+}
+
 export default defineComponent({
   name: 'Icon',
   register,
@@ -13,8 +18,8 @@ export default defineComponent({
     scale: [Number, String] as PropType<number | string>,
     title: String,
     label: String,
-    spin: [Boolean, String] as PropType<boolean | 'in' | 'out'>,
-    pulse: [Boolean, String] as PropType<boolean | 'in' | 'out'>,
+    spin: inOutProp,
+    pulse: inOutProp,
     flip: String as PropType<'horizontal' | 'vertical' | 'both'>
   },
   setup(_props, { attrs, slots }) {

components/masker/masker.vue

@@ -26,7 +26,7 @@
 <script lang="ts">
 import { defineComponent, ref, computed, watch, nextTick } from 'vue'
 import { Portal } from '@/components/portal'
-import { useProps, booleanProp } from '@vexip-ui/config'
+import { useProps, booleanProp, booleanStringProp } from '@vexip-ui/config'
 import { isPromise } from '@vexip-ui/utils'
 
 import type { PropType } from 'vue'
@@ -44,7 +44,7 @@ export default defineComponent({
     transitionName: String,
     disabled: booleanProp,
     onBeforeClose: Function as PropType<() => any | Promise<any>>,
-    transfer: [Boolean, String]
+    transfer: booleanStringProp
   },
   emits: ['toggle', 'close', 'hide', 'show', 'update:active'],
   setup(_props, { emit }) {

components/menu/menu-item.vue

@@ -88,7 +88,7 @@ import { CollapseTransition } from '@/components/collapse-transition'
 import { Icon } from '@/components/icon'
 import { Portal } from '@/components/portal'
 import { Tooltip } from '@/components/tooltip'
-import { useProps, booleanProp } from '@vexip-ui/config'
+import { useProps, booleanProp, booleanStringProp } from '@vexip-ui/config'
 import { usePopper } from '@vexip-ui/mixins'
 import { ChevronDown } from '@vexip-ui/icons'
 import { baseIndentWidth, MENU_STATE, MENU_ITEM_STATE, MENU_GROUP_STATE } from './symbol'
@@ -108,7 +108,7 @@ export default defineComponent({
     label: String,
     icon: Object,
     disabled: booleanProp,
-    transfer: [Boolean, String],
+    transfer: booleanStringProp,
     transitionName: String
   },
   emits: ['select'],

components/menu/menu.vue

@@ -16,7 +16,7 @@ import {
   provide,
   toRef
 } from 'vue'
-import { useProps, booleanProp } from '@vexip-ui/config'
+import { useProps, booleanProp, booleanStringProp } from '@vexip-ui/config'
 import { MENU_STATE } from './symbol'
 
 import type { PropType } from 'vue'
@@ -33,7 +33,7 @@ export default defineComponent({
     markerType: String as PropType<MenuMarkerType>,
     reduced: booleanProp,
     horizontal: booleanProp,
-    transfer: [Boolean, String],
+    transfer: booleanStringProp,
     groupType: String as PropType<MenuGroupType>,
     theme: String as PropType<MenuTheme>,
     tooltipTheme: String as PropType<TooltipTheme>

components/modal/modal.vue

@@ -74,7 +74,7 @@ import { defineComponent, ref, computed, watch, onMounted, nextTick } from 'vue'
 import { Button } from '@/components/button'
 import { Icon } from '@/components/icon'
 import { Masker } from '@/components/masker'
-import { useProps, useLocale, booleanProp } from '@vexip-ui/config'
+import { useProps, useLocale, booleanProp, booleanStringProp } from '@vexip-ui/config'
 import { isPromise, toNumber } from '@vexip-ui/utils'
 import { Xmark } from '@vexip-ui/icons'
 
@@ -96,7 +96,7 @@ export default defineComponent({
     Xmark
   },
   props: {
-    transfer: [Boolean, String],
+    transfer: booleanStringProp,
     active: booleanProp,
     width: positionType,
     height: positionType,

components/native-scroll/native-scroll.vue

@@ -52,7 +52,7 @@
 <script lang="ts">
 import { defineComponent, ref, computed, watch, toRef, nextTick } from 'vue'
 import { Scrollbar } from '@/components/scrollbar'
-import { useProps, booleanProp } from '@vexip-ui/config'
+import { useProps, booleanProp, booleanNumberProp } from '@vexip-ui/config'
 import { USE_TOUCH, isTrue, createEventEmitter } from '@vexip-ui/utils'
 import { useScrollWrapper } from './mixins'
 
@@ -84,7 +84,7 @@ export default defineComponent({
     useYBar: booleanProp,
     barFade: Number,
     barClass: [String, Object] as PropType<ClassType>,
-    autoplay: [Boolean, Number],
+    autoplay: booleanNumberProp,
     playWaiting: Number,
     onBeforeScroll: Function as PropType<(payload: { signX: number, signY: number }) => boolean>,
     appear: booleanProp,

components/resize-observer/resize-observer.ts

@@ -1,5 +1,5 @@
 import { defineComponent, onMounted, onBeforeUnmount, getCurrentInstance, renderSlot } from 'vue'
-import { useProps } from '@vexip-ui/config'
+import { useProps, booleanNumberProp } from '@vexip-ui/config'
 import { useResize } from '@vexip-ui/mixins'
 import { throttle } from '@vexip-ui/utils'
 
@@ -10,7 +10,7 @@ export default defineComponent({
   functional: true,
   props: {
     onResize: Function as PropType<(entry: ResizeObserverEntry) => any>,
-    throttle: [Boolean, Number]
+    throttle: booleanNumberProp
   },
   setup(_props, { slots }) {
     const props = useProps('resizeObserver', _props, {

components/row/column.ts

@@ -26,7 +26,10 @@ export default defineComponent({
     xl: mediaProp,
     xxl: mediaProp,
     flex: [Number, String],
-    useFlex: [Boolean, Object] as PropType<boolean | Partial<ColumnFlex>>
+    useFlex: {
+      type: [Boolean, Object] as PropType<boolean | Partial<ColumnFlex>>,
+      default: null
+    }
   },
   setup(_props, { slots }) {
     const props = useProps('column', _props, {