sveltekit-ui 1.1.74 → 1.1.76

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

@@ -1,239 +0,0 @@
-<script>
-  import LoadingWheel from "$lib/Components/LoadingWheel/index.svelte"
-  import ErrorX from "$lib/Components/ErrorX/index.svelte"
-  import { intersection_observer } from "$lib/actions/index.js"
-  import Button from "$lib/Components/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/src/lib/Components/Slider/index.svelte.js

@@ -1,469 +0,0 @@
-import { create_unique_id, deep_copy, set_closurable, set_closurable_color, color_to_css } from "$lib/client/index.js"
-import { create_button_manager } from "$lib/Components/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,
-  }
-}