122 lines
3.9 KiB
JavaScript
122 lines
3.9 KiB
JavaScript
import { ref, defineComponent, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
|
|
import { pick, extend, truthProp, preventDefault, makeStringProp, createNamespace } from "../utils/index.mjs";
|
|
import { fieldSharedProps } from "../field/Field.mjs";
|
|
import { useId } from "../composables/use-id.mjs";
|
|
import { useExpose } from "../composables/use-expose.mjs";
|
|
import { Field } from "../field/index.mjs";
|
|
const [name, bem, t] = createNamespace("search");
|
|
const searchProps = extend({}, fieldSharedProps, {
|
|
label: String,
|
|
shape: makeStringProp("square"),
|
|
leftIcon: makeStringProp("search"),
|
|
clearable: truthProp,
|
|
actionText: String,
|
|
background: String,
|
|
showAction: Boolean
|
|
});
|
|
var stdin_default = defineComponent({
|
|
name,
|
|
props: searchProps,
|
|
emits: ["blur", "focus", "clear", "search", "cancel", "clickInput", "clickLeftIcon", "clickRightIcon", "update:modelValue"],
|
|
setup(props, {
|
|
emit,
|
|
slots,
|
|
attrs
|
|
}) {
|
|
const id = useId();
|
|
const fieldRef = ref();
|
|
const onCancel = () => {
|
|
if (!slots.action) {
|
|
emit("update:modelValue", "");
|
|
emit("cancel");
|
|
}
|
|
};
|
|
const onKeypress = (event) => {
|
|
const ENTER_CODE = 13;
|
|
if (event.keyCode === ENTER_CODE) {
|
|
preventDefault(event);
|
|
emit("search", props.modelValue);
|
|
}
|
|
};
|
|
const getInputId = () => props.id || `${id}-input`;
|
|
const renderLabel = () => {
|
|
if (slots.label || props.label) {
|
|
return _createVNode("label", {
|
|
"class": bem("label"),
|
|
"for": getInputId(),
|
|
"data-allow-mismatch": "attribute"
|
|
}, [slots.label ? slots.label() : props.label]);
|
|
}
|
|
};
|
|
const renderAction = () => {
|
|
if (props.showAction) {
|
|
const text = props.actionText || t("cancel");
|
|
return _createVNode("div", {
|
|
"class": bem("action"),
|
|
"role": "button",
|
|
"tabindex": 0,
|
|
"onClick": onCancel
|
|
}, [slots.action ? slots.action() : text]);
|
|
}
|
|
};
|
|
const blur = () => {
|
|
var _a;
|
|
return (_a = fieldRef.value) == null ? void 0 : _a.blur();
|
|
};
|
|
const focus = () => {
|
|
var _a;
|
|
return (_a = fieldRef.value) == null ? void 0 : _a.focus();
|
|
};
|
|
const onBlur = (event) => emit("blur", event);
|
|
const onFocus = (event) => emit("focus", event);
|
|
const onClear = (event) => emit("clear", event);
|
|
const onClickInput = (event) => emit("clickInput", event);
|
|
const onClickLeftIcon = (event) => emit("clickLeftIcon", event);
|
|
const onClickRightIcon = (event) => emit("clickRightIcon", event);
|
|
const fieldPropNames = Object.keys(fieldSharedProps);
|
|
const renderField = () => {
|
|
const fieldAttrs = extend({}, attrs, pick(props, fieldPropNames), {
|
|
id: getInputId()
|
|
});
|
|
const onInput = (value) => emit("update:modelValue", value);
|
|
return _createVNode(Field, _mergeProps({
|
|
"ref": fieldRef,
|
|
"type": "search",
|
|
"class": bem("field", {
|
|
"with-message": fieldAttrs.errorMessage
|
|
}),
|
|
"border": false,
|
|
"onBlur": onBlur,
|
|
"onFocus": onFocus,
|
|
"onClear": onClear,
|
|
"onKeypress": onKeypress,
|
|
"onClickInput": onClickInput,
|
|
"onClickLeftIcon": onClickLeftIcon,
|
|
"onClickRightIcon": onClickRightIcon,
|
|
"onUpdate:modelValue": onInput
|
|
}, fieldAttrs), pick(slots, ["left-icon", "right-icon"]));
|
|
};
|
|
useExpose({
|
|
focus,
|
|
blur
|
|
});
|
|
return () => {
|
|
var _a;
|
|
return _createVNode("div", {
|
|
"class": bem({
|
|
"show-action": props.showAction
|
|
}),
|
|
"style": {
|
|
background: props.background
|
|
}
|
|
}, [(_a = slots.left) == null ? void 0 : _a.call(slots), _createVNode("div", {
|
|
"class": bem("content", props.shape)
|
|
}, [renderLabel(), renderField()]), renderAction()]);
|
|
};
|
|
}
|
|
});
|
|
export {
|
|
stdin_default as default,
|
|
searchProps
|
|
};
|