code-monkey-ui
Version:
A Component Library for Vue 3
371 lines (366 loc) • 15.1 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var iconsVue = require('@element-plus/icons-vue');
var index$1 = require('../../message/index.js');
var index$2 = require('../../input/index.js');
var index$8 = require('../../scrollbar/index.js');
var index$3 = require('../../select/index.js');
var index$4 = require('../../icon/index.js');
var index$5 = require('../../popover/index.js');
var index$6 = require('../../button/index.js');
var index$7 = require('../../tag/index.js');
require('../../../hooks/index.js');
var batch = require('./batch2.js');
var useBatch = require('./use-batch.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../hooks/use-namespace/index.js');
const _hoisted_1 = /* @__PURE__ */ vue.createTextVNode("\u6E05\u7A7A");
const _hoisted_2 = /* @__PURE__ */ vue.createTextVNode("\u5173\u95ED");
const _hoisted_3 = /* @__PURE__ */ vue.createTextVNode("\u641C\u7D22");
const __default__ = vue.defineComponent({
name: "ElBatch"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: batch.batchProps,
emits: batch.batchEmits,
setup(__props, { expose, emit }) {
var _a;
const props = __props;
const useSize = vue.reactive({
size: vue.toRef(props, "size")
});
const ns = index.useNamespace("batch");
const { disabled, _size } = useBatch.useBatch(props, useSize.size);
const userAttrs = vue.useAttrs();
const textareaRef = vue.ref();
const userAttrsCopy = vue.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 = vue.ref(null);
const selectRef = vue.ref(null);
const tooltipVisible = vue.ref(false);
const optionValue = vue.ref((_a = props.options[0]) == null ? void 0 : _a.value);
const selectWidth = vue.ref(0);
const searchValue = vue.ref("");
const inputValue = vue.ref("");
const selectedLabel = vue.ref("");
const multipleSearchValue = vue.ref([]);
const tagShow = vue.ref(false);
const handleEnterKey = (event) => {
const lines = inputValue.value.split("\n");
const lastLine = lines[lines.length - 1];
vue.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();
vue.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();
vue.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) {
index$1.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 = "";
};
vue.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 vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([vue.unref(ns).b(), vue.unref(ns).is("disabled", vue.unref(disabled)), vue.unref(ns).m(vue.unref(_size))]),
style: vue.normalizeStyle({ "max-width": _ctx.width + "px" })
}, [
vue.createVNode(vue.unref(index$2.ElInput), vue.mergeProps({
ref_key: "inputRef",
ref: inputRef,
modelValue: searchValue.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => searchValue.value = $event),
clearable: ""
}, userAttrsCopy, {
disabled: vue.unref(disabled),
class: vue.unref(ns).e("input"),
style: { width: _ctx.width + "px" },
onClick: handleFocus
}), {
prepend: vue.withCtx(() => [
_ctx.$slots.prepend ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("prepend"))
}, [
vue.renderSlot(_ctx.$slots, "prepend")
], 2)) : vue.createCommentVNode("v-if", true),
vue.createVNode(vue.unref(index$3.ElSelect), {
ref_key: "selectRef",
ref: selectRef,
modelValue: optionValue.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => optionValue.value = $event),
style: { "height": "100%" },
class: vue.normalizeClass([vue.unref(ns).e("select"), vue.unref(ns).is("disabled", vue.unref(disabled))]),
disabled: vue.unref(disabled),
onChange: changeOption
}, {
prefix: vue.withCtx(() => {
var _a2, _b;
return [
vue.createElementVNode("span", {
class: vue.normalizeClass(vue.unref(ns).is("empty", _ctx.options.length <= 0))
}, vue.toDisplayString((_b = (_a2 = _ctx.options.find((s) => s.value === optionValue.value)) == null ? void 0 : _a2.label) != null ? _b : _ctx.emptyText), 3)
];
}),
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.options, (item) => {
return vue.openBlock(), vue.createBlock(vue.unref(index$3.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: vue.withCtx(() => [
vue.createVNode(vue.unref(index$4.ElIcon), {
class: vue.normalizeClass(vue.unref(ns).e("batch-icon")),
onClick: vue.withModifiers(handleSearch, ["stop"])
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(iconsVue.Search))
]),
_: 1
}, 8, ["class", "onClick"]),
vue.createVNode(vue.unref(index$5.ElPopover), {
effect: "light",
placement: "bottom-end",
"popper-class": vue.unref(ns).e("batch-popper"),
class: vue.normalizeClass(vue.unref(ns).e("batch-tooltip")),
visible: tooltipVisible.value,
offset: 20,
width: Number(_ctx.width) - selectWidth.value
}, {
reference: vue.withCtx(() => [
vue.createVNode(vue.unref(index$4.ElIcon), {
class: vue.normalizeClass(vue.unref(ns).e("tooltip-icon")),
onClick: vue.withModifiers(showTooltip, ["stop"])
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(iconsVue.Operation))
]),
_: 1
}, 8, ["class", "onClick"])
]),
default: vue.withCtx(() => [
vue.createVNode(vue.unref(index$2.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: vue.normalizeClass(vue.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: vue.withKeys(handleEnterKey, ["enter"]),
onInput: handleTextareaInput
}, null, 8, ["modelValue", "autosize", "class", "placeholder", "onKeydown"]),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("controls"))
}, [
vue.createVNode(vue.unref(index$6.ElButton), {
size: "small",
plain: "",
onClick: vue.withModifiers(handleClear, ["stop"])
}, {
default: vue.withCtx(() => [
_hoisted_1
]),
_: 1
}, 8, ["onClick"]),
vue.createElementVNode("div", null, [
vue.createVNode(vue.unref(index$6.ElButton), {
size: "small",
plain: "",
onClick: vue.withModifiers(handleClose, ["stop"])
}, {
default: vue.withCtx(() => [
_hoisted_2
]),
_: 1
}, 8, ["onClick"]),
vue.createVNode(vue.unref(index$6.ElButton), {
size: "small",
class: vue.normalizeClass(vue.unref(ns).e("search-button")),
plain: "",
onClick: vue.withModifiers(handleMultipleSearch, ["stop"])
}, {
default: vue.withCtx(() => [
_hoisted_3
]),
_: 1
}, 8, ["class", "onClick"])
])
], 2)
]),
_: 1
}, 8, ["popper-class", "class", "visible", "width"])
]),
_: 3
}, 16, ["modelValue", "disabled", "class", "style"]),
vue.withDirectives(vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("tag"))
}, [
vue.createVNode(vue.unref(index$5.ElPopover), {
width: Number(_ctx.width) - selectWidth.value,
"popper-class": vue.unref(ns).e("batch-popper"),
effect: "light",
placement: "bottom-start"
}, {
reference: vue.withCtx(() => [
vue.createVNode(vue.unref(index$7.ElTag), {
closable: "",
onClose: handleCloseTag
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(selectedLabel.value) + "\uFF1A" + vue.toDisplayString(multipleSearchValue.value.slice(0, 3).join(", ")) + " \u7B49" + vue.toDisplayString(multipleSearchValue.value.length) + "\u9879 ", 1)
]),
_: 1
})
]),
default: vue.withCtx(() => [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("tag-content")),
style: vue.normalizeStyle({ "min-width": Number(_ctx.width) - selectWidth.value + "px" })
}, [
vue.createVNode(vue.unref(index$8.ElScrollbar), null, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(multipleSearchValue.value, (item) => {
return vue.openBlock(), vue.createElementBlock("p", { key: item }, vue.toDisplayString(item), 1);
}), 128))
]),
_: 1
})
], 6)
]),
_: 1
}, 8, ["width", "popper-class"])
], 2), [
[vue.vShow, tagShow.value]
])
], 6);
};
}
});
var Batch = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "D:\\project\\work\\code-monkey-ui\\packages\\components\\batch\\src\\batch.vue"]]);
exports["default"] = Batch;
//# sourceMappingURL=batch.js.map