vuetify 3.0.6 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/_settings.scss +1 -0
- package/dist/_component-variables-labs.sass +1 -0
- package/dist/json/attributes.json +460 -12
- package/dist/json/importMap-labs.json +28 -0
- package/dist/json/importMap.json +60 -60
- package/dist/json/tags.json +154 -8
- package/dist/json/web-types.json +1522 -26
- package/dist/vuetify-labs.d.ts +875 -0
- package/dist/vuetify-labs.js +9748 -0
- package/dist/vuetify.css +36 -55
- package/dist/vuetify.d.ts +173 -196
- package/dist/vuetify.esm.js +190 -128
- package/dist/vuetify.esm.js.map +1 -1
- package/dist/vuetify.js +189 -127
- package/dist/vuetify.js.map +1 -1
- package/dist/vuetify.min.css +2 -2
- package/dist/vuetify.min.js +788 -780
- package/dist/vuetify.min.js.map +1 -1
- package/lib/blueprints/index.d.ts +3 -2
- package/lib/blueprints/md1.d.ts +3 -2
- package/lib/blueprints/md2.d.ts +3 -2
- package/lib/blueprints/md3.d.ts +3 -2
- package/lib/components/VAlert/VAlertTitle.mjs.map +1 -1
- package/lib/components/VAlert/index.d.ts +1 -0
- package/lib/components/VAutocomplete/VAutocomplete.mjs +8 -10
- package/lib/components/VAutocomplete/VAutocomplete.mjs.map +1 -1
- package/lib/components/VAutocomplete/index.d.ts +3 -12
- package/lib/components/VAvatar/VAvatar.mjs +2 -1
- package/lib/components/VAvatar/VAvatar.mjs.map +1 -1
- package/lib/components/VBreadcrumbs/VBreadcrumbs.mjs +23 -20
- package/lib/components/VBreadcrumbs/VBreadcrumbs.mjs.map +1 -1
- package/lib/components/VBreadcrumbs/VBreadcrumbsDivider.mjs +21 -2
- package/lib/components/VBreadcrumbs/VBreadcrumbsDivider.mjs.map +1 -1
- package/lib/components/VBreadcrumbs/index.d.ts +4 -15
- package/lib/components/VColorPicker/VColorPicker.mjs +0 -1
- package/lib/components/VColorPicker/VColorPicker.mjs.map +1 -1
- package/lib/components/VCombobox/VCombobox.mjs +8 -10
- package/lib/components/VCombobox/VCombobox.mjs.map +1 -1
- package/lib/components/VCombobox/index.d.ts +3 -12
- package/lib/components/VDivider/VDivider.css +1 -1
- package/lib/components/VDivider/VDivider.sass +1 -0
- package/lib/components/VDivider/_variables.scss +2 -1
- package/lib/components/VIcon/VIcon.mjs +25 -20
- package/lib/components/VIcon/VIcon.mjs.map +1 -1
- package/lib/components/VIcon/index.d.ts +4 -8
- package/lib/components/VList/VListItem.css +0 -4
- package/lib/components/VList/VListItem.sass +12 -6
- package/lib/components/VNavigationDrawer/VNavigationDrawer.mjs +10 -2
- package/lib/components/VNavigationDrawer/VNavigationDrawer.mjs.map +1 -1
- package/lib/components/VNavigationDrawer/index.d.ts +11 -3
- package/lib/components/VPagination/VPagination.mjs +12 -5
- package/lib/components/VPagination/VPagination.mjs.map +1 -1
- package/lib/components/VRadioGroup/VRadioGroup.mjs +3 -2
- package/lib/components/VRadioGroup/VRadioGroup.mjs.map +1 -1
- package/lib/components/VSelect/VSelect.mjs +11 -8
- package/lib/components/VSelect/VSelect.mjs.map +1 -1
- package/lib/components/VSelectionControl/VSelectionControl.mjs +11 -2
- package/lib/components/VSelectionControl/VSelectionControl.mjs.map +1 -1
- package/lib/components/VSelectionControl/index.d.ts +2 -2
- package/lib/components/VSelectionControlGroup/VSelectionControlGroup.mjs +12 -3
- package/lib/components/VSelectionControlGroup/VSelectionControlGroup.mjs.map +1 -1
- package/lib/components/VSlider/VSliderThumb.css +2 -0
- package/lib/components/VSlider/VSliderThumb.sass +2 -0
- package/lib/components/VTable/VTable.css +12 -29
- package/lib/components/VTable/VTable.mjs +3 -3
- package/lib/components/VTable/VTable.mjs.map +1 -1
- package/lib/components/VTable/VTable.sass +10 -17
- package/lib/components/VTable/_variables.scss +4 -2
- package/lib/components/index.d.ts +27 -51
- package/lib/composables/filter.mjs +18 -10
- package/lib/composables/filter.mjs.map +1 -1
- package/lib/composables/icons.mjs +12 -7
- package/lib/composables/icons.mjs.map +1 -1
- package/lib/entry-bundler.mjs +1 -1
- package/lib/framework.mjs +15 -13
- package/lib/framework.mjs.map +1 -1
- package/lib/iconsets/fa-svg.d.ts +3 -2
- package/lib/iconsets/fa.d.ts +3 -2
- package/lib/iconsets/fa.mjs +2 -1
- package/lib/iconsets/fa.mjs.map +1 -1
- package/lib/iconsets/fa4.d.ts +3 -2
- package/lib/iconsets/fa4.mjs +2 -1
- package/lib/iconsets/fa4.mjs.map +1 -1
- package/lib/iconsets/md.d.ts +3 -2
- package/lib/iconsets/md.mjs +2 -1
- package/lib/iconsets/md.mjs.map +1 -1
- package/lib/iconsets/mdi-svg.d.ts +3 -2
- package/lib/iconsets/mdi-svg.mjs +2 -1
- package/lib/iconsets/mdi-svg.mjs.map +1 -1
- package/lib/iconsets/mdi.d.ts +3 -2
- package/lib/iconsets/mdi.mjs +2 -1
- package/lib/iconsets/mdi.mjs.map +1 -1
- package/lib/index.d.ts +19 -18
- package/lib/labs/VDataTable/VDataTable.css +119 -0
- package/lib/labs/VDataTable/VDataTable.mjs +146 -0
- package/lib/labs/VDataTable/VDataTable.mjs.map +1 -0
- package/lib/labs/VDataTable/VDataTable.sass +106 -0
- package/lib/labs/VDataTable/VDataTableColumn.mjs +37 -0
- package/lib/labs/VDataTable/VDataTableColumn.mjs.map +1 -0
- package/lib/labs/VDataTable/VDataTableFooter.css +22 -0
- package/lib/labs/VDataTable/VDataTableFooter.mjs +105 -0
- package/lib/labs/VDataTable/VDataTableFooter.mjs.map +1 -0
- package/lib/labs/VDataTable/VDataTableFooter.sass +23 -0
- package/lib/labs/VDataTable/VDataTableGroupHeaderRow.mjs +88 -0
- package/lib/labs/VDataTable/VDataTableGroupHeaderRow.mjs.map +1 -0
- package/lib/labs/VDataTable/VDataTableHeaders.mjs +143 -0
- package/lib/labs/VDataTable/VDataTableHeaders.mjs.map +1 -0
- package/lib/labs/VDataTable/VDataTableRow.mjs +75 -0
- package/lib/labs/VDataTable/VDataTableRow.mjs.map +1 -0
- package/lib/labs/VDataTable/VDataTableRows.mjs +87 -0
- package/lib/labs/VDataTable/VDataTableRows.mjs.map +1 -0
- package/lib/labs/VDataTable/VDataTableServer.mjs +124 -0
- package/lib/labs/VDataTable/VDataTableServer.mjs.map +1 -0
- package/lib/labs/VDataTable/VDataTableVirtual.mjs +154 -0
- package/lib/labs/VDataTable/VDataTableVirtual.mjs.map +1 -0
- package/lib/labs/VDataTable/_variables.scss +6 -0
- package/lib/labs/VDataTable/composables/expand.mjs +51 -0
- package/lib/labs/VDataTable/composables/expand.mjs.map +1 -0
- package/lib/labs/VDataTable/composables/group.mjs +124 -0
- package/lib/labs/VDataTable/composables/group.mjs.map +1 -0
- package/lib/labs/VDataTable/composables/headers.mjs +152 -0
- package/lib/labs/VDataTable/composables/headers.mjs.map +1 -0
- package/lib/labs/VDataTable/composables/items.mjs +30 -0
- package/lib/labs/VDataTable/composables/items.mjs.map +1 -0
- package/lib/labs/VDataTable/composables/options.mjs +44 -0
- package/lib/labs/VDataTable/composables/options.mjs.map +1 -0
- package/lib/labs/VDataTable/composables/paginate.mjs +62 -0
- package/lib/labs/VDataTable/composables/paginate.mjs.map +1 -0
- package/lib/labs/VDataTable/composables/select.mjs +57 -0
- package/lib/labs/VDataTable/composables/select.mjs.map +1 -0
- package/lib/labs/VDataTable/composables/sort.mjs +109 -0
- package/lib/labs/VDataTable/composables/sort.mjs.map +1 -0
- package/lib/labs/VDataTable/composables/virtual.mjs +77 -0
- package/lib/labs/VDataTable/composables/virtual.mjs.map +1 -0
- package/lib/labs/VDataTable/index.d.ts +705 -0
- package/lib/labs/VDataTable/index.mjs +6 -0
- package/lib/labs/VDataTable/index.mjs.map +1 -0
- package/lib/labs/VDataTable/types.mjs +2 -0
- package/lib/labs/VDataTable/types.mjs.map +1 -0
- package/lib/labs/VVirtualScroll/VVirtualScroll.css +11 -0
- package/lib/labs/VVirtualScroll/VVirtualScroll.mjs +118 -0
- package/lib/labs/VVirtualScroll/VVirtualScroll.mjs.map +1 -0
- package/lib/{components → labs}/VVirtualScroll/VVirtualScroll.sass +0 -5
- package/lib/labs/VVirtualScroll/VVirtualScrollItem.mjs +35 -0
- package/lib/labs/VVirtualScroll/VVirtualScrollItem.mjs.map +1 -0
- package/lib/labs/VVirtualScroll/index.d.ts +154 -0
- package/lib/labs/VVirtualScroll/index.mjs +2 -0
- package/lib/labs/VVirtualScroll/index.mjs.map +1 -0
- package/lib/labs/components.d.ts +856 -0
- package/lib/labs/components.mjs +3 -0
- package/lib/labs/components.mjs.map +1 -0
- package/lib/labs/index.mjs +3 -0
- package/lib/labs/index.mjs.map +1 -0
- package/lib/util/defineComponent.mjs +4 -0
- package/lib/util/defineComponent.mjs.map +1 -1
- package/lib/util/helpers.mjs +0 -38
- package/lib/util/helpers.mjs.map +1 -1
- package/package.json +4 -2
- package/lib/components/VDataTable/MobileRow.mjs +0 -63
- package/lib/components/VDataTable/MobileRow.mjs.map +0 -1
- package/lib/components/VDataTable/Row.mjs +0 -57
- package/lib/components/VDataTable/Row.mjs.map +0 -1
- package/lib/components/VDataTable/RowGroup.mjs +0 -48
- package/lib/components/VDataTable/RowGroup.mjs.map +0 -1
- package/lib/components/VDataTable/VDataTable.mjs +0 -577
- package/lib/components/VDataTable/VDataTable.mjs.map +0 -1
- package/lib/components/VDataTable/VDataTable.sass +0 -98
- package/lib/components/VDataTable/VDataTableHeader.mjs +0 -42
- package/lib/components/VDataTable/VDataTableHeader.mjs.map +0 -1
- package/lib/components/VDataTable/VDataTableHeader.sass +0 -80
- package/lib/components/VDataTable/VDataTableHeaderDesktop.mjs +0 -96
- package/lib/components/VDataTable/VDataTableHeaderDesktop.mjs.map +0 -1
- package/lib/components/VDataTable/VDataTableHeaderMobile.mjs +0 -89
- package/lib/components/VDataTable/VDataTableHeaderMobile.mjs.map +0 -1
- package/lib/components/VDataTable/VEditDialog.mjs +0 -127
- package/lib/components/VDataTable/VEditDialog.mjs.map +0 -1
- package/lib/components/VDataTable/VEditDialog.sass +0 -22
- package/lib/components/VDataTable/VVirtualTable.mjs +0 -132
- package/lib/components/VDataTable/VVirtualTable.mjs.map +0 -1
- package/lib/components/VDataTable/VVirtualTable.sass +0 -13
- package/lib/components/VDataTable/_variables.scss +0 -24
- package/lib/components/VDataTable/index.mjs +0 -21
- package/lib/components/VDataTable/index.mjs.map +0 -1
- package/lib/components/VDataTable/mixins/header.mjs +0 -71
- package/lib/components/VDataTable/mixins/header.mjs.map +0 -1
- package/lib/components/VVirtualScroll/VVirtualScroll.mjs +0 -108
- package/lib/components/VVirtualScroll/VVirtualScroll.mjs.map +0 -1
- package/lib/components/VVirtualScroll/index.mjs +0 -4
- package/lib/components/VVirtualScroll/index.mjs.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VDataTableRow.mjs","names":["VBtn","VCheckboxBtn","useExpanded","useHeaders","useSelection","VDataTableColumn","defineComponent","useRender","VDataTableRow","name","props","item","Object","setup","slots","isSelected","toggleSelect","isExpanded","toggleExpand","columns","value","length","map","column","i","align","fixed","fixedOffset","lastFixed","key","width","default","slotName","slotProps"],"sources":["../../../src/labs/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 { defineComponent, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { DataTableItem } from './types'\n\nexport const VDataTableRow = defineComponent({\n name: 'VDataTableRow',\n\n props: {\n item: Object as PropType<DataTableItem>,\n },\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 >\n { !columns.value.length && (\n <VDataTableColumn\n key=\"no-data\"\n v-slots={ slots }\n />\n ) }\n\n { props.item && columns.value.map((column, i) => (\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 >\n {{\n default: () => {\n const item = props.item!\n const slotName = `item.${column.key}`\n const slotProps = {\n item: props.item,\n columns: columns.value,\n isSelected,\n toggleSelect,\n isExpanded,\n toggleExpand,\n }\n\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 modelValue={ isSelected([item]) }\n onClick={ () => toggleSelect(item) }\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={ () => toggleExpand(item) }\n />\n )\n }\n\n return item.columns[column.key]\n },\n }}\n </VDataTableColumn>\n )) }\n </tr>\n ))\n },\n})\n\nexport type VDataTableRow = InstanceType<typeof VDataTableRow>\n"],"mappings":";AAAA;AAAA,SACSA,IAAI;AAAA,SACJC,YAAY,gDAErB;AAAA,SACSC,WAAW;AAAA,SACXC,UAAU;AAAA,SACVC,YAAY;AAAA,SACZC,gBAAgB,kCAEzB;AAAA,SACSC,eAAe,EAAEC,SAAS,gCAEnC;AAIA,OAAO,MAAMC,aAAa,GAAGF,eAAe,CAAC;EAC3CG,IAAI,EAAE,eAAe;EAErBC,KAAK,EAAE;IACLC,IAAI,EAAEC;EACR,CAAC;EAEDC,KAAK,CAAEH,KAAK,QAAa;IAAA,IAAX;MAAEI;IAAM,CAAC;IACrB,MAAM;MAAEC,UAAU;MAAEC;IAAa,CAAC,GAAGZ,YAAY,EAAE;IACnD,MAAM;MAAEa,UAAU;MAAEC;IAAa,CAAC,GAAGhB,WAAW,EAAE;IAClD,MAAM;MAAEiB;IAAQ,CAAC,GAAGhB,UAAU,EAAE;IAEhCI,SAAS,CAAC;MAAA,SAEC,CACL,kBAAkB;IACnB,IAEC,CAACY,OAAO,CAACC,KAAK,CAACC,MAAM;MAAA,OAEf;IAAS,GACHP,KAAK,CAElB,EAECJ,KAAK,CAACC,IAAI,IAAIQ,OAAO,CAACC,KAAK,CAACE,GAAG,CAAC,CAACC,MAAM,EAAEC,CAAC;MAAA,SAEhCD,MAAM,CAACE,KAAK;MAAA,SACZF,MAAM,CAACG,KAAK;MAAA,eACNH,MAAM,CAACI,WAAW;MAAA,aACpBJ,MAAM,CAACK,SAAS;MAAA,aAChBL,MAAM,CAACM,GAAG,KAAK,mBAAmB,IAAIN,MAAM,CAACM,GAAG,KAAK,mBAAmB;MAAA,SAC5EN,MAAM,CAACO;IAAK;MAGlBC,OAAO,EAAE,MAAM;QACb,MAAMpB,IAAI,GAAGD,KAAK,CAACC,IAAK;QACxB,MAAMqB,QAAQ,GAAI,QAAOT,MAAM,CAACM,GAAI,EAAC;QACrC,MAAMI,SAAS,GAAG;UAChBtB,IAAI,EAAED,KAAK,CAACC,IAAI;UAChBQ,OAAO,EAAEA,OAAO,CAACC,KAAK;UACtBL,UAAU;UACVC,YAAY;UACZC,UAAU;UACVC;QACF,CAAC;QAED,IAAIJ,KAAK,CAACkB,QAAQ,CAAC,EAAE,OAAOlB,KAAK,CAACkB,QAAQ,CAAC,CAAEC,SAAS,CAAC;QAEvD,IAAIV,MAAM,CAACM,GAAG,KAAK,mBAAmB,EAAE;UAAA;UACtC,OAAO,wBAAAf,KAAK,CAAC,wBAAwB,CAAC,qBAA/B,yBAAAA,KAAK,EAA6BmB,SAAS,CAAC;YAAA,cAElClB,UAAU,CAAC,CAACJ,IAAI,CAAC,CAAC;YAAA,WACrB,MAAMK,YAAY,CAACL,IAAI;UAAC,QAErC;QACH;QAEA,IAAIY,MAAM,CAACM,GAAG,KAAK,mBAAmB,EAAE;UAAA;UACtC,OAAO,yBAAAf,KAAK,CAAC,wBAAwB,CAAC,qBAA/B,0BAAAA,KAAK,EAA6BmB,SAAS,CAAC;YAAA,QAEzChB,UAAU,CAACN,IAAI,CAAC,GAAG,WAAW,GAAG,SAAS;YAAA,QAC3C,OAAO;YAAA,WACJ,MAAM;YAAA,WACJ,MAAMO,YAAY,CAACP,IAAI;UAAC,QAErC;QACH;QAEA,OAAOA,IAAI,CAACQ,OAAO,CAACI,MAAM,CAACM,GAAG,CAAC;MACjC;IAAC,EAGN,CAAC,EAEL,CAAC;EACJ;AACF,CAAC,CAAC"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { resolveDirective as _resolveDirective, createVNode as _createVNode, Fragment as _Fragment } from "vue";
|
|
2
|
+
// Components
|
|
3
|
+
import { VDataTableGroupHeaderRow } from "./VDataTableGroupHeaderRow.mjs";
|
|
4
|
+
import { VDataTableRow } from "./VDataTableRow.mjs"; // Composables
|
|
5
|
+
import { useExpanded } from "./composables/expand.mjs";
|
|
6
|
+
import { useHeaders } from "./composables/headers.mjs";
|
|
7
|
+
import { useLocale } from "../../composables/locale.mjs"; // Utilities
|
|
8
|
+
import { defineComponent, useRender } from "../../util/index.mjs"; // Types
|
|
9
|
+
export const VDataTableRows = defineComponent({
|
|
10
|
+
name: 'VDataTableRows',
|
|
11
|
+
props: {
|
|
12
|
+
loading: [Boolean, String],
|
|
13
|
+
loadingText: {
|
|
14
|
+
type: String,
|
|
15
|
+
default: '$vuetify.dataIterator.loadingText'
|
|
16
|
+
},
|
|
17
|
+
hideNoData: Boolean,
|
|
18
|
+
items: {
|
|
19
|
+
type: Array,
|
|
20
|
+
default: () => []
|
|
21
|
+
},
|
|
22
|
+
noDataText: {
|
|
23
|
+
type: String,
|
|
24
|
+
default: '$vuetify.noDataText'
|
|
25
|
+
},
|
|
26
|
+
rowHeight: Number
|
|
27
|
+
},
|
|
28
|
+
emits: {
|
|
29
|
+
'click:row': (event, value) => true
|
|
30
|
+
},
|
|
31
|
+
setup(props, _ref) {
|
|
32
|
+
let {
|
|
33
|
+
emit,
|
|
34
|
+
slots
|
|
35
|
+
} = _ref;
|
|
36
|
+
const {
|
|
37
|
+
columns
|
|
38
|
+
} = useHeaders();
|
|
39
|
+
const {
|
|
40
|
+
expanded,
|
|
41
|
+
expand,
|
|
42
|
+
expandOnClick
|
|
43
|
+
} = useExpanded();
|
|
44
|
+
const {
|
|
45
|
+
t
|
|
46
|
+
} = useLocale();
|
|
47
|
+
useRender(() => {
|
|
48
|
+
var _slots$loading, _slots$noData;
|
|
49
|
+
return _createVNode(_Fragment, null, [props.loading ? ((_slots$loading = slots.loading) == null ? void 0 : _slots$loading.call(slots)) ?? _createVNode(VDataTableRow, {
|
|
50
|
+
"class": "v-data-table-rows-no-data",
|
|
51
|
+
"key": "loading"
|
|
52
|
+
}, {
|
|
53
|
+
default: () => [t(props.loadingText)]
|
|
54
|
+
}) : undefined, !props.loading && !props.items.length && !props.hideNoData && (((_slots$noData = slots['no-data']) == null ? void 0 : _slots$noData.call(slots)) ?? _createVNode(VDataTableRow, {
|
|
55
|
+
"class": "v-data-table-rows-no-data",
|
|
56
|
+
"key": "no-data"
|
|
57
|
+
}, {
|
|
58
|
+
default: () => [t(props.noDataText)]
|
|
59
|
+
})), props.items.map((item, index) => {
|
|
60
|
+
var _slots$expandedRow;
|
|
61
|
+
if (item.type === 'group-header') {
|
|
62
|
+
return _createVNode(VDataTableGroupHeaderRow, {
|
|
63
|
+
"key": `group-header_${item.id}`,
|
|
64
|
+
"item": item
|
|
65
|
+
}, slots);
|
|
66
|
+
}
|
|
67
|
+
return _createVNode(_Fragment, null, [_createVNode(VDataTableRow, {
|
|
68
|
+
"key": `item_${item.value}`,
|
|
69
|
+
"onClick": event => {
|
|
70
|
+
if (expandOnClick.value) {
|
|
71
|
+
expand(item, !expanded.value.has(item.value));
|
|
72
|
+
}
|
|
73
|
+
emit('click:row', event, {
|
|
74
|
+
item
|
|
75
|
+
});
|
|
76
|
+
},
|
|
77
|
+
"item": item
|
|
78
|
+
}, slots), expanded.value.has(item.value) && ((_slots$expandedRow = slots['expanded-row']) == null ? void 0 : _slots$expandedRow.call(slots, {
|
|
79
|
+
item,
|
|
80
|
+
columns: columns.value
|
|
81
|
+
}))]);
|
|
82
|
+
})]);
|
|
83
|
+
});
|
|
84
|
+
return {};
|
|
85
|
+
}
|
|
86
|
+
});
|
|
87
|
+
//# sourceMappingURL=VDataTableRows.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VDataTableRows.mjs","names":["VDataTableGroupHeaderRow","VDataTableRow","useExpanded","useHeaders","useLocale","defineComponent","useRender","VDataTableRows","name","props","loading","Boolean","String","loadingText","type","default","hideNoData","items","Array","noDataText","rowHeight","Number","emits","event","value","setup","emit","slots","columns","expanded","expand","expandOnClick","t","undefined","length","map","item","index","id","has"],"sources":["../../../src/labs/VDataTable/VDataTableRows.tsx"],"sourcesContent":["// Components\nimport { VDataTableGroupHeaderRow } from './VDataTableGroupHeaderRow'\nimport { VDataTableRow } from './VDataTableRow'\n\n// Composables\nimport { useExpanded } from './composables/expand'\nimport { useHeaders } from './composables/headers'\nimport { useLocale } from '@/composables/locale'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { DataTableItem, InternalDataTableItem } from './types'\n\nexport const VDataTableRows = defineComponent({\n name: 'VDataTableRows',\n\n props: {\n loading: [Boolean, String],\n loadingText: {\n type: String,\n default: '$vuetify.dataIterator.loadingText',\n },\n hideNoData: Boolean,\n items: {\n type: Array as PropType<InternalDataTableItem[]>,\n default: () => ([]),\n },\n noDataText: {\n type: String,\n default: '$vuetify.noDataText',\n },\n rowHeight: Number,\n },\n\n emits: {\n 'click:row': (event: Event, value: { item: DataTableItem }) => true,\n },\n\n setup (props, { emit, slots }) {\n const { columns } = useHeaders()\n const { expanded, expand, expandOnClick } = useExpanded()\n const { t } = useLocale()\n\n useRender(() => (\n <>\n { props.loading ? slots.loading?.() ?? (\n <VDataTableRow\n class=\"v-data-table-rows-no-data\"\n key=\"loading\"\n >\n { t(props.loadingText) }\n </VDataTableRow>\n ) : undefined }\n\n { !props.loading && !props.items.length && !props.hideNoData && (slots['no-data']?.() ?? (\n <VDataTableRow\n class=\"v-data-table-rows-no-data\"\n key=\"no-data\"\n >\n { t(props.noDataText) }\n </VDataTableRow>\n )) }\n\n { props.items.map((item, index) => {\n if (item.type === 'group-header') {\n return (\n <VDataTableGroupHeaderRow\n key={ `group-header_${item.id}` }\n item={ item }\n v-slots={ slots }\n />\n )\n }\n\n return (\n <>\n <VDataTableRow\n key={ `item_${item.value}` }\n onClick={ (event: Event) => {\n if (expandOnClick.value) {\n expand(item, !expanded.value.has(item.value))\n }\n\n emit('click:row', event, { item })\n } }\n item={ item }\n v-slots={ slots }\n />\n\n { expanded.value.has(item.value) && slots['expanded-row']?.({ item, columns: columns.value }) }\n </>\n )\n }) }\n </>\n ))\n\n return {}\n },\n})\n\nexport type VDataTableRows = InstanceType<typeof VDataTableRows>\n"],"mappings":";AAAA;AAAA,SACSA,wBAAwB;AAAA,SACxBC,aAAa,+BAEtB;AAAA,SACSC,WAAW;AAAA,SACXC,UAAU;AAAA,SACVC,SAAS,wCAElB;AAAA,SACSC,eAAe,EAAEC,SAAS,gCAEnC;AAIA,OAAO,MAAMC,cAAc,GAAGF,eAAe,CAAC;EAC5CG,IAAI,EAAE,gBAAgB;EAEtBC,KAAK,EAAE;IACLC,OAAO,EAAE,CAACC,OAAO,EAAEC,MAAM,CAAC;IAC1BC,WAAW,EAAE;MACXC,IAAI,EAAEF,MAAM;MACZG,OAAO,EAAE;IACX,CAAC;IACDC,UAAU,EAAEL,OAAO;IACnBM,KAAK,EAAE;MACLH,IAAI,EAAEI,KAA0C;MAChDH,OAAO,EAAE,MAAO;IAClB,CAAC;IACDI,UAAU,EAAE;MACVL,IAAI,EAAEF,MAAM;MACZG,OAAO,EAAE;IACX,CAAC;IACDK,SAAS,EAAEC;EACb,CAAC;EAEDC,KAAK,EAAE;IACL,WAAW,EAAE,CAACC,KAAY,EAAEC,KAA8B,KAAK;EACjE,CAAC;EAEDC,KAAK,CAAEhB,KAAK,QAAmB;IAAA,IAAjB;MAAEiB,IAAI;MAAEC;IAAM,CAAC;IAC3B,MAAM;MAAEC;IAAQ,CAAC,GAAGzB,UAAU,EAAE;IAChC,MAAM;MAAE0B,QAAQ;MAAEC,MAAM;MAAEC;IAAc,CAAC,GAAG7B,WAAW,EAAE;IACzD,MAAM;MAAE8B;IAAE,CAAC,GAAG5B,SAAS,EAAE;IAEzBE,SAAS,CAAC;MAAA;MAAA,sCAEJG,KAAK,CAACC,OAAO,GAAG,mBAAAiB,KAAK,CAACjB,OAAO,qBAAb,oBAAAiB,KAAK,CAAY;QAAA,SAEzB,2BAA2B;QAAA,OAC7B;MAAS;QAAA,gBAEXK,CAAC,CAACvB,KAAK,CAACI,WAAW,CAAC;MAAA,EAEzB,GAAGoB,SAAS,EAEX,CAACxB,KAAK,CAACC,OAAO,IAAI,CAACD,KAAK,CAACQ,KAAK,CAACiB,MAAM,IAAI,CAACzB,KAAK,CAACO,UAAU,KAAK,kBAAAW,KAAK,CAAC,SAAS,CAAC,qBAAhB,mBAAAA,KAAK,CAAe;QAAA,SAE3E,2BAA2B;QAAA,OAC7B;MAAS;QAAA,gBAEXK,CAAC,CAACvB,KAAK,CAACU,UAAU,CAAC;MAAA,EAExB,CAAC,EAEAV,KAAK,CAACQ,KAAK,CAACkB,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAK;QAAA;QACjC,IAAID,IAAI,CAACtB,IAAI,KAAK,cAAc,EAAE;UAChC;YAAA,OAEW,gBAAesB,IAAI,CAACE,EAAG,EAAC;YAAA,QACxBF;UAAI,GACDT,KAAK;QAGrB;QAEA;UAAA,OAGa,QAAOS,IAAI,CAACZ,KAAM,EAAC;UAAA,WACfD,KAAY,IAAK;YAC1B,IAAIQ,aAAa,CAACP,KAAK,EAAE;cACvBM,MAAM,CAACM,IAAI,EAAE,CAACP,QAAQ,CAACL,KAAK,CAACe,GAAG,CAACH,IAAI,CAACZ,KAAK,CAAC,CAAC;YAC/C;YAEAE,IAAI,CAAC,WAAW,EAAEH,KAAK,EAAE;cAAEa;YAAK,CAAC,CAAC;UACpC,CAAC;UAAA,QACMA;QAAI,GACDT,KAAK,GAGfE,QAAQ,CAACL,KAAK,CAACe,GAAG,CAACH,IAAI,CAACZ,KAAK,CAAC,2BAAIG,KAAK,CAAC,cAAc,CAAC,qBAArB,wBAAAA,KAAK,EAAmB;UAAES,IAAI;UAAER,OAAO,EAAEA,OAAO,CAACJ;QAAM,CAAC,CAAC;MAGnG,CAAC,CAAC;IAAA,CAEL,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
import { resolveDirective as _resolveDirective, createVNode as _createVNode, Fragment as _Fragment } from "vue";
|
|
2
|
+
// Components
|
|
3
|
+
import { VTable } from "../../components/VTable/index.mjs";
|
|
4
|
+
import { VDataTableFooter } from "./VDataTableFooter.mjs";
|
|
5
|
+
import { VDataTableHeaders } from "./VDataTableHeaders.mjs";
|
|
6
|
+
import { VDataTableRows } from "./VDataTableRows.mjs"; // Composables
|
|
7
|
+
import { createExpanded, makeDataTableExpandProps } from "./composables/expand.mjs";
|
|
8
|
+
import { createHeaders, makeDataTableHeaderProps } from "./composables/headers.mjs";
|
|
9
|
+
import { makeDataTableItemProps, useDataTableItems } from "./composables/items.mjs";
|
|
10
|
+
import { createSort, makeDataTableSortProps } from "./composables/sort.mjs";
|
|
11
|
+
import { createPagination, makeDataTablePaginateProps } from "./composables/paginate.mjs";
|
|
12
|
+
import { createSelection, makeDataTableSelectProps } from "./composables/select.mjs";
|
|
13
|
+
import { useOptions } from "./composables/options.mjs";
|
|
14
|
+
import { provideDefaults } from "../../composables/defaults.mjs"; // Utilities
|
|
15
|
+
import { provide, toRef } from 'vue';
|
|
16
|
+
import { defineComponent, useRender } from "../../util/index.mjs";
|
|
17
|
+
import { makeVDataTableProps } from "./VDataTable.mjs"; // Types
|
|
18
|
+
export const VDataTableServer = defineComponent({
|
|
19
|
+
name: 'VDataTableServer',
|
|
20
|
+
props: {
|
|
21
|
+
color: String,
|
|
22
|
+
loading: [Boolean, String],
|
|
23
|
+
loadingText: {
|
|
24
|
+
type: String,
|
|
25
|
+
default: '$vuetify.dataIterator.loadingText'
|
|
26
|
+
},
|
|
27
|
+
itemsLength: [Number, String],
|
|
28
|
+
...makeVDataTableProps(),
|
|
29
|
+
...makeDataTableExpandProps(),
|
|
30
|
+
...makeDataTableHeaderProps(),
|
|
31
|
+
...makeDataTableItemProps(),
|
|
32
|
+
...makeDataTableSelectProps(),
|
|
33
|
+
...makeDataTableSortProps(),
|
|
34
|
+
...makeDataTablePaginateProps()
|
|
35
|
+
},
|
|
36
|
+
emits: {
|
|
37
|
+
'update:modelValue': value => true,
|
|
38
|
+
'update:page': page => true,
|
|
39
|
+
'update:itemsPerPage': page => true,
|
|
40
|
+
'update:sortBy': sortBy => true,
|
|
41
|
+
'update:options': options => true,
|
|
42
|
+
'update:expanded': options => true,
|
|
43
|
+
'click:row': (event, value) => true
|
|
44
|
+
},
|
|
45
|
+
setup(props, _ref) {
|
|
46
|
+
let {
|
|
47
|
+
emit,
|
|
48
|
+
slots
|
|
49
|
+
} = _ref;
|
|
50
|
+
createExpanded(props);
|
|
51
|
+
const {
|
|
52
|
+
columns
|
|
53
|
+
} = createHeaders(props, {
|
|
54
|
+
showSelect: toRef(props, 'showSelect'),
|
|
55
|
+
showExpand: toRef(props, 'showExpand')
|
|
56
|
+
});
|
|
57
|
+
const {
|
|
58
|
+
items
|
|
59
|
+
} = useDataTableItems(props, columns);
|
|
60
|
+
const {
|
|
61
|
+
sortBy,
|
|
62
|
+
toggleSort
|
|
63
|
+
} = createSort(props);
|
|
64
|
+
const {
|
|
65
|
+
page,
|
|
66
|
+
itemsPerPage,
|
|
67
|
+
startIndex,
|
|
68
|
+
stopIndex,
|
|
69
|
+
pageCount
|
|
70
|
+
} = createPagination(props, items);
|
|
71
|
+
createSelection(props, items);
|
|
72
|
+
useOptions({
|
|
73
|
+
page,
|
|
74
|
+
itemsPerPage,
|
|
75
|
+
sortBy,
|
|
76
|
+
startIndex,
|
|
77
|
+
stopIndex,
|
|
78
|
+
pageCount
|
|
79
|
+
});
|
|
80
|
+
provide('v-data-table', {
|
|
81
|
+
toggleSort,
|
|
82
|
+
sortBy
|
|
83
|
+
});
|
|
84
|
+
provideDefaults({
|
|
85
|
+
VDataTableRows: {
|
|
86
|
+
hideNoData: toRef(props, 'hideNoData'),
|
|
87
|
+
noDataText: toRef(props, 'noDataText'),
|
|
88
|
+
loading: toRef(props, 'loading'),
|
|
89
|
+
loadingText: toRef(props, 'loadingText')
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
useRender(() => _createVNode(VTable, {
|
|
93
|
+
"class": ['v-data-table', {
|
|
94
|
+
'v-data-table--loading': props.loading
|
|
95
|
+
}],
|
|
96
|
+
"fixedHeader": props.fixedHeader,
|
|
97
|
+
"fixedFooter": props.fixedFooter,
|
|
98
|
+
"height": props.height
|
|
99
|
+
}, {
|
|
100
|
+
top: slots.top,
|
|
101
|
+
default: slots.default ? slots.default() : () => {
|
|
102
|
+
var _slots$thead, _slots$tbody, _slots$tfoot;
|
|
103
|
+
return _createVNode(_Fragment, null, [_createVNode("thead", {
|
|
104
|
+
"class": "v-data-table__thead",
|
|
105
|
+
"role": "rowgroup"
|
|
106
|
+
}, [slots.headers ? slots.headers() : _createVNode(VDataTableHeaders, {
|
|
107
|
+
"sticky": props.fixedHeader,
|
|
108
|
+
"loading": props.loading,
|
|
109
|
+
"color": props.color
|
|
110
|
+
}, null)]), (_slots$thead = slots.thead) == null ? void 0 : _slots$thead.call(slots), _createVNode("tbody", {
|
|
111
|
+
"class": "v-data-table__tbody",
|
|
112
|
+
"role": "rowgroup"
|
|
113
|
+
}, [slots.body ? slots.body() : _createVNode(VDataTableRows, {
|
|
114
|
+
"items": items.value,
|
|
115
|
+
"onClick:row": (event, value) => emit('click:row', event, value)
|
|
116
|
+
}, slots)]), (_slots$tbody = slots.tbody) == null ? void 0 : _slots$tbody.call(slots), (_slots$tfoot = slots.tfoot) == null ? void 0 : _slots$tfoot.call(slots)]);
|
|
117
|
+
},
|
|
118
|
+
bottom: slots.bottom ? slots.bottom() : () => _createVNode(VDataTableFooter, null, {
|
|
119
|
+
prepend: slots['footer.prepend']
|
|
120
|
+
})
|
|
121
|
+
}));
|
|
122
|
+
}
|
|
123
|
+
});
|
|
124
|
+
//# sourceMappingURL=VDataTableServer.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
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":";AAAA;AAAA,SACSA,MAAM;AAAA,SACNC,gBAAgB;AAAA,SAChBC,iBAAiB;AAAA,SACjBC,cAAc,gCAEvB;AAAA,SACSC,cAAc,EAAEC,wBAAwB;AAAA,SACxCC,aAAa,EAAEC,wBAAwB;AAAA,SACvCC,sBAAsB,EAAEC,iBAAiB;AAAA,SACzCC,UAAU,EAAEC,sBAAsB;AAAA,SAClCC,gBAAgB,EAAEC,0BAA0B;AAAA,SAC5CC,eAAe,EAAEC,wBAAwB;AAAA,SACzCC,UAAU;AAAA,SACVC,eAAe,0CAExB;AACA,SAASC,OAAO,EAAEC,KAAK,QAAQ,KAAK;AAAA,SAC3BC,eAAe,EAAEC,SAAS;AAAA,SAC1BC,mBAAmB,4BAE5B;AAGA,OAAO,MAAMC,gBAAgB,GAAGH,eAAe,CAAC;EAC9CI,IAAI,EAAE,kBAAkB;EAExBC,KAAK,EAAE;IACLC,KAAK,EAAEC,MAAM;IACbC,OAAO,EAAE,CAACC,OAAO,EAAEF,MAAM,CAAC;IAC1BG,WAAW,EAAE;MACXC,IAAI,EAAEJ,MAAM;MACZK,OAAO,EAAE;IACX,CAAC;IACDC,WAAW,EAAE,CAACC,MAAM,EAAEP,MAAM,CAAC;IAE7B,GAAGL,mBAAmB,EAAE;IACxB,GAAGjB,wBAAwB,EAAE;IAC7B,GAAGE,wBAAwB,EAAE;IAC7B,GAAGC,sBAAsB,EAAE;IAC3B,GAAGO,wBAAwB,EAAE;IAC7B,GAAGJ,sBAAsB,EAAE;IAC3B,GAAGE,0BAA0B;EAC/B,CAAC;EAEDsB,KAAK,EAAE;IACL,mBAAmB,EAAGC,KAAY,IAAK,IAAI;IAC3C,aAAa,EAAGC,IAAY,IAAK,IAAI;IACrC,qBAAqB,EAAGA,IAAY,IAAK,IAAI;IAC7C,eAAe,EAAGC,MAAW,IAAK,IAAI;IACtC,gBAAgB,EAAGC,OAAY,IAAK,IAAI;IACxC,iBAAiB,EAAGA,OAAY,IAAK,IAAI;IACzC,WAAW,EAAE,CAACC,KAAY,EAAEJ,KAA8B,KAAK;EACjE,CAAC;EAEDK,KAAK,CAAEhB,KAAK,QAAmB;IAAA,IAAjB;MAAEiB,IAAI;MAAEC;IAAM,CAAC;IAC3BvC,cAAc,CAACqB,KAAK,CAAC;IAErB,MAAM;MAAEmB;IAAQ,CAAC,GAAGtC,aAAa,CAACmB,KAAK,EAAE;MACvCoB,UAAU,EAAE1B,KAAK,CAACM,KAAK,EAAE,YAAY,CAAC;MACtCqB,UAAU,EAAE3B,KAAK,CAACM,KAAK,EAAE,YAAY;IACvC,CAAC,CAAC;IAEF,MAAM;MAAEsB;IAAM,CAAC,GAAGtC,iBAAiB,CAACgB,KAAK,EAAEmB,OAAO,CAAC;IAEnD,MAAM;MAAEN,MAAM;MAAEU;IAAW,CAAC,GAAGtC,UAAU,CAACe,KAAK,CAAC;IAEhD,MAAM;MAAEY,IAAI;MAAEY,YAAY;MAAEC,UAAU;MAAEC,SAAS;MAAEC;IAAU,CAAC,GAAGxC,gBAAgB,CAACa,KAAK,EAAEsB,KAAK,CAAC;IAE/FjC,eAAe,CAACW,KAAK,EAAEsB,KAAK,CAAC;IAE7B/B,UAAU,CAAC;MACTqB,IAAI;MACJY,YAAY;MACZX,MAAM;MACNY,UAAU;MACVC,SAAS;MACTC;IACF,CAAC,CAAC;IAEFlC,OAAO,CAAC,cAAc,EAAE;MACtB8B,UAAU;MACVV;IACF,CAAC,CAAC;IAEFrB,eAAe,CAAC;MACdd,cAAc,EAAE;QACdkD,UAAU,EAAElC,KAAK,CAACM,KAAK,EAAE,YAAY,CAAC;QACtC6B,UAAU,EAAEnC,KAAK,CAACM,KAAK,EAAE,YAAY,CAAC;QACtCG,OAAO,EAAET,KAAK,CAACM,KAAK,EAAE,SAAS,CAAC;QAChCK,WAAW,EAAEX,KAAK,CAACM,KAAK,EAAE,aAAa;MACzC;IACF,CAAC,CAAC;IAEFJ,SAAS,CAAC;MAAA,SAEC,CACL,cAAc,EACd;QACE,uBAAuB,EAAEI,KAAK,CAACG;MACjC,CAAC,CACF;MAAA,eACaH,KAAK,CAAC8B,WAAW;MAAA,eACjB9B,KAAK,CAAC+B,WAAW;MAAA,UACtB/B,KAAK,CAACgC;IAAM;MAGnBC,GAAG,EAAEf,KAAK,CAACe,GAAG;MACd1B,OAAO,EAAEW,KAAK,CAACX,OAAO,GAAGW,KAAK,CAACX,OAAO,EAAE,GAAG;QAAA;QAAA;UAAA,SAE1B,qBAAqB;UAAA,QAAM;QAAU,IAC9CW,KAAK,CAACgB,OAAO,GAAGhB,KAAK,CAACgB,OAAO,EAAE;UAAA,UAEpBlC,KAAK,CAAC8B,WAAW;UAAA,WAChB9B,KAAK,CAACG,OAAO;UAAA,SACfH,KAAK,CAACC;QAAK,QAEtB,oBAEDiB,KAAK,CAACiB,KAAK,qBAAX,kBAAAjB,KAAK,CAAU;UAAA,SACJ,qBAAqB;UAAA,QAAM;QAAU,IAC9CA,KAAK,CAACkB,IAAI,GAAGlB,KAAK,CAACkB,IAAI,EAAE;UAAA,SAEfd,KAAK,CAACX,KAAK;UAAA,eACL,CAACI,KAAK,EAAEJ,KAAK,KAAKM,IAAI,CAAC,WAAW,EAAEF,KAAK,EAAEJ,KAAK;QAAC,GACrDO,KAAK,CAElB,oBAEDA,KAAK,CAACmB,KAAK,qBAAX,kBAAAnB,KAAK,CAAU,kBACfA,KAAK,CAACoB,KAAK,qBAAX,kBAAApB,KAAK,CAAU;MAAA,CAEpB;MACDqB,MAAM,EAAErB,KAAK,CAACqB,MAAM,GAAGrB,KAAK,CAACqB,MAAM,EAAE,GAAG,2CAE3B;QACPC,OAAO,EAAEtB,KAAK,CAAC,gBAAgB;MACjC,CAAC;IAEJ,EAGN,CAAC;EACJ;AACF,CAAC,CAAC"}
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
|
|
2
|
+
// Components
|
|
3
|
+
import { VTable } from "../../components/VTable/index.mjs";
|
|
4
|
+
import { VDataTableHeaders } from "./VDataTableHeaders.mjs";
|
|
5
|
+
import { VDataTableRows } from "./VDataTableRows.mjs"; // Composables
|
|
6
|
+
import { useProxiedModel } from "../../composables/proxiedModel.mjs";
|
|
7
|
+
import { createHeaders, makeDataTableHeaderProps } from "./composables/headers.mjs";
|
|
8
|
+
import { makeDataTableItemProps, useDataTableItems } from "./composables/items.mjs";
|
|
9
|
+
import { createExpanded, makeDataTableExpandProps } from "./composables/expand.mjs";
|
|
10
|
+
import { createSort, makeDataTableSortProps, useSortedItems } from "./composables/sort.mjs";
|
|
11
|
+
import { createGroupBy, makeDataTableGroupProps, useGroupedItems } from "./composables/group.mjs";
|
|
12
|
+
import { createSelection, makeDataTableSelectProps } from "./composables/select.mjs";
|
|
13
|
+
import { makeDataTableVirtualProps, useVirtual } from "./composables/virtual.mjs";
|
|
14
|
+
import { useOptions } from "./composables/options.mjs";
|
|
15
|
+
import { makeFilterProps, useFilter } from "../../composables/filter.mjs";
|
|
16
|
+
import { provideDefaults } from "../../composables/defaults.mjs"; // Utlities
|
|
17
|
+
import { computed, ref, toRef } from 'vue';
|
|
18
|
+
import { convertToUnit, defineComponent, useRender } from "../../util/index.mjs";
|
|
19
|
+
import { makeVDataTableProps } from "./VDataTable.mjs"; // Types
|
|
20
|
+
export const VDataTableVirtual = defineComponent({
|
|
21
|
+
name: 'VDataTableVirtual',
|
|
22
|
+
props: {
|
|
23
|
+
search: String,
|
|
24
|
+
...makeVDataTableProps(),
|
|
25
|
+
...makeVDataTableProps(),
|
|
26
|
+
...makeDataTableGroupProps(),
|
|
27
|
+
...makeDataTableExpandProps(),
|
|
28
|
+
...makeDataTableHeaderProps(),
|
|
29
|
+
...makeDataTableItemProps(),
|
|
30
|
+
...makeDataTableSelectProps(),
|
|
31
|
+
...makeDataTableSortProps(),
|
|
32
|
+
...makeDataTableVirtualProps(),
|
|
33
|
+
...makeFilterProps()
|
|
34
|
+
},
|
|
35
|
+
emits: {
|
|
36
|
+
'update:modelValue': value => true,
|
|
37
|
+
'update:sortBy': value => true,
|
|
38
|
+
'update:options': value => true,
|
|
39
|
+
'update:groupBy': value => true,
|
|
40
|
+
'update:expanded': value => true,
|
|
41
|
+
'click:row': (event, value) => true
|
|
42
|
+
},
|
|
43
|
+
setup(props, _ref) {
|
|
44
|
+
let {
|
|
45
|
+
emit,
|
|
46
|
+
slots
|
|
47
|
+
} = _ref;
|
|
48
|
+
const groupBy = useProxiedModel(props, 'groupBy');
|
|
49
|
+
const {
|
|
50
|
+
columns
|
|
51
|
+
} = createHeaders(props, {
|
|
52
|
+
groupBy,
|
|
53
|
+
showSelect: toRef(props, 'showSelect'),
|
|
54
|
+
showExpand: toRef(props, 'showExpand')
|
|
55
|
+
});
|
|
56
|
+
const {
|
|
57
|
+
items
|
|
58
|
+
} = useDataTableItems(props, columns);
|
|
59
|
+
const {
|
|
60
|
+
filteredItems
|
|
61
|
+
} = useFilter(props, items, toRef(props, 'search'));
|
|
62
|
+
const {
|
|
63
|
+
sortBy
|
|
64
|
+
} = createSort(props);
|
|
65
|
+
const {
|
|
66
|
+
sortByWithGroups,
|
|
67
|
+
opened,
|
|
68
|
+
extractRows
|
|
69
|
+
} = createGroupBy(props, groupBy, sortBy);
|
|
70
|
+
const {
|
|
71
|
+
sortedItems
|
|
72
|
+
} = useSortedItems(filteredItems, sortByWithGroups, columns);
|
|
73
|
+
const {
|
|
74
|
+
flatItems
|
|
75
|
+
} = useGroupedItems(sortedItems, groupBy, opened);
|
|
76
|
+
const allRows = computed(() => extractRows(flatItems.value));
|
|
77
|
+
createSelection(props, allRows);
|
|
78
|
+
createExpanded(props);
|
|
79
|
+
const {
|
|
80
|
+
containerRef,
|
|
81
|
+
paddingTop,
|
|
82
|
+
paddingBottom,
|
|
83
|
+
startIndex,
|
|
84
|
+
stopIndex,
|
|
85
|
+
itemHeight,
|
|
86
|
+
handleScroll
|
|
87
|
+
} = useVirtual(props, flatItems);
|
|
88
|
+
const visibleItems = computed(() => {
|
|
89
|
+
return flatItems.value.slice(startIndex.value, stopIndex.value);
|
|
90
|
+
});
|
|
91
|
+
useOptions({
|
|
92
|
+
sortBy,
|
|
93
|
+
page: ref(1),
|
|
94
|
+
startIndex: ref(0),
|
|
95
|
+
stopIndex: computed(() => flatItems.value.length - 1),
|
|
96
|
+
pageCount: ref(1),
|
|
97
|
+
itemsPerPage: ref(-1)
|
|
98
|
+
});
|
|
99
|
+
provideDefaults({
|
|
100
|
+
VDataTableRows: {
|
|
101
|
+
hideNoData: toRef(props, 'hideNoData'),
|
|
102
|
+
noDataText: toRef(props, 'noDataText')
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
useRender(() => _createVNode(VTable, {
|
|
106
|
+
"class": "v-data-table",
|
|
107
|
+
"style": {
|
|
108
|
+
'--v-table-row-height': convertToUnit(itemHeight.value)
|
|
109
|
+
},
|
|
110
|
+
"height": props.height,
|
|
111
|
+
"fixedHeader": props.fixedHeader
|
|
112
|
+
}, {
|
|
113
|
+
top: slots.top,
|
|
114
|
+
wrapper: () => _createVNode("div", {
|
|
115
|
+
"ref": containerRef,
|
|
116
|
+
"onScroll": handleScroll,
|
|
117
|
+
"class": "v-table__wrapper",
|
|
118
|
+
"style": {
|
|
119
|
+
height: convertToUnit(props.height)
|
|
120
|
+
}
|
|
121
|
+
}, [_createVNode("table", null, [_createVNode("thead", null, [_createVNode(VDataTableHeaders, {
|
|
122
|
+
"sticky": props.fixedHeader,
|
|
123
|
+
"multiSort": props.multiSort
|
|
124
|
+
}, slots)]), _createVNode("tbody", null, [_createVNode("tr", {
|
|
125
|
+
"style": {
|
|
126
|
+
height: convertToUnit(paddingTop.value),
|
|
127
|
+
border: 0
|
|
128
|
+
}
|
|
129
|
+
}, [_createVNode("td", {
|
|
130
|
+
"colspan": columns.value.length,
|
|
131
|
+
"style": {
|
|
132
|
+
height: convertToUnit(paddingTop.value),
|
|
133
|
+
border: 0
|
|
134
|
+
}
|
|
135
|
+
}, null)]), _createVNode(VDataTableRows, {
|
|
136
|
+
"items": visibleItems.value,
|
|
137
|
+
"onClick:row": (event, value) => emit('click:row', event, value)
|
|
138
|
+
}, slots), _createVNode("tr", {
|
|
139
|
+
"style": {
|
|
140
|
+
height: convertToUnit(paddingBottom.value),
|
|
141
|
+
border: 0
|
|
142
|
+
}
|
|
143
|
+
}, [_createVNode("td", {
|
|
144
|
+
"colspan": columns.value.length,
|
|
145
|
+
"style": {
|
|
146
|
+
height: convertToUnit(paddingBottom.value),
|
|
147
|
+
border: 0
|
|
148
|
+
}
|
|
149
|
+
}, null)])])])]),
|
|
150
|
+
bottom: slots.bottom
|
|
151
|
+
}));
|
|
152
|
+
}
|
|
153
|
+
});
|
|
154
|
+
//# sourceMappingURL=VDataTableVirtual.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
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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"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
// Utilities
|
|
2
|
+
import { inject, provide, toRef } from 'vue';
|
|
3
|
+
import { propsFactory } from "../../../util/index.mjs"; // Composables
|
|
4
|
+
import { useProxiedModel } from "../../../composables/proxiedModel.mjs"; // Types
|
|
5
|
+
export const makeDataTableExpandProps = propsFactory({
|
|
6
|
+
expandOnClick: Boolean,
|
|
7
|
+
showExpand: Boolean,
|
|
8
|
+
expanded: {
|
|
9
|
+
type: Array,
|
|
10
|
+
default: () => []
|
|
11
|
+
}
|
|
12
|
+
}, 'v-data-table-expand');
|
|
13
|
+
export const VDataTableExpandedKey = Symbol.for('vuetify:datatable:expanded');
|
|
14
|
+
export function createExpanded(props) {
|
|
15
|
+
const expandOnClick = toRef(props, 'expandOnClick');
|
|
16
|
+
const expanded = useProxiedModel(props, 'expanded', props.expanded, v => {
|
|
17
|
+
return new Set(v);
|
|
18
|
+
}, v => {
|
|
19
|
+
return [...v.values()];
|
|
20
|
+
});
|
|
21
|
+
function expand(item, value) {
|
|
22
|
+
const newExpanded = new Set(expanded.value);
|
|
23
|
+
if (!value) {
|
|
24
|
+
newExpanded.delete(item.value);
|
|
25
|
+
} else {
|
|
26
|
+
newExpanded.add(item.value);
|
|
27
|
+
}
|
|
28
|
+
expanded.value = newExpanded;
|
|
29
|
+
}
|
|
30
|
+
function isExpanded(item) {
|
|
31
|
+
return expanded.value.has(item.value);
|
|
32
|
+
}
|
|
33
|
+
function toggleExpand(item) {
|
|
34
|
+
expand(item, !isExpanded(item));
|
|
35
|
+
}
|
|
36
|
+
const data = {
|
|
37
|
+
expand,
|
|
38
|
+
expanded,
|
|
39
|
+
expandOnClick,
|
|
40
|
+
isExpanded,
|
|
41
|
+
toggleExpand
|
|
42
|
+
};
|
|
43
|
+
provide(VDataTableExpandedKey, data);
|
|
44
|
+
return data;
|
|
45
|
+
}
|
|
46
|
+
export function useExpanded() {
|
|
47
|
+
const data = inject(VDataTableExpandedKey);
|
|
48
|
+
if (!data) throw new Error('foo');
|
|
49
|
+
return data;
|
|
50
|
+
}
|
|
51
|
+
//# sourceMappingURL=expand.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
// Utilities
|
|
2
|
+
import { computed, inject, provide, ref } from 'vue';
|
|
3
|
+
import { getObjectValueByPath, propsFactory } from "../../../util/index.mjs"; // Types
|
|
4
|
+
export const makeDataTableGroupProps = propsFactory({
|
|
5
|
+
groupBy: {
|
|
6
|
+
type: Array,
|
|
7
|
+
default: () => []
|
|
8
|
+
}
|
|
9
|
+
}, 'data-table-group');
|
|
10
|
+
const VDataTableGroupSymbol = Symbol.for('vuetify:data-table-group');
|
|
11
|
+
export function createGroupBy(props, groupBy, sortBy) {
|
|
12
|
+
const opened = ref(new Set());
|
|
13
|
+
const sortByWithGroups = computed(() => {
|
|
14
|
+
return groupBy.value.map(val => ({
|
|
15
|
+
...val,
|
|
16
|
+
order: val.order ?? false
|
|
17
|
+
})).concat(sortBy.value);
|
|
18
|
+
});
|
|
19
|
+
function toggleGroup(group, value) {
|
|
20
|
+
const open = value == null ? !opened.value.has(group) : value;
|
|
21
|
+
if (open) opened.value.add(group);else opened.value.delete(group);
|
|
22
|
+
}
|
|
23
|
+
function extractRows(items) {
|
|
24
|
+
function dive(group) {
|
|
25
|
+
const arr = [];
|
|
26
|
+
for (const item of group.items) {
|
|
27
|
+
if (item.type === 'item') arr.push(item);else {
|
|
28
|
+
arr.push(...dive(item));
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
return arr;
|
|
32
|
+
}
|
|
33
|
+
return dive({
|
|
34
|
+
type: 'group-header',
|
|
35
|
+
items,
|
|
36
|
+
id: 'dummy',
|
|
37
|
+
key: 'dummy',
|
|
38
|
+
value: 'dummy',
|
|
39
|
+
depth: 0
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
// onBeforeMount(() => {
|
|
44
|
+
// for (const key of groupedItems.value.keys()) {
|
|
45
|
+
// opened.value.add(key)
|
|
46
|
+
// }
|
|
47
|
+
// })
|
|
48
|
+
|
|
49
|
+
const data = {
|
|
50
|
+
sortByWithGroups,
|
|
51
|
+
toggleGroup,
|
|
52
|
+
opened,
|
|
53
|
+
groupBy,
|
|
54
|
+
extractRows
|
|
55
|
+
};
|
|
56
|
+
provide(VDataTableGroupSymbol, data);
|
|
57
|
+
return data;
|
|
58
|
+
}
|
|
59
|
+
export function useGroupBy() {
|
|
60
|
+
const data = inject(VDataTableGroupSymbol);
|
|
61
|
+
if (!data) throw new Error('Missing group!');
|
|
62
|
+
return data;
|
|
63
|
+
}
|
|
64
|
+
function groupItemsByProperty(items, groupBy) {
|
|
65
|
+
if (!items.length) return [];
|
|
66
|
+
const groups = new Map();
|
|
67
|
+
for (const item of items) {
|
|
68
|
+
const value = getObjectValueByPath(item.raw, groupBy);
|
|
69
|
+
if (!groups.has(value)) {
|
|
70
|
+
groups.set(value, []);
|
|
71
|
+
}
|
|
72
|
+
groups.get(value).push(item);
|
|
73
|
+
}
|
|
74
|
+
return groups;
|
|
75
|
+
}
|
|
76
|
+
function groupItems(items, groupBy) {
|
|
77
|
+
let depth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
|
78
|
+
let prefix = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'root';
|
|
79
|
+
if (!groupBy.length) return [];
|
|
80
|
+
const groupedItems = groupItemsByProperty(items, groupBy[0]);
|
|
81
|
+
const groups = [];
|
|
82
|
+
const rest = groupBy.slice(1);
|
|
83
|
+
groupedItems.forEach((items, value) => {
|
|
84
|
+
const key = groupBy[0];
|
|
85
|
+
const id = `${prefix}_${key}_${value}`;
|
|
86
|
+
groups.push({
|
|
87
|
+
depth,
|
|
88
|
+
id,
|
|
89
|
+
key,
|
|
90
|
+
value,
|
|
91
|
+
items: rest.length ? groupItems(items, rest, depth + 1, id) : items,
|
|
92
|
+
type: 'group-header'
|
|
93
|
+
});
|
|
94
|
+
});
|
|
95
|
+
return groups;
|
|
96
|
+
}
|
|
97
|
+
function flattenItems(items, opened) {
|
|
98
|
+
const flatItems = [];
|
|
99
|
+
for (const item of items) {
|
|
100
|
+
// TODO: make this better
|
|
101
|
+
if (item.type === 'group-header') {
|
|
102
|
+
if (item.value != null) {
|
|
103
|
+
flatItems.push(item);
|
|
104
|
+
}
|
|
105
|
+
if (opened.has(item.id) || item.value == null) {
|
|
106
|
+
flatItems.push(...flattenItems(item.items, opened));
|
|
107
|
+
}
|
|
108
|
+
} else {
|
|
109
|
+
flatItems.push(item);
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
return flatItems;
|
|
113
|
+
}
|
|
114
|
+
export function useGroupedItems(items, groupBy, opened) {
|
|
115
|
+
const flatItems = computed(() => {
|
|
116
|
+
if (!groupBy.value.length) return items.value;
|
|
117
|
+
const groupedItems = groupItems(items.value, groupBy.value.map(item => item.key));
|
|
118
|
+
return flattenItems(groupedItems, opened.value);
|
|
119
|
+
});
|
|
120
|
+
return {
|
|
121
|
+
flatItems
|
|
122
|
+
};
|
|
123
|
+
}
|
|
124
|
+
//# sourceMappingURL=group.mjs.map
|