@veltra/desktop 1.3.5 → 1.3.6

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()
+    }
+  })
+})