rj-grid 0.2.1 → 0.2.2

package/dist/style.css

@@ -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;
 }
@@ -1139,6 +1244,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/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/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[]>) | {
     /** 静态候选（对象式） */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rj-grid",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "零第三方依赖的自研 Vue3 虚拟表格：虚拟滚动 / 冻结列 / 行拖拽 / 分组透视 / 公式 / SSRM / 主题 i18n / 自然语言查询",
   "type": "module",
   "license": "MIT",