hongluan-ui
Version:
Hongluan Component Library for Vue 3
160 lines (157 loc) • 6.52 kB
JavaScript
import { defineComponent, ref, computed, onMounted, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, unref, normalizeStyle, renderSlot, createVNode, createCommentVNode, vShow, toDisplayString, createElementBlock, withModifiers } from 'vue';
import { useTimeoutFn, useEventListener } from '@vueuse/core';
import '../../../constants/index.mjs';
import '../../../hooks/index.mjs';
import { HlIcon } from '../../icon/index.mjs';
import '../../system-icon/index.mjs';
import { notificationProps, notificationEmits } from './notification.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { useZIndex } from '../../../hooks/use-z-index/index.mjs';
import { MessageTypeIconMap } from '../../../constants/icon.mjs';
import { EVENT_CODE } from '../../../constants/aria.mjs';
import SystemSuccess from '../../system-icon/src/success.mjs';
import SystemInfo from '../../system-icon/src/info.mjs';
import SystemWarning from '../../system-icon/src/warning.mjs';
import SystemError from '../../system-icon/src/error.mjs';
import SystemClose from '../../system-icon/src/close.mjs';
const __default__ = defineComponent({
name: "Notification"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: notificationProps,
emits: notificationEmits,
setup(__props, { expose }) {
const props = __props;
const { namespace } = useNamespace();
const { currentZIndex } = useZIndex();
const visible = ref(false);
let timer = void 0;
const hasDefinedIcon = computed(() => !!MessageTypeIconMap[props.type]);
const horizontalClass = computed(() => props.position.endsWith("right") ? "right" : "left");
const verticalProperty = computed(() => props.position.startsWith("top") ? "top" : "bottom");
const positionStyle = computed(() => {
var _a;
return {
[verticalProperty.value]: `${props.offset}px`,
zIndex: (_a = props.zIndex) != null ? _a : currentZIndex.value
};
});
function startTimer() {
if (props.duration > 0) {
({ stop: timer } = useTimeoutFn(() => {
if (visible.value)
close();
}, props.duration));
}
}
function clearTimer() {
timer == null ? void 0 : timer();
}
function close() {
visible.value = false;
}
function onKeydown({ code }) {
if (code === EVENT_CODE.delete || code === EVENT_CODE.backspace) {
clearTimer();
} else if (code === EVENT_CODE.esc) {
if (visible.value) {
close();
}
} else {
startTimer();
}
}
onMounted(() => {
startTimer();
visible.value = true;
});
useEventListener(document, "keydown", onKeydown);
expose({
visible,
close
});
return (_ctx, _cache) => {
return openBlock(), createBlock(Transition, {
name: "notification-fade",
onBeforeLeave: _ctx.onClose,
onAfterLeave: ($event) => _ctx.$emit("destroy")
}, {
default: withCtx(() => [
withDirectives(createElementVNode("div", {
id: _ctx.id,
class: normalizeClass([
unref(namespace) + "-panel",
unref(namespace) + "-notification",
"at-" + _ctx.position,
_ctx.customClass,
unref(horizontalClass),
unref(hasDefinedIcon) ? `${_ctx.type === "error" ? "danger" : _ctx.type}` : ""
]),
style: normalizeStyle(unref(positionStyle)),
role: "notification",
onMouseenter: clearTimer,
onMouseleave: startTimer,
onClick: _ctx.onClick
}, [
createElementVNode("div", { class: "panel-header" }, [
withDirectives(createElementVNode("div", { class: "panel-header-left" }, [
renderSlot(_ctx.$slots, "icon", {}, () => [
createVNode(unref(HlIcon), null, {
default: withCtx(() => [
_ctx.type === "success" ? (openBlock(), createBlock(unref(SystemSuccess), { key: 0 })) : createCommentVNode("v-if", true),
_ctx.type === "info" ? (openBlock(), createBlock(unref(SystemInfo), { key: 1 })) : createCommentVNode("v-if", true),
_ctx.type === "warning" ? (openBlock(), createBlock(unref(SystemWarning), { key: 2 })) : createCommentVNode("v-if", true),
_ctx.type === "danger" || _ctx.type === "error" ? (openBlock(), createBlock(unref(SystemError), { key: 3 })) : createCommentVNode("v-if", true)
]),
_: 1
})
])
], 512), [
[vShow, _ctx.type || _ctx.$slots.icon]
]),
createElementVNode("span", {
class: "panel-title",
textContent: toDisplayString(_ctx.title)
}, null, 8, ["textContent"]),
_ctx.showClose ? (openBlock(), createElementBlock("div", {
key: 0,
class: "panel-header-right"
}, [
createElementVNode("button", {
class: "panel-close",
onClick: withModifiers(close, ["stop"])
}, [
createVNode(unref(HlIcon), null, {
default: withCtx(() => [
createVNode(unref(SystemClose))
]),
_: 1
})
], 8, ["onClick"])
])) : createCommentVNode("v-if", true)
]),
withDirectives(createElementVNode("div", {
class: "panel-body",
style: normalizeStyle(!!_ctx.title ? void 0 : { margin: 0 })
}, [
renderSlot(_ctx.$slots, "default", {}, () => [
!_ctx.dangerouslyUseHTMLString ? (openBlock(), createElementBlock("span", { key: 0 }, toDisplayString(_ctx.message), 1)) : (openBlock(), createElementBlock("span", {
key: 1,
innerHTML: _ctx.message
}, null, 8, ["innerHTML"]))
])
], 4), [
[vShow, _ctx.message]
])
], 46, ["id", "onClick"]), [
[vShow, visible.value]
])
]),
_: 3
}, 8, ["onBeforeLeave", "onAfterLeave"]);
};
}
});
export { _sfc_main as default };
//# sourceMappingURL=notification2.mjs.map