vuetify 3.6.0-alpha.2 → 3.6.0

package/lib/components/VAlert/VAlert.sass

@@ -1,132 +1,133 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-.v-alert
-  display: grid
-  flex: 1 1
-  grid-template-areas: "prepend content append close" ". content . ."
-  grid-template-columns: max-content auto max-content max-content
-  position: relative
-  padding: $alert-padding
-  overflow: hidden
-  --v-border-color: #{$alert-border-color}
-
-  @include tools.position($alert-positions)
-  @include tools.rounded($alert-border-radius)
-  @include tools.variant($alert-variants...)
-
-  &--prominent
-    grid-template-areas: "prepend content append close" "prepend content . ."
-
-  &.v-alert--border
-    --v-border-opacity: #{$alert-border-opacity}
-
-    &.v-alert--border-start
-      padding-inline-start: $alert-padding + $alert-border-thin-width
-
-    &.v-alert--border-end
-      padding-inline-end: $alert-padding + $alert-border-thin-width
-
-  &--variant-plain
-    transition: $alert-plain-transition
-
-  @at-root
-    @include tools.density('v-alert', $alert-density) using ($modifier)
-      padding-bottom: $alert-padding + $modifier
-      padding-top: $alert-padding + $modifier
-
-      &.v-alert--border-top
-        padding-top: $alert-padding + $alert-border-thin-width + $modifier
-
-      &.v-alert--border-bottom
-        padding-bottom: $alert-padding + $alert-border-thin-width + $modifier
-
-.v-alert__border
-  border-radius: inherit
-  bottom: 0
-  left: 0
-  opacity: var(--v-border-opacity)
-  position: absolute
-  pointer-events: none
-  right: 0
-  top: 0
-  width: 100%
-
-  @include tools.border($alert-border...)
-
-  .v-alert--border-start &
-    border-inline-start-width: $alert-border-thin-width
-
-  .v-alert--border-end &
-    border-inline-end-width: $alert-border-thin-width
-
-  .v-alert--border-top &
-    border-top-width: $alert-border-thin-width
-
-  .v-alert--border-bottom &
-    border-bottom-width: $alert-border-thin-width
-
-.v-alert__close
-  flex: 0 1 auto
-  grid-area: close
-
-.v-alert__content
-  align-self: center
-  grid-area: content
-  overflow: hidden
-
-.v-alert__append,
-.v-alert__close
-  align-self: flex-start
-  margin-inline-start: $alert-append-margin-inline-start
-
-.v-alert__append
-  align-self: flex-start
-  grid-area: append
-
-  + .v-alert__close
-    margin-inline-start: $alert-append-close-margin-inline-start
-
-.v-alert__prepend
-  align-self: flex-start
-  display: flex
-  align-items: center
-  grid-area: prepend
-  margin-inline-end: $alert-prepend-margin-inline-end
-
-  .v-alert--prominent &
+@include tools.layer('components')
+  .v-alert
+    display: grid
+    flex: 1 1
+    grid-template-areas: "prepend content append close" ". content . ."
+    grid-template-columns: max-content auto max-content max-content
+    position: relative
+    padding: $alert-padding
+    overflow: hidden
+    --v-border-color: #{$alert-border-color}
+
+    @include tools.position($alert-positions)
+    @include tools.rounded($alert-border-radius)
+    @include tools.variant($alert-variants...)
+
+    &--prominent
+      grid-template-areas: "prepend content append close" "prepend content . ."
+
+    &.v-alert--border
+      --v-border-opacity: #{$alert-border-opacity}
+
+      &.v-alert--border-start
+        padding-inline-start: $alert-padding + $alert-border-thin-width
+
+      &.v-alert--border-end
+        padding-inline-end: $alert-padding + $alert-border-thin-width
+
+    &--variant-plain
+      transition: $alert-plain-transition
+
+    @at-root
+      @include tools.density('v-alert', $alert-density) using ($modifier)
+        padding-bottom: $alert-padding + $modifier
+        padding-top: $alert-padding + $modifier
+
+        &.v-alert--border-top
+          padding-top: $alert-padding + $alert-border-thin-width + $modifier
+
+        &.v-alert--border-bottom
+          padding-bottom: $alert-padding + $alert-border-thin-width + $modifier
+
+  .v-alert__border
+    border-radius: inherit
+    bottom: 0
+    left: 0
+    opacity: var(--v-border-opacity)
+    position: absolute
+    pointer-events: none
+    right: 0
+    top: 0
+    width: 100%
+
+    @include tools.border($alert-border...)
+
+    .v-alert--border-start &
+      border-inline-start-width: $alert-border-thin-width
+
+    .v-alert--border-end &
+      border-inline-end-width: $alert-border-thin-width
+
+    .v-alert--border-top &
+      border-top-width: $alert-border-thin-width
+
+    .v-alert--border-bottom &
+      border-bottom-width: $alert-border-thin-width
+
+  .v-alert__close
+    flex: 0 1 auto
+    grid-area: close
+
+  .v-alert__content
     align-self: center
+    grid-area: content
+    overflow: hidden
+
+  .v-alert__append,
+  .v-alert__close
+    align-self: flex-start
+    margin-inline-start: $alert-append-margin-inline-start
+
+  .v-alert__append
+    align-self: flex-start
+    grid-area: append
+
+    + .v-alert__close
+      margin-inline-start: $alert-append-close-margin-inline-start
+
+  .v-alert__prepend
+    align-self: flex-start
+    display: flex
+    align-items: center
+    grid-area: prepend
+    margin-inline-end: $alert-prepend-margin-inline-end
 
-.v-alert__underlay
-  grid-area: none
-  position: absolute
-
-  .v-alert--border-start &
-    border-top-left-radius: 0
-    border-bottom-left-radius: 0
-
-  .v-alert--border-end &
-    border-top-right-radius: 0
-    border-bottom-right-radius: 0
-
-  .v-alert--border-top &
-    border-top-left-radius: 0
-    border-top-right-radius: 0
-
-  .v-alert--border-bottom &
-    border-bottom-left-radius: 0
-    border-bottom-right-radius: 0
-
-.v-alert-title
-  align-items: center
-  align-self: center
-  display: flex
-  font-size: $alert-title-font-size
-  font-weight: $alert-title-font-weight
-  hyphens: $alert-title-hyphens
-  letter-spacing: $alert-title-letter-spacing
-  line-height: $alert-title-line-height
-  overflow-wrap: $alert-title-overflow-wrap
-  text-transform: $alert-title-text-transform
-  word-break: $alert-title-word-break
-  word-wrap: $alert-title-word-wrap
+    .v-alert--prominent &
+      align-self: center
+
+  .v-alert__underlay
+    grid-area: none
+    position: absolute
+
+    .v-alert--border-start &
+      border-top-left-radius: 0
+      border-bottom-left-radius: 0
+
+    .v-alert--border-end &
+      border-top-right-radius: 0
+      border-bottom-right-radius: 0
+
+    .v-alert--border-top &
+      border-top-left-radius: 0
+      border-top-right-radius: 0
+
+    .v-alert--border-bottom &
+      border-bottom-left-radius: 0
+      border-bottom-right-radius: 0
+
+  .v-alert-title
+    align-items: center
+    align-self: center
+    display: flex
+    font-size: $alert-title-font-size
+    font-weight: $alert-title-font-weight
+    hyphens: $alert-title-hyphens
+    letter-spacing: $alert-title-letter-spacing
+    line-height: $alert-title-line-height
+    overflow-wrap: $alert-title-overflow-wrap
+    text-transform: $alert-title-text-transform
+    word-break: $alert-title-word-break
+    word-wrap: $alert-title-word-wrap

package/lib/components/VApp/VApp.sass

@@ -1,16 +1,18 @@
+@use '../../styles/tools'
 @use './variables' as *
 
-.v-application
-  display: flex
-  background: $application-background
-  color: $application-color
+@include tools.layer('components')
+  .v-application
+    display: flex
+    background: $application-background
+    color: $application-color
 
-.v-application__wrap
-  backface-visibility: hidden
-  display: flex
-  flex-direction: column
-  flex: 1 1 auto
-  max-width: 100%
-  min-height: 100vh
-  min-height: 100dvh
-  position: relative
+  .v-application__wrap
+    backface-visibility: hidden
+    display: flex
+    flex-direction: column
+    flex: 1 1 auto
+    max-width: 100%
+    min-height: 100vh
+    min-height: 100dvh
+    position: relative

package/lib/components/VAppBar/VAppBar.sass

@@ -1,14 +1,15 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-.v-app-bar
-  display: flex
+@include tools.layer('components')
+  .v-app-bar
+    display: flex
 
-  &.v-toolbar
-    @include tools.theme($app-bar-theme...)
+    &.v-toolbar
+      @include tools.theme($app-bar-theme...)
 
-    &:not(.v-toolbar--flat)
-      @include tools.elevation($app-bar-elevation)
+      &:not(.v-toolbar--flat)
+        @include tools.elevation($app-bar-elevation)
 
-  &:not(.v-toolbar--absolute)
-    padding-inline-end: var(--v-scrollbar-offset)
+    &:not(.v-toolbar--absolute)
+      padding-inline-end: var(--v-scrollbar-offset)

package/lib/components/VAppBar/index.d.mts

@@ -484,6 +484,7 @@ interface GroupItem {
     id: number;
     value: Ref<unknown>;
     disabled: Ref<boolean | undefined>;
+    useIndexAsValue?: boolean;
 }
 interface GroupProvide {
     register: (item: GroupItem, cmp: ComponentInternalInstance) => void;
@@ -515,6 +516,7 @@ declare const VAppBarNavIcon: {
         disabled: boolean;
         tag: string;
         icon: NonNullable<boolean | IconValue>;
+        readonly: boolean;
         variant: NonNullable<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
         block: boolean;
         exact: boolean;
@@ -577,6 +579,7 @@ declare const VAppBarNavIcon: {
         disabled: boolean;
         tag: string;
         icon: NonNullable<boolean | IconValue>;
+        readonly: boolean;
         variant: NonNullable<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
         block: boolean;
         exact: boolean;
@@ -640,6 +643,7 @@ declare const VAppBarNavIcon: {
         disabled: boolean;
         tag: string;
         icon: NonNullable<boolean | IconValue>;
+        readonly: boolean;
         rounded: string | number | boolean;
         variant: NonNullable<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
         block: boolean;
@@ -680,6 +684,7 @@ declare const VAppBarNavIcon: {
         disabled: boolean;
         tag: string;
         icon: NonNullable<boolean | IconValue>;
+        readonly: boolean;
         variant: NonNullable<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
         block: boolean;
         exact: boolean;
@@ -743,6 +748,7 @@ declare const VAppBarNavIcon: {
         disabled: boolean;
         tag: string;
         icon: NonNullable<boolean | IconValue>;
+        readonly: boolean;
         rounded: string | number | boolean;
         variant: NonNullable<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
         block: boolean;
@@ -767,6 +773,7 @@ declare const VAppBarNavIcon: {
     disabled: boolean;
     tag: string;
     icon: NonNullable<boolean | IconValue>;
+    readonly: boolean;
     variant: NonNullable<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
     block: boolean;
     exact: boolean;
@@ -830,6 +837,7 @@ declare const VAppBarNavIcon: {
     disabled: boolean;
     tag: string;
     icon: NonNullable<boolean | IconValue>;
+    readonly: boolean;
     rounded: string | number | boolean;
     variant: NonNullable<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
     block: boolean;
@@ -935,6 +943,7 @@ declare const VAppBarNavIcon: {
     prependIcon: vue.PropType<IconValue>;
     appendIcon: vue.PropType<IconValue>;
     block: BooleanConstructor;
+    readonly: BooleanConstructor;
     slim: BooleanConstructor;
     stacked: BooleanConstructor;
     ripple: {
@@ -1025,6 +1034,7 @@ declare const VAppBarNavIcon: {
     prependIcon: vue.PropType<IconValue>;
     appendIcon: vue.PropType<IconValue>;
     block: BooleanConstructor;
+    readonly: BooleanConstructor;
     slim: BooleanConstructor;
     stacked: BooleanConstructor;
     ripple: {

package/lib/components/VAutocomplete/VAutocomplete.mjs

@@ -165,16 +165,14 @@ export const VAutocomplete = genericComponent()({
         listRef.value?.focus('next');
       }
       if (['Backspace', 'Delete'].includes(e.key)) {
-        if (!props.multiple && hasSelectionSlot.value && model.value.length > 0) return select(model.value[0], false);
-        if (selectionIndex.value < 0) {
-          if (e.key === 'Backspace' && !search.value) {
-            selectionIndex.value = length - 1;
-          }
-          return;
+        if (!props.multiple && hasSelectionSlot.value && model.value.length > 0 && !search.value) return select(model.value[0], false);
+        if (~selectionIndex.value) {
+          const originalSelectionIndex = selectionIndex.value;
+          select(model.value[selectionIndex.value], false);
+          selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
+        } else if (e.key === 'Backspace' && !search.value) {
+          selectionIndex.value = length - 1;
         }
-        const originalSelectionIndex = selectionIndex.value;
-        select(model.value[selectionIndex.value], false);
-        selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
       }
       if (!props.multiple) return;
       if (e.key === 'ArrowLeft') {
@@ -222,7 +220,7 @@ export const VAutocomplete = genericComponent()({
       listHasFocus.value = false;
     }
     function onUpdateModelValue(v) {
-      if (v == null || v === '' && !props.multiple) model.value = [];
+      if (v == null || v === '' && !props.multiple && !hasSelectionSlot.value) model.value = [];
     }
     const isSelecting = shallowRef(false);