@stubber/form-fields 2.1.0 → 2.1.2

package/dist/form-fields/sub/map-field.svelte

@@ -5,10 +5,24 @@ export const map_field_param_spec = {
   spec: {
     fields: {
       hide_geolocate_button: {
-        fieldtype: "checkbox"
+        fieldtype: "checkbox",
+        without_value_details: true
       },
       auto_set_location: {
-        fieldtype: "checkbox"
+        fieldtype: "checkbox",
+        without_value_details: true
+      },
+      address_mode: {
+        fieldtype: "select",
+        without_value_details: true,
+        params: {
+          options: [
+            { label: "None", value: "none" },
+            { label: "Hidden", value: "hidden" },
+            { label: "Readonly", value: "readonly" },
+            { label: "Editable", value: "editable" }
+          ]
+        }
       }
     }
   }
@@ -17,10 +31,14 @@ export const map_field_param_spec = {
 
 <script>import { controls, Geocoder, Map, Marker } from "@beyonk/svelte-mapbox";
 import FieldLabel from "../FieldLabel.svelte";
+import { mapValues, omit } from "lodash-es";
+import { Input } from "@stubber/ui/input";
+import { Label } from "@stubber/ui/label";
 const { GeolocateControl } = controls;
 export let fieldStore;
 const initial_value = $fieldStore.value;
 let params = $fieldStore.params;
+let reverse_geocode_enabled = params?.address_mode && params?.address_mode !== "none";
 let hide_geolocate_button = params?.hide_geolocate_button || false;
 let auto_set_location = params?.auto_set_location || false;
 let dependencies = $fieldStore?.formDependencies;
@@ -58,6 +76,39 @@ function setValueCoords(lat, lng, force = false) {
       lng: lng ?? null,
       latlng: `${lat ?? null},${lng ?? null}`
     };
+    reverse_geocode(lat, lng);
+  }
+}
+async function reverse_geocode(lat, lng) {
+  if (!mapboxAccessToken || !reverse_geocode_enabled) return;
+  try {
+    const response = await fetch(
+      `https://api.mapbox.com/search/geocode/v6/reverse?longitude=${lng}&latitude=${lat}&access_token=${mapboxAccessToken}`
+    );
+    const data = await response.json();
+    if (data?.features?.length > 0) {
+      const feature = data?.features[0];
+      if (feature?.properties?.feature_type === "address") {
+        const full_address = feature?.properties?.full_address;
+        const cleaned_context = mapValues(
+          feature?.properties?.context,
+          (v) => omit(v, ["mapbox_id", "wikidata_id", "alternate"])
+        );
+        const address = {};
+        if (full_address) {
+          address.full_address = full_address;
+        }
+        if (cleaned_context) {
+          address["details"] = cleaned_context;
+        }
+        $fieldStore.value = {
+          ...$fieldStore.value,
+          address
+        };
+      }
+    }
+  } catch (error) {
+    console.error("reverse geocode error", error);
   }
 }
 function resetValues() {
@@ -79,22 +130,34 @@ function handle_geolocate(o) {
   const coords = o?.detail?.coords || {};
   setValueCoords(coords.latitude, coords.longitude);
 }
+function handle_address_change(e) {
+  const new_address = e?.target?.value || "";
+  if (new_address && $fieldStore.value.address.full_address !== new_address) {
+    $fieldStore.value = {
+      ...$fieldStore.value,
+      address: {
+        ...$fieldStore.value.address,
+        full_address: new_address
+      }
+    };
+  }
+}
 </script>
 
 <FieldLabel {fieldStore} />
 {#if mapboxAccessToken}
-  <div class="flex flex-col w-full">
+  <div class="flex w-full flex-col">
     <div>
       <button
         type="button"
         on:click={resetValues}
-        class="text-sm text-surface-300 hover:underline hover:text-surface-500"
+        class="text-sm text-surface-300 hover:text-surface-500 hover:underline"
       >
         <i class="fa-regular fa-undo" /> Reset
       </button>
     </div>
     <div class="relative mt-2 rounded-md">
-      <div class="w-full h-72">
+      <div class="h-72 w-full">
         <Map
           bind:center
           zoom={14}
@@ -114,31 +177,60 @@ function handle_geolocate(o) {
             <GeolocateControl position="top-right" on:geolocate={handle_geolocate} />
           {/if}
           {#if browserLocation}
-            <Marker lat={browserLocation.lat} lng={browserLocation.lng}>
-              <div class="relative w-0">
-                <div
-                  class="bg-surface-0 p-4 rounded-xl rounded-bl-none shadow-2xl border absolute bottom-0 whitespace-nowrap"
-                >
-                  <i class="fa-solid fa-user text-4xl" />
-                </div>
+            <Marker
+              lat={browserLocation.lat}
+              lng={browserLocation.lng}
+              markerOptions={{ anchor: "center" }}
+            >
+              <div class="relative flex flex-col items-center">
+                <span class="fa-stack fa-2x">
+                  <i
+                    class="fa-solid fa-circle fa-stack-2x text-[1.3em] leading-[inherit] text-white"
+                  />
+                  <i class="fa-solid fa-user fa-stack-1x text-blue-600" />
+                </span>
               </div>
             </Marker>
           {/if}
           {#if $fieldStore.value?.lat && $fieldStore.value?.lng}
-            <Marker lat={$fieldStore.value.lat} lng={$fieldStore.value.lng} popup={false}>
-              <div class="relative w-0">
+            <Marker
+              lat={$fieldStore.value.lat}
+              lng={$fieldStore.value.lng}
+              popup={false}
+              markerOptions={{ anchor: "bottom" }}
+            >
+              <div class="relative flex flex-col items-center">
                 <div
-                  class="bg-surface-0 p-4 rounded-xl rounded-bl-none shadow-2xl border absolute bottom-0 whitespace-nowrap"
+                  class="rounded-xl bg-white px-2 py-1 text-sm font-medium text-slate-800 shadow-lg ring-1 ring-black/20"
                 >
-                  lat: {$fieldStore.value.lat?.toString()?.substring(0, 6)} <br />
-                  lng: {$fieldStore.value.lng?.toString()?.substring(0, 6)}
+                  <div>lat: {$fieldStore.value.lat?.toString()?.substring(0, 7)}</div>
+                  <div>lng: {$fieldStore.value.lng?.toString()?.substring(0, 7)}</div>
                 </div>
+
+                <span class="fa-stack fa-2x h-[1.5em]">
+                  <i
+                    class="fa-solid fa-location-pin fa-stack-2x text-[1.2em] leading-[inherit] text-white"
+                  />
+                  <i class="fa-solid fa-location-dot fa-stack-1x text-green-600" />
+                </span>
               </div>
             </Marker>
           {/if}
         </Map>
       </div>
     </div>
+    {#if params?.address_mode === "editable"}
+      <Input
+        type="text"
+        class="mt-1"
+        value={$fieldStore.value?.address?.full_address || ".."}
+        on:change={handle_address_change}
+      />
+    {:else if params?.address_mode === "readonly"}
+      <Label class="mt-1 block text-sm font-medium text-surface-700"
+        >{$fieldStore.value?.address?.full_address || ".."}</Label
+      >
+    {/if}
   </div>
 {/if}
 <FieldMessage {fieldStore} />

package/dist/form-fields/sub/map-field.svelte.d.ts

@@ -4,6 +4,7 @@ import { type IBaseField, type IBuiltField, type IInitialForm } from "../interfa
 export interface IMapFieldParams {
     hide_geolocate_button?: boolean;
     auto_set_location?: boolean;
+    address_mode?: "none" | "hidden" | "readonly" | "editable";
 }
 export interface IMapField extends IBaseField<IMapFieldParams> {
     fieldtype: "map";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stubber/form-fields",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "An automatic form builder based on field specifications",
   "keywords": [
     "components",