@oiij/naive-ui
Version:
Some Composable Functions And Components for Vue 3
85 lines (83 loc) • 3.39 kB
JavaScript
import MageSearch_default from "../icons/MageSearch.js";
import { useDebounceFn, useTimeoutFn } from "@vueuse/core";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createSlots, createTextVNode, createVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, unref, useTemplateRef, watch, watchEffect, withCtx } from "vue";
import { NButton, NInput, NInputGroup } from "naive-ui";
//#region src/components/search-input/SearchInput.vue
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "SearchInput",
props: {
value: {},
type: {},
placeholder: { default: "Type A Search" },
loading: { type: Boolean },
autoTrigger: {
type: [Boolean, Number],
default: true
},
searchButton: { type: [String, Boolean] },
inputProps: {},
buttonProps: {}
},
emits: ["update:value"],
setup(__props, { emit: __emit }) {
const emit = __emit;
const inputRef = useTemplateRef("input-ref");
const _value = ref(__props.value ?? null);
const _searchButtonType = computed(() => typeof __props.searchButton === "boolean" ? "text" : __props.searchButton);
const { start } = useTimeoutFn(() => {}, typeof __props.autoTrigger === "number" ? __props.autoTrigger : 500);
watchEffect(() => {
_value.value = __props.value ?? null;
});
const debounceEmit = useDebounceFn(() => {
emit("update:value", _value.value);
}, typeof __props.autoTrigger === "number" ? __props.autoTrigger : 500);
watch(_value, () => {
start();
if (__props.autoTrigger) debounceEmit();
});
function handleClick() {
emit("update:value", _value.value);
}
function handleKeyDown(e) {
if (e.key === "Enter") handleClick();
}
watchEffect(() => {
if (!__props.loading && _value.value) inputRef.value?.focus();
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(NInputGroup), null, {
default: withCtx(() => [createVNode(unref(NInput), mergeProps({
ref: "input-ref",
value: _value.value,
"onUpdate:value": _cache[0] || (_cache[0] = ($event) => _value.value = $event),
clearable: "",
placeholder: __props.placeholder
}, __props.inputProps, { onKeydown: handleKeyDown }), {
prefix: withCtx(() => [renderSlot(_ctx.$slots, "prefix", {}, () => [renderSlot(_ctx.$slots, "prefix-icon", {}, () => [createVNode(MageSearch_default, { style: {
"width": "18px",
"height": "18px"
} })])])]),
_: 3
}, 16, ["value", "placeholder"]), renderSlot(_ctx.$slots, "button", {
value: __props.value,
loading: __props.loading
}, () => [_searchButtonType.value ? (openBlock(), createBlock(unref(NButton), mergeProps({
key: 0,
type: __props.type,
loading: __props.loading
}, __props.buttonProps, { onClick: handleClick }), createSlots({
default: withCtx(() => [_searchButtonType.value === "text" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(" 搜索 ")], 64)) : createCommentVNode("v-if", true)]),
_: 2
}, [_searchButtonType.value === "icon" ? {
name: "icon",
fn: withCtx(() => [renderSlot(_ctx.$slots, "button-icon", {}, () => [createVNode(MageSearch_default)])]),
key: "0"
} : void 0]), 1040, ["type", "loading"])) : createCommentVNode("v-if", true)])]),
_: 3
});
};
}
});
var SearchInput_default = _sfc_main;
//#endregion
export { SearchInput_default as default };