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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Loyd Emslie
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,163 @@
+# Vue SpEL Query Builder
+
+A Vue 3 component library for building SpEL (Spring Expression Language) expressions with a visual rule tree and code editor.
+
+## Features
+
+- **SpEL Editor**: Code editor with syntax highlighting and autocomplete for SpEL expressions
+- **Rule Tree**: Visual drag-and-drop interface for building complex boolean expressions
+- **Vue 3**: Built with Vue 3 Composition API
+- **TypeScript**: Full TypeScript support
+- **Theme Support**: Light and dark theme support
+
+## Installation
+
+```bash
+npm install @zeng-alt/vue-spel-query-builder
+# or
+yarn add @zeng-alt/vue-spel-query-builder
+# or
+pnpm add @zeng-alt/vue-spel-query-builder
+```
+
+## Peer Dependencies
+
+This package requires the following peer dependencies:
+
+```bash
+npm install vue@^3.5.0 naive-ui@^2.44.0
+```
+
+## Usage
+
+### SpEL Editor
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { SpelEditor } from '@zeng-alt/vue-spel-query-builder'
+import '@zeng-alt/vue-spel-query-builder/style.css'
+
+const expression = ref('authentication.details.name')
+
+const authentication = {
+  details: {
+    name: 'John',
+    email: 'john@example.com'
+  }
+}
+
+const principal = {
+  id: '12345'
+}
+
+const locals = {
+  user: {
+    name: 'John',
+    age: 25
+  }
+}
+</script>
+
+<template>
+  <SpelEditor
+    v-model="expression"
+    :authentication="authentication"
+    :principal="principal"
+    :locals="locals"
+    :height="300"
+    theme="dark"
+  />
+</template>
+```
+
+### Rule Tree
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { RuleTree, createEmptyGroup } from '@zeng-alt/vue-spel-query-builder'
+import type { RuleNode } from '@zeng-alt/vue-spel-query-builder'
+import '@zeng-alt/vue-spel-query-builder/style.css'
+
+const ruleData = ref<RuleNode>(createEmptyGroup('and'))
+
+const context = {
+  user: {
+    name: '张三',
+    age: 28,
+    email: 'zhangsan@example.com',
+    roles: ['admin', 'user'],
+    active: true
+  }
+}
+</script>
+
+<template>
+  <RuleTree
+    v-model="ruleData"
+    :context="context"
+    :authentication="{ details: { name: 'John' } }"
+    :principal="{ id: '123' }"
+    :locals="context"
+    theme="dark"
+  />
+</template>
+```
+
+## API
+
+### SpelEditor Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `modelValue` | `string` | `''` | SpEL expression value |
+| `authentication` | `object` | `{}` | Authentication context |
+| `principal` | `object` | `{}` | Principal context |
+| `locals` | `object` | `{}` | Local variables (accessed with # prefix) |
+| `height` | `number` | `300` | Editor height in pixels |
+| `theme` | `'light' \| 'dark'` | `'light'` | Editor theme |
+| `disabled` | `boolean` | `false` | Disable the editor |
+
+### RuleTree Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `modelValue` | `RuleNode` | - | Rule tree data |
+| `context` | `object` | `{}` | Context for field options |
+| `authentication` | `object` | `{}` | Authentication context |
+| `principal` | `object` | `{}` | Principal context |
+| `locals` | `object` | `{}` | Local variables |
+| `disabled` | `boolean` | `false` | Disable the rule tree |
+| `theme` | `'light' \| 'dark'` | `'light'` | Theme |
+
+### Utility Functions
+
+```typescript
+import { 
+  createEmptyGroup, 
+  createEmptyCondition,
+  validateSpelExpression,
+  evalSpelExpression,
+  ruleNodeToSpel
+} from '@zeng-alt/vue-spel-query-builder'
+
+// Create an empty group
+const group = createEmptyGroup('and') // or 'or'
+
+// Create an empty condition
+const condition = createEmptyCondition()
+
+// Validate SpEL expression
+const isValid = validateSpelExpression('user.name == "John"')
+
+// Evaluate SpEL expression
+const result = evalSpelExpression('user.age > 18', { user: { age: 25 } })
+
+// Convert rule node to SpEL string
+const spel = ruleNodeToSpel(ruleNode)
+```
+
+## License
+
+MIT

package/dist/assets/vue-spel-query-builder.css

@@ -0,0 +1,480 @@
+
+.spel-editor-wrap[data-v-cb26e4f6] { display:flex; flex-direction:column;
+}
+.spel-cm-wrap[data-v-cb26e4f6] { flex:1; overflow:hidden;
+}
+[data-v-cb26e4f6] .cm-editor { height:100%;
+}
+[data-v-cb26e4f6] .cm-editor.cm-focused { outline:none;
+}
+[data-v-cb26e4f6] .cm-scroller { overflow:auto;
+}
+.spel-err-enter-active[data-v-cb26e4f6],.spel-err-leave-active[data-v-cb26e4f6] { transition:all .2s ease;
+}
+.spel-err-enter-from[data-v-cb26e4f6],.spel-err-leave-to[data-v-cb26e4f6] { opacity:0; transform:translateY(-4px);
+}
+.size--tiny[data-v-cb26e4f6] .cm-content { padding:8px !important;
+}
+.size--small[data-v-cb26e4f6] .cm-content { padding:12px !important;
+}
+.size--medium[data-v-cb26e4f6] .cm-content { padding:16px !important;
+}
+.size--large[data-v-cb26e4f6] .cm-content { padding:20px !important;
+}
+.size--tiny[data-v-cb26e4f6] .cm-gutters { min-width:36px;
+}
+.size--tiny[data-v-cb26e4f6] .cm-lineNumbers .cm-gutterElement { font-size:10px; padding:0 6px;
+}
+.size--small[data-v-cb26e4f6] .cm-gutters { min-width:48px;
+}
+.size--medium[data-v-cb26e4f6] .cm-gutters { min-width:52px;
+}
+.size--large[data-v-cb26e4f6] .cm-gutters { min-width:56px;
+}
+
+/* ─── Slide transition ─────────────────────────────────────────── */
+.slide-down-enter-active[data-v-41249d75],
+.slide-down-leave-active[data-v-41249d75] {
+  transition: max-height 0.2s ease, opacity 0.15s ease;
+  max-height: 400px;
+  overflow: hidden;
+}
+.slide-down-enter-from[data-v-41249d75],
+.slide-down-leave-to[data-v-41249d75] {
+  max-height: 0;
+  opacity: 0;
+}
+
+/* ─── Condition card ───────────────────────────────────────────── */
+.theme--light.is-idle[data-v-41249d75],
+.theme--dark.is-idle[data-v-41249d75] {
+  background: var(--card-bg);
+  border-color: var(--card-border-idle);
+}
+.theme--light.is-idle[data-v-41249d75]:hover,
+.theme--dark.is-idle[data-v-41249d75]:hover {
+  border-color: var(--card-border-hover);
+}
+.theme--light.is-editing[data-v-41249d75],
+.theme--dark.is-editing[data-v-41249d75] {
+  background: var(--card-bg);
+  border-color: var(--card-border-editing);
+  box-shadow: var(--card-shadow-editing);
+}
+
+/* ─── Icon & text helpers ──────────────────────────────────────── */
+.icon-muted[data-v-41249d75] { color: var(--icon-muted);
+}
+.text-placeholder[data-v-41249d75] { color: var(--text-placeholder);
+}
+.text-secondary[data-v-41249d75] { color: var(--text-secondary);
+}
+
+/* ─── Expression chips ─────────────────────────────────────────── */
+.expr-chip[data-v-41249d75] {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 6px;
+  border-radius: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.expr-chip--field[data-v-41249d75] {
+  background: var(--expr-field-bg);
+  color: var(--expr-field-fg);
+  border: 1px solid var(--expr-field-border);
+}
+.expr-chip--op[data-v-41249d75] {
+  background: var(--expr-op-bg);
+  color: var(--expr-op-fg);
+  border: 1px solid var(--expr-op-border);
+}
+.expr-chip--val[data-v-41249d75] {
+  background: var(--expr-val-bg);
+  color: var(--expr-val-fg);
+  border: 1px solid var(--expr-val-border);
+}
+
+/* ─── Expression block ─────────────────────────────────────────── */
+.expr-block[data-v-41249d75] {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.expr-block__label[data-v-41249d75] {
+  font-size: 10px;
+  color: var(--expr-block-label);
+  padding-left: 2px;
+  letter-spacing: 0.3px;
+}
+.expr-block__body[data-v-41249d75] {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+  padding: 5px 8px;
+  background: var(--expr-block-body-bg);
+  border: 1px solid var(--expr-block-body-border);
+  border-radius: 6px;
+  min-height: 36px;
+}
+
+/* ─── Edit panel ───────────────────────────────────────────────── */
+.edit-panel[data-v-41249d75] {
+  background: var(--edit-panel-bg);
+  border-color: var(--edit-panel-border);
+}
+
+/* ─── Preview block ────────────────────────────────────────────── */
+.preview-block[data-v-41249d75] {
+  background: var(--preview-bg);
+  border: 1px solid var(--preview-border);
+}
+.preview-code[data-v-41249d75] {
+  color: var(--preview-text);
+}
+.preview-left[data-v-41249d75] {
+  color: var(--preview-left);
+}
+.preview-op[data-v-41249d75] {
+  color: var(--preview-op);
+}
+.preview-right[data-v-41249d75] {
+  color: var(--preview-right);
+}
+
+/* ─── Operator toggle ──────────────────────────────────────────── */
+.op-toggle[data-v-41249d75] {
+  display: inline-flex;
+  border: 1px solid var(--op-toggle-border);
+  border-radius: 5px;
+  overflow: hidden;
+  box-shadow: var(--op-toggle-shadow);
+}
+.op-toggle__btn[data-v-41249d75] {
+  padding: 0 12px;
+  height: 26px;
+  font-size: 12px;
+  font-weight: 600;
+  border: none;
+  border-right: 1px solid var(--op-toggle-btn-border);
+  background: var(--op-toggle-btn-bg);
+  color: var(--op-toggle-btn-fg);
+  cursor: pointer;
+  transition: background 0.1s, color 0.1s;
+}
+.op-toggle__btn[data-v-41249d75]:last-child { border-right: none;
+}
+.op-toggle__btn[data-v-41249d75]:disabled { cursor: not-allowed; opacity: 0.5;
+}
+.op-toggle__btn--off[data-v-41249d75]:not(:disabled):hover {
+  background: var(--op-toggle-btn-hover-bg);
+  color: var(--op-toggle-btn-hover-fg);
+}
+.op-toggle__btn--and[data-v-41249d75]:not(.op-toggle__btn--off) {
+  background: var(--op-toggle-and-bg);
+  color: var(--op-toggle-active-fg);
+}
+.op-toggle__btn--or[data-v-41249d75]:not(.op-toggle__btn--off) {
+  background: var(--op-toggle-or-bg);
+  color: var(--op-toggle-active-fg);
+}
+.op-toggle__btn--not[data-v-41249d75]:not(.op-toggle__btn--off) {
+  background: var(--op-toggle-not-bg);
+  color: var(--op-toggle-active-fg);
+}
+
+/* ─── Connectors & lines ───────────────────────────────────────── */
+.group-vline[data-v-41249d75] {
+  position: absolute;
+  left: 7px;
+  top: 0;
+  bottom: 12px;
+  width: 1px;
+  background: var(--connector-color);
+}
+.group-hline[data-v-41249d75] {
+  position: absolute;
+  left: -13px;
+  top: 17px;
+  width: 13px;
+  height: 1px;
+  background: var(--connector-color);
+}
+.group-connector[data-v-41249d75] {
+  position: absolute;
+  left: -9px;
+  top: 17px;
+  width: 9px;
+  height: 1px;
+  background: var(--connector-color);
+}
+
+/* ─── Empty state ──────────────────────────────────────────────── */
+.empty-state[data-v-41249d75] {
+  border-color: var(--empty-border);
+  color: var(--empty-fg);
+}
+
+/* ─── Divider ──────────────────────────────────────────────────── */
+.divider[data-v-41249d75] {
+  background: var(--divider-bg);
+}
+
+/* ─── Action buttons ───────────────────────────────────────────── */
+.action-btn[data-v-41249d75] {
+  background: #7c3aed !important;
+  border-color: #7c3aed !important;
+  color: #ffffff !important;
+
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+.action-btn[data-v-41249d75]:hover {
+  background: #6d28d9 !important;
+  border-color: #6d28d9 !important;
+
+  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.28);
+}
+.action-btn[data-v-41249d75]:active {
+  background: #5b21b6 !important;
+  border-color: #5b21b6 !important;
+}
+.action-btn[data-v-41249d75]:disabled {
+  opacity: 0.5 !important;
+  box-shadow: none !important;
+}
+
+/* ─── Size variants ───────────────────────────────────────────── */
+/* tiny */
+.size--tiny .group\/row[data-v-41249d75] { min-height: 28px; padding-left: 6px; padding-right: 6px;
+}
+.size--tiny .edit-panel[data-v-41249d75] { padding: 6px 8px;
+}
+.size--tiny .expr-block__body[data-v-41249d75] { padding: 3px 6px; min-height: 28px;
+}
+.size--tiny .expr-block__label[data-v-41249d75] { font-size: 9px;
+}
+.size--tiny .expr-chip[data-v-41249d75] { padding: 0 4px; font-size: 10px !important;
+}
+.size--tiny .op-toggle__btn[data-v-41249d75] { padding: 0 8px; height: 22px; font-size: 11px;
+}
+.size--tiny .action-btn[data-v-41249d75] { font-size: 11px !important;
+}
+.size--tiny .preview-block[data-v-41249d75] { padding: 4px 6px;
+}
+.size--tiny .preview-code[data-v-41249d75] { font-size: 10px !important;
+}
+.size--tiny .empty-state[data-v-41249d75] { padding: 12px 0;
+}
+.size--tiny .empty-state p[data-v-41249d75] { font-size: 10px;
+}
+
+/* small (default) */
+.size--small .group\/row[data-v-41249d75] { min-height: 34px; padding-left: 10px; padding-right: 10px;
+}
+.size--small .edit-panel[data-v-41249d75] { padding: 12px;
+}
+.size--small .expr-block__body[data-v-41249d75] { padding: 5px 8px; min-height: 36px;
+}
+.size--small .expr-block__label[data-v-41249d75] { font-size: 10px;
+}
+.size--small .expr-chip[data-v-41249d75] { padding: 1px 6px; font-size: 11px !important;
+}
+.size--small .op-toggle__btn[data-v-41249d75] { padding: 0 12px; height: 26px; font-size: 12px;
+}
+.size--small .preview-block[data-v-41249d75] { padding: 6px 8px;
+}
+.size--small .preview-code[data-v-41249d75] { font-size: 11px !important;
+}
+.size--small .empty-state[data-v-41249d75] { padding: 24px 0;
+}
+
+/* medium */
+.size--medium .group\/row[data-v-41249d75] { min-height: 40px; padding-left: 14px; padding-right: 14px;
+}
+.size--medium .edit-panel[data-v-41249d75] { padding: 16px;
+}
+.size--medium .expr-block__body[data-v-41249d75] { padding: 8px 12px; min-height: 44px;
+}
+.size--medium .expr-block__label[data-v-41249d75] { font-size: 11px;
+}
+.size--medium .expr-chip[data-v-41249d75] { padding: 2px 8px; font-size: 12px !important;
+}
+.size--medium .op-toggle__btn[data-v-41249d75] { padding: 0 16px; height: 30px; font-size: 13px;
+}
+.size--medium .preview-block[data-v-41249d75] { padding: 8px 12px;
+}
+.size--medium .preview-code[data-v-41249d75] { font-size: 12px !important;
+}
+.size--medium .empty-state[data-v-41249d75] { padding: 32px 0;
+}
+
+/* large */
+.size--large .group\/row[data-v-41249d75] { min-height: 48px; padding-left: 18px; padding-right: 18px;
+}
+.size--large .edit-panel[data-v-41249d75] { padding: 20px;
+}
+.size--large .expr-block__body[data-v-41249d75] { padding: 10px 16px; min-height: 52px;
+}
+.size--large .expr-block__label[data-v-41249d75] { font-size: 12px;
+}
+.size--large .expr-chip[data-v-41249d75] { padding: 3px 10px; font-size: 13px !important;
+}
+.size--large .op-toggle__btn[data-v-41249d75] { padding: 0 20px; height: 34px; font-size: 14px;
+}
+.size--large .preview-block[data-v-41249d75] { padding: 10px 16px;
+}
+.size--large .preview-code[data-v-41249d75] { font-size: 13px !important;
+}
+.size--large .empty-state[data-v-41249d75] { padding: 40px 0;
+}
+
+/* ===================================================================
+   Container
+   =================================================================== */
+.rule-tree-container[data-v-6f5f2d8f] {
+  padding: 16px;
+  border-radius: 8px;
+  min-height: 200px;
+  transition: background 0.2s, border-color 0.2s;
+}
+
+/* ===================================================================
+   CSS Custom Properties — Light & Dark themes
+   Defined at the root container so all descendants inherit the correct values.
+   =================================================================== */
+.rule-tree-container.theme--light[data-v-6f5f2d8f] {
+  background: #f8fafc;
+
+  --card-bg: #ffffff;
+  --card-border-idle: #e5e7eb;
+  --card-border-hover: #d1d5db;
+  --card-border-editing: #60a5fa;
+  --card-shadow-editing: 0 1px 3px rgba(0,0,0,.08);
+
+  --edit-panel-bg: rgba(249, 250, 251, 0.8);
+  --edit-panel-border: #f3f4f6;
+
+  --preview-bg: #ffffff;
+  --preview-border: #f3f4f6;
+  --preview-text: #6b7280;
+  --preview-left: #2563eb;
+  --preview-op: #4b5563;
+  --preview-right: #065f46;
+
+  --text-primary: #1f2937;
+  --text-secondary: #6b7280;
+  --text-placeholder: #9ca3af;
+  --text-muted: #d1d5db;
+  --icon-muted: #9ca3af;
+
+  --expr-field-bg: #eff6ff;
+  --expr-field-fg: #1d4ed8;
+  --expr-field-border: #bfdbfe;
+
+  --expr-op-bg: #f3f4f6;
+  --expr-op-fg: #1f2937;
+  --expr-op-border: #d1d5db;
+
+  --expr-val-bg: #ecfdf5;
+  --expr-val-fg: #065f46;
+  --expr-val-border: #a7f3d0;
+
+  --expr-block-body-bg: #ffffff;
+  --expr-block-body-border: #e5e7eb;
+  --expr-block-label: #9ca3af;
+
+  --op-toggle-border: #d1d5db;
+  --op-toggle-shadow: 0 1px 2px rgba(0,0,0,.04);
+  --op-toggle-btn-bg: #ffffff;
+  --op-toggle-btn-fg: #6b7280;
+  --op-toggle-btn-border: #e5e7eb;
+  --op-toggle-btn-hover-bg: #f9fafb;
+  --op-toggle-btn-hover-fg: #374151;
+  --op-toggle-and-bg: #1d4ed8;
+  --op-toggle-or-bg: #d97706;
+  --op-toggle-not-bg: #dc2626;
+  --op-toggle-active-fg: #ffffff;
+
+  --connector-color: #e5e7eb;
+
+  --empty-border: #e5e7eb;
+  --empty-fg: #9ca3af;
+
+  --divider-bg: #e5e7eb;
+}
+.rule-tree-container.theme--dark[data-v-6f5f2d8f] {
+  background: #1a1a2e;
+
+  --card-bg: #1e1e32;
+  --card-border-idle: #3e3e5c;
+  --card-border-hover: #5c5c7a;
+  --card-border-editing: #60a5fa;
+  --card-shadow-editing: 0 1px 6px rgba(96, 165, 250, 0.15);
+
+  --edit-panel-bg: rgba(30, 30, 50, 0.85);
+  --edit-panel-border: #3e3e5c;
+
+  --preview-bg: #252545;
+  --preview-border: #3e3e5c;
+  --preview-text: #9ca3af;
+  --preview-left: #93c5fd;
+  --preview-op: #d1d5db;
+  --preview-right: #6ee7b7;
+
+  --text-primary: #e5e5e5;
+  --text-secondary: #9ca3af;
+  --text-placeholder: #6b7280;
+  --text-muted: #4b5563;
+  --icon-muted: #6b7280;
+
+  --expr-field-bg: rgba(59, 130, 246, 0.15);
+  --expr-field-fg: #93c5fd;
+  --expr-field-border: rgba(59, 130, 246, 0.3);
+
+  --expr-op-bg: rgba(107, 114, 128, 0.2);
+  --expr-op-fg: #d1d5db;
+  --expr-op-border: rgba(107, 114, 128, 0.3);
+
+  --expr-val-bg: rgba(16, 185, 129, 0.15);
+  --expr-val-fg: #6ee7b7;
+  --expr-val-border: rgba(16, 185, 129, 0.3);
+
+  --expr-block-body-bg: #252545;
+  --expr-block-body-border: #3e3e5c;
+  --expr-block-label: #6b7280;
+
+  --op-toggle-border: #3e3e5c;
+  --op-toggle-shadow: 0 1px 2px rgba(0,0,0,.2);
+  --op-toggle-btn-bg: #252545;
+  --op-toggle-btn-fg: #9ca3af;
+  --op-toggle-btn-border: #3e3e5c;
+  --op-toggle-btn-hover-bg: #2e2e52;
+  --op-toggle-btn-hover-fg: #e5e5e5;
+  --op-toggle-and-bg: #2563eb;
+  --op-toggle-or-bg: #d97706;
+  --op-toggle-not-bg: #dc2626;
+  --op-toggle-active-fg: #ffffff;
+
+  --connector-color: #3e3e5c;
+
+  --empty-border: #3e3e5c;
+  --empty-fg: #6b7280;
+
+  --divider-bg: #3e3e5c;
+}
+
+/* ─── Size variants ────────────────────────────────────────────── */
+.rule-tree-container.size--tiny[data-v-6f5f2d8f] { padding: 8px;
+}
+.rule-tree-container.size--small[data-v-6f5f2d8f] { padding: 12px;
+}
+.rule-tree-container.size--medium[data-v-6f5f2d8f] { padding: 20px;
+}
+.rule-tree-container.size--large[data-v-6f5f2d8f] { padding: 28px;
+}
+/*$vite$:1*/