code-monkey-ui
Version:
A Component Library for Vue 3
367 lines (364 loc) • 14.7 kB
JavaScript
import { createTextVNode, defineComponent, reactive, toRef, useAttrs, ref, nextTick, onMounted, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createVNode, mergeProps, withCtx, renderSlot, createCommentVNode, createElementVNode, toDisplayString, Fragment, renderList, createBlock, withModifiers, withKeys, withDirectives, vShow } from 'vue';
import { Search, Operation } from '@element-plus/icons-vue';
import { ElMessage } from '../../message/index.mjs';
import { ElInput } from '../../input/index.mjs';
import { ElScrollbar } from '../../scrollbar/index.mjs';
import { ElSelect, ElOption } from '../../select/index.mjs';
import { ElIcon } from '../../icon/index.mjs';
import { ElPopover } from '../../popover/index.mjs';
import { ElButton } from '../../button/index.mjs';
import { ElTag } from '../../tag/index.mjs';
import '../../../hooks/index.mjs';
import { batchProps, batchEmits } from './batch.mjs';
import { useBatch } from './use-batch.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
const _hoisted_1 = /* @__PURE__ */ createTextVNode("\u6E05\u7A7A");
const _hoisted_2 = /* @__PURE__ */ createTextVNode("\u5173\u95ED");
const _hoisted_3 = /* @__PURE__ */ createTextVNode("\u641C\u7D22");
const __default__ = defineComponent({
name: "ElBatch"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: batchProps,
emits: batchEmits,
setup(__props, { expose, emit }) {
var _a;
const props = __props;
const useSize = reactive({
size: toRef(props, "size")
});
const ns = useNamespace("batch");
const { disabled, _size } = useBatch(props, useSize.size);
const userAttrs = useAttrs();
const textareaRef = ref();
const userAttrsCopy = reactive({ ...userAttrs });
delete userAttrsCopy.size;
delete userAttrsCopy.prefixIcon;
delete userAttrsCopy.suffixIcon;
delete userAttrsCopy.rows;
delete userAttrsCopy.readonly;
delete userAttrsCopy.tabindex;
delete userAttrsCopy.modelValue;
delete userAttrsCopy.resize;
delete userAttrsCopy.autosize;
delete userAttrsCopy.type;
const inputRef = ref(null);
const selectRef = ref(null);
const tooltipVisible = ref(false);
const optionValue = ref((_a = props.options[0]) == null ? void 0 : _a.value);
const selectWidth = ref(0);
const searchValue = ref("");
const inputValue = ref("");
const selectedLabel = ref("");
const multipleSearchValue = ref([]);
const tagShow = ref(false);
const handleEnterKey = (event) => {
const lines = inputValue.value.split("\n");
const lastLine = lines[lines.length - 1];
nextTick(() => {
var _a2;
const textarea = (_a2 = textareaRef.value) == null ? void 0 : _a2.textarea;
textarea.selectionStart = textarea.selectionEnd = textarea.value.length;
});
if (!lastLine.trim() || lines.length >= props.rows) {
event.preventDefault();
}
};
const handleTextareaInput = (value) => {
const inputElement = textareaRef.value.$el.querySelector("textarea");
inputElement.addEventListener("paste", preventPaste);
const lines = value.split("\n");
const nonEmptyLines = lines.filter((line) => line.trim() !== "");
if (nonEmptyLines.length >= props.rows) {
inputValue.value = lines.slice(0, props.rows).join("\n");
} else {
inputElement.removeEventListener("paste", preventPaste);
}
};
const preventPaste = (event) => {
event.preventDefault();
};
const handleFocus = () => {
handleClose();
nextTick(() => {
inputRef.value.blur();
inputRef.value.focus();
});
};
const changeOption = (value) => {
handleClose();
emit("optionsChange", value);
};
const handleSearch = () => {
if (disabled.value)
return;
emit("search", {
searchValue: searchValue.value,
optionValue: optionValue.value
});
};
const handleClear = () => {
handleBlur();
inputValue.value = "";
emit("clearMultipleValue");
};
const handleClose = () => {
tooltipVisible.value = false;
};
const handleBlur = () => {
const focusElement = inputRef.value.$el.querySelector(".is-focus");
const activeElement = document.activeElement;
activeElement == null ? void 0 : activeElement.blur();
if (focusElement) {
focusElement.classList.remove("is-focus");
}
};
const handleMultipleSearch = () => {
handleBlur();
handleClose();
handleMultipleSearchData();
nextTick(() => {
selectedLabel.value = selectRef.value.selectedLabel;
});
emit("multipleSearch", {
multipleSearchValue: multipleSearchValue.value,
optionsValue: optionValue.value
});
};
const handleMultipleSearchData = () => {
const data = inputValue.value.split("\n").map((item) => item.trim()).filter(Boolean);
multipleSearchValue.value = [...new Set(data)];
if (data.length > multipleSearchValue.value.length) {
ElMessage.warning("\u6709\u91CD\u590D\u6570\u636E,\u5DF2\u81EA\u52A8\u53BB\u91CD");
}
inputValue.value = multipleSearchValue.value.join("\n");
if (props.needTag) {
tagShow.value = true;
}
return multipleSearchValue.value;
};
const showTooltip = () => {
var _a2;
if (disabled.value)
return;
handleBlur();
selectWidth.value = (_a2 = selectRef.value) == null ? void 0 : _a2.$el.offsetWidth;
tooltipVisible.value = !tooltipVisible.value;
};
const handleCloseTag = () => {
tagShow.value = false;
};
const clear = () => {
var _a2;
multipleSearchValue.value = [];
optionValue.value = (_a2 = props.options[0]) == null ? void 0 : _a2.value;
searchValue.value = "";
};
onMounted(() => {
var _a2;
changeOption(optionValue.value);
if (disabled.value)
return;
selectWidth.value = (_a2 = selectRef.value) == null ? void 0 : _a2.$el.offsetWidth;
});
expose({
size: props.size,
getFullData: () => {
return {
multipleSearchValue: handleMultipleSearchData(),
optionsValue: optionValue.value,
searchValue: searchValue.value
};
},
clear
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass([unref(ns).b(), unref(ns).is("disabled", unref(disabled)), unref(ns).m(unref(_size))]),
style: normalizeStyle({ "max-width": _ctx.width + "px" })
}, [
createVNode(unref(ElInput), mergeProps({
ref_key: "inputRef",
ref: inputRef,
modelValue: searchValue.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => searchValue.value = $event),
clearable: ""
}, userAttrsCopy, {
disabled: unref(disabled),
class: unref(ns).e("input"),
style: { width: _ctx.width + "px" },
onClick: handleFocus
}), {
prepend: withCtx(() => [
_ctx.$slots.prepend ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(unref(ns).e("prepend"))
}, [
renderSlot(_ctx.$slots, "prepend")
], 2)) : createCommentVNode("v-if", true),
createVNode(unref(ElSelect), {
ref_key: "selectRef",
ref: selectRef,
modelValue: optionValue.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => optionValue.value = $event),
style: { "height": "100%" },
class: normalizeClass([unref(ns).e("select"), unref(ns).is("disabled", unref(disabled))]),
disabled: unref(disabled),
onChange: changeOption
}, {
prefix: withCtx(() => {
var _a2, _b;
return [
createElementVNode("span", {
class: normalizeClass(unref(ns).is("empty", _ctx.options.length <= 0))
}, toDisplayString((_b = (_a2 = _ctx.options.find((s) => s.value === optionValue.value)) == null ? void 0 : _a2.label) != null ? _b : _ctx.emptyText), 3)
];
}),
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (item) => {
return openBlock(), createBlock(unref(ElOption), {
key: item.value,
label: item[_ctx.labelValue.label],
value: item[_ctx.labelValue.value]
}, null, 8, ["label", "value"]);
}), 128))
]),
_: 1
}, 8, ["modelValue", "class", "disabled"])
]),
suffix: withCtx(() => [
createVNode(unref(ElIcon), {
class: normalizeClass(unref(ns).e("batch-icon")),
onClick: withModifiers(handleSearch, ["stop"])
}, {
default: withCtx(() => [
createVNode(unref(Search))
]),
_: 1
}, 8, ["class", "onClick"]),
createVNode(unref(ElPopover), {
effect: "light",
placement: "bottom-end",
"popper-class": unref(ns).e("batch-popper"),
class: normalizeClass(unref(ns).e("batch-tooltip")),
visible: tooltipVisible.value,
offset: 20,
width: Number(_ctx.width) - selectWidth.value
}, {
reference: withCtx(() => [
createVNode(unref(ElIcon), {
class: normalizeClass(unref(ns).e("tooltip-icon")),
onClick: withModifiers(showTooltip, ["stop"])
}, {
default: withCtx(() => [
createVNode(unref(Operation))
]),
_: 1
}, 8, ["class", "onClick"])
]),
default: withCtx(() => [
createVNode(unref(ElInput), {
ref_key: "textareaRef",
ref: textareaRef,
modelValue: inputValue.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => inputValue.value = $event),
resize: "none",
autosize: { minRows: _ctx.minRows, maxRows: 12 },
class: normalizeClass(unref(ns).e("textarea")),
placeholder: "\u7CBE\u786E\u641C\u7D22\uFF0C\u4E00\u884C\u4E00\u9879\uFF0C\u6700\u591A\u652F\u6301" + _ctx.rows + "\u884C",
type: "textarea",
onKeydown: withKeys(handleEnterKey, ["enter"]),
onInput: handleTextareaInput
}, null, 8, ["modelValue", "autosize", "class", "placeholder", "onKeydown"]),
createElementVNode("div", {
class: normalizeClass(unref(ns).e("controls"))
}, [
createVNode(unref(ElButton), {
size: "small",
plain: "",
onClick: withModifiers(handleClear, ["stop"])
}, {
default: withCtx(() => [
_hoisted_1
]),
_: 1
}, 8, ["onClick"]),
createElementVNode("div", null, [
createVNode(unref(ElButton), {
size: "small",
plain: "",
onClick: withModifiers(handleClose, ["stop"])
}, {
default: withCtx(() => [
_hoisted_2
]),
_: 1
}, 8, ["onClick"]),
createVNode(unref(ElButton), {
size: "small",
class: normalizeClass(unref(ns).e("search-button")),
plain: "",
onClick: withModifiers(handleMultipleSearch, ["stop"])
}, {
default: withCtx(() => [
_hoisted_3
]),
_: 1
}, 8, ["class", "onClick"])
])
], 2)
]),
_: 1
}, 8, ["popper-class", "class", "visible", "width"])
]),
_: 3
}, 16, ["modelValue", "disabled", "class", "style"]),
withDirectives(createElementVNode("div", {
class: normalizeClass(unref(ns).e("tag"))
}, [
createVNode(unref(ElPopover), {
width: Number(_ctx.width) - selectWidth.value,
"popper-class": unref(ns).e("batch-popper"),
effect: "light",
placement: "bottom-start"
}, {
reference: withCtx(() => [
createVNode(unref(ElTag), {
closable: "",
onClose: handleCloseTag
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(selectedLabel.value) + "\uFF1A" + toDisplayString(multipleSearchValue.value.slice(0, 3).join(", ")) + " \u7B49" + toDisplayString(multipleSearchValue.value.length) + "\u9879 ", 1)
]),
_: 1
})
]),
default: withCtx(() => [
createElementVNode("div", {
class: normalizeClass(unref(ns).e("tag-content")),
style: normalizeStyle({ "min-width": Number(_ctx.width) - selectWidth.value + "px" })
}, [
createVNode(unref(ElScrollbar), null, {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(multipleSearchValue.value, (item) => {
return openBlock(), createElementBlock("p", { key: item }, toDisplayString(item), 1);
}), 128))
]),
_: 1
})
], 6)
]),
_: 1
}, 8, ["width", "popper-class"])
], 2), [
[vShow, tagShow.value]
])
], 6);
};
}
});
var Batch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "D:\\project\\work\\code-monkey-ui\\packages\\components\\batch\\src\\batch.vue"]]);
export { Batch as default };
//# sourceMappingURL=batch2.mjs.map