@mapomodule/form 2.0.0-beta.0

package/src/runtime/components/MapoFormGroup.vue

@@ -0,0 +1,283 @@
+<script setup lang="ts">
+import {
+  ref,
+  computed,
+  provide,
+  watchEffect,
+  onMounted,
+  onUnmounted,
+} from "vue";
+import { useRuntimeConfig } from "#app";
+import type {
+  AnyFieldDescriptor,
+  MapoFormRuntimeConfig,
+} from "../types/index.js";
+import { injectMapoForm } from "../composables/useMapoForm.js";
+import MapoFormField from "./MapoFormField.vue";
+
+const props = defineProps<{
+  name: string;
+  label?: string;
+  fields: AnyFieldDescriptor[];
+  subtabs?: Map<string, AnyFieldDescriptor[]>;
+  initialExpanded?: boolean;
+}>();
+
+const globalExpanded: boolean =
+  (useRuntimeConfig().public.mapoForm as MapoFormRuntimeConfig | undefined)
+    ?.groups?.expanded ?? true;
+const expanded = ref(props.initialExpanded ?? globalExpanded);
+
+// ─── Sub-tabs inside the group ────────────────────────────────────────────────
+
+const activeSubtab = ref<string>("");
+// Initialise to first subtab when subtabs are provided.
+watchEffect(() => {
+  if (props.subtabs && props.subtabs.size > 0 && !activeSubtab.value) {
+    activeSubtab.value = [...props.subtabs.keys()][0] ?? "";
+  }
+});
+
+// ─── Field expand ────────────────────────────────────────────────────────────
+
+const expandedFieldKey = ref<string | null>(null);
+
+function expandField(key: string) {
+  expandedFieldKey.value = key;
+  document.body.style.overflow = "hidden";
+}
+
+function collapseField() {
+  expandedFieldKey.value = null;
+  document.body.style.overflow = "";
+}
+
+function onKeydown(e: KeyboardEvent) {
+  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 form = injectMapoForm();
+const model = computed(() => form?.model.value);
+const currentLang = computed(() => form?.currentLang.value ?? "");
+
+// ─── Col-span lookup ─────────────────────────────────────────────────────────
+
+const COL_SPAN: Record<number, string> = {
+  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: AnyFieldDescriptor["cols"]): string {
+  if (!cols || typeof cols !== "number") return "col-span-12";
+  return COL_SPAN[cols] ?? "col-span-12";
+}
+</script>
+
+<template>
+  <!-- Expanded panel: teleported to body to avoid parent overflow/transform interference. -->
+  <Teleport to="body">
+    <Transition name="mapo-expand">
+      <div
+        v-if="expandedFieldKey"
+        class="fixed inset-0 z-50 flex flex-col"
+        style="padding: 1rem"
+      >
+        <!-- Clickable backdrop -->
+        <div
+          class="absolute inset-0 bg-black/50 backdrop-blur-sm"
+          @click="collapseField"
+        />
+
+        <!-- Panel -->
+        <div
+          class="relative z-10 flex h-full flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-2xl"
+        >
+          <!-- Header -->
+          <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">{{
+              label ?? name
+            }}</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>
+
+          <!-- Expanded field -->
+          <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 as string">
+              <div
+                v-if="expandedFieldKey === (field.key as string)"
+                style="
+                  display: flex;
+                  flex-direction: column;
+                  flex: 1;
+                  min-height: 0;
+                  height: 100%;
+                "
+              >
+                <slot
+                  :name="`field.${field.key as string}`"
+                  :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>
+
+  <!-- Regular group (kept in the DOM so the provide stays active) -->
+  <div
+    class="mapo-form-group relative overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm"
+  >
+    <!-- Collapsible heading -->
+    <button
+      type="button"
+      class="flex w-full items-center justify-between px-5 py-3.5 text-left transition-colors hover:bg-gray-50"
+      @click="expanded = !expanded"
+    >
+      <span class="text-sm font-semibold tracking-wide text-gray-700">{{
+        label ?? name
+      }}</span>
+      <UIcon
+        :name="expanded ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
+        class="h-4 w-4 shrink-0 text-gray-400"
+      />
+    </button>
+
+    <!-- Body -->
+    <div v-if="expanded">
+      <!-- Flat fields (no subtab) -->
+      <div
+        v-if="fields.length"
+        class="grid grid-cols-12 gap-5 px-5 pb-5 pt-4"
+        :class="{ 'pb-0': subtabs && subtabs.size > 0 }"
+      >
+        <div
+          v-for="field in fields"
+          :key="field.key as string"
+          :class="colClass(field.cols)"
+        >
+          <slot
+            :name="`field.${field.key as string}`"
+            :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>
+
+      <!-- Sub-tab bar + content (when subtabs are present) -->
+      <div v-if="subtabs && subtabs.size > 0" class="px-5 pb-5 pt-4">
+        <!-- Sub-tab bar -->
+        <div class="flex gap-1 border-b border-gray-200 mb-4">
+          <button
+            v-for="[subtabName] of subtabs"
+            :key="subtabName"
+            type="button"
+            class="relative px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none"
+            :class="[
+              activeSubtab === subtabName
+                ? 'text-primary-600 border-b-2 border-primary-600 -mb-px'
+                : 'text-gray-500 hover:text-gray-700',
+            ]"
+            @click="activeSubtab = subtabName"
+          >
+            {{ subtabName }}
+          </button>
+        </div>
+
+        <!-- Sub-tab fields -->
+        <div
+          v-for="[subtabName, subtabFields] of subtabs"
+          v-show="activeSubtab === subtabName"
+          :key="subtabName"
+          class="grid grid-cols-12 gap-5"
+        >
+          <div
+            v-for="field in subtabFields"
+            :key="field.key as string"
+            :class="colClass(field.cols)"
+          >
+            <slot
+              :name="`field.${field.key as string}`"
+              :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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.mapo-expand-enter-active,
+.mapo-expand-leave-active {
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+}
+.mapo-expand-enter-from,
+.mapo-expand-leave-to {
+  opacity: 0;
+  transform: scale(0.97);
+}
+</style>

package/src/runtime/components/MapoFormTabs.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import type { TabEntry } from "../types/layout.js";
+import { injectMapoForm } from "../composables/useMapoForm.js";
+import MapoFormGroup from "./MapoFormGroup.vue";
+import MapoFormFlatSection from "./MapoFormFlatSection.vue";
+
+const props = defineProps<{ tabs: TabEntry[] }>();
+
+defineSlots<Record<string, unknown>>();
+
+const activeTab = ref(props.tabs[0]?.name ?? "");
+
+// Recursively check if a tab (or any of its descendants) contains errors.
+function tabHasErrors(tab: TabEntry, errorKeys: Set<string>): boolean {
+  const directError = [...tab.groups.values()].some((g) =>
+    g.fields.some((f) => errorKeys.has(f.key as string)),
+  );
+  if (directError) return true;
+  return [...tab.children.values()].some((child) =>
+    tabHasErrors(child, errorKeys),
+  );
+}
+
+// Highlight tabs containing errors.
+const form = injectMapoForm()!;
+const tabsWithErrors = computed(() => {
+  const errorKeys = new Set(Object.keys(form.errors.value));
+  return new Set(
+    props.tabs.filter((tab) => tabHasErrors(tab, errorKeys)).map((t) => t.name),
+  );
+});
+</script>
+
+<template>
+  <div class="mapo-form-tabs">
+    <!-- Tab bar -->
+    <div class="flex gap-1 border-b border-gray-200 pb-px">
+      <button
+        v-for="tab in tabs"
+        :key="tab.name"
+        type="button"
+        class="relative flex items-center gap-1.5 rounded-t px-4 py-2 text-sm font-medium transition-colors"
+        :class="[
+          activeTab === tab.name
+            ? 'border-b-2 border-primary-500 text-primary-600'
+            : 'text-gray-500 hover:bg-gray-50 hover:text-gray-700',
+        ]"
+        @click="activeTab = tab.name"
+      >
+        <slot :name="`tab.${tab.name}.label`" :tab="tab">
+          {{ tab.label ?? tab.name }}
+        </slot>
+        <span
+          v-if="tabsWithErrors.has(tab.name)"
+          class="inline-block h-1.5 w-1.5 rounded-full bg-red-500"
+          aria-label="This tab contains errors"
+        />
+      </button>
+      <!-- Extra content appended to the tab bar (actions, badges, …). -->
+      <slot name="tab-bar-end" />
+    </div>
+
+    <!-- Tab content -->
+    <div
+      v-for="tab in tabs"
+      v-show="activeTab === tab.name"
+      :key="tab.name"
+      class="space-y-5 pt-5"
+    >
+      <!-- Full panel override: `tab.{name}` replaces this tab's content entirely. -->
+      <slot
+        v-if="$slots[`tab.${tab.name}`]"
+        :name="`tab.${tab.name}`"
+        :tab="tab"
+      />
+      <template v-else>
+        <slot :name="`tab.${tab.name}.before`" :tab="tab" />
+        <!-- Direct groups at this level -->
+        <template v-for="[groupName, group] of tab.groups" :key="groupName">
+          <template v-if="groupName !== '__flat__'">
+            <slot :name="`group.${groupName}.before`" />
+            <MapoFormGroup
+              :name="groupName"
+              :label="group.label"
+              :fields="group.fields"
+              :subtabs="group.subtabs"
+            >
+              <template v-for="(_, slotName) in $slots" #[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 $slots" #[slotName]="slotProps">
+              <slot :name="slotName" v-bind="slotProps ?? {}" />
+            </template>
+          </MapoFormFlatSection>
+        </template>
+
+        <!-- Nested sub-tabs (recursive) -->
+        <MapoFormTabs
+          v-if="tab.children.size > 0"
+          :tabs="[...tab.children.values()]"
+        >
+          <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+          </template>
+        </MapoFormTabs>
+        <slot :name="`tab.${tab.name}.after`" :tab="tab" />
+      </template>
+    </div>
+  </div>
+</template>

package/src/runtime/components/MapoUnknownField.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import type { AnyFieldDescriptor } from "../types/index.js";
+
+const props = defineProps<{
+  modelValue: unknown;
+  descriptor: AnyFieldDescriptor;
+  errors?: string[];
+  readonly?: boolean;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{ "update:modelValue": [value: unknown] }>();
+
+// Inspect-friendly representation of the value. Never emits type-changing updates:
+// if the user edits the JSON, emit only after a successful parse.
+const jsonValue = computed(() => {
+  try {
+    return JSON.stringify(props.modelValue, null, 2);
+  } catch {
+    return String(props.modelValue);
+  }
+});
+
+const draft = ref(jsonValue.value);
+const parseError = ref<string | null>(null);
+
+watch(jsonValue, (val) => {
+  draft.value = val;
+  parseError.value = null;
+});
+
+function onInput(val: string | number) {
+  draft.value = String(val);
+  try {
+    const parsed = JSON.parse(draft.value);
+    parseError.value = null;
+    emit("update:modelValue", parsed);
+  } catch (e) {
+    // Do not emit until the JSON is valid: this avoids silently turning
+    // `42` (number) into `"42"` (string) while the user is typing.
+    parseError.value = (e as Error).message;
+  }
+}
+
+if (import.meta.dev) {
+  console.warn(
+    `[Mapo] Field type "${props.descriptor.type}" (key: "${props.descriptor.key as string}") is not in the registry. Rendered as MapoUnknownField.`,
+  );
+}
+</script>
+
+<template>
+  <div class="rounded border border-yellow-400 bg-yellow-50 p-3 text-sm">
+    <p class="font-mono font-semibold text-yellow-700">
+      Unknown field: <code>{{ descriptor.key }}</code>
+      <span class="ml-2 text-yellow-500">(type: {{ descriptor.type }})</span>
+    </p>
+    <UTextarea
+      class="mt-2 font-mono text-xs"
+      :model-value="draft"
+      :rows="4"
+      :readonly="readonly || disabled"
+      :disabled="disabled"
+      @update:model-value="onInput"
+    />
+    <p v-if="parseError" class="mt-1 text-xs text-yellow-700">
+      Invalid JSON — changes are not applied until the value becomes parseable.
+    </p>
+    <p v-for="err in errors" :key="err" class="mt-1 text-red-500">
+      {{ err }}
+    </p>
+  </div>
+</template>

package/src/runtime/components/fields/MapoDateField.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { parseDate, CalendarDate } from "@internationalized/date";
+import type { DateDescriptor } from "../../types/index.js";
+
+/** Date-only field backed by `UCalendar` and serialised as `YYYY-MM-DD`. */
+const props = defineProps<{
+  modelValue: unknown;
+  descriptor: DateDescriptor;
+  errors?: string[];
+  readonly?: boolean;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{ "update:modelValue": [value: string | null] }>();
+
+const open = ref(false);
+
+/** Parsed calendar value derived from the current ISO-like model string. */
+const calendarValue = computed<CalendarDate | undefined>(() => {
+  const v = props.modelValue as string | null | undefined;
+  if (!v) return undefined;
+  try {
+    // split() always returns at least one element.
+    return parseDate(String(v).split("T")[0]!);
+  } catch {
+    return undefined;
+  }
+});
+
+const displayLabel = computed(() => {
+  const v = calendarValue.value;
+  if (!v) return "Select date";
+  return `${String(v.day).padStart(2, "0")}/${String(v.month).padStart(2, "0")}/${v.year}`;
+});
+
+const attrs = computed(() => props.descriptor.attrs ?? {});
+
+function onDateSelect(date: unknown) {
+  const d = date as CalendarDate | null;
+  open.value = false;
+  emit("update:modelValue", d ? d.toString() : null);
+}
+
+function clear() {
+  emit("update:modelValue", null);
+  open.value = false;
+}
+</script>
+
+<template>
+  <UPopover v-model:open="open" :disabled="readonly || disabled">
+    <UButton
+      variant="outline"
+      color="neutral"
+      icon="i-lucide-calendar"
+      trailing
+      class="w-full justify-between font-normal"
+      :class="{
+        'opacity-50 cursor-not-allowed': readonly || disabled,
+        'ring-2 ring-red-500': errors?.length,
+      }"
+      :disabled="readonly || disabled"
+    >
+      <span
+        :class="
+          calendarValue ? 'text-gray-900 dark:text-white' : 'text-gray-400'
+        "
+      >
+        {{ displayLabel }}
+      </span>
+    </UButton>
+
+    <template #content>
+      <div class="p-3 space-y-2">
+        <UCalendar
+          :model-value="calendarValue"
+          :min-value="attrs.min ? parseDate(attrs.min) : undefined"
+          :max-value="attrs.max ? parseDate(attrs.max) : undefined"
+          @update:model-value="onDateSelect"
+        />
+        <div
+          class="flex justify-end border-t border-gray-200 dark:border-gray-700 pt-2"
+        >
+          <UButton
+            variant="ghost"
+            color="neutral"
+            size="xs"
+            icon="i-lucide-x"
+            @click="clear"
+          >
+            Clear
+          </UButton>
+        </div>
+      </div>
+    </template>
+  </UPopover>
+</template>