sveltekit-ui 1.0.11 → 1.0.13

package/src/lib/client/index.js

@@ -551,20 +551,80 @@ export function get_data_type_at_path(path, full_data_type) {
   return data_type_at_path_loc
 }
 
-export function set_content_variables(input, variables_combined, pass_event_down) {
-  console.log("set_content_variables000", deep_copy({ input, variables_combined, pass_event_down }))
-  if (!Array.isArray(input?.variable_path_to_target)) {
+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) {
+  if (!Array.isArray(input?.variable_path_to_target) || !Array.isArray(definition_stack)) {
     throw new Error("Path must be an array")
   }
-  let content_variables_loc = deep_copy(variables_combined)
-  let temp = content_variables_loc
+  let defined_i = null
   const path = input.variable_path_to_target
+  const root_key = path[0]
+  for (let i = 0; i < definition_stack.length; i++) {
+    if (definition_stack?.[i].hasOwnProperty(root_key)) {
+      defined_i = i
+      break
+    }
+  }
+  if (defined_i == null) {
+    throw new Error("Root key not found in stack")
+  }
+  let defined_variables_loc = deep_copy(definition_stack[defined_i][root_key])
+  let temp = defined_variables_loc
   const last_key = path[path.length - 1]
-  for (let i = 0; i < path.length - 1; i++) {
+  for (let i = 1; i < path.length - 1; i++) {
     const key = path[i]
     if (!(key in temp) || typeof temp[key] !== "object" || temp[key] === null) {
-      if (Number.isInteger(last_key)) {
-        temp[key] = Array(last_key).fill(null)
+      const next_key = path[i + 1]
+      if (Number.isInteger(next_key)) {
+        temp[key] = []
       } else {
         temp[key] = {}
       }
@@ -576,17 +636,26 @@ export function set_content_variables(input, variables_combined, pass_event_down
       if (
         typeof input?.index_to_insert_at === "number" &&
         input?.index_to_insert_at >= 0 &&
-        input?.index_to_insert_at <= temp?.[last_key].length
+        input?.index_to_insert_at <= temp[last_key].length
       ) {
         temp[last_key].splice(input.index_to_insert_at, 0, input.value)
       } else {
         temp[last_key].push(input.value)
       }
+    } else if (Array.isArray(temp)) {
+      if (
+        typeof input?.index_to_insert_at === "number" &&
+        input?.index_to_insert_at >= 0 &&
+        input?.index_to_insert_at <= temp.length
+      ) {
+        temp.splice(input.index_to_insert_at, 0, input.value)
+      } else {
+        temp.push(input.value)
+      }
     } else {
       temp[last_key] = [input.value]
     }
   } else if (input?.type == "set_variables_delete") {
-    console.log("set_variables_delete", deep_copy({ temp, last_key }))
     if (Array.isArray(temp)) {
       if (typeof last_key === "number" && last_key > -1 && last_key < temp.length) {
         temp.splice(last_key, 1)
@@ -595,7 +664,6 @@ export function set_content_variables(input, variables_combined, pass_event_down
       delete temp[last_key]
     }
   } else if (input?.type == "set_variables_key") {
-    console.log("set_variables_key", deep_copy({ temp, last_key }))
     if (Array.isArray(temp)) {
       throw new Error("Cannot change key in array")
     } else if (typeof temp === "object" && temp?.hasOwnProperty(last_key)) {
@@ -607,107 +675,35 @@ export function set_content_variables(input, variables_combined, pass_event_down
   } else {
     temp[last_key] = input?.value
   }
-  console.log("vars_fin", content_variables_loc?.variables)
+  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,
-      variables: content_variables_loc?.variables,
+      definition_stack: definition_stack,
       set_from_content_id: input.set_from_content_id,
       variable_path_to_target: input.variable_path_to_target,
     })
   }
   return {
     is_success: true,
-    variables: content_variables_loc?.variables,
-  }
-}
-
-// export function set_content_variables(input, variables_combined, pass_event_down) {
-//   console.log("set_content_variables000", input)
-//   if (!Array.isArray(input?.variable_path_to_target)) {
-//     throw new Error("Path must be an array")
-//   }
-//   let content_variables_loc = deep_copy(variables_combined)
-//   let temp = content_variables_loc
-//   const path = input.variable_path_to_target
-//   const last_key = path[path.length - 1]
-//   for (let i = 0; i < path.length - 1; i++) {
-//     const key = path[i]
-//     const nextKey = path[i + 1]
-
-//     if (!(key in temp) || typeof temp[key] !== "object" || temp[key] === null) {
-//       if (typeof nextKey === "number") {
-//         temp[key] = []
-//       } else {
-//         temp[key] = {}
-//       }
-//     }
-//     temp = temp[key]
-//   }
-//   if (input?.type == "set_variables_insert") {
-//     if (Array.isArray(temp[last_key])) {
-//       if (
-//         typeof input?.index_to_insert_at === "number" &&
-//         input?.index_to_insert_at >= 0 &&
-//         input?.index_to_insert_at <= temp?.[last_key].length
-//       ) {
-//         temp[last_key].splice(input.index_to_insert_at, 0, input.value)
-//       } else {
-//         temp[last_key].push(input.value)
-//       }
-//     } else {
-//       temp[last_key] = [input.value]
-//     }
-//   } else if (input?.type == "set_variables_delete") {
-//     if (Array.isArray(temp)) {
-//       if (typeof last_key === "number" && last_key > -1 && last_key < temp.length) {
-//         temp.splice(last_key, 1)
-//       }
-//     } else if (typeof temp === "object" && temp?.hasOwnProperty(last_key)) {
-//       delete temp[last_key]
-//     }
-//   } else if (input?.type == "set_variables_key") {
-//     if (Array.isArray(temp)) {
-//       throw new Error("Cannot change key in array")
-//     } else if (typeof temp === "object" && temp?.hasOwnProperty(last_key)) {
-//       temp[input.value] = temp[last_key]
-//       delete temp[last_key]
-//     } else {
-//       throw new Error("Key not found in object")
-//     }
-//   } else {
-//     temp[last_key] = input?.value
-//   }
-//   if (typeof pass_event_down === "function") {
-//     pass_event_down({
-//       value: input.value,
-//       variables: content_variables_loc,
-//       set_from_content_id: input.set_from_content_id,
-//       variable_path_to_target: input.variable_path_to_target,
-//     })
-//   }
-//   return {
-//     is_success: true,
-//     variables: content_variables_loc,
-//   }
-// }
+    definition_stack: definition_stack,
+  }
+}
 
 // tbd could also turn into a typed thing with arrays of v or objects, color, etc
 export function v(config) {
   let val = $state(null)
-
   function on_change(from_id = null) {
     if (typeof config?.on_change == "function") {
       config?.on_change({ val, from_id: from_id })
     }
   }
-
   function init(config) {
     val = config?.val
   }
-
   init(config)
-
   return {
     get val() {
       return val

package/src/lib/client/types/index.js

@@ -1996,6 +1996,8 @@ export const content_types = {
         type: "variable_path_literal",
         allowed_types: ["array_uniform_literal", "object_uniform_literal"],
       },
+      iter_identifier: { type: "text_literal" },
+      join_text: { type: "text_literal" },
     },
     child_elements: {
       ...main_child_element_options,

package/src/lib/index.js

@@ -76,6 +76,8 @@ export { default as Popover } from "./Components/Popover/index.svelte"
 export { create_popover_manager } from "./Components/Popover/index.svelte.js"
 export { default as TableAdvanced } from "./Components/TableAdvanced/index.svelte"
 export { create_table_advanced_manager } from "./Components/TableAdvanced/index.svelte.js"
+export { default as VariablePathInput } from "./Components/VariablePathInput/index.svelte"
+export { create_variable_path_input_manager } from "./Components/VariablePathInput/index.svelte.js"
 export { default as Spacer } from "./Components/Spacer/index.svelte"
 export { default as TransparentBackground } from "./Components/TransparentBackground/index.svelte"
 export { default as XFollow } from "./Components/XFollow/index.svelte"

package/src/routes/[component]/Showcase/Content/index.svelte

@@ -1,7 +1,8 @@
 <script>
-  import ContentDisplay from "$lib/Components/Content/index.svelte"
+  import Content from "$lib/Components/Content/index.svelte"
   import { create_content_manager } from "$lib/Components/Content/index.svelte.js"
   import { PUBLIC_APPLE_MAPKIT_JS_API_KEY } from "$env/static/public"
+  import { deep_copy, set_definition_stack } from "$lib/client/index.js"
 
   const val = {
     type_id: "div",
@@ -37,108 +38,73 @@
         attributes: {},
       },
       {
-        type_id: "table",
-        selector_id: "table_qktny",
+        type_id: "checkbox",
+        selector_id: "kdotcril",
+        children: [],
+        attributes: { val_from_variable_path: ["variables", "cccc"], type: "checkbox", size: null, color: null },
+      },
+      {
+        type_id: "loop",
+        selector_id: "bwrgl",
         children: [
           {
-            type_id: "thead",
-            selector_id: "thead_zcdil",
+            type_id: "h5",
+            selector_id: "clrzp",
             children: [
               {
-                type_id: "tr",
-                selector_id: "tr_rzjyi",
-                children: [
-                  {
-                    type_id: "th",
-                    selector_id: "th_pcocw",
-                    children: [
-                      {
-                        type_id: "base_text",
-                        selector_id: "base_text_jbdbr",
-                        children: [],
-                        attributes: { content: "You can make tables" },
-                      },
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    type_id: "td",
-                    selector_id: "td_kcizj",
-                    children: [
-                      {
-                        type_id: "base_text",
-                        selector_id: "base_text_wyfea",
-                        children: [],
-                        attributes: { content: "yes indeed" },
-                      },
-                    ],
-                    attributes: {},
-                  },
-                ],
-                attributes: {},
+                type_id: "base_text",
+                selector_id: "zsaou",
+                children: [],
+                attributes: {
+                  content_from_variable_path: ["variables", "stuff", ["booly_i"]],
+                  text_color: { l: 15, c: 13, h: 6, o: 24, is_dark_theme_invert: true },
+                },
               },
             ],
             attributes: {},
           },
           {
-            type_id: "tbody",
-            selector_id: "tbody_yoiis",
-            children: [
-              {
-                type_id: "tr",
-                selector_id: "tr_vazwy",
-                children: [
-                  {
-                    type_id: "th",
-                    selector_id: "th_hegat",
-                    children: [
-                      {
-                        type_id: "base_text",
-                        selector_id: "base_text_jbxot",
-                        children: [],
-                        attributes: { content: "and other stuff" },
-                      },
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    type_id: "td",
-                    selector_id: "td_egqxj",
-                    children: [
-                      {
-                        type_id: "base_text",
-                        selector_id: "base_text_urtfy",
-                        children: [],
-                        attributes: { content: "certainly" },
-                      },
-                    ],
-                    attributes: {},
-                  },
-                ],
-                attributes: {},
-              },
-            ],
-            attributes: {},
+            type_id: "checkbox",
+            selector_id: "lqvon",
+            children: [],
+            attributes: {
+              val_from_variable_path: ["variables", "stuff", ["booly_i"]],
+              size: 2.4,
+              type: "checkbox",
+              label: null,
+              name: null,
+            },
           },
         ],
-        attributes: { caption: null },
-      },
-      {
-        type_id: "code",
-        selector_id: "code_mhlkk",
-        children: [],
-        attributes: { content: "Code blocks and more222", language: null },
+        attributes: { iter_identifier: "booly_i", val_from_variable_path: ["variables", "stuff"], join_text: null },
       },
     ],
     attributes: {},
   }
 
-  let content_manager = create_content_manager({ val })
+  let variables = $state({
+    cccc: false,
+    stuff: [false, true, false],
+  })
+
+  let content_manager = create_content_manager({
+    val,
+    definition_stack: [{ variables }],
+    // on_event: (input) => console.log("on_event", input),
+    on_event: (input) => {
+      console.log("on_event00", input)
+      const res = set_definition_stack(input, [{ variables: variables }], content_manager.pass_event_down)
+      variables = res?.definition_stack?.[0]?.variables
+      console.log("on_event01", res?.definition_stack)
+      return res
+    },
+  })
 </script>
 
+<pre>{JSON.stringify(variables, null, 2)}</pre>
 <div>
   <div style="max-width: 65rem; margin: auto;">
     <h4>Example</h4>
-    <ContentDisplay manager={content_manager} />
+    <Content manager={content_manager} />
   </div>
 </div>

package/src/routes/[component]/Showcase/ContentInput/index.svelte

@@ -7,7 +7,7 @@
   import { create_json_manager } from "$lib/Components/Json/index.svelte.js"
   import DataTypeInput from "$lib/Components/DataTypeInput/index.svelte"
   // import { create_data_type_input_manager } from "$lib/Components/DataTypeInput/index.svelte.js"
-  import { deep_copy, set_content_variables } from "$lib/client/index.js"
+  import { deep_copy, set_definition_stack } from "$lib/client/index.js"
   import { PUBLIC_APPLE_MAPKIT_JS_API_KEY } from "$env/static/public"
 
   const content_variables_initial = {
@@ -258,7 +258,7 @@
                 selector_id: "zsaou",
                 children: [],
                 attributes: {
-                  content_from_variable_path: ["variables", "dddd", ["loops", 0]],
+                  content_from_variable_path: ["variables", "dddd", ["booly_i"]],
                   text_color: { l: 15, c: 13, h: 6, o: 24, is_dark_theme_invert: true },
                 },
               },
@@ -270,15 +270,14 @@
             selector_id: "lqvon",
             children: [],
             attributes: {
-              val_from_variable_path: ["variables", "dddd", ["loops", 0]],
-              size: 2.4,
+              val_from_variable_path: ["variables", "dddd", ["booly_i"]],
               type: "checkbox",
-              label: null,
-              name: null,
+              size: 2.4,
+              color: null,
             },
           },
         ],
-        attributes: { val_from_variable_path: ["variables", "dddd"] },
+        attributes: { iter_identifier: "booly_i", val_from_variable_path: ["variables", "dddd"], join_text: null },
       },
       {
         type_id: "show_conditions",
@@ -330,17 +329,16 @@
     // storage: account_storage,
     storage_default_folder_path: ["pages"],
     mapkit_js_token: PUBLIC_APPLE_MAPKIT_JS_API_KEY,
-    // variables_data_type: () => data_type_input_manager?.val,
-    variables: () => variables_json_manager?.val,
+    definition_stack: [{ variables: variables_json_manager?.val }],
     on_event: (input) => {
       console.log("on_event00", input)
-      const res = set_content_variables(
+      const res = set_definition_stack(
         input,
-        { variables: variables_json_manager?.val },
+        [{ variables: variables_json_manager?.val }],
         content_input_manager.pass_event_down
       )
-      variables_json_manager.set_val(res?.variables)
-      console.log("on_event01", res?.variables)
+      variables_json_manager.set_val(res?.definition_stack)
+      console.log("on_event01", res?.definition_stack)
       return res
     },
   })