sveltekit-ui 1.1.73 → 1.1.75

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

@@ -170,7 +170,7 @@ export function create_content_input_manager(config) {
       icon_size: 1.6,
       min_height: 2,
       border_radius: 0.5,
-      popover_target: `popover_${extra_popover_manager?.id}`,
+      popover_target: () => `popover_${extra_popover_manager?.id}`,
     })
     small_preempt_add_child_element_button_manager = create_button_manager({
       type: "soft",

package/dist/Components/CronInput/index.svelte

@@ -8,13 +8,13 @@
 </script>
 
 <div>
-  {#if manager?.label || manager?.error_message}
+  {#if manager?.label || !manager?.is_valid}
     <div style="display: inline-flex;">
       {#if manager?.label}
         <p class="label">{manager?.label}:</p>
       {/if}
       {#if !manager?.is_valid}
-        <p class="error_text">Cron val invalid</p>
+        <p class="error_text">Cron expression is invalid.</p>
       {/if}
     </div>
   {/if}

package/dist/Components/CronInput/index.svelte.d.ts

@@ -0,0 +1,11 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    manager: any;
+}, {}, "">;
+type $$ComponentProps = {
+    manager: any;
+};

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

@@ -28,7 +28,8 @@ export function create_cron_input_manager(config) {
     if (cron_text_input_manager?.val == null) {
       return true
     }
-    const cron_parts = (cron_text_input_manager?.val || "* * * * *").split(" ")
+    const cron_parts = String(cron_text_input_manager.val).trim().split(/\s+/)
+    if (cron_parts.length !== 5) return false
     const [minute, hour, day_of_month, month, day_of_week] = [
       cron_parts[0] || "*",
       cron_parts[1] || "*",
@@ -138,6 +139,7 @@ export function create_cron_input_manager(config) {
     finish_button_manager = create_button_manager({
       text: "Finish",
       mt: 0.5,
+      is_disabled: () => !is_valid,
       on_click: () => finish_cron(),
     })
   }

package/dist/Components/DataTypeInput/index.svelte

@@ -19,7 +19,7 @@
           <TextInput manager={manager?.search_text_input_manager} />
         </div>
         {/if}
-        {#if manager?.variables}
+        {#if manager?.data_sample != null}
           <Button manager={manager?.guess_from_variables_button_manager} />
         {/if}
       </div>
@@ -60,7 +60,7 @@
         <p>Object Uniform Value Type</p>
         <div style="display: flex; gap: 1rem;">
           <Dropdown manager={manager?.items_type_options_dropdown_manager} />
-          {#if ["array_literal", "object_literal", "object_uniform_literal"].includes(manager?.val_at_path?.items?.type)}
+          {#if ["array_literal", "array_uniform_literal", "object_literal", "object_uniform_literal"].includes(manager?.val_at_path?.items?.type)}
             <Button manager={manager?.edit_items_type_button_manager} />
           {/if}
         </div>
@@ -100,7 +100,7 @@
                           {#if ["array_literal", "array_uniform_literal", "object_literal","object_uniform_literal", "table_id_for_foreign_row_literal"].includes(manager?.val_at_path?.properties?.[property_key]?.type)}
                             <Button manager={manager?.property_type_options?.[property_key]?.to_breadcrumbs_button_manager} /> 
                           {/if}
-                          {#if manager?.val_at_path?.properties.length > 0 && (manager?.val_at_path?.properties?.[property_key]?.display_order == null || manager?.val_at_path.properties?.[property_key]?.display_order > 0)}
+                          {#if Object.keys(manager?.val_at_path?.properties || {}).length > 0 && (manager?.val_at_path?.properties?.[property_key]?.display_order == null || manager?.val_at_path.properties?.[property_key]?.display_order > 0)}
                             <Button manager={manager?.property_type_options?.[property_key]?.shift_up_button_manager} />
                           {/if}
                           {#if manager?.val_at_path?.properties?.[property_key]?.display_order != null && manager?.val_at_path?.properties?.[property_key]?.display_order < Object.keys(manager?.val_at_path?.properties || {}).length - 1}

package/dist/Components/DataTypeInput/index.svelte.d.ts

@@ -0,0 +1,11 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    manager: any;
+}, {}, "">;
+type $$ComponentProps = {
+    manager: any;
+};

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

@@ -92,8 +92,8 @@ export function create_data_type_input_manager(config) {
     for (let property_key of Object.keys(val_at_path?.properties || {}).sort(
       (a, b) => val_at_path?.properties?.[a]?.display_order - val_at_path.properties?.[b]?.display_order
     )) {
-      let edit_popover_manager = $state(null)
-      let edit_popover_trigger_button_manager = $state(null)
+      let edit_popover_manager = null
+      let edit_popover_trigger_button_manager = null
       edit_popover_manager = create_popover_manager({
         min_width: 200,
         target_width: 200,
@@ -459,6 +459,7 @@ export function create_data_type_input_manager(config) {
       options: table_options,
       on_item_click: (input) => {
         let val_at_path_loc = deep_copy(val_at_path)
+        val_at_path_loc.attributes ??= {}
         val_at_path_loc.attributes.table_id = input?.key
         val = set_structure_at_path(val, val_at_path_loc, breadcrumbs_manager?.val)
       },
@@ -469,6 +470,7 @@ export function create_data_type_input_manager(config) {
       options: table_options,
       on_item_click: (input) => {
         let val_at_path_loc = deep_copy(val_at_path)
+        val_at_path_loc.attributes ??= {}
         val_at_path_loc.attributes.property_key_table_id = input?.key
         val = set_structure_at_path(val, val_at_path_loc, breadcrumbs_manager?.val)
       },
@@ -491,8 +493,8 @@ export function create_data_type_input_manager(config) {
     get val() {
       return val
     },
-    get val() {
-      return val
+    get data_sample() {
+      return data_sample
     },
     get popover_manager() {
       return popover_manager
@@ -551,9 +553,6 @@ export function create_data_type_input_manager(config) {
     get val_at_path() {
       return val_at_path
     },
-    get val() {
-      return val
-    },
     set_data_type,
     add_object_property,
     delete_object_property,

package/dist/Components/Dropdown/index.svelte.d.ts

@@ -0,0 +1,11 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    manager: any;
+}, {}, "">;
+type $$ComponentProps = {
+    manager: any;
+};

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

@@ -53,16 +53,23 @@ export function create_dropdown_manager(config) {
   let toggle_button_text = $derived(get_button_text())
   let header_icon_manager = $state(null)
   let search_requests_is_loading = $state([])
+  let latest_search_request_id = null
+
+  function option_matches_search(option, search_val) {
+    if ([null, ""].includes(search_val)) return true
+    const search_text = String(search_val).toLocaleLowerCase()
+    return [val_key, ...(Array.isArray(row_display_keys) ? row_display_keys : [])].some((key) =>
+      String(option?.[key] ?? "")
+        .toLocaleLowerCase()
+        .includes(search_text)
+    )
+  }
 
   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))
-        ) {
+        if (option_matches_search(option, search_val)) {
           filtered_button_managers_loc.push(
             create_button_manager({
               type: "soft",
@@ -173,13 +180,17 @@ export function create_dropdown_manager(config) {
     let clean_options = []
     if (Array.isArray(input)) {
       for (let option of input) {
-        if (typeof option == "object") {
+        if (option != null && 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 })
+          clean_options.push({
+            ...option,
+            key: option?.key ?? option?.[val_key],
+            name: option?.name ?? name,
+          })
         } else {
-          clean_options.push({ key: option, name: String(option) })
+          clean_options.push({ key: option, [val_key]: option, name: String(option) })
         }
       }
     }
@@ -189,13 +200,22 @@ export function create_dropdown_manager(config) {
 
   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 || [])
+      const request_id = create_unique_id(null, 20)
+      latest_search_request_id = request_id
+      search_requests_is_loading = [...search_requests_is_loading, request_id]
+      try {
+        const res = await config.on_search({ input: input ?? null, id: request_id })
+        if (latest_search_request_id == request_id) {
+          set_options(res?.options || [])
+        }
+        return res
+      } catch (error) {
+        if (typeof config?.on_search_error == "function") {
+          config.on_search_error(error)
+        }
+        return null
+      } finally {
+        search_requests_is_loading = search_requests_is_loading.filter((id) => id != request_id)
       }
     }
   }

package/dist/Components/EmailAddress/index.svelte.d.ts

@@ -0,0 +1,11 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    manager: any;
+}, {}, "">;
+type $$ComponentProps = {
+    manager: any;
+};

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

@@ -1,14 +1,23 @@
 import { create_button_manager } from "../Button/index.svelte.js"
-import { copy_to_clipboard, set_closurable } from "../../client/index.js"
+import { copy_to_clipboard, normalize_link_href, set_closurable } from "../../client/index.js"
 
 export function create_email_address_manager(config) {
-  let val = $derived(set_closurable(config?.val, null))
+  let val = $derived(String(set_closurable(config?.val, "") ?? "").trim())
+  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(),
+      ),
+  )
+  let mailto_href = $derived(is_valid ? normalize_link_href(`mailto:${val}`) : null)
 
   let copy_button_manager = create_button_manager({
     type: "soft",
     is_uniform: true,
     support_icon: "copy",
     icon_size: 1.5,
+    aria_label: "Copy email address",
+    is_disabled: () => !is_valid,
     on_click: () => copy_to_clipboard(val),
   })
 
@@ -17,19 +26,13 @@ export function create_email_address_manager(config) {
     is_uniform: true,
     support_icon: "link",
     icon_size: 1.5,
-    on_click: () => mailto(val),
+    aria_label: "Compose an email",
+    is_disabled: () => !is_valid,
+    href: () => mailto_href,
   })
 
-  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")
+    if (typeof window !== "undefined" && mailto_href) window.location.assign(mailto_href)
   }
 
   return {
@@ -39,7 +42,11 @@ export function create_email_address_manager(config) {
     get is_valid() {
       return is_valid
     },
+    get mailto_href() {
+      return mailto_href
+    },
     copy_button_manager,
     mail_to_button_manager,
+    mailto,
   }
 }

package/dist/Components/ErrorX/index.svelte

@@ -11,6 +11,8 @@
     fill="none"
     stroke-linecap="round"
     stroke-linejoin="round"
+    aria-hidden="true"
+    focusable="false"
   >
     <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" />

package/dist/Components/ErrorX/index.svelte.d.ts

@@ -0,0 +1,15 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    is_show?: boolean;
+    color?: string;
+    sw?: number;
+}, {}, "">;
+type $$ComponentProps = {
+    is_show?: boolean;
+    color?: string;
+    sw?: number;
+};

package/dist/Components/Eye/index.svelte.d.ts

@@ -0,0 +1,19 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    is_eye_shown?: boolean;
+    is_bind_val?: boolean;
+    eye_color?: string;
+    sw?: number;
+    on_change: any;
+}, {}, "">;
+type $$ComponentProps = {
+    is_eye_shown?: boolean;
+    is_bind_val?: boolean;
+    eye_color?: string;
+    sw?: number;
+    on_change: any;
+};

package/dist/Components/FileInput/index.svelte

@@ -25,7 +25,6 @@
       accept={Array.isArray(manager?.accept) ? manager?.accept.join(", ") : (manager?.accept ?? "")}
       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)" : ""}`}
@@ -38,7 +37,7 @@
   {#if manager?.label}
     <div style="display: inline-flex;">
       {#if manager?.label}
-        <p class="label">{manager?.label}:</p>
+        <label class="label" for={`file-input-${manager?.id}`}>{manager?.label}:</label>
       {/if}
     </div>
   {/if}
@@ -50,7 +49,7 @@
         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()}
+        ondragover={(e) => manager?.drag_over_handler(e)}
         role="region"
         aria-label="File drop area"
       >
@@ -124,6 +123,10 @@
   .file_input_label:active {
     background-color: var(--g14-t);
   }
+  input[type="file"]:focus-visible + .file_input_label {
+    outline: 2px solid var(--selected-t);
+    outline-offset: 2px;
+  }
   input[type="file"]:not(:focus) + .file_input_label {
     outline: none;
   }

package/dist/Components/FileInput/index.svelte.d.ts

@@ -0,0 +1,11 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    manager: any;
+}, {}, "">;
+type $$ComponentProps = {
+    manager: any;
+};

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

@@ -51,17 +51,16 @@ export function create_file_input_manager(config) {
   )`)
 
   function get_file(e) {
+    if (is_disabled || is_read_only) return
     error_message = null
     let val_loc = []
-    for (let file of e.target.files) {
-      val_loc = [...val_loc, file]
+    for (let file of e?.target?.files ?? []) {
+      val_loc = add_file(file, val_loc)
     }
-    if (is_multiselect) {
-      val = val_loc
-    } else {
-      val = val_loc[0]
+    if (val_loc.length > 0) {
+      val = is_multiselect ? val_loc : val_loc[0]
     }
-    if (typeof config?.on_get_file == "function") {
+    if (val_loc.length > 0 && typeof config?.on_get_file == "function") {
       config?.on_get_file(val)
     }
   }
@@ -87,7 +86,7 @@ export function create_file_input_manager(config) {
     })
   }
 
-  function add_dropped_file(file, val_loc) {
+  function add_file(file, val_loc) {
     if (!file) return val_loc
     if (is_file_accepted(file)) {
       return [...val_loc, file]
@@ -102,6 +101,7 @@ export function create_file_input_manager(config) {
     if (ev) {
       ev.preventDefault()
     }
+    if (is_disabled || is_read_only || !is_drop_zone) return
     let did_update_val = false
     if (is_drop_zone) {
       error_message = null
@@ -110,12 +110,12 @@ export function create_file_input_manager(config) {
         for (let i = 0; i < ev.dataTransfer.items.length; i++) {
           if (ev.dataTransfer.items[i].kind === "file") {
             const file = ev.dataTransfer.items[i].getAsFile()
-            val_loc = add_dropped_file(file, val_loc)
+            val_loc = add_file(file, val_loc)
           }
         }
       } else {
         for (let i = 0; i < ev.dataTransfer.files.length; i++) {
-          val_loc = add_dropped_file(ev.dataTransfer.files[i], val_loc)
+          val_loc = add_file(ev.dataTransfer.files[i], val_loc)
         }
       }
       if (val_loc.length > 0) {
@@ -128,7 +128,15 @@ export function create_file_input_manager(config) {
     }
   }
 
+  function drag_over_handler(ev) {
+    ev?.preventDefault?.()
+    if (ev?.dataTransfer) {
+      ev.dataTransfer.dropEffect = is_disabled || is_read_only ? "none" : "copy"
+    }
+  }
+
   function clear_files() {
+    if (is_disabled || is_read_only) return
     val = is_multiselect ? [] : null
     if (config?.on_clear_files) {
       config?.on_clear_files()
@@ -150,7 +158,7 @@ export function create_file_input_manager(config) {
       color: "var(--error-t)",
       ml: 0.5,
       is_uniform: true,
-      is_disabled: () => is_disabled,
+      is_disabled: () => is_disabled || is_read_only,
       on_click: () => (error_message = null),
     })
     clear_files_button_manager = create_button_manager({
@@ -244,6 +252,7 @@ export function create_file_input_manager(config) {
     },
     get_file,
     drop_handler,
+    drag_over_handler,
     clear_files,
   }
 }

package/dist/Components/Hamburger/index.svelte.d.ts

@@ -0,0 +1,19 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    val: any;
+    is_bind_val?: boolean;
+    color_base?: string;
+    color_hover?: string;
+    on_change: any;
+}, {}, "">;
+type $$ComponentProps = {
+    val: any;
+    is_bind_val?: boolean;
+    color_base?: string;
+    color_hover?: string;
+    on_change: any;
+};