sveltekit-ui 1.0.11 → 1.0.13

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

@@ -1,199 +1,232 @@
 import { create_popover_manager } from "../Popover/index.svelte.js"
 import { create_button_manager } from "../Button/index.svelte.js"
 import { create_text_input_manager } from "../TextInput/index.svelte.js"
-import { create_icon_manager } from "../Icon/index.svelte.js"
-import { create_checkbox_manager } from "../Checkbox/index.svelte.js"
-import { deep_copy, set_closurable, get_data_type_at_path } from "../../client/index.js"
+import { create_dropdown_manager } from "../Dropdown/index.svelte.js"
+import { set_closurable, get_data_type_at_path } from "../../client/index.js"
 
 export function create_variable_path_input_manager(config) {
-  let val = $state(null)
-  let is_popover = $state(true)
   let popover_manager = $state(null)
-  let popover_toggle_button_manager = $state(null)
-  let small_popover_toggle_button_manager = $state(null)
-  let set_null_button_manager = $state(null)
-  let set_root_path_button_manager = $state(null)
-  let is_dynamic_path_item_checkbox_manager = $state(null)
-  let next_path_variable_path_input_manager = $state(null)
+  let open_edit_button_manager = $state(null)
+  let add_path_item_button_manager = $state(null)
   let finish_button_manager = $state(null)
-  let next_path_options = $state(null)
-  let val_prepped = $state(null)
-  let arrow_icon_manager = $state(null)
+  let defined_options = $state(null)
+  let def_dropdown_manager = $state(null)
+  let levels_nested = $state(null)
+  let path_prepped = $state(null)
+  let val = $derived(
+    def_dropdown_manager?.val
+      ? [def_dropdown_manager?.val, ...(Array.isArray(path_prepped) ? path_prepped.map((h) => h?.val) : [])]
+      : []
+  )
+  let val_text = $derived(val_to_text(val))
 
-  let is_allow_dynamic_path_item = $derived(set_closurable(config?.is_allow_dynamic_path_item, true))
-  let variables_data_type = $derived(set_closurable(config?.variables_data_type, null))
-  let full_data_type = $derived({
-    name: "Object",
-    type: "object_literal",
-    properties: {
-      variables: variables_data_type,
-      loops: { type: "loop" },
-    },
-  })
-  // if data_type changes dynamically set_next_path_options also needs updated
-  let data_type_at_path = $derived(get_data_type_at_path(val, full_data_type))
-
-  function set_val_prepped() {
-    let val_prepped_loc = []
-    if (Array.isArray(val)) {
-      for (let i = 0; i < val.length; i++) {
-        val_prepped_loc.push({
-          ...val[i],
-          remove_path_button_manager: create_button_manager({
-            type: "outlined",
-            support_icon: "x",
-            text: Array.isArray(val?.[i]) ? `[${val?.[i]}]` : String(val?.[i]),
-            on_click: () => {
-              val = val.slice(0, i)
-              set_val_prepped()
-              set_next_path_options()
-            },
-          }),
+  function prep_path(input) {
+    console.log("prep_path", input)
+    let path_prepped_loc = $state([])
+    if (Array.isArray(input)) {
+      let variable_data_type_at_path = Array.isArray(defined_options)
+        ? defined_options.find((h) => h?.key === def_dropdown_manager?.val)?.data_type
+        : null
+      for (let i = 1; i < input.length; i++) {
+        let type_dropdown_manager = create_dropdown_manager({
+          placeholder: "Select Type",
+          is_button_compressed: true,
+          options: [
+            { key: "number", name: "Number" },
+            { key: "string", name: "String" },
+            { key: "variable", name: "Variable" },
+          ],
+          val: Array.isArray(input?.[i])
+            ? "variable"
+            : Number.isInteger(input?.[i])
+            ? "number"
+            : typeof input?.[i] == "string"
+            ? "string"
+            : null,
         })
-      }
-    }
-    val_prepped = val_prepped_loc
-  }
-
-  function add_path_item(input) {
-    if (!Array.isArray(val)) {
-      val = [input]
-    } else {
-      val = [...val, input]
-    }
-    is_dynamic_path_item_checkbox_manager.set_val(false)
-    next_path_variable_path_input_manager?.init()
-    set_next_path_options()
-  }
-
-  function set_next_path_options() {
-    let next_path_options_loc = null
-    if (data_type_at_path?.type == "loop") {
-      let number_input_manager = create_text_input_manager({
-        type: "number",
-        val: 0,
-        mt: 0.5,
-        mb: 0.5,
-      })
-      next_path_options_loc = {
-        type: "loop",
-        number_input_manager: number_input_manager,
-        add_path_item_button_manager: create_button_manager({
+        let remove_path_item_button_manager = create_button_manager({
           type: "outlined",
-          is_compressed: true,
-          text: "Add Path Item",
-          on_click: () => add_path_item(number_input_manager?.val),
-        }),
-      }
-    } else if (data_type_at_path?.type == "object_literal") {
-      let options_loc = $state([])
-      for (let [key, property] of Object.entries(data_type_at_path?.properties)) {
-        let option_button_manager = create_button_manager({
+          is_uniform: true,
+          support_icon: "x",
+          on_click: () => {
+            prep_path(Array.isArray(val) ? val.filter((_, idx) => idx !== i) : null)
+          },
+        })
+        let insert_path_item_before_button_manager = create_button_manager({
           type: "outlined",
-          is_compressed: true,
-          text: `${key}: (${property?.type})`,
-          on_click: () => add_path_item(key),
+          is_uniform: true,
+          support_icon: "plus",
+          on_click: () =>
+            prep_path([
+              ...(Array.isArray(val) ? val.slice(0, i) : []),
+              null,
+              ...(Array.isArray(val) ? val.slice(i) : []),
+            ]),
         })
-        options_loc.push({
-          option_button_manager: option_button_manager,
+        let const_string_value_text_input_manager = create_text_input_manager({
+          label: "Property",
+          placeholder: "some_property",
+          type: "text",
+          val: type_dropdown_manager?.val == "string" ? input?.[i] : null,
+        })
+        let const_number_value_text_input_manager = create_text_input_manager({
+          label: "Index",
+          placeholder: "0",
+          type: "number",
+          val: type_dropdown_manager?.val == "number" ? input?.[i] : null,
+        })
+        let variable_path_input_manager = create_variable_path_input_manager({
+          val: input?.[i],
+          levels_nested: levels_nested + 1,
+          get_defined_options: config?.get_defined_options,
+          on_finish: () => {
+            variable_path_input_manager.close_popover()
+          },
+        })
+        let key_options = []
+        if (variable_data_type_at_path?.type == "object_literal") {
+          for (let [key, property] of Object.entries(variable_data_type_at_path?.properties)) {
+            let select_button_manager = create_button_manager({
+              type: "outlined",
+              is_compressed: true,
+              text: `${key}: (${property?.type})`,
+              selected_type: () => (const_string_value_text_input_manager?.val == key ? "half_selected" : null),
+              on_click: () => {
+                type_dropdown_manager.set_val("string")
+                const_string_value_text_input_manager.set_val(key)
+              },
+            })
+            key_options.push({
+              select_button_manager: select_button_manager,
+            })
+          }
+        }
+        console.log("key_options", key_options)
+        let val = $derived(
+          type_dropdown_manager?.val == "string"
+            ? const_string_value_text_input_manager?.val
+            : type_dropdown_manager?.val == "number"
+            ? const_number_value_text_input_manager?.val
+            : type_dropdown_manager?.val == "variable"
+            ? variable_path_input_manager?.val
+            : null
+        )
+        let variable_data_type_at_next_path = $derived(
+          type_dropdown_manager?.val == "string"
+            ? variable_data_type_at_path?.properties?.[const_string_value_text_input_manager?.val]
+            : type_dropdown_manager?.val == "number"
+            ? variable_data_type_at_path?.items
+            : type_dropdown_manager?.val == "variable"
+            ? variable_path_input_manager?.variable_data_type_at_path
+            : null
+        )
+        path_prepped_loc.push({
+          get type_dropdown_manager() {
+            return type_dropdown_manager
+          },
+          get remove_path_item_button_manager() {
+            return remove_path_item_button_manager
+          },
+          get insert_path_item_before_button_manager() {
+            return insert_path_item_before_button_manager
+          },
+          get const_string_value_text_input_manager() {
+            return const_string_value_text_input_manager
+          },
+          get const_number_value_text_input_manager() {
+            return const_number_value_text_input_manager
+          },
+          get variable_path_input_manager() {
+            return variable_path_input_manager
+          },
+          get key_options() {
+            return key_options
+          },
+          get variable_data_type_at_next_path() {
+            return variable_data_type_at_next_path
+          },
+          get val() {
+            return val
+          },
         })
-      }
-      next_path_options_loc = {
-        type: "object_literal",
-        options: options_loc,
       }
     }
-    next_path_options = next_path_options_loc
-    set_val_prepped()
+    path_prepped = path_prepped_loc
   }
 
-  function finish() {
+  function close_popover() {
     popover_manager.close()
-    if (typeof config?.on_finish == "function") {
-      config?.on_finish(val)
-    }
   }
 
-  function set_val(input) {
-    val = input
-    set_val_prepped()
-    set_next_path_options()
+  function val_to_text(input) {
+    let text_items = []
+    if (Array.isArray(input) && input.length > 0) {
+      for (let item of input) {
+        if (Array.isArray(item)) {
+          text_items.push(val_to_text(item))
+        } else {
+          text_items.push(item)
+        }
+      }
+    }
+    return `[${text_items.join(", ")}]`
   }
 
-  function init(config) {
-    val = config?.val ?? null
+  function init(input) {
+    levels_nested = input?.levels_nested ?? 0
     popover_manager = create_popover_manager({
-      min_width: 320,
-      target_width: 400,
-      min_height: 320,
-      target_height: 400,
+      min_width: 280,
+      target_width: 450,
+      min_height: 400,
+      target_height: 240,
       type: "center",
-      header: "Variable Path Input",
-      anchor_id: () => `button_${popover_toggle_button_manager?.id}`,
+      header: "Defined Target Selector",
+      on_open: () => {
+        if (typeof config?.on_dropdown_opened == "function") {
+          config?.on_dropdown_opened()
+        }
+      },
     })
-    popover_toggle_button_manager = create_button_manager({
+    open_edit_button_manager = create_button_manager({
       type: "outlined",
+      h: 10,
+      l: 3,
+      c: 1,
       is_compressed: true,
-      text: "Select Variable Path",
+      text: () => (Array.isArray(val) && val.length > 0 ? val_to_text(val) : "Select Defined Identifier"),
       popover_target: () => `popover_${popover_manager?.id}`,
     })
-    small_popover_toggle_button_manager = create_button_manager({
-      type: "soft",
-      support_icon: "edit",
-      is_uniform: true,
-      icon_size: 1.6,
-      min_height: 2,
-      border_radius: 0.5,
-      c: 16,
-      popover_target: () => `popover_${popover_manager?.id}`,
-    })
-    set_null_button_manager = create_button_manager({
-      type: "outlined",
-      is_compressed: true,
-      text: "Set Null",
-      on_click: () => {
-        val = null
-        set_val_prepped()
-        set_next_path_options()
+    def_dropdown_manager = create_dropdown_manager({
+      label: "Defined Variable",
+      is_button_compressed: true,
+      val: input?.val?.[0],
+      on_dropdown_opened: () => {
+        console.log("open_def", typeof config?.get_defined_options)
+        if (typeof config?.get_defined_options == "function") {
+          defined_options = config?.get_defined_options()
+          console.log("get_defined_options", defined_options)
+          def_dropdown_manager.set_options(defined_options)
+        }
       },
+      mb: 1,
     })
-    set_root_path_button_manager = create_button_manager({
+    add_path_item_button_manager = create_button_manager({
       type: "outlined",
+      support_icon: "plus",
+      text: "Add Path Item",
       is_compressed: true,
-      text: `Set Root Path (${data_type_at_path?.type})`,
-      on_click: () => {
-        val = []
-        set_val_prepped()
-        set_next_path_options()
-      },
-    })
-    is_dynamic_path_item_checkbox_manager = create_checkbox_manager({
-      type: "toggle",
-      label: "Is Dynamic Path Item",
-      val: false,
-      on_change: (input) => {
-        if (input) {
-          next_path_variable_path_input_manager = create_variable_path_input_manager({
-            is_popover: false,
-            is_allow_dynamic_path_item: false,
-            variables_data_type: () => variables_data_type,
-            on_finish: (input) => add_path_item(input),
-          })
-        }
-      },
+      mb: 1,
+      on_click: () => prep_path([...(Array.isArray(val) ? val : []), null]),
     })
     finish_button_manager = create_button_manager({
       text: "Finish",
-      on_click: () => finish(),
-    })
-    arrow_icon_manager = create_icon_manager({
-      icon_id: "arrow",
-      deg: 90,
-      size: 1.2,
-      color: "var(--g11-t)",
+      on_click: () => {
+        if (typeof config?.on_finish == "function") {
+          config?.on_finish(val)
+        }
+      },
     })
-    set_val_prepped()
-    set_next_path_options()
+    prep_path(input?.val)
   }
 
   init(config)
@@ -202,49 +235,30 @@ export function create_variable_path_input_manager(config) {
     get val() {
       return val
     },
-    get val_prepped() {
-      return val_prepped
-    },
-    get is_popover() {
-      return is_popover
+    get val_text() {
+      return val_text
     },
-    get data_type_at_path() {
-      return data_type_at_path
+    get levels_nested() {
+      return levels_nested
     },
     get popover_manager() {
       return popover_manager
     },
-    get popover_toggle_button_manager() {
-      return popover_toggle_button_manager
+    get open_edit_button_manager() {
+      return open_edit_button_manager
     },
-    get small_popover_toggle_button_manager() {
-      return small_popover_toggle_button_manager
+    get def_dropdown_manager() {
+      return def_dropdown_manager
     },
-    get next_path_options() {
-      return next_path_options
+    get add_path_item_button_manager() {
+      return add_path_item_button_manager
     },
-    get set_null_button_manager() {
-      return set_null_button_manager
-    },
-    get set_root_path_button_manager() {
-      return set_root_path_button_manager
-    },
-    get is_allow_dynamic_path_item() {
-      return is_allow_dynamic_path_item
-    },
-    get is_dynamic_path_item_checkbox_manager() {
-      return is_dynamic_path_item_checkbox_manager
-    },
-    get next_path_variable_path_input_manager() {
-      return next_path_variable_path_input_manager
+    get path_prepped() {
+      return path_prepped
     },
     get finish_button_manager() {
       return finish_button_manager
     },
-    get arrow_icon_manager() {
-      return arrow_icon_manager
-    },
-    set_val,
-    init,
+    close_popover,
   }
 }

package/dist/client/astc_formatting/index.js

@@ -331,11 +331,11 @@ export function astc_to_markdown(astc) {
   return astc_element_to_markdown(astc)
 }
 
-export function get_variable_from_path(path, variables, loops) {
+export function get_variable_from_path(path, variables, defs) {
   if (Array.isArray(path)) {
     let combined_variables_loc = deep_copy({
       variables: variables,
-      loops: loops,
+      defs: defs,
     })
     for (let path_item of path) {
       if (Array.isArray(path_item)) {
@@ -350,13 +350,13 @@ export function get_variable_from_path(path, variables, loops) {
   return null
 }
 
-export function clean_variable_path(path, variables, loops) {
-  // eg. ['variables','dddd',['loops',0]] to ['variables','dddd',3]
+export function clean_variable_path(path, variables, defs) {
+  // eg. ['variables','dddd',['defs',0]] to ['variables','dddd',3]
   if (Array.isArray(path)) {
     let cleaned_path = []
     for (let path_item of path) {
       if (Array.isArray(path_item)) {
-        let sub_val_from_path = get_variable_from_path(path_item, variables, loops)
+        let sub_val_from_path = get_variable_from_path(path_item, variables, defs)
         cleaned_path.push(sub_val_from_path)
       } else {
         cleaned_path.push(path_item)
@@ -367,14 +367,14 @@ export function clean_variable_path(path, variables, loops) {
   return null
 }
 
-export function clean_attributes_from_variable_path(attributes, variables, loops) {
+export function clean_attributes_from_variable_path(attributes, variables, defs) {
   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 clean_path = clean_variable_path(att_val, variables, loops)
+        const clean_path = clean_variable_path(att_val, variables, defs)
         const att_key_to_set = att_key.split("_from_variable_path")?.[0]
-        cleaned_attributes[att_key_to_set] = get_variable_from_path(clean_path, variables, loops)
+        cleaned_attributes[att_key_to_set] = get_variable_from_path(clean_path, variables, defs)
         delete cleaned_attributes[att_key]
       }
     }
@@ -382,18 +382,18 @@ export function clean_attributes_from_variable_path(attributes, variables, loops
   return cleaned_attributes
 }
 
-export function astc_to_static_attributes(astc, variables, loops) {
+export function astc_to_static_attributes(astc, variables, defs) {
   if ([undefined, null].includes(astc)) {
     return null
   }
   let astc_loc = deep_copy(astc)
   if (Object.keys(astc_loc?.attributes || {}).length > 0) {
-    astc_loc.attributes = clean_attributes_from_variable_path(astc_loc?.attributes, variables, loops)
+    astc_loc.attributes = clean_attributes_from_variable_path(astc_loc?.attributes, variables, defs)
   }
   if (Array.isArray(astc_loc?.children)) {
     let cleaned_children = []
     for (let child of astc_loc.children) {
-      cleaned_children.push(astc_to_static_attributes(child, variables, loops))
+      cleaned_children.push(astc_to_static_attributes(child, variables, defs))
     }
     astc_loc.children = cleaned_children
   }
@@ -601,25 +601,6 @@ export function astc_to_email_html(astc, options, slots_html_and_text_body) {
   }
 }
 
-function increase_loops_on_path(path) {
-  let cleaned_path = null
-  if (Array.isArray(path)) {
-    cleaned_path = []
-    for (let path_item of path) {
-      if (Array.isArray(path_item)) {
-        if (path_item?.[0] == "loops" && typeof path_item?.[1] == "number") {
-          cleaned_path.push(["loops", path_item?.[1] + 1])
-        } else {
-          cleaned_path.push(increase_loops_on_path(path_item))
-        }
-      } else {
-        cleaned_path.push(path_item)
-      }
-    }
-  }
-  return cleaned_path
-}
-
 export function variables_data_type_remaining_to_astc(
   variables_data_type_remaining,
   preferred_content_use = "display",
@@ -795,15 +776,9 @@ export function variables_data_type_remaining_to_astc(
     })
   } else if (variables_data_type_remaining?.type == "array_uniform_literal") {
     if (preferred_content_use == "input") {
-      let leading_variable_path_children = increase_loops_on_path(leading_variable_path)
-      leading_variable_path_children = [
-        ...(Array.isArray(leading_variable_path_children) ? leading_variable_path_children : []),
-        ["loops", 0],
-      ]
       const child_astc = variables_data_type_remaining_to_astc(
         variables_data_type_remaining?.items,
-        preferred_content_use,
-        leading_variable_path_children
+        preferred_content_use
       )
       return astc_element("array_uniform_input", [child_astc], {
         val_from_variable_path: leading_variable_path,
@@ -813,15 +788,9 @@ export function variables_data_type_remaining_to_astc(
     // if (preferred_content_type == "object") {
     //   // maybe infer as table
     // }
-    let leading_variable_path_children = increase_loops_on_path(leading_variable_path)
-    leading_variable_path_children = [
-      ...(Array.isArray(leading_variable_path_children) ? leading_variable_path_children : []),
-      ["loops", 0],
-    ]
     const child_astc = variables_data_type_remaining_to_astc(
       variables_data_type_remaining?.items,
-      preferred_content_use,
-      leading_variable_path_children
+      preferred_content_use
     )
     return astc_element("loop", [child_astc], {
       val_from_variable_path: leading_variable_path,
@@ -840,30 +809,18 @@ export function variables_data_type_remaining_to_astc(
     // return astc_element("list", children)
   } else if (variables_data_type_remaining?.type == "object_uniform_literal") {
     if (preferred_content_use == "input") {
-      let leading_variable_path_children = increase_loops_on_path(leading_variable_path)
-      leading_variable_path_children = [
-        ...(Array.isArray(leading_variable_path_children) ? leading_variable_path_children : []),
-        ["loops", 0],
-      ]
       const child_astc = variables_data_type_remaining_to_astc(
         variables_data_type_remaining?.items,
-        preferred_content_use,
-        leading_variable_path_children
+        preferred_content_use
       )
       return astc_element("object_uniform_input", [child_astc], {
         val_from_variable_path: leading_variable_path,
         ...(variables_data_type_remaining?.attributes ?? {}),
       })
     }
-    let leading_variable_path_children = increase_loops_on_path(leading_variable_path)
-    leading_variable_path_children = [
-      ...(Array.isArray(leading_variable_path_children) ? leading_variable_path_children : []),
-      ["loops", 0],
-    ]
     const child_astc = variables_data_type_remaining_to_astc(
       variables_data_type_remaining?.items,
-      preferred_content_use,
-      leading_variable_path_children
+      preferred_content_use
     )
     return astc_element("object_uniform", [child_astc], {
       val_from_variable_path: leading_variable_path,

package/dist/client/docs/index.js

@@ -2111,11 +2111,6 @@ export const definitions = {
         default: null,
         description: "external data object used by show_conditions or variable-based attributes",
       },
-      loops: {
-        type: "any",
-        default: null,
-        description: "tracks current iteration indexes when rendering loop nodes",
-      },
       mapkit_js_token: {
         type: "string",
         default: null,
@@ -2176,13 +2171,9 @@ export const definitions = {
         type: "object",
         description: "the processed content node with type, manager, and possible children",
       },
-      variables: {
+      definition_stack: {
         type: "any",
-        description: "the variables reference passed in config, potentially used by show_conditions or loops",
-      },
-      loops: {
-        type: "any",
-        description: "the current loop indexes used within array or object loops",
+        description: "the definition_stack variables reference passed in config, potentially used by show_conditions",
       },
     },
   },
@@ -2212,20 +2203,10 @@ export const definitions = {
         default: null,
         description: "callback invoked for certain child content manager events",
       },
-      variables: {
-        type: "any",
-        default: null,
-        description: "external variables object for show_conditions or other variable-based usage",
-      },
-      loops: {
-        type: "any",
-        default: null,
-        description: "loop iteration indexes used within array or object loops",
-      },
-      variables_data_type: {
+      definition_stack: {
         type: "any",
         default: null,
-        description: "optional data-type object used by attribute input fields (derived if null)",
+        description: "external definition_stack variables object for show_conditions or other variable-based usage",
       },
       mapkit_js_token: {
         type: "string",