sveltekit-ui 1.1.16 → 1.1.17

package/dist/Components/Dropdown/index.svelte.js

@@ -1,403 +0,0 @@
-import { create_unique_id, set_closurable, set_closurable_color } from "../../client/index.js"
-import { create_button_manager } from "../Button/index.svelte.js"
-import { create_popover_manager } from "../Popover/index.svelte.js"
-import { create_text_input_manager } from "../TextInput/index.svelte.js"
-import { create_icon_manager } from "../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/dist/Components/ErrorX/index.svelte

@@ -1,58 +0,0 @@
-<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/dist/Components/FileInput/index.svelte

@@ -1,146 +0,0 @@
-<script>
-  import Button from "../Button/index.svelte"
-  import Icon from "../Icon/index.svelte"
-
-  let { manager } = $props()
-</script>
-
-{#snippet main_file_stuff()}
-  {#if manager?.error_message}
-  <div style="display: flex; align-items: center;">
-    <p style="color: var(--error-t);">{manager?.error_message}</p>
-    <Button manager={manager?.error_button_manager} />
-  </div>
-  {/if}
-  {#if Array.isArray(manager?.val) ? manager?.val.length > 0 : !!manager?.val}
-    <Button manager={manager?.clear_files_button_manager} />
-  {:else}
-  <div class="file_input_wrapper">
-    <input
-      type="file"
-      name={manager?.name}
-      required={manager?.is_required}
-      readonly={manager?.is_read_only}
-      multiple={manager?.is_multiselect}
-      accept={Array.isArray(manager?.accept) ? manager?.accept.join(", ") : ""}
-      onchange={(e) => manager?.get_file(e)}
-      id={`file-input-${manager?.id}`}
-      hidden
-    />
-    <label for={`file-input-${manager?.id}`} class="file_input_label">
-      {manager?.select_file_button_text ? manager?.select_file_button_text : `Select file${manager?.is_multiselect ? "(s)" : ""}`}
-    </label>
-  </div>
-  {/if}
-{/snippet}
-
-<div class="container">
-  {#if manager?.label}
-    <div style="display: inline-flex;">
-      {#if manager?.label}
-        <p class="label">{manager?.label}:</p>
-      {/if}
-    </div>
-  {/if}
-  {#if manager?.is_drop_zone && !(manager?.is_hide_drop_zone_if_file && (Array.isArray(manager?.val) ? manager?.val.length > 1 : manager?.val))}
-    <div class="input_container" style="height: {manager?.height};">
-      <div
-        class:drop_zone={manager?.is_drop_zone}
-        style:background-image={manager?.is_drop_zone ? manager?.svg_bg : ""}
-        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;"
-        ondrop={(e) => manager?.drop_handler(e)}
-        ondragover={(e) => e.preventDefault()}
-        role="region"
-        aria-label="File drop area"
-      >
-        <div>
-          <Icon manager={manager?.file_drop_icon_manager} />
-        </div>
-        {#if (manager?.val && !Array.isArray(manager?.val)) || (manager?.val && Array.isArray(manager?.val) && manager?.val.length > 0)}
-          {#if Array.isArray(manager?.val)}
-            {#if manager?.val.length == 1}
-              <p>{manager?.val[0]?.name ?? "Untitled"}</p>
-            {:else}
-              <p>{manager?.val.length + " files selected"}</p>
-            {/if}
-          {:else}
-            <p>{manager?.val?.name ?? "Untitled"}</p>
-          {/if}
-        {:else}
-          <p style="margin-bottom: 1rem;">
-            Drag and drop file{manager?.is_multiselect ? "(s)" : ""} here or
-          </p>
-        {/if}
-        {@render main_file_stuff()}
-      </div>
-    </div>
-  {:else}
-    {@render main_file_stuff()}
-  {/if}
-</div>
-
-<style>
-  .container{
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    height: 100%;
-  }
-  .input_container {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    cursor: pointer;
-    /* height: 100%; */
-  }
-  .drop_zone {
-    border-radius: var(--border_radius);
-    padding: 1rem 1rem 2rem 1rem;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-  .file_input_wrapper {
-    position: relative;
-  }
-  .file_input_label {
-    display: inline-block;
-    padding: 0.8rem 1rem;
-    border: 1px solid var(--g2-t);
-    border-radius: 1rem;
-    cursor: pointer;
-    color: var(--g2-t);
-    font-size: 1.6rem;
-    line-height: 1.6rem;
-    font-weight: 400;
-    height: 3.4rem;
-  }
-  .file_input_label:hover {
-    background-color: var(--primary-transparent2-t);
-  }
-  .file_input_label:active {
-    background-color: var(--g14-t);
-  }
-  input[type="file"]:not(:focus) + .file_input_label {
-    outline: none;
-  }
-  input[type="file"] {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    opacity: 0;
-    cursor: pointer;
-  }
-  .label {
-    font-size: 1.2rem;
-    font-weight: 600;
-    color: var(--g12-t);
-    line-height: 1.6rem;
-    margin-right: 0.5rem;
-  }
-</style>