@mapomodule/form 2.0.0-beta.0 → 2.0.0-beta.10

package/dist/runtime/components/fields/MapoRepeater.vue

@@ -0,0 +1,459 @@
+<script setup>
+import { ref, computed, watchEffect } from "vue";
+import { useI18n } from "vue-i18n";
+import { VueDraggable } from "vue-draggable-plus";
+import { useConfirmStore } from "@mapomodule/store/runtime/stores/confirm";
+import { injectMapoForm } from "../../composables/useMapoForm.js";
+import MapoRepeaterItem from "./MapoRepeaterItem.vue";
+const props = defineProps({
+  modelValue: { type: null, required: true },
+  descriptor: { type: Object, required: true },
+  errors: { type: Array, required: false },
+  readonly: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const form = injectMapoForm();
+const { t } = useI18n();
+const attrs = computed(() => props.descriptor.attrs ?? {});
+const items = computed({
+  get: () => Array.isArray(props.modelValue) ? props.modelValue : [],
+  set: (val) => emit("update:modelValue", val)
+});
+function emitItems(newItems) {
+  emit("update:modelValue", [...newItems]);
+}
+const itemUids = /* @__PURE__ */ new WeakMap();
+let _uidSeq = 0;
+function uidFor(item) {
+  let id = itemUids.get(item);
+  if (!id) {
+    id = `it_${++_uidSeq}`;
+    itemUids.set(item, id);
+  }
+  return id;
+}
+const undoStack = ref([]);
+function pushUndo() {
+  undoStack.value.push(items.value.map((i) => ({ ...i })));
+  if (undoStack.value.length > 20) undoStack.value.shift();
+}
+function undo() {
+  const prev = undoStack.value.pop();
+  if (prev) emit("update:modelValue", prev);
+}
+const templates = computed(() => attrs.value.templates);
+const templateKeys = computed(
+  () => templates.value ? Object.keys(templates.value) : []
+);
+const hasTemplates = computed(() => templateKeys.value.length > 0);
+const selectedTemplate = ref("");
+watchEffect(() => {
+  if (!selectedTemplate.value && templateKeys.value[0]) {
+    selectedTemplate.value = templateKeys.value[0];
+  }
+});
+function fieldsForItem(item) {
+  if (!templates.value) return props.descriptor.fields ?? [];
+  const key = item._template ?? selectedTemplate.value;
+  return templates.value[key] ?? props.descriptor.fields ?? [];
+}
+const canAdd = computed(
+  () => !props.readonly && (!attrs.value.maxItems || items.value.length < attrs.value.maxItems)
+);
+const canDelete = computed(
+  () => !props.readonly && (!attrs.value.minItems || items.value.length > attrs.value.minItems)
+);
+function remainingSlots() {
+  if (!attrs.value.maxItems) return Number.POSITIVE_INFINITY;
+  return Math.max(0, attrs.value.maxItems - items.value.length);
+}
+function minBound() {
+  return attrs.value.minItems ?? 0;
+}
+async function askConfirm(message, title) {
+  title ??= t("mapo.confirm");
+  try {
+    return await useConfirmStore().ask({ title, message });
+  } catch {
+    return typeof globalThis.confirm === "function" ? globalThis.confirm(message) : false;
+  }
+}
+function addItem() {
+  if (!canAdd.value) return;
+  pushUndo();
+  const newItem = hasTemplates.value ? { _template: selectedTemplate.value } : {};
+  emitItems([...items.value, newItem]);
+}
+async function deleteItem(index) {
+  if (!canDelete.value) return;
+  if (attrs.value.confirmDelete !== false) {
+    const confirmed = await askConfirm(
+      t("mapo.confirmDelete"),
+      t("mapo.repeater.deleteItem")
+    );
+    if (!confirmed) return;
+  }
+  pushUndo();
+  const next = [...items.value];
+  next.splice(index, 1);
+  emitItems(next);
+}
+function duplicateItem(index) {
+  if (remainingSlots() < 1) return;
+  const source = items.value[index];
+  if (!source) return;
+  pushUndo();
+  const copy = { ...source };
+  const next = [...items.value];
+  next.splice(index + 1, 0, copy);
+  emitItems(next);
+}
+function updateItem(index, val) {
+  const oldItem = items.value[index];
+  if (oldItem && oldItem !== val) {
+    const existingUid = itemUids.get(oldItem);
+    if (existingUid) itemUids.set(val, existingUid);
+  }
+  const next = [...items.value];
+  next[index] = val;
+  emitItems(next);
+}
+function moveUp(index) {
+  moveTo(index, index - 1);
+}
+function moveDown(index) {
+  moveTo(index, index + 1);
+}
+function moveTo(from, to) {
+  if (to < 0 || to >= items.value.length || from === to) return;
+  pushUndo();
+  const next = [...items.value];
+  const [item] = next.splice(from, 1);
+  if (item === void 0) return;
+  next.splice(to, 0, item);
+  emitItems(next);
+}
+const collapseVersion = ref(0);
+const globalExpanded = ref(attrs.value.defaultExpanded ?? false);
+function collapseAll() {
+  globalExpanded.value = false;
+  collapseVersion.value++;
+}
+function expandAll() {
+  globalExpanded.value = true;
+  collapseVersion.value++;
+}
+function onDragStart() {
+  pushUndo();
+}
+const selectionMode = ref(false);
+const selectedUids = ref(/* @__PURE__ */ new Set());
+const anchorUid = ref(null);
+function toggleSelectionMode() {
+  selectionMode.value = !selectionMode.value;
+  if (!selectionMode.value) {
+    selectedUids.value = /* @__PURE__ */ new Set();
+    anchorUid.value = null;
+    collapseVersion.value++;
+  } else {
+    globalExpanded.value = false;
+    collapseVersion.value++;
+  }
+}
+function isSelected(uid) {
+  return selectedUids.value.has(uid);
+}
+function toggleSelect(uid, withShift = false) {
+  if (withShift && anchorUid.value && anchorUid.value !== uid) {
+    const uids = items.value.map(uidFor);
+    const a = uids.indexOf(anchorUid.value);
+    const b = uids.indexOf(uid);
+    if (a !== -1 && b !== -1) {
+      const [lo, hi] = a < b ? [a, b] : [b, a];
+      const next2 = new Set(selectedUids.value);
+      for (let i = lo; i <= hi; i++) {
+        const uid2 = uids[i];
+        if (uid2) next2.add(uid2);
+      }
+      selectedUids.value = next2;
+      return;
+    }
+  }
+  const next = new Set(selectedUids.value);
+  if (next.has(uid)) next.delete(uid);
+  else next.add(uid);
+  selectedUids.value = next;
+  anchorUid.value = uid;
+}
+function selectAll() {
+  selectedUids.value = new Set(items.value.map(uidFor));
+}
+function clearSelection() {
+  selectedUids.value = /* @__PURE__ */ new Set();
+  anchorUid.value = null;
+}
+function selectedItems() {
+  return items.value.filter((i) => selectedUids.value.has(uidFor(i)));
+}
+async function bulkDelete() {
+  const count = selectedUids.value.size;
+  if (count === 0) return;
+  if (items.value.length - count < minBound()) {
+    await askConfirm(
+      t("mapo.repeater.minItemsBlock", { min: minBound() }),
+      t("mapo.repeater.actionBlocked")
+    );
+    return;
+  }
+  const confirmed = await askConfirm(
+    t("mapo.repeater.confirmBulkDelete", { count }),
+    t("mapo.repeater.deleteItems")
+  );
+  if (!confirmed) return;
+  pushUndo();
+  emitItems(items.value.filter((i) => !selectedUids.value.has(uidFor(i))));
+  clearSelection();
+}
+function bulkDuplicate() {
+  const count = selectedUids.value.size;
+  if (count === 0) return;
+  const slots = remainingSlots();
+  if (slots <= 0) return;
+  const toDup = selectedItems().slice(0, slots);
+  pushUndo();
+  const next = [...items.value];
+  const dupSet = new Set(toDup.map(uidFor));
+  for (let i = next.length - 1; i >= 0; i--) {
+    const item = next[i];
+    if (item && dupSet.has(uidFor(item))) {
+      next.splice(i + 1, 0, { ...item });
+    }
+  }
+  emitItems(next);
+  clearSelection();
+}
+function bulkMoveToTop() {
+  if (selectedUids.value.size === 0) return;
+  pushUndo();
+  const selected = items.value.filter((i) => selectedUids.value.has(uidFor(i)));
+  const rest = items.value.filter((i) => !selectedUids.value.has(uidFor(i)));
+  emitItems([...selected, ...rest]);
+}
+const hasSelection = computed(() => selectedUids.value.size > 0);
+const selectionCount = computed(() => selectedUids.value.size);
+const parentErrors = computed(() => form.errors.value);
+const errorPrefix = (index) => `${props.descriptor.key}.${index}`;
+</script>
+
+<template>
+  <div class="mapo-repeater space-y-2">
+    <!-- ── Main toolbar ────────────────────────────────────────────────────── -->
+    <div
+      class="flex flex-wrap items-center gap-2 rounded border border-gray-200 bg-gray-50 px-3 py-2"
+    >
+      <span class="text-sm font-medium text-gray-700">
+        {{ t("mapo.repeater.nItems", { n: items.length }, items.length) }}
+        <span v-if="attrs.maxItems" class="text-gray-400"
+          >/ {{ attrs.maxItems }}</span
+        >
+      </span>
+
+      <div class="flex flex-1 flex-wrap items-center justify-end gap-2">
+        <UButton size="xs" variant="ghost" color="neutral" @click="collapseAll">
+          {{ t("mapo.repeater.collapseAll") }}
+        </UButton>
+        <UButton size="xs" variant="ghost" color="neutral" @click="expandAll">
+          {{ t("mapo.repeater.expandAll") }}
+        </UButton>
+        <UButton
+          v-if="undoStack.length"
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          icon="i-lucide-undo-2"
+          :title="t('mapo.repeater.undoLastAction')"
+          @click="undo"
+        />
+
+        <!-- Bulk selection mode -->
+        <UButton
+          size="xs"
+          :variant="selectionMode ? 'solid' : 'ghost'"
+          color="neutral"
+          icon="i-lucide-check-square"
+          :title="t('mapo.repeater.bulkSelection')"
+          :label="
+  selectionMode ? t('mapo.repeater.exitSelection') : t('mapo.select')
+"
+          @click="toggleSelectionMode"
+        />
+
+        <!-- Template selector -->
+        <USelectMenu
+          v-if="hasTemplates"
+          v-model="selectedTemplate"
+          :items="templateKeys"
+          size="xs"
+          class="w-32"
+        />
+
+        <UButton
+          size="sm"
+          color="primary"
+          icon="i-lucide-plus"
+          :disabled="!canAdd"
+          @click="addItem"
+        >
+          {{ t("mapo.add") }}
+        </UButton>
+      </div>
+    </div>
+
+    <!-- ── Bulk actions bar (visible when there is a selection) ───────────── -->
+    <Transition name="slide-down">
+      <div
+        v-if="selectionMode && hasSelection"
+        class="flex items-center gap-2 rounded border border-primary-200 bg-primary-50 px-3 py-2"
+      >
+        <span class="text-sm font-medium text-primary-700">
+          {{ t("mapo.repeater.nSelected", { n: selectionCount }) }}
+        </span>
+        <div class="flex flex-1 flex-wrap items-center gap-2">
+          <UButton size="xs" variant="ghost" color="neutral" @click="selectAll">
+            {{ t("mapo.repeater.all") }}
+          </UButton>
+          <UButton
+            size="xs"
+            variant="ghost"
+            color="neutral"
+            @click="clearSelection"
+          >
+            {{ t("mapo.clear") }}
+          </UButton>
+          <UButton
+            size="xs"
+            variant="outline"
+            color="neutral"
+            icon="i-lucide-copy"
+            :disabled="remainingSlots() <= 0"
+            :title="
+  remainingSlots() < selectionCount ? t('mapo.repeater.duplicateLimited', {
+    slots: remainingSlots(),
+    count: selectionCount
+  }) : t('mapo.repeater.duplicateSelected')
+"
+            @click="bulkDuplicate"
+          >
+            {{ t("mapo.duplicate") }} ({{
+              Math.min(selectionCount, remainingSlots())
+            }})
+          </UButton>
+          <UButton
+            size="xs"
+            variant="outline"
+            color="neutral"
+            icon="i-lucide-arrow-up"
+            @click="bulkMoveToTop"
+          >
+            {{ t("mapo.repeater.moveToTop") }}
+          </UButton>
+          <UButton
+            size="xs"
+            variant="outline"
+            color="error"
+            icon="i-lucide-trash-2"
+            :disabled="!canDelete"
+            @click="bulkDelete"
+          >
+            {{ t("mapo.delete") }} ({{ selectionCount }})
+          </UButton>
+        </div>
+      </div>
+    </Transition>
+
+    <!-- ── Item list with drag&drop (ClientOnly for SSR) ───────────────────── -->
+    <ClientOnly>
+      <VueDraggable
+        v-model="items"
+        handle=".drag-handle"
+        :animation="150"
+        :disabled="readonly || selectionMode"
+        @start="onDragStart"
+      >
+        <MapoRepeaterItem
+          v-for="(item, index) in items"
+          :key="`${uidFor(item)}-${collapseVersion}`"
+          :uid="uidFor(item)"
+          :item="item"
+          :fields="fieldsForItem(item)"
+          :index="index"
+          :error-prefix="errorPrefix(index)"
+          :parent-errors="parentErrors"
+          :languages="form.languages"
+          :current-lang="form.currentLang.value"
+          :readonly="readonly ?? false"
+          :registry="form.registry"
+          :preview-label="attrs.previewLabel"
+          :default-expanded="globalExpanded"
+          :allow-duplicate="attrs.allowDuplicate"
+          :repeater-descriptor="descriptor"
+          :total-items="items.length"
+          :selected="isSelected(uidFor(item))"
+          :selection-mode="selectionMode"
+          @update:item="updateItem(index, $event)"
+          @delete="deleteItem(index)"
+          @duplicate="duplicateItem(index)"
+          @move-up="moveUp(index)"
+          @move-down="moveDown(index)"
+          @move-to="moveTo(index, $event)"
+          @toggle-select="toggleSelect(uidFor(item), $event)"
+        />
+      </VueDraggable>
+
+      <!-- SSR fallback: list without drag -->
+      <template #fallback>
+        <MapoRepeaterItem
+          v-for="(item, index) in items"
+          :key="`${uidFor(item)}-${collapseVersion}`"
+          :uid="uidFor(item)"
+          :item="item"
+          :fields="fieldsForItem(item)"
+          :index="index"
+          :error-prefix="errorPrefix(index)"
+          :parent-errors="parentErrors"
+          :languages="form.languages"
+          :current-lang="form.currentLang.value"
+          :readonly="readonly ?? false"
+          :registry="form.registry"
+          :preview-label="attrs.previewLabel"
+          :default-expanded="globalExpanded"
+          :allow-duplicate="attrs.allowDuplicate"
+          :repeater-descriptor="descriptor"
+          :total-items="items.length"
+          :selected="isSelected(uidFor(item))"
+          :selection-mode="selectionMode"
+          @update:item="updateItem(index, $event)"
+          @delete="deleteItem(index)"
+          @duplicate="duplicateItem(index)"
+          @move-up="moveUp(index)"
+          @move-down="moveDown(index)"
+          @move-to="moveTo(index, $event)"
+          @toggle-select="toggleSelect(uidFor(item), $event)"
+        />
+      </template>
+    </ClientOnly>
+
+    <!-- ── Empty state ─────────────────────────────────────────────────────── -->
+    <div
+      v-if="items.length === 0"
+      class="rounded border border-dashed border-gray-300 py-8 text-center text-sm text-gray-400"
+    >
+      {{ t("mapo.repeater.empty") }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.slide-down-enter-active,.slide-down-leave-active{display:grid;transition:grid-template-rows .25s ease,opacity .2s ease}.slide-down-enter-from,.slide-down-leave-to{grid-template-rows:0fr;opacity:0}.slide-down-enter-to,.slide-down-leave-from{grid-template-rows:1fr;opacity:1}
+</style>

package/dist/runtime/components/fields/MapoRepeater.vue.d.ts

@@ -0,0 +1,16 @@
+import type { RepeaterDescriptor } from "../../types/index.js";
+type __VLS_Props = {
+    modelValue: unknown;
+    descriptor: RepeaterDescriptor;
+    errors?: string[];
+    readonly?: boolean;
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=MapoRepeater.vue.d.ts.map

package/dist/runtime/components/fields/MapoRepeater.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapoRepeater.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoRepeater.vue"],"names":[],"mappings":"AAujBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAI/D,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAgjCF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}