@zeng-alt/vue-spel-query-builder 1.0.0

package/dist/src/components/RuleTree/RuleTree.vue.d.ts

@@ -0,0 +1,13 @@
+import { RuleTreeProps, RuleTreeInstance } from '../../types';
+declare const __VLS_export: import('vue').DefineComponent<RuleTreeProps, RuleTreeInstance, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: import('../..').RuleNode) => any;
+    change: (value: import('../..').RuleNode) => any;
+}, string, import('vue').PublicProps, Readonly<RuleTreeProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: import('../..').RuleNode) => any) | undefined;
+    onChange?: ((value: import('../..').RuleNode) => any) | undefined;
+}>, {
+    size: import('../..').ComponentSize;
+    theme: "light" | "dark";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/src/components/RuleTree/RuleTreeNode.vue.d.ts

@@ -0,0 +1,27 @@
+import { RuleNode, ComponentSize } from '../../types';
+type __VLS_Props = {
+    node: RuleNode;
+    authentication?: Record<string, any>;
+    principal?: Record<string, any>;
+    locals?: Record<string, any>;
+    disabled?: boolean;
+    level?: number;
+    theme?: 'light' | 'dark';
+    size?: ComponentSize;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "add-condition": (id: string) => any;
+    "add-group": (id: string) => any;
+    "remove-node": (id: string) => any;
+    "update-node": (id: string, updates: Partial<RuleNode>) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onAdd-condition"?: ((id: string) => any) | undefined;
+    "onAdd-group"?: ((id: string) => any) | undefined;
+    "onRemove-node"?: ((id: string) => any) | undefined;
+    "onUpdate-node"?: ((id: string, updates: Partial<RuleNode>) => any) | undefined;
+}>, {
+    size: ComponentSize;
+    theme: "light" | "dark";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/src/components/SpelEditor/SpelEditor.vue.d.ts

@@ -0,0 +1,17 @@
+import { SpelEditorProps, SpelEditorInstance, ComponentSize } from '../../types';
+declare const __VLS_export: import('vue').DefineComponent<SpelEditorProps, SpelEditorInstance, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string) => any;
+    change: (value: string) => any;
+    validate: (isValid: boolean, error?: string | undefined) => any;
+    run: (result: any, error?: string | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<SpelEditorProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onChange?: ((value: string) => any) | undefined;
+    onValidate?: ((isValid: boolean, error?: string | undefined) => any) | undefined;
+    onRun?: ((result: any, error?: string | undefined) => any) | undefined;
+}>, {
+    size: ComponentSize;
+    theme: "dark" | "light";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/src/components/SpelEditor/spel-autocomplete-ext.d.ts

@@ -0,0 +1,7 @@
+import { hoverTooltip } from '@codemirror/view';
+import { CompletionSource } from '@codemirror/autocomplete';
+import { ThemeTokens } from './spel-types';
+export { buildHoverTooltipDom } from './spel-autocomplete-tooltip';
+export declare function buildExtensions(T: ThemeTokens, isDark: boolean, fontSize: number, source: CompletionSource, tooltip: ReturnType<typeof hoverTooltip>): ({
+    extension: import('@codemirror/state').Extension;
+} | readonly import('@codemirror/state').Extension[] | import('@codemirror/language').StreamLanguage<{}>)[];

package/dist/src/components/SpelEditor/spel-autocomplete-style.d.ts

@@ -0,0 +1,10 @@
+import { ThemeTokens } from './spel-types';
+export declare function injectAutocompleteStyle(T: ThemeTokens): void;
+export declare function getTokenAt(doc: {
+    sliceString: (a: number, b: number) => string;
+    length: number;
+}, pos: number): {
+    from: number;
+    to: number;
+    text: string;
+} | null;

package/dist/src/components/SpelEditor/spel-autocomplete-tooltip.d.ts

@@ -0,0 +1,2 @@
+import { ThemeTokens, SpelEntry } from './spel-types';
+export declare function buildHoverTooltipDom(entry: SpelEntry, T: ThemeTokens): HTMLElement;

package/dist/src/components/SpelEditor/spel-completions.d.ts

@@ -0,0 +1,9 @@
+import { SpelEntry, ArrayMeta, ElementField } from './spel-types';
+export declare function buildEntries(authentication?: Record<string, any>, principal?: Record<string, any>, locals?: Record<string, any>): SpelEntry[];
+export declare function buildTypeMap(authentication?: Record<string, any>, principal?: Record<string, any>, locals?: Record<string, any>): Record<string, string>;
+export declare function buildElementFields(obj: any): ElementField[];
+export declare function buildArrayMeta(authentication?: Record<string, any>, principal?: Record<string, any>, locals?: Record<string, any>): Record<string, ArrayMeta>;
+export declare function buildStringMethodEntries(): SpelEntry[];
+export declare function buildArrayMethodEntries(am?: ArrayMeta): SpelEntry[];
+export declare function buildFilterFieldEntries(fields: ElementField[], prefix?: string): SpelEntry[];
+export declare function resolveFieldPath(fields: ElementField[], path: string): ElementField | null;

package/dist/src/components/SpelEditor/spel-parser.d.ts

@@ -0,0 +1,8 @@
+import { StreamLanguage } from '@codemirror/language';
+/**
+ * SpEL StreamLanguage 解析器
+ * 用于语法高亮、括号匹配等
+ */
+export declare const SPEL_KEYWORDS: Set<string>;
+export declare const SPEL_BUILTIN_FNS: Set<string>;
+export declare const spelLanguage: StreamLanguage<{}>;

package/dist/src/components/SpelEditor/spel-theme.d.ts

@@ -0,0 +1,15 @@
+import { HighlightStyle } from '@codemirror/language';
+import { ThemeTokens } from './spel-types';
+/**
+ * 编辑器主题色板
+ */
+export declare const DARK: ThemeTokens;
+export declare const LIGHT: ThemeTokens;
+/**
+ * 创建语法高亮样式（随主题响应式重建）
+ */
+export declare function createSpelHighlightStyle(T: ThemeTokens): HighlightStyle;
+/**
+ * 创建编辑器 UI 主题（随主题响应式重建）
+ */
+export declare function createSpelTheme(T: ThemeTokens, isDark: boolean, fontSize: number): import('@codemirror/state').Extension;

package/dist/src/components/SpelEditor/spel-types.d.ts

@@ -0,0 +1,92 @@
+/**
+ * 补全条目接口
+ */
+export interface SpelEntry {
+    label: string;
+    type: 'variable' | 'property' | 'keyword' | 'function';
+    detail: string;
+    desc: string;
+    extra?: string;
+}
+/**
+ * 对象数组元素中的递归字段
+ */
+export interface ElementField {
+    label: string;
+    value: string;
+    type: string;
+    children?: ElementField[];
+    elementType?: string;
+    elementFields?: ElementField[];
+}
+/**
+ * 数组元信息（路径 → 元素类型/字段）
+ */
+export interface ArrayMeta {
+    elementType: string;
+    elementFields?: ElementField[];
+}
+/**
+ * 编辑器主题色板
+ */
+export interface ThemeTokens {
+    editorBg: string;
+    gutterBg: string;
+    gutterBorder: string;
+    gutterFg: string;
+    contentFg: string;
+    activeLine: string;
+    activeGutter: string;
+    selectionBg: string;
+    cursor: string;
+    matchBracket: string;
+    matchBracketBg: string;
+    keyword: string;
+    operator: string;
+    string: string;
+    number: string;
+    atom: string;
+    variable: string;
+    definition: string;
+    property: string;
+    comment: string;
+    acBg: string;
+    acBorder: string;
+    acScrollThumb: string;
+    acItemFg: string;
+    acItemHoverBg: string;
+    acIconVar: string;
+    acIconVarBg: string;
+    acIconProp: string;
+    acIconPropBg: string;
+    acIconKey: string;
+    acIconKeyBg: string;
+    acIconFn: string;
+    acIconFnBg: string;
+    acLabel: string;
+    acLabelHover: string;
+    acDetail: string;
+    acDetailHover: string;
+    acDetailBorder: string;
+    ttBg: string;
+    ttBorder: string;
+    ttFg: string;
+    ttLabelFg: string;
+    ttDivider: string;
+    ttCodeBg: string;
+    ttCodeFg: string;
+    ttCodeBorder: string;
+    badgeVarBg: string;
+    badgeVarFg: string;
+    badgePropBg: string;
+    badgePropFg: string;
+    badgeKeyBg: string;
+    badgeKeyFg: string;
+    badgeFnBg: string;
+    badgeFnFg: string;
+    headerFrom: string;
+    headerTo: string;
+    errBg: string;
+    errBorder: string;
+    errFg: string;
+}

package/dist/src/components/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SpelEditor } from './SpelEditor/SpelEditor.vue';
+export { default as RuleTree } from './RuleTree/RuleTree.vue';
+export type { SpelEditorProps, SpelEditorEmits, SpelEditorInstance, RuleTreeProps, RuleTreeEmits, RuleTreeInstance } from '../types';

package/dist/src/composables/index.d.ts

@@ -0,0 +1,2 @@
+export { useSpelEditor } from './useSpelEditor';
+export { useRuleTree } from './useRuleTree';

package/dist/src/composables/useRuleTree.d.ts

@@ -0,0 +1,11 @@
+import { RuleNode, RuleTreeProps } from '../types';
+export declare function useRuleTree(props: RuleTreeProps, emit: any): {
+    getSpelExpression: () => string;
+    setSpelExpression: (_expression: string) => void;
+    addCondition: (parentId: string) => void;
+    addGroup: (parentId: string, operator?: "and" | "or") => void;
+    removeNode: (nodeId: string) => void;
+    updateNode: (nodeId: string, updates: Partial<RuleNode>) => void;
+    validate: () => boolean;
+    run: (props: RuleTreeProps, sepl: string) => any;
+};

package/dist/src/composables/useSpelEditor.d.ts

@@ -0,0 +1,23 @@
+import { SpelEditorProps } from '../types';
+export declare function useSpelEditor(props: SpelEditorProps, emit: any): {
+    internalValue: import('vue').Ref<string, string>;
+    isFocused: import('vue').Ref<boolean, boolean>;
+    validation: import('vue').Ref<{
+        valid: boolean;
+        error?: string | undefined;
+    }, {
+        valid: boolean;
+        error?: string;
+    } | {
+        valid: boolean;
+        error?: string | undefined;
+    }>;
+    heightStyle: import('vue').ComputedRef<{
+        height: string;
+    }>;
+    handleInput: (value: string) => void;
+    handleValidate: () => Promise<boolean>;
+    setValue: (value: string) => void;
+    getValue: () => string;
+    run: () => Promise<any>;
+};

package/dist/src/constants/index.d.ts

@@ -0,0 +1,9 @@
+import { Comparator } from '../types';
+export declare const DEFAULT_COMPARATORS: Comparator[];
+export declare const GROUP_OPERATORS: {
+    value: string;
+    label: string;
+}[];
+export declare const EDITOR_THEME = "one-dark";
+export declare const EDITOR_DEFAULT_HEIGHT = "400px";
+export declare const RULE_TREE_DEFAULT_HEIGHT = "500px";

package/dist/src/index.d.ts

@@ -0,0 +1,6 @@
+export { spelService } from './spel-service';
+export { SpelEditor, RuleTree } from './components';
+export type { SpelEditorProps, SpelEditorEmits, SpelEditorInstance, RuleTreeProps, RuleTreeEmits, RuleTreeInstance, RuleNode, ContextVariable, Comparator, ComponentSize, } from './types';
+export { useSpelEditor, useRuleTree } from './composables';
+export { validateSpelExpression, evalSpelExpression, ruleNodeToSpel, createEmptyCondition, createEmptyGroup, generateId, } from './utils';
+export { DEFAULT_COMPARATORS, GROUP_OPERATORS, EDITOR_THEME, EDITOR_DEFAULT_HEIGHT, RULE_TREE_DEFAULT_HEIGHT, } from './constants';

package/dist/src/spel-service.d.ts

@@ -0,0 +1,9 @@
+declare class SpelService {
+    private context;
+    setContext(authentication?: any, principal?: any): void;
+    getContext(): any;
+    compile(expression: string): import('spel2js').CompiledExpression;
+    eval(expression: string, locals?: Record<string, any>): any;
+}
+export declare const spelService: SpelService;
+export {};

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

@@ -0,0 +1,108 @@
+export type ComponentSize = 'tiny' | 'small' | 'medium' | 'large';
+export interface SpelEditorProps {
+    modelValue: string;
+    authentication?: Record<string, any>;
+    principal?: Record<string, any>;
+    locals?: Record<string, any>;
+    disabled?: boolean;
+    readonly?: boolean;
+    height?: string | number;
+    theme?: 'dark' | 'light';
+    size?: ComponentSize;
+}
+export interface SpelEditorEmits {
+    (e: 'update:modelValue', value: string): void;
+    (e: 'change', value: string): void;
+    (e: 'validate', isValid: boolean, error?: string): void;
+    (e: 'run', result: any, error?: string): void;
+}
+export interface FunctionArgument {
+    type: 'value' | 'field' | 'function';
+    value?: string;
+    functionArgument?: FunctionArgument;
+}
+export type ValueSource = 'value' | 'field' | 'function';
+export type FieldSource = 'field' | 'function';
+export type LogicalOperator = 'and' | 'or' | 'not';
+export interface FieldOption {
+    label: string;
+    value: string | number;
+    type?: string;
+    children?: FieldOption[];
+    elementType?: string;
+    elementChildren?: FieldOption[];
+}
+export type Expression = {
+    type: 'literal';
+    value: string;
+    literalType?: string;
+} | {
+    type: 'field';
+    path: string;
+} | {
+    type: 'function';
+    call: FunctionCall;
+};
+export interface FunctionCall {
+    method: string;
+    base?: Expression;
+    args: Expression[];
+}
+export interface FunctionDef {
+    label: string;
+    value: string;
+    argumentCount: number;
+    hasBase: boolean;
+    baseType?: string;
+    returnType?: string;
+}
+export interface ListFilter {
+    comparator: string;
+    value?: Expression;
+    fieldPath?: string;
+}
+export interface RuleNode {
+    id: string;
+    type: 'condition' | 'group';
+    operator?: LogicalOperator;
+    children?: RuleNode[];
+    left?: Expression;
+    comparator?: string;
+    right?: Expression;
+    listFilter?: ListFilter;
+}
+export interface RuleTreeProps {
+    modelValue: RuleNode;
+    authentication?: Record<string, any>;
+    principal?: Record<string, any>;
+    locals?: Record<string, any>;
+    disabled?: boolean;
+    theme?: 'light' | 'dark';
+    size?: ComponentSize;
+}
+export interface RuleTreeEmits {
+    (e: 'update:modelValue', value: RuleNode): void;
+    (e: 'change', value: RuleNode): void;
+}
+export interface ContextVariable {
+    name: string;
+    type: string;
+    description?: string;
+}
+export interface Comparator {
+    value: string;
+    label: string;
+    types: string[];
+}
+export interface SpelEditorInstance {
+    getValue: () => string;
+    setValue: (value: string) => void;
+    validate: () => Promise<boolean>;
+    run: () => Promise<any>;
+    focus: () => void;
+}
+export interface RuleTreeInstance {
+    getSpelExpression: () => string;
+    setSpelExpression: (expression: string) => void;
+    validate: () => boolean;
+}

package/dist/src/utils/index.d.ts

@@ -0,0 +1,26 @@
+import { RuleNode, LogicalOperator, Expression } from '../types';
+export declare function generateId(): string;
+export declare function validateSpelExpression(expression: string): {
+    valid: boolean;
+    error?: string;
+};
+export declare function evalSpelExpression(expression: string, locals: Record<string, any>): any;
+/**
+ * 将 RuleNode 树转换为 SpEL 表达式字符串
+ */
+export declare function ruleNodeToSpel(node: RuleNode): string;
+/**
+ * 格式化 Expression 为 SpEL 字符串
+ * - 字面量：'字符串'，数字不加引号（这里简单处理，所有字面量加单引号，数字可后续增强）
+ * - 字段：直接使用路径
+ * - 函数：base.method(arg1, arg2, ...)
+ */
+export declare function formatExpression(expr?: Expression): string;
+/**
+ * 创建一个新的空白条件节点
+ */
+export declare function createEmptyCondition(): RuleNode;
+/**
+ * 创建一个新的空白分组节点
+ */
+export declare function createEmptyGroup(operator?: LogicalOperator): RuleNode;

package/package.json

@@ -0,0 +1,107 @@
+{
+  "name": "@zeng-alt/vue-spel-query-builder",
+  "version": "1.0.0",
+  "description": "Vue3 SpEL Query Builder - A visual rule tree and code editor for SpEL expressions",
+  "author": "zeng-alt",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zeng-alt/vue-spel-query-builder.git"
+  },
+  "bugs": {
+    "url": "https://github.com/zeng-alt/vue-spel-query-builder/issues"
+  },
+  "homepage": "https://github.com/zeng-alt/vue-spel-query-builder#readme",
+  "type": "module",
+  "keywords": [
+    "vue3",
+    "spel",
+    "query-builder",
+    "rule-engine",
+    "codemirror",
+    "naive-ui"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.esm",
+  "types": "./dist/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "import": "./dist/index.esm",
+      "require": "./dist/index.cjs"
+    },
+    "./style.css": "./dist/assets/vue-spel-query-builder.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite --config vite.config.ts",
+    "build": "vite build --config vite.lib.config.ts",
+    "build:all": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview --config vite.config.ts",
+    "test:unit": "vitest",
+    "build-only": "vite build --config vite.lib.config.ts",
+    "type-check": "vue-tsc --build",
+    "lint": "run-s lint:*",
+    "lint:oxlint": "oxlint . --fix",
+    "lint:eslint": "eslint . --fix --cache",
+    "format": "prettier --write --experimental-cli src/",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "naive-ui": "^2.44.0",
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "@codemirror/autocomplete": "^6.0.0",
+    "@codemirror/commands": "^6.10.3",
+    "@codemirror/language": "^6.9.2",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.38.2",
+    "@lezer/highlight": "^1.2.0",
+    "@unocss/vite": "^66.6.8",
+    "codemirror": "^6.0.1",
+    "spel2js": "^0.2.9",
+    "unocss": "^66.6.8",
+    "vite-plugin-dts": "^5.0.0",
+    "vue-codemirror": "^6.1.1"
+  },
+  "devDependencies": {
+    "@iconify-json/carbon": "^1.2.8",
+    "@tsconfig/node24": "^24.0.4",
+    "@types/jsdom": "^28.0.1",
+    "@types/node": "^24.12.2",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "@vitejs/plugin-vue-jsx": "^5.1.5",
+    "@vitest/eslint-plugin": "^1.6.16",
+    "@vue/eslint-config-typescript": "^14.7.0",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.9.1",
+    "eslint": "^10.2.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-oxlint": "~1.60.0",
+    "eslint-plugin-vue": "~10.8.0",
+    "jiti": "^2.6.1",
+    "jsdom": "^29.0.2",
+    "naive-ui": "^2.44.1",
+    "npm-run-all2": "^8.0.4",
+    "oxlint": "~1.60.0",
+    "prettier": "3.8.3",
+    "typescript": "~6.0.0",
+    "vite": "^8.0.8",
+    "vite-plugin-vue-devtools": "^8.1.1",
+    "vitest": "^4.1.4",
+    "vue": "^3.5.32",
+    "vue-tsc": "^3.2.6"
+  },
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  }
+}