sveltekit-ui 1.0.0

package/dist/Components/DataTypeInput/index.svelte.js

@@ -0,0 +1,568 @@
+import { node_types, json_to_data_type, deep_copy } from "../../client/index.js"
+import { create_popover_manager } from "../Popover/index.svelte.js"
+import { create_button_manager } from "../Button/index.svelte.js"
+import { create_text_input_manager } from "../TextInput/index.svelte.js"
+import { create_breadcrumbs_manager } from "../Breadcrumbs/index.svelte.js"
+import { create_dropdown_manager } from "../Dropdown/index.svelte.js"
+import { create_unique_id, set_closurable } from "../../client/index.js"
+
+export function create_data_type_input_manager(config) {
+  const id = create_unique_id(null, 20)
+
+  let label = $state(null)
+  let initial_val = $state(null)
+  let val = $state(null)
+  let property_type_options = $state(null)
+  let type_option_buttons = $state(null)
+  let breadcrumbs_manager = $state(null)
+  let popover_manager = $state(null)
+  let search_text_input_manager = $state(null)
+  let type_options_dropdown_manager = $state(null)
+  let items_type_options_dropdown_manager = $state(null)
+  let property_key_to_add_text_manager = $state(null)
+  let property_key_to_add_finish_button_manager = $state(null)
+  let edit_items_type_button_manager = $state(null)
+  let clear_breadcrumbs_button_manager = $state(null)
+  let guess_from_variables_button_manager = $state(null)
+  let finish_button_manager = $state(null)
+  let table_id_for_foreign_row_text_input_manager = $state(null)
+  let property_key_table_id_for_foreign_row_text_input_manager = $state(null)
+  let table_options = $state(null)
+
+  let data_sample = $derived(set_closurable(config?.data_sample, null))
+
+  let val_at_path = $derived(get_val_at_path())
+  let type_options = $derived(
+    Object.entries(node_types)
+      .filter(([key, value]) => {
+        if (search_text_input_manager?.val && typeof search_text_input_manager?.val === "string") {
+          return (
+            value?.kind === "literal" &&
+            value?.name?.toLowerCase().includes(search_text_input_manager?.val?.toLowerCase())
+          )
+        }
+        return value?.kind === "literal"
+      })
+      .map(([key, value]) => ({ key, name: value?.name }))
+  )
+  let type_display_name = $derived(get_type_display_name(val ?? null))
+
+  function set_type_option_buttons() {
+    let type_option_buttons_loc = []
+    if (Array.isArray(type_options) && type_options?.length > 0) {
+      for (let type_option of type_options) {
+        let button_manager = create_button_manager({
+          min_height: 14,
+          mt: 0.5,
+          mb: 0.5,
+          ml: 0.5,
+          mr: 0.5,
+          type: "outlined",
+          on_click: () => {
+            set_data_type(type_option?.key)
+            search_text_input_manager?.set_val(null)
+          },
+        })
+        type_option_buttons_loc.push({
+          key: type_option?.key,
+          name: type_option?.name,
+          button_manager: button_manager,
+        })
+      }
+    }
+    type_option_buttons = type_option_buttons_loc
+  }
+
+  function get_val_at_path() {
+    let val_at_path_loc = deep_copy(val)
+    if (Array.isArray(breadcrumbs_manager?.val) && breadcrumbs_manager?.val?.length > 0) {
+      for (let i = 0; i < breadcrumbs_manager?.val?.length; i++) {
+        if (["array_uniform_literal", "object_uniform_literal"].includes(val_at_path_loc?.type)) {
+          val_at_path_loc = val_at_path_loc.items
+        } else {
+          val_at_path_loc = val_at_path_loc.properties[breadcrumbs_manager?.val?.[i]]
+        }
+      }
+    }
+    return val_at_path_loc
+  }
+
+  function set_property_type_options() {
+    let property_type_options_loc = {}
+    for (let property_key of Object.keys(val_at_path?.properties || {}).sort(
+      (a, b) => val_at_path?.properties?.[a]?.display_order - val_at_path.properties?.[b]?.display_order
+    )) {
+      let edit_popover_manager = $state(null)
+      let edit_popover_trigger_button_manager = $state(null)
+      edit_popover_manager = create_popover_manager({
+        min_width: 200,
+        target_width: 200,
+        min_height: 180,
+        target_height: 200,
+        type: "dropdown",
+        header: "Edit Property",
+        anchor_id: () => `button_${edit_popover_trigger_button_manager?.id}`,
+      })
+      edit_popover_trigger_button_manager = create_button_manager({
+        type: "soft",
+        support_icon: "edit",
+        min_height: 2.4,
+        border_radius: 0.5,
+        is_icon_shimmyable: true,
+        is_uniform: true,
+        popover_target: () => `popover_${edit_popover_manager?.id}`,
+      })
+      property_type_options_loc[property_key] = {
+        key: property_key,
+        type_options_dropdown_manager: create_dropdown_manager({
+          button_type: "outlined",
+          is_button_compressed: true,
+          is_set_null_button: true,
+          val: val_at_path?.properties?.[property_key]?.type,
+          options: type_options,
+          on_item_click: (input) => set_key_data_type(input?.key, null, property_key),
+        }),
+        edit_popover_manager: edit_popover_manager,
+        edit_popover_trigger_button_manager: edit_popover_trigger_button_manager,
+        to_breadcrumbs_button_manager: create_button_manager({
+          type: "soft",
+          text: "Edit",
+          text_align: "left",
+          support_icon: "arrow_tailed",
+          on_click: () => {
+            edit_popover_manager.close()
+            breadcrumbs_manager?.set_val([...breadcrumbs_manager?.val, property_key])
+            handle_path_change()
+          },
+        }),
+        shift_up_button_manager: create_button_manager({
+          type: "soft",
+          text: "Shift Up",
+          text_align: "left",
+          support_icon: "arrow_tailed",
+          icon_deg: 270,
+          on_click: () => shift_object_property(property_key, -1),
+        }),
+        shift_down_button_manager: create_button_manager({
+          type: "soft",
+          text: "Shift Down",
+          text_align: "left",
+          support_icon: "arrow_tailed",
+          icon_deg: 90,
+          on_click: () => shift_object_property(property_key, 1),
+        }),
+        delete_button_manager: create_button_manager({
+          type: "soft",
+          text: "Delete",
+          text_align: "left",
+          support_icon: "trashcan",
+          on_click: () => delete_object_property(property_key),
+        }),
+      }
+    }
+    property_type_options = property_type_options_loc
+  }
+
+  function get_type_display_name(val) {
+    if (!val?.type) {
+      return null
+    } else {
+      let display_name = ""
+      if (val?.type == "array_literal") {
+        display_name = "Array"
+        if (val?.items?.type) {
+          let items_name = ""
+          if (Array.isArray(val?.items)) {
+            for (let item of val?.items) {
+              items_name += get_type_display_name(item)
+            }
+          }
+          display_name = `[${items_name}]`
+        }
+      } else if (val?.type == "array_uniform_literal") {
+        display_name = "Array Uniform"
+        if (val?.items?.type) {
+          display_name = "[" + get_type_display_name(val?.items) + "]"
+        }
+      } else if (val?.type == "object_literal") {
+        display_name = "Object"
+        if (Object.keys(val?.properties || {})?.length > 0) {
+          let property_types = []
+          for (let key of Object.keys(val?.properties || {})) {
+            property_types.push(`${key}: ${get_type_display_name(val?.properties?.[key])}`)
+          }
+          display_name = `{${property_types.join(", ")}}`
+        }
+      } else if (val?.type == "object_uniform_literal") {
+        display_name = "Object Uniform"
+        if (val?.items?.type) {
+          display_name = "{[key]:" + get_type_display_name(val?.items) + "}"
+        }
+      } else {
+        display_name = node_types?.[val?.type]?.name
+      }
+      return display_name
+    }
+  }
+
+  function set_items_data_type(type_key, breadcrumbs_input = null) {
+    const breadcrumbs_to_use = Array.isArray(breadcrumbs_input)
+      ? breadcrumbs_input
+      : [...(Array.isArray(breadcrumbs_manager?.val) ? breadcrumbs_manager?.val : []), "items"]
+    items_type_options_dropdown_manager?.set_val(type_key)
+    let val_at_path_loc = {
+      type: type_key,
+      attributes: {},
+      ...(type_key === "object_literal" ? { properties: {} } : {}),
+      ...(type_key === "array_literal" ? { items: [] } : {}),
+      ...(["array_uniform_literal", "object_uniform_literal"].includes(type_key) ? { items: {} } : {}),
+    }
+    val = set_structure_at_path(val, val_at_path_loc, breadcrumbs_to_use)
+  }
+
+  function set_key_data_type(type_key, breadcrumbs_input = null, key) {
+    const breadcrumbs_to_use = Array.isArray(breadcrumbs_input)
+      ? breadcrumbs_input
+      : [...(Array.isArray(breadcrumbs_manager?.val) ? breadcrumbs_manager?.val : []), key]
+    items_type_options_dropdown_manager?.set_val(type_key)
+    let val_at_path_loc = {
+      type: type_key,
+      attributes: {},
+      ...(type_key === "object_literal" ? { properties: {} } : {}),
+      ...(type_key === "array_literal" ? { items: [] } : {}),
+      ...(["array_uniform_literal", "object_uniform_literal"].includes(type_key) ? { items: {} } : {}),
+    }
+    val = set_structure_at_path(val, val_at_path_loc, breadcrumbs_to_use)
+    property_type_options?.[key]?.type_options_dropdown_manager?.set_val(type_key)
+  }
+
+  function set_data_type(type_key, breadcrumbs_input = null) {
+    const breadcrumbs_to_use = Array.isArray(breadcrumbs_input)
+      ? breadcrumbs_input
+      : Array.isArray(breadcrumbs_manager?.val)
+      ? breadcrumbs_manager?.val
+      : []
+    type_options_dropdown_manager?.set_val(type_key)
+    items_type_options_dropdown_manager?.set_val(null)
+    let val_at_path_loc = {
+      type: type_key,
+      attributes: {},
+      ...(type_key === "object_literal" ? { properties: {} } : {}),
+      ...(type_key === "array_literal" ? { items: [] } : {}),
+      ...(["array_uniform_literal", "object_uniform_literal"].includes(type_key) ? { items: {} } : {}),
+    }
+    if (type_key == "object_literal") {
+      set_property_type_options()
+    }
+    val = set_structure_at_path(val, val_at_path_loc, breadcrumbs_to_use)
+  }
+
+  function set_structure_at_path(iter_structure, value, remaining_path) {
+    if (!Array.isArray(remaining_path) || remaining_path?.length == 0) {
+      return value
+    }
+    const [first, ...rest_of_path] = remaining_path
+    if (["array_uniform_literal", "object_uniform_literal"].includes(iter_structure?.type)) {
+      if (remaining_path?.length == 1) {
+        iter_structure.items = value
+      } else {
+        iter_structure.items = set_structure_at_path(iter_structure.items, value, rest_of_path)
+      }
+    } else {
+      if (remaining_path?.length == 1) {
+        iter_structure.properties[first] = value
+      } else {
+        iter_structure.properties[first] = set_structure_at_path(
+          iter_structure?.properties?.[first],
+          value,
+          rest_of_path
+        )
+      }
+    }
+    items_type_options_dropdown_manager?.set_val(val_at_path?.items?.type)
+    return iter_structure
+  }
+
+  function add_object_property(key = null) {
+    if (key == null) {
+      key = property_key_to_add_text_manager?.val
+    }
+    if (!key) {
+      return
+    }
+    const clean_key_to_add = key
+      .toLowerCase()
+      .replace(/[^a-z0-9]/g, "_")
+      .replace(/_+/g, "_")
+      .replace(/^_+|_+$/g, "")
+    let val_at_path_loc = val_at_path
+    val_at_path_loc.properties[clean_key_to_add] = {
+      display_order: Object.keys(val_at_path_loc.properties || {})?.length,
+    }
+    const new_val = set_structure_at_path(val, val_at_path_loc, breadcrumbs_manager?.val)
+    val = new_val
+    property_key_to_add_text_manager?.set_val(null)
+    set_property_type_options()
+  }
+
+  function delete_object_property(property_key) {
+    let val_at_path_loc = val_at_path
+    const { [property_key]: _, ...new_properties } = val_at_path_loc.properties
+    val_at_path_loc.properties = new_properties
+    property_type_options[property_key].edit_popover_manager.close()
+    val = set_structure_at_path(val, val_at_path_loc, breadcrumbs_manager?.val)
+    set_property_type_options()
+  }
+
+  function shift_object_property(property_key, direction) {
+    function reset_display_order(properties) {
+      const keys = Object.keys(properties).sort((a, b) => {
+        const order_a = properties[a].display_order || 0
+        const order_b = properties[b].display_order || 0
+        return order_a - order_b
+      })
+      keys.forEach((key, index) => {
+        properties[key].display_order = index
+      })
+    }
+    const properties = val_at_path?.properties
+    let display_order = properties?.[property_key]?.display_order
+    if (display_order == null) {
+      reset_display_order(properties)
+      display_order = properties?.[property_key]?.display_order
+    }
+    for (let key in properties) {
+      if (properties?.[key]?.display_order === display_order + direction) {
+        properties[key].display_order = display_order
+        properties[property_key].display_order += direction
+        break
+      }
+    }
+    reset_display_order(properties)
+    let val_at_path_loc = val_at_path
+    val_at_path_loc.properties = properties
+    val = set_structure_at_path(val, val_at_path_loc, breadcrumbs_manager?.val)
+    property_type_options[property_key].edit_popover_manager.close()
+    set_property_type_options()
+  }
+
+  function finish() {
+    popover_manager.close()
+    if (typeof config?.on_finish == "function") {
+      config?.on_finish(val)
+    }
+  }
+
+  function guess_from_data(data) {
+    val = json_to_data_type(data)
+    set_property_type_options()
+  }
+
+  function handle_path_change() {
+    type_options_dropdown_manager?.set_val(val_at_path?.type)
+    items_type_options_dropdown_manager?.set_val(val_at_path?.items?.type)
+    table_id_for_foreign_row_text_input_manager.set_val(val_at_path?.attributes?.table_id ?? null)
+    property_key_table_id_for_foreign_row_text_input_manager.set_val(
+      val_at_path?.attributes?.property_key_table_id ?? null
+    )
+    set_property_type_options()
+  }
+
+  function guess_from_variables() {
+    guess_from_data(data_sample)
+  }
+
+  function init(config) {
+    label = config?.label ?? "Data Type"
+    initial_val = config?.val ?? null
+    val = config?.val
+    popover_manager = create_popover_manager({
+      type: "center",
+      min_width: 280,
+      target_width: 600,
+      min_height: 280,
+      target_height: 600,
+      header: "Data Type Builder",
+    })
+    search_text_input_manager = create_text_input_manager({
+      type: "search",
+      autocomplete: "off",
+      placeholder: "search",
+      mb: 0.5,
+    })
+    type_options_dropdown_manager = create_dropdown_manager({
+      button_type: "outlined",
+      is_botton_compressed: true,
+      is_set_null_button: true,
+      val: val_at_path?.type,
+      options: type_options,
+      on_item_click: (input) => set_data_type(input?.key),
+    })
+    items_type_options_dropdown_manager = create_dropdown_manager({
+      button_type: "outlined",
+      is_botton_compressed: true,
+      is_set_null_button: true,
+      val: val_at_path?.items?.type,
+      options: type_options,
+      on_item_click: (input) => set_items_data_type(input?.key),
+    })
+    breadcrumbs_manager = create_breadcrumbs_manager({
+      val: config?.breadcrumbs ?? [],
+      on_change: () => handle_path_change(),
+    })
+    property_key_to_add_text_manager = create_text_input_manager({
+      label: "Property Key",
+      placeholder: "some_identifier",
+    })
+    property_key_to_add_finish_button_manager = create_button_manager({
+      is_compressed: true,
+      text: "Add Property",
+      is_disabled: () => !property_key_to_add_text_manager?.val,
+      on_click: () => add_object_property(),
+    })
+    edit_items_type_button_manager = create_button_manager({
+      type: "outlined",
+      text: "Edit Items Type",
+      text_align: "left",
+      support_icon: "arrow_tailed",
+      on_click: () => {
+        breadcrumbs_manager?.set_val([
+          ...(Array.isArray(breadcrumbs_manager?.val) ? breadcrumbs_manager?.val : []),
+          "items",
+        ])
+        handle_path_change()
+      },
+    })
+    clear_breadcrumbs_button_manager = create_button_manager({
+      type: "outlined",
+      h: 11,
+      l: 3,
+      c: 1,
+      is_uniform: true,
+      support_icon: "x",
+      on_click: () => set_data_type(null),
+    })
+    finish_button_manager = create_button_manager({
+      text: "Finish",
+      on_click: () => finish(),
+    })
+    guess_from_variables_button_manager = create_button_manager({
+      type: "outlined",
+      text: "Guess from Data Sample",
+      is_compressed: true,
+      on_click: () => guess_from_variables(),
+    })
+    table_options = config?.table_options
+    table_id_for_foreign_row_text_input_manager = create_dropdown_manager({
+      label: "Table ID for Foreign Row",
+      is_button_compressed: true,
+      options: table_options,
+      on_item_click: (input) => {
+        let val_at_path_loc = deep_copy(val_at_path)
+        val_at_path_loc.attributes.table_id = input?.key
+        val = set_structure_at_path(val, val_at_path_loc, breadcrumbs_manager?.val)
+      },
+    })
+    property_key_table_id_for_foreign_row_text_input_manager = create_dropdown_manager({
+      label: "Property Key Table ID for Foreign Row",
+      is_button_compressed: true,
+      options: table_options,
+      on_item_click: (input) => {
+        let val_at_path_loc = deep_copy(val_at_path)
+        val_at_path_loc.attributes.property_key_table_id = input?.key
+        val = set_structure_at_path(val, val_at_path_loc, breadcrumbs_manager?.val)
+      },
+    })
+
+    set_type_option_buttons()
+    set_property_type_options()
+  }
+
+  init(config)
+
+  return {
+    id,
+    get label() {
+      return label
+    },
+    get initial_val() {
+      return initial_val
+    },
+    get val() {
+      return val
+    },
+    get val() {
+      return val
+    },
+    get popover_manager() {
+      return popover_manager
+    },
+    get search_text_input_manager() {
+      return search_text_input_manager
+    },
+    get type_option_buttons() {
+      return type_option_buttons
+    },
+    get breadcrumbs_manager() {
+      return breadcrumbs_manager
+    },
+    get items_type_options_dropdown_manager() {
+      return items_type_options_dropdown_manager
+    },
+    get property_type_options() {
+      return property_type_options
+    },
+    get type_options_dropdown_manager() {
+      return type_options_dropdown_manager
+    },
+    get property_key_to_add_text_manager() {
+      return property_key_to_add_text_manager
+    },
+    get property_key_to_add_finish_button_manager() {
+      return property_key_to_add_finish_button_manager
+    },
+    get edit_items_type_button_manager() {
+      return edit_items_type_button_manager
+    },
+    get finish_button_manager() {
+      return finish_button_manager
+    },
+    get table_id_for_foreign_row_text_input_manager() {
+      return table_id_for_foreign_row_text_input_manager
+    },
+    get property_key_table_id_for_foreign_row_text_input_manager() {
+      return property_key_table_id_for_foreign_row_text_input_manager
+    },
+    get table_options() {
+      return table_options
+    },
+    get clear_breadcrumbs_button_manager() {
+      return clear_breadcrumbs_button_manager
+    },
+    get guess_from_variables_button_manager() {
+      return guess_from_variables_button_manager
+    },
+    get data_sample() {
+      return data_sample
+    },
+    get type_options() {
+      return type_options
+    },
+    get type_display_name() {
+      return type_display_name
+    },
+    get val_at_path() {
+      return val_at_path
+    },
+    get val() {
+      return val
+    },
+    set_data_type,
+    add_object_property,
+    delete_object_property,
+    shift_object_property,
+    finish,
+    guess_from_data,
+    guess_from_variables,
+  }
+}

package/dist/Components/Dropdown/index.svelte

@@ -0,0 +1,116 @@
+<script>
+  import Popover from "../Popover/index.svelte"
+  import Icon from "../Icon/index.svelte"
+  import Button from "../Button/index.svelte"
+  import TextInput from "../TextInput/index.svelte"
+  import Spacer from "../Spacer/index.svelte"
+  import HorizScrollBox from "../HorizScrollBox/index.svelte"
+  import ArrowToggle from "../ArrowToggle/index.svelte"
+  import LoadingWheel from "../LoadingWheel/index.svelte"
+
+  let  { manager } = $props()
+
+</script>
+
+{#if manager?.type == 'dropdown' || manager?.is_collapsed}
+  <div>
+    {#if manager?.label || manager?.error_message}
+      <div>
+        {#if manager?.label}
+          <p class="label">{manager?.label}:</p>
+        {/if}
+        {#if manager?.error_message}
+          <p class="error_text">{manager?.error_message}</p>
+        {/if}
+      </div>
+    {/if}
+    {#if !manager?.is_hide_button}
+      <Button manager={manager?.toggle_button_manager}>
+        {#snippet content()}
+          <div style="display: flex; align-items: center; gap: .2rem; justify-content: space-between;">
+            <p style="{manager?.selected_font_size ? `font-size: ${manager?.selected_font_size}rem;` : ""}">{manager?.toggle_button_text}</p>
+            {#if manager?.is_show_arrow}
+              <ArrowToggle is_open={manager?.popover_manager?.is_show} />
+            {/if}
+          </div>
+        {/snippet}
+      </Button>
+    {/if}
+    <Popover manager={manager?.popover_manager}>
+      {#snippet content(toggle_popover)}
+        <div id={`dropdown_popover_container_${manager?.id}`}>
+          {#if manager?.is_searchable}
+          <div style="position: relative; display: inline-block; width: 100%;">
+            <div>
+              <TextInput manager={manager?.search_text_input_manager} />
+            </div>
+            {#if Array.isArray(manager?.search_requests_is_loading) && manager?.search_requests_is_loading.length}
+              <div style="position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%); pointer-events: none; width: 2rem; aspect-ratio: 1;">
+                <LoadingWheel />
+              </div>
+            {/if}
+          </div>
+          {/if}
+          {#if manager?.is_set_null_button}
+            <Button manager={manager?.clear_button_manager} />
+          {/if}
+          {#if Array.isArray(manager?.filtered_button_managers) && manager?.filtered_button_managers.length > 0}
+            {#each manager?.filtered_button_managers as filtered_button_manager}
+              <Button manager={filtered_button_manager} />
+            {/each}
+          {/if}
+        </div>
+      {/snippet}
+    </Popover>
+  </div>
+{:else if manager?.type == "horiz_selector"}
+  <div class="horiz_container">
+    {#if manager?.header || manager?.header_icon}
+      <div class="horiz_header_container" style="min-width: {manager?.min_header_width}rem;">
+        {#if manager?.header_icon}
+          <Icon manager={manager?.header_icon_manager} />
+        {/if}
+        {#if manager?.header}
+        <h3 class="horiz_header" style="color: {manager?.is_disabled ? 'var(--g12-t)' : 'var(--g4-t)'}">
+          {manager?.header}
+        </h3>
+        {/if}
+      </div>
+      <Spacer is_vert={true} mr={0.5} color={manager?.spacer_color} />
+    {/if}
+    <HorizScrollBox>
+      {#if manager?.is_set_null_button}
+        <Button manager={manager?.clear_button_manager} />
+      {/if}
+      {#if Array.isArray(manager?.filtered_button_managers) && manager?.filtered_button_managers.length > 0}
+        {#each manager?.filtered_button_managers as filtered_button_manager}
+          <Button manager={filtered_button_manager} />
+        {/each}
+      {/if}
+    </HorizScrollBox>
+  </div>
+{/if}
+
+<style>
+  .error_text {
+    font-size: 1.2rem;
+    color: oklch(var(--l5-t) var(--c7) var(--h1));
+    line-height: 1.2rem;
+    line-height: 1.2rem;
+  }
+  .horiz_container {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    margin: 0 0.5rem;
+  }
+  .horiz_header_container {
+    display: flex;
+    align-items: center;
+  }
+  .horiz_header {
+    font-size: 1.6rem;
+    margin: 0;
+    margin-right: 1rem;
+  }
+</style>