double-ui-vue
Version:
198 lines (197 loc) • 6.88 kB
JavaScript
import { openBlock, createElementBlock, createElementVNode, defineComponent, createVNode, Transition, withDirectives, vShow, h, nextTick, render as render$5 } from "vue";
var style = "";
const _hoisted_1$4 = {
viewBox: "0 0 1024 1024",
xmlns: "http://www.w3.org/2000/svg"
};
const _hoisted_2$4 = /* @__PURE__ */ createElementVNode("path", {
d: "m522.752 441.125 394.02-394.021 78.849 78.775-394.094 394.167 394.094 394.02-78.848 78.848-394.021-394.093-394.094 394.093-78.775-78.848 394.021-394.02-394.02-394.24 78.774-78.702 394.094 393.947z",
class: "svg-fill-white"
}, null, -1);
const _hoisted_3$4 = [
_hoisted_2$4
];
function render$4(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$4, _hoisted_3$4);
}
var IconClose = { render: render$4 };
const _hoisted_1$3 = {
viewBox: "0 0 16 16",
xmlns: "http://www.w3.org/2000/svg"
};
const _hoisted_2$3 = /* @__PURE__ */ createElementVNode("path", {
d: "M8 0a8 8 0 0 1 8 8 8 8 0 0 1-8 8 8 8 0 0 1-8-8 8 8 0 0 1 8-8ZM5.752 4.715a.734.734 0 1 0-1.037 1.037L6.962 8l-2.247 2.248a.734.734 0 0 0-.071.955l.07.082a.734.734 0 0 0 1.038 0L8 9.038l2.248 2.247c.26.26.668.284.955.071l.082-.07a.734.734 0 0 0 0-1.038L9.038 8l2.247-2.248a.734.734 0 0 0 .071-.955l-.07-.082a.734.734 0 0 0-1.038 0L8 6.962Z",
class: "svg-fill-white"
}, null, -1);
const _hoisted_3$3 = [
_hoisted_2$3
];
function render$3(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$3, _hoisted_3$3);
}
var HintError = { render: render$3 };
const _hoisted_1$2 = {
viewBox: "0 0 16 16",
xmlns: "http://www.w3.org/2000/svg"
};
const _hoisted_2$2 = /* @__PURE__ */ createElementVNode("path", {
d: "M0 8a8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8 8 8 0 0 1-8-8Zm7.307 3.986c.923 0 1.472-.608 2.011-1.395 0-.094.033-.342.012-.482l-.716.84c-.15.158-.334.27-.422.24a.18.18 0 0 1-.112-.204l1.196-3.846c.1-.49-.171-.933-.743-.99-.6 0-1.487.622-2.026 1.41 0 .094-.017.328.003.468l.717-.84c.148-.159.32-.27.408-.24a.18.18 0 0 1 .107.225L6.555 11c-.137.447.122.886.752.986ZM8.83 4a.905.905 0 0 0-.405.108.812.812 0 0 0-.425.725.849.849 0 0 0 .414.723c.127.074.266.11.416.11a.815.815 0 0 0 .722-.415.825.825 0 0 0-.317-1.145A.864.864 0 0 0 8.83 4Z",
class: "svg-fill-white"
}, 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 HintInfo = { 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 0a8 8 0 0 1 8 8 8 8 0 0 1-8 8 8 8 0 0 1-8-8 8 8 0 0 1 8-8Zm3.486 4.86-4.41 4.91-1.972-1.972a.73.73 0 0 0-1.033.018.73.73 0 0 0-.019 1.034l2.48 2.479a.73.73 0 0 0 1.032-.019L12.5 5.874a.73.73 0 0 0 .019-1.033.73.73 0 0 0-1.033.019Z",
class: "svg-fill-white"
}, 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 HintSuccess = { render: render$1 };
const _hoisted_1 = {
viewBox: "0 0 16 16",
xmlns: "http://www.w3.org/2000/svg"
};
const _hoisted_2 = /* @__PURE__ */ createElementVNode("path", {
class: "svg-fill-white",
d: "M8 0a8 8 0 0 1 8 8 8 8 0 0 1-8 8 8 8 0 0 1-8-8 8 8 0 0 1 8-8Zm.163 10.667a.905.905 0 0 0-.404.108.812.812 0 0 0-.425.725.849.849 0 0 0 .413.722c.127.074.266.111.416.111a.815.815 0 0 0 .722-.415.825.825 0 0 0-.317-1.145.864.864 0 0 0-.405-.106Zm.004-7a1.059 1.059 0 0 0-1.054 1.16l.414 4.26a.643.643 0 0 0 1.28 0l.413-4.26a1.059 1.059 0 0 0-1.053-1.16Z"
}, null, -1);
const _hoisted_3 = [
_hoisted_2
];
function render(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
}
var HintWaring = { render };
const Message$1 = defineComponent({
name: "DMessage",
props: {
type: {
type: String,
default: "info"
},
message: {
type: String,
default: ""
},
time: {
type: Number,
default: 3
},
show: {
type: Boolean,
default: false
},
removeMessage: {
type: Function,
default: () => {
}
}
},
setup(props) {
const types = ["info", "success", "warning", "error"];
const strategy = {
info: () => createVNode(HintInfo, null, null),
success: () => createVNode(HintSuccess, null, null),
warning: () => createVNode(HintWaring, null, null),
error: () => createVNode(HintError, null, null)
};
const removeMessage = () => {
props.removeMessage();
};
return () => {
const {
type,
message,
show
} = props;
return createVNode(Transition, {
"name": "fadeDownUpUi"
}, {
default: () => [withDirectives(createVNode("div", {
"class": ["d-message", `d-message-${type}`]
}, [createVNode("section", {
"class": "d-message-hint"
}, [types.includes(type) && strategy[type]()]), createVNode("section", {
"class": "d-message-text"
}, [message]), createVNode("section", {
"class": "d-message-close",
"onClick": removeMessage
}, [createVNode(IconClose, null, null)])]), [[vShow, show]])]
});
};
}
});
let msgBox;
const Message = (options, time = 3) => {
const opt = options;
let timer = null;
opt.time = time;
if (!msgBox) {
msgBox = document.createElement("div");
msgBox.className = "d-message-box";
document.body.appendChild(msgBox);
}
const dom = document.createElement("span");
dom.style.marginBottom = "24px";
msgBox.appendChild(dom);
const vm = h(Message$1, opt);
const instance = {
isUnmounted: false,
vm,
remove() {
if (timer) {
clearTimeout(timer);
timer = null;
}
if (vm.component.isUnmounted)
return;
instance.setShow(false);
instance.isUnmounted = true;
setTimeout(() => {
render$5(null, dom);
msgBox.removeChild(dom);
}, 300);
},
setShow(show) {
vm.component.props.show = show;
},
changeMessage(msg) {
if (timer) {
clearTimeout(timer);
timer = null;
}
vm.component.props.message = msg;
timer = window.setTimeout(() => {
instance.remove();
}, opt.time * 1e3);
}
};
nextTick(() => {
vm.component.props.removeMessage = instance.remove;
instance.setShow(true);
timer = window.setTimeout(() => {
instance.remove();
}, opt.time * 1e3);
});
render$5(vm, dom);
return instance;
};
const SetMessage = (type) => (message, time = 3) => Message({ message, time, type });
Message.info = SetMessage("info");
Message.success = SetMessage("success");
Message.warning = SetMessage("warning");
Message.error = SetMessage("error");
export { Message as default };