sveltekit-ui 1.1.17 → 1.1.18

package/dist/Components/Checkbox/index.svelte

@@ -0,0 +1,411 @@
+<script>
+  import LoadingWheel from "../LoadingWheel/index.svelte"
+  import ErrorX from "../ErrorX/index.svelte"
+  import Icon from "../Icon/index.svelte"
+  import Button from "../Button/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+<div>
+  {#if manager?.label || manager?.error_message}
+    <div style="display: inline-flex;">
+      {#if manager?.label}
+        <p class="label">{manager?.label}:</p>
+      {/if}
+      {#if manager?.error_message}
+        <p class="error_text">{manager?.error_message}</p>
+      {/if}
+    </div>
+  {/if}
+  <div
+    class="container"
+    style="--ml: {manager?.ml}rem; --mr: {manager?.mr}rem; --mt: {manager?.mt}rem; --mb: {manager?.mb}rem; --size:{manager?.size}rem;"
+  >
+    {#if manager?.is_nullable}
+      <div style="min-width: 9rem;">
+        <Button manager={manager?.toggle_null_button_manager} />
+      </div>
+    {/if}
+    {#if manager?.is_nullable == false || manager?.val != null}
+      <label
+        class:checkbox_switch={manager?.type == "checkbox"}
+        class:toggle_switch={manager?.type == "toggle"}
+        class:dark_theme_switch={manager?.type == "dark_theme"}
+        for={manager?.id}
+        onpointerenter={() => manager?.handle_on_hover_change(true)}
+        onpointerleave={() => manager?.handle_on_hover_change(false)}
+      >
+        <input
+          id={manager?.id}
+          name={manager?.name}
+          required={manager?.is_required}
+          readonly={manager?.is_read_only}
+          style="min-height: {manager?.size}rem; min-width: {manager?.size}rem;"
+          class:dark_theme_input={manager?.type == "dark_theme"}
+          type="checkbox"
+          disabled={manager?.is_disabled}
+          checked={manager?.val_bool}
+          tabindex="0"
+          onkeydown={(e) => {
+            if (e.key === "Enter") {
+              manager.set_val_from_bool(!manager?.val_bool, true)
+            }
+          }}
+          onclick={(e) => manager?.set_val_from_bool(e?.target?.checked, true)}
+        />
+        {#if manager?.type == "checkbox"}
+          <span class="checkbox" style="--color: {manager?.color};" class:checkbox_is_disabled={manager?.is_disabled}>
+            {#if manager?.val_bool}
+              <Icon manager={manager?.check_icon_manager} />
+            {/if}
+          </span>
+          {#if manager?.is_loading}
+            <div class="checkbox_load">
+              <LoadingWheel color={manager?.val ? "var(--primary-contrast-t)" : "var(--g12-t)"} sw={0.2} />
+            </div>
+          {:else if manager?.error_message}
+            <div class="checkbox_icon">
+              <ErrorX color={manager?.val ? "var(--primary-contrast-t)" : "var(--g12-t)"} sw={50} />
+            </div>
+          {/if}
+        {:else if manager?.type == "toggle"}
+          <span
+            class="toggle"
+            style="--color: {manager?.color}; --border_color: {manager?.is_disabled
+              ? 'var(--g14-t)'
+              : manager?.val_bool
+                ? manager?.color
+                : 'var(--g11-t)'}"
+            class:toggle_is_disabled={manager?.is_disabled}
+          ></span>
+          {#if manager?.is_loading}
+            <div class="toggle_load" style="--left: {manager?.val_bool ? 1.8 : 0.4}rem;">
+              <LoadingWheel color="var(--g4)" sw={0.2} />
+            </div>
+          {:else if manager?.error_message}
+            <div class="toggle_icon" style="--left: {manager?.val_bool ? 1.6 : 0.2}rem;">
+              <ErrorX color="var(--g4)" sw={42} />
+            </div>
+          {/if}
+        {:else if manager?.type == "dark_theme"}
+          <span
+            class="dark_theme_toggle"
+            style="--color: {manager?.color};"
+            class:dark_theme_is_disabled={manager?.is_disabled}
+          ></span>
+          {#if manager?.is_loading}
+            <div class="dark_theme_load" style="--left: {manager?.val ? 1.8 : 0.4}rem;">
+              <LoadingWheel color="var(--g4)" sw={0.2} />
+            </div>
+          {:else if manager?.error_message}
+            <div class="dark_theme_icon" style="--left: {manager?.val ? 1.6 : 0.2}rem;">
+              <ErrorX color="var(--g4)" sw={42} />
+            </div>
+          {:else if manager?.val}
+            <div class="dark_theme_icon2" style="--left: 1.5rem;">
+              <Icon manager={manager?.moon_icon_manager} />
+            </div>
+          {:else}
+            <div class="dark_theme_icon2" style="--left: 0.5rem;">
+              <Icon manager={manager?.sun_icon_manager} />
+            </div>
+          {/if}
+        {/if}
+      </label>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .label {
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: var(--g12-t);
+    line-height: 1.6rem;
+    margin-right: 0.5rem;
+  }
+  input[type="checkbox"]:focus + .checkbox {
+    box-shadow:
+      inset 0.2rem 0.2rem 0.4rem var(--shadow2-t),
+      inset -0.2rem -0.2rem 0.4rem var(--shadow2-t),
+      inset 0 0 0 2px var(--color),
+      0 0 0 1px var(--selected-t),
+      0 0 0 2px var(--g1-t) !important;
+  }
+  input[type="checkbox"]:focus + .toggle {
+    box-shadow:
+      inset 0.2rem 0.2rem 0.4rem var(--shadow2-t),
+      inset -0.2rem -0.2rem 0.4rem var(--shadow2-t),
+      inset 0 0 0 1px var(--border_color),
+      0 0 0 1px var(--selected-t),
+      0 0 0 2px var(--g1-t) !important;
+  }
+  input[type="checkbox"]:focus + .dark_theme_toggle {
+    box-shadow:
+      inset 0.1rem 0.1rem 0.2rem var(--shadow7-t),
+      inset -0.1rem -0.1rem 0.2rem var(--shadow7-t),
+      inset 0 0 0 1px var(--g10-t),
+      0 0 0 1px var(--selected-t),
+      0 0 0 2px var(--g1-t) !important;
+  }
+  .error_text {
+    font-size: 1.2rem;
+    color: oklch(var(--l5-t) var(--c7) var(--h1));
+    line-height: 1.2rem;
+    line-height: 1.2rem;
+  }
+  .container {
+    margin-left: var(--ml);
+    margin-right: var(--mr);
+    margin-top: var(--mt);
+    margin-bottom: var(--mb);
+    display: flex;
+    /* padding: 0.1rem; */
+  }
+  .checkbox_switch {
+    position: relative;
+    min-width: var(--size);
+    max-width: var(--size);
+    min-height: var(--size);
+    max-height: var(--size);
+  }
+  .checkbox_switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+  .checkbox {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    min-width: var(--size);
+    max-width: var(--size);
+    min-height: var(--size);
+    max-height: var(--size);
+    border-radius: 0.5rem;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+    background: var(--bg2);
+    box-shadow:
+      inset 0.2rem 0.2rem 0.4rem var(--shadow2-t),
+      inset -0.2rem -0.2rem 0.4rem var(--shadow2-t),
+      inset 0 0 0 2px var(--color);
+    display: grid;
+    place-items: center;
+  }
+  .checkbox:hover {
+    background: var(--shadow5-t);
+  }
+  input:checked + .checkbox {
+    background: var(--color);
+  }
+  input:checked + .checkbox_is_disabled {
+    background: var(--g12-t);
+  }
+  .checkbox_is_disabled {
+    background: var(--g12-t);
+    box-shadow:
+      inset 0.2rem 0.2rem 0.4rem var(--shadow2),
+      inset -0.2rem -0.2rem 0.4rem var(--shadow3),
+      inset 0 0 0 2px var(--g8-t) !important;
+  }
+  .checkbox_load {
+    position: absolute;
+    top: 0.5rem;
+    left: 0.5rem;
+    bottom: 0.5rem;
+    right: 0.5rem;
+    max-width: 1.5rem;
+    max-height: 1.5rem;
+    display: grid;
+    place-items: center;
+  }
+  .checkbox_icon {
+    position: absolute;
+    top: 0.3rem;
+    left: 0.3rem;
+    bottom: 0.3rem;
+    right: 0.3rem;
+    max-width: 2rem;
+    max-height: 2rem;
+    display: grid;
+    place-items: center;
+  }
+  .toggle_load {
+    position: absolute;
+    top: 0.4rem;
+    left: var(--left);
+    margin: auto;
+    width: 1.2rem;
+    height: 1.2rem;
+  }
+  .toggle_icon {
+    position: absolute;
+    top: 0.2rem;
+    left: var(--left);
+    margin: auto;
+    width: 1.6rem;
+    height: 1.6rem;
+  }
+  .toggle_switch {
+    position: relative;
+    min-width: 3.4rem;
+    max-width: 3.4rem;
+    min-height: 2rem;
+    max-height: 2rem;
+    margin-left: var(--ml);
+    margin-right: var(--mr);
+    margin-top: var(--mt);
+    margin-bottom: var(--mb);
+  }
+  .toggle_switch input {
+    opacity: 0;
+  }
+  .toggle {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    min-width: 3.4rem;
+    max-width: 3.4rem;
+    min-height: 2rem;
+    max-height: 2rem;
+    border-radius: 1rem;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+    background: var(--bg2);
+    box-shadow:
+      inset 0.2rem 0.2rem 0.4rem var(--shadow2-t),
+      inset -0.2rem -0.2rem 0.4rem var(--shadow2-t),
+      inset 0 0 0 1px var(--border_color);
+  }
+  .toggle:before {
+    position: absolute;
+    content: "";
+    height: 1.6rem;
+    width: 1.6rem;
+    left: 0.2rem;
+    bottom: 0.2rem;
+    border-radius: 50%;
+    background: linear-gradient(-45deg, var(--g24), var(--g20));
+    box-shadow:
+      0.1rem 0.1rem 0.2rem var(--shadow3),
+      -0.1rem -0.1rem 0.2rem var(--shadow2);
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+  }
+  input:checked + .toggle {
+    background: var(--color);
+  }
+  input:checked + .toggle_is_disabled {
+    background: var(--g12-t);
+  }
+  input:checked + .toggle:before {
+    -webkit-transform: translateX(1.4rem);
+    -ms-transform: translateX(1.4rem);
+    transform: translateX(1.4rem);
+  }
+  .toggle_is_disabled:before {
+    background: linear-gradient(-45deg, var(--g16), var(--g16));
+  }
+
+  .dark_theme_input {
+    min-height: 2rem;
+    min-width: 3.4rem;
+  }
+
+  .dark_theme_switch {
+    position: relative;
+    min-width: 3.4rem;
+    max-width: 3.4rem;
+    min-height: 2.4rem;
+    max-height: 2.4rem;
+    margin-left: var(--ml);
+    margin-right: var(--mr);
+    margin-top: var(--mt);
+    margin-bottom: var(--mb);
+  }
+  .dark_theme_switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+  .dark_theme_toggle {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    min-width: 3.4rem;
+    max-width: 3.4rem;
+    min-height: 2.4rem;
+    max-height: 2.4rem;
+    border-radius: 1.2rem;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+    background: var(--bg2);
+    overflow: hidden;
+    box-shadow:
+      inset 0.1rem 0.1rem 0.2rem var(--shadow7-t),
+      inset -0.1rem -0.1rem 0.2rem var(--shadow7-t),
+      inset 0 0 0 1px var(--g10-t);
+  }
+  .dark_theme_toggle:before {
+    position: absolute;
+    content: "";
+    height: 2rem;
+    width: 2rem;
+    left: 0.2rem;
+    bottom: 0.2rem;
+    border-radius: 50%;
+    background: linear-gradient(-45deg, var(--g24-t), var(--g22-t));
+    box-shadow:
+      0 0 0.5rem var(--shadow8-t),
+      inset 0 0 0 1px var(--g16-t);
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+  }
+  input:checked + .dark_theme_is_disabled {
+    background: var(--g12-t);
+  }
+  input:checked + .dark_theme_toggle:before {
+    -webkit-transform: translateX(1rem);
+    -ms-transform: translateX(1rem);
+    transform: translateX(1rem);
+  }
+  .dark_theme_is_disabled:before {
+    background: linear-gradient(-45deg, var(--g16-t), var(--g16-t));
+  }
+  .dark_theme_load {
+    position: absolute;
+    top: 0.5rem;
+    left: var(--left);
+    margin: auto;
+    width: 1.4rem;
+    height: 1.4rem;
+  }
+  .dark_theme_icon {
+    position: absolute;
+    top: 0.5rem;
+    left: var(--left);
+    margin: auto;
+    width: 2rem;
+    height: 2rem;
+  }
+  .dark_theme_icon2 {
+    position: absolute;
+    top: 0.5rem;
+    left: var(--left);
+    margin: auto;
+    width: 1.8rem;
+    height: 1.8rem;
+    cursor: pointer;
+  }
+</style>

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

@@ -0,0 +1,178 @@
+import { create_unique_id, set_closurable, set_closurable_color } from "../../client/index.js"
+import { create_icon_manager } from "../Icon/index.svelte.js"
+import { create_button_manager } from "../Button/index.svelte.js"
+
+export function create_checkbox_manager(config) {
+  let id = create_unique_id(null, 20)
+  let type = $derived(set_closurable(config?.type, "checkbox"))
+  let val_initial = $state(null)
+  let val = $state(null)
+  let val_bool = $state(false)
+  let label = $derived(set_closurable(config?.label, null))
+  let name = $derived(set_closurable(config?.name, "checkbox"))
+  let on_val = $derived(set_closurable(config?.on_val, true))
+  let off_val = $derived(set_closurable(config?.off_val, false))
+  let color = $derived(set_closurable_color(config?.color, "var(--primary-t)"))
+  let is_required = $derived(set_closurable(config?.is_required, false))
+  let is_read_only = $derived(set_closurable(config?.is_read_only, false))
+  let is_disabled = $derived(set_closurable(config?.is_disabled, false))
+  let is_loading = $derived(set_closurable(config?.is_loading, false))
+  let size = $derived(set_closurable(config?.size, 2.4))
+  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 is_nullable = $derived(set_closurable(config?.is_nullable, false))
+  let error_message = $derived(set_closurable(config?.error_message, null))
+  let toggle_null_button_manager = $state(null)
+
+  let check_icon_manager = create_icon_manager({
+    icon_id: "check",
+    color: () => (is_disabled ? "var(--g17-t)" : "var(--primary-contrast-t)"),
+    size: 1.6,
+    sw: 75,
+  })
+
+  let moon_icon_manager = create_icon_manager({
+    icon_id: "moon",
+    size: 1.4,
+    color: "var(--g6-t)",
+    sw: 50,
+  })
+
+  let sun_icon_manager = create_icon_manager({
+    icon_id: "sun",
+    size: 1.4,
+    color: "var(--g6-t)",
+    sw: 50,
+  })
+
+  function set_val(val_input) {
+    const desired_val = val_input == on_val ? on_val : off_val
+    if (is_nullable && val_input == null) {
+      val = null
+      val_bool = false
+    } else if (val != desired_val) {
+      val = val_input
+      val_bool = val_input == on_val
+    }
+  }
+
+  function set_val_from_bool(val_bool_input, is_trigger_on_change = false) {
+    if (val_bool != !!val_bool_input) {
+      const desired_val = val_bool_input ? on_val : off_val
+      val = desired_val
+      val_bool = !!val_bool_input
+      if (is_trigger_on_change) {
+        if (config?.on_change) {
+          config?.on_change(desired_val)
+        }
+      }
+    }
+  }
+
+  function handle_on_hover_change(input) {
+    if (config?.on_hover_change) {
+      config?.on_hover_change(input)
+    }
+  }
+
+  function init(config) {
+    val_initial = set_closurable(config?.val) ?? null
+    val = set_closurable(config?.val) ?? null
+    val_bool = val == on_val
+    if (error_message) {
+      handle_error_trigger()
+    }
+    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 ? true : null),
+    })
+  }
+
+  init(config)
+
+  return {
+    id,
+    get type() {
+      return type
+    },
+    get val_initial() {
+      return val_initial
+    },
+    get val() {
+      return val
+    },
+    get val_bool() {
+      return val_bool
+    },
+    get off_val() {
+      return off_val
+    },
+    get on_val() {
+      return on_val
+    },
+    get name() {
+      return name
+    },
+    get label() {
+      return label
+    },
+    get color() {
+      return color
+    },
+    get is_required() {
+      return is_required
+    },
+    get is_read_only() {
+      return is_read_only
+    },
+    get is_disabled() {
+      return is_disabled
+    },
+    get is_loading() {
+      return is_loading
+    },
+    get error_message() {
+      return error_message
+    },
+    get size() {
+      return size
+    },
+    get ml() {
+      return ml
+    },
+    get mr() {
+      return mr
+    },
+    get mt() {
+      return mt
+    },
+    get mb() {
+      return mb
+    },
+    get check_icon_manager() {
+      return check_icon_manager
+    },
+    get moon_icon_manager() {
+      return moon_icon_manager
+    },
+    get sun_icon_manager() {
+      return sun_icon_manager
+    },
+    get is_nullable() {
+      return is_nullable
+    },
+    get toggle_null_button_manager() {
+      return toggle_null_button_manager
+    },
+    set_val,
+    set_val_from_bool,
+    handle_on_hover_change,
+  }
+}

package/dist/Components/Code/index.svelte

@@ -0,0 +1,23 @@
+<script>
+  import Button from "../Button/index.svelte"
+  import Audio from "../Audio/index.svelte"
+  import LoadingWheel from "../LoadingWheel/index.svelte"
+
+  let { manager } = $props()
+
+  // in future can figure out colors like maybe need to even call server like how images work
+</script>
+
+{#if manager?.content}
+  <div id={manager?.id} class="code_container">
+    <div class="code_top_bar">
+      <p>
+        {manager?.language ?? ""}
+      </p>
+      <Button manager={manager?.copy_button_manager} />
+    </div>
+    <pre><code id={manager?.selector_id} style="padding: .5rem 0;"
+        >{typeof manager?.content == "string" ? manager?.content : JSON.stringify(manager?.content, null, 2)}</code
+      ></pre>
+  </div>
+{/if}

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

@@ -0,0 +1,33 @@
+import { create_button_manager } from "../Button/index.svelte.js"
+import { create_unique_id, copy_to_clipboard, set_closurable } from "../../client/index.js"
+
+export function create_code_manager(config) {
+  const id = create_unique_id(null, 20)
+  let content = $derived(set_closurable(config?.content, null))
+  let copy_button_manager = $state(null)
+
+  function init() {
+    copy_button_manager = create_button_manager({
+      type: "soft",
+      is_uniform: true,
+      support_icon: "clipboard",
+      is_success_animation: true,
+      on_click: () => copy_to_clipboard(typeof content == "string" ? content : JSON.stringify(content)),
+    })
+  }
+
+  init(config)
+
+  return {
+    id,
+    get copy_button_manager() {
+      return copy_button_manager
+    },
+    get language() {
+      return config?.language
+    },
+    get content() {
+      return content
+    },
+  }
+}

package/dist/Components/Color/index.svelte

@@ -0,0 +1,51 @@
+<script>
+  import TransparentBackground from "../TransparentBackground/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+{#if manager?.val}
+<div>
+  <TransparentBackground>
+    {#snippet content()}
+      <div
+        id={manager?.id}
+        class="color_overlay"
+        style="
+          background-color: {manager?.color}; 
+          width: {manager?.size}rem; 
+          height: {manager?.size}rem; 
+          border-radius: {manager?.border_radius}rem;
+        "
+      ></div>
+    {/snippet}
+  </TransparentBackground>
+  {#if manager?.is_show_details}
+    <div>
+      l: {manager?.val?.l ?? 24}, c: {manager?.val?.c ?? 24}, h: {manager?.val?.h ?? 24}, o: {manager?.val?.o ?? 24}, is_dark_theme_invert: {manager?.val?.is_dark_theme_invert}
+    </div>
+  {/if}
+</div>
+{:else}
+  <div
+    id={manager?.id}
+    class="color_overlay"
+    style="
+      width: {manager?.size}rem; 
+      height: {manager?.size}rem; 
+      border-radius: {manager?.border_radius}rem;
+      border: 1px solid var(--shadow2-t);
+      display: grid;
+      place-items: center;
+    "
+  >
+  <p style="font-size: 1.2rem;">null</p>
+</div>
+{/if}
+
+<style>
+  .color_overlay {
+    box-shadow: inset 0 0 0 .1rem var(--g15-t);
+    overflow: hidden;
+  }
+</style>