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

package/lib/components/VLazy/VLazy.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VLazy/VLazy.ts"],"names":["Measurable","Toggleable","intersect","mixins","getSlot","extend","name","directives","props","options","type","Object","default","root","undefined","rootMargin","threshold","tag","String","transition","computed","styles","measurableStyles","methods","genContent","children","isActive","$createElement","onObserve","entries","observer","isIntersecting","render","h","staticClass","attrs","$attrs","value","handler","on","$listeners","style"],"mappings":"AAAA;;AACA;AAEA;OACOA,U;OACAC,U,2CAEP;;OACOC,S,8CAEP;;OACOC,M;SACEC,O,kCAET;;AAIA,eAAeD,MAAM,CACnBH,UADmB,EAEnBC,UAFmB,CAAN,CAGbI,MAHa,CAGN;AACPC,EAAAA,IAAI,EAAE,OADC;AAGPC,EAAAA,UAAU,EAAE;AAAEL,IAAAA;AAAF,GAHL;AAKPM,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE;AACPC,MAAAA,IAAI,EAAEC,MADC;AAEP;AACA;AACAC,MAAAA,OAAO,EAAE,OAAO;AACdC,QAAAA,IAAI,EAAEC,SADQ;AAEdC,QAAAA,UAAU,EAAED,SAFE;AAGdE,QAAAA,SAAS,EAAEF;AAHG,OAAP;AAJF,KADJ;AAWLG,IAAAA,GAAG,EAAE;AACHP,MAAAA,IAAI,EAAEQ,MADH;AAEHN,MAAAA,OAAO,EAAE;AAFN,KAXA;AAeLO,IAAAA,UAAU,EAAE;AACVT,MAAAA,IAAI,EAAEQ,MADI;AAEVN,MAAAA,OAAO,EAAE;AAFC;AAfP,GALA;AA0BPQ,EAAAA,QAAQ,EAAE;AACRC,IAAAA,MAAM,GAAY;AAChB,aAAO,EACL,GAAG,KAAKC;AADH,OAAP;AAGD;;AALO,GA1BH;AAkCPC,EAAAA,OAAO,EAAE;AACPC,IAAAA,UAAU,GAAI;AACZ,YAAMC,QAAQ,GAAG,KAAKC,QAAL,IAAiBtB,OAAO,CAAC,IAAD,CAAzC;AAEA,aAAO,KAAKe,UAAL,GACH,KAAKQ,cAAL,CAAoB,YAApB,EAAkC;AAClCnB,QAAAA,KAAK,EAAE;AAAEF,UAAAA,IAAI,EAAE,KAAKa;AAAb;AAD2B,OAAlC,EAECM,QAFD,CADG,GAIHA,QAJJ;AAKD,KATM;;AAUPG,IAAAA,SAAS,CACPC,OADO,EAEPC,QAFO,EAGPC,cAHO,EAIP;AACA,UAAI,KAAKL,QAAT,EAAmB;AAEnB,WAAKA,QAAL,GAAgBK,cAAhB;AACD;;AAlBM,GAlCF;;AAuDPC,EAAAA,MAAM,CAAEC,CAAF,EAAY;AAChB,WAAOA,CAAC,CAAC,KAAKhB,GAAN,EAAW;AACjBiB,MAAAA,WAAW,EAAE,QADI;AAEjBC,MAAAA,KAAK,EAAE,KAAKC,MAFK;AAGjB7B,MAAAA,UAAU,EAAE,CAAC;AACXD,QAAAA,IAAI,EAAE,WADK;AAEX+B,QAAAA,KAAK,EAAE;AACLC,UAAAA,OAAO,EAAE,KAAKV,SADT;AAELnB,UAAAA,OAAO,EAAE,KAAKA;AAFT;AAFI,OAAD,CAHK;AAUjB8B,MAAAA,EAAE,EAAE,KAAKC,UAVQ;AAWjBC,MAAAA,KAAK,EAAE,KAAKpB;AAXK,KAAX,EAYL,CAAC,KAAKG,UAAL,EAAD,CAZK,CAAR;AAaD;;AArEM,CAHM,CAAf","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Mixins\nimport Measurable from '../../mixins/measurable'\nimport Toggleable from '../../mixins/toggleable'\n\n// Directives\nimport intersect from '../../directives/intersect'\n\n// Utilities\nimport mixins from '../../util/mixins'\nimport { getSlot } from '../../util/helpers'\n\n// Types\nimport { VNode } from 'vue'\nimport { PropValidator } from 'vue/types/options'\n\nexport default mixins(\n  Measurable,\n  Toggleable\n).extend({\n  name: 'VLazy',\n\n  directives: { intersect },\n\n  props: {\n    options: {\n      type: Object,\n      // For more information on types, navigate to:\n      // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\n      default: () => ({\n        root: undefined,\n        rootMargin: undefined,\n        threshold: undefined,\n      }),\n    } as PropValidator<IntersectionObserverInit>,\n    tag: {\n      type: String,\n      default: 'div',\n    },\n    transition: {\n      type: String,\n      default: 'fade-transition',\n    },\n  },\n\n  computed: {\n    styles (): object {\n      return {\n        ...this.measurableStyles,\n      }\n    },\n  },\n\n  methods: {\n    genContent () {\n      const children = this.isActive && getSlot(this)\n\n      return this.transition\n        ? this.$createElement('transition', {\n          props: { name: this.transition },\n        }, children)\n        : children\n    },\n    onObserve (\n      entries: IntersectionObserverEntry[],\n      observer: IntersectionObserver,\n      isIntersecting: boolean,\n    ) {\n      if (this.isActive) return\n\n      this.isActive = isIntersecting\n    },\n  },\n\n  render (h): VNode {\n    return h(this.tag, {\n      staticClass: 'v-lazy',\n      attrs: this.$attrs,\n      directives: [{\n        name: 'intersect',\n        value: {\n          handler: this.onObserve,\n          options: this.options,\n        },\n      }],\n      on: this.$listeners,\n      style: this.styles,\n    }, [this.genContent()])\n  },\n})\n"],"file":"VLazy.mjs"}
+{"version":3,"sources":["../../../src/components/VLazy/VLazy.tsx"],"names":["makeDimensionProps","useDimension","makeTagProps","makeTransitionProps","MaybeTransition","useProxiedModel","intersect","defineComponent","VLazy","name","directives","props","modelValue","Boolean","options","type","Object","default","root","undefined","rootMargin","threshold","transition","emits","value","setup","slots","dimensionStyles","isActive","onIntersect","isIntersecting"],"mappings":";AAAA;SACSA,kB,EAAoBC,Y;SACpBC,Y;SACAC,mB,EAAqBC,e;SACrBC,e,8CAET;;OACOC,S,8CAEP;;SAESC,e;AAET,OAAO,MAAMC,KAAK,GAAGD,eAAe,CAAC;AACnCE,EAAAA,IAAI,EAAE,OAD6B;AAGnCC,EAAAA,UAAU,EAAE;AAAEJ,IAAAA;AAAF,GAHuB;AAKnCK,EAAAA,KAAK,EAAE;AACLC,IAAAA,UAAU,EAAEC,OADP;AAELC,IAAAA,OAAO,EAAE;AACPC,MAAAA,IAAI,EAAEC,MADC;AAEP;AACA;AACAC,MAAAA,OAAO,EAAE,OAAO;AACdC,QAAAA,IAAI,EAAEC,SADQ;AAEdC,QAAAA,UAAU,EAAED,SAFE;AAGdE,QAAAA,SAAS,EAAEF;AAHG,OAAP;AAJF,KAFJ;AAaL,OAAGnB,kBAAkB,EAbhB;AAcL,OAAGE,YAAY,EAdV;AAeL,OAAGC,mBAAmB,CAAC;AAAEmB,MAAAA,UAAU,EAAE;AAAd,KAAD;AAfjB,GAL4B;AAuBnCC,EAAAA,KAAK,EAAE;AACL,yBAAsBC,KAAD,IAAoB;AADpC,GAvB4B;;AA2BnCC,EAAAA,KAAK,CAAEd,KAAF,QAAoB;AAAA,QAAX;AAAEe,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAsB1B,YAAY,CAACU,KAAD,CAAxC;AACA,UAAMiB,QAAQ,GAAGvB,eAAe,CAACM,KAAD,EAAQ,YAAR,CAAhC;;AAEA,aAASkB,WAAT,CAAsBC,cAAtB,EAA+C;AAC7C,UAAIF,QAAQ,CAACJ,KAAb,EAAoB;AAEpBI,MAAAA,QAAQ,CAACJ,KAAT,GAAiBM,cAAjB;AACD;;AAED,WAAO;AAAA;;AAAA;AAAA,iBAEG,QAFH;AAAA,iBAQKH,eAAe,CAACH;AARrB;AAAA,wBAUDI,QAAQ,CAACJ,KAAT;AAAA,wBAC8Bb,KAAK,CAACW;AADpC;AAAA,4CAEII,KAAK,CAACT,OAFV,qBAEI,oBAAAS,KAAK,CAFT;AAAA,UAVC;AAAA,4CAIDG,WAJC,EAKDlB,KAAK,CAACG,OALL;AAAA,KAAP;AAiBD;;AAtDkC,CAAD,CAA7B","sourcesContent":["// Composables\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Directives\nimport intersect from '@/directives/intersect'\n\n// Utilities\nimport type { PropType } from 'vue'\nimport { defineComponent } from '@/util'\n\nexport const VLazy = defineComponent({\n  name: 'VLazy',\n\n  directives: { intersect },\n\n  props: {\n    modelValue: Boolean,\n    options: {\n      type: Object as PropType<IntersectionObserverInit>,\n      // For more information on types, navigate to:\n      // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\n      default: () => ({\n        root: undefined,\n        rootMargin: undefined,\n        threshold: undefined,\n      }),\n    },\n\n    ...makeDimensionProps(),\n    ...makeTagProps(),\n    ...makeTransitionProps({ transition: 'fade-transition' }),\n  },\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { slots }) {\n    const { dimensionStyles } = useDimension(props)\n    const isActive = useProxiedModel(props, 'modelValue')\n\n    function onIntersect (isIntersecting: boolean) {\n      if (isActive.value) return\n\n      isActive.value = isIntersecting\n    }\n\n    return () => (\n      <props.tag\n        class=\"v-lazy\"\n        v-intersect={[\n          onIntersect,\n          props.options,\n          isActive.value ? [] : ['once'],\n        ]}\n        style={ dimensionStyles.value }\n      >\n        { isActive.value && (\n          <MaybeTransition transition={ props.transition }>\n            { slots.default?.() }\n          </MaybeTransition>\n        )}\n      </props.tag>\n    )\n  },\n})\n"],"file":"VLazy.mjs"}

package/lib/components/VLazy/index.mjs

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

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

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

package/lib/components/VList/VList.css

@@ -0,0 +1,107 @@
+.v-list {
+  overflow: auto;
+  padding: 8px 0;
+  position: relative;
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  border-style: solid;
+  border-width: 0;
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+  background: rgba(var(--v-theme-surface));
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
+.v-list--border {
+  border-width: thin;
+  box-shadow: none;
+}
+.v-list--absolute {
+  position: absolute;
+}
+.v-list--fixed {
+  position: fixed;
+}
+.v-list--disabled {
+  pointer-events: none;
+  user-select: none;
+}
+.v-list--nav {
+  padding-inline-start: 8px;
+  padding-inline-end: 8px;
+}
+.v-list--rounded {
+  border-radius: 4px;
+}
+.v-list--subheader {
+  padding-top: 0;
+}
+
+.v-list-img {
+  border-radius: inherit;
+  display: flex;
+  height: 100%;
+  left: 0;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: -1;
+}
+
+.v-list-subheader {
+  align-items: center;
+  background: inherit;
+  display: flex;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.375rem;
+  padding-inline-end: 16px;
+  min-height: 40px;
+  transition: 0.2s min-height cubic-bezier(0.4, 0, 0.2, 1);
+}
+.v-list-subheader__text {
+  opacity: var(--v-medium-emphasis-opacity);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.v-list--density-default .v-list-subheader {
+  min-height: 40px;
+  padding-inline-start: calc(16px + var(--indent-padding)) !important;
+}
+
+.v-list--density-comfortable .v-list-subheader {
+  min-height: 36px;
+  padding-inline-start: calc(16px + var(--indent-padding)) !important;
+}
+
+.v-list--density-compact .v-list-subheader {
+  min-height: 32px;
+  padding-inline-start: calc(16px + var(--indent-padding)) !important;
+}
+
+.v-list-subheader--inset {
+  padding-inline-start: 72px;
+}
+.v-list--nav .v-list-subheader {
+  font-size: 0.75rem;
+}
+.v-list-subheader--sticky {
+  background: inherit;
+  left: 0;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.v-list__overlay {
+  background-color: currentColor;
+  border-radius: inherit;
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: opacity 0.2s ease-in-out;
+}

package/lib/components/VList/VList.mjs

@@ -1,90 +1,157 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
 // Styles
-import "./VList.sass";
-// Components
-import VSheet from "../VSheet/VSheet.mjs"; // Types
+import "./VList.css"; // Components
+
+import { VListChildren } from "./VListChildren.mjs"; // Composables
+
+import { makeBorderProps, useBorder } from "../../composables/border.mjs";
+import { makeDensityProps, useDensity } from "../../composables/density.mjs";
+import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
+import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
+import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
+import { makeTagProps } from "../../composables/tag.mjs";
+import { useBackgroundColor } from "../../composables/color.mjs";
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
+import { makeNestedProps, useNested } from "../../composables/nested/nested.mjs";
+import { makeVariantProps } from "../../composables/variant.mjs";
+import { createList } from "./list.mjs";
+import { provideDefaults } from "../../composables/defaults.mjs"; // Utilities
 
-/* @vue/component */
-export default VSheet.extend().extend({
-  name: 'v-list',
+import { computed, toRef } from 'vue';
+import { genericComponent, useRender } from "../../util/index.mjs"; // Types
 
-  provide() {
+const parseItems = items => {
+  if (!items) return undefined;
+  return items.map(item => {
+    if (typeof item === 'string') return {
+      type: 'item',
+      value: item,
+      title: item
+    };
+    const {
+      $type,
+      $children,
+      ...props
+    } = item;
+    if ($type === 'subheader') return {
+      type: 'subheader',
+      props
+    };
+    if ($type === 'divider') return {
+      type: 'divider',
+      props
+    };
     return {
-      isInList: true,
-      list: this
+      type: 'item',
+      props,
+      children: parseItems($children)
     };
-  },
+  });
+};
 
-  inject: {
-    isInMenu: {
-      default: false
-    },
-    isInNav: {
-      default: false
-    }
-  },
+export const VList = genericComponent()({
+  name: 'VList',
   props: {
-    dense: Boolean,
+    activeColor: String,
+    activeClass: String,
+    bgColor: String,
     disabled: Boolean,
-    expand: Boolean,
-    flat: Boolean,
+    lines: {
+      type: [Boolean, String],
+      default: 'one'
+    },
     nav: Boolean,
-    rounded: Boolean,
-    subheader: Boolean,
-    threeLine: Boolean,
-    twoLine: Boolean
+    items: Array,
+    ...makeNestedProps({
+      selectStrategy: 'single-leaf',
+      openStrategy: 'list'
+    }),
+    ...makeBorderProps(),
+    ...makeDensityProps(),
+    ...makeDimensionProps(),
+    ...makeElevationProps(),
+    ...makeRoundedProps(),
+    ...makeTagProps(),
+    ...makeThemeProps(),
+    ...makeVariantProps({
+      variant: 'text'
+    })
   },
-  data: () => ({
-    groups: []
-  }),
-  computed: {
-    classes() {
-      return { ...VSheet.options.computed.classes.call(this),
-        'v-list--dense': this.dense,
-        'v-list--disabled': this.disabled,
-        'v-list--flat': this.flat,
-        'v-list--nav': this.nav,
-        'v-list--rounded': this.rounded,
-        'v-list--subheader': this.subheader,
-        'v-list--two-line': this.twoLine,
-        'v-list--three-line': this.threeLine
-      };
-    }
-
-  },
-  methods: {
-    register(content) {
-      this.groups.push(content);
-    },
-
-    unregister(content) {
-      const index = this.groups.findIndex(g => g._uid === content._uid);
-      if (index > -1) this.groups.splice(index, 1);
-    },
-
-    listClick(uid) {
-      if (this.expand) return;
-
-      for (const group of this.groups) {
-        group.toggle(uid);
-      }
-    }
-
+  emits: {
+    'update:selected': val => true,
+    'update:opened': val => true,
+    'click:open': value => true,
+    'click:select': value => true
   },
 
-  render(h) {
-    const data = {
-      staticClass: 'v-list',
-      class: this.classes,
-      style: this.styles,
-      attrs: {
-        role: this.isInNav || this.isInMenu ? undefined : 'list',
-        ...this.attrs$
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const items = computed(() => parseItems(props.items));
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const {
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(toRef(props, 'bgColor'));
+    const {
+      borderClasses
+    } = useBorder(props);
+    const {
+      densityClasses
+    } = useDensity(props);
+    const {
+      dimensionStyles
+    } = useDimension(props);
+    const {
+      elevationClasses
+    } = useElevation(props);
+    const {
+      roundedClasses
+    } = useRounded(props);
+    const {
+      open,
+      select
+    } = useNested(props);
+    const lineClasses = computed(() => props.lines ? `v-list--${props.lines}-line` : undefined);
+    const activeColor = toRef(props, 'activeColor');
+    const color = toRef(props, 'color');
+    createList();
+    provideDefaults({
+      VListGroup: {
+        activeColor,
+        color
+      },
+      VListItem: {
+        activeClass: toRef(props, 'activeClass'),
+        activeColor,
+        color,
+        density: toRef(props, 'density'),
+        disabled: toRef(props, 'disabled'),
+        lines: toRef(props, 'lines'),
+        nav: toRef(props, 'nav'),
+        variant: toRef(props, 'variant')
       }
+    });
+    useRender(() => {
+      return _createVNode(props.tag, {
+        "class": ['v-list', {
+          'v-list--disabled': props.disabled,
+          'v-list--nav': props.nav
+        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value],
+        "style": [backgroundColorStyles.value, dimensionStyles.value]
+      }, {
+        default: () => [_createVNode(VListChildren, {
+          "items": items.value
+        }, slots)]
+      });
+    });
+    return {
+      open,
+      select
     };
-    return h(this.tag, this.setBackgroundColor(this.color, data), [this.$slots.default]);
   }
 
 });

package/lib/components/VList/VList.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VList/VList.ts"],"names":["VSheet","extend","name","provide","isInList","list","inject","isInMenu","default","isInNav","props","dense","Boolean","disabled","expand","flat","nav","rounded","subheader","threeLine","twoLine","data","groups","computed","classes","options","call","methods","register","content","push","unregister","index","findIndex","g","_uid","splice","listClick","uid","group","toggle","render","h","staticClass","class","style","styles","attrs","role","undefined","attrs$","tag","setBackgroundColor","color","$slots"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Styles\nimport './VList.sass'\nimport VListGroup from './VListGroup'\n\n// Components\nimport VSheet from '../VSheet/VSheet'\n\n// Types\nimport { VNode } from 'vue'\n\ntype VListGroupInstance = InstanceType<typeof VListGroup>\n\ninterface options extends InstanceType<typeof VSheet> {\n  isInMenu: boolean\n  isInNav: boolean\n}\n\n/* @vue/component */\nexport default VSheet.extend<options>().extend({\n  name: 'v-list',\n\n  provide (): object {\n    return {\n      isInList: true,\n      list: this,\n    }\n  },\n\n  inject: {\n    isInMenu: {\n      default: false,\n    },\n    isInNav: {\n      default: false,\n    },\n  },\n\n  props: {\n    dense: Boolean,\n    disabled: Boolean,\n    expand: Boolean,\n    flat: Boolean,\n    nav: Boolean,\n    rounded: Boolean,\n    subheader: Boolean,\n    threeLine: Boolean,\n    twoLine: Boolean,\n  },\n\n  data: () => ({\n    groups: [] as VListGroupInstance[],\n  }),\n\n  computed: {\n    classes (): object {\n      return {\n        ...VSheet.options.computed.classes.call(this),\n        'v-list--dense': this.dense,\n        'v-list--disabled': this.disabled,\n        'v-list--flat': this.flat,\n        'v-list--nav': this.nav,\n        'v-list--rounded': this.rounded,\n        'v-list--subheader': this.subheader,\n        'v-list--two-line': this.twoLine,\n        'v-list--three-line': this.threeLine,\n      }\n    },\n  },\n\n  methods: {\n    register (content: VListGroupInstance) {\n      this.groups.push(content)\n    },\n    unregister (content: VListGroupInstance) {\n      const index = this.groups.findIndex(g => g._uid === content._uid)\n\n      if (index > -1) this.groups.splice(index, 1)\n    },\n    listClick (uid: number) {\n      if (this.expand) return\n\n      for (const group of this.groups) {\n        group.toggle(uid)\n      }\n    },\n  },\n\n  render (h): VNode {\n    const data = {\n      staticClass: 'v-list',\n      class: this.classes,\n      style: this.styles,\n      attrs: {\n        role: this.isInNav || this.isInMenu ? undefined : 'list',\n        ...this.attrs$,\n      },\n    }\n\n    return h(this.tag, this.setBackgroundColor(this.color, data), [this.$slots.default])\n  },\n})\n"],"file":"VList.mjs"}
+{"version":3,"sources":["../../../src/components/VList/VList.tsx"],"names":["VListChildren","makeBorderProps","useBorder","makeDensityProps","useDensity","makeDimensionProps","useDimension","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeTagProps","useBackgroundColor","makeThemeProps","provideTheme","makeNestedProps","useNested","makeVariantProps","createList","provideDefaults","computed","toRef","genericComponent","useRender","parseItems","items","undefined","map","item","type","value","title","$type","$children","props","children","VList","name","activeColor","String","activeClass","bgColor","disabled","Boolean","lines","default","nav","Array","selectStrategy","openStrategy","variant","emits","val","setup","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","borderClasses","densityClasses","dimensionStyles","elevationClasses","roundedClasses","open","select","lineClasses","color","VListGroup","VListItem","density"],"mappings":"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","sourcesContent":["// Styles\nimport './VList.sass'\n\n// Components\nimport { VListChildren } from './VListChildren'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { makeNestedProps, useNested } from '@/composables/nested/nested'\nimport { makeVariantProps } from '@/composables/variant'\nimport { createList } from './list'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { genericComponent, useRender } from '@/util'\n\n// Types\nimport type { Prop, PropType } from 'vue'\nimport type { MakeSlots } from '@/util'\nimport type { ListGroupActivatorSlot } from './VListGroup'\n\nexport type ListItem = {\n  [key: string]: any\n  $type?: 'item' | 'subheader' | 'divider'\n  $children?: (string | ListItem)[]\n}\n\nexport type InternalListItem = {\n  type?: 'item' | 'subheader' | 'divider'\n  props?: Record<string, any>\n  children?: InternalListItem[]\n}\n\nconst parseItems = (items?: (string | ListItem)[]): InternalListItem[] | undefined => {\n  if (!items) return undefined\n\n  return items.map(item => {\n    if (typeof item === 'string') return { type: 'item', value: item, title: item }\n\n    const { $type, $children, ...props } = item\n\n    if ($type === 'subheader') return { type: 'subheader', props }\n    if ($type === 'divider') return { type: 'divider', props }\n\n    return { type: 'item', props, children: parseItems($children) }\n  })\n}\n\nexport const VList = genericComponent<new <T>() => {\n  $props: {\n    items?: T[]\n  }\n  $slots: MakeSlots<{\n    subheader: []\n    header: [ListGroupActivatorSlot]\n    item: [T]\n  }>\n}>()({\n  name: 'VList',\n\n  props: {\n    activeColor: String,\n    activeClass: String,\n    bgColor: String,\n    disabled: Boolean,\n    lines: {\n      type: [Boolean, String] as PropType<'one' | 'two' | 'three' | false>,\n      default: 'one',\n    },\n    nav: Boolean,\n    items: Array as Prop<ListItem[]>,\n\n    ...makeNestedProps({\n      selectStrategy: 'single-leaf' as const,\n      openStrategy: 'list' as const,\n    }),\n    ...makeBorderProps(),\n    ...makeDensityProps(),\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n    ...makeVariantProps({ variant: 'text' } as const),\n  },\n\n  emits: {\n    'update:selected': (val: string[]) => true,\n    'update:opened': (val: string[]) => true,\n    'click:open': (value: { id: string, value: boolean, path: string[] }) => true,\n    'click:select': (value: { id: string, value: boolean, path: string[] }) => true,\n  },\n\n  setup (props, { slots }) {\n    const items = computed(() => parseItems(props.items))\n    const { themeClasses } = provideTheme(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor'))\n    const { borderClasses } = useBorder(props)\n    const { densityClasses } = useDensity(props)\n    const { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n    const { open, select } = useNested(props)\n    const lineClasses = computed(() => props.lines ? `v-list--${props.lines}-line` : undefined)\n    const activeColor = toRef(props, 'activeColor')\n    const color = toRef(props, 'color')\n\n    createList()\n\n    provideDefaults({\n      VListGroup: {\n        activeColor,\n        color,\n      },\n      VListItem: {\n        activeClass: toRef(props, 'activeClass'),\n        activeColor,\n        color,\n        density: toRef(props, 'density'),\n        disabled: toRef(props, 'disabled'),\n        lines: toRef(props, 'lines'),\n        nav: toRef(props, 'nav'),\n        variant: toRef(props, 'variant'),\n      },\n    })\n\n    useRender(() => {\n      return (\n        <props.tag\n          class={[\n            'v-list',\n            {\n              'v-list--disabled': props.disabled,\n              'v-list--nav': props.nav,\n            },\n            themeClasses.value,\n            backgroundColorClasses.value,\n            borderClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            lineClasses.value,\n            roundedClasses.value,\n          ]}\n          style={[\n            backgroundColorStyles.value,\n            dimensionStyles.value,\n          ]}\n        >\n          <VListChildren items={ items.value } v-slots={ slots }></VListChildren>\n        </props.tag>\n      )\n    })\n\n    return {\n      open,\n      select,\n    }\n  },\n})\n\nexport type VList = InstanceType<typeof VList>\n"],"file":"VList.mjs"}

package/lib/components/VList/VList.sass

@@ -1,98 +1,92 @@
-@import './_variables.scss'
-@import './_mixins.sass'
+@forward './variables'
+@use 'sass:list'
+@use '../../styles/tools'
+@use './variables' as *
 
-// Theme
 .v-list
-  &.primary,
-  &.secondary,
-  &.accent,
-  &.success,
-  &.error,
-  &.warning,
-  &.info
-    > .v-list-item
-      color: map-deep-get($material-dark, 'text', 'primary')
-
-+theme(v-list) using ($material)
-  background: map-get($material, 'cards')
-  color: map-deep-get($material, 'text','primary')
-
-  .v-list--disabled
-    color: map-deep-get($material, 'text', 'disabled')
-
-  .v-list-group--active:before,
-  .v-list-group--active:after
-    background: map-get($material, 'dividers')
-
-// Sheet
-+sheet(v-list, $list-elevation, $list-border-radius, $list-shaped-border-radius)
-
-// Block
-.v-list
-  display: block
+  overflow: auto
   padding: $list-padding
-  position: static
-  +elevationTransition()
-
-// Modifier
-.v-list--disabled
+  position: relative
+
+  @include tools.border($list-border...)
+  @include tools.elevation($list-elevation)
+  @include tools.position($list-positions)
+  @include tools.rounded($list-border-radius)
+  @include tools.theme($list-theme...)
+
+  &--disabled
+    pointer-events: none
+    user-select: none
+
+  &--nav
+    padding-inline-start: $list-nav-padding
+    padding-inline-end: $list-nav-padding
+
+  &--rounded
+    @include tools.rounded($list-rounded-border-radius)
+
+  &--subheader
+    padding-top: $list-subheader-padding-top
+
+.v-list-img
+  border-radius: inherit
+  display: flex
+  height: 100%
+  left: 0
+  overflow: hidden
+  position: absolute
+  top: 0
+  width: 100%
+  z-index: -1
+
+.v-list-subheader
+  $root: &
+
+  align-items: center
+  background: inherit
+  display: flex
+  font-size: $list-subheader-font-size
+  font-weight: $list-subheader-font-weight
+  line-height: $list-subheader-line-height
+  padding-inline-end: $list-subheader-padding-end
+  min-height: $list-subheader-min-height
+  transition: $list-subheader-transition
+
+  &__text
+    opacity: $list-subheader-text-opacity
+    overflow: hidden
+    text-overflow: ellipsis
+    white-space: nowrap
+
+  @at-root
+    @include tools.density('v-list', $list-density) using ($modifier)
+      $base-padding: list.nth($list-item-padding, 2)
+
+      #{$root}
+        min-height: $list-subheader-min-height + ($modifier * $list-subheader-min-height-multiplier)
+        padding-inline-start: calc(#{$base-padding} + var(--indent-padding)) !important
+
+  &--inset
+    padding-inline-start: $list-subheader-inset-padding-start
+
+  .v-list--nav &
+    font-size: $list-nav-subheader-font-size
+
+  &--sticky
+    background: inherit
+    left: 0
+    position: sticky
+    top: 0
+    z-index: 1
+
+.v-list__overlay
+  background-color: currentColor
+  border-radius: inherit
+  bottom: 0
+  left: 0
+  opacity: 0
   pointer-events: none
-
-.v-list--flat
-  .v-list-item:before
-    display: none
-
-.v-list--dense
-  .v-subheader
-    font-size: $list-dense-subheader-font-size
-    height: $list-dense-subheader-height
-    padding: $list-dense-subheader-padding
-
-.v-list--nav,
-.v-list--rounded
-  .v-list-item:not(:last-child):not(:only-child)
-    margin-bottom: $list-nav-rounded-item-margin-bottom
-
-  &.v-list--dense .v-list-item,
-  .v-list-item--dense
-    &:not(:last-child):not(:only-child)
-      margin-bottom: $list-nav-rounded-dense-item-margin-bottom
-
-.v-list--nav
-  padding-left: $list-nav-padding-left
-  padding-right: $list-nav-padding-right
-
-  .v-list-item
-    padding: $list-nav-item-padding
-
-  .v-list-item,
-  .v-list-item:before
-    border-radius: $list-nav-border-radius
-
-.v-list.v-sheet--shaped
-  +list-shaped($list-item-min-height)
-
-  &.v-list--two-line
-    +list-shaped($list-item-two-line-min-height)
-
-  &.v-list--three-line
-    +list-shaped($list-item-three-line-min-height)
-
-  +ltr()
-    padding-right: $list-shaped-padding
-
-  +rtl()
-    padding-left: $list-shaped-padding
-
-.v-list--rounded
-  padding: 8px
-  +list-rounded($list-item-min-height)
-
-  &.v-list--two-line
-    +list-rounded($list-item-two-line-min-height)
-
-  &.v-list--three-line
-    +list-rounded($list-item-three-line-min-height)
-
-.v-list--subheader
-  padding-top: $list-subheader-padding-top
+  position: absolute
+  right: 0
+  top: 0
+  transition: opacity 0.2s ease-in-out