vuetify 3.6.0-alpha.2 → 3.6.0

package/lib/components/VCard/VCard.sass

@@ -2,198 +2,199 @@
 @use './variables' as *
 @use './mixins' as *
 
-.v-card
-  display: block
-  overflow: hidden
-  overflow-wrap: $card-overflow-wrap
-  position: relative
-  padding: $card-padding
-  text-decoration: none
-  transition-duration: $card-transition-duration
-  transition-property: $card-transition-property
-  transition-timing-function: $card-transition-timing-function
-  z-index: 0
-
-  @include tools.border($card-border...)
-  @include tools.position($card-positions)
-  @include tools.rounded($card-border-radius)
-  @include tools.states('.v-card__overlay')
-  @include tools.variant($card-variants...)
-
-  &--disabled
-    pointer-events: none
-    user-select: none
-
-    >:not(.v-card__loader)
-      opacity: $card-disabled-opacity
-
-  &--flat
-    box-shadow: none
-
-  &--hover
-    cursor: pointer
-
-    &::before,
-    &::after
-      border-radius: inherit
-      bottom: 0
-      content: ''
-      display: block
-      left: 0
+@include tools.layer('components')
+  .v-card
+    display: block
+    overflow: hidden
+    overflow-wrap: $card-overflow-wrap
+    position: relative
+    padding: $card-padding
+    text-decoration: none
+    transition-duration: $card-transition-duration
+    transition-property: $card-transition-property
+    transition-timing-function: $card-transition-timing-function
+    z-index: 0
+
+    @include tools.border($card-border...)
+    @include tools.position($card-positions)
+    @include tools.rounded($card-border-radius)
+    @include tools.states('.v-card__overlay')
+    @include tools.variant($card-variants...)
+
+    &--disabled
       pointer-events: none
-      position: absolute
-      right: 0
-      top: 0
-      transition: inherit
+      user-select: none
 
-    &::before
-      opacity: 1
-      z-index: -1
+      >:not(.v-card__loader)
+        opacity: $card-disabled-opacity
 
-      @include tools.elevation($card-elevation)
+    &--flat
+      box-shadow: none
 
-    &::after
-      z-index: 1
-      opacity: 0
+    &--hover
+      cursor: pointer
 
-      @include tools.elevation($card-hover-elevation)
+      &::before,
+      &::after
+        border-radius: inherit
+        bottom: 0
+        content: ''
+        display: block
+        left: 0
+        pointer-events: none
+        position: absolute
+        right: 0
+        top: 0
+        transition: inherit
 
-    &:hover::after
-      opacity: 1
+      &::before
+        opacity: 1
+        z-index: -1
 
-    &:hover::before
-      opacity: 0
+        @include tools.elevation($card-elevation)
 
-    &:hover
-      @include tools.elevation($card-hover-elevation)
+      &::after
+        z-index: 1
+        opacity: 0
 
-  &--link
-    cursor: pointer
+        @include tools.elevation($card-hover-elevation)
 
-.v-card-actions
-  align-items: center
-  display: flex
-  flex: $card-actions-flex
-  min-height: $card-actions-min-height
-  padding: $card-actions-padding
+      &:hover::after
+        opacity: 1
 
-.v-card-item
-  align-items: $card-item-align-items
-  display: grid
-  flex: $card-header-flex
-  grid-template-areas: "prepend content append"
-  grid-template-columns: max-content auto max-content
-  padding: $card-item-padding
+      &:hover::before
+        opacity: 0
 
-  + .v-card-text
-    padding-top: 0
+      &:hover
+        @include tools.elevation($card-hover-elevation)
 
-  &__prepend,
-  &__append
+    &--link
+      cursor: pointer
+
+  .v-card-actions
     align-items: center
     display: flex
-
-  &__prepend
-    grid-area: prepend
-    padding-inline-end: $card-prepend-padding-inline-end
-
-  &__append
-    grid-area: append
-    padding-inline-start: $card-append-padding-inline-start
-
-.v-card-item__content
-  align-self: center
-  grid-area: content
-  overflow: hidden
-
-.v-card-title
-  display: block
-  flex: $card-title-flex
-  font-size: $card-title-font-size
-  font-weight: $card-title-font-weight
-  hyphens: $card-title-hyphens
-  letter-spacing: $card-title-letter-spacing
-  min-width: 0
-  overflow-wrap: $card-title-overflow-wrap
-  overflow: $card-title-overflow
-  padding: $card-title-padding
-  text-overflow: $card-title-text-overflow
-  text-transform: $card-title-text-transform
-  white-space: $card-title-white-space
-  word-break: $card-title-word-break
-  word-wrap: $card-title-word-wrap
-
-  @include card-line-height-densities($card-title-densities)
-
-  .v-card-item &
-    padding: $card-title-header-padding
-
-  + .v-card-text,
-  + .v-card-actions
-    padding-top: 0
-
-.v-card-subtitle
-  display: block
-  flex: $card-subtitle-flex
-  font-size: $card-subtitle-font-size
-  font-weight: $card-subtitle-font-weight
-  letter-spacing: $card-subtitle-letter-spacing
-  opacity: $card-subtitle-opacity
-  overflow: $card-subtitle-overflow
-  padding: $card-subtitle-padding
-  text-overflow: $card-subtitle-text-overflow
-  text-transform: $card-subtitle-text-transform
-  white-space: $card-subtitle-white-space
-
-  @include card-line-height-densities($card-subtitle-density-line-height)
-
-  .v-card-item &
-    padding: $card-subtitle-header-padding
-
-.v-card-text
-  flex: $card-text-flex
-  font-size: $card-text-font-size
-  font-weight: $card-text-font-weight
-  letter-spacing: $card-text-letter-spacing
-  opacity: $card-text-opacity
-  padding: $card-text-padding
-  text-transform: $card-text-text-transform
-
-  @include card-line-height-densities($card-text-density-line-height)
-
-.v-card__image
-  display: flex
-  height: 100%
-  flex: $card-img-flex
-  left: 0
-  overflow: hidden
-  position: absolute
-  top: 0
-  width: 100%
-  z-index: -1
-
-.v-card__content
-  border-radius: inherit
-  overflow: hidden
-  position: relative
-
-.v-card__loader
-  bottom: $card-loader-bottom
-  top: $card-loader-top
-  left: 0
-  position: absolute
-  right: 0
-  width: 100%
-  z-index: 1
-
-.v-card__overlay
-  background-color: currentColor
-  border-radius: inherit
-  position: absolute
-  top: 0
-  right: 0
-  bottom: 0
-  left: 0
-  pointer-events: none
-  opacity: 0
-  transition: opacity 0.2s ease-in-out
+    flex: $card-actions-flex
+    min-height: $card-actions-min-height
+    padding: $card-actions-padding
+
+  .v-card-item
+    align-items: $card-item-align-items
+    display: grid
+    flex: $card-header-flex
+    grid-template-areas: "prepend content append"
+    grid-template-columns: max-content auto max-content
+    padding: $card-item-padding
+
+    + .v-card-text
+      padding-top: 0
+
+    &__prepend,
+    &__append
+      align-items: center
+      display: flex
+
+    &__prepend
+      grid-area: prepend
+      padding-inline-end: $card-prepend-padding-inline-end
+
+    &__append
+      grid-area: append
+      padding-inline-start: $card-append-padding-inline-start
+
+  .v-card-item__content
+    align-self: center
+    grid-area: content
+    overflow: hidden
+
+  .v-card-title
+    display: block
+    flex: $card-title-flex
+    font-size: $card-title-font-size
+    font-weight: $card-title-font-weight
+    hyphens: $card-title-hyphens
+    letter-spacing: $card-title-letter-spacing
+    min-width: 0
+    overflow-wrap: $card-title-overflow-wrap
+    overflow: $card-title-overflow
+    padding: $card-title-padding
+    text-overflow: $card-title-text-overflow
+    text-transform: $card-title-text-transform
+    white-space: $card-title-white-space
+    word-break: $card-title-word-break
+    word-wrap: $card-title-word-wrap
+
+    @include card-line-height-densities($card-title-densities)
+
+    .v-card-item &
+      padding: $card-title-header-padding
+
+    + .v-card-text,
+    + .v-card-actions
+      padding-top: 0
+
+  .v-card-subtitle
+    display: block
+    flex: $card-subtitle-flex
+    font-size: $card-subtitle-font-size
+    font-weight: $card-subtitle-font-weight
+    letter-spacing: $card-subtitle-letter-spacing
+    opacity: $card-subtitle-opacity
+    overflow: $card-subtitle-overflow
+    padding: $card-subtitle-padding
+    text-overflow: $card-subtitle-text-overflow
+    text-transform: $card-subtitle-text-transform
+    white-space: $card-subtitle-white-space
+
+    @include card-line-height-densities($card-subtitle-density-line-height)
+
+    .v-card-item &
+      padding: $card-subtitle-header-padding
+
+  .v-card-text
+    flex: $card-text-flex
+    font-size: $card-text-font-size
+    font-weight: $card-text-font-weight
+    letter-spacing: $card-text-letter-spacing
+    opacity: $card-text-opacity
+    padding: $card-text-padding
+    text-transform: $card-text-text-transform
+
+    @include card-line-height-densities($card-text-density-line-height)
+
+  .v-card__image
+    display: flex
+    height: 100%
+    flex: $card-img-flex
+    left: 0
+    overflow: hidden
+    position: absolute
+    top: 0
+    width: 100%
+    z-index: -1
+
+  .v-card__content
+    border-radius: inherit
+    overflow: hidden
+    position: relative
+
+  .v-card__loader
+    bottom: $card-loader-bottom
+    top: $card-loader-top
+    left: 0
+    position: absolute
+    right: 0
+    width: 100%
+    z-index: 1
+
+  .v-card__overlay
+    background-color: currentColor
+    border-radius: inherit
+    position: absolute
+    top: 0
+    right: 0
+    bottom: 0
+    left: 0
+    pointer-events: none
+    opacity: 0
+    transition: opacity 0.2s ease-in-out

package/lib/components/VCarousel/VCarousel.sass

@@ -1,67 +1,68 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-.v-carousel
-  overflow: hidden
-  position: relative
-  width: 100%
-
-  &__controls
-    align-items: center
-    bottom: 0
-    display: flex
-    height: $carousel-controls-size
-    justify-content: center
-    list-style-type: none
-    position: absolute
+@include tools.layer('components')
+  .v-carousel
+    overflow: hidden
+    position: relative
     width: 100%
-    z-index: 1
 
-    @include tools.theme($carousel-controls-theme...)
+    &__controls
+      align-items: center
+      bottom: 0
+      display: flex
+      height: $carousel-controls-size
+      justify-content: center
+      list-style-type: none
+      position: absolute
+      width: 100%
+      z-index: 1
 
-    > .v-item-group
-      flex: 0 1 auto
+      @include tools.theme($carousel-controls-theme...)
 
-    &__item
-      margin: $carousel-dot-margin
+      > .v-item-group
+        flex: 0 1 auto
 
-      .v-icon
-        opacity: $carousel-dot-inactive-opacity
+      &__item
+        margin: $carousel-dot-margin
 
-      &--active
         .v-icon
-          opacity: $carousel-dot-active-opacity
-          vertical-align: middle
+          opacity: $carousel-dot-inactive-opacity
 
-      &:hover
-        background: none
+        &--active
+          .v-icon
+            opacity: $carousel-dot-active-opacity
+            vertical-align: middle
 
-        .v-icon
-          opacity: $carousel-dot-hover-opacity
+        &:hover
+          background: none
 
-// Element
-.v-carousel__progress
-  margin: 0
-  position: absolute
-  bottom: 0
-  left: 0
-  right: 0
+          .v-icon
+            opacity: $carousel-dot-hover-opacity
 
-.v-carousel-item
-  display: block
-  height: inherit
-  text-decoration: none
+  // Element
+  .v-carousel__progress
+    margin: 0
+    position: absolute
+    bottom: 0
+    left: 0
+    right: 0
 
-  & > .v-img
+  .v-carousel-item
+    display: block
     height: inherit
+    text-decoration: none
+
+    & > .v-img
+      height: inherit
 
-// Modifier
-.v-carousel--hide-delimiter-background
-  .v-carousel__controls
-    background: transparent
+  // Modifier
+  .v-carousel--hide-delimiter-background
+    .v-carousel__controls
+      background: transparent
 
-.v-carousel--vertical-delimiters
-  .v-carousel__controls
-    flex-direction: column
-    height: 100% !important
-    width: $carousel-controls-size
+  .v-carousel--vertical-delimiters
+    .v-carousel__controls
+      flex-direction: column
+      height: 100% !important
+      width: $carousel-controls-size

package/lib/components/VCarousel/VCarouselItem.mjs

@@ -20,7 +20,7 @@ export const VCarouselItem = genericComponent()({
       const imgProps = VImg.filterProps(props);
       const windowItemProps = VWindowItem.filterProps(props);
       return _createVNode(VWindowItem, _mergeProps({
-        "class": "v-carousel-item"
+        "class": ['v-carousel-item', props.class]
       }, windowItemProps), {
         default: () => [_createVNode(VImg, _mergeProps(attrs, imgProps), slots)]
       });

package/lib/components/VCarousel/VCarouselItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VCarouselItem.mjs","names":["makeVImgProps","VImg","makeVWindowItemProps","VWindowItem","genericComponent","propsFactory","useRender","makeVCarouselItemProps","VCarouselItem","name","inheritAttrs","props","setup","_ref","slots","attrs","imgProps","filterProps","windowItemProps","_createVNode","_mergeProps","default"],"sources":["../../../src/components/VCarousel/VCarouselItem.tsx"],"sourcesContent":["// Components\nimport { makeVImgProps, VImg } from '@/components/VImg/VImg'\nimport { makeVWindowItemProps, VWindowItem } from '@/components/VWindow/VWindowItem'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { VImgSlots } from '@/components/VImg/VImg'\n\nexport const makeVCarouselItemProps = propsFactory({\n  ...makeVImgProps(),\n  ...makeVWindowItemProps(),\n}, 'VCarouselItem')\n\nexport const VCarouselItem = genericComponent<VImgSlots>()({\n  name: 'VCarouselItem',\n\n  inheritAttrs: false,\n\n  props: makeVCarouselItemProps(),\n\n  setup (props, { slots, attrs }) {\n    useRender(() => {\n      const imgProps = VImg.filterProps(props)\n      const windowItemProps = VWindowItem.filterProps(props)\n\n      return (\n        <VWindowItem\n          class=\"v-carousel-item\"\n          { ...windowItemProps }\n        >\n          <VImg\n            { ...attrs }\n            { ...imgProps }\n            v-slots={ slots }\n          />\n        </VWindowItem>\n      )\n    })\n  },\n})\n\nexport type VCarouselItem = InstanceType<typeof VCarouselItem>\n"],"mappings":";AAAA;AAAA,SACSA,aAAa,EAAEC,IAAI;AAAA,SACnBC,oBAAoB,EAAEC,WAAW,sCAE1C;AAAA,SACSC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,gCAElD;AAGA,OAAO,MAAMC,sBAAsB,GAAGF,YAAY,CAAC;EACjD,GAAGL,aAAa,CAAC,CAAC;EAClB,GAAGE,oBAAoB,CAAC;AAC1B,CAAC,EAAE,eAAe,CAAC;AAEnB,OAAO,MAAMM,aAAa,GAAGJ,gBAAgB,CAAY,CAAC,CAAC;EACzDK,IAAI,EAAE,eAAe;EAErBC,YAAY,EAAE,KAAK;EAEnBC,KAAK,EAAEJ,sBAAsB,CAAC,CAAC;EAE/BK,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAoB;IAAA,IAAlB;MAAEC,KAAK;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC5BP,SAAS,CAAC,MAAM;MACd,MAAMU,QAAQ,GAAGf,IAAI,CAACgB,WAAW,CAACN,KAAK,CAAC;MACxC,MAAMO,eAAe,GAAGf,WAAW,CAACc,WAAW,CAACN,KAAK,CAAC;MAEtD,OAAAQ,YAAA,CAAAhB,WAAA,EAAAiB,WAAA;QAAA;MAAA,GAGSF,eAAe;QAAAG,OAAA,EAAAA,CAAA,MAAAF,YAAA,CAAAlB,IAAA,EAAAmB,WAAA,CAGbL,KAAK,EACLC,QAAQ,GACHF,KAAK;MAAA;IAIvB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"VCarouselItem.mjs","names":["makeVImgProps","VImg","makeVWindowItemProps","VWindowItem","genericComponent","propsFactory","useRender","makeVCarouselItemProps","VCarouselItem","name","inheritAttrs","props","setup","_ref","slots","attrs","imgProps","filterProps","windowItemProps","_createVNode","_mergeProps","class","default"],"sources":["../../../src/components/VCarousel/VCarouselItem.tsx"],"sourcesContent":["// Components\nimport { makeVImgProps, VImg } from '@/components/VImg/VImg'\nimport { makeVWindowItemProps, VWindowItem } from '@/components/VWindow/VWindowItem'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { VImgSlots } from '@/components/VImg/VImg'\n\nexport const makeVCarouselItemProps = propsFactory({\n  ...makeVImgProps(),\n  ...makeVWindowItemProps(),\n}, 'VCarouselItem')\n\nexport const VCarouselItem = genericComponent<VImgSlots>()({\n  name: 'VCarouselItem',\n\n  inheritAttrs: false,\n\n  props: makeVCarouselItemProps(),\n\n  setup (props, { slots, attrs }) {\n    useRender(() => {\n      const imgProps = VImg.filterProps(props)\n      const windowItemProps = VWindowItem.filterProps(props)\n\n      return (\n        <VWindowItem\n          class={[\n            'v-carousel-item',\n            props.class,\n          ]}\n          { ...windowItemProps }\n        >\n          <VImg\n            { ...attrs }\n            { ...imgProps }\n            v-slots={ slots }\n          />\n        </VWindowItem>\n      )\n    })\n  },\n})\n\nexport type VCarouselItem = InstanceType<typeof VCarouselItem>\n"],"mappings":";AAAA;AAAA,SACSA,aAAa,EAAEC,IAAI;AAAA,SACnBC,oBAAoB,EAAEC,WAAW,sCAE1C;AAAA,SACSC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,gCAElD;AAGA,OAAO,MAAMC,sBAAsB,GAAGF,YAAY,CAAC;EACjD,GAAGL,aAAa,CAAC,CAAC;EAClB,GAAGE,oBAAoB,CAAC;AAC1B,CAAC,EAAE,eAAe,CAAC;AAEnB,OAAO,MAAMM,aAAa,GAAGJ,gBAAgB,CAAY,CAAC,CAAC;EACzDK,IAAI,EAAE,eAAe;EAErBC,YAAY,EAAE,KAAK;EAEnBC,KAAK,EAAEJ,sBAAsB,CAAC,CAAC;EAE/BK,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAoB;IAAA,IAAlB;MAAEC,KAAK;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC5BP,SAAS,CAAC,MAAM;MACd,MAAMU,QAAQ,GAAGf,IAAI,CAACgB,WAAW,CAACN,KAAK,CAAC;MACxC,MAAMO,eAAe,GAAGf,WAAW,CAACc,WAAW,CAACN,KAAK,CAAC;MAEtD,OAAAQ,YAAA,CAAAhB,WAAA,EAAAiB,WAAA;QAAA,SAEW,CACL,iBAAiB,EACjBT,KAAK,CAACU,KAAK;MACZ,GACIH,eAAe;QAAAI,OAAA,EAAAA,CAAA,MAAAH,YAAA,CAAAlB,IAAA,EAAAmB,WAAA,CAGbL,KAAK,EACLC,QAAQ,GACHF,KAAK;MAAA;IAIvB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC","ignoreList":[]}

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

@@ -63,6 +63,7 @@ interface GroupItem {
     id: number;
     value: Ref<unknown>;
     disabled: Ref<boolean | undefined>;
+    useIndexAsValue?: boolean;
 }
 interface GroupProvide {
     register: (item: GroupItem, cmp: ComponentInternalInstance) => void;

package/lib/components/VCheckbox/VCheckbox.sass

@@ -3,9 +3,10 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-.v-checkbox
-  &.v-input
-    flex: $checkbox-flex
+@include tools.layer('components')
+  .v-checkbox
+    &.v-input
+      flex: $checkbox-flex
 
-  .v-selection-control
-    min-height: var(--v-input-control-height)
+    .v-selection-control
+      min-height: var(--v-input-control-height)

package/lib/components/VChip/VChip.css

@@ -345,7 +345,7 @@
 .v-chip--link {
   cursor: pointer;
 }
-.v-chip--filter {
+.v-chip--link, .v-chip--filter {
   user-select: none;
 }
 .v-chip--label {