double-ui-vue
Version:
1,089 lines (1,088 loc) • 32 kB
JavaScript
import { openBlock, createElementBlock, createElementVNode, defineComponent, computed, isRef, createVNode, Transition, withDirectives, Fragment, vShow, render as render$3, reactive, watch, onBeforeUnmount, getCurrentInstance, nextTick, createTextVNode, h, ref, inject } from "vue";
var V = (e, t) => {
let r = e.tagName.toLocaleLowerCase();
return r === "body" || t.some((o) => o.toLocaleLowerCase() === r) ? e : V(e.parentNode, t);
}, M = V;
var Me = (e, t = "") => {
let r = Object.prototype.toString.call(e).substring(8).replace("]", "");
return t ? r === t : r;
}, y = Me;
var Ze = ({ trigger: e, dom: t, offset: r = 8, isRight: o = false }) => {
let n, a, i = true, { clientWidth: s, clientHeight: l } = document.documentElement, { pageXOffset: c, pageYOffset: f } = window, h2 = document.body, g = t.cloneNode(true);
g.style.position = "absolute", g.style.left = "0", g.style.top = "0", g.style.display = "inline-block", h2.appendChild(g);
let { width: u, height: b } = g.getBoundingClientRect();
h2.removeChild(g), g = null;
let { left: m, top: w, width: D, height: L } = e.getBoundingClientRect(), K = w, X = l - w - L - r, p = m + D, x = s - m, T = m < 0, k = m + D > s;
return o ? k && T ? n = s - u : k ? (x = s - m, x > u ? n = m : n = s - u) : T ? (p = D + m, p >= u ? n = p - u : n = 0) : p >= u ? n = p - u : x >= u ? n = m : n = s - u : T && k ? n = 0 : m < 0 ? (p = D + m, p >= u ? n = p - u : n = 0) : m + D > s ? (x = s - m, x >= u ? n = m : n = s - u) : x >= u ? n = m : p >= u ? n = p - u : n = s - u, X >= b ? a = w + L + r : K >= b ? (a = w - b - r, i = false) : a = l - b, n = n + c, a = a + f, { left: n, top: a, isDown: i };
}, qe = Ze;
var _t = (e, t) => {
let r = e.target;
t && (r = M(r, [t]));
let { clientWidth: o, scrollWidth: n } = r;
n > o ? r.title = r.innerText : r.title = "";
}, Kt = _t;
var style$3 = "";
const _hoisted_1$2 = {
viewBox: "0 0 1024 1024",
xmlns: "http://www.w3.org/2000/svg"
};
const _hoisted_2$2 = /* @__PURE__ */ createElementVNode("path", {
d: "M551.36 878.912a73.6 73.6 0 0 1-35.264-8.768l-96.96-53.504a73.216 73.216 0 0 1-38.208-64.448V445.248a14.656 14.656 0 0 0-5.824-11.776L151.04 254.72l-2.944-2.88a71.68 71.68 0 0 1-13.952-79.168 72 72 0 0 1 66.816-43.968h603.712c29.376 0 55.808 16.896 67.52 43.968 11.776 27.136 6.656 57.152-13.184 79.168l-2.944 2.88-226.24 180.992a14.656 14.656 0 0 0-5.12 11.712v358.272c0 40.448-32.896 73.216-73.408 73.216zm-362.112-668.16 222.528 177.28c17.664 13.824 27.968 34.88 27.904 57.216v306.944a14.656 14.656 0 0 0 7.36 13.184L544 818.112a14.72 14.72 0 0 0 22.016-13.184V447.424a73.152 73.152 0 0 1 27.2-57.152l223.232-179.456a14.656 14.656 0 0 0-11.712-23.488H200.96a14.72 14.72 0 0 0-11.776 23.488z",
class: "svg-fill-grey-800"
}, null, -1);
const _hoisted_3$2 = [
_hoisted_2$2
];
function render$2(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$2, _hoisted_3$2);
}
var FilterSvg = { render: render$2 };
const _hoisted_1$1 = {
viewBox: "0 0 16 16",
xmlns: "http://www.w3.org/2000/svg"
};
const _hoisted_2$1 = /* @__PURE__ */ createElementVNode("path", {
d: "m8.39 5.988 2.96 3.7a.5.5 0 0 1-.39.812H5.04a.5.5 0 0 1-.39-.812l2.96-3.7a.5.5 0 0 1 .78 0Z",
class: "svg-fill-grey-500"
}, null, -1);
const _hoisted_3$1 = [
_hoisted_2$1
];
function render$1(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$1, _hoisted_3$1);
}
var TriangleSvg = { render: render$1 };
var style$2 = "";
const GetScrollbarWidth = () => {
const oDiv = document.createElement("div");
oDiv.style.cssText = "position:absolute;top:-1000px;width:100px;height:100px;overflow:hidden;opacity:0;";
const noScroll = document.body.appendChild(oDiv).clientWidth;
oDiv.style.overflowY = "scroll";
const scroll = oDiv.clientWidth;
document.body.removeChild(oDiv);
const bw = noScroll - scroll;
return bw < 6 ? 6 : bw;
};
const TipModal = defineComponent({
name: "TipModal",
props: {
tag: {
type: Object,
default: () => ({})
},
countTag: {
type: Object,
default: () => ({})
},
position: {
type: Boolean,
default: false
},
tipShow: {
type: Boolean,
default: false
},
dropShow: {
type: Boolean,
default: false
},
content: {
type: String,
default: ""
},
split: {
type: Boolean,
default: true
},
changeTipShow: {
type: Function,
default: () => {
}
},
tipHandle: {
type: Function,
default: () => {
}
}
},
setup(props) {
const getScrollWidth = (text) => {
const maxWidth = 452;
const div = document.createElement("div");
div.innerText = text;
div.style.position = "absolute";
div.style.left = "0";
div.style.bottom = "0";
div.style.zIndex = "-100";
div.style.display = "inline-block";
div.style.height = "0";
div.style.opacity = "0";
div.style.overflow = "hidden";
div.style.whiteSpace = "nowrap";
div.style.fontSize = "14px";
document.body.appendChild(div);
const {
scrollWidth
} = div;
document.body.removeChild(div);
return scrollWidth > maxWidth ? scrollWidth - maxWidth : 0;
};
const contentArr = computed(() => {
const content = isRef(props.content) ? props.content.value : props.content;
if (!content)
return [];
return content.split("\u3001").map((d, i) => ({
id: `content-${i}`,
text: d,
scroll: d.length > 32 ? getScrollWidth(d) : 0
}));
});
const popoverTipHandle = (str) => {
if (!props.split)
return;
props.tipHandle(str);
};
const contentEnter = () => {
if (props.split)
return;
props.changeTipShow(false);
};
return () => {
const {
split,
content,
tipShow,
position
} = props;
return createVNode(Transition, {
"name": position ? "selectDownUpExtend" : "selectDownUpExtendTop"
}, {
default: () => [withDirectives(createVNode("div", {
"class": ["d-popover-tip", split ? "d-popover-tip-split" : "d-popover-tip-words", position ? "d-popover-tip-bottom" : "d-popover-tip-top"],
"onWheel": (e) => e.stopPropagation(),
"onMouseenter": () => popoverTipHandle("enter"),
"onMouseleave": () => popoverTipHandle("leave")
}, [createVNode("section", {
"class": "d-popover-tip-content",
"onMouseenter": contentEnter
}, [split ? createVNode(Fragment, null, [contentArr.value.map((item) => createVNode("article", {
"class": ["d-popover-tip-content-item", item.scroll && "d-popover-tip-content-item-before"]
}, [createVNode("span", {
"key": item.id,
"class": "d-popover-tip-item-text",
"style": {
transform: `translateX(${-item.scroll}px)`
}
}, [item.text])]))]) : createVNode("article", {
"class": "d-popover-tip-content-words"
}, [isRef(content) ? content.value : content])]), createVNode("section", {
"class": "d-popover-tip-triangle"
}, null)]), [[vShow, tipShow]])]
});
};
}
});
const CountWh = (vm) => {
const { content, split } = vm.component.props;
const contentArr = (isRef(content) ? content.value : content).split("\u3001");
const { body } = document;
const element = document.createElement("div");
element.className = "d-popover-tip";
element.style.left = "0";
element.style.bottom = "0";
element.style.opacity = "0";
element.style.zIndex = "-100";
let html = '<section class="d-popover-tip-content">';
if (split) {
contentArr.forEach((d) => {
html += `<article class="d-popover-tip-content-item"><span class="d-popover-tip-item-text">${d}</span></article>`;
});
} else {
html += `<article class="d-popover-tip-content-words">${content}</article>`;
}
html += "</section>";
element.innerHTML = html;
body.appendChild(element);
const { width, height } = element.getBoundingClientRect();
body.removeChild(element);
const scrollWidth = GetScrollbarWidth();
return { width, height, scrollWidth };
};
const createArticle = (str) => {
const article = document.createElement("article");
article.className = "d-popover-tip-content-item";
article.style.display = "inline-block";
article.style.height = "0";
article.style.opacity = "0";
article.innerHTML = `<span class="d-popover-tip-item-text">${str}</span>`;
document.body.appendChild(article);
const w = article.clientWidth + 4;
document.body.removeChild(article);
return w;
};
const countContentWidth = (vm) => {
const {
component: {
props: { content }
}
} = vm;
const contentArr = (isRef(content) ? content.value : content).split("\u3001");
const numArr = [];
const len = contentArr.length;
let num = 0;
for (let i = 0; i < len; i++) {
const iw = createArticle(contentArr[i]);
num += iw;
if (num > 468) {
numArr.push(num - iw);
if (i === len - 1)
numArr.push(num);
else
num = iw;
} else if (num === 468) {
return 468;
}
}
return numArr && numArr.length ? Math.max(...numArr) : num;
};
const CalcPopoverTipPosition = (triggerDom, targetHeight) => {
const { clientHeight } = document.body;
const { pageYOffset } = window;
const { top, height } = triggerDom.getBoundingClientRect();
let targetOffsetY;
let P = true;
const triggerPositionTop = top - 8;
const triggerPositionBtm = clientHeight - (top + height + 8);
if (triggerPositionTop >= targetHeight) {
targetOffsetY = triggerPositionTop - targetHeight + pageYOffset;
P = false;
} else if (triggerPositionBtm >= targetHeight) {
targetOffsetY = top + height + 8 + pageYOffset;
} else {
targetOffsetY = clientHeight - targetHeight + pageYOffset;
}
return { Y: targetOffsetY, P };
};
const resetPosition$1 = (instance) => {
const { vm, tag, countTag } = instance;
const isr = isRef(vm.component.props.content);
if (!(isr ? vm.component.props.content.value : vm.component.props.content)) {
return;
}
const { innerWidth, pageXOffset } = window;
const tagEle = isRef(tag) ? tag.value : tag;
const countTagEle = isRef(countTag) ? countTag.value : countTag;
const { left: tagLeft, width: tagWidth } = tagEle.getBoundingClientRect();
const { left: cLeft, width: cWidth } = countTagEle.getBoundingClientRect();
if (innerWidth <= cLeft + cWidth / 2 || innerWidth <= cWidth || cLeft < 0)
return;
const { width, height, scrollWidth } = CountWh(vm);
const { Y, P } = CalcPopoverTipPosition(tagEle, height);
if (vm.component.props.split) {
const maxWidth = countContentWidth(vm) + 13;
vm.el.style.maxWidth = `${maxWidth}px`;
}
vm.component.props.position = P;
vm.el.style.top = `${Y}px`;
const triangle = vm.el.lastChild;
let popoverLeft = 0;
let triangleLeft;
if (width === innerWidth) {
if (pageXOffset > 0)
popoverLeft = 0;
triangleLeft = cLeft + cWidth / 2 - 6;
} else {
if (tagLeft === 0) {
popoverLeft = 0;
} else {
const discoverWidth = innerWidth - tagLeft;
const centerPlace = cLeft + cWidth / 2;
const popoverLeftWidth = width / 2;
if (centerPlace < popoverLeftWidth) {
popoverLeft = 0;
} else if (width <= tagWidth) {
if (width <= discoverWidth)
popoverLeft = centerPlace - popoverLeftWidth;
else
popoverLeft = innerWidth - width;
} else {
if (centerPlace >= popoverLeftWidth) {
if (innerWidth - centerPlace <= popoverLeftWidth) {
popoverLeft = innerWidth - width - scrollWidth;
} else
popoverLeft = centerPlace - popoverLeftWidth;
} else {
popoverLeft = 0;
}
}
}
triangleLeft = cLeft - popoverLeft + cWidth / 2 - 6;
}
vm.el.style.left = `${popoverLeft + pageXOffset}px`;
triangle.style.left = `${triangleLeft}px`;
instance.setShow(true);
};
let dom;
const TipModalHandle = (options) => {
const { tipShow, props, changeTipShow, tipHandle } = options;
const { tag, countTag } = props;
if (!dom) {
dom = document.createElement("div");
document.body.appendChild(dom);
}
const vm = createVNode(TipModal, { tipShow, ...props, changeTipShow, tipHandle });
const instance = {
vm,
tag,
countTag,
setContent(content) {
vm.component.props.content = content;
},
setShow: changeTipShow,
resetPosition() {
resetPosition$1(instance);
},
remove() {
if (vm.component.isUnmounted)
return;
render$3(null, dom);
}
};
render$3(vm, dom);
return instance;
};
const PopoverTip = defineComponent({
name: "PopoverTip",
props: {
tag: {
type: Object,
default: () => ({})
},
countTag: {
type: Object,
default: () => ({})
},
content: {
type: String,
default: ""
},
split: {
type: Boolean,
default: true
},
dropShow: {
type: Boolean,
default: false
}
},
setup(props, {
slots
}) {
let tipModal;
let enterTimer;
let leaveTimer;
const state = reactive({
tipShow: false
});
const changeTipShow = (status) => {
state.tipShow = status;
if (tipModal)
tipModal.vm.component.props.tipShow = status;
};
PopoverTip.changeTipShow = changeTipShow;
const tipHandle = (str) => {
if (str === "enter") {
clearTimeout(leaveTimer);
leaveTimer = null;
} else {
leaveTimer = window.setTimeout(() => {
changeTipShow(false);
}, 500);
}
};
const mouseEnter = () => {
if (leaveTimer) {
clearTimeout(leaveTimer);
leaveTimer = null;
}
if (!props.content || props.dropShow || state.tipShow)
return;
enterTimer = window.setTimeout(() => {
if (tipModal) {
tipModal.resetPosition();
} else {
tipModal = TipModalHandle({
tipShow: state.tipShow,
props,
changeTipShow,
tipHandle
});
if (tipModal)
tipModal.resetPosition();
PopoverTip.tipModal = tipModal;
}
}, 360);
};
const mouseLeave = () => {
if (!props.content)
return;
if (enterTimer) {
clearTimeout(enterTimer);
enterTimer = null;
}
leaveTimer = window.setTimeout(() => {
if (tipModal)
tipModal.setShow(false);
}, 500);
};
watch(() => props.content, (n, o) => {
if (n === o || !tipModal)
return;
tipModal.vm.component.props.content = n;
});
onBeforeUnmount(() => {
if (enterTimer)
clearTimeout(enterTimer);
if (leaveTimer)
clearTimeout(leaveTimer);
if (tipModal)
tipModal.remove();
});
return () => createVNode("span", {
"onMouseenter": mouseEnter,
"onMouseleave": mouseLeave
}, [slots.default()]);
}
});
var style$1 = "";
const _hoisted_1 = {
viewBox: "0 0 14 14",
xmlns: "http://www.w3.org/2000/svg"
};
const _hoisted_2 = /* @__PURE__ */ createElementVNode("path", {
d: "M7 0a7 7 0 1 0 0 14A7 7 0 0 0 7 0Zm2.784 8.637a.656.656 0 0 1-.928.929L7 7.709 5.144 9.566a.656.656 0 0 1-.928-.929l1.856-1.856-1.856-1.856a.656.656 0 0 1 .928-.928L7 5.853l1.856-1.856a.656.656 0 0 1 .928.928L7.928 6.781l1.856 1.856Z",
class: "svg-fill-grey-400"
}, null, -1);
const _hoisted_3 = [
_hoisted_2
];
function render(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
}
var ClearSvg = { render };
var style = "";
const Checkbox = defineComponent({
name: "DCheckbox",
props: {
checked: {
type: String,
default: "uncheck"
},
disabled: {
type: Boolean,
default: false
},
stopPropagation: {
type: Boolean,
default: false
},
attr: {
type: String
},
onChange: {
type: Function,
default: () => {
}
}
},
setup(props, {
emit
}) {
const {
vnode
} = getCurrentInstance();
const handleChange = (e) => {
const {
disabled,
checked,
stopPropagation,
attr
} = props;
if (stopPropagation)
e.stopPropagation();
if (disabled)
return;
let status;
if (checked === "checked")
status = "uncheck";
else
status = "checked";
if (vnode.props.onChange)
emit("change", status, attr, e);
else
emit("update:checked", status);
};
return {
handleChange
};
},
render() {
const {
$slots: slots,
disabled,
checked,
handleChange
} = this;
return createVNode("div", {
"class": ["d-checkbox", disabled && "d-checkbox-disabled"],
"onClick": handleChange
}, [createVNode("i", {
"class": ["d-checkbox-box", `d-checkbox-${checked}`]
}, null), slots.default && createVNode("span", {
"class": "d-checkbox-text",
"onMouseenter": Kt
}, [slots.default()])]);
}
});
const DropBox = defineComponent({
name: "DropBox",
props: {
status: {
type: String,
default: "single"
},
data: {
type: Array,
default: () => []
},
selectedId: {
type: String,
default: ""
},
placeholder: {
type: String,
default: "\u8BF7\u8F93\u5165"
},
icon: {
type: String,
default: "screen"
},
change: {
type: Function,
default: () => {
}
},
cancel: {
type: Function,
default: () => {
}
}
},
setup(props, {
expose
}) {
const state = reactive({
position: true,
dropBoxStatus: false,
activeClose: true,
activeConfirm: false,
searchText: "",
dropDataHistory: [],
dropData: [],
confirmClicked: false
});
expose({
state
});
const {
proxy
} = getCurrentInstance();
const setDropData = (data, kw = "") => {
const {
status
} = props;
const strategy = {
filter() {
if (kw) {
return data.filter((d) => {
if (d.name.includes(kw))
return d;
return null;
});
}
return [];
},
single() {
state.dropData = data;
},
multiple() {
state.dropData = data.map((d) => {
d.checked = d.checked || "uncheck";
d.disabled = d.disabled || false;
return d;
});
},
singleSearch() {
state.dropData = this.filter();
},
multipleSearch() {
state.dropData = this.filter().map((d) => {
d.checked = d.checked || "uncheck";
d.disabled = d.disabled || false;
return d;
});
}
};
strategy[status]();
state.dropDataHistory = JSON.parse(JSON.stringify(state.dropData));
};
watch(() => props.data, (n) => {
setDropData(JSON.parse(JSON.stringify(n)));
}, {
deep: true,
immediate: true
});
let timer = null;
watch(() => state.searchText, (n, o) => {
if (n === o)
return;
if (n) {
if (timer)
clearTimeout(timer);
const {
data
} = props;
timer = window.setTimeout(() => {
setDropData(JSON.parse(JSON.stringify(data)), n);
}, 300);
} else {
state.dropData = [];
}
});
watch(() => state.dropBoxStatus, (n) => {
if (n) {
nextTick(() => {
proxy.$el.focus();
});
}
});
const searchTextInput = (e) => {
state.searchText = e.target.value;
};
const clearText = () => {
const {
status
} = props;
const {
dropDataHistory,
dropData
} = state;
state.searchText = "";
state.dropData = [];
if (status.includes("Search")) {
if (status.includes("single")) {
props.change("", {});
} else {
state.activeConfirm = JSON.stringify(dropDataHistory) !== JSON.stringify(dropData);
}
}
};
const itemClick = (item) => {
props.change(item.id, item);
state.dropBoxStatus = false;
};
const checkboxChange = (v, i, e) => {
e.stopPropagation();
const {
dropData
} = state;
const dData = dropData.map((d, ind) => {
if (Number(i) === ind)
d.checked = v;
return d;
});
state.dropData = dData;
state.activeConfirm = JSON.stringify(state.dropDataHistory) !== JSON.stringify(dData);
};
const cancel = () => {
const {
status
} = props;
const {
confirmClicked,
dropDataHistory
} = state;
if (status.includes("multiple")) {
state.dropData = JSON.parse(JSON.stringify(dropDataHistory));
}
state.activeConfirm = false;
if (status.includes("Search") && !confirmClicked) {
setTimeout(() => {
clearText();
}, 300);
}
props.cancel(false);
};
const blurHandle = () => {
if (!state.activeClose)
return;
cancel();
};
const dropBoxEnter = () => {
state.activeClose = false;
};
const dropBoxLeave = () => {
state.activeClose = true;
proxy.$el.focus();
};
const confirm = () => {
if (!state.activeConfirm)
return;
const {
dropData
} = state;
const selectedData = [];
const selectedId = [];
dropData.forEach((d) => {
if (d.checked === "checked") {
selectedData.push(d);
selectedId.push(d.id);
}
});
setTimeout(() => {
state.dropDataHistory = JSON.parse(JSON.stringify(state.dropData));
}, 300);
props.change(selectedId.toString(), selectedData);
state.activeConfirm = false;
state.confirmClicked = true;
};
onBeforeUnmount(() => {
if (timer)
clearTimeout(timer);
});
return () => {
const {
status,
placeholder,
selectedId
} = props;
const {
position,
dropBoxStatus,
searchText,
dropData,
activeConfirm
} = state;
return createVNode(Transition, {
"name": position ? "selectDownUpExtend" : "selectDownUpExtendTop"
}, {
default: () => [withDirectives(createVNode("div", {
"class": ["d-drop-box", status.includes("multiple") ? `d-drop-box-multiple${status.includes("Search") ? "-search" : ""}` : `d-drop-box-single${status.includes("Search") ? "-search" : ""}`],
"tabindex": "-1",
"onBlur": blurHandle,
"onMouseenter": dropBoxEnter,
"onMouseleave": dropBoxLeave
}, [status.includes("Search") && createVNode("div", {
"class": "d-drop-box-search"
}, [createVNode("input", {
"type": "text",
"class": "d-drop-box-input",
"value": searchText,
"placeholder": placeholder,
"onInput": searchTextInput
}, null), withDirectives(createVNode("i", {
"class": "d-drop-box-input-clear",
"onClick": clearText
}, [createVNode(ClearSvg, null, null)]), [[vShow, !!searchText]])]), createVNode("div", {
"class": "d-drop-box-list"
}, [dropData.map((item, i) => createVNode("div", {
"key": `item-${item.id}-${i}`,
"class": ["d-drop-box-item", status.includes("multiple") && "d-drop-box-item-checkbox", status.includes("single") && selectedId === item.id && "d-drop-box-ited-selected"]
}, [status.includes("multiple") ? createVNode(Checkbox, {
"checked": item.checked,
"disabled": item.disabled,
"attr": `${i}`,
"onChange": checkboxChange
}, {
default: () => [item.name]
}) : createVNode("section", {
"class": "d-drop-box-text",
"onMouseenter": Kt,
"onClick": (e) => {
e.stopPropagation();
itemClick(item);
}
}, [item.name])]))]), status.includes("multiple") && createVNode("div", {
"class": ["d-drop-box-handle", dropData.length > 5 && "d-drop-box-handle-shadow"]
}, [createVNode("section", {
"class": "d-drop-box-btn d-drop-box-cancel",
"onClick": cancel
}, [createTextVNode("\u53D6\u6D88")]), createVNode("section", {
"class": ["d-drop-box-btn", activeConfirm ? "d-drop-box-confirm" : "d-drop-box-disabled"],
"onClick": confirm
}, [createTextVNode("\u786E\u5B9A")])])]), [[vShow, dropBoxStatus]])]
});
};
}
});
const resetPosition = (instance) => {
const { vm, tag } = instance;
const { el } = vm;
const tagEle = isRef(tag) ? tag.value : tag;
const { left, top, isDown } = qe({
trigger: tagEle,
dom: el
});
vm.component.exposeProxy.state.position = isDown;
el.style.top = `${top}px`;
el.style.left = `${left}px`;
instance.setShow(true);
};
const DropPanel = (options) => {
const { tag, propsData } = options;
const dom2 = document.createElement("div");
document.body.appendChild(dom2);
const vm = h(DropBox, propsData);
const instance = {
vm,
tag,
setShow(show) {
vm.component.exposeProxy.state.dropBoxStatus = show;
},
resetPosition() {
resetPosition(instance);
},
remove() {
if (vm.component.isUnmounted)
return;
render$3(null, dom2);
document.body.removeChild(dom2);
}
};
render$3(vm, dom2);
return instance;
};
const SelectScreen = defineComponent({
name: "SelectScreen",
props: {
status: {
type: String,
default: "single"
},
data: {
type: Array,
default: () => []
},
selectedId: {
type: String,
default: ""
},
selectName: {
type: String,
default: ""
},
icon: {
type: String,
default: "screen"
},
placeholder: {
type: String,
default: "\u8BF7\u8F93\u5165"
},
onChange: {
type: Function,
default: () => {
}
}
},
emits: ["change"],
setup(props, {
emit
}) {
const state = reactive({
dropBoxStatus: false,
dropData: [],
singleName: "\u5168\u90E8",
choiceId: "",
selectedData: []
});
const selectScreen = ref(null);
const refTrigger = ref(null);
const tableLayoutMain = inject("tableLayoutMain");
const selectedName = computed(() => {
const {
status
} = props;
const {
singleName,
selectedData
} = state;
if (status.includes("single"))
return singleName;
let selectedNameArr = [];
if (y(selectedData) === "Array") {
selectedNameArr = selectedData.map((d) => d.name);
} else {
selectedNameArr = [selectedData.name];
}
return selectedNameArr.toString().replace(/,/g, "\u3001");
});
const activeSvg = computed(() => {
var _a;
const {
data,
status,
selectedId,
icon
} = props;
const {
selectedData
} = state;
if (icon === "triangle")
return;
if (status.includes("single"))
return selectedId && selectedId !== ((_a = data[0]) == null ? void 0 : _a.id);
if (status.includes("multiple"))
return selectedData.length > 0;
return false;
});
const setInit = (id = "", data) => {
const {
status
} = props;
state.choiceId = id;
if (status.includes("single")) {
const {
name = ""
} = data.find((d) => d.id === id) || {};
state.singleName = name;
} else {
state.selectedData = data.filter((d) => d.checked === "checked").filter(Boolean);
}
state.dropData = data;
};
setInit(props.selectedId, JSON.parse(JSON.stringify(props.data)));
watch(() => props.data, (n) => {
setInit(props.selectedId, JSON.parse(JSON.stringify(n)));
}, {
deep: true
});
watch(() => props.selectedId, (n, o) => {
if (n === o || n === state.choiceId)
return;
setInit(n, JSON.parse(JSON.stringify(props.data)));
});
let dropPanel;
let parentScroll;
const setDropdownStatus = (status) => {
state.dropBoxStatus = status;
if (dropPanel) {
dropPanel.vm.component.exposeProxy.state.dropBoxStatus = status;
if (status)
dropPanel.resetPosition();
}
};
const listenScroll = () => {
if (state.dropBoxStatus)
setDropdownStatus(false);
};
const dropChange = (id, selectedData) => {
const {
status,
icon
} = props;
state.choiceId = id;
if (dropPanel)
dropPanel.vm.component.props.selectedId = id;
if (status.includes("single"))
state.singleName = selectedData.name;
else
state.selectedData = selectedData;
emit("change", icon, id, selectedData);
};
const openDropBox = () => {
var _a;
const {
dropBoxStatus
} = state;
if (dropBoxStatus) {
setDropdownStatus(false);
return;
}
if (dropPanel) {
setDropdownStatus(true);
} else {
const {
status,
selectedId,
icon,
placeholder
} = props;
const {
dropData: data
} = state;
dropPanel = DropPanel({
tag: selectScreen,
propsData: {
status,
data,
selectedId,
icon,
placeholder,
change(id, selectedData) {
dropChange(id, selectedData);
setDropdownStatus(false);
},
cancel(dropdownStatus) {
setDropdownStatus(dropdownStatus);
}
}
});
setDropdownStatus(true);
parentScroll = (_a = tableLayoutMain == null ? void 0 : tableLayoutMain.$refs) == null ? void 0 : _a.tableLayoutMain;
if (parentScroll)
parentScroll.addEventListener("scroll", listenScroll, false);
window.addEventListener("scroll", listenScroll, false);
}
};
onBeforeUnmount(() => {
setDropdownStatus(false);
dropPanel == null ? void 0 : dropPanel.remove();
if (parentScroll)
parentScroll.removeEventListener("scroll", listenScroll);
window.removeEventListener("scroll", listenScroll);
});
return () => {
const {
icon
} = props;
const {
dropBoxStatus
} = state;
return createVNode("div", {
"class": ["d-select-screen", dropBoxStatus && "d-select-screen-none"],
"onClick": (e) => {
e.stopPropagation();
openDropBox();
},
"ref": selectScreen
}, [createVNode(PopoverTip, {
"tag": refTrigger,
"countTag": refTrigger,
"content": selectedName.value,
"dropShow": dropBoxStatus
}, {
default: () => [createVNode("i", {
"class": ["d-select-screen-svg", icon === "triangle" && !dropBoxStatus && "d-select-triangle-open", activeSvg.value && "d-select-screen-svg-active"],
"ref": refTrigger
}, [icon === "triangle" ? createVNode(TriangleSvg, null, null) : createVNode(FilterSvg, null, null)])]
}), dropBoxStatus && createVNode("div", {
"class": "d-select-screen-shade",
"onClick": (e) => {
e.stopPropagation();
}
}, null)]);
};
}
});
export { SelectScreen as default };