@vuetify/nightly 3.7.4-next.2024-11-06 → 3.7.5-dev.2024-12-16

package/lib/components/VTable/VTable.css

@@ -1,141 +1,142 @@
-@layer vuetify.components {
-  .v-table {
-    font-size: 0.875rem;
-    transition-duration: 0.28s;
-    transition-property: box-shadow, opacity, background, height;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  }
-  .v-table {
-    background: rgb(var(--v-theme-surface));
-    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-  }
-  .v-table .v-table-divider {
-    border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
-  }
-  .v-table .v-table__wrapper > table > thead > tr > th {
-    border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
-  }
-  .v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > td,
-  .v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > th {
-    border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
-  }
-  .v-table .v-table__wrapper > table > tfoot > tr > td,
-  .v-table .v-table__wrapper > table > tfoot > tr > th {
-    border-top: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
-  }
-  .v-table.v-table--hover > .v-table__wrapper > table > tbody > tr > td {
-    position: relative;
-  }
-  .v-table.v-table--hover > .v-table__wrapper > table > tbody > tr:hover > td::after {
-    background: rgba(var(--v-border-color), var(--v-hover-opacity));
-    pointer-events: none;
-  }
-  .v-table.v-table--hover > .v-table__wrapper > table > tbody > tr:hover > td::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-  .v-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th {
-    background: rgb(var(--v-theme-surface));
-    box-shadow: inset 0 -1px 0 rgba(var(--v-border-color), var(--v-border-opacity));
-    z-index: 1;
-  }
-  .v-table.v-table--fixed-footer > tfoot > tr > th,
-  .v-table.v-table--fixed-footer > tfoot > tr > td {
-    background: rgb(var(--v-theme-surface));
-    box-shadow: inset 0 1px 0 rgba(var(--v-border-color), var(--v-border-opacity));
-  }
-  .v-table {
-    border-radius: inherit;
-    line-height: 1.5;
-    max-width: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-  .v-table > .v-table__wrapper > table {
-    width: 100%;
-    border-spacing: 0;
-  }
-  .v-table > .v-table__wrapper > table > tbody > tr > td,
-  .v-table > .v-table__wrapper > table > tbody > tr > th,
-  .v-table > .v-table__wrapper > table > thead > tr > td,
-  .v-table > .v-table__wrapper > table > thead > tr > th,
-  .v-table > .v-table__wrapper > table > tfoot > tr > td,
-  .v-table > .v-table__wrapper > table > tfoot > tr > th {
-    padding: 0 16px;
-    transition-duration: 0.28s;
-    transition-property: box-shadow, opacity, background, height;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  }
-  .v-table > .v-table__wrapper > table > tbody > tr > td,
-  .v-table > .v-table__wrapper > table > thead > tr > td,
-  .v-table > .v-table__wrapper > table > tfoot > tr > td {
-    height: var(--v-table-row-height);
-  }
-  .v-table > .v-table__wrapper > table > tbody > tr > th,
-  .v-table > .v-table__wrapper > table > thead > tr > th,
-  .v-table > .v-table__wrapper > table > tfoot > tr > th {
-    height: var(--v-table-header-height);
-    font-weight: 500;
-    user-select: none;
-    text-align: start;
-  }
-  .v-table--density-default {
-    --v-table-header-height: 56px;
-    --v-table-row-height: 52px;
-  }
-  .v-table--density-comfortable {
-    --v-table-header-height: 48px;
-    --v-table-row-height: 44px;
-  }
-  .v-table--density-compact {
-    --v-table-header-height: 40px;
-    --v-table-row-height: 36px;
-  }
-  .v-table__wrapper {
-    border-radius: inherit;
-    overflow: auto;
-    flex: 1 1 auto;
-  }
-  .v-table--has-top > .v-table__wrapper > table > tbody > tr:first-child:hover > td:first-child {
-    border-top-left-radius: 0;
-  }
-  .v-table--has-top > .v-table__wrapper > table > tbody > tr:first-child:hover > td:last-child {
-    border-top-right-radius: 0;
-  }
-  .v-table--has-bottom > .v-table__wrapper > table > tbody > tr:last-child:hover > td:first-child {
-    border-bottom-left-radius: 0;
-  }
-  .v-table--has-bottom > .v-table__wrapper > table > tbody > tr:last-child:hover > td:last-child {
-    border-bottom-right-radius: 0;
-  }
-  .v-table--fixed-height > .v-table__wrapper {
-    overflow-y: auto;
-  }
-  .v-table--fixed-header > .v-table__wrapper > table > thead {
-    position: sticky;
-    top: 0;
-    z-index: 2;
-  }
-}
-@layer vuetify.overrides {
-  .v-table--fixed-header > .v-table__wrapper > table > thead > tr > th {
-    border-bottom: 0px;
-  }
-}
-@layer vuetify.components {
-  .v-table--fixed-footer > .v-table__wrapper > table > tfoot > tr {
-    position: sticky;
-    bottom: 0;
-    z-index: 1;
-  }
-}
-@layer vuetify.overrides {
-  .v-table--fixed-footer > .v-table__wrapper > table > tfoot > tr > td,
-  .v-table--fixed-footer > .v-table__wrapper > table > tfoot > tr > th {
-    border-top: 0px;
-  }
+.v-table {
+  font-size: 0.875rem;
+  transition-duration: 0.28s;
+  transition-property: box-shadow, opacity, background, height;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+.v-table {
+  background: rgb(var(--v-theme-surface));
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
+.v-table .v-table-divider {
+  border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+.v-table .v-table__wrapper > table > thead > tr > th {
+  border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+.v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > td,
+.v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > th {
+  border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+.v-table .v-table__wrapper > table > tfoot > tr > td,
+.v-table .v-table__wrapper > table > tfoot > tr > th {
+  border-top: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+.v-table.v-table--hover > .v-table__wrapper > table > tbody > tr > td {
+  position: relative;
+}
+.v-table.v-table--hover > .v-table__wrapper > table > tbody > tr:hover > td::after {
+  background: rgba(var(--v-border-color), var(--v-hover-opacity));
+  pointer-events: none;
+}
+.v-table.v-table--hover > .v-table__wrapper > table > tbody > tr:hover > td::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.v-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th {
+  background: rgb(var(--v-theme-surface));
+  box-shadow: inset 0 -1px 0 rgba(var(--v-border-color), var(--v-border-opacity));
+  z-index: 1;
+}
+.v-table.v-table--fixed-footer > tfoot > tr > th,
+.v-table.v-table--fixed-footer > tfoot > tr > td {
+  background: rgb(var(--v-theme-surface));
+  box-shadow: inset 0 1px 0 rgba(var(--v-border-color), var(--v-border-opacity));
+}
+
+.v-table {
+  border-radius: inherit;
+  line-height: 1.5;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.v-table > .v-table__wrapper > table {
+  width: 100%;
+  border-spacing: 0;
+}
+.v-table > .v-table__wrapper > table > tbody > tr > td,
+.v-table > .v-table__wrapper > table > tbody > tr > th,
+.v-table > .v-table__wrapper > table > thead > tr > td,
+.v-table > .v-table__wrapper > table > thead > tr > th,
+.v-table > .v-table__wrapper > table > tfoot > tr > td,
+.v-table > .v-table__wrapper > table > tfoot > tr > th {
+  padding: 0 16px;
+  transition-duration: 0.28s;
+  transition-property: box-shadow, opacity, background, height;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+.v-table > .v-table__wrapper > table > tbody > tr > td,
+.v-table > .v-table__wrapper > table > thead > tr > td,
+.v-table > .v-table__wrapper > table > tfoot > tr > td {
+  height: var(--v-table-row-height);
+}
+.v-table > .v-table__wrapper > table > tbody > tr > th,
+.v-table > .v-table__wrapper > table > thead > tr > th,
+.v-table > .v-table__wrapper > table > tfoot > tr > th {
+  height: var(--v-table-header-height);
+  font-weight: 500;
+  user-select: none;
+  text-align: start;
+}
+.v-table--density-default {
+  --v-table-header-height: 56px;
+  --v-table-row-height: 52px;
+}
+
+.v-table--density-comfortable {
+  --v-table-header-height: 48px;
+  --v-table-row-height: 44px;
+}
+
+.v-table--density-compact {
+  --v-table-header-height: 40px;
+  --v-table-row-height: 36px;
+}
+
+.v-table__wrapper {
+  border-radius: inherit;
+  overflow: auto;
+  flex: 1 1 auto;
+}
+
+.v-table--has-top > .v-table__wrapper > table > tbody > tr:first-child:hover > td:first-child {
+  border-top-left-radius: 0;
+}
+.v-table--has-top > .v-table__wrapper > table > tbody > tr:first-child:hover > td:last-child {
+  border-top-right-radius: 0;
+}
+
+.v-table--has-bottom > .v-table__wrapper > table > tbody > tr:last-child:hover > td:first-child {
+  border-bottom-left-radius: 0;
+}
+.v-table--has-bottom > .v-table__wrapper > table > tbody > tr:last-child:hover > td:last-child {
+  border-bottom-right-radius: 0;
+}
+
+.v-table--fixed-height > .v-table__wrapper {
+  overflow-y: auto;
+}
+
+.v-table--fixed-header > .v-table__wrapper > table > thead {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th {
+  border-bottom: 0px !important;
+}
+
+.v-table--fixed-footer > .v-table__wrapper > table > tfoot > tr {
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+}
+.v-table--fixed-footer > .v-table__wrapper > table > tfoot > tr > td,
+.v-table--fixed-footer > .v-table__wrapper > table > tfoot > tr > th {
+  border-top: 0px !important;
 }

package/lib/components/VTable/VTable.sass

@@ -154,8 +154,7 @@
           z-index: 2
           > tr
             > th
-              @include tools.layer('overrides')
-                border-bottom: 0px
+              border-bottom: 0px !important
 
   .v-table--fixed-footer
     > .v-table__wrapper
@@ -167,5 +166,4 @@
             z-index: 1
             > td,
             > th
-              @include tools.layer('overrides')
-                border-top: 0px
+                border-top: 0px !important

package/lib/components/VTabs/VTab.css

@@ -1,31 +1,30 @@
-@layer vuetify.components {
-  .v-tab.v-tab.v-btn {
-    height: var(--v-tabs-height);
-    border-radius: 0;
-    min-width: 90px;
-  }
-  .v-slide-group--horizontal .v-tab {
-    max-width: 360px;
-  }
-  .v-slide-group--vertical .v-tab {
-    justify-content: start;
-  }
-  .v-tab__slider {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 2px;
-    width: 100%;
-    background: currentColor;
-    pointer-events: none;
-    opacity: 0;
-  }
-  .v-tab--selected .v-tab__slider {
-    opacity: 1;
-  }
-  .v-slide-group--vertical .v-tab__slider {
-    top: 0;
-    height: 100%;
-    width: 2px;
-  }
+.v-tab.v-tab.v-btn {
+  height: var(--v-tabs-height);
+  border-radius: 0;
+  min-width: 90px;
+}
+.v-slide-group--horizontal .v-tab {
+  max-width: 360px;
+}
+.v-slide-group--vertical .v-tab {
+  justify-content: start;
+}
+
+.v-tab__slider {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  width: 100%;
+  background: currentColor;
+  pointer-events: none;
+  opacity: 0;
+}
+.v-tab--selected .v-tab__slider {
+  opacity: 1;
+}
+.v-slide-group--vertical .v-tab__slider {
+  top: 0;
+  height: 100%;
+  width: 2px;
 }

package/lib/components/VTabs/VTabs.css

@@ -1,61 +1,67 @@
-@layer vuetify.components {
-  .v-tabs {
-    display: flex;
-    height: var(--v-tabs-height);
-  }
-  .v-tabs--density-default {
-    --v-tabs-height: 48px;
-  }
-  .v-tabs--density-default.v-tabs--stacked {
-    --v-tabs-height: 72px;
-  }
-  .v-tabs--density-comfortable {
-    --v-tabs-height: 44px;
-  }
-  .v-tabs--density-comfortable.v-tabs--stacked {
-    --v-tabs-height: 68px;
-  }
-  .v-tabs--density-compact {
-    --v-tabs-height: 36px;
-  }
-  .v-tabs--density-compact.v-tabs--stacked {
-    --v-tabs-height: 60px;
-  }
-  .v-tabs.v-slide-group--vertical {
-    height: auto;
-    flex: none;
-    --v-tabs-height: 48px;
-  }
-  .v-tabs--align-tabs-title:not(.v-slide-group--has-affixes) .v-tab:first-child {
-    margin-inline-start: 42px;
-  }
-  .v-tabs--fixed-tabs .v-slide-group__content > *:last-child,
-  .v-tabs--align-tabs-center .v-slide-group__content > *:last-child {
-    margin-inline-end: auto;
-  }
-  .v-tabs--fixed-tabs .v-slide-group__content > *:first-child,
-  .v-tabs--align-tabs-center .v-slide-group__content > *:first-child {
-    margin-inline-start: auto;
-  }
-  .v-tabs--grow {
-    flex-grow: 1;
-  }
-  .v-tabs--grow .v-tab {
-    flex: 1 0 auto;
-    max-width: none;
-  }
-  .v-tabs--align-tabs-end .v-tab:first-child {
-    margin-inline-start: auto;
-  }
-  .v-tabs--align-tabs-end .v-tab:last-child {
-    margin-inline-end: 0;
-  }
-  @media (max-width: 1279.98px) {
-    .v-tabs.v-slide-group--is-overflowing.v-slide-group--horizontal:not(.v-slide-group--has-affixes) .v-tab:first-child {
-      margin-inline-start: 52px;
-    }
-    .v-tabs.v-slide-group--is-overflowing.v-slide-group--horizontal:not(.v-slide-group--has-affixes) .v-tab:last-child {
-      margin-inline-end: 52px;
-    }
+.v-tabs {
+  display: flex;
+  height: var(--v-tabs-height);
+}
+.v-tabs--density-default {
+  --v-tabs-height: 48px;
+}
+.v-tabs--density-default.v-tabs--stacked {
+  --v-tabs-height: 72px;
+}
+
+.v-tabs--density-comfortable {
+  --v-tabs-height: 44px;
+}
+.v-tabs--density-comfortable.v-tabs--stacked {
+  --v-tabs-height: 68px;
+}
+
+.v-tabs--density-compact {
+  --v-tabs-height: 36px;
+}
+.v-tabs--density-compact.v-tabs--stacked {
+  --v-tabs-height: 60px;
+}
+
+.v-tabs.v-slide-group--vertical {
+  height: auto;
+  flex: none;
+  --v-tabs-height: 48px;
+}
+
+.v-tabs--align-tabs-title:not(.v-slide-group--has-affixes) .v-tab:first-child {
+  margin-inline-start: 42px;
+}
+
+.v-tabs--fixed-tabs .v-slide-group__content > *:last-child,
+.v-tabs--align-tabs-center .v-slide-group__content > *:last-child {
+  margin-inline-end: auto;
+}
+.v-tabs--fixed-tabs .v-slide-group__content > *:first-child,
+.v-tabs--align-tabs-center .v-slide-group__content > *:first-child {
+  margin-inline-start: auto;
+}
+
+.v-tabs--grow {
+  flex-grow: 1;
+}
+.v-tabs--grow .v-tab {
+  flex: 1 0 auto;
+  max-width: none;
+}
+
+.v-tabs--align-tabs-end .v-tab:first-child {
+  margin-inline-start: auto;
+}
+.v-tabs--align-tabs-end .v-tab:last-child {
+  margin-inline-end: 0;
+}
+
+@media (max-width: 1279.98px) {
+  .v-tabs.v-slide-group--is-overflowing.v-slide-group--horizontal:not(.v-slide-group--has-affixes) .v-tab:first-child {
+    margin-inline-start: 52px;
+  }
+  .v-tabs.v-slide-group--is-overflowing.v-slide-group--horizontal:not(.v-slide-group--has-affixes) .v-tab:last-child {
+    margin-inline-end: 52px;
   }
 }

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

@@ -17,22 +17,22 @@ interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions
 }
 
 interface GroupItem {
-    id: number;
+    id: string;
     value: Ref<unknown>;
     disabled: Ref<boolean | undefined>;
     useIndexAsValue?: boolean;
 }
 interface GroupProvide {
     register: (item: GroupItem, cmp: ComponentInternalInstance) => void;
-    unregister: (id: number) => void;
-    select: (id: number, value: boolean) => void;
-    selected: Ref<Readonly<number[]>>;
-    isSelected: (id: number) => boolean;
+    unregister: (id: string) => void;
+    select: (id: string, value: boolean) => void;
+    selected: Ref<Readonly<string[]>>;
+    isSelected: (id: string) => boolean;
     prev: () => void;
     next: () => void;
     selectedClass: Ref<string | undefined>;
     items: ComputedRef<{
-        id: number;
+        id: string;
         value: unknown;
         disabled: boolean | undefined;
     }[]>;
@@ -40,7 +40,7 @@ interface GroupProvide {
     getItemIndex: (value: unknown) => number;
 }
 interface GroupItemProvide {
-    id: number;
+    id: string;
     isSelected: Ref<boolean>;
     isFirst: Ref<boolean>;
     isLast: Ref<boolean>;