@astryx-vue/core 0.1.0 → 0.1.3

package/dist/Table-7qRmlIQd.js

@@ -0,0 +1,967 @@
+import { t as _sfc_main$10 } from "./Button-DrqeomlE.js";
+import { a as useAstryxMessages } from "./context-D6ECRdc5.js";
+import { t as _sfc_main$11 } from "./IconButton-BNQuz9W_.js";
+import { t as _sfc_main$12 } from "./Icon-5MdZQ18k.js";
+import { t as _sfc_main$13 } from "./CheckboxInput-CMsEE1_4.js";
+import { t as _sfc_main$14 } from "./Popover-Crhk9PNP.js";
+import { t as _sfc_main$15 } from "./Pagination-DXfgMUKJ.js";
+import { t as _sfc_main$16 } from "./Selector-DlZpQh42.js";
+import { t as _sfc_main$17 } from "./TextInput-BasnjVvy.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, h, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, toValue, unref, watch, withCtx } from "vue";
+import "../styles/table.css";
+function proportional(value = 1, options) {
+	return {
+		type: "proportional",
+		value,
+		minWidth: options?.minWidth ?? 120
+	};
+}
+function pixel(value) {
+	return {
+		type: "pixel",
+		value
+	};
+}
+function flexibleMin(width) {
+	return width?.minWidth ?? (width == null ? 60 : 120);
+}
+function planColumnSpace(columns) {
+	let totalProportion = 0;
+	let pixelTotal = 0;
+	const flexible = [];
+	for (const column of columns) {
+		const width = column.width;
+		if (width?.type === "pixel") pixelTotal += width.value;
+		else {
+			const proportion = width?.value ?? 1;
+			totalProportion += proportion;
+			flexible.push({
+				proportion,
+				minWidth: flexibleMin(width)
+			});
+		}
+	}
+	let maxProportionalSpace = 0;
+	if (totalProportion > 0) for (const column of flexible) {
+		const required = column.minWidth * totalProportion / column.proportion;
+		if (required > maxProportionalSpace) maxProportionalSpace = required;
+	}
+	return {
+		totalProportion,
+		pixelTotal,
+		maxProportionalSpace
+	};
+}
+function resolveColumnWidths(columns) {
+	const { totalProportion, pixelTotal, maxProportionalSpace } = planColumnSpace(columns);
+	const result = /* @__PURE__ */ new Map();
+	for (const column of columns) {
+		const width = column.width;
+		const style = {};
+		if (width?.type === "pixel") {
+			style.width = `${width.value}px`;
+			style.minWidth = `${width.value}px`;
+		} else {
+			const proportion = width?.value ?? 1;
+			if (totalProportion > 0) style.width = `${proportion / totalProportion * 100}%`;
+			style.minWidth = `${flexibleMin(width)}px`;
+		}
+		result.set(column.key, { style });
+	}
+	return {
+		columns: result,
+		tableMinWidth: pixelTotal + maxProportionalSpace
+	};
+}
+function capitalize(value) {
+	if (value.length === 0) return value;
+	return value.charAt(0).toUpperCase() + value.slice(1);
+}
+function cellText(value) {
+	if (value == null) return "";
+	if (value instanceof Date) return value.toISOString();
+	if (typeof value === "string" || typeof value === "number" || typeof value === "boolean" || typeof value === "bigint") return String(value);
+	return "";
+}
+function paginateData(data, page, pageSize) {
+	const size = Number.isFinite(pageSize) ? Math.max(1, Math.floor(pageSize)) : 10;
+	const start = ((Number.isFinite(page) ? Math.max(1, Math.floor(page)) : 1) - 1) * size;
+	return data.slice(start, start + size);
+}
+function contentLength(value) {
+	if (typeof value === "string") return value.length;
+	if (typeof value === "number" || typeof value === "boolean") return String(value).length;
+	return 0;
+}
+function longestWord(value) {
+	if (typeof value !== "string" && typeof value !== "number" && typeof value !== "boolean") return 0;
+	return String(value).split(/\s+/).reduce((max, word) => Math.max(max, word.length), 0);
+}
+function generateColumns(data) {
+	const first = data[0];
+	if (first == null) return [];
+	const keys = Object.keys(first);
+	const sample = data.slice(0, Math.min(5, data.length));
+	return keys.map((key) => {
+		const header = capitalize(key);
+		let maxContent = header.length;
+		let maxWord = header.length;
+		for (const row of sample) {
+			maxContent = Math.max(maxContent, contentLength(row[key]));
+			maxWord = Math.max(maxWord, longestWord(row[key]));
+		}
+		return {
+			key,
+			header,
+			width: proportional(maxContent <= 6 ? 1 : maxContent <= 15 ? 2 : 3, { minWidth: Math.max(Math.max(header.length, maxWord) * 8, 60) })
+		};
+	});
+}
+function sortRows(rows, sort, columns = []) {
+	if (sort.length === 0) return [...rows];
+	const comparators = /* @__PURE__ */ new Map();
+	for (const column of columns) {
+		const sortable = column.sortable;
+		const key = sortable == null || sortable === false || sortable === true ? column.key : sortable.sortKey ?? column.key;
+		if (typeof sortable === "object" && sortable.compare) comparators.set(key, sortable.compare);
+	}
+	const copy = [...rows];
+	copy.sort((a, b) => {
+		for (const entry of sort) {
+			const custom = comparators.get(entry.sortKey);
+			const result = custom ? custom(a, b) : compareValues(a[entry.sortKey], b[entry.sortKey]);
+			if (result !== 0) return entry.direction === "ascending" ? result : -result;
+		}
+		return 0;
+	});
+	return copy;
+}
+function compareValues(a, b) {
+	if (a == null && b == null) return 0;
+	if (a == null) return 1;
+	if (b == null) return -1;
+	if (typeof a === "number" && typeof b === "number") return a - b;
+	return String(a).localeCompare(String(b));
+}
+//#endregion
+//#region src/Table/plugins/columnResize.ts
+function useTableColumnResize(config) {
+	return {
+		widthFor(column) {
+			return toValue(config).columnWidths[column.key];
+		},
+		onColumnResizeEnd(key, width) {
+			toValue(config).onColumnResizeEnd({ [key]: Math.max(60, Math.round(width)) });
+		}
+	};
+}
+//#endregion
+//#region src/Table/plugins/columnSettings.ts
+function useTableColumnSettingsState(config) {
+	function setActiveColumnKeys(keys) {
+		const locked = config.columns.filter((column) => column.isAlwaysVisible).map((column) => column.key);
+		const next = [...keys];
+		for (const key of locked) if (!next.includes(key)) next.unshift(key);
+		config.onChangeActiveColumnKeys(next);
+	}
+	return {
+		get activeColumnKeys() {
+			return toValue(config.activeColumnKeys);
+		},
+		setActiveColumnKeys,
+		columnSettingsConfig: {
+			columns: config.columns,
+			get activeColumnKeys() {
+				return toValue(config.activeColumnKeys);
+			},
+			onChangeActiveColumnKeys: setActiveColumnKeys
+		}
+	};
+}
+function useTableColumnSettings(config) {
+	return { transformColumns(columns) {
+		const current = toValue(config);
+		const order = new Map(current.activeColumnKeys.map((key, index) => [key, index]));
+		return columns.filter((column) => order.has(column.key)).sort((a, b) => (order.get(a.key) ?? 0) - (order.get(b.key) ?? 0));
+	} };
+}
+//#endregion
+//#region src/Table/plugins/filtering.ts
+function useTableFilterState(initial = {}) {
+	const filters = ref({ ...initial });
+	function onFilterChange(key, value) {
+		const next = { ...filters.value };
+		if (value == null || value === "" || Array.isArray(value) && value.length === 0) delete next[key];
+		else next[key] = value;
+		filters.value = next;
+	}
+	function clearAll() {
+		filters.value = {};
+	}
+	return {
+		filters,
+		onFilterChange,
+		clearAll
+	};
+}
+function applyTableFilters(rows, filters, fields = []) {
+	const kinds = new Map(fields.map((field) => [field.key, field.type]));
+	const active = Object.entries(filters).filter(([, value]) => value != null && value !== "" && !(Array.isArray(value) && value.length === 0));
+	if (active.length === 0) return [...rows];
+	return rows.filter((row) => active.every(([key, value]) => {
+		const cell = String(row[key] ?? "").toLowerCase();
+		if ((kinds.get(key) ?? (Array.isArray(value) ? "enum" : "string")) === "enum") return (Array.isArray(value) ? value : [value]).some((item) => cell === item.toLowerCase());
+		return cell.includes(String(value).toLowerCase());
+	}));
+}
+function useTableFiltering(config) {
+	return { filterFor(column) {
+		if (column.filter == null) return null;
+		const current = toValue(config);
+		const fieldKey = column.filter;
+		const field = current.fields.find((item) => item.key === fieldKey);
+		if (field == null) return null;
+		return {
+			variant: current.variant ?? "popover",
+			field,
+			value: current.filters[fieldKey] ?? null,
+			onChange(value) {
+				toValue(config).onFilterChange(fieldKey, value);
+			}
+		};
+	} };
+}
+//#endregion
+//#region src/Table/plugins/pagination.ts
+function useTablePagination(config) {
+	function controls() {
+		const current = toValue(config);
+		if ((current.position ?? "below") === "none") return null;
+		const pageSize = current.pageSize ?? 10;
+		return h("div", {
+			"class": "astryx-table__pagination",
+			"data-align": current.align ?? "center"
+		}, [h(_sfc_main$15, {
+			"page": current.page,
+			pageSize,
+			"total": current.totalItems ?? 0,
+			"showSizeChanger": current.pageSizeOptions != null && current.onPageSizeChange != null,
+			"pageSizeOptions": current.pageSizeOptions,
+			"aria-label": current.label,
+			"onUpdate:page": (page) => toValue(config).onPageChange(page),
+			"onUpdate:pageSize": (size) => toValue(config).onPageSizeChange?.(size)
+		})]);
+	}
+	return { below() {
+		const position = toValue(config).position ?? "below";
+		if (position === "above" || position === "none") return null;
+		return controls();
+	} };
+}
+//#endregion
+//#region src/Table/plugins/selection.ts
+function rowId(row, idKey) {
+	return String(row[idKey] ?? "");
+}
+function useTableSelectionState(config) {
+	const selectable = computed(() => toValue(config.data));
+	return { selectionConfig: {
+		getIsItemSelected: (item) => toValue(config.selectedKeys).has(rowId(item, config.idKey)),
+		onSelectItem: ({ item, isSelected }) => {
+			const next = new Set(toValue(config.selectedKeys));
+			const id = rowId(item, config.idKey);
+			if (isSelected) next.add(id);
+			else next.delete(id);
+			config.setSelectedKeys(next);
+		},
+		onSelectAll: ({ isAllSelected }) => {
+			config.setSelectedKeys(isAllSelected ? new Set(toValue(config.data).map((item) => rowId(item, config.idKey))) : /* @__PURE__ */ new Set());
+		},
+		getIsAllSelected: () => {
+			const rows = toValue(config.data);
+			const selected = toValue(config.selectedKeys);
+			return rows.length > 0 && rows.every((item) => selected.has(rowId(item, config.idKey)));
+		},
+		getIsIndeterminate: () => {
+			const rows = toValue(config.data);
+			const selected = toValue(config.selectedKeys);
+			const count = rows.filter((item) => selected.has(rowId(item, config.idKey))).length;
+			return count > 0 && count < rows.length;
+		},
+		getRowLabel: config.getRowLabel,
+		hasRowHighlight: config.hasRowHighlight,
+		get rows() {
+			return selectable.value;
+		}
+	} };
+}
+function useTableSelection(config) {
+	return { selection: {
+		isAllSelected: () => toValue(config).getIsAllSelected(),
+		isIndeterminate: () => toValue(config).getIsIndeterminate?.() ?? false,
+		isSelected: (row) => toValue(config).getIsItemSelected(row),
+		isSelectable: (row) => toValue(config).getIsItemSelectable?.(row) ?? true,
+		selectAll: (selected) => toValue(config).onSelectAll({ isAllSelected: selected }),
+		selectRow: (row, selected) => toValue(config).onSelectItem({
+			item: row,
+			isSelected: selected
+		}),
+		rowLabel: (row) => toValue(config).getRowLabel?.(row) ?? "",
+		hasRowHighlight: toValue(config).hasRowHighlight
+	} };
+}
+//#endregion
+//#region src/Table/plugins/sortable.ts
+function useTableSortableState(options) {
+	const sort = ref(options.defaultSort ?? []);
+	return {
+		sortedData: computed(() => sortRows(toValue(options.data), sort.value, toValue(options.columns) ?? [])),
+		sort,
+		sortConfig: {
+			get sort() {
+				return sort.value;
+			},
+			onSortChange(next) {
+				sort.value = next;
+			}
+		}
+	};
+}
+function sortKeyOf(column) {
+	if (!column.sortable) return null;
+	if (column.sortable === true) return column.key;
+	return column.sortable.sortKey ?? column.key;
+}
+function headerLabel(column) {
+	return column.header ?? column.key;
+}
+function nextDirection(current, allowUnsorted) {
+	if (current == null) return "ascending";
+	if (current === "ascending") return "descending";
+	return allowUnsorted ? null : "ascending";
+}
+function useTableSortable(config) {
+	const messages = useAstryxMessages();
+	return { sortFor(column) {
+		const key = sortKeyOf(column);
+		if (key == null) return null;
+		const current = toValue(config);
+		const index = current.sort.findIndex((entry) => entry.sortKey === key);
+		const direction = index >= 0 ? current.sort[index].direction : null;
+		const rank = current.sort.length > 1 && index >= 0 ? index + 1 : null;
+		const label = headerLabel(column);
+		const action = direction == null ? messages.value.table.sortAscending : direction === "ascending" ? messages.value.table.sortDescending : messages.value.table.clearSort;
+		return {
+			direction,
+			rank,
+			label: `${messages.value.table.sortBy(label)}. ${action}`,
+			onClick(event) {
+				const latest = toValue(config);
+				const allowUnsorted = latest.allowUnsortedState ?? true;
+				const multi = (latest.isMultiSortEnabled ?? false) && event.shiftKey;
+				const existing = latest.sort.findIndex((entry) => entry.sortKey === key);
+				const direction = nextDirection(existing >= 0 ? latest.sort[existing].direction : null, allowUnsorted);
+				if (!multi) {
+					latest.onSortChange(direction == null ? [] : [{
+						sortKey: key,
+						direction
+					}]);
+					return;
+				}
+				const next = latest.sort.filter((entry) => entry.sortKey !== key);
+				if (direction != null) next.push({
+					sortKey: key,
+					direction
+				});
+				latest.onSortChange(next);
+			}
+		};
+	} };
+}
+//#endregion
+//#region src/Table/TableFilterControl.vue
+const _hoisted_1$6 = { class: "astryx-table__filter" };
+const _hoisted_2$2 = { class: "astryx-table__filter-popover" };
+const _hoisted_3$1 = { class: "astryx-table__filter-actions" };
+const _sfc_main$9 = /*@__PURE__*/ defineComponent({
+	__name: "TableFilterControl",
+	props: { filter: {} },
+	setup(__props) {
+		const props = __props;
+		const messages = useAstryxMessages();
+		const draft = ref(typeof props.filter.value === "string" ? props.filter.value : "");
+		watch(() => props.filter.value, (value) => {
+			draft.value = typeof value === "string" ? value : "";
+		});
+		function commit(value) {
+			props.filter.onChange(value);
+		}
+		function onInlineInput(value) {
+			draft.value = value;
+			commit(value === "" ? null : value);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$6, [__props.filter.variant === "inline" && __props.filter.field.type === "string" ? (openBlock(), createBlock(_sfc_main$17, {
+				key: 0,
+				"model-value": draft.value,
+				label: __props.filter.field.label,
+				"is-label-hidden": "",
+				size: "sm",
+				placeholder: __props.filter.field.label,
+				"onUpdate:modelValue": onInlineInput
+			}, null, 8, [
+				"model-value",
+				"label",
+				"placeholder"
+			])) : __props.filter.variant === "inline" ? (openBlock(), createBlock(_sfc_main$16, {
+				key: 1,
+				"model-value": draft.value || null,
+				label: __props.filter.field.label,
+				size: "sm",
+				placeholder: unref(messages).table.filterAll,
+				options: __props.filter.field.options ?? [],
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = (value) => commit(value == null || value === "" ? null : String(value)))
+			}, null, 8, [
+				"model-value",
+				"label",
+				"placeholder",
+				"options"
+			])) : (openBlock(), createBlock(_sfc_main$14, {
+				key: 2,
+				label: __props.filter.field.label,
+				"has-close-button": false,
+				width: 240
+			}, {
+				content: withCtx(() => [createElementVNode("div", _hoisted_2$2, [__props.filter.field.type === "string" ? (openBlock(), createBlock(_sfc_main$17, {
+					key: 0,
+					"model-value": draft.value,
+					label: __props.filter.field.label,
+					"is-label-hidden": "",
+					size: "sm",
+					placeholder: __props.filter.field.label,
+					"onUpdate:modelValue": _cache[1] || (_cache[1] = (value) => draft.value = value)
+				}, null, 8, [
+					"model-value",
+					"label",
+					"placeholder"
+				])) : (openBlock(), createBlock(_sfc_main$16, {
+					key: 1,
+					"model-value": draft.value || null,
+					label: __props.filter.field.label,
+					size: "sm",
+					placeholder: unref(messages).table.filterAll,
+					options: __props.filter.field.options ?? [],
+					"onUpdate:modelValue": _cache[2] || (_cache[2] = (value) => draft.value = value == null ? "" : String(value))
+				}, null, 8, [
+					"model-value",
+					"label",
+					"placeholder",
+					"options"
+				])), createElementVNode("div", _hoisted_3$1, [createVNode(_sfc_main$10, {
+					variant: "ghost",
+					size: "sm",
+					label: unref(messages).table.reset,
+					onClick: _cache[3] || (_cache[3] = ($event) => {
+						draft.value = "";
+						commit(null);
+					})
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(messages).table.reset), 1)]),
+					_: 1
+				}, 8, ["label"]), createVNode(_sfc_main$10, {
+					variant: "primary",
+					size: "sm",
+					label: unref(messages).table.apply,
+					onClick: _cache[4] || (_cache[4] = ($event) => commit(draft.value === "" ? null : draft.value))
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(messages).table.apply), 1)]),
+					_: 1
+				}, 8, ["label"])])])]),
+				default: withCtx(() => [createVNode(_sfc_main$11, {
+					variant: "ghost",
+					size: "sm",
+					label: __props.filter.field.label
+				}, {
+					default: withCtx(() => [createVNode(_sfc_main$12, {
+						icon: "funnel",
+						size: "sm"
+					})]),
+					_: 1
+				}, 8, ["label"])]),
+				_: 1
+			}, 8, ["label"]))]);
+		};
+	}
+});
+//#endregion
+//#region src/Table/TableData.vue
+const _hoisted_1$5 = ["aria-label"];
+const _hoisted_2$1 = [
+	"data-density",
+	"data-dividers",
+	"data-striped",
+	"data-hover",
+	"data-overflow",
+	"data-valign"
+];
+const _hoisted_3 = {
+	key: 0,
+	class: "astryx-table__select",
+	scope: "col"
+};
+const _hoisted_4 = ["data-align", "aria-sort"];
+const _hoisted_5 = { class: "astryx-table__header" };
+const _hoisted_6 = [
+	"data-align",
+	"aria-label",
+	"onClick"
+];
+const _hoisted_7 = ["data-active"];
+const _hoisted_8 = {
+	key: 0,
+	class: "astryx-table__sort-rank"
+};
+const _hoisted_9 = { key: 1 };
+const _hoisted_10 = ["onPointerdown"];
+const _hoisted_11 = { key: 0 };
+const _hoisted_12 = ["colspan"];
+const _hoisted_13 = ["aria-selected"];
+const _hoisted_14 = {
+	key: 0,
+	class: "astryx-table__select"
+};
+const _hoisted_15 = ["data-align"];
+const _sfc_main$8 = /*@__PURE__*/ defineComponent({
+	__name: "TableData",
+	props: {
+		rows: {},
+		columns: {},
+		plugins: {},
+		idKey: {},
+		label: {},
+		density: {},
+		dividers: {},
+		isStriped: { type: Boolean },
+		hasHover: { type: Boolean },
+		textOverflow: {},
+		verticalAlign: {},
+		minWidth: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const messages = useAstryxMessages();
+		const dragWidths = ref({});
+		const resolvedColumns = computed(() => props.plugins.reduce((columns, plugin) => plugin.transformColumns?.(columns) ?? columns, [...props.columns]));
+		const widths = computed(() => resolveColumnWidths(resolvedColumns.value));
+		const selection = computed(() => props.plugins.find((plugin) => plugin.selection)?.selection);
+		const resizable = computed(() => props.plugins.some((plugin) => plugin.onColumnResizeEnd));
+		function styleFor(column) {
+			const base = { ...widths.value.columns.get(column.key)?.style ?? {} };
+			const override = props.plugins.map((plugin) => plugin.widthFor?.(column)).find((value) => value != null) ?? dragWidths.value[column.key];
+			if (override != null) {
+				base.width = `${override}px`;
+				base.minWidth = `${override}px`;
+			}
+			return base;
+		}
+		function sortFor(column) {
+			for (const plugin of props.plugins) {
+				const sort = plugin.sortFor?.(column);
+				if (sort) return sort;
+			}
+			return null;
+		}
+		function filterFor(column) {
+			for (const plugin of props.plugins) {
+				const filter = plugin.filterFor?.(column);
+				if (filter) return filter;
+			}
+			return null;
+		}
+		function rowKey(row, index) {
+			const id = row[props.idKey];
+			return id == null ? index : String(id);
+		}
+		function selected(row) {
+			return selection.value?.isSelected(row) === true && selection.value.hasRowHighlight !== false;
+		}
+		const CellContent = defineComponent({
+			name: "AstryxTableCellContent",
+			props: {
+				column: {
+					type: Object,
+					required: true
+				},
+				row: {
+					type: Object,
+					required: true
+				},
+				index: {
+					type: Number,
+					required: true
+				}
+			},
+			setup(cellProps) {
+				return () => {
+					const column = cellProps.column;
+					const row = cellProps.row;
+					const rendered = column.renderCell?.(row, cellProps.index);
+					if (rendered == null) return cellText(row[column.key]);
+					return rendered;
+				};
+			}
+		});
+		const PluginFooter = defineComponent({
+			name: "AstryxTablePluginFooter",
+			props: { plugin: {
+				type: Object,
+				required: true
+			} },
+			setup(footerProps) {
+				return () => footerProps.plugin.below?.() ?? null;
+			}
+		});
+		function startResize(event, column) {
+			const handle = event.currentTarget;
+			if (!(handle instanceof HTMLElement)) return;
+			const cell = handle.closest("th");
+			if (cell == null) return;
+			const startX = event.clientX;
+			const startWidth = cell.getBoundingClientRect().width;
+			handle.setPointerCapture(event.pointerId);
+			const move = (moveEvent) => {
+				if (!(moveEvent instanceof PointerEvent)) return;
+				const next = Math.max(60, startWidth + moveEvent.clientX - startX);
+				dragWidths.value = {
+					...dragWidths.value,
+					[column.key]: next
+				};
+			};
+			const stop = (upEvent) => {
+				handle.removeEventListener("pointermove", move);
+				handle.removeEventListener("pointerup", stop);
+				const width = dragWidths.value[column.key] ?? startWidth;
+				for (const plugin of props.plugins) plugin.onColumnResizeEnd?.(column.key, width);
+				if (upEvent instanceof PointerEvent && handle.hasPointerCapture(upEvent.pointerId)) handle.releasePointerCapture(upEvent.pointerId);
+			};
+			handle.addEventListener("pointermove", move);
+			handle.addEventListener("pointerup", stop);
+		}
+		const columnCount = computed(() => resolvedColumns.value.length + (selection.value ? 1 : 0));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "astryx-table-scroll",
+				role: "group",
+				"aria-label": __props.label
+			}, [createElementVNode("table", {
+				class: "astryx-table",
+				"data-density": __props.density,
+				"data-dividers": __props.dividers,
+				"data-striped": __props.isStriped || void 0,
+				"data-hover": __props.hasHover || void 0,
+				"data-overflow": __props.textOverflow,
+				"data-valign": __props.verticalAlign,
+				style: normalizeStyle(__props.minWidth ? { minWidth: `${Math.max(__props.minWidth, widths.value.tableMinWidth)}px` } : { minWidth: `${widths.value.tableMinWidth}px` })
+			}, [createElementVNode("thead", null, [createElementVNode("tr", null, [selection.value ? (openBlock(), createElementBlock("th", _hoisted_3, [createVNode(_sfc_main$13, {
+				"model-value": selection.value.isIndeterminate() ? "indeterminate" : selection.value.isAllSelected(),
+				label: unref(messages).table.selectAllRows,
+				"is-label-hidden": "",
+				size: "sm",
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = (value) => selection.value?.selectAll(value === true))
+			}, null, 8, ["model-value", "label"])])) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(resolvedColumns.value, (column) => {
+				return openBlock(), createElementBlock("th", {
+					key: column.key,
+					scope: "col",
+					"data-align": column.align,
+					style: normalizeStyle(styleFor(column)),
+					"aria-sort": sortFor(column)?.direction ?? void 0
+				}, [createElementVNode("div", _hoisted_5, [sortFor(column) ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					type: "button",
+					class: "astryx-table__sort",
+					"data-align": column.align,
+					"aria-label": sortFor(column)?.label,
+					onClick: ($event) => sortFor(column)?.onClick($event)
+				}, [
+					createElementVNode("span", null, toDisplayString(column.header ?? column.key), 1),
+					createElementVNode("span", {
+						class: "astryx-table__sort-icon",
+						"data-active": sortFor(column)?.direction != null || void 0
+					}, [createVNode(_sfc_main$12, {
+						icon: sortFor(column)?.direction === "descending" ? "arrowDown" : "arrowUp",
+						size: "sm"
+					}, null, 8, ["icon"])], 8, _hoisted_7),
+					sortFor(column)?.rank ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(sortFor(column)?.rank), 1)) : createCommentVNode("v-if", true)
+				], 8, _hoisted_6)) : (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(column.header ?? column.key), 1)), filterFor(column) ? (openBlock(), createBlock(_sfc_main$9, {
+					key: 2,
+					filter: filterFor(column)
+				}, null, 8, ["filter"])) : createCommentVNode("v-if", true)]), resizable.value ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: "astryx-table__resize",
+					onPointerdown: ($event) => startResize($event, column)
+				}, null, 40, _hoisted_10)) : createCommentVNode("v-if", true)], 12, _hoisted_4);
+			}), 128))])]), createElementVNode("tbody", null, [__props.rows.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_11, [createElementVNode("td", {
+				class: "astryx-table__empty",
+				colspan: columnCount.value
+			}, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(unref(messages).table.noData), 1)])], 8, _hoisted_12)])) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.rows, (row, index) => {
+				return openBlock(), createElementBlock("tr", {
+					key: rowKey(row, index),
+					"aria-selected": selected(row) ? "true" : void 0
+				}, [selection.value ? (openBlock(), createElementBlock("td", _hoisted_14, [selection.value.isSelectable?.(row) !== false ? (openBlock(), createBlock(_sfc_main$13, {
+					key: 0,
+					"model-value": selection.value.isSelected(row),
+					label: selection.value.rowLabel?.(row) ? unref(messages).table.selectRowNamed(selection.value.rowLabel(row)) : unref(messages).table.selectRow,
+					"is-label-hidden": "",
+					size: "sm",
+					"onUpdate:modelValue": (value) => selection.value?.selectRow(row, value === true)
+				}, null, 8, [
+					"model-value",
+					"label",
+					"onUpdate:modelValue"
+				])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(resolvedColumns.value, (column) => {
+					return openBlock(), createElementBlock("td", {
+						key: column.key,
+						"data-align": column.align,
+						style: normalizeStyle(column.verticalAlign ? { verticalAlign: column.verticalAlign } : void 0)
+					}, [createVNode(unref(CellContent), {
+						column,
+						row,
+						index
+					}, null, 8, [
+						"column",
+						"row",
+						"index"
+					])], 12, _hoisted_15);
+				}), 128))], 8, _hoisted_13);
+			}), 128))])], 12, _hoisted_2$1), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.plugins, (plugin, index) => {
+				return openBlock(), createBlock(unref(PluginFooter), {
+					key: index,
+					plugin
+				}, null, 8, ["plugin"]);
+			}), 128))], 8, _hoisted_1$5);
+		};
+	}
+});
+//#endregion
+//#region src/Table/Table.vue
+const _hoisted_1$4 = ["aria-label"];
+const _hoisted_2 = [
+	"data-density",
+	"data-dividers",
+	"data-striped",
+	"data-hover",
+	"data-overflow",
+	"data-valign"
+];
+const _sfc_main$7 = /*@__PURE__*/ defineComponent({
+	name: "AstryxTable",
+	inheritAttrs: false,
+	__name: "Table",
+	props: {
+		data: {},
+		columns: {},
+		idKey: { default: "id" },
+		density: { default: "balanced" },
+		dividers: { default: "rows" },
+		isStriped: {
+			type: Boolean,
+			default: false
+		},
+		hasHover: {
+			type: Boolean,
+			default: false
+		},
+		verticalAlign: { default: "middle" },
+		textOverflow: { default: "wrap" },
+		plugins: {},
+		label: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const messages = useAstryxMessages();
+		const plugins = computed(() => Object.values(props.plugins ?? {}).filter((plugin) => plugin != null));
+		const dataMode = computed(() => props.data != null);
+		const columns = computed(() => props.columns ?? []);
+		return (_ctx, _cache) => {
+			return dataMode.value ? (openBlock(), createBlock(_sfc_main$8, {
+				key: 0,
+				class: normalizeClass(_ctx.$attrs.class),
+				style: normalizeStyle(_ctx.$attrs.style),
+				rows: __props.data ?? [],
+				columns: columns.value,
+				plugins: plugins.value,
+				"id-key": __props.idKey,
+				label: __props.label ?? unref(messages).table.label,
+				density: __props.density,
+				dividers: __props.dividers,
+				"is-striped": __props.isStriped,
+				"has-hover": __props.hasHover,
+				"text-overflow": __props.textOverflow,
+				"vertical-align": __props.verticalAlign
+			}, createSlots({ _: 2 }, [_ctx.$slots.empty ? {
+				name: "empty",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "empty")]),
+				key: "0"
+			} : void 0]), 1032, [
+				"class",
+				"style",
+				"rows",
+				"columns",
+				"plugins",
+				"id-key",
+				"label",
+				"density",
+				"dividers",
+				"is-striped",
+				"has-hover",
+				"text-overflow",
+				"vertical-align"
+			])) : (openBlock(), createElementBlock("div", {
+				key: 1,
+				class: "astryx-table-scroll",
+				role: "group",
+				"aria-label": __props.label ?? unref(messages).table.label
+			}, [createElementVNode("table", {
+				class: normalizeClass(["astryx-table", _ctx.$attrs.class]),
+				style: normalizeStyle(_ctx.$attrs.style),
+				"data-density": __props.density,
+				"data-dividers": __props.dividers,
+				"data-striped": __props.isStriped || void 0,
+				"data-hover": __props.hasHover || void 0,
+				"data-overflow": __props.textOverflow,
+				"data-valign": __props.verticalAlign
+			}, [renderSlot(_ctx.$slots, "default")], 14, _hoisted_2)], 8, _hoisted_1$4));
+		};
+	}
+});
+//#endregion
+//#region src/Table/TableBody.vue
+const _sfc_main$6 = /*@__PURE__*/ defineComponent({
+	name: "AstryxTableBody",
+	__name: "TableBody",
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("tbody", null, [renderSlot(_ctx.$slots, "default")]);
+		};
+	}
+});
+//#endregion
+//#region src/Table/TableCell.vue
+const _hoisted_1$3 = [
+	"data-align",
+	"colspan",
+	"rowspan",
+	"headers"
+];
+const _sfc_main$5 = /*@__PURE__*/ defineComponent({
+	name: "AstryxTableCell",
+	__name: "TableCell",
+	props: {
+		align: {},
+		colSpan: {},
+		rowSpan: {},
+		headers: {}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("td", {
+				"data-align": __props.align,
+				colspan: __props.colSpan,
+				rowspan: __props.rowSpan,
+				headers: __props.headers
+			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$3);
+		};
+	}
+});
+//#endregion
+//#region src/Table/TableFooter.vue
+const _sfc_main$4 = /*@__PURE__*/ defineComponent({
+	name: "AstryxTableFooter",
+	__name: "TableFooter",
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("tfoot", null, [renderSlot(_ctx.$slots, "default")]);
+		};
+	}
+});
+//#endregion
+//#region src/Table/TableHeader.vue
+const _sfc_main$3 = /*@__PURE__*/ defineComponent({
+	name: "AstryxTableHeader",
+	__name: "TableHeader",
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("thead", null, [renderSlot(_ctx.$slots, "default")]);
+		};
+	}
+});
+//#endregion
+//#region src/Table/TableHeaderCell.vue
+const _hoisted_1$2 = [
+	"data-align",
+	"colspan",
+	"rowspan"
+];
+const _sfc_main$2 = /*@__PURE__*/ defineComponent({
+	name: "AstryxTableHeaderCell",
+	__name: "TableHeaderCell",
+	props: {
+		align: {},
+		colSpan: {},
+		rowSpan: {},
+		headers: {}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("th", {
+				scope: "col",
+				"data-align": __props.align,
+				colspan: __props.colSpan,
+				rowspan: __props.rowSpan
+			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$2);
+		};
+	}
+});
+//#endregion
+//#region src/Table/TableRow.vue
+const _hoisted_1$1 = ["data-header-row"];
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	name: "AstryxTableRow",
+	__name: "TableRow",
+	props: { isHeaderRow: { type: Boolean } },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("tr", { "data-header-row": __props.isHeaderRow || void 0 }, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$1);
+		};
+	}
+});
+//#endregion
+//#region src/Table/TableSelectionToolbar.vue
+const _hoisted_1 = ["aria-label"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxTableSelectionToolbar",
+	__name: "TableSelectionToolbar",
+	props: { count: {} },
+	emits: ["clear"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const messages = useAstryxMessages();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "astryx-table-selection-toolbar",
+				role: "region",
+				"aria-label": unref(messages).table.bulkActionsLabel
+			}, [
+				createElementVNode("span", null, toDisplayString(unref(messages).table.selectedCount(__props.count)), 1),
+				renderSlot(_ctx.$slots, "default"),
+				createElementVNode("button", {
+					type: "button",
+					class: "astryx-table__sort",
+					onClick: _cache[0] || (_cache[0] = ($event) => emit("clear"))
+				}, toDisplayString(unref(messages).table.clearAll), 1)
+			], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { paginateData as C, sortRows as D, resolveColumnWidths as E, generateColumns as S, proportional as T, useTableColumnSettings as _, _sfc_main$4 as a, capitalize as b, _sfc_main$7 as c, useTableSelection as d, useTableSelectionState as f, useTableFiltering as g, useTableFilterState as h, _sfc_main$3 as i, useTableSortable as l, applyTableFilters as m, _sfc_main$1 as n, _sfc_main$5 as o, useTablePagination as p, _sfc_main$2 as r, _sfc_main$6 as s, _sfc_main as t, useTableSortableState as u, useTableColumnSettingsState as v, pixel as w, cellText as x, useTableColumnResize as y };