@vunset/vue 0.0.0-stage → 1.0.0-rc.2

package/dist/components/data-table/DataTable.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,683 @@
+import { provideRecycle } from "../../shared/recycle.js";
+import { useControlled } from "../../shared/use-controlled.js";
+import { useVirtualList } from "../../composables/use-virtual-list.js";
+import TableRoot_default from "../table/TableRoot.js";
+import TableHeader_default from "../table/TableHeader.js";
+import TableBody_default from "../table/TableBody.js";
+import TableFooter_default from "../table/TableFooter.js";
+import TableRow_default from "../table/TableRow.js";
+import TableHeadCell_default from "../table/TableHeadCell.js";
+import TableCell_default from "../table/TableCell.js";
+import { routeQueryKey } from "../../shared/route-query.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, mergeProps, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, renderSlot, unref, useSlots, watch, withCtx, withModifiers } from "vue";
+import { FlexRender, columnPinningFeature, columnResizingFeature, columnSizingFeature, columnVisibilityFeature, createColumnHelper, createExpandedRowModel, createSortedRowModel, rowExpandingFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_basic, sortFn_datetime, sortFn_text, tableFeatures, useTable } from "@tanstack/vue-table";
+//#region src/components/data-table/DataTable.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["onClick"];
+var _hoisted_2 = ["data-direction"];
+var _hoisted_3 = ["data-active"];
+var _hoisted_4 = ["data-active"];
+var _hoisted_5 = [
+	"data-resizing",
+	"onMousedown",
+	"onTouchstart",
+	"onDblclick"
+];
+var _hoisted_6 = {
+	key: 0,
+	"data-part": "table-spacer",
+	"aria-hidden": "true"
+};
+var _hoisted_7 = ["colspan"];
+var _hoisted_8 = [
+	"data-expanded",
+	"aria-expanded",
+	"aria-label",
+	"onClick"
+];
+var _hoisted_9 = {
+	key: 1,
+	"data-part": "table-spacer",
+	"aria-hidden": "true"
+};
+var _hoisted_10 = ["colspan"];
+var dataTableFeatures = tableFeatures({
+	columnPinningFeature,
+	columnResizingFeature,
+	columnSizingFeature,
+	columnVisibilityFeature,
+	rowExpandingFeature,
+	rowSortingFeature,
+	expandedRowModel: createExpandedRowModel(),
+	sortedRowModel: createSortedRowModel(),
+	sortFns: {
+		alphanumeric: sortFn_alphanumeric,
+		text: sortFn_text,
+		basic: sortFn_basic,
+		datetime: sortFn_datetime
+	},
+	columnMeta: {}
+});
+var EXPANDER_COLUMN = "expander";
+var RowScope = defineComponent({
+	props: { item: {
+		type: null,
+		required: true
+	} },
+	setup(props, { slots }) {
+		provideRecycle(() => props.item);
+		return () => slots.default?.();
+	}
+});
+function parseSort(input) {
+	if (input === void 0) return [];
+	if (typeof input !== "string") return input;
+	return input.split(",").map((part) => part.trim()).filter(Boolean).map((part) => {
+		const at = part.lastIndexOf(":");
+		const direction = at === -1 ? "" : part.slice(at + 1).trim().toLowerCase();
+		return {
+			id: direction === "asc" || direction === "desc" ? part.slice(0, at).trim() : part,
+			desc: direction === "desc"
+		};
+	});
+}
+/** A sort as `parseSort` reads it: `'name:asc,age:desc'`. */
+function formatSort(sorting) {
+	return sorting.map(({ id, desc }) => `${id}:${desc ? "desc" : "asc"}`).join(",");
+}
+var DataTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DataTable",
+	inheritAttrs: false,
+	__name: "DataTable",
+	props: {
+		data: {},
+		columns: {},
+		getRowId: {},
+		nestedKey: {},
+		expandOnRowClick: { type: Boolean },
+		rowAttrs: {},
+		enableSorting: {
+			type: Boolean,
+			default: void 0
+		},
+		manualSorting: { type: Boolean },
+		striped: { type: Boolean },
+		tableClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		headerClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		bodyClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		footerClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		rowClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		thClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		tdClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		tfClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		sortQuery: {
+			type: [String, Boolean],
+			default: void 0
+		},
+		stickyHeader: { type: [Boolean, Number] },
+		stickyFooter: { type: [Boolean, Number] },
+		virtual: {
+			type: [
+				Boolean,
+				Number,
+				Object
+			],
+			default: void 0
+		},
+		sorting: {},
+		defaultSort: {},
+		expanded: {},
+		columnVisibility: {},
+		columnPinning: {},
+		columnSizing: {}
+	},
+	emits: [
+		"update:sorting",
+		"update:expanded",
+		"update:columnVisibility",
+		"update:columnPinning",
+		"update:columnSizing"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const columns = computed(() => {
+			const own = typeof props.columns === "function" ? props.columns(createColumnHelper()) : props.columns;
+			if (!props.nestedKey) return own;
+			return [{
+				id: EXPANDER_COLUMN,
+				size: 40,
+				enableSorting: false,
+				enableResizing: false,
+				enableHiding: false,
+				header: () => null
+			}, ...own];
+		});
+		/** Every leaf column, flattened out of any groups. */
+		const leaves = computed(() => {
+			const out = [];
+			const walk = (list) => {
+				for (const column of list) {
+					const children = column.columns;
+					if (children) walk(children);
+					else out.push(column);
+				}
+			};
+			walk(columns.value);
+			return out;
+		});
+		const idOf = (column) => column.id ?? column.accessorKey;
+		/** Each slice of state is a `v-model`, owned by the caller or kept here. */
+		function slice(name, value, fallback, change) {
+			const state = useControlled({
+				value,
+				defaultValue: fallback,
+				onChange: change,
+				name: "DataTable",
+				label: name
+			});
+			return {
+				state,
+				update: (updater) => {
+					state.value = typeof updater === "function" ? updater(state.value) : updater;
+				}
+			};
+		}
+		const routeQuery = inject(routeQueryKey, null);
+		const queryKey = () => props.sortQuery === false ? null : props.sortQuery ?? (props.manualSorting ? "sortBy" : null);
+		const inRoute = () => routeQuery !== null && queryKey() !== null && props.sorting === void 0;
+		const sorting = slice("sorting", () => props.sorting ?? (inRoute() ? parseSort(routeQuery.get(queryKey()) ?? props.defaultSort) : void 0), () => parseSort(props.defaultSort), (next) => {
+			emit("update:sorting", next);
+			if (inRoute()) routeQuery.set(queryKey(), next.length > 0 ? formatSort(next) : void 0);
+		});
+		const expanded = slice("expanded", () => props.expanded, () => ({}), (next) => emit("update:expanded", next));
+		const sizing = slice("columnSizing", () => props.columnSizing, () => ({}), (next) => emit("update:columnSizing", next));
+		const floors = /* @__PURE__ */ new Map();
+		const byColumn = (columnId) => `[data-column="${columnId.replace(/["\\]/g, "\\$&")}"]`;
+		function floorOf(container, columnId) {
+			const heads = Array.from(container.querySelectorAll(`thead th${byColumn(columnId)}`));
+			const head = heads.at(-1);
+			if (!head) return void 0;
+			const name = widthVar(columnId);
+			const width = container.style.getPropertyValue(name);
+			const saved = heads.map((cell) => cell.style.cssText);
+			container.style.setProperty(name, "0px");
+			for (const cell of heads) {
+				cell.style.minWidth = "0px";
+				cell.style.maxWidth = "none";
+			}
+			const floor = Math.ceil(head.getBoundingClientRect().width);
+			heads.forEach((cell, index) => cell.style.cssText = saved[index]);
+			container.style.setProperty(name, width);
+			return floor;
+		}
+		function measureFloor(event, columnId) {
+			const container = event.currentTarget.closest("[data-part=\"table-container\"]");
+			const floor = container ? floorOf(container, columnId) : void 0;
+			if (floor !== void 0) floors.set(columnId, floor);
+		}
+		function onResizeStart(event, header) {
+			measureFloor(event, header.column.id);
+			header.getResizeHandler()(event);
+		}
+		function updateSizing(updater) {
+			sizing.update((old) => {
+				const clamped = { ...typeof updater === "function" ? updater(old) : updater };
+				for (const [id, floor] of floors) if (clamped[id] !== void 0 && clamped[id] < floor) clamped[id] = floor;
+				return clamped;
+			});
+		}
+		const visibility = slice("columnVisibility", () => props.columnVisibility, () => ({}), (next) => emit("update:columnVisibility", next));
+		const visibilityState = computed(() => {
+			const defaults = {};
+			for (const column of leaves.value) if (column.meta?.show !== void 0) defaults[idOf(column)] = column.meta.show;
+			return {
+				...defaults,
+				...visibility.state.value
+			};
+		});
+		const pinning = slice("columnPinning", () => props.columnPinning, () => ({
+			start: [...props.nestedKey ? [EXPANDER_COLUMN] : [], ...leaves.value.filter((c) => c.meta?.pin === "start").map(idOf)],
+			end: leaves.value.filter((c) => c.meta?.pin === "end").map(idOf)
+		}), (next) => emit("update:columnPinning", next));
+		const objectIds = /* @__PURE__ */ new WeakMap();
+		let nextObjectId = 0;
+		function objectId(row, index, parent) {
+			if (typeof row !== "object" || row === null) return parent ? `${parent.id}.${index}` : String(index);
+			let id = objectIds.get(row);
+			if (id === void 0) objectIds.set(row, id = `row-${nextObjectId++}`);
+			return id;
+		}
+		const table = useTable({
+			features: dataTableFeatures,
+			get data() {
+				return props.data;
+			},
+			get columns() {
+				return columns.value;
+			},
+			get getRowId() {
+				return props.getRowId ?? objectId;
+			},
+			getSubRows: (row) => props.nestedKey ? row[props.nestedKey] : void 0,
+			get defaultColumn() {
+				return {
+					enableResizing: false,
+					enableSorting: props.enableSorting,
+					size: void 0
+				};
+			},
+			get manualSorting() {
+				return props.manualSorting;
+			},
+			columnResizeMode: "onChange",
+			state: {
+				get sorting() {
+					return sorting.state.value;
+				},
+				get expanded() {
+					return expanded.state.value;
+				},
+				get columnVisibility() {
+					return visibilityState.value;
+				},
+				get columnPinning() {
+					return pinning.state.value;
+				},
+				get columnSizing() {
+					return sizing.state.value;
+				}
+			},
+			onSortingChange: sorting.update,
+			onExpandedChange: expanded.update,
+			onColumnVisibilityChange: visibility.update,
+			onColumnPinningChange: pinning.update,
+			onColumnSizingChange: updateSizing
+		});
+		const rows = computed(() => table.getRowModel().rows);
+		const startEdge = computed(() => table.getStartVisibleLeafColumns().at(-1)?.id);
+		const endEdge = computed(() => table.getEndVisibleLeafColumns()[0]?.id);
+		const isSized = (column) => column.columnDef.size !== void 0 || column.getCanResize() || column.getIsPinned() !== false;
+		const columnIndex = computed(() => new Map(table.getAllLeafColumns().map((column, index) => [column.id, index])));
+		const widthVar = (columnId) => `--dt-col-${columnIndex.value.get(columnId)}`;
+		const widthVars = computed(() => {
+			const vars = {};
+			for (const column of table.getAllLeafColumns()) if (isSized(column)) vars[widthVar(column.id)] = `${column.getSize()}px`;
+			return vars;
+		});
+		function pinOf(column) {
+			const pinned = column.getIsPinned();
+			if (!pinned) return {};
+			return {
+				pinned,
+				offset: pinned === "start" ? column.getStart("start") : column.getAfter("end"),
+				"data-pinned-edge": (pinned === "start" ? startEdge.value : endEdge.value) === column.id ? "" : void 0
+			};
+		}
+		function columnProps(column) {
+			return {
+				"data-column": column.id,
+				...pinOf(column)
+			};
+		}
+		function sizedProps(column) {
+			return {
+				...columnProps(column),
+				width: isSized(column) ? `var(${widthVar(column.id)})` : void 0
+			};
+		}
+		const sortOf = (header) => header.isPlaceholder || !header.column.getCanSort() ? void 0 : header.column.getIsSorted() || false;
+		const metaTdClass = (cell) => {
+			const value = cell.column.columnDef.meta?.tdClass;
+			return typeof value === "function" ? value(cell.getContext()) : value;
+		};
+		const getValues = (columnId) => () => table.getPreExpandedRowModel().rows.map((row) => row.getValue(columnId));
+		const cellSlot = (columnId) => slots[columnId] ? columnId : `cell-${columnId}`;
+		const hasFooter = computed(() => leaves.value.some((column) => column.footer !== void 0 || slots[`foot-${idOf(column)}`]));
+		const leafCount = computed(() => table.getVisibleLeafColumns().length);
+		const root = ref(null);
+		function fitToHeaders() {
+			const container = root.value?.$el;
+			if (!container) return;
+			const grown = {};
+			for (const column of table.getVisibleLeafColumns()) {
+				if (!isSized(column)) continue;
+				const floor = floorOf(container, column.id);
+				if (floor !== void 0 && floor > column.getSize()) grown[column.id] = floor;
+			}
+			if (Object.keys(grown).length) sizing.state.value = {
+				...sizing.state.value,
+				...grown
+			};
+		}
+		onMounted(fitToHeaders);
+		watch(rows, fitToHeaders, { flush: "post" });
+		const body = ref(null);
+		const measured = ref();
+		const virtualOption = (key) => typeof props.virtual === "object" ? props.virtual[key] : void 0;
+		const isVirtual = computed(() => Boolean(props.virtual));
+		const fixedRowHeight = computed(() => typeof props.virtual === "number" ? props.virtual : virtualOption("rowHeight"));
+		const overscan = computed(() => virtualOption("overscan") ?? 8);
+		function measureRow() {
+			if (!isVirtual.value || fixedRowHeight.value !== void 0 || measured.value) return;
+			const row = body.value?.$el.querySelector("tr[data-index]");
+			if (row?.offsetHeight) measured.value = row.offsetHeight;
+		}
+		const rowHeight = computed(() => fixedRowHeight.value ?? measured.value ?? 34);
+		const virtual = useVirtualList({
+			items: rows,
+			itemHeight: rowHeight,
+			enabled: isVirtual,
+			overscan,
+			scroller: computed(() => root.value?.$el),
+			list: computed(() => body.value?.$el)
+		});
+		let slotOf = /* @__PURE__ */ new Map();
+		let slotCount = 0;
+		const rowSlots = computed(() => {
+			const ids = isVirtual.value ? virtual.visible.value.map((row) => row.id) : [];
+			const shown = new Set(ids);
+			const free = [...slotOf].filter(([id]) => !shown.has(id)).map(([, slot]) => slot);
+			const next = /* @__PURE__ */ new Map();
+			for (const id of ids) next.set(id, slotOf.get(id) ?? free.pop() ?? slotCount++);
+			slotOf = next;
+			return next;
+		});
+		const rowKey = (row) => rowSlots.value.get(row.id) ?? row.id;
+		onMounted(measureRow);
+		watch(() => virtual.visible.value.length, measureRow, { flush: "post" });
+		const headerRows = computed(() => table.getHeaderGroups().length);
+		function onRowClick(row) {
+			if (props.expandOnRowClick && row.getCanExpand()) row.toggleExpanded();
+		}
+		__expose({ table });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(TableRoot_default, mergeProps({
+				ref_key: "root",
+				ref: root,
+				"data-table": "data",
+				"sticky-header": props.stickyHeader,
+				"sticky-footer": props.stickyFooter,
+				"row-count": isVirtual.value ? headerRows.value + rows.value.length : void 0,
+				style: widthVars.value,
+				"data-striped": props.striped ? "" : void 0,
+				"table-class": props.tableClass
+			}, _ctx.$attrs), {
+				default: withCtx(() => [
+					createVNode(TableHeader_default, { class: normalizeClass(props.headerClass) }, {
+						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(table).getHeaderGroups(), (group, level) => {
+							return openBlock(), createBlock(TableRow_default, {
+								key: group.id,
+								"aria-rowindex": isVirtual.value ? level + 1 : void 0
+							}, {
+								default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(group.headers, (header) => {
+									return openBlock(), createBlock(TableHeadCell_default, mergeProps({
+										key: header.id,
+										colspan: header.colSpan > 1 ? header.colSpan : void 0,
+										sort: sortOf(header)
+									}, { ref_for: true }, sizedProps(header.column), {
+										"data-resizing": header.column.getIsResizing() || void 0,
+										class: [
+											props.thClass,
+											header.column.columnDef.meta?.class,
+											header.column.columnDef.meta?.thClass
+										]
+									}), {
+										default: withCtx(() => [!header.isPlaceholder ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [header.column.getCanSort() ? (openBlock(), createElementBlock("button", {
+											key: 0,
+											type: "button",
+											"data-part": "table-sort",
+											onClick: ($event) => header.column.getToggleSortingHandler()?.($event)
+										}, [renderSlot(_ctx.$slots, `head-${header.column.id}`, {
+											column: header.column,
+											getValues: getValues(header.column.id)
+										}, () => [
+											renderSlot(_ctx.$slots, `head-${header.column.id}-start`, { getValues: getValues(header.column.id) }),
+											header.column.columnDef.header !== "" ? (openBlock(), createBlock(unref(FlexRender), {
+												key: 0,
+												render: header.column.columnDef.header,
+												props: header.getContext()
+											}, null, 8, ["render", "props"])) : createCommentVNode("", true),
+											renderSlot(_ctx.$slots, `head-${header.column.id}-end`, { getValues: getValues(header.column.id) })
+										]), renderSlot(_ctx.$slots, `sort-${header.column.id}`, { direction: header.column.getIsSorted() }, () => [renderSlot(_ctx.$slots, "sort", { direction: header.column.getIsSorted() }, () => [(openBlock(), createElementBlock("svg", {
+											"data-part": "table-sort-icon",
+											"data-direction": header.column.getIsSorted() || void 0,
+											viewBox: "0 0 16 30",
+											fill: "none",
+											stroke: "currentColor",
+											"stroke-width": "3.5",
+											"aria-hidden": "true"
+										}, [createElementVNode("path", {
+											d: "M2 21L8 27L14 21",
+											"data-active": header.column.getIsSorted() === "desc" || void 0
+										}, null, 8, _hoisted_3), createElementVNode("path", {
+											d: "M2 9L8 3L14 9",
+											"data-active": header.column.getIsSorted() === "asc" || void 0
+										}, null, 8, _hoisted_4)], 8, _hoisted_2))])])], 8, _hoisted_1)) : renderSlot(_ctx.$slots, `head-${header.column.id}`, {
+											column: header.column,
+											getValues: getValues(header.column.id)
+										}, () => [
+											renderSlot(_ctx.$slots, `head-${header.column.id}-start`, { getValues: getValues(header.column.id) }),
+											header.column.columnDef.header !== "" ? (openBlock(), createBlock(unref(FlexRender), {
+												key: 0,
+												render: header.column.columnDef.header,
+												props: header.getContext()
+											}, null, 8, ["render", "props"])) : createCommentVNode("", true),
+											renderSlot(_ctx.$slots, `head-${header.column.id}-end`, { getValues: getValues(header.column.id) })
+										], void 0, 1), header.column.getCanResize() ? (openBlock(), createElementBlock("div", {
+											key: 2,
+											"data-part": "table-resizer",
+											"data-resizing": header.column.getIsResizing() || void 0,
+											"aria-hidden": "true",
+											onMousedown: ($event) => onResizeStart($event, header),
+											onTouchstart: ($event) => onResizeStart($event, header),
+											onDblclick: ($event) => header.column.resetSize()
+										}, null, 40, _hoisted_5)) : createCommentVNode("", true)], 64)) : createCommentVNode("", true)]),
+										_: 2
+									}, 1040, [
+										"colspan",
+										"sort",
+										"data-resizing",
+										"class"
+									]);
+								}), 128))]),
+								_: 2
+							}, 1032, ["aria-rowindex"]);
+						}), 128))]),
+						_: 3
+					}, 8, ["class"]),
+					createVNode(TableBody_default, {
+						ref_key: "body",
+						ref: body,
+						class: normalizeClass(props.bodyClass)
+					}, {
+						default: withCtx(() => [
+							unref(virtual).before.value ? (openBlock(), createElementBlock("tr", _hoisted_6, [createElementVNode("td", {
+								colspan: leafCount.value,
+								style: normalizeStyle({
+									height: `${unref(virtual).before.value}px`,
+									padding: 0,
+									border: 0
+								})
+							}, null, 12, _hoisted_7)])) : createCommentVNode("", true),
+							(openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtual).visible.value, (row, offset) => {
+								return openBlock(), createBlock(unref(RowScope), {
+									key: rowKey(row),
+									item: row.id
+								}, {
+									default: withCtx(() => [createVNode(TableRow_default, mergeProps({
+										index: unref(virtual).start.value + offset,
+										"aria-rowindex": isVirtual.value ? headerRows.value + unref(virtual).start.value + offset + 1 : void 0,
+										expanded: row.getIsExpanded(),
+										"data-depth": row.depth || void 0,
+										style: row.depth ? { "--depth": row.depth } : void 0,
+										class: props.rowClass
+									}, { ref_for: true }, props.rowAttrs?.(row.original), { onClick: ($event) => onRowClick(row) }), {
+										default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(row.getVisibleCells(), (cell) => {
+											return openBlock(), createBlock(TableCell_default, mergeProps({ key: cell.column.id }, { ref_for: true }, sizedProps(cell.column), { class: [
+												props.tdClass,
+												cell.column.columnDef.meta?.class,
+												metaTdClass(cell)
+											] }), {
+												default: withCtx(() => [cell.column.id === "expander" ? renderSlot(_ctx.$slots, "expander", {
+													row,
+													expanded: row.getIsExpanded(),
+													toggle: () => row.toggleExpanded()
+												}, () => [row.getCanExpand() ? (openBlock(), createElementBlock("button", {
+													key: 0,
+													type: "button",
+													"data-part": "table-expander",
+													"data-expanded": row.getIsExpanded() || void 0,
+													"aria-expanded": row.getIsExpanded(),
+													"aria-label": row.getIsExpanded() ? "Collapse row" : "Expand row",
+													onClick: withModifiers(($event) => row.toggleExpanded(), ["stop"])
+												}, [renderSlot(_ctx.$slots, "expander-icon", { expanded: row.getIsExpanded() }, () => [_cache[0] || (_cache[0] = createElementVNode("svg", {
+													viewBox: "0 0 24 24",
+													fill: "none",
+													"aria-hidden": "true"
+												}, [createElementVNode("path", {
+													d: "M9 5l7 7-7 7",
+													stroke: "currentColor",
+													"stroke-width": "2.5"
+												})], -1))])], 8, _hoisted_8)) : createCommentVNode("", true)], void 0, 0) : renderSlot(_ctx.$slots, cellSlot(cell.column.id), {
+													cell: cell.getValue(),
+													row: row.original,
+													depth: row.depth,
+													isNested: row.depth > 0,
+													expanded: row.getIsExpanded()
+												}, () => [cell.column.columnDef.cell !== "" ? (openBlock(), createBlock(unref(FlexRender), {
+													key: 0,
+													render: cell.column.columnDef.cell,
+													props: cell.getContext()
+												}, null, 8, ["render", "props"])) : createCommentVNode("", true)], void 0, 1)]),
+												_: 2
+											}, 1040, ["class"]);
+										}), 128))]),
+										_: 2
+									}, 1040, [
+										"index",
+										"aria-rowindex",
+										"expanded",
+										"data-depth",
+										"style",
+										"class",
+										"onClick"
+									])]),
+									_: 2
+								}, 1032, ["item"]);
+							}), 128)),
+							unref(virtual).after.value ? (openBlock(), createElementBlock("tr", _hoisted_9, [createElementVNode("td", {
+								colspan: leafCount.value,
+								style: normalizeStyle({
+									height: `${unref(virtual).after.value}px`,
+									padding: 0,
+									border: 0
+								})
+							}, null, 12, _hoisted_10)])) : createCommentVNode("", true),
+							!rows.value.length && _ctx.$slots.empty ? (openBlock(), createBlock(TableRow_default, {
+								key: 2,
+								"data-empty": ""
+							}, {
+								default: withCtx(() => [createVNode(TableCell_default, { colspan: leafCount.value }, {
+									default: withCtx(() => [renderSlot(_ctx.$slots, "empty")]),
+									_: 3
+								}, 8, ["colspan"])]),
+								_: 3
+							})) : createCommentVNode("", true)
+						]),
+						_: 3
+					}, 8, ["class"]),
+					hasFooter.value ? (openBlock(), createBlock(TableFooter_default, {
+						key: 0,
+						class: normalizeClass(props.footerClass)
+					}, {
+						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(table).getFooterGroups(), (group) => {
+							return openBlock(), createElementBlock(Fragment, { key: group.id }, [group.headers.some((h) => !h.isPlaceholder && (h.column.columnDef.footer !== void 0 || _ctx.$slots[`foot-${h.column.id}`])) ? (openBlock(), createBlock(TableRow_default, { key: 0 }, {
+								default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(group.headers, (header) => {
+									return openBlock(), createBlock(TableCell_default, mergeProps({
+										key: header.id,
+										colspan: header.colSpan > 1 ? header.colSpan : void 0
+									}, { ref_for: true }, sizedProps(header.column), { class: [
+										props.tfClass,
+										header.column.columnDef.meta?.class,
+										header.column.columnDef.meta?.tfClass
+									] }), {
+										default: withCtx(() => [!header.isPlaceholder ? renderSlot(_ctx.$slots, `foot-${header.column.id}`, {
+											column: header.column,
+											getValues: getValues(header.column.id)
+										}, () => [header.column.columnDef.footer !== "" ? (openBlock(), createBlock(unref(FlexRender), {
+											key: 0,
+											render: header.column.columnDef.footer,
+											props: header.getContext()
+										}, null, 8, ["render", "props"])) : createCommentVNode("", true)], void 0, 0) : createCommentVNode("", true)]),
+										_: 2
+									}, 1040, ["colspan", "class"]);
+								}), 128))]),
+								_: 2
+							}, 1024)) : createCommentVNode("", true)], 64);
+						}), 128))]),
+						_: 3
+					}, 8, ["class"])) : createCommentVNode("", true)
+				]),
+				_: 3
+			}, 16, [
+				"sticky-header",
+				"sticky-footer",
+				"row-count",
+				"style",
+				"data-striped",
+				"table-class"
+			]);
+		};
+	}
+});
+//#endregion
+export { EXPANDER_COLUMN, dataTableFeatures, DataTable_vue_vue_type_script_setup_true_lang_default as default, formatSort, parseSort };

package/dist/components/datepicker/DatepickerClear.js

@@ -0,0 +1,5 @@
+import DatepickerClear_vue_vue_type_script_setup_true_lang_default from "./DatepickerClear.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/datepicker/DatepickerClear.vue
+var DatepickerClear_default = DatepickerClear_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { DatepickerClear_default as default };