UNPKG

@opensig/opendesign

Version:

<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制,使用 TypeScript</b></p>

125 lines (124 loc) 3.99 kB
"use strict"; const vue = require("vue"); const types = require("./types.js"); const icons = require("../_utils/icons.js"); const is = require("../_utils/is.js"); const _hoisted_1 = { class: "o-message-icon" }; const _hoisted_2 = { class: "o-message-main" }; const _hoisted_3 = { key: 0, class: "o-message-title" }; const _hoisted_4 = { class: "o-message-content" }; const _sfc_main = /* @__PURE__ */ vue.defineComponent({ __name: "OMessage", props: types.messageProps, emits: ["duration-end", "close", "update:visible"], setup(__props, { expose: __expose, emit: __emit }) { const props = __props; const iconMap = { info: icons.IconInfo.value, success: icons.IconSuccess.value, warning: icons.IconWarning.value, danger: icons.IconDanger.value, loading: icons.IconLoading.value }; const icon = vue.computed(() => iconMap[props.status]); const isVisible = vue.ref(props.visible ?? props.defaultVisible); vue.watch( () => props.visible, (val) => { if (!is.isUndefined(val)) { isVisible.value = val; } } ); const emits = __emit; let timer = 0; const clearTimer = () => { if (timer) { window.clearTimeout(timer); timer = 0; } }; const startTimer = () => { if (is.isUndefined(props.duration) || props.duration <= 0) { return; } timer = window.setTimeout(() => { emits("duration-end"); isVisible.value = false; emits("update:visible", isVisible.value); clearTimer(); }, props.duration); }; const onClose = async (ev) => { ev == null ? void 0 : ev.stopPropagation(); if (is.isFunction(props.beforeClose)) { const rlt = await props.beforeClose(); if (rlt) { isVisible.value = false; emits("update:visible", isVisible.value); emits("close", ev); return; } } isVisible.value = false; emits("update:visible", isVisible.value); emits("close", ev); }; vue.onMounted(() => { startTimer(); }); vue.onUnmounted(() => { clearTimer(); }); __expose({ close: onClose }); return (_ctx, _cache) => { return isVisible.value ? (vue.openBlock(), vue.createElementBlock( "div", { key: 0, class: vue.normalizeClass(["o-message", [`o-message-${props.status}`, { "o-message-colorful": props.colorful }]]), onMouseenter: clearTimer, onMouseleave: startTimer }, [ vue.createElementVNode("span", _hoisted_1, [ vue.renderSlot(_ctx.$slots, "icon", {}, () => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(icon.value), { class: vue.normalizeClass({ "o-rotating": props.status === "loading" }) }, null, 8, ["class"])) ]) ]), vue.createElementVNode("div", _hoisted_2, [ _ctx.$slots.title || props.title ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, [ vue.renderSlot(_ctx.$slots, "title", {}, () => [ vue.createTextVNode( vue.toDisplayString(props.title), 1 /* TEXT */ ) ]) ])) : vue.createCommentVNode("v-if", true), vue.createElementVNode("span", _hoisted_4, [ vue.renderSlot(_ctx.$slots, "default") ]) ]), props.closable ? (vue.openBlock(), vue.createElementBlock("span", { key: 0, class: "o-message-close", onClick: onClose }, [ vue.createVNode(vue.unref(icons.IconClose)) ])) : vue.createCommentVNode("v-if", true) ], 34 /* CLASS, NEED_HYDRATION */ )) : vue.createCommentVNode("v-if", true); }; } }); module.exports = _sfc_main;