@vuetify/nightly 3.7.3-master.2024-10-31 → 3.7.3-next.2024-11-01

package/lib/components/VDataTable/VDataTable.css

@@ -1,187 +1,190 @@
-.v-data-table {
-  width: 100%;
-}
-
-.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--clickable {
-  cursor: pointer;
-}
-
-.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--align-end,
-.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--align-end,
-.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--align-end,
-.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--align-end {
-  text-align: end;
-}
-.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--align-end .v-data-table-header__content,
-.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--align-end .v-data-table-header__content,
-.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--align-end .v-data-table-header__content,
-.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--align-end .v-data-table-header__content {
-  flex-direction: row-reverse;
-}
-.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--align-center,
-.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--align-center,
-.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--align-center,
-.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--align-center {
-  text-align: center;
-}
-.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--align-center .v-data-table-header__content,
-.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--align-center .v-data-table-header__content,
-.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--align-center .v-data-table-header__content,
-.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--align-center .v-data-table-header__content {
-  justify-content: center;
-}
-.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--no-padding,
-.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--no-padding,
-.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--no-padding,
-.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--no-padding {
-  padding: 0 8px;
-}
-.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--nowrap,
-.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--nowrap,
-.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--nowrap,
-.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--nowrap {
-  text-overflow: ellipsis;
-  text-wrap: nowrap;
-  overflow: hidden;
-}
-.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--nowrap .v-data-table-header__content,
-.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--nowrap .v-data-table-header__content,
-.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--nowrap .v-data-table-header__content,
-.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--nowrap .v-data-table-header__content {
-  display: contents;
-}
-.v-data-table .v-table__wrapper > table > thead > tr > th,
-.v-data-table .v-table__wrapper > table tbody > tr > th {
-  align-items: center;
-}
-.v-data-table .v-table__wrapper > table > thead > tr > th.v-data-table__th--fixed,
-.v-data-table .v-table__wrapper > table tbody > tr > th.v-data-table__th--fixed {
-  position: sticky;
-}
-.v-data-table .v-table__wrapper > table > thead > tr > th.v-data-table__th--sortable:hover,
-.v-data-table .v-table__wrapper > table tbody > tr > th.v-data-table__th--sortable:hover {
-  cursor: pointer;
-  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-}
-.v-data-table .v-table__wrapper > table > thead > tr > th:not(.v-data-table__th--sorted) .v-data-table-header__sort-icon,
-.v-data-table .v-table__wrapper > table tbody > tr > th:not(.v-data-table__th--sorted) .v-data-table-header__sort-icon {
-  opacity: 0;
-}
-.v-data-table .v-table__wrapper > table > thead > tr > th:not(.v-data-table__th--sorted):hover .v-data-table-header__sort-icon,
-.v-data-table .v-table__wrapper > table tbody > tr > th:not(.v-data-table__th--sorted):hover .v-data-table-header__sort-icon {
-  opacity: 0.5;
-}
-.v-data-table .v-table__wrapper > table > thead > tr.v-data-table__tr--mobile > td,
-.v-data-table .v-table__wrapper > table tbody > tr.v-data-table__tr--mobile > td {
-  height: fit-content;
-}
-
-.v-data-table-column--fixed,
-.v-data-table__th--sticky {
-  background: rgb(var(--v-theme-surface));
-  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));
-}
-.v-data-table-group-header-row td > span {
-  padding-left: 5px;
-}
-
-.v-data-table--loading .v-data-table__td {
-  opacity: var(--v-disabled-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: rgba(var(--v-border-color), var(--v-border-opacity));
-  min-width: 20px;
-  min-height: 20px;
-  width: 20px;
-  height: 20px;
-}
-
-.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__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: 500;
-  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));
+@layer vuetify.components {
+  .v-data-table {
+    width: 100%;
+  }
+  .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--clickable {
+    cursor: pointer;
+  }
+  .v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--align-end,
+  .v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--align-end,
+  .v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--align-end,
+  .v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--align-end {
+    text-align: end;
+  }
+  .v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--align-end .v-data-table-header__content,
+  .v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--align-end .v-data-table-header__content,
+  .v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--align-end .v-data-table-header__content,
+  .v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--align-end .v-data-table-header__content {
+    flex-direction: row-reverse;
+  }
+  .v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--align-center,
+  .v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--align-center,
+  .v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--align-center,
+  .v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--align-center {
+    text-align: center;
+  }
+  .v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--align-center .v-data-table-header__content,
+  .v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--align-center .v-data-table-header__content,
+  .v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--align-center .v-data-table-header__content,
+  .v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--align-center .v-data-table-header__content {
+    justify-content: center;
+  }
+  .v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--no-padding,
+  .v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--no-padding,
+  .v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--no-padding,
+  .v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--no-padding {
+    padding: 0 8px;
+  }
+  .v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--nowrap,
+  .v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--nowrap,
+  .v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--nowrap,
+  .v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--nowrap {
+    text-overflow: ellipsis;
+    text-wrap: nowrap;
+    overflow: hidden;
+  }
+  .v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--nowrap .v-data-table-header__content,
+  .v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--nowrap .v-data-table-header__content,
+  .v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--nowrap .v-data-table-header__content,
+  .v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--nowrap .v-data-table-header__content {
+    display: contents;
+  }
+  .v-data-table .v-table__wrapper > table > thead > tr > th,
+  .v-data-table .v-table__wrapper > table tbody > tr > th {
+    align-items: center;
+  }
+  .v-data-table .v-table__wrapper > table > thead > tr > th.v-data-table__th--fixed,
+  .v-data-table .v-table__wrapper > table tbody > tr > th.v-data-table__th--fixed {
+    position: sticky;
+  }
+  .v-data-table .v-table__wrapper > table > thead > tr > th.v-data-table__th--sortable:hover,
+  .v-data-table .v-table__wrapper > table tbody > tr > th.v-data-table__th--sortable:hover {
+    cursor: pointer;
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+  }
+  .v-data-table .v-table__wrapper > table > thead > tr > th:not(.v-data-table__th--sorted) .v-data-table-header__sort-icon,
+  .v-data-table .v-table__wrapper > table tbody > tr > th:not(.v-data-table__th--sorted) .v-data-table-header__sort-icon {
+    opacity: 0;
+  }
+  .v-data-table .v-table__wrapper > table > thead > tr > th:not(.v-data-table__th--sorted):hover .v-data-table-header__sort-icon,
+  .v-data-table .v-table__wrapper > table tbody > tr > th:not(.v-data-table__th--sorted):hover .v-data-table-header__sort-icon {
+    opacity: 0.5;
+  }
+  .v-data-table .v-table__wrapper > table > thead > tr.v-data-table__tr--mobile > td,
+  .v-data-table .v-table__wrapper > table tbody > tr.v-data-table__tr--mobile > td {
+    height: fit-content;
+  }
+  .v-data-table-column--fixed,
+  .v-data-table__th--sticky {
+    background: rgb(var(--v-theme-surface));
+    left: 0;
+    z-index: 1;
+  }
+}
+@layer vuetify.overrides {
+  .v-data-table-column--fixed,
+  .v-data-table__th--sticky {
+    position: sticky;
+  }
+}
+@layer vuetify.components {
+  .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));
+  }
+  .v-data-table-group-header-row td > span {
+    padding-left: 5px;
+  }
+  .v-data-table--loading .v-data-table__td {
+    opacity: var(--v-disabled-opacity);
+  }
+}
+@layer vuetify.overrides {
+  .v-data-table-group-header-row__column {
+    padding-left: calc(var(--v-data-table-group-header-row-depth) * 16px);
+  }
+}
+@layer vuetify.components {
+  .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: rgba(var(--v-border-color), var(--v-border-opacity));
+    min-width: 20px;
+    min-height: 20px;
+    width: 20px;
+    height: 20px;
+  }
+}
+@layer vuetify.overrides {
+  .v-data-table-progress > th {
+    border: none;
+    height: auto;
+    padding: 0;
+  }
+}
+@layer vuetify.components {
+  .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__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);
+  }
+}
+@layer vuetify.overrides {
+  .v-data-table__tr--mobile > td:not(:last-child) {
+    border-bottom: 0;
+  }
+}
+@layer vuetify.components {
+  .v-data-table__td-title {
+    font-weight: 500;
+    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.mjs

@@ -1,4 +1,4 @@
-import { mergeProps as _mergeProps, createVNode as _createVNode, resolveDirective as _resolveDirective, Fragment as _Fragment } from "vue";
+import { Fragment as _Fragment, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
 // Styles
 import "./VDataTable.css";
 

package/lib/components/VDataTable/VDataTable.sass

@@ -77,10 +77,16 @@
   .v-data-table-column--fixed,
   .v-data-table__th--sticky
     background: $table-background
-    position: sticky !important
     left: 0
     z-index: 1
 
+    @include tools.layer('overrides')
+      // Beat out relative on table > tbody > tr > td
+      // TODO: Use :where() for all those child combinators
+      // @scope would probably be even better but
+      // doesn't seem to be getting here any time soon
+      position: sticky
+
   .v-data-table-column--last-fixed
     border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity))
 
@@ -99,8 +105,10 @@
     .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
+  @include tools.layer('overrides')
+    // Again, needs to beat all the child combinators
+    .v-data-table-group-header-row__column
+      padding-left: calc(var(--v-data-table-group-header-row-depth) * 16px)
 
   .v-data-table-header__content
     display: flex
@@ -119,11 +127,12 @@
     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
+  @include tools.layer('overrides')
+    .v-data-table-progress
+      > th
+        border: none
+        height: auto
+        padding: 0
 
   .v-data-table-progress__loader
     position: relative
@@ -148,8 +157,9 @@
       grid-template-columns: repeat(2, 1fr)
       min-height: var(--v-table-row-height)
 
-      &:not(:last-child)
-        border-bottom: 0 !important
+      @include tools.layer('overrides')
+        &:not(:last-child)
+          border-bottom: 0
 
   .v-data-table__td-title
     font-weight: VTable.$table-header-font-weight

package/lib/components/VDataTable/VDataTableFooter.css

@@ -1,32 +1,34 @@
-.v-data-table-footer {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  padding: 8px 4px;
-}
-.v-data-table-footer__items-per-page {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-}
-.v-data-table-footer__items-per-page > span {
-  padding-inline-end: 8px;
-}
-.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__paginationz {
-  align-items: center;
-  display: flex;
-  margin-inline-start: 16px;
-}
-.v-data-table-footer__page {
-  padding: 0 8px;
+@layer vuetify.components {
+  .v-data-table-footer {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    padding: 8px 4px;
+  }
+  .v-data-table-footer__items-per-page {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+  .v-data-table-footer__items-per-page > span {
+    padding-inline-end: 8px;
+  }
+  .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__paginationz {
+    align-items: center;
+    display: flex;
+    margin-inline-start: 16px;
+  }
+  .v-data-table-footer__page {
+    padding: 0 8px;
+  }
 }

package/lib/components/VDataTable/VDataTableFooter.mjs

@@ -1,4 +1,4 @@
-import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
 // Styles
 import "./VDataTableFooter.css";
 

package/lib/components/VDataTable/VDataTableFooter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VDataTableFooter.mjs","names":["VPagination","VSelect","usePagination","IconValue","useLocale","computed","genericComponent","propsFactory","useRender","makeVDataTableFooterProps","prevIcon","type","default","nextIcon","firstIcon","lastIcon","itemsPerPageText","String","pageText","firstPageLabel","prevPageLabel","nextPageLabel","lastPageLabel","itemsPerPageOptions","Array","value","title","showCurrentPage","Boolean","VDataTableFooter","name","props","setup","_ref","slots","t","page","pageCount","startIndex","stopIndex","itemsLength","itemsPerPage","setItemsPerPage","map","option","isNaN","Number","paginationProps","filterProps","_createVNode","prepend","v","_mergeProps","$event"],"sources":["../../../src/components/VDataTable/VDataTableFooter.tsx"],"sourcesContent":["// Styles\nimport './VDataTableFooter.sass'\n\n// Components\nimport { VPagination } from '@/components/VPagination'\nimport { VSelect } from '@/components/VSelect'\n\n// Composables\nimport { usePagination } from './composables/paginate'\nimport { IconValue } from '@/composables/icons'\nimport { useLocale } from '@/composables/locale'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const makeVDataTableFooterProps = propsFactory({\n  prevIcon: {\n    type: IconValue,\n    default: '$prev',\n  },\n  nextIcon: {\n    type: IconValue,\n    default: '$next',\n  },\n  firstIcon: {\n    type: IconValue,\n    default: '$first',\n  },\n  lastIcon: {\n    type: IconValue,\n    default: '$last',\n  },\n  itemsPerPageText: {\n    type: String,\n    default: '$vuetify.dataFooter.itemsPerPageText',\n  },\n  pageText: {\n    type: String,\n    default: '$vuetify.dataFooter.pageText',\n  },\n  firstPageLabel: {\n    type: String,\n    default: '$vuetify.dataFooter.firstPage',\n  },\n  prevPageLabel: {\n    type: String,\n    default: '$vuetify.dataFooter.prevPage',\n  },\n  nextPageLabel: {\n    type: String,\n    default: '$vuetify.dataFooter.nextPage',\n  },\n  lastPageLabel: {\n    type: String,\n    default: '$vuetify.dataFooter.lastPage',\n  },\n  itemsPerPageOptions: {\n    type: Array as PropType<readonly (number | { title: string, value: number })[]>,\n    default: () => ([\n      { value: 10, title: '10' },\n      { value: 25, title: '25' },\n      { value: 50, title: '50' },\n      { value: 100, title: '100' },\n      { value: -1, title: '$vuetify.dataFooter.itemsPerPageAll' },\n    ]),\n  },\n  showCurrentPage: Boolean,\n}, 'VDataTableFooter')\n\nexport const VDataTableFooter = genericComponent<{ prepend: never }>()({\n  name: 'VDataTableFooter',\n\n  props: makeVDataTableFooterProps(),\n\n  setup (props, { slots }) {\n    const { t } = useLocale()\n    const { page, pageCount, startIndex, stopIndex, itemsLength, itemsPerPage, setItemsPerPage } = usePagination()\n\n    const itemsPerPageOptions = computed(() => (\n      props.itemsPerPageOptions.map(option => {\n        if (typeof option === 'number') {\n          return {\n            value: option,\n            title: option === -1\n              ? t('$vuetify.dataFooter.itemsPerPageAll')\n              : String(option),\n          }\n        }\n\n        return {\n          ...option,\n          title: !isNaN(Number(option.title)) ? option.title : t(option.title),\n        }\n      })\n    ))\n\n    useRender(() => {\n      const paginationProps = VPagination.filterProps(props)\n\n      return (\n        <div class=\"v-data-table-footer\">\n          { slots.prepend?.() }\n\n          <div class=\"v-data-table-footer__items-per-page\">\n            <span>{ t(props.itemsPerPageText) }</span>\n\n            <VSelect\n              items={ itemsPerPageOptions.value }\n              modelValue={ itemsPerPage.value }\n              onUpdate:modelValue={ v => setItemsPerPage(Number(v)) }\n              density=\"compact\"\n              variant=\"outlined\"\n              hide-details\n            />\n          </div>\n\n          <div class=\"v-data-table-footer__info\">\n            <div>\n              { t(props.pageText, !itemsLength.value ? 0 : startIndex.value + 1, stopIndex.value, itemsLength.value) }\n            </div>\n          </div>\n\n          <div class=\"v-data-table-footer__pagination\">\n            <VPagination\n              v-model={ page.value }\n              density=\"comfortable\"\n              first-aria-label={ props.firstPageLabel }\n              last-aria-label={ props.lastPageLabel }\n              length={ pageCount.value }\n              next-aria-label={ props.nextPageLabel }\n              previous-aria-label={ props.prevPageLabel }\n              rounded\n              show-first-last-page\n              total-visible={ props.showCurrentPage ? 1 : 0 }\n              variant=\"plain\"\n              { ...paginationProps }\n            ></VPagination>\n          </div>\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VDataTableFooter = InstanceType<typeof VDataTableFooter>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VDataTableFooter.mjs","names":["VPagination","VSelect","usePagination","IconValue","useLocale","computed","genericComponent","propsFactory","useRender","makeVDataTableFooterProps","prevIcon","type","default","nextIcon","firstIcon","lastIcon","itemsPerPageText","String","pageText","firstPageLabel","prevPageLabel","nextPageLabel","lastPageLabel","itemsPerPageOptions","Array","value","title","showCurrentPage","Boolean","VDataTableFooter","name","props","setup","_ref","slots","t","page","pageCount","startIndex","stopIndex","itemsLength","itemsPerPage","setItemsPerPage","map","option","isNaN","Number","paginationProps","filterProps","_createVNode","prepend","v","_mergeProps","$event"],"sources":["../../../src/components/VDataTable/VDataTableFooter.tsx"],"sourcesContent":["// Styles\nimport './VDataTableFooter.sass'\n\n// Components\nimport { VPagination } from '@/components/VPagination'\nimport { VSelect } from '@/components/VSelect'\n\n// Composables\nimport { usePagination } from './composables/paginate'\nimport { IconValue } from '@/composables/icons'\nimport { useLocale } from '@/composables/locale'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const makeVDataTableFooterProps = propsFactory({\n  prevIcon: {\n    type: IconValue,\n    default: '$prev',\n  },\n  nextIcon: {\n    type: IconValue,\n    default: '$next',\n  },\n  firstIcon: {\n    type: IconValue,\n    default: '$first',\n  },\n  lastIcon: {\n    type: IconValue,\n    default: '$last',\n  },\n  itemsPerPageText: {\n    type: String,\n    default: '$vuetify.dataFooter.itemsPerPageText',\n  },\n  pageText: {\n    type: String,\n    default: '$vuetify.dataFooter.pageText',\n  },\n  firstPageLabel: {\n    type: String,\n    default: '$vuetify.dataFooter.firstPage',\n  },\n  prevPageLabel: {\n    type: String,\n    default: '$vuetify.dataFooter.prevPage',\n  },\n  nextPageLabel: {\n    type: String,\n    default: '$vuetify.dataFooter.nextPage',\n  },\n  lastPageLabel: {\n    type: String,\n    default: '$vuetify.dataFooter.lastPage',\n  },\n  itemsPerPageOptions: {\n    type: Array as PropType<readonly (number | { title: string, value: number })[]>,\n    default: () => ([\n      { value: 10, title: '10' },\n      { value: 25, title: '25' },\n      { value: 50, title: '50' },\n      { value: 100, title: '100' },\n      { value: -1, title: '$vuetify.dataFooter.itemsPerPageAll' },\n    ]),\n  },\n  showCurrentPage: Boolean,\n}, 'VDataTableFooter')\n\nexport const VDataTableFooter = genericComponent<{ prepend: never }>()({\n  name: 'VDataTableFooter',\n\n  props: makeVDataTableFooterProps(),\n\n  setup (props, { slots }) {\n    const { t } = useLocale()\n    const { page, pageCount, startIndex, stopIndex, itemsLength, itemsPerPage, setItemsPerPage } = usePagination()\n\n    const itemsPerPageOptions = computed(() => (\n      props.itemsPerPageOptions.map(option => {\n        if (typeof option === 'number') {\n          return {\n            value: option,\n            title: option === -1\n              ? t('$vuetify.dataFooter.itemsPerPageAll')\n              : String(option),\n          }\n        }\n\n        return {\n          ...option,\n          title: !isNaN(Number(option.title)) ? option.title : t(option.title),\n        }\n      })\n    ))\n\n    useRender(() => {\n      const paginationProps = VPagination.filterProps(props)\n\n      return (\n        <div class=\"v-data-table-footer\">\n          { slots.prepend?.() }\n\n          <div class=\"v-data-table-footer__items-per-page\">\n            <span>{ t(props.itemsPerPageText) }</span>\n\n            <VSelect\n              items={ itemsPerPageOptions.value }\n              modelValue={ itemsPerPage.value }\n              onUpdate:modelValue={ v => setItemsPerPage(Number(v)) }\n              density=\"compact\"\n              variant=\"outlined\"\n              hide-details\n            />\n          </div>\n\n          <div class=\"v-data-table-footer__info\">\n            <div>\n              { t(props.pageText, !itemsLength.value ? 0 : startIndex.value + 1, stopIndex.value, itemsLength.value) }\n            </div>\n          </div>\n\n          <div class=\"v-data-table-footer__pagination\">\n            <VPagination\n              v-model={ page.value }\n              density=\"comfortable\"\n              first-aria-label={ props.firstPageLabel }\n              last-aria-label={ props.lastPageLabel }\n              length={ pageCount.value }\n              next-aria-label={ props.nextPageLabel }\n              previous-aria-label={ props.prevPageLabel }\n              rounded\n              show-first-last-page\n              total-visible={ props.showCurrentPage ? 1 : 0 }\n              variant=\"plain\"\n              { ...paginationProps }\n            ></VPagination>\n          </div>\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VDataTable/VDataTableGroupHeaderRow.mjs

@@ -1,4 +1,4 @@
-import { createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
 // Components
 import { VDataTableColumn } from "./VDataTableColumn.mjs";
 import { VBtn } from "../VBtn/index.mjs";

package/lib/components/VDataTable/VDataTableHeaders.mjs

@@ -1,4 +1,4 @@
-import { resolveDirective as _resolveDirective, Fragment as _Fragment, mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, mergeProps as _mergeProps, Fragment as _Fragment } from "vue";
 // Components
 import { VDataTableColumn } from "./VDataTableColumn.mjs";
 import { VCheckboxBtn } from "../VCheckbox/index.mjs";

package/lib/components/VDataTable/VDataTableRow.mjs

@@ -1,4 +1,4 @@
-import { mergeProps as _mergeProps, Fragment as _Fragment, createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, Fragment as _Fragment, mergeProps as _mergeProps } from "vue";
 // Components
 import { VDataTableColumn } from "./VDataTableColumn.mjs";
 import { VBtn } from "../VBtn/index.mjs";

package/lib/components/VDataTable/VDataTableRows.mjs

@@ -1,4 +1,4 @@
-import { mergeProps as _mergeProps, resolveDirective as _resolveDirective, Fragment as _Fragment, createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, Fragment as _Fragment, mergeProps as _mergeProps } from "vue";
 // Components
 import { VDataTableGroupHeaderRow } from "./VDataTableGroupHeaderRow.mjs";
 import { VDataTableRow } from "./VDataTableRow.mjs"; // Composables

package/lib/components/VDataTable/VDataTableServer.mjs

@@ -1,4 +1,4 @@
-import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective, Fragment as _Fragment } from "vue";
+import { Fragment as _Fragment, mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
 // Components
 import { makeDataTableProps } from "./VDataTable.mjs";
 import { makeVDataTableFooterProps, VDataTableFooter } from "./VDataTableFooter.mjs";

package/lib/components/VDataTable/VDataTableVirtual.mjs

@@ -1,4 +1,4 @@
-import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
 // Components
 import { makeDataTableProps } from "./VDataTable.mjs";
 import { VDataTableHeaders } from "./VDataTableHeaders.mjs";