sveltekit-ui 1.0.32 → 1.0.34

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

@@ -93,12 +93,14 @@ export function create_content_manager(config) {
     let cleaned_path = []
     if (Array.isArray(input) && input.length > 0) {
       let is_def = is_defined(input?.[0], definition_stack)
+      console.log("is_def", { is_def, item: input?.[0] })
       if (!is_def) {
         return []
       }
       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)
+          console.log("get_def_from_variable_path", { item, res })
           cleaned_path.push(res)
         } else {
           cleaned_path.push(item)
@@ -109,11 +111,11 @@ 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
     }
     let cleaned_path = clean_variable_path(path)
+    console.log("set_variable_at_path88", deep_copy({ path, value, type, cleaned_path, definition_stack }))
     if (typeof config?.on_event == "function") {
       if (type == "insert") {
         return config?.on_event({
@@ -608,7 +610,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

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

@@ -116,14 +116,14 @@ export function create_attributes_input_manager(config) {
         val_format_dropdown_manager = create_dropdown_manager({
           label: "Format",
           is_button_compressed: true,
-          val: config?.val?.format ?? "calendar_date",
+          val: config?.val?.format ?? "time_full",
           options: Object.entries(time_formats).map(([key, val]) => ({ key: key, name: val?.name })),
         })
         let display_format_dropdown_manager = $state(
           create_dropdown_manager({
             label: "Display Format",
             is_button_compressed: true,
-            val: config?.val?.display_format,
+            val: config?.val?.display_format ?? "calendar_date",
             options: [
               { key: "raw", name: "Raw" },
               { key: "time_ago", name: "Time Ago" },

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/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 ?? {}),
@@ -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/dist/index.js

@@ -66,6 +66,8 @@ export { default as TextArrayInput } from "./Components/TextArrayInput/index.sve
 export { create_text_array_input_manager } from "./Components/TextArrayInput/index.svelte.js"
 export { default as TimeInput } from "./Components/TimeInput/index.svelte"
 export { create_time_input_manager } from "./Components/TimeInput/index.svelte.js"
+export { default as Time } from "./Components/Time/index.svelte"
+export { create_time_manager } from "./Components/Time/index.svelte.js"
 export { default as DataTypeInput } from "./Components/DataTypeInput/index.svelte"
 export { create_data_type_input_manager } from "./Components/DataTypeInput/index.svelte.js"
 export { default as Button } from "./Components/Button/index.svelte"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-ui",
-  "version": "1.0.32",
+  "version": "1.0.34",
   "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.3"
+    "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

@@ -93,12 +93,14 @@ export function create_content_manager(config) {
     let cleaned_path = []
     if (Array.isArray(input) && input.length > 0) {
       let is_def = is_defined(input?.[0], definition_stack)
+      console.log("is_def", { is_def, item: input?.[0] })
       if (!is_def) {
         return []
       }
       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)
+          console.log("get_def_from_variable_path", { item, res })
           cleaned_path.push(res)
         } else {
           cleaned_path.push(item)
@@ -109,11 +111,11 @@ 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
     }
     let cleaned_path = clean_variable_path(path)
+    console.log("set_variable_at_path88", deep_copy({ path, value, type, cleaned_path, definition_stack }))
     if (typeof config?.on_event == "function") {
       if (type == "insert") {
         return config?.on_event({
@@ -608,7 +610,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

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

@@ -116,14 +116,14 @@ export function create_attributes_input_manager(config) {
         val_format_dropdown_manager = create_dropdown_manager({
           label: "Format",
           is_button_compressed: true,
-          val: config?.val?.format ?? "calendar_date",
+          val: config?.val?.format ?? "time_full",
           options: Object.entries(time_formats).map(([key, val]) => ({ key: key, name: val?.name })),
         })
         let display_format_dropdown_manager = $state(
           create_dropdown_manager({
             label: "Display Format",
             is_button_compressed: true,
-            val: config?.val?.display_format,
+            val: config?.val?.display_format ?? "calendar_date",
             options: [
               { key: "raw", name: "Raw" },
               { key: "time_ago", name: "Time Ago" },

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/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 ?? {}),
@@ -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",

package/src/lib/index.js

@@ -66,6 +66,8 @@ export { default as TextArrayInput } from "./Components/TextArrayInput/index.sve
 export { create_text_array_input_manager } from "./Components/TextArrayInput/index.svelte.js"
 export { default as TimeInput } from "./Components/TimeInput/index.svelte"
 export { create_time_input_manager } from "./Components/TimeInput/index.svelte.js"
+export { default as Time } from "./Components/Time/index.svelte"
+export { create_time_manager } from "./Components/Time/index.svelte.js"
 export { default as DataTypeInput } from "./Components/DataTypeInput/index.svelte"
 export { create_data_type_input_manager } from "./Components/DataTypeInput/index.svelte.js"
 export { default as Button } from "./Components/Button/index.svelte"