@alfakit/vue 0.0.0-stage → 0.1.0

package/dist/components/schema/TranslatableField.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TranslatableField.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_unref","_Fragment","_renderList","_normalizeClass","_createTextVNode","_toDisplayString","_createCommentVNode","_createBlock","_resolveDynamicComponent","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","TranslatableField_vue_vue_type_script_setup_true_lang_default","props","__props","t","useT","store","useFormStore","locales","computed","invalidKey","useStoreSelector","translatableLocalesWithErrors","state","invalid","current","ref","initialTranslatableLocale","watch","editing","option","locale","candidate","field","translatableLocaleField","openBlock","createElementBlock","createElementVNode","unref","Fragment","renderList","normalizeClass","cn","createTextVNode","toDisplayString","_cache","createCommentVNode","createBlock","resolveDynamicComponent"],"sources":["../../../src/components/schema/TranslatableField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { BaseField } from '@alfakit/core'\nimport {\n  initialTranslatableLocale,\n  translatableLocaleField,\n  translatableLocalesWithErrors,\n} from '@alfakit/core'\nimport { computed, ref, watch, type Component } from 'vue'\nimport { useStoreSelector } from '../../composables/use-store'\nimport { useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { useFormStore } from '../form/form-context'\n\n/**\n * A `->translatable()` field: a language switcher above the field's own renderer, bound\n * to `{statePath}.{locale}` for the selected language. Languages with a validation error\n * are marked, and the first of them opens after a failed submit.\n */\nconst props = defineProps<{ component: BaseField; render: Component }>()\nconst t = useT()\nconst store = useFormStore()\n\nconst locales = computed(() => props.component.translatable?.locales ?? [])\nconst invalidKey = useStoreSelector(store.store, (state) =>\n  translatableLocalesWithErrors(props.component, state.errors).join(','),\n)\nconst invalid = computed(() => (invalidKey.value === '' ? [] : invalidKey.value.split(',')))\nconst current = ref(initialTranslatableLocale(props.component, store.store.get().errors))\n\n// After a failed submit, show a language that needs attention.\nwatch(invalidKey, () => {\n  if (invalid.value.length > 0 && !invalid.value.includes(current.value)) {\n    current.value = invalid.value[0]!\n  }\n})\n\n// A `LocaleSwitcher` changes the language the fields open on; follow it when it changes.\nwatch(\n  () => props.component.translatable?.defaultLocale ?? '',\n  (editing) => {\n    if (editing !== '' && locales.value.some((option) => option.code === editing)) {\n      current.value = editing\n    }\n  },\n)\n\nconst locale = computed(\n  () => locales.value.find((candidate) => candidate.code === current.value) ?? locales.value[0],\n)\nconst field = computed(() =>\n  locale.value ? translatableLocaleField(props.component, locale.value) : props.component,\n)\n</script>\n\n<template>\n  <div v-if=\"locale\" data-slot=\"translatable-field\" class=\"flex flex-col gap-1.5\">\n    <div\n      role=\"group\"\n      :aria-label=\"\n        t('translatable.languages', { field: props.component.label ?? props.component.name })\n      \"\n      data-slot=\"translatable-locales\"\n      class=\"flex flex-wrap justify-end gap-1\"\n    >\n      <button\n        v-for=\"option in locales\"\n        :key=\"option.code\"\n        type=\"button\"\n        :lang=\"option.tag\"\n        :aria-pressed=\"option.code === locale.code\"\n        :data-active=\"option.code === locale.code || undefined\"\n        :data-invalid=\"invalid.includes(option.code) || undefined\"\n        :class=\"\n          cn(\n            'focus-visible:ring-ring/50 inline-flex h-6 items-center gap-1 rounded-md border px-2 text-xs font-medium transition-colors outline-none focus-visible:ring-[3px]',\n            option.code === locale.code\n              ? 'border-primary bg-primary text-primary-foreground'\n              : 'bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground',\n            invalid.includes(option.code) &&\n              option.code !== locale.code &&\n              'border-destructive text-destructive',\n          )\n        \"\n        @click=\"current = option.code\"\n      >\n        {{ option.label }}\n        <template v-if=\"invalid.includes(option.code)\">\n          <span aria-hidden=\"true\" class=\"bg-destructive size-1.5 rounded-full\" />\n          <span class=\"sr-only\">({{ t('translatable.has_errors') }})</span>\n        </template>\n      </button>\n    </div>\n    <component :is=\"props.render\" :key=\"locale.code\" :component=\"field\" />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAkBA,IAAMiB,IAAQC,GACRC,IAAIC,EAAK,GACTC,IAAQC,EAAa,GAErBC,IAAUC,QAAeP,EAAM,UAAU,cAAc,WAAW,CAAC,CAAC,GACpEQ,IAAaC,EAAiBL,EAAM,QAAQ,MAChDM,EAA8BV,EAAM,WAAWW,EAAM,MAAM,CAAC,CAAC,KAAK,GAAG,CACvE,GACMC,IAAUL,QAAgBC,EAAW,UAAU,KAAK,CAAC,IAAIA,EAAW,MAAM,MAAM,GAAG,CAAE,GACrFK,IAAUC,EAAIC,EAA0Bf,EAAM,WAAWI,EAAM,MAAM,IAAI,CAAC,CAAC,MAAM,CAAC;EAUxF,AAPAY,EAAMR,SAAkB;GACtB,AAAII,EAAQ,MAAM,SAAS,KAAK,CAACA,EAAQ,MAAM,SAASC,EAAQ,KAAK,MACnE,EAAQ,QAAQD,EAAQ,MAAM;EAElC,CAAC,GAGDI,QACQhB,EAAM,UAAU,cAAc,iBAAiB,KACpD,MAAY;GACX,AAAIiB,MAAY,MAAMX,EAAQ,MAAM,MAAM,MAAWY,EAAO,SAASD,CAAO,MAC1E,EAAQ,QAAQA;EAEpB,CACF;EAEA,IAAME,IAASZ,QACPD,EAAQ,MAAM,MAAM,MAAcc,EAAU,SAASP,EAAQ,KAAK,KAAKP,EAAQ,MAAM,EAC7F,GACMe,IAAQd,QACZY,EAAO,QAAQG,EAAwBtB,EAAM,WAAWmB,EAAO,KAAK,IAAInB,EAAM,SAChF;mBAIamB,EAAA,SAAXpC,EAAA,GAAAC,EAsCM,OAtCNW,GAsCM,CArCJV,EAmCM,OAAA;GAlCJ,MAAK;GACJ,cAAqBC,EAAAgB,CAAA,CAAC,CAAA,0BAAA,EAAA,OAAoCF,EAAM,UAAU,SAASA,EAAM,UAAU,KAAI,CAAA;GAGxG,aAAU;GACV,OAAM;EAENjB,GAAAA,EAAAA,EAAA,EAAA,GAAAC,EA0BSG,GAAA,MAAAC,EAzBUkB,EAAA,QAAV,OADTvB,EAAA,GAAAC,EA0BS,UAAA;GAxBN,KAAKkC,EAAO;GACb,MAAK;GACJ,MAAMA,EAAO;GACb,gBAAcA,EAAO,SAASC,EAAA,MAAO;GACrC,eAAaD,EAAO,SAASC,EAAA,MAAO,QAAQ,KAAA;GAC5C,gBAAcP,EAAA,MAAQ,SAASM,EAAO,IAAI,KAAK,KAAA;GAC/C,OAAK7B,EAAaH,EAAA4C,CAAA,CAAE,CAAA,oKAA8LZ,EAAO,SAASC,EAAA,MAAO,OAAA,sDAAA,oFAAyLP,EAAA,MAAQ,SAASM,EAAO,IAAI,KAAmBA,EAAO,SAASC,EAAA,MAAO,QAAA,qCAAA,CAAA;GAWxe,UAAK,MAAE,EAAA,QAAUD,EAAO;EAEtB5B,GAAAA,CAAAA,EAAAC,EAAA2B,EAAO,KAAK,IAAG,KAClB,CAAA,GAAgBN,EAAA,MAAQ,SAASM,EAAO,IAAI,KAA5CnC,EAAA,GAAAC,EAGWG,GAAA,EAAA,KAAA,EAAA,GAAA,CAFT,AAAA8C,EAAA,OAAAhD,EAAwE,QAAA;GAAlE,eAAY;GAAO,OAAM;EAC/BA,GAAAA,MAAAA,EAAAA,GAAAA,EAAiE,QAAjEa,GAAsB,MAACP,EAAGL,EAAAgB,CAAA,CAAC,CAAA,yBAAA,CAAA,IAA8B,KAAC,CAAA,CAAA,GAAA,EAAA,KAAAgC,EAAA,IAAA,EAAA,CAAA,GAAA,IAAArC,CAAA,EAIhEd,GAAAA,GAAAA,EAAAA,GAAAA,GAAAA,CAAAA,IAAAA,EAAA,GAAAU,EAAsEC,EAAtDM,EAAM,MAAM,GAAA;GAAG,KAAKmB,EAAA,MAAO;GAAO,WAAWE,EAAA"}

package/dist/components/schema/VirtualSpacerRow.js

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

package/dist/components/schema/VirtualSpacerRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualSpacerRow.js","names":["_sfc_main","VirtualSpacerRow_vue_vue_type_script_setup_true_lang_default","VirtualSpacerRow_default"],"sources":["../../../src/components/schema/VirtualSpacerRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Reserves the height of table rows outside the rendered window, so the scrollbar and the\n * positions of the rendered rows stay right. Hidden from assistive technology: the\n * `aria-rowcount` on the table tells the real count.\n */\ndefineProps<{ height: number; colSpan: number }>()\n</script>\n\n<template>\n  <tr\n    v-if=\"height > 0\"\n    aria-hidden=\"true\"\n    data-slot=\"virtual-spacer\"\n    :style=\"{ height: `${height}px` }\"\n  >\n    <td :colspan=\"colSpan\" class=\"border-0 p-0\" />\n  </tr>\n</template>\n"],"mappings":""}

package/dist/components/schema/VirtualSpacerRow.vue.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Reserves the height of table rows outside the rendered window, so the scrollbar and the
+ * positions of the rendered rows stay right. Hidden from assistive technology: the
+ * `aria-rowcount` on the table tells the real count.
+ */
+type __VLS_Props = {
+    height: number;
+    colSpan: number;
+};
+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=VirtualSpacerRow.vue.d.ts.map

package/dist/components/schema/VirtualSpacerRow.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualSpacerRow.vue.d.ts","sourceRoot":"","sources":["../../../src/components/schema/VirtualSpacerRow.vue"],"names":[],"mappings":"AAqBA;;;;GAIG;AACH,KAAK,WAAW,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC;;AA2CvD,wBAMG"}

package/dist/components/schema/VirtualSpacerRow.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,24 @@
+import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeStyle as i, openBlock as a } from "vue";
+//#region src/components/schema/VirtualSpacerRow.vue?vue&type=script&setup=true&lang.ts
+var o = ["colspan"], s = /*@__PURE__*/ r({
+	__name: "VirtualSpacerRow",
+	props: {
+		height: {},
+		colSpan: {}
+	},
+	setup(r) {
+		return (s, c) => r.height > 0 ? (a(), t("tr", {
+			key: 0,
+			"aria-hidden": "true",
+			"data-slot": "virtual-spacer",
+			style: i({ height: `${r.height}px` })
+		}, [n("td", {
+			colspan: r.colSpan,
+			class: "border-0 p-0"
+		}, null, 8, o)], 4)) : e("", !0);
+	}
+});
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=VirtualSpacerRow.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/schema/VirtualSpacerRow.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualSpacerRow.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeStyle","_createElementVNode","_createCommentVNode","_hoisted_1","VirtualSpacerRow_vue_vue_type_script_setup_true_lang_default","__props","openBlock","createElementBlock","normalizeStyle","createElementVNode","createCommentVNode"],"sources":["../../../src/components/schema/VirtualSpacerRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Reserves the height of table rows outside the rendered window, so the scrollbar and the\n * positions of the rendered rows stay right. Hidden from assistive technology: the\n * `aria-rowcount` on the table tells the real count.\n */\ndefineProps<{ height: number; colSpan: number }>()\n</script>\n\n<template>\n  <tr\n    v-if=\"height > 0\"\n    aria-hidden=\"true\"\n    data-slot=\"virtual-spacer\"\n    :style=\"{ height: `${height}px` }\"\n  >\n    <td :colspan=\"colSpan\" class=\"border-0 p-0\" />\n  </tr>\n</template>\n"],"mappings":";;;;;;;;;mBAWUO,EAAA,SAAM,KADdP,EAAA,GAAAC,EAOK,MAAA;;GALH,eAAY;GACZ,aAAU;GACT,OAAKC,EAAA,EAAA,QAAA,GAAeK,EAAA,OAAM,IAAA,CAAA;EAE3BJ,GAAAA,CAAAA,EAA8C,MAAA;GAAzC,SAASI,EAAA;GAAS,OAAM"}

package/dist/components/schema/field-actions.d.ts

@@ -0,0 +1,11 @@
+import type { ActionContext } from '@alfakit/core';
+import { type ComputedRef, type MaybeRefOrGetter } from 'vue';
+/**
+ * The action context of a field or entry's own actions (`field:{schema}::{key}`): they
+ * run through the action endpoint with the form's state, and the response updates the
+ * form in place.
+ */
+export declare function useFieldActionContext(component: MaybeRefOrGetter<{
+    key: string;
+}>): ComputedRef<ActionContext>;
+//# sourceMappingURL=field-actions.d.ts.map

package/dist/components/schema/field-actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-actions.d.ts","sourceRoot":"","sources":["../../../src/components/schema/field-actions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,EAAqB,KAAK,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAIhF;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,gBAAgB,CAAC;IAAE,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC,GAC3C,WAAW,CAAC,aAAa,CAAC,CAO5B"}

package/dist/components/schema/field-actions.js

@@ -0,0 +1,17 @@
+import { usePageActionContext as e } from "../actions/action-context.js";
+import { useOptionalFormStore as t } from "../form/form-context.js";
+import { fieldActionContext as n } from "@alfakit/core";
+import { computed as r, toValue as i } from "vue";
+//#region src/components/schema/field-actions.ts
+function a(a) {
+	let o = t(), s = e();
+	return r(() => n({
+		token: s.token,
+		form: o,
+		key: i(a).key
+	}));
+}
+//#endregion
+export { a as useFieldActionContext };
+
+//# sourceMappingURL=field-actions.js.map

package/dist/components/schema/field-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-actions.js","names":["useFieldActionContext","form","useOptionalFormStore","page","usePageActionContext","computed","fieldActionContext","toValue","component"],"sources":["../../../src/components/schema/field-actions.ts"],"sourcesContent":["import type { ActionContext } from '@alfakit/core'\nimport { fieldActionContext } from '@alfakit/core'\nimport { computed, toValue, type ComputedRef, type MaybeRefOrGetter } from 'vue'\nimport { usePageActionContext } from '../actions/action-context'\nimport { useOptionalFormStore } from '../form/form-context'\n\n/**\n * The action context of a field or entry's own actions (`field:{schema}::{key}`): they\n * run through the action endpoint with the form's state, and the response updates the\n * form in place.\n */\nexport function useFieldActionContext(\n  component: MaybeRefOrGetter<{ key: string }>,\n): ComputedRef<ActionContext> {\n  const form = useOptionalFormStore()\n  const page = usePageActionContext()\n\n  return computed(() =>\n    fieldActionContext({ token: page.token, form, key: toValue(component).key }),\n  )\n}\n"],"mappings":";;;;;AAWA,SAAgBA,EACd,GAC4B;CAC5B,IAAMC,IAAOC,EAAqB,GAC5BC,IAAOC,EAAqB;CAElC,OAAOC,QACLC,EAAmB;EAAE,OAAOH,EAAK;EAAO;EAAM,KAAKI,EAAQC,CAAS,CAAC,CAAC;CAAI,CAAC,CAC7E;AACF"}

package/dist/components/schema/fused-group.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Set by `FusedGroup`: fields inside render only their control (labels become
+ * screen-reader text, helper text and errors are shown by the group).
+ */
+export declare function provideFusedGroup(): void;
+export declare function useInFusedGroup(): boolean;
+//# sourceMappingURL=fused-group.d.ts.map

package/dist/components/schema/fused-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fused-group.d.ts","sourceRoot":"","sources":["../../../src/components/schema/fused-group.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,wBAAgB,iBAAiB,IAAI,IAAI,CAExC;AAED,wBAAgB,eAAe,IAAI,OAAO,CAEzC"}

package/dist/components/schema/fused-group.js

@@ -0,0 +1,13 @@
+import { inject as e, provide as t } from "vue";
+//#region src/components/schema/fused-group.ts
+var n = Symbol("alfakit-fused-group");
+function r() {
+	t(n, !0);
+}
+function i() {
+	return e(n, !1);
+}
+//#endregion
+export { r as provideFusedGroup, i as useInFusedGroup };
+
+//# sourceMappingURL=fused-group.js.map

package/dist/components/schema/fused-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fused-group.js","names":["FUSED_GROUP","provideFusedGroup","useInFusedGroup","inject"],"sources":["../../../src/components/schema/fused-group.ts"],"sourcesContent":["import { inject, provide, type InjectionKey } from 'vue'\n\nconst FUSED_GROUP: InjectionKey<boolean> = Symbol('alfakit-fused-group')\n\n/**\n * Set by `FusedGroup`: fields inside render only their control (labels become\n * screen-reader text, helper text and errors are shown by the group).\n */\nexport function provideFusedGroup(): void {\n  provide(FUSED_GROUP, true)\n}\n\nexport function useInFusedGroup(): boolean {\n  return inject(FUSED_GROUP, false)\n}\n"],"mappings":";;AAEA,IAAMA,IAAqC,OAAO,qBAAqB;AAMvE,SAAgBC,IAA0B;CACxC,EAAQD,GAAa,EAAI;AAC3B;AAEA,SAAgBE,IAA2B;CACzC,OAAOC,EAAOH,GAAa,EAAK;AAClC"}

package/dist/components/table/BooleanCell.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"BooleanCell.js","names":["_sfc_main","BooleanCell_vue_vue_type_script_setup_true_lang_default","BooleanCell_default"],"sources":["../../../src/components/table/BooleanCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ToggleColumnSchema } from '@alfakit/core'\nimport { computed, ref } from 'vue'\nimport {\n  colorClass,\n  switchOffColorClasses,\n  switchOnColorClasses,\n  textColorClasses,\n} from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Checkbox from '../ui/Checkbox.vue'\nimport Switch from '../ui/Switch.vue'\nimport { useCellUpdate, type CellProps } from './cell-update'\n\nconst props = defineProps<CellProps>()\nconst { update, saving } = useCellUpdate(props)\nconst checked = ref(Boolean(props.cell.state))\nconst disabled = computed(() => Boolean(props.cell.disabled) || saving.value)\nconst toggle = computed(() => props.column as ToggleColumnSchema)\n\nconst onChange = (next: boolean) => {\n  checked.value = next\n  void update(next)\n}\n</script>\n\n<template>\n  <Checkbox\n    v-if=\"props.column.type === 'CheckboxColumn'\"\n    :model-value=\"checked\"\n    :disabled=\"disabled\"\n    :aria-label=\"props.column.label || props.column.name\"\n    @update:model-value=\"onChange($event === true)\"\n    @click.stop\n  />\n  <span v-else class=\"inline-flex items-center gap-2\" @click.stop>\n    <Switch\n      :model-value=\"checked\"\n      :disabled=\"disabled\"\n      :aria-label=\"props.column.label || props.column.name\"\n      :class=\"\n        cn(\n          toggle.onColor && colorClass(switchOnColorClasses, toggle.onColor),\n          toggle.offColor && colorClass(switchOffColorClasses, toggle.offColor),\n        )\n      \"\n      @update:model-value=\"onChange\"\n    />\n    <Icon\n      v-if=\"checked ? toggle.onIcon : toggle.offIcon\"\n      :name=\"checked ? toggle.onIcon : toggle.offIcon\"\n      :class=\"colorClass(textColorClasses, checked ? toggle.onColor : toggle.offColor, 'gray')\"\n    />\n  </span>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,4 @@
+import { type CellProps } from './cell-update';
+declare const _default: import("vue").DefineComponent<CellProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CellProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=BooleanCell.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BooleanCell.vue.d.ts","sourceRoot":"","sources":["../../../src/components/table/BooleanCell.vue"],"names":[],"mappings":"AAsEA,OAAO,EAAiB,KAAK,SAAS,EAAE,MAAM,eAAe,CAAA;;AA0I7D,wBAMG"}

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

@@ -0,0 +1,58 @@
+import { cn as e } from "../../lib/utils.js";
+import { colorClass as t, switchOffColorClasses as n, switchOnColorClasses as r, textColorClasses as i } from "../../lib/colors.js";
+import a from "../../lib/Icon.js";
+import o from "../ui/Checkbox.js";
+import s from "../ui/Switch.js";
+import { useCellUpdate as c } from "./cell-update.js";
+import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createVNode as p, defineComponent as m, normalizeClass as h, openBlock as g, ref as _, unref as v, withModifiers as y } from "vue";
+//#region src/components/table/BooleanCell.vue?vue&type=script&setup=true&lang.ts
+var b = /*@__PURE__*/ m({
+	__name: "BooleanCell",
+	props: {
+		column: {},
+		cell: {},
+		recordKey: {},
+		token: {},
+		component: {}
+	},
+	setup(m) {
+		let b = m, { update: x, saving: S } = c(b), C = _(!!b.cell.state), w = l(() => !!b.cell.disabled || S.value), T = l(() => b.column), E = (e) => {
+			C.value = e, x(e);
+		};
+		return (c, l) => b.column.type === "CheckboxColumn" ? (g(), u(o, {
+			key: 0,
+			"model-value": C.value,
+			disabled: w.value,
+			"aria-label": b.column.label || b.column.name,
+			"onUpdate:modelValue": l[0] ||= (e) => E(e === !0),
+			onClick: l[1] ||= y(() => {}, ["stop"])
+		}, null, 8, [
+			"model-value",
+			"disabled",
+			"aria-label"
+		])) : (g(), f("span", {
+			key: 1,
+			class: "inline-flex items-center gap-2",
+			onClick: l[2] ||= y(() => {}, ["stop"])
+		}, [p(s, {
+			"model-value": C.value,
+			disabled: w.value,
+			"aria-label": b.column.label || b.column.name,
+			class: h(v(e)(T.value.onColor && v(t)(v(r), T.value.onColor), T.value.offColor && v(t)(v(n), T.value.offColor))),
+			"onUpdate:modelValue": E
+		}, null, 8, [
+			"model-value",
+			"disabled",
+			"aria-label",
+			"class"
+		]), (C.value ? T.value.onIcon : T.value.offIcon) ? (g(), u(v(a), {
+			key: 0,
+			name: C.value ? T.value.onIcon : T.value.offIcon,
+			class: h(v(t)(v(i), C.value ? T.value.onColor : T.value.offColor, "gray"))
+		}, null, 8, ["name", "class"])) : d("", !0)]));
+	}
+});
+//#endregion
+export { b as default };
+
+//# sourceMappingURL=BooleanCell.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BooleanCell.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","Checkbox","_withModifiers","_createElementBlock","_createVNode","Switch","_normalizeClass","_unref","Icon","_createCommentVNode","Icon_default","Checkbox_default","Switch_default","BooleanCell_vue_vue_type_script_setup_true_lang_default","props","__props","useCellUpdate","checked","ref","disabled","computed","saving","toggle","onChange","next","update","openBlock","createBlock","_cache","$event","withModifiers","createElementBlock","createVNode","normalizeClass","unref","cn","colorClass","switchOnColorClasses","switchOffColorClasses","textColorClasses","createCommentVNode"],"sources":["../../../src/components/table/BooleanCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ToggleColumnSchema } from '@alfakit/core'\nimport { computed, ref } from 'vue'\nimport {\n  colorClass,\n  switchOffColorClasses,\n  switchOnColorClasses,\n  textColorClasses,\n} from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Checkbox from '../ui/Checkbox.vue'\nimport Switch from '../ui/Switch.vue'\nimport { useCellUpdate, type CellProps } from './cell-update'\n\nconst props = defineProps<CellProps>()\nconst { update, saving } = useCellUpdate(props)\nconst checked = ref(Boolean(props.cell.state))\nconst disabled = computed(() => Boolean(props.cell.disabled) || saving.value)\nconst toggle = computed(() => props.column as ToggleColumnSchema)\n\nconst onChange = (next: boolean) => {\n  checked.value = next\n  void update(next)\n}\n</script>\n\n<template>\n  <Checkbox\n    v-if=\"props.column.type === 'CheckboxColumn'\"\n    :model-value=\"checked\"\n    :disabled=\"disabled\"\n    :aria-label=\"props.column.label || props.column.name\"\n    @update:model-value=\"onChange($event === true)\"\n    @click.stop\n  />\n  <span v-else class=\"inline-flex items-center gap-2\" @click.stop>\n    <Switch\n      :model-value=\"checked\"\n      :disabled=\"disabled\"\n      :aria-label=\"props.column.label || props.column.name\"\n      :class=\"\n        cn(\n          toggle.onColor && colorClass(switchOnColorClasses, toggle.onColor),\n          toggle.offColor && colorClass(switchOffColorClasses, toggle.offColor),\n        )\n      \"\n      @update:model-value=\"onChange\"\n    />\n    <Icon\n      v-if=\"checked ? toggle.onIcon : toggle.offIcon\"\n      :name=\"checked ? toggle.onIcon : toggle.offIcon\"\n      :class=\"colorClass(textColorClasses, checked ? toggle.onColor : toggle.offColor, 'gray')\"\n    />\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAeA,IAAMe,IAAQC,GACR,EAAE,WAAQ,cAAWC,EAAcF,CAAK,GACxCG,IAAUC,EAAI,EAAQJ,EAAM,KAAK,KAAM,GACvCK,IAAWC,QAAe,EAAQN,EAAM,KAAK,YAAaO,EAAO,KAAK,GACtEC,IAASF,QAAeN,EAAM,MAA4B,GAE1DS,KAAY,MAAkB;GAElC,AADA,EAAQ,QAAQC,GAChBC,EAAYD,CAAI;EAClB;mBAKUV,EAAM,OAAO,SAAI,oBADzBf,EAAA,GAAAC,EAOEC,GAAA;;GALC,eAAagB,EAAA;GACb,UAAUE,EAAA;GACV,cAAYL,EAAM,OAAO,SAASA,EAAM,OAAO;GAC/C,uBAAkB,AAAAc,EAAA,QAAA,MAAEL,EAASM,MAAM,EAAA;GACnC,SAAK,AAAAD,EAAA,OAAA1B,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA;;;;;EAEbH,CAAAA,MAAAA,EAAA,GAAAI,EAkBO,QAAA;;GAlBM,OAAM;GAAkC,SAAK,AAAAyB,EAAA,OAAA1B,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA;EAC7DE,GAAAA,CAAAA,EAWEC,GAAA;GAVC,eAAaY,EAAA;GACb,UAAUE,EAAA;GACV,cAAYL,EAAM,OAAO,SAASA,EAAM,OAAO;GAC/C,OAAKR,EAAWC,EAAA4B,CAAA,CAAE,CAAYb,EAAA,MAAO,WAAWf,EAAA6B,CAAA,CAAU,CAAC7B,EAAA8B,CAAA,GAAsBf,EAAA,MAAO,OAAO,GAAaA,EAAA,MAAO,YAAYf,EAAA6B,CAAA,CAAU,CAAC7B,EAAA+B,CAAA,GAAuBhB,EAAA,MAAO,QAAQ,CAAA,CAAA;GAMhL,uBAAoBC;;;;;;EAGf,CAAA,IAAAN,EAAA,QAAUK,EAAA,MAAO,SAASA,EAAA,MAAO,YADzCvB,EAAA,GAAAC,EAIEO,EAAAC,CAAA,GAAA;;GAFC,MAAMS,EAAA,QAAUK,EAAA,MAAO,SAASA,EAAA,MAAO;GACvC,OAAKhB,EAAEC,EAAA6B,CAAA,CAAU,CAAC7B,EAAAgC,CAAA,GAAkBtB,EAAA,QAAUK,EAAA,MAAO,UAAUA,EAAA,MAAO,UAAQ,MAAA,CAAA"}

package/dist/components/table/ColumnHeader.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnHeader.js","names":["_sfc_main","ColumnHeader_vue_vue_type_script_setup_true_lang_default","ColumnHeader_default"],"sources":["../../../src/components/table/ColumnHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ColumnSchema, TableSchema } from '@alfakit/core'\nimport { ariaSort, columnVisibilityClasses, visitTable } from '@alfakit/core'\nimport { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from '@lucide/vue'\nimport { createReusableTemplate } from '@vueuse/core'\nimport { ref } from 'vue'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Slot from '../panel/Slot.vue'\nimport Input from '../ui/Input.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport TableHead from '../ui/TableHead.vue'\n\nconst ALIGN: Record<string, string> = {\n  start: 'text-start',\n  center: 'text-center',\n  end: 'text-end',\n  between: 'text-start',\n  justify: 'text-justify',\n}\n\n/** A column's header cell: label, sort button and individual search input. */\nconst props = defineProps<{\n  table: TableSchema\n  column: ColumnSchema\n  rowSpan?: number\n  /** The table's component key (`relationManager:<class>`, `widget:<id>`), for slots. */\n  component?: string | null\n}>()\nconst t = useT()\nconst [DefineLabel, ColumnHeaderLabel] = createReusableTemplate()\n\n// A spinner replaces the sort icon until the sorted records arrive.\nconst sorting = ref(false)\n\nconst sort = () => {\n  const direction =\n    props.table.sort?.column === props.column.name && props.table.sort.direction === 'asc'\n      ? 'desc'\n      : 'asc'\n  sorting.value = true\n  visitTable(props.table.identifier, { sort: props.column.name, direction }, ['page'], {\n    onFinish: () => {\n      sorting.value = false\n    },\n  })\n}\n\nconst columnSearch = (event: Event) => {\n  visitTable(\n    props.table.identifier,\n    {\n      columnSearch: {\n        ...(props.table.columnSearches ?? {}),\n        [props.column.name]: (event.target as HTMLInputElement).value,\n      },\n    },\n    ['page'],\n  )\n}\n</script>\n\n<template>\n  <DefineLabel>\n    <button\n      v-if=\"props.column.sortable\"\n      type=\"button\"\n      class=\"hover:text-foreground inline-flex items-center gap-1\"\n      :aria-busy=\"sorting || undefined\"\n      @click=\"sort\"\n    >\n      {{ props.column.label }}\n      <Spinner v-if=\"sorting\" data-slot=\"table-sort-spinner\" class=\"size-3.5\" />\n      <template v-else-if=\"props.table.sort?.column === props.column.name\">\n        <Icon\n          v-if=\"props.table.sort?.direction === 'asc'\"\n          name=\"alfakit::tables.header-cell.sort-asc-button\"\n          :fallback=\"ArrowUpIcon\"\n          class=\"size-3.5\"\n          aria-hidden=\"true\"\n        />\n        <Icon\n          v-else\n          name=\"alfakit::tables.header-cell.sort-desc-button\"\n          :fallback=\"ArrowDownIcon\"\n          class=\"size-3.5\"\n          aria-hidden=\"true\"\n        />\n      </template>\n      <Icon\n        v-else\n        name=\"alfakit::tables.header-cell.sort-button\"\n        :fallback=\"ArrowUpDownIcon\"\n        class=\"size-3.5 opacity-40\"\n        aria-hidden=\"true\"\n      />\n    </button>\n    <template v-else>{{ props.column.label }}</template>\n  </DefineLabel>\n  <TableHead\n    :rowspan=\"props.rowSpan\"\n    :class=\"\n      cn(\n        ALIGN[props.column.alignment ?? 'start'],\n        props.column.wrapHeader ? 'whitespace-normal' : undefined,\n        props.column.grow === false && 'w-0',\n        columnVisibilityClasses(props.column),\n      )\n    \"\n    :style=\"props.column.width ? { width: props.column.width } : undefined\"\n    :aria-sort=\"\n      props.column.sortable\n        ? ariaSort(props.column.name, props.table.sort?.column, props.table.sort?.direction)\n        : undefined\n    \"\n    v-bind=\"props.column.extraHeaderAttributes\"\n  >\n    <div class=\"flex flex-col gap-1\">\n      <span\n        v-if=\"props.column.headerTooltip\"\n        :title=\"props.column.headerTooltip\"\n        data-slot=\"header-tooltip\"\n      >\n        <ColumnHeaderLabel />\n        <span class=\"sr-only\"> ({{ props.column.headerTooltip }})</span>\n      </span>\n      <ColumnHeaderLabel v-else />\n      <Slot\n        name=\"table.header-cell\"\n        :scope=\"props.component\"\n        :data=\"{ column: props.column.name }\"\n      />\n      <Input\n        v-if=\"props.column.searchable\"\n        type=\"search\"\n        :model-value=\"props.table.columnSearches?.[props.column.name] ?? ''\"\n        :placeholder=\"t('search', {}, 'Search')\"\n        :aria-label=\"`${t('search', {}, 'Search')} ${props.column.label}`\"\n        class=\"h-7 text-xs font-normal\"\n        @keydown.enter=\"columnSearch\"\n      />\n    </div>\n  </TableHead>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,12 @@
+import type { ColumnSchema, TableSchema } from '@alfakit/core';
+/** A column's header cell: label, sort button and individual search input. */
+type __VLS_Props = {
+    table: TableSchema;
+    column: ColumnSchema;
+    rowSpan?: number;
+    /** The table's component key (`relationManager:<class>`, `widget:<id>`), for slots. */
+    component?: string | null;
+};
+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=ColumnHeader.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnHeader.vue.d.ts","sourceRoot":"","sources":["../../../src/components/table/ColumnHeader.vue"],"names":[],"mappings":"AAmJA,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAqB9D,8EAA8E;AAC9E,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,WAAW,CAAA;IAClB,MAAM,EAAE,YAAY,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,uFAAuF;IACvF,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC1B,CAAC;;AA+RF,wBAMG"}

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

@@ -0,0 +1,116 @@
+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/Spinner.js";
+import i from "../ui/Input.js";
+import a from "../ui/TableHead.js";
+import o from "../panel/Slot.js";
+import { ariaSort as s, columnVisibilityClasses as c, visitTable as l } from "@alfakit/core";
+import { Fragment as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, mergeProps as v, openBlock as y, ref as b, toDisplayString as x, unref as S, withCtx as C, withKeys as w } from "vue";
+import { ArrowDownIcon as T, ArrowUpDownIcon as E, ArrowUpIcon as D } from "@lucide/vue";
+import { createReusableTemplate as O } from "@vueuse/core";
+//#region src/components/table/ColumnHeader.vue?vue&type=script&setup=true&lang.ts
+var k = ["aria-busy"], A = { class: "flex flex-col gap-1" }, j = ["title"], M = { class: "sr-only" }, N = /*@__PURE__*/ _({
+	__name: "ColumnHeader",
+	props: {
+		table: {},
+		column: {},
+		rowSpan: {},
+		component: {}
+	},
+	setup(_) {
+		let N = {
+			start: "text-start",
+			center: "text-center",
+			end: "text-end",
+			between: "text-start",
+			justify: "text-justify"
+		}, P = _, F = e(), [I, L] = O(), R = b(!1), z = () => {
+			let e = P.table.sort?.column === P.column.name && P.table.sort.direction === "asc" ? "desc" : "asc";
+			R.value = !0, l(P.table.identifier, {
+				sort: P.column.name,
+				direction: e
+			}, ["page"], { onFinish: () => {
+				R.value = !1;
+			} });
+		}, B = (e) => {
+			l(P.table.identifier, { columnSearch: {
+				...P.table.columnSearches ?? {},
+				[P.column.name]: e.target.value
+			} }, ["page"]);
+		};
+		return (e, l) => (y(), p(u, null, [g(S(I), null, {
+			default: C(() => [P.column.sortable ? (y(), p("button", {
+				key: 0,
+				type: "button",
+				class: "hover:text-foreground inline-flex items-center gap-1",
+				"aria-busy": R.value || void 0,
+				onClick: z
+			}, [h(x(P.column.label) + " ", 1), R.value ? (y(), d(r, {
+				key: 0,
+				"data-slot": "table-sort-spinner",
+				class: "size-3.5"
+			})) : P.table.sort?.column === P.column.name ? (y(), p(u, { key: 1 }, [P.table.sort?.direction === "asc" ? (y(), d(S(n), {
+				key: 0,
+				name: "alfakit::tables.header-cell.sort-asc-button",
+				fallback: S(D),
+				class: "size-3.5",
+				"aria-hidden": "true"
+			}, null, 8, ["fallback"])) : (y(), d(S(n), {
+				key: 1,
+				name: "alfakit::tables.header-cell.sort-desc-button",
+				fallback: S(T),
+				class: "size-3.5",
+				"aria-hidden": "true"
+			}, null, 8, ["fallback"]))], 64)) : (y(), d(S(n), {
+				key: 2,
+				name: "alfakit::tables.header-cell.sort-button",
+				fallback: S(E),
+				class: "size-3.5 opacity-40",
+				"aria-hidden": "true"
+			}, null, 8, ["fallback"]))], 8, k)) : (y(), p(u, { key: 1 }, [h(x(P.column.label), 1)], 64))]),
+			_: 1
+		}), g(a, v({
+			rowspan: P.rowSpan,
+			class: S(t)(N[P.column.alignment ?? "start"], P.column.wrapHeader ? "whitespace-normal" : void 0, P.column.grow === !1 && "w-0", S(c)(P.column)),
+			style: P.column.width ? { width: P.column.width } : void 0,
+			"aria-sort": P.column.sortable ? S(s)(P.column.name, P.table.sort?.column, P.table.sort?.direction) : void 0
+		}, P.column.extraHeaderAttributes), {
+			default: C(() => [m("div", A, [
+				P.column.headerTooltip ? (y(), p("span", {
+					key: 0,
+					title: P.column.headerTooltip,
+					"data-slot": "header-tooltip"
+				}, [g(S(L)), m("span", M, " (" + x(P.column.headerTooltip) + ")", 1)], 8, j)) : (y(), d(S(L), { key: 1 })),
+				g(o, {
+					name: "table.header-cell",
+					scope: P.component,
+					data: { column: P.column.name }
+				}, null, 8, ["scope", "data"]),
+				P.column.searchable ? (y(), d(i, {
+					key: 2,
+					type: "search",
+					"model-value": P.table.columnSearches?.[P.column.name] ?? "",
+					placeholder: S(F)("search", {}, "Search"),
+					"aria-label": `${S(F)("search", {}, "Search")} ${P.column.label}`,
+					class: "h-7 text-xs font-normal",
+					onKeydown: w(B, ["enter"])
+				}, null, 8, [
+					"model-value",
+					"placeholder",
+					"aria-label"
+				])) : f("", !0)
+			])]),
+			_: 1
+		}, 16, [
+			"rowspan",
+			"class",
+			"style",
+			"aria-sort"
+		])], 64));
+	}
+});
+//#endregion
+export { N as default };
+
+//# sourceMappingURL=ColumnHeader.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnHeader.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_createVNode","_unref","_withCtx","_createTextVNode","_toDisplayString","_createBlock","Spinner","Icon","TableHead","_mergeProps","_createElementVNode","Slot","Input","_withKeys","_createCommentVNode","Icon_default","Spinner_default","Input_default","TableHead_default","Slot_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ColumnHeader_vue_vue_type_script_setup_true_lang_default","ALIGN","props","__props","t","useT","DefineLabel","ColumnHeaderLabel","createReusableTemplate","sorting","ref","sort","direction","visitTable","columnSearch","event","openBlock","createElementBlock","Fragment","createVNode","unref","withCtx","createTextVNode","toDisplayString","createBlock","ArrowUpIcon","ArrowDownIcon","ArrowUpDownIcon","mergeProps","cn","columnVisibilityClasses","ariaSort","createElementVNode","withKeys","createCommentVNode"],"sources":["../../../src/components/table/ColumnHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ColumnSchema, TableSchema } from '@alfakit/core'\nimport { ariaSort, columnVisibilityClasses, visitTable } from '@alfakit/core'\nimport { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from '@lucide/vue'\nimport { createReusableTemplate } from '@vueuse/core'\nimport { ref } from 'vue'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Slot from '../panel/Slot.vue'\nimport Input from '../ui/Input.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport TableHead from '../ui/TableHead.vue'\n\nconst ALIGN: Record<string, string> = {\n  start: 'text-start',\n  center: 'text-center',\n  end: 'text-end',\n  between: 'text-start',\n  justify: 'text-justify',\n}\n\n/** A column's header cell: label, sort button and individual search input. */\nconst props = defineProps<{\n  table: TableSchema\n  column: ColumnSchema\n  rowSpan?: number\n  /** The table's component key (`relationManager:<class>`, `widget:<id>`), for slots. */\n  component?: string | null\n}>()\nconst t = useT()\nconst [DefineLabel, ColumnHeaderLabel] = createReusableTemplate()\n\n// A spinner replaces the sort icon until the sorted records arrive.\nconst sorting = ref(false)\n\nconst sort = () => {\n  const direction =\n    props.table.sort?.column === props.column.name && props.table.sort.direction === 'asc'\n      ? 'desc'\n      : 'asc'\n  sorting.value = true\n  visitTable(props.table.identifier, { sort: props.column.name, direction }, ['page'], {\n    onFinish: () => {\n      sorting.value = false\n    },\n  })\n}\n\nconst columnSearch = (event: Event) => {\n  visitTable(\n    props.table.identifier,\n    {\n      columnSearch: {\n        ...(props.table.columnSearches ?? {}),\n        [props.column.name]: (event.target as HTMLInputElement).value,\n      },\n    },\n    ['page'],\n  )\n}\n</script>\n\n<template>\n  <DefineLabel>\n    <button\n      v-if=\"props.column.sortable\"\n      type=\"button\"\n      class=\"hover:text-foreground inline-flex items-center gap-1\"\n      :aria-busy=\"sorting || undefined\"\n      @click=\"sort\"\n    >\n      {{ props.column.label }}\n      <Spinner v-if=\"sorting\" data-slot=\"table-sort-spinner\" class=\"size-3.5\" />\n      <template v-else-if=\"props.table.sort?.column === props.column.name\">\n        <Icon\n          v-if=\"props.table.sort?.direction === 'asc'\"\n          name=\"alfakit::tables.header-cell.sort-asc-button\"\n          :fallback=\"ArrowUpIcon\"\n          class=\"size-3.5\"\n          aria-hidden=\"true\"\n        />\n        <Icon\n          v-else\n          name=\"alfakit::tables.header-cell.sort-desc-button\"\n          :fallback=\"ArrowDownIcon\"\n          class=\"size-3.5\"\n          aria-hidden=\"true\"\n        />\n      </template>\n      <Icon\n        v-else\n        name=\"alfakit::tables.header-cell.sort-button\"\n        :fallback=\"ArrowUpDownIcon\"\n        class=\"size-3.5 opacity-40\"\n        aria-hidden=\"true\"\n      />\n    </button>\n    <template v-else>{{ props.column.label }}</template>\n  </DefineLabel>\n  <TableHead\n    :rowspan=\"props.rowSpan\"\n    :class=\"\n      cn(\n        ALIGN[props.column.alignment ?? 'start'],\n        props.column.wrapHeader ? 'whitespace-normal' : undefined,\n        props.column.grow === false && 'w-0',\n        columnVisibilityClasses(props.column),\n      )\n    \"\n    :style=\"props.column.width ? { width: props.column.width } : undefined\"\n    :aria-sort=\"\n      props.column.sortable\n        ? ariaSort(props.column.name, props.table.sort?.column, props.table.sort?.direction)\n        : undefined\n    \"\n    v-bind=\"props.column.extraHeaderAttributes\"\n  >\n    <div class=\"flex flex-col gap-1\">\n      <span\n        v-if=\"props.column.headerTooltip\"\n        :title=\"props.column.headerTooltip\"\n        data-slot=\"header-tooltip\"\n      >\n        <ColumnHeaderLabel />\n        <span class=\"sr-only\"> ({{ props.column.headerTooltip }})</span>\n      </span>\n      <ColumnHeaderLabel v-else />\n      <Slot\n        name=\"table.header-cell\"\n        :scope=\"props.component\"\n        :data=\"{ column: props.column.name }\"\n      />\n      <Input\n        v-if=\"props.column.searchable\"\n        type=\"search\"\n        :model-value=\"props.table.columnSearches?.[props.column.name] ?? ''\"\n        :placeholder=\"t('search', {}, 'Search')\"\n        :aria-label=\"`${t('search', {}, 'Search')} ${props.column.label}`\"\n        class=\"h-7 text-xs font-normal\"\n        @keydown.enter=\"columnSearch\"\n      />\n    </div>\n  </TableHead>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAcA,IAAM4B,IAAgC;GACpC,OAAO;GACP,QAAQ;GACR,KAAK;GACL,SAAS;GACT,SAAS;EACX,GAGMC,IAAQC,GAORC,IAAIC,EAAK,GACT,CAACC,GAAaC,KAAqBC,EAAuB,GAG1DC,IAAUC,EAAI,EAAK,GAEnBC,UAAa;GACjB,IAAMC,IACJV,EAAM,MAAM,MAAM,WAAWA,EAAM,OAAO,QAAQA,EAAM,MAAM,KAAK,cAAc,QAC7E,SACA;GAEN,AADA,EAAQ,QAAQ,IAChBW,EAAWX,EAAM,MAAM,YAAY;IAAE,MAAMA,EAAM,OAAO;IAAM;GAAU,GAAG,CAAC,MAAM,GAAG,EACnF,gBAAgB;IACd,EAAQ,QAAQ;GAClB,EACF,CAAC;EACH,GAEMY,KAAgB,MAAiB;GACrC,EACEZ,EAAM,MAAM,YACZ,EACE,cAAc;IACZ,GAAIA,EAAM,MAAM,kBAAkB,CAAC;KAClCA,EAAM,OAAO,OAAQa,EAAM,OAA4B;GAC1D,EACF,GACA,CAAC,MAAM,CACT;EACF;oBAIEvC,EAAAA,GAAAA,EAAAA,GAAAA,MAAAA,CAAAA,EAmCcC,EAAA6B,CAAA,GAAA,MAAA;GAlCZ,SAAA5B,QAgCS,CA/BDwB,EAAM,OAAO,YADrB7B,EAAA,GAAAC,EAgCS,UAAA;;IA9BP,MAAK;IACL,OAAM;IACL,aAAWmC,EAAA,SAAW,KAAA;IACtB,SAAOE;GAELhC,GAAAA,CAAAA,EAAAC,EAAAsB,EAAM,OAAO,KAAK,IAAG,KACxB,CAAA,GAAeO,EAAA,SAAfpC,EAAA,GAAAQ,EAA0EC,GAAA;;IAAlD,aAAU;IAAqB,OAAM;GACxC,CAAA,KAAAoB,EAAM,MAAM,MAAM,WAAWA,EAAM,OAAO,QAA/D7B,EAAA,GAAAC,EAeWC,GAAA,EAAA,KAAA,EAAA,GAAA,CAbD2B,EAAM,MAAM,MAAM,cAAS,SADnC7B,EAAA,GAAAQ,EAMEJ,EAAAM,CAAA,GAAA;;IAJA,MAAK;IACJ,UAAUN,EAAAgD,CAAA;IACX,OAAM;IACN,eAAY;GAEdpD,GAAAA,MAAAA,GAAAA,CAAAA,UAAAA,CAAAA,MAAAA,EAAA,GAAAQ,EAMEJ,EAAAM,CAAA,GAAA;;IAJA,MAAK;IACJ,UAAUN,EAAAiD,CAAA;IACX,OAAM;IACN,eAAY;GAGhBrD,GAAAA,MAAAA,GAAAA,CAAAA,UAAAA,CAAAA,EAAAA,GAAAA,EAAAA,MAAAA,EAAA,GAAAQ,EAMEJ,EAAAM,CAAA,GAAA;;IAJA,MAAK;IACJ,UAAUN,EAAAkD,CAAA;IACX,OAAM;IACN,eAAY;GAGhBtD,GAAAA,MAAAA,GAAAA,CAAAA,UAAAA,CAAAA,EAAAA,GAAAA,GAAAA,CAAAA,MAAAA,EAAA,GAAAC,EAAoDC,GAAA,EAAA,KAAA,EAAA,GAAA,CAAhCI,EAAAC,EAAAsB,EAAM,OAAO,KAAK,GAAA,CAAA,CAAA,GAAA,EAAA,EAAA,CAAA;;EAExC1B,CAAAA,GAAAA,EA2CYQ,GA3CZC,EA2CY;GA1CT,SAASiB,EAAM;GACf,OAAczB,EAAAoD,CAAA,CAAE,CAAU5B,EAAMC,EAAM,OAAO,aAAS,UAAsBA,EAAM,OAAO,aAAU,sBAAyB,KAAA,GAAmBA,EAAM,OAAO,SAAI,MAAA,OAA6BzB,EAAAqD,CAAA,CAAuB,CAAC5B,EAAM,MAAM,CAAA;GAQjO,OAAOA,EAAM,OAAO,QAAK,EAAA,OAAYA,EAAM,OAAO,MAAK,IAAK,KAAA;GAC5D,aAAkBA,EAAM,OAAO,WAAmBzB,EAAAsD,CAAA,CAAQ,CAAC7B,EAAM,OAAO,MAAMA,EAAM,MAAM,MAAM,QAAQA,EAAM,MAAM,MAAM,SAAS,IAAY,KAAA;EAKxI,GAAAA,EAAM,OAAO,qBAAqB,GAAA;GAE1C,SAAAxB,QAwBM,CAxBNQ,EAwBM,OAxBNW,GAwBM;IAtBIK,EAAM,OAAO,iBADrB7B,EAAA,GAAAC,EAOO,QAAA;;KALJ,OAAO4B,EAAM,OAAO;KACrB,aAAU;IAEV1B,GAAAA,CAAAA,EAAqBC,EAAA8B,CAAA,CAAA,GACrBrB,EAAgE,QAAhEa,GAAsB,OAAEnB,EAAGsB,EAAM,OAAO,aAAa,IAAG,KAAC,CAAA,CAAA,GAAA,GAAAJ,CAAA,MAE3DzB,EAAA,GAAAQ,EAA4BJ,EAAA8B,CAAA,GAAA,EAAA,KAAA,EAAA,CAAA;IAC5B/B,EAIEW,GAAA;KAHA,MAAK;KACJ,OAAOe,EAAM;KACb,MAAI,EAAA,QAAYA,EAAM,OAAO,KAAI;;IAG5BA,EAAM,OAAO,cADrB7B,EAAA,GAAAQ,EAQEO,GAAA;;KANA,MAAK;KACJ,eAAac,EAAM,MAAM,iBAAiBA,EAAM,OAAO,SAAI;KAC3D,aAAazB,EAAA2B,CAAA,CAAC,CAAA,UAAA,CAAA,GAAA,QAAA;KACd,cAAU,GAAK3B,EAAA2B,CAAA,CAAC,CAAA,UAAA,CAAA,GAAA,QAAA,EAAA,GAA4BF,EAAM,OAAO;KAC1D,OAAM;KACL,WAAOb,EAAQyB,GAAY,CAAA,OAAA,CAAA"}

package/dist/components/table/ColumnManager.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnManager.js","names":["_sfc_main","ColumnManager_vue_vue_type_script_setup_true_lang_default","ColumnManager_default"],"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":""}

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

@@ -0,0 +1,17 @@
+import type { TableSchema } from '@alfakit/core';
+/**
+ * The column manager: show / hide toggleable columns (kept in the query string) and, with
+ * `reorderableColumns()`, move columns (stored per user on the server) by dragging a row
+ * onto another or with the move up / down buttons (the keyboard path).
+ *
+ * `deferColumnManager()` keeps toggles in a draft until "Apply"; `columnManagerLayout()`
+ * opens it in a dialog; `columnManagerColumns()` lays the list out in a grid.
+ */
+type __VLS_Props = {
+    table: TableSchema;
+    token: string;
+    component: string;
+};
+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=ColumnManager.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnManager.vue.d.ts","sourceRoot":"","sources":["../../../src/components/table/ColumnManager.vue"],"names":[],"mappings":"AA4eA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AA4ChD;;;;;;;GAOG;AACH,KAAK,WAAW,GAAG;IAAE,KAAK,EAAE,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,CAAC;;AAk8B5E,wBAMG"}