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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VDialog/index.ts"],"names":["VDialog"],"mappings":"OAAOA,O;AAEP,SAASA,OAAT;AACA,eAAeA,OAAf","sourcesContent":["import VDialog from './VDialog'\n\nexport { VDialog }\nexport default VDialog\n"],"file":"index.mjs"}
+{"version":3,"sources":["../../../src/components/VDialog/index.ts"],"names":["VDialog"],"mappings":"SAASA,O","sourcesContent":["export { VDialog } from './VDialog'\n"],"file":"index.mjs"}

package/lib/components/VDivider/VDivider.css

@@ -0,0 +1,30 @@
+.v-divider {
+  display: block;
+  flex: 1 1 100%;
+  height: 0px;
+  max-height: 0px;
+  transition: inherit;
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  border-style: solid;
+  border-width: thin 0 0 0;
+}
+.v-divider--vertical {
+  align-self: stretch;
+  border-width: 0 thin 0 0;
+  display: inline-flex;
+  height: inherit;
+  margin-left: -1px;
+  max-height: 100%;
+  max-width: 0px;
+  vertical-align: text-bottom;
+  width: 0px;
+}
+.v-divider--inset:not(.v-divider--vertical) {
+  max-width: calc(100% - 72px);
+  margin-inline-start: 72px;
+}
+.v-divider--inset.v-divider--vertical {
+  margin-bottom: 8px;
+  margin-top: 8px;
+  max-height: calc(100% - 16px);
+}

package/lib/components/VDivider/VDivider.mjs

@@ -1,27 +1,35 @@
 import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VDivider.sass"; // Utilities
+import "./VDivider.css"; // Utilities
 
-import { computed, defineComponent } from 'vue';
-import { convertToUnit, makeProps } from "../../util/index.mjs"; // Composables
+import { computed, toRef } from 'vue';
+import { convertToUnit, defineComponent } from "../../util/index.mjs"; // Composables
 
-import { useTheme } from "../../composables/theme.mjs"; // Types
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
+import { useBackgroundColor } from "../../composables/color.mjs"; // Types
 
-export default defineComponent({
+export const VDivider = defineComponent({
   name: 'VDivider',
-  props: makeProps({
+  props: {
+    color: String,
     inset: Boolean,
     length: [Number, String],
     thickness: [Number, String],
-    vertical: Boolean
-  }),
-
-  setup(props, {
-    attrs
-  }) {
+    vertical: Boolean,
+    ...makeThemeProps()
+  },
+
+  setup(props, _ref) {
+    let {
+      attrs
+    } = _ref;
     const {
       themeClasses
-    } = useTheme();
+    } = provideTheme(props);
+    const {
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(toRef(props, 'color'));
     const dividerStyles = computed(() => {
       const styles = {};
 
@@ -41,11 +49,11 @@ export default defineComponent({
           'v-divider': true,
           'v-divider--inset': props.inset,
           'v-divider--vertical': props.vertical
-        }, themeClasses.value],
-        "style": dividerStyles.value,
+        }, themeClasses.value, backgroundColorClasses.value],
+        "style": [dividerStyles.value, backgroundColorStyles.value],
         "aria-orientation": !attrs.role || attrs.role === 'separator' ? props.vertical ? 'vertical' : 'horizontal' : undefined,
-        "role": "".concat(attrs.role || 'separator')
-      }, null, 14, ["aria-orientation", "role"]);
+        "role": `${attrs.role || 'separator'}`
+      }, null);
     };
   }
 

package/lib/components/VDivider/VDivider.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VDivider/VDivider.tsx"],"names":["computed","defineComponent","convertToUnit","makeProps","useTheme","name","props","inset","Boolean","length","Number","String","thickness","vertical","setup","attrs","themeClasses","dividerStyles","styles","value","role","undefined"],"mappings":";AAAA;AACA,yB,CAEA;;AACA,SAASA,QAAT,EAAmBC,eAAnB,QAA0C,KAA1C;SACSC,a,EAAeC,S,gCAExB;;SACSC,Q,uCAET;;AAIA,eAAeH,eAAe,CAAC;AAC7BI,EAAAA,IAAI,EAAE,UADuB;AAG7BC,EAAAA,KAAK,EAAEH,SAAS,CAAC;AACfI,IAAAA,KAAK,EAAEC,OADQ;AAEfC,IAAAA,MAAM,EAAE,CAACC,MAAD,EAASC,MAAT,CAFO;AAGfC,IAAAA,SAAS,EAAE,CAACF,MAAD,EAASC,MAAT,CAHI;AAIfE,IAAAA,QAAQ,EAAEL;AAJK,GAAD,CAHa;;AAU7BM,EAAAA,KAAK,CAAER,KAAF,EAAS;AAAES,IAAAA;AAAF,GAAT,EAAoB;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAmBZ,QAAQ,EAAjC;AACA,UAAMa,aAAa,GAAGjB,QAAQ,CAAC,MAAM;AACnC,YAAMkB,MAAqB,GAAG,EAA9B;;AAEA,UAAIZ,KAAK,CAACG,MAAV,EAAkB;AAChBS,QAAAA,MAAM,CAACZ,KAAK,CAACO,QAAN,GAAiB,WAAjB,GAA+B,UAAhC,CAAN,GAAoDX,aAAa,CAACI,KAAK,CAACG,MAAP,CAAjE;AACD;;AAED,UAAIH,KAAK,CAACM,SAAV,EAAqB;AACnBM,QAAAA,MAAM,CAACZ,KAAK,CAACO,QAAN,GAAiB,kBAAjB,GAAsC,gBAAvC,CAAN,GAAiEX,aAAa,CAACI,KAAK,CAACM,SAAP,CAA9E;AACD;;AAED,aAAOM,MAAP;AACD,KAZ6B,CAA9B;AAcA,WAAO,MAAM;AACX;AAAA,iBAEW,CACL;AACE,uBAAa,IADf;AAEE,8BAAoBZ,KAAK,CAACC,KAF5B;AAGE,iCAAuBD,KAAK,CAACO;AAH/B,SADK,EAMLG,YAAY,CAACG,KANR,CAFX;AAAA,iBAUYF,aAAa,CAACE,KAV1B;AAAA,4BAYM,CAACJ,KAAK,CAACK,IAAP,IAAeL,KAAK,CAACK,IAAN,KAAe,WAA9B,GACId,KAAK,CAACO,QAAN,GAAiB,UAAjB,GAA8B,YADlC,GAEIQ,SAdV;AAAA,0BAgBaN,KAAK,CAACK,IAAN,IAAc,WAhB3B;AAAA;AAmBD,KApBD;AAqBD;;AA/C4B,CAAD,CAA9B","sourcesContent":["// Styles\nimport './VDivider.sass'\n\n// Utilities\nimport { computed, defineComponent } from 'vue'\nimport { convertToUnit, makeProps } from '@/util'\n\n// Composables\nimport { useTheme } from '@/composables/theme'\n\n// Types\ntype DividerKey = 'borderRightWidth' | 'borderTopWidth' | 'maxHeight' | 'maxWidth'\ntype DividerStyles = Partial<Record<DividerKey, string>>\n\nexport default defineComponent({\n  name: 'VDivider',\n\n  props: makeProps({\n    inset: Boolean,\n    length: [Number, String],\n    thickness: [Number, String],\n    vertical: Boolean,\n  }),\n\n  setup (props, { attrs }) {\n    const { themeClasses } = useTheme()\n    const dividerStyles = computed(() => {\n      const styles: DividerStyles = {}\n\n      if (props.length) {\n        styles[props.vertical ? 'maxHeight' : 'maxWidth'] = convertToUnit(props.length)\n      }\n\n      if (props.thickness) {\n        styles[props.vertical ? 'borderRightWidth' : 'borderTopWidth'] = convertToUnit(props.thickness)\n      }\n\n      return styles\n    })\n\n    return () => {\n      return (\n        <hr\n          class={[\n            {\n              'v-divider': true,\n              'v-divider--inset': props.inset,\n              'v-divider--vertical': props.vertical,\n            },\n            themeClasses.value,\n          ]}\n          style={ dividerStyles.value }\n          aria-orientation={\n            !attrs.role || attrs.role === 'separator'\n              ? props.vertical ? 'vertical' : 'horizontal'\n              : undefined\n          }\n          role={`${attrs.role || 'separator'}`}\n        />\n      )\n    }\n  },\n})\n"],"file":"VDivider.mjs"}
+{"version":3,"sources":["../../../src/components/VDivider/VDivider.tsx"],"names":["computed","toRef","convertToUnit","defineComponent","makeThemeProps","provideTheme","useBackgroundColor","VDivider","name","props","color","String","inset","Boolean","length","Number","thickness","vertical","setup","attrs","themeClasses","backgroundColorClasses","backgroundColorStyles","dividerStyles","styles","value","role","undefined"],"mappings":";AAAA;AACA,wB,CAEA;;AACA,SAASA,QAAT,EAAmBC,KAAnB,QAAgC,KAAhC;SACSC,a,EAAeC,e,gCAExB;;SACSC,c,EAAgBC,Y;SAChBC,kB,uCAET;;AAIA,OAAO,MAAMC,QAAQ,GAAGJ,eAAe,CAAC;AACtCK,EAAAA,IAAI,EAAE,UADgC;AAGtCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAEC,MADF;AAELC,IAAAA,KAAK,EAAEC,OAFF;AAGLC,IAAAA,MAAM,EAAE,CAACC,MAAD,EAASJ,MAAT,CAHH;AAILK,IAAAA,SAAS,EAAE,CAACD,MAAD,EAASJ,MAAT,CAJN;AAKLM,IAAAA,QAAQ,EAAEJ,OALL;AAML,OAAGT,cAAc;AANZ,GAH+B;;AAYtCc,EAAAA,KAAK,CAAET,KAAF,QAAoB;AAAA,QAAX;AAAEU,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAmBf,YAAY,CAACI,KAAD,CAArC;AACA,UAAM;AAAEY,MAAAA,sBAAF;AAA0BC,MAAAA;AAA1B,QAAoDhB,kBAAkB,CAACL,KAAK,CAACQ,KAAD,EAAQ,OAAR,CAAN,CAA5E;AACA,UAAMc,aAAa,GAAGvB,QAAQ,CAAC,MAAM;AACnC,YAAMwB,MAAqB,GAAG,EAA9B;;AAEA,UAAIf,KAAK,CAACK,MAAV,EAAkB;AAChBU,QAAAA,MAAM,CAACf,KAAK,CAACQ,QAAN,GAAiB,WAAjB,GAA+B,UAAhC,CAAN,GAAoDf,aAAa,CAACO,KAAK,CAACK,MAAP,CAAjE;AACD;;AAED,UAAIL,KAAK,CAACO,SAAV,EAAqB;AACnBQ,QAAAA,MAAM,CAACf,KAAK,CAACQ,QAAN,GAAiB,kBAAjB,GAAsC,gBAAvC,CAAN,GAAiEf,aAAa,CAACO,KAAK,CAACO,SAAP,CAA9E;AACD;;AAED,aAAOQ,MAAP;AACD,KAZ6B,CAA9B;AAcA,WAAO,MAAM;AACX;AAAA,iBAEW,CACL;AACE,uBAAa,IADf;AAEE,8BAAoBf,KAAK,CAACG,KAF5B;AAGE,iCAAuBH,KAAK,CAACQ;AAH/B,SADK,EAMLG,YAAY,CAACK,KANR,EAOLJ,sBAAsB,CAACI,KAPlB,CAFX;AAAA,iBAWW,CACLF,aAAa,CAACE,KADT,EAELH,qBAAqB,CAACG,KAFjB,CAXX;AAAA,4BAgBM,CAACN,KAAK,CAACO,IAAP,IAAeP,KAAK,CAACO,IAAN,KAAe,WAA9B,GACIjB,KAAK,CAACQ,QAAN,GAAiB,UAAjB,GAA8B,YADlC,GAEIU,SAlBV;AAAA,gBAoBW,GAAER,KAAK,CAACO,IAAN,IAAc,WAAY;AApBvC;AAuBD,KAxBD;AAyBD;;AAtDqC,CAAD,CAAhC","sourcesContent":["// Styles\nimport './VDivider.sass'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { convertToUnit, defineComponent } from '@/util'\n\n// Composables\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useBackgroundColor } from '@/composables/color'\n\n// Types\ntype DividerKey = 'borderRightWidth' | 'borderTopWidth' | 'maxHeight' | 'maxWidth'\ntype DividerStyles = Partial<Record<DividerKey, string>>\n\nexport const VDivider = defineComponent({\n  name: 'VDivider',\n\n  props: {\n    color: String,\n    inset: Boolean,\n    length: [Number, String],\n    thickness: [Number, String],\n    vertical: Boolean,\n    ...makeThemeProps(),\n  },\n\n  setup (props, { attrs }) {\n    const { themeClasses } = provideTheme(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const dividerStyles = computed(() => {\n      const styles: DividerStyles = {}\n\n      if (props.length) {\n        styles[props.vertical ? 'maxHeight' : 'maxWidth'] = convertToUnit(props.length)\n      }\n\n      if (props.thickness) {\n        styles[props.vertical ? 'borderRightWidth' : 'borderTopWidth'] = convertToUnit(props.thickness)\n      }\n\n      return styles\n    })\n\n    return () => {\n      return (\n        <hr\n          class={[\n            {\n              'v-divider': true,\n              'v-divider--inset': props.inset,\n              'v-divider--vertical': props.vertical,\n            },\n            themeClasses.value,\n            backgroundColorClasses.value,\n          ]}\n          style={[\n            dividerStyles.value,\n            backgroundColorStyles.value,\n          ]}\n          aria-orientation={\n            !attrs.role || attrs.role === 'separator'\n              ? props.vertical ? 'vertical' : 'horizontal'\n              : undefined\n          }\n          role={`${attrs.role || 'separator'}`}\n        />\n      )\n    }\n  },\n})\n"],"file":"VDivider.mjs"}

package/lib/components/VDivider/VDivider.sass

@@ -1,5 +1,6 @@
-// Imports
-@import './index'
+@forward './variables'
+@use '../../styles/tools'
+@use './variables' as *
 
 .v-divider
   display: block
@@ -8,7 +9,7 @@
   max-height: 0px
   transition: inherit
 
-  @include border($divider-border-color, $divider-border-style, $divider-border-width)
+  @include tools.border($divider-border...)
 
   &--vertical
     align-self: stretch
@@ -24,12 +25,7 @@
   &--inset
     &:not(.v-divider--vertical)
       max-width: $divider-inset-max-width
-
-      @include ltr()
-        margin-left: $divider-inset-margin
-
-      @include rtl()
-        margin-right: $divider-inset-margin
+      margin-inline-start: $divider-inset-margin
 
     &.v-divider--vertical
       margin-bottom: $divider-vertical-inset-margin-bottom

package/lib/components/VDivider/_variables.scss

@@ -1,6 +1,8 @@
+@use '../../styles/settings';
+
 // Defaults
-$divider-border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !default;
-$divider-border-style: solid !default;
+$divider-border-color: settings.$border-color-root !default;
+$divider-border-style: settings.$border-style-root !default;
 $divider-border-width: thin 0 0 0 !default;
 $divider-flex: 1 1 100% !default;
 $divider-inset-margin: 72px !default;
@@ -12,12 +14,8 @@ $divider-vertical-inset-margin-top: $divider-margin !default;
 $divider-vertical-inset-max-height: calc(100% - #{$divider-margin * 2}) !default;
 $divider-vertical-margin-left: -1px !default;
 
-$divider-query: () !default;
-$divider-query: map-deep-merge(
-  (
-    'border-color': $divider-border-color,
-    'border-style': $divider-border-style,
-    'border-width': $divider-border-width
-  ),
-  $divider-query
-);
+$divider-border: (
+  $divider-border-color,
+  $divider-border-style,
+  $divider-border-width
+) !default;

package/lib/components/VDivider/index.mjs

@@ -1,2 +1,2 @@
-export { default as VDivider } from "./VDivider.mjs";
+export { VDivider } from "./VDivider.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VDivider/index.ts"],"names":["default","VDivider"],"mappings":"SAASA,OAAO,IAAIC,Q","sourcesContent":["export { default as VDivider } from './VDivider'\n"],"file":"index.mjs"}
+{"version":3,"sources":["../../../src/components/VDivider/index.ts"],"names":["VDivider"],"mappings":"SAASA,Q","sourcesContent":["export { VDivider } from './VDivider'\n"],"file":"index.mjs"}

package/lib/components/VExpansionPanel/VExpansionPanel.css

@@ -0,0 +1,190 @@
+.v-expansion-panel {
+  background-color: rgb(var(--v-theme-surface));
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
+.v-expansion-panel:not(:first-child)::after {
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+}
+.v-expansion-panel--disabled .v-expansion-panel-title {
+  color: rgba(var(--v-theme-on-surface), 0.26);
+}
+.v-expansion-panel--disabled .v-expansion-panel-title .v-expansion-panel-title__overlay {
+  opacity: 0.4615384615;
+}
+
+.v-expansion-panels {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  list-style-type: none;
+  padding: 0;
+  width: 100%;
+  position: relative;
+  z-index: 1;
+}
+.v-expansion-panels:not(.v-expansion-panels--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;
+}
+.v-expansion-panels:not(.v-expansion-panels--variant-accordion) > :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;
+}
+.v-expansion-panels:not(.v-expansion-panels--variant-accordion) > :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;
+}
+.v-expansion-panels:not(.v-expansion-panels--variant-accordion) > :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;
+}
+.v-expansion-panels--variant-accordion > :first-child {
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+.v-expansion-panels--variant-accordion > :last-child {
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+}
+.v-expansion-panels--variant-accordion > :last-child .v-expansion-panel-title--active {
+  border-bottom-left-radius: initial;
+  border-bottom-right-radius: initial;
+}
+.v-expansion-panels--variant-accordion > :not(:first-child):not(:last-child) {
+  border-radius: 0 !important;
+}
+.v-expansion-panels--variant-accordion .v-expansion-panel-title__overlay {
+  transition: 0.3s border-radius cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.v-expansion-panel {
+  flex: 1 0 100%;
+  max-width: 100%;
+  position: relative;
+  transition: 0.3s all cubic-bezier(0.4, 0, 0.2, 1);
+  transition-property: margin-top, border-radius, border, max-width;
+  border-radius: 4px;
+}
+.v-expansion-panel:not(:first-child)::after {
+  border-top-style: solid;
+  border-top-width: thin;
+  content: "";
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: 0.3s opacity cubic-bezier(0.4, 0, 0.2, 1);
+}
+.v-expansion-panel--disabled .v-expansion-panel-title {
+  pointer-events: none;
+}
+.v-expansion-panel--active:not(:first-child),
+.v-expansion-panel--active + .v-expansion-panel {
+  margin-top: 16px;
+}
+.v-expansion-panel--active:not(:first-child)::after,
+.v-expansion-panel--active + .v-expansion-panel::after {
+  opacity: 0;
+}
+.v-expansion-panel--active > .v-expansion-panel-title {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  min-height: 64px;
+}
+
+.v-expansion-panel__shadow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  border-radius: inherit;
+  z-index: -1;
+}
+
+.v-expansion-panel-title {
+  align-items: center;
+  border-radius: inherit;
+  display: flex;
+  font-size: 0.9375rem;
+  line-height: 1;
+  min-height: 48px;
+  outline: none;
+  padding: 16px 24px;
+  position: relative;
+  transition: 0.3s min-height cubic-bezier(0.4, 0, 0.2, 1);
+  width: 100%;
+  justify-content: space-between;
+}
+.v-expansion-panel-title:hover .v-expansion-panel-title__overlay {
+  opacity: calc(0.04 * var(--v-theme-overlay-multiplier));
+}
+.v-expansion-panel-title:focus-visible .v-expansion-panel-title__overlay {
+  opacity: calc(0.12 * var(--v-theme-overlay-multiplier));
+}
+@supports not selector(:focus-visible) {
+  .v-expansion-panel-title:focus .v-expansion-panel-title__overlay {
+    opacity: calc(0.12 * var(--v-theme-overlay-multiplier));
+  }
+}
+.v-expansion-panel-title--active:hover.v-expansion-panel-title__overlay,
+.v-expansion-panel-title--active .v-expansion-panel-title__overlay, .v-expansion-panel-title[aria-haspopup=menu][aria-expanded=true]:hover.v-expansion-panel-title__overlay,
+.v-expansion-panel-title[aria-haspopup=menu][aria-expanded=true] .v-expansion-panel-title__overlay {
+  opacity: calc(0.12 * var(--v-theme-overlay-multiplier));
+}
+.v-expansion-panel-title--active:focus .v-expansion-panel-title__overlay, .v-expansion-panel-title[aria-haspopup=menu][aria-expanded=true]:focus .v-expansion-panel-title__overlay {
+  opacity: calc(0.16 * var(--v-theme-overlay-multiplier));
+}
+.v-expansion-panel-title--active::before {
+  opacity: 0.12;
+}
+
+.v-expansion-panel-title__overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: currentColor;
+  border-radius: inherit;
+  opacity: 0;
+}
+
+.v-expansion-panel-title__icon {
+  display: inline-flex;
+  margin-bottom: -4px;
+  margin-top: -4px;
+  user-select: none;
+  margin-inline-start: auto;
+}
+
+.v-expansion-panel-text {
+  display: flex;
+}
+.v-expansion-panel-text__wrapper {
+  padding: 8px 24px 16px;
+  flex: 1 1 auto;
+  max-width: 100%;
+}
+
+.v-expansion-panels--variant-accordion > .v-expansion-panel {
+  margin-top: 0;
+}
+.v-expansion-panels--variant-accordion > .v-expansion-panel::after {
+  opacity: 1;
+}
+
+.v-expansion-panels--variant-popout > .v-expansion-panel {
+  max-width: calc(100% - 32px);
+}
+.v-expansion-panels--variant-popout > .v-expansion-panel--active {
+  max-width: calc(100% + 16px);
+}
+
+.v-expansion-panels--variant-inset > .v-expansion-panel {
+  max-width: 100%;
+}
+.v-expansion-panels--variant-inset > .v-expansion-panel--active {
+  max-width: calc(100% - 32px);
+}

package/lib/components/VExpansionPanel/VExpansionPanel.mjs

@@ -1,90 +1,94 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { createVNode as _createVNode } from "vue";
 // Components
-// Mixins
-import { factory as GroupableFactory } from "../../mixins/groupable.mjs";
-import { provide as RegistrableProvide } from "../../mixins/registrable.mjs"; // Utilities
-
-import { getSlot } from "../../util/helpers.mjs";
-import mixins from "../../util/mixins.mjs"; // Types
-
-export default mixins(GroupableFactory('expansionPanels', 'v-expansion-panel', 'v-expansion-panels'), RegistrableProvide('expansionPanel', true)
-/* @vue/component */
-).extend({
-  name: 'v-expansion-panel',
+import { makeVExpansionPanelTitleProps, VExpansionPanelTitle } from "./VExpansionPanelTitle.mjs";
+import { VExpansionPanelText } from "./VExpansionPanelText.mjs";
+import { VExpansionPanelSymbol } from "./VExpansionPanels.mjs"; // Composables
+
+import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
+import { makeGroupItemProps, useGroupItem } from "../../composables/group.mjs";
+import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
+import { useBackgroundColor } from "../../composables/color.mjs";
+import { makeTagProps } from "../../composables/tag.mjs";
+import { makeLazyProps } from "../../composables/lazy.mjs"; // Utilities
+
+import { computed, provide } from 'vue';
+import { defineComponent, useRender } from "../../util/index.mjs";
+export const VExpansionPanel = defineComponent({
+  name: 'VExpansionPanel',
   props: {
-    disabled: Boolean,
-    readonly: Boolean
-  },
-
-  data() {
-    return {
-      content: null,
-      header: null,
-      nextIsActive: false
-    };
-  },
-
-  computed: {
-    classes() {
-      return {
-        'v-expansion-panel--active': this.isActive,
-        'v-expansion-panel--next-active': this.nextIsActive,
-        'v-expansion-panel--disabled': this.isDisabled,
-        ...this.groupClasses
-      };
-    },
-
-    isDisabled() {
-      return this.expansionPanels.disabled || this.disabled;
-    },
-
-    isReadonly() {
-      return this.expansionPanels.readonly || this.readonly;
-    }
-
-  },
-  methods: {
-    registerContent(vm) {
-      this.content = vm;
-    },
-
-    unregisterContent() {
-      this.content = null;
-    },
-
-    registerHeader(vm) {
-      this.header = vm;
-      vm.$on('click', this.onClick);
-    },
-
-    unregisterHeader() {
-      this.header = null;
-    },
-
-    onClick(e) {
-      if (e.detail) this.header.$el.blur();
-      this.$emit('click', e);
-      this.isReadonly || this.isDisabled || this.toggle();
-    },
-
-    toggle() {
-      /* istanbul ignore else */
-      if (this.content) this.content.isBooted = true;
-      this.$nextTick(() => this.$emit('change'));
-    }
-
+    title: String,
+    text: String,
+    bgColor: String,
+    ...makeElevationProps(),
+    ...makeGroupItemProps(),
+    ...makeLazyProps(),
+    ...makeRoundedProps(),
+    ...makeTagProps(),
+    ...makeVExpansionPanelTitleProps()
   },
 
-  render(h) {
-    return h('div', {
-      staticClass: 'v-expansion-panel',
-      class: this.classes,
-      attrs: {
-        'aria-expanded': String(this.isActive)
-      }
-    }, getSlot(this));
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const groupItem = useGroupItem(props, VExpansionPanelSymbol);
+    const {
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(props, 'bgColor');
+    const {
+      elevationClasses
+    } = useElevation(props);
+    const {
+      roundedClasses
+    } = useRounded(props);
+    const isDisabled = computed(() => (groupItem == null ? void 0 : groupItem.disabled.value) || props.disabled);
+    const selectedIndices = computed(() => groupItem.group.items.value.reduce((arr, item, index) => {
+      if (groupItem.group.selected.value.includes(item.id)) arr.push(index);
+      return arr;
+    }, []));
+    const isBeforeSelected = computed(() => {
+      const index = groupItem.group.items.value.findIndex(item => item.id === groupItem.id);
+      return !groupItem.isSelected.value && selectedIndices.value.some(selectedIndex => selectedIndex - index === 1);
+    });
+    const isAfterSelected = computed(() => {
+      const index = groupItem.group.items.value.findIndex(item => item.id === groupItem.id);
+      return !groupItem.isSelected.value && selectedIndices.value.some(selectedIndex => selectedIndex - index === -1);
+    });
+    provide(VExpansionPanelSymbol, groupItem);
+    useRender(() => {
+      var _slots$default;
+
+      const hasText = !!(slots.text || props.text);
+      const hasTitle = !!(slots.title || props.title);
+      return _createVNode(props.tag, {
+        "class": ['v-expansion-panel', {
+          'v-expansion-panel--active': groupItem.isSelected.value,
+          'v-expansion-panel--before-active': isBeforeSelected.value,
+          'v-expansion-panel--after-active': isAfterSelected.value,
+          'v-expansion-panel--disabled': isDisabled.value
+        }, roundedClasses.value, backgroundColorClasses.value],
+        "style": backgroundColorStyles.value,
+        "aria-expanded": groupItem.isSelected.value
+      }, {
+        default: () => [_createVNode("div", {
+          "class": ['v-expansion-panel__shadow', ...elevationClasses.value]
+        }, null), hasTitle && _createVNode(VExpansionPanelTitle, {
+          "collapseIcon": props.collapseIcon,
+          "color": props.color,
+          "expandIcon": props.expandIcon,
+          "hideActions": props.hideActions,
+          "ripple": props.ripple
+        }, {
+          default: () => [slots.title ? slots.title() : props.title]
+        }), hasText && _createVNode(VExpansionPanelText, {
+          "eager": props.eager
+        }, {
+          default: () => [slots.text ? slots.text() : props.text]
+        }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]
+      });
+    });
+    return {};
   }
 
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VExpansionPanel/VExpansionPanel.ts"],"names":["factory","GroupableFactory","provide","RegistrableProvide","getSlot","mixins","extend","name","props","disabled","Boolean","readonly","data","content","header","nextIsActive","computed","classes","isActive","isDisabled","groupClasses","expansionPanels","isReadonly","methods","registerContent","vm","unregisterContent","registerHeader","$on","onClick","unregisterHeader","e","detail","$el","blur","$emit","toggle","isBooted","$nextTick","render","h","staticClass","class","attrs","String"],"mappings":"AAAA;;AACA;AAEA;AAKA;SACSA,OAAO,IAAIC,gB;SACXC,OAAO,IAAIC,kB,wCAEpB;;SACSC,O;OACFC,M,+BAEP;;AAMA,eAAeA,MAAM,CACnBJ,gBAAgB,CAA6C,iBAA7C,EAAgE,mBAAhE,EAAqF,oBAArF,CADG,EAEnBE,kBAAkB,CAAC,gBAAD,EAAmB,IAAnB;AAClB;AAHmB,CAAN,CAIbG,MAJa,CAIN;AACPC,EAAAA,IAAI,EAAE,mBADC;AAGPC,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAEC,OADL;AAELC,IAAAA,QAAQ,EAAED;AAFL,GAHA;;AAQPE,EAAAA,IAAI,GAAI;AACN,WAAO;AACLC,MAAAA,OAAO,EAAE,IADJ;AAELC,MAAAA,MAAM,EAAE,IAFH;AAGLC,MAAAA,YAAY,EAAE;AAHT,KAAP;AAKD,GAdM;;AAgBPC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,OAAO,GAAY;AACjB,aAAO;AACL,qCAA6B,KAAKC,QAD7B;AAEL,0CAAkC,KAAKH,YAFlC;AAGL,uCAA+B,KAAKI,UAH/B;AAIL,WAAG,KAAKC;AAJH,OAAP;AAMD,KARO;;AASRD,IAAAA,UAAU,GAAa;AACrB,aAAO,KAAKE,eAAL,CAAqBZ,QAArB,IAAiC,KAAKA,QAA7C;AACD,KAXO;;AAYRa,IAAAA,UAAU,GAAa;AACrB,aAAO,KAAKD,eAAL,CAAqBV,QAArB,IAAiC,KAAKA,QAA7C;AACD;;AAdO,GAhBH;AAiCPY,EAAAA,OAAO,EAAE;AACPC,IAAAA,eAAe,CAAEC,EAAF,EAAsC;AACnD,WAAKZ,OAAL,GAAeY,EAAf;AACD,KAHM;;AAIPC,IAAAA,iBAAiB,GAAI;AACnB,WAAKb,OAAL,GAAe,IAAf;AACD,KANM;;AAOPc,IAAAA,cAAc,CAAEF,EAAF,EAAqC;AACjD,WAAKX,MAAL,GAAcW,EAAd;AACAA,MAAAA,EAAE,CAACG,GAAH,CAAO,OAAP,EAAgB,KAAKC,OAArB;AACD,KAVM;;AAWPC,IAAAA,gBAAgB,GAAI;AAClB,WAAKhB,MAAL,GAAc,IAAd;AACD,KAbM;;AAcPe,IAAAA,OAAO,CAAEE,CAAF,EAAiB;AACtB,UAAIA,CAAC,CAACC,MAAN,EAAc,KAAKlB,MAAL,CAAamB,GAAb,CAAiBC,IAAjB;AAEd,WAAKC,KAAL,CAAW,OAAX,EAAoBJ,CAApB;AAEA,WAAKT,UAAL,IAAmB,KAAKH,UAAxB,IAAsC,KAAKiB,MAAL,EAAtC;AACD,KApBM;;AAqBPA,IAAAA,MAAM,GAAI;AACR;AACA,UAAI,KAAKvB,OAAT,EAAkB,KAAKA,OAAL,CAAawB,QAAb,GAAwB,IAAxB;AAClB,WAAKC,SAAL,CAAe,MAAM,KAAKH,KAAL,CAAW,QAAX,CAArB;AACD;;AAzBM,GAjCF;;AA6DPI,EAAAA,MAAM,CAAEC,CAAF,EAAY;AAChB,WAAOA,CAAC,CAAC,KAAD,EAAQ;AACdC,MAAAA,WAAW,EAAE,mBADC;AAEdC,MAAAA,KAAK,EAAE,KAAKzB,OAFE;AAGd0B,MAAAA,KAAK,EAAE;AACL,yBAAiBC,MAAM,CAAC,KAAK1B,QAAN;AADlB;AAHO,KAAR,EAMLd,OAAO,CAAC,IAAD,CANF,CAAR;AAOD;;AArEM,CAJM,CAAf","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Components\nimport VExpansionPanels from './VExpansionPanels'\nimport VExpansionPanelHeader from './VExpansionPanelHeader'\nimport VExpansionPanelContent from './VExpansionPanelContent'\n\n// Mixins\nimport { factory as GroupableFactory } from '../../mixins/groupable'\nimport { provide as RegistrableProvide } from '../../mixins/registrable'\n\n// Utilities\nimport { getSlot } from '../../util/helpers'\nimport mixins from '../../util/mixins'\n\n// Types\nimport { VNode } from 'vue'\n\ntype VExpansionPanelHeaderInstance = InstanceType<typeof VExpansionPanelHeader>\ntype VExpansionPanelContentInstance = InstanceType<typeof VExpansionPanelContent>\n\nexport default mixins(\n  GroupableFactory<'expansionPanels', typeof VExpansionPanels>('expansionPanels', 'v-expansion-panel', 'v-expansion-panels'),\n  RegistrableProvide('expansionPanel', true)\n  /* @vue/component */\n).extend({\n  name: 'v-expansion-panel',\n\n  props: {\n    disabled: Boolean,\n    readonly: Boolean,\n  },\n\n  data () {\n    return {\n      content: null as VExpansionPanelContentInstance | null,\n      header: null as VExpansionPanelHeaderInstance | null,\n      nextIsActive: false,\n    }\n  },\n\n  computed: {\n    classes (): object {\n      return {\n        'v-expansion-panel--active': this.isActive,\n        'v-expansion-panel--next-active': this.nextIsActive,\n        'v-expansion-panel--disabled': this.isDisabled,\n        ...this.groupClasses,\n      }\n    },\n    isDisabled (): boolean {\n      return this.expansionPanels.disabled || this.disabled\n    },\n    isReadonly (): boolean {\n      return this.expansionPanels.readonly || this.readonly\n    },\n  },\n\n  methods: {\n    registerContent (vm: VExpansionPanelContentInstance) {\n      this.content = vm\n    },\n    unregisterContent () {\n      this.content = null\n    },\n    registerHeader (vm: VExpansionPanelHeaderInstance) {\n      this.header = vm\n      vm.$on('click', this.onClick)\n    },\n    unregisterHeader () {\n      this.header = null\n    },\n    onClick (e: MouseEvent) {\n      if (e.detail) this.header!.$el.blur()\n\n      this.$emit('click', e)\n\n      this.isReadonly || this.isDisabled || this.toggle()\n    },\n    toggle () {\n      /* istanbul ignore else */\n      if (this.content) this.content.isBooted = true\n      this.$nextTick(() => this.$emit('change'))\n    },\n  },\n\n  render (h): VNode {\n    return h('div', {\n      staticClass: 'v-expansion-panel',\n      class: this.classes,\n      attrs: {\n        'aria-expanded': String(this.isActive),\n      },\n    }, getSlot(this))\n  },\n})\n"],"file":"VExpansionPanel.mjs"}
+{"version":3,"sources":["../../../src/components/VExpansionPanel/VExpansionPanel.tsx"],"names":["makeVExpansionPanelTitleProps","VExpansionPanelTitle","VExpansionPanelText","VExpansionPanelSymbol","makeElevationProps","useElevation","makeGroupItemProps","useGroupItem","makeRoundedProps","useRounded","useBackgroundColor","makeTagProps","makeLazyProps","computed","provide","defineComponent","useRender","VExpansionPanel","name","props","title","String","text","bgColor","setup","slots","groupItem","backgroundColorClasses","backgroundColorStyles","elevationClasses","roundedClasses","isDisabled","disabled","value","selectedIndices","group","items","reduce","arr","item","index","selected","includes","id","push","isBeforeSelected","findIndex","isSelected","some","selectedIndex","isAfterSelected","hasText","hasTitle","collapseIcon","color","expandIcon","hideActions","ripple","eager","default"],"mappings":"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","sourcesContent":["// Components\nimport { makeVExpansionPanelTitleProps, VExpansionPanelTitle } from './VExpansionPanelTitle'\nimport { VExpansionPanelText } from './VExpansionPanelText'\nimport { VExpansionPanelSymbol } from './VExpansionPanels'\n\n// Composables\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeGroupItemProps, useGroupItem } from '@/composables/group'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeLazyProps } from '@/composables/lazy'\n\n// Utilities\nimport { computed, provide } from 'vue'\nimport { defineComponent, useRender } from '@/util'\n\nexport const VExpansionPanel = defineComponent({\n  name: 'VExpansionPanel',\n\n  props: {\n    title: String,\n    text: String,\n    bgColor: String,\n\n    ...makeElevationProps(),\n    ...makeGroupItemProps(),\n    ...makeLazyProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n    ...makeVExpansionPanelTitleProps(),\n  },\n\n  setup (props, { slots }) {\n    const groupItem = useGroupItem(props, VExpansionPanelSymbol)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'bgColor')\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n    const isDisabled = computed(() => groupItem?.disabled.value || props.disabled)\n\n    const selectedIndices = computed(() => groupItem.group.items.value.reduce<number[]>((arr, item, index) => {\n      if (groupItem.group.selected.value.includes(item.id)) arr.push(index)\n      return arr\n    }, []))\n\n    const isBeforeSelected = computed(() => {\n      const index = groupItem.group.items.value.findIndex(item => item.id === groupItem.id)\n      return !groupItem.isSelected.value &&\n        selectedIndices.value.some(selectedIndex => selectedIndex - index === 1)\n    })\n\n    const isAfterSelected = computed(() => {\n      const index = groupItem.group.items.value.findIndex(item => item.id === groupItem.id)\n      return !groupItem.isSelected.value &&\n        selectedIndices.value.some(selectedIndex => selectedIndex - index === -1)\n    })\n\n    provide(VExpansionPanelSymbol, groupItem)\n\n    useRender(() => {\n      const hasText = !!(slots.text || props.text)\n      const hasTitle = !!(slots.title || props.title)\n\n      return (\n        <props.tag\n          class={[\n            'v-expansion-panel',\n            {\n              'v-expansion-panel--active': groupItem.isSelected.value,\n              'v-expansion-panel--before-active': isBeforeSelected.value,\n              'v-expansion-panel--after-active': isAfterSelected.value,\n              'v-expansion-panel--disabled': isDisabled.value,\n            },\n            roundedClasses.value,\n            backgroundColorClasses.value,\n          ]}\n          style={ backgroundColorStyles.value }\n          aria-expanded={ groupItem.isSelected.value }\n        >\n          <div\n            class={[\n              'v-expansion-panel__shadow',\n              ...elevationClasses.value,\n            ]}\n          />\n\n          { hasTitle && (\n            <VExpansionPanelTitle\n              collapseIcon={ props.collapseIcon }\n              color={ props.color }\n              expandIcon={ props.expandIcon }\n              hideActions={ props.hideActions }\n              ripple={ props.ripple }\n            >\n              { slots.title ? slots.title() : props.title }\n            </VExpansionPanelTitle>\n          ) }\n\n          { hasText && (\n            <VExpansionPanelText eager={ props.eager }>\n              { slots.text ? slots.text() : props.text }\n            </VExpansionPanelText>\n          ) }\n\n          { slots.default?.() }\n        </props.tag>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VExpansionPanel = InstanceType<typeof VExpansionPanel>\n"],"file":"VExpansionPanel.mjs"}