sveltekit-ui 1.1.17 → 1.1.18

package/dist/Components/Link/index.svelte

@@ -0,0 +1,47 @@
+<script>
+  import Button from "../Button/index.svelte"
+  import Popover from "../Popover/index.svelte"
+  import Qr from "../Qr/index.svelte"
+
+  let { manager, children } = $props()
+</script>
+
+<span style="display: inline-flex;">
+  <a
+    id={`link_${manager?.id}`}
+    href={manager?.href}
+    onclick={(e) => manager?.handle_a_click(e)}
+    style="display: flex; flex-wrap: wrap; {manager?.text_color ? `color: ${manager?.text_color};` : ''}"
+  >
+    {#if manager?.display_text}
+      {manager?.display_text}
+    {:else if children}
+      {@render children()}
+    {/if}
+    {#if manager?.display_text && !manager?.is_show_preview}
+      <Button manager={manager?.inline_goto_link_button_manager} />
+    {/if}
+  </a>
+  <Popover manager={manager?.popover_manager}>
+    {#snippet content()}
+      {#if manager?.display_text}
+        {manager?.display_text}
+      {:else if children}
+        {@render children()}
+      {/if}
+      <p
+        style="font-size: 1.2rem; background-color: var(--shadow2-t); border-radius: 1rem; padding: 1rem; margin-bottom: 1rem;"
+      >
+        {manager?.href}
+      </p>
+      <Qr manager={manager?.qr_manager} />
+    {/snippet}
+    {#snippet footer()}
+      <div style="display: flex; flex-direction: column; gap: .5rem;">
+        <Button manager={manager?.copy_link_button_manager} />
+        <Button manager={manager?.goto_link_button_manager} />
+        <Button manager={manager?.goto_link_same_tab_button_manager} />
+      </div>
+    {/snippet}
+  </Popover>
+</span>

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

@@ -0,0 +1,136 @@
+import { create_popover_manager } from "../Popover/index.svelte.js"
+import { create_button_manager } from "../Button/index.svelte.js"
+import { create_qr_manager } from "../Qr/index.svelte.js"
+import { copy_to_clipboard, create_unique_id, set_closurable, set_closurable_color } from "../../client/index.js"
+import { goto } from "$app/navigation"
+// import { page } from "$app/state"
+
+export function create_link_manager(config) {
+  const id = config?.id ?? create_unique_id(null, 20)
+  let popover_manager = $state(null)
+  let copy_link_button_manager = $state(null)
+  let goto_link_button_manager = $state(null)
+  let goto_link_same_tab_button_manager = $state(null)
+  let inline_goto_link_button_manager = $state(null)
+  let qr_manager = $state(null)
+
+  let href = $derived(set_closurable(config?.href, null))
+  let display_text = $derived(set_closurable(config?.display_text, null))
+  let text_color = $derived(set_closurable_color(config?.text_color, null))
+  let is_internal_link = $derived(href && href.startsWith("/"))
+  // let is_internal_link = $derived(new URL(href, page?.url?.origin)?.origin === page?.url?.origin)
+  let is_show_preview = $derived(set_closurable(config?.is_show_preview, !is_internal_link))
+
+  function handle_a_click(e) {
+    console.log("handle_a_click", e)
+    e.preventDefault()
+    if (is_internal_link) {
+      goto(href)
+    } else if (is_show_preview) {
+      popover_manager.open()
+    } else {
+      open_link()
+    }
+  }
+
+  function open_link(is_open_same_tab = false) {
+    if (is_internal_link) {
+      goto(href)
+    } else {
+      if (typeof config?.on_goto_external_link == "function") {
+        config?.on_goto_external_link(href)
+      }
+      if (is_open_same_tab) {
+        window.location.href = href
+      } else {
+        window.open(href, "_blank", "noopener,noreferrer")
+      }
+    }
+  }
+
+  function init(config) {
+    popover_manager = create_popover_manager({
+      type: "dropdown",
+      header: "Link Preview",
+      target_width: 400,
+      target_height: 460,
+      anchor_id: () => `link_${id}`,
+    })
+    copy_link_button_manager = create_button_manager({
+      type: "outlined",
+      text: "Copy Link",
+      is_success_animation: true,
+      support_icon: "clipboard",
+      text_align: "left",
+      on_click: () => copy_to_clipboard(href),
+    })
+    goto_link_button_manager = create_button_manager({
+      support_icon: "link",
+      text: "Open Link In New Tab",
+      text_align: "left",
+      on_click: () => open_link(),
+    })
+    goto_link_same_tab_button_manager = create_button_manager({
+      support_icon: "link_internal",
+      text: "Open Link In Same Tab",
+      text_align: "left",
+      on_click: () => open_link(true),
+    })
+    inline_goto_link_button_manager = create_button_manager({
+      type: "soft",
+      min_height: 2,
+      ml: 0.5,
+      border_radius: 0.5,
+      pt: 0,
+      is_uniform: true,
+      support_icon: () => (is_internal_link ? "link_internnal" : "link"),
+      on_click: () => open_link(),
+    })
+    qr_manager = create_qr_manager({
+      data: href,
+    })
+  }
+  init(config)
+
+  return {
+    id,
+    get popover_manager() {
+      return popover_manager
+    },
+    get is_internal_link() {
+      return is_internal_link
+    },
+    get is_show_preview() {
+      return is_show_preview
+    },
+    get href() {
+      return href
+    },
+    get copy_link_button_manager() {
+      return copy_link_button_manager
+    },
+    get goto_link_button_manager() {
+      return goto_link_button_manager
+    },
+    get goto_link_same_tab_button_manager() {
+      return goto_link_same_tab_button_manager
+    },
+    get inline_goto_link_button_manager() {
+      return inline_goto_link_button_manager
+    },
+    get href() {
+      return href
+    },
+    get display_text() {
+      return display_text
+    },
+    get text_color() {
+      return text_color
+    },
+    get qr_manager() {
+      return qr_manager
+    },
+    handle_a_click,
+    open_link,
+  }
+}

package/dist/Components/LoadingSuccessDiv/index.svelte

@@ -0,0 +1,51 @@
+<script>
+  import LoadingWheel from "../LoadingWheel/index.svelte"
+  import SuccessCheck from "../SuccessCheck/index.svelte"
+  import ErrorX from "../ErrorX/index.svelte"
+
+  let { message, show_screen = "loading", size = 8, ml = 1, mr = 1, mt = 1, mb = 1, flex = 1 } = $props()
+</script>
+
+<div
+  class="success_container"
+  style="margin-left: {ml}rem; margin-right: {mr}rem; margin-top: {mt}rem; margin-bottom: {mb}rem; 
+  flex: {flex};"
+>
+  <div class="check_container">
+    <div class="icon_frame" style="--size: {size}rem;">
+      {#if show_screen === "loading"}
+        <LoadingWheel />
+      {:else if show_screen === "success"}
+        <SuccessCheck color="var(--success-t)" />
+      {:else if show_screen === "error"}
+        <ErrorX />
+      {/if}
+    </div>
+  </div>
+  {#if message}
+    <h3 class="message">{message}</h3>
+  {/if}
+</div>
+
+<style>
+  .success_container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+  }
+  .check_container {
+    display: flex;
+    justify-content: center;
+  }
+  .icon_frame {
+    width: var(--size);
+    height: var(--size);
+  }
+  .message {
+    color: var(--g4-t);
+    margin-top: 2rem;
+    font-weight: 500;
+    font-size: 2rem;
+  }
+</style>

package/dist/Components/LoadingWheel/index.svelte

@@ -0,0 +1,38 @@
+<script>
+  let { size = null, sw = 0.3, color = "var(--shadow8-t)", color_bg = "var(--tint8-t)" } = $props()
+</script>
+
+<div class="container">
+  <div
+    class="loader"
+    style="--sw: {sw}rem; --color: {color}; --color_bg: {color_bg}; width: {size ? size + 'rem' : '100%'};"
+  ></div>
+</div>
+
+<style>
+  .container {
+    aspect-ratio: 1;
+    max-height: 100%;
+    margin: auto;
+    display: grid;
+    place-items: center;
+  }
+  .loader {
+    margin: auto;
+    aspect-ratio: 1;
+    border: var(--sw) solid var(--color_bg);
+    border-top: var(--sw) solid var(--color);
+    border-radius: 50%;
+    height: 100%;
+    animation: spinner 1s ease infinite;
+    box-sizing: border-box;
+  }
+  @keyframes spinner {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+</style>

package/dist/Components/Location/index.svelte

@@ -0,0 +1,79 @@
+<script>
+  import Popover from "../Popover/index.svelte"
+  import Button from "../Button/index.svelte"
+  import LoadingWheel from "../LoadingWheel/index.svelte"
+  import { slide } from "svelte/transition"
+  import { intersection_observer } from "../../actions/index.js"
+
+  let { manager } = $props()
+</script>
+
+{#snippet location_content()}
+  <div class="container" style="height: {manager?.height}; width: {manager?.width}; max-width: 100%;">
+    <div class="loading_container" style="height: {manager?.height}; width: {manager?.width}; max-width: 100%;">
+      <div style="display: flex; flex-direction: column; gap: 1rem; justify-content: center; align-items: center;">
+        <LoadingWheel size={8} />
+        <p>Loading Map</p>
+      </div>
+    </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}
+
+{#if manager?.is_popover}
+  {#if manager?.is_inline}
+    <div style="display: flex; gap: .5rem;">
+      <p>{manager?.val?.name}</p>
+      <Button manager={manager?.toggle_popover_manager} />
+    </div>
+  {/if}
+  <Popover manager={manager?.popover_manager}>
+    {#snippet content()}
+      {@render location_content()}
+    {/snippet}
+  </Popover>
+{:else}
+  {@render location_content()}
+{/if}
+
+<style>
+  @-webkit-keyframes scale-and-fadein {
+    0% {
+      -webkit-transform: scale(0.2);
+      opacity: 0;
+    }
+    100% {
+      -webkit-transform: scale(1);
+      opacity: 1;
+    }
+  }
+  @keyframes scale-and-fadein {
+    0% {
+      transform: scale(0.2);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+  .container {
+    display: grid;
+    grid-template-areas: "stack";
+    animation: scale-and-fadein 0.3s;
+  }
+  .map {
+    grid-area: stack;
+    border-radius: 1rem;
+    overflow: hidden;
+  }
+  .loading_container {
+    grid-area: stack;
+    place-content: center;
+    background-color: var(--shadow2-t);
+    border-radius: 1rem;
+  }
+</style>

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

@@ -0,0 +1,288 @@
+import { create_unique_id, set_closurable } from "../../client/index.js"
+import { create_popover_manager } from "../Popover/index.svelte.js"
+import { create_button_manager } from "../Button/index.svelte.js"
+import { browser } from "$app/environment"
+
+export function create_location_manager(config) {
+  const id = create_unique_id(null, 20)
+
+  let popover_manager = $state(null)
+  let toggle_popover_manager = $state(null)
+
+  let height = $derived(
+    set_closurable(config?.height, null) ? `${set_closurable(config?.height, null)}rem` : "min(40rem, 50vh)"
+  )
+  let width = $derived(
+    set_closurable(config?.width, null) ? `${set_closurable(config?.width, null)}rem` : "clamp(60rem, 80vw, 100%)"
+  )
+  let is_popover = $derived(set_closurable(config?.is_popover, false))
+  let mapkit_js_token = $derived(set_closurable(config?.mapkit_js_token, null))
+  let is_dark_color_scheme = $derived(set_closurable(config?.is_dark_color_scheme, true))
+  let is_inline = $derived(set_closurable(config?.is_inline ?? config?.is_popover, true))
+
+  let val = $state(null)
+  let map = $state(null)
+
+  let mapkit_load_promise = $state(null)
+  async function load_mapkit_script() {
+    if (!mapkit_load_promise) {
+      mapkit_load_promise = new Promise(async (resolve, reject) => {
+        if (browser && !document?.querySelector('script[src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.core.js"]')) {
+          window.init_map_kit = () => {
+            delete window.init_map_kit
+            window.init_map_kit_loaded = true
+            resolve()
+          }
+          const script = document.createElement("script")
+          script.src = "https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.core.js"
+          script.crossOrigin = "anonymous"
+          script.async = true
+          script.setAttribute("data-callback", "init_map_kit")
+          script.setAttribute("data-libraries", "full-map,services")
+          script.setAttribute("data-token", mapkit_js_token)
+          document.head.appendChild(script)
+        } else {
+          let attempt_count = 0
+          const max_attempts = 50
+          const check_init_mapkit = setInterval(() => {
+            attempt_count++
+            if (window.init_map_kit_loaded) {
+              clearInterval(check_init_mapkit)
+              resolve()
+            } else if (attempt_count > max_attempts) {
+              clearInterval(check_init_mapkit)
+              reject(new Error("MapKit initialization timeout"))
+            }
+          }, 100)
+        }
+      })
+    }
+    return mapkit_load_promise
+  }
+
+  async function initialize_map() {
+    if (!browser) {
+      console.log("browser is not defined")
+      return
+    }
+    await load_mapkit_script()
+    if (!window.mapkit) {
+      console.log("mapkit is not defined")
+      return
+    }
+    const map_div = document?.querySelector(`#map_${id}`)
+    if (!map_div) {
+      console.log("map div not found")
+      return
+    }
+    const { center_lat, center_lng, lat_span, lng_span } = get_map_region(val)
+    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}`)
+    }
+    map.annotations = []
+    map.region = initial_region
+    map.colorScheme = is_dark_color_scheme ? "dark" : "light"
+    add_map_vals(val)
+  }
+
+  function get_map_region(val) {
+    let center_lat, center_lng, lat_span, lng_span
+    if (Array.isArray(val) && val.length > 0) {
+      const lats = val.map((item) => item?.latitude).filter((latitude) => latitude != null)
+      const lngs = val.map((item) => item?.longitude).filter((longitude) => longitude != null)
+      if (lats.length && lngs.length) {
+        const min_lat = Math.min(...lats)
+        const max_lat = Math.max(...lats)
+        const min_lng = Math.min(...lngs)
+        const max_lng = Math.max(...lngs)
+        center_lat = (min_lat + max_lat) / 2
+        center_lng = (min_lng + max_lng) / 2
+        lat_span = (max_lat - min_lat) * 1.2 || 0.1
+        lng_span = (max_lng - min_lng) * 1.2 || 0.1
+      } else {
+        center_lat = 37.3316850890998
+        center_lng = -122.030067374026
+        lat_span = 0.1
+        lng_span = 0.1
+      }
+    } else {
+      center_lat = val?.latitude ?? 37.3316850890998
+      center_lng = val?.longitude ?? -122.030067374026
+      lat_span = 0.1
+      lng_span = 0.1
+    }
+    return { center_lat, center_lng, lat_span, lng_span }
+  }
+
+  function add_map_val(val_item, is_selected = false) {
+    if (val_item?.type === "route") {
+      if (val_item.from && val_item.to) {
+        if (val_item?.method == "path") {
+          add_custom_route(map, val_item)
+        } else {
+          add_detailed_route(map, {
+            from: new mapkit.Coordinate(val_item.from.latitude, val_item.from.longitude),
+            to: new mapkit.Coordinate(val_item.to.latitude, val_item.to.longitude),
+            stroke_color: val_item.stroke_color || "#000",
+            line_width: val_item.line_width || 3,
+          })
+        }
+      }
+    } else if (val_item?.place_id) {
+      const lookup = new mapkit.PlaceLookup()
+      lookup.getPlace(val_item.place_id, (error, place) => {
+        if (error) {
+          console.error("place lookup error:", error)
+          return
+        }
+        const options = { title: val_item.name || place.formattedAddress }
+        const marker = new mapkit.PlaceAnnotation(place, options)
+        map.addAnnotation(marker)
+        marker.selectionAccessory = new mapkit.PlaceSelectionAccessory()
+        if (is_selected) {
+          marker.selected = true
+        }
+      })
+    } else if (val_item?.name && val_item?.latitude && val_item?.longitude) {
+      const coord = new mapkit.Coordinate(val_item.latitude, val_item.longitude)
+      const marker = new mapkit.MarkerAnnotation(coord, { title: val_item.name })
+      map.addAnnotation(marker)
+    }
+  }
+
+  function add_map_vals(map_val) {
+    if (Array.isArray(map_val) && map_val.length > 0) {
+      map_val.forEach((item) => add_map_val(item, false))
+    } else if (map_val) {
+      add_map_val(map_val, true)
+    }
+  }
+
+  function add_detailed_route(map, leg) {
+    const directions = new mapkit.Directions()
+    const request = {
+      origin: leg.from,
+      destination: leg.to,
+      transportType: mapkit.Directions.Transport.Automobile,
+    }
+    directions.route(request, (error, response) => {
+      if (error) {
+        console.error("directions error for leg", leg, error)
+        return
+      }
+      const route = response.routes[0]
+      if (route.polyline) {
+        route.polyline.style = new mapkit.Style({
+          strokeColor: leg.stroke_color || "#0000ff",
+          lineWidth: leg.line_width || 3,
+        })
+        map.addOverlay(route.polyline)
+      } else {
+        console.warn("no polyline found for route", route)
+      }
+    })
+  }
+
+  function add_custom_route(map, leg) {
+    const coords = []
+    if (leg.from && typeof leg.from === "object" && leg.from.latitude != null && leg.from.longitude != null) {
+      coords.push(new mapkit.Coordinate(leg.from.latitude, leg.from.longitude))
+    } else {
+      console.warn("invalid 'from' coordinate", leg.from)
+    }
+    if (Array.isArray(leg.way_points)) {
+      leg.way_points.forEach((wp) => {
+        if (wp && typeof wp === "object" && wp.latitude != null && wp.longitude != null) {
+          coords.push(new mapkit.Coordinate(wp.latitude, wp.longitude))
+        } else {
+          console.warn("invalid waypoint object: missing coordinates", wp)
+        }
+      })
+    }
+    if (leg.to && typeof leg.to === "object" && leg.to.latitude != null && leg.to.longitude != null) {
+      coords.push(new mapkit.Coordinate(leg.to.latitude, leg.to.longitude))
+    } else {
+      console.warn("invalid 'to' coordinate", leg.to)
+    }
+    const overlay_style = new mapkit.Style({
+      strokeColor: leg.stroke_color || "oklch(70% 0.3 210)",
+      lineWidth: leg.line_width || 3,
+    })
+    const polyline = new mapkit.PolylineOverlay(coords, { style: overlay_style })
+    map.addOverlay(polyline)
+  }
+
+  function set_val(input) {
+    val = input
+    if (map) {
+      initialize_map()
+    }
+  }
+
+  function init(config) {
+    val = config?.val
+    popover_manager = create_popover_manager({
+      type: "center",
+      target_height: config?.height ?? 440,
+      target_width: config?.width ?? 600,
+      on_open: () => {
+        if (!map) {
+          setTimeout(() => {
+            initialize_map()
+          }, 20)
+        }
+      },
+    })
+    toggle_popover_manager = create_button_manager({
+      type: "soft",
+      support_icon: "pinpoint",
+      is_uniform: true,
+      min_height: 2.2,
+      icon_size: 1.4,
+      icon_sw: 40,
+      border_radius: 0.5,
+      popover_target: () => `popover_${popover_manager?.id}`,
+    })
+    if (!is_popover) {
+      initialize_map()
+    }
+  }
+
+  init(config)
+
+  return {
+    id,
+    get val() {
+      return val
+    },
+    get map() {
+      return map
+    },
+    get is_popover() {
+      return is_popover
+    },
+    get is_inline() {
+      return is_inline
+    },
+    get popover_manager() {
+      return popover_manager
+    },
+    get toggle_popover_manager() {
+      return toggle_popover_manager
+    },
+    get height() {
+      return height
+    },
+    get width() {
+      return width
+    },
+    get mapkit_js_token() {
+      return mapkit_js_token
+    },
+    initialize_map,
+    set_val,
+  }
+}