sveltekit-ui 1.1.74 → 1.1.76

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

@@ -1,146 +0,0 @@
-<script>
-  import Button from "$lib/Components/Button/index.svelte"
-  import Icon from "$lib/Components/Icon/index.svelte"
-
-  let { manager } = $props()
-</script>
-
-{#snippet main_file_stuff()}
-  {#if manager?.error_message}
-  <div style="display: flex; align-items: center;">
-    <p style="color: var(--error-t);">{manager?.error_message}</p>
-    <Button manager={manager?.error_button_manager} />
-  </div>
-  {/if}
-  {#if Array.isArray(manager?.val) ? manager?.val.length > 0 : !!manager?.val}
-    <Button manager={manager?.clear_files_button_manager} />
-  {:else}
-  <div class="file_input_wrapper">
-    <input
-      type="file"
-      name={manager?.name}
-      required={manager?.is_required}
-      disabled={manager?.is_disabled || manager?.is_read_only}
-      multiple={manager?.is_multiselect}
-      accept={Array.isArray(manager?.accept) ? manager?.accept.join(", ") : (manager?.accept ?? "")}
-      onchange={(e) => manager?.get_file(e)}
-      id={`file-input-${manager?.id}`}
-      hidden
-    />
-    <label for={`file-input-${manager?.id}`} class="file_input_label">
-      {manager?.select_file_button_text ? manager?.select_file_button_text : `Select file${manager?.is_multiselect ? "(s)" : ""}`}
-    </label>
-  </div>
-  {/if}
-{/snippet}
-
-<div class="container">
-  {#if manager?.label}
-    <div style="display: inline-flex;">
-      {#if manager?.label}
-        <p class="label">{manager?.label}:</p>
-      {/if}
-    </div>
-  {/if}
-  {#if manager?.is_drop_zone && !(manager?.is_hide_drop_zone_if_file && (Array.isArray(manager?.val) ? manager?.val.length > 0 : manager?.val))}
-    <div class="input_container" style="height: {manager?.height};">
-      <div
-        class:drop_zone={manager?.is_drop_zone}
-        style:background-image={manager?.is_drop_zone ? manager?.svg_bg : ""}
-        style="--border_radius: {manager?.border_radius}rem; 
-      margin-left: {manager?.ml}rem; margin-right: {manager?.mr}rem; margin-top: {manager?.mt}rem; margin-bottom: {manager?.mb}rem;"
-        ondrop={(e) => manager?.drop_handler(e)}
-        ondragover={(e) => e.preventDefault()}
-        role="region"
-        aria-label="File drop area"
-      >
-        <div>
-          <Icon manager={manager?.file_drop_icon_manager} />
-        </div>
-        {#if (manager?.val && !Array.isArray(manager?.val)) || (manager?.val && Array.isArray(manager?.val) && manager?.val.length > 0)}
-          {#if Array.isArray(manager?.val)}
-            {#if manager?.val.length == 1}
-              <p>{manager?.val[0]?.name ?? "Untitled"}</p>
-            {:else}
-              <p>{manager?.val.length + " files selected"}</p>
-            {/if}
-          {:else}
-            <p>{manager?.val?.name ?? "Untitled"}</p>
-          {/if}
-        {:else}
-          <p style="margin-bottom: 1rem;">
-            Drag and drop file{manager?.is_multiselect ? "(s)" : ""} here or
-          </p>
-        {/if}
-        {@render main_file_stuff()}
-      </div>
-    </div>
-  {:else}
-    {@render main_file_stuff()}
-  {/if}
-</div>
-
-<style>
-  .container{
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    height: 100%;
-  }
-  .input_container {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    cursor: pointer;
-    /* height: 100%; */
-  }
-  .drop_zone {
-    border-radius: var(--border_radius);
-    padding: 1rem 1rem 2rem 1rem;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-  .file_input_wrapper {
-    position: relative;
-  }
-  .file_input_label {
-    display: inline-block;
-    padding: 0.8rem 1rem;
-    border: 1px solid var(--g2-t);
-    border-radius: 1rem;
-    cursor: pointer;
-    color: var(--g2-t);
-    font-size: 1.6rem;
-    line-height: 1.6rem;
-    font-weight: 400;
-    height: 3.4rem;
-  }
-  .file_input_label:hover {
-    background-color: var(--primary-transparent2-t);
-  }
-  .file_input_label:active {
-    background-color: var(--g14-t);
-  }
-  input[type="file"]:not(:focus) + .file_input_label {
-    outline: none;
-  }
-  input[type="file"] {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    opacity: 0;
-    cursor: pointer;
-  }
-  .label {
-    font-size: 1.2rem;
-    font-weight: 600;
-    color: var(--g12-t);
-    line-height: 1.6rem;
-    margin-right: 0.5rem;
-  }
-</style>

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

@@ -1,249 +0,0 @@
-import { create_unique_id, set_closurable, set_closurable_color } from "$lib/client/index.js"
-import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
-import { create_icon_manager } from "$lib/Components/Icon/index.svelte.js"
-
-export function create_file_input_manager(config) {
-  const id = create_unique_id(null, 20)
-  let val = $state(null)
-  let label = $derived(set_closurable(config?.label, null))
-  let name = $derived(set_closurable(config?.name, "file"))
-  let is_required = $derived(set_closurable(config?.is_required, false))
-  let is_read_only = $derived(set_closurable(config?.is_read_only, false))
-  let accept = $derived(
-    set_closurable(config?.accept, [
-      "image/png",
-      "image/jpeg",
-      "image/webp",
-      "image/gif",
-      "image/avif",
-      "image/svg+xml",
-      "application/pdf",
-      "video/mp4",
-      "audio/mpeg",
-      "audio/aac",
-      "application/json",
-    ]),
-  )
-  let is_multiselect = $derived(set_closurable(config?.is_multiselect, false))
-  let is_disabled = $derived(set_closurable(config?.is_disabled, false))
-  let border_radius = $derived(set_closurable(config?.border_radius, 2))
-  let height = $derived(set_closurable(config?.height, null))
-  let icon_color = $derived(set_closurable_color(config?.icon_color, "var(--primary-t)"))
-  let border_color = $derived(set_closurable_color(config?.border_color, "aabbccff"))
-  let is_drop_zone = $derived(set_closurable(config?.is_drop_zone, true))
-  let is_hide_drop_zone_if_file = $derived(set_closurable(config?.is_hide_drop_zone_if_file, true))
-  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 select_file_button_text = $derived(set_closurable(config?.select_file_button_text, null))
-  let error_message = $state(null)
-  let error_button_manager = $state(null)
-  let clear_files_button_manager = $state(null)
-  let file_drop_icon_manager = $state(null)
-
-  let svg_bg = $derived(`url(
-    "data:image/svg+xml,%3csvg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'%3e%3crect stroke='%23${border_color}' x='.1rem' y='.1rem' width='calc(100% - .2rem)' height='calc(100% - .2rem)' fill='none' rx='${
-    border_radius * 10
-  }' ry='${
-    border_radius * 10
-  }' stroke-width='2' stroke-dasharray='8%2c 14' stroke-dashoffset='6' stroke-linecap='round'/%3e%3c/svg%3e"
-  )`)
-
-  function get_file(e) {
-    error_message = null
-    let val_loc = []
-    for (let file of e.target.files) {
-      val_loc = [...val_loc, file]
-    }
-    if (is_multiselect) {
-      val = val_loc
-    } else {
-      val = val_loc[0]
-    }
-    if (typeof config?.on_get_file == "function") {
-      config?.on_get_file(val)
-    }
-  }
-
-  function get_accept_list() {
-    return Array.isArray(accept)
-      ? accept
-      : String(accept ?? "")
-          .split(",")
-          .map((item) => item.trim())
-          .filter(Boolean)
-  }
-
-  function is_file_accepted(file) {
-    const accept_list = get_accept_list()
-    if (!file || accept_list.length === 0) return true
-
-    return accept_list.some((accepted_type) => {
-      if (accepted_type === file.type) return true
-      if (accepted_type.endsWith("/*")) return file.type?.startsWith(`${accepted_type.slice(0, -1)}`)
-      if (accepted_type.startsWith(".")) return file.name?.toLowerCase().endsWith(accepted_type.toLowerCase())
-      return false
-    })
-  }
-
-  function add_dropped_file(file, val_loc) {
-    if (!file) return val_loc
-    if (is_file_accepted(file)) {
-      return [...val_loc, file]
-    }
-
-    const message = `${file?.name ?? "File"} of type ${file?.type || "unknown"} not allowed`
-    error_message = error_message ? `${error_message} ${message}` : message
-    return val_loc
-  }
-
-  function drop_handler(ev) {
-    if (ev) {
-      ev.preventDefault()
-    }
-    let did_update_val = false
-    if (is_drop_zone) {
-      error_message = null
-      let val_loc = []
-      if (ev.dataTransfer.items) {
-        for (let i = 0; i < ev.dataTransfer.items.length; i++) {
-          if (ev.dataTransfer.items[i].kind === "file") {
-            const file = ev.dataTransfer.items[i].getAsFile()
-            val_loc = add_dropped_file(file, val_loc)
-          }
-        }
-      } else {
-        for (let i = 0; i < ev.dataTransfer.files.length; i++) {
-          val_loc = add_dropped_file(ev.dataTransfer.files[i], val_loc)
-        }
-      }
-      if (val_loc.length > 0) {
-        val = is_multiselect ? val_loc : val_loc[0]
-        did_update_val = true
-      }
-    }
-    if (did_update_val && config?.on_get_file) {
-      config?.on_get_file(val)
-    }
-  }
-
-  function clear_files() {
-    val = is_multiselect ? [] : null
-    if (config?.on_clear_files) {
-      config?.on_clear_files()
-    }
-  }
-
-  function init(config) {
-    val = config?.val ?? null
-    file_drop_icon_manager = create_icon_manager({
-      icon_id: () => (val && val.length > 0 ? "file_dropped" : "file_drop"),
-      size: 8,
-      sw: 12,
-      color: () => icon_color,
-    })
-    error_button_manager = create_button_manager({
-      type: "outlined",
-      support_icon: "x",
-      min_height: 2.4,
-      color: "var(--error-t)",
-      ml: 0.5,
-      is_uniform: true,
-      is_disabled: () => is_disabled,
-      on_click: () => (error_message = null),
-    })
-    clear_files_button_manager = create_button_manager({
-      ml: ml,
-      mr: mr,
-      mt: mt,
-      mb: mb,
-      support_icon: "x",
-      is_compressed: true,
-      is_disabled: () => is_disabled,
-      text: () => (Array.isArray(val) ? `${val.length} Files Selected` : val?.name),
-      on_click: () => clear_files(),
-    })
-  }
-
-  init(config)
-
-  return {
-    id,
-    get val() {
-      return val
-    },
-    get name() {
-      return name
-    },
-    get label() {
-      return label
-    },
-    get is_required() {
-      return is_required
-    },
-    get is_read_only() {
-      return is_read_only
-    },
-    get accept() {
-      return accept
-    },
-    get is_multiselect() {
-      return is_multiselect
-    },
-    get is_disabled() {
-      return is_disabled
-    },
-    get border_radius() {
-      return border_radius
-    },
-    get height() {
-      return height
-    },
-    get icon_color() {
-      return icon_color
-    },
-    get border_color() {
-      return border_color
-    },
-    get is_drop_zone() {
-      return is_drop_zone
-    },
-    get is_hide_drop_zone_if_file() {
-      return is_hide_drop_zone_if_file
-    },
-    get ml() {
-      return ml
-    },
-    get mr() {
-      return mr
-    },
-    get mt() {
-      return mt
-    },
-    get mb() {
-      return mb
-    },
-    get select_file_button_text() {
-      return select_file_button_text
-    },
-    get error_message() {
-      return error_message
-    },
-    get svg_bg() {
-      return svg_bg
-    },
-    get error_button_manager() {
-      return error_button_manager
-    },
-    get clear_files_button_manager() {
-      return clear_files_button_manager
-    },
-    get file_drop_icon_manager() {
-      return file_drop_icon_manager
-    },
-    get_file,
-    drop_handler,
-    clear_files,
-  }
-}

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

@@ -1,99 +0,0 @@
-<script>
-  let { val, is_bind_val = false, color_base = "var(--g14-t)", color_hover = "var(--primary-t)", on_change } = $props()
-
-  let is_hovered = $state(false)
-
-  function toggle() {
-    if (on_change) {
-      on_change(!val)
-    }
-  }
-</script>
-
-<button
-  class="side_bar_toggle_button"
-  style="--color_base: {color_base}; --color_hover: {color_hover};"
-  onpointerenter={() => (is_hovered = true)}
-  onpointerleave={() => (is_hovered = false)}
-  class:is_hovered
-  onclick={() => toggle()}
-  aria-label="Hamburger Toggle"
->
-  <span class="bar_base top_line" class:top_line_x={val}></span>
-  <span class="bar_base mid_line" class:mid_line_x={val}></span>
-  <span class="bar_base bot_line" class:bot_line_x={val}></span>
-</button>
-
-<style>
-  .side_bar_toggle_button {
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-    outline: none;
-    padding: 0;
-    pointer-events: initial;
-    height: 2rem;
-    width: 2.2rem;
-    border-radius: 0.5rem;
-    position: relative;
-  }
-  .is_hovered .bar_base {
-    background-position: left;
-  }
-  .bar_base {
-    background: linear-gradient(to left, var(--color_base) 50%, var(--color_hover) 50%) right;
-    background-size: 200%;
-    display: block;
-    height: 0.3rem;
-    position: absolute;
-    width: 2.2rem;
-    border-radius: 0.2rem;
-    transform: translateY(-50%);
-    border: none;
-  }
-  .top_line {
-    top: 10%;
-    transition:
-      top 0.2s 0.2s ease-out,
-      transform 0.2s linear,
-      background-position 0.6s ease-out;
-  }
-  .top_line_x {
-    transition:
-      top 0.2s ease-out,
-      transform 0.2s 0.2s ease-out,
-      background-position 0.6s ease-out;
-    top: 50%;
-    transform: translateY(-50%) rotate3d(0, 0, 1, -45deg);
-  }
-  .mid_line {
-    top: 50%;
-    visibility: visible;
-    transition:
-      visibility 0s,
-      background-position 0.3s ease-out;
-    transition-delay: 0.2s;
-  }
-  .mid_line_x {
-    visibility: hidden;
-    transition:
-      visibility 0s,
-      background-position 0.3s ease-out;
-    transition-delay: 0.2s;
-  }
-  .bot_line {
-    top: 90%;
-    transition:
-      top 0.2s 0.2s ease-out,
-      transform 0.2s linear,
-      background-position 0.8s ease-out;
-  }
-  .bot_line_x {
-    transition:
-      top 0.2s ease-out,
-      transform 0.2s 0.2s ease-out,
-      background-position 0.8s ease-out;
-    top: 50%;
-    transform: translateY(-50%) rotate3d(0, 0, 1, 45deg);
-  }
-</style>

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

@@ -1,145 +0,0 @@
-<script>
-  import { create_icon_manager } from "$lib/Components/Icon/index.svelte.js"
-  import Icon from "$lib/Components/Icon/index.svelte"
-  import { fade } from "svelte/transition"
-
-  let { children } = $props()
-  
-  let container_width = $state(null)
-  let content_width = $state(null)
-  let show_left_arrow = $state(false)
-  let show_right_arrow = $derived(
-    content_width && container_width && content_width > container_width && !hide_right_arrow
-  )
-  let hide_right_arrow = $state(false)
-
-  function scrolled(e) {
-    if (container_width < content_width) {
-      show_left_arrow = e.target.scrollLeft > 0.5
-      hide_right_arrow = e.target.scrollWidth - container_width - e.target.scrollLeft < 0.5
-    } else {
-      show_left_arrow = hide_right_arrow = false
-    }
-  }
-
-  let scroll_box_el = $state(null)
-
-  let in_left_arrow = $state(false)
-  let in_right_arrow = $state(false)
-  let hold_sub = $state(null)
-
-  function start_hold(dir) {
-    in_left_arrow = dir === "left"
-    in_right_arrow = dir === "right"
-    const starting_scroll_left = scroll_box_el ? scroll_box_el.scrollLeft : 0
-    let cum = 0
-    clearInterval(hold_sub)
-    hold_sub = setInterval(() => {
-      cum = in_left_arrow ? cum - 0.5 : cum + 0.5
-      cum = in_right_arrow ? cum + 0.5 : cum - 0.5
-      scroll_box_el.scrollLeft = starting_scroll_left + cum
-      if ((in_left_arrow && !show_left_arrow) || (in_right_arrow && !show_right_arrow)) {
-        stop_hold()
-      }
-    }, 10)
-  }
-
-  function stop_hold() {
-    clearInterval(hold_sub)
-    in_left_arrow = false
-    in_right_arrow = false
-  }
-
-  let left_icon_manager = create_icon_manager({
-    icon_id: "arrow",
-    size: 1.2,
-    sw: 50, 
-    deg: 270,
-    color: () => in_left_arrow ? "var(--g4-t)" : "var(--g8-t)"
-  })
-
-  let right_icon_manager = create_icon_manager({
-    icon_id: "arrow",
-    size: 1.2,
-    sw: 50, 
-    deg: 90,
-    color: () => in_right_arrow ? "var(--g4-t)" : "var(--g8-t)"
-  })
-</script>
-
-<div class="container" bind:offsetWidth={container_width} onwheel={e => e.stopPropagation()} ontouchmove={e => e.stopPropagation()} >
-  <div class="scrollbox" onscroll={(e) => scrolled(e)} bind:this={scroll_box_el}>
-    <div class="options" bind:clientWidth={content_width}>
-      {#if children}
-        {@render children()}
-      {/if}
-    </div>
-  </div>
-  {#if show_left_arrow}
-    <div
-      class="arrow_base left_arrow"
-      transition:fade={{ duration: 150 }}
-      onpointerenter={() => start_hold("left")}
-      onpointerleave={stop_hold}
-      ontouchstart={() => start_hold("left")}
-      ontouchend={(e) => { 
-        e.preventDefault()
-        stop_hold(e)}}
-    >
-      <Icon manager={left_icon_manager} />
-    </div>
-  {/if}
-  {#if show_right_arrow}
-    <div
-      class="arrow_base right_arrow"
-      transition:fade={{ duration: 150 }}
-      onpointerenter={() => start_hold("right")}
-      onpointerleave={stop_hold}
-      ontouchstart={() => start_hold("right")}
-      ontouchend={e => { 
-        e.preventDefault()
-        stop_hold(e)}
-      }
-    >
-      <Icon manager={right_icon_manager} />
-    </div>
-  {/if}
-</div>
-
-<style>
-  .container {
-    display: flex;
-    flex: 1;
-    position: relative;
-    overflow: hidden;
-  }
-  .scrollbox {
-    display: flex;
-    overflow: scroll;
-  }
-  .scrollbox::-webkit-scrollbar {
-    display: none;
-  }
-  .options {
-    display: flex;
-  }
-  .arrow_base {
-    position: absolute;
-    width: 4rem;
-    display: flex;
-    align-items: center;
-  }
-  .left_arrow {
-    background: linear-gradient(90deg, var(--bg), transparent);
-    left: 0;
-    top: 0;
-    bottom: 0;
-  }
-  .right_arrow {
-    background: linear-gradient(90deg, transparent, var(--bg));
-    right: 0;
-    top: 0;
-    bottom: 0;
-    flex-direction: row-reverse;
-  }
-</style>