@vuetify/nightly 3.0.0-beta.0 → 3.0.0-beta.13

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VLazy/index.ts"],"names":["VLazy"],"mappings":"SAASA,K","sourcesContent":["export { VLazy } from './VLazy'\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VLazy"],"sources":["../../../src/components/VLazy/index.ts"],"sourcesContent":["export { VLazy } from './VLazy'\n"],"mappings":"SAASA,K"}

package/lib/components/VList/VList.css

@@ -5,7 +5,7 @@
   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);
+  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, 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));
@@ -14,18 +14,16 @@
   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--disabled > [class*=v-list-] {
-  opacity: 0.6;
+.v-list--nav {
+  padding-inline-start: 8px;
+  padding-inline-end: 8px;
+}
+.v-navigation-drawer--rail:not(.v-navigation-drawer--is-hovering) .v-list .v-avatar {
+  --v-avatar-height: 24px;
 }
 .v-list--rounded {
   border-radius: 4px;
@@ -49,37 +47,37 @@
 .v-list-subheader {
   align-items: center;
   background: inherit;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   display: flex;
   font-size: 0.875rem;
-  font-weight: 500;
+  font-weight: 400;
   line-height: 1.375rem;
   padding-inline-end: 16px;
-  min-height: 48px;
+  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: 48px;
+  min-height: 40px;
   padding-inline-start: calc(16px + var(--indent-padding)) !important;
 }
 
 .v-list--density-comfortable .v-list-subheader {
-  min-height: 44px;
+  min-height: 36px;
   padding-inline-start: calc(16px + var(--indent-padding)) !important;
 }
 
 .v-list--density-compact .v-list-subheader {
-  min-height: 40px;
+  min-height: 32px;
   padding-inline-start: calc(16px + var(--indent-padding)) !important;
 }
 
 .v-list-subheader--inset {
-  padding-inline-start: 72px;
+  --indent-padding: 56px;
 }
 .v-list--nav .v-list-subheader {
   font-size: 0.75rem;

package/lib/components/VList/VList.mjs

@@ -1,74 +1,95 @@
-import { createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
 // Styles
 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 { createList } from "./list.mjs"; // Utilities
+import { makeVariantProps } from "../../composables/variant.mjs";
+import { provideDefaults } from "../../composables/defaults.mjs";
+import { useBackgroundColor } from "../../composables/color.mjs"; // Utilities
 
 import { computed, toRef } from 'vue';
-import { genericComponent, useRender } from "../../util/index.mjs"; // Types
+import { genericComponent, getPropertyFromItem, pick, useRender } from "../../util/index.mjs"; // Types
 
-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 {
-      type: 'item',
-      props,
-      children: parseItems($children)
-    };
-  });
-};
+function transformItem(props, item) {
+  const type = getPropertyFromItem(item, props.itemType, 'item');
+  const title = typeof item === 'string' ? item : getPropertyFromItem(item, props.itemTitle);
+  const value = getPropertyFromItem(item, props.itemValue, undefined);
+  const children = getPropertyFromItem(item, props.itemChildren);
+  const itemProps = props.itemProps === true ? pick(item, ['children'])[1] : getPropertyFromItem(item, props.itemProps);
+  const _props = {
+    title,
+    value,
+    ...itemProps
+  };
+  return {
+    type,
+    title: _props.title,
+    value: _props.value,
+    props: _props,
+    children: type === 'item' && children ? transformItems(props, children) : undefined,
+    raw: item
+  };
+}
+
+function transformItems(props, items) {
+  const array = [];
+
+  for (const item of items) {
+    array.push(transformItem(props, item));
+  }
+
+  return array;
+}
+
+function useListItems(props) {
+  const items = computed(() => transformItems(props, props.items));
+  return {
+    items
+  };
+}
 
 export const VList = genericComponent()({
   name: 'VList',
   props: {
-    color: String,
+    activeColor: String,
+    activeClass: String,
+    bgColor: String,
     disabled: Boolean,
     lines: {
-      type: String,
+      type: [Boolean, String],
       default: 'one'
     },
     nav: Boolean,
-    items: Array,
     ...makeNestedProps({
       selectStrategy: 'single-leaf',
-      openStrategy: 'multiple'
+      openStrategy: 'list'
     }),
     ...makeBorderProps(),
     ...makeDensityProps(),
     ...makeDimensionProps(),
     ...makeElevationProps(),
+    itemType: {
+      type: String,
+      default: 'type'
+    },
+    ...makeItemsProps(),
     ...makeRoundedProps(),
     ...makeTagProps(),
-    ...makeThemeProps()
+    ...makeThemeProps(),
+    ...makeVariantProps({
+      variant: 'text'
+    })
   },
   emits: {
     'update:selected': val => true,
@@ -81,14 +102,16 @@ export const VList = genericComponent()({
     let {
       slots
     } = _ref;
-    const items = computed(() => parseItems(props.items));
+    const {
+      items
+    } = useListItems(props);
     const {
       themeClasses
     } = provideTheme(props);
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'color'));
+    } = useBackgroundColor(toRef(props, 'bgColor'));
     const {
       borderClasses
     } = useBorder(props);
@@ -108,27 +131,37 @@ export const VList = genericComponent()({
       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();
-    useRender(() => {
-      return _createVNode(props.tag, {
-        "class": ['v-list', {
-          'v-list--disabled': props.disabled,
-          'v-list--nav': props.nav,
-          [`v-list--${props.lines}-line`]: true
-        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value],
-        "style": [backgroundColorStyles.value, dimensionStyles.value]
-      }, {
-        default: () => [_createVNode(VListChildren, {
-          "items": items.value
-        }, {
-          default: slots.default,
-          item: slots.item,
-          title: slots.title,
-          subtitle: slots.subtitle,
-          header: slots.header
-        })]
-      });
+    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(() => _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,"sources":["../../../src/components/VList/VList.tsx"],"names":["VListChildren","makeBorderProps","useBorder","makeDensityProps","useDensity","makeDimensionProps","useDimension","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeTagProps","useBackgroundColor","makeThemeProps","provideTheme","makeNestedProps","useNested","createList","computed","toRef","genericComponent","useRender","parseItems","items","undefined","map","item","type","value","title","$type","$children","props","children","VList","name","color","String","disabled","Boolean","lines","default","nav","Array","selectStrategy","openStrategy","emits","val","setup","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","borderClasses","densityClasses","dimensionStyles","elevationClasses","roundedClasses","open","select","subtitle","header"],"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 { createList } from './list'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { genericComponent, useRender } from '@/util'\n\n// Types\nimport type { Prop } 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    color: String,\n    disabled: Boolean,\n    lines: {\n      type: String,\n      default: 'one',\n    },\n    nav: Boolean,\n    items: Array as Prop<ListItem[]>,\n\n    ...makeNestedProps({\n      selectStrategy: 'single-leaf' as const,\n      openStrategy: 'multiple' as const,\n    }),\n    ...makeBorderProps(),\n    ...makeDensityProps(),\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\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, 'color'))\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\n    createList()\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              [`v-list--${props.lines}-line`]: true,\n            },\n            themeClasses.value,\n            backgroundColorClasses.value,\n            borderClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            roundedClasses.value,\n          ]}\n          style={[\n            backgroundColorStyles.value,\n            dimensionStyles.value,\n          ]}\n        >\n          <VListChildren items={ items.value }>\n            {{\n              default: slots.default,\n              item: slots.item,\n              title: slots.title,\n              subtitle: slots.subtitle,\n              header: slots.header,\n            }}\n          </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"}
+{"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 *
@@ -10,7 +9,6 @@
 
   @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...)
 
@@ -18,8 +16,13 @@
     pointer-events: none
     user-select: none
 
-    > [class*='v-list-']
-      opacity: $list-disabled-opacity
+  &--nav
+    padding-inline-start: $list-nav-padding
+    padding-inline-end: $list-nav-padding
+
+  .v-navigation-drawer--rail:not(.v-navigation-drawer--is-hovering) &
+    .v-avatar
+      --v-avatar-height: 24px
 
   &--rounded
     @include tools.rounded($list-rounded-border-radius)
@@ -43,6 +46,7 @@
 
   align-items: center
   background: inherit
+  color: $list-subheader-color
   display: flex
   font-size: $list-subheader-font-size
   font-weight: $list-subheader-font-weight
@@ -52,7 +56,6 @@
   transition: $list-subheader-transition
 
   &__text
-    opacity: $list-subheader-text-opacity
     overflow: hidden
     text-overflow: ellipsis
     white-space: nowrap
@@ -66,7 +69,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',
@@ -20,32 +20,88 @@ export const VListChildren = genericComponent()({
     } = _ref;
     createList();
     return () => {
-      var _slots$default, _slots$default2, _props$items;
+      var _slots$default, _props$items;
 
-      return (_slots$default = (_slots$default2 = slots.default) == null ? void 0 : _slots$default2.call(slots)) != null ? _slots$default : (_props$items = props.items) == null ? void 0 : _props$items.map(_ref2 => {
+      return ((_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)) ?? ((_props$items = props.items) == null ? void 0 : _props$items.map(_ref2 => {
         let {
           children,
           props: itemProps,
-          type
+          type,
+          raw: item
         } = _ref2;
-        if (type === 'divider') return _createVNode(VDivider, itemProps, null);
-        if (type === 'subheader') return _createVNode(VListSubheader, itemProps, slots);
-        return children ? _createVNode(VListGroup, {
+
+        if (type === 'divider') {
+          var _slots$divider;
+
+          return ((_slots$divider = slots.divider) == null ? void 0 : _slots$divider.call(slots, {
+            props: itemProps
+          })) ?? _createVNode(VDivider, itemProps, null);
+        }
+
+        if (type === 'subheader') {
+          var _slots$subheader;
+
+          return ((_slots$subheader = slots.subheader) == null ? void 0 : _slots$subheader.call(slots, {
+            props: itemProps
+          })) ?? _createVNode(VListSubheader, itemProps, {
+            default: slots.subheader
+          });
+        }
+
+        const slotsWithItem = {
+          subtitle: slots.subtitle ? slotProps => {
+            var _slots$subtitle;
+
+            return (_slots$subtitle = slots.subtitle) == null ? void 0 : _slots$subtitle.call(slots, { ...slotProps,
+              item
+            });
+          } : undefined,
+          prepend: slots.prepend ? slotProps => {
+            var _slots$prepend;
+
+            return (_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots, { ...slotProps,
+              item
+            });
+          } : undefined,
+          append: slots.append ? slotProps => {
+            var _slots$append;
+
+            return (_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots, { ...slotProps,
+              item
+            });
+          } : undefined,
+          default: slots.default ? slotProps => {
+            var _slots$default2;
+
+            return (_slots$default2 = slots.default) == null ? void 0 : _slots$default2.call(slots, { ...slotProps,
+              item
+            });
+          } : undefined,
+          title: slots.title ? slotProps => {
+            var _slots$title;
+
+            return (_slots$title = slots.title) == null ? void 0 : _slots$title.call(slots, { ...slotProps,
+              item
+            });
+          } : undefined
+        };
+        const [listGroupProps, _1] = filterListGroupProps(itemProps);
+        return children ? _createVNode(VListGroup, _mergeProps({
           "value": itemProps == null ? void 0 : itemProps.value
-        }, {
+        }, listGroupProps), {
           activator: _ref3 => {
             let {
               props: activatorProps
             } = _ref3;
             return slots.header ? slots.header({ ...itemProps,
               ...activatorProps
-            }) : _createVNode(VListItem, _mergeProps(itemProps, activatorProps), null);
+            }) : _createVNode(VListItem, _mergeProps(itemProps, activatorProps), slotsWithItem);
           },
           default: () => _createVNode(VListChildren, {
             "items": children
           }, slots)
-        }) : slots.item ? slots.item(itemProps) : _createVNode(VListItem, itemProps, slots);
-      });
+        }) : slots.item ? slots.item(itemProps) : _createVNode(VListItem, itemProps, slotsWithItem);
+      }));
     };
   }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VList/VListChildren.tsx"],"names":["VDivider","VListGroup","VListItem","VListSubheader","genericComponent","createList","VListChildren","name","props","items","Array","setup","slots","default","map","children","itemProps","type","value","activator","activatorProps","header","item"],"mappings":";AAAA;SACSA,Q;SACAC,U;SACAC,S;SACAC,c,gCAET;;SACSC,gB;SACAC,U,sBAET;;AAOA,OAAO,MAAMC,aAAa,GAAGF,gBAAgB,GAWxC;AACHG,EAAAA,IAAI,EAAE,eADH;AAGHC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAEC;AADF,GAHJ;;AAOHC,EAAAA,KAAK,CAAEH,KAAF,QAAoB;AAAA,QAAX;AAAEI,MAAAA;AAAF,KAAW;AACvBP,IAAAA,UAAU;AAEV,WAAO;AAAA;;AAAA,kDAAMO,KAAK,CAACC,OAAZ,qBAAM,qBAAAD,KAAK,CAAX,6CAA2BJ,KAAK,CAACC,KAAjC,qBAA2B,aAAaK,GAAb,CAAiB,SAA0C;AAAA,YAAzC;AAAEC,UAAAA,QAAF;AAAYP,UAAAA,KAAK,EAAEQ,SAAnB;AAA8BC,UAAAA;AAA9B,SAAyC;AAC3F,YAAIA,IAAI,KAAK,SAAb,EAAwB,8BAAqBD,SAArB;AAExB,YAAIC,IAAI,KAAK,WAAb,EAA0B,oCAA2BD,SAA3B,EAAgDJ,KAAhD;AAE1B,eAAOG,QAAQ;AAAA,mBAEHC,SAFG,oBAEHA,SAAS,CAAEE;AAFR;AAKTC,UAAAA,SAAS,EAAE;AAAA,gBAAC;AAAEX,cAAAA,KAAK,EAAEY;AAAT,aAAD;AAAA,mBAA+BR,KAAK,CAACS,MAAN,GACtCT,KAAK,CAACS,MAAN,CAAa,EAAE,GAAGL,SAAL;AAAgB,iBAAGI;AAAnB,aAAb,CADsC,uCAEtBJ,SAFsB,EAELI,cAFK,QAA/B;AAAA,WALF;AAQTP,UAAAA,OAAO,EAAE;AAAA,qBACgBE;AADhB,aACqCH,KADrC;AARA,aAcbA,KAAK,CAACU,IAAN,GAAaV,KAAK,CAACU,IAAN,CAAWN,SAAX,CAAb,2BAAqDA,SAArD,EAA2EJ,KAA3E,CAdF;AAgBD,OArBiC,CAA3B;AAAA,KAAP;AAsBD;;AAhCE,CAXwC,CAAtC","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 }) => {\n      if (type === 'divider') return <VDivider {...itemProps} />\n\n      if (type === 'subheader') return <VListSubheader {...itemProps} v-slots={ slots } />\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 } />,\n            default: () => (\n              <VListChildren items={ children } v-slots={ slots } />\n            ),\n          }}\n        </VListGroup>\n      ) : (\n        slots.item ? slots.item(itemProps) : <VListItem { ...itemProps } v-slots={ slots } />\n      )\n    })\n  },\n})\n"],"file":"VListChildren.mjs"}
+{"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","divider","subheader","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') {\n        return slots.divider?.({ props: itemProps }) ?? (\n          <VDivider { ...itemProps } />\n        )\n      }\n\n      if (type === 'subheader') {\n        return slots.subheader?.({ props: itemProps }) ?? (\n          <VListSubheader\n            { ...itemProps }\n            v-slots={{ default: slots.subheader }}\n          />\n        )\n      }\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":"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"}

package/lib/components/VList/VListGroup.mjs

@@ -1,13 +1,15 @@
 import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
 // Components
+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"; // Utilities
 
-import { computed, defineComponent, toRef } from 'vue';
-import { genericComponent } from "../../util/index.mjs"; // Types
+import { computed, toRef } from 'vue';
+import { defineComponent, genericComponent, pick, propsFactory, useRender } from "../../util/index.mjs"; // Types
 
 const VListGroupActivator = defineComponent({
   name: 'VListGroupActivator',
@@ -25,19 +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: {
-    collapseIcon: {
-      type: String,
-      default: '$collapse'
-    },
-    expandIcon: {
-      type: String,
-      default: '$expand'
-    },
-    value: null,
-    ...makeTagProps()
+    title: String,
+    ...makeVListGroupProps()
   },
 
   setup(props, _ref2) {
@@ -56,20 +68,37 @@ export const VListGroup = genericComponent()({
 
     const activatorProps = computed(() => ({
       onClick,
-      appendIcon: isOpen.value ? props.collapseIcon : props.expandIcon,
       class: 'v-list-group__header'
     }));
-    return () => {
+    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(VListGroupActivator, null, {
-          default: () => [slots.activator({
-            props: activatorProps.value
+        default: () => [slots.activator && _createVNode(VDefaultsProvider, {
+          "defaults": {
+            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
+            }
+          }
+        }, {
+          default: () => [_createVNode(VListGroupActivator, null, {
+            default: () => [slots.activator({
+              props: activatorProps.value,
+              isOpen
+            })]
           })]
         }), _createVNode(VExpandTransition, null, {
           default: () => [_withDirectives(_createVNode("div", {
@@ -77,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