song-ui-u/es/components/message/src/message.vue.mjs

vue3 + js的PC前端组件库

import { ref, computed, onMounted, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, normalizeStyle, createVNode, resolveDynamicComponent, toDisplayString, createElementBlock, withModifiers, createCommentVNode, vShow } from 'vue';
import { useNamespace } from '../../../hook/use-namespace/index.mjs';
import { useStyle } from '../../../hook/use-style/index.mjs';
import { useZindex } from '../../../hook/use-zindex/index.mjs';
import { useResizeObserver, useTimeoutFn, tryOnBeforeUnmount } from '@vueuse/core';
import '../../button/index.mjs';
import '../../buttonGroup/index.mjs';
import { XIcon } from '../../icon/index.mjs';
import '../../input/index.mjs';
import '../../textarea/index.mjs';
import '../../row/index.mjs';
import '../../col/index.mjs';
import '../../container/index.mjs';
import '../../checkbox/index.mjs';
import '../../switch/index.mjs';
import '../../form/index.mjs';
import '../index.mjs';
import '../../mask/src/mask.mjs';
import '../../modal/index.mjs';
import '../../messageBox/index.mjs';
import '../../drawer/index.mjs';
import '../../badge/index.mjs';
import '../../space/index.mjs';
import '../../image/index.mjs';
import '../../radio/index.mjs';
import '../../divider/index.mjs';
import '../../chat/index.mjs';
import '../../progress/index.mjs';
import '../../upload/index.mjs';
import '../../vTree/index.mjs';
import '../../table/index.mjs';
import '../../tabs/index.mjs';
import '../../menu/index.mjs';
import '../../steps/index.mjs';
import '../../header/index.mjs';
import '../../breadcrumble/index.mjs';
import '../../datePicker/index.mjs';
import '../../tooltip/index.mjs';
import '../../popover/index.mjs';
import '../../timePicker/index.mjs';
import '../../select/index.mjs';
import '../../collapse/index.mjs';
import '../../card/index.mjs';
import '../../timeline/index.mjs';
import '../../tag/index.mjs';
import '../../result/index.mjs';
import '../../sender/index.mjs';
import { typeIcon } from '../../../utils/componentsType.mjs';
import { themeType } from '../../../utils/themeType.mjs';
import { getPrevBottomOffset } from './instance.mjs';
import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';

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 = useNamespace("message");
const { nextZindex, currentZindex } = useZindex();

const uStyle = useStyle();
/** props */
const props = __props;

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

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

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

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

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

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

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, ref, onMounted, get useNamespace() { return useNamespace }, get useStyle() { return useStyle }, get tryOnBeforeUnmount() { return tryOnBeforeUnmount }, get useResizeObserver() { return useResizeObserver }, get useTimeoutFn() { return useTimeoutFn }, get XIcon() { return XIcon }, get typeIcon() { return typeIcon }, get themeType() { return themeType }, get getPrevBottomOffset() { return getPrevBottomOffset }, get useZindex() { return useZindex } };
Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
return __returned__
}

});

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

export { MessageNode as default };
//# sourceMappingURL=message.vue.mjs.map