y-design-ssr 0.2.3 → 0.2.4

package/libs/toast/index.mjs

@@ -1,40 +1,11 @@
-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 = {
+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 = {
   "pull-refresh": {
     pulling: "下拉刷新...",
     loosing: "释放刷新...",
@@ -46,22 +17,14 @@ const defaultLang = {
     validateMessage: "请输入正确内容"
   }
 };
-ref("zh-CN");
-reactive({
-  "zh-CN": defaultLang
+B("zh-CN");
+S({
+  "zh-CN": M
 });
-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 = {
+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 = {
   // 主文案
   title: {
     type: String,
@@ -85,78 +48,67 @@ const _props = {
   // 关闭时回调
   onClose: {
     type: Function,
-    required: true
+    required: !0
   },
   // 动画时长
   animationDuration: {
     type: [Number, String],
     default: 300
   }
-};
-const Toast = /* @__PURE__ */ defineComponent({
-  name,
-  props: _props,
-  setup(props, {
-    slots
+}, C = /* @__PURE__ */ N({
+  name: L,
+  props: q,
+  setup(e, {
+    slots: t
   }) {
-    const state = reactive({
-      visible: false
+    const r = S({
+      visible: !1
       // 控制v-show
-    });
-    const show = () => {
-      const timer = setTimeout(() => {
-        state.visible = false;
-        clearTimeout(timer);
-      }, Number(props.duration));
+    }), n = () => {
+      const o = setTimeout(() => {
+        r.visible = !1, clearTimeout(o);
+      }, Number(e.duration));
     };
-    onMounted(() => {
-      state.visible = true;
-      show();
-    });
-    return () => {
+    return z(() => {
+      r.visible = !0, n();
+    }), () => {
       const {
-        title,
-        message,
-        position,
-        animationDuration,
-        onClose
-      } = props;
-      return createVNode(Transition, {
-        "name": gBem("animation", "fade"),
-        "onAfterLeave": onClose
+        title: o,
+        message: l,
+        position: i,
+        animationDuration: s,
+        onClose: c
+      } = e;
+      return a(A, {
+        name: j("animation", "fade"),
+        onAfterLeave: c
       }, {
         default: () => {
-          var _a;
-          return [withDirectives(createVNode("div", {
-            "class": bem$1({
-              [position]: true
+          var u;
+          return [T(a("div", {
+            class: d({
+              [i]: !0
             }),
-            "style": {
-              animationDuration: typeof animationDuration === "number" ? `${animationDuration}ms` : animationDuration
+            style: {
+              animationDuration: typeof s == "number" ? `${s}ms` : s
             }
-          }, [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]])];
+          }, [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]])];
         }
       });
     };
   }
-});
-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,
+}), [F, p] = v("icon"), G = (e) => new RegExp(/\.(https|png|jpg|gif|jpeg|webp|apng)$/).test(e.toLowerCase()), m = /* @__PURE__ */ N({
+  name: F,
   props: {
     dot: {
       type: Boolean,
-      default: false
+      default: !1
     },
     name: {
       type: String,
@@ -199,102 +151,81 @@ const Icon = /* @__PURE__ */ defineComponent({
     }
   },
   emits: ["click"],
-  setup(props, {
-    slots,
-    emit
+  setup(e, {
+    slots: t,
+    emit: r
   }) {
-    const isImg = isImage(props.name);
-    const getStyle = () => ({
-      fontSize: parseUnit(props.size),
-      color: props.color
-    });
-    const onClick = (event) => {
-      emit("click", event);
+    const n = G(e.name), o = () => ({
+      fontSize: I(e.size),
+      color: e.color
+    }), l = (i) => {
+      r("click", i);
     };
     return () => {
       const {
-        name: name2,
-        classPrefix,
-        badge,
-        dot,
-        subColor,
-        subBg,
-        tag: Tag
-      } = props;
-      return createVNode(Tag, {
-        "class": `${classPrefix}${isImg ? "" : ` y-icon--${name2}`}`,
-        "style": getStyle(),
-        "onClick": onClick
+        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
       }, {
         default: () => {
-          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
+          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
             }
-          }, null) : null, badge ? createVNode("em", {
-            "class": bem("badge"),
-            "style": {
-              color: subColor,
-              backgroundColor: subBg
+          }, null) : null, c ? a("em", {
+            class: p("badge"),
+            style: {
+              color: x,
+              backgroundColor: y
             }
-          }, [badge]) : null, ((_a = slots.default) == null ? void 0 : _a.call(slots)) || null];
+          }, [c]) : null, ((b = t.default) == null ? void 0 : b.call(t)) || null];
         }
       });
     };
   }
 });
-const reset = "";
-const libs = "";
-const font = "";
-const animation = "";
-const theme = "";
-const style$1 = "";
-Icon.install = (app) => {
-  const { name: name2 } = Icon;
-  app.component(name2, Icon);
+m.install = (e) => {
+  const { name: t } = m;
+  e.component(t, m);
 };
-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();
-    }
+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());
   });
 };
-const style = "";
-Toast.install = (app) => {
-  app.provide("toast", toastCreate);
+C.install = (e) => {
+  e.provide("toast", R);
 };
 export {
-  Toast as default,
-  toastCreate
+  C as default,
+  R as toastCreate
 };