sveltekit-ui 1.0.0

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

@@ -0,0 +1,45 @@
+<script>
+  import Icon from "$lib/Components/Icon/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+{#if manager?.tag_val}
+  <div style="display: flex;">
+    <div
+      class="tag"
+      style="
+--bg_color: oklch(var(--l6-t) var(--c{manager?.tag_val?.color?.c ?? 16}) var(--h{manager?.tag_val?.color
+        ?.h}) / var(--o4)); 
+--border_color: oklch(var(--l6-t) var(--c{manager?.tag_val?.color?.c ?? 16}) var(--h{manager?.tag_val?.color
+        ?.h}) / var(--o8));"
+    >
+      {#if manager?.tag_val?.display_text}
+        <p
+          style="color: oklch(var(--l5-t) var(--c{manager?.tag_val?.color?.c ?? 4}) var(--h{manager?.tag_val?.color
+            ?.h}));"
+        >
+          {manager?.tag_val?.display_text ?? ""}
+        </p>
+      {/if}
+      {#if manager?.tag_val?.icon}
+        <Icon manager={manager?.icon_manager} />
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .tag {
+    display: flex;
+    flex: 0;
+    gap: 1rem;
+    align-items: center;
+    border-radius: 1rem;
+    border: 1px solid var(--border_color);
+    background-color: var(--bg_color);
+    font-size: 1.4rem;
+    min-height: 3rem;
+    padding: 0.1rem 0.8rem;
+  }
+</style>

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

@@ -0,0 +1,76 @@
+import { create_icon_manager } from "$lib/Components/Icon/index.svelte.js"
+
+export function create_tag_manager(config) {
+  let val = $state(null)
+  let is_dynamic = $state(false)
+  let tag_options = $state(null)
+  let data_type = $state(null)
+  let icon_manager = $state(null)
+
+  let tag_val = $derived(get_tag_val())
+
+  function set_tag_options(input) {
+    let tag_options_loc = []
+    if (Array.isArray(input)) {
+      for (let tag_option_input of input) {
+        tag_options_loc.push({
+          ...tag_option_input, // can fix to clean later
+        })
+      }
+    }
+    tag_options = tag_options_loc
+  }
+
+  function set_val(input) {
+    val = input
+  }
+
+  function get_tag_val() {
+    if (!is_dynamic) {
+      return val
+    }
+    if (Array.isArray(tag_options)) {
+      for (let tag_option of tag_options) {
+        if (is_match(tag_option?.match_for, val)) {
+          return tag_option
+        }
+      }
+    }
+    return null
+  }
+
+  function init(config) {
+    val = config?.val
+    data_type = config?.data_type
+    is_dynamic = !!config?.is_dynamic
+    icon_manager = create_icon_manager({
+      icon_id: () => tag_val?.icon,
+      color: "oklch(var(--l10-t) var(--c{manager?.tag_val?.color?.c ?? 11}) var(--h{manager?.tag_val?.color?.h}))",
+      size: 1.6,
+      sw: 50,
+    })
+    set_tag_options(config?.tag_options)
+  }
+  init(config)
+
+  return {
+    get val() {
+      return val
+    },
+    get tag_val() {
+      return tag_val
+    },
+    get tag_options() {
+      return tag_options
+    },
+    get data_type() {
+      return data_type
+    },
+    get icon_manager() {
+      return icon_manager
+    },
+    init,
+    set_tag_options,
+    set_val,
+  }
+}

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

@@ -0,0 +1,108 @@
+<script>
+  import Button from "$lib/Components/Button/index.svelte"
+  import Popover from "$lib/Components/Popover/index.svelte"
+  import TextInput from "$lib/Components/TextInput/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+{#snippet text_array_input()}
+  {#if manager?.label || manager?.error_message}
+    <div>
+      {#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
+  style="margin-left: {manager?.ml}rem; margin-right: {manager?.mr}rem; margin-top: {manager?.mt}rem; margin-bottom: {manager?.mb}rem; --br: {manager?.border_radius}rem;"
+  >
+  <div class="input_container">
+    <TextInput manager={manager?.input_text_manager} />
+    <div class="plus">
+      <Button manager={manager?.add_button_manager} />
+    </div>
+  </div>
+  {#if Array.isArray(manager?.val) && manager?.val.length > 0}
+    <div class="list_items_container">
+      {#each manager?.val as item, i}
+        <div class="list_item">
+          <div class="display_item" class:is_disabled={manager?.is_disabled}>
+            <p>{item}</p>
+          </div>
+          <div style="display: flex; flex-wrap: 1; margin-left: .5rem; margin-right: .3rem; gap: .5rem;">
+            {#if i > 0}
+              <Button manager={manager?.val_prepped?.[i]?.left_button_manager} />
+            {/if}
+            {#if i < manager?.val?.length - 1}
+              <Button manager={manager?.val_prepped?.[i]?.right_button_manager} />
+            {/if}
+            <Button manager={manager?.val_prepped?.[i]?.delete_button_manager} />
+          </div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+  </div>
+{/snippet}
+
+{#if !manager?.is_popover}
+  {@render text_array_input()}
+{:else}
+  <Popover manager={manager.popover_manager}>
+    {#snippet content()}
+      {@render text_array_input()}
+    {/snippet}
+    {#snippet footer()}
+      <Button manager={manager?.finish_button_manager} />
+    {/snippet}
+  </Popover>
+{/if}
+
+<style>
+  .input_container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+  .is_disabled {
+    color: var(--g12-t);
+  }
+  .plus {
+    position: absolute;
+    top: 50%;
+    right: 1rem;
+    transform: translateY(-50%);
+    user-select: none;
+    height: 1.5rem;
+    width: 1.5rem;
+    z-index: 2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .list_items_container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-top: .6rem;
+  }
+  .list_item {
+    display: flex;
+    align-items: center;
+    border: 2px solid var(--shadow2-t);
+    border-radius: var(--br);
+    background-color: var(--shadow2-t);
+    justify-content: space-between;
+    padding: 0.2rem 0 0.2rem 1rem;
+  }
+  .display_item {
+    max-width: 100%;
+    overflow: scroll;
+    word-wrap: break-word;
+    text-align: start;
+  }
+</style>

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

@@ -0,0 +1,239 @@
+import { create_unique_id, set_closurable } from "$lib/client/index.js"
+import { create_text_input_manager } from "$lib/Components/TextInput/index.svelte.js"
+import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+import { create_popover_manager } from "$lib/Components/Popover/index.svelte.js"
+
+export function create_text_array_input_manager(config) {
+  let id = create_unique_id(null, 20)
+  let val = $state(null)
+  let input_text_manager = $state(null)
+  let add_button_manager = $state(null)
+  let val_prepped = $state(null)
+
+  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 name = $derived(set_closurable(config?.name, "textarray"))
+  let border_radius = $derived(set_closurable(config?.border_radius, 1))
+  let is_no_spaces = $derived(set_closurable(config?.is_no_spaces, false))
+  let max_length = $derived(set_closurable(config?.max_length, 255))
+  let is_disabled = $derived(set_closurable(config?.is_disabled, null))
+  let label = $derived(set_closurable(config?.label, null))
+  let placeholder = $derived(set_closurable(config?.placeholder, null))
+  let header = $derived(set_closurable(config?.header, "Text Array Input"))
+  let is_popover = $derived(set_closurable(config?.is_popover, false))
+  let popover_manager = $state(null)
+  let finish_button_manager = $state(null)
+
+  function set_val_prepped() {
+    let val_prepped_loc = []
+    if (Array.isArray(val)) {
+      for (let i = 0; i < val.length; i++) {
+        let left_button_manager = create_button_manager({
+          type: "outlined",
+          is_uniform: true,
+          support_icon: "arrow",
+          icon_deg: 270,
+          l: 6,
+          c: 1,
+          min_height: 2.6,
+          border_radius: 0.8,
+          is_disabled: () => is_disabled,
+          on_click: () => shift_item(i, -1),
+        })
+        let right_button_manager = create_button_manager({
+          type: "outlined",
+          is_uniform: true,
+          support_icon: "arrow",
+          icon_deg: 90,
+          l: 6,
+          c: 1,
+          min_height: 2.6,
+          border_radius: 0.8,
+          is_disabled: () => is_disabled,
+          on_click: () => shift_item(i, 1),
+        })
+        let delete_button_manager = create_button_manager({
+          type: "outlined",
+          is_uniform: true,
+          support_icon: "x",
+          l: 6,
+          c: 1,
+          min_height: 2.6,
+          border_radius: 0.8,
+          is_disabled: () => is_disabled,
+          on_click: () => delete_item(i),
+        })
+        val_prepped_loc.push({
+          left_button_manager: left_button_manager,
+          right_button_manager: right_button_manager,
+          delete_button_manager: delete_button_manager,
+        })
+      }
+    }
+    val_prepped = val_prepped_loc
+  }
+
+  function add_item() {
+    if (!is_disabled) {
+      if (input_text_manager?.val) {
+        if (!Array.isArray(val)) {
+          val = [input_text_manager?.val]
+        } else {
+          val.push(input_text_manager?.val)
+        }
+        set_val_prepped()
+        input_text_manager.set_val("")
+        input_text_manager.set_focus()
+      }
+      if (config?.on_change) {
+        config?.on_change(val)
+      }
+    }
+  }
+
+  function delete_item(index) {
+    if (!is_disabled) {
+      if (!Array.isArray(val)) {
+        val = null
+      } else {
+        val.splice(index, 1)
+      }
+      set_val_prepped()
+      if (config?.on_change) {
+        config?.on_change(val)
+      }
+    }
+  }
+  function shift_item(index, shift_by) {
+    if (!is_disabled && Array.isArray(val) && index < val.length && !isNaN(shift_by)) {
+      let new_index = index + shift_by
+      if (shift_by < 0) {
+        if (new_index < 0) {
+          new_index = 0
+        }
+      } else {
+        if (new_index >= val.length) {
+          new_index = val.length - 1
+        }
+      }
+      const item = val.splice(index, 1)[0]
+      val.splice(new_index, 0, item)
+      set_val_prepped()
+      if (config?.on_change) {
+        config.on_change(val)
+      }
+    }
+  }
+
+  function set_val(input) {
+    val = input
+    set_val_prepped()
+  }
+
+  function finish() {
+    popover_manager.close()
+    if (typeof config?.on_finish == "function") {
+      config?.on_finish(val)
+    }
+  }
+
+  function init(config) {
+    val = config?.val ?? null
+    input_text_manager = create_text_input_manager({
+      placeholder: () => placeholder,
+      is_no_spaces: () => is_no_spaces,
+    })
+    add_button_manager = create_button_manager({
+      type: "outlined",
+      is_uniform: true,
+      support_icon: "plus",
+      l: 6,
+      c: 1,
+      min_height: 2.6,
+      mr: 0,
+      border_radius: 0.8,
+      is_disabled: () => is_disabled || !input_text_manager?.val || input_text_manager?.val.length < 1,
+      on_click: () => add_item(),
+    })
+    popover_manager = create_popover_manager({
+      header: () => header,
+      min_width: 280,
+      target_width: 600,
+      min_height: 250,
+      target_height: 600,
+      type: "center",
+    })
+    finish_button_manager = create_button_manager({
+      text: "Finish",
+      mt: 1,
+      on_click: () => finish(),
+    })
+    set_val_prepped()
+  }
+
+  init(config)
+
+  return {
+    id,
+    get val() {
+      return val
+    },
+    get name() {
+      return name
+    },
+    get label() {
+      return label
+    },
+    get placeholder() {
+      return placeholder
+    },
+    get is_no_spaces() {
+      return is_no_spaces
+    },
+    get max_length() {
+      return max_length
+    },
+    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
+    },
+    get input_text_manager() {
+      return input_text_manager
+    },
+    get add_button_manager() {
+      return add_button_manager
+    },
+    get val_prepped() {
+      return val_prepped
+    },
+    get is_popover() {
+      return is_popover
+    },
+    get popover_manager() {
+      return popover_manager
+    },
+    get finish_button_manager() {
+      return finish_button_manager
+    },
+    add_item,
+    delete_item,
+    shift_item,
+    set_val,
+  }
+}

package/src/lib/Components/TextInput/PasswordTooltip/index.svelte

@@ -0,0 +1,89 @@
+<script>
+  let {
+    password_min_length = null,
+    is_password_requires_lowercase = false,
+    is_password_requires_uppercase = false,
+    is_password_requires_number = false,
+    is_password_requires_special_char = false,
+    val = null,
+  } = $props()
+
+  let contains_lowercase_letter = $derived(val ? val.toUpperCase() != val : false)
+  let contains_uppercase_letter = $derived(val ? val.toLowerCase() != val : false)
+  let contains_number = $derived(val ? /[0-9]/.test(val) : false)
+  let contains_special_char = $derived(val ? /[!-\/:-@[-`{-~]/.test(val) : false)
+  let is_password_long_enough = $derived(val ? val.length > password_min_length : false)
+
+  let is_password_standard_met = $derived(
+    (!is_password_requires_lowercase || (is_password_requires_lowercase && contains_lowercase_letter)) &&
+      (!is_password_requires_uppercase || (is_password_requires_uppercase && contains_uppercase_letter)) &&
+      (!is_password_requires_special_char || (is_password_requires_special_char && contains_special_char)) &&
+      (!is_password_requires_number || (is_password_requires_number && contains_number)) &&
+      is_password_long_enough
+  )
+
+  let is_show_password_tip = $derived(val ? val.length > 0 && !is_password_standard_met : false)
+</script>
+
+{#snippet check_x(is_check)}
+  <div class="icon_frame" style="--color1: var(--primary-t); --color2: var(--g6-t);">
+    {#if is_check}
+      <svg id="check" class="svg_cover" data-name="check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        <path fill="none" stroke="var(--color1)" stroke-width="75" d="M432.4 116.9L177.5 371.7l-104-104" />
+      </svg>
+    {:else}
+      <svg id="x" class="svg_cover" data-name="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        <path fill="none" stroke="var(--color2)" stroke-width="75" d="M75 437L437 75M75 75l362 362" />
+      </svg>
+    {/if}
+  </div>
+{/snippet}
+
+{#if is_show_password_tip}
+  <div class="password_guide">
+    <div class="check_container">
+      {@render check_x(contains_lowercase_letter)}
+      <p class="label">Lowercase Letter</p>
+    </div>
+    <div class="check_container">
+      {@render check_x(contains_uppercase_letter)}
+      <p class="label">Uppercase Letter</p>
+    </div>
+    <div class="check_container">
+      {@render check_x(contains_number)}
+      <p class="label">Number</p>
+    </div>
+    <div class="check_container">
+      {@render check_x(contains_special_char)}
+      <p class="label">Special Character</p>
+    </div>
+    <div class="check_container">
+      {@render check_x(is_password_long_enough)}
+      <p class="label">8 characters or more</p>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .password_guide {
+    margin-left: 0.5rem;
+  }
+  .check_container {
+    display: flex;
+    align-items: center;
+  }
+  .label {
+    margin-left: 0.3rem;
+    font-size: 1.4rem;
+    line-height: 1.6rem;
+  }
+  .icon_frame {
+    width: 1.1rem;
+    height: 1.1rem;
+    display: flex;
+    align-items: center;
+  }
+  .svg_cover {
+    width: 100%;
+  }
+</style>