sveltekit-ui 1.1.15 → 1.1.17

package/dist/Components/Layout/NavBar/FullNav/index.svelte

@@ -1,52 +0,0 @@
-<script>
-  import { fly } from "svelte/transition"
-
-  let { manager, full_nav } = $props()
-</script>
-
-{#if manager?.is_full_nav_shown}
-  <div
-    role="button"
-    tabindex="0"
-    class="underlay"
-    onwheel={(e) => e.stopPropagation()}
-    ontouchmove={(e) => e.stopPropagation()}
-    onclick={() => manager.set_is_full_nav_toggled_on(false)}
-    onkeydown={(event) => {
-      if (event.key === "Enter" || event.key === " ") {
-        manager.set_is_full_nav_toggled_on(false)
-      }
-    }}
-  ></div>
-  <div
-    class="container"
-    style="height: {manager?.available_content_height + 1}px; top: {manager?.shown_nav_bar_height - 1}px;"
-    in:fly={{ duration: 300, x: -255, opacity: "100%" }}
-    out:fly={{ duration: 300, x: -255, opacity: "100%" }}
-  >
-    {#if full_nav}
-      {@render full_nav()}
-    {/if}
-  </div>
-{/if}
-
-<style>
-  .underlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: var(--shadow8);
-  }
-  .container {
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    width: 25rem;
-    z-index: 9;
-    border-right: 1px solid var(--shadow7-t);
-    background-color: var(--bg);
-    overflow: scroll;
-  }
-</style>

package/dist/Components/Layout/NavBar/NavGuts/index.svelte

@@ -1,87 +0,0 @@
-<script>
-  import Hamburger from "../../../Hamburger/index.svelte"
-
-  let { manager, logo, nav_bar_extra } = $props()
-
-  let nav_bar_width = $state(null)
-  let logo_width = $state(null)
-  let nav_links_width = $state(null)
-  let nav_hamburger_width = $state(null)
-
-  // let is_room_for_links = $derived(
-  //   nav_bar_width && logo_width && nav_links_width && nav_hamburger_width
-  //     ? nav_bar_width - logo_width - nav_links_width - nav_hamburger_width > 0
-  //     : true
-  // )
-  // class:hide_but_maintain_width={!is_room_for_links}
-</script>
-
-<div class="container" bind:offsetWidth={nav_bar_width}>
-  <div style="display: flex; align-items: center; gap: 1rem;">
-    {#if manager?.is_show_hamburger}
-      <div class="nav_hamburger" bind:offsetWidth={nav_hamburger_width}>
-        <Hamburger
-          val={manager.is_full_nav_toggled_on}
-          on_change={(input) => manager.set_is_full_nav_toggled_on(input)}
-        />
-      </div>
-    {/if}
-    <div
-      class="logo_container"
-      role="button"
-      tabindex="0"
-      onclick={() => manager.to_home()}
-      onkeydown={(event) => {
-        if (event.key === "Enter" || event.key === " ") {
-          manager.to_home()
-        }
-      }}
-      bind:offsetWidth={logo_width}
-    >
-      {#if logo}
-        {@render logo()}
-      {/if}
-    </div>
-  </div>
-  <div class="nav_links" bind:offsetWidth={nav_links_width}>
-    {#if nav_bar_extra}
-      {@render nav_bar_extra()}
-    {/if}
-  </div>
-</div>
-
-<style>
-  .container {
-    display: flex;
-    flex: 1;
-    overflow: scroll;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .logo_container {
-    display: flex;
-    align-self: center;
-    flex: 0;
-    padding: 0.1rem;
-    margin-right: 0.5rem;
-    min-height: 3rem;
-    min-width: fit-content;
-  }
-  .nav_links {
-    display: flex;
-    align-items: center;
-  }
-  /* .hide_but_maintain_width {
-    position: fixed;
-    top: 0;
-    left: 0;
-    visibility: hidden;
-    z-index: -1;
-  } */
-  .nav_hamburger {
-    display: flex;
-    align-items: center;
-    height: 3rem;
-    margin-left: 0.1rem;
-  }
-</style>

package/dist/Components/Layout/NavBar/index.svelte

@@ -1,72 +0,0 @@
-<script>
-  import NavGuts from "./NavGuts/index.svelte"
-  import FullNav from "./FullNav/index.svelte"
-
-  let { manager, logo, sub_bar, nav_bar_extra, full_nav } = $props()
-
-  let nav_bar_height_loc = $state(null)
-  $effect(() => {
-    manager.set_nav_bar_height(nav_bar_height_loc)
-  })
-</script>
-
-<div class="container">
-  <div class="navbar" bind:offsetHeight={nav_bar_height_loc}>
-    <div
-      class="navbar_body"
-      class:floated_nav={!manager?.is_at_top}
-      class:below_top={!manager?.is_at_top || manager?.is_full_nav_toggled_on}
-      class:flat_card={manager?.is_at_top}
-      style="--br: {manager?.border_radius}rem; --nav_margin_x: {manager?.nav_margin_x}rem; --nav_margin_top: {manager?.nav_margin_top}rem; --nav_margin_bottom: {manager?.nav_margin_bottom}rem;"
-    >
-      <div
-        class="mainbar"
-        style="--nav_main_padding_x: {manager?.nav_main_padding_x}rem; --nav_main_padding_y: {manager?.nav_main_padding_y}rem;"
-      >
-        <NavGuts {manager} {logo} {nav_bar_extra} />
-      </div>
-      {#if sub_bar}
-        {@render sub_bar()}
-      {/if}
-    </div>
-  </div>
-  <div class="full_nav">
-    <FullNav {manager} {full_nav} />
-  </div>
-</div>
-
-<style>
-  .container {
-    position: sticky;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 10;
-    display: flex;
-    flex-direction: column;
-    flex: 0;
-  }
-  .navbar_body {
-    border-radius: var(--br);
-    margin: var(--nav_margin_top) var(--nav_margin_x) var(--nav_margin_bottom) var(--nav_margin_x);
-    min-height: 5rem;
-    padding: 0;
-    background-color: var(--bg);
-    border-bottom: 1px solid transparent;
-  }
-  .mainbar {
-    display: flex;
-    flex: 1;
-    padding: var(--nav_main_padding_y) var(--nav_main_padding_x);
-  }
-  .below_top {
-    border-bottom: 1px solid var(--shadow7-t);
-  }
-  /* .floated_nav {
-		box-shadow: 0 0.1rem 1rem var(--g2);
-	} */
-  .full_nav {
-    position: relative;
-    z-index: -1;
-  }
-</style>

package/dist/Components/Layout/index.svelte

@@ -1,149 +0,0 @@
-<script>
-  import NavBar from "./NavBar/index.svelte"
-  import Alert from "../Alert/index.svelte"
-  import Confetti from "../Confetti/index.svelte"
-  import Button from "../Button/index.svelte"
-  import LoadingWheel from "../LoadingWheel/index.svelte"
-  import { goto, beforeNavigate, afterNavigate } from "$app/navigation"
-  import { innerHeight } from "svelte/reactivity/window"
-  import { fade } from "svelte/transition"
-  import { onMount } from "svelte"
-
-  let { manager, content, nav_bar_logo, nav_bar_extra, full_nav, sub_bar, additional } = $props()
-
-  beforeNavigate(() => {
-    manager.set_is_navigating(true)
-  })
-  afterNavigate(() => {
-    manager.set_is_navigating(false)
-  })
-
-  $effect(() => {
-    manager.set_base_theme()
-  })
-
-  let screen_width_loc = $state(null)
-  $effect(() => {
-    manager.set_screen_width(screen_width_loc)
-  })
-
-  $effect(() => {
-    manager.set_screen_height(innerHeight.current)
-  })
-
-  onMount(() => {
-    if (manager?.favicons?.favicon_inactive) {
-      function update_favicon() {
-        const favicon = document.querySelector('link[rel="icon"][sizes="any"]')
-        const path = document.hidden ? manager?.favicons?.favicon_inactive : manager?.favicons?.favicon
-        favicon?.setAttribute("href", path)
-      }
-      document.addEventListener("visibilitychange", update_favicon)
-      return () => {
-        document.removeEventListener("visibilitychange", update_favicon)
-      }
-    }
-  })
-</script>
-
-<svelte:window
-  onscrollend={() => manager?.handle_scrollend()}
-  onscroll={() => manager?.handle_scroll()}
-  onkeypress={(e) => {
-    if ((e?.metaKey || e?.ctrlKey) && e?.key && e?.key.toLowerCase() === "b") {
-      event.preventDefault()
-      manager.set_is_full_nav_toggled_on(!manager?.is_full_nav_toggled_on)
-    }
-  }}
-/>
-
-{#if manager}
-  <div class="container" bind:clientWidth={screen_width_loc}>
-    {#if !manager?.is_all_nav_bar_hidden}
-      <NavBar {manager} logo={nav_bar_logo} {nav_bar_extra} {full_nav} {sub_bar} />
-    {/if}
-    <div class="fill_screen">
-      {#if content}
-        {@render content()}
-      {/if}
-    </div>
-    <div class="additional">
-      {#if additional}
-        {@render additional()}
-      {/if}
-    </div>
-    <Alert manager={manager.alert_manager} />
-    <Confetti manager={manager?.confetti_manager} />
-  </div>
-  {#if manager?.is_navigating}
-    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-    <div
-      transition:fade={{ delay: 0, duration: 500 }}
-      onscroll={(e) => {
-        e.preventDefault()
-        e.stopPropagation()
-      }}
-      onclick={(e) => {
-        e.preventDefault()
-        e.stopPropagation()
-      }}
-      onkeypress={(e) => {
-        e.preventDefault()
-        e.stopPropagation()
-      }}
-      onpointerdown={(e) => {
-        e.preventDefault()
-        e.stopPropagation()
-      }}
-      ontouchdown={(e) => {
-        e.preventDefault()
-        e.stopPropagation()
-      }}
-      class="loader_container"
-      role="status"
-      aria-live="polite"
-      aria-label="Loading, please wait"
-    >
-      <div class="loader_inner_container">
-        <LoadingWheel sw={0.7} />
-      </div>
-    </div>
-  {/if}
-{/if}
-
-<style>
-  .container {
-    min-height: 100vh;
-    min-height: 100dvh;
-    display: flex;
-    flex-direction: column;
-  }
-  .fill_screen {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    overflow-x: scroll;
-    /* overflow-x: hidden; tbd mainly cause image display bg blur */
-  }
-  .additional {
-    position: absolute;
-  }
-  .loader_container {
-    position: fixed;
-    left: 0;
-    top: 0;
-    right: 0;
-    height: 0;
-    min-height: 100vh;
-    min-height: 100dvh;
-    background: var(--shadow3-t);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 14;
-  }
-  .loader_inner_container {
-    height: 14rem;
-    width: 14rem;
-  }
-</style>

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

@@ -1,360 +0,0 @@
-import { get_user_interface, set_closurable } from "../../client/index.js"
-import { create_alert_manager } from "../Alert/index.svelte.js"
-import { create_checkbox_manager } from "../Checkbox/index.svelte.js"
-import { create_confetti_manager } from "../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,
-  }
-}