@alfakit/vue 0.1.9 → 0.1.10

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

@@ -3,26 +3,28 @@ import { cn as t } from "../../lib/utils.js";
 import { colorClass as n, textColorClasses as r } from "../../lib/colors.js";
 import i from "../../lib/Icon.js";
 import a from "../actions/ActionList.js";
-import o from "./MixedContent.js";
-import { actionsAlignmentClass as s } from "@alfakit/core";
-import { computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, mergeProps as h, normalizeClass as g, openBlock as _, toDisplayString as v, unref as y } from "vue";
+import { useOptionalFormStore as o } from "../form/form-context.js";
+import { useFieldActionContext as s } from "../schema/field-actions.js";
+import c from "./MixedContent.js";
+import { actionsAlignmentClass as l } from "@alfakit/core";
+import { computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createVNode as h, defineComponent as g, mergeProps as _, normalizeClass as v, openBlock as y, toDisplayString as b, unref as x } from "vue";
 //#region src/components/layout/CalloutComponent.vue?vue&type=script&setup=true&lang.ts
-var b = [
+var S = [
 	"data-color",
 	"data-status",
 	"role"
-], x = {
+], C = {
 	key: 0,
 	"data-slot": "callout-icon",
 	class: "mt-0.5 shrink-0"
-}, S = { class: "flex min-w-0 flex-1 flex-col gap-1" }, C = {
+}, w = { class: "flex min-w-0 flex-1 flex-col gap-1" }, T = {
 	key: 0,
 	class: "leading-6 font-semibold"
-}, w = ["innerHTML"], T = /*@__PURE__*/ m({
+}, E = ["innerHTML"], D = /*@__PURE__*/ g({
 	__name: "CalloutComponent",
 	props: { component: {} },
-	setup(m) {
-		let T = {
+	setup(g) {
+		let D = {
 			primary: "border-primary/30 bg-primary/5 [&_[data-slot=callout-icon]]:text-primary",
 			secondary: "border-border bg-secondary [&_[data-slot=callout-icon]]:text-secondary-foreground",
 			success: "border-success/30 bg-success/5 [&_[data-slot=callout-icon]]:text-success",
@@ -30,58 +32,60 @@ var b = [
 			danger: "border-destructive/30 bg-destructive/5 [&_[data-slot=callout-icon]]:text-destructive",
 			info: "border-info/30 bg-info/5 [&_[data-slot=callout-icon]]:text-info",
 			gray: "border-border bg-muted/40 [&_[data-slot=callout-icon]]:text-muted-foreground"
-		}, E = {
+		}, O = {
 			xs: "size-4",
 			sm: "size-4",
 			md: "size-5",
 			lg: "size-6",
 			xl: "size-7",
 			"2xl": "size-8"
-		}, D = m, O = e(), k = c(() => D.component.color ?? D.component.status), A = c(() => D.component.iconColor ?? (D.component.color ? void 0 : D.component.status));
-		return (e, c) => (_(), d("div", h({
+		}, k = g, A = o(), j = e(), M = s(() => k.component), N = u(() => A ? M.value : j), P = u(() => k.component.color ?? k.component.status), F = u(() => k.component.iconColor ?? (k.component.color ? void 0 : k.component.status));
+		return (e, o) => (y(), p("div", _({
 			"data-slot": "callout",
-			"data-color": D.component.color ?? "gray",
-			"data-status": D.component.status,
-			role: k.value === "danger" || k.value === "warning" ? "alert" : "note",
-			class: y(t)("flex items-start gap-3 rounded-lg border p-4 text-sm", y(n)(T, D.component.color))
-		}, D.component.extraAttributes), [
-			D.component.icon ? (_(), d("span", x, [p(y(i), {
-				name: D.component.icon,
-				class: g(y(t)(D.component.iconSize && E[D.component.iconSize] || "size-5", A.value && y(n)(y(r), A.value)))
-			}, null, 8, ["name", "class"])])) : u("", !0),
-			f("div", S, [
-				D.component.heading ? (_(), d("p", C, v(D.component.heading), 1)) : u("", !0),
-				D.component.description ? (_(), d("div", {
+			"data-color": k.component.color ?? "gray",
+			"data-status": k.component.status,
+			role: P.value === "danger" || P.value === "warning" ? "alert" : "note",
+			class: x(t)("flex items-start gap-3 rounded-lg border p-4 text-sm", x(n)(D, k.component.color))
+		}, k.component.extraAttributes), [
+			k.component.icon ? (y(), p("span", C, [h(x(i), {
+				name: k.component.icon,
+				class: v(x(t)(k.component.iconSize && O[k.component.iconSize] || "size-5", F.value && x(n)(x(r), F.value)))
+			}, null, 8, ["name", "class"])])) : f("", !0),
+			m("div", w, [
+				k.component.heading ? (y(), p("p", T, b(k.component.heading), 1)) : f("", !0),
+				k.component.description ? (y(), p("div", {
 					key: 1,
 					class: "text-muted-foreground alfakit-prose",
-					innerHTML: D.component.description
-				}, null, 8, w)) : u("", !0),
-				D.component.actions && D.component.actions.length > 0 ? (_(), l(a, {
+					innerHTML: k.component.description
+				}, null, 8, E)) : f("", !0),
+				k.component.actions && k.component.actions.length > 0 ? (y(), d(a, {
 					key: 2,
-					actions: D.component.actions,
-					context: y(O),
+					actions: k.component.actions,
+					context: N.value,
 					size: "sm",
-					class: g(y(t)("mt-2", y(s)(D.component.footerActionsAlignment)))
+					class: v(x(t)("mt-2", x(l)(k.component.footerActionsAlignment)))
 				}, null, 8, [
 					"actions",
 					"context",
 					"class"
-				])) : u("", !0),
-				p(o, {
-					items: D.component.footer,
+				])) : f("", !0),
+				h(c, {
+					items: k.component.footer,
+					context: N.value,
 					name: "callout-footer",
 					class: "mt-2"
-				}, null, 8, ["items"])
+				}, null, 8, ["items", "context"])
 			]),
-			p(o, {
-				items: D.component.controls,
+			h(c, {
+				items: k.component.controls,
+				context: N.value,
 				name: "callout-controls",
 				class: "-me-1 -mt-1 shrink-0 gap-1"
-			}, null, 8, ["items"])
-		], 16, b));
+			}, null, 8, ["items", "context"])
+		], 16, S));
 	}
 });
 //#endregion
-export { T as default };
+export { D as default };
 
 //# sourceMappingURL=CalloutComponent.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CalloutComponent.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_mergeProps","_unref","_createVNode","Icon","_normalizeClass","_createCommentVNode","_createElementVNode","_toDisplayString","_createBlock","ActionList","MixedContent","Icon_default","ActionList_default","MixedContent_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","CalloutComponent_vue_vue_type_script_setup_true_lang_default","CALLOUT_COLORS","CALLOUT_ICON_SIZES","props","__props","context","usePageActionContext","tone","computed","iconColor","openBlock","createElementBlock","mergeProps","unref","cn","colorClass","createVNode","normalizeClass","textColorClasses","createCommentVNode","createElementVNode","toDisplayString","createBlock","actionsAlignmentClass"],"sources":["../../../src/components/layout/CalloutComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { CalloutSchema } from '@alfakit/core'\nimport { actionsAlignmentClass } from '@alfakit/core'\nimport { computed } from 'vue'\nimport { colorClass, textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport ActionList from '../actions/ActionList.vue'\nimport MixedContent from './MixedContent.vue'\n\nconst CALLOUT_COLORS: Record<string, string> = {\n  primary: 'border-primary/30 bg-primary/5 [&_[data-slot=callout-icon]]:text-primary',\n  secondary: 'border-border bg-secondary [&_[data-slot=callout-icon]]:text-secondary-foreground',\n  success: 'border-success/30 bg-success/5 [&_[data-slot=callout-icon]]:text-success',\n  warning: 'border-warning/40 bg-warning/10 [&_[data-slot=callout-icon]]:text-warning',\n  danger: 'border-destructive/30 bg-destructive/5 [&_[data-slot=callout-icon]]:text-destructive',\n  info: 'border-info/30 bg-info/5 [&_[data-slot=callout-icon]]:text-info',\n  gray: 'border-border bg-muted/40 [&_[data-slot=callout-icon]]:text-muted-foreground',\n}\n\nconst CALLOUT_ICON_SIZES: Record<string, string> = {\n  xs: 'size-4',\n  sm: 'size-4',\n  md: 'size-5',\n  lg: 'size-6',\n  xl: 'size-7',\n  '2xl': 'size-8',\n}\n\nconst props = defineProps<{ component: CalloutSchema }>()\nconst context = usePageActionContext()\nconst tone = computed(() => props.component.color ?? props.component.status)\n// `iconColor()`, or the status colour once `color(null)` removed the background.\nconst iconColor = computed(\n  () => props.component.iconColor ?? (props.component.color ? undefined : props.component.status),\n)\n</script>\n\n<template>\n  <div\n    data-slot=\"callout\"\n    :data-color=\"props.component.color ?? 'gray'\"\n    :data-status=\"props.component.status\"\n    :role=\"tone === 'danger' || tone === 'warning' ? 'alert' : 'note'\"\n    :class=\"\n      cn(\n        'flex items-start gap-3 rounded-lg border p-4 text-sm',\n        colorClass(CALLOUT_COLORS, props.component.color),\n      )\n    \"\n    v-bind=\"props.component.extraAttributes\"\n  >\n    <span v-if=\"props.component.icon\" data-slot=\"callout-icon\" class=\"mt-0.5 shrink-0\">\n      <Icon\n        :name=\"props.component.icon\"\n        :class=\"\n          cn(\n            (props.component.iconSize && CALLOUT_ICON_SIZES[props.component.iconSize]) || 'size-5',\n            iconColor && colorClass(textColorClasses, iconColor),\n          )\n        \"\n      />\n    </span>\n    <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n      <p v-if=\"props.component.heading\" class=\"leading-6 font-semibold\">\n        {{ props.component.heading }}\n      </p>\n      <div\n        v-if=\"props.component.description\"\n        class=\"text-muted-foreground alfakit-prose\"\n        v-html=\"props.component.description\"\n      />\n      <ActionList\n        v-if=\"props.component.actions && props.component.actions.length > 0\"\n        :actions=\"props.component.actions\"\n        :context=\"context\"\n        size=\"sm\"\n        :class=\"cn('mt-2', actionsAlignmentClass(props.component.footerActionsAlignment))\"\n      />\n      <MixedContent :items=\"props.component.footer\" name=\"callout-footer\" class=\"mt-2\" />\n    </div>\n    <MixedContent\n      :items=\"props.component.controls\"\n      name=\"callout-controls\"\n      class=\"-me-1 -mt-1 shrink-0 gap-1\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAWA,IAAMsB,IAAyC;GAC7C,SAAS;GACT,WAAW;GACX,SAAS;GACT,SAAS;GACT,QAAQ;GACR,MAAM;GACN,MAAM;EACR,GAEMC,IAA6C;GACjD,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;EACT,GAEMC,IAAQC,GACRC,IAAUC,EAAqB,GAC/BC,IAAOC,QAAeL,EAAM,UAAU,SAASA,EAAM,UAAU,MAAM,GAErEM,IAAYD,QACVL,EAAM,UAAU,cAAcA,EAAM,UAAU,QAAQ,KAAA,IAAYA,EAAM,UAAU,OAC1F;oBAIExB,EAAA,GAAAC,EA+CM,OA/CNC,EA+CM;GA9CJ,aAAU;GACT,cAAYsB,EAAM,UAAU,SAAK;GACjC,eAAaA,EAAM,UAAU;GAC7B,MAAMI,EAAA,UAAI,YAAiBA,EAAA,UAAI,YAAA,UAAA;GAC/B,OAAczB,EAAAgC,CAAA,CAAE,CAAA,wDAA0EhC,EAAAiC,CAAA,CAAU,CAACd,GAAgBE,EAAM,UAAU,KAAK,CAAA;EAMnI,GAAAA,EAAM,UAAU,eAAe,GAAA;GAE3BA,EAAM,UAAU,QAA5BxB,EAAA,GAAAC,EAUO,QAVPgB,GAUO,CATLb,EAQED,EAAAE,CAAA,GAAA;IAPC,MAAMmB,EAAM,UAAU;IACtB,OAAKlB,EAAaH,EAAAgC,CAAA,CAAE,CAAeX,EAAM,UAAU,YAAYD,EAAmBC,EAAM,UAAU,aAAQ,UAA4BM,EAAA,SAAa3B,EAAAiC,CAAA,CAAU,CAACjC,EAAAoC,CAAA,GAAkBT,EAAA,KAAS,CAAA,CAAA;;GAQ9LtB,EAiBM,OAjBNU,GAiBM;IAhBKM,EAAM,UAAU,WAAzBxB,EAAA,GAAAC,EAEI,KAFJkB,GAEIV,EADCe,EAAM,UAAU,OAAO,GAAA,CAAA,KAAAgB,EAAA,IAAA,EAAA;IAGpBhB,EAAM,UAAU,eADxBxB,EAAA,GAAAC,EAIE,OAAA;;KAFA,OAAM;KACN,WAAQuB,EAAM,UAAU;;IAGlBA,EAAM,UAAU,WAAWA,EAAM,UAAU,QAAQ,SAAM,KADjExB,EAAA,GAAAU,EAMEC,GAAA;;KAJC,SAASa,EAAM,UAAU;KACzB,SAASrB,EAAAuB,CAAA;KACV,MAAK;KACJ,OAAKpB,EAAEH,EAAAgC,CAAA,CAAE,CAAA,QAAShC,EAAAyC,CAAA,CAAqB,CAACpB,EAAM,UAAU,sBAAsB,CAAA,CAAA;;;;;;IAEjFpB,EAAmFQ,GAAA;KAApE,OAAOY,EAAM,UAAU;KAAQ,MAAK;KAAiB,OAAM;;;GAE5EpB,EAIEQ,GAAA;IAHC,OAAOY,EAAM,UAAU;IACxB,MAAK;IACL,OAAM"}
+{"version":3,"file":"CalloutComponent.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_mergeProps","_unref","_createVNode","Icon","_normalizeClass","_createCommentVNode","_createElementVNode","_toDisplayString","_createBlock","ActionList","MixedContent","Icon_default","ActionList_default","MixedContent_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","CalloutComponent_vue_vue_type_script_setup_true_lang_default","CALLOUT_COLORS","CALLOUT_ICON_SIZES","props","__props","form","useOptionalFormStore","pageContext","usePageActionContext","fieldContext","useFieldActionContext","context","computed","tone","iconColor","openBlock","createElementBlock","mergeProps","unref","cn","colorClass","createVNode","normalizeClass","textColorClasses","createCommentVNode","createElementVNode","toDisplayString","createBlock","actionsAlignmentClass"],"sources":["../../../src/components/layout/CalloutComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { CalloutSchema } from '@alfakit/core'\nimport { actionsAlignmentClass } from '@alfakit/core'\nimport { computed } from 'vue'\nimport { colorClass, textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport { useOptionalFormStore } from '../form/form-context'\nimport ActionList from '../actions/ActionList.vue'\nimport { useFieldActionContext } from '../schema/field-actions'\nimport MixedContent from './MixedContent.vue'\n\nconst CALLOUT_COLORS: Record<string, string> = {\n  primary: 'border-primary/30 bg-primary/5 [&_[data-slot=callout-icon]]:text-primary',\n  secondary: 'border-border bg-secondary [&_[data-slot=callout-icon]]:text-secondary-foreground',\n  success: 'border-success/30 bg-success/5 [&_[data-slot=callout-icon]]:text-success',\n  warning: 'border-warning/40 bg-warning/10 [&_[data-slot=callout-icon]]:text-warning',\n  danger: 'border-destructive/30 bg-destructive/5 [&_[data-slot=callout-icon]]:text-destructive',\n  info: 'border-info/30 bg-info/5 [&_[data-slot=callout-icon]]:text-info',\n  gray: 'border-border bg-muted/40 [&_[data-slot=callout-icon]]:text-muted-foreground',\n}\n\nconst CALLOUT_ICON_SIZES: Record<string, string> = {\n  xs: 'size-4',\n  sm: 'size-4',\n  md: 'size-5',\n  lg: 'size-6',\n  xl: 'size-7',\n  '2xl': 'size-8',\n}\n\nconst props = defineProps<{ component: CalloutSchema }>()\n// Inside a form the actions run as field actions of this component, so `$get` / `$set`\n// reach the form (like a section's header actions).\nconst form = useOptionalFormStore()\nconst pageContext = usePageActionContext()\nconst fieldContext = useFieldActionContext(() => props.component)\nconst context = computed(() => (form ? fieldContext.value : pageContext))\nconst tone = computed(() => props.component.color ?? props.component.status)\n// `iconColor()`, or the status colour once `color(null)` removed the background.\nconst iconColor = computed(\n  () => props.component.iconColor ?? (props.component.color ? undefined : props.component.status),\n)\n</script>\n\n<template>\n  <div\n    data-slot=\"callout\"\n    :data-color=\"props.component.color ?? 'gray'\"\n    :data-status=\"props.component.status\"\n    :role=\"tone === 'danger' || tone === 'warning' ? 'alert' : 'note'\"\n    :class=\"\n      cn(\n        'flex items-start gap-3 rounded-lg border p-4 text-sm',\n        colorClass(CALLOUT_COLORS, props.component.color),\n      )\n    \"\n    v-bind=\"props.component.extraAttributes\"\n  >\n    <span v-if=\"props.component.icon\" data-slot=\"callout-icon\" class=\"mt-0.5 shrink-0\">\n      <Icon\n        :name=\"props.component.icon\"\n        :class=\"\n          cn(\n            (props.component.iconSize && CALLOUT_ICON_SIZES[props.component.iconSize]) || 'size-5',\n            iconColor && colorClass(textColorClasses, iconColor),\n          )\n        \"\n      />\n    </span>\n    <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n      <p v-if=\"props.component.heading\" class=\"leading-6 font-semibold\">\n        {{ props.component.heading }}\n      </p>\n      <div\n        v-if=\"props.component.description\"\n        class=\"text-muted-foreground alfakit-prose\"\n        v-html=\"props.component.description\"\n      />\n      <ActionList\n        v-if=\"props.component.actions && props.component.actions.length > 0\"\n        :actions=\"props.component.actions\"\n        :context=\"context\"\n        size=\"sm\"\n        :class=\"cn('mt-2', actionsAlignmentClass(props.component.footerActionsAlignment))\"\n      />\n      <MixedContent\n        :items=\"props.component.footer\"\n        :context=\"context\"\n        name=\"callout-footer\"\n        class=\"mt-2\"\n      />\n    </div>\n    <MixedContent\n      :items=\"props.component.controls\"\n      :context=\"context\"\n      name=\"callout-controls\"\n      class=\"-me-1 -mt-1 shrink-0 gap-1\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAaA,IAAMsB,IAAyC;GAC7C,SAAS;GACT,WAAW;GACX,SAAS;GACT,SAAS;GACT,QAAQ;GACR,MAAM;GACN,MAAM;EACR,GAEMC,IAA6C;GACjD,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;EACT,GAEMC,IAAQC,GAGRC,IAAOC,EAAqB,GAC5BC,IAAcC,EAAqB,GACnCC,IAAeC,QAA4BP,EAAM,SAAS,GAC1DQ,IAAUC,QAAgBP,IAAOI,EAAa,QAAQF,CAAY,GAClEM,IAAOD,QAAeT,EAAM,UAAU,SAASA,EAAM,UAAU,MAAM,GAErEW,IAAYF,QACVT,EAAM,UAAU,cAAcA,EAAM,UAAU,QAAQ,KAAA,IAAYA,EAAM,UAAU,OAC1F;oBAIExB,EAAA,GAAAC,EAqDM,OArDNC,EAqDM;GApDJ,aAAU;GACT,cAAYsB,EAAM,UAAU,SAAK;GACjC,eAAaA,EAAM,UAAU;GAC7B,MAAMU,EAAA,UAAI,YAAiBA,EAAA,UAAI,YAAA,UAAA;GAC/B,OAAc/B,EAAAqC,CAAA,CAAE,CAAA,wDAA0ErC,EAAAsC,CAAA,CAAU,CAACnB,GAAgBE,EAAM,UAAU,KAAK,CAAA;EAMnI,GAAAA,EAAM,UAAU,eAAe,GAAA;GAE3BA,EAAM,UAAU,QAA5BxB,EAAA,GAAAC,EAUO,QAVPgB,GAUO,CATLb,EAQED,EAAAE,CAAA,GAAA;IAPC,MAAMmB,EAAM,UAAU;IACtB,OAAKlB,EAAaH,EAAAqC,CAAA,CAAE,CAAehB,EAAM,UAAU,YAAYD,EAAmBC,EAAM,UAAU,aAAQ,UAA4BW,EAAA,SAAahC,EAAAsC,CAAA,CAAU,CAACtC,EAAAyC,CAAA,GAAkBT,EAAA,KAAS,CAAA,CAAA;;GAQ9L3B,EAsBM,OAtBNU,GAsBM;IArBKM,EAAM,UAAU,WAAzBxB,EAAA,GAAAC,EAEI,KAFJkB,GAEIV,EADCe,EAAM,UAAU,OAAO,GAAA,CAAA,KAAAqB,EAAA,IAAA,EAAA;IAGpBrB,EAAM,UAAU,eADxBxB,EAAA,GAAAC,EAIE,OAAA;;KAFA,OAAM;KACN,WAAQuB,EAAM,UAAU;;IAGlBA,EAAM,UAAU,WAAWA,EAAM,UAAU,QAAQ,SAAM,KADjExB,EAAA,GAAAU,EAMEC,GAAA;;KAJC,SAASa,EAAM,UAAU;KACzB,SAASQ,EAAA;KACV,MAAK;KACJ,OAAK1B,EAAEH,EAAAqC,CAAA,CAAE,CAAA,QAASrC,EAAA8C,CAAA,CAAqB,CAACzB,EAAM,UAAU,sBAAsB,CAAA,CAAA;;;;;;IAEjFpB,EAKEQ,GAAA;KAJC,OAAOY,EAAM,UAAU;KACvB,SAASQ,EAAA;KACV,MAAK;KACL,OAAM;;;GAGV5B,EAKEQ,GAAA;IAJC,OAAOY,EAAM,UAAU;IACvB,SAASQ,EAAA;IACV,MAAK;IACL,OAAM"}

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateComponent.js","names":["_sfc_main","EmptyStateComponent_vue_vue_type_script_setup_true_lang_default","EmptyStateComponent_default"],"sources":["../../../src/components/layout/EmptyStateComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { EmptyStateComponentSchema } from '@alfakit/core'\nimport { colorClass, iconBackgroundColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport ActionList from '../actions/ActionList.vue'\nimport MixedContent from './MixedContent.vue'\n\nconst props = defineProps<{ component: EmptyStateComponentSchema }>()\nconst context = usePageActionContext()\n</script>\n\n<template>\n  <div\n    data-slot=\"empty-state\"\n    :class=\"\n      cn(\n        'flex flex-col items-center justify-center gap-3 px-6 py-10 text-center',\n        props.component.contained && 'rounded-xl border border-dashed',\n      )\n    \"\n    v-bind=\"props.component.extraAttributes\"\n  >\n    <div\n      v-if=\"props.component.icon\"\n      :class=\"\n        cn(\n          'flex size-12 items-center justify-center rounded-full',\n          colorClass(iconBackgroundColorClasses, props.component.color),\n        )\n      \"\n    >\n      <Icon :name=\"props.component.icon\" class=\"size-6\" />\n    </div>\n    <h3 v-if=\"props.component.heading\" class=\"text-base font-semibold\">\n      {{ props.component.heading }}\n    </h3>\n    <div\n      v-if=\"props.component.description\"\n      class=\"text-muted-foreground max-w-md text-sm\"\n      v-html=\"props.component.description\"\n    />\n    <ActionList\n      v-if=\"props.component.actions && props.component.actions.length > 0\"\n      :actions=\"props.component.actions\"\n      :context=\"context\"\n      class=\"mt-2 justify-center\"\n    />\n    <MixedContent\n      :items=\"props.component.footer\"\n      name=\"empty-state-footer\"\n      class=\"justify-center\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"EmptyStateComponent.js","names":["_sfc_main","EmptyStateComponent_vue_vue_type_script_setup_true_lang_default","EmptyStateComponent_default"],"sources":["../../../src/components/layout/EmptyStateComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { EmptyStateComponentSchema } from '@alfakit/core'\nimport { computed } from 'vue'\nimport { colorClass, iconBackgroundColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport { useOptionalFormStore } from '../form/form-context'\nimport ActionList from '../actions/ActionList.vue'\nimport { useFieldActionContext } from '../schema/field-actions'\nimport MixedContent from './MixedContent.vue'\n\nconst props = defineProps<{ component: EmptyStateComponentSchema }>()\n// Inside a form the actions run as field actions of this component, so `$get` / `$set`\n// reach the form (like a section's header actions).\nconst form = useOptionalFormStore()\nconst pageContext = usePageActionContext()\nconst fieldContext = useFieldActionContext(() => props.component)\nconst context = computed(() => (form ? fieldContext.value : pageContext))\n</script>\n\n<template>\n  <div\n    data-slot=\"empty-state\"\n    :class=\"\n      cn(\n        'flex flex-col items-center justify-center gap-3 px-6 py-10 text-center',\n        props.component.contained && 'rounded-xl border border-dashed',\n      )\n    \"\n    v-bind=\"props.component.extraAttributes\"\n  >\n    <div\n      v-if=\"props.component.icon\"\n      :class=\"\n        cn(\n          'flex size-12 items-center justify-center rounded-full',\n          colorClass(iconBackgroundColorClasses, props.component.color),\n        )\n      \"\n    >\n      <Icon :name=\"props.component.icon\" class=\"size-6\" />\n    </div>\n    <h3 v-if=\"props.component.heading\" class=\"text-base font-semibold\">\n      {{ props.component.heading }}\n    </h3>\n    <div\n      v-if=\"props.component.description\"\n      class=\"text-muted-foreground max-w-md text-sm\"\n      v-html=\"props.component.description\"\n    />\n    <ActionList\n      v-if=\"props.component.actions && props.component.actions.length > 0\"\n      :actions=\"props.component.actions\"\n      :context=\"context\"\n      class=\"mt-2 justify-center\"\n    />\n    <MixedContent\n      :items=\"props.component.footer\"\n      :context=\"context\"\n      name=\"empty-state-footer\"\n      class=\"justify-center\"\n    />\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateComponent.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/EmptyStateComponent.vue"],"names":[],"mappings":"AA0DA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;AAQ9D,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,yBAAyB,CAAA;CAAE,CAAC;;AAoH5D,wBAMG"}
+{"version":3,"file":"EmptyStateComponent.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/EmptyStateComponent.vue"],"names":[],"mappings":"AAmEA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;AAW9D,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,yBAAyB,CAAA;CAAE,CAAC;;AA2H5D,wBAMG"}

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

@@ -3,49 +3,52 @@ import { cn as t } from "../../lib/utils.js";
 import { colorClass as n, iconBackgroundColorClasses as r } from "../../lib/colors.js";
 import i from "../../lib/Icon.js";
 import a from "../actions/ActionList.js";
-import o from "./MixedContent.js";
-import { createBlock as s, createCommentVNode as c, createElementBlock as l, createVNode as u, defineComponent as d, mergeProps as f, normalizeClass as p, openBlock as m, toDisplayString as h, unref as g } from "vue";
+import { useOptionalFormStore as o } from "../form/form-context.js";
+import { useFieldActionContext as s } from "../schema/field-actions.js";
+import c from "./MixedContent.js";
+import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createVNode as p, defineComponent as m, mergeProps as h, normalizeClass as g, openBlock as _, toDisplayString as v, unref as y } from "vue";
 //#region src/components/layout/EmptyStateComponent.vue?vue&type=script&setup=true&lang.ts
-var _ = {
+var b = {
 	key: 1,
 	class: "text-base font-semibold"
-}, v = ["innerHTML"], y = /*@__PURE__*/ d({
+}, x = ["innerHTML"], S = /*@__PURE__*/ m({
 	__name: "EmptyStateComponent",
 	props: { component: {} },
-	setup(d) {
-		let y = d, b = e();
-		return (e, d) => (m(), l("div", f({
+	setup(m) {
+		let S = m, C = o(), w = e(), T = s(() => S.component), E = l(() => C ? T.value : w);
+		return (e, o) => (_(), f("div", h({
 			"data-slot": "empty-state",
-			class: g(t)("flex flex-col items-center justify-center gap-3 px-6 py-10 text-center", y.component.contained && "rounded-xl border border-dashed")
-		}, y.component.extraAttributes), [
-			y.component.icon ? (m(), l("div", {
+			class: y(t)("flex flex-col items-center justify-center gap-3 px-6 py-10 text-center", S.component.contained && "rounded-xl border border-dashed")
+		}, S.component.extraAttributes), [
+			S.component.icon ? (_(), f("div", {
 				key: 0,
-				class: p(g(t)("flex size-12 items-center justify-center rounded-full", g(n)(g(r), y.component.color)))
-			}, [u(g(i), {
-				name: y.component.icon,
+				class: g(y(t)("flex size-12 items-center justify-center rounded-full", y(n)(y(r), S.component.color)))
+			}, [p(y(i), {
+				name: S.component.icon,
 				class: "size-6"
-			}, null, 8, ["name"])], 2)) : c("", !0),
-			y.component.heading ? (m(), l("h3", _, h(y.component.heading), 1)) : c("", !0),
-			y.component.description ? (m(), l("div", {
+			}, null, 8, ["name"])], 2)) : d("", !0),
+			S.component.heading ? (_(), f("h3", b, v(S.component.heading), 1)) : d("", !0),
+			S.component.description ? (_(), f("div", {
 				key: 2,
 				class: "text-muted-foreground max-w-md text-sm",
-				innerHTML: y.component.description
-			}, null, 8, v)) : c("", !0),
-			y.component.actions && y.component.actions.length > 0 ? (m(), s(a, {
+				innerHTML: S.component.description
+			}, null, 8, x)) : d("", !0),
+			S.component.actions && S.component.actions.length > 0 ? (_(), u(a, {
 				key: 3,
-				actions: y.component.actions,
-				context: g(b),
+				actions: S.component.actions,
+				context: E.value,
 				class: "mt-2 justify-center"
-			}, null, 8, ["actions", "context"])) : c("", !0),
-			u(o, {
-				items: y.component.footer,
+			}, null, 8, ["actions", "context"])) : d("", !0),
+			p(c, {
+				items: S.component.footer,
+				context: E.value,
 				name: "empty-state-footer",
 				class: "justify-center"
-			}, null, 8, ["items"])
+			}, null, 8, ["items", "context"])
 		], 16));
 	}
 });
 //#endregion
-export { y as default };
+export { S as default };
 
 //# sourceMappingURL=EmptyStateComponent.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateComponent.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_mergeProps","_unref","_normalizeClass","_createVNode","Icon","_createCommentVNode","_toDisplayString","_createBlock","ActionList","MixedContent","Icon_default","ActionList_default","MixedContent_default","_hoisted_1","_hoisted_2","EmptyStateComponent_vue_vue_type_script_setup_true_lang_default","props","__props","context","usePageActionContext","openBlock","createElementBlock","mergeProps","unref","cn","normalizeClass","colorClass","iconBackgroundColorClasses","createVNode","createCommentVNode","toDisplayString","createBlock"],"sources":["../../../src/components/layout/EmptyStateComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { EmptyStateComponentSchema } from '@alfakit/core'\nimport { colorClass, iconBackgroundColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport ActionList from '../actions/ActionList.vue'\nimport MixedContent from './MixedContent.vue'\n\nconst props = defineProps<{ component: EmptyStateComponentSchema }>()\nconst context = usePageActionContext()\n</script>\n\n<template>\n  <div\n    data-slot=\"empty-state\"\n    :class=\"\n      cn(\n        'flex flex-col items-center justify-center gap-3 px-6 py-10 text-center',\n        props.component.contained && 'rounded-xl border border-dashed',\n      )\n    \"\n    v-bind=\"props.component.extraAttributes\"\n  >\n    <div\n      v-if=\"props.component.icon\"\n      :class=\"\n        cn(\n          'flex size-12 items-center justify-center rounded-full',\n          colorClass(iconBackgroundColorClasses, props.component.color),\n        )\n      \"\n    >\n      <Icon :name=\"props.component.icon\" class=\"size-6\" />\n    </div>\n    <h3 v-if=\"props.component.heading\" class=\"text-base font-semibold\">\n      {{ props.component.heading }}\n    </h3>\n    <div\n      v-if=\"props.component.description\"\n      class=\"text-muted-foreground max-w-md text-sm\"\n      v-html=\"props.component.description\"\n    />\n    <ActionList\n      v-if=\"props.component.actions && props.component.actions.length > 0\"\n      :actions=\"props.component.actions\"\n      :context=\"context\"\n      class=\"mt-2 justify-center\"\n    />\n    <MixedContent\n      :items=\"props.component.footer\"\n      name=\"empty-state-footer\"\n      class=\"justify-center\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EASA,IAAMkB,IAAQC,GACRC,IAAUC,EAAqB;oBAInCrB,EAAA,GAAAC,EAwCM,OAxCNC,EAwCM;GAvCJ,aAAU;GACT,OAAcC,EAAAuB,CAAA,CAAE,CAAA,0EAA4FR,EAAM,UAAU,aAAS,iCAAA;EAM9H,GAAAA,EAAM,UAAU,eAAe,GAAA;GAG/BA,EAAM,UAAU,QADxBlB,EAAA,GAAAC,EAUM,OAAA;;IARH,OAAKG,EAAWD,EAAAuB,CAAA,CAAE,CAAA,yDAA+EvB,EAAAyB,CAAA,CAAU,CAACzB,EAAA0B,CAAA,GAA4BX,EAAM,UAAU,KAAK,CAAA,CAAA;GAO9Jb,GAAAA,CAAAA,EAAoDF,EAAAG,CAAA,GAAA;IAA7C,MAAMY,EAAM,UAAU;IAAM,OAAM;;GAEjCA,EAAM,UAAU,WAA1BlB,EAAA,GAAAC,EAEK,MAFLc,GAEKP,EADAU,EAAM,UAAU,OAAO,GAAA,CAAA,KAAAa,EAAA,IAAA,EAAA;GAGpBb,EAAM,UAAU,eADxBlB,EAAA,GAAAC,EAIE,OAAA;;IAFA,OAAM;IACN,WAAQiB,EAAM,UAAU;;GAGlBA,EAAM,UAAU,WAAWA,EAAM,UAAU,QAAQ,SAAM,KADjElB,EAAA,GAAAS,EAKEC,GAAA;;IAHC,SAASQ,EAAM,UAAU;IACzB,SAASf,EAAAiB,CAAA;IACV,OAAM;;GAERf,EAIEM,GAAA;IAHC,OAAOO,EAAM,UAAU;IACxB,MAAK;IACL,OAAM"}
+{"version":3,"file":"EmptyStateComponent.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_mergeProps","_unref","_normalizeClass","_createVNode","Icon","_createCommentVNode","_toDisplayString","_createBlock","ActionList","MixedContent","Icon_default","ActionList_default","MixedContent_default","_hoisted_1","_hoisted_2","EmptyStateComponent_vue_vue_type_script_setup_true_lang_default","props","__props","form","useOptionalFormStore","pageContext","usePageActionContext","fieldContext","useFieldActionContext","context","computed","openBlock","createElementBlock","mergeProps","unref","cn","normalizeClass","colorClass","iconBackgroundColorClasses","createVNode","createCommentVNode","toDisplayString","createBlock"],"sources":["../../../src/components/layout/EmptyStateComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { EmptyStateComponentSchema } from '@alfakit/core'\nimport { computed } from 'vue'\nimport { colorClass, iconBackgroundColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport { useOptionalFormStore } from '../form/form-context'\nimport ActionList from '../actions/ActionList.vue'\nimport { useFieldActionContext } from '../schema/field-actions'\nimport MixedContent from './MixedContent.vue'\n\nconst props = defineProps<{ component: EmptyStateComponentSchema }>()\n// Inside a form the actions run as field actions of this component, so `$get` / `$set`\n// reach the form (like a section's header actions).\nconst form = useOptionalFormStore()\nconst pageContext = usePageActionContext()\nconst fieldContext = useFieldActionContext(() => props.component)\nconst context = computed(() => (form ? fieldContext.value : pageContext))\n</script>\n\n<template>\n  <div\n    data-slot=\"empty-state\"\n    :class=\"\n      cn(\n        'flex flex-col items-center justify-center gap-3 px-6 py-10 text-center',\n        props.component.contained && 'rounded-xl border border-dashed',\n      )\n    \"\n    v-bind=\"props.component.extraAttributes\"\n  >\n    <div\n      v-if=\"props.component.icon\"\n      :class=\"\n        cn(\n          'flex size-12 items-center justify-center rounded-full',\n          colorClass(iconBackgroundColorClasses, props.component.color),\n        )\n      \"\n    >\n      <Icon :name=\"props.component.icon\" class=\"size-6\" />\n    </div>\n    <h3 v-if=\"props.component.heading\" class=\"text-base font-semibold\">\n      {{ props.component.heading }}\n    </h3>\n    <div\n      v-if=\"props.component.description\"\n      class=\"text-muted-foreground max-w-md text-sm\"\n      v-html=\"props.component.description\"\n    />\n    <ActionList\n      v-if=\"props.component.actions && props.component.actions.length > 0\"\n      :actions=\"props.component.actions\"\n      :context=\"context\"\n      class=\"mt-2 justify-center\"\n    />\n    <MixedContent\n      :items=\"props.component.footer\"\n      :context=\"context\"\n      name=\"empty-state-footer\"\n      class=\"justify-center\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAYA,IAAMkB,IAAQC,GAGRC,IAAOC,EAAqB,GAC5BC,IAAcC,EAAqB,GACnCC,IAAeC,QAA4BP,EAAM,SAAS,GAC1DQ,IAAUC,QAAgBP,IAAOI,EAAa,QAAQF,CAAY;oBAItEtB,EAAA,GAAAC,EAyCM,OAzCNC,EAyCM;GAxCJ,aAAU;GACT,OAAcC,EAAA6B,CAAA,CAAE,CAAA,0EAA4Fd,EAAM,UAAU,aAAS,iCAAA;EAM9H,GAAAA,EAAM,UAAU,eAAe,GAAA;GAG/BA,EAAM,UAAU,QADxBlB,EAAA,GAAAC,EAUM,OAAA;;IARH,OAAKG,EAAWD,EAAA6B,CAAA,CAAE,CAAA,yDAA+E7B,EAAA+B,CAAA,CAAU,CAAC/B,EAAAgC,CAAA,GAA4BjB,EAAM,UAAU,KAAK,CAAA,CAAA;GAO9Jb,GAAAA,CAAAA,EAAoDF,EAAAG,CAAA,GAAA;IAA7C,MAAMY,EAAM,UAAU;IAAM,OAAM;;GAEjCA,EAAM,UAAU,WAA1BlB,EAAA,GAAAC,EAEK,MAFLc,GAEKP,EADAU,EAAM,UAAU,OAAO,GAAA,CAAA,KAAAmB,EAAA,IAAA,EAAA;GAGpBnB,EAAM,UAAU,eADxBlB,EAAA,GAAAC,EAIE,OAAA;;IAFA,OAAM;IACN,WAAQiB,EAAM,UAAU;;GAGlBA,EAAM,UAAU,WAAWA,EAAM,UAAU,QAAQ,SAAM,KADjElB,EAAA,GAAAS,EAKEC,GAAA;;IAHC,SAASQ,EAAM,UAAU;IACzB,SAASQ,EAAA;IACV,OAAM;;GAERrB,EAKEM,GAAA;IAJC,OAAOO,EAAM,UAAU;IACvB,SAASQ,EAAA;IACV,MAAK;IACL,OAAM"}

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

@@ -1 +1 @@
-{"version":3,"file":"MixedContent.js","names":["_sfc_main","MixedContent_vue_vue_type_script_setup_true_lang_default","MixedContent_default"],"sources":["../../../src/components/layout/MixedContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { AnyActionSchema, ContentSlotItem, SchemaComponent } from '@alfakit/core'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport ActionList from '../actions/ActionList.vue'\nimport RenderComponent from '../schema/RenderComponent.vue'\n\n/**\n * Actions and components placed in a layout component's fixed spot (a section's\n * `afterHeader()`, a callout's `controls()`). Actions run in the page's action context,\n * like section header actions.\n */\nconst props = defineProps<{\n  items: ContentSlotItem[] | undefined\n  name: string\n  class?: HTMLAttributes['class']\n}>()\n\nconst context = usePageActionContext()\n\ntype Group =\n  | { kind: 'actions'; key: string; actions: AnyActionSchema[] }\n  | { kind: 'component'; key: string; component: SchemaComponent }\n\n// Consecutive actions share one action list so they sit together.\nconst groups = computed<Group[]>(() => {\n  const result: Group[] = []\n\n  for (const item of props.items ?? []) {\n    if (item.action) {\n      const last = result[result.length - 1]\n\n      if (last?.kind === 'actions') {\n        last.actions.push(item.action)\n      } else {\n        result.push({ kind: 'actions', key: `actions-${result.length}`, actions: [item.action] })\n      }\n    } else {\n      result.push({ kind: 'component', key: item.component.key, component: item.component })\n    }\n  }\n\n  return result\n})\n</script>\n\n<template>\n  <div\n    v-if=\"props.items?.length\"\n    :data-slot=\"props.name\"\n    :class=\"cn('flex flex-wrap items-center gap-2', props.class)\"\n  >\n    <template v-for=\"group in groups\" :key=\"group.key\">\n      <ActionList\n        v-if=\"group.kind === 'actions'\"\n        :actions=\"group.actions\"\n        :context=\"context\"\n        size=\"sm\"\n      />\n      <RenderComponent v-else :component=\"group.component\" />\n    </template>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"MixedContent.js","names":["_sfc_main","MixedContent_vue_vue_type_script_setup_true_lang_default","MixedContent_default"],"sources":["../../../src/components/layout/MixedContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type {\n  ActionContext,\n  AnyActionSchema,\n  ContentSlotItem,\n  SchemaComponent,\n} from '@alfakit/core'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport ActionList from '../actions/ActionList.vue'\nimport RenderComponent from '../schema/RenderComponent.vue'\n\n/**\n * Actions and components placed in a layout component's fixed spot (a section's\n * `afterHeader()`, a callout's `controls()`). Actions run in the owner's action context\n * (`context`: inside a form, the owner's field context, so `$get` / `$set` work), else the\n * page's.\n */\nconst props = defineProps<{\n  items: ContentSlotItem[] | undefined\n  name: string\n  class?: HTMLAttributes['class']\n  context?: ActionContext\n}>()\n\nconst pageContext = usePageActionContext()\nconst context = computed(() => props.context ?? pageContext)\n\ntype Group =\n  | { kind: 'actions'; key: string; actions: AnyActionSchema[] }\n  | { kind: 'component'; key: string; component: SchemaComponent }\n\n// Consecutive actions share one action list so they sit together.\nconst groups = computed<Group[]>(() => {\n  const result: Group[] = []\n\n  for (const item of props.items ?? []) {\n    if (item.action) {\n      const last = result[result.length - 1]\n\n      if (last?.kind === 'actions') {\n        last.actions.push(item.action)\n      } else {\n        result.push({ kind: 'actions', key: `actions-${result.length}`, actions: [item.action] })\n      }\n    } else {\n      result.push({ kind: 'component', key: item.component.key, component: item.component })\n    }\n  }\n\n  return result\n})\n</script>\n\n<template>\n  <div\n    v-if=\"props.items?.length\"\n    :data-slot=\"props.name\"\n    :class=\"cn('flex flex-wrap items-center gap-2', props.class)\"\n  >\n    <template v-for=\"group in groups\" :key=\"group.key\">\n      <ActionList\n        v-if=\"group.kind === 'actions'\"\n        :actions=\"group.actions\"\n        :context=\"context\"\n        size=\"sm\"\n      />\n      <RenderComponent v-else :component=\"group.component\" />\n    </template>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/layout/MixedContent.vue.d.ts

@@ -1,14 +1,16 @@
-import type { ContentSlotItem } from '@alfakit/core';
+import type { ActionContext, ContentSlotItem } from '@alfakit/core';
 import { type HTMLAttributes } from 'vue';
 /**
  * Actions and components placed in a layout component's fixed spot (a section's
- * `afterHeader()`, a callout's `controls()`). Actions run in the page's action context,
- * like section header actions.
+ * `afterHeader()`, a callout's `controls()`). Actions run in the owner's action context
+ * (`context`: inside a form, the owner's field context, so `$get` / `$set` work), else the
+ * page's.
  */
 type __VLS_Props = {
     items: ContentSlotItem[] | undefined;
     name: string;
     class?: HTMLAttributes['class'];
+    context?: ActionContext;
 };
 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;

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

@@ -1 +1 @@
-{"version":3,"file":"MixedContent.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/MixedContent.vue"],"names":[],"mappings":"AAkEA,OAAO,KAAK,EAAmB,eAAe,EAAmB,MAAM,eAAe,CAAA;AACtF,OAAO,EAAY,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAMnD;;;;GAIG;AACH,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,eAAe,EAAE,GAAG,SAAS,CAAA;IACpC,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;CAChC,CAAC;;AA+FF,wBAMG"}
+{"version":3,"file":"MixedContent.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/MixedContent.vue"],"names":[],"mappings":"AA0EA,OAAO,KAAK,EACV,aAAa,EAEb,eAAe,EAEhB,MAAM,eAAe,CAAA;AACtB,OAAO,EAAY,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAMnD;;;;;GAKG;AACH,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,eAAe,EAAE,GAAG,SAAS,CAAA;IACpC,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IAC/B,OAAO,CAAC,EAAE,aAAa,CAAA;CACxB,CAAC;;AAgGF,wBAMG"}

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

@@ -15,10 +15,11 @@ var m = ["data-slot"], h = /*@__PURE__*/ l({
 			String,
 			Object,
 			Array
-		] }
+		] },
+		context: {}
 	},
 	setup(l) {
-		let h = l, g = e(), _ = a(() => {
+		let h = l, g = e(), _ = a(() => h.context ?? g), v = a(() => {
 			let e = [];
 			for (let t of h.items ?? []) if (t.action) {
 				let n = e[e.length - 1];
@@ -38,10 +39,10 @@ var m = ["data-slot"], h = /*@__PURE__*/ l({
 			key: 0,
 			"data-slot": h.name,
 			class: u(p(t)("flex flex-wrap items-center gap-2", h.class))
-		}, [(d(!0), c(i, null, f(_.value, (e) => (d(), c(i, { key: e.key }, [e.kind === "actions" ? (d(), o(n, {
+		}, [(d(!0), c(i, null, f(v.value, (e) => (d(), c(i, { key: e.key }, [e.kind === "actions" ? (d(), o(n, {
 			key: 0,
 			actions: e.actions,
-			context: p(g),
+			context: _.value,
 			size: "sm"
 		}, null, 8, ["actions", "context"])) : (d(), o(r, {
 			key: 1,

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

@@ -1 +1 @@
-{"version":3,"file":"MixedContent.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_Fragment","_renderList","_createBlock","ActionList","RenderComponent","_createCommentVNode","ActionList_default","RenderComponent_default","_hoisted_1","MixedContent_vue_vue_type_script_setup_true_lang_default","props","__props","context","usePageActionContext","groups","computed","result","item","last","openBlock","createElementBlock","normalizeClass","unref","cn","Fragment","renderList","group","createBlock","createCommentVNode"],"sources":["../../../src/components/layout/MixedContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { AnyActionSchema, ContentSlotItem, SchemaComponent } from '@alfakit/core'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport ActionList from '../actions/ActionList.vue'\nimport RenderComponent from '../schema/RenderComponent.vue'\n\n/**\n * Actions and components placed in a layout component's fixed spot (a section's\n * `afterHeader()`, a callout's `controls()`). Actions run in the page's action context,\n * like section header actions.\n */\nconst props = defineProps<{\n  items: ContentSlotItem[] | undefined\n  name: string\n  class?: HTMLAttributes['class']\n}>()\n\nconst context = usePageActionContext()\n\ntype Group =\n  | { kind: 'actions'; key: string; actions: AnyActionSchema[] }\n  | { kind: 'component'; key: string; component: SchemaComponent }\n\n// Consecutive actions share one action list so they sit together.\nconst groups = computed<Group[]>(() => {\n  const result: Group[] = []\n\n  for (const item of props.items ?? []) {\n    if (item.action) {\n      const last = result[result.length - 1]\n\n      if (last?.kind === 'actions') {\n        last.actions.push(item.action)\n      } else {\n        result.push({ kind: 'actions', key: `actions-${result.length}`, actions: [item.action] })\n      }\n    } else {\n      result.push({ kind: 'component', key: item.component.key, component: item.component })\n    }\n  }\n\n  return result\n})\n</script>\n\n<template>\n  <div\n    v-if=\"props.items?.length\"\n    :data-slot=\"props.name\"\n    :class=\"cn('flex flex-wrap items-center gap-2', props.class)\"\n  >\n    <template v-for=\"group in groups\" :key=\"group.key\">\n      <ActionList\n        v-if=\"group.kind === 'actions'\"\n        :actions=\"group.actions\"\n        :context=\"context\"\n        size=\"sm\"\n      />\n      <RenderComponent v-else :component=\"group.component\" />\n    </template>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAaA,IAAMc,IAAQC,GAMRC,IAAUC,EAAqB,GAO/BC,IAASC,QAAwB;GACrC,IAAMC,IAAkB,CAAC;GAEzB,KAAK,IAAMC,KAAQP,EAAM,SAAS,CAAC,GACjC,IAAIO,EAAK,QAAQ;IACf,IAAMC,IAAOF,EAAOA,EAAO,SAAS;IAEpC,AAAIE,GAAM,SAAS,YACjBA,EAAK,QAAQ,KAAKD,EAAK,MAAM,IAE7BD,EAAO,KAAK;KAAE,MAAM;KAAW,KAAK,WAAWA,EAAO;KAAU,SAAS,CAACC,EAAK,MAAM;IAAE,CAAC;GAE5F,OACE,EAAO,KAAK;IAAE,MAAM;IAAa,KAAKA,EAAK,UAAU;IAAK,WAAWA,EAAK;GAAU,CAAC;GAIzF,OAAOD;EACT,CAAC;mBAKSN,EAAM,OAAO,UADrBd,EAAA,GAAAC,EAcM,OAAA;;GAZH,aAAWa,EAAM;GACjB,OAAKZ,EAAEC,EAAAwB,CAAA,CAAE,CAAA,qCAAsCb,EAAM,KAAK,CAAA;EAE3Dd,GAAAA,EAAAA,EAAA,EAAA,GAAAC,EAQWG,GAAA,MAAAC,EARea,EAAA,QAAT,OAAuBK,EAAA,GAAAC,EAAAI,GAAA,EAAA,KAAAE,EAAM,IAAA,GAAA,CAEpCA,EAAM,SAAI,aADlB9B,EAAA,GAAAM,EAKEC,GAAA;;GAHC,SAASuB,EAAM;GACf,SAAS3B,EAAAa,CAAA;GACV,MAAK;EAEPhB,GAAAA,MAAAA,GAAAA,CAAAA,WAAAA,SAAAA,CAAAA,MAAAA,EAAA,GAAAM,EAAuDE,GAAA;;GAA9B,WAAWsB,EAAM"}
+{"version":3,"file":"MixedContent.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_Fragment","_renderList","_createBlock","ActionList","RenderComponent","_createCommentVNode","ActionList_default","RenderComponent_default","_hoisted_1","MixedContent_vue_vue_type_script_setup_true_lang_default","props","__props","pageContext","usePageActionContext","context","computed","groups","result","item","last","openBlock","createElementBlock","normalizeClass","unref","cn","Fragment","renderList","group","createBlock","createCommentVNode"],"sources":["../../../src/components/layout/MixedContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type {\n  ActionContext,\n  AnyActionSchema,\n  ContentSlotItem,\n  SchemaComponent,\n} from '@alfakit/core'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport ActionList from '../actions/ActionList.vue'\nimport RenderComponent from '../schema/RenderComponent.vue'\n\n/**\n * Actions and components placed in a layout component's fixed spot (a section's\n * `afterHeader()`, a callout's `controls()`). Actions run in the owner's action context\n * (`context`: inside a form, the owner's field context, so `$get` / `$set` work), else the\n * page's.\n */\nconst props = defineProps<{\n  items: ContentSlotItem[] | undefined\n  name: string\n  class?: HTMLAttributes['class']\n  context?: ActionContext\n}>()\n\nconst pageContext = usePageActionContext()\nconst context = computed(() => props.context ?? pageContext)\n\ntype Group =\n  | { kind: 'actions'; key: string; actions: AnyActionSchema[] }\n  | { kind: 'component'; key: string; component: SchemaComponent }\n\n// Consecutive actions share one action list so they sit together.\nconst groups = computed<Group[]>(() => {\n  const result: Group[] = []\n\n  for (const item of props.items ?? []) {\n    if (item.action) {\n      const last = result[result.length - 1]\n\n      if (last?.kind === 'actions') {\n        last.actions.push(item.action)\n      } else {\n        result.push({ kind: 'actions', key: `actions-${result.length}`, actions: [item.action] })\n      }\n    } else {\n      result.push({ kind: 'component', key: item.component.key, component: item.component })\n    }\n  }\n\n  return result\n})\n</script>\n\n<template>\n  <div\n    v-if=\"props.items?.length\"\n    :data-slot=\"props.name\"\n    :class=\"cn('flex flex-wrap items-center gap-2', props.class)\"\n  >\n    <template v-for=\"group in groups\" :key=\"group.key\">\n      <ActionList\n        v-if=\"group.kind === 'actions'\"\n        :actions=\"group.actions\"\n        :context=\"context\"\n        size=\"sm\"\n      />\n      <RenderComponent v-else :component=\"group.component\" />\n    </template>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAmBA,IAAMc,IAAQC,GAORC,IAAcC,EAAqB,GACnCC,IAAUC,QAAeL,EAAM,WAAWE,CAAW,GAOrDI,IAASD,QAAwB;GACrC,IAAME,IAAkB,CAAC;GAEzB,KAAK,IAAMC,KAAQR,EAAM,SAAS,CAAC,GACjC,IAAIQ,EAAK,QAAQ;IACf,IAAMC,IAAOF,EAAOA,EAAO,SAAS;IAEpC,AAAIE,GAAM,SAAS,YACjBA,EAAK,QAAQ,KAAKD,EAAK,MAAM,IAE7BD,EAAO,KAAK;KAAE,MAAM;KAAW,KAAK,WAAWA,EAAO;KAAU,SAAS,CAACC,EAAK,MAAM;IAAE,CAAC;GAE5F,OACE,EAAO,KAAK;IAAE,MAAM;IAAa,KAAKA,EAAK,UAAU;IAAK,WAAWA,EAAK;GAAU,CAAC;GAIzF,OAAOD;EACT,CAAC;mBAKSP,EAAM,OAAO,UADrBd,EAAA,GAAAC,EAcM,OAAA;;GAZH,aAAWa,EAAM;GACjB,OAAKZ,EAAEC,EAAAyB,CAAA,CAAE,CAAA,qCAAsCd,EAAM,KAAK,CAAA;EAE3Dd,GAAAA,EAAAA,EAAA,EAAA,GAAAC,EAQWG,GAAA,MAAAC,EARee,EAAA,QAAT,OAAuBI,EAAA,GAAAC,EAAAI,GAAA,EAAA,KAAAE,EAAM,IAAA,GAAA,CAEpCA,EAAM,SAAI,aADlB/B,EAAA,GAAAM,EAKEC,GAAA;;GAHC,SAASwB,EAAM;GACf,SAASb,EAAA;GACV,MAAK;EAEPlB,GAAAA,MAAAA,GAAAA,CAAAA,WAAAA,SAAAA,CAAAA,MAAAA,EAAA,GAAAM,EAAuDE,GAAA;;GAA9B,WAAWuB,EAAM"}

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

@@ -1 +1 @@
-{"version":3,"file":"SectionComponent.js","names":["_sfc_main","SectionComponent_vue_vue_type_script_setup_true_lang_default","SectionComponent_default"],"sources":["../../../src/components/layout/SectionComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { SectionSchema } from '@alfakit/core'\nimport {\n  actionsAlignmentClass,\n  headingTag,\n  readPersisted,\n  schemaGapClass,\n  writePersisted,\n} from '@alfakit/core'\nimport { ChevronDownIcon } from '@lucide/vue'\nimport { computed, onMounted, ref } from 'vue'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport { useOptionalFormStore } from '../form/form-context'\nimport { useFieldActionContext } from '../schema/field-actions'\nimport ActionList from '../actions/ActionList.vue'\nimport SchemaRenderer from '../schema/SchemaRenderer.vue'\nimport Button from '../ui/Button.vue'\nimport Collapsible from '../ui/Collapsible.vue'\nimport CollapsibleContent from '../ui/CollapsibleContent.vue'\nimport CollapsibleTrigger from '../ui/CollapsibleTrigger.vue'\nimport { useT } from '../../context'\nimport DeferredSchema from './DeferredSchema.vue'\nimport MixedContent from './MixedContent.vue'\n\nconst props = defineProps<{ component: SectionSchema }>()\nconst open = ref(!props.component.collapsed)\n// Inside a form the section's actions run as field actions, so `$get` / `$set` work.\nconst sectionForm = useOptionalFormStore()\nconst pageContext = usePageActionContext()\nconst fieldContext = useFieldActionContext(() => props.component)\nconst context = computed(() => (sectionForm ? fieldContext.value : pageContext))\nconst heading = computed(() => headingTag(props.component.headingLevel))\nconst hasHeader = computed(() =>\n  Boolean(\n    props.component.heading ||\n    props.component.description ||\n    props.component.icon ||\n    props.component.headerActions?.length ||\n    props.component.afterHeader?.length,\n  ),\n)\n\n// Stored after mounting, so the server render and hydration use the schema's default.\nonMounted(() => {\n  const key = props.component.persistCollapsed\n\n  if (!key) return\n\n  const stored = readPersisted(key)\n\n  if (stored !== null) open.value = stored !== 'collapsed'\n})\n\nfunction setOpen(next: boolean) {\n  open.value = next\n\n  if (props.component.persistCollapsed) {\n    writePersisted(props.component.persistCollapsed, next ? 'expanded' : 'collapsed')\n  }\n}\nconst hasFooterActions = computed(() => Boolean(props.component.footerActions?.length))\nconst hasFooter = computed(() => hasFooterActions.value || Boolean(props.component.footer?.length))\nconst t = useT()\n</script>\n\n<template>\n  <Collapsible\n    v-if=\"props.component.aside\"\n    :open=\"!props.component.collapsible || open\"\n    as-child\n    @update:open=\"setOpen($event)\"\n  >\n    <section\n      data-slot=\"section\"\n      class=\"grid gap-6 lg:grid-cols-3\"\n      v-bind=\"props.component.extraAttributes\"\n    >\n      <div v-if=\"hasHeader\" class=\"flex flex-wrap items-start gap-3 lg:col-span-1\">\n        <Icon\n          v-if=\"props.component.icon\"\n          :name=\"props.component.icon\"\n          class=\"text-muted-foreground mt-0.5 size-5\"\n        />\n        <div class=\"min-w-0 flex-1 basis-48\">\n          <component\n            :is=\"heading\"\n            v-if=\"props.component.heading\"\n            class=\"text-base leading-6 font-semibold break-words\"\n          >\n            {{ props.component.heading }}\n          </component>\n          <p\n            v-if=\"props.component.description\"\n            class=\"text-muted-foreground mt-1 text-sm break-words\"\n          >\n            {{ props.component.description }}\n          </p>\n        </div>\n        <ActionList\n          v-if=\"props.component.headerActions && props.component.headerActions.length > 0\"\n          :actions=\"props.component.headerActions\"\n          :context=\"context\"\n          size=\"sm\"\n        />\n        <MixedContent :items=\"props.component.afterHeader\" name=\"section-after-header\" />\n        <CollapsibleTrigger v-if=\"props.component.collapsible\" as-child>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            :aria-label=\"t('toggle_section', {}, 'Toggle section')\"\n          >\n            <Icon\n              name=\"alfakit::schemas.section.collapse-button\"\n              :fallback=\"ChevronDownIcon\"\n              :class=\"cn('transition-transform', open && 'rotate-180')\"\n            />\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <CollapsibleContent as-child>\n        <div\n          data-surface=\"section\"\n          :class=\"\n            cn(\n              'bg-card rounded-xl border shadow-xs lg:col-span-2',\n              props.component.secondary && 'bg-muted/40',\n            )\n          \"\n        >\n          <div :class=\"cn('p-6', props.component.compact && 'p-4')\">\n            <DeferredSchema v-slot=\"{ component: loaded }\" :component=\"props.component\">\n              <SchemaRenderer\n                :components=\"loaded.schema ?? []\"\n                :columns=\"loaded.columns\"\n                :class=\"schemaGapClass(loaded) || undefined\"\n              />\n            </DeferredSchema>\n          </div>\n          <div\n            v-if=\"hasFooter\"\n            data-slot=\"section-footer\"\n            :class=\"\n              cn(\n                'flex flex-wrap items-center gap-3 border-t px-6 py-4',\n                props.component.compact && 'px-4 py-3',\n              )\n            \"\n          >\n            <ActionList\n              v-if=\"hasFooterActions\"\n              :actions=\"props.component.footerActions!\"\n              :context=\"context\"\n              :class=\"actionsAlignmentClass(props.component.footerActionsAlignment) || undefined\"\n            />\n            <MixedContent :items=\"props.component.footer\" name=\"section-footer-content\" />\n          </div>\n        </div>\n      </CollapsibleContent>\n    </section>\n  </Collapsible>\n  <Collapsible\n    v-else\n    :open=\"!props.component.collapsible || open\"\n    as-child\n    @update:open=\"setOpen($event)\"\n  >\n    <section\n      data-slot=\"section\"\n      data-surface=\"section\"\n      :class=\"cn('bg-card rounded-xl border shadow-xs', props.component.secondary && 'bg-muted/40')\"\n      v-bind=\"props.component.extraAttributes\"\n    >\n      <div\n        v-if=\"hasHeader\"\n        :class=\"\n          cn(\n            'flex flex-wrap items-start gap-3 border-b px-6 py-4',\n            props.component.compact && 'px-4 py-3',\n          )\n        \"\n      >\n        <Icon\n          v-if=\"props.component.icon\"\n          :name=\"props.component.icon\"\n          class=\"text-muted-foreground mt-0.5 size-5\"\n        />\n        <div class=\"min-w-0 flex-1 basis-48\">\n          <component\n            :is=\"heading\"\n            v-if=\"props.component.heading\"\n            class=\"text-base leading-6 font-semibold break-words\"\n          >\n            {{ props.component.heading }}\n          </component>\n          <p\n            v-if=\"props.component.description\"\n            class=\"text-muted-foreground mt-1 text-sm break-words\"\n          >\n            {{ props.component.description }}\n          </p>\n        </div>\n        <ActionList\n          v-if=\"props.component.headerActions && props.component.headerActions.length > 0\"\n          :actions=\"props.component.headerActions\"\n          :context=\"context\"\n          size=\"sm\"\n        />\n        <MixedContent :items=\"props.component.afterHeader\" name=\"section-after-header\" />\n        <CollapsibleTrigger v-if=\"props.component.collapsible\" as-child>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            :aria-label=\"t('toggle_section', {}, 'Toggle section')\"\n          >\n            <Icon\n              name=\"alfakit::schemas.section.collapse-button\"\n              :fallback=\"ChevronDownIcon\"\n              :class=\"cn('transition-transform', open && 'rotate-180')\"\n            />\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <CollapsibleContent>\n        <div :class=\"cn('p-6', props.component.compact && 'p-4')\">\n          <DeferredSchema v-slot=\"{ component: loaded }\" :component=\"props.component\">\n            <SchemaRenderer\n              :components=\"loaded.schema ?? []\"\n              :columns=\"loaded.columns\"\n              :class=\"schemaGapClass(loaded) || undefined\"\n            />\n          </DeferredSchema>\n        </div>\n        <div\n          v-if=\"hasFooter\"\n          data-slot=\"section-footer\"\n          :class=\"\n            cn(\n              'flex flex-wrap items-center gap-3 border-t px-6 py-4',\n              props.component.compact && 'px-4 py-3',\n            )\n          \"\n        >\n          <ActionList\n            v-if=\"hasFooterActions\"\n            :actions=\"props.component.footerActions!\"\n            :context=\"context\"\n            :class=\"actionsAlignmentClass(props.component.footerActionsAlignment) || undefined\"\n          />\n          <MixedContent :items=\"props.component.footer\" name=\"section-footer-content\" />\n        </div>\n      </CollapsibleContent>\n    </section>\n  </Collapsible>\n</template>\n"],"mappings":""}
+{"version":3,"file":"SectionComponent.js","names":["_sfc_main","SectionComponent_vue_vue_type_script_setup_true_lang_default","SectionComponent_default"],"sources":["../../../src/components/layout/SectionComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { SectionSchema } from '@alfakit/core'\nimport {\n  actionsAlignmentClass,\n  headingTag,\n  readPersisted,\n  schemaGapClass,\n  writePersisted,\n} from '@alfakit/core'\nimport { ChevronDownIcon } from '@lucide/vue'\nimport { computed, onMounted, ref } from 'vue'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport { useOptionalFormStore } from '../form/form-context'\nimport { useFieldActionContext } from '../schema/field-actions'\nimport ActionList from '../actions/ActionList.vue'\nimport SchemaRenderer from '../schema/SchemaRenderer.vue'\nimport Button from '../ui/Button.vue'\nimport Collapsible from '../ui/Collapsible.vue'\nimport CollapsibleContent from '../ui/CollapsibleContent.vue'\nimport CollapsibleTrigger from '../ui/CollapsibleTrigger.vue'\nimport { useT } from '../../context'\nimport DeferredSchema from './DeferredSchema.vue'\nimport MixedContent from './MixedContent.vue'\n\nconst props = defineProps<{ component: SectionSchema }>()\nconst open = ref(!props.component.collapsed)\n// Inside a form the section's actions run as field actions, so `$get` / `$set` work.\nconst sectionForm = useOptionalFormStore()\nconst pageContext = usePageActionContext()\nconst fieldContext = useFieldActionContext(() => props.component)\nconst context = computed(() => (sectionForm ? fieldContext.value : pageContext))\nconst heading = computed(() => headingTag(props.component.headingLevel))\nconst hasHeader = computed(() =>\n  Boolean(\n    props.component.heading ||\n    props.component.description ||\n    props.component.icon ||\n    props.component.headerActions?.length ||\n    props.component.afterHeader?.length,\n  ),\n)\n\n// Stored after mounting, so the server render and hydration use the schema's default.\nonMounted(() => {\n  const key = props.component.persistCollapsed\n\n  if (!key) return\n\n  const stored = readPersisted(key)\n\n  if (stored !== null) open.value = stored !== 'collapsed'\n})\n\nfunction setOpen(next: boolean) {\n  open.value = next\n\n  if (props.component.persistCollapsed) {\n    writePersisted(props.component.persistCollapsed, next ? 'expanded' : 'collapsed')\n  }\n}\nconst hasFooterActions = computed(() => Boolean(props.component.footerActions?.length))\nconst hasFooter = computed(() => hasFooterActions.value || Boolean(props.component.footer?.length))\nconst t = useT()\n</script>\n\n<template>\n  <Collapsible\n    v-if=\"props.component.aside\"\n    :open=\"!props.component.collapsible || open\"\n    as-child\n    @update:open=\"setOpen($event)\"\n  >\n    <section\n      data-slot=\"section\"\n      class=\"grid gap-6 lg:grid-cols-3\"\n      v-bind=\"props.component.extraAttributes\"\n    >\n      <div v-if=\"hasHeader\" class=\"flex flex-wrap items-start gap-3 lg:col-span-1\">\n        <Icon\n          v-if=\"props.component.icon\"\n          :name=\"props.component.icon\"\n          class=\"text-muted-foreground mt-0.5 size-5\"\n        />\n        <div class=\"min-w-0 flex-1 basis-48\">\n          <component\n            :is=\"heading\"\n            v-if=\"props.component.heading\"\n            class=\"text-base leading-6 font-semibold break-words\"\n          >\n            {{ props.component.heading }}\n          </component>\n          <p\n            v-if=\"props.component.description\"\n            class=\"text-muted-foreground mt-1 text-sm break-words\"\n          >\n            {{ props.component.description }}\n          </p>\n        </div>\n        <ActionList\n          v-if=\"props.component.headerActions && props.component.headerActions.length > 0\"\n          :actions=\"props.component.headerActions\"\n          :context=\"context\"\n          size=\"sm\"\n        />\n        <MixedContent\n          :items=\"props.component.afterHeader\"\n          name=\"section-after-header\"\n          :context=\"context\"\n        />\n        <CollapsibleTrigger v-if=\"props.component.collapsible\" as-child>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            :aria-label=\"t('toggle_section', {}, 'Toggle section')\"\n          >\n            <Icon\n              name=\"alfakit::schemas.section.collapse-button\"\n              :fallback=\"ChevronDownIcon\"\n              :class=\"cn('transition-transform', open && 'rotate-180')\"\n            />\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <CollapsibleContent as-child>\n        <div\n          data-surface=\"section\"\n          :class=\"\n            cn(\n              'bg-card rounded-xl border shadow-xs lg:col-span-2',\n              props.component.secondary && 'bg-muted/40',\n            )\n          \"\n        >\n          <div :class=\"cn('p-6', props.component.compact && 'p-4')\">\n            <DeferredSchema v-slot=\"{ component: loaded }\" :component=\"props.component\">\n              <SchemaRenderer\n                :components=\"loaded.schema ?? []\"\n                :columns=\"loaded.columns\"\n                :class=\"schemaGapClass(loaded) || undefined\"\n              />\n            </DeferredSchema>\n          </div>\n          <div\n            v-if=\"hasFooter\"\n            data-slot=\"section-footer\"\n            :class=\"\n              cn(\n                'flex flex-wrap items-center gap-3 border-t px-6 py-4',\n                props.component.compact && 'px-4 py-3',\n              )\n            \"\n          >\n            <ActionList\n              v-if=\"hasFooterActions\"\n              :actions=\"props.component.footerActions!\"\n              :context=\"context\"\n              :class=\"actionsAlignmentClass(props.component.footerActionsAlignment) || undefined\"\n            />\n            <MixedContent\n              :items=\"props.component.footer\"\n              name=\"section-footer-content\"\n              :context=\"context\"\n            />\n          </div>\n        </div>\n      </CollapsibleContent>\n    </section>\n  </Collapsible>\n  <Collapsible\n    v-else\n    :open=\"!props.component.collapsible || open\"\n    as-child\n    @update:open=\"setOpen($event)\"\n  >\n    <section\n      data-slot=\"section\"\n      data-surface=\"section\"\n      :class=\"cn('bg-card rounded-xl border shadow-xs', props.component.secondary && 'bg-muted/40')\"\n      v-bind=\"props.component.extraAttributes\"\n    >\n      <div\n        v-if=\"hasHeader\"\n        :class=\"\n          cn(\n            'flex flex-wrap items-start gap-3 border-b px-6 py-4',\n            props.component.compact && 'px-4 py-3',\n          )\n        \"\n      >\n        <Icon\n          v-if=\"props.component.icon\"\n          :name=\"props.component.icon\"\n          class=\"text-muted-foreground mt-0.5 size-5\"\n        />\n        <div class=\"min-w-0 flex-1 basis-48\">\n          <component\n            :is=\"heading\"\n            v-if=\"props.component.heading\"\n            class=\"text-base leading-6 font-semibold break-words\"\n          >\n            {{ props.component.heading }}\n          </component>\n          <p\n            v-if=\"props.component.description\"\n            class=\"text-muted-foreground mt-1 text-sm break-words\"\n          >\n            {{ props.component.description }}\n          </p>\n        </div>\n        <ActionList\n          v-if=\"props.component.headerActions && props.component.headerActions.length > 0\"\n          :actions=\"props.component.headerActions\"\n          :context=\"context\"\n          size=\"sm\"\n        />\n        <MixedContent\n          :items=\"props.component.afterHeader\"\n          name=\"section-after-header\"\n          :context=\"context\"\n        />\n        <CollapsibleTrigger v-if=\"props.component.collapsible\" as-child>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            :aria-label=\"t('toggle_section', {}, 'Toggle section')\"\n          >\n            <Icon\n              name=\"alfakit::schemas.section.collapse-button\"\n              :fallback=\"ChevronDownIcon\"\n              :class=\"cn('transition-transform', open && 'rotate-180')\"\n            />\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <CollapsibleContent>\n        <div :class=\"cn('p-6', props.component.compact && 'p-4')\">\n          <DeferredSchema v-slot=\"{ component: loaded }\" :component=\"props.component\">\n            <SchemaRenderer\n              :components=\"loaded.schema ?? []\"\n              :columns=\"loaded.columns\"\n              :class=\"schemaGapClass(loaded) || undefined\"\n            />\n          </DeferredSchema>\n        </div>\n        <div\n          v-if=\"hasFooter\"\n          data-slot=\"section-footer\"\n          :class=\"\n            cn(\n              'flex flex-wrap items-center gap-3 border-t px-6 py-4',\n              props.component.compact && 'px-4 py-3',\n            )\n          \"\n        >\n          <ActionList\n            v-if=\"hasFooterActions\"\n            :actions=\"props.component.footerActions!\"\n            :context=\"context\"\n            :class=\"actionsAlignmentClass(props.component.footerActionsAlignment) || undefined\"\n          />\n          <MixedContent\n            :items=\"props.component.footer\"\n            name=\"section-footer-content\"\n            :context=\"context\"\n          />\n        </div>\n      </CollapsibleContent>\n    </section>\n  </Collapsible>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"SectionComponent.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/SectionComponent.vue"],"names":[],"mappings":"AAoQA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAyBlD,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,aAAa,CAAA;CAAE,CAAC;;AA6iBhD,wBAMG"}
+{"version":3,"file":"SectionComponent.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/SectionComponent.vue"],"names":[],"mappings":"AAoRA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAyBlD,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,aAAa,CAAA;CAAE,CAAC;;AAqjBhD,wBAMG"}

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

@@ -70,8 +70,9 @@ var L = {
 				}, null, 8, ["actions", "context"])) : x("", !0),
 				T(f, {
 					items: H.component.afterHeader,
-					name: "section-after-header"
-				}, null, 8, ["items"]),
+					name: "section-after-header",
+					context: q.value
+				}, null, 8, ["items", "context"]),
 				H.component.collapsible ? (A(), b(p, {
 					key: 2,
 					"as-child": ""
@@ -121,8 +122,9 @@ var L = {
 					"class"
 				])) : x("", !0), T(f, {
 					items: H.component.footer,
-					name: "section-footer-content"
-				}, null, 8, ["items"])], 2)) : x("", !0)], 2)]),
+					name: "section-footer-content",
+					context: q.value
+				}, null, 8, ["items", "context"])], 2)) : x("", !0)], 2)]),
 				_: 1
 			})], 16)]),
 			_: 1
@@ -160,8 +162,9 @@ var L = {
 				}, null, 8, ["actions", "context"])) : x("", !0),
 				T(f, {
 					items: H.component.afterHeader,
-					name: "section-after-header"
-				}, null, 8, ["items"]),
+					name: "section-after-header",
+					context: q.value
+				}, null, 8, ["items", "context"]),
 				H.component.collapsible ? (A(), b(p, {
 					key: 2,
 					"as-child": ""
@@ -208,8 +211,9 @@ var L = {
 					"class"
 				])) : x("", !0), T(f, {
 					items: H.component.footer,
-					name: "section-footer-content"
-				}, null, 8, ["items"])], 2)) : x("", !0)]),
+					name: "section-footer-content",
+					context: q.value
+				}, null, 8, ["items", "context"])], 2)) : x("", !0)]),
 				_: 1
 			})], 16)]),
 			_: 1

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

@@ -1 +1 @@
-{"version":3,"file":"SectionComponent.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","Collapsible","_withCtx","_createElementVNode","_mergeProps","_createElementBlock","_unref","Icon","_createCommentVNode","_resolveDynamicComponent","_createTextVNode","_toDisplayString","ActionList","_createVNode","MixedContent","CollapsibleTrigger","Button","_normalizeClass","CollapsibleContent","DeferredSchema","SchemaRenderer","Icon_default","Button_default","ActionList_default","SchemaRenderer_default","DeferredSchema_default","Collapsible_default","CollapsibleContent_default","MixedContent_default","CollapsibleTrigger_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","SectionComponent_vue_vue_type_script_setup_true_lang_default","props","__props","open","ref","sectionForm","useOptionalFormStore","pageContext","usePageActionContext","fieldContext","useFieldActionContext","context","computed","heading","headingTag","hasHeader","key","stored","readPersisted","setOpen","next","writePersisted","hasFooterActions","hasFooter","t","useT","openBlock","createBlock","_cache","$event","withCtx","createElementVNode","mergeProps","createElementBlock","unref","createCommentVNode","resolveDynamicComponent","createTextVNode","toDisplayString","createVNode","ChevronDownIcon","normalizeClass","cn","loaded","schemaGapClass","actionsAlignmentClass"],"sources":["../../../src/components/layout/SectionComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { SectionSchema } from '@alfakit/core'\nimport {\n  actionsAlignmentClass,\n  headingTag,\n  readPersisted,\n  schemaGapClass,\n  writePersisted,\n} from '@alfakit/core'\nimport { ChevronDownIcon } from '@lucide/vue'\nimport { computed, onMounted, ref } from 'vue'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport { useOptionalFormStore } from '../form/form-context'\nimport { useFieldActionContext } from '../schema/field-actions'\nimport ActionList from '../actions/ActionList.vue'\nimport SchemaRenderer from '../schema/SchemaRenderer.vue'\nimport Button from '../ui/Button.vue'\nimport Collapsible from '../ui/Collapsible.vue'\nimport CollapsibleContent from '../ui/CollapsibleContent.vue'\nimport CollapsibleTrigger from '../ui/CollapsibleTrigger.vue'\nimport { useT } from '../../context'\nimport DeferredSchema from './DeferredSchema.vue'\nimport MixedContent from './MixedContent.vue'\n\nconst props = defineProps<{ component: SectionSchema }>()\nconst open = ref(!props.component.collapsed)\n// Inside a form the section's actions run as field actions, so `$get` / `$set` work.\nconst sectionForm = useOptionalFormStore()\nconst pageContext = usePageActionContext()\nconst fieldContext = useFieldActionContext(() => props.component)\nconst context = computed(() => (sectionForm ? fieldContext.value : pageContext))\nconst heading = computed(() => headingTag(props.component.headingLevel))\nconst hasHeader = computed(() =>\n  Boolean(\n    props.component.heading ||\n    props.component.description ||\n    props.component.icon ||\n    props.component.headerActions?.length ||\n    props.component.afterHeader?.length,\n  ),\n)\n\n// Stored after mounting, so the server render and hydration use the schema's default.\nonMounted(() => {\n  const key = props.component.persistCollapsed\n\n  if (!key) return\n\n  const stored = readPersisted(key)\n\n  if (stored !== null) open.value = stored !== 'collapsed'\n})\n\nfunction setOpen(next: boolean) {\n  open.value = next\n\n  if (props.component.persistCollapsed) {\n    writePersisted(props.component.persistCollapsed, next ? 'expanded' : 'collapsed')\n  }\n}\nconst hasFooterActions = computed(() => Boolean(props.component.footerActions?.length))\nconst hasFooter = computed(() => hasFooterActions.value || Boolean(props.component.footer?.length))\nconst t = useT()\n</script>\n\n<template>\n  <Collapsible\n    v-if=\"props.component.aside\"\n    :open=\"!props.component.collapsible || open\"\n    as-child\n    @update:open=\"setOpen($event)\"\n  >\n    <section\n      data-slot=\"section\"\n      class=\"grid gap-6 lg:grid-cols-3\"\n      v-bind=\"props.component.extraAttributes\"\n    >\n      <div v-if=\"hasHeader\" class=\"flex flex-wrap items-start gap-3 lg:col-span-1\">\n        <Icon\n          v-if=\"props.component.icon\"\n          :name=\"props.component.icon\"\n          class=\"text-muted-foreground mt-0.5 size-5\"\n        />\n        <div class=\"min-w-0 flex-1 basis-48\">\n          <component\n            :is=\"heading\"\n            v-if=\"props.component.heading\"\n            class=\"text-base leading-6 font-semibold break-words\"\n          >\n            {{ props.component.heading }}\n          </component>\n          <p\n            v-if=\"props.component.description\"\n            class=\"text-muted-foreground mt-1 text-sm break-words\"\n          >\n            {{ props.component.description }}\n          </p>\n        </div>\n        <ActionList\n          v-if=\"props.component.headerActions && props.component.headerActions.length > 0\"\n          :actions=\"props.component.headerActions\"\n          :context=\"context\"\n          size=\"sm\"\n        />\n        <MixedContent :items=\"props.component.afterHeader\" name=\"section-after-header\" />\n        <CollapsibleTrigger v-if=\"props.component.collapsible\" as-child>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            :aria-label=\"t('toggle_section', {}, 'Toggle section')\"\n          >\n            <Icon\n              name=\"alfakit::schemas.section.collapse-button\"\n              :fallback=\"ChevronDownIcon\"\n              :class=\"cn('transition-transform', open && 'rotate-180')\"\n            />\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <CollapsibleContent as-child>\n        <div\n          data-surface=\"section\"\n          :class=\"\n            cn(\n              'bg-card rounded-xl border shadow-xs lg:col-span-2',\n              props.component.secondary && 'bg-muted/40',\n            )\n          \"\n        >\n          <div :class=\"cn('p-6', props.component.compact && 'p-4')\">\n            <DeferredSchema v-slot=\"{ component: loaded }\" :component=\"props.component\">\n              <SchemaRenderer\n                :components=\"loaded.schema ?? []\"\n                :columns=\"loaded.columns\"\n                :class=\"schemaGapClass(loaded) || undefined\"\n              />\n            </DeferredSchema>\n          </div>\n          <div\n            v-if=\"hasFooter\"\n            data-slot=\"section-footer\"\n            :class=\"\n              cn(\n                'flex flex-wrap items-center gap-3 border-t px-6 py-4',\n                props.component.compact && 'px-4 py-3',\n              )\n            \"\n          >\n            <ActionList\n              v-if=\"hasFooterActions\"\n              :actions=\"props.component.footerActions!\"\n              :context=\"context\"\n              :class=\"actionsAlignmentClass(props.component.footerActionsAlignment) || undefined\"\n            />\n            <MixedContent :items=\"props.component.footer\" name=\"section-footer-content\" />\n          </div>\n        </div>\n      </CollapsibleContent>\n    </section>\n  </Collapsible>\n  <Collapsible\n    v-else\n    :open=\"!props.component.collapsible || open\"\n    as-child\n    @update:open=\"setOpen($event)\"\n  >\n    <section\n      data-slot=\"section\"\n      data-surface=\"section\"\n      :class=\"cn('bg-card rounded-xl border shadow-xs', props.component.secondary && 'bg-muted/40')\"\n      v-bind=\"props.component.extraAttributes\"\n    >\n      <div\n        v-if=\"hasHeader\"\n        :class=\"\n          cn(\n            'flex flex-wrap items-start gap-3 border-b px-6 py-4',\n            props.component.compact && 'px-4 py-3',\n          )\n        \"\n      >\n        <Icon\n          v-if=\"props.component.icon\"\n          :name=\"props.component.icon\"\n          class=\"text-muted-foreground mt-0.5 size-5\"\n        />\n        <div class=\"min-w-0 flex-1 basis-48\">\n          <component\n            :is=\"heading\"\n            v-if=\"props.component.heading\"\n            class=\"text-base leading-6 font-semibold break-words\"\n          >\n            {{ props.component.heading }}\n          </component>\n          <p\n            v-if=\"props.component.description\"\n            class=\"text-muted-foreground mt-1 text-sm break-words\"\n          >\n            {{ props.component.description }}\n          </p>\n        </div>\n        <ActionList\n          v-if=\"props.component.headerActions && props.component.headerActions.length > 0\"\n          :actions=\"props.component.headerActions\"\n          :context=\"context\"\n          size=\"sm\"\n        />\n        <MixedContent :items=\"props.component.afterHeader\" name=\"section-after-header\" />\n        <CollapsibleTrigger v-if=\"props.component.collapsible\" as-child>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            :aria-label=\"t('toggle_section', {}, 'Toggle section')\"\n          >\n            <Icon\n              name=\"alfakit::schemas.section.collapse-button\"\n              :fallback=\"ChevronDownIcon\"\n              :class=\"cn('transition-transform', open && 'rotate-180')\"\n            />\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <CollapsibleContent>\n        <div :class=\"cn('p-6', props.component.compact && 'p-4')\">\n          <DeferredSchema v-slot=\"{ component: loaded }\" :component=\"props.component\">\n            <SchemaRenderer\n              :components=\"loaded.schema ?? []\"\n              :columns=\"loaded.columns\"\n              :class=\"schemaGapClass(loaded) || undefined\"\n            />\n          </DeferredSchema>\n        </div>\n        <div\n          v-if=\"hasFooter\"\n          data-slot=\"section-footer\"\n          :class=\"\n            cn(\n              'flex flex-wrap items-center gap-3 border-t px-6 py-4',\n              props.component.compact && 'px-4 py-3',\n            )\n          \"\n        >\n          <ActionList\n            v-if=\"hasFooterActions\"\n            :actions=\"props.component.footerActions!\"\n            :context=\"context\"\n            :class=\"actionsAlignmentClass(props.component.footerActionsAlignment) || undefined\"\n          />\n          <MixedContent :items=\"props.component.footer\" name=\"section-footer-content\" />\n        </div>\n      </CollapsibleContent>\n    </section>\n  </Collapsible>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BA,IAAMqC,IAAQC,GACRC,IAAOC,EAAI,CAACH,EAAM,UAAU,SAAS,GAErCI,IAAcC,EAAqB,GACnCC,IAAcC,EAAqB,GACnCC,IAAeC,QAA4BT,EAAM,SAAS,GAC1DU,IAAUC,QAAgBP,IAAcI,EAAa,QAAQF,CAAY,GACzEM,IAAUD,QAAeE,EAAWb,EAAM,UAAU,YAAY,CAAC,GACjEc,IAAYH,QAChB,GACEX,EAAM,UAAU,WAChBA,EAAM,UAAU,eAChBA,EAAM,UAAU,QAChBA,EAAM,UAAU,eAAe,UAC/BA,EAAM,UAAU,aAAa,OAEjC;EAGA,QAAgB;GACd,IAAMe,IAAMf,EAAM,UAAU;GAE5B,IAAI,CAACe,GAAK;GAEV,IAAMC,IAASC,EAAcF,CAAG;GAEhC,AAAIC,MAAW,SAAM,EAAK,QAAQA,MAAW;EAC/C,CAAC;EAED,SAASE,EAAQ,GAAe;GAG9B,AAFA,EAAK,QAAQC,GAETnB,EAAM,UAAU,oBAClBoB,EAAepB,EAAM,UAAU,kBAAkBmB,IAAO,aAAa,WAAW;EAEpF;EACA,IAAME,IAAmBV,QAAe,EAAQX,EAAM,UAAU,eAAe,MAAO,GAChFsB,IAAYX,QAAeU,EAAiB,SAAS,EAAQrB,EAAM,UAAU,QAAQ,MAAO,GAC5FuB,IAAIC,EAAK;mBAKLxB,EAAM,UAAU,SADxBrC,EAAA,GAAAC,EA8FcC,GAAA;;GA5FX,MAAI,CAAGmC,EAAM,UAAU,eAAeE,EAAA;GACvC,YAAA;GACC,iBAAW,AAAAyB,EAAA,QAAA,MAAET,EAAQU,CAAM;;GAE5B,SAAA9D,QAuFU,CAvFVC,EAuFU,WAvFVC,EAuFU;IAtFR,aAAU;IACV,OAAM;GACE,GAAAgC,EAAM,UAAU,eAAe,GAAA,CAE5Bc,EAAA,SAAXnD,EAAA,GAAAM,EA0CM,OA1CNyB,GA0CM;IAxCIM,EAAM,UAAU,QADxBrC,EAAA,GAAAC,EAIEM,EAAAC,CAAA,GAAA;;KAFC,MAAM6B,EAAM,UAAU;KACvB,OAAM;;IAERjC,EAcM,OAdN4B,GAcM,CAXIK,EAAM,UAAU,WAFxBrC,EAAA,GAAAC,EAMYS,EALLuC,EAAA,KAAO,GAAA;;KAEZ,OAAM;;KAEN,SAAA9C,QAA6B,CAA1BQ,EAAAC,EAAAyB,EAAM,UAAU,OAAO,GAAA,CAAA,CAAA,CAAA;;IAGpB,CAAA,KAAAkC,EAAA,IAAA,EAAA,GAAAlC,EAAM,UAAU,eADxBrC,EAAA,GAAAM,EAKI,KALJ2B,GAKIrB,EADCyB,EAAM,UAAU,WAAW,GAAA,CAAA,KAAAkC,EAAA,IAAA,EAAA,CAAA,CAAA;IAI1BlC,EAAM,UAAU,iBAAiBA,EAAM,UAAU,cAAc,SAAM,KAD7ErC,EAAA,GAAAC,EAKEY,GAAA;;KAHC,SAASwB,EAAM,UAAU;KACzB,SAASU,EAAA;KACV,MAAK;;IAEPjC,EAAiFC,GAAA;KAAlE,OAAOsB,EAAM,UAAU;KAAa,MAAK;;IAC9BA,EAAM,UAAU,eAA1CrC,EAAA,GAAAC,EAaqBe,GAAA;;KAbkC,YAAA;;KACrD,SAAAb,QAWS,CAXTW,EAWSG,GAAA;MAVP,MAAK;MACL,SAAQ;MACR,MAAK;MACJ,cAAYV,EAAAqD,CAAA,CAAC,CAAA,kBAAA,CAAA,GAAA,gBAAA;;MAEd,SAAAzD,QAIE,CAJFW,EAIEP,EAAAC,CAAA,GAAA;OAHA,MAAK;OACJ,UAAUD,EAAAqE,CAAA;OACV,OAAK1D,EAAEX,EAAAuE,CAAA,CAAE,CAAA,wBAAyBvC,EAAA,SAAI,YAAA,CAAA;;;;;;GAK/CzB,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,GAAAA,EAsCqBK,GAAA,EAtCD,YAAA,GAAQ,GAAA;IAC1B,SAAAhB,QAoCM,CApCNC,EAoCM,OAAA;KAnCJ,gBAAa;KACZ,OAAKc,EAAeX,EAAAuE,CAAA,CAAE,CAAA,qDAAmFzC,EAAM,UAAU,aAAS,aAAA,CAAA;IAOnIjC,GAAAA,CAAAA,EAQM,OAAA,EARA,OAAKc,EAAEX,EAAAuE,CAAA,CAAE,CAAA,OAAQzC,EAAM,UAAU,WAAO,KAAA,CAAA,EAAA,GAAA,CAC5CvB,EAMiBM,GAAA,EAN+B,WAAWiB,EAAM,UAAA,GAAA;KAC/D,SAAAlC,GAIE,EAAA,WALiC4E,QAAM,CACzCjE,EAIEO,GAAA;MAHC,YAAY0D,EAAO,UAAM,CAAA;MACzB,SAASA,EAAO;MAChB,OAAK7D,EAAEX,EAAAyE,CAAA,CAAc,CAACD,CAAM,KAAK,KAAA,CAAS;;;;;;;IAKzC,GAAA,GAAA,CAAA,WAAA,CAAA,CAAA,GAAA,CAAA,GAAApB,EAAA,SADR3D,EAAA,GAAAM,EAiBM,OAAA;;KAfJ,aAAU;KACT,OAAKY,EAAiBX,EAAAuE,CAAA,CAAE,CAAA,wDAA0FzC,EAAM,UAAU,WAAO,WAAA,CAAA;IAQlI,GAAA,CAAAqB,EAAA,SADR1D,EAAA,GAAAC,EAKEY,GAAA;;KAHC,SAASwB,EAAM,UAAU;KACzB,SAASU,EAAA;KACT,OAAK7B,EAAEX,EAAA0E,CAAA,CAAqB,CAAC5C,EAAM,UAAU,sBAAsB,KAAK,KAAA,CAAS;;;;;IAEpFvB,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,GAAAA,EAA8EC,GAAA;KAA/D,OAAOsB,EAAM,UAAU;KAAQ,MAAK;;;;;EAM7DrC,GAAAA,GAAAA,CAAAA,MAAAA,CAAAA,MAAAA,EAAA,GAAAC,EA6FcC,GAAA;;GA3FX,MAAI,CAAGmC,EAAM,UAAU,eAAeE,EAAA;GACvC,YAAA;GACC,iBAAW,AAAAyB,EAAA,QAAA,MAAET,EAAQU,CAAM;;GAE5B,SAAA9D,QAsFU,CAtFVC,EAsFU,WAtFVC,EAsFU;IArFR,aAAU;IACV,gBAAa;IACZ,OAAOE,EAAAuE,CAAA,CAAE,CAAA,uCAAwCzC,EAAM,UAAU,aAAS,aAAA;GACnE,GAAAA,EAAM,UAAU,eAAe,GAAA,CAG/Bc,EAAA,SADRnD,EAAA,GAAAM,EAkDM,OAAA;;IAhDH,OAAKY,EAAaX,EAAAuE,CAAA,CAAE,CAAA,uDAAiFzC,EAAM,UAAU,WAAO,WAAA,CAAA;;IAQrHA,EAAM,UAAU,QADxBrC,EAAA,GAAAC,EAIEM,EAAAC,CAAA,GAAA;;KAFC,MAAM6B,EAAM,UAAU;KACvB,OAAM;;IAERjC,EAcM,OAdN8B,GAcM,CAXIG,EAAM,UAAU,WAFxBrC,EAAA,GAAAC,EAMYS,EALLuC,EAAA,KAAO,GAAA;;KAEZ,OAAM;;KAEN,SAAA9C,QAA6B,CAA1BQ,EAAAC,EAAAyB,EAAM,UAAU,OAAO,GAAA,CAAA,CAAA,CAAA;;IAGpB,CAAA,KAAAkC,EAAA,IAAA,EAAA,GAAAlC,EAAM,UAAU,eADxBrC,EAAA,GAAAM,EAKI,KALJ6B,GAKIvB,EADCyB,EAAM,UAAU,WAAW,GAAA,CAAA,KAAAkC,EAAA,IAAA,EAAA,CAAA,CAAA;IAI1BlC,EAAM,UAAU,iBAAiBA,EAAM,UAAU,cAAc,SAAM,KAD7ErC,EAAA,GAAAC,EAKEY,GAAA;;KAHC,SAASwB,EAAM,UAAU;KACzB,SAASU,EAAA;KACV,MAAK;;IAEPjC,EAAiFC,GAAA;KAAlE,OAAOsB,EAAM,UAAU;KAAa,MAAK;;IAC9BA,EAAM,UAAU,eAA1CrC,EAAA,GAAAC,EAaqBe,GAAA;;KAbkC,YAAA;;KACrD,SAAAb,QAWS,CAXTW,EAWSG,GAAA;MAVP,MAAK;MACL,SAAQ;MACR,MAAK;MACJ,cAAYV,EAAAqD,CAAA,CAAC,CAAA,kBAAA,CAAA,GAAA,gBAAA;;MAEd,SAAAzD,QAIE,CAJFW,EAIEP,EAAAC,CAAA,GAAA;OAHA,MAAK;OACJ,UAAUD,EAAAqE,CAAA;OACV,OAAK1D,EAAEX,EAAAuE,CAAA,CAAE,CAAA,wBAAyBvC,EAAA,SAAI,YAAA,CAAA;;;;;;GAK/CzB,GAAAA,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,GAAAA,EA4BqBK,GAAA,MAAA;IA3BnB,SAAAhB,QAQM,CARNC,EAQM,OAAA,EARA,OAAKc,EAAEX,EAAAuE,CAAA,CAAE,CAAA,OAAQzC,EAAM,UAAU,WAAO,KAAA,CAAA,EAAA,GAAA,CAC5CvB,EAMiBM,GAAA,EAN+B,WAAWiB,EAAM,UAAA,GAAA;KAC/D,SAAAlC,GAIE,EAAA,WALiC4E,QAAM,CACzCjE,EAIEO,GAAA;MAHC,YAAY0D,EAAO,UAAM,CAAA;MACzB,SAASA,EAAO;MAChB,OAAK7D,EAAEX,EAAAyE,CAAA,CAAc,CAACD,CAAM,KAAK,KAAA,CAAS;;;;;;;IAKzC,GAAA,GAAA,CAAA,WAAA,CAAA,CAAA,GAAA,CAAA,GAAApB,EAAA,SADR3D,EAAA,GAAAM,EAiBM,OAAA;;KAfJ,aAAU;KACT,OAAKY,EAAeX,EAAAuE,CAAA,CAAE,CAAA,wDAAsFzC,EAAM,UAAU,WAAO,WAAA,CAAA;IAQ5H,GAAA,CAAAqB,EAAA,SADR1D,EAAA,GAAAC,EAKEY,GAAA;;KAHC,SAASwB,EAAM,UAAU;KACzB,SAASU,EAAA;KACT,OAAK7B,EAAEX,EAAA0E,CAAA,CAAqB,CAAC5C,EAAM,UAAU,sBAAsB,KAAK,KAAA,CAAS;;;;;IAEpFvB,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,GAAAA,EAA8EC,GAAA;KAA/D,OAAOsB,EAAM,UAAU;KAAQ,MAAK"}
+{"version":3,"file":"SectionComponent.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","Collapsible","_withCtx","_createElementVNode","_mergeProps","_createElementBlock","_unref","Icon","_createCommentVNode","_resolveDynamicComponent","_createTextVNode","_toDisplayString","ActionList","_createVNode","MixedContent","CollapsibleTrigger","Button","_normalizeClass","CollapsibleContent","DeferredSchema","SchemaRenderer","Icon_default","Button_default","ActionList_default","SchemaRenderer_default","DeferredSchema_default","Collapsible_default","CollapsibleContent_default","MixedContent_default","CollapsibleTrigger_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","SectionComponent_vue_vue_type_script_setup_true_lang_default","props","__props","open","ref","sectionForm","useOptionalFormStore","pageContext","usePageActionContext","fieldContext","useFieldActionContext","context","computed","heading","headingTag","hasHeader","key","stored","readPersisted","setOpen","next","writePersisted","hasFooterActions","hasFooter","t","useT","openBlock","createBlock","_cache","$event","withCtx","createElementVNode","mergeProps","createElementBlock","unref","createCommentVNode","resolveDynamicComponent","createTextVNode","toDisplayString","createVNode","ChevronDownIcon","normalizeClass","cn","loaded","schemaGapClass","actionsAlignmentClass"],"sources":["../../../src/components/layout/SectionComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { SectionSchema } from '@alfakit/core'\nimport {\n  actionsAlignmentClass,\n  headingTag,\n  readPersisted,\n  schemaGapClass,\n  writePersisted,\n} from '@alfakit/core'\nimport { ChevronDownIcon } from '@lucide/vue'\nimport { computed, onMounted, ref } from 'vue'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport { useOptionalFormStore } from '../form/form-context'\nimport { useFieldActionContext } from '../schema/field-actions'\nimport ActionList from '../actions/ActionList.vue'\nimport SchemaRenderer from '../schema/SchemaRenderer.vue'\nimport Button from '../ui/Button.vue'\nimport Collapsible from '../ui/Collapsible.vue'\nimport CollapsibleContent from '../ui/CollapsibleContent.vue'\nimport CollapsibleTrigger from '../ui/CollapsibleTrigger.vue'\nimport { useT } from '../../context'\nimport DeferredSchema from './DeferredSchema.vue'\nimport MixedContent from './MixedContent.vue'\n\nconst props = defineProps<{ component: SectionSchema }>()\nconst open = ref(!props.component.collapsed)\n// Inside a form the section's actions run as field actions, so `$get` / `$set` work.\nconst sectionForm = useOptionalFormStore()\nconst pageContext = usePageActionContext()\nconst fieldContext = useFieldActionContext(() => props.component)\nconst context = computed(() => (sectionForm ? fieldContext.value : pageContext))\nconst heading = computed(() => headingTag(props.component.headingLevel))\nconst hasHeader = computed(() =>\n  Boolean(\n    props.component.heading ||\n    props.component.description ||\n    props.component.icon ||\n    props.component.headerActions?.length ||\n    props.component.afterHeader?.length,\n  ),\n)\n\n// Stored after mounting, so the server render and hydration use the schema's default.\nonMounted(() => {\n  const key = props.component.persistCollapsed\n\n  if (!key) return\n\n  const stored = readPersisted(key)\n\n  if (stored !== null) open.value = stored !== 'collapsed'\n})\n\nfunction setOpen(next: boolean) {\n  open.value = next\n\n  if (props.component.persistCollapsed) {\n    writePersisted(props.component.persistCollapsed, next ? 'expanded' : 'collapsed')\n  }\n}\nconst hasFooterActions = computed(() => Boolean(props.component.footerActions?.length))\nconst hasFooter = computed(() => hasFooterActions.value || Boolean(props.component.footer?.length))\nconst t = useT()\n</script>\n\n<template>\n  <Collapsible\n    v-if=\"props.component.aside\"\n    :open=\"!props.component.collapsible || open\"\n    as-child\n    @update:open=\"setOpen($event)\"\n  >\n    <section\n      data-slot=\"section\"\n      class=\"grid gap-6 lg:grid-cols-3\"\n      v-bind=\"props.component.extraAttributes\"\n    >\n      <div v-if=\"hasHeader\" class=\"flex flex-wrap items-start gap-3 lg:col-span-1\">\n        <Icon\n          v-if=\"props.component.icon\"\n          :name=\"props.component.icon\"\n          class=\"text-muted-foreground mt-0.5 size-5\"\n        />\n        <div class=\"min-w-0 flex-1 basis-48\">\n          <component\n            :is=\"heading\"\n            v-if=\"props.component.heading\"\n            class=\"text-base leading-6 font-semibold break-words\"\n          >\n            {{ props.component.heading }}\n          </component>\n          <p\n            v-if=\"props.component.description\"\n            class=\"text-muted-foreground mt-1 text-sm break-words\"\n          >\n            {{ props.component.description }}\n          </p>\n        </div>\n        <ActionList\n          v-if=\"props.component.headerActions && props.component.headerActions.length > 0\"\n          :actions=\"props.component.headerActions\"\n          :context=\"context\"\n          size=\"sm\"\n        />\n        <MixedContent\n          :items=\"props.component.afterHeader\"\n          name=\"section-after-header\"\n          :context=\"context\"\n        />\n        <CollapsibleTrigger v-if=\"props.component.collapsible\" as-child>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            :aria-label=\"t('toggle_section', {}, 'Toggle section')\"\n          >\n            <Icon\n              name=\"alfakit::schemas.section.collapse-button\"\n              :fallback=\"ChevronDownIcon\"\n              :class=\"cn('transition-transform', open && 'rotate-180')\"\n            />\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <CollapsibleContent as-child>\n        <div\n          data-surface=\"section\"\n          :class=\"\n            cn(\n              'bg-card rounded-xl border shadow-xs lg:col-span-2',\n              props.component.secondary && 'bg-muted/40',\n            )\n          \"\n        >\n          <div :class=\"cn('p-6', props.component.compact && 'p-4')\">\n            <DeferredSchema v-slot=\"{ component: loaded }\" :component=\"props.component\">\n              <SchemaRenderer\n                :components=\"loaded.schema ?? []\"\n                :columns=\"loaded.columns\"\n                :class=\"schemaGapClass(loaded) || undefined\"\n              />\n            </DeferredSchema>\n          </div>\n          <div\n            v-if=\"hasFooter\"\n            data-slot=\"section-footer\"\n            :class=\"\n              cn(\n                'flex flex-wrap items-center gap-3 border-t px-6 py-4',\n                props.component.compact && 'px-4 py-3',\n              )\n            \"\n          >\n            <ActionList\n              v-if=\"hasFooterActions\"\n              :actions=\"props.component.footerActions!\"\n              :context=\"context\"\n              :class=\"actionsAlignmentClass(props.component.footerActionsAlignment) || undefined\"\n            />\n            <MixedContent\n              :items=\"props.component.footer\"\n              name=\"section-footer-content\"\n              :context=\"context\"\n            />\n          </div>\n        </div>\n      </CollapsibleContent>\n    </section>\n  </Collapsible>\n  <Collapsible\n    v-else\n    :open=\"!props.component.collapsible || open\"\n    as-child\n    @update:open=\"setOpen($event)\"\n  >\n    <section\n      data-slot=\"section\"\n      data-surface=\"section\"\n      :class=\"cn('bg-card rounded-xl border shadow-xs', props.component.secondary && 'bg-muted/40')\"\n      v-bind=\"props.component.extraAttributes\"\n    >\n      <div\n        v-if=\"hasHeader\"\n        :class=\"\n          cn(\n            'flex flex-wrap items-start gap-3 border-b px-6 py-4',\n            props.component.compact && 'px-4 py-3',\n          )\n        \"\n      >\n        <Icon\n          v-if=\"props.component.icon\"\n          :name=\"props.component.icon\"\n          class=\"text-muted-foreground mt-0.5 size-5\"\n        />\n        <div class=\"min-w-0 flex-1 basis-48\">\n          <component\n            :is=\"heading\"\n            v-if=\"props.component.heading\"\n            class=\"text-base leading-6 font-semibold break-words\"\n          >\n            {{ props.component.heading }}\n          </component>\n          <p\n            v-if=\"props.component.description\"\n            class=\"text-muted-foreground mt-1 text-sm break-words\"\n          >\n            {{ props.component.description }}\n          </p>\n        </div>\n        <ActionList\n          v-if=\"props.component.headerActions && props.component.headerActions.length > 0\"\n          :actions=\"props.component.headerActions\"\n          :context=\"context\"\n          size=\"sm\"\n        />\n        <MixedContent\n          :items=\"props.component.afterHeader\"\n          name=\"section-after-header\"\n          :context=\"context\"\n        />\n        <CollapsibleTrigger v-if=\"props.component.collapsible\" as-child>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            :aria-label=\"t('toggle_section', {}, 'Toggle section')\"\n          >\n            <Icon\n              name=\"alfakit::schemas.section.collapse-button\"\n              :fallback=\"ChevronDownIcon\"\n              :class=\"cn('transition-transform', open && 'rotate-180')\"\n            />\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <CollapsibleContent>\n        <div :class=\"cn('p-6', props.component.compact && 'p-4')\">\n          <DeferredSchema v-slot=\"{ component: loaded }\" :component=\"props.component\">\n            <SchemaRenderer\n              :components=\"loaded.schema ?? []\"\n              :columns=\"loaded.columns\"\n              :class=\"schemaGapClass(loaded) || undefined\"\n            />\n          </DeferredSchema>\n        </div>\n        <div\n          v-if=\"hasFooter\"\n          data-slot=\"section-footer\"\n          :class=\"\n            cn(\n              'flex flex-wrap items-center gap-3 border-t px-6 py-4',\n              props.component.compact && 'px-4 py-3',\n            )\n          \"\n        >\n          <ActionList\n            v-if=\"hasFooterActions\"\n            :actions=\"props.component.footerActions!\"\n            :context=\"context\"\n            :class=\"actionsAlignmentClass(props.component.footerActionsAlignment) || undefined\"\n          />\n          <MixedContent\n            :items=\"props.component.footer\"\n            name=\"section-footer-content\"\n            :context=\"context\"\n          />\n        </div>\n      </CollapsibleContent>\n    </section>\n  </Collapsible>\n</template>\n"],"mappings":"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"}