rj-grid 0.2.2 → 0.2.4

package/dist/rj-grid.js

@@ -564,6 +564,9 @@ function useColumnState(sourceColumns) {
       widthMap.set(colIdOf(c), clampWidth(Math.round(cur[i] * factor), c));
     });
   }
+  function clearWidths() {
+    widthMap.clear();
+  }
   function moveColumn(dragId, targetId) {
     if (dragId === targetId)
       return;
@@ -637,6 +640,7 @@ function useColumnState(sourceColumns) {
     setAutoWidth,
     hasSizedWidth,
     sizeToFit,
+    clearWidths,
     moveColumn,
     togglePin,
     toggleHide,
@@ -4058,6 +4062,7 @@ const zhCN = {
   expServerNoPdf: "后端导出不含 PDF（浏览器打印属前端渲染），已改用前端范围",
   expServerMissing: "未接入后端导出：请设置 serverExport 回调",
   expFailed: "导出失败",
+  printCap: "数据量较大：仅打印前 {n} 行（共 {total} 行）。请缩小范围或走后端导出获取全量",
   resetState: "重置列状态",
   groupBanner: "⬇ 将列标题拖到此处进行行分组（或点面板“分组”页签）",
   // 加载 / 空态
@@ -4222,6 +4227,7 @@ const zhCN = {
   querySearch: "查询",
   queryReset: "重置",
   querySaveView: "存为视图",
+  queryRemove: "移除该条件",
   queryInput: "请输入",
   // 行编辑弹窗与内置确认框（查询栏操作按钮）
   rowFormTitle: "编辑行",
@@ -4294,6 +4300,7 @@ const enUS = {
   expServerNoPdf: "Server export has no PDF (browser printing is front-end); fell back to a front-end range",
   expServerMissing: "No server export wired up: provide a serverExport callback",
   expFailed: "Export failed",
+  printCap: "Large data set: printing the first {n} of {total} rows only. Narrow the range or use Server export for the full set",
   resetState: "Reset column state",
   groupBanner: "⬇ Drag column headers here to group rows (or Panel → Group)",
   loading: "Loading…",
@@ -4444,6 +4451,7 @@ const enUS = {
   querySearch: "Search",
   queryReset: "Reset",
   querySaveView: "Save as view",
+  queryRemove: "Remove this condition",
   queryInput: "Enter",
   // Row edit dialog & built-in confirm (query bar action buttons)
   rowFormTitle: "Edit Row",
@@ -4879,7 +4887,9 @@ function parseNLQ(text, columns) {
     return { ...empty, message: "empty" };
   const result = { ok: false, filters: [], clauses: [] };
   let buf = raw;
-  const lim = buf.match(/(?:前|取|返回|最多|top)\s*(\d+)\s*(?:行|条|个|名|件)?/i);
+  const lim = buf.match(
+    /(?:前|取|返回|最多|top|first|limit|show(?:\s+me)?|give\s+me)\s*(?:the\s+)?(\d+)\s*(?:行|条|个|名|件|rows?|records?|items?|results?)?/i
+  );
   if (lim) {
     result.limit = parseInt(lim[1], 10);
     buf = blank(buf, lim.index, lim[0].length);
@@ -4903,6 +4913,7 @@ function parseNLQ(text, columns) {
     if (col) {
       result.groupBy = col.field || col.title || col.colId;
       result.groupColId = col.colId;
+      result.groupTitle = col.title || col.field || col.colId;
       buf = blank(buf, g.start, g.len);
     }
   }
@@ -4911,14 +4922,21 @@ function parseNLQ(text, columns) {
     /sort\s*by\s+([^，,、;；]+)/i,
     /([^，,、;；\s]+?)(?:升序|降序|倒序|从大到小|从小到大)/i,
     // 比较级：X最高/最低/最大/最小/最贵/最便宜/最多/最少（可带尾随「的」一并消费，避免泄漏进相邻筛选值）
-    /([^，,、;；\s]+?)最(?:高|低|大|小|贵|便宜|多|少)的?/i
+    /([^，,、;；\s]+?)最(?:高|低|大|小|贵|便宜|多|少)的?/i,
+    // 英文比较级（后缀式）：X highest / X most expensive / X cheapest（不含裸 most/least，以免吞掉 at most/at least）
+    /([a-z][a-z ]*?)\s+(?:the\s+)?(?:highest|lowest|largest|biggest|smallest|most expensive|least expensive|cheapest)\b/i,
+    // 英文比较级（前缀式）：highest X / cheapest X
+    /\b(?:highest|lowest|largest|biggest|smallest|most expensive|cheapest|least expensive)\s+(?:the\s+)?([a-z][a-z ]*?)(?=$|[，,、;；.]|\s+(?:and|by|of)\b)/i
   ]);
   if (s) {
     const col = resolveColumn(s.name, columns);
     if (col) {
       const dirWord = (s.word || "").toLowerCase();
-      const desc = /降序|倒序|从大到小|desc|最高|最大|最贵|最多/.test(dirWord);
+      const desc = /降序|倒序|从大到小|desc|最高|最大|最贵|最多|highest|largest|biggest|most expensive/.test(
+        dirWord
+      );
       result.sort = { field: col.field || col.colId, dir: desc ? "desc" : "asc" };
+      result.sortTitle = col.title || col.field || col.colId;
       buf = blank(buf, s.start, s.len);
     }
   }
@@ -5154,21 +5172,72 @@ function mergeClauses(clauses, columns) {
   }
   return out;
 }
-function explainNLQ(r) {
+const OP_LABEL = {
+  zh: {
+    eq: "=",
+    ne: "≠",
+    gt: ">",
+    gte: "≥",
+    lt: "<",
+    lte: "≤",
+    contains: "包含",
+    notContains: "不包含",
+    startsWith: "开头是",
+    endsWith: "结尾为",
+    blank: "为空",
+    notBlank: "非空",
+    in: "属于",
+    notIn: "不属于",
+    inRange: "介于"
+  },
+  en: {
+    eq: "=",
+    ne: "≠",
+    gt: ">",
+    gte: "≥",
+    lt: "<",
+    lte: "≤",
+    contains: "contains",
+    notContains: "not contains",
+    startsWith: "starts with",
+    endsWith: "ends with",
+    blank: "is empty",
+    notBlank: "is not empty",
+    in: "is",
+    notIn: "not",
+    inRange: "between"
+  }
+};
+function explainNLQ(r, lang = "zh") {
+  const en = lang === "en";
+  const labels = OP_LABEL[lang];
   const parts = [];
   for (const c of r.clauses) {
-    const val = c.value2 != null ? `${c.value1}~${c.value2}` : c.value1 ?? "";
-    parts.push(`${c.title || c.field || c.colId} ${c.op} ${val}`.trim());
+    const opLabel = labels[c.op] || c.op;
+    const name = c.title || c.field || c.colId;
+    let val;
+    if (c.op === "blank" || c.op === "notBlank")
+      val = "";
+    else if (c.value2 != null)
+      val = `${c.value1}~${c.value2}`;
+    else if (Array.isArray(c.value1))
+      val = c.value1.join(en ? " / " : "、");
+    else
+      val = String(c.value1 ?? "");
+    const glue = en || /^[=<>≤≥≠]/.test(opLabel) ? " " : "";
+    parts.push(`${name} ${opLabel}${glue}${val}`.trim());
   }
   if (r.sort)
-    parts.push(`sort ${r.sort.field} ${r.sort.dir}`);
+    parts.push(
+      en ? `sort by ${r.sortTitle || r.sort.field} ${r.sort.dir}` : `按${r.sortTitle || r.sort.field} ${r.sort.dir === "desc" ? "降序" : "升序"}`
+    );
   if (r.groupBy)
-    parts.push(`group ${r.groupBy}`);
+    parts.push(en ? `group by ${r.groupTitle || r.groupBy}` : `按${r.groupTitle || r.groupBy}分组`);
   if (r.limit)
-    parts.push(`top ${r.limit}`);
+    parts.push(en ? `top ${r.limit}` : `前${r.limit}`);
   if (r.search)
-    parts.push(`search "${r.search}"`);
-  return parts.join(" | ");
+    parts.push(en ? `search "${r.search}"` : `搜索“${r.search}”`);
+  return parts.join(" · ");
 }
 const csvCell = (v) => {
   if (v == null)
@@ -7694,7 +7763,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       const el = menuRef.value;
       if (el)
-        emit("reposition", el.offsetHeight);
+        emit("reposition", el.offsetHeight, el.offsetWidth);
     });
     const hoverIdx = ref(-1);
     function onClick(item) {
@@ -9026,7 +9095,7 @@ const _hoisted_3$4 = ["value", "onChange"];
 const _hoisted_4$3 = ["value"];
 const _hoisted_5$3 = ["value", "placeholder", "onInput"];
 const _hoisted_6$3 = ["value", "placeholder", "onInput"];
-const _hoisted_7$2 = ["onClick"];
+const _hoisted_7$2 = ["title", "onClick"];
 const _hoisted_8$2 = {
   value: "",
   disabled: ""
@@ -9259,7 +9328,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             }, null, 40, _hoisted_6$3)),
             createElementVNode("span", {
               class: "rj-query-del",
-              title: "移除",
+              title: unref(t)("queryRemove"),
               onClick: ($event) => remove(i)
             }, "✕", 8, _hoisted_7$2)
           ]);
@@ -9849,6 +9918,7 @@ function buildPrintHtml(input, opts = {}) {
   const headBg = o.headerDark ? "#4472c4" : "#eef1f6";
   const headColor = o.headerDark ? "#ffffff" : "#1f2329";
   const zebraRule = o.zebra ? "tbody tr:nth-child(even) td{background:#f7f9fc}" : "";
+  const rowBreakRule = input.matrix.length > 300 ? "tr { break-inside: auto; page-break-inside: auto; }" : "tr { page-break-inside: avoid; break-inside: avoid; }";
   const style = `
 @page { ${pageBox} margin: ${o.margins}mm; }
 ${o.pageNumbers ? `@page { @bottom-center { content: ${pageContentCss(o.pageNumberText)}; font-size: 10px; color: #999; } }` : ""}
@@ -9860,7 +9930,7 @@ body { font-family: -apple-system, "Segoe UI", "Microsoft YaHei", Arial, sans-se
 .rj-print-sub { font-size: 12px; color: #666; margin: 0 0 10px; }
 table { border-collapse: collapse; width: 100%; table-layout: ${o.scaleToFit ? "auto" : "fixed"}; font-size: 12px; }
 thead { display: table-header-group; }
-tr { page-break-inside: avoid; break-inside: avoid; }
+${rowBreakRule}
 th, td { border: ${border}; padding: 4px 8px; text-align: left; vertical-align: top; word-break: break-word; }
 thead th { background: ${headBg}; color: ${headColor}; font-weight: 600; text-align: center; }
 ${zebraRule}
@@ -9948,19 +10018,19 @@ const _hoisted_7 = {
 };
 const _hoisted_8 = { key: 0 };
 const _hoisted_9 = ["onClick"];
-const _hoisted_10 = ["title"];
-const _hoisted_11 = ["title"];
-const _hoisted_12 = ["title"];
-const _hoisted_13 = ["title"];
+const _hoisted_10 = ["data-tip", "aria-label"];
+const _hoisted_11 = ["data-tip", "aria-label"];
+const _hoisted_12 = ["data-tip", "aria-label"];
+const _hoisted_13 = ["data-tip", "aria-label"];
 const _hoisted_14 = {
   key: 5,
   class: "rj-export-group"
 };
-const _hoisted_15 = ["title"];
-const _hoisted_16 = ["title"];
-const _hoisted_17 = ["title"];
-const _hoisted_18 = ["title"];
-const _hoisted_19 = ["title"];
+const _hoisted_15 = ["data-tip"];
+const _hoisted_16 = ["data-tip"];
+const _hoisted_17 = ["data-tip"];
+const _hoisted_18 = ["data-tip"];
+const _hoisted_19 = ["data-tip", "aria-label"];
 const _hoisted_20 = { style: { "display": "flex", "flex": "1", "min-height": "0" } };
 const _hoisted_21 = ["role"];
 const _hoisted_22 = ["aria-rowindex", "aria-selected", "data-rk"];
@@ -10079,9 +10149,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     showGroupPanel: { type: Boolean, default: true },
     chartable: { type: Boolean, default: true },
     exportable: { type: Boolean, default: true },
+    showPrint: { type: Boolean, default: true },
+    showCsv: { type: Boolean, default: true },
+    showPdf: { type: Boolean, default: true },
+    showExcel: { type: Boolean, default: true },
     colReorder: { type: Boolean, default: true },
     resizable: { type: Boolean, default: true },
     rowSelection: { type: [Boolean, String], default: false },
+    selectOnCellClick: { type: Boolean, default: true },
     keepSelectionCrossPage: { type: Boolean },
     editable: { type: Boolean, default: false },
     rangeSelection: { type: Boolean, default: true },
@@ -10112,6 +10187,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     exportRange: { default: "auto" },
     serverExport: {},
     exportFileName: {},
+    printMaxRows: { default: 1e3 },
     exportRawValues: { type: Boolean },
     statusBar: { type: Boolean, default: true },
     statusAggregations: { default: () => ["sum", "avg", "count", "min", "max"] },
@@ -10508,6 +10584,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const quickPop = ref(null);
     const quickInputRef = ref();
     function toggleQuickPop(ev) {
+      tip.value = null;
       if (quickPop.value) {
         quickPop.value = null;
         return;
@@ -10827,6 +10904,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       notifySelection();
     }
+    function selectRowByClick(d) {
+      if (selection.size === 1 && selection.has(d.key))
+        return;
+      selection.clear();
+      if (props.keepSelectionCrossPage)
+        preserveMap.clear();
+      selection.add(d.key);
+      if (props.keepSelectionCrossPage)
+        preserveMap.set(d.key, d.data);
+      notifySelection();
+    }
     function selectedRows() {
       const rows = rowModel.processed.value.displayRows.filter((d) => selection.has(d.key)).map((d) => d.data);
       Array.from(preserveMap.values()).forEach((r) => {
@@ -11947,6 +12035,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             colIndex: pos.c,
             column: leaf.col
           });
+        if (props.selectOnCellClick && e.button === 0 && !e.ctrlKey && !e.metaKey && !e.shiftKey && !e.altKey && drow && drow.type === "row" && !(e.target instanceof Element && e.target.closest(".rj-checkbox")))
+          selectRowByClick(drow);
       }
       if (!props.rangeSelection || e.button !== 0 || !pos)
         return;
@@ -12590,25 +12680,50 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }));
     });
     const menu = ref(null);
-    function openMenuAt(x, y, items, above) {
+    const tip = ref(null);
+    function onTipOver(e) {
+      var _a2, _b;
+      const host = e.currentTarget;
+      const el = (_b = (_a2 = e.target) == null ? void 0 : _a2.closest) == null ? void 0 : _b.call(_a2, "[data-tip]");
+      if (!el || !host.contains(el))
+        return;
+      const r = el.getBoundingClientRect();
+      tip.value = { text: el.getAttribute("data-tip") || "", x: r.right, y: r.bottom + 6 };
+    }
+    function onTipOut(e) {
+      var _a2, _b;
+      const el = (_b = (_a2 = e.target) == null ? void 0 : _a2.closest) == null ? void 0 : _b.call(_a2, "[data-tip]");
+      const to = e.relatedTarget;
+      if (el && to && el.contains(to))
+        return;
+      tip.value = null;
+    }
+    function openMenuAt(x, y, items, above, estW = 220) {
       if (!items.length)
         return;
+      tip.value = null;
       const est = items.length * 28 + 16;
       const bottom = window.innerHeight - 8;
+      const xc = Math.max(8, Math.min(x, window.innerWidth - estW - 8));
       if (y + est <= bottom) {
-        menu.value = { items, x, y, limit: bottom };
+        menu.value = { items, x: xc, y, limit: bottom };
         return;
       }
       const lim = (above ?? y) - 6;
-      menu.value = { items, x, y: Math.max(8, (above ?? y) - est - 8), limit: lim };
+      menu.value = { items, x: xc, y: Math.max(8, (above ?? y) - est - 8), limit: lim };
     }
-    function onMenuReposition(h2) {
+    function onMenuReposition(h2, w) {
       const m = menu.value;
       if (!m)
         return;
       const lim = m.limit ?? window.innerHeight - 8;
+      const next = { ...m };
       if (m.y + h2 > lim)
-        menu.value = { ...m, y: Math.max(8, lim - h2) };
+        next.y = Math.max(8, lim - h2);
+      if (w && m.x + w > window.innerWidth - 8)
+        next.x = Math.max(8, window.innerWidth - 8 - w);
+      if (next.y !== m.y || next.x !== m.x)
+        menu.value = next;
     }
     function onMenuSelect(item) {
       var _a2;
@@ -12890,7 +13005,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           { isSeparator: true },
           { name: t("scopeServer"), action: () => callServerExport(fmt) }
         );
-      openMenuAt(ev.clientX, ev.clientY, items);
+      const el = ev.currentTarget;
+      const r = el.getBoundingClientRect();
+      openMenuAt(r.left, r.bottom + 6, items, r.top);
     }
     function runFormat(fmt, scope) {
       if (fmt === "print")
@@ -13010,7 +13127,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return v.join(" ");
       return displayOf(col, v, row, 0);
     }
-    function buildPrintInput(params) {
+    function buildPrintInput(params, limit = 0) {
       const cols = exportColumnsOf(params);
       const columns = cols.map((c) => {
         var _a2;
@@ -13022,26 +13139,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
       const matrix = [];
       const rowStyles = [];
+      const capped = limit > 0;
+      const full = () => capped && matrix.length >= limit;
       const pushRow = (d, kind) => {
         matrix.push(cols.map((c) => printTextOf(c, d.data)));
         rowStyles.push(kind);
       };
       const scope = scopeOf(params);
       if (scope === "view") {
-        rowModel.processed.value.displayRows.forEach((d) => {
+        for (const d of rowModel.processed.value.displayRows) {
+          if (full())
+            break;
           if (d.type === "group" && !d.isFooter)
             pushRow(d, 1);
           else if (d.type === "row")
             pushRow(d, 0);
-        });
+        }
       } else {
-        pickExportRows(scope, exportRowSource(), false).forEach((r) => {
+        for (const r of pickExportRows(scope, exportRowSource(), false)) {
+          if (full())
+            break;
           matrix.push(cols.map((c) => printTextOf(c, r)));
           rowStyles.push(0);
-        });
+        }
       }
       const srow = rowModel.summaryRow.value;
-      if (scope === "view" && props.showSummary && srow) {
+      if (scope === "view" && props.showSummary && srow && !full()) {
         matrix.push(
           cols.map((c) => {
             const raw = srow[colIdOf(c)] ?? cellRawValue(c, srow);
@@ -13079,8 +13202,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       warnIfLoadedOnly(scopeOf(params));
       withExportBusy(() => runPrint(params));
     }
+    function printRowEstimate(scope) {
+      if (scope === "view")
+        return rowModel.processed.value.displayRows.reduce(
+          (n, d) => n + (d.type === "row" || d.type === "group" && !d.isFooter ? 1 : 0),
+          0
+        );
+      return pickExportRows(scope, exportRowSource(), false).length;
+    }
     function runPrint(params) {
-      printHtml(buildPrintInput(params), printOpts(params));
+      const cap = props.printMaxRows;
+      const total = printRowEstimate(scopeOf(params));
+      const limit = cap > 0 && total > cap ? cap : 0;
+      const input = buildPrintInput(params, limit);
+      if (limit)
+        showToast(t("printCap", { n: cap, total }));
+      printHtml(input, printOpts(params));
     }
     const rowGroupPayload = computed(() => {
       void aggRev.value;
@@ -13575,6 +13712,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         scheduleSave();
         dispatchEvent("columnEverythingChanged", {});
       },
+      /** 清除宽度覆盖：把列宽还原到列定义/内容自适应默认值（配合 autoSizeAll 做「自适应↔还原」切换） */
+      resetColumnWidths: () => {
+        colState.clearWidths();
+        applyDefaultAutoWidths();
+        scheduleSave();
+        dispatchEvent("columnEverythingChanged", {});
+      },
       // 主题 / i18n（运行时切换）
       setTheme: (params) => {
         themeState.value = { ...params };
@@ -13816,18 +13960,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             onDragover: _cache[21] || (_cache[21] = withModifiers(() => {
             }, ["stop"])),
             onDrop: _cache[22] || (_cache[22] = withModifiers(() => {
-            }, ["stop"]))
+            }, ["stop"])),
+            onPointerover: onTipOver,
+            onPointerout: onTipOut,
+            onFocusin: onTipOver,
+            onFocusout: onTipOut
           }, [
             _ctx.quickFilterEnabled ? (openBlock(), createElementBlock("button", {
               key: 0,
               class: normalizeClass(["rj-btn rj-tool-btn rj-quick-btn", { "is-active": !!unref(rowModel).quickFilter.value }]),
-              title: t("quickBtn"),
+              "data-tip": t("quickBtn"),
+              "aria-label": t("quickBtn"),
               onClick: _cache[9] || (_cache[9] = ($event) => toggleQuickPop($event))
             }, "🔍", 10, _hoisted_10)) : createCommentVNode("", true),
             _ctx.viewable ? (openBlock(), createElementBlock("button", {
               key: 1,
               class: normalizeClass(["rj-btn rj-tool-btn rj-view-btn", { "is-active": !!currentViewId.value }]),
-              title: t("viewBtn"),
+              "data-tip": t("viewBtn"),
+              "aria-label": t("viewBtn"),
               onClick: _cache[10] || (_cache[10] = ($event) => openViewMenu($event))
             }, "◈", 10, _hoisted_11)) : createCommentVNode("", true),
             showExpandCollapse.value ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
@@ -13847,12 +13997,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, toDisplayString(t("chart")), 1)) : createCommentVNode("", true),
             createElementVNode("button", {
               class: "rj-btn",
-              title: t("density") + " · " + DENSITY_LABELS.value[densityIdx.value],
+              "data-tip": t("density") + " · " + DENSITY_LABELS.value[densityIdx.value],
+              "aria-label": t("density"),
               onClick: _cache[14] || (_cache[14] = ($event) => densityIdx.value = (densityIdx.value + 1) % 3)
             }, toDisplayString(["▤", "☰", "▥"][densityIdx.value]), 9, _hoisted_12),
             createElementVNode("button", {
               class: "rj-btn",
-              title: dark.value ? t("toLight") : t("toDark"),
+              "data-tip": dark.value ? t("toLight") : t("toDark"),
+              "aria-label": dark.value ? t("toLight") : t("toDark"),
               onClick: _cache[15] || (_cache[15] = ($event) => toggleDark())
             }, toDisplayString(dark.value ? "☀" : "🌙"), 9, _hoisted_13),
             _ctx.toolPanel ? (openBlock(), createElementBlock("button", {
@@ -13860,32 +14012,37 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               class: normalizeClass(["rj-btn", { "is-active": panelOpen.value }]),
               onClick: _cache[16] || (_cache[16] = ($event) => panelOpen.value = !panelOpen.value)
             }, toDisplayString(t("panel")), 3)) : createCommentVNode("", true),
-            _ctx.exportable ? (openBlock(), createElementBlock("div", _hoisted_14, [
-              createElementVNode("button", {
+            _ctx.exportable && (_ctx.showPrint || _ctx.showCsv || _ctx.showPdf || _ctx.showExcel) ? (openBlock(), createElementBlock("div", _hoisted_14, [
+              _ctx.showPrint ? (openBlock(), createElementBlock("button", {
+                key: 0,
                 class: "rj-btn rj-btn-export rj-export-btn",
-                title: t("printTip"),
+                "data-tip": t("printTip"),
                 onClick: _cache[17] || (_cache[17] = ($event) => openRangeMenu($event, "print"))
-              }, toDisplayString(t("printBtn")), 9, _hoisted_15),
-              createElementVNode("button", {
+              }, toDisplayString(t("printBtn")), 9, _hoisted_15)) : createCommentVNode("", true),
+              _ctx.showCsv ? (openBlock(), createElementBlock("button", {
+                key: 1,
                 class: "rj-btn rj-btn-export rj-export-btn",
-                title: t("csvTip"),
+                "data-tip": t("csvTip"),
                 onClick: _cache[18] || (_cache[18] = ($event) => openRangeMenu($event, "csv"))
-              }, " CSV ", 8, _hoisted_16),
-              createElementVNode("button", {
+              }, " CSV ", 8, _hoisted_16)) : createCommentVNode("", true),
+              _ctx.showPdf ? (openBlock(), createElementBlock("button", {
+                key: 2,
                 class: "rj-btn rj-btn-export rj-export-btn",
-                title: t("pdfTip"),
+                "data-tip": t("pdfTip"),
                 onClick: _cache[19] || (_cache[19] = ($event) => openRangeMenu($event, "pdf"))
-              }, " PDF ", 8, _hoisted_17),
-              createElementVNode("button", {
+              }, " PDF ", 8, _hoisted_17)) : createCommentVNode("", true),
+              _ctx.showExcel ? (openBlock(), createElementBlock("button", {
+                key: 3,
                 class: "rj-btn rj-btn-export rj-export-btn",
-                title: t("excelTip"),
+                "data-tip": t("excelTip"),
                 onClick: _cache[20] || (_cache[20] = ($event) => openRangeMenu($event, "excel"))
-              }, " Excel ", 8, _hoisted_18)
+              }, " Excel ", 8, _hoisted_18)) : createCommentVNode("", true)
             ])) : createCommentVNode("", true),
             _ctx.stateKey ? (openBlock(), createElementBlock("button", {
               key: 6,
               class: "rj-btn",
-              title: t("resetState"),
+              "data-tip": t("resetState"),
+              "aria-label": t("resetState"),
               onClick: resetState
             }, "↺", 8, _hoisted_19)) : createCommentVNode("", true)
           ], 32)) : createCommentVNode("", true)
@@ -14452,8 +14609,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           onClear: clearAdvancedFilter,
           onClose: _cache[43] || (_cache[43] = ($event) => advDialog.value = null)
         }, null, 8, ["model", "columns", "x", "y"])) : createCommentVNode("", true),
-        menu.value ? (openBlock(), createBlock(_sfc_main$a, {
+        tip.value ? (openBlock(), createElementBlock("div", {
           key: 8,
+          class: "rj-tip",
+          role: "tooltip",
+          style: normalizeStyle({ left: tip.value.x + "px", top: tip.value.y + "px" })
+        }, toDisplayString(tip.value.text), 5)) : createCommentVNode("", true),
+        menu.value ? (openBlock(), createBlock(_sfc_main$a, {
+          key: 9,
           items: menu.value.items,
           x: menu.value.x,
           y: menu.value.y,
@@ -14461,7 +14624,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           onReposition: onMenuReposition
         }, null, 8, ["items", "x", "y"])) : createCommentVNode("", true),
         colMenu.value ? (openBlock(), createBlock(_sfc_main$9, {
-          key: 9,
+          key: 10,
           col: colMenu.value.col,
           "col-id": colMenu.value.colId,
           x: colMenu.value.x,
@@ -14489,13 +14652,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           onColDrop
         }, null, 8, ["col", "col-id", "x", "y", "can-sort", "can-filter", "can-group", "sort-dir", "pinned", "filter-type", "filter-model", "unique-values", "columns"])) : createCommentVNode("", true),
         chartOpen.value ? (openBlock(), createBlock(_sfc_main$6, {
-          key: 10,
+          key: 11,
           columns: pipelineCols.value,
           rows: chartRows.value,
           onClose: _cache[44] || (_cache[44] = ($event) => chartOpen.value = false)
         }, null, 8, ["columns", "rows"])) : createCommentVNode("", true),
         rowFormDlg.value ? (openBlock(), createBlock(_sfc_main$3, {
-          key: 11,
+          key: 12,
           fields: rowFormDlg.value.fields,
           rows: rowFormDlg.value.rows,
           mode: rowFormDlg.value.mode,
@@ -14505,13 +14668,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           onClose: _cache[45] || (_cache[45] = ($event) => rowFormDlg.value = null)
         }, null, 8, ["fields", "rows", "mode", "title", "width"])) : createCommentVNode("", true),
         confirmDlg.value ? (openBlock(), createBlock(_sfc_main$2, {
-          key: 12,
+          key: 13,
           message: confirmDlg.value.message,
           onOk: onConfirmOk,
           onCancel: _cache[46] || (_cache[46] = ($event) => confirmDlg.value = null)
         }, null, 8, ["message"])) : createCommentVNode("", true),
         dragGhost.value ? (openBlock(), createElementBlock("div", {
-          key: 13,
+          key: 14,
           ref_key: "dragGhostRef",
           ref: dragGhostRef,
           class: "rj-drag-ghost",
@@ -14532,7 +14695,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           !dragGhost.value.cells.length ? (openBlock(), createElementBlock("span", _hoisted_51, toDisplayString(t("dragRow")), 1)) : createCommentVNode("", true)
         ], 4)) : createCommentVNode("", true),
         imgPreview.value ? (openBlock(), createElementBlock("div", {
-          key: 14,
+          key: 15,
           class: "rj-img-viewer",
           role: "dialog",
           "aria-modal": "true",

package/dist/style.css

@@ -10,7 +10,7 @@
   --rj-text-secondary: #909399;
   --rj-primary: #3b76f6;
   --rj-primary-bg: #eaf1fe;
-  --rj-hover-bg: #f2f6fd;
+  --rj-hover-bg: #e6edf9;
   --rj-selected-bg: #e2edfd;
   --rj-range-bg: rgba(59, 118, 246, 0.1);
   --rj-fill-bg: rgba(59, 118, 246, 0.16);
@@ -52,7 +52,7 @@
   --rj-text-secondary: #8a919f;
   --rj-primary: #5c8dfb;
   --rj-primary-bg: #24324d;
-  --rj-hover-bg: #272d3a;
+  --rj-hover-bg: #313a4d;
   --rj-selected-bg: #2a3a5c;
   --rj-mask: rgba(30, 34, 42, 0.75);
   --rj-flash-bg: #5a4c1e;
@@ -509,6 +509,25 @@
   font-weight: 500;
 }
 
+.rj-tip {
+  position: fixed;
+  z-index: 3100;
+  width: max-content;
+  max-width: 240px;
+  padding: 3px 8px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.4;
+  color: var(--rj-bg);
+  text-align: left;
+  white-space: normal;
+  pointer-events: none;
+  background: var(--rj-text);
+  border-radius: var(--rj-radius);
+  box-shadow: var(--rj-shadow);
+  transform: translateX(-100%);
+}
+
 .rj-pager {
   display: flex;
   align-items: center;

package/dist/types/src/RjContextMenu.vue.d.ts

@@ -5,14 +5,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     y: number;
 }>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (item: RjMenuItem) => void;
-    reposition: (h: number) => void;
+    reposition: (h: number, w: number) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     items: RjMenuItem[];
     x: number;
     y: number;
 }>>> & Readonly<{
     onSelect?: ((item: RjMenuItem) => any) | undefined;
-    onReposition?: ((h: number) => any) | undefined;
+    onReposition?: ((h: number, w: number) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;