From 00bb1d2f1ffc88ec6098a0a293755601a661e3fb Mon Sep 17 00:00:00 2001 From: neverland Date: Fri, 8 Oct 2021 15:41:50 +0800 Subject: [PATCH] perf: add more prop type utils (#9641) * perf: add more prop type utils * fix: slider type * chore: uod --- .../vant/src/address-edit/AddressEdit.tsx | 6 +-- .../vant/src/address-list/AddressList.tsx | 19 +++++---- .../vant/src/address-list/AddressListItem.tsx | 7 +--- packages/vant/src/area/Area.tsx | 13 ++++--- packages/vant/src/calendar/Calendar.tsx | 5 +-- packages/vant/src/calendar/CalendarDay.tsx | 12 ++---- packages/vant/src/calendar/CalendarMonth.tsx | 16 ++------ packages/vant/src/cascader/Cascader.tsx | 8 ++-- .../vant/src/checkbox-group/CheckboxGroup.tsx | 9 ++--- packages/vant/src/checkbox/Checker.tsx | 6 +-- packages/vant/src/circle/Circle.tsx | 6 +-- packages/vant/src/coupon-cell/CouponCell.tsx | 8 ++-- packages/vant/src/coupon-list/CouponList.tsx | 34 ++++++---------- packages/vant/src/coupon/Coupon.tsx | 12 +++--- .../vant/src/dropdown-item/DropdownItem.tsx | 6 +-- .../vant/src/image-preview/ImagePreview.tsx | 6 +-- .../src/image-preview/ImagePreviewItem.tsx | 28 ++++++------- packages/vant/src/index-bar/IndexBar.tsx | 6 +-- packages/vant/src/pagination/Pagination.tsx | 6 +-- packages/vant/src/picker/Picker.tsx | 8 ++-- packages/vant/src/picker/PickerColumn.tsx | 35 +++++------------ packages/vant/src/picker/types.ts | 4 +- packages/vant/src/popover/Popover.tsx | 11 ++---- packages/vant/src/rate/Rate.tsx | 6 +-- packages/vant/src/share-sheet/ShareSheet.tsx | 15 ++++--- packages/vant/src/slider/Slider.tsx | 24 ++++++------ packages/vant/src/tabs/TabsContent.tsx | 17 ++------ packages/vant/src/toast/Toast.tsx | 6 +-- packages/vant/src/tree-select/TreeSelect.tsx | 6 +-- packages/vant/src/uploader/Uploader.tsx | 6 +-- .../vant/src/uploader/UploaderPreviewItem.tsx | 6 +-- packages/vant/src/utils/basic.ts | 19 +-------- packages/vant/src/utils/index.ts | 1 + packages/vant/src/utils/props.ts | 39 +++++++++++++++++++ 34 files changed, 174 insertions(+), 242 deletions(-) create mode 100644 packages/vant/src/utils/props.ts diff --git a/packages/vant/src/address-edit/AddressEdit.tsx b/packages/vant/src/address-edit/AddressEdit.tsx index 27e6a3815..501f32d11 100644 --- a/packages/vant/src/address-edit/AddressEdit.tsx +++ b/packages/vant/src/address-edit/AddressEdit.tsx @@ -16,6 +16,7 @@ import { isMobile, truthProp, numericProp, + makeArrayProp, makeNumericProp, createNamespace, } from '../utils'; @@ -75,6 +76,7 @@ const props = { showSearchResult: Boolean, detailRows: makeNumericProp(1), detailMaxlength: makeNumericProp(200), + areaColumnsPlaceholder: makeArrayProp(), addressInfo: { type: Object as PropType>, default: () => extend({}, DEFAULT_DATA), @@ -87,10 +89,6 @@ const props = { type: Function as PropType<(val: string) => boolean>, default: isPostal, }, - areaColumnsPlaceholder: { - type: Array as PropType, - default: () => [], - }, }; export type AddressEditProps = ExtractPropTypes; diff --git a/packages/vant/src/address-list/AddressList.tsx b/packages/vant/src/address-list/AddressList.tsx index 427854151..907e63c5d 100644 --- a/packages/vant/src/address-list/AddressList.tsx +++ b/packages/vant/src/address-list/AddressList.tsx @@ -1,7 +1,12 @@ -import { PropType, defineComponent } from 'vue'; +import { defineComponent } from 'vue'; // Utils -import { truthProp, numericProp, createNamespace } from '../utils'; +import { + truthProp, + numericProp, + makeArrayProp, + createNamespace, +} from '../utils'; // Components import { Button } from '../button'; @@ -14,19 +19,13 @@ export default defineComponent({ name, props: { + list: makeArrayProp(), modelValue: numericProp, switchable: truthProp, disabledText: String, + disabledList: makeArrayProp(), addButtonText: String, defaultTagText: String, - list: { - type: Array as PropType, - default: () => [], - }, - disabledList: { - type: Array as PropType, - default: () => [], - }, }, emits: [ diff --git a/packages/vant/src/address-list/AddressListItem.tsx b/packages/vant/src/address-list/AddressListItem.tsx index b5ef2d207..44ab0bc4a 100644 --- a/packages/vant/src/address-list/AddressListItem.tsx +++ b/packages/vant/src/address-list/AddressListItem.tsx @@ -1,7 +1,7 @@ import { PropType, defineComponent } from 'vue'; // Utils -import { createNamespace, extend } from '../utils'; +import { createNamespace, extend, makeRequiredProp } from '../utils'; // Components import { Tag } from '../tag'; @@ -23,13 +23,10 @@ export default defineComponent({ name, props: { + address: makeRequiredProp>(Object), disabled: Boolean, switchable: Boolean, defaultTagText: String, - address: { - type: Object as PropType, - required: true, - }, }, emits: ['edit', 'click', 'select'], diff --git a/packages/vant/src/area/Area.tsx b/packages/vant/src/area/Area.tsx index bb1f2ec29..306ad76bd 100644 --- a/packages/vant/src/area/Area.tsx +++ b/packages/vant/src/area/Area.tsx @@ -12,7 +12,13 @@ import { // Utils import { deepClone } from '../utils/deep-clone'; -import { pick, createNamespace, extend, makeNumericProp } from '../utils'; +import { + pick, + extend, + makeArrayProp, + makeNumericProp, + createNamespace, +} from '../utils'; import { pickerProps } from '../picker/Picker'; // Composables @@ -51,6 +57,7 @@ const isOverseaCode = (code: string) => code[0] === '9'; const props = extend({}, pickerProps, { value: String, columnsNum: makeNumericProp(3), + columnsPlaceholder: makeArrayProp(), areaList: { type: Object as PropType, default: () => ({}), @@ -59,10 +66,6 @@ const props = extend({}, pickerProps, { type: Function as PropType<(code: string) => boolean>, default: isOverseaCode, }, - columnsPlaceholder: { - type: Array as PropType, - default: () => [], - }, }); export type AreaProps = ExtractPropTypes; diff --git a/packages/vant/src/calendar/Calendar.tsx b/packages/vant/src/calendar/Calendar.tsx index 846f7b25e..25a24c888 100644 --- a/packages/vant/src/calendar/Calendar.tsx +++ b/packages/vant/src/calendar/Calendar.tsx @@ -76,6 +76,7 @@ const props = { allowSameDay: Boolean, showSubtitle: truthProp, closeOnPopstate: truthProp, + showRangePrompt: truthProp, confirmDisabledText: String, closeOnClickOverlay: truthProp, safeAreaInsetBottom: truthProp, @@ -97,10 +98,6 @@ const props = { default: 0, validator: (val: number) => val >= 0 && val <= 6, }, - showRangePrompt: { - type: Boolean, - default: true, - }, }; export type CalendarProps = ExtractPropTypes; diff --git a/packages/vant/src/calendar/CalendarDay.tsx b/packages/vant/src/calendar/CalendarDay.tsx index bb327c32f..b13edea06 100644 --- a/packages/vant/src/calendar/CalendarDay.tsx +++ b/packages/vant/src/calendar/CalendarDay.tsx @@ -1,5 +1,5 @@ import { computed, CSSProperties, PropType, defineComponent } from 'vue'; -import { createNamespace } from '../utils'; +import { makeNumberProp, createNamespace, makeRequiredProp } from '../utils'; import { bem } from './utils'; import type { CalendarDayItem } from './types'; @@ -9,17 +9,11 @@ export default defineComponent({ name, props: { + item: makeRequiredProp>(Object), color: String, index: Number, + offset: makeNumberProp(0), rowHeight: String, - offset: { - type: Number, - default: 0, - }, - item: { - type: Object as PropType, - required: true, - }, }, emits: ['click'], diff --git a/packages/vant/src/calendar/CalendarMonth.tsx b/packages/vant/src/calendar/CalendarMonth.tsx index 4249df7a3..f8dc243f9 100644 --- a/packages/vant/src/calendar/CalendarMonth.tsx +++ b/packages/vant/src/calendar/CalendarMonth.tsx @@ -13,6 +13,7 @@ import { numericProp, setScrollTop, createNamespace, + makeRequiredProp, } from '../utils'; import { getMonthEndDay } from '../datetime-picker/utils'; import { @@ -38,8 +39,11 @@ import type { CalendarType, CalendarDayItem, CalendarDayType } from './types'; const [name] = createNamespace('calendar-month'); const props = { + date: makeRequiredProp(Date), type: String as PropType, color: String, + minDate: makeRequiredProp(Date), + maxDate: makeRequiredProp(Date), showMark: Boolean, rowHeight: numericProp, formatter: Function as PropType<(item: CalendarDayItem) => CalendarDayItem>, @@ -49,18 +53,6 @@ const props = { showSubtitle: Boolean, showMonthTitle: Boolean, firstDayOfWeek: Number, - date: { - type: Date, - required: true as const, - }, - minDate: { - type: Date, - required: true as const, - }, - maxDate: { - type: Date, - required: true as const, - }, }; export type CalendarMonthProps = ExtractPropTypes; diff --git a/packages/vant/src/cascader/Cascader.tsx b/packages/vant/src/cascader/Cascader.tsx index d32711e1a..27d44ca98 100644 --- a/packages/vant/src/cascader/Cascader.tsx +++ b/packages/vant/src/cascader/Cascader.tsx @@ -3,6 +3,7 @@ import { extend, truthProp, numericProp, + makeArrayProp, makeStringProp, createNamespace, } from '../utils'; @@ -25,7 +26,7 @@ export type CascaderOption = { children?: CascaderOption[]; className?: unknown; // for custom filed names - [key: string]: any; + [key: PropertyKey]: any; }; type CascaderTab = { @@ -44,6 +45,7 @@ export default defineComponent({ props: { title: String, + options: makeArrayProp(), closeable: truthProp, swipeable: truthProp, closeIcon: makeStringProp('cross'), @@ -51,10 +53,6 @@ export default defineComponent({ fieldNames: Object as PropType, placeholder: String, activeColor: String, - options: { - type: Array as PropType, - default: () => [], - }, }, emits: ['close', 'change', 'finish', 'update:modelValue', 'click-tab'], diff --git a/packages/vant/src/checkbox-group/CheckboxGroup.tsx b/packages/vant/src/checkbox-group/CheckboxGroup.tsx index 05a2eeb40..b2f4795a9 100644 --- a/packages/vant/src/checkbox-group/CheckboxGroup.tsx +++ b/packages/vant/src/checkbox-group/CheckboxGroup.tsx @@ -7,7 +7,7 @@ import { } from 'vue'; // Utils -import { numericProp, createNamespace } from '../utils'; +import { numericProp, createNamespace, makeArrayProp } from '../utils'; // Composables import { useChildren, useCustomFieldValue } from '@vant/use'; @@ -26,13 +26,10 @@ const [name, bem] = createNamespace('checkbox-group'); const props = { max: numericProp, disabled: Boolean, - direction: String as PropType, iconSize: numericProp, + direction: String as PropType, + modelValue: makeArrayProp(), checkedColor: String, - modelValue: { - type: Array as PropType, - default: () => [], - }, }; export type CheckboxGroupProps = ExtractPropTypes; diff --git a/packages/vant/src/checkbox/Checker.tsx b/packages/vant/src/checkbox/Checker.tsx index 65e368e93..4864051be 100644 --- a/packages/vant/src/checkbox/Checker.tsx +++ b/packages/vant/src/checkbox/Checker.tsx @@ -6,6 +6,7 @@ import { numericProp, unknownProp, makeStringProp, + makeRequiredProp, } from '../utils'; import { Icon } from '../icon'; @@ -34,14 +35,11 @@ export const checkerProps = { export default defineComponent({ props: extend({}, checkerProps, { + bem: makeRequiredProp(Function), role: String, parent: Object as PropType, checked: Boolean, bindGroup: truthProp, - bem: { - type: Function, - required: true as const, - }, }), emits: ['click', 'toggle'], diff --git a/packages/vant/src/circle/Circle.tsx b/packages/vant/src/circle/Circle.tsx index 585ae31af..abe46473b 100644 --- a/packages/vant/src/circle/Circle.tsx +++ b/packages/vant/src/circle/Circle.tsx @@ -6,6 +6,7 @@ import { numericProp, getSizeStyle, makeStringProp, + makeNumberProp, makeNumericProp, createNamespace, } from '../utils'; @@ -37,13 +38,10 @@ export default defineComponent({ color: [String, Object] as PropType>, clockwise: truthProp, layerColor: String, + currentRate: makeNumberProp(0), strokeWidth: makeNumericProp(40), strokeLinecap: String as PropType, startPosition: makeStringProp('top'), - currentRate: { - type: Number, - default: 0, - }, }, emits: ['update:currentRate'], diff --git a/packages/vant/src/coupon-cell/CouponCell.tsx b/packages/vant/src/coupon-cell/CouponCell.tsx index 22615209b..0de3c71e7 100644 --- a/packages/vant/src/coupon-cell/CouponCell.tsx +++ b/packages/vant/src/coupon-cell/CouponCell.tsx @@ -1,9 +1,10 @@ -import { PropType, defineComponent } from 'vue'; +import { defineComponent } from 'vue'; // Utils import { isDef, truthProp, + makeArrayProp, makeStringProp, makeNumericProp, createNamespace, @@ -46,12 +47,9 @@ export default defineComponent({ title: String, border: truthProp, editable: truthProp, + coupons: makeArrayProp(), currency: makeStringProp('¥'), chosenCoupon: makeNumericProp(-1), - coupons: { - type: Array as PropType, - default: () => [], - }, }, setup(props) { diff --git a/packages/vant/src/coupon-list/CouponList.tsx b/packages/vant/src/coupon-list/CouponList.tsx index e0e33ef20..013e5d5cd 100644 --- a/packages/vant/src/coupon-list/CouponList.tsx +++ b/packages/vant/src/coupon-list/CouponList.tsx @@ -3,13 +3,18 @@ import { computed, nextTick, reactive, - PropType, onMounted, defineComponent, } from 'vue'; // Utils -import { truthProp, makeStringProp, createNamespace } from '../utils'; +import { + truthProp, + makeArrayProp, + makeStringProp, + makeNumberProp, + createNamespace, +} from '../utils'; // Composables import { useRefs } from '../composables/use-refs'; @@ -29,38 +34,23 @@ export default defineComponent({ props: { code: makeStringProp(''), + coupons: makeArrayProp(), currency: makeStringProp('¥'), showCount: truthProp, emptyImage: makeStringProp(EMPTY_IMAGE), + chosenCoupon: makeNumberProp(-1), enabledTitle: String, disabledTitle: String, + disabledCoupons: makeArrayProp(), showExchangeBar: truthProp, showCloseButton: truthProp, closeButtonText: String, inputPlaceholder: String, + exchangeMinLength: makeNumberProp(1), exchangeButtonText: String, + displayedCouponIndex: makeNumberProp(-1), exchangeButtonLoading: Boolean, exchangeButtonDisabled: Boolean, - exchangeMinLength: { - type: Number, - default: 1, - }, - chosenCoupon: { - type: Number, - default: -1, - }, - coupons: { - type: Array as PropType, - default: () => [], - }, - disabledCoupons: { - type: Array as PropType, - default: () => [], - }, - displayedCouponIndex: { - type: Number, - default: -1, - }, }, emits: ['change', 'exchange', 'update:code'], diff --git a/packages/vant/src/coupon/Coupon.tsx b/packages/vant/src/coupon/Coupon.tsx index 637f2f749..fd40faee0 100644 --- a/packages/vant/src/coupon/Coupon.tsx +++ b/packages/vant/src/coupon/Coupon.tsx @@ -1,5 +1,10 @@ import { computed, PropType, defineComponent } from 'vue'; -import { padZero, makeStringProp, createNamespace } from '../utils'; +import { + padZero, + makeStringProp, + createNamespace, + makeRequiredProp, +} from '../utils'; import { Checkbox } from '../checkbox'; export type CouponInfo = { @@ -38,12 +43,9 @@ export default defineComponent({ props: { chosen: Boolean, + coupon: makeRequiredProp>(Object), disabled: Boolean, currency: makeStringProp('¥'), - coupon: { - type: Object as PropType, - required: true, - }, }, setup(props) { diff --git a/packages/vant/src/dropdown-item/DropdownItem.tsx b/packages/vant/src/dropdown-item/DropdownItem.tsx index a460aee7d..fda6c6a09 100644 --- a/packages/vant/src/dropdown-item/DropdownItem.tsx +++ b/packages/vant/src/dropdown-item/DropdownItem.tsx @@ -14,6 +14,7 @@ import { unknownProp, getZIndexStyle, createNamespace, + makeArrayProp, } from '../utils'; import { DROPDOWN_KEY } from '../dropdown-menu/DropdownMenu'; @@ -33,15 +34,12 @@ const [name, bem] = createNamespace('dropdown-item'); const props = { title: String, + options: makeArrayProp(), disabled: Boolean, teleport: [String, Object] as PropType, lazyRender: truthProp, modelValue: unknownProp, titleClass: unknownProp, - options: { - type: Array as PropType, - default: () => [], - }, }; export type DropdownItemProps = ExtractPropTypes; diff --git a/packages/vant/src/image-preview/ImagePreview.tsx b/packages/vant/src/image-preview/ImagePreview.tsx index d57fd8bcf..2bbea286b 100644 --- a/packages/vant/src/image-preview/ImagePreview.tsx +++ b/packages/vant/src/image-preview/ImagePreview.tsx @@ -16,6 +16,7 @@ import { truthProp, unknownProp, Interceptor, + makeArrayProp, makeStringProp, makeNumericProp, callInterceptor, @@ -40,6 +41,7 @@ const [name, bem] = createNamespace('image-preview'); const props = { show: Boolean, loop: truthProp, + images: makeArrayProp(), minZoom: makeNumericProp(1 / 3), maxZoom: makeNumericProp(3), overlay: truthProp, @@ -55,10 +57,6 @@ const props = { showIndicators: Boolean, closeOnPopstate: truthProp, closeIconPosition: makeStringProp('top-right'), - images: { - type: Array as PropType, - default: () => [], - }, }; export type ImagePreviewProps = ExtractPropTypes; diff --git a/packages/vant/src/image-preview/ImagePreviewItem.tsx b/packages/vant/src/image-preview/ImagePreviewItem.tsx index eabe97de9..1a80500a0 100644 --- a/packages/vant/src/image-preview/ImagePreviewItem.tsx +++ b/packages/vant/src/image-preview/ImagePreviewItem.tsx @@ -1,7 +1,13 @@ import { watch, computed, reactive, CSSProperties, defineComponent } from 'vue'; // Utils -import { clamp, preventDefault, numericProp, createNamespace } from '../utils'; +import { + clamp, + numericProp, + preventDefault, + createNamespace, + makeRequiredProp, +} from '../utils'; // Composables import { useTouch } from '../composables/use-touch'; @@ -24,22 +30,10 @@ export default defineComponent({ src: String, show: Boolean, active: Number, - minZoom: { - type: numericProp, - required: true, - }, - maxZoom: { - type: numericProp, - required: true, - }, - rootWidth: { - type: Number, - required: true, - }, - rootHeight: { - type: Number, - required: true, - }, + minZoom: makeRequiredProp(numericProp), + maxZoom: makeRequiredProp(numericProp), + rootWidth: makeRequiredProp(Number), + rootHeight: makeRequiredProp(Number), }, emits: ['scale', 'close'], diff --git a/packages/vant/src/index-bar/IndexBar.tsx b/packages/vant/src/index-bar/IndexBar.tsx index db84e87e3..4b99995ce 100644 --- a/packages/vant/src/index-bar/IndexBar.tsx +++ b/packages/vant/src/index-bar/IndexBar.tsx @@ -21,6 +21,7 @@ import { numericProp, getScrollTop, preventDefault, + makeNumberProp, createNamespace, getRootScrollTop, setRootScrollTop, @@ -55,10 +56,7 @@ const props = { zIndex: numericProp, teleport: [String, Object] as PropType, highlightColor: String, - stickyOffsetTop: { - type: Number, - default: 0, - }, + stickyOffsetTop: makeNumberProp(0), indexList: { type: Array as PropType, default: genAlphabet, diff --git a/packages/vant/src/pagination/Pagination.tsx b/packages/vant/src/pagination/Pagination.tsx index 5533de930..0eceb279c 100644 --- a/packages/vant/src/pagination/Pagination.tsx +++ b/packages/vant/src/pagination/Pagination.tsx @@ -2,6 +2,7 @@ import { computed, watch, defineComponent } from 'vue'; import { BORDER, makeStringProp, + makeNumberProp, makeNumericProp, createNamespace, } from '../utils'; @@ -30,14 +31,11 @@ export default defineComponent({ prevText: String, nextText: String, pageCount: makeNumericProp(0), + modelValue: makeNumberProp(0), totalItems: makeNumericProp(0), showPageSize: makeNumericProp(5), itemsPerPage: makeNumericProp(10), forceEllipses: Boolean, - modelValue: { - type: Number, - default: 0, - }, }, emits: ['change', 'update:modelValue'], diff --git a/packages/vant/src/picker/Picker.tsx b/packages/vant/src/picker/Picker.tsx index 474319d88..efb56b0f2 100644 --- a/packages/vant/src/picker/Picker.tsx +++ b/packages/vant/src/picker/Picker.tsx @@ -12,10 +12,11 @@ import { extend, unitToPx, truthProp, + makeArrayProp, preventDefault, makeStringProp, - createNamespace, makeNumericProp, + createNamespace, BORDER_UNSET_TOP_BOTTOM, } from '../utils'; @@ -58,16 +59,13 @@ export default defineComponent({ name, props: extend({}, pickerProps, { + columns: makeArrayProp(), // @deprecated // should be removed in next major version valueKey: String, defaultIndex: makeNumericProp(0), toolbarPosition: makeStringProp('top'), columnsFieldNames: Object as PropType, - columns: { - type: Array as PropType, - default: () => [], - }, }), emits: ['confirm', 'cancel', 'change'], diff --git a/packages/vant/src/picker/PickerColumn.tsx b/packages/vant/src/picker/PickerColumn.tsx index 1b5665fd0..083dc4479 100644 --- a/packages/vant/src/picker/PickerColumn.tsx +++ b/packages/vant/src/picker/PickerColumn.tsx @@ -1,4 +1,4 @@ -import { ref, watch, reactive, PropType, defineComponent } from 'vue'; +import { ref, watch, reactive, defineComponent } from 'vue'; // Utils import { deepClone } from '../utils/deep-clone'; @@ -7,8 +7,11 @@ import { isObject, unknownProp, numericProp, + makeArrayProp, + makeNumberProp, preventDefault, createNamespace, + makeRequiredProp, } from '../utils'; // Composables @@ -44,33 +47,15 @@ export default defineComponent({ name, props: { + textKey: makeRequiredProp(String), readonly: Boolean, allowHtml: Boolean, className: unknownProp, - textKey: { - type: String, - required: true, - }, - itemHeight: { - type: Number, - required: true, - }, - swipeDuration: { - type: numericProp, - required: true, - }, - visibleItemCount: { - type: numericProp, - required: true, - }, - defaultIndex: { - type: Number, - default: 0, - }, - initialOptions: { - type: Array as PropType, - default: () => [], - }, + itemHeight: makeRequiredProp(Number), + defaultIndex: makeNumberProp(0), + swipeDuration: makeRequiredProp(numericProp), + initialOptions: makeArrayProp(), + visibleItemCount: makeRequiredProp(numericProp), }, emits: ['change'], diff --git a/packages/vant/src/picker/types.ts b/packages/vant/src/picker/types.ts index 0f5d1dc4c..295c87895 100644 --- a/packages/vant/src/picker/types.ts +++ b/packages/vant/src/picker/types.ts @@ -14,7 +14,7 @@ export type PickerObjectOption = { text?: string | number; disabled?: boolean; // for custom filed names - [key: string]: any; + [key: PropertyKey]: any; }; export type PickerOption = string | number | PickerObjectOption; @@ -25,7 +25,7 @@ export type PickerObjectColumn = { className?: unknown; defaultIndex?: number; // for custom filed names - [key: string]: any; + [key: PropertyKey]: any; }; export type PickerColumn = PickerOption[] | PickerObjectColumn; diff --git a/packages/vant/src/popover/Popover.tsx b/packages/vant/src/popover/Popover.tsx index 80246be9f..e5e5307e4 100644 --- a/packages/vant/src/popover/Popover.tsx +++ b/packages/vant/src/popover/Popover.tsx @@ -22,6 +22,7 @@ import { makeStringProp, createNamespace, ComponentInstance, + makeArrayProp, } from '../utils'; // Composables @@ -75,8 +76,10 @@ export default defineComponent({ show: Boolean, theme: makeStringProp('light'), overlay: Boolean, + actions: makeArrayProp(), trigger: makeStringProp('click'), duration: numericProp, + showArrow: truthProp, placement: makeStringProp('bottom'), iconPrefix: String, overlayClass: unknownProp, @@ -88,18 +91,10 @@ export default defineComponent({ type: Array as unknown as PropType<[number, number]>, default: () => [0, 8], }, - actions: { - type: Array as PropType, - default: () => [], - }, teleport: { type: [String, Object] as PropType, default: 'body', }, - showArrow: { - type: Boolean, - default: true, - }, }, emits: ['select', 'touchstart', 'update:show'], diff --git a/packages/vant/src/rate/Rate.tsx b/packages/vant/src/rate/Rate.tsx index ec02ab22a..adad928ce 100644 --- a/packages/vant/src/rate/Rate.tsx +++ b/packages/vant/src/rate/Rate.tsx @@ -7,6 +7,7 @@ import { numericProp, preventDefault, makeStringProp, + makeNumberProp, makeNumericProp, createNamespace, } from '../utils'; @@ -69,11 +70,8 @@ export default defineComponent({ voidColor: String, touchable: truthProp, iconPrefix: String, + modelValue: makeNumberProp(0), disabledColor: String, - modelValue: { - type: Number, - default: 0, - }, }, emits: ['change', 'update:modelValue'], diff --git a/packages/vant/src/share-sheet/ShareSheet.tsx b/packages/vant/src/share-sheet/ShareSheet.tsx index 416362dfa..8e9f15bfe 100644 --- a/packages/vant/src/share-sheet/ShareSheet.tsx +++ b/packages/vant/src/share-sheet/ShareSheet.tsx @@ -1,7 +1,13 @@ -import { PropType, defineComponent } from 'vue'; +import { defineComponent } from 'vue'; // Utils -import { truthProp, createNamespace, extend, pick } from '../utils'; +import { + pick, + extend, + truthProp, + makeArrayProp, + createNamespace, +} from '../utils'; import { popupSharedProps, popupSharedPropKeys } from '../popup/shared'; // Components @@ -47,14 +53,11 @@ export default defineComponent({ props: extend({}, popupSharedProps, { title: String, + options: makeArrayProp(), cancelText: String, description: String, closeOnPopstate: truthProp, safeAreaInsetBottom: truthProp, - options: { - type: Array as PropType, - default: () => [], - }, }), emits: ['cancel', 'select', 'update:show'], diff --git a/packages/vant/src/slider/Slider.tsx b/packages/vant/src/slider/Slider.tsx index e72e69f73..15d1c68ff 100644 --- a/packages/vant/src/slider/Slider.tsx +++ b/packages/vant/src/slider/Slider.tsx @@ -49,8 +49,8 @@ export default defineComponent({ setup(props, { emit, slots }) { let buttonIndex: 0 | 1; + let current: SliderValue; let startValue: SliderValue; - let currentValue: SliderValue; const root = ref(); const dragStatus = ref<'start' | 'dragging' | ''>(); @@ -193,12 +193,12 @@ export default defineComponent({ } touch.start(event); - currentValue = props.modelValue; + current = props.modelValue; - if (isRange(currentValue)) { - startValue = currentValue.map(format) as NumberRange; + if (isRange(current)) { + startValue = current.map(format) as NumberRange; } else { - startValue = format(currentValue); + startValue = format(current); } dragStatus.value = 'start'; @@ -228,11 +228,11 @@ export default defineComponent({ if (isRange(startValue)) { const index = props.reverse ? 1 - buttonIndex : buttonIndex; - (currentValue as NumberRange)[index] = startValue[index] + diff; + (current as NumberRange)[index] = startValue[index] + diff; } else { - currentValue = startValue + diff; + current = startValue + diff; } - updateValue(currentValue); + updateValue(current); }; const onTouchEnd = (event: TouchEvent) => { @@ -241,7 +241,7 @@ export default defineComponent({ } if (dragStatus.value === 'dragging') { - updateValue(currentValue, true); + updateValue(current, true); emit('drag-end', event); } @@ -274,7 +274,7 @@ export default defineComponent({ }; const renderButton = (index?: 0 | 1) => { - const currentValue = + const current = typeof index === 'number' ? (props.modelValue as NumberRange)[index] : (props.modelValue as number); @@ -285,7 +285,7 @@ export default defineComponent({ class={getButtonClassName(index)} tabindex={props.disabled || props.readonly ? -1 : 0} aria-valuemin={+props.min} - aria-valuenow={currentValue} + aria-valuenow={current} aria-valuemax={+props.max} aria-orientation={props.vertical ? 'vertical' : 'horizontal'} onTouchstart={(event) => { @@ -300,7 +300,7 @@ export default defineComponent({ onTouchcancel={onTouchEnd} onClick={stopPropagation} > - {renderButtonContent(currentValue, index)} + {renderButtonContent(current, index)} ); }; diff --git a/packages/vant/src/tabs/TabsContent.tsx b/packages/vant/src/tabs/TabsContent.tsx index 8f7dc9fc7..f16344896 100644 --- a/packages/vant/src/tabs/TabsContent.tsx +++ b/packages/vant/src/tabs/TabsContent.tsx @@ -1,5 +1,5 @@ import { ref, watch, onMounted, defineComponent } from 'vue'; -import { numericProp, createNamespace } from '../utils'; +import { numericProp, makeRequiredProp, createNamespace } from '../utils'; import { Swipe, SwipeInstance } from '../swipe'; const [name, bem] = createNamespace('tabs'); @@ -8,22 +8,13 @@ export default defineComponent({ name, props: { + count: makeRequiredProp(Number), inited: Boolean, animated: Boolean, + duration: makeRequiredProp(numericProp), swipeable: Boolean, lazyRender: Boolean, - count: { - type: Number, - required: true, - }, - duration: { - type: numericProp, - required: true, - }, - currentIndex: { - type: Number, - required: true, - }, + currentIndex: makeRequiredProp(Number), }, emits: ['change'], diff --git a/packages/vant/src/toast/Toast.tsx b/packages/vant/src/toast/Toast.tsx index 51548e955..4cd15e9b8 100644 --- a/packages/vant/src/toast/Toast.tsx +++ b/packages/vant/src/toast/Toast.tsx @@ -13,6 +13,7 @@ import { unknownProp, numericProp, makeStringProp, + makeNumberProp, createNamespace, } from '../utils'; import { lockClick } from './lock-click'; @@ -37,6 +38,7 @@ export default defineComponent({ overlay: Boolean, message: numericProp, iconSize: numericProp, + duration: makeNumberProp(2000), position: makeStringProp('middle'), className: unknownProp, iconPrefix: String, @@ -47,10 +49,6 @@ export default defineComponent({ overlayStyle: Object as PropType, closeOnClick: Boolean, closeOnClickOverlay: Boolean, - duration: { - type: Number, - default: 2000, - }, }, emits: ['update:show'], diff --git a/packages/vant/src/tree-select/TreeSelect.tsx b/packages/vant/src/tree-select/TreeSelect.tsx index 30a688b3f..c61c029c6 100644 --- a/packages/vant/src/tree-select/TreeSelect.tsx +++ b/packages/vant/src/tree-select/TreeSelect.tsx @@ -3,6 +3,7 @@ import { PropType, defineComponent } from 'vue'; // Utils import { addUnit, + makeArrayProp, makeStringProp, makeNumericProp, createNamespace, @@ -35,13 +36,10 @@ export default defineComponent({ props: { max: makeNumericProp(Infinity), + items: makeArrayProp(), height: makeNumericProp(300), selectedIcon: makeStringProp('success'), mainActiveIndex: makeNumericProp(0), - items: { - type: Array as PropType, - default: () => [], - }, activeId: { type: [Number, String, Array] as PropType< number | string | Array diff --git a/packages/vant/src/uploader/Uploader.tsx b/packages/vant/src/uploader/Uploader.tsx index 41499b754..70a7874fc 100644 --- a/packages/vant/src/uploader/Uploader.tsx +++ b/packages/vant/src/uploader/Uploader.tsx @@ -15,6 +15,7 @@ import { numericProp, Interceptor, getSizeStyle, + makeArrayProp, makeStringProp, makeNumericProp, ComponentInstance, @@ -65,16 +66,13 @@ const props = { deletable: truthProp, afterRead: Function as PropType, showUpload: truthProp, + modelValue: makeArrayProp(), beforeRead: Function as PropType, beforeDelete: Function as PropType, previewSize: numericProp, previewImage: truthProp, previewOptions: Object as PropType, previewFullImage: truthProp, - modelValue: { - type: Array as PropType, - default: () => [], - }, maxSize: { type: [Number, String, Function] as PropType, default: Infinity, diff --git a/packages/vant/src/uploader/UploaderPreviewItem.tsx b/packages/vant/src/uploader/UploaderPreviewItem.tsx index a02d8e0ce..17c5a64ce 100644 --- a/packages/vant/src/uploader/UploaderPreviewItem.tsx +++ b/packages/vant/src/uploader/UploaderPreviewItem.tsx @@ -9,6 +9,7 @@ import { numericProp, getSizeStyle, callInterceptor, + makeRequiredProp, } from '../utils'; // Components @@ -22,16 +23,13 @@ import type { UploaderFileListItem } from './types'; export default defineComponent({ props: { name: numericProp, + item: makeRequiredProp>(Object), index: Number, imageFit: String as PropType, lazyLoad: Boolean, deletable: Boolean, previewSize: numericProp, beforeDelete: Function as PropType, - item: { - type: Object as PropType, - required: true, - }, }, emits: ['delete', 'preview'], diff --git a/packages/vant/src/utils/basic.ts b/packages/vant/src/utils/basic.ts index e8ea373c3..b96e89913 100644 --- a/packages/vant/src/utils/basic.ts +++ b/packages/vant/src/utils/basic.ts @@ -1,4 +1,4 @@ -import { PropType, ComponentPublicInstance } from 'vue'; +import type { ComponentPublicInstance } from 'vue'; export function noop() {} @@ -6,23 +6,6 @@ export const extend = Object.assign; export const inBrowser = typeof window !== 'undefined'; -// propType helpers -// help us to write less code, reduce bundle size -export const unknownProp = null as unknown as PropType; -export const numericProp = [Number, String]; -export const truthProp = { - type: Boolean, - default: true as const, -}; -export const makeNumericProp = (defaultVal: T) => ({ - type: numericProp, - default: defaultVal, -}); -export const makeStringProp = (defaultVal: T) => ({ - type: String as unknown as PropType, - default: defaultVal, -}); - // eslint-disable-next-line export type ComponentInstance = ComponentPublicInstance<{}, any>; diff --git a/packages/vant/src/utils/index.ts b/packages/vant/src/utils/index.ts index 4f2786237..e05ffe73e 100644 --- a/packages/vant/src/utils/index.ts +++ b/packages/vant/src/utils/index.ts @@ -1,4 +1,5 @@ export * from './basic'; +export * from './props'; export * from './dom'; export * from './create'; export * from './format'; diff --git a/packages/vant/src/utils/props.ts b/packages/vant/src/utils/props.ts new file mode 100644 index 000000000..acc2cf193 --- /dev/null +++ b/packages/vant/src/utils/props.ts @@ -0,0 +1,39 @@ +/** + * prop type helpers + * help us to write less code and reduce bundle size + */ +import type { PropType } from 'vue'; + +export const unknownProp = null as unknown as PropType; + +export const numericProp = [Number, String]; + +export const truthProp = { + type: Boolean, + default: true as const, +}; + +export const makeRequiredProp = (type: T) => ({ + type, + required: true as const, +}); + +export const makeArrayProp = () => ({ + type: Array as PropType, + default: () => [], +}); + +export const makeNumberProp = (defaultVal: T) => ({ + type: Number, + default: defaultVal, +}); + +export const makeNumericProp = (defaultVal: T) => ({ + type: numericProp, + default: defaultVal, +}); + +export const makeStringProp = (defaultVal: T) => ({ + type: String as unknown as PropType, + default: defaultVal, +});