@falcon-ui/falcon-ui 1.0.0

package/esm/components/input-search/index.mjs

@@ -0,0 +1,277 @@
+import { computed, createBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, unref, watch, withCtx, withKeys, withModifiers } from "vue";
+import { Loading, Search } from "@element-plus/icons-vue";
+import { ElIcon, ElInput } from "element-plus";
+var defaultNamespace = "fl";
+var statePrefix = "is-";
+var buildBemName = (namespace, block, blockSuffix = "", element = "", modifier = "") => {
+	let className = `${namespace}-${block}`;
+	if (blockSuffix) className += `-${blockSuffix}`;
+	if (element) className += `__${element}`;
+	if (modifier) className += `--${modifier}`;
+	return className;
+};
+const useNamespace = (block, namespace = defaultNamespace) => {
+	const b = (blockSuffix = "") => buildBemName(namespace, block, blockSuffix);
+	const e = (element) => element ? buildBemName(namespace, block, "", element) : "";
+	const m = (modifier) => modifier ? buildBemName(namespace, block, "", "", modifier) : "";
+	const be = (blockSuffix, element) => {
+		if (!blockSuffix || !element) return "";
+		return buildBemName(namespace, block, blockSuffix, element);
+	};
+	const em = (element, modifier) => {
+		if (!element || !modifier) return "";
+		return buildBemName(namespace, block, "", element, modifier);
+	};
+	const bm = (blockSuffix, modifier) => {
+		if (!blockSuffix || !modifier) return "";
+		return buildBemName(namespace, block, blockSuffix, "", modifier);
+	};
+	const bem = (blockSuffix, element, modifier) => {
+		if (!blockSuffix && !element && !modifier) return b();
+		return buildBemName(namespace, block, blockSuffix, element, modifier);
+	};
+	const is = (name, state = true) => state ? `${statePrefix}${name}` : "";
+	return {
+		namespace,
+		b,
+		e,
+		m,
+		be,
+		em,
+		bm,
+		bem,
+		is
+	};
+};
+const withInstall = (component) => {
+	const installable = component;
+	installable.install = (app) => {
+		if (!component.name) return;
+		app.component(component.name, component);
+	};
+	return installable;
+};
+const FlInputSearch = withInstall(/* @__PURE__ */ defineComponent({
+	name: "FlInputSearch",
+	inheritAttrs: false,
+	__name: "input-search",
+	props: {
+		modelValue: {
+			type: [String, Number],
+			default: null
+		},
+		label: {
+			type: String,
+			default: ""
+		},
+		fetchApi: {
+			type: Function,
+			default: void 0
+		},
+		mapResult: {
+			type: Function,
+			required: true
+		},
+		placeholder: {
+			type: String,
+			default: ""
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		isError: {
+			type: Boolean,
+			default: false
+		},
+		isTable: {
+			type: Boolean,
+			default: false
+		},
+		clearOnBlurUnconfirmed: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: {
+		"update:modelValue": (value) => value === null || typeof value === "string" || typeof value === "number",
+		"update:label": (value) => typeof value === "string",
+		openDialog: (payload) => typeof payload.keyword === "string" && (payload.reason === "manual" || payload.reason === "multi-match") && (payload.results === void 0 || Array.isArray(payload.results)),
+		"selection-commit": (payload) => typeof payload.label === "string" && payload.source === "enter" && (payload.value === null || typeof payload.value === "string" || typeof payload.value === "number"),
+		"search-error": (payload) => typeof payload.keyword === "string",
+		clear: (payload) => payload.reason === "manual-empty" || payload.reason === "blur-unconfirmed" || payload.reason === "error"
+	},
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const ns = useNamespace("input-search");
+		const inputRef = ref(null);
+		const innerLabel = ref(props.label);
+		const isLoading = ref(false);
+		const latestSearchToken = ref(0);
+		const lastValidLabel = ref(props.label);
+		const lastValidValue = ref(props.modelValue);
+		const inputClass = computed(() => [ns.b(), {
+			"is-error": props.isError,
+			"is-table": props.isTable
+		}]);
+		const searchTriggerClass = ns.e("trigger");
+		const normalizeLabel = (value) => typeof value === "string" ? value : "";
+		const normalizeValue = (value) => {
+			if (value === null || typeof value === "string" || typeof value === "number") return value;
+			return null;
+		};
+		const syncSnapshot = (value, label) => {
+			lastValidValue.value = value;
+			lastValidLabel.value = label;
+		};
+		const clearSelection = (reason) => {
+			innerLabel.value = "";
+			syncSnapshot(null, "");
+			emit("update:modelValue", null);
+			emit("update:label", "");
+			emit("clear", { reason });
+		};
+		const commitSelection = (result) => {
+			const nextValue = normalizeValue(result.value);
+			const nextLabel = normalizeLabel(result.label);
+			innerLabel.value = nextLabel;
+			syncSnapshot(nextValue, nextLabel);
+			emit("update:modelValue", nextValue);
+			emit("update:label", nextLabel);
+			emit("selection-commit", {
+				value: nextValue,
+				label: nextLabel,
+				source: "enter"
+			});
+		};
+		const handleInput = (value) => {
+			const nextLabel = normalizeLabel(value);
+			innerLabel.value = nextLabel;
+			emit("update:label", nextLabel);
+		};
+		const handleManualSearch = () => {
+			emit("openDialog", {
+				keyword: innerLabel.value.trim(),
+				reason: "manual"
+			});
+		};
+		const handleEnter = async () => {
+			if (isLoading.value) return;
+			const keyword = innerLabel.value.trim();
+			if (!keyword) return;
+			if (!props.fetchApi) {
+				emit("openDialog", {
+					keyword,
+					reason: "manual"
+				});
+				return;
+			}
+			const currentToken = latestSearchToken.value + 1;
+			latestSearchToken.value = currentToken;
+			isLoading.value = true;
+			try {
+				const response = await props.fetchApi(keyword);
+				if (currentToken !== latestSearchToken.value) return;
+				const results = Array.isArray(response) ? response : [];
+				if (results.length === 1) {
+					commitSelection(props.mapResult(results[0]));
+					return;
+				}
+				if (results.length > 1) emit("openDialog", {
+					keyword,
+					reason: "multi-match",
+					results
+				});
+			} catch (error) {
+				if (currentToken !== latestSearchToken.value) return;
+				emit("search-error", {
+					keyword,
+					error
+				});
+			} finally {
+				if (currentToken === latestSearchToken.value) isLoading.value = false;
+			}
+		};
+		const handleNativeClear = () => {
+			clearSelection("manual-empty");
+		};
+		const handleBlur = () => {
+			if (isLoading.value) return;
+			const currentLabel = innerLabel.value;
+			if (currentLabel === lastValidLabel.value) return;
+			if (!currentLabel) {
+				clearSelection("manual-empty");
+				return;
+			}
+			if (props.clearOnBlurUnconfirmed) clearSelection("blur-unconfirmed");
+		};
+		const focus = () => {
+			inputRef.value?.focus();
+		};
+		const blur = () => {
+			inputRef.value?.blur();
+		};
+		const clear = () => {
+			inputRef.value?.clear();
+		};
+		watch(() => props.label, (value) => {
+			innerLabel.value = value;
+		});
+		watch(() => props.modelValue, (value) => {
+			if (value === lastValidValue.value) return;
+			syncSnapshot(normalizeValue(value), props.label);
+		});
+		watch(() => props.isError, (isError, previousIsError) => {
+			if (isError && previousIsError !== true) clearSelection("error");
+		}, { immediate: true });
+		__expose({
+			focus,
+			blur,
+			clear
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ElInput), {
+				ref_key: "inputRef",
+				ref: inputRef,
+				class: normalizeClass(inputClass.value),
+				clearable: props.clearable,
+				disabled: props.disabled || isLoading.value,
+				"model-value": innerLabel.value,
+				placeholder: props.placeholder,
+				onBlur: handleBlur,
+				onClear: handleNativeClear,
+				onKeydown: withKeys(withModifiers(handleEnter, ["prevent"]), ["enter"]),
+				"onUpdate:modelValue": handleInput
+			}, {
+				suffix: withCtx(() => [createElementVNode("span", {
+					class: normalizeClass(unref(searchTriggerClass)),
+					"aria-label": "Search",
+					role: "button",
+					tabindex: "-1",
+					onClick: handleManualSearch,
+					onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"]))
+				}, [createVNode(unref(ElIcon), { class: normalizeClass(unref(ns).is("loading", isLoading.value)) }, {
+					default: withCtx(() => [isLoading.value ? (openBlock(), createBlock(unref(Loading), { key: 0 })) : (openBlock(), createBlock(unref(Search), { key: 1 }))]),
+					_: 1
+				}, 8, ["class"])], 34)]),
+				_: 1
+			}, 8, [
+				"class",
+				"clearable",
+				"disabled",
+				"model-value",
+				"placeholder",
+				"onKeydown"
+			]);
+		};
+	}
+}));
+var input_search_default = FlInputSearch;
+export { FlInputSearch, input_search_default as default };
+
+//# sourceMappingURL=index.mjs.map

package/esm/components/input-search/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/utils/src/bem.ts","../../../../../packages/utils/src/install.ts","../../../../../packages/components/input-search/src/input-search.ts","../../../../../packages/components/input-search/src/input-search.vue","../../../../../packages/components/input-search/src/input-search.vue","../../../../../packages/components/input-search/index.ts"],"sourcesContent":["const defaultNamespace = 'fl'\r\nconst statePrefix = 'is-'\r\n\r\nconst buildBemName = (\r\n  namespace: string,\r\n  block: string,\r\n  blockSuffix = '',\r\n  element = '',\r\n  modifier = ''\r\n) => {\r\n  let className = `${namespace}-${block}`\r\n\r\n  if (blockSuffix) {\r\n    className += `-${blockSuffix}`\r\n  }\r\n\r\n  if (element) {\r\n    className += `__${element}`\r\n  }\r\n\r\n  if (modifier) {\r\n    className += `--${modifier}`\r\n  }\r\n\r\n  return className\r\n}\r\n\r\nexport const useNamespace = (block: string, namespace = defaultNamespace) => {\r\n  const b = (blockSuffix = '') => buildBemName(namespace, block, blockSuffix)\r\n\r\n  const e = (element?: string) => (element ? buildBemName(namespace, block, '', element) : '')\r\n\r\n  const m = (modifier?: string) =>\r\n    modifier ? buildBemName(namespace, block, '', '', modifier) : ''\r\n\r\n  const be = (blockSuffix?: string, element?: string) => {\r\n    if (!blockSuffix || !element) {\r\n      return ''\r\n    }\r\n\r\n    return buildBemName(namespace, block, blockSuffix, element)\r\n  }\r\n\r\n  const em = (element?: string, modifier?: string) => {\r\n    if (!element || !modifier) {\r\n      return ''\r\n    }\r\n\r\n    return buildBemName(namespace, block, '', element, modifier)\r\n  }\r\n\r\n  const bm = (blockSuffix?: string, modifier?: string) => {\r\n    if (!blockSuffix || !modifier) {\r\n      return ''\r\n    }\r\n\r\n    return buildBemName(namespace, block, blockSuffix, '', modifier)\r\n  }\r\n\r\n  const bem = (blockSuffix?: string, element?: string, modifier?: string) => {\r\n    if (!blockSuffix && !element && !modifier) {\r\n      return b()\r\n    }\r\n\r\n    return buildBemName(namespace, block, blockSuffix, element, modifier)\r\n  }\r\n\r\n  const is = (name: string, state = true) => (state ? `${statePrefix}${name}` : '')\r\n\r\n  return {\r\n    namespace,\r\n    b,\r\n    e,\r\n    m,\r\n    be,\r\n    em,\r\n    bm,\r\n    bem,\r\n    is\r\n  }\r\n}\r\n","import type { App, Plugin } from 'vue'\r\n\r\nexport type SFCWithInstall<T> = T & Plugin\r\n\r\nexport const withInstall = <T extends { name?: string }>(component: T): SFCWithInstall<T> => {\r\n  const installable = component as SFCWithInstall<T>\r\n\r\n  installable.install = (app: App) => {\r\n    if (!component.name) {\r\n      return\r\n    }\r\n\r\n    app.component(component.name, component as unknown as object)\r\n  }\r\n\r\n  return installable\r\n}\r\n","import type { ExtractPublicPropTypes, PropType } from 'vue'\r\n\r\nexport type FlInputSearchValue = string | number | null\r\n\r\nexport interface FlInputSearchMappedResult {\r\n  label: string\r\n  value: FlInputSearchValue\r\n}\r\n\r\nexport type FlInputSearchFetchApi = (keyword: string) => Promise<unknown[]>\r\nexport type FlInputSearchMapResult = (item: unknown) => FlInputSearchMappedResult\r\n\r\nexport const flInputSearchProps = {\r\n  /**\r\n   * 绑定值，通常为业务实体 ID。\r\n   */\r\n  modelValue: {\r\n    type: [String, Number] as PropType<string | number | null>,\r\n    default: null\r\n  },\r\n  /**\r\n   * 输入框显示值（业务标签）。\r\n   */\r\n  label: {\r\n    type: String,\r\n    default: ''\r\n  },\r\n  /**\r\n   * 回车检索方法。\r\n   */\r\n  fetchApi: {\r\n    type: Function as PropType<FlInputSearchFetchApi>,\r\n    default: undefined\r\n  },\r\n  /**\r\n   * 外部结果映射方法，统一映射到 value/label。\r\n   */\r\n  mapResult: {\r\n    type: Function as PropType<FlInputSearchMapResult>,\r\n    required: true\r\n  },\r\n  /**\r\n   * 占位提示文案。\r\n   */\r\n  placeholder: {\r\n    type: String,\r\n    default: ''\r\n  },\r\n  /**\r\n   * 是否禁用输入。\r\n   */\r\n  disabled: {\r\n    type: Boolean,\r\n    default: false\r\n  },\r\n  /**\r\n   * 是否显示清空按钮。\r\n   */\r\n  clearable: {\r\n    type: Boolean,\r\n    default: false\r\n  },\r\n  /**\r\n   * 是否进入错误态。\r\n   */\r\n  isError: {\r\n    type: Boolean,\r\n    default: false\r\n  },\r\n  /**\r\n   * 是否用于表格单元格输入。\r\n   */\r\n  isTable: {\r\n    type: Boolean,\r\n    default: false\r\n  },\r\n  /**\r\n   * Blur 时未确认输入是否强制清空。\r\n   */\r\n  clearOnBlurUnconfirmed: {\r\n    type: Boolean,\r\n    default: true\r\n  }\r\n} as const\r\n\r\nexport type FlInputSearchOpenDialogReason = 'manual' | 'multi-match'\r\n\r\nexport interface FlInputSearchOpenDialogPayload {\r\n  keyword: string\r\n  reason: FlInputSearchOpenDialogReason\r\n  results?: unknown[]\r\n}\r\n\r\nexport interface FlInputSearchSelectionCommitPayload {\r\n  label: string\r\n  source: 'enter'\r\n  value: FlInputSearchValue\r\n}\r\n\r\nexport interface FlInputSearchSearchErrorPayload {\r\n  error: unknown\r\n  keyword: string\r\n}\r\n\r\nexport interface FlInputSearchClearPayload {\r\n  reason: 'manual-empty' | 'blur-unconfirmed' | 'error'\r\n}\r\n\r\nexport const flInputSearchEmits = {\r\n  /**\r\n   * 绑定值更新事件。\r\n   */\r\n  'update:modelValue': (value: FlInputSearchValue) =>\r\n    value === null || typeof value === 'string' || typeof value === 'number',\r\n  /**\r\n   * 显示值更新事件。\r\n   */\r\n  'update:label': (value: string) => typeof value === 'string',\r\n  /**\r\n   * 触发外部弹窗占位事件。\r\n   */\r\n  openDialog: (payload: FlInputSearchOpenDialogPayload) =>\r\n    typeof payload.keyword === 'string' &&\r\n    (payload.reason === 'manual' || payload.reason === 'multi-match') &&\r\n    (payload.results === undefined || Array.isArray(payload.results)),\r\n  /**\r\n   * 唯一结果选中提交事件。\r\n   */\r\n  'selection-commit': (payload: FlInputSearchSelectionCommitPayload) =>\r\n    typeof payload.label === 'string' &&\r\n    payload.source === 'enter' &&\r\n    (payload.value === null ||\r\n      typeof payload.value === 'string' ||\r\n      typeof payload.value === 'number'),\r\n  /**\r\n   * 回车检索失败事件。\r\n   */\r\n  'search-error': (payload: FlInputSearchSearchErrorPayload) => typeof payload.keyword === 'string',\r\n  /**\r\n   * 清空行为事件。\r\n   */\r\n  clear: (payload: FlInputSearchClearPayload) =>\r\n    payload.reason === 'manual-empty' ||\r\n    payload.reason === 'blur-unconfirmed' ||\r\n    payload.reason === 'error'\r\n} as const\r\n\r\nexport type FlInputSearchProps = ExtractPublicPropTypes<typeof flInputSearchProps>\r\nexport type FlInputSearchEmits = typeof flInputSearchEmits\r\n\r\nexport type InputSearchProps = FlInputSearchProps\r\nexport type InputSearchEmits = FlInputSearchEmits\r\n","<template>\r\n  <el-input\r\n    ref=\"inputRef\"\r\n    :class=\"inputClass\"\r\n    :clearable=\"props.clearable\"\r\n    :disabled=\"props.disabled || isLoading\"\r\n    :model-value=\"innerLabel\"\r\n    :placeholder=\"props.placeholder\"\r\n    @blur=\"handleBlur\"\r\n    @clear=\"handleNativeClear\"\r\n    @keydown.enter.prevent=\"handleEnter\"\r\n    @update:model-value=\"handleInput\">\r\n    <template #suffix>\r\n      <span\r\n        :class=\"searchTriggerClass\"\r\n        aria-label=\"Search\"\r\n        role=\"button\"\r\n        tabindex=\"-1\"\r\n        @click=\"handleManualSearch\"\r\n        @mousedown.prevent>\r\n        <el-icon :class=\"ns.is('loading', isLoading)\">\r\n          <Loading v-if=\"isLoading\" />\r\n          <Search v-else />\r\n        </el-icon>\r\n      </span>\r\n    </template>\r\n  </el-input>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { Loading, Search } from '@element-plus/icons-vue'\r\nimport { ElIcon, ElInput } from 'element-plus'\r\nimport { computed, ref, watch } from 'vue'\r\nimport { useNamespace } from '@falcon-ui/utils'\r\nimport type { FlInputSearchMappedResult, FlInputSearchValue } from './input-search'\r\nimport { flInputSearchEmits, flInputSearchProps } from './input-search'\r\n\r\ndefineOptions({\r\n  name: 'FlInputSearch',\r\n  inheritAttrs: false\r\n})\r\n\r\ntype ElInputExpose = {\r\n  blur: () => void\r\n  clear: () => void\r\n  focus: () => void\r\n}\r\n\r\nconst props = defineProps(flInputSearchProps)\r\nconst emit = defineEmits(flInputSearchEmits)\r\nconst ns = useNamespace('input-search')\r\n\r\nconst inputRef = ref<ElInputExpose | null>(null)\r\nconst innerLabel = ref(props.label)\r\nconst isLoading = ref(false)\r\nconst latestSearchToken = ref(0)\r\nconst lastValidLabel = ref(props.label)\r\nconst lastValidValue = ref<FlInputSearchValue>(props.modelValue)\r\n\r\nconst inputClass = computed(() => [\r\n  ns.b(),\r\n  {\r\n    'is-error': props.isError,\r\n    'is-table': props.isTable\r\n  }\r\n])\r\n\r\nconst searchTriggerClass = ns.e('trigger')\r\n\r\nconst normalizeLabel = (value: unknown): string => (typeof value === 'string' ? value : '')\r\n\r\nconst normalizeValue = (value: unknown): FlInputSearchValue => {\r\n  if (value === null || typeof value === 'string' || typeof value === 'number') {\r\n    return value\r\n  }\r\n\r\n  return null\r\n}\r\n\r\nconst syncSnapshot = (value: FlInputSearchValue, label: string) => {\r\n  lastValidValue.value = value\r\n  lastValidLabel.value = label\r\n}\r\n\r\nconst clearSelection = (reason: 'manual-empty' | 'blur-unconfirmed' | 'error') => {\r\n  innerLabel.value = ''\r\n  syncSnapshot(null, '')\r\n\r\n  emit('update:modelValue', null)\r\n  emit('update:label', '')\r\n  emit('clear', { reason })\r\n}\r\n\r\nconst commitSelection = (result: FlInputSearchMappedResult) => {\r\n  const nextValue = normalizeValue(result.value)\r\n  const nextLabel = normalizeLabel(result.label)\r\n\r\n  innerLabel.value = nextLabel\r\n  syncSnapshot(nextValue, nextLabel)\r\n\r\n  emit('update:modelValue', nextValue)\r\n  emit('update:label', nextLabel)\r\n  emit('selection-commit', {\r\n    value: nextValue,\r\n    label: nextLabel,\r\n    source: 'enter'\r\n  })\r\n}\r\n\r\nconst handleInput = (value: string) => {\r\n  const nextLabel = normalizeLabel(value)\r\n  innerLabel.value = nextLabel\r\n  emit('update:label', nextLabel)\r\n}\r\n\r\nconst handleManualSearch = () => {\r\n  emit('openDialog', {\r\n    keyword: innerLabel.value.trim(),\r\n    reason: 'manual'\r\n  })\r\n}\r\n\r\nconst handleEnter = async () => {\r\n  if (isLoading.value) {\r\n    return\r\n  }\r\n\r\n  const keyword = innerLabel.value.trim()\r\n  if (!keyword) {\r\n    return\r\n  }\r\n\r\n  if (!props.fetchApi) {\r\n    emit('openDialog', {\r\n      keyword,\r\n      reason: 'manual'\r\n    })\r\n    return\r\n  }\r\n\r\n  const currentToken = latestSearchToken.value + 1\r\n  latestSearchToken.value = currentToken\r\n  isLoading.value = true\r\n\r\n  try {\r\n    const response = await props.fetchApi(keyword)\r\n    if (currentToken !== latestSearchToken.value) {\r\n      return\r\n    }\r\n\r\n    const results = Array.isArray(response) ? response : []\r\n\r\n    if (results.length === 1) {\r\n      commitSelection(props.mapResult(results[0]))\r\n      return\r\n    }\r\n\r\n    if (results.length > 1) {\r\n      emit('openDialog', {\r\n        keyword,\r\n        reason: 'multi-match',\r\n        results\r\n      })\r\n    }\r\n  } catch (error) {\r\n    if (currentToken !== latestSearchToken.value) {\r\n      return\r\n    }\r\n\r\n    emit('search-error', {\r\n      keyword,\r\n      error\r\n    })\r\n  } finally {\r\n    if (currentToken === latestSearchToken.value) {\r\n      isLoading.value = false\r\n    }\r\n  }\r\n}\r\n\r\nconst handleNativeClear = () => {\r\n  clearSelection('manual-empty')\r\n}\r\n\r\nconst handleBlur = () => {\r\n  if (isLoading.value) {\r\n    return\r\n  }\r\n\r\n  const currentLabel = innerLabel.value\r\n  if (currentLabel === lastValidLabel.value) {\r\n    return\r\n  }\r\n\r\n  if (!currentLabel) {\r\n    clearSelection('manual-empty')\r\n    return\r\n  }\r\n\r\n  if (props.clearOnBlurUnconfirmed) {\r\n    clearSelection('blur-unconfirmed')\r\n  }\r\n}\r\n\r\nconst focus = () => {\r\n  inputRef.value?.focus()\r\n}\r\n\r\nconst blur = () => {\r\n  inputRef.value?.blur()\r\n}\r\n\r\nconst clear = () => {\r\n  inputRef.value?.clear()\r\n}\r\n\r\nwatch(\r\n  () => props.label,\r\n  (value) => {\r\n    innerLabel.value = value\r\n  }\r\n)\r\n\r\nwatch(\r\n  () => props.modelValue,\r\n  (value) => {\r\n    if (value === lastValidValue.value) {\r\n      return\r\n    }\r\n\r\n    syncSnapshot(normalizeValue(value), props.label)\r\n  }\r\n)\r\n\r\nwatch(\r\n  () => props.isError,\r\n  (isError, previousIsError) => {\r\n    if (isError && previousIsError !== true) {\r\n      clearSelection('error')\r\n    }\r\n  },\r\n  { immediate: true }\r\n)\r\n\r\ndefineExpose({\r\n  focus,\r\n  blur,\r\n  clear\r\n})\r\n</script>\r\n","<template>\r\n  <el-input\r\n    ref=\"inputRef\"\r\n    :class=\"inputClass\"\r\n    :clearable=\"props.clearable\"\r\n    :disabled=\"props.disabled || isLoading\"\r\n    :model-value=\"innerLabel\"\r\n    :placeholder=\"props.placeholder\"\r\n    @blur=\"handleBlur\"\r\n    @clear=\"handleNativeClear\"\r\n    @keydown.enter.prevent=\"handleEnter\"\r\n    @update:model-value=\"handleInput\">\r\n    <template #suffix>\r\n      <span\r\n        :class=\"searchTriggerClass\"\r\n        aria-label=\"Search\"\r\n        role=\"button\"\r\n        tabindex=\"-1\"\r\n        @click=\"handleManualSearch\"\r\n        @mousedown.prevent>\r\n        <el-icon :class=\"ns.is('loading', isLoading)\">\r\n          <Loading v-if=\"isLoading\" />\r\n          <Search v-else />\r\n        </el-icon>\r\n      </span>\r\n    </template>\r\n  </el-input>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { Loading, Search } from '@element-plus/icons-vue'\r\nimport { ElIcon, ElInput } from 'element-plus'\r\nimport { computed, ref, watch } from 'vue'\r\nimport { useNamespace } from '@falcon-ui/utils'\r\nimport type { FlInputSearchMappedResult, FlInputSearchValue } from './input-search'\r\nimport { flInputSearchEmits, flInputSearchProps } from './input-search'\r\n\r\ndefineOptions({\r\n  name: 'FlInputSearch',\r\n  inheritAttrs: false\r\n})\r\n\r\ntype ElInputExpose = {\r\n  blur: () => void\r\n  clear: () => void\r\n  focus: () => void\r\n}\r\n\r\nconst props = defineProps(flInputSearchProps)\r\nconst emit = defineEmits(flInputSearchEmits)\r\nconst ns = useNamespace('input-search')\r\n\r\nconst inputRef = ref<ElInputExpose | null>(null)\r\nconst innerLabel = ref(props.label)\r\nconst isLoading = ref(false)\r\nconst latestSearchToken = ref(0)\r\nconst lastValidLabel = ref(props.label)\r\nconst lastValidValue = ref<FlInputSearchValue>(props.modelValue)\r\n\r\nconst inputClass = computed(() => [\r\n  ns.b(),\r\n  {\r\n    'is-error': props.isError,\r\n    'is-table': props.isTable\r\n  }\r\n])\r\n\r\nconst searchTriggerClass = ns.e('trigger')\r\n\r\nconst normalizeLabel = (value: unknown): string => (typeof value === 'string' ? value : '')\r\n\r\nconst normalizeValue = (value: unknown): FlInputSearchValue => {\r\n  if (value === null || typeof value === 'string' || typeof value === 'number') {\r\n    return value\r\n  }\r\n\r\n  return null\r\n}\r\n\r\nconst syncSnapshot = (value: FlInputSearchValue, label: string) => {\r\n  lastValidValue.value = value\r\n  lastValidLabel.value = label\r\n}\r\n\r\nconst clearSelection = (reason: 'manual-empty' | 'blur-unconfirmed' | 'error') => {\r\n  innerLabel.value = ''\r\n  syncSnapshot(null, '')\r\n\r\n  emit('update:modelValue', null)\r\n  emit('update:label', '')\r\n  emit('clear', { reason })\r\n}\r\n\r\nconst commitSelection = (result: FlInputSearchMappedResult) => {\r\n  const nextValue = normalizeValue(result.value)\r\n  const nextLabel = normalizeLabel(result.label)\r\n\r\n  innerLabel.value = nextLabel\r\n  syncSnapshot(nextValue, nextLabel)\r\n\r\n  emit('update:modelValue', nextValue)\r\n  emit('update:label', nextLabel)\r\n  emit('selection-commit', {\r\n    value: nextValue,\r\n    label: nextLabel,\r\n    source: 'enter'\r\n  })\r\n}\r\n\r\nconst handleInput = (value: string) => {\r\n  const nextLabel = normalizeLabel(value)\r\n  innerLabel.value = nextLabel\r\n  emit('update:label', nextLabel)\r\n}\r\n\r\nconst handleManualSearch = () => {\r\n  emit('openDialog', {\r\n    keyword: innerLabel.value.trim(),\r\n    reason: 'manual'\r\n  })\r\n}\r\n\r\nconst handleEnter = async () => {\r\n  if (isLoading.value) {\r\n    return\r\n  }\r\n\r\n  const keyword = innerLabel.value.trim()\r\n  if (!keyword) {\r\n    return\r\n  }\r\n\r\n  if (!props.fetchApi) {\r\n    emit('openDialog', {\r\n      keyword,\r\n      reason: 'manual'\r\n    })\r\n    return\r\n  }\r\n\r\n  const currentToken = latestSearchToken.value + 1\r\n  latestSearchToken.value = currentToken\r\n  isLoading.value = true\r\n\r\n  try {\r\n    const response = await props.fetchApi(keyword)\r\n    if (currentToken !== latestSearchToken.value) {\r\n      return\r\n    }\r\n\r\n    const results = Array.isArray(response) ? response : []\r\n\r\n    if (results.length === 1) {\r\n      commitSelection(props.mapResult(results[0]))\r\n      return\r\n    }\r\n\r\n    if (results.length > 1) {\r\n      emit('openDialog', {\r\n        keyword,\r\n        reason: 'multi-match',\r\n        results\r\n      })\r\n    }\r\n  } catch (error) {\r\n    if (currentToken !== latestSearchToken.value) {\r\n      return\r\n    }\r\n\r\n    emit('search-error', {\r\n      keyword,\r\n      error\r\n    })\r\n  } finally {\r\n    if (currentToken === latestSearchToken.value) {\r\n      isLoading.value = false\r\n    }\r\n  }\r\n}\r\n\r\nconst handleNativeClear = () => {\r\n  clearSelection('manual-empty')\r\n}\r\n\r\nconst handleBlur = () => {\r\n  if (isLoading.value) {\r\n    return\r\n  }\r\n\r\n  const currentLabel = innerLabel.value\r\n  if (currentLabel === lastValidLabel.value) {\r\n    return\r\n  }\r\n\r\n  if (!currentLabel) {\r\n    clearSelection('manual-empty')\r\n    return\r\n  }\r\n\r\n  if (props.clearOnBlurUnconfirmed) {\r\n    clearSelection('blur-unconfirmed')\r\n  }\r\n}\r\n\r\nconst focus = () => {\r\n  inputRef.value?.focus()\r\n}\r\n\r\nconst blur = () => {\r\n  inputRef.value?.blur()\r\n}\r\n\r\nconst clear = () => {\r\n  inputRef.value?.clear()\r\n}\r\n\r\nwatch(\r\n  () => props.label,\r\n  (value) => {\r\n    innerLabel.value = value\r\n  }\r\n)\r\n\r\nwatch(\r\n  () => props.modelValue,\r\n  (value) => {\r\n    if (value === lastValidValue.value) {\r\n      return\r\n    }\r\n\r\n    syncSnapshot(normalizeValue(value), props.label)\r\n  }\r\n)\r\n\r\nwatch(\r\n  () => props.isError,\r\n  (isError, previousIsError) => {\r\n    if (isError && previousIsError !== true) {\r\n      clearSelection('error')\r\n    }\r\n  },\r\n  { immediate: true }\r\n)\r\n\r\ndefineExpose({\r\n  focus,\r\n  blur,\r\n  clear\r\n})\r\n</script>\r\n","import InputSearch from './src/input-search.vue'\r\nimport { withInstall } from '@falcon-ui/utils'\r\n\r\nexport const FlInputSearch = withInstall(InputSearch)\r\n\r\nexport default FlInputSearch\r\n\r\nexport type {\r\n  FlInputSearchClearPayload,\r\n  FlInputSearchEmits,\r\n  FlInputSearchFetchApi,\r\n  FlInputSearchMappedResult,\r\n  FlInputSearchMapResult,\r\n  FlInputSearchOpenDialogPayload,\r\n  FlInputSearchOpenDialogReason,\r\n  FlInputSearchProps,\r\n  FlInputSearchSearchErrorPayload,\r\n  FlInputSearchSelectionCommitPayload,\r\n  FlInputSearchValue,\r\n  InputSearchEmits,\r\n  InputSearchProps\r\n} from './src/input-search'\r\n"],"mappings":"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"}

package/esm/components/input-search/src/input-search.mjs

@@ -0,0 +1,53 @@
+const flInputSearchProps = {
+	modelValue: {
+		type: [String, Number],
+		default: null
+	},
+	label: {
+		type: String,
+		default: ""
+	},
+	fetchApi: {
+		type: Function,
+		default: void 0
+	},
+	mapResult: {
+		type: Function,
+		required: true
+	},
+	placeholder: {
+		type: String,
+		default: ""
+	},
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	clearable: {
+		type: Boolean,
+		default: false
+	},
+	isError: {
+		type: Boolean,
+		default: false
+	},
+	isTable: {
+		type: Boolean,
+		default: false
+	},
+	clearOnBlurUnconfirmed: {
+		type: Boolean,
+		default: true
+	}
+};
+const flInputSearchEmits = {
+	"update:modelValue": (value) => value === null || typeof value === "string" || typeof value === "number",
+	"update:label": (value) => typeof value === "string",
+	openDialog: (payload) => typeof payload.keyword === "string" && (payload.reason === "manual" || payload.reason === "multi-match") && (payload.results === void 0 || Array.isArray(payload.results)),
+	"selection-commit": (payload) => typeof payload.label === "string" && payload.source === "enter" && (payload.value === null || typeof payload.value === "string" || typeof payload.value === "number"),
+	"search-error": (payload) => typeof payload.keyword === "string",
+	clear: (payload) => payload.reason === "manual-empty" || payload.reason === "blur-unconfirmed" || payload.reason === "error"
+};
+export { flInputSearchEmits, flInputSearchProps };
+
+//# sourceMappingURL=input-search.mjs.map

package/esm/components/input-search/src/input-search.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-search.mjs","names":[],"sources":["../../../../../../packages/components/input-search/src/input-search.ts"],"sourcesContent":["import type { ExtractPublicPropTypes, PropType } from 'vue'\r\n\r\nexport type FlInputSearchValue = string | number | null\r\n\r\nexport interface FlInputSearchMappedResult {\r\n  label: string\r\n  value: FlInputSearchValue\r\n}\r\n\r\nexport type FlInputSearchFetchApi = (keyword: string) => Promise<unknown[]>\r\nexport type FlInputSearchMapResult = (item: unknown) => FlInputSearchMappedResult\r\n\r\nexport const flInputSearchProps = {\r\n  /**\r\n   * 绑定值，通常为业务实体 ID。\r\n   */\r\n  modelValue: {\r\n    type: [String, Number] as PropType<string | number | null>,\r\n    default: null\r\n  },\r\n  /**\r\n   * 输入框显示值（业务标签）。\r\n   */\r\n  label: {\r\n    type: String,\r\n    default: ''\r\n  },\r\n  /**\r\n   * 回车检索方法。\r\n   */\r\n  fetchApi: {\r\n    type: Function as PropType<FlInputSearchFetchApi>,\r\n    default: undefined\r\n  },\r\n  /**\r\n   * 外部结果映射方法，统一映射到 value/label。\r\n   */\r\n  mapResult: {\r\n    type: Function as PropType<FlInputSearchMapResult>,\r\n    required: true\r\n  },\r\n  /**\r\n   * 占位提示文案。\r\n   */\r\n  placeholder: {\r\n    type: String,\r\n    default: ''\r\n  },\r\n  /**\r\n   * 是否禁用输入。\r\n   */\r\n  disabled: {\r\n    type: Boolean,\r\n    default: false\r\n  },\r\n  /**\r\n   * 是否显示清空按钮。\r\n   */\r\n  clearable: {\r\n    type: Boolean,\r\n    default: false\r\n  },\r\n  /**\r\n   * 是否进入错误态。\r\n   */\r\n  isError: {\r\n    type: Boolean,\r\n    default: false\r\n  },\r\n  /**\r\n   * 是否用于表格单元格输入。\r\n   */\r\n  isTable: {\r\n    type: Boolean,\r\n    default: false\r\n  },\r\n  /**\r\n   * Blur 时未确认输入是否强制清空。\r\n   */\r\n  clearOnBlurUnconfirmed: {\r\n    type: Boolean,\r\n    default: true\r\n  }\r\n} as const\r\n\r\nexport type FlInputSearchOpenDialogReason = 'manual' | 'multi-match'\r\n\r\nexport interface FlInputSearchOpenDialogPayload {\r\n  keyword: string\r\n  reason: FlInputSearchOpenDialogReason\r\n  results?: unknown[]\r\n}\r\n\r\nexport interface FlInputSearchSelectionCommitPayload {\r\n  label: string\r\n  source: 'enter'\r\n  value: FlInputSearchValue\r\n}\r\n\r\nexport interface FlInputSearchSearchErrorPayload {\r\n  error: unknown\r\n  keyword: string\r\n}\r\n\r\nexport interface FlInputSearchClearPayload {\r\n  reason: 'manual-empty' | 'blur-unconfirmed' | 'error'\r\n}\r\n\r\nexport const flInputSearchEmits = {\r\n  /**\r\n   * 绑定值更新事件。\r\n   */\r\n  'update:modelValue': (value: FlInputSearchValue) =>\r\n    value === null || typeof value === 'string' || typeof value === 'number',\r\n  /**\r\n   * 显示值更新事件。\r\n   */\r\n  'update:label': (value: string) => typeof value === 'string',\r\n  /**\r\n   * 触发外部弹窗占位事件。\r\n   */\r\n  openDialog: (payload: FlInputSearchOpenDialogPayload) =>\r\n    typeof payload.keyword === 'string' &&\r\n    (payload.reason === 'manual' || payload.reason === 'multi-match') &&\r\n    (payload.results === undefined || Array.isArray(payload.results)),\r\n  /**\r\n   * 唯一结果选中提交事件。\r\n   */\r\n  'selection-commit': (payload: FlInputSearchSelectionCommitPayload) =>\r\n    typeof payload.label === 'string' &&\r\n    payload.source === 'enter' &&\r\n    (payload.value === null ||\r\n      typeof payload.value === 'string' ||\r\n      typeof payload.value === 'number'),\r\n  /**\r\n   * 回车检索失败事件。\r\n   */\r\n  'search-error': (payload: FlInputSearchSearchErrorPayload) => typeof payload.keyword === 'string',\r\n  /**\r\n   * 清空行为事件。\r\n   */\r\n  clear: (payload: FlInputSearchClearPayload) =>\r\n    payload.reason === 'manual-empty' ||\r\n    payload.reason === 'blur-unconfirmed' ||\r\n    payload.reason === 'error'\r\n} as const\r\n\r\nexport type FlInputSearchProps = ExtractPublicPropTypes<typeof flInputSearchProps>\r\nexport type FlInputSearchEmits = typeof flInputSearchEmits\r\n\r\nexport type InputSearchProps = FlInputSearchProps\r\nexport type InputSearchEmits = FlInputSearchEmits\r\n"],"mappings":"AAYA,MAAa,qBAAqB;CAIhC,YAAY;EACV,MAAM,CAAC,QAAQ,OAAO;EACtB,SAAS;EACV;CAID,OAAO;EACL,MAAM;EACN,SAAS;EACV;CAID,UAAU;EACR,MAAM;EACN,SAAS,KAAA;EACV;CAID,WAAW;EACT,MAAM;EACN,UAAU;EACX;CAID,aAAa;EACX,MAAM;EACN,SAAS;EACV;CAID,UAAU;EACR,MAAM;EACN,SAAS;EACV;CAID,WAAW;EACT,MAAM;EACN,SAAS;EACV;CAID,SAAS;EACP,MAAM;EACN,SAAS;EACV;CAID,SAAS;EACP,MAAM;EACN,SAAS;EACV;CAID,wBAAwB;EACtB,MAAM;EACN,SAAS;EACV;CACF;AAyBD,MAAa,qBAAqB;CAIhC,sBAAsB,UACpB,UAAU,QAAQ,OAAO,UAAU,YAAY,OAAO,UAAU;CAIlE,iBAAiB,UAAkB,OAAO,UAAU;CAIpD,aAAa,YACX,OAAO,QAAQ,YAAY,aAC1B,QAAQ,WAAW,YAAY,QAAQ,WAAW,mBAClD,QAAQ,YAAY,KAAA,KAAa,MAAM,QAAQ,QAAQ,QAAQ;CAIlE,qBAAqB,YACnB,OAAO,QAAQ,UAAU,YACzB,QAAQ,WAAW,YAClB,QAAQ,UAAU,QACjB,OAAO,QAAQ,UAAU,YACzB,OAAO,QAAQ,UAAU;CAI7B,iBAAiB,YAA6C,OAAO,QAAQ,YAAY;CAIzF,QAAQ,YACN,QAAQ,WAAW,kBACnB,QAAQ,WAAW,sBACnB,QAAQ,WAAW;CACtB"}

package/esm/components/input-search/src/input-search.vue.mjs

@@ -0,0 +1,268 @@
+import { computed, createBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, unref, watch, withCtx, withKeys, withModifiers } from "vue";
+import { Loading, Search } from "@element-plus/icons-vue";
+import { ElIcon, ElInput } from "element-plus";
+var defaultNamespace = "fl";
+var statePrefix = "is-";
+var buildBemName = (namespace, block, blockSuffix = "", element = "", modifier = "") => {
+	let className = `${namespace}-${block}`;
+	if (blockSuffix) className += `-${blockSuffix}`;
+	if (element) className += `__${element}`;
+	if (modifier) className += `--${modifier}`;
+	return className;
+};
+const useNamespace = (block, namespace = defaultNamespace) => {
+	const b = (blockSuffix = "") => buildBemName(namespace, block, blockSuffix);
+	const e = (element) => element ? buildBemName(namespace, block, "", element) : "";
+	const m = (modifier) => modifier ? buildBemName(namespace, block, "", "", modifier) : "";
+	const be = (blockSuffix, element) => {
+		if (!blockSuffix || !element) return "";
+		return buildBemName(namespace, block, blockSuffix, element);
+	};
+	const em = (element, modifier) => {
+		if (!element || !modifier) return "";
+		return buildBemName(namespace, block, "", element, modifier);
+	};
+	const bm = (blockSuffix, modifier) => {
+		if (!blockSuffix || !modifier) return "";
+		return buildBemName(namespace, block, blockSuffix, "", modifier);
+	};
+	const bem = (blockSuffix, element, modifier) => {
+		if (!blockSuffix && !element && !modifier) return b();
+		return buildBemName(namespace, block, blockSuffix, element, modifier);
+	};
+	const is = (name, state = true) => state ? `${statePrefix}${name}` : "";
+	return {
+		namespace,
+		b,
+		e,
+		m,
+		be,
+		em,
+		bm,
+		bem,
+		is
+	};
+};
+var input_search_default = /* @__PURE__ */ defineComponent({
+	name: "FlInputSearch",
+	inheritAttrs: false,
+	__name: "input-search",
+	props: {
+		modelValue: {
+			type: [String, Number],
+			default: null
+		},
+		label: {
+			type: String,
+			default: ""
+		},
+		fetchApi: {
+			type: Function,
+			default: void 0
+		},
+		mapResult: {
+			type: Function,
+			required: true
+		},
+		placeholder: {
+			type: String,
+			default: ""
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		isError: {
+			type: Boolean,
+			default: false
+		},
+		isTable: {
+			type: Boolean,
+			default: false
+		},
+		clearOnBlurUnconfirmed: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: {
+		"update:modelValue": (value) => value === null || typeof value === "string" || typeof value === "number",
+		"update:label": (value) => typeof value === "string",
+		openDialog: (payload) => typeof payload.keyword === "string" && (payload.reason === "manual" || payload.reason === "multi-match") && (payload.results === void 0 || Array.isArray(payload.results)),
+		"selection-commit": (payload) => typeof payload.label === "string" && payload.source === "enter" && (payload.value === null || typeof payload.value === "string" || typeof payload.value === "number"),
+		"search-error": (payload) => typeof payload.keyword === "string",
+		clear: (payload) => payload.reason === "manual-empty" || payload.reason === "blur-unconfirmed" || payload.reason === "error"
+	},
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const ns = useNamespace("input-search");
+		const inputRef = ref(null);
+		const innerLabel = ref(props.label);
+		const isLoading = ref(false);
+		const latestSearchToken = ref(0);
+		const lastValidLabel = ref(props.label);
+		const lastValidValue = ref(props.modelValue);
+		const inputClass = computed(() => [ns.b(), {
+			"is-error": props.isError,
+			"is-table": props.isTable
+		}]);
+		const searchTriggerClass = ns.e("trigger");
+		const normalizeLabel = (value) => typeof value === "string" ? value : "";
+		const normalizeValue = (value) => {
+			if (value === null || typeof value === "string" || typeof value === "number") return value;
+			return null;
+		};
+		const syncSnapshot = (value, label) => {
+			lastValidValue.value = value;
+			lastValidLabel.value = label;
+		};
+		const clearSelection = (reason) => {
+			innerLabel.value = "";
+			syncSnapshot(null, "");
+			emit("update:modelValue", null);
+			emit("update:label", "");
+			emit("clear", { reason });
+		};
+		const commitSelection = (result) => {
+			const nextValue = normalizeValue(result.value);
+			const nextLabel = normalizeLabel(result.label);
+			innerLabel.value = nextLabel;
+			syncSnapshot(nextValue, nextLabel);
+			emit("update:modelValue", nextValue);
+			emit("update:label", nextLabel);
+			emit("selection-commit", {
+				value: nextValue,
+				label: nextLabel,
+				source: "enter"
+			});
+		};
+		const handleInput = (value) => {
+			const nextLabel = normalizeLabel(value);
+			innerLabel.value = nextLabel;
+			emit("update:label", nextLabel);
+		};
+		const handleManualSearch = () => {
+			emit("openDialog", {
+				keyword: innerLabel.value.trim(),
+				reason: "manual"
+			});
+		};
+		const handleEnter = async () => {
+			if (isLoading.value) return;
+			const keyword = innerLabel.value.trim();
+			if (!keyword) return;
+			if (!props.fetchApi) {
+				emit("openDialog", {
+					keyword,
+					reason: "manual"
+				});
+				return;
+			}
+			const currentToken = latestSearchToken.value + 1;
+			latestSearchToken.value = currentToken;
+			isLoading.value = true;
+			try {
+				const response = await props.fetchApi(keyword);
+				if (currentToken !== latestSearchToken.value) return;
+				const results = Array.isArray(response) ? response : [];
+				if (results.length === 1) {
+					commitSelection(props.mapResult(results[0]));
+					return;
+				}
+				if (results.length > 1) emit("openDialog", {
+					keyword,
+					reason: "multi-match",
+					results
+				});
+			} catch (error) {
+				if (currentToken !== latestSearchToken.value) return;
+				emit("search-error", {
+					keyword,
+					error
+				});
+			} finally {
+				if (currentToken === latestSearchToken.value) isLoading.value = false;
+			}
+		};
+		const handleNativeClear = () => {
+			clearSelection("manual-empty");
+		};
+		const handleBlur = () => {
+			if (isLoading.value) return;
+			const currentLabel = innerLabel.value;
+			if (currentLabel === lastValidLabel.value) return;
+			if (!currentLabel) {
+				clearSelection("manual-empty");
+				return;
+			}
+			if (props.clearOnBlurUnconfirmed) clearSelection("blur-unconfirmed");
+		};
+		const focus = () => {
+			inputRef.value?.focus();
+		};
+		const blur = () => {
+			inputRef.value?.blur();
+		};
+		const clear = () => {
+			inputRef.value?.clear();
+		};
+		watch(() => props.label, (value) => {
+			innerLabel.value = value;
+		});
+		watch(() => props.modelValue, (value) => {
+			if (value === lastValidValue.value) return;
+			syncSnapshot(normalizeValue(value), props.label);
+		});
+		watch(() => props.isError, (isError, previousIsError) => {
+			if (isError && previousIsError !== true) clearSelection("error");
+		}, { immediate: true });
+		__expose({
+			focus,
+			blur,
+			clear
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ElInput), {
+				ref_key: "inputRef",
+				ref: inputRef,
+				class: normalizeClass(inputClass.value),
+				clearable: props.clearable,
+				disabled: props.disabled || isLoading.value,
+				"model-value": innerLabel.value,
+				placeholder: props.placeholder,
+				onBlur: handleBlur,
+				onClear: handleNativeClear,
+				onKeydown: withKeys(withModifiers(handleEnter, ["prevent"]), ["enter"]),
+				"onUpdate:modelValue": handleInput
+			}, {
+				suffix: withCtx(() => [createElementVNode("span", {
+					class: normalizeClass(unref(searchTriggerClass)),
+					"aria-label": "Search",
+					role: "button",
+					tabindex: "-1",
+					onClick: handleManualSearch,
+					onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"]))
+				}, [createVNode(unref(ElIcon), { class: normalizeClass(unref(ns).is("loading", isLoading.value)) }, {
+					default: withCtx(() => [isLoading.value ? (openBlock(), createBlock(unref(Loading), { key: 0 })) : (openBlock(), createBlock(unref(Search), { key: 1 }))]),
+					_: 1
+				}, 8, ["class"])], 34)]),
+				_: 1
+			}, 8, [
+				"class",
+				"clearable",
+				"disabled",
+				"model-value",
+				"placeholder",
+				"onKeydown"
+			]);
+		};
+	}
+});
+export { input_search_default as default };
+
+//# sourceMappingURL=input-search.vue.mjs.map