@vuesax-alpha/nightly
Version:
A Component Library for Vue 3
283 lines (280 loc) • 9.97 kB
JavaScript
import { defineComponent, ref, computed, unref, onMounted, onBeforeUnmount, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, normalizeStyle, createElementBlock, Fragment, createVNode, resolveDynamicComponent, createCommentVNode, toDisplayString, renderSlot, vShow } from 'vue';
import { useTimeoutFn } from '@vueuse/core';
import '../../../hooks/index.mjs';
import { VsIcon, IconClose } from '../../icon/index.mjs';
import '../../../utils/index.mjs';
import { notificationProps } from './notification.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useGlobalComponentSettings } from '../../../hooks/use-global-config/index.mjs';
import { useColor } from '../../../hooks/use-common-props/index.mjs';
import { useVuesaxBaseComponent } from '../../../hooks/use-base-component/index.mjs';
import { getVsColor } from '../../../utils/color.mjs';
import { addUnit } from '../../../utils/dom/style.mjs';
const _hoisted_1 = ["innerHTML"];
const _hoisted_2 = ["innerHTML"];
const _hoisted_3 = { key: 1 };
const __default__ = defineComponent({
name: "VsNotification"
});
const _sfc_main = defineComponent({
...__default__,
props: notificationProps,
setup(__props, { expose: __expose }) {
const props = __props;
const { ns, zIndex } = useGlobalComponentSettings("notification");
const { currentZIndex, nextZIndex } = zIndex;
const color = useColor();
const notifyRef = ref();
const visible = ref(false);
let timer = void 0;
const vsBaseClasses = useVuesaxBaseComponent(color);
const notifyKls = computed(() => [
ns.b(),
vsBaseClasses,
ns.is("flat", props.flat),
ns.is("sticky", props.sticky),
ns.is("border", !!props.border),
ns.is("color", !!color.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 = computed(() => [
{
zIndex: unref(currentZIndex)
},
ns.cssVar({
color: getVsColor(color),
border: 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 } = 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 = ref(0);
const handleProgress = () => {
if (props.progressAuto && props.duration > 0) {
intervalProgress = setInterval(() => {
currentProgress.value += 1;
}, props.duration / 100);
}
};
onMounted(() => {
open();
handleProgress();
});
onBeforeUnmount(() => {
clearInterval(intervalProgress);
});
__expose({
visible,
close,
open
});
return (_ctx, _cache) => {
return openBlock(), createBlock(Transition, {
name: "vs-notification",
onBeforeEnter: onTransitionBeforeEnter,
onEnter: onTransitionEnter,
onLeave: onTransitionLeave,
persisted: ""
}, {
default: withCtx(() => [
withDirectives(createElementVNode(
"div",
{
ref_key: "notifyRef",
ref: notifyRef,
class: normalizeClass(notifyKls.value),
style: normalizeStyle(notifyStyles.value),
onClick: handleClick
},
[
!_ctx.loading ? (openBlock(), createElementBlock(
Fragment,
{ key: 0 },
[
_ctx.icon ? (openBlock(), createElementBlock(
Fragment,
{ key: 0 },
[
typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(unref(ns).e("icon")),
style: normalizeStyle({ fontSize: unref(addUnit)(_ctx.iconSize) }),
innerHTML: _ctx.icon
}, null, 14, _hoisted_1)) : (openBlock(), createElementBlock(
"div",
{
key: 1,
class: normalizeClass(unref(ns).e("icon"))
},
[
createVNode(unref(VsIcon), {
size: unref(addUnit)(_ctx.iconSize)
}, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent(_ctx.icon)))
]),
_: 1
}, 8, ["size"])
],
2
))
],
64
)) : createCommentVNode("v-if", true),
createElementVNode(
"div",
{
class: normalizeClass(unref(ns).e("content"))
},
[
_ctx.title ? (openBlock(), createElementBlock(
"div",
{
key: 0,
class: normalizeClass(unref(ns).e("title"))
},
[
createElementVNode(
"h4",
null,
toDisplayString(_ctx.title),
1
)
],
2
)) : createCommentVNode("v-if", true),
_ctx.content ? (openBlock(), createElementBlock(
"div",
{
key: 1,
class: normalizeClass(unref(ns).e("text"))
},
[
renderSlot(_ctx.$slots, "default", {}, () => [
_ctx.dangerousHtmlString ? (openBlock(), createElementBlock("p", {
key: 0,
innerHTML: _ctx.content
}, null, 8, _hoisted_2)) : (openBlock(), createElementBlock(
"p",
_hoisted_3,
toDisplayString(_ctx.content),
1
))
])
],
2
)) : createCommentVNode("v-if", true)
],
2
)
],
64
)) : (openBlock(), createElementBlock(
"div",
{
key: 1,
class: normalizeClass(unref(ns).e("loading"))
},
null,
2
)),
_ctx.showClose ? (openBlock(), createElementBlock(
"button",
{
key: 2,
class: normalizeClass(unref(ns).e("close")),
onClick: handleClickClose
},
[
createVNode(unref(IconClose), { hover: "less" })
],
2
)) : createCommentVNode("v-if", true),
_ctx.progressAuto ? (openBlock(), createElementBlock(
"div",
{
key: 3,
class: normalizeClass(unref(ns).e("progress")),
style: normalizeStyle({ width: `${currentProgress.value}%` })
},
null,
6
)) : createCommentVNode("v-if", true)
],
6
), [
[vShow, visible.value]
])
]),
_: 3
});
};
}
});
var NotificationConstructor = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/vuesax-alpha/vuesax-alpha/packages/components/notification/src/notification.vue"]]);
export { NotificationConstructor as default };
//# sourceMappingURL=notification2.mjs.map