@alfakit/vue 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,280 @@
+import { usePageSchema as e, usePanel as t, useT as ee } from "../../context.js";
+import { cn as n } from "../../lib/utils.js";
+import { useStore as te } from "../../composables/use-store.js";
+import r from "../../lib/Icon.js";
+import i from "../ui/Badge2.js";
+import ne from "../ui/Button2.js";
+import { provideForm as re } from "../form/form-context.js";
+import a from "../schema/SchemaRenderer.js";
+import ie from "../ui/Dialog.js";
+import ae from "../ui/DialogContent.js";
+import oe from "../ui/DialogDescription.js";
+import se from "../ui/DialogHeader.js";
+import ce from "../ui/DialogTitle.js";
+import le from "../ui/DialogTrigger.js";
+import ue from "../ui/Popover.js";
+import de from "../ui/PopoverContent.js";
+import fe from "../ui/PopoverTrigger.js";
+import o from "./TableTriggerButton.js";
+import pe from "../ui/DialogFooter.js";
+import { FilterFormSync as me, FormStore as he, filterFormComponents as ge, filtersAreDeferred as _e, filtersCollapsible as ve, filtersFormWidthClass as ye, filtersPlacement as be, triggerButtonView as s, visitTable as c } from "@alfakit/core";
+import { Fragment as xe, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, normalizeClass as _, normalizeStyle as Se, onScopeDispose as Ce, openBlock as v, ref as we, toDisplayString as y, unref as b, watch as x, withCtx as S } from "vue";
+import { ChevronDownIcon as C, FilterIcon as w } from "@lucide/vue";
+import { createReusableTemplate as T } from "@vueuse/core";
+//#region src/components/table/TableFilters.vue?vue&type=script&setup=true&lang.ts
+var Te = { class: "flex flex-col gap-4" }, E = {
+	key: 0,
+	class: "flex justify-end"
+}, D = {
+	key: 1,
+	class: "flex items-center justify-end gap-2"
+}, O = ["aria-label"], k = ["aria-expanded"], Ee = {
+	key: 1,
+	class: "flex items-center gap-2 px-4 pt-4 text-sm font-medium"
+}, De = {
+	key: 1,
+	class: "bg-muted/30 rounded-lg border"
+}, Oe = ["aria-expanded"], ke = {
+	key: 0,
+	class: "border-t p-4"
+}, Ae = {
+	key: 2,
+	class: "bg-muted/30 rounded-lg border p-4"
+}, je = {
+	key: 0,
+	class: "flex justify-end"
+}, Me = { class: "max-h-[60vh] overflow-y-auto" }, A = /*@__PURE__*/ g({
+	__name: "TableFilters",
+	props: {
+		table: {},
+		component: {}
+	},
+	setup(g) {
+		let A = g, j = ee(), Ne = t(), M = e(), N = l(() => A.table.filters ?? []), P = l(() => A.table.filtersFormSchema ?? ge(N.value)), F = new he({
+			components: P.value,
+			state: A.table.filterState ?? {},
+			columns: A.table.filtersFormColumns ?? { default: 1 }
+		}, {
+			token: M.value?.token ?? "",
+			component: `${A.component}.filters`,
+			refreshUrl: void 0,
+			optionsUrl: Ne.value.endpoints.schemaOptions
+		});
+		re(F);
+		let I = new me(F);
+		x([P, () => A.table.filterState], ([e, t]) => {
+			I.receive({
+				components: e,
+				state: t,
+				columns: A.table.filtersFormColumns ?? { default: 1 }
+			});
+		}), x(() => M.value?.token, (e) => {
+			e && F.setToken(e);
+		});
+		let L = te(F.store), R = we(!1), z = null, B = l(() => _e(A.table)), Pe = l(() => (L.value.values, B.value && I.hasUnsentChanges)), Fe = () => {
+			I.pushed(L.value.values), c(A.table.identifier, { filters: L.value.values }, ["page"]), R.value = !1;
+		}, Ie = () => I.discard({
+			components: P.value,
+			state: A.table.filterState,
+			columns: A.table.filtersFormColumns ?? { default: 1 }
+		}), V = (e) => {
+			e || Ie(), R.value = e;
+		}, Le = () => c(A.table.identifier, { filters: null }, ["page"]);
+		x(() => [L.value.values, L.value.dirty], ([e, t]) => {
+			z && clearTimeout(z), t.size && !B.value && (z = setTimeout(() => {
+				I.pushed(e), c(A.table.identifier, { filters: e }, ["page"]);
+			}, 400));
+		}), Ce(() => {
+			z && clearTimeout(z), F.destroy();
+		});
+		let H = l(() => A.table.filterIndicators?.length ?? 0), U = l(() => be(A.table.filtersLayout)), W = l(() => ye(A.table)), Re = l(() => U.value === "before" || U.value === "after"), G = l(() => ve(A.table.filtersLayout)), ze = l(() => A.table.filtersLayout === "above-content-collapsible"), Be = l(() => U.value === "above" || U.value === "below"), K = l(() => s(A.table, "filtersReset", {
+			label: j("table.reset_filters", {}, "Reset"),
+			variant: "link"
+		})), q = l(() => s(A.table, "filtersApply", {
+			label: j("table_filters.apply", {}, "Apply"),
+			variant: "default"
+		})), J = l(() => s(A.table, "filters", {
+			label: j("table.filters", {}, "Filters"),
+			badge: H.value > 0 ? H.value : void 0
+		})), Y = l(() => H.value > 0 && !!K.value), X = l(() => A.table.filtersResetActionPosition === "header"), [Ve, Z] = T(), [He, Q] = T(), [Ue, $] = T();
+		return (e, t) => N.value.length > 0 ? (v(), f(xe, { key: 0 }, [
+			h(b(Ve), null, {
+				default: S(() => [Y.value && K.value ? (v(), u(o, {
+					key: 0,
+					view: K.value,
+					"data-slot": "filters-reset",
+					onClick: Le
+				}, null, 8, ["view"])) : d("", !0)]),
+				_: 1
+			}),
+			h(b(He), null, {
+				default: S(() => [q.value ? (v(), u(o, {
+					key: 0,
+					view: q.value,
+					"data-slot": "filters-apply",
+					disabled: !Pe.value,
+					onClick: Fe
+				}, null, 8, ["view", "disabled"])) : d("", !0)]),
+				_: 1
+			}),
+			h(b(Ue), null, {
+				default: S(() => [p("div", Te, [
+					X.value && Y.value ? (v(), f("div", E, [h(b(Z))])) : d("", !0),
+					h(a, {
+						components: b(L).components,
+						columns: b(L).columns,
+						class: "gap-4"
+					}, null, 8, ["components", "columns"]),
+					!X.value && Y.value || B.value && q.value ? (v(), f("div", D, [X.value ? d("", !0) : (v(), u(b(Z), { key: 0 })), B.value ? (v(), u(b(Q), { key: 1 })) : d("", !0)])) : d("", !0)
+				])]),
+				_: 1
+			}),
+			Re.value ? (v(), f("aside", {
+				key: 0,
+				"data-slot": "table-filters-sidebar",
+				"aria-label": b(j)("table.filters", {}, "Filters"),
+				class: _(b(n)("bg-muted/30 rounded-lg border lg:w-72 lg:shrink-0", W.value))
+			}, [G.value ? (v(), f("button", {
+				key: 0,
+				type: "button",
+				class: "flex w-full items-center gap-2 p-4 text-sm font-medium",
+				"aria-expanded": R.value,
+				onClick: t[0] ||= (e) => R.value = !R.value
+			}, [
+				h(b(w), { class: "size-4" }),
+				m(" " + y(b(j)("table.filters", {}, "Filters")) + " ", 1),
+				H.value > 0 ? (v(), u(i, {
+					key: 0,
+					class: "h-5 min-w-5 px-1"
+				}, {
+					default: S(() => [m(y(H.value), 1)]),
+					_: 1
+				})) : d("", !0),
+				h(b(C), { class: _(b(n)("ms-auto size-4 transition-transform", R.value && "rotate-180")) }, null, 8, ["class"])
+			], 8, k)) : (v(), f("div", Ee, [h(b(w), { class: "size-4" }), m(" " + y(b(j)("table.filters", {}, "Filters")), 1)])), !G.value || R.value ? (v(), f("div", {
+				key: 2,
+				class: _(b(n)("p-4", G.value && "border-t"))
+			}, [h(b($))], 2)) : d("", !0)], 10, O)) : ze.value ? (v(), f("div", De, [p("button", {
+				type: "button",
+				class: "flex w-full items-center gap-2 p-4 text-sm font-medium",
+				"aria-expanded": R.value,
+				onClick: t[1] ||= (e) => R.value = !R.value
+			}, [
+				h(b(w), { class: "size-4" }),
+				m(" " + y(b(j)("table.filters", {}, "Filters")) + " ", 1),
+				H.value > 0 ? (v(), u(i, {
+					key: 0,
+					class: "h-5 min-w-5 px-1"
+				}, {
+					default: S(() => [m(y(H.value), 1)]),
+					_: 1
+				})) : d("", !0),
+				h(b(C), { class: _(b(n)("ms-auto size-4 transition-transform", R.value && "rotate-180")) }, null, 8, ["class"])
+			], 8, Oe), R.value ? (v(), f("div", ke, [h(b($))])) : d("", !0)])) : Be.value ? (v(), f("div", Ae, [h(b($))])) : A.table.filtersLayout === "modal" ? (v(), u(ie, {
+				key: 3,
+				open: R.value,
+				"onUpdate:open": V
+			}, {
+				default: S(() => [J.value ? (v(), u(le, {
+					key: 0,
+					"as-child": ""
+				}, {
+					default: S(() => [h(o, {
+						view: J.value,
+						"responsive-label": !A.table.triggerActions?.filters,
+						active: H.value > 0
+					}, {
+						icon: S(() => [h(b(r), {
+							name: "alfakit::tables.actions.filter",
+							fallback: b(w)
+						}, null, 8, ["fallback"])]),
+						_: 1
+					}, 8, [
+						"view",
+						"responsive-label",
+						"active"
+					])]),
+					_: 1
+				})) : d("", !0), h(ae, { class: _(W.value ?? "sm:max-w-2xl") }, {
+					default: S(() => [
+						h(se, null, {
+							default: S(() => [h(ce, null, {
+								default: S(() => [m(y(b(j)("table.filters", {}, "Filters")), 1)]),
+								_: 1
+							}), h(oe, { class: "sr-only" }, {
+								default: S(() => [m(y(A.table.pluralModelLabel), 1)]),
+								_: 1
+							})]),
+							_: 1
+						}),
+						X.value && Y.value ? (v(), f("div", je, [h(b(Z))])) : d("", !0),
+						p("div", Me, [h(a, {
+							components: b(L).components,
+							columns: b(L).columns,
+							class: "gap-4"
+						}, null, 8, ["components", "columns"])]),
+						h(pe, { class: "items-center gap-2" }, {
+							default: S(() => [
+								X.value ? d("", !0) : (v(), u(b(Z), { key: 0 })),
+								t[4] ||= p("span", { class: "flex-1" }, null, -1),
+								h(ne, {
+									type: "button",
+									variant: "outline",
+									size: "sm",
+									onClick: t[2] ||= (e) => V(!1)
+								}, {
+									default: S(() => [m(y(b(j)("table_filters.cancel", {}, "Cancel")), 1)]),
+									_: 1
+								}),
+								h(b(Q))
+							]),
+							_: 1
+						})
+					]),
+					_: 1
+				}, 8, ["class"])]),
+				_: 1
+			}, 8, ["open"])) : (v(), u(ue, {
+				key: 4,
+				open: R.value,
+				"onUpdate:open": t[3] ||= (e) => R.value = e
+			}, {
+				default: S(() => [J.value ? (v(), u(fe, {
+					key: 0,
+					"as-child": ""
+				}, {
+					default: S(() => [h(o, {
+						view: J.value,
+						"responsive-label": !A.table.triggerActions?.filters,
+						active: H.value > 0
+					}, {
+						icon: S(() => [h(b(r), {
+							name: "alfakit::tables.actions.filter",
+							fallback: b(w)
+						}, null, 8, ["fallback"])]),
+						_: 1
+					}, 8, [
+						"view",
+						"responsive-label",
+						"active"
+					])]),
+					_: 1
+				})) : d("", !0), h(de, {
+					align: "end",
+					class: _(b(n)(W.value ? ["w-[calc(100vw-2rem)]", W.value] : "w-80 sm:w-96"))
+				}, {
+					default: S(() => [p("div", {
+						class: _(b(n)(A.table.filtersFormMaxHeight && "overflow-y-auto")),
+						style: Se(A.table.filtersFormMaxHeight ? { maxHeight: A.table.filtersFormMaxHeight } : void 0)
+					}, [h(b($))], 6)]),
+					_: 1
+				}, 8, ["class"])]),
+				_: 1
+			}, 8, ["open"]))
+		], 64)) : d("", !0);
+	}
+});
+//#endregion
+export { A as default };
+
+//# sourceMappingURL=TableFilters.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableFilters.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_createVNode","_unref","_withCtx","_createBlock","TableTriggerButton","_createCommentVNode","_createElementVNode","SchemaRenderer","_normalizeClass","_createTextVNode","_toDisplayString","Badge","Dialog","DialogTrigger","Icon","DialogContent","DialogHeader","DialogTitle","DialogDescription","DialogFooter","Button","Popover","PopoverTrigger","PopoverContent","_normalizeStyle","Icon_default","Badge_default","Button_default","SchemaRenderer_default","Dialog_default","DialogContent_default","DialogDescription_default","DialogHeader_default","DialogTitle_default","DialogTrigger_default","Popover_default","PopoverContent_default","PopoverTrigger_default","TableTriggerButton_default","DialogFooter_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","TableFilters_vue_vue_type_script_setup_true_lang_default","props","__props","t","useT","panel","usePanel","page","usePageSchema","filters","computed","components","filterFormComponents","store","FormStore","sync","FilterFormSync","watch","next","filterState","token","state","useStore","open","ref","timer","deferred","filtersAreDeferred","unsent","apply","visitTable","discard","setModalOpen","reset","values","dirty","onScopeDispose","activeCount","placement","filtersPlacement","widthClass","filtersFormWidthClass","sidebar","sidebarCollapsible","filtersCollapsible","collapsible","inline","resetView","triggerButtonView","applyView","trigger","showReset","resetInHeader","DefineReset","ResetButton","createReusableTemplate","DefineApply","ApplyButton","DefineForm","FiltersForm","openBlock","createElementBlock","Fragment","createVNode","unref","withCtx","createBlock","createCommentVNode","createElementVNode","normalizeClass","cn","_cache","FilterIcon","createTextVNode","toDisplayString","ChevronDownIcon","$event","normalizeStyle"],"sources":["../../../src/components/table/TableFilters.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TableSchema } from '@alfakit/core'\nimport {\n  FilterFormSync,\n  FormStore,\n  filterFormComponents,\n  filtersAreDeferred,\n  filtersCollapsible,\n  filtersFormWidthClass,\n  filtersPlacement,\n  triggerButtonView,\n  visitTable,\n} from '@alfakit/core'\nimport { ChevronDownIcon, FilterIcon } from '@lucide/vue'\nimport { createReusableTemplate } from '@vueuse/core'\nimport { computed, onScopeDispose, ref, watch } from 'vue'\nimport { useStore } from '../../composables/use-store'\nimport { usePageSchema, usePanel, useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { provideForm } from '../form/form-context'\nimport SchemaRenderer from '../schema/SchemaRenderer.vue'\nimport Badge from '../ui/Badge.vue'\nimport Button from '../ui/Button.vue'\nimport Dialog from '../ui/Dialog.vue'\nimport DialogContent from '../ui/DialogContent.vue'\nimport DialogDescription from '../ui/DialogDescription.vue'\nimport DialogFooter from '../ui/DialogFooter.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 TableTriggerButton from './TableTriggerButton.vue'\n\n/**\n * Filters are a small form whose state (keyed by filter name) is pushed into the query\n * string. The server re-renders the table with the filtered records.\n */\nconst props = defineProps<{ table: TableSchema; component: string }>()\nconst t = useT()\nconst panel = usePanel()\nconst page = usePageSchema()\nconst filters = computed(() => props.table.filters ?? [])\n// `filtersFormSchema()` lays the filters out itself.\nconst components = computed(\n  () => props.table.filtersFormSchema ?? filterFormComponents(filters.value),\n)\n\nconst store = new FormStore(\n  {\n    components: components.value,\n    state: props.table.filterState ?? {},\n    columns: props.table.filtersFormColumns ?? { default: 1 },\n  },\n  {\n    token: page.value?.token ?? '',\n    component: `${props.component}.filters`,\n    refreshUrl: undefined,\n    optionsUrl: panel.value.endpoints.schemaOptions,\n  },\n)\n\nprovideForm(store)\n\n// Server responses are merged in by FilterFormSync so typing that happens while a filter\n// request is in flight is never reset.\nconst sync = new FilterFormSync(store)\n\nwatch([components, () => props.table.filterState], ([next, filterState]) => {\n  sync.receive({\n    components: next,\n    state: filterState,\n    columns: props.table.filtersFormColumns ?? { default: 1 },\n  })\n})\n\nwatch(\n  () => page.value?.token,\n  (token) => {\n    if (token) store.setToken(token)\n  },\n)\n\nconst state = useStore(store.store)\nconst open = ref(false)\nlet timer: ReturnType<typeof setTimeout> | null = null\nconst deferred = computed(() => filtersAreDeferred(props.table))\n// Re-evaluated with the form state, which `hasUnsentChanges` reads.\nconst unsent = computed(() => {\n  void state.value.values\n\n  return deferred.value && sync.hasUnsentChanges\n})\n\nconst apply = () => {\n  sync.pushed(state.value.values)\n  visitTable(\n    props.table.identifier,\n    { filters: state.value.values as Record<string, Record<string, unknown>> },\n    ['page'],\n  )\n  open.value = false\n}\n\nconst discard = () =>\n  sync.discard({\n    components: components.value,\n    state: props.table.filterState,\n    columns: props.table.filtersFormColumns ?? { default: 1 },\n  })\n\nconst setModalOpen = (next: boolean) => {\n  // Dismissing the dialog drops edits that were not applied.\n  if (!next) discard()\n  open.value = next\n}\n\nconst reset = () => visitTable(props.table.identifier, { filters: null }, ['page'])\n\n// Push changes to the server (debounced by the browser's natural typing pauses), unless\n// the filters wait for the Apply button.\nwatch(\n  () => [state.value.values, state.value.dirty] as const,\n  ([values, dirty]) => {\n    if (timer) clearTimeout(timer)\n\n    if (!dirty.size || deferred.value) {\n      return\n    }\n\n    timer = setTimeout(() => {\n      sync.pushed(values)\n      visitTable(\n        props.table.identifier,\n        { filters: values as Record<string, Record<string, unknown>> },\n        ['page'],\n      )\n    }, 400)\n  },\n)\n\nonScopeDispose(() => {\n  if (timer) clearTimeout(timer)\n  store.destroy()\n})\n\nconst activeCount = computed(() => props.table.filterIndicators?.length ?? 0)\nconst placement = computed(() => filtersPlacement(props.table.filtersLayout))\nconst widthClass = computed(() => filtersFormWidthClass(props.table))\nconst sidebar = computed(() => placement.value === 'before' || placement.value === 'after')\nconst sidebarCollapsible = computed(() => filtersCollapsible(props.table.filtersLayout))\nconst collapsible = computed(() => props.table.filtersLayout === 'above-content-collapsible')\nconst inline = computed(() => placement.value === 'above' || placement.value === 'below')\n// `filtersResetAction()` / `filtersApplyAction()` / `filtersTriggerAction()`.\nconst resetView = computed(() =>\n  triggerButtonView(props.table, 'filtersReset', {\n    label: t('table.reset_filters', {}, 'Reset'),\n    variant: 'link',\n  }),\n)\nconst applyView = computed(() =>\n  triggerButtonView(props.table, 'filtersApply', {\n    label: t('table_filters.apply', {}, 'Apply'),\n    variant: 'default',\n  }),\n)\nconst trigger = computed(() =>\n  triggerButtonView(props.table, 'filters', {\n    label: t('table.filters', {}, 'Filters'),\n    badge: activeCount.value > 0 ? activeCount.value : undefined,\n  }),\n)\nconst showReset = computed(() => activeCount.value > 0 && Boolean(resetView.value))\nconst resetInHeader = computed(() => props.table.filtersResetActionPosition === 'header')\nconst [DefineReset, ResetButton] = createReusableTemplate()\nconst [DefineApply, ApplyButton] = createReusableTemplate()\nconst [DefineForm, FiltersForm] = createReusableTemplate()\n</script>\n\n<template>\n  <template v-if=\"filters.length > 0\">\n    <DefineReset>\n      <TableTriggerButton\n        v-if=\"showReset && resetView\"\n        :view=\"resetView\"\n        data-slot=\"filters-reset\"\n        @click=\"reset\"\n      />\n    </DefineReset>\n    <DefineApply>\n      <TableTriggerButton\n        v-if=\"applyView\"\n        :view=\"applyView\"\n        data-slot=\"filters-apply\"\n        :disabled=\"!unsent\"\n        @click=\"apply\"\n      />\n    </DefineApply>\n    <DefineForm>\n      <div class=\"flex flex-col gap-4\">\n        <div v-if=\"resetInHeader && showReset\" class=\"flex justify-end\"><ResetButton /></div>\n        <SchemaRenderer :components=\"state.components\" :columns=\"state.columns\" class=\"gap-4\" />\n        <div\n          v-if=\"(!resetInHeader && showReset) || (deferred && applyView)\"\n          class=\"flex items-center justify-end gap-2\"\n        >\n          <ResetButton v-if=\"!resetInHeader\" />\n          <ApplyButton v-if=\"deferred\" />\n        </div>\n      </div>\n    </DefineForm>\n    <aside\n      v-if=\"sidebar\"\n      data-slot=\"table-filters-sidebar\"\n      :aria-label=\"t('table.filters', {}, 'Filters')\"\n      :class=\"cn('bg-muted/30 rounded-lg border lg:w-72 lg:shrink-0', widthClass)\"\n    >\n      <button\n        v-if=\"sidebarCollapsible\"\n        type=\"button\"\n        class=\"flex w-full items-center gap-2 p-4 text-sm font-medium\"\n        :aria-expanded=\"open\"\n        @click=\"open = !open\"\n      >\n        <FilterIcon class=\"size-4\" />\n        {{ t('table.filters', {}, 'Filters') }}\n        <Badge v-if=\"activeCount > 0\" class=\"h-5 min-w-5 px-1\">{{ activeCount }}</Badge>\n        <ChevronDownIcon :class=\"cn('ms-auto size-4 transition-transform', open && 'rotate-180')\" />\n      </button>\n      <div v-else class=\"flex items-center gap-2 px-4 pt-4 text-sm font-medium\">\n        <FilterIcon class=\"size-4\" />\n        {{ t('table.filters', {}, 'Filters') }}\n      </div>\n      <div v-if=\"!sidebarCollapsible || open\" :class=\"cn('p-4', sidebarCollapsible && 'border-t')\">\n        <FiltersForm />\n      </div>\n    </aside>\n    <div v-else-if=\"collapsible\" class=\"bg-muted/30 rounded-lg border\">\n      <button\n        type=\"button\"\n        class=\"flex w-full items-center gap-2 p-4 text-sm font-medium\"\n        :aria-expanded=\"open\"\n        @click=\"open = !open\"\n      >\n        <FilterIcon class=\"size-4\" />\n        {{ t('table.filters', {}, 'Filters') }}\n        <Badge v-if=\"activeCount > 0\" class=\"h-5 min-w-5 px-1\">{{ activeCount }}</Badge>\n        <ChevronDownIcon :class=\"cn('ms-auto size-4 transition-transform', open && 'rotate-180')\" />\n      </button>\n      <div v-if=\"open\" class=\"border-t p-4\"><FiltersForm /></div>\n    </div>\n    <div v-else-if=\"inline\" class=\"bg-muted/30 rounded-lg border p-4\"><FiltersForm /></div>\n    <Dialog\n      v-else-if=\"props.table.filtersLayout === 'modal'\"\n      :open=\"open\"\n      @update:open=\"setModalOpen\"\n    >\n      <DialogTrigger v-if=\"trigger\" as-child>\n        <TableTriggerButton\n          :view=\"trigger\"\n          :responsive-label=\"!props.table.triggerActions?.filters\"\n          :active=\"activeCount > 0\"\n        >\n          <template #icon\n            ><Icon name=\"alfakit::tables.actions.filter\" :fallback=\"FilterIcon\"\n          /></template>\n        </TableTriggerButton>\n      </DialogTrigger>\n      <DialogContent :class=\"widthClass ?? 'sm:max-w-2xl'\">\n        <DialogHeader>\n          <DialogTitle>{{ t('table.filters', {}, 'Filters') }}</DialogTitle>\n          <DialogDescription class=\"sr-only\">{{ props.table.pluralModelLabel }}</DialogDescription>\n        </DialogHeader>\n        <div v-if=\"resetInHeader && showReset\" class=\"flex justify-end\"><ResetButton /></div>\n        <div class=\"max-h-[60vh] overflow-y-auto\">\n          <SchemaRenderer :components=\"state.components\" :columns=\"state.columns\" class=\"gap-4\" />\n        </div>\n        <DialogFooter class=\"items-center gap-2\">\n          <ResetButton v-if=\"!resetInHeader\" />\n          <span class=\"flex-1\" />\n          <Button type=\"button\" variant=\"outline\" size=\"sm\" @click=\"setModalOpen(false)\">{{\n            t('table_filters.cancel', {}, 'Cancel')\n          }}</Button>\n          <ApplyButton />\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n    <Popover v-else :open=\"open\" @update:open=\"open = $event\">\n      <PopoverTrigger v-if=\"trigger\" as-child>\n        <TableTriggerButton\n          :view=\"trigger\"\n          :responsive-label=\"!props.table.triggerActions?.filters\"\n          :active=\"activeCount > 0\"\n        >\n          <template #icon\n            ><Icon name=\"alfakit::tables.actions.filter\" :fallback=\"FilterIcon\"\n          /></template>\n        </TableTriggerButton>\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"end\"\n        :class=\"cn(widthClass ? ['w-[calc(100vw-2rem)]', widthClass] : 'w-80 sm:w-96')\"\n      >\n        <!-- `filtersFormMaxHeight()`: PopoverContent renders through a portal, so the\n             height cap sits on its content. -->\n        <div\n          :class=\"cn(props.table.filtersFormMaxHeight && 'overflow-y-auto')\"\n          :style=\"\n            props.table.filtersFormMaxHeight\n              ? { maxHeight: props.table.filtersFormMaxHeight }\n              : undefined\n          \"\n        >\n          <FiltersForm />\n        </div>\n      </PopoverContent>\n    </Popover>\n  </template>\n</template>\n"],"mappings":"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"}

package/dist/components/table/TableGroupingMenu.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableGroupingMenu.js","names":["_sfc_main","TableGroupingMenu_vue_vue_type_script_setup_true_lang_default","TableGroupingMenu_default"],"sources":["../../../src/components/table/TableGroupingMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TableSchema } from '@alfakit/core'\nimport { triggerButtonView, visitTable } from '@alfakit/core'\nimport { LayersIcon } from '@lucide/vue'\nimport { computed } from 'vue'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport DropdownMenu from '../ui/DropdownMenu.vue'\nimport DropdownMenuContent from '../ui/DropdownMenuContent.vue'\nimport DropdownMenuLabel from '../ui/DropdownMenuLabel.vue'\nimport DropdownMenuRadioGroup from '../ui/DropdownMenuRadioGroup.vue'\nimport DropdownMenuRadioItem from '../ui/DropdownMenuRadioItem.vue'\nimport DropdownMenuSeparator from '../ui/DropdownMenuSeparator.vue'\nimport DropdownMenuTrigger from '../ui/DropdownMenuTrigger.vue'\nimport TableTriggerButton from './TableTriggerButton.vue'\n\n/**\n * The \"group by\" settings: one of the table's groups (or none) and the direction. Inline\n * in the toolbar on desktop (unless `groupingSettingsInDropdownOnDesktop()`), in a\n * dropdown on phones.\n */\nconst props = defineProps<{ table: TableSchema }>()\nconst t = useT()\n\nconst active = computed(() => props.table.grouping?.group ?? '')\n// `groupRecordsTriggerAction()`.\nconst trigger = computed(() =>\n  triggerButtonView(props.table, 'groupRecords', {\n    label: t('table_grouping.group_by', {}, 'Group by'),\n  }),\n)\nconst inDropdownOnly = computed(() => Boolean(props.table.groupingSettingsInDropdownOnDesktop))\n\nconst setGroup = (group: unknown) =>\n  visitTable(props.table.identifier, { group: String(group ?? '') }, ['page'])\nconst setDirection = (direction: unknown) =>\n  visitTable(props.table.identifier, { groupDirection: direction === 'desc' ? 'desc' : 'asc' }, [\n    'page',\n  ])\n</script>\n\n<template>\n  <template v-if=\"props.table.groups && props.table.groups.length > 0\">\n    <!-- Desktop default: the settings inline in the toolbar (the dropdown is for phones). -->\n    <div\n      v-if=\"!inDropdownOnly\"\n      data-slot=\"table-grouping-inline\"\n      class=\"hidden items-center gap-2 text-sm sm:flex\"\n    >\n      <label class=\"flex items-center gap-2\">\n        <span class=\"text-muted-foreground\">{{\n          t('table_grouping.group_by', {}, 'Group by')\n        }}</span>\n        <select\n          :value=\"active\"\n          class=\"border-input h-8 rounded-md border bg-transparent px-2 text-sm\"\n          @change=\"setGroup(($event.target as HTMLSelectElement).value)\"\n        >\n          <option value=\"\">{{ t('table_grouping.none', {}, 'No grouping') }}</option>\n          <option v-for=\"group in props.table.groups\" :key=\"group.id\" :value=\"group.id\">\n            {{ group.label }}\n          </option>\n        </select>\n      </label>\n      <label\n        v-if=\"props.table.grouping && !props.table.groupingDirectionSettingHidden\"\n        class=\"flex items-center\"\n      >\n        <span class=\"sr-only\">{{ t('table_grouping.direction', {}, 'Group direction') }}</span>\n        <select\n          :value=\"props.table.grouping.direction\"\n          class=\"border-input h-8 rounded-md border bg-transparent px-2 text-sm\"\n          @change=\"setDirection(($event.target as HTMLSelectElement).value)\"\n        >\n          <option value=\"asc\">{{ t('table_grouping.ascending', {}, 'Ascending') }}</option>\n          <option value=\"desc\">{{ t('table_grouping.descending', {}, 'Descending') }}</option>\n        </select>\n      </label>\n    </div>\n    <div v-if=\"trigger\" :class=\"cn(!inDropdownOnly && 'sm:hidden')\">\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <TableTriggerButton\n            :view=\"trigger\"\n            :responsive-label=\"!props.table.triggerActions?.groupRecords\"\n            :active=\"Boolean(props.table.grouping)\"\n          >\n            <template #icon\n              ><Icon name=\"alfakit::tables.actions.group\" :fallback=\"LayersIcon\"\n            /></template>\n          </TableTriggerButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" class=\"min-w-48\">\n          <DropdownMenuLabel>{{ t('table_grouping.group_by', {}, 'Group by') }}</DropdownMenuLabel>\n          <DropdownMenuRadioGroup :model-value=\"active\" @update:model-value=\"setGroup\">\n            <DropdownMenuRadioItem value=\"\">{{\n              t('table_grouping.none', {}, 'No grouping')\n            }}</DropdownMenuRadioItem>\n            <DropdownMenuRadioItem\n              v-for=\"group in props.table.groups\"\n              :key=\"group.id\"\n              :value=\"group.id\"\n              >{{ group.label }}</DropdownMenuRadioItem\n            >\n          </DropdownMenuRadioGroup>\n          <template v-if=\"props.table.grouping && !props.table.groupingDirectionSettingHidden\">\n            <DropdownMenuSeparator />\n            <DropdownMenuLabel>{{\n              t('table_grouping.direction', {}, 'Group direction')\n            }}</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              :model-value=\"props.table.grouping.direction\"\n              @update:model-value=\"setDirection\"\n            >\n              <DropdownMenuRadioItem value=\"asc\">{{\n                t('table_grouping.ascending', {}, 'Ascending')\n              }}</DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"desc\">{{\n                t('table_grouping.descending', {}, 'Descending')\n              }}</DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </template>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  </template>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,12 @@
+import type { TableSchema } from '@alfakit/core';
+/**
+ * The "group by" settings: one of the table's groups (or none) and the direction. Inline
+ * in the toolbar on desktop (unless `groupingSettingsInDropdownOnDesktop()`), in a
+ * dropdown on phones.
+ */
+type __VLS_Props = {
+    table: TableSchema;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=TableGroupingMenu.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableGroupingMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/table/TableGroupingMenu.vue"],"names":[],"mappings":"AAkIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAgBhD;;;;GAIG;AACH,KAAK,WAAW,GAAG;IAAE,KAAK,EAAE,WAAW,CAAA;CAAE,CAAC;;AA6U1C,wBAMG"}

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

@@ -0,0 +1,115 @@
+import { useT as e } from "../../context.js";
+import { cn as t } from "../../lib/utils.js";
+import n from "../../lib/Icon.js";
+import r from "../ui/DropdownMenu.js";
+import i from "../ui/DropdownMenuContent.js";
+import a from "../ui/DropdownMenuSeparator.js";
+import o from "../ui/DropdownMenuTrigger.js";
+import s from "./TableTriggerButton.js";
+import c from "../ui/DropdownMenuLabel.js";
+import l from "../ui/DropdownMenuRadioGroup.js";
+import u from "../ui/DropdownMenuRadioItem.js";
+import { triggerButtonView as d, visitTable as f } from "@alfakit/core";
+import { Fragment as p, computed as m, createBlock as h, createCommentVNode as g, createElementBlock as _, createElementVNode as v, createTextVNode as y, createVNode as b, defineComponent as x, normalizeClass as S, openBlock as C, renderList as w, toDisplayString as T, unref as E, withCtx as D } from "vue";
+import { LayersIcon as O } from "@lucide/vue";
+//#region src/components/table/TableGroupingMenu.vue?vue&type=script&setup=true&lang.ts
+var k = {
+	key: 0,
+	"data-slot": "table-grouping-inline",
+	class: "hidden items-center gap-2 text-sm sm:flex"
+}, A = { class: "flex items-center gap-2" }, j = { class: "text-muted-foreground" }, M = ["value"], N = { value: "" }, P = ["value"], F = {
+	key: 0,
+	class: "flex items-center"
+}, I = { class: "sr-only" }, L = ["value"], R = { value: "asc" }, z = { value: "desc" }, B = /*@__PURE__*/ x({
+	__name: "TableGroupingMenu",
+	props: { table: {} },
+	setup(x) {
+		let B = x, V = e(), H = m(() => B.table.grouping?.group ?? ""), U = m(() => d(B.table, "groupRecords", { label: V("table_grouping.group_by", {}, "Group by") })), W = m(() => !!B.table.groupingSettingsInDropdownOnDesktop), G = (e) => f(B.table.identifier, { group: String(e ?? "") }, ["page"]), K = (e) => f(B.table.identifier, { groupDirection: e === "desc" ? "desc" : "asc" }, ["page"]);
+		return (e, d) => B.table.groups && B.table.groups.length > 0 ? (C(), _(p, { key: 0 }, [W.value ? g("", !0) : (C(), _("div", k, [v("label", A, [v("span", j, T(E(V)("table_grouping.group_by", {}, "Group by")), 1), v("select", {
+			value: H.value,
+			class: "border-input h-8 rounded-md border bg-transparent px-2 text-sm",
+			onChange: d[0] ||= (e) => G(e.target.value)
+		}, [v("option", N, T(E(V)("table_grouping.none", {}, "No grouping")), 1), (C(!0), _(p, null, w(B.table.groups, (e) => (C(), _("option", {
+			key: e.id,
+			value: e.id
+		}, T(e.label), 9, P))), 128))], 40, M)]), B.table.grouping && !B.table.groupingDirectionSettingHidden ? (C(), _("label", F, [v("span", I, T(E(V)("table_grouping.direction", {}, "Group direction")), 1), v("select", {
+			value: B.table.grouping.direction,
+			class: "border-input h-8 rounded-md border bg-transparent px-2 text-sm",
+			onChange: d[1] ||= (e) => K(e.target.value)
+		}, [v("option", R, T(E(V)("table_grouping.ascending", {}, "Ascending")), 1), v("option", z, T(E(V)("table_grouping.descending", {}, "Descending")), 1)], 40, L)])) : g("", !0)])), U.value ? (C(), _("div", {
+			key: 1,
+			class: S(E(t)(!W.value && "sm:hidden"))
+		}, [b(r, null, {
+			default: D(() => [b(o, { "as-child": "" }, {
+				default: D(() => [b(s, {
+					view: U.value,
+					"responsive-label": !B.table.triggerActions?.groupRecords,
+					active: !!B.table.grouping
+				}, {
+					icon: D(() => [b(E(n), {
+						name: "alfakit::tables.actions.group",
+						fallback: E(O)
+					}, null, 8, ["fallback"])]),
+					_: 1
+				}, 8, [
+					"view",
+					"responsive-label",
+					"active"
+				])]),
+				_: 1
+			}), b(i, {
+				align: "end",
+				class: "min-w-48"
+			}, {
+				default: D(() => [
+					b(c, null, {
+						default: D(() => [y(T(E(V)("table_grouping.group_by", {}, "Group by")), 1)]),
+						_: 1
+					}),
+					b(l, {
+						"model-value": H.value,
+						"onUpdate:modelValue": G
+					}, {
+						default: D(() => [b(u, { value: "" }, {
+							default: D(() => [y(T(E(V)("table_grouping.none", {}, "No grouping")), 1)]),
+							_: 1
+						}), (C(!0), _(p, null, w(B.table.groups, (e) => (C(), h(u, {
+							key: e.id,
+							value: e.id
+						}, {
+							default: D(() => [y(T(e.label), 1)]),
+							_: 2
+						}, 1032, ["value"]))), 128))]),
+						_: 1
+					}, 8, ["model-value"]),
+					B.table.grouping && !B.table.groupingDirectionSettingHidden ? (C(), _(p, { key: 0 }, [
+						b(a),
+						b(c, null, {
+							default: D(() => [y(T(E(V)("table_grouping.direction", {}, "Group direction")), 1)]),
+							_: 1
+						}),
+						b(l, {
+							"model-value": B.table.grouping.direction,
+							"onUpdate:modelValue": K
+						}, {
+							default: D(() => [b(u, { value: "asc" }, {
+								default: D(() => [y(T(E(V)("table_grouping.ascending", {}, "Ascending")), 1)]),
+								_: 1
+							}), b(u, { value: "desc" }, {
+								default: D(() => [y(T(E(V)("table_grouping.descending", {}, "Descending")), 1)]),
+								_: 1
+							})]),
+							_: 1
+						}, 8, ["model-value"])
+					], 64)) : g("", !0)
+				]),
+				_: 1
+			})]),
+			_: 1
+		})], 2)) : g("", !0)], 64)) : g("", !0);
+	}
+});
+//#endregion
+export { B as default };
+
+//# sourceMappingURL=TableGroupingMenu.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableGroupingMenu.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_createElementVNode","_toDisplayString","_unref","_renderList","_createCommentVNode","_normalizeClass","_createVNode","DropdownMenu","_withCtx","DropdownMenuTrigger","TableTriggerButton","Icon","DropdownMenuContent","DropdownMenuLabel","_createTextVNode","DropdownMenuRadioGroup","DropdownMenuRadioItem","_createBlock","DropdownMenuSeparator","Icon_default","DropdownMenu_default","DropdownMenuContent_default","DropdownMenuSeparator_default","DropdownMenuTrigger_default","TableTriggerButton_default","DropdownMenuLabel_default","DropdownMenuRadioGroup_default","DropdownMenuRadioItem_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","TableGroupingMenu_vue_vue_type_script_setup_true_lang_default","props","__props","t","useT","active","computed","trigger","triggerButtonView","inDropdownOnly","setGroup","visitTable","group","setDirection","direction","openBlock","createElementBlock","Fragment","createCommentVNode","createElementVNode","toDisplayString","unref","_cache","$event","renderList","normalizeClass","cn","createVNode","withCtx","LayersIcon","createTextVNode","createBlock"],"sources":["../../../src/components/table/TableGroupingMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TableSchema } from '@alfakit/core'\nimport { triggerButtonView, visitTable } from '@alfakit/core'\nimport { LayersIcon } from '@lucide/vue'\nimport { computed } from 'vue'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport DropdownMenu from '../ui/DropdownMenu.vue'\nimport DropdownMenuContent from '../ui/DropdownMenuContent.vue'\nimport DropdownMenuLabel from '../ui/DropdownMenuLabel.vue'\nimport DropdownMenuRadioGroup from '../ui/DropdownMenuRadioGroup.vue'\nimport DropdownMenuRadioItem from '../ui/DropdownMenuRadioItem.vue'\nimport DropdownMenuSeparator from '../ui/DropdownMenuSeparator.vue'\nimport DropdownMenuTrigger from '../ui/DropdownMenuTrigger.vue'\nimport TableTriggerButton from './TableTriggerButton.vue'\n\n/**\n * The \"group by\" settings: one of the table's groups (or none) and the direction. Inline\n * in the toolbar on desktop (unless `groupingSettingsInDropdownOnDesktop()`), in a\n * dropdown on phones.\n */\nconst props = defineProps<{ table: TableSchema }>()\nconst t = useT()\n\nconst active = computed(() => props.table.grouping?.group ?? '')\n// `groupRecordsTriggerAction()`.\nconst trigger = computed(() =>\n  triggerButtonView(props.table, 'groupRecords', {\n    label: t('table_grouping.group_by', {}, 'Group by'),\n  }),\n)\nconst inDropdownOnly = computed(() => Boolean(props.table.groupingSettingsInDropdownOnDesktop))\n\nconst setGroup = (group: unknown) =>\n  visitTable(props.table.identifier, { group: String(group ?? '') }, ['page'])\nconst setDirection = (direction: unknown) =>\n  visitTable(props.table.identifier, { groupDirection: direction === 'desc' ? 'desc' : 'asc' }, [\n    'page',\n  ])\n</script>\n\n<template>\n  <template v-if=\"props.table.groups && props.table.groups.length > 0\">\n    <!-- Desktop default: the settings inline in the toolbar (the dropdown is for phones). -->\n    <div\n      v-if=\"!inDropdownOnly\"\n      data-slot=\"table-grouping-inline\"\n      class=\"hidden items-center gap-2 text-sm sm:flex\"\n    >\n      <label class=\"flex items-center gap-2\">\n        <span class=\"text-muted-foreground\">{{\n          t('table_grouping.group_by', {}, 'Group by')\n        }}</span>\n        <select\n          :value=\"active\"\n          class=\"border-input h-8 rounded-md border bg-transparent px-2 text-sm\"\n          @change=\"setGroup(($event.target as HTMLSelectElement).value)\"\n        >\n          <option value=\"\">{{ t('table_grouping.none', {}, 'No grouping') }}</option>\n          <option v-for=\"group in props.table.groups\" :key=\"group.id\" :value=\"group.id\">\n            {{ group.label }}\n          </option>\n        </select>\n      </label>\n      <label\n        v-if=\"props.table.grouping && !props.table.groupingDirectionSettingHidden\"\n        class=\"flex items-center\"\n      >\n        <span class=\"sr-only\">{{ t('table_grouping.direction', {}, 'Group direction') }}</span>\n        <select\n          :value=\"props.table.grouping.direction\"\n          class=\"border-input h-8 rounded-md border bg-transparent px-2 text-sm\"\n          @change=\"setDirection(($event.target as HTMLSelectElement).value)\"\n        >\n          <option value=\"asc\">{{ t('table_grouping.ascending', {}, 'Ascending') }}</option>\n          <option value=\"desc\">{{ t('table_grouping.descending', {}, 'Descending') }}</option>\n        </select>\n      </label>\n    </div>\n    <div v-if=\"trigger\" :class=\"cn(!inDropdownOnly && 'sm:hidden')\">\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <TableTriggerButton\n            :view=\"trigger\"\n            :responsive-label=\"!props.table.triggerActions?.groupRecords\"\n            :active=\"Boolean(props.table.grouping)\"\n          >\n            <template #icon\n              ><Icon name=\"alfakit::tables.actions.group\" :fallback=\"LayersIcon\"\n            /></template>\n          </TableTriggerButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" class=\"min-w-48\">\n          <DropdownMenuLabel>{{ t('table_grouping.group_by', {}, 'Group by') }}</DropdownMenuLabel>\n          <DropdownMenuRadioGroup :model-value=\"active\" @update:model-value=\"setGroup\">\n            <DropdownMenuRadioItem value=\"\">{{\n              t('table_grouping.none', {}, 'No grouping')\n            }}</DropdownMenuRadioItem>\n            <DropdownMenuRadioItem\n              v-for=\"group in props.table.groups\"\n              :key=\"group.id\"\n              :value=\"group.id\"\n              >{{ group.label }}</DropdownMenuRadioItem\n            >\n          </DropdownMenuRadioGroup>\n          <template v-if=\"props.table.grouping && !props.table.groupingDirectionSettingHidden\">\n            <DropdownMenuSeparator />\n            <DropdownMenuLabel>{{\n              t('table_grouping.direction', {}, 'Group direction')\n            }}</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              :model-value=\"props.table.grouping.direction\"\n              @update:model-value=\"setDirection\"\n            >\n              <DropdownMenuRadioItem value=\"asc\">{{\n                t('table_grouping.ascending', {}, 'Ascending')\n              }}</DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"desc\">{{\n                t('table_grouping.descending', {}, 'Descending')\n              }}</DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </template>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  </template>\n</template>\n"],"mappings":"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"}

package/dist/components/table/TablePagination.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TablePagination.js","names":["_sfc_main","TablePagination_vue_vue_type_script_setup_true_lang_default","TablePagination_default"],"sources":["../../../src/components/table/TablePagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TableSchema } from '@alfakit/core'\nimport {\n  extremePageLinks,\n  isAppendingPagination,\n  nextPageQuery,\n  prefetchTablePage,\n  previousPageQuery,\n  visitTable,\n} from '@alfakit/core'\nimport { ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon } from '@lucide/vue'\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport Button from '../ui/Button.vue'\n\nconst props = defineProps<{ table: TableSchema }>()\nconst t = useT()\nconst pagination = computed(() => props.table.pagination)\n\nfunction pageWindow(current: number, last: number): Array<number | null> {\n  if (last <= 7) {\n    return Array.from({ length: last }, (_, index) => index + 1)\n  }\n\n  const pages = new Set<number>([1, last, current - 1, current, current + 1])\n  const sorted = [...pages].filter((page) => page >= 1 && page <= last).sort((a, b) => a - b)\n  const result: Array<number | null> = []\n\n  sorted.forEach((page, index) => {\n    if (index > 0 && page - (sorted[index - 1] ?? 0) > 1) {\n      result.push(null)\n    }\n\n    result.push(page)\n  })\n\n  return result\n}\n\n// Numbered pages (the default mode) know their total and last page.\nconst numbered = computed(() => {\n  const value = pagination.value\n\n  return value && (value.mode === undefined || value.mode === 'default') ? value : null\n})\nconst appending = computed(() =>\n  isAppendingPagination(pagination.value) ? pagination.value : null,\n)\nconst pages = computed(() =>\n  numbered.value ? pageWindow(numbered.value.currentPage, numbered.value.lastPage) : [],\n)\n// `extremePaginationLinks()`: first / last page buttons around numbered pages.\nconst extremes = computed(() =>\n  numbered.value\n    ? extremePageLinks(props.table, numbered.value.currentPage, numbered.value.lastPage)\n    : null,\n)\nconst previous = computed(() => previousPageQuery(pagination.value))\nconst next = computed(() => nextPageQuery(pagination.value))\nconst summary = computed(() => {\n  const value = pagination.value\n\n  if (!value) return ''\n\n  return numbered.value\n    ? t(\n        'table.showing',\n        { first: value.from, last: value.to, total: numbered.value.total },\n        `Showing ${value.from}–${value.to} of ${numbered.value.total}`,\n      )\n    : t(\n        'table.showing_range',\n        { first: value.from, last: value.to },\n        `Showing ${value.from}–${value.to}`,\n      )\n})\nconst goTo = (page: number) => visitTable(props.table.identifier, { page }, ['page'])\n// The next page is fetched while hovering or focusing \"next\" (cached for a few seconds).\nconst prefetchNext = () => next.value && prefetchTablePage(props.table.identifier, next.value)\n// `deferTotals()`: the total and page numbers arrive after the rows.\nconst pendingTotal = computed(\n  () => pagination.value?.mode === 'simple' && pagination.value.pendingTotal === true,\n)\nconst visit = (query: ReturnType<typeof nextPageQuery>) =>\n  query && visitTable(props.table.identifier, query, ['page'])\nconst setPerPage = (event: Event) => {\n  const value = (event.target as HTMLSelectElement).value\n  visitTable(props.table.identifier, { perPage: value === 'all' ? 'all' : Number(value) }, ['page'])\n}\n\n// Load more / infinite scroll: the server returns every record up to the requested page,\n// so asking for the next page appends it (and reloads keep what was already shown). A\n// request that fails shows a retry control instead of staying on \"Loading more…\"; infinite\n// scroll waits for the retry rather than requesting again.\nconst loading = ref(false)\nconst failed = ref(false)\nconst sentinel = ref<HTMLElement | null>(null)\nlet observer: IntersectionObserver | null = null\n\nwatch(\n  () => pagination.value?.to,\n  () => {\n    loading.value = false\n    failed.value = false\n  },\n)\n\nconst loadMore = () => {\n  if (!next.value || loading.value) return\n\n  let succeeded = false\n  let cancelled = false\n  loading.value = true\n  failed.value = false\n  visitTable(props.table.identifier, next.value, ['page'], {\n    onSuccess: () => {\n      succeeded = true\n    },\n    onCancel: () => {\n      cancelled = true\n    },\n    onFinish: () => {\n      loading.value = false\n      if (!succeeded && !cancelled) failed.value = true\n    },\n  })\n}\n\nwatch(\n  [sentinel, () => appending.value?.mode, next, failed],\n  ([element, mode, query, hasFailed]) => {\n    observer?.disconnect()\n    observer = null\n\n    if (\n      !element ||\n      mode !== 'infinite' ||\n      !query ||\n      hasFailed ||\n      typeof IntersectionObserver === 'undefined'\n    ) {\n      return\n    }\n\n    observer = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) loadMore()\n    })\n    observer.observe(element)\n  },\n  { flush: 'post' },\n)\n\nonBeforeUnmount(() => observer?.disconnect())\n</script>\n\n<template>\n  <div v-if=\"pagination\" class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n    <div class=\"text-muted-foreground flex items-center gap-3 text-sm\">\n      <span>{{ summary }}</span>\n      <span\n        v-if=\"pendingTotal\"\n        data-slot=\"pagination-total\"\n        aria-busy=\"true\"\n        :aria-label=\"t('loading', {}, 'Loading')\"\n        class=\"bg-muted-foreground/20 inline-block h-4 w-12 animate-pulse rounded-md\"\n      />\n      <label v-if=\"pagination.pageOptions.length > 1\" class=\"flex items-center gap-2\">\n        <span class=\"sr-only sm:not-sr-only\">{{ t('table.per_page', {}, 'Per page') }}</span>\n        <select\n          :value=\"String(pagination.perPage)\"\n          class=\"border-input h-8 rounded-md border bg-transparent px-2 text-sm\"\n          @change=\"setPerPage\"\n        >\n          <option v-for=\"option in pagination.pageOptions\" :key=\"option\" :value=\"String(option)\">\n            {{ option === 'all' ? t('table.all', {}, 'All') : option }}\n          </option>\n        </select>\n      </label>\n    </div>\n    <template v-if=\"appending\">\n      <template v-if=\"next\">\n        <div v-if=\"failed\" class=\"flex items-center gap-2 text-sm\" role=\"alert\">\n          <span class=\"text-destructive\">{{\n            t('table.load_more_failed', {}, \"Couldn't load more records.\")\n          }}</span>\n          <Button type=\"button\" variant=\"outline\" size=\"sm\" @click=\"loadMore\">{{\n            t('retry', {}, 'Retry')\n          }}</Button>\n        </div>\n        <div\n          v-else-if=\"appending.mode === 'infinite'\"\n          ref=\"sentinel\"\n          class=\"text-muted-foreground text-sm\"\n          aria-live=\"polite\"\n        >\n          {{ loading ? t('table.loading_more', {}, 'Loading more…') : '' }}\n        </div>\n        <Button\n          v-else\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"loading\"\n          @click=\"loadMore\"\n        >\n          {{\n            loading ? t('table.loading_more', {}, 'Loading more…') : t('load_more', {}, 'Load more')\n          }}\n        </Button>\n      </template>\n    </template>\n    <nav\n      v-else-if=\"previous || next\"\n      class=\"flex items-center gap-1\"\n      :aria-label=\"t('pagination', {}, 'Pagination')\"\n    >\n      <Button\n        v-if=\"extremes\"\n        type=\"button\"\n        variant=\"outline\"\n        size=\"icon-sm\"\n        data-slot=\"pagination-first\"\n        :disabled=\"extremes.first === null\"\n        :aria-label=\"t('table.first_page', {}, 'First page')\"\n        @click=\"goTo(1)\"\n        ><Icon\n          name=\"alfakit::support.pagination.first-button\"\n          :fallback=\"ChevronsLeftIcon\"\n          class=\"rtl:rotate-180\"\n      /></Button>\n      <Button\n        type=\"button\"\n        variant=\"outline\"\n        size=\"icon-sm\"\n        :disabled=\"!previous\"\n        :aria-label=\"t('table.previous', {}, 'Previous')\"\n        @click=\"visit(previous)\"\n        ><Icon\n          name=\"alfakit::support.pagination.previous-button\"\n          :fallback=\"ChevronLeftIcon\"\n          class=\"rtl:rotate-180\"\n      /></Button>\n      <template v-if=\"numbered && !numbered.simple\">\n        <template v-for=\"(page, index) in pages\" :key=\"page === null ? `gap-${index}` : page\">\n          <span v-if=\"page === null\" class=\"text-muted-foreground px-1\">…</span>\n          <Button\n            v-else\n            type=\"button\"\n            :variant=\"page === numbered.currentPage ? 'default' : 'outline'\"\n            size=\"icon-sm\"\n            :aria-current=\"page === numbered.currentPage ? 'page' : undefined\"\n            @click=\"goTo(page)\"\n            >{{ page }}</Button\n          >\n        </template>\n      </template>\n      <Button\n        type=\"button\"\n        variant=\"outline\"\n        size=\"icon-sm\"\n        :disabled=\"!next\"\n        :aria-label=\"t('table.next', {}, 'Next')\"\n        @click=\"visit(next)\"\n        @pointerenter=\"prefetchNext\"\n        @focus=\"prefetchNext\"\n        ><Icon\n          name=\"alfakit::support.pagination.next-button\"\n          :fallback=\"ChevronRightIcon\"\n          class=\"rtl:rotate-180\"\n      /></Button>\n      <Button\n        v-if=\"extremes\"\n        type=\"button\"\n        variant=\"outline\"\n        size=\"icon-sm\"\n        data-slot=\"pagination-last\"\n        :disabled=\"extremes.last === null\"\n        :aria-label=\"t('table.last_page', {}, 'Last page')\"\n        @click=\"extremes.last !== null && goTo(extremes.last)\"\n        ><Icon\n          name=\"alfakit::support.pagination.last-button\"\n          :fallback=\"ChevronsRightIcon\"\n          class=\"rtl:rotate-180\"\n      /></Button>\n    </nav>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,7 @@
+import type { TableSchema } from '@alfakit/core';
+type __VLS_Props = {
+    table: TableSchema;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=TablePagination.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TablePagination.vue.d.ts","sourceRoot":"","sources":["../../../src/components/table/TablePagination.vue"],"names":[],"mappings":"AAkSA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAehD,KAAK,WAAW,GAAG;IAAE,KAAK,EAAE,WAAW,CAAA;CAAE,CAAC;;AAilB1C,wBAMG"}