vuetify 3.6.0-alpha.2 → 3.6.0

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

@@ -710,6 +710,7 @@ declare const VCombobox: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: vue.Ref<boolean>;
@@ -721,6 +722,7 @@ declare const VCombobox: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
             "v-slot:default"?: false | ((arg: {
@@ -729,6 +731,7 @@ declare const VCombobox: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
@@ -785,6 +788,7 @@ declare const VCombobox: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: vue.Ref<boolean>;
@@ -796,6 +800,7 @@ declare const VCombobox: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
@@ -805,6 +810,7 @@ declare const VCombobox: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -1284,6 +1290,7 @@ declare const VCombobox: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: vue.Ref<boolean>;
@@ -1295,6 +1302,7 @@ declare const VCombobox: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
             "v-slot:default"?: false | ((arg: {
@@ -1303,6 +1311,7 @@ declare const VCombobox: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
@@ -1359,6 +1368,7 @@ declare const VCombobox: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: vue.Ref<boolean>;
@@ -1370,6 +1380,7 @@ declare const VCombobox: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
@@ -1379,6 +1390,7 @@ declare const VCombobox: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -1972,6 +1984,7 @@ declare const VCombobox: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: vue.Ref<boolean>;
@@ -1983,6 +1996,7 @@ declare const VCombobox: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
             "v-slot:default"?: false | ((arg: {
@@ -1991,6 +2005,7 @@ declare const VCombobox: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
@@ -2047,6 +2062,7 @@ declare const VCombobox: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: vue.Ref<boolean>;
@@ -2058,6 +2074,7 @@ declare const VCombobox: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
@@ -2067,6 +2084,7 @@ declare const VCombobox: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -2595,6 +2613,7 @@ declare const VCombobox: {
             activator?: ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | ((arg: {
             isActive: vue.Ref<boolean>;
@@ -2606,6 +2625,7 @@ declare const VCombobox: {
             activator?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | undefined;
         "v-slot:default"?: false | ((arg: {
@@ -2614,6 +2634,7 @@ declare const VCombobox: {
         "v-slot:activator"?: false | ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: vue.Ref<any>;
         }) => vue.VNodeChild) | undefined;
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
@@ -2670,6 +2691,7 @@ declare const VCombobox: {
             activator?: ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | ((arg: {
             isActive: vue.Ref<boolean>;
@@ -2681,6 +2703,7 @@ declare const VCombobox: {
             activator?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | undefined;
     } & {
@@ -2690,6 +2713,7 @@ declare const VCombobox: {
         "v-slot:activator"?: false | ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: vue.Ref<any>;
         }) => vue.VNodeChild) | undefined;
     } & {
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -3432,6 +3456,7 @@ declare const VCombobox: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: vue.Ref<boolean>;
@@ -3443,6 +3468,7 @@ declare const VCombobox: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
             "v-slot:default"?: false | ((arg: {
@@ -3451,6 +3477,7 @@ declare const VCombobox: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
@@ -3507,6 +3534,7 @@ declare const VCombobox: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: vue.Ref<boolean>;
@@ -3518,6 +3546,7 @@ declare const VCombobox: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
@@ -3527,6 +3556,7 @@ declare const VCombobox: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -4119,6 +4149,7 @@ declare const VCombobox: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: vue.Ref<boolean>;
@@ -4130,6 +4161,7 @@ declare const VCombobox: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
             "v-slot:default"?: false | ((arg: {
@@ -4138,6 +4170,7 @@ declare const VCombobox: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
@@ -4194,6 +4227,7 @@ declare const VCombobox: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: vue.Ref<boolean>;
@@ -4205,6 +4239,7 @@ declare const VCombobox: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
@@ -4214,6 +4249,7 @@ declare const VCombobox: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;

package/lib/components/VCounter/VCounter.sass

@@ -1,8 +1,10 @@
 @use '../../styles/settings'
+@use '../../styles/tools'
 @use './variables' as *
 
-.v-counter
-  color: $counter-color
-  flex: $counter-flex
-  font-size: $counter-font-size
-  transition-duration: $counter-transition-duration
+@include tools.layer('components')
+  .v-counter
+    color: $counter-color
+    flex: $counter-flex
+    font-size: $counter-font-size
+    transition-duration: $counter-transition-duration

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

@@ -153,6 +153,7 @@ type DataTableHeader<T = Record<string, any>> = {
     sort?: DataTableCompareFunction;
     sortRaw?: DataTableCompareFunction;
     filter?: FilterFunction;
+    mobile?: boolean;
     children?: DataTableHeader<T>[];
 };
 type InternalDataTableHeader = Omit<DataTableHeader, 'key' | 'value' | 'children'> & {
@@ -161,6 +162,7 @@ type InternalDataTableHeader = Omit<DataTableHeader, 'key' | 'value' | 'children
     sortable: boolean;
     fixedOffset?: number;
     lastFixed?: boolean;
+    nowrap?: boolean;
     colspan?: number;
     rowspan?: number;
     children?: InternalDataTableHeader[];

package/lib/components/VDataTable/VDataTable.css

@@ -106,7 +106,7 @@
 }
 
 .v-data-table--loading .v-data-table__td {
-  opacity: 0.3;
+  opacity: var(--v-disabled-opacity);
 }
 
 .v-data-table-group-header-row__column {
@@ -145,4 +145,39 @@
 .v-data-table-rows-loading,
 .v-data-table-rows-no-data {
   text-align: center;
+}
+
+.v-data-table__tr--mobile > .v-data-table__td--expanded-row {
+  grid-template-columns: 0;
+  justify-content: center;
+}
+.v-data-table__tr--mobile > .v-data-table__td--select-row {
+  grid-template-columns: 0;
+  justify-content: end;
+}
+.v-data-table__tr--mobile > td {
+  align-items: center;
+  column-gap: 4px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  min-height: var(--v-table-row-height);
+}
+.v-data-table__tr--mobile > td:not(:last-child) {
+  border-bottom: 0 !important;
+}
+
+.v-data-table__td-title {
+  font-weight: bold;
+  text-align: left;
+}
+
+.v-data-table__td-value {
+  text-align: right;
+}
+
+.v-data-table__td-sort-icon {
+  color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+}
+.v-data-table__td-sort-icon-active {
+  color: rgba(var(--v-theme-on-surface));
 }

package/lib/components/VDataTable/VDataTable.sass

@@ -3,125 +3,159 @@
 @use '../../components/VTable/variables' as *
 @use './variables' as *
 
-.v-data-table
-  width: 100%
+@include tools.layer('components')
+  .v-data-table
+    width: 100%
 
-.v-data-table__table
-  width: 100%
-  border-collapse: separate
-  border-spacing: 0
+  .v-data-table__table
+    width: 100%
+    border-collapse: separate
+    border-spacing: 0
 
-.v-data-table__tr
-  &--focus
-    border: 1px dotted black
+  .v-data-table__tr
+    &--focus
+      border: 1px dotted black
 
-  &--clickable
-    cursor: pointer
+    &--clickable
+      cursor: pointer
 
-.v-data-table
-  .v-table__wrapper
-    > table
-      > thead,
-        tbody
-        > tr
-          > td,
-            th
+  .v-data-table
+    .v-table__wrapper
+      > table
+        > thead,
+          tbody
+          > tr
+            > td,
+              th
 
-            &.v-data-table-column--align-end
-              text-align: end
+              &.v-data-table-column--align-end
+                text-align: end
 
-              .v-data-table-header__content
-                flex-direction: row-reverse
+                .v-data-table-header__content
+                  flex-direction: row-reverse
 
-            &.v-data-table-column--align-center
-              text-align: center
+              &.v-data-table-column--align-center
+                text-align: center
 
-              .v-data-table-header__content
-                justify-content: center
+                .v-data-table-header__content
+                  justify-content: center
 
-            &.v-data-table-column--no-padding
-              padding: 0 8px
+              &.v-data-table-column--no-padding
+                padding: 0 8px
 
-            &.v-data-table-column--nowrap
-              text-overflow: ellipsis
-              text-wrap: nowrap
-              overflow: hidden
+              &.v-data-table-column--nowrap
+                text-overflow: ellipsis
+                text-wrap: nowrap
+                overflow: hidden
 
-              & .v-data-table-header__content
-                display: contents
+                & .v-data-table-header__content
+                  display: contents
 
-          > th
-            align-items: center
+            > th
+              align-items: center
 
-          > th.v-data-table__th--fixed
+            > th.v-data-table__th--fixed
               position: sticky
 
-          > th.v-data-table__th--sortable:hover
-              cursor: pointer
-              color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity))
+            > th.v-data-table__th--sortable:hover
+                cursor: pointer
+                color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity))
 
-          > th:not(.v-data-table__th--sorted)
-              .v-data-table-header__sort-icon
-                opacity: 0
-
-              &:hover
+            > th:not(.v-data-table__th--sorted)
                 .v-data-table-header__sort-icon
-                  opacity: 0.5
-
-.v-data-table-column--fixed,
-.v-data-table__th--sticky
-  background: $table-background
-  position: sticky !important
-  left: 0
-  z-index: 1
-
-.v-data-table-column--last-fixed
-  border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity))
-
-.v-data-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th.v-data-table-column--fixed
-  z-index: 2
+                  opacity: 0
+
+                &:hover
+                  .v-data-table-header__sort-icon
+                    opacity: 0.5
+
+  .v-data-table-column--fixed,
+  .v-data-table__th--sticky
+    background: $table-background
+    position: sticky !important
+    left: 0
+    z-index: 1
+
+  .v-data-table-column--last-fixed
+    border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity))
+
+  .v-data-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th.v-data-table-column--fixed
+    z-index: 2
+
+  .v-data-table-group-header-row
+    td
+      background: rgba(var(--v-theme-surface))
+      color: rgba(var(--v-theme-on-surface))
+
+      > span
+        padding-left: 5px
+
+  .v-data-table--loading
+    .v-data-table__td
+      opacity: $data-table-loading-opacity
+
+  .v-data-table-group-header-row__column
+    padding-left: calc(var(--v-data-table-group-header-row-depth) * 16px) !important
+
+  .v-data-table-header__content
+    display: flex
+    align-items: center
+
+  .v-data-table-header__sort-badge
+    display: inline-flex
+    justify-content: center
+    align-items: center
+    font-size: 0.875rem
+    padding: 4px
+    border-radius: 50%
+    background: $data-table-header-sort-badge-color
+    min-width: $data-table-header-sort-badge-size
+    min-height: $data-table-header-sort-badge-size
+    width: $data-table-header-sort-badge-size
+    height: $data-table-header-sort-badge-size
+
+  .v-data-table-progress
+    > th
+      border: none !important
+      height: auto !important
+      padding: 0 !important
+
+  .v-data-table-progress__loader
+    position: relative
+
+  .v-data-table-rows-loading,
+  .v-data-table-rows-no-data
+    text-align: center
+
+  .v-data-table__tr--mobile
+    > .v-data-table__td--expanded-row
+      grid-template-columns: 0
+      justify-content: center
+
+    > .v-data-table__td--select-row
+      grid-template-columns: 0
+      justify-content: end
+
+    > td
+      align-items: center
+      column-gap: 4px
+      display: grid
+      grid-template-columns: repeat(2, 1fr)
+      min-height: var(--v-table-row-height)
+
+      &:not(:last-child)
+        border-bottom: 0 !important
+
+  .v-data-table__td-title
+    font-weight: bold
+    text-align: left
+
+  .v-data-table__td-value
+    text-align: right
 
-.v-data-table-group-header-row
-  td
-    background: rgba(var(--v-theme-surface))
-    color: rgba(var(--v-theme-on-surface))
-
-    > span
-      padding-left: 5px
-
-.v-data-table--loading
   .v-data-table__td
-    opacity: 0.3
-
-.v-data-table-group-header-row__column
-  padding-left: calc(var(--v-data-table-group-header-row-depth) * 16px) !important
-
-.v-data-table-header__content
-  display: flex
-  align-items: center
-
-.v-data-table-header__sort-badge
-  display: inline-flex
-  justify-content: center
-  align-items: center
-  font-size: 0.875rem
-  padding: 4px
-  border-radius: 50%
-  background: $data-table-header-sort-badge-color
-  min-width: $data-table-header-sort-badge-size
-  min-height: $data-table-header-sort-badge-size
-  width: $data-table-header-sort-badge-size
-  height: $data-table-header-sort-badge-size
-
-.v-data-table-progress
-  > th
-    border: none !important
-    height: auto !important
-    padding: 0 !important
-
-.v-data-table-progress__loader
-  position: relative
-
-.v-data-table-rows-loading,
-.v-data-table-rows-no-data
-  text-align: center
+    &-sort-icon
+      color: $data-table-header-mobile-chip-icon-color
+
+      &-active
+        color: $data-table-header-mobile-chip-icon-color-active

package/lib/components/VDataTable/VDataTableFooter.css

@@ -1,14 +1,13 @@
 .v-data-table-footer {
-  display: flex;
   align-items: center;
+  display: flex;
   flex-wrap: wrap;
-  padding: 4px;
   justify-content: flex-end;
+  padding: 8px 4px;
 }
-
 .v-data-table-footer__items-per-page {
-  display: flex;
   align-items: center;
+  display: flex;
   justify-content: center;
 }
 .v-data-table-footer__items-per-page > span {
@@ -17,20 +16,17 @@
 .v-data-table-footer__items-per-page > .v-select {
   width: 90px;
 }
-
 .v-data-table-footer__info {
   display: flex;
   justify-content: flex-end;
   min-width: 116px;
   padding: 0 16px;
 }
-
-.v-data-table-footer__pagination {
-  display: flex;
+.v-data-table-footer__paginationz {
   align-items: center;
+  display: flex;
   margin-inline-start: 16px;
 }
-
 .v-data-table-footer__page {
   padding: 0 8px;
 }