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

package/lib/components/VIcon/_variables.scss

@@ -7,6 +7,7 @@ $icon-btn-margin-start-multiplier: -9 !default;
 $icon-btn-margin-end-multiplier: 4.5 !default;
 $icon-btn-margin-start: calc(var(--v-btn-height) / #{$icon-btn-margin-start-multiplier}) !default;
 $icon-btn-margin-end: calc(var(--v-btn-height) / #{$icon-btn-margin-end-multiplier}) !default;
+$icon-btn-stacked-margin: 4px !default;
 $icon-left-margin-left: map.get(settings.$grid-gutters, 'md') !default;
 $icon-letter-spacing: normal !default;
 $icon-line-height: 1 !default;

package/lib/components/VInput/VInput.css

@@ -1,6 +1,8 @@
 .v-input {
   display: grid;
   flex: 1 1 auto;
+  font-size: 1rem;
+  font-weight: 400;
 }
 .v-input--disabled {
   pointer-events: none;
@@ -34,7 +36,7 @@
 
 .v-input--horizontal {
   grid-template-areas: "prepend control append" "a messages b";
-  grid-template-columns: max-content auto max-content;
+  grid-template-columns: max-content minmax(0, 1fr) max-content;
   grid-template-rows: auto auto;
 }
 .v-input--horizontal .v-input__prepend {

package/lib/components/VInput/VInput.mjs

@@ -33,13 +33,12 @@ export const VInput = genericComponent()({
   props: { ...makeVInputProps()
   },
   emits: {
-    'click:prepend': e => true,
-    'click:append': e => true,
     'update:modelValue': val => true
   },
 
   setup(props, _ref) {
     let {
+      attrs,
       slots,
       emit
     } = _ref;
@@ -85,14 +84,14 @@ export const VInput = genericComponent()({
       }, [hasPrepend && _createVNode("div", {
         "class": "v-input__prepend"
       }, [slots == null ? void 0 : (_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots, slotProps.value), props.prependIcon && _createVNode(VIcon, {
-        "onClick": e => emit('click:prepend', e),
+        "onClick": attrs['onClick:prepend'],
         "icon": props.prependIcon
       }, null)]), slots.default && _createVNode("div", {
         "class": "v-input__control"
       }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, slotProps.value)]), hasAppend && _createVNode("div", {
         "class": "v-input__append"
       }, [slots == null ? void 0 : (_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots, slotProps.value), props.appendIcon && _createVNode(VIcon, {
-        "onClick": e => emit('click:append', e),
+        "onClick": attrs['onClick:append'],
         "icon": props.appendIcon
       }, null)]), hasDetails && _createVNode("div", {
         "class": "v-input__details"

package/lib/components/VInput/VInput.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VInput/VInput.tsx"],"names":["VIcon","VMessages","makeDensityProps","useDensity","makeValidationProps","useValidation","computed","genericComponent","getUid","pick","propsFactory","useRender","makeVInputProps","id","String","appendIcon","prependIcon","hideDetails","Boolean","messages","type","Array","default","direction","validator","v","includes","VInput","name","props","emits","e","val","setup","slots","emit","densityClasses","errorMessages","isDirty","isDisabled","isReadonly","isPristine","isValid","isValidating","reset","resetValidation","validate","validationClasses","uid","slotProps","hasPrepend","prepend","hasAppend","append","hasMessages","length","value","hasDetails","message","details","filterInputProps","Object","keys"],"mappings":"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","sourcesContent":["// Styles\nimport './VInput.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\nimport { VMessages } from '@/components/VMessages'\n\n// Composables\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeValidationProps, useValidation } from '@/composables/validation'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, getUid, pick, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { ComputedRef, ExtractPropTypes, PropType, Ref } from 'vue'\nimport type { MakeSlots } from '@/util'\n\nexport interface VInputSlot {\n  id: ComputedRef<string>\n  isDirty: ComputedRef<boolean>\n  isDisabled: ComputedRef<boolean>\n  isReadonly: ComputedRef<boolean>\n  isPristine: Ref<boolean>\n  isValid: ComputedRef<boolean | null>\n  isValidating: Ref<boolean>\n  reset: () => void\n  resetValidation: () => void\n  validate: () => void\n}\n\nexport const makeVInputProps = propsFactory({\n  id: String,\n  appendIcon: String,\n  prependIcon: String,\n  hideDetails: [Boolean, String] as PropType<boolean | 'auto'>,\n  messages: {\n    type: [Array, String] as PropType<string | string[]>,\n    default: () => ([]),\n  },\n  direction: {\n    type: String as PropType<'horizontal' | 'vertical'>,\n    default: 'horizontal',\n    validator: (v: any) => ['horizontal', 'vertical'].includes(v),\n  },\n\n  ...makeDensityProps(),\n  ...makeValidationProps(),\n})\n\nexport type VInputSlots = MakeSlots<{\n  default: [VInputSlot]\n  prepend: [VInputSlot]\n  append: [VInputSlot]\n  details: [VInputSlot]\n}>\n\nexport const VInput = genericComponent<new <T>() => {\n  $slots: VInputSlots\n}>()({\n  name: 'VInput',\n\n  props: {\n    ...makeVInputProps(),\n  },\n\n  emits: {\n    'click:prepend': (e: MouseEvent) => true,\n    'click:append': (e: MouseEvent) => true,\n    'update:modelValue': (val: any) => true,\n  },\n\n  setup (props, { slots, emit }) {\n    const { densityClasses } = useDensity(props)\n    const {\n      errorMessages,\n      isDirty,\n      isDisabled,\n      isReadonly,\n      isPristine,\n      isValid,\n      isValidating,\n      reset,\n      resetValidation,\n      validate,\n      validationClasses,\n    } = useValidation(props)\n\n    const uid = getUid()\n    const id = computed(() => props.id || `input-${uid}`)\n\n    const slotProps = computed<VInputSlot>(() => ({\n      id,\n      isDirty,\n      isDisabled,\n      isReadonly,\n      isPristine,\n      isValid,\n      isValidating,\n      reset,\n      resetValidation,\n      validate,\n    }))\n\n    useRender(() => {\n      const hasPrepend = !!(slots.prepend || props.prependIcon)\n      const hasAppend = !!(slots.append || props.appendIcon)\n      const hasMessages = !!(\n        props.messages?.length ||\n        errorMessages.value.length\n      )\n      const hasDetails = !props.hideDetails || (\n        props.hideDetails === 'auto' &&\n        hasMessages\n      )\n\n      return (\n        <div class={[\n          'v-input',\n          `v-input--${props.direction}`,\n          densityClasses.value,\n          validationClasses.value,\n        ]}\n        >\n          { hasPrepend && (\n            <div\n              class=\"v-input__prepend\"\n            >\n              { slots?.prepend?.(slotProps.value) }\n\n              { props.prependIcon && (\n                <VIcon\n                  onClick={ (e: MouseEvent) => emit('click:prepend', e) }\n                  icon={ props.prependIcon }\n                />\n              ) }\n            </div>\n          ) }\n\n          { slots.default && (\n            <div class=\"v-input__control\">\n              { slots.default?.(slotProps.value) }\n            </div>\n          ) }\n\n          { hasAppend && (\n            <div\n              class=\"v-input__append\"\n            >\n              { slots?.append?.(slotProps.value) }\n\n              { props.appendIcon && (\n                <VIcon\n                  onClick={ (e: MouseEvent) => emit('click:append', e) }\n                  icon={ props.appendIcon }\n                />\n              ) }\n            </div>\n          ) }\n\n          { hasDetails && (\n            <div class=\"v-input__details\">\n              <VMessages\n                active={ hasMessages }\n                messages={ errorMessages.value.length > 0\n                  ? errorMessages.value\n                  : props.messages\n                }\n                v-slots={{ message: slots.message }}\n              />\n\n              { slots.details?.(slotProps.value) }\n            </div>\n          ) }\n        </div>\n      )\n    })\n\n    return {\n      reset,\n      resetValidation,\n      validate,\n    }\n  },\n})\n\nexport type VInput = InstanceType<typeof VInput>\n\nexport function filterInputProps (props: ExtractPropTypes<ReturnType<typeof makeVInputProps>>) {\n  return pick(props, Object.keys(VInput.props) as any)\n}\n"],"file":"VInput.mjs"}
+{"version":3,"sources":["../../../src/components/VInput/VInput.tsx"],"names":["VIcon","VMessages","makeDensityProps","useDensity","makeValidationProps","useValidation","computed","genericComponent","getUid","pick","propsFactory","useRender","makeVInputProps","id","String","appendIcon","prependIcon","hideDetails","Boolean","messages","type","Array","default","direction","validator","v","includes","VInput","name","props","emits","val","setup","attrs","slots","emit","densityClasses","errorMessages","isDirty","isDisabled","isReadonly","isPristine","isValid","isValidating","reset","resetValidation","validate","validationClasses","uid","slotProps","hasPrepend","prepend","hasAppend","append","hasMessages","length","value","hasDetails","message","details","filterInputProps","Object","keys"],"mappings":"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","sourcesContent":["// Styles\nimport './VInput.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\nimport { VMessages } from '@/components/VMessages'\n\n// Composables\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeValidationProps, useValidation } from '@/composables/validation'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, getUid, pick, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { ComputedRef, ExtractPropTypes, PropType, Ref } from 'vue'\nimport type { MakeSlots } from '@/util'\n\nexport interface VInputSlot {\n  id: ComputedRef<string>\n  isDirty: ComputedRef<boolean>\n  isDisabled: ComputedRef<boolean>\n  isReadonly: ComputedRef<boolean>\n  isPristine: Ref<boolean>\n  isValid: ComputedRef<boolean | null>\n  isValidating: Ref<boolean>\n  reset: () => void\n  resetValidation: () => void\n  validate: () => void\n}\n\nexport const makeVInputProps = propsFactory({\n  id: String,\n  appendIcon: String,\n  prependIcon: String,\n  hideDetails: [Boolean, String] as PropType<boolean | 'auto'>,\n  messages: {\n    type: [Array, String] as PropType<string | string[]>,\n    default: () => ([]),\n  },\n  direction: {\n    type: String as PropType<'horizontal' | 'vertical'>,\n    default: 'horizontal',\n    validator: (v: any) => ['horizontal', 'vertical'].includes(v),\n  },\n\n  ...makeDensityProps(),\n  ...makeValidationProps(),\n})\n\nexport type VInputSlots = MakeSlots<{\n  default: [VInputSlot]\n  prepend: [VInputSlot]\n  append: [VInputSlot]\n  details: [VInputSlot]\n}>\n\nexport const VInput = genericComponent<new <T>() => {\n  $slots: VInputSlots\n}>()({\n  name: 'VInput',\n\n  props: {\n    ...makeVInputProps(),\n  },\n\n  emits: {\n    'update:modelValue': (val: any) => true,\n  },\n\n  setup (props, { attrs, slots, emit }) {\n    const { densityClasses } = useDensity(props)\n    const {\n      errorMessages,\n      isDirty,\n      isDisabled,\n      isReadonly,\n      isPristine,\n      isValid,\n      isValidating,\n      reset,\n      resetValidation,\n      validate,\n      validationClasses,\n    } = useValidation(props)\n\n    const uid = getUid()\n    const id = computed(() => props.id || `input-${uid}`)\n\n    const slotProps = computed<VInputSlot>(() => ({\n      id,\n      isDirty,\n      isDisabled,\n      isReadonly,\n      isPristine,\n      isValid,\n      isValidating,\n      reset,\n      resetValidation,\n      validate,\n    }))\n\n    useRender(() => {\n      const hasPrepend = !!(slots.prepend || props.prependIcon)\n      const hasAppend = !!(slots.append || props.appendIcon)\n      const hasMessages = !!(\n        props.messages?.length ||\n        errorMessages.value.length\n      )\n      const hasDetails = !props.hideDetails || (\n        props.hideDetails === 'auto' &&\n        hasMessages\n      )\n\n      return (\n        <div class={[\n          'v-input',\n          `v-input--${props.direction}`,\n          densityClasses.value,\n          validationClasses.value,\n        ]}\n        >\n          { hasPrepend && (\n            <div\n              class=\"v-input__prepend\"\n            >\n              { slots?.prepend?.(slotProps.value) }\n\n              { props.prependIcon && (\n                <VIcon\n                  onClick={ attrs['onClick:prepend'] }\n                  icon={ props.prependIcon }\n                />\n              ) }\n            </div>\n          ) }\n\n          { slots.default && (\n            <div class=\"v-input__control\">\n              { slots.default?.(slotProps.value) }\n            </div>\n          ) }\n\n          { hasAppend && (\n            <div\n              class=\"v-input__append\"\n            >\n              { slots?.append?.(slotProps.value) }\n\n              { props.appendIcon && (\n                <VIcon\n                  onClick={ attrs['onClick:append'] }\n                  icon={ props.appendIcon }\n                />\n              ) }\n            </div>\n          ) }\n\n          { hasDetails && (\n            <div class=\"v-input__details\">\n              <VMessages\n                active={ hasMessages }\n                messages={ errorMessages.value.length > 0\n                  ? errorMessages.value\n                  : props.messages\n                }\n                v-slots={{ message: slots.message }}\n              />\n\n              { slots.details?.(slotProps.value) }\n            </div>\n          ) }\n        </div>\n      )\n    })\n\n    return {\n      reset,\n      resetValidation,\n      validate,\n    }\n  },\n})\n\nexport type VInput = InstanceType<typeof VInput>\n\nexport function filterInputProps (props: ExtractPropTypes<ReturnType<typeof makeVInputProps>>) {\n  return pick(props, Object.keys(VInput.props) as any)\n}\n"],"file":"VInput.mjs"}

package/lib/components/VInput/VInput.sass

@@ -5,6 +5,8 @@
 .v-input
   display: grid
   flex: 1 1 auto
+  font-size: $input-font-size
+  font-weight: $input-font-weight
 
   &--disabled
     pointer-events: none
@@ -27,7 +29,7 @@
 
 .v-input--horizontal
   grid-template-areas: "prepend control append" "a messages b"
-  grid-template-columns: max-content auto max-content
+  grid-template-columns: max-content minmax(0, 1fr) max-content
   grid-template-rows: auto auto
 
   .v-input__prepend

package/lib/components/VInput/_variables.scss

@@ -1,8 +1,12 @@
+@use 'sass:map';
 @use '../../styles/settings';
+@use '../../styles/tools';
 
 // CONTROL
 $input-density: ('default': 0, 'comfortable': -2, 'compact': -4) !default;
 $input-control-height: 56px !default;
+$input-font-size: tools.map-deep-get(settings.$typography, 'body-1', 'size') !default;
+$input-font-weight: tools.map-deep-get(settings.$typography, 'body-1', 'weight') !default;
 
 // DETAILS
 $input-details-font-size: .75rem !default;

package/lib/components/VList/VList.css

@@ -24,8 +24,9 @@
   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-list--rounded {
   border-radius: 4px;
@@ -54,7 +55,7 @@
   font-weight: 500;
   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 {
@@ -64,17 +65,17 @@
   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;
 }
 

package/lib/components/VList/VList.mjs

@@ -1,4 +1,4 @@
-import { createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
 // Styles
 import "./VList.css"; // Components
 
@@ -13,7 +13,9 @@ 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 { createList } from "./list.mjs";
+import { provideDefaults } from "../../composables/defaults.mjs"; // Utilities
 
 import { computed, toRef } from 'vue';
 import { genericComponent, useRender } from "../../util/index.mjs"; // Types
@@ -50,17 +52,19 @@ const parseItems = 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(),
@@ -68,7 +72,10 @@ export const VList = genericComponent()({
     ...makeElevationProps(),
     ...makeRoundedProps(),
     ...makeTagProps(),
-    ...makeThemeProps()
+    ...makeThemeProps(),
+    ...makeVariantProps({
+      variant: 'text'
+    })
   },
   emits: {
     'update:selected': val => true,
@@ -88,7 +95,7 @@ export const VList = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'color'));
+    } = useBackgroundColor(toRef(props, 'bgColor'));
     const {
       borderClasses
     } = useBorder(props);
@@ -108,25 +115,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();
+    provideDefaults({
+      VListGroup: {
+        activeColor,
+        color
+      },
+      VListItem: {
+        activeClass: toRef(props, 'activeClass'),
+        activeColor,
+        color,
+        density: toRef(props, 'density'),
+        disabled: toRef(props, 'disabled'),
+        lines: toRef(props, 'lines'),
+        nav: toRef(props, 'nav'),
+        variant: toRef(props, 'variant')
+      }
+    });
     useRender(() => {
       return _createVNode(props.tag, {
         "class": ['v-list', {
           'v-list--disabled': props.disabled,
-          'v-list--nav': props.nav,
-          [`v-list--${props.lines}-line`]: true
-        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value],
+          '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
-        }, {
-          default: slots.default,
-          item: slots.item,
-          title: slots.title,
-          subtitle: slots.subtitle,
-          header: slots.header
-        })]
+        }, slots)]
       });
     });
     return {

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,"sources":["../../../src/components/VList/VList.tsx"],"names":["VListChildren","makeBorderProps","useBorder","makeDensityProps","useDensity","makeDimensionProps","useDimension","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeTagProps","useBackgroundColor","makeThemeProps","provideTheme","makeNestedProps","useNested","makeVariantProps","createList","provideDefaults","computed","toRef","genericComponent","useRender","parseItems","items","undefined","map","item","type","value","title","$type","$children","props","children","VList","name","activeColor","String","activeClass","bgColor","disabled","Boolean","lines","default","nav","Array","selectStrategy","openStrategy","variant","emits","val","setup","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","borderClasses","densityClasses","dimensionStyles","elevationClasses","roundedClasses","open","select","lineClasses","color","VListGroup","VListItem","density"],"mappings":"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","sourcesContent":["// Styles\nimport './VList.sass'\n\n// Components\nimport { VListChildren } from './VListChildren'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { makeNestedProps, useNested } from '@/composables/nested/nested'\nimport { makeVariantProps } from '@/composables/variant'\nimport { createList } from './list'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { genericComponent, useRender } from '@/util'\n\n// Types\nimport type { Prop, PropType } from 'vue'\nimport type { MakeSlots } from '@/util'\nimport type { ListGroupActivatorSlot } from './VListGroup'\n\nexport type ListItem = {\n  [key: string]: any\n  $type?: 'item' | 'subheader' | 'divider'\n  $children?: (string | ListItem)[]\n}\n\nexport type InternalListItem = {\n  type?: 'item' | 'subheader' | 'divider'\n  props?: Record<string, any>\n  children?: InternalListItem[]\n}\n\nconst parseItems = (items?: (string | ListItem)[]): InternalListItem[] | undefined => {\n  if (!items) return undefined\n\n  return items.map(item => {\n    if (typeof item === 'string') return { type: 'item', value: item, title: item }\n\n    const { $type, $children, ...props } = item\n\n    if ($type === 'subheader') return { type: 'subheader', props }\n    if ($type === 'divider') return { type: 'divider', props }\n\n    return { type: 'item', props, children: parseItems($children) }\n  })\n}\n\nexport const VList = genericComponent<new <T>() => {\n  $props: {\n    items?: T[]\n  }\n  $slots: MakeSlots<{\n    subheader: []\n    header: [ListGroupActivatorSlot]\n    item: [T]\n  }>\n}>()({\n  name: 'VList',\n\n  props: {\n    activeColor: String,\n    activeClass: String,\n    bgColor: String,\n    disabled: Boolean,\n    lines: {\n      type: [Boolean, String] as PropType<'one' | 'two' | 'three' | false>,\n      default: 'one',\n    },\n    nav: Boolean,\n    items: Array as Prop<ListItem[]>,\n\n    ...makeNestedProps({\n      selectStrategy: 'single-leaf' as const,\n      openStrategy: 'list' as const,\n    }),\n    ...makeBorderProps(),\n    ...makeDensityProps(),\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n    ...makeVariantProps({ variant: 'text' } as const),\n  },\n\n  emits: {\n    'update:selected': (val: string[]) => true,\n    'update:opened': (val: string[]) => true,\n    'click:open': (value: { id: string, value: boolean, path: string[] }) => true,\n    'click:select': (value: { id: string, value: boolean, path: string[] }) => true,\n  },\n\n  setup (props, { slots }) {\n    const items = computed(() => parseItems(props.items))\n    const { themeClasses } = provideTheme(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor'))\n    const { borderClasses } = useBorder(props)\n    const { densityClasses } = useDensity(props)\n    const { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n    const { open, select } = useNested(props)\n    const lineClasses = computed(() => props.lines ? `v-list--${props.lines}-line` : undefined)\n    const activeColor = toRef(props, 'activeColor')\n    const color = toRef(props, 'color')\n\n    createList()\n\n    provideDefaults({\n      VListGroup: {\n        activeColor,\n        color,\n      },\n      VListItem: {\n        activeClass: toRef(props, 'activeClass'),\n        activeColor,\n        color,\n        density: toRef(props, 'density'),\n        disabled: toRef(props, 'disabled'),\n        lines: toRef(props, 'lines'),\n        nav: toRef(props, 'nav'),\n        variant: toRef(props, 'variant'),\n      },\n    })\n\n    useRender(() => {\n      return (\n        <props.tag\n          class={[\n            'v-list',\n            {\n              'v-list--disabled': props.disabled,\n              'v-list--nav': props.nav,\n            },\n            themeClasses.value,\n            backgroundColorClasses.value,\n            borderClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            lineClasses.value,\n            roundedClasses.value,\n          ]}\n          style={[\n            backgroundColorStyles.value,\n            dimensionStyles.value,\n          ]}\n        >\n          <VListChildren items={ items.value } v-slots={ slots }></VListChildren>\n        </props.tag>\n      )\n    })\n\n    return {\n      open,\n      select,\n    }\n  },\n})\n\nexport type VList = InstanceType<typeof VList>\n"],"file":"VList.mjs"}

package/lib/components/VList/VList.sass

@@ -18,8 +18,9 @@
     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
 
   &--rounded
     @include tools.rounded($list-rounded-border-radius)

package/lib/components/VList/VListChildren.mjs

@@ -39,7 +39,7 @@ export const VListChildren = genericComponent()({
             } = _ref3;
             return slots.header ? slots.header({ ...itemProps,
               ...activatorProps
-            }) : _createVNode(VListItem, _mergeProps(itemProps, activatorProps), null);
+            }) : _createVNode(VListItem, _mergeProps(itemProps, activatorProps), slots);
           },
           default: () => _createVNode(VListChildren, {
             "items": children

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,"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,GAEsBR,KAFtB,CAA/B;AAAA,WALF;AAQTC,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 } v-slots={ slots } />,\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"}

package/lib/components/VList/VListGroup.mjs

@@ -1,13 +1,14 @@
 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 { 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 } from "../../util/index.mjs"; // Types
 
 const VListGroupActivator = defineComponent({
   name: 'VListGroupActivator',
@@ -28,6 +29,8 @@ const VListGroupActivator = defineComponent({
 export const VListGroup = genericComponent()({
   name: 'VListGroup',
   props: {
+    activeColor: String,
+    color: String,
     collapseIcon: {
       type: String,
       default: '$collapse'
@@ -54,11 +57,17 @@ export const VListGroup = genericComponent()({
       open(!isOpen.value, e);
     };
 
-    const activatorProps = computed(() => ({
-      onClick,
-      appendIcon: isOpen.value ? props.collapseIcon : props.expandIcon,
-      class: 'v-list-group__header'
-    }));
+    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 () => {
       var _slots$default2;
 
@@ -67,9 +76,18 @@ export const VListGroup = genericComponent()({
           'v-list-group--prepend': list == null ? void 0 : list.hasPrepend.value
         }]
       }, {
-        default: () => [slots.activator && _createVNode(VListGroupActivator, null, {
-          default: () => [slots.activator({
-            props: activatorProps.value
+        default: () => [slots.activator && _createVNode(VDefaultsProvider, {
+          "defaults": {
+            VListItemIcon: {
+              color: activatorProps.value.color
+            }
+          }
+        }, {
+          default: () => [_createVNode(VListGroupActivator, null, {
+            default: () => [slots.activator({
+              props: activatorProps.value,
+              isOpen
+            })]
           })]
         }), _createVNode(VExpandTransition, null, {
           default: () => [_withDirectives(_createVNode("div", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VList/VListGroup.tsx"],"names":["VExpandTransition","useList","makeTagProps","useNestedGroupActivator","useNestedItem","computed","defineComponent","toRef","genericComponent","VListGroupActivator","name","setup","_","slots","default","VListGroup","props","collapseIcon","type","String","expandIcon","value","isOpen","open","list","onClick","e","activatorProps","appendIcon","class","hasPrepend","activator"],"mappings":";AAAA;SACSA,iB,oCAET;;SACSC,O;SACAC,Y;SACAC,uB,EAAyBC,a,+CAElC;;AACA,SAASC,QAAT,EAAmBC,eAAnB,EAAoCC,KAApC,QAAiD,KAAjD;SACSC,gB,gCAET;;AAaA,MAAMC,mBAAmB,GAAGH,eAAe,CAAC;AAC1CI,EAAAA,IAAI,EAAE,qBADoC;;AAG1CC,EAAAA,KAAK,CAAEC,CAAF,QAAgB;AAAA,QAAX;AAAEC,MAAAA;AAAF,KAAW;AACnBV,IAAAA,uBAAuB;AAEvB,WAAO;AAAA;;AAAA,+BAAMU,KAAK,CAACC,OAAZ,qBAAM,oBAAAD,KAAK,CAAX;AAAA,KAAP;AACD;;AAPyC,CAAD,CAA3C;AAUA,OAAO,MAAME,UAAU,GAAGP,gBAAgB,GAQrC;AACHE,EAAAA,IAAI,EAAE,YADH;AAGHM,EAAAA,KAAK,EAAE;AACLC,IAAAA,YAAY,EAAE;AACZC,MAAAA,IAAI,EAAEC,MADM;AAEZL,MAAAA,OAAO,EAAE;AAFG,KADT;AAKLM,IAAAA,UAAU,EAAE;AACVF,MAAAA,IAAI,EAAEC,MADI;AAEVL,MAAAA,OAAO,EAAE;AAFC,KALP;AASLO,IAAAA,KAAK,EAAE,IATF;AAWL,OAAGnB,YAAY;AAXV,GAHJ;;AAiBHS,EAAAA,KAAK,CAAEK,KAAF,SAAoB;AAAA,QAAX;AAAEH,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAES,MAAAA,MAAF;AAAUC,MAAAA;AAAV,QAAmBnB,aAAa,CAACG,KAAK,CAACS,KAAD,EAAQ,OAAR,CAAN,EAAwB,IAAxB,CAAtC;AACA,UAAMQ,IAAI,GAAGvB,OAAO,EAApB;;AAEA,UAAMwB,OAAO,GAAIC,CAAD,IAAc;AAC5BH,MAAAA,IAAI,CAAC,CAACD,MAAM,CAACD,KAAT,EAAgBK,CAAhB,CAAJ;AACD,KAFD;;AAIA,UAAMC,cAAoD,GAAGtB,QAAQ,CAAC,OAAO;AAC3EoB,MAAAA,OAD2E;AAE3EG,MAAAA,UAAU,EAAEN,MAAM,CAACD,KAAP,GAAeL,KAAK,CAACC,YAArB,GAAoCD,KAAK,CAACI,UAFqB;AAG3ES,MAAAA,KAAK,EAAE;AAHoE,KAAP,CAAD,CAArE;AAMA,WAAO,MAAM;AAAA;;AACX;AAAA,iBAEW,CACL,cADK,EAEL;AACE,mCAAyBL,IAAzB,oBAAyBA,IAAI,CAAEM,UAAN,CAAiBT;AAD5C,SAFK;AAFX;AAAA,wBASMR,KAAK,CAACkB,SAAN;AAAA,0BAEIlB,KAAK,CAACkB,SAAN,CAAgB;AAAEf,YAAAA,KAAK,EAAEW,cAAc,CAACN;AAAxB,WAAhB,CAFJ;AAAA,UATN;AAAA;AAAA,qBAeiB;AAfjB,iCAgBUR,KAAK,CAACC,OAhBhB,qBAgBU,qBAAAD,KAAK,CAhBf,cAe+CS,MAAM,CAACD,KAftD;AAAA;AAAA;AAqBD,KAtBD;AAuBD;;AAtDE,CARqC,CAAnC","sourcesContent":["// Components\nimport { VExpandTransition } from '@/components/transitions'\n\n// Composables\nimport { useList } from './list'\nimport { makeTagProps } from '@/composables/tag'\nimport { useNestedGroupActivator, useNestedItem } from '@/composables/nested/nested'\n\n// Utilities\nimport { computed, defineComponent, toRef } from 'vue'\nimport { 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: string\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 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    collapseIcon: {\n      type: String,\n      default: '$collapse',\n    },\n    expandIcon: {\n      type: String,\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      appendIcon: isOpen.value ? props.collapseIcon : props.expandIcon,\n      class: 'v-list-group__header',\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            <VListGroupActivator>\n              { slots.activator({ props: activatorProps.value }) }\n            </VListGroupActivator>\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"],"file":"VListGroup.mjs"}
+{"version":3,"sources":["../../../src/components/VList/VListGroup.tsx"],"names":["VDefaultsProvider","VExpandTransition","useList","makeTagProps","useNestedGroupActivator","useNestedItem","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"],"mappings":";AAAA;SACSA,iB;SACAC,iB,oCAET;;SACSC,O;SACAC,Y;SACAC,uB,EAAyBC,a,+CAElC;;AACA,SAASC,QAAT,EAAmBC,KAAnB,QAAgC,KAAhC;SACSC,e,EAAiBC,gB,gCAE1B;;AAcA,MAAMC,mBAAmB,GAAGF,eAAe,CAAC;AAC1CG,EAAAA,IAAI,EAAE,qBADoC;;AAG1CC,EAAAA,KAAK,CAAEC,CAAF,QAAgB;AAAA,QAAX;AAAEC,MAAAA;AAAF,KAAW;AACnBV,IAAAA,uBAAuB;AAEvB,WAAO;AAAA;;AAAA,+BAAMU,KAAK,CAACC,OAAZ,qBAAM,oBAAAD,KAAK,CAAX;AAAA,KAAP;AACD;;AAPyC,CAAD,CAA3C;AAUA,OAAO,MAAME,UAAU,GAAGP,gBAAgB,GAQrC;AACHE,EAAAA,IAAI,EAAE,YADH;AAGHM,EAAAA,KAAK,EAAE;AACLC,IAAAA,WAAW,EAAEC,MADR;AAELC,IAAAA,KAAK,EAAED,MAFF;AAGLE,IAAAA,YAAY,EAAE;AACZC,MAAAA,IAAI,EAAEH,MADM;AAEZJ,MAAAA,OAAO,EAAE;AAFG,KAHT;AAOLQ,IAAAA,UAAU,EAAE;AACVD,MAAAA,IAAI,EAAEH,MADI;AAEVJ,MAAAA,OAAO,EAAE;AAFC,KAPP;AAWLS,IAAAA,KAAK,EAAE,IAXF;AAaL,OAAGrB,YAAY;AAbV,GAHJ;;AAmBHS,EAAAA,KAAK,CAAEK,KAAF,SAAoB;AAAA,QAAX;AAAEH,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEW,MAAAA,MAAF;AAAUC,MAAAA;AAAV,QAAmBrB,aAAa,CAACE,KAAK,CAACU,KAAD,EAAQ,OAAR,CAAN,EAAwB,IAAxB,CAAtC;AACA,UAAMU,IAAI,GAAGzB,OAAO,EAApB;;AAEA,UAAM0B,OAAO,GAAIC,CAAD,IAAc;AAC5BH,MAAAA,IAAI,CAAC,CAACD,MAAM,CAACD,KAAT,EAAgBK,CAAhB,CAAJ;AACD,KAFD;;AAIA,UAAMC,cAAoD,GAAGxB,QAAQ,CAAC;AAAA;;AAAA,aAAO;AAC3EsB,QAAAA,OAD2E;AAE3EG,QAAAA,MAAM,EAAEN,MAAM,CAACD,KAF4D;AAG3EQ,QAAAA,UAAU,EAAEP,MAAM,CAACD,KAAP,GAAeP,KAAK,CAACI,YAArB,GAAoCJ,KAAK,CAACM,UAHqB;AAI3EU,QAAAA,KAAK,EAAE,sBAJoE;AAK3Eb,QAAAA,KAAK,EAAEK,MAAM,CAACD,KAAP,yBAAeP,KAAK,CAACC,WAArB,iCAAoCD,KAAK,CAACG,KAA1C,GAAkDc;AALkB,OAAP;AAAA,KAAD,CAArE;AAQA,WAAO,MAAM;AAAA;;AACX;AAAA,iBAEW,CACL,cADK,EAEL;AACE,mCAAyBP,IAAzB,oBAAyBA,IAAI,CAAEQ,UAAN,CAAiBX;AAD5C,SAFK;AAFX;AAAA,wBASMV,KAAK,CAACsB,SAAN;AAAA,sBAEY;AACRC,YAAAA,aAAa,EAAE;AAAEjB,cAAAA,KAAK,EAAEU,cAAc,CAACN,KAAf,CAAqBJ;AAA9B;AADP;AAFZ;AAAA;AAAA,4BAOMN,KAAK,CAACsB,SAAN,CAAgB;AAAEnB,cAAAA,KAAK,EAAEa,cAAc,CAACN,KAAxB;AAA+BC,cAAAA;AAA/B,aAAhB,CAPN;AAAA;AAAA,UATN;AAAA;AAAA,qBAqBiB;AArBjB,iCAsBUX,KAAK,CAACC,OAtBhB,qBAsBU,qBAAAD,KAAK,CAtBf,cAqB+CW,MAAM,CAACD,KArBtD;AAAA;AAAA;AA2BD,KA5BD;AA6BD;;AAhEE,CARqC,CAAnC","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'\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: string\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: String,\n      default: '$collapse',\n    },\n    expandIcon: {\n      type: String,\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"],"file":"VListGroup.mjs"}