@mapomodule/form 2.0.0-beta.1 → 2.0.0-beta.11

package/dist/runtime/components/MapoFocusPortal.vue

@@ -0,0 +1,115 @@
+<script setup>
+import { computed, ref, onMounted, onUnmounted } from "vue";
+import { watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { useFocusMode } from "../composables/useFocusMode.js";
+import MapoForm from "./MapoForm.vue";
+const { t } = useI18n();
+const { focusTarget, exit } = useFocusMode();
+const isOpen = computed(() => focusTarget.value !== null);
+const canUseDocument = typeof document !== "undefined";
+function onKeyDown(e) {
+  if (e.key === "Escape" && isOpen.value) exit();
+}
+onMounted(() => window.addEventListener("keydown", onKeyDown));
+onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
+watch(isOpen, (open) => {
+  if (!canUseDocument) return;
+  document.body.style.overflow = open ? "hidden" : "";
+});
+const localModel = ref({});
+watch(
+  () => focusTarget.value?.model,
+  (val) => {
+    if (val) localModel.value = { ...val };
+  },
+  { immediate: true }
+);
+function onUpdate(val) {
+  localModel.value = val;
+  focusTarget.value?.onUpdate(val);
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="mapo-focus-portal">
+      <div
+        v-if="isOpen && focusTarget"
+        class="mapo-focus-portal fixed inset-0 z-[9999] flex flex-col bg-white"
+        role="dialog"
+        aria-modal="true"
+      >
+        <!-- ── Header ────────────────────────────────────────────────────── -->
+        <div
+          class="flex shrink-0 items-center gap-3 border-b border-gray-200 px-6 py-3"
+        >
+          <!-- Breadcrumb -->
+          <nav class="flex min-w-0 flex-1 items-center gap-1 text-sm">
+            <template v-for="(crumb, i) in focusTarget.breadcrumb" :key="i">
+              <span
+                :class="
+  i < focusTarget.breadcrumb.length - 1 ? 'text-gray-400' : 'font-semibold text-gray-800'
+"
+                class="truncate"
+              >
+                {{ crumb }}
+              </span>
+              <UIcon
+                v-if="i < focusTarget.breadcrumb.length - 1"
+                name="i-lucide-chevron-right"
+                class="h-3.5 w-3.5 shrink-0 text-gray-300"
+              />
+            </template>
+          </nav>
+
+          <!-- Close button -->
+          <UButton
+            variant="ghost"
+            color="neutral"
+            icon="i-lucide-x"
+            :label="t('mapo.close')"
+            size="sm"
+            @click="exit"
+          />
+        </div>
+
+        <!-- ── Body: scrollable sub-form ────────────────────────────────── -->
+        <div class="min-h-0 flex-1 overflow-y-auto">
+          <div class="mx-auto max-w-3xl px-6 py-8">
+            <MapoForm
+              :model-value="localModel"
+              :fields="focusTarget.fields"
+              :errors="focusTarget.errors.value"
+              :languages="focusTarget.languages"
+              :current-lang="focusTarget.currentLang"
+              :registry="focusTarget.registry"
+              @update:model-value="onUpdate"
+            />
+          </div>
+        </div>
+
+        <!-- ── Footer ───────────────────────────────────────────────────── -->
+        <div
+          class="flex shrink-0 items-center justify-end gap-3 border-t border-gray-200 px-6 py-3"
+        >
+          <p class="mr-auto text-xs text-gray-400">
+            <UIcon name="i-lucide-keyboard" class="mr-1 inline h-3 w-3" />
+            Press
+            <kbd class="rounded bg-gray-100 px-1 py-0.5 font-mono text-xs"
+              >ESC</kbd
+            >
+            to return to the form
+          </p>
+          <UButton variant="ghost" color="neutral" @click="exit">
+            Close
+          </UButton>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.mapo-focus-portal-enter-active{transition:opacity .2s ease,transform .2s ease}.mapo-focus-portal-leave-active{transition:opacity .15s ease,transform .15s ease}.mapo-focus-portal-enter-from,.mapo-focus-portal-leave-to{opacity:0;transform:scale(.98)}.mapo-focus-portal-enter-to,.mapo-focus-portal-leave-from{opacity:1;transform:scale(1)}
+</style>

package/dist/runtime/components/MapoFocusPortal.vue.d.ts

@@ -0,0 +1,4 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=MapoFocusPortal.vue.d.ts.map

package/dist/runtime/components/MapoFocusPortal.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapoFocusPortal.vue.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/MapoFocusPortal.vue"],"names":[],"mappings":"AAudA,QAAA,MAAM,YAAY,+QAChB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/runtime/components/MapoForm.vue

@@ -0,0 +1,177 @@
+<script setup>
+import { computed, useSlots, watchEffect, inject, onUnmounted } from "vue";
+import { useNuxtApp, useRuntimeConfig } from "#app";
+import { useI18n } from "vue-i18n";
+import { useMapoForm, injectMapoForm } from "../composables/useMapoForm.js";
+import { provideCurrentLang } from "../composables/useCurrentLang.js";
+import MapoFormGroup from "./MapoFormGroup.vue";
+import MapoFormTabs from "./MapoFormTabs.vue";
+import MapoFormFlatSection from "./MapoFormFlatSection.vue";
+const props = defineProps({
+  modelValue: { type: null, required: true },
+  fields: { type: Array, required: true },
+  errors: { type: Object, required: false, default: () => ({}) },
+  languages: { type: Array, required: false, default: () => [] },
+  currentLang: { type: String, required: false, default: "" },
+  readonly: { type: Boolean, required: false, default: false },
+  immediate: { type: Boolean, required: false, default: false },
+  registry: { type: Object, required: false, default: void 0 }
+});
+const injectedRegistry = computed(() => {
+  if (props.registry) return props.registry;
+  const nuxt = useNuxtApp();
+  if (!nuxt.$mapoFormRegistry) {
+    throw new Error(
+      "[MapoForm] No registry available: pass the `registry` prop or make sure the @mapomodule/form module is installed."
+    );
+  }
+  return nuxt.$mapoFormRegistry;
+});
+const emit = defineEmits(["update:modelValue"]);
+defineSlots();
+const model = computed({
+  get: () => props.modelValue,
+  set: (val) => emit("update:modelValue", val)
+});
+const currentLangRef = computed(() => props.currentLang);
+const errorsRef = computed(() => props.errors);
+const globalDebounce = useRuntimeConfig().public.mapoForm?.debounce ?? 300;
+const form = useMapoForm({
+  model,
+  fields: computed(() => props.fields),
+  errors: errorsRef,
+  languages: props.languages,
+  currentLang: currentLangRef,
+  immediate: props.immediate,
+  debounce: globalDebounce,
+  registry: injectedRegistry.value
+});
+const parentCtx = injectMapoForm();
+watchEffect(() => {
+  form.readonly.value = props.readonly;
+  if (parentCtx) form.ctx.submitted.value = parentCtx.submitted.value;
+});
+defineExpose({
+  submit: form.submit,
+  validateClient: form.validateClient,
+  resetDirty: form.resetDirty,
+  getPatch: form.getPatch,
+  isDirty: form.isDirty,
+  isLoading: form.isLoading
+});
+const registerValidator = inject(
+  "mapoDetailRegisterValidator",
+  null
+);
+if (registerValidator) {
+  const unregister = registerValidator(form.validateClient);
+  onUnmounted(unregister);
+}
+const slots = useSlots();
+const fieldSlotNames = computed(
+  () => Object.keys(slots).filter(
+    (name) => name.startsWith("field.") || name.startsWith("group.") || name.startsWith("tab.") || name === "tab-bar-end"
+  )
+);
+provideCurrentLang(currentLangRef);
+const { t } = useI18n();
+const DEFAULT_TAB = "__default__";
+function getOrCreateTab(map, name) {
+  if (!map.has(name)) {
+    map.set(name, { name, groups: /* @__PURE__ */ new Map(), children: /* @__PURE__ */ new Map() });
+  }
+  return map.get(name);
+}
+const grouped = computed(() => {
+  const tabs = /* @__PURE__ */ new Map();
+  for (const field of props.fields) {
+    const rawTab = field.tab;
+    const tabPath = !rawTab ? [DEFAULT_TAB] : Array.isArray(rawTab) ? rawTab : rawTab.split("/");
+    const groupName = field.group ?? "__flat__";
+    let currentMap = tabs;
+    for (let i = 0; i < tabPath.length - 1; i++) {
+      const parent = getOrCreateTab(currentMap, tabPath[i]);
+      currentMap = parent.children;
+    }
+    const leaf = getOrCreateTab(currentMap, tabPath[tabPath.length - 1]);
+    if (!leaf.groups.has(groupName)) {
+      leaf.groups.set(groupName, { fields: [], subtabs: /* @__PURE__ */ new Map() });
+    }
+    const grp = leaf.groups.get(groupName);
+    if (field.subtab) {
+      if (!grp.subtabs.has(field.subtab)) {
+        grp.subtabs.set(field.subtab, []);
+      }
+      grp.subtabs.get(field.subtab).push(field);
+    } else {
+      grp.fields.push(field);
+    }
+  }
+  const defaultTab = tabs.get(DEFAULT_TAB);
+  if (defaultTab) defaultTab.label = t("mapo.form.defaultTab");
+  return tabs;
+});
+const hasTabs = computed(() => {
+  const keys = [...grouped.value.keys()];
+  const hasFields = keys.length > 0;
+  if (!hasFields) return false;
+  const hasSeveralTabs = keys.length > 1;
+  const hasNamedTab = keys[0] !== DEFAULT_TAB;
+  return hasSeveralTabs || hasNamedTab;
+});
+const defaultGroups = computed(
+  () => grouped.value.get(DEFAULT_TAB)?.groups ?? /* @__PURE__ */ new Map()
+);
+const tabList = computed(() => [...grouped.value.values()]);
+</script>
+
+<template>
+  <div class="mapo-form space-y-5">
+    <!-- All field slots (field.<key>, field.<key>.append, .prepend, .label, …)
+         are forwarded generically to inner layers (Tabs → Group → Field). -->
+    <MapoFormTabs v-if="hasTabs" :tabs="tabList">
+      <template
+        v-for="slotName in fieldSlotNames"
+        :key="slotName"
+        #[slotName]="slotProps"
+      >
+        <slot :name="slotName" v-bind="slotProps ?? {}" />
+      </template>
+    </MapoFormTabs>
+
+    <template v-else>
+      <template v-for="[groupName, group] of defaultGroups" :key="groupName">
+        <template v-if="groupName !== '__flat__'">
+          <slot :name="`group.${groupName}.before`" />
+          <MapoFormGroup
+            :name="groupName"
+            :fields="group.fields"
+            :subtabs="group.subtabs"
+          >
+            <template
+              v-for="slotName in fieldSlotNames"
+              :key="slotName"
+              #[slotName]="slotProps"
+            >
+              <slot :name="slotName" v-bind="slotProps ?? {}" />
+            </template>
+          </MapoFormGroup>
+          <slot :name="`group.${groupName}.after`" />
+        </template>
+
+        <MapoFormFlatSection
+          v-else
+          :fields="group.fields"
+        >
+          <template
+            v-for="slotName in fieldSlotNames"
+            :key="slotName"
+            #[slotName]="slotProps"
+          >
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+          </template>
+        </MapoFormFlatSection>
+      </template>
+    </template>
+  </div>
+</template>

package/dist/runtime/components/MapoForm.vue.d.ts

@@ -0,0 +1,47 @@
+import type { Ref } from "vue";
+import type { AnyFieldDescriptor, FieldRegistry } from "../types/index.js";
+declare const __VLS_export: <T extends object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        modelValue: T;
+        fields: AnyFieldDescriptor<T>[];
+        errors?: Record<string, string[]>;
+        languages?: string[];
+        currentLang?: string;
+        readonly?: boolean;
+        immediate?: boolean;
+        /**
+         * Field component registry. When omitted, it is auto-injected from
+         * `$mapoFormRegistry` (provided by the `@mapomodule/form` plugin).
+         * Pass it explicitly only for headless forms or one-off registry swaps.
+         */
+        registry?: FieldRegistry;
+    } & {
+        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        submit: (handler: (model: T | Partial<T>, isNew: boolean) => Promise<void>, isNew?: boolean) => Promise<void>;
+        validateClient: () => {
+            valid: boolean;
+            errors: Record<string, string>;
+        };
+        resetDirty: () => void;
+        getPatch: () => Partial<T>;
+        isDirty: import("vue").ComputedRef<boolean>;
+        isLoading: Ref<boolean, boolean>;
+    }>) => void;
+    attrs: any;
+    slots: Record<string, (props: Record<string, any>) => unknown>;
+    emit: (evt: "update:modelValue", value: T) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};
+//# sourceMappingURL=MapoForm.vue.d.ts.map

package/dist/runtime/components/MapoForm.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapoForm.vue.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/MapoForm.vue"],"names":[],"mappings":"AAwQA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAG/B,OAAO,KAAK,EACV,kBAAkB,EAClB,aAAa,EAEd,MAAM,mBAAmB,CAAC;AAQ3B,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,MAAM,EACtC,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WA+UO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;oBA7UxC,CAAC;gBACL,kBAAkB,CAAC,CAAC,CAAC,EAAE;iBACtB,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC;oBACrB,MAAM,EAAE;sBACN,MAAM;mBACT,OAAO;oBACN,OAAO;QACnB;;;;WAIG;mBACQ,aAAa;;;KAiU+D,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,OAAO,KAAK,EAAE,gBAAgB;;;;;;;;;;MAAsB,KAAK,IAAI;WACxE,GAAG;kCA/R+B,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,OAAO;;EAmSrE,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAI,CAAC;wBACvD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/runtime/components/MapoFormField.vue

@@ -0,0 +1,269 @@
+<script setup>
+import { computed, defineAsyncComponent, inject, ref, watch } from "vue";
+import {
+  resolveFieldComponent,
+  resolveFieldAttrs,
+  resolveFieldAccessor
+} from "../types/index.js";
+import { injectMapoForm } from "../composables/useMapoForm.js";
+import { getNestedValue, debounce } from "@mapomodule/utils";
+import MapoUnknownField from "./MapoUnknownField.vue";
+const props = defineProps({
+  descriptor: { type: Object, required: true }
+});
+const form = injectMapoForm();
+const registry = form.registry;
+const currentLang = form.currentLang;
+const model = form.model;
+const isVisible = computed(() => {
+  if (props.descriptor.visible && !props.descriptor.visible({ model: model.value }))
+    return false;
+  return true;
+});
+const showField = computed(() => {
+  if (props.descriptor.show && !props.descriptor.show({ model: model.value }))
+    return false;
+  return true;
+});
+const path = computed(() => {
+  const lang = currentLang.value;
+  if (props.descriptor.translatable && lang) {
+    return `translations.${lang}.${props.descriptor.key}`;
+  }
+  return props.descriptor.key;
+});
+const accessor = computed(
+  () => resolveFieldAccessor(props.descriptor, registry)
+);
+const modelValue = computed(() => {
+  const raw = getNestedValue(model.value, path.value);
+  return accessor.value.get ? accessor.value.get({
+    model: model.value,
+    val: raw,
+    lang: currentLang.value
+  }) : raw;
+});
+function doUpdate(val) {
+  form.setFieldValue(props.descriptor.key, val);
+}
+const debounceMs = form.immediate ? 0 : props.descriptor.debounce ?? form.debounce;
+const onUpdate = debounceMs > 0 ? debounce(doUpdate, debounceMs) : doUpdate;
+const asyncState = ref("idle");
+const asyncError = ref(null);
+const asyncCache = /* @__PURE__ */ new Map();
+const asyncValidationDebounceMs = props.descriptor.validateAsync ? props.descriptor.validateAsyncDebounce ?? 600 : 0;
+const runAsyncValidation = props.descriptor.validateAsync ? debounce(async (val) => {
+  const cacheKey = JSON.stringify(val);
+  if (asyncCache.has(cacheKey)) {
+    asyncError.value = asyncCache.get(cacheKey);
+    asyncState.value = asyncError.value ? "invalid" : "valid";
+    return;
+  }
+  asyncState.value = "pending";
+  try {
+    const result = await props.descriptor.validateAsync(val, {
+      model: model.value
+    });
+    asyncCache.set(cacheKey, result);
+    asyncError.value = result;
+    asyncState.value = result ? "invalid" : "valid";
+  } catch {
+    asyncState.value = "idle";
+  }
+}, asyncValidationDebounceMs) : null;
+if (runAsyncValidation) {
+  watch(modelValue, (val, old) => {
+    if (val === old) return;
+    runAsyncValidation(val);
+  });
+}
+function onBlur() {
+  form.markTouched(props.descriptor.key);
+}
+const asyncTrailingIcon = computed(
+  () => ({
+    idle: void 0,
+    pending: "i-lucide-loader-2",
+    valid: "i-lucide-check-circle",
+    invalid: "i-lucide-x-circle"
+  })[asyncState.value]
+);
+const asyncTrailingIconClass = computed(
+  () => ({
+    idle: "",
+    pending: "text-gray-400 animate-spin",
+    valid: "text-green-500",
+    invalid: "text-red-500"
+  })[asyncState.value]
+);
+const fieldComponent = computed(() => {
+  const entry = resolveFieldComponent(props.descriptor, registry);
+  if (!entry) return MapoUnknownField;
+  if (typeof entry === "function")
+    return defineAsyncComponent(entry);
+  return entry;
+});
+const fieldAttrs = computed(
+  () => resolveFieldAttrs(props.descriptor, registry)
+);
+function resolveErrors(errorsMap, dotPath) {
+  const segments = dotPath.split(".");
+  const result = [];
+  let current = "";
+  for (const seg of segments) {
+    current = current ? `${current}.${seg}` : seg;
+    const errs = errorsMap[current];
+    if (errs) result.push(...errs);
+  }
+  return result;
+}
+const errors = computed(() => resolveErrors(form.errors.value, path.value));
+const clientError = computed(
+  () => form.getClientError(props.descriptor.key)
+);
+const allErrors = computed(() => {
+  const errs = [...errors.value];
+  if (clientError.value) errs.unshift(clientError.value);
+  if (asyncError.value && asyncState.value === "invalid")
+    errs.push(asyncError.value);
+  return errs;
+});
+const hasError = computed(() => allErrors.value.length > 0);
+const errorColor = computed(() => hasError.value ? "error" : void 0);
+function autoLabel(key) {
+  const stripped = key.replace(/^translations\.[^.]+\./, "");
+  return stripped.replace(/[_.-]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+const label = computed(
+  () => props.descriptor.label ?? autoLabel(props.descriptor.key)
+);
+const fieldId = computed(() => `field-${props.descriptor.key}`);
+const groupExpand = inject("mapoGroupExpand", null);
+const isExpanded = computed(
+  () => groupExpand ? groupExpand.expandedFieldKey.value === props.descriptor.key : false
+);
+function toggleExpand() {
+  if (!groupExpand) return;
+  if (isExpanded.value) groupExpand.collapseField();
+  else groupExpand.expandField(props.descriptor.key);
+}
+</script>
+
+<template>
+  <div
+    v-if="isVisible"
+    v-show="showField"
+    class="mapo-form-field group flex flex-col gap-1"
+    :class="[
+  descriptor.class,
+  hasError && 'mapo-form-field--error',
+  isExpanded && 'flex-1 min-h-0'
+]"
+  >
+    <!-- Label -->
+    <slot
+      :name="`field.${descriptor.key}.label`"
+      :descriptor="descriptor"
+      :label="label"
+    >
+      <label
+        :for="fieldId"
+        class="flex shrink-0 items-center gap-1 text-sm font-medium text-gray-700"
+      >
+        <span>{{ label }}</span>
+        <span v-if="descriptor.required" class="text-red-500" aria-hidden="true"
+          >*</span
+        >
+        <UIcon
+          v-if="asyncTrailingIcon"
+          :name="asyncTrailingIcon"
+          class="ml-auto h-3.5 w-3.5"
+          :class="asyncTrailingIconClass"
+        />
+        <!-- Expand button — visible on hover or while expanded -->
+        <button
+          v-if="descriptor.expandable && groupExpand"
+          type="button"
+          :class="
+  isExpanded ? 'ml-auto text-primary-500' : 'ml-auto text-gray-300 opacity-0 group-hover:opacity-100 focus:opacity-100'
+"
+          class="rounded p-0.5 transition-all hover:bg-gray-100 hover:text-gray-600"
+          :title="isExpanded ? 'Collapse field' : 'Expand field'"
+          @click.prevent="toggleExpand"
+        >
+          <UIcon
+            :name="isExpanded ? 'i-lucide-minimize-2' : 'i-lucide-expand'"
+            class="h-3.5 w-3.5"
+          />
+        </button>
+      </label>
+    </slot>
+
+    <!-- Slot before -->
+    <slot
+      :name="`field.${descriptor.key}.before`"
+      :descriptor="descriptor"
+      :model="model"
+    />
+
+    <div
+      class="flex items-start gap-2"
+      :class="isExpanded && 'flex-1 min-h-0'"
+      :style="isExpanded ? 'height: 100%; overflow: hidden;' : ''"
+    >
+      <!-- Slot prepend -->
+      <slot
+        :name="`field.${descriptor.key}.prepend`"
+        :descriptor="descriptor"
+        :model="model"
+      />
+
+      <component
+        :is="fieldComponent"
+        :id="fieldId"
+        v-bind="fieldAttrs"
+        :class="isExpanded ? 'flex-1 min-h-0' : 'flex-1'"
+        :style="isExpanded ? 'height: 100%;' : ''"
+        :model-value="modelValue"
+        :readonly="descriptor.readonly || form.readonly.value"
+        :disabled="descriptor.readonly || form.readonly.value"
+        :descriptor="descriptor"
+        :errors="allErrors"
+        :color="errorColor"
+        @update:model-value="onUpdate"
+        @blur="onBlur"
+      />
+
+      <!-- Slot append -->
+      <slot
+        :name="`field.${descriptor.key}.append`"
+        :descriptor="descriptor"
+        :model="model"
+      />
+    </div>
+
+    <!-- Slot hint -->
+    <slot
+      :name="`field.${descriptor.key}.hint`"
+      :descriptor="descriptor"
+      :model="model"
+    />
+
+    <!-- Errori -->
+    <p
+      v-for="err in allErrors"
+      :key="err"
+      class="text-xs text-red-500"
+      role="alert"
+    >
+      {{ err }}
+    </p>
+
+    <!-- Slot after -->
+    <slot
+      :name="`field.${descriptor.key}.after`"
+      :descriptor="descriptor"
+      :model="model"
+    />
+  </div>
+</template>

package/dist/runtime/components/MapoFormField.vue.d.ts

@@ -0,0 +1,46 @@
+import type { AnyFieldDescriptor } from "../types/index.js";
+type __VLS_Props = {
+    descriptor: AnyFieldDescriptor<any>;
+};
+declare var __VLS_2: `field.${string}.label`, __VLS_3: {
+    descriptor: AnyFieldDescriptor<any>;
+    label: string;
+}, __VLS_16: `field.${string}.before`, __VLS_17: {
+    descriptor: AnyFieldDescriptor<any>;
+    model: Record<string, unknown>;
+}, __VLS_20: `field.${string}.prepend`, __VLS_21: {
+    descriptor: AnyFieldDescriptor<any>;
+    model: Record<string, unknown>;
+}, __VLS_31: `field.${string}.append`, __VLS_32: {
+    descriptor: AnyFieldDescriptor<any>;
+    model: Record<string, unknown>;
+}, __VLS_35: `field.${string}.hint`, __VLS_36: {
+    descriptor: AnyFieldDescriptor<any>;
+    model: Record<string, unknown>;
+}, __VLS_39: `field.${string}.after`, __VLS_40: {
+    descriptor: AnyFieldDescriptor<any>;
+    model: Record<string, unknown>;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
+} & {
+    [K in NonNullable<typeof __VLS_16>]?: (props: typeof __VLS_17) => any;
+} & {
+    [K in NonNullable<typeof __VLS_20>]?: (props: typeof __VLS_21) => any;
+} & {
+    [K in NonNullable<typeof __VLS_31>]?: (props: typeof __VLS_32) => any;
+} & {
+    [K in NonNullable<typeof __VLS_35>]?: (props: typeof __VLS_36) => any;
+} & {
+    [K in NonNullable<typeof __VLS_39>]?: (props: typeof __VLS_40) => any;
+};
+declare const __VLS_base: 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>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=MapoFormField.vue.d.ts.map

package/dist/runtime/components/MapoFormField.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapoFormField.vue.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/MapoFormField.vue"],"names":[],"mappings":"AAmWA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAa5D,KAAK,WAAW,GAAG;IAAE,UAAU,EAAE,kBAAkB,CAAC,GAAG,CAAC,CAAA;CAAE,CAAC;AA2a3D,QAAA,IAAI,OAAO,yBAAU,EAAE,OAAO;;;CAAU,EAAE,QAAQ,0BAAW,EAAE,QAAQ;;;CAAW,EAAE,QAAQ,2BAAW,EAAE,QAAQ;;;CAAW,EAAE,QAAQ,0BAAW,EAAE,QAAQ;;;CAAW,EAAE,QAAQ,wBAAW,EAAE,QAAQ;;;CAAW,EAAE,QAAQ,yBAAW,EAAE,QAAQ;;;CAAY,CAAE;AAC7P,KAAK,WAAW,GAAG,EAAE,GACnB;KAAG,CAAC,IAAI,WAAW,CAAC,OAAO,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG;CAAE,GACvE;KAAG,CAAC,IAAI,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG;CAAE,GACzE;KAAG,CAAC,IAAI,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG;CAAE,GACzE;KAAG,CAAC,IAAI,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG;CAAE,GACzE;KAAG,CAAC,IAAI,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG;CAAE,GACzE;KAAG,CAAC,IAAI,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG;CAAE,CAAC;AAK5E,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}