sveltekit-ui 1.0.0

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

@@ -0,0 +1,362 @@
+import { get_user_interface, set_closurable } from "$lib/client/index.js"
+import { create_alert_manager } from "$lib/Components/Alert/index.svelte.js"
+import { create_checkbox_manager } from "$lib/Components/Checkbox/index.svelte.js"
+import { create_confetti_manager } from "$lib/Components/Confetti/index.svelte.js"
+import { goto } from "$app/navigation"
+
+export function create_layout_manager(config) {
+  let is_dark_theme = $state(true)
+  let full_nav_links = $state([])
+  let nav_bar_links = $state([])
+  let is_show_hamburger = $state(true)
+  let is_all_nav_bar_hidden = $state(false)
+  let is_nav_bar_hidable_from_scroll = $state(false)
+  let is_nav_bar_hidden_from_scroll = $state(false)
+  let is_full_nav_prevented = $state(false)
+  let is_full_nav_toggled_on = $state(false)
+  let border_radius = $state(0)
+  let nav_margin_x = $state(0)
+  let nav_margin_top = $state(0)
+  let nav_margin_bottom = $state(0)
+  let nav_main_padding_y = $state(0.5)
+  let nav_main_padding_x = $state(1)
+  let breakpoint_splits = $state({
+    sm: 480,
+    md: 768,
+    lg: 1024,
+    xl: 1200,
+  })
+
+  let is_navigating = $state(false)
+  let nav_bar_height = $state(null)
+  let screen_width = $state(null)
+  let screen_height = $state(null)
+  let nav_link_clicks = $state(0)
+  let is_at_top = $state(true)
+  let is_at_bottom = $state(true)
+  let hovered_route_name = $state(null)
+  let full_nav_height = $state(null)
+
+  let alert_manager = $state(null)
+  let dark_theme_manager = $state(null)
+  let confetti_manager = $state(null)
+
+  let is_full_nav_large = $derived(full_nav_height && full_nav_height / available_content_height > 0.5)
+  let is_nav_bar_shown = $derived(
+    !(is_all_nav_bar_hidden || (is_nav_bar_hidden_from_scroll && is_nav_bar_hidable_from_scroll))
+  )
+  let shown_nav_bar_height = $derived(is_nav_bar_shown && nav_bar_height ? nav_bar_height : null)
+  let is_full_nav_shown = $derived(is_full_nav_prevented || !is_full_nav_toggled_on ? false : is_nav_bar_shown)
+  let available_content_height = $derived(screen_height - shown_nav_bar_height)
+
+  let breakpoints = $derived(get_breakpoints(screen_width))
+  function get_breakpoints(wid) {
+    if (wid < breakpoint_splits?.sm) {
+      return {
+        sm: true,
+        md: false,
+        lg: false,
+        xl: false,
+        xxl: false,
+        md_and_up: false,
+        md_and_down: true,
+        lg_and_up: false,
+        lg_and_down: true,
+      }
+    } else if (wid < breakpoint_splits?.md) {
+      return {
+        sm: false,
+        md: true,
+        lg: false,
+        xl: false,
+        xxl: false,
+        md_and_up: false,
+        md_and_down: true,
+        lg_and_up: false,
+        lg_and_down: true,
+      }
+    } else if (wid < breakpoint_splits?.lg) {
+      return {
+        sm: false,
+        md: false,
+        lg: true,
+        xl: false,
+        xxl: false,
+        md_and_up: true,
+        md_and_down: true,
+        lg_and_up: false,
+        lg_and_down: true,
+      }
+    } else if (wid < breakpoint_splits?.xl) {
+      return {
+        sm: false,
+        md: false,
+        lg: false,
+        xl: true,
+        xxl: false,
+        md_and_up: true,
+        md_and_down: false,
+        lg_and_up: true,
+        lg_and_down: true,
+      }
+    } else {
+      return {
+        sm: false,
+        md: false,
+        lg: false,
+        xl: false,
+        xxl: true,
+        md_and_up: true,
+        md_and_down: false,
+        lg_and_up: true,
+        lg_and_down: false,
+      }
+    }
+  }
+
+  let favicons = $derived(set_closurable(config?.favicons, null))
+
+  function set_base_theme() {
+    const theme =
+      document.documentElement.dataset.theme ??
+      (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
+    is_dark_theme = theme == "dark"
+    dark_theme_manager.set_val_from_bool(is_dark_theme)
+  }
+
+  function set_is_at_top(input) {
+    is_at_top = !!input
+  }
+  function set_is_at_bottom(input) {
+    is_at_bottom = !!input
+  }
+
+  function set_theme(is_dark_theme_input) {
+    is_dark_theme = is_dark_theme_input
+    dark_theme_manager.set_val_from_bool(is_dark_theme)
+    const theme = is_dark_theme ? "dark" : "light"
+    document.documentElement.dataset.theme = theme
+    document.cookie = `theme=${theme};max-age=31536000;path"/"`
+  }
+
+  function set_full_nav_height(input) {
+    full_nav_height = !!input
+  }
+
+  function set_is_full_nav_toggled_on(input) {
+    is_full_nav_toggled_on = !!input
+  }
+
+  function set_screen_height(input) {
+    screen_height = input
+  }
+
+  function set_screen_width(input) {
+    screen_width = input
+  }
+
+  function set_nav_bar_height(input) {
+    nav_bar_height = input
+  }
+
+  function set_is_navigating(input) {
+    is_navigating = !!input
+  }
+
+  function handle_scrollend() {
+    const scroll_top = window.scrollY
+    const window_height = window.innerHeight
+    const total_height = document.documentElement.scrollHeight
+    const is_at_top = scroll_top === 0
+    const is_at_bottom = scroll_top + window_height >= total_height
+    if (is_at_top) {
+      set_is_at_top(true)
+    }
+    if (is_at_bottom) {
+      set_is_at_bottom(true)
+    }
+  }
+
+  function handle_scroll() {
+    set_is_at_top(false)
+    set_is_at_bottom(false)
+  }
+
+  function to_home() {
+    goto("/")
+    nav_link_clicks += 1
+  }
+
+  let client_interface = $derived(screen_width && screen_height ? get_user_interface() : null)
+
+  function goto_path(slashed_path) {
+    is_full_nav_toggled_on = false
+    goto(slashed_path)
+  }
+
+  function init(config) {
+    is_dark_theme = config?.is_dark_theme ?? true
+    full_nav_links = config?.full_nav_links ?? []
+    nav_bar_links = config?.nav_bar_links ?? []
+    is_show_hamburger = config?.is_show_hamburger ?? true
+    is_all_nav_bar_hidden = config?.is_all_nav_bar_hidden ?? false
+    is_nav_bar_hidable_from_scroll = config?.is_nav_bar_hidable_from_scroll ?? false
+    is_nav_bar_hidden_from_scroll = config?.is_nav_bar_hidden_from_scroll ?? false
+    is_full_nav_prevented = config?.is_full_nav_prevented ?? false
+    is_full_nav_toggled_on = config?.is_full_nav_toggled_on ?? false
+    border_radius = config?.border_radius ?? 0
+    nav_margin_x = config?.nav_margin_x ?? 0
+    nav_margin_top = config?.nav_margin_top ?? 0
+    nav_margin_bottom = config?.nav_margin_bottom ?? 0
+    nav_main_padding_y = config?.nav_main_padding_y ?? 0.5
+    nav_main_padding_x = config?.nav_main_padding_x ?? 1
+    breakpoint_splits = config?.breakpoint_splits ?? {
+      sm: 480,
+      md: 768,
+      lg: 1024,
+      xl: 1200,
+    }
+    alert_manager = create_alert_manager()
+    dark_theme_manager = create_checkbox_manager({
+      val: is_dark_theme,
+      type: "dark_theme",
+      mt: 0.1,
+      mb: 0.1,
+      ml: 0.1,
+      mr: 0.1,
+      on_change: (input) => set_theme(input),
+    })
+    confetti_manager = create_confetti_manager({
+      type: "full",
+      amount: () => screen_width,
+      x_range: () => [-Math.floor((screen_width + 100) * 0.06), Math.floor((screen_width + 100) * 0.06)],
+      y_range: [-2, 0],
+      time_range: 4000,
+      duration: 2500,
+      fall_distance: "100vh",
+    })
+  }
+
+  init(config)
+
+  return {
+    get is_dark_theme() {
+      return is_dark_theme
+    },
+    get favicons() {
+      return favicons
+    },
+    get breakpoints() {
+      return breakpoints
+    },
+    get full_nav_links() {
+      return full_nav_links
+    },
+    get nav_bar_links() {
+      return nav_bar_links
+    },
+    get is_show_hamburger() {
+      return is_show_hamburger
+    },
+    get screen_width() {
+      return screen_width
+    },
+    get screen_height() {
+      return screen_height
+    },
+    get is_all_nav_bar_hidden() {
+      return is_all_nav_bar_hidden
+    },
+    get shown_nav_bar_height() {
+      return shown_nav_bar_height
+    },
+    get is_nav_bar_hidable_from_scroll() {
+      return is_nav_bar_hidable_from_scroll
+    },
+    get is_nav_bar_hidden_from_scroll() {
+      return is_nav_bar_hidden_from_scroll
+    },
+    get is_nav_bar_shown() {
+      return is_nav_bar_shown
+    },
+    get is_full_nav_prevented() {
+      return is_full_nav_prevented
+    },
+    get is_full_nav_toggled_on() {
+      return is_full_nav_toggled_on
+    },
+    get is_full_nav_shown() {
+      return is_full_nav_shown
+    },
+    get nav_bar_height() {
+      return nav_bar_height
+    },
+    get border_radius() {
+      return border_radius
+    },
+    get nav_margin_x() {
+      return nav_margin_x
+    },
+    get nav_margin_top() {
+      return nav_margin_top
+    },
+    get nav_margin_bottom() {
+      return nav_margin_bottom
+    },
+    get nav_main_padding_y() {
+      return nav_main_padding_y
+    },
+    get nav_main_padding_x() {
+      return nav_main_padding_x
+    },
+    get is_navigating() {
+      return is_navigating
+    },
+    get client_interface() {
+      return client_interface
+    },
+    get breakpoint_splits() {
+      return breakpoint_splits
+    },
+    get nav_link_clicks() {
+      return nav_link_clicks
+    },
+    get is_at_top() {
+      return is_at_top
+    },
+    get is_at_bottom() {
+      return is_at_bottom
+    },
+    get hovered_route_name() {
+      return hovered_route_name
+    },
+    get available_content_height() {
+      return available_content_height
+    },
+    get full_nav_height() {
+      return full_nav_height
+    },
+    get is_full_nav_large() {
+      return is_full_nav_large
+    },
+    get confetti_manager() {
+      return confetti_manager
+    },
+    handle_scroll,
+    handle_scrollend,
+    set_base_theme,
+    set_is_at_top,
+    set_is_at_bottom,
+    set_is_full_nav_toggled_on,
+    set_full_nav_height,
+    set_screen_height,
+    set_screen_width,
+    set_nav_bar_height,
+    set_is_navigating,
+    set_theme,
+    to_home,
+    goto_path,
+    alert_manager,
+    dark_theme_manager,
+  }
+}

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

@@ -0,0 +1,46 @@
+<script>
+  import Button from "$lib/Components/Button/index.svelte"
+  import Popover from "$lib/Components/Popover/index.svelte"
+  import Qr from "$lib/Components/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} />
+      </div>
+    {/snippet}
+  </Popover>
+</span>

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

@@ -0,0 +1,126 @@
+import { create_popover_manager } from "$lib/Components/Popover/index.svelte.js"
+import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+import { create_qr_manager } from "$lib/Components/Qr/index.svelte.js"
+import { copy_to_clipboard, create_unique_id, set_closurable, set_closurable_color } from "$lib/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 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() {
+    if (is_internal_link) {
+      goto(href)
+    } else {
+      if (typeof config?.on_goto_external_link == "function") {
+        config?.on_goto_external_link(href)
+      }
+      window.open(href, "_blank", "noopener,noreferrer")
+      // Object.assign(document.createElement("a"), {
+      //   target: "_blank",
+      //   href: href,
+      // }).click()
+    }
+  }
+
+  function init(config) {
+    popover_manager = create_popover_manager({
+      type: "dropdown",
+      header: "Link Preview",
+      target_width: 400,
+      target_height: 400,
+      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(),
+    })
+    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 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/src/lib/Components/LoadingSuccessDiv/index.svelte

@@ -0,0 +1,51 @@
+<script>
+  import LoadingWheel from "$lib/Components/LoadingWheel/index.svelte"
+  import SuccessCheck from "$lib/Components/SuccessCheck/index.svelte"
+  import ErrorX from "$lib/Components/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/src/lib/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/src/lib/Components/Location/index.svelte

@@ -0,0 +1,85 @@
+<script>
+  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"
+
+  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()}
+  <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 id="map_{manager?.id}" class="map" style="height: {manager?.height}; max-width: 100%;"></div>
+  </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>