sveltekit-ui 1.0.33 → 1.0.35

package/dist/Components/Content/index.svelte

@@ -28,6 +28,7 @@
   import TableAdvanced from "../TableAdvanced/index.svelte"
   import FileInput from "../FileInput/index.svelte"
   import Button from "../Button/index.svelte"
+  import Spacer from "../Spacer/index.svelte"
   import Self from "./index.svelte"
   import { format_date, set_closurable_color, set_closurable, cron_to_english } from "../../client/index.js"
 
@@ -451,6 +452,15 @@
   </span>
 {:else if manager?.val_prepped?.type_id === "br"}
   <br />
+{:else if manager?.val_prepped?.type_id === "spacer"}
+  <Spacer
+    mt={manager?.val_prepped?.attributes?.mt}
+    mb={manager?.val_prepped?.attributes?.mb}
+    ml={manager?.val_prepped?.attributes?.ml}
+    mr={manager?.val_prepped?.attributes?.mr}
+    is_vert={manager?.val_prepped?.attributes?.is_vert}
+    color={manager?.val_prepped?.attributes?.color}
+  />
 {:else if manager?.val_prepped?.type_id === "hr"}
   <hr id={manager?.val_prepped?.selector_id} />
 {:else if manager?.val_prepped?.type_id === "slot"}

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

@@ -98,7 +98,7 @@ export function create_content_manager(config) {
       }
       for (let item of input) {
         if (Array.isArray(item)) {
-          const res = get_def_from_variable_path(item)
+          const res = get_def_from_variable_path(item, definition_stack)
           cleaned_path.push(res)
         } else {
           cleaned_path.push(item)
@@ -109,7 +109,6 @@ export function create_content_manager(config) {
   }
 
   async function set_variable_at_path(path, value, type) {
-    console.log("set_variable_at_path88", path, value, type)
     if (!Array.isArray(path)) {
       return
     }
@@ -361,7 +360,6 @@ export function create_content_manager(config) {
         children: [],
       }
     } else if (val_loc?.type_id == "color_input") {
-      console.log("color_input555", val_loc?.attributes)
       return {
         type_id: val_loc?.type_id,
         selector_id: val_loc?.selector_id,
@@ -608,7 +606,6 @@ export function create_content_manager(config) {
       const static_val = set_closurable(val_loc?.attributes?.val)
       if (Array.isArray(static_val)) {
         for (let i = 0; i < static_val.length; i++) {
-          // console.log("loop_test", val_loc?.attributes)
           let children = []
           if (Array.isArray(val_loc?.children) && val_loc?.children.length > 0) {
             is_children = true
@@ -859,7 +856,6 @@ export function create_content_manager(config) {
         },
         on_change: (input) => set_variable_at_path(val_loc?.attributes?.val_from_variable_path, input),
       })
-      console.log("table_dropdown", { val_loc, val_from: val_loc?.attributes?.val_from_variable_path })
       return {
         type_id: val_loc?.type_id,
         selector_id: val_loc?.selector_id,

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

@@ -56,7 +56,6 @@ export function create_content_input_manager(config) {
       if (input?.type_id == selector_id) {
         return { defined, is_found_selector_id: true }
       } else if (input?.type_id == "loop") {
-        console.log("loop_iter_iter_identifier", input?.attributes?.iter_identifier)
         if (input?.attributes?.iter_identifier) {
           defined[input?.attributes?.iter_identifier] = { type: "text_literal" }
         }
@@ -76,13 +75,10 @@ export function create_content_input_manager(config) {
   }
 
   function get_defined_options(selector_id) {
-    console.log("get_defined_options", deep_copy({ definition_stack, selector_id }))
     const defined_at_selector_id = get_defined_at_selector_id(selector_id)
-    console.log("defined_at_selector_id", deep_copy({ defined_at_selector_id }))
     const defined_data_type = json_to_data_type(
       Object.assign({}, ...[...(Array.isArray(definition_stack) ? definition_stack : [])].reverse())
     )
-    console.log("defined_data_type", deep_copy({ defined_data_type }))
     return Object.entries({ ...(defined_data_type?.properties || {}), ...defined_at_selector_id }).map(
       ([key, val]) => ({
         key,
@@ -438,7 +434,6 @@ export function create_content_input_manager(config) {
 
   function handle_element_child_drag_drop(e, selector_id, is_children = false) {
     e.stopPropagation()
-    console.log("handle_element_child_drag_drop", { selector_id, dragging_selector_id, is_children })
     if (selector_id == dragging_selector_id) {
       dragging_selector_id = null
       return

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

@@ -507,6 +507,7 @@ export function create_table_advanced_manager(config) {
         storage_items: null, // tbd
         on_search_table_row_ids: config?.on_search_table_row_ids,
         on_event: (input) => {
+          console.log("on_e", deep_copy({ input, row_definition_stack }))
           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)
@@ -688,16 +689,27 @@ export function create_table_advanced_manager(config) {
               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],
+              children: [
+                {
+                  type_id: "strong",
+                  selector_id: create_unique_id(null, 8),
+                  children: [],
+                  attributes: { content: column_id },
+                },
+                guessed_column_input_content,
+                {
+                  type_id: "spacer",
+                  selector_id: create_unique_id(null, 8),
+                  children: [],
+                  attributes: {
+                    mt: 1,
+                    mb: 1,
+                  },
+                },
+              ],
               attributes: {},
             }
           }

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

@@ -7,7 +7,6 @@ export function create_time_manager(config) {
   let text_color = $derived(set_closurable_color(config?.text_color, null))
 
   function init(config) {
-    console.log("create_time_manager", config)
     const time_full = get_time_object_from_val(
       set_closurable(config?.val),
       set_closurable(config?.format),
@@ -16,12 +15,10 @@ export function create_time_manager(config) {
     )
     datetime = time_full?.datetime ?? time_full?.iso_8601 ?? null
     content = time_full?.content ?? set_closurable(config?.val)
-    console.log("time_full", { time_full, datetime, content })
     if (config?.display_format == "calendar_date" && time_full?.year) {
       content = `${time_full?.year}-${String(time_full?.month).padStart(2, "0")}-${String(
         time_full?.day_of_month
       ).padStart(2, "0")}`
-      console.log("content_cal_da", { content })
     }
   }
 

package/dist/client/astc_formatting/index.js

@@ -780,11 +780,13 @@ export function variables_data_type_remaining_to_astc(
     if (preferred_content_use == "input") {
       const child_astc = variables_data_type_remaining_to_astc(
         variables_data_type_remaining?.items,
-        preferred_content_use
+        preferred_content_use,
+        [...leading_variable_path, ["loop_index"]]
       )
       return astc_element("array_uniform_input", [child_astc], {
         val_from_variable_path: leading_variable_path,
         ...(variables_data_type_remaining?.attributes ?? {}),
+        iter_identifier: "loop_index",
       })
     }
     // if (preferred_content_type == "object") {
@@ -795,7 +797,6 @@ export function variables_data_type_remaining_to_astc(
       preferred_content_use,
       [...leading_variable_path, ["loop_index"]]
     )
-    console.log("loop_child", { child_astc, variables_data_type_remaining })
     return astc_element("loop", [child_astc], {
       val_from_variable_path: leading_variable_path,
       ...(variables_data_type_remaining?.attributes ?? {}),
@@ -840,7 +841,7 @@ export function variables_data_type_remaining_to_astc(
         })
       : null
     if (preferred_content_use == "input") {
-      let children = label ? [label] : []
+      let children = variables_data_type_remaining?.attributes?.label ? [label] : []
       for (let [key, val] of Object.entries(variables_data_type_remaining?.properties || {})) {
         let property_children = []
         property_children.push(
@@ -1088,10 +1089,8 @@ export function json_to_data_type(data, type = null, is_list_child = false) {
       structure = json_to_data_type(data, "time_literal")
     } else if (keys.includes("cron")) {
       structure = json_to_data_type(data, "cron_literal")
-      console.log("cronnnnn", structure)
     } else if (keys.includes("main_number") && keys.includes("country_code")) {
       structure = json_to_data_type(data, "phone_literal")
-      console.log("phonnnnn", structure)
     } else {
       let properties = {}
       for (let key of Object.keys(data || {})) {

package/dist/client/index.js

@@ -336,7 +336,6 @@ function add_keys_to_set(obj, set, prefix) {
 }
 
 function get_value_by_path(obj, path) {
-  console.log("get_value_by_path000", { obj, path })
   if (Array.isArray(path)) {
     for (let i = 0; i < path.length; i++) {
       if (obj && typeof obj == "object" && obj.hasOwnProperty(path?.[i])) {

package/dist/client/types/index.js

@@ -1436,6 +1436,21 @@ export const content_types = {
     attributes: {},
     child_elements: {},
   },
+  spacer: {
+    kind: "content",
+    category: "content",
+    name: "Spacer",
+    display_order: 40,
+    attributes: {
+      mt: { type: "float_literal" },
+      mb: { type: "float_literal" },
+      ml: { type: "float_literal" },
+      mr: { type: "float_literal" },
+      is_vert: { type: "boolean_literal" },
+      color: { type: "color_literal" },
+    },
+    child_elements: {},
+  },
   hr: {
     kind: "content",
     category: "content",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-ui",
-  "version": "1.0.33",
+  "version": "1.0.35",
   "description": "A SvelteKit UI component library for building modern web applications",
   "license": "MIT",
   "type": "module",
@@ -19,14 +19,14 @@
   "dependencies": {
     "context-filter-polyfill": "^0.3.23",
     "qr-code-styling": "^1.9.2",
-    "svelte": "^5.38.5"
+    "svelte": "^5.38.6"
   },
   "peerDependencies": {
     "@sveltejs/kit": "^2.22.2"
   },
   "devDependencies": {
     "@sveltejs/adapter-vercel": "^5.10.2",
-    "@sveltejs/kit": "^2.36.2",
+    "@sveltejs/kit": "^2.36.3",
     "@sveltejs/package": "^2.5.0",
     "@sveltejs/vite-plugin-svelte": "^6.1.3",
     "@vercel/analytics": "^1.5.0",

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

@@ -28,6 +28,7 @@
   import TableAdvanced from "$lib/Components/TableAdvanced/index.svelte"
   import FileInput from "$lib/Components/FileInput/index.svelte"
   import Button from "$lib/Components/Button/index.svelte"
+  import Spacer from "$lib/Components/Spacer/index.svelte"
   import Self from "./index.svelte"
   import { format_date, set_closurable_color, set_closurable, cron_to_english } from "$lib/client/index.js"
 
@@ -451,6 +452,15 @@
   </span>
 {:else if manager?.val_prepped?.type_id === "br"}
   <br />
+{:else if manager?.val_prepped?.type_id === "spacer"}
+  <Spacer
+    mt={manager?.val_prepped?.attributes?.mt}
+    mb={manager?.val_prepped?.attributes?.mb}
+    ml={manager?.val_prepped?.attributes?.ml}
+    mr={manager?.val_prepped?.attributes?.mr}
+    is_vert={manager?.val_prepped?.attributes?.is_vert}
+    color={manager?.val_prepped?.attributes?.color}
+  />
 {:else if manager?.val_prepped?.type_id === "hr"}
   <hr id={manager?.val_prepped?.selector_id} />
 {:else if manager?.val_prepped?.type_id === "slot"}

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

@@ -98,7 +98,7 @@ export function create_content_manager(config) {
       }
       for (let item of input) {
         if (Array.isArray(item)) {
-          const res = get_def_from_variable_path(item)
+          const res = get_def_from_variable_path(item, definition_stack)
           cleaned_path.push(res)
         } else {
           cleaned_path.push(item)
@@ -109,7 +109,6 @@ export function create_content_manager(config) {
   }
 
   async function set_variable_at_path(path, value, type) {
-    console.log("set_variable_at_path88", path, value, type)
     if (!Array.isArray(path)) {
       return
     }
@@ -361,7 +360,6 @@ export function create_content_manager(config) {
         children: [],
       }
     } else if (val_loc?.type_id == "color_input") {
-      console.log("color_input555", val_loc?.attributes)
       return {
         type_id: val_loc?.type_id,
         selector_id: val_loc?.selector_id,
@@ -608,7 +606,6 @@ export function create_content_manager(config) {
       const static_val = set_closurable(val_loc?.attributes?.val)
       if (Array.isArray(static_val)) {
         for (let i = 0; i < static_val.length; i++) {
-          // console.log("loop_test", val_loc?.attributes)
           let children = []
           if (Array.isArray(val_loc?.children) && val_loc?.children.length > 0) {
             is_children = true
@@ -859,7 +856,6 @@ export function create_content_manager(config) {
         },
         on_change: (input) => set_variable_at_path(val_loc?.attributes?.val_from_variable_path, input),
       })
-      console.log("table_dropdown", { val_loc, val_from: val_loc?.attributes?.val_from_variable_path })
       return {
         type_id: val_loc?.type_id,
         selector_id: val_loc?.selector_id,

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

@@ -56,7 +56,6 @@ export function create_content_input_manager(config) {
       if (input?.type_id == selector_id) {
         return { defined, is_found_selector_id: true }
       } else if (input?.type_id == "loop") {
-        console.log("loop_iter_iter_identifier", input?.attributes?.iter_identifier)
         if (input?.attributes?.iter_identifier) {
           defined[input?.attributes?.iter_identifier] = { type: "text_literal" }
         }
@@ -76,13 +75,10 @@ export function create_content_input_manager(config) {
   }
 
   function get_defined_options(selector_id) {
-    console.log("get_defined_options", deep_copy({ definition_stack, selector_id }))
     const defined_at_selector_id = get_defined_at_selector_id(selector_id)
-    console.log("defined_at_selector_id", deep_copy({ defined_at_selector_id }))
     const defined_data_type = json_to_data_type(
       Object.assign({}, ...[...(Array.isArray(definition_stack) ? definition_stack : [])].reverse())
     )
-    console.log("defined_data_type", deep_copy({ defined_data_type }))
     return Object.entries({ ...(defined_data_type?.properties || {}), ...defined_at_selector_id }).map(
       ([key, val]) => ({
         key,
@@ -438,7 +434,6 @@ export function create_content_input_manager(config) {
 
   function handle_element_child_drag_drop(e, selector_id, is_children = false) {
     e.stopPropagation()
-    console.log("handle_element_child_drag_drop", { selector_id, dragging_selector_id, is_children })
     if (selector_id == dragging_selector_id) {
       dragging_selector_id = null
       return

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

@@ -507,6 +507,7 @@ export function create_table_advanced_manager(config) {
         storage_items: null, // tbd
         on_search_table_row_ids: config?.on_search_table_row_ids,
         on_event: (input) => {
+          console.log("on_e", deep_copy({ input, row_definition_stack }))
           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)
@@ -688,16 +689,27 @@ export function create_table_advanced_manager(config) {
               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],
+              children: [
+                {
+                  type_id: "strong",
+                  selector_id: create_unique_id(null, 8),
+                  children: [],
+                  attributes: { content: column_id },
+                },
+                guessed_column_input_content,
+                {
+                  type_id: "spacer",
+                  selector_id: create_unique_id(null, 8),
+                  children: [],
+                  attributes: {
+                    mt: 1,
+                    mb: 1,
+                  },
+                },
+              ],
               attributes: {},
             }
           }

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

@@ -7,7 +7,6 @@ export function create_time_manager(config) {
   let text_color = $derived(set_closurable_color(config?.text_color, null))
 
   function init(config) {
-    console.log("create_time_manager", config)
     const time_full = get_time_object_from_val(
       set_closurable(config?.val),
       set_closurable(config?.format),
@@ -16,12 +15,10 @@ export function create_time_manager(config) {
     )
     datetime = time_full?.datetime ?? time_full?.iso_8601 ?? null
     content = time_full?.content ?? set_closurable(config?.val)
-    console.log("time_full", { time_full, datetime, content })
     if (config?.display_format == "calendar_date" && time_full?.year) {
       content = `${time_full?.year}-${String(time_full?.month).padStart(2, "0")}-${String(
         time_full?.day_of_month
       ).padStart(2, "0")}`
-      console.log("content_cal_da", { content })
     }
   }
 

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

@@ -780,11 +780,13 @@ export function variables_data_type_remaining_to_astc(
     if (preferred_content_use == "input") {
       const child_astc = variables_data_type_remaining_to_astc(
         variables_data_type_remaining?.items,
-        preferred_content_use
+        preferred_content_use,
+        [...leading_variable_path, ["loop_index"]]
       )
       return astc_element("array_uniform_input", [child_astc], {
         val_from_variable_path: leading_variable_path,
         ...(variables_data_type_remaining?.attributes ?? {}),
+        iter_identifier: "loop_index",
       })
     }
     // if (preferred_content_type == "object") {
@@ -795,7 +797,6 @@ export function variables_data_type_remaining_to_astc(
       preferred_content_use,
       [...leading_variable_path, ["loop_index"]]
     )
-    console.log("loop_child", { child_astc, variables_data_type_remaining })
     return astc_element("loop", [child_astc], {
       val_from_variable_path: leading_variable_path,
       ...(variables_data_type_remaining?.attributes ?? {}),
@@ -840,7 +841,7 @@ export function variables_data_type_remaining_to_astc(
         })
       : null
     if (preferred_content_use == "input") {
-      let children = label ? [label] : []
+      let children = variables_data_type_remaining?.attributes?.label ? [label] : []
       for (let [key, val] of Object.entries(variables_data_type_remaining?.properties || {})) {
         let property_children = []
         property_children.push(
@@ -1088,10 +1089,8 @@ export function json_to_data_type(data, type = null, is_list_child = false) {
       structure = json_to_data_type(data, "time_literal")
     } else if (keys.includes("cron")) {
       structure = json_to_data_type(data, "cron_literal")
-      console.log("cronnnnn", structure)
     } else if (keys.includes("main_number") && keys.includes("country_code")) {
       structure = json_to_data_type(data, "phone_literal")
-      console.log("phonnnnn", structure)
     } else {
       let properties = {}
       for (let key of Object.keys(data || {})) {

package/src/lib/client/index.js

@@ -336,7 +336,6 @@ function add_keys_to_set(obj, set, prefix) {
 }
 
 function get_value_by_path(obj, path) {
-  console.log("get_value_by_path000", { obj, path })
   if (Array.isArray(path)) {
     for (let i = 0; i < path.length; i++) {
       if (obj && typeof obj == "object" && obj.hasOwnProperty(path?.[i])) {

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

@@ -1436,6 +1436,21 @@ export const content_types = {
     attributes: {},
     child_elements: {},
   },
+  spacer: {
+    kind: "content",
+    category: "content",
+    name: "Spacer",
+    display_order: 40,
+    attributes: {
+      mt: { type: "float_literal" },
+      mb: { type: "float_literal" },
+      ml: { type: "float_literal" },
+      mr: { type: "float_literal" },
+      is_vert: { type: "boolean_literal" },
+      color: { type: "color_literal" },
+    },
+    child_elements: {},
+  },
   hr: {
     kind: "content",
     category: "content",