various-ui/es/methods/message/index.mjs

This is a test version of the Vue 3 component library

import Message from './src/message.vue.mjs';
import { createApp } from 'vue';
import '../../utils/index.mjs';
export { UiMessagePropsOption } from './src/message.mjs';
import { append, remove, use } from '../../utils/src/node/index.mjs';

const UiMessage = (option, callBack) => {
  const app = createApp(Message, option);
  const container = document.createElement("div");
  app.mount(container);
  container.style.left = "50%";
  container.style.position = "fixed";
  container.style.transform = `translateX(-50%)`;
  container.style.transition = "all 0.4s";
  append("ui-messages", container);
  reset(option.offset || 20);
  setTimeout(() => {
    container.style.opacity = "0";
    container.style.transform = `translate(-50%, -${option.offset || 20}px)`;
    setTimeout(() => {
      app.unmount();
      remove("ui-messages", container);
      reset(option.offset || 20);
      callBack && callBack();
    }, 400);
  }, option.delay || 3e3);
};
const reset = (offset) => {
  var _a;
  const container = use("ui-messages");
  if (container && ((_a = container.children) == null ? void 0 : _a.length)) {
    let size = 0;
    for (let i = 0; i < container.children.length; i++) {
      const node2 = container.children[i];
      const rect = node2.getBoundingClientRect();
      node2.style.top = `${i * offset + size}px`;
      size += rect.height;
    }
  }
};
UiMessage.success = (message, callBack) => {
  return UiMessage({ icon: "success", type: "success", message }, callBack);
};
UiMessage.warning = (message, callBack) => {
  return UiMessage({ icon: "warning", type: "warning", message }, callBack);
};
UiMessage.error = (message, callBack) => {
  return UiMessage({ icon: "error", type: "error", message }, callBack);
};
UiMessage.info = (message, callBack) => {
  return UiMessage({ type: "info", message }, callBack);
};
const $message = UiMessage;

export { $message, $message as default };
//# sourceMappingURL=index.mjs.map