sveltekit-ui 1.1.74 → 1.1.76

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

@@ -1,223 +0,0 @@
-<script>
-  import Button from "$lib/Components/Button/index.svelte"
-  import Popover from "$lib/Components/Popover/index.svelte"
-  import EyeIcon from "$lib/Components/Eye/index.svelte"
-  import PasswordTooltip from "./PasswordTooltip/index.svelte"
-
-  let { manager } = $props()
-</script>
-
-{#snippet text_edit_content()}
-  <div>
-    <div class="container">
-      {#if manager?.label || manager?.error_message}
-        <div style="display: inline-flex;">
-          {#if manager?.label}
-            <label for={manager?.id}>{manager?.label}:</label>
-          {/if}
-          {#if manager?.error_message}
-            <p class="error_text">{manager?.error_message}</p>
-          {/if}
-        </div>
-      {/if}
-      <div class="input_container">
-        {#if manager?.is_nullable}
-          <Button manager={manager?.set_null_button_manager} />
-        {/if}
-        {#key manager?.rerender_input_trigger}
-          {#if manager?.type == "text_area"}
-            <textarea
-              id={`input_${manager?.id}`}
-              class="input_box textarea_sty"
-              class:is_disabled={manager?.is_disabled}
-              class:error={manager?.error_message && manager?.val && manager?.val.length > 0}
-              class:no_resize={!manager?.is_resizable}
-              style="max-height: {manager?.max_height}rem; border-radius: {manager?.border_radius}rem; margin-left: {manager?.ml}rem; margin-right: {manager?.mr}rem; margin-top: {manager?.mt}rem; margin-bottom: {manager?.mb}rem;"
-              type={manager?.input_type}
-              name={manager?.name}
-              autocomplete={manager?.autocomplete}
-              placeholder={manager?.placeholder}
-              required={manager?.is_required}
-              readonly={manager?.is_read_only}
-              disabled={manager?.is_disabled}
-              maxlength={manager?.max_length}
-              min={manager?.min}
-              max={manager?.max}
-              value={manager?.val}
-              rows={manager?.rows}
-              onblur={() => manager?.handle_blur()}
-              oninput={(e) => manager?.set_val(e?.target?.value, true)}
-            ></textarea>
-            {#if manager?.val && manager?.is_show_limit}
-              <p class="limit">{manager?.val.length}/{manager?.max_length}</p>
-            {/if}
-          {:else}
-            <input
-              id={`input_${manager?.id}`}
-              type={manager?.input_type}
-              name={manager?.name}
-              autocomplete={manager?.autocomplete}
-              placeholder={manager?.placeholder}
-              {...["number", "tel"].includes(manager?.input_type) ? { pattern: "[0-9]*" } : {}}
-              required={manager?.is_required}
-              readonly={manager?.is_read_only}
-              disabled={manager?.is_disabled}
-              class="input_box"
-              class:is_disabled={manager?.is_disabled}
-              class:error={manager?.error_message && manager?.val && manager?.val.length > 0}
-              style="border-radius: {manager?.border_radius}rem; margin-left: {manager?.ml}rem; margin-right: {manager?.mr}rem; margin-top: {manager?.mt}rem; margin-bottom: {manager?.mb}rem;"
-              maxlength={manager?.max_length}
-              min={manager?.min}
-              max={manager?.max}
-              value={manager?.val_closurable}
-              onblur={() => manager?.handle_blur()}
-              oninput={(e) => manager?.set_val(e?.target?.value, true)}
-            />
-          {/if}
-        {/key}
-        {#if manager?.is_text_hidable || manager?.type == "password"}
-          <div class="eye_icon">
-            <EyeIcon
-              is_eye_shown={manager?.is_text_hidden}
-              on_change={(input) => manager?.set_is_text_hidden(!!input)}
-              eye_color="var(--selected-t)"
-            />
-          </div>
-        {/if}
-      </div>
-      {#if manager?.type == "password" && manager?.is_password_tooltip_used && !manager?.is_disabled}
-        <PasswordTooltip
-          password_min_length={manager?.password_min_length}
-          is_password_requires_lowercase={manager?.is_password_requires_lowercase}
-          is_password_requires_uppercase={manager?.is_password_requires_uppercase}
-          is_password_requires_number={manager?.is_password_requires_number}
-          is_password_requires_special_char={manager?.is_password_requires_special_char}
-          val={manager?.val}
-        />
-      {/if}
-      {#if manager?.is_preview_img && manager?.is_image_url}
-        <div class="img">
-          <img
-            class:is_img_disabled={manager?.is_disabled}
-            src={manager?.val}
-            height={manager?.preview_img_size}
-            width={manager?.preview_img_size}
-            alt="url rendered"
-          />
-        </div>
-      {/if}
-    </div>
-  </div>
-{/snippet}
-
-{#if !manager?.is_popover}
-  {@render text_edit_content()}
-{:else}
-  {#if manager?.is_popover_edit_content}
-    <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 style="display: flex; gap: .5rem">
-        {#if manager?.val != null}
-          <p>{manager?.val}</p>
-        {:else}
-          <p style="color: var(--warning-t)">Null</p>
-        {/if}
-        <Button manager={manager?.popover_edit_button_manager} />
-      </div>
-    </div>
-  {/if}
-  <Popover manager={manager.popover_manager}>
-    {#snippet content()}
-      {@render text_edit_content()}
-    {/snippet}
-    {#snippet footer()}
-      <Button manager={manager?.finish_button_manager} />
-    {/snippet}
-  </Popover>
-{/if}
-
-<style>
-  .container {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-  }
-  .input_container {
-    position: relative;
-    display: flex;
-    gap: 0.5rem;
-    flex-direction: column;
-    flex: 1;
-  }
-  .is_disabled {
-    color: var(--g12-t);
-  }
-  .eye_icon {
-    position: absolute;
-    top: 50%;
-    right: 1.3rem;
-    transform: translateY(-50%);
-    user-select: none;
-    min-height: 1rem;
-    min-width: 1rem;
-    z-index: 1;
-  }
-  label {
-    font-size: 1.2rem;
-    font-weight: 600;
-    color: var(--g12-t);
-    line-height: 1.6rem;
-    margin-right: 0.5rem;
-  }
-  .error {
-    box-shadow: inset 0 0 0 1px var(--error-t);
-    -webkit-box-shadow: inset 0 0 0 1px var(--error-t);
-  }
-  .error_text {
-    font-size: 1.2rem;
-    color: oklch(var(--l5-t) var(--c7) var(--h1));
-    line-height: 1.2rem;
-    line-height: 1.2rem;
-  }
-  input {
-    box-sizing: border-box !important;
-  }
-  .img {
-    display: flex;
-    align-items: left;
-    margin: 0.5rem;
-  }
-  .is_img_disabled {
-    filter: grayscale(100%) opacity(40%);
-  }
-  .textarea_sty {
-    padding-top: 0.8rem;
-    resize: vertical;
-  }
-  .no_resize {
-    resize: none;
-  }
-  .limit {
-    position: absolute;
-    right: 1rem;
-    bottom: 0.8rem;
-    font-size: 1.2rem;
-    color: var(--g8-t);
-    font-weight: 300;
-  }
-  input,
-  textarea {
-    min-width: 0;
-    width: 100%;
-    box-sizing: border-box;
-  }
-</style>

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

@@ -1,424 +0,0 @@
-import { create_unique_id, set_closurable } from "$lib/client/index.js"
-import { create_popover_manager } from "$lib/Components/Popover/index.svelte.js"
-import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
-import { browser } from "$app/environment"
-
-export function create_text_input_manager(config) {
-  const defaults = {
-    text_area: {
-      name: "text",
-      placeholder: "text",
-      autocomplete: "off",
-      is_text_hidable: false,
-      is_text_hidden: false,
-    },
-    text: {
-      name: "text",
-      placeholder: "text",
-      autocomplete: "off",
-      is_text_hidable: false,
-      is_text_hidden: false,
-    },
-    email: {
-      name: "email",
-      placeholder: "email",
-      autocomplete: "email",
-      is_text_hidable: false,
-      is_text_hidden: false,
-    },
-    password: {
-      name: "password",
-      placeholder: "password",
-      autocomplete: "current-password",
-      is_text_hidable: true,
-      is_text_hidden: true,
-    },
-    number: {
-      name: "number",
-      placeholder: "number",
-      autocomplete: "off",
-      is_text_hidable: false,
-      is_text_hidden: false,
-    },
-    tel: {
-      name: "tel",
-      placeholder: "telephone",
-      autocomplete: "tel-national",
-      is_text_hidable: false,
-      is_text_hidden: false,
-    },
-    url: {
-      name: "url",
-      placeholder: "url",
-      autocomplete: "url",
-      is_text_hidable: false,
-      is_text_hidden: false,
-    },
-    search: {
-      name: "search",
-      placeholder: "search",
-      autocomplete: "off",
-      is_text_hidable: false,
-      is_text_hidden: false,
-    },
-  }
-
-  const id = create_unique_id(null, 20)
-  let val = $state(config?.val)
-  let type = $state(config?.type ?? "text")
-  let error_message = $state(config?.error_message ?? null)
-  let is_text_hidden = $state(defaults?.[config?.type ?? "text"]?.is_text_hidden ?? false)
-  let is_image_url = $state(false)
-  let is_valid = $state(false)
-  let popover_manager = $state(null)
-  let popover_edit_button_manager = $state(null)
-  let finish_button_manager = $state(null)
-  let rerender_input_trigger = $state(0)
-
-  let input_type = $derived(is_text_hidden ? "password" : type == "password" ? "text" : type)
-  let val_closurable = $derived(set_closurable(val, null))
-  let is_popover = $derived(set_closurable(config?.is_popover, false))
-  let popover_header = $derived(set_closurable(config?.popover_header, null))
-  let label = $derived(set_closurable(config?.label, null))
-  let name = $derived(set_closurable(config?.name, "checkbox"))
-  let is_required = $derived(set_closurable(config?.is_required, false))
-  let is_nullable = $derived(set_closurable(config?.is_nullable, false))
-  let replace_spaces_with = $derived(set_closurable(config?.replace_spaces_with, null))
-  let is_numbers_only = $derived(set_closurable(config?.is_numbers_only, null))
-  let is_text_hidable = $derived(set_closurable(config?.is_text_hidable, defaults?.[type]?.is_text_hidable))
-  let autocomplete = $derived(set_closurable(config?.autocomplete, defaults?.[type]?.autocomplete))
-  let placeholder = $derived(set_closurable(config?.placeholder, defaults?.[type]?.placeholder))
-  let max_length = $derived(set_closurable(config?.max_length, 100000))
-  let is_disabled = $derived(set_closurable(config?.is_disabled, false))
-  let password_min_length = $derived(set_closurable(config?.password_min_length, 7))
-  let is_password_requires_lowercase = $derived(set_closurable(config?.is_password_requires_lowercase, true))
-  let is_password_requires_uppercase = $derived(set_closurable(config?.is_password_requires_uppercase, false))
-  let is_password_requires_number = $derived(set_closurable(config?.is_password_requires_number, false))
-  let is_password_requires_special_char = $derived(set_closurable(config?.is_password_requires_special_char, false))
-  let is_password_tooltip_used = $derived(set_closurable(config?.is_password_tooltip_used, true))
-  let is_preview_img = $derived(set_closurable(config?.is_preview_img, false))
-  let preview_img_size = $derived(set_closurable(config?.preview_img_size, 32))
-  let min = $derived(set_closurable(config?.min, -9007199254740990))
-  let max = $derived(set_closurable(config?.max, 9007199254740990))
-  let border_radius = $derived(set_closurable(config?.border_radius, 1))
-  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_resizable = $derived(set_closurable(config?.is_resizable, false))
-  let is_show_limit = $derived(set_closurable(config?.is_show_limit, false))
-  let rows = $derived(set_closurable(config?.rows, 5))
-  let max_height = $derived(set_closurable(config?.max_height, 30))
-  let update_button_text = $derived(set_closurable(config?.update_button_text, null))
-  let is_popover_edit_content = $derived(set_closurable(config?.is_popover_edit_content, false))
-
-  let set_null_button_manager = $state(null)
-
-  function handle_blur(e) {
-    if (e?.type == "input") {
-      if (config?.on_blur) {
-        config?.on_blur(val)
-      }
-    }
-  }
-
-  function set_val(val_input, is_iternal = false) {
-    error_message = null
-    is_valid = false
-    if (val_input) {
-      if (replace_spaces_with !== null) {
-        val_input = val_input.replace(/\s+/g, replace_spaces_with)
-      }
-      if (val_input && is_numbers_only) {
-        val_input = val_input.replace(/\D+/g, "")
-      }
-      if (val_input && type == "tel") {
-        val_input = val_input.replace(/\D+/g, "")
-      }
-      if (type == "url") {
-        const is_valid_url = is_valid_web_url(val_input)
-        is_valid = is_valid_url
-        if (!is_valid_url) {
-          error_message = "Not Valid URL"
-        } else if (is_preview_img && is_valid_web_url(val_input)) {
-          is_image_url = type == "url" && check_image_url(val_input)
-        }
-      } else if (type == "password") {
-        const is_password_standard_met = is_password_valid(val_input)
-        is_valid = is_password_standard_met
-        if (!is_password_standard_met) {
-          error_message = "Password standard not met"
-        }
-      } else if (type == "email") {
-        const email_regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-        const is_valid_email = val_input ? email_regex.test(val_input.toLowerCase()) : false
-        is_valid = is_valid_email
-        if (!is_valid_email) {
-          error_message = "Email standard not met"
-        } else {
-          is_valid = true
-        }
-      }
-    }
-    if (type == "number") {
-      val_input = val_input == null ? null : Number(val_input)
-    }
-    val = val_input
-    if (!is_iternal) {
-      rerender_input_trigger++
-    }
-    if (typeof config?.on_change == "function") {
-      config?.on_change(val_input)
-    }
-  }
-
-  async function check_image_url(val) {
-    if (is_preview_img && is_valid_web_url(val)) {
-      const res = await fetch(url)
-      const buff = await res.blob()
-      const is_valid = buff.type.startsWith("image/")
-      return is_valid
-    } else {
-      return false
-    }
-  }
-
-  function is_password_valid(val) {
-    const contains_lowercase_letter = val ? val.toUpperCase() != val : false
-    const contains_uppercase_letter = val ? val.toLowerCase() != val : false
-    const contains_number = val ? /[0-9]/.test(val) : false
-    const contains_special_char = val ? /[!-\/:-@[-`{-~]/.test(val) : false
-    const is_password_long_enough = val ? val.length > password_min_length : false
-    const is_password_standard_met =
-      (!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
-    return is_password_standard_met
-  }
-
-  function is_valid_web_url(url) {
-    let reg_ex =
-      /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/gm
-    return reg_ex.test(url)
-  }
-
-  function set_focus() {
-    if (!is_disabled) {
-      if (browser) {
-        let input_el = document?.querySelector(`#input_${id}`)
-        input_el.focus()
-      }
-    }
-  }
-
-  function set_is_text_hidden(input) {
-    is_text_hidden = !!input
-  }
-
-  function set_type(input) {
-    type = input ?? "text"
-    is_text_hidden = defaults?.[type]?.is_text_hidden ?? false
-  }
-
-  async function finish() {
-    if (typeof config?.on_finish == "function") {
-      const res = await config?.on_finish(val)
-      if (res?.is_success == true) {
-        popover_manager.show_temp_message(res?.message ?? "Success", "success")
-      } else if (res?.is_success == false) {
-        popover_manager.show_temp_message(res?.message ?? "Error", "error", 1800, false)
-      } else {
-        popover_manager.close()
-      }
-    } else {
-      popover_manager.close()
-    }
-  }
-
-  function init(config) {
-    val = config?.val ?? null
-    type = config?.type ?? "text"
-    error_message = config?.error_message ?? null
-    is_text_hidden = config?.is_text_hidden ?? defaults?.[type]?.is_text_hidden ?? false
-    popover_manager = create_popover_manager({
-      type: "center",
-      header: popover_header ?? "Text Editor",
-      min_width: 350,
-      target_width: 550,
-      min_height: 300,
-      target_height: 500,
-      // anchor_id: () => `button_${main_toggle_button_anchor_id}`, tbd
-    })
-    popover_edit_button_manager = create_button_manager({
-      type: "soft",
-      is_uniform: true,
-      support_icon: "edit",
-      icon_size: 1.6,
-      icon_sw: 40,
-      min_height: 2,
-      border_radius: 0.5,
-      is_disabled: is_disabled,
-      popover_target: () => `popover_${popover_manager?.id}`,
-    })
-    set_null_button_manager = create_button_manager({
-      type: "outlined",
-      text: "Set Null",
-      is_compressed: true,
-      is_disabled: () => val == null,
-      on_click: () => (val = null),
-    })
-    finish_button_manager = create_button_manager({
-      text: update_button_text ?? "Finish",
-      on_click: () => finish(),
-    })
-  }
-
-  init(config)
-
-  return {
-    id,
-    get val() {
-      return val
-    },
-    get val_closurable() {
-      return val_closurable
-    },
-    get type() {
-      return type
-    },
-    get input_type() {
-      return input_type
-    },
-    get name() {
-      return name
-    },
-    get label() {
-      return label
-    },
-    get autocomplete() {
-      return autocomplete
-    },
-    get placeholder() {
-      return placeholder
-    },
-    get is_required() {
-      return is_required
-    },
-    get error_message() {
-      return error_message
-    },
-    get replace_spaces_with() {
-      return replace_spaces_with
-    },
-    get is_numbers_only() {
-      return is_numbers_only
-    },
-    get is_text_hidable() {
-      return is_text_hidable
-    },
-    get is_text_hidden() {
-      return is_text_hidden
-    },
-    get max_length() {
-      return max_length
-    },
-    get is_disabled() {
-      return is_disabled
-    },
-    get password_min_length() {
-      return password_min_length
-    },
-    get is_password_requires_lowercase() {
-      return is_password_requires_lowercase
-    },
-    get is_password_requires_uppercase() {
-      return is_password_requires_uppercase
-    },
-    get is_password_requires_number() {
-      return is_password_requires_number
-    },
-    get is_password_requires_special_char() {
-      return is_password_requires_special_char
-    },
-    get is_password_tooltip_used() {
-      return is_password_tooltip_used
-    },
-    get is_preview_img() {
-      return is_preview_img
-    },
-    get preview_img_size() {
-      return preview_img_size
-    },
-    get min() {
-      return min
-    },
-    get max() {
-      return max
-    },
-    get border_radius() {
-      return border_radius
-    },
-    get ml() {
-      return ml
-    },
-    get mr() {
-      return mr
-    },
-    get mt() {
-      return mt
-    },
-    get mb() {
-      return mb
-    },
-    get is_resizable() {
-      return is_resizable
-    },
-    get is_show_limit() {
-      return is_show_limit
-    },
-    get rows() {
-      return rows
-    },
-    get max_height() {
-      return max_height
-    },
-    get is_valid() {
-      return is_valid
-    },
-    get is_image_url() {
-      return is_image_url
-    },
-    get popover_manager() {
-      return popover_manager
-    },
-    get popover_edit_button_manager() {
-      return popover_edit_button_manager
-    },
-    get finish_button_manager() {
-      return finish_button_manager
-    },
-    get is_popover() {
-      return is_popover
-    },
-    get set_null_button_manager() {
-      return set_null_button_manager
-    },
-    get is_nullable() {
-      return is_nullable
-    },
-    get rerender_input_trigger() {
-      return rerender_input_trigger
-    },
-    get is_popover_edit_content() {
-      return is_popover_edit_content
-    },
-    init,
-    handle_blur,
-    set_val,
-    set_focus,
-    set_type,
-    set_is_text_hidden,
-  }
-}

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

@@ -1,7 +0,0 @@
-<script>
-  let { manager } = $props()
-</script>
-
-<time datetime={manager?.datetime} style={manager?.text_color ? `color: ${manager?.text_color};` : ""}
-  >{manager?.content}</time
->

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

@@ -1,38 +0,0 @@
-import { get_time_object_from_val } from "$lib/Components/TimeInput/index.js"
-import { set_closurable_color, set_closurable } from "$lib/client/index.js"
-
-export function create_time_manager(config) {
-  let datetime = $state(null)
-  let content = $state(null)
-  let text_color = $derived(set_closurable_color(config?.text_color, null))
-
-  function init(config) {
-    const time_full = get_time_object_from_val(
-      set_closurable(config?.val),
-      set_closurable(config?.format),
-      set_closurable(config?.granularity),
-      set_closurable(config?.timezone)
-    )
-    datetime = time_full?.datetime ?? time_full?.iso_8601 ?? null
-    content = time_full?.content ?? set_closurable(config?.val)
-    if (config?.display_format == "calendar_date" && time_full?.year) {
-      content = `${time_full?.year}-${String(time_full?.month).padStart(2, "0")}-${String(
-        time_full?.day_of_month
-      ).padStart(2, "0")}`
-    }
-  }
-
-  init(config)
-
-  return {
-    get text_color() {
-      return text_color
-    },
-    get datetime() {
-      return datetime
-    },
-    get content() {
-      return content
-    },
-  }
-}