vuetify 3.0.7 → 3.1.1

package/lib/labs/VDataTable/VDataTableServer.mjs

@@ -0,0 +1,124 @@
+import { resolveDirective as _resolveDirective, createVNode as _createVNode, Fragment as _Fragment } from "vue";
+// Components
+import { VTable } from "../../components/VTable/index.mjs";
+import { VDataTableFooter } from "./VDataTableFooter.mjs";
+import { VDataTableHeaders } from "./VDataTableHeaders.mjs";
+import { VDataTableRows } from "./VDataTableRows.mjs"; // Composables
+import { createExpanded, makeDataTableExpandProps } from "./composables/expand.mjs";
+import { createHeaders, makeDataTableHeaderProps } from "./composables/headers.mjs";
+import { makeDataTableItemProps, useDataTableItems } from "./composables/items.mjs";
+import { createSort, makeDataTableSortProps } from "./composables/sort.mjs";
+import { createPagination, makeDataTablePaginateProps } from "./composables/paginate.mjs";
+import { createSelection, makeDataTableSelectProps } from "./composables/select.mjs";
+import { useOptions } from "./composables/options.mjs";
+import { provideDefaults } from "../../composables/defaults.mjs"; // Utilities
+import { provide, toRef } from 'vue';
+import { defineComponent, useRender } from "../../util/index.mjs";
+import { makeVDataTableProps } from "./VDataTable.mjs"; // Types
+export const VDataTableServer = defineComponent({
+  name: 'VDataTableServer',
+  props: {
+    color: String,
+    loading: [Boolean, String],
+    loadingText: {
+      type: String,
+      default: '$vuetify.dataIterator.loadingText'
+    },
+    itemsLength: [Number, String],
+    ...makeVDataTableProps(),
+    ...makeDataTableExpandProps(),
+    ...makeDataTableHeaderProps(),
+    ...makeDataTableItemProps(),
+    ...makeDataTableSelectProps(),
+    ...makeDataTableSortProps(),
+    ...makeDataTablePaginateProps()
+  },
+  emits: {
+    'update:modelValue': value => true,
+    'update:page': page => true,
+    'update:itemsPerPage': page => true,
+    'update:sortBy': sortBy => true,
+    'update:options': options => true,
+    'update:expanded': options => true,
+    'click:row': (event, value) => true
+  },
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    createExpanded(props);
+    const {
+      columns
+    } = createHeaders(props, {
+      showSelect: toRef(props, 'showSelect'),
+      showExpand: toRef(props, 'showExpand')
+    });
+    const {
+      items
+    } = useDataTableItems(props, columns);
+    const {
+      sortBy,
+      toggleSort
+    } = createSort(props);
+    const {
+      page,
+      itemsPerPage,
+      startIndex,
+      stopIndex,
+      pageCount
+    } = createPagination(props, items);
+    createSelection(props, items);
+    useOptions({
+      page,
+      itemsPerPage,
+      sortBy,
+      startIndex,
+      stopIndex,
+      pageCount
+    });
+    provide('v-data-table', {
+      toggleSort,
+      sortBy
+    });
+    provideDefaults({
+      VDataTableRows: {
+        hideNoData: toRef(props, 'hideNoData'),
+        noDataText: toRef(props, 'noDataText'),
+        loading: toRef(props, 'loading'),
+        loadingText: toRef(props, 'loadingText')
+      }
+    });
+    useRender(() => _createVNode(VTable, {
+      "class": ['v-data-table', {
+        'v-data-table--loading': props.loading
+      }],
+      "fixedHeader": props.fixedHeader,
+      "fixedFooter": props.fixedFooter,
+      "height": props.height
+    }, {
+      top: slots.top,
+      default: slots.default ? slots.default() : () => {
+        var _slots$thead, _slots$tbody, _slots$tfoot;
+        return _createVNode(_Fragment, null, [_createVNode("thead", {
+          "class": "v-data-table__thead",
+          "role": "rowgroup"
+        }, [slots.headers ? slots.headers() : _createVNode(VDataTableHeaders, {
+          "sticky": props.fixedHeader,
+          "loading": props.loading,
+          "color": props.color
+        }, null)]), (_slots$thead = slots.thead) == null ? void 0 : _slots$thead.call(slots), _createVNode("tbody", {
+          "class": "v-data-table__tbody",
+          "role": "rowgroup"
+        }, [slots.body ? slots.body() : _createVNode(VDataTableRows, {
+          "items": items.value,
+          "onClick:row": (event, value) => emit('click:row', event, value)
+        }, slots)]), (_slots$tbody = slots.tbody) == null ? void 0 : _slots$tbody.call(slots), (_slots$tfoot = slots.tfoot) == null ? void 0 : _slots$tfoot.call(slots)]);
+      },
+      bottom: slots.bottom ? slots.bottom() : () => _createVNode(VDataTableFooter, null, {
+        prepend: slots['footer.prepend']
+      })
+    }));
+  }
+});
+//# sourceMappingURL=VDataTableServer.mjs.map

package/lib/labs/VDataTable/VDataTableServer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VDataTableServer.mjs","names":["VTable","VDataTableFooter","VDataTableHeaders","VDataTableRows","createExpanded","makeDataTableExpandProps","createHeaders","makeDataTableHeaderProps","makeDataTableItemProps","useDataTableItems","createSort","makeDataTableSortProps","createPagination","makeDataTablePaginateProps","createSelection","makeDataTableSelectProps","useOptions","provideDefaults","provide","toRef","defineComponent","useRender","makeVDataTableProps","VDataTableServer","name","props","color","String","loading","Boolean","loadingText","type","default","itemsLength","Number","emits","value","page","sortBy","options","event","setup","emit","slots","columns","showSelect","showExpand","items","toggleSort","itemsPerPage","startIndex","stopIndex","pageCount","hideNoData","noDataText","fixedHeader","fixedFooter","height","top","headers","thead","body","tbody","tfoot","bottom","prepend"],"sources":["../../../src/labs/VDataTable/VDataTableServer.tsx"],"sourcesContent":["// Components\nimport { VTable } from '@/components/VTable'\nimport { VDataTableFooter } from './VDataTableFooter'\nimport { VDataTableHeaders } from './VDataTableHeaders'\nimport { VDataTableRows } from './VDataTableRows'\n\n// Composables\nimport { createExpanded, makeDataTableExpandProps } from './composables/expand'\nimport { createHeaders, makeDataTableHeaderProps } from './composables/headers'\nimport { makeDataTableItemProps, useDataTableItems } from './composables/items'\nimport { createSort, makeDataTableSortProps } from './composables/sort'\nimport { createPagination, makeDataTablePaginateProps } from './composables/paginate'\nimport { createSelection, makeDataTableSelectProps } from './composables/select'\nimport { useOptions } from './composables/options'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utilities\nimport { provide, toRef } from 'vue'\nimport { defineComponent, useRender } from '@/util'\nimport { makeVDataTableProps } from './VDataTable'\n\n// Types\nimport type { DataTableItem } from './types'\n\nexport const VDataTableServer = defineComponent({\n  name: 'VDataTableServer',\n\n  props: {\n    color: String,\n    loading: [Boolean, String],\n    loadingText: {\n      type: String,\n      default: '$vuetify.dataIterator.loadingText',\n    },\n    itemsLength: [Number, String],\n\n    ...makeVDataTableProps(),\n    ...makeDataTableExpandProps(),\n    ...makeDataTableHeaderProps(),\n    ...makeDataTableItemProps(),\n    ...makeDataTableSelectProps(),\n    ...makeDataTableSortProps(),\n    ...makeDataTablePaginateProps(),\n  },\n\n  emits: {\n    'update:modelValue': (value: any[]) => true,\n    'update:page': (page: number) => true,\n    'update:itemsPerPage': (page: number) => true,\n    'update:sortBy': (sortBy: any) => true,\n    'update:options': (options: any) => true,\n    'update:expanded': (options: any) => true,\n    'click:row': (event: Event, value: { item: DataTableItem }) => true,\n  },\n\n  setup (props, { emit, slots }) {\n    createExpanded(props)\n\n    const { columns } = createHeaders(props, {\n      showSelect: toRef(props, 'showSelect'),\n      showExpand: toRef(props, 'showExpand'),\n    })\n\n    const { items } = useDataTableItems(props, columns)\n\n    const { sortBy, toggleSort } = createSort(props)\n\n    const { page, itemsPerPage, startIndex, stopIndex, pageCount } = createPagination(props, items)\n\n    createSelection(props, items)\n\n    useOptions({\n      page,\n      itemsPerPage,\n      sortBy,\n      startIndex,\n      stopIndex,\n      pageCount,\n    })\n\n    provide('v-data-table', {\n      toggleSort,\n      sortBy,\n    })\n\n    provideDefaults({\n      VDataTableRows: {\n        hideNoData: toRef(props, 'hideNoData'),\n        noDataText: toRef(props, 'noDataText'),\n        loading: toRef(props, 'loading'),\n        loadingText: toRef(props, 'loadingText'),\n      },\n    })\n\n    useRender(() => (\n      <VTable\n        class={[\n          'v-data-table',\n          {\n            'v-data-table--loading': props.loading,\n          },\n        ]}\n        fixedHeader={ props.fixedHeader }\n        fixedFooter={ props.fixedFooter }\n        height={ props.height }\n      >\n        {{\n          top: slots.top,\n          default: slots.default ? slots.default() : () => (\n            <>\n              <thead class=\"v-data-table__thead\" role=\"rowgroup\">\n                { slots.headers ? slots.headers() : (\n                  <VDataTableHeaders\n                    sticky={ props.fixedHeader }\n                    loading={ props.loading }\n                    color={ props.color }\n                  />\n                ) }\n              </thead>\n              { slots.thead?.() }\n              <tbody class=\"v-data-table__tbody\" role=\"rowgroup\">\n                { slots.body ? slots.body() : (\n                  <VDataTableRows\n                    items={ items.value }\n                    onClick:row={ (event, value) => emit('click:row', event, value) }\n                    v-slots={ slots }\n                  />\n                ) }\n              </tbody>\n              { slots.tbody?.() }\n              { slots.tfoot?.() }\n            </>\n          ),\n          bottom: slots.bottom ? slots.bottom() : () => (\n            <VDataTableFooter\n              v-slots={{\n                prepend: slots['footer.prepend'],\n              }}\n            />\n          ),\n        }}\n      </VTable>\n    ))\n  },\n})\n\nexport type VDataTableServer = InstanceType<typeof VDataTableServer>\n"],"mappings":"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"}

package/lib/labs/VDataTable/VDataTableVirtual.mjs

@@ -0,0 +1,154 @@
+import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
+// Components
+import { VTable } from "../../components/VTable/index.mjs";
+import { VDataTableHeaders } from "./VDataTableHeaders.mjs";
+import { VDataTableRows } from "./VDataTableRows.mjs"; // Composables
+import { useProxiedModel } from "../../composables/proxiedModel.mjs";
+import { createHeaders, makeDataTableHeaderProps } from "./composables/headers.mjs";
+import { makeDataTableItemProps, useDataTableItems } from "./composables/items.mjs";
+import { createExpanded, makeDataTableExpandProps } from "./composables/expand.mjs";
+import { createSort, makeDataTableSortProps, useSortedItems } from "./composables/sort.mjs";
+import { createGroupBy, makeDataTableGroupProps, useGroupedItems } from "./composables/group.mjs";
+import { createSelection, makeDataTableSelectProps } from "./composables/select.mjs";
+import { makeDataTableVirtualProps, useVirtual } from "./composables/virtual.mjs";
+import { useOptions } from "./composables/options.mjs";
+import { makeFilterProps, useFilter } from "../../composables/filter.mjs";
+import { provideDefaults } from "../../composables/defaults.mjs"; // Utlities
+import { computed, ref, toRef } from 'vue';
+import { convertToUnit, defineComponent, useRender } from "../../util/index.mjs";
+import { makeVDataTableProps } from "./VDataTable.mjs"; // Types
+export const VDataTableVirtual = defineComponent({
+  name: 'VDataTableVirtual',
+  props: {
+    search: String,
+    ...makeVDataTableProps(),
+    ...makeVDataTableProps(),
+    ...makeDataTableGroupProps(),
+    ...makeDataTableExpandProps(),
+    ...makeDataTableHeaderProps(),
+    ...makeDataTableItemProps(),
+    ...makeDataTableSelectProps(),
+    ...makeDataTableSortProps(),
+    ...makeDataTableVirtualProps(),
+    ...makeFilterProps()
+  },
+  emits: {
+    'update:modelValue': value => true,
+    'update:sortBy': value => true,
+    'update:options': value => true,
+    'update:groupBy': value => true,
+    'update:expanded': value => true,
+    'click:row': (event, value) => true
+  },
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    const groupBy = useProxiedModel(props, 'groupBy');
+    const {
+      columns
+    } = createHeaders(props, {
+      groupBy,
+      showSelect: toRef(props, 'showSelect'),
+      showExpand: toRef(props, 'showExpand')
+    });
+    const {
+      items
+    } = useDataTableItems(props, columns);
+    const {
+      filteredItems
+    } = useFilter(props, items, toRef(props, 'search'));
+    const {
+      sortBy
+    } = createSort(props);
+    const {
+      sortByWithGroups,
+      opened,
+      extractRows
+    } = createGroupBy(props, groupBy, sortBy);
+    const {
+      sortedItems
+    } = useSortedItems(filteredItems, sortByWithGroups, columns);
+    const {
+      flatItems
+    } = useGroupedItems(sortedItems, groupBy, opened);
+    const allRows = computed(() => extractRows(flatItems.value));
+    createSelection(props, allRows);
+    createExpanded(props);
+    const {
+      containerRef,
+      paddingTop,
+      paddingBottom,
+      startIndex,
+      stopIndex,
+      itemHeight,
+      handleScroll
+    } = useVirtual(props, flatItems);
+    const visibleItems = computed(() => {
+      return flatItems.value.slice(startIndex.value, stopIndex.value);
+    });
+    useOptions({
+      sortBy,
+      page: ref(1),
+      startIndex: ref(0),
+      stopIndex: computed(() => flatItems.value.length - 1),
+      pageCount: ref(1),
+      itemsPerPage: ref(-1)
+    });
+    provideDefaults({
+      VDataTableRows: {
+        hideNoData: toRef(props, 'hideNoData'),
+        noDataText: toRef(props, 'noDataText')
+      }
+    });
+    useRender(() => _createVNode(VTable, {
+      "class": "v-data-table",
+      "style": {
+        '--v-table-row-height': convertToUnit(itemHeight.value)
+      },
+      "height": props.height,
+      "fixedHeader": props.fixedHeader
+    }, {
+      top: slots.top,
+      wrapper: () => _createVNode("div", {
+        "ref": containerRef,
+        "onScroll": handleScroll,
+        "class": "v-table__wrapper",
+        "style": {
+          height: convertToUnit(props.height)
+        }
+      }, [_createVNode("table", null, [_createVNode("thead", null, [_createVNode(VDataTableHeaders, {
+        "sticky": props.fixedHeader,
+        "multiSort": props.multiSort
+      }, slots)]), _createVNode("tbody", null, [_createVNode("tr", {
+        "style": {
+          height: convertToUnit(paddingTop.value),
+          border: 0
+        }
+      }, [_createVNode("td", {
+        "colspan": columns.value.length,
+        "style": {
+          height: convertToUnit(paddingTop.value),
+          border: 0
+        }
+      }, null)]), _createVNode(VDataTableRows, {
+        "items": visibleItems.value,
+        "onClick:row": (event, value) => emit('click:row', event, value)
+      }, slots), _createVNode("tr", {
+        "style": {
+          height: convertToUnit(paddingBottom.value),
+          border: 0
+        }
+      }, [_createVNode("td", {
+        "colspan": columns.value.length,
+        "style": {
+          height: convertToUnit(paddingBottom.value),
+          border: 0
+        }
+      }, null)])])])]),
+      bottom: slots.bottom
+    }));
+  }
+});
+//# sourceMappingURL=VDataTableVirtual.mjs.map

package/lib/labs/VDataTable/VDataTableVirtual.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VDataTableVirtual.mjs","names":["VTable","VDataTableHeaders","VDataTableRows","useProxiedModel","createHeaders","makeDataTableHeaderProps","makeDataTableItemProps","useDataTableItems","createExpanded","makeDataTableExpandProps","createSort","makeDataTableSortProps","useSortedItems","createGroupBy","makeDataTableGroupProps","useGroupedItems","createSelection","makeDataTableSelectProps","makeDataTableVirtualProps","useVirtual","useOptions","makeFilterProps","useFilter","provideDefaults","computed","ref","toRef","convertToUnit","defineComponent","useRender","makeVDataTableProps","VDataTableVirtual","name","props","search","String","emits","value","event","setup","emit","slots","groupBy","columns","showSelect","showExpand","items","filteredItems","sortBy","sortByWithGroups","opened","extractRows","sortedItems","flatItems","allRows","containerRef","paddingTop","paddingBottom","startIndex","stopIndex","itemHeight","handleScroll","visibleItems","slice","page","length","pageCount","itemsPerPage","hideNoData","noDataText","height","fixedHeader","top","wrapper","multiSort","border","bottom"],"sources":["../../../src/labs/VDataTable/VDataTableVirtual.tsx"],"sourcesContent":["// Components\nimport { VTable } from '@/components/VTable'\nimport { VDataTableHeaders } from './VDataTableHeaders'\nimport { VDataTableRows } from './VDataTableRows'\n\n// Composables\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { createHeaders, makeDataTableHeaderProps } from './composables/headers'\nimport { makeDataTableItemProps, useDataTableItems } from './composables/items'\nimport { createExpanded, makeDataTableExpandProps } from './composables/expand'\nimport { createSort, makeDataTableSortProps, useSortedItems } from './composables/sort'\nimport { createGroupBy, makeDataTableGroupProps, useGroupedItems } from './composables/group'\nimport { createSelection, makeDataTableSelectProps } from './composables/select'\nimport { makeDataTableVirtualProps, useVirtual } from './composables/virtual'\nimport { useOptions } from './composables/options'\nimport { makeFilterProps, useFilter } from '@/composables/filter'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utlities\nimport { computed, ref, toRef } from 'vue'\nimport { convertToUnit, defineComponent, useRender } from '@/util'\nimport { makeVDataTableProps } from './VDataTable'\n\n// Types\nimport type { DataTableItem } from './types'\n\nexport const VDataTableVirtual = defineComponent({\n  name: 'VDataTableVirtual',\n\n  props: {\n    search: String,\n\n    ...makeVDataTableProps(),\n    ...makeVDataTableProps(),\n    ...makeDataTableGroupProps(),\n    ...makeDataTableExpandProps(),\n    ...makeDataTableHeaderProps(),\n    ...makeDataTableItemProps(),\n    ...makeDataTableSelectProps(),\n    ...makeDataTableSortProps(),\n    ...makeDataTableVirtualProps(),\n    ...makeFilterProps(),\n  },\n\n  emits: {\n    'update:modelValue': (value: any[]) => true,\n    'update:sortBy': (value: any) => true,\n    'update:options': (value: any) => true,\n    'update:groupBy': (value: any) => true,\n    'update:expanded': (value: any) => true,\n    'click:row': (event: Event, value: { item: DataTableItem }) => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const groupBy = useProxiedModel(props, 'groupBy')\n    const { columns } = createHeaders(props, {\n      groupBy,\n      showSelect: toRef(props, 'showSelect'),\n      showExpand: toRef(props, 'showExpand'),\n    })\n    const { items } = useDataTableItems(props, columns)\n\n    const { filteredItems } = useFilter<DataTableItem>(props, items, toRef(props, 'search'))\n\n    const { sortBy } = createSort(props)\n    const { sortByWithGroups, opened, extractRows } = createGroupBy(props, groupBy, sortBy)\n\n    const { sortedItems } = useSortedItems(filteredItems, sortByWithGroups, columns)\n    const { flatItems } = useGroupedItems(sortedItems, groupBy, opened)\n\n    const allRows = computed(() => extractRows(flatItems.value))\n\n    createSelection(props, allRows)\n    createExpanded(props)\n\n    const {\n      containerRef,\n      paddingTop,\n      paddingBottom,\n      startIndex,\n      stopIndex,\n      itemHeight,\n      handleScroll,\n    } = useVirtual(props, flatItems)\n\n    const visibleItems = computed(() => {\n      return flatItems.value.slice(startIndex.value, stopIndex.value)\n    })\n\n    useOptions({\n      sortBy,\n      page: ref(1),\n      startIndex: ref(0),\n      stopIndex: computed(() => flatItems.value.length - 1),\n      pageCount: ref(1),\n      itemsPerPage: ref(-1),\n    })\n\n    provideDefaults({\n      VDataTableRows: {\n        hideNoData: toRef(props, 'hideNoData'),\n        noDataText: toRef(props, 'noDataText'),\n      },\n    })\n\n    useRender(() => (\n      <VTable\n        class=\"v-data-table\"\n        style={{\n          '--v-table-row-height': convertToUnit(itemHeight.value),\n        }}\n        height={ props.height }\n        fixedHeader={ props.fixedHeader }\n      >\n        {{\n          top: slots.top,\n          wrapper: () => (\n            <div\n              ref={ containerRef }\n              onScroll={ handleScroll }\n              class=\"v-table__wrapper\"\n              style={{\n                height: convertToUnit(props.height),\n              }}\n            >\n              <table>\n                <thead>\n                  <VDataTableHeaders\n                    sticky={ props.fixedHeader }\n                    multiSort={ props.multiSort }\n                    v-slots={ slots }\n                  />\n                </thead>\n                <tbody>\n                  <tr style={{ height: convertToUnit(paddingTop.value), border: 0 }}>\n                    <td colspan={columns.value.length} style={{ height: convertToUnit(paddingTop.value), border: 0 }}></td>\n                  </tr>\n\n                  <VDataTableRows\n                    items={visibleItems.value}\n                    onClick:row={ (event, value) => emit('click:row', event, value) }\n                    v-slots={ slots }\n                  />\n\n                  <tr style={{ height: convertToUnit(paddingBottom.value), border: 0 }}>\n                    <td colspan={columns.value.length} style={{ height: convertToUnit(paddingBottom.value), border: 0 }}></td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n          ),\n          bottom: slots.bottom,\n        }}\n      </VTable>\n    ))\n  },\n})\n\nexport type VDataTableVirtual = InstanceType<typeof VDataTableVirtual>\n"],"mappings":"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"}

package/lib/labs/VDataTable/_variables.scss

@@ -0,0 +1,6 @@
+@use '../../styles/settings';
+@use '../../styles/tools';
+
+$data-table-footer-padding: 0 8px !default;
+$data-table-header-sort-badge-size: 20px !default;
+$data-table-header-sort-badge-color: rgba(var(--v-border-color), var(--v-border-opacity)) !default;

package/lib/labs/VDataTable/composables/expand.mjs

@@ -0,0 +1,51 @@
+// Utilities
+import { inject, provide, toRef } from 'vue';
+import { propsFactory } from "../../../util/index.mjs"; // Composables
+import { useProxiedModel } from "../../../composables/proxiedModel.mjs"; // Types
+export const makeDataTableExpandProps = propsFactory({
+  expandOnClick: Boolean,
+  showExpand: Boolean,
+  expanded: {
+    type: Array,
+    default: () => []
+  }
+}, 'v-data-table-expand');
+export const VDataTableExpandedKey = Symbol.for('vuetify:datatable:expanded');
+export function createExpanded(props) {
+  const expandOnClick = toRef(props, 'expandOnClick');
+  const expanded = useProxiedModel(props, 'expanded', props.expanded, v => {
+    return new Set(v);
+  }, v => {
+    return [...v.values()];
+  });
+  function expand(item, value) {
+    const newExpanded = new Set(expanded.value);
+    if (!value) {
+      newExpanded.delete(item.value);
+    } else {
+      newExpanded.add(item.value);
+    }
+    expanded.value = newExpanded;
+  }
+  function isExpanded(item) {
+    return expanded.value.has(item.value);
+  }
+  function toggleExpand(item) {
+    expand(item, !isExpanded(item));
+  }
+  const data = {
+    expand,
+    expanded,
+    expandOnClick,
+    isExpanded,
+    toggleExpand
+  };
+  provide(VDataTableExpandedKey, data);
+  return data;
+}
+export function useExpanded() {
+  const data = inject(VDataTableExpandedKey);
+  if (!data) throw new Error('foo');
+  return data;
+}
+//# sourceMappingURL=expand.mjs.map

package/lib/labs/VDataTable/composables/expand.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"expand.mjs","names":["inject","provide","toRef","propsFactory","useProxiedModel","makeDataTableExpandProps","expandOnClick","Boolean","showExpand","expanded","type","Array","default","VDataTableExpandedKey","Symbol","for","createExpanded","props","v","Set","values","expand","item","value","newExpanded","delete","add","isExpanded","has","toggleExpand","data","useExpanded","Error"],"sources":["../../../../src/labs/VDataTable/composables/expand.ts"],"sourcesContent":["// Utilities\nimport { inject, provide, toRef } from 'vue'\nimport { propsFactory } from '@/util'\n\n// Composables\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Types\nimport type { InjectionKey, PropType, Ref } from 'vue'\nimport type { DataTableItem } from '../types'\n\nexport const makeDataTableExpandProps = propsFactory({\n  expandOnClick: Boolean,\n  showExpand: Boolean,\n  expanded: {\n    type: Array as PropType<string[]>,\n    default: () => ([]),\n  },\n}, 'v-data-table-expand')\n\nexport const VDataTableExpandedKey: InjectionKey<{\n  expand: (item: DataTableItem, value: boolean) => void\n  expanded: Ref<Set<string>>\n  expandOnClick: Ref<boolean | undefined>\n  isExpanded: (item: DataTableItem) => boolean\n  toggleExpand: (item: DataTableItem) => void\n}> = Symbol.for('vuetify:datatable:expanded')\n\ntype ExpandProps = {\n  expandOnClick: boolean\n  expanded: string[]\n  'onUpdate:expanded': ((value: any[]) => void) | undefined\n}\n\nexport function createExpanded (props: ExpandProps) {\n  const expandOnClick = toRef(props, 'expandOnClick')\n  const expanded = useProxiedModel(props, 'expanded', props.expanded, v => {\n    return new Set(v)\n  }, v => {\n    return [...v.values()]\n  })\n\n  function expand (item: DataTableItem, value: boolean) {\n    const newExpanded = new Set(expanded.value)\n\n    if (!value) {\n      newExpanded.delete(item.value)\n    } else {\n      newExpanded.add(item.value)\n    }\n\n    expanded.value = newExpanded\n  }\n\n  function isExpanded (item: DataTableItem) {\n    return expanded.value.has(item.value)\n  }\n\n  function toggleExpand (item: DataTableItem) {\n    expand(item, !isExpanded(item))\n  }\n\n  const data = { expand, expanded, expandOnClick, isExpanded, toggleExpand }\n\n  provide(VDataTableExpandedKey, data)\n\n  return data\n}\n\nexport function useExpanded () {\n  const data = inject(VDataTableExpandedKey)\n\n  if (!data) throw new Error('foo')\n\n  return data\n}\n"],"mappings":"AAAA;AACA,SAASA,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAQ,KAAK;AAAA,SACnCC,YAAY,mCAErB;AAAA,SACSC,eAAe,iDAExB;AAIA,OAAO,MAAMC,wBAAwB,GAAGF,YAAY,CAAC;EACnDG,aAAa,EAAEC,OAAO;EACtBC,UAAU,EAAED,OAAO;EACnBE,QAAQ,EAAE;IACRC,IAAI,EAAEC,KAA2B;IACjCC,OAAO,EAAE,MAAO;EAClB;AACF,CAAC,EAAE,qBAAqB,CAAC;AAEzB,OAAO,MAAMC,qBAMX,GAAGC,MAAM,CAACC,GAAG,CAAC,4BAA4B,CAAC;AAQ7C,OAAO,SAASC,cAAc,CAAEC,KAAkB,EAAE;EAClD,MAAMX,aAAa,GAAGJ,KAAK,CAACe,KAAK,EAAE,eAAe,CAAC;EACnD,MAAMR,QAAQ,GAAGL,eAAe,CAACa,KAAK,EAAE,UAAU,EAAEA,KAAK,CAACR,QAAQ,EAAES,CAAC,IAAI;IACvE,OAAO,IAAIC,GAAG,CAACD,CAAC,CAAC;EACnB,CAAC,EAAEA,CAAC,IAAI;IACN,OAAO,CAAC,GAAGA,CAAC,CAACE,MAAM,EAAE,CAAC;EACxB,CAAC,CAAC;EAEF,SAASC,MAAM,CAAEC,IAAmB,EAAEC,KAAc,EAAE;IACpD,MAAMC,WAAW,GAAG,IAAIL,GAAG,CAACV,QAAQ,CAACc,KAAK,CAAC;IAE3C,IAAI,CAACA,KAAK,EAAE;MACVC,WAAW,CAACC,MAAM,CAACH,IAAI,CAACC,KAAK,CAAC;IAChC,CAAC,MAAM;MACLC,WAAW,CAACE,GAAG,CAACJ,IAAI,CAACC,KAAK,CAAC;IAC7B;IAEAd,QAAQ,CAACc,KAAK,GAAGC,WAAW;EAC9B;EAEA,SAASG,UAAU,CAAEL,IAAmB,EAAE;IACxC,OAAOb,QAAQ,CAACc,KAAK,CAACK,GAAG,CAACN,IAAI,CAACC,KAAK,CAAC;EACvC;EAEA,SAASM,YAAY,CAAEP,IAAmB,EAAE;IAC1CD,MAAM,CAACC,IAAI,EAAE,CAACK,UAAU,CAACL,IAAI,CAAC,CAAC;EACjC;EAEA,MAAMQ,IAAI,GAAG;IAAET,MAAM;IAAEZ,QAAQ;IAAEH,aAAa;IAAEqB,UAAU;IAAEE;EAAa,CAAC;EAE1E5B,OAAO,CAACY,qBAAqB,EAAEiB,IAAI,CAAC;EAEpC,OAAOA,IAAI;AACb;AAEA,OAAO,SAASC,WAAW,GAAI;EAC7B,MAAMD,IAAI,GAAG9B,MAAM,CAACa,qBAAqB,CAAC;EAE1C,IAAI,CAACiB,IAAI,EAAE,MAAM,IAAIE,KAAK,CAAC,KAAK,CAAC;EAEjC,OAAOF,IAAI;AACb"}

package/lib/labs/VDataTable/composables/group.mjs

@@ -0,0 +1,124 @@
+// Utilities
+import { computed, inject, provide, ref } from 'vue';
+import { getObjectValueByPath, propsFactory } from "../../../util/index.mjs"; // Types
+export const makeDataTableGroupProps = propsFactory({
+  groupBy: {
+    type: Array,
+    default: () => []
+  }
+}, 'data-table-group');
+const VDataTableGroupSymbol = Symbol.for('vuetify:data-table-group');
+export function createGroupBy(props, groupBy, sortBy) {
+  const opened = ref(new Set());
+  const sortByWithGroups = computed(() => {
+    return groupBy.value.map(val => ({
+      ...val,
+      order: val.order ?? false
+    })).concat(sortBy.value);
+  });
+  function toggleGroup(group, value) {
+    const open = value == null ? !opened.value.has(group) : value;
+    if (open) opened.value.add(group);else opened.value.delete(group);
+  }
+  function extractRows(items) {
+    function dive(group) {
+      const arr = [];
+      for (const item of group.items) {
+        if (item.type === 'item') arr.push(item);else {
+          arr.push(...dive(item));
+        }
+      }
+      return arr;
+    }
+    return dive({
+      type: 'group-header',
+      items,
+      id: 'dummy',
+      key: 'dummy',
+      value: 'dummy',
+      depth: 0
+    });
+  }
+
+  // onBeforeMount(() => {
+  //   for (const key of groupedItems.value.keys()) {
+  //     opened.value.add(key)
+  //   }
+  // })
+
+  const data = {
+    sortByWithGroups,
+    toggleGroup,
+    opened,
+    groupBy,
+    extractRows
+  };
+  provide(VDataTableGroupSymbol, data);
+  return data;
+}
+export function useGroupBy() {
+  const data = inject(VDataTableGroupSymbol);
+  if (!data) throw new Error('Missing group!');
+  return data;
+}
+function groupItemsByProperty(items, groupBy) {
+  if (!items.length) return [];
+  const groups = new Map();
+  for (const item of items) {
+    const value = getObjectValueByPath(item.raw, groupBy);
+    if (!groups.has(value)) {
+      groups.set(value, []);
+    }
+    groups.get(value).push(item);
+  }
+  return groups;
+}
+function groupItems(items, groupBy) {
+  let depth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  let prefix = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'root';
+  if (!groupBy.length) return [];
+  const groupedItems = groupItemsByProperty(items, groupBy[0]);
+  const groups = [];
+  const rest = groupBy.slice(1);
+  groupedItems.forEach((items, value) => {
+    const key = groupBy[0];
+    const id = `${prefix}_${key}_${value}`;
+    groups.push({
+      depth,
+      id,
+      key,
+      value,
+      items: rest.length ? groupItems(items, rest, depth + 1, id) : items,
+      type: 'group-header'
+    });
+  });
+  return groups;
+}
+function flattenItems(items, opened) {
+  const flatItems = [];
+  for (const item of items) {
+    // TODO: make this better
+    if (item.type === 'group-header') {
+      if (item.value != null) {
+        flatItems.push(item);
+      }
+      if (opened.has(item.id) || item.value == null) {
+        flatItems.push(...flattenItems(item.items, opened));
+      }
+    } else {
+      flatItems.push(item);
+    }
+  }
+  return flatItems;
+}
+export function useGroupedItems(items, groupBy, opened) {
+  const flatItems = computed(() => {
+    if (!groupBy.value.length) return items.value;
+    const groupedItems = groupItems(items.value, groupBy.value.map(item => item.key));
+    return flattenItems(groupedItems, opened.value);
+  });
+  return {
+    flatItems
+  };
+}
+//# sourceMappingURL=group.mjs.map

package/lib/labs/VDataTable/composables/group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.mjs","names":["computed","inject","provide","ref","getObjectValueByPath","propsFactory","makeDataTableGroupProps","groupBy","type","Array","default","VDataTableGroupSymbol","Symbol","for","createGroupBy","props","sortBy","opened","Set","sortByWithGroups","value","map","val","order","concat","toggleGroup","group","open","has","add","delete","extractRows","items","dive","arr","item","push","id","key","depth","data","useGroupBy","Error","groupItemsByProperty","length","groups","Map","raw","set","get","groupItems","prefix","groupedItems","rest","slice","forEach","flattenItems","flatItems","useGroupedItems"],"sources":["../../../../src/labs/VDataTable/composables/group.ts"],"sourcesContent":["// Utilities\nimport { computed, inject, provide, ref } from 'vue'\nimport { getObjectValueByPath, propsFactory } from '@/util'\n\n// Types\nimport type { InjectionKey, PropType, Ref } from 'vue'\nimport type { DataTableItem, GroupHeaderItem } from '../types'\nimport type { SortItem } from './sort'\n\nexport const makeDataTableGroupProps = propsFactory({\n  groupBy: {\n    type: Array as PropType<SortItem[]>,\n    default: () => ([]),\n  },\n}, 'data-table-group')\n\nconst VDataTableGroupSymbol: InjectionKey<{\n  opened: Ref<Set<string>>\n  toggleGroup: (group: string, value?: boolean) => void\n  sortByWithGroups: Ref<SortItem[]>\n  groupBy: Ref<readonly SortItem[]>\n  extractRows: (items: (DataTableItem | GroupHeaderItem)[]) => DataTableItem[]\n}> = Symbol.for('vuetify:data-table-group')\n\ntype GroupProps = {\n}\n\nexport function createGroupBy (props: GroupProps, groupBy: Ref<readonly SortItem[]>, sortBy: Ref<readonly SortItem[]>) {\n  const opened = ref(new Set<string>())\n\n  const sortByWithGroups = computed(() => {\n    return groupBy.value.map<SortItem>(val => ({\n      ...val,\n      order: val.order ?? false,\n    })).concat(sortBy.value)\n  })\n\n  function toggleGroup (group: string, value?: boolean) {\n    const open = value == null ? !opened.value.has(group) : value\n    if (open) opened.value.add(group)\n    else opened.value.delete(group)\n  }\n\n  function extractRows (items: (DataTableItem | GroupHeaderItem)[]) {\n    function dive (group: GroupHeaderItem): DataTableItem[] {\n      const arr = []\n\n      for (const item of group.items) {\n        if (item.type === 'item') arr.push(item)\n        else {\n          arr.push(...dive(item))\n        }\n      }\n\n      return arr\n    }\n    return dive({ type: 'group-header', items, id: 'dummy', key: 'dummy', value: 'dummy', depth: 0 })\n  }\n\n  // onBeforeMount(() => {\n  //   for (const key of groupedItems.value.keys()) {\n  //     opened.value.add(key)\n  //   }\n  // })\n\n  const data = { sortByWithGroups, toggleGroup, opened, groupBy, extractRows }\n\n  provide(VDataTableGroupSymbol, data)\n\n  return data\n}\n\nexport function useGroupBy () {\n  const data = inject(VDataTableGroupSymbol)\n\n  if (!data) throw new Error('Missing group!')\n\n  return data\n}\n\nfunction groupItemsByProperty (items: DataTableItem[], groupBy: string) {\n  if (!items.length) return []\n\n  const groups = new Map<any, DataTableItem[]>()\n  for (const item of items) {\n    const value = getObjectValueByPath(item.raw, groupBy)\n\n    if (!groups.has(value)) {\n      groups.set(value, [])\n    }\n    groups.get(value)!.push(item)\n  }\n\n  return groups\n}\n\nfunction groupItems (items: DataTableItem[], groupBy: string[], depth = 0, prefix = 'root') {\n  if (!groupBy.length) return []\n\n  const groupedItems = groupItemsByProperty(items, groupBy[0])\n  const groups: GroupHeaderItem[] = []\n\n  const rest = groupBy.slice(1)\n  groupedItems.forEach((items, value) => {\n    const key = groupBy[0]\n    const id = `${prefix}_${key}_${value}`\n    groups.push({\n      depth,\n      id,\n      key,\n      value,\n      items: rest.length ? groupItems(items, rest, depth + 1, id) : items,\n      type: 'group-header',\n    })\n  })\n\n  return groups\n}\n\nfunction flattenItems (items: (DataTableItem | GroupHeaderItem)[], opened: Set<string>) {\n  const flatItems: (DataTableItem | GroupHeaderItem)[] = []\n\n  for (const item of items) {\n    // TODO: make this better\n    if (item.type === 'group-header') {\n      if (item.value != null) {\n        flatItems.push(item)\n      }\n\n      if (opened.has(item.id) || item.value == null) {\n        flatItems.push(...flattenItems(item.items, opened))\n      }\n    } else {\n      flatItems.push(item)\n    }\n  }\n\n  return flatItems\n}\n\nexport function useGroupedItems (items: Ref<DataTableItem[]>, groupBy: Ref<readonly SortItem[]>, opened: Ref<Set<string>>) {\n  const flatItems = computed(() => {\n    if (!groupBy.value.length) return items.value\n\n    const groupedItems = groupItems(items.value, groupBy.value.map(item => item.key))\n\n    return flattenItems(groupedItems, opened.value)\n  })\n\n  return { flatItems }\n}\n"],"mappings":"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"}