@alfakit/vue 0.1.0 → 0.1.2

package/dist/components/form/FormBlock.vue_vue_type_script_setup_true_lang.js

@@ -1,102 +1,106 @@
-import { useActionRunner as e, useAlfakitProps as t, usePageSchema as n, usePanel as r, useT as i } from "../../context.js";
-import { useStore as a } from "../../composables/use-store.js";
-import o from "../actions/ActionList.js";
-import { provideForm as s } from "./form-context.js";
-import c from "../schema/SchemaRenderer.js";
-import { showToast as ee } from "../notifications/flash-toasts.js";
-import { FormStore as te, applyFormRefresh as ne, formActionsVisible as re, formIdentity as l, formRefreshFor as u, isImplicitSubmit as d, isLeavingVisit as f, pageFlash as p, pageFormName as m, registerConflictForm as h, registerFormSubmitter as ie, registerPageForm as g, resolvePartialProps as _, wizardProgressStore as v } from "@alfakit/core";
-import { router as y } from "@inertiajs/vue3";
-import { computed as b, createCommentVNode as x, createElementBlock as S, createElementVNode as ae, createVNode as C, defineComponent as w, onBeforeUnmount as T, onMounted as E, onScopeDispose as oe, openBlock as D, unref as O, watch as k, withModifiers as A } from "vue";
+import { useActionRunner as e, useAlfakitProps as t, usePageSchema as ee, usePanel as n, useT as r } from "../../context.js";
+import { useStore as i } from "../../composables/use-store.js";
+import te from "../actions/ActionList.js";
+import { provideForm as ne } from "./form-context.js";
+import re from "../schema/SchemaRenderer.js";
+import { showToast as ie } from "../notifications/flash-toasts.js";
+import { FormStore as ae, applyFormRefresh as oe, formActionsVisible as a, formIdentity as o, formRefreshFor as s, isImplicitSubmit as c, isLeavingVisit as l, pageFlash as u, pageFormName as d, registerConflictForm as f, registerFormSubmitter as p, registerPageForm as m, resolvePartialProps as h, shouldResyncForm as se, wizardProgressStore as g } from "@alfakit/core";
+import { router as _ } from "@inertiajs/vue3";
+import { computed as v, createCommentVNode as ce, createElementBlock as y, createElementVNode as le, createVNode as b, defineComponent as x, onBeforeUnmount as S, onMounted as C, onScopeDispose as ue, openBlock as w, unref as T, watch as E, withModifiers as D } from "vue";
 //#region src/components/form/FormBlock.vue?vue&type=script&setup=true&lang.ts
-var j = ["disabled"], M = {
+var O = ["disabled"], k = {
 	key: 0,
 	"data-slot": "form-actions",
 	class: "border-t pt-6"
-}, N = /*@__PURE__*/ w({
+}, A = /*@__PURE__*/ x({
 	__name: "FormBlock",
 	props: { block: {} },
-	setup(w) {
-		let N = w, P = r(), F = n(), I = t(), L = e(), R = i(), z = b(() => F.value?.token ?? ""), B = new te(N.block, {
-			token: z.value,
-			component: N.block.component,
-			refreshUrl: P.value.endpoints.schemaRefresh,
-			optionsUrl: P.value.endpoints.schemaOptions,
-			validateUrl: P.value.endpoints.schemaValidate,
-			onNotifications: (e) => e.forEach((e) => ee(e)),
+	setup(x) {
+		let A = x, j = n(), M = ee(), N = t(), P = e(), F = r(), I = v(() => M.value?.token ?? ""), L = new ae(A.block, {
+			token: I.value,
+			component: A.block.component,
+			refreshUrl: j.value.endpoints.schemaRefresh,
+			optionsUrl: j.value.endpoints.schemaOptions,
+			validateUrl: j.value.endpoints.schemaValidate,
+			onNotifications: (e) => e.forEach((e) => ie(e)),
 			onRefreshed: () => {
-				N.block.liveFilters && y.reload({ only: _(["page"]) });
+				A.block.liveFilters && _.reload({ only: h(["page"]) });
 			}
 		});
-		s(B);
-		let V;
-		E(() => {
-			let e = m(N.block.component);
-			e && (V = g(e, B));
+		ne(L);
+		let R;
+		C(() => {
+			let e = d(A.block.component);
+			e && (R = m(e, L));
 		});
-		let H;
-		E(() => {
-			N.block.component === "form" && (H = h(B));
-		}), T(() => H?.());
-		let U;
-		E(() => {
-			U = ie(N.block.component, (e, t) => Q(e, t));
-		}), T(() => {
-			V?.(), U?.();
-		}), k(() => l(F.value, N.block), () => B.fill(N.block)), k(z, (e) => B.setToken(e));
-		let W = null, G = !1;
-		k(() => N.block, (e) => {
-			G && (G = !1, B.fill(e));
-		}), k(() => I.value.errors, (e) => B.setErrors(e ?? {}), { immediate: !0 });
-		let K = a(B.store), q = b(() => ({
-			token: z.value,
+		let z;
+		C(() => {
+			A.block.component === "form" && (z = f(L));
+		}), S(() => z?.());
+		let B;
+		C(() => {
+			B = p(A.block.component, (e, t) => Z(e, t));
+		}), S(() => {
+			R?.(), B?.();
+		}), E(() => o(M.value, A.block), () => L.fill(A.block)), E(I, (e) => L.setToken(e));
+		let V = null, H = !1, U = !1, W = null;
+		E(() => A.block, (e) => {
+			H && (H = !1, L.fill(e)), U && (U = !1, L.isDirty || L.fill(e));
+		}), E(() => N.value.errors, (e) => L.setErrors(e ?? {}), { immediate: !0 });
+		let G = i(L.store), K = v(() => ({
+			token: I.value,
 			component: "page"
-		})), J = !1, Y = b(() => N.block.actions.map((e) => ({
+		})), q = !1, J = v(() => A.block.actions.map((e) => ({
 			...e,
 			hasModal: !1
-		}))), X = b(() => Y.value[0]), se = a(v(B)), Z = b(() => re(N.block, se.value)), Q = async (e, t) => {
-			if (e.url && !e.hasAction) return L.trigger(e, t);
-			J = !0, W = N.block, B.setProcessing(!0), L.execute(e, t, B.state.values);
-		}, $ = null, ce = y.on("start", (e) => {
+		}))), Y = v(() => J.value[0]), de = i(g(L)), X = v(() => a(A.block, de.value)), Z = async (e, t) => {
+			if (e.url && !e.hasAction) return P.trigger(e, t);
+			q = !0, V = A.block, L.setProcessing(!0), P.execute(e, t, L.state.values);
+		}, Q = null, fe = _.on("start", (e) => {
 			let t = e.detail.visit;
-			J && !$ && t.method !== "get" && ($ = t.id);
-		}), le = y.on("success", (e) => {
-			let t = $;
-			t && (e.detail.visitId ?? t) === t && p(e.detail.page).alfakitAction?.status !== "halted" && (N.block === W ? G = !0 : B.fill(N.block));
-		}), ue = y.on("success", (e) => {
-			let t = u(p(e.detail.page), N.block.component);
-			t && ne(B, t);
-		}), de = y.on("finish", (e) => {
-			$ && e.detail.visit.id !== $ || (B.setProcessing(!1), J = !1, $ = null);
-		}), fe = y.on("before", (e) => {
-			P.value.unsavedChangesAlerts && B.isDirty && !J && f(e.detail.visit) && !window.confirm(R("unsaved_changes", {}, "You have unsaved changes. Leave anyway?")) && e.preventDefault();
+			q && !Q && t.method !== "get" && (Q = t.id), t.method !== "get" && (W = A.block);
+		}), pe = _.on("success", (e) => {
+			let t = Q;
+			if (!t && se(u(e.detail.page), L)) {
+				A.block === W ? U = !0 : L.fill(A.block);
+				return;
+			}
+			t && (e.detail.visitId ?? t) === t && u(e.detail.page).alfakitAction?.status !== "halted" && (A.block === V ? H = !0 : L.fill(A.block));
+		}), me = _.on("success", (e) => {
+			let t = s(u(e.detail.page), A.block.component);
+			t && oe(L, t);
+		}), he = _.on("finish", (e) => {
+			Q && e.detail.visit.id !== Q || (L.setProcessing(!1), q = !1, Q = null);
+		}), ge = _.on("before", (e) => {
+			j.value.unsavedChangesAlerts && L.isDirty && !q && l(e.detail.visit) && !window.confirm(F("unsaved_changes", {}, "You have unsaved changes. Leave anyway?")) && e.preventDefault();
 		});
-		oe(() => {
-			ce(), le(), ue(), de(), fe(), B.destroy();
+		ue(() => {
+			fe(), pe(), me(), he(), ge(), L.destroy();
 		});
-		let pe = () => {
-			X.value && Z.value && Q(X.value, q.value);
-		}, me = (e) => {
-			X.value && Z.value && d(e, e.currentTarget) && (e.preventDefault(), Q(X.value, q.value));
+		let $ = () => {
+			Y.value && X.value && Z(Y.value, K.value);
+		}, _e = (e) => {
+			Y.value && X.value && c(e, e.currentTarget) && (e.preventDefault(), Z(Y.value, K.value));
 		};
-		return (e, t) => (D(), S("form", {
+		return (e, t) => (w(), y("form", {
 			"data-slot": "form-block",
 			class: "flex flex-col gap-6",
-			onSubmit: A(pe, ["prevent"]),
-			onKeydown: me
-		}, [ae("fieldset", {
-			disabled: O(K).processing || N.block.operation === "view",
+			onSubmit: D($, ["prevent"]),
+			onKeydown: _e
+		}, [le("fieldset", {
+			disabled: T(G).processing || A.block.operation === "view",
 			class: "contents"
-		}, [C(c, {
-			components: O(K).components,
-			columns: O(K).columns
-		}, null, 8, ["components", "columns"])], 8, j), Y.value.length > 0 && Z.value ? (D(), S("div", M, [C(o, {
-			actions: Y.value,
-			context: q.value,
-			"on-trigger": Q
-		}, null, 8, ["actions", "context"])])) : x("", !0)], 32));
+		}, [b(re, {
+			components: T(G).components,
+			columns: T(G).columns
+		}, null, 8, ["components", "columns"])], 8, O), J.value.length > 0 && X.value ? (w(), y("div", k, [b(te, {
+			actions: J.value,
+			context: K.value,
+			"on-trigger": Z
+		}, null, 8, ["actions", "context"])])) : ce("", !0)], 32));
 	}
 });
 //#endregion
-export { N as default };
+export { A as default };
 
 //# sourceMappingURL=FormBlock.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/form/FormBlock.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormBlock.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_withModifiers","_createElementVNode","_unref","_createVNode","SchemaRenderer","ActionList","_createCommentVNode","ActionList_default","SchemaRenderer_default","_hoisted_1","_hoisted_2","FormBlock_vue_vue_type_script_setup_true_lang_default","props","__props","panel","usePanel","page","usePageSchema","pageProps","useAlfakitProps","runner","useActionRunner","t","useT","token","computed","store","FormStore","notifications","showToast","n","router","resolvePartialProps","unregisterPageForm","name","pageFormName","registerPageForm","unregisterConflictForm","onMounted","registerConflictForm","onBeforeUnmount","unregisterSubmitter","registerFormSubmitter","trigger","action","ctx","watch","formIdentity","value","submittedBlock","refillPending","block","errors","state","useStore","context","submitting","actions","primary","progress","wizardProgressStore","showActions","formActionsVisible","submitVisit","offStart","visit","event","offSuccess","id","pageFlash","offRefresh","refresh","formRefreshFor","applyFormRefresh","offFinish","offBefore","isLeavingVisit","onSubmit","onKeydown","isImplicitSubmit","openBlock","createElementBlock","withModifiers","createElementVNode","unref","createVNode","createCommentVNode"],"sources":["../../../src/components/form/FormBlock.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ActionContext, ActionSchema, FormBlock as FormBlockSchema } from '@alfakit/core'\nimport {\n  FormStore,\n  applyFormRefresh,\n  formActionsVisible,\n  formIdentity,\n  formRefreshFor,\n  isImplicitSubmit,\n  isLeavingVisit,\n  pageFlash,\n  pageFormName,\n  registerConflictForm,\n  registerFormSubmitter,\n  registerPageForm,\n  resolvePartialProps,\n  wizardProgressStore,\n} from '@alfakit/core'\nimport { router } from '@inertiajs/vue3'\nimport { computed, onBeforeUnmount, onMounted, onScopeDispose, watch } from 'vue'\nimport { useStore } from '../../composables/use-store'\nimport { useActionRunner, useAlfakitProps, usePageSchema, usePanel, useT } from '../../context'\nimport ActionList from '../actions/ActionList.vue'\nimport SchemaRenderer from '../schema/SchemaRenderer.vue'\nimport { showToast } from '../notifications/flash-toasts'\nimport { provideForm } from './form-context'\n\n/**\n * A page form: its state lives in a FormStore, and its buttons are actions that post the\n * current values through the action endpoint.\n */\nconst props = defineProps<{ block: FormBlockSchema }>()\n\nconst panel = usePanel()\nconst page = usePageSchema()\nconst pageProps = useAlfakitProps()\nconst runner = useActionRunner()\nconst t = useT()\nconst token = computed(() => page.value?.token ?? '')\n\nconst store = new FormStore(props.block, {\n  token: token.value,\n  component: props.block.component,\n  refreshUrl: panel.value.endpoints.schemaRefresh,\n  optionsUrl: panel.value.endpoints.schemaOptions,\n  validateUrl: panel.value.endpoints.schemaValidate,\n  // A halted wizard step shows what its hook sent.\n  onNotifications: (notifications) => notifications.forEach((n) => showToast(n)),\n  // Live dashboard filters are applied by the refresh; the widgets reload to follow.\n  onRefreshed: () => {\n    if (props.block.liveFilters) router.reload({ only: resolvePartialProps(['page']) })\n  },\n})\n\nprovideForm(store)\n\n// Named forms of custom pages (`<PageForm name>`) publish their store for page method calls\n// (browser only: mounted hooks never run during a server render).\nlet unregisterPageForm: (() => void) | undefined\n\nonMounted(() => {\n  const name = pageFormName(props.block.component)\n\n  if (name) unregisterPageForm = registerPageForm(name, store)\n})\n\n// Edit pages: the conflict banner diffs and merges the main form (`detectConflicts()`).\nlet unregisterConflictForm: (() => void) | undefined\n\nonMounted(() => {\n  if (props.block.component === 'form') unregisterConflictForm = registerConflictForm(store)\n})\n\nonBeforeUnmount(() => unregisterConflictForm?.())\n\n// Buttons elsewhere with `formId('form')` (a header \"Save\") submit through this form.\nlet unregisterSubmitter: (() => void) | undefined\n\nonMounted(() => {\n  unregisterSubmitter = registerFormSubmitter(props.block.component, (action, ctx) =>\n    trigger(action, ctx),\n  )\n})\n\nonBeforeUnmount(() => {\n  unregisterPageForm?.()\n  unregisterSubmitter?.()\n})\n\n// The store survives reloads of the same form (table sorting/paging, polling,\n// relation-manager actions all deliver a new `block` object); only a different form\n// identity starts from server state again. The token is re-issued per response, so it\n// is swapped in place instead of being part of the identity.\nwatch(\n  () => formIdentity(page.value, props.block),\n  () => store.fill(props.block),\n)\n\nwatch(token, (value) => store.setToken(value))\n\n// After this form's own successful submit, refill from the server's new state. The new\n// block may arrive before or after Inertia's `success` event, so handle both orders.\nlet submittedBlock: FormBlockSchema | null = null\nlet refillPending = false\n\nwatch(\n  () => props.block,\n  (block) => {\n    if (refillPending) {\n      refillPending = false\n      store.fill(block)\n    }\n  },\n)\n\nwatch(\n  () => pageProps.value.errors,\n  (errors) => store.setErrors((errors as Record<string, string>) ?? {}),\n  { immediate: true },\n)\n\nconst state = useStore(store.store)\nconst context = computed<ActionContext>(() => ({ token: token.value, component: 'page' }))\nlet submitting = false\n\nconst actions = computed<ActionSchema[]>(() =>\n  props.block.actions.map((action) => ({ ...action, hasModal: false })),\n)\nconst primary = computed(() => actions.value[0])\n\n// Wizard forms (`HasWizard` pages) show their buttons on the last step only.\nconst progress = useStore(wizardProgressStore(store))\nconst showActions = computed(() => formActionsVisible(props.block, progress.value))\n\nconst trigger = async (action: ActionSchema, ctx: ActionContext) => {\n  if (action.url && !action.hasAction) {\n    return runner.trigger(action, ctx)\n  }\n\n  submitting = true\n  submittedBlock = props.block\n  store.setProcessing(true)\n  runner.execute(action, ctx, store.state.values)\n}\n\n// Track this form's own submit visit so unrelated reloads finishing meanwhile (polling,\n// relation-manager paging) neither end its processing state nor count as its success.\nlet submitVisit: string | null = null\n\nconst offStart = router.on('start', (event) => {\n  const visit = event.detail.visit\n\n  if (submitting && !submitVisit && visit.method !== 'get') {\n    submitVisit = visit.id\n  }\n})\n\nconst offSuccess = router.on('success', (event) => {\n  const id = submitVisit\n\n  if (!id || (event.detail.visitId ?? id) !== id) return\n\n  // A halted action (rate limit, `halt()`) saved nothing: keep what the user typed.\n  if (pageFlash(event.detail.page).alfakitAction?.status === 'halted') return\n\n  if (props.block !== submittedBlock) {\n    store.fill(props.block)\n  } else {\n    refillPending = true\n  }\n})\n\n// `refreshFormData([...])`: an action changed the record; copy those fields in.\nconst offRefresh = router.on('success', (event) => {\n  const refresh = formRefreshFor(pageFlash(event.detail.page), props.block.component)\n\n  if (refresh) applyFormRefresh(store, refresh)\n})\n\nconst offFinish = router.on('finish', (event) => {\n  if (submitVisit && event.detail.visit.id !== submitVisit) return\n\n  store.setProcessing(false)\n  submitting = false\n  submitVisit = null\n})\n\nconst offBefore = router.on('before', (event) => {\n  if (!panel.value.unsavedChangesAlerts) {\n    return\n  }\n\n  if (\n    store.isDirty &&\n    !submitting &&\n    isLeavingVisit(event.detail.visit) &&\n    !window.confirm(t('unsaved_changes', {}, 'You have unsaved changes. Leave anyway?'))\n  ) {\n    event.preventDefault()\n  }\n})\n\nonScopeDispose(() => {\n  offStart()\n  offSuccess()\n  offRefresh()\n  offFinish()\n  offBefore()\n  store.destroy()\n})\n\nconst onSubmit = () => {\n  if (primary.value && showActions.value) {\n    void trigger(primary.value, context.value)\n  }\n}\n\n// Enter in a text field runs the primary action (actions are type=\"button\").\nconst onKeydown = (event: KeyboardEvent) => {\n  if (\n    primary.value &&\n    showActions.value &&\n    isImplicitSubmit(event, event.currentTarget as HTMLFormElement)\n  ) {\n    event.preventDefault()\n    void trigger(primary.value, context.value)\n  }\n}\n</script>\n\n<template>\n  <form\n    data-slot=\"form-block\"\n    class=\"flex flex-col gap-6\"\n    @submit.prevent=\"onSubmit\"\n    @keydown=\"onKeydown\"\n  >\n    <fieldset :disabled=\"state.processing || props.block.operation === 'view'\" class=\"contents\">\n      <SchemaRenderer :components=\"state.components\" :columns=\"state.columns\" />\n    </fieldset>\n    <div v-if=\"actions.length > 0 && showActions\" data-slot=\"form-actions\" class=\"border-t pt-6\">\n      <ActionList :actions=\"actions\" :context=\"context\" :on-trigger=\"trigger\" />\n    </div>\n  </form>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EA+BA,IAAMc,IAAQC,GAERC,IAAQC,EAAS,GACjBC,IAAOC,EAAc,GACrBC,IAAYC,EAAgB,GAC5BC,IAASC,EAAgB,GACzBC,IAAIC,EAAK,GACTC,IAAQC,QAAeT,EAAK,OAAO,SAAS,EAAE,GAE9CU,IAAQ,IAAIC,GAAUf,EAAM,OAAO;GACvC,OAAOY,EAAM;GACb,WAAWZ,EAAM,MAAM;GACvB,YAAYE,EAAM,MAAM,UAAU;GAClC,YAAYA,EAAM,MAAM,UAAU;GAClC,aAAaA,EAAM,MAAM,UAAU;GAEnC,kBAAkB,MAAkBc,EAAc,SAAS,MAAMC,GAAUC,CAAC,CAAC;GAE7E,mBAAmB;IACjB,AAAIlB,EAAM,MAAM,eAAamB,EAAO,OAAO,EAAE,MAAMC,EAAoB,CAAC,MAAM,CAAC,EAAE,CAAC;GACpF;EACF,CAAC;EAED,EAAYN,CAAK;EAIjB,IAAIO;EAEJ,QAAgB;GACd,IAAMC,IAAOC,EAAavB,EAAM,MAAM,SAAS;GAE/C,AAAIsB,MAAM,IAAqBE,EAAiBF,GAAMR,CAAK;EAC7D,CAAC;EAGD,IAAIW;EAMJ,AAJAC,QAAgB;GACd,AAAI1B,EAAM,MAAM,cAAc,WAAQ,IAAyB2B,EAAqBb,CAAK;EAC3F,CAAC,GAEDc,QAAsBH,IAAyB,CAAC;EAGhD,IAAII;EAsBJ,AApBAH,QAAgB;GACd,IAAsBI,GAAsB9B,EAAM,MAAM,YAAY,GAAQ,MAC1E+B,EAAQC,GAAQC,CAAG,CACrB;EACF,CAAC,GAEDL,QAAsB;GAEpB,AADAP,IAAqB,GACrBQ,IAAsB;EACxB,CAAC,GAMDK,QACQC,EAAa/B,EAAK,OAAOJ,EAAM,KAAK,SACpCc,EAAM,KAAKd,EAAM,KAAK,CAC9B,GAEAkC,EAAMtB,IAAQ,MAAUE,EAAM,SAASsB,CAAK,CAAC;EAI7C,IAAIC,IAAyC,MACzCC,IAAgB;EAYpB,AAVAJ,QACQlC,EAAM,QACX,MAAU;GACT,AAAIsC,MACF,IAAgB,IAChBxB,EAAM,KAAKyB,CAAK;EAEpB,CACF,GAEAL,QACQ5B,EAAU,MAAM,SACrB,MAAWQ,EAAM,UAAW0B,KAAqC,CAAC,CAAC,GACpE,EAAE,WAAW,GAAK,CACpB;EAEA,IAAMC,IAAQC,EAAS5B,EAAM,KAAK,GAC5B6B,IAAU9B,SAA+B;GAAE,OAAOD,EAAM;GAAO,WAAW;EAAO,EAAE,GACrFgC,IAAa,IAEXC,IAAUhC,QACdb,EAAM,MAAM,QAAQ,KAAK,OAAY;GAAE,GAAGgC;GAAQ,UAAU;EAAM,EAAE,CACtE,GACMc,IAAUjC,QAAegC,EAAQ,MAAM,EAAE,GAGzCE,KAAWL,EAASM,EAAoBlC,CAAK,CAAC,GAC9CmC,IAAcpC,QAAeqC,GAAmBlD,EAAM,OAAO+C,GAAS,KAAK,CAAC,GAE5EhB,IAAU,OAAO,GAAsB,MAAuB;GAClE,IAAIC,EAAO,OAAO,CAACA,EAAO,WACxB,OAAOxB,EAAO,QAAQwB,GAAQC,CAAG;GAMnC,AAHA,IAAa,IACb,IAAiBjC,EAAM,OACvBc,EAAM,cAAc,EAAI,GACxBN,EAAO,QAAQwB,GAAQC,GAAKnB,EAAM,MAAM,MAAM;EAChD,GAIIqC,IAA6B,MAE3BC,KAAWjC,EAAO,GAAG,UAAU,MAAU;GAC7C,IAAMkC,IAAQC,EAAM,OAAO;GAE3B,AAAIV,KAAc,CAACO,KAAeE,EAAM,WAAW,UACjD,IAAcA,EAAM;EAExB,CAAC,GAEKE,KAAapC,EAAO,GAAG,YAAY,MAAU;GACjD,IAAMqC,IAAKL;GAEX,AAAKK,MAAOF,EAAM,OAAO,WAAWE,OAAQA,KAGxCC,EAAUH,EAAM,OAAO,IAAI,CAAC,CAAC,eAAe,WAAW,aAEvDtD,EAAM,UAAUqC,IAGlB,IAAgB,KAFhBvB,EAAM,KAAKd,EAAM,KAAK;EAI1B,CAAC,GAGK0D,KAAavC,EAAO,GAAG,YAAY,MAAU;GACjD,IAAMwC,IAAUC,EAAeH,EAAUH,EAAM,OAAO,IAAI,GAAGtD,EAAM,MAAM,SAAS;GAElF,AAAI2D,KAASE,GAAiB/C,GAAO6C,CAAO;EAC9C,CAAC,GAEKG,KAAY3C,EAAO,GAAG,WAAW,MAAU;GAC/C,AAAIgC,KAAeG,EAAM,OAAO,MAAM,OAAOH,MAE7CrC,EAAM,cAAc,EAAK,GACzB,IAAa,IACb,IAAc;EAChB,CAAC,GAEKiD,KAAY5C,EAAO,GAAG,WAAW,MAAU;GAC/C,AAAKjB,EAAM,MAAM,wBAKfY,EAAM,WACN,CAAC8B,KACDoB,EAAeV,EAAM,OAAO,KAAK,KACjC,CAAC,OAAO,QAAQ5C,EAAE,mBAAmB,CAAC,GAAG,yCAAyC,CAAC,KAEnF4C,EAAM,eAAe;EAEzB,CAAC;EAED,SAAqB;GAMnB,AALAF,GAAS,GACTG,GAAW,GACXG,GAAW,GACXI,GAAU,GACVC,GAAU,GACVjD,EAAM,QAAQ;EAChB,CAAC;EAED,IAAMmD,WAAiB;GACrB,AAAInB,EAAQ,SAASG,EAAY,SAC/BlB,EAAae,EAAQ,OAAOH,EAAQ,KAAK;EAE7C,GAGMuB,MAAa,MAAyB;GAC1C,AACEpB,EAAQ,SACRG,EAAY,SACZkB,EAAiBb,GAAOA,EAAM,aAAgC,MAE9DA,EAAM,eAAe,GACrBvB,EAAae,EAAQ,OAAOH,EAAQ,KAAK;EAE7C;oBAIEzD,EAAA,GAAAC,EAYO,QAAA;GAXL,aAAU;GACV,OAAM;GACL,UAAMC,EAAU6E,IAAQ,CAAA,SAAA,CAAA;GACf;EAEV5E,GAAAA,CAAAA,GAEW,YAAA;GAFA,UAAUC,EAAAmD,CAAA,CAAK,CAAC,cAAczC,EAAM,MAAM,cAAS;GAAa,OAAM;EAC/ET,GAAAA,CAAAA,EAA0EC,GAAA;GAAzD,YAAYF,EAAAmD,CAAA,CAAK,CAAC;GAAa,SAASnD,EAAAmD,CAAA,CAAK,CAAC;EAEtD,GAAA,MAAA,GAAA,CAAA,cAAA,SAAA,CAAA,CAAA,GAAA,GAAA5C,CAAA,GAAAgD,EAAA,MAAQ,SAAM,KAAQI,EAAA,SAAjC/D,EAAA,GAAAC,EAEM,OAFNW,GAEM,CADJP,EAA0EE,GAAA;GAA7D,SAASoD,EAAA;GAAU,SAASF,EAAA;GAAU,cAAYZ"}
+{"version":3,"file":"FormBlock.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_withModifiers","_createElementVNode","_unref","_createVNode","SchemaRenderer","ActionList","_createCommentVNode","ActionList_default","SchemaRenderer_default","_hoisted_1","_hoisted_2","FormBlock_vue_vue_type_script_setup_true_lang_default","props","__props","panel","usePanel","page","usePageSchema","pageProps","useAlfakitProps","runner","useActionRunner","t","useT","token","computed","store","FormStore","notifications","showToast","n","router","resolvePartialProps","unregisterPageForm","name","pageFormName","registerPageForm","unregisterConflictForm","onMounted","registerConflictForm","onBeforeUnmount","unregisterSubmitter","registerFormSubmitter","trigger","action","ctx","watch","formIdentity","value","submittedBlock","refillPending","resyncPending","visitBlock","block","errors","state","useStore","context","submitting","actions","primary","progress","wizardProgressStore","showActions","formActionsVisible","submitVisit","offStart","visit","event","offSuccess","id","shouldResyncForm","pageFlash","offRefresh","refresh","formRefreshFor","applyFormRefresh","offFinish","offBefore","isLeavingVisit","onSubmit","onKeydown","isImplicitSubmit","openBlock","createElementBlock","withModifiers","createElementVNode","unref","createVNode","createCommentVNode"],"sources":["../../../src/components/form/FormBlock.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ActionContext, ActionSchema, FormBlock as FormBlockSchema } from '@alfakit/core'\nimport {\n  FormStore,\n  applyFormRefresh,\n  formActionsVisible,\n  formIdentity,\n  formRefreshFor,\n  isImplicitSubmit,\n  isLeavingVisit,\n  pageFlash,\n  pageFormName,\n  registerConflictForm,\n  registerFormSubmitter,\n  registerPageForm,\n  resolvePartialProps,\n  shouldResyncForm,\n  wizardProgressStore,\n} from '@alfakit/core'\nimport { router } from '@inertiajs/vue3'\nimport { computed, onBeforeUnmount, onMounted, onScopeDispose, watch } from 'vue'\nimport { useStore } from '../../composables/use-store'\nimport { useActionRunner, useAlfakitProps, usePageSchema, usePanel, useT } from '../../context'\nimport ActionList from '../actions/ActionList.vue'\nimport SchemaRenderer from '../schema/SchemaRenderer.vue'\nimport { showToast } from '../notifications/flash-toasts'\nimport { provideForm } from './form-context'\n\n/**\n * A page form: its state lives in a FormStore, and its buttons are actions that post the\n * current values through the action endpoint.\n */\nconst props = defineProps<{ block: FormBlockSchema }>()\n\nconst panel = usePanel()\nconst page = usePageSchema()\nconst pageProps = useAlfakitProps()\nconst runner = useActionRunner()\nconst t = useT()\nconst token = computed(() => page.value?.token ?? '')\n\nconst store = new FormStore(props.block, {\n  token: token.value,\n  component: props.block.component,\n  refreshUrl: panel.value.endpoints.schemaRefresh,\n  optionsUrl: panel.value.endpoints.schemaOptions,\n  validateUrl: panel.value.endpoints.schemaValidate,\n  // A halted wizard step shows what its hook sent.\n  onNotifications: (notifications) => notifications.forEach((n) => showToast(n)),\n  // Live dashboard filters are applied by the refresh; the widgets reload to follow.\n  onRefreshed: () => {\n    if (props.block.liveFilters) router.reload({ only: resolvePartialProps(['page']) })\n  },\n})\n\nprovideForm(store)\n\n// Named forms of custom pages (`<PageForm name>`) publish their store for page method calls\n// (browser only: mounted hooks never run during a server render).\nlet unregisterPageForm: (() => void) | undefined\n\nonMounted(() => {\n  const name = pageFormName(props.block.component)\n\n  if (name) unregisterPageForm = registerPageForm(name, store)\n})\n\n// Edit pages: the conflict banner diffs and merges the main form (`detectConflicts()`).\nlet unregisterConflictForm: (() => void) | undefined\n\nonMounted(() => {\n  if (props.block.component === 'form') unregisterConflictForm = registerConflictForm(store)\n})\n\nonBeforeUnmount(() => unregisterConflictForm?.())\n\n// Buttons elsewhere with `formId('form')` (a header \"Save\") submit through this form.\nlet unregisterSubmitter: (() => void) | undefined\n\nonMounted(() => {\n  unregisterSubmitter = registerFormSubmitter(props.block.component, (action, ctx) =>\n    trigger(action, ctx),\n  )\n})\n\nonBeforeUnmount(() => {\n  unregisterPageForm?.()\n  unregisterSubmitter?.()\n})\n\n// The store survives reloads of the same form (table sorting/paging, polling,\n// relation-manager actions all deliver a new `block` object); only a different form\n// identity starts from server state again. The token is re-issued per response, so it\n// is swapped in place instead of being part of the identity.\nwatch(\n  () => formIdentity(page.value, props.block),\n  () => store.fill(props.block),\n)\n\nwatch(token, (value) => store.setToken(value))\n\n// After this form's own successful submit, refill from the server's new state. The new\n// block may arrive before or after Inertia's `success` event, so handle both orders.\nlet submittedBlock: FormBlockSchema | null = null\nlet refillPending = false\n// Another action succeeded and its new block has not arrived yet.\nlet resyncPending = false\n// The block when the latest non-GET visit started, to tell whether its response arrived.\nlet visitBlock: FormBlockSchema | null = null\n\nwatch(\n  () => props.block,\n  (block) => {\n    if (refillPending) {\n      refillPending = false\n      store.fill(block)\n    }\n\n    if (resyncPending) {\n      resyncPending = false\n\n      if (!store.isDirty) store.fill(block)\n    }\n  },\n)\n\nwatch(\n  () => pageProps.value.errors,\n  (errors) => store.setErrors((errors as Record<string, string>) ?? {}),\n  { immediate: true },\n)\n\nconst state = useStore(store.store)\nconst context = computed<ActionContext>(() => ({ token: token.value, component: 'page' }))\nlet submitting = false\n\nconst actions = computed<ActionSchema[]>(() =>\n  props.block.actions.map((action) => ({ ...action, hasModal: false })),\n)\nconst primary = computed(() => actions.value[0])\n\n// Wizard forms (`HasWizard` pages) show their buttons on the last step only.\nconst progress = useStore(wizardProgressStore(store))\nconst showActions = computed(() => formActionsVisible(props.block, progress.value))\n\nconst trigger = async (action: ActionSchema, ctx: ActionContext) => {\n  if (action.url && !action.hasAction) {\n    return runner.trigger(action, ctx)\n  }\n\n  submitting = true\n  submittedBlock = props.block\n  store.setProcessing(true)\n  runner.execute(action, ctx, store.state.values)\n}\n\n// Track this form's own submit visit so unrelated reloads finishing meanwhile (polling,\n// relation-manager paging) neither end its processing state nor count as its success.\nlet submitVisit: string | null = null\n\nconst offStart = router.on('start', (event) => {\n  const visit = event.detail.visit\n\n  if (submitting && !submitVisit && visit.method !== 'get') {\n    submitVisit = visit.id\n  }\n\n  if (visit.method !== 'get') visitBlock = props.block\n})\n\nconst offSuccess = router.on('success', (event) => {\n  const id = submitVisit\n\n  // Another action changed the record: show the server's new form unless it holds edits.\n  if (!id && shouldResyncForm(pageFlash(event.detail.page), store)) {\n    if (props.block !== visitBlock) {\n      store.fill(props.block)\n    } else {\n      resyncPending = true\n    }\n\n    return\n  }\n\n  if (!id || (event.detail.visitId ?? id) !== id) return\n\n  // A halted action (rate limit, `halt()`) saved nothing: keep what the user typed.\n  if (pageFlash(event.detail.page).alfakitAction?.status === 'halted') return\n\n  if (props.block !== submittedBlock) {\n    store.fill(props.block)\n  } else {\n    refillPending = true\n  }\n})\n\n// `refreshFormData([...])`: an action changed the record; copy those fields in.\nconst offRefresh = router.on('success', (event) => {\n  const refresh = formRefreshFor(pageFlash(event.detail.page), props.block.component)\n\n  if (refresh) applyFormRefresh(store, refresh)\n})\n\nconst offFinish = router.on('finish', (event) => {\n  if (submitVisit && event.detail.visit.id !== submitVisit) return\n\n  store.setProcessing(false)\n  submitting = false\n  submitVisit = null\n})\n\nconst offBefore = router.on('before', (event) => {\n  if (!panel.value.unsavedChangesAlerts) {\n    return\n  }\n\n  if (\n    store.isDirty &&\n    !submitting &&\n    isLeavingVisit(event.detail.visit) &&\n    !window.confirm(t('unsaved_changes', {}, 'You have unsaved changes. Leave anyway?'))\n  ) {\n    event.preventDefault()\n  }\n})\n\nonScopeDispose(() => {\n  offStart()\n  offSuccess()\n  offRefresh()\n  offFinish()\n  offBefore()\n  store.destroy()\n})\n\nconst onSubmit = () => {\n  if (primary.value && showActions.value) {\n    void trigger(primary.value, context.value)\n  }\n}\n\n// Enter in a text field runs the primary action (actions are type=\"button\").\nconst onKeydown = (event: KeyboardEvent) => {\n  if (\n    primary.value &&\n    showActions.value &&\n    isImplicitSubmit(event, event.currentTarget as HTMLFormElement)\n  ) {\n    event.preventDefault()\n    void trigger(primary.value, context.value)\n  }\n}\n</script>\n\n<template>\n  <form\n    data-slot=\"form-block\"\n    class=\"flex flex-col gap-6\"\n    @submit.prevent=\"onSubmit\"\n    @keydown=\"onKeydown\"\n  >\n    <fieldset :disabled=\"state.processing || props.block.operation === 'view'\" class=\"contents\">\n      <SchemaRenderer :components=\"state.components\" :columns=\"state.columns\" />\n    </fieldset>\n    <div v-if=\"actions.length > 0 && showActions\" data-slot=\"form-actions\" class=\"border-t pt-6\">\n      <ActionList :actions=\"actions\" :context=\"context\" :on-trigger=\"trigger\" />\n    </div>\n  </form>\n</template>\n"],"mappings":"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"}

package/dist/components/form/form-context.js

@@ -1,43 +1,43 @@
 import { useStore as e } from "../../composables/use-store.js";
-import { fieldAria as t } from "@alfakit/core";
-import { computed as n, inject as r, provide as i, toValue as a } from "vue";
+import { fieldAria as t, fieldDomId as n } from "@alfakit/core";
+import { computed as r, inject as i, provide as a, toValue as o } from "vue";
 //#region src/components/form/form-context.ts
-var o = Symbol("alfakit.form");
-function s(e) {
-	i(o, e);
+var s = Symbol("alfakit.form");
+function c(e) {
+	a(s, e);
 }
-function c() {
-	let e = r(o, null);
+function l() {
+	let e = i(s, null);
 	if (!e) throw Error("Form fields must be rendered inside provideForm().");
 	return e;
 }
-function l() {
-	return r(o, null);
-}
 function u() {
-	return e(c().store);
+	return i(s, null);
+}
+function d() {
+	return e(l().store);
 }
-function d(r) {
-	let i = c(), o = e(i.store), s = a(r).statePath, l = n(() => {
-		let e = o.value.values;
-		for (let t of s.split(".")) {
+function f(i) {
+	let a = l(), s = e(a.store), c = o(i).statePath, u = r(() => {
+		let e = s.value.values;
+		for (let t of c.split(".")) {
 			if (typeof e != "object" || !e) return;
 			e = e[t];
 		}
 		return e;
-	}), u = n(() => o.value.errors[s]?.[0]), d = n(() => !!a(r).disabled), f = n(() => !!a(r).readOnly), p = a(r).id ?? `alfakit-${s.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+	}), d = r(() => s.value.errors[c]?.[0]), f = r(() => !!o(i).disabled), p = r(() => !!o(i).readOnly), m = o(i).id ?? n(a.idPrefix, c);
 	return {
-		value: l,
-		setValue: (e) => i.setValue(s, e),
-		blur: () => i.blur(s),
-		error: u,
-		id: p,
-		disabled: d,
-		readOnly: f,
-		aria: n(() => t(p, a(r), u.value))
+		value: u,
+		setValue: (e) => a.setValue(c, e),
+		blur: () => a.blur(c),
+		error: d,
+		id: m,
+		disabled: f,
+		readOnly: p,
+		aria: r(() => t(m, o(i), d.value))
 	};
 }
 //#endregion
-export { o as FORM_STORE_KEY, s as provideForm, d as useField, u as useFormState, c as useFormStore, l as useOptionalFormStore };
+export { s as FORM_STORE_KEY, c as provideForm, f as useField, d as useFormState, l as useFormStore, u as useOptionalFormStore };
 
 //# sourceMappingURL=form-context.js.map

package/dist/components/form/form-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-context.js","names":["FORM_STORE_KEY","provideForm","store","useFormStore","inject","useOptionalFormStore","useFormState","useStore","useField","state","path","toValue","field","value","computed","current","segment","error","disabled","readOnly","id","next","fieldAria"],"sources":["../../../src/components/form/form-context.ts"],"sourcesContent":["import type { BaseField, FieldAriaAttributes, FormState, FormStore } from '@alfakit/core'\nimport { fieldAria } from '@alfakit/core'\nimport {\n  computed,\n  inject,\n  provide,\n  toValue,\n  type ComputedRef,\n  type InjectionKey,\n  type MaybeRefOrGetter,\n  type ShallowRef,\n} from 'vue'\nimport { useStore } from '../../composables/use-store'\n\nexport const FORM_STORE_KEY: InjectionKey<FormStore> = Symbol('alfakit.form')\n\nexport function provideForm(store: FormStore): void {\n  provide(FORM_STORE_KEY, store)\n}\n\nexport function useFormStore(): FormStore {\n  const store = inject(FORM_STORE_KEY, null)\n\n  if (!store) {\n    throw new Error('Form fields must be rendered inside provideForm().')\n  }\n\n  return store\n}\n\nexport function useOptionalFormStore(): FormStore | null {\n  return inject(FORM_STORE_KEY, null)\n}\n\nexport function useFormState(): ShallowRef<FormState> {\n  return useStore(useFormStore().store)\n}\n\nexport interface FieldBinding<T = unknown> {\n  value: ComputedRef<T>\n  setValue: (value: T) => void\n  blur: () => void\n  error: ComputedRef<string | undefined>\n  id: string\n  /** The field cannot be interacted with at all (`disabled()`). */\n  disabled: ComputedRef<boolean>\n  /** The field shows its value but the user cannot change it (`readOnly()`). */\n  readOnly: ComputedRef<boolean>\n  /** `aria-describedby` (hint, helper text, error), `aria-invalid` and `aria-required` for the control. */\n  aria: ComputedRef<FieldAriaAttributes>\n}\n\n/** Bind a field schema to the form store. */\nexport function useField<T = unknown>(field: MaybeRefOrGetter<BaseField>): FieldBinding<T> {\n  const store = useFormStore()\n  const state = useStore(store.store)\n  const path = toValue(field).statePath\n\n  const value = computed(() => {\n    let current: unknown = state.value.values\n\n    for (const segment of path.split('.')) {\n      if (current === null || current === undefined || typeof current !== 'object') {\n        return undefined as T\n      }\n\n      current = (current as Record<string, unknown>)[segment]\n    }\n\n    return current as T\n  })\n\n  const error = computed(() => state.value.errors[path]?.[0])\n  // Fields stay enabled during a live refresh: the store keeps edits made while the request\n  // is in flight, so locking inputs would only swallow keystrokes.\n  const disabled = computed(() => Boolean(toValue(field).disabled))\n  const readOnly = computed(() => Boolean(toValue(field).readOnly))\n  const id = toValue(field).id ?? `alfakit-${path.replace(/[^a-zA-Z0-9_-]/g, '-')}`\n  const aria = computed(() => fieldAria(id, toValue(field), error.value))\n\n  return {\n    value,\n    setValue: (next: T) => store.setValue(path, next),\n    blur: () => store.blur(path),\n    error,\n    id,\n    disabled,\n    readOnly,\n    aria,\n  }\n}\n"],"mappings":";;;;AAcA,IAAaA,IAA0C,OAAO,cAAc;AAE5E,SAAgBC,EAAY,GAAwB;CAClD,EAAQD,GAAgBE,CAAK;AAC/B;AAEA,SAAgBC,IAA0B;CACxC,IAAMD,IAAQE,EAAOJ,GAAgB,IAAI;CAEzC,IAAI,CAACE,GACH,MAAU,MAAM,oDAAoD;CAGtE,OAAOA;AACT;AAEA,SAAgBG,IAAyC;CACvD,OAAOD,EAAOJ,GAAgB,IAAI;AACpC;AAEA,SAAgBM,IAAsC;CACpD,OAAOC,EAASJ,EAAa,CAAC,CAAC,KAAK;AACtC;AAiBA,SAAgBK,EAAsB,GAAqD;CACzF,IAAMN,IAAQC,EAAa,GACrBM,IAAQF,EAASL,EAAM,KAAK,GAC5BQ,IAAOC,EAAQC,CAAK,CAAC,CAAC,WAEtBC,IAAQC,QAAe;EAC3B,IAAIC,IAAmBN,EAAM,MAAM;EAEnC,KAAK,IAAMO,KAAWN,EAAK,MAAM,GAAG,GAAG;GACrC,IAAiD,OAAOK,KAAY,aAAhEA,GACF;GAGF,IAAWA,EAAoCC;EACjD;EAEA,OAAOD;CACT,CAAC,GAEKE,IAAQH,QAAeL,EAAM,MAAM,OAAOC,EAAK,GAAG,EAAE,GAGpDQ,IAAWJ,QAAe,EAAQH,EAAQC,CAAK,CAAC,CAAC,QAAS,GAC1DO,IAAWL,QAAe,EAAQH,EAAQC,CAAK,CAAC,CAAC,QAAS,GAC1DQ,IAAKT,EAAQC,CAAK,CAAC,CAAC,MAAM,WAAWF,EAAK,QAAQ,mBAAmB,GAAG;CAG9E,OAAO;EACL;EACA,WAAW,MAAYR,EAAM,SAASQ,GAAMW,CAAI;EAChD,YAAYnB,EAAM,KAAKQ,CAAI;EAC3B;EACA;EACA;EACA;EACA,MAVWI,QAAeQ,EAAUF,GAAIT,EAAQC,CAAK,GAAGK,EAAM,KAAK,CAUnE;CACF;AACF"}
+{"version":3,"file":"form-context.js","names":["FORM_STORE_KEY","provideForm","store","useFormStore","inject","useOptionalFormStore","useFormState","useStore","useField","state","path","toValue","field","value","computed","current","segment","error","disabled","readOnly","id","fieldDomId","next","fieldAria"],"sources":["../../../src/components/form/form-context.ts"],"sourcesContent":["import type { BaseField, FieldAriaAttributes, FormState, FormStore } from '@alfakit/core'\nimport { fieldAria, fieldDomId } from '@alfakit/core'\nimport {\n  computed,\n  inject,\n  provide,\n  toValue,\n  type ComputedRef,\n  type InjectionKey,\n  type MaybeRefOrGetter,\n  type ShallowRef,\n} from 'vue'\nimport { useStore } from '../../composables/use-store'\n\nexport const FORM_STORE_KEY: InjectionKey<FormStore> = Symbol('alfakit.form')\n\nexport function provideForm(store: FormStore): void {\n  provide(FORM_STORE_KEY, store)\n}\n\nexport function useFormStore(): FormStore {\n  const store = inject(FORM_STORE_KEY, null)\n\n  if (!store) {\n    throw new Error('Form fields must be rendered inside provideForm().')\n  }\n\n  return store\n}\n\nexport function useOptionalFormStore(): FormStore | null {\n  return inject(FORM_STORE_KEY, null)\n}\n\nexport function useFormState(): ShallowRef<FormState> {\n  return useStore(useFormStore().store)\n}\n\nexport interface FieldBinding<T = unknown> {\n  value: ComputedRef<T>\n  setValue: (value: T) => void\n  blur: () => void\n  error: ComputedRef<string | undefined>\n  id: string\n  /** The field cannot be interacted with at all (`disabled()`). */\n  disabled: ComputedRef<boolean>\n  /** The field shows its value but the user cannot change it (`readOnly()`). */\n  readOnly: ComputedRef<boolean>\n  /** `aria-describedby` (hint, helper text, error), `aria-invalid` and `aria-required` for the control. */\n  aria: ComputedRef<FieldAriaAttributes>\n}\n\n/** Bind a field schema to the form store. */\nexport function useField<T = unknown>(field: MaybeRefOrGetter<BaseField>): FieldBinding<T> {\n  const store = useFormStore()\n  const state = useStore(store.store)\n  const path = toValue(field).statePath\n\n  const value = computed(() => {\n    let current: unknown = state.value.values\n\n    for (const segment of path.split('.')) {\n      if (current === null || current === undefined || typeof current !== 'object') {\n        return undefined as T\n      }\n\n      current = (current as Record<string, unknown>)[segment]\n    }\n\n    return current as T\n  })\n\n  const error = computed(() => state.value.errors[path]?.[0])\n  // Fields stay enabled during a live refresh: the store keeps edits made while the request\n  // is in flight, so locking inputs would only swallow keystrokes.\n  const disabled = computed(() => Boolean(toValue(field).disabled))\n  const readOnly = computed(() => Boolean(toValue(field).readOnly))\n  const id = toValue(field).id ?? fieldDomId(store.idPrefix, path)\n  const aria = computed(() => fieldAria(id, toValue(field), error.value))\n\n  return {\n    value,\n    setValue: (next: T) => store.setValue(path, next),\n    blur: () => store.blur(path),\n    error,\n    id,\n    disabled,\n    readOnly,\n    aria,\n  }\n}\n"],"mappings":";;;;AAcA,IAAaA,IAA0C,OAAO,cAAc;AAE5E,SAAgBC,EAAY,GAAwB;CAClD,EAAQD,GAAgBE,CAAK;AAC/B;AAEA,SAAgBC,IAA0B;CACxC,IAAMD,IAAQE,EAAOJ,GAAgB,IAAI;CAEzC,IAAI,CAACE,GACH,MAAU,MAAM,oDAAoD;CAGtE,OAAOA;AACT;AAEA,SAAgBG,IAAyC;CACvD,OAAOD,EAAOJ,GAAgB,IAAI;AACpC;AAEA,SAAgBM,IAAsC;CACpD,OAAOC,EAASJ,EAAa,CAAC,CAAC,KAAK;AACtC;AAiBA,SAAgBK,EAAsB,GAAqD;CACzF,IAAMN,IAAQC,EAAa,GACrBM,IAAQF,EAASL,EAAM,KAAK,GAC5BQ,IAAOC,EAAQC,CAAK,CAAC,CAAC,WAEtBC,IAAQC,QAAe;EAC3B,IAAIC,IAAmBN,EAAM,MAAM;EAEnC,KAAK,IAAMO,KAAWN,EAAK,MAAM,GAAG,GAAG;GACrC,IAAiD,OAAOK,KAAY,aAAhEA,GACF;GAGF,IAAWA,EAAoCC;EACjD;EAEA,OAAOD;CACT,CAAC,GAEKE,IAAQH,QAAeL,EAAM,MAAM,OAAOC,EAAK,GAAG,EAAE,GAGpDQ,IAAWJ,QAAe,EAAQH,EAAQC,CAAK,CAAC,CAAC,QAAS,GAC1DO,IAAWL,QAAe,EAAQH,EAAQC,CAAK,CAAC,CAAC,QAAS,GAC1DQ,IAAKT,EAAQC,CAAK,CAAC,CAAC,MAAMS,EAAWnB,EAAM,UAAUQ,CAAI;CAG/D,OAAO;EACL;EACA,WAAW,MAAYR,EAAM,SAASQ,GAAMY,CAAI;EAChD,YAAYpB,EAAM,KAAKQ,CAAI;EAC3B;EACA;EACA;EACA;EACA,MAVWI,QAAeS,EAAUH,GAAIT,EAAQC,CAAK,GAAGK,EAAM,KAAK,CAUnE;CACF;AACF"}

package/dist/components/layout/FusedGroupComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"FusedGroupComponent.js","names":["_sfc_main","FusedGroupComponent_vue_vue_type_script_setup_true_lang_default","FusedGroupComponent_default"],"sources":["../../../src/components/layout/FusedGroupComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { FusedGroupSchema } from '@alfakit/core'\nimport { collectFieldStatePaths, gridColumnsClasses } from '@alfakit/core'\nimport { computed, shallowRef, useId } from 'vue'\nimport { useStore } from '../../composables/use-store'\nimport { cn } from '../../lib/utils'\nimport { useOptionalFormStore } from '../form/form-context'\nimport { provideFusedGroup } from '../schema/fused-group'\nimport RenderComponent from '../schema/RenderComponent.vue'\n\n/**\n * Fields fused into one control: one border around them (styled by `themes.css`), the\n * group label above, and the fields' validation errors below.\n */\nconst props = defineProps<{ component: FusedGroupSchema }>()\n\nprovideFusedGroup()\n\nconst labelId = `${useId()}-label`\nconst store = useOptionalFormStore()\nconst state = store ? useStore(store.store) : shallowRef(null)\nconst paths = computed(() => collectFieldStatePaths(props.component.schema))\nconst errors = computed(() =>\n  state.value\n    ? paths.value\n        .map((path) => state.value?.errors[path]?.[0])\n        .filter((message): message is string => Boolean(message))\n    : [],\n)\n</script>\n\n<template>\n  <div\n    data-slot=\"fused-group\"\n    role=\"group\"\n    :aria-labelledby=\"props.component.label ? labelId : undefined\"\n    class=\"flex flex-col gap-1.5\"\n    v-bind=\"props.component.extraAttributes\"\n  >\n    <span\n      v-if=\"props.component.label\"\n      :id=\"labelId\"\n      class=\"text-sm leading-none font-medium select-none\"\n    >\n      {{ props.component.label }}\n    </span>\n    <div\n      data-slot=\"fused-group-controls\"\n      :data-invalid=\"errors.length ? '' : undefined\"\n      :class=\"cn('grid', gridColumnsClasses(props.component.columns ?? { default: 1 }))\"\n    >\n      <RenderComponent\n        v-for=\"child in props.component.schema ?? []\"\n        :key=\"child.key\"\n        :component=\"child\"\n      />\n    </div>\n    <!-- The fields announce their own errors; this list is the visible copy. -->\n    <div v-if=\"errors.length\" aria-hidden=\"true\" class=\"flex flex-col gap-0.5\">\n      <p v-for=\"(message, index) in errors\" :key=\"index\" class=\"text-destructive text-xs\">\n        {{ message }}\n      </p>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"FusedGroupComponent.js","names":["_sfc_main","FusedGroupComponent_vue_vue_type_script_setup_true_lang_default","FusedGroupComponent_default"],"sources":["../../../src/components/layout/FusedGroupComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { FusedGroupSchema } from '@alfakit/core'\nimport { collectFieldStatePaths, gridColumnsClasses } from '@alfakit/core'\nimport { computed, shallowRef, useId } from 'vue'\nimport { useStore } from '../../composables/use-store'\nimport { cn } from '../../lib/utils'\nimport { useOptionalFormStore } from '../form/form-context'\nimport { provideFusedGroup } from '../schema/fused-group'\nimport RenderComponent from '../schema/RenderComponent.vue'\n\n/**\n * Fields fused into one control: one border around them (styled by `themes.css`), the\n * group label above, and the fields' validation errors below.\n */\nconst props = defineProps<{ component: FusedGroupSchema }>()\n\nprovideFusedGroup()\n\nconst labelId = `${useId()}-label`\nconst store = useOptionalFormStore()\nconst state = store ? useStore(store.store) : shallowRef(null)\nconst paths = computed(() => collectFieldStatePaths(props.component.schema))\nconst errors = computed(() =>\n  state.value\n    ? paths.value\n        .map((path) => state.value?.errors[path]?.[0])\n        .filter((message): message is string => Boolean(message))\n    : [],\n)\n</script>\n\n<template>\n  <div\n    data-slot=\"fused-group\"\n    role=\"group\"\n    :aria-labelledby=\"props.component.label ? labelId : undefined\"\n    class=\"flex flex-col gap-1.5\"\n    v-bind=\"props.component.extraAttributes\"\n  >\n    <span\n      v-if=\"props.component.label\"\n      :id=\"labelId\"\n      data-slot=\"label\"\n      class=\"text-sm leading-none font-medium select-none\"\n    >\n      {{ props.component.label }}\n    </span>\n    <div\n      data-slot=\"fused-group-controls\"\n      :data-invalid=\"errors.length ? '' : undefined\"\n      :class=\"cn('grid', gridColumnsClasses(props.component.columns ?? { default: 1 }))\"\n    >\n      <RenderComponent\n        v-for=\"child in props.component.schema ?? []\"\n        :key=\"child.key\"\n        :component=\"child\"\n      />\n    </div>\n    <!-- The fields announce their own errors; this list is the visible copy. -->\n    <div v-if=\"errors.length\" aria-hidden=\"true\" class=\"flex flex-col gap-0.5\">\n      <p v-for=\"(message, index) in errors\" :key=\"index\" class=\"text-destructive text-xs\">\n        {{ message }}\n      </p>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/layout/FusedGroupComponent.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FusedGroupComponent.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/FusedGroupComponent.vue"],"names":[],"mappings":"AAmEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AASrD;;;GAGG;AACH,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,gBAAgB,CAAA;CAAE,CAAC;;AAyGnD,wBAMG"}
+{"version":3,"file":"FusedGroupComponent.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/FusedGroupComponent.vue"],"names":[],"mappings":"AAoEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AASrD;;;GAGG;AACH,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,gBAAgB,CAAA;CAAE,CAAC;;AA0GnD,wBAMG"}

package/dist/components/layout/FusedGroupComponent.vue_vue_type_script_setup_true_lang.js

@@ -26,6 +26,7 @@ var S = ["aria-labelledby"], C = ["data-invalid"], w = {
 			T.component.label ? (g(), d("span", {
 				key: 0,
 				id: E,
+				"data-slot": "label",
 				class: "text-sm leading-none font-medium select-none"
 			}, y(T.component.label), 1)) : u("", !0),
 			f("div", {

package/dist/components/layout/FusedGroupComponent.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"FusedGroupComponent.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_mergeProps","_toDisplayString","_createCommentVNode","_createElementVNode","_normalizeClass","_unref","_Fragment","_renderList","_createBlock","RenderComponent","RenderComponent_default","_hoisted_1","_hoisted_2","_hoisted_3","FusedGroupComponent_vue_vue_type_script_setup_true_lang_default","props","__props","labelId","useId","store","useOptionalFormStore","state","useStore","shallowRef","paths","computed","collectFieldStatePaths","errors","path","message","openBlock","createElementBlock","mergeProps","toDisplayString","createCommentVNode","createElementVNode","normalizeClass","unref","cn","gridColumnsClasses","Fragment","renderList","createBlock","child","index"],"sources":["../../../src/components/layout/FusedGroupComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { FusedGroupSchema } from '@alfakit/core'\nimport { collectFieldStatePaths, gridColumnsClasses } from '@alfakit/core'\nimport { computed, shallowRef, useId } from 'vue'\nimport { useStore } from '../../composables/use-store'\nimport { cn } from '../../lib/utils'\nimport { useOptionalFormStore } from '../form/form-context'\nimport { provideFusedGroup } from '../schema/fused-group'\nimport RenderComponent from '../schema/RenderComponent.vue'\n\n/**\n * Fields fused into one control: one border around them (styled by `themes.css`), the\n * group label above, and the fields' validation errors below.\n */\nconst props = defineProps<{ component: FusedGroupSchema }>()\n\nprovideFusedGroup()\n\nconst labelId = `${useId()}-label`\nconst store = useOptionalFormStore()\nconst state = store ? useStore(store.store) : shallowRef(null)\nconst paths = computed(() => collectFieldStatePaths(props.component.schema))\nconst errors = computed(() =>\n  state.value\n    ? paths.value\n        .map((path) => state.value?.errors[path]?.[0])\n        .filter((message): message is string => Boolean(message))\n    : [],\n)\n</script>\n\n<template>\n  <div\n    data-slot=\"fused-group\"\n    role=\"group\"\n    :aria-labelledby=\"props.component.label ? labelId : undefined\"\n    class=\"flex flex-col gap-1.5\"\n    v-bind=\"props.component.extraAttributes\"\n  >\n    <span\n      v-if=\"props.component.label\"\n      :id=\"labelId\"\n      class=\"text-sm leading-none font-medium select-none\"\n    >\n      {{ props.component.label }}\n    </span>\n    <div\n      data-slot=\"fused-group-controls\"\n      :data-invalid=\"errors.length ? '' : undefined\"\n      :class=\"cn('grid', gridColumnsClasses(props.component.columns ?? { default: 1 }))\"\n    >\n      <RenderComponent\n        v-for=\"child in props.component.schema ?? []\"\n        :key=\"child.key\"\n        :component=\"child\"\n      />\n    </div>\n    <!-- The fields announce their own errors; this list is the visible copy. -->\n    <div v-if=\"errors.length\" aria-hidden=\"true\" class=\"flex flex-col gap-0.5\">\n      <p v-for=\"(message, index) in errors\" :key=\"index\" class=\"text-destructive text-xs\">\n        {{ message }}\n      </p>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAcA,IAAMiB,IAAQC;EAEd,EAAkB;EAElB,IAAMC,IAAU,GAAGC,EAAM,EAAE,SACrBC,IAAQC,EAAqB,GAC7BC,IAAQF,IAAQG,EAASH,EAAM,KAAK,IAAII,EAAW,IAAI,GACvDC,IAAQC,QAAeC,EAAuBX,EAAM,UAAU,MAAM,CAAC,GACrEY,IAASF,QACbJ,EAAM,QACFG,EAAM,MACH,KAAK,MAASH,EAAM,OAAO,OAAOO,EAAK,GAAG,EAAE,CAAA,CAC5C,QAAQ,MAA+B,EAAQC,CAAQ,IAC1D,CAAC,CACP;oBAIE/B,EAAA,GAAAC,EA+BM,OA/BNC,EA+BM;GA9BJ,aAAU;GACV,MAAK;GACJ,mBAAiBe,EAAM,UAAU,QAAQE,IAAU,KAAA;GACpD,OAAM;EACE,GAAAF,EAAM,UAAU,eAAe,GAAA;GAG/BA,EAAM,UAAU,SADxBjB,EAAA,GAAAC,EAMO,QAAA;;IAJJ,IAAIkB;IACL,OAAM;GAEH,GAAAhB,EAAAc,EAAM,UAAU,KAAK,GAAA,CAAA,KAAAmB,EAAA,IAAA,EAAA;GAE1B/B,EAUM,OAAA;IATJ,aAAU;IACT,gBAAcwB,EAAA,MAAO,SAAM,KAAQ,KAAA;IACnC,OAAKvB,EAAEC,EAAAiC,CAAA,CAAE,CAAA,QAASjC,EAAAkC,CAAA,CAAkB,CAACxB,EAAM,UAAU,WAAO,EAAA,SAAA,EAAA,CAAA,CAAA,CAAA;GAE7DjB,GAAAA,EAAAA,EAAA,EAAA,GAAAC,EAIEO,GAAA,MAAAC,EAHgBQ,EAAM,UAAU,UAAM,CAAA,IAA/B,OADTjB,EAAA,GAAAU,EAIEC,GAAA;IAFC,KAAKkC,EAAM;IACX,WAAWA;;GAILhB,EAAA,MAAO,UAAlB7B,EAAA,GAAAC,EAIM,OAJNc,GAIM,EAHJf,EAAA,EAAA,GAAAC,EAEIO,GAAA,MAAAC,EAF0BoB,EAAA,QAAnB,GAAS,OAApB7B,EAAA,GAAAC,EAEI,KAAA;IAFmC,KAAK6C;IAAO,OAAM;GACpD,GAAA3C,EAAA4B,CAAO,GAAA,CAAA"}
+{"version":3,"file":"FusedGroupComponent.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_mergeProps","_toDisplayString","_createCommentVNode","_createElementVNode","_normalizeClass","_unref","_Fragment","_renderList","_createBlock","RenderComponent","RenderComponent_default","_hoisted_1","_hoisted_2","_hoisted_3","FusedGroupComponent_vue_vue_type_script_setup_true_lang_default","props","__props","labelId","useId","store","useOptionalFormStore","state","useStore","shallowRef","paths","computed","collectFieldStatePaths","errors","path","message","openBlock","createElementBlock","mergeProps","toDisplayString","createCommentVNode","createElementVNode","normalizeClass","unref","cn","gridColumnsClasses","Fragment","renderList","createBlock","child","index"],"sources":["../../../src/components/layout/FusedGroupComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { FusedGroupSchema } from '@alfakit/core'\nimport { collectFieldStatePaths, gridColumnsClasses } from '@alfakit/core'\nimport { computed, shallowRef, useId } from 'vue'\nimport { useStore } from '../../composables/use-store'\nimport { cn } from '../../lib/utils'\nimport { useOptionalFormStore } from '../form/form-context'\nimport { provideFusedGroup } from '../schema/fused-group'\nimport RenderComponent from '../schema/RenderComponent.vue'\n\n/**\n * Fields fused into one control: one border around them (styled by `themes.css`), the\n * group label above, and the fields' validation errors below.\n */\nconst props = defineProps<{ component: FusedGroupSchema }>()\n\nprovideFusedGroup()\n\nconst labelId = `${useId()}-label`\nconst store = useOptionalFormStore()\nconst state = store ? useStore(store.store) : shallowRef(null)\nconst paths = computed(() => collectFieldStatePaths(props.component.schema))\nconst errors = computed(() =>\n  state.value\n    ? paths.value\n        .map((path) => state.value?.errors[path]?.[0])\n        .filter((message): message is string => Boolean(message))\n    : [],\n)\n</script>\n\n<template>\n  <div\n    data-slot=\"fused-group\"\n    role=\"group\"\n    :aria-labelledby=\"props.component.label ? labelId : undefined\"\n    class=\"flex flex-col gap-1.5\"\n    v-bind=\"props.component.extraAttributes\"\n  >\n    <span\n      v-if=\"props.component.label\"\n      :id=\"labelId\"\n      data-slot=\"label\"\n      class=\"text-sm leading-none font-medium select-none\"\n    >\n      {{ props.component.label }}\n    </span>\n    <div\n      data-slot=\"fused-group-controls\"\n      :data-invalid=\"errors.length ? '' : undefined\"\n      :class=\"cn('grid', gridColumnsClasses(props.component.columns ?? { default: 1 }))\"\n    >\n      <RenderComponent\n        v-for=\"child in props.component.schema ?? []\"\n        :key=\"child.key\"\n        :component=\"child\"\n      />\n    </div>\n    <!-- The fields announce their own errors; this list is the visible copy. -->\n    <div v-if=\"errors.length\" aria-hidden=\"true\" class=\"flex flex-col gap-0.5\">\n      <p v-for=\"(message, index) in errors\" :key=\"index\" class=\"text-destructive text-xs\">\n        {{ message }}\n      </p>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAcA,IAAMiB,IAAQC;EAEd,EAAkB;EAElB,IAAMC,IAAU,GAAGC,EAAM,EAAE,SACrBC,IAAQC,EAAqB,GAC7BC,IAAQF,IAAQG,EAASH,EAAM,KAAK,IAAII,EAAW,IAAI,GACvDC,IAAQC,QAAeC,EAAuBX,EAAM,UAAU,MAAM,CAAC,GACrEY,IAASF,QACbJ,EAAM,QACFG,EAAM,MACH,KAAK,MAASH,EAAM,OAAO,OAAOO,EAAK,GAAG,EAAE,CAAA,CAC5C,QAAQ,MAA+B,EAAQC,CAAQ,IAC1D,CAAC,CACP;oBAIE/B,EAAA,GAAAC,EAgCM,OAhCNC,EAgCM;GA/BJ,aAAU;GACV,MAAK;GACJ,mBAAiBe,EAAM,UAAU,QAAQE,IAAU,KAAA;GACpD,OAAM;EACE,GAAAF,EAAM,UAAU,eAAe,GAAA;GAG/BA,EAAM,UAAU,SADxBjB,EAAA,GAAAC,EAOO,QAAA;;IALJ,IAAIkB;IACL,aAAU;IACV,OAAM;GAEH,GAAAhB,EAAAc,EAAM,UAAU,KAAK,GAAA,CAAA,KAAAmB,EAAA,IAAA,EAAA;GAE1B/B,EAUM,OAAA;IATJ,aAAU;IACT,gBAAcwB,EAAA,MAAO,SAAM,KAAQ,KAAA;IACnC,OAAKvB,EAAEC,EAAAiC,CAAA,CAAE,CAAA,QAASjC,EAAAkC,CAAA,CAAkB,CAACxB,EAAM,UAAU,WAAO,EAAA,SAAA,EAAA,CAAA,CAAA,CAAA;GAE7DjB,GAAAA,EAAAA,EAAA,EAAA,GAAAC,EAIEO,GAAA,MAAAC,EAHgBQ,EAAM,UAAU,UAAM,CAAA,IAA/B,OADTjB,EAAA,GAAAU,EAIEC,GAAA;IAFC,KAAKkC,EAAM;IACX,WAAWA;;GAILhB,EAAA,MAAO,UAAlB7B,EAAA,GAAAC,EAIM,OAJNc,GAIM,EAHJf,EAAA,EAAA,GAAAC,EAEIO,GAAA,MAAAC,EAF0BoB,EAAA,QAAnB,GAAS,OAApB7B,EAAA,GAAAC,EAEI,KAAA;IAFmC,KAAK6C;IAAO,OAAM;GACpD,GAAA3C,EAAA4B,CAAO,GAAA,CAAA"}

package/dist/components/layout/TabsComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsComponent.js","names":["_sfc_main","TabsComponent_vue_vue_type_script_setup_true_lang_default","TabsComponent_default"],"sources":["../../../src/components/layout/TabsComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TabsSchema } from '@alfakit/core'\nimport { readPersisted, schemaGapClass, writePersisted } from '@alfakit/core'\nimport { usePage } from '@inertiajs/vue3'\nimport { computed, onMounted, ref, watch } from 'vue'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport SchemaRenderer from '../schema/SchemaRenderer.vue'\nimport Tabs from '../ui/Tabs.vue'\nimport TabsContent from '../ui/TabsContent.vue'\nimport TabsList from '../ui/TabsList.vue'\nimport TabsTrigger from '../ui/TabsTrigger.vue'\nimport DeferredSchema from './DeferredSchema.vue'\nimport TabBadge from './TabBadge.vue'\n\nconst props = defineProps<{ component: TabsSchema }>()\nconst tabs = computed(() => props.component.schema ?? [])\n// The page URL (not `window.location`) so the server renders the same tab as the browser.\nconst page = usePage()\nconst fromQuery = props.component.queryStringKey\n  ? new URL(page.url, 'http://localhost').searchParams.get(props.component.queryStringKey)\n  : null\nconst active = ref<string>(\n  tabs.value.find((tab) => tab.key === fromQuery)?.key ??\n    tabs.value[Math.max(0, props.component.activeTab - 1)]?.key ??\n    tabs.value[0]?.key ??\n    '',\n)\n\n// `persistTab()`: restored after mounting (the server can't read browser storage); a tab\n// named in the query string wins.\nonMounted(() => {\n  const persist = props.component.persistTab\n\n  if (!persist || fromQuery) return\n\n  const stored = readPersisted(persist.key, persist.storage)\n\n  if (stored && tabs.value.some((tab) => tab.key === stored)) active.value = stored\n})\n\nfunction changeTab(value: string) {\n  active.value = value\n\n  const persist = props.component.persistTab\n\n  if (persist) writePersisted(persist.key, value, persist.storage)\n}\n\nwatch(\n  active,\n  (value) => {\n    if (!props.component.queryStringKey || typeof window === 'undefined') return\n\n    const url = new URL(window.location.href)\n    url.searchParams.set(props.component.queryStringKey, value)\n    window.history.replaceState(window.history.state, '', url)\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <Tabs\n    :data-surface=\"props.component.contained ? 'tabs' : undefined\"\n    :model-value=\"active\"\n    :orientation=\"props.component.vertical ? 'vertical' : 'horizontal'\"\n    :class=\"\n      cn(\n        props.component.contained && 'bg-card rounded-xl border shadow-xs',\n        props.component.vertical && 'flex-row',\n      )\n    \"\n    v-bind=\"props.component.extraAttributes\"\n    @update:model-value=\"changeTab(String($event))\"\n  >\n    <TabsList\n      :data-scrollable=\"props.component.scrollable === false ? 'false' : undefined\"\n      :class=\"\n        cn(\n          props.component.contained && 'm-2',\n          props.component.vertical\n            ? 'self-start'\n            : props.component.scrollable === false\n              ? 'h-auto max-w-full flex-wrap justify-start'\n              : 'relative max-w-full overflow-x-auto',\n        )\n      \"\n    >\n      <TabsTrigger v-for=\"tab in tabs\" :key=\"tab.key\" :value=\"tab.key\">\n        <Icon v-if=\"tab.icon && tab.iconPosition !== 'after'\" :name=\"tab.icon\" />\n        {{ tab.label }}\n        <Icon v-if=\"tab.icon && tab.iconPosition === 'after'\" :name=\"tab.icon\" />\n        <TabBadge :tab=\"tab\" />\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent\n      v-for=\"tab in tabs\"\n      :key=\"tab.key\"\n      :value=\"tab.key\"\n      force-mount\n      :class=\"cn('data-[state=inactive]:hidden', props.component.contained ? 'p-6 pt-4' : 'pt-4')\"\n    >\n      <DeferredSchema v-slot=\"{ component: loaded }\" :component=\"tab\">\n        <SchemaRenderer\n          :components=\"loaded.schema ?? []\"\n          :columns=\"loaded.columns\"\n          :attributes=\"loaded.extraAttributes\"\n          :class=\"schemaGapClass(loaded) || undefined\"\n        />\n      </DeferredSchema>\n    </TabsContent>\n  </Tabs>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TabsComponent.js","names":["_sfc_main","TabsComponent_vue_vue_type_script_setup_true_lang_default","TabsComponent_default"],"sources":["../../../src/components/layout/TabsComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TabsSchema } from '@alfakit/core'\nimport {\n  componentHasErrors,\n  readPersisted,\n  schemaGapClass,\n  tabFromQuery,\n  tabQueryValue,\n  tabToReveal,\n  writePersisted,\n} from '@alfakit/core'\nimport { usePage } from '@inertiajs/vue3'\nimport { computed, onMounted, ref, watch } from 'vue'\nimport { useStoreSelector } from '../../composables/use-store'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { useOptionalFormStore } from '../form/form-context'\nimport SchemaRenderer from '../schema/SchemaRenderer.vue'\nimport Tabs from '../ui/Tabs.vue'\nimport TabsContent from '../ui/TabsContent.vue'\nimport TabsList from '../ui/TabsList.vue'\nimport TabsTrigger from '../ui/TabsTrigger.vue'\nimport DeferredSchema from './DeferredSchema.vue'\nimport TabBadge from './TabBadge.vue'\n\nconst props = defineProps<{ component: TabsSchema }>()\nconst tabs = computed(() => props.component.schema ?? [])\n// The page URL (not `window.location`) so the server renders the same tab as the browser.\nconst page = usePage()\n// The tab's readable value (`?tab=billing-address`), or its key in links from older versions.\nconst fromQuery = props.component.queryStringKey\n  ? tabFromQuery(\n      tabs.value,\n      new URL(page.url, 'http://localhost').searchParams.get(props.component.queryStringKey),\n    )\n  : null\nconst active = ref<string>(\n  fromQuery ??\n    tabs.value[Math.max(0, props.component.activeTab - 1)]?.key ??\n    tabs.value[0]?.key ??\n    '',\n)\n\n// `persistTab()`: restored after mounting (the server can't read browser storage); a tab\n// named in the query string wins.\nonMounted(() => {\n  const persist = props.component.persistTab\n\n  if (!persist || fromQuery) return\n\n  const stored = readPersisted(persist.key, persist.storage)\n\n  if (stored && tabs.value.some((tab) => tab.key === stored)) active.value = stored\n})\n\n// Tabs holding a field with a validation error are marked, and when a submit brings new\n// errors while the open tab has none, the first tab with an error opens.\nconst TAB_INVALID_CLASSES =\n  'text-destructive data-[state=active]:text-destructive dark:text-destructive dark:data-[state=active]:text-destructive'\nconst t = useT()\nconst store = useOptionalFormStore()\nconst errors = useStoreSelector(\n  store?.store ?? {\n    get: () => ({ errors: {} as Record<string, string[]> }),\n    subscribe: () => () => {},\n  },\n  (state) => state.errors,\n)\nconst invalidTabs = computed(\n  () =>\n    new Set(\n      tabs.value.filter((tab) => componentHasErrors(tab, errors.value)).map((tab) => tab.key),\n    ),\n)\n\nwatch(\n  errors,\n  (next, previous) => {\n    const reveal = tabToReveal(tabs.value, active.value, previous ?? {}, next)\n\n    if (reveal !== null) active.value = reveal\n  },\n  { immediate: true },\n)\n\nfunction changeTab(value: string) {\n  active.value = value\n\n  const persist = props.component.persistTab\n\n  if (persist) writePersisted(persist.key, value, persist.storage)\n}\n\nwatch(\n  active,\n  (value) => {\n    if (!props.component.queryStringKey || typeof window === 'undefined') return\n\n    const tab = tabs.value.find((item) => item.key === value)\n    const url = new URL(window.location.href)\n    url.searchParams.set(props.component.queryStringKey, tab ? tabQueryValue(tab) : value)\n    window.history.replaceState(window.history.state, '', url)\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <Tabs\n    :data-surface=\"props.component.contained ? 'tabs' : undefined\"\n    :model-value=\"active\"\n    :orientation=\"props.component.vertical ? 'vertical' : 'horizontal'\"\n    :class=\"\n      cn(\n        props.component.contained && 'bg-card rounded-xl border shadow-xs',\n        props.component.vertical && 'flex-row',\n      )\n    \"\n    v-bind=\"props.component.extraAttributes\"\n    @update:model-value=\"changeTab(String($event))\"\n  >\n    <TabsList\n      :data-scrollable=\"props.component.scrollable === false ? 'false' : undefined\"\n      :class=\"\n        cn(\n          props.component.contained && 'm-2',\n          props.component.vertical\n            ? 'self-start'\n            : props.component.scrollable === false\n              ? 'h-auto max-w-full flex-wrap justify-start'\n              : 'relative max-w-full overflow-x-auto',\n        )\n      \"\n    >\n      <TabsTrigger\n        v-for=\"tab in tabs\"\n        :key=\"tab.key\"\n        :value=\"tab.key\"\n        :data-invalid=\"invalidTabs.has(tab.key) || undefined\"\n        :class=\"invalidTabs.has(tab.key) ? TAB_INVALID_CLASSES : undefined\"\n      >\n        <Icon v-if=\"tab.icon && tab.iconPosition !== 'after'\" :name=\"tab.icon\" />\n        {{ tab.label }}\n        <Icon v-if=\"tab.icon && tab.iconPosition === 'after'\" :name=\"tab.icon\" />\n        <TabBadge :tab=\"tab\" />\n        <template v-if=\"invalidTabs.has(tab.key)\">\n          <span aria-hidden=\"true\" class=\"bg-destructive size-1.5 shrink-0 rounded-full\"></span>\n          <span class=\"sr-only\">({{ t('translatable.has_errors') }})</span>\n        </template>\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent\n      v-for=\"tab in tabs\"\n      :key=\"tab.key\"\n      :value=\"tab.key\"\n      force-mount\n      :class=\"cn('data-[state=inactive]:hidden', props.component.contained ? 'p-6 pt-4' : 'pt-4')\"\n    >\n      <DeferredSchema v-slot=\"{ component: loaded }\" :component=\"tab\">\n        <SchemaRenderer\n          :components=\"loaded.schema ?? []\"\n          :columns=\"loaded.columns\"\n          :attributes=\"loaded.extraAttributes\"\n          :class=\"schemaGapClass(loaded) || undefined\"\n        />\n      </DeferredSchema>\n    </TabsContent>\n  </Tabs>\n</template>\n"],"mappings":""}

package/dist/components/layout/TabsComponent.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsComponent.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/TabsComponent.vue"],"names":[],"mappings":"AAoHA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAc/C,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,UAAU,CAAA;CAAE,CAAC;;AAsP7C,wBAMG"}
+{"version":3,"file":"TabsComponent.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/TabsComponent.vue"],"names":[],"mappings":"AA4KA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAyB/C,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,UAAU,CAAA;CAAE,CAAC;;AA+S7C,wBAMG"}