@atscript/vue-table 0.1.58

package/dist/as-config-dialog-vRklaKbi.mjs

@@ -0,0 +1,688 @@
+import { a as useTableContext } from "./use-table-state-C4JbonEZ.mjs";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, nextTick, normalizeClass, normalizeProps, openBlock, reactive, ref, renderList, renderSlot, shallowRef, toDisplayString, unref, useModel, vModelText, watch, withCtx, withDirectives, withModifiers } from "vue";
+import { arraysEqual, sortersEqual } from "@atscript/ui-table";
+import { DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, ListboxContent, ListboxFilter, ListboxItem, ListboxItemIndicator, ListboxRoot, TabsContent, TabsList, TabsRoot, TabsTrigger } from "reka-ui";
+//#region src/composables/use-dialog-tab-keyboard.ts
+/**
+* Cmd/Ctrl+digit tab switching for dialogs. Owns the keyboard-handler logic
+* AND the `nextTick` + `requestAnimationFrame` wrap of the focus call (so
+* consumers pass a synchronous focus body).
+*/
+function useDialogTabKeyboard(opts) {
+	const { activeTab, tabOrder, isAvailable, focusActiveTab } = opts;
+	function focusActiveTabAfterMount() {
+		nextTick(() => requestAnimationFrame(() => focusActiveTab()));
+	}
+	function onDialogKeydown(event) {
+		if (!(event.metaKey || event.ctrlKey)) return;
+		const idx = Number.parseInt(event.key, 10) - 1;
+		if (Number.isNaN(idx) || idx < 0 || idx >= tabOrder.length) return;
+		const target = tabOrder[idx];
+		if (isAvailable && !isAvailable(target)) return;
+		event.preventDefault();
+		activeTab.value = target;
+		focusActiveTabAfterMount();
+	}
+	return {
+		onDialogKeydown,
+		focusActiveTabAfterMount
+	};
+}
+//#endregion
+//#region src/components/internal/as-orderable-list.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$3 = { class: "as-orderable-list-search-wrap" };
+const _hoisted_2$2 = {
+	key: 0,
+	class: "as-orderable-list-drop-indicator"
+};
+const _hoisted_3$2 = { class: "as-orderable-list-item-content" };
+const _hoisted_4$2 = ["draggable", "onDragstart"];
+const _hoisted_5$2 = { class: "as-orderable-list-item-body" };
+const _hoisted_6$2 = { class: "as-orderable-list-item-label" };
+const _hoisted_7$1 = { class: "as-orderable-list-item-actions" };
+const _hoisted_8$1 = ["onClick"];
+const _hoisted_9$1 = ["onClick"];
+const _hoisted_10$1 = ["onClick"];
+const _hoisted_11$1 = ["onClick"];
+//#endregion
+//#region src/components/internal/as-orderable-list.vue
+var as_orderable_list_default = /* @__PURE__ */ defineComponent({
+	__name: "as-orderable-list",
+	props: /* @__PURE__ */ mergeModels({
+		items: {
+			type: Array,
+			required: true
+		},
+		disabled: {
+			type: Array,
+			required: false
+		},
+		getLabel: {
+			type: Function,
+			required: true
+		},
+		getValue: {
+			type: Function,
+			required: true
+		}
+	}, {
+		"modelValue": {
+			type: Array,
+			default: () => []
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		const modelValue = useModel(__props, "modelValue");
+		const itemsMap = computed(() => {
+			const m = /* @__PURE__ */ new Map();
+			for (const item of props.items) {
+				const value = props.getValue(item);
+				m.set(value, {
+					data: item,
+					value,
+					label: props.getLabel(item)
+				});
+			}
+			return m;
+		});
+		const listBoxModel = ref([]);
+		const disabledSet = computed(() => new Set(props.disabled));
+		const dragIndex = ref(-1);
+		const dragOverIndex = ref(-1);
+		const orderedItems = ref([]);
+		const searchTerm = ref("");
+		const orderedItemsWithSearch = computed(() => {
+			if (!searchTerm.value.trim()) return orderedItems.value;
+			const term = searchTerm.value.trim().toLowerCase();
+			return orderedItems.value.filter((f) => (f.label || f.value).toLowerCase().includes(term));
+		});
+		function buildOrderedItems() {
+			const model = modelValue.value || [];
+			const modelSet = new Set(model);
+			const valuesSet = new Set(itemsMap.value.keys());
+			const unselectedSet = new Map(itemsMap.value);
+			modelSet.forEach((name) => {
+				if (valuesSet.has(name)) unselectedSet.delete(name);
+				else modelSet.delete(name);
+			});
+			const selected = Array.from(modelSet);
+			listBoxModel.value = selected;
+			const unselected = Array.from(unselectedSet.values()).toSorted((a, b) => a.label > b.label ? 1 : -1).map((v) => v.value);
+			const ordered = [];
+			for (const name of selected) ordered.push(itemsMap.value.get(name));
+			for (const name of unselected) ordered.push(itemsMap.value.get(name));
+			const next = [];
+			for (let index = 0; index < ordered.length; index++) {
+				const o = ordered[index];
+				next.push({
+					value: o.value,
+					label: o.label || o.value,
+					data: o.data,
+					index
+				});
+			}
+			orderedItems.value = next;
+		}
+		watch(() => props.items, buildOrderedItems, { immediate: true });
+		function dragStart(index, event) {
+			dragIndex.value = index;
+			if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
+		}
+		function drop() {
+			const items = orderedItems.value;
+			const itemToMove = items.splice(dragIndex.value, 1)[0];
+			const targetIndex = dragOverIndex.value > dragIndex.value ? dragOverIndex.value - 1 : dragOverIndex.value;
+			items.splice(targetIndex, 0, itemToMove);
+			updateOrderedFields();
+			dragIndex.value = -1;
+			dragOverIndex.value = -1;
+		}
+		function over(event, index) {
+			const { y, height } = event.target.getBoundingClientRect();
+			const overIndex = event.clientY - y < height / 2 ? index : findFilteredIndex(index, 1) ?? index + 1;
+			if (dragOverIndex.value !== overIndex) dragOverIndex.value = overIndex;
+		}
+		function findFilteredIndex(index, offset) {
+			const items = orderedItemsWithSearch.value;
+			for (let i = 0; i < items.length; i++) if (items[i].index === index) return items[i + offset]?.index;
+		}
+		function moveExact(index, targetIndex) {
+			const items = orderedItems.value;
+			const itemToMove = items.splice(index, 1)[0];
+			items.splice(targetIndex, 0, itemToMove);
+			updateOrderedFields();
+		}
+		function moveOneStep(index, offset) {
+			const targetIndex = findFilteredIndex(index, offset);
+			if (typeof targetIndex === "number") {
+				const items = orderedItems.value;
+				const itemToMove = items.splice(index, 1)[0];
+				items.splice(targetIndex, 0, itemToMove);
+				updateOrderedFields();
+			}
+		}
+		function updateOrderedFields() {
+			const items = orderedItems.value;
+			items.forEach((o, index) => o.index = index);
+			orderedItems.value = [...items];
+			updateModel();
+		}
+		function updateModel() {
+			const s = new Set(listBoxModel.value);
+			modelValue.value = orderedItems.value.filter((f) => s.has(f.value)).map((f) => f.value);
+		}
+		function selectAll() {
+			listBoxModel.value = orderedItemsWithSearch.value.map((f) => f.value);
+			updateModel();
+		}
+		function deselectAll() {
+			listBoxModel.value = listBoxModel.value.filter((v) => disabledSet.value.has(v));
+			updateModel();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ListboxRoot), {
+				multiple: "",
+				modelValue: listBoxModel.value,
+				"onUpdate:modelValue": [_cache[3] || (_cache[3] = ($event) => listBoxModel.value = $event), updateModel],
+				class: "as-orderable-list-box"
+			}, {
+				default: withCtx(() => [createVNode(unref(ListboxFilter), {
+					"as-child": "",
+					class: "as-orderable-list-toolbar"
+				}, {
+					default: withCtx(() => [createElementVNode("div", null, [createElementVNode("div", _hoisted_1$3, [_cache[4] || (_cache[4] = createElementVNode("span", {
+						class: "as-orderable-list-search-icon i-as-search",
+						"aria-hidden": "true"
+					}, null, -1)), withDirectives(createElementVNode("input", {
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchTerm.value = $event),
+						type: "text",
+						class: "as-orderable-list-search",
+						placeholder: "Search..."
+					}, null, 512), [[vModelText, searchTerm.value]])]), createElementVNode("div", { class: "as-orderable-list-toolbar-actions" }, [createElementVNode("button", {
+						type: "button",
+						class: "as-orderable-list-toolbar-btn",
+						onClick: selectAll
+					}, " Select all "), createElementVNode("button", {
+						type: "button",
+						class: "as-orderable-list-toolbar-btn",
+						onClick: deselectAll
+					}, " None ")])])]),
+					_: 1
+				}), createVNode(unref(ListboxContent), { class: "as-orderable-list-items" }, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(orderedItemsWithSearch.value, (item) => {
+						return openBlock(), createBlock(unref(ListboxItem), {
+							key: item.value,
+							value: item.value,
+							class: normalizeClass(["as-orderable-list-item group", {
+								"as-orderable-list-item-dragging": dragIndex.value === item.index,
+								"as-orderable-list-item-disabled": dragIndex.value >= 0 && disabledSet.value.has(item.value)
+							}]),
+							disabled: disabledSet.value.has(item.value),
+							onDragenter: withModifiers(($event) => over($event, item.index), ["prevent"]),
+							onDragover: withModifiers(($event) => over($event, item.index), ["prevent"]),
+							onDrop: _cache[2] || (_cache[2] = ($event) => drop())
+						}, {
+							default: withCtx(() => [
+								createCommentVNode(" drop indicator "),
+								dragOverIndex.value === item.index ? (openBlock(), createElementBlock("div", _hoisted_2$2)) : createCommentVNode("v-if", true),
+								createElementVNode("div", _hoisted_3$2, [
+									createElementVNode("span", {
+										class: normalizeClass(["as-orderable-list-grip i-as-grip", { "as-orderable-list-grip-disabled": disabledSet.value.has(item.value) }]),
+										draggable: disabledSet.value.has(item.value) ? false : true,
+										"aria-hidden": "true",
+										onDragstart: ($event) => dragStart(item.index, $event),
+										onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop", "prevent"]))
+									}, null, 42, _hoisted_4$2),
+									createElementVNode("div", { class: normalizeClass(["as-orderable-list-checkbox", { "as-orderable-list-checkbox-disabled": disabledSet.value.has(item.value) }]) }, [createVNode(unref(ListboxItemIndicator), {
+										class: "as-orderable-list-check-icon",
+										"aria-hidden": "true"
+									})], 2),
+									createElementVNode("div", _hoisted_5$2, [
+										renderSlot(_ctx.$slots, "label", {
+											item: item.data,
+											label: item.label,
+											value: item.value
+										}, () => [createElementVNode("span", _hoisted_6$2, toDisplayString(item.label), 1)]),
+										renderSlot(_ctx.$slots, "item-extra", {
+											item: item.data,
+											value: item.value,
+											selected: listBoxModel.value.includes(item.value)
+										}),
+										createElementVNode("div", _hoisted_7$1, [
+											createElementVNode("button", {
+												type: "button",
+												title: "Move to top",
+												onClick: withModifiers(($event) => moveExact(item.index, 0), ["stop"])
+											}, [..._cache[5] || (_cache[5] = [createElementVNode("span", {
+												class: "i-as-chevron-double-up",
+												"aria-hidden": "true"
+											}, null, -1)])], 8, _hoisted_8$1),
+											createElementVNode("button", {
+												type: "button",
+												title: "Move up",
+												onClick: withModifiers(($event) => moveOneStep(item.index, -1), ["stop"])
+											}, [..._cache[6] || (_cache[6] = [createElementVNode("span", {
+												class: "i-as-chevron-up",
+												"aria-hidden": "true"
+											}, null, -1)])], 8, _hoisted_9$1),
+											createElementVNode("button", {
+												type: "button",
+												title: "Move down",
+												onClick: withModifiers(($event) => moveOneStep(item.index, 1), ["stop"])
+											}, [..._cache[7] || (_cache[7] = [createElementVNode("span", {
+												class: "i-as-chevron-down",
+												"aria-hidden": "true"
+											}, null, -1)])], 8, _hoisted_10$1),
+											createElementVNode("button", {
+												type: "button",
+												title: "Move to bottom",
+												onClick: withModifiers(($event) => moveExact(item.index, orderedItems.value.length), ["stop"])
+											}, [..._cache[8] || (_cache[8] = [createElementVNode("span", {
+												class: "i-as-chevron-double-down",
+												"aria-hidden": "true"
+											}, null, -1)])], 8, _hoisted_11$1)
+										])
+									])
+								])
+							]),
+							_: 2
+						}, 1032, [
+							"value",
+							"disabled",
+							"class",
+							"onDragenter",
+							"onDragover"
+						]);
+					}), 128))]),
+					_: 3
+				})]),
+				_: 3
+			}, 8, ["modelValue"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/internal/as-fields-selector.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$2 = { class: "as-orderable-list-item-label" };
+//#endregion
+//#region src/components/internal/as-fields-selector.vue
+var as_fields_selector_default = /* @__PURE__ */ defineComponent({
+	__name: "as-fields-selector",
+	props: /* @__PURE__ */ mergeModels({
+		columns: {
+			type: Array,
+			required: true
+		},
+		disabled: {
+			type: Array,
+			required: false
+		}
+	}, {
+		"modelValue": {
+			type: Array,
+			default: () => []
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const modelValue = useModel(__props, "modelValue");
+		const getLabel = (col) => col.label;
+		const getValue = (col) => col.path;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(as_orderable_list_default, {
+				items: __props.columns,
+				modelValue: modelValue.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+				disabled: __props.disabled,
+				"get-label": getLabel,
+				"get-value": getValue
+			}, {
+				label: withCtx((slotProps) => [renderSlot(_ctx.$slots, "label", normalizeProps(guardReactiveProps(slotProps)), () => [createElementVNode("span", _hoisted_1$2, toDisplayString(slotProps.label), 1)])]),
+				"item-extra": withCtx((slotProps) => [renderSlot(_ctx.$slots, "item-extra", normalizeProps(guardReactiveProps(slotProps)))]),
+				_: 3
+			}, 8, [
+				"items",
+				"modelValue",
+				"disabled"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/components/internal/as-sorters-config.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$1 = { class: "as-sorter-label" };
+const _hoisted_2$1 = ["title"];
+const _hoisted_3$1 = ["title"];
+const _hoisted_4$1 = ["disabled", "onClick"];
+const _hoisted_5$1 = ["disabled", "onClick"];
+const _hoisted_6$1 = {
+	key: 0,
+	class: "as-sorter-lock",
+	title: "Locked"
+};
+//#endregion
+//#region src/components/internal/as-sorters-config.vue
+var as_sorters_config_default = /* @__PURE__ */ defineComponent({
+	__name: "as-sorters-config",
+	props: /* @__PURE__ */ mergeModels({
+		columns: {
+			type: Array,
+			required: true
+		},
+		forceSorters: {
+			type: Array,
+			required: false
+		}
+	}, {
+		"modelValue": {
+			type: Array,
+			default: () => []
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		const externalModel = useModel(__props, "modelValue");
+		const forceSortersList = computed(() => props.forceSorters?.map((s) => s.field) ?? void 0);
+		const selected = ref([...forceSortersList.value ?? [], ...externalModel.value.map((s) => s.field)]);
+		const directionMap = reactive(/* @__PURE__ */ new Map());
+		for (const s of externalModel.value) directionMap.set(s.field, s.direction);
+		for (const s of props.forceSorters ?? []) directionMap.set(s.field, s.direction);
+		const forceMap = (() => {
+			const m = /* @__PURE__ */ new Map();
+			for (const s of props.forceSorters ?? []) m.set(s.field, { direction: s.direction });
+			return m;
+		})();
+		function setDirection(field, dir) {
+			if (forceMap.has(field)) return;
+			if (directionMap.get(field) === dir) return;
+			directionMap.set(field, dir);
+			updateExternalModel();
+		}
+		function updateExternalModel() {
+			externalModel.value = selected.value.map((field) => ({
+				field,
+				direction: directionMap.get(field) ?? "asc"
+			}));
+		}
+		function onListUpdate(values) {
+			selected.value = values;
+			updateExternalModel();
+		}
+		const getLabel = (col) => col.label;
+		const getValue = (col) => col.path;
+		const sorterIndex = (value) => {
+			const i = selected.value.indexOf(value);
+			return i >= 0 ? i + 1 : null;
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(as_orderable_list_default, {
+				items: __props.columns,
+				"model-value": selected.value,
+				disabled: forceSortersList.value,
+				"get-label": getLabel,
+				"get-value": getValue,
+				"onUpdate:modelValue": onListUpdate
+			}, {
+				label: withCtx(({ item, label, value }) => [createElementVNode("div", _hoisted_1$1, [
+					sorterIndex(value) !== null ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						class: "as-sorter-index",
+						title: `Sort priority ${sorterIndex(value)}`
+					}, toDisplayString(sorterIndex(value)), 9, _hoisted_2$1)) : createCommentVNode("v-if", true),
+					createElementVNode("span", {
+						class: "as-orderable-list-item-label",
+						title: label
+					}, toDisplayString(label), 9, _hoisted_3$1),
+					selected.value.includes(value) ? (openBlock(), createElementBlock("span", {
+						key: 1,
+						class: normalizeClass(["as-sorter-segment", { "as-sorter-direction-disabled": unref(forceMap).has(value) }]),
+						role: "group",
+						"aria-label": "Sort direction"
+					}, [createElementVNode("button", {
+						type: "button",
+						class: normalizeClass(["as-sorter-segment-btn", { "as-sorter-segment-btn-active": (directionMap.get(value) ?? "asc") === "asc" }]),
+						disabled: unref(forceMap).has(value),
+						title: "Ascending",
+						onClick: withModifiers(($event) => setDirection(value, "asc"), ["stop"])
+					}, " ↑ Asc ", 10, _hoisted_4$1), createElementVNode("button", {
+						type: "button",
+						class: normalizeClass(["as-sorter-segment-btn", { "as-sorter-segment-btn-active": (directionMap.get(value) ?? "asc") === "desc" }]),
+						disabled: unref(forceMap).has(value),
+						title: "Descending",
+						onClick: withModifiers(($event) => setDirection(value, "desc"), ["stop"])
+					}, " ↓ Desc ", 10, _hoisted_5$1)], 2)) : createCommentVNode("v-if", true)
+				])]),
+				"item-extra": withCtx(({ value }) => [unref(forceMap).has(value) ? (openBlock(), createElementBlock("span", _hoisted_6$1, "🔒")) : createCommentVNode("v-if", true)]),
+				_: 1
+			}, 8, [
+				"items",
+				"model-value",
+				"disabled"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/components/defaults/as-config-dialog.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = { class: "as-config-dialog-header" };
+const _hoisted_2 = { class: "as-config-field-label-wrap" };
+const _hoisted_3 = { class: "as-config-field-label-text" };
+const _hoisted_4 = {
+	key: 0,
+	class: "as-config-field-count"
+};
+const _hoisted_5 = { class: "as-config-tab-summary" };
+const _hoisted_6 = { class: "as-config-tab-summary-count" };
+const _hoisted_7 = { class: "as-config-tab-summary-count-num" };
+const _hoisted_8 = { class: "as-config-tab-summary-count-num" };
+const _hoisted_9 = { class: "as-config-tab-summary-count-num" };
+const _hoisted_10 = { class: "as-config-tab-summary-hint" };
+const _hoisted_11 = { class: "as-config-dialog-footer" };
+//#endregion
+//#region src/components/defaults/as-config-dialog.vue
+var as_config_dialog_default = /* @__PURE__ */ defineComponent({
+	__name: "as-config-dialog",
+	setup(__props) {
+		const { state } = useTableContext();
+		const columnsModel = shallowRef([]);
+		const filtersModel = shallowRef([]);
+		const sortersModel = shallowRef([]);
+		const isOpen = computed({
+			get: () => state.configDialogOpen.value,
+			set: (val) => {
+				state.configDialogOpen.value = val;
+			}
+		});
+		const activeTab = computed({
+			get: () => state.configTab.value,
+			set: (val) => {
+				state.configTab.value = val;
+			}
+		});
+		watch(isOpen, (open) => {
+			if (open) {
+				columnsModel.value = [...state.columnNames.value];
+				filtersModel.value = [...state.filterFields.value];
+				sortersModel.value = state.sorters.value.map((s) => ({ ...s }));
+			}
+		});
+		const filterableColumns = computed(() => state.allColumns.value.filter((c) => c.filterable));
+		const sortableColumns = computed(() => state.allColumns.value.filter((c) => c.sortable));
+		function filterCount(path) {
+			return state.filters.value[path]?.length ?? 0;
+		}
+		function onApply() {
+			if (!arraysEqual(state.columnNames.value, columnsModel.value)) state.columnNames.value = columnsModel.value;
+			if (!arraysEqual(state.filterFields.value, filtersModel.value)) state.filterFields.value = filtersModel.value;
+			if (!sortersEqual(state.sorters.value, sortersModel.value)) state.sorters.value = sortersModel.value;
+			state.configDialogOpen.value = false;
+		}
+		function onCancel() {
+			state.configDialogOpen.value = false;
+		}
+		function focusActiveTabSearch() {
+			document.querySelector(".as-config-dialog-content [role='tabpanel'][data-state='active'] .as-orderable-list-search")?.focus();
+		}
+		const { onDialogKeydown, focusActiveTabAfterMount } = useDialogTabKeyboard({
+			activeTab,
+			tabOrder: [
+				"columns",
+				"filters",
+				"sorters"
+			],
+			focusActiveTab: focusActiveTabSearch
+		});
+		function onOpenAutoFocus(event) {
+			event.preventDefault();
+			focusActiveTabAfterMount();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(DialogRoot), {
+				open: isOpen.value,
+				"onUpdate:open": _cache[5] || (_cache[5] = ($event) => isOpen.value = $event)
+			}, {
+				default: withCtx(() => [createVNode(unref(DialogPortal), null, {
+					default: withCtx(() => [createVNode(unref(DialogOverlay), { class: "as-config-dialog-overlay" }), createVNode(unref(DialogContent), {
+						class: "as-config-dialog-content",
+						onOpenAutoFocus,
+						onKeydown: unref(onDialogKeydown)
+					}, {
+						default: withCtx(() => [
+							createElementVNode("div", _hoisted_1, [createVNode(unref(DialogTitle), { class: "as-config-dialog-title" }, {
+								default: withCtx(() => [..._cache[6] || (_cache[6] = [createTextVNode("Table Settings", -1)])]),
+								_: 1
+							}), createVNode(unref(DialogClose), {
+								class: "as-config-dialog-close",
+								"aria-label": "Close"
+							}, {
+								default: withCtx(() => [..._cache[7] || (_cache[7] = [createElementVNode("span", {
+									class: "i-as-close",
+									"aria-hidden": "true"
+								}, null, -1)])]),
+								_: 1
+							})]),
+							createVNode(unref(TabsRoot), {
+								modelValue: activeTab.value,
+								"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => activeTab.value = $event),
+								class: "as-config-dialog-tabs"
+							}, {
+								default: withCtx(() => [
+									createVNode(unref(TabsList), { class: "as-config-tabs-list" }, {
+										default: withCtx(() => [
+											createVNode(unref(TabsTrigger), {
+												value: "columns",
+												class: "as-config-tab-trigger"
+											}, {
+												default: withCtx(() => [
+													_cache[8] || (_cache[8] = createElementVNode("span", {
+														class: "as-config-tab-icon i-as-columns",
+														"aria-hidden": "true"
+													}, null, -1)),
+													_cache[9] || (_cache[9] = createTextVNode(" Columns ", -1)),
+													createElementVNode("span", { class: normalizeClass(["as-config-tab-count", { "as-config-tab-count-active": activeTab.value === "columns" }]) }, toDisplayString(columnsModel.value.length), 3)
+												]),
+												_: 1
+											}),
+											createVNode(unref(TabsTrigger), {
+												value: "filters",
+												class: "as-config-tab-trigger"
+											}, {
+												default: withCtx(() => [
+													_cache[10] || (_cache[10] = createElementVNode("span", {
+														class: "as-config-tab-icon i-as-filter",
+														"aria-hidden": "true"
+													}, null, -1)),
+													_cache[11] || (_cache[11] = createTextVNode(" Filters ", -1)),
+													createElementVNode("span", { class: normalizeClass(["as-config-tab-count", { "as-config-tab-count-active": activeTab.value === "filters" }]) }, toDisplayString(filtersModel.value.length), 3)
+												]),
+												_: 1
+											}),
+											createVNode(unref(TabsTrigger), {
+												value: "sorters",
+												class: "as-config-tab-trigger"
+											}, {
+												default: withCtx(() => [
+													_cache[12] || (_cache[12] = createElementVNode("span", {
+														class: "as-config-tab-icon i-as-sorters",
+														"aria-hidden": "true"
+													}, null, -1)),
+													_cache[13] || (_cache[13] = createTextVNode(" Sorters ", -1)),
+													createElementVNode("span", { class: normalizeClass(["as-config-tab-count", { "as-config-tab-count-active": activeTab.value === "sorters" }]) }, toDisplayString(sortersModel.value.length), 3)
+												]),
+												_: 1
+											})
+										]),
+										_: 1
+									}),
+									createVNode(unref(TabsContent), {
+										value: "columns",
+										class: "as-config-tab-content"
+									}, {
+										default: withCtx(() => [createVNode(as_fields_selector_default, {
+											columns: unref(state).allColumns.value,
+											modelValue: columnsModel.value,
+											"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => columnsModel.value = $event)
+										}, null, 8, ["columns", "modelValue"])]),
+										_: 1
+									}),
+									createVNode(unref(TabsContent), {
+										value: "filters",
+										class: "as-config-tab-content"
+									}, {
+										default: withCtx(() => [createVNode(as_fields_selector_default, {
+											columns: filterableColumns.value,
+											modelValue: filtersModel.value,
+											"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => filtersModel.value = $event)
+										}, {
+											label: withCtx(({ label, value }) => [createElementVNode("span", _hoisted_2, [createElementVNode("span", _hoisted_3, toDisplayString(label), 1), filterCount(value) > 0 ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(filterCount(value)), 1)) : createCommentVNode("v-if", true)])]),
+											_: 1
+										}, 8, ["columns", "modelValue"])]),
+										_: 1
+									}),
+									createVNode(unref(TabsContent), {
+										value: "sorters",
+										class: "as-config-tab-content"
+									}, {
+										default: withCtx(() => [createVNode(as_sorters_config_default, {
+											columns: sortableColumns.value,
+											modelValue: sortersModel.value,
+											"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => sortersModel.value = $event)
+										}, null, 8, ["columns", "modelValue"])]),
+										_: 1
+									})
+								]),
+								_: 1
+							}, 8, ["modelValue"]),
+							createElementVNode("div", _hoisted_5, [createElementVNode("span", _hoisted_6, [activeTab.value === "columns" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", _hoisted_7, toDisplayString(columnsModel.value.length), 1), createTextVNode(" of " + toDisplayString(unref(state).allColumns.value.length) + " columns visible ", 1)], 64)) : activeTab.value === "filters" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("span", _hoisted_8, toDisplayString(filtersModel.value.length), 1), createTextVNode(" of " + toDisplayString(filterableColumns.value.length) + " filterable columns shown as filter pills ", 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createElementVNode("span", _hoisted_9, toDisplayString(sortersModel.value.length), 1), createTextVNode(" of " + toDisplayString(sortableColumns.value.length) + " sortable columns in effect ", 1)], 64))]), createElementVNode("span", _hoisted_10, [activeTab.value === "columns" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(" Checked columns are rendered in the table. Drag rows to reorder. ")], 64)) : activeTab.value === "filters" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(" Checked columns appear in the filter bar for quick filtering. ")], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(" Rows are ordered by these fields, top-to-bottom. ")], 64))])]),
+							createElementVNode("div", _hoisted_11, [activeTab.value === "sorters" && sortersModel.value.length > 0 ? (openBlock(), createElementBlock("button", {
+								key: 0,
+								type: "button",
+								class: "as-filter-btn-ghost",
+								onClick: _cache[4] || (_cache[4] = ($event) => sortersModel.value = [])
+							}, " Clear all ")) : createCommentVNode("v-if", true), createElementVNode("div", { class: "as-filter-dialog-footer-right" }, [createElementVNode("button", {
+								type: "button",
+								class: "as-filter-btn",
+								onClick: onCancel
+							}, "Cancel"), createElementVNode("button", {
+								type: "button",
+								class: "as-filter-btn-apply",
+								onClick: onApply
+							}, "Apply")])])
+						]),
+						_: 1
+					}, 8, ["onKeydown"])]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["open"]);
+		};
+	}
+});
+//#endregion
+export { useDialogTabKeyboard as n, as_config_dialog_default as t };

package/dist/as-config-dialog.cjs

@@ -0,0 +1,3 @@
+require("./use-table-state-MU-vuzui.cjs");
+const require_as_config_dialog = require("./as-config-dialog-d2k7_l0U.cjs");
+module.exports = require_as_config_dialog.as_config_dialog_default;