sveltekit-ui 1.1.16 → 1.1.17

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

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

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