npm - @alfakit/vue - Versions diffs - 0.1.1 → 0.1.6 - Mend

@alfakit/vue 0.1.1 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (372) hide show

package/dist/components/kanban/KanbanColumnHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"KanbanColumnHeader.js","names":["_sfc_main","KanbanColumnHeader_vue_vue_type_script_setup_true_lang_default","KanbanColumnHeader_default"],"sources":["../../../src/components/kanban/KanbanColumnHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { KanbanColumnSchema } from '@alfakit/core'\nimport { kanbanWipState } from '@alfakit/core'\nimport { ChevronsLeftRightIcon, ChevronsRightLeftIcon, PlusIcon } from '@lucide/vue'\nimport { computed } from 'vue'\nimport { useT } from '../../context'\nimport { cssColor } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Badge from '../ui/Badge.vue'\nimport Button from '../ui/Button.vue'\n\nconst props = defineProps<{\n column: KanbanColumnSchema\n id: string\n collapsed: boolean\n creatable: boolean\n filtered: boolean\n}>()\nconst emit = defineEmits<{ toggle: []; create: [] }>()\nconst t = useT()\n\nconst wip = computed(() => kanbanWipState(props.column))\nconst shown = computed(() =>\n props.column.wipLimit !== undefined\n ? props.column.count\n : props.filtered\n ? props.column.total\n : props.column.count,\n)\nconst countLabel = computed(() => {\n const column = props.column\n\n if (column.wipLimit !== undefined) {\n return t('kanban.wip', { count: column.count, limit: column.wipLimit }, ':count of :limit')\n }\n\n return props.filtered && column.total !== column.count\n ? t(\n 'kanban.count_filtered',\n { shown: column.total, count: column.count },\n ':shown of :count cards',\n )\n : t('kanban.count', ~~{ count:~~ column.count }, ':count cards')\n})\nconst style = computed(() =>\n props.column.color ? { borderTopColor: cssColor(props.column.color) } : undefined,\n)\nconst toggleLabel = computed(() =>\n props.collapsed\n ? t('kanban.expand', { column: props.column.label }, 'Expand :column')\n : t('kanban.collapse', { column: props.column.label }, 'Collapse :column'),\n)\nconst addLabel = computed(() =>\n t('kanban.add_card', { column: props.column.label }, 'Add a card to :column'),\n)\n</script>\n\n<template>\n <div\n v-if=\"props.collapsed\"\n class=\"bg-muted/60 flex snap-start flex-col items-center gap-2 rounded-lg border border-t-4 px-1 py-2\"\n :style=\"style\"\n data-slot=\"kanban-column-header\"\n :data-column=\"props.column.key\"\n data-collapsed=\"\"\n :data-wip=\"wip ?? undefined\"\n >\n <Button\n type=\"button\"\n variant=\"ghost\"\n size=\"icon-xs\"\n :aria-label=\"toggleLabel\"\n :aria-expanded=\"false\"\n @click=\"emit('toggle')\"\n >\n <ChevronsLeftRightIcon aria-hidden=\"true\" />\n </Button>\n <span class=\"text-muted-foreground text-xs tabular-nums\" :title=\"countLabel\">{{ shown }}</span>\n <h3 :id=\"props.id\" class=\"text-sm font-medium [writing-mode:vertical-rl]\">\n {{ props.column.label }}\n </h3>\n </div>\n <div\n v-else\n class=\"bg-muted/60 flex snap-start flex-col gap-1 rounded-lg border border-t-4 px-3 py-2\"\n :style=\"style\"\n data-slot=\"kanban-column-header\"\n :data-column=\"props.column.key\"\n :data-wip=\"wip ?? undefined\"\n >\n <div class=\"flex items-center gap-2\">\n <Icon\n v-if=\"props.column.icon\"\n :name=\"props.column.icon\"\n class=\"text-muted-foreground size-4\"\n />\n <h3 :id=\"props.id\" class=\"min-w-0 truncate text-sm font-semibold\">\n {{ props.column.label }}\n </h3>\n <Badge\n variant=\"secondary\"\n :class=\"\n cn(\n 'h-5 px-1.5 tabular-nums',\n wip === 'over' && 'bg-destructive/15 text-destructive',\n wip === 'full' && 'bg-warning/15 text-warning',\n )\n \"\n :title=\"countLabel\"\n >\n <span aria-hidden=\"true\">{{\n props.column.wipLimit !== undefined\n ? `${props.column.count}/${props.column.wipLimit}`\n : shown\n }}</span>\n <span class=\"sr-only\">{{ countLabel }}</span>\n </Badge>\n <div class=\"ms-auto flex items-center\">\n <Button\n v-if=\"props.creatable\"\n type=\"button\"\n variant=\"ghost\"\n size=\"icon-xs\"\n :aria-label=\"addLabel\"\n :title=\"addLabel\"\n @click=\"emit('create')\"\n >\n <PlusIcon aria-hidden=\"true\" />\n </Button>\n <Button\n v-if=\"props.column.collapsible\"\n type=\"button\"\n variant=\"ghost\"\n size=\"icon-xs\"\n :aria-label=\"toggleLabel\"\n :title=\"toggleLabel\"\n :aria-expanded=\"true\"\n @click=\"emit('toggle')\"\n >\n <ChevronsRightLeftIcon aria-hidden=\"true\" />\n </Button>\n </div>\n </div>\n <p v-if=\"props.column.description\" class=\"text-muted-foreground line-clamp-2 text-xs\">\n {{ props.column.description }}\n </p>\n <p v-if=\"wip === 'over'\" class=\"text-destructive text-xs\">\n {{\n t(\n 'kanban.wip_over',\n { limit: props.column.wipLimit ?? 0 },\n 'Over the limit of :limit cards',\n )\n }}\n </p>\n <p v-if=\"wip === 'full' && props.column.wipStrict\" class=\"text-muted-foreground text-xs\">\n {{ t('kanban.wip_full', {}, 'This column is full') }}\n </p>\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"KanbanColumnHeader.js","names":["_sfc_main","KanbanColumnHeader_vue_vue_type_script_setup_true_lang_default","KanbanColumnHeader_default"],"sources":["../../../src/components/kanban/KanbanColumnHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { KanbanColumnSchema } from '@alfakit/core'\nimport { kanbanWipState } from '@alfakit/core'\nimport { ChevronsLeftRightIcon, ChevronsRightLeftIcon, PlusIcon } from '@lucide/vue'\nimport { computed } from 'vue'\nimport { useChoice, useT } from '../../context'\nimport { cssColor } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Badge from '../ui/Badge.vue'\nimport Button from '../ui/Button.vue'\n\nconst props = defineProps<{\n column: KanbanColumnSchema\n id: string\n collapsed: boolean\n creatable: boolean\n filtered: boolean\n}>()\nconst emit = defineEmits<{ toggle: []; create: [] }>()\nconst t = useT()\nconst choice = useChoice()\n\nconst wip = computed(() => kanbanWipState(props.column))\nconst shown = computed(() =>\n props.column.wipLimit !== undefined\n ? props.column.count\n : props.filtered\n ? props.column.total\n : props.column.count,\n)\nconst countLabel = computed(() => {\n const column = props.column\n\n if (column.wipLimit !== undefined) {\n return t('kanban.wip', { count: column.count, limit: column.wipLimit }, ':count of :limit')\n }\n\n return props.filtered && column.total !== column.count\n ? t(\n 'kanban.count_filtered',\n { shown: column.total, count: column.count },\n ':shown of :count cards',\n )\n : choice('kanban.count', column.count, {}, '{1} :count card\|[0,] :count cards')\n})\nconst style = computed(() =>\n props.column.color ? { borderTopColor: cssColor(props.column.color) } : undefined,\n)\nconst toggleLabel = computed(() =>\n props.collapsed\n ? t('kanban.expand', { column: props.column.label }, 'Expand :column')\n : t('kanban.collapse', { column: props.column.label }, 'Collapse :column'),\n)\nconst addLabel = computed(() =>\n t('kanban.add_card', { column: props.column.label }, 'Add a card to :column'),\n)\n</script>\n\n<template>\n <div\n v-if=\"props.collapsed\"\n class=\"bg-muted/60 flex snap-start flex-col items-center gap-2 rounded-lg border border-t-4 px-1 py-2\"\n :style=\"style\"\n data-slot=\"kanban-column-header\"\n :data-column=\"props.column.key\"\n data-collapsed=\"\"\n :data-wip=\"wip ?? undefined\"\n >\n <Button\n type=\"button\"\n variant=\"ghost\"\n size=\"icon-xs\"\n :aria-label=\"toggleLabel\"\n :aria-expanded=\"false\"\n @click=\"emit('toggle')\"\n >\n <ChevronsLeftRightIcon aria-hidden=\"true\" />\n </Button>\n <span class=\"text-muted-foreground text-xs tabular-nums\" :title=\"countLabel\">{{ shown }}</span>\n <h3 :id=\"props.id\" class=\"text-sm font-medium [writing-mode:vertical-rl]\">\n {{ props.column.label }}\n </h3>\n </div>\n <div\n v-else\n class=\"bg-muted/60 flex snap-start flex-col gap-1 rounded-lg border border-t-4 px-3 py-2\"\n :style=\"style\"\n data-slot=\"kanban-column-header\"\n :data-column=\"props.column.key\"\n :data-wip=\"wip ?? undefined\"\n >\n <div class=\"flex items-center gap-2\">\n <Icon\n v-if=\"props.column.icon\"\n :name=\"props.column.icon\"\n class=\"text-muted-foreground size-4\"\n />\n <h3 :id=\"props.id\" class=\"min-w-0 truncate text-sm font-semibold\">\n {{ props.column.label }}\n </h3>\n <Badge\n variant=\"secondary\"\n :class=\"\n cn(\n 'h-5 px-1.5 tabular-nums',\n wip === 'over' && 'bg-destructive/15 text-destructive',\n wip === 'full' && 'bg-warning/15 text-warning',\n )\n \"\n :title=\"countLabel\"\n >\n <span aria-hidden=\"true\">{{\n props.column.wipLimit !== undefined\n ? `${props.column.count}/${props.column.wipLimit}`\n : shown\n }}</span>\n <span class=\"sr-only\">{{ countLabel }}</span>\n </Badge>\n <div class=\"ms-auto flex items-center\">\n <Button\n v-if=\"props.creatable\"\n type=\"button\"\n variant=\"ghost\"\n size=\"icon-xs\"\n :aria-label=\"addLabel\"\n :title=\"addLabel\"\n @click=\"emit('create')\"\n >\n <PlusIcon aria-hidden=\"true\" />\n </Button>\n <Button\n v-if=\"props.column.collapsible\"\n type=\"button\"\n variant=\"ghost\"\n size=\"icon-xs\"\n :aria-label=\"toggleLabel\"\n :title=\"toggleLabel\"\n :aria-expanded=\"true\"\n @click=\"emit('toggle')\"\n >\n <ChevronsRightLeftIcon aria-hidden=\"true\" />\n </Button>\n </div>\n </div>\n <p v-if=\"props.column.description\" class=\"text-muted-foreground line-clamp-2 text-xs\">\n {{ props.column.description }}\n </p>\n <p v-if=\"wip === 'over'\" class=\"text-destructive text-xs\">\n {{\n choice(\n 'kanban.wip_over',\n props.column.wipLimit ?? 0,\n { limit: props.column.wipLimit ?? 0 },\n '{1} Over the limit of :limit card\|[0,] Over the limit of :limit cards',\n )\n }}\n </p>\n <p v-if=\"wip === 'full' && props.column.wipStrict\" class=\"text-muted-foreground text-xs\">\n {{ t('kanban.wip_full', {}, 'This column is full') }}\n </p>\n </div>\n</template>\n"],"mappings":""}

package/dist/components/kanban/KanbanColumnHeader.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"KanbanColumnHeader.vue.d.ts","sourceRoot":"","sources":["../../../src/components/kanban/KanbanColumnHeader.vue"],"names":[],"mappings":"~~AAmKA~~,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAWvD,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,kBAAkB,CAAA;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,EAAE,OAAO,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAC;;;;;;;;~~AA8WF~~,wBAOG"}
1	+ {"version":3,"file":"KanbanColumnHeader.vue.d.ts","sourceRoot":"","sources":["../../../src/components/kanban/KanbanColumnHeader.vue"],"names":[],"mappings":"AAqKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAWvD,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,kBAAkB,CAAA;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,EAAE,OAAO,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAC;;;;;;;;AAiXF,wBAOG"}

package/dist/components/kanban/KanbanColumnHeader.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -1,23 +1,23 @@
-import { useT as e } from "../../context.js";
-import { cn as t } from "../../lib/utils.js";
-import { cssColor as n } from "../../lib/colors.js";
-import r from "../../lib/Icon.js";
-import i from "../ui/Badge2.js";
-import a from "../ui/Button2.js";
-import { kanbanWipState as o } from "@alfakit/core";
-import { computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, normalizeClass as m, normalizeStyle as h, openBlock as g, toDisplayString as _, unref as v, withCtx as y } from "vue";
-import { ChevronsLeftRightIcon as b, ChevronsRightLeftIcon as x, PlusIcon as S } from "@lucide/vue";
+import { useChoice as e, useT as t } from "../../context.js";
+import { cn as n } from "../../lib/utils.js";
+import { cssColor as r } from "../../lib/colors.js";
+import i from "../../lib/Icon.js";
+import a from "../ui/Badge2.js";
+import o from "../ui/Button2.js";
+import { kanbanWipState 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, normalizeClass as h, normalizeStyle as g, openBlock as _, toDisplayString as v, unref as y, withCtx as b } from "vue";
+import { ChevronsLeftRightIcon as x, ChevronsRightLeftIcon as S, PlusIcon as C } from "@lucide/vue";
 //#region src/components/kanban/KanbanColumnHeader.vue?vue&type=script&setup=true&lang.ts
-var C = ["data-column", "data-wip"], w = ["title"], T = ["id"], E = ["data-column", "data-wip"], D = { class: "flex items-center gap-2" }, O = ["id"], k = { "aria-hidden": "true" }, A = { class: "sr-only" }, j = { class: "ms-auto flex items-center" }, M = {
+var w = ["data-column", "data-wip"], T = ["title"], E = ["id"], D = ["data-column", "data-wip"], O = { class: "flex items-center gap-2" }, k = ["id"], A = { "aria-hidden": "true" }, j = { class: "sr-only" }, M = { class: "ms-auto flex items-center" }, N = {
 	key: 0,
 	class: "text-muted-foreground line-clamp-2 text-xs"
-}, N = {
+}, P = {
 	key: 1,
 	class: "text-destructive text-xs"
-}, P = {
+}, F = {
 	key: 2,
 	class: "text-muted-foreground text-xs"
-}, F = /*@__PURE__*/ p({
+}, I = /*@__PURE__*/ m({
 	__name: "KanbanColumnHeader",
 	props: {
 		column: {},
@@ -27,103 +27,103 @@ var C = ["data-column", "data-wip"], w = ["title"], T = ["id"], E = ["data-colum
 		filtered: { type: Boolean }
 	},
 	emits: ["toggle", "create"],
-	setup(p, { emit: F }) {
-		let I = p, L = F, R = e(), z = s(() => o(I.column)), B = s(() => I.column.wipLimit === void 0 && I.filtered ? I.column.total : I.column.count), V = s(() => {
-			let e = I.column;
-			return e.wipLimit === void 0 ? I.filtered && e.total !== e.count ? R("kanban.count_filtered", {
+	setup(m, { emit: I }) {
+		let L = m, R = I, z = t(), B = e(), V = c(() => s(L.column)), H = c(() => L.column.wipLimit === void 0 && L.filtered ? L.column.total : L.column.count), U = c(() => {
+			let e = L.column;
+			return e.wipLimit === void 0 ? L.filtered && e.total !== e.count ? z("kanban.count_filtered", {
 				shown: e.total,
 				count: e.count
-			}, ":shown of :count cards") : R("kanban.count", { count: e.count }, ":count cards") : R("kanban.wip", {
+			}, ":shown of :count cards") : B("kanban.count", e.count, {}, "{1} :count card|[0,*] :count cards") : z("kanban.wip", {
 				count: e.count,
 				limit: e.wipLimit
 			}, ":count of :limit");
-		}), H = s(() => I.column.color ? { borderTopColor: n(I.column.color) } : void 0), U = s(() => I.collapsed ? R("kanban.expand", { column: I.column.label }, "Expand :column") : R("kanban.collapse", { column: I.column.label }, "Collapse :column")), W = s(() => R("kanban.add_card", { column: I.column.label }, "Add a card to :column"));
-		return (e, n) => I.collapsed ? (g(), u("div", {
+		}), W = c(() => L.column.color ? { borderTopColor: r(L.column.color) } : void 0), G = c(() => L.collapsed ? z("kanban.expand", { column: L.column.label }, "Expand :column") : z("kanban.collapse", { column: L.column.label }, "Collapse :column")), K = c(() => z("kanban.add_card", { column: L.column.label }, "Add a card to :column"));
+		return (e, t) => L.collapsed ? (_(), d("div", {
 			key: 0,
 			class: "bg-muted/60 flex snap-start flex-col items-center gap-2 rounded-lg border border-t-4 px-1 py-2",
-			style: h(H.value),
+			style: g(W.value),
 			"data-slot": "kanban-column-header",
-			"data-column": I.column.key,
+			"data-column": L.column.key,
 			"data-collapsed": "",
-			"data-wip": z.value ?? void 0
+			"data-wip": V.value ?? void 0
 		}, [
-			f(a, {
+			p(o, {
 				type: "button",
 				variant: "ghost",
 				size: "icon-xs",
-				"aria-label": U.value,
+				"aria-label": G.value,
 				"aria-expanded": !1,
-				onClick: n[0] ||= (e) => L("toggle")
+				onClick: t[0] ||= (e) => R("toggle")
 			}, {
-				default: y(() => [f(v(b), { "aria-hidden": "true" })]),
+				default: b(() => [p(y(x), { "aria-hidden": "true" })]),
 				_: 1
 			}, 8, ["aria-label"]),
-			d("span", {
+			f("span", {
 				class: "text-muted-foreground text-xs tabular-nums",
-				title: V.value
-			}, _(B.value), 9, w),
-			d("h3", {
-				id: I.id,
+				title: U.value
+			}, v(H.value), 9, T),
+			f("h3", {
+				id: L.id,
 				class: "text-sm font-medium [writing-mode:vertical-rl]"
-			}, _(I.column.label), 9, T)
-		], 12, C)) : (g(), u("div", {
+			}, v(L.column.label), 9, E)
+		], 12, w)) : (_(), d("div", {
 			key: 1,
 			class: "bg-muted/60 flex snap-start flex-col gap-1 rounded-lg border border-t-4 px-3 py-2",
-			style: h(H.value),
+			style: g(W.value),
 			"data-slot": "kanban-column-header",
-			"data-column": I.column.key,
-			"data-wip": z.value ?? void 0
+			"data-column": L.column.key,
+			"data-wip": V.value ?? void 0
 		}, [
-			d("div", D, [
-				I.column.icon ? (g(), c(v(r), {
+			f("div", O, [
+				L.column.icon ? (_(), l(y(i), {
 					key: 0,
-					name: I.column.icon,
+					name: L.column.icon,
 					class: "text-muted-foreground size-4"
-				}, null, 8, ["name"])) : l("", !0),
-				d("h3", {
-					id: I.id,
+				}, null, 8, ["name"])) : u("", !0),
+				f("h3", {
+					id: L.id,
 					class: "min-w-0 truncate text-sm font-semibold"
-				}, _(I.column.label), 9, O),
-				f(i, {
+				}, v(L.column.label), 9, k),
+				p(a, {
 					variant: "secondary",
-					class: m(v(t)("h-5 px-1.5 tabular-nums", z.value === "over" && "bg-destructive/15 text-destructive", z.value === "full" && "bg-warning/15 text-warning")),
-					title: V.value
+					class: h(y(n)("h-5 px-1.5 tabular-nums", V.value === "over" && "bg-destructive/15 text-destructive", V.value === "full" && "bg-warning/15 text-warning")),
+					title: U.value
 				}, {
-					default: y(() => [d("span", k, _(I.column.wipLimit === void 0 ? B.value : `${I.column.count}/${I.column.wipLimit}`), 1), d("span", A, _(V.value), 1)]),
+					default: b(() => [f("span", A, v(L.column.wipLimit === void 0 ? H.value : `${L.column.count}/${L.column.wipLimit}`), 1), f("span", j, v(U.value), 1)]),
 					_: 1
 				}, 8, ["class", "title"]),
-				d("div", j, [I.creatable ? (g(), c(a, {
+				f("div", M, [L.creatable ? (_(), l(o, {
 					key: 0,
 					type: "button",
 					variant: "ghost",
 					size: "icon-xs",
-					"aria-label": W.value,
-					title: W.value,
-					onClick: n[1] ||= (e) => L("create")
+					"aria-label": K.value,
+					title: K.value,
+					onClick: t[1] ||= (e) => R("create")
 				}, {
-					default: y(() => [f(v(S), { "aria-hidden": "true" })]),
+					default: b(() => [p(y(C), { "aria-hidden": "true" })]),
 					_: 1
-				}, 8, ["aria-label", "title"])) : l("", !0), I.column.collapsible ? (g(), c(a, {
+				}, 8, ["aria-label", "title"])) : u("", !0), L.column.collapsible ? (_(), l(o, {
 					key: 1,
 					type: "button",
 					variant: "ghost",
 					size: "icon-xs",
-					"aria-label": U.value,
-					title: U.value,
+					"aria-label": G.value,
+					title: G.value,
 					"aria-expanded": !0,
-					onClick: n[2] ||= (e) => L("toggle")
+					onClick: t[2] ||= (e) => R("toggle")
 				}, {
-					default: y(() => [f(v(x), { "aria-hidden": "true" })]),
+					default: b(() => [p(y(S), { "aria-hidden": "true" })]),
 					_: 1
-				}, 8, ["aria-label", "title"])) : l("", !0)])
+				}, 8, ["aria-label", "title"])) : u("", !0)])
 			]),
-			I.column.description ? (g(), u("p", M, _(I.column.description), 1)) : l("", !0),
-			z.value === "over" ? (g(), u("p", N, _(v(R)("kanban.wip_over", { limit: I.column.wipLimit ?? 0 }, "Over the limit of :limit cards")), 1)) : l("", !0),
-			z.value === "full" && I.column.wipStrict ? (g(), u("p", P, _(v(R)("kanban.wip_full", {}, "This column is full")), 1)) : l("", !0)
-		], 12, E));
+			L.column.description ? (_(), d("p", N, v(L.column.description), 1)) : u("", !0),
+			V.value === "over" ? (_(), d("p", P, v(y(B)("kanban.wip_over", L.column.wipLimit ?? 0, { limit: L.column.wipLimit ?? 0 }, "{1} Over the limit of :limit card|[0,*] Over the limit of :limit cards")), 1)) : u("", !0),
+			V.value === "full" && L.column.wipStrict ? (_(), d("p", F, v(y(z)("kanban.wip_full", {}, "This column is full")), 1)) : u("", !0)
+		], 12, D));
 	}
 });
 //#endregion
-export { F as default };
+export { I as default };
 //# sourceMappingURL=KanbanColumnHeader.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/kanban/KanbanColumnHeader.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"KanbanColumnHeader.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeStyle","_createVNode","Button","_withCtx","_unref","_createElementVNode","_toDisplayString","_createBlock","Icon","_createCommentVNode","Badge","_normalizeClass","Icon_default","Badge_default","Button_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","KanbanColumnHeader_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","t","useT","wip","computed","kanbanWipState","shown","countLabel","column","style","cssColor","toggleLabel","addLabel","openBlock","createElementBlock","normalizeStyle","createVNode","_cache","withCtx","unref","ChevronsLeftRightIcon","createElementVNode","toDisplayString","createBlock","createCommentVNode","normalizeClass","cn","PlusIcon","ChevronsRightLeftIcon"],"sources":["../../../src/components/kanban/KanbanColumnHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { KanbanColumnSchema } from '@alfakit/core'\nimport { kanbanWipState } from '@alfakit/core'\nimport { ChevronsLeftRightIcon, ChevronsRightLeftIcon, PlusIcon } from '@lucide/vue'\nimport { computed } from 'vue'\nimport { useT } from '../../context'\nimport { cssColor } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Badge from '../ui/Badge.vue'\nimport Button from '../ui/Button.vue'\n\nconst props = defineProps<{\n column: KanbanColumnSchema\n id: string\n collapsed: boolean\n creatable: boolean\n filtered: boolean\n}>()\nconst emit = defineEmits<{ toggle: []; create: [] }>()\nconst t = useT()\n\nconst wip = computed(() => kanbanWipState(props.column))\nconst shown = computed(() =>\n props.column.wipLimit !== undefined\n ? props.column.count\n : props.filtered\n ? props.column.total\n : props.column.count,\n)\nconst countLabel = computed(() => {\n const column = props.column\n\n if (column.wipLimit !== undefined) {\n return t('kanban.wip', { count: column.count, limit: column.wipLimit }, ':count of :limit')\n }\n\n return props.filtered && column.total !== column.count\n ? t(\n 'kanban.count_filtered',\n { shown: column.total, count: column.count },\n ':shown of :count cards',\n )\n : t('kanban.count', ~~{ count:~~ column.count }, ':count cards')\n})\nconst style = computed(() =>\n props.column.color ? { borderTopColor: cssColor(props.column.color) } : undefined,\n)\nconst toggleLabel = computed(() =>\n props.collapsed\n ? t('kanban.expand', { column: props.column.label }, 'Expand :column')\n : t('kanban.collapse', { column: props.column.label }, 'Collapse :column'),\n)\nconst addLabel = computed(() =>\n t('kanban.add_card', { column: props.column.label }, 'Add a card to :column'),\n)\n</script>\n\n<template>\n <div\n v-if=\"props.collapsed\"\n class=\"bg-muted/60 flex snap-start flex-col items-center gap-2 rounded-lg border border-t-4 px-1 py-2\"\n :style=\"style\"\n data-slot=\"kanban-column-header\"\n :data-column=\"props.column.key\"\n data-collapsed=\"\"\n :data-wip=\"wip ?? undefined\"\n >\n <Button\n type=\"button\"\n variant=\"ghost\"\n size=\"icon-xs\"\n :aria-label=\"toggleLabel\"\n :aria-expanded=\"false\"\n @click=\"emit('toggle')\"\n >\n <ChevronsLeftRightIcon aria-hidden=\"true\" />\n </Button>\n <span class=\"text-muted-foreground text-xs tabular-nums\" :title=\"countLabel\">{{ shown }}</span>\n <h3 :id=\"props.id\" class=\"text-sm font-medium [writing-mode:vertical-rl]\">\n {{ props.column.label }}\n </h3>\n </div>\n <div\n v-else\n class=\"bg-muted/60 flex snap-start flex-col gap-1 rounded-lg border border-t-4 px-3 py-2\"\n :style=\"style\"\n data-slot=\"kanban-column-header\"\n :data-column=\"props.column.key\"\n :data-wip=\"wip ?? undefined\"\n >\n <div class=\"flex items-center gap-2\">\n <Icon\n v-if=\"props.column.icon\"\n :name=\"props.column.icon\"\n class=\"text-muted-foreground size-4\"\n />\n <h3 :id=\"props.id\" class=\"min-w-0 truncate text-sm font-semibold\">\n {{ props.column.label }}\n </h3>\n <Badge\n variant=\"secondary\"\n :class=\"\n cn(\n 'h-5 px-1.5 tabular-nums',\n wip === 'over' && 'bg-destructive/15 text-destructive',\n wip === 'full' && 'bg-warning/15 text-warning',\n )\n \"\n :title=\"countLabel\"\n >\n <span aria-hidden=\"true\">{{\n props.column.wipLimit !== undefined\n ? `${props.column.count}/${props.column.wipLimit}`\n : shown\n }}</span>\n <span class=\"sr-only\">{{ countLabel }}</span>\n </Badge>\n <div class=\"ms-auto flex items-center\">\n <Button\n v-if=\"props.creatable\"\n type=\"button\"\n variant=\"ghost\"\n size=\"icon-xs\"\n :aria-label=\"addLabel\"\n :title=\"addLabel\"\n @click=\"emit('create')\"\n >\n <PlusIcon aria-hidden=\"true\" />\n </Button>\n <Button\n v-if=\"props.column.collapsible\"\n type=\"button\"\n variant=\"ghost\"\n size=\"icon-xs\"\n :aria-label=\"toggleLabel\"\n :title=\"toggleLabel\"\n :aria-expanded=\"true\"\n @click=\"emit('toggle')\"\n >\n <ChevronsRightLeftIcon aria-hidden=\"true\" />\n </Button>\n </div>\n </div>\n <p v-if=\"props.column.description\" class=\"text-muted-foreground line-clamp-2 text-xs\">\n {{ props.column.description }}\n </p>\n <p v-if=\"wip === 'over'\" class=\"text-destructive text-xs\">\n {{\n t(\n 'kanban.wip_over',\n { limit: props.column.wipLimit ?? 0 },\n 'Over the limit of :limit cards',\n )\n }}\n </p>\n <p v-if=\"wip === 'full' && props.column.wipStrict\" class=\"text-muted-foreground text-xs\">\n {{ t('kanban.wip_full', {}, 'This column is full') }}\n </p>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYA,IAAM+B,IAAQC,GAORC,IAAOH,GACPI,IAAIC,EAAK,~~GAETC~~,IAAMC,QAAeC,~~EAAeP~~,EAAM,MAAM,CAAC,~~GACjDQ~~,IAAQF,~~QACZN~~,EAAM,OAAO,aAAa,KAAA,KAEtBA,EAAM,WACJA,EAAM,OAAO,QACbA,EAAM,OAAO,KACrB,~~GACMS~~,IAAaH,QAAe;GAChC,IAAMI,~~IAASV~~,EAAM;GAMrB,~~OAJIU~~,EAAO,aAAa,KAAA,~~IAIjBV~~,EAAM,~~YAAYU~~,EAAO,UAAUA,EAAO,~~QAC7CP~~,EACE,yBACA;IAAE,~~OAAOO~~,EAAO;IAAO,OAAOA,EAAO;GAAM,GAC3C,wBACF,IACAP,~~EAAE~~,~~gBAAgB~~,~~EAAE~~,~~OAAOO~~,~~EAAO~~,~~MAAM,~~GAAG,~~cAAc~~,~~IATpDP~~,EAAE,cAAc;IAAE,~~OAAOO~~,EAAO;IAAO,OAAOA,EAAO;GAAS,GAAG,kBAAkB;EAU9F,CAAC,GACKC,IAAQL,~~QACZN~~,EAAM,OAAO,QAAQ,EAAE,~~gBAAgBY~~,~~EAASZ~~,EAAM,OAAO,KAAK,EAAE,IAAI,KAAA,CAC1E,~~GACMa~~,IAAcP,~~QAClBN~~,EAAM,YACFG,EAAE,iBAAiB,EAAE,QAAQH,EAAM,OAAO,MAAM,GAAG,gBAAgB,IACnEG,EAAE,mBAAmB,EAAE,QAAQH,EAAM,OAAO,MAAM,GAAG,kBAAkB,CAC7E,~~GACMc~~,IAAWR,~~QACfH~~,EAAE,mBAAmB,EAAE,QAAQH,EAAM,OAAO,MAAM,GAAG,uBAAuB,CAC9E;mBAKUA,EAAM,aADd/B,EAAA,GAAAC,EAuBM,OAAA;;GArBJ,OAAM;GACL,OAAKC,~~EAAEwC~~,EAAA,KAAK;GACb,aAAU;GACT,~~eAAaX~~,EAAM,OAAO;GAC3B,kBAAe;GACd,~~YAAUK~~,EAAA,SAAO,KAAA;;~~GAElBjC~~,EASSC,GAAA;IARP,MAAK;IACL,SAAQ;IACR,MAAK;IACJ,~~cAAYwC~~,EAAA;IACZ,iBAAe;IACf,SAAK,AAAAM,EAAA,QAAA,~~MAAEjB~~,EAAI,QAAA;;IAEZ,SAAA5B,QAA4C,CAA5CF,EAA4CG,~~EAAA+C~~,CAAA,GAAA,EAArB,eAAY,OAAM,CAAA,CAAA,CAAA;;;~~GAE3C9C~~,EAA+F,QAAA;IAAzF,OAAM;IAA8C,~~OAAOiC~~,EAAA;GAAe,~~GAAAhC~~,~~EAAA+B~~,EAAA,KAAK,GAAA,~~GAAArB~~,CAAA;GACrFX,EAEK,MAAA;IAFA,IAAIwB,EAAM;IAAI,OAAM;GACpB,GAAAvB,EAAAuB,EAAM,OAAO,KAAK,GAAA,GAAAZ,CAAA;EAGzBnB,GAAAA,IAAAA,CAAAA,MAAAA,EAAA,GAAAC,~~EA4EM~~,OAAA;;~~GA1EJ~~,OAAM;GACL,OAAKC,~~EAAEwC~~,EAAA,KAAK;GACb,aAAU;GACT,~~eAAaX~~,EAAM,OAAO;GAC1B,~~YAAUK~~,EAAA,SAAO,KAAA;;~~GAElB7B~~,EAoDM,OApDNc,GAoDM;IAlDIU,EAAM,OAAO,QADrB/B,EAAA,GAAAS,EAIEH,EAAAI,CAAA,GAAA;;KAFC,MAAMqB,EAAM,OAAO;KACpB,OAAM;;IAERxB,EAEK,MAAA;KAFA,IAAIwB,EAAM;KAAI,OAAM;IACpB,GAAAvB,EAAAuB,EAAM,OAAO,KAAK,GAAA,GAAAT,CAAA;IAEvBnB,EAiBQS,GAAA;KAhBN,SAAQ;KACP,OAAKC,EAAaP,~~EAAAqD~~,CAAA,CAAE,CAAA,2BAAqDvB,EAAA,UAAG,UAAA,sCAAiEA,EAAA,UAAG,UAAA,4BAAA,CAAA;KAOhJ,OAAOI,EAAA;;KAER,~~SAAAnC~~,QAIS,CAJTE,EAIS,QAJTgB,GAISf,EAHPuB,EAAM,OAAO,aAAa,KAAA,~~IAAuFQ~~,EAAA,QAA5D,~~GAAAR~~,EAAM,OAAO,MAAK,GAAIA,EAAM,OAAO,UAA8B,GAAA,CAAA,GAIxHxB,EAA6C,QAA7CiB,GAA6ChB,~~EAApBgC~~,EAAA,KAAU,GAAA,CAAA,CAAA,CAAA;;;~~IAErCjC~~,EAwBM,OAxBNkB,GAwBM,CAtBIM,EAAM,aADd/B,EAAA,GAAAS,EAUSL,GAAA;;KARP,MAAK;KACL,SAAQ;KACR,MAAK;KACJ,~~cAAYyC~~,EAAA;KACZ,OAAOA,EAAA;KACP,SAAK,AAAAK,EAAA,QAAA,~~MAAEjB~~,EAAI,QAAA;;KAEZ,SAAA5B,QAA+B,CAA/BF,EAA+BG,~~EAAAsD~~,CAAA,GAAA,EAArB,eAAY,OAAM,CAAA,CAAA,CAAA;;IAGtB,GAAA,GAAA,CAAA,cAAA,OAAA,CAAA,KAAAH,EAAA,IAAA,EAAA,~~GAAA1B~~,EAAM,OAAO,eADrB/B,EAAA,GAAAS,EAWSL,GAAA;;KATP,MAAK;KACL,SAAQ;KACR,MAAK;KACJ,~~cAAYwC~~,EAAA;KACZ,OAAOA,EAAA;KACP,iBAAe;KACf,SAAK,AAAAM,EAAA,QAAA,~~MAAEjB~~,EAAI,QAAA;;KAEZ,SAAA5B,QAA4C,CAA5CF,EAA4CG,~~EAAAuD~~,CAAA,GAAA,EAArB,eAAY,OAAM,CAAA,CAAA,CAAA;;;;~~GAItC9B~~,EAAM,OAAO,eAAtB/B,EAAA,GAAAC,EAEI,KAFJyB,GAEIlB,EADCuB,EAAM,OAAO,WAAW,GAAA,CAAA,~~KAAA0B~~,EAAA,IAAA,EAAA;GAEpBrB,EAAA,UAAG,~~UAAZpC~~,EAAA,GAAAC,~~EAQI~~,~~KARJ0B~~,~~GAQInB~~,~~EANAF~~,~~EAAA4B~~,CAAA,~~CAAC~~,CAAA,~~mBAAkD~~,EAAA,~~OAAAH~~,EAAM,OAAO,YAAQ,EAAA,GAAA,~~gCAAA~~,CAAA,GAAA,CAAA,~~KAAA0B~~,EAAA,IAAA,EAAA;~~GAOnErB~~,EAAA,UAAG,~~UAAeL~~,EAAM,OAAO,aAAxC/B,EAAA,GAAAC,EAEI,KAFJ2B,GAEIpB,EADCF,EAAA4B,CAAA,CAAC,CAAA,mBAAA,CAAA,GAAA,qBAAA,CAAA,GAAA,CAAA,~~KAAAuB~~,EAAA,IAAA,EAAA"}
1	+ {"version":3,"file":"KanbanColumnHeader.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeStyle","_createVNode","Button","_withCtx","_unref","_createElementVNode","_toDisplayString","_createBlock","Icon","_createCommentVNode","Badge","_normalizeClass","Icon_default","Badge_default","Button_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","KanbanColumnHeader_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","t","useT","choice","useChoice","wip","computed","kanbanWipState","shown","countLabel","column","style","cssColor","toggleLabel","addLabel","openBlock","createElementBlock","normalizeStyle","createVNode","_cache","withCtx","unref","ChevronsLeftRightIcon","createElementVNode","toDisplayString","createBlock","createCommentVNode","normalizeClass","cn","PlusIcon","ChevronsRightLeftIcon"],"sources":["../../../src/components/kanban/KanbanColumnHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { KanbanColumnSchema } from '@alfakit/core'\nimport { kanbanWipState } from '@alfakit/core'\nimport { ChevronsLeftRightIcon, ChevronsRightLeftIcon, PlusIcon } from '@lucide/vue'\nimport { computed } from 'vue'\nimport { useChoice, useT } from '../../context'\nimport { cssColor } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Badge from '../ui/Badge.vue'\nimport Button from '../ui/Button.vue'\n\nconst props = defineProps<{\n column: KanbanColumnSchema\n id: string\n collapsed: boolean\n creatable: boolean\n filtered: boolean\n}>()\nconst emit = defineEmits<{ toggle: []; create: [] }>()\nconst t = useT()\nconst choice = useChoice()\n\nconst wip = computed(() => kanbanWipState(props.column))\nconst shown = computed(() =>\n props.column.wipLimit !== undefined\n ? props.column.count\n : props.filtered\n ? props.column.total\n : props.column.count,\n)\nconst countLabel = computed(() => {\n const column = props.column\n\n if (column.wipLimit !== undefined) {\n return t('kanban.wip', { count: column.count, limit: column.wipLimit }, ':count of :limit')\n }\n\n return props.filtered && column.total !== column.count\n ? t(\n 'kanban.count_filtered',\n { shown: column.total, count: column.count },\n ':shown of :count cards',\n )\n : choice('kanban.count', column.count, {}, '{1} :count card\|[0,] :count cards')\n})\nconst style = computed(() =>\n props.column.color ? { borderTopColor: cssColor(props.column.color) } : undefined,\n)\nconst toggleLabel = computed(() =>\n props.collapsed\n ? t('kanban.expand', { column: props.column.label }, 'Expand :column')\n : t('kanban.collapse', { column: props.column.label }, 'Collapse :column'),\n)\nconst addLabel = computed(() =>\n t('kanban.add_card', { column: props.column.label }, 'Add a card to :column'),\n)\n</script>\n\n<template>\n <div\n v-if=\"props.collapsed\"\n class=\"bg-muted/60 flex snap-start flex-col items-center gap-2 rounded-lg border border-t-4 px-1 py-2\"\n :style=\"style\"\n data-slot=\"kanban-column-header\"\n :data-column=\"props.column.key\"\n data-collapsed=\"\"\n :data-wip=\"wip ?? undefined\"\n >\n <Button\n type=\"button\"\n variant=\"ghost\"\n size=\"icon-xs\"\n :aria-label=\"toggleLabel\"\n :aria-expanded=\"false\"\n @click=\"emit('toggle')\"\n >\n <ChevronsLeftRightIcon aria-hidden=\"true\" />\n </Button>\n <span class=\"text-muted-foreground text-xs tabular-nums\" :title=\"countLabel\">{{ shown }}</span>\n <h3 :id=\"props.id\" class=\"text-sm font-medium [writing-mode:vertical-rl]\">\n {{ props.column.label }}\n </h3>\n </div>\n <div\n v-else\n class=\"bg-muted/60 flex snap-start flex-col gap-1 rounded-lg border border-t-4 px-3 py-2\"\n :style=\"style\"\n data-slot=\"kanban-column-header\"\n :data-column=\"props.column.key\"\n :data-wip=\"wip ?? undefined\"\n >\n <div class=\"flex items-center gap-2\">\n <Icon\n v-if=\"props.column.icon\"\n :name=\"props.column.icon\"\n class=\"text-muted-foreground size-4\"\n />\n <h3 :id=\"props.id\" class=\"min-w-0 truncate text-sm font-semibold\">\n {{ props.column.label }}\n </h3>\n <Badge\n variant=\"secondary\"\n :class=\"\n cn(\n 'h-5 px-1.5 tabular-nums',\n wip === 'over' && 'bg-destructive/15 text-destructive',\n wip === 'full' && 'bg-warning/15 text-warning',\n )\n \"\n :title=\"countLabel\"\n >\n <span aria-hidden=\"true\">{{\n props.column.wipLimit !== undefined\n ? `${props.column.count}/${props.column.wipLimit}`\n : shown\n }}</span>\n <span class=\"sr-only\">{{ countLabel }}</span>\n </Badge>\n <div class=\"ms-auto flex items-center\">\n <Button\n v-if=\"props.creatable\"\n type=\"button\"\n variant=\"ghost\"\n size=\"icon-xs\"\n :aria-label=\"addLabel\"\n :title=\"addLabel\"\n @click=\"emit('create')\"\n >\n <PlusIcon aria-hidden=\"true\" />\n </Button>\n <Button\n v-if=\"props.column.collapsible\"\n type=\"button\"\n variant=\"ghost\"\n size=\"icon-xs\"\n :aria-label=\"toggleLabel\"\n :title=\"toggleLabel\"\n :aria-expanded=\"true\"\n @click=\"emit('toggle')\"\n >\n <ChevronsRightLeftIcon aria-hidden=\"true\" />\n </Button>\n </div>\n </div>\n <p v-if=\"props.column.description\" class=\"text-muted-foreground line-clamp-2 text-xs\">\n {{ props.column.description }}\n </p>\n <p v-if=\"wip === 'over'\" class=\"text-destructive text-xs\">\n {{\n choice(\n 'kanban.wip_over',\n props.column.wipLimit ?? 0,\n { limit: props.column.wipLimit ?? 0 },\n '{1} Over the limit of :limit card\|[0,] Over the limit of :limit cards',\n )\n }}\n </p>\n <p v-if=\"wip === 'full' && props.column.wipStrict\" class=\"text-muted-foreground text-xs\">\n {{ t('kanban.wip_full', {}, 'This column is full') }}\n </p>\n </div>\n</template>\n"],"mappings":"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"}

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

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

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

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

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

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

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

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

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

	@@ -1 +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\"\n >\n {{ props.component.heading }}\n </component>\n <p v-if=\"props.component.description\" class=\"text-muted-foreground mt-1 text-sm\">\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\"\n >\n {{ props.component.heading }}\n </component>\n <p v-if=\"props.component.description\" class=\"text-muted-foreground mt-1 text-sm\">\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":""}
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":""}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SectionComponent.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/SectionComponent.vue"],"names":[],"mappings":"~~AA8PA~~,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAyBlD,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,aAAa,CAAA;CAAE,CAAC;;~~AAyiBhD~~,wBAMG"}
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"}

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

@@ -6,12 +6,12 @@ import i from "../ui/Button2.js";
 import a from "../actions/ActionList.js";
 import { useOptionalFormStore as o } from "../form/form-context.js";
 import s from "../schema/SchemaRenderer.js";
-import c from "../ui/Collapsible.js";
-import l from "../ui/CollapsibleContent.js";
-import u from "../ui/CollapsibleTrigger.js";
-import { useFieldActionContext as d } from "../schema/field-actions.js";
-import f from "./DeferredSchema.js";
-import p from "./MixedContent.js";
+import { useFieldActionContext as c } from "../schema/field-actions.js";
+import l from "./DeferredSchema.js";
+import u from "../ui/Collapsible.js";
+import d from "../ui/CollapsibleContent.js";
+import f from "./MixedContent.js";
+import p from "../ui/CollapsibleTrigger.js";
 import { actionsAlignmentClass as m, headingTag as h, readPersisted as g, schemaGapClass as _, writePersisted as v } from "@alfakit/core";
 import { computed as y, createBlock as b, createCommentVNode as x, createElementBlock as S, createElementVNode as C, createTextVNode as w, createVNode as T, defineComponent as E, mergeProps as D, normalizeClass as O, onMounted as k, openBlock as A, ref as j, resolveDynamicComponent as M, toDisplayString as N, unref as P, withCtx as F } from "vue";
 import { ChevronDownIcon as I } from "@lucide/vue";
@@ -21,15 +21,15 @@ var L = {
 	class: "flex flex-wrap items-start gap-3 lg:col-span-1"
 }, R = { class: "min-w-0 flex-1 basis-48" }, z = {
 	key: 1,
-	class: "text-muted-foreground mt-1 text-sm"
+	class: "text-muted-foreground mt-1 text-sm break-words"
 }, B = { class: "min-w-0 flex-1 basis-48" }, V = {
 	key: 1,
-	class: "text-muted-foreground mt-1 text-sm"
+	class: "text-muted-foreground mt-1 text-sm break-words"
 }, H = /*@__PURE__*/ E({
 	__name: "SectionComponent",
 	props: { component: {} },
 	setup(E) {
-		let H = E, U = j(!H.component.collapsed), W = o(), G = t(), K = d(() => H.component), q = y(() => W ? K.value : G), J = y(() => h(H.component.headingLevel)), Y = y(() => !!(H.component.heading || H.component.description || H.component.icon || H.component.headerActions?.length || H.component.afterHeader?.length));
+		let H = E, U = j(!H.component.collapsed), W = o(), G = t(), K = c(() => H.component), q = y(() => W ? K.value : G), J = y(() => h(H.component.headingLevel)), Y = y(() => !!(H.component.heading || H.component.description || H.component.icon || H.component.headerActions?.length || H.component.afterHeader?.length));
 		k(() => {
 			let e = H.component.persistCollapsed;
 			if (!e) return;
@@ -40,7 +40,7 @@ var L = {
 			U.value = e, H.component.persistCollapsed && v(H.component.persistCollapsed, e ? "expanded" : "collapsed");
 		}
 		let Z = y(() => !!H.component.footerActions?.length), Q = y(() => Z.value || !!H.component.footer?.length), $ = e();
-		return (e, t) => H.component.aside ? (A(), b(c, {
+		return (e, t) => H.component.aside ? (A(), b(u, {
 			key: 0,
 			open: !H.component.collapsible || U.value,
 			"as-child": "",
@@ -57,7 +57,7 @@ var L = {
 				}, null, 8, ["name"])) : x("", !0),
 				C("div", R, [H.component.heading ? (A(), b(M(J.value), {
 					key: 0,
-					class: "text-base leading-6 font-semibold"
+					class: "text-base leading-6 font-semibold break-words"
 				}, {
 					default: F(() => [w(N(H.component.heading), 1)]),
 					_: 1
@@ -68,11 +68,11 @@ var L = {
 					context: q.value,
 					size: "sm"
 				}, null, 8, ["actions", "context"])) : x("", !0),
-				T(p, {
+				T(f, {
 					items: H.component.afterHeader,
 					name: "section-after-header"
 				}, null, 8, ["items"]),
-				H.component.collapsible ? (A(), b(u, {
+				H.component.collapsible ? (A(), b(p, {
 					key: 2,
 					"as-child": ""
 				}, {
@@ -91,11 +91,11 @@ var L = {
 					}, 8, ["aria-label"])]),
 					_: 1
 				})) : x("", !0)
-			])) : x("", !0), T(l, { "as-child": "" }, {
+			])) : x("", !0), T(d, { "as-child": "" }, {
 				default: F(() => [C("div", {
 					"data-surface": "section",
 					class: O(P(n)("bg-card rounded-xl border shadow-xs lg:col-span-2", H.component.secondary && "bg-muted/40"))
-				}, [C("div", { class: O(P(n)("p-6", H.component.compact && "p-4")) }, [T(f, { component: H.component }, {
+				}, [C("div", { class: O(P(n)("p-6", H.component.compact && "p-4")) }, [T(l, { component: H.component }, {
 					default: F(({ component: e }) => [T(s, {
 						components: e.schema ?? [],
 						columns: e.columns,
@@ -119,14 +119,14 @@ var L = {
 					"actions",
 					"context",
 					"class"
-				])) : x("", !0), T(p, {
+				])) : x("", !0), T(f, {
 					items: H.component.footer,
 					name: "section-footer-content"
 				}, null, 8, ["items"])], 2)) : x("", !0)], 2)]),
 				_: 1
 			})], 16)]),
 			_: 1
-		}, 8, ["open"])) : (A(), b(c, {
+		}, 8, ["open"])) : (A(), b(u, {
 			key: 1,
 			open: !H.component.collapsible || U.value,
 			"as-child": "",
@@ -147,7 +147,7 @@ var L = {
 				}, null, 8, ["name"])) : x("", !0),
 				C("div", B, [H.component.heading ? (A(), b(M(J.value), {
 					key: 0,
-					class: "text-base leading-6 font-semibold"
+					class: "text-base leading-6 font-semibold break-words"
 				}, {
 					default: F(() => [w(N(H.component.heading), 1)]),
 					_: 1
@@ -158,11 +158,11 @@ var L = {
 					context: q.value,
 					size: "sm"
 				}, null, 8, ["actions", "context"])) : x("", !0),
-				T(p, {
+				T(f, {
 					items: H.component.afterHeader,
 					name: "section-after-header"
 				}, null, 8, ["items"]),
-				H.component.collapsible ? (A(), b(u, {
+				H.component.collapsible ? (A(), b(p, {
 					key: 2,
 					"as-child": ""
 				}, {
@@ -181,8 +181,8 @@ var L = {
 					}, 8, ["aria-label"])]),
 					_: 1
 				})) : x("", !0)
-			], 2)) : x("", !0), T(l, null, {
-				default: F(() => [C("div", { class: O(P(n)("p-6", H.component.compact && "p-4")) }, [T(f, { component: H.component }, {
+			], 2)) : x("", !0), T(d, null, {
+				default: F(() => [C("div", { class: O(P(n)("p-6", H.component.compact && "p-4")) }, [T(l, { component: H.component }, {
 					default: F(({ component: e }) => [T(s, {
 						components: e.schema ?? [],
 						columns: e.columns,
@@ -206,7 +206,7 @@ var L = {
 					"actions",
 					"context",
 					"class"
-				])) : x("", !0), T(p, {
+				])) : x("", !0), T(f, {
 					items: H.component.footer,
 					name: "section-footer-content"
 				}, null, 8, ["items"])], 2)) : x("", !0)]),