sveltekit-ui 1.0.7 → 1.0.8

package/dist/Components/ContentInput/index.svelte.js

@@ -134,6 +134,7 @@ export function create_content_input_manager(config) {
         selector_id: element?.selector_id,
         val: element?.attributes,
         on_finish: (input) => {
+          console.log("on_finish_attribute", input)
           attributes_input.popover_manager.close()
           set_element_attributes(element?.selector_id, input)
         },

package/dist/Components/Location/index.svelte

@@ -2,19 +2,10 @@
   import Popover from "../Popover/index.svelte"
   import Button from "../Button/index.svelte"
   import LoadingWheel from "../LoadingWheel/index.svelte"
-  import { onMount } from "svelte"
   import { slide } from "svelte/transition"
+  import intersection_observer from "../../actions/intersection_observer.js"
 
   let { manager } = $props()
-
-  onMount(() => {
-    setTimeout(() => {
-      if (typeof manager?.initialize_map == "function" && !manager?.is_popover) {
-        console.log("on_mount_initialize_map")
-        manager.initialize_map()
-      }
-    }, 20)
-  })
 </script>
 
 {#snippet location_content()}
@@ -25,7 +16,10 @@
         <p>Loading Map</p>
       </div>
     </div>
-    <div id="map_{manager?.id}" class="map" style="height: {manager?.height}; max-width: 100%;"></div>
+    <div use:intersection_observer onappeared={() => manager?.initialize_map()}></div>
+    {#key manager?.id}
+      <div id="map_{manager?.id}" class="map" style="height: {manager?.height}; max-width: 100%;"></div>
+    {/key}
   </div>
 {/snippet}
 

package/dist/Components/Location/index.svelte.js

@@ -61,8 +61,6 @@ export function create_location_manager(config) {
   }
 
   async function initialize_map() {
-    console.log("initialize_map")
-    map = null
     if (!browser) {
       console.log("browser is not defined")
       return
@@ -78,10 +76,9 @@ export function create_location_manager(config) {
       return
     }
     const { center_lat, center_lng, lat_span, lng_span } = get_map_region(val)
-    const initial_region = new mapkit.CoordinateRegion(
-      new mapkit.Coordinate(center_lat, center_lng),
-      new mapkit.CoordinateSpan(lat_span, lng_span)
-    )
+    const center = new mapkit.Coordinate(center_lat, center_lng)
+    const span = new mapkit.CoordinateSpan(lat_span, lng_span)
+    const initial_region = new mapkit.CoordinateRegion(center, span)
     if (!map) {
       map = new mapkit.Map(`map_${id}`)
     }
@@ -177,14 +174,14 @@ export function create_location_manager(config) {
         return
       }
       const route = response.routes[0]
-      if (route.poly_line) {
-        route.poly_line.style = new mapkit.Style({
+      if (route.polyline) {
+        route.polyline.style = new mapkit.Style({
           strokeColor: leg.stroke_color || "#0000ff",
           lineWidth: leg.line_width || 3,
         })
-        map.addOverlay(route.poly_line)
+        map.addOverlay(route.polyline)
       } else {
-        console.warn("no poly_line found for route", route)
+        console.warn("no polyline found for route", route)
       }
     })
   }
@@ -214,8 +211,8 @@ export function create_location_manager(config) {
       strokeColor: leg.stroke_color || "oklch(70% 0.3 210)",
       lineWidth: leg.line_width || 3,
     })
-    const poly_line = new mapkit.PolylineOverlay(coords, { style: overlay_style })
-    map.addOverlay(poly_line)
+    const polyline = new mapkit.PolylineOverlay(coords, { style: overlay_style })
+    map.addOverlay(polyline)
   }
 
   function set_val(input) {
@@ -232,7 +229,6 @@ export function create_location_manager(config) {
       target_height: config?.height ?? 440,
       target_width: config?.width ?? 600,
       on_open: () => {
-        console.log("on_open")
         if (!map) {
           setTimeout(() => {
             initialize_map()

package/dist/Components/LocationInput/index.svelte

@@ -5,18 +5,10 @@
   import Checkbox from "../Checkbox/index.svelte"
   import Dropdown from "../Dropdown/index.svelte"
   import LoadingWheel from "../LoadingWheel/index.svelte"
-  import { onMount } from "svelte"
   import { slide } from "svelte/transition"
+  import intersection_observer from "../../actions/intersection_observer.js"
 
   let { manager } = $props()
-
-  onMount(() => {
-    if (!manager?.is_popover) {
-      // setTimeout(() => {
-      manager?.initialize_map()
-      // }, 100)
-    }
-  })
 </script>
 
 {#snippet location_content()}
@@ -27,7 +19,10 @@
         <p>Loading Map</p>
       </div>
     </div>
-    <div id="map_{manager?.id}" class="map" style="height: {manager?.height}; max-width: 100%;"></div>
+    <div use:intersection_observer onappeared={() => manager?.initialize_map()}></div>
+    {#key manager?.id}
+      <div id="map_{manager?.id}" class="map" style="height: {manager?.height}; max-width: 100%;"></div>
+    {/key}
     {#if manager?.is_show_search}
       <div class="search_container">
         <div class="text_input">

package/dist/Components/LocationInput/index.svelte.js

@@ -586,7 +586,6 @@ export function create_location_input_manager(config) {
   }
 
   function prepare_search_options(is_autocomplete = false) {
-    console.log("prepare_search_options")
     const result_type = Array.isArray(search_filter_result_type_dropdown_manager?.val)
       ? search_filter_result_type_dropdown_manager?.val
       : []
@@ -638,7 +637,6 @@ export function create_location_input_manager(config) {
         )
       )
     }
-    console.log("zzz", options)
     return options
   }
 
@@ -648,7 +646,6 @@ export function create_location_input_manager(config) {
       return
     }
     const autocomplete_search_options = prepare_search_options(true)
-    console.log("autocomplete_search_options", autocomplete_search_options)
     const place_search = new mapkit.Search()
     place_search.autocomplete(
       input,
@@ -660,7 +657,6 @@ export function create_location_input_manager(config) {
         if (result.results.length > 0) {
           let suggestions_prepped_loc = []
           if (Array.isArray(result.results)) {
-            console.log("suggestions_results", result.results)
             for (let suggestion of result.results) {
               let choose_selection_button_manager = $state(null)
               if (suggestion?.id) {
@@ -673,7 +669,7 @@ export function create_location_input_manager(config) {
                 choose_selection_button_manager = create_button_manager({
                   support_icon: "magnifying_glass",
                   is_uniform: true,
-                  on_click: () => search_for(`${suggestion?.display_lines?.[0]}`),
+                  on_click: () => search_for(`${suggestion?.displayLines?.[0]}`),
                 })
               }
               suggestions_prepped_loc.push({
@@ -691,7 +687,10 @@ export function create_location_input_manager(config) {
 
   function search_for(input) {
     const search_options = prepare_search_options()
-    console.log("search_options", search_options)
+    if (!map) {
+      console.log("map not found")
+      return
+    }
     map.removeAnnotations(map.annotations)
     const place_search = new mapkit.Search()
     place_search.search(
@@ -752,6 +751,16 @@ export function create_location_input_manager(config) {
     }
   }
 
+  function reset_map() {
+    // const el = document.getElementById(`map_${id}`)
+    // if (el) {
+    //   // optional: remove child nodes or clear old map if you want
+    //   // el.innerHTML = ''
+    //   map = new mapkit.Map(`map_${id}`)
+    // }
+    initialize_map()
+  }
+
   function finish() {
     popover_manager.close()
     if (typeof config?.on_finish == "function") {
@@ -951,5 +960,6 @@ export function create_location_input_manager(config) {
     },
     initialize_map,
     set_val,
+    reset_map,
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-ui",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "A SvelteKit UI component library for building modern web applications",
   "license": "MIT",
   "type": "module",
@@ -26,12 +26,12 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-vercel": "^5.7.2",
-    "@sveltejs/kit": "^2.22.3",
+    "@sveltejs/kit": "^2.22.5",
     "@sveltejs/package": "^2.3.12",
-    "@sveltejs/vite-plugin-svelte": "^5.1.0",
+    "@sveltejs/vite-plugin-svelte": "^6.0.0",
     "@vercel/analytics": "^1.5.0",
     "typescript": "^5.8.3",
-    "vite": "^7.0.3"
+    "vite": "^7.0.4"
   },
   "homepage": "https://www.sveltekit-ui.com",
   "keywords": [

package/src/lib/Components/ContentInput/index.svelte.js

@@ -134,6 +134,7 @@ export function create_content_input_manager(config) {
         selector_id: element?.selector_id,
         val: element?.attributes,
         on_finish: (input) => {
+          console.log("on_finish_attribute", input)
           attributes_input.popover_manager.close()
           set_element_attributes(element?.selector_id, input)
         },

package/src/lib/Components/Location/index.svelte

@@ -2,19 +2,10 @@
   import Popover from "$lib/Components/Popover/index.svelte"
   import Button from "$lib/Components/Button/index.svelte"
   import LoadingWheel from "$lib/Components/LoadingWheel/index.svelte"
-  import { onMount } from "svelte"
   import { slide } from "svelte/transition"
+  import intersection_observer from "$lib/actions/intersection_observer.js"
 
   let { manager } = $props()
-
-  onMount(() => {
-    setTimeout(() => {
-      if (typeof manager?.initialize_map == "function" && !manager?.is_popover) {
-        console.log("on_mount_initialize_map")
-        manager.initialize_map()
-      }
-    }, 20)
-  })
 </script>
 
 {#snippet location_content()}
@@ -25,7 +16,10 @@
         <p>Loading Map</p>
       </div>
     </div>
-    <div id="map_{manager?.id}" class="map" style="height: {manager?.height}; max-width: 100%;"></div>
+    <div use:intersection_observer onappeared={() => manager?.initialize_map()}></div>
+    {#key manager?.id}
+      <div id="map_{manager?.id}" class="map" style="height: {manager?.height}; max-width: 100%;"></div>
+    {/key}
   </div>
 {/snippet}
 

package/src/lib/Components/Location/index.svelte.js

@@ -61,8 +61,6 @@ export function create_location_manager(config) {
   }
 
   async function initialize_map() {
-    console.log("initialize_map")
-    map = null
     if (!browser) {
       console.log("browser is not defined")
       return
@@ -78,10 +76,9 @@ export function create_location_manager(config) {
       return
     }
     const { center_lat, center_lng, lat_span, lng_span } = get_map_region(val)
-    const initial_region = new mapkit.CoordinateRegion(
-      new mapkit.Coordinate(center_lat, center_lng),
-      new mapkit.CoordinateSpan(lat_span, lng_span)
-    )
+    const center = new mapkit.Coordinate(center_lat, center_lng)
+    const span = new mapkit.CoordinateSpan(lat_span, lng_span)
+    const initial_region = new mapkit.CoordinateRegion(center, span)
     if (!map) {
       map = new mapkit.Map(`map_${id}`)
     }
@@ -177,14 +174,14 @@ export function create_location_manager(config) {
         return
       }
       const route = response.routes[0]
-      if (route.poly_line) {
-        route.poly_line.style = new mapkit.Style({
+      if (route.polyline) {
+        route.polyline.style = new mapkit.Style({
           strokeColor: leg.stroke_color || "#0000ff",
           lineWidth: leg.line_width || 3,
         })
-        map.addOverlay(route.poly_line)
+        map.addOverlay(route.polyline)
       } else {
-        console.warn("no poly_line found for route", route)
+        console.warn("no polyline found for route", route)
       }
     })
   }
@@ -214,8 +211,8 @@ export function create_location_manager(config) {
       strokeColor: leg.stroke_color || "oklch(70% 0.3 210)",
       lineWidth: leg.line_width || 3,
     })
-    const poly_line = new mapkit.PolylineOverlay(coords, { style: overlay_style })
-    map.addOverlay(poly_line)
+    const polyline = new mapkit.PolylineOverlay(coords, { style: overlay_style })
+    map.addOverlay(polyline)
   }
 
   function set_val(input) {
@@ -232,7 +229,6 @@ export function create_location_manager(config) {
       target_height: config?.height ?? 440,
       target_width: config?.width ?? 600,
       on_open: () => {
-        console.log("on_open")
         if (!map) {
           setTimeout(() => {
             initialize_map()

package/src/lib/Components/LocationInput/index.svelte

@@ -5,18 +5,10 @@
   import Checkbox from "$lib/Components/Checkbox/index.svelte"
   import Dropdown from "$lib/Components/Dropdown/index.svelte"
   import LoadingWheel from "$lib/Components/LoadingWheel/index.svelte"
-  import { onMount } from "svelte"
   import { slide } from "svelte/transition"
+  import intersection_observer from "$lib/actions/intersection_observer.js"
 
   let { manager } = $props()
-
-  onMount(() => {
-    if (!manager?.is_popover) {
-      // setTimeout(() => {
-      manager?.initialize_map()
-      // }, 100)
-    }
-  })
 </script>
 
 {#snippet location_content()}
@@ -27,7 +19,10 @@
         <p>Loading Map</p>
       </div>
     </div>
-    <div id="map_{manager?.id}" class="map" style="height: {manager?.height}; max-width: 100%;"></div>
+    <div use:intersection_observer onappeared={() => manager?.initialize_map()}></div>
+    {#key manager?.id}
+      <div id="map_{manager?.id}" class="map" style="height: {manager?.height}; max-width: 100%;"></div>
+    {/key}
     {#if manager?.is_show_search}
       <div class="search_container">
         <div class="text_input">

package/src/lib/Components/LocationInput/index.svelte.js

@@ -586,7 +586,6 @@ export function create_location_input_manager(config) {
   }
 
   function prepare_search_options(is_autocomplete = false) {
-    console.log("prepare_search_options")
     const result_type = Array.isArray(search_filter_result_type_dropdown_manager?.val)
       ? search_filter_result_type_dropdown_manager?.val
       : []
@@ -638,7 +637,6 @@ export function create_location_input_manager(config) {
         )
       )
     }
-    console.log("zzz", options)
     return options
   }
 
@@ -648,7 +646,6 @@ export function create_location_input_manager(config) {
       return
     }
     const autocomplete_search_options = prepare_search_options(true)
-    console.log("autocomplete_search_options", autocomplete_search_options)
     const place_search = new mapkit.Search()
     place_search.autocomplete(
       input,
@@ -660,7 +657,6 @@ export function create_location_input_manager(config) {
         if (result.results.length > 0) {
           let suggestions_prepped_loc = []
           if (Array.isArray(result.results)) {
-            console.log("suggestions_results", result.results)
             for (let suggestion of result.results) {
               let choose_selection_button_manager = $state(null)
               if (suggestion?.id) {
@@ -673,7 +669,7 @@ export function create_location_input_manager(config) {
                 choose_selection_button_manager = create_button_manager({
                   support_icon: "magnifying_glass",
                   is_uniform: true,
-                  on_click: () => search_for(`${suggestion?.display_lines?.[0]}`),
+                  on_click: () => search_for(`${suggestion?.displayLines?.[0]}`),
                 })
               }
               suggestions_prepped_loc.push({
@@ -691,7 +687,10 @@ export function create_location_input_manager(config) {
 
   function search_for(input) {
     const search_options = prepare_search_options()
-    console.log("search_options", search_options)
+    if (!map) {
+      console.log("map not found")
+      return
+    }
     map.removeAnnotations(map.annotations)
     const place_search = new mapkit.Search()
     place_search.search(
@@ -752,6 +751,16 @@ export function create_location_input_manager(config) {
     }
   }
 
+  function reset_map() {
+    // const el = document.getElementById(`map_${id}`)
+    // if (el) {
+    //   // optional: remove child nodes or clear old map if you want
+    //   // el.innerHTML = ''
+    //   map = new mapkit.Map(`map_${id}`)
+    // }
+    initialize_map()
+  }
+
   function finish() {
     popover_manager.close()
     if (typeof config?.on_finish == "function") {
@@ -951,5 +960,6 @@ export function create_location_input_manager(config) {
     },
     initialize_map,
     set_val,
+    reset_map,
   }
 }