sveltekit-ui 1.1.17 → 1.1.18

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

@@ -0,0 +1,259 @@
+import { create_text_input_manager } from "../TextInput/index.svelte.js"
+import { create_color_input_manager } from "../ColorInput/index.svelte.js"
+import { create_popover_manager } from "../Popover/index.svelte.js"
+import { create_button_manager } from "../Button/index.svelte.js"
+import { create_icon_manager } from "../Icon/index.svelte.js"
+import { deep_copy } from "../../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,
+    }
+    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/dist/Components/Image/index.svelte

@@ -0,0 +1,126 @@
+<script>
+  import { onMount } from "svelte"
+  import LoadingWheel from "../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;
+    min-width: 100%;
+    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";
+    height: 100%;
+  }
+  .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);
+    width: 100%;
+    height: auto;
+  }
+  img {
+    width: fit-content;
+    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/dist/Components/Image/index.svelte.js

@@ -0,0 +1,116 @@
+import { create_unique_id, set_closurable } from "../../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)
+        }
+      }
+    }
+    setTimeout(() => {
+      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,
+  }
+}

package/dist/Components/ImageEditor/Image/CropBox/index.svelte

@@ -0,0 +1,165 @@
+<script>
+  let { manager } = $props()
+</script>
+
+<svelte:window
+  onmouseup={(e) => manager?.crop_on_up(e)}
+  onlostpointercapture={(e) => manager?.crop_on_up(e)}
+  ontouchend={(e) => manager?.crop_on_up(e)}
+  onmousemove={(e) => manager?.crop_on_move(e)}
+  ontouchmove={(e) => manager?.crop_on_move(e)}
+/>
+
+<div
+  class="crop_square"
+  style="left: {manager?.crop_left}px; top: {manager?.crop_top}px; width: {manager?.crop_width}px; height: {manager?.crop_height}px"
+>
+  <div class="vert_lines" style="z-index: 0;"></div>
+  <div class="horiz_lines" style="z-index: 0;"></div>
+  <div
+    class="crop_area"
+    style="cursor: move;"
+    role="button"
+    tabindex="0"
+    onmousedown={(e) => manager?.crop_on_down(e, "main")}
+    ontouchstart={(e) => manager?.crop_on_down(e, "main")}
+  ></div>
+  <div
+    class="drag_dot"
+    style="left: 0; top: 0; cursor: nwse-resize;"
+    role="button"
+    tabindex="0"
+    onmousedown={(e) => manager?.crop_on_down(e, "tl")}
+    ontouchstart={(e) => manager?.crop_on_down(e, "tl")}
+  ></div>
+  <div
+    class="drag_dot"
+    style="left: 50%; top: 0; cursor: ns-resize;"
+    role="button"
+    tabindex="0"
+    onmousedown={(e) => manager?.crop_on_down(e, "t")}
+    ontouchstart={(e) => manager?.crop_on_down(e, "t")}
+  ></div>
+  <div
+    class="drag_dot"
+    style="left: 100%; top: 0; cursor: nesw-resize;"
+    role="button"
+    tabindex="0"
+    onmousedown={(e) => manager?.crop_on_down(e, "tr")}
+    ontouchstart={(e) => manager?.crop_on_down(e, "tr")}
+  ></div>
+  <div
+    class="drag_dot"
+    style="left: 0; top: 100%; cursor: nesw-resize;"
+    role="button"
+    tabindex="0"
+    onmousedown={(e) => manager?.crop_on_down(e, "bl")}
+    ontouchstart={(e) => manager?.crop_on_down(e, "bl")}
+  ></div>
+  <div
+    class="drag_dot"
+    style="left: 50%; top: 100%; cursor: ns-resize;"
+    role="button"
+    tabindex="0"
+    onmousedown={(e) => manager?.crop_on_down(e, "b")}
+    ontouchstart={(e) => manager?.crop_on_down(e, "b")}
+  ></div>
+  <div
+    class="drag_dot"
+    style="left: 100%; top: 100%; cursor: nwse-resize;"
+    role="button"
+    tabindex="0"
+    onmousedown={(e) => manager?.crop_on_down(e, "br")}
+    ontouchstart={(e) => manager?.crop_on_down(e, "br")}
+  ></div>
+  <div
+    class="drag_dot"
+    style="left: 0; top: 50%; cursor: ew-resize;"
+    role="button"
+    tabindex="0"
+    onmousedown={(e) => manager?.crop_on_down(e, "l")}
+    ontouchstart={(e) => manager?.crop_on_down(e, "l")}
+  ></div>
+  <div
+    class="drag_dot"
+    style="left: 100%; top: 50%; cursor: ew-resize;"
+    role="button"
+    tabindex="0"
+    onmousedown={(e) => manager?.crop_on_down(e, "r")}
+    ontouchstart={(e) => manager?.crop_on_down(e, "r")}
+  ></div>
+</div>
+
+<style>
+  .crop_square {
+    position: absolute;
+    cursor: pointer;
+  }
+  .crop_area {
+    position: absolute;
+    top: -2px;
+    bottom: -2px;
+    left: -2px;
+    right: -2px;
+    background: linear-gradient(90deg, #eef 50%, #445 50%), linear-gradient(90deg, #eef 50%, #445 50%),
+      linear-gradient(0deg, #eef 50%, #445 50%), linear-gradient(0deg, #eef 50%, #445 50%);
+    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+    background-size:
+      10px 2px,
+      10px 2px,
+      2px 10px,
+      2px 10px;
+    animation: border-dance 20s infinite linear;
+  }
+  @keyframes border-dance {
+    0% {
+      background-position:
+        0 0,
+        100% 100%,
+        0 100%,
+        100% 0;
+    }
+    100% {
+      background-position:
+        100% 0,
+        0 100%,
+        0 0,
+        100% 100%;
+    }
+  }
+  .vert_lines {
+    position: absolute;
+    left: 33%;
+    right: 33%;
+    top: 0;
+    bottom: 0;
+    border-left: 2px dotted #eef;
+    border-right: 2px dotted #eef;
+  }
+  .horiz_lines {
+    position: absolute;
+    top: 33%;
+    bottom: 33%;
+    left: 0;
+    right: 0;
+    border-top: 2px dotted #eef;
+    border-bottom: 2px dotted #eef;
+  }
+  .drag_dot {
+    position: absolute;
+    z-index: 3;
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    background: linear-gradient(-45deg, var(--g24), var(--g20));
+    box-shadow:
+      0.1rem 0.1rem 0.2rem var(--shadow3),
+      -0.1rem -0.1rem 0.2rem var(--shadow2),
+      inset 0.2rem 0.2rem 0.4rem var(--shadow2),
+      inset -0.2rem -0.2rem 0.4rem var(--shadow2);
+    transform: translate(-50%, -50%);
+  }
+  .drag_dot:hover {
+    background-color: #556;
+  }
+</style>