@alfakit/vue 0.0.0-stage → 0.1.1

package/dist/components/fields/ItemHeaderActions.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,108 @@
+import e from "../actions/ActionList.js";
+import t from "./ItemActionButton.js";
+import { itemActionContext as n } from "@alfakit/core";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createVNode as c, defineComponent as l, openBlock as u, renderSlot as d } from "vue";
+//#region src/components/fields/ItemHeaderActions.vue?vue&type=script&setup=true&lang.ts
+var f = {
+	class: "ms-auto flex items-center gap-0.5",
+	"data-slot": "item-actions"
+}, p = /*@__PURE__*/ l({
+	__name: "ItemHeaderActions",
+	props: {
+		context: {},
+		itemKey: {},
+		index: {},
+		count: {},
+		resolve: { type: Function },
+		extraActions: {},
+		buttons: { type: Boolean },
+		canClone: { type: Boolean },
+		canDelete: { type: Boolean },
+		collapsible: { type: Boolean },
+		collapsed: { type: Boolean }
+	},
+	emits: [
+		"move",
+		"clone",
+		"delete",
+		"toggle"
+	],
+	setup(l, { emit: p }) {
+		let m = l, h = p, g = i(() => ({ item: m.itemKey })), _ = i(() => n(m.context, g.value));
+		return (n, i) => (u(), s("div", f, [
+			d(n.$slots, "default"),
+			m.buttons ? (u(), s(r, { key: 0 }, [c(t, {
+				action: m.resolve("moveUp"),
+				context: m.context,
+				args: g.value,
+				disabled: m.index === 0,
+				attributes: { "data-item-move": "up" },
+				onClient: i[0] ||= (e) => h("move", m.index, m.index - 1)
+			}, null, 8, [
+				"action",
+				"context",
+				"args",
+				"disabled"
+			]), c(t, {
+				action: m.resolve("moveDown"),
+				context: m.context,
+				args: g.value,
+				disabled: m.index === m.count - 1,
+				attributes: { "data-item-move": "down" },
+				onClient: i[1] ||= (e) => h("move", m.index, m.index + 1)
+			}, null, 8, [
+				"action",
+				"context",
+				"args",
+				"disabled"
+			])], 64)) : o("", !0),
+			m.extraActions?.length ? (u(), a(e, {
+				key: 1,
+				actions: m.extraActions,
+				context: _.value,
+				size: "xs",
+				class: "gap-0.5"
+			}, null, 8, ["actions", "context"])) : o("", !0),
+			m.canClone ? (u(), a(t, {
+				key: 2,
+				action: m.resolve("clone"),
+				context: m.context,
+				args: g.value,
+				onClient: i[2] ||= (e) => h("clone")
+			}, null, 8, [
+				"action",
+				"context",
+				"args"
+			])) : o("", !0),
+			m.canDelete ? (u(), a(t, {
+				key: 3,
+				action: m.resolve("delete"),
+				context: m.context,
+				args: g.value,
+				class: "text-destructive hover:text-destructive",
+				onClient: i[3] ||= (e) => h("delete")
+			}, null, 8, [
+				"action",
+				"context",
+				"args"
+			])) : o("", !0),
+			m.collapsible ? (u(), a(t, {
+				key: 4,
+				action: m.resolve(m.collapsed ? "expand" : "collapse"),
+				context: m.context,
+				args: g.value,
+				attributes: { "aria-expanded": m.collapsed ? "false" : "true" },
+				onClient: i[4] ||= (e) => h("toggle")
+			}, null, 8, [
+				"action",
+				"context",
+				"args",
+				"attributes"
+			])) : o("", !0)
+		]));
+	}
+});
+//#endregion
+export { p as default };
+
+//# sourceMappingURL=ItemHeaderActions.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/fields/ItemHeaderActions.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemHeaderActions.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_renderSlot","_Fragment","_createVNode","ItemActionButton","_createCommentVNode","_createBlock","ActionList","ActionList_default","ItemActionButton_default","_hoisted_1","ItemHeaderActions_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","args","computed","extraContext","itemActionContext","openBlock","createElementBlock","renderSlot","_ctx","Fragment","createVNode","_cache","createCommentVNode","createBlock"],"sources":["../../../src/components/fields/ItemHeaderActions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ActionContext, ActionSchema, ItemActionName, ItemActionSchema } from '@alfakit/core'\nimport { itemActionContext } from '@alfakit/core'\nimport { computed } from 'vue'\nimport ActionList from '../actions/ActionList.vue'\nimport ItemActionButton from './ItemActionButton.vue'\n\n/**\n * The end of an item header: move up / down, extra item actions, clone, delete and the\n * collapse toggle, in Filament's order.\n */\nconst props = defineProps<{\n  context: ActionContext\n  itemKey: string\n  index: number\n  count: number\n  resolve: (name: ItemActionName) => ItemActionSchema | null\n  extraActions?: ActionSchema[]\n  buttons: boolean\n  canClone: boolean\n  canDelete: boolean\n  collapsible: boolean\n  collapsed: boolean\n}>()\nconst emit = defineEmits<{\n  move: [from: number, to: number]\n  clone: []\n  delete: []\n  toggle: []\n}>()\n\nconst args = computed(() => ({ item: props.itemKey }))\nconst extraContext = computed(() => itemActionContext(props.context, args.value))\n</script>\n\n<template>\n  <div class=\"ms-auto flex items-center gap-0.5\" data-slot=\"item-actions\">\n    <slot />\n    <template v-if=\"props.buttons\">\n      <ItemActionButton\n        :action=\"props.resolve('moveUp')\"\n        :context=\"props.context\"\n        :args=\"args\"\n        :disabled=\"props.index === 0\"\n        :attributes=\"{ 'data-item-move': 'up' }\"\n        @client=\"emit('move', props.index, props.index - 1)\"\n      />\n      <ItemActionButton\n        :action=\"props.resolve('moveDown')\"\n        :context=\"props.context\"\n        :args=\"args\"\n        :disabled=\"props.index === props.count - 1\"\n        :attributes=\"{ 'data-item-move': 'down' }\"\n        @client=\"emit('move', props.index, props.index + 1)\"\n      />\n    </template>\n    <ActionList\n      v-if=\"props.extraActions?.length\"\n      :actions=\"props.extraActions\"\n      :context=\"extraContext\"\n      size=\"xs\"\n      class=\"gap-0.5\"\n    />\n    <ItemActionButton\n      v-if=\"props.canClone\"\n      :action=\"props.resolve('clone')\"\n      :context=\"props.context\"\n      :args=\"args\"\n      @client=\"emit('clone')\"\n    />\n    <ItemActionButton\n      v-if=\"props.canDelete\"\n      :action=\"props.resolve('delete')\"\n      :context=\"props.context\"\n      :args=\"args\"\n      class=\"text-destructive hover:text-destructive\"\n      @client=\"emit('delete')\"\n    />\n    <ItemActionButton\n      v-if=\"props.collapsible\"\n      :action=\"props.resolve(props.collapsed ? 'expand' : 'collapse')\"\n      :context=\"props.context\"\n      :args=\"args\"\n      :attributes=\"{ 'aria-expanded': props.collapsed ? 'false' : 'true' }\"\n      @client=\"emit('toggle')\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWA,IAAMc,IAAQC,GAaRC,IAAOH,GAOPI,IAAOC,SAAgB,EAAE,MAAMJ,EAAM,QAAQ,EAAE,GAC/CK,IAAeD,QAAeE,EAAkBN,EAAM,SAASG,EAAK,KAAK,CAAC;oBAI9EjB,EAAA,GAAAC,EAkDM,OAlDNU,GAkDM;GAjDJT,EAAQsB,EAAA,QAAA,SAAA;GACQV,EAAM,WAAtBd,EAAA,GAAAC,EAiBWE,GAAA,EAAA,KAAA,EAAA,GAAA,CAhBTC,EAOEC,GAAA;IANC,QAAQS,EAAM,QAAO,QAAA;IACrB,SAASA,EAAM;IACf,MAAMG,EAAA;IACN,UAAUH,EAAM,UAAK;IACrB,YAAY,EAAA,kBAAA,KAAA;IACZ,UAAM,AAAAa,EAAA,QAAA,MAAEX,EAAI,QAASF,EAAM,OAAOA,EAAM,QAAK,CAAA;;;;;;GAEhDV,CAAAA,GAAAA,EAOEC,GAAA;IANC,QAAQS,EAAM,QAAO,UAAA;IACrB,SAASA,EAAM;IACf,MAAMG,EAAA;IACN,UAAUH,EAAM,UAAUA,EAAM,QAAK;IACrC,YAAY,EAAA,kBAAA,OAAA;IACZ,UAAM,AAAAa,EAAA,QAAA,MAAEX,EAAI,QAASF,EAAM,OAAOA,EAAM,QAAK,CAAA;;;;;;;GAI1CA,EAAM,cAAc,UAD5Bd,EAAA,GAAAO,EAMEC,GAAA;;IAJC,SAASM,EAAM;IACf,SAASK,EAAA;IACV,MAAK;IACL,OAAM;;GAGAL,EAAM,YADdd,EAAA,GAAAO,EAMEF,GAAA;;IAJC,QAAQS,EAAM,QAAO,OAAA;IACrB,SAASA,EAAM;IACf,MAAMG,EAAA;IACN,UAAM,AAAAU,EAAA,QAAA,MAAEX,EAAI,OAAA;;;;;;GAGPF,EAAM,aADdd,EAAA,GAAAO,EAOEF,GAAA;;IALC,QAAQS,EAAM,QAAO,QAAA;IACrB,SAASA,EAAM;IACf,MAAMG,EAAA;IACP,OAAM;IACL,UAAM,AAAAU,EAAA,QAAA,MAAEX,EAAI,QAAA;;;;;;GAGPF,EAAM,eADdd,EAAA,GAAAO,EAOEF,GAAA;;IALC,QAAQS,EAAM,QAAQA,EAAM,YAAS,WAAA,UAAA;IACrC,SAASA,EAAM;IACf,MAAMG,EAAA;IACN,YAAU,EAAA,iBAAqBH,EAAM,YAAS,UAAA,OAAA;IAC9C,UAAM,AAAAa,EAAA,QAAA,MAAEX,EAAI,QAAA"}

package/dist/components/fields/KeyValueField.js

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

package/dist/components/fields/KeyValueField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyValueField.js","names":["_sfc_main","KeyValueField_vue_vue_type_script_setup_true_lang_default","KeyValueField_default"],"sources":["../../../src/components/fields/KeyValueField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  fieldIds,\n  moveRepeaterItem,\n  reorderedItemKeys,\n  resolveItemAction,\n  type KeyValueSchema,\n} from '@alfakit/core'\nimport { ChevronDownIcon, ChevronUpIcon } from '@lucide/vue'\nimport { computed, ref } from 'vue'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport { useFieldActionContext } from '../schema/field-actions'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport Button from '../ui/Button.vue'\nimport Input from '../ui/Input.vue'\nimport { useT } from '../../context'\nimport ItemActionButton from './ItemActionButton.vue'\nimport { useItemMoves, useRunItemAction } from './item-actions'\n\ntype Row = { key: string; value: string }\n\n/**\n * The server stores an object; while editing we keep an ordered list of rows so keys\n * can be typed freely (including temporarily duplicate or empty keys).\n */\nconst props = defineProps<{ component: KeyValueSchema }>()\nconst { value, setValue, blur, error, id, disabled, readOnly, aria } = useField<\n  Record<string, unknown> | Row[] | null\n>(() => props.component)\n\nconst rows = computed<Row[]>(() => {\n  if (Array.isArray(value.value)) {\n    return value.value.map((row) => ({\n      key: String(row.key ?? ''),\n      value: row.value === null || row.value === undefined ? '' : String(row.value),\n    }))\n  }\n\n  return Object.entries(value.value ?? {}).map(([key, rowValue]) => ({\n    key,\n    value: rowValue === null || rowValue === undefined ? '' : String(rowValue),\n  }))\n})\n\nconst update = (next: Row[]) => setValue(next)\nconst patch = (index: number, change: Partial<Row>) =>\n  update(rows.value.map((item, i) => (i === index ? { ...item, ...change } : item)))\nconst t = useT()\n\nconst context = useFieldActionContext(() => props.component)\nconst runItemAction = useRunItemAction(context)\nconst addAction = computed(() =>\n  resolveItemAction('add', props.component, undefined, {\n    label: props.component.addActionLabel,\n    icon: 'plus',\n    variant: 'ghost',\n  }),\n)\nconst deleteAction = computed(() =>\n  resolveItemAction('delete', props.component, undefined, {\n    label: t('form.remove_row', {}, 'Remove row'),\n    icon: 'trash-2',\n  }),\n)\nconst reorderAction = computed(() =>\n  resolveItemAction('reorder', props.component, undefined, {\n    label: t('form.reorder_item', {}, 'Reorder'),\n    icon: 'grip-vertical',\n  }),\n)\nconst deletable = computed(\n  () => props.component.deletable && !readOnly.value && deleteAction.value !== null,\n)\nconst reorderable = computed(\n  () =>\n    props.component.reorderable &&\n    !readOnly.value &&\n    !disabled.value &&\n    reorderAction.value !== null,\n)\nconst dragIndex = ref<number | null>(null)\n// Moving runs the reorder action: in the browser, or on the server when customised.\nconst move = (from: number, to: number) =>\n  runItemAction(\n    reorderAction.value,\n    { items: reorderedItemKeys(rows.value.length, from, to) },\n    () => update(moveRepeaterItem(rows.value, from, to) as Row[]),\n  )\n// Move buttons: announced, one at a time, focus kept on the moved row.\nconst moves = useItemMoves(\n  value,\n  move,\n  (index) => rows.value[index]?.key || null,\n  () => rows.value.length,\n)\nconst moveAnnouncement = moves.announcement\nconst moveContainer = moves.container\nconst onRowDrop = (index: number) => {\n  if (dragIndex.value !== null && dragIndex.value !== index) move(dragIndex.value, index)\n  dragIndex.value = null\n}\n</script>\n\n<template>\n  <FieldWrapper :field=\"props.component\" :html-for=\"id\" :error=\"error\">\n    <div ref=\"moveContainer\" class=\"overflow-hidden rounded-md border\">\n      <span aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\" data-slot=\"item-move-status\">{{\n        moveAnnouncement\n      }}</span>\n      <table\n        class=\"w-full text-sm\"\n        :aria-labelledby=\"props.component.label ? fieldIds(id).label : undefined\"\n        :aria-describedby=\"aria['aria-describedby']\"\n      >\n        <thead class=\"bg-muted/50 text-muted-foreground text-xs\">\n          <tr>\n            <th v-if=\"reorderable\" class=\"w-16\" />\n            <th class=\"px-3 py-2 text-start font-medium\">{{ props.component.keyLabel }}</th>\n            <th class=\"px-3 py-2 text-start font-medium\">{{ props.component.valueLabel }}</th>\n            <th v-if=\"deletable\" class=\"w-10\" />\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            v-for=\"(row, index) in rows\"\n            :key=\"index\"\n            :data-index=\"index\"\n            :draggable=\"reorderable\"\n            :class=\"cn('border-t', dragIndex === index && 'opacity-50')\"\n            @dragstart=\"dragIndex = index\"\n            @dragover=\"reorderable && $event.preventDefault()\"\n            @drop=\"onRowDrop(index)\"\n            @dragend=\"dragIndex = null\"\n          >\n            <td v-if=\"reorderable\" class=\"p-1.5\">\n              <div class=\"flex items-center\">\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-xs\"\n                  :aria-label=\"t('form.move_up', {}, 'Move up')\"\n                  :disabled=\"index === 0\"\n                  data-item-move=\"up\"\n                  @click=\"moves.moveWithButton(index, index - 1)\"\n                  ><ChevronUpIcon\n                /></Button>\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-xs\"\n                  :aria-label=\"t('form.move_down', {}, 'Move down')\"\n                  :disabled=\"index === rows.length - 1\"\n                  data-item-move=\"down\"\n                  @click=\"moves.moveWithButton(index, index + 1)\"\n                  ><ChevronDownIcon\n                /></Button>\n              </div>\n            </td>\n            <td class=\"p-1.5\">\n              <Input\n                dir=\"auto\"\n                :model-value=\"row.key\"\n                :readonly=\"readOnly || !props.component.editableKeys\"\n                :disabled=\"disabled\"\n                :placeholder=\"props.component.keyPlaceholder\"\n                :aria-label=\"props.component.keyLabel\"\n                :aria-invalid=\"aria['aria-invalid']\"\n                class=\"h-8\"\n                @update:model-value=\"patch(index, { key: $event })\"\n                @blur=\"blur\"\n              />\n            </td>\n            <td class=\"p-1.5\">\n              <Input\n                dir=\"auto\"\n                :model-value=\"row.value\"\n                :readonly=\"readOnly || !props.component.editableValues\"\n                :disabled=\"disabled\"\n                :placeholder=\"props.component.valuePlaceholder\"\n                :aria-label=\"props.component.valueLabel\"\n                :aria-invalid=\"aria['aria-invalid']\"\n                class=\"h-8\"\n                @update:model-value=\"patch(index, { value: $event })\"\n                @blur=\"blur\"\n              />\n            </td>\n            <td v-if=\"deletable\" class=\"p-1.5\">\n              <ItemActionButton\n                :action=\"deleteAction\"\n                :context=\"context\"\n                :args=\"{ item: String(index) }\"\n                size=\"sm\"\n                :disabled=\"disabled\"\n                class=\"text-muted-foreground\"\n                @client=\"update(rows.filter((_, i) => i !== index))\"\n              />\n            </td>\n          </tr>\n          <tr v-if=\"rows.length === 0\" class=\"border-t\">\n            <td\n              :colspan=\"reorderable ? 4 : 3\"\n              class=\"text-muted-foreground px-3 py-4 text-center text-xs\"\n            >\n              —\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <div v-if=\"props.component.addable && !readOnly && addAction\" class=\"border-t p-1.5\">\n        <ItemActionButton\n          :action=\"addAction\"\n          :context=\"context\"\n          size=\"sm\"\n          :disabled=\"disabled\"\n          @client=\"update([...rows, { key: '', value: '' }])\"\n        />\n      </div>\n    </div>\n  </FieldWrapper>\n</template>\n"],"mappings":""}

package/dist/components/fields/KeyValueField.vue.d.ts

@@ -0,0 +1,11 @@
+import { type KeyValueSchema } from '@alfakit/core';
+/**
+ * The server stores an object; while editing we keep an ordered list of rows so keys
+ * can be typed freely (including temporarily duplicate or empty keys).
+ */
+type __VLS_Props = {
+    component: KeyValueSchema;
+};
+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=KeyValueField.vue.d.ts.map

package/dist/components/fields/KeyValueField.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyValueField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/KeyValueField.vue"],"names":[],"mappings":"AA+NA,OAAO,EAKL,KAAK,cAAc,EACpB,MAAM,eAAe,CAAA;AAetB;;;GAGG;AACH,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,cAAc,CAAA;CAAE,CAAC;;AAkejD,wBAMG"}

package/dist/components/fields/KeyValueField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,216 @@
+import { useT as e } from "../../context.js";
+import { cn as t } from "../../lib/utils.js";
+import n from "../ui/Button2.js";
+import { useField as r } from "../form/form-context.js";
+import i from "../ui/Input.js";
+import { useFieldActionContext as a } from "../schema/field-actions.js";
+import ee from "../schema/FieldWrapper.js";
+import o from "./ItemActionButton.js";
+import { useItemMoves as s, useRunItemAction as c } from "./item-actions.js";
+import { fieldIds as l, moveRepeaterItem as te, reorderedItemKeys as ne, resolveItemAction as u } from "@alfakit/core";
+import { Fragment as re, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createVNode as g, defineComponent as _, normalizeClass as ie, openBlock as v, ref as ae, renderList as oe, toDisplayString as y, unref as b, withCtx as x } from "vue";
+import { ChevronDownIcon as S, ChevronUpIcon as C } from "@lucide/vue";
+//#region src/components/fields/KeyValueField.vue?vue&type=script&setup=true&lang.ts
+var w = {
+	"aria-live": "polite",
+	"aria-atomic": "true",
+	class: "sr-only",
+	"data-slot": "item-move-status"
+}, se = ["aria-labelledby", "aria-describedby"], ce = { class: "bg-muted/50 text-muted-foreground text-xs" }, le = {
+	key: 0,
+	class: "w-16"
+}, ue = { class: "px-3 py-2 text-start font-medium" }, de = { class: "px-3 py-2 text-start font-medium" }, fe = {
+	key: 1,
+	class: "w-10"
+}, pe = [
+	"data-index",
+	"draggable",
+	"onDragstart",
+	"onDrop"
+], me = {
+	key: 0,
+	class: "p-1.5"
+}, T = { class: "flex items-center" }, E = { class: "p-1.5" }, D = { class: "p-1.5" }, O = {
+	key: 1,
+	class: "p-1.5"
+}, k = {
+	key: 0,
+	class: "border-t"
+}, A = ["colspan"], j = {
+	key: 0,
+	class: "border-t p-1.5"
+}, M = /*@__PURE__*/ _({
+	__name: "KeyValueField",
+	props: { component: {} },
+	setup(_) {
+		let M = _, { value: N, setValue: P, blur: F, error: I, id: L, disabled: R, readOnly: z, aria: B } = r(() => M.component), V = d(() => Array.isArray(N.value) ? N.value.map((e) => ({
+			key: String(e.key ?? ""),
+			value: e.value === null || e.value === void 0 ? "" : String(e.value)
+		})) : Object.entries(N.value ?? {}).map(([e, t]) => ({
+			key: e,
+			value: t == null ? "" : String(t)
+		}))), H = (e) => P(e), U = (e, t) => H(V.value.map((n, r) => r === e ? {
+			...n,
+			...t
+		} : n)), W = e(), G = a(() => M.component), he = c(G), K = d(() => u("add", M.component, void 0, {
+			label: M.component.addActionLabel,
+			icon: "plus",
+			variant: "ghost"
+		})), q = d(() => u("delete", M.component, void 0, {
+			label: W("form.remove_row", {}, "Remove row"),
+			icon: "trash-2"
+		})), J = d(() => u("reorder", M.component, void 0, {
+			label: W("form.reorder_item", {}, "Reorder"),
+			icon: "grip-vertical"
+		})), Y = d(() => M.component.deletable && !z.value && q.value !== null), X = d(() => M.component.reorderable && !z.value && !R.value && J.value !== null), Z = ae(null), Q = (e, t) => he(J.value, { items: ne(V.value.length, e, t) }, () => H(te(V.value, e, t))), $ = s(N, Q, (e) => V.value[e]?.key || null, () => V.value.length), ge = $.announcement, _e = $.container, ve = (e) => {
+			Z.value !== null && Z.value !== e && Q(Z.value, e), Z.value = null;
+		};
+		return (e, r) => (v(), f(ee, {
+			field: M.component,
+			"html-for": b(L),
+			error: b(I)
+		}, {
+			default: x(() => [h("div", {
+				ref_key: "moveContainer",
+				ref: _e,
+				class: "overflow-hidden rounded-md border"
+			}, [
+				h("span", w, y(b(ge)), 1),
+				h("table", {
+					class: "w-full text-sm",
+					"aria-labelledby": M.component.label ? b(l)(b(L)).label : void 0,
+					"aria-describedby": b(B)["aria-describedby"]
+				}, [h("thead", ce, [h("tr", null, [
+					X.value ? (v(), m("th", le)) : p("", !0),
+					h("th", ue, y(M.component.keyLabel), 1),
+					h("th", de, y(M.component.valueLabel), 1),
+					Y.value ? (v(), m("th", fe)) : p("", !0)
+				])]), h("tbody", null, [(v(!0), m(re, null, oe(V.value, (e, a) => (v(), m("tr", {
+					key: a,
+					"data-index": a,
+					draggable: X.value,
+					class: ie(b(t)("border-t", Z.value === a && "opacity-50")),
+					onDragstart: (e) => Z.value = a,
+					onDragover: r[0] ||= (e) => X.value && e.preventDefault(),
+					onDrop: (e) => ve(a),
+					onDragend: r[1] ||= (e) => Z.value = null
+				}, [
+					X.value ? (v(), m("td", me, [h("div", T, [g(n, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-xs",
+						"aria-label": b(W)("form.move_up", {}, "Move up"),
+						disabled: a === 0,
+						"data-item-move": "up",
+						onClick: (e) => b($).moveWithButton(a, a - 1)
+					}, {
+						default: x(() => [g(b(C))]),
+						_: 1
+					}, 8, [
+						"aria-label",
+						"disabled",
+						"onClick"
+					]), g(n, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-xs",
+						"aria-label": b(W)("form.move_down", {}, "Move down"),
+						disabled: a === V.value.length - 1,
+						"data-item-move": "down",
+						onClick: (e) => b($).moveWithButton(a, a + 1)
+					}, {
+						default: x(() => [g(b(S))]),
+						_: 1
+					}, 8, [
+						"aria-label",
+						"disabled",
+						"onClick"
+					])])])) : p("", !0),
+					h("td", E, [g(i, {
+						dir: "auto",
+						"model-value": e.key,
+						readonly: b(z) || !M.component.editableKeys,
+						disabled: b(R),
+						placeholder: M.component.keyPlaceholder,
+						"aria-label": M.component.keyLabel,
+						"aria-invalid": b(B)["aria-invalid"],
+						class: "h-8",
+						"onUpdate:modelValue": (e) => U(a, { key: e }),
+						onBlur: b(F)
+					}, null, 8, [
+						"model-value",
+						"readonly",
+						"disabled",
+						"placeholder",
+						"aria-label",
+						"aria-invalid",
+						"onUpdate:modelValue",
+						"onBlur"
+					])]),
+					h("td", D, [g(i, {
+						dir: "auto",
+						"model-value": e.value,
+						readonly: b(z) || !M.component.editableValues,
+						disabled: b(R),
+						placeholder: M.component.valuePlaceholder,
+						"aria-label": M.component.valueLabel,
+						"aria-invalid": b(B)["aria-invalid"],
+						class: "h-8",
+						"onUpdate:modelValue": (e) => U(a, { value: e }),
+						onBlur: b(F)
+					}, null, 8, [
+						"model-value",
+						"readonly",
+						"disabled",
+						"placeholder",
+						"aria-label",
+						"aria-invalid",
+						"onUpdate:modelValue",
+						"onBlur"
+					])]),
+					Y.value ? (v(), m("td", O, [g(o, {
+						action: q.value,
+						context: b(G),
+						args: { item: String(a) },
+						size: "sm",
+						disabled: b(R),
+						class: "text-muted-foreground",
+						onClient: (e) => H(V.value.filter((e, t) => t !== a))
+					}, null, 8, [
+						"action",
+						"context",
+						"args",
+						"disabled",
+						"onClient"
+					])])) : p("", !0)
+				], 42, pe))), 128)), V.value.length === 0 ? (v(), m("tr", k, [h("td", {
+					colspan: X.value ? 4 : 3,
+					class: "text-muted-foreground px-3 py-4 text-center text-xs"
+				}, " — ", 8, A)])) : p("", !0)])], 8, se),
+				M.component.addable && !b(z) && K.value ? (v(), m("div", j, [g(o, {
+					action: K.value,
+					context: b(G),
+					size: "sm",
+					disabled: b(R),
+					onClient: r[2] ||= (e) => H([...V.value, {
+						key: "",
+						value: ""
+					}])
+				}, null, 8, [
+					"action",
+					"context",
+					"disabled"
+				])])) : p("", !0)
+			], 512)]),
+			_: 1
+		}, 8, [
+			"field",
+			"html-for",
+			"error"
+		]));
+	}
+});
+//#endregion
+export { M as default };
+
+//# sourceMappingURL=KeyValueField.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/fields/KeyValueField.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyValueField.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","FieldWrapper","_unref","_withCtx","_createElementVNode","_toDisplayString","_createElementBlock","_createCommentVNode","_Fragment","_renderList","_normalizeClass","_createVNode","Button","Input","ItemActionButton","Button_default","Input_default","FieldWrapper_default","ItemActionButton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","_hoisted_15","_hoisted_16","KeyValueField_vue_vue_type_script_setup_true_lang_default","props","__props","useField","rows","computed","value","row","key","rowValue","update","setValue","next","patch","i","index","item","change","t","useT","context","useFieldActionContext","runItemAction","useRunItemAction","addAction","resolveItemAction","deleteAction","reorderAction","deletable","readOnly","reorderable","disabled","dragIndex","ref","move","reorderedItemKeys","from","to","moveRepeaterItem","moves","useItemMoves","moveAnnouncement","moveContainer","onRowDrop","openBlock","createBlock","unref","id","error","withCtx","createElementVNode","toDisplayString","fieldIds","aria","createElementBlock","createCommentVNode","Fragment","renderList","normalizeClass","cn","_cache","$event","createVNode","ChevronUpIcon","ChevronDownIcon","blur"],"sources":["../../../src/components/fields/KeyValueField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  fieldIds,\n  moveRepeaterItem,\n  reorderedItemKeys,\n  resolveItemAction,\n  type KeyValueSchema,\n} from '@alfakit/core'\nimport { ChevronDownIcon, ChevronUpIcon } from '@lucide/vue'\nimport { computed, ref } from 'vue'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport { useFieldActionContext } from '../schema/field-actions'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport Button from '../ui/Button.vue'\nimport Input from '../ui/Input.vue'\nimport { useT } from '../../context'\nimport ItemActionButton from './ItemActionButton.vue'\nimport { useItemMoves, useRunItemAction } from './item-actions'\n\ntype Row = { key: string; value: string }\n\n/**\n * The server stores an object; while editing we keep an ordered list of rows so keys\n * can be typed freely (including temporarily duplicate or empty keys).\n */\nconst props = defineProps<{ component: KeyValueSchema }>()\nconst { value, setValue, blur, error, id, disabled, readOnly, aria } = useField<\n  Record<string, unknown> | Row[] | null\n>(() => props.component)\n\nconst rows = computed<Row[]>(() => {\n  if (Array.isArray(value.value)) {\n    return value.value.map((row) => ({\n      key: String(row.key ?? ''),\n      value: row.value === null || row.value === undefined ? '' : String(row.value),\n    }))\n  }\n\n  return Object.entries(value.value ?? {}).map(([key, rowValue]) => ({\n    key,\n    value: rowValue === null || rowValue === undefined ? '' : String(rowValue),\n  }))\n})\n\nconst update = (next: Row[]) => setValue(next)\nconst patch = (index: number, change: Partial<Row>) =>\n  update(rows.value.map((item, i) => (i === index ? { ...item, ...change } : item)))\nconst t = useT()\n\nconst context = useFieldActionContext(() => props.component)\nconst runItemAction = useRunItemAction(context)\nconst addAction = computed(() =>\n  resolveItemAction('add', props.component, undefined, {\n    label: props.component.addActionLabel,\n    icon: 'plus',\n    variant: 'ghost',\n  }),\n)\nconst deleteAction = computed(() =>\n  resolveItemAction('delete', props.component, undefined, {\n    label: t('form.remove_row', {}, 'Remove row'),\n    icon: 'trash-2',\n  }),\n)\nconst reorderAction = computed(() =>\n  resolveItemAction('reorder', props.component, undefined, {\n    label: t('form.reorder_item', {}, 'Reorder'),\n    icon: 'grip-vertical',\n  }),\n)\nconst deletable = computed(\n  () => props.component.deletable && !readOnly.value && deleteAction.value !== null,\n)\nconst reorderable = computed(\n  () =>\n    props.component.reorderable &&\n    !readOnly.value &&\n    !disabled.value &&\n    reorderAction.value !== null,\n)\nconst dragIndex = ref<number | null>(null)\n// Moving runs the reorder action: in the browser, or on the server when customised.\nconst move = (from: number, to: number) =>\n  runItemAction(\n    reorderAction.value,\n    { items: reorderedItemKeys(rows.value.length, from, to) },\n    () => update(moveRepeaterItem(rows.value, from, to) as Row[]),\n  )\n// Move buttons: announced, one at a time, focus kept on the moved row.\nconst moves = useItemMoves(\n  value,\n  move,\n  (index) => rows.value[index]?.key || null,\n  () => rows.value.length,\n)\nconst moveAnnouncement = moves.announcement\nconst moveContainer = moves.container\nconst onRowDrop = (index: number) => {\n  if (dragIndex.value !== null && dragIndex.value !== index) move(dragIndex.value, index)\n  dragIndex.value = null\n}\n</script>\n\n<template>\n  <FieldWrapper :field=\"props.component\" :html-for=\"id\" :error=\"error\">\n    <div ref=\"moveContainer\" class=\"overflow-hidden rounded-md border\">\n      <span aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\" data-slot=\"item-move-status\">{{\n        moveAnnouncement\n      }}</span>\n      <table\n        class=\"w-full text-sm\"\n        :aria-labelledby=\"props.component.label ? fieldIds(id).label : undefined\"\n        :aria-describedby=\"aria['aria-describedby']\"\n      >\n        <thead class=\"bg-muted/50 text-muted-foreground text-xs\">\n          <tr>\n            <th v-if=\"reorderable\" class=\"w-16\" />\n            <th class=\"px-3 py-2 text-start font-medium\">{{ props.component.keyLabel }}</th>\n            <th class=\"px-3 py-2 text-start font-medium\">{{ props.component.valueLabel }}</th>\n            <th v-if=\"deletable\" class=\"w-10\" />\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            v-for=\"(row, index) in rows\"\n            :key=\"index\"\n            :data-index=\"index\"\n            :draggable=\"reorderable\"\n            :class=\"cn('border-t', dragIndex === index && 'opacity-50')\"\n            @dragstart=\"dragIndex = index\"\n            @dragover=\"reorderable && $event.preventDefault()\"\n            @drop=\"onRowDrop(index)\"\n            @dragend=\"dragIndex = null\"\n          >\n            <td v-if=\"reorderable\" class=\"p-1.5\">\n              <div class=\"flex items-center\">\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-xs\"\n                  :aria-label=\"t('form.move_up', {}, 'Move up')\"\n                  :disabled=\"index === 0\"\n                  data-item-move=\"up\"\n                  @click=\"moves.moveWithButton(index, index - 1)\"\n                  ><ChevronUpIcon\n                /></Button>\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-xs\"\n                  :aria-label=\"t('form.move_down', {}, 'Move down')\"\n                  :disabled=\"index === rows.length - 1\"\n                  data-item-move=\"down\"\n                  @click=\"moves.moveWithButton(index, index + 1)\"\n                  ><ChevronDownIcon\n                /></Button>\n              </div>\n            </td>\n            <td class=\"p-1.5\">\n              <Input\n                dir=\"auto\"\n                :model-value=\"row.key\"\n                :readonly=\"readOnly || !props.component.editableKeys\"\n                :disabled=\"disabled\"\n                :placeholder=\"props.component.keyPlaceholder\"\n                :aria-label=\"props.component.keyLabel\"\n                :aria-invalid=\"aria['aria-invalid']\"\n                class=\"h-8\"\n                @update:model-value=\"patch(index, { key: $event })\"\n                @blur=\"blur\"\n              />\n            </td>\n            <td class=\"p-1.5\">\n              <Input\n                dir=\"auto\"\n                :model-value=\"row.value\"\n                :readonly=\"readOnly || !props.component.editableValues\"\n                :disabled=\"disabled\"\n                :placeholder=\"props.component.valuePlaceholder\"\n                :aria-label=\"props.component.valueLabel\"\n                :aria-invalid=\"aria['aria-invalid']\"\n                class=\"h-8\"\n                @update:model-value=\"patch(index, { value: $event })\"\n                @blur=\"blur\"\n              />\n            </td>\n            <td v-if=\"deletable\" class=\"p-1.5\">\n              <ItemActionButton\n                :action=\"deleteAction\"\n                :context=\"context\"\n                :args=\"{ item: String(index) }\"\n                size=\"sm\"\n                :disabled=\"disabled\"\n                class=\"text-muted-foreground\"\n                @client=\"update(rows.filter((_, i) => i !== index))\"\n              />\n            </td>\n          </tr>\n          <tr v-if=\"rows.length === 0\" class=\"border-t\">\n            <td\n              :colspan=\"reorderable ? 4 : 3\"\n              class=\"text-muted-foreground px-3 py-4 text-center text-xs\"\n            >\n              —\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <div v-if=\"props.component.addable && !readOnly && addAction\" class=\"border-t p-1.5\">\n        <ItemActionButton\n          :action=\"addAction\"\n          :context=\"context\"\n          size=\"sm\"\n          :disabled=\"disabled\"\n          @client=\"update([...rows, { key: '', value: '' }])\"\n        />\n      </div>\n    </div>\n  </FieldWrapper>\n</template>\n"],"mappings":"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"}

package/dist/components/fields/ModalTablePicker.js

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

package/dist/components/fields/ModalTablePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalTablePicker.js","names":["_sfc_main","ModalTablePicker_vue_vue_type_script_setup_true_lang_default","ModalTablePicker_default"],"sources":["../../../src/components/fields/ModalTablePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ModalTableSelectResponse, ModalTableSelectSchema, TableQuery } from '@alfakit/core'\nimport {\n  FILTERS_MODAL_WIDTH_CLASSES,\n  debounce,\n  modalTablePaging,\n  toggleModalTableKey,\n} from '@alfakit/core'\nimport {\n  ArrowDownIcon,\n  ArrowUpDownIcon,\n  ArrowUpIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  SearchIcon,\n} from '@lucide/vue'\nimport { computed, onScopeDispose, ref, watch } from 'vue'\nimport { useChoice, useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { useFormStore } from '../form/form-context'\nimport TableCellContent from '../table/TableCellContent.vue'\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 DialogFooter from '../ui/DialogFooter.vue'\nimport DialogHeader from '../ui/DialogHeader.vue'\nimport DialogTitle from '../ui/DialogTitle.vue'\nimport Input from '../ui/Input.vue'\nimport Skeleton from '../ui/Skeleton.vue'\nimport Table from '../ui/Table.vue'\nimport TableBody from '../ui/TableBody.vue'\nimport TableCell from '../ui/TableCell.vue'\nimport TableHead from '../ui/TableHead.vue'\nimport TableHeader from '../ui/TableHeader.vue'\nimport TableRow from '../ui/TableRow.vue'\nimport ModalTablePickerFilters from './ModalTablePickerFilters.vue'\n\nconst props = defineProps<{ component: ModalTableSelectSchema; initial: string[] }>()\nconst emit = defineEmits<{\n  close: []\n  confirm: [keys: string[], labels: Record<string, string>]\n}>()\nconst t = useT()\nconst choice = useChoice()\nconst form = useFormStore()\nconst multiple = computed(() => Boolean(props.component.multiple))\nconst query = ref<TableQuery>({})\nconst response = ref<ModalTableSelectResponse | null>(null)\nconst failed = ref(false)\nconst loading = ref(true)\nconst draft = ref<string[]>([...props.initial])\nconst labels = ref<Record<string, string>>({})\nconst search = ref('')\nlet controller: AbortController | null = null\n\nconst load = () => {\n  controller?.abort()\n  const current = new AbortController()\n  controller = current\n  loading.value = true\n\n  form\n    .modalTable(\n      props.component.statePath,\n      props.component.tableStateIdentifier,\n      query.value,\n      current.signal,\n    )\n    .then((next) => {\n      if (!next) return\n      response.value = next\n      labels.value = { ...labels.value, ...next.labels }\n      failed.value = false\n    })\n    .catch((error: unknown) => {\n      if ((error as { name?: string }).name !== 'AbortError') failed.value = true\n    })\n    .finally(() => {\n      if (!current.signal.aborted) loading.value = false\n    })\n}\n\nwatch(query, load, { immediate: true, deep: true })\nonScopeDispose(() => controller?.abort())\n\nconst table = computed(() => response.value?.table)\nconst pushSearch = debounce((next: string) => {\n  query.value = { ...query.value, search: next || null, page: null }\n}, 400)\nonScopeDispose(() => pushSearch.cancel())\n\nconst columns = computed(() =>\n  table.value\n    ? table.value.columns.filter((column) => table.value!.visibleColumns.includes(column.name))\n    : [],\n)\nconst records = computed(() => table.value?.records ?? [])\nconst paging = computed(() => modalTablePaging(table.value?.pagination))\nconst atMax = computed(\n  () =>\n    multiple.value &&\n    props.component.maxItems != null &&\n    draft.value.length >= props.component.maxItems,\n)\nconst hasToolbar = computed(\n  () => Boolean(table.value?.searchable) || (table.value?.filters?.length ?? 0) > 0,\n)\n\nconst toggle = (key: string) => {\n  draft.value = toggleModalTableKey(draft.value, key, multiple.value, props.component.maxItems)\n}\nconst isSelectable = (key: string, selectable: boolean | undefined) =>\n  selectable === true && (draft.value.includes(key) || !atMax.value)\nconst sort = (column: string) => {\n  const direction =\n    table.value?.sort?.column === column && table.value.sort.direction === 'asc' ? 'desc' : 'asc'\n  query.value = { ...query.value, sort: column, direction, page: null }\n}\nconst ariaSortOf = (column: string) =>\n  table.value?.sort?.column === column\n    ? table.value.sort.direction === 'asc'\n      ? 'ascending'\n      : 'descending'\n    : undefined\nconst goTo = (page: number) => {\n  query.value = { ...query.value, page }\n}\nconst confirm = () =>\n  emit(\n    'confirm',\n    draft.value,\n    Object.fromEntries(\n      draft.value.filter((key) => labels.value[key]).map((key) => [key, labels.value[key]!]),\n    ),\n  )\n</script>\n\n<template>\n  <Dialog :open=\"true\" @update:open=\"(open) => !open && emit('close')\">\n    <DialogContent\n      :class=\"\n        cn(\n          'flex max-h-[90vh] flex-col gap-4',\n          FILTERS_MODAL_WIDTH_CLASSES[props.component.modalWidth ?? '3xl'] ?? 'sm:max-w-3xl',\n        )\n      \"\n      data-slot=\"modal-table-select-dialog\"\n    >\n      <DialogHeader>\n        <DialogTitle>{{ props.component.modalHeading }}</DialogTitle>\n        <!-- Escaped on the server (`Html::from()`), like action modal descriptions. -->\n        <p\n          v-if=\"props.component.modalDescription\"\n          class=\"text-muted-foreground text-sm\"\n          data-slot=\"modal-table-select-description\"\n          v-html=\"props.component.modalDescription\"\n        />\n        <DialogDescription aria-live=\"polite\">{{\n          choice('table.selected', draft.length, { count: draft.length }, ':count selected')\n        }}</DialogDescription>\n      </DialogHeader>\n      <div v-if=\"table && hasToolbar\" class=\"flex flex-col gap-3\">\n        <div v-if=\"table.searchable\" class=\"relative\">\n          <SearchIcon\n            class=\"text-muted-foreground pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2\"\n          />\n          <Input\n            type=\"search\"\n            :model-value=\"search\"\n            :aria-label=\"table.searchPlaceholder\"\n            :placeholder=\"table.searchPlaceholder\"\n            class=\"ps-8\"\n            @update:model-value=\"\n              (next) => {\n                search = String(next)\n                pushSearch(String(next))\n              }\n            \"\n          />\n        </div>\n        <ModalTablePickerFilters\n          v-if=\"(table.filters?.length ?? 0) > 0\"\n          :table=\"table\"\n          :owner=\"form\"\n          :path=\"props.component.statePath\"\n          @change=\"(filters) => (query = { ...query, filters, page: null })\"\n        />\n      </div>\n      <div class=\"min-h-0 flex-1 overflow-auto rounded-md border\" :aria-busy=\"loading\">\n        <p v-if=\"failed\" role=\"alert\" class=\"text-destructive p-6 text-center text-sm\">\n          {{ t('table_select.load_failed', {}, \"Couldn't load the records.\") }}\n        </p>\n        <div v-else-if=\"!table\" class=\"flex flex-col gap-2 p-4\" aria-hidden=\"true\">\n          <Skeleton class=\"h-8 w-full\" />\n          <Skeleton class=\"h-8 w-full\" />\n          <Skeleton class=\"h-8 w-full\" />\n        </div>\n        <p v-else-if=\"records.length === 0\" class=\"text-muted-foreground p-6 text-center text-sm\">\n          {{ table.emptyState.heading }}\n        </p>\n        <Table v-else :class=\"cn(loading && 'opacity-60')\">\n          <TableHeader>\n            <TableRow>\n              <TableHead class=\"w-10\"\n                ><span class=\"sr-only\">{{\n                  t('table.select_row', {}, 'Select row')\n                }}</span></TableHead\n              >\n              <TableHead\n                v-for=\"column in columns\"\n                :key=\"column.name\"\n                :aria-sort=\"ariaSortOf(column.name)\"\n              >\n                <button\n                  v-if=\"column.sortable\"\n                  type=\"button\"\n                  class=\"inline-flex items-center gap-1\"\n                  @click=\"sort(column.name)\"\n                >\n                  {{ column.label }}\n                  <template v-if=\"table.sort?.column === column.name\">\n                    <ArrowUpIcon v-if=\"table.sort.direction === 'asc'\" class=\"size-3.5\" />\n                    <ArrowDownIcon v-else class=\"size-3.5\" />\n                  </template>\n                  <ArrowUpDownIcon v-else class=\"text-muted-foreground size-3.5\" />\n                </button>\n                <template v-else>{{ column.label }}</template>\n              </TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            <TableRow\n              v-for=\"record in records\"\n              :key=\"String(record.key)\"\n              :data-state=\"draft.includes(String(record.key)) ? 'selected' : undefined\"\n              :class=\"cn(isSelectable(String(record.key), record.selectable) && 'cursor-pointer')\"\n              @click=\"\n                isSelectable(String(record.key), record.selectable) && toggle(String(record.key))\n              \"\n            >\n              <TableCell class=\"w-10\" @click.stop>\n                <Checkbox\n                  v-if=\"multiple\"\n                  :model-value=\"draft.includes(String(record.key))\"\n                  :disabled=\"!isSelectable(String(record.key), record.selectable)\"\n                  :aria-label=\"\n                    t(\n                      'table_select.select_record',\n                      { label: labels[String(record.key)] ?? String(record.key) },\n                      'Select :label',\n                    )\n                  \"\n                  @update:model-value=\"toggle(String(record.key))\"\n                />\n                <input\n                  v-else\n                  type=\"radio\"\n                  :name=\"`${props.component.statePath}-picker`\"\n                  class=\"accent-primary size-4\"\n                  :checked=\"draft.includes(String(record.key))\"\n                  :disabled=\"!isSelectable(String(record.key), record.selectable)\"\n                  :aria-label=\"\n                    t(\n                      'table_select.select_record',\n                      { label: labels[String(record.key)] ?? String(record.key) },\n                      'Select :label',\n                    )\n                  \"\n                  @change=\"toggle(String(record.key))\"\n                />\n              </TableCell>\n              <TableCell v-for=\"column in columns\" :key=\"column.name\">\n                <TableCellContent\n                  v-if=\"record.cells[column.name]\"\n                  :column=\"column\"\n                  :cell=\"record.cells[column.name]!\"\n                  :record-key=\"record.key\"\n                  token=\"\"\n                  :component=\"`picker:${props.component.statePath}`\"\n                />\n              </TableCell>\n            </TableRow>\n          </TableBody>\n        </Table>\n      </div>\n      <p v-if=\"atMax\" class=\"text-muted-foreground text-sm\" role=\"status\">\n        {{\n          choice(\n            'table_select.max_reached',\n            props.component.maxItems ?? 0,\n            { count: props.component.maxItems ?? 0 },\n            'You can select up to :count records.',\n          )\n        }}\n      </p>\n      <DialogFooter class=\"items-center sm:justify-between\">\n        <nav\n          v-if=\"paging\"\n          class=\"flex items-center gap-2\"\n          :aria-label=\"t('pagination', {}, 'Pagination')\"\n        >\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"icon-sm\"\n            :disabled=\"!paging.hasPrevious || loading\"\n            :aria-label=\"t('table.previous', {}, 'Previous')\"\n            @click=\"goTo(paging.page - 1)\"\n            ><ChevronLeftIcon class=\"rtl:rotate-180\"\n          /></Button>\n          <span class=\"text-muted-foreground text-sm\">{{\n            paging.total !== undefined\n              ? t(\n                  'table.showing',\n                  { first: paging.from, last: paging.to, total: paging.total },\n                  'Showing :first–:last of :total',\n                )\n              : `${paging.from}–${paging.to}`\n          }}</span>\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"icon-sm\"\n            :disabled=\"!paging.hasNext || loading\"\n            :aria-label=\"t('table.next', {}, 'Next')\"\n            @click=\"goTo(paging.page + 1)\"\n            ><ChevronRightIcon class=\"rtl:rotate-180\"\n          /></Button>\n        </nav>\n        <span v-else />\n        <div class=\"flex gap-2\">\n          <Button v-if=\"draft.length > 0\" type=\"button\" variant=\"ghost\" @click=\"draft = []\">{{\n            t('table_select.clear', {}, 'Clear selection')\n          }}</Button>\n          <Button type=\"button\" variant=\"outline\" @click=\"emit('close')\">{{\n            t('cancel', {}, 'Cancel')\n          }}</Button>\n          <Button type=\"button\" @click=\"confirm\">{{\n            props.component.modalSubmitActionLabel ?? t('table_select.confirm', {}, 'Select')\n          }}</Button>\n        </div>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n"],"mappings":""}

package/dist/components/fields/ModalTablePicker.vue.d.ts

@@ -0,0 +1,14 @@
+import type { ModalTableSelectSchema } from '@alfakit/core';
+type __VLS_Props = {
+    component: ModalTableSelectSchema;
+    initial: string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    confirm: (keys: string[], labels: Record<string, string>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onConfirm?: ((keys: string[], labels: Record<string, string>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=ModalTablePicker.vue.d.ts.map

package/dist/components/fields/ModalTablePicker.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalTablePicker.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/ModalTablePicker.vue"],"names":[],"mappings":"AA6VA,OAAO,KAAK,EAA4B,sBAAsB,EAAc,MAAM,eAAe,CAAA;AAsCjG,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,sBAAsB,CAAC;IAAC,OAAO,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;;;;;;;;AAu3B5E,wBAOG"}