From b712dd84669ad937e464495d7e70d4652fde7243 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= Date: Fri, 11 Feb 2022 11:40:50 +0800 Subject: [PATCH] refactor: fix buildProps (#5936) --- packages/components/dropdown/src/dropdown.ts | 93 ++++++++++---------- packages/components/popover/src/popover.ts | 21 ++--- packages/components/popper/src/popper.ts | 16 ++-- packages/components/tooltip/src/tooltip.ts | 80 ++++++++--------- packages/hooks/use-delayed-toggle/index.ts | 2 +- 5 files changed, 106 insertions(+), 106 deletions(-) diff --git a/packages/components/dropdown/src/dropdown.ts b/packages/components/dropdown/src/dropdown.ts index 520257e231..5195ad5d65 100644 --- a/packages/components/dropdown/src/dropdown.ts +++ b/packages/components/dropdown/src/dropdown.ts @@ -24,59 +24,56 @@ export interface IElDropdownInstance { triggerElm?: ComputedRef> } -export const dropdownProps = { +export const dropdownProps = buildProps({ trigger: useTooltipTriggerProps.trigger, - effect: { ...useTooltipContentProps.effect, default: 'light', }, - ...buildProps({ - type: { - type: definePropType(String), - }, - placement: { - type: definePropType(String), - default: 'bottom', - }, - popperOptions: { - type: definePropType>(Object), - default: () => ({}), - }, - size: { - type: String, - default: '', - }, - splitButton: Boolean, - hideOnClick: { - type: Boolean, - default: true, - }, - loop: { - type: Boolean, - }, - showTimeout: { - type: Number, - default: 150, - }, - hideTimeout: { - type: Number, - default: 150, - }, - tabindex: { - type: definePropType([Number, String]), - default: 0, - }, - maxHeight: { - type: definePropType([Number, String]), - default: '', - }, - popperClass: { - type: String, - default: '', - }, - } as const), -} as const + type: { + type: definePropType(String), + }, + placement: { + type: definePropType(String), + default: 'bottom', + }, + popperOptions: { + type: definePropType>(Object), + default: () => ({}), + }, + size: { + type: String, + default: '', + }, + splitButton: Boolean, + hideOnClick: { + type: Boolean, + default: true, + }, + loop: { + type: Boolean, + }, + showTimeout: { + type: Number, + default: 150, + }, + hideTimeout: { + type: Number, + default: 150, + }, + tabindex: { + type: definePropType([Number, String]), + default: 0, + }, + maxHeight: { + type: definePropType([Number, String]), + default: '', + }, + popperClass: { + type: String, + default: '', + }, +} as const) export const dropdownItemProps = buildProps({ command: { diff --git a/packages/components/popover/src/popover.ts b/packages/components/popover/src/popover.ts index b8776d108e..6a9b9865f4 100644 --- a/packages/components/popover/src/popover.ts +++ b/packages/components/popover/src/popover.ts @@ -1,8 +1,11 @@ import { buildProps } from '@element-plus/utils' import { useTooltipContentProps } from '@element-plus/components/tooltip' -export const usePopoverProps = { - appendToBody: { type: Boolean, default: undefined }, +export const usePopoverProps = buildProps({ + appendToBody: { + type: Boolean, + default: undefined, + }, content: useTooltipContentProps.content, popperStyle: useTooltipContentProps.popperStyle, popperClass: useTooltipContentProps.popperClass, @@ -15,12 +18,10 @@ export const usePopoverProps = { default: 'light', }, teleported: useTooltipContentProps.teleported, - ...buildProps({ - title: String, + title: String, - width: { - type: [String, Number], - default: 150, - }, - }), -} + width: { + type: [String, Number], + default: 150, + }, +} as const) diff --git a/packages/components/popper/src/popper.ts b/packages/components/popper/src/popper.ts index bda1ac7e45..07932761eb 100644 --- a/packages/components/popper/src/popper.ts +++ b/packages/components/popper/src/popper.ts @@ -26,7 +26,7 @@ export const usePopperArrowProps = buildProps({ type: Number, default: 5, }, -}) +} as const) export const usePopperCoreConfigProps = buildProps({ boundariesPadding: { @@ -81,7 +81,7 @@ export const usePopperContentProps = buildProps({ style: { type: definePropType([String, Array, Object]) }, className: { type: definePropType([String, Array, Object]) }, effect: { - type: String, + values: effects, default: 'dark', }, enterable: { @@ -105,12 +105,16 @@ export const usePopperContentProps = buildProps({ default: true, }, zIndex: Number, -}) +} as const) export const usePopperTriggerProps = buildProps({ - virtualRef: { type: definePropType(Object) }, - virtualTriggering: { type: Boolean }, -}) + virtualRef: { + type: definePropType(Object), + }, + virtualTriggering: { + type: Boolean, + }, +} as const) export type UsePopperProps = ExtractPropTypes export type UsePopperCoreConfigProps = ExtractPropTypes< diff --git a/packages/components/tooltip/src/tooltip.ts b/packages/components/tooltip/src/tooltip.ts index 4b7f0841f1..6238a5d2a4 100644 --- a/packages/components/tooltip/src/tooltip.ts +++ b/packages/components/tooltip/src/tooltip.ts @@ -8,60 +8,58 @@ import { POPPER_CONTAINER_SELECTOR, } from '@element-plus/hooks' -import type { ExtractPropTypes, PropType } from 'vue' +import type { ExtractPropTypes } from 'vue' const triggers = ['hover', 'focus', 'click', 'contextmenu'] as const export type Trigger = typeof triggers[number] -export const useTooltipContentProps = { +export const useTooltipContentProps = buildProps({ ...useDelayedToggleProps, ...usePopperContentProps, - ...buildProps({ - appendTo: { - type: definePropType([String, Object]), - default: POPPER_CONTAINER_SELECTOR, - }, - content: { - type: String, - default: '', - }, - rawContent: { - type: Boolean, - default: false, - }, - persistent: Boolean, - ariaLabel: String, - // because model toggle prop is generated dynamically - // so the typing cannot be evaluated by typescript as type: - // [name]: { type: Boolean, default: null } - // so we need to declare that again for type checking. - visible: { - type: definePropType(Boolean), - default: null, - }, - transition: { - type: String, - default: 'el-fade-in-linear', - }, - teleported: { - type: Boolean, - default: true, - }, - disabled: { - type: Boolean, - }, - } as const), -} + appendTo: { + type: definePropType([String, Object]), + default: POPPER_CONTAINER_SELECTOR, + }, + content: { + type: String, + default: '', + }, + rawContent: { + type: Boolean, + default: false, + }, + persistent: Boolean, + ariaLabel: String, + // because model toggle prop is generated dynamically + // so the typing cannot be evaluated by typescript as type: + // [name]: { type: Boolean, default: null } + // so we need to declare that again for type checking. + visible: { + type: definePropType(Boolean), + default: null, + }, + transition: { + type: String, + default: 'el-fade-in-linear', + }, + teleported: { + type: Boolean, + default: true, + }, + disabled: { + type: Boolean, + }, +} as const) -export const useTooltipTriggerProps = { +export const useTooltipTriggerProps = buildProps({ ...usePopperTriggerProps, disabled: Boolean, trigger: { - type: [String, Array] as PropType, + type: definePropType([String, Array]), default: 'hover', }, -} +} as const) export const useTooltipProps = buildProps({ openDelay: { diff --git a/packages/hooks/use-delayed-toggle/index.ts b/packages/hooks/use-delayed-toggle/index.ts index 954b6ad482..83d0e3a93c 100644 --- a/packages/hooks/use-delayed-toggle/index.ts +++ b/packages/hooks/use-delayed-toggle/index.ts @@ -13,7 +13,7 @@ export const useDelayedToggleProps = buildProps({ type: Number, default: 200, }, -}) +} as const) export type UseDelayedToggleProps = { open: () => void