@veltra/desktop 1.3.5 → 1.3.6

package/dist/components/select/select.js

@@ -5,12 +5,11 @@ import _sfc_main$4 from "../dropdown/dropdown.js";
 import input_default from "../input/input.js";
 import { useKeyboard } from "./use-keyboard.js";
 import { useOptions } from "./use-options.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createSlots, createTextVNode, createVNode, defineComponent, isRef, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, openBlock, renderList, renderSlot, shallowRef, toDisplayString, unref, useModel, watch, withCtx, withDirectives } from "vue";
+import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, openBlock, renderList, renderSlot, shallowRef, toDisplayString, unref, useModel, useTemplateRef, watch, withCtx, withModifiers } from "vue";
 import { useFormFallbackProps, useVirtualizer } from "@veltra/compositions";
 import { FORM_EMPTY_CONTENT, bem, fieldKey, injectFormContext, scrollIntoContainerView, withUnit } from "@veltra/utils";
-import { ArrowDown, Search } from "@veltra/icons/normal";
+import { ArrowDown, Close } from "@veltra/icons/normal";
 import { o } from "@cat-kit/core";
-import { vFocus } from "@veltra/directives";
 //#region src/components/select/select.vue
 const _hoisted_1 = ["onClick", "data-index"];
 const _hoisted_2 = [
@@ -85,21 +84,67 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		});
 		const dropdownRef = shallowRef();
 		const scrollRef = shallowRef();
+		const inputRef = useTemplateRef("inputRef");
 		const filterable = computed(() => {
 			return props.filterable || typeof props.options === "function";
 		});
 		const { queryString, options, temOptionsToCreatedOptions, clearCreatedOptions } = useOptions({ props });
+		const dropdownVisible = shallowRef(false);
+		/**
+		* 是否处于查询态：决定触发输入框显示查询串还是选中标签。
+		* 与面板可见状态解耦 —— 选择后立即退出查询态，
+		* 不等面板关闭动画结束（否则显示值会延迟一个动画时长才恢复）。
+		*/
+		const querying = shallowRef(false);
+		/** 触发输入框的值：查询态下承载查询串，否则展示选中标签 */
+		const inputValue = computed(() => {
+			if (filterable.value && querying.value) return queryString.value;
+			return displayedValue.value;
+		});
+		/** 查询态下已选标签降级为占位提示 */
+		const inputPlaceholder = computed(() => {
+			if (filterable.value && querying.value && displayedValue.value) return displayedValue.value;
+			return props.placeholder;
+		});
+		function handleQueryInput(value) {
+			if (!filterable.value) return;
+			queryString.value = value;
+		}
+		const hovered = shallowRef(false);
+		/** 悬停且存在选中值时展示清除按钮（替代下拉箭头） */
+		const showClear = computed(() => {
+			return props.clearable && !disabled.value && hovered.value && !!displayedValue.value;
+		});
+		/**
+		* 过滤模式下拦截输入区域的点击：
+		* 阻止 dropdown 的 trigger 开合切换，保持面板展开以不中断输入。
+		* 非输入区域（箭头、留白）放行，维持原开合行为。
+		*/
+		function handleTriggerClickCapture(e) {
+			if (!filterable.value || disabled.value) return;
+			if (!(e.target instanceof HTMLInputElement)) return;
+			e.stopPropagation();
+			if (!dropdownVisible.value) dropdownRef.value?.open();
+		}
 		let userSelecting = false;
 		function lock() {
 			userSelecting = true;
 		}
-		function unlock() {
+		/**
+		* @param preferredValue 选择时传入刚提交的值，避免 nextTick 时 props.modelValue 尚未回传而用旧值覆盖高亮/标签
+		*/
+		function unlock(preferredValue) {
 			nextTick(() => {
 				userSelecting = false;
+				syncSelected(preferredValue !== void 0 ? preferredValue : props.modelValue, options.value);
 			});
 		}
-		watch([() => props.modelValue, options], ([modelValue, options]) => {
-			if (userSelecting) return;
+		/** 按 modelValue 与选项列表同步高亮索引、选中项与显示标签 */
+		function syncSelected(modelValue, options) {
+			if (queryString.value) {
+				currentIndex.value = options?.length ? 0 : -1;
+				return;
+			}
 			if (!options?.length) return;
 			if (modelValue !== void 0 && modelValue !== null && modelValue !== "") {
 				currentIndex.value = options.findIndex((option) => o(option).get(valueKey.value) === modelValue);
@@ -110,6 +155,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				selected.value = void 0;
 				label.value = void 0;
 			}
+		}
+		watch([() => props.modelValue, options], ([modelValue, options]) => {
+			if (userSelecting) return;
+			syncSelected(modelValue, options);
 		}, { immediate: true });
 		const baseVirtualEnabled = computed(() => options.value.length > 80);
 		const virtualEnabled = computed(() => baseVirtualEnabled.value && !props.grid);
@@ -148,24 +197,36 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				if (selectedEl) scrollIntoContainerView(selectedEl, scroll.containerRef ?? null);
 			}
 		});
-		const dropdownVisible = shallowRef(false);
-		watch(dropdownVisible, (v) => {
-			if (!v) queryString.value = "";
+		watch(dropdownVisible, (visible) => {
+			if (visible) {
+				if (filterable.value) {
+					queryString.value = "";
+					querying.value = true;
+					nextTick(() => inputRef.value?.el?.focus());
+				}
+			} else {
+				querying.value = false;
+				queryString.value = "";
+			}
 		});
 		const handleDropdownVisible = (visible) => {
 			if (!visible) queryString.value = "";
 		};
 		/** 单选 */
-		const handleSelect = (option, index) => {
+		const handleSelect = (option, _index) => {
 			lock();
+			const value = option?.[valueKey.value];
 			selected.value = option;
-			emit("update:modelValue", option?.[valueKey.value]);
+			emit("update:modelValue", value);
 			label.value = option?.[labelKey.value];
 			emit("change", option);
 			if (option.__isTemp) temOptionsToCreatedOptions();
-			currentIndex.value = index;
+			querying.value = false;
+			queryString.value = "";
+			currentIndex.value = options.value.findIndex((item) => o(item).get(valueKey.value) === value);
+			if (currentIndex.value >= 0) selected.value = options.value[currentIndex.value];
 			dropdownRef.value?.close();
-			unlock();
+			unlock(value);
 		};
 		/** 清除选项 */
 		const handleClear = () => {
@@ -176,7 +237,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			clearCreatedOptions();
 			emit("update:modelValue", void 0);
 			emit("change", void 0);
-			unlock();
+			unlock(null);
 		};
 		function getCurrentEl() {
 			return scrollRef.value?.contentRef?.querySelector("li.is-selected");
@@ -194,7 +255,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				ref_key: "dropdownRef",
 				ref: dropdownRef,
 				visible: dropdownVisible.value,
-				"onUpdate:visible": [_cache[1] || (_cache[1] = ($event) => dropdownVisible.value = $event), handleDropdownVisible],
+				"onUpdate:visible": [_cache[0] || (_cache[0] = ($event) => dropdownVisible.value = $event), handleDropdownVisible],
 				"content-class": [
 					unref(cls).e("panel"),
 					unref(cls).em("panel", unref(size)),
@@ -204,22 +265,44 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				disabled: unref(disabled),
 				"min-width": __props.minWidth,
 				width: __props.width,
-				onKeydown: unref(handleKeydown)
+				onKeydown: unref(handleKeydown),
+				onMouseenter: _cache[1] || (_cache[1] = ($event) => hovered.value = true),
+				onMouseleave: _cache[2] || (_cache[2] = ($event) => hovered.value = false)
 			}), {
 				trigger: withCtx(() => [createVNode(unref(input_default), {
+					ref_key: "inputRef",
+					ref: inputRef,
 					size: unref(size),
 					disabled: unref(disabled),
-					placeholder: __props.placeholder,
-					clearable: __props.clearable,
-					"model-value": displayedValue.value,
-					onClear: handleClear,
+					placeholder: inputPlaceholder.value,
+					clearable: false,
+					"model-value": inputValue.value,
+					"onUpdate:modelValue": handleQueryInput,
 					onKeydown: unref(handleKeydown),
-					"native-readonly": ""
+					"native-readonly": !filterable.value || !querying.value,
+					onClickCapture: handleTriggerClickCapture
 				}, createSlots({
-					suffix: withCtx(() => [createVNode(unref(_sfc_main$1), { class: normalizeClass(unref(cls).e("arrow")) }, {
-						default: withCtx(() => [createVNode(unref(ArrowDown))]),
+					suffix: withCtx(() => [createVNode(Transition, {
+						name: "zoom-in",
+						mode: "out-in"
+					}, {
+						default: withCtx(() => [showClear.value ? (openBlock(), createBlock(unref(_sfc_main$1), {
+							class: normalizeClass(unref(cls).e("clear")),
+							title: "清除",
+							key: "clear",
+							onClick: withModifiers(handleClear, ["stop"])
+						}, {
+							default: withCtx(() => [createVNode(unref(Close))]),
+							_: 1
+						}, 8, ["class"])) : (openBlock(), createBlock(unref(_sfc_main$1), {
+							class: normalizeClass(unref(cls).e("arrow")),
+							key: "arrow"
+						}, {
+							default: withCtx(() => [createVNode(unref(ArrowDown))]),
+							_: 1
+						}, 8, ["class"]))]),
 						_: 1
-					}, 8, ["class"])]),
+					})]),
 					_: 2
 				}, [_ctx.$slots.prefix ? {
 					name: "prefix",
@@ -229,79 +312,60 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"size",
 					"disabled",
 					"placeholder",
-					"clearable",
 					"model-value",
-					"onKeydown"
+					"onKeydown",
+					"native-readonly"
 				])]),
-				content: withCtx(() => [
-					createCommentVNode(" 过滤器 "),
-					filterable.value ? (openBlock(), createElementBlock("div", {
-						key: 0,
-						class: normalizeClass(unref(cls).e("content-filter"))
-					}, [withDirectives((openBlock(), createBlock(unref(input_default), {
-						placeholder: "输入关键字进行搜索",
-						tabindex: "0",
-						modelValue: unref(queryString),
-						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(queryString) ? queryString.value = $event : null)
-					}, {
-						suffix: withCtx(() => [createVNode(unref(_sfc_main$1), null, {
-							default: withCtx(() => [createVNode(unref(Search))]),
-							_: 1
-						})]),
-						_: 1
-					}, 8, ["modelValue"])), [[unref(vFocus)]])], 2)) : createCommentVNode("v-if", true),
-					createCommentVNode("\n        单选列表。虚拟化启用时，内容容器 height 由 useVirtualizer 命令式写入；\n        此处 content-style 仅承担 grid 相关样式，避免 height 变化触发模板重渲染。\n      "),
-					unref(options).length ? (openBlock(), createBlock(unref(_sfc_main$3), {
-						key: 1,
-						tag: "ul",
-						class: normalizeClass(unref(cls).e("options")),
-						ref_key: "scrollRef",
-						ref: scrollRef,
-						"content-class": [
-							unref(cls).e("options-wrap"),
-							unref(bem).is("virtual", virtualEnabled.value),
-							unref(bem).is("grid", !!__props.grid)
-						],
-						"content-style": {
-							gridTemplateColumns: __props.grid ? `repeat(${__props.grid.cols}, minmax(0px, 1fr))` : void 0,
-							gridGap: __props.grid ? unref(withUnit)(__props.grid.gap, "px") : void 0
-						}
-					}, {
-						default: withCtx(() => [virtualEnabled.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createCommentVNode(" @vue-ignore "), (openBlock(true), createElementBlock(Fragment, null, renderList(virtualOptions.value, ({ option, index, val, label, key, offset }) => {
-							return openBlock(), createElementBlock("li", {
-								class: normalizeClass([unref(optionClass), unref(bem).is("selected", index === currentIndex.value)]),
-								onClick: ($event) => handleSelect(option, index),
-								key,
-								style: normalizeStyle({ transform: `translateY(${offset}px)` }),
-								"data-index": index,
-								ref_for: true,
-								ref: (el) => measureElement(index, el)
-							}, [renderSlot(_ctx.$slots, "default", mergeProps({ ref_for: true }, {
-								option,
-								index
-							}), () => [createTextVNode(toDisplayString(label), 1)])], 14, _hoisted_1);
-						}), 128))], 64)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(options), (option, index) => {
-							return openBlock(), createElementBlock("li", {
-								class: normalizeClass([unref(optionClass), unref(bem).is("selected", index === currentIndex.value)]),
-								onClick: ($event) => handleSelect(option, index),
-								"data-index": index,
-								title: unref(o)(option).get(labelKey.value),
-								key: unref(o)(option).get(valueKey.value)
-							}, [renderSlot(_ctx.$slots, "default", mergeProps({ ref_for: true }, {
-								option,
-								index
-							}), () => [createTextVNode(toDisplayString(unref(o)(option).get(labelKey.value)), 1)])], 10, _hoisted_2);
-						}), 128))]),
-						_: 3
-					}, 8, [
-						"class",
-						"content-class",
-						"content-style"
-					])) : (openBlock(), createElementBlock("div", {
-						key: 2,
-						class: normalizeClass(unref(cls).e("empty"))
-					}, [createVNode(unref(_sfc_main$2))], 2))
-				]),
+				content: withCtx(() => [createCommentVNode("\n        单选列表。虚拟化启用时，内容容器 height 由 useVirtualizer 命令式写入；\n        此处 content-style 仅承担 grid 相关样式，避免 height 变化触发模板重渲染。\n      "), unref(options).length ? (openBlock(), createBlock(unref(_sfc_main$3), {
+					key: 0,
+					tag: "ul",
+					class: normalizeClass(unref(cls).e("options")),
+					ref_key: "scrollRef",
+					ref: scrollRef,
+					"content-class": [
+						unref(cls).e("options-wrap"),
+						unref(bem).is("virtual", virtualEnabled.value),
+						unref(bem).is("grid", !!__props.grid)
+					],
+					"content-style": {
+						gridTemplateColumns: __props.grid ? `repeat(${__props.grid.cols}, minmax(0px, 1fr))` : void 0,
+						gridGap: __props.grid ? unref(withUnit)(__props.grid.gap, "px") : void 0
+					}
+				}, {
+					default: withCtx(() => [virtualEnabled.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createCommentVNode(" @vue-ignore "), (openBlock(true), createElementBlock(Fragment, null, renderList(virtualOptions.value, ({ option, index, val, label, key, offset }) => {
+						return openBlock(), createElementBlock("li", {
+							class: normalizeClass([unref(optionClass), unref(bem).is("selected", index === currentIndex.value)]),
+							onClick: ($event) => handleSelect(option, index),
+							key,
+							style: normalizeStyle({ transform: `translateY(${offset}px)` }),
+							"data-index": index,
+							ref_for: true,
+							ref: (el) => measureElement(index, el)
+						}, [renderSlot(_ctx.$slots, "default", mergeProps({ ref_for: true }, {
+							option,
+							index
+						}), () => [createTextVNode(toDisplayString(label), 1)])], 14, _hoisted_1);
+					}), 128))], 64)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(options), (option, index) => {
+						return openBlock(), createElementBlock("li", {
+							class: normalizeClass([unref(optionClass), unref(bem).is("selected", index === currentIndex.value)]),
+							onClick: ($event) => handleSelect(option, index),
+							"data-index": index,
+							title: unref(o)(option).get(labelKey.value),
+							key: unref(o)(option).get(valueKey.value)
+						}, [renderSlot(_ctx.$slots, "default", mergeProps({ ref_for: true }, {
+							option,
+							index
+						}), () => [createTextVNode(toDisplayString(unref(o)(option).get(labelKey.value)), 1)])], 10, _hoisted_2);
+					}), 128))]),
+					_: 3
+				}, 8, [
+					"class",
+					"content-class",
+					"content-style"
+				])) : (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(unref(cls).e("empty"))
+				}, [createVNode(unref(_sfc_main$2))], 2))]),
 				_: 3
 			}, 16, [
 				"class",

package/dist/components/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":["$attrs","$slots"],"sources":["../../../src/components/select/select.vue"],"sourcesContent":["<template>\n  <u-dropdown\n    v-if=\"!readonly\"\n    v-bind=\"$attrs\"\n    trigger=\"click\"\n    :class=\"[cls.b, bem.is('disabled', disabled)]\"\n    ref=\"dropdownRef\"\n    v-model:visible=\"dropdownVisible\"\n    :content-class=\"[cls.e('panel'), cls.em('panel', size), contentClass]\"\n    :content-style=\"contentStyle\"\n    :disabled=\"disabled\"\n    :min-width=\"minWidth\"\n    :width=\"width\"\n    @keydown=\"handleKeydown\"\n    @update:visible=\"handleDropdownVisible\"\n  >\n    <!-- 触发 -->\n    <template #trigger>\n      <u-input\n        :size=\"size\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder\"\n        :clearable=\"clearable\"\n        :model-value=\"displayedValue\"\n        @clear=\"handleClear\"\n        @keydown=\"handleKeydown\"\n        native-readonly\n      >\n        <template #prefix v-if=\"$slots.prefix\">\n          <slot name=\"prefix\" />\n        </template>\n\n        <template #suffix>\n          <u-icon :class=\"cls.e('arrow')\">\n            <ArrowDown />\n          </u-icon>\n        </template>\n      </u-input>\n    </template>\n\n    <!-- 下拉内容 -->\n    <template #content>\n      <!-- 过滤器 -->\n      <div v-if=\"filterable\" :class=\"cls.e('content-filter')\">\n        <u-input placeholder=\"输入关键字进行搜索\" tabindex=\"0\" v-focus v-model=\"queryString\">\n          <template #suffix>\n            <u-icon>\n              <Search />\n            </u-icon>\n          </template>\n        </u-input>\n      </div>\n\n      <!--\n        单选列表。虚拟化启用时，内容容器 height 由 useVirtualizer 命令式写入；\n        此处 content-style 仅承担 grid 相关样式，避免 height 变化触发模板重渲染。\n      -->\n      <u-scroll\n        v-if=\"options.length\"\n        tag=\"ul\"\n        :class=\"cls.e('options')\"\n        ref=\"scrollRef\"\n        :content-class=\"[\n          cls.e('options-wrap'),\n          bem.is('virtual', virtualEnabled),\n          bem.is('grid', !!grid)\n        ]\"\n        :content-style=\"{\n          gridTemplateColumns: grid ? `repeat(${grid.cols}, minmax(0px, 1fr))` : undefined,\n          gridGap: grid ? withUnit(grid.gap, 'px') : undefined\n        }\"\n      >\n        <template v-if=\"virtualEnabled\">\n          <!-- @vue-ignore -->\n          <li\n            v-for=\"{ option, index, val, label, key, offset } of virtualOptions\"\n            :class=\"[optionClass, bem.is('selected', index === currentIndex)]\"\n            @click=\"handleSelect(option, index)\"\n            :key=\"key\"\n            :style=\"{ transform: `translateY(${offset}px)` }\"\n            :data-index=\"index\"\n            :ref=\"(el) => measureElement(index, el as Element | null)\"\n          >\n            <slot v-bind=\"{ option, index }\">\n              {{ label }}\n            </slot>\n          </li>\n        </template>\n\n        <template v-else>\n          <li\n            v-for=\"(option, index) of options\"\n            :class=\"[optionClass, bem.is('selected', index === currentIndex)]\"\n            @click=\"handleSelect(option, index)\"\n            :data-index=\"index\"\n            :title=\"o(option).get(labelKey)\"\n            :key=\"o(option).get(valueKey)\"\n          >\n            <slot v-bind=\"{ option, index }\">\n              {{ o(option).get(labelKey) }}\n            </slot>\n          </li>\n        </template>\n      </u-scroll>\n\n      <div v-else :class=\"cls.e('empty')\">\n        <UEmpty />\n      </div>\n    </template>\n  </u-dropdown>\n\n  <template v-else>\n    {{ displayedValue || FORM_EMPTY_CONTENT }}\n  </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { o } from '@cat-kit/core'\nimport { useFormFallbackProps, useVirtualizer } from '@veltra/compositions'\nimport { vFocus } from '@veltra/directives'\nimport { ArrowDown, Search } from '@veltra/icons/normal'\nimport { bem, fieldKey, FORM_EMPTY_CONTENT, scrollIntoContainerView, withUnit } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, nextTick, shallowRef, watch } from 'vue'\n\nimport type {\n  SelectEmits,\n  SelectProps,\n  _SelectExposed,\n  DropdownExposed,\n  ScrollExposed\n} from '../../types'\nimport { UDropdown } from '../dropdown'\nimport { UEmpty } from '../empty'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\nimport { UScroll } from '../scroll'\nimport { useKeyboard } from './use-keyboard'\nimport { useOptions } from './use-options'\n\ndefineOptions({ name: 'USelect', inheritAttrs: false })\n\nconst props = withDefaults(defineProps<SelectProps>(), {\n  labelKey: 'label',\n  valueKey: 'value',\n  placeholder: '请选择',\n  clearable: true,\n  disabled: undefined,\n  readonly: undefined\n})\n\nconst emit = defineEmits<SelectEmits>()\n\ndefineSlots<{\n  /** 前缀插槽 */\n  prefix?: () => any\n  /** 默认插槽 */\n  default?: (scope: { option: Record<string, any>; index: number }) => any\n}>()\n\nconst cls = bem('select')\n\nconst labelKey = computed(() => fieldKey(props.labelKey, 'label'))\nconst valueKey = computed(() => fieldKey(props.valueKey, 'value'))\n\nconst optionClass = cls.e('option')\n\nconst { formProps } = injectFormContext()\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n  size: 'default',\n  disabled: false,\n  readonly: false\n})\n\nconst currentIndex = shallowRef(-1)\nconst label = defineModel('text')\nconst selected = shallowRef<Record<string, any>>()\n\nconst displayedValue = computed(() => {\n  if (label.value) return label.value\n\n  return selected.value ? o(selected.value).get(labelKey.value) : String(props.modelValue ?? '')\n})\n\nconst dropdownRef = shallowRef<DropdownExposed>()\nconst scrollRef = shallowRef<ScrollExposed>()\n\nconst filterable = computed(() => {\n  return props.filterable || typeof props.options === 'function'\n})\n\nconst { queryString, options, temOptionsToCreatedOptions, clearCreatedOptions } = useOptions({\n  props\n})\n\n// TODO: 优化\nlet userSelecting = false\nfunction lock() {\n  userSelecting = true\n}\n\nfunction unlock() {\n  nextTick(() => {\n    userSelecting = false\n  })\n}\n\n// 回显\nwatch(\n  [() => props.modelValue, options],\n  ([modelValue, options]) => {\n    if (userSelecting) return\n\n    if (!options?.length) return\n\n    if (modelValue !== undefined && modelValue !== null && modelValue !== '') {\n      currentIndex.value = options.findIndex(\n        (option) => o(option).get(valueKey.value) === modelValue\n      )\n      selected.value = currentIndex.value >= 0 ? options[currentIndex.value] : undefined\n      label.value = selected.value ? o(selected.value).get(labelKey.value) : undefined\n    } else {\n      currentIndex.value = -1\n      selected.value = undefined\n      label.value = undefined\n    }\n  },\n  { immediate: true }\n)\n\nconst baseVirtualEnabled = computed(() => options.value.length > 80)\nconst virtualEnabled = computed(() => baseVirtualEnabled.value && !props.grid)\n\nconst { virtualizer, items } = useVirtualizer({\n  count: computed(() => options.value.length),\n  scrollEl: () => scrollRef.value?.containerRef ?? null,\n  contentEl: () => (virtualEnabled.value ? (scrollRef.value?.contentRef ?? null) : null),\n  gap: 4,\n  estimateSize: () => 40\n})\n\nconst virtualOptions = computed(() => {\n  const _options = options.value\n  return items.value.map((item) => {\n    const option = _options[item.index]!\n    return {\n      option,\n      index: item.index,\n      label: o(option).get(labelKey.value),\n      val: o(option).get(valueKey.value),\n      key: item.index,\n      offset: item.start\n    }\n  })\n})\n\nconst measureElement: (index: number, el: Element | null) => void = (index, el) =>\n  virtualizer.measureElement(index, el)\n\nfunction scrollTo(index: number): void {\n  virtualizer.scrollToIndex(index, { align: 'center' })\n}\n\nwatch([scrollRef, virtualEnabled], ([scroll, virtualEnabled]) => {\n  if (!scroll || !props.modelValue) return\n\n  if (virtualEnabled) {\n    const index = options.value.findIndex((option) => option === selected.value)\n    index !== -1 && dropdownVisible.value && nextTick(() => scrollTo(index))\n  } else {\n    const selectedEl = scroll?.contentRef?.getElementsByClassName('is-selected')[0]\n    if (selectedEl) {\n      scrollIntoContainerView(selectedEl as HTMLElement, scroll.containerRef ?? null)\n    }\n  }\n})\n\nconst dropdownVisible = shallowRef(false)\n\nwatch(dropdownVisible, (v) => {\n  if (!v) {\n    queryString.value = ''\n  }\n})\n\nconst handleDropdownVisible = (visible: boolean) => {\n  if (!visible) {\n    queryString.value = ''\n  }\n}\n\n/** 单选 */\nconst handleSelect = (option: Record<string, any>, index: number) => {\n  lock()\n  selected.value = option\n\n  emit('update:modelValue', option?.[valueKey.value])\n  label.value = option?.[labelKey.value]\n  emit('change', option)\n  if (option.__isTemp) {\n    temOptionsToCreatedOptions()\n  }\n  currentIndex.value = index\n  dropdownRef.value?.close()\n\n  unlock()\n}\n\n/** 清除选项 */\nconst handleClear = () => {\n  lock()\n  selected.value = undefined\n  currentIndex.value = -1\n  label.value = undefined\n  clearCreatedOptions()\n  emit('update:modelValue', undefined)\n  emit('change', undefined)\n  unlock()\n}\n\nfunction getCurrentEl() {\n  return scrollRef.value?.contentRef?.querySelector('li.is-selected') as HTMLElement | undefined\n}\n\nconst { handleKeydown } = useKeyboard({\n  options,\n  currentIndex,\n  selectOption: handleSelect,\n  getCurrentEl\n})\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"select.js","names":["$attrs","$slots"],"sources":["../../../src/components/select/select.vue"],"sourcesContent":["<template>\n  <u-dropdown\n    v-if=\"!readonly\"\n    v-bind=\"$attrs\"\n    trigger=\"click\"\n    :class=\"[cls.b, bem.is('disabled', disabled)]\"\n    ref=\"dropdownRef\"\n    v-model:visible=\"dropdownVisible\"\n    :content-class=\"[cls.e('panel'), cls.em('panel', size), contentClass]\"\n    :content-style=\"contentStyle\"\n    :disabled=\"disabled\"\n    :min-width=\"minWidth\"\n    :width=\"width\"\n    @keydown=\"handleKeydown\"\n    @update:visible=\"handleDropdownVisible\"\n    @mouseenter=\"hovered = true\"\n    @mouseleave=\"hovered = false\"\n  >\n    <!-- 触发 -->\n    <template #trigger>\n      <u-input\n        ref=\"inputRef\"\n        :size=\"size\"\n        :disabled=\"disabled\"\n        :placeholder=\"inputPlaceholder\"\n        :clearable=\"false\"\n        :model-value=\"inputValue\"\n        @update:model-value=\"handleQueryInput\"\n        @keydown=\"handleKeydown\"\n        :native-readonly=\"!filterable || !querying\"\n        @click.capture=\"handleTriggerClickCapture\"\n      >\n        <template #prefix v-if=\"$slots.prefix\">\n          <slot name=\"prefix\" />\n        </template>\n\n        <template #suffix>\n          <transition name=\"zoom-in\" mode=\"out-in\">\n            <u-icon\n              v-if=\"showClear\"\n              :class=\"cls.e('clear')\"\n              title=\"清除\"\n              key=\"clear\"\n              @click.stop=\"handleClear\"\n            >\n              <Close />\n            </u-icon>\n            <u-icon v-else :class=\"cls.e('arrow')\" key=\"arrow\">\n              <ArrowDown />\n            </u-icon>\n          </transition>\n        </template>\n      </u-input>\n    </template>\n\n    <!-- 下拉内容 -->\n    <template #content>\n      <!--\n        单选列表。虚拟化启用时，内容容器 height 由 useVirtualizer 命令式写入；\n        此处 content-style 仅承担 grid 相关样式，避免 height 变化触发模板重渲染。\n      -->\n      <u-scroll\n        v-if=\"options.length\"\n        tag=\"ul\"\n        :class=\"cls.e('options')\"\n        ref=\"scrollRef\"\n        :content-class=\"[\n          cls.e('options-wrap'),\n          bem.is('virtual', virtualEnabled),\n          bem.is('grid', !!grid)\n        ]\"\n        :content-style=\"{\n          gridTemplateColumns: grid ? `repeat(${grid.cols}, minmax(0px, 1fr))` : undefined,\n          gridGap: grid ? withUnit(grid.gap, 'px') : undefined\n        }\"\n      >\n        <template v-if=\"virtualEnabled\">\n          <!-- @vue-ignore -->\n          <li\n            v-for=\"{ option, index, val, label, key, offset } of virtualOptions\"\n            :class=\"[optionClass, bem.is('selected', index === currentIndex)]\"\n            @click=\"handleSelect(option, index)\"\n            :key=\"key\"\n            :style=\"{ transform: `translateY(${offset}px)` }\"\n            :data-index=\"index\"\n            :ref=\"(el) => measureElement(index, el as Element | null)\"\n          >\n            <slot v-bind=\"{ option, index }\">\n              {{ label }}\n            </slot>\n          </li>\n        </template>\n\n        <template v-else>\n          <li\n            v-for=\"(option, index) of options\"\n            :class=\"[optionClass, bem.is('selected', index === currentIndex)]\"\n            @click=\"handleSelect(option, index)\"\n            :data-index=\"index\"\n            :title=\"o(option).get(labelKey)\"\n            :key=\"o(option).get(valueKey)\"\n          >\n            <slot v-bind=\"{ option, index }\">\n              {{ o(option).get(labelKey) }}\n            </slot>\n          </li>\n        </template>\n      </u-scroll>\n\n      <div v-else :class=\"cls.e('empty')\">\n        <UEmpty />\n      </div>\n    </template>\n  </u-dropdown>\n\n  <template v-else>\n    {{ displayedValue || FORM_EMPTY_CONTENT }}\n  </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { o } from '@cat-kit/core'\nimport { useFormFallbackProps, useVirtualizer } from '@veltra/compositions'\nimport { ArrowDown, Close } from '@veltra/icons/normal'\nimport { bem, fieldKey, FORM_EMPTY_CONTENT, scrollIntoContainerView, withUnit } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, nextTick, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type {\n  SelectEmits,\n  SelectProps,\n  _SelectExposed,\n  DropdownExposed,\n  InputExposed,\n  ScrollExposed\n} from '../../types'\nimport { UDropdown } from '../dropdown'\nimport { UEmpty } from '../empty'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\nimport { UScroll } from '../scroll'\nimport { useKeyboard } from './use-keyboard'\nimport { useOptions } from './use-options'\n\ndefineOptions({ name: 'USelect', inheritAttrs: false })\n\nconst props = withDefaults(defineProps<SelectProps>(), {\n  labelKey: 'label',\n  valueKey: 'value',\n  placeholder: '请选择',\n  clearable: true,\n  disabled: undefined,\n  readonly: undefined\n})\n\nconst emit = defineEmits<SelectEmits>()\n\ndefineSlots<{\n  /** 前缀插槽 */\n  prefix?: () => any\n  /** 默认插槽 */\n  default?: (scope: { option: Record<string, any>; index: number }) => any\n}>()\n\nconst cls = bem('select')\n\nconst labelKey = computed(() => fieldKey(props.labelKey, 'label'))\nconst valueKey = computed(() => fieldKey(props.valueKey, 'value'))\n\nconst optionClass = cls.e('option')\n\nconst { formProps } = injectFormContext()\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n  size: 'default',\n  disabled: false,\n  readonly: false\n})\n\nconst currentIndex = shallowRef(-1)\nconst label = defineModel('text')\nconst selected = shallowRef<Record<string, any>>()\n\nconst displayedValue = computed(() => {\n  if (label.value) return label.value\n\n  return selected.value ? o(selected.value).get(labelKey.value) : String(props.modelValue ?? '')\n})\n\nconst dropdownRef = shallowRef<DropdownExposed>()\nconst scrollRef = shallowRef<ScrollExposed>()\nconst inputRef = useTemplateRef<InputExposed>('inputRef')\n\nconst filterable = computed(() => {\n  return props.filterable || typeof props.options === 'function'\n})\n\nconst { queryString, options, temOptionsToCreatedOptions, clearCreatedOptions } = useOptions({\n  props\n})\n\nconst dropdownVisible = shallowRef(false)\n\n/**\n * 是否处于查询态：决定触发输入框显示查询串还是选中标签。\n * 与面板可见状态解耦 —— 选择后立即退出查询态，\n * 不等面板关闭动画结束（否则显示值会延迟一个动画时长才恢复）。\n */\nconst querying = shallowRef(false)\n\n/** 触发输入框的值：查询态下承载查询串，否则展示选中标签 */\nconst inputValue = computed(() => {\n  if (filterable.value && querying.value) return queryString.value\n  return displayedValue.value\n})\n\n/** 查询态下已选标签降级为占位提示 */\nconst inputPlaceholder = computed(() => {\n  if (filterable.value && querying.value && displayedValue.value) {\n    return displayedValue.value\n  }\n  return props.placeholder\n})\n\nfunction handleQueryInput(value: string) {\n  if (!filterable.value) return\n  queryString.value = value\n}\n\nconst hovered = shallowRef(false)\n\n/** 悬停且存在选中值时展示清除按钮（替代下拉箭头） */\nconst showClear = computed(() => {\n  return props.clearable && !disabled.value && hovered.value && !!displayedValue.value\n})\n\n/**\n * 过滤模式下拦截输入区域的点击：\n * 阻止 dropdown 的 trigger 开合切换，保持面板展开以不中断输入。\n * 非输入区域（箭头、留白）放行，维持原开合行为。\n */\nfunction handleTriggerClickCapture(e: MouseEvent) {\n  if (!filterable.value || disabled.value) return\n  if (!(e.target instanceof HTMLInputElement)) return\n\n  e.stopPropagation()\n  if (!dropdownVisible.value) dropdownRef.value?.open()\n}\n\n// TODO: 优化\nlet userSelecting = false\nfunction lock() {\n  userSelecting = true\n}\n\n/**\n * @param preferredValue 选择时传入刚提交的值，避免 nextTick 时 props.modelValue 尚未回传而用旧值覆盖高亮/标签\n */\nfunction unlock(preferredValue?: any) {\n  nextTick(() => {\n    userSelecting = false\n    // 选择/清除会同步重建选项列表（临时项转正、查询串清空），\n    // 重建触发的回显在锁定期间被跳过，解锁后按最新列表重同步一次，\n    // 避免高亮停留在选择前的旧索引上\n    const value = preferredValue !== undefined ? preferredValue : props.modelValue\n    syncSelected(value, options.value)\n  })\n}\n\n/** 按 modelValue 与选项列表同步高亮索引、选中项与显示标签 */\nfunction syncSelected(modelValue: any, options: Record<string, any>[] | undefined) {\n  // 查询输入期间高亮第一项（创建模式下通常是临时项，便于回车创建）\n  if (queryString.value) {\n    currentIndex.value = options?.length ? 0 : -1\n    return\n  }\n\n  if (!options?.length) return\n\n  if (modelValue !== undefined && modelValue !== null && modelValue !== '') {\n    currentIndex.value = options.findIndex((option) => o(option).get(valueKey.value) === modelValue)\n    selected.value = currentIndex.value >= 0 ? options[currentIndex.value] : undefined\n    label.value = selected.value ? o(selected.value).get(labelKey.value) : undefined\n  } else {\n    currentIndex.value = -1\n    selected.value = undefined\n    label.value = undefined\n  }\n}\n\n// 回显\nwatch(\n  [() => props.modelValue, options],\n  ([modelValue, options]) => {\n    if (userSelecting) return\n    syncSelected(modelValue, options)\n  },\n  { immediate: true }\n)\n\nconst baseVirtualEnabled = computed(() => options.value.length > 80)\nconst virtualEnabled = computed(() => baseVirtualEnabled.value && !props.grid)\n\nconst { virtualizer, items } = useVirtualizer({\n  count: computed(() => options.value.length),\n  scrollEl: () => scrollRef.value?.containerRef ?? null,\n  contentEl: () => (virtualEnabled.value ? (scrollRef.value?.contentRef ?? null) : null),\n  gap: 4,\n  estimateSize: () => 40\n})\n\nconst virtualOptions = computed(() => {\n  const _options = options.value\n  return items.value.map((item) => {\n    const option = _options[item.index]!\n    return {\n      option,\n      index: item.index,\n      label: o(option).get(labelKey.value),\n      val: o(option).get(valueKey.value),\n      key: item.index,\n      offset: item.start\n    }\n  })\n})\n\nconst measureElement: (index: number, el: Element | null) => void = (index, el) =>\n  virtualizer.measureElement(index, el)\n\nfunction scrollTo(index: number): void {\n  virtualizer.scrollToIndex(index, { align: 'center' })\n}\n\nwatch([scrollRef, virtualEnabled], ([scroll, virtualEnabled]) => {\n  if (!scroll || !props.modelValue) return\n\n  if (virtualEnabled) {\n    const index = options.value.findIndex((option) => option === selected.value)\n    index !== -1 && dropdownVisible.value && nextTick(() => scrollTo(index))\n  } else {\n    const selectedEl = scroll?.contentRef?.getElementsByClassName('is-selected')[0]\n    if (selectedEl) {\n      scrollIntoContainerView(selectedEl as HTMLElement, scroll.containerRef ?? null)\n    }\n  }\n})\n\nwatch(dropdownVisible, (visible) => {\n  if (visible) {\n    // 面板展开后进入查询态并聚焦输入框，可以立即输入查询\n    if (filterable.value) {\n      queryString.value = ''\n      querying.value = true\n      nextTick(() => inputRef.value?.el?.focus())\n    }\n  } else {\n    querying.value = false\n    queryString.value = ''\n  }\n})\n\nconst handleDropdownVisible = (visible: boolean) => {\n  if (!visible) {\n    queryString.value = ''\n  }\n}\n\n/** 单选 */\nconst handleSelect = (option: Record<string, any>, _index: number) => {\n  lock()\n  const value = option?.[valueKey.value]\n  selected.value = option\n\n  emit('update:modelValue', value)\n  label.value = option?.[labelKey.value]\n  emit('change', option)\n  if (option.__isTemp) {\n    // 转正后列表同步重建为完整源（临时项置顶索引失效），必须按 value 重定位\n    temOptionsToCreatedOptions()\n  }\n  // 立即退出查询态，输入框同步恢复显示选中标签\n  querying.value = false\n  queryString.value = ''\n  // 按当前列表定位高亮，避免创建项转正后仍停留在点击时的临时索引（通常为 0）\n  currentIndex.value = options.value.findIndex((item) => o(item).get(valueKey.value) === value)\n  if (currentIndex.value >= 0) {\n    selected.value = options.value[currentIndex.value]\n  }\n  dropdownRef.value?.close()\n\n  unlock(value)\n}\n\n/** 清除选项 */\nconst handleClear = () => {\n  lock()\n  selected.value = undefined\n  currentIndex.value = -1\n  label.value = undefined\n  clearCreatedOptions()\n  emit('update:modelValue', undefined)\n  emit('change', undefined)\n  unlock(null)\n}\n\nfunction getCurrentEl() {\n  return scrollRef.value?.contentRef?.querySelector('li.is-selected') as HTMLElement | undefined\n}\n\nconst { handleKeydown } = useKeyboard({\n  options,\n  currentIndex,\n  selectOption: handleSelect,\n  getCurrentEl\n})\n</script>\n"],"mappings":"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"}

package/dist/components/select/style2.css

@@ -18,19 +18,15 @@
 .u-select {
   width: 100%;
 }
-.u-select__content-filter {
-  border-bottom: 1px solid var(--u-border-color);
-  background-color: var(--u-bg-color-middle);
-}
-.u-select__content-filter .u-input {
-  box-shadow: none;
-}
 .u-select__options {
-  max-height: 180px;
+  max-height: 240px;
 }
 .u-select.is-disabled .u-select__arrow {
   color: var(--u-text-color-disabled);
 }
+.u-select__clear {
+  cursor: pointer;
+}
 .u-select__options-wrap {
   list-style: none;
   margin: 0;
@@ -92,9 +88,6 @@
 .u-select__empty {
   color: var(--u-text-color-main);
 }
-.u-select__panel--small .u-select__content-filter {
-  padding: calc(var(--u-gap-small) / 2) var(--u-gap-small);
-}
 .u-select__panel--small .u-select__options {
   padding: var(--u-gap-small);
 }
@@ -104,9 +97,6 @@
   height: var(--u-form-component-height-small);
   line-height: var(--u-form-component-height-small);
 }
-.u-select__panel--default .u-select__content-filter {
-  padding: calc(var(--u-gap-default) / 2) var(--u-gap-default);
-}
 .u-select__panel--default .u-select__options {
   padding: var(--u-gap-default);
 }
@@ -116,9 +106,6 @@
   height: var(--u-form-component-height-default);
   line-height: var(--u-form-component-height-default);
 }
-.u-select__panel--large .u-select__content-filter {
-  padding: calc(var(--u-gap-large) / 2) var(--u-gap-large);
-}
 .u-select__panel--large .u-select__options {
   padding: var(--u-gap-large);
 }

package/dist/components/select/use-options.js

@@ -10,16 +10,33 @@ function useOptions(o$1) {
 	const filteredOptions = shallowRef([]);
 	const tempOptions = shallowRef([]);
 	const createdOptions = shallowRef([]);
+	function getSourceOptions(propsOptions) {
+		if (typeof propsOptions === "function") return remoteOptions.value;
+		return [...createdOptions.value, ...propsOptions ?? []];
+	}
+	/** 无查询时同步展示完整列表（含已创建项），避免选择后等高亮索引错位 */
+	function resetToSourceOptions() {
+		const sourceOptions = getSourceOptions(props.options);
+		if (typeof props.options === "function") {
+			setTempOption("", remoteOptions.value);
+			return;
+		}
+		filteredOptions.value = sourceOptions;
+		tempOptions.value = [];
+	}
 	function temOptionsToCreatedOptions() {
-		createdOptions.value = tempOptions.value.map((item) => {
+		if (!tempOptions.value.length) return;
+		createdOptions.value = [...createdOptions.value, ...tempOptions.value.map((item) => {
 			return {
 				...item,
 				__isTemp: false
 			};
-		});
+		})];
+		resetToSourceOptions();
 	}
 	function clearCreatedOptions() {
 		createdOptions.value = [];
+		resetToSourceOptions();
 	}
 	const setTempOption = (qs, options) => {
 		if (!qs?.trim() || !props.creatable) {
@@ -28,9 +45,10 @@ function useOptions(o$1) {
 		}
 		const labelKey = fieldKey(props.labelKey, "label");
 		const valueKey = fieldKey(props.valueKey, "value");
-		if (!(options ? options.some((option) => {
+		const exactMatch = options ? options.some((option) => {
 			return o(option).get(labelKey) === qs;
-		}) : false)) tempOptions.value = [{
+		}) : false;
+		tempOptions.value = exactMatch ? [] : [{
 			[labelKey]: qs,
 			[valueKey]: qs,
 			__isTemp: true
@@ -39,35 +57,58 @@ function useOptions(o$1) {
 	const allOptions = computed(() => {
 		const { options } = props;
 		if (typeof options === "function") return remoteOptions.value;
-		return options ?? [];
+		return [...createdOptions.value, ...options ?? []];
 	});
-	/** 展示的选项 */
+	/**
+	* 展示的选项
+	* @description 已创建选项并入过滤数据源参与匹配；临时选项（待创建）固定置顶
+	*/
 	const options = computed(() => {
 		const { options } = props;
 		if (typeof options === "function") return remoteOptions.value;
-		const prependOptions = tempOptions.value?.length ? tempOptions.value : createdOptions.value;
-		if (!options) return prependOptions;
-		return [...prependOptions, ...filteredOptions.value];
+		return [...tempOptions.value, ...filteredOptions.value];
 	});
-	watch([queryString, () => props.options], debounce(async ([qs, propsOptions]) => {
+	const applyLocalFilter = (qs, propsOptions) => {
+		const labelKey = fieldKey(props.labelKey, "label");
+		const sourceOptions = [...createdOptions.value, ...propsOptions ?? []];
+		if (!qs) {
+			filteredOptions.value = sourceOptions;
+			setTempOption(qs, filteredOptions.value);
+			return;
+		}
+		const _filteredOptions = sourceOptions.filter((item) => {
+			return o(item).get(labelKey)?.includes(qs) ?? false;
+		});
+		setTempOption(qs, _filteredOptions);
+		filteredOptions.value = _filteredOptions;
+	};
+	const debouncedLocalFilter = debounce((qs, propsOptions) => {
+		if (!queryString.value) {
+			applyLocalFilter("", propsOptions);
+			return;
+		}
+		applyLocalFilter(qs, propsOptions);
+	}, 200);
+	const debouncedRemoteFilter = debounce(async (qs, propsOptions) => {
+		const options = await propsOptions(queryString.value);
+		remoteOptions.value = options;
+		setTempOption(queryString.value, options);
+	}, 200);
+	watch([
+		queryString,
+		() => props.options,
+		createdOptions
+	], ([qs, propsOptions]) => {
 		if (typeof propsOptions === "function") {
-			const options = await propsOptions(qs);
-			remoteOptions.value = options;
-			setTempOption(qs, options);
-		} else {
-			const labelKey = fieldKey(props.labelKey, "label");
-			if (!qs) {
-				filteredOptions.value = propsOptions ?? [];
-				setTempOption(qs, filteredOptions.value);
-				return;
-			}
-			const _filteredOptions = propsOptions?.filter((item) => {
-				return o(item).get(labelKey)?.includes(qs) ?? false;
-			}) ?? [];
-			setTempOption(qs, _filteredOptions);
-			filteredOptions.value = _filteredOptions;
+			debouncedRemoteFilter(qs, propsOptions);
+			return;
+		}
+		if (!qs) {
+			applyLocalFilter("", propsOptions);
+			return;
 		}
-	}, 200), { immediate: true });
+		debouncedLocalFilter(qs, propsOptions);
+	}, { immediate: true });
 	return {
 		queryString,
 		options,