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

package/src/runtime/components/MapoForm.vue

@@ -2,6 +2,7 @@
 import { computed, useSlots, watchEffect, inject, onUnmounted } from "vue";
 import type { Ref } from "vue";
 import { useNuxtApp, useRuntimeConfig } from "#app";
+import { useI18n } from "vue-i18n";
 import type {
   AnyFieldDescriptor,
   FieldRegistry,
@@ -135,6 +136,12 @@ provideCurrentLang(currentLangRef);
 
 // ─── Group fields by tab/group ───────────────────────────────────────────────
 
+const { t } = useI18n();
+
+// Fields without a `tab` go here. It becomes a tab of its own only when other
+// fields have one, and then it shows as "General" (`mapo.form.defaultTab`).
+const DEFAULT_TAB = "__default__";
+
 function getOrCreateTab(map: Map<string, TabEntry>, name: string): TabEntry {
   if (!map.has(name)) {
     map.set(name, { name, groups: new Map(), children: new Map() });
@@ -151,7 +158,7 @@ const grouped = computed<Map<string, TabEntry>>(() => {
     // Normalise: 'a/b', ['a','b'], or 'a' all become a string[]
     const rawTab = field.tab;
     const tabPath: string[] = !rawTab
-      ? ["__default__"]
+      ? [DEFAULT_TAB]
       : Array.isArray(rawTab)
         ? rawTab
         : rawTab.split("/");
@@ -179,17 +186,23 @@ const grouped = computed<Map<string, TabEntry>>(() => {
     }
   }
 
+  const defaultTab = tabs.get(DEFAULT_TAB);
+  if (defaultTab) defaultTab.label = t("mapo.form.defaultTab");
+
   return tabs;
 });
 
 const hasTabs = computed(() => {
   const keys = [...grouped.value.keys()];
-  return keys.length > 1 || (keys.length === 1 && keys[0] !== "__default__");
+  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__")?.groups ?? new Map<string, GroupEntry>(),
+  () => grouped.value.get(DEFAULT_TAB)?.groups ?? new Map<string, GroupEntry>(),
 );
 
 const tabList = computed<TabEntry[]>(() => [...grouped.value.values()]);

package/src/runtime/components/MapoFormTabs.vue

@@ -1,15 +1,39 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
 import type { TabEntry } from "../types/layout.js";
 import { injectMapoForm } from "../composables/useMapoForm.js";
+import { pickActiveTab, tabHasShownFields } from "../utils/tabVisibility.js";
 import MapoFormGroup from "./MapoFormGroup.vue";
 import MapoFormFlatSection from "./MapoFormFlatSection.vue";
 
+const { t } = useI18n();
+
 const props = defineProps<{ tabs: TabEntry[] }>();
 
-defineSlots<Record<string, unknown>>();
+const slots = defineSlots<Record<string, unknown>>();
+
+const form = injectMapoForm<Record<string, unknown>>()!;
+
+// A tab whose fields are all hidden by `visible` or `show` would open on an
+// empty panel, so it leaves the tab bar until one of them shows. Content passed
+// through the tab's own slots counts as something to show.
+function tabHasContent(tab: TabEntry): boolean {
+  const hasPanelSlot = Boolean(slots[`tab.${tab.name}`]);
+  const hasBeforeSlot = Boolean(slots[`tab.${tab.name}.before`]);
+  const hasAfterSlot = Boolean(slots[`tab.${tab.name}.after`]);
+  if (hasPanelSlot || hasBeforeSlot || hasAfterSlot) return true;
+  return tabHasShownFields(tab, form.model.value);
+}
+
+const shownTabs = computed(() => props.tabs.filter(tabHasContent));
 
-const activeTab = ref(props.tabs[0]?.name ?? "");
+// The tab the user clicked; until then, or while it is hidden, the first shown
+// tab is open.
+const pickedTab = ref<string | null>(null);
+const activeTab = computed(() =>
+  pickActiveTab(shownTabs.value, pickedTab.value),
+);
 
 // Recursively check if a tab (or any of its descendants) contains errors.
 function tabHasErrors(tab: TabEntry, errorKeys: Set<string>): boolean {
@@ -23,7 +47,6 @@ function tabHasErrors(tab: TabEntry, errorKeys: Set<string>): boolean {
 }
 
 // Highlight tabs containing errors.
-const form = injectMapoForm()!;
 const tabsWithErrors = computed(() => {
   const errorKeys = new Set(Object.keys(form.errors.value));
   return new Set(
@@ -37,7 +60,7 @@ const tabsWithErrors = computed(() => {
     <!-- Tab bar -->
     <div class="flex gap-1 border-b border-gray-200 pb-px">
       <button
-        v-for="tab in tabs"
+        v-for="tab in shownTabs"
         :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"
@@ -46,7 +69,7 @@ const tabsWithErrors = computed(() => {
             ? 'border-b-2 border-primary-500 text-primary-600'
             : 'text-gray-500 hover:bg-gray-50 hover:text-gray-700',
         ]"
-        @click="activeTab = tab.name"
+        @click="pickedTab = tab.name"
       >
         <slot :name="`tab.${tab.name}.label`" :tab="tab">
           {{ tab.label ?? tab.name }}
@@ -54,7 +77,7 @@ const tabsWithErrors = computed(() => {
         <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"
+          :aria-label="t('mapo.form.tabErrors')"
         />
       </button>
       <!-- Extra content appended to the tab bar (actions, badges, …). -->

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
 import { parseDate, CalendarDate } from "@internationalized/date";
 import type { DateDescriptor } from "../../types/index.js";
 
@@ -14,6 +15,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{ "update:modelValue": [value: string | null] }>();
 
+const { t } = useI18n();
 const open = ref(false);
 
 /** Parsed calendar value derived from the current ISO-like model string. */
@@ -30,7 +32,7 @@ const calendarValue = computed<CalendarDate | undefined>(() => {
 
 const displayLabel = computed(() => {
   const v = calendarValue.value;
-  if (!v) return "Select date";
+  if (!v) return t("mapo.dateField.selectDate");
   return `${String(v.day).padStart(2, "0")}/${String(v.month).padStart(2, "0")}/${v.year}`;
 });
 

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

@@ -6,6 +6,7 @@ import {
   today,
   getLocalTimeZone,
 } from "@internationalized/date";
+import { useI18n } from "vue-i18n";
 import type { DateDescriptor } from "../../types/index.js";
 
 /** Datetime field with configurable naive/UTC serialisation semantics. */
@@ -19,6 +20,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{ "update:modelValue": [value: string | null] }>();
 
+const { t } = useI18n();
 const open = ref(false);
 
 // Timezone strategy configurable through `descriptor.attrs.tz`:
@@ -72,7 +74,7 @@ function emitFromCalendar(v: CalendarDateTime) {
 // Displayed label in the trigger button
 const displayLabel = computed(() => {
   const v = calendarValue.value;
-  if (!v) return "Select date and time";
+  if (!v) return t("mapo.dateField.selectDateTime");
   const date = `${String(v.day).padStart(2, "0")}/${String(v.month).padStart(2, "0")}/${v.year}`;
   const time = `${String(v.hour).padStart(2, "0")}:${String(v.minute).padStart(2, "0")}`;
   return `${date} ${time}`;

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

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
+import type {
+  EnhancedMediaDescriptor,
+  EnhancedMediaValue,
+  MediaItem,
+} from "../../types/index.js";
+import { useMediaManager } from "../../composables/useMediaManager.js";
+
+const props = defineProps<{
+  modelValue: EnhancedMediaValue | null | undefined;
+  descriptor: EnhancedMediaDescriptor;
+  errors?: string[];
+  readonly?: boolean;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [value: EnhancedMediaValue | null];
+}>();
+
+const { t } = useI18n();
+
+const dialogOpen = ref(false);
+
+// Picker dialog comes from @mapomodule/uikit, resolved at runtime.
+const { MediaDialog, available } = useMediaManager();
+
+const current = computed<MediaItem | null>(
+  () => props.modelValue?.media ?? null,
+);
+
+const altValue = computed({
+  get: () => props.modelValue?.alt ?? "",
+  set: (v: string) =>
+    emit("update:modelValue", {
+      ...(props.modelValue ?? { media: null }),
+      alt: v,
+    }),
+});
+
+const captionValue = computed({
+  get: () => props.modelValue?.caption ?? "",
+  set: (v: string) =>
+    emit("update:modelValue", {
+      ...(props.modelValue ?? { media: null }),
+      caption: v,
+    }),
+});
+
+const mime = computed(() => props.descriptor.attrs?.mime as string | undefined);
+
+function onConfirm(selection: MediaItem | MediaItem[]) {
+  const media = Array.isArray(selection) ? (selection[0] ?? null) : selection;
+  emit("update:modelValue", {
+    ...(props.modelValue ?? {}),
+    media,
+    alt: props.modelValue?.alt ?? media?.alt_text ?? "",
+    caption: props.modelValue?.caption ?? "",
+  });
+}
+
+function clear() {
+  emit("update:modelValue", null);
+}
+</script>
+
+<template>
+  <div class="mapo-enhanced-media-field space-y-3">
+    <MapoMediaUnavailable v-if="!available" />
+
+    <template v-else>
+      <div class="flex gap-3">
+        <!-- Preview -->
+        <div class="shrink-0">
+          <div
+            class="flex size-24 cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 border-dashed transition-colors"
+            :class="
+              current
+                ? 'border-default'
+                : 'border-accented hover:border-primary'
+            "
+            @click="!readonly && !disabled && (dialogOpen = true)"
+          >
+            <MapoMediaPreview v-if="current" :media="current" size="md" />
+            <div v-else class="flex flex-col items-center gap-1 text-dimmed">
+              <UIcon name="i-lucide-image-plus" class="size-7" />
+              <span class="text-[10px]">{{ t("mapo.select") }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Metadata fields -->
+        <div class="flex-1 space-y-2">
+          <div v-if="current" class="flex items-start justify-between gap-2">
+            <p class="truncate text-xs text-muted">
+              {{ current.title || current.file?.split("/").pop() }}
+            </p>
+            <div class="flex gap-1">
+              <UButton
+                v-if="!readonly && !disabled"
+                icon="i-lucide-refresh-cw"
+                size="xs"
+                variant="ghost"
+                color="neutral"
+                :title="t('mapo.change')"
+                @click="dialogOpen = true"
+              />
+              <UButton
+                v-if="!readonly && !disabled"
+                icon="i-lucide-x"
+                size="xs"
+                variant="ghost"
+                color="neutral"
+                :title="t('mapo.remove')"
+                @click="clear"
+              />
+            </div>
+          </div>
+
+          <UInput
+            v-model="altValue"
+            size="sm"
+            :placeholder="t('mapo.enhancedMediaField.altText')"
+            :disabled="readonly || disabled || !current"
+          />
+          <UInput
+            v-model="captionValue"
+            size="sm"
+            :placeholder="t('mapo.enhancedMediaField.caption')"
+            :disabled="readonly || disabled || !current"
+          />
+        </div>
+      </div>
+
+      <!-- Dialog -->
+      <component
+        :is="MediaDialog"
+        v-model="dialogOpen"
+        selection-mode="single"
+        :mime="mime"
+        :selected="current"
+        @confirm="onConfirm"
+      />
+    </template>
+
+    <!-- Errors -->
+    <p v-for="err in errors" :key="err" class="text-xs text-error" role="alert">
+      {{ err }}
+    </p>
+  </div>
+</template>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
 import type { FileDescriptor } from "../../types/index.js";
 
 const props = defineProps<{
@@ -12,6 +13,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{ "update:modelValue": [value: File | null] }>();
 
+const { t } = useI18n();
 const inputRef = ref<HTMLInputElement | null>(null);
 
 const currentFileName = computed<string | null>(() => {
@@ -78,7 +80,7 @@ const accept = computed(
         variant="ghost"
         color="neutral"
         icon="i-lucide-x"
-        aria-label="Remove file"
+        :aria-label="t('mapo.fileField.removeFile')"
         @click="clear"
       />
     </div>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted } from "vue";
+import { useI18n } from "vue-i18n";
 import { useNuxtApp } from "#app";
 import { debounce } from "@mapomodule/utils";
 import type { FksDescriptor } from "../../types/index.js";
@@ -14,6 +15,8 @@ const props = defineProps<{
 
 const emit = defineEmits<{ "update:modelValue": [value: unknown] }>();
 
+const { t } = useI18n();
+
 const attrs = computed(() => props.descriptor.attrs);
 const isMultiple = computed(
   () => props.descriptor.type === "m2m" || !!attrs.value.multiple,
@@ -70,7 +73,7 @@ const internalValue = computed({
 
 // Placeholder
 const placeholder = computed(() =>
-  isMultiple.value ? "Search and select..." : "Search...",
+  isMultiple.value ? t("mapo.fksField.searchSelect") : t("mapo.search"),
 );
 
 // Chip text shown in the trigger.
@@ -144,7 +147,9 @@ function getItemKey(item: unknown): unknown {
     <!-- Empty state -->
     <template #empty>
       <span class="text-sm text-gray-500">
-        {{ searchTerm ? "No results found" : "No items available" }}
+        {{
+          searchTerm ? t("mapo.fksField.noResults") : t("mapo.fksField.noItems")
+        }}
       </span>
     </template>
   </USelectMenu>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, defineAsyncComponent } from "vue";
+import { useI18n } from "vue-i18n";
 import type { MapDescriptor } from "../../types/index.js";
 
 // Leaflet is loaded only on the client because it is not SSR-safe.
@@ -7,6 +8,8 @@ const LeafletMap = defineAsyncComponent(
   () => import("./MapoMapFieldClient.vue"),
 );
 
+const { t } = useI18n();
+
 /** Geographic coordinates stored by the map field. */
 interface LatLng {
   lat: number;
@@ -63,7 +66,7 @@ function clear() {
     <div class="flex gap-2">
       <UInput
         v-model="latInput"
-        placeholder="Latitude"
+        :placeholder="t('mapo.latitude')"
         class="flex-1"
         :readonly="readonly"
         :disabled="disabled"
@@ -71,7 +74,7 @@ function clear() {
       />
       <UInput
         v-model="lngInput"
-        placeholder="Longitude"
+        :placeholder="t('mapo.longitude')"
         class="flex-1"
         :readonly="readonly"
         :disabled="disabled"

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

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
+import type { MediaDescriptor, MediaItem } from "../../types/index.js";
+import { useMediaManager } from "../../composables/useMediaManager.js";
+
+const props = defineProps<{
+  modelValue: MediaItem | number | null | undefined;
+  descriptor: MediaDescriptor;
+  errors?: string[];
+  readonly?: boolean;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [value: MediaItem | null];
+}>();
+
+const { t } = useI18n();
+
+const dialogOpen = ref(false);
+
+// Picker dialog comes from @mapomodule/uikit, resolved at runtime.
+const { MediaDialog, available } = useMediaManager();
+
+const current = computed<MediaItem | null>(() => {
+  if (!props.modelValue) return null;
+  if (typeof props.modelValue === "object") return props.modelValue;
+  return null;
+});
+
+const mime = computed(() => props.descriptor.attrs?.mime as string | undefined);
+
+function onConfirm(selection: MediaItem | MediaItem[]) {
+  emit(
+    "update:modelValue",
+    Array.isArray(selection) ? (selection[0] ?? null) : selection,
+  );
+}
+
+function clear() {
+  emit("update:modelValue", null);
+}
+</script>
+
+<template>
+  <div class="mapo-media-field space-y-2">
+    <MapoMediaUnavailable v-if="!available" />
+
+    <template v-else>
+      <!-- Selected media preview. It and the trigger below paint their own
+           surface, like an input: `soft` buttons and transparent cards take
+           the page background and vanish on a tinted page. -->
+      <div
+        v-if="current"
+        class="flex items-center gap-3 rounded-lg border border-default bg-default p-2"
+      >
+        <MapoMediaPreview :media="current" size="sm" />
+        <div class="flex-1 min-w-0">
+          <p class="truncate text-xs font-medium">
+            {{ current.title || current.file?.split("/").pop() }}
+          </p>
+          <p class="text-xs text-dimmed">
+            {{ current.mime_type }}
+          </p>
+        </div>
+        <UButton
+          v-if="!readonly && !disabled"
+          icon="i-lucide-x"
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          @click="clear"
+        />
+      </div>
+
+      <!-- Trigger button -->
+      <UButton
+        v-if="!readonly && !disabled"
+        :icon="current ? 'i-lucide-refresh-cw' : 'i-lucide-image-plus'"
+        size="sm"
+        variant="outline"
+        color="neutral"
+        :block="!current"
+        @click="dialogOpen = true"
+      >
+        {{ current ? t("mapo.change") : t("mapo.mediaField.selectMedia") }}
+      </UButton>
+
+      <!-- Dialog -->
+      <component
+        :is="MediaDialog"
+        v-model="dialogOpen"
+        selection-mode="single"
+        :mime="mime"
+        :selected="current"
+        @confirm="onConfirm"
+      />
+    </template>
+
+    <!-- Errors -->
+    <p v-for="err in errors" :key="err" class="text-xs text-error" role="alert">
+      {{ err }}
+    </p>
+  </div>
+</template>

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

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
+import type { MediaM2mDescriptor, MediaItem } from "../../types/index.js";
+import { useMediaManager } from "../../composables/useMediaManager.js";
+
+const props = defineProps<{
+  modelValue: MediaItem[] | number[] | null | undefined;
+  descriptor: MediaM2mDescriptor;
+  errors?: string[];
+  readonly?: boolean;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [value: MediaItem[]];
+}>();
+
+const { t } = useI18n();
+
+const dialogOpen = ref(false);
+
+// Picker dialog comes from @mapomodule/uikit, resolved at runtime.
+const { MediaDialog, available } = useMediaManager();
+
+const current = computed<MediaItem[]>(() => {
+  if (!props.modelValue) return [];
+  return props.modelValue.filter((v): v is MediaItem => typeof v === "object");
+});
+
+const mime = computed(() => props.descriptor.attrs?.mime as string | undefined);
+
+function onConfirm(selection: MediaItem | MediaItem[]) {
+  emit("update:modelValue", Array.isArray(selection) ? selection : [selection]);
+}
+
+function removeItem(id: number) {
+  emit(
+    "update:modelValue",
+    current.value.filter((m) => m.id !== id),
+  );
+}
+
+// HTML5 drag reorder — order matters for m2m relations (legacy parity).
+const dragIndex = ref<number | null>(null);
+
+function onDragStart(index: number) {
+  dragIndex.value = index;
+}
+
+function onDragOverItem(index: number) {
+  if (dragIndex.value === null || dragIndex.value === index) return;
+  const items = [...current.value];
+  const [moved] = items.splice(dragIndex.value, 1);
+  if (!moved) return;
+  items.splice(index, 0, moved);
+  dragIndex.value = index;
+  emit("update:modelValue", items);
+}
+
+function onDragEnd() {
+  dragIndex.value = null;
+}
+</script>
+
+<template>
+  <div class="mapo-media-m2m-field space-y-2">
+    <MapoMediaUnavailable v-if="!available" />
+
+    <template v-else>
+      <!-- Selected items grid -->
+      <div v-if="current.length > 0" class="flex flex-wrap gap-2">
+        <div
+          v-for="(media, i) in current"
+          :key="media.id"
+          class="group relative"
+          :class="{
+            'opacity-50': dragIndex === i,
+            'cursor-grab': !readonly && !disabled,
+          }"
+          :draggable="!readonly && !disabled"
+          @dragstart="onDragStart(i)"
+          @dragover.prevent="onDragOverItem(i)"
+          @dragend="onDragEnd"
+        >
+          <MapoMediaPreview :media="media" size="sm" />
+          <button
+            v-if="!readonly && !disabled"
+            class="absolute -right-1.5 -top-1.5 hidden size-4 items-center justify-center rounded-full bg-error text-inverted group-hover:flex"
+            type="button"
+            @click="removeItem(media.id)"
+          >
+            <UIcon name="i-lucide-x" class="size-2.5" />
+          </button>
+        </div>
+      </div>
+
+      <!-- Add button: outlined like MapoMediaField's trigger, so it keeps its
+           own surface on a tinted page. -->
+      <UButton
+        v-if="!readonly && !disabled"
+        icon="i-lucide-plus"
+        size="sm"
+        variant="outline"
+        color="neutral"
+        @click="dialogOpen = true"
+      >
+        {{
+          current.length > 0
+            ? t("mapo.mediaM2MField.addMedia")
+            : t("mapo.mediaField.selectMedia")
+        }}
+      </UButton>
+
+      <!-- Dialog -->
+      <component
+        :is="MediaDialog"
+        v-model="dialogOpen"
+        selection-mode="multi"
+        :mime="mime"
+        :selected="current"
+        @confirm="onConfirm"
+      />
+    </template>
+
+    <!-- Errors -->
+    <p v-for="err in errors" :key="err" class="text-xs text-error" role="alert">
+      {{ err }}
+    </p>
+  </div>
+</template>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+/**
+ * Placeholder rendered by the media fields when the Media Manager is not
+ * registered — i.e. `@mapomodule/form` is installed without `@mapomodule/uikit`.
+ * Better than a silently broken picker: it names the missing package.
+ */
+</script>
+
+<template>
+  <div
+    class="flex items-center gap-2 rounded-lg border border-dashed border-default px-3 py-2 text-xs text-muted"
+  >
+    <UIcon
+      name="i-lucide-triangle-alert"
+      class="size-4 shrink-0 text-warning"
+    />
+    <span>Media fields require <code>@mapomodule/uikit</code>.</span>
+  </div>
+</template>