y-design-ssr/libs/toast/index.mjs

SSR component library of YUI with Vue3

import { ref as k, reactive as S, defineComponent as N, onMounted as B, createVNode as o, Transition as z, withDirectives as A, vShow as E, createApp as h, h as $ } from "vue";
const m = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t) ? t.reduce((r, n) => r + m(e, n), "") : Object.keys(t).reduce(
  (r, n) => r + (t[n] ? m(e, n) : ""),
  ""
) : "", I = (e) => (t, r) => {
  let n = t, a = r;
  return n && typeof n != "string" && (a = n, n = ""), n = n ? `${e}__${n}` : e, `${n}${m(n, a)}`;
}, D = () => (e, t) => t ? `${m(`y-${e}`, t)}` : `y-${e}`, M = {
  "pull-refresh": {
    pulling: "下拉刷新...",
    loosing: "释放刷新...",
    loading: "数据加载中...",
    success: "数据已更新",
    failed: "数据跟新失败，请稍后再试"
  },
  "form-item": {
    validateMessage: "请输入正确内容"
  }
};
k("zh-CN");
S({
  "zh-CN": M
});
const v = (e) => {
  const t = `y-${e}`;
  return [t, I(t), D()];
}, L = (e) => isNaN(Number(e)) && typeof e == "string" ? e : `${e}px`, [j, d, q] = v("toast"), F = {
  // 主文案
  title: {
    type: String,
    default: ""
  },
  // 副文案
  message: {
    type: String,
    default: ""
  },
  // 显示位置
  position: {
    type: String,
    default: "middle"
  },
  // 显示时长
  duration: {
    type: [Number, String],
    default: 2e3
  },
  // 关闭时回调
  onClose: {
    type: Function,
    required: !0
  },
  // 动画时长
  animationDuration: {
    type: [Number, String],
    default: 300
  }
}, C = /* @__PURE__ */ N({
  name: j,
  props: F,
  setup(e, {
    slots: t
  }) {
    const r = S({
      visible: !1
      // 控制v-show
    }), n = () => {
      const a = setTimeout(() => {
        r.visible = !1, clearTimeout(a);
      }, Number(e.duration));
    };
    return B(() => {
      r.visible = !0, n();
    }), () => {
      const {
        title: a,
        message: c,
        position: i,
        animationDuration: s,
        onClose: l
      } = e;
      return o(z, {
        name: q("animation", "fade"),
        onAfterLeave: l
      }, {
        default: () => {
          var u;
          return [A(o("div", {
            class: d({
              [i]: !0
            }),
            style: {
              animationDuration: typeof s == "number" ? `${s}ms` : s
            }
          }, [o("div", {
            class: d("content")
          }, [((u = t.icon) == null ? void 0 : u.call(t)) || null, o("div", {
            class: d("text")
          }, [a]), c && o("div", {
            class: d("message")
          }, [c])])]), [[E, r.visible]])];
        }
      });
    };
  }
}), [G, p] = v("icon"), P = (e) => new RegExp(/\.(https|png|jpg|gif|jpeg|webp|apng)$/).test(e.toLowerCase()), R = /* @__PURE__ */ N({
  name: G,
  props: {
    dot: {
      type: Boolean,
      default: !1
    },
    name: {
      type: String,
      default: ""
    },
    size: {
      type: [Number, String],
      default: ""
    },
    info: {
      type: [Number, String],
      default: ""
    },
    badge: {
      type: [Number, String],
      default: ""
    },
    color: {
      type: String,
      default: ""
    },
    subColor: {
      type: String,
      default: ""
    },
    subBg: {
      type: String,
      default: ""
    },
    classPrefix: {
      type: String,
      default: "y-icon"
    },
    /**
     * @ignore
     */
    tag: {
      type: String,
      default: "i"
    }
  },
  emits: ["click"],
  setup(e, {
    slots: t,
    emit: r
  }) {
    const n = P(e.name), a = () => ({
      fontSize: L(e.size),
      color: e.color
    }), c = (i) => {
      r("click", i);
    };
    return () => {
      const {
        name: i,
        classPrefix: s,
        badge: l,
        dot: u,
        subColor: T,
        subBg: y,
        tag: _
      } = e;
      return o(_, {
        class: `${s}${n ? "" : ` y-icon--${i}`}`,
        style: a(),
        onClick: c
      }, {
        default: () => {
          var b;
          return [n ? o("em", {
            class: p("node")
          }, [o("img", {
            class: p("image"),
            src: i,
            alt: "icon"
          }, null)]) : null, u ? o("em", {
            class: p("dot"),
            style: {
              backgroundColor: y
            }
          }, null) : null, l ? o("em", {
            class: p("badge"),
            style: {
              color: T,
              backgroundColor: y
            }
          }, [l]) : null, ((b = t.default) == null ? void 0 : b.call(t)) || null];
        }
      });
    };
  }
});
function w(e) {
  const t = e;
  return t.install = (r) => {
    const { name: n } = e;
    n && r.component(n, e);
  }, t;
}
const U = w(R);
let g = h({}), V = 0;
const x = [], f = document.createElement("div");
f.className = "y-toast-wrapper";
document.body.appendChild(f);
const K = (e, t) => {
  const r = `toast${V += 1}`;
  g = h({
    render: () => $(
      C,
      { ...e, onClose: () => H(r, e.onClose) },
      { icon: () => $(U, { ...t }) }
    )
  });
  const a = document.createElement("div");
  a.className = "y-toast-container", x.push({ id: r, app: g, el: a }), g.mount(a), f.appendChild(a);
}, H = (e, t) => {
  x.forEach((r) => {
    e === r.id && (r.app.unmount(), f.removeChild(r.el), t == null || t());
  });
};
const Q = w(C);
export {
  K as createToast,
  Q as default
};