@vuetify/nightly 3.6.0-alpha.2-dev.2024-04-29 → 3.6.1-dev.2024-05-01

package/lib/{labs → components}/VConfirmEdit/VConfirmEdit.mjs

@@ -1,6 +1,6 @@
 import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
 // Components
-import { VBtn } from "../../components/VBtn/index.mjs"; // Composables
+import { VBtn } from "../VBtn/index.mjs"; // Composables
 import { useLocale } from "../../composables/index.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
 import { computed, ref, toRaw, watchEffect } from 'vue';

package/lib/components/VConfirmEdit/VConfirmEdit.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VConfirmEdit.mjs","names":["VBtn","useLocale","useProxiedModel","computed","ref","toRaw","watchEffect","deepEqual","genericComponent","propsFactory","useRender","makeVConfirmEditProps","modelValue","color","String","cancelText","type","default","okText","VConfirmEdit","name","props","emits","cancel","save","value","setup","_ref","emit","slots","model","internalModel","structuredClone","t","isPristine","actionsUsed","actions","_createVNode","_Fragment"],"sources":["../../../src/components/VConfirmEdit/VConfirmEdit.tsx"],"sourcesContent":["// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\nimport { useLocale } from '@/composables'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref, toRaw, watchEffect } from 'vue'\nimport { deepEqual, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { Ref, VNode } from 'vue'\nimport type { GenericProps } from '@/util'\n\nexport type VConfirmEditSlots<T> = {\n  default: {\n    model: Ref<T>\n    get actions (): VNode\n  }\n}\n\nexport const makeVConfirmEditProps = propsFactory({\n  modelValue: null,\n  color: String,\n  cancelText: {\n    type: String,\n    default: '$vuetify.confirmEdit.cancel',\n  },\n  okText: {\n    type: String,\n    default: '$vuetify.confirmEdit.ok',\n  },\n}, 'VConfirmEdit')\n\nexport const VConfirmEdit = genericComponent<new <T> (\n  props: {\n    modelValue?: T\n    'onUpdate:modelValue'?: (value: T) => void\n    'onSave'?: (value: T) => void\n  },\n  slots: VConfirmEditSlots<T>\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VConfirmEdit',\n\n  props: makeVConfirmEditProps(),\n\n  emits: {\n    cancel: () => true,\n    save: (value: any) => true,\n    'update:modelValue': (value: any) => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const model = useProxiedModel(props, 'modelValue')\n    const internalModel = ref()\n    watchEffect(() => {\n      internalModel.value = structuredClone(toRaw(model.value))\n    })\n\n    const { t } = useLocale()\n\n    const isPristine = computed(() => {\n      return deepEqual(model.value, internalModel.value)\n    })\n\n    function save () {\n      model.value = internalModel.value\n      emit('save', internalModel.value)\n    }\n\n    function cancel () {\n      internalModel.value = structuredClone(toRaw(model.value))\n      emit('cancel')\n    }\n\n    let actionsUsed = false\n    useRender(() => {\n      const actions = (\n        <>\n          <VBtn\n            disabled={ isPristine.value }\n            variant=\"text\"\n            color={ props.color }\n            onClick={ cancel }\n            text={ t(props.cancelText) }\n          />\n\n          <VBtn\n            disabled={ isPristine.value }\n            variant=\"text\"\n            color={ props.color }\n            onClick={ save }\n            text={ t(props.okText) }\n          />\n        </>\n      )\n      return (\n        <>\n          {\n            slots.default?.({\n              model: internalModel,\n              get actions () {\n                actionsUsed = true\n                return actions\n              },\n            })\n          }\n\n          { !actionsUsed && actions }\n        </>\n      )\n    })\n  },\n})\n\nexport type VConfirmEdit = InstanceType<typeof VConfirmEdit>\n"],"mappings":";AAAA;AAAA,SACSA,IAAI,6BAEb;AAAA,SACSC,SAAS;AAAA,SACTC,eAAe,8CAExB;AACA,SAASC,QAAQ,EAAEC,GAAG,EAAEC,KAAK,EAAEC,WAAW,QAAQ,KAAK;AAAA,SAC9CC,SAAS,EAAEC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,gCAE7D;AAWA,OAAO,MAAMC,qBAAqB,GAAGF,YAAY,CAAC;EAChDG,UAAU,EAAE,IAAI;EAChBC,KAAK,EAAEC,MAAM;EACbC,UAAU,EAAE;IACVC,IAAI,EAAEF,MAAM;IACZG,OAAO,EAAE;EACX,CAAC;EACDC,MAAM,EAAE;IACNF,IAAI,EAAEF,MAAM;IACZG,OAAO,EAAE;EACX;AACF,CAAC,EAAE,cAAc,CAAC;AAElB,OAAO,MAAME,YAAY,GAAGX,gBAAgB,CAOG,CAAC,CAAC;EAC/CY,IAAI,EAAE,cAAc;EAEpBC,KAAK,EAAEV,qBAAqB,CAAC,CAAC;EAE9BW,KAAK,EAAE;IACLC,MAAM,EAAEA,CAAA,KAAM,IAAI;IAClBC,IAAI,EAAGC,KAAU,IAAK,IAAI;IAC1B,mBAAmB,EAAGA,KAAU,IAAK;EACvC,CAAC;EAEDC,KAAKA,CAAEL,KAAK,EAAAM,IAAA,EAAmB;IAAA,IAAjB;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC3B,MAAMG,KAAK,GAAG5B,eAAe,CAACmB,KAAK,EAAE,YAAY,CAAC;IAClD,MAAMU,aAAa,GAAG3B,GAAG,CAAC,CAAC;IAC3BE,WAAW,CAAC,MAAM;MAChByB,aAAa,CAACN,KAAK,GAAGO,eAAe,CAAC3B,KAAK,CAACyB,KAAK,CAACL,KAAK,CAAC,CAAC;IAC3D,CAAC,CAAC;IAEF,MAAM;MAAEQ;IAAE,CAAC,GAAGhC,SAAS,CAAC,CAAC;IAEzB,MAAMiC,UAAU,GAAG/B,QAAQ,CAAC,MAAM;MAChC,OAAOI,SAAS,CAACuB,KAAK,CAACL,KAAK,EAAEM,aAAa,CAACN,KAAK,CAAC;IACpD,CAAC,CAAC;IAEF,SAASD,IAAIA,CAAA,EAAI;MACfM,KAAK,CAACL,KAAK,GAAGM,aAAa,CAACN,KAAK;MACjCG,IAAI,CAAC,MAAM,EAAEG,aAAa,CAACN,KAAK,CAAC;IACnC;IAEA,SAASF,MAAMA,CAAA,EAAI;MACjBQ,aAAa,CAACN,KAAK,GAAGO,eAAe,CAAC3B,KAAK,CAACyB,KAAK,CAACL,KAAK,CAAC,CAAC;MACzDG,IAAI,CAAC,QAAQ,CAAC;IAChB;IAEA,IAAIO,WAAW,GAAG,KAAK;IACvBzB,SAAS,CAAC,MAAM;MACd,MAAM0B,OAAO,GAAAC,YAAA,CAAAC,SAAA,SAAAD,YAAA,CAAArC,IAAA;QAAA,YAGIkC,UAAU,CAACT,KAAK;QAAA;QAAA,SAEnBJ,KAAK,CAACR,KAAK;QAAA,WACTU,MAAM;QAAA,QACTU,CAAC,CAACZ,KAAK,CAACN,UAAU;MAAC,UAAAsB,YAAA,CAAArC,IAAA;QAAA,YAIfkC,UAAU,CAACT,KAAK;QAAA;QAAA,SAEnBJ,KAAK,CAACR,KAAK;QAAA,WACTW,IAAI;QAAA,QACPS,CAAC,CAACZ,KAAK,CAACH,MAAM;MAAC,UAG3B;MACD,OAAAmB,YAAA,CAAAC,SAAA,SAGMT,KAAK,CAACZ,OAAO,GAAG;QACda,KAAK,EAAEC,aAAa;QACpB,IAAIK,OAAOA,CAAA,EAAI;UACbD,WAAW,GAAG,IAAI;UAClB,OAAOC,OAAO;QAChB;MACF,CAAC,CAAC,EAGF,CAACD,WAAW,IAAIC,OAAO;IAG/B,CAAC,CAAC;EACJ;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/components/VConfirmEdit/__test__/VConfirmEdit.spec.cy.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VConfirmEdit.spec.cy.mjs","names":["VConfirmEdit","ref","describe","it","externalModel","cy","mount","_createVNode","value","default","_ref","model","get","should","then","$event","_ref2","_Fragment","join","onClick","push","_createTextVNode","click","expect","to","deep","equal","contains","_ref3","_ref4","actions","_ref5"],"sources":["../../../../src/components/VConfirmEdit/__test__/VConfirmEdit.spec.cy.tsx"],"sourcesContent":["/// <reference types=\"../../../../types/cypress\" />\n\nimport { VConfirmEdit } from '..'\n\n// Utilities\nimport { ref } from 'vue'\n\n// Tests\ndescribe('VConfirmEdit', () => {\n  it('mirrors external updates', () => {\n    const externalModel = ref('foo')\n\n    cy.mount(() => (\n      <VConfirmEdit modelValue={ externalModel.value }>\n        { ({ model }) => (\n          <p>{ model.value }</p>\n        )}\n      </VConfirmEdit>\n    )).get('p')\n      .should('have.text', 'foo')\n      .then(() => {\n        externalModel.value = 'bar'\n      })\n      .get('p')\n      .should('have.text', 'bar')\n  })\n\n  it(`doesn't mutate the original value`, () => {\n    const externalModel = ref(['foo'])\n\n    cy.mount(\n      <VConfirmEdit v-model={ externalModel.value } modelValue={ externalModel.value }>\n        { ({ model }) => (\n          <>\n            <p>{ model.value.join(',') }</p>\n            <button data-test=\"push\" onClick={ () => model.value.push('bar') }>Push</button>\n          </>\n        )}\n      </VConfirmEdit>\n    ).get('p')\n      .should('have.text', 'foo')\n      .get('[data-test=\"push\"]').click()\n      .get('p')\n      .should('have.text', 'foo,bar')\n      .then(() => {\n        expect(externalModel.value).to.deep.equal(['foo'])\n      })\n    cy.contains('.v-btn', 'OK').click()\n    cy.get('p')\n      .should('have.text', 'foo,bar')\n      .then(() => {\n        expect(externalModel.value).to.deep.equal(['foo', 'bar'])\n      })\n  })\n\n  it('hides actions if used from the slot', () => {\n    cy.mount(\n      <VConfirmEdit></VConfirmEdit>\n    ).get('.v-btn').should('have.length', 2)\n\n    cy.mount(\n      <VConfirmEdit>\n        { ({ model }) => {\n          void model\n        }}\n      </VConfirmEdit>\n    ).get('.v-btn').should('have.length', 2)\n\n    cy.mount(\n      <VConfirmEdit>\n        { ({ actions }) => {\n          void actions\n        }}\n      </VConfirmEdit>\n    ).get('.v-btn').should('have.length', 0)\n\n    cy.mount(\n      <VConfirmEdit>\n        { ({ actions }) => actions }\n      </VConfirmEdit>\n    ).get('.v-btn').should('have.length', 2)\n  })\n})\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VConfirmEdit/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["VConfirmEdit"],"sources":["../../../src/components/VConfirmEdit/index.ts"],"sourcesContent":["export { VConfirmEdit } from './VConfirmEdit'\n"],"mappings":"SAASA,YAAY","ignoreList":[]}

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

@@ -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

@@ -55,7 +55,7 @@
               align-items: center
 
             > th.v-data-table__th--fixed
-                position: sticky
+              position: sticky
 
             > th.v-data-table__th--sortable:hover
                 cursor: pointer
@@ -126,3 +126,36 @@
   .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__td
+    &-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;
 }

package/lib/components/VDataTable/VDataTableFooter.sass

@@ -4,33 +4,33 @@
 
 @include tools.layer('components')
   .v-data-table-footer
-    display: flex
     align-items: center
+    display: flex
     flex-wrap: wrap
-    padding: $data-table-footer-padding
     justify-content: flex-end
+    padding: $data-table-footer-padding
 
-  .v-data-table-footer__items-per-page
-    display: flex
-    align-items: center
-    justify-content: center
+    &__items-per-page
+      align-items: center
+      display: flex
+      justify-content: center
 
-    > span
-      padding-inline-end: $data-table-footer-items-per-page-padding
+      > span
+        padding-inline-end: $data-table-footer-items-per-page-padding
 
-    > .v-select
-      width: $data-table-footer-select-width
+      > .v-select
+        width: $data-table-footer-select-width
 
-  .v-data-table-footer__info
-    display: flex
-    justify-content: flex-end
-    min-width: $data-table-footer-info-min-width
-    padding: $data-table-footer-info-padding
+    &__info
+      display: flex
+      justify-content: flex-end
+      min-width: $data-table-footer-info-min-width
+      padding: $data-table-footer-info-padding
 
-  .v-data-table-footer__pagination
-    display: flex
-    align-items: center
-    margin-inline-start: $data-table-footer-pagination-margin-inline-start
+    &__paginationz
+      align-items: center
+      display: flex
+      margin-inline-start: $data-table-footer-pagination-margin-inline-start
 
-  .v-data-table-footer__page
-    padding: 0 8px
+    &__page
+      padding: 0 8px

package/lib/components/VDataTable/VDataTableHeaders.mjs

@@ -2,13 +2,17 @@ import { resolveDirective as _resolveDirective, Fragment as _Fragment, mergeProp
 // Components
 import { VDataTableColumn } from "./VDataTableColumn.mjs";
 import { VCheckboxBtn } from "../VCheckbox/index.mjs";
-import { VIcon } from "../VIcon/index.mjs"; // Composables
+import { VChip } from "../VChip/index.mjs";
+import { VIcon } from "../VIcon/index.mjs";
+import { VSelect } from "../VSelect/index.mjs"; // Composables
 import { useHeaders } from "./composables/headers.mjs";
 import { useSelection } from "./composables/select.mjs";
 import { useSort } from "./composables/sort.mjs";
 import { useBackgroundColor } from "../../composables/color.mjs";
+import { makeDisplayProps, useDisplay } from "../../composables/display.mjs";
 import { IconValue } from "../../composables/icons.mjs";
-import { LoaderSlot, makeLoaderProps, useLoader } from "../../composables/loader.mjs"; // Utilities
+import { LoaderSlot, makeLoaderProps, useLoader } from "../../composables/loader.mjs";
+import { useLocale } from "../../composables/locale.mjs"; // Utilities
 import { computed, mergeProps } from 'vue';
 import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
 export const makeVDataTableHeadersProps = propsFactory({
@@ -26,6 +30,7 @@ export const makeVDataTableHeadersProps = propsFactory({
   headerProps: {
     type: Object
   },
+  ...makeDisplayProps(),
   ...makeLoaderProps()
 }, 'VDataTableHeaders');
 export const VDataTableHeaders = genericComponent()({
@@ -35,6 +40,9 @@ export const VDataTableHeaders = genericComponent()({
     let {
       slots
     } = _ref;
+    const {
+      t
+    } = useLocale();
     const {
       toggleSort,
       sortBy,
@@ -70,6 +78,10 @@ export const VDataTableHeaders = genericComponent()({
       backgroundColorClasses,
       backgroundColorStyles
     } = useBackgroundColor(props, 'color');
+    const {
+      displayClasses,
+      mobile
+    } = useDisplay(props);
     const slotProps = computed(() => ({
       headers: headers.value,
       columns: columns.value,
@@ -81,6 +93,9 @@ export const VDataTableHeaders = genericComponent()({
       selectAll,
       getSortIcon
     }));
+    const headerCellClasses = computed(() => ['v-data-table__th', {
+      'v-data-table__th--sticky': props.sticky
+    }, displayClasses.value, loaderClasses.value]);
     const VDataTableHeaderCell = _ref2 => {
       let {
         column,
@@ -92,12 +107,11 @@ export const VDataTableHeaders = genericComponent()({
       return _createVNode(VDataTableColumn, _mergeProps({
         "tag": "th",
         "align": column.align,
-        "class": ['v-data-table__th', {
+        "class": [{
           'v-data-table__th--sortable': column.sortable,
           'v-data-table__th--sorted': isSorted(column),
-          'v-data-table__th--fixed': column.fixed,
-          'v-data-table__th--sticky': props.sticky
-        }, loaderClasses.value],
+          'v-data-table__th--fixed': column.fixed
+        }, ...headerCellClasses.value],
         "style": {
           width: convertToUnit(column.width),
           minWidth: convertToUnit(column.minWidth),
@@ -146,8 +160,53 @@ export const VDataTableHeaders = genericComponent()({
         }
       });
     };
+    const VDataTableMobileHeaderCell = () => {
+      const headerProps = mergeProps(props.headerProps ?? {} ?? {});
+      const displayItems = computed(() => {
+        return columns.value.filter(column => column?.sortable);
+      });
+      const appendIcon = computed(() => {
+        return allSelected.value ? '$checkboxOn' : someSelected.value ? '$checkboxIndeterminate' : '$checkboxOff';
+      });
+      return _createVNode(VDataTableColumn, _mergeProps({
+        "tag": "th",
+        "class": [...headerCellClasses.value],
+        "colspan": headers.value.length + 1
+      }, headerProps), {
+        default: () => [_createVNode("div", {
+          "class": "v-data-table-header__content"
+        }, [_createVNode(VSelect, {
+          "chips": true,
+          "class": "v-data-table__td-sort-select",
+          "clearable": true,
+          "density": "default",
+          "items": displayItems.value,
+          "label": t('$vuetify.dataTable.sortBy'),
+          "multiple": props.multiSort,
+          "variant": "underlined",
+          "onClick:clear": () => sortBy.value = [],
+          "appendIcon": appendIcon.value,
+          "onClick:append": () => selectAll(!allSelected.value)
+        }, {
+          ...slots,
+          chip: props => _createVNode(VChip, {
+            "onClick": props.item.raw?.sortable ? () => toggleSort(props.item.raw) : undefined,
+            "onMousedown": e => {
+              e.preventDefault();
+              e.stopPropagation();
+            }
+          }, {
+            default: () => [props.item.title, _createVNode(VIcon, {
+              "class": ['v-data-table__td-sort-icon', isSorted(props.item.raw) && 'v-data-table__td-sort-icon-active'],
+              "icon": getSortIcon(props.item.raw),
+              "size": "small"
+            }, null)]
+          })
+        })])]
+      });
+    };
     useRender(() => {
-      return _createVNode(_Fragment, null, [slots.headers ? slots.headers(slotProps.value) : headers.value.map((row, y) => _createVNode("tr", null, [row.map((column, x) => _createVNode(VDataTableHeaderCell, {
+      return mobile.value ? _createVNode("tr", null, [_createVNode(VDataTableMobileHeaderCell, null, null)]) : _createVNode(_Fragment, null, [slots.headers ? slots.headers(slotProps.value) : headers.value.map((row, y) => _createVNode("tr", null, [row.map((column, x) => _createVNode(VDataTableHeaderCell, {
         "column": column,
         "x": x,
         "y": y

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

@@ -1 +1 @@
-{"version":3,"file":"VDataTableHeaders.mjs","names":["VDataTableColumn","VCheckboxBtn","VIcon","useHeaders","useSelection","useSort","useBackgroundColor","IconValue","LoaderSlot","makeLoaderProps","useLoader","computed","mergeProps","convertToUnit","genericComponent","propsFactory","useRender","makeVDataTableHeadersProps","color","String","sticky","Boolean","multiSort","sortAscIcon","type","default","sortDescIcon","headerProps","Object","VDataTableHeaders","name","props","setup","_ref","slots","toggleSort","sortBy","isSorted","someSelected","allSelected","selectAll","showSelectAll","columns","headers","loaderClasses","getFixedStyles","column","y","fixed","undefined","position","left","fixedOffset","top","getSortIcon","item","value","find","key","order","backgroundColorClasses","backgroundColorStyles","slotProps","VDataTableHeaderCell","_ref2","x","noPadding","_createVNode","_mergeProps","align","sortable","width","minWidth","maxWidth","colspan","rowspan","nowrap","lastFixed","columnSlotName","columnSlotProps","title","findIndex","_Fragment","map","row","loading","length","loader"],"sources":["../../../src/components/VDataTable/VDataTableHeaders.tsx"],"sourcesContent":["// Components\nimport { VDataTableColumn } from './VDataTableColumn'\nimport { VCheckboxBtn } from '@/components/VCheckbox'\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { useHeaders } from './composables/headers'\nimport { useSelection } from './composables/select'\nimport { useSort } from './composables/sort'\nimport { useBackgroundColor } from '@/composables/color'\nimport { IconValue } from '@/composables/icons'\nimport { LoaderSlot, makeLoaderProps, useLoader } from '@/composables/loader'\n\n// Utilities\nimport { computed, mergeProps } from 'vue'\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { CSSProperties, PropType, UnwrapRef } from 'vue'\nimport type { provideSelection } from './composables/select'\nimport type { provideSort } from './composables/sort'\nimport type { InternalDataTableHeader } from './types'\nimport type { LoaderSlotProps } from '@/composables/loader'\n\nexport type HeadersSlotProps = {\n  headers: InternalDataTableHeader[][]\n  columns: InternalDataTableHeader[]\n  sortBy: UnwrapRef<ReturnType<typeof provideSort>['sortBy']>\n  someSelected: UnwrapRef<ReturnType<typeof provideSelection>['someSelected']>\n  allSelected: UnwrapRef<ReturnType<typeof provideSelection>['allSelected']>\n  toggleSort: ReturnType<typeof provideSort>['toggleSort']\n  selectAll: ReturnType<typeof provideSelection>['selectAll']\n  getSortIcon: (column: InternalDataTableHeader) => IconValue\n  isSorted: ReturnType<typeof provideSort>['isSorted']\n}\n\ntype VDataTableHeaderCellColumnSlotProps = {\n  column: InternalDataTableHeader\n  selectAll: ReturnType<typeof provideSelection>['selectAll']\n  isSorted: ReturnType<typeof provideSort>['isSorted']\n  toggleSort: ReturnType<typeof provideSort>['toggleSort']\n  sortBy: UnwrapRef<ReturnType<typeof provideSort>['sortBy']>\n  someSelected: UnwrapRef<ReturnType<typeof provideSelection>['someSelected']>\n  allSelected: UnwrapRef<ReturnType<typeof provideSelection>['allSelected']>\n  getSortIcon: (column: InternalDataTableHeader) => IconValue\n}\n\nexport type VDataTableHeadersSlots = {\n  headers: HeadersSlotProps\n  loader: LoaderSlotProps\n  'header.data-table-select': VDataTableHeaderCellColumnSlotProps\n  'header.data-table-expand': VDataTableHeaderCellColumnSlotProps\n} & { [key: `header.${string}`]: VDataTableHeaderCellColumnSlotProps }\n\nexport const makeVDataTableHeadersProps = propsFactory({\n  color: String,\n  sticky: Boolean,\n  multiSort: Boolean,\n  sortAscIcon: {\n    type: IconValue,\n    default: '$sortAsc',\n  },\n  sortDescIcon: {\n    type: IconValue,\n    default: '$sortDesc',\n  },\n  headerProps: {\n    type: Object as PropType<Record<string, any>>,\n  },\n\n  ...makeLoaderProps(),\n}, 'VDataTableHeaders')\n\nexport const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({\n  name: 'VDataTableHeaders',\n\n  props: makeVDataTableHeadersProps(),\n\n  setup (props, { slots }) {\n    const { toggleSort, sortBy, isSorted } = useSort()\n    const { someSelected, allSelected, selectAll, showSelectAll } = useSelection()\n    const { columns, headers } = useHeaders()\n    const { loaderClasses } = useLoader(props)\n\n    function getFixedStyles (column: InternalDataTableHeader, y: number): CSSProperties | undefined {\n      if (!props.sticky && !column.fixed) return undefined\n\n      return {\n        position: 'sticky',\n        left: column.fixed ? convertToUnit(column.fixedOffset) : undefined,\n        top: props.sticky ? `calc(var(--v-table-header-height) * ${y})` : undefined,\n      }\n    }\n\n    function getSortIcon (column: InternalDataTableHeader) {\n      const item = sortBy.value.find(item => item.key === column.key)\n\n      if (!item) return props.sortAscIcon\n\n      return item.order === 'asc' ? props.sortAscIcon : props.sortDescIcon\n    }\n\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'color')\n\n    const slotProps = computed(() => ({\n      headers: headers.value,\n      columns: columns.value,\n      toggleSort,\n      isSorted,\n      sortBy: sortBy.value,\n      someSelected: someSelected.value,\n      allSelected: allSelected.value,\n      selectAll,\n      getSortIcon,\n    } satisfies HeadersSlotProps))\n\n    const VDataTableHeaderCell = ({ column, x, y }: { column: InternalDataTableHeader, x: number, y: number }) => {\n      const noPadding = column.key === 'data-table-select' || column.key === 'data-table-expand'\n      const headerProps = mergeProps(props.headerProps ?? {}, column.headerProps ?? {})\n\n      return (\n        <VDataTableColumn\n          tag=\"th\"\n          align={ column.align }\n          class={[\n            'v-data-table__th',\n            {\n              'v-data-table__th--sortable': column.sortable,\n              'v-data-table__th--sorted': isSorted(column),\n              'v-data-table__th--fixed': column.fixed,\n              'v-data-table__th--sticky': props.sticky,\n            },\n            loaderClasses.value,\n          ]}\n          style={{\n            width: convertToUnit(column.width),\n            minWidth: convertToUnit(column.minWidth),\n            maxWidth: convertToUnit(column.maxWidth),\n            ...getFixedStyles(column, y),\n          }}\n          colspan={ column.colspan }\n          rowspan={ column.rowspan }\n          onClick={ column.sortable ? () => toggleSort(column) : undefined }\n          fixed={ column.fixed }\n          nowrap={ column.nowrap }\n          lastFixed={ column.lastFixed }\n          noPadding={ noPadding }\n          { ...headerProps }\n        >\n          {{\n            default: () => {\n              const columnSlotName = `header.${column.key}` as const\n              const columnSlotProps: VDataTableHeaderCellColumnSlotProps = {\n                column,\n                selectAll,\n                isSorted,\n                toggleSort,\n                sortBy: sortBy.value,\n                someSelected: someSelected.value,\n                allSelected: allSelected.value,\n                getSortIcon,\n              }\n\n              if (slots[columnSlotName]) return slots[columnSlotName]!(columnSlotProps)\n\n              if (column.key === 'data-table-select') {\n                return slots['header.data-table-select']?.(columnSlotProps) ?? (showSelectAll && (\n                  <VCheckboxBtn\n                    modelValue={ allSelected.value }\n                    indeterminate={ someSelected.value && !allSelected.value }\n                    onUpdate:modelValue={ selectAll }\n                  />\n                ))\n              }\n\n              return (\n                <div class=\"v-data-table-header__content\">\n                  <span>{ column.title }</span>\n                  { column.sortable && (\n                    <VIcon\n                      key=\"icon\"\n                      class=\"v-data-table-header__sort-icon\"\n                      icon={ getSortIcon(column) }\n                    />\n                  )}\n                  { props.multiSort && isSorted(column) && (\n                    <div\n                      key=\"badge\"\n                      class={[\n                        'v-data-table-header__sort-badge',\n                        ...backgroundColorClasses.value,\n                      ]}\n                      style={ backgroundColorStyles.value }\n                    >\n                      { sortBy.value.findIndex(x => x.key === column.key) + 1 }\n                    </div>\n                  )}\n                </div>\n              )\n            },\n          }}\n        </VDataTableColumn>\n      )\n    }\n\n    useRender(() => {\n      return (\n        <>\n          { slots.headers\n            ? slots.headers(slotProps.value)\n            : headers.value.map((row, y) => (\n              <tr>\n                { row.map((column, x) => (\n                  <VDataTableHeaderCell column={ column } x={ x } y={ y } />\n                ))}\n              </tr>\n            ))}\n\n          { props.loading && (\n            <tr class=\"v-data-table-progress\">\n              <th colspan={ columns.value.length }>\n                <LoaderSlot\n                  name=\"v-data-table-progress\"\n                  absolute\n                  active\n                  color={ typeof props.loading === 'boolean' ? undefined : props.loading }\n                  indeterminate\n                  v-slots={{ default: slots.loader }}\n                />\n              </th>\n            </tr>\n          )}\n        </>\n      )\n    })\n  },\n})\n\nexport type VDataTableHeaders = InstanceType<typeof VDataTableHeaders>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VDataTableHeaders.mjs","names":["VDataTableColumn","VCheckboxBtn","VChip","VIcon","VSelect","useHeaders","useSelection","useSort","useBackgroundColor","makeDisplayProps","useDisplay","IconValue","LoaderSlot","makeLoaderProps","useLoader","useLocale","computed","mergeProps","convertToUnit","genericComponent","propsFactory","useRender","makeVDataTableHeadersProps","color","String","sticky","Boolean","multiSort","sortAscIcon","type","default","sortDescIcon","headerProps","Object","VDataTableHeaders","name","props","setup","_ref","slots","t","toggleSort","sortBy","isSorted","someSelected","allSelected","selectAll","showSelectAll","columns","headers","loaderClasses","getFixedStyles","column","y","fixed","undefined","position","left","fixedOffset","top","getSortIcon","item","value","find","key","order","backgroundColorClasses","backgroundColorStyles","displayClasses","mobile","slotProps","headerCellClasses","VDataTableHeaderCell","_ref2","x","noPadding","_createVNode","_mergeProps","align","sortable","width","minWidth","maxWidth","colspan","rowspan","nowrap","lastFixed","columnSlotName","columnSlotProps","title","findIndex","VDataTableMobileHeaderCell","displayItems","filter","appendIcon","length","onClick:clear","onClick:append","chip","raw","e","preventDefault","stopPropagation","_Fragment","map","row","loading","loader"],"sources":["../../../src/components/VDataTable/VDataTableHeaders.tsx"],"sourcesContent":["// Components\nimport { VDataTableColumn } from './VDataTableColumn'\nimport { VCheckboxBtn } from '@/components/VCheckbox'\nimport { VChip } from '@/components/VChip'\nimport { VIcon } from '@/components/VIcon'\nimport { VSelect } from '@/components/VSelect'\n\n// Composables\nimport { useHeaders } from './composables/headers'\nimport { useSelection } from './composables/select'\nimport { useSort } from './composables/sort'\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeDisplayProps, useDisplay } from '@/composables/display'\nimport { IconValue } from '@/composables/icons'\nimport { LoaderSlot, makeLoaderProps, useLoader } from '@/composables/loader'\nimport { useLocale } from '@/composables/locale'\n\n// Utilities\nimport { computed, mergeProps } from 'vue'\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { CSSProperties, PropType, UnwrapRef } from 'vue'\nimport type { provideSelection } from './composables/select'\nimport type { provideSort } from './composables/sort'\nimport type { InternalDataTableHeader } from './types'\nimport type { ItemProps } from '@/composables/list-items'\nimport type { LoaderSlotProps } from '@/composables/loader'\n\nexport type HeadersSlotProps = {\n  headers: InternalDataTableHeader[][]\n  columns: InternalDataTableHeader[]\n  sortBy: UnwrapRef<ReturnType<typeof provideSort>['sortBy']>\n  someSelected: UnwrapRef<ReturnType<typeof provideSelection>['someSelected']>\n  allSelected: UnwrapRef<ReturnType<typeof provideSelection>['allSelected']>\n  toggleSort: ReturnType<typeof provideSort>['toggleSort']\n  selectAll: ReturnType<typeof provideSelection>['selectAll']\n  getSortIcon: (column: InternalDataTableHeader) => IconValue\n  isSorted: ReturnType<typeof provideSort>['isSorted']\n}\n\nexport type VDataTableHeaderCellColumnSlotProps = {\n  column: InternalDataTableHeader\n  selectAll: ReturnType<typeof provideSelection>['selectAll']\n  isSorted: ReturnType<typeof provideSort>['isSorted']\n  toggleSort: ReturnType<typeof provideSort>['toggleSort']\n  sortBy: UnwrapRef<ReturnType<typeof provideSort>['sortBy']>\n  someSelected: UnwrapRef<ReturnType<typeof provideSelection>['someSelected']>\n  allSelected: UnwrapRef<ReturnType<typeof provideSelection>['allSelected']>\n  getSortIcon: (column: InternalDataTableHeader) => IconValue\n}\n\nexport type VDataTableHeadersSlots = {\n  headers: HeadersSlotProps\n  loader: LoaderSlotProps\n  'header.data-table-select': VDataTableHeaderCellColumnSlotProps\n  'header.data-table-expand': VDataTableHeaderCellColumnSlotProps\n} & { [key: `header.${string}`]: VDataTableHeaderCellColumnSlotProps }\n\nexport const makeVDataTableHeadersProps = propsFactory({\n  color: String,\n  sticky: Boolean,\n  multiSort: Boolean,\n  sortAscIcon: {\n    type: IconValue,\n    default: '$sortAsc',\n  },\n  sortDescIcon: {\n    type: IconValue,\n    default: '$sortDesc',\n  },\n  headerProps: {\n    type: Object as PropType<Record<string, any>>,\n  },\n\n  ...makeDisplayProps(),\n  ...makeLoaderProps(),\n}, 'VDataTableHeaders')\n\nexport const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({\n  name: 'VDataTableHeaders',\n\n  props: makeVDataTableHeadersProps(),\n\n  setup (props, { slots }) {\n    const { t } = useLocale()\n    const { toggleSort, sortBy, isSorted } = useSort()\n    const { someSelected, allSelected, selectAll, showSelectAll } = useSelection()\n    const { columns, headers } = useHeaders()\n    const { loaderClasses } = useLoader(props)\n\n    function getFixedStyles (column: InternalDataTableHeader, y: number): CSSProperties | undefined {\n      if (!props.sticky && !column.fixed) return undefined\n\n      return {\n        position: 'sticky',\n        left: column.fixed ? convertToUnit(column.fixedOffset) : undefined,\n        top: props.sticky ? `calc(var(--v-table-header-height) * ${y})` : undefined,\n      }\n    }\n\n    function getSortIcon (column: InternalDataTableHeader) {\n      const item = sortBy.value.find(item => item.key === column.key)\n\n      if (!item) return props.sortAscIcon\n\n      return item.order === 'asc' ? props.sortAscIcon : props.sortDescIcon\n    }\n\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'color')\n\n    const { displayClasses, mobile } = useDisplay(props)\n\n    const slotProps = computed(() => ({\n      headers: headers.value,\n      columns: columns.value,\n      toggleSort,\n      isSorted,\n      sortBy: sortBy.value,\n      someSelected: someSelected.value,\n      allSelected: allSelected.value,\n      selectAll,\n      getSortIcon,\n    } satisfies HeadersSlotProps))\n\n    const headerCellClasses = computed(() => ([\n      'v-data-table__th',\n      {\n        'v-data-table__th--sticky': props.sticky,\n      },\n      displayClasses.value,\n      loaderClasses.value,\n    ]))\n\n    const VDataTableHeaderCell = ({ column, x, y }: { column: InternalDataTableHeader, x: number, y: number }) => {\n      const noPadding = column.key === 'data-table-select' || column.key === 'data-table-expand'\n      const headerProps = mergeProps(props.headerProps ?? {}, column.headerProps ?? {})\n\n      return (\n        <VDataTableColumn\n          tag=\"th\"\n          align={ column.align }\n          class={[\n            {\n              'v-data-table__th--sortable': column.sortable,\n              'v-data-table__th--sorted': isSorted(column),\n              'v-data-table__th--fixed': column.fixed,\n            },\n            ...headerCellClasses.value,\n          ]}\n          style={{\n            width: convertToUnit(column.width),\n            minWidth: convertToUnit(column.minWidth),\n            maxWidth: convertToUnit(column.maxWidth),\n            ...getFixedStyles(column, y),\n          }}\n          colspan={ column.colspan }\n          rowspan={ column.rowspan }\n          onClick={ column.sortable ? () => toggleSort(column) : undefined }\n          fixed={ column.fixed }\n          nowrap={ column.nowrap }\n          lastFixed={ column.lastFixed }\n          noPadding={ noPadding }\n          { ...headerProps }\n        >\n          {{\n            default: () => {\n              const columnSlotName = `header.${column.key}` as const\n              const columnSlotProps: VDataTableHeaderCellColumnSlotProps = {\n                column,\n                selectAll,\n                isSorted,\n                toggleSort,\n                sortBy: sortBy.value,\n                someSelected: someSelected.value,\n                allSelected: allSelected.value,\n                getSortIcon,\n              }\n\n              if (slots[columnSlotName]) return slots[columnSlotName]!(columnSlotProps)\n\n              if (column.key === 'data-table-select') {\n                return slots['header.data-table-select']?.(columnSlotProps) ?? (showSelectAll && (\n                  <VCheckboxBtn\n                    modelValue={ allSelected.value }\n                    indeterminate={ someSelected.value && !allSelected.value }\n                    onUpdate:modelValue={ selectAll }\n                  />\n                ))\n              }\n\n              return (\n                <div class=\"v-data-table-header__content\">\n                  <span>{ column.title }</span>\n                  { column.sortable && (\n                    <VIcon\n                      key=\"icon\"\n                      class=\"v-data-table-header__sort-icon\"\n                      icon={ getSortIcon(column) }\n                    />\n                  )}\n                  { props.multiSort && isSorted(column) && (\n                    <div\n                      key=\"badge\"\n                      class={[\n                        'v-data-table-header__sort-badge',\n                        ...backgroundColorClasses.value,\n                      ]}\n                      style={ backgroundColorStyles.value }\n                    >\n                      { sortBy.value.findIndex(x => x.key === column.key) + 1 }\n                    </div>\n                  )}\n                </div>\n              )\n            },\n          }}\n        </VDataTableColumn>\n      )\n    }\n\n    const VDataTableMobileHeaderCell = () => {\n      const headerProps = mergeProps(props.headerProps ?? {} ?? {})\n\n      const displayItems = computed<ItemProps['items']>(() => {\n        return columns.value.filter(column => column?.sortable)\n      })\n\n      const appendIcon = computed(() => {\n        return allSelected.value ? '$checkboxOn' : someSelected.value ? '$checkboxIndeterminate' : '$checkboxOff'\n      })\n\n      return (\n        <VDataTableColumn\n          tag=\"th\"\n          class={[\n            ...headerCellClasses.value,\n          ]}\n          colspan={ headers.value.length + 1 }\n          { ...headerProps }\n        >\n          <div class=\"v-data-table-header__content\">\n            <VSelect\n              chips\n              class=\"v-data-table__td-sort-select\"\n              clearable\n              density=\"default\"\n              items={ displayItems.value }\n              label={ t('$vuetify.dataTable.sortBy') }\n              multiple={ props.multiSort }\n              variant=\"underlined\"\n              onClick:clear={ () => sortBy.value = [] }\n              appendIcon={ appendIcon.value }\n              onClick:append={ () => selectAll(!allSelected.value) }\n            >\n              {{\n                ...slots,\n                chip: props => (\n                  <VChip\n                    onClick={ props.item.raw?.sortable ? () => toggleSort(props.item.raw) : undefined }\n                    onMousedown={ (e: MouseEvent) => {\n                      e.preventDefault()\n                      e.stopPropagation()\n                    }}\n                  >\n                    { props.item.title }\n                    <VIcon\n                      class={[\n                        'v-data-table__td-sort-icon',\n                        isSorted(props.item.raw) && 'v-data-table__td-sort-icon-active',\n                      ]}\n                      icon={ getSortIcon(props.item.raw) }\n                      size=\"small\"\n                    />\n                  </VChip>\n                ),\n              }}\n            </VSelect>\n          </div>\n        </VDataTableColumn>\n      )\n    }\n\n    useRender(() => {\n      return mobile.value ? (\n        <tr>\n          <VDataTableMobileHeaderCell />\n        </tr>\n      ) : (\n        <>\n          { slots.headers\n            ? slots.headers(slotProps.value)\n            : headers.value.map((row, y) => (\n              <tr>\n                { row.map((column, x) => (\n                  <VDataTableHeaderCell column={ column } x={ x } y={ y } />\n                ))}\n              </tr>\n            ))}\n\n          { props.loading && (\n            <tr class=\"v-data-table-progress\">\n              <th colspan={ columns.value.length }>\n                <LoaderSlot\n                  name=\"v-data-table-progress\"\n                  absolute\n                  active\n                  color={ typeof props.loading === 'boolean' ? undefined : props.loading }\n                  indeterminate\n                  v-slots={{ default: slots.loader }}\n                />\n              </th>\n            </tr>\n          )}\n        </>\n      )\n    })\n  },\n})\n\nexport type VDataTableHeaders = InstanceType<typeof VDataTableHeaders>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VDataTable/VDataTableRow.mjs

@@ -1,11 +1,13 @@
-import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+import { mergeProps as _mergeProps, Fragment as _Fragment, createVNode as _createVNode } from "vue";
 // Components
+import { VDataTableColumn } from "./VDataTableColumn.mjs";
 import { VBtn } from "../VBtn/index.mjs";
 import { VCheckboxBtn } from "../VCheckbox/index.mjs"; // Composables
 import { useExpanded } from "./composables/expand.mjs";
 import { useHeaders } from "./composables/headers.mjs";
 import { useSelection } from "./composables/select.mjs";
-import { VDataTableColumn } from "./VDataTableColumn.mjs"; // Utilities
+import { useSort } from "./composables/sort.mjs";
+import { makeDisplayProps, useDisplay } from "../../composables/display.mjs"; // Utilities
 import { toDisplayString, withModifiers } from 'vue';
 import { EventProp, genericComponent, getObjectValueByPath, propsFactory, useRender } from "../../util/index.mjs"; // Types
 export const makeVDataTableRowProps = propsFactory({
@@ -14,7 +16,8 @@ export const makeVDataTableRowProps = propsFactory({
   cellProps: [Object, Function],
   onClick: EventProp(),
   onContextmenu: EventProp(),
-  onDblclick: EventProp()
+  onDblclick: EventProp(),
+  ...makeDisplayProps()
 }, 'VDataTableRow');
 export const VDataTableRow = genericComponent()({
   name: 'VDataTableRow',
@@ -23,27 +26,40 @@ export const VDataTableRow = genericComponent()({
     let {
       slots
     } = _ref;
+    const {
+      displayClasses,
+      mobile
+    } = useDisplay(props, 'v-data-table__tr');
     const {
       isSelected,
-      toggleSelect
+      toggleSelect,
+      someSelected,
+      allSelected,
+      selectAll
     } = useSelection();
     const {
       isExpanded,
       toggleExpand
     } = useExpanded();
+    const {
+      toggleSort,
+      sortBy,
+      isSorted
+    } = useSort();
     const {
       columns
     } = useHeaders();
     useRender(() => _createVNode("tr", {
       "class": ['v-data-table__tr', {
         'v-data-table__tr--clickable': !!(props.onClick || props.onContextmenu || props.onDblclick)
-      }],
+      }, displayClasses.value],
       "onClick": props.onClick,
       "onContextmenu": props.onContextmenu,
       "onDblclick": props.onDblclick
     }, [props.item && columns.value.map((column, i) => {
       const item = props.item;
       const slotName = `item.${column.key}`;
+      const headerSlotName = `header.${column.key}`;
       const slotProps = {
         index: props.index,
         item: item.raw,
@@ -55,6 +71,16 @@ export const VDataTableRow = genericComponent()({
         isExpanded,
         toggleExpand
       };
+      const columnSlotProps = {
+        column,
+        selectAll,
+        isSorted,
+        toggleSort,
+        sortBy: sortBy.value,
+        someSelected: someSelected.value,
+        allSelected: allSelected.value,
+        getSortIcon: () => ''
+      };
       const cellProps = typeof props.cellProps === 'function' ? props.cellProps({
         index: slotProps.index,
         item: slotProps.item,
@@ -70,16 +96,20 @@ export const VDataTableRow = genericComponent()({
       }) : column.cellProps;
       return _createVNode(VDataTableColumn, _mergeProps({
         "align": column.align,
+        "class": {
+          'v-data-table__td--expanded-row': column.key === 'data-table-expand',
+          'v-data-table__td--select-row': column.key === 'data-table-select'
+        },
         "fixed": column.fixed,
         "fixedOffset": column.fixedOffset,
         "lastFixed": column.lastFixed,
+        "maxWidth": !mobile.value ? column.maxWidth : undefined,
         "noPadding": column.key === 'data-table-select' || column.key === 'data-table-expand',
-        "width": column.width,
-        "maxWidth": column.maxWidth,
-        "nowrap": column.nowrap
+        "nowrap": column.nowrap,
+        "width": !mobile.value ? column.width : undefined
       }, cellProps, columnCellProps), {
         default: () => {
-          if (slots[slotName]) return slots[slotName](slotProps);
+          if (slots[slotName] && !mobile.value) return slots[slotName]?.(slotProps);
           if (column.key === 'data-table-select') {
             return slots['item.data-table-select']?.(slotProps) ?? _createVNode(VCheckboxBtn, {
               "disabled": !item.selectable,
@@ -95,7 +125,12 @@ export const VDataTableRow = genericComponent()({
               "onClick": withModifiers(() => toggleExpand(item), ['stop'])
             }, null);
           }
-          return toDisplayString(slotProps.value);
+          const displayValue = toDisplayString(slotProps.value);
+          return !mobile.value ? displayValue : _createVNode(_Fragment, null, [_createVNode("div", {
+            "class": "v-data-table__td-title"
+          }, [slots[headerSlotName]?.(columnSlotProps) ?? column.title]), _createVNode("div", {
+            "class": "v-data-table__td-value"
+          }, [slots[slotName]?.(slotProps) ?? displayValue])]);
         }
       });
     })]));

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

@@ -1 +1 @@
-{"version":3,"file":"VDataTableRow.mjs","names":["VBtn","VCheckboxBtn","useExpanded","useHeaders","useSelection","VDataTableColumn","toDisplayString","withModifiers","EventProp","genericComponent","getObjectValueByPath","propsFactory","useRender","makeVDataTableRowProps","index","Number","item","Object","cellProps","Function","onClick","onContextmenu","onDblclick","VDataTableRow","name","props","setup","_ref","slots","isSelected","toggleSelect","isExpanded","toggleExpand","columns","_createVNode","value","map","column","i","slotName","key","slotProps","raw","internalItem","columnCellProps","_mergeProps","align","fixed","fixedOffset","lastFixed","width","maxWidth","nowrap","default","selectable"],"sources":["../../../src/components/VDataTable/VDataTableRow.tsx"],"sourcesContent":["// Components\nimport { VBtn } from '@/components/VBtn'\nimport { VCheckboxBtn } from '@/components/VCheckbox'\n\n// Composables\nimport { useExpanded } from './composables/expand'\nimport { useHeaders } from './composables/headers'\nimport { useSelection } from './composables/select'\nimport { VDataTableColumn } from './VDataTableColumn'\n\n// Utilities\nimport { toDisplayString, withModifiers } from 'vue'\nimport { EventProp, genericComponent, getObjectValueByPath, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { CellProps, DataTableItem, ItemKeySlot } from './types'\nimport type { GenericProps } from '@/util'\n\nexport type VDataTableRowSlots<T> = {\n  'item.data-table-select': Omit<ItemKeySlot<T>, 'value'>\n  'item.data-table-expand': Omit<ItemKeySlot<T>, 'value'>\n} & { [key: `item.${string}`]: ItemKeySlot<T> }\n\nexport const makeVDataTableRowProps = propsFactory({\n  index: Number,\n  item: Object as PropType<DataTableItem>,\n  cellProps: [Object, Function] as PropType<CellProps<any>>,\n  onClick: EventProp<[MouseEvent]>(),\n  onContextmenu: EventProp<[MouseEvent]>(),\n  onDblclick: EventProp<[MouseEvent]>(),\n}, 'VDataTableRow')\n\nexport const VDataTableRow = genericComponent<new <T>(\n  props: {\n    item?: DataTableItem<T>\n    cellProps?: CellProps<T>\n  },\n  slots: VDataTableRowSlots<T>,\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VDataTableRow',\n\n  props: makeVDataTableRowProps(),\n\n  setup (props, { slots }) {\n    const { isSelected, toggleSelect } = useSelection()\n    const { isExpanded, toggleExpand } = useExpanded()\n    const { columns } = useHeaders()\n\n    useRender(() => (\n      <tr\n        class={[\n          'v-data-table__tr',\n          {\n            'v-data-table__tr--clickable': !!(props.onClick || props.onContextmenu || props.onDblclick),\n          },\n        ]}\n        onClick={ props.onClick as any }\n        onContextmenu={ props.onContextmenu as any }\n        onDblclick={ props.onDblclick as any }\n      >\n        { props.item && columns.value.map((column, i) => {\n          const item = props.item!\n          const slotName = `item.${column.key}` as const\n          const slotProps = {\n            index: props.index!,\n            item: item.raw,\n            internalItem: item,\n            value: getObjectValueByPath(item.columns, column.key),\n            column,\n            isSelected,\n            toggleSelect,\n            isExpanded,\n            toggleExpand,\n          } satisfies ItemKeySlot<any>\n\n          const cellProps = typeof props.cellProps === 'function'\n            ? props.cellProps({\n              index: slotProps.index,\n              item: slotProps.item,\n              internalItem: slotProps.internalItem,\n              value: slotProps.value,\n              column,\n            })\n            : props.cellProps\n          const columnCellProps = typeof column.cellProps === 'function'\n            ? column.cellProps({\n              index: slotProps.index,\n              item: slotProps.item,\n              internalItem: slotProps.internalItem,\n              value: slotProps.value,\n            })\n            : column.cellProps\n\n          return (\n            <VDataTableColumn\n              align={ column.align }\n              fixed={ column.fixed }\n              fixedOffset={ column.fixedOffset }\n              lastFixed={ column.lastFixed }\n              noPadding={ column.key === 'data-table-select' || column.key === 'data-table-expand' }\n              width={ column.width }\n              maxWidth={ column.maxWidth }\n              nowrap={ column.nowrap }\n              { ...cellProps }\n              { ...columnCellProps }\n            >\n              {{\n                default: () => {\n                  if (slots[slotName]) return slots[slotName]!(slotProps)\n\n                  if (column.key === 'data-table-select') {\n                    return slots['item.data-table-select']?.(slotProps) ?? (\n                      <VCheckboxBtn\n                        disabled={ !item.selectable }\n                        modelValue={ isSelected([item]) }\n                        onClick={ withModifiers(() => toggleSelect(item), ['stop']) }\n                      />\n                    )\n                  }\n\n                  if (column.key === 'data-table-expand') {\n                    return slots['item.data-table-expand']?.(slotProps) ?? (\n                      <VBtn\n                        icon={ isExpanded(item) ? '$collapse' : '$expand' }\n                        size=\"small\"\n                        variant=\"text\"\n                        onClick={ withModifiers(() => toggleExpand(item), ['stop']) }\n                      />\n                    )\n                  }\n\n                  return toDisplayString(slotProps.value)\n                },\n              }}\n            </VDataTableColumn>\n          )\n        })}\n      </tr>\n    ))\n  },\n})\n\nexport type VDataTableRow = InstanceType<typeof VDataTableRow>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VDataTableRow.mjs","names":["VDataTableColumn","VBtn","VCheckboxBtn","useExpanded","useHeaders","useSelection","useSort","makeDisplayProps","useDisplay","toDisplayString","withModifiers","EventProp","genericComponent","getObjectValueByPath","propsFactory","useRender","makeVDataTableRowProps","index","Number","item","Object","cellProps","Function","onClick","onContextmenu","onDblclick","VDataTableRow","name","props","setup","_ref","slots","displayClasses","mobile","isSelected","toggleSelect","someSelected","allSelected","selectAll","isExpanded","toggleExpand","toggleSort","sortBy","isSorted","columns","_createVNode","value","map","column","i","slotName","key","headerSlotName","slotProps","raw","internalItem","columnSlotProps","getSortIcon","columnCellProps","_mergeProps","align","fixed","fixedOffset","lastFixed","maxWidth","undefined","nowrap","width","default","selectable","displayValue","_Fragment","title"],"sources":["../../../src/components/VDataTable/VDataTableRow.tsx"],"sourcesContent":["// Components\nimport { VDataTableColumn } from './VDataTableColumn'\nimport { VBtn } from '@/components/VBtn'\nimport { VCheckboxBtn } from '@/components/VCheckbox'\n\n// Composables\nimport { useExpanded } from './composables/expand'\nimport { useHeaders } from './composables/headers'\nimport { useSelection } from './composables/select'\nimport { useSort } from './composables/sort'\nimport { makeDisplayProps, useDisplay } from '@/composables/display'\n\n// Utilities\nimport { toDisplayString, withModifiers } from 'vue'\nimport { EventProp, genericComponent, getObjectValueByPath, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { CellProps, DataTableItem, ItemKeySlot } from './types'\nimport type { VDataTableHeaderCellColumnSlotProps } from './VDataTableHeaders'\nimport type { GenericProps } from '@/util'\n\nexport type VDataTableRowSlots<T> = {\n  'item.data-table-select': Omit<ItemKeySlot<T>, 'value'>\n  'item.data-table-expand': Omit<ItemKeySlot<T>, 'value'>\n  'header.data-table-select': VDataTableHeaderCellColumnSlotProps\n  'header.data-table-expand': VDataTableHeaderCellColumnSlotProps\n} & {\n  [key: `item.${string}`]: ItemKeySlot<T>\n  [key: `header.${string}`]: VDataTableHeaderCellColumnSlotProps\n}\n\nexport const makeVDataTableRowProps = propsFactory({\n  index: Number,\n  item: Object as PropType<DataTableItem>,\n  cellProps: [Object, Function] as PropType<CellProps<any>>,\n  onClick: EventProp<[MouseEvent]>(),\n  onContextmenu: EventProp<[MouseEvent]>(),\n  onDblclick: EventProp<[MouseEvent]>(),\n\n  ...makeDisplayProps(),\n}, 'VDataTableRow')\n\nexport const VDataTableRow = genericComponent<new <T>(\n  props: {\n    item?: DataTableItem<T>\n    cellProps?: CellProps<T>\n  },\n  slots: VDataTableRowSlots<T>,\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VDataTableRow',\n\n  props: makeVDataTableRowProps(),\n\n  setup (props, { slots }) {\n    const { displayClasses, mobile } = useDisplay(props, 'v-data-table__tr')\n    const { isSelected, toggleSelect, someSelected, allSelected, selectAll } = useSelection()\n    const { isExpanded, toggleExpand } = useExpanded()\n    const { toggleSort, sortBy, isSorted } = useSort()\n    const { columns } = useHeaders()\n\n    useRender(() => (\n      <tr\n        class={[\n          'v-data-table__tr',\n          {\n            'v-data-table__tr--clickable': !!(props.onClick || props.onContextmenu || props.onDblclick),\n          },\n          displayClasses.value,\n        ]}\n        onClick={ props.onClick as any }\n        onContextmenu={ props.onContextmenu as any }\n        onDblclick={ props.onDblclick as any }\n      >\n        { props.item && columns.value.map((column, i) => {\n          const item = props.item!\n          const slotName = `item.${column.key}` as const\n          const headerSlotName = `header.${column.key}` as const\n          const slotProps = {\n            index: props.index!,\n            item: item.raw,\n            internalItem: item,\n            value: getObjectValueByPath(item.columns, column.key),\n            column,\n            isSelected,\n            toggleSelect,\n            isExpanded,\n            toggleExpand,\n          } satisfies ItemKeySlot<any>\n\n          const columnSlotProps: VDataTableHeaderCellColumnSlotProps = {\n            column,\n            selectAll,\n            isSorted,\n            toggleSort,\n            sortBy: sortBy.value,\n            someSelected: someSelected.value,\n            allSelected: allSelected.value,\n            getSortIcon: () => '',\n          }\n\n          const cellProps = typeof props.cellProps === 'function'\n            ? props.cellProps({\n              index: slotProps.index,\n              item: slotProps.item,\n              internalItem: slotProps.internalItem,\n              value: slotProps.value,\n              column,\n            })\n            : props.cellProps\n          const columnCellProps = typeof column.cellProps === 'function'\n            ? column.cellProps({\n              index: slotProps.index,\n              item: slotProps.item,\n              internalItem: slotProps.internalItem,\n              value: slotProps.value,\n            })\n            : column.cellProps\n\n          return (\n            <VDataTableColumn\n              align={ column.align }\n              class={{\n                'v-data-table__td--expanded-row': column.key === 'data-table-expand',\n                'v-data-table__td--select-row': column.key === 'data-table-select',\n              }}\n              fixed={ column.fixed }\n              fixedOffset={ column.fixedOffset }\n              lastFixed={ column.lastFixed }\n              maxWidth={ !mobile.value ? column.maxWidth : undefined }\n              noPadding={ column.key === 'data-table-select' || column.key === 'data-table-expand' }\n              nowrap={ column.nowrap }\n              width={ !mobile.value ? column.width : undefined }\n              { ...cellProps }\n              { ...columnCellProps }\n            >\n              {{\n                default: () => {\n                  if (slots[slotName] && !mobile.value) return slots[slotName]?.(slotProps)\n\n                  if (column.key === 'data-table-select') {\n                    return slots['item.data-table-select']?.(slotProps) ?? (\n                      <VCheckboxBtn\n                        disabled={ !item.selectable }\n                        modelValue={ isSelected([item]) }\n                        onClick={ withModifiers(() => toggleSelect(item), ['stop']) }\n                      />\n                    )\n                  }\n\n                  if (column.key === 'data-table-expand') {\n                    return slots['item.data-table-expand']?.(slotProps) ?? (\n                      <VBtn\n                        icon={ isExpanded(item) ? '$collapse' : '$expand' }\n                        size=\"small\"\n                        variant=\"text\"\n                        onClick={ withModifiers(() => toggleExpand(item), ['stop']) }\n                      />\n                    )\n                  }\n\n                  const displayValue = toDisplayString(slotProps.value)\n\n                  return !mobile.value ? displayValue : (\n                    <>\n                      <div class=\"v-data-table__td-title\">\n                        { slots[headerSlotName]?.(columnSlotProps) ?? column.title }\n                      </div>\n\n                      <div class=\"v-data-table__td-value\">\n                        { slots[slotName]?.(slotProps) ?? displayValue }\n                      </div>\n                    </>\n                  )\n                },\n              }}\n            </VDataTableColumn>\n          )\n        })}\n      </tr>\n    ))\n  },\n})\n\nexport type VDataTableRow = InstanceType<typeof VDataTableRow>\n"],"mappings":"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","ignoreList":[]}