@opensig/opendesign/lib/message/use-message.js

<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const vue = require("vue");
const is = require("../_utils/is.js");
const OMessageList_vue_vue_type_script_setup_true_lang = require("./OMessageList.vue.js");
const vueUtils = require("../_utils/vue-utils.js");
const DEFAULT_OPTIONS = {
  status: "info",
  position: "top",
  duration: 3e3
};
const instanceMap = /* @__PURE__ */ new Map();
const targetOffset = 8;
const normalizeOptions = (params) => {
  const options = !params || is.isString(params) ? { content: params } : params;
  const normalized = {
    ...DEFAULT_OPTIONS,
    ...options
  };
  return normalized;
};
const getMessageStyle = async (target, position = "top", align = "center") => {
  if (!target) {
    return;
  }
  const targetEl = await vueUtils.resolveHtmlElement(target);
  if (!targetEl) {
    return;
  }
  const rect = targetEl.getBoundingClientRect();
  let pos = "bottom";
  let top = window.innerHeight - rect.top + targetOffset;
  let left = rect.left;
  let transform = "translateX(-50%)";
  if (position === "bottom") {
    pos = "top";
    top = rect.top + rect.height + targetOffset;
  }
  if (align === "right") {
    left = rect.left + rect.width;
    transform = "translateX(-100%)";
  } else if (align === "left") {
    left = rect.left;
    transform = "translateX(0%)";
  } else {
    left = rect.left + rect.width / 2;
    transform = "translateX(-50%)";
  }
  return {
    position: pos,
    "--message-list-offset": `${top}px`,
    left: `${left}px`,
    transform
  };
};
function useMessage(target) {
  const showMessage = async (params) => {
    var _a, _b;
    const options = normalizeOptions(params);
    const { position, targetAlign } = options;
    const msgStyle = await getMessageStyle(target, position, targetAlign);
    let instance = instanceMap.get(target ?? position);
    if (!instance) {
      let wrap = document.createElement("div");
      const vnode = vue.h(OMessageList_vue_vue_type_script_setup_true_lang, {
        position: (msgStyle == null ? void 0 : msgStyle.position) ?? position,
        onDestory: () => {
          if (wrap) {
            document.body.removeChild(wrap);
            wrap = null;
          }
          instanceMap.set(target ?? position, void 0);
        },
        style: msgStyle
      });
      vue.render(vnode, wrap);
      const vm = vnode.component;
      (_a = vm.exposed) == null ? void 0 : _a.add(options);
      instance = vm;
      instanceMap.set(target ?? position, instance);
      document.body.appendChild(wrap);
    } else {
      (_b = instance.exposed) == null ? void 0 : _b.add(options);
    }
  };
  const info = (params) => {
    return showMessage({
      ...params,
      status: "info"
    });
  };
  const success = (params) => {
    return showMessage({
      ...params,
      status: "success"
    });
  };
  const warning = (params) => {
    return showMessage({
      ...params,
      status: "warning"
    });
  };
  const danger = (params) => {
    return showMessage({
      ...params,
      status: "danger"
    });
  };
  const loading = (params) => {
    return showMessage({
      ...params,
      status: "loading"
    });
  };
  const show = (params) => {
    return showMessage({
      ...params
    });
  };
  const closeAll = () => {
    var _a;
    for (const ins of instanceMap.values()) {
      (_a = ins == null ? void 0 : ins.exposed) == null ? void 0 : _a.removeAll();
    }
  };
  const close = () => {
    var _a;
    if (target) {
      const instance = instanceMap.get(target);
      (_a = instance == null ? void 0 : instance.exposed) == null ? void 0 : _a.remove();
    }
  };
  return {
    info,
    success,
    warning,
    danger,
    loading,
    show,
    close,
    closeAll
  };
}
exports.useMessage = useMessage;