@veltra/desktop 1.1.15 → 1.1.18

package/src/components/auto-complete/style.ts

@@ -4,5 +4,5 @@ import '../input/style'
 import '../icon/style'
 import '@veltra/directives/ripple/style.js'
 import '../tag/style'
-import '@veltra/styles/anime/zoom-in.scss'
+import '@veltra/styles/transitions/zoom-in.scss'
 import './style.scss'

package/src/components/badge/badge.vue

@@ -50,7 +50,7 @@ const setPosition = () => {
     const { width, height } = supRef.value.getBoundingClientRect()
     setStyles(supRef.value, {
       transform: `translate(-${width / 2}px, -${height / 2}px)`,
-      backgroundColor: props.color && props.color,
+      backgroundColor: props.color,
       zIndex: zIndex()
     })
   }

package/src/components/batch-edit/style.ts

@@ -7,5 +7,5 @@ import '../scroll/style'
 import '../table/style'
 import '../kbd/style'
 import '@veltra/directives/ripple/style.js'
-import '@veltra/styles/anime/fade.scss'
+import '@veltra/styles/transitions/fade.scss'
 import './style.scss'

package/src/components/button/style.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use 'pkg:@veltra/styles/mixins' as m;
-@use 'pkg:@veltra/styles/vars';
 @use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
 
 $root-name: button;
 

package/src/components/cascade/use-select.ts

@@ -59,12 +59,14 @@ export function useSelect(options: SelectOptions): UseSelectReturned {
     const { modelValue, separator } = props
     const valueNodes =
       modelValue && typeof modelValue === 'string' ? modelValue.split(separator!) : undefined
-    return valueNodes
-      ?.map((v) => {
-        const node = dataMap.value.get(v)
-        return node?.label ?? v
-      })
-      .join(props.separator)
+    return (
+      valueNodes
+        ?.map((v) => {
+          const node = dataMap.value.get(v)
+          return node?.label ?? v
+        })
+        .join(props.separator) ?? ''
+    )
   })
 
   function getPanelItemList(data?: CascadeNode[]) {

package/src/components/checkbox/style.ts

@@ -1,3 +1,3 @@
-import '@veltra/styles/anime/zoom-in.scss'
+import '@veltra/styles/transitions/zoom-in.scss'
 import '../tag/style'
 import './style.scss'

package/src/components/collapse/__test__/collapse.test.ts

@@ -1,4 +1,4 @@
-// @vitest-environment happy-dom
+import { describe, expect, it } from 'vitest'
 import { createApp, h, nextTick, ref } from 'vue'
 
 import UCollapseItem from '../collapse-item.vue'
@@ -119,7 +119,7 @@ describe('Collapse', () => {
 
       const activeItems = host.querySelectorAll('.u-collapse__item.is-active')
       expect(activeItems.length).toBe(1)
-      expect(activeItems[0].querySelector('.u-collapse__title')?.textContent).toBe('Title A')
+      expect(activeItems[0]?.querySelector('.u-collapse__title')?.textContent).toBe('Title A')
     } finally {
       unmount()
     }
@@ -135,7 +135,7 @@ describe('Collapse', () => {
 
       const activeItems = host.querySelectorAll('.u-collapse__item.is-active')
       expect(activeItems.length).toBe(1)
-      expect(activeItems[0].querySelector('.u-collapse__title')?.textContent).toBe('Title A')
+      expect(activeItems[0]?.querySelector('.u-collapse__title')?.textContent).toBe('Title A')
     } finally {
       unmount()
     }

package/src/components/condition-editor/components/condition-group.vue

@@ -1,131 +1,162 @@
 <template>
-  <div :class="cls.e('group')">
-    <!-- AND/OR 标签 + 汇总结果 -->
-    <div :class="cls.e('group-header')">
-      <span :class="[cls.e('logic-tag'), cls.em('logic-tag', group.logic)]" @click="toggleLogic">
-        {{ group.logic.toUpperCase() }} ▾
-      </span>
-      <span
-        v-if="hasResult"
-        :class="[cls.e('group-result'), cls.em('group-result', group._result ? 'pass' : 'fail')]"
-      >
-        {{ group._result ? '✓ 通过' : '✗ 不通过' }}
-      </span>
-    </div>
-
-    <!-- 嵌套组容器 -->
-    <div :class="cls.e('group-body')">
-      <!-- 子条件 -->
-      <ConditionRow
-        v-for="(cond, idx) in group.conditions"
-        :key="idx"
-        :item="cond"
-        :fields="fields"
-        :size="size"
-        :disabled="disabled"
-        :readonly="readonly"
-        @update:item="(item) => updateCondition(idx, item)"
-        @delete="removeCondition(idx)"
-        @mention="(p) => emit('mention', p)"
-      />
-
-      <!-- 子分组（递归） -->
-      <ConditionGroup
-        v-for="(sub, idx) in group.groups"
-        :key="idx"
-        :group="sub"
-        :fields="fields"
-        :size="size"
-        :disabled="disabled"
-        :readonly="readonly"
-        @update:group="(g) => updateSubGroup(idx, g)"
-        @remove="() => removeSubGroup(idx)"
-        @mention="(p) => emit('mention', p)"
-      />
-
-      <!-- 空状态 + 添加按钮 -->
-      <div :class="cls.e('group-actions')">
-        <span v-if="!readonly" :class="cls.e('add-btn')" @click="addCondition">＋ 添加条件</span>
-        <span v-if="!readonly" :class="cls.e('add-btn')" @click="addGroup">＋ 添加条件组</span>
+  <div :class="[cls.e('group'), depth > 0 ? cls.em('group', 'nested') : '']">
+    <template v-if="group.children.length === 0">
+      <div :class="cls.e('group-empty')">
+        <span :class="cls.e('group-empty-tip')">暂无条件</span>
       </div>
+    </template>
+
+    <ul :class="cls.e('group-list')">
+      <li v-for="(child, idx) in group.children" :key="idx" :class="cls.e('group-item')">
+        <span
+          v-if="idx > 0"
+          :class="[cls.e('connector'), cls.em('connector', connectorAt(idx - 1))]"
+          :tabindex="readonly || disabled ? -1 : 0"
+          role="button"
+          :aria-label="`切换连接符（当前 ${connectorAt(idx - 1).toUpperCase()}）`"
+          @click="toggleConnector(idx - 1)"
+          @keydown.enter.prevent="toggleConnector(idx - 1)"
+          @keydown.space.prevent="toggleConnector(idx - 1)"
+          >{{ connectorAt(idx - 1).toUpperCase() }}</span
+        >
+        <span v-else :class="cls.e('connector-placeholder')">WHERE</span>
+
+        <div :class="cls.e('group-item-body')">
+          <ConditionRow
+            v-if="child.type === 'condition'"
+            :item="child"
+            :fields="fields"
+            :size="size"
+            :disabled="disabled"
+            :readonly="readonly"
+            @update:item="(it) => updateChild(idx, it)"
+            @delete="removeChild(idx)"
+            @mention="(p) => emit('mention', p)"
+          />
+          <ConditionGroup
+            v-else
+            :group="child"
+            :fields="fields"
+            :size="size"
+            :depth="depth + 1"
+            :disabled="disabled"
+            :readonly="readonly"
+            @update:group="(g) => updateChild(idx, g)"
+            @remove="removeChild(idx)"
+            @mention="(p) => emit('mention', p)"
+          />
+        </div>
+      </li>
+    </ul>
+
+    <div v-if="!readonly" :class="cls.e('group-actions')">
+      <button type="button" :class="cls.e('action-btn')" :disabled="disabled" @click="addCondition">
+        <u-icon><Plus /></u-icon>
+        <span>添加条件</span>
+      </button>
+      <button type="button" :class="cls.e('action-btn')" :disabled="disabled" @click="addGroup">
+        <u-icon><Plus /></u-icon>
+        <span>添加条件组</span>
+      </button>
+      <button
+        v-if="depth > 0"
+        type="button"
+        :class="[cls.e('action-btn'), cls.em('action-btn', 'danger')]"
+        :disabled="disabled"
+        @click="emit('remove')"
+      >
+        <u-icon><Delete /></u-icon>
+        <span>删除组</span>
+      </button>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { Delete, Plus } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
-import { computed } from 'vue'
 
-import type { ConditionField, ConditionGroup, ConditionItem } from '../../../types'
-import { createEmptyGroup, createEmptyItem } from '../core/evaluator'
+import type {
+  ConditionConnector,
+  ConditionField,
+  ConditionGroup as ConditionGroupNode,
+  ConditionNode
+} from '../../../types'
+import { UIcon } from '../../icon'
+import { createEmptyGroup, createEmptyLeaf } from '../core/evaluator'
 import ConditionRow, { type MentionPayload } from './condition-row.vue'
 
 defineOptions({ name: 'ConditionGroup' })
 
 const props = withDefaults(
   defineProps<{
-    group: ConditionGroup
+    group: ConditionGroupNode
     fields?: ConditionField[]
     size?: 'small' | 'default' | 'large'
+    depth?: number
     disabled?: boolean
     readonly?: boolean
   }>(),
-  { size: 'default' }
+  { size: 'default', depth: 0 }
 )
 
 const emit = defineEmits<{
-  (e: 'update:group', group: ConditionGroup): void
+  (e: 'update:group', group: ConditionGroupNode): void
   (e: 'remove'): void
   (e: 'mention', payload: MentionPayload): void
 }>()
 
 const cls = bem('condition-editor')
 
-const hasResult = computed(() => props.group._result !== undefined)
-
-function toggleLogic() {
-  if (props.disabled || props.readonly) return
-  emit('update:group', {
-    ...props.group,
-    logic: props.group.logic === 'and' ? 'or' : 'and'
-  })
+function connectorAt(index: number): ConditionConnector {
+  return props.group.connectors[index] ?? 'and'
 }
 
-function addCondition() {
-  emit('update:group', {
-    ...props.group,
-    conditions: [...props.group.conditions, createEmptyItem()]
-  })
+function emitUpdate(next: Partial<ConditionGroupNode>) {
+  emit('update:group', { ...props.group, ...next })
 }
 
-function removeCondition(idx: number) {
-  const conditions = [...props.group.conditions]
-  conditions.splice(idx, 1)
-  emit('update:group', { ...props.group, conditions })
+function toggleConnector(index: number) {
+  if (props.disabled || props.readonly) return
+  const next = props.group.connectors.slice()
+  next[index] = connectorAt(index) === 'and' ? 'or' : 'and'
+  emitUpdate({ connectors: next })
 }
 
-function updateCondition(idx: number, item: ConditionItem) {
-  const conditions = [...props.group.conditions]
-  conditions[idx] = item
-  emit('update:group', { ...props.group, conditions })
+function addCondition() {
+  appendChild(createEmptyLeaf())
 }
 
 function addGroup() {
-  emit('update:group', {
-    ...props.group,
-    groups: [...props.group.groups, createEmptyGroup()]
-  })
+  appendChild({ ...createEmptyGroup(), children: [createEmptyLeaf()], connectors: [] })
+}
+
+function appendChild(node: ConditionNode) {
+  const children = [...props.group.children, node]
+  const connectors =
+    props.group.children.length === 0
+      ? props.group.connectors
+      : [...props.group.connectors, 'and' as const]
+  emitUpdate({ children, connectors })
 }
 
-function removeSubGroup(idx: number) {
-  const groups = [...props.group.groups]
-  groups.splice(idx, 1)
-  emit('update:group', { ...props.group, groups })
+function updateChild(index: number, node: ConditionNode) {
+  const children = props.group.children.slice()
+  children[index] = node
+  emitUpdate({ children })
 }
 
-function updateSubGroup(idx: number, g: ConditionGroup) {
-  const groups = [...props.group.groups]
-  groups[idx] = g
-  emit('update:group', { ...props.group, groups })
+function removeChild(index: number) {
+  const children = props.group.children.slice()
+  children.splice(index, 1)
+  const connectors = props.group.connectors.slice()
+  // 移除第 index 项时，连接到该项的连接符也要移除
+  // connectors[i] 位于 children[i] 与 children[i+1] 之间
+  if (index === 0) {
+    if (connectors.length > 0) connectors.shift()
+  } else {
+    connectors.splice(index - 1, 1)
+  }
+  emitUpdate({ children, connectors })
 }
 </script>

package/src/components/condition-editor/components/condition-row.vue

@@ -1,6 +1,5 @@
 <template>
-  <div :class="[cls.e('row'), bem.is('focused', focused)]">
-    <!-- 字段选择 -->
+  <div :class="cls.e('row')">
     <u-select
       :class="cls.e('field')"
       :model-value="item.field"
@@ -11,10 +10,10 @@
       :size="size"
       :disabled="disabled || readonly"
       :clearable="false"
+      filterable
       @update:model-value="onFieldChange"
     />
 
-    <!-- 运算符选择 -->
     <u-select
       :class="cls.e('operator')"
       :model-value="item.operator"
@@ -23,61 +22,95 @@
       label-key="label"
       placeholder="运算符"
       :size="size"
-      :disabled="disabled || readonly"
+      :disabled="disabled || readonly || !currentField"
       :clearable="false"
       @update:model-value="onOperatorChange"
     />
 
-    <!-- 值输入 -->
     <div :class="cls.e('value')">
-      <template v-if="needValue">
+      <template v-if="!needValue">
+        <span :class="cls.e('value-empty')">—</span>
+      </template>
+
+      <template v-else-if="enumValueOptions">
+        <u-select
+          :model-value="constantValue"
+          :options="enumValueOptions"
+          value-key="value"
+          label-key="label"
+          placeholder="选择值"
+          :size="size"
+          :disabled="disabled || readonly"
+          :clearable="false"
+          @update:model-value="onConstantChange"
+        />
+      </template>
+
+      <template v-else-if="booleanValueOptions">
+        <u-select
+          :model-value="constantValue"
+          :options="booleanValueOptions"
+          value-key="value"
+          label-key="label"
+          placeholder="选择值"
+          :size="size"
+          :disabled="disabled || readonly"
+          :clearable="false"
+          @update:model-value="onConstantChange"
+        />
+      </template>
+
+      <template v-else-if="item.value.kind === 'variable'">
+        <span
+          ref="chipRef"
+          :class="cls.e('value-chip')"
+          tabindex="0"
+          :title="`变量：${item.value.name}`"
+          @click="onChipClick"
+          @keydown.delete="onChipDelete"
+        >
+          <span :class="cls.e('value-chip-label')">{{ item.value.name }}</span>
+          <span :class="cls.e('value-chip-close')" @click.stop="onChipDelete">
+            <u-icon><Close /></u-icon>
+          </span>
+        </span>
+      </template>
+
+      <template v-else>
         <input
-          v-if="item.value.kind === 'constant'"
           ref="valueInputRef"
           :class="cls.e('value-input')"
-          :value="item.value.value"
+          :type="inputType"
+          :value="constantValue"
           :placeholder="placeholder"
           :disabled="disabled"
           :readonly="readonly"
           @input="onValueInput"
           @keydown="onValueKeydown"
-          @focus="focused = true"
-          @blur="focused = false"
         />
-        <span
-          v-else
-          :class="cls.e('value-chip')"
-          tabindex="0"
-          @click="onChipClick"
-          @keydown.delete="onChipDelete"
-        >
-          <span :class="cls.e('value-chip-label')">{{ variableLabel }}</span>
-          <span :class="cls.e('value-chip-close')" @click.stop="onChipDelete">×</span>
-        </span>
       </template>
-      <span v-else :class="cls.e('value-empty')">—</span>
     </div>
 
-    <!-- 删除 -->
-    <span v-if="!readonly" :class="cls.e('row-delete')" @click="emit('delete')">×</span>
-
-    <!-- 结果指示 -->
-    <span
-      v-if="hasResult"
-      :class="[cls.e('result'), cls.em('result', item._result ? 'pass' : 'fail')]"
+    <button
+      v-if="!readonly"
+      type="button"
+      :class="cls.e('row-delete')"
+      :disabled="disabled"
+      title="删除条件"
+      @click="emit('delete')"
     >
-      {{ item._result ? '✓' : '✗' }}
-    </span>
-    <span v-else :class="[cls.e('result'), cls.em('result', 'none')]">—</span>
+      <u-icon><Delete /></u-icon>
+    </button>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { useFormFallbackProps } from '@veltra/compositions'
-import { bem, injectFormContext } from '@veltra/utils'
-import { computed, ref, useTemplateRef } from 'vue'
+import { Close, Delete } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { computed, useTemplateRef } from 'vue'
 
-import type { ConditionField, ConditionItem, ConditionValue } from '../../../types'
+import type { ConditionField, ConditionLeaf, ConditionValue } from '../../../types'
+import { UIcon } from '../../icon'
 import { USelect } from '../../select'
 import { getOperatorsByFieldType, type OperatorDef } from '../core/operators'
 
@@ -90,25 +123,17 @@ export interface MentionPayload {
 
 const props = withDefaults(
   defineProps<{
-    item: ConditionItem
+    item: ConditionLeaf
     fields?: ConditionField[]
-    size?: string
+    size?: 'small' | 'default' | 'large'
     disabled?: boolean
     readonly?: boolean
   }>(),
-  {}
+  { size: 'default' }
 )
 
-const { formProps } = injectFormContext()
-
-const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
-  size: 'default',
-  disabled: false,
-  readonly: false
-})
-
 const emit = defineEmits<{
-  (e: 'update:item', item: ConditionItem): void
+  (e: 'update:item', item: ConditionLeaf): void
   (e: 'delete'): void
   (e: 'mention', payload: MentionPayload): void
 }>()
@@ -116,7 +141,7 @@ const emit = defineEmits<{
 const cls = bem('condition-editor')
 
 const valueInputRef = useTemplateRef<HTMLInputElement>('valueInputRef')
-const focused = ref(false)
+const chipRef = useTemplateRef<HTMLElement>('chipRef')
 
 const fieldOptions = computed(() =>
   (props.fields ?? []).map((f) => ({ label: f.label, value: f.value }))
@@ -124,85 +149,108 @@ const fieldOptions = computed(() =>
 
 const currentField = computed(() => props.fields?.find((f) => f.value === props.item.field))
 
-const operatorOptions = computed(() => {
+const operatorOptions = computed<OperatorDef[]>(() => {
   if (!currentField.value) {
-    return props.item.operator ? [{ label: props.item.operator, value: props.item.operator }] : []
+    return props.item.operator
+      ? [{ label: props.item.operator, value: props.item.operator, needValue: true }]
+      : []
   }
   return getOperatorsByFieldType(currentField.value.type)
 })
 
-const needValue = computed(() => {
-  const ops = operatorOptions.value as OperatorDef[]
-  const op = ops.find((o) => o.value === props.item.operator)
-  return op?.needValue ?? true
+const currentOperator = computed(() =>
+  operatorOptions.value.find((o) => o.value === props.item.operator)
+)
+
+const needValue = computed(() => currentOperator.value?.needValue ?? true)
+
+const constantValue = computed(() =>
+  props.item.value.kind === 'constant' ? props.item.value.value : ''
+)
+
+/** 枚举字段的可选值（仅在非 `in` 等多值运算符下展开为下拉） */
+const enumValueOptions = computed(() => {
+  if (!currentField.value || currentField.value.type !== 'enum') return null
+  if (props.item.operator === 'in') return null
+  return currentField.value.enumOptions ?? []
 })
 
-const hasResult = computed(() => props.item._result !== undefined)
+const booleanValueOptions = computed(() => {
+  if (!currentField.value || currentField.value.type !== 'boolean') return null
+  if (!needValue.value) return null
+  return [
+    { label: '是', value: 'true' },
+    { label: '否', value: 'false' }
+  ]
+})
 
-const placeholder = computed(() => (props.fields?.length ? '输入值或 @ 引用变量' : ''))
+const inputType = computed(() => {
+  const type = currentField.value?.type
+  if (type === 'number') return 'number'
+  if (type === 'date') return 'date'
+  return 'text'
+})
 
-const variableLabel = computed(() => {
-  if (props.item.value.kind !== 'variable') return ''
-  return props.item.value.name
+const placeholder = computed(() => {
+  if (props.item.operator === 'in') return '多个值用逗号分隔'
+  if (!props.fields?.length) return ''
+  return '输入值或 @ 引用变量'
 })
 
+function emitUpdate(patch: Partial<ConditionLeaf>) {
+  emit('update:item', { ...props.item, ...patch })
+}
+
 function onFieldChange(val: string) {
   const field = props.fields?.find((f) => f.value === val)
-  const newItem: ConditionItem = {
+  const nextOps = field ? getOperatorsByFieldType(field.type) : []
+  const nextOp = nextOps[0]?.value ?? 'eq'
+  emit('update:item', {
     ...props.item,
     field: val,
-    operator: field ? getOperatorsByFieldType(field.type)[0]!.value : 'eq',
+    operator: nextOp,
     value: { kind: 'constant', value: '' }
-  }
-  emit('update:item', newItem)
+  })
 }
 
 function onOperatorChange(val: string) {
-  const newItem: ConditionItem = {
-    ...props.item,
+  emitUpdate({
     operator: val,
     value: { kind: 'constant', value: '' }
-  }
-  emit('update:item', newItem)
+  })
 }
 
 function onValueInput(e: Event) {
-  const val = (e.target as HTMLInputElement).value
-  emit('update:item', {
-    ...props.item,
-    value: { kind: 'constant', value: val }
-  })
+  emitUpdate({ value: { kind: 'constant', value: (e.target as HTMLInputElement).value } })
+}
+
+function onConstantChange(val: string) {
+  emitUpdate({ value: { kind: 'constant', value: val } })
 }
 
 function onValueKeydown(e: KeyboardEvent) {
-  if (disabled.value || readonly.value) return
+  if (props.disabled || props.readonly) return
   if (e.key === '@' && valueInputRef.value) {
     e.preventDefault()
     emit('mention', {
       triggerDom: valueInputRef.value,
-      setValue: (val: ConditionValue) => {
-        emit('update:item', { ...props.item, value: val })
-      }
+      setValue: (val) => emitUpdate({ value: val })
     })
   }
 }
 
 function onChipClick() {
-  if (disabled.value || readonly.value) return
-  if (valueInputRef.value) {
-    emit('mention', {
-      triggerDom: valueInputRef.value,
-      setValue: (val: ConditionValue) => {
-        emit('update:item', { ...props.item, value: val })
-      }
-    })
-  }
+  if (props.disabled || props.readonly) return
+  const dom = chipRef.value
+  if (!dom) return
+  emit('mention', {
+    triggerDom: dom,
+    setValue: (val) => emitUpdate({ value: val })
+  })
 }
 
 function onChipDelete() {
-  emit('update:item', {
-    ...props.item,
-    value: { kind: 'constant', value: '' }
-  })
+  if (props.disabled || props.readonly) return
+  emitUpdate({ value: { kind: 'constant', value: '' } })
 }
 </script>