feat(VExpansionPanels): port to v3

[nekosaur]

Description

#13482
closes #13551

BREAKING CHANGES

v-expansion-panels

• accordion, inset and popup props removed, replaced with combined variant prop
• dark and light props replaced by theme prop
• focusable prop removed. component is focusable by default
• hover prop removed. component has hover state by default
• tile prop removed
• flat prop removed

v-expansion-panel

• added rounded and tile props through rounded composable
• added elevation prop through elevation composable
• added tag prop through tag composable
• added content and header props and slots
• added color (header) and bg-color (content)
• added props from v-expansion-panel-header
• remove readonly (this is just :model-value"")

v-expansion-panel-header

• renamed component to v-expansion-panel-title
• removed disable-icon-rotate prop. icon does not rotate by default
• added collapse-icon prop to match other components with two icon states (see v-checkbox)

• renamed component to v-expansion-panel-text

TODO

• documentation

Motivation and Context

v3

How Has This Been Tested?

playground, cypress tests

Markup:

<template>
  <v-app :theme="theme">
    <div>
      <v-btn @click="rtl = !rtl">rtl</v-btn>
      <v-btn @click="theme = theme === 'light' ? 'dark' : 'light'">theme</v-btn>
    </div>
    <v-locale-provider :rtl="rtl">
      <div class="ma-10 d-flex flex-column">
        Variants
        <div class="d-flex justify-space-around align-center flex-wrap">
          <template v-for="variant in ['default', 'accordion', 'inset', 'popout']" :key="variant">
            <v-expansion-panels multiple :variant="variant" class="ma-2">
              <v-expansion-panel
                v-for="(item,i) in 5"
                :key="i"
                title="This is prop header"
                text="This is prop content"
                rounded="xl"
              />
            </v-expansion-panels>
          </template>
        </div>

        Slots
        <v-expansion-panels multiple>
          <v-expansion-panel
            v-for="(item,i) in 5"
            :key="i"
            color="primary"
          >
            <template #title>
              <div>this is slot header</div>
              <v-btn size="small" density="compact" @click.stop="">foo</v-btn>
            </template>
            <template #text>
              this is slot contents
            </template>
          </v-expansion-panel>
        </v-expansion-panels>

        Default slot
        <v-expansion-panels multiple>
          <v-expansion-panel
            v-for="(item,i) in 5"
            :key="i"
            color="primary"
          >
            <v-expansion-panel-title>
              <div>this is slot header</div>
            </v-expansion-panel-title>
            <v-expansion-panel-text>
              this is slot content
            </v-expansion-panel-text>
          </v-expansion-panel>
        </v-expansion-panels>

        v-model
        <v-expansion-panels v-model="foo">
          <v-expansion-panel value="bar" title="bar" text="qwe" />
          <v-expansion-panel value="foo" title="foo" text="zxc" />
        </v-expansion-panels>

        <div>model-value</div>
        <v-expansion-panels model-value="foo">
          <v-expansion-panel value="bar" title="bar" text="qwe" />
          <v-expansion-panel value="foo" title="foo" text="zxc" />
        </v-expansion-panels>

        Multiple
        <v-expansion-panels multiple>
          <v-expansion-panel
            v-for="(item,i) in 3"
            :key="i"
            title="Item"
            text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
          />
        </v-expansion-panels>

        Rounded
        <v-expansion-panels>
          <v-expansion-panel
            v-for="(item,i) in 3"
            :key="i"
            title="Item"
            text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
            rounded="xl"
          />
        </v-expansion-panels>

        Elevation
        <v-expansion-panels>
          <v-expansion-panel
            v-for="(item,i) in 3"
            :key="i"
            title="Item"
            text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
            elevation="10"
          />
        </v-expansion-panels>

        Disabled
        <v-expansion-panels disabled>
          <v-expansion-panel
            v-for="(item,i) in 3"
            :key="i"
            title="Item"
            text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
          />
        </v-expansion-panels>

        Color
        <v-expansion-panels>
          <v-expansion-panel
            v-for="(item,i) in 3"
            :key="i"
            title="Item"
            text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
            color="primary"
            bg-color="secondary"
          />
        </v-expansion-panels>
      </div>
    </v-locale-provider>
  </v-app>
</template>

<script>
  export default {
    name: 'Playground',
    data: () => ({
      foo: null,
      model: 1,
      disabled: false,
      theme: 'light',
      rtl: false,
    }),
  }
</script>

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

• The PR title is no longer than 64 characters.
• The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
• My code follows the code style of this project.
• I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

[KaelWD]

Probably replace useBooted in VOverlay with this.

[KaelWD]

And delete bootable

[nekosaur]

I removed bootable but have not touched VOverlay. I wasn't sure what you meant by comment below, if the current onAfterLeave is broken or not?

[KaelWD]

I thought I'd broken it because there isn't anything in useBooted that sets it back to false, then I realised it's actually in an external event handler. Ideally all the lazy components should have the same behaviour, so onAfterLeave should maybe be part of the composable instead.

[nekosaur]

gotcha

[KaelWD]

There's also #6764 which I think I broke again at some point

vuetify/packages/vuetify/src/components/VOverlay/VOverlay.tsx

Lines 191 to 193 in fedb40b

	function onAfterLeave () {
	if (!props.eager) isBooted.value = false
	}

[johnleider]

A few points:

• Is there a way that we can avoid having to use !important?
• I love the re-use of the variant nomenclature
• What's your stance on density support?

[KaelWD]

added collapse-icon prop to match other components with two icon states

I wonder if something like this would be a good idea

{ expandIcon && collapseIcon
  ? <VRotateTransition>...icons somehow
  : just the one icon

Is there a way that we can avoid having to use !important?

Would be nice to get rid of all those :not()s too

[nekosaur]

Is there a way that we can avoid having to use !important?

Would be nice to get rid of all those :not()s too

I agree. However this is the solution I managed to come up with. The !importants are because of rounded-* using !important.

[nekosaur]

added collapse-icon prop to match other components with two icon states

I wonder if something like this would be a good idea

{ expandIcon && collapseIcon
  ? <VRotateTransition>...icons somehow
  : just the one icon

It's probably something that should be explored outside of this PR, since it would apply to several places/components

[KaelWD]

Let's go for it, if it needs more work we can clean up later.