sveltekit-ui 1.0.0

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

@@ -0,0 +1,375 @@
+import { create_unique_id, set_closurable } from "$lib/client/index.js"
+import { create_icon_manager } from "$lib/Components/Icon/index.svelte.js"
+
+export function create_button_manager(config) {
+  const id = create_unique_id(null, 20)
+
+  let type = $derived(set_closurable(config?.type, "primary")) // primary, outlined, soft, plain
+  let support_icon = $derived(set_closurable(config?.support_icon, null))
+  let is_icon_bg_tint = $derived(set_closurable(config?.is_icon_bg_tint, false))
+  let icon_deg = $derived(set_closurable(config?.icon_deg, 0))
+  let icon_sw = $derived(set_closurable(config?.icon_sw, 0))
+  let icon_size = $derived(set_closurable(config?.icon_size, 1.8))
+  let icon_ml = $derived(set_closurable(config?.icon_ml, 0))
+  let icon_mr = $derived(set_closurable(config?.icon_mr, 0))
+  let icon_pos = $derived(set_closurable(config?.icon_pos, "right"))
+  let is_icon_shimmyable = $derived(set_closurable(config?.is_icon_shimmyable, false))
+  let icon_movement_stiffness = $derived(set_closurable(config?.icon_movement_stiffness, 0.1))
+  let icon_movement_damping = $derived(set_closurable(config?.icon_movement_damping, 0.1))
+  let aria_label = $derived(set_closurable(config?.aria_label, null))
+  let popover_target = $derived(set_closurable(config?.popover_target, null))
+  let is_no_wrap = $derived(set_closurable(config?.is_no_wrap, false))
+  let is_word_break_all = $derived(set_closurable(config?.is_word_break_all, false))
+  let is_success_animation = $derived(set_closurable(config?.is_success_animation, false))
+  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 pl = $derived(set_closurable(config?.pl, 1.1))
+  let pr = $derived(set_closurable(config?.pr, 1.1))
+  let pt = $derived(set_closurable(config?.pt, 0.3))
+  let pb = $derived(set_closurable(config?.pb, 0.3))
+  let border_radius = $derived(set_closurable(config?.border_radius, 1))
+  let tabindex = $derived(set_closurable(config?.tabindex, 0))
+  let is_prevent_default = $derived(set_closurable(config?.is_prevent_default, false))
+  let is_stop_propagation = $derived(set_closurable(config?.is_stop_propagation, false))
+  let min_height = $derived(set_closurable(config?.min_height, 3.4))
+  let fixed_width = $derived(set_closurable(config?.fixed_width, null))
+  let min_width = $derived(set_closurable(config?.min_width, null))
+  let is_compressed = $derived(set_closurable(config?.is_compressed, false))
+  let is_pill = $derived(set_closurable(config?.is_pill, false))
+  let is_uniform = $derived(set_closurable(config?.is_uniform, false))
+  let cursor = $derived(set_closurable(config?.cursor, "pointer"))
+  let text_align = $derived(set_closurable(config?.text_align, "center"))
+  let font_size = $derived(set_closurable(config?.font_size, 1.6))
+  let line_height = $derived(set_closurable(config?.line_height, 1.2))
+  let font_weight = $derived(set_closurable(config?.font_weight, 400))
+  let h = $derived(set_closurable(config?.h, null))
+  let c = $derived(set_closurable(config?.c, null))
+  let l = $derived(set_closurable(config?.l, null))
+  let color = $derived(
+    set_closurable(config?.color, null) ??
+      `oklch(var(--l${Math.min(Math.max(l != null ? l : type == "primary" ? 8 : 2, 0), 24)}-t) ${
+        Number.isInteger(c)
+          ? `var(--c${Math.min(Math.max(c, 0), 24)})`
+          : type == "primary"
+          ? "var(--primary-c)"
+          : "var(--c3)"
+      } ${h != null ? `var(--h${Math.min(Math.max(h, 0), 24)})` : "var(--primary-h)"})`
+  )
+  let gradient_to_color = $derived(set_closurable(config?.gradient_to_color, color))
+  let gradient_turn = $derived(set_closurable(config?.gradient_turn, 0.3))
+  let contrast_color = $derived(
+    set_closurable(
+      config?.contrast_color,
+      `oklch(var(--l${Math.min(Math.max(l != null ? l : 4, 1), 24) > 12 ? 3 : 22}-t) var(--c${Math.min(
+        Math.max(c != null ? c : 2, 1),
+        3
+      )}) ${h ? `var(--h${Math.min(Math.max(h, 0), 24)})` : "var(--primary-h)"})`
+    )
+  )
+  let border_color = $derived(set_closurable(config?.border_color, null))
+  let hover_shadow_color = $derived(set_closurable(config?.hover_shadow_color, "transparent"))
+  let hover_shadow_size = $derived(set_closurable(config?.hover_shadow_size, 1))
+  let text = $derived(set_closurable(config?.text, null))
+  let is_loading = $derived(set_closurable(config?.is_loading, false))
+  let is_disabled = $derived(set_closurable(config?.is_disabled, false))
+  let selected_type = $derived(set_closurable(config?.selected_type, null))
+
+  let is_error = $state(false)
+  let is_success = $state(false)
+  let icon_manager = $state(null)
+
+  let is_hovered = $state(false)
+  let is_pointer_down = $state(false)
+  let is_simulated_active = $state(config?.is_simulated_active || false)
+
+  function success_trigger() {
+    is_error = false
+    is_success = true
+    setTimeout(() => {
+      is_success = false
+    }, 1400)
+  }
+
+  function error_trigger() {
+    is_success = false
+    is_error = true
+    setTimeout(() => {
+      is_error = false
+    }, 1400)
+  }
+
+  function icon_shimmy_trigger() {
+    if (typeof icon_manager?.trigger_shimmy == "function") {
+      icon_manager.trigger_shimmy()
+    }
+  }
+
+  function handle_click(e) {
+    if (is_prevent_default) {
+      e.preventDefault()
+    }
+    if (is_stop_propagation) {
+      e.stopPropagation()
+    }
+    if (is_success_animation) {
+      success_trigger()
+    }
+    if (config?.on_click) {
+      config?.on_click()
+    }
+  }
+
+  function pointer_down() {
+    is_pointer_down = true
+  }
+
+  function pointer_up() {
+    is_pointer_down = false
+  }
+
+  function pointer_enter() {
+    is_hovered = true
+    if (config?.on_hover) {
+      config?.on_hover(true)
+    }
+    icon_shimmy_trigger()
+  }
+
+  function pointer_leave() {
+    is_hovered = false
+    if (config?.on_hover) {
+      config?.on_hover(false)
+    }
+  }
+
+  function simulate_click() {
+    is_simulated_active = true
+    setTimeout(() => {
+      is_simulated_active = false
+    }, 800)
+  }
+
+  function focus() {
+    let button_el = document?.querySelector(`#button_${id}`)
+    if (button_el) {
+      button_el.focus()
+    }
+  }
+
+  function init(config) {
+    if (support_icon) {
+      icon_manager = create_icon_manager({
+        icon_id: () => support_icon,
+        size: () => icon_size,
+        sw: () => (icon_sw ? icon_sw : min_height > 0 ? min_height * 12 : 40),
+        color: () =>
+          is_disabled
+            ? "var(--g6-t)"
+            : type == "primary" || (type == "outlined" && selected_type)
+            ? is_pointer_down
+              ? "oklch(from var(--contrast_color) calc(l - var(--l-shift-t)) calc(c + 0.01) h)"
+              : is_hovered
+              ? "oklch(from var(--contrast_color) calc(l + var(--l-shift-t)) calc(c + 0.01) h)"
+              : contrast_color
+            : is_pointer_down
+            ? "oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.01) h)"
+            : is_hovered
+            ? "oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.01) h)"
+            : color,
+        deg: () => icon_deg,
+        is_shimmyable: () => is_icon_shimmyable && !is_loading && !is_disabled,
+        movement_stiffness: () => icon_movement_stiffness,
+        movement_damping: () => icon_movement_damping,
+      })
+    }
+  }
+
+  init(config)
+
+  return {
+    id,
+    get type() {
+      return type
+    },
+    get ml() {
+      return ml
+    },
+    get mr() {
+      return mr
+    },
+    get mt() {
+      return mt
+    },
+    get mb() {
+      return mb
+    },
+    get pl() {
+      return pl
+    },
+    get pr() {
+      return pr
+    },
+    get pt() {
+      return pt
+    },
+    get pb() {
+      return pb
+    },
+    get border_radius() {
+      return border_radius
+    },
+    get is_loading() {
+      return is_loading
+    },
+    get is_pointer_down() {
+      return is_pointer_down
+    },
+    get is_prevent_default() {
+      return is_prevent_default
+    },
+    get is_stop_propagation() {
+      return is_stop_propagation
+    },
+    get tabindex() {
+      return tabindex
+    },
+    get is_disabled() {
+      return is_disabled
+    },
+    get selected_type() {
+      return selected_type
+    },
+    get is_hovered() {
+      return is_hovered
+    },
+    get min_height() {
+      return min_height
+    },
+    get fixed_width() {
+      return fixed_width
+    },
+    get min_width() {
+      return min_width
+    },
+    get is_compressed() {
+      return is_compressed
+    },
+    get is_pill() {
+      return is_pill
+    },
+    get is_uniform() {
+      return is_uniform
+    },
+    get cursor() {
+      return cursor
+    },
+    get text_align() {
+      return text_align
+    },
+    get text() {
+      return text
+    },
+    get is_success_animation() {
+      return is_success_animation
+    },
+    get font_size() {
+      return font_size
+    },
+    get line_height() {
+      return line_height
+    },
+    get font_weight() {
+      return font_weight
+    },
+    get color() {
+      return color
+    },
+    get gradient_to_color() {
+      return gradient_to_color
+    },
+    get gradient_turn() {
+      return gradient_turn
+    },
+    get contrast_color() {
+      return contrast_color
+    },
+    get border_color() {
+      return border_color
+    },
+    get hover_shadow_color() {
+      return hover_shadow_color
+    },
+    get hover_shadow_size() {
+      return hover_shadow_size
+    },
+    get support_icon() {
+      return support_icon
+    },
+    get is_icon_bg_tint() {
+      return is_icon_bg_tint
+    },
+    get icon_deg() {
+      return icon_deg
+    },
+    get icon_sw() {
+      return icon_sw
+    },
+    get icon_size() {
+      return icon_size
+    },
+    get icon_ml() {
+      return icon_ml
+    },
+    get icon_mr() {
+      return icon_mr
+    },
+    get icon_pos() {
+      return icon_pos
+    },
+    get is_icon_shimmyable() {
+      return is_icon_shimmyable
+    },
+    get icon_movement_stiffness() {
+      return icon_movement_stiffness
+    },
+    get icon_movement_damping() {
+      return icon_movement_damping
+    },
+    get aria_label() {
+      return aria_label
+    },
+    get popover_target() {
+      return popover_target
+    },
+    get is_no_wrap() {
+      return is_no_wrap
+    },
+    get is_word_break_all() {
+      return is_word_break_all
+    },
+    get is_simulated_active() {
+      return is_simulated_active
+    },
+    get is_success() {
+      return is_success
+    },
+    get is_error() {
+      return is_error
+    },
+    get icon_manager() {
+      return icon_manager
+    },
+    success_trigger,
+    error_trigger,
+    icon_shimmy_trigger,
+    handle_click,
+    pointer_down,
+    pointer_up,
+    pointer_enter,
+    pointer_leave,
+    simulate_click,
+    focus,
+  }
+}

package/src/lib/Components/Chart/Klines/index.svelte

@@ -0,0 +1,87 @@
+<script>
+  let { dataset } = $props()
+
+  let is_boxed = $derived(dataset?.colors.length < 2)
+</script>
+
+{#each dataset.data as kline}
+  <div
+    class="kline_container"
+    style="
+    width: {dataset.kline_width_pd * 100}%;
+    height: {kline.kline_height * 100}%; 
+    left: {kline.x * 100}%; 
+    bottom: {kline.l * 100}%;
+    --color_one: {dataset?.color_one};
+    --color_two: {dataset?.color_two};
+    "
+  >
+    <div class="kline">
+      <div
+        class="wick top_wick"
+        class:inc={kline.is_closed_higher || is_boxed}
+        class:dec={!kline.is_closed_higher && !is_boxed}
+        style="
+          height: {kline.kline_top_wick_height_pd * 100}%; 
+          top: 0;
+        "
+      ></div>
+      <div
+        class="box"
+        class:inc={kline.is_closed_higher}
+        class:dec={!kline.is_closed_higher && !is_boxed}
+        class:dec_box={!kline.is_closed_higher && is_boxed}
+        style="min-height: 2px; top: {kline.kline_top_wick_height_pd *
+          100}%; bottom: {kline.kline_bottom_wick_height_pd * 100}%;"
+      ></div>
+      <div
+        class="wick bottom_wick"
+        class:inc={kline.is_closed_higher || is_boxed}
+        class:dec={!kline.is_closed_higher && !is_boxed}
+        style="height: {kline.kline_bottom_wick_height_pd * 100}%; bottom: 0;"
+      ></div>
+    </div>
+  </div>
+{/each}
+
+<style>
+  .kline_container {
+    position: absolute;
+    padding-left: 1px;
+    padding-right: 1px;
+    /* transform: translateX(-50%); */
+  }
+  .kline {
+    position: relative;
+    height: 100%;
+  }
+  .wick {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 2px;
+  }
+  .top_wick {
+    border-top-left-radius: 1px;
+    border-top-right-radius: 1px;
+  }
+  .bottom_wick {
+    border-bottom-left-radius: 1px;
+    border-bottom-right-radius: 1px;
+  }
+  .box {
+    position: absolute;
+    width: 100%;
+    border-radius: 0.2rem;
+  }
+  .inc {
+    background-color: var(--color_one);
+  }
+  .dec {
+    background-color: var(--color_two);
+  }
+  .dec_box {
+    border: 1px solid var(--color_one);
+    box-sizing: border-box;
+  }
+</style>

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

@@ -0,0 +1,226 @@
+<script>
+  import Klines from "./Klines/index.svelte"
+
+  let { manager } = $props()
+
+  let grid_width = $state(null)
+  $effect(() => {
+    manager?.set_grid_width(grid_width)
+  })
+</script>
+
+<div
+  class="grid"
+  style="--y_axis_width: {manager?.y_axis_width}rem; --x_axis_height: {manager?.x_axis_height}rem;"
+  onmousewheel={(e) => manager?.handle_scroll_frame(e)}
+  bind:clientWidth={grid_width}
+>
+  {#if manager?.chart_prepped}
+    {#each manager?.chart_prepped.frames as frame, i}
+      <div
+        class="frame"
+        style="grid-area: {1 + i} / 1 / {2 +
+          i} / 2; aspect-ratio: {frame.aspect_ratio}; --frame_wid: {manager?.grid_width - manager?.y_axis_width}px"
+      >
+        {#if Array.isArray(manager?.chart_prepped?.x_axis_tics)}
+          {#each manager?.chart_prepped?.x_axis_tics as xtic}
+            <div class="x_line" style="--left: {xtic?.norm * 100}%;"></div>
+          {/each}
+        {/if}
+        {#if Array.isArray(frame?.shared_y_axiss[frame?.shown_y_axis_index]?.y_axis_tics)}
+          {#each frame?.shared_y_axiss[frame?.shown_y_axis_index]?.y_axis_tics as ytic}
+            <div class="y_line" style="--bottom: {ytic?.norm * 100}%;"></div>
+          {/each}
+        {/if}
+        {#each frame.shared_y_axiss as shared_y_axis}
+          {#each shared_y_axis.datasets as dataset, i}
+            <div style="position: absolute; height: 100%; width: 100%; z-index={i + 1}">
+              {#if !manager?.datasets || !manager?.datasets?.[dataset?.dataset_id]?.data}
+                <!-- no data found -->
+              {:else if dataset.type === "klines"}
+                <Klines {dataset} />
+              {:else if dataset.type === "points"}
+                {#each dataset.data as point}
+                  <div
+                    style="left: {point.x * 100}%; bottom: {point.y *
+                      100}%; position: absolute; box-sizing: border-box; padding-left: 1px; padding-right: 1px; width: 4px; height: 4px; border-radius: 50%; transform: translate(-50%, 50%); border: 1px solid {dataset?.color_one}; background-color: {dataset?.color_two};"
+                  ></div>
+                {/each}
+              {:else if dataset.type === "path"}
+                <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
+                  <path d={dataset?.d} style="fill:none;stroke-width:.2;stroke:{dataset?.color_one}" />
+                  {#each dataset?.data as datapoint}
+                    <circle
+                      cx={100 * datapoint.x}
+                      cy={100 - datapoint.y * 100}
+                      r={0.3}
+                      style="fill:{dataset?.color_two};"
+                    />
+                  {/each}
+                </svg>
+              {:else if dataset.type === "lines"}
+                <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
+                  {#each dataset?.data as dataline}
+                    <path
+                      d="M{dataline.x1 * 100} {100 - dataline.y1 * 100} L{dataline.x2 * 100} {100 - dataline.y2 * 100}"
+                      style="fill:none;stroke-width:.2;stroke:{dataset?.color_one};"
+                    />
+                  {/each}
+                </svg>
+              {:else}
+                Other
+              {/if}
+            </div>
+          {/each}
+        {/each}
+      </div>
+      <div
+        class="floater"
+        style="grid-area: {1 + i} / 1 / {2 + i} / 2;"
+        role="main"
+        onmousemove={(e) => manager?.handle_chart_hover(e, i)}
+        onmouseleave={() => manager?.handle_chart_hover_leave(i)}
+      >
+        {#if manager?.chart_prepped?.x_hovered_percent_decimal != null && !isNaN(manager?.chart_prepped?.x_hovered_percent_decimal)}
+          <div class="x_floater_line" style="--left: {manager?.chart_prepped?.x_hovered_percent_decimal * 100}%;"></div>
+        {/if}
+        {#if frame.y_hovered_percent_decimal != null && !isNaN(frame.y_hovered_percent_decimal)}
+          <div class="y_floater_line" style="--bottom: {frame.y_hovered_percent_decimal * 100}%;"></div>
+        {/if}
+      </div>
+      <div
+        role="button"
+        tabindex="0"
+        class="y_axis"
+        style="grid-area: {1 + i} / 2 / {2 + i} / 3;"
+        onclick={() => frame.change_shown_y_axis()}
+        onkeypress={() => frame.change_shown_y_axis()}
+      >
+        {#if frame?.shared_y_axiss[frame?.shown_y_axis_index]?.y_axis_tics}
+          {#each frame?.shared_y_axiss[frame?.shown_y_axis_index]?.y_axis_tics as tic}
+            <div class="y_axis_tic_container" style="--bottom: {tic?.norm * 100}%;">
+              <div class="y_axis_tic_mark"></div>
+              {#if tic?.text}
+                <p class="y_axis_tic_text">{tic?.text}</p>
+              {/if}
+            </div>
+          {/each}
+        {/if}
+      </div>
+    {/each}
+    <div
+      class="x_axis"
+      style="grid-area: {1 + manager?.chart_prepped?.frames.length} / 1 / {2 +
+        manager?.chart_prepped?.frames.length} / 2;"
+    >
+      {#if Array.isArray(manager?.chart_prepped?.x_axis_tics)}
+        {#each manager?.chart_prepped?.x_axis_tics as tic}
+          <div class="x_axis_tic_container" style="--left: {tic?.norm * 100}%;">
+            <div class="x_axis_tic_mark"></div>
+            {#if tic?.text}
+              <p class="x_axis_tic_text">{tic?.text}</p>
+            {/if}
+          </div>
+        {/each}
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .grid {
+    display: grid;
+    grid-template-columns: auto var(--y_axis_width);
+    grid-template-rows: auto;
+    border: 1px solid var(--g9-t);
+    border-radius: 1rem;
+    overflow: hidden;
+  }
+  .floater {
+    position: relative;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    cursor: crosshair;
+  }
+  .frame {
+    box-sizing: border-box;
+    background-color: var(--shadow1-t);
+    width: var(--frame_wid);
+    position: relative;
+    overflow: hidden;
+    user-select: none;
+  }
+  .x_line {
+    position: absolute;
+    background-color: var(--shadow1-t);
+    left: var(--left);
+    transform: translateX(-50%);
+    width: 1px;
+    height: 100%;
+  }
+  .y_line {
+    position: absolute;
+    background-color: var(--shadow1-t);
+    bottom: var(--bottom);
+    transform: translateY(50%);
+    width: 100%;
+    height: 1px;
+  }
+  .x_floater_line {
+    position: absolute;
+    background-color: var(--shadow5-t);
+    left: var(--left);
+    transform: translateX(-50%);
+    width: 1px;
+    height: 100%;
+  }
+  .y_floater_line {
+    position: absolute;
+    background-color: var(--shadow5-t);
+    bottom: var(--bottom);
+    transform: translateY(50%);
+    width: 100%;
+    height: 1px;
+  }
+  .y_axis {
+    position: relative;
+    max-width: 7rem;
+    cursor: pointer;
+  }
+  .x_axis {
+    position: relative;
+    height: 3rem;
+  }
+  .x_axis_tic_container {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    left: var(--left);
+    transform: translateX(-50%);
+    align-items: center;
+  }
+  .x_axis_tic_mark {
+    width: 2px;
+    height: 4px;
+  }
+  .x_axis_tic_text {
+    font-size: 1.4rem;
+  }
+  .y_axis_tic_container {
+    position: absolute;
+    display: flex;
+    bottom: var(--bottom);
+    transform: translateY(50%);
+    align-items: center;
+  }
+  .y_axis_tic_mark {
+    width: 4px;
+    height: 2px;
+  }
+  .y_axis_tic_text {
+    font-size: 1.4rem;
+    margin-left: 0.5rem;
+  }
+</style>