sveltekit-ui 1.0.0

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

@@ -0,0 +1,85 @@
+<script>
+  let { manager } = $props()
+</script>
+
+<div class="container">
+  <div
+    class="code_wrapper"
+    style="--br: {manager?.border_radius}rem; margin-left: {manager?.ml}rem; margin-right: {manager?.mr}rem; margin-top: {manager?.mt}rem; margin-bottom: {manager?.mb}rem;"
+  >
+    <input
+      id={`auth_code_input_${manager?.id}`}
+      class="code_input"
+      class:is_disabled={manager?.is_disabled}
+      name={manager?.name}
+      required={manager?.is_required}
+      readonly={manager?.is_read_only}
+      disabled={manager?.is_disabled}
+      type="text"
+      inputmode="numeric"
+      pattern="[0-9]*"
+      autocomplete={manager?.autocomplete}
+      value={manager?.val}
+      maxlength={6}
+      oninput={(e) => manager?.set_val(e?.target?.value)}
+    />
+    <div class="underscores"></div>
+  </div>
+</div>
+
+<style>
+  .container {
+    display: flex;
+    justify-content: center;
+  }
+  .code_wrapper {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    width: 24rem;
+    height: 7.5rem;
+    border-radius: 1rem;
+    background: var(--bg2);
+  }
+  .code_input {
+    position: absolute;
+    display: flex;
+    border: none;
+    border-radius: 1rem;
+    letter-spacing: 0.2ch;
+    font-size: 50px;
+    padding: 5px 0 5px 18px;
+    border-radius: var(--br);
+    background: transparent;
+    box-shadow: 0 0 0 1px var(--shadow7-t);
+    -webkit-box-shadow: 0 0 0 1px var(--shadow7-t);
+    width: 24rem;
+    height: 7.5rem;
+  }
+  .underscores {
+    position: absolute;
+    display: flex;
+    bottom: 5px;
+    left: 20px;
+    width: 24rem;
+    height: 0.5rem;
+    letter-spacing: 0.1ch;
+    font-size: 40px;
+    background: repeating-linear-gradient(90deg, var(--g6-t) 0, var(--g6-t) 1ch, transparent 0, transparent 1.5ch) 0
+      100%/ 21rem 2px no-repeat;
+  }
+  .is_disabled {
+    color: var(--g12-t);
+  }
+  input:focus-visible {
+    outline: none;
+  }
+  *:focus-visible {
+    box-shadow:
+      0 0 0 1px var(--selected-t),
+      0 0 0 2px var(--g1-t) !important;
+    -webkit-box-shadow:
+      0 0 0 1px var(--selected-t),
+      0 0 0 2px var(--g1-t) !important;
+  }
+</style>

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

@@ -0,0 +1,95 @@
+import { create_unique_id } from "$lib/client/index.js"
+
+export function create_auth_code_input_manager(config) {
+  const id = create_unique_id(null, 20)
+  let val = $state(config?.val)
+  let name = $state(config?.name ?? "code")
+  let is_required = $state(config?.is_required ?? false)
+  let is_read_only = $state(config?.is_read_only ?? false)
+  let autocomplete = $state(config?.autocomplete ?? "one-time-code")
+  let is_valid = $state(config?.is_valid)
+  let is_disabled = $state(config?.is_disabled ?? false)
+  let border_radius = $state(config?.border_radius ?? 1)
+  let ml = $state(config?.ml ?? 0)
+  let mr = $state(config?.mr ?? 0)
+  let mt = $state(config?.mt ?? 0)
+  let mb = $state(config?.mb ?? 0)
+
+  function set_val(input) {
+    const cleaned_val = input ? input.replace(/\D+/g, "") : null
+    val = cleaned_val
+    is_valid = val && val.length == 6
+    if (config?.on_change) {
+      config?.on_change(cleaned_val)
+    }
+    if (val.length == 6 && config?.on_sixth) {
+      config?.on_sixth(cleaned_val)
+    }
+  }
+
+  function set_focus() {
+    let input_el = document?.querySelector(`#auth_code_input_${id}`)
+    if (input_el) {
+      input_el.focus()
+    }
+  }
+
+  function init(config) {
+    val = config?.val ?? null
+    name = config?.name ?? "code"
+    is_required = config?.is_required ?? false
+    is_read_only = config?.is_read_only ?? false
+    autocomplete = config?.autocomplete ?? "one-time-code"
+    is_valid = val && val.length == 6
+    is_disabled = config?.is_disabled ?? false
+    border_radius = config?.border_radius ?? 1
+    ml = config?.ml ?? 0
+    mr = config?.mr ?? 0
+    mt = config?.mt ?? 0
+    mb = config?.mb ?? 0
+  }
+
+  init(config)
+
+  return {
+    id,
+    get val() {
+      return val
+    },
+    get name() {
+      return name
+    },
+    get is_required() {
+      return is_required
+    },
+    get is_read_only() {
+      return is_read_only
+    },
+    get autocomplete() {
+      return autocomplete
+    },
+    get is_valid() {
+      return is_valid
+    },
+    get is_disabled() {
+      return is_disabled
+    },
+    get border_radius() {
+      return border_radius
+    },
+    get ml() {
+      return ml
+    },
+    get mr() {
+      return mr
+    },
+    get mt() {
+      return mt
+    },
+    get mb() {
+      return mb
+    },
+    set_val,
+    set_focus,
+  }
+}

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

@@ -0,0 +1,27 @@
+<script>
+  import Button from "$lib/Components/Button/index.svelte"
+  import Icon from "$lib/Components/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/src/lib/Components/Breadcrumbs/index.svelte.js

@@ -0,0 +1,88 @@
+import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+import { create_icon_manager } from "$lib/Components/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,
+  }
+}