sveltekit-ui 1.1.16 → 1.1.17

package/dist/Components/Breadcrumbs/index.svelte

@@ -1,27 +0,0 @@
-<script>
-  import Button from "../Button/index.svelte"
-  import Icon from "../Icon/index.svelte"
-
-  let { manager } = $props()
-</script>
-
-{#if Array.isArray(manager?.val) && manager?.val.length > 0}
-  <div class="breadcrumbs">
-    <Button manager={manager?.back_button_manager} />
-    <Button manager={manager?.slash_button_manager} />
-    {#if Array.isArray(manager?.breadcrumb_managers) && manager?.breadcrumb_managers.length > 0}
-      {#each manager?.val as breadcrumb, i}
-        <Icon manager={manager?.breadcrumb_managers?.[i]?.icon_manager} />
-        <Button manager={manager?.breadcrumb_managers?.[i]?.button_manager} />
-      {/each}
-    {/if}
-  </div>
-{/if}
-
-<style>
-  .breadcrumbs {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-  }
-</style>

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

@@ -1,88 +0,0 @@
-import { create_button_manager } from "../Button/index.svelte.js"
-import { create_icon_manager } from "../Icon/index.svelte.js"
-
-export function create_breadcrumbs_manager(config) {
-  let val = $state(null)
-  let back_button_manager = $state(null)
-  let slash_button_manager = $state(null)
-  let breadcrumb_managers = $state(null)
-
-  function set_val(input) {
-    val = JSON.parse(JSON.stringify(input))
-    let breadcrumb_managers_loc = []
-    if (Array.isArray(val) && val.length > 0) {
-      for (let i = 0; i < val.length; i++) {
-        breadcrumb_managers_loc.push({
-          icon_manager: create_icon_manager({
-            icon_id: "arrow",
-            deg: 90,
-            sw: 50,
-            size: 1.2,
-            color: "var(--g8-t)",
-          }),
-          button_manager: create_button_manager({
-            type: "plain",
-            min_height: 2,
-            pl: 0.5,
-            pr: 0.5,
-            text: () => (typeof val?.[i] === "object" ? val?.[i]?.name : val?.[i]),
-            selected_type: () => (i === val.length - 1 ? "selected" : null),
-            on_click: () => select_path_breadcrumb_index(i),
-          }),
-        })
-      }
-    }
-    breadcrumb_managers = breadcrumb_managers_loc
-  }
-
-  function select_path_breadcrumb_index(i) {
-    val = Array.isArray(val) ? val.slice(0, i + 1) : []
-    if (config?.on_change) {
-      config?.on_change(val)
-    }
-  }
-
-  function init(config) {
-    val = config?.val ?? []
-    back_button_manager = create_button_manager({
-      type: "soft",
-      support_icon: "arrow",
-      text: "Back",
-      icon_deg: 270,
-      icon_size: 1.4,
-      icon_sw: 50,
-      border_radius: 0.5,
-      min_height: 2,
-      icon_pos: "left",
-      on_click: () => select_path_breadcrumb_index(val.length - 2),
-    })
-    slash_button_manager = create_button_manager({
-      type: "plain",
-      min_height: 2,
-      text: "/",
-      pl: 0.5,
-      pr: 0.5,
-      on_click: () => select_path_breadcrumb_index(-1),
-    })
-    set_val(val)
-  }
-
-  init(config)
-
-  return {
-    get val() {
-      return val
-    },
-    get breadcrumb_managers() {
-      return breadcrumb_managers
-    },
-    get back_button_manager() {
-      return back_button_manager
-    },
-    get slash_button_manager() {
-      return slash_button_manager
-    },
-    set_val,
-    select_path_breadcrumb_index,
-  }
-}

package/dist/Components/Chart/Klines/index.svelte

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

@@ -1,226 +0,0 @@
-<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>