tav-ui
Version:
223 lines (218 loc) • 9.15 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var index = require('../../modal/index2.js');
var index$1 = require('../../button/index2.js');
require('../../../locales/index2.js');
require('./types/index2.js');
var cascadePro = require('./components/cascade-pro2.js');
require('./constants/index2.js');
var pluginVue_exportHelper = require('../../../../_virtual/plugin-vue_export-helper.js');
var props = require('./types/props2.js');
var props$1 = require('./constants/props2.js');
var transfer = require('../../../locales/transfer2.js');
const _sfc_main = vue.defineComponent({
name: "TaCascadeProSelect",
components: { Modal: index.TaModal, Button: index$1.TaButton, CascadePro: cascadePro["default"] },
inheritAttrs: false,
props: props.cascadeProSelectProps,
emits: ["change"],
setup(props, { attrs, emit }) {
const id = props.id ?? props$1.buildCascadeProId();
const cascadeProRef = vue.ref(null);
const visible = vue.ref(false);
const selectValue = vue.ref([]);
const selectDefaultValue = vue.ref(props.value);
const selectOptions = vue.ref([]);
const handleFormItemResult = (options) => {
if (vue.unref(options).length > props.maxTagCount) {
const rest = vue.unref(selectValue).slice(0, props.maxTagCount);
const ellipse = {
id: "cascade-prop-ellipse",
idPath: "cascade-prop-ellipse",
pid: "cascade-prop-ellipse-pid",
name: `+${vue.unref(selectValue).length - props.maxTagCount}...`,
namePath: `+${vue.unref(selectValue).length - props.maxTagCount}...`
};
return [...rest, ellipse];
}
return vue.unref(options);
};
const handleSelectResult = (options, type = "inner") => {
if (type === "inner") {
return vue.unref(options).map((option) => {
const temp = { ...option };
for (const [k, v] of Object.entries(props$1.DEFAULT_CASCADE_PRO_OPTIONS_KEY_CONFIG)) {
if (option[k]) {
temp[v] = option[k];
}
}
const idPathSplitResult = temp.idPath.split("-");
const namePathSplitResult = temp.namePath.split("-");
for (let i = 0; i < props.fields.length; i++) {
const key = props.fields[i];
temp[key] = idPathSplitResult[i] || "";
temp[`${key}Name`] = namePathSplitResult[i] || "";
}
return temp;
});
} else {
return vue.unref(options).map((option) => {
const temp = { ...option };
const fields = props.fields;
let name = "";
let id2 = "";
let pid = "";
let idPath = "";
let namePath = "";
for (let i = 0; i < fields.length; i++) {
const key = fields[i];
if (option[key]) {
name = `${option[`${key}Name`]}`;
id2 = `${option[key]}`;
idPath = idPath ? `${idPath}-${option[key]}` : `${option[key]}`;
namePath = namePath ? `${namePath}-${option[`${key}Name`]}` : `${option[`${key}Name`]}`;
}
}
const idPathSplitResult = idPath.split("-");
pid = idPathSplitResult[idPathSplitResult.length - 1 - 1] ? idPathSplitResult[idPathSplitResult.length - 1 - 1] : "";
return {
...temp,
name,
id: id2,
pid,
idPath,
namePath
};
});
}
};
const handleConfirm = async () => {
visible.value = true;
const result = vue.unref(cascadeProRef)?.selectResultRef?.options || [];
selectValue.value = handleSelectResult(result);
selectDefaultValue.value = vue.unref(selectValue);
selectOptions.value = handleFormItemResult(vue.unref(selectValue));
await vue.nextTick();
emit("change", vue.unref(selectDefaultValue));
handleCancel();
};
vue.watch(() => props.value, (_new, _old) => {
if (_new && JSON.stringify(_new) !== JSON.stringify(_old)) {
selectValue.value = handleSelectResult(props.value, "outer");
selectDefaultValue.value = vue.unref(selectValue);
selectOptions.value = handleFormItemResult(vue.unref(selectValue));
emit("change", vue.unref(selectDefaultValue));
}
}, { immediate: true, deep: true });
const getBindValue = vue.computed(() => {
return {
...props,
...attrs,
id,
value: selectDefaultValue
};
});
const handleCancel = () => {
visible.value = false;
};
const handleClick = () => {
if (attrs.disabled)
return;
visible.value = true;
};
const handleClear = (option) => {
selectValue.value = vue.unref(selectValue).filter((_option) => _option.idPath !== option.idPath);
selectDefaultValue.value = vue.unref(selectDefaultValue).filter((_option) => _option.idPath !== option.idPath);
selectOptions.value = vue.unref(selectOptions).filter((_option) => _option.idPath !== option.idPath);
};
return {
tavI18n: transfer.tavI18n,
cascadeProRef,
getBindValue,
visible,
selectValue,
selectOptions,
handleConfirm,
handleCancel,
handleClick,
handleClear
};
}
});
const _hoisted_1 = { class: "ant-select-selection-overflow" };
const _hoisted_2 = { class: "ant-select-selection-item" };
const _hoisted_3 = { class: "ant-select-selection-item-content" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_CascadePro = vue.resolveComponent("CascadePro");
const _component_Button = vue.resolveComponent("Button");
const _component_Modal = vue.resolveComponent("Modal");
return vue.openBlock(), vue.createElementBlock("div", null, [
vue.createVNode(_component_Modal, {
title: _ctx.getBindValue.title,
visible: _ctx.visible,
width: 800,
closable: "",
"destroy-on-close": "",
"wrap-class-name": "ta-cascade-pro-modal",
onCancel: _ctx.handleCancel
}, {
footer: vue.withCtx(() => [
vue.createVNode(_component_Button, {
type: "primary",
onClick: _ctx.handleConfirm
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.tavI18n("Tav.common.okText")), 1)
]),
_: 1
}, 8, ["onClick"]),
vue.createVNode(_component_Button, { onClick: _ctx.handleCancel }, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.tavI18n("Tav.common.cancelText")), 1)
]),
_: 1
}, 8, ["onClick"])
]),
default: vue.withCtx(() => [
vue.createVNode(_component_CascadePro, vue.mergeProps({ ref: "cascadeProRef" }, _ctx.getBindValue), null, 16)
]),
_: 1
}, 8, ["title", "visible", "onCancel"]),
vue.createElementVNode("div", {
class: vue.normalizeClass([
"ta-cascade-pro-select",
_ctx.selectOptions.length ? "ant-select-selector ant-select-multiple" : "ant-input"
]),
style: vue.normalizeStyle(!_ctx.getBindValue.showPlaceholder ? { border: "none", paddingLeft: "0" } : {})
}, [
vue.createElementVNode("div", _hoisted_1, [
_ctx.selectOptions.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.selectOptions, (option) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: option.idPath,
class: "ant-select-selection-overflow-item"
}, [
vue.createElementVNode("div", _hoisted_2, [
vue.createElementVNode("div", _hoisted_3, vue.toDisplayString(option.namePath), 1),
vue.createCommentVNode(' <Icon\n icon="ant-design:close-outlined"\n :size="12"\n class="ant-select-item-option-close-icon"\n @click.stop="() => handleClear(option)"\n /> ')
])
]);
}), 128)) : vue.createCommentVNode("v-if", true),
!_ctx.getBindValue.showPlaceholder ? (vue.openBlock(), vue.createBlock(_component_Button, {
key: 1,
"pre-icon": "ant-design:plus-outlined",
style: { "min-width": "auto", "height": "24px", "margin": "2px 4px 2px 0px" },
disabled: _ctx.$attrs.disabled,
onClick: _ctx.handleClick
}, null, 8, ["disabled", "onClick"])) : (vue.openBlock(), vue.createElementBlock("span", {
key: 2,
class: "ant-select-selection-placeholder",
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
}, vue.toDisplayString(_ctx.getBindValue.placeholder), 1))
])
], 6)
]);
}
var CascadeProSelect = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/tav-ui/tav-ui/packages/components/cascade-pro/src/cascade-pro-select.vue"]]);
exports["default"] = CascadeProSelect;
//# sourceMappingURL=cascade-pro-select2.js.map