sveltekit-ui 1.1.74 → 1.1.76

package/src/lib/Components/ColorInput/ChromaPicker/index.svelte

@@ -1,50 +0,0 @@
-<script>
-  import { color_var } from "$lib/client/index.js"
-
-  let { manager } = $props()
-</script>
-
-<div class="color_grid_container" style="--columns: {manager?.c_options.length};">
-  {#if Array.isArray(manager?.c_options) && manager?.c_options.length > 0}
-    {#each manager?.c_options as c_option}
-      <div
-        id={`chroma_square_${manager?.id}_${c_option}`}
-        class="color_box"
-        role="button"
-        tabindex={manager?.val?.c == c_option ? 0 : -1}
-        class:is_selected={manager?.val?.c == c_option}
-        style="--bg_col: {`${color_var(manager?.val?.l ?? manager?.val_base?.l, c_option, manager?.val?.h ?? manager?.val_base?.h, 24, false)}`}"
-        onclick={() => manager?.set_chroma(c_option)}
-        onkeydown={(event) => {
-          if (event.key === "Enter" || event.key === " ") {
-            manager?.set_chroma(c_option)
-          } else if (event.key === "ArrowRight") {
-            manager?.set_chroma(c_option + 1)
-          } else if (event.key === "ArrowLeft") {
-            manager?.set_chroma(c_option - 1)
-          }
-        }}
-      ></div>
-    {/each}
-  {/if}
-</div>
-
-<style>
-  .color_grid_container {
-    display: grid;
-    grid-template-columns: repeat(var(--columns), 1fr);
-    border: 1px solid var(--shadow5-t);
-    border-radius: 0.5rem;
-    overflow: hidden;
-  }
-  .color_box {
-    background-color: var(--bg_col);
-    display: flex;
-    width: 100%;
-    aspect-ratio: 1;
-  }
-  .is_selected {
-    outline: 1px solid var(--g24);
-    z-index: 2;
-  }
-</style>

package/src/lib/Components/ColorInput/ColorPalette/index.svelte

@@ -1,62 +0,0 @@
-<script>
-  import { color_var } from "$lib/client/index.js"
-
-  let { manager } = $props()
-</script>
-
-{#if Array.isArray(manager?.l_options) && manager?.l_options.length > 0 && Array.isArray(manager?.h_options) && manager?.h_options.length > 0}
-  <div
-    class="color_grid_container"
-    style="--columns: {manager?.h_options.length}; --rows: {manager?.l_options.length};"
-  >
-    {#each manager?.l_options as l_option}
-      {#each manager?.h_options as h_option}
-        <div
-          id={`lightness_hue_square_${manager?.id}_${l_option}_${h_option}`}
-          class="color_box"
-          class:is_selected={manager?.val?.l == l_option && manager?.val?.h == h_option}
-          role="button"
-          tabindex={manager?.val?.l == l_option && manager?.val?.h == h_option ? 0 : -1}
-          style="--bg_col: {`${color_var(l_option, manager?.val?.c ?? manager?.val_base?.c, h_option, 24, false)}`}"
-          onclick={() => manager?.set_lightness_and_hue(l_option, h_option)}
-          onkeydown={(event) => {
-            if (event.key === "Enter" || event.key === " ") {
-              manager?.set_lightness_and_hue(l_option, h_option)
-            } else if (event.key === "ArrowRight") {
-              manager?.set_lightness_and_hue(l_option, h_option + 1)
-            } else if (event.key === "ArrowLeft") {
-              manager?.set_lightness_and_hue(l_option, h_option - 1)
-            } else if (event.key === "ArrowDown") {
-              manager?.set_lightness_and_hue(l_option + 1, h_option)
-            } else if (event.key === "ArrowUp") {
-              manager?.set_lightness_and_hue(l_option - 1, h_option)
-            }
-          }}
-        ></div>
-      {/each}
-    {/each}
-  </div>
-{/if}
-
-<style>
-  .color_grid_container {
-    display: grid;
-    grid-template-columns: repeat(var(--columns), 1fr);
-    grid-template-rows: repeat(var(--rows), 1fr);
-    border: 1px solid var(--shadow5-t);
-    border-radius: 0.5rem;
-    overflow: hidden;
-  }
-  .color_box {
-    background-color: var(--bg_col);
-    display: flex;
-    flex: 1;
-    aspect-ratio: 1;
-    align-items: center;
-    justify-content: center;
-  }
-  .is_selected {
-    outline: 1px solid var(--g24);
-    z-index: 2;
-  }
-</style>

package/src/lib/Components/ColorInput/OpacityPicker/index.svelte

@@ -1,68 +0,0 @@
-<script>
-  import TransparentBackground from "$lib/Components/TransparentBackground/index.svelte"
-  import { color_var } from "$lib/client/index.js"
-
-  let { manager } = $props()
-</script>
-
-{#if Array.isArray(manager?.o_options) && manager?.o_options.length > 0}
-  <div class="container">
-    <TransparentBackground>
-      {#snippet content()}
-        <div class="color_grid_container" style="--columns: {manager?.o_options.length};">
-          {#each manager?.o_options as o_option}
-            <div class="opacity_bg" class:is_selected={manager?.val?.o == o_option}>
-              <div
-                id={`opacity_square_${manager?.id}_${o_option}`}
-                class="color_box"
-                role="button"
-                tabindex={manager?.val?.o == o_option ? 0 : -1}
-                style="--bg_col: {`${color_var(manager?.val?.l ?? manager?.val_base?.l, manager?.val?.c?? manager?.val_base?.c, manager?.val?.h?? manager?.val_base?.h, o_option, false)}`}"
-                onclick={() => manager?.set_opacity(o_option)}
-                onkeydown={(event) => {
-                  if (event.key === "Enter" || event.key === " ") {
-                    manager?.set_opacity(o_option)
-                  } else if (event.key === "ArrowRight") {
-                    manager?.set_opacity(o_option + 1)
-                  } else if (event.key === "ArrowLeft") {
-                    manager?.set_opacity(o_option - 1)
-                  }
-                }}
-              ></div>
-            </div>
-          {/each}
-        </div>
-      {/snippet}
-    </TransparentBackground>
-  </div>
-{/if}
-
-<style>
-  .container{
-    border: 1px solid var(--shadow5-t);
-    border-radius: 0.5rem;
-    overflow: hidden;
-  }
-  .color_grid_container {
-    background-color: none;
-    display: grid;
-    grid-template-columns: repeat(var(--columns), 1fr);
-  }
-  .opacity_bg {
-    position: relative;
-    display: flex;
-    width: 100%;
-    aspect-ratio: 1;
-    overflow: hidden;
-  }
-  .color_box {
-    position: absolute;
-    background-color: var(--bg_col);
-    height: 100%;
-    width: 100%;
-  }
-  .is_selected {
-    outline: 1px solid var(--g24);
-    z-index: 2;
-  }
-</style>

package/src/lib/Components/ColorInput/ShowcasePicker/index.svelte

@@ -1,136 +0,0 @@
-<script>
-  import Button from "$lib/Components/Button/index.svelte"
-  import TransparentBackground from "$lib/Components/TransparentBackground/index.svelte"
-  import Checkbox from "$lib/Components/Checkbox/index.svelte"
-  import { color_var } from "$lib/client/index.js"
-
-  let { manager } = $props()
-</script>
-
-<div>
-  <TransparentBackground>
-    {#snippet content()}
-      <div
-        class="color_overlay"
-        style="--bg_col: {`${color_var(
-          manager?.val?.l,
-          manager?.val?.c,
-          manager?.val?.h,
-          manager?.val?.o,
-          manager?.val?.is_dark_theme_invert
-        )}`}"
-      ></div>
-    {/snippet}
-  </TransparentBackground>
-</div>
-<div class="part_container">
-  <div class="segment" style="gap: .5rem; border: none;">
-    <div style="display: flex; flex: 1; width: 100%;">
-      <div class="swatch_bg" style="background-color: var(--g24); border: 1px solid var(--shadow5-t);">
-        <div
-          class="swatch"
-          style="--bg_col: {`${color_var(manager?.val?.l, manager?.val?.c, manager?.val?.h, manager?.val?.o, false)}`}"
-        ></div>
-      </div>
-      <div class="swatch_bg" style="background-color: var(--g1); border: 1px solid var(--shadow5-t);">
-        <div
-          class="swatch"
-          style="--bg_col: {`${color_var(
-            manager?.val?.is_dark_theme_invert ? 25 - manager?.val?.l : manager?.val?.l,
-            manager?.val?.c,
-            manager?.val?.h,
-            manager?.val?.o,
-            false
-          )}`}"
-        ></div>
-      </div>
-    </div>
-    <Button manager={manager?.set_null_button_manager} />
-  </div>
-  <div class="segment">
-    <div style="width: 100%;">
-      <Button manager={manager?.lightness_up_button_manager} />
-    </div>
-    <p class="part_text">Lightness</p>
-    <p>{manager?.val?.l ?? "-"}</p>
-    <div style="width: 100%;">
-      <Button manager={manager?.lightness_down_button_manager} />
-    </div>
-  </div>
-  <div class="segment">
-    <div style="width: 100%;">
-      <Button manager={manager?.chroma_up_button_manager} />
-    </div>
-    <p class="part_text">Chroma</p>
-    <p>{manager?.val?.c ?? "-"}</p>
-    <div style="width: 100%;">
-      <Button manager={manager?.chroma_down_button_manager} />
-    </div>
-  </div>
-  <div class="segment">
-    <div style="width: 100%;">
-      <Button manager={manager?.hue_up_button_manager} />
-    </div>
-    <p class="part_text">Hue</p>
-    <p>{manager?.val?.h ?? "-"}</p>
-    <div style="width: 100%;">
-      <Button manager={manager?.hue_down_button_manager} />
-    </div>
-  </div>
-  {#if manager?.is_show_opacity}
-    <div class="segment">
-      <div style="width: 100%;">
-        <Button manager={manager?.opacity_up_button_manager} />
-      </div>
-      <p class="part_text">Opacity</p>
-      <p>{manager?.val?.o ?? "-"}</p>
-      <div style="width: 100%;">
-        <Button manager={manager?.opacity_down_button_manager} />
-      </div>
-    </div>
-  {/if}
-  <div class="segment">
-    <p class="part_text">Dark Theme Invert</p>
-    <Checkbox manager={manager?.is_dark_theme_invert_checkbox_manager} />
-  </div>
-</div>
-
-<style>
-  .part_container {
-    display: flex;
-    flex: 1;
-  }
-  .segment {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid var(--shadow5-t);
-    border-radius: 1rem;
-    margin: 0.1rem;
-  }
-  .part_text {
-    font-size: 1.2rem;
-    color: var(--g8-t);
-    text-align: center;
-    line-height: 1.6rem;
-    margin: 0 0.5rem;
-  }
-  .swatch_bg {
-    display: flex;
-    flex: 1;
-    width: 100%;
-    border-radius: 1rem;
-    padding: .4rem;
-    overflow: hidden;
-  }
-  .swatch {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    border-radius: 0.5rem;
-    overflow: hidden;
-    background-color: var(--bg_col);
-  }
-</style>

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

@@ -1,70 +0,0 @@
-<script>
-  import Button from "$lib/Components/Button/index.svelte"
-  import ColorPalette from "./ColorPalette/index.svelte"
-  import TransparentBackground from "$lib/Components/TransparentBackground/index.svelte"
-  import OpacityPicker from "./OpacityPicker/index.svelte"
-  import ChromaPicker from "./ChromaPicker/index.svelte"
-  import ShowcasePicker from "./ShowcasePicker/index.svelte"
-  import { color_var, deep_copy } from "$lib/client/index.js"
-  import Popover from "$lib/Components/Popover/index.svelte"
-
-  let { manager } = $props()
-</script>
-
-{#if manager?.label}
-  <div>
-    {#if manager?.label}
-      <p class="label">{manager?.label}:</p>
-    {/if}
-  </div>
-{/if}
-<Button manager={manager?.toggle_button_manager}>
-  {#snippet content()}
-    <div id={`toggle_el_${manager?.popover_manager?.id}`}>
-      {#if manager?.val}
-        <TransparentBackground>
-          {#snippet content()}
-            <div
-              class="color_overlay"
-              style="--bg_col: {`${color_var(manager?.val?.l, manager?.val?.c, manager?.val?.h, manager?.val?.o, manager?.val?.is_dark_theme_invert)}`}"
-            ></div>
-          {/snippet}
-        </TransparentBackground>
-      {:else}
-        <div
-          class="color_overlay"
-          style="display: grid; place-items: center;"
-        >
-          <p style="font-size: 1.2rem;">null</p>
-        </div>
-      {/if}
-    </div>
-  {/snippet}
-</Button>
-<Popover manager={manager?.popover_manager}>
-  {#snippet content()}
-    <div>
-      <div style="display: flex; flex-direction: column; gap: .5rem;">
-        <ShowcasePicker {manager} />
-        <ColorPalette {manager} />
-        {#if manager?.is_show_opacity}
-          <OpacityPicker {manager} />
-        {/if}
-        <ChromaPicker {manager} />
-      </div>
-    </div>
-  {/snippet}
-  {#snippet footer()}
-    <Button manager={manager?.finish_button_manager} />
-  {/snippet}
-</Popover>
-
-<style>
-  .color_overlay {
-    border-radius: 0.8rem;
-    height: 30px;
-    width: 30px;
-    box-shadow: inset 0 0 0 .1rem var(--g15-t);
-    background-color: var(--bg_col);
-  }
-</style>