@alfakit/vue 0.0.0-stage → 0.1.0

package/dist/components/table/ColumnManager.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,337 @@
+import { useDirection as e, usePanel as t, useT as n } from "../../context.js";
+import { cn as r } from "../../lib/utils.js";
+import i from "../../lib/Icon.js";
+import a from "../ui/Button2.js";
+import { showToast as o } from "../notifications/flash-toasts.js";
+import ee from "../ui/Checkbox.js";
+import te from "../ui/Dialog.js";
+import ne from "../ui/DialogContent.js";
+import re from "../ui/DialogDescription.js";
+import ie from "../ui/DialogHeader.js";
+import ae from "../ui/DialogTitle.js";
+import oe from "../ui/DialogTrigger.js";
+import se from "../ui/Popover.js";
+import ce from "../ui/PopoverContent.js";
+import le from "../ui/PopoverTrigger.js";
+import ue from "../ui/Sheet.js";
+import de from "../ui/SheetContent.js";
+import fe from "../ui/SheetDescription.js";
+import pe from "../ui/SheetHeader.js";
+import me from "../ui/SheetTitle.js";
+import he from "../ui/SheetTrigger.js";
+import s from "./TableTriggerButton.js";
+import { FILTERS_MODAL_WIDTH_CLASSES as ge, columnDraftChanged as c, columnManagerPosition as _e, columnOrderChanged as ve, defaultVisibleColumns as ye, gridColumnsClasses as be, keepMoveButtonFocus as xe, moveColumnInManager as Se, moveColumnTo as Ce, orderColumnsBy as we, saveColumnOrder as Te, slideOverSide as Ee, toggleVisibleColumn as De, triggerButtonView as l, visitTable as u } from "@alfakit/core";
+import { Fragment as Oe, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createTextVNode as g, createVNode as _, defineComponent as v, normalizeClass as y, openBlock as b, ref as x, renderList as ke, toDisplayString as S, unref as C, useId as Ae, watch as je, withCtx as w, withModifiers as Me } from "vue";
+import { ChevronDownIcon as Ne, ChevronUpIcon as Pe, Columns3Icon as T, GripVerticalIcon as Fe } from "@lucide/vue";
+import { createReusableTemplate as E } from "@vueuse/core";
+//#region src/components/table/ColumnManager.vue?vue&type=script&setup=true&lang.ts
+var Ie = { class: "flex flex-col gap-1" }, Le = {
+	key: 0,
+	class: "flex justify-end"
+}, Re = ["aria-label"], ze = [
+	"data-column",
+	"draggable",
+	"onDragstart",
+	"onDragover",
+	"onDragleave",
+	"onDrop"
+], Be = {
+	key: 1,
+	class: "flex min-w-0 flex-1 items-center gap-2"
+}, Ve = { class: "truncate" }, He = {
+	key: 2,
+	class: "min-w-0 flex-1 truncate"
+}, Ue = {
+	key: 3,
+	class: "flex shrink-0 items-center"
+}, We = ["id"], Ge = {
+	key: 1,
+	role: "status",
+	"aria-live": "polite",
+	"aria-atomic": "true",
+	class: "sr-only",
+	"data-slot": "column-manager-announcement"
+}, Ke = {
+	key: 2,
+	class: "mt-1 flex items-center justify-end gap-2"
+}, qe = { class: "flex-1 overflow-y-auto p-4" }, Je = { class: "max-h-[60vh] overflow-y-auto" }, D = /*@__PURE__*/ v({
+	__name: "ColumnManager",
+	props: {
+		table: {},
+		token: {},
+		component: {}
+	},
+	setup(v) {
+		let D = v, O = n(), Ye = t(), Xe = e(), k = x(!1), A = d(() => D.table.triggerActions?.columnManager?.modal), j = d(() => A.value?.heading ?? O("table.columns", {}, "Columns")), Ze = d(() => A.value?.description ?? D.table.pluralModelLabel), Qe = d(() => A.value?.width ? ge[A.value.width] : void 0), M = x(!1), N = x(null), P = x(null), F = x(null), I = d(() => !!(D.table.reorderableColumns && Ye.value.endpoints.tableColumns)), L = d(() => !!D.table.toggleableColumns), R = d(() => !!D.table.deferColumnManager), z = x(null), B = x(""), V = Ae(), $e = d(() => we(I.value ? D.table.columns : D.table.columns.filter((e) => e.toggleable), z.value)), H = d(() => D.table.columns.map((e) => e.name)), U = d(() => z.value ?? H.value), W = d(() => z.value !== null && ve(H.value, z.value)), G = d(() => Object.fromEntries($e.value.map((e) => [e.name, _e(U.value, e.name, D.table.columnGroups)])));
+		je(() => D.table.columns, () => {
+			R.value || (z.value = null);
+		});
+		let K = d(() => F.value ?? D.table.visibleColumns), q = d(() => l(D.table, "columnManager", {
+			label: O("table.columns", {}, "Columns"),
+			showLabel: !1
+		})), J = d(() => l(D.table, "columnManagerReset", {
+			label: L.value ? O("table.reset_columns", {}, "Reset") : O("table.reset_column_order", {}, "Reset column order"),
+			variant: "ghost"
+		})), Y = d(() => R.value ? l(D.table, "columnManagerApply", {
+			label: O("table_filters.apply", {}, "Apply"),
+			variant: "default"
+		}) : null), X = d(() => D.table.columnManagerResetActionPosition === "header"), et = d(() => F.value !== null && c(D.table.visibleColumns, F.value)), tt = (e) => {
+			let t = De(K.value, e);
+			R.value ? F.value = t : u(D.table.identifier, { columns: t }, ["page"]);
+		}, nt = (e, t) => {
+			e.dataTransfer && (e.dataTransfer.effectAllowed = "move"), N.value = t;
+		}, rt = (e, t) => {
+			N.value !== null && (e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "move"), P.value = t);
+		}, it = (e) => {
+			N.value !== null && N.value !== e && st(N.value, Ce(U.value, N.value, e)), N.value = null, P.value = null;
+		}, Z = async (e) => {
+			let t = Ye.value.endpoints.tableColumns;
+			if (!t) return !1;
+			M.value = !0;
+			try {
+				return await Te(t, D.token, D.component, e), !0;
+			} catch (e) {
+				return o({
+					id: "alfakit-column-order-failed",
+					title: O("table.column_order_failed", {}, "Couldn't save the column order"),
+					body: e instanceof Error ? e.message : String(e),
+					status: "danger",
+					format: "alfakit"
+				}), !1;
+			} finally {
+				M.value = !1;
+			}
+		}, at = (e) => {
+			let { position: t, count: n, group: r } = G.value[e] ?? {
+				position: 0,
+				count: 0
+			};
+			return r ? O("table.column_manager.position_in_group", {
+				position: t,
+				count: n,
+				group: r
+			}, `Position ${t} of ${n} in ${r}.`) : O("table.column_manager.position", {
+				position: t,
+				count: n
+			}, `Position ${t} of ${n}.`);
+		}, ot = (e, t) => {
+			let { position: n, count: r, group: i } = _e(t, e, D.table.columnGroups), a = D.table.columns.find((t) => t.name === e)?.label ?? e, o = {
+				column: a,
+				position: n,
+				count: r,
+				group: i ?? ""
+			};
+			B.value = i ? R.value ? O("table.column_manager.reordered_in_group_deferred", o, `${a} moved to position ${n} of ${r} in ${i}. Apply columns to save your changes.`) : O("table.column_manager.reordered_in_group", o, `${a} moved to position ${n} of ${r} in ${i}.`) : R.value ? O("table.column_manager.reordered_deferred", o, `${a} moved to position ${n} of ${r}. Apply columns to save your changes.`) : O("table.column_manager.reordered", o, `${a} moved to position ${n} of ${r}.`);
+		}, st = (e, t) => {
+			if (!M.value && ve(U.value, t)) {
+				if (z.value = t, B.value = "", R.value) {
+					ot(e, t);
+					return;
+				}
+				Z(t).then((n) => {
+					n ? ot(e, t) : z.value = null;
+				});
+			}
+		}, ct = (e, t, n) => {
+			xe(n.currentTarget), st(e, Se(U.value, e, t, D.table.columnGroups));
+		}, lt = () => {
+			z.value && W.value && Z(z.value), F.value && c(D.table.visibleColumns, F.value) && u(D.table.identifier, { columns: F.value }, ["page"]), F.value = null, z.value = null, B.value = "", k.value = !1;
+		}, ut = () => {
+			I.value && (z.value = null, Z([])), L.value && (F.value = null, u(D.table.identifier, { columns: ye(D.table) }, ["page"]));
+		}, Q = (e) => {
+			e || (F.value = null, R.value && (z.value = null), B.value = ""), k.value = e;
+		}, [dt, $] = E(), [ft, pt] = E();
+		return (e, t) => (L.value || I.value) && q.value ? (b(), m(Oe, { key: 0 }, [
+			_(C(ft), null, {
+				default: w(() => [J.value ? (b(), f(s, {
+					key: 0,
+					view: J.value,
+					disabled: M.value,
+					"data-slot": "column-manager-reset",
+					class: y(C(r)(!Y.value && "w-full")),
+					onClick: ut
+				}, null, 8, [
+					"view",
+					"disabled",
+					"class"
+				])) : p("", !0)]),
+				_: 1
+			}),
+			_(C(dt), null, {
+				default: w(() => [h("div", Ie, [
+					X.value && J.value ? (b(), m("div", Le, [_(C(pt))])) : p("", !0),
+					h("ul", {
+						class: y(C(r)(D.table.columnManagerColumns ? ["grid gap-0.5", C(be)(D.table.columnManagerColumns)] : "flex flex-col gap-0.5")),
+						"aria-label": C(O)("table.columns", {}, "Columns")
+					}, [(b(!0), m(Oe, null, ke($e.value, (e) => (b(), m("li", {
+						key: e.name,
+						"data-column": e.name,
+						draggable: I.value && !M.value,
+						class: y(C(r)("flex items-center gap-2 rounded-md px-2 py-1 text-sm", I.value && "cursor-grab", N.value === e.name && "opacity-50", P.value === e.name && N.value !== e.name && "bg-muted")),
+						onDragstart: (t) => nt(t, e.name),
+						onDragover: (t) => rt(t, e.name),
+						onDragleave: (t) => P.value === e.name && (P.value = null),
+						onDragend: t[0] ||= (e) => (N.value = null, P.value = null),
+						onDrop: Me((t) => it(e.name), ["prevent"])
+					}, [
+						I.value ? (b(), f(C(Fe), {
+							key: 0,
+							class: "text-muted-foreground size-4 shrink-0",
+							"aria-hidden": "true"
+						})) : p("", !0),
+						e.toggleable ? (b(), m("label", Be, [_(ee, {
+							"model-value": K.value.includes(e.name),
+							"onUpdate:modelValue": (t) => tt(e.name)
+						}, null, 8, ["model-value", "onUpdate:modelValue"]), h("span", Ve, S(e.label), 1)])) : (b(), m("span", He, S(e.label), 1)),
+						I.value ? (b(), m("span", Ue, [
+							h("span", {
+								id: `${C(V)}-${e.name}-position`,
+								class: "sr-only",
+								"data-slot": "column-manager-position"
+							}, S(at(e.name)), 9, We),
+							_(a, {
+								type: "button",
+								variant: "ghost",
+								size: "icon-xs",
+								disabled: (G.value[e.name]?.position ?? 0) <= 1,
+								"aria-disabled": M.value || void 0,
+								"aria-describedby": `${C(V)}-${e.name}-position`,
+								"aria-label": C(O)("table.move_column_up", { column: e.label }, `Move ${e.label} up`),
+								onClick: (t) => ct(e.name, -1, t)
+							}, {
+								default: w(() => [_(C(Pe))]),
+								_: 1
+							}, 8, [
+								"disabled",
+								"aria-disabled",
+								"aria-describedby",
+								"aria-label",
+								"onClick"
+							]),
+							_(a, {
+								type: "button",
+								variant: "ghost",
+								size: "icon-xs",
+								disabled: (G.value[e.name]?.position ?? 0) >= (G.value[e.name]?.count ?? 0),
+								"aria-disabled": M.value || void 0,
+								"aria-describedby": `${C(V)}-${e.name}-position`,
+								"aria-label": C(O)("table.move_column_down", { column: e.label }, `Move ${e.label} down`),
+								onClick: (t) => ct(e.name, 1, t)
+							}, {
+								default: w(() => [_(C(Ne))]),
+								_: 1
+							}, 8, [
+								"disabled",
+								"aria-disabled",
+								"aria-describedby",
+								"aria-label",
+								"onClick"
+							])
+						])) : p("", !0)
+					], 42, ze))), 128))], 10, Re),
+					I.value ? (b(), m("div", Ge, S(B.value), 1)) : p("", !0),
+					!X.value && J.value || Y.value ? (b(), m("div", Ke, [X.value ? p("", !0) : (b(), f(C(pt), { key: 0 })), Y.value ? (b(), f(s, {
+						key: 1,
+						view: Y.value,
+						"data-slot": "column-manager-apply",
+						disabled: !et.value && !W.value,
+						onClick: lt
+					}, null, 8, ["view", "disabled"])) : p("", !0)])) : p("", !0)
+				])]),
+				_: 1
+			}),
+			D.table.columnManagerLayout === "modal" && A.value?.slideOver ? (b(), f(ue, {
+				key: 0,
+				open: k.value,
+				"onUpdate:open": Q
+			}, {
+				default: w(() => [_(he, { "as-child": "" }, {
+					default: w(() => [_(s, { view: q.value }, {
+						icon: w(() => [_(C(i), {
+							name: "alfakit::tables.actions.column-manager",
+							fallback: C(T)
+						}, null, 8, ["fallback"])]),
+						_: 1
+					}, 8, ["view"])]),
+					_: 1
+				}), _(de, {
+					side: C(Ee)(A.value.slideOverPosition, C(Xe)),
+					class: y(C(r)("flex w-full flex-col gap-0 p-0", Qe.value ?? "sm:max-w-md")),
+					"data-slot": "column-manager",
+					"data-slide-over": ""
+				}, {
+					default: w(() => [_(pe, { class: "border-b" }, {
+						default: w(() => [_(me, null, {
+							default: w(() => [g(S(j.value), 1)]),
+							_: 1
+						}), _(fe, { class: y(A.value.description ? void 0 : "sr-only") }, {
+							default: w(() => [g(S(Ze.value), 1)]),
+							_: 1
+						}, 8, ["class"])]),
+						_: 1
+					}), h("div", qe, [_(C($))])]),
+					_: 1
+				}, 8, ["side", "class"])]),
+				_: 1
+			}, 8, ["open"])) : D.table.columnManagerLayout === "modal" ? (b(), f(te, {
+				key: 1,
+				open: k.value,
+				"onUpdate:open": Q
+			}, {
+				default: w(() => [_(oe, { "as-child": "" }, {
+					default: w(() => [_(s, { view: q.value }, {
+						icon: w(() => [_(C(i), {
+							name: "alfakit::tables.actions.column-manager",
+							fallback: C(T)
+						}, null, 8, ["fallback"])]),
+						_: 1
+					}, 8, ["view"])]),
+					_: 1
+				}), _(ne, {
+					class: y(Qe.value ?? "sm:max-w-lg"),
+					"data-slot": "column-manager"
+				}, {
+					default: w(() => [_(ie, null, {
+						default: w(() => [_(ae, null, {
+							default: w(() => [g(S(j.value), 1)]),
+							_: 1
+						}), _(re, { class: y(A.value?.description ? void 0 : "sr-only") }, {
+							default: w(() => [g(S(Ze.value), 1)]),
+							_: 1
+						}, 8, ["class"])]),
+						_: 1
+					}), h("div", Je, [_(C($))])]),
+					_: 1
+				}, 8, ["class"])]),
+				_: 1
+			}, 8, ["open"])) : (b(), f(se, {
+				key: 2,
+				open: k.value,
+				"onUpdate:open": Q
+			}, {
+				default: w(() => [_(le, { "as-child": "" }, {
+					default: w(() => [_(s, { view: q.value }, {
+						icon: w(() => [_(C(i), {
+							name: "alfakit::tables.actions.column-manager",
+							fallback: C(T)
+						}, null, 8, ["fallback"])]),
+						_: 1
+					}, 8, ["view"])]),
+					_: 1
+				}), _(ce, {
+					align: "end",
+					class: y(C(r)("p-2", D.table.columnManagerColumns ? "w-auto min-w-64" : "w-64")),
+					"data-slot": "column-manager"
+				}, {
+					default: w(() => [_(C($))]),
+					_: 1
+				}, 8, ["class"])]),
+				_: 1
+			}, 8, ["open"]))
+		], 64)) : p("", !0);
+	}
+});
+//#endregion
+export { D as default };
+
+//# sourceMappingURL=ColumnManager.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/table/ColumnManager.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnManager.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_createVNode","_unref","_withCtx","_createBlock","TableTriggerButton","_normalizeClass","_createCommentVNode","_createElementVNode","_renderList","_withModifiers","Checkbox","_toDisplayString","Button","Sheet","SheetTrigger","Icon","SheetContent","SheetHeader","SheetTitle","_createTextVNode","SheetDescription","Dialog","DialogTrigger","DialogContent","DialogHeader","DialogTitle","DialogDescription","Popover","PopoverTrigger","PopoverContent","Icon_default","Button_default","Checkbox_default","Dialog_default","DialogContent_default","DialogDescription_default","DialogHeader_default","DialogTitle_default","DialogTrigger_default","Popover_default","PopoverContent_default","PopoverTrigger_default","Sheet_default","SheetContent_default","SheetDescription_default","SheetHeader_default","SheetTitle_default","SheetTrigger_default","TableTriggerButton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","ColumnManager_vue_vue_type_script_setup_true_lang_default","props","__props","t","useT","panel","usePanel","direction","useDirection","open","ref","modal","computed","modalHeading","modalDescription","modalWidthClass","FILTERS_MODAL_WIDTH_CLASSES","saving","dragging","dropTarget","draft","reorderable","toggleable","deferred","orderDraft","announcement","idBase","useId","columns","orderColumnsBy","column","appliedNames","names","orderChanged","columnOrderChanged","positions","columnManagerPosition","visible","trigger","triggerButtonView","resetView","applyView","inHeader","draftChanged","columnDraftChanged","toggle","next","toggleVisibleColumn","name","visitTable","dragStart","event","dragOver","drop","reorder","moveColumnTo","save","endpoint","saveColumnOrder","order","error","showToast","positionText","group","position","count","announce","label","replace","saved","move","keepMoveButtonFocus","moveColumnInManager","offset","apply","reset","defaultVisibleColumns","setOpen","DefineBody","ManagerBody","createReusableTemplate","DefineReset","ResetButton","openBlock","createElementBlock","Fragment","createVNode","unref","withCtx","createBlock","normalizeClass","cn","createCommentVNode","createElementVNode","gridColumnsClasses","renderList","$event","_cache","withModifiers","GripVerticalIcon","toDisplayString","ChevronUpIcon","ChevronDownIcon","Columns3Icon","slideOverSide","createTextVNode"],"sources":["../../../src/components/table/ColumnManager.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TableSchema } from '@alfakit/core'\nimport {\n  columnDraftChanged,\n  columnManagerPosition,\n  columnOrderChanged,\n  defaultVisibleColumns,\n  FILTERS_MODAL_WIDTH_CLASSES,\n  gridColumnsClasses,\n  keepMoveButtonFocus,\n  moveColumnInManager,\n  moveColumnTo,\n  orderColumnsBy,\n  saveColumnOrder,\n  slideOverSide,\n  toggleVisibleColumn,\n  triggerButtonView,\n  visitTable,\n} from '@alfakit/core'\nimport { ChevronDownIcon, ChevronUpIcon, Columns3Icon, GripVerticalIcon } from '@lucide/vue'\nimport { createReusableTemplate } from '@vueuse/core'\nimport { computed, ref, useId, watch } from 'vue'\nimport { useDirection, usePanel, useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { showToast } from '../notifications/flash-toasts'\nimport Button from '../ui/Button.vue'\nimport Checkbox from '../ui/Checkbox.vue'\nimport Dialog from '../ui/Dialog.vue'\nimport DialogContent from '../ui/DialogContent.vue'\nimport DialogDescription from '../ui/DialogDescription.vue'\nimport DialogHeader from '../ui/DialogHeader.vue'\nimport DialogTitle from '../ui/DialogTitle.vue'\nimport DialogTrigger from '../ui/DialogTrigger.vue'\nimport Popover from '../ui/Popover.vue'\nimport PopoverContent from '../ui/PopoverContent.vue'\nimport PopoverTrigger from '../ui/PopoverTrigger.vue'\nimport Sheet from '../ui/Sheet.vue'\nimport SheetContent from '../ui/SheetContent.vue'\nimport SheetDescription from '../ui/SheetDescription.vue'\nimport SheetHeader from '../ui/SheetHeader.vue'\nimport SheetTitle from '../ui/SheetTitle.vue'\nimport SheetTrigger from '../ui/SheetTrigger.vue'\nimport TableTriggerButton from './TableTriggerButton.vue'\n\n/**\n * The column manager: show / hide toggleable columns (kept in the query string) and, with\n * `reorderableColumns()`, move columns (stored per user on the server) by dragging a row\n * onto another or with the move up / down buttons (the keyboard path).\n *\n * `deferColumnManager()` keeps toggles in a draft until \"Apply\"; `columnManagerLayout()`\n * opens it in a dialog; `columnManagerColumns()` lays the list out in a grid.\n */\nconst props = defineProps<{ table: TableSchema; token: string; component: string }>()\nconst t = useT()\nconst panel = usePanel()\nconst direction = useDirection()\nconst open = ref(false)\n// `columnManagerTriggerAction()` may set `slideOver()`, `modalWidth()` and the heading.\nconst modal = computed(() => props.table.triggerActions?.columnManager?.modal)\nconst modalHeading = computed(() => modal.value?.heading ?? t('table.columns', {}, 'Columns'))\nconst modalDescription = computed(() => modal.value?.description ?? props.table.pluralModelLabel)\nconst modalWidthClass = computed(() =>\n  modal.value?.width ? FILTERS_MODAL_WIDTH_CLASSES[modal.value.width] : undefined,\n)\nconst saving = ref(false)\nconst dragging = ref<string | null>(null)\nconst dropTarget = ref<string | null>(null)\n// Toggles of a deferred column manager wait here until \"Apply\".\nconst draft = ref<string[] | null>(null)\nconst reorderable = computed(() =>\n  Boolean(props.table.reorderableColumns && panel.value.endpoints.tableColumns),\n)\nconst toggleable = computed(() => Boolean(props.table.toggleableColumns))\nconst deferred = computed(() => Boolean(props.table.deferColumnManager))\n// A moved column order: the draft of a deferred column manager, or shown at once while\n// it is saved.\nconst orderDraft = ref<string[] | null>(null)\n// Screen-reader announcement of the last move.\nconst announcement = ref('')\nconst idBase = useId()\nconst columns = computed(() =>\n  orderColumnsBy(\n    reorderable.value\n      ? props.table.columns\n      : props.table.columns.filter((column) => column.toggleable),\n    orderDraft.value,\n  ),\n)\nconst appliedNames = computed(() => props.table.columns.map((column) => column.name))\nconst names = computed(() => orderDraft.value ?? appliedNames.value)\nconst orderChanged = computed(\n  () => orderDraft.value !== null && columnOrderChanged(appliedNames.value, orderDraft.value),\n)\nconst positions = computed(() =>\n  Object.fromEntries(\n    columns.value.map((column) => [\n      column.name,\n      columnManagerPosition(names.value, column.name, props.table.columnGroups),\n    ]),\n  ),\n)\n\n// The server's order replaces the one shown while saving.\nwatch(\n  () => props.table.columns,\n  () => {\n    if (!deferred.value) orderDraft.value = null\n  },\n)\nconst visible = computed(() => draft.value ?? props.table.visibleColumns)\n\nconst trigger = computed(() =>\n  triggerButtonView(props.table, 'columnManager', {\n    label: t('table.columns', {}, 'Columns'),\n    showLabel: false,\n  }),\n)\nconst resetView = computed(() =>\n  triggerButtonView(props.table, 'columnManagerReset', {\n    label: toggleable.value\n      ? t('table.reset_columns', {}, 'Reset')\n      : t('table.reset_column_order', {}, 'Reset column order'),\n    variant: 'ghost',\n  }),\n)\nconst applyView = computed(() =>\n  deferred.value\n    ? triggerButtonView(props.table, 'columnManagerApply', {\n        label: t('table_filters.apply', {}, 'Apply'),\n        variant: 'default',\n      })\n    : null,\n)\nconst inHeader = computed(() => props.table.columnManagerResetActionPosition === 'header')\nconst draftChanged = computed(\n  () => draft.value !== null && columnDraftChanged(props.table.visibleColumns, draft.value),\n)\n\nconst toggle = (name: string) => {\n  const next = toggleVisibleColumn(visible.value, name)\n\n  if (deferred.value) {\n    draft.value = next\n  } else {\n    visitTable(props.table.identifier, { columns: next }, ['page'])\n  }\n}\n\nconst dragStart = (event: DragEvent, name: string) => {\n  if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move'\n  dragging.value = name\n}\n\nconst dragOver = (event: DragEvent, name: string) => {\n  if (dragging.value === null) return\n\n  event.preventDefault()\n  if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'\n  dropTarget.value = name\n}\n\nconst drop = (name: string) => {\n  if (dragging.value !== null && dragging.value !== name) {\n    reorder(dragging.value, moveColumnTo(names.value, dragging.value, name))\n  }\n\n  dragging.value = null\n  dropTarget.value = null\n}\n\nconst save = async (order: string[]): Promise<boolean> => {\n  const endpoint = panel.value.endpoints.tableColumns\n\n  if (!endpoint) return false\n\n  saving.value = true\n\n  try {\n    await saveColumnOrder(endpoint, props.token, props.component, order)\n\n    return true\n  } catch (error) {\n    showToast({\n      id: 'alfakit-column-order-failed',\n      title: t('table.column_order_failed', {}, \"Couldn't save the column order\"),\n      body: error instanceof Error ? error.message : String(error),\n      status: 'danger',\n      format: 'alfakit',\n    })\n\n    return false\n  } finally {\n    saving.value = false\n  }\n}\n\nconst positionText = (name: string) => {\n  const { position, count, group } = positions.value[name] ?? { position: 0, count: 0 }\n\n  return group\n    ? t(\n        'table.column_manager.position_in_group',\n        { position, count, group },\n        `Position ${position} of ${count} in ${group}.`,\n      )\n    : t('table.column_manager.position', { position, count }, `Position ${position} of ${count}.`)\n}\n\nconst announce = (name: string, order: string[]) => {\n  const { position, count, group } = columnManagerPosition(order, name, props.table.columnGroups)\n  const label = props.table.columns.find((column) => column.name === name)?.label ?? name\n  const replace = { column: label, position, count, group: group ?? '' }\n\n  announcement.value = group\n    ? deferred.value\n      ? t(\n          'table.column_manager.reordered_in_group_deferred',\n          replace,\n          `${label} moved to position ${position} of ${count} in ${group}. Apply columns to save your changes.`,\n        )\n      : t(\n          'table.column_manager.reordered_in_group',\n          replace,\n          `${label} moved to position ${position} of ${count} in ${group}.`,\n        )\n    : deferred.value\n      ? t(\n          'table.column_manager.reordered_deferred',\n          replace,\n          `${label} moved to position ${position} of ${count}. Apply columns to save your changes.`,\n        )\n      : t(\n          'table.column_manager.reordered',\n          replace,\n          `${label} moved to position ${position} of ${count}.`,\n        )\n}\n\n// A new order: kept as a draft until \"Apply\" (`deferColumnManager()`), else saved now.\nconst reorder = (name: string, order: string[]) => {\n  if (saving.value || !columnOrderChanged(names.value, order)) return\n\n  orderDraft.value = order\n  announcement.value = ''\n\n  if (deferred.value) {\n    announce(name, order)\n\n    return\n  }\n\n  void save(order).then((saved) => {\n    if (saved) announce(name, order)\n    else orderDraft.value = null\n  })\n}\n\nconst move = (name: string, offset: -1 | 1, event: MouseEvent) => {\n  keepMoveButtonFocus(event.currentTarget as HTMLElement | null)\n  reorder(name, moveColumnInManager(names.value, name, offset, props.table.columnGroups))\n}\n\nconst apply = () => {\n  if (orderDraft.value && orderChanged.value) void save(orderDraft.value)\n\n  if (draft.value && columnDraftChanged(props.table.visibleColumns, draft.value)) {\n    visitTable(props.table.identifier, { columns: draft.value }, ['page'])\n  }\n\n  draft.value = null\n  orderDraft.value = null\n  announcement.value = ''\n  open.value = false\n}\n\n// Reset: the defined column order and, for toggleable columns, the default visibility.\nconst reset = () => {\n  if (reorderable.value) {\n    orderDraft.value = null\n    void save([])\n  }\n\n  if (toggleable.value) {\n    draft.value = null\n    visitTable(props.table.identifier, { columns: defaultVisibleColumns(props.table) }, ['page'])\n  }\n}\n\nconst setOpen = (next: boolean) => {\n  // Closing without \"Apply\" drops the draft.\n  if (!next) {\n    draft.value = null\n    if (deferred.value) orderDraft.value = null\n    announcement.value = ''\n  }\n  open.value = next\n}\n\nconst [DefineBody, ManagerBody] = createReusableTemplate()\nconst [DefineReset, ResetButton] = createReusableTemplate()\n</script>\n\n<template>\n  <template v-if=\"(toggleable || reorderable) && trigger\">\n    <DefineReset>\n      <TableTriggerButton\n        v-if=\"resetView\"\n        :view=\"resetView\"\n        :disabled=\"saving\"\n        data-slot=\"column-manager-reset\"\n        :class=\"cn(!applyView && 'w-full')\"\n        @click=\"reset\"\n      />\n    </DefineReset>\n    <DefineBody>\n      <div class=\"flex flex-col gap-1\">\n        <div v-if=\"inHeader && resetView\" class=\"flex justify-end\"><ResetButton /></div>\n        <ul\n          :class=\"\n            cn(\n              props.table.columnManagerColumns\n                ? ['grid gap-0.5', gridColumnsClasses(props.table.columnManagerColumns)]\n                : 'flex flex-col gap-0.5',\n            )\n          \"\n          :aria-label=\"t('table.columns', {}, 'Columns')\"\n        >\n          <li\n            v-for=\"column in columns\"\n            :key=\"column.name\"\n            :data-column=\"column.name\"\n            :draggable=\"reorderable && !saving\"\n            :class=\"\n              cn(\n                'flex items-center gap-2 rounded-md px-2 py-1 text-sm',\n                reorderable && 'cursor-grab',\n                dragging === column.name && 'opacity-50',\n                dropTarget === column.name && dragging !== column.name && 'bg-muted',\n              )\n            \"\n            @dragstart=\"dragStart($event, column.name)\"\n            @dragover=\"dragOver($event, column.name)\"\n            @dragleave=\"dropTarget === column.name && (dropTarget = null)\"\n            @dragend=\"((dragging = null), (dropTarget = null))\"\n            @drop.prevent=\"drop(column.name)\"\n          >\n            <GripVerticalIcon\n              v-if=\"reorderable\"\n              class=\"text-muted-foreground size-4 shrink-0\"\n              aria-hidden=\"true\"\n            />\n            <label v-if=\"column.toggleable\" class=\"flex min-w-0 flex-1 items-center gap-2\">\n              <Checkbox\n                :model-value=\"visible.includes(column.name)\"\n                @update:model-value=\"toggle(column.name)\"\n              />\n              <span class=\"truncate\">{{ column.label }}</span>\n            </label>\n            <span v-else class=\"min-w-0 flex-1 truncate\">{{ column.label }}</span>\n            <span v-if=\"reorderable\" class=\"flex shrink-0 items-center\">\n              <span\n                :id=\"`${idBase}-${column.name}-position`\"\n                class=\"sr-only\"\n                data-slot=\"column-manager-position\"\n                >{{ positionText(column.name) }}</span\n              >\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"icon-xs\"\n                :disabled=\"(positions[column.name]?.position ?? 0) <= 1\"\n                :aria-disabled=\"saving || undefined\"\n                :aria-describedby=\"`${idBase}-${column.name}-position`\"\n                :aria-label=\"\n                  t('table.move_column_up', { column: column.label }, `Move ${column.label} up`)\n                \"\n                @click=\"move(column.name, -1, $event)\"\n                ><ChevronUpIcon\n              /></Button>\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"icon-xs\"\n                :disabled=\"\n                  (positions[column.name]?.position ?? 0) >= (positions[column.name]?.count ?? 0)\n                \"\n                :aria-disabled=\"saving || undefined\"\n                :aria-describedby=\"`${idBase}-${column.name}-position`\"\n                :aria-label=\"\n                  t('table.move_column_down', { column: column.label }, `Move ${column.label} down`)\n                \"\n                @click=\"move(column.name, 1, $event)\"\n                ><ChevronDownIcon\n              /></Button>\n            </span>\n          </li>\n        </ul>\n        <div\n          v-if=\"reorderable\"\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n          class=\"sr-only\"\n          data-slot=\"column-manager-announcement\"\n        >\n          {{ announcement }}\n        </div>\n        <div\n          v-if=\"(!inHeader && resetView) || applyView\"\n          class=\"mt-1 flex items-center justify-end gap-2\"\n        >\n          <ResetButton v-if=\"!inHeader\" />\n          <TableTriggerButton\n            v-if=\"applyView\"\n            :view=\"applyView\"\n            data-slot=\"column-manager-apply\"\n            :disabled=\"!draftChanged && !orderChanged\"\n            @click=\"apply\"\n          />\n        </div>\n      </div>\n    </DefineBody>\n    <Sheet\n      v-if=\"props.table.columnManagerLayout === 'modal' && modal?.slideOver\"\n      :open=\"open\"\n      @update:open=\"setOpen\"\n    >\n      <SheetTrigger as-child>\n        <TableTriggerButton :view=\"trigger\">\n          <template #icon\n            ><Icon name=\"alfakit::tables.actions.column-manager\" :fallback=\"Columns3Icon\"\n          /></template>\n        </TableTriggerButton>\n      </SheetTrigger>\n      <SheetContent\n        :side=\"slideOverSide(modal.slideOverPosition, direction)\"\n        :class=\"cn('flex w-full flex-col gap-0 p-0', modalWidthClass ?? 'sm:max-w-md')\"\n        data-slot=\"column-manager\"\n        data-slide-over=\"\"\n      >\n        <SheetHeader class=\"border-b\">\n          <SheetTitle>{{ modalHeading }}</SheetTitle>\n          <SheetDescription :class=\"modal.description ? undefined : 'sr-only'\">{{\n            modalDescription\n          }}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex-1 overflow-y-auto p-4\"><ManagerBody /></div>\n      </SheetContent>\n    </Sheet>\n    <Dialog\n      v-else-if=\"props.table.columnManagerLayout === 'modal'\"\n      :open=\"open\"\n      @update:open=\"setOpen\"\n    >\n      <DialogTrigger as-child>\n        <TableTriggerButton :view=\"trigger\">\n          <template #icon\n            ><Icon name=\"alfakit::tables.actions.column-manager\" :fallback=\"Columns3Icon\"\n          /></template>\n        </TableTriggerButton>\n      </DialogTrigger>\n      <DialogContent :class=\"modalWidthClass ?? 'sm:max-w-lg'\" data-slot=\"column-manager\">\n        <DialogHeader>\n          <DialogTitle>{{ modalHeading }}</DialogTitle>\n          <DialogDescription :class=\"modal?.description ? undefined : 'sr-only'\">{{\n            modalDescription\n          }}</DialogDescription>\n        </DialogHeader>\n        <div class=\"max-h-[60vh] overflow-y-auto\"><ManagerBody /></div>\n      </DialogContent>\n    </Dialog>\n    <Popover v-else :open=\"open\" @update:open=\"setOpen\">\n      <PopoverTrigger as-child>\n        <TableTriggerButton :view=\"trigger\">\n          <template #icon\n            ><Icon name=\"alfakit::tables.actions.column-manager\" :fallback=\"Columns3Icon\"\n          /></template>\n        </TableTriggerButton>\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"end\"\n        :class=\"cn('p-2', props.table.columnManagerColumns ? 'w-auto min-w-64' : 'w-64')\"\n        data-slot=\"column-manager\"\n      >\n        <ManagerBody />\n      </PopoverContent>\n    </Popover>\n  </template>\n</template>\n"],"mappings":"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"}

package/dist/components/table/ContentLayout.js

@@ -0,0 +1,7 @@
+import e from "./ContentLayout.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/table/ContentLayout.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=ContentLayout.js.map

package/dist/components/table/ContentLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentLayout.js","names":["_sfc_main","ContentLayout_vue_vue_type_script_setup_true_lang_default","ContentLayout_default"],"sources":["../../../src/components/table/ContentLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type {\n  ActionContext,\n  ColumnLayoutNode,\n  ColumnSchema,\n  SelectionState,\n  TableRecordSchema,\n  TableSchema,\n  TableSelection,\n} from '@alfakit/core'\nimport {\n  VIRTUAL_ESTIMATES,\n  gridColumnsClasses,\n  primaryColumnName,\n  recordActionsAtStart,\n  virtualizeOptions,\n} from '@alfakit/core'\nimport { ChevronDownIcon } from '@lucide/vue'\nimport { computed, reactive, useId } from 'vue'\nimport { useVirtualList } from '../../composables/use-virtual-list'\nimport { useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport ActionList from '../actions/ActionList.vue'\nimport Button from '../ui/Button.vue'\nimport Checkbox from '../ui/Checkbox.vue'\nimport ContentLayoutNode from './ContentLayoutNode.vue'\n\n/**\n * Records arranged by a content layout (`Split`, `Stack`, `Panel`, `Grid`) instead of a\n * row of cells, optionally as cards in a `contentGrid()`. Long pages render only the\n * records in view (plus a few around them), by whole rows of the card grid; the list keeps\n * `aria-setsize` / `aria-posinset` so assistive technology knows the real positions.\n */\nconst props = defineProps<{\n  table: TableSchema\n  records: TableRecordSchema[]\n  columns: ColumnSchema[]\n  token: string\n  component: string\n  context: ActionContext\n  selectable: boolean\n  selection: TableSelection\n  selectionState: SelectionState\n}>()\nconst emit = defineEmits<{ recordClick: [record: TableRecordSchema] }>()\nconst t = useT()\nconst panelId = useId()\nconst virtual = useVirtualList(\n  () => props.records.length,\n  () =>\n    virtualizeOptions(\n      props.table.virtualize,\n      VIRTUAL_ESTIMATES.item,\n      props.table.contentGrid ? 16 : 0,\n      props.table.contentGrid ? 'auto' : 1,\n    ),\n)\n\n// The records inside the window, with their index in the full list.\nconst windowed = computed(() =>\n  virtual.indexes.value.flatMap((index) => {\n    const record = props.records[index]\n\n    return record ? [{ record, index }] : []\n  }),\n)\n\nconst layout = computed(() => props.table.contentLayout ?? [])\nconst hasCollapsible = (nodes: ColumnLayoutNode[]): boolean =>\n  nodes.some(\n    (node) =>\n      node.type !== 'Column' &&\n      ((node.type === 'Panel' && Boolean(node.collapsible)) || hasCollapsible(node.schema)),\n  )\nconst collapsible = computed(() => hasCollapsible(layout.value))\nconst startsOpen = computed(() =>\n  layout.value.some((node) => node.type === 'Panel' && node.collapsible && !node.collapsed),\n)\n// Collapsible panels at the top level go under the record's main row.\nconst main = computed(() =>\n  layout.value.filter((node) => !(node.type === 'Panel' && node.collapsible)),\n)\nconst details = computed(() =>\n  layout.value.filter((node) => node.type === 'Panel' && node.collapsible),\n)\nconst opened = reactive<Record<string, boolean>>({})\nconst isOpen = (record: TableRecordSchema) => opened[String(record.key)] ?? startsOpen.value\nconst primary = computed(() => primaryColumnName(props.columns))\nconst clickable = (record: TableRecordSchema) => Boolean(record.url || props.table.recordAction)\nconst isSelected = (record: TableRecordSchema) =>\n  props.selectionState.allSelected || props.selectionState.selected.has(String(record.key))\nconst atStart = computed(() => recordActionsAtStart(props.table.recordActionsPosition))\nconst nodeKey = (node: ColumnLayoutNode, index: number) =>\n  node.type === 'Column' ? `column:${node.name}` : `${node.type}:${index}`\n</script>\n\n<template>\n  <div\n    :ref=\"virtual.attach\"\n    data-slot=\"table-content\"\n    :style=\"virtual.style.value\"\n    :role=\"virtual.range.value.active ? 'list' : undefined\"\n    :class=\"\n      cn(\n        props.table.contentGrid\n          ? cn('grid gap-4 p-4', gridColumnsClasses(props.table.contentGrid))\n          : 'divide-y',\n      )\n    \"\n  >\n    <div\n      v-for=\"{ record, index } in windowed\"\n      :key=\"String(record.key)\"\n      :ref=\"virtual.item\"\n      :data-index=\"index\"\n      :role=\"virtual.range.value.active ? 'listitem' : undefined\"\n      :aria-setsize=\"virtual.range.value.active ? props.records.length : undefined\"\n      :aria-posinset=\"virtual.range.value.active ? index + 1 : undefined\"\n      data-slot=\"table-record\"\n      :data-state=\"isSelected(record) ? 'selected' : undefined\"\n      :class=\"\n        cn(\n          'flex flex-col gap-3 p-4',\n          props.table.contentGrid && 'bg-card rounded-lg border shadow-xs',\n          clickable(record) && 'hover:bg-muted/40 cursor-pointer',\n          isSelected(record) && 'bg-muted/60',\n          record.classes,\n        )\n      \"\n      @click=\"clickable(record) && emit('recordClick', record)\"\n    >\n      <div class=\"flex items-start gap-3\">\n        <div\n          v-if=\"record.actions?.length && props.table.recordActionsPosition === 'before-cells'\"\n          class=\"shrink-0\"\n          @click.stop\n        >\n          <ActionList\n            :actions=\"record.actions\"\n            :context=\"{ ...props.context, record: record.key }\"\n            size=\"sm\"\n            align=\"end\"\n            class=\"flex-nowrap\"\n          />\n        </div>\n        <div v-if=\"props.selectable\" class=\"pt-0.5\" @click.stop>\n          <Checkbox\n            v-if=\"record.selectable !== false\"\n            :model-value=\"isSelected(record)\"\n            :aria-label=\"t('table.select_row', {}, 'Select row')\"\n            @update:model-value=\"props.selection.toggle(record.key, $event === true)\"\n          />\n        </div>\n        <div\n          v-if=\"record.actions?.length && props.table.recordActionsPosition === 'before-columns'\"\n          class=\"shrink-0\"\n          @click.stop\n        >\n          <ActionList\n            :actions=\"record.actions\"\n            :context=\"{ ...props.context, record: record.key }\"\n            size=\"sm\"\n            align=\"end\"\n            class=\"flex-nowrap\"\n          />\n        </div>\n        <div class=\"flex min-w-0 flex-1 flex-col gap-3\">\n          <ContentLayoutNode\n            v-for=\"(node, nodeIndex) in main\"\n            :key=\"nodeKey(node, nodeIndex)\"\n            :node=\"node\"\n            :record=\"record\"\n            :columns=\"props.columns\"\n            :token=\"props.token\"\n            :component=\"props.component\"\n            :context=\"props.context\"\n            :clickable=\"clickable(record)\"\n            :primary=\"primary\"\n            :has-record-action=\"Boolean(props.table.recordAction)\"\n            :open=\"isOpen(record)\"\n            @record-click=\"emit('recordClick', $event)\"\n          />\n        </div>\n        <div v-if=\"record.actions?.length && !atStart\" class=\"shrink-0\" @click.stop>\n          <ActionList\n            :actions=\"record.actions\"\n            :context=\"{ ...props.context, record: record.key }\"\n            size=\"sm\"\n            align=\"end\"\n            class=\"flex-nowrap\"\n          />\n        </div>\n        <Button\n          v-if=\"collapsible\"\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          :aria-expanded=\"isOpen(record)\"\n          :aria-controls=\"isOpen(record) ? `${panelId}-${record.key}` : undefined\"\n          :aria-label=\"\n            isOpen(record)\n              ? t('table.hide_details', {}, 'Hide details')\n              : t('table.show_details', {}, 'Show details')\n          \"\n          @click.stop=\"opened[String(record.key)] = !isOpen(record)\"\n        >\n          <ChevronDownIcon :class=\"cn('transition-transform', isOpen(record) && 'rotate-180')\" />\n        </Button>\n      </div>\n      <div\n        v-if=\"isOpen(record) && details.length > 0\"\n        :id=\"`${panelId}-${record.key}`\"\n        class=\"flex flex-col gap-3\"\n      >\n        <ContentLayoutNode\n          v-for=\"(node, nodeIndex) in details\"\n          :key=\"nodeKey(node, main.length + nodeIndex)\"\n          :node=\"node\"\n          :record=\"record\"\n          :columns=\"props.columns\"\n          :token=\"props.token\"\n          :component=\"props.component\"\n          :context=\"props.context\"\n          :clickable=\"clickable(record)\"\n          :primary=\"primary\"\n          :has-record-action=\"Boolean(props.table.recordAction)\"\n          :open=\"true\"\n          @record-click=\"emit('recordClick', $event)\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/table/ContentLayout.vue.d.ts

@@ -0,0 +1,25 @@
+import type { ActionContext, ColumnSchema, SelectionState, TableRecordSchema, TableSchema, TableSelection } from '@alfakit/core';
+/**
+ * Records arranged by a content layout (`Split`, `Stack`, `Panel`, `Grid`) instead of a
+ * row of cells, optionally as cards in a `contentGrid()`. Long pages render only the
+ * records in view (plus a few around them), by whole rows of the card grid; the list keeps
+ * `aria-setsize` / `aria-posinset` so assistive technology knows the real positions.
+ */
+type __VLS_Props = {
+    table: TableSchema;
+    records: TableRecordSchema[];
+    columns: ColumnSchema[];
+    token: string;
+    component: string;
+    context: ActionContext;
+    selectable: boolean;
+    selection: TableSelection;
+    selectionState: SelectionState;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    recordClick: (record: TableRecordSchema) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRecordClick?: ((record: TableRecordSchema) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=ContentLayout.vue.d.ts.map

package/dist/components/table/ContentLayout.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentLayout.vue.d.ts","sourceRoot":"","sources":["../../../src/components/table/ContentLayout.vue"],"names":[],"mappings":"AA2OA,OAAO,KAAK,EACV,aAAa,EAEb,YAAY,EACZ,cAAc,EACd,iBAAiB,EACjB,WAAW,EACX,cAAc,EACf,MAAM,eAAe,CAAA;AAkBtB;;;;;GAKG;AACH,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,WAAW,CAAA;IAClB,OAAO,EAAE,iBAAiB,EAAE,CAAA;IAC5B,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,aAAa,CAAA;IACtB,UAAU,EAAE,OAAO,CAAA;IACnB,SAAS,EAAE,cAAc,CAAA;IACzB,cAAc,EAAE,cAAc,CAAA;CAC/B,CAAC;;;;;;AA6YF,wBAOG"}