@vuetify/nightly 3.0.0-beta.3 → 3.0.0-beta.6

package/lib/components/VList/VList.mjs

@@ -4,19 +4,19 @@ import "./VList.css"; // Components
 
 import { VListChildren } from "./VListChildren.mjs"; // Composables
 
+import { createList } from "./list.mjs";
 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 { makeItemsProps } from "../../composables/items.mjs";
+import { makeNestedProps, useNested } from "../../composables/nested/nested.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
+import { provideDefaults } from "../../composables/defaults.mjs";
+import { useBackgroundColor } from "../../composables/color.mjs"; // Utilities
 
 import { computed, toRef } from 'vue';
 import { genericComponent, getPropertyFromItem, pick, useRender } from "../../util/index.mjs"; // Types
@@ -38,7 +38,7 @@ function transformItem(props, item) {
     value: _props.value,
     props: _props,
     children: type === 'item' && children ? transformItems(props, children) : undefined,
-    originalItem: item
+    raw: item
   };
 }
 
@@ -151,19 +151,17 @@ export const VList = genericComponent()({
         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)]
-      });
-    });
+    useRender(() => _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

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

@@ -1 +1 @@
-{"version":3,"file":"VList.mjs","names":["VListChildren","makeBorderProps","useBorder","makeDensityProps","useDensity","makeDimensionProps","useDimension","makeElevationProps","useElevation","makeItemsProps","makeRoundedProps","useRounded","makeTagProps","useBackgroundColor","makeThemeProps","provideTheme","makeNestedProps","useNested","makeVariantProps","createList","provideDefaults","computed","toRef","genericComponent","getPropertyFromItem","pick","useRender","transformItem","props","item","type","itemType","title","itemTitle","value","itemValue","undefined","children","itemChildren","itemProps","_props","transformItems","originalItem","items","array","push","useListItems","VList","name","activeColor","String","activeClass","bgColor","disabled","Boolean","lines","default","nav","selectStrategy","openStrategy","variant","emits","val","setup","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","borderClasses","densityClasses","dimensionStyles","elevationClasses","roundedClasses","open","select","lineClasses","color","VListGroup","VListItem","density"],"sources":["../../../src/components/VList/VList.tsx"],"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 { makeItemsProps } from '@/composables/items'\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, getPropertyFromItem, pick, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { MakeSlots } from '@/util'\nimport type { ListGroupActivatorSlot } from './VListGroup'\nimport type { InternalItem, ItemProps } from '@/composables/items'\n\nexport interface InternalListItem extends InternalItem {\n  type?: 'item' | 'subheader' | 'divider'\n}\n\nfunction transformItem (props: ItemProps & { itemType: string }, item: any): InternalListItem {\n  const type = getPropertyFromItem(item, props.itemType, 'item')\n  const title = typeof item === 'string' ? item : getPropertyFromItem(item, props.itemTitle)\n  const value = getPropertyFromItem(item, props.itemValue, undefined)\n  const children = getPropertyFromItem(item, props.itemChildren)\n  const itemProps = props.itemProps === true ? pick(item, ['children'])[1] : getPropertyFromItem(item, props.itemProps)\n\n  const _props = {\n    title,\n    value,\n    ...itemProps,\n  }\n\n  return {\n    type,\n    title: _props.title,\n    value: _props.value,\n    props: _props,\n    children: type === 'item' && children ? transformItems(props, children) : undefined,\n    originalItem: item,\n  }\n}\n\nfunction transformItems (props: ItemProps & { itemType: string }, items: (string | object)[]) {\n  const array: InternalListItem[] = []\n\n  for (const item of items) {\n    array.push(transformItem(props, item))\n  }\n\n  return array\n}\n\nfunction useListItems (props: ItemProps & { itemType: string }) {\n  const items = computed(() => transformItems(props, props.items))\n\n  return { items }\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\n    ...makeNestedProps({\n      selectStrategy: 'single-leaf' as const,\n      openStrategy: 'list' as const,\n    }),\n    ...makeBorderProps(),\n    ...makeDensityProps(),\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    itemType: {\n      type: String,\n      default: 'type',\n    },\n    ...makeItemsProps(),\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 } = useListItems(props)\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"],"mappings":"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"}
+{"version":3,"file":"VList.mjs","names":["VListChildren","createList","makeBorderProps","useBorder","makeDensityProps","useDensity","makeDimensionProps","useDimension","makeElevationProps","useElevation","makeItemsProps","makeNestedProps","useNested","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","makeVariantProps","provideDefaults","useBackgroundColor","computed","toRef","genericComponent","getPropertyFromItem","pick","useRender","transformItem","props","item","type","itemType","title","itemTitle","value","itemValue","undefined","children","itemChildren","itemProps","_props","transformItems","raw","items","array","push","useListItems","VList","name","activeColor","String","activeClass","bgColor","disabled","Boolean","lines","default","nav","selectStrategy","openStrategy","variant","emits","val","setup","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","borderClasses","densityClasses","dimensionStyles","elevationClasses","roundedClasses","open","select","lineClasses","color","VListGroup","VListItem","density"],"sources":["../../../src/components/VList/VList.tsx"],"sourcesContent":["// Styles\nimport './VList.sass'\n\n// Components\nimport { VListChildren } from './VListChildren'\n\n// Composables\nimport { createList } from './list'\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 { makeItemsProps } from '@/composables/items'\nimport { makeNestedProps, useNested } from '@/composables/nested/nested'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { makeVariantProps } from '@/composables/variant'\nimport { provideDefaults } from '@/composables/defaults'\nimport { useBackgroundColor } from '@/composables/color'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { genericComponent, getPropertyFromItem, pick, useRender } from '@/util'\n\n// Types\nimport type { InternalItem, ItemProps } from '@/composables/items'\nimport type { ListGroupActivatorSlot } from './VListGroup'\nimport type { MakeSlots } from '@/util'\nimport type { PropType } from 'vue'\n\nexport interface InternalListItem extends InternalItem {\n  type?: 'item' | 'subheader' | 'divider'\n}\n\nfunction transformItem (props: ItemProps & { itemType: string }, item: any): InternalListItem {\n  const type = getPropertyFromItem(item, props.itemType, 'item')\n  const title = typeof item === 'string' ? item : getPropertyFromItem(item, props.itemTitle)\n  const value = getPropertyFromItem(item, props.itemValue, undefined)\n  const children = getPropertyFromItem(item, props.itemChildren)\n  const itemProps = props.itemProps === true ? pick(item, ['children'])[1] : getPropertyFromItem(item, props.itemProps)\n\n  const _props = {\n    title,\n    value,\n    ...itemProps,\n  }\n\n  return {\n    type,\n    title: _props.title,\n    value: _props.value,\n    props: _props,\n    children: type === 'item' && children ? transformItems(props, children) : undefined,\n    raw: item,\n  }\n}\n\nfunction transformItems (props: ItemProps & { itemType: string }, items: (string | object)[]) {\n  const array: InternalListItem[] = []\n\n  for (const item of items) {\n    array.push(transformItem(props, item))\n  }\n\n  return array\n}\n\nfunction useListItems (props: ItemProps & { itemType: string }) {\n  const items = computed(() => transformItems(props, props.items))\n\n  return { items }\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\n    ...makeNestedProps({\n      selectStrategy: 'single-leaf' as const,\n      openStrategy: 'list' as const,\n    }),\n    ...makeBorderProps(),\n    ...makeDensityProps(),\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    itemType: {\n      type: String,\n      default: 'type',\n    },\n    ...makeItemsProps(),\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 } = useListItems(props)\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      <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    return {\n      open,\n      select,\n    }\n  },\n})\n\nexport type VList = InstanceType<typeof VList>\n"],"mappings":"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"}

package/lib/components/VList/VList.sass

@@ -1,4 +1,3 @@
-@forward './variables'
 @use 'sass:list'
 @use '../../styles/tools'
 @use './variables' as *
@@ -66,7 +65,7 @@
         padding-inline-start: calc(#{$base-padding} + var(--indent-padding)) !important
 
   &--inset
-    padding-inline-start: $list-subheader-inset-padding-start
+    --indent-padding: #{$list-subheader-inset-padding-start}
 
   .v-list--nav &
     font-size: $list-nav-subheader-font-size

package/lib/components/VList/VListChildren.mjs

@@ -1,12 +1,12 @@
 import { mergeProps as _mergeProps, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
 // Components
 import { VDivider } from "../VDivider/index.mjs";
-import { VListGroup } from "./VListGroup.mjs";
+import { filterListGroupProps, VListGroup } from "./VListGroup.mjs";
 import { VListItem } from "./VListItem.mjs";
 import { VListSubheader } from "./VListSubheader.mjs"; // Utilities
 
-import { genericComponent } from "../../util/index.mjs";
-import { createList } from "./list.mjs"; // Types
+import { createList } from "./list.mjs";
+import { genericComponent } from "../../util/index.mjs"; // Types
 
 export const VListChildren = genericComponent()({
   name: 'VListChildren',
@@ -27,7 +27,7 @@ export const VListChildren = genericComponent()({
           children,
           props: itemProps,
           type,
-          originalItem: item
+          raw: item
         } = _ref2;
         if (type === 'divider') return _createVNode(VDivider, itemProps, null);
         if (type === 'subheader') return _createVNode(VListSubheader, itemProps, slots);
@@ -68,9 +68,10 @@ export const VListChildren = genericComponent()({
             });
           } : undefined
         };
-        return children ? _createVNode(VListGroup, {
+        const [listGroupProps, _1] = filterListGroupProps(itemProps);
+        return children ? _createVNode(VListGroup, _mergeProps({
           "value": itemProps == null ? void 0 : itemProps.value
-        }, {
+        }, listGroupProps), {
           activator: _ref3 => {
             let {
               props: activatorProps

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

@@ -1 +1 @@
-{"version":3,"file":"VListChildren.mjs","names":["VDivider","VListGroup","VListItem","VListSubheader","genericComponent","createList","VListChildren","name","props","items","Array","setup","slots","default","map","children","itemProps","type","originalItem","item","slotsWithItem","subtitle","slotProps","undefined","prepend","append","title","value","activator","activatorProps","header"],"sources":["../../../src/components/VList/VListChildren.tsx"],"sourcesContent":["// Components\nimport { VDivider } from '../VDivider'\nimport { VListGroup } from './VListGroup'\nimport { VListItem } from './VListItem'\nimport { VListSubheader } from './VListSubheader'\n\n// Utilities\nimport { genericComponent } from '@/util'\nimport { createList } from './list'\n\n// Types\nimport type { InternalListItem } from './VList'\nimport type { ListItemSubtitleSlot, ListItemTitleSlot } from './VListItem'\nimport type { ListGroupActivatorSlot } from './VListGroup'\nimport type { MakeSlots } from '@/util'\nimport type { Prop } from 'vue'\n\nexport const VListChildren = genericComponent<new <T extends InternalListItem>() => {\n  $props: {\n    items?: T[]\n  }\n  $slots: MakeSlots<{\n    default: []\n    header: [ListGroupActivatorSlot]\n    item: [T]\n    title: [ListItemTitleSlot]\n    subtitle: [ListItemSubtitleSlot]\n  }>\n}>()({\n  name: 'VListChildren',\n\n  props: {\n    items: Array as Prop<InternalListItem[]>,\n  },\n\n  setup (props, { slots }) {\n    createList()\n\n    return () => slots.default?.() ?? props.items?.map(({ children, props: itemProps, type, originalItem: item }) => {\n      if (type === 'divider') return <VDivider {...itemProps} />\n\n      if (type === 'subheader') return <VListSubheader {...itemProps} v-slots={ slots } />\n\n      const slotsWithItem = {\n        subtitle: slots.subtitle ? (slotProps: any) => slots.subtitle?.({ ...slotProps, item }) : undefined,\n        prepend: slots.prepend ? (slotProps: any) => slots.prepend?.({ ...slotProps, item }) : undefined,\n        append: slots.append ? (slotProps: any) => slots.append?.({ ...slotProps, item }) : undefined,\n        default: slots.default ? (slotProps: any) => slots.default?.({ ...slotProps, item }) : undefined,\n        title: slots.title ? (slotProps: any) => slots.title?.({ ...slotProps, item }) : undefined,\n      }\n\n      return children ? (\n        <VListGroup\n          value={ itemProps?.value }\n        >\n          {{\n            activator: ({ props: activatorProps }) => slots.header\n              ? slots.header({ ...itemProps, ...activatorProps })\n              : <VListItem { ...itemProps } { ...activatorProps } v-slots={ slotsWithItem } />,\n            default: () => (\n              <VListChildren items={ children } v-slots={ slots } />\n            ),\n          }}\n        </VListGroup>\n      ) : (\n        slots.item ? slots.item(itemProps) : (\n          <VListItem\n            { ...itemProps }\n            v-slots={ slotsWithItem }\n          />\n        )\n      )\n    })\n  },\n})\n"],"mappings":";AAAA;SACSA,Q;SACAC,U;SACAC,S;SACAC,c,gCAET;;SACSC,gB;SACAC,U,sBAET;;AAOA,OAAO,MAAMC,aAAa,GAAGF,gBAAgB,GAWxC;EACHG,IAAI,EAAE,eADH;EAGHC,KAAK,EAAE;IACLC,KAAK,EAAEC;EADF,CAHJ;;EAOHC,KAAK,CAAEH,KAAF,QAAoB;IAAA,IAAX;MAAEI;IAAF,CAAW;IACvBP,UAAU;IAEV,OAAO;MAAA;;MAAA,4CAAMO,KAAK,CAACC,OAAZ,qBAAM,qBAAAD,KAAK,CAAX,6CAA2BJ,KAAK,CAACC,KAAjC,qBAA2B,aAAaK,GAAb,CAAiB,SAA8D;QAAA,IAA7D;UAAEC,QAAF;UAAYP,KAAK,EAAEQ,SAAnB;UAA8BC,IAA9B;UAAoCC,YAAY,EAAEC;QAAlD,CAA6D;QAC/G,IAAIF,IAAI,KAAK,SAAb,EAAwB,8BAAqBD,SAArB;QAExB,IAAIC,IAAI,KAAK,WAAb,EAA0B,oCAA2BD,SAA3B,EAAgDJ,KAAhD;QAE1B,MAAMQ,aAAa,GAAG;UACpBC,QAAQ,EAAET,KAAK,CAACS,QAAN,GAAkBC,SAAD;YAAA;;YAAA,0BAAoBV,KAAK,CAACS,QAA1B,qBAAoB,qBAAAT,KAAK,EAAY,EAAE,GAAGU,SAAL;cAAgBH;YAAhB,CAAZ,CAAzB;UAAA,CAAjB,GAAgFI,SADtE;UAEpBC,OAAO,EAAEZ,KAAK,CAACY,OAAN,GAAiBF,SAAD;YAAA;;YAAA,yBAAoBV,KAAK,CAACY,OAA1B,qBAAoB,oBAAAZ,KAAK,EAAW,EAAE,GAAGU,SAAL;cAAgBH;YAAhB,CAAX,CAAzB;UAAA,CAAhB,GAA8EI,SAFnE;UAGpBE,MAAM,EAAEb,KAAK,CAACa,MAAN,GAAgBH,SAAD;YAAA;;YAAA,wBAAoBV,KAAK,CAACa,MAA1B,qBAAoB,mBAAAb,KAAK,EAAU,EAAE,GAAGU,SAAL;cAAgBH;YAAhB,CAAV,CAAzB;UAAA,CAAf,GAA4EI,SAHhE;UAIpBV,OAAO,EAAED,KAAK,CAACC,OAAN,GAAiBS,SAAD;YAAA;;YAAA,0BAAoBV,KAAK,CAACC,OAA1B,qBAAoB,qBAAAD,KAAK,EAAW,EAAE,GAAGU,SAAL;cAAgBH;YAAhB,CAAX,CAAzB;UAAA,CAAhB,GAA8EI,SAJnE;UAKpBG,KAAK,EAAEd,KAAK,CAACc,KAAN,GAAeJ,SAAD;YAAA;;YAAA,uBAAoBV,KAAK,CAACc,KAA1B,qBAAoB,kBAAAd,KAAK,EAAS,EAAE,GAAGU,SAAL;cAAgBH;YAAhB,CAAT,CAAzB;UAAA,CAAd,GAA0EI;QAL7D,CAAtB;QAQA,OAAOR,QAAQ;UAAA,SAEHC,SAFG,oBAEHA,SAAS,CAAEW;QAFR;UAKTC,SAAS,EAAE;YAAA,IAAC;cAAEpB,KAAK,EAAEqB;YAAT,CAAD;YAAA,OAA+BjB,KAAK,CAACkB,MAAN,GACtClB,KAAK,CAACkB,MAAN,CAAa,EAAE,GAAGd,SAAL;cAAgB,GAAGa;YAAnB,CAAb,CADsC,uCAEtBb,SAFsB,EAELa,cAFK,GAEsBT,aAFtB,CAA/B;UAAA,CALF;UAQTP,OAAO,EAAE;YAAA,SACgBE;UADhB,GACqCH,KADrC;QARA,KAcbA,KAAK,CAACO,IAAN,GAAaP,KAAK,CAACO,IAAN,CAAWH,SAAX,CAAb,2BAESA,SAFT,EAGcI,aAHd,CAdF;MAqBD,CAlCiC,CAA3B;IAAA,CAAP;EAmCD;;AA7CE,CAXwC,CAAtC"}
+{"version":3,"file":"VListChildren.mjs","names":["VDivider","filterListGroupProps","VListGroup","VListItem","VListSubheader","createList","genericComponent","VListChildren","name","props","items","Array","setup","slots","default","map","children","itemProps","type","raw","item","slotsWithItem","subtitle","slotProps","undefined","prepend","append","title","listGroupProps","_1","value","activator","activatorProps","header"],"sources":["../../../src/components/VList/VListChildren.tsx"],"sourcesContent":["// Components\nimport { VDivider } from '../VDivider'\nimport { filterListGroupProps, VListGroup } from './VListGroup'\nimport { VListItem } from './VListItem'\nimport { VListSubheader } from './VListSubheader'\n\n// Utilities\nimport { createList } from './list'\nimport { genericComponent } from '@/util'\n\n// Types\nimport type { InternalListItem } from './VList'\nimport type { ListGroupActivatorSlot } from './VListGroup'\nimport type { ListItemSubtitleSlot, ListItemTitleSlot } from './VListItem'\nimport type { MakeSlots } from '@/util'\nimport type { Prop } from 'vue'\n\nexport const VListChildren = genericComponent<new <T extends InternalListItem>() => {\n  $props: {\n    items?: T[]\n  }\n  $slots: MakeSlots<{\n    default: []\n    header: [ListGroupActivatorSlot]\n    item: [T]\n    title: [ListItemTitleSlot]\n    subtitle: [ListItemSubtitleSlot]\n  }>\n}>()({\n  name: 'VListChildren',\n\n  props: {\n    items: Array as Prop<InternalListItem[]>,\n  },\n\n  setup (props, { slots }) {\n    createList()\n\n    return () => slots.default?.() ?? props.items?.map(({ children, props: itemProps, type, raw: item }) => {\n      if (type === 'divider') return <VDivider {...itemProps} />\n\n      if (type === 'subheader') return <VListSubheader {...itemProps} v-slots={ slots } />\n\n      const slotsWithItem = {\n        subtitle: slots.subtitle ? (slotProps: any) => slots.subtitle?.({ ...slotProps, item }) : undefined,\n        prepend: slots.prepend ? (slotProps: any) => slots.prepend?.({ ...slotProps, item }) : undefined,\n        append: slots.append ? (slotProps: any) => slots.append?.({ ...slotProps, item }) : undefined,\n        default: slots.default ? (slotProps: any) => slots.default?.({ ...slotProps, item }) : undefined,\n        title: slots.title ? (slotProps: any) => slots.title?.({ ...slotProps, item }) : undefined,\n      }\n\n      const [listGroupProps, _1] = filterListGroupProps(itemProps as any)\n\n      return children ? (\n        <VListGroup\n          value={ itemProps?.value }\n          { ...listGroupProps }\n        >\n          {{\n            activator: ({ props: activatorProps }) => slots.header\n              ? slots.header({ ...itemProps, ...activatorProps })\n              : <VListItem { ...itemProps } { ...activatorProps } v-slots={ slotsWithItem } />,\n            default: () => (\n              <VListChildren items={ children } v-slots={ slots } />\n            ),\n          }}\n        </VListGroup>\n      ) : (\n        slots.item ? slots.item(itemProps) : (\n          <VListItem\n            { ...itemProps }\n            v-slots={ slotsWithItem }\n          />\n        )\n      )\n    })\n  },\n})\n"],"mappings":";AAAA;SACSA,Q;SACAC,oB,EAAsBC,U;SACtBC,S;SACAC,c,gCAET;;SACSC,U;SACAC,gB,gCAET;;AAOA,OAAO,MAAMC,aAAa,GAAGD,gBAAgB,GAWxC;EACHE,IAAI,EAAE,eADH;EAGHC,KAAK,EAAE;IACLC,KAAK,EAAEC;EADF,CAHJ;;EAOHC,KAAK,CAAEH,KAAF,QAAoB;IAAA,IAAX;MAAEI;IAAF,CAAW;IACvBR,UAAU;IAEV,OAAO;MAAA;;MAAA,4CAAMQ,KAAK,CAACC,OAAZ,qBAAM,qBAAAD,KAAK,CAAX,6CAA2BJ,KAAK,CAACC,KAAjC,qBAA2B,aAAaK,GAAb,CAAiB,SAAqD;QAAA,IAApD;UAAEC,QAAF;UAAYP,KAAK,EAAEQ,SAAnB;UAA8BC,IAA9B;UAAoCC,GAAG,EAAEC;QAAzC,CAAoD;QACtG,IAAIF,IAAI,KAAK,SAAb,EAAwB,8BAAqBD,SAArB;QAExB,IAAIC,IAAI,KAAK,WAAb,EAA0B,oCAA2BD,SAA3B,EAAgDJ,KAAhD;QAE1B,MAAMQ,aAAa,GAAG;UACpBC,QAAQ,EAAET,KAAK,CAACS,QAAN,GAAkBC,SAAD;YAAA;;YAAA,0BAAoBV,KAAK,CAACS,QAA1B,qBAAoB,qBAAAT,KAAK,EAAY,EAAE,GAAGU,SAAL;cAAgBH;YAAhB,CAAZ,CAAzB;UAAA,CAAjB,GAAgFI,SADtE;UAEpBC,OAAO,EAAEZ,KAAK,CAACY,OAAN,GAAiBF,SAAD;YAAA;;YAAA,yBAAoBV,KAAK,CAACY,OAA1B,qBAAoB,oBAAAZ,KAAK,EAAW,EAAE,GAAGU,SAAL;cAAgBH;YAAhB,CAAX,CAAzB;UAAA,CAAhB,GAA8EI,SAFnE;UAGpBE,MAAM,EAAEb,KAAK,CAACa,MAAN,GAAgBH,SAAD;YAAA;;YAAA,wBAAoBV,KAAK,CAACa,MAA1B,qBAAoB,mBAAAb,KAAK,EAAU,EAAE,GAAGU,SAAL;cAAgBH;YAAhB,CAAV,CAAzB;UAAA,CAAf,GAA4EI,SAHhE;UAIpBV,OAAO,EAAED,KAAK,CAACC,OAAN,GAAiBS,SAAD;YAAA;;YAAA,0BAAoBV,KAAK,CAACC,OAA1B,qBAAoB,qBAAAD,KAAK,EAAW,EAAE,GAAGU,SAAL;cAAgBH;YAAhB,CAAX,CAAzB;UAAA,CAAhB,GAA8EI,SAJnE;UAKpBG,KAAK,EAAEd,KAAK,CAACc,KAAN,GAAeJ,SAAD;YAAA;;YAAA,uBAAoBV,KAAK,CAACc,KAA1B,qBAAoB,kBAAAd,KAAK,EAAS,EAAE,GAAGU,SAAL;cAAgBH;YAAhB,CAAT,CAAzB;UAAA,CAAd,GAA0EI;QAL7D,CAAtB;QAQA,MAAM,CAACI,cAAD,EAAiBC,EAAjB,IAAuB5B,oBAAoB,CAACgB,SAAD,CAAjD;QAEA,OAAOD,QAAQ;UAAA,SAEHC,SAFG,oBAEHA,SAAS,CAAEa;QAFR,GAGNF,cAHM;UAMTG,SAAS,EAAE;YAAA,IAAC;cAAEtB,KAAK,EAAEuB;YAAT,CAAD;YAAA,OAA+BnB,KAAK,CAACoB,MAAN,GACtCpB,KAAK,CAACoB,MAAN,CAAa,EAAE,GAAGhB,SAAL;cAAgB,GAAGe;YAAnB,CAAb,CADsC,uCAEtBf,SAFsB,EAELe,cAFK,GAEsBX,aAFtB,CAA/B;UAAA,CANF;UASTP,OAAO,EAAE;YAAA,SACgBE;UADhB,GACqCH,KADrC;QATA,KAebA,KAAK,CAACO,IAAN,GAAaP,KAAK,CAACO,IAAN,CAAWH,SAAX,CAAb,2BAESA,SAFT,EAGcI,aAHd,CAfF;MAsBD,CArCiC,CAA3B;IAAA,CAAP;EAsCD;;AAhDE,CAXwC,CAAtC"}

package/lib/components/VList/VListGroup.mjs

@@ -4,12 +4,12 @@ import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
 import { VExpandTransition } from "../transitions/index.mjs"; // Composables
 
 import { useList } from "./list.mjs";
+import { IconValue } from "../../composables/icons.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
-import { useNestedGroupActivator, useNestedItem } from "../../composables/nested/nested.mjs";
-import { IconValue } from "../../composables/icons.mjs"; // Utilities
+import { useNestedGroupActivator, useNestedItem } from "../../composables/nested/nested.mjs"; // Utilities
 
 import { computed, toRef } from 'vue';
-import { defineComponent, genericComponent } from "../../util/index.mjs"; // Types
+import { defineComponent, genericComponent, pick, propsFactory, useRender } from "../../util/index.mjs"; // Types
 
 const VListGroupActivator = defineComponent({
   name: 'VListGroupActivator',
@@ -27,21 +27,29 @@ const VListGroupActivator = defineComponent({
   }
 
 });
+export const makeVListGroupProps = propsFactory({
+  activeColor: String,
+  color: String,
+  collapseIcon: {
+    type: IconValue,
+    default: '$collapse'
+  },
+  expandIcon: {
+    type: IconValue,
+    default: '$expand'
+  },
+  prependIcon: IconValue,
+  appendIcon: IconValue,
+  fluid: Boolean,
+  subgroup: Boolean,
+  value: null,
+  ...makeTagProps()
+});
 export const VListGroup = genericComponent()({
   name: 'VListGroup',
   props: {
-    activeColor: String,
-    color: String,
-    collapseIcon: {
-      type: IconValue,
-      default: '$collapse'
-    },
-    expandIcon: {
-      type: IconValue,
-      default: '$expand'
-    },
-    value: null,
-    ...makeTagProps()
+    title: String,
+    ...makeVListGroupProps()
   },
 
   setup(props, _ref2) {
@@ -58,29 +66,31 @@ export const VListGroup = genericComponent()({
       open(!isOpen.value, e);
     };
 
-    const activatorProps = computed(() => {
-      var _props$activeColor;
-
-      return {
-        onClick,
-        active: isOpen.value,
-        appendIcon: isOpen.value ? props.collapseIcon : props.expandIcon,
-        class: 'v-list-group__header',
-        color: isOpen.value ? (_props$activeColor = props.activeColor) != null ? _props$activeColor : props.color : undefined
-      };
-    });
-    return () => {
+    const activatorProps = computed(() => ({
+      onClick,
+      class: 'v-list-group__header'
+    }));
+    const toggleIcon = computed(() => isOpen.value ? props.collapseIcon : props.expandIcon);
+    useRender(() => {
       var _slots$default2;
 
       return _createVNode(props.tag, {
         "class": ['v-list-group', {
-          'v-list-group--prepend': list == null ? void 0 : list.hasPrepend.value
+          'v-list-group--prepend': list == null ? void 0 : list.hasPrepend.value,
+          'v-list-group--fluid': props.fluid,
+          'v-list-group--subgroup': props.subgroup
         }]
       }, {
         default: () => [slots.activator && _createVNode(VDefaultsProvider, {
           "defaults": {
-            VListItemIcon: {
-              color: activatorProps.value.color
+            VListItem: {
+              active: isOpen.value,
+              activeColor: props.activeColor,
+              color: props.color,
+              prependIcon: props.prependIcon || props.subgroup && toggleIcon.value,
+              appendIcon: props.appendIcon || !props.subgroup && toggleIcon.value,
+              title: props.title,
+              value: props.value
             }
           }
         }, {
@@ -96,8 +106,12 @@ export const VListGroup = genericComponent()({
           }, [(_slots$default2 = slots.default) == null ? void 0 : _slots$default2.call(slots)]), [[_vShow, isOpen.value]])]
         })]
       });
-    };
+    });
+    return {};
   }
 
 });
+export function filterListGroupProps(props) {
+  return pick(props, Object.keys(VListGroup.props));
+}
 //# sourceMappingURL=VListGroup.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"VListGroup.mjs","names":["VDefaultsProvider","VExpandTransition","useList","makeTagProps","useNestedGroupActivator","useNestedItem","IconValue","computed","toRef","defineComponent","genericComponent","VListGroupActivator","name","setup","_","slots","default","VListGroup","props","activeColor","String","color","collapseIcon","type","expandIcon","value","isOpen","open","list","onClick","e","activatorProps","active","appendIcon","class","undefined","hasPrepend","activator","VListItemIcon"],"sources":["../../../src/components/VList/VListGroup.tsx"],"sourcesContent":["// Components\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VExpandTransition } from '@/components/transitions'\n\n// Composables\nimport { useList } from './list'\nimport { makeTagProps } from '@/composables/tag'\nimport { useNestedGroupActivator, useNestedItem } from '@/composables/nested/nested'\nimport { IconValue } from '@/composables/icons'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { defineComponent, genericComponent } from '@/util'\n\n// Types\nimport type { Ref } from 'vue'\nimport type { MakeSlots } from '@/util'\nimport type { InternalListItem } from './VList'\n\nexport type ListGroupActivatorSlot = {\n  props: {\n    onClick: (e: Event) => void\n    appendIcon: IconValue\n    class: string\n    color?: string\n  }\n}\n\nconst VListGroupActivator = defineComponent({\n  name: 'VListGroupActivator',\n\n  setup (_, { slots }) {\n    useNestedGroupActivator()\n\n    return () => slots.default?.()\n  },\n})\n\nexport const VListGroup = genericComponent<new <T extends InternalListItem>() => {\n  $props: {\n    items?: T[]\n  }\n  $slots: MakeSlots<{\n    activator: [ListGroupActivatorSlot]\n    default: []\n  }>\n}>()({\n  name: 'VListGroup',\n\n  props: {\n    activeColor: String,\n    color: String,\n    collapseIcon: {\n      type: IconValue,\n      default: '$collapse',\n    },\n    expandIcon: {\n      type: IconValue,\n      default: '$expand',\n    },\n    value: null,\n\n    ...makeTagProps(),\n  },\n\n  setup (props, { slots }) {\n    const { isOpen, open } = useNestedItem(toRef(props, 'value'), true)\n    const list = useList()\n\n    const onClick = (e: Event) => {\n      open(!isOpen.value, e)\n    }\n\n    const activatorProps: Ref<ListGroupActivatorSlot['props']> = computed(() => ({\n      onClick,\n      active: isOpen.value,\n      appendIcon: isOpen.value ? props.collapseIcon : props.expandIcon,\n      class: 'v-list-group__header',\n      color: isOpen.value ? props.activeColor ?? props.color : undefined,\n    }))\n\n    return () => {\n      return (\n        <props.tag\n          class={[\n            'v-list-group',\n            {\n              'v-list-group--prepend': list?.hasPrepend.value,\n            },\n          ]}\n        >\n          { slots.activator && (\n            <VDefaultsProvider\n              defaults={{\n                VListItemIcon: { color: activatorProps.value.color },\n              }}\n            >\n              <VListGroupActivator>\n                { slots.activator({ props: activatorProps.value, isOpen }) }\n              </VListGroupActivator>\n            </VDefaultsProvider>\n          ) }\n          <VExpandTransition>\n            <div class=\"v-list-group__items\" v-show={isOpen.value}>\n              { slots.default?.() }\n            </div>\n          </VExpandTransition>\n        </props.tag>\n      )\n    }\n  },\n})\n"],"mappings":";AAAA;SACSA,iB;SACAC,iB,oCAET;;SACSC,O;SACAC,Y;SACAC,uB,EAAyBC,a;SACzBC,S,uCAET;;AACA,SAASC,QAAT,EAAmBC,KAAnB,QAAgC,KAAhC;SACSC,e,EAAiBC,gB,gCAE1B;;AAcA,MAAMC,mBAAmB,GAAGF,eAAe,CAAC;EAC1CG,IAAI,EAAE,qBADoC;;EAG1CC,KAAK,CAAEC,CAAF,QAAgB;IAAA,IAAX;MAAEC;IAAF,CAAW;IACnBX,uBAAuB;IAEvB,OAAO;MAAA;;MAAA,yBAAMW,KAAK,CAACC,OAAZ,qBAAM,oBAAAD,KAAK,CAAX;IAAA,CAAP;EACD;;AAPyC,CAAD,CAA3C;AAUA,OAAO,MAAME,UAAU,GAAGP,gBAAgB,GAQrC;EACHE,IAAI,EAAE,YADH;EAGHM,KAAK,EAAE;IACLC,WAAW,EAAEC,MADR;IAELC,KAAK,EAAED,MAFF;IAGLE,YAAY,EAAE;MACZC,IAAI,EAAEjB,SADM;MAEZU,OAAO,EAAE;IAFG,CAHT;IAOLQ,UAAU,EAAE;MACVD,IAAI,EAAEjB,SADI;MAEVU,OAAO,EAAE;IAFC,CAPP;IAWLS,KAAK,EAAE,IAXF;IAaL,GAAGtB,YAAY;EAbV,CAHJ;;EAmBHU,KAAK,CAAEK,KAAF,SAAoB;IAAA,IAAX;MAAEH;IAAF,CAAW;IACvB,MAAM;MAAEW,MAAF;MAAUC;IAAV,IAAmBtB,aAAa,CAACG,KAAK,CAACU,KAAD,EAAQ,OAAR,CAAN,EAAwB,IAAxB,CAAtC;IACA,MAAMU,IAAI,GAAG1B,OAAO,EAApB;;IAEA,MAAM2B,OAAO,GAAIC,CAAD,IAAc;MAC5BH,IAAI,CAAC,CAACD,MAAM,CAACD,KAAT,EAAgBK,CAAhB,CAAJ;IACD,CAFD;;IAIA,MAAMC,cAAoD,GAAGxB,QAAQ,CAAC;MAAA;;MAAA,OAAO;QAC3EsB,OAD2E;QAE3EG,MAAM,EAAEN,MAAM,CAACD,KAF4D;QAG3EQ,UAAU,EAAEP,MAAM,CAACD,KAAP,GAAeP,KAAK,CAACI,YAArB,GAAoCJ,KAAK,CAACM,UAHqB;QAI3EU,KAAK,EAAE,sBAJoE;QAK3Eb,KAAK,EAAEK,MAAM,CAACD,KAAP,yBAAeP,KAAK,CAACC,WAArB,iCAAoCD,KAAK,CAACG,KAA1C,GAAkDc;MALkB,CAAP;IAAA,CAAD,CAArE;IAQA,OAAO,MAAM;MAAA;;MACX;QAAA,SAEW,CACL,cADK,EAEL;UACE,yBAAyBP,IAAzB,oBAAyBA,IAAI,CAAEQ,UAAN,CAAiBX;QAD5C,CAFK;MAFX;QAAA,gBASMV,KAAK,CAACsB,SAAN;UAAA,YAEY;YACRC,aAAa,EAAE;cAAEjB,KAAK,EAAEU,cAAc,CAACN,KAAf,CAAqBJ;YAA9B;UADP;QAFZ;UAAA;YAAA,gBAOMN,KAAK,CAACsB,SAAN,CAAgB;cAAEnB,KAAK,EAAEa,cAAc,CAACN,KAAxB;cAA+BC;YAA/B,CAAhB,CAPN;UAAA;QAAA,EATN;UAAA;YAAA,SAqBiB;UArBjB,uBAsBUX,KAAK,CAACC,OAtBhB,qBAsBU,qBAAAD,KAAK,CAtBf,cAqB+CW,MAAM,CAACD,KArBtD;QAAA;MAAA;IA2BD,CA5BD;EA6BD;;AAhEE,CARqC,CAAnC"}
+{"version":3,"file":"VListGroup.mjs","names":["VDefaultsProvider","VExpandTransition","useList","IconValue","makeTagProps","useNestedGroupActivator","useNestedItem","computed","toRef","defineComponent","genericComponent","pick","propsFactory","useRender","VListGroupActivator","name","setup","_","slots","default","makeVListGroupProps","activeColor","String","color","collapseIcon","type","expandIcon","prependIcon","appendIcon","fluid","Boolean","subgroup","value","VListGroup","props","title","isOpen","open","list","onClick","e","activatorProps","class","toggleIcon","hasPrepend","activator","VListItem","active","filterListGroupProps","Object","keys"],"sources":["../../../src/components/VList/VListGroup.tsx"],"sourcesContent":["// Components\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VExpandTransition } from '@/components/transitions'\n\n// Composables\nimport { useList } from './list'\nimport { IconValue } from '@/composables/icons'\nimport { makeTagProps } from '@/composables/tag'\nimport { useNestedGroupActivator, useNestedItem } from '@/composables/nested/nested'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { defineComponent, genericComponent, pick, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { InternalListItem } from './VList'\nimport type { MakeSlots } from '@/util'\nimport type { ExtractPropTypes, Ref } from 'vue'\n\nexport type ListGroupActivatorSlot = {\n  props: {\n    onClick: (e: Event) => void\n    class: string\n  }\n}\n\nconst VListGroupActivator = defineComponent({\n  name: 'VListGroupActivator',\n\n  setup (_, { slots }) {\n    useNestedGroupActivator()\n\n    return () => slots.default?.()\n  },\n})\n\nexport const makeVListGroupProps = propsFactory({\n  activeColor: String,\n  color: String,\n  collapseIcon: {\n    type: IconValue,\n    default: '$collapse',\n  },\n  expandIcon: {\n    type: IconValue,\n    default: '$expand',\n  },\n  prependIcon: IconValue,\n  appendIcon: IconValue,\n  fluid: Boolean,\n  subgroup: Boolean,\n  value: null,\n\n  ...makeTagProps(),\n})\n\nexport const VListGroup = genericComponent<new <T extends InternalListItem>() => {\n  $props: {\n    items?: T[]\n  }\n  $slots: MakeSlots<{\n    activator: [ListGroupActivatorSlot]\n    default: []\n  }>\n}>()({\n  name: 'VListGroup',\n\n  props: {\n    title: String,\n\n    ...makeVListGroupProps(),\n  },\n\n  setup (props, { slots }) {\n    const { isOpen, open } = useNestedItem(toRef(props, 'value'), true)\n    const list = useList()\n\n    const onClick = (e: Event) => {\n      open(!isOpen.value, e)\n    }\n\n    const activatorProps: Ref<ListGroupActivatorSlot['props']> = computed(() => ({\n      onClick,\n      class: 'v-list-group__header',\n    }))\n\n    const toggleIcon = computed(() => isOpen.value ? props.collapseIcon : props.expandIcon)\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-list-group',\n          {\n            'v-list-group--prepend': list?.hasPrepend.value,\n            'v-list-group--fluid': props.fluid,\n            'v-list-group--subgroup': props.subgroup,\n          },\n        ]}\n      >\n        { slots.activator && (\n          <VDefaultsProvider\n            defaults={{\n              VListItem: {\n                active: isOpen.value,\n                activeColor: props.activeColor,\n                color: props.color,\n                prependIcon: props.prependIcon || (props.subgroup && toggleIcon.value),\n                appendIcon: props.appendIcon || (!props.subgroup && toggleIcon.value),\n                title: props.title,\n                value: props.value,\n              },\n            }}\n          >\n            <VListGroupActivator>\n              { slots.activator({ props: activatorProps.value, isOpen }) }\n            </VListGroupActivator>\n          </VDefaultsProvider>\n        ) }\n\n        <VExpandTransition>\n          <div class=\"v-list-group__items\" v-show={ isOpen.value }>\n            { slots.default?.() }\n          </div>\n        </VExpandTransition>\n      </props.tag>\n    ))\n\n    return {}\n  },\n})\n\nexport function filterListGroupProps (props: ExtractPropTypes<ReturnType<typeof makeVListGroupProps>>) {\n  return pick(props, Object.keys(VListGroup.props) as any)\n}\n"],"mappings":";AAAA;SACSA,iB;SACAC,iB,oCAET;;SACSC,O;SACAC,S;SACAC,Y;SACAC,uB,EAAyBC,a,+CAElC;;AACA,SAASC,QAAT,EAAmBC,KAAnB,QAAgC,KAAhC;SACSC,e,EAAiBC,gB,EAAkBC,I,EAAMC,Y,EAAcC,S,gCAEhE;;AAYA,MAAMC,mBAAmB,GAAGL,eAAe,CAAC;EAC1CM,IAAI,EAAE,qBADoC;;EAG1CC,KAAK,CAAEC,CAAF,QAAgB;IAAA,IAAX;MAAEC;IAAF,CAAW;IACnBb,uBAAuB;IAEvB,OAAO;MAAA;;MAAA,yBAAMa,KAAK,CAACC,OAAZ,qBAAM,oBAAAD,KAAK,CAAX;IAAA,CAAP;EACD;;AAPyC,CAAD,CAA3C;AAUA,OAAO,MAAME,mBAAmB,GAAGR,YAAY,CAAC;EAC9CS,WAAW,EAAEC,MADiC;EAE9CC,KAAK,EAAED,MAFuC;EAG9CE,YAAY,EAAE;IACZC,IAAI,EAAEtB,SADM;IAEZgB,OAAO,EAAE;EAFG,CAHgC;EAO9CO,UAAU,EAAE;IACVD,IAAI,EAAEtB,SADI;IAEVgB,OAAO,EAAE;EAFC,CAPkC;EAW9CQ,WAAW,EAAExB,SAXiC;EAY9CyB,UAAU,EAAEzB,SAZkC;EAa9C0B,KAAK,EAAEC,OAbuC;EAc9CC,QAAQ,EAAED,OAdoC;EAe9CE,KAAK,EAAE,IAfuC;EAiB9C,GAAG5B,YAAY;AAjB+B,CAAD,CAAxC;AAoBP,OAAO,MAAM6B,UAAU,GAAGvB,gBAAgB,GAQrC;EACHK,IAAI,EAAE,YADH;EAGHmB,KAAK,EAAE;IACLC,KAAK,EAAEb,MADF;IAGL,GAAGF,mBAAmB;EAHjB,CAHJ;;EASHJ,KAAK,CAAEkB,KAAF,SAAoB;IAAA,IAAX;MAAEhB;IAAF,CAAW;IACvB,MAAM;MAAEkB,MAAF;MAAUC;IAAV,IAAmB/B,aAAa,CAACE,KAAK,CAAC0B,KAAD,EAAQ,OAAR,CAAN,EAAwB,IAAxB,CAAtC;IACA,MAAMI,IAAI,GAAGpC,OAAO,EAApB;;IAEA,MAAMqC,OAAO,GAAIC,CAAD,IAAc;MAC5BH,IAAI,CAAC,CAACD,MAAM,CAACJ,KAAT,EAAgBQ,CAAhB,CAAJ;IACD,CAFD;;IAIA,MAAMC,cAAoD,GAAGlC,QAAQ,CAAC,OAAO;MAC3EgC,OAD2E;MAE3EG,KAAK,EAAE;IAFoE,CAAP,CAAD,CAArE;IAKA,MAAMC,UAAU,GAAGpC,QAAQ,CAAC,MAAM6B,MAAM,CAACJ,KAAP,GAAeE,KAAK,CAACV,YAArB,GAAoCU,KAAK,CAACR,UAAjD,CAA3B;IAEAb,SAAS,CAAC;MAAA;;MAAA;QAAA,SAEC,CACL,cADK,EAEL;UACE,yBAAyByB,IAAzB,oBAAyBA,IAAI,CAAEM,UAAN,CAAiBZ,KAD5C;UAEE,uBAAuBE,KAAK,CAACL,KAF/B;UAGE,0BAA0BK,KAAK,CAACH;QAHlC,CAFK;MAFD;QAAA,gBAWJb,KAAK,CAAC2B,SAAN;UAAA,YAEY;YACRC,SAAS,EAAE;cACTC,MAAM,EAAEX,MAAM,CAACJ,KADN;cAETX,WAAW,EAAEa,KAAK,CAACb,WAFV;cAGTE,KAAK,EAAEW,KAAK,CAACX,KAHJ;cAITI,WAAW,EAAEO,KAAK,CAACP,WAAN,IAAsBO,KAAK,CAACH,QAAN,IAAkBY,UAAU,CAACX,KAJvD;cAKTJ,UAAU,EAAEM,KAAK,CAACN,UAAN,IAAqB,CAACM,KAAK,CAACH,QAAP,IAAmBY,UAAU,CAACX,KALtD;cAMTG,KAAK,EAAED,KAAK,CAACC,KANJ;cAOTH,KAAK,EAAEE,KAAK,CAACF;YAPJ;UADH;QAFZ;UAAA;YAAA,gBAeMd,KAAK,CAAC2B,SAAN,CAAgB;cAAEX,KAAK,EAAEO,cAAc,CAACT,KAAxB;cAA+BI;YAA/B,CAAhB,CAfN;UAAA;QAAA,EAXI;UAAA;YAAA,SAgCO;UAhCP,uBAiCAlB,KAAK,CAACC,OAjCN,qBAiCA,qBAAAD,KAAK,CAjCL,cAgCsCkB,MAAM,CAACJ,KAhC7C;QAAA;MAAA;IAAA,CAAD,CAAT;IAuCA,OAAO,EAAP;EACD;;AAhEE,CARqC,CAAnC;AA2EP,OAAO,SAASgB,oBAAT,CAA+Bd,KAA/B,EAAgG;EACrG,OAAOvB,IAAI,CAACuB,KAAD,EAAQe,MAAM,CAACC,IAAP,CAAYjB,UAAU,CAACC,KAAvB,CAAR,CAAX;AACD"}

package/lib/components/VList/VListItem.css

@@ -1,11 +1,13 @@
 .v-list-item {
   align-items: center;
-  display: flex;
-  padding: 8px 16px;
-  position: relative;
+  display: grid;
+  flex: none;
+  grid-template-areas: "prepend content append";
+  grid-template-columns: max-content auto max-content;
   outline: none;
+  padding: 4px 16px;
+  position: relative;
   text-decoration: none;
-  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   border-color: rgba(var(--v-border-color), var(--v-border-opacity));
   border-style: solid;
   border-width: 0;
@@ -35,7 +37,7 @@
 .v-list-item--active:focus > .v-list-item__overlay, .v-list-item[aria-haspopup=menu][aria-expanded=true]:focus > .v-list-item__overlay {
   opacity: calc(0.16 * var(--v-theme-overlay-multiplier));
 }
-.v-list-item--variant-plain, .v-list-item--variant-outlined, .v-list-item--variant-text, .v-list-item--variant-contained-text {
+.v-list-item--variant-plain, .v-list-item--variant-outlined, .v-list-item--variant-text, .v-list-item--variant-tonal {
   background: transparent;
   color: inherit;
 }
@@ -48,14 +50,14 @@
 .v-list-item--variant-plain .v-list-item__overlay {
   display: none;
 }
-.v-list-item--variant-contained, .v-list-item--variant-contained-flat {
+.v-list-item--variant-elevated, .v-list-item--variant-flat {
   background: rgba(var(--v-theme-surface));
   color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
 }
-.v-list-item--variant-contained {
+.v-list-item--variant-elevated {
   box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
 }
-.v-list-item--variant-contained-flat {
+.v-list-item--variant-flat {
   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);
 }
 .v-list-item--variant-outlined {
@@ -64,7 +66,7 @@
 .v-list-item--variant-text .v-list-item__overlay {
   background: currentColor;
 }
-.v-list-item--variant-contained-text .v-list-item__underlay {
+.v-list-item--variant-tonal .v-list-item__underlay {
   background: currentColor;
   opacity: var(--v-activated-opacity);
   border-radius: inherit;
@@ -76,6 +78,13 @@
   pointer-events: none;
   transition: opacity 0.2s ease-in-out;
 }
+.v-list-item__prepend > .v-icon, .v-list-item__append > .v-icon {
+  opacity: var(--v-medium-emphasis-opacity);
+}
+.v-list-item--active .v-list-item__prepend > .v-icon,
+.v-list-item--active .v-list-item__append > .v-icon {
+  opacity: 1;
+}
 .v-list-item--rounded {
   border-radius: 4px;
 }
@@ -88,47 +97,53 @@
   cursor: pointer;
 }
 
-.v-list-item-action,
-.v-list-item-avatar,
-.v-list-item-icon {
+.v-list-item__prepend {
+  align-items: center;
   align-self: center;
   display: flex;
-  align-items: center;
-  flex: none;
-  transition: inherit;
-  transition-property: height, width;
+  grid-area: prepend;
+}
+.v-list-item__prepend > .v-avatar {
+  margin-inline-end: 16px;
+}
+.v-list-item__prepend > .v-icon {
+  margin-inline-end: 32px;
 }
-.v-list-item--three-line .v-list-item-action,
-.v-list-item--three-line .v-list-item-avatar,
-.v-list-item--three-line .v-list-item-icon {
-  align-self: flex-start;
+.v-list-item--two-line .v-list-item__prepend, .v-list-item--three-line .v-list-item__prepend {
+  align-self: start;
 }
 
-.v-list-item-avatar--start {
-  margin-inline-end: 16px;
+.v-list-item__append {
+  align-self: center;
+  display: flex;
+  align-items: center;
+  grid-area: append;
 }
-.v-list-item-avatar--end {
+.v-list-item__append > .v-avatar {
   margin-inline-start: 16px;
 }
-.v-list-item--density-default.v-list-item--three-line .v-list-item-avatar {
-  margin-top: 4px;
+.v-list-item__append > .v-icon {
+  margin-inline-start: 32px;
 }
-
-.v-list-item--density-comfortable.v-list-item--three-line .v-list-item-avatar {
-  margin-top: 8px;
+.v-list-item--two-line .v-list-item__append, .v-list-item--three-line .v-list-item__append {
+  align-self: start;
 }
 
-.v-list-item--density-compact.v-list-item--three-line .v-list-item-avatar {
-  margin-top: 12px;
+.v-list-item__content {
+  align-self: center;
+  grid-area: content;
+  overflow: hidden;
 }
 
-.v-list-item-icon--start {
-  margin-inline-end: 32px;
-}
-.v-list-item-icon--end {
-  margin-inline-start: 32px;
+.v-list-item-action {
+  align-self: center;
+  display: flex;
+  align-items: center;
+  grid-area: prepend;
+  flex: none;
+  transition: inherit;
+  transition-property: height, width;
 }
-
 .v-list-item-action--start {
   margin-inline-end: 12px;
 }
@@ -155,11 +170,6 @@
   margin-bottom: 0;
 }
 
-.v-list-item-header {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
 .v-list-item-subtitle {
   -webkit-box-orient: vertical;
   display: -webkit-box;
@@ -211,10 +221,13 @@
   line-height: 1rem;
 }
 
-.v-list-item--density-default.v-list-item--one-line {
+.v-list-item--density-default {
   min-height: 40px;
-  padding-top: 8px;
-  padding-bottom: 8px;
+}
+.v-list-item--density-default.v-list-item--one-line {
+  min-height: 48px;
+  padding-top: 4px;
+  padding-bottom: 4px;
 }
 .v-list-item--density-default.v-list-item--two-line {
   min-height: 64px;
@@ -239,10 +252,13 @@
   padding-inline-end: 16px;
 }
 
-.v-list-item--density-comfortable.v-list-item--one-line {
+.v-list-item--density-comfortable {
   min-height: 36px;
-  padding-top: 4px;
-  padding-bottom: 4px;
+}
+.v-list-item--density-comfortable.v-list-item--one-line {
+  min-height: 44px;
+  padding-top: 0px;
+  padding-bottom: 0px;
 }
 .v-list-item--density-comfortable.v-list-item--two-line {
   min-height: 60px;
@@ -267,10 +283,13 @@
   padding-inline-end: 16px;
 }
 
-.v-list-item--density-compact.v-list-item--one-line {
+.v-list-item--density-compact {
   min-height: 32px;
-  padding-top: 0px;
-  padding-bottom: 0px;
+}
+.v-list-item--density-compact.v-list-item--one-line {
+  min-height: 40px;
+  padding-top: -4px;
+  padding-bottom: -4px;
 }
 .v-list-item--density-compact.v-list-item--two-line {
   min-height: 56px;
@@ -303,6 +322,10 @@
   margin-bottom: 4px;
 }
 
+.v-list-item__underlay {
+  position: absolute;
+}
+
 .v-list-item__overlay {
   background-color: currentColor;
   border-radius: inherit;
@@ -315,7 +338,7 @@
   top: 0;
   transition: opacity 0.2s ease-in-out;
 }
-.v-list-item--active.v-list-item--contained .v-list-item__overlay {
+.v-list-item--active.v-list-item--variant-elevated .v-list-item__overlay {
   --v-theme-overlay-multiplier: 0;
 }
 
@@ -327,25 +350,28 @@
 }
 
 .v-list-group {
+  --list-indent-size: 16px;
   --parent-padding: var(--indent-padding);
+  --prepend-width: 40px;
+}
+.v-list-group--fluid {
+  --list-indent-size: 0px;
 }
 .v-list-group--prepend {
-  --parent-padding: calc(var(--indent-padding) + 40px);
+  --parent-padding: calc(var(--indent-padding) + var(--prepend-width));
+}
+.v-list-group--fluid.v-list-group--prepend {
+  --parent-padding: var(--indent-padding);
 }
 
 .v-list-group__items {
-  --indent-padding: calc(var(--parent-padding) + 16px);
+  --indent-padding: calc(var(--parent-padding) + var(--list-indent-size));
 }
 
 .v-list-group__items .v-list-item {
   padding-inline-start: calc(16px + var(--indent-padding)) !important;
 }
 
-.v-list-item--prepend .v-list-item-avatar,
-.v-list-group__items .v-list-item--prepend .v-list-item-avatar {
-  padding-inline-start: calc(16px + var(--indent-padding) + 40px + 16px) !important;
-}
-
 .v-list-group__header.v-list-item--active .v-list-item__overlay {
   display: none;
 }