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

package/lib/components/VList/VListItem.css

@@ -0,0 +1,350 @@
+.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, .v-list-item[aria-haspopup=menu][aria-expanded=true]:hover.v-list-item__overlay,
+.v-list-item[aria-haspopup=menu][aria-expanded=true] .v-list-item__overlay {
+  opacity: calc(0.12 * var(--v-theme-overlay-multiplier));
+}
+.v-list-item--active:focus .v-list-item__overlay, .v-list-item[aria-haspopup=menu][aria-expanded=true]:focus .v-list-item__overlay {
+  opacity: calc(0.16 * var(--v-theme-overlay-multiplier));
+}
+.v-list-item--variant-plain, .v-list-item--variant-outlined, .v-list-item--variant-text, .v-list-item--variant-contained-text {
+  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 {
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+}
+.v-list-item--variant-contained-flat {
+  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-action,
+.v-list-item-avatar,
+.v-list-item-icon {
+  align-self: center;
+  display: flex;
+  align-items: center;
+  flex: none;
+  transition: inherit;
+  transition-property: height, width;
+}
+.v-list-item--three-line .v-list-item-action,
+.v-list-item--three-line .v-list-item-avatar,
+.v-list-item--three-line .v-list-item-icon {
+  align-self: flex-start;
+}
+
+.v-list-item-avatar--start {
+  margin-inline-end: 16px;
+}
+.v-list-item-avatar--end {
+  margin-inline-start: 16px;
+}
+.v-list-item--density-default.v-list-item--three-line .v-list-item-avatar {
+  margin-top: 4px;
+}
+
+.v-list-item--density-comfortable.v-list-item--three-line .v-list-item-avatar {
+  margin-top: 8px;
+}
+
+.v-list-item--density-compact.v-list-item--three-line .v-list-item-avatar {
+  margin-top: 12px;
+}
+
+.v-list-item-icon--start {
+  margin-inline-end: 32px;
+}
+.v-list-item-icon--end {
+  margin-inline-start: 32px;
+}
+
+.v-list-item-action--start {
+  margin-inline-end: 12px;
+}
+.v-list-item-action--end {
+  margin-inline-start: 12px;
+}
+
+.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-item--two-line .v-list-item-media {
+  margin-top: -4px;
+  margin-bottom: -4px;
+}
+.v-list-item--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-item--one-line .v-list-item-subtitle {
+  -webkit-line-clamp: 1;
+}
+.v-list-item--two-line .v-list-item-subtitle {
+  -webkit-line-clamp: 2;
+}
+.v-list-item--three-line .v-list-item-subtitle {
+  -webkit-line-clamp: 3;
+}
+.v-list-item--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-item--nav .v-list-item-title {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1rem;
+}
+
+.v-list-item--density-default.v-list-item--one-line {
+  min-height: 40px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.v-list-item--density-default.v-list-item--two-line {
+  min-height: 64px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.v-list-item--density-default.v-list-item--three-line {
+  min-height: 88px;
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+.v-list-item--density-default:not(.v-list-item--nav).v-list-item--one-line {
+  padding-inline-start: 16px;
+  padding-inline-end: 16px;
+}
+.v-list-item--density-default:not(.v-list-item--nav).v-list-item--two-line {
+  padding-inline-start: 16px;
+  padding-inline-end: 16px;
+}
+.v-list-item--density-default:not(.v-list-item--nav).v-list-item--three-line {
+  padding-inline-start: 16px;
+  padding-inline-end: 16px;
+}
+
+.v-list-item--density-comfortable.v-list-item--one-line {
+  min-height: 36px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+.v-list-item--density-comfortable.v-list-item--two-line {
+  min-height: 60px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.v-list-item--density-comfortable.v-list-item--three-line {
+  min-height: 84px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.v-list-item--density-comfortable:not(.v-list-item--nav).v-list-item--one-line {
+  padding-inline-start: 16px;
+  padding-inline-end: 16px;
+}
+.v-list-item--density-comfortable:not(.v-list-item--nav).v-list-item--two-line {
+  padding-inline-start: 16px;
+  padding-inline-end: 16px;
+}
+.v-list-item--density-comfortable:not(.v-list-item--nav).v-list-item--three-line {
+  padding-inline-start: 16px;
+  padding-inline-end: 16px;
+}
+
+.v-list-item--density-compact.v-list-item--one-line {
+  min-height: 32px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+.v-list-item--density-compact.v-list-item--two-line {
+  min-height: 56px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+.v-list-item--density-compact.v-list-item--three-line {
+  min-height: 80px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.v-list-item--density-compact:not(.v-list-item--nav).v-list-item--one-line {
+  padding-inline-start: 16px;
+  padding-inline-end: 16px;
+}
+.v-list-item--density-compact:not(.v-list-item--nav).v-list-item--two-line {
+  padding-inline-start: 16px;
+  padding-inline-end: 16px;
+}
+.v-list-item--density-compact:not(.v-list-item--nav).v-list-item--three-line {
+  padding-inline-start: 16px;
+  padding-inline-end: 16px;
+}
+
+.v-list-item--nav {
+  padding-inline-start: 8px;
+  padding-inline-end: 8px;
+}
+.v-list .v-list-item--nav:not(:last-child):not(:only-child) {
+  margin-bottom: 4px;
+}
+
+.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--nav {
+  --indent-padding: -8px;
+}
+
+.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-item-avatar,
+.v-list-group__items .v-list-item--prepend .v-list-item-avatar {
+  padding-inline-start: calc(16px + var(--indent-padding) + 40px + 16px) !important;
+}
+
+.v-list-group__header.v-list-item--active .v-list-item__overlay {
+  display: none;
+}

package/lib/components/VList/VListItem.mjs

@@ -1,157 +1,200 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode, Fragment as _Fragment } from "vue";
 // Styles
-import "./VListItem.sass"; // Mixins
-
-import Colorable from "../../mixins/colorable/index.mjs";
-import Routable from "../../mixins/routable/index.mjs";
-import { factory as GroupableFactory } from "../../mixins/groupable.mjs";
-import Themeable from "../../mixins/themeable/index.mjs";
-import { factory as ToggleableFactory } from "../../mixins/toggleable/index.mjs"; // Directives
-
-import Ripple from "../../directives/ripple/index.mjs"; // Utilities
-
-import { keyCodes } from "./../../util/helpers.mjs";
-import { removed } from "../../util/console.mjs"; // Types
-
-import mixins from "../../util/mixins.mjs";
-const baseMixins = mixins(Colorable, Routable, Themeable, GroupableFactory('listItemGroup'), ToggleableFactory('inputValue'));
-
-/* @vue/component */
-export default baseMixins.extend().extend({
-  name: 'v-list-item',
+import "./VListItem.css"; // Components
+
+import { VListItemAvatar } from "./VListItemAvatar.mjs";
+import { VListItemHeader } from "./VListItemHeader.mjs";
+import { VListItemIcon } from "./VListItemIcon.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";
+import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
+import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
+import { makeRouterProps, useLink } from "../../composables/router.mjs";
+import { makeTagProps } from "../../composables/tag.mjs";
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
+import { useList } from "./list.mjs"; // Directives
+
+import { Ripple } from "../../directives/ripple/index.mjs"; // Utilities
+
+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
   },
-  inject: {
-    isInGroup: {
-      default: false
-    },
-    isInList: {
-      default: false
-    },
-    isInMenu: {
-      default: false
-    },
-    isInNav: {
-      default: false
-    }
-  },
-  inheritAttrs: false,
   props: {
-    activeClass: {
-      type: String,
-
-      default() {
-        if (!this.listItemGroup) return '';
-        return this.listItemGroup.activeClass;
-      }
-
-    },
-    dense: Boolean,
-    inactive: Boolean,
+    active: Boolean,
+    activeColor: String,
+    activeClass: String,
+    appendAvatar: String,
+    appendIcon: String,
+    disabled: Boolean,
+    lines: String,
+    nav: Boolean,
+    prependAvatar: String,
+    prependIcon: String,
+    subtitle: String,
+    title: String,
+    value: null,
     link: Boolean,
-    selectable: {
-      type: Boolean
-    },
-    tag: {
-      type: String,
-      default: 'div'
-    },
-    threeLine: Boolean,
-    twoLine: Boolean,
-    value: null
-  },
-  data: () => ({
-    proxyClass: 'v-list-item--active'
-  }),
-  computed: {
-    classes() {
-      return {
-        'v-list-item': true,
-        ...Routable.options.computed.classes.call(this),
-        'v-list-item--dense': this.dense,
-        'v-list-item--disabled': this.disabled,
-        'v-list-item--link': this.isClickable && !this.inactive,
-        'v-list-item--selectable': this.selectable,
-        'v-list-item--three-line': this.threeLine,
-        'v-list-item--two-line': this.twoLine,
-        ...this.themeClasses
-      };
-    },
-
-    isClickable() {
-      return Boolean(Routable.options.computed.isClickable.call(this) || this.listItemGroup);
-    }
-
-  },
-
-  created() {
-    /* istanbul ignore next */
-    if (this.$attrs.hasOwnProperty('avatar')) {
-      removed('avatar', this);
-    }
+    ...makeBorderProps(),
+    ...makeDensityProps(),
+    ...makeDimensionProps(),
+    ...makeElevationProps(),
+    ...makeRoundedProps(),
+    ...makeRouterProps(),
+    ...makeTagProps(),
+    ...makeThemeProps(),
+    ...makeVariantProps({
+      variant: 'text'
+    })
   },
 
-  methods: {
-    click(e) {
-      if (e.detail) this.$el.blur();
-      this.$emit('click', e);
-      this.to || this.toggle();
-    },
+  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,
+      isIndeterminate,
+      isGroupActivator,
+      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) || isSelected.value;
+    });
+    const roundedProps = computed(() => props.rounded || props.nav);
+    const variantProps = computed(() => {
+      var _props$activeColor;
 
-    genAttrs() {
-      const attrs = {
-        'aria-disabled': this.disabled ? true : undefined,
-        tabindex: this.isClickable && !this.disabled ? 0 : -1,
-        ...this.$attrs
+      return {
+        color: isActive.value ? (_props$activeColor = props.activeColor) != null ? _props$activeColor : props.color : props.color,
+        variant: props.variant
       };
+    });
+    onMounted(() => {
+      var _link$isExactActive2;
 
-      if (this.$attrs.hasOwnProperty('role')) {// do nothing, role already provided
-      } else if (this.isInNav) {// do nothing, role is inherit
-      } else if (this.isInGroup) {
-        attrs.role = 'option';
-        attrs['aria-selected'] = String(this.isActive);
-      } else if (this.isInMenu) {
-        attrs.role = this.isClickable ? 'menuitem' : undefined;
-        attrs.id = attrs.id || "list-item-".concat(this._uid);
-      } else if (this.isInList) {
-        attrs.role = 'listitem';
+      if ((_link$isExactActive2 = link.isExactActive) != null && _link$isExactActive2.value && parent.value != null) {
+        root.open(parent.value, true);
       }
-
-      return attrs;
-    }
-
-  },
-
-  render(h) {
-    let {
-      tag,
-      data
-    } = this.generateRouteLink();
-    data.attrs = { ...data.attrs,
-      ...this.genAttrs()
-    };
-    data[this.to ? 'nativeOn' : 'on'] = { ...data[this.to ? 'nativeOn' : 'on'],
-      keydown: e => {
-        /* istanbul ignore else */
-        if (e.keyCode === keyCodes.enter) this.click(e);
-        this.$emit('keydown', e);
+    });
+    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);
       }
-    };
-    if (this.inactive) tag = 'div';
-
-    if (this.inactive && this.to) {
-      data.on = data.nativeOn;
-      delete data.nativeOn;
-    }
-
-    const children = this.$scopedSlots.default ? this.$scopedSlots.default({
-      active: this.isActive,
-      toggle: this.toggle
-    }) : this.$slots.default;
-    return h(tag, this.setTextColor(this.color, data), children);
+    });
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const {
+      borderClasses
+    } = useBorder(props);
+    const {
+      colorClasses,
+      colorStyles,
+      variantClasses
+    } = useVariant(variantProps);
+    const {
+      densityClasses
+    } = useDensity(props);
+    const {
+      dimensionStyles
+    } = useDimension(props);
+    const {
+      elevationClasses
+    } = useElevation(props);
+    const {
+      roundedClasses
+    } = useRounded(roundedProps);
+    const lineClasses = computed(() => props.lines ? `v-list-item--${props.lines}-line` : undefined);
+    const slotProps = computed(() => ({
+      isActive: isActive.value,
+      select,
+      isSelected: isSelected.value,
+      isIndeterminate: isIndeterminate.value
+    }));
+    useRender(() => {
+      var _slots$prepend, _slots$default, _slots$append;
+
+      const Tag = link.isLink.value ? 'a' : props.tag;
+      const hasColor = !list || isSelected.value || isActive.value;
+      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 && (props.link || link.isClickable.value || props.value != null && !!list);
+      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--nav': props.nav,
+          'v-list-item--prepend': !hasPrepend && (list == null ? void 0 : list.hasPrepend.value),
+          [`${props.activeClass}`]: isActive.value
+        }, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : undefined, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, variantClasses.value],
+        "style": [hasColor ? colorStyles.value : undefined, dimensionStyles.value],
+        "href": link.href.value,
+        "tabindex": isClickable ? 0 : undefined,
+        "onClick": isClickable && (e => {
+          var _link$navigate;
+
+          if (isGroupActivator) return;
+          (_link$navigate = link.navigate) == null ? void 0 : _link$navigate.call(link, e);
+          props.value != null && select(!isSelected.value, e);
+        })
+      }, {
+        default: () => [genOverlays(isClickable || isActive.value, 'v-list-item'), hasPrepend && _createVNode(_Fragment, null, [props.prependAvatar && _createVNode(VListItemAvatar, {
+          "image": props.prependAvatar,
+          "start": true
+        }, null), props.prependIcon && _createVNode(VListItemIcon, {
+          "icon": props.prependIcon,
+          "start": true
+        }, null), (_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots, slotProps.value)]), hasHeader && _createVNode(VListItemHeader, null, {
+          default: () => [hasTitle && _createVNode(VListItemTitle, null, {
+            default: () => [slots.title ? slots.title({
+              title: props.title
+            }) : props.title]
+          }), hasSubtitle && _createVNode(VListItemSubtitle, null, {
+            default: () => [slots.subtitle ? slots.subtitle({
+              subtitle: props.subtitle
+            }) : props.subtitle]
+          })]
+        }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, slotProps.value), hasAppend && _createVNode(_Fragment, null, [(_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots, slotProps.value), props.appendAvatar && _createVNode(VListItemAvatar, {
+          "image": props.appendAvatar,
+          "end": true
+        }, null), props.appendIcon && _createVNode(VListItemIcon, {
+          "icon": props.appendIcon,
+          "end": true
+        }, null)])]
+      }), [[_resolveDirective("ripple"), isClickable]]);
+    });
   }
 
 });