refactor(VToolbar): add propsFactory and filter fn

vuetifyjs · Feb 28, 2022 · 48306a7 · 48306a7
1 parent ebe3b55
commit 48306a7
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 41 deletions.
diff --git a/packages/vuetify/src/components/VAppBar/VAppBar.tsx b/packages/vuetify/src/components/VAppBar/VAppBar.tsx
@@ -2,7 +2,7 @@
 import './VAppBar.sass'
 
 // Components
-import { VToolbar } from '@/components/VToolbar/VToolbar'
+import { filterToolbarProps, makeVToolbarProps, VToolbar } from '@/components/VToolbar/VToolbar'
 
 // Composables
 import { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'
@@ -36,6 +36,7 @@ export const VAppBar = defineComponent({
       validator: (value: any) => ['top', 'bottom'].includes(value),
     },
 
+    ...makeVToolbarProps(),
     ...makeLayoutItemProps(),
   },
 
@@ -58,6 +59,8 @@ export const VAppBar = defineComponent({
     })
 
     return () => {
+      const [toolbarProps] = filterToolbarProps(props)
+
       return (
         <VToolbar
           ref={ vToolbarRef }
@@ -67,15 +70,10 @@ export const VAppBar = defineComponent({
               'v-app-bar--bottom': props.position === 'bottom',
             },
           ]}
-          style={[
-            layoutItemStyles.value,
-          ]}
-          { ...props }
-        >
-          {{
-            ...slots,
-          }}
-        </VToolbar>
+          style={ layoutItemStyles.value }
+          { ...toolbarProps }
+          v-slots={ slots }
+        />
       )
     }
   },

diff --git a/packages/vuetify/src/components/VToolbar/VToolbar.tsx b/packages/vuetify/src/components/VToolbar/VToolbar.tsx
@@ -17,16 +17,46 @@ import { useForwardRef } from '@/composables/forwardRef'
 
 // Utilities
 import { computed, toRef } from 'vue'
-import { convertToUnit, genericComponent, useRender } from '@/util'
+import { convertToUnit, genericComponent, pick, propsFactory, useRender } from '@/util'
 
 // Types
 import type { MakeSlots } from '@/util'
-import type { PropType } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 
 export type Density = typeof allowedDensities[number]
 
 const allowedDensities = [null, 'prominent', 'default', 'comfortable', 'compact'] as const
 
+export const makeVToolbarProps = propsFactory({
+  absolute: Boolean,
+  collapse: Boolean,
+  color: String,
+  density: {
+    type: String as PropType<Density>,
+    default: 'default',
+    validator: (v: any) => allowedDensities.includes(v),
+  },
+  extended: Boolean,
+  extensionHeight: {
+    type: [Number, String],
+    default: 48,
+  },
+  flat: Boolean,
+  floating: Boolean,
+  height: {
+    type: [Number, String],
+    default: 64,
+  },
+  image: String,
+  title: String,
+
+  ...makeBorderProps(),
+  ...makeElevationProps(),
+  ...makeRoundedProps(),
+  ...makeTagProps({ tag: 'header' }),
+  ...makeThemeProps(),
+}, 'v-toolbar')
+
 export const VToolbar = genericComponent<new () => {
   $slots: MakeSlots<{
     default: []
@@ -39,35 +69,7 @@ export const VToolbar = genericComponent<new () => {
 }>()({
   name: 'VToolbar',
 
-  props: {
-    absolute: Boolean,
-    collapse: Boolean,
-    color: String,
-    density: {
-      type: String as PropType<Density>,
-      default: 'default',
-      validator: (v: any) => allowedDensities.includes(v),
-    },
-    extended: Boolean,
-    extensionHeight: {
-      type: [Number, String],
-      default: 48,
-    },
-    flat: Boolean,
-    floating: Boolean,
-    height: {
-      type: [Number, String],
-      default: 64,
-    },
-    image: String,
-    title: String,
-
-    ...makeBorderProps(),
-    ...makeElevationProps(),
-    ...makeRoundedProps(),
-    ...makeTagProps({ tag: 'header' }),
-    ...makeThemeProps(),
-  },
+  props: makeVToolbarProps(),
 
   setup (props, { slots }) {
     const { borderClasses } = useBorder(props)
@@ -169,3 +171,7 @@ export const VToolbar = genericComponent<new () => {
 })
 
 export type VToolbar = InstanceType<typeof VToolbar>
+
+export function filterToolbarProps (props: ExtractPropTypes<ReturnType<typeof makeVToolbarProps>>) {
+  return pick(props, Object.keys(VToolbar?.props ?? {}) as any)
+}