@nutui/nutui 3.1.22-beta.5 → 3.1.23-beta.1

package/dist/packages/_es/Toast.js

@@ -1,77 +1,316 @@
 /*!
-* @nutui/nutui v3.1.22-beta.5 Fri Jun 24 2022 15:10:09 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.1 Mon Jun 27 2022 21:39:05 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { reactive as t, onMounted as e, watch as o, computed as n, resolveComponent as i, openBlock as l, createBlock as s, Transition as a, withCtx as c, withDirectives as r, createElementVNode as u, normalizeClass as d, normalizeStyle as m, createElementBlock as p, createVNode as f, createCommentVNode as g, toDisplayString as y, vShow as v, render as C } from "vue";
-import { c as b } from "./component.js";
-import x from "./Icon.js";
-import { _ as S } from "./plugin-vue_export-helper.js";
+import { reactive, onMounted, watch, computed, resolveComponent, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, normalizeStyle, createElementBlock, createVNode, createCommentVNode, toDisplayString, vShow, render } from "vue";
+import { c as createComponent } from "./component.js";
+import _sfc_main$1 from "./Icon.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
 import "./pxCheck.js";
-const { create: h } = b("toast"), k = h({ components: { [x.name]: x }, props: { id: String, msg: String, duration: { type: Number, default: 2e3 }, center: { type: Boolean, default: true }, type: String, customClass: String, bottom: { type: String, default: "30px" }, size: { type: [String, Number], default: "base" }, iconSize: { type: String, default: "20" }, icon: String, textAlignCenter: { type: Boolean, default: true }, loadingRotate: { type: Boolean, default: true }, bgColor: { type: String, default: "" }, onClose: Function, unmount: Function, cover: { type: Boolean, default: false }, coverColor: { type: String, default: "" }, title: { type: String, default: "" }, closeOnClickOverlay: { type: Boolean, default: false } }, emits: ["close"], setup(i2, { emit: l2 }) {
-  let s2;
-  const a2 = t({ mounted: false });
-  e(() => {
-    a2.mounted = true;
-  });
-  const c2 = () => {
-    s2 && (clearTimeout(s2), s2 = null);
-  }, r2 = () => {
-    a2.mounted = false;
-  }, u2 = () => {
-    c2(), i2.duration && (s2 = setTimeout(() => {
-      r2();
-    }, i2.duration));
-  };
-  i2.duration && u2(), o(() => i2.duration, (t2) => {
-    t2 && u2();
-  });
-  const d2 = n(() => i2.type !== "text" || !!i2.icon), m2 = n(() => ["nut-toast", { "nut-toast-center": i2.center }, { "nut-toast-has-icon": d2.value }, { "nut-toast-cover": i2.cover }, { "nut-toast-loading": i2.type === "loading" }, i2.customClass, "nut-toast-" + i2.size]);
-  return { state: a2, hide: r2, clickCover: () => {
-    i2.closeOnClickOverlay && (r2(), l2("close"));
-  }, hasIcon: d2, toastBodyClass: m2, onAfterLeave: () => {
-    c2(), i2.unmount(i2.id), i2.onClose && i2.onClose();
-  } };
-} }), B = { key: 0, class: "nut-toast-icon-wrapper" }, w = { key: 1, class: "nut-toast-title" }, z = ["innerHTML"];
-var A = S(k, [["render", function(t2, e2, o2, n2, C2, b2) {
-  const x2 = i("nut-icon");
-  return l(), s(a, { name: "toast-fade", onAfterLeave: t2.onAfterLeave }, { default: c(() => [r(u("view", { class: d(t2.toastBodyClass), style: m({ bottom: t2.center ? "auto" : t2.bottom, "background-color": t2.coverColor }), onClick: e2[0] || (e2[0] = (...e3) => t2.clickCover && t2.clickCover(...e3)) }, [u("view", { class: "nut-toast-inner", style: m({ "text-align": t2.textAlignCenter ? "center" : "left", "background-color": t2.bgColor }) }, [t2.hasIcon ? (l(), p("view", B, [f(x2, { size: t2.iconSize, color: "#ffffff", name: t2.icon }, null, 8, ["size", "name"])])) : g("", true), t2.title ? (l(), p("div", w, y(t2.title), 1)) : g("", true), u("view", { class: "nut-toast-text", innerHTML: t2.msg }, null, 8, z)], 4)], 6), [[v, t2.state.mounted]])]), _: 1 }, 8, ["onAfterLeave"]);
-}]]);
-const I = { msg: "", id: "", duration: 2e3, center: true, type: "text", title: "", customClass: "", bottom: "30px", size: "base", iconSize: "20", icon: null, textAlignCenter: true, loadingRotate: true, bgColor: "", onClose: null, unmount: null, cover: false, coverColor: "", closeOnClickOverlay: false };
-let L = [], O = [];
-const E = (t2) => {
-  if (t2) {
-    const e2 = document.getElementById(t2);
-    O = O.filter((e3) => e3.id !== t2), L = L.filter((e3) => e3 !== t2), e2 && document.body.removeChild(e2);
-  } else
-    L.forEach((t3) => {
-      const e2 = document.getElementById(t3);
-      e2 && document.body.removeChild(e2);
-    }), O = [], L = [];
-}, T = (t2) => {
-  let e2;
-  if (t2.unmount = E, t2.id) {
-    if (e2 = t2.id, L.find((e3) => e3 === t2.id))
-      return ((t3) => {
-        const e3 = document.getElementById(t3.id);
-        if (e3) {
-          const o3 = O.find((e4) => e4.id === t3.id);
-          t3 = o3 ? { ...I, ...o3, ...t3 } : { ...I, ...t3 };
-          const n3 = f(A, t3);
-          return C(n3, e3), n3.component.ctx;
-        }
-      })(t2);
-  } else
-    e2 = new Date().getTime() + "";
-  (t2 = { ...I, ...t2 }).id = e2, L.push(t2.id), O.push(t2);
-  const o2 = document.createElement("div");
-  o2.id = t2.id;
-  const n2 = f(A, t2);
-  return C(n2, o2), document.body.appendChild(o2), n2.component.ctx;
-}, j = { text: (t2, e2 = {}) => T({ ...e2, type: "text", msg: t2 }), success: (t2, e2 = {}) => T({ icon: "success", ...e2, msg: t2, type: "success" }), fail: (t2, e2 = {}) => T({ icon: "failure", ...e2, msg: t2, type: "fail" }), warn: (t2, e2 = {}) => T({ icon: "tips", ...e2, msg: t2, type: "warn" }), loading: (t2, e2 = {}) => T({ icon: "loading", ...e2, msg: t2, type: "loading" }), hide(t2) {
-  E(t2);
-}, install(t2) {
-  t2.use(A), t2.config.globalProperties.$toast = j;
-} };
-export { A as Toast, j as ToastFunction, j as default };
+const { create } = createComponent("toast");
+const _sfc_main = create({
+  components: {
+    [_sfc_main$1.name]: _sfc_main$1
+  },
+  props: {
+    id: String,
+    msg: String,
+    duration: {
+      type: Number,
+      default: 2e3
+    },
+    center: {
+      type: Boolean,
+      default: true
+    },
+    type: String,
+    customClass: String,
+    bottom: {
+      type: String,
+      default: "30px"
+    },
+    size: {
+      type: [String, Number],
+      default: "base"
+    },
+    iconSize: {
+      type: String,
+      default: "20"
+    },
+    icon: String,
+    textAlignCenter: {
+      type: Boolean,
+      default: true
+    },
+    loadingRotate: {
+      type: Boolean,
+      default: true
+    },
+    bgColor: {
+      type: String,
+      default: ""
+    },
+    onClose: Function,
+    unmount: Function,
+    cover: {
+      type: Boolean,
+      default: false
+    },
+    coverColor: {
+      type: String,
+      default: ""
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    closeOnClickOverlay: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["close"],
+  setup(props, { emit }) {
+    let timer;
+    const state = reactive({
+      mounted: false
+    });
+    onMounted(() => {
+      state.mounted = true;
+    });
+    const clearTimer = () => {
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
+    };
+    const hide = () => {
+      state.mounted = false;
+    };
+    const show = () => {
+      clearTimer();
+      if (props.duration) {
+        timer = setTimeout(() => {
+          hide();
+        }, props.duration);
+      }
+    };
+    const clickCover = () => {
+      if (props.closeOnClickOverlay) {
+        hide();
+        emit("close");
+      }
+    };
+    if (props.duration) {
+      show();
+    }
+    watch(() => props.duration, (val) => {
+      if (val) {
+        show();
+      }
+    });
+    const hasIcon = computed(() => {
+      if (props.type !== "text") {
+        return true;
+      } else {
+        return !!props.icon;
+      }
+    });
+    const toastBodyClass = computed(() => {
+      return [
+        "nut-toast",
+        { "nut-toast-center": props.center },
+        { "nut-toast-has-icon": hasIcon.value },
+        { "nut-toast-cover": props.cover },
+        { "nut-toast-loading": props.type === "loading" },
+        props.customClass,
+        "nut-toast-" + props.size
+      ];
+    });
+    const onAfterLeave = () => {
+      clearTimer();
+      props.unmount(props.id);
+      props.onClose && props.onClose();
+    };
+    return {
+      state,
+      hide,
+      clickCover,
+      hasIcon,
+      toastBodyClass,
+      onAfterLeave
+    };
+  }
+});
+const _hoisted_1 = {
+  key: 0,
+  class: "nut-toast-icon-wrapper"
+};
+const _hoisted_2 = {
+  key: 1,
+  class: "nut-toast-title"
+};
+const _hoisted_3 = ["innerHTML"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_icon = resolveComponent("nut-icon");
+  return openBlock(), createBlock(Transition, {
+    name: "toast-fade",
+    onAfterLeave: _ctx.onAfterLeave
+  }, {
+    default: withCtx(() => [
+      withDirectives(createElementVNode("view", {
+        class: normalizeClass(_ctx.toastBodyClass),
+        style: normalizeStyle({
+          bottom: _ctx.center ? "auto" : _ctx.bottom,
+          "background-color": _ctx.coverColor
+        }),
+        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clickCover && _ctx.clickCover(...args))
+      }, [
+        createElementVNode("view", {
+          class: "nut-toast-inner",
+          style: normalizeStyle({
+            "text-align": _ctx.textAlignCenter ? "center" : "left",
+            "background-color": _ctx.bgColor
+          })
+        }, [
+          _ctx.hasIcon ? (openBlock(), createElementBlock("view", _hoisted_1, [
+            createVNode(_component_nut_icon, {
+              size: _ctx.iconSize,
+              color: "#ffffff",
+              name: _ctx.icon
+            }, null, 8, ["size", "name"])
+          ])) : createCommentVNode("", true),
+          _ctx.title ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true),
+          createElementVNode("view", {
+            class: "nut-toast-text",
+            innerHTML: _ctx.msg
+          }, null, 8, _hoisted_3)
+        ], 4)
+      ], 6), [
+        [vShow, _ctx.state.mounted]
+      ])
+    ]),
+    _: 1
+  }, 8, ["onAfterLeave"]);
+}
+var Toast = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const defaultOptions = {
+  msg: "",
+  id: "",
+  duration: 2e3,
+  center: true,
+  type: "text",
+  title: "",
+  customClass: "",
+  bottom: "30px",
+  size: "base",
+  iconSize: "20",
+  icon: null,
+  textAlignCenter: true,
+  loadingRotate: true,
+  bgColor: "",
+  onClose: null,
+  unmount: null,
+  cover: false,
+  coverColor: "",
+  closeOnClickOverlay: false
+};
+let idsMap = [];
+let optsMap = [];
+const clearToast = (id) => {
+  if (id) {
+    const container = document.getElementById(id);
+    optsMap = optsMap.filter((item) => item.id !== id);
+    idsMap = idsMap.filter((item) => item !== id);
+    if (container) {
+      document.body.removeChild(container);
+    }
+  } else {
+    idsMap.forEach((item) => {
+      const container = document.getElementById(item);
+      if (container) {
+        document.body.removeChild(container);
+      }
+    });
+    optsMap = [];
+    idsMap = [];
+  }
+};
+const updateToast = (opts) => {
+  const container = document.getElementById(opts.id);
+  if (container) {
+    const currentOpt = optsMap.find((item) => item.id === opts.id);
+    if (currentOpt) {
+      opts = { ...defaultOptions, ...currentOpt, ...opts };
+    } else {
+      opts = { ...defaultOptions, ...opts };
+    }
+    const instance = createVNode(Toast, opts);
+    render(instance, container);
+    return instance.component.ctx;
+  }
+};
+const mountToast = (opts) => {
+  opts.unmount = clearToast;
+  let _id;
+  if (opts.id) {
+    _id = opts.id;
+    if (idsMap.find((item) => item === opts.id)) {
+      return updateToast(opts);
+    }
+  } else {
+    _id = new Date().getTime() + "";
+  }
+  opts = { ...defaultOptions, ...opts };
+  opts.id = _id;
+  idsMap.push(opts.id);
+  optsMap.push(opts);
+  const container = document.createElement("div");
+  container.id = opts.id;
+  const instance = createVNode(Toast, opts);
+  render(instance, container);
+  document.body.appendChild(container);
+  return instance.component.ctx;
+};
+const errorMsg = (msg) => {
+  if (!msg) {
+    console.warn("[NutUI Toast]: msg\u4E0D\u80FD\u4E3A\u7A7A");
+    return;
+  }
+};
+const ToastFunction = {
+  text(msg, opts = {}) {
+    errorMsg(msg);
+    return mountToast({ ...opts, type: "text", msg });
+  },
+  success(msg, opts = {}) {
+    errorMsg(msg);
+    return mountToast({ icon: "success", ...opts, msg, type: "success" });
+  },
+  fail(msg, opts = {}) {
+    errorMsg(msg);
+    return mountToast({ icon: "failure", ...opts, msg, type: "fail" });
+  },
+  warn(msg, opts = {}) {
+    errorMsg(msg);
+    return mountToast({ icon: "tips", ...opts, msg, type: "warn" });
+  },
+  loading(msg, opts = {}) {
+    return mountToast({
+      icon: "loading",
+      ...opts,
+      msg,
+      type: "loading"
+    });
+  },
+  hide(id) {
+    clearToast(id);
+  },
+  install(app) {
+    app.use(Toast);
+    app.config.globalProperties.$toast = ToastFunction;
+  }
+};
+export { Toast, ToastFunction, ToastFunction as default };