sveltekit-ui 1.0.0

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

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

@@ -0,0 +1,434 @@
+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 input_type = $state(config?.type ?? "text")
+  let error_message = $state(config?.error_message ?? null)
+  let is_text_hidden = $state(defaults?.[type]?.is_text_hidden)
+  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 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) {
+    if (typeof window === "undefined") {
+      return
+    }
+    is_text_hidden = !!input
+    let input_el = document?.querySelector(`#input_${id}`)
+    if (input_el) {
+      if (!!input) {
+        input_el.type = "password"
+      } else {
+        input_el.type = type
+      }
+    }
+  }
+
+  function set_type(input) {
+    type = input
+  }
+
+  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"
+    input_type = config?.is_text_hidden ? "password" : config?.type ?? "text"
+    error_message = config?.error_message ?? null
+    is_text_hidden = config?.is_text_hidden ?? defaults?.[type]?.is_text_hidden
+    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,
+      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

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

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