sveltekit-ui 1.0.0

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

@@ -0,0 +1,403 @@
+import { create_unique_id, set_closurable, set_closurable_color } from "$lib/client/index.js"
+import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+import { create_popover_manager } from "$lib/Components/Popover/index.svelte.js"
+import { create_text_input_manager } from "$lib/Components/TextInput/index.svelte.js"
+import { create_icon_manager } from "$lib/Components/Icon/index.svelte.js"
+
+export function create_dropdown_manager(config) {
+  const id = create_unique_id(null, 20)
+  let val = $state(null)
+  let options = $state(null)
+
+  let label = $derived(set_closurable(config?.label, null))
+  let type = $derived(set_closurable(config?.type, "dropdown")) // dropdown, horiz_selector
+  let is_collapsed = $derived(set_closurable(config?.is_collapsed, false))
+  let val_key = $derived(set_closurable(config?.val_key, "key"))
+  let row_display_keys = $derived(set_closurable(config?.row_display_keys, ["name"]))
+  let button_display_keys = $derived(set_closurable(config?.button_display_keys, ["name"]))
+  let is_multiselect = $derived(set_closurable(config?.is_multiselect, false))
+  let is_set_null_button = $derived(set_closurable(config?.is_set_null_button, false))
+  let is_disabled = $derived(set_closurable(config?.is_disabled, false))
+  let header = $derived(set_closurable(config?.header, null))
+  let header_icon = $derived(set_closurable(config?.header_icon, null))
+  let header_icon_deg = $derived(set_closurable(config?.header_icon_deg, 0))
+  let min_header_width = $derived(set_closurable(config?.min_header_width, 2))
+  let spacer_color = $derived(set_closurable_color(config?.spacer_color, "var(--shadow2-t)"))
+  let error_message = $derived(set_closurable(config?.error_message, null))
+  let placeholder = $derived(set_closurable(config?.placeholder, "Select"))
+  let target_width = $derived(set_closurable(config?.target_width, 250))
+  let target_height = $derived(set_closurable(config?.target_height, 200))
+  let font_weight = $derived(set_closurable(config?.font_weight, 500))
+  let font_size = $derived(set_closurable(config?.font_size, 1.2))
+  let is_show_x = $derived(set_closurable(config?.is_show_x, false))
+  let text_align = $derived(set_closurable(config?.text_align, "left"))
+  let justify_content = $derived(set_closurable(config?.justify_content, "space-between"))
+  let is_show_arrow = $derived(set_closurable(config?.is_show_arrow, true))
+  let button_type = $derived(set_closurable(config?.button_type, "outlined"))
+  let selected_font_size = $derived(set_closurable(config?.selected_font_size, null))
+  let is_button_compressed = $derived(set_closurable(config?.is_button_compressed, false))
+  let is_searchable = $derived(set_closurable(config?.is_searchable, false))
+  let is_hide_button = $derived(set_closurable(config?.is_hide_button, false))
+  let anchor_id = $derived(set_closurable(config?.anchor_id, 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 item_mb = $derived(set_closurable(config?.item_mb, 0))
+
+  let filtered_button_managers = $state(null)
+  let search_text_input_manager = $state(null)
+  let popover_manager = $state(null)
+  let toggle_button_manager = $state(null)
+  let clear_button_manager = $state(null)
+  let toggle_button_text = $derived(get_button_text())
+  let header_icon_manager = $state(null)
+  let search_requests_is_loading = $state([])
+
+  function set_filtered_button_managers(search_val = null) {
+    let filtered_button_managers_loc = []
+    if (Array.isArray(options) && options.length > 0) {
+      for (let option of options) {
+        if (
+          [null, ""].includes(search_val) ||
+          (option?.[val_key] && option?.[val_key].length > 0 && search_val && option?.[val_key].includes(search_val)) ||
+          row_display_keys.some((h) => option?.[h].includes(search_val))
+        ) {
+          filtered_button_managers_loc.push(
+            create_button_manager({
+              type: "soft",
+              selected_type: () =>
+                val != null &&
+                (option?.[val_key] == val || (Array.isArray(val) && val.some((h) => h === option?.[val_key])))
+                  ? "half_selected"
+                  : null,
+              text: Array.isArray(row_display_keys) ? row_display_keys.map((h) => option?.[h]).join(" ") : option?.name,
+              text_align: text_align,
+              font_size: font_size,
+              font_weight: font_weight,
+              is_compressed: type == "horiz_selector",
+              is_no_wrap: type == "horiz_selector",
+              mb: item_mb,
+              l: 2,
+              c: 1,
+              on_click: () => item_clicked(option),
+            })
+          )
+        }
+      }
+    }
+    filtered_button_managers = filtered_button_managers_loc
+  }
+
+  function set_val(input) {
+    val = set_closurable(input)
+  }
+
+  function get_button_text() {
+    let button_text_loc = placeholder ?? "Select"
+    if (!is_multiselect && val !== "" && val !== null && val !== undefined && options && options.length > 0) {
+      const i = options.findIndex((h) => h?.[val_key] == val)
+      button_text_loc =
+        i > -1 && options && options[i]
+          ? Array.isArray(button_display_keys)
+            ? button_display_keys.map((h) => options[i][h] ?? "").join(" ")
+            : val
+          : val
+    } else if (is_multiselect && val && Array.isArray(val) && val.length > 0) {
+      const i = options.findIndex((h) => h?.[val_key] == val?.[0])
+      button_text_loc =
+        i > -1 && options && options[i]
+          ? Array.isArray(button_display_keys)
+            ? button_display_keys.map((h) => options[i][h] ?? "").join(" ")
+            : val
+          : val
+      if (val.length > 1) {
+        button_text_loc = `${button_text_loc} and ${val.length - 1} more`
+      }
+    } else if (Array.isArray(val)) {
+      button_text_loc = `${val.length} items`
+    } else if (val) {
+      button_text_loc = val
+    }
+    return button_text_loc
+  }
+
+  function item_clicked(item) {
+    if (item == null || item?.[val_key] == null) {
+      val = null
+    } else if (is_multiselect) {
+      if (Array.isArray(val)) {
+        if (val.some((h) => h == item?.[val_key])) {
+          val = [...val].filter((h) => h != item?.[val_key])
+        } else {
+          val = [...val, item?.[val_key]]
+        }
+      } else {
+        val = [item?.[val_key]]
+      }
+    } else {
+      if (val == item?.[val_key]) {
+        val = null
+      } else {
+        val = item?.[val_key]
+        popover_manager.close()
+      }
+    }
+    if (config?.on_item_click) {
+      config?.on_item_click(
+        item
+          ? {
+              ...item,
+            }
+          : null
+      )
+    }
+    if (config?.on_change) {
+      config?.on_change(val)
+    }
+  }
+
+  function handle_dropdown_opened() {
+    if (config?.on_dropdown_opened) {
+      config?.on_dropdown_opened()
+    }
+  }
+
+  function handle_dropdown_closed() {
+    if (config?.on_dropdown_closed) {
+      config?.on_dropdown_closed()
+    }
+  }
+
+  function set_options(input) {
+    let clean_options = []
+    if (Array.isArray(input)) {
+      for (let option of input) {
+        if (typeof option == "object") {
+          const name = Array.isArray(button_display_keys)
+            ? button_display_keys.map((h) => option?.[h] ?? "").join(" ")
+            : option?.name ?? option?.[val_key]
+          clean_options.push({ key: option?.[val_key], name: name })
+        } else {
+          clean_options.push({ key: option, name: String(option) })
+        }
+      }
+    }
+    options = clean_options
+    set_filtered_button_managers()
+  }
+
+  async function get_db_search_results(input) {
+    if (typeof config?.on_search == "function") {
+      const id = create_unique_id(null, 20)
+      search_requests_is_loading.push(id)
+      const res = await config?.on_search({ input: input ?? null, id })
+      if (search_requests_is_loading.includes(id)) {
+        const id_index = search_requests_is_loading.indexOf(id)
+        search_requests_is_loading = search_requests_is_loading.slice(id_index + 1)
+        set_options(res?.options || [])
+      }
+    }
+  }
+
+  function init(config) {
+    val = set_closurable(config?.val ?? null)
+    search_text_input_manager = create_text_input_manager({
+      type: "search",
+      on_change: (input) => {
+        if (typeof config?.on_search == "function") {
+          get_db_search_results(input)
+        } else {
+          set_filtered_button_managers(input)
+        }
+      },
+    })
+    popover_manager = create_popover_manager({
+      type: "dropdown",
+      header: () => header,
+      target_width: () => target_width,
+      target_height: () => target_height,
+      is_show_x: () => is_show_x,
+      is_disabled: () => is_disabled,
+      on_open: handle_dropdown_opened,
+      on_close: handle_dropdown_closed,
+      anchor_id: () => anchor_id ?? `button_${toggle_button_manager?.id}`,
+    })
+    toggle_button_manager = create_button_manager({
+      type: button_type,
+      mt: mt,
+      mr: mr,
+      mb: mb,
+      ml: ml,
+      is_compressed: () => is_button_compressed,
+      is_disabled: () => is_disabled,
+      is_collapsed: () => is_collapsed,
+      popover_target: () => `popover_${popover_manager?.id}`,
+    })
+    clear_button_manager = create_button_manager({
+      type: "soft",
+      text: "Set to null",
+      text_align: text_align,
+      font_size: font_size,
+      font_weight: font_weight,
+      mb: item_mb,
+      is_disabled: () => val == null || (Array.isArray(val) && val.length < 1),
+      is_compressed: type == "horiz_selector",
+      is_no_wrap: type == "horiz_selector",
+      on_click: () => item_clicked(null),
+    })
+    header_icon_manager = create_icon_manager({
+      icon_id: () => header_icon,
+      deg: () => header_icon_deg,
+      sw: 30,
+      size: 2,
+      mr: 0.5,
+    })
+    set_options(config?.options)
+    if (typeof config?.on_search == "function") {
+      get_db_search_results(null)
+    }
+  }
+
+  init(config)
+
+  return {
+    id,
+    get type() {
+      return type
+    },
+    get is_collapsed() {
+      return is_collapsed
+    },
+    get val() {
+      return val
+    },
+    get val_key() {
+      return val_key
+    },
+    get row_display_keys() {
+      return row_display_keys
+    },
+    get button_display_keys() {
+      return button_display_keys
+    },
+    get options() {
+      return options
+    },
+    get is_multiselect() {
+      return is_multiselect
+    },
+    get is_set_null_button() {
+      return is_set_null_button
+    },
+    get is_disabled() {
+      return is_disabled
+    },
+    get header() {
+      return header
+    },
+    get header_icon() {
+      return header_icon
+    },
+    get header_icon_deg() {
+      return header_icon_deg
+    },
+    get min_header_width() {
+      return min_header_width
+    },
+    get spacer_color() {
+      return spacer_color
+    },
+    get label() {
+      return label
+    },
+    get error_message() {
+      return error_message
+    },
+    get placeholder() {
+      return placeholder
+    },
+    get target_width() {
+      return target_width
+    },
+    get target_height() {
+      return target_height
+    },
+    get font_weight() {
+      return font_weight
+    },
+    get font_size() {
+      return font_size
+    },
+    get is_show_x() {
+      return is_show_x
+    },
+    get text_align() {
+      return text_align
+    },
+    get justify_content() {
+      return justify_content
+    },
+    get is_show_arrow() {
+      return is_show_arrow
+    },
+    get button_type() {
+      return button_type
+    },
+    get selected_font_size() {
+      return selected_font_size
+    },
+    get is_button_compressed() {
+      return is_button_compressed
+    },
+    get is_searchable() {
+      return is_searchable
+    },
+    get is_hide_button() {
+      return is_hide_button
+    },
+    get item_mb() {
+      return item_mb
+    },
+    get ml() {
+      return ml
+    },
+    get mr() {
+      return mr
+    },
+    get mb() {
+      return mb
+    },
+    get mt() {
+      return mt
+    },
+    get search_text_input_manager() {
+      return search_text_input_manager
+    },
+    get filtered_button_managers() {
+      return filtered_button_managers
+    },
+    get popover_manager() {
+      return popover_manager
+    },
+    get toggle_button_manager() {
+      return toggle_button_manager
+    },
+    get toggle_button_text() {
+      return toggle_button_text
+    },
+    get clear_button_manager() {
+      return clear_button_manager
+    },
+    get header_icon_manager() {
+      return header_icon_manager
+    },
+    get search_requests_is_loading() {
+      return search_requests_is_loading
+    },
+    init,
+    item_clicked,
+    set_val,
+    set_options,
+  }
+}

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

@@ -0,0 +1,22 @@
+<script>
+  import Button from "$lib/Components/Button/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+<div class="container">
+  <p class="email_field">{manager?.val}</p>
+  <Button manager={manager?.copy_button_manager} />
+  <Button manager={manager?.mail_to_button_manager} />
+</div>
+
+<style>
+  .container {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .email_field {
+    text-transform: lowercase;
+  }
+</style>

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

@@ -0,0 +1,45 @@
+import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+import { copy_to_clipboard, set_closurable } from "$lib/client/index.js"
+
+export function create_email_address_manager(config) {
+  let val = $derived(set_closurable(config?.val, null))
+
+  let copy_button_manager = create_button_manager({
+    type: "soft",
+    is_uniform: true,
+    support_icon: "copy",
+    icon_size: 1.5,
+    on_click: () => copy_to_clipboard(val),
+  })
+
+  let mail_to_button_manager = create_button_manager({
+    type: "soft",
+    is_uniform: true,
+    support_icon: "link",
+    icon_size: 1.5,
+    on_click: () => mailto(val),
+  })
+
+  let is_valid = $derived(
+    val
+      ? /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+          val.toLowerCase()
+        )
+      : false
+  )
+
+  function mailto() {
+    window.open("mailto:" + val, "_self")
+  }
+
+  return {
+    get val() {
+      return val
+    },
+    get is_valid() {
+      return is_valid
+    },
+    copy_button_manager,
+    mail_to_button_manager,
+  }
+}

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

@@ -0,0 +1,58 @@
+<script>
+  let { is_show = true, color = "var(--error-t)", sw = 30 } = $props()
+</script>
+
+{#if is_show}
+  <svg
+    class="error_x"
+    style="--color: {color}; --sw: {sw}"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <circle class="error_x_circle" cx="256" cy="256" r="196.16" />
+    <line class="error_x" x1="328.5" y1="183.5" x2="183.5" y2="328.5" />
+    <line class="error_x" x2="328.5" y2="328.5" x1="183.5" y1="183.5" />
+  </svg>
+{/if}
+
+<style>
+  .error_x {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    stroke-width: var(--sw);
+    stroke: var(--color);
+    stroke-miterlimit: 10;
+    animation:
+      ease-in-out 0.1s forwards,
+      scale 0.1s ease-in-out 0.1s both;
+  }
+  .error_x_circle {
+    stroke-dasharray: 1250;
+    stroke-dashoffset: 1250;
+    animation: stroke 0.1s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+  }
+  .error_x {
+    stroke-dasharray: 250;
+    stroke-dashoffset: 250;
+    animation: stroke 0.1s cubic-bezier(0.65, 0, 0.45, 1) 0.1s forwards;
+  }
+
+  @keyframes stroke {
+    100% {
+      stroke-dashoffset: 0;
+    }
+  }
+  @keyframes scale {
+    0%,
+    100% {
+      transform: none;
+    }
+    50% {
+      transform: scale3d(1.1, 1.1, 1);
+    }
+  }
+</style>

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

@@ -0,0 +1,57 @@
+<script>
+  let { is_eye_shown = false, is_bind_val = false, eye_color = "var(--g6-t)", sw = 30, on_change } = $props()
+
+  function handle_click(change_to) {
+    if (is_bind_val) {
+      is_eye_shown = change_to
+    }
+    on_change(change_to)
+  }
+</script>
+
+<div
+  class="icon_frame"
+  role="button"
+  tabindex="0"
+  onclick={() => handle_click(!is_eye_shown)}
+  onkeydown={(event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      handle_click(!is_eye_shown)
+    }
+  }}
+>
+  {#if is_eye_shown}
+    <svg id="eye" class="svg_cover" data-name="eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 350">
+      <g fill="none" stroke={eye_color} stroke-width={sw}>
+        <path
+          d="M120.2-2.8h58.2a248 248 0 01248 248v58.3a34.6 34.6 0 01-34.6 34.6h-58.2A248 248 0 0185.6 90V31.9a34.6 34.6 0 0134.6-34.7z"
+          transform="rotate(-45 256 167.7)"
+        />
+        <circle cx="256" cy="167.7" r="78.8" />
+      </g>
+    </svg>
+  {:else}
+    <svg id="eyenot" class="svg_cover" data-name="eyenot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 350">
+      <g fill="none" stroke={eye_color} stroke-width={sw}>
+        <path
+          d="M336.3 292.6a248 248 0 01-255.7-59.3l-41.2-41.1a34.7 34.7 0 010-49L80.6 102a249.1 249.1 0 0135.6-29.6M182.6 139a78.8 78.8 0 00102.2 102M329.4 196.4A78.8 78.8 0 00227.3 94.3"
+        />
+        <path
+          d="M175.7 42.7A248 248 0 01431.4 102l41.2 41.1a34.7 34.7 0 010 49l-41.2 41.2a249 249 0 01-35.6 29.6M115.6 27.3l280.8 280.8"
+        />
+      </g>
+    </svg>
+  {/if}
+</div>
+
+<style>
+  .icon_frame {
+    width: 2rem;
+    height: 2rem;
+    display: flex;
+    align-items: center;
+  }
+  .svg_cover {
+    width: 100%;
+  }
+</style>