sveltekit-ui 1.0.12 → 1.0.14

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

@@ -26,7 +26,15 @@ import { create_qr_manager } from "../Qr/index.svelte.js"
 import { create_file_input_manager } from "../FileInput/index.svelte.js"
 import { create_cron_input_manager } from "../CronInput/index.svelte.js"
 import { create_button_manager } from "../Button/index.svelte.js"
-import { node_types, deep_copy, set_closurable, create_unique_id, copy_to_clipboard } from "../../client/index.js"
+import {
+  node_types,
+  deep_copy,
+  set_closurable,
+  create_unique_id,
+  copy_to_clipboard,
+  get_def_from_variable_path,
+  is_defined,
+} from "../../client/index.js"
 
 export function create_content_manager(config) {
   const id = create_unique_id(null, 20)
@@ -36,57 +44,13 @@ export function create_content_manager(config) {
   let mapkit_js_token = $derived(set_closurable(config?.mapkit_js_token, null))
   let val_prepped = $state(null)
 
-  function get_def(input) {
-    for (let item of definition_stack) {
-      if (item.hasOwnProperty(input)) {
-        return item?.[input]
-      }
-    }
-    return null
-  }
-
-  function get_def_from_variable_path(input) {
-    let val = null
-    if (Array.isArray(input) && input.length > 0) {
-      val = get_def(input?.[0])
-      for (let i = 1; i < input.length; i++) {
-        if (Array.isArray(input?.[i])) {
-          const res = get_def_from_variable_path(input?.[i])
-          val = val?.[res]
-        } else {
-          val = val?.[input?.[i]]
-        }
-      }
-    }
-    return val
-  }
-
-  function is_defined(input) {
-    for (let item of definition_stack) {
-      if (item.hasOwnProperty(input)) {
-        return true
-      }
-    }
-    return false
-  }
-
-  function set_def(identifier, value) {
-    console.log("set_def", identifier, value)
-    for (let i = 0; i < definition_stack.length; i++) {
-      if (definition_stack[i].hasOwnProperty(identifier)) {
-        definition_stack[i][identifier] = value
-      }
-    }
-    console.log("definition_stack_after_Set", definition_stack)
-  }
-
   function clean_attributes_from_variable_path(attributes) {
     let cleaned_attributes = attributes
     if (Object.keys(attributes || {}).length) {
       for (let [att_key, att_val] of Object.entries(attributes)) {
         if (att_key.endsWith("_from_variable_path") && att_val != null) {
           const att_key_to_set = att_key.split("_from_variable_path")?.[0]
-          cleaned_attributes[att_key_to_set] = get_def_from_variable_path(att_val)
+          cleaned_attributes[att_key_to_set] = get_def_from_variable_path(att_val, definition_stack)
         }
       }
     }
@@ -128,7 +92,7 @@ export function create_content_manager(config) {
   function clean_variable_path(input) {
     let cleaned_path = []
     if (Array.isArray(input) && input.length > 0) {
-      let is_def = is_defined(input?.[0])
+      let is_def = is_defined(input?.[0], definition_stack)
       if (!is_def) {
         return []
       }

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

@@ -72,7 +72,9 @@ export function create_content_input_manager(config) {
 
   function get_defined_options(selector_id) {
     const defined_at_selector_id = get_defined_at_selector_id(selector_id)
-    const defined_data_type = json_to_data_type(Object.assign({}, ...[...definition_stack].reverse()))
+    const defined_data_type = json_to_data_type(
+      Object.assign({}, ...[...(Array.isArray(definition_stack) ? definition_stack : [])].reverse())
+    )
     return Object.entries({ ...(defined_data_type?.properties || {}), ...defined_at_selector_id }).map(
       ([key, val]) => ({
         key,

package/dist/Components/TableAdvanced/ColumnInput/index.svelte.js

@@ -39,6 +39,7 @@ export function create_column_input_manager(config) {
   let column_is_cascade_checkbox_manager = $state(null)
   let guess_header_content_button_manager = $state(null)
   let guess_body_content_button_manager = $state(null)
+  let definition_stack = $state(null)
 
   let default_value = $state(null)
 
@@ -48,11 +49,10 @@ export function create_column_input_manager(config) {
   let delete_column_cancel_button_manager = $state(null)
 
   let rows_data_from_variable_path = $derived(set_closurable(config?.rows_data_from_variable_path, null))
+  let row_iter_identifier = $derived(set_closurable(config?.row_iter_identifier, "row_i"))
   let columns = $derived(set_closurable(config?.columns, null))
   let columns_length = $derived(Object.keys(columns || {}).length)
-  let row_data_type = $derived(set_closurable(config?.row_data_type, null))
   let column_id = $derived(set_closurable(config?.column_id, null))
-  let definition_stack = $derived(set_closurable(config?.definition_stack, null))
   let is_column_update = $derived(set_closurable(config?.is_column_update, true))
   let column_input_options = $derived(set_closurable(config?.column_input_options, null))
 
@@ -105,8 +105,13 @@ export function create_column_input_manager(config) {
     is_cascade: column_is_cascade_checkbox_manager?.val,
   })
 
+  function reset_definition_stack(input) {
+    definition_stack = input
+  }
+
   function init(config) {
     console.log("column_input_init", config)
+    definition_stack = config?.definition_stack
     column_id_text_input_manager = create_text_input_manager({
       label: "Column ID",
       val: config?.column_id ?? config?.val?.id ?? null,
@@ -125,7 +130,7 @@ export function create_column_input_manager(config) {
       val: config?.val?.body_content ?? null,
       storage: config?.storage,
       storage_default_folder_path: null,
-      definition_stack: () => definition_stack,
+      definition_stack: definition_stack,
       on_event: (input) => {
         console.log("set_definition_stack_tbd33")
         set_definition_stack(input)
@@ -189,14 +194,14 @@ export function create_column_input_manager(config) {
     column_db_data_type_input_manager = create_data_type_input_manager({
       // data_sample: () => variables,
       table_options: config?.table_options,
-      val: config?.val?.db_data_type ?? row_data_type?.properties?.[column_id_text_input_manager?.val],
+      val: config?.val?.db_data_type,
       on_finish: (input) => {
         let default_content_input_astc = variables_data_type_remaining_to_astc(input, "input", ["rows"])
         column_default_value_content_manager = create_content_manager({
           val: default_content_input_astc,
           table_options: config?.table_options,
           on_search_table_row_ids: config?.on_search_table_row_ids,
-          definition_stack: () => definition_stack,
+          definition_stack: definition_stack,
           on_event: (input) => {
             const res = set_definition_stack(
               input,
@@ -278,7 +283,11 @@ export function create_column_input_manager(config) {
           let guessed_column_display_content = variables_data_type_remaining_to_astc(
             column_db_data_type_input_manager?.val,
             "display",
-            ["rows", ["row_i"], column_id_text_input_manager.val]
+            [
+              ...(Array.isArray(rows_data_from_variable_path) ? rows_data_from_variable_path : []),
+              [row_iter_identifier],
+              column_id_text_input_manager.val,
+            ]
           )
           console.log("guessed_column_display_content", guessed_column_display_content)
           body_content_input_manager.add_version(guessed_column_display_content)
@@ -443,5 +452,6 @@ export function create_column_input_manager(config) {
     get columns_length() {
       return columns_length
     },
+    reset_definition_stack,
   }
 }

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

@@ -14,9 +14,10 @@ import {
   json_to_csv,
   csv_to_json,
   create_unique_id,
-  set_closurable,
-  get_data_type_at_path,
   set_definition_stack,
+  set_def,
+  get_def_from_variable_path,
+  variables_data_type_remaining_to_astc,
 } from "../../client/index.js"
 import { tick } from "svelte"
 import { browser } from "$app/environment"
@@ -95,6 +96,7 @@ export function create_table_advanced_manager(config) {
   let column_edit_input_manager = $state(null)
   let column_edit_upsert_column_button_manager = $state(null)
 
+  let row_edit_def_identifier = $state("edit_row_1001234")
   let row_edit_index = $state(null)
   let preempt_insert_row_popover_manager = $state(null)
   let row_edit_content_manager = $state(null)
@@ -106,9 +108,7 @@ export function create_table_advanced_manager(config) {
   let is_loading_rows = $state(false)
   let loading_rows_progress = $state(0)
 
-  let rows_data = $derived(get_def_from_variable_path(rows_data_from_variable_path))
-  let row_data_type = $state(null)
-
+  let rows_data = $derived(get_def_from_variable_path(rows_data_from_variable_path, definition_stack))
   let row_indexes_display_order = $derived(get_available_row_indexes())
   let row_indexes_display_order_shown = $derived(get_row_indexes_shown())
 
@@ -126,53 +126,6 @@ export function create_table_advanced_manager(config) {
       : []
   )
 
-  function get_def(input, definition_stack_loc) {
-    let definition_stack_to_use = definition_stack_loc ?? definition_stack
-    if (Array.isArray(definition_stack_to_use)) {
-      for (let item of definition_stack_to_use) {
-        if (item.hasOwnProperty(input)) {
-          return item?.[input]
-        }
-      }
-    }
-    return null
-  }
-
-  function get_def_from_variable_path(input, definition_stack_loc) {
-    let val = null
-    if (Array.isArray(input) && input.length > 0) {
-      val = get_def(input?.[0], definition_stack_loc)
-      for (let i = 1; i < input.length; i++) {
-        if (Array.isArray(input?.[i])) {
-          const res = get_def_from_variable_path(input?.[i], definition_stack_loc)
-          val = val?.[res]
-        } else {
-          val = val?.[input?.[i]]
-        }
-      }
-    }
-    return val
-  }
-
-  function is_defined(input) {
-    for (let item of definition_stack) {
-      if (item.hasOwnProperty(input)) {
-        return true
-      }
-    }
-    return false
-  }
-
-  function set_def(identifier, value) {
-    console.log("set_def", identifier, value)
-    for (let i = 0; i < definition_stack.length; i++) {
-      if (definition_stack[i].hasOwnProperty(identifier)) {
-        definition_stack[i][identifier] = value
-      }
-    }
-    console.log("definition_stack_after_Set", definition_stack)
-  }
-
   function get_available_row_indexes() {
     let row_indexes = []
     if (
@@ -411,14 +364,13 @@ export function create_table_advanced_manager(config) {
         foreign_table_id: column?.foreign_table_id,
         is_cascade: column?.is_cascade,
       },
+      row_iter_identifier: row_iter_identifier,
+      rows_data_from_variable_path: rows_data_from_variable_path,
       column_input_options: config?.column_input_options,
       table_options: config?.table_options,
       on_search_table_row_ids: config?.on_search_table_row_ids,
-      defined_data_type: () => defined_data_type,
-      definition_stack: () => definition_stack,
+      definition_stack: definition_stack,
       columns: () => columns_prepped,
-      rows_data_from_variable_path: () => rows_data_from_variable_path,
-      row_data_type: () => row_data_type,
       on_delete: async () => {
         if (typeof config?.on_event == "function") {
           const res = await config?.on_event({
@@ -518,39 +470,28 @@ export function create_table_advanced_manager(config) {
 
   function edit_row(row_i) {
     row_edit_index = row_i
-    let definition_stack_loc = $state([{ [row_iter_identifier]: row_i }, ...definition_stack])
     const path_to_set = [...rows_data_from_variable_path, Number.isInteger(row_i) ? row_i : 0]
+    let editable_row = null
     if (!Number.isInteger(row_i)) {
-      let row_default_to_insert = null //tbd
-      let target = definition_stack_loc
-      for (let i = 0; i < path_to_set.length - 1; i++) {
-        target = target[path_to_set[i]]
-        if (target === undefined) break
-      }
-      const last_key = path_to_set[path_to_set.length - 1]
-      if (Array.isArray(target[last_key])) {
-        target[last_key].splice(0, 0, row_default_to_insert)
-      } else {
-        target[last_key] = row_default_to_insert
-      }
+      console.log("columns_prepped", columns_prepped)
+      editable_row = {}
+    } else {
+      editable_row = get_def_from_variable_path([...rows_data_from_variable_path, row_i], definition_stack)
     }
+    let row_definition_stack = $state([{ [row_edit_def_identifier]: editable_row }, ...definition_stack])
     row_edit_content_manager = null
     setTimeout(() => {
       // quick fix for when update row then edit a diff row the data for other doesnt remain in place
-      console.log("row_input_content2222", { row_input_content, ds: [{ row_i }, ...definition_stack] })
       row_edit_content_manager = create_content_manager({
         val: row_input_content ?? null,
-        storage_items: null, // tbd
-        table_options: config?.table_options,
+        definition_stack: row_definition_stack,
         mapkit_js_token: mapkit_js_token,
+        storage_items: null, // tbd
         on_search_table_row_ids: config?.on_search_table_row_ids,
-        definition_stack: [{ row_i }, ...definition_stack],
         on_event: (input) => {
-          console.log("on_event_edit_row00", input)
-          const res = set_definition_stack(input, definition_stack_loc)
-          console.log("on_event_edit_row_res00", res)
-          definition_stack_loc = res?.definition_stack
-          const row_data = get_def_from_variable_path(path_to_set, definition_stack_loc)
+          const res = set_definition_stack(input, row_definition_stack)
+          row_definition_stack = res?.definition_stack
+          const row_data = get_def_from_variable_path([row_edit_def_identifier], row_definition_stack)
           return {
             is_success: true,
             data: {
@@ -566,8 +507,8 @@ export function create_table_advanced_manager(config) {
       is_loading: () => upsert_row_is_loading,
       on_click: async () => {
         upsert_row_is_loading = true
-        const row_data = get_def_from_variable_path(path_to_set, definition_stack_loc)
-        console.log("edited_row", { definition_stack_loc, row_data })
+        const row_data = get_def_from_variable_path([row_edit_def_identifier], row_definition_stack)
+        console.log("edited_row", { row_i, row_data })
         if (Number.isInteger(row_i)) {
           if (typeof config?.on_event == "function") {
             const res = await config?.on_event({
@@ -603,6 +544,7 @@ export function create_table_advanced_manager(config) {
               row: row_data,
               path: path_to_set,
             })
+            console.log("insert_row_res", { res, columns_prepped })
             if (res?.is_success) {
               preempt_insert_row_popover_manager.show_temp_message(
                 "Successfully inserted row",
@@ -677,9 +619,81 @@ export function create_table_advanced_manager(config) {
     })
   }
 
+  function guess_row_input_content(columns) {
+    return {
+      type_id: "div",
+      selector_id: create_unique_id(null, 8),
+      children: Object.entries(columns || {})
+        .sort(([a_column_id, a_val], [b_column_id, b_val]) => {
+          const a_order = a_val?.display_order ?? 0
+          const b_order = b_val?.display_order ?? 0
+          return a_order - b_order
+        })
+        .map(([column_id, val]) => {
+          if (val?.is_autogenerated) {
+            // let guessed_column_display_content = variables_data_type_remaining_to_astc(val?.db_data_type, "display", [
+            //   "variables",
+            //   "rows",
+            //   ["row_i"],
+            //   column_id,
+            // ])
+            return {
+              type_id: "div",
+              selector_id: create_unique_id(null, 8),
+              children: [
+                {
+                  type_id: "span",
+                  selector_id: create_unique_id(null, 8),
+                  children: [
+                    {
+                      type_id: "strong",
+                      selector_id: create_unique_id(null, 8),
+                      children: [],
+                      attributes: { content: column_id },
+                    },
+                    {
+                      type_id: "em",
+                      selector_id: create_unique_id(null, 8),
+                      children: [],
+                      attributes: { content: " autogenerated " },
+                    },
+                  ],
+                  attributes: {},
+                },
+                // guessed_column_display_content,
+                {
+                  type_id: "br",
+                  selector_id: create_unique_id(null, 8),
+                  children: [],
+                  attributes: {},
+                },
+              ],
+              attributes: {},
+            }
+          } else {
+            let guessed_column_input_content = variables_data_type_remaining_to_astc(val?.db_data_type, "input", [
+              row_edit_def_identifier,
+              column_id,
+            ])
+            if (guessed_column_input_content?.hasOwnProperty("attributes")) {
+              if (!guessed_column_input_content.attributes) {
+                guessed_column_input_content.attributes = {}
+              }
+              guessed_column_input_content.attributes.label = column_id
+            }
+            return {
+              type_id: "div",
+              selector_id: create_unique_id(null, 8),
+              children: [guessed_column_input_content],
+              attributes: {},
+            }
+          }
+        }),
+    }
+  }
+
   function set_attributes(attributes) {
     rows_data_from_variable_path = attributes?.rows_data_from_variable_path
-    row_input_content = attributes?.row_input_content
     is_data_editable = attributes?.is_data_editable ?? false
     nav_items = Array.isArray(attributes?.nav_items)
       ? attributes.nav_items.filter((item) =>
@@ -702,6 +716,18 @@ export function create_table_advanced_manager(config) {
     table_row_max_height = attributes?.table_row_max_height ?? null
     const columns_prepped_loc = set_columns_prepped(attributes?.columns)
     set_rows_prepped(columns_prepped_loc)
+    row_input_content = attributes?.row_input_content ?? guess_row_input_content(attributes?.columns)
+  }
+
+  function reset_definition_stack(input) {
+    console.log("reset_definition_stack", deep_copy(input))
+    definition_stack = input
+    set_rows_prepped(columns_prepped)
+  }
+
+  function set_columns(input) {
+    set_columns_prepped(input)
+    set_rows_prepped(columns_prepped)
   }
 
   function init(config) {
@@ -709,7 +735,7 @@ export function create_table_advanced_manager(config) {
     table_name = config?.table_name
     table_description = config?.table_description
     rows_data_from_variable_path = config?.rows_data_from_variable_path
-    row_iter_identifier = config?.row_iter_identifier
+    row_iter_identifier = config?.row_iter_identifier ?? "row_i"
     definition_stack = config?.definition_stack
     mapkit_js_token = config?.mapkit_js_token
     set_attributes(config)
@@ -1417,5 +1443,7 @@ export function create_table_advanced_manager(config) {
     download_csv,
     copy_structure,
     set_attributes,
+    reset_definition_stack,
+    set_columns,
   }
 }

package/dist/client/index.js

@@ -551,8 +551,56 @@ export function get_data_type_at_path(path, full_data_type) {
   return data_type_at_path_loc
 }
 
+export function get_def(input, definition_stack) {
+  if (Array.isArray(definition_stack)) {
+    for (let item of definition_stack) {
+      if (item.hasOwnProperty(input)) {
+        return item?.[input]
+      }
+    }
+  }
+  return null
+}
+
+export function get_def_from_variable_path(input, definition_stack) {
+  let val = null
+  if (Array.isArray(input) && input.length > 0) {
+    val = get_def(input?.[0], definition_stack)
+    for (let i = 1; i < input.length; i++) {
+      if (Array.isArray(input?.[i])) {
+        const res = get_def_from_variable_path(input?.[i], definition_stack)
+        val = val?.[res]
+      } else {
+        val = val?.[input?.[i]]
+      }
+    }
+  }
+  return val
+}
+
+export function is_defined(input, definition_stack) {
+  if (Array.isArray(definition_stack)) {
+    for (let item of definition_stack) {
+      if (item && typeof item == "object" && item.hasOwnProperty(input)) {
+        return true
+      }
+    }
+  }
+  return false
+}
+
+export function set_def(identifier, value, definition_stack) {
+  if (Array.isArray(definition_stack)) {
+    for (let i = 0; i < definition_stack.length; i++) {
+      if (definition_stack[i].hasOwnProperty(identifier)) {
+        definition_stack[i][identifier] = value
+      }
+    }
+  }
+  return definition_stack
+}
+
 export function set_definition_stack(input, definition_stack, pass_event_down) {
-  console.log("set_definition_stack00", deep_copy({ input, definition_stack, pass_event_down }))
   if (!Array.isArray(input?.variable_path_to_target) || !Array.isArray(definition_stack)) {
     throw new Error("Path must be an array")
   }
@@ -628,8 +676,6 @@ export function set_definition_stack(input, definition_stack, pass_event_down) {
     temp[last_key] = input?.value
   }
   definition_stack[defined_i][root_key] = defined_variables_loc
-  console.log("defined_variables_loc112", defined_variables_loc)
-  console.log("vars_fin", deep_copy(definition_stack))
   if (typeof pass_event_down === "function") {
     pass_event_down({
       value: input.value,

package/dist/index.js

@@ -153,6 +153,11 @@ export {
   astc_to_email_html,
   variables_data_type_remaining_to_astc,
   hcl_to_hex,
+  get_def,
+  get_def_from_variable_path,
+  is_defined,
+  set_def,
+  set_definition_stack,
   node_types,
   content_types,
   acceptable_storage_mime_types,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-ui",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "description": "A SvelteKit UI component library for building modern web applications",
   "license": "MIT",
   "type": "module",

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

@@ -26,7 +26,15 @@ import { create_qr_manager } from "$lib/Components/Qr/index.svelte.js"
 import { create_file_input_manager } from "$lib/Components/FileInput/index.svelte.js"
 import { create_cron_input_manager } from "$lib/Components/CronInput/index.svelte.js"
 import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
-import { node_types, deep_copy, set_closurable, create_unique_id, copy_to_clipboard } from "$lib/client/index.js"
+import {
+  node_types,
+  deep_copy,
+  set_closurable,
+  create_unique_id,
+  copy_to_clipboard,
+  get_def_from_variable_path,
+  is_defined,
+} from "$lib/client/index.js"
 
 export function create_content_manager(config) {
   const id = create_unique_id(null, 20)
@@ -36,57 +44,13 @@ export function create_content_manager(config) {
   let mapkit_js_token = $derived(set_closurable(config?.mapkit_js_token, null))
   let val_prepped = $state(null)
 
-  function get_def(input) {
-    for (let item of definition_stack) {
-      if (item.hasOwnProperty(input)) {
-        return item?.[input]
-      }
-    }
-    return null
-  }
-
-  function get_def_from_variable_path(input) {
-    let val = null
-    if (Array.isArray(input) && input.length > 0) {
-      val = get_def(input?.[0])
-      for (let i = 1; i < input.length; i++) {
-        if (Array.isArray(input?.[i])) {
-          const res = get_def_from_variable_path(input?.[i])
-          val = val?.[res]
-        } else {
-          val = val?.[input?.[i]]
-        }
-      }
-    }
-    return val
-  }
-
-  function is_defined(input) {
-    for (let item of definition_stack) {
-      if (item.hasOwnProperty(input)) {
-        return true
-      }
-    }
-    return false
-  }
-
-  function set_def(identifier, value) {
-    console.log("set_def", identifier, value)
-    for (let i = 0; i < definition_stack.length; i++) {
-      if (definition_stack[i].hasOwnProperty(identifier)) {
-        definition_stack[i][identifier] = value
-      }
-    }
-    console.log("definition_stack_after_Set", definition_stack)
-  }
-
   function clean_attributes_from_variable_path(attributes) {
     let cleaned_attributes = attributes
     if (Object.keys(attributes || {}).length) {
       for (let [att_key, att_val] of Object.entries(attributes)) {
         if (att_key.endsWith("_from_variable_path") && att_val != null) {
           const att_key_to_set = att_key.split("_from_variable_path")?.[0]
-          cleaned_attributes[att_key_to_set] = get_def_from_variable_path(att_val)
+          cleaned_attributes[att_key_to_set] = get_def_from_variable_path(att_val, definition_stack)
         }
       }
     }
@@ -128,7 +92,7 @@ export function create_content_manager(config) {
   function clean_variable_path(input) {
     let cleaned_path = []
     if (Array.isArray(input) && input.length > 0) {
-      let is_def = is_defined(input?.[0])
+      let is_def = is_defined(input?.[0], definition_stack)
       if (!is_def) {
         return []
       }

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

@@ -72,7 +72,9 @@ export function create_content_input_manager(config) {
 
   function get_defined_options(selector_id) {
     const defined_at_selector_id = get_defined_at_selector_id(selector_id)
-    const defined_data_type = json_to_data_type(Object.assign({}, ...[...definition_stack].reverse()))
+    const defined_data_type = json_to_data_type(
+      Object.assign({}, ...[...(Array.isArray(definition_stack) ? definition_stack : [])].reverse())
+    )
     return Object.entries({ ...(defined_data_type?.properties || {}), ...defined_at_selector_id }).map(
       ([key, val]) => ({
         key,