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

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":"AA2PA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE/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;WAmUO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;oBAjUxC,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;;;KAqT+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;kCAnR+B,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,OAAO;;EAuRrE,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"}

package/dist/runtime/components/MapoFormFlatSection.vue

@@ -0,0 +1,149 @@
+<script setup>
+import { ref, computed, provide, onMounted, onUnmounted } from "vue";
+import { injectMapoForm } from "../composables/useMapoForm.js";
+import MapoFormField from "./MapoFormField.vue";
+const props = defineProps({
+  fields: { type: Array, required: true }
+});
+defineSlots();
+const form = injectMapoForm();
+const model = computed(() => form?.model.value);
+const currentLang = computed(() => form?.currentLang.value ?? "");
+const expandedFieldKey = ref(null);
+const expandedFieldLabel = computed(() => {
+  if (!expandedFieldKey.value) return "";
+  const field = props.fields.find(
+    (f) => f.key === expandedFieldKey.value
+  );
+  return field?.label ?? expandedFieldKey.value;
+});
+function expandField(key) {
+  expandedFieldKey.value = key;
+  document.body.style.overflow = "hidden";
+}
+function collapseField() {
+  expandedFieldKey.value = null;
+  document.body.style.overflow = "";
+}
+function onKeydown(e) {
+  if (e.key === "Escape" && expandedFieldKey.value) collapseField();
+}
+onMounted(() => document.addEventListener("keydown", onKeydown));
+onUnmounted(() => {
+  document.removeEventListener("keydown", onKeydown);
+  document.body.style.overflow = "";
+});
+provide("mapoGroupExpand", { expandField, collapseField, expandedFieldKey });
+const COL_SPAN = {
+  1: "col-span-1",
+  2: "col-span-2",
+  3: "col-span-3",
+  4: "col-span-4",
+  5: "col-span-5",
+  6: "col-span-6",
+  7: "col-span-7",
+  8: "col-span-8",
+  9: "col-span-9",
+  10: "col-span-10",
+  11: "col-span-11",
+  12: "col-span-12"
+};
+function colClass(cols) {
+  if (!cols || typeof cols !== "number") return "col-span-12";
+  return COL_SPAN[cols] ?? "col-span-12";
+}
+</script>
+
+<template>
+  <!-- Expanded panel: teleported to body -->
+  <Teleport to="body">
+    <Transition name="mapo-expand">
+      <div
+        v-if="expandedFieldKey"
+        class="fixed inset-0 z-50 flex flex-col"
+        style="padding: 1rem"
+      >
+        <div
+          class="absolute inset-0 bg-black/50 backdrop-blur-sm"
+          @click="collapseField"
+        />
+        <div
+          class="relative z-10 flex h-full flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-2xl"
+        >
+          <div
+            class="flex shrink-0 items-center justify-between border-b border-gray-100 px-5 py-3.5"
+          >
+            <span class="text-sm font-semibold tracking-wide text-gray-700">{{
+              expandedFieldLabel
+            }}</span>
+            <button
+              type="button"
+              class="rounded p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
+              @click="collapseField"
+            >
+              <UIcon name="i-lucide-minimize-2" class="h-4 w-4" />
+            </button>
+          </div>
+          <div
+            class="mapo-group-expand-body flex min-h-0 flex-1 flex-col p-5"
+            style="overflow: hidden"
+          >
+            <template v-for="field in fields" :key="field.key">
+              <div
+                v-if="expandedFieldKey === field.key"
+                style="
+                  display: flex;
+                  flex-direction: column;
+                  flex: 1;
+                  min-height: 0;
+                  height: 100%;
+                "
+              >
+                <slot
+                  :name="`field.${field.key}`"
+                  :field="field"
+                  :model="model"
+                  :current-lang="currentLang"
+                >
+                  <MapoFormField
+                    :descriptor="field"
+                    style="flex: 1; min-height: 0; height: 100%"
+                  >
+                    <template
+                      v-for="(_, slotName) in $slots"
+                      #[slotName]="slotProps"
+                    >
+                      <slot :name="slotName" v-bind="slotProps ?? {}" />
+                    </template>
+                  </MapoFormField>
+                </slot>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+
+  <!-- Flat grid -->
+  <div class="grid grid-cols-12 gap-5">
+    <div
+      v-for="field in fields"
+      :key="field.key"
+      :class="colClass(field.cols)"
+    >
+      <slot
+        :name="`field.${field.key}`"
+        :field="field"
+        :model="model"
+        :current-lang="currentLang"
+      >
+        <MapoFormField :descriptor="field">
+          <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+          </template>
+        </MapoFormField>
+      </slot>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,15 @@
+import type { AnyFieldDescriptor } from "../types/index.js";
+type __VLS_Props = {
+    fields: AnyFieldDescriptor[];
+};
+type __VLS_Slots = Record<string, unknown>;
+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=MapoFormFlatSection.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MapoFormFlatSection.vue.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/MapoFormFlatSection.vue"],"names":[],"mappings":"AAuKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAI5D,KAAK,WAAW,GAAG;IAAE,MAAM,EAAE,kBAAkB,EAAE,CAAA;CAAE,CAAC;AAGpD,KAAK,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAmS3C,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"}