sveltekit-ui 1.0.0

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

@@ -0,0 +1,468 @@
+import { create_unique_id, deep_copy, set_closurable, set_closurable_color, color_to_css } from "../../client/index.js"
+import { create_button_manager } from "../Button/index.svelte.js"
+
+export function create_slider_manager(config) {
+  const id = create_unique_id(null, 20)
+
+  let min = $state(null)
+  let max = $state(null)
+  let step = $state(null)
+  let hovered_i = $state(null)
+  let selected_i = $state(null)
+  let loading_i = $state(null)
+  let error_i = $state(null)
+  let val = $state(null)
+  let working_val = $state(null)
+  let active_i = $state(null)
+  let slider_highlight_bg_width = $state(50)
+  let slider_highlight_ml = $state(0)
+  let left = $state(0)
+  let is_slider_hovered = $state(false)
+  let is_pointer_down = $state(false)
+  let closest_i_at_drag_start = $state(0)
+  let toggle_null_button_manager = $state(null)
+
+  let label = $derived(set_closurable(config?.label, null))
+  let name = $derived(set_closurable(config?.name, "slider"))
+  let label_font_size = $derived(set_closurable(config?.label_font_size, 1.2))
+  let is_required = $derived(set_closurable(config?.is_required, false))
+  let is_read_only = $derived(set_closurable(config?.is_read_only, false))
+  let font_size = $derived(set_closurable(config?.font_size, 1))
+  let is_disabled = $derived(set_closurable(config?.is_disabled || val == null, false))
+  let is_nullable = $derived(set_closurable(config?.is_nullable, false))
+  let color = $derived(set_closurable_color(config?.color, "var(--primary-t)", true))
+  let is_short = $derived(set_closurable(config?.is_short, false))
+  let is_show_text = $derived(set_closurable(config?.is_show_text, 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 highlight_range_start_percent = $derived(set_closurable(config?.highlight_range_start_percent, 0))
+  let highlight_range_end_percent = $derived(set_closurable(config?.highlight_range_end_percent, 0))
+  let highlight_range_width_percent = $derived(highlight_range_end_percent - highlight_range_start_percent)
+  let base_height = $derived(is_short ? 0.8 : 2.8)
+
+  function get_e_percentage(e) {
+    if (e) {
+      let slider_el = document?.querySelector(`#slider_${id}`)
+      const slider_rect = slider_el.getBoundingClientRect()
+      const pointer_position = e.clientX
+      const slider_start = slider_rect.left
+      const slider_width = slider_rect.width
+      const pointer_offset = pointer_position - slider_start
+      const percent_decimal = pointer_offset / slider_width
+      return percent_decimal
+    }
+  }
+
+  function clean_val(input, is_from_percent_decimal = false) {
+    let new_val = null
+    if (is_from_percent_decimal) {
+      new_val = input * (max - min) + min
+    } else {
+      new_val = input
+    }
+    if (step > 0) {
+      new_val = Math.round(new_val / step) * step
+      const step_decimal_places = (step.toString().split(".")[1] || "").length
+      new_val = parseFloat(new_val.toFixed(step_decimal_places))
+    }
+    return Math.max(min, Math.min(max, new_val))
+  }
+
+  function set_hover(e) {
+    const percent_decimal = get_e_percentage(e)
+    if (Array.isArray(working_val) && working_val.length > 0) {
+      const percentage_decimals = working_val.map((h) => (h - min) / (max - min))
+      const closest_i = percentage_decimals.reduce((closest_index, current, index, array) => {
+        return Math.abs(current - percent_decimal) < Math.abs(array[closest_index] - percent_decimal)
+          ? index
+          : closest_index
+      }, 0)
+      if (Math.abs(percent_decimal - percentage_decimals?.[closest_i]) < 0.1) {
+        hovered_i = closest_i
+      } else {
+        hovered_i = null
+      }
+    }
+  }
+
+  function handle_pointer_enter(e) {
+    is_slider_hovered = true
+    set_hover(e)
+  }
+
+  function handle_pointer_leave(e) {
+    is_slider_hovered = false
+    hovered_i = null
+  }
+
+  function handle_pointer_down(e) {
+    is_pointer_down = true
+    if (e) {
+      e.preventDefault()
+      const percent_decimal = get_e_percentage(e)
+      if (Array.isArray(working_val) && working_val.length > 0) {
+        const percentage_decimals = working_val.map((h) => (h - min) / (max - min))
+        closest_i_at_drag_start = percentage_decimals.reduce((closest_index, current, index, array) => {
+          return Math.abs(current - percent_decimal) < Math.abs(array[closest_index] - percent_decimal)
+            ? index
+            : closest_index
+        }, 0)
+        selected_i = closest_i_at_drag_start
+        const new_val = clean_val(percent_decimal, true)
+        let working_val_loc = deep_copy(working_val)
+        working_val_loc[closest_i_at_drag_start] = new_val
+        working_val = deep_copy(working_val_loc)
+        if (Array.isArray(working_val) && working_val.length > 1) {
+          let val_loc = deep_copy(val)
+          val_loc[closest_i_at_drag_start] = new_val
+          val = deep_copy(val_loc)
+        } else {
+          val = deep_copy(new_val)
+        }
+        set_thumb(closest_i_at_drag_start)
+        const event_val =
+          Array.isArray(working_val) && working_val.length > 1
+            ? {
+                index: closest_i_at_drag_start,
+                val: working_val?.[closest_i_at_drag_start],
+              }
+            : working_val?.[closest_i_at_drag_start]
+        if (config?.on_down) {
+          config?.on_down(event_val)
+        }
+        if (config?.on_change) {
+          config?.on_change(event_val)
+        }
+      } else {
+        closest_i_at_drag_start = 0
+      }
+      let thumb_el = document?.querySelector(`#thumb_${closest_i_at_drag_start}_${id}`)
+      if (thumb_el) {
+        thumb_el.focus()
+      }
+    }
+  }
+
+  function handle_pointer_up(id_input, e) {
+    if (e && id_input == id && is_pointer_down) {
+      e.preventDefault()
+      selected_i = null
+      const event_val =
+        Array.isArray(working_val) && working_val.length > 1
+          ? {
+              index: closest_i_at_drag_start,
+              val: working_val?.[closest_i_at_drag_start],
+            }
+          : working_val?.[closest_i_at_drag_start]
+      if (config?.on_up) {
+        config?.on_up(event_val)
+      }
+    }
+    is_pointer_down = false
+    closest_i_at_drag_start = 0
+  }
+
+  function handle_pointer_move(id_input, e) {
+    if (e && id_input == id) {
+      e.preventDefault()
+      if (is_slider_hovered) {
+        set_hover(e)
+      }
+      if (is_pointer_down) {
+        const percent_decimal = get_e_percentage(e)
+        const new_val = clean_val(percent_decimal, true)
+        let working_val_loc = deep_copy(working_val)
+        working_val_loc[closest_i_at_drag_start] = new_val
+        working_val = deep_copy(working_val_loc)
+        if (Array.isArray(working_val) && working_val.length > 1) {
+          let val_loc = deep_copy(val)
+          val_loc[closest_i_at_drag_start] = new_val
+          val = deep_copy(val_loc)
+        } else {
+          val = deep_copy(new_val)
+        }
+        set_thumb(closest_i_at_drag_start)
+        if (config?.on_change) {
+          config?.on_change(
+            Array.isArray(working_val) && working_val.length > 1
+              ? {
+                  index: closest_i_at_drag_start,
+                  val: new_val,
+                }
+              : new_val
+          )
+        }
+      }
+    }
+  }
+
+  function handle_focus(i) {
+    selected_i = i
+  }
+
+  function handle_blur(i) {
+    if (selected_i == i) {
+      selected_i = null
+    }
+  }
+
+  function handle_thumb_keydown(i, key) {
+    if (loading_i != null || is_disabled) {
+      return
+    }
+    if (key == "ArrowLeft") {
+      working_val[i] = deep_copy(clean_val(working_val[i] - step))
+    } else if (key == "ArrowRight") {
+      working_val[i] = deep_copy(clean_val(working_val[i] + step))
+    }
+    if (Array.isArray(working_val) && working_val.length > 1) {
+      val[i] = deep_copy(working_val[i])
+    } else {
+      val = deep_copy(working_val[i])
+    }
+    const event_val = deep_copy(
+      Array.isArray(working_val) && working_val.length > 1
+        ? {
+            index: i,
+            val: working_val[i],
+          }
+        : working_val[i]
+    )
+    set_thumbs()
+    if (config?.on_change) {
+      config?.on_change(event_val)
+    }
+    if (config?.on_up) {
+      config?.on_up(event_val)
+    }
+  }
+
+  function set_thumbs() {
+    setTimeout(() => {
+      let container_el = typeof document !== "undefined" ? document?.querySelector(`#container_${id}`) : null
+      if (container_el) {
+        if (Array.isArray(working_val) && working_val.length > 0) {
+          for (let i = 0; i < working_val.length; i++) {
+            set_thumb(i)
+          }
+        }
+      }
+    }, 10)
+  }
+
+  function set_thumb(i = 0) {
+    const val_percent_decimal = Number((working_val?.[i] - min) / (max - min))
+    left = `calc(${val_percent_decimal * 100}% + (${
+      base_height * 5 - val_percent_decimal * base_height * (is_short ? 16 : 10)
+    }px))`
+    const short_val = typeof working_val?.[i] == "number" ? working_val?.[i].toString().replace("0.", ".") : ""
+    let thumb_el = document?.querySelector(`#thumb_${i}_${id}`)
+    if (thumb_el) {
+      thumb_el.style.left = left
+    }
+    let thumb_dot_el = document?.querySelector(`#thumb_dot_${i}_${id}`)
+    if (thumb_dot_el) {
+      if (!is_short && is_show_text) {
+        thumb_dot_el.innerHTML = short_val
+      }
+      if (error_i != null || is_short) {
+        thumb_dot_el.innerHTML = ""
+      }
+    }
+    let slider_el = document?.querySelector(`#slider_${id}`)
+    if (!slider_el) {
+      return
+    }
+    const slider_rect = slider_el.getBoundingClientRect()
+    const slider_width = slider_rect.width
+    if (Array.isArray(working_val) && working_val.length > 1) {
+      const working_val_high = Math.max(...working_val)
+      const working_val_low = Math.min(...working_val)
+      const percent_decimal_filled = (working_val_high - working_val_low) / (max - min)
+      const percent_decimal_left = (working_val_low - min) / (max - min)
+      const width_num = base_height * (1 - percent_decimal_filled) + (slider_width / 10) * percent_decimal_filled
+      slider_highlight_bg_width = `${(width_num / slider_width) * 1000}%`
+      const left_num =
+        base_height * (1 - percent_decimal_left) - base_height + (slider_width / 10) * percent_decimal_left
+      slider_highlight_ml = `${(left_num / slider_width) * 1000}%`
+    } else {
+      const width_num = base_height * (1 - val_percent_decimal) + (slider_width / 10) * val_percent_decimal
+      slider_highlight_bg_width = `${(width_num / slider_width) * 1000}%`
+      slider_highlight_ml = 0
+    }
+  }
+
+  function set_val(input) {
+    val = deep_copy(input)
+    working_val = deep_copy(Array.isArray(val) ? val : [val])
+    set_thumbs()
+  }
+
+  function set_loading_i(input) {
+    loading_i = deep_copy(input)
+  }
+
+  function set_hovered_i(input) {
+    hovered_i = deep_copy(input)
+  }
+
+  function set_error_i(input) {
+    error_i = deep_copy(input)
+  }
+
+  function set_min(input) {
+    min = deep_copy(input)
+  }
+  function set_max(input) {
+    max = deep_copy(input)
+  }
+  function set_step(input) {
+    step = deep_copy(input)
+  }
+
+  function init(config) {
+    const deep_copy_config = deep_copy(config)
+    min = deep_copy_config?.min ?? 0
+    max = deep_copy_config?.max ?? 2
+    step = deep_copy_config?.step ?? 0.01
+    hovered_i = deep_copy_config?.hovered_i ?? null
+    loading_i = deep_copy_config?.loading_i ?? null
+    error_i = deep_copy_config?.error_i ?? null
+    val = deep_copy_config?.val ?? (is_nullable ? null : min)
+    working_val = deep_copy(Array.isArray(val) ? val : [val])
+    set_thumbs()
+    toggle_null_button_manager = create_button_manager({
+      type: "outlined",
+      font_size: 1.2,
+      min_height: 3,
+      is_no_wrap: true,
+      mr: 0.5,
+      text: () => (val == null ? "Select Value" : "Set Null"),
+      on_click: () => set_val(val == null ? min : null),
+    })
+  }
+
+  init(config)
+
+  return {
+    id,
+    get name() {
+      return name
+    },
+    get label() {
+      return label
+    },
+    get active_i() {
+      return active_i
+    },
+    get val() {
+      return val
+    },
+    get is_nullable() {
+      return is_nullable
+    },
+    get working_val() {
+      return working_val
+    },
+    get label_font_size() {
+      return label_font_size
+    },
+    get is_required() {
+      return is_required
+    },
+    get is_read_only() {
+      return is_read_only
+    },
+    get min() {
+      return min
+    },
+    get max() {
+      return max
+    },
+    get step() {
+      return step
+    },
+    get font_size() {
+      return font_size
+    },
+    get is_disabled() {
+      return is_disabled
+    },
+    get color() {
+      return color
+    },
+    get closest_i_at_drag_start() {
+      return closest_i_at_drag_start
+    },
+    get hovered_i() {
+      return hovered_i
+    },
+    get selected_i() {
+      return selected_i
+    },
+    get loading_i() {
+      return loading_i
+    },
+    get error_i() {
+      return error_i
+    },
+    get is_short() {
+      return is_short
+    },
+    get is_show_text() {
+      return is_show_text
+    },
+    get ml() {
+      return ml
+    },
+    get mr() {
+      return mr
+    },
+    get mt() {
+      return mt
+    },
+    get mb() {
+      return mb
+    },
+    get slider_highlight_bg_width() {
+      return slider_highlight_bg_width
+    },
+    get slider_highlight_ml() {
+      return slider_highlight_ml
+    },
+    get left() {
+      return left
+    },
+    get base_height() {
+      return base_height
+    },
+    get highlight_range_start_percent() {
+      return highlight_range_start_percent
+    },
+    get highlight_range_width_percent() {
+      return highlight_range_width_percent
+    },
+    get toggle_null_button_manager() {
+      return toggle_null_button_manager
+    },
+    init,
+    handle_pointer_enter,
+    handle_pointer_leave,
+    handle_pointer_down,
+    handle_pointer_move,
+    handle_pointer_up,
+    handle_thumb_keydown,
+    handle_focus,
+    handle_blur,
+    set_val,
+    set_thumbs,
+    set_loading_i,
+    set_hovered_i,
+    set_error_i,
+    set_min,
+    set_max,
+    set_step,
+  }
+}

package/dist/Components/Spacer/index.svelte

@@ -0,0 +1,41 @@
+<script>
+  let {
+    is_vert = false,
+    ml = 0,
+    mr = 0,
+    mt = 0,
+    mb = 0,
+    sw = 0.1,
+    color = "var(--shadow7-t)",
+    min_length = 2,
+  } = $props()
+</script>
+
+<div
+  style="--ml: {ml}rem; --mr: {mr}rem; --mt: {mt}rem; --mb: {mb}rem; --color: {color}; --sw: {sw}rem; --min_length: {min_length}rem;"
+  class="container"
+  class:vert={is_vert}
+  class:horiz={!is_vert}
+></div>
+
+<style>
+  .container {
+    margin-left: var(--ml);
+    margin-right: var(--mr);
+    margin-top: var(--mt);
+    margin-bottom: var(--mb);
+  }
+  .vert {
+    display: flex;
+    flex-direction: column;
+    min-height: var(--min_length);
+    border-left: var(--sw) solid var(--color);
+  }
+  .horiz {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    min-width: var(--min_length);
+    border-bottom: var(--sw) solid var(--color);
+  }
+</style>

package/dist/Components/StoragePicker/DisplayFile/index.svelte

@@ -0,0 +1,15 @@
+<script>
+  import Audio from "../../Audio/index.svelte"
+  import Image from "../../Image/index.svelte"
+  import Icon from "../../Icon/index.svelte"
+
+  let { input } = $props()
+</script>
+
+{#if ["audio/mpeg"].includes(input?.mime_type)}
+  <Audio manager={input?.manager} />
+{:else if ["image/webp", "image/jpeg", "image/png", "image/gif"].includes(input?.mime_type)}
+  <Image manager={input?.manager} />
+{:else if input && Object.keys(input || {}).length > 0}
+  <Icon manager={manager?.file_icon_manager} />
+{/if}