sveltekit-ui 1.1.74 → 1.1.76

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

@@ -1,259 +0,0 @@
-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,
-    }
-    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

@@ -1,128 +0,0 @@
-<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>
-
-<div>
-  {#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}
-</div>
-
-<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/src/lib/Components/Image/index.svelte.js

@@ -1,116 +0,0 @@
-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)
-        }
-      }
-    }
-    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/src/lib/Components/ImageEditor/Image/CropBox/index.svelte

@@ -1,165 +0,0 @@
-<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>