sveltekit-ui 1.0.0

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

@@ -0,0 +1,146 @@
+<script>
+  import Button from "$lib/Components/Button/index.svelte"
+  import Icon from "$lib/Components/Icon/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+{#snippet main_file_stuff()}
+  {#if manager?.error_message}
+  <div style="display: flex; align-items: center;">
+    <p style="color: var(--error-t);">{manager?.error_message}</p>
+    <Button manager={manager?.error_button_manager} />
+  </div>
+  {/if}
+  {#if Array.isArray(manager?.val) ? manager?.val.length > 0 : !!manager?.val}
+    <Button manager={manager?.clear_files_button_manager} />
+  {:else}
+  <div class="file_input_wrapper">
+    <input
+      type="file"
+      name={manager?.name}
+      required={manager?.is_required}
+      readonly={manager?.is_read_only}
+      multiple={manager?.is_multiselect}
+      accept={Array.isArray(manager?.accept) ? manager?.accept.join(", ") : ""}
+      onchange={(e) => manager?.get_file(e)}
+      id={`file-input-${manager?.id}`}
+      hidden
+    />
+    <label for={`file-input-${manager?.id}`} class="file_input_label">
+      {manager?.select_file_button_text ? manager?.select_file_button_text : `Select file${manager?.is_multiselect ? "(s)" : ""}`}
+    </label>
+  </div>
+  {/if}
+{/snippet}
+
+<div class="container">
+  {#if manager?.label}
+    <div style="display: inline-flex;">
+      {#if manager?.label}
+        <p class="label">{manager?.label}:</p>
+      {/if}
+    </div>
+  {/if}
+  {#if manager?.is_drop_zone && !(manager?.is_hide_drop_zone_if_file && (Array.isArray(manager?.val) ? manager?.val.length > 1 : manager?.val))}
+    <div class="input_container" style="height: {manager?.height};">
+      <div
+        class:drop_zone={manager?.is_drop_zone}
+        style:background-image={manager?.is_drop_zone ? manager?.svg_bg : ""}
+        style="--border_radius: {manager?.border_radius}rem; 
+      margin-left: {manager?.ml}rem; margin-right: {manager?.mr}rem; margin-top: {manager?.mt}rem; margin-bottom: {manager?.mb}rem;"
+        ondrop={(e) => manager?.drop_handler(e)}
+        ondragover={(e) => e.preventDefault()}
+        role="region"
+        aria-label="File drop area"
+      >
+        <div>
+          <Icon manager={manager?.file_drop_icon_manager} />
+        </div>
+        {#if (manager?.val && !Array.isArray(manager?.val)) || (manager?.val && Array.isArray(manager?.val) && manager?.val.length > 0)}
+          {#if Array.isArray(manager?.val)}
+            {#if manager?.val.length == 1}
+              <p>{manager?.val[0]?.name ?? "Untitled"}</p>
+            {:else}
+              <p>{manager?.val.length + " files selected"}</p>
+            {/if}
+          {:else}
+            <p>{manager?.val?.name ?? "Untitled"}</p>
+          {/if}
+        {:else}
+          <p style="margin-bottom: 1rem;">
+            Drag and drop file{manager?.is_multiselect ? "(s)" : ""} here or
+          </p>
+        {/if}
+        {@render main_file_stuff()}
+      </div>
+    </div>
+  {:else}
+    {@render main_file_stuff()}
+  {/if}
+</div>
+
+<style>
+  .container{
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+  }
+  .input_container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    /* height: 100%; */
+  }
+  .drop_zone {
+    border-radius: var(--border_radius);
+    padding: 1rem 1rem 2rem 1rem;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  .file_input_wrapper {
+    position: relative;
+  }
+  .file_input_label {
+    display: inline-block;
+    padding: 0.8rem 1rem;
+    border: 1px solid var(--g2-t);
+    border-radius: 1rem;
+    cursor: pointer;
+    color: var(--g2-t);
+    font-size: 1.6rem;
+    line-height: 1.6rem;
+    font-weight: 400;
+    height: 3.4rem;
+  }
+  .file_input_label:hover {
+    background-color: var(--primary-transparent2-t);
+  }
+  .file_input_label:active {
+    background-color: var(--g14-t);
+  }
+  input[type="file"]:not(:focus) + .file_input_label {
+    outline: none;
+  }
+  input[type="file"] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    opacity: 0;
+    cursor: pointer;
+  }
+  .label {
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: var(--g12-t);
+    line-height: 1.6rem;
+    margin-right: 0.5rem;
+  }
+</style>

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

@@ -0,0 +1,226 @@
+import { create_unique_id, set_closurable, set_closurable_color } from "$lib/client/index.js"
+import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+import { create_icon_manager } from "$lib/Components/Icon/index.svelte.js"
+
+export function create_file_input_manager(config) {
+  const id = create_unique_id(null, 20)
+  let val = $state(null)
+  let label = $derived(set_closurable(config?.label, null))
+  let name = $derived(set_closurable(config?.name, "file"))
+  let is_required = $derived(set_closurable(config?.is_required, false))
+  let is_read_only = $derived(set_closurable(config?.is_read_only, false))
+  let accept = $derived(
+    set_closurable(config?.accept, [
+      "image/png",
+      "image/jpeg",
+      "image/webp",
+      "image/gif",
+      "image/avif",
+      "image/heic",
+      "image/svg+xml",
+      "application/pdf",
+      "video/mp4",
+      "audio/mpeg",
+      "audio/aac",
+      "application/json",
+    ])
+  )
+  let is_multiselect = $derived(set_closurable(config?.is_multiselect, false))
+  let is_disabled = $derived(set_closurable(config?.is_disabled, false))
+  let border_radius = $derived(set_closurable(config?.border_radius, 2))
+  let height = $derived(set_closurable(config?.height, null))
+  let icon_color = $derived(set_closurable_color(config?.icon_color, "var(--primary-t)"))
+  let border_color = $derived(set_closurable_color(config?.border_color, "aabbccff"))
+  let is_drop_zone = $derived(set_closurable(config?.is_drop_zone, true))
+  let is_hide_drop_zone_if_file = $derived(set_closurable(config?.is_hide_drop_zone_if_file, true))
+  let ml = $derived(set_closurable(config?.ml, 0))
+  let mr = $derived(set_closurable(config?.mr, 0))
+  let mt = $derived(set_closurable(config?.mt, 0))
+  let mb = $derived(set_closurable(config?.mb, 0))
+  let select_file_button_text = $derived(set_closurable(config?.select_file_button_text, null))
+  let error_message = $state(null)
+  let error_button_manager = $state(null)
+  let clear_files_button_manager = $state(null)
+  let file_drop_icon_manager = $state(null)
+
+  let svg_bg = $derived(`url(
+    "data:image/svg+xml,%3csvg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'%3e%3crect stroke='%23${border_color}' x='.1rem' y='.1rem' width='calc(100% - .2rem)' height='calc(100% - .2rem)' fill='none' rx='${
+    border_radius * 10
+  }' ry='${
+    border_radius * 10
+  }' stroke-width='2' stroke-dasharray='8%2c 14' stroke-dashoffset='6' stroke-linecap='round'/%3e%3c/svg%3e"
+  )`)
+
+  function get_file(e) {
+    error_message = null
+    let val_loc = []
+    for (let file of e.target.files) {
+      val_loc = [...val_loc, file]
+    }
+    if (is_multiselect) {
+      val = val_loc
+    } else {
+      val = val_loc[0]
+    }
+    if (typeof config?.on_get_file == "function") {
+      config?.on_get_file(val)
+    }
+  }
+
+  function drop_handler(ev) {
+    console.log("File(s) dropped", ev)
+    if (ev) {
+      ev.preventDefault()
+    }
+    if (is_drop_zone) {
+      error_message = null
+      let val_loc = []
+      if (ev.dataTransfer.items) {
+        for (let i = 0; i < ev.dataTransfer.items.length; i++) {
+          if (ev.dataTransfer.items[i].kind === "file") {
+            const file = ev.dataTransfer.items[i].getAsFile()
+            console.log(file?.type, accept, accept.includes(file?.type))
+            if (accept.includes(file?.type)) {
+              console.log("1 file[" + i + "].name = " + file.name)
+              val_loc = [...val_loc, file]
+            } else {
+              error_message = error_message ?? "" + " " + file?.name + " of type " + file?.type + " not allowed"
+            }
+          }
+        }
+      } else {
+        for (let i = 0; i < ev.dataTransfer.files.length; i++) {
+          const file = ev.dataTransfer.files[i].getAsFile()
+          val_loc = [...val_loc, file]
+        }
+      }
+      if (is_multiselect) {
+        val = val_loc
+      } else {
+        val = val_loc[0]
+      }
+    }
+    if (config?.on_get_file) {
+      config?.on_get_file(val)
+    }
+  }
+
+  function clear_files() {
+    val = []
+    if (config?.on_clear_files) {
+      config?.on_clear_files()
+    }
+  }
+
+  function init(config) {
+    val = config?.val ?? null
+    file_drop_icon_manager = create_icon_manager({
+      icon_id: () => (val && val.length > 0 ? "file_dropped" : "file_drop"),
+      size: 8,
+      sw: 12,
+      color: () => icon_color,
+    })
+    error_button_manager = create_button_manager({
+      type: "outlined",
+      support_icon: "x",
+      min_height: 2.4,
+      color: "var(--error-t)",
+      ml: 0.5,
+      is_uniform: true,
+      is_disabled: () => is_disabled,
+      on_click: () => (error_message = null),
+    })
+    clear_files_button_manager = create_button_manager({
+      ml: ml,
+      mr: mr,
+      mt: mt,
+      mb: mb,
+      support_icon: "x",
+      is_compressed: true,
+      is_disabled: () => is_disabled,
+      text: () => (Array.isArray(val) ? `${val.length}Files Selected` : val?.name),
+      on_click: () => clear_files(),
+    })
+  }
+
+  init(config)
+
+  return {
+    id,
+    get val() {
+      return val
+    },
+    get name() {
+      return name
+    },
+    get label() {
+      return label
+    },
+    get is_required() {
+      return is_required
+    },
+    get is_read_only() {
+      return is_read_only
+    },
+    get accept() {
+      return accept
+    },
+    get is_multiselect() {
+      return is_multiselect
+    },
+    get is_disabled() {
+      return is_disabled
+    },
+    get border_radius() {
+      return border_radius
+    },
+    get height() {
+      return height
+    },
+    get icon_color() {
+      return icon_color
+    },
+    get border_color() {
+      return border_color
+    },
+    get is_drop_zone() {
+      return is_drop_zone
+    },
+    get is_hide_drop_zone_if_file() {
+      return is_hide_drop_zone_if_file
+    },
+    get ml() {
+      return ml
+    },
+    get mr() {
+      return mr
+    },
+    get mt() {
+      return mt
+    },
+    get mb() {
+      return mb
+    },
+    get select_file_button_text() {
+      return select_file_button_text
+    },
+    get error_message() {
+      return error_message
+    },
+    get svg_bg() {
+      return svg_bg
+    },
+    get error_button_manager() {
+      return error_button_manager
+    },
+    get clear_files_button_manager() {
+      return clear_files_button_manager
+    },
+    get file_drop_icon_manager() {
+      return file_drop_icon_manager
+    },
+    get_file,
+    drop_handler,
+    clear_files,
+  }
+}

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

@@ -0,0 +1,110 @@
+<script>
+  import Dropdown from "$lib/Components/Dropdown/index.svelte"
+  import Modal from "$lib/Modal/index.svelte"
+  import TextArrayInput from "$lib/Components/TextArrayInput/index.svelte"
+  import Button from "$lib/Components/Button/index.svelte"
+  import { function_builder_manager } from "$lib/Components/FunctionInput/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/src/lib/Components/FunctionInput/Node/helpers/Field/index.svelte

@@ -0,0 +1,109 @@
+<script>
+  // import Button from "$lib/Components/Button/index.svelte"
+  // import Checkbox from "$lib/Components/Checkbox/index.svelte"
+  // import FileInput from "$lib/Components/FileInput/index.svelte"
+  // import CronInput from "$lib/Components/CronInput/index.svelte"
+  // import ColorInput from "$lib/Components/ColorInput/index.svelte"
+  // import TextInput from "$lib/Components/TextInput/index.svelte"
+  // import IconInput from "$lib/Components/IconInput/index.svelte"
+  // import TimeInput from "$lib/Components/TimeInput/index.svelte"
+  // import InlineDropArea from "../InlineDropArea/index.svelte"
+  // import DefinedTargetInput from "../DefinedTargetInput/index.svelte"
+  // import Node from "$lib/Components/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}