sveltekit-ui 1.0.11 → 1.0.13

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

@@ -40,7 +40,7 @@
             selector_id: "dvobhkqp",
             children: [],
             attributes: {
-              content_from_variable_path: ["variables", "rows", ["loops", 0], "id"],
+              content_from_variable_path: ["rows", ["row_i"], "id"],
               size: 10,
             },
           },
@@ -58,68 +58,35 @@
         selector_id: "div_escitwrx",
         children: [
           {
-            type_id: "object_uniform_input",
-            selector_id: "lipxplrm",
+            type_id: "div",
+            selector_id: "ymcklbcy",
             children: [
               {
                 type_id: "div",
-                selector_id: "ymcklbcy",
+                selector_id: "drsdciju",
                 children: [
                   {
-                    type_id: "div",
-                    selector_id: "drsdciju",
-                    children: [
-                      {
-                        type_id: "base_text",
-                        selector_id: "oejzzhrk",
-                        children: [],
-                        attributes: {
-                          content: "seat_order_l_to_r:",
-                        },
-                      },
-                      {
-                        type_id: "text_input",
-                        selector_id: "lkblpxsl",
-                        children: [],
-                        attributes: {
-                          type: "number",
-                          val_from_variable_path: [
-                            "variables",
-                            "rows",
-                            ["loops", 1],
-                            "sharks",
-                            ["loops", 0],
-                            "seat_order_l_to_r",
-                          ],
-                        },
-                      },
-                    ],
-                    attributes: {},
+                    type_id: "base_text",
+                    selector_id: "oejzzhrk",
+                    children: [],
+                    attributes: {
+                      content: "label:",
+                    },
+                  },
+                  {
+                    type_id: "text_input",
+                    selector_id: "lkblpxsl",
+                    children: [],
+                    attributes: {
+                      val_from_variable_path: ["rows", ["row_i"], "label"],
+                    },
                   },
                 ],
                 attributes: {},
               },
             ],
             attributes: {
-              val_from_variable_path: ["variables", "rows", ["loops", 0], "sharks"],
-              property_key_table_id: "fwzniuwaxgplzhakcpqx",
-              label: "sharks",
-            },
-          },
-        ],
-        attributes: {},
-      },
-      {
-        type_id: "div",
-        selector_id: "div_chvlwjbr",
-        children: [
-          {
-            type_id: "table_row_id_input",
-            selector_id: "rjoyxsas",
-            children: [],
-            attributes: {
-              table_id: "gqcilfsvgggxouxxupzq",
-              label: "season",
+              val_from_variable_path: ["rows", ["row_i"], "label"],
             },
           },
         ],
@@ -127,127 +94,38 @@
       },
       {
         type_id: "div",
-        selector_id: "div_ukbvlckf",
-        children: [
-          {
-            type_id: "text_input",
-            selector_id: "qaqweuks",
-            children: [],
-            attributes: {
-              type: "number",
-              val_from_variable_path: ["variables", "rows", ["loops", 0], "season_number"],
-              label: "season_number",
-            },
-          },
-        ],
-        attributes: {},
-      },
-      {
-        type_id: "div",
-        selector_id: "div_rqanuqun",
-        children: [
-          {
-            type_id: "text_input",
-            selector_id: "pvabnllw",
-            children: [],
-            attributes: {
-              type: "number",
-              val_from_variable_path: ["variables", "rows", ["loops", 0], "episode_number"],
-              label: "episode_number",
-            },
-          },
-        ],
-        attributes: {},
-      },
-      {
-        type_id: "div",
-        selector_id: "div_sqzsqmdj",
-        children: [
-          {
-            type_id: "text_input",
-            selector_id: "oomvgein",
-            children: [],
-            attributes: {
-              type: "number",
-              val_from_variable_path: ["variables", "rows", ["loops", 0], "episode_number_overall"],
-              label: "episode_number_overall",
-            },
-          },
-        ],
-        attributes: {},
-      },
-      {
-        type_id: "div",
-        selector_id: "div_qtmiebqv",
-        children: [
-          {
-            type_id: "text_input",
-            selector_id: "wogzeujk",
-            children: [],
-            attributes: {
-              type: "number",
-              val_from_variable_path: ["variables", "rows", ["loops", 0], "viewers_in_millions"],
-              label: "viewers_in_millions",
-            },
-          },
-        ],
-        attributes: {},
-      },
-      {
-        type_id: "div",
-        selector_id: "div_xjoebvfy",
-        children: [
-          {
-            type_id: "time_input",
-            selector_id: "ypqcitbz",
-            children: [],
-            attributes: {
-              val_type: "epoch",
-              val_from_variable_path: ["variables", "rows", ["loops", 0], "air_date"],
-              label: "air_date",
-            },
-          },
-        ],
-        attributes: {},
-      },
-      {
-        type_id: "div",
-        selector_id: "div_xzrkrlhc",
-        children: [
-          {
-            type_id: "text_input",
-            selector_id: "zcbbkbqx",
-            children: [],
-            attributes: {
-              type: "number",
-              val_from_variable_path: ["variables", "rows", ["loops", 0], "prod_code"],
-              label: "prod_code",
-            },
-          },
-        ],
-        attributes: {},
-      },
-      {
-        type_id: "div",
-        selector_id: "div_xzaarlhc",
+        selector_id: "div_escitwrx",
         children: [
           {
-            type_id: "base_text",
-            selector_id: "jajajaj",
-            children: [],
-            attributes: {
-              content: "location_test",
-            },
-          },
-          {
-            type_id: "location_input",
-            selector_id: "zqqbkbqx",
-            children: [],
+            type_id: "div",
+            selector_id: "ymcklbcy",
+            children: [
+              {
+                type_id: "div",
+                selector_id: "drsdciju",
+                children: [
+                  {
+                    type_id: "base_text",
+                    selector_id: "oejzzhrk",
+                    children: [],
+                    attributes: {
+                      content: "fav_color:",
+                    },
+                  },
+                  {
+                    type_id: "color_input",
+                    selector_id: "lkblpxsl",
+                    children: [],
+                    attributes: {
+                      val_from_variable_path: ["rows", ["row_i"], "fav_color"],
+                    },
+                  },
+                ],
+                attributes: {},
+              },
+            ],
             attributes: {
-              label: "location",
-              is_popover_button: true,
-              is_popover: true,
-              val_from_variable_path: ["variables", "rows", ["loops", 0], "location"],
+              val_from_variable_path: ["rows", ["row_i"], "fav_color"],
             },
           },
         ],
@@ -286,7 +164,7 @@
             children: [],
             attributes: {
               format: "epoch",
-              val_from_variable_path: ["variables", "rows", ["loops", 0], "db_epoch_created"],
+              val_from_variable_path: ["rows", ["row_i"], "db_epoch_created"],
             },
           },
           {
@@ -331,7 +209,7 @@
             children: [],
             attributes: {
               format: "epoch",
-              val_from_variable_path: ["variables", "rows", ["loops", 0], "db_epoch_updated"],
+              val_from_variable_path: ["rows", ["row_i"], "db_epoch_updated"],
             },
           },
           {
@@ -347,102 +225,11 @@
   }
 
   let data = $state({
-    id: "srooithnmomwnpbmexkr",
-    name: "Hello World",
-    rows: [
-      {
-        id: "dnscyyvfhqdzptdvzcdp",
-        label: null,
-        fav_color: null,
-        db_epoch_created: 1723421882,
-        db_epoch_updated: 1723421882,
-      },
-      {
-        id: "wqhfxttzpwdpkawzusyt",
-        label: "tint bl",
-        fav_color: {
-          c: 16,
-          h: 17,
-          l: 5,
-          o: 16,
-          is_dark_theme_invert: true,
-        },
-        db_epoch_created: 1723421882,
-        db_epoch_updated: 1723422096,
-      },
-      {
-        id: "egrdjfqlcysykmpwudsp",
-        label: null,
-        fav_color: {
-          c: 10,
-          h: 4,
-          l: 1,
-          o: 24,
-          is_dark_theme_invert: true,
-        },
-        db_epoch_created: 1723422106,
-        db_epoch_updated: 1723422106,
-      },
-      {
-        id: "zbcqvteloefgebbcwrnd",
-        label: null,
-        fav_color: {
-          c: 10,
-          h: 4,
-          l: 1,
-          o: 24,
-          is_dark_theme_invert: true,
-        },
-        db_epoch_created: 1723423614,
-        db_epoch_updated: 1723423614,
-      },
-      {
-        id: "ennjpaemwacveifswbwq",
-        label: null,
-        fav_color: null,
-        db_epoch_created: 1723423614,
-        db_epoch_updated: 1723423614,
-      },
-      {
-        id: "redpwlvrmboleibyawxj",
-        label: "tint bl",
-        fav_color: {
-          c: 16,
-          h: 17,
-          l: 5,
-          o: 16,
-          is_dark_theme_invert: true,
-        },
-        db_epoch_created: 1723423614,
-        db_epoch_updated: 1723423614,
-      },
-      {
-        id: "ugarkuprolztkecxqody",
-        label: "not invert",
-        fav_color: {
-          c: 12,
-          h: 14,
-          l: 4,
-          o: 24,
-          is_dark_theme_invert: false,
-        },
-        db_epoch_created: 1723423614,
-        db_epoch_updated: 1723423678,
-      },
-      {
-        id: "dyfidxdkepupllmccxmb",
-        label: "yes invert",
-        fav_color: {
-          c: 12,
-          h: 14,
-          l: 4,
-          o: 24,
-          is_dark_theme_invert: true,
-        },
-        db_epoch_created: 1723421882,
-        db_epoch_updated: 1723423732,
-      },
-    ],
+    id: "cbsemvrsoidhrzyhugue",
+    name: "test",
+    rows: [],
+    limit: 100,
+    offset: 0,
     columns: {
       id: {
         is_fixed: true,
@@ -481,103 +268,50 @@
         is_autogenerated: true,
         is_force_uniqueness: false,
       },
-      label: {
+      ttttt: {
         is_fixed: false,
         is_shown: true,
         alignment: "left",
-        max_width: 25,
-        min_width: 3,
-        description: null,
+        max_width: 30,
+        min_width: 20,
+        description: "ffff",
         is_nullable: true,
         body_content: {
-          type_id: "base_text",
+          type_id: "number",
           children: [],
           attributes: {
-            color: null,
-            content: null,
-            content_from_variable_path: ["variables", "rows", ["loops", 0], "label"],
+            val_from_variable_path: ["rows", ["row_i"], "ttttt"],
           },
-          selector_id: "mersu",
+          selector_id: "vukyefhw",
         },
         db_data_type: {
-          type: "text_literal",
+          type: "int_literal",
           attributes: {},
         },
         is_db_column: true,
+        is_updatable: false,
         default_value: null,
         display_order: 1,
-        postgres_type: "text",
+        postgres_type: "int",
         header_content: {
           type_id: "base_text",
           children: [],
           attributes: {
-            color: null,
-            content: "Label",
-            content_from_variable_path: null,
+            content: "Ttttt",
           },
-          selector_id: "fbhid",
-        },
-        is_primary_key: false,
-        is_autogenerated: false,
-        is_force_uniqueness: false,
-      },
-      fav_color: {
-        is_fixed: false,
-        is_shown: true,
-        alignment: "right",
-        max_width: 25,
-        min_width: 3,
-        description: null,
-        is_nullable: true,
-        body_content: {
-          type_id: "color",
-          children: [],
-          attributes: {
-            val: {
-              c: 21,
-              h: 2,
-              l: 6,
-              o: 24,
-              is_dark_theme_invert: true,
-            },
-            val_from_variable_path: ["variables", "rows", ["loops", 0], "fav_color"],
-          },
-          selector_id: "anpwr",
-        },
-        db_data_type: {
-          type: "color_literal",
-          attributes: {},
-        },
-        is_db_column: true,
-        default_value: null,
-        display_order: 2,
-        postgres_type: "jsonb",
-        header_content: {
-          type_id: "base_text",
-          children: [],
-          attributes: {
-            color: {
-              c: 10,
-              h: 15,
-              l: 19,
-              o: 24,
-              is_dark_theme_invert: true,
-            },
-            content: "Fav Color",
-            content_from_variable_path: null,
-          },
-          selector_id: "gcvda",
+          selector_id: "lpcqsjlq",
         },
         is_primary_key: false,
         is_autogenerated: false,
         is_force_uniqueness: false,
+        is_use_in_short_display: false,
       },
       db_epoch_created: {
         is_fixed: false,
         is_shown: true,
         alignment: "left",
         max_width: 50,
-        min_width: 5,
+        min_width: 20,
         description: null,
         is_nullable: false,
         body_content: {
@@ -587,7 +321,7 @@
             format: "epoch",
             val_from_variable_path: ["variables", "rows", ["loops", 0], "db_epoch_created"],
           },
-          selector_id: "urzjm",
+          selector_id: "time_urzjm",
         },
         db_data_type: {
           type: "epoch_literal",
@@ -595,7 +329,7 @@
         },
         is_db_column: true,
         default_value: null,
-        display_order: 3,
+        display_order: 2,
         postgres_type: "bigint",
         header_content: {
           type_id: "base_text",
@@ -614,7 +348,7 @@
         is_shown: true,
         alignment: "left",
         max_width: 50,
-        min_width: 5,
+        min_width: 20,
         description: null,
         is_nullable: false,
         body_content: {
@@ -624,7 +358,7 @@
             format: "epoch",
             val_from_variable_path: ["variables", "rows", ["loops", 0], "db_epoch_updated"],
           },
-          selector_id: "rozyy",
+          selector_id: "epoch_rozyy",
         },
         db_data_type: {
           type: "epoch_literal",
@@ -632,7 +366,7 @@
         },
         is_db_column: true,
         default_value: null,
-        display_order: 4,
+        display_order: 3,
         postgres_type: "bigint",
         header_content: {
           type_id: "base_text",
@@ -646,76 +380,25 @@
         is_autogenerated: true,
         is_force_uniqueness: false,
       },
-      location: {
-        is_fixed: false,
-        is_shown: true,
-        alignment: "left",
-        max_width: 25,
-        min_width: 3,
-        description: null,
-        is_nullable: true,
-        body_content: {
-          type_id: "location",
-          children: [],
-          attributes: {
-            is_popover: true,
-            val_from_variable_path: ["variables", "rows", ["loops", 0], "location"],
-          },
-          selector_id: "meqwu",
-        },
-        db_data_type: {
-          type: "location_literal",
-          attributes: {},
-        },
-        is_db_column: true,
-        default_value: null,
-        display_order: 1,
-        postgres_type: "text",
-        header_content: {
-          type_id: "base_text",
-          children: [],
-          attributes: {
-            color: null,
-            content: "Label",
-            content_from_variable_path: null,
-          },
-          selector_id: "fbhid",
-        },
-        is_primary_key: false,
-        is_autogenerated: false,
-        is_force_uniqueness: false,
-      },
     },
-    account_id: "idredbvbbogpofinurea",
-    total_rows: 8,
-    description: "hiiiiii",
+    account_id: "kmjexchofxophkkuqfvp",
+    total_rows: 0,
+    description: "need to make sure new loop stuff works",
     default_sort: null,
-    // row_input_content: null,
-    row_input_content: test_row_input_content,
+    row_input_content: null,
     row_searchable_content: null,
   })
 
-  let table_config_manager = $state(null)
-  let table_manager = $state(null)
+  let row_data_type = {
+    type: "object_literal",
+    attributes: {},
+    properties: Object.fromEntries(Object.entries(data?.columns || {}).map(([key, val]) => [key, val?.db_data_type])),
+  }
 
-  const table_attributes_initial = $state({
-    columns: null,
-    rows_data: null,
-    rows_data_from_variable_path: null,
-    is_data_editable: true,
-    is_paginate: true,
-    is_show_pagination: true,
-    is_show_load_more_button: true,
-    is_show_table_search: true,
-    is_show_rows_per_page_input: true,
-    sort_by: null,
-    filter: null,
-    row_searchable_content: null,
-    row_input_content: null,
-  })
+  console.log("row_data_type", row_data_type)
 
+  let table_manager = $state(null)
   let variables = $state({ rows: data?.rows })
-  let variables_data_type = $state(null)
 
   table_manager = create_table_advanced_manager({
     table_id: "abcdefg",
@@ -723,9 +406,10 @@
     table_description: "This has data about uh...stuff...idk",
     mapkit_js_token: PUBLIC_APPLE_MAPKIT_JS_API_KEY,
     table_options: [{ key: "test", name: "Test" }],
-    variables: () => variables,
-    variables_data_type: () => variables_data_type,
-    rows_data_from_variable_path: ["variables", "rows"],
+    definition_stack: [{ ...variables }],
+    rows_data_from_variable_path: ["rows"],
+    row_data_type: row_data_type,
+    row_iter_identifier: "row_i",
     table_header_max_height: 8,
     table_row_max_height: 8,
     columns: data?.columns,
@@ -748,11 +432,11 @@
     ],
     is_more_to_load: true,
     on_event: async (input) => {
-      console.log("showcase on_event tbd", deep_copy(input))
+      console.log("table_on_event", { input: deep_copy(input), variables })
       if (input?.type == "update_row") {
         const path_to_set = input?.path
-        let complete_variables_loc = deep_copy({ variables: variables, loops: null })
-        let target = complete_variables_loc
+        let variables_loc = deep_copy(variables)
+        let target = variables_loc
         for (let i = 0; i < path_to_set.length - 1; i++) {
           if (target[path_to_set[i]] === undefined || target[path_to_set[i]] === null) {
             target[path_to_set[i]] = {}
@@ -761,15 +445,16 @@
         }
         const last_key = path_to_set[path_to_set.length - 1]
         target[last_key] = input?.row
-        variables = complete_variables_loc?.variables
+        variables = variables_loc
+        table_manager.reset_definition_stack([{ ...variables }])
         return {
           is_success: true,
           row: target?.[last_key],
         }
       } else if (input?.type == "insert_row") {
         const path_to_set = input?.path
-        let complete_variables_loc = deep_copy({ variables: variables, loops: null })
-        let target = complete_variables_loc
+        let variables_loc = deep_copy(variables)
+        let target = variables_loc
         for (let i = 0; i < path_to_set.length - 1; i++) {
           if (target[path_to_set[i]] === undefined) {
             target[path_to_set[i]] = {}
@@ -781,7 +466,8 @@
           throw new Error("Target is not an array")
         }
         target.splice(last_key, 0, input?.row)
-        variables = complete_variables_loc?.variables
+        variables = variables_loc
+        table_manager.reset_definition_stack([{ ...variables }])
         return {
           is_success: true,
           row: target?.[last_key],
@@ -789,8 +475,8 @@
       } else if (input?.type == "bulk_insert_rows") {
         console.log("bulk_insert_rows")
         const path_to_set = input?.path
-        let complete_variables_loc = deep_copy({ variables: variables, loops: null })
-        let target = complete_variables_loc
+        let variables_loc = deep_copy(variables)
+        let target = variables_loc
         for (let i = 0; i < path_to_set.length - 1; i++) {
           if (target[path_to_set[i]] === undefined) {
             target[path_to_set[i]] = {}
@@ -802,7 +488,8 @@
           throw new Error("Target is not an array")
         }
         target.splice(last_key, 0, input?.value)
-        variables = complete_variables_loc?.variables
+        variables = variables_loc
+        table_manager.reset_definition_stack([{ ...variables }])
         return {
           is_success: true,
           rows: target?.[last_key],
@@ -810,8 +497,8 @@
       } else if (input?.type == "delete_row") {
         console.log("delete_row", deep_copy(input))
         const path_to_delete = input?.path
-        let complete_variables_loc = deep_copy({ variables: variables, loops: null })
-        let target = complete_variables_loc
+        let variables_loc = deep_copy(variables)
+        let target = variables_loc
         for (let i = 0; i < path_to_delete.length - 1; i++) {
           if (target[path_to_delete[i]] === undefined) {
             target[path_to_delete[i]] = {}
@@ -822,8 +509,9 @@
         if (Array.isArray(target)) {
           target.splice(last_key, 1)
         }
-        variables = complete_variables_loc?.variables
+        variables = variables_loc
         console.log("variables", deep_copy(variables))
+        table_manager.reset_definition_stack([{ ...variables }])
         return {
           is_success: true,
         }
@@ -835,6 +523,7 @@
         }
       } else if (input?.type == "insert_column") {
         console.log("insert_column", deep_copy(input))
+        table_manager.set_columns(data?.columns)
         return {
           is_success: true,
           column: input?.column,
@@ -884,5 +573,6 @@
 </script>
 
 <div>
+  <pre>{JSON.stringify(variables, null, 2)}</pre>
   <TableAdvanced manager={table_manager} />
 </div>