diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx index f3cb36ae346..021ae213381 100644 --- a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx +++ b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx @@ -1,20 +1,17 @@ // 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({ @@ -22,13 +19,12 @@ export const makeVExpansionPanelProps = propsFactory({ text: String, bgColor: String, - ...makeComponentProps(), ...makeElevationProps(), ...makeGroupItemProps(), - ...makeLazyProps(), ...makeRoundedProps(), ...makeTagProps(), ...makeVExpansionPanelTitleProps(), + ...makeVExpansionPanelTextProps(), }, 'VExpansionPanel') export type VExpansionPanelSlots = { @@ -72,19 +68,13 @@ export const VExpansionPanel = genericComponent()({ 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 ( ()({ { hasTitle && ( { slots.title ? slots.title() : props.title } )} { hasText && ( - + { slots.text ? slots.text() : props.text } )} diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanels.tsx b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanels.tsx index 03946414bc7..ead703dc956 100644 --- 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, 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'), }, })