fix(VExpansionPanels): propagate all defaults to VExpansionPanel

vuetifyjs · Mar 16, 2024 · 27b172b · 27b172b
1 parent 56c5c62
commit 27b172b
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 37 deletions.
diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx
@@ -1,34 +1,30 @@
 // Components
 import { VExpansionPanelSymbol } from './VExpansionPanels'
-import { VExpansionPanelText } from './VExpansionPanelText'
+import { makeVExpansionPanelTextProps, VExpansionPanelText } from './VExpansionPanelText'
 import { makeVExpansionPanelTitleProps, VExpansionPanelTitle } from './VExpansionPanelTitle'
 
 // Composables
 import { useBackgroundColor } from '@/composables/color'
-import { makeComponentProps } from '@/composables/component'
-import { provideDefaults } from '@/composables/defaults'
 import { makeElevationProps, useElevation } from '@/composables/elevation'
 import { makeGroupItemProps, useGroupItem } from '@/composables/group'
-import { makeLazyProps } from '@/composables/lazy'
 import { makeRoundedProps, useRounded } from '@/composables/rounded'
 import { makeTagProps } from '@/composables/tag'
 
 // Utilities
-import { computed, provide, toRef } from 'vue'
+import { computed, provide } from 'vue'
 import { genericComponent, propsFactory, useRender } from '@/util'
 
 export const makeVExpansionPanelProps = propsFactory({
   title: String,
   text: String,
   bgColor: String,
 
-  ...makeComponentProps(),
   ...makeElevationProps(),
   ...makeGroupItemProps(),
-  ...makeLazyProps(),
   ...makeRoundedProps(),
   ...makeTagProps(),
   ...makeVExpansionPanelTitleProps(),
+  ...makeVExpansionPanelTextProps(),
 }, 'VExpansionPanel')
 
 export type VExpansionPanelSlots = {
@@ -72,19 +68,13 @@ export const VExpansionPanel = genericComponent<VExpansionPanelSlots>()({
 
     provide(VExpansionPanelSymbol, groupItem)
 
-    provideDefaults({
-      VExpansionPanelText: {
-        eager: toRef(props, 'eager'),
-      },
-      VExpansionPanelTitle: {
-        readonly: toRef(props, 'readonly'),
-      },
-    })
-
     useRender(() => {
       const hasText = !!(slots.text || props.text)
       const hasTitle = !!(slots.title || props.title)
 
+      const expansionPanelTitleProps = VExpansionPanelTitle.filterProps(props)
+      const expansionPanelTextProps = VExpansionPanelText.filterProps(props)
+
       return (
         <props.tag
           class={[
@@ -114,18 +104,17 @@ export const VExpansionPanel = genericComponent<VExpansionPanelSlots>()({
           { hasTitle && (
             <VExpansionPanelTitle
               key="title"
-              collapseIcon={ props.collapseIcon }
-              color={ props.color }
-              expandIcon={ props.expandIcon }
-              hideActions={ props.hideActions }
-              ripple={ props.ripple }
+              { ...expansionPanelTitleProps }
             >
               { slots.title ? slots.title() : props.title }
             </VExpansionPanelTitle>
           )}
 
           { hasText && (
-            <VExpansionPanelText key="text">
+            <VExpansionPanelText
+              key="text"
+              { ...expansionPanelTextProps }
+            >
               { slots.text ? slots.text() : props.text }
             </VExpansionPanelText>
           )}

diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanels.tsx b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanels.tsx
@@ -1,11 +1,12 @@
 // Styles
 import './VExpansionPanel.sass'
 
+// Components
+import { makeVExpansionPanelProps } from './VExpansionPanel'
+
 // Composables
-import { makeComponentProps } from '@/composables/component'
 import { provideDefaults } from '@/composables/defaults'
 import { makeGroupProps, useGroup } from '@/composables/group'
-import { makeTagProps } from '@/composables/tag'
 import { makeThemeProps, provideTheme } from '@/composables/theme'
 
 // Utilities
@@ -23,22 +24,17 @@ const allowedVariants = ['default', 'accordion', 'inset', 'popout'] as const
 type Variant = typeof allowedVariants[number]
 
 export const makeVExpansionPanelsProps = propsFactory({
-  color: String,
   flat: Boolean,
-  focusable: Boolean,
-  static: Boolean,
-  tile: Boolean,
+
+  ...makeGroupProps(),
+  ...makeVExpansionPanelProps(),
+  ...makeThemeProps(),
+
   variant: {
     type: String as PropType<Variant>,
     default: 'default',
     validator: (v: any) => allowedVariants.includes(v),
   },
-  readonly: Boolean,
-
-  ...makeComponentProps(),
-  ...makeGroupProps(),
-  ...makeTagProps(),
-  ...makeThemeProps(),
 }, 'VExpansionPanels')
 
 export const VExpansionPanels = genericComponent()({
@@ -59,11 +55,17 @@ export const VExpansionPanels = genericComponent()({
 
     provideDefaults({
       VExpansionPanel: {
+        bgColor: toRef(props, 'bgColor'),
+        collapseIcon: toRef(props, 'collapseIcon'),
         color: toRef(props, 'color'),
-        readonly: toRef(props, 'readonly'),
-      },
-      VExpansionPanelTitle: {
+        eager: toRef(props, 'eager'),
+        elevation: toRef(props, 'elevation'),
+        expandIcon: toRef(props, 'expandIcon'),
         focusable: toRef(props, 'focusable'),
+        hideActions: toRef(props, 'hideActions'),
+        readonly: toRef(props, 'readonly'),
+        ripple: toRef(props, 'ripple'),
+        rounded: toRef(props, 'rounded'),
         static: toRef(props, 'static'),
       },
     })