draw-table-vue 0.7.0 → 0.8.0

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "draw-table-vue",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "main": "./dist/draw-table.umd.js",
   "module": "./dist/draw-table.es.js",
-  "types": "./dist/draw-table-vue.d.ts",
+  "types": "./dist/draw-table.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/draw-table-vue.d.ts",
+      "types": "./dist/draw-table.d.ts",
       "import": "./dist/draw-table.es.js",
       "require": "./dist/draw-table.umd.js",
       "default": "./dist/draw-table.es.js"

package/dist/draw-table-vue.css

@@ -1 +0,0 @@
-.canvas-table-container[data-v-34fbfef2]{width:100%;height:100%;border:1px solid #ebeef5;box-sizing:border-box}.canvas-wrapper[data-v-34fbfef2]{background:#fff}.scrollbar[data-v-34fbfef2]{position:absolute;overflow:auto;z-index:10}.scrollbar.horizontal[data-v-34fbfef2]{bottom:0;left:0;right:0;height:12px}.scrollbar.vertical[data-v-34fbfef2]{top:0;right:0;bottom:0;width:12px}.scrollbar[data-v-34fbfef2]::-webkit-scrollbar{width:8px;height:8px}.scrollbar[data-v-34fbfef2]::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.scrollbar[data-v-34fbfef2]::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.table-overlays[data-v-34fbfef2]{z-index:5}.edit-btn[data-v-34fbfef2]{width:20px;height:20px;background:#fff;border:1px solid #dcdfe6;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#409eff;box-shadow:0 2px 4px #0000001a}.edit-btn[data-v-34fbfef2]:hover{background:#f5f7fa}.header-menu-overlay[data-v-34fbfef2]{position:absolute;inset:0;pointer-events:auto;z-index:20}.header-menu[data-v-34fbfef2]{background:#fff;border:1px solid #ebeef5;border-radius:4px;box-shadow:0 2px 12px #0000001a;padding:5px 0;min-width:120px}.menu-item[data-v-34fbfef2]{padding:8px 12px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:14px}.menu-item[data-v-34fbfef2]:hover{background:#f5f7fa;color:#409eff}.edit-dialog-popover[data-v-34fbfef2]{background:#fff;border-radius:4px;width:300px;box-shadow:0 2px 12px #0000001a;border:1px solid #ebeef5;display:flex;flex-direction:column;z-index:2000}.popover-click-mask[data-v-34fbfef2]{position:fixed;inset:0;z-index:1999}.edit-dialog-content[data-v-34fbfef2]{padding:12px}.edit-dialog-footer[data-v-34fbfef2]{padding:8px 12px;border-top:1px solid #ebeef5;display:flex;justify-content:flex-end;gap:8px}button.small[data-v-34fbfef2]{padding:4px 12px;font-size:12px}button.primary[data-v-34fbfef2]{background:#409eff;color:#fff;border-color:#409eff}

package/dist/index.d.ts

@@ -1 +0,0 @@
-export {}

package/dist/index.es.js

@@ -1,753 +0,0 @@
-import { defineComponent as J, ref as k, shallowRef as vt, computed as M, onMounted as gt, onUnmounted as mt, watch as O, openBlock as P, createElementBlock as z, createElementVNode as H, withModifiers as D, normalizeStyle as T, createCommentVNode as I, Fragment as U, renderList as q, toDisplayString as G, createBlock as Q, resolveDynamicComponent as wt, Teleport as pt, createVNode as yt, unref as Ct, h as B } from "vue";
-class Rt {
-  ctx;
-  canvas;
-  columns = [];
-  data = [];
-  options = {
-    rowHeight: 40,
-    headerHeight: 48,
-    border: !0,
-    stripe: !0,
-    multiSelect: !1,
-    fixedHeader: !0,
-    renderExpand: () => null,
-    spanMethod: () => {
-    }
-  };
-  scrollX = 0;
-  scrollY = 0;
-  width = 0;
-  height = 0;
-  // Layout info
-  columnPositions = [];
-  rowOffsets = [];
-  totalWidth = 0;
-  totalHeight = 0;
-  fixedLeftWidth = 0;
-  summaryRows = [];
-  expandedRowKeys = /* @__PURE__ */ new Set();
-  selectedRowKeys = /* @__PURE__ */ new Set();
-  imageCache = /* @__PURE__ */ new Map();
-  hoverHeaderIndex = -1;
-  flattenedColumns = [];
-  columnLevels = 0;
-  constructor(t) {
-    this.canvas = t;
-    const i = t.getContext("2d");
-    if (!i) throw new Error("Could not get canvas context");
-    this.ctx = i;
-  }
-  destroy() {
-    this.imageCache.forEach((t) => {
-      t.onload = null, t.onerror = null, t.src = "";
-    }), this.imageCache.clear(), this.data = [], this.columns = [], this.summaryRows = [];
-  }
-  setExpandedRows(t) {
-    this.expandedRowKeys = new Set(t), this.calculateLayout(), this.render();
-  }
-  setData(t) {
-    this.data = t, this.calculateLayout(), this.render();
-  }
-  setColumns(t) {
-    this.columns = t, this.flattenColumns(), this.calculateLayout(), this.render();
-  }
-  flattenColumns() {
-    this.flattenedColumns = [], this.columnLevels = 0;
-    const t = (s, r = 0) => {
-      this.columnLevels = Math.max(this.columnLevels, r + 1), s.forEach((o) => {
-        o.children && o.children.length > 0 ? t(o.children, r + 1) : this.flattenedColumns.push(o);
-      });
-    };
-    t(this.columns);
-    const i = 40;
-    this.columnLevels > 1 ? this.options.headerHeight = this.columnLevels * i : this.options.headerHeight = 48;
-  }
-  setOptions(t) {
-    this.options = { ...this.options, ...t }, this.calculateLayout(), this.render();
-  }
-  resize(t, i) {
-    this.width = t, this.height = i;
-    const s = window.devicePixelRatio || 1;
-    this.canvas.width = t * s, this.canvas.height = i * s, this.canvas.style.width = `${t}px`, this.canvas.style.height = `${i}px`, this.ctx.resetTransform(), this.ctx.scale(s, s), this.render();
-  }
-  scrollTo(t, i) {
-    this.scrollX = t, this.scrollY = i, this.render();
-  }
-  calculateLayout() {
-    let t = 0;
-    this.columnPositions = [0];
-    let i = 0;
-    this.flattenedColumns.forEach((o) => {
-      const l = o.width || 100;
-      t += l, this.columnPositions.push(t), (o.fixed === "left" || o.fixed === !0) && (i = t);
-    }), this.totalWidth = t, this.fixedLeftWidth = i;
-    let s = 0;
-    this.rowOffsets = [0];
-    const { rowHeight: r } = this.options;
-    this.data.forEach((o) => {
-      s += r, this.expandedRowKeys.has(o.id) && (s += r * 3), this.rowOffsets.push(s);
-    }), this.totalHeight = s, this.calculateSummaries();
-  }
-  getRowRange(t = 20) {
-    const { headerHeight: i } = this.options, s = this.summaryRows.length * this.options.rowHeight, r = this.height - i - s, o = this.scrollY, l = o + r;
-    let n = 0;
-    for (; n < this.rowOffsets.length && (this.rowOffsets[n + 1] ?? 0) < o; )
-      n++;
-    let a = n;
-    for (; a < this.rowOffsets.length && (this.rowOffsets[a] ?? 0) < l; )
-      a++;
-    return {
-      startRow: Math.max(0, n - t),
-      endRow: Math.min(this.data.length, a + 1)
-    };
-  }
-  calculateSummaries() {
-    this.summaryRows = [];
-    const t = /* @__PURE__ */ new Map();
-    this.flattenedColumns.forEach((i, s) => {
-      i.summary && i.summary.forEach((r) => {
-        try {
-          const o = r(this.data);
-          if (o && o.label) {
-            const { label: l, value: n } = o;
-            t.has(l) || t.set(l, new Array(this.flattenedColumns.length).fill("")), t.get(l)[s] = n;
-          }
-        } catch (o) {
-          console.error("Summary calculation error:", o);
-        }
-      });
-    }), t.forEach((i, s) => {
-      i[0] = s, this.summaryRows.push(i);
-    });
-  }
-  render() {
-    this.ctx.clearRect(0, 0, this.width, this.height), this.drawBody(), this.drawFixedLeftBody(), this.drawHeader(), this.drawSummaryRows();
-  }
-  getColumnWidth(t) {
-    return t.children && t.children.length > 0 ? t.children.reduce((s, r) => s + this.getColumnWidth(r), 0) : t.width || 100;
-  }
-  isColumnFixed(t) {
-    return t.fixed === "left" || t.fixed === "right" || t.fixed === !0 ? !0 : t.children && t.children.length > 0 ? t.children.some((i) => this.isColumnFixed(i)) : !1;
-  }
-  drawHeader() {
-    const { headerHeight: t } = this.options, i = this.columnLevels > 1 ? 40 : t;
-    this.ctx.save(), this.ctx.fillStyle = "#f5f7fa", this.ctx.fillRect(0, 0, this.width, t);
-    const s = (r, o, l, n, a) => {
-      let e = o;
-      r.forEach((c) => {
-        const f = this.getColumnWidth(c), d = this.isColumnFixed(c);
-        if (a !== d) {
-          e += f;
-          return;
-        }
-        const v = !c.children || c.children.length === 0, g = v ? (this.columnLevels - n) * i : i, R = a ? e : e - this.scrollX;
-        (a || R + f > this.fixedLeftWidth && R < this.width) && (a || (this.ctx.save(), this.ctx.beginPath(), this.ctx.rect(this.fixedLeftWidth, 0, this.width - this.fixedLeftWidth, t), this.ctx.clip()), this.drawHeaderCell(c, R, f, g, l, v), a || this.ctx.restore()), c.children && c.children.length > 0 && s(c.children, e, l + i, n + 1, a), e += f;
-      });
-    };
-    s(this.columns, 0, 0, 0, !1), s(this.columns, 0, 0, 0, !0), this.ctx.restore();
-  }
-  setHoverHeader(t) {
-    this.hoverHeaderIndex !== t && (this.hoverHeaderIndex = t, this.render());
-  }
-  setSelectedRows(t) {
-    this.selectedRowKeys = new Set(t), this.render();
-  }
-  drawHeaderCell(t, i, s, r, o, l) {
-    if (this.ctx.save(), this.ctx.beginPath(), this.ctx.rect(i, o, s, r), this.ctx.clip(), this.ctx.fillStyle = "#f5f7fa", this.ctx.fillRect(i, o, s, r), this.options.border && (this.ctx.strokeStyle = "#ebeef5", this.ctx.lineWidth = 1, this.ctx.strokeRect(i + 0.5, o + 0.5, s, r)), t.type === "selection") {
-      const n = this.data.length > 0 && this.selectedRowKeys.size === this.data.length;
-      this.drawCheckboxCell(n, i, o, s, r, "center");
-    } else {
-      this.ctx.fillStyle = "#303133", this.ctx.font = "bold 14px sans-serif", this.ctx.textBaseline = "middle";
-      const n = t.align || (l ? "left" : "center");
-      this.ctx.textAlign = n;
-      let a = i + 10;
-      n === "center" && (a = i + s / 2), n === "right" && (a = i + s - 24);
-      const e = t.title || "";
-      if (this.ctx.fillText(e, a, o + r / 2), l && t.type !== "selection" && t.type !== "expand") {
-        const c = this.flattenedColumns.indexOf(t);
-        if (this.hoverHeaderIndex === c) {
-          this.ctx.fillStyle = "#909399", this.ctx.beginPath();
-          const f = i + s - 18, d = o + r / 2;
-          this.ctx.arc(f, d - 4, 1.5, 0, Math.PI * 2), this.ctx.arc(f, d, 1.5, 0, Math.PI * 2), this.ctx.arc(f, d + 4, 1.5, 0, Math.PI * 2), this.ctx.fill();
-        }
-      }
-    }
-    this.ctx.restore();
-  }
-  getHeaderAt(t, i) {
-    const { headerHeight: s } = this.options;
-    if (i > s) return null;
-    const r = this.columnLevels > 1 ? 40 : s, o = (n, a, e, c) => {
-      let f = a;
-      for (const d of n) {
-        const v = this.isColumnFixed(d);
-        if (c !== v) {
-          f += this.getColumnWidth(d);
-          continue;
-        }
-        const g = this.getColumnWidth(d), R = !d.children || d.children.length === 0, y = R ? (this.columnLevels - e) * r : r, C = e * r, S = c ? f : f - this.scrollX;
-        if (!c && S < this.fixedLeftWidth) {
-          f += g;
-          continue;
-        }
-        if (t >= S && t < S + g && i >= C && i < C + y) {
-          const w = R && d.type !== "selection" && d.type !== "expand" && t >= S + g - 24;
-          return {
-            column: d,
-            rect: { x: S, y: C, width: g, height: y },
-            isMenu: w
-          };
-        }
-        if (d.children && d.children.length > 0) {
-          const w = o(d.children, f, e + 1, c);
-          if (w) return w;
-        }
-        f += g;
-      }
-      return null;
-    }, l = o(this.columns, 0, 0, !0);
-    return l || o(this.columns, 0, 0, !1);
-  }
-  drawBody() {
-    const { headerHeight: t } = this.options, { startRow: i, endRow: s } = this.getRowRange(this.height), r = this.summaryRows.length * this.options.rowHeight;
-    this.ctx.save(), this.ctx.beginPath(), this.ctx.rect(this.fixedLeftWidth, t, this.width - this.fixedLeftWidth, this.height - t - r), this.ctx.clip();
-    const o = /* @__PURE__ */ new Set(), l = [];
-    for (let n = i; n < s; n++) {
-      const a = this.data[n];
-      if (!a) continue;
-      const e = (this.rowOffsets[n] ?? 0) - this.scrollY + t, c = (this.rowOffsets[n + 1] ?? 0) - (this.rowOffsets[n] ?? 0), f = n % 2 === 1 && this.options.stripe ? "#fafafa" : "#fff";
-      if (this.flattenedColumns.forEach((d, v) => {
-        if (d.fixed === "left" || d.fixed === !0 || o.has(`${n},${v}`)) return;
-        const g = (this.columnPositions[v] ?? 0) - this.scrollX, R = (this.columnPositions[v + 1] ?? 0) - (this.columnPositions[v] ?? 0), y = this.options.spanMethod({ row: n, column: d, rowIndex: n, columnIndex: v });
-        if (y) {
-          const { rowspan: C, colspan: S } = y;
-          if (C === 0 || S === 0) return;
-          const w = (this.columnPositions[v + S] ?? this.totalWidth) - (this.columnPositions[v] ?? 0), L = (this.rowOffsets[n + C] ?? this.totalHeight) - (this.rowOffsets[n] ?? 0);
-          for (let b = 0; b < C; b++)
-            for (let Y = 0; Y < S; Y++)
-              o.add(`${n + b},${v + Y}`);
-          l.push({ col: d, val: a[d.key || ""], x: g, y: e, w, h: L, r: n, c: v, bgColor: f });
-        } else
-          this.ctx.fillStyle = f, this.ctx.fillRect(g, e, R, this.options.rowHeight), this.drawCell(d, a[d.key || ""], g, e, R, this.options.rowHeight, n), this.options.border && (this.ctx.strokeStyle = "#ebeef5", this.ctx.strokeRect(g + 0.5, e + 0.5, R, this.options.rowHeight));
-      }), this.expandedRowKeys.has(a.id)) {
-        const d = e + this.options.rowHeight, v = c - this.options.rowHeight;
-        this.ctx.fillStyle = "#fdfdfd", this.ctx.fillRect(0, d, this.width, v), this.options.border && (this.ctx.strokeStyle = "#ebeef5", this.ctx.beginPath(), this.ctx.moveTo(0, d), this.ctx.lineTo(this.width, d), this.ctx.stroke()), this.drawExpandPlaceholder(a, this.fixedLeftWidth - this.scrollX, d, this.totalWidth - this.fixedLeftWidth, v);
-      }
-    }
-    l.forEach(({ col: n, val: a, x: e, y: c, w: f, h: d, r: v, bgColor: g }) => {
-      this.ctx.fillStyle = g, this.ctx.fillRect(e, c, f, d), this.drawCell(n, a, e, c, f, d, v), this.options.border && (this.ctx.strokeStyle = "#ebeef5", this.ctx.strokeRect(e + 0.5, c + 0.5, f, d));
-    }), this.ctx.restore();
-  }
-  drawFixedLeftBody() {
-    const { headerHeight: t } = this.options, { startRow: i, endRow: s } = this.getRowRange(this.height), r = this.summaryRows.length * this.options.rowHeight;
-    this.ctx.save(), this.ctx.beginPath(), this.ctx.rect(0, t, this.fixedLeftWidth, this.height - t - r), this.ctx.clip();
-    const o = /* @__PURE__ */ new Set(), l = [];
-    for (let n = i; n < s; n++) {
-      const a = this.data[n];
-      if (!a) continue;
-      const e = (this.rowOffsets[n] ?? 0) - this.scrollY + t, c = n % 2 === 1 && this.options.stripe ? "#fafafa" : "#fff";
-      this.flattenedColumns.forEach((f, d) => {
-        if (!(f.fixed === "left" || f.fixed === !0) || o.has(`${n},${d}`)) return;
-        const v = this.columnPositions[d] ?? 0, g = (this.columnPositions[d + 1] ?? 0) - (this.columnPositions[d] ?? 0), R = this.options.spanMethod({ row: n, column: f, rowIndex: n, columnIndex: d });
-        if (R) {
-          const { rowspan: y, colspan: C } = R;
-          if (y === 0 || C === 0) return;
-          const S = (this.columnPositions[d + C] ?? this.fixedLeftWidth) - (this.columnPositions[d] ?? 0), w = (this.rowOffsets[n + y] ?? this.totalHeight) - (this.rowOffsets[n] ?? 0);
-          for (let L = 0; L < y; L++)
-            for (let b = 0; b < C; b++)
-              o.add(`${n + L},${d + b}`);
-          l.push({ col: f, val: a[f.key || ""], x: v, y: e, w: S, h: w, r: n, c: d, bgColor: c });
-        } else
-          this.ctx.fillStyle = c, this.ctx.fillRect(v, e, g, this.options.rowHeight), this.drawCell(f, a[f.key || ""], v, e, g, this.options.rowHeight, n), this.options.border && (this.ctx.strokeStyle = "#ebeef5", this.ctx.strokeRect(v + 0.5, e + 0.5, g, this.options.rowHeight));
-      });
-    }
-    l.forEach(({ col: n, val: a, x: e, y: c, w: f, h: d, r: v, bgColor: g }) => {
-      this.ctx.fillStyle = g, this.ctx.fillRect(e, c, f, d), this.drawCell(n, a, e, c, f, d, v), this.options.border && (this.ctx.strokeStyle = "#ebeef5", this.ctx.strokeRect(e + 0.5, c + 0.5, f, d));
-    }), this.ctx.restore();
-  }
-  drawExpandPlaceholder(t, i, s, r, o) {
-    this.ctx.save(), this.ctx.fillStyle = "#fef0f0", this.ctx.fillRect(i, s, r, o), this.ctx.fillStyle = "#f56c6c", this.ctx.font = "italic 12px sans-serif", this.ctx.textAlign = "center", this.ctx.fillText(`Expanded content for row ${t.id} (Rendered via h function in overlay)`, i + r / 2, s + o / 2), this.ctx.restore();
-  }
-  drawSummaryRows() {
-    if (this.summaryRows.length === 0) return;
-    const { rowHeight: t } = this.options, i = this.summaryRows.length * t, s = this.height - i;
-    this.ctx.save(), this.ctx.fillStyle = "#fdf6ec", this.ctx.fillRect(0, s, this.width, i);
-    let r = 0;
-    for (let o = 0; o < this.flattenedColumns.length; o++) {
-      const l = this.flattenedColumns[o];
-      if (l && (l.type === "selection" || l.type === "expand" || l.key === "id"))
-        r++;
-      else
-        break;
-    }
-    r === 0 && (r = 1), this.summaryRows.forEach((o, l) => {
-      const n = s + l * t;
-      this.ctx.save(), this.ctx.beginPath(), this.ctx.rect(this.fixedLeftWidth, n, this.width - this.fixedLeftWidth, t), this.ctx.clip(), this.flattenedColumns.forEach((a, e) => {
-        if (a.fixed === "left" || a.fixed === !0 || e < r) return;
-        const c = (this.columnPositions[e] ?? 0) - this.scrollX, f = (this.columnPositions[e + 1] ?? 0) - (this.columnPositions[e] ?? 0);
-        this.drawTextCell(o[e], c, n, f, t, a.align), this.options.border && (this.ctx.strokeStyle = "#ebeef5", this.ctx.strokeRect(c + 0.5, n + 0.5, f, t));
-      }), this.ctx.restore(), this.flattenedColumns.forEach((a, e) => {
-        if (a.fixed === "left" || a.fixed === !0) {
-          const c = this.columnPositions[e] ?? 0, f = (this.columnPositions[e + 1] ?? 0) - (this.columnPositions[e] ?? 0);
-          if (e === 0) {
-            const d = (this.columnPositions[r] ?? this.fixedLeftWidth) - (this.columnPositions[0] ?? 0);
-            this.ctx.save(), this.ctx.font = "bold 13px sans-serif", this.ctx.fillStyle = "#e6a23c", this.drawTextCell(o[0], c, n, d, t, "center"), this.ctx.restore(), this.options.border && (this.ctx.strokeStyle = "#ebeef5", this.ctx.strokeRect(c + 0.5, n + 0.5, d, t));
-          } else {
-            if (e < r)
-              return;
-            this.drawTextCell(o[e], c, n, f, t, a.align), this.options.border && (this.ctx.strokeStyle = "#ebeef5", this.ctx.strokeRect(c + 0.5, n + 0.5, f, t));
-          }
-        }
-      });
-    }), this.ctx.restore();
-  }
-  drawCell(t, i, s, r, o, l, n) {
-    if (this.ctx.save(), this.ctx.beginPath(), this.ctx.rect(s, r, o, l), this.ctx.clip(), t.renderCell)
-      this.drawTextCell(i, s, r, o, l, t.align);
-    else
-      switch (t.type) {
-        case "expand":
-          this.drawExpandButton(s + (o - 16) / 2, r + (this.options.rowHeight - 16) / 2, this.expandedRowKeys.has(this.data[n]?.id ?? ""));
-          break;
-        case "selection":
-          const a = this.selectedRowKeys.has(this.data[n]?.id ?? "");
-          this.drawCheckboxCell(a, s, r, o, this.options.rowHeight, "center");
-          break;
-        case "image":
-          this.drawImageCell(i, s, r, o, l, t.align);
-          break;
-        case "checkbox":
-          this.drawCheckboxCell(i, s, r, o, l, t.align);
-          break;
-        case "radio":
-          this.drawRadioCell(i, s, r, o, l, t.align);
-          break;
-        case "switch":
-          this.drawSwitchCell(i, s, r, o, l, t.align);
-          break;
-        case "color-picker":
-          this.drawColorPickerCell(i, s, r, o, l, t.align);
-          break;
-        case "tags":
-          this.drawTagsCell(i, s, r, o, l);
-          break;
-        default:
-          this.drawTextCell(i, s, r, o, l, t.align);
-          break;
-      }
-    this.ctx.restore();
-  }
-  drawExpandButton(t, i, s) {
-    this.ctx.save(), this.ctx.translate(t + 8, i + 8), s && this.ctx.rotate(Math.PI / 2), this.ctx.strokeStyle = "#909399", this.ctx.lineWidth = 2, this.ctx.beginPath(), this.ctx.moveTo(-3, -5), this.ctx.lineTo(3, 0), this.ctx.lineTo(-3, 5), this.ctx.stroke(), this.ctx.restore();
-  }
-  drawTextCell(t, i, s, r, o, l) {
-    this.ctx.fillStyle = "#606266", this.ctx.font = "14px sans-serif", this.ctx.textAlign = l || "left", this.ctx.textBaseline = "middle";
-    let n = i + 10;
-    l === "center" && (n = i + r / 2), l === "right" && (n = i + r - 10);
-    const a = t == null ? "" : String(t);
-    this.ctx.fillText(a, n, s + o / 2);
-  }
-  drawImageCell(t, i, s, r, o, l) {
-    if (!t) return;
-    const n = String(t), a = Math.min(r, o) - 10;
-    let e = i + 5;
-    l === "center" && (e = i + (r - a) / 2), l === "right" && (e = i + r - a - 5);
-    let c = this.imageCache.get(n);
-    c || (c = new Image(), c.src = n, this.imageCache.set(n, c), c.onload = () => this.render(), c.onerror = () => {
-      console.error(`Failed to load image: ${n}`), this.imageCache.delete(n);
-    }), c.complete && c.naturalWidth > 0 ? this.ctx.drawImage(c, e, s + (o - a) / 2, a, a) : (this.ctx.fillStyle = "#f5f7fa", this.ctx.fillRect(e, s + (o - a) / 2, a, a));
-  }
-  drawCheckboxCell(t, i, s, r, o, l) {
-    let a = i + 10;
-    l === "center" && (a = i + (r - 16) / 2), l === "right" && (a = i + r - 16 - 10);
-    const e = s + (o - 16) / 2;
-    this.ctx.strokeStyle = t ? "#409eff" : "#dcdfe6", this.ctx.fillStyle = t ? "#409eff" : "#fff", this.ctx.lineWidth = 1, this.ctx.strokeRect(a + 0.5, e + 0.5, 16, 16), t && (this.ctx.fillRect(a + 1, e + 1, 15, 15), this.ctx.strokeStyle = "#fff", this.ctx.beginPath(), this.ctx.moveTo(a + 4, e + 8), this.ctx.lineTo(a + 7, e + 11), this.ctx.lineTo(a + 12, e + 5), this.ctx.stroke());
-  }
-  drawRadioCell(t, i, s, r, o, l) {
-    let a = i + 10;
-    l === "center" && (a = i + (r - 16) / 2), l === "right" && (a = i + r - 16 - 10);
-    const e = s + (o - 16) / 2, c = a + 16 / 2, f = e + 16 / 2;
-    this.ctx.strokeStyle = t ? "#409eff" : "#dcdfe6", this.ctx.fillStyle = "#fff", this.ctx.beginPath(), this.ctx.arc(c, f, 16 / 2, 0, Math.PI * 2), this.ctx.stroke(), this.ctx.fill(), t && (this.ctx.fillStyle = "#409eff", this.ctx.beginPath(), this.ctx.arc(c, f, 16 / 4, 0, Math.PI * 2), this.ctx.fill());
-  }
-  drawSwitchCell(t, i, s, r, o, l) {
-    let e = i + 10;
-    l === "center" && (e = i + (r - 32) / 2), l === "right" && (e = i + r - 32 - 10);
-    const c = s + (o - 16) / 2;
-    this.ctx.fillStyle = t ? "#13ce66" : "#ff4949", this.ctx.beginPath(), this.ctx.roundRect?.(e, c, 32, 16, 16 / 2), this.ctx.fill(), this.ctx.fillStyle = "#fff", this.ctx.beginPath();
-    const f = t ? e + 32 - 16 + 2 : e + 2;
-    this.ctx.arc(f + 12 / 2, c + 16 / 2, 12 / 2, 0, Math.PI * 2), this.ctx.fill();
-  }
-  drawColorPickerCell(t, i, s, r, o, l) {
-    let a = i + 10;
-    l === "center" && (a = i + (r - 20) / 2), l === "right" && (a = i + r - 20 - 10);
-    const e = s + (o - 20) / 2;
-    this.ctx.fillStyle = t || "#000", this.ctx.fillRect(a, e, 20, 20), this.ctx.strokeStyle = "#dcdfe6", this.ctx.strokeRect(a + 0.5, e + 0.5, 20, 20);
-  }
-  drawTagsCell(t, i, s, r, o) {
-    if (!Array.isArray(t)) return;
-    let l = i + 5;
-    const n = 20, a = 5, e = 12;
-    t.forEach((c) => {
-      const f = String(c);
-      this.ctx.font = `${e}px sans-serif`;
-      const v = this.ctx.measureText(f).width + a * 2;
-      if (l + v > i + r - 5) return;
-      const g = s + (o - n) / 2;
-      this.ctx.fillStyle = "#ecf5ff", this.ctx.strokeStyle = "#d9ecff", this.ctx.beginPath(), this.ctx.roundRect?.(l, g, v, n, 4), this.ctx.fill(), this.ctx.stroke(), this.ctx.fillStyle = "#409eff", this.ctx.textAlign = "center", this.ctx.fillText(f, l + v / 2, g + n - e / 2), l += v + 5;
-    });
-  }
-  getCellAt(t, i) {
-    const { headerHeight: s } = this.options;
-    if (i < s) return null;
-    const { startRow: r, endRow: o } = this.getRowRange(this.height);
-    for (let l = r; l < o; l++) {
-      const n = this.data[l];
-      if (!n) continue;
-      const a = (this.rowOffsets[l] ?? 0) - this.scrollY + s, e = (this.rowOffsets[l + 1] ?? 0) - (this.rowOffsets[l] ?? 0);
-      if (i >= a && i < a + e)
-        for (let c = 0; c < this.flattenedColumns.length; c++) {
-          const f = this.flattenedColumns[c], d = (this.columnPositions[c + 1] ?? 0) - (this.columnPositions[c] ?? 0);
-          let v = 0;
-          if (f.fixed === "left" || f.fixed === !0)
-            v = this.columnPositions[c] ?? 0;
-          else if (v = (this.columnPositions[c] ?? 0) - this.scrollX, v < this.fixedLeftWidth) continue;
-          if (t >= v && t < v + d) {
-            const g = f.type === "expand", R = f.type === "selection";
-            return {
-              row: l,
-              col: c,
-              rect: { x: v, y: a, width: d, height: e },
-              column: f,
-              data: n,
-              isExpandBtn: g,
-              isSelection: R
-            };
-          }
-        }
-    }
-    return null;
-  }
-  getRowOffsets() {
-    return this.rowOffsets;
-  }
-  getScrollX() {
-    return this.scrollX;
-  }
-  getScrollY() {
-    return this.scrollY;
-  }
-  getFixedLeftWidth() {
-    return this.fixedLeftWidth;
-  }
-  getTotalWidth() {
-    return this.totalWidth;
-  }
-  getTotalHeight() {
-    return this.totalHeight;
-  }
-}
-const St = ["onClick"], bt = { class: "icon" }, kt = { class: "label" }, Ht = { class: "edit-dialog-content" }, Et = /* @__PURE__ */ J({
-  __name: "CanvasTable",
-  props: {
-    columns: {},
-    data: {},
-    options: {}
-  },
-  emits: ["update:data", "select-change", "header-command"],
-  setup(X, { emit: t }) {
-    const i = J({
-      props: ["vnode"],
-      setup(h) {
-        return () => h.vnode;
-      }
-    }), s = X, r = t, o = k(null), l = k(null), n = k(null), a = k(null), e = vt(null), c = k(0), f = k(0), d = k(0), v = k(0), g = k(0), R = k(0), y = k(null), C = k(null), S = k(null), w = k(/* @__PURE__ */ new Set()), L = k(/* @__PURE__ */ new Set()), b = k(null), Y = M(() => ({
-      width: "100%",
-      height: "100%",
-      position: "relative",
-      overflow: "hidden"
-    })), Z = M(() => ({
-      position: "absolute",
-      top: 0,
-      left: 0,
-      pointerEvents: "none",
-      width: "100%",
-      height: "100%"
-    })), j = M(() => {
-      if (!y.value) return {};
-      const { rect: h } = y.value;
-      return {
-        position: "absolute",
-        left: `${h.x + h.width - 24}px`,
-        top: `${h.y + (h.height - 20) / 2}px`,
-        pointerEvents: "auto"
-      };
-    }), tt = M(() => {
-      if (!C.value || !l.value) return {};
-      const h = l.value.getBoundingClientRect(), { rect: x } = C.value;
-      let u = h.top + x.y + x.height + 5, m = h.left + x.x;
-      const p = 300;
-      return m + p > window.innerWidth && (m = window.innerWidth - p - 20), {
-        position: "fixed",
-        top: `${u}px`,
-        left: `${m}px`,
-        zIndex: 2e3,
-        pointerEvents: "auto"
-      };
-    }), et = M(() => {
-      if (!b.value) return {};
-      const { rect: h } = b.value;
-      return {
-        position: "absolute",
-        left: `${h.x + h.width - 120}px`,
-        top: `${h.y + h.height}px`,
-        pointerEvents: "auto"
-      };
-    }), st = M(() => {
-      if (!b.value) return [];
-      const { column: h } = b.value, x = [
-        {
-          label: "Fix to Left",
-          onCommand: (u) => {
-            const m = s.columns.findIndex((p) => p.key === u.key);
-            s.columns.forEach((p, E) => {
-              E <= m && (p.fixed = "left");
-            }), e.value?.setColumns(s.columns);
-          }
-        },
-        {
-          label: "Unfix",
-          onCommand: (u) => {
-            u.fixed = !1, e.value?.setColumns(s.columns);
-          }
-        }
-      ];
-      return h.renderHeaderMenu ? h.renderHeaderMenu(h, x) : x;
-    }), it = (h) => {
-      b.value && (h.onCommand(b.value.column), b.value = null);
-    }, K = (h) => {
-      if (!l.value || !e.value) return;
-      const x = l.value.getBoundingClientRect(), u = h.clientX - x.left, m = h.clientY - x.top, p = e.value.getHeaderAt(u, m);
-      if (p) {
-        const E = s.columns.findIndex((W) => W.key === p.column.key);
-        e.value.setHoverHeader(E), p.isMenu || p.column.type === "selection" ? l.value.style.cursor = "pointer" : l.value.style.cursor = "default";
-      } else
-        e.value.setHoverHeader(-1), l.value.style.cursor = "default";
-      y.value = e.value.getCellAt(u, m), y.value && (y.value.isExpandBtn || y.value.isSelection) && (l.value.style.cursor = "pointer");
-    }, V = (h) => {
-      if (!l.value || !e.value) return;
-      const x = l.value.getBoundingClientRect(), u = h.clientX - x.left, m = h.clientY - x.top, p = e.value.getHeaderAt(u, m);
-      if (p) {
-        p.isMenu ? b.value = { column: p.column, rect: p.rect } : p.column.type === "selection" && (w.value.size === s.data.length ? w.value.clear() : s.data.forEach((xt) => w.value.add(xt.id)), e.value.setSelectedRows(Array.from(w.value)), r("select-change", Array.from(w.value)));
-        return;
-      }
-      const E = e.value.getCellAt(u, m);
-      if (E) {
-        if (E.isExpandBtn) {
-          lt(E.data.id);
-          return;
-        }
-        const W = E.data.id;
-        if (E.isSelection) {
-          w.value.has(W) ? w.value.delete(W) : w.value.add(W), e.value.setSelectedRows(Array.from(w.value)), r("select-change", Array.from(w.value));
-          return;
-        }
-        s.options?.multiSelect ? w.value.has(W) ? w.value.delete(W) : w.value.add(W) : (w.value.clear(), w.value.add(W)), r("select-change", Array.from(w.value));
-      }
-    }, N = (h) => {
-      if (!l.value || !e.value) return;
-      const x = l.value.getBoundingClientRect(), u = h.clientX - x.left, m = h.clientY - x.top, p = e.value.getCellAt(u, m);
-      p && p.column.renderEdit && F(p);
-    }, F = (h) => {
-      C.value = h, S.value = JSON.parse(JSON.stringify(h.data));
-    }, lt = (h) => {
-      L.value.has(h) ? L.value.delete(h) : L.value.add(h), e.value?.setExpandedRows(Array.from(L.value)), $();
-    }, A = () => {
-      C.value = null, S.value = null;
-    }, nt = () => {
-      if (C.value && S.value) {
-        const h = C.value.data.id, x = s.data.findIndex((u) => u.id === h);
-        if (x !== -1) {
-          const u = [...s.data];
-          u[x] = S.value, r("update:data", u), e.value?.setData(u);
-        }
-      }
-      A();
-    }, ot = (h) => !h.column.renderEdit || !S.value ? null : h.column.renderEdit(S.value, (x, u, m) => u && (typeof u == "string" || Array.isArray(u) || u.__v_isVNode) ? B(x, null, u) : B(x, u, m)), rt = (h) => {
-      if (!e.value) return {};
-      const x = s.data.findIndex((W) => W.id === h);
-      if (x === -1) return {};
-      const u = e.value.getRowOffsets(), m = (u[x] ?? 0) - R.value + (s.options?.headerHeight || 48), p = (u[x + 1] ?? 0) - (u[x] ?? 0) - (s.options?.rowHeight || 40), E = e.value.getFixedLeftWidth();
-      return {
-        position: "absolute",
-        top: `${m + (s.options?.rowHeight || 40)}px`,
-        left: `${E}px`,
-        width: `${d.value - E}px`,
-        height: `${p}px`,
-        pointerEvents: "auto",
-        overflow: "hidden",
-        backgroundColor: "#fff",
-        borderBottom: "1px solid #ebeef5",
-        // Sync inner scrolling content
-        display: "flex"
-      };
-    }, at = () => ({
-      marginLeft: `-${g.value}px`,
-      minWidth: `${c.value - e.value?.getFixedLeftWidth()}px`
-    }), ct = (h) => {
-      const x = s.data.find((u) => u.id === h);
-      return !x || !s.options?.renderExpand ? null : B("div", { style: at() }, [
-        s.options.renderExpand(x, (u, m, p) => m && (typeof m == "string" || Array.isArray(m) || m.__v_isVNode) ? B(u, null, m) : B(u, m, p))
-      ]);
-    }, ht = (h) => {
-      const x = h.target;
-      g.value = x.scrollLeft, e.value?.scrollTo(g.value, R.value), y.value = null;
-    }, dt = (h) => {
-      const x = h.target;
-      R.value = x.scrollTop, e.value?.scrollTo(g.value, R.value), y.value = null;
-    }, ft = (h) => {
-      if (!a.value || !n.value) return;
-      const x = h.deltaY, u = h.shiftKey ? h.deltaY : h.deltaX;
-      a.value.scrollTop += x, n.value.scrollLeft += u;
-    }, ut = (h) => {
-      const x = h[0];
-      if (!x || !e.value) return;
-      const { width: u, height: m } = x.contentRect;
-      d.value = u, v.value = m, e.value.resize(u, m), $();
-    }, $ = () => {
-      e.value && (c.value = e.value.getTotalWidth(), f.value = e.value.getTotalHeight());
-    };
-    let _ = null;
-    return gt(() => {
-      l.value && (e.value = new Rt(l.value), e.value.setColumns(s.columns), e.value.setData(s.data), e.value.setOptions(s.options || {}), $(), _ = new ResizeObserver(ut), o.value && _.observe(o.value), l.value.addEventListener("mousemove", K), l.value.addEventListener("mousedown", V), l.value.addEventListener("dblclick", N));
-    }), mt(() => {
-      _?.disconnect(), l.value?.removeEventListener("mousemove", K), l.value?.removeEventListener("mousedown", V), l.value?.removeEventListener("dblclick", N), e.value?.destroy(), e.value = null;
-    }), O(() => s.columns, (h) => {
-      e.value?.setColumns(h), $();
-    }, { deep: !0 }), O(() => s.data, (h) => {
-      e.value?.setData(h), $();
-    }, { deep: !0 }), O(() => s.options, (h) => {
-      h && e.value?.setOptions(h);
-    }, { deep: !0 }), (h, x) => (P(), z("div", {
-      class: "canvas-table-container",
-      ref_key: "containerRef",
-      ref: o
-    }, [
-      H("div", {
-        class: "canvas-wrapper",
-        style: T(Y.value),
-        onWheel: D(ft, ["prevent"])
-      }, [
-        H("canvas", {
-          ref_key: "canvasRef",
-          ref: l
-        }, null, 512),
-        H("div", {
-          class: "scrollbar horizontal",
-          ref_key: "hScrollRef",
-          ref: n,
-          onScroll: ht
-        }, [
-          H("div", {
-            style: T({ width: c.value + "px", height: "1px" })
-          }, null, 4)
-        ], 544),
-        H("div", {
-          class: "scrollbar vertical",
-          ref_key: "vScrollRef",
-          ref: a,
-          onScroll: dt
-        }, [
-          H("div", {
-            style: T({ height: f.value + "px", width: "1px" })
-          }, null, 4)
-        ], 544),
-        H("div", {
-          class: "table-overlays",
-          style: T(Z.value)
-        }, [
-          y.value && y.value.column.renderEdit ? (P(), z("div", {
-            key: 0,
-            class: "edit-btn",
-            style: T(j.value),
-            onClick: x[0] || (x[0] = D((u) => F(y.value), ["stop"]))
-          }, [...x[2] || (x[2] = [
-            H("svg", {
-              viewBox: "0 0 24 24",
-              width: "14",
-              height: "14"
-            }, [
-              H("path", {
-                fill: "currentColor",
-                d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-              })
-            ], -1)
-          ])], 4)) : I("", !0),
-          b.value ? (P(), z("div", {
-            key: 1,
-            class: "header-menu-overlay",
-            onClick: x[1] || (x[1] = D((u) => b.value = null, ["self"]))
-          }, [
-            H("div", {
-              class: "header-menu",
-              style: T(et.value)
-            }, [
-              (P(!0), z(U, null, q(st.value, (u) => (P(), z("div", {
-                key: u.label,
-                class: "menu-item",
-                onClick: (m) => it(u)
-              }, [
-                H("span", bt, G(u.icon || "•"), 1),
-                H("span", kt, G(u.label), 1)
-              ], 8, St))), 128))
-            ], 4)
-          ])) : I("", !0),
-          (P(!0), z(U, null, q(L.value, (u) => (P(), z("div", {
-            key: u,
-            class: "expand-row-overlay",
-            style: T(rt(u))
-          }, [
-            (P(), Q(wt(ct(u))))
-          ], 4))), 128)),
-          (P(), Q(pt, { to: "body" }, [
-            C.value ? (P(), z("div", {
-              key: 0,
-              class: "edit-dialog-popover",
-              style: T(tt.value)
-            }, [
-              H("div", Ht, [
-                yt(Ct(i), {
-                  vnode: ot(C.value)
-                }, null, 8, ["vnode"])
-              ]),
-              H("div", { class: "edit-dialog-footer" }, [
-                H("button", {
-                  class: "small",
-                  onClick: A
-                }, "Cancel"),
-                H("button", {
-                  class: "small primary",
-                  onClick: nt
-                }, "Save")
-              ])
-            ], 4)) : I("", !0),
-            C.value ? (P(), z("div", {
-              key: 1,
-              class: "popover-click-mask",
-              onClick: A
-            })) : I("", !0)
-          ]))
-        ], 4)
-      ], 36)
-    ], 512));
-  }
-}), Wt = (X, t) => {
-  const i = X.__vccOpts || X;
-  for (const [s, r] of t)
-    i[s] = r;
-  return i;
-}, Pt = /* @__PURE__ */ Wt(Et, [["__scopeId", "data-v-34fbfef2"]]);
-export {
-  Rt as CanvasRenderer,
-  Pt as CanvasTable
-};

package/dist/index.umd.js

@@ -1 +0,0 @@
-(function(L,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],s):(L=typeof globalThis<"u"?globalThis:L||self,s(L.DrawTable={},L.Vue))})(this,(function(L,s){"use strict";class X{ctx;canvas;columns=[];data=[];options={rowHeight:40,headerHeight:48,border:!0,stripe:!0,multiSelect:!1,fixedHeader:!0,renderExpand:()=>null,spanMethod:()=>{}};scrollX=0;scrollY=0;width=0;height=0;columnPositions=[];rowOffsets=[];totalWidth=0;totalHeight=0;fixedLeftWidth=0;summaryRows=[];expandedRowKeys=new Set;selectedRowKeys=new Set;imageCache=new Map;hoverHeaderIndex=-1;flattenedColumns=[];columnLevels=0;constructor(t){this.canvas=t;const l=t.getContext("2d");if(!l)throw new Error("Could not get canvas context");this.ctx=l}destroy(){this.imageCache.forEach(t=>{t.onload=null,t.onerror=null,t.src=""}),this.imageCache.clear(),this.data=[],this.columns=[],this.summaryRows=[]}setExpandedRows(t){this.expandedRowKeys=new Set(t),this.calculateLayout(),this.render()}setData(t){this.data=t,this.calculateLayout(),this.render()}setColumns(t){this.columns=t,this.flattenColumns(),this.calculateLayout(),this.render()}flattenColumns(){this.flattenedColumns=[],this.columnLevels=0;const t=(i,c=0)=>{this.columnLevels=Math.max(this.columnLevels,c+1),i.forEach(r=>{r.children&&r.children.length>0?t(r.children,c+1):this.flattenedColumns.push(r)})};t(this.columns);const l=40;this.columnLevels>1?this.options.headerHeight=this.columnLevels*l:this.options.headerHeight=48}setOptions(t){this.options={...this.options,...t},this.calculateLayout(),this.render()}resize(t,l){this.width=t,this.height=l;const i=window.devicePixelRatio||1;this.canvas.width=t*i,this.canvas.height=l*i,this.canvas.style.width=`${t}px`,this.canvas.style.height=`${l}px`,this.ctx.resetTransform(),this.ctx.scale(i,i),this.render()}scrollTo(t,l){this.scrollX=t,this.scrollY=l,this.render()}calculateLayout(){let t=0;this.columnPositions=[0];let l=0;this.flattenedColumns.forEach(r=>{const n=r.width||100;t+=n,this.columnPositions.push(t),(r.fixed==="left"||r.fixed===!0)&&(l=t)}),this.totalWidth=t,this.fixedLeftWidth=l;let i=0;this.rowOffsets=[0];const{rowHeight:c}=this.options;this.data.forEach(r=>{i+=c,this.expandedRowKeys.has(r.id)&&(i+=c*3),this.rowOffsets.push(i)}),this.totalHeight=i,this.calculateSummaries()}getRowRange(t=20){const{headerHeight:l}=this.options,i=this.summaryRows.length*this.options.rowHeight,c=this.height-l-i,r=this.scrollY,n=r+c;let o=0;for(;o<this.rowOffsets.length&&(this.rowOffsets[o+1]??0)<r;)o++;let a=o;for(;a<this.rowOffsets.length&&(this.rowOffsets[a]??0)<n;)a++;return{startRow:Math.max(0,o-t),endRow:Math.min(this.data.length,a+1)}}calculateSummaries(){this.summaryRows=[];const t=new Map;this.flattenedColumns.forEach((l,i)=>{l.summary&&l.summary.forEach(c=>{try{const r=c(this.data);if(r&&r.label){const{label:n,value:o}=r;t.has(n)||t.set(n,new Array(this.flattenedColumns.length).fill("")),t.get(n)[i]=o}}catch(r){console.error("Summary calculation error:",r)}})}),t.forEach((l,i)=>{l[0]=i,this.summaryRows.push(l)})}render(){this.ctx.clearRect(0,0,this.width,this.height),this.drawBody(),this.drawFixedLeftBody(),this.drawHeader(),this.drawSummaryRows()}getColumnWidth(t){return t.children&&t.children.length>0?t.children.reduce((i,c)=>i+this.getColumnWidth(c),0):t.width||100}isColumnFixed(t){return t.fixed==="left"||t.fixed==="right"||t.fixed===!0?!0:t.children&&t.children.length>0?t.children.some(l=>this.isColumnFixed(l)):!1}drawHeader(){const{headerHeight:t}=this.options,l=this.columnLevels>1?40:t;this.ctx.save(),this.ctx.fillStyle="#f5f7fa",this.ctx.fillRect(0,0,this.width,t);const i=(c,r,n,o,a)=>{let e=r;c.forEach(h=>{const u=this.getColumnWidth(h),f=this.isColumnFixed(h);if(a!==f){e+=u;return}const g=!h.children||h.children.length===0,p=g?(this.columnLevels-o)*l:l,S=a?e:e-this.scrollX;(a||S+u>this.fixedLeftWidth&&S<this.width)&&(a||(this.ctx.save(),this.ctx.beginPath(),this.ctx.rect(this.fixedLeftWidth,0,this.width-this.fixedLeftWidth,t),this.ctx.clip()),this.drawHeaderCell(h,S,u,p,n,g),a||this.ctx.restore()),h.children&&h.children.length>0&&i(h.children,e,n+l,o+1,a),e+=u})};i(this.columns,0,0,0,!1),i(this.columns,0,0,0,!0),this.ctx.restore()}setHoverHeader(t){this.hoverHeaderIndex!==t&&(this.hoverHeaderIndex=t,this.render())}setSelectedRows(t){this.selectedRowKeys=new Set(t),this.render()}drawHeaderCell(t,l,i,c,r,n){if(this.ctx.save(),this.ctx.beginPath(),this.ctx.rect(l,r,i,c),this.ctx.clip(),this.ctx.fillStyle="#f5f7fa",this.ctx.fillRect(l,r,i,c),this.options.border&&(this.ctx.strokeStyle="#ebeef5",this.ctx.lineWidth=1,this.ctx.strokeRect(l+.5,r+.5,i,c)),t.type==="selection"){const o=this.data.length>0&&this.selectedRowKeys.size===this.data.length;this.drawCheckboxCell(o,l,r,i,c,"center")}else{this.ctx.fillStyle="#303133",this.ctx.font="bold 14px sans-serif",this.ctx.textBaseline="middle";const o=t.align||(n?"left":"center");this.ctx.textAlign=o;let a=l+10;o==="center"&&(a=l+i/2),o==="right"&&(a=l+i-24);const e=t.title||"";if(this.ctx.fillText(e,a,r+c/2),n&&t.type!=="selection"&&t.type!=="expand"){const h=this.flattenedColumns.indexOf(t);if(this.hoverHeaderIndex===h){this.ctx.fillStyle="#909399",this.ctx.beginPath();const u=l+i-18,f=r+c/2;this.ctx.arc(u,f-4,1.5,0,Math.PI*2),this.ctx.arc(u,f,1.5,0,Math.PI*2),this.ctx.arc(u,f+4,1.5,0,Math.PI*2),this.ctx.fill()}}}this.ctx.restore()}getHeaderAt(t,l){const{headerHeight:i}=this.options;if(l>i)return null;const c=this.columnLevels>1?40:i,r=(o,a,e,h)=>{let u=a;for(const f of o){const g=this.isColumnFixed(f);if(h!==g){u+=this.getColumnWidth(f);continue}const p=this.getColumnWidth(f),S=!f.children||f.children.length===0,C=S?(this.columnLevels-e)*c:c,k=e*c,R=h?u:u-this.scrollX;if(!h&&R<this.fixedLeftWidth){u+=p;continue}if(t>=R&&t<R+p&&l>=k&&l<k+C){const y=S&&f.type!=="selection"&&f.type!=="expand"&&t>=R+p-24;return{column:f,rect:{x:R,y:k,width:p,height:C},isMenu:y}}if(f.children&&f.children.length>0){const y=r(f.children,u,e+1,h);if(y)return y}u+=p}return null},n=r(this.columns,0,0,!0);return n||r(this.columns,0,0,!1)}drawBody(){const{headerHeight:t}=this.options,{startRow:l,endRow:i}=this.getRowRange(this.height),c=this.summaryRows.length*this.options.rowHeight;this.ctx.save(),this.ctx.beginPath(),this.ctx.rect(this.fixedLeftWidth,t,this.width-this.fixedLeftWidth,this.height-t-c),this.ctx.clip();const r=new Set,n=[];for(let o=l;o<i;o++){const a=this.data[o];if(!a)continue;const e=(this.rowOffsets[o]??0)-this.scrollY+t,h=(this.rowOffsets[o+1]??0)-(this.rowOffsets[o]??0),u=o%2===1&&this.options.stripe?"#fafafa":"#fff";if(this.flattenedColumns.forEach((f,g)=>{if(f.fixed==="left"||f.fixed===!0||r.has(`${o},${g}`))return;const p=(this.columnPositions[g]??0)-this.scrollX,S=(this.columnPositions[g+1]??0)-(this.columnPositions[g]??0),C=this.options.spanMethod({row:o,column:f,rowIndex:o,columnIndex:g});if(C){const{rowspan:k,colspan:R}=C;if(k===0||R===0)return;const y=(this.columnPositions[g+R]??this.totalWidth)-(this.columnPositions[g]??0),W=(this.rowOffsets[o+k]??this.totalHeight)-(this.rowOffsets[o]??0);for(let b=0;b<k;b++)for(let P=0;P<R;P++)r.add(`${o+b},${g+P}`);n.push({col:f,val:a[f.key||""],x:p,y:e,w:y,h:W,r:o,c:g,bgColor:u})}else this.ctx.fillStyle=u,this.ctx.fillRect(p,e,S,this.options.rowHeight),this.drawCell(f,a[f.key||""],p,e,S,this.options.rowHeight,o),this.options.border&&(this.ctx.strokeStyle="#ebeef5",this.ctx.strokeRect(p+.5,e+.5,S,this.options.rowHeight))}),this.expandedRowKeys.has(a.id)){const f=e+this.options.rowHeight,g=h-this.options.rowHeight;this.ctx.fillStyle="#fdfdfd",this.ctx.fillRect(0,f,this.width,g),this.options.border&&(this.ctx.strokeStyle="#ebeef5",this.ctx.beginPath(),this.ctx.moveTo(0,f),this.ctx.lineTo(this.width,f),this.ctx.stroke()),this.drawExpandPlaceholder(a,this.fixedLeftWidth-this.scrollX,f,this.totalWidth-this.fixedLeftWidth,g)}}n.forEach(({col:o,val:a,x:e,y:h,w:u,h:f,r:g,bgColor:p})=>{this.ctx.fillStyle=p,this.ctx.fillRect(e,h,u,f),this.drawCell(o,a,e,h,u,f,g),this.options.border&&(this.ctx.strokeStyle="#ebeef5",this.ctx.strokeRect(e+.5,h+.5,u,f))}),this.ctx.restore()}drawFixedLeftBody(){const{headerHeight:t}=this.options,{startRow:l,endRow:i}=this.getRowRange(this.height),c=this.summaryRows.length*this.options.rowHeight;this.ctx.save(),this.ctx.beginPath(),this.ctx.rect(0,t,this.fixedLeftWidth,this.height-t-c),this.ctx.clip();const r=new Set,n=[];for(let o=l;o<i;o++){const a=this.data[o];if(!a)continue;const e=(this.rowOffsets[o]??0)-this.scrollY+t,h=o%2===1&&this.options.stripe?"#fafafa":"#fff";this.flattenedColumns.forEach((u,f)=>{if(!(u.fixed==="left"||u.fixed===!0)||r.has(`${o},${f}`))return;const g=this.columnPositions[f]??0,p=(this.columnPositions[f+1]??0)-(this.columnPositions[f]??0),S=this.options.spanMethod({row:o,column:u,rowIndex:o,columnIndex:f});if(S){const{rowspan:C,colspan:k}=S;if(C===0||k===0)return;const R=(this.columnPositions[f+k]??this.fixedLeftWidth)-(this.columnPositions[f]??0),y=(this.rowOffsets[o+C]??this.totalHeight)-(this.rowOffsets[o]??0);for(let W=0;W<C;W++)for(let b=0;b<k;b++)r.add(`${o+W},${f+b}`);n.push({col:u,val:a[u.key||""],x:g,y:e,w:R,h:y,r:o,c:f,bgColor:h})}else this.ctx.fillStyle=h,this.ctx.fillRect(g,e,p,this.options.rowHeight),this.drawCell(u,a[u.key||""],g,e,p,this.options.rowHeight,o),this.options.border&&(this.ctx.strokeStyle="#ebeef5",this.ctx.strokeRect(g+.5,e+.5,p,this.options.rowHeight))})}n.forEach(({col:o,val:a,x:e,y:h,w:u,h:f,r:g,bgColor:p})=>{this.ctx.fillStyle=p,this.ctx.fillRect(e,h,u,f),this.drawCell(o,a,e,h,u,f,g),this.options.border&&(this.ctx.strokeStyle="#ebeef5",this.ctx.strokeRect(e+.5,h+.5,u,f))}),this.ctx.restore()}drawExpandPlaceholder(t,l,i,c,r){this.ctx.save(),this.ctx.fillStyle="#fef0f0",this.ctx.fillRect(l,i,c,r),this.ctx.fillStyle="#f56c6c",this.ctx.font="italic 12px sans-serif",this.ctx.textAlign="center",this.ctx.fillText(`Expanded content for row ${t.id} (Rendered via h function in overlay)`,l+c/2,i+r/2),this.ctx.restore()}drawSummaryRows(){if(this.summaryRows.length===0)return;const{rowHeight:t}=this.options,l=this.summaryRows.length*t,i=this.height-l;this.ctx.save(),this.ctx.fillStyle="#fdf6ec",this.ctx.fillRect(0,i,this.width,l);let c=0;for(let r=0;r<this.flattenedColumns.length;r++){const n=this.flattenedColumns[r];if(n&&(n.type==="selection"||n.type==="expand"||n.key==="id"))c++;else break}c===0&&(c=1),this.summaryRows.forEach((r,n)=>{const o=i+n*t;this.ctx.save(),this.ctx.beginPath(),this.ctx.rect(this.fixedLeftWidth,o,this.width-this.fixedLeftWidth,t),this.ctx.clip(),this.flattenedColumns.forEach((a,e)=>{if(a.fixed==="left"||a.fixed===!0||e<c)return;const h=(this.columnPositions[e]??0)-this.scrollX,u=(this.columnPositions[e+1]??0)-(this.columnPositions[e]??0);this.drawTextCell(r[e],h,o,u,t,a.align),this.options.border&&(this.ctx.strokeStyle="#ebeef5",this.ctx.strokeRect(h+.5,o+.5,u,t))}),this.ctx.restore(),this.flattenedColumns.forEach((a,e)=>{if(a.fixed==="left"||a.fixed===!0){const h=this.columnPositions[e]??0,u=(this.columnPositions[e+1]??0)-(this.columnPositions[e]??0);if(e===0){const f=(this.columnPositions[c]??this.fixedLeftWidth)-(this.columnPositions[0]??0);this.ctx.save(),this.ctx.font="bold 13px sans-serif",this.ctx.fillStyle="#e6a23c",this.drawTextCell(r[0],h,o,f,t,"center"),this.ctx.restore(),this.options.border&&(this.ctx.strokeStyle="#ebeef5",this.ctx.strokeRect(h+.5,o+.5,f,t))}else{if(e<c)return;this.drawTextCell(r[e],h,o,u,t,a.align),this.options.border&&(this.ctx.strokeStyle="#ebeef5",this.ctx.strokeRect(h+.5,o+.5,u,t))}}})}),this.ctx.restore()}drawCell(t,l,i,c,r,n,o){if(this.ctx.save(),this.ctx.beginPath(),this.ctx.rect(i,c,r,n),this.ctx.clip(),t.renderCell)this.drawTextCell(l,i,c,r,n,t.align);else switch(t.type){case"expand":this.drawExpandButton(i+(r-16)/2,c+(this.options.rowHeight-16)/2,this.expandedRowKeys.has(this.data[o]?.id??""));break;case"selection":const a=this.selectedRowKeys.has(this.data[o]?.id??"");this.drawCheckboxCell(a,i,c,r,this.options.rowHeight,"center");break;case"image":this.drawImageCell(l,i,c,r,n,t.align);break;case"checkbox":this.drawCheckboxCell(l,i,c,r,n,t.align);break;case"radio":this.drawRadioCell(l,i,c,r,n,t.align);break;case"switch":this.drawSwitchCell(l,i,c,r,n,t.align);break;case"color-picker":this.drawColorPickerCell(l,i,c,r,n,t.align);break;case"tags":this.drawTagsCell(l,i,c,r,n);break;default:this.drawTextCell(l,i,c,r,n,t.align);break}this.ctx.restore()}drawExpandButton(t,l,i){this.ctx.save(),this.ctx.translate(t+8,l+8),i&&this.ctx.rotate(Math.PI/2),this.ctx.strokeStyle="#909399",this.ctx.lineWidth=2,this.ctx.beginPath(),this.ctx.moveTo(-3,-5),this.ctx.lineTo(3,0),this.ctx.lineTo(-3,5),this.ctx.stroke(),this.ctx.restore()}drawTextCell(t,l,i,c,r,n){this.ctx.fillStyle="#606266",this.ctx.font="14px sans-serif",this.ctx.textAlign=n||"left",this.ctx.textBaseline="middle";let o=l+10;n==="center"&&(o=l+c/2),n==="right"&&(o=l+c-10);const a=t==null?"":String(t);this.ctx.fillText(a,o,i+r/2)}drawImageCell(t,l,i,c,r,n){if(!t)return;const o=String(t),a=Math.min(c,r)-10;let e=l+5;n==="center"&&(e=l+(c-a)/2),n==="right"&&(e=l+c-a-5);let h=this.imageCache.get(o);h||(h=new Image,h.src=o,this.imageCache.set(o,h),h.onload=()=>this.render(),h.onerror=()=>{console.error(`Failed to load image: ${o}`),this.imageCache.delete(o)}),h.complete&&h.naturalWidth>0?this.ctx.drawImage(h,e,i+(r-a)/2,a,a):(this.ctx.fillStyle="#f5f7fa",this.ctx.fillRect(e,i+(r-a)/2,a,a))}drawCheckboxCell(t,l,i,c,r,n){let a=l+10;n==="center"&&(a=l+(c-16)/2),n==="right"&&(a=l+c-16-10);const e=i+(r-16)/2;this.ctx.strokeStyle=t?"#409eff":"#dcdfe6",this.ctx.fillStyle=t?"#409eff":"#fff",this.ctx.lineWidth=1,this.ctx.strokeRect(a+.5,e+.5,16,16),t&&(this.ctx.fillRect(a+1,e+1,15,15),this.ctx.strokeStyle="#fff",this.ctx.beginPath(),this.ctx.moveTo(a+4,e+8),this.ctx.lineTo(a+7,e+11),this.ctx.lineTo(a+12,e+5),this.ctx.stroke())}drawRadioCell(t,l,i,c,r,n){let a=l+10;n==="center"&&(a=l+(c-16)/2),n==="right"&&(a=l+c-16-10);const e=i+(r-16)/2,h=a+16/2,u=e+16/2;this.ctx.strokeStyle=t?"#409eff":"#dcdfe6",this.ctx.fillStyle="#fff",this.ctx.beginPath(),this.ctx.arc(h,u,16/2,0,Math.PI*2),this.ctx.stroke(),this.ctx.fill(),t&&(this.ctx.fillStyle="#409eff",this.ctx.beginPath(),this.ctx.arc(h,u,16/4,0,Math.PI*2),this.ctx.fill())}drawSwitchCell(t,l,i,c,r,n){let e=l+10;n==="center"&&(e=l+(c-32)/2),n==="right"&&(e=l+c-32-10);const h=i+(r-16)/2;this.ctx.fillStyle=t?"#13ce66":"#ff4949",this.ctx.beginPath(),this.ctx.roundRect?.(e,h,32,16,16/2),this.ctx.fill(),this.ctx.fillStyle="#fff",this.ctx.beginPath();const u=t?e+32-16+2:e+2;this.ctx.arc(u+12/2,h+16/2,12/2,0,Math.PI*2),this.ctx.fill()}drawColorPickerCell(t,l,i,c,r,n){let a=l+10;n==="center"&&(a=l+(c-20)/2),n==="right"&&(a=l+c-20-10);const e=i+(r-20)/2;this.ctx.fillStyle=t||"#000",this.ctx.fillRect(a,e,20,20),this.ctx.strokeStyle="#dcdfe6",this.ctx.strokeRect(a+.5,e+.5,20,20)}drawTagsCell(t,l,i,c,r){if(!Array.isArray(t))return;let n=l+5;const o=20,a=5,e=12;t.forEach(h=>{const u=String(h);this.ctx.font=`${e}px sans-serif`;const g=this.ctx.measureText(u).width+a*2;if(n+g>l+c-5)return;const p=i+(r-o)/2;this.ctx.fillStyle="#ecf5ff",this.ctx.strokeStyle="#d9ecff",this.ctx.beginPath(),this.ctx.roundRect?.(n,p,g,o,4),this.ctx.fill(),this.ctx.stroke(),this.ctx.fillStyle="#409eff",this.ctx.textAlign="center",this.ctx.fillText(u,n+g/2,p+o-e/2),n+=g+5})}getCellAt(t,l){const{headerHeight:i}=this.options;if(l<i)return null;const{startRow:c,endRow:r}=this.getRowRange(this.height);for(let n=c;n<r;n++){const o=this.data[n];if(!o)continue;const a=(this.rowOffsets[n]??0)-this.scrollY+i,e=(this.rowOffsets[n+1]??0)-(this.rowOffsets[n]??0);if(l>=a&&l<a+e)for(let h=0;h<this.flattenedColumns.length;h++){const u=this.flattenedColumns[h],f=(this.columnPositions[h+1]??0)-(this.columnPositions[h]??0);let g=0;if(u.fixed==="left"||u.fixed===!0)g=this.columnPositions[h]??0;else if(g=(this.columnPositions[h]??0)-this.scrollX,g<this.fixedLeftWidth)continue;if(t>=g&&t<g+f){const p=u.type==="expand",S=u.type==="selection";return{row:n,col:h,rect:{x:g,y:a,width:f,height:e},column:u,data:o,isExpandBtn:p,isSelection:S}}}}return null}getRowOffsets(){return this.rowOffsets}getScrollX(){return this.scrollX}getScrollY(){return this.scrollY}getFixedLeftWidth(){return this.fixedLeftWidth}getTotalWidth(){return this.totalWidth}getTotalHeight(){return this.totalHeight}}const N=["onClick"],I={class:"icon"},A={class:"label"},O={class:"edit-dialog-content"},D=((z,t)=>{const l=z.__vccOpts||z;for(const[i,c]of t)l[i]=c;return l})(s.defineComponent({__name:"CanvasTable",props:{columns:{},data:{},options:{}},emits:["update:data","select-change","header-command"],setup(z,{emit:t}){const l=s.defineComponent({props:["vnode"],setup(d){return()=>d.vnode}}),i=z,c=t,r=s.ref(null),n=s.ref(null),o=s.ref(null),a=s.ref(null),e=s.shallowRef(null),h=s.ref(0),u=s.ref(0),f=s.ref(0),g=s.ref(0),p=s.ref(0),S=s.ref(0),C=s.ref(null),k=s.ref(null),R=s.ref(null),y=s.ref(new Set),W=s.ref(new Set),b=s.ref(null),P=s.computed(()=>({width:"100%",height:"100%",position:"relative",overflow:"hidden"})),K=s.computed(()=>({position:"absolute",top:0,left:0,pointerEvents:"none",width:"100%",height:"100%"})),F=s.computed(()=>{if(!C.value)return{};const{rect:d}=C.value;return{position:"absolute",left:`${d.x+d.width-24}px`,top:`${d.y+(d.height-20)/2}px`,pointerEvents:"auto"}}),J=s.computed(()=>{if(!k.value||!n.value)return{};const d=n.value.getBoundingClientRect(),{rect:m}=k.value;let x=d.top+m.y+m.height+5,w=d.left+m.x;const v=300;return w+v>window.innerWidth&&(w=window.innerWidth-v-20),{position:"fixed",top:`${x}px`,left:`${w}px`,zIndex:2e3,pointerEvents:"auto"}}),U=s.computed(()=>{if(!b.value)return{};const{rect:d}=b.value;return{position:"absolute",left:`${d.x+d.width-120}px`,top:`${d.y+d.height}px`,pointerEvents:"auto"}}),q=s.computed(()=>{if(!b.value)return[];const{column:d}=b.value,m=[{label:"Fix to Left",onCommand:x=>{const w=i.columns.findIndex(v=>v.key===x.key);i.columns.forEach((v,H)=>{H<=w&&(v.fixed="left")}),e.value?.setColumns(i.columns)}},{label:"Unfix",onCommand:x=>{x.fixed=!1,e.value?.setColumns(i.columns)}}];return d.renderHeaderMenu?d.renderHeaderMenu(d,m):m}),G=d=>{b.value&&(d.onCommand(b.value.column),b.value=null)},Y=d=>{if(!n.value||!e.value)return;const m=n.value.getBoundingClientRect(),x=d.clientX-m.left,w=d.clientY-m.top,v=e.value.getHeaderAt(x,w);if(v){const H=i.columns.findIndex(E=>E.key===v.column.key);e.value.setHoverHeader(H),v.isMenu||v.column.type==="selection"?n.value.style.cursor="pointer":n.value.style.cursor="default"}else e.value.setHoverHeader(-1),n.value.style.cursor="default";C.value=e.value.getCellAt(x,w),C.value&&(C.value.isExpandBtn||C.value.isSelection)&&(n.value.style.cursor="pointer")},V=d=>{if(!n.value||!e.value)return;const m=n.value.getBoundingClientRect(),x=d.clientX-m.left,w=d.clientY-m.top,v=e.value.getHeaderAt(x,w);if(v){v.isMenu?b.value={column:v.column,rect:v.rect}:v.column.type==="selection"&&(y.value.size===i.data.length?y.value.clear():i.data.forEach(rt=>y.value.add(rt.id)),e.value.setSelectedRows(Array.from(y.value)),c("select-change",Array.from(y.value)));return}const H=e.value.getCellAt(x,w);if(H){if(H.isExpandBtn){Q(H.data.id);return}const E=H.data.id;if(H.isSelection){y.value.has(E)?y.value.delete(E):y.value.add(E),e.value.setSelectedRows(Array.from(y.value)),c("select-change",Array.from(y.value));return}i.options?.multiSelect?y.value.has(E)?y.value.delete(E):y.value.add(E):(y.value.clear(),y.value.add(E)),c("select-change",Array.from(y.value))}},_=d=>{if(!n.value||!e.value)return;const m=n.value.getBoundingClientRect(),x=d.clientX-m.left,w=d.clientY-m.top,v=e.value.getCellAt(x,w);v&&v.column.renderEdit&&$(v)},$=d=>{k.value=d,R.value=JSON.parse(JSON.stringify(d.data))},Q=d=>{W.value.has(d)?W.value.delete(d):W.value.add(d),e.value?.setExpandedRows(Array.from(W.value)),B()},T=()=>{k.value=null,R.value=null},Z=()=>{if(k.value&&R.value){const d=k.value.data.id,m=i.data.findIndex(x=>x.id===d);if(m!==-1){const x=[...i.data];x[m]=R.value,c("update:data",x),e.value?.setData(x)}}T()},j=d=>!d.column.renderEdit||!R.value?null:d.column.renderEdit(R.value,(m,x,w)=>x&&(typeof x=="string"||Array.isArray(x)||x.__v_isVNode)?s.h(m,null,x):s.h(m,x,w)),tt=d=>{if(!e.value)return{};const m=i.data.findIndex(E=>E.id===d);if(m===-1)return{};const x=e.value.getRowOffsets(),w=(x[m]??0)-S.value+(i.options?.headerHeight||48),v=(x[m+1]??0)-(x[m]??0)-(i.options?.rowHeight||40),H=e.value.getFixedLeftWidth();return{position:"absolute",top:`${w+(i.options?.rowHeight||40)}px`,left:`${H}px`,width:`${f.value-H}px`,height:`${v}px`,pointerEvents:"auto",overflow:"hidden",backgroundColor:"#fff",borderBottom:"1px solid #ebeef5",display:"flex"}},et=()=>({marginLeft:`-${p.value}px`,minWidth:`${h.value-e.value?.getFixedLeftWidth()}px`}),st=d=>{const m=i.data.find(x=>x.id===d);return!m||!i.options?.renderExpand?null:s.h("div",{style:et()},[i.options.renderExpand(m,(x,w,v)=>w&&(typeof w=="string"||Array.isArray(w)||w.__v_isVNode)?s.h(x,null,w):s.h(x,w,v))])},it=d=>{const m=d.target;p.value=m.scrollLeft,e.value?.scrollTo(p.value,S.value),C.value=null},lt=d=>{const m=d.target;S.value=m.scrollTop,e.value?.scrollTo(p.value,S.value),C.value=null},nt=d=>{if(!a.value||!o.value)return;const m=d.deltaY,x=d.shiftKey?d.deltaY:d.deltaX;a.value.scrollTop+=m,o.value.scrollLeft+=x},ot=d=>{const m=d[0];if(!m||!e.value)return;const{width:x,height:w}=m.contentRect;f.value=x,g.value=w,e.value.resize(x,w),B()},B=()=>{e.value&&(h.value=e.value.getTotalWidth(),u.value=e.value.getTotalHeight())};let M=null;return s.onMounted(()=>{n.value&&(e.value=new X(n.value),e.value.setColumns(i.columns),e.value.setData(i.data),e.value.setOptions(i.options||{}),B(),M=new ResizeObserver(ot),r.value&&M.observe(r.value),n.value.addEventListener("mousemove",Y),n.value.addEventListener("mousedown",V),n.value.addEventListener("dblclick",_))}),s.onUnmounted(()=>{M?.disconnect(),n.value?.removeEventListener("mousemove",Y),n.value?.removeEventListener("mousedown",V),n.value?.removeEventListener("dblclick",_),e.value?.destroy(),e.value=null}),s.watch(()=>i.columns,d=>{e.value?.setColumns(d),B()},{deep:!0}),s.watch(()=>i.data,d=>{e.value?.setData(d),B()},{deep:!0}),s.watch(()=>i.options,d=>{d&&e.value?.setOptions(d)},{deep:!0}),(d,m)=>(s.openBlock(),s.createElementBlock("div",{class:"canvas-table-container",ref_key:"containerRef",ref:r},[s.createElementVNode("div",{class:"canvas-wrapper",style:s.normalizeStyle(P.value),onWheel:s.withModifiers(nt,["prevent"])},[s.createElementVNode("canvas",{ref_key:"canvasRef",ref:n},null,512),s.createElementVNode("div",{class:"scrollbar horizontal",ref_key:"hScrollRef",ref:o,onScroll:it},[s.createElementVNode("div",{style:s.normalizeStyle({width:h.value+"px",height:"1px"})},null,4)],544),s.createElementVNode("div",{class:"scrollbar vertical",ref_key:"vScrollRef",ref:a,onScroll:lt},[s.createElementVNode("div",{style:s.normalizeStyle({height:u.value+"px",width:"1px"})},null,4)],544),s.createElementVNode("div",{class:"table-overlays",style:s.normalizeStyle(K.value)},[C.value&&C.value.column.renderEdit?(s.openBlock(),s.createElementBlock("div",{key:0,class:"edit-btn",style:s.normalizeStyle(F.value),onClick:m[0]||(m[0]=s.withModifiers(x=>$(C.value),["stop"]))},[...m[2]||(m[2]=[s.createElementVNode("svg",{viewBox:"0 0 24 24",width:"14",height:"14"},[s.createElementVNode("path",{fill:"currentColor",d:"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"})],-1)])],4)):s.createCommentVNode("",!0),b.value?(s.openBlock(),s.createElementBlock("div",{key:1,class:"header-menu-overlay",onClick:m[1]||(m[1]=s.withModifiers(x=>b.value=null,["self"]))},[s.createElementVNode("div",{class:"header-menu",style:s.normalizeStyle(U.value)},[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(q.value,x=>(s.openBlock(),s.createElementBlock("div",{key:x.label,class:"menu-item",onClick:w=>G(x)},[s.createElementVNode("span",I,s.toDisplayString(x.icon||"•"),1),s.createElementVNode("span",A,s.toDisplayString(x.label),1)],8,N))),128))],4)])):s.createCommentVNode("",!0),(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(W.value,x=>(s.openBlock(),s.createElementBlock("div",{key:x,class:"expand-row-overlay",style:s.normalizeStyle(tt(x))},[(s.openBlock(),s.createBlock(s.resolveDynamicComponent(st(x))))],4))),128)),(s.openBlock(),s.createBlock(s.Teleport,{to:"body"},[k.value?(s.openBlock(),s.createElementBlock("div",{key:0,class:"edit-dialog-popover",style:s.normalizeStyle(J.value)},[s.createElementVNode("div",O,[s.createVNode(s.unref(l),{vnode:j(k.value)},null,8,["vnode"])]),s.createElementVNode("div",{class:"edit-dialog-footer"},[s.createElementVNode("button",{class:"small",onClick:T},"Cancel"),s.createElementVNode("button",{class:"small primary",onClick:Z},"Save")])],4)):s.createCommentVNode("",!0),k.value?(s.openBlock(),s.createElementBlock("div",{key:1,class:"popover-click-mask",onClick:T})):s.createCommentVNode("",!0)]))],4)],36)],512))}}),[["__scopeId","data-v-34fbfef2"]]);L.CanvasRenderer=X,L.CanvasTable=D,Object.defineProperty(L,Symbol.toStringTag,{value:"Module"})}));