@vuetify/nightly 3.0.0-alpha.3 → 3.0.0-beta.2

package/lib/components/VExpansionPanel/VExpansionPanel.sass

@@ -1,102 +1,95 @@
-@import './_variables.scss'
+@forward './variables'
+@use 'sass:math'
+@use '../../styles/settings'
+@use '../../styles/tools'
+@use './variables' as *
 
 // Theme
-+theme(v-expansion-panels) using ($material)
-  .v-expansion-panel
-    background-color: map-get($material, 'cards')
-    color: map-deep-get($material, 'text', 'primary')
-
-    &--disabled
-      color: map-deep-get($material, 'text', 'disabled')
-
-    &:not(:first-child)::after
-      border-color: map-get($material, 'dividers')
+.v-expansion-panel
+  background-color: $expansion-panel-background-color
+  color: $expansion-panel-color
 
-  .v-expansion-panel-header
-    .v-expansion-panel-header__icon
-      .v-icon
-        color: map-deep-get($material, 'icons', 'active')
+  &:not(:first-child)::after
+    border-color: $expansion-panel-border-color
 
-  &.v-expansion-panels--focusable
-    .v-expansion-panel-header
-      +states($material)
+  &--disabled
+    .v-expansion-panel-title
+      color: $expansion-panel-disabled-color
 
-  &.v-expansion-panels--hover
-    > .v-expansion-panel
-      > .v-expansion-panel-header
-        &:hover
-          +states($material)
+      .v-expansion-panel-title__overlay
+        // This is multiplied by the text opacity,
+        // so we need to divide it to get the desired value
+        // TODO: Should disabled be part of states mixin?
+        opacity: math.div($expansion-panel-disabled-overlay, $expansion-panel-disabled-opacity)
 
 // Block
 .v-expansion-panels
-  border-radius: $expansion-panel-border-radius
   display: flex
   flex-wrap: wrap
   justify-content: center
   list-style-type: none
   padding: 0
   width: 100%
+  position: relative
   z-index: 1
 
-  > *
-    cursor: auto
+  &:not(&--variant-accordion)
+    > :not(:first-child):not(:last-child):not(.v-expansion-panel--active):not(.v-expansion-panel--before-active)
+      border-bottom-left-radius: 0 !important
+      border-bottom-right-radius: 0 !important
+
+    > :not(:first-child):not(:last-child):not(.v-expansion-panel--active):not(.v-expansion-panel--after-active)
+      border-top-left-radius: 0 !important
+      border-top-right-radius: 0 !important
+
+    > :first-child:not(.v-expansion-panel--active):not(.v-expansion-panel--before-active)
+      border-bottom-left-radius: 0 !important
+      border-bottom-right-radius: 0 !important
 
-  > *:first-child
-    border-top-left-radius: inherit
-    border-top-right-radius: inherit
+    > :last-child:not(.v-expansion-panel--active):not(.v-expansion-panel--after-active)
+      border-top-left-radius: 0 !important
+      border-top-right-radius: 0 !important
 
-  > *:last-child
-    border-bottom-left-radius: inherit
-    border-bottom-right-radius: inherit
+  &--variant-accordion
+    > :first-child
+      border-bottom-left-radius: 0 !important
+      border-bottom-right-radius: 0 !important
 
-  // round corners on non-accordion/tile panels
-  &:not(&--accordion):not(&--tile)
-    > .v-expansion-panel
-      &--active
-        border-radius: $expansion-panel-border-radius
+    > :last-child
+      border-top-left-radius: 0 !important
+      border-top-right-radius: 0 !important
 
-        + .v-expansion-panel
-          border-top-left-radius: $expansion-panel-border-radius
-          border-top-right-radius: $expansion-panel-border-radius
+      .v-expansion-panel-title--active
+        border-bottom-left-radius: initial
+        border-bottom-right-radius: initial
 
-      &--next-active
-        border-bottom-left-radius: $expansion-panel-border-radius
-        border-bottom-right-radius: $expansion-panel-border-radius
+    > :not(:first-child):not(:last-child)
+      border-radius: 0 !important
 
-        .v-expansion-panel-header
-          border-bottom-left-radius: inherit
-          border-bottom-right-radius: inherit
+    .v-expansion-panel-title__overlay
+      transition: 0.3s border-radius settings.$standard-easing
 
 // Element
 .v-expansion-panel
   flex: 1 0 100%
   max-width: 100%
   position: relative
-  transition: .3s map-get($transition, 'swing')
-
-  &::before
-    border-radius: inherit
-    bottom: 0
-    content: ''
-    left: 0
-    position: absolute
-    right: 0
-    top: 0
-    z-index: -1
-    +elevationTransition()
-    +elevation(2)
+  transition: .3s all settings.$standard-easing
+  transition-property: margin-top, border-radius, border, max-width
+  border-radius: $expansion-panel-border-radius
 
   &:not(:first-child)::after
-    border-top: thin solid
+    border-top-style: solid
+    border-top-width: thin
     content: ''
     left: 0
     position: absolute
     right: 0
     top: 0
-    transition: .2s border-color map-get($transition, 'fast-out-slow-in'), .2s opacity map-get($transition, 'fast-out-slow-in')
+    transition: 0.3s opacity settings.$standard-easing
 
   &--disabled
-    .v-expansion-panel-header
+    .v-expansion-panel-title
       pointer-events: none
 
   &--active
@@ -107,105 +100,74 @@
       &::after
         opacity: 0
 
-    > .v-expansion-panel-header
-         min-height: $expansion-panel-active-header-min-height
-
-    > .v-expansion-panel-header--active .v-expansion-panel-header__icon
-      &:not(.v-expansion-panel-header__icon--disable-rotate) .v-icon
-        transform: rotate(-180deg)
-
-.v-expansion-panel-header__icon
-  display: inline-flex
-  margin-bottom: -4px
-  margin-top: -4px
-  user-select: none
-
-  +ltr()
-    margin-left: auto
+    > .v-expansion-panel-title
+      border-bottom-left-radius: 0
+      border-bottom-right-radius: 0
+      min-height: $expansion-panel-active-title-min-height
 
-  +rtl()
-    margin-right: auto
+.v-expansion-panel__shadow
+  @include tools.absolute()
+  @include tools.elevation(2)
+  border-radius: inherit
+  z-index: -1
 
-.v-expansion-panel-header
+.v-expansion-panel-title
   align-items: center
-  border-top-left-radius: inherit
-  border-top-right-radius: inherit
+  border-radius: inherit
   display: flex
-  font-size: $expansion-panel-header-font-size
+  font-size: $expansion-panel-title-font-size
   line-height: 1
-  min-height: $expansion-panel-header-min-height
+  min-height: $expansion-panel-title-min-height
   outline: none
-  padding: $expansion-panel-header-padding
+  padding: $expansion-panel-title-padding
   position: relative
-  transition: .3s min-height map-get($transition, 'swing')
+  transition: .3s min-height settings.$standard-easing
   width: 100%
+  justify-content: space-between
+  @include tools.states('.v-expansion-panel-title__overlay', true)
 
-  +ltr()
-    text-align: left
-
-  +rtl()
-    text-align: right
-
-  &:not(.v-expansion-panel-header--mousedown):focus::before
+  &--active::before
     opacity: 0.12
 
-  &:before
-    background-color: currentColor
-    border-radius: inherit
-    bottom: 0
-    content: ''
-    left: 0
-    opacity: 0
-    pointer-events: none
-    position: absolute
-    right: 0
-    top: 0
-    transition: .3s opacity map-get($transition, 'swing')
+.v-expansion-panel-title__overlay
+  @include tools.absolute()
+  background-color: currentColor
+  border-radius: inherit
+  opacity: 0
 
-  > *:not(.v-expansion-panel-header__icon)
-    flex: 1 1 auto
+.v-expansion-panel-title__icon
+  display: inline-flex
+  margin-bottom: -4px
+  margin-top: -4px
+  user-select: none
+  margin-inline-start: auto
 
-.v-expansion-panel-content
+.v-expansion-panel-text
   display: flex
 
-  &__wrap
-    padding: $expansion-panel-content-padding
+  &__wrapper
+    padding: $expansion-panel-text-padding
     flex: 1 1 auto
     max-width: 100%
 
-// Modifier
-.v-expansion-panels--accordion
+// Variants
+.v-expansion-panels--variant-accordion
   > .v-expansion-panel
     margin-top: 0
 
     &::after
       opacity: 1
 
-.v-expansion-panels--popout
+.v-expansion-panels--variant-popout
   > .v-expansion-panel
     max-width: $expansion-panel-popout-max-width
 
     &--active
       max-width: $expansion-panel-popout-active-max-width
 
-.v-expansion-panels--inset
+.v-expansion-panels--variant-inset
   > .v-expansion-panel
     max-width: $expansion-panel-inset-max-width
 
     &--active
       max-width: $expansion-panel-inset-active-max-width
-
-.v-expansion-panels--flat
-  > .v-expansion-panel
-    &::after
-      border-top: none
-
-    &::before
-      +elevation(0)
-
-.v-expansion-panels--tile
-  border-radius: 0
-
-  > .v-expansion-panel
-    &::before
-      border-radius: 0

package/lib/components/VExpansionPanel/VExpansionPanelText.mjs

@@ -0,0 +1,42 @@
+import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
+// Components
+import { VExpandTransition } from "../transitions/index.mjs";
+import { VExpansionPanelSymbol } from "./VExpansionPanels.mjs"; // Composables
+
+import { makeLazyProps, useLazy } from "../../composables/lazy.mjs"; // Utilities
+
+import { defineComponent, useRender } from "../../util/index.mjs";
+import { inject } from 'vue';
+export const VExpansionPanelText = defineComponent({
+  name: 'VExpansionPanelText',
+  props: { ...makeLazyProps()
+  },
+
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const expansionPanel = inject(VExpansionPanelSymbol);
+    if (!expansionPanel) throw new Error('[Vuetify] v-expansion-panel-text needs to be placed inside v-expansion-panel');
+    const {
+      hasContent,
+      onAfterLeave
+    } = useLazy(props, expansionPanel.isSelected);
+    useRender(() => {
+      var _slots$default;
+
+      return _createVNode(VExpandTransition, {
+        "onAfterLeave": onAfterLeave
+      }, {
+        default: () => [_withDirectives(_createVNode("div", {
+          "class": "v-expansion-panel-text"
+        }, [slots.default && hasContent.value && _createVNode("div", {
+          "class": "v-expansion-panel-text__wrapper"
+        }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)])]), [[_vShow, expansionPanel.isSelected.value]])]
+      });
+    });
+    return {};
+  }
+
+});
+//# sourceMappingURL=VExpansionPanelText.mjs.map

package/lib/components/VExpansionPanel/VExpansionPanelText.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/VExpansionPanel/VExpansionPanelText.tsx"],"names":["VExpandTransition","VExpansionPanelSymbol","makeLazyProps","useLazy","defineComponent","useRender","inject","VExpansionPanelText","name","props","setup","slots","expansionPanel","Error","hasContent","onAfterLeave","isSelected","default","value"],"mappings":";AAAA;SACSA,iB;SACAC,qB,kCAET;;SACSC,a,EAAeC,O,sCAExB;;SACSC,e,EAAiBC,S;AAC1B,SAASC,MAAT,QAAuB,KAAvB;AAEA,OAAO,MAAMC,mBAAmB,GAAGH,eAAe,CAAC;AACjDI,EAAAA,IAAI,EAAE,qBAD2C;AAGjDC,EAAAA,KAAK,EAAE,EACL,GAAGP,aAAa;AADX,GAH0C;;AAOjDQ,EAAAA,KAAK,CAAED,KAAF,QAAoB;AAAA,QAAX;AAAEE,MAAAA;AAAF,KAAW;AACvB,UAAMC,cAAc,GAAGN,MAAM,CAACL,qBAAD,CAA7B;AAEA,QAAI,CAACW,cAAL,EAAqB,MAAM,IAAIC,KAAJ,CAAU,8EAAV,CAAN;AAErB,UAAM;AAAEC,MAAAA,UAAF;AAAcC,MAAAA;AAAd,QAA+BZ,OAAO,CAACM,KAAD,EAAQG,cAAc,CAACI,UAAvB,CAA5C;AAEAX,IAAAA,SAAS,CAAC;AAAA;;AAAA;AAAA,wBAC0BU;AAD1B;AAAA;AAAA,mBAGE;AAHF,YAMFJ,KAAK,CAACM,OAAN,IAAiBH,UAAU,CAACI,KAA5B;AAAA,mBACW;AADX,8BAEIP,KAAK,CAACM,OAFV,qBAEI,oBAAAN,KAAK,CAFT,EANE,cAIKC,cAAc,CAACI,UAAf,CAA0BE,KAJ/B;AAAA;AAAA,KAAD,CAAT;AAeA,WAAO,EAAP;AACD;;AA9BgD,CAAD,CAA3C","sourcesContent":["// Components\nimport { VExpandTransition } from '@/components/transitions'\nimport { VExpansionPanelSymbol } from './VExpansionPanels'\n\n// Composables\nimport { makeLazyProps, useLazy } from '@/composables/lazy'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\nimport { inject } from 'vue'\n\nexport const VExpansionPanelText = defineComponent({\n  name: 'VExpansionPanelText',\n\n  props: {\n    ...makeLazyProps(),\n  },\n\n  setup (props, { slots }) {\n    const expansionPanel = inject(VExpansionPanelSymbol)\n\n    if (!expansionPanel) throw new Error('[Vuetify] v-expansion-panel-text needs to be placed inside v-expansion-panel')\n\n    const { hasContent, onAfterLeave } = useLazy(props, expansionPanel.isSelected)\n\n    useRender(() => (\n      <VExpandTransition onAfterLeave={ onAfterLeave }>\n        <div\n          class=\"v-expansion-panel-text\"\n          v-show={ expansionPanel.isSelected.value }\n        >\n          { slots.default && hasContent.value && (\n            <div class=\"v-expansion-panel-text__wrapper\">\n              { slots.default?.() }\n            </div>\n          ) }\n        </div>\n      </VExpandTransition>\n    ))\n\n    return {}\n  },\n})\n\nexport type VExpansionPanelText = InstanceType<typeof VExpansionPanelText>\n"],"file":"VExpansionPanelText.mjs"}

package/lib/components/VExpansionPanel/VExpansionPanelTitle.mjs

@@ -0,0 +1,79 @@
+import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
+// Components
+import { VIcon } from "../VIcon/index.mjs";
+import { VExpansionPanelSymbol } from "./VExpansionPanels.mjs"; // Composables
+
+import { useBackgroundColor } from "../../composables/color.mjs"; // Directives
+
+import { Ripple } from "../../directives/ripple/index.mjs"; // Utilities
+
+import { computed, inject } from 'vue';
+import { defineComponent, propsFactory, useRender } from "../../util/index.mjs";
+export const makeVExpansionPanelTitleProps = propsFactory({
+  color: String,
+  expandIcon: {
+    type: String,
+    default: '$expand'
+  },
+  collapseIcon: {
+    type: String,
+    default: '$collapse'
+  },
+  hideActions: Boolean,
+  ripple: {
+    type: [Boolean, Object],
+    default: false
+  },
+  readonly: Boolean
+});
+export const VExpansionPanelTitle = defineComponent({
+  name: 'VExpansionPanelTitle',
+  directives: {
+    Ripple
+  },
+  props: { ...makeVExpansionPanelTitleProps()
+  },
+
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const expansionPanel = inject(VExpansionPanelSymbol);
+    if (!expansionPanel) throw new Error('[Vuetify] v-expansion-panel-title needs to be placed inside v-expansion-panel');
+    const {
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(props, 'color');
+    const slotProps = computed(() => ({
+      collapseIcon: props.collapseIcon,
+      disabled: expansionPanel.disabled.value,
+      expanded: expansionPanel.isSelected.value,
+      expandIcon: props.expandIcon,
+      readonly: props.readonly
+    }));
+    useRender(() => {
+      var _slots$default;
+
+      return _withDirectives(_createVNode("button", {
+        "class": ['v-expansion-panel-title', {
+          'v-expansion-panel-title--active': expansionPanel.isSelected.value
+        }, backgroundColorClasses.value],
+        "style": backgroundColorStyles.value,
+        "type": "button",
+        "tabindex": expansionPanel.disabled.value ? -1 : undefined,
+        "disabled": expansionPanel.disabled.value,
+        "aria-expanded": expansionPanel.isSelected.value,
+        "onClick": !props.readonly ? expansionPanel.toggle : undefined
+      }, [_createVNode("div", {
+        "class": "v-expansion-panel-title__overlay"
+      }, null), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, slotProps.value), !props.hideActions && _createVNode("div", {
+        "class": "v-expansion-panel-title__icon"
+      }, [slots.actions ? slots.actions(slotProps.value) : _createVNode(VIcon, {
+        "icon": expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon
+      }, null)])]), [[_resolveDirective("ripple"), props.ripple]]);
+    });
+    return {};
+  }
+
+});
+//# sourceMappingURL=VExpansionPanelTitle.mjs.map

package/lib/components/VExpansionPanel/VExpansionPanelTitle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/VExpansionPanel/VExpansionPanelTitle.tsx"],"names":["VIcon","VExpansionPanelSymbol","useBackgroundColor","Ripple","computed","inject","defineComponent","propsFactory","useRender","makeVExpansionPanelTitleProps","color","String","expandIcon","type","default","collapseIcon","hideActions","Boolean","ripple","Object","readonly","VExpansionPanelTitle","name","directives","props","setup","slots","expansionPanel","Error","backgroundColorClasses","backgroundColorStyles","slotProps","disabled","value","expanded","isSelected","undefined","toggle","actions"],"mappings":"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","sourcesContent":["// Components\nimport { VIcon } from '@/components/VIcon'\nimport { VExpansionPanelSymbol } from './VExpansionPanels'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Utilities\nimport { computed, inject } from 'vue'\nimport { defineComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVExpansionPanelTitleProps = propsFactory({\n  color: String,\n  expandIcon: {\n    type: String,\n    default: '$expand',\n  },\n  collapseIcon: {\n    type: String,\n    default: '$collapse',\n  },\n  hideActions: Boolean,\n  ripple: {\n    type: [Boolean, Object],\n    default: false,\n  },\n  readonly: Boolean,\n})\n\nexport const VExpansionPanelTitle = defineComponent({\n  name: 'VExpansionPanelTitle',\n\n  directives: { Ripple },\n\n  props: {\n    ...makeVExpansionPanelTitleProps(),\n  },\n\n  setup (props, { slots }) {\n    const expansionPanel = inject(VExpansionPanelSymbol)\n\n    if (!expansionPanel) throw new Error('[Vuetify] v-expansion-panel-title needs to be placed inside v-expansion-panel')\n\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'color')\n\n    const slotProps = computed(() => ({\n      collapseIcon: props.collapseIcon,\n      disabled: expansionPanel.disabled.value,\n      expanded: expansionPanel.isSelected.value,\n      expandIcon: props.expandIcon,\n      readonly: props.readonly,\n    }))\n\n    useRender(() => (\n      <button\n        class={[\n          'v-expansion-panel-title',\n          {\n            'v-expansion-panel-title--active': expansionPanel.isSelected.value,\n          },\n          backgroundColorClasses.value,\n        ]}\n        style={ backgroundColorStyles.value }\n        type=\"button\"\n        tabindex={ expansionPanel.disabled.value ? -1 : undefined }\n        disabled={ expansionPanel.disabled.value }\n        aria-expanded={ expansionPanel.isSelected.value }\n        onClick={ !props.readonly ? expansionPanel.toggle : undefined }\n        v-ripple={ props.ripple }\n      >\n        <div class=\"v-expansion-panel-title__overlay\" />\n\n        { slots.default?.(slotProps.value) }\n\n        { !props.hideActions && (\n          <div class=\"v-expansion-panel-title__icon\">\n            {\n              slots.actions ? slots.actions(slotProps.value)\n              : <VIcon icon={ expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon } />\n            }\n          </div>\n        ) }\n      </button>\n    ))\n\n    return {}\n  },\n})\n\nexport type VExpansionPanelTitle = InstanceType<typeof VExpansionPanelTitle>\n"],"file":"VExpansionPanelTitle.mjs"}

package/lib/components/VExpansionPanel/VExpansionPanels.mjs

@@ -1,71 +1,57 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
 // Styles
-import "./VExpansionPanel.sass"; // Components
-
-import { BaseItemGroup } from "../VItemGroup/VItemGroup.mjs";
-// Utilities
-import { breaking } from "../../util/console.mjs"; // Types
+import "./VExpansionPanel.css"; // Composables
 
-/* @vue/component */
-export default BaseItemGroup.extend({
-  name: 'v-expansion-panels',
+import { makeGroupProps, useGroup } from "../../composables/group.mjs";
+import { makeTagProps } from "../../composables/tag.mjs";
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
+import { provideDefaults } from "../../composables/defaults.mjs"; // Utilities
 
-  provide() {
-    return {
-      expansionPanels: this
-    };
-  },
+import { computed, toRef } from 'vue';
+import { defineComponent, useRender } from "../../util/index.mjs"; // Types
 
+export const VExpansionPanelSymbol = Symbol.for('vuetify:v-expansion-panel');
+const allowedVariants = ['default', 'accordion', 'inset', 'popout'];
+export const VExpansionPanels = defineComponent({
+  name: 'VExpansionPanels',
   props: {
-    accordion: Boolean,
-    disabled: Boolean,
-    flat: Boolean,
-    hover: Boolean,
-    focusable: Boolean,
-    inset: Boolean,
-    popout: Boolean,
+    color: String,
+    variant: {
+      type: String,
+      default: 'default',
+      validator: v => allowedVariants.includes(v)
+    },
     readonly: Boolean,
-    tile: Boolean
-  },
-  computed: {
-    classes() {
-      return { ...BaseItemGroup.options.computed.classes.call(this),
-        'v-expansion-panels': true,
-        'v-expansion-panels--accordion': this.accordion,
-        'v-expansion-panels--flat': this.flat,
-        'v-expansion-panels--hover': this.hover,
-        'v-expansion-panels--focusable': this.focusable,
-        'v-expansion-panels--inset': this.inset,
-        'v-expansion-panels--popout': this.popout,
-        'v-expansion-panels--tile': this.tile
-      };
-    }
-
+    ...makeGroupProps(),
+    ...makeTagProps(),
+    ...makeThemeProps()
   },
-
-  created() {
-    /* istanbul ignore next */
-    if (this.$attrs.hasOwnProperty('expand')) {
-      breaking('expand', 'multiple', this);
-    }
-    /* istanbul ignore next */
-
-
-    if (Array.isArray(this.value) && this.value.length > 0 && typeof this.value[0] === 'boolean') {
-      breaking(':value="[true, false, true]"', ':value="[0, 2]"', this);
-    }
+  emits: {
+    'update:modelValue': val => true
   },
 
-  methods: {
-    updateItem(item, index) {
-      const value = this.getValue(item, index);
-      const nextValue = this.getValue(item, index + 1);
-      item.isActive = this.toggleMethod(value);
-      item.nextIsActive = this.toggleMethod(nextValue);
-    }
-
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    useGroup(props, VExpansionPanelSymbol);
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const variantClass = computed(() => props.variant && `v-expansion-panels--variant-${props.variant}`);
+    provideDefaults({
+      VExpansionPanel: {
+        color: toRef(props, 'color')
+      },
+      VExpansionPanelTitle: {
+        readonly: toRef(props, 'readonly')
+      }
+    });
+    useRender(() => _createVNode(props.tag, {
+      "class": ['v-expansion-panels', themeClasses.value, variantClass.value]
+    }, slots));
+    return {};
   }
+
 });
 //# sourceMappingURL=VExpansionPanels.mjs.map

package/lib/components/VExpansionPanel/VExpansionPanels.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VExpansionPanel/VExpansionPanels.ts"],"names":["BaseItemGroup","breaking","extend","name","provide","expansionPanels","props","accordion","Boolean","disabled","flat","hover","focusable","inset","popout","readonly","tile","computed","classes","options","call","created","$attrs","hasOwnProperty","Array","isArray","value","length","methods","updateItem","item","index","getValue","nextValue","isActive","toggleMethod","nextIsActive"],"mappings":"AAAA;;AACA;AAEA;AACA,gC,CAEA;;SACSA,a;AAGT;SACSC,Q,kCAET;;AAGA;AACA,eAAeD,aAAa,CAACE,MAAd,CAAqB;AAClCC,EAAAA,IAAI,EAAE,oBAD4B;;AAGlCC,EAAAA,OAAO,GAAY;AACjB,WAAO;AACLC,MAAAA,eAAe,EAAE;AADZ,KAAP;AAGD,GAPiC;;AASlCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,SAAS,EAAEC,OADN;AAELC,IAAAA,QAAQ,EAAED,OAFL;AAGLE,IAAAA,IAAI,EAAEF,OAHD;AAILG,IAAAA,KAAK,EAAEH,OAJF;AAKLI,IAAAA,SAAS,EAAEJ,OALN;AAMLK,IAAAA,KAAK,EAAEL,OANF;AAOLM,IAAAA,MAAM,EAAEN,OAPH;AAQLO,IAAAA,QAAQ,EAAEP,OARL;AASLQ,IAAAA,IAAI,EAAER;AATD,GAT2B;AAqBlCS,EAAAA,QAAQ,EAAE;AACRC,IAAAA,OAAO,GAAY;AACjB,aAAO,EACL,GAAGlB,aAAa,CAACmB,OAAd,CAAsBF,QAAtB,CAA+BC,OAA/B,CAAuCE,IAAvC,CAA4C,IAA5C,CADE;AAEL,8BAAsB,IAFjB;AAGL,yCAAiC,KAAKb,SAHjC;AAIL,oCAA4B,KAAKG,IAJ5B;AAKL,qCAA6B,KAAKC,KAL7B;AAML,yCAAiC,KAAKC,SANjC;AAOL,qCAA6B,KAAKC,KAP7B;AAQL,sCAA8B,KAAKC,MAR9B;AASL,oCAA4B,KAAKE;AAT5B,OAAP;AAWD;;AAbO,GArBwB;;AAqClCK,EAAAA,OAAO,GAAI;AACT;AACA,QAAI,KAAKC,MAAL,CAAYC,cAAZ,CAA2B,QAA3B,CAAJ,EAA0C;AACxCtB,MAAAA,QAAQ,CAAC,QAAD,EAAW,UAAX,EAAuB,IAAvB,CAAR;AACD;AAED;;;AACA,QACEuB,KAAK,CAACC,OAAN,CAAc,KAAKC,KAAnB,KACA,KAAKA,KAAL,CAAWC,MAAX,GAAoB,CADpB,IAEA,OAAO,KAAKD,KAAL,CAAW,CAAX,CAAP,KAAyB,SAH3B,EAIE;AACAzB,MAAAA,QAAQ,CAAC,8BAAD,EAAiC,iBAAjC,EAAoD,IAApD,CAAR;AACD;AACF,GAnDiC;;AAqDlC2B,EAAAA,OAAO,EAAE;AACPC,IAAAA,UAAU,CAAEC,IAAF,EAAqDC,KAArD,EAAoE;AAC5E,YAAML,KAAK,GAAG,KAAKM,QAAL,CAAcF,IAAd,EAAoBC,KAApB,CAAd;AACA,YAAME,SAAS,GAAG,KAAKD,QAAL,CAAcF,IAAd,EAAoBC,KAAK,GAAG,CAA5B,CAAlB;AAEAD,MAAAA,IAAI,CAACI,QAAL,GAAgB,KAAKC,YAAL,CAAkBT,KAAlB,CAAhB;AACAI,MAAAA,IAAI,CAACM,YAAL,GAAoB,KAAKD,YAAL,CAAkBF,SAAlB,CAApB;AACD;;AAPM;AArDyB,CAArB,CAAf","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Styles\nimport './VExpansionPanel.sass'\n\n// Components\nimport { BaseItemGroup, GroupableInstance } from '../VItemGroup/VItemGroup'\nimport VExpansionPanel from './VExpansionPanel'\n\n// Utilities\nimport { breaking } from '../../util/console'\n\n// Types\ninterface VExpansionPanelInstance extends InstanceType<typeof VExpansionPanel> {}\n\n/* @vue/component */\nexport default BaseItemGroup.extend({\n  name: 'v-expansion-panels',\n\n  provide (): object {\n    return {\n      expansionPanels: this,\n    }\n  },\n\n  props: {\n    accordion: Boolean,\n    disabled: Boolean,\n    flat: Boolean,\n    hover: Boolean,\n    focusable: Boolean,\n    inset: Boolean,\n    popout: Boolean,\n    readonly: Boolean,\n    tile: Boolean,\n  },\n\n  computed: {\n    classes (): object {\n      return {\n        ...BaseItemGroup.options.computed.classes.call(this),\n        'v-expansion-panels': true,\n        'v-expansion-panels--accordion': this.accordion,\n        'v-expansion-panels--flat': this.flat,\n        'v-expansion-panels--hover': this.hover,\n        'v-expansion-panels--focusable': this.focusable,\n        'v-expansion-panels--inset': this.inset,\n        'v-expansion-panels--popout': this.popout,\n        'v-expansion-panels--tile': this.tile,\n      }\n    },\n  },\n\n  created () {\n    /* istanbul ignore next */\n    if (this.$attrs.hasOwnProperty('expand')) {\n      breaking('expand', 'multiple', this)\n    }\n\n    /* istanbul ignore next */\n    if (\n      Array.isArray(this.value) &&\n      this.value.length > 0 &&\n      typeof this.value[0] === 'boolean'\n    ) {\n      breaking(':value=\"[true, false, true]\"', ':value=\"[0, 2]\"', this)\n    }\n  },\n\n  methods: {\n    updateItem (item: GroupableInstance & VExpansionPanelInstance, index: number) {\n      const value = this.getValue(item, index)\n      const nextValue = this.getValue(item, index + 1)\n\n      item.isActive = this.toggleMethod(value)\n      item.nextIsActive = this.toggleMethod(nextValue)\n    },\n  },\n})\n"],"file":"VExpansionPanels.mjs"}
+{"version":3,"sources":["../../../src/components/VExpansionPanel/VExpansionPanels.tsx"],"names":["makeGroupProps","useGroup","makeTagProps","makeThemeProps","provideTheme","provideDefaults","computed","toRef","defineComponent","useRender","VExpansionPanelSymbol","Symbol","for","allowedVariants","VExpansionPanels","name","props","color","String","variant","type","default","validator","v","includes","readonly","Boolean","emits","val","setup","slots","themeClasses","variantClass","VExpansionPanel","VExpansionPanelTitle","value"],"mappings":";AAAA;AACA,+B,CAEA;;SACSA,c,EAAgBC,Q;SAChBC,Y;SACAC,c,EAAgBC,Y;SAChBC,e,0CAET;;AACA,SAASC,QAAT,EAAmBC,KAAnB,QAAgC,KAAhC;SACSC,e,EAAiBC,S,gCAE1B;;AAIA,OAAO,MAAMC,qBAAqD,GAAGC,MAAM,CAACC,GAAP,CAAW,2BAAX,CAA9D;AAEP,MAAMC,eAAe,GAAG,CAAC,SAAD,EAAY,WAAZ,EAAyB,OAAzB,EAAkC,QAAlC,CAAxB;AAIA,OAAO,MAAMC,gBAAgB,GAAGN,eAAe,CAAC;AAC9CO,EAAAA,IAAI,EAAE,kBADwC;AAG9CC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAEC,MADF;AAELC,IAAAA,OAAO,EAAE;AACPC,MAAAA,IAAI,EAAEF,MADC;AAEPG,MAAAA,OAAO,EAAE,SAFF;AAGPC,MAAAA,SAAS,EAAGC,CAAD,IAAYV,eAAe,CAACW,QAAhB,CAAyBD,CAAzB;AAHhB,KAFJ;AAOLE,IAAAA,QAAQ,EAAEC,OAPL;AASL,OAAG1B,cAAc,EATZ;AAUL,OAAGE,YAAY,EAVV;AAWL,OAAGC,cAAc;AAXZ,GAHuC;AAiB9CwB,EAAAA,KAAK,EAAE;AACL,yBAAsBC,GAAD,IAAkB;AADlC,GAjBuC;;AAqB9CC,EAAAA,KAAK,CAAEb,KAAF,QAAoB;AAAA,QAAX;AAAEc,MAAAA;AAAF,KAAW;AACvB7B,IAAAA,QAAQ,CAACe,KAAD,EAAQN,qBAAR,CAAR;AAEA,UAAM;AAAEqB,MAAAA;AAAF,QAAmB3B,YAAY,CAACY,KAAD,CAArC;AAEA,UAAMgB,YAAY,GAAG1B,QAAQ,CAAC,MAAMU,KAAK,CAACG,OAAN,IAAkB,+BAA8BH,KAAK,CAACG,OAAQ,EAArE,CAA7B;AAEAd,IAAAA,eAAe,CAAC;AACd4B,MAAAA,eAAe,EAAE;AACfhB,QAAAA,KAAK,EAAEV,KAAK,CAACS,KAAD,EAAQ,OAAR;AADG,OADH;AAIdkB,MAAAA,oBAAoB,EAAE;AACpBT,QAAAA,QAAQ,EAAElB,KAAK,CAACS,KAAD,EAAQ,UAAR;AADK;AAJR,KAAD,CAAf;AASAP,IAAAA,SAAS,CAAC;AAAA,eAEC,CACL,oBADK,EAELsB,YAAY,CAACI,KAFR,EAGLH,YAAY,CAACG,KAHR;AAFD,OAOIL,KAPJ,CAAD,CAAT;AAWA,WAAO,EAAP;AACD;;AAjD6C,CAAD,CAAxC","sourcesContent":["// Styles\nimport './VExpansionPanel.sass'\n\n// Composables\nimport { makeGroupProps, useGroup } from '@/composables/group'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { defineComponent, useRender } from '@/util'\n\n// Types\nimport type { InjectionKey, PropType } from 'vue'\nimport type { GroupItemProvide } from '@/composables/group'\n\nexport const VExpansionPanelSymbol: InjectionKey<GroupItemProvide> = Symbol.for('vuetify:v-expansion-panel')\n\nconst allowedVariants = ['default', 'accordion', 'inset', 'popout'] as const\n\ntype Variant = typeof allowedVariants[number]\n\nexport const VExpansionPanels = defineComponent({\n  name: 'VExpansionPanels',\n\n  props: {\n    color: String,\n    variant: {\n      type: String as PropType<Variant>,\n      default: 'default',\n      validator: (v: any) => allowedVariants.includes(v),\n    },\n    readonly: Boolean,\n\n    ...makeGroupProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  emits: {\n    'update:modelValue': (val: unknown) => true,\n  },\n\n  setup (props, { slots }) {\n    useGroup(props, VExpansionPanelSymbol)\n\n    const { themeClasses } = provideTheme(props)\n\n    const variantClass = computed(() => props.variant && `v-expansion-panels--variant-${props.variant}`)\n\n    provideDefaults({\n      VExpansionPanel: {\n        color: toRef(props, 'color'),\n      },\n      VExpansionPanelTitle: {\n        readonly: toRef(props, 'readonly'),\n      },\n    })\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-expansion-panels',\n          themeClasses.value,\n          variantClass.value,\n        ]}\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n\nexport type VExpansionPanels = InstanceType<typeof VExpansionPanels>\n"],"file":"VExpansionPanels.mjs"}

package/lib/components/VExpansionPanel/_variables.scss

@@ -1,13 +1,19 @@
-@import '../../styles/styles.sass';
+@use '../../styles/settings';
 
-$expansion-panel-border-radius: $border-radius-root !default;
+$expansion-panel-background-color: rgb(var(--v-theme-surface)) !default;
+$expansion-panel-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
+$expansion-panel-border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !default;
+$expansion-panel-border-radius: settings.$border-radius-root !default;
 $expansion-panel-active-margin: 16px !default;
-$expansion-panel-header-font-size: 0.9375rem !default;
-$expansion-panel-header-min-height: 48px !default;
-$expansion-panel-active-header-min-height: 64px !default;
-$expansion-panel-header-padding: 16px 24px !default;
-$expansion-panel-content-padding: 0 24px 16px !default;
+$expansion-panel-title-font-size: 0.9375rem !default;
+$expansion-panel-title-min-height: 48px !default;
+$expansion-panel-active-title-min-height: 64px !default;
+$expansion-panel-title-padding: 16px 24px !default;
+$expansion-panel-text-padding: 8px 24px 16px !default;
 $expansion-panel-popout-max-width: calc(100% - #{$expansion-panel-active-margin * 2}) !default;
 $expansion-panel-popout-active-max-width: calc(100% + #{$expansion-panel-active-margin}) !default;
 $expansion-panel-inset-max-width: 100% !default;
 $expansion-panel-inset-active-max-width: calc(100% - #{$expansion-panel-active-margin * 2}) !default;
+$expansion-panel-disabled-opacity: 0.26 !default;
+$expansion-panel-disabled-overlay: 0.12 !default;
+$expansion-panel-disabled-color: rgba(var(--v-theme-on-surface), $expansion-panel-disabled-opacity) !default;

package/lib/components/VExpansionPanel/index.mjs

@@ -1,14 +1,5 @@
-import VExpansionPanels from "./VExpansionPanels.mjs";
-import VExpansionPanel from "./VExpansionPanel.mjs";
-import VExpansionPanelContent from "./VExpansionPanelContent.mjs";
-import VExpansionPanelHeader from "./VExpansionPanelHeader.mjs";
-export { VExpansionPanels, VExpansionPanel, VExpansionPanelHeader, VExpansionPanelContent };
-export default {
-  $_vuetify_subcomponents: {
-    VExpansionPanels,
-    VExpansionPanel,
-    VExpansionPanelHeader,
-    VExpansionPanelContent
-  }
-};
+export { VExpansionPanels } from "./VExpansionPanels.mjs";
+export { VExpansionPanel } from "./VExpansionPanel.mjs";
+export { VExpansionPanelText } from "./VExpansionPanelText.mjs";
+export { VExpansionPanelTitle } from "./VExpansionPanelTitle.mjs";
 //# sourceMappingURL=index.mjs.map