refactor: convert all component props to factory functions (#17263)

vuetifyjs · May 6, 2023 · b5d725b · b5d725b
1 parent 9331b53
commit b5d725b
Show file tree

Hide file tree

Showing 105 changed files with 2,218 additions and 2,035 deletions.
diff --git a/packages/vuetify/src/components/VAlert/VAlert.tsx b/packages/vuetify/src/components/VAlert/VAlert.tsx
@@ -25,7 +25,7 @@ import { useTextColor } from '@/composables/color'
 
 // Utilities
 import { computed, toRef } from 'vue'
-import { genericComponent } from '@/util'
+import { genericComponent, propsFactory } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -34,6 +34,56 @@ const allowedTypes = ['success', 'info', 'warning', 'error'] as const
 
 type ContextualType = typeof allowedTypes[number]
 
+export const makeVAlertProps = propsFactory({
+  border: {
+    type: [Boolean, String] as PropType<boolean | 'top' | 'end' | 'bottom' | 'start'>,
+    validator: (val: boolean | string) => {
+      return typeof val === 'boolean' || [
+        'top',
+        'end',
+        'bottom',
+        'start',
+      ].includes(val)
+    },
+  },
+  borderColor: String,
+  closable: Boolean,
+  closeIcon: {
+    type: IconValue,
+    default: '$close',
+  },
+  closeLabel: {
+    type: String,
+    default: '$vuetify.close',
+  },
+  icon: {
+    type: [Boolean, String, Function, Object] as PropType<false | IconValue>,
+    default: null,
+  },
+  modelValue: {
+    type: Boolean,
+    default: true,
+  },
+  prominent: Boolean,
+  title: String,
+  text: String,
+  type: {
+    type: String as PropType<ContextualType>,
+    validator: (val: ContextualType) => allowedTypes.includes(val),
+  },
+
+  ...makeComponentProps(),
+  ...makeDensityProps(),
+  ...makeDimensionProps(),
+  ...makeElevationProps(),
+  ...makeLocationProps(),
+  ...makePositionProps(),
+  ...makeRoundedProps(),
+  ...makeTagProps(),
+  ...makeThemeProps(),
+  ...makeVariantProps({ variant: 'flat' } as const),
+}, 'v-alert')
+
 export type VAlertSlots = {
   default: []
   prepend: []
@@ -46,55 +96,7 @@ export type VAlertSlots = {
 export const VAlert = genericComponent<VAlertSlots>()({
   name: 'VAlert',
 
-  props: {
-    border: {
-      type: [Boolean, String] as PropType<boolean | 'top' | 'end' | 'bottom' | 'start'>,
-      validator: (val: boolean | string) => {
-        return typeof val === 'boolean' || [
-          'top',
-          'end',
-          'bottom',
-          'start',
-        ].includes(val)
-      },
-    },
-    borderColor: String,
-    closable: Boolean,
-    closeIcon: {
-      type: IconValue,
-      default: '$close',
-    },
-    closeLabel: {
-      type: String,
-      default: '$vuetify.close',
-    },
-    icon: {
-      type: [Boolean, String, Function, Object] as PropType<false | IconValue>,
-      default: null,
-    },
-    modelValue: {
-      type: Boolean,
-      default: true,
-    },
-    prominent: Boolean,
-    title: String,
-    text: String,
-    type: {
-      type: String as PropType<ContextualType>,
-      validator: (val: ContextualType) => allowedTypes.includes(val),
-    },
-
-    ...makeComponentProps(),
-    ...makeDensityProps(),
-    ...makeDimensionProps(),
-    ...makeElevationProps(),
-    ...makeLocationProps(),
-    ...makePositionProps(),
-    ...makeRoundedProps(),
-    ...makeTagProps(),
-    ...makeThemeProps(),
-    ...makeVariantProps({ variant: 'flat' } as const),
-  },
+  props: makeVAlertProps(),
 
   emits: {
     'click:close': (e: MouseEvent) => true,

diff --git a/packages/vuetify/src/components/VApp/VApp.tsx b/packages/vuetify/src/components/VApp/VApp.tsx
@@ -8,16 +8,18 @@ import { makeThemeProps, provideTheme } from '@/composables/theme'
 import { useRtl } from '@/composables/locale'
 
 // Utilities
-import { genericComponent, useRender } from '@/util'
+import { genericComponent, propsFactory, useRender } from '@/util'
+
+export const makeVAppProps = propsFactory({
+  ...makeComponentProps(),
+  ...makeLayoutProps({ fullHeight: true }),
+  ...makeThemeProps(),
+}, 'v-app')
 
 export const VApp = genericComponent()({
   name: 'VApp',
 
-  props: {
-    ...makeComponentProps(),
-    ...makeLayoutProps({ fullHeight: true }),
-    ...makeThemeProps(),
-  },
+  props: makeVAppProps(),
 
   setup (props, { slots }) {
     const theme = provideTheme(props)

diff --git a/packages/vuetify/src/components/VAppBar/VAppBar.tsx b/packages/vuetify/src/components/VAppBar/VAppBar.tsx
@@ -12,36 +12,38 @@ import { useSsrBoot } from '@/composables/ssrBoot'
 
 // Utilities
 import { computed, ref, toRef, watch } from 'vue'
-import { genericComponent, useRender } from '@/util'
+import { genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
 import type { VToolbarSlots } from '@/components/VToolbar/VToolbar'
 
+export const makeVAppBarProps = propsFactory({
+  scrollBehavior: String,
+  modelValue: {
+    type: Boolean,
+    default: true,
+  },
+  location: {
+    type: String as PropType<'top' | 'bottom'>,
+    default: 'top',
+    validator: (value: any) => ['top', 'bottom'].includes(value),
+  },
+
+  ...makeVToolbarProps(),
+  ...makeLayoutItemProps(),
+  ...makeScrollProps(),
+
+  height: {
+    type: [Number, String],
+    default: 64,
+  },
+}, 'v-app-bar')
+
 export const VAppBar = genericComponent<VToolbarSlots>()({
   name: 'VAppBar',
 
-  props: {
-    scrollBehavior: String,
-    modelValue: {
-      type: Boolean,
-      default: true,
-    },
-    location: {
-      type: String as PropType<'top' | 'bottom'>,
-      default: 'top',
-      validator: (value: any) => ['top', 'bottom'].includes(value),
-    },
-
-    ...makeVToolbarProps(),
-    ...makeLayoutItemProps(),
-    ...makeScrollProps(),
-
-    height: {
-      type: [Number, String],
-      default: 64,
-    },
-  },
+  props: makeVAppBarProps(),
 
   emits: {
     'update:modelValue': (value: boolean) => true,

diff --git a/packages/vuetify/src/components/VAppBar/VAppBarNavIcon.tsx b/packages/vuetify/src/components/VAppBar/VAppBarNavIcon.tsx
@@ -4,18 +4,22 @@ import { VBtn } from '@/components/VBtn'
 import { makeVBtnProps } from '@/components/VBtn/VBtn'
 
 // Utilities
-import { genericComponent, useRender } from '@/util'
+import { genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
 import type { VBtnSlots } from '@/components/VBtn/VBtn'
 
-export const VAppBarNavIcon = genericComponent<VBtnSlots>()({
-  name: 'VAppBarNavIcon',
-
-  props: makeVBtnProps({
+export const makeVAppBarNavIconProps = propsFactory({
+  ...makeVBtnProps({
     icon: '$menu',
     variant: 'text' as const,
   }),
+}, 'v-app-bar-nav-icon')
+
+export const VAppBarNavIcon = genericComponent<VBtnSlots>()({
+  name: 'VAppBarNavIcon',
+
+  props: makeVAppBarNavIconProps(),
 
   setup (props, { slots }) {
     useRender(() => (

diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -23,7 +23,7 @@ import { useTextColor } from '@/composables/color'
 
 // Utility
 import { computed, mergeProps, nextTick, ref, watch } from 'vue'
-import { genericComponent, omit, useRender, wrapInArray } from '@/util'
+import { genericComponent, omit, propsFactory, useRender, wrapInArray } from '@/util'
 import { makeVTextFieldProps } from '@/components/VTextField/VTextField'
 
 // Types
@@ -60,6 +60,19 @@ type Value <T, ReturnObject extends boolean, Multiple extends boolean> =
     ? readonly Val<T, ReturnObject>[]
     : Val<T, ReturnObject>
 
+export const makeVAutocompleteProps = propsFactory({
+  // TODO: implement post keyboard support
+  // autoSelectFirst: Boolean,
+  search: String,
+
+  ...makeFilterProps({ filterKeys: ['title'] }),
+  ...makeSelectProps(),
+  ...omit(makeVTextFieldProps({
+    modelValue: null,
+  }), ['validationValue', 'dirty', 'appendInnerIcon']),
+  ...makeTransitionProps({ transition: false }),
+}, 'v-autocomplete')
+
 export const VAutocomplete = genericComponent<new <
   T,
   ReturnObject extends boolean = false,
@@ -81,18 +94,7 @@ export const VAutocomplete = genericComponent<new <
 }>>()({
   name: 'VAutocomplete',
 
-  props: {
-    // TODO: implement post keyboard support
-    // autoSelectFirst: Boolean,
-    search: String,
-
-    ...makeFilterProps({ filterKeys: ['title'] }),
-    ...makeSelectProps(),
-    ...omit(makeVTextFieldProps({
-      modelValue: null,
-    }), ['validationValue', 'dirty', 'appendInnerIcon']),
-    ...makeTransitionProps({ transition: false }),
-  },
+  props: makeVAutocompleteProps(),
 
   emits: {
     'update:focused': (focused: boolean) => true,

diff --git a/packages/vuetify/src/components/VBadge/VBadge.tsx b/packages/vuetify/src/components/VBadge/VBadge.tsx
@@ -16,47 +16,49 @@ import { useBackgroundColor, useTextColor } from '@/composables/color'
 import { useLocale } from '@/composables/locale'
 
 // Utilities
-import { genericComponent, pick, useRender } from '@/util'
+import { genericComponent, pick, propsFactory, useRender } from '@/util'
 import { toRef } from 'vue'
 
 export type VBadgeSlots = {
   default: []
   badge: []
 }
 
+export const makeVBadgeProps = propsFactory({
+  bordered: Boolean,
+  color: String,
+  content: [Number, String],
+  dot: Boolean,
+  floating: Boolean,
+  icon: IconValue,
+  inline: Boolean,
+  label: {
+    type: String,
+    default: '$vuetify.badge',
+  },
+  max: [Number, String],
+  modelValue: {
+    type: Boolean,
+    default: true,
+  },
+  offsetX: [Number, String],
+  offsetY: [Number, String],
+  textColor: String,
+
+  ...makeComponentProps(),
+  ...makeLocationProps({ location: 'top end' } as const),
+  ...makeRoundedProps(),
+  ...makeTagProps(),
+  ...makeThemeProps(),
+  ...makeTransitionProps({ transition: 'scale-rotate-transition' }),
+}, 'v-badge')
+
 export const VBadge = genericComponent<VBadgeSlots>()({
   name: 'VBadge',
 
   inheritAttrs: false,
 
-  props: {
-    bordered: Boolean,
-    color: String,
-    content: [Number, String],
-    dot: Boolean,
-    floating: Boolean,
-    icon: IconValue,
-    inline: Boolean,
-    label: {
-      type: String,
-      default: '$vuetify.badge',
-    },
-    max: [Number, String],
-    modelValue: {
-      type: Boolean,
-      default: true,
-    },
-    offsetX: [Number, String],
-    offsetY: [Number, String],
-    textColor: String,
-
-    ...makeComponentProps(),
-    ...makeLocationProps({ location: 'top end' } as const),
-    ...makeRoundedProps(),
-    ...makeTagProps(),
-    ...makeThemeProps(),
-    ...makeTransitionProps({ transition: 'scale-rotate-transition' }),
-  },
+  props: makeVBadgeProps(),
 
   setup (props, ctx) {
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))