@alfakit/vue 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,298 @@
+import { cn as e } from "../../lib/utils.js";
+import { textColorClasses as t } from "../../lib/colors.js";
+import n from "../../lib/Icon.js";
+import r from "../ui/Label.js";
+import i from "./ContentSlot.js";
+import a from "./FieldAffixActions.js";
+import o from "./FieldHintActions.js";
+import { useInFusedGroup as s } from "./fused-group.js";
+import { fieldIds as c, hasSlots as ee, mergeAttributes as te } from "@alfakit/core";
+import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, mergeProps as v, normalizeClass as y, openBlock as b, renderSlot as x, toDisplayString as S, unref as C, withCtx as w } from "vue";
+//#region src/components/schema/FieldWrapper.vue?vue&type=script&setup=true&lang.ts
+var ne = ["data-field"], re = ["id", "innerHTML"], ie = ["id"], ae = ["data-field", "data-inline-label"], oe = ["data-slot"], se = {
+	key: 1,
+	class: "inline-flex min-w-0 items-center gap-2"
+}, T = {
+	key: 0,
+	class: "text-destructive ms-0.5",
+	"aria-hidden": "true"
+}, E = { key: 2 }, D = {
+	key: 3,
+	class: "inline-flex items-center gap-2"
+}, O = ["id"], k = ["href", "innerHTML"], A = ["innerHTML"], j = {
+	key: 2,
+	class: "flex items-start gap-2"
+}, M = { class: "flex flex-col gap-1" }, N = {
+	key: 0,
+	class: "inline-flex min-w-0 items-center gap-2"
+}, P = {
+	key: 0,
+	class: "text-destructive ms-0.5",
+	"aria-hidden": "true"
+}, F = {
+	key: 1,
+	class: "inline-flex items-center gap-2"
+}, I = ["id"], L = ["href", "innerHTML"], R = ["innerHTML"], z = {
+	key: 1,
+	"data-slot": "field-content",
+	class: "flex items-center gap-2"
+}, B = { class: "min-w-0 flex-1" }, V = ["id", "innerHTML"], H = ["id", "innerHTML"], U = ["id"], W = /*@__PURE__*/ _({
+	__name: "FieldWrapper",
+	props: {
+		field: {},
+		htmlFor: {},
+		error: {},
+		inline: {
+			type: Boolean,
+			default: !1
+		},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		hideLabel: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(_) {
+		let W = _, G = s(), K = u(() => W.hideLabel ? null : W.field.label), q = u(() => c(W.htmlFor)), J = u(() => typeof W.field.meta?.hintUrl == "string" ? W.field.meta.hintUrl : void 0), Y = u(() => te(W.field.extraAttributes, W.field.extraFieldWrapperAttributes)), X = u(() => W.field.slots?.afterLabel?.alignment === "start"), Z = u(() => !!K.value || !!W.field.slots?.beforeLabel || !!W.field.slots?.afterLabel && X.value), Q = u(() => !!W.field.hint || !!W.field.hintActions?.length || !!W.field.slots?.afterLabel && !X.value), ce = u(() => ee(W.field, ["beforeContent", "afterContent"])), $ = u(() => e("inline-flex items-center gap-1 text-xs", W.field.hintColor ? t[W.field.hintColor] : "text-muted-foreground"));
+		return (t, s) => C(G) ? (b(), p("div", v({
+			key: 0,
+			"data-slot": "field",
+			"data-field": W.field.statePath,
+			"data-fused": "",
+			class: C(e)("flex h-full flex-col", W.class)
+		}, Y.value), [
+			K.value ? (b(), d(r, {
+				key: 0,
+				id: q.value.label,
+				for: W.htmlFor,
+				class: "sr-only"
+			}, {
+				default: w(() => [h(S(K.value), 1)]),
+				_: 1
+			}, 8, ["id", "for"])) : f("", !0),
+			g(a, { component: W.field }, {
+				default: w(() => [x(t.$slots, "default")]),
+				_: 3
+			}, 8, ["component"]),
+			W.error && W.field.allowHtmlValidationMessages ? (b(), p("p", {
+				key: 1,
+				id: q.value.error,
+				class: "sr-only",
+				role: "alert",
+				innerHTML: W.error
+			}, null, 8, re)) : W.error ? (b(), p("p", {
+				key: 2,
+				id: q.value.error,
+				class: "sr-only",
+				role: "alert"
+			}, S(W.error), 9, ie)) : f("", !0)
+		], 16, ne)) : (b(), p("div", v({
+			key: 1,
+			"data-slot": "field",
+			"data-field": W.field.statePath,
+			"data-inline-label": W.field.inlineLabel ? "" : void 0,
+			class: C(e)("flex flex-col gap-1.5", W.field.inlineLabel && "sm:grid sm:grid-cols-3 sm:items-start sm:gap-x-4", W.class)
+		}, Y.value), [
+			W.field.inlineLabel ? f("", !0) : (b(), p(l, { key: 0 }, [W.field.slots?.aboveLabel ? (b(), d(i, {
+				key: 0,
+				component: W.field,
+				name: "aboveLabel"
+			}, null, 8, ["component"])) : f("", !0)], 64)),
+			W.field.inlineLabel || !W.inline && (Z.value || Q.value) ? (b(), p("div", {
+				key: 1,
+				"data-slot": W.field.inlineLabel ? "field-label" : void 0,
+				class: y(W.field.inlineLabel ? "flex flex-col gap-1 sm:pt-2" : "flex items-center justify-between gap-2")
+			}, [
+				W.field.slots?.aboveLabel && W.field.inlineLabel ? (b(), d(i, {
+					key: 0,
+					component: W.field,
+					name: "aboveLabel"
+				}, null, 8, ["component"])) : f("", !0),
+				Z.value ? (b(), p("span", se, [
+					W.field.slots?.beforeLabel ? (b(), d(i, {
+						key: 0,
+						component: W.field,
+						name: "beforeLabel"
+					}, null, 8, ["component"])) : f("", !0),
+					K.value ? (b(), d(r, {
+						key: 1,
+						id: q.value.label,
+						for: W.htmlFor
+					}, {
+						default: w(() => [m("span", null, [h(S(K.value), 1), W.field.required ? (b(), p("span", T, "*")) : f("", !0)])]),
+						_: 1
+					}, 8, ["id", "for"])) : f("", !0),
+					W.field.slots?.afterLabel && X.value ? (b(), d(i, {
+						key: 2,
+						component: W.field,
+						name: "afterLabel"
+					}, null, 8, ["component"])) : f("", !0)
+				])) : W.field.inlineLabel ? f("", !0) : (b(), p("span", E)),
+				Q.value ? (b(), p("span", D, [
+					W.field.hint ? (b(), p("span", {
+						key: 0,
+						id: q.value.hint,
+						class: y($.value)
+					}, [W.field.hintIcon ? (b(), d(C(n), {
+						key: 0,
+						name: W.field.hintIcon,
+						class: "size-3.5"
+					}, null, 8, ["name"])) : f("", !0), J.value ? (b(), p("a", {
+						key: 1,
+						href: J.value,
+						class: "hover:underline",
+						innerHTML: W.field.hint
+					}, null, 8, k)) : (b(), p("span", {
+						key: 2,
+						innerHTML: W.field.hint
+					}, null, 8, A))], 10, O)) : f("", !0),
+					W.field.hintActions?.length ? (b(), d(o, {
+						key: 1,
+						component: W.field
+					}, null, 8, ["component"])) : f("", !0),
+					W.field.slots?.afterLabel && !X.value ? (b(), d(i, {
+						key: 2,
+						component: W.field,
+						name: "afterLabel"
+					}, null, 8, ["component"])) : f("", !0)
+				])) : f("", !0),
+				W.field.slots?.belowLabel && W.field.inlineLabel ? (b(), d(i, {
+					key: 4,
+					component: W.field,
+					name: "belowLabel"
+				}, null, 8, ["component"])) : f("", !0)
+			], 10, oe)) : f("", !0),
+			W.inline && !W.field.inlineLabel ? (b(), p("div", j, [g(a, { component: W.field }, {
+				default: w(() => [x(t.$slots, "default")]),
+				_: 3
+			}, 8, ["component"]), m("div", M, [Z.value ? (b(), p("span", N, [
+				W.field.slots?.beforeLabel ? (b(), d(i, {
+					key: 0,
+					component: W.field,
+					name: "beforeLabel"
+				}, null, 8, ["component"])) : f("", !0),
+				K.value ? (b(), d(r, {
+					key: 1,
+					id: q.value.label,
+					for: W.htmlFor,
+					class: "cursor-pointer font-normal"
+				}, {
+					default: w(() => [m("span", null, [h(S(K.value), 1), W.field.required ? (b(), p("span", P, "*")) : f("", !0)])]),
+					_: 1
+				}, 8, ["id", "for"])) : f("", !0),
+				W.field.slots?.afterLabel && X.value ? (b(), d(i, {
+					key: 2,
+					component: W.field,
+					name: "afterLabel"
+				}, null, 8, ["component"])) : f("", !0)
+			])) : f("", !0), Q.value ? (b(), p("span", F, [
+				W.field.hint ? (b(), p("span", {
+					key: 0,
+					id: q.value.hint,
+					class: y($.value)
+				}, [W.field.hintIcon ? (b(), d(C(n), {
+					key: 0,
+					name: W.field.hintIcon,
+					class: "size-3.5"
+				}, null, 8, ["name"])) : f("", !0), J.value ? (b(), p("a", {
+					key: 1,
+					href: J.value,
+					class: "hover:underline",
+					innerHTML: W.field.hint
+				}, null, 8, L)) : (b(), p("span", {
+					key: 2,
+					innerHTML: W.field.hint
+				}, null, 8, R))], 10, I)) : f("", !0),
+				W.field.hintActions?.length ? (b(), d(o, {
+					key: 1,
+					component: W.field
+				}, null, 8, ["component"])) : f("", !0),
+				W.field.slots?.afterLabel && !X.value ? (b(), d(i, {
+					key: 2,
+					component: W.field,
+					name: "afterLabel"
+				}, null, 8, ["component"])) : f("", !0)
+			])) : f("", !0)])])) : f("", !0),
+			m("div", { class: y(W.field.inlineLabel ? "flex min-w-0 flex-col gap-1.5 sm:col-span-2" : "contents") }, [
+				W.field.slots?.belowLabel && !W.field.inlineLabel ? (b(), d(i, {
+					key: 0,
+					component: W.field,
+					name: "belowLabel"
+				}, null, 8, ["component"])) : f("", !0),
+				!W.inline || W.field.inlineLabel ? (b(), p(l, { key: 1 }, [W.field.slots?.aboveContent ? (b(), d(i, {
+					key: 0,
+					component: W.field,
+					name: "aboveContent"
+				}, null, 8, ["component"])) : f("", !0), ce.value ? (b(), p("div", z, [
+					W.field.slots?.beforeContent ? (b(), d(i, {
+						key: 0,
+						component: W.field,
+						name: "beforeContent",
+						class: "shrink-0 flex-nowrap"
+					}, null, 8, ["component"])) : f("", !0),
+					m("div", B, [g(a, { component: W.field }, {
+						default: w(() => [x(t.$slots, "default")]),
+						_: 3
+					}, 8, ["component"])]),
+					W.field.slots?.afterContent ? (b(), d(i, {
+						key: 1,
+						component: W.field,
+						name: "afterContent",
+						class: "shrink-0 flex-nowrap"
+					}, null, 8, ["component"])) : f("", !0)
+				])) : (b(), d(a, {
+					key: 2,
+					component: W.field
+				}, {
+					default: w(() => [x(t.$slots, "default")]),
+					_: 3
+				}, 8, ["component"]))], 64)) : f("", !0),
+				W.field.helperText ? (b(), p("p", {
+					key: 2,
+					id: q.value.helper,
+					class: "text-muted-foreground text-xs",
+					innerHTML: W.field.helperText
+				}, null, 8, V)) : f("", !0),
+				W.field.slots?.belowContent ? (b(), d(i, {
+					key: 3,
+					component: W.field,
+					name: "belowContent"
+				}, null, 8, ["component"])) : f("", !0),
+				W.error ? (b(), p(l, { key: 4 }, [
+					W.field.slots?.aboveErrorMessage ? (b(), d(i, {
+						key: 0,
+						component: W.field,
+						name: "aboveErrorMessage"
+					}, null, 8, ["component"])) : f("", !0),
+					W.field.allowHtmlValidationMessages ? (b(), p("p", {
+						key: 1,
+						id: q.value.error,
+						class: "text-destructive text-xs",
+						role: "alert",
+						innerHTML: W.error
+					}, null, 8, H)) : (b(), p("p", {
+						key: 2,
+						id: q.value.error,
+						class: "text-destructive text-xs",
+						role: "alert"
+					}, S(W.error), 9, U)),
+					W.field.slots?.belowErrorMessage ? (b(), d(i, {
+						key: 3,
+						component: W.field,
+						name: "belowErrorMessage"
+					}, null, 8, ["component"])) : f("", !0)
+				], 64)) : f("", !0)
+			], 2)
+		], 16, ae));
+	}
+});
+//#endregion
+export { W as default };
+
+//# sourceMappingURL=FieldWrapper.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldWrapper.vue_vue_type_script_setup_true_lang.js","names":["_unref","_openBlock","_createElementBlock","_mergeProps","_createBlock","Label","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode","FieldAffixActions","_renderSlot","_Fragment","ContentSlot","_normalizeClass","_createElementVNode","Icon","FieldHintActions","Icon_default","Label_default","ContentSlot_default","FieldAffixActions_default","FieldHintActions_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","_hoisted_15","_hoisted_16","_hoisted_17","_hoisted_18","_hoisted_19","_hoisted_20","_hoisted_21","_hoisted_22","_hoisted_23","_hoisted_24","_hoisted_25","FieldWrapper_vue_vue_type_script_setup_true_lang_default","props","__props","fused","useInFusedGroup","label","computed","ids","fieldIds","hintUrl","wrapperAttributes","mergeAttributes","afterLabelAtStart","hasLabelLine","hasHint","hasSideSlots","hasSlots","hintClass","cn","textColorClasses","unref","openBlock","createElementBlock","mergeProps","createBlock","withCtx","createTextVNode","toDisplayString","createCommentVNode","createVNode","renderSlot","_ctx","Fragment","normalizeClass","createElementVNode"],"sources":["../../../src/components/schema/FieldWrapper.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { BaseField } from '@alfakit/core'\nimport { fieldIds, hasSlots, mergeAttributes } from '@alfakit/core'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Label from '../ui/Label.vue'\nimport ContentSlot from './ContentSlot.vue'\nimport FieldAffixActions from './FieldAffixActions.vue'\nimport FieldHintActions from './FieldHintActions.vue'\nimport { useInFusedGroup } from './fused-group'\n\n/**\n * Label, hint, content slots, helper text and validation error around a form control.\n */\nconst props = withDefaults(\n  defineProps<{\n    field: BaseField\n    htmlFor: string\n    error?: string\n    /** Render the label after the control (checkbox, toggle). */\n    inline?: boolean\n    class?: HTMLAttributes['class']\n    /** Suppress the label (the control renders its own). */\n    hideLabel?: boolean\n  }>(),\n  { inline: false, hideLabel: false },\n)\n\nconst fused = useInFusedGroup()\nconst label = computed(() => (props.hideLabel ? null : props.field.label))\n// Stable ids the control references through `aria-describedby` / `aria-labelledby`.\nconst ids = computed(() => fieldIds(props.htmlFor))\nconst hintUrl = computed(() =>\n  typeof props.field.meta?.hintUrl === 'string' ? props.field.meta.hintUrl : undefined,\n)\nconst wrapperAttributes = computed(() =>\n  mergeAttributes(props.field.extraAttributes, props.field.extraFieldWrapperAttributes),\n)\n// `afterLabel()` sits with the hint at the end of the label row unless aligned to the start.\nconst afterLabelAtStart = computed(() => props.field.slots?.afterLabel?.alignment === 'start')\nconst hasLabelLine = computed(\n  () =>\n    Boolean(label.value) ||\n    Boolean(props.field.slots?.beforeLabel) ||\n    (Boolean(props.field.slots?.afterLabel) && afterLabelAtStart.value),\n)\nconst hasHint = computed(\n  () =>\n    Boolean(props.field.hint) ||\n    Boolean(props.field.hintActions?.length) ||\n    (Boolean(props.field.slots?.afterLabel) && !afterLabelAtStart.value),\n)\nconst hasSideSlots = computed(() => hasSlots(props.field, ['beforeContent', 'afterContent']))\nconst hintClass = computed(() =>\n  cn(\n    'inline-flex items-center gap-1 text-xs',\n    props.field.hintColor ? textColorClasses[props.field.hintColor] : 'text-muted-foreground',\n  ),\n)\n</script>\n\n<template>\n  <!-- Inside a FusedGroup: the control only; the label stays for screen readers and the\n       group shows the error. -->\n  <div\n    v-if=\"fused\"\n    data-slot=\"field\"\n    :data-field=\"props.field.statePath\"\n    data-fused=\"\"\n    :class=\"cn('flex h-full flex-col', props.class)\"\n    v-bind=\"wrapperAttributes\"\n  >\n    <Label v-if=\"label\" :id=\"ids.label\" :for=\"props.htmlFor\" class=\"sr-only\">{{ label }}</Label>\n    <FieldAffixActions :component=\"props.field\"><slot /></FieldAffixActions>\n    <p\n      v-if=\"props.error && props.field.allowHtmlValidationMessages\"\n      :id=\"ids.error\"\n      class=\"sr-only\"\n      role=\"alert\"\n      v-html=\"props.error\"\n    />\n    <p v-else-if=\"props.error\" :id=\"ids.error\" class=\"sr-only\" role=\"alert\">\n      {{ props.error }}\n    </p>\n  </div>\n  <div\n    v-else\n    data-slot=\"field\"\n    :data-field=\"props.field.statePath\"\n    :data-inline-label=\"props.field.inlineLabel ? '' : undefined\"\n    :class=\"\n      cn(\n        'flex flex-col gap-1.5',\n        props.field.inlineLabel && 'sm:grid sm:grid-cols-3 sm:items-start sm:gap-x-4',\n        props.class,\n      )\n    \"\n    v-bind=\"wrapperAttributes\"\n  >\n    <template v-if=\"!props.field.inlineLabel\">\n      <ContentSlot\n        v-if=\"props.field.slots?.aboveLabel\"\n        :component=\"props.field\"\n        name=\"aboveLabel\"\n      />\n    </template>\n    <!-- `inlineLabel()`: label in the first column, the control in the other two from sm up;\n         stacked on phones. Grid columns follow the text direction, so RTL works. -->\n    <div\n      v-if=\"props.field.inlineLabel || (!props.inline && (hasLabelLine || hasHint))\"\n      :data-slot=\"props.field.inlineLabel ? 'field-label' : undefined\"\n      :class=\"\n        props.field.inlineLabel\n          ? 'flex flex-col gap-1 sm:pt-2'\n          : 'flex items-center justify-between gap-2'\n      \"\n    >\n      <ContentSlot\n        v-if=\"props.field.slots?.aboveLabel && props.field.inlineLabel\"\n        :component=\"props.field\"\n        name=\"aboveLabel\"\n      />\n      <span v-if=\"hasLabelLine\" class=\"inline-flex min-w-0 items-center gap-2\">\n        <ContentSlot\n          v-if=\"props.field.slots?.beforeLabel\"\n          :component=\"props.field\"\n          name=\"beforeLabel\"\n        />\n        <Label v-if=\"label\" :id=\"ids.label\" :for=\"props.htmlFor\">\n          <span>\n            {{ label\n            }}<span v-if=\"props.field.required\" class=\"text-destructive ms-0.5\" aria-hidden=\"true\"\n              >*</span\n            >\n          </span>\n        </Label>\n        <ContentSlot\n          v-if=\"props.field.slots?.afterLabel && afterLabelAtStart\"\n          :component=\"props.field\"\n          name=\"afterLabel\"\n        />\n      </span>\n      <span v-else-if=\"!props.field.inlineLabel\" />\n      <span v-if=\"hasHint\" class=\"inline-flex items-center gap-2\">\n        <span v-if=\"props.field.hint\" :id=\"ids.hint\" :class=\"hintClass\">\n          <Icon v-if=\"props.field.hintIcon\" :name=\"props.field.hintIcon\" class=\"size-3.5\" />\n          <a v-if=\"hintUrl\" :href=\"hintUrl\" class=\"hover:underline\" v-html=\"props.field.hint\" />\n          <span v-else v-html=\"props.field.hint\" />\n        </span>\n        <FieldHintActions v-if=\"props.field.hintActions?.length\" :component=\"props.field\" />\n        <ContentSlot\n          v-if=\"props.field.slots?.afterLabel && !afterLabelAtStart\"\n          :component=\"props.field\"\n          name=\"afterLabel\"\n        />\n      </span>\n      <ContentSlot\n        v-if=\"props.field.slots?.belowLabel && props.field.inlineLabel\"\n        :component=\"props.field\"\n        name=\"belowLabel\"\n      />\n    </div>\n    <div v-if=\"props.inline && !props.field.inlineLabel\" class=\"flex items-start gap-2\">\n      <FieldAffixActions :component=\"props.field\"><slot /></FieldAffixActions>\n      <div class=\"flex flex-col gap-1\">\n        <span v-if=\"hasLabelLine\" class=\"inline-flex min-w-0 items-center gap-2\">\n          <ContentSlot\n            v-if=\"props.field.slots?.beforeLabel\"\n            :component=\"props.field\"\n            name=\"beforeLabel\"\n          />\n          <Label\n            v-if=\"label\"\n            :id=\"ids.label\"\n            :for=\"props.htmlFor\"\n            class=\"cursor-pointer font-normal\"\n          >\n            <span>\n              {{ label\n              }}<span v-if=\"props.field.required\" class=\"text-destructive ms-0.5\" aria-hidden=\"true\"\n                >*</span\n              >\n            </span>\n          </Label>\n          <ContentSlot\n            v-if=\"props.field.slots?.afterLabel && afterLabelAtStart\"\n            :component=\"props.field\"\n            name=\"afterLabel\"\n          />\n        </span>\n        <span v-if=\"hasHint\" class=\"inline-flex items-center gap-2\">\n          <span v-if=\"props.field.hint\" :id=\"ids.hint\" :class=\"hintClass\">\n            <Icon v-if=\"props.field.hintIcon\" :name=\"props.field.hintIcon\" class=\"size-3.5\" />\n            <a v-if=\"hintUrl\" :href=\"hintUrl\" class=\"hover:underline\" v-html=\"props.field.hint\" />\n            <span v-else v-html=\"props.field.hint\" />\n          </span>\n          <FieldHintActions v-if=\"props.field.hintActions?.length\" :component=\"props.field\" />\n          <ContentSlot\n            v-if=\"props.field.slots?.afterLabel && !afterLabelAtStart\"\n            :component=\"props.field\"\n            name=\"afterLabel\"\n          />\n        </span>\n      </div>\n    </div>\n    <div\n      :class=\"props.field.inlineLabel ? 'flex min-w-0 flex-col gap-1.5 sm:col-span-2' : 'contents'\"\n    >\n      <ContentSlot\n        v-if=\"props.field.slots?.belowLabel && !props.field.inlineLabel\"\n        :component=\"props.field\"\n        name=\"belowLabel\"\n      />\n      <template v-if=\"!props.inline || props.field.inlineLabel\">\n        <ContentSlot\n          v-if=\"props.field.slots?.aboveContent\"\n          :component=\"props.field\"\n          name=\"aboveContent\"\n        />\n        <div v-if=\"hasSideSlots\" data-slot=\"field-content\" class=\"flex items-center gap-2\">\n          <ContentSlot\n            v-if=\"props.field.slots?.beforeContent\"\n            :component=\"props.field\"\n            name=\"beforeContent\"\n            class=\"shrink-0 flex-nowrap\"\n          />\n          <div class=\"min-w-0 flex-1\">\n            <FieldAffixActions :component=\"props.field\"><slot /></FieldAffixActions>\n          </div>\n          <ContentSlot\n            v-if=\"props.field.slots?.afterContent\"\n            :component=\"props.field\"\n            name=\"afterContent\"\n            class=\"shrink-0 flex-nowrap\"\n          />\n        </div>\n        <FieldAffixActions v-else :component=\"props.field\"><slot /></FieldAffixActions>\n      </template>\n      <p\n        v-if=\"props.field.helperText\"\n        :id=\"ids.helper\"\n        class=\"text-muted-foreground text-xs\"\n        v-html=\"props.field.helperText\"\n      />\n      <ContentSlot\n        v-if=\"props.field.slots?.belowContent\"\n        :component=\"props.field\"\n        name=\"belowContent\"\n      />\n      <template v-if=\"props.error\">\n        <ContentSlot\n          v-if=\"props.field.slots?.aboveErrorMessage\"\n          :component=\"props.field\"\n          name=\"aboveErrorMessage\"\n        />\n        <p\n          v-if=\"props.field.allowHtmlValidationMessages\"\n          :id=\"ids.error\"\n          class=\"text-destructive text-xs\"\n          role=\"alert\"\n          v-html=\"props.error\"\n        />\n        <p v-else :id=\"ids.error\" class=\"text-destructive text-xs\" role=\"alert\">\n          {{ props.error }}\n        </p>\n        <ContentSlot\n          v-if=\"props.field.slots?.belowErrorMessage\"\n          :component=\"props.field\"\n          name=\"belowErrorMessage\"\n        />\n      </template>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/schema/RenderComponent.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"RenderComponent.js","names":["_sfc_main","RenderComponent_vue_vue_type_script_setup_true_lang_default","RenderComponent_default"],"sources":["../../../src/components/schema/RenderComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { BaseField, SchemaComponent } from '@alfakit/core'\nimport {\n  columnOrderClasses,\n  columnSpanClasses,\n  columnStartClasses,\n  containerColumnSpanClasses,\n} from '@alfakit/core'\nimport { computed } from 'vue'\nimport { useRegistry } from '../../context'\nimport { cn } from '../../lib/utils'\nimport TranslatableField from './TranslatableField.vue'\n\nconst props = defineProps<{ component: SchemaComponent }>()\nconst registry = useRegistry()\n\nconst type = computed(() =>\n  props.component.type === 'View'\n    ? ((props.component as { component?: string }).component ?? 'View')\n    : props.component.type,\n)\nconst resolved = computed(\n  () =>\n    registry.resolve(type.value) ??\n    (props.component.type === 'View' ? registry.resolve('View') : undefined),\n)\nconst translatable = computed(() =>\n  Boolean((props.component as Partial<BaseField>).translatable?.locales?.length),\n)\nconst span = computed(() =>\n  cn(\n    columnSpanClasses(props.component.columnSpan),\n    containerColumnSpanClasses(props.component.columnSpan),\n    columnStartClasses(props.component.columnStart),\n    columnOrderClasses(props.component.columnOrder),\n  ),\n)\n// Registered `View` components get the PHP `props` spread, as the docs describe.\nconst viewProps = computed(() =>\n  props.component.type === 'View'\n    ? ((props.component as { props?: Record<string, unknown> }).props ?? {})\n    : {},\n)\n</script>\n\n<template>\n  <div\n    v-if=\"!resolved\"\n    :class=\"\n      cn('border-destructive/40 text-destructive rounded-md border border-dashed p-3 text-xs', span)\n    \"\n  >\n    Unknown component type <code class=\"font-mono\">{{ type }}</code\n    >. Register it with <code class=\"font-mono\">createAlfakit({ components })</code>.\n  </div>\n  <div\n    v-else\n    data-slot=\"schema-item\"\n    :data-type=\"props.component.type\"\n    :class=\"cn('min-w-0', span || undefined)\"\n  >\n    <TranslatableField\n      v-if=\"translatable\"\n      :component=\"props.component as BaseField\"\n      :render=\"resolved\"\n    />\n    <component :is=\"resolved\" v-else v-bind=\"viewProps\" :component=\"props.component\" />\n  </div>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,7 @@
+import type { SchemaComponent } from '@alfakit/core';
+type __VLS_Props = {
+    component: SchemaComponent;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=RenderComponent.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RenderComponent.vue.d.ts","sourceRoot":"","sources":["../../../src/components/schema/RenderComponent.vue"],"names":[],"mappings":"AAuEA,OAAO,KAAK,EAAa,eAAe,EAAE,MAAM,eAAe,CAAA;AAY/D,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,eAAe,CAAA;CAAE,CAAC;;AAkHlD,wBAMG"}

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

@@ -0,0 +1,36 @@
+import { useRegistry as e } from "../../context.js";
+import { cn as t } from "../../lib/utils.js";
+import n from "./TranslatableField.js";
+import { columnOrderClasses as r, columnSpanClasses as i, columnStartClasses as a, containerColumnSpanClasses as o } from "@alfakit/core";
+import { computed as s, createBlock as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, defineComponent as f, mergeProps as p, normalizeClass as m, openBlock as h, resolveDynamicComponent as g, toDisplayString as _, unref as v } from "vue";
+//#region src/components/schema/RenderComponent.vue?vue&type=script&setup=true&lang.ts
+var y = { class: "font-mono" }, b = ["data-type"], x = /*@__PURE__*/ f({
+	__name: "RenderComponent",
+	props: { component: {} },
+	setup(f) {
+		let x = f, S = e(), C = s(() => x.component.type === "View" ? x.component.component ?? "View" : x.component.type), w = s(() => S.resolve(C.value) ?? (x.component.type === "View" ? S.resolve("View") : void 0)), T = s(() => !!x.component.translatable?.locales?.length), E = s(() => t(i(x.component.columnSpan), o(x.component.columnSpan), a(x.component.columnStart), r(x.component.columnOrder))), D = s(() => x.component.type === "View" ? x.component.props ?? {} : {});
+		return (e, r) => w.value ? (h(), l("div", {
+			key: 1,
+			"data-slot": "schema-item",
+			"data-type": x.component.type,
+			class: m(v(t)("min-w-0", E.value || void 0))
+		}, [T.value ? (h(), c(n, {
+			key: 0,
+			component: x.component,
+			render: w.value
+		}, null, 8, ["component", "render"])) : (h(), c(g(w.value), p({ key: 1 }, D.value, { component: x.component }), null, 16, ["component"]))], 10, b)) : (h(), l("div", {
+			key: 0,
+			class: m(v(t)("border-destructive/40 text-destructive rounded-md border border-dashed p-3 text-xs", E.value))
+		}, [
+			r[0] ||= d(" Unknown component type ", -1),
+			u("code", y, _(C.value), 1),
+			r[1] ||= d(". Register it with ", -1),
+			r[2] ||= u("code", { class: "font-mono" }, "createAlfakit({ components })", -1),
+			r[3] ||= d(". ", -1)
+		], 2));
+	}
+});
+//#endregion
+export { x as default };
+
+//# sourceMappingURL=RenderComponent.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RenderComponent.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createTextVNode","_createElementVNode","_toDisplayString","_createBlock","TranslatableField","_resolveDynamicComponent","_mergeProps","TranslatableField_default","_hoisted_1","_hoisted_2","RenderComponent_vue_vue_type_script_setup_true_lang_default","props","__props","registry","useRegistry","type","computed","resolved","translatable","span","cn","columnSpanClasses","containerColumnSpanClasses","columnStartClasses","columnOrderClasses","viewProps","openBlock","createElementBlock","normalizeClass","unref","createBlock","resolveDynamicComponent","mergeProps","_cache","createTextVNode","createElementVNode","toDisplayString"],"sources":["../../../src/components/schema/RenderComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { BaseField, SchemaComponent } from '@alfakit/core'\nimport {\n  columnOrderClasses,\n  columnSpanClasses,\n  columnStartClasses,\n  containerColumnSpanClasses,\n} from '@alfakit/core'\nimport { computed } from 'vue'\nimport { useRegistry } from '../../context'\nimport { cn } from '../../lib/utils'\nimport TranslatableField from './TranslatableField.vue'\n\nconst props = defineProps<{ component: SchemaComponent }>()\nconst registry = useRegistry()\n\nconst type = computed(() =>\n  props.component.type === 'View'\n    ? ((props.component as { component?: string }).component ?? 'View')\n    : props.component.type,\n)\nconst resolved = computed(\n  () =>\n    registry.resolve(type.value) ??\n    (props.component.type === 'View' ? registry.resolve('View') : undefined),\n)\nconst translatable = computed(() =>\n  Boolean((props.component as Partial<BaseField>).translatable?.locales?.length),\n)\nconst span = computed(() =>\n  cn(\n    columnSpanClasses(props.component.columnSpan),\n    containerColumnSpanClasses(props.component.columnSpan),\n    columnStartClasses(props.component.columnStart),\n    columnOrderClasses(props.component.columnOrder),\n  ),\n)\n// Registered `View` components get the PHP `props` spread, as the docs describe.\nconst viewProps = computed(() =>\n  props.component.type === 'View'\n    ? ((props.component as { props?: Record<string, unknown> }).props ?? {})\n    : {},\n)\n</script>\n\n<template>\n  <div\n    v-if=\"!resolved\"\n    :class=\"\n      cn('border-destructive/40 text-destructive rounded-md border border-dashed p-3 text-xs', span)\n    \"\n  >\n    Unknown component type <code class=\"font-mono\">{{ type }}</code\n    >. Register it with <code class=\"font-mono\">createAlfakit({ components })</code>.\n  </div>\n  <div\n    v-else\n    data-slot=\"schema-item\"\n    :data-type=\"props.component.type\"\n    :class=\"cn('min-w-0', span || undefined)\"\n  >\n    <TranslatableField\n      v-if=\"translatable\"\n      :component=\"props.component as BaseField\"\n      :render=\"resolved\"\n    />\n    <component :is=\"resolved\" v-else v-bind=\"viewProps\" :component=\"props.component\" />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;EAaA,IAAMe,IAAQC,GACRC,IAAWC,EAAY,GAEvBC,IAAOC,QACXL,EAAM,UAAU,SAAS,SACnBA,EAAM,UAAqC,aAAa,SAC1DA,EAAM,UAAU,IACtB,GACMM,IAAWD,QAEbH,EAAS,QAAQE,EAAK,KAAK,MAC1BJ,EAAM,UAAU,SAAS,SAASE,EAAS,QAAQ,MAAM,IAAI,KAAA,EAClE,GACMK,IAAeF,QACnB,EAASL,EAAM,UAAiC,cAAc,SAAS,MACzE,GACMQ,IAAOH,QACXI,EACEC,EAAkBV,EAAM,UAAU,UAAU,GAC5CW,EAA2BX,EAAM,UAAU,UAAU,GACrDY,EAAmBZ,EAAM,UAAU,WAAW,GAC9Ca,EAAmBb,EAAM,UAAU,WAAW,CAChD,CACF,GAEMc,IAAYT,QAChBL,EAAM,UAAU,SAAS,SACnBA,EAAM,UAAkD,SAAS,CAAC,IACpE,CAAC,CACP;mBAKWM,EAAA,SAQTrB,EAAA,GAAAC,EAYM,OAAA;;GAVJ,aAAU;GACT,aAAWc,EAAM,UAAU;GAC3B,OAAKb,EAAEC,EAAAqB,CAAA,CAAE,CAAA,WAAYD,EAAA,SAAQ,KAAA,CAAS,CAAA;EAG/B,GAAA,CAAAD,EAAA,SADRtB,EAAA,GAAAO,EAIEC,GAAA;;GAFC,WAAWO,EAAM;GACjB,QAAQM,EAAA;EAEXrB,GAAAA,MAAAA,GAAAA,CAAAA,aAAAA,QAAAA,CAAAA,MAAAA,EAAA,GAAAO,EAAmFE,EAAnEY,EAAA,KAAQ,GAAxBX,EAAmF,EAAA,KAAA,EAAA,GAA1CmB,EAAA,OAAS,EAAG,WAAWd,EAAM,UAAA,CAAA,GAAA,MAAA,IAAA,CAAA,WAAA,CAAA,EAAA,GAAA,IAAAF,CAAA,MApBxEb,EAAA,GAAAC,EAQM,OAAA;;GANH,OAAKC,EAASC,EAAAqB,CAAA,CAAE,CAAA,sFAAuFD,EAAA,KAAI,CAAA;;GAG7G,AAAAc,EAAA,OAAAjC,EAAA,4BACwB,EAAA;GAAAC,EACtB,QADsBO,GACtBN,EADiDa,EAAA,KAAI,GAAA,CAAA;GACrD,AAAAkB,EAAA,OAAAjC,EAAA,uBAAmB,EAAA;GAAA,AAAAiC,EAAA,OAAAhC,EAA4D,QAAA,EAAtD,OAAM,YAAW,GAAC,iCAA6B,EAAA;GAAO,AAAAgC,EAAA,OAAAjC,EAAA,MAClF,EAAA;EACAJ,GAAAA,CAAAA"}

package/dist/components/schema/SchemaRenderer.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SchemaRenderer.js","names":["_sfc_main","SchemaRenderer_vue_vue_type_script_setup_true_lang_default","SchemaRenderer_default"],"sources":["../../../src/components/schema/SchemaRenderer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Attributes, Breakpoints, SchemaComponent } from '@alfakit/core'\nimport {\n  containerGridColumnsClasses,\n  gridColumnsClasses,\n  hasContainerBreakpoints,\n} from '@alfakit/core'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '../../lib/utils'\nimport RenderComponent from './RenderComponent.vue'\n\n/**\n * Renders a list of schema components in a responsive grid, resolving each component's\n * `type` through the registry.\n */\nconst props = defineProps<{\n  components: SchemaComponent[]\n  columns?: Breakpoints\n  class?: HTMLAttributes['class']\n  /** `extraAttributes` of the layout component that owns this grid (Grid, Group, Tab, Step). */\n  attributes?: Attributes\n}>()\n</script>\n\n<template>\n  <!-- `@md`-style columns follow the width of this wrapper instead of the viewport. -->\n  <div\n    v-if=\"hasContainerBreakpoints(props.columns)\"\n    data-slot=\"schema-container\"\n    class=\"@container\"\n  >\n    <div\n      v-bind=\"props.attributes ?? {}\"\n      data-slot=\"schema\"\n      :class=\"\n        cn(\n          'grid gap-6',\n          gridColumnsClasses(props.columns ?? { default: 1 }),\n          containerGridColumnsClasses(props.columns),\n          props.class,\n        )\n      \"\n    >\n      <RenderComponent\n        v-for=\"component in props.components\"\n        :key=\"component.key\"\n        :component=\"component\"\n      />\n    </div>\n  </div>\n  <div\n    v-else\n    v-bind=\"props.attributes ?? {}\"\n    data-slot=\"schema\"\n    :class=\"cn('grid gap-6', gridColumnsClasses(props.columns ?? { default: 1 }), props.class)\"\n  >\n    <RenderComponent\n      v-for=\"component in props.components\"\n      :key=\"component.key\"\n      :component=\"component\"\n    />\n  </div>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,16 @@
+import type { Attributes, Breakpoints, SchemaComponent } from '@alfakit/core';
+import type { HTMLAttributes } from 'vue';
+/**
+ * Renders a list of schema components in a responsive grid, resolving each component's
+ * `type` through the registry.
+ */
+type __VLS_Props = {
+    components: SchemaComponent[];
+    columns?: Breakpoints;
+    class?: HTMLAttributes['class'];
+    /** `extraAttributes` of the layout component that owns this grid (Grid, Group, Tab, Step). */
+    attributes?: Attributes;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=SchemaRenderer.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SchemaRenderer.vue.d.ts","sourceRoot":"","sources":["../../../src/components/schema/SchemaRenderer.vue"],"names":[],"mappings":"AAiEA,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAM7E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAIzC;;;GAGG;AACH,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,eAAe,EAAE,CAAA;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IAC/B,8FAA8F;IAC9F,UAAU,CAAC,EAAE,UAAU,CAAA;CACxB,CAAC;;AAoFF,wBAMG"}

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

@@ -0,0 +1,44 @@
+import { cn as e } from "../../lib/utils.js";
+import t from "./RenderComponent.js";
+import { containerGridColumnsClasses as n, gridColumnsClasses as r, hasContainerBreakpoints as i } from "@alfakit/core";
+import { Fragment as a, createBlock as o, createElementBlock as s, createElementVNode as c, defineComponent as l, mergeProps as u, openBlock as d, renderList as f, unref as p } from "vue";
+//#region src/components/schema/SchemaRenderer.vue?vue&type=script&setup=true&lang.ts
+var m = {
+	key: 0,
+	"data-slot": "schema-container",
+	class: "@container"
+}, h = /*@__PURE__*/ l({
+	__name: "SchemaRenderer",
+	props: {
+		components: {},
+		columns: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		attributes: {}
+	},
+	setup(l) {
+		let h = l;
+		return (l, g) => p(i)(h.columns) ? (d(), s("div", m, [c("div", u(h.attributes ?? {}, {
+			"data-slot": "schema",
+			class: p(e)("grid gap-6", p(r)(h.columns ?? { default: 1 }), p(n)(h.columns), h.class)
+		}), [(d(!0), s(a, null, f(h.components, (e) => (d(), o(t, {
+			key: e.key,
+			component: e
+		}, null, 8, ["component"]))), 128))], 16)])) : (d(), s("div", u({ key: 1 }, h.attributes ?? {}, {
+			"data-slot": "schema",
+			class: p(e)("grid gap-6", p(r)(h.columns ?? { default: 1 }), h.class)
+		}), [(d(!0), s(a, null, f(h.components, (e) => (d(), o(t, {
+			key: e.key,
+			component: e
+		}, null, 8, ["component"]))), 128))], 16));
+	}
+});
+//#endregion
+export { h as default };
+
+//# sourceMappingURL=SchemaRenderer.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SchemaRenderer.vue_vue_type_script_setup_true_lang.js","names":["_unref","_openBlock","_createElementBlock","_createElementVNode","_mergeProps","_Fragment","_renderList","_createBlock","RenderComponent","RenderComponent_default","_hoisted_1","SchemaRenderer_vue_vue_type_script_setup_true_lang_default","props","__props","unref","hasContainerBreakpoints","openBlock","createElementBlock","createElementVNode","mergeProps","cn","gridColumnsClasses","containerGridColumnsClasses","Fragment","renderList","createBlock","component"],"sources":["../../../src/components/schema/SchemaRenderer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Attributes, Breakpoints, SchemaComponent } from '@alfakit/core'\nimport {\n  containerGridColumnsClasses,\n  gridColumnsClasses,\n  hasContainerBreakpoints,\n} from '@alfakit/core'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '../../lib/utils'\nimport RenderComponent from './RenderComponent.vue'\n\n/**\n * Renders a list of schema components in a responsive grid, resolving each component's\n * `type` through the registry.\n */\nconst props = defineProps<{\n  components: SchemaComponent[]\n  columns?: Breakpoints\n  class?: HTMLAttributes['class']\n  /** `extraAttributes` of the layout component that owns this grid (Grid, Group, Tab, Step). */\n  attributes?: Attributes\n}>()\n</script>\n\n<template>\n  <!-- `@md`-style columns follow the width of this wrapper instead of the viewport. -->\n  <div\n    v-if=\"hasContainerBreakpoints(props.columns)\"\n    data-slot=\"schema-container\"\n    class=\"@container\"\n  >\n    <div\n      v-bind=\"props.attributes ?? {}\"\n      data-slot=\"schema\"\n      :class=\"\n        cn(\n          'grid gap-6',\n          gridColumnsClasses(props.columns ?? { default: 1 }),\n          containerGridColumnsClasses(props.columns),\n          props.class,\n        )\n      \"\n    >\n      <RenderComponent\n        v-for=\"component in props.components\"\n        :key=\"component.key\"\n        :component=\"component\"\n      />\n    </div>\n  </div>\n  <div\n    v-else\n    v-bind=\"props.attributes ?? {}\"\n    data-slot=\"schema\"\n    :class=\"cn('grid gap-6', gridColumnsClasses(props.columns ?? { default: 1 }), props.class)\"\n  >\n    <RenderComponent\n      v-for=\"component in props.components\"\n      :key=\"component.key\"\n      :component=\"component\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAeA,IAAMY,IAAQC;mBAYJb,EAAAe,CAAA,CAAuB,CAACH,EAAM,OAAO,KAD7CX,EAAA,GAAAC,EAuBM,OAvBNQ,GAuBM,CAlBJP,EAiBM,OAjBNC,EACUQ,EAAM,cAAU,CAAA,GAAA;GACxB,aAAU;GACT,OAAgBZ,EAAAoB,CAAA,CAAE,CAAA,cAAoCpB,EAAAqB,CAAA,CAAkB,CAACT,EAAM,WAAO,EAAA,SAAA,EAAA,CAAA,GAA+BZ,EAAAsB,CAAA,CAA2B,CAACV,EAAM,OAAO,GAAaA,EAAM,KAAA;EASlLX,CAAAA,GAAAA,EAAAA,EAAA,EAAA,GAAAC,EAIEG,GAAA,MAAAC,EAHoBM,EAAM,aAAnB,OADTX,EAAA,GAAAM,EAIEC,GAAA;GAFC,KAAKkB,EAAU;GACJ;6BAIlBzB,GAAAA,GAAAA,EAAAA,GAAAA,EAAAA,CAAAA,CAAAA,MAAAA,EAAA,GAAAC,EAWM,OAXNE,EAWM,EAAA,KAAA,EAAA,GATIQ,EAAM,cAAU,CAAA,GAAA;GACxB,aAAU;GACT,OAAOZ,EAAAoB,CAAA,CAAE,CAAA,cAAepB,EAAAqB,CAAA,CAAkB,CAACT,EAAM,WAAO,EAAA,SAAA,EAAA,CAAA,GAAqBA,EAAM,KAAK;EAEzFX,CAAAA,GAAAA,EAAAA,EAAA,EAAA,GAAAC,EAIEG,GAAA,MAAAC,EAHoBM,EAAM,aAAnB,OADTX,EAAA,GAAAM,EAIEC,GAAA;GAFC,KAAKkB,EAAU;GACJ"}

package/dist/components/schema/TranslatableField.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TranslatableField.js","names":["_sfc_main","TranslatableField_vue_vue_type_script_setup_true_lang_default","TranslatableField_default"],"sources":["../../../src/components/schema/TranslatableField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { BaseField } from '@alfakit/core'\nimport {\n  initialTranslatableLocale,\n  translatableLocaleField,\n  translatableLocalesWithErrors,\n} from '@alfakit/core'\nimport { computed, ref, watch, type Component } from 'vue'\nimport { useStoreSelector } from '../../composables/use-store'\nimport { useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { useFormStore } from '../form/form-context'\n\n/**\n * A `->translatable()` field: a language switcher above the field's own renderer, bound\n * to `{statePath}.{locale}` for the selected language. Languages with a validation error\n * are marked, and the first of them opens after a failed submit.\n */\nconst props = defineProps<{ component: BaseField; render: Component }>()\nconst t = useT()\nconst store = useFormStore()\n\nconst locales = computed(() => props.component.translatable?.locales ?? [])\nconst invalidKey = useStoreSelector(store.store, (state) =>\n  translatableLocalesWithErrors(props.component, state.errors).join(','),\n)\nconst invalid = computed(() => (invalidKey.value === '' ? [] : invalidKey.value.split(',')))\nconst current = ref(initialTranslatableLocale(props.component, store.store.get().errors))\n\n// After a failed submit, show a language that needs attention.\nwatch(invalidKey, () => {\n  if (invalid.value.length > 0 && !invalid.value.includes(current.value)) {\n    current.value = invalid.value[0]!\n  }\n})\n\n// A `LocaleSwitcher` changes the language the fields open on; follow it when it changes.\nwatch(\n  () => props.component.translatable?.defaultLocale ?? '',\n  (editing) => {\n    if (editing !== '' && locales.value.some((option) => option.code === editing)) {\n      current.value = editing\n    }\n  },\n)\n\nconst locale = computed(\n  () => locales.value.find((candidate) => candidate.code === current.value) ?? locales.value[0],\n)\nconst field = computed(() =>\n  locale.value ? translatableLocaleField(props.component, locale.value) : props.component,\n)\n</script>\n\n<template>\n  <div v-if=\"locale\" data-slot=\"translatable-field\" class=\"flex flex-col gap-1.5\">\n    <div\n      role=\"group\"\n      :aria-label=\"\n        t('translatable.languages', { field: props.component.label ?? props.component.name })\n      \"\n      data-slot=\"translatable-locales\"\n      class=\"flex flex-wrap justify-end gap-1\"\n    >\n      <button\n        v-for=\"option in locales\"\n        :key=\"option.code\"\n        type=\"button\"\n        :lang=\"option.tag\"\n        :aria-pressed=\"option.code === locale.code\"\n        :data-active=\"option.code === locale.code || undefined\"\n        :data-invalid=\"invalid.includes(option.code) || undefined\"\n        :class=\"\n          cn(\n            'focus-visible:ring-ring/50 inline-flex h-6 items-center gap-1 rounded-md border px-2 text-xs font-medium transition-colors outline-none focus-visible:ring-[3px]',\n            option.code === locale.code\n              ? 'border-primary bg-primary text-primary-foreground'\n              : 'bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground',\n            invalid.includes(option.code) &&\n              option.code !== locale.code &&\n              'border-destructive text-destructive',\n          )\n        \"\n        @click=\"current = option.code\"\n      >\n        {{ option.label }}\n        <template v-if=\"invalid.includes(option.code)\">\n          <span aria-hidden=\"true\" class=\"bg-destructive size-1.5 rounded-full\" />\n          <span class=\"sr-only\">({{ t('translatable.has_errors') }})</span>\n        </template>\n      </button>\n    </div>\n    <component :is=\"props.render\" :key=\"locale.code\" :component=\"field\" />\n  </div>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,14 @@
+import type { BaseField } from '@alfakit/core';
+import { type Component } from 'vue';
+/**
+ * A `->translatable()` field: a language switcher above the field's own renderer, bound
+ * to `{statePath}.{locale}` for the selected language. Languages with a validation error
+ * are marked, and the first of them opens after a failed submit.
+ */
+type __VLS_Props = {
+    component: BaseField;
+    render: Component;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=TranslatableField.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TranslatableField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/schema/TranslatableField.vue"],"names":[],"mappings":"AAiGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAM9C,OAAO,EAAwB,KAAK,SAAS,EAAE,MAAM,KAAK,CAAA;AAM1D;;;;GAIG;AACH,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,SAAS,CAAC;IAAC,MAAM,EAAE,SAAS,CAAA;CAAE,CAAC;;AA6I/D,wBAMG"}

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

@@ -0,0 +1,58 @@
+import { useT as e } from "../../context.js";
+import { cn as t } from "../../lib/utils.js";
+import { useStoreSelector as n } from "../../composables/use-store.js";
+import { useFormStore as r } from "../form/form-context.js";
+import { initialTranslatableLocale as i, translatableLocaleField as a, translatableLocalesWithErrors as o } from "@alfakit/core";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, defineComponent as m, normalizeClass as h, openBlock as g, ref as _, renderList as v, resolveDynamicComponent as y, toDisplayString as b, unref as x, watch as S } from "vue";
+//#region src/components/schema/TranslatableField.vue?vue&type=script&setup=true&lang.ts
+var C = {
+	key: 0,
+	"data-slot": "translatable-field",
+	class: "flex flex-col gap-1.5"
+}, w = ["aria-label"], T = [
+	"lang",
+	"aria-pressed",
+	"data-active",
+	"data-invalid",
+	"onClick"
+], E = { class: "sr-only" }, D = /*@__PURE__*/ m({
+	__name: "TranslatableField",
+	props: {
+		component: {},
+		render: {}
+	},
+	setup(m) {
+		let D = m, O = e(), k = r(), A = c(() => D.component.translatable?.locales ?? []), j = n(k.store, (e) => o(D.component, e.errors).join(",")), M = c(() => j.value === "" ? [] : j.value.split(",")), N = _(i(D.component, k.store.get().errors));
+		S(j, () => {
+			M.value.length > 0 && !M.value.includes(N.value) && (N.value = M.value[0]);
+		}), S(() => D.component.translatable?.defaultLocale ?? "", (e) => {
+			e !== "" && A.value.some((t) => t.code === e) && (N.value = e);
+		});
+		let P = c(() => A.value.find((e) => e.code === N.value) ?? A.value[0]), F = c(() => P.value ? a(D.component, P.value) : D.component);
+		return (e, n) => P.value ? (g(), d("div", C, [f("div", {
+			role: "group",
+			"aria-label": x(O)("translatable.languages", { field: D.component.label ?? D.component.name }),
+			"data-slot": "translatable-locales",
+			class: "flex flex-wrap justify-end gap-1"
+		}, [(g(!0), d(s, null, v(A.value, (e) => (g(), d("button", {
+			key: e.code,
+			type: "button",
+			lang: e.tag,
+			"aria-pressed": e.code === P.value.code,
+			"data-active": e.code === P.value.code || void 0,
+			"data-invalid": M.value.includes(e.code) || void 0,
+			class: h(x(t)("focus-visible:ring-ring/50 inline-flex h-6 items-center gap-1 rounded-md border px-2 text-xs font-medium transition-colors outline-none focus-visible:ring-[3px]", e.code === P.value.code ? "border-primary bg-primary text-primary-foreground" : "bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground", M.value.includes(e.code) && e.code !== P.value.code && "border-destructive text-destructive")),
+			onClick: (t) => N.value = e.code
+		}, [p(b(e.label) + " ", 1), M.value.includes(e.code) ? (g(), d(s, { key: 0 }, [n[0] ||= f("span", {
+			"aria-hidden": "true",
+			class: "bg-destructive size-1.5 rounded-full"
+		}, null, -1), f("span", E, "(" + b(x(O)("translatable.has_errors")) + ")", 1)], 64)) : u("", !0)], 10, T))), 128))], 8, w), (g(), l(y(D.render), {
+			key: P.value.code,
+			component: F.value
+		}, null, 8, ["component"]))])) : u("", !0);
+	}
+});
+//#endregion
+export { D as default };
+
+//# sourceMappingURL=TranslatableField.vue_vue_type_script_setup_true_lang.js.map