@falcon-ui/falcon-ui 1.0.0

package/cjs/components/input-search/src/input-search.vue.cjs

@@ -0,0 +1,275 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+let vue = require("vue");
+let __element_plus_icons_vue = require("@element-plus/icons-vue");
+let element_plus = require("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 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"
+};
+var input_search_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "FlInputSearch",
+	inheritAttrs: false,
+	__name: "input-search",
+	props: flInputSearchProps,
+	emits: flInputSearchEmits,
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const ns = useNamespace("input-search");
+		const inputRef = (0, vue.ref)(null);
+		const innerLabel = (0, vue.ref)(props.label);
+		const isLoading = (0, vue.ref)(false);
+		const latestSearchToken = (0, vue.ref)(0);
+		const lastValidLabel = (0, vue.ref)(props.label);
+		const lastValidValue = (0, vue.ref)(props.modelValue);
+		const inputClass = (0, vue.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();
+		};
+		(0, vue.watch)(() => props.label, (value) => {
+			innerLabel.value = value;
+		});
+		(0, vue.watch)(() => props.modelValue, (value) => {
+			if (value === lastValidValue.value) return;
+			syncSnapshot(normalizeValue(value), props.label);
+		});
+		(0, vue.watch)(() => props.isError, (isError, previousIsError) => {
+			if (isError && previousIsError !== true) clearSelection("error");
+		}, { immediate: true });
+		__expose({
+			focus,
+			blur,
+			clear
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(element_plus.ElInput), {
+				ref_key: "inputRef",
+				ref: inputRef,
+				class: (0, vue.normalizeClass)(inputClass.value),
+				clearable: props.clearable,
+				disabled: props.disabled || isLoading.value,
+				"model-value": innerLabel.value,
+				placeholder: props.placeholder,
+				onBlur: handleBlur,
+				onClear: handleNativeClear,
+				onKeydown: (0, vue.withKeys)((0, vue.withModifiers)(handleEnter, ["prevent"]), ["enter"]),
+				"onUpdate:modelValue": handleInput
+			}, {
+				suffix: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", {
+					class: (0, vue.normalizeClass)((0, vue.unref)(searchTriggerClass)),
+					"aria-label": "Search",
+					role: "button",
+					tabindex: "-1",
+					onClick: handleManualSearch,
+					onMousedown: _cache[0] || (_cache[0] = (0, vue.withModifiers)(() => {}, ["prevent"]))
+				}, [(0, vue.createVNode)((0, vue.unref)(element_plus.ElIcon), { class: (0, vue.normalizeClass)((0, vue.unref)(ns).is("loading", isLoading.value)) }, {
+					default: (0, vue.withCtx)(() => [isLoading.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(__element_plus_icons_vue.Loading), { key: 0 })) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(__element_plus_icons_vue.Search), { key: 1 }))]),
+					_: 1
+				}, 8, ["class"])], 34)]),
+				_: 1
+			}, 8, [
+				"class",
+				"clearable",
+				"disabled",
+				"model-value",
+				"placeholder",
+				"onKeydown"
+			]);
+		};
+	}
+});
+var input_search_default = input_search_vue_vue_type_script_setup_true_lang_default;
+exports.default = input_search_default;
+
+//# sourceMappingURL=input-search.vue.cjs.map

package/cjs/components/input-search/src/input-search.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-search.vue.cjs","names":[],"sources":["../../../../../../packages/utils/src/bem.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"],"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 { 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"],"mappings":"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"}