sveltekit-ui 1.0.7 → 1.0.9

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

@@ -1,134 +0,0 @@
-// import Field from "./helpers/Field/index.svelte"
-// import StackArea from "./helpers/StackArea/index.svelte"
-import { deep_copy } from "../../../client/index.js"
-import { create_stack_area_manager } from "./helpers/StackArea/index.svelte.js"
-import { create_field_manager } from "./helpers/Field/index.svelte.js"
-
-export function create_node_manager(config) {
-  console.log("create_node_man", config)
-  let node_structure = $state(null)
-  let is_clickable_only = $state(false)
-  let node_path = $state(null)
-  let node_types = $state(null)
-  let node_type = $state(null)
-  let node_value = $state(null)
-  let node_categories = $state(null)
-
-  let preview_text = $derived(
-    `${node_type}(${node_types?.[node_type]?.input?.type})→(${node_types?.[node_type]?.output?.type ?? "void"})`
-  )
-
-  let full_node_type = $derived(node_types?.[node_type])
-  let h = $derived(node_categories?.[node_types?.[node_type]?.category]?.h || 4)
-
-  function handle_drag_start(e) {
-    if (is_clickable_only || node_path == "main") {
-      e.preventDefault()
-    } else if (typeof config?.handle_node_drag_start == "function") {
-      config?.handle_node_drag_start()
-    }
-  }
-
-  function handle_drag_end(e) {
-    if (is_clickable_only) {
-      e.preventDefault()
-    } else if (typeof config?.handle_node_drag_start == "function") {
-      config?.handle_node_drag_end()
-    }
-  }
-
-  function init(config) {
-    node_categories = config?.node_categories
-    node_path = config?.node_path
-    node_types = config?.node_types
-    node_type = config?.node_type
-    node_value = config?.node_value
-    is_clickable_only = !!config?.is_clickable_only
-    let node_structure_loc = []
-    if (Array.isArray(full_node_type?.node_structure)) {
-      for (let i = 0; i < full_node_type?.node_structure.length; i++) {
-        let node_item = deep_copy(full_node_type.node_structure?.[i])
-        if (node_item?.ui_type == "stack") {
-          node_item.stack_area_manager = create_stack_area_manager({
-            parent_node_type: node_type,
-            node_path: [...(Array.isArray(node_path) ? node_path : []), node_item?.field].filter(
-              (item) => item !== null && item !== undefined
-            ),
-            node_type: node_value?.[node_item?.field]?.type,
-            node_value: node_value?.[node_item?.field]?.value,
-            node_types: node_types,
-            is_preview: false,
-            drag_or_select_node: config?.drag_or_select_node,
-            handle_node_drag_start: config?.handle_node_drag_start,
-            handle_node_drag_end: config?.handle_node_drag_end,
-          })
-        } else {
-          if (Array.isArray(node_item) && node_item.length > 0) {
-            for (let j = 0; j < node_item.length; j++) {
-              if (node_item[j]?.ui_type == "input") {
-                node_item[j].field_manager = create_field_manager({
-                  bar_item: node_item[j],
-                  node_path: node_path,
-                  node_type: node_type,
-                  node_value: node_value,
-                  is_preview: !!config?.is_preview,
-                  on_set_node_value: (input) => config?.on_set_node_value(input),
-                  get_selected_version_node_at_path: (input) => config?.get_selected_version_node_at_path(input),
-                })
-              } else {
-                node_item[j].field_manager = create_field_manager({
-                  bar_item: node_item?.[j],
-                  parent_node_type: node_type,
-                  node_path: [...(Array.isArray(node_path) ? node_path : []), node_item[j]?.field].filter(
-                    (item) => item !== null && item !== undefined
-                  ),
-                  node_type: node_value?.[node_item[j]?.field]?.type,
-                  node_value: node_value?.[node_item[j]?.field]?.value,
-                  is_preview: !!config?.is_preview,
-                  on_set_node_value: (input) => config?.on_set_node_value(input),
-                  get_selected_version_node_at_path: (input) => config?.get_selected_version_node_at_path(input),
-                })
-              }
-            }
-          }
-        }
-        node_structure_loc.push(node_item)
-      }
-    }
-    node_structure = node_structure_loc
-  }
-
-  init(config)
-
-  return {
-    get node_path() {
-      return node_path
-    },
-    get node_type() {
-      return node_type
-    },
-    get is_preview() {
-      return !!config?.is_preview
-    },
-    get is_clickable_only() {
-      return !!config?.is_clickable_only
-    },
-    get full_node_type() {
-      return full_node_type
-    },
-    get h() {
-      return h
-    },
-    get c() {
-      return config?.c
-    },
-    get preview_text() {
-      return preview_text
-    },
-    get node_structure() {
-      return node_structure
-    },
-    handle_drag_start,
-    handle_drag_end,
-  }
-}

package/dist/Components/FunctionInput/index.svelte

@@ -1,356 +0,0 @@
-<script>
-  import Button from "../Button/index.svelte"
-  import Popover from "../Popover/index.svelte"
-  import TextInput from "../TextInput/index.svelte"
-  import InfoBox from "../InfoBox/index.svelte"
-  import { goto } from "$app/navigation"
-  import Node from "./Node/index.svelte"
-  import Icon from "../Icon/index.svelte"
-
-  let { manager } = $props()
-</script>
-
-<div class="container" style="max-height: 100%;">
-  <div class="head_panel">
-    <div style="display: flex; flex: 1; gap: 1rem; flex-wrap: wrap; align-items: center;">
-      <!-- {@render header_pre()} -->
-      <div style="display: flex;">
-        <Button manager={manager?.undo_version_button_manager} />
-        <Button manager={manager?.redo_version_button_manager} />
-      </div>
-      <!-- {@render header_post()} -->
-      <!-- <Popover
-        type="center"
-        min_width={280}
-        target_width={380}
-        min_height={280}
-        target_height={380}
-        header="Edit Function Name"
-      >
-        <div slot="toggle_button">
-          <Button
-            type="plain"
-            support_icon="edit"
-            ml={0.5}
-            icon_sw={40}
-            icon_size={1.6}
-            font_size={1.2}
-            is_uniform={true}
-            min_height={2}
-            border_radius={0.5}
-            onclick={() => (name_loc = $name)}
-          />
-        </div>
-        <div slot="popover_content" let:toggle_popover>
-          <TextInput label="Function Name" placeholder="name" bind:val={name_loc} is_bind_val={true} />
-        </div>
-        <div slot="footer" let:toggle_popover>
-          <Button text="Set Name" mb={1} onclick={() => set_name(toggle_popover)} />
-        </div>
-      </Popover> -->
-      <!-- <p>{manager?.description}</p> -->
-      <!-- <Popover
-        type="center"
-        min_width={280}
-        target_width={380}
-        min_height={280}
-        target_height={380}
-        header="Edit Function Description"
-      >
-        <div slot="toggle_button">
-          <Button
-            type="plain"
-            support_icon="edit"
-            ml={0.5}
-            icon_sw={40}
-            icon_size={1.6}
-            font_size={1.2}
-            is_uniform={true}
-            min_height={2}
-            border_radius={0.5}
-            onclick={() => (description_loc = $description)}
-          />
-        </div>
-        <div slot="popover_content" let:toggle_popover>
-          <TextInput
-            label="Function Description"
-            placeholder="description"
-            bind:val={description_loc}
-            is_bind_val={true}
-          />
-        </div>
-        <div slot="footer" let:toggle_popover>
-          <Button text="Set Description" mb={1} onclick={() => set_description(toggle_popover)} />
-        </div>
-      </Popover> -->
-      <!-- <p>{format_date(manager?.db_epoch_updated)}</p>
-      <p>{format_date(manager?.db_epoch_created)}</p> -->
-    </div>
-    <InfoBox message={manager?.update_function_error_message} />
-  </div>
-  <div class="builder_container">
-    <div class="support_container">
-      <div class="toolbox">
-        <div class="node_categories">
-          {#if Array.isArray(manager?.node_category_buttons)}
-            {#each manager?.node_category_buttons as node_category_button}
-              <div class:is_category_selected={node_category_button?.selected_type == "selected"}>
-                <Button manager={node_category_button?.button_manager} />
-              </div>
-            {/each}
-          {/if}
-        </div>
-        <div class="node_types_container">
-          {#if Array.isArray(manager?.node_toolbox_items_prepped)}
-            {#each manager?.node_toolbox_items_prepped as node_toolbox_item_prepped}
-              <!-- aaa|{node_toolbox_item} -->
-              <!-- <pre>{JSON.stringify(node_toolbox_item, null, 2)}</pre> -->
-              <Node manager={node_toolbox_item_prepped?.node_manager} />
-            {/each}
-          {/if}
-        </div>
-      </div>
-      <div class="consolelog_container" style="height: {manager?.is_console_large ? 'calc(100% - 1rem)' : '20rem'}">
-        <div class="console_header">
-          <p class="label" style="font-size: 1.4rem ">Console</p>
-          <div style="display: flex; gap: .5rem">
-            <!-- <Button
-              type="outlined"
-              onclick={() => (manager?.is_console_large = !manager?.is_console_large)}
-              support_icon="arrow"
-              border_radius={0.5}
-              icon_deg={manager?.is_console_large ? 180 : 0}
-              is_uniform={true}
-              min_height={2.5}
-              icon_size={1.4}
-              icon_sw={50}
-              h={14}
-              c={1}
-              l={6}
-              icon_movement_damping={1}
-              pt={0.3}
-              pb={0.3}
-              pl={0.8}
-              pr={0.8}
-            /> -->
-            <!-- <Button
-              onclick={() => run_selected_function_structure()}
-              support_icon="play"
-              text="Run Function"
-              border_radius={0.5}
-              is_compressed={true}
-              min_height={2}
-              icon_size={1.4}
-              icon_sw={50}
-              pt={0.3}
-              pb={0.3}
-              pl={0.8}
-              pr={0.8}
-            /> -->
-          </div>
-        </div>
-        <div class="console_body">
-          {#if manager?.console_logs && Array.isArray(manager?.console_logs)}
-            <p class="label">Logs:</p>
-            {#each manager?.console_logs as log}
-              <div style="display: flex; flex: 1; gap: 1rem; margin: .5rem;">
-                <div
-                  class="log_frame"
-                  style="--color: {log?.kind == 'error'
-                    ? 'var(--error-t)'
-                    : log?.kind == 'warning'
-                      ? 'var(--warning-t)'
-                      : 'var(--g14-t)'};"
-                ></div>
-                <div style="padding-bottom: .5rem;">
-                  {#if log?.label}
-                    <p class="label">{log?.label}</p>
-                  {/if}
-                  {#if typeof log?.value == "object"}
-                    <pre style="margin-top: 0;">{JSON.stringify(log?.value, null, 2)}</pre>
-                  {:else}
-                    <p style="margin-top: 0;">{log?.value}</p>
-                  {/if}
-                </div>
-              </div>
-            {/each}
-          {/if}
-          <div>
-            <p class="label">Result:</p>
-            {#if typeof manager?.console_result == "object"}
-              <pre style="margin-top: 0;">{JSON.stringify(manager?.console_result, null, 2)}</pre>
-            {:else}
-              <p style="margin-top: 0;">{manager?.console_result}</p>
-            {/if}
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="workspace_container">
-      <div class="workspace_bg">
-        <div class="main_function_container">
-          <Node manager={manager?.root_node_manager} />
-        </div>
-        <pre>{JSON.stringify(manager?.dragging_node, null, 2)}</pre>
-        {#if manager?.dragging_node?.node_path}
-          <div
-            class="node_trash"
-            class:draggedover={manager?.is_drag_enter}
-            role="button"
-            tabindex="0"
-            aria-label="Drop area"
-            ondragenter={() => manager?.handle_drag_enter()}
-            ondragleave={() => manager?.handle_drag_leave()}
-            ondragover={(e) => e.preventDefault()}
-            ondrop={() => manager?.drag_or_select_node(null, null, false, null, true)}
-          >
-            <div>
-              <Icon manager={manager?.trashcan_icon_manager} />
-              <p class="trash_text">Trash</p>
-            </div>
-          </div>
-        {/if}
-        <div class="node_trash_tbd">
-          <!-- <InfoBox message={$error_message} /> -->
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<style>
-  .container {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    overflow: hidden;
-  }
-  .builder_container {
-    display: flex;
-    flex: 1;
-    overflow: hidden;
-  }
-  .support_container {
-    position: relative;
-    width: 50rem;
-  }
-  .toolbox {
-    display: flex;
-    max-height: 100%;
-    margin: 0.5rem;
-  }
-  .node_categories {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    padding: 0.5rem;
-  }
-  .is_category_selected {
-    box-shadow:
-      0 0.1rem 1rem 0.3rem var(--shadow8-t),
-      0 0 0 0.1rem var(--g5-t);
-    border-radius: 1rem;
-  }
-  .node_types_container {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    padding-bottom: 30rem;
-    overflow: scroll;
-  }
-  .consolelog_container {
-    position: absolute;
-    left: 0.5rem;
-    right: 0.5rem;
-    bottom: 0.5rem;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    background-color: var(--bg);
-    box-shadow: 0 0 1rem var(--shadow8);
-    border: 1px solid var(--shadow5-t);
-    border-radius: 1rem;
-    z-index: 5;
-    transition: height 1s;
-  }
-  .log_frame {
-    width: 0.5rem;
-    border-top-left-radius: 2px;
-    border-bottom-left-radius: 2px;
-    border-left: 1px solid var(--color);
-    border-top: 1px solid var(--color);
-    border-bottom: 1px solid var(--color);
-  }
-  .console_header {
-    background-color: var(--shadow1-t);
-    border-bottom: 1px solid var(--shadow3-t);
-    padding: 0.5rem;
-    margin-bottom: 0.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  .console_body {
-    padding: 0.5rem;
-    overflow: scroll;
-  }
-  .workspace_container {
-    display: flex;
-    flex: 1;
-    max-width: 100%;
-    margin: 0.5rem;
-    overflow: scroll;
-  }
-  .workspace_bg {
-    position: relative;
-    margin: 1px;
-    padding: 1rem;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    overflow: scroll;
-    max-width: 100%;
-    max-height: 100%;
-    box-shadow: 0 0 1px var(--g9-t);
-    border-radius: 1rem;
-    background-image: linear-gradient(to right, var(--g20-t) 1px, transparent 1px),
-      linear-gradient(to bottom, var(--g20-t) 1px, transparent 1px);
-    background-size: 10px 10px;
-    background-position: -1px -1px;
-  }
-  .main_function_container {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    overflow: scroll;
-    max-width: 100%;
-    max-height: 100%;
-  }
-  .node_trash_tbd {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-  }
-  .node_trash {
-    position: absolute;
-    bottom: 1rem;
-    right: 1rem;
-    min-height: 15rem;
-    min-width: 15rem;
-    border-radius: 1rem;
-    background-color: oklch(var(--l5-t) var(--c7) var(--h1) / var(--o8));
-    border: 1px solid oklch(var(--l7-t) var(--c14) var(--h1));
-    display: grid;
-    place-items: center;
-    z-index: 2;
-  }
-  .draggedover {
-    background-color: oklch(var(--l5-t) var(--c7) var(--h1) / var(--o10));
-    border: 1px solid oklch(var(--l5-t) var(--c14) var(--h1));
-  }
-  .trash_text {
-    color: oklch(var(--l10-t) var(--c11) var(--h1));
-    font-size: 2.4rem;
-    text-align: center;
-  }
-</style>