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

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

@@ -0,0 +1,99 @@
+<script setup>
+import { ref, computed, defineAsyncComponent } from "vue";
+import { useI18n } from "vue-i18n";
+const LeafletMap = defineAsyncComponent(
+  () => import("./MapoMapFieldClient.vue")
+);
+const { t } = useI18n();
+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 attrs = computed(() => props.descriptor.attrs ?? {});
+const value = computed(() => {
+  const v = props.modelValue;
+  if (!v || typeof v !== "object") return null;
+  const { lat, lng } = v;
+  return typeof lat === "number" && typeof lng === "number" ? { lat, lng } : null;
+});
+const latInput = ref(value.value?.lat?.toString() ?? "");
+const lngInput = ref(value.value?.lng?.toString() ?? "");
+function onMapClick(coords) {
+  latInput.value = coords.lat.toFixed(6);
+  lngInput.value = coords.lng.toFixed(6);
+  emit("update:modelValue", coords);
+}
+function onManualInput() {
+  const lat = parseFloat(latInput.value);
+  const lng = parseFloat(lngInput.value);
+  if (!isNaN(lat) && !isNaN(lng)) emit("update:modelValue", { lat, lng });
+}
+function clear() {
+  latInput.value = "";
+  lngInput.value = "";
+  emit("update:modelValue", null);
+}
+</script>
+
+<template>
+  <div class="mapo-map-field space-y-2">
+    <!-- Manual coordinate inputs -->
+    <div class="flex gap-2">
+      <UInput
+        v-model="latInput"
+        :placeholder="t('mapo.latitude')"
+        class="flex-1"
+        :readonly="readonly"
+        :disabled="disabled"
+        @blur="onManualInput"
+      />
+      <UInput
+        v-model="lngInput"
+        :placeholder="t('mapo.longitude')"
+        class="flex-1"
+        :readonly="readonly"
+        :disabled="disabled"
+        @blur="onManualInput"
+      />
+      <UButton
+        v-if="value && !readonly && !disabled"
+        variant="ghost"
+        color="neutral"
+        icon="i-lucide-x"
+        @click="clear"
+      />
+    </div>
+
+    <!-- Leaflet map (client only) -->
+    <ClientOnly>
+      <LeafletMap
+        :value="value"
+        :default-lat="attrs.defaultLat ?? 41.9"
+        :default-lng="attrs.defaultLng ?? 12.5"
+        :zoom="attrs.zoom ?? 6"
+        :readonly="readonly ?? false"
+        @click="onMapClick"
+      />
+      <template #fallback>
+        <div
+          class="flex h-48 items-center justify-center rounded border border-gray-200 bg-gray-50 text-sm text-gray-400"
+        >
+          Loading map...
+        </div>
+      </template>
+    </ClientOnly>
+
+    <p
+      v-for="err in errors"
+      :key="err"
+      class="text-sm text-red-500"
+      role="alert"
+    >
+      {{ err }}
+    </p>
+  </div>
+</template>

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

@@ -0,0 +1,22 @@
+import type { MapDescriptor } from "../../types/index.js";
+/** Geographic coordinates stored by the map field. */
+interface LatLng {
+    lat: number;
+    lng: number;
+}
+/** Map field with manual lat/lng inputs plus a client-only Leaflet picker. */
+type __VLS_Props = {
+    modelValue: unknown;
+    descriptor: MapDescriptor;
+    errors?: string[];
+    readonly?: boolean;
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: LatLng | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: LatLng | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=MapoMapField.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MapoMapField.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoMapField.vue"],"names":[],"mappings":"AA6HA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAS1D,sDAAsD;AACtD,UAAU,MAAM;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED,8EAA8E;AAC9E,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,aAAa,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAqOF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -0,0 +1,67 @@
+<script setup>
+import { ref, watch, onMounted, onBeforeUnmount } from "vue";
+const props = defineProps({
+  value: { type: [Object, null], required: true },
+  defaultLat: { type: Number, required: true },
+  defaultLng: { type: Number, required: true },
+  zoom: { type: Number, required: true },
+  readonly: { type: Boolean, required: true }
+});
+const emit = defineEmits(["click"]);
+const mapEl = ref(null);
+let L = null;
+let map = null;
+let marker = null;
+onMounted(async () => {
+  L = (await import("leaflet")).default;
+  await import("leaflet/dist/leaflet.css");
+  const [iconRetinaUrl, iconUrl, shadowUrl] = await Promise.all([
+    import("leaflet/dist/images/marker-icon-2x.png?url").then((m) => m.default),
+    import("leaflet/dist/images/marker-icon.png?url").then((m) => m.default),
+    import("leaflet/dist/images/marker-shadow.png?url").then((m) => m.default)
+  ]);
+  delete L.Icon.Default.prototype._getIconUrl;
+  L.Icon.Default.mergeOptions({ iconRetinaUrl, iconUrl, shadowUrl });
+  if (!mapEl.value) return;
+  map = L.map(mapEl.value).setView(
+    [
+      props.value?.lat ?? props.defaultLat,
+      props.value?.lng ?? props.defaultLng
+    ],
+    props.zoom
+  );
+  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+    attribution: '\xA9 <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+  }).addTo(map);
+  if (props.value) {
+    marker = L.marker([props.value.lat, props.value.lng]).addTo(map);
+  }
+  if (!props.readonly) {
+    map.on("click", (e) => {
+      const { lat, lng } = e.latlng;
+      if (marker) marker.setLatLng([lat, lng]);
+      else if (L && map) marker = L.marker([lat, lng]).addTo(map);
+      emit("click", { lat, lng });
+    });
+  }
+});
+watch(
+  () => props.value,
+  (val) => {
+    if (!map || !L) return;
+    if (val) {
+      if (marker) marker.setLatLng([val.lat, val.lng]);
+      else marker = L.marker([val.lat, val.lng]).addTo(map);
+      map.panTo([val.lat, val.lng]);
+    } else {
+      marker?.remove();
+      marker = null;
+    }
+  }
+);
+onBeforeUnmount(() => map?.remove());
+</script>
+
+<template>
+  <div ref="mapEl" class="h-64 w-full rounded border border-gray-200" />
+</template>

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

@@ -0,0 +1,20 @@
+/** Geographic coordinates emitted by the interactive Leaflet client. */
+interface LatLng {
+    lat: number;
+    lng: number;
+}
+type __VLS_Props = {
+    value: LatLng | null;
+    defaultLat: number;
+    defaultLng: number;
+    zoom: number;
+    readonly: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (coords: LatLng) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((coords: LatLng) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=MapoMapFieldClient.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MapoMapFieldClient.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoMapFieldClient.vue"],"names":[],"mappings":"AAiGA,wEAAwE;AACxE,UAAU,MAAM;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAuGF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -0,0 +1,91 @@
+<script setup>
+import { ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useMediaManager } from "../../composables/useMediaManager.js";
+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 { t } = useI18n();
+const dialogOpen = ref(false);
+const { MediaDialog, available } = useMediaManager();
+const current = computed(() => {
+  if (!props.modelValue) return null;
+  if (typeof props.modelValue === "object") return props.modelValue;
+  return null;
+});
+const mime = computed(() => props.descriptor.attrs?.mime);
+function onConfirm(selection) {
+  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 -->
+      <div
+        v-if="current"
+        class="flex items-center gap-3 rounded-lg border border-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="soft"
+        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/dist/runtime/components/fields/MapoMediaField.vue.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MapoMediaField.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoMediaField.vue"],"names":[],"mappings":"AA6GA,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGvE,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAClD,UAAU,EAAE,eAAe,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAgOF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -0,0 +1,110 @@
+<script setup>
+import { ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useMediaManager } from "../../composables/useMediaManager.js";
+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 { t } = useI18n();
+const dialogOpen = ref(false);
+const { MediaDialog, available } = useMediaManager();
+const current = computed(() => {
+  if (!props.modelValue) return [];
+  return props.modelValue.filter((v) => typeof v === "object");
+});
+const mime = computed(() => props.descriptor.attrs?.mime);
+function onConfirm(selection) {
+  emit("update:modelValue", Array.isArray(selection) ? selection : [selection]);
+}
+function removeItem(id) {
+  emit(
+    "update:modelValue",
+    current.value.filter((m) => m.id !== id)
+  );
+}
+const dragIndex = ref(null);
+function onDragStart(index) {
+  dragIndex.value = index;
+}
+function onDragOverItem(index) {
+  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 -->
+      <UButton
+        v-if="!readonly && !disabled"
+        icon="i-lucide-plus"
+        size="sm"
+        variant="soft"
+        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/dist/runtime/components/fields/MapoMediaM2mField.vue.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MapoMediaM2mField.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoMediaM2mField.vue"],"names":[],"mappings":"AAuIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAG1E,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,SAAS,EAAE,GAAG,MAAM,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;IACtD,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;AA+QF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -0,0 +1,15 @@
+<script setup>
+
+</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>

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

@@ -0,0 +1,4 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=MapoMediaUnavailable.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MapoMediaUnavailable.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoMediaUnavailable.vue"],"names":[],"mappings":"AAuEA,QAAA,MAAM,YAAY,+QAChB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}