sveltekit-ui 1.1.74 → 1.1.76

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

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

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

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

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

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