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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VList/VListItem.ts"],"names":["Colorable","Routable","factory","GroupableFactory","Themeable","ToggleableFactory","Ripple","keyCodes","removed","mixins","baseMixins","extend","name","directives","inject","isInGroup","default","isInList","isInMenu","isInNav","inheritAttrs","props","activeClass","type","String","listItemGroup","dense","Boolean","inactive","link","selectable","tag","threeLine","twoLine","value","data","proxyClass","computed","classes","options","call","disabled","isClickable","themeClasses","created","$attrs","hasOwnProperty","methods","click","e","detail","$el","blur","$emit","to","toggle","genAttrs","attrs","undefined","tabindex","role","isActive","id","_uid","render","h","generateRouteLink","keydown","keyCode","enter","on","nativeOn","children","$scopedSlots","active","$slots","setTextColor","color"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Styles\nimport './VListItem.sass'\n\n// Mixins\nimport Colorable from '../../mixins/colorable'\nimport Routable from '../../mixins/routable'\nimport { factory as GroupableFactory } from '../../mixins/groupable'\nimport Themeable from '../../mixins/themeable'\nimport { factory as ToggleableFactory } from '../../mixins/toggleable'\n\n// Directives\nimport Ripple from '../../directives/ripple'\n\n// Utilities\nimport { keyCodes } from './../../util/helpers'\nimport { ExtractVue } from './../../util/mixins'\nimport { removed } from '../../util/console'\n\n// Types\nimport mixins from '../../util/mixins'\nimport { VNode } from 'vue'\nimport { PropType, PropValidator } from 'vue/types/options'\n\nconst baseMixins = mixins(\n  Colorable,\n  Routable,\n  Themeable,\n  GroupableFactory('listItemGroup'),\n  ToggleableFactory('inputValue')\n)\n\ninterface options extends ExtractVue<typeof baseMixins> {\n  $el: HTMLElement\n  isInGroup: boolean\n  isInList: boolean\n  isInMenu: boolean\n  isInNav: boolean\n}\n\n/* @vue/component */\nexport default baseMixins.extend<options>().extend({\n  name: 'v-list-item',\n\n  directives: {\n    Ripple,\n  },\n\n  inject: {\n    isInGroup: {\n      default: false,\n    },\n    isInList: {\n      default: false,\n    },\n    isInMenu: {\n      default: false,\n    },\n    isInNav: {\n      default: false,\n    },\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    activeClass: {\n      type: String,\n      default (): string | undefined {\n        if (!this.listItemGroup) return ''\n\n        return this.listItemGroup.activeClass\n      },\n    } as any as PropValidator<string>,\n    dense: Boolean,\n    inactive: Boolean,\n    link: Boolean,\n    selectable: {\n      type: Boolean,\n    },\n    tag: {\n      type: String,\n      default: 'div',\n    },\n    threeLine: Boolean,\n    twoLine: Boolean,\n    value: null as any as PropType<any>,\n  },\n\n  data: () => ({\n    proxyClass: 'v-list-item--active',\n  }),\n\n  computed: {\n    classes (): object {\n      return {\n        'v-list-item': true,\n        ...Routable.options.computed.classes.call(this),\n        'v-list-item--dense': this.dense,\n        'v-list-item--disabled': this.disabled,\n        'v-list-item--link': this.isClickable && !this.inactive,\n        'v-list-item--selectable': this.selectable,\n        'v-list-item--three-line': this.threeLine,\n        'v-list-item--two-line': this.twoLine,\n        ...this.themeClasses,\n      }\n    },\n    isClickable (): boolean {\n      return Boolean(\n        Routable.options.computed.isClickable.call(this) ||\n        this.listItemGroup\n      )\n    },\n  },\n\n  created () {\n    /* istanbul ignore next */\n    if (this.$attrs.hasOwnProperty('avatar')) {\n      removed('avatar', this)\n    }\n  },\n\n  methods: {\n    click (e: MouseEvent | KeyboardEvent) {\n      if (e.detail) this.$el.blur()\n\n      this.$emit('click', e)\n\n      this.to || this.toggle()\n    },\n    genAttrs () {\n      const attrs: Record<string, any> = {\n        'aria-disabled': this.disabled ? true : undefined,\n        tabindex: this.isClickable && !this.disabled ? 0 : -1,\n        ...this.$attrs,\n      }\n\n      if (this.$attrs.hasOwnProperty('role')) {\n        // do nothing, role already provided\n      } else if (this.isInNav) {\n        // do nothing, role is inherit\n      } else if (this.isInGroup) {\n        attrs.role = 'option'\n        attrs['aria-selected'] = String(this.isActive)\n      } else if (this.isInMenu) {\n        attrs.role = this.isClickable ? 'menuitem' : undefined\n        attrs.id = attrs.id || `list-item-${this._uid}`\n      } else if (this.isInList) {\n        attrs.role = 'listitem'\n      }\n\n      return attrs\n    },\n  },\n\n  render (h): VNode {\n    let { tag, data } = this.generateRouteLink()\n\n    data.attrs = {\n      ...data.attrs,\n      ...this.genAttrs(),\n    }\n    data[this.to ? 'nativeOn' : 'on'] = {\n      ...data[this.to ? 'nativeOn' : 'on'],\n      keydown: (e: KeyboardEvent) => {\n        /* istanbul ignore else */\n        if (e.keyCode === keyCodes.enter) this.click(e)\n\n        this.$emit('keydown', e)\n      },\n    }\n\n    if (this.inactive) tag = 'div'\n    if (this.inactive && this.to) {\n      data.on = data.nativeOn\n      delete data.nativeOn\n    }\n\n    const children = this.$scopedSlots.default\n      ? this.$scopedSlots.default({\n        active: this.isActive,\n        toggle: this.toggle,\n      })\n      : this.$slots.default\n\n    return h(tag, this.setTextColor(this.color, data), children)\n  },\n})\n"],"file":"VListItem.mjs"}
+{"version":3,"sources":["../../../src/components/VList/VListItem.tsx"],"names":["VListItemAvatar","VListItemHeader","VListItemIcon","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","lines","nav","prependAvatar","prependIcon","subtitle","title","value","link","variant","setup","attrs","slots","id","href","select","isSelected","isIndeterminate","isGroupActivator","root","parent","list","isActive","isExactActive","roundedProps","rounded","variantProps","color","open","val","themeClasses","borderClasses","colorClasses","colorStyles","variantClasses","densityClasses","dimensionStyles","elevationClasses","roundedClasses","lineClasses","undefined","slotProps","Tag","isLink","tag","hasColor","hasTitle","hasSubtitle","hasHeader","hasAppend","append","hasPrepend","prepend","isClickable","updateHasPrepend","e","navigate","default"],"mappings":"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","sourcesContent":["// Styles\nimport './VListItem.sass'\n\n// Components\nimport { VListItemAvatar } from './VListItemAvatar'\nimport { VListItemHeader } from './VListItemHeader'\nimport { VListItemIcon } from './VListItemIcon'\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'\nimport type { PropType } from 'vue'\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    lines: String as PropType<'one' | 'two' | 'three'>,\n    nav: Boolean,\n    prependAvatar: String,\n    prependIcon: String,\n    subtitle: String,\n    title: String,\n    value: null,\n    link: Boolean,\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, isIndeterminate, isGroupActivator, 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 roundedProps = computed(() => props.rounded || props.nav)\n    const variantProps = computed(() => ({\n      color: isActive.value ? props.activeColor ?? props.color : props.color,\n      variant: props.variant,\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(roundedProps)\n    const lineClasses = computed(() => props.lines ? `v-list-item--${props.lines}-line` : undefined)\n\n    const slotProps = computed(() => ({\n      isActive: isActive.value,\n      select,\n      isSelected: isSelected.value,\n      isIndeterminate: isIndeterminate.value,\n    }))\n\n    useRender(() => {\n      const Tag = (link.isLink.value) ? 'a' : props.tag\n      const hasColor = !list || isSelected.value || isActive.value\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 && (props.link || link.isClickable.value || (props.value != null && !!list))\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--nav': props.nav,\n              'v-list-item--prepend': !hasPrepend && list?.hasPrepend.value,\n              [`${props.activeClass}`]: isActive.value,\n            },\n            themeClasses.value,\n            borderClasses.value,\n            hasColor ? colorClasses.value : undefined,\n            densityClasses.value,\n            elevationClasses.value,\n            lineClasses.value,\n            roundedClasses.value,\n            variantClasses.value,\n          ]}\n          style={[\n            hasColor ? colorStyles.value : undefined,\n            dimensionStyles.value,\n          ]}\n          href={ link.href.value }\n          tabindex={ isClickable ? 0 : undefined }\n          onClick={ isClickable && ((e: MouseEvent) => {\n            if (isGroupActivator) return\n\n            link.navigate?.(e)\n            props.value != null && select(!isSelected.value, e)\n          })}\n          v-ripple={ isClickable }\n        >\n          { genOverlays(isClickable || isActive.value, 'v-list-item') }\n\n          { hasPrepend && (\n            <>\n              { props.prependAvatar && (\n                <VListItemAvatar\n                  image={ props.prependAvatar }\n                  start\n                />\n              ) }\n\n              { props.prependIcon && (\n                <VListItemIcon\n                  icon={ props.prependIcon }\n                  start\n                />\n              ) }\n\n              { slots.prepend?.(slotProps.value) }\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            <>\n              { slots.append?.(slotProps.value) }\n\n              { props.appendAvatar && (\n                <VListItemAvatar\n                  image={ props.appendAvatar }\n                  end\n                />\n              ) }\n\n              { props.appendIcon && (\n                <VListItemIcon\n                  icon={ props.appendIcon }\n                  end\n                />\n              ) }\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,266 +1,216 @@
-@import './_variables.scss'
+@forward './variables'
+@use 'sass:list'
+@use '../../styles/tools'
+@use './variables' as *
 
-// Theme
-+theme(v-list-item) using ($material)
-  &--disabled
-    color: map-deep-get($material, 'text', 'disabled')
-
-  &:not(.v-list-item--active):not(.v-list-item--disabled)
-    color: map-deep-get($material, 'text', 'primary') !important
-
-  .v-list-item__mask
-    color: map-deep-get($material, 'text', 'disabled')
-    background: map-deep-get($material, 'expansion-panels', 'focus')
-
-  .v-list-item__subtitle,
-  .v-list-item__action-text
-    color: map-deep-get($material, 'text', 'secondary')
-
-  +states($material)
-
-  &.v-list-item--highlighted
-    &::before
-      opacity: map-deep-get($material, 'states', 'pressed')
-
-// Block
 .v-list-item
   align-items: center
   display: flex
-  flex: 1 1 100%
-  letter-spacing: normal
-  min-height: $list-item-min-height
-  outline: none
   padding: $list-item-padding
   position: relative
+  outline: none
   text-decoration: none
+  transition: $list-item-transition
+
+  @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
+    user-select: none
+    opacity: $list-disabled-opacity
 
-  &--selectable
-    user-select: auto
+  &--link
+    cursor: pointer
 
-  // Fix for IE11 where min-height does not work with
-  // align-items: center in flex containers
-  // https://github.com/philipwalton/flexbugs/issues/231
-  &::after
-    content: ''
-    min-height: inherit
-    font-size: 0
-
-// Element
-.v-list-item__action
+.v-list-item-action,
+.v-list-item-avatar,
+.v-list-item-icon
   align-self: center
-  margin: $list-item-action-margin
+  display: flex
+  align-items: center
+  flex: none
+  transition: inherit
+  transition-property: height, width
 
-  // Remove all margins when used
-  // in an item action. If user
-  // wants this they can not
-  // use this component
-  .v-input,
-  .v-input__control,
-  .v-input__slot,
-  .v-input--selection-controls__input
-    margin: 0 !important
+  .v-list-item--three-line &
+    align-self: flex-start
 
-  .v-input
-    padding: 0
+.v-list-item-avatar
+  $root: &
 
-    .v-messages
-      display: none
+  &--start
+    margin-inline-end: $list-item-avatar-margin-end
 
-.v-list-item__action-text
-  font-size: $list-item-action-text-font-size
+  &--end
+    margin-inline-start: $list-item-avatar-margin-start
 
-.v-list-item__avatar
-  align-self: center
-  justify-content: flex-start
-  margin-bottom: $list-item-avatar-margin-y
-  margin-top: $list-item-avatar-margin-y
+  @at-root
+    @include tools.density('v-list-item', $list-density) using ($modifier)
+      &.v-list-item--three-line #{$root}
+        margin-top: $list-item-avatar-margin-y - $modifier
 
-  &.v-list-item__avatar--horizontal
-    margin-bottom: $list-item-avatar-horizontal-margin
-    margin-top: $list-item-avatar-horizontal-margin
+.v-list-item-icon
+  &--start
+    margin-inline-end: $list-item-icon-margin-end
 
-    &:first-child
-      +ltr()
-        margin-left: $list-item-avatar-horizontal-margin-x
+  &--end
+    margin-inline-start: $list-item-icon-margin-start
 
-      +rtl()
-        margin-right: $list-item-avatar-horizontal-margin-x
+.v-list-item-action
+  &--start
+    margin-inline-end: $list-item-action-margin-start
 
-    &:last-child
-      +ltr()
-        margin-left: $list-item-avatar-horizontal-margin-x
+  &--end
+    margin-inline-start: $list-item-action-margin-end
 
-      +rtl()
-        margin-right: $list-item-avatar-horizontal-margin-x
+.v-list-item-media
+  margin-top: $list-item-media-margin-top
+  margin-bottom: $list-item-media-margin-bottom
 
-.v-list-item__content
-  align-items: center
-  align-self: center
-  display: flex
-  flex-wrap: wrap
-  flex: 1 1
-  overflow: hidden
-  padding: $list-item-content-padding
-
-  > *
-    line-height: 1.1
-    flex: 1 0 100%
-
-    &:not(:last-child)
-      margin-bottom: $list-item-content-children-margin-bottom
-
-.v-list-item__icon
-  align-self: flex-start
-  margin: $list-item-icon-margin
-
-// https://github.com/vuetifyjs/vuetify/issues/7930
-.v-list-item__action,
-.v-list-item__avatar,
-.v-list-item__icon
-  &:last-of-type:not(:only-child)
-    +ltr()
-      margin-left: $list-item-child-last-type-margin
-
-    +rtl()
-      margin-right: $list-item-child-last-type-margin
-
-.v-list-item__avatar
-  &:first-child
-    +ltr()
-      margin-right: $list-item-avatar-first-child-margin
-
-    +rtl()
-      margin-left: $list-item-avatar-first-child-margin
-
-.v-list-item__action,
-.v-list-item__icon
-  &:first-child
-    +ltr()
-      margin-right: $list-item-action-icon-margin
-
-    +rtl()
-      margin-left: $list-item-action-icon-margin
-
-.v-list-item__action,
-.v-list-item__avatar,
-.v-list-item__icon
-  display: inline-flex
-  min-width: $list-item-child-min-width
-
-// Increased specificity to beat
-// out default typography rules
-// line height plays a role in
-// proper element sizing
-.v-list-item .v-list-item__title,
-.v-list-item .v-list-item__subtitle
-  line-height: $list-item-title-subtitle-line-height
-
-.v-list-item__title,
-.v-list-item__subtitle
-  flex: 1 1 100%
-  overflow: hidden
-  text-overflow: ellipsis
-  white-space: nowrap
+  &--start
+    margin-inline-end: $list-item-media-margin-end
 
-.v-list-item__title
-  align-self: center
-  font-size: $list-item-title-font-size
+  &--end
+    margin-inline-start: $list-item-media-margin-start
 
-  > .v-badge
-    margin-top: 16px
+  .v-list-item--two-line &
+    margin-top: $list-item-media-two-line-margin-top
+    margin-bottom: $list-item-media-two-line-margin-bottom
 
-.v-list-item__subtitle
-  font-size: $list-item-subtitle-font-size
+  .v-list-item--three-line &
+    margin-top: $list-item-media-three-line-margin-top
+    margin-bottom: $list-item-media-three-line-margin-bottom
 
-// Modifier
-.v-list-item--dense,
-.v-list--dense .v-list-item
-  min-height: $list-dense-min-height
+.v-list-item-header
+  flex: 1 1 auto
+  min-width: 0
 
-  .v-list-item__icon
-    height: $list-dense-icon-height
-    margin-top: $list-dense-icon-margin
-    margin-bottom: $list-dense-icon-margin
+.v-list-item-subtitle
+  -webkit-box-orient: vertical
+  display: -webkit-box
+  opacity: $list-item-subtitle-opacity
+  overflow: hidden
+  padding: $list-item-subtitle-padding
+  text-overflow: ellipsis
 
-  .v-list-item__content
-    padding: $list-dense-content-padding
+  .v-list-item--one-line &
+    -webkit-line-clamp: 1
 
-  .v-list-item__title,
-  .v-list-item__subtitle
-    font-size: $list-item-dense-title-font-size
-    font-weight: $list-item-dense-title-font-weight
-    line-height: $list-item-dense-title-line-height
+  .v-list-item--two-line &
+    -webkit-line-clamp: 2
 
-  &.v-list-item--two-line
-    min-height: $list-item-dense-two-line-min-height
+  .v-list-item--three-line &
+    -webkit-line-clamp: 3
 
-  &.v-list-item--three-line
-    min-height: $list-item-dense-three-line-min-height
+  @include tools.typography($list-item-subtitle-typography...)
 
-.v-list-item--link
-  cursor: pointer
-  user-select: none
+  .v-list-item--nav &
+    @include tools.typography($list-item-nav-subtitle-typography...)
 
-  &:before
-    background-color: currentColor
-    bottom: 0
-    content: ''
-    left: 0
-    opacity: 0
-    pointer-events: none
-    position: absolute
-    right: 0
-    top: 0
-    transition: $primary-transition
-
-// https://github.com/vuetifyjs/vuetify/issues/8327
-.v-list .v-list-item--active
-  color: inherit
-
-  .v-icon
-    color: inherit
-
-.v-list-item__action--stack
-  align-items: flex-end
-  align-self: stretch
-  justify-content: space-between
+.v-list-item-title
+  hyphens: $list-item-title-hyphens
+  overflow-wrap: $list-item-title-overflow-wrap
+  overflow: hidden
+  padding: $list-item-title-padding
   white-space: nowrap
-  flex-direction: column
-
-.v-list--two-line .v-list-item,
-.v-list--three-line .v-list-item,
-.v-list-item--two-line,
-.v-list-item--three-line
-  .v-list-item__avatar:not(.v-list-item__avatar--horizontal),
-  .v-list-item__icon
-    margin-bottom: $list-item-icon-margin-y
-    margin-top: $list-item-icon-margin-y
-
-.v-list--two-line .v-list-item,
-.v-list-item--two-line
-  min-height: $list-item-two-line-min-height
-
-  .v-list-item__icon
-    margin-bottom: $list-item-two-line-icon-margin-bottom
-
-.v-list--three-line .v-list-item,
-.v-list-item--three-line
-  min-height: $list-item-three-line-min-height
-
-  .v-list-item__avatar,
-  .v-list-item__action
-    align-self: flex-start
-    margin-top: $list-item-three-line-avatar-action-margin
-    margin-bottom: $list-item-three-line-avatar-action-margin
+  text-overflow: ellipsis
+  word-break: $list-item-title-word-break
+  word-wrap: $list-item-title-word-wrap
 
-  .v-list-item__content
-    align-self: stretch
+  @include tools.typography($list-item-title-typography...)
 
-  .v-list-item__subtitle
-    white-space: initial
-    -webkit-line-clamp: 2
-    -webkit-box-orient: vertical
-    display: -webkit-box
+  .v-list-item--nav &
+    @include tools.typography($list-item-nav-title-typography...)
+
+.v-list-item
+  @at-root
+    @include tools.density('v-list-item', $list-density) using ($modifier)
+      &.v-list-item--one-line
+        $one-line-padding: (list.nth($list-item-padding, 1) + $modifier)
+
+        min-height: $list-item-min-height + $modifier
+        padding-top: $one-line-padding
+        padding-bottom: $one-line-padding
+
+      &.v-list-item--two-line
+        $two-line-padding: (list.nth($list-item-two-line-padding, 1) + $modifier)
+
+        min-height: $list-item-two-line-min-height + $modifier
+        padding-top: $two-line-padding
+        padding-bottom: $two-line-padding
+
+      &.v-list-item--three-line
+        $three-line-padding: (list.nth($list-item-three-line-padding, 1) + $modifier)
+
+        min-height: $list-item-three-line-min-height + $modifier
+        padding-top: $three-line-padding
+        padding-bottom: $three-line-padding
+
+      &:not(.v-list-item--nav)
+        &.v-list-item--one-line
+          padding-inline-start: list.nth($list-item-padding, 2)
+          padding-inline-end: list.nth($list-item-padding, 2)
+
+        &.v-list-item--two-line
+          padding-inline-start: list.nth($list-item-two-line-padding, 2)
+          padding-inline-end: list.nth($list-item-two-line-padding, 2)
+
+        &.v-list-item--three-line
+          padding-inline-start: list.nth($list-item-three-line-padding, 2)
+          padding-inline-end: list.nth($list-item-three-line-padding, 2)
+
+  &--nav
+    padding-inline-start: $list-nav-padding
+    padding-inline-end: $list-nav-padding
+
+    .v-list &
+      &:not(:last-child):not(:only-child)
+        margin-bottom: $list-item-nav-margin-top
+
+.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-theme-overlay-multiplier: 0
+
+$base-padding: list.nth($list-item-padding, 2)
+.v-list
+  --indent-padding: 0px
+
+  &--nav
+    --indent-padding: -#{$list-nav-padding}
+
+.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
+  .v-list-item-avatar
+    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

package/lib/components/VList/VListItemAction.mjs

@@ -1,24 +1,28 @@
-// @ts-nocheck
+import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
+// Composables
+import { makeTagProps } from "../../composables/tag.mjs"; // Utilities
 
-/* eslint-disable */
-// Types
-import Vue from 'vue';
-/* @vue/component */
+import { defineComponent } from "../../util/index.mjs";
+export const VListItemAction = defineComponent({
+  name: 'VListItemAction',
+  props: {
+    start: Boolean,
+    end: Boolean,
+    ...makeTagProps()
+  },
 
-export default Vue.extend({
-  name: 'v-list-item-action',
-  functional: true,
-
-  render(h, {
-    data,
-    children = []
-  }) {
-    data.staticClass = data.staticClass ? "v-list-item__action ".concat(data.staticClass) : 'v-list-item__action';
-    const filteredChild = children.filter(VNode => {
-      return VNode.isComment === false && VNode.text !== ' ';
-    });
-    if (filteredChild.length > 1) data.staticClass += ' v-list-item__action--stack';
-    return h('div', data, children);
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    return () => {
+      return _createVNode(props.tag, {
+        "class": ['v-list-item-action', {
+          'v-list-item-action--start': props.start,
+          'v-list-item-action--end': props.end
+        }]
+      }, slots);
+    };
   }
 
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VList/VListItemAction.ts"],"names":["Vue","extend","name","functional","render","h","data","children","staticClass","filteredChild","filter","VNode","isComment","text","length"],"mappings":"AAAA;;AACA;AAEA;AACA,OAAOA,GAAP,MAA2B,KAA3B;AAEA;;AACA,eAAeA,GAAG,CAACC,MAAJ,CAAW;AACxBC,EAAAA,IAAI,EAAE,oBADkB;AAGxBC,EAAAA,UAAU,EAAE,IAHY;;AAKxBC,EAAAA,MAAM,CAAEC,CAAF,EAAK;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,QAAQ,GAAG;AAAnB,GAAL,EAAqC;AACzCD,IAAAA,IAAI,CAACE,WAAL,GAAmBF,IAAI,CAACE,WAAL,iCAA0CF,IAAI,CAACE,WAA/C,IAA+D,qBAAlF;AACA,UAAMC,aAAa,GAAGF,QAAQ,CAACG,MAAT,CAAgBC,KAAK,IAAI;AAC7C,aAAOA,KAAK,CAACC,SAAN,KAAoB,KAApB,IAA6BD,KAAK,CAACE,IAAN,KAAe,GAAnD;AACD,KAFqB,CAAtB;AAGA,QAAIJ,aAAa,CAACK,MAAd,GAAuB,CAA3B,EAA8BR,IAAI,CAACE,WAAL,IAAoB,6BAApB;AAE9B,WAAOH,CAAC,CAAC,KAAD,EAAQC,IAAR,EAAcC,QAAd,CAAR;AACD;;AAbuB,CAAX,CAAf","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Types\nimport Vue, { VNode } from 'vue'\n\n/* @vue/component */\nexport default Vue.extend({\n  name: 'v-list-item-action',\n\n  functional: true,\n\n  render (h, { data, children = [] }): VNode {\n    data.staticClass = data.staticClass ? `v-list-item__action ${data.staticClass}` : 'v-list-item__action'\n    const filteredChild = children.filter(VNode => {\n      return VNode.isComment === false && VNode.text !== ' '\n    })\n    if (filteredChild.length > 1) data.staticClass += ' v-list-item__action--stack'\n\n    return h('div', data, children)\n  },\n})\n"],"file":"VListItemAction.mjs"}
+{"version":3,"sources":["../../../src/components/VList/VListItemAction.tsx"],"names":["makeTagProps","defineComponent","VListItemAction","name","props","start","Boolean","end","setup","slots"],"mappings":";AAAA;SACSA,Y,qCAET;;SACSC,e;AAET,OAAO,MAAMC,eAAe,GAAGD,eAAe,CAAC;AAC7CE,EAAAA,IAAI,EAAE,iBADuC;AAG7CC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAEC,OADF;AAELC,IAAAA,GAAG,EAAED,OAFA;AAIL,OAAGN,YAAY;AAJV,GAHsC;;AAU7CQ,EAAAA,KAAK,CAAEJ,KAAF,QAAoB;AAAA,QAAX;AAAEK,MAAAA;AAAF,KAAW;AACvB,WAAO,MAAM;AACX;AAAA,iBAEW,CACL,oBADK,EAEL;AACE,uCAA6BL,KAAK,CAACC,KADrC;AAEE,qCAA2BD,KAAK,CAACG;AAFnC,SAFK;AAFX,SAScE,KATd;AAYD,KAbD;AAcD;;AAzB4C,CAAD,CAAvC","sourcesContent":["// Composables\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\nexport const VListItemAction = defineComponent({\n  name: 'VListItemAction',\n\n  props: {\n    start: Boolean,\n    end: Boolean,\n\n    ...makeTagProps(),\n  },\n\n  setup (props, { slots }) {\n    return () => {\n      return (\n        <props.tag\n          class={[\n            'v-list-item-action',\n            {\n              'v-list-item-action--start': props.start,\n              'v-list-item-action--end': props.end,\n            },\n          ]}\n          v-slots={ slots }\n        />\n      )\n    }\n  },\n})\n"],"file":"VListItemAction.mjs"}

package/lib/components/VList/VListItemAvatar.mjs

@@ -1,35 +1,22 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
 // Components
-import VAvatar from "../VAvatar/index.mjs"; // Types
-
-/* @vue/component */
-export default VAvatar.extend({
-  name: 'v-list-item-avatar',
-  props: {
-    horizontal: Boolean,
-    size: {
-      type: [Number, String],
-      default: 40
-    }
-  },
-  computed: {
-    classes() {
-      return {
-        'v-list-item__avatar--horizontal': this.horizontal,
-        ...VAvatar.options.computed.classes.call(this),
-        'v-avatar--tile': this.tile || this.horizontal
-      };
-    }
+import { makeVAvatarProps, VAvatar } from "../VAvatar/VAvatar.mjs"; // Utilities
 
-  },
+import { defineComponent } from "../../util/index.mjs";
+export const VListItemAvatar = defineComponent({
+  name: 'VListItemAvatar',
+  props: makeVAvatarProps(),
 
-  render(h) {
-    const render = VAvatar.options.render.call(this, h);
-    render.data = render.data || {};
-    render.data.staticClass += ' v-list-item__avatar';
-    return render;
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    return () => _createVNode(VAvatar, _mergeProps({
+      "class": ['v-list-item-avatar', {
+        'v-list-item-avatar--start': props.start,
+        'v-list-item-avatar--end': props.end
+      }]
+    }, props), slots);
   }
 
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VList/VListItemAvatar.ts"],"names":["VAvatar","extend","name","props","horizontal","Boolean","size","type","Number","String","default","computed","classes","options","call","tile","render","h","data","staticClass"],"mappings":"AAAA;;AACA;AAEA;OACOA,O,8BAEP;;AAGA;AACA,eAAeA,OAAO,CAACC,MAAR,CAAe;AAC5BC,EAAAA,IAAI,EAAE,oBADsB;AAG5BC,EAAAA,KAAK,EAAE;AACLC,IAAAA,UAAU,EAAEC,OADP;AAELC,IAAAA,IAAI,EAAE;AACJC,MAAAA,IAAI,EAAE,CAACC,MAAD,EAASC,MAAT,CADF;AAEJC,MAAAA,OAAO,EAAE;AAFL;AAFD,GAHqB;AAW5BC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,OAAO,GAAY;AACjB,aAAO;AACL,2CAAmC,KAAKR,UADnC;AAEL,WAAGJ,OAAO,CAACa,OAAR,CAAgBF,QAAhB,CAAyBC,OAAzB,CAAiCE,IAAjC,CAAsC,IAAtC,CAFE;AAGL,0BAAkB,KAAKC,IAAL,IAAa,KAAKX;AAH/B,OAAP;AAKD;;AAPO,GAXkB;;AAqB5BY,EAAAA,MAAM,CAAEC,CAAF,EAAY;AAChB,UAAMD,MAAM,GAAGhB,OAAO,CAACa,OAAR,CAAgBG,MAAhB,CAAuBF,IAAvB,CAA4B,IAA5B,EAAkCG,CAAlC,CAAf;AAEAD,IAAAA,MAAM,CAACE,IAAP,GAAcF,MAAM,CAACE,IAAP,IAAe,EAA7B;AACAF,IAAAA,MAAM,CAACE,IAAP,CAAYC,WAAZ,IAA2B,sBAA3B;AAEA,WAAOH,MAAP;AACD;;AA5B2B,CAAf,CAAf","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Components\nimport VAvatar from '../VAvatar'\n\n// Types\nimport { VNode } from 'vue'\n\n/* @vue/component */\nexport default VAvatar.extend({\n  name: 'v-list-item-avatar',\n\n  props: {\n    horizontal: Boolean,\n    size: {\n      type: [Number, String],\n      default: 40,\n    },\n  },\n\n  computed: {\n    classes (): object {\n      return {\n        'v-list-item__avatar--horizontal': this.horizontal,\n        ...VAvatar.options.computed.classes.call(this),\n        'v-avatar--tile': this.tile || this.horizontal,\n      }\n    },\n  },\n\n  render (h): VNode {\n    const render = VAvatar.options.render.call(this, h)\n\n    render.data = render.data || {}\n    render.data.staticClass += ' v-list-item__avatar'\n\n    return render\n  },\n})\n"],"file":"VListItemAvatar.mjs"}
+{"version":3,"sources":["../../../src/components/VList/VListItemAvatar.tsx"],"names":["makeVAvatarProps","VAvatar","defineComponent","VListItemAvatar","name","props","setup","slots","start","end"],"mappings":";AAAA;SACSA,gB,EAAkBC,O,kCAE3B;;SACSC,e;AAET,OAAO,MAAMC,eAAe,GAAGD,eAAe,CAAC;AAC7CE,EAAAA,IAAI,EAAE,iBADuC;AAG7CC,EAAAA,KAAK,EAAEL,gBAAgB,EAHsB;;AAK7CM,EAAAA,KAAK,CAAED,KAAF,QAAoB;AAAA,QAAX;AAAEE,MAAAA;AAAF,KAAW;AACvB,WAAO;AAAA,eAEI,CACL,oBADK,EAEL;AACE,qCAA6BF,KAAK,CAACG,KADrC;AAEE,mCAA2BH,KAAK,CAACI;AAFnC,OAFK;AAFJ,OASEJ,KATF,GAUOE,KAVP,CAAP;AAaD;;AAnB4C,CAAD,CAAvC","sourcesContent":["// Components\nimport { makeVAvatarProps, VAvatar } from '@/components/VAvatar/VAvatar'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\nexport const VListItemAvatar = defineComponent({\n  name: 'VListItemAvatar',\n\n  props: makeVAvatarProps(),\n\n  setup (props, { slots }) {\n    return () => (\n      <VAvatar\n        class={[\n          'v-list-item-avatar',\n          {\n            'v-list-item-avatar--start': props.start,\n            'v-list-item-avatar--end': props.end,\n          },\n        ]}\n        { ...props }\n        v-slots={ slots }\n      />\n    )\n  },\n})\n"],"file":"VListItemAvatar.mjs"}

package/lib/components/VList/VListItemHeader.mjs

@@ -0,0 +1,3 @@
+import { createSimpleFunctional } from "../../util/index.mjs";
+export const VListItemHeader = createSimpleFunctional('v-list-item-header');
+//# sourceMappingURL=VListItemHeader.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/VList/VListItemHeader.ts"],"names":["createSimpleFunctional","VListItemHeader"],"mappings":"SAASA,sB;AAET,OAAO,MAAMC,eAAe,GAAGD,sBAAsB,CAAC,oBAAD,CAA9C","sourcesContent":["import { createSimpleFunctional } from '@/util'\n\nexport const VListItemHeader = createSimpleFunctional('v-list-item-header')\n"],"file":"VListItemHeader.mjs"}