rj-grid 0.2.1 → 0.2.3

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;
@@ -261,6 +261,111 @@
   padding: 2px;
 }
 
+.rj-query-select.rj-opt-select {
+  position: relative;
+  display: inline-flex;
+  min-width: 120px;
+  font-size: var(--rj-ui-font, 12px);
+}
+
+.rj-opt-trigger {
+  display: inline-flex;
+  flex: 1;
+  gap: 4px;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: calc(var(--rj-ui-h, 26px) - 2px);
+  padding: 0 6px;
+  font-size: var(--rj-ui-font, 12px);
+  color: var(--rj-text);
+  cursor: pointer;
+  background: var(--rj-bg);
+  border: 1px solid var(--rj-border-strong);
+  border-radius: var(--rj-radius);
+  outline: none;
+}
+.rj-opt-trigger:focus, .rj-opt-trigger:hover {
+  border-color: var(--rj-primary);
+}
+.rj-opt-trigger.is-placeholder .rj-opt-text {
+  color: var(--rj-text-secondary);
+}
+
+.rj-opt-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rj-opt-arrow {
+  flex: none;
+  color: var(--rj-text-secondary);
+}
+
+.rj-opt-panel {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 60;
+  display: flex;
+  flex-direction: column;
+  min-width: 100%;
+  max-width: 320px;
+  margin-top: 2px;
+  background: var(--rj-bg);
+  border: 1px solid var(--rj-border);
+  border-radius: var(--rj-radius);
+  box-shadow: var(--rj-shadow);
+}
+
+.rj-opt-search {
+  width: calc(100% - 8px);
+  height: calc(var(--rj-ui-h, 26px) - 2px);
+  padding: 0 6px;
+  margin: 4px;
+  font-size: var(--rj-ui-font, 12px);
+  color: var(--rj-text);
+  background: var(--rj-bg);
+  border: 1px solid var(--rj-border-strong);
+  border-radius: var(--rj-radius);
+  outline: none;
+}
+.rj-opt-search:focus {
+  border-color: var(--rj-primary);
+}
+
+.rj-opt-list {
+  max-height: 220px;
+  overflow: auto;
+}
+
+.rj-opt-row {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  padding: 4px 8px;
+  line-height: 1.5;
+  cursor: pointer;
+}
+.rj-opt-row:hover, .rj-opt-row.is-active {
+  color: var(--rj-primary);
+  background: var(--rj-primary-bg);
+}
+.rj-opt-row.is-selected .rj-option-label {
+  font-weight: 600;
+}
+
+.rj-opt-check {
+  flex: none;
+  margin: 0;
+}
+
+.rj-opt-empty {
+  padding: 6px 8px;
+  color: #999;
+}
+
 .rj-query-add {
   border-style: dashed;
 }
@@ -404,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;
@@ -1139,6 +1263,27 @@
   color: var(--rj-primary);
 }
 
+.rj-option-tree .rj-option-row {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+.rj-option-tree .rj-option-caret {
+  flex: none;
+  width: 14px;
+  color: var(--rj-text-secondary);
+  cursor: pointer;
+  user-select: none;
+}
+.rj-option-tree .rj-option-caret.is-leaf {
+  cursor: default;
+}
+.rj-option-tree .rj-option-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .rj-editor-error {
   position: absolute;
   top: 100%;

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;

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

@@ -96,6 +96,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
      */
     serverExport?: ((params: RjServerExportParams) => void | Promise<void>) | undefined;
     exportFileName?: string | undefined;
+    /**
+     * 打印 / PDF 单次最大行数护栏：浏览器打印靠把整表排版进隐藏 iframe，
+     * 上万行会生成十几 MB HTML 并让主线程卡死（页面假死）。超过此上限只打印前 N 行并提示，
+     * 需全量请先筛选 / 用分页 / 走后端导出，或按宿主机器性能调大本值。置 0 或负数则不限。
+     */
+    printMaxRows?: number | undefined;
     /** 导出取值口径：默认导出「所见即所得」的格式化文本（与屏幕一致、单文件内口径统一）；
      *  置 true 则导出原始类型值，让 Excel 里数字仍是数字（对齐 AG Grid useCellValuesForExports） */
     exportRawValues?: boolean | undefined;
@@ -182,6 +188,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     copyHeadersToClipboard: boolean;
     markDirtyCells: boolean;
     rowHover: boolean;
+    printMaxRows: number;
     queryable: boolean;
     viewable: boolean;
     queryFields: () => never[];
@@ -303,6 +310,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
      */
     serverExport?: ((params: RjServerExportParams) => void | Promise<void>) | undefined;
     exportFileName?: string | undefined;
+    /**
+     * 打印 / PDF 单次最大行数护栏：浏览器打印靠把整表排版进隐藏 iframe，
+     * 上万行会生成十几 MB HTML 并让主线程卡死（页面假死）。超过此上限只打印前 N 行并提示，
+     * 需全量请先筛选 / 用分页 / 走后端导出，或按宿主机器性能调大本值。置 0 或负数则不限。
+     */
+    printMaxRows?: number | undefined;
     /** 导出取值口径：默认导出「所见即所得」的格式化文本（与屏幕一致、单文件内口径统一）；
      *  置 true 则导出原始类型值，让 Excel 里数字仍是数字（对齐 AG Grid useCellValuesForExports） */
     exportRawValues?: boolean | undefined;
@@ -389,6 +402,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     copyHeadersToClipboard: boolean;
     markDirtyCells: boolean;
     rowHover: boolean;
+    printMaxRows: number;
     queryable: boolean;
     viewable: boolean;
     queryFields: () => never[];
@@ -472,6 +486,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     detailHeight: number;
     fullWidthHeight: number;
     exportRange: "auto" | RjExportScopeResolved;
+    printMaxRows: number;
     statusBar: boolean;
     statusAggregations: ("sum" | "avg" | "min" | "max" | "count")[];
     undoRedoCellEditing: boolean;
@@ -594,6 +609,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
             autoSizeColumn: (colId: string) => void;
             autoSizeAll: () => void;
             sizeColumnsToFit: () => void;
+            /** 清除宽度覆盖：把列宽还原到列定义/内容自适应默认值（配合 autoSizeAll 做「自适应↔还原」切换） */
+            resetColumnWidths: () => void;
             setTheme: (params: RjThemeParams) => void;
             getTheme: () => {
                 preset?: "legacy" | "alpine" | "quartz" | "material" | undefined;
@@ -728,6 +745,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
             autoSizeColumn: (colId: string) => void;
             autoSizeAll: () => void;
             sizeColumnsToFit: () => void;
+            /** 清除宽度覆盖：把列宽还原到列定义/内容自适应默认值（配合 autoSizeAll 做「自适应↔还原」切换） */
+            resetColumnWidths: () => void;
             setTheme: (params: RjThemeParams) => void;
             getTheme: () => {
                 preset?: "legacy" | "alpine" | "quartz" | "material" | undefined;
@@ -866,6 +885,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
             autoSizeColumn: (colId: string) => void;
             autoSizeAll: () => void;
             sizeColumnsToFit: () => void;
+            /** 清除宽度覆盖：把列宽还原到列定义/内容自适应默认值（配合 autoSizeAll 做「自适应↔还原」切换） */
+            resetColumnWidths: () => void;
             setTheme: (params: RjThemeParams) => void;
             getTheme: () => {
                 preset?: "legacy" | "alpine" | "quartz" | "material" | undefined;
@@ -1001,6 +1022,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
             autoSizeColumn: (colId: string) => void;
             autoSizeAll: () => void;
             sizeColumnsToFit: () => void;
+            /** 清除宽度覆盖：把列宽还原到列定义/内容自适应默认值（配合 autoSizeAll 做「自适应↔还原」切换） */
+            resetColumnWidths: () => void;
             setTheme: (params: RjThemeParams) => void;
             getTheme: () => {
                 preset?: "legacy" | "alpine" | "quartz" | "material" | undefined;

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

@@ -0,0 +1,49 @@
+import type { RjEditorOption } from './types';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    options?: RjEditorOption[] | undefined;
+    modelValue?: any;
+    multiple?: boolean | undefined;
+    placeholder?: string | undefined;
+}>, {
+    options: () => never[];
+    modelValue: undefined;
+    multiple: boolean;
+    placeholder: string;
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (v: any) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    options?: RjEditorOption[] | undefined;
+    modelValue?: any;
+    multiple?: boolean | undefined;
+    placeholder?: string | undefined;
+}>, {
+    options: () => never[];
+    modelValue: undefined;
+    multiple: boolean;
+    placeholder: string;
+}>>> & Readonly<{
+    "onUpdate:modelValue"?: ((v: any) => any) | undefined;
+}>, {
+    options: RjEditorOption[];
+    placeholder: string;
+    modelValue: any;
+    multiple: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/types/src/nlq.d.ts

@@ -1,4 +1,5 @@
 import type { RjFilterModel, RjSortState } from './types';
+import type { RjLang } from './locale';
 export type RjNlqFilterType = 'text' | 'number' | 'date' | 'select';
 /** 参与解析的列描述（由网格从列定义构建） */
 export interface RjNlqColumn {
@@ -39,13 +40,20 @@ export interface RjNlqResult {
         model: RjFilterModel;
     }[];
     sort?: RjSortState;
+    /** 排序列展示名（title，供 explainNLQ 本地化回显） */
+    sortTitle?: string;
     groupBy?: string;
     groupColId?: string;
+    /** 分组列展示名（title，供 explainNLQ 本地化回显） */
+    groupTitle?: string;
     limit?: number;
     search?: string;
     clauses: RjNlqClause[];
 }
 /** 解析自然语言查询 */
 export declare function parseNLQ(text: string, columns: RjNlqColumn[]): RjNlqResult;
-/** 生成人类可读的解析摘要（供 UI 回显，key 交由上层 i18n；此处给结构串） */
-export declare function explainNLQ(r: RjNlqResult): string;
+/**
+ * 生成人类可读的解析摘要（供 UI 回显）。传 lang 则随语言本地化：
+ * 中文如「数量 > 100 · 按金额 降序 · 前5 · 搜索“轴承”」，英文如「qty > 100 · sort by amount desc · top 5 · search "bolt"」。
+ */
+export declare function explainNLQ(r: RjNlqResult, lang?: RjLang): string;

package/dist/types/src/optionsSource.d.ts

@@ -22,9 +22,32 @@ export declare const defaultOptionsAccessor: RjOptionsAccessor;
  * 把任意接口返回归一成 RjEditorOption[]：
  * - map 命中优先（完全自定义）；
  * - 否则按 labelKey/valueKey（或默认字段）取；
- * - childrenKey（默认 'children'）命中数组即递归拍平（depth 缩进不写进 label，保持干净 value→label 表）。
+ * - childrenKey（默认 'children'）命中数组即保留为 children，递归归一（不再拍平），供下拉按层级渲染。
  */
 export declare function normalizeOptions(raw: unknown, shape?: RjOptionShape): RjEditorOption[];
+/** 深度优先拍平选项树（丢弃 children 引用），供 value→label 映射 / 枚举候选等需要扁平列表的消费点 */
+export declare function flattenOptions(options: RjEditorOption[]): RjEditorOption[];
+/**
+ * 按搜索词剪枝选项树（大小写不敏 contains）：
+ * - 节点自身命中 → 保留该节点及其完整子树（可继续下钻）；
+ * - 自身未命中但有后代命中 → 作为祖先路径保留（children 为剪枝后的子集）；
+ * - 空查询原样返回。返回全新节点对象，不污染缓存。
+ */
+export declare function filterOptionTree(options: RjEditorOption[], query: string): RjEditorOption[];
+/** 树渲染行：option + 层级深度 + 是否可展开 + 当前是否已展开 */
+export interface RjOptionRow {
+    option: RjEditorOption;
+    depth: number;
+    hasChildren: boolean;
+    expanded: boolean;
+}
+/**
+ * 按展开集合把（已剪枝的）选项树铺成可渲染的可见行（深度优先）。
+ * expanded 以 String(value) 为键；未展开节点的子树不进入可见行。
+ */
+export declare function flattenTreeForRender(options: RjEditorOption[], expanded: Set<string>): RjOptionRow[];
+/** 收集树中所有“有子节点”的 value（String 化），用于默认展开全部 */
+export declare function collectParentKeys(options: RjEditorOption[], acc?: Set<string>): Set<string>;
 /** 解析选项源所需的网格级加载器 */
 export interface RjOptionLoaders {
     dictLoader?: (key: string) => unknown | Promise<unknown>;

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

@@ -108,11 +108,14 @@ export type RjEditorType = 'input' | 'number' | 'date' | 'select' | 'richSelect'
 export interface RjEditorOption {
     label: string;
     value: any;
+    /** 树形子节点：载体源含 childrenKey 时保留层级（下拉按树渲染，显示/标签映射自动拍平） */
+    children?: RjEditorOption[];
 }
 /**
  * 统一选项载体：一份数据源同时驱动 显示(value→label) / select 筛选候选 / select 编辑器 / NLQ 枚举。
  * 数组＝静态候选；函数＝工厂（可同步/异步，网格级按列只解析一次）；对象＝按 load/ref/dict 取数，
- * 再用 map 或 labelKey/valueKey 归一，childrenKey（默认 'children'）命中即递归拍平树（label 不加缩进）。
+ * 再用 map 或 labelKey/valueKey 归一，childrenKey（默认 'children'）命中数组即保留为 children 树，
+ * 供下拉按层级渲染（显示标签映射会自动深度优先拍平，父/子节点均可命中 value→label）。
  */
 export type RjOptionSource = RjEditorOption[] | ((row?: RjRowData) => RjEditorOption[] | Promise<RjEditorOption[]>) | {
     /** 静态候选（对象式） */
@@ -627,6 +630,8 @@ export interface RjGridApi extends ComponentPublicInstance {
     autoSizeAll: () => void;
     /** 列宽：按视口宽度等比缩放普通区列（对标 sizeColumnsToFit） */
     sizeColumnsToFit: () => void;
+    /** 清除全部列宽覆盖，还原到列定义/内容自适应默认宽（与 autoSizeAll 配合做自适应↔还原切换） */
+    resetColumnWidths: () => void;
     /** 主题引擎（对标 AG Grid Theming）：运行时替换预设/明暗/强调色等 */
     setTheme: (params: RjThemeParams) => void;
     /** 读取当前生效的主题参数 */

package/dist/types/src/useColumnState.d.ts

@@ -60,6 +60,7 @@ export declare function useColumnState(sourceColumns: () => RjColumn[]): {
     setAutoWidth: (colId: string, width: number) => void;
     hasSizedWidth: (colId: string) => boolean;
     sizeToFit: () => void;
+    clearWidths: () => void;
     moveColumn: (dragId: string, targetId: string) => void;
     togglePin: (colId: string, pin: 'left' | 'right' | null) => void;
     toggleHide: (colId: string, hide?: boolean) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rj-grid",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "零第三方依赖的自研 Vue3 虚拟表格：虚拟滚动 / 冻结列 / 行拖拽 / 分组透视 / 公式 / SSRM / 主题 i18n / 自然语言查询",
   "type": "module",
   "license": "MIT",
@@ -46,6 +46,7 @@
     }
   },
   "scripts": {
+    "start": "vite --config vite.playground.config.ts",
     "dev": "vite --config vite.playground.config.ts",
     "build:play": "vite build --config vite.playground.config.ts",
     "preview:play": "vite preview --config vite.playground.config.ts",
@@ -55,6 +56,8 @@
     "lint": "eslint --fix --ext .ts,.vue index.ts src __tests__ playground && stylelint \"src/styles/*.scss\"",
     "ts": "node --max_old_space_size=8192 ./node_modules/vue-tsc/bin/vue-tsc.js --noEmit -p tsconfig.json",
     "size": "node ./node_modules/vite/bin/vite.js build --config vite.size.config.ts && node build/rjSizeReport.mjs",
+    "publish:github": "node scripts/publish-github.mjs",
+    "publish:github:push": "node scripts/publish-github.mjs --push",
     "prepublishOnly": "pnpm build && pnpm test"
   },
   "keywords": [