sveltekit-ui 1.0.11 → 1.0.13

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_content_variables,
+  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"
@@ -26,12 +27,11 @@ import { browser } from "$app/environment"
 export function create_table_advanced_manager(config) {
   const id = create_unique_id(null, 20)
 
-  let variables = $derived(set_closurable(config?.variables, null))
-  let loops = $derived(set_closurable(config?.loops, null))
-
+  let mapkit_js_token = $state(null)
+  let definition_stack = $state(null)
+  let row_iter_identifier = $state(null)
   let rows_data_from_variable_path = $state(null)
   let row_input_content = $state(null)
-  let variables_data_type = $state(null)
   let is_data_editable = $state(null)
   let nav_items = $state(null)
   let is_paginate = $state(null)
@@ -96,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)
@@ -107,29 +108,10 @@ export function create_table_advanced_manager(config) {
   let is_loading_rows = $state(false)
   let loading_rows_progress = $state(0)
 
-  let row_data_type = $derived(
-    get_data_type(variables_data_type, config?.val?.rows_data_from_variable_path ?? null)?.items
-  )
-
-  let mapkit_js_token = $derived(set_closurable(config?.mapkit_js_token, null))
-
-  function get_data_type(variables_data_type, data) {
-    let full_data_type = {
-      name: "Object",
-      type: "object_literal",
-      properties: {
-        variables: variables_data_type,
-        loops: { type: "loop" },
-      },
-    }
-    return get_data_type_at_path(data, full_data_type)
-  }
-
+  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())
 
-  let rows_data = $derived(get_variable_from_path(set_closurable(rows_data_from_variable_path, null)))
-
   let cur_page_to_use = $derived(
     !Array.isArray(row_indexes_display_order) || row_indexes_display_order.length < rows_per_page_dropdown_manager?.val
       ? 1
@@ -144,27 +126,6 @@ export function create_table_advanced_manager(config) {
       : []
   )
 
-  function get_variable_from_path(path, combined_variables_input = null) {
-    if (Array.isArray(path)) {
-      let combined_variables_loc = deep_copy(
-        combined_variables_input ?? {
-          variables: variables,
-          loops: loops,
-        }
-      )
-      for (let path_item of path) {
-        if (Array.isArray(path_item)) {
-          let sub_val_from_path = get_variable_from_path(path_item)
-          combined_variables_loc = combined_variables_loc?.[sub_val_from_path]
-        } else {
-          combined_variables_loc = combined_variables_loc?.[path_item]
-        }
-      }
-      return combined_variables_loc
-    }
-    return null
-  }
-
   function get_available_row_indexes() {
     let row_indexes = []
     if (
@@ -185,7 +146,7 @@ export function create_table_advanced_manager(config) {
     //   for (let sort_by_item of sort_by_input_manager?.val) {
     //     // sort_by_item?.is_ascending
     //     // sort_by_item?.data_row_variable_path
-    //     // const val_at_path = get_variable_from_path(sort_by_item?.data_row_variable_path)
+    //     // const val_at_path = get_def_from_variable_path(sort_by_item?.data_row_variable_path)
     //   }
     // }
     return row_indexes
@@ -205,6 +166,7 @@ export function create_table_advanced_manager(config) {
   const raf = () => (browser ? new Promise(requestAnimationFrame) : new Promise((r) => setTimeout(r, 0)))
 
   async function set_rows_prepped(columns_prepped_input) {
+    console.log("set_rows_prepped", rows_data)
     is_loading_rows = true
     rows_prepped = []
     loading_rows_progress = 0
@@ -229,9 +191,9 @@ export function create_table_advanced_manager(config) {
   }
 
   function get_row_prepped(columns_prepped_input, row_data, row_i) {
+    console.log("get_row_prepped", { row_data, row_i, ds: [{ [row_iter_identifier]: row_i }, ...definition_stack] })
     let searchable_text = ""
     let columns_prepped_loc = {}
-
     if (Array.isArray(column_ids_display_order)) {
       for (let column_id of column_ids_display_order) {
         let content_manager = create_content_manager({
@@ -242,8 +204,7 @@ export function create_table_advanced_manager(config) {
               config?.on_event(input)
             }
           },
-          variables: () => variables,
-          loops: [row_i, ...(Array.isArray(loops) ? loops : [])],
+          definition_stack: [{ [row_iter_identifier]: row_i }, ...definition_stack],
           // storage_path: () => storage_path,
           // is_dark_theme: () => is_dark_theme,
         })
@@ -312,8 +273,7 @@ export function create_table_advanced_manager(config) {
               config?.on_change(input)
             }
           },
-          variables: () => variables,
-          loops: loops,
+          definition_stack: definition_stack,
           // storage_path: () => storage_path,
           // is_dark_theme: () => is_dark_theme,
         })
@@ -407,12 +367,9 @@ export function create_table_advanced_manager(config) {
       column_input_options: config?.column_input_options,
       table_options: config?.table_options,
       on_search_table_row_ids: config?.on_search_table_row_ids,
-      variables_data_type: () => variables_data_type,
-      variables: () => variables,
-      loops: () => loops,
+      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({
@@ -512,44 +469,28 @@ export function create_table_advanced_manager(config) {
 
   function edit_row(row_i) {
     row_edit_index = row_i
-    let variables_combined_loc = $state(
-      deep_copy({
-        variables,
-        loops: loops,
-      })
-    )
-    const path_to_set = [...rows_data_from_variable_path, typeof row_i == "number" ? row_i : 0]
-    if (typeof row_i != "number") {
-      let row_default_to_insert = null //tbd
-      let target = variables_combined_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
-      }
+    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)) {
+      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
       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,
-        variables_data_type: () => variables_data_type,
-        variables: () => variables_combined_loc?.variables,
-        loops: () => [row_i ?? 0, ...(Array.isArray(loops) ? loops : [])],
         on_event: (input) => {
-          console.log("on_event00", input)
-          const res = set_content_variables(input, variables_combined_loc)
-          variables_combined_loc.variables = res?.variables
-          const row_data = get_variable_from_path(path_to_set, variables_combined_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: {
@@ -561,12 +502,13 @@ export function create_table_advanced_manager(config) {
     })
     let upsert_row_is_loading = $state(false)
     row_edit_upsert_row_button_manager = create_button_manager({
-      text: typeof row_i == "number" ? "Update Row" : "Insert Row",
+      text: Number.isInteger(row_i) ? "Update Row" : "Insert Row",
       is_loading: () => upsert_row_is_loading,
       on_click: async () => {
         upsert_row_is_loading = true
-        const row_data = get_variable_from_path(path_to_set, variables_combined_loc)
-        if (typeof row_i == "number") {
+        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({
               type: "update_row",
@@ -601,6 +543,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",
@@ -675,10 +618,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
-    variables_data_type = attributes?.variables_data_type
     is_data_editable = attributes?.is_data_editable ?? false
     nav_items = Array.isArray(attributes?.nav_items)
       ? attributes.nav_items.filter((item) =>
@@ -701,12 +715,28 @@ 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) {
     table_id = config?.table_id
     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_i"
+    definition_stack = config?.definition_stack
+    mapkit_js_token = config?.mapkit_js_token
     set_attributes(config)
     table_search_text_input_manager = create_text_input_manager({
       type: "search",
@@ -1313,9 +1343,6 @@ export function create_table_advanced_manager(config) {
     get columns_prepped() {
       return columns_prepped
     },
-    get variables() {
-      return variables
-    },
     get bulk_select_all_rows_toggle_checkbox_manager() {
       return bulk_select_all_rows_toggle_checkbox_manager
     },
@@ -1406,9 +1433,6 @@ export function create_table_advanced_manager(config) {
     get settings_delete_table_button_manager() {
       return settings_delete_table_button_manager
     },
-    get variables_data_type() {
-      return variables_data_type
-    },
     init,
     set_table_search_text_input,
     set_rows_prepped,
@@ -1418,5 +1442,7 @@ export function create_table_advanced_manager(config) {
     download_csv,
     copy_structure,
     set_attributes,
+    reset_definition_stack,
+    set_columns,
   }
 }

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

@@ -230,6 +230,18 @@ export function create_text_input_manager(config) {
 
   function set_type(input) {
     type = 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 = "text"
+      } else {
+        input_el.type = input
+      }
+    }
   }
 
   async function finish() {

package/dist/Components/VariablePathInput/index.svelte

@@ -2,108 +2,62 @@
   import Popover from "../Popover/index.svelte"
   import Button from "../Button/index.svelte"
   import TextInput from "../TextInput/index.svelte"
-  import Checkbox from "../Checkbox/index.svelte"
-  import Icon from "../Icon/index.svelte"
+  import Dropdown from "../Dropdown/index.svelte"
   import Spacer from "../Spacer/index.svelte"
-  import Self from './index.svelte'
+  import Self from "./index.svelte"
 
   let { manager } = $props()
 </script>
 
-{#snippet val_display()}
-  {#if Array.isArray(manager?.val)}
+<Button manager={manager?.open_edit_button_manager} />
+<Popover manager={manager?.popover_manager}>
+  {#snippet content()}
     <div>
-      <div style="display: flex; flex-wrap: wrap; gap: .5rem;">
-        [
-        {#if manager?.val.length < 1}
-          /
-        {:else}
-          {#each manager?.val as path_item, i}
-            {#if Array.isArray(path_item)}
-              [{path_item}]
-            {:else}
-              {path_item}
-            {/if}
-            {#if i < manager?.val.length - 1}
-              <div style="display: flex; align-items: center;">
-                <Icon manager={manager?.arrow_icon_manager} />
+      {#if manager?.levels_nested}
+        <p>{manager?.levels_nested} levels nested</p>
+      {/if}
+      <p>{manager?.val_text}</p>
+      <Dropdown manager={manager?.def_dropdown_manager} />
+      {#if manager?.def_dropdown_manager?.val}
+        <Button manager={manager?.add_path_item_button_manager} />
+        <p class="label">Path Items (optional)</p>
+        {#if Array.isArray(manager?.path_prepped) && manager?.path_prepped.length > 0}
+          {#each manager?.path_prepped as path_item}
+            <div>
+              <div style="display: flex; gap: 1rem">
+                <Button manager={path_item?.remove_path_item_button_manager} />
+                <Button manager={path_item?.insert_path_item_before_button_manager} />
+                <Dropdown manager={path_item?.type_dropdown_manager} />
               </div>
-            {/if}
+              {#if path_item?.type_dropdown_manager?.val == "variable"}
+                <div style="margin-top: 1rem;">
+                  <Self manager={path_item?.variable_path_input_manager} />
+                </div>
+              {:else if path_item?.type_dropdown_manager?.val == "string"}
+                <TextInput manager={path_item?.const_string_value_text_input_manager} />
+              {:else if path_item?.type_dropdown_manager?.val == "number"}
+                <TextInput manager={path_item?.const_number_value_text_input_manager} />
+              {/if}
+              {#if Array.isArray(path_item?.key_options)}
+                <div style="margin-top: 1rem;">
+                  <p class="label">Next Path Options</p>
+                  <div style="display: flex; flex-wrap: wrap; gap: .5rem;">
+                    {#each path_item?.key_options as key_option}
+                      <Button manager={key_option?.select_button_manager} />
+                    {/each}
+                  </div>
+                </div>
+              {/if}
+            </div>
+            <Spacer mt={1} mb={1} />
           {/each}
-        {/if}
-        ]
-      </div>
-    </div>
-  {:else}
-    <p style="color: var(--warning-t);">null</p>
-  {/if}
-{/snippet}
-
-{#snippet variable_path_input()}
-  <div>
-    <h4 class="label" style="margin: 0;">Data Type at Path</h4>
-    <p>{manager?.data_type_at_path?.type}</p>
-    {#if Array.isArray(manager?.val_prepped)}
-      <h4 class="label" style="margin: 0;">Val</h4>
-      {@render val_display()}
-      <Spacer mt={.5} mb={.5} />
-      <div style="display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem;">
-        {#if manager?.val != null}
-          <Button manager={manager?.set_null_button_manager} />
         {:else}
-          <Button manager={manager?.set_root_path_button_manager} />
+          <p>No Path Items</p>
         {/if}
-        {#each manager?.val_prepped as path_item_prepped}
-          <Button manager={path_item_prepped?.remove_path_button_manager} />
-        {/each}
-      </div>
-    {/if}
-    <Spacer mt={.5} mb={.5} />
-    <h4 class="label" style="margin: 0;">Next Path Item Options</h4>
-    {#if manager?.is_allow_dynamic_path_item}
-      <Checkbox manager={manager?.is_dynamic_path_item_checkbox_manager} />
-      {#if manager?.is_dynamic_path_item_checkbox_manager?.val && manager?.next_path_variable_path_input_manager}
-        <Self manager={manager?.next_path_variable_path_input_manager} />
       {/if}
-    {/if}
-    {#if !manager?.is_allow_dynamic_path_item || !manager?.is_dynamic_path_item_checkbox_manager?.val}
-      {#if manager?.next_path_options?.type == "loop"}
-        <TextInput manager={manager?.next_path_options?.number_input_manager} />
-        <Button manager={manager?.next_path_options?.add_path_item_button_manager} />
-      {:else if manager?.next_path_options?.type == "object_literal"}
-        {#if Array.isArray(manager?.next_path_options?.options) && manager?.next_path_options.options?.length > 0}
-          <div style="display: flex; flex-wrap: wrap; gap: .5rem;">
-            {#each manager?.next_path_options?.options as option}
-              <Button manager={option?.option_button_manager} />
-            {/each}
-          </div>
-        {:else}
-          <p>No options found</p>
-        {/if}
-      {:else}
-        <p>No additional path item options found</p>
-      {/if}
-    {/if}
-  </div>
-{/snippet}
-
-{#if !manager?.is_popover}
-  {@render variable_path_input()}
-{:else}
-  {#if Array.isArray(manager?.val)}
-    <div style="display: flex; gap: .5rem;">
-      {@render val_display()}
-      <Button manager={manager?.small_popover_toggle_button_manager} />
     </div>
-  {:else}
-    <Button manager={manager?.popover_toggle_button_manager} />
-  {/if}
-  <Popover manager={manager.popover_manager}>
-    {#snippet content()}
-      {@render variable_path_input()}
-    {/snippet}
-    {#snippet footer()}
-      <Button manager={manager?.finish_button_manager} />
-    {/snippet}
-  </Popover>
-{/if}
+  {/snippet}
+  {#snippet footer()}
+    <Button manager={manager?.finish_button_manager} />
+  {/snippet}
+</Popover>