sveltekit-ui 1.0.0

package/dist/Components/FunctionInput/Node/helpers/Field/index.svelte.js

@@ -0,0 +1,208 @@
+import { create_inline_dropdown_manager } from "../InlineDropArea/index.svelte.js"
+import { create_button_manager } from "../../../../Button/index.svelte.js"
+import { create_checkbox_manager } from "../../../../Checkbox/index.svelte.js"
+import { create_color_input_manager } from "../../../../ColorInput/index.svelte.js"
+import { create_time_input_manager } from "../../../../TimeInput/index.svelte.js"
+import { create_cron_input_manager } from "../../../../CronInput/index.svelte.js"
+import { create_icon_input_manager } from "../../../../IconInput/index.svelte.js"
+import { create_text_input_manager } from "../../../../TextInput/index.svelte.js"
+import { create_location_input_manager } from "../../../../LocationInput/index.svelte.js"
+import { create_dropdown_manager } from "../../../../Dropdown/index.svelte.js"
+import { node_types, set_closurable, deep_copy } from "../../../../../client/index.js"
+// import { create_node_manager } from "../../index.svelte"
+
+export function create_field_manager(config) {
+  // let bar_item = $derived(set_closurable(config?.bar_item, null))
+  let bar_item = $state(null)
+
+  let field_id = $derived(config?.node_path?.[Array.isArray(config?.node_path) ? config?.node_path.length - 1 : -1])
+  let field = $derived(bar_item?.ui_type != "field" ? null : node_types?.[config?.parent_node_type]?.fields?.[field_id])
+  let input_type = $derived(
+    field ? field?.forced_node ?? config?.node_type : bar_item?.ui_type == "input" ? bar_item?.value : null
+  )
+  let manager = $state(null)
+
+  function get_manager() {
+    const ui_type = bar_item?.ui_type
+    console.log("bar", { config: config, bar_item: bar_item, field, input_type })
+    if (ui_type == "text") {
+      // tbd
+    } else if (ui_type == "br") {
+      // tbd
+    } else if (ui_type == "field" && !field?.forced_node) {
+      if (config?.node_type) {
+        // create_node_manager {node_path} {node_type} {node_value} {is_preview} {is_clickable_only}
+      } else {
+        return create_inline_dropdown_manager({
+          parent_node_type: config?.parent_node_type,
+          node_path: config?.node_path,
+          node_type: config?.node_type,
+          node_value: config?.node_value,
+          is_preview: !!config?.is_preview,
+        })
+      }
+    } else if (ui_type == "input" || input_type) {
+      //   // tbd
+      console.log("input_type", input_type)
+      if (input_type == "arrow_toggle_literal") {
+        return create_button_manager({
+          type: "soft",
+          support_icon: "arrow",
+          border_radius: 0.5,
+          icon_deg: () => (config?.node_value ? 180 : 0),
+          is_uniform: true,
+          min_height: 2.6,
+          icon_size: 1.2,
+          icon_sw: 50,
+          h: 14,
+          c: 1,
+          l: 6,
+          icon_movement_damping: 1,
+          on_click: () => config?.on_set_node_value(config?.node_path, !config?.node_value),
+        })
+      } else if (input_type == "checkbox") {
+        return create_checkbox_manager({
+          type: "toggle",
+          val: config?.node_value,
+          color: "var(--g4-t)",
+          on_change: (input) => set_node_value(config?.node_path, input),
+        })
+      } else if (input_type == "color_input") {
+        return create_color_input_manager({
+          val: config?.node_value,
+          on_finish: (input) => set_node_value(config?.node_path, input),
+        })
+      } else if (input_type == "time_input") {
+        return create_time_input_manager({
+          is_popover: true,
+          val: config?.node_value,
+          on_finish: (input) => set_node_value(config?.node_path, input),
+        })
+      } else if (input_type == "cron_input") {
+        return create_cron_input_manager({
+          is_popover: true,
+          val: config?.node_value,
+          on_finish: (input) => set_node_value(config?.node_path, input),
+        })
+      } else if (input_type == "icon_input") {
+        return create_icon_input_manager({
+          is_popover: true,
+          val: config?.node_value,
+          on_finish: (input) => set_node_value(config?.node_path, input),
+        })
+      } else if (input_type == "text_input") {
+        return create_text_input_manager({
+          val: config?.node_value,
+          on_finish: (input) => set_node_value(config?.node_path, input),
+        })
+      } else if (input_type == "number_input") {
+        return create_text_input_manager({
+          type: "number",
+          val: config?.node_value,
+          on_finish: (input) => set_node_value(config?.node_path, input),
+        })
+      } else if (input_type == "email_address_input") {
+        return create_text_input_manager({
+          type: "email",
+          val: config?.node_value,
+          on_finish: (input) => set_node_value(config?.node_path, input),
+        })
+      } else if (input_type == "location_input") {
+        return create_location_input_manager({
+          val: config?.node_value,
+          on_finish: (input) => set_node_value(config?.node_path, input),
+        })
+      }
+    }
+    // tbd
+  }
+
+  let full_node_type = $state(node_types?.[config?.node_type])
+  let h = $derived(config?.node_categories?.[config?.node_types?.[config?.node_type]?.category]?.h || 4)
+  let c = 12
+
+  let edit_text_literal = null
+  let is_edit_text_literal = false
+  function save_text_literal() {
+    if (input_type == "identifier_literal") {
+      let cleaned_input = edit_text_literal.toLowerCase()
+      cleaned_input = cleaned_input.replace(/[^a-z0-9]/g, "_")
+      cleaned_input = cleaned_input.replace(/_{2,}/g, "_")
+      cleaned_input = cleaned_input.replace(/^_+|_+$/g, "")
+      set_node_value(node_path, cleaned_input)
+      is_edit_text_literal = false
+      edit_text_literal = null
+    }
+  }
+
+  function pre_edit_text() {
+    edit_text_literal = JSON.parse(JSON.stringify(node_value))
+    is_edit_text_literal = true
+  }
+
+  let text_literal_type = $derived(
+    ["int_literal", "float_literal", "bigint_literal"].includes(input_type)
+      ? "number"
+      : input_type == "email_address_literal"
+      ? "email"
+      : input_type == "identifier_literal"
+      ? "text"
+      : "text"
+  )
+  let text_placeholder = $derived(
+    ["int_literal", "float_literal", "bigint_literal"].includes(input_type)
+      ? "number"
+      : input_type == "email_address_literal"
+      ? "email"
+      : input_type == "identifier_literal"
+      ? "identifier"
+      : "text"
+  )
+
+  function init(config) {
+    console.log("jj", config?.bar_item, typeof config?.bar_item)
+    bar_item = config?.bar_item ? deep_copy(config?.bar_item) : null
+    manager = get_manager()
+  }
+
+  init(config)
+
+  return {
+    get bar_item() {
+      return bar_item
+    },
+    get node_field() {
+      return config?.node_field
+    },
+    get parent_node_type() {
+      return config?.parent_node_type
+    },
+    get node_path() {
+      return config?.node_path
+    },
+    get node_type() {
+      return config?.node_type
+    },
+    get node_value() {
+      return config?.node_value
+    },
+    get is_preview() {
+      return config?.is_preview
+    },
+    get is_clickable_only() {
+      return config?.is_clickable_only
+    },
+    get field() {
+      return field
+    },
+    get field_id() {
+      return field_id
+    },
+    get input_type() {
+      return input_type
+    },
+    get manager() {
+      return manager
+    },
+  }
+}

package/dist/Components/FunctionInput/Node/helpers/InlineDropArea/index.svelte

@@ -0,0 +1,97 @@
+<script>
+  import Popover from "../../../../Popover/index.svelte"
+  import Button from "../../../../Button/index.svelte"
+  import Node from "../../index.svelte"
+
+  let { manager } = $props()
+
+</script>
+
+<div>
+  {#if manager?.node_value}
+    node_tbd
+    <!-- <Node {node_path} {node_type} {node_value} {is_preview} /> -->
+  {:else}
+    <div
+      class="droparea"
+      class:draggedover={!manager?.is_preview || (manager?.is_drag_enter && manager?.hovered_node_drop_zone == "empty")}
+      role="button"
+      tabindex="0"
+      aria-label="Drop area"
+      draggable={!manager?.is_preview}
+      ondragstart={(e) => manager?.prevent_drag(e)}
+      ondragenter={() => manager?.handle_drag_enter("empty")}
+      ondragleave={() => manager?.handle_drag_leave()}
+      ondragover={(e) => e.preventDefault()}
+      ondrop={() => manager?.handle_drop()}
+    >
+      <p style="white-space: nowrap; font-size: 1.6rem;">Drop or</p>
+      <Button manager={manager?.open_choose_node_popover_button_manager} />
+      <Popover manager={manager?.choose_node_popover_manager}>
+        {#snippet content()}
+          popover_content_tbd
+          <!-- <div style="cursor: default;">
+            {#if Array.isArray(node_types?.[parent_node_type]?.fields?.[node_path?.[Array.isArray(node_path) ? node_path.length - 1 : -1]]?.node_options) && node_types?.[parent_node_type]?.fields?.[node_path?.[Array.isArray(node_path) ? node_path.length - 1 : -1]]?.node_options.length > 0}
+              <div class="node_types">
+                {#each node_types?.[parent_node_type]?.fields?.[node_path?.[Array.isArray(node_path) ? node_path.length - 1 : -1]]?.node_options as node_type}
+                  <div
+                    class="node_container"
+                    role="button"
+                    tabindex="0"
+                    onclick={() => handle_node_click(node_type)}
+                    onkeypress={() => handle_node_click(node_type)}
+                  >
+                    <Node {node_type} is_preview={true} is_clickable_only={true} />
+                  </div>
+                {/each}
+              </div>
+            {:else}
+              <p>No node options found</p>
+            {/if}
+          </div> -->
+        {/snippet}
+      </Popover>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .droparea {
+    display: flex;
+    align-items: center;
+    padding: 0.2rem 1rem;
+    gap: 0.5rem;
+    border: 1px dashed var(--g6-t);
+    background-color: var(--shadow5-t);
+    min-width: 5rem;
+    min-height: 3.4rem;
+    border-radius: 0.5rem;
+  }
+  .draggedover {
+    border: 1px dashed var(--g3-t);
+    background-color: var(--shadow8-t);
+  }
+  .node_types {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+  }
+  .node_container {
+    position: relative;
+    padding: 1rem;
+  }
+  .node_container::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: -1px;
+    left: 0;
+    z-index: 1;
+    border-radius: 1rem;
+  }
+  .node_container:hover::after {
+    border: 1px solid var(--shadow5-t);
+    background-color: var(--shadow3-t);
+  }
+</style>

package/dist/Components/FunctionInput/Node/helpers/InlineDropArea/index.svelte.js

@@ -0,0 +1,105 @@
+import { create_popover_manager } from "../../../../Popover/index.svelte.js"
+import { create_button_manager } from "../../../../Button/index.svelte.js"
+
+export function create_inline_dropdown_manager(config) {
+  let is_drag_enter = $state(false)
+  let drag_counter = $state(0)
+  let hovered_node_drop_zone = $state(false)
+  let choose_node_popover_manager = $state(null)
+  let open_choose_node_popover_button_manager = $state(null)
+
+  function handle_drag_enter(zone_id) {
+    drag_counter++
+    is_drag_enter = drag_counter > 0
+    hovered_node_drop_zone = zone_id
+  }
+
+  function handle_drag_leave() {
+    drag_counter--
+    if (drag_counter === 0) {
+      is_drag_enter = false
+    }
+    hovered_node_drop_zone = null
+  }
+
+  function handle_drop() {
+    hovered_node_drop_zone = null
+    if (config?.on_drag_or_select_node) {
+      config?.on_drag_or_select_node(config?.node_path, config?.parent_node_type)
+    }
+  }
+
+  function handle_node_click(clicked_node_type) {
+    choose_node_popover_manager?.close()
+    if (config?.on_drag_or_select_node) {
+      config?.on_drag_or_select_node(config?.node_path, config?.parent_node_type, true, clicked_node_type)
+    }
+  }
+
+  function prevent_drag(e) {
+    e.stopPropagation()
+    e.preventDefault()
+  }
+
+  function init(config) {
+    // choose_node_popover_manager = create_popover_manager({
+    //   header: "Choose Node",
+    //   min_width: 280,
+    //   target_width: 600,
+    //   min_height: 250,
+    //   target_height: 600,
+    //   type: "center",
+    //   anchor_id: () => `button_${open_choose_node_popover_button_manager?.id}`,
+    // })
+    // open_choose_node_popover_button_manager = create_button_manager({
+    //   text: "Choose",
+    //   min_height: 2.4,
+    //   pl: 0.8,
+    //   pr: 0.8,
+    //   is_disabled: () => !!config?.is_preview,
+    //   font_size: 1.2,
+    //   border_radius: 0.5,
+    //   popover_target: () => `popover_${choose_node_popover_manager?.id}`,
+    // })
+  }
+
+  init(config)
+
+  return {
+    get parent_node_type() {
+      return config?.parent_node_type
+    },
+    get node_path() {
+      return config?.node_path
+    },
+    get node_type() {
+      return config?.node_type
+    },
+    get node_value() {
+      return config?.node_value
+    },
+    get is_preview() {
+      return config?.is_preview
+    },
+    get is_drag_enter() {
+      return is_drag_enter
+    },
+    get drag_counter() {
+      return drag_counter
+    },
+    get hovered_node_drop_zone() {
+      return hovered_node_drop_zone
+    },
+    get choose_node_popover_manager() {
+      return choose_node_popover_manager
+    },
+    get open_choose_node_popover_button_manager() {
+      return open_choose_node_popover_button_manager
+    },
+    handle_drag_enter,
+    handle_drag_leave,
+    handle_drop,
+    handle_node_click,
+    prevent_drag,
+  }
+}

package/dist/Components/FunctionInput/Node/helpers/ObjectInput/index.svelte

@@ -0,0 +1,198 @@
+<!-- <script>
+  import Button from "../../../../Button/index.svelte"
+  import TextInput from "../../../../TextInput/index.svelte"
+  import Dropdown from "../../../../Dropdown/index.svelte"
+  import Frame from "../../helpers/Frame/index.svelte"
+  import InlineDropArea from "../../helpers/InlineDropArea/index.svelte"
+  import { function_builder_manager } from "../../../index.svelte.js"
+
+  export let node_path = null
+  export let node_type = null
+  export let is_preview = false
+  export let is_clickable_only = false
+
+  let { set_node_value, selected_version } = function_builder_manager
+
+  let options = []
+  let variable_options = []
+  function dropdown_opened() {
+    const get_defined_at_path_res = get_defined_at_path(
+      $selected_version,
+      "main_actor_000000000",
+      [],
+      node_path,
+      input_path
+    )
+    console.log("node_vars", get_defined_at_path_res)
+    let variable_options_loc = []
+    let options_loc = []
+    if (Object.keys(get_defined_at_path_res?.defined || {}).length > 0) {
+      for (let [defined_node_path, defined_item] of Object.entries(get_defined_at_path_res?.defined || {})) {
+        if (defined_item?.node_type == "define_variable") {
+          variable_options_loc.push({
+            key: defined_node_path,
+            name: $selected_version?.[defined_node_path]?.input?.name ?? "Name not found",
+          })
+        } else if (defined_item?.node_type == "define_actor" && defined_node_path != "main_actor_000000000") {
+          options_loc.push({
+            key: defined_node_path,
+            name: $selected_version?.[defined_node_path]?.input?.name ?? "Name not found",
+          })
+        }
+      }
+    }
+    options = options_loc
+    variable_options = variable_options_loc
+  }
+
+  function add_item() {
+    let new_input = [
+      {
+        key: null,
+        value: null,
+      },
+    ]
+    if (Array.isArray($selected_version[node_path].input)) {
+      new_input = [
+        ...$selected_version[node_path].input,
+        {
+          key: null,
+          value: null,
+        },
+      ]
+    }
+    set_node_value(node_path, new_input, false)
+  }
+
+  function delete_item(i) {
+    if (Array.isArray($selected_version[node_path].input)) {
+      const new_input = $selected_version[node_path].input.filter((_, index) => index !== i)
+      set_node_value(node_path, new_input, false)
+    }
+  }
+
+  let edit_key_i = -1
+  let key_name = null
+
+  function edit_key(i) {
+    key_name = $selected_version?.[node_path]?.input?.[i]?.key
+    edit_key_i = i
+  }
+
+  function save_key_name(i) {
+    set_node_value([...node_path, i, "key"], key_name, false)
+    key_name = null
+    edit_key_i = -1
+  }
+</script>
+
+@ -1,197 +0,0 @@
+<Frame {node_path} {node_type} {is_preview} {is_clickable_only}>
+  <div slot="main" style="display: flex; gap: .5rem;">
+    <div class="object_container">
+      {#if Array.isArray($selected_version?.[node_path]?.input) && $selected_version?.[node_path]?.input.length > 0}
+        {#each $selected_version?.[node_path]?.input as key_val, i}
+          <div class="object_item">
+            <div style="display: flex; gap: .5rem;">
+              <div>
+                <div class="object_key">
+                  <Button
+                    type="outlined"
+                    support_icon="x"
+                    h={12}
+                    l={6}
+                    c={2}
+                    icon_sw={40}
+                    icon_size={1.4}
+                    pt={0}
+                    pl={0}
+                    pr={0}
+                    pb={0}
+                    is_uniform={true}
+                    min_height={2}
+                    border_radius={0.5}
+                    is_disabled={is_preview}
+                    onclick={() => delete_item(i)}
+                  />
+                  {#if $selected_version?.[node_path]?.input[i]?.key && edit_key_i != i}
+                    <p>
+                      {$selected_version?.[node_path]?.input[i]?.key}
+                    </p>
+                    <Button
+                      type="plain"
+                      support_icon="edit"
+                      h={12}
+                      l={6}
+                      c={2}
+                      icon_sw={40}
+                      icon_size={1.6}
+                      font_size={1.2}
+                      is_uniform={true}
+                      min_height={2}
+                      border_radius={0.5}
+                      is_disabled={is_preview}
+                      onclick={() => edit_key(i)}
+                    />
+                  {:else}
+                    <div>
+                      <TextInput
+                        type="text"
+                        placeholder="some_key_name"
+                        is_disabled={is_preview}
+                        bind:val={key_name}
+                        is_bind_val={true}
+                      />
+                    </div>
+                    <Button
+                      is_disabled={is_preview}
+                      support_icon="save"
+                      onclick={() => save_key_name(i)}
+                      is_uniform={true}
+                    />
+                    {#if $selected_version?.[node_path]?.input[i]?.key}
+                      <Button
+                        type="outlined"
+                        h={1}
+                        l={5}
+                        c={1}
+                        support_icon="x"
+                        is_uniform={true}
+                        is_disabled={is_preview}
+                        onclick={() => (edit_key_i = -1)}
+                      />
+                    {/if}
+                  {/if}
+                </div>
+              </div>
+            </div>
+            :
+            <InlineDropArea {node_path} {node_type} input_path={[i, "value"]} {is_preview} />
+          </div>
+        {/each}
+      {:else}
+        <p>No key-value pairs</p>
+      {/if}
+      <Button text="Add Item" support_icon="plus" onclick={() => add_item()} />
+    </div>
+  </div>
+</Frame>
+
+<style>
+  .object_container {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    gap: 1rem;
+  }
+  .object_item {
+    display: flex;
+    gap: 0.5rem;
+  }
+  .object_key {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 1.4rem;
+    min-width: 15rem;
+  }
+</style> -->