sveltekit-ui 1.0.8 → 1.0.9

package/src/routes/[component]/+page.svelte

@@ -18,7 +18,7 @@
   import CronInputShowcase from "./Showcase/CronInput/index.svelte"
   import DropdownShowcase from "./Showcase/Dropdown/index.svelte"
   import FileInputShowcase from "./Showcase/FileInput/index.svelte"
-  import FunctionInputShowcase from "./Showcase/FunctionInput/index.svelte"
+  // import FunctionInputShowcase from "./Showcase/FunctionInput/index.svelte"
   import IconInputShowcase from "./Showcase/IconInput/index.svelte"
   import IconShowcase from "./Showcase/Icon/index.svelte"
   import ImageShowcase from "./Showcase/Image/index.svelte"
@@ -99,8 +99,8 @@
     <DropdownShowcase />
   {:else if page?.params?.component == "file_input"}
     <FileInputShowcase />
-  {:else if page?.params?.component == "function_input"}
-    <FunctionInputShowcase />
+    <!-- {:else if page?.params?.component == "function_input"}
+    <FunctionInputShowcase /> -->
   {:else if page?.params?.component == "icon"}
     <IconShowcase />
   {:else if page?.params?.component == "icon_input"}

package/svelte.config.js

@@ -6,7 +6,7 @@ export default {
       runtime: "nodejs22.x",
       trailingSlash: false,
       cleanUrls: true,
-      maxDuration: 60,
+      maxDuration: 300,
     }),
   },
 }

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

@@ -1,110 +0,0 @@
-<script>
-  import Dropdown from "../../../../Dropdown/index.svelte"
-  import Modal from "../../../../../Modal/index.svelte"
-  import TextArrayInput from "../../../../TextArrayInput/index.svelte"
-  import Button from "../../../../Button/index.svelte"
-  import { function_builder_manager } from "../../../index.svelte.js"
-  import { onMount } from "svelte"
-
-  export let node_path = null
-  export let node_value = null
-  export let is_preview = false
-
-  onMount(() => {
-    dropdown_opened()
-  })
-
-  let { get_defined_at_path, set_node_value } = function_builder_manager
-
-  let edit_val = {
-    identifier: null,
-    property_path: [],
-  }
-
-  $: on_value_change(node_value)
-  function on_value_change(val) {
-    edit_val = {
-      identifier: val?.identifier ?? null,
-      property_path: val?.property_path ?? [],
-    }
-  }
-
-  let options = []
-  function dropdown_opened() {
-    const get_defined_at_path_res = get_defined_at_path(node_path)
-    console.log("get_defined_at_path_res", get_defined_at_path_res)
-    let options_loc = []
-    if (Object.keys(get_defined_at_path_res || {}).length > 0) {
-      for (let [key, value] of Object.entries(get_defined_at_path_res)) {
-        options_loc.push({ key, name: key })
-      }
-    }
-    options = options_loc
-  }
-
-  function clean_identifier(value) {
-    let cleaned_input = ""
-    if (value) {
-      cleaned_input = value.toLowerCase()
-      cleaned_input = cleaned_input.replace(/[^a-z0-9]/g, "_")
-      cleaned_input = cleaned_input.replace(/_{2,}/g, "_")
-      cleaned_input = cleaned_input.replace(/^_+|_+$/g, "")
-    }
-    return cleaned_input
-  }
-
-  function save_changes(toggle_modal) {
-    console.log("save_changes")
-    edit_val.identifier = clean_identifier(edit_val?.identifier)
-    let cleaned_property_path = []
-    if (Array.isArray(edit_val?.property_path)) {
-      for (let identifier of edit_val?.property_path) {
-        cleaned_property_path.push(clean_identifier(identifier))
-      }
-    }
-    edit_val.property_path = cleaned_property_path
-    set_node_value(node_path, edit_val)
-    if (toggle_modal) {
-      toggle_modal()
-    }
-  }
-</script>
-
-<Modal
-  min_width={280}
-  target_width={330}
-  min_height={280}
-  target_height={240}
-  type="center"
-  header="Defined Target Selector"
->
-  <div slot="toggle_button">
-    <Button
-      type="outlined"
-      h={10}
-      l={3}
-      c={1}
-      text={node_value?.identifier
-        ? `${node_value?.identifier}${
-            Array.isArray(node_value?.property_path) && node_value?.property_path.length > 0
-              ? "." + node_value?.property_path.join(".")
-              : ""
-          }`
-        : "Select Defined Identifier"}
-    />
-  </div>
-  <div slot="modal_content" let:toggle_modal>
-    <Dropdown
-      is_disabled={is_preview}
-      val={edit_val?.identifier}
-      ondropdown_opened={() => dropdown_opened()}
-      onitem_click={(e) => (edit_val.identifier = e.detail.key)}
-      {options}
-      mb={1}
-    />
-    <TextArrayInput label="Property Path" bind:val={edit_val.property_path} is_bind_val={true} />
-  </div>
-  <div slot="modal_content_footer" let:toggle_modal>
-    <Button text="Save Changes" onclick={() => save_changes(toggle_modal)} />
-  </div>
-</Modal>

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

@@ -1,109 +0,0 @@
-<script>
-  // import Button from "../../../../Button/index.svelte"
-  // import Checkbox from "../../../../Checkbox/index.svelte"
-  // import FileInput from "../../../../FileInput/index.svelte"
-  // import CronInput from "../../../../CronInput/index.svelte"
-  // import ColorInput from "../../../../ColorInput/index.svelte"
-  // import TextInput from "../../../../TextInput/index.svelte"
-  // import IconInput from "../../../../IconInput/index.svelte"
-  // import TimeInput from "../../../../TimeInput/index.svelte"
-  // import InlineDropArea from "../InlineDropArea/index.svelte"
-  // import DefinedTargetInput from "../DefinedTargetInput/index.svelte"
-  // import Node from "../../../../FunctionBuilder/Node/index.svelte"
-
-  let { manager } = $props()
-
-  // maybe more custom inputs like slider with custom min, max, step or range. Maybe dropdown with custom options
-
-  // make any TextInput fields show display and a modal for edit to only set new version on finish
-  // give all inputs a config input so i can set dropdown options, slider limits, color options, etc
-</script>
-
-<!-- <pre>{JSON.stringify({ a: manager?.field_id, b: manager?.field }, null, 2)}</pre> -->
-<!-- {manager?.input_type} -->
-{#if manager?.bar_item?.ui_type == "text"}
-  <p style="white-space: nowrap;">{manager?.bar_item?.value}</p>
-{:else if manager?.bar_item?.ui_type == "br"}
-  <div style="width: 100%;"></div>
-{:else if manager?.bar_item?.ui_type == "field" && !manager?.field?.forced_node}
-  {#if manager?.node_type}
-    node_tbd
-    <!-- <Node {node_path} {node_type} {node_value} {is_preview} {is_clickable_only} /> -->
-  {:else}
-    <!-- <InlineDropArea manager={manager?.manager} /> -->
-    <!-- <InlineDropArea {parent_node_type} {node_path} {node_type} {node_value} {is_preview} /> -->
-  {/if}
-{:else if manager?.bar_item?.ui_type == "input" || manager?.input_type}
-  {#if manager?.input_type == "arrow_toggle_literal"}
-    <!-- <Button manager={manager?.manager} /> -->
-  {:else if manager?.input_type == "defined_target_literal"}
-    defined_tbd
-    <!-- <DefinedTargetInput {node_path} {node_value} /> -->
-  {:else if manager?.input_type == "get_defined"}
-    get_defined
-  {:else if manager?.input_type == "parameters_literal"}
-    parameters_literal
-  {:else if manager?.input_type == "arguments_literal"}
-    arguments_literal
-  {:else if manager?.input_type == "array_expression"}
-    array_expression
-  {:else if manager?.input_type == "array_uniform_literal"}
-    array_uniform_literal
-  {:else if manager?.input_type == "array_literal"}
-    array_literal
-  {:else if manager?.input_type == "object_expression"}
-    object_expression
-  {:else if manager?.input_type == "object_literal"}
-    object_literal
-  {:else if manager?.input_type == "json_literal"}
-    json_literal
-  {:else if manager?.input_type == "subscriber_id_literal"}
-    subscriber_id_literal
-  {:else if manager?.input_type == "checkbox"}
-    <!-- <Checkbox manager={manager?.manager} /> -->
-  {:else if manager?.input_type == "time_input"}
-    TimeInput_tbd
-    <!-- <TimeInput manager={manager?.manager} /> -->
-  {:else if manager?.input_type == "file_input"}
-    file_input
-    <!-- <FileInput /> -->
-  {:else if manager?.input_type == "location_literal"}
-    location_literal
-  {:else if manager?.input_type == "color_input"}
-    <!-- <ColorInput manager={manager?.manager} /> -->
-  {:else if manager?.input_type == "icon_input"}
-    <!-- <IconInput manager={manager?.manager} /> -->
-  {:else if ["email_address_input", "text_input", "number_input"].includes(manager?.input_type)}
-    <!-- <TextInput manager={manager?.manager} /> -->
-  {:else if manager?.input_type == "identifier_literal"}
-    identifier_literal_tbd
-  {:else if manager?.input_type == "cron_input"}
-    <!-- <CronInput manager={manager?.manager} /> -->
-  {:else}
-    tbd1 {manager?.input_type}
-    <!-- <pre>{JSON.stringify(
-        {
-          type: "d",
-          node_path: node_path ?? "",
-          node_type: node_type ?? "",
-          node_value: node_value ?? "",
-          manager?.bar_item: manager?.bar_item ?? "",
-        },
-        null,
-        2
-      )}</pre> -->
-  {/if}
-{:else}
-  tbd2
-  <!-- <pre>{JSON.stringify(
-      {
-        type: "e",
-        node_path: node_path ?? "",
-        node_type: node_type ?? "",
-        node_value: node_value ?? "",
-        manager?.bar_item: manager?.bar_item ?? "",
-      },
-      null,
-      2
-    )}</pre> -->
-{/if}

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

@@ -1,207 +0,0 @@
-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) {
-    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

@@ -1,97 +0,0 @@
-<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

@@ -1,105 +0,0 @@
-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,
-  }
-}