hongluan-ui/lib/components/notification/src/notification2.js

Hongluan Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var core = require('@vueuse/core');
require('../../../constants/index.js');
require('../../../hooks/index.js');
var index$2 = require('../../icon/index.js');
require('../../system-icon/index.js');
var notification = require('./notification.js');
var index = require('../../../hooks/use-namespace/index.js');
var index$1 = require('../../../hooks/use-z-index/index.js');
var icon = require('../../../constants/icon.js');
var aria = require('../../../constants/aria.js');
var success = require('../../system-icon/src/success.js');
var info = require('../../system-icon/src/info.js');
var warning = require('../../system-icon/src/warning.js');
var error = require('../../system-icon/src/error.js');
var close = require('../../system-icon/src/close.js');

const __default__ = vue.defineComponent({
  name: "Notification"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...__default__,
  props: notification.notificationProps,
  emits: notification.notificationEmits,
  setup(__props, { expose }) {
    const props = __props;
    const { namespace } = index.useNamespace();
    const { currentZIndex } = index$1.useZIndex();
    const visible = vue.ref(false);
    let timer = void 0;
    const hasDefinedIcon = vue.computed(() => !!icon.MessageTypeIconMap[props.type]);
    const horizontalClass = vue.computed(() => props.position.endsWith("right") ? "right" : "left");
    const verticalProperty = vue.computed(() => props.position.startsWith("top") ? "top" : "bottom");
    const positionStyle = vue.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 } = core.useTimeoutFn(() => {
          if (visible.value)
            close$1();
        }, props.duration));
      }
    }
    function clearTimer() {
      timer == null ? void 0 : timer();
    }
    function close$1() {
      visible.value = false;
    }
    function onKeydown({ code }) {
      if (code === aria.EVENT_CODE.delete || code === aria.EVENT_CODE.backspace) {
        clearTimer();
      } else if (code === aria.EVENT_CODE.esc) {
        if (visible.value) {
          close$1();
        }
      } else {
        startTimer();
      }
    }
    vue.onMounted(() => {
      startTimer();
      visible.value = true;
    });
    core.useEventListener(document, "keydown", onKeydown);
    expose({
      visible,
      close: close$1
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createBlock(vue.Transition, {
        name: "notification-fade",
        onBeforeLeave: _ctx.onClose,
        onAfterLeave: ($event) => _ctx.$emit("destroy")
      }, {
        default: vue.withCtx(() => [
          vue.withDirectives(vue.createElementVNode("div", {
            id: _ctx.id,
            class: vue.normalizeClass([
              vue.unref(namespace) + "-panel",
              vue.unref(namespace) + "-notification",
              "at-" + _ctx.position,
              _ctx.customClass,
              vue.unref(horizontalClass),
              vue.unref(hasDefinedIcon) ? `${_ctx.type === "error" ? "danger" : _ctx.type}` : ""
            ]),
            style: vue.normalizeStyle(vue.unref(positionStyle)),
            role: "notification",
            onMouseenter: clearTimer,
            onMouseleave: startTimer,
            onClick: _ctx.onClick
          }, [
            vue.createElementVNode("div", { class: "panel-header" }, [
              vue.withDirectives(vue.createElementVNode("div", { class: "panel-header-left" }, [
                vue.renderSlot(_ctx.$slots, "icon", {}, () => [
                  vue.createVNode(vue.unref(index$2.HlIcon), null, {
                    default: vue.withCtx(() => [
                      _ctx.type === "success" ? (vue.openBlock(), vue.createBlock(vue.unref(success["default"]), { key: 0 })) : vue.createCommentVNode("v-if", true),
                      _ctx.type === "info" ? (vue.openBlock(), vue.createBlock(vue.unref(info["default"]), { key: 1 })) : vue.createCommentVNode("v-if", true),
                      _ctx.type === "warning" ? (vue.openBlock(), vue.createBlock(vue.unref(warning["default"]), { key: 2 })) : vue.createCommentVNode("v-if", true),
                      _ctx.type === "danger" || _ctx.type === "error" ? (vue.openBlock(), vue.createBlock(vue.unref(error["default"]), { key: 3 })) : vue.createCommentVNode("v-if", true)
                    ]),
                    _: 1
                  })
                ])
              ], 512), [
                [vue.vShow, _ctx.type || _ctx.$slots.icon]
              ]),
              vue.createElementVNode("span", {
                class: "panel-title",
                textContent: vue.toDisplayString(_ctx.title)
              }, null, 8, ["textContent"]),
              _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("div", {
                key: 0,
                class: "panel-header-right"
              }, [
                vue.createElementVNode("button", {
                  class: "panel-close",
                  onClick: vue.withModifiers(close$1, ["stop"])
                }, [
                  vue.createVNode(vue.unref(index$2.HlIcon), null, {
                    default: vue.withCtx(() => [
                      vue.createVNode(vue.unref(close["default"]))
                    ]),
                    _: 1
                  })
                ], 8, ["onClick"])
              ])) : vue.createCommentVNode("v-if", true)
            ]),
            vue.withDirectives(vue.createElementVNode("div", {
              class: "panel-body",
              style: vue.normalizeStyle(!!_ctx.title ? void 0 : { margin: 0 })
            }, [
              vue.renderSlot(_ctx.$slots, "default", {}, () => [
                !_ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createElementBlock("span", { key: 0 }, vue.toDisplayString(_ctx.message), 1)) : (vue.openBlock(), vue.createElementBlock("span", {
                  key: 1,
                  innerHTML: _ctx.message
                }, null, 8, ["innerHTML"]))
              ])
            ], 4), [
              [vue.vShow, _ctx.message]
            ])
          ], 46, ["id", "onClick"]), [
            [vue.vShow, visible.value]
          ])
        ]),
        _: 3
      }, 8, ["onBeforeLeave", "onAfterLeave"]);
    };
  }
});

exports["default"] = _sfc_main;
//# sourceMappingURL=notification2.js.map