@maxax/ui 1.0.8 → 1.0.10

package/dist/index.cjs

@@ -12881,6 +12881,1121 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const XBasicIconPicker = utils.withInstall(_sfc_main$o);
+function useClipboard() {
+  const copied = vue.ref(false);
+  const copy = async (source) => {
+    try {
+      await navigator.clipboard.writeText(source);
+      copied.value = true;
+      setTimeout(() => {
+        copied.value = false;
+      }, 300);
+    } catch (err) {
+      console.error("[vue-json-pretty] Copy failed: ", err);
+    }
+  };
+  return {
+    copy
+  };
+}
+const treeNodePropsPass$1 = {
+  // JSONLike data.
+  data: {
+    type: [String, Number, Boolean, Array, Object],
+    default: null
+  },
+  // Data root path.
+  rootPath: {
+    type: String,
+    default: "root"
+  },
+  indent: {
+    type: Number,
+    default: 2
+  },
+  // Whether to display the length of (array|object).
+  showLength: {
+    type: Boolean,
+    default: false
+  },
+  // Whether the key name uses double quotes.
+  showDoubleQuotes: {
+    type: Boolean,
+    default: true
+  },
+  // Custom render for key.
+  renderNodeKey: Function,
+  // Custom render for value.
+  renderNodeValue: Function,
+  // Custom render for node actions.
+  renderNodeActions: {
+    type: [Boolean, Function],
+    default: void 0
+  },
+  // Define the selection method supported by the data level, which is not available by default.
+  selectableType: String,
+  // Whether to display the selection control.
+  showSelectController: {
+    type: Boolean,
+    default: false
+  },
+  // Whether to display the data level connection.
+  showLine: {
+    type: Boolean,
+    default: true
+  },
+  showLineNumber: {
+    type: Boolean,
+    default: false
+  },
+  // Whether to trigger selection when clicking on the node.
+  selectOnClickNode: {
+    type: Boolean,
+    default: true
+  },
+  // When using the selectableType, define whether current path/content is enabled.
+  nodeSelectable: {
+    type: Function,
+    default: () => true
+  },
+  // Highlight current node when selected.
+  highlightSelectedNode: {
+    type: Boolean,
+    default: true
+  },
+  showIcon: {
+    type: Boolean,
+    default: false
+  },
+  theme: {
+    type: String,
+    default: "light"
+  },
+  showKeyValueSpace: {
+    type: Boolean,
+    default: true
+  },
+  editable: {
+    type: Boolean,
+    default: false
+  },
+  editableTrigger: {
+    type: String,
+    default: "click"
+  },
+  onNodeClick: {
+    type: Function
+  },
+  onNodeMouseover: {
+    type: Function
+  },
+  onBracketsClick: {
+    type: Function
+  },
+  onIconClick: {
+    type: Function
+  },
+  onValueChange: {
+    type: Function
+  }
+};
+const treeNodeProps = {
+  ...treeNodePropsPass$1,
+  // Current node data.
+  node: {
+    type: Object,
+    required: true
+  },
+  // Whether the current node is collapsed.
+  collapsed: Boolean,
+  // Whether the current node is checked(When using the selection function).
+  checked: Boolean,
+  style: {
+    type: Object,
+    default: void 0
+  },
+  onSelectedChange: {
+    type: Function,
+    default: void 0
+  }
+};
+const basicJsonViewerProps = {
+  ...treeNodePropsPass$1,
+  collapsedNodeLength: {
+    type: Number,
+    default: Infinity
+  },
+  // Define the depth of the tree, nodes greater than this depth will not be expanded.
+  deep: {
+    type: Number,
+    default: Infinity
+  },
+  pathCollapsible: {
+    type: Function,
+    default: () => false
+  },
+  // Whether to use virtual scroll, usually applied to big data.
+  virtual: {
+    type: Boolean,
+    default: false
+  },
+  // When using virtual scroll, set the height of tree.
+  height: {
+    type: Number,
+    default: 400
+  },
+  // When using virtual scroll without dynamicHeight, define the height of each row.
+  itemHeight: {
+    type: Number,
+    default: 20
+  },
+  // Enable dynamic row heights for virtual scroll.
+  dynamicHeight: {
+    type: Boolean,
+    default: true
+  },
+  // When there is a selection function, define the selected path.
+  // For multiple selections, it is an array ['root.a','root.b'], for single selection, it is a string of 'root.a'.
+  selectedValue: {
+    type: [String, Array],
+    default: () => ""
+  },
+  // Collapsed control.
+  collapsedOnClickBrackets: {
+    type: Boolean,
+    default: true
+  },
+  style: {
+    type: Object,
+    default: void 0
+  },
+  onSelectedChange: {
+    type: Function,
+    default: void 0
+  },
+  theme: {
+    type: String,
+    default: "light"
+  }
+};
+function emitError(message) {
+  throw new Error(`[VueJSONPretty] ${message}`);
+}
+function getDataType(value) {
+  return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
+}
+function jsonFlatten(data, path = "root", level = 0, options) {
+  const { key: key2, index: index2, type = "content", showComma = false, length = 1 } = options || {};
+  const dataType = getDataType(data);
+  if (dataType === "array") {
+    const inner = arrFlat(
+      data.map(
+        (item, idx, arr) => jsonFlatten(item, `${path}[${idx}]`, level + 1, {
+          index: idx,
+          showComma: idx !== arr.length - 1,
+          length,
+          type
+        })
+      )
+    );
+    return [
+      jsonFlatten("[", path, level, {
+        showComma: false,
+        key: key2,
+        length: data.length,
+        type: "arrayStart"
+      })[0]
+    ].concat(
+      inner,
+      jsonFlatten("]", path, level, {
+        showComma,
+        length: data.length,
+        type: "arrayEnd"
+      })[0]
+    );
+  } else if (dataType === "object") {
+    const keys = Object.keys(data);
+    const inner = arrFlat(
+      keys.map(
+        (objKey, idx, arr) => jsonFlatten(data[objKey], /^[a-zA-Z_]\w*$/.test(objKey) ? `${path}.${objKey}` : `${path}["${objKey}"]`, level + 1, {
+          key: objKey,
+          showComma: idx !== arr.length - 1,
+          length,
+          type
+        })
+      )
+    );
+    return [
+      jsonFlatten("{", path, level, {
+        showComma: false,
+        key: key2,
+        index: index2,
+        length: keys.length,
+        type: "objectStart"
+      })[0]
+    ].concat(inner, jsonFlatten("}", path, level, { showComma, length: keys.length, type: "objectEnd" })[0]);
+  }
+  return [
+    {
+      content: data,
+      level,
+      key: key2,
+      index: index2,
+      path,
+      showComma,
+      length,
+      type
+    }
+  ];
+}
+function arrFlat(arr) {
+  if (typeof Array.prototype.flat === "function") {
+    return arr.flat();
+  }
+  const stack = [...arr];
+  const result = [];
+  while (stack.length) {
+    const first = stack.shift();
+    if (Array.isArray(first)) {
+      stack.unshift(...first);
+    } else {
+      result.push(first);
+    }
+  }
+  return result;
+}
+function cloneDeep(source, hash = /* @__PURE__ */ new WeakMap()) {
+  if (source === null || source === void 0) return source;
+  if (source instanceof Date) return new Date(source);
+  if (source instanceof RegExp) return new RegExp(source);
+  if (typeof source !== "object") return source;
+  if (hash.get(source)) return hash.get(source);
+  if (Array.isArray(source)) {
+    const output2 = source.map((item) => cloneDeep(item, hash));
+    hash.set(source, output2);
+    return output2;
+  }
+  const output = {};
+  for (const key2 in source) {
+    output[key2] = cloneDeep(source[key2], hash);
+  }
+  hash.set(source, output);
+  return output;
+}
+function stringToAutoType(source) {
+  let value;
+  if (source === "null") value = null;
+  else if (source === "undefined") value = void 0;
+  else if (source === "true") value = true;
+  else if (source === "false") value = false;
+  else if (source[0] + source[source.length - 1] === '""' || source[0] + source[source.length - 1] === "''") {
+    value = source.slice(1, -1);
+  } else if (typeof Number(source) === "number" && !isNaN(Number(source)) || source === "NaN") {
+    value = Number(source);
+  } else {
+    value = source;
+  }
+  return value;
+}
+const Brackets = /* @__PURE__ */ vue.defineComponent({
+  name: "JsonBrackets",
+  props: {
+    data: {
+      required: true,
+      type: String
+    },
+    onClick: {
+      type: Function,
+      default: void 0
+    }
+  },
+  render() {
+    const {
+      data
+    } = this;
+    const {
+      onClick
+    } = this;
+    return vue.createVNode("span", {
+      "class": "vjs-tree-brackets",
+      "onClick": onClick
+    }, [data]);
+  }
+});
+const Carets = /* @__PURE__ */ vue.defineComponent({
+  name: "JsonCarets",
+  props: {
+    nodeType: {
+      required: true,
+      type: String
+    },
+    onClick: {
+      type: Function,
+      default: void 0
+    }
+  },
+  render() {
+    const {
+      nodeType
+    } = this;
+    const {
+      onClick
+    } = this;
+    const isOpen = nodeType === "objectStart" || nodeType === "arrayStart";
+    const isClose = nodeType === "objectCollapsed" || nodeType === "arrayCollapsed";
+    if (!isOpen && !isClose) return null;
+    return vue.createVNode("span", {
+      "class": `vjs-carets vjs-carets-${isOpen ? "open" : "close"}`,
+      "onClick": onClick
+    }, [vue.createVNode("svg", {
+      "viewBox": "0 0 24 24",
+      "width": "1em",
+      "height": "1em",
+      "fill": "currentColor",
+      "aria-hidden": "true",
+      "focusable": "false",
+      "data-icon": "caret-down"
+    }, [vue.createVNode("path", {
+      "fill": "currentColor",
+      "d": "m12 13.171l4.95-4.95l1.414 1.415L12 16L5.636 9.636L7.05 8.222z"
+    }, null)])]);
+  }
+});
+const CheckController = /* @__PURE__ */ vue.defineComponent({
+  props: {
+    checked: {
+      type: Boolean,
+      default: false
+    },
+    isMultiple: Boolean,
+    onChange: {
+      type: Function,
+      default: void 0
+    }
+  },
+  emits: ["change", "update:modelValue"],
+  setup(props, {
+    emit
+  }) {
+    const uiType = vue.computed(() => props.isMultiple ? "checkbox" : "radio");
+    const model = vue.computed({
+      get: () => props.checked,
+      set: (val) => emit("update:modelValue", val)
+    });
+    return {
+      uiType,
+      model
+    };
+  },
+  render() {
+    const {
+      uiType,
+      model,
+      $emit
+    } = this;
+    return vue.createVNode("label", {
+      "class": ["vjs-check-controller", model ? "is-checked" : ""],
+      "onClick": (e) => e.stopPropagation()
+    }, [vue.createVNode("span", {
+      "class": `vjs-check-controller-inner is-${uiType}`
+    }, null), vue.createVNode("input", {
+      "checked": model,
+      "class": `vjs-check-controller-original is-${uiType}`,
+      "type": uiType,
+      "onChange": () => $emit("change", model)
+    }, null)]);
+  }
+});
+const treeNodePropsPass = {
+  // JSONLike data.
+  data: {
+    type: [String, Number, Boolean, Array, Object],
+    default: null
+  },
+  // Data root path.
+  rootPath: {
+    type: String,
+    default: "root"
+  },
+  indent: {
+    type: Number,
+    default: 2
+  },
+  // Whether to display the length of (array|object).
+  showLength: {
+    type: Boolean,
+    default: false
+  },
+  // Whether the key name uses double quotes.
+  showDoubleQuotes: {
+    type: Boolean,
+    default: true
+  },
+  // Custom render for key.
+  renderNodeKey: Function,
+  // Custom render for value.
+  renderNodeValue: Function,
+  // Custom render for node actions.
+  renderNodeActions: {
+    type: [Boolean, Function],
+    default: void 0
+  },
+  // Define the selection method supported by the data level, which is not available by default.
+  selectableType: String,
+  // Whether to display the selection control.
+  showSelectController: {
+    type: Boolean,
+    default: false
+  },
+  // Whether to display the data level connection.
+  showLine: {
+    type: Boolean,
+    default: true
+  },
+  showLineNumber: {
+    type: Boolean,
+    default: false
+  },
+  // Whether to trigger selection when clicking on the node.
+  selectOnClickNode: {
+    type: Boolean,
+    default: true
+  },
+  // When using the selectableType, define whether current path/content is enabled.
+  nodeSelectable: {
+    type: Function,
+    default: () => true
+  },
+  // Highlight current node when selected.
+  highlightSelectedNode: {
+    type: Boolean,
+    default: true
+  },
+  showIcon: {
+    type: Boolean,
+    default: false
+  },
+  theme: {
+    type: String,
+    default: "light"
+  },
+  showKeyValueSpace: {
+    type: Boolean,
+    default: true
+  },
+  editable: {
+    type: Boolean,
+    default: false
+  },
+  editableTrigger: {
+    type: String,
+    default: "click"
+  },
+  onNodeClick: {
+    type: Function
+  },
+  onNodeMouseover: {
+    type: Function
+  },
+  onBracketsClick: {
+    type: Function
+  },
+  onIconClick: {
+    type: Function
+  },
+  onValueChange: {
+    type: Function
+  }
+};
+const TreeNode$1 = /* @__PURE__ */ vue.defineComponent({
+  name: "TreeNode",
+  props: treeNodeProps,
+  emits: ["nodeClick", "nodeMouseover", "bracketsClick", "iconClick", "selectedChange", "valueChange"],
+  setup(props, {
+    emit
+  }) {
+    const dataType = vue.computed(() => getDataType(props.node.content));
+    const valueClass = vue.computed(() => `vjs-value vjs-value-${dataType.value}`);
+    const prettyKey = vue.computed(() => props.showDoubleQuotes ? `"${props.node.key}"` : props.node.key);
+    const renderKey = () => {
+      const render2 = props.renderNodeKey;
+      return render2 ? render2({
+        node: props.node,
+        defaultKey: prettyKey.value || ""
+      }) : prettyKey.value;
+    };
+    const isMultiple = vue.computed(() => props.selectableType === "multiple");
+    const isSingle = vue.computed(() => props.selectableType === "single");
+    const selectable = vue.computed(() => props.nodeSelectable(props.node) && (isMultiple.value || isSingle.value));
+    const state = vue.reactive({
+      editing: false
+    });
+    const handleInputChange = (e) => {
+      var _a;
+      const source = (_a = e.target) == null ? void 0 : _a.value;
+      const value = stringToAutoType(source);
+      emit("valueChange", value, props.node.path);
+    };
+    const defaultValue = vue.computed(() => {
+      var _a;
+      let value = (_a = props.node) == null ? void 0 : _a.content;
+      if (value === null) {
+        value = "null";
+      } else if (value === void 0) {
+        value = "undefined";
+      }
+      return dataType.value === "string" ? `"${value}"` : `${value}`;
+    });
+    const renderValue = () => {
+      const render2 = props.renderNodeValue;
+      return render2 ? render2({
+        node: props.node,
+        defaultValue: defaultValue.value
+      }) : defaultValue.value;
+    };
+    const handleBracketsClick = () => {
+      emit("bracketsClick", !props.collapsed, props.node);
+    };
+    const handleIconClick = () => {
+      emit("iconClick", !props.collapsed, props.node);
+    };
+    const handleSelectedChange = () => {
+      emit("selectedChange", props.node);
+    };
+    const handleNodeClick = () => {
+      emit("nodeClick", props.node);
+      if (selectable.value && props.selectOnClickNode) {
+        emit("selectedChange", props.node);
+      }
+    };
+    const handleNodeMouseover = () => {
+      emit("nodeMouseover", props.node);
+    };
+    const handleValueEdit = (e) => {
+      if (!props.editable) return;
+      if (!state.editing) {
+        state.editing = true;
+        const handle = (innerE) => {
+          var _a;
+          if (innerE.target !== e.target && ((_a = innerE.target) == null ? void 0 : _a.parentElement) !== e.target) {
+            state.editing = false;
+            document.removeEventListener("click", handle);
+          }
+        };
+        document.removeEventListener("click", handle);
+        document.addEventListener("click", handle);
+      }
+    };
+    const {
+      copy
+    } = useClipboard();
+    const handleCopy = () => {
+      const {
+        key: key2,
+        path
+      } = props.node;
+      const rootPath = props.rootPath;
+      const content = new Function("data", `return data${path.slice(rootPath.length)}`)(props.data);
+      const copiedData = JSON.stringify(key2 ? {
+        [key2]: content
+      } : content, null, 2);
+      copy(copiedData);
+    };
+    const renderNodeActions = () => {
+      const render2 = props.renderNodeActions;
+      if (!render2) return null;
+      const defaultActions = {
+        copy: handleCopy
+      };
+      return typeof render2 === "function" ? render2({
+        node: props.node,
+        defaultActions
+      }) : vue.createVNode("span", {
+        "onClick": handleCopy,
+        "class": "vjs-tree-node-actions-item"
+      }, [vue.createTextVNode("copy")]);
+    };
+    return () => {
+      const {
+        node
+      } = props;
+      return vue.createVNode("div", {
+        "class": {
+          "vjs-tree-node": true,
+          "has-selector": props.showSelectController,
+          "has-carets": props.showIcon,
+          "is-highlight": props.highlightSelectedNode && props.checked,
+          dark: props.theme === "dark"
+        },
+        "onClick": handleNodeClick,
+        "onMouseover": handleNodeMouseover,
+        "style": props.style
+      }, [props.showLineNumber && vue.createVNode("span", {
+        "class": "vjs-node-index"
+      }, [node.id + 1]), props.showSelectController && selectable.value && node.type !== "objectEnd" && node.type !== "arrayEnd" && vue.createVNode(CheckController, {
+        "isMultiple": isMultiple.value,
+        "checked": props.checked,
+        "onChange": handleSelectedChange
+      }, null), vue.createVNode("div", {
+        "class": "vjs-indent"
+      }, [Array.from(Array(node.level)).map((item, index2) => vue.createVNode("div", {
+        "key": index2,
+        "class": {
+          "vjs-indent-unit": true,
+          "has-line": props.showLine
+        }
+      }, [Array.from(Array(props.indent)).map(() => vue.createVNode(vue.Fragment, null, [vue.createTextVNode(" ")]))])), props.showIcon && vue.createVNode(Carets, {
+        "nodeType": node.type,
+        "onClick": handleIconClick
+      }, null)]), node.key && vue.createVNode("span", {
+        "class": "vjs-key"
+      }, [renderKey(), vue.createVNode("span", {
+        "class": "vjs-colon"
+      }, [`:${props.showKeyValueSpace ? " " : ""}`])]), vue.createVNode("span", null, [node.type !== "content" && node.content ? vue.createVNode(Brackets, {
+        "data": node.content.toString(),
+        "onClick": handleBracketsClick
+      }, null) : vue.createVNode("span", {
+        "class": valueClass.value,
+        "onClick": props.editable && (!props.editableTrigger || props.editableTrigger === "click") ? handleValueEdit : void 0,
+        "onDblclick": props.editable && props.editableTrigger === "dblclick" ? handleValueEdit : void 0
+      }, [props.editable && state.editing ? vue.createVNode("input", {
+        "value": defaultValue.value,
+        "onChange": handleInputChange,
+        "style": {
+          padding: "3px 8px",
+          border: "1px solid #eee",
+          boxShadow: "none",
+          boxSizing: "border-box",
+          borderRadius: 5,
+          fontFamily: "inherit"
+        }
+      }, null) : renderValue()]), node.showComma && vue.createVNode("span", null, [","]), props.showLength && props.collapsed && vue.createVNode("span", {
+        "class": "vjs-comment"
+      }, [vue.createTextVNode(" // "), node.length, vue.createTextVNode(" items ")])]), props.renderNodeActions && vue.createVNode("span", {
+        "class": "vjs-tree-node-actions"
+      }, [renderNodeActions()])]);
+    };
+  }
+});
+const BasicJsonViewer = /* @__PURE__ */ vue.defineComponent({
+  name: "JsonTree",
+  props: {
+    ...treeNodePropsPass,
+    collapsedNodeLength: {
+      type: Number,
+      default: Infinity
+    },
+    // Define the depth of the tree, nodes greater than this depth will not be expanded.
+    deep: {
+      type: Number,
+      default: Infinity
+    },
+    pathCollapsible: {
+      type: Function,
+      default: () => false
+    },
+    // Whether to use virtual scroll, usually applied to big data.
+    virtual: {
+      type: Boolean,
+      default: false
+    },
+    // When using virtual scroll, set the height of tree.
+    height: {
+      type: Number,
+      default: 400
+    },
+    // When using virtual scroll without dynamicHeight, define the height of each row.
+    itemHeight: {
+      type: Number,
+      default: 20
+    },
+    // Enable dynamic row heights for virtual scroll.
+    dynamicHeight: {
+      type: Boolean,
+      default: true
+    },
+    // When there is a selection function, define the selected path.
+    // For multiple selections, it is an array ['root.a','root.b'], for single selection, it is a string of 'root.a'.
+    selectedValue: {
+      type: [String, Array],
+      default: () => ""
+    },
+    // Collapsed control.
+    collapsedOnClickBrackets: {
+      type: Boolean,
+      default: true
+    },
+    style: {
+      type: Object,
+      default: void 0
+    },
+    onSelectedChange: {
+      type: Function,
+      default: void 0
+    },
+    theme: {
+      type: String,
+      default: "light"
+    }
+  },
+  emits: ["nodeClick", "nodeMouseover", "bracketsClick", "iconClick", "selectedChange", "update:selectedValue", "update:data"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const {
+      b
+    } = useNamespace("basic-json-viewer");
+    const treeRef = vue.ref();
+    const originFlatData = vue.computed(() => jsonFlatten(props.data, props.rootPath));
+    const initHiddenPaths = (deep, collapsedNodeLength) => {
+      return originFlatData.value.reduce((acc, item) => {
+        var _a;
+        const doCollapse = item.level >= deep || item.length >= collapsedNodeLength;
+        const pathComparison = (_a = props.pathCollapsible) == null ? void 0 : _a.call(props, item);
+        if ((item.type === "objectStart" || item.type === "arrayStart") && (doCollapse || pathComparison)) {
+          return {
+            ...acc,
+            [item.path]: 1
+          };
+        }
+        return acc;
+      }, {});
+    };
+    const state = vue.reactive({
+      translateY: 0,
+      visibleData: null,
+      hiddenPaths: initHiddenPaths(props.deep, props.collapsedNodeLength),
+      startIndex: 0,
+      endIndex: 0
+    });
+    let heights = [];
+    let offsets = [];
+    let totalHeight = 0;
+    const rowRefs = {};
+    const OVERSCAN_COUNT = 5;
+    const initDynamicHeights = (length) => {
+      heights = Array(length).fill(0).map(() => props.itemHeight || 20);
+      offsets = new Array(length + 1);
+      offsets[0] = 0;
+      for (let i = 0; i < length; i++) {
+        offsets[i + 1] = offsets[i] + heights[i];
+      }
+      totalHeight = offsets[length] || 0;
+    };
+    const recomputeOffsetsFrom = (start) => {
+      const length = heights.length;
+      if (start < 0) start = 0;
+      if (start > length) start = length;
+      for (let i = start; i < length; i++) {
+        offsets[i + 1] = offsets[i] + heights[i];
+      }
+      totalHeight = offsets[length] || 0;
+    };
+    const setRowRef = (index2, el) => {
+      if (el) {
+        rowRefs[index2] = el;
+      } else {
+        delete rowRefs[index2];
+      }
+    };
+    const lowerBound = (arr, target) => {
+      let lo = 0;
+      let hi = arr.length - 1;
+      while (lo < hi) {
+        const mid = lo + hi >>> 1;
+        if (arr[mid] < target) lo = mid + 1;
+        else hi = mid;
+      }
+      return lo;
+    };
+    const findStartIndexByScrollTop = (scrollTop) => {
+      const i = lowerBound(offsets, scrollTop + 1e-4);
+      return Math.max(0, Math.min(i - 1, heights.length - 1));
+    };
+    const findEndIndexByViewport = (scrollTop, viewportHeight) => {
+      const target = scrollTop + viewportHeight;
+      const i = lowerBound(offsets, target);
+      return Math.max(0, Math.min(i + 1, heights.length));
+    };
+    const flatData = vue.computed(() => {
+      let startHiddenItem = null;
+      const data = [];
+      const length = originFlatData.value.length;
+      for (let i = 0; i < length; i++) {
+        const cur = originFlatData.value[i];
+        const item = {
+          ...cur,
+          id: i
+        };
+        const isHidden = state.hiddenPaths[item.path];
+        if (startHiddenItem && startHiddenItem.path === item.path) {
+          const isObject2 = startHiddenItem.type === "objectStart";
+          const mergeItem = {
+            ...item,
+            ...startHiddenItem,
+            showComma: item.showComma,
+            content: isObject2 ? "{...}" : "[...]",
+            type: isObject2 ? "objectCollapsed" : "arrayCollapsed"
+          };
+          startHiddenItem = null;
+          data.push(mergeItem);
+        } else if (isHidden && !startHiddenItem) {
+          startHiddenItem = item;
+          continue;
+        } else {
+          if (startHiddenItem) continue;
+          else data.push(item);
+        }
+      }
+      return data;
+    });
+    const selectedPaths = vue.computed(() => {
+      const value = props.selectedValue;
+      if (value && props.selectableType === "multiple" && Array.isArray(value)) {
+        return value;
+      }
+      return [value];
+    });
+    const propsErrorMessage = vue.computed(() => {
+      const error = props.selectableType && !props.selectOnClickNode && !props.showSelectController;
+      return error ? "When selectableType is not null, selectOnClickNode and showSelectController cannot be false at the same time, because this will cause the selection to fail." : "";
+    });
+    const listHeight = vue.computed(() => {
+      if (props.dynamicHeight) {
+        return totalHeight || 0;
+      }
+      return flatData.value.length * props.itemHeight;
+    });
+    const updateVisibleData = () => {
+      var _a;
+      const flatDataValue = flatData.value;
+      if (!flatDataValue) return;
+      if (props.virtual) {
+        const scrollTop = ((_a = treeRef.value) == null ? void 0 : _a.scrollTop) || 0;
+        if (props.dynamicHeight) {
+          if (heights.length !== flatDataValue.length) {
+            initDynamicHeights(flatDataValue.length);
+          }
+          const start = findStartIndexByScrollTop(scrollTop);
+          const endNoOverscan = findEndIndexByViewport(scrollTop, props.height);
+          const startWithOverscan = Math.max(0, start - OVERSCAN_COUNT);
+          const endWithOverscan = Math.min(flatDataValue.length, endNoOverscan + OVERSCAN_COUNT);
+          state.startIndex = startWithOverscan;
+          state.endIndex = endWithOverscan;
+          state.translateY = offsets[startWithOverscan] || 0;
+          state.visibleData = flatDataValue.slice(startWithOverscan, endWithOverscan);
+          vue.nextTick().then(() => {
+            let changed = false;
+            for (let i = state.startIndex; i < state.endIndex; i++) {
+              const el = rowRefs[i];
+              if (!el) continue;
+              const h = el.offsetHeight;
+              if (h && heights[i] !== h) {
+                heights[i] = h;
+                offsets[i + 1] = offsets[i] + heights[i];
+                recomputeOffsetsFrom(i + 1);
+                changed = true;
+              }
+            }
+            if (changed) {
+              updateVisibleData();
+            }
+          });
+        } else {
+          const visibleCount = props.height / props.itemHeight;
+          const scrollCount = Math.floor(scrollTop / props.itemHeight);
+          let start = scrollCount < 0 ? 0 : scrollCount + visibleCount > flatDataValue.length ? flatDataValue.length - visibleCount : scrollCount;
+          if (start < 0) {
+            start = 0;
+          }
+          const end = start + visibleCount;
+          state.translateY = start * props.itemHeight;
+          state.startIndex = start;
+          state.endIndex = end;
+          state.visibleData = flatDataValue.slice(start, end);
+        }
+      } else {
+        state.translateY = 0;
+        state.startIndex = 0;
+        state.endIndex = flatDataValue.length;
+        state.visibleData = flatDataValue;
+      }
+    };
+    let rafId = null;
+    const handleTreeScroll = () => {
+      if (rafId) {
+        cancelAnimationFrame(rafId);
+      }
+      rafId = requestAnimationFrame(() => {
+        updateVisibleData();
+      });
+    };
+    const handleSelectedChange = ({
+      path
+    }) => {
+      const type = props.selectableType;
+      if (type === "multiple") {
+        const index2 = selectedPaths.value.findIndex((item) => item === path);
+        const newVal = [...selectedPaths.value];
+        if (index2 !== -1) {
+          newVal.splice(index2, 1);
+        } else {
+          newVal.push(path);
+        }
+        emit("update:selectedValue", newVal);
+        emit("selectedChange", newVal, [...selectedPaths.value]);
+      } else if (type === "single") {
+        if (selectedPaths.value[0] !== path) {
+          const [oldVal] = selectedPaths.value;
+          const newVal = path;
+          emit("update:selectedValue", newVal);
+          emit("selectedChange", newVal, oldVal);
+        }
+      }
+    };
+    const handleNodeClick = (node) => {
+      emit("nodeClick", node);
+    };
+    const handleNodeMouseover = (node) => {
+      emit("nodeMouseover", node);
+    };
+    const updateCollapsedPaths = (collapsed, path) => {
+      if (collapsed) {
+        state.hiddenPaths = {
+          ...state.hiddenPaths,
+          [path]: 1
+        };
+      } else {
+        const newPaths = {
+          ...state.hiddenPaths
+        };
+        delete newPaths[path];
+        state.hiddenPaths = newPaths;
+      }
+    };
+    const handleBracketsClick = (collapsed, node) => {
+      if (props.collapsedOnClickBrackets) {
+        updateCollapsedPaths(collapsed, node.path);
+      }
+      emit("bracketsClick", collapsed, node);
+    };
+    const handleIconClick = (collapsed, node) => {
+      updateCollapsedPaths(collapsed, node.path);
+      emit("iconClick", collapsed, node);
+    };
+    const handleValueChange = (value, path) => {
+      const newData = cloneDeep(props.data);
+      const rootPath = props.rootPath;
+      new Function("data", "val", `data${path.slice(rootPath.length)}=val`)(newData, value);
+      emit("update:data", newData);
+    };
+    vue.watchEffect(() => {
+      if (propsErrorMessage.value) {
+        emitError(propsErrorMessage.value);
+      }
+    });
+    vue.watchEffect(() => {
+      if (flatData.value) {
+        if (props.virtual && props.dynamicHeight) {
+          if (heights.length !== flatData.value.length) {
+            initDynamicHeights(flatData.value.length);
+          }
+        }
+        updateVisibleData();
+      }
+    });
+    vue.watch(() => [props.dynamicHeight, props.itemHeight, originFlatData.value.length], () => {
+      if (props.virtual && props.dynamicHeight) {
+        initDynamicHeights(flatData.value.length);
+        vue.nextTick(updateVisibleData);
+      }
+    });
+    vue.watch(() => props.deep, (val) => {
+      if (val) state.hiddenPaths = initHiddenPaths(val, props.collapsedNodeLength);
+    });
+    vue.watch(() => props.collapsedNodeLength, (val) => {
+      if (val) state.hiddenPaths = initHiddenPaths(props.deep, val);
+    });
+    return () => {
+      var _a, _b, _c, _d, _e;
+      const renderNodeKey = (_a = props.renderNodeKey) != null ? _a : slots.renderNodeKey;
+      const renderNodeValue = (_b = props.renderNodeValue) != null ? _b : slots.renderNodeValue;
+      const renderNodeActions = (_d = (_c = props.renderNodeActions) != null ? _c : slots.renderNodeActions) != null ? _d : false;
+      const nodeContent = (_e = state.visibleData) == null ? void 0 : _e.map((item, localIndex) => {
+        const globalIndex = state.startIndex + localIndex;
+        return vue.createVNode("div", {
+          "key": item.id,
+          "ref": (el) => setRowRef(globalIndex, el || null)
+        }, [vue.createVNode(TreeNode$1, {
+          "data": props.data,
+          "rootPath": props.rootPath,
+          "indent": props.indent,
+          "node": item,
+          "collapsed": !!state.hiddenPaths[item.path],
+          "theme": props.theme,
+          "showDoubleQuotes": props.showDoubleQuotes,
+          "showLength": props.showLength,
+          "checked": selectedPaths.value.includes(item.path),
+          "selectableType": props.selectableType,
+          "showLine": props.showLine,
+          "showLineNumber": props.showLineNumber,
+          "showSelectController": props.showSelectController,
+          "selectOnClickNode": props.selectOnClickNode,
+          "nodeSelectable": props.nodeSelectable,
+          "highlightSelectedNode": props.highlightSelectedNode,
+          "editable": props.editable,
+          "editableTrigger": props.editableTrigger,
+          "showIcon": props.showIcon,
+          "showKeyValueSpace": props.showKeyValueSpace,
+          "renderNodeKey": renderNodeKey,
+          "renderNodeValue": renderNodeValue,
+          "renderNodeActions": renderNodeActions,
+          "onNodeClick": handleNodeClick,
+          "onNodeMouseover": handleNodeMouseover,
+          "onBracketsClick": handleBracketsClick,
+          "onIconClick": handleIconClick,
+          "onSelectedChange": handleSelectedChange,
+          "onValueChange": handleValueChange,
+          "class": props.dynamicHeight ? "dynamic-height" : void 0,
+          "style": props.dynamicHeight ? {} : props.itemHeight && props.itemHeight !== 20 ? {
+            lineHeight: `${props.itemHeight}px`
+          } : {}
+        }, null)]);
+      });
+      return vue.createVNode("div", {
+        "ref": treeRef,
+        "class": {
+          [b()]: true,
+          "vjs-tree": true,
+          "is-virtual": props.virtual,
+          dark: props.theme === "dark"
+        },
+        "onScroll": props.virtual ? handleTreeScroll : void 0,
+        "style": props.showLineNumber ? {
+          paddingLeft: `${Number(originFlatData.value.length.toString().length) * 12}px`,
+          ...props.style
+        } : props.style
+      }, [props.virtual ? vue.createVNode("div", {
+        "class": "vjs-tree-list",
+        "style": {
+          height: `${props.height}px`
+        }
+      }, [vue.createVNode("div", {
+        "class": "vjs-tree-list-holder",
+        "style": {
+          height: `${listHeight.value}px`
+        }
+      }, [vue.createVNode("div", {
+        "class": "vjs-tree-list-holder-inner",
+        "style": {
+          transform: `translateY(${state.translateY}px)`
+        }
+      }, [nodeContent])])]) : nodeContent]);
+    };
+  }
+});
+const XBasicJsonViewer = utils.withInstall(BasicJsonViewer);
 const ROW_KEY$1 = "_MAX_ROW_KEY";
 const PAGE_SIZE_OPTIONS$1 = [10, 50, 80, 100];
 const PAGE_SIZE$1 = 10;
@@ -23717,7 +24832,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     });
     useIframeResize(updateRender);
     const treeNodePropKeys = ["titleField", "keyField", "checkable", "selectable", "unselectOnClick", "disableAll", "draggable", "droppable", "render", "nodeIndent", "showLine", "showLeftArrow", "showRightArrow"];
-    const treeNodeProps = vue.reactive(pickReadonly(vue.toRefs(props), ...treeNodePropKeys));
+    const treeNodeProps2 = vue.reactive(pickReadonly(vue.toRefs(props), ...treeNodePropKeys));
     __expose({
       setData,
       setChecked,
@@ -23774,7 +24889,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
               style: vue.normalizeStyle({ height: `${vue.unref(topSpaceHeight)}px` })
             }, null, 4),
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(expandAnimation).ready.value ? vue.unref(expandAnimation).topNodes.value : vue.unref(renderNodes), (node) => {
-              return vue.openBlock(), vue.createBlock(vue.unref(XTreeNode), vue.mergeProps({ ref_for: true }, treeNodeProps, {
+              return vue.openBlock(), vue.createBlock(vue.unref(XTreeNode), vue.mergeProps({ ref_for: true }, treeNodeProps2, {
                 key: node[__props.keyField],
                 data: node,
                 "get-node": vue.unref(getNode),
@@ -23809,7 +24924,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
                       class: vue.normalizeClass(vue.unref(transitionWrapperInnerCls))
                     }, [
                       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(expandAnimation).middleNodes.value, (node) => {
-                        return vue.openBlock(), vue.createBlock(vue.unref(XTreeNode), vue.mergeProps({ ref_for: true }, treeNodeProps, {
+                        return vue.openBlock(), vue.createBlock(vue.unref(XTreeNode), vue.mergeProps({ ref_for: true }, treeNodeProps2, {
                           key: node[__props.keyField],
                           data: node,
                           "get-node": vue.unref(getNode),
@@ -23838,7 +24953,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
                 _: 3
               }, 8, ["onAfterEnter", "onAfterLeave"]),
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(expandAnimation).bottomNodes.value, (node) => {
-                return vue.openBlock(), vue.createBlock(vue.unref(XTreeNode), vue.mergeProps({ ref_for: true }, treeNodeProps, {
+                return vue.openBlock(), vue.createBlock(vue.unref(XTreeNode), vue.mergeProps({ ref_for: true }, treeNodeProps2, {
                   key: node[__props.keyField],
                   data: node,
                   "get-node": vue.unref(getNode),
@@ -24758,8 +25873,8 @@ const components = [
   XBasicSubPanel,
   XBasicRow,
   XBasicCol,
+  XBasicJsonViewer,
   XTree,
-  XTreeNode,
   XTreeSearch,
   XTreeDrop,
   XBasicViewBar,
@@ -25459,6 +26574,7 @@ exports.XBasicHelp = XBasicHelp;
 exports.XBasicHidden = XBasicHidden;
 exports.XBasicIconOnline = XBasicIconOnline;
 exports.XBasicIconPicker = XBasicIconPicker;
+exports.XBasicJsonViewer = XBasicJsonViewer;
 exports.XBasicListPage = XBasicListPage;
 exports.XBasicLoading = XBasicLoading;
 exports.XBasicLoadingDirective = vLoading;
@@ -25504,6 +26620,7 @@ exports.basicFontIconProps = basicFontIconProps;
 exports.basicGradientTitleProps = basicGradientTitleProps;
 exports.basicHelpProps = basicHelpProps;
 exports.basicIconOnlineProps = basicIconOnlineProps;
+exports.basicJsonViewerProps = basicJsonViewerProps;
 exports.basicMessageBoxProps = basicMessageBoxProps;
 exports.basicModalProps = basicModalProps;
 exports.basicRadioGroupProps = basicRadioGroupProps;
@@ -25526,6 +26643,8 @@ exports.provideGlobalConfig = provideGlobalConfig;
 exports.responsiveArray = responsiveArray;
 exports.setTableGlobalFormat = setTableGlobalFormat;
 exports.setVxeTableTheme = setVxeTableTheme;
+exports.treeNodeProps = treeNodeProps;
+exports.treeNodePropsPass = treeNodePropsPass$1;
 exports.useBasicDrawerModal = useBasicDrawerModal;
 exports.useComponentRegister = useComponentRegister;
 exports.useConfigProvider = useConfigProvider;