@vuetify/nightly 3.0.0-alpha.8 → 3.0.0-beta.0

package/lib/components/VList/VListItem.css

@@ -0,0 +1,273 @@
+.v-list-item {
+  align-items: center;
+  display: flex;
+  padding: 8px 16px;
+  position: relative;
+  outline: none;
+  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;
+  border-radius: 0;
+}
+.v-list-item--border {
+  border-width: thin;
+  box-shadow: none;
+}
+.v-list-item:hover .v-list-item__overlay {
+  opacity: calc(0.04 * var(--v-theme-overlay-multiplier));
+}
+.v-list-item:focus-visible .v-list-item__overlay {
+  opacity: calc(0.12 * var(--v-theme-overlay-multiplier));
+}
+@supports not selector(:focus-visible) {
+  .v-list-item:focus .v-list-item__overlay {
+    opacity: calc(0.12 * var(--v-theme-overlay-multiplier));
+  }
+}
+.v-list-item--active:hover.v-list-item__overlay,
+.v-list-item--active .v-list-item__overlay {
+  opacity: calc(0.12 * var(--v-theme-overlay-multiplier));
+}
+.v-list-item--active: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 {
+  background: transparent;
+  color: inherit;
+}
+.v-list-item--variant-plain {
+  opacity: 0.62;
+}
+.v-list-item--variant-plain:focus, .v-list-item--variant-plain:hover {
+  opacity: 1;
+}
+.v-list-item--variant-plain .v-list-item__overlay {
+  display: none;
+}
+.v-list-item--variant-contained, .v-list-item--variant-contained-flat {
+  background: rgba(var(--v-theme-surface));
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
+.v-list-item--variant-contained-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 {
+  border: thin solid currentColor;
+}
+.v-list-item--variant-text .v-list-item__overlay {
+  background: currentColor;
+}
+.v-list-item--variant-contained-text .v-list-item__underlay {
+  background: currentColor;
+  opacity: var(--v-activated-opacity);
+  border-radius: inherit;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease-in-out;
+}
+.v-list-item--rounded {
+  border-radius: 4px;
+}
+.v-list-item--disabled {
+  pointer-events: none;
+  user-select: none;
+  opacity: 0.6;
+}
+.v-list-item--link {
+  cursor: pointer;
+}
+
+.v-list-item-avatar {
+  align-self: center;
+  transition: inherit;
+  transition-property: height, width;
+}
+.v-list-item-avatar > .v-icon {
+  opacity: var(--v-medium-emphasis-opacity);
+}
+.v-list-item-avatar--start {
+  margin-inline-end: 16px;
+}
+.v-list-item-avatar--end {
+  margin-inline-start: 16px;
+}
+.v-list--density-default.v-list--three-line .v-list-item-avatar {
+  margin-top: 4px;
+}
+
+.v-list--density-comfortable.v-list--three-line .v-list-item-avatar {
+  margin-top: 8px;
+}
+
+.v-list--density-compact.v-list--three-line .v-list-item-avatar {
+  margin-top: 12px;
+}
+
+.v-list--two-line .v-list-item-avatar {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+.v-list--three-line .v-list-item-avatar {
+  align-self: flex-start;
+}
+
+.v-list-item-media {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.v-list-item-media--start {
+  margin-inline-end: 16px;
+}
+.v-list-item-media--end {
+  margin-inline-start: 16px;
+}
+.v-list--two-line .v-list-item-media {
+  margin-top: -4px;
+  margin-bottom: -4px;
+}
+.v-list--three-line .v-list-item-media {
+  margin-top: 0;
+  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;
+  opacity: var(--v-medium-emphasis-opacity);
+  overflow: hidden;
+  padding: 0;
+  text-overflow: ellipsis;
+  font-size: 0.875rem;
+  font-weight: 400;
+  letter-spacing: 0.0178571429em;
+  line-height: 1rem;
+  text-transform: none;
+}
+.v-list--two-line .v-list-item-subtitle {
+  -webkit-line-clamp: 1;
+}
+.v-list--three-line .v-list-item-subtitle {
+  -webkit-line-clamp: 2;
+}
+.v-list--nav .v-list-item-subtitle {
+  font-size: 0.75rem;
+  font-weight: 400;
+  letter-spacing: 0.0178571429em;
+  line-height: 1rem;
+}
+
+.v-list-item-title {
+  hyphens: auto;
+  overflow-wrap: normal;
+  overflow: hidden;
+  padding: 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: normal;
+  word-wrap: break-word;
+  font-size: 1rem;
+  font-weight: 400;
+  letter-spacing: 0.009375em;
+  line-height: 1.5rem;
+  text-transform: none;
+}
+.v-list--nav .v-list-item-title {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1rem;
+}
+
+.v-list--density-default.v-list--one-line .v-list-item {
+  min-height: 48px;
+  padding: 8px 16px;
+}
+.v-list--density-default.v-list--two-line .v-list-item {
+  min-height: 64px;
+  padding: 12px 16px;
+}
+.v-list--density-default.v-list--three-line .v-list-item {
+  min-height: 88px;
+  padding: 16px 16px;
+}
+
+.v-list--density-comfortable.v-list--one-line .v-list-item {
+  min-height: 44px;
+  padding: 4px 16px;
+}
+.v-list--density-comfortable.v-list--two-line .v-list-item {
+  min-height: 60px;
+  padding: 8px 16px;
+}
+.v-list--density-comfortable.v-list--three-line .v-list-item {
+  min-height: 84px;
+  padding: 12px 16px;
+}
+
+.v-list--density-compact.v-list--one-line .v-list-item {
+  min-height: 40px;
+  padding: 0px 16px;
+}
+.v-list--density-compact.v-list--two-line .v-list-item {
+  min-height: 56px;
+  padding: 4px 16px;
+}
+.v-list--density-compact.v-list--three-line .v-list-item {
+  min-height: 80px;
+  padding: 8px 16px;
+}
+
+.v-list-item__overlay {
+  background-color: currentColor;
+  border-radius: inherit;
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+.v-list-item--active.v-list-item--contained .v-list-item__overlay {
+  --v-theme-overlay-multiplier: 0;
+}
+
+.v-list {
+  --indent-padding: 0px;
+}
+
+.v-list-group {
+  --parent-padding: var(--indent-padding);
+}
+.v-list-group--prepend {
+  --parent-padding: calc(var(--indent-padding) + 40px);
+}
+
+.v-list-group__items {
+  --indent-padding: calc(var(--parent-padding) + 16px);
+}
+
+.v-list-group__items .v-list-item {
+  padding-inline-start: calc(16px + var(--indent-padding)) !important;
+}
+
+.v-list-item--prepend,
+.v-list-group__items .v-list-item--prepend {
+  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;
+}

package/lib/components/VList/VListItem.mjs

@@ -1,13 +1,14 @@
 import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
 // Styles
-import "./VListItem.sass"; // Components
+import "./VListItem.css"; // Components
 
-import VListItemAvatar from "./VListItemAvatar.mjs";
-import VListItemHeader from "./VListItemHeader.mjs";
-import VListItemSubtitle from "./VListItemSubtitle.mjs";
-import VListItemTitle from "./VListItemTitle.mjs";
-import { VAvatar } from "../VAvatar/index.mjs"; // Composables
+import { VAvatar } from "../VAvatar/index.mjs";
+import { VListItemAvatar } from "./VListItemAvatar.mjs";
+import { VListItemHeader } from "./VListItemHeader.mjs";
+import { VListItemSubtitle } from "./VListItemSubtitle.mjs";
+import { VListItemTitle } from "./VListItemTitle.mjs"; // Composables
 
+import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant.mjs";
 import { makeBorderProps, useBorder } from "../../composables/border.mjs";
 import { makeDensityProps, useDensity } from "../../composables/density.mjs";
 import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
@@ -15,19 +16,21 @@ import { makeElevationProps, useElevation } from "../../composables/elevation.mj
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeRouterProps, useLink } from "../../composables/router.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
-import { makeThemeProps, useTheme } from "../../composables/theme.mjs";
-import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant.mjs"; // Directives
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
+import { useList } from "./list.mjs"; // Directives
 
 import { Ripple } from "../../directives/ripple/index.mjs"; // Utilities
 
-import { computed, defineComponent } from 'vue';
-import { makeProps } from "../../util/index.mjs";
-export default defineComponent({
+import { computed, onMounted, watch } from 'vue';
+import { genericComponent, useRender } from "../../util/index.mjs";
+import { useNestedItem } from "../../composables/nested/nested.mjs"; // Types
+
+export const VListItem = genericComponent()({
   name: 'VListItem',
   directives: {
     Ripple
   },
-  props: makeProps({
+  props: {
     active: Boolean,
     activeColor: String,
     activeClass: String,
@@ -39,6 +42,7 @@ export default defineComponent({
     prependIcon: String,
     subtitle: String,
     title: String,
+    value: null,
     ...makeBorderProps(),
     ...makeDensityProps(),
     ...makeDimensionProps(),
@@ -50,32 +54,71 @@ export default defineComponent({
     ...makeVariantProps({
       variant: 'text'
     })
-  }),
+  },
 
-  setup(props, {
-    attrs,
-    slots
-  }) {
+  setup(props, _ref) {
+    let {
+      attrs,
+      slots
+    } = _ref;
     const link = useLink(props, attrs);
+    const id = computed(() => {
+      var _props$value;
+
+      return (_props$value = props.value) != null ? _props$value : link.href.value;
+    });
+    const {
+      select,
+      isSelected,
+      root,
+      parent
+    } = useNestedItem(id, false);
+    const list = useList();
     const isActive = computed(() => {
       var _link$isExactActive;
 
-      return props.active || ((_link$isExactActive = link.isExactActive) == null ? void 0 : _link$isExactActive.value);
+      return props.active || ((_link$isExactActive = link.isExactActive) == null ? void 0 : _link$isExactActive.value) || isSelected.value;
+    });
+    const variantProps = computed(() => {
+      var _props$activeColor;
+
+      const activeColor = (_props$activeColor = props.activeColor) != null ? _props$activeColor : props.color;
+      return {
+        color: isActive.value ? activeColor : props.color,
+        textColor: props.textColor,
+        variant: props.variant
+      };
+    });
+    onMounted(() => {
+      var _link$isExactActive2;
+
+      if ((_link$isExactActive2 = link.isExactActive) != null && _link$isExactActive2.value && parent.value != null) {
+        root.open(parent.value, true);
+      }
+    });
+    watch(() => {
+      var _link$isExactActive3;
+
+      return (_link$isExactActive3 = link.isExactActive) == null ? void 0 : _link$isExactActive3.value;
+    }, val => {
+      if (val && parent.value != null) {
+        root.open(parent.value, true);
+      }
     });
     const {
       themeClasses
-    } = useTheme(props);
+    } = provideTheme(props);
     const {
       borderClasses
-    } = useBorder(props, 'v-list-item');
+    } = useBorder(props);
     const {
       colorClasses,
       colorStyles,
       variantClasses
-    } = useVariant(props, 'v-list-item');
+    } = useVariant(variantProps);
     const {
       densityClasses
-    } = useDensity(props, 'v-list-item');
+    } = useDensity(props);
     const {
       dimensionStyles
     } = useDimension(props);
@@ -84,56 +127,70 @@ export default defineComponent({
     } = useElevation(props);
     const {
       roundedClasses
-    } = useRounded(props, 'v-list-item');
-    return () => {
+    } = useRounded(props);
+    const slotProps = computed(() => ({
+      isActive: isActive.value,
+      select,
+      isSelected: isSelected.value
+    }));
+    useRender(() => {
       var _slots$default;
 
       const Tag = link.isLink.value ? 'a' : props.tag;
       const hasTitle = slots.title || props.title;
       const hasSubtitle = slots.subtitle || props.subtitle;
       const hasHeader = !!(hasTitle || hasSubtitle);
-      const hasAppend = slots.append || props.appendAvatar || props.appendIcon;
-      const hasPrepend = slots.prepend || props.prependAvatar || props.prependIcon;
-      const isClickable = !props.disabled && (link.isClickable.value || props.link);
+      const hasAppend = !!(slots.append || props.appendAvatar || props.appendIcon);
+      const hasPrepend = !!(slots.prepend || props.prependAvatar || props.prependIcon);
+      const isClickable = !props.disabled && (link.isClickable.value || props.link || props.value != null);
+      list == null ? void 0 : list.updateHasPrepend(hasPrepend);
       return _withDirectives(_createVNode(Tag, {
         "class": ['v-list-item', {
           'v-list-item--active': isActive.value,
           'v-list-item--disabled': props.disabled,
           'v-list-item--link': isClickable,
+          'v-list-item--prepend': !hasPrepend && (list == null ? void 0 : list.hasPrepend.value),
           [`${props.activeClass}`]: isActive.value && props.activeClass
         }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, variantClasses.value],
         "style": [colorStyles.value, dimensionStyles.value],
         "href": link.href.value,
         "tabindex": isClickable ? 0 : undefined,
-        "onClick": isClickable && link.navigate
+        "onClick": isClickable && (e => {
+          var _link$navigate;
+
+          (_link$navigate = link.navigate) == null ? void 0 : _link$navigate.call(link, e);
+          select(!isSelected.value, e);
+        })
       }, {
-        default: () => [genOverlays(!!(isClickable || isActive.value), 'v-list-item'), hasPrepend && (slots.prepend ? slots.prepend() : _createVNode(VListItemAvatar, {
+        default: () => [genOverlays(isClickable || isActive.value, 'v-list-item'), hasPrepend && (slots.prepend ? slots.prepend(slotProps.value) : _createVNode(VListItemAvatar, {
           "left": true
         }, {
           default: () => [_createVNode(VAvatar, {
             "density": props.density,
             "icon": props.prependIcon,
             "image": props.prependAvatar
-          }, null, 8, ["density", "icon", "image"])]
-        }, 8, ["left"])), hasHeader && _createVNode(VListItemHeader, null, {
+          }, null)]
+        })), hasHeader && _createVNode(VListItemHeader, null, {
           default: () => [hasTitle && _createVNode(VListItemTitle, null, {
-            default: () => [slots.title ? slots.title() : props.title]
+            default: () => [slots.title ? slots.title({
+              title: props.title
+            }) : props.title]
           }), hasSubtitle && _createVNode(VListItemSubtitle, null, {
-            default: () => [slots.subtitle ? slots.subtitle() : props.subtitle]
-          })],
-          _: 1
-        }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots), hasAppend && (slots.append ? slots.append() : _createVNode(VListItemAvatar, {
+            default: () => [slots.subtitle ? slots.subtitle({
+              subtitle: props.subtitle
+            }) : props.subtitle]
+          })]
+        }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, slotProps.value), hasAppend && (slots.append ? slots.append(slotProps.value) : _createVNode(VListItemAvatar, {
           "right": true
         }, {
           default: () => [_createVNode(VAvatar, {
             "density": props.density,
             "icon": props.appendIcon,
             "image": props.appendAvatar
-          }, null, 8, ["density", "icon", "image"])]
-        }, 8, ["right"]))],
-        _: 1
-      }, 8, ["class", "style", "href", "tabindex", "onClick"]), [[_resolveDirective("ripple"), isClickable]]);
-    };
+          }, null)]
+        }))]
+      }), [[_resolveDirective("ripple"), isClickable]]);
+    });
   }
 
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VList/VListItem.tsx"],"names":["VListItemAvatar","VListItemHeader","VListItemSubtitle","VListItemTitle","VAvatar","makeBorderProps","useBorder","makeDensityProps","useDensity","makeDimensionProps","useDimension","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeRouterProps","useLink","makeTagProps","makeThemeProps","useTheme","genOverlays","makeVariantProps","useVariant","Ripple","computed","defineComponent","makeProps","name","directives","props","active","Boolean","activeColor","String","activeClass","appendAvatar","appendIcon","disabled","link","prependAvatar","prependIcon","subtitle","title","variant","setup","attrs","slots","isActive","isExactActive","value","themeClasses","borderClasses","colorClasses","colorStyles","variantClasses","densityClasses","dimensionStyles","elevationClasses","roundedClasses","Tag","isLink","tag","hasTitle","hasSubtitle","hasHeader","hasAppend","append","hasPrepend","prepend","isClickable","href","undefined","navigate","density","default"],"mappings":"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","sourcesContent":["// Styles\nimport './VListItem.sass'\n\n// Components\nimport VListItemAvatar from './VListItemAvatar'\nimport VListItemHeader from './VListItemHeader'\nimport VListItemSubtitle from './VListItemSubtitle'\nimport VListItemTitle from './VListItemTitle'\nimport { VAvatar } from '@/components/VAvatar'\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 { makeRouterProps, useLink } from '@/composables/router'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, useTheme } from '@/composables/theme'\nimport { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Utilities\nimport { computed, defineComponent } from 'vue'\nimport { makeProps } from '@/util'\n\nexport default defineComponent({\n  name: 'VListItem',\n\n  directives: { Ripple },\n\n  props: makeProps({\n    active: Boolean,\n    activeColor: String,\n    activeClass: String,\n    appendAvatar: String,\n    appendIcon: String,\n    disabled: Boolean,\n    link: Boolean,\n    prependAvatar: String,\n    prependIcon: String,\n    subtitle: String,\n    title: String,\n\n    ...makeBorderProps(),\n    ...makeDensityProps(),\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    ...makeRoundedProps(),\n    ...makeRouterProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n    ...makeVariantProps({ variant: 'text' } as const),\n  }),\n\n  setup (props, { attrs, slots }) {\n    const link = useLink(props, attrs)\n    const isActive = computed(() => {\n      return props.active || link.isExactActive?.value\n    })\n    const { themeClasses } = useTheme(props)\n    const { borderClasses } = useBorder(props, 'v-list-item')\n    const { colorClasses, colorStyles, variantClasses } = useVariant(props, 'v-list-item')\n    const { densityClasses } = useDensity(props, 'v-list-item')\n    const { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props, 'v-list-item')\n\n    return () => {\n      const Tag = (link.isLink.value) ? 'a' : props.tag\n      const hasTitle = (slots.title || props.title)\n      const hasSubtitle = (slots.subtitle || props.subtitle)\n      const hasHeader = !!(hasTitle || hasSubtitle)\n      const hasAppend = (slots.append || props.appendAvatar || props.appendIcon)\n      const hasPrepend = (slots.prepend || props.prependAvatar || props.prependIcon)\n      const isClickable = !props.disabled && (link.isClickable.value || props.link)\n\n      return (\n        <Tag\n          class={[\n            'v-list-item',\n            {\n              'v-list-item--active': isActive.value,\n              'v-list-item--disabled': props.disabled,\n              'v-list-item--link': isClickable,\n              [`${props.activeClass}`]: isActive.value && props.activeClass,\n            },\n            themeClasses.value,\n            borderClasses.value,\n            colorClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            roundedClasses.value,\n            variantClasses.value,\n          ]}\n          style={[\n            colorStyles.value,\n            dimensionStyles.value,\n          ]}\n          href={ link.href.value }\n          tabindex={ isClickable ? 0 : undefined }\n          onClick={ isClickable && link.navigate }\n          v-ripple={ isClickable }\n        >\n          { genOverlays(!!(isClickable || isActive.value), 'v-list-item') }\n\n          { hasPrepend && (\n            slots.prepend\n              ? slots.prepend()\n              : (\n                <VListItemAvatar left>\n                  <VAvatar\n                    density={ props.density }\n                    icon={ props.prependIcon }\n                    image={ props.prependAvatar }\n                  />\n                </VListItemAvatar>\n              )\n          ) }\n\n          { hasHeader && (\n            <VListItemHeader>\n              { hasTitle && (\n                <VListItemTitle>\n                  { slots.title\n                    ? slots.title()\n                    : props.title\n                  }\n                </VListItemTitle>\n              ) }\n\n              { hasSubtitle && (\n                <VListItemSubtitle>\n                  { slots.subtitle\n                    ? slots.subtitle()\n                    : props.subtitle\n                  }\n                </VListItemSubtitle>\n              ) }\n            </VListItemHeader>\n          ) }\n\n          { slots.default?.() }\n\n          { hasAppend && (\n            slots.append\n              ? slots.append()\n              : (\n                <VListItemAvatar right>\n                  <VAvatar\n                    density={ props.density }\n                    icon={ props.appendIcon }\n                    image={ props.appendAvatar }\n                  />\n                </VListItemAvatar>\n              )\n          ) }\n        </Tag>\n      )\n    }\n  },\n})\n"],"file":"VListItem.mjs"}
+{"version":3,"sources":["../../../src/components/VList/VListItem.tsx"],"names":["VAvatar","VListItemAvatar","VListItemHeader","VListItemSubtitle","VListItemTitle","genOverlays","makeVariantProps","useVariant","makeBorderProps","useBorder","makeDensityProps","useDensity","makeDimensionProps","useDimension","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeRouterProps","useLink","makeTagProps","makeThemeProps","provideTheme","useList","Ripple","computed","onMounted","watch","genericComponent","useRender","useNestedItem","VListItem","name","directives","props","active","Boolean","activeColor","String","activeClass","appendAvatar","appendIcon","disabled","link","prependAvatar","prependIcon","subtitle","title","value","variant","setup","attrs","slots","id","href","select","isSelected","root","parent","list","isActive","isExactActive","variantProps","color","textColor","open","val","themeClasses","borderClasses","colorClasses","colorStyles","variantClasses","densityClasses","dimensionStyles","elevationClasses","roundedClasses","slotProps","Tag","isLink","tag","hasTitle","hasSubtitle","hasHeader","hasAppend","append","hasPrepend","prepend","isClickable","updateHasPrepend","undefined","e","navigate","density","default"],"mappings":"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","sourcesContent":["// Styles\nimport './VListItem.sass'\n\n// Components\nimport { VAvatar } from '@/components/VAvatar'\nimport { VListItemAvatar } from './VListItemAvatar'\nimport { VListItemHeader } from './VListItemHeader'\nimport { VListItemSubtitle } from './VListItemSubtitle'\nimport { VListItemTitle } from './VListItemTitle'\n\n// Composables\nimport { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'\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 { makeRouterProps, useLink } from '@/composables/router'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useList } from './list'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Utilities\nimport { computed, onMounted, watch } from 'vue'\nimport { genericComponent, useRender } from '@/util'\nimport { useNestedItem } from '@/composables/nested/nested'\n\n// Types\nimport type { MakeSlots } from '@/util'\n\ntype ListItemSlot = {\n  isActive: boolean\n  activate: (value: boolean) => void\n  isSelected: boolean\n  select: (value: boolean) => void\n}\n\nexport type ListItemTitleSlot = {\n  title?: string\n}\n\nexport type ListItemSubtitleSlot = {\n  subtitle?: string\n}\n\nexport const VListItem = genericComponent<new () => {\n  $slots: MakeSlots<{\n    prepend: [ListItemSlot]\n    append: [ListItemSlot]\n    default: [ListItemSlot]\n    title: [ListItemTitleSlot]\n    subtitle: [ListItemSubtitleSlot]\n  }>\n}>()({\n  name: 'VListItem',\n\n  directives: { Ripple },\n\n  props: {\n    active: Boolean,\n    activeColor: String,\n    activeClass: String,\n    appendAvatar: String,\n    appendIcon: String,\n    disabled: Boolean,\n    link: Boolean,\n    prependAvatar: String,\n    prependIcon: String,\n    subtitle: String,\n    title: String,\n    value: null,\n\n    ...makeBorderProps(),\n    ...makeDensityProps(),\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    ...makeRoundedProps(),\n    ...makeRouterProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n    ...makeVariantProps({ variant: 'text' } as const),\n  },\n\n  setup (props, { attrs, slots }) {\n    const link = useLink(props, attrs)\n    const id = computed(() => props.value ?? link.href.value)\n    const { select, isSelected, root, parent } = useNestedItem(id, false)\n    const list = useList()\n    const isActive = computed(() => {\n      return props.active || link.isExactActive?.value || isSelected.value\n    })\n    const variantProps = computed(() => {\n      const activeColor = props.activeColor ?? props.color\n      return {\n        color: isActive.value ? activeColor : props.color,\n        textColor: props.textColor,\n        variant: props.variant,\n      }\n    })\n\n    onMounted(() => {\n      if (link.isExactActive?.value && parent.value != null) {\n        root.open(parent.value, true)\n      }\n    })\n\n    watch(() => link.isExactActive?.value, val => {\n      if (val && parent.value != null) {\n        root.open(parent.value, true)\n      }\n    })\n\n    const { themeClasses } = provideTheme(props)\n    const { borderClasses } = useBorder(props)\n    const { colorClasses, colorStyles, variantClasses } = useVariant(variantProps)\n    const { densityClasses } = useDensity(props)\n    const { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n\n    const slotProps = computed(() => ({\n      isActive: isActive.value,\n      select,\n      isSelected: isSelected.value,\n    }))\n\n    useRender(() => {\n      const Tag = (link.isLink.value) ? 'a' : props.tag\n      const hasTitle = (slots.title || props.title)\n      const hasSubtitle = (slots.subtitle || props.subtitle)\n      const hasHeader = !!(hasTitle || hasSubtitle)\n      const hasAppend = !!(slots.append || props.appendAvatar || props.appendIcon)\n      const hasPrepend = !!(slots.prepend || props.prependAvatar || props.prependIcon)\n      const isClickable = !props.disabled && (link.isClickable.value || props.link || props.value != null)\n\n      list?.updateHasPrepend(hasPrepend)\n\n      return (\n        <Tag\n          class={[\n            'v-list-item',\n            {\n              'v-list-item--active': isActive.value,\n              'v-list-item--disabled': props.disabled,\n              'v-list-item--link': isClickable,\n              'v-list-item--prepend': !hasPrepend && list?.hasPrepend.value,\n              [`${props.activeClass}`]: isActive.value && props.activeClass,\n            },\n            themeClasses.value,\n            borderClasses.value,\n            colorClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            roundedClasses.value,\n            variantClasses.value,\n          ]}\n          style={[\n            colorStyles.value,\n            dimensionStyles.value,\n          ]}\n          href={ link.href.value }\n          tabindex={ isClickable ? 0 : undefined }\n          onClick={ isClickable && ((e: MouseEvent) => {\n            link.navigate?.(e)\n            select(!isSelected.value, e)\n          })}\n          v-ripple={ isClickable }\n        >\n          { genOverlays(isClickable || isActive.value, 'v-list-item') }\n\n          { hasPrepend && (\n            slots.prepend\n              ? slots.prepend(slotProps.value)\n              : (\n                <VListItemAvatar left>\n                  <VAvatar\n                    density={ props.density }\n                    icon={ props.prependIcon }\n                    image={ props.prependAvatar }\n                  />\n                </VListItemAvatar>\n              )\n          ) }\n\n          { hasHeader && (\n            <VListItemHeader>\n              { hasTitle && (\n                <VListItemTitle>\n                  { slots.title\n                    ? slots.title({ title: props.title })\n                    : props.title\n                  }\n                </VListItemTitle>\n              ) }\n\n              { hasSubtitle && (\n                <VListItemSubtitle>\n                  { slots.subtitle\n                    ? slots.subtitle({ subtitle: props.subtitle })\n                    : props.subtitle\n                  }\n                </VListItemSubtitle>\n              ) }\n            </VListItemHeader>\n          ) }\n\n          { slots.default?.(slotProps.value) }\n\n          { hasAppend && (\n            slots.append\n              ? slots.append(slotProps.value)\n              : (\n                <VListItemAvatar right>\n                  <VAvatar\n                    density={ props.density }\n                    icon={ props.appendIcon }\n                    image={ props.appendAvatar }\n                  />\n                </VListItemAvatar>\n              )\n          ) }\n        </Tag>\n      )\n    })\n  },\n})\n\nexport type VListItem = InstanceType<typeof VListItem>\n"],"file":"VListItem.mjs"}

package/lib/components/VList/VListItem.sass

@@ -1,4 +1,7 @@
-@import './index'
+@forward './variables'
+@use 'sass:list'
+@use '../../styles/tools'
+@use './variables' as *
 
 .v-list-item
   align-items: center
@@ -9,9 +12,13 @@
   text-decoration: none
   transition: $list-item-transition
 
-  @include border($list-item-border...)
-  @include states('.v-list-item__overlay')
-  @include variant($list-item-variants...)
+  @include tools.border($list-item-border...)
+  @include tools.states('.v-list-item__overlay')
+  @include tools.rounded($list-item-border-radius)
+  @include tools.variant($list-item-variants...)
+
+  &--rounded
+    @include tools.rounded($list-item-rounded-border-radius)
 
   &--disabled
     pointer-events: none
@@ -28,6 +35,9 @@
   transition: inherit
   transition-property: height, width
 
+  > .v-icon
+    opacity: var(--v-medium-emphasis-opacity)
+
   &--start
     margin-inline-end: $list-item-avatar-margin-end
 
@@ -35,11 +45,7 @@
     margin-inline-start: $list-item-avatar-margin-start
 
   @at-root
-    @include density('v-list', $list-density) using ($modifier)
-      #{$root}
-        height: $list-item-avatar-size + ($modifier * $list-item-avatar-size-multiplier)
-        width: $list-item-avatar-size + ($modifier * $list-item-avatar-size-multiplier)
-
+    @include tools.density('v-list', $list-density) using ($modifier)
       &.v-list--three-line #{$root}
         margin-top: $list-item-avatar-margin-y - $modifier
 
@@ -86,10 +92,10 @@
   .v-list--three-line &
     -webkit-line-clamp: 2
 
-  @include typography($list-item-subtitle-typography...)
+  @include tools.typography($list-item-subtitle-typography...)
 
   .v-list--nav &
-    @include typography($list-item-nav-subtitle-typography...)
+    @include tools.typography($list-item-nav-subtitle-typography...)
 
 .v-list-item-title
   hyphens: $list-item-title-hyphens
@@ -101,27 +107,27 @@
   word-break: $list-item-title-word-break
   word-wrap: $list-item-title-word-wrap
 
-  @include typography($list-item-title-typography...)
+  @include tools.typography($list-item-title-typography...)
 
   .v-list--nav &
-    @include typography($list-item-nav-title-typography...)
+    @include tools.typography($list-item-nav-title-typography...)
 
 .v-list-item
   $root: &
 
   @at-root
-    @include density('v-list', $list-density) using ($modifier)
+    @include tools.density('v-list', $list-density) using ($modifier)
       &.v-list--one-line #{$root}
         min-height: $list-item-min-height + $modifier
-        padding: (nth($list-item-padding, 1) + $modifier) nth($list-item-padding, 2)
+        padding: (list.nth($list-item-padding, 1) + $modifier) list.nth($list-item-padding, 2)
 
       &.v-list--two-line #{$root}
         min-height: $list-item-two-line-min-height + $modifier
-        padding: (nth($list-item-two-line-padding, 1) + $modifier) nth($list-item-two-line-padding, 2)
+        padding: (list.nth($list-item-two-line-padding, 1) + $modifier) list.nth($list-item-two-line-padding, 2)
 
       &.v-list--three-line #{$root}
         min-height: $list-item-three-line-min-height + $modifier
-        padding: (nth($list-item-three-line-padding, 1) + $modifier) nth($list-item-three-line-padding, 2)
+        padding: (list.nth($list-item-three-line-padding, 1) + $modifier) list.nth($list-item-three-line-padding, 2)
 
 .v-list-item__overlay
   background-color: currentColor
@@ -137,3 +143,26 @@
 
   .v-list-item--active.v-list-item--contained &
     --v-theme-overlay-multiplier: 0
+
+$base-padding: list.nth($list-item-padding, 2)
+.v-list
+  --indent-padding: 0px
+
+.v-list-group
+  --parent-padding: var(--indent-padding)
+  &--prepend
+    --parent-padding: calc(var(--indent-padding) + #{$list-item-avatar-size})
+
+.v-list-group__items
+  --indent-padding: calc(var(--parent-padding) + #{$list-indent-size})
+
+.v-list-group__items .v-list-item
+  padding-inline-start: calc(#{$base-padding} + var(--indent-padding)) !important
+
+.v-list-item--prepend,
+.v-list-group__items .v-list-item--prepend
+  padding-inline-start: calc(#{$base-padding} + var(--indent-padding) + #{$list-item-avatar-size} + #{$list-item-avatar-margin-start}) !important
+
+.v-list-group__header.v-list-item--active
+  .v-list-item__overlay
+    display: none