sveltekit-ui 1.1.17 → 1.1.19

package/dist/Components/FileInput/index.svelte

@@ -0,0 +1,146 @@
+<script>
+  import Button from "../Button/index.svelte"
+  import Icon from "../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}
+      readonly={manager?.is_read_only}
+      multiple={manager?.is_multiselect}
+      accept={Array.isArray(manager?.accept) ? manager?.accept.join(", ") : ""}
+      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 > 1 : 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/dist/Components/FileInput/index.svelte.js

@@ -0,0 +1,225 @@
+import { create_unique_id, set_closurable, set_closurable_color } from "../../client/index.js"
+import { create_button_manager } from "../Button/index.svelte.js"
+import { create_icon_manager } from "../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 drop_handler(ev) {
+    console.log("File(s) dropped", ev)
+    if (ev) {
+      ev.preventDefault()
+    }
+    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()
+            console.log(file?.type, accept, accept.includes(file?.type))
+            if (accept.includes(file?.type)) {
+              console.log("1 file[" + i + "].name = " + file.name)
+              val_loc = [...val_loc, file]
+            } else {
+              error_message = error_message ?? "" + " " + file?.name + " of type " + file?.type + " not allowed"
+            }
+          }
+        }
+      } else {
+        for (let i = 0; i < ev.dataTransfer.files.length; i++) {
+          const file = ev.dataTransfer.files[i].getAsFile()
+          val_loc = [...val_loc, file]
+        }
+      }
+      if (is_multiselect) {
+        val = val_loc
+      } else {
+        val = val_loc[0]
+      }
+    }
+    if (config?.on_get_file) {
+      config?.on_get_file(val)
+    }
+  }
+
+  function clear_files() {
+    val = []
+    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/dist/Components/Hamburger/index.svelte

@@ -0,0 +1,99 @@
+<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/dist/Components/HorizScrollBox/index.svelte

@@ -0,0 +1,145 @@
+<script>
+  import { create_icon_manager } from "../Icon/index.svelte.js"
+  import Icon from "../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>