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

SSR component library of YUI with Vue3

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