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

package/lib/components/VExpansionPanel/VExpansionPanel.sass

@@ -1,102 +1,94 @@
-@import './_variables.scss'
+@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 +99,75 @@
       &::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
+  text-align: start
+  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,"file":"VExpansionPanelText.mjs","names":["VExpandTransition","VExpansionPanelSymbol","makeLazyProps","useLazy","defineComponent","useRender","inject","VExpansionPanelText","name","props","setup","slots","expansionPanel","Error","hasContent","onAfterLeave","isSelected","default","value"],"sources":["../../../src/components/VExpansionPanel/VExpansionPanelText.tsx"],"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"],"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;EACjDI,IAAI,EAAE,qBAD2C;EAGjDC,KAAK,EAAE,EACL,GAAGP,aAAa;EADX,CAH0C;;EAOjDQ,KAAK,CAAED,KAAF,QAAoB;IAAA,IAAX;MAAEE;IAAF,CAAW;IACvB,MAAMC,cAAc,GAAGN,MAAM,CAACL,qBAAD,CAA7B;IAEA,IAAI,CAACW,cAAL,EAAqB,MAAM,IAAIC,KAAJ,CAAU,8EAAV,CAAN;IAErB,MAAM;MAAEC,UAAF;MAAcC;IAAd,IAA+BZ,OAAO,CAACM,KAAD,EAAQG,cAAc,CAACI,UAAvB,CAA5C;IAEAX,SAAS,CAAC;MAAA;;MAAA;QAAA,gBAC0BU;MAD1B;QAAA;UAAA,SAGE;QAHF,IAMFJ,KAAK,CAACM,OAAN,IAAiBH,UAAU,CAACI,KAA5B;UAAA,SACW;QADX,sBAEIP,KAAK,CAACM,OAFV,qBAEI,oBAAAN,KAAK,CAFT,EANE,cAIKC,cAAc,CAACI,UAAf,CAA0BE,KAJ/B;MAAA;IAAA,CAAD,CAAT;IAeA,OAAO,EAAP;EACD;;AA9BgD,CAAD,CAA3C"}

package/lib/components/VExpansionPanel/VExpansionPanelTitle.mjs

@@ -0,0 +1,80 @@
+import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
+// Components
+import { VExpansionPanelSymbol } from "./VExpansionPanels.mjs";
+import { VIcon } from "../VIcon/index.mjs"; // Directives
+
+import { Ripple } from "../../directives/ripple/index.mjs"; // Composables
+
+import { IconValue } from "../../composables/icons.mjs";
+import { useBackgroundColor } from "../../composables/color.mjs"; // Utilities
+
+import { computed, inject } from 'vue';
+import { defineComponent, propsFactory, useRender } from "../../util/index.mjs";
+export const makeVExpansionPanelTitleProps = propsFactory({
+  color: String,
+  expandIcon: {
+    type: IconValue,
+    default: '$expand'
+  },
+  collapseIcon: {
+    type: IconValue,
+    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("span", {
+        "class": "v-expansion-panel-title__overlay"
+      }, null), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, slotProps.value), !props.hideActions && _createVNode("span", {
+        "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,"file":"VExpansionPanelTitle.mjs","names":["VExpansionPanelSymbol","VIcon","Ripple","IconValue","useBackgroundColor","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"],"sources":["../../../src/components/VExpansionPanel/VExpansionPanelTitle.tsx"],"sourcesContent":["// Components\nimport { VExpansionPanelSymbol } from './VExpansionPanels'\nimport { VIcon } from '@/components/VIcon'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { useBackgroundColor } from '@/composables/color'\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: IconValue,\n    default: '$expand',\n  },\n  collapseIcon: {\n    type: IconValue,\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        <span class=\"v-expansion-panel-title__overlay\" />\n\n        { slots.default?.(slotProps.value) }\n\n        { !props.hideActions && (\n          <span 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          </span>\n        ) }\n      </button>\n    ))\n\n    return {}\n  },\n})\n\nexport type VExpansionPanelTitle = InstanceType<typeof VExpansionPanelTitle>\n"],"mappings":";AAAA;SACSA,qB;SACAC,K,8BAET;;SACSC,M,6CAET;;SACSC,S;SACAC,kB,uCAET;;AACA,SAASC,QAAT,EAAmBC,MAAnB,QAAiC,KAAjC;SACSC,e,EAAiBC,Y,EAAcC,S;AAExC,OAAO,MAAMC,6BAA6B,GAAGF,YAAY,CAAC;EACxDG,KAAK,EAAEC,MADiD;EAExDC,UAAU,EAAE;IACVC,IAAI,EAAEX,SADI;IAEVY,OAAO,EAAE;EAFC,CAF4C;EAMxDC,YAAY,EAAE;IACZF,IAAI,EAAEX,SADM;IAEZY,OAAO,EAAE;EAFG,CAN0C;EAUxDE,WAAW,EAAEC,OAV2C;EAWxDC,MAAM,EAAE;IACNL,IAAI,EAAE,CAACI,OAAD,EAAUE,MAAV,CADA;IAENL,OAAO,EAAE;EAFH,CAXgD;EAexDM,QAAQ,EAAEH;AAf8C,CAAD,CAAlD;AAkBP,OAAO,MAAMI,oBAAoB,GAAGf,eAAe,CAAC;EAClDgB,IAAI,EAAE,sBAD4C;EAGlDC,UAAU,EAAE;IAAEtB;EAAF,CAHsC;EAKlDuB,KAAK,EAAE,EACL,GAAGf,6BAA6B;EAD3B,CAL2C;;EASlDgB,KAAK,CAAED,KAAF,QAAoB;IAAA,IAAX;MAAEE;IAAF,CAAW;IACvB,MAAMC,cAAc,GAAGtB,MAAM,CAACN,qBAAD,CAA7B;IAEA,IAAI,CAAC4B,cAAL,EAAqB,MAAM,IAAIC,KAAJ,CAAU,+EAAV,CAAN;IAErB,MAAM;MAAEC,sBAAF;MAA0BC;IAA1B,IAAoD3B,kBAAkB,CAACqB,KAAD,EAAQ,OAAR,CAA5E;IAEA,MAAMO,SAAS,GAAG3B,QAAQ,CAAC,OAAO;MAChCW,YAAY,EAAES,KAAK,CAACT,YADY;MAEhCiB,QAAQ,EAAEL,cAAc,CAACK,QAAf,CAAwBC,KAFF;MAGhCC,QAAQ,EAAEP,cAAc,CAACQ,UAAf,CAA0BF,KAHJ;MAIhCrB,UAAU,EAAEY,KAAK,CAACZ,UAJc;MAKhCQ,QAAQ,EAAEI,KAAK,CAACJ;IALgB,CAAP,CAAD,CAA1B;IAQAZ,SAAS,CAAC;MAAA;;MAAA;QAAA,SAEC,CACL,yBADK,EAEL;UACE,mCAAmCmB,cAAc,CAACQ,UAAf,CAA0BF;QAD/D,CAFK,EAKLJ,sBAAsB,CAACI,KALlB,CAFD;QAAA,SASEH,qBAAqB,CAACG,KATxB;QAAA,QAUD,QAVC;QAAA,YAWKN,cAAc,CAACK,QAAf,CAAwBC,KAAxB,GAAgC,CAAC,CAAjC,GAAqCG,SAX1C;QAAA,YAYKT,cAAc,CAACK,QAAf,CAAwBC,KAZ7B;QAAA,iBAaUN,cAAc,CAACQ,UAAf,CAA0BF,KAbpC;QAAA,WAcI,CAACT,KAAK,CAACJ,QAAP,GAAkBO,cAAc,CAACU,MAAjC,GAA0CD;MAd9C;QAAA,SAiBM;MAjBN,4BAmBJV,KAAK,CAACZ,OAnBF,qBAmBJ,oBAAAY,KAAK,EAAWK,SAAS,CAACE,KAArB,CAnBD,EAqBJ,CAACT,KAAK,CAACR,WAAP;QAAA,SACY;MADZ,IAGIU,KAAK,CAACY,OAAN,GAAgBZ,KAAK,CAACY,OAAN,CAAcP,SAAS,CAACE,KAAxB,CAAhB;QAAA,QACgBN,cAAc,CAACQ,UAAf,CAA0BF,KAA1B,GAAkCT,KAAK,CAACT,YAAxC,GAAuDS,KAAK,CAACZ;MAD7E,QAHJ,EArBI,mCAeKY,KAAK,CAACN,MAfX;IAAA,CAAD,CAAT;IAgCA,OAAO,EAAP;EACD;;AAzDiD,CAAD,CAA5C"}

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,"file":"VExpansionPanels.mjs","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"],"sources":["../../../src/components/VExpansionPanel/VExpansionPanels.tsx"],"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 { GroupItemProvide } from '@/composables/group'\nimport type { InjectionKey, PropType } from 'vue'\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"],"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;EAC9CO,IAAI,EAAE,kBADwC;EAG9CC,KAAK,EAAE;IACLC,KAAK,EAAEC,MADF;IAELC,OAAO,EAAE;MACPC,IAAI,EAAEF,MADC;MAEPG,OAAO,EAAE,SAFF;MAGPC,SAAS,EAAGC,CAAD,IAAYV,eAAe,CAACW,QAAhB,CAAyBD,CAAzB;IAHhB,CAFJ;IAOLE,QAAQ,EAAEC,OAPL;IASL,GAAG1B,cAAc,EATZ;IAUL,GAAGE,YAAY,EAVV;IAWL,GAAGC,cAAc;EAXZ,CAHuC;EAiB9CwB,KAAK,EAAE;IACL,qBAAsBC,GAAD,IAAkB;EADlC,CAjBuC;;EAqB9CC,KAAK,CAAEb,KAAF,QAAoB;IAAA,IAAX;MAAEc;IAAF,CAAW;IACvB7B,QAAQ,CAACe,KAAD,EAAQN,qBAAR,CAAR;IAEA,MAAM;MAAEqB;IAAF,IAAmB3B,YAAY,CAACY,KAAD,CAArC;IAEA,MAAMgB,YAAY,GAAG1B,QAAQ,CAAC,MAAMU,KAAK,CAACG,OAAN,IAAkB,+BAA8BH,KAAK,CAACG,OAAQ,EAArE,CAA7B;IAEAd,eAAe,CAAC;MACd4B,eAAe,EAAE;QACfhB,KAAK,EAAEV,KAAK,CAACS,KAAD,EAAQ,OAAR;MADG,CADH;MAIdkB,oBAAoB,EAAE;QACpBT,QAAQ,EAAElB,KAAK,CAACS,KAAD,EAAQ,UAAR;MADK;IAJR,CAAD,CAAf;IASAP,SAAS,CAAC;MAAA,SAEC,CACL,oBADK,EAELsB,YAAY,CAACI,KAFR,EAGLH,YAAY,CAACG,KAHR;IAFD,GAOIL,KAPJ,CAAD,CAAT;IAWA,OAAO,EAAP;EACD;;AAjD6C,CAAD,CAAxC"}

package/lib/components/VExpansionPanel/_variables.scss

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VExpansionPanel/index.ts"],"names":["VExpansionPanels","VExpansionPanel","VExpansionPanelContent","VExpansionPanelHeader","$_vuetify_subcomponents"],"mappings":"OAAOA,gB;OACAC,e;OACAC,sB;OACAC,qB;AAEP,SAASH,gBAAT,EAA2BC,eAA3B,EAA4CE,qBAA5C,EAAmED,sBAAnE;AAEA,eAAe;AACbE,EAAAA,uBAAuB,EAAE;AACvBJ,IAAAA,gBADuB;AAEvBC,IAAAA,eAFuB;AAGvBE,IAAAA,qBAHuB;AAIvBD,IAAAA;AAJuB;AADZ,CAAf","sourcesContent":["import VExpansionPanels from './VExpansionPanels'\nimport VExpansionPanel from './VExpansionPanel'\nimport VExpansionPanelContent from './VExpansionPanelContent'\nimport VExpansionPanelHeader from './VExpansionPanelHeader'\n\nexport { VExpansionPanels, VExpansionPanel, VExpansionPanelHeader, VExpansionPanelContent }\n\nexport default {\n  $_vuetify_subcomponents: {\n    VExpansionPanels,\n    VExpansionPanel,\n    VExpansionPanelHeader,\n    VExpansionPanelContent,\n  },\n}\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VExpansionPanels","VExpansionPanel","VExpansionPanelText","VExpansionPanelTitle"],"sources":["../../../src/components/VExpansionPanel/index.ts"],"sourcesContent":["export { VExpansionPanels } from './VExpansionPanels'\nexport { VExpansionPanel } from './VExpansionPanel'\nexport { VExpansionPanelText } from './VExpansionPanelText'\nexport { VExpansionPanelTitle } from './VExpansionPanelTitle'\n"],"mappings":"SAASA,gB;SACAC,e;SACAC,mB;SACAC,oB"}