@mapomodule/form 2.0.0-beta.0

package/src/runtime/components/MapoFocusPortal.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+/**
+ * MapoFocusPortal — Renders full-page editing for a repeater item.
+ *
+ * Mount only one instance in layout/default or in MapoRootComponents.
+ * It activates automatically when `useFocusMode().enter()` is called.
+ *
+ * @example
+ * // In layouts/default.vue
+ * <MapoFocusPortal />
+ */
+import { computed, ref, onMounted, onUnmounted } from "vue";
+import { watch } from "vue";
+import { useFocusMode } from "../composables/useFocusMode.js";
+import MapoForm from "./MapoForm.vue";
+
+const { focusTarget, exit } = useFocusMode();
+
+const isOpen = computed(() => focusTarget.value !== null);
+const canUseDocument = typeof document !== "undefined";
+
+// Close on ESC.
+function onKeyDown(e: KeyboardEvent) {
+  if (e.key === "Escape" && isOpen.value) exit();
+}
+onMounted(() => window.addEventListener("keydown", onKeyDown));
+onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
+
+// Lock body scroll while the portal is open.
+watch(isOpen, (open) => {
+  if (!canUseDocument) return;
+  document.body.style.overflow = open ? "hidden" : "";
+});
+
+// Local model for the sub-form, kept in two-way sync with the focus target.
+const localModel = ref<Record<string, unknown>>({});
+
+watch(
+  () => focusTarget.value?.model,
+  (val) => {
+    if (val) localModel.value = { ...val };
+  },
+  { immediate: true },
+);
+
+function onUpdate(val: Record<string, unknown>) {
+  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="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 as any"
+              :errors="focusTarget.errors.value as any"
+              :languages="focusTarget.languages as any"
+              :current-lang="focusTarget.currentLang"
+              :registry="focusTarget.registry as any"
+              @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 200ms ease,
+    transform 200ms ease;
+}
+.mapo-focus-portal-leave-active {
+  transition:
+    opacity 150ms ease,
+    transform 150ms ease;
+}
+.mapo-focus-portal-enter-from,
+.mapo-focus-portal-leave-to {
+  opacity: 0;
+  transform: scale(0.98);
+}
+.mapo-focus-portal-enter-to,
+.mapo-focus-portal-leave-from {
+  opacity: 1;
+  transform: scale(1);
+}
+</style>

package/src/runtime/components/MapoForm.vue

@@ -0,0 +1,247 @@
+<script setup lang="ts" generic="T extends object">
+import { computed, useSlots, watchEffect, inject, onUnmounted } from "vue";
+import type { Ref } from "vue";
+import { useNuxtApp, useRuntimeConfig } from "#app";
+import type {
+  AnyFieldDescriptor,
+  FieldRegistry,
+  MapoFormRuntimeConfig,
+} from "../types/index.js";
+import type { GroupEntry, TabEntry } from "../types/layout.js";
+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 = withDefaults(
+  defineProps<{
+    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;
+  }>(),
+  {
+    errors: () => ({}),
+    languages: () => [],
+    currentLang: "",
+    readonly: false,
+    immediate: false,
+    registry: undefined,
+  },
+);
+
+// Auto-inject the registry from the global plugin to remove the boilerplate
+// `useNuxtApp().$mapoFormRegistry` + `:registry=…` from every page.
+const injectedRegistry = computed<FieldRegistry>(() => {
+  if (props.registry) return props.registry;
+  const nuxt = useNuxtApp() as unknown as { $mapoFormRegistry?: FieldRegistry };
+  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": [value: T] }>();
+
+// Slots are forwarded generically to inner layers; props vary per slot
+// (field.* carry a descriptor, group.* carry none), so they are loosely typed.
+// Slot names are dynamic (`field.{key}`, `field.{key}.label`, `group.{name}`…)
+// and each kind carries different bindings, so the props stay loosely typed.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+defineSlots<Record<string, (props: Record<string, any>) => unknown>>();
+
+// ─── Setup form ──────────────────────────────────────────────────────────────
+
+const model = computed({
+  get: () => props.modelValue,
+  set: (val) => emit("update:modelValue", val),
+});
+
+const currentLangRef = computed(() => props.currentLang);
+const errorsRef = computed(() => props.errors);
+
+const globalDebounce: number =
+  (useRuntimeConfig().public.mapoForm as MapoFormRuntimeConfig | undefined)
+    ?.debounce ?? 300;
+
+const form = useMapoForm({
+  model: model as unknown as Ref<T>,
+  fields: computed(() => props.fields),
+  errors: errorsRef,
+  languages: props.languages,
+  currentLang: currentLangRef,
+  immediate: props.immediate,
+  debounce: globalDebounce,
+  registry: injectedRegistry.value,
+});
+
+// Inherit the parent form's submitted state (provided automatically by useMapoForm)
+// so that form.submit() on the parent also shows errors in this nested MapoForm.
+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,
+});
+
+type ValidateClientFn = () => {
+  valid: boolean;
+  errors: Record<string, string>;
+};
+type RegisterFn = (fn: ValidateClientFn) => () => void;
+const registerValidator = inject<RegisterFn | null>(
+  "mapoDetailRegisterValidator",
+  null,
+);
+if (registerValidator) {
+  const unregister = registerValidator(form.validateClient);
+  onUnmounted(unregister);
+}
+
+// Forward only field-specific slots to inner layers, avoiding host-level slots
+// such as header/footer/actions where they have no meaning.
+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);
+
+// ─── Group fields by tab/group ───────────────────────────────────────────────
+
+function getOrCreateTab(map: Map<string, TabEntry>, name: string): TabEntry {
+  if (!map.has(name)) {
+    map.set(name, { name, groups: new Map(), children: new Map() });
+  }
+  return map.get(name)!;
+}
+
+const grouped = computed<Map<string, TabEntry>>(() => {
+  const tabs = new Map<string, TabEntry>();
+
+  // The layout tree is type-agnostic: cast the generic descriptors to the bare
+  // AnyFieldDescriptor used by the (non-generic) MapoFormGroup/Tabs/FlatSection layers.
+  for (const field of props.fields as AnyFieldDescriptor[]) {
+    // Normalise: 'a/b', ['a','b'], or 'a' all become a string[]
+    const rawTab = field.tab;
+    const tabPath: string[] = !rawTab
+      ? ["__default__"]
+      : Array.isArray(rawTab)
+        ? rawTab
+        : rawTab.split("/");
+    const groupName = field.group ?? "__flat__";
+
+    // Walk/create the nested TabEntry tree
+    // tabPath always has at least one segment (split never returns []).
+    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: 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);
+    }
+  }
+
+  return tabs;
+});
+
+const hasTabs = computed(() => {
+  const keys = [...grouped.value.keys()];
+  return keys.length > 1 || (keys.length === 1 && keys[0] !== "__default__");
+});
+
+const defaultGroups = computed(
+  () =>
+    grouped.value.get("__default__")?.groups ?? new Map<string, GroupEntry>(),
+);
+
+const tabList = computed<TabEntry[]>(() => [...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 as AnyFieldDescriptor[]"
+        >
+          <template
+            v-for="slotName in fieldSlotNames"
+            :key="slotName"
+            #[slotName]="slotProps"
+          >
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+          </template>
+        </MapoFormFlatSection>
+      </template>
+    </template>
+  </div>
+</template>