sveltekit-ui 1.0.0

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

@@ -0,0 +1,117 @@
+// import { spring } from "svelte/motion"
+import { create_unique_id, set_closurable, set_closurable_color } from "$lib/client/index.js"
+
+export function create_icon_manager(config) {
+  const id = config?.id ?? create_unique_id(null, 20)
+  let deg = $state(null)
+  let color = $state(null)
+  let color_alt = $state(null)
+  let fill = $state(null)
+  let size = $state(null)
+  let sw = $state(null)
+  let ml = $derived(set_closurable(config?.ml, 0))
+  let mr = $derived(set_closurable(config?.mr, 0))
+  let mt = $derived(set_closurable(config?.mt, 0))
+  let mb = $derived(set_closurable(config?.mb, 0))
+  let sort_state = $derived(set_closurable(config?.sort_state, null))
+  let is_shimmy_infinite = $derived(set_closurable(config?.is_shimmy_infinite, false))
+  let is_shimmyable = $derived(set_closurable(config?.is_shimmyable, false))
+  let movement_stiffness = $derived(set_closurable(config?.movement_stiffness, 0.1))
+  let movement_damping = $derived(set_closurable(config?.movement_damping, 0.1))
+
+  let icon_id = $derived(set_closurable(config?.icon_id, null))
+
+  let deg_spring = $derived(deg)
+  // tbd had issue switching svelte 4 to svelte 5
+  // const deg_spring = $derived(
+  //   spring(deg, {
+  //     stiffness: movement_stiffness,
+  //     damping: movement_damping,
+  //   })
+  // )
+
+  let is_shimmying = $state(false)
+
+  function trigger_shimmy() {
+    is_shimmying = true
+    setTimeout(() => {
+      is_shimmying = false
+    }, 1000)
+  }
+
+  function set_attributes(input) {
+    // icon_id = set_closurable(input?.icon_id, null) // tbd
+    deg = set_closurable(input?.deg, deg ?? 0) // up: 0, left: 270, right: 90, down: 180
+    color = set_closurable_color(input?.color, color ?? "var(--g4-t)")
+    color_alt = set_closurable_color(input?.color_alt, color_alt ?? "var(--g12-t)")
+    fill = set_closurable(input?.fill, fill ?? "none")
+    size = set_closurable(input?.size, size ?? 2)
+    sw = set_closurable(input?.sw, sw ?? 60)
+  }
+
+  function init(config) {
+    set_attributes(config)
+  }
+
+  init(config)
+
+  return {
+    id,
+    get icon_id() {
+      return icon_id
+    },
+    get deg() {
+      return deg
+    },
+    get deg_spring() {
+      return deg_spring
+    },
+    get color() {
+      return color
+    },
+    get color_alt() {
+      return color_alt
+    },
+    get fill() {
+      return fill
+    },
+    get size() {
+      return size
+    },
+    get sw() {
+      return sw
+    },
+    get ml() {
+      return ml
+    },
+    get mr() {
+      return mr
+    },
+    get mt() {
+      return mt
+    },
+    get mb() {
+      return mb
+    },
+    get sort_state() {
+      return sort_state
+    },
+    get is_shimmy_infinite() {
+      return is_shimmy_infinite
+    },
+    get is_shimmyable() {
+      return is_shimmyable
+    },
+    get movement_stiffness() {
+      return movement_stiffness
+    },
+    get movement_damping() {
+      return movement_damping
+    },
+    get is_shimmying() {
+      return is_shimmying
+    },
+    trigger_shimmy,
+    set_attributes,
+  }
+}

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

@@ -0,0 +1,77 @@
+<script>
+  import Popover from "$lib/Components/Popover/index.svelte"
+  import Button from "$lib/Components/Button/index.svelte"
+  import Icon from "$lib/Components/Icon/index.svelte"
+  import TextInput from "$lib/Components/TextInput/index.svelte"
+  import ColorInput from "$lib/Components/ColorInput/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+{#snippet selected_icon()}
+  <div style="display: flex; gap: 1rem; align-items: center;">
+    {manager?.icon_options.find((h) => h.key == (manager?.is_icon_only ? manager?.val : manager?.val?.icon))?.name ??
+      (manager?.is_icon_only ? manager?.val : manager?.val?.icon) ??
+      "Select Icon"}
+    {#if manager?.is_icon_only ? manager?.val : manager?.val?.icon}
+      <Icon manager={manager?.selected_icon_manager} />
+    {/if}
+  </div>
+{/snippet}
+
+<Button manager={manager?.popover_toggle_button_manager}>
+  {#snippet content()}
+    {@render selected_icon()}
+  {/snippet}
+</Button>
+<Popover manager={manager?.popover_manager}>
+  {#snippet content()}
+    <div class="popover_content_container">
+      {#if manager?.val}
+        <div style="display: flex; gap: 1rem;">
+          <Button manager={manager?.clear_button_manager} />
+          {@render selected_icon()}
+        </div>
+      {/if}
+      {#if !manager?.is_icon_only}
+        <p class="label">Color</p>
+        <ColorInput manager={manager?.color_input_manager} />
+      {/if}
+      <p class="label">Icon</p>
+      {#if manager?.icon_options.length > 6}
+        <TextInput manager={manager?.search_icons_text_input_manager} />
+      {/if}
+      <div class="elements_container">
+        {#each manager?.icon_options_filtered as icon_option}
+          <Button manager={icon_option?.button_manager}>
+            {#snippet content()}
+              <div class="button_internal_container">
+                <Icon manager={icon_option?.icon_manager} />
+                <p style="font-size: 1.2rem;">{icon_option?.name}</p>
+              </div>
+            {/snippet}
+          </Button>
+        {/each}
+      </div>
+    </div>
+  {/snippet}
+  {#snippet footer()}
+    <Button manager={manager?.finish_button_manager} />
+  {/snippet}
+</Popover>
+
+<style>
+  .elements_container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(clamp(20%, 8rem, 100%), 1fr));
+  }
+  .button_internal_container {
+    line-height: 3rem;
+    height: 5rem;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    align-items: center;
+    justify-content: space-between;
+  }
+</style>

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

@@ -0,0 +1,260 @@
+import { create_text_input_manager } from "$lib/Components/TextInput/index.svelte.js"
+import { create_color_input_manager } from "$lib/Components/ColorInput/index.svelte.js"
+import { create_popover_manager } from "$lib/Components/Popover/index.svelte.js"
+import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+import { create_icon_manager } from "$lib/Components/Icon/index.svelte.js"
+import { deep_copy } from "$lib/client/index.js"
+
+export function create_icon_input_manager(config) {
+  let val = $state(null)
+  let is_icon_only = $state(false)
+  let popover_manager = $state(null)
+  let popover_toggle_button_manager = $state(null)
+  let clear_button_manager = $state(null)
+  let finish_button_manager = $state(null)
+  let color_input_manager = $state(null)
+  let search_icons_text_input_manager = $state(null)
+  let icon_options = $state([])
+  let selected_icon_manager = $state(null)
+
+  const icon_options_default = [
+    // i cut some out. tbd which to include / add
+    { key: "calendar", name: "Calendar" },
+    { key: "chart", name: "Chart" },
+    { key: "check", name: "Check" },
+    { key: "copy", name: "Copy" },
+    { key: "edit", name: "Edit" },
+    { key: "link", name: "Link" },
+    { key: "list", name: "List" },
+    { key: "minus", name: "Minus" },
+    { key: "plus", name: "Plus" },
+    { key: "table", name: "Table" },
+    { key: "trashcan", name: "Trashcan" },
+    { key: "x", name: "X" },
+    { key: "three_dots", name: "three_dots" },
+    { key: "clock", name: "Clock" },
+    { key: "sun", name: "Sun" },
+    { key: "moon", name: "Moon" },
+    { key: "magnifying_glass", name: "Magnifying Glass" },
+    { key: "smile_face", name: "Smile Face" },
+    { key: "nuetral_face", name: "Nuetral Face" },
+    { key: "frown_face", name: "Frown Face" },
+    { key: "pointer_hand", name: "Pointer Hand" },
+    { key: "touch_circle", name: "Touch Circle" },
+    { key: "profile", name: "Profile" },
+    { key: "share", name: "Share" },
+    { key: "invite", name: "Invite" },
+    { key: "feedback", name: "Feedback" },
+    { key: "idea", name: "Idea" },
+    { key: "resize", name: "Resize" },
+    { key: "crop", name: "Crop" },
+    { key: "folder", name: "Folder" },
+    { key: "file", name: "File" },
+    { key: "file_drop", name: "File Drop" },
+    { key: "linked", name: "Linked" },
+    { key: "unlinked", name: "Unlinked" },
+    { key: "sliders", name: "Sliders" },
+    { key: "brain", name: "Brain" },
+    { key: "brush", name: "Brush" },
+    { key: "arrow", name: "Arrow" },
+    { key: "arrow_tailed", name: "Arrow Tailed" },
+    { key: "curved_arrow", name: "Curved Arrow" },
+    { key: "redo_arrow", name: "Redo Arrow" },
+    { key: "undo_arrow", name: "Undo Arrow" },
+    { key: "rotate", name: "Rotate" },
+    { key: "refresh", name: "Refresh" },
+    { key: "opposing_arrows", name: "Opposing Arrows" },
+  ]
+
+  let icons_prepped = $state(null)
+  let icon_options_filtered = $derived(
+    Array.isArray(icons_prepped)
+      ? icons_prepped.filter(
+          (h) =>
+            search_icons_text_input_manager?.val === null ||
+            search_icons_text_input_manager?.val === "" ||
+            h?.key?.includes(search_icons_text_input_manager?.val) ||
+            h?.name?.includes(search_icons_text_input_manager?.val)
+        )
+      : null
+  )
+  let icon_color = $derived(
+    !is_icon_only && !!val?.color
+      ? `oklch(var(--l${val?.color?.l}${val?.color?.is_dark_theme_invert ? "-t" : ""}) var(--c${
+          val?.color?.c
+        }) var(--h${val?.color?.h}) / var(--o${val?.color?.o}))`
+      : "var(--g6-t)"
+  )
+
+  function set_icons_prepped() {
+    let icons_prepped_loc = []
+    for (let icon_option of icon_options) {
+      let icon_manager = create_icon_manager({
+        icon_id: icon_option?.key,
+        sw: 50,
+        size: 1.8,
+        color: icon_color,
+      })
+      icons_prepped_loc.push({
+        ...icon_option,
+        icon_manager,
+        button_manager: create_button_manager({
+          type: "outlined",
+          min_height: 8,
+          mt: 0.5,
+          mb: 0.5,
+          ml: 0.5,
+          mr: 0.5,
+          color: icon_color,
+          selected_type: () => (val?.icon == icon_option?.key ? "half_selected" : null),
+          on_click: () => set_icon(icon_option?.key),
+        }),
+      })
+    }
+    icons_prepped = icons_prepped_loc
+  }
+
+  function finish() {
+    popover_manager.close()
+    if (typeof config?.on_finish == "function") {
+      config?.on_finish(val)
+    }
+  }
+
+  function set_icon(input) {
+    if (is_icon_only) {
+      val = input
+    } else {
+      val = {
+        ...val,
+        icon: input,
+      }
+    }
+  }
+
+  function set_color(input) {
+    val = {
+      ...val,
+      color: input,
+    }
+    selected_icon_manager.set_attributes({ color: icon_color })
+    set_icons_prepped()
+  }
+
+  function set_null() {
+    val = null
+  }
+
+  function set_is_icon_only(input) {
+    is_icon_only = input
+    val = is_icon_only
+      ? typeof val == "object" && val && val.hasOwnProperty("icon")
+        ? val?.icon
+        : val
+      : typeof val == "object" && val && val.hasOwnProperty("icon")
+      ? val
+      : { icon: val, color: null }
+  }
+
+  function init(config) {
+    icon_options = Array.isArray(config?.icon_options) ? config?.icon_options : icon_options_default
+    is_icon_only = !!config?.is_icon_only
+    val = is_icon_only
+      ? config?.val
+      : config?.val
+      ? {
+          color: val?.color,
+          icon: val?.icon,
+        }
+      : null
+    popover_manager = create_popover_manager({
+      type: "dropdown",
+      min_width: 320,
+      target_width: 400,
+      min_height: 320,
+      target_height: 400,
+      header: "Icon Picker",
+      anchor_id: () => `button_${popover_toggle_button_manager?.id}`,
+    })
+    popover_toggle_button_manager = create_button_manager({
+      type: "outlined",
+      text: "Icon Input",
+      is_compressed: () => config?.is_button_compressed ?? true,
+      popover_target: () => `popover_${popover_manager?.id}`,
+    })
+    clear_button_manager = create_button_manager({
+      type: "outlined",
+      is_compressed: true,
+      text: "Set Null",
+      on_click: () => set_null(),
+    })
+    color_input_manager = create_color_input_manager({
+      is_show_opacity: false,
+      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+      val: val?.color,
+      on_finish: (input) => set_color(input),
+    })
+    search_icons_text_input_manager = create_text_input_manager({
+      type: "search",
+      autocomplete: "off",
+      placeholder: "search",
+      ml: 0.5,
+      mr: 0.5,
+      mb: 0.5,
+    })
+    selected_icon_manager = create_icon_manager({
+      icon_id: () => (is_icon_only ? val : val?.icon),
+      sw: 50,
+      size: 1.8,
+      color: () => icon_color,
+    })
+    finish_button_manager = create_button_manager({
+      text: "Finish",
+      on_click: () => finish(),
+    })
+    set_icons_prepped()
+  }
+  init(config)
+
+  return {
+    get icon_color() {
+      return icon_color
+    },
+    get val() {
+      return val
+    },
+    get is_icon_only() {
+      return is_icon_only
+    },
+    get popover_manager() {
+      return popover_manager
+    },
+    get popover_toggle_button_manager() {
+      return popover_toggle_button_manager
+    },
+    get finish_button_manager() {
+      return finish_button_manager
+    },
+    get icon_options_filtered() {
+      return icon_options_filtered
+    },
+    get search_icons_text_input_manager() {
+      return search_icons_text_input_manager
+    },
+    get color_input_manager() {
+      return color_input_manager
+    },
+    get clear_button_manager() {
+      return clear_button_manager
+    },
+    get icon_options() {
+      return icon_options
+    },
+    get selected_icon_manager() {
+      return selected_icon_manager
+    },
+    init,
+    set_icon,
+    set_is_icon_only,
+  }
+}

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

@@ -0,0 +1,121 @@
+<script>
+  import { onMount } from "svelte"
+  import LoadingWheel from "$lib/Components/LoadingWheel/index.svelte"
+
+  let { manager } = $props()
+
+  onMount(() => {
+    // doesnt seam to run until all items on page finish loading
+    if (typeof manager?.handle_mount == "function") {
+      manager.handle_mount()
+    }
+  })
+</script>
+
+{#if manager?.src}
+  <figure
+    id={manager?.id}
+    class="container"
+    style="
+      --border_radius: {manager?.border_radius}rem;
+      aspect-ratio: {manager?.image_aspect_ratio};
+      max-width: {manager?.display_max_width}px;
+      max-height: {manager?.display_max_height}px;
+      height: auto;"
+  >
+    <div
+      class="img_background_blur"
+      style="background: {manager?.bg_img_style}; filter: blur({manager?.bg_img_blur}px) opacity({manager?.bg_img_opacity}); border-radius: {manager?.border_radius}rem"
+    ></div>
+    <div class="main_border_container">
+      {#if manager?.src_quick}
+        <div class="main_border_child">
+          <img
+            id={`quick_img_${manager?.id}`}
+            class="placeholder_image"
+            src={manager?.src_quick}
+            alt={manager?.alt}
+            width={manager?.image_width}
+            height={manager?.image_height}
+            style="grid-area: stack; height: auto; max-height: {manager?.display_max_height}px; aspect-ratio: {manager?.image_aspect_ratio}; border-radius: {manager?.border_radius}rem;"
+          />
+          <div class="placeholder_image_bg"></div>
+        </div>
+      {/if}
+      <picture class="main_border_child" style="z-index: 1;">
+        <img
+          id={`img_${manager?.id}`}
+          src={manager?.src}
+          alt={manager?.alt}
+          width={manager?.image_width}
+          height={manager?.image_height}
+          style="height: auto; max-height: {manager?.display_max_height}px; aspect-ratio: {manager?.image_aspect_ratio}; border-radius: {manager?.border_radius}rem;"
+        />
+      </picture>
+      {#if manager?.is_loading_main_image}
+        <div class="main_border_child" style="display: grid; place-items: center; z-index: 2;">
+          <div class="loading_spinner">
+            <LoadingWheel />
+          </div>
+        </div>
+      {/if}
+    </div>
+  </figure>
+{:else}
+  <p style="font-style: italic;">{manager?.alt ?? "No Image Src"}</p>
+{/if}
+
+<style>
+  .container {
+    margin: 0;
+    padding: 0;
+    position: relative;
+    transition: filter 0.3s ease;
+    box-shadow: 0 0 0 1px oklch(var(--l10-t) var(--c3) var(--primary-h) / var(--o5));
+    border-radius: var(--border_radius);
+    width: fit-content;
+    max-width: 100%;
+  }
+  .img_background_blur {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: clamp(1rem, 130%, 100vw);
+    height: clamp(1rem, 130%, 100vh);
+    overflow: hidden;
+    z-index: -1;
+  }
+  .main_border_container {
+    display: grid;
+    grid-template-areas: "stack";
+  }
+  .main_border_child {
+    grid-area: stack;
+    display: grid;
+    grid-template-areas: "stack";
+  }
+  .placeholder_image_bg {
+    border-radius: var(--border_radius);
+    border: 4px solid var(--g17-t);
+    grid-area: stack;
+  }
+  .placeholder_image {
+    filter: blur(4px);
+  }
+  img {
+    max-width: 100%;
+    height: auto;
+    vertical-align: middle;
+    font-style: italic;
+    background-repeat: no-repeat;
+    background-size: cover;
+    shape-margin: 1rem;
+    object-fit: contain;
+    transition: opacity 0.5s ease-out;
+  }
+  .loading_spinner {
+    width: clamp(1rem, 60%, 80rem);
+    height: clamp(1rem, 60%, 80rem);
+  }
+</style>

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

@@ -0,0 +1,114 @@
+import { create_unique_id, set_closurable } from "$lib/client/index.js"
+
+export function create_image_manager(config) {
+  const id = create_unique_id(null, 20)
+  let storage_path = $derived(set_closurable(config?.storage_path, null))
+  let selector_id = $derived(set_closurable(config?.selector_id, null))
+  let bg_img_blur = $derived(set_closurable(config?.bg_img_blur, 0))
+  let bg_img_opacity = $derived(set_closurable(config?.bg_img_opacity ?? (bg_img_blur ? 0.3 : 0)))
+  let alt = $derived(set_closurable(config?.alt, null))
+  let storage_id = $derived(set_closurable(config?.storage_id, null))
+  let src = $derived(set_closurable(get_src(config?.src, storage_id), null))
+  let storage_id_quick = $derived(set_closurable(config?.storage_id_quick, null))
+  let src_quick = $derived(set_closurable(get_src(config?.src_quick, storage_id_quick), null))
+  let image_width = $state(config?.image_width ?? null)
+  let image_height = $state(config?.image_height ?? null)
+  let image_aspect_ratio = $state(
+    config?.image_aspect_ratio ?? (image_width > 0 && image_height > 0) ? image_width / image_height : null
+  )
+
+  let is_loading_main_image = $state(false)
+  let display_max_height = $derived(set_closurable(config?.display_max_height, 600))
+  let display_max_width = $derived(set_closurable(config?.display_max_width, 800))
+  let border_radius = $derived(set_closurable(config?.border_radius, 1))
+  let bg_img_style = $derived(src_quick || src ? `url(${src_quick ?? src}) no-repeat center/cover` : "none")
+
+  function get_src(src, storage_id) {
+    if (src) {
+      return src
+    } else if (storage_id && storage_path) {
+      return storage_path.replace("{storage_id}", storage_id)
+    } else {
+      return null
+    }
+  }
+
+  function handle_mount() {
+    is_loading_main_image = true
+    let quick_image_el = document?.querySelector(`#quick_img_${id}`)
+    if (quick_image_el) {
+      if (quick_image_el?.complete) {
+        set_image_dimensions(quick_image_el)
+      } else {
+        quick_image_el.onload = () => {
+          set_image_dimensions(quick_image_el)
+        }
+      }
+    }
+    let image_el = document?.querySelector(`#img_${id}`)
+    if (image_el) {
+      if (image_el?.complete) {
+        set_image_dimensions(image_el)
+        is_loading_main_image = false
+      } else {
+        image_el.onload = () => {
+          set_image_dimensions(image_el)
+          is_loading_main_image = false
+        }
+      }
+    }
+  }
+
+  function set_image_dimensions(el) {
+    image_width = el.naturalWidth
+    image_height = el.naturalHeight
+    image_aspect_ratio = el.naturalWidth / el.naturalHeight
+  }
+
+  return {
+    id,
+    get is_loading_main_image() {
+      return is_loading_main_image
+    },
+    get selector_id() {
+      return selector_id
+    },
+    get src() {
+      return src
+    },
+    get src_quick() {
+      return src_quick
+    },
+    get alt() {
+      return alt
+    },
+    get display_max_width() {
+      return display_max_width
+    },
+    get display_max_height() {
+      return display_max_height
+    },
+    get image_width() {
+      return image_width
+    },
+    get image_height() {
+      return image_height
+    },
+    get image_aspect_ratio() {
+      return image_aspect_ratio
+    },
+    get bg_img_blur() {
+      return bg_img_blur
+    },
+    get bg_img_opacity() {
+      return bg_img_opacity
+    },
+    get bg_img_style() {
+      return bg_img_style
+    },
+    get border_radius() {
+      return border_radius
+    },
+    handle_mount,
+  }
+}