sveltekit-ui 1.1.16 → 1.1.18

package/dist/Components/Slider/index.svelte

@@ -0,0 +1,239 @@
+<script>
+  import LoadingWheel from "../LoadingWheel/index.svelte"
+  import ErrorX from "../ErrorX/index.svelte"
+  import { intersection_observer } from "../../actions/index.js"
+  import Button from "../Button/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+<svelte:document
+  onpointerup={(e) => manager?.handle_pointer_up(manager?.id, e)}
+  onpointermove={(e) => manager?.handle_pointer_move(manager?.id, e)}
+/>
+
+<div use:intersection_observer onappeared={() => manager?.set_thumbs()}>
+  <div>
+    {#if manager?.label || manager?.error_message}
+      <div style="display: inline-flex;">
+        {#if manager?.label}
+          <label style="--label_font_size: {manager?.label_font_size}rem;" for={manager?.id}>{manager?.label}:</label>
+        {/if}
+        {#if manager?.error_message}
+          <p class="error_text">{manager?.error_message}</p>
+        {/if}
+      </div>
+    {/if}
+    <div
+      id={`container_${manager?.id}`}
+      class="container"
+      style="--ml: {manager?.ml}rem; --mr: {manager?.mr}rem; --mt: {manager?.mt}rem; --mb: {manager?.mb}rem;"
+    >
+      {#if manager?.is_nullable}
+        <div style="min-width: 9rem;">
+          <Button manager={manager?.toggle_null_button_manager} />
+        </div>
+      {/if}
+      <div
+        id={`slider_${manager?.id}`}
+        class="slider_box"
+        class:is_extra_padding={manager?.is_short}
+        style="--h: {manager?.base_height}rem; --thumb_height: {manager?.is_short
+          ? 1.8
+          : manager?.base_height - 0.4}rem; --thumb_mt: {manager?.is_short
+          ? -0.5
+          : 0.2}rem; --thumb_mx: {manager?.is_short ? 0.2 : 0}rem;"
+      >
+        {#if Array.isArray(manager?.working_val) && manager?.working_val.length > 0}
+          <div
+            id={`thumb_bg_${manager?.id}`}
+            class="slider_highlight_bg"
+            class:slider_highlight_bg_disabled={manager?.is_disabled}
+            style="margin-left: {manager?.slider_highlight_ml}; width: {manager?.slider_highlight_bg_width}; --color: {manager?.color}"
+          ></div>
+          <div style="display: flex; flex: 1; min-height: 100%; width: 100%; border-radius: .5rem; overflow: hidden;">
+            <div
+              style="min-height: 100%; background-color: var(--shadow1-t); margin-left: {manager?.highlight_range_start_percent}%; width: {manager?.highlight_range_width_percent}%;"
+            ></div>
+          </div>
+          {#each manager?.working_val as thumb, i}
+            <div
+              id={`thumb_${i}_${manager?.id}`}
+              role="button"
+              tabindex="0"
+              class="thumb"
+              class:thumb_hovered={manager?.hovered_i == i || manager?.selected_i == i}
+              class:thumb_dark_bg={manager?.is_short}
+              class:thumb_disabled={manager?.is_disabled || manager?.loading_i == i}
+              class:display_none={thumb == null}
+              style="--color: {manager?.color}"
+              onkeydown={(e) => manager?.handle_thumb_keydown(i, e?.key)}
+              onfocus={() => manager?.handle_focus(i)}
+              onblur={() => manager?.handle_blur(i)}
+            >
+              <div
+                id={`thumb_dot_${i}_${manager?.id}`}
+                class="thumb_dot"
+                class:thumb_dot_disabled={manager?.is_disabled || manager?.loading_i == i}
+                style="--font_size: {manager?.font_size}rem;"
+              ></div>
+              {#if manager?.loading_i == i}
+                <div class="thumb_float_icon">
+                  <LoadingWheel color={manager?.is_short ? "var(--g4)" : "var(--g3)"} sw={0.2} />
+                </div>
+              {:else if manager?.manager?.loading_i == i}
+                <div class="thumb_float_icon">
+                  <ErrorX color={manager?.is_short ? "var(--g4)" : "var(--g3)"} sw={42} />
+                </div>
+              {/if}
+            </div>
+          {/each}
+          <input
+            id={`input_${manager?.id}`}
+            type="range"
+            tabindex="-1"
+            name={manager?.name}
+            required={manager?.is_required}
+            readonly={manager?.is_read_only}
+            onpointerdown={(e) => manager?.handle_pointer_down(e)}
+            onpointerenter={(e) => manager?.handle_pointer_enter(e)}
+            onpointerleave={(e) => manager?.handle_pointer_leave(e)}
+            class="slider"
+            disabled={manager?.is_disabled || manager?.loading_id}
+            min={manager?.min}
+            max={manager?.max}
+            step={manager?.step}
+          />
+        {/if}
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .container {
+    margin: var(--mt) var(--mr) var(--mb) var(--ml);
+    display: flex;
+    flex: 1;
+    padding: 0;
+  }
+  .slider_box {
+    overscroll-behavior: contain;
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    margin: 0.1rem;
+    width: 100%;
+    height: var(--h);
+    position: relative;
+    display: flex;
+    border-radius: 2rem;
+    background: var(--bg2);
+    box-shadow: 0 0 0 1px var(--shadow7-t);
+    -webkit-box-shadow: 0 0 0 1px var(--shadow7-t);
+  }
+  .is_extra_padding {
+    margin: 0.5rem 0;
+  }
+  .slider_highlight_bg {
+    position: absolute;
+    display: flex;
+    height: 100%;
+    border-radius: 2rem;
+    overflow: hidden;
+    background: var(--color);
+    box-shadow:
+      inset 0.1rem 0.1rem 0.2rem var(--tint2-t),
+      inset -0.1rem -0.1rem 0.2rem var(--shadow2-t);
+  }
+  .slider_highlight_bg_disabled {
+    background: var(--g12-t);
+  }
+  .slider {
+    appearance: none;
+    -webkit-appearance: none;
+    position: absolute;
+    display: flex;
+    background: none;
+    outline: none;
+    width: 100%;
+    margin: 0;
+  }
+  .slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background: none;
+    opacity: 0;
+    box-shadow: transparent;
+    outline: none;
+    height: var(--thumb_height);
+    width: var(--thumb_height);
+    margin-top: var(--thumb_mt);
+    cursor: pointer;
+  }
+  .slider::-webkit-slider-thumb:hover {
+    height: var(--thumb_height);
+    width: var(--thumb_height);
+    margin-top: var(--thumb_mt);
+  }
+  .thumb {
+    position: absolute;
+    height: var(--thumb_height);
+    width: var(--thumb_height);
+    margin-top: var(--thumb_mt);
+    margin-left: var(--thumb_mx);
+    margin-right: var(--thumb_mx);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transform: translateX(-50%);
+    cursor: pointer;
+    user-select: none;
+    background: linear-gradient(-45deg, var(--g24), var(--g20));
+    box-shadow: 0 0 0.4rem 0.1rem var(--shadow8);
+    transition: box-shadow 0.3s;
+    touch-action: none;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+  .thumb_hovered {
+    box-shadow:
+      0 0 0.4rem 0.1rem var(--shadow8),
+      0 0 0 0.7rem var(--shadow8-t);
+  }
+  .thumb_dot {
+    font-size: var(--font_size);
+    color: var(--g2);
+  }
+  .thumb_dark_bg {
+    background: linear-gradient(-45deg, color-mix(in oklab, var(--primary-t), var(--g6) 20%), var(--primary-t));
+  }
+  .thumb_disabled {
+    background: linear-gradient(-45deg, var(--g20), var(--g18));
+  }
+  .thumb_dot_disabled {
+    color: var(--g13);
+  }
+  .thumb_float_icon {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    padding: 0.3rem;
+    display: grid;
+    place-items: center;
+  }
+  .display_none {
+    display: none;
+  }
+  label {
+    font-size: var(--label_font_size);
+    font-weight: 600;
+    color: var(--g12-t);
+    line-height: 1.6rem;
+    margin-right: 0.5rem;
+  }
+</style>

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

@@ -0,0 +1,469 @@
+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()
+      e.stopPropagation()
+      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,
+  }
+}