sveltekit-ui 1.1.74 → 1.1.76

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

@@ -1,594 +0,0 @@
-import { create_unique_id, copy_to_clipboard, csv_to_json, set_closurable } from "$lib/client/index.js"
-import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
-import { create_file_input_manager } from "$lib/Components/FileInput/index.svelte.js"
-import { create_popover_manager } from "$lib/Components/Popover/index.svelte.js"
-import { create_text_input_manager } from "$lib/Components/TextInput/index.svelte.js"
-import { create_dropdown_manager } from "$lib/Components/Dropdown/index.svelte.js"
-import { create_checkbox_manager } from "$lib/Components/Checkbox/index.svelte.js"
-
-export function create_json_manager(config) {
-  const id = create_unique_id(null, 20)
-
-  let popover_manager = $state(null)
-  let popover_toggle_button_manager = $state(null)
-  let finish_button_manager = $state(null)
-  let json_prepped = $state(null)
-  let collapse_all_button_manager = $state(null)
-  let expand_all_button_manager = $state(null)
-  let copy_json_button_manager = $state(null)
-  let file_input_manager = $state(null)
-  let data_text_input_manager = $state(null)
-  let data_upload_popover_manager = $state(null)
-  let finish_data_upload_button_manager = $state(null)
-  let edit_json_button_manager = $state(null)
-
-  let is_popover = $derived(set_closurable(config?.is_popover, false))
-  let is_edit_mode = $derived(set_closurable(config?.is_edit_mode, false))
-  let is_show_buttons = $derived(set_closurable(config?.is_show_buttons, false))
-  let label = $derived(set_closurable(config?.label, null))
-  let val = $derived(get_val_from_json_prepped(json_prepped))
-
-  function get_val_from_json_prepped(input) {
-    if (input?.type == "object") {
-      let obj_val = {}
-      if (input?.val && typeof input?.val == "object" && !Array.isArray(input?.val)) {
-        for (let [key, val] of Object.entries(input?.val)) {
-          obj_val[key] = get_val_from_json_prepped(val?.json_prepped)
-        }
-      }
-      return obj_val
-    } else if (input?.type == "array") {
-      let array_val = []
-      if (Array.isArray(input?.val)) {
-        for (let item of input?.val) {
-          array_val.push(get_val_from_json_prepped(item?.json_prepped))
-        }
-      }
-      return array_val
-    } else if (input?.type == "null") {
-      return null
-    } else if (input?.type == "string") {
-      return input?.val
-    } else if (input?.type == "number") {
-      return input?.val
-    } else if (input?.type == "boolean") {
-      return input?.val
-    }
-  }
-
-  function get_replace_key_in_object(obj, path_remaining, old_key, new_key) {
-    let return_obj = { ...obj }
-    if (Array.isArray(path_remaining) && path_remaining.length > 0) {
-      const current_key = path_remaining[0]
-      if (return_obj[current_key]) {
-        return_obj[current_key] = get_replace_key_in_object(
-          return_obj[current_key],
-          path_remaining.slice(1),
-          old_key,
-          new_key
-        )
-      }
-    } else if (Array.isArray(path_remaining) && path_remaining.length === 0) {
-      let new_obj = {}
-      for (const key in return_obj) {
-        if (key === old_key) {
-          new_obj[new_key] = return_obj[old_key]
-        } else {
-          new_obj[key] = return_obj[key]
-        }
-      }
-      return_obj = new_obj
-    }
-    return return_obj
-  }
-
-  function delete_key_at_path(obj, path, key) {
-    if (!obj || typeof obj !== "object" || !Array.isArray(path) || typeof key !== "string") {
-      return obj
-    }
-    const new_obj = JSON.parse(JSON.stringify(obj))
-    let current = new_obj
-    for (let i = 0; i < path.length; i++) {
-      if (current[path[i]] === undefined) {
-        return new_obj
-      }
-      current = current[path[i]]
-    }
-    if (current && typeof current === "object") {
-      delete current[key]
-    }
-    return new_obj
-  }
-
-  function delete_item_at_path(obj, path) {
-    if (!obj || typeof obj !== "object" || !Array.isArray(path)) {
-      return obj
-    }
-    const new_obj = JSON.parse(JSON.stringify(obj))
-    let current = new_obj
-    for (let i = 0; i < path.length - 1; i++) {
-      if (current[path[i]] === undefined) {
-        return new_obj
-      }
-      current = current[path[i]]
-    }
-    const last_path = path[path.length - 1]
-    if (Array.isArray(current) && typeof last_path === "number") {
-      current.splice(last_path, 1)
-    } else if (Array.isArray(current[last_path])) {
-      current[last_path].splice(last_path, 1)
-    }
-    return new_obj
-  }
-
-  function get_key_manager(key, path, json_prepped_loc, indentation, key_val = null) {
-    let edit_key_popover_manager = $state(
-      create_popover_manager({
-        header: "Edit Key",
-        target_height: 400,
-        target_width: 400,
-      })
-    )
-    let edit_key_text_input_manager = $state(
-      create_text_input_manager({
-        placeholder: "key",
-        val: key,
-      })
-    )
-    let edit_key_button_manager = $state(
-      create_button_manager({
-        type: "soft",
-        support_icon: "edit",
-        is_uniform: true,
-        min_height: 1.6,
-        icon_size: 1.2,
-        icon_sw: 40,
-        l: 3,
-        border_radius: 0.5,
-        popover_target: () => `popover_${edit_key_popover_manager?.id}`,
-      })
-    )
-    let edit_key_delete_button_manager = $state(
-      create_button_manager({
-        text: "Delete Key",
-        color: "var(--error-t)",
-        is_compressed: true,
-        mt: 1,
-        on_click: () => {
-          const current_val = get_val_from_json_prepped(json_prepped)
-          const new_val = delete_key_at_path(current_val, path, key)
-          edit_key_popover_manager.close()
-          setTimeout(() => {
-            json_prepped = get_json_prepped(new_val, 0, indentation)
-          }, 500)
-        },
-      })
-    )
-    let edit_key_finish_button_manager = $state(
-      create_button_manager({
-        text: "Finish",
-        on_click: () => {
-          const current_val = get_val_from_json_prepped(json_prepped)
-          const new_val = get_replace_key_in_object(current_val, path, key, edit_key_text_input_manager?.val)
-          setTimeout(() => {
-            json_prepped = get_json_prepped(new_val, 0, indentation)
-          }, 500)
-        },
-      })
-    )
-    return {
-      edit_key_popover_manager: edit_key_popover_manager,
-      edit_key_button_manager: edit_key_button_manager,
-      edit_key_text_input_manager: edit_key_text_input_manager,
-      edit_key_delete_button_manager: edit_key_delete_button_manager,
-      edit_key_finish_button_manager: edit_key_finish_button_manager,
-      json_prepped: get_json_prepped(key_val, json_prepped_loc?.nested_levels, indentation, [
-        ...(Array.isArray(path) ? path : []),
-        key,
-      ]),
-    }
-  }
-
-  function get_json_prepped(input, nested_levels = null, indentation_input, path = [], is_array_item = false) {
-    const indentation = Number.isInteger(indentation_input) ? indentation_input : 1
-    let json_prepped_loc = $state(null)
-    let collapse_button_manager = $state(null)
-    let edit_item_popover_manager = $state(null)
-    let edit_item_button_manager = $state(null)
-    let edit_item_type_dropdown_manager = $state(null)
-    let edit_item_number_text_input_manager = $state(null)
-    let edit_item_string_text_input_manager = $state(null)
-    let edit_item_boolean_checkbox_manager = $state(null)
-    let add_item_button_manager = $state(null)
-    let delete_item_button_manager = $state(null)
-    let finish_edit_item_button_manager = $state(null)
-    function toggle_is_collapsed() {
-      json_prepped_loc.is_collapsed = !json_prepped_loc?.is_collapsed
-    }
-    // collapse_button_manager = create_button_manager({ notable when used in TableAdvanced with many rows my button takes up way too much memory so this helps to replace with basic one
-    //   type: "outlined",
-    //   is_uniform: true,
-    //   support_icon: () => (json_prepped_loc?.is_collapsed ? "plus" : "minus"),
-    //   min_height: 1.6,
-    //   mt: 0.2,
-    //   icon_size: 0.8,
-    //   icon_sw: 60,
-    //   l: 3,
-    //   border_radius: 0.5,
-    //   on_click: () => (json_prepped_loc.is_collapsed = !json_prepped_loc?.is_collapsed),
-    // })
-    if (is_edit_mode) {
-      edit_item_popover_manager = create_popover_manager({
-        type: "center",
-        header: "Edit Item",
-      })
-      edit_item_button_manager = create_button_manager({
-        type: "soft",
-        support_icon: "edit",
-        is_uniform: true,
-        min_height: 1.6,
-        icon_size: 1.2,
-        icon_sw: 40,
-        l: 3,
-        border_radius: 0.5,
-        popover_target: () => `popover_${edit_item_popover_manager?.id}`,
-      })
-      edit_item_type_dropdown_manager = create_dropdown_manager({
-        mb: 1,
-        is_button_compressed: true,
-        options: [
-          { key: "object", name: "Object" },
-          { key: "array", name: "Array" },
-          { key: "string", name: "String" },
-          { key: "number", name: "Number" },
-          { key: "boolean", name: "Boolean" },
-          { key: "null", name: "Null" },
-        ],
-      })
-      edit_item_number_text_input_manager = create_text_input_manager({
-        type: "number",
-      })
-      edit_item_string_text_input_manager = create_text_input_manager({
-        type: "text_area",
-      })
-      edit_item_boolean_checkbox_manager = create_checkbox_manager({
-        type: "toggle",
-      })
-      delete_item_button_manager = create_button_manager({
-        color: "var(--error-t)",
-        text: "Delete List Item",
-        is_compressed: true,
-        mt: 1,
-        on_click: () => {
-          const current_val = get_val_from_json_prepped(json_prepped)
-          const new_val = delete_item_at_path(current_val, path)
-          edit_item_popover_manager.close()
-          setTimeout(() => {
-            json_prepped = get_json_prepped(new_val, 0, indentation)
-          }, 500)
-        },
-      })
-      add_item_button_manager = create_button_manager({
-        type: "outlined",
-        text: "Add Item",
-        support_icon: "plus",
-        is_compressed: true,
-        min_height: 1.6,
-        pt: 0.2,
-        pb: 0.2,
-        pl: 0.5,
-        pr: 0.5,
-        font_size: 1.4,
-        icon_size: 1.2,
-        icon_sw: 50,
-        l: 3,
-        border_radius: 0.5,
-        on_click: () => {
-          if (json_prepped_loc?.type == "object") {
-            let key = `tbd_${create_unique_id(null, 4)}`
-            let key_manager = get_key_manager(key, path, json_prepped_loc, config?.indentation)
-            json_prepped_loc.val[key] = key_manager
-          } else if (json_prepped_loc?.type == "array") {
-            json_prepped_loc.val = Array.isArray(json_prepped_loc.val) ? json_prepped_loc.val : []
-            json_prepped_loc.val.push({
-              json_prepped: get_json_prepped(
-                null,
-                json_prepped_loc?.nested_levels,
-                indentation,
-                [...path, json_prepped_loc.val.length - 1],
-                true
-              ),
-            })
-          }
-        },
-      })
-      finish_edit_item_button_manager = create_button_manager({
-        text: "Finish",
-        on_click: () => {
-          if (edit_item_type_dropdown_manager?.val == "object") {
-            json_prepped_loc.type = "object"
-            json_prepped_loc.val =
-              json_prepped_loc.val && typeof json_prepped_loc.val == "object" && !Array.isArray(json_prepped_loc.val)
-                ? json_prepped_loc.val
-                : {}
-          } else if (edit_item_type_dropdown_manager?.val == "array") {
-            json_prepped_loc.type = "array"
-            json_prepped_loc.val = Array.isArray(json_prepped_loc.val) ? json_prepped_loc.val : []
-          } else if (edit_item_type_dropdown_manager?.val == "null") {
-            json_prepped_loc.type = "null"
-            json_prepped_loc.val = null
-          } else if (edit_item_type_dropdown_manager?.val == "boolean") {
-            json_prepped_loc.type = "boolean"
-            json_prepped_loc.val = edit_item_boolean_checkbox_manager?.val
-          } else if (edit_item_type_dropdown_manager?.val == "number") {
-            json_prepped_loc.type = "number"
-            json_prepped_loc.val = edit_item_number_text_input_manager?.val
-          } else if (edit_item_type_dropdown_manager?.val == "string") {
-            json_prepped_loc.type = "string"
-            json_prepped_loc.val = edit_item_string_text_input_manager?.val
-          }
-          edit_item_popover_manager.close()
-        },
-      })
-    }
-    json_prepped_loc = {
-      type: "null",
-      is_collapsed: !!config?.is_collapsed,
-      is_array_item: is_array_item,
-      nested_levels: Number.isInteger(nested_levels) ? nested_levels + 1 : 0,
-      indentation: indentation,
-      collapse_button_manager: collapse_button_manager,
-      edit_item_popover_manager: edit_item_popover_manager,
-      edit_item_button_manager: edit_item_button_manager,
-      edit_item_type_dropdown_manager: edit_item_type_dropdown_manager,
-      edit_item_number_text_input_manager: edit_item_number_text_input_manager,
-      edit_item_string_text_input_manager: edit_item_string_text_input_manager,
-      edit_item_boolean_checkbox_manager: edit_item_boolean_checkbox_manager,
-      add_item_button_manager: add_item_button_manager,
-      delete_item_button_manager: delete_item_button_manager,
-      finish_edit_item_button_manager: finish_edit_item_button_manager,
-      val: null,
-      toggle_is_collapsed,
-    }
-    if (typeof input == "object" && input != null) {
-      if (Array.isArray(input)) {
-        json_prepped_loc.type = "array"
-        json_prepped_loc.val = []
-        for (let i = 0; i < input.length; i++) {
-          const test = get_json_prepped(input?.[i], json_prepped_loc?.nested_levels, indentation, [...path, i], true)
-          json_prepped_loc.val.push({
-            json_prepped: get_json_prepped(
-              input?.[i],
-              json_prepped_loc?.nested_levels,
-              indentation,
-              [...path, i],
-              true
-            ),
-          })
-        }
-      } else {
-        json_prepped_loc.type = "object"
-        json_prepped_loc.val = {}
-        for (let [key, val] of Object.entries(input)) {
-          let key_manager = get_key_manager(key, path, json_prepped_loc, config?.indentation, val)
-          json_prepped_loc.val[key] = key_manager
-        }
-      }
-    } else if (typeof input == "boolean") {
-      json_prepped_loc.type = "boolean"
-      json_prepped_loc.val = input
-      if (is_edit_mode) {
-        edit_item_boolean_checkbox_manager.set_val(input)
-      }
-    } else if (typeof input == "number") {
-      json_prepped_loc.type = "number"
-      json_prepped_loc.val = input
-      if (is_edit_mode) {
-        edit_item_number_text_input_manager.set_val(input)
-      }
-    } else if (typeof input == "string") {
-      json_prepped_loc.type = "string"
-      json_prepped_loc.val = input
-      if (is_edit_mode) {
-        edit_item_string_text_input_manager.set_val(input)
-      }
-    }
-    if (is_edit_mode) {
-      json_prepped_loc.edit_item_type_dropdown_manager.set_val(json_prepped_loc.type)
-    }
-    return json_prepped_loc
-  }
-
-  function set_collapse_all(is_collapse = true) {
-    function collapse_me_and_children(input) {
-      if (typeof input == "object" && input?.hasOwnProperty("is_collapsed")) {
-        input.is_collapsed = is_collapse
-      }
-      if (input?.type == "object" && Object.keys(input?.val || {}).length > 0) {
-        for (let key of Object.keys(input?.val)) {
-          input.val[key].json_prepped = collapse_me_and_children(input?.val?.[key]?.json_prepped)
-        }
-      } else if (input?.type == "array" && Array.isArray(input?.val)) {
-        for (let i = 0; i < input?.val?.length; i++) {
-          input.val[i].json_prepped = collapse_me_and_children(input?.val?.[i]?.json_prepped)
-        }
-      }
-      return input
-    }
-    json_prepped = collapse_me_and_children(json_prepped)
-  }
-
-  function set_val(input) {
-    let val_static = set_closurable(input)
-    if (typeof val_static === "string") {
-      val_static = val_static.trim()
-      if (
-        (val_static.startsWith("{") && val_static.endsWith("}")) ||
-        (val_static.startsWith("[") && val_static.endsWith("]"))
-      ) {
-        try {
-          val_static = JSON.parse(val_static)
-        } catch (e) {
-          console.log("invalid json string:", e)
-        }
-      }
-    }
-    json_prepped = get_json_prepped(val_static, 0, config?.indentation)
-  }
-
-  function init(config) {
-    set_val(config?.val)
-    collapse_all_button_manager = create_button_manager({
-      type: "outlined",
-      text: "Collapse All",
-      is_compressed: true,
-      on_click: () => set_collapse_all(true),
-    })
-    expand_all_button_manager = create_button_manager({
-      type: "outlined",
-      text: "Expand All",
-      is_compressed: true,
-      on_click: () => set_collapse_all(false),
-    })
-    copy_json_button_manager = create_button_manager({
-      type: "outlined",
-      text: "Copy Json",
-      is_compressed: true,
-      is_success_animation: true,
-      support_icon: "clipboard",
-      on_click: () => copy_to_clipboard(JSON.stringify(val)),
-    })
-    file_input_manager = create_file_input_manager({
-      select_file_button_text: "JSON or CSV Upload",
-      accept: ["application/json", "text/csv"],
-      is_multiselect: false,
-      is_drop_zone: false,
-      on_get_file: (input) => {
-        file_input_manager.clear_files()
-        const reader = new FileReader()
-        reader.readAsText(input)
-        reader.onload = function (event) {
-          const file_content = event.target.result
-          if (input.type === "application/json") {
-            set_val(JSON.parse(file_content))
-          } else if (input.type === "text/csv") {
-            set_val(csv_to_json(file_content))
-          }
-        }
-      },
-    })
-    data_upload_popover_manager = create_popover_manager({
-      min_width: 280,
-      target_width: 600,
-      min_height: 280,
-      target_height: 500,
-      type: "center",
-      header: "Data Upload",
-    })
-    edit_json_button_manager = create_button_manager({
-      type: "outlined",
-      text: "Edit Full Json",
-      is_compressed: true,
-      popover_target: () => `popover_${data_upload_popover_manager?.id}`,
-    })
-    data_text_input_manager = create_text_input_manager({
-      type: "text_area",
-      label: "Data Input",
-      rows: 15,
-      placeholder: '{"hello_world": true }',
-      max_length: 10000000000,
-      on_change: (input) => {
-        if (input && typeof input == "object") {
-          set_val(JSON.parse(JSON.stringify(input)))
-        } else {
-          set_val(null)
-        }
-      },
-    })
-    finish_data_upload_button_manager = create_button_manager({
-      text: "Finish",
-      on_click: () => {
-        set_val(data_text_input_manager?.val ? JSON.parse(data_text_input_manager?.val) : null)
-        data_upload_popover_manager.close()
-      },
-    })
-    popover_manager = create_popover_manager({
-      target_height: 700,
-      target_width: 700,
-      header: () => (is_edit_mode ? "Edit JSON" : "View JSON"),
-    })
-    popover_toggle_button_manager = create_button_manager({
-      type: "outlined",
-      is_compressed: true,
-      text: () => (is_edit_mode ? "Edit JSON" : "View JSON"),
-      popover_target: () => `popover_${popover_manager?.id}`,
-    })
-    finish_button_manager = create_button_manager({
-      text: "Finish",
-      on_click: () => {
-        if (typeof config?.on_finish == "function") {
-          config?.on_finish(val)
-        }
-        popover_manager.close()
-      },
-    })
-  }
-
-  init(config)
-
-  return {
-    id,
-    get val() {
-      return val
-    },
-    get label() {
-      return label
-    },
-    get popover_manager() {
-      return popover_manager
-    },
-    get popover_toggle_button_manager() {
-      return popover_toggle_button_manager
-    },
-    get is_popover() {
-      return is_popover
-    },
-    get json_prepped() {
-      return json_prepped
-    },
-    get file_input_manager() {
-      return file_input_manager
-    },
-    get data_upload_popover_manager() {
-      return data_upload_popover_manager
-    },
-    get edit_json_button_manager() {
-      return edit_json_button_manager
-    },
-    get data_text_input_manager() {
-      return data_text_input_manager
-    },
-    get collapse_all_button_manager() {
-      return collapse_all_button_manager
-    },
-    get expand_all_button_manager() {
-      return expand_all_button_manager
-    },
-    get copy_json_button_manager() {
-      return copy_json_button_manager
-    },
-    get is_show_buttons() {
-      return is_show_buttons
-    },
-    get is_edit_mode() {
-      return is_edit_mode
-    },
-    get finish_data_upload_button_manager() {
-      return finish_data_upload_button_manager
-    },
-    get finish_button_manager() {
-      return finish_button_manager
-    },
-    set_val,
-  }
-}

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

@@ -1,102 +0,0 @@
-<script>
-  import Tooltip from "$lib/Components/Tooltip/index.svelte"
-
-  let {
-    label = "label",
-    tooltip = null,
-    is_required = false,
-    is_disabled = false,
-    font_weight = 500,
-    font_size = 1.6,
-    color = "var(--g4-t)",
-    disabled_color = "var(--g8-t)",
-    ml = 0,
-    mr = 0,
-    mt = 0,
-    mb = 0,
-    heading_min_width = 20,
-    content_min_width = 30,
-    content_max_width = 50,
-    children,
-  } = $props()
-</script>
-
-<div
-  class="container"
-  style="margin-left: {ml}rem; margin-right: {mr}rem; margin-top: {mt}rem; margin-bottom: {mb}rem;"
->
-  <div class="attr_label">
-    <h4
-      class:required={is_required}
-      class:is_disabled
-      style="color: {color}; font-weight: {font_weight}; font-size: {font_size}rem; --disabled_color: {disabled_color};--heading_min_width: {heading_min_width}rem;"
-    >
-      {label}:
-    </h4>
-    {#if tooltip}
-      <Tooltip>
-        {#snippet tooltip_content()}
-          <p>{tooltip}</p>
-        {/snippet}
-        {#snippet target_content()}
-          <div class="info_tooltip_icon">i</div>
-        {/snippet}
-      </Tooltip>
-    {/if}
-  </div>
-  <div class="item" style="--content_min_width: {content_min_width}rem; --content_max_width: {content_max_width}rem;">
-    {#if children}
-      {@render children()}
-    {/if}
-  </div>
-</div>
-
-<style>
-  .container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex: 1;
-    flex-wrap: wrap;
-  }
-  .attr_label {
-    text-align: left;
-    margin-left: 0;
-    margin-right: 1rem;
-    font-size: 1.2rem;
-    line-height: 1.6rem;
-    font-weight: 600;
-    color: var(--g12-t);
-    min-width: var(--heading_min_width);
-    display: flex;
-    gap: 0.5rem;
-  }
-  .info_tooltip_icon {
-    box-shadow: 0 0 0 1px var(--g6-t);
-    color: var(--g6-t);
-    border-radius: 2rem;
-    width: 1.6rem;
-    height: 1.6rem;
-    display: grid;
-    place-content: center;
-    font-size: 1.2rem;
-  }
-  .is_disabled {
-    color: var(--disabled_color, var(--g12-t, "gray"));
-  }
-  .required::after {
-    content: "*";
-    color: var(--g12-t);
-    margin-left: 2px;
-  }
-  .item {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    justify-content: end;
-    min-width: var(--content_min_width);
-    max-width: var(--content_max_width);
-    margin-right: 0;
-    margin-left: auto;
-  }
-</style>