y-design-ssr 0.2.0 → 0.2.2

package/libs/toast/index.mjs

@@ -1,11 +1,40 @@
-import { ref as B, reactive as S, defineComponent as N, onMounted as z, createVNode as a, Transition as A, withDirectives as T, vShow as _, createApp as h, h as $ } from "vue";
-const f = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t) ? t.reduce((r, n) => r + f(e, n), "") : Object.keys(t).reduce(
-  (r, n) => r + (t[n] ? f(e, n) : ""),
-  ""
-) : "", D = (e) => (t, r) => {
-  let n = t, o = r;
-  return n && typeof n != "string" && (o = n, n = ""), n = n ? `${e}__${n}` : e, `${n}${f(n, o)}`;
-}, E = () => (e, t) => t ? `${f(`y-${e}`, t)}` : `y-${e}`, M = {
+import { ref, reactive, defineComponent, onMounted, createVNode, Transition, withDirectives, vShow, createApp, h } from "vue";
+const getMods = (el, mods) => {
+  if (!mods) {
+    return "";
+  }
+  if (typeof mods === "string") {
+    return ` ${el}--${mods}`;
+  }
+  if (Array.isArray(mods)) {
+    return mods.reduce((acc, cur) => acc + getMods(el, cur), "");
+  }
+  return Object.keys(mods).reduce(
+    (acc, cur) => acc + (mods[cur] ? getMods(el, cur) : ""),
+    ""
+  );
+};
+const createBEM = (block) => {
+  return (el, mods) => {
+    let _el = el;
+    let _mods = mods;
+    if (_el && typeof _el !== "string") {
+      _mods = _el;
+      _el = "";
+    }
+    _el = _el ? `${block}__${_el}` : block;
+    return `${_el}${getMods(_el, _mods)}`;
+  };
+};
+const createGlobalBem = () => {
+  return (el, mods) => {
+    if (!mods) {
+      return `y-${el}`;
+    }
+    return `${getMods(`y-${el}`, mods)}`;
+  };
+};
+const defaultLang = {
   "pull-refresh": {
     pulling: "下拉刷新...",
     loosing: "释放刷新...",
@@ -17,14 +46,22 @@ const f = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t)
     validateMessage: "请输入正确内容"
   }
 };
-B("zh-CN");
-S({
-  "zh-CN": M
+ref("zh-CN");
+reactive({
+  "zh-CN": defaultLang
 });
-const v = (e) => {
-  const t = `y-${e}`;
-  return [t, D(t), E()];
-}, I = (e) => isNaN(Number(e)) && typeof e == "string" ? e : `${e}px`, [L, d, j] = v("toast"), q = {
+const createNamespace = (name2) => {
+  const prefixedName = `y-${name2}`;
+  return [prefixedName, createBEM(prefixedName), createGlobalBem()];
+};
+const parseUnit = (val) => {
+  if (isNaN(Number(val)) && typeof val === "string") {
+    return val;
+  }
+  return `${val}px`;
+};
+const [name, bem$1, gBem] = createNamespace("toast");
+const _props = {
   // 主文案
   title: {
     type: String,
@@ -48,67 +85,78 @@ const v = (e) => {
   // 关闭时回调
   onClose: {
     type: Function,
-    required: !0
+    required: true
   },
   // 动画时长
   animationDuration: {
     type: [Number, String],
     default: 300
   }
-}, C = /* @__PURE__ */ N({
-  name: L,
-  props: q,
-  setup(e, {
-    slots: t
+};
+const Toast = /* @__PURE__ */ defineComponent({
+  name,
+  props: _props,
+  setup(props, {
+    slots
   }) {
-    const r = S({
-      visible: !1
+    const state = reactive({
+      visible: false
       // 控制v-show
-    }), n = () => {
-      const o = setTimeout(() => {
-        r.visible = !1, clearTimeout(o);
-      }, Number(e.duration));
+    });
+    const show = () => {
+      const timer = setTimeout(() => {
+        state.visible = false;
+        clearTimeout(timer);
+      }, Number(props.duration));
     };
-    return z(() => {
-      r.visible = !0, n();
-    }), () => {
+    onMounted(() => {
+      state.visible = true;
+      show();
+    });
+    return () => {
       const {
-        title: o,
-        message: l,
-        position: i,
-        animationDuration: s,
-        onClose: c
-      } = e;
-      return a(A, {
-        name: j("animation", "fade"),
-        onAfterLeave: c
+        title,
+        message,
+        position,
+        animationDuration,
+        onClose
+      } = props;
+      return createVNode(Transition, {
+        "name": gBem("animation", "fade"),
+        "onAfterLeave": onClose
       }, {
         default: () => {
-          var u;
-          return [T(a("div", {
-            class: d({
-              [i]: !0
+          var _a;
+          return [withDirectives(createVNode("div", {
+            "class": bem$1({
+              [position]: true
             }),
-            style: {
-              animationDuration: typeof s == "number" ? `${s}ms` : s
+            "style": {
+              animationDuration: typeof animationDuration === "number" ? `${animationDuration}ms` : animationDuration
             }
-          }, [a("div", {
-            class: d("content")
-          }, [((u = t.icon) == null ? void 0 : u.call(t)) || null, a("div", {
-            class: d("text")
-          }, [o]), l && a("div", {
-            class: d("message")
-          }, [l])])]), [[_, r.visible]])];
+          }, [createVNode("div", {
+            "class": bem$1("content")
+          }, [((_a = slots.icon) == null ? void 0 : _a.call(slots)) || null, createVNode("div", {
+            "class": bem$1("text")
+          }, [title]), message && createVNode("div", {
+            "class": bem$1("message")
+          }, [message])])]), [[vShow, state.visible]])];
         }
       });
     };
   }
-}), [F, p] = v("icon"), G = (e) => new RegExp(/\.(https|png|jpg|gif|jpeg|webp|apng)$/).test(e.toLowerCase()), m = /* @__PURE__ */ N({
-  name: F,
+});
+const [cname, bem] = createNamespace("icon");
+const isImage = (name2) => {
+  const re = new RegExp(/\.(https|png|jpg|gif|jpeg|webp|apng)$/);
+  return re.test(name2.toLowerCase());
+};
+const Icon = /* @__PURE__ */ defineComponent({
+  name: cname,
   props: {
     dot: {
       type: Boolean,
-      default: !1
+      default: false
     },
     name: {
       type: String,
@@ -151,81 +199,102 @@ const v = (e) => {
     }
   },
   emits: ["click"],
-  setup(e, {
-    slots: t,
-    emit: r
+  setup(props, {
+    slots,
+    emit
   }) {
-    const n = G(e.name), o = () => ({
-      fontSize: I(e.size),
-      color: e.color
-    }), l = (i) => {
-      r("click", i);
+    const isImg = isImage(props.name);
+    const getStyle = () => ({
+      fontSize: parseUnit(props.size),
+      color: props.color
+    });
+    const onClick = (event) => {
+      emit("click", event);
     };
     return () => {
       const {
-        name: i,
-        classPrefix: s,
-        badge: c,
-        dot: u,
-        subColor: x,
-        subBg: y,
-        tag: k
-      } = e;
-      return a(k, {
-        class: `${s}${n ? "" : ` y-icon--${i}`}`,
-        style: o(),
-        onClick: l
+        name: name2,
+        classPrefix,
+        badge,
+        dot,
+        subColor,
+        subBg,
+        tag: Tag
+      } = props;
+      return createVNode(Tag, {
+        "class": `${classPrefix}${isImg ? "" : ` y-icon--${name2}`}`,
+        "style": getStyle(),
+        "onClick": onClick
       }, {
         default: () => {
-          var b;
-          return [n ? a("em", {
-            class: p("node")
-          }, [a("img", {
-            class: p("image"),
-            src: i,
-            alt: "icon"
-          }, null)]) : null, u ? a("em", {
-            class: p("dot"),
-            style: {
-              backgroundColor: y
+          var _a;
+          return [isImg ? createVNode("em", {
+            "class": bem("node")
+          }, [createVNode("img", {
+            "class": bem("image"),
+            "src": name2,
+            "alt": "icon"
+          }, null)]) : null, dot ? createVNode("em", {
+            "class": bem("dot"),
+            "style": {
+              backgroundColor: subBg
             }
-          }, null) : null, c ? a("em", {
-            class: p("badge"),
-            style: {
-              color: x,
-              backgroundColor: y
+          }, null) : null, badge ? createVNode("em", {
+            "class": bem("badge"),
+            "style": {
+              color: subColor,
+              backgroundColor: subBg
             }
-          }, [c]) : null, ((b = t.default) == null ? void 0 : b.call(t)) || null];
+          }, [badge]) : null, ((_a = slots.default) == null ? void 0 : _a.call(slots)) || null];
         }
       });
     };
   }
 });
-m.install = (e) => {
-  const { name: t } = m;
-  e.component(t, m);
+const reset = "";
+const libs = "";
+const font = "";
+const animation = "";
+const theme = "";
+const style$1 = "";
+Icon.install = (app) => {
+  const { name: name2 } = Icon;
+  app.component(name2, Icon);
 };
-let g = h({}), P = 0;
-const w = [], R = (e, t) => {
-  const r = `toast${P += 1}`;
-  g = h({
-    render: () => $(
-      C,
-      { ...e, onClose: () => U(r, e.onClose) },
-      { icon: () => $(m, { ...t }) }
-    )
-  });
-  const o = document.createElement("div");
-  w.push({ id: r, app: g, el: o }), g.mount(o), document.body.appendChild(o);
-}, U = (e, t) => {
-  w.forEach((r) => {
-    e === r.id && (r.app.unmount(), document.body.removeChild(r.el), t == null || t());
+let toastApp = createApp({});
+let num = 0;
+const treasures = [];
+const toastCreate = (customProps, iconProps) => {
+  const id = `toast${num += 1}`;
+  const wrapper = {
+    render: () => {
+      return h(
+        Toast,
+        { ...customProps, onClose: () => close(id, customProps.onClose) },
+        { icon: () => h(Icon, { ...iconProps }) }
+      );
+    }
+  };
+  toastApp = createApp(wrapper);
+  const element = document.createElement("div");
+  treasures.push({ id, app: toastApp, el: element });
+  toastApp.mount(element);
+  document.body.appendChild(element);
+};
+const close = (id, userOnClose) => {
+  treasures.forEach((obj) => {
+    if (id === obj.id) {
+      obj.app.unmount();
+      document.body.removeChild(obj.el);
+      userOnClose == null ? void 0 : userOnClose();
+    }
   });
 };
-C.install = (e) => {
-  e.provide("toast", R);
+const style = "";
+Toast.install = (app) => {
+  app.provide("toast", toastCreate);
 };
 export {
-  C as default,
-  R as toastCreate
+  Toast as default,
+  toastCreate
 };