@abraca/nuxt 0.3.0 → 1.6.0

package/dist/runtime/components/editor/ALocationPickerPopover.vue

@@ -0,0 +1,232 @@
+<script setup>
+import { ref, watch, nextTick, onUnmounted } from "vue";
+import mapboxgl from "mapbox-gl";
+import { useRuntimeConfig } from "#imports";
+if (typeof window !== "undefined") {
+  import("mapbox-gl/dist/mapbox-gl.css");
+}
+const props = defineProps({
+  latValue: { type: Number, required: false },
+  lngValue: { type: Number, required: false },
+  open: { type: Boolean, required: true }
+});
+const emit = defineEmits(["update:lat", "update:lng", "update:open", "clear"]);
+mapboxgl.accessToken = useRuntimeConfig().public.mapboxAccessToken;
+const mapContainer = ref(null);
+let map = null;
+let marker = null;
+let resizeObserver = null;
+let initTimer = null;
+const searchQuery = ref("");
+const searchResults = ref([]);
+const searching = ref(false);
+function hasCoords() {
+  return props.latValue !== void 0 && props.lngValue !== void 0;
+}
+function cancelInit() {
+  if (initTimer !== null) {
+    clearTimeout(initTimer);
+    initTimer = null;
+  }
+}
+function destroyMap() {
+  cancelInit();
+  resizeObserver?.disconnect();
+  resizeObserver = null;
+  map?.remove();
+  map = null;
+  marker = null;
+}
+function initMap() {
+  const el = mapContainer.value;
+  if (!el || map) return;
+  const center = hasCoords() ? [props.lngValue, props.latValue] : [0, 20];
+  const zoom = hasCoords() ? 10 : 1;
+  map = new mapboxgl.Map({
+    container: el,
+    style: "mapbox://styles/mapbox/streets-v12",
+    center,
+    zoom,
+    attributionControl: false
+  });
+  map.addControl(new mapboxgl.NavigationControl({ showCompass: false }), "bottom-right");
+  map.on("load", () => {
+    if (hasCoords()) placeMarker(props.lngValue, props.latValue);
+  });
+  map.on("click", (e) => {
+    placeMarker(e.lngLat.lng, e.lngLat.lat);
+    emit("update:lng", e.lngLat.lng);
+    emit("update:lat", e.lngLat.lat);
+  });
+  resizeObserver = new ResizeObserver(() => map?.resize());
+  resizeObserver.observe(el);
+}
+function ensureMap(attempt = 0) {
+  cancelInit();
+  const el = mapContainer.value;
+  if (!el || !props.open || map) return;
+  if (el.clientWidth > 0) {
+    initMap();
+    return;
+  }
+  if (attempt < 50) initTimer = setTimeout(() => ensureMap(attempt + 1), 20);
+}
+function placeMarker(lng, lat) {
+  if (!map) return;
+  if (marker) {
+    marker.setLngLat([lng, lat]);
+  } else {
+    marker = new mapboxgl.Marker({ draggable: true, color: "#6366f1" }).setLngLat([lng, lat]).addTo(map);
+    marker.on("dragend", () => {
+      const pos = marker.getLngLat();
+      emit("update:lng", pos.lng);
+      emit("update:lat", pos.lat);
+    });
+  }
+}
+watch(() => props.open, (isOpen) => {
+  destroyMap();
+  if (!isOpen) return;
+  nextTick(() => ensureMap());
+});
+watch(mapContainer, (el) => {
+  if (!el) {
+    destroyMap();
+    return;
+  }
+  if (props.open) ensureMap();
+}, { flush: "post" });
+onUnmounted(destroyMap);
+let searchTimeout = null;
+watch(searchQuery, (q) => {
+  if (searchTimeout) clearTimeout(searchTimeout);
+  if (!q.trim()) {
+    searchResults.value = [];
+    return;
+  }
+  searchTimeout = setTimeout(() => doSearch(q), 350);
+});
+async function doSearch(q) {
+  if (!q.trim()) return;
+  searching.value = true;
+  try {
+    const url = `https://api.mapbox.com/search/geocode/v6/forward?q=${encodeURIComponent(q)}&limit=5&access_token=${mapboxgl.accessToken}`;
+    const res = await fetch(url);
+    const data = await res.json();
+    searchResults.value = (data.features ?? []).map((f) => ({
+      label: f.properties?.full_address ?? f.properties?.name ?? "",
+      lng: f.geometry.coordinates[0],
+      lat: f.geometry.coordinates[1]
+    }));
+  } catch {
+    searchResults.value = [];
+  } finally {
+    searching.value = false;
+  }
+}
+function selectResult(r) {
+  searchQuery.value = "";
+  searchResults.value = [];
+  placeMarker(r.lng, r.lat);
+  map?.flyTo({ center: [r.lng, r.lat], zoom: 13 });
+  emit("update:lng", r.lng);
+  emit("update:lat", r.lat);
+}
+function clearLocation() {
+  marker?.remove();
+  marker = null;
+  emit("clear");
+}
+const locating = ref(false);
+function useMyPosition() {
+  if (!navigator.geolocation) return;
+  locating.value = true;
+  navigator.geolocation.getCurrentPosition(
+    (pos) => {
+      const { latitude: lat, longitude: lng } = pos.coords;
+      placeMarker(lng, lat);
+      map?.flyTo({ center: [lng, lat], zoom: 13 });
+      emit("update:lng", lng);
+      emit("update:lat", lat);
+      locating.value = false;
+    },
+    () => {
+      locating.value = false;
+    },
+    { enableHighAccuracy: true, timeout: 1e4 }
+  );
+}
+</script>
+
+<template>
+  <UPopover
+    :open="open"
+    :content="{ align: 'start', side: 'bottom' }"
+    @update:open="$emit('update:open', $event)"
+  >
+    <slot />
+    <template #content>
+      <div class="flex flex-col gap-2 p-2 w-80">
+        <!-- Search -->
+        <div class="relative">
+          <UInput
+            v-model="searchQuery"
+            size="sm"
+            icon="i-lucide-search"
+            placeholder="Search location..."
+            :loading="searching"
+            class="w-full"
+            @mousedown.stop
+          />
+          <div
+            v-if="searchResults.length"
+            class="absolute top-full left-0 right-0 mt-1 z-50 rounded-md border border-(--ui-border) bg-(--ui-bg) shadow-lg overflow-hidden"
+          >
+            <button
+              v-for="r in searchResults"
+              :key="r.label"
+              class="w-full text-left px-3 py-2 text-sm hover:bg-(--ui-bg-elevated) truncate"
+              @mousedown.prevent="selectResult(r)"
+            >
+              {{ r.label }}
+            </button>
+          </div>
+        </div>
+
+        <!-- Map -->
+        <div
+          ref="mapContainer"
+          class="w-full rounded-md overflow-hidden"
+          style="height: 220px;"
+        />
+
+        <!-- Footer -->
+        <div class="flex items-center justify-between">
+          <p class="text-xs text-(--ui-text-muted)">
+            Click map or drag pin to set location
+          </p>
+          <div class="flex items-center gap-1">
+            <UButton
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              icon="i-lucide-locate"
+              label="My Position"
+              :loading="locating"
+              @click="useMyPosition"
+            />
+            <UButton
+              v-if="hasCoords()"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              icon="i-lucide-x"
+              label="Clear"
+              @click="clearLocation"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+  </UPopover>
+</template>

package/dist/runtime/components/editor/ALocationPickerPopover.vue.d.ts

@@ -0,0 +1,28 @@
+type __VLS_Props = {
+    latValue?: number;
+    lngValue?: number;
+    open: boolean;
+};
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: () => any;
+    "update:open": (args_0: boolean) => any;
+    "update:lat": (args_0: number) => any;
+    "update:lng": (args_0: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClear?: (() => any) | undefined;
+    "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
+    "onUpdate:lat"?: ((args_0: number) => any) | undefined;
+    "onUpdate:lng"?: ((args_0: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/renderers/ACalendarRenderer.d.vue.ts

@@ -3,6 +3,8 @@ import type { AbracadabraLocale } from '../../locale.js';
 type __VLS_Props = RendererBaseProps & {
     labels?: Partial<AbracadabraLocale['renderers']['calendar']>;
     editable?: boolean;
+    weekStartDay?: string;
+    showWeekNumbers?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     connectedUsers: import("vue").ComputedRef<{