song-ui-u/lib/components/message/src/message.vue.cjs

vue3 + js的PC前端组件库

'use strict';

var vue = require('vue');
var index$1 = require('../../../hook/use-namespace/index.cjs');
var index$2 = require('../../../hook/use-style/index.cjs');
var index = require('../../../hook/use-zindex/index.cjs');
var core = require('@vueuse/core');
require('../../button/index.cjs');
require('../../buttonGroup/index.cjs');
var index$3 = require('../../icon/index.cjs');
require('../../input/index.cjs');
require('../../textarea/index.cjs');
require('../../row/index.cjs');
require('../../col/index.cjs');
require('../../container/index.cjs');
require('../../checkbox/index.cjs');
require('../../switch/index.cjs');
require('../../form/index.cjs');
require('../index.cjs');
require('../../mask/src/mask.cjs');
require('../../modal/index.cjs');
require('../../messageBox/index.cjs');
require('../../drawer/index.cjs');
require('../../badge/index.cjs');
require('../../space/index.cjs');
require('../../image/index.cjs');
require('../../radio/index.cjs');
require('../../divider/index.cjs');
require('../../chat/index.cjs');
require('../../progress/index.cjs');
require('../../upload/index.cjs');
require('../../vTree/index.cjs');
require('../../table/index.cjs');
require('../../tabs/index.cjs');
require('../../menu/index.cjs');
require('../../steps/index.cjs');
require('../../header/index.cjs');
require('../../breadcrumble/index.cjs');
require('../../datePicker/index.cjs');
require('../../tooltip/index.cjs');
require('../../popover/index.cjs');
require('../../timePicker/index.cjs');
require('../../select/index.cjs');
require('../../collapse/index.cjs');
require('../../card/index.cjs');
require('../../timeline/index.cjs');
require('../../tag/index.cjs');
require('../../result/index.cjs');
require('../../sender/index.cjs');
var componentsType = require('../../../utils/componentsType.cjs');
var themeType = require('../../../utils/themeType.cjs');
var instance = require('./instance.cjs');
var _pluginVue_exportHelper = require('../../../_virtual/_plugin-vue_export-helper.cjs');

const __default__ = { name: "AlMessage" };

const _sfc_main = /*#__PURE__*/Object.assign(__default__, {
  props: {
  type: {
    type: String,
    default: "",
  },
  id: {
    type: String,
    default: "",
  },
  offset: {
    type: Number,
    default: 0,
  },
  content: {
    type: String,
    default: "",
  },
  duration: {
    type: Number,
    default: 3000,
  },
  onClose: Function,
  onUnmount: Function,
  showClose: Boolean,
  background: Boolean,
},
  setup(__props, { expose: __expose }) {

const ns = index$1.useNamespace("message");
const { nextZindex, currentZindex } = index.useZindex();

const uStyle = index$2.useStyle();
/** props */
const props = __props;

const visible = vue.ref(false);
const messageRef = vue.ref(null);
const height = vue.ref(0);

// 上一个message
const prevButtonPosition = vue.computed(() => instance.getPrevBottomOffset(props.id));
// 偏移更新
const offsetTop = vue.computed(() => {
  return props.offset + prevButtonPosition.value;
});
// 底部到可视区顶部的距离
const bottomPosition = vue.computed(() => height.value + offsetTop.value);
// 自定义样式
const customStyle = vue.computed(() => {
  return {
    top: offsetTop.value + "px",
    zIndex: currentZindex.value,
  };
});
// icon
const icon = vue.computed(() => {
  return componentsType.typeIcon[props.type] || props.type;
});
const theme = vue.computed(() => themeType.themeType?.[props.type] || props.type);

const startTime = async () => {
  if (props.duration === 0) {
    return false;
  }
  ({ stop } = core.useTimeoutFn(() => {
    close();
  }, props.duration));
};

const onMouseEnter = () => stop?.();

const close = () => (visible.value = false);

vue.onMounted(() => {
  visible.value = true;
  nextZindex();
  startTime();
});

core.useResizeObserver(messageRef, (entries) => {
  const entry = entries[0];
  height.value = entry.contentRect.height;
});

__expose({ bottomPosition });

const __returned__ = { ns, nextZindex, currentZindex, uStyle, props, visible, messageRef, height, prevButtonPosition, offsetTop, bottomPosition, customStyle, icon, theme, startTime, onMouseEnter, close, computed: vue.computed, ref: vue.ref, onMounted: vue.onMounted, get useNamespace() { return index$1.useNamespace }, get useStyle() { return index$2.useStyle }, get tryOnBeforeUnmount() { return core.tryOnBeforeUnmount }, get useResizeObserver() { return core.useResizeObserver }, get useTimeoutFn() { return core.useTimeoutFn }, get XIcon() { return index$3.XIcon }, get typeIcon() { return componentsType.typeIcon }, get themeType() { return themeType.themeType }, get getPrevBottomOffset() { return instance.getPrevBottomOffset }, get useZindex() { return index.useZindex } };
Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
return __returned__
}

});

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return (vue.openBlock(), vue.createBlock(vue.Transition, {
    name: $setup.ns.b(),
    onLeave: $props.onClose,
    onAfterLeave: $props.onUnmount,
    persisted: ""
  }, {
    default: vue.withCtx(() => [
      vue.withDirectives(vue.createElementVNode("div", {
        ref: "messageRef",
        class: vue.normalizeClass([$setup.ns.b(), $setup.ns.m($setup.theme), $setup.ns.is('background', $props.background)]),
        style: vue.normalizeStyle([$setup.customStyle]),
        onMouseenter: $setup.onMouseEnter,
        onMouseleave: $setup.startTime
      }, [
        vue.createElementVNode("div", {
          class: vue.normalizeClass([$setup.ns.e('icon')])
        }, [
          vue.createVNode($setup["XIcon"], null, {
            default: vue.withCtx(() => [
              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($setup.icon)))
            ]),
            _: 1 /* STABLE */
          })
        ], 2 /* CLASS */),
        vue.createElementVNode("div", {
          class: vue.normalizeClass([$setup.ns.e('content')])
        }, vue.toDisplayString($props.content), 3 /* TEXT, CLASS */),
        ($props.showClose)
          ? (vue.openBlock(), vue.createElementBlock("div", {
              key: 0,
              class: vue.normalizeClass([$setup.ns.e('close')]),
              onClick: vue.withModifiers($setup.close, ["stop"])
            }, [
              vue.createVNode($setup["XIcon"], null, {
                default: vue.withCtx(() => [
                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($setup.typeIcon['close'])))
                ]),
                _: 1 /* STABLE */
              })
            ], 2 /* CLASS */))
          : vue.createCommentVNode("v-if", true)
      ], 38 /* CLASS, STYLE, NEED_HYDRATION */), [
        [vue.vShow, $setup.visible]
      ])
    ]),
    _: 1 /* STABLE */
  }, 8 /* PROPS */, ["name", "onLeave", "onAfterLeave"]))
}
var MessageNode = /*#__PURE__*/_pluginVue_exportHelper(_sfc_main, [['render',_sfc_render],['__file',"E:\\code\\my-code\\song-ui-ultra\\packages\\components\\message\\src\\message.vue"]]);

module.exports = MessageNode;
//# sourceMappingURL=message.vue.cjs.map