npm - data-diff-merge-table - Versions diffs - 1.0.0 - Mend

data-diff-merge-table 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,151 @@
+# DataDiffMergeTable 表格对比组件 API
+## Props
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| titles | Array\<String\> | `['', '']` | 左右对比表头标题 |
+| leftData | Array | `[]` | 左侧原始数据 |
+| rightData | Array | `[]` | 右侧原始数据 |
+| primaryKeys | Array\<String\> | `[]` | 主键字段列表，用于左右数据行对齐与对比 |
+| columns | Array | `[]` | 列定义，至少包含 `prop` `label` `width` |
+| height | String | `"28vh"` | 左右对比表高度 |
+| mergeHeight | String | `"28vh"` | 合并表高度 |
+| align | String | `"center"` | 列内容对齐方式，可选：`left` / `center` / `right` |
+| rowDiffBgColor | String | `"#5513137F"` | 差异/缺失行背景色 |
+| diffCellTextColor | String | `"#d9001b"` | 差异单元格字体色 |
+| isUseMerge | Boolean | `false` | 是否使用合并功能 |
+### columns 配置项（ColumnItem）
+| 字段 | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| prop | string | 是 | 对应数据字段名 |
+| label | string | 是 | 列标题 |
+| width | string \| number | 否 | 列宽 |
+## Emits
+| 事件名 | 参数 | 触发时机 | 说明 |
+|--------|------|----------|------|
+| merge-change | Array\<object\> | 合并表数据变化时 | 返回合并表当前数据（含用户编辑） |
+| selection-change | Record\<string, "left" \| "right" \| null\> | 选择状态变化时 | 返回每行选择状态映射 |
+### merge-change 数据项格式
+| 字段 | 说明 |
+|------|------|
+| __key | 行唯一键（由 `primaryKeys` 拼接） |
+| __side | 当前来源侧，`left` 或 `right` |
+| ...columns.prop | 合并表实际可编辑字段值 |
+## 交互规则
+- 一行数据只能选择左或右，互斥
+- 选择"某侧全选"后，会锁定该侧，另一侧禁选
+- 取消锁定全选后，恢复默认选中策略
+- 默认选中策略：
+  - 仅一侧有数据，默认选有数据侧
+  - 两侧都有数据，默认选"数据量更多的一侧"
+- 合并表主键列只读，不允许编辑
+- 左/右/合并三张表纵向与横向滚动同步
+- `hideSameRows=true` 时，对比区隐藏 same 行，但合并数据仍按当前选择生成
+## 使用示例
+```vue
+<script setup name="TelWorkLogDown">
+/**
+ * @author zhaoheng
+ * @description 对比合并组件（子组件）
+ */
+import {ref} from "vue";
+import DataDiffMergeTable from "@/views/payloadMonitor/telemetry/components/DataDiffMergeTable.vue";
+/**
+ * @author zhaoheng
+ * @description 左右表头标题
+ */
+const titles = ref(["左边数据", "右边数据"]);
+/**
+ * @author zhaoheng
+ * @description 表格列配置
+ * label: 列名
+ * prop: 字段名（需与数据字段一致）
+ */
+const columns = ref([
+  {label: "主键", prop: "id"},
+  {label: "名称", prop: "name"},
+  {label: "年龄", prop: "age"}
+]);
+/**
+ * @author zhaoheng
+ * @description 主键字段（用于左右数据行对齐）
+ */
+const primaryKeys = ref(["id"]);
+/**
+ * @author zhaoheng
+ * @description 左侧原始数据
+ */
+const leftData = [
+  {id: 0, name: "张三", age: 18},
+  {id: 1, name: "张三", age: 18},
+  {id: 2, name: "李四", age: 20},
+  {id: 4, name: "张三", age: 18},
+  {id: 5, name: "张三", age: 18}
+];
+/**
+ * @author zhaoheng
+ * @description 右侧原始数据
+ */
+const rightData = [
+  {id: 0, name: "张三", age: 18},
+  {id: 1, name: "王五", age: 22},
+  {id: 2, name: "张三", age: 19},
+  {id: 4, name: "李四", age: 18}
+];
+/**
+ * @author zhaoheng
+ * @description 合并表数据变化回调
+ * @param {Array} val - 当前合并表最终数据（包含用户编辑结果）
+ */
+function onMergeChange(val) {
+  console.log(val);
+}
+</script>
+<template>
+  <div>
+    <!--
+      @author zhaoheng
+      @description 对比合并主组件
+      isUseMerge=true: 开启合并模式（复选框 + 合并表 + merge-change）
+    -->
+    <DataDiffMergeTable
+      :titles="titles"
+      :left-data="leftData"
+      :right-data="rightData"
+      :primary-keys="primaryKeys"
+      :columns="columns"
+      height="28vh"
+      merge-height="28vh"
+      align="center"
+      row-diff-bg-color="#5513137F"
+      diff-cell-text-color="#d9001b"
+      :isUseMerge="true"
+      @merge-change="onMergeChange"
+    />
+  </div>
+</template>
+<style scoped lang="scss">
+/**
+ * @author zhaoheng
+ * @description 页面样式（当前无自定义样式）
+ */
+</style>

package/dist/index.mjs ADDED Viewed

@@ -0,0 +1,451 @@
+import { ref as y, computed as w, watch as U, onMounted as ke, onUnmounted as Me, resolveComponent as D, openBlock as m, createElementBlock as x, normalizeStyle as _e, createElementVNode as d, createVNode as v, createTextVNode as de, toDisplayString as b, Fragment as L, createCommentVNode as K, withCtx as s, createBlock as R, renderList as O, normalizeClass as I, nextTick as Se } from "vue";
+const Ce = (o, A) => {
+  const r = o.__vccOpts || o;
+  for (const [_, V] of A)
+    r[_] = V;
+  return r;
+}, Te = { class: "toolbar" }, Ue = { class: "count-text" }, De = { class: "diff-container-compare" }, xe = {
+  key: 0,
+  class: "diff-container-merge"
+}, Re = {
+  __name: "DataDiffMergeTable",
+  props: {
+    titles: { type: Array, default: () => ["", ""] },
+    leftData: { type: Array, default: () => [] },
+    rightData: { type: Array, default: () => [] },
+    primaryKeys: { type: Array, default: () => [] },
+    columns: { type: Array, default: () => [] },
+    height: { type: String, default: "28vh" },
+    mergeHeight: { type: String, default: "28vh" },
+    align: { type: String, default: "center" },
+    rowDiffBgColor: { type: String, default: "rgba(85, 19, 19, 0.5)" },
+    diffCellTextColor: { type: String, default: "#d9001b" },
+    selectedRowBgColor: { type: String, default: "rgba(0, 193, 16, 0.09)" },
+    isUseMerge: { type: Boolean, default: !1 }
+  },
+  emits: ["merge-change", "selection-change"],
+  setup(o, { emit: A }) {
+    const r = o, _ = A, V = y(null), G = y(null), J = y(null), S = y(null), C = y(null), T = y(null), N = y(!0), u = y({}), g = y(null), k = y([]);
+    let $ = !1;
+    const he = w(() => ({
+      "--row-diff-bg": r.rowDiffBgColor,
+      "--diff-cell-text": r.diffCellTextColor,
+      "--row-selected-bg": r.isUseMerge ? r.selectedRowBgColor : "transparent"
+    })), ve = w(() => new Set(r.primaryKeys || [])), z = (e) => ve.value.has(e), W = /* @__PURE__ */ new Map();
+    function j(e) {
+      const t = String(e ?? "");
+      if (W.has(t)) return W.get(t);
+      const l = Math.max(80, t.length * 14 + 24);
+      return W.set(t, l), l;
+    }
+    function q(e, t = 16) {
+      let l = 0, n = null;
+      return (...i) => {
+        const h = Date.now(), c = t - (h - l);
+        c <= 0 ? (n && (clearTimeout(n), n = null), l = h, e(...i)) : n || (n = setTimeout(() => {
+          l = Date.now(), n = null, e(...i);
+        }, c));
+      };
+    }
+    function F(e) {
+      if ($) return;
+      const t = {
+        left: S.value,
+        right: C.value,
+        merge: T.value
+      }, l = t[e];
+      if (!l) return;
+      $ = !0;
+      const n = l.scrollTop, i = l.scrollLeft;
+      Object.entries(t).forEach(([h, c]) => {
+        !c || h === e || (c.scrollTop = n, c.scrollLeft = i);
+      }), requestAnimationFrame(() => {
+        $ = !1;
+      });
+    }
+    const Q = q(() => F("left"), 16), X = q(() => F("right"), 16), Y = q(() => F("merge"), 16);
+    function Z() {
+      S.value && S.value.removeEventListener("scroll", Q), C.value && C.value.removeEventListener("scroll", X), T.value && T.value.removeEventListener("scroll", Y);
+    }
+    function ee() {
+      Se(() => {
+        Z(), S.value = V.value?.$el?.querySelector(".el-scrollbar__wrap") || null, C.value = G.value?.$el?.querySelector(".el-scrollbar__wrap") || null, T.value = J.value?.$el?.querySelector(".el-scrollbar__wrap") || null, S.value && S.value.addEventListener("scroll", Q, { passive: !0 }), C.value && C.value.addEventListener("scroll", X, { passive: !0 }), T.value && T.value.addEventListener("scroll", Y, { passive: !0 });
+      });
+    }
+    const te = (e) => e ?? null, le = (e) => e ?? "-", ae = (e = {}) => r.primaryKeys.map((t) => String(e?.[t] ?? "")).join("__"), p = w(() => {
+      const e = new Map(r.leftData.map((n) => [ae(n), n])), t = new Map(r.rightData.map((n) => [ae(n), n]));
+      return [.../* @__PURE__ */ new Set([...e.keys(), ...t.keys()])].sort().map((n) => {
+        const i = e.get(n) ?? null, h = t.get(n) ?? null, c = /* @__PURE__ */ new Set();
+        for (const a of r.columns) {
+          const f = a.prop;
+          te(i?.[f]) !== te(h?.[f]) && c.add(f);
+        }
+        const P = !i || !h ? "missing" : c.size > 0 ? "diff" : "same";
+        return { key: n, left: i, right: h, diffProps: c, rowType: P };
+      });
+    }), B = w(
+      () => N.value ? p.value.filter((e) => e.rowType !== "same") : p.value
+    ), me = w(
+      () => r.leftData.length >= r.rightData.length ? "left" : "right"
+    );
+    function pe(e, t) {
+      return !!e?.[t];
+    }
+    function E(e) {
+      return e.left && e.right ? me.value : e.left ? "left" : e.right ? "right" : null;
+    }
+    const M = w(() => ({
+      left: p.value.filter((e) => !!e.left),
+      right: p.value.filter((e) => !!e.right)
+    })), ne = w(() => {
+      if (!r.isUseMerge) return { left: !1, right: !1 };
+      const e = M.value.left.length, t = M.value.right.length, l = M.value.left.filter((i) => u.value[i.key] === "left").length, n = M.value.right.filter((i) => u.value[i.key] === "right").length;
+      return {
+        left: e > 0 && l === e,
+        right: t > 0 && n === t
+      };
+    }), re = w(() => {
+      if (!r.isUseMerge) return { left: !1, right: !1 };
+      const e = M.value.left.length, t = M.value.right.length, l = M.value.left.filter((i) => u.value[i.key] === "left").length, n = M.value.right.filter((i) => u.value[i.key] === "right").length;
+      return {
+        left: l > 0 && l < e,
+        right: n > 0 && n < t
+      };
+    });
+    U(
+      () => r.isUseMerge,
+      (e) => {
+        if (!e) {
+          u.value = {}, g.value = null, k.value = [], _("selection-change", {}), _("merge-change", []);
+          return;
+        }
+        const t = {};
+        for (const l of p.value)
+          t[l.key] = E(l);
+        u.value = t;
+      },
+      { immediate: !0 }
+    ), U(
+      () => p.value,
+      (e) => {
+        if (!r.isUseMerge) return;
+        const t = {};
+        for (const l of e) {
+          if (g.value) {
+            t[l.key] = l[g.value] ? g.value : null;
+            continue;
+          }
+          const n = u.value[l.key];
+          n === "left" && l.left ? t[l.key] = "left" : n === "right" && l.right ? t[l.key] = "right" : t[l.key] = E(l);
+        }
+        u.value = t;
+      },
+      { immediate: !0 }
+    );
+    const ie = w(() => {
+      if (!r.isUseMerge) return [];
+      const e = [];
+      for (const t of p.value) {
+        const l = u.value[t.key];
+        if (!l || !t[l]) continue;
+        const n = {};
+        r.columns.forEach((i) => {
+          n[i.prop] = t[l]?.[i.prop] ?? null;
+        }), e.push({
+          __key: t.key,
+          __side: l,
+          ...n
+        });
+      }
+      return e;
+    });
+    U(
+      [() => ie.value, () => r.columns, () => r.isUseMerge],
+      () => {
+        if (!r.isUseMerge) {
+          k.value = [];
+          return;
+        }
+        const e = new Map(k.value.map((l) => [l.__key, l])), t = [];
+        for (const l of ie.value) {
+          const n = e.get(l.__key);
+          n && n.__side === l.__side ? t.push(n) : t.push({ ...l });
+        }
+        k.value = t;
+      },
+      { deep: !0, immediate: !0 }
+    ), U(
+      () => k.value,
+      (e) => {
+        r.isUseMerge && _("merge-change", e);
+      },
+      { deep: !0, immediate: !0 }
+    ), U(
+      () => u.value,
+      (e) => {
+        r.isUseMerge && _("selection-change", e);
+      },
+      { deep: !0, immediate: !0 }
+    );
+    function oe(e, t) {
+      return r.isUseMerge ? u.value[e.key] === t : !1;
+    }
+    function H(e, t) {
+      return !r.isUseMerge || !pe(e, t) ? !0 : !!(g.value && g.value !== t);
+    }
+    function se(e, t, l) {
+      if (r.isUseMerge && !H(e, t)) {
+        if (g.value === t && !l) {
+          u.value[e.key] = t;
+          return;
+        }
+        if (l) {
+          u.value[e.key] = t;
+          return;
+        }
+        u.value[e.key] = E(e);
+      }
+    }
+    function ue(e, t) {
+      if (r.isUseMerge) {
+        if (t) {
+          const l = {};
+          for (const n of p.value)
+            l[n.key] = n[e] ? e : null;
+          u.value = l, g.value = e;
+          return;
+        }
+        if (g.value === e) {
+          g.value = null;
+          const l = {};
+          for (const n of p.value)
+            l[n.key] = E(n);
+          u.value = l;
+        }
+      }
+    }
+    function fe(e) {
+      return e.rowType === "missing" ? "row-missing" : e.rowType === "diff" ? "row-diff" : "";
+    }
+    const ye = ({ row: e }) => {
+      const t = fe(e), l = r.isUseMerge && u.value[e.key] === "left" ? "row-selected" : "";
+      return [t, l].filter(Boolean).join(" ");
+    }, be = ({ row: e }) => {
+      const t = fe(e), l = r.isUseMerge && u.value[e.key] === "right" ? "row-selected" : "";
+      return [t, l].filter(Boolean).join(" ");
+    }, ce = (e, t) => e.diffProps.has(t) ? "diff-cell" : "";
+    return ke(ee), U(
+      [() => r.columns, () => B.value.length, () => k.value.length, () => r.height, () => r.mergeHeight, () => r.isUseMerge],
+      ee,
+      { deep: !0, immediate: !0 }
+    ), Me(Z), (e, t) => {
+      const l = D("el-switch"), n = D("el-checkbox"), i = D("el-table-column"), h = D("el-table"), c = D("el-card"), P = D("el-input");
+      return m(), x("div", {
+        class: "diff-container-wrap",
+        style: _e(he.value)
+      }, [
+        d("div", Te, [
+          v(l, {
+            modelValue: N.value,
+            "onUpdate:modelValue": t[0] || (t[0] = (a) => N.value = a),
+            "active-text": "过滤相同行",
+            "inactive-text": "显示全部"
+          }, null, 8, ["modelValue"]),
+          d("span", Ue, [
+            de(" 共 " + b(p.value.length) + " 行，当前显示 " + b(B.value.length) + " 行 ", 1),
+            o.isUseMerge ? (m(), x(L, { key: 0 }, [
+              de("，合并 " + b(k.value.length) + " 行", 1)
+            ], 64)) : K("", !0)
+          ])
+        ]),
+        d("div", De, [
+          v(c, { class: "compare-card" }, {
+            header: s(() => [
+              d("div", null, [
+                d("span", null, b(o.titles[0]), 1)
+              ])
+            ]),
+            default: s(() => [
+              v(h, {
+                ref_key: "leftTableRef",
+                ref: V,
+                class: "left-table",
+                data: B.value,
+                border: "",
+                "row-class-name": ye,
+                height: o.height
+              }, {
+                default: s(() => [
+                  o.isUseMerge ? (m(), R(i, {
+                    key: 0,
+                    width: "50",
+                    align: o.align
+                  }, {
+                    header: s(() => [
+                      v(n, {
+                        "model-value": ne.value.left,
+                        indeterminate: re.value.left,
+                        disabled: g.value === "right",
+                        onChange: t[1] || (t[1] = (a) => ue("left", a))
+                      }, null, 8, ["model-value", "indeterminate", "disabled"])
+                    ]),
+                    default: s(({ row: a }) => [
+                      v(n, {
+                        "model-value": oe(a, "left"),
+                        disabled: H(a, "left"),
+                        onChange: (f) => se(a, "left", f)
+                      }, null, 8, ["model-value", "disabled", "onChange"])
+                    ]),
+                    _: 1
+                  }, 8, ["align"])) : K("", !0),
+                  (m(!0), x(L, null, O(o.columns, (a) => (m(), R(i, {
+                    key: `left-${a.prop}`,
+                    prop: a.prop,
+                    label: a.label,
+                    width: a.width,
+                    "min-width": a.width ? void 0 : j(a.label),
+                    align: o.align,
+                    "show-overflow-tooltip": ""
+                  }, {
+                    header: s(() => [
+                      d("span", null, b(a.label), 1)
+                    ]),
+                    default: s(({ row: f }) => [
+                      d("span", {
+                        class: I(ce(f, a.prop))
+                      }, b(le(f.left?.[a.prop])), 3)
+                    ]),
+                    _: 2
+                  }, 1032, ["prop", "label", "width", "min-width", "align"]))), 128))
+                ]),
+                _: 1
+              }, 8, ["data", "height"])
+            ]),
+            _: 1
+          }),
+          v(c, { class: "compare-card" }, {
+            header: s(() => [
+              d("div", null, [
+                d("span", null, b(o.titles[1]), 1)
+              ])
+            ]),
+            default: s(() => [
+              v(h, {
+                ref_key: "rightTableRef",
+                ref: G,
+                class: "right-table",
+                data: B.value,
+                border: "",
+                "row-class-name": be,
+                height: o.height
+              }, {
+                default: s(() => [
+                  o.isUseMerge ? (m(), R(i, {
+                    key: 0,
+                    width: "50",
+                    align: o.align
+                  }, {
+                    header: s(() => [
+                      v(n, {
+                        "model-value": ne.value.right,
+                        indeterminate: re.value.right,
+                        disabled: g.value === "left",
+                        onChange: t[2] || (t[2] = (a) => ue("right", a))
+                      }, null, 8, ["model-value", "indeterminate", "disabled"])
+                    ]),
+                    default: s(({ row: a }) => [
+                      v(n, {
+                        "model-value": oe(a, "right"),
+                        disabled: H(a, "right"),
+                        onChange: (f) => se(a, "right", f)
+                      }, null, 8, ["model-value", "disabled", "onChange"])
+                    ]),
+                    _: 1
+                  }, 8, ["align"])) : K("", !0),
+                  (m(!0), x(L, null, O(o.columns, (a) => (m(), R(i, {
+                    key: `right-${a.prop}`,
+                    prop: a.prop,
+                    label: a.label,
+                    width: a.width,
+                    "min-width": a.width ? void 0 : j(a.label),
+                    align: o.align,
+                    "show-overflow-tooltip": ""
+                  }, {
+                    header: s(() => [
+                      d("span", null, b(a.label), 1)
+                    ]),
+                    default: s(({ row: f }) => [
+                      d("span", {
+                        class: I(ce(f, a.prop))
+                      }, b(le(f.right?.[a.prop])), 3)
+                    ]),
+                    _: 2
+                  }, 1032, ["prop", "label", "width", "min-width", "align"]))), 128))
+                ]),
+                _: 1
+              }, 8, ["data", "height"])
+            ]),
+            _: 1
+          })
+        ]),
+        o.isUseMerge ? (m(), x("div", xe, [
+          v(c, { class: "merge-card" }, {
+            header: s(() => [...t[3] || (t[3] = [
+              d("div", null, [
+                d("span", null, "合并数据")
+              ], -1)
+            ])]),
+            default: s(() => [
+              v(h, {
+                ref_key: "mergeTableRef",
+                ref: J,
+                class: "merge-table",
+                data: k.value,
+                border: "",
+                height: o.mergeHeight,
+                "row-key": "__key"
+              }, {
+                default: s(() => [
+                  (m(!0), x(L, null, O(o.columns, (a) => (m(), R(i, {
+                    key: `merge-${a.prop}`,
+                    prop: a.prop,
+                    label: a.label,
+                    width: a.width,
+                    "min-width": a.width ? void 0 : j(a.label),
+                    align: o.align,
+                    "show-overflow-tooltip": ""
+                  }, {
+                    header: s(() => [
+                      d("span", null, b(a.label), 1)
+                    ]),
+                    default: s(({ row: f }) => [
+                      v(P, {
+                        modelValue: f[a.prop],
+                        "onUpdate:modelValue": (we) => f[a.prop] = we,
+                        size: "small",
+                        clearable: !z(a.prop),
+                        disabled: z(a.prop),
+                        class: I({ "readonly-input": z(a.prop) })
+                      }, null, 8, ["modelValue", "onUpdate:modelValue", "clearable", "disabled", "class"])
+                    ]),
+                    _: 2
+                  }, 1032, ["prop", "label", "width", "min-width", "align"]))), 128))
+                ]),
+                _: 1
+              }, 8, ["data", "height"])
+            ]),
+            _: 1
+          })
+        ])) : K("", !0)
+      ], 4);
+    };
+  }
+}, ge = /* @__PURE__ */ Ce(Re, [["__scopeId", "data-v-11b7a8dc"]]), Be = {
+  install(o) {
+    o.component("DataDiffMergeTable", ge), o.component("Data-Diff-MergeTable", ge);
+  }
+};
+export {
+  ge as DataDiffMergeTable,
+  Be as default
+};

package/dist/index.umd.cjs ADDED Viewed

@@ -0,0 +1 @@

package/dist/style.css ADDED Viewed

@@ -0,0 +1 @@

+ .diff-container-wrap[data-v-11b7a8dc]{display:flex;flex-direction:column;gap:10px;width:100%}.toolbar[data-v-11b7a8dc]{display:flex;align-items:center;gap:12px}.count-text[data-v-11b7a8dc]{color:#909399;font-size:12px}.diff-container-compare[data-v-11b7a8dc]{display:flex;gap:10px;width:100%}.compare-card[data-v-11b7a8dc]{flex:1 1 0;min-width:0}.diff-container-merge[data-v-11b7a8dc],.merge-card[data-v-11b7a8dc]{width:100%}@media(max-width:960px){.diff-container-compare[data-v-11b7a8dc]{flex-direction:column}.compare-card[data-v-11b7a8dc]{width:100%}}[data-v-11b7a8dc] .el-table .row-diff>td.el-table__cell{background:var(--row-diff-bg)!important}[data-v-11b7a8dc] .el-table .row-missing>td.el-table__cell{background:var(--row-diff-bg)!important}[data-v-11b7a8dc] .el-table .row-selected>td.el-table__cell{background:var(--row-selected-bg)!important}.diff-cell[data-v-11b7a8dc]{color:var(--diff-cell-text);font-weight:700}

package/dist/vite.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json ADDED Viewed

@@ -0,0 +1,39 @@
+{
+  "name": "data-diff-merge-table",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:lib": "vite build --mode lib",
+    "preview": "vite preview"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.umd.cjs",
+  "module": "./dist/index.mjs",
+  "style": "./dist/style.css",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.umd.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0",
+    "element-plus": "^2.0.0",
+    "@element-plus/icons-vue": "^2.0.0",
+    "gridstack": "^12.0.0"
+  },
+  "devDependencies": {
+    "@element-plus/icons-vue": "2.3.1",
+    "element-plus": "^2.10.3",
+    "gridstack": "^12.2.2",
+    "vue": "^3.5.25",
+    "@vitejs/plugin-vue": "^6.0.2",
+    "sass-embedded": "^1.97.3",
+    "vite": "^7.3.1"
+  }
+}