json-viewer-element 1.0.1 → 1.0.2

package/README.en.md

@@ -1,5 +1,7 @@
 # <json-viewer> Element
 
+[简体中文](./README.md) | English
+
 > 🌈 A lightweight, modern Web Component for JSON visualization and interaction.
 
 ## Features

package/README.md

@@ -1,5 +1,7 @@
 # <json-viewer> Element
 
+简体中文 | [English](./README.en.md)
+
 > 🌈 一个轻量、现代的 JSON 可视化与交互 Web 组件
 
 ## 功能特性

package/dist/json-viewer-element.es.js

@@ -1,424 +1 @@
-const togglerSvg = "data:image/svg+xml;charset=utf-8;base64,PHN2ZyBoZWlnaHQ9IjE2IiB3aWR0aD0iOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMCAwIDggOC04IDh6IiBmaWxsPSIjNjY2Ii8+PC9zdmc+";
-const tpl = document.createElement("template");
-tpl.innerHTML = `
-<style>
-/* Light Theme (default) */
-:host {
-  --jv-bg-color: #ffffff;
-  --jv-border-color: #ddd;
-  --jv-text-color: #111;
-  --jv-key-color: #111;
-  --jv-string-color: #42b983;
-  --jv-number-color: #fc1e70;
-  --jv-boolean-color: #fc1e70;
-  --jv-null-color: #e08331;
-  --jv-undefined-color: #b0b0b0;
-  --jv-function-color: #067bca;
-  --jv-regexp-color: #fc1e70;
-  --jv-copy-bg: #eee;
-  --jv-copy-text: #333;
-  --jv-ellipsis-color: #999999;
-  --jv-ellipsis-bg: #eeeeee;
-  --jv-hover-shadow: rgba(0,0,0,0.1);
-}
-
-/* Dark Theme */
-:host([theme="dark"]) {
-  --jv-bg-color: #23272f;
-  --jv-border-color: #2c313a;
-  --jv-text-color: #d4d4d4;
-  --jv-key-color: #79c0ff;
-  --jv-string-color: #a5d6a7;
-  --jv-number-color: #e2b86b;
-  --jv-boolean-color: #ff7b72;
-  --jv-null-color: #ffab70;
-  --jv-undefined-color: #d2a8ff;
-  --jv-function-color: #c678dd;
-  --jv-regexp-color: #56b6c2;
-  --jv-copy-bg: #3a3f4b;
-  --jv-copy-text: #fff;
-  --jv-ellipsis-color: #6e7681;
-  --jv-ellipsis-bg: #2c313a;
-  --jv-hover-shadow: rgba(0,0,0,0.4);
-}
-
-:host {
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  font-family: Consolas, Menlo, Courier, monospace;
-  font-size: 14px;
-  padding: 8px;
-  overflow-x: auto;
-  box-sizing: border-box;
-  position: relative;
-  background-color: var(--jv-bg-color);
-  color: var(--jv-text-color);
-}
-
-:host([boxed]) {
-  border: 1px solid var(--jv-border-color);
-  border-radius: 4px;
-  padding: 16px;
-  transition: box-shadow 0.2s ease;
-}
-:host([boxed]:hover) {
-  box-shadow: 0 2px 8px var(--jv-hover-shadow);
-}
-#root:has(+.align-left) {
-  margin-top: 16px;
-}
-.jv-copy {
-  cursor: pointer;
-  font-size: 12px;
-  background: var(--jv-copy-bg);
-  color: var(--jv-copy-text);
-  padding: 4px 8px;
-  border-radius: 3px;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-}
-:host(:hover) .jv-copy {
-  opacity: 1;
-}
-slot[name="copy-button"] {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  z-index: 10;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-  display: block !important;
-}
-slot[name="copy-button"][hidden] {
-  display: none !important;
-}
-slot[name="copy-button"].align-left {
-  left: 8px;
-  right: auto;
-}
-slot[name="copy-button"].align-right {
-  right: 8px;
-  left: auto;
-}
-:host(:hover) slot[name="copy-button"] {
-  opacity: 1;
-}
-.jv-toggle {
-  background-image: url("${togglerSvg}");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center center;
-  cursor: pointer;
-  width: 10px;
-  height: 10px;
-  margin-right: 2px;
-  display: inline-block;
-  transition: rotate .1s;
-}
-.jv-toggle.open {
-  rotate: 90deg;
-}
-.jv-key {
-  color: var(--jv-key-color);
-}
-.jv-string {
-  color: var(--jv-string-color);
-}
-.jv-number {
-  color: var(--jv-number-color);
-}
-.jv-boolean {
-  color: var(--jv-boolean-color);
-}
-.jv-null {
-  color: var(--jv-null-color);
-}
-.jv-undefined {
-  color: var(--jv-undefined-color);
-}
-.jv-function {
-  color: var(--jv-function-color);
-}
-.jv-regexp {
-  color: var(--jv-regexp-color);
-}
-.jv-list {
-  margin-left: 16px;
-}
-.jv-item:not(:has(.jv-toggle)) .jv-key {
-  margin-left: 12px;
-}
-.jv-item:not(:last-child):after {
-  content: ',';
-}
-.jv-node > .jv-ellipsis {
-  display: none;
-}
-.jv-node.empty > .jv-list {
-  display: inline-block;
-  margin-inline: 4px;
-}
-.jv-node.collapsed > .jv-list,
-.jv-node.collapsed.empty > .jv-ellipsis {
-  display: none;
-}
-.jv-node.collapsed > .jv-ellipsis {
-  color: var(--jv-ellipsis-color);
-  background-color: var(--jv-ellipsis-bg);
-  display: inline-block;
-  line-height: 0.9;
-  font-size: 0.85em;
-  vertical-align: 2px;
-  cursor: pointer;
-  user-select: none;
-  padding: 2px 4px;
-  margin: 0px 4px;
-  border-radius: 3px;
-}
-</style>
-<div id="root" part="root"></div>
-<slot name="copy-button" part="copy-button" hidden>
-  <span class="jv-copy"></span>
-</slot>
-`;
-class JsonViewerElement extends HTMLElement {
-  constructor() {
-    super();
-    this._value = null;
-    this.root = this.attachShadow({ mode: "open" });
-    this.root.appendChild(tpl.content.cloneNode(true));
-    this.container = this.root.getElementById("root");
-  }
-  static get observedAttributes() {
-    return [
-      "value",
-      "expand-depth",
-      "copyable",
-      "sort",
-      "boxed",
-      "theme",
-      "parse"
-    ];
-  }
-  connectedCallback() {
-    this.render();
-  }
-  attributeChangedCallback() {
-    this.render();
-  }
-  set value(v) {
-    if (v === this._value)
-      return;
-    this._value = v;
-    this.render();
-  }
-  get value() {
-    return this._value ?? this.getAttribute("value");
-  }
-  set sort(v) {
-    this.setAttribute("sort", v ? "true" : "false");
-  }
-  get sort() {
-    return this.hasAttribute("sort");
-  }
-  set parse(v) {
-    this.setAttribute("parse", v ? "true" : "false");
-  }
-  get parse() {
-    return this.getAttribute("parse") !== "false";
-  }
-  set copyable(v) {
-    if (v === false) {
-      this.removeAttribute("copyable");
-    } else {
-      this.setAttribute("copyable", JSON.stringify(v));
-    }
-  }
-  get copyable() {
-    if (!this.hasAttribute("copyable"))
-      return false;
-    const attr = this.getAttribute("copyable");
-    const defaultCopyableOptions = { copyText: "Copy", copiedText: "Copied", timeout: 2e3, align: "right" };
-    if (attr === "" || attr === null)
-      return defaultCopyableOptions;
-    try {
-      return {
-        ...defaultCopyableOptions,
-        ...JSON.parse(attr)
-      };
-    } catch {
-      return defaultCopyableOptions;
-    }
-  }
-  get expandDepth() {
-    return Number(this.getAttribute("expand-depth") ?? 1);
-  }
-  /**
-   * Copy text to clipboard. Uses Clipboard API if available, otherwise fallback.
-   */
-  copyText(text) {
-    if (navigator.clipboard) {
-      this.copyText = (text2) => navigator.clipboard.writeText(text2);
-      return this.copyText(text);
-    }
-    this.copyText = (text2) => new Promise((resolve, reject) => {
-      const input = document.createElement("input");
-      input.value = text2;
-      document.body.appendChild(input);
-      input.select();
-      if (document.execCommand("copy")) {
-        document.body.removeChild(input);
-        resolve();
-      } else {
-        document.body.removeChild(input);
-        reject(new Error("Copy failed"));
-      }
-    });
-    return this.copyText(text);
-  }
-  /**
-   * Render the JSON viewer.
-   */
-  render() {
-    if (typeof this.value === "string" && this.parse) {
-      try {
-        this._value = JSON.parse(this.value);
-      } catch {
-      }
-    }
-    this.container.innerHTML = "";
-    this.container.appendChild(this.build(this._value, 0));
-    const copyableOptions = this.copyable;
-    if (copyableOptions) {
-      const align = copyableOptions.align || "right";
-      const copySlot = this.root.querySelector('slot[name="copy-button"]');
-      const customCopyButton = copySlot.assignedElements()[0];
-      const defaultCopyBtn = this.root.querySelector(".jv-copy");
-      copySlot.hidden = false;
-      copySlot.className = `align-${align}`;
-      if (!customCopyButton) {
-        let copyTimeout;
-        defaultCopyBtn.textContent = copyableOptions.copyText;
-        const newBtn = defaultCopyBtn.cloneNode(true);
-        defaultCopyBtn.replaceWith(newBtn);
-        newBtn.textContent = copyableOptions.copyText;
-        newBtn.addEventListener("click", () => {
-          const textToCopy = JSON.stringify(this._value, null, 2);
-          this.copyText(textToCopy).then(() => {
-            newBtn.textContent = copyableOptions.copiedText;
-            copyTimeout = window.setTimeout(() => {
-              newBtn.textContent = copyableOptions.copyText;
-              clearTimeout(copyTimeout);
-            }, copyableOptions.timeout);
-            this.dispatchEvent(new CustomEvent("copy-success", {
-              detail: { text: textToCopy, options: copyableOptions }
-            }));
-          }).catch(() => {
-            console.warn("Failed to copy text to clipboard");
-            this.dispatchEvent(new CustomEvent("copy-error", {
-              detail: { text: textToCopy, options: copyableOptions }
-            }));
-          });
-        });
-      }
-    }
-  }
-  /**
-   * Recursively build the JSON tree.
-   */
-  build(data, depth) {
-    if (data === null)
-      return this.leaf("null", "jv-null");
-    if (data === void 0)
-      return this.leaf("undefined", "jv-undefined");
-    if (typeof data === "boolean")
-      return this.leaf(String(data), "jv-boolean");
-    if (typeof data === "number")
-      return this.leaf(String(data), "jv-number");
-    if (typeof data === "string")
-      return this.leaf(`"${data}"`, "jv-string");
-    if (typeof data === "function")
-      return this.leaf("<function>", "jv-function");
-    if (data instanceof RegExp)
-      return this.leaf("<regexp>", "jv-regexp");
-    if (data instanceof Date)
-      return this.leaf(`"${data.toLocaleString()}"`, "jv-string");
-    const isArr = Array.isArray(data);
-    const node = document.createElement("span");
-    node.className = "jv-node";
-    node.setAttribute("part", "node");
-    const list = document.createElement("div");
-    list.className = "jv-list";
-    list.setAttribute("part", "list");
-    const keys = isArr ? this.sort ? [...data.keys()].sort((a, b) => a - b) : [...data.keys()] : this.sort ? Object.keys(data).sort() : Object.keys(data);
-    for (const k of keys) {
-      const item = document.createElement("div");
-      const childNode = this.build(data[k], depth + 1);
-      item.className = "jv-item";
-      if (childNode instanceof Element && childNode.classList.contains("jv-node")) {
-        const childToggle = childNode.querySelector(".jv-toggle");
-        if (childToggle) {
-          childToggle.remove();
-          item.append(childToggle);
-        }
-      }
-      if (!isArr) {
-        const keySpan = document.createElement("span");
-        keySpan.className = "jv-key";
-        keySpan.setAttribute("part", "key");
-        keySpan.textContent = `"${k}": `;
-        item.append(keySpan);
-      }
-      item.append(childNode);
-      list.append(item);
-    }
-    const toggle = document.createElement("span");
-    toggle.className = "jv-toggle";
-    toggle.setAttribute("part", "toggle");
-    if (!node.classList.contains("collapsed")) {
-      toggle.classList.add("open");
-    }
-    toggle.addEventListener("click", () => {
-      node.classList.toggle("collapsed");
-      toggle.classList.toggle("open");
-      this.dispatchEvent(new CustomEvent("toggle", {
-        detail: {
-          node,
-          data,
-          isCollapsed: node.classList.contains("collapsed")
-        }
-      }));
-    });
-    const ellipsis = document.createElement("span");
-    ellipsis.className = "jv-ellipsis";
-    ellipsis.setAttribute("part", "ellipsis");
-    ellipsis.textContent = `...${keys.length}`;
-    ellipsis.addEventListener("click", () => {
-      node.classList.remove("collapsed");
-      toggle.classList.add("open");
-    });
-    if (depth >= this.expandDepth) {
-      node.classList.add("collapsed");
-      toggle.classList.remove("open");
-    }
-    if (!keys.length)
-      node.classList.add("empty");
-    node.append(toggle, isArr ? "[" : "{", ellipsis, list, isArr ? "]" : "}");
-    return node;
-  }
-  /**
-   * Create a leaf node for primitive values.
-   */
-  leaf(text, cls) {
-    const s = document.createElement("span");
-    s.className = `jv-value ${cls}`;
-    s.setAttribute("part", `value ${cls.replace("jv-", "")}`);
-    s.textContent = text;
-    return s;
-  }
-}
-customElements.define("json-viewer", JsonViewerElement);
-export {
-  JsonViewerElement
-};
+const e=document.createElement("template");e.innerHTML='\n<style>\n/* Light Theme (default) */\n:host {\n  --jv-bg-color: #ffffff;\n  --jv-border-color: #ddd;\n  --jv-text-color: #111;\n  --jv-key-color: #111;\n  --jv-string-color: #42b983;\n  --jv-number-color: #fc1e70;\n  --jv-boolean-color: #fc1e70;\n  --jv-null-color: #e08331;\n  --jv-undefined-color: #b0b0b0;\n  --jv-function-color: #067bca;\n  --jv-regexp-color: #fc1e70;\n  --jv-copy-bg: #eee;\n  --jv-copy-text: #333;\n  --jv-ellipsis-color: #999999;\n  --jv-ellipsis-bg: #eeeeee;\n  --jv-hover-shadow: rgba(0,0,0,0.1);\n}\n\n/* Dark Theme */\n:host([theme="dark"]) {\n  --jv-bg-color: #23272f;\n  --jv-border-color: #2c313a;\n  --jv-text-color: #d4d4d4;\n  --jv-key-color: #79c0ff;\n  --jv-string-color: #a5d6a7;\n  --jv-number-color: #e2b86b;\n  --jv-boolean-color: #ff7b72;\n  --jv-null-color: #ffab70;\n  --jv-undefined-color: #d2a8ff;\n  --jv-function-color: #c678dd;\n  --jv-regexp-color: #56b6c2;\n  --jv-copy-bg: #3a3f4b;\n  --jv-copy-text: #fff;\n  --jv-ellipsis-color: #6e7681;\n  --jv-ellipsis-bg: #2c313a;\n  --jv-hover-shadow: rgba(0,0,0,0.4);\n}\n\n:host {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n  font-family: Consolas, Menlo, Courier, monospace;\n  font-size: 14px;\n  padding: 8px;\n  overflow-x: auto;\n  box-sizing: border-box;\n  position: relative;\n  background-color: var(--jv-bg-color);\n  color: var(--jv-text-color);\n}\n\n:host([boxed]) {\n  border: 1px solid var(--jv-border-color);\n  border-radius: 4px;\n  padding: 16px;\n  transition: box-shadow 0.2s ease;\n}\n:host([boxed]:hover) {\n  box-shadow: 0 2px 8px var(--jv-hover-shadow);\n}\n#root:has(+.align-left) {\n  margin-top: 16px;\n}\n.jv-copy {\n  cursor: pointer;\n  font-size: 12px;\n  background: var(--jv-copy-bg);\n  color: var(--jv-copy-text);\n  padding: 4px 8px;\n  border-radius: 3px;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n:host(:hover) .jv-copy {\n  opacity: 1;\n}\nslot[name="copy-button"] {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  z-index: 10;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n  display: block !important;\n}\nslot[name="copy-button"][hidden] {\n  display: none !important;\n}\nslot[name="copy-button"].align-left {\n  left: 8px;\n  right: auto;\n}\nslot[name="copy-button"].align-right {\n  right: 8px;\n  left: auto;\n}\n:host(:hover) slot[name="copy-button"] {\n  opacity: 1;\n}\n.jv-toggle {\n  background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyBoZWlnaHQ9IjE2IiB3aWR0aD0iOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMCAwIDggOC04IDh6IiBmaWxsPSIjNjY2Ii8+PC9zdmc+");\n  background-repeat: no-repeat;\n  background-size: contain;\n  background-position: center center;\n  cursor: pointer;\n  width: 10px;\n  height: 10px;\n  margin-right: 2px;\n  display: inline-block;\n  transition: rotate .1s;\n}\n.jv-toggle.open {\n  rotate: 90deg;\n}\n.jv-key {\n  color: var(--jv-key-color);\n}\n.jv-string {\n  color: var(--jv-string-color);\n}\n.jv-number {\n  color: var(--jv-number-color);\n}\n.jv-boolean {\n  color: var(--jv-boolean-color);\n}\n.jv-null {\n  color: var(--jv-null-color);\n}\n.jv-undefined {\n  color: var(--jv-undefined-color);\n}\n.jv-function {\n  color: var(--jv-function-color);\n}\n.jv-regexp {\n  color: var(--jv-regexp-color);\n}\n.jv-list {\n  margin-left: 16px;\n}\n.jv-item:not(:has(.jv-toggle)) .jv-key {\n  margin-left: 12px;\n}\n.jv-item:not(:last-child):after {\n  content: \',\';\n}\n.jv-node > .jv-ellipsis {\n  display: none;\n}\n.jv-node.empty > .jv-list {\n  display: inline-block;\n  margin-inline: 4px;\n}\n.jv-node.collapsed > .jv-list,\n.jv-node.collapsed.empty > .jv-ellipsis {\n  display: none;\n}\n.jv-node.collapsed > .jv-ellipsis {\n  color: var(--jv-ellipsis-color);\n  background-color: var(--jv-ellipsis-bg);\n  display: inline-block;\n  line-height: 0.9;\n  font-size: 0.85em;\n  vertical-align: 2px;\n  cursor: pointer;\n  user-select: none;\n  padding: 2px 4px;\n  margin: 0px 4px;\n  border-radius: 3px;\n}\n</style>\n<div id="root" part="root"></div>\n<slot name="copy-button" part="copy-button" hidden>\n  <span class="jv-copy"></span>\n</slot>\n';class t extends HTMLElement{constructor(){super(),this._value=null,this.root=this.attachShadow({mode:"open"}),this.root.appendChild(e.content.cloneNode(!0)),this.container=this.root.getElementById("root")}static get observedAttributes(){return["value","expand-depth","copyable","sort","boxed","theme","parse"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}set value(e){e!==this._value&&(this._value=e,this.render())}get value(){return this._value??this.getAttribute("value")}set sort(e){this.setAttribute("sort",e?"true":"false")}get sort(){return this.hasAttribute("sort")}set parse(e){this.setAttribute("parse",e?"true":"false")}get parse(){return"false"!==this.getAttribute("parse")}set copyable(e){!1===e?this.removeAttribute("copyable"):this.setAttribute("copyable",JSON.stringify(e))}get copyable(){if(!this.hasAttribute("copyable"))return!1;const e=this.getAttribute("copyable"),t={copyText:"Copy",copiedText:"Copied",timeout:2e3,align:"right"};if(""===e||null===e)return t;try{return{...t,...JSON.parse(e)}}catch{return t}}get expandDepth(){return Number(this.getAttribute("expand-depth")??1)}copyText(e){return navigator.clipboard?(this.copyText=e=>navigator.clipboard.writeText(e),this.copyText(e)):(this.copyText=e=>new Promise((t,n)=>{const o=document.createElement("input");o.value=e,document.body.appendChild(o),o.select(),document.execCommand("copy")?(document.body.removeChild(o),t()):(document.body.removeChild(o),n(new Error("Copy failed")))}),this.copyText(e))}render(){if("string"==typeof this.value&&this.parse)try{this._value=JSON.parse(this.value)}catch{}this.container.innerHTML="",this.container.appendChild(this.build(this._value,0));const e=this.copyable;if(e){const t=e.align||"right",n=this.root.querySelector('slot[name="copy-button"]'),o=n.assignedElements()[0],r=this.root.querySelector(".jv-copy");if(n.hidden=!1,n.className=`align-${t}`,!o){let t;r.textContent=e.copyText;const n=r.cloneNode(!0);r.replaceWith(n),n.textContent=e.copyText,n.addEventListener("click",()=>{const o=JSON.stringify(this._value,null,2);this.copyText(o).then(()=>{n.textContent=e.copiedText,t=window.setTimeout(()=>{n.textContent=e.copyText,clearTimeout(t)},e.timeout),this.dispatchEvent(new CustomEvent("copy-success",{detail:{text:o,options:e}}))}).catch(()=>{console.warn("Failed to copy text to clipboard"),this.dispatchEvent(new CustomEvent("copy-error",{detail:{text:o,options:e}}))})})}}}build(e,t){if(null===e)return this.leaf("null","jv-null");if(void 0===e)return this.leaf("undefined","jv-undefined");if("boolean"==typeof e)return this.leaf(String(e),"jv-boolean");if("number"==typeof e)return this.leaf(String(e),"jv-number");if("string"==typeof e)return this.leaf(`"${e}"`,"jv-string");if("function"==typeof e)return this.leaf("<function>","jv-function");if(e instanceof RegExp)return this.leaf("<regexp>","jv-regexp");if(e instanceof Date)return this.leaf(`"${e.toLocaleString()}"`,"jv-string");const n=Array.isArray(e),o=document.createElement("span");o.className="jv-node",o.setAttribute("part","node");const r=document.createElement("div");r.className="jv-list",r.setAttribute("part","list");const s=n?this.sort?[...e.keys()].sort((e,t)=>e-t):[...e.keys()]:this.sort?Object.keys(e).sort():Object.keys(e);for(const l of s){const o=document.createElement("div"),s=this.build(e[l],t+1);if(o.className="jv-item",s instanceof Element&&s.classList.contains("jv-node")){const e=s.querySelector(".jv-toggle");e&&(e.remove(),o.append(e))}if(!n){const e=document.createElement("span");e.className="jv-key",e.setAttribute("part","key"),e.textContent=`"${l}": `,o.append(e)}o.append(s),r.append(o)}const i=document.createElement("span");i.className="jv-toggle",i.setAttribute("part","toggle"),o.classList.contains("collapsed")||i.classList.add("open"),i.addEventListener("click",()=>{o.classList.toggle("collapsed"),i.classList.toggle("open"),this.dispatchEvent(new CustomEvent("toggle",{detail:{node:o,data:e,isCollapsed:o.classList.contains("collapsed")}}))});const a=document.createElement("span");return a.className="jv-ellipsis",a.setAttribute("part","ellipsis"),a.textContent=`...${s.length}`,a.addEventListener("click",()=>{o.classList.remove("collapsed"),i.classList.add("open")}),t>=this.expandDepth&&(o.classList.add("collapsed"),i.classList.remove("open")),s.length||o.classList.add("empty"),o.append(i,n?"[":"{",a,r,n?"]":"}"),o}leaf(e,t){const n=document.createElement("span");return n.className=`jv-value ${t}`,n.setAttribute("part",`value ${t.replace("jv-","")}`),n.textContent=e,n}}customElements.define("json-viewer",t);export{t as JsonViewerElement};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "json-viewer-element",
   "type": "module",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "packageManager": "pnpm@10.18.2",
   "description": "A custom element for viewing and interacting with JSON data.",
   "author": "Lruihao (https://lruihao.cn)",