@extclp/vexip-ui/es/components/toast/toast.vue2.mjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

import { defineComponent as _, computed as z, reactive as O, onMounted as W, nextTick as B, createElementBlock as l, openBlock as t, normalizeStyle as d, normalizeClass as i, unref as o, createVNode as y, Transition as f, withCtx as C, createCommentVNode as u, withModifiers as b, createBlock as k, Fragment as F, mergeProps as v, normalizeProps as L, toDisplayString as R } from "vue";
import "../icon/index.mjs";
import "../renderer/index.mjs";
import { useNameHelper as V, useProps as D, createIconProp as E, useZIndex as Z, useIcons as j } from "@vexip-ui/config";
import { isFunction as m } from "@vexip-ui/utils";
import { toastProps as q } from "./props.mjs";
import { effectiveTypes as w } from "./symbol.mjs";
import A from "../renderer/renderer.mjs";
import x from "../icon/icon.mjs";
const G = ["innerHTML"], oe = /* @__PURE__ */ _({
  name: "Toast",
  __name: "toast",
  props: q,
  setup(P, { expose: h }) {
    const r = V("toast"), s = D("toast", P, {
      bodyWidth: 100,
      icon: E(),
      iconProps: () => ({}),
      position: "center",
      transitionName: () => r.ns("ease"),
      closable: !1,
      maskClose: !1,
      showMask: !1,
      maskClass: null,
      maskStyle: null,
      renderer: {
        default: null,
        isFunc: !0,
        static: !0
      },
      parseHtml: !1
    }), M = Z(), c = j(), H = z(() => ({
      success: c.value.success,
      warning: c.value.warning,
      error: c.value.error,
      loading: c.value.loading
    })), e = O({
      visible: !1,
      zIndex: 0,
      type: null,
      content: "",
      icon: s.icon,
      iconProps: s.iconProps,
      position: s.position,
      transition: s.transitionName,
      closable: s.closable,
      maskClose: s.maskClose,
      showMask: s.showMask,
      maskClass: s.maskClass,
      maskStyle: s.maskStyle,
      parseHtml: s.parseHtml,
      textOnly: !1,
      renderer: s.renderer,
      onClose: null
    }), S = new Promise((n) => {
      W(() => {
        B(n);
      });
    });
    h({ state: e, openToast: I, closeToast: p, handleReset: g });
    async function I(n) {
      if (await S, e.zIndex = M(), e.type = n.type ?? null, e.content = n.content ?? "", e.icon = n.icon ?? s.icon, e.iconProps = n.iconProps ?? s.iconProps, e.position = n.position ?? s.position, e.transition = n.transitionName ?? s.transitionName, e.closable = n.closable ?? s.closable, e.maskClose = n.maskClose ?? s.maskClose, e.showMask = n.showMask ?? s.showMask, e.maskClass = n.maskClass ?? s.maskClass, e.maskStyle = n.maskStyle ?? s.maskStyle, e.parseHtml = n.parseHtml ?? s.parseHtml, e.renderer = m(n.renderer) ? n.renderer : s.renderer, e.onClose = n.onClose || null, e.textOnly = !e.icon && !(e.type && w.includes(e.type)), m(e.renderer)) {
        const a = e.renderer;
        e.renderer = () => a(n), e.textOnly = !1;
      }
      e.visible = !0;
    }
    function p() {
      e.visible = !1, m(e.onClose) && e.onClose();
    }
    function g() {
      e.visible || (e.type = null, e.content = "", e.icon = s.icon, e.iconProps = s.iconProps, e.position = s.position, e.transition = s.transitionName, e.closable = s.closable, e.maskClose = s.maskClose, e.showMask = s.showMask, e.maskClass = s.maskClass, e.maskStyle = s.maskStyle, e.parseHtml = s.parseHtml, e.textOnly = !1, e.renderer = s.renderer, e.onClose = null);
    }
    function N() {
      e.visible && e.closable && p();
    }
    function T() {
      e.visible && e.maskClose && p();
    }
    return (n, a) => (t(), l("div", {
      class: i({
        [o(r).b()]: !0,
        [o(r).bs("vars")]: !0,
        [o(r).bm("text-only")]: e.textOnly
      }),
      role: "alert",
      style: d({
        zIndex: e.zIndex
      }),
      "aria-atomic": "true",
      "aria-live": "assertive"
    }, [
      y(f, {
        name: o(r).ns("fade")
      }, {
        default: C(() => [
          e.showMask && e.visible ? (t(), l("div", {
            key: 0,
            class: i([o(r).be("mask"), e.maskClass]),
            style: d(e.maskStyle),
            onClick: T,
            onWheel: a[0] || (a[0] = b(() => {
            }, ["stop", "prevent"]))
          }, null, 38)) : u("", !0)
        ]),
        _: 1
      }, 8, ["name"]),
      y(f, {
        name: e.transition
      }, {
        default: C(() => [
          e.visible ? (t(), l("div", {
            key: 0,
            class: i({
              [o(r).be("wrapper")]: !0,
              [o(r).bem("wrapper", e.position)]: e.position !== "center",
              [o(r).bem("wrapper", "closable")]: e.closable
            }),
            onClick: N,
            onWheel: a[1] || (a[1] = b(() => {
            }, ["stop", "prevent"]))
          }, [
            o(m)(e.renderer) ? (t(), k(o(A), {
              key: 0,
              renderer: e.renderer
            }, null, 8, ["renderer"])) : (t(), l(F, { key: 1 }, [
              e.icon || e.type && o(w).includes(e.type) ? (t(), l("div", {
                key: 0,
                class: i(o(r).be("icon"))
              }, [
                e.icon ? (t(), k(o(x), v({
                  key: 0,
                  icon: e.icon,
                  scale: 1.8
                }, e.iconProps), null, 16, ["icon"])) : (t(), k(o(x), L(v({ key: 1 }, { ...H.value[e.type], scale: 1.8, ...e.iconProps })), null, 16))
              ], 2)) : u("", !0),
              e.parseHtml ? (t(), l("div", {
                key: 1,
                class: i(o(r).be("content")),
                innerHTML: e.content
              }, null, 10, G)) : (t(), l("div", {
                key: 2,
                class: i(o(r).be("content"))
              }, R(e.content), 3))
            ], 64))
          ], 34)) : u("", !0)
        ]),
        _: 1
      }, 8, ["name"])
    ], 6));
  }
});
export {
  oe as default
};
//# sourceMappingURL=toast.vue2.mjs.map