sveltekit-ui 1.0.0

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

@@ -0,0 +1,594 @@
+import { create_unique_id, copy_to_clipboard, csv_to_json, set_closurable } from "../../client/index.js"
+import { create_button_manager } from "../Button/index.svelte.js"
+import { create_file_input_manager } from "../FileInput/index.svelte.js"
+import { create_popover_manager } from "../Popover/index.svelte.js"
+import { create_text_input_manager } from "../TextInput/index.svelte.js"
+import { create_dropdown_manager } from "../Dropdown/index.svelte.js"
+import { create_checkbox_manager } from "../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/dist/Components/LabeledItem/index.svelte

@@ -0,0 +1,102 @@
+<script>
+  import Tooltip from "../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>