sveltekit-ui 1.0.7 → 1.0.9

package/src/lib/Components/FunctionInput/Node/helpers/ObjectInput/index.svelte

@@ -1,198 +0,0 @@
-<!-- <script>
-  import Button from "$lib/Components/Button/index.svelte"
-  import TextInput from "$lib/Components/TextInput/index.svelte"
-  import Dropdown from "$lib/Components/Dropdown/index.svelte"
-  import Frame from "../../helpers/Frame/index.svelte"
-  import InlineDropArea from "../../helpers/InlineDropArea/index.svelte"
-  import { function_builder_manager } from "$lib/Components/FunctionInput/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> -->

package/src/lib/Components/FunctionInput/Node/helpers/StackArea/index.svelte

@@ -1,169 +0,0 @@
-<script>
-  import Button from "$lib/Components/Button/index.svelte"
-  import Popover from "$lib/Components/Popover/index.svelte"
-  import Node from "../../index.svelte"
-
-  let { manager } = $props()
-</script>
-
-<div>
-  <!-- <pre>{JSON.stringify(manager?.node_value_prepped,null,2)}</pre> -->
-  {#if Array.isArray(manager?.node_value) && manager?.node_value.length > 0}
-    {#each manager?.node_value_prepped as stack_item, i}
-      {#if i == 0}
-        <div class="inline_drop_container">
-          <div
-            class="dropzone"
-            class:inline_draggedover={manager?.is_preview && manager?.is_drag_enter && manager?.hovered_node_drop_zone == i}
-            role="button"
-            tabindex="0"
-            aria-label="Drop area"
-            draggable={manager?.is_preview}
-            ondragstart={(e) => manager?.prevent_drag(e)}
-            ondragenter={() => manager?.handle_drag_enter(i)}
-            ondragleave={() => manager?.handle_drag_leave()}
-            ondragover={(e) => e.preventDefault()}
-            ondrop={(e) => manager?.handle_drop([...manager?.node_path, i], true, e)}
-          >
-            {#if manager?.is_drag_enter && manager?.hovered_node_drop_zone == i}
-              Drop Area
-            {/if}
-          </div>
-        </div>
-      {/if}
-      {#if manager?.node_types?.hasOwnProperty(stack_item?.type)}
-        <Node manager={stack_item?.node_manager} />
-        <!-- <Node node_path={[...node_path, i]} node_value={stack_item?.value} node_type={stack_item?.type} {is_preview} /> -->
-      {:else}
-        <pre>{JSON.stringify(stack_item, null, 2)}</pre>
-      {/if}
-      <div class="inline_drop_container">
-        <div
-          class="dropzone"
-          class:inline_draggedover={manager?.is_preview && manager?.is_drag_enter && manager?.hovered_node_drop_zone == i + 1}
-          role="button"
-          tabindex="0"
-          aria-label="Drop area"
-          draggable={manager?.is_preview}
-          ondragstart={(e) => manager?.prevent_drag(e)}
-          ondragenter={() => manager?.handle_drag_enter(i + 1)}
-          ondragleave={() => manager?.handle_drag_leave()}
-          ondragover={(e) => e.preventDefault()}
-          ondrop={(e) => manager?.handle_drop([...manager?.node_path, i + 1], true,e)}
-        >
-          {#if manager?.is_drag_enter && manager?.hovered_node_drop_zone == i + 1}
-            Drop Area
-          {/if}
-        </div>
-      </div>
-    {/each}
-  {: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={(e) => manager?.handle_drop([...manager?.node_path, 0], true, e)}
-    >
-      <p>Drop Component or</p>
-      <Button manager={manager?.choose_node_popover_toggle_button_manager} />
-      <Popover manager={manager?.choose_node_popover_manager}>
-        {#snippet content()}
-          <div style="cursor: default;">
-            {#if typeof manager?.node_types == "object"}
-              <div class="node_types">
-                {#if Array.isArray(manager?.node_types?.[manager?.node_type]?.child_node_options) && manager?.node_types?.[manager?.node_type]?.child_node_options.length > 0}
-                  {#each manager?.node_types?.[manager?.node_type]?.child_node_options as node_type}
-                    <div
-                      class="node_container"
-                      role="button"
-                      tabindex="0"
-                      onclick={() => manager?.handle_node_click(manager?.node_type, [...manager?.node_path, 0], true)}
-                      onkeypress={() => handle_node_click(manager?.node_type, [...manager?.node_path, 0], true)}
-                    >
-                      node_tbd2
-                      <!-- <Node {node_type} is_preview={true} is_clickable_only={true} /> -->
-                    </div>
-                  {/each}
-                {:else}
-                  <p>No node options found</p>
-                {/if}
-              </div>
-            {/if}
-          </div>
-        {/snippet}
-      </Popover>
-    </div>
-  {/if}
-</div>
-
-<style>
-  .droparea {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    padding: 1rem;
-    border: 1px dashed var(--g6-t);
-    background-color: var(--shadow5-t);
-    width: 30rem;
-    border-radius: 0.5rem;
-    margin-bottom: -1px;
-  }
-  .draggedover {
-    border: 1px dashed var(--g3-t);
-    background-color: var(--shadow8-t);
-  }
-  .inline_drop_container {
-    position: relative;
-  }
-  .dropzone {
-    position: absolute;
-    top: 0;
-    left: 0;
-    min-width: 30rem;
-    width: 100%;
-    min-height: 20px;
-    transform: translateY(-50%);
-    z-index: 1;
-    font-size: 1.2rem;
-    line-height: 1.4rem;
-    padding-left: 0.5rem;
-    display: flex;
-    align-items: center;
-    color: oklch(var(--l9) var(--c20) var(--h9));
-    border-radius: 0.5rem;
-  }
-  .inline_draggedover {
-    background-color: oklch(var(--l18) var(--c20) var(--h9) / var(--o15));
-    border: 1px dotted oklch(var(--l18) var(--c20) var(--h9));
-  }
-  .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: 3;
-    border-radius: 1rem;
-  }
-  .node_container:hover::after {
-    border: 1px solid var(--shadow5-t);
-    background-color: var(--shadow3-t);
-  }
-</style>

package/src/lib/Components/FunctionInput/Node/helpers/StackArea/index.svelte.js

@@ -1,152 +0,0 @@
-import { create_popover_manager } from "$lib/Components/Popover/index.svelte.js"
-import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
-import { create_node_manager } from "$lib/Components/FunctionInput/Node/index.svelte.js"
-
-export function create_stack_area_manager(config) {
-  console.log("create_stack_area_manager")
-  let is_drag_enter = $state(false)
-  let drag_counter = $state(0)
-  let hovered_node_drop_zone = $state(null)
-  let node_value_prepped = $state(null)
-
-  let choose_node_popover_manager = $state(null)
-  let choose_node_popover_toggle_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(input_path, is_insert, e) {
-    e.stopPropagation()
-    hovered_node_drop_zone = null
-    console.log("drop", { input_path, node_type: config?.node_type })
-    config?.drag_or_select_node(input_path, config?.node_type, false, null)
-  }
-
-  function handle_node_click(clicked_node_type, input_path, is_insert, toggle_popover) {
-    if (toggle_popover) {
-      toggle()
-    }
-    config?.drag_or_select_node(input_path, config?.node_type, true, clicked_node_type)
-  }
-
-  function prevent_drag(e) {
-    e.stopPropagation()
-    e.preventDefault()
-  }
-
-  function set_node_value_prepped() {
-    let node_value_prepped_loc = []
-    if (Array.isArray(config?.node_value) && config?.node_value.length > 0) {
-      for (let i = 0; i < config?.node_value.length; i++) {
-        let node_path = [...config?.node_path, i]
-        let node_type = config?.node_value[i]?.type
-        let node_manager = $state(null)
-        node_manager = create_node_manager({
-          node_type: node_type,
-          node_path: node_path,
-          node_value: config?.node_value[i]?.node_value,
-          is_clickable_only: false,
-          is_preview: false,
-          node_types: config?.node_types,
-          node_categories: config?.node_categories,
-          c: 12,
-          handle_node_drag_start: () =>
-            config?.handle_node_drag_start({
-              node_path: node_path,
-              node_type: node_type,
-            }),
-          handle_node_drag_end: () =>
-            config?.handle_node_drag_end({
-              node_path: node_path,
-              node_type: node_type,
-            }),
-          on_set_node_value: (input) => set_node_value(input),
-          drag_or_select_node: config?.drag_or_select_node,
-        })
-        node_value_prepped_loc.push({
-          ...config?.node_value?.[i],
-          node_manager: node_manager,
-        })
-      }
-    }
-    node_value_prepped = node_value_prepped_loc
-  }
-
-  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_${choose_node_popover_toggle_button_manager?.id}`,
-    })
-    choose_node_popover_toggle_button_manager = create_button_manager({
-      text: "Choose",
-      is_disabled: () => !config?.is_preview,
-      min_height: 3.4,
-      pt: 0.2,
-      pb: 0.2,
-      popover_target: () => `popover_${choose_node_popover_manager?.id}`,
-    })
-    set_node_value_prepped()
-  }
-
-  init(config)
-
-  return {
-    get node_types() {
-      return config?.node_types
-    },
-    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 choose_node_popover_toggle_button_manager() {
-      return choose_node_popover_toggle_button_manager
-    },
-    get node_value_prepped() {
-      return node_value_prepped
-    },
-    handle_drag_enter,
-    handle_drag_leave,
-    handle_drop,
-    handle_node_click,
-    prevent_drag,
-  }
-}

package/src/lib/Components/FunctionInput/Node/index.svelte

@@ -1,144 +0,0 @@
-<script>
-  import { slide, fade } from "svelte/transition"
-  import Field from "./helpers/Field/index.svelte"
-  import StackArea from "./helpers/StackArea/index.svelte"
-
-  let { manager } = $props()
-</script>
-
-<div>
-  {#if manager?.is_preview}
-    <p class="label">
-      {manager?.preview_text}
-    </p>
-  {/if}
-  {#if Array.isArray(manager?.node_structure) && manager?.node_structure.length > 0}
-    <div
-      class="container"
-      class:is_clickable_only={manager?.is_clickable_only}
-      draggable={!manager?.is_clickable_only}
-      role="button"
-      tabindex="0"
-      ondragstart={(e) => manager?.handle_drag_start(e)}
-      ondragend={(e) => manager?.handle_drag_end(e)}
-      style="--fill_color: oklch(var(--l16-t) var(--c{manager?.c}) {manager?.h > -1
-        ? `var(--h${manager?.h})`
-        : 'var(--primary-h)'}); --border_color: oklch(var(--l6-t) var(--c3) {manager?.h > -1
-        ? `var(--h${manager?.h})`
-        : 'var(--primary-h)'});"
-    >
-      {#each manager?.node_structure as node_item, i}
-        {#if node_item?.ui_type == "stack"}
-          <div class="children_container">
-            <div class="side_bar"></div>
-            {#if manager?.node_value?.is_collapsed}
-              <div class="collapsed_content" in:fade={{ delay: 600, duration: 300 }}>collapsed...</div>
-            {:else}
-              <div transition:slide={{ duration: 600 }}>
-                <StackArea manager={node_item?.stack_area_manager} />
-              </div>
-            {/if}
-          </div>
-        {:else}
-          <div
-            class="bar"
-            class:is_solo_bar={i == 0 && manager?.full_node_type.node_structure.length == 1}
-            class:is_top_bar_of_many={i == 0 && manager?.full_node_type.node_structure.length > 0}
-            class:is_closing_bar={manager?.full_node_type.node_structure.length - 1 == i}
-          >
-            {#if Array.isArray(node_item) && node_item.length > 0}
-              {#each node_item as bar_item}
-                <Field manager={bar_item?.field_manager} />
-              {/each}
-            {:else}
-              <p>No Node Fields</p>
-            {/if}
-          </div>
-        {/if}
-        {#if manager?.full_node_type.node_structure.length - 1 == i && node_item?.ui_type == "stack"}
-          <div class="bar closing_bar"></div>
-        {/if}
-      {/each}
-    </div>
-  {:else}
-    Node Not found {manager?.node_type}, {Array.isArray(manager?.node_path) ? `[${manager?.node_path.join(", ")}]` : ""}
-  {/if}
-</div>
-
-<style>
-  .container {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    cursor: grab;
-  }
-  .container:active {
-    cursor: grabbing;
-  }
-  .bar {
-    background-color: var(--fill_color);
-    position: relative;
-    width: fit-content;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    min-width: 2rem;
-    min-height: 4rem;
-    padding: 0.5rem;
-    padding-left: 1rem;
-    border-top-right-radius: 1rem;
-    border-bottom-right-radius: 1rem;
-    border: 1px solid var(--border_color);
-    margin-bottom: -1px;
-  }
-  .is_solo_bar {
-    border-top-left-radius: 1rem;
-    border-bottom-left-radius: 1rem;
-    padding-left: 0.5rem;
-  }
-  .is_top_bar_of_many {
-    border-top-left-radius: 1rem;
-  }
-  .is_closing_bar {
-    border-bottom-left-radius: 1rem;
-  }
-  .closing_bar {
-    min-height: 2rem;
-    min-width: 8rem;
-    border-bottom-left-radius: 1rem;
-  }
-  .children_container {
-    display: flex;
-  }
-  .side_bar {
-    position: relative;
-    min-width: 10px;
-    max-width: 10px;
-    background-color: var(--fill_color);
-    border-left: 1px solid var(--border_color);
-    border-right: 1px solid var(--border_color);
-    margin-right: -1px;
-  }
-  .side_bar::after {
-    position: absolute;
-    content: "";
-    background-color: var(--fill_color);
-    border-right: 1px solid var(--border_color);
-    z-index: 3;
-    top: 0;
-    left: 0;
-    bottom: -1px;
-    right: -1px;
-  }
-  .collapsed_content {
-    background-color: var(--shadow5-t);
-    border: 1px solid var(--shadow8-t);
-    border-radius: 0.5rem;
-    font-size: 1.2rem;
-    color: var(--g8-t);
-    padding: 0.2rem 0.5rem;
-  }
-  .is_clickable_only {
-    cursor: pointer !important;
-  }
-</style>