@cnc_cbz/usefultools-plugin-official 1.0.1

package/dist/json-diff.mjs

@@ -0,0 +1,704 @@
+import { defineComponent, ref, computed, onBeforeUnmount, openBlock, createElementBlock, createCommentVNode, createElementVNode, createTextVNode, toDisplayString, withDirectives, vModelText, Fragment, renderList, normalizeStyle, normalizeClass, nextTick } from "vue";
+const _hoisted_1 = { class: "flex flex-col h-full gap-3" };
+const _hoisted_2 = { class: "flex flex-wrap items-center gap-3" };
+const _hoisted_3 = { class: "ml-auto flex items-center gap-3" };
+const _hoisted_4 = {
+  key: 0,
+  class: "flex items-center gap-3 text-sm font-bold"
+};
+const _hoisted_5 = { class: "text-neon-green" };
+const _hoisted_6 = { class: "text-primary" };
+const _hoisted_7 = { class: "text-coral-red" };
+const _hoisted_8 = {
+  key: 0,
+  class: "px-4 py-2 bg-coral-red/20 border-2 border-coral-red rounded flex items-center gap-2 text-coral-red font-bold text-sm"
+};
+const _hoisted_9 = {
+  key: 1,
+  class: "flex-1 grid grid-cols-2 gap-3 min-h-0"
+};
+const _hoisted_10 = { class: "flex flex-col min-h-0" };
+const _hoisted_11 = { class: "flex items-center gap-2 mb-1.5" };
+const _hoisted_12 = { class: "flex flex-col min-h-0" };
+const _hoisted_13 = { class: "flex items-center gap-2 mb-1.5" };
+const _hoisted_14 = {
+  class: "absolute inset-0 w-full h-full pointer-events-none z-10",
+  style: { "overflow": "visible" }
+};
+const _hoisted_15 = ["d", "stroke"];
+const _hoisted_16 = { class: "p-2 font-mono text-sm" };
+const _hoisted_17 = ["data-path"];
+const _hoisted_18 = {
+  key: 1,
+  class: "text-gray-600 ml-0.5"
+};
+const _hoisted_19 = { class: "p-2 font-mono text-sm" };
+const _hoisted_20 = ["data-path"];
+const _hoisted_21 = {
+  key: 1,
+  class: "text-gray-600 ml-0.5"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  setup(__props) {
+    const oldJson = ref("");
+    const newJson = ref("");
+    const errorMsg = ref("");
+    const hasCompared = ref(false);
+    const leftRows = ref([]);
+    const rightRows = ref([]);
+    const diffMap = ref(/* @__PURE__ */ new Map());
+    const lines = ref([]);
+    const wrapperRef = ref(null);
+    const leftPanelRef = ref(null);
+    const rightPanelRef = ref(null);
+    function flatten(val, path, key, depth, parentIsArr, out) {
+      const isObj = val !== null && typeof val === "object";
+      if (isObj) {
+        out.push({ path, key, depth, val, isLeaf: false, parentIsArr });
+        const childIsArr = Array.isArray(val);
+        for (const k of Object.keys(val)) {
+          const cp = path ? childIsArr ? `${path}[${k}]` : `${path}.${k}` : k;
+          flatten(val[k], cp, k, depth + 1, childIsArr, out);
+        }
+      } else {
+        out.push({ path, key, depth, val, isLeaf: true, parentIsArr });
+      }
+    }
+    function collectDiff(oldVal, newVal, path, map) {
+      const oIsObj = oldVal !== null && typeof oldVal === "object";
+      const nIsObj = newVal !== null && typeof newVal === "object";
+      if (oIsObj && nIsObj && Array.isArray(oldVal) === Array.isArray(newVal)) {
+        const allKeys = /* @__PURE__ */ new Set([...Object.keys(oldVal), ...Object.keys(newVal)]);
+        const isArr = Array.isArray(oldVal);
+        for (const k of allKeys) {
+          const cp = path ? isArr ? `${path}[${k}]` : `${path}.${k}` : k;
+          if (k in oldVal && k in newVal) {
+            collectDiff(oldVal[k], newVal[k], cp, map);
+          } else if (k in oldVal) {
+            markAll(oldVal[k], cp, "removed", map);
+          } else {
+            markAll(newVal[k], cp, "added", map);
+          }
+        }
+      } else {
+        map.set(path, JSON.stringify(oldVal) === JSON.stringify(newVal) ? "equal" : "changed");
+      }
+    }
+    function markAll(val, path, type, map) {
+      map.set(path, type);
+      if (val !== null && typeof val === "object") {
+        const isArr = Array.isArray(val);
+        for (const k of Object.keys(val)) {
+          markAll(val[k], isArr ? `${path}[${k}]` : `${path}.${k}`, type, map);
+        }
+      }
+    }
+    function formatVal(v) {
+      if (v === null) return "null";
+      if (v === void 0) return "";
+      if (typeof v === "string") return `"${v}"`;
+      return String(v);
+    }
+    function formatBracket(val) {
+      return Array.isArray(val) ? `[${Object.keys(val).length}]` : `{${Object.keys(val).length}}`;
+    }
+    function getDiffType(path) {
+      return diffMap.value.get(path) ?? "equal";
+    }
+    function hasChildDiff(path) {
+      const prefix = path ? path + "." : "";
+      const prefixArr = path ? path + "[" : "";
+      for (const [k, v] of diffMap.value) {
+        if (v !== "equal" && (k.startsWith(prefix) || k.startsWith(prefixArr))) return true;
+      }
+      return false;
+    }
+    function rowDiffType(row) {
+      const dt = getDiffType(row.path);
+      if (dt !== "equal") return dt;
+      if (!row.isLeaf && hasChildDiff(row.path)) return "container-diff";
+      return "equal";
+    }
+    function updateLines() {
+      if (!wrapperRef.value || !leftPanelRef.value || !rightPanelRef.value) return;
+      const wRect = wrapperRef.value.getBoundingClientRect();
+      const result = [];
+      for (const [path, type] of diffMap.value) {
+        if (type !== "changed") continue;
+        const leftEl = leftPanelRef.value.querySelector(`[data-path="${CSS.escape(path)}"]`);
+        const rightEl = rightPanelRef.value.querySelector(`[data-path="${CSS.escape(path)}"]`);
+        if (!leftEl || !rightEl) continue;
+        const lRect = leftEl.getBoundingClientRect();
+        const rRect = rightEl.getBoundingClientRect();
+        result.push({
+          path,
+          type,
+          x1: lRect.right - wRect.left,
+          y1: lRect.top + lRect.height / 2 - wRect.top,
+          x2: rRect.left - wRect.left,
+          y2: rRect.top + rRect.height / 2 - wRect.top
+        });
+      }
+      lines.value = result;
+    }
+    function handleCompare() {
+      errorMsg.value = "";
+      let oldObj, newObj;
+      try {
+        oldObj = JSON.parse(oldJson.value);
+      } catch {
+        errorMsg.value = "A（原始JSON）解析失败";
+        return;
+      }
+      try {
+        newObj = JSON.parse(newJson.value);
+      } catch {
+        errorMsg.value = "B（新JSON）解析失败";
+        return;
+      }
+      const lRows = [], rRows = [];
+      flatten(oldObj, "", "root", 0, false, lRows);
+      flatten(newObj, "", "root", 0, false, rRows);
+      leftRows.value = lRows;
+      rightRows.value = rRows;
+      const map = /* @__PURE__ */ new Map();
+      collectDiff(oldObj, newObj, "", map);
+      diffMap.value = map;
+      hasCompared.value = true;
+      nextTick(() => {
+        var _a, _b;
+        updateLines();
+        (_a = leftPanelRef.value) == null ? void 0 : _a.addEventListener("scroll", updateLines);
+        (_b = rightPanelRef.value) == null ? void 0 : _b.addEventListener("scroll", updateLines);
+      });
+    }
+    function handleClear() {
+      oldJson.value = "";
+      newJson.value = "";
+      leftRows.value = [];
+      rightRows.value = [];
+      diffMap.value = /* @__PURE__ */ new Map();
+      lines.value = [];
+      hasCompared.value = false;
+      errorMsg.value = "";
+    }
+    function handleEdit() {
+      cleanup();
+      hasCompared.value = false;
+      leftRows.value = [];
+      rightRows.value = [];
+      diffMap.value = /* @__PURE__ */ new Map();
+      lines.value = [];
+    }
+    function handleSwap() {
+      const tmp = oldJson.value;
+      oldJson.value = newJson.value;
+      newJson.value = tmp;
+      if (hasCompared.value) handleCompare();
+    }
+    function handlePaste(target) {
+      navigator.clipboard.readText().then((t) => {
+        if (target === "old") oldJson.value = t;
+        else newJson.value = t;
+      });
+    }
+    function loadSample() {
+      oldJson.value = JSON.stringify({
+        name: "UsefulTools",
+        version: "1.0.0",
+        description: "工具集合",
+        features: ["JSON格式化", "代码高亮"],
+        config: { theme: "dark", lang: "zh-CN", autoSave: true },
+        author: { name: "开发者", email: "dev@example.com" },
+        count: 1024,
+        active: true
+      }, null, 2);
+      newJson.value = JSON.stringify({
+        name: "UsefulTools",
+        version: "2.0.0",
+        description: "实用工具集合",
+        features: ["JSON格式化", "代码高亮", "文本对比"],
+        config: { theme: "light", lang: "zh-CN", fontSize: 14 },
+        author: { name: "开发者", url: "https://example.com" },
+        count: 2048,
+        active: true,
+        tags: ["tool", "dev"]
+      }, null, 2);
+      handleCompare();
+    }
+    const stats = computed(() => {
+      let added = 0, removed = 0, changed = 0;
+      for (const [, v] of diffMap.value) {
+        if (v === "added") added++;
+        else if (v === "removed") removed++;
+        else if (v === "changed") changed++;
+      }
+      return { added, removed, changed };
+    });
+    function cleanup() {
+      var _a, _b;
+      (_a = leftPanelRef.value) == null ? void 0 : _a.removeEventListener("scroll", updateLines);
+      (_b = rightPanelRef.value) == null ? void 0 : _b.removeEventListener("scroll", updateLines);
+    }
+    onBeforeUnmount(cleanup);
+    function rowBgClass(row) {
+      const dt = rowDiffType(row);
+      if (dt === "added") return "bg-neon-green/12";
+      if (dt === "removed") return "bg-coral-red/12";
+      if (dt === "changed") return "bg-primary/10";
+      if (dt === "container-diff") return "bg-white/[0.02]";
+      return "";
+    }
+    function rowTextClass(row) {
+      const dt = rowDiffType(row);
+      if (dt === "added") return "text-neon-green";
+      if (dt === "removed") return "text-coral-red";
+      if (dt === "changed") return "text-primary";
+      return "text-gray-400";
+    }
+    function lineColor(type) {
+      if (type === "changed") return "#EAB308";
+      if (type === "added") return "#39FF14";
+      if (type === "removed") return "#FF6B6B";
+      return "#666";
+    }
+    function diffIcon(row) {
+      const dt = rowDiffType(row);
+      if (dt === "added") return "add_circle";
+      if (dt === "removed") return "remove_circle";
+      if (dt === "changed") return "change_circle";
+      return "";
+    }
+    function diffIconClass(row) {
+      const dt = rowDiffType(row);
+      if (dt === "added") return "text-neon-green/70";
+      if (dt === "removed") return "text-coral-red/70";
+      if (dt === "changed") return "text-primary/70";
+      return "";
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createCommentVNode(" Toolbar "),
+        createElementVNode("div", _hoisted_2, [
+          !hasCompared.value ? (openBlock(), createElementBlock("button", {
+            key: 0,
+            class: "h-9 px-4 bg-primary text-black font-bold border-2 border-black rounded shadow-hard-sm hover:shadow-none hover:translate-x-0.5 hover:translate-y-0.5 transition-all flex items-center gap-1.5 text-sm",
+            onClick: handleCompare
+          }, [..._cache[4] || (_cache[4] = [
+            createElementVNode(
+              "span",
+              { class: "material-icons text-lg" },
+              "compare_arrows",
+              -1
+              /* CACHED */
+            ),
+            createTextVNode(
+              "对比 ",
+              -1
+              /* CACHED */
+            )
+          ])])) : createCommentVNode("v-if", true),
+          hasCompared.value ? (openBlock(), createElementBlock("button", {
+            key: 1,
+            class: "h-9 px-4 bg-primary text-black font-bold border-2 border-black rounded shadow-hard-sm hover:shadow-none hover:translate-x-0.5 hover:translate-y-0.5 transition-all flex items-center gap-1.5 text-sm",
+            onClick: handleEdit
+          }, [..._cache[5] || (_cache[5] = [
+            createElementVNode(
+              "span",
+              { class: "material-icons text-lg" },
+              "edit",
+              -1
+              /* CACHED */
+            ),
+            createTextVNode(
+              "编辑 ",
+              -1
+              /* CACHED */
+            )
+          ])])) : createCommentVNode("v-if", true),
+          createElementVNode("button", {
+            class: "h-9 px-4 bg-white text-black font-bold border-2 border-black rounded shadow-hard-sm hover:shadow-none hover:translate-x-0.5 hover:translate-y-0.5 transition-all flex items-center gap-1.5 text-sm",
+            onClick: handleSwap
+          }, [..._cache[6] || (_cache[6] = [
+            createElementVNode(
+              "span",
+              { class: "material-icons text-lg" },
+              "swap_horiz",
+              -1
+              /* CACHED */
+            ),
+            createTextVNode(
+              "交换 ",
+              -1
+              /* CACHED */
+            )
+          ])]),
+          createElementVNode("button", {
+            class: "h-9 px-4 bg-coral-red text-white font-bold border-2 border-black rounded shadow-hard-sm hover:shadow-none hover:translate-x-0.5 hover:translate-y-0.5 transition-all flex items-center gap-1.5 text-sm",
+            onClick: handleClear
+          }, [..._cache[7] || (_cache[7] = [
+            createElementVNode(
+              "span",
+              { class: "material-icons text-lg" },
+              "delete_outline",
+              -1
+              /* CACHED */
+            ),
+            createTextVNode(
+              "清空 ",
+              -1
+              /* CACHED */
+            )
+          ])]),
+          createElementVNode("div", _hoisted_3, [
+            hasCompared.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
+              createElementVNode(
+                "span",
+                _hoisted_5,
+                "+" + toDisplayString(stats.value.added),
+                1
+                /* TEXT */
+              ),
+              createElementVNode(
+                "span",
+                _hoisted_6,
+                "~" + toDisplayString(stats.value.changed),
+                1
+                /* TEXT */
+              ),
+              createElementVNode(
+                "span",
+                _hoisted_7,
+                "-" + toDisplayString(stats.value.removed),
+                1
+                /* TEXT */
+              )
+            ])) : createCommentVNode("v-if", true),
+            createElementVNode("button", {
+              class: "h-9 px-3 bg-deep-charcoal text-gray-300 font-bold border-2 border-white/20 rounded hover:border-primary hover:text-primary transition-all text-sm flex items-center gap-1.5",
+              onClick: loadSample
+            }, [..._cache[8] || (_cache[8] = [
+              createElementVNode(
+                "span",
+                { class: "material-icons text-lg" },
+                "science",
+                -1
+                /* CACHED */
+              ),
+              createTextVNode(
+                "示例 ",
+                -1
+                /* CACHED */
+              )
+            ])])
+          ])
+        ]),
+        createCommentVNode(" Error "),
+        errorMsg.value ? (openBlock(), createElementBlock("div", _hoisted_8, [
+          _cache[9] || (_cache[9] = createElementVNode(
+            "span",
+            { class: "material-icons text-lg" },
+            "error_outline",
+            -1
+            /* CACHED */
+          )),
+          createTextVNode(
+            toDisplayString(errorMsg.value),
+            1
+            /* TEXT */
+          )
+        ])) : createCommentVNode("v-if", true),
+        createCommentVNode(" 编辑模式 "),
+        !hasCompared.value ? (openBlock(), createElementBlock("div", _hoisted_9, [
+          createElementVNode("div", _hoisted_10, [
+            createElementVNode("div", _hoisted_11, [
+              _cache[11] || (_cache[11] = createElementVNode(
+                "span",
+                { class: "text-sm font-bold text-gray-400 tracking-wider" },
+                "A 原始JSON",
+                -1
+                /* CACHED */
+              )),
+              createElementVNode("button", {
+                class: "ml-auto text-xs text-gray-500 hover:text-primary transition-colors flex items-center gap-1",
+                onClick: _cache[0] || (_cache[0] = ($event) => handlePaste("old"))
+              }, [..._cache[10] || (_cache[10] = [
+                createElementVNode(
+                  "span",
+                  { class: "material-icons text-sm" },
+                  "content_paste",
+                  -1
+                  /* CACHED */
+                ),
+                createTextVNode(
+                  "粘贴 ",
+                  -1
+                  /* CACHED */
+                )
+              ])])
+            ]),
+            withDirectives(createElementVNode(
+              "textarea",
+              {
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => oldJson.value = $event),
+                placeholder: "在此粘贴原始 JSON...",
+                spellcheck: "false",
+                class: "flex-1 w-full bg-deep-charcoal text-gray-100 border-4 border-black rounded-xl p-4 font-mono text-sm leading-relaxed resize-none shadow-hard focus:border-primary focus:shadow-none focus:translate-x-1 focus:translate-y-1 transition-all outline-none placeholder-gray-600"
+              },
+              null,
+              512
+              /* NEED_PATCH */
+            ), [
+              [vModelText, oldJson.value]
+            ])
+          ]),
+          createElementVNode("div", _hoisted_12, [
+            createElementVNode("div", _hoisted_13, [
+              _cache[13] || (_cache[13] = createElementVNode(
+                "span",
+                { class: "text-sm font-bold text-gray-400 tracking-wider" },
+                "B 新JSON",
+                -1
+                /* CACHED */
+              )),
+              createElementVNode("button", {
+                class: "ml-auto text-xs text-gray-500 hover:text-primary transition-colors flex items-center gap-1",
+                onClick: _cache[2] || (_cache[2] = ($event) => handlePaste("new"))
+              }, [..._cache[12] || (_cache[12] = [
+                createElementVNode(
+                  "span",
+                  { class: "material-icons text-sm" },
+                  "content_paste",
+                  -1
+                  /* CACHED */
+                ),
+                createTextVNode(
+                  "粘贴 ",
+                  -1
+                  /* CACHED */
+                )
+              ])])
+            ]),
+            withDirectives(createElementVNode(
+              "textarea",
+              {
+                "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => newJson.value = $event),
+                placeholder: "在此粘贴新 JSON...",
+                spellcheck: "false",
+                class: "flex-1 w-full bg-deep-charcoal text-gray-100 border-4 border-black rounded-xl p-4 font-mono text-sm leading-relaxed resize-none shadow-hard focus:border-primary focus:shadow-none focus:translate-x-1 focus:translate-y-1 transition-all outline-none placeholder-gray-600"
+              },
+              null,
+              512
+              /* NEED_PATCH */
+            ), [
+              [vModelText, newJson.value]
+            ])
+          ])
+        ])) : createCommentVNode("v-if", true),
+        createCommentVNode(" 对比结果：左右 JSON 树 + 连线 "),
+        hasCompared.value ? (openBlock(), createElementBlock(
+          "div",
+          {
+            key: 2,
+            ref_key: "wrapperRef",
+            ref: wrapperRef,
+            class: "flex-1 relative grid grid-cols-[1fr_60px_1fr] min-h-0"
+          },
+          [
+            createCommentVNode(" SVG 连线层（覆盖整个 wrapper） "),
+            (openBlock(), createElementBlock("svg", _hoisted_14, [
+              (openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList(lines.value, (l, idx) => {
+                  return openBlock(), createElementBlock("path", {
+                    key: idx,
+                    d: `M ${l.x1} ${l.y1} C ${l.x1 + 25} ${l.y1}, ${l.x2 - 25} ${l.y2}, ${l.x2} ${l.y2}`,
+                    stroke: lineColor(l.type),
+                    "stroke-width": "2",
+                    fill: "none",
+                    opacity: "0.7"
+                  }, null, 8, _hoisted_15);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ])),
+            createCommentVNode(" 左树 "),
+            createElementVNode(
+              "div",
+              {
+                ref_key: "leftPanelRef",
+                ref: leftPanelRef,
+                class: "bg-deep-charcoal border-4 border-black rounded-xl overflow-auto shadow-hard"
+              },
+              [
+                createElementVNode("div", _hoisted_16, [
+                  (openBlock(true), createElementBlock(
+                    Fragment,
+                    null,
+                    renderList(leftRows.value, (row, idx) => {
+                      return openBlock(), createElementBlock("div", {
+                        key: idx,
+                        "data-path": row.path,
+                        class: normalizeClass(["flex items-baseline py-0.5 px-2 rounded -mx-1", rowBgClass(row)]),
+                        style: normalizeStyle({ paddingLeft: row.depth * 16 + 8 + "px" })
+                      }, [
+                        createElementVNode(
+                          "span",
+                          {
+                            class: normalizeClass(["shrink-0 mr-1", rowTextClass(row)])
+                          },
+                          toDisplayString(row.parentIsArr ? `[${row.key}]` : row.key),
+                          3
+                          /* TEXT, CLASS */
+                        ),
+                        row.isLeaf ? (openBlock(), createElementBlock(
+                          Fragment,
+                          { key: 0 },
+                          [
+                            _cache[14] || (_cache[14] = createElementVNode(
+                              "span",
+                              { class: "text-gray-600 mx-0.5" },
+                              ":",
+                              -1
+                              /* CACHED */
+                            )),
+                            createElementVNode(
+                              "span",
+                              {
+                                class: normalizeClass(rowTextClass(row))
+                              },
+                              toDisplayString(formatVal(row.val)),
+                              3
+                              /* TEXT, CLASS */
+                            )
+                          ],
+                          64
+                          /* STABLE_FRAGMENT */
+                        )) : (openBlock(), createElementBlock(
+                          "span",
+                          _hoisted_18,
+                          toDisplayString(formatBracket(row.val)),
+                          1
+                          /* TEXT */
+                        )),
+                        diffIcon(row) ? (openBlock(), createElementBlock(
+                          "span",
+                          {
+                            key: 2,
+                            class: normalizeClass(["material-icons ml-auto shrink-0 text-sm leading-none", diffIconClass(row)])
+                          },
+                          toDisplayString(diffIcon(row)),
+                          3
+                          /* TEXT, CLASS */
+                        )) : createCommentVNode("v-if", true)
+                      ], 14, _hoisted_17);
+                    }),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ])
+              ],
+              512
+              /* NEED_PATCH */
+            ),
+            createCommentVNode(" 中间间距 "),
+            _cache[16] || (_cache[16] = createElementVNode(
+              "div",
+              null,
+              null,
+              -1
+              /* CACHED */
+            )),
+            createCommentVNode(" 右树 "),
+            createElementVNode(
+              "div",
+              {
+                ref_key: "rightPanelRef",
+                ref: rightPanelRef,
+                class: "bg-deep-charcoal border-4 border-black rounded-xl overflow-auto shadow-hard"
+              },
+              [
+                createElementVNode("div", _hoisted_19, [
+                  (openBlock(true), createElementBlock(
+                    Fragment,
+                    null,
+                    renderList(rightRows.value, (row, idx) => {
+                      return openBlock(), createElementBlock("div", {
+                        key: idx,
+                        "data-path": row.path,
+                        class: normalizeClass(["flex items-baseline py-0.5 px-2 rounded -mx-1", rowBgClass(row)]),
+                        style: normalizeStyle({ paddingLeft: row.depth * 16 + 8 + "px" })
+                      }, [
+                        createElementVNode(
+                          "span",
+                          {
+                            class: normalizeClass(["shrink-0 mr-1", rowTextClass(row)])
+                          },
+                          toDisplayString(row.parentIsArr ? `[${row.key}]` : row.key),
+                          3
+                          /* TEXT, CLASS */
+                        ),
+                        row.isLeaf ? (openBlock(), createElementBlock(
+                          Fragment,
+                          { key: 0 },
+                          [
+                            _cache[15] || (_cache[15] = createElementVNode(
+                              "span",
+                              { class: "text-gray-600 mx-0.5" },
+                              ":",
+                              -1
+                              /* CACHED */
+                            )),
+                            createElementVNode(
+                              "span",
+                              {
+                                class: normalizeClass(rowTextClass(row))
+                              },
+                              toDisplayString(formatVal(row.val)),
+                              3
+                              /* TEXT, CLASS */
+                            )
+                          ],
+                          64
+                          /* STABLE_FRAGMENT */
+                        )) : (openBlock(), createElementBlock(
+                          "span",
+                          _hoisted_21,
+                          toDisplayString(formatBracket(row.val)),
+                          1
+                          /* TEXT */
+                        )),
+                        diffIcon(row) ? (openBlock(), createElementBlock(
+                          "span",
+                          {
+                            key: 2,
+                            class: normalizeClass(["material-icons ml-auto shrink-0 text-sm leading-none", diffIconClass(row)])
+                          },
+                          toDisplayString(diffIcon(row)),
+                          3
+                          /* TEXT, CLASS */
+                        )) : createCommentVNode("v-if", true)
+                      ], 14, _hoisted_20);
+                    }),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ])
+              ],
+              512
+              /* NEED_PATCH */
+            )
+          ],
+          512
+          /* NEED_PATCH */
+        )) : createCommentVNode("v-if", true)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};