perf: add truthProp util (#8522)

* perf: add TruthyProp util

* chore: rename

* chore: upd

src/action-bar-icon/ActionBarIcon.tsx

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue';
-import { extend, createNamespace, UnknownProp } from '../utils';
+import { extend, createNamespace, unknownProp } from '../utils';
 import { ACTION_BAR_KEY } from '../action-bar/ActionBar';
 
 // Composables
@@ -21,7 +21,7 @@ export default defineComponent({
     icon: String,
     color: String,
     badge: [Number, String],
-    iconClass: UnknownProp,
+    iconClass: unknownProp,
   }),
 
   setup(props, { slots }) {

src/action-bar/ActionBar.tsx

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue';
-import { createNamespace } from '../utils';
+import { truthProp, createNamespace } from '../utils';
 import { useChildren } from '@vant/use';
 
 const [name, bem] = createNamespace('action-bar');
@@ -10,10 +10,7 @@ export default defineComponent({
   name,
 
   props: {
-    safeAreaInsetBottom: {
+    safeAreaInsetBottom: truthProp,
-      type: Boolean,
-      default: true,
-    },
   },
 
   setup(props, { slots }) {

src/action-sheet/ActionSheet.tsx

@@ -1,7 +1,7 @@
 import { nextTick, PropType, defineComponent } from 'vue';
 
 // Utils
-import { pick, extend, createNamespace } from '../utils';
+import { pick, extend, truthProp, createNamespace } from '../utils';
 
 // Components
 import { Icon } from '../icon';
@@ -26,27 +26,18 @@ export default defineComponent({
 
   props: extend({}, popupSharedProps, {
     title: String,
+    round: truthProp,
     actions: Array as PropType<ActionSheetAction[]>,
+    closeable: truthProp,
     cancelText: String,
     description: String,
     closeOnPopstate: Boolean,
     closeOnClickAction: Boolean,
-    round: {
+    safeAreaInsetBottom: truthProp,
-      type: Boolean,
-      default: true,
-    },
-    closeable: {
-      type: Boolean,
-      default: true,
-    },
     closeIcon: {
       type: String,
       default: 'cross',
     },
-    safeAreaInsetBottom: {
-      type: Boolean,
-      default: true,
-    },
   }),
 
   emits: ['select', 'cancel', 'update:show'],

src/address-edit/AddressEdit.tsx

@@ -13,6 +13,7 @@ import {
   extend,
   isObject,
   isMobile,
+  truthProp,
   createNamespace,
   ComponentInstance,
 } from '../utils';
@@ -73,6 +74,8 @@ export default defineComponent({
     validator: Function as PropType<
       (key: string, value: string) => string | undefined
     >,
+    showArea: truthProp,
+    showDetail: truthProp,
     showDelete: Boolean,
     showPostal: Boolean,
     disableArea: Boolean,
@@ -83,14 +86,6 @@ export default defineComponent({
     areaPlaceholder: String,
     deleteButtonText: String,
     showSearchResult: Boolean,
-    showArea: {
-      type: Boolean,
-      default: true,
-    },
-    showDetail: {
-      type: Boolean,
-      default: true,
-    },
     detailRows: {
       type: [Number, String],
       default: 1,

src/address-list/AddressList.tsx

@@ -1,7 +1,7 @@
 import { PropType, defineComponent } from 'vue';
 
 // Utils
-import { createNamespace } from '../utils';
+import { truthProp, createNamespace } from '../utils';
 
 // Components
 import { Button } from '../button';
@@ -15,6 +15,7 @@ export default defineComponent({
 
   props: {
     modelValue: [Number, String],
+    switchable: truthProp,
     disabledText: String,
     addButtonText: String,
     defaultTagText: String,
@@ -26,10 +27,6 @@ export default defineComponent({
       type: Array as PropType<AddressListAddress[]>,
       default: () => [],
     },
-    switchable: {
-      type: Boolean,
-      default: true,
-    },
   },
 
   emits: [

src/badge/Badge.tsx

@@ -1,5 +1,11 @@
 import { PropType, CSSProperties, defineComponent } from 'vue';
-import { isDef, addUnit, isNumeric, createNamespace } from '../utils';
+import {
+  isDef,
+  addUnit,
+  isNumeric,
+  truthProp,
+  createNamespace,
+} from '../utils';
 
 const [name, bem] = createNamespace('badge');
 
@@ -12,14 +18,11 @@ export default defineComponent({
     color: String,
     offset: (Array as unknown) as PropType<[string | number, string | number]>,
     content: [Number, String],
+    showZero: truthProp,
     tag: {
       type: String as PropType<keyof HTMLElementTagNameMap>,
       default: 'div',
     },
-    showZero: {
-      type: Boolean,
-      default: true,
-    },
   },
 
   setup(props, { slots }) {

src/calendar/Calendar.tsx

@@ -9,7 +9,13 @@ import {
 } from 'vue';
 
 // Utils
-import { pick, isDate, getScrollTop, ComponentInstance } from '../utils';
+import {
+  pick,
+  isDate,
+  truthProp,
+  getScrollTop,
+  ComponentInstance,
+} from '../utils';
 import {
   t,
   bem,
@@ -46,69 +52,39 @@ export default defineComponent({
     show: Boolean,
     title: String,
     color: String,
+    round: truthProp,
     readonly: Boolean,
+    poppable: truthProp,
     teleport: [String, Object] as PropType<TeleportProps['to']>,
+    showMark: truthProp,
+    showTitle: truthProp,
     formatter: Function as PropType<(item: CalendarDayItem) => CalendarDayItem>,
     rowHeight: [Number, String],
     confirmText: String,
     rangePrompt: String,
+    lazyRender: truthProp,
+    showConfirm: truthProp,
     // TODO: remove any
     // see: https://github.com/vuejs/vue-next/issues/2668
     defaultDate: [Date, Array] as any,
     allowSameDay: Boolean,
+    showSubtitle: truthProp,
+    closeOnPopstate: truthProp,
     confirmDisabledText: String,
+    closeOnClickOverlay: truthProp,
+    safeAreaInsetBottom: truthProp,
     type: {
       type: String as PropType<CalendarType>,
       default: 'single',
     },
-    round: {
-      type: Boolean,
-      default: true,
-    },
     position: {
       type: String as PropType<PopupPosition>,
       default: 'bottom',
     },
-    poppable: {
-      type: Boolean,
-      default: true,
-    },
     maxRange: {
       type: [Number, String],
       default: null,
     },
-    lazyRender: {
-      type: Boolean,
-      default: true,
-    },
-    showMark: {
-      type: Boolean,
-      default: true,
-    },
-    showTitle: {
-      type: Boolean,
-      default: true,
-    },
-    showConfirm: {
-      type: Boolean,
-      default: true,
-    },
-    showSubtitle: {
-      type: Boolean,
-      default: true,
-    },
-    closeOnPopstate: {
-      type: Boolean,
-      default: true,
-    },
-    closeOnClickOverlay: {
-      type: Boolean,
-      default: true,
-    },
-    safeAreaInsetBottom: {
-      type: Boolean,
-      default: true,
-    },
     minDate: {
       type: Date,
       validator: isDate,

src/cascader/Cascader.tsx

@@ -1,5 +1,5 @@
 import { nextTick, PropType, reactive, watch, defineComponent } from 'vue';
-import { createNamespace, extend } from '../utils';
+import { createNamespace, truthProp, extend } from '../utils';
 
 // Components
 import { Tab } from '../tab';
@@ -32,6 +32,8 @@ export default defineComponent({
 
   props: {
     title: String,
+    closeable: truthProp,
+    swipeable: truthProp,
     modelValue: [Number, String],
     fieldNames: Object as PropType<CascaderFieldNames>,
     placeholder: String,
@@ -40,18 +42,10 @@ export default defineComponent({
       type: Array as PropType<CascaderOption[]>,
       default: () => [],
     },
-    closeable: {
-      type: Boolean,
-      default: true,
-    },
     closeIcon: {
       type: String,
       default: 'cross',
     },
-    swipeable: {
-      type: Boolean,
-      default: true,
-    },
   },
 
   emits: ['close', 'change', 'finish', 'update:modelValue'],

src/cell-group/CellGroup.tsx

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue';
-import { createNamespace } from '../utils';
+import { truthProp, createNamespace } from '../utils';
 import { BORDER_TOP_BOTTOM } from '../utils/constant';
 
 const [name, bem] = createNamespace('cell-group');
@@ -11,10 +11,7 @@ export default defineComponent({
 
   props: {
     title: String,
-    border: {
+    border: truthProp,
-      type: Boolean,
-      default: true,
-    },
   },
 
   setup(props, { slots, attrs }) {

src/cell/Cell.tsx

@@ -1,7 +1,13 @@
 import { PropType, CSSProperties, defineComponent } from 'vue';
 
 // Utils
-import { createNamespace, extend, isDef, UnknownProp } from '../utils';
+import {
+  createNamespace,
+  extend,
+  isDef,
+  truthProp,
+  unknownProp,
+} from '../utils';
 
 // Composables
 import { useRoute, routeProps } from '../composables/use-route';
@@ -21,17 +27,14 @@ export const cellProps = {
   label: [Number, String],
   center: Boolean,
   isLink: Boolean,
+  border: truthProp,
   required: Boolean,
   iconPrefix: String,
-  valueClass: UnknownProp,
+  valueClass: unknownProp,
-  labelClass: UnknownProp,
+  labelClass: unknownProp,
-  titleClass: UnknownProp,
+  titleClass: unknownProp,
   titleStyle: (null as unknown) as PropType<string | CSSProperties>,
   arrowDirection: String as PropType<CellArrowDirection>,
-  border: {
-    type: Boolean,
-    default: true,
-  },
   clickable: {
     type: Boolean as PropType<boolean | null>,
     default: null,

src/checkbox/Checkbox.tsx

@@ -1,7 +1,7 @@
 import { computed, watch, defineComponent } from 'vue';
 
 // Utils
-import { createNamespace, extend, pick } from '../utils';
+import { createNamespace, extend, pick, truthProp } from '../utils';
 import {
   CHECKBOX_GROUP_KEY,
   CheckboxGroupProvide,
@@ -21,10 +21,7 @@ export default defineComponent({
   name,
 
   props: extend({}, checkerProps, {
-    bindGroup: {
+    bindGroup: truthProp,
-      type: Boolean,
-      default: true,
-    },
   }),
 
   emits: ['change', 'update:modelValue'],

src/checkbox/Checker.tsx

@@ -1,5 +1,5 @@
 import { ref, computed, PropType, defineComponent } from 'vue';
-import { addUnit, extend, UnknownProp } from '../utils';
+import { addUnit, extend, unknownProp, truthProp } from '../utils';
 import { Icon } from '../icon';
 
 export type CheckerShape = 'square' | 'round';
@@ -15,10 +15,10 @@ export type CheckerParent = {
 };
 
 export const checkerProps = {
-  name: UnknownProp,
+  name: unknownProp,
   disabled: Boolean,
   iconSize: [Number, String],
-  modelValue: UnknownProp,
+  modelValue: unknownProp,
   checkedColor: String,
   labelPosition: String as PropType<CheckerLabelPosition>,
   labelDisabled: Boolean,
@@ -33,10 +33,7 @@ export default defineComponent({
     role: String,
     parent: Object as PropType<CheckerParent | null>,
     checked: Boolean,
-    bindGroup: {
+    bindGroup: truthProp,
-      type: Boolean,
-      default: true,
-    },
     bem: {
       type: Function,
       required: true as const,

src/circle/Circle.tsx

@@ -1,6 +1,6 @@
 import { watch, computed, PropType, CSSProperties, defineComponent } from 'vue';
 import { raf, cancelRaf } from '@vant/use';
-import { isObject, getSizeStyle, createNamespace } from '../utils';
+import { isObject, getSizeStyle, truthProp, createNamespace } from '../utils';
 
 const [name, bem] = createNamespace('circle');
 
@@ -24,6 +24,7 @@ export default defineComponent({
     text: String,
     size: [Number, String],
     color: [String, Object] as PropType<string | Record<string, string>>,
+    clockwise: truthProp,
     layerColor: String,
     strokeLinecap: String as PropType<CanvasLineCap>,
     currentRate: {
@@ -46,10 +47,6 @@ export default defineComponent({
       type: [Number, String],
       default: 40,
     },
-    clockwise: {
-      type: Boolean,
-      default: true,
-    },
   },
 
   emits: ['update:currentRate'],

src/collapse-item/CollapseItem.tsx

@@ -2,7 +2,7 @@ import { ref, watch, computed, nextTick, defineComponent } from 'vue';
 
 // Utils
 import { cellProps } from '../cell/Cell';
-import { createNamespace, extend, pick } from '../utils';
+import { createNamespace, extend, pick, truthProp } from '../utils';
 import { COLLAPSE_KEY, CollapseProvide } from '../collapse/Collapse';
 
 // Composables
@@ -20,12 +20,9 @@ export default defineComponent({
 
   props: extend({}, cellProps, {
     name: [Number, String],
+    isLink: truthProp,
     disabled: Boolean,
     readonly: Boolean,
-    isLink: {
-      type: Boolean,
-      default: true,
-    },
   }),
 
   setup(props, { slots }) {

src/collapse/Collapse.tsx

@@ -1,5 +1,5 @@
 import { PropType, defineComponent } from 'vue';
-import { createNamespace } from '../utils';
+import { truthProp, createNamespace } from '../utils';
 import { BORDER_TOP_BOTTOM } from '../utils/constant';
 import { useChildren } from '@vant/use';
 
@@ -16,6 +16,7 @@ export default defineComponent({
   name,
 
   props: {
+    border: truthProp,
     accordion: Boolean,
     modelValue: {
       type: [String, Number, Array] as PropType<
@@ -23,10 +24,6 @@ export default defineComponent({
       >,
       default: '',
     },
-    border: {
-      type: Boolean,
-      default: true,
-    },
   },
 
   emits: ['change', 'update:modelValue'],

src/contact-card/ContactCard.tsx

@@ -1,5 +1,5 @@
 import { PropType, defineComponent } from 'vue';
-import { createNamespace } from '../utils';
+import { truthProp, createNamespace } from '../utils';
 import { Cell } from '../cell';
 
 const [name, bem, t] = createNamespace('contact-card');
@@ -13,10 +13,7 @@ export default defineComponent({
     tel: String,
     name: String,
     addText: String,
-    editable: {
+    editable: truthProp,
-      type: Boolean,
-      default: true,
-    },
     type: {
       type: String as PropType<ContactCardType>,
       default: 'add',

src/contact-list/ContactList.tsx

@@ -1,7 +1,7 @@
 import { PropType, defineComponent } from 'vue';
 
 // Utils
-import { createNamespace, UnknownProp } from '../utils';
+import { createNamespace, unknownProp } from '../utils';
 
 // Components
 import { Tag } from '../tag';
@@ -26,7 +26,7 @@ export default defineComponent({
   props: {
     list: Array as PropType<ContactListItem[]>,
     addText: String,
-    modelValue: UnknownProp,
+    modelValue: unknownProp,
     defaultTagText: String,
   },
 

src/count-down/CountDown.tsx

@@ -1,7 +1,7 @@
 import { watch, computed, defineComponent } from 'vue';
 
 // Utils
-import { createNamespace } from '../utils';
+import { truthProp, createNamespace } from '../utils';
 import { parseFormat } from './utils';
 
 // Composables
@@ -14,6 +14,7 @@ export default defineComponent({
   name,
 
   props: {
+    autoStart: truthProp,
     millisecond: Boolean,
     time: {
       type: [Number, String],
@@ -23,10 +24,6 @@ export default defineComponent({
       type: String,
       default: 'HH:mm:ss',
     },
-    autoStart: {
-      type: Boolean,
-      default: true,
-    },
   },
 
   emits: ['change', 'finish'],

src/coupon-cell/CouponCell.tsx

@@ -1,7 +1,7 @@
 import { PropType, defineComponent } from 'vue';
 
 // Utils
-import { isDef, createNamespace } from '../utils';
+import { isDef, truthProp, createNamespace } from '../utils';
 
 // Components
 import { Cell } from '../cell';
@@ -38,6 +38,8 @@ export default defineComponent({
 
   props: {
     title: String,
+    border: truthProp,
+    editable: truthProp,
     coupons: {
       type: Array as PropType<CouponInfo[]>,
       default: () => [],
@@ -46,14 +48,6 @@ export default defineComponent({
       type: String,
       default: '¥',
     },
-    border: {
-      type: Boolean,
-      default: true,
-    },
-    editable: {
-      type: Boolean,
-      default: true,
-    },
     chosenCoupon: {
       type: [Number, String],
       default: -1,

src/coupon-list/CouponList.tsx

@@ -9,7 +9,7 @@ import {
 } from 'vue';
 
 // Utils
-import { createNamespace } from '../utils';
+import { truthProp, createNamespace } from '../utils';
 
 // Composables
 import { useWindowSize } from '@vant/use';
@@ -29,8 +29,11 @@ export default defineComponent({
   name,
 
   props: {
+    showCount: truthProp,
     enabledTitle: String,
     disabledTitle: String,
+    showExchangeBar: truthProp,
+    showCloseButton: truthProp,
     closeButtonText: String,
     inputPlaceholder: String,
     exchangeButtonText: String,
@@ -60,18 +63,6 @@ export default defineComponent({
       type: Number,
       default: -1,
     },
-    showExchangeBar: {
-      type: Boolean,
-      default: true,
-    },
-    showCloseButton: {
-      type: Boolean,
-      default: true,
-    },
-    showCount: {
-      type: Boolean,
-      default: true,
-    },
     currency: {
       type: String,
       default: '¥',

src/dialog/Dialog.tsx

@@ -6,8 +6,9 @@ import {
   pick,
   extend,
   addUnit,
+  truthProp,
   isFunction,
-  UnknownProp,
+  unknownProp,
   createNamespace,
 } from '../utils';
 import { BORDER_TOP, BORDER_LEFT } from '../utils/constant';
@@ -42,27 +43,21 @@ export default defineComponent({
     message: [String, Function] as PropType<DialogMessage>,
     callback: Function as PropType<(action?: DialogAction) => void>,
     allowHtml: Boolean,
-    className: UnknownProp,
+    className: unknownProp,
     beforeClose: Function as PropType<Interceptor>,
     messageAlign: String as PropType<DialogMessageAlign>,
+    closeOnPopstate: truthProp,
     showCancelButton: Boolean,
     cancelButtonText: String,
     cancelButtonColor: String,
     confirmButtonText: String,
     confirmButtonColor: String,
+    showConfirmButton: truthProp,
     closeOnClickOverlay: Boolean,
     transition: {
       type: String,
       default: 'van-dialog-bounce',
     },
-    showConfirmButton: {
-      type: Boolean,
-      default: true,
-    },
-    closeOnPopstate: {
-      type: Boolean,
-      default: true,
-    },
   }),
 
   emits: ['confirm', 'cancel', 'update:show'],

src/divider/Divider.tsx

@@ -1,5 +1,5 @@
 import { PropType, defineComponent } from 'vue';
-import { createNamespace } from '../utils';
+import { truthProp, createNamespace } from '../utils';
 
 const [name, bem] = createNamespace('divider');
 
@@ -10,10 +10,7 @@ export default defineComponent({
 
   props: {
     dashed: Boolean,
-    hairline: {
+    hairline: truthProp,
-      type: Boolean,
-      default: true,
-    },
     contentPosition: {
       type: String as PropType<DividerContentPosition>,
       default: 'center',

src/dropdown-item/DropdownItem.tsx

@@ -8,7 +8,12 @@ import {
 } from 'vue';
 
 // Utils
-import { createNamespace, getZIndexStyle, UnknownProp } from '../utils';
+import {
+  truthProp,
+  unknownProp,
+  getZIndexStyle,
+  createNamespace,
+} from '../utils';
 import {
   DROPDOWN_KEY,
   DropdownMenuProvide,
@@ -38,16 +43,13 @@ export default defineComponent({
     title: String,
     disabled: Boolean,
     teleport: [String, Object] as PropType<TeleportProps['to']>,
-    modelValue: UnknownProp,
+    lazyRender: truthProp,
-    titleClass: UnknownProp,
+    modelValue: unknownProp,
+    titleClass: unknownProp,
     options: {
       type: Array as PropType<DropdownItemOption[]>,
       default: () => [],
     },
-    lazyRender: {
-      type: Boolean,
-      default: true,
-    },
   },
 
   emits: ['open', 'opened', 'close', 'closed', 'change', 'update:modelValue'],

src/dropdown-menu/DropdownMenu.tsx

@@ -9,7 +9,7 @@ import {
 } from 'vue';
 
 // Utils
-import { isDef, ComponentInstance, createNamespace } from '../utils';
+import { isDef, truthProp, createNamespace, ComponentInstance } from '../utils';
 
 // Composables
 import {
@@ -27,12 +27,11 @@ export const DROPDOWN_KEY = Symbol(name);
 export type DropdownMenuDirection = 'up' | 'down';
 
 const props = {
+  overlay: truthProp,
   zIndex: [Number, String],
   activeColor: String,
-  overlay: {
+  closeOnClickOutside: truthProp,
-    type: Boolean,
+  closeOnClickOverlay: truthProp,
-    default: true,
-  },
   duration: {
     type: [Number, String],
     default: 0.2,
@@ -41,14 +40,6 @@ const props = {
     type: String as PropType<DropdownMenuDirection>,
     default: 'down',
   },
-  closeOnClickOutside: {
-    type: Boolean,
-    default: true,
-  },
-  closeOnClickOverlay: {
-    type: Boolean,
-    default: true,
-  },
 };
 
 export type DropdownMenuProvide = {

src/field/Field.tsx

@@ -15,7 +15,7 @@ import {
   isDef,
   extend,
   addUnit,
-  UnknownProp,
+  unknownProp,
   resetScroll,
   formatNumber,
   preventDefault,
@@ -83,7 +83,7 @@ export const fieldProps = {
     default: 'clear',
   },
   modelValue: {
-    type: [String, Number],
+    type: [Number, String],
     default: '',
   },
   clearTrigger: {
@@ -105,7 +105,7 @@ export default defineComponent({
     rules: Array as PropType<FieldRule[]>,
     autosize: [Boolean, Object] as PropType<boolean | FieldAutosizeConfig>,
     labelWidth: [Number, String],
-    labelClass: UnknownProp,
+    labelClass: unknownProp,
     labelAlign: String as PropType<FieldTextAlign>,
     autocomplete: String,
     showWordLimit: Boolean,

src/form/Form.tsx

@@ -1,7 +1,7 @@
 import { PropType, defineComponent } from 'vue';
 
 // Utils
-import { createNamespace, ComponentInstance } from '../utils';
+import { truthProp, createNamespace, ComponentInstance } from '../utils';
 
 // Composables
 import { useChildren } from '@vant/use';
@@ -30,19 +30,13 @@ export default defineComponent({
     inputAlign: String as PropType<FieldTextAlign>,
     scrollToError: Boolean,
     validateFirst: Boolean,
+    submitOnEnter: truthProp,
+    showErrorMessage: truthProp,
     errorMessageAlign: String as PropType<FieldTextAlign>,
-    submitOnEnter: {
-      type: Boolean,
-      default: true,
-    },
     validateTrigger: {
       type: String as PropType<FieldValidateTrigger>,
       default: 'onBlur',
     },
-    showErrorMessage: {
-      type: Boolean,
-      default: true,
-    },
   },
 
   emits: ['submit', 'failed'],

src/grid/Grid.tsx

@@ -1,5 +1,5 @@
 import { PropType, defineComponent, ExtractPropTypes } from 'vue';
-import { createNamespace, addUnit } from '../utils';
+import { createNamespace, addUnit, truthProp } from '../utils';
 import { BORDER_TOP } from '../utils/constant';
 import { useChildren } from '@vant/use';
 
@@ -11,6 +11,8 @@ export type GridDirection = 'horizontal' | 'vertical';
 
 const props = {
   square: Boolean,
+  center: truthProp,
+  border: truthProp,
   gutter: [Number, String],
   iconSize: [Number, String],
   direction: String as PropType<GridDirection>,
@@ -19,14 +21,6 @@ const props = {
     type: [Number, String],
     default: 4,
   },
-  center: {
-    type: Boolean,
-    default: true,
-  },
-  border: {
-    type: Boolean,
-    default: true,
-  },
 };
 
 export type GridProvide = {

src/image-preview/ImagePreview.tsx

@@ -12,7 +12,8 @@ import {
 // Utils
 import {
   pick,
-  UnknownProp,
+  truthProp,
+  unknownProp,
   createNamespace,
   ComponentInstance,
 } from '../utils';
@@ -40,24 +41,20 @@ export default defineComponent({
 
   props: {
     show: Boolean,
+    loop: truthProp,
+    overlay: truthProp,
     closeable: Boolean,
+    showIndex: truthProp,
+    className: unknownProp,
     transition: String,
-    className: UnknownProp,
     beforeClose: Function as PropType<Interceptor>,
     overlayStyle: Object as PropType<CSSProperties>,
     showIndicators: Boolean,
+    closeOnPopstate: truthProp,
     images: {
       type: Array as PropType<string[]>,
       default: () => [],
     },
-    loop: {
-      type: Boolean,
-      default: true,
-    },
-    overlay: {
-      type: Boolean,
-      default: true,
-    },
     minZoom: {
       type: [Number, String],
       default: 1 / 3,
@@ -66,10 +63,6 @@ export default defineComponent({
       type: [Number, String],
       default: 3,
     },
-    showIndex: {
-      type: Boolean,
-      default: true,
-    },
     swipeDuration: {
       type: [Number, String],
       default: 300,
@@ -82,10 +75,6 @@ export default defineComponent({
       type: String,
       default: 'clear',
     },
-    closeOnPopstate: {
-      type: Boolean,
-      default: true,
-    },
     closeIconPosition: {
       type: String as PropType<PopupCloseIconPosition>,
       default: 'top-right',

src/image/Image.tsx

@@ -14,6 +14,7 @@ import {
   isDef,
   addUnit,
   inBrowser,
+  truthProp,
   createNamespace,
   ComponentInstance,
 } from '../utils';
@@ -38,15 +39,9 @@ export default defineComponent({
     radius: [Number, String],
     lazyLoad: Boolean,
     iconSize: [Number, String],
+    showError: truthProp,
     iconPrefix: String,
-    showError: {
+    showLoading: truthProp,
-      type: Boolean,
-      default: true,
-    },
-    showLoading: {
-      type: Boolean,
-      default: true,
-    },
     errorIcon: {
       type: String,
       default: 'photo-fail',

src/index-bar/IndexBar.tsx

@@ -14,6 +14,7 @@ import {
 import {
   isDef,
   isHidden,
+  truthProp,
   getScrollTop,
   preventDefault,
   createNamespace,
@@ -46,12 +47,9 @@ const [name, bem] = createNamespace('index-bar');
 export const INDEX_BAR_KEY = Symbol(name);
 
 const props = {
+  sticky: truthProp,
   zIndex: [Number, String],
   highlightColor: String,
-  sticky: {
-    type: Boolean,
-    default: true,
-  },
   stickyOffsetTop: {
     type: Number,
     default: 0,

src/list/List.tsx

@@ -9,7 +9,7 @@ import {
 } from 'vue';
 
 // Utils
-import { isHidden, createNamespace } from '../utils';
+import { isHidden, truthProp, createNamespace } from '../utils';
 
 // Composables
 import { useRect, useScrollParent, useEventListener } from '@vant/use';
@@ -30,6 +30,7 @@ export default defineComponent({
     errorText: String,
     loadingText: String,
     finishedText: String,
+    immediateCheck: truthProp,
     offset: {
       type: [Number, String],
       default: 300,
@@ -38,10 +39,6 @@ export default defineComponent({
       type: String as PropType<'up' | 'down'>,
       default: 'down',
     },
-    immediateCheck: {
-      type: Boolean,
-      default: true,
-    },
   },
 
   emits: ['load', 'update:error', 'update:loading'],

src/nav-bar/NavBar.tsx

@@ -1,7 +1,7 @@
 import { ref, CSSProperties, defineComponent } from 'vue';
 
 // Utils
-import { createNamespace, getZIndexStyle } from '../utils';
+import { truthProp, createNamespace, getZIndexStyle } from '../utils';
 import { BORDER_BOTTOM } from '../utils/constant';
 
 // Composables
@@ -19,15 +19,12 @@ export default defineComponent({
     title: String,
     fixed: Boolean,
     zIndex: [Number, String],
+    border: truthProp,
     leftText: String,
     rightText: String,
     leftArrow: Boolean,
     placeholder: Boolean,
     safeAreaInsetTop: Boolean,
-    border: {
-      type: Boolean,
-      default: true,
-    },
   },
 
   emits: ['click-left', 'click-right'],

src/notify/Notify.tsx

@@ -1,5 +1,5 @@
 import { PropType, defineComponent } from 'vue';
-import { createNamespace, extend, UnknownProp } from '../utils';
+import { createNamespace, extend, unknownProp } from '../utils';
 import { Popup } from '../popup';
 import { popupSharedProps } from '../popup/shared';
 
@@ -13,7 +13,7 @@ export default defineComponent({
   props: extend({}, popupSharedProps, {
     color: String,
     message: [Number, String],
-    className: UnknownProp,
+    className: unknownProp,
     background: String,
     lockScroll: Boolean,
     type: {

src/number-keyboard/NumberKeyboard.tsx

@@ -9,8 +9,19 @@ import {
   TeleportProps,
   defineComponent,
 } from 'vue';
-import { createNamespace, getZIndexStyle, stopPropagation } from '../utils';
+
+// Utils
+import {
+  truthProp,
+  getZIndexStyle,
+  stopPropagation,
+  createNamespace,
+} from '../utils';
+
+// Composables
 import { useClickAway } from '@vant/use';
+
+// Components
 import NumberKeyboardKey, { KeyType } from './NumberKeyboardKey';
 
 const [name, bem] = createNamespace('number-keyboard');
@@ -32,10 +43,15 @@ export default defineComponent({
     title: String,
     zIndex: [Number, String],
     teleport: [String, Object] as PropType<TeleportProps['to']>,
+    transition: truthProp,
+    blurOnClose: truthProp,
+    showDeleteKey: truthProp,
     randomKeyOrder: Boolean,
     closeButtonText: String,
     deleteButtonText: String,
     closeButtonLoading: Boolean,
+    hideOnClickOutside: truthProp,
+    safeAreaInsetBottom: truthProp,
     theme: {
       type: String as PropType<NumberKeyboardTheme>,
       default: 'default',
@@ -52,26 +68,6 @@ export default defineComponent({
       type: [Number, String],
       default: Number.MAX_VALUE,
     },
-    transition: {
-      type: Boolean,
-      default: true,
-    },
-    blurOnClose: {
-      type: Boolean,
-      default: true,
-    },
-    showDeleteKey: {
-      type: Boolean,
-      default: true,
-    },
-    hideOnClickOutside: {
-      type: Boolean,
-      default: true,
-    },
-    safeAreaInsetBottom: {
-      type: Boolean,
-      default: true,
-    },
   },
 
   emits: [

src/overlay/Overlay.tsx

@@ -3,7 +3,8 @@ import {
   noop,
   isDef,
   extend,
-  UnknownProp,
+  truthProp,
+  unknownProp,
   preventDefault,
   createNamespace,
   getZIndexStyle,
@@ -19,12 +20,9 @@ export default defineComponent({
     show: Boolean,
     zIndex: [Number, String],
     duration: [Number, String],
-    className: UnknownProp,
+    className: unknownProp,
+    lockScroll: truthProp,
     customStyle: Object as PropType<CSSProperties>,
-    lockScroll: {
-      type: Boolean,
-      default: true,
-    },
   },
 
   setup(props, { slots }) {

src/password-input/PasswordInput.tsx

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue';
-import { createNamespace, addUnit } from '../utils';
+import { createNamespace, addUnit, truthProp } from '../utils';
 import { BORDER_LEFT, BORDER_SURROUND } from '../utils/constant';
 
 const [name, bem] = createNamespace('password-input');
@@ -9,13 +9,10 @@ export default defineComponent({
 
   props: {
     info: String,
+    mask: truthProp,
     gutter: [Number, String],
     focused: Boolean,
     errorInfo: String,
-    mask: {
-      type: Boolean,
-      default: true,
-    },
     value: {
       type: String,
       default: '',

src/picker/Picker.tsx

@@ -4,6 +4,7 @@ import { ref, watch, computed, PropType, defineComponent } from 'vue';
 import {
   extend,
   unitToPx,
+  truthProp,
   preventDefault,
   createNamespace,
   ComponentInstance,
@@ -46,16 +47,13 @@ export const pickerProps = {
   loading: Boolean,
   readonly: Boolean,
   allowHtml: Boolean,
+  showToolbar: truthProp,
   cancelButtonText: String,
   confirmButtonText: String,
   itemHeight: {
     type: [Number, String],
     default: 44,
   },
-  showToolbar: {
-    type: Boolean,
-    default: true,
-  },
   visibleItemCount: {
     type: [Number, String],
     default: 6,

src/picker/PickerColumn.tsx

@@ -6,7 +6,7 @@ import { deepClone } from '../utils/deep-clone';
 import {
   range,
   isObject,
-  UnknownProp,
+  unknownProp,
   preventDefault,
   createNamespace,
 } from '../utils';
@@ -66,7 +66,7 @@ export default defineComponent({
   props: {
     readonly: Boolean,
     allowHtml: Boolean,
-    className: UnknownProp,
+    className: unknownProp,
     textKey: {
       type: String,
       required: true,

src/popover/Popover.tsx

@@ -15,7 +15,8 @@ import { Instance, createPopper, offsetModifier } from '@vant/popperjs';
 import {
   pick,
   extend,
-  UnknownProp,
+  truthProp,
+  unknownProp,
   createNamespace,
   ComponentInstance,
 } from '../utils';
@@ -71,8 +72,11 @@ export default defineComponent({
     show: Boolean,
     overlay: Boolean,
     duration: [Number, String],
-    overlayClass: UnknownProp,
+    overlayClass: unknownProp,
     overlayStyle: Object as PropType<CSSProperties>,
+    closeOnClickAction: truthProp,
+    closeOnClickOverlay: truthProp,
+    closeOnClickOutside: truthProp,
     offset: {
       type: (Array as unknown) as PropType<[number, number]>,
       default: () => [0, 8],
@@ -97,18 +101,6 @@ export default defineComponent({
       type: [String, Object] as PropType<TeleportProps['to']>,
       default: 'body',
     },
-    closeOnClickAction: {
-      type: Boolean,
-      default: true,
-    },
-    closeOnClickOverlay: {
-      type: Boolean,
-      default: true,
-    },
-    closeOnClickOutside: {
-      type: Boolean,
-      default: true,
-    },
   },
 
   emits: ['select', 'touchstart', 'update:show'],

src/popup/shared.ts

@@ -1,41 +1,29 @@
 import { PropType, CSSProperties, TeleportProps } from 'vue';
-import { UnknownProp } from '../utils';
+import { truthProp, unknownProp } from '../utils';
 
 export const popupSharedProps = {
   // whether to show popup
   show: Boolean,
   // z-index
   zIndex: [Number, String],
+  // whether to show overlay
+  overlay: truthProp,
   // transition duration
   duration: [Number, String],
   // teleport
   teleport: [String, Object] as PropType<TeleportProps['to']>,
+  // prevent body scroll
+  lockScroll: truthProp,
+  // whether to lazy render
+  lazyRender: truthProp,
   // overlay custom style
   overlayStyle: Object as PropType<CSSProperties>,
   // overlay custom class name
-  overlayClass: UnknownProp,
+  overlayClass: unknownProp,
   // Initial rendering animation
   transitionAppear: Boolean,
-  // whether to show overlay
-  overlay: {
-    type: Boolean,
-    default: true,
-  },
-  // prevent body scroll
-  lockScroll: {
-    type: Boolean,
-    default: true,
-  },
-  // whether to lazy render
-  lazyRender: {
-    type: Boolean,
-    default: true,
-  },
   // whether to close popup when overlay is clicked
-  closeOnClickOverlay: {
+  closeOnClickOverlay: truthProp,
-    type: Boolean,
-    default: true,
-  },
 };
 
 export type PopupSharedPropKeys = Array<keyof typeof popupSharedProps>;

src/progress/Progress.tsx

@@ -7,7 +7,7 @@ import {
   onMounted,
   defineComponent,
 } from 'vue';
-import { createNamespace, addUnit } from '../utils';
+import { truthProp, createNamespace, addUnit } from '../utils';
 import { useExpose } from '../composables/use-expose';
 
 const [name, bem] = createNamespace('progress');
@@ -20,6 +20,7 @@ export default defineComponent({
     inactive: Boolean,
     pivotText: String,
     textColor: String,
+    showPivot: truthProp,
     pivotColor: String,
     trackColor: String,
     strokeWidth: [Number, String],
@@ -28,10 +29,6 @@ export default defineComponent({
       required: true,
       validator: (value: number | string) => value >= 0 && value <= 100,
     },
-    showPivot: {
-      type: Boolean,
-      default: true,
-    },
   },
 
   setup(props) {

src/radio-group/RadioGroup.tsx

@@ -1,5 +1,5 @@
 import { watch, defineComponent, ExtractPropTypes } from 'vue';
-import { UnknownProp, createNamespace } from '../utils';
+import { unknownProp, createNamespace } from '../utils';
 import { useChildren } from '@vant/use';
 import { useLinkField } from '../composables/use-link-field';
 import { CheckerParent } from '../checkbox/Checker';
@@ -12,7 +12,7 @@ const props = {
   disabled: Boolean,
   iconSize: [Number, String],
   direction: String,
-  modelValue: UnknownProp,
+  modelValue: unknownProp,
   checkedColor: String,
 };
 

src/rate/Rate.tsx

@@ -1,7 +1,7 @@
 import { computed, defineComponent } from 'vue';
 
 // Utils
-import { addUnit, createNamespace, preventDefault } from '../utils';
+import { addUnit, truthProp, createNamespace, preventDefault } from '../utils';
 
 // Composables
 import { useRefs } from '../composables/use-refs';
@@ -40,6 +40,7 @@ export default defineComponent({
     disabled: Boolean,
     allowHalf: Boolean,
     voidColor: String,
+    touchable: truthProp,
     iconPrefix: String,
     disabledColor: String,
     modelValue: {
@@ -58,10 +59,6 @@ export default defineComponent({
       type: [Number, String],
       default: 5,
     },
-    touchable: {
-      type: Boolean,
-      default: true,
-    },
   },
 
   emits: ['change', 'update:modelValue'],

src/row/Row.tsx

@@ -1,5 +1,5 @@
 import { computed, PropType, ComputedRef, defineComponent } from 'vue';
-import { createNamespace, ComponentInstance } from '../utils';
+import { truthProp, createNamespace, ComponentInstance } from '../utils';
 import { useChildren } from '@vant/use';
 
 const [name, bem] = createNamespace('row');
@@ -25,16 +25,13 @@ export default defineComponent({
   name,
 
   props: {
+    wrap: truthProp,
     align: String as PropType<RowAlign>,
     justify: String as PropType<RowJustify>,
     tag: {
       type: String as PropType<keyof HTMLElementTagNameMap>,
       default: 'div',
     },
-    wrap: {
-      type: Boolean,
-      default: true,
-    },
     gutter: {
       type: [Number, String],
       default: 0,

src/search/Search.tsx

@@ -4,6 +4,7 @@ import { ref, PropType, defineComponent } from 'vue';
 import {
   pick,
   extend,
+  truthProp,
   createNamespace,
   preventDefault,
   ComponentInstance,
@@ -25,6 +26,7 @@ export default defineComponent({
 
   props: extend({}, fieldProps, {
     label: String,
+    clearable: truthProp,
     actionText: String,
     background: String,
     showAction: Boolean,
@@ -32,10 +34,6 @@ export default defineComponent({
       type: String as PropType<SearchShape>,
       default: 'square',
     },
-    clearable: {
-      type: Boolean,
-      default: true,
-    },
     leftIcon: {
       type: String,
       default: 'search',

src/share-sheet/ShareSheet.tsx

@@ -1,7 +1,7 @@
 import { PropType, defineComponent } from 'vue';
 
 // Utils
-import { createNamespace, extend, pick } from '../utils';
+import { truthProp, createNamespace, extend, pick } from '../utils';
 import { popupSharedProps, popupSharedPropKeys } from '../popup/shared';
 
 // Components
@@ -49,18 +49,12 @@ export default defineComponent({
     title: String,
     cancelText: String,
     description: String,
+    closeOnPopstate: truthProp,
+    safeAreaInsetBottom: truthProp,
     options: {
       type: Array as PropType<ShareSheetOptions>,
       default: () => [],
     },
-    closeOnPopstate: {
-      type: Boolean,
-      default: true,
-    },
-    safeAreaInsetBottom: {
-      type: Boolean,
-      default: true,
-    },
   }),
 
   emits: ['cancel', 'select', 'update:show'],

src/skeleton/Skeleton.tsx

@@ -1,5 +1,5 @@
 import { PropType, defineComponent } from 'vue';
-import { createNamespace, addUnit, getSizeStyle } from '../utils';
+import { addUnit, truthProp, getSizeStyle, createNamespace } from '../utils';
 
 const [name, bem] = createNamespace('skeleton');
 const DEFAULT_ROW_WIDTH = '100%';
@@ -12,20 +12,14 @@ export default defineComponent({
     title: Boolean,
     round: Boolean,
     avatar: Boolean,
+    loading: truthProp,
+    animate: truthProp,
     avatarSize: [Number, String],
     titleWidth: [Number, String],
     row: {
       type: [Number, String],
       default: 0,
     },
-    loading: {
-      type: Boolean,
-      default: true,
-    },
-    animate: {
-      type: Boolean,
-      default: true,
-    },
     avatarShape: {
       type: String as PropType<'square' | 'round'>,
       default: 'round',

src/stepper/Stepper.tsx

@@ -4,6 +4,7 @@ import { ref, watch, computed, PropType, defineComponent } from 'vue';
 import {
   isDef,
   addUnit,
+  truthProp,
   resetScroll,
   formatNumber,
   getSizeStyle,
@@ -39,6 +40,10 @@ export default defineComponent({
     theme: String as PropType<StepperTheme>,
     integer: Boolean,
     disabled: Boolean,
+    showPlus: truthProp,
+    showMinus: truthProp,
+    showInput: truthProp,
+    longPress: truthProp,
     allowEmpty: Boolean,
     modelValue: [Number, String],
     inputWidth: [Number, String],
@@ -69,22 +74,6 @@ export default defineComponent({
       type: [Number, String],
       default: 1,
     },
-    showPlus: {
-      type: Boolean,
-      default: true,
-    },
-    showMinus: {
-      type: Boolean,
-      default: true,
-    },
-    showInput: {
-      type: Boolean,
-      default: true,
-    },
-    longPress: {
-      type: Boolean,
-      default: true,
-    },
   },
 
   emits: [

src/submit-bar/SubmitBar.tsx

@@ -1,5 +1,5 @@
 import { PropType, CSSProperties, defineComponent } from 'vue';
-import { createNamespace } from '../utils';
+import { truthProp, createNamespace } from '../utils';
 
 // Components
 import { Icon } from '../icon';
@@ -21,10 +21,7 @@ export default defineComponent({
     buttonText: String,
     buttonColor: String,
     suffixLabel: String,
-    safeAreaInsetBottom: {
+    safeAreaInsetBottom: truthProp,
-      type: Boolean,
-      default: true,
-    },
     decimalLength: {
       type: [Number, String],
       default: 2,

src/swipe/Swipe.tsx

@@ -17,6 +17,7 @@ import {
 import {
   range,
   isHidden,
+  truthProp,
   preventDefault,
   createNamespace,
   ComponentInstance,
@@ -37,15 +38,15 @@ const [name, bem] = createNamespace('swipe');
 export const SWIPE_KEY = Symbol(name);
 
 const props = {
+  loop: truthProp,
   width: [Number, String],
   height: [Number, String],
   vertical: Boolean,
+  touchable: truthProp,
   lazyRender: Boolean,
   indicatorColor: String,
-  loop: {
+  showIndicators: truthProp,
-    type: Boolean,
+  stopPropagation: truthProp,
-    default: true,
-  },
   autoplay: {
     type: [Number, String],
     default: 0,
@@ -54,22 +55,10 @@ const props = {
     type: [Number, String],
     default: 500,
   },
-  touchable: {
-    type: Boolean,
-    default: true,
-  },
   initialSwipe: {
     type: [Number, String],
     default: 0,
   },
-  showIndicators: {
-    type: Boolean,
-    default: true,
-  },
-  stopPropagation: {
-    type: Boolean,
-    default: true,
-  },
 };
 
 export type SwipeToOptions = {

src/switch/Switch.tsx

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue';
-import { createNamespace, addUnit, UnknownProp } from '../utils';
+import { createNamespace, addUnit, unknownProp } from '../utils';
 import { useLinkField } from '../composables/use-link-field';
 import { Loading } from '../loading';
 
@@ -12,15 +12,15 @@ export default defineComponent({
     size: [Number, String],
     loading: Boolean,
     disabled: Boolean,
-    modelValue: UnknownProp,
+    modelValue: unknownProp,
     activeColor: String,
     inactiveColor: String,
     activeValue: {
-      type: UnknownProp,
+      type: unknownProp,
       default: true as unknown,
     },
     inactiveValue: {
-      type: UnknownProp,
+      type: unknownProp,
       default: false as unknown,
     },
   },

src/tab/Tab.tsx

@@ -8,7 +8,7 @@ import {
 } from 'vue';
 
 // Utils
-import { createNamespace, extend, UnknownProp } from '../utils';
+import { createNamespace, extend, unknownProp } from '../utils';
 import { TABS_KEY, TabsProvide } from '../tabs/Tabs';
 
 // Composables
@@ -29,7 +29,7 @@ export default defineComponent({
     badge: [Number, String],
     title: String,
     disabled: Boolean,
-    titleClass: UnknownProp,
+    titleClass: unknownProp,
     titleStyle: [String, Object] as PropType<string | CSSProperties>,
   }),
 

src/tabbar/Tabbar.tsx

@@ -1,7 +1,7 @@
 import { ref, PropType, defineComponent, ExtractPropTypes } from 'vue';
 
 // Utils
-import { createNamespace, getZIndexStyle } from '../utils';
+import { truthProp, createNamespace, getZIndexStyle } from '../utils';
 import { BORDER_TOP_BOTTOM } from '../utils/constant';
 import { callInterceptor, Interceptor } from '../utils/interceptor';
 
@@ -15,6 +15,8 @@ export const TABBAR_KEY = Symbol(name);
 
 const props = {
   route: Boolean,
+  fixed: truthProp,
+  border: truthProp,
   zIndex: [Number, String],
   placeholder: Boolean,
   activeColor: String,
@@ -24,14 +26,6 @@ const props = {
     type: [Number, String],
     default: 0,
   },
-  border: {
-    type: Boolean,
-    default: true,
-  },
-  fixed: {
-    type: Boolean,
-    default: true,
-  },
   safeAreaInsetBottom: {
     type: Boolean as PropType<boolean | null>,
     default: null,

src/tabs/Tabs.tsx

@@ -9,8 +9,8 @@ import {
   onActivated,
   CSSProperties,
   defineComponent,
-  ComponentPublicInstance,
   ExtractPropTypes,
+  ComponentPublicInstance,
 } from 'vue';
 
 // Utils
@@ -19,6 +19,7 @@ import {
   addUnit,
   isHidden,
   unitToPx,
+  truthProp,
   getVisibleTop,
   getElementTop,
   createNamespace,
@@ -58,9 +59,11 @@ const props = {
   border: Boolean,
   sticky: Boolean,
   animated: Boolean,
+  ellipsis: truthProp,
   swipeable: Boolean,
   scrollspy: Boolean,
   background: String,
+  lazyRender: truthProp,
   lineWidth: [Number, String],
   lineHeight: [Number, String],
   beforeChange: Function as PropType<Interceptor>,
@@ -74,10 +77,6 @@ const props = {
     type: [Number, String],
     default: 0,
   },
-  ellipsis: {
-    type: Boolean,
-    default: true,
-  },
   duration: {
     type: [Number, String],
     default: 0.3,
@@ -86,10 +85,6 @@ const props = {
     type: [Number, String],
     default: 0,
   },
-  lazyRender: {
-    type: Boolean,
-    default: true,
-  },
   swipeThreshold: {
     type: [Number, String],
     default: 5,

src/tag/Tag.tsx

@@ -1,5 +1,5 @@
 import { CSSProperties, PropType, Transition, defineComponent } from 'vue';
-import { createNamespace } from '../utils';
+import { truthProp, createNamespace } from '../utils';
 import { Icon } from '../icon';
 
 const [name, bem] = createNamespace('tag');
@@ -12,6 +12,7 @@ export default defineComponent({
   props: {
     size: String,
     mark: Boolean,
+    show: truthProp,
     color: String,
     plain: Boolean,
     round: Boolean,
@@ -21,10 +22,6 @@ export default defineComponent({
       type: String as PropType<TagType>,
       default: 'default',
     },
-    show: {
-      type: Boolean,
-      default: true,
-    },
   },
 
   emits: ['close'],

src/toast/Toast.tsx

@@ -8,7 +8,7 @@ import {
 } from 'vue';
 
 // Utils
-import { createNamespace, isDef, UnknownProp } from '../utils';
+import { createNamespace, isDef, unknownProp } from '../utils';
 import { lockClick } from './lock-click';
 
 // Components
@@ -30,11 +30,11 @@ export default defineComponent({
     overlay: Boolean,
     message: [Number, String],
     iconSize: [Number, String],
-    className: UnknownProp,
+    className: unknownProp,
     iconPrefix: String,
     loadingType: String as PropType<LoadingType>,
     forbidClick: Boolean,
-    overlayClass: UnknownProp,
+    overlayClass: unknownProp,
     overlayStyle: Object as PropType<CSSProperties>,
     closeOnClick: Boolean,
     closeOnClickOverlay: Boolean,

src/uploader/Uploader.tsx

@@ -5,6 +5,7 @@ import {
   pick,
   extend,
   isPromise,
+  truthProp,
   getSizeStyle,
   ComponentInstance,
 } from '../utils';
@@ -60,11 +61,15 @@ export default defineComponent({
     disabled: Boolean,
     lazyLoad: Boolean,
     uploadText: String,
+    deletable: truthProp,
     afterRead: Function as PropType<UploaderAfterRead>,
+    showUpload: truthProp,
     beforeRead: Function as PropType<UploaderBeforeRead>,
     beforeDelete: Function as PropType<Interceptor>,
     previewSize: [Number, String],
+    previewImage: truthProp,
     previewOptions: Object as PropType<ImagePreviewOptions>,
+    previewFullImage: truthProp,
     name: {
       type: [Number, String],
       default: '',
@@ -85,22 +90,6 @@ export default defineComponent({
       type: [Number, String],
       default: Number.MAX_VALUE,
     },
-    deletable: {
-      type: Boolean,
-      default: true,
-    },
-    showUpload: {
-      type: Boolean,
-      default: true,
-    },
-    previewImage: {
-      type: Boolean,
-      default: true,
-    },
-    previewFullImage: {
-      type: Boolean,
-      default: true,
-    },
     imageFit: {
       type: String as PropType<ImageFit>,
       default: 'cover',

src/uploader/UploaderPreviewItem.tsx

@@ -12,7 +12,7 @@ import { Loading } from '../loading';
 
 export default defineComponent({
   props: {
-    name: [String, Number],
+    name: [Number, String],
     index: Number,
     imageFit: String as PropType<ImageFit>,
     lazyLoad: Boolean,

src/utils/base.ts

@@ -6,8 +6,12 @@ export const extend = Object.assign;
 
 export const inBrowser = typeof window !== 'undefined';
 
-// unknown type for Vue prop
+// PropTypes
-export const UnknownProp = (null as unknown) as PropType<unknown>;
+export const unknownProp = (null as unknown) as PropType<unknown>;
+export const truthProp = {
+  type: Boolean,
+  default: true as const,
+};
 
 // eslint-disable-next-line
 export type ComponentInstance = ComponentPublicInstance<{}, any>;