sveltekit-ui 1.0.10 → 1.0.12

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

@@ -2,108 +2,62 @@
   import Popover from "$lib/Components/Popover/index.svelte"
   import Button from "$lib/Components/Button/index.svelte"
   import TextInput from "$lib/Components/TextInput/index.svelte"
-  import Checkbox from "$lib/Components/Checkbox/index.svelte"
-  import Icon from "$lib/Components/Icon/index.svelte"
+  import Dropdown from "$lib/Components/Dropdown/index.svelte"
   import Spacer from "$lib/Components/Spacer/index.svelte"
-  import Self from './index.svelte'
+  import Self from "./index.svelte"
 
   let { manager } = $props()
 </script>
 
-{#snippet val_display()}
-  {#if Array.isArray(manager?.val)}
+<Button manager={manager?.open_edit_button_manager} />
+<Popover manager={manager?.popover_manager}>
+  {#snippet content()}
     <div>
-      <div style="display: flex; flex-wrap: wrap; gap: .5rem;">
-        [
-        {#if manager?.val.length < 1}
-          /
-        {:else}
-          {#each manager?.val as path_item, i}
-            {#if Array.isArray(path_item)}
-              [{path_item}]
-            {:else}
-              {path_item}
-            {/if}
-            {#if i < manager?.val.length - 1}
-              <div style="display: flex; align-items: center;">
-                <Icon manager={manager?.arrow_icon_manager} />
+      {#if manager?.levels_nested}
+        <p>{manager?.levels_nested} levels nested</p>
+      {/if}
+      <p>{manager?.val_text}</p>
+      <Dropdown manager={manager?.def_dropdown_manager} />
+      {#if manager?.def_dropdown_manager?.val}
+        <Button manager={manager?.add_path_item_button_manager} />
+        <p class="label">Path Items (optional)</p>
+        {#if Array.isArray(manager?.path_prepped) && manager?.path_prepped.length > 0}
+          {#each manager?.path_prepped as path_item}
+            <div>
+              <div style="display: flex; gap: 1rem">
+                <Button manager={path_item?.remove_path_item_button_manager} />
+                <Button manager={path_item?.insert_path_item_before_button_manager} />
+                <Dropdown manager={path_item?.type_dropdown_manager} />
               </div>
-            {/if}
+              {#if path_item?.type_dropdown_manager?.val == "variable"}
+                <div style="margin-top: 1rem;">
+                  <Self manager={path_item?.variable_path_input_manager} />
+                </div>
+              {:else if path_item?.type_dropdown_manager?.val == "string"}
+                <TextInput manager={path_item?.const_string_value_text_input_manager} />
+              {:else if path_item?.type_dropdown_manager?.val == "number"}
+                <TextInput manager={path_item?.const_number_value_text_input_manager} />
+              {/if}
+              {#if Array.isArray(path_item?.key_options)}
+                <div style="margin-top: 1rem;">
+                  <p class="label">Next Path Options</p>
+                  <div style="display: flex; flex-wrap: wrap; gap: .5rem;">
+                    {#each path_item?.key_options as key_option}
+                      <Button manager={key_option?.select_button_manager} />
+                    {/each}
+                  </div>
+                </div>
+              {/if}
+            </div>
+            <Spacer mt={1} mb={1} />
           {/each}
-        {/if}
-        ]
-      </div>
-    </div>
-  {:else}
-    <p style="color: var(--warning-t);">null</p>
-  {/if}
-{/snippet}
-
-{#snippet variable_path_input()}
-  <div>
-    <h4 class="label" style="margin: 0;">Data Type at Path</h4>
-    <p>{manager?.data_type_at_path?.type}</p>
-    {#if Array.isArray(manager?.val_prepped)}
-      <h4 class="label" style="margin: 0;">Val</h4>
-      {@render val_display()}
-      <Spacer mt={.5} mb={.5} />
-      <div style="display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem;">
-        {#if manager?.val != null}
-          <Button manager={manager?.set_null_button_manager} />
         {:else}
-          <Button manager={manager?.set_root_path_button_manager} />
+          <p>No Path Items</p>
         {/if}
-        {#each manager?.val_prepped as path_item_prepped}
-          <Button manager={path_item_prepped?.remove_path_button_manager} />
-        {/each}
-      </div>
-    {/if}
-    <Spacer mt={.5} mb={.5} />
-    <h4 class="label" style="margin: 0;">Next Path Item Options</h4>
-    {#if manager?.is_allow_dynamic_path_item}
-      <Checkbox manager={manager?.is_dynamic_path_item_checkbox_manager} />
-      {#if manager?.is_dynamic_path_item_checkbox_manager?.val && manager?.next_path_variable_path_input_manager}
-        <Self manager={manager?.next_path_variable_path_input_manager} />
       {/if}
-    {/if}
-    {#if !manager?.is_allow_dynamic_path_item || !manager?.is_dynamic_path_item_checkbox_manager?.val}
-      {#if manager?.next_path_options?.type == "loop"}
-        <TextInput manager={manager?.next_path_options?.number_input_manager} />
-        <Button manager={manager?.next_path_options?.add_path_item_button_manager} />
-      {:else if manager?.next_path_options?.type == "object_literal"}
-        {#if Array.isArray(manager?.next_path_options?.options) && manager?.next_path_options.options?.length > 0}
-          <div style="display: flex; flex-wrap: wrap; gap: .5rem;">
-            {#each manager?.next_path_options?.options as option}
-              <Button manager={option?.option_button_manager} />
-            {/each}
-          </div>
-        {:else}
-          <p>No options found</p>
-        {/if}
-      {:else}
-        <p>No additional path item options found</p>
-      {/if}
-    {/if}
-  </div>
-{/snippet}
-
-{#if !manager?.is_popover}
-  {@render variable_path_input()}
-{:else}
-  {#if Array.isArray(manager?.val)}
-    <div style="display: flex; gap: .5rem;">
-      {@render val_display()}
-      <Button manager={manager?.small_popover_toggle_button_manager} />
     </div>
-  {:else}
-    <Button manager={manager?.popover_toggle_button_manager} />
-  {/if}
-  <Popover manager={manager.popover_manager}>
-    {#snippet content()}
-      {@render variable_path_input()}
-    {/snippet}
-    {#snippet footer()}
-      <Button manager={manager?.finish_button_manager} />
-    {/snippet}
-  </Popover>
-{/if}
+  {/snippet}
+  {#snippet footer()}
+    <Button manager={manager?.finish_button_manager} />
+  {/snippet}
+</Popover>

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

@@ -1,199 +1,232 @@
 import { create_popover_manager } from "$lib/Components/Popover/index.svelte.js"
 import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
 import { create_text_input_manager } from "$lib/Components/TextInput/index.svelte.js"
-import { create_icon_manager } from "$lib/Components/Icon/index.svelte.js"
-import { create_checkbox_manager } from "$lib/Components/Checkbox/index.svelte.js"
-import { deep_copy, set_closurable, get_data_type_at_path } from "$lib/client/index.js"
+import { create_dropdown_manager } from "$lib/Components/Dropdown/index.svelte.js"
+import { set_closurable, get_data_type_at_path } from "$lib/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,
   }
 }