y-design-ssr 0.2.1 → 0.2.3

package/libs/popup/index.mjs

@@ -1,11 +1,40 @@
-import { ref as h, reactive as _, defineComponent as C, onMounted as B, onUnmounted as A, watch as L, createVNode as i, Transition as N, withDirectives as M, vShow as V, computed as g, Teleport as z } from "vue";
-const k = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t) ? t.reduce((l, a) => l + k(e, a), "") : Object.keys(t).reduce(
-  (l, a) => l + (t[a] ? k(e, a) : ""),
-  ""
-) : "", I = (e) => (t, l) => {
-  let a = t, c = l;
-  return a && typeof a != "string" && (c = a, a = ""), a = a ? `${e}__${a}` : e, `${a}${k(a, c)}`;
-}, O = () => (e, t) => t ? `${k(`y-${e}`, t)}` : `y-${e}`, w = {
+import { ref, reactive, defineComponent, onMounted, onUnmounted, watch, createVNode, Transition, withDirectives, vShow, computed, Teleport } 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,18 +46,26 @@ const k = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t)
     validateMessage: "请输入正确内容"
   }
 };
-h("zh-CN");
-_({
-  "zh-CN": w
+ref("zh-CN");
+reactive({
+  "zh-CN": defaultLang
 });
-const x = (e) => {
-  const t = `y-${e}`;
-  return [t, I(t), O()];
-}, D = (e) => isNaN(Number(e)) && typeof e == "string" ? e : `${e}px`, [R, T, j] = x("mask"), U = {
+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$1, bem$1, gBem$1] = createNamespace("mask");
+const _props$1 = {
   // 控制显示
   modelValue: {
     type: Boolean,
-    default: !1
+    default: false
   },
   // 层级
   zIndex: {
@@ -53,87 +90,118 @@ const x = (e) => {
   // 触摸滚动开关
   lockScroll: {
     type: Boolean,
-    default: !0
+    default: true
   },
   onAfterLeave: {
     type: Function,
     default: null
   }
-}, r = _([]);
-let v = 0;
-const $ = /* @__PURE__ */ C({
-  name: R,
-  props: U,
+};
+const stack = reactive([]);
+let num = 0;
+const Mask = /* @__PURE__ */ defineComponent({
+  name: name$1,
+  props: _props$1,
   emits: ["update:modelValue"],
-  setup(e, {
-    slots: t
+  setup(props, {
+    slots
   }) {
-    const l = h("");
-    B(() => {
-      l.value = `mask${v}`, v += 1, a(e.modelValue, !0);
-    }), A(() => {
-      const n = r.findIndex((o) => o._id === l.value);
-      n >= 0 && r.splice(n, 1);
-    }), L(() => e.modelValue, (n) => {
-      a(n);
+    const id = ref("");
+    onMounted(() => {
+      id.value = `mask${num}`;
+      num += 1;
+      stackIntercept(props.modelValue, true);
     });
-    const a = (n, o) => {
-      n ? (r.unshift({
-        _id: l.value,
-        _state: n
-      }), r.length > 1 && (r[1]._state = !1)) : o || (r.splice(0, 1), r.length > 0 && (r[0]._state = !0));
-    }, c = () => {
-      let n = !1;
-      for (let o = 0; o < r.length; o++)
-        r[o]._id === l.value && (n = r[o]._state);
+    onUnmounted(() => {
+      const index = stack.findIndex((v) => v._id === id.value);
+      index >= 0 && stack.splice(index, 1);
+    });
+    watch(() => props.modelValue, (val) => {
+      stackIntercept(val);
+    });
+    const stackIntercept = (val, isMounted) => {
+      if (val) {
+        stack.unshift({
+          _id: id.value,
+          _state: val
+        });
+        if (stack.length > 1) {
+          stack[1]._state = false;
+        }
+      } else if (!isMounted) {
+        stack.splice(0, 1);
+        if (stack.length > 0) {
+          stack[0]._state = true;
+        }
+      }
+    };
+    const find = () => {
+      let _state = false;
+      for (let i = 0; i < stack.length; i++) {
+        if (stack[i]._id === id.value) {
+          _state = stack[i]._state;
+        }
+      }
       return {
-        _state: n
+        _state
       };
-    }, d = (n) => {
+    };
+    const onTouchMove = (payload) => {
       const {
-        lockScroll: o
-      } = e;
-      o && (n.preventDefault(), n.stopPropagation());
+        lockScroll
+      } = props;
+      if (lockScroll) {
+        payload.preventDefault();
+        payload.stopPropagation();
+      }
     };
     return () => {
       const {
-        customClass: n,
-        duration: o,
-        zIndex: f,
-        customStyle: m,
-        onAfterLeave: u
-      } = e, {
-        _state: s
-      } = c();
-      return i(N, {
-        name: j("animation", "fade"),
-        onAfterLeave: u
+        customClass,
+        duration,
+        zIndex,
+        customStyle,
+        onAfterLeave
+      } = props;
+      const {
+        _state
+      } = find();
+      return createVNode(Transition, {
+        "name": gBem$1("animation", "fade"),
+        "onAfterLeave": onAfterLeave
       }, {
         default: () => {
-          var p;
-          return [M(i("div", {
-            style: {
-              animationDuration: `${o}ms`,
-              zIndex: f,
-              ...m
+          var _a;
+          return [withDirectives(createVNode("div", {
+            "style": {
+              animationDuration: `${duration}ms`,
+              zIndex,
+              ...customStyle
             },
-            class: [T(), n],
-            onTouchmove: d
-          }, [(p = t.default) == null ? void 0 : p.call(t)]), [[V, s]])];
+            "class": [bem$1(), customClass],
+            "onTouchmove": onTouchMove
+          }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]), [[vShow, _state]])];
         }
       });
     };
   }
 });
-$.install = (e) => {
-  const { name: t } = $;
-  e.component(t, $);
+const reset = "";
+const libs = "";
+const font = "";
+const animation = "";
+const theme = "";
+const style$1 = "";
+Mask.install = (app) => {
+  const { name: name2 } = Mask;
+  app.component(name2, Mask);
 };
-const [F, S, P] = x("popup"), E = {
+const [name, bem, gBem] = createNamespace("popup");
+const _props = {
   // 控制显示
   modelValue: {
     type: Boolean,
-    default: !1
+    default: false
   },
   // 位置
   position: {
@@ -168,7 +236,7 @@ const [F, S, P] = x("popup"), E = {
   // 点击遮罩是否关闭
   isCloseOnClickMask: {
     type: Boolean,
-    default: !0
+    default: true
   },
   onAfterLeave: {
     type: Function,
@@ -176,101 +244,109 @@ const [F, S, P] = x("popup"), E = {
   },
   lockScroll: {
     type: Boolean,
-    default: !0
+    default: true
   },
   zIndex: {
     type: Number,
     default: 101
   }
-}, b = /* @__PURE__ */ C({
-  name: F,
-  props: E,
+};
+const Popup = /* @__PURE__ */ defineComponent({
+  name,
+  props: _props,
   emits: ["clickMask", "update:modelValue"],
-  setup(e, {
-    slots: t,
-    emit: l
+  setup(props, {
+    slots,
+    emit
   }) {
-    const a = g(() => {
+    const style2 = computed(() => {
       const {
-        position: n,
-        borderRadius: o,
-        customStyle: f,
-        duration: m
-      } = e, u = D(o);
-      let s = "0";
-      switch (n) {
+        position,
+        borderRadius,
+        customStyle,
+        duration
+      } = props;
+      const tbR = parseUnit(borderRadius);
+      let br = `0`;
+      switch (position) {
         case "top":
-          s = ` 0 0 ${u} ${u}`;
+          br = ` 0 0 ${tbR} ${tbR}`;
           break;
         case "bottom":
-          s = `${u} ${u} 0 0`;
+          br = `${tbR} ${tbR} 0 0`;
           break;
         case "left":
-          s = `0 ${u} ${u} 0`;
+          br = `0 ${tbR} ${tbR} 0`;
           break;
         case "right":
-          s = `${u} 0 0 ${u}`;
+          br = `${tbR} 0 0 ${tbR}`;
           break;
         default:
-          s = `${u}`;
+          br = `${tbR}`;
       }
       return {
-        borderRadius: s,
-        animationDuration: `${m}ms`,
-        ...f
+        borderRadius: br,
+        animationDuration: `${duration}ms`,
+        ...customStyle
       };
-    }), c = (n) => {
-      l("clickMask", n), e.isCloseOnClickMask && (d.value = !1);
-    }, d = g({
-      get: () => e.modelValue,
-      set: (n) => l("update:modelValue", n)
+    });
+    const onClickMask = (event) => {
+      emit("clickMask", event);
+      if (props.isCloseOnClickMask) {
+        visible.value = false;
+      }
+    };
+    const visible = computed({
+      get: () => props.modelValue,
+      set: (value) => emit("update:modelValue", value)
     });
     return () => {
       const {
-        teleport: n,
-        position: o,
-        customClass: f,
-        duration: m,
-        onAfterLeave: u,
-        lockScroll: s,
-        zIndex: p
-      } = e;
-      return i(z, {
-        to: n
+        teleport,
+        position,
+        customClass,
+        duration,
+        onAfterLeave,
+        lockScroll,
+        zIndex
+      } = props;
+      return createVNode(Teleport, {
+        "to": teleport
       }, {
-        default: () => [i("div", {
-          class: S(),
-          style: {
-            zIndex: p
+        default: () => [createVNode("div", {
+          "class": bem(),
+          "style": {
+            zIndex
           }
-        }, [i($, {
-          modelValue: d.value,
-          "onUpdate:modelValue": (y) => d.value = y,
-          duration: m,
-          lockScroll: s,
-          onClick: c,
-          onAfterLeave: u
-        }, null), i(N, {
-          name: P("animation", `slide-${o}`)
+        }, [createVNode(Mask, {
+          "modelValue": visible.value,
+          "onUpdate:modelValue": ($event) => visible.value = $event,
+          "duration": duration,
+          "lockScroll": lockScroll,
+          "onClick": onClickMask,
+          "onAfterLeave": onAfterLeave
+        }, null), createVNode(Transition, {
+          "name": gBem("animation", `slide-${position}`)
         }, {
           default: () => {
-            var y;
-            return [M(i("div", {
-              style: a.value,
-              class: [S("content", {
-                [o]: o
-              }), f]
-            }, [((y = t.default) == null ? void 0 : y.call(t)) || null]), [[V, d.value]])];
+            var _a;
+            return [withDirectives(createVNode("div", {
+              "style": style2.value,
+              "class": [bem("content", {
+                [position]: position
+              }), customClass]
+            }, [((_a = slots.default) == null ? void 0 : _a.call(slots)) || null]), [[vShow, visible.value]])];
           }
         })])]
       });
     };
   }
 });
-b.install = (e) => {
-  const { name: t } = b;
-  e.component(t, b);
+const style = "";
+Popup.install = (app) => {
+  const { name: name2 } = Popup;
+  app.component(name2, Popup);
 };
 export {
-  b as default
+  Popup as default
 };