@vuesax-alpha/nightly
Version:
A Component Library for Vue 3
287 lines (282 loc) • 10.1 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var core = require('@vueuse/core');
require('../../../hooks/index.js');
var index$3 = require('../../icon/index.js');
require('../../../utils/index.js');
var notification = require('./notification.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../hooks/use-global-config/index.js');
var index$1 = require('../../../hooks/use-common-props/index.js');
var index$2 = require('../../../hooks/use-base-component/index.js');
var color = require('../../../utils/color.js');
var style = require('../../../utils/dom/style.js');
const _hoisted_1 = ["innerHTML"];
const _hoisted_2 = ["innerHTML"];
const _hoisted_3 = { key: 1 };
const __default__ = vue.defineComponent({
name: "VsNotification"
});
const _sfc_main = vue.defineComponent({
...__default__,
props: notification.notificationProps,
setup(__props, { expose: __expose }) {
const props = __props;
const { ns, zIndex } = index.useGlobalComponentSettings("notification");
const { currentZIndex, nextZIndex } = zIndex;
const color$1 = index$1.useColor();
const notifyRef = vue.ref();
const visible = vue.ref(false);
let timer = void 0;
const vsBaseClasses = index$2.useVuesaxBaseComponent(color$1);
const notifyKls = vue.computed(() => [
ns.b(),
vsBaseClasses,
ns.is("flat", props.flat),
ns.is("sticky", props.sticky),
ns.is("border", !!props.border),
ns.is("color", !!color$1.value),
ns.is("icon", !!props.icon),
ns.is("on-click", !!props.onClick),
ns.is("on-click-close", !!props.onClickClose),
props.shape && ns.is(props.shape),
ns.is("loading", props.loading),
ns.is("not-padding", props.notPadding),
ns.is("width-full", props.width == "full"),
ns.is("width-auto", props.width == "auto")
]);
const notifyStyles = vue.computed(() => [
{
zIndex: vue.unref(currentZIndex)
},
ns.cssVar({
color: color.getVsColor(color$1),
border: color.getVsColor(props.border)
})
]);
const handleClick = () => {
var _a;
(_a = props.onClick) == null ? void 0 : _a.call(props);
};
const handleClickClose = () => {
var _a, _b;
if (!((_a = props.onClickClose) == null ? void 0 : _a.call(props))) {
return;
}
visible.value = false;
(_b = props.onClose) == null ? void 0 : _b.call(props);
};
const onTransitionBeforeEnter = (el) => {
nextZIndex();
const _el = el;
_el.style.maxHeight = `0`;
_el.style.padding = `0 20px`;
};
const onTransitionEnter = (el, done) => {
const h = el.scrollHeight;
const _el = el;
_el.style.maxHeight = `${h + 40}px`;
if (window.innerWidth < 600) {
_el.style.padding = `15px`;
} else {
_el.style.padding = `20px`;
}
done();
};
const onTransitionLeave = (_, done) => {
setTimeout(() => {
var _a, _b;
(_a = notifyRef.value) == null ? void 0 : _a.remove();
done();
(_b = props.onClose) == null ? void 0 : _b.call(props);
}, 150);
};
const startTimer = () => {
if (props.duration > 0) {
;
({ stop: timer } = core.useTimeoutFn(() => {
if (visible.value)
close();
}, props.duration));
}
};
const clearTimer = () => {
timer == null ? void 0 : timer();
};
const open = () => {
clearTimer();
startTimer();
nextZIndex();
visible.value = true;
};
const close = () => {
visible.value = false;
};
let intervalProgress = 0;
const currentProgress = vue.ref(0);
const handleProgress = () => {
if (props.progressAuto && props.duration > 0) {
intervalProgress = setInterval(() => {
currentProgress.value += 1;
}, props.duration / 100);
}
};
vue.onMounted(() => {
open();
handleProgress();
});
vue.onBeforeUnmount(() => {
clearInterval(intervalProgress);
});
__expose({
visible,
close,
open
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.Transition, {
name: "vs-notification",
onBeforeEnter: onTransitionBeforeEnter,
onEnter: onTransitionEnter,
onLeave: onTransitionLeave,
persisted: ""
}, {
default: vue.withCtx(() => [
vue.withDirectives(vue.createElementVNode(
"div",
{
ref_key: "notifyRef",
ref: notifyRef,
class: vue.normalizeClass(notifyKls.value),
style: vue.normalizeStyle(notifyStyles.value),
onClick: handleClick
},
[
!_ctx.loading ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
_ctx.icon ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("icon")),
style: vue.normalizeStyle({ fontSize: vue.unref(style.addUnit)(_ctx.iconSize) }),
innerHTML: _ctx.icon
}, null, 14, _hoisted_1)) : (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 1,
class: vue.normalizeClass(vue.unref(ns).e("icon"))
},
[
vue.createVNode(vue.unref(index$3.VsIcon), {
size: vue.unref(style.addUnit)(_ctx.iconSize)
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon)))
]),
_: 1
}, 8, ["size"])
],
2
))
],
64
)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(vue.unref(ns).e("content"))
},
[
_ctx.title ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("title"))
},
[
vue.createElementVNode(
"h4",
null,
vue.toDisplayString(_ctx.title),
1
)
],
2
)) : vue.createCommentVNode("v-if", true),
_ctx.content ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 1,
class: vue.normalizeClass(vue.unref(ns).e("text"))
},
[
vue.renderSlot(_ctx.$slots, "default", {}, () => [
_ctx.dangerousHtmlString ? (vue.openBlock(), vue.createElementBlock("p", {
key: 0,
innerHTML: _ctx.content
}, null, 8, _hoisted_2)) : (vue.openBlock(), vue.createElementBlock(
"p",
_hoisted_3,
vue.toDisplayString(_ctx.content),
1
))
])
],
2
)) : vue.createCommentVNode("v-if", true)
],
2
)
],
64
)) : (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 1,
class: vue.normalizeClass(vue.unref(ns).e("loading"))
},
null,
2
)),
_ctx.showClose ? (vue.openBlock(), vue.createElementBlock(
"button",
{
key: 2,
class: vue.normalizeClass(vue.unref(ns).e("close")),
onClick: handleClickClose
},
[
vue.createVNode(vue.unref(index$3.IconClose), { hover: "less" })
],
2
)) : vue.createCommentVNode("v-if", true),
_ctx.progressAuto ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 3,
class: vue.normalizeClass(vue.unref(ns).e("progress")),
style: vue.normalizeStyle({ width: `${currentProgress.value}%` })
},
null,
6
)) : vue.createCommentVNode("v-if", true)
],
6
), [
[vue.vShow, visible.value]
])
]),
_: 3
});
};
}
});
var NotificationConstructor = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/home/runner/work/vuesax-alpha/vuesax-alpha/packages/components/notification/src/notification.vue"]]);
exports["default"] = NotificationConstructor;
//# sourceMappingURL=notification2.js.map