@veltra/desktop 1.3.5 → 1.3.7

package/dist/components/tree-select/tree-select.vue.d.ts

@@ -17,24 +17,24 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   "update:modelValue": (value: string | number | undefined) => any;
 } & {
   "update:modelValue": (value?: string | number | undefined) => any;
-  clear: () => any;
   change: (selectedData?: Record<string, any> | undefined) => any;
+  clear: () => any;
   "update:text": (text?: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
   "onUpdate:modelValue"?: ((value?: string | number | undefined) => any) | undefined;
-  onClear?: (() => any) | undefined;
   onChange?: ((selectedData?: Record<string, any> | undefined) => any) | undefined;
+  onClear?: (() => any) | undefined;
   "onUpdate:text"?: ((text?: string | undefined) => any) | undefined;
 }>, {
+  disabled: boolean;
+  readonly: boolean;
+  minWidth: string;
+  expandAll: boolean;
   labelKey: string;
   valueKey: string;
-  expandAll: boolean;
   placeholder: string;
   clearable: boolean;
   filterable: boolean;
-  minWidth: string;
-  disabled: boolean;
-  readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.3.5",
+  "version": "1.3.7",
   "files": [
     "dist",
     "src"
@@ -57,11 +57,11 @@
     "@cat-kit/core": ">=1.1.8",
     "@cat-kit/excel": ">=1.0.0",
     "@cat-kit/fe": "^1.1.8",
-    "@veltra/compositions": "1.3.5",
-    "@veltra/directives": "1.3.5",
-    "@veltra/icons": "1.3.5",
-    "@veltra/styles": "1.3.5",
-    "@veltra/utils": "1.3.5",
+    "@veltra/compositions": "1.3.7",
+    "@veltra/directives": "1.3.7",
+    "@veltra/icons": "1.3.7",
+    "@veltra/styles": "1.3.7",
+    "@veltra/utils": "1.3.7",
     "vue": ">=3.5.40"
   },
   "devDependencies": {

package/src/components/cascade/cascade.vue

@@ -2,7 +2,13 @@
   <u-dropdown
     v-if="!readonly"
     v-bind="$attrs"
-    :class="[cls.b, bem.is('disabled', disabled), bem.is('multiple', multiple), cls.m(size)]"
+    :class="[
+      cls.b,
+      bem.is('disabled', disabled),
+      bem.is('multiple', multiple),
+      cls.m(size),
+      bem.is('focus', multiple && dropdownVisible)
+    ]"
     :content-class="[cls.e('panel'), cls.em('panel', size)]"
     trigger="click"
     ref="dropdownRef"
@@ -10,7 +16,7 @@
     width="auto"
     @mouseenter="hovered = true"
     @mouseleave="hovered = false"
-    @update:visible="!$event && (qs = '')"
+    @update:visible="handleDropdownVisible"
   >
     <template #trigger>
       <!-- 单选展示 -->
@@ -233,6 +239,13 @@ function handleClear() {
 // 过滤
 const qs = shallowRef<string>('')
 
+const dropdownVisible = shallowRef(false)
+
+const handleDropdownVisible = (visible: boolean) => {
+  dropdownVisible.value = visible
+  if (!visible) qs.value = ''
+}
+
 watch([qs, forest], ([qs, forest]) => {
   const { filterable } = props
   if (!filterable || !qs) {

package/src/components/cascade/style.scss

@@ -23,6 +23,11 @@ $menu-name: $root-name + '-panel-item';
     &:hover {
       border-color: fn.use-var(color, primary);
     }
+
+    @include m.is(focus) {
+      border-color: fn.use-var(color, primary);
+      box-shadow: fn.use-var(focus-ring);
+    }
   }
 
   @include m.size using ($size) {

package/src/components/date-range-picker/date-range-picker.vue

@@ -10,6 +10,7 @@
     :disabled="disabled"
     @mouseenter.native="hovered = true"
     @mouseleave.native="hovered = false"
+    @update:visible="dropdownVisible = $event"
   >
     <template #trigger>
       <input
@@ -87,8 +88,15 @@ const emit = defineEmits<DateRangePickerEmits>()
 
 const cls = bem('date-range-picker')
 
+const dropdownVisible = shallowRef(false)
+
 const className = computed(() => {
-  return [cls.b, cls.m(size.value), bem.is('disabled', disabled.value)]
+  return [
+    cls.b,
+    cls.m(size.value),
+    bem.is('disabled', disabled.value),
+    bem.is('focus', dropdownVisible.value)
+  ]
 })
 
 const { formProps } = injectFormContext()

package/src/components/date-range-picker/style.scss

@@ -32,6 +32,11 @@ $root-name: date-range-picker;
     border-color: fn.use-var(color, primary);
   }
 
+  @include m.is(focus) {
+    border-color: fn.use-var(color, primary);
+    box-shadow: fn.use-var(focus-ring);
+  }
+
   @include m.e(input) {
     outline: none;
     border: none;

package/src/components/form-item/form-item.vue

@@ -7,11 +7,11 @@
     >
       <u-tip v-if="tips" :content="tips" :class="cls.e('tips')" :show-delay="500">
         <span :class="cls.e('tip-label')">
-          <slot name="label">{{ label }}:</slot>
+          <slot name="label">{{ label }}{{ labelPosition === 'top' ? '' : ':' }}</slot>
         </span>
       </u-tip>
       <template v-else>
-        <slot name="label">{{ label }}:</slot>
+        <slot name="label">{{ label }}{{ labelPosition === 'top' ? '' : ':' }}</slot>
       </template>
     </label>
 

package/src/components/form-item/style.scss

@@ -28,7 +28,7 @@ $root-name: form-item;
     color: fn.use-var(text-color, main);
     text-align: right;
     line-height: 1.3;
-    font-weight: 300;
+    font-weight: 400;
 
     @include m.flex($justify: flex-end);
 
@@ -99,6 +99,7 @@ $root-name: form-item;
       padding-right: 0;
       padding-bottom: 4px;
       text-align: left;
+      color: fn.use-var(text-color, second);
       justify-content: flex-start;
     }
   }

package/src/components/grid-input/style.scss

@@ -26,6 +26,7 @@ $root-name: grid-input;
 
       @include m.is(focus) {
         border-color: fn.use-var(color, primary);
+        box-shadow: fn.use-var(focus-ring);
 
         @keyframes fade {
           0% {

package/src/components/multi-select/multi-select.vue

@@ -4,7 +4,7 @@
     v-bind="$attrs"
     trigger="click"
     ref="dropdownRef"
-    :class="[cls.b, cls.m(size), bem.is('disabled', disabled)]"
+    :class="[cls.b, cls.m(size), bem.is('disabled', disabled), bem.is('focus', dropdownVisible)]"
     :content-class="[cls.e('panel'), cls.em('panel', size), contentClass]"
     :content-style="contentStyle"
     :min-width="minWidth"
@@ -16,11 +16,11 @@
   >
     <!-- 触发 -->
     <template #trigger>
-      <span :class="cls.e('placeholder')" v-show="!model?.length">
+      <span :class="cls.e('placeholder')" v-if="!filterable && !model?.length">
         {{ placeholder }}
       </span>
 
-      <div v-if="model?.length" :class="cls.e('tags')">
+      <div v-if="model?.length || filterable" :class="cls.e('tags')">
         <u-tag
           v-for="option of tags"
           :key="option[valueKey]"
@@ -31,6 +31,19 @@
           {{ option[labelKey] }}
         </u-tag>
         <u-tag v-if="restTag" size="small"> {{ restTag }}+ </u-tag>
+
+        <!-- 内嵌查询输入框：承载过滤与回车创建 -->
+        <input
+          v-if="filterable"
+          ref="inputRef"
+          :class="cls.e('input')"
+          v-model="queryString"
+          :placeholder="model?.length ? '' : placeholder"
+          :disabled="disabled"
+          @click.stop="handleInputClick"
+          @focus="handleInputFocus"
+          @keydown.enter.prevent="handleCreateByEnter"
+        />
       </div>
 
       <transition name="zoom-in" mode="out-in">
@@ -62,19 +75,6 @@
         <span> 已选 {{ model?.length }}/{{ max ?? options?.length ?? 0 }} </span>
       </div>
 
-      <!-- 过滤器 -->
-      <div v-if="filterable" :class="cls.e('content-filter')">
-        <u-input
-          placeholder="输入关键字进行过滤"
-          v-model="queryString"
-          @keydown.enter.prevent="handleCreateByEnter"
-        >
-          <template #suffix>
-            <u-icon><Search /></u-icon>
-          </template>
-        </u-input>
-      </div>
-
       <!-- 多选列表 -->
       <!--
         虚拟化启用时内容容器 height 由 useVirtualizer 命令式写入；
@@ -143,10 +143,18 @@
 <script lang="ts" setup>
 import { o as chainObj } from '@cat-kit/core'
 import { useFormFallbackProps, useVirtualizer } from '@veltra/compositions'
-import { ArrowDown, Close, Search } from '@veltra/icons/normal'
+import { ArrowDown, Close } from '@veltra/icons/normal'
 import { bem, fieldKey, FORM_EMPTY_CONTENT } from '@veltra/utils'
 import { injectFormContext } from '@veltra/utils'
-import { computed, shallowRef, shallowReactive, watch, provide } from 'vue'
+import {
+  computed,
+  nextTick,
+  shallowRef,
+  shallowReactive,
+  watch,
+  provide,
+  useTemplateRef
+} from 'vue'
 
 import type {
   MultiSelectEmits,
@@ -158,7 +166,6 @@ import { UCheckbox } from '../checkbox'
 import { UDropdown } from '../dropdown'
 import { UEmpty } from '../empty'
 import { UIcon } from '../icon'
-import { UInput } from '../input'
 import { UScroll } from '../scroll'
 import { useOptions } from '../select/use-options'
 import { UTag } from '../tag'
@@ -319,12 +326,35 @@ const restTag = computed(() => {
   return (model.value?.length ?? 0) - tags.value.length
 })
 
+const dropdownVisible = shallowRef(false)
+
+const inputRef = useTemplateRef<HTMLInputElement>('inputRef')
+
 const handleDropdownVisible = (visible: boolean) => {
+  dropdownVisible.value = visible
   if (!visible) {
     queryString.value = ''
   }
 }
 
+/**
+ * 拦截输入区域的点击（@click.stop）：阻止 dropdown 的 trigger 开合切换，
+ * 保持面板展开以不中断输入。
+ */
+const handleInputClick = () => {
+  if (!dropdownVisible.value) dropdownRef.value?.open()
+}
+
+const handleInputFocus = () => {
+  if (!dropdownVisible.value) dropdownRef.value?.open()
+}
+
+/** 勾选后把焦点还给输入框，便于连续输入过滤 */
+const refocusInput = () => {
+  if (!filterable.value) return
+  nextTick(() => inputRef.value?.focus())
+}
+
 const handleCheck = (option: Record<string, any>, checked: boolean) => {
   if (checked) {
     if (option.__isTemp && props.creatable) {
@@ -352,6 +382,7 @@ const handleCheck = (option: Record<string, any>, checked: boolean) => {
 
   emitChange()
   dropdownRef.value?.updateDropdown()
+  refocusInput()
 }
 
 /** 全选 */

package/src/components/multi-select/style.scss

@@ -36,13 +36,18 @@ $root-name: multi-select;
     border-color: fn.use-var(color, primary);
   }
 
+  @include m.is(focus) {
+    border-color: fn.use-var(color, primary);
+    box-shadow: fn.use-var(focus-ring);
+  }
+
   @include m.e(ripple) {
     background-color: fn.use-var(color, primary, light-7);
     opacity: 0.5;
   }
 
   @include m.e(options) {
-    max-height: 180px;
+    max-height: 240px;
   }
 
   @include m.e(options-wrap) {
@@ -79,6 +84,27 @@ $root-name: multi-select;
     @include m.flex($justify: flex-start, $align: center, $wrap: wrap);
   }
 
+  @include m.e(input) {
+    flex: 1;
+    min-width: 60px;
+    padding: 0;
+    margin: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    font: inherit;
+    color: fn.use-var(text-color, main);
+    cursor: text;
+
+    &::placeholder {
+      color: fn.use-var(text-color, placeholder);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
   @include m.e(readonly-tags) {
     padding-left: 0;
     padding-right: 0;
@@ -104,9 +130,6 @@ $root-name: multi-select;
 
   @include m.e(panel) {
     @include m.size using ($size) {
-      @include m.bem($root-name, content-filter) {
-        padding: calc(fn.use-var(gap, $size) / 2) fn.use-var(gap, $size);
-      }
       @include m.bem($root-name, content-header) {
         padding: calc(fn.use-var(gap, $size) / 2) calc(fn.use-var(gap, $size) * 2);
         border-bottom: fn.use-var(border);

package/src/components/multi-tree-select/multi-tree-select.vue

@@ -2,7 +2,7 @@
   <u-dropdown
     v-if="!readonly"
     v-bind="$attrs"
-    :class="[cls.b, cls.m(size), bem.is('disabled', disabled)]"
+    :class="[cls.b, cls.m(size), bem.is('disabled', disabled), bem.is('focus', dropdownVisible)]"
     trigger="click"
     :content-class="[cls.e('panel'), cls.em('panel', size), contentClass]"
     :content-style="contentStyle"
@@ -16,12 +16,12 @@
   >
     <template #trigger>
       <!-- 默认展示 -->
-      <span :class="cls.e('placeholder')" v-show="!tags.length">
+      <span :class="cls.e('placeholder')" v-if="!filterable && !tags.length">
         {{ placeholder }}
       </span>
 
       <!-- 选择的数据项 -->
-      <div v-if="tags.length" :class="cls.e('tags')">
+      <div v-if="tags.length || filterable" :class="cls.e('tags')">
         <u-tag
           v-for="(tag, index) in visibleTags"
           :key="tag[valueKey]"
@@ -31,6 +31,18 @@
           {{ tag[labelKey] }}
         </u-tag>
         <u-tag v-if="hiddenCount > 0">+{{ hiddenCount }}</u-tag>
+
+        <!-- 内嵌查询输入框：承载过滤 -->
+        <input
+          v-if="filterable"
+          ref="inputRef"
+          :class="cls.e('input')"
+          v-model="qs"
+          :placeholder="tags.length ? '' : placeholder"
+          :disabled="disabled"
+          @click.stop="handleInputClick"
+          @focus="handleInputFocus"
+        />
       </div>
       <!-- 清空 icon -->
       <transition name="zoom-in" mode="out-in">
@@ -59,14 +71,6 @@
           {{ allExpanded ? '收起全部' : '展开全部' }}
         </u-button>
       </div>
-      <!-- 过滤器 -->
-      <div v-if="filterable" :class="[cls.e('content-filter'), cls.m(size)]">
-        <u-input placeholder="输入关键字进行过滤" v-model="qs">
-          <template #suffix>
-            <u-icon><Search /></u-icon>
-          </template>
-        </u-input>
-      </div>
       <!-- 菜单列表 -->
       <u-tree
         v-bind="treeProps"
@@ -98,10 +102,10 @@
 <script lang="ts" setup>
 import { dfs, o } from '@cat-kit/core'
 import { useFormFallbackProps } from '@veltra/compositions'
-import { ArrowDown, Close, Search } from '@veltra/icons/normal'
+import { ArrowDown, Close } from '@veltra/icons/normal'
 import { bem, fieldKey, FORM_EMPTY_CONTENT } from '@veltra/utils'
 import { injectFormContext } from '@veltra/utils'
-import { computed, nextTick, shallowRef, watch } from 'vue'
+import { computed, nextTick, shallowRef, useTemplateRef, watch } from 'vue'
 
 import type { MultiTreeSelectProps, MultiTreeSelectEmits, TreeExposed } from '../../types'
 import type { DropdownExposed } from '../../types'
@@ -109,7 +113,6 @@ import { UButton } from '../button'
 import { UCheckbox } from '../checkbox'
 import { UDropdown } from '../dropdown'
 import { UIcon } from '../icon'
-import { UInput } from '../input'
 import { UTag } from '../tag'
 import { UTree } from '../tree'
 import type { TreeSlotsScope } from '../tree/di'
@@ -306,9 +309,26 @@ const hiddenCount = computed(() => {
   return 0
 })
 
+const dropdownVisible = shallowRef(false)
+
+const inputRef = useTemplateRef<HTMLInputElement>('inputRef')
+
 const handleDropdownVisible = (visible: boolean) => {
+  dropdownVisible.value = visible
   if (!visible) {
     qs.value = ''
   }
 }
+
+/**
+ * 拦截输入区域的点击（@click.stop）：阻止 dropdown 的 trigger 开合切换，
+ * 保持面板展开以不中断输入。
+ */
+const handleInputClick = () => {
+  if (!dropdownVisible.value) dropdownRef.value?.open()
+}
+
+const handleInputFocus = () => {
+  if (!dropdownVisible.value) dropdownRef.value?.open()
+}
 </script>

package/src/components/multi-tree-select/style.scss

@@ -22,6 +22,11 @@ $root-name: multi-tree-select;
     border-color: fn.use-var(color, primary);
   }
 
+  @include m.is(focus) {
+    border-color: fn.use-var(color, primary);
+    box-shadow: fn.use-var(focus-ring);
+  }
+
   @include m.size using ($size) {
     min-height: fn.use-var(form-component-height, $size);
     border-radius: fn.use-var(radius, $size);
@@ -58,16 +63,33 @@ $root-name: multi-tree-select;
     color: fn.use-var(text-color, placeholder);
   }
 
-  @include m.e(filter) {
-    margin-bottom: 4px;
-  }
-
   @include m.e(tags) {
     flex-grow: 1;
     overflow: hidden;
     @include m.flex($justify: flex-start, $align: center, $wrap: wrap);
   }
 
+  @include m.e(input) {
+    flex: 1;
+    min-width: 60px;
+    padding: 0;
+    margin: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    font: inherit;
+    color: fn.use-var(text-color, main);
+    cursor: text;
+
+    &::placeholder {
+      color: fn.use-var(text-color, placeholder);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
   @include m.e(readonly-tags) {
     padding-left: 0;
     padding-right: 0;
@@ -90,21 +112,18 @@ $root-name: multi-tree-select;
 
   @include m.e(panel) {
     @include m.size using ($size) {
-      @include m.bem($root-name, content-filter) {
-        padding: calc(fn.use-var(gap, $size) / 2) fn.use-var(gap, $size);
-      }
       @include m.bem($root-name, content-header) {
         padding: calc(fn.use-var(gap, $size) / 2) fn.use-var(gap, $size);
         border-bottom: fn.use-var(border);
       }
 
       @include m.bem($root-name, content-tree) {
-        padding: calc(fn.use-var(gap, $size) / 2) fn.use-var(gap, $size);
+        padding: fn.use-var(gap, $size);
       }
     }
   }
 
   @include m.e(content-tree) {
-    max-height: 272px;
+    max-height: 240px;
   }
 }

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

@@ -0,0 +1,110 @@
+import { describe, expect, it } from 'vitest'
+import { createApp, h, nextTick, ref } from 'vue'
+
+import USelect from '../select.vue'
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+
+function mountSelect(props: Record<string, unknown>) {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+
+  const model = ref(props.modelValue)
+  const app = createApp({
+    render() {
+      return h(USelect, {
+        ...props,
+        modelValue: model.value,
+        'onUpdate:modelValue': (value: unknown) => {
+          model.value = value
+        }
+      })
+    }
+  })
+
+  app.mount(host)
+
+  return {
+    host,
+    model,
+    unmount() {
+      app.unmount()
+      host.remove()
+    }
+  }
+}
+
+function queryOptions() {
+  return [...document.body.querySelectorAll<HTMLElement>('.u-select__option')]
+}
+
+async function openDropdown(host: HTMLElement) {
+  const input = host.querySelector('input')!
+  // 与组件 capture 拦截一致：点击原生 input 打开面板并进入查询态
+  input.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+  await nextTick()
+  await nextTick()
+}
+
+async function typeQuery(host: HTMLElement, text: string) {
+  const input = host.querySelector('input')!
+  input.focus()
+  // 清空查询串（查询态下 model 绑定 queryString）
+  input.value = ''
+  input.dispatchEvent(
+    new InputEvent('input', { bubbles: true, data: '', inputType: 'deleteContentBackward' })
+  )
+  await nextTick()
+
+  input.value = text
+  input.dispatchEvent(
+    new InputEvent('input', { bubbles: true, data: text, inputType: 'insertText' })
+  )
+  await nextTick()
+  // 本地过滤防抖 200ms
+  await sleep(250)
+}
+
+async function clickOption(option: HTMLElement) {
+  option.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+  await nextTick()
+  await sleep(50)
+}
+
+describe('USelect', () => {
+  it('highlights the latest created option after consecutive creations', async () => {
+    const { host, model, unmount } = mountSelect({
+      filterable: true,
+      creatable: true,
+      options: [
+        { label: '选项0', value: '0' },
+        { label: '选项1', value: '1' }
+      ]
+    })
+
+    try {
+      // 创建并选择第一个选项
+      await openDropdown(host)
+      await typeQuery(host, '新A')
+      expect(queryOptions().some((el) => el.textContent === '新A')).toBe(true)
+      await clickOption(queryOptions().find((el) => el.textContent === '新A')!)
+      expect(model.value).toBe('新A')
+
+      // 创建并选择第二个选项
+      await openDropdown(host)
+      await typeQuery(host, '新B')
+      expect(queryOptions().some((el) => el.textContent === '新B')).toBe(true)
+      await clickOption(queryOptions().find((el) => el.textContent === '新B')!)
+      expect(model.value).toBe('新B')
+      expect(host.querySelector('input')!.value).toBe('新B')
+
+      // 重新展开，高亮应落在后创建的“新B”上，而非停留在“新A”
+      await openDropdown(host)
+      const selected = queryOptions().filter((el) => el.classList.contains('is-selected'))
+      expect(selected).toHaveLength(1)
+      expect(selected[0]!.textContent).toBe('新B')
+    } finally {
+      unmount()
+    }
+  })
+})