y-design-ssr 0.2.5 → 0.2.6

package/libs/dialog/index.mjs

@@ -1,11 +1,47 @@
-import { ref as E, reactive as U, defineComponent as x, onMounted as de, onUnmounted as fe, watch as pe, createVNode as r, Transition as te, withDirectives as P, vShow as ne, computed as F, Teleport as me, Fragment as ge, createApp as q, h as le, mergeProps as ye, resolveDirective as X, isVNode as be } from "vue";
-const oe = (e) => (t) => Object.prototype.toString.call(t) === `[object ${e}]`, Se = oe("Function"), ve = oe("Promise"), D = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t) ? t.reduce((l, a) => l + D(e, a), "") : Object.keys(t).reduce(
-  (l, a) => l + (t[a] ? D(e, a) : ""),
-  ""
-) : "", $e = (e) => (t, l) => {
-  let a = t, s = l;
-  return a && typeof a != "string" && (s = a, a = ""), a = a ? `${e}__${a}` : e, `${a}${D(a, s)}`;
-}, he = () => (e, t) => t ? `${D(`y-${e}`, t)}` : `y-${e}`, ke = {
+import { ref, reactive, defineComponent, onMounted, onUnmounted, watch, createVNode, Transition, withDirectives, vShow, computed, Teleport, Fragment, createApp, h, mergeProps, resolveDirective, isVNode } from "vue";
+const tagTester = (name2) => {
+  return (obj) => {
+    return Object.prototype.toString.call(obj) === `[object ${name2}]`;
+  };
+};
+const isFunction = tagTester("Function");
+const isPromise = tagTester("Promise");
+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,15 +53,22 @@ const oe = (e) => (t) => Object.prototype.toString.call(t) === `[object ${e}]`,
     validateMessage: "请输入正确内容"
   }
 };
-E("zh-CN");
-U({
-  "zh-CN": ke
+ref("zh-CN");
+reactive({
+  "zh-CN": defaultLang
 });
-const w = (e) => {
-  const t = `y-${e}`;
-  return [t, $e(t), he()];
-}, m = (e) => isNaN(Number(e)) && typeof e == "string" ? e : `${e}px`, Ce = (e) => {
-  switch (e) {
+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 parseFlexDirection = (location) => {
+  switch (location) {
     case "top":
       return "column-reverse";
     case "bottom":
@@ -37,11 +80,13 @@ const w = (e) => {
     default:
       return "column";
   }
-}, [xe, we, Be] = w("mask"), Ne = {
+};
+const [name$4, bem$5, gBem$2] = createNamespace("mask");
+const _props$3 = {
   // 控制显示
   modelValue: {
     type: Boolean,
-    default: !1
+    default: false
   },
   // 层级
   zIndex: {
@@ -66,87 +111,118 @@ const w = (e) => {
   // 触摸滚动开关
   lockScroll: {
     type: Boolean,
-    default: !0
+    default: true
   },
   onAfterLeave: {
     type: Function,
     default: null
   }
-}, S = U([]);
-let Y = 0;
-const I = /* @__PURE__ */ x({
-  name: xe,
-  props: Ne,
+};
+const stack = reactive([]);
+let num$1 = 0;
+const Mask = /* @__PURE__ */ defineComponent({
+  name: name$4,
+  props: _props$3,
   emits: ["update:modelValue"],
-  setup(e, {
-    slots: t
+  setup(props, {
+    slots
   }) {
-    const l = E("");
-    de(() => {
-      l.value = `mask${Y}`, Y += 1, a(e.modelValue, !0);
-    }), fe(() => {
-      const n = S.findIndex((i) => i._id === l.value);
-      n >= 0 && S.splice(n, 1);
-    }), pe(() => e.modelValue, (n) => {
-      a(n);
+    const id = ref("");
+    onMounted(() => {
+      id.value = `mask${num$1}`;
+      num$1 += 1;
+      stackIntercept(props.modelValue, true);
     });
-    const a = (n, i) => {
-      n ? (S.unshift({
-        _id: l.value,
-        _state: n
-      }), S.length > 1 && (S[1]._state = !1)) : i || (S.splice(0, 1), S.length > 0 && (S[0]._state = !0));
-    }, s = () => {
-      let n = !1;
-      for (let i = 0; i < S.length; i++)
-        S[i]._id === l.value && (n = S[i]._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
       };
-    }, f = (n) => {
+    };
+    const onTouchMove = (payload) => {
       const {
-        lockScroll: i
-      } = e;
-      i && (n.preventDefault(), n.stopPropagation());
+        lockScroll
+      } = props;
+      if (lockScroll) {
+        payload.preventDefault();
+        payload.stopPropagation();
+      }
     };
     return () => {
       const {
-        customClass: n,
-        duration: i,
-        zIndex: p,
-        customStyle: g,
-        onAfterLeave: c
-      } = e, {
-        _state: d
-      } = s();
-      return r(te, {
-        name: Be("animation", "fade"),
-        onAfterLeave: c
+        customClass,
+        duration,
+        zIndex,
+        customStyle,
+        onAfterLeave
+      } = props;
+      const {
+        _state
+      } = find();
+      return createVNode(Transition, {
+        "name": gBem$2("animation", "fade"),
+        "onAfterLeave": onAfterLeave
       }, {
         default: () => {
-          var o;
-          return [P(r("div", {
-            style: {
-              animationDuration: `${i}ms`,
-              zIndex: p,
-              ...g
+          var _a;
+          return [withDirectives(createVNode("div", {
+            "style": {
+              animationDuration: `${duration}ms`,
+              zIndex,
+              ...customStyle
             },
-            class: [we(), n],
-            onTouchmove: f
-          }, [(o = t.default) == null ? void 0 : o.call(t)]), [[ne, d]])];
+            "class": [bem$5(), customClass],
+            "onTouchmove": onTouchMove
+          }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]), [[vShow, _state]])];
         }
       });
     };
   }
 });
-I.install = (e) => {
-  const { name: t } = I;
-  e.component(t, I);
+const reset = "";
+const libs = "";
+const font = "";
+const animation = "";
+const theme = "";
+const style$5 = "";
+Mask.install = (app) => {
+  const { name: name2 } = Mask;
+  app.component(name2, Mask);
 };
-const [_e, Z, Ve] = w("popup"), Ae = {
+const [name$3, bem$4, gBem$1] = createNamespace("popup");
+const _props$2 = {
   // 控制显示
   modelValue: {
     type: Boolean,
-    default: !1
+    default: false
   },
   // 位置
   position: {
@@ -181,7 +257,7 @@ const [_e, Z, Ve] = w("popup"), Ae = {
   // 点击遮罩是否关闭
   isCloseOnClickMask: {
     type: Boolean,
-    default: !0
+    default: true
   },
   onAfterLeave: {
     type: Function,
@@ -189,107 +265,120 @@ const [_e, Z, Ve] = w("popup"), Ae = {
   },
   lockScroll: {
     type: Boolean,
-    default: !0
+    default: true
   },
   zIndex: {
     type: Number,
     default: 101
   }
-}, L = /* @__PURE__ */ x({
-  name: _e,
-  props: Ae,
+};
+const Popup = /* @__PURE__ */ defineComponent({
+  name: name$3,
+  props: _props$2,
   emits: ["clickMask", "update:modelValue"],
-  setup(e, {
-    slots: t,
-    emit: l
+  setup(props, {
+    slots,
+    emit
   }) {
-    const a = F(() => {
+    const style2 = computed(() => {
       const {
-        position: n,
-        borderRadius: i,
-        customStyle: p,
-        duration: g
-      } = e, c = m(i);
-      let d = "0";
-      switch (n) {
+        position,
+        borderRadius,
+        customStyle,
+        duration
+      } = props;
+      const tbR = parseUnit(borderRadius);
+      let br = `0`;
+      switch (position) {
         case "top":
-          d = ` 0 0 ${c} ${c}`;
+          br = ` 0 0 ${tbR} ${tbR}`;
           break;
         case "bottom":
-          d = `${c} ${c} 0 0`;
+          br = `${tbR} ${tbR} 0 0`;
           break;
         case "left":
-          d = `0 ${c} ${c} 0`;
+          br = `0 ${tbR} ${tbR} 0`;
           break;
         case "right":
-          d = `${c} 0 0 ${c}`;
+          br = `${tbR} 0 0 ${tbR}`;
           break;
         default:
-          d = `${c}`;
+          br = `${tbR}`;
       }
       return {
-        borderRadius: d,
-        animationDuration: `${g}ms`,
-        ...p
+        borderRadius: br,
+        animationDuration: `${duration}ms`,
+        ...customStyle
       };
-    }), s = (n) => {
-      l("clickMask", n), e.isCloseOnClickMask && (f.value = !1);
-    }, f = F({
-      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: i,
-        customClass: p,
-        duration: g,
-        onAfterLeave: c,
-        lockScroll: d,
-        zIndex: o
-      } = e;
-      return r(me, {
-        to: n
+        teleport,
+        position,
+        customClass,
+        duration,
+        onAfterLeave,
+        lockScroll,
+        zIndex
+      } = props;
+      return createVNode(Teleport, {
+        "to": teleport
       }, {
-        default: () => [r("div", {
-          class: Z(),
-          style: {
-            zIndex: o
+        default: () => [createVNode("div", {
+          "class": bem$4(),
+          "style": {
+            zIndex
           }
-        }, [r(I, {
-          modelValue: f.value,
-          "onUpdate:modelValue": (u) => f.value = u,
-          duration: g,
-          lockScroll: d,
-          onClick: s,
-          onAfterLeave: c
-        }, null), r(te, {
-          name: Ve("animation", `slide-${i}`)
+        }, [createVNode(Mask, {
+          "modelValue": visible.value,
+          "onUpdate:modelValue": ($event) => visible.value = $event,
+          "duration": duration,
+          "lockScroll": lockScroll,
+          "onClick": onClickMask,
+          "onAfterLeave": onAfterLeave
+        }, null), createVNode(Transition, {
+          "name": gBem$1("animation", `slide-${position}`)
         }, {
           default: () => {
-            var u;
-            return [P(r("div", {
-              style: a.value,
-              class: [Z("content", {
-                [i]: i
-              }), p]
-            }, [((u = t.default) == null ? void 0 : u.call(t)) || null]), [[ne, f.value]])];
+            var _a;
+            return [withDirectives(createVNode("div", {
+              "style": style2.value,
+              "class": [bem$4("content", {
+                [position]: position
+              }), customClass]
+            }, [((_a = slots.default) == null ? void 0 : _a.call(slots)) || null]), [[vShow, visible.value]])];
           }
         })])]
       });
     };
   }
 });
-L.install = (e) => {
-  const { name: t } = L;
-  e.component(t, L);
+const style$4 = "";
+Popup.install = (app) => {
+  const { name: name2 } = Popup;
+  app.component(name2, Popup);
 };
-const [ze, z] = w("icon"), Ie = (e) => new RegExp(/\.(https|png|jpg|gif|jpeg|webp|apng)$/).test(e.toLowerCase()), M = /* @__PURE__ */ x({
-  name: ze,
+const [cname, bem$3] = 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,
@@ -332,62 +421,66 @@ const [ze, z] = w("icon"), Ie = (e) => new RegExp(/\.(https|png|jpg|gif|jpeg|web
     }
   },
   emits: ["click"],
-  setup(e, {
-    slots: t,
-    emit: l
+  setup(props, {
+    slots,
+    emit
   }) {
-    const a = Ie(e.name), s = () => ({
-      fontSize: m(e.size),
-      color: e.color
-    }), f = (n) => {
-      l("click", n);
+    const isImg = isImage(props.name);
+    const getStyle = () => ({
+      fontSize: parseUnit(props.size),
+      color: props.color
+    });
+    const onClick = (event) => {
+      emit("click", event);
     };
     return () => {
       const {
-        name: n,
-        classPrefix: i,
-        badge: p,
-        dot: g,
-        subColor: c,
-        subBg: d,
-        tag: o
-      } = e;
-      return r(o, {
-        class: `${i}${a ? "" : ` y-icon--${n}`}`,
-        style: s(),
-        onClick: f
+        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 u;
-          return [a ? r("em", {
-            class: z("node")
-          }, [r("img", {
-            class: z("image"),
-            src: n,
-            alt: "icon"
-          }, null)]) : null, g ? r("em", {
-            class: z("dot"),
-            style: {
-              backgroundColor: d
+          var _a;
+          return [isImg ? createVNode("em", {
+            "class": bem$3("node")
+          }, [createVNode("img", {
+            "class": bem$3("image"),
+            "src": name2,
+            "alt": "icon"
+          }, null)]) : null, dot ? createVNode("em", {
+            "class": bem$3("dot"),
+            "style": {
+              backgroundColor: subBg
             }
-          }, null) : null, p ? r("em", {
-            class: z("badge"),
-            style: {
-              color: c,
-              backgroundColor: d
+          }, null) : null, badge ? createVNode("em", {
+            "class": bem$3("badge"),
+            "style": {
+              color: subColor,
+              backgroundColor: subBg
             }
-          }, [p]) : null, ((u = t.default) == null ? void 0 : u.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 style$3 = "";
+Icon.install = (app) => {
+  const { name: name2 } = Icon;
+  app.component(name2, Icon);
 };
-const [Le, B, Me] = w("button"), _ = /* @__PURE__ */ x({
-  name: Le,
+const [name$2, bem$2, gBem] = createNamespace("button");
+const Button = /* @__PURE__ */ defineComponent({
+  name: name$2,
   props: {
     // 标签
     tag: {
@@ -412,7 +505,7 @@ const [Le, B, Me] = w("button"), _ = /* @__PURE__ */ x({
     // 不可以状态
     disabled: {
       type: Boolean,
-      default: !1
+      default: false
     },
     // 阴影
     shadow: {
@@ -422,12 +515,12 @@ const [Le, B, Me] = w("button"), _ = /* @__PURE__ */ x({
     // 方形
     square: {
       type: Boolean,
-      default: !1
+      default: false
     },
     // 半圆弧
     semicircle: {
       type: Boolean,
-      default: !1
+      default: false
     },
     // 自定义圆角
     radius: {
@@ -442,73 +535,77 @@ const [Le, B, Me] = w("button"), _ = /* @__PURE__ */ x({
     // block 自动填满父布局
     block: {
       type: Boolean,
-      default: !1
+      default: false
     },
     // 危险按钮状态
     danger: {
       type: Boolean,
-      default: !1
+      default: false
     }
   },
   emits: ["click"],
-  setup(e, {
-    slots: t,
-    emit: l
+  setup(props, {
+    slots,
+    emit
   }) {
-    const a = (s) => {
-      l("click", s);
+    const onClick = (event) => {
+      emit("click", event);
     };
     return () => {
       let {
-        tag: s
-      } = e;
+        tag: Tag
+      } = props;
       const {
-        radius: f,
-        type: n,
-        size: i,
-        disabled: p,
-        shadow: g,
-        block: c,
-        square: d,
-        semicircle: o,
-        danger: u,
-        text: b,
-        supplementText: y
-      } = e, $ = t.default ? t.default() : b;
-      return s = n === "link" ? "a" : s, r(s, {
-        class: [B([n, i, {
-          block: c,
-          square: d,
-          semicircle: o,
-          disabled: p && s === "a"
-        }, (n === "primary" || n === "secondary") && g ? `shadow_${g}` : "", u ? `${n}_danger` : "", p ? `${n}_disabled` : ""]), Me("el", "clickable")],
-        style: {
-          borderRadius: m(f)
+        radius,
+        type,
+        size,
+        disabled,
+        shadow,
+        block,
+        square,
+        semicircle,
+        danger,
+        text,
+        supplementText
+      } = props;
+      const showText = slots.default ? slots.default() : text;
+      Tag = type === "link" ? "a" : Tag;
+      return createVNode(Tag, {
+        "class": [bem$2([type, size, {
+          block,
+          square,
+          semicircle,
+          disabled: disabled && Tag === "a"
+        }, (type === "primary" || type === "secondary") && shadow ? `shadow_${shadow}` : "", danger ? `${type}_danger` : "", disabled ? `${type}_disabled` : ""]), gBem("el", "clickable")],
+        "style": {
+          borderRadius: parseUnit(radius)
         },
-        disabled: p,
-        onClick: a
+        "disabled": disabled,
+        "onClick": onClick
       }, {
         default: () => {
-          var h, V;
-          return [r("div", {
-            class: B("content")
-          }, [((h = t.leftIcon) == null ? void 0 : h.call(t)) || null, $ && r(ge, null, [y ? r("div", {
-            class: B("text")
-          }, [r("p", null, [$]), r("p", {
-            class: B("subtext")
-          }, [y])]) : r("span", {
-            class: B("text")
-          }, [$])]), ((V = t.rightIcon) == null ? void 0 : V.call(t)) || null])];
+          var _a, _b;
+          return [createVNode("div", {
+            "class": bem$2("content")
+          }, [((_a = slots.leftIcon) == null ? void 0 : _a.call(slots)) || null, showText && createVNode(Fragment, null, [supplementText ? createVNode("div", {
+            "class": bem$2("text")
+          }, [createVNode("p", null, [showText]), createVNode("p", {
+            "class": bem$2("subtext")
+          }, [supplementText])]) : createVNode("span", {
+            "class": bem$2("text")
+          }, [showText])]), ((_b = slots.rightIcon) == null ? void 0 : _b.call(slots)) || null])];
         }
       });
     };
   }
 });
-_.install = (e) => {
-  const { name: t } = _;
-  e.component(t, _);
+const style$2 = "";
+Button.install = (app) => {
+  const { name: name2 } = Button;
+  app.component(name2, Button);
 };
-const [Re, C] = w("loading"), Oe = {
+const [name$1, bem$1] = createNamespace("loading");
+const _props$1 = {
   // Loading icon 的颜色
   color: {
     type: String,
@@ -567,97 +664,107 @@ const [Re, C] = w("loading"), Oe = {
     type: String,
     default: "relative"
   }
-}, R = /* @__PURE__ */ x({
-  name: Re,
-  props: Oe,
-  setup(e, {
-    slots: t
+};
+const Loading = /* @__PURE__ */ defineComponent({
+  name: name$1,
+  props: _props$1,
+  setup(props, {
+    slots
   }) {
     return () => {
-      var y, $;
+      var _a, _b;
       const {
-        position: l,
-        textLocation: a,
-        bgColor: s,
-        bgBorderRadius: f,
-        size: n,
-        padding: i,
-        color: p,
-        thick: g,
-        direction: c,
-        text: d,
-        textColor: o,
-        textSize: u
-      } = e, b = ((y = t.default) == null ? void 0 : y.call(t)) || d;
-      return r("div", {
-        class: C({
-          [l]: l !== "relative"
+        position,
+        textLocation,
+        bgColor,
+        bgBorderRadius,
+        size,
+        padding,
+        color,
+        thick,
+        direction,
+        text,
+        textColor,
+        textSize
+      } = props;
+      const showText = ((_a = slots.default) == null ? void 0 : _a.call(slots)) || text;
+      return createVNode("div", {
+        "class": bem$1({
+          [position]: position !== "relative"
         })
-      }, [r("div", {
-        class: C("bg", {
-          [l]: l !== "relative"
+      }, [createVNode("div", {
+        "class": bem$1("bg", {
+          [position]: position !== "relative"
         }),
-        style: {
-          flexDirection: Ce(a),
-          backgroundColor: s,
-          borderRadius: m(f),
-          padding: m(i)
+        "style": {
+          flexDirection: parseFlexDirection(textLocation),
+          backgroundColor: bgColor,
+          borderRadius: parseUnit(bgBorderRadius),
+          padding: parseUnit(padding)
         }
-      }, [r("span", {
-        class: C("icon-wrapper"),
-        style: {
-          width: m(n),
-          height: m(n)
+      }, [createVNode("span", {
+        "class": bem$1("icon-wrapper"),
+        "style": {
+          width: parseUnit(size),
+          height: parseUnit(size)
         }
-      }, [(($ = t.icon) == null ? void 0 : $.call(t)) || r("svg", {
-        class: C("icon", {
-          [c]: c
+      }, [((_b = slots.icon) == null ? void 0 : _b.call(slots)) || createVNode("svg", {
+        "class": bem$1("icon", {
+          [direction]: direction
         }),
-        viewBox: "25 25 50 50"
-      }, [r("circle", {
-        class: C("icon-circle"),
-        style: {
-          stroke: p,
-          strokeWidth: m(g)
+        "viewBox": "25 25 50 50"
+      }, [createVNode("circle", {
+        "class": bem$1("icon-circle"),
+        "style": {
+          stroke: color,
+          strokeWidth: parseUnit(thick)
         },
-        cx: "50",
-        cy: "50",
-        r: "20",
-        fill: "none"
-      }, null)])]), b && r("span", {
-        class: C("text", {
-          [a]: a
+        "cx": "50",
+        "cy": "50",
+        "r": "20",
+        "fill": "none"
+      }, null)])]), showText && createVNode("span", {
+        "class": bem$1("text", {
+          [textLocation]: textLocation
         }),
-        style: {
-          color: o,
-          fontSize: m(u)
+        "style": {
+          color: textColor,
+          fontSize: parseUnit(textSize)
         }
-      }, [b])])]);
+      }, [showText])])]);
     };
   }
-}), Pe = {
+});
+const globalOptions = {
   position: "fixed"
 };
-let N = null;
-const ae = (e, t) => {
-  const a = q({
-    render: () => le(R, { ...e }, { ...t })
-  }), s = document.createElement("div");
-  return a.mount(s);
-}, De = {
+let instance = null;
+const initInstance = (customProps, customSlots) => {
+  const wrapper = {
+    render: () => {
+      return h(Loading, { ...customProps }, { ...customSlots });
+    }
+  };
+  const customApp = createApp(wrapper);
+  const element = document.createElement("div");
+  return customApp.mount(element);
+};
+const createLoading = {
   /**
    * @description: show
    * @param {LoadingPropsType} options
    * @return {*}
    */
-  show: (e, t) => {
-    N || (N = ae(
-      {
-        ...Pe,
-        ...e
-      },
-      t
-    )), document.body.appendChild(N.$el);
+  show: (customProps, customSlots) => {
+    if (!instance)
+      instance = initInstance(
+        {
+          ...globalOptions,
+          ...customProps
+        },
+        customSlots
+      );
+    document.body.appendChild(instance.$el);
   },
   /**
    * @description: hide
@@ -665,47 +772,73 @@ const ae = (e, t) => {
    * @return {*}
    */
   hide: () => {
-    N && N.$el.remove();
+    instance && instance.$el.remove();
   }
-}, ee = (e, t) => {
-  t.value ? (e.classList.add("y-loading__wrap"), e.appendChild(e.instance.$el)) : (e.classList.remove("y-loading__wrap"), e.removeChild(e.instance.$el));
-}, Te = {
-  install: (e) => {
-    e.directive("loading", re), e.directive("loading-props", je), e.directive("loading-slots", Fe);
+};
+const toggleLoading = (el, binding) => {
+  if (binding.value) {
+    el.classList.add("y-loading__wrap");
+    el.appendChild(el.instance.$el);
+  } else {
+    el.classList.remove("y-loading__wrap");
+    el.removeChild(el.instance.$el);
   }
-}, re = {
-  getSSRProps: (e) => ({ ...e }),
-  mounted: (e, t) => {
-    e.instance = ae({ ...e.customProps }, { ...e.customSlots }), t.value && ee(e, t);
+};
+const loadingDirective = {
+  install: (app) => {
+    app.directive("loading", directive);
+    app.directive("loading-props", directiveProps);
+    app.directive("loading-slots", directiveSlots);
+  }
+};
+const directive = {
+  getSSRProps: (binding) => {
+    return { ...binding };
   },
-  updated: (e, t) => {
-    t.oldValue !== t.value && ee(e, t);
+  mounted: (el, binding) => {
+    el.instance = initInstance({ ...el.customProps }, { ...el.customSlots });
+    binding.value && toggleLoading(el, binding);
+  },
+  updated: (el, binding) => {
+    if (binding.oldValue !== binding.value) {
+      toggleLoading(el, binding);
+    }
   },
-  unmounted: (e) => {
-    e.instance && e.instance.$el.remove();
+  unmounted: (el) => {
+    el.instance && el.instance.$el.remove();
   }
-}, je = {
-  getSSRProps: (e) => ({ ...e }),
-  beforeMount: (e, t) => {
-    e.customProps = { ...t.value };
+};
+const directiveProps = {
+  getSSRProps: (binding) => {
+    return { ...binding };
+  },
+  beforeMount: (el, binding) => {
+    el.customProps = { ...binding.value };
   }
-}, Fe = {
-  getSSRProps: (e) => ({ ...e }),
-  beforeMount: (e, t) => {
-    e.customSlots = { ...t.value };
+};
+const directiveSlots = {
+  getSSRProps: (binding) => {
+    return { ...binding };
+  },
+  beforeMount: (el, binding) => {
+    el.customSlots = { ...binding.value };
   }
 };
-R.install = (e) => {
-  e.component(R.name, R), e.provide("loading", De), e.use(Te);
+const style$1 = "";
+Loading.install = (app) => {
+  app.component(Loading.name, Loading);
+  app.provide("loading", createLoading);
+  app.use(loadingDirective);
 };
-function Ee(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !be(e);
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-const [Ue, v] = w("dialog"), qe = {
+const [name, bem] = createNamespace("dialog");
+const _props = {
   // 控制显示
   modelValue: {
     type: Boolean,
-    default: !1
+    default: false
   },
   width: {
     type: [Number, String],
@@ -729,15 +862,15 @@ const [Ue, v] = w("dialog"), qe = {
   },
   isCloseOnClickMask: {
     type: Boolean,
-    default: !0
+    default: true
   },
   showCloseIcon: {
     type: Boolean,
-    default: !1
+    default: false
   },
   showCancelBtn: {
     type: Boolean,
-    default: !1
+    default: false
   },
   cancelButtonText: {
     type: String,
@@ -745,7 +878,7 @@ const [Ue, v] = w("dialog"), qe = {
   },
   showConfirmBtn: {
     type: Boolean,
-    default: !1
+    default: false
   },
   confirmButtonText: {
     type: String,
@@ -765,188 +898,226 @@ const [Ue, v] = w("dialog"), qe = {
   },
   circleImg: {
     type: Boolean,
-    default: !1
+    default: false
   },
   // 插入对象
   teleport: {
     type: String,
     default: "body"
   }
-}, O = /* @__PURE__ */ x({
-  name: Ue,
+};
+const Dialog = /* @__PURE__ */ defineComponent({
+  name,
   directives: {
-    loading: re
+    loading: directive
   },
-  props: qe,
+  props: _props,
   emits: ["update:modelValue", "cancel", "confirm"],
-  setup(e, {
-    emit: t,
-    slots: l
+  setup(props, {
+    emit,
+    slots
   }) {
-    const a = U({
-      cancel: !1,
-      confirm: !1
-    }), s = (o) => {
-      d.value = o;
-    }, f = (o) => {
-      var u;
-      s(!1), (u = e.callback) == null || u.call(e, o);
-    }, n = (o) => {
-      t("cancel", o, p("cancel"));
-    }, i = (o) => {
-      t("confirm", o, p("confirm"));
-    }, p = (o) => {
+    const loading = reactive({
+      cancel: false,
+      confirm: false
+    });
+    const update = (value) => {
+      visible.value = value;
+    };
+    const onClose = (actionType) => {
+      var _a;
+      update(false);
+      (_a = props.callback) == null ? void 0 : _a.call(props, actionType);
+    };
+    const onCancel = (event) => {
+      emit("cancel", event, onHandler("cancel"));
+    };
+    const onConfirm = (event) => {
+      emit("confirm", event, onHandler("confirm"));
+    };
+    const onHandler = (actionType) => {
       const {
-        modelValue: u,
-        beforeClose: b
-      } = e;
-      if (u)
-        if (Se(b)) {
-          a[o] = !0;
-          const y = b(o);
-          ve(y) ? y.then((h) => {
-            g(h, o);
-          }).catch((h) => {
-            throw new Error(h);
-          }) : g(y, o);
-        } else
-          f(o);
-    }, g = (o, u) => {
-      o && f(u), a[u] = !1;
-    }, c = (o, u, b) => {
-      let y = Number(o.substring(0, o.length - 2));
-      return y /= u || 2, b ? `${b(y)}px` : `${y}px`;
-    }, d = F({
-      get: () => e.modelValue,
-      set: (o) => t("update:modelValue", o)
+        modelValue,
+        beforeClose
+      } = props;
+      if (!modelValue)
+        return;
+      if (isFunction(beforeClose)) {
+        loading[actionType] = true;
+        const fnReturn = beforeClose(actionType);
+        if (isPromise(fnReturn)) {
+          const promise = fnReturn;
+          promise.then((value) => {
+            done(value, actionType);
+          }).catch((e) => {
+            throw new Error(e);
+          });
+        } else {
+          done(fnReturn, actionType);
+        }
+      } else {
+        onClose(actionType);
+      }
+    };
+    const done = (value, actionType) => {
+      if (value) {
+        onClose(actionType);
+        loading[actionType] = false;
+      } else {
+        loading[actionType] = false;
+      }
+    };
+    const halfOfWidth = (val, multiple, processing) => {
+      let num2 = Number(val.substring(0, val.length - 2));
+      num2 /= multiple || 2;
+      return processing ? `${processing(num2)}px` : `${num2}px`;
+    };
+    const visible = computed({
+      get: () => props.modelValue,
+      set: (value) => emit("update:modelValue", value)
     });
     return () => {
       const {
-        width: o,
-        title: u,
-        titleAlign: b,
-        message: y,
-        messageAlign: $,
-        isCloseOnClickMask: h,
-        showCloseIcon: V,
-        showCancelBtn: W,
-        cancelButtonText: T,
-        showConfirmBtn: G,
-        confirmButtonText: ce,
-        imgSrc: H,
-        circleImg: k,
-        teleport: se
-      } = e;
-      return r(L, ye({
-        modelValue: d.value,
-        "onUpdate:modelValue": (A) => d.value = A,
-        customClass: v(),
-        customStyle: {
-          width: m(o)
+        width,
+        title,
+        titleAlign,
+        message,
+        messageAlign,
+        isCloseOnClickMask,
+        showCloseIcon,
+        showCancelBtn,
+        cancelButtonText,
+        showConfirmBtn,
+        confirmButtonText,
+        imgSrc,
+        circleImg,
+        teleport
+      } = props;
+      return createVNode(Popup, mergeProps({
+        "modelValue": visible.value,
+        "onUpdate:modelValue": ($event) => visible.value = $event,
+        "customClass": bem(),
+        "customStyle": {
+          width: parseUnit(width)
         }
       }, {
-        "onUpdate:modelValue": s
+        "onUpdate:modelValue": update
       }, {
-        isCloseOnClickMask: h,
-        teleport: se
+        "isCloseOnClickMask": isCloseOnClickMask,
+        "teleport": teleport
       }), {
         default: () => {
-          var A, J, K, Q;
-          return [((A = l.img) == null ? void 0 : A.call(l)) || H && r("div", {
-            class: v("img", {
-              circle: k
+          var _a, _b, _c, _d;
+          return [((_a = slots.img) == null ? void 0 : _a.call(slots)) || imgSrc && createVNode("div", {
+            "class": bem("img", {
+              circle: circleImg
             }),
-            style: {
-              top: k ? `-${c(m(o), 4)}` : "auto",
-              left: k ? `calc(50% - ${c(m(o), 4)})` : "auto"
+            "style": {
+              top: circleImg ? `-${halfOfWidth(parseUnit(width), 4)}` : "auto",
+              left: circleImg ? `calc(50% - ${halfOfWidth(parseUnit(width), 4)})` : "auto"
             }
-          }, [r("div", {
-            style: {
-              width: k ? c(m(o)) : m(o),
-              height: c(m(o)),
-              background: `url(${H}) center`,
-              borderRadius: k ? "50%" : "20px 20px 0 0"
+          }, [createVNode("div", {
+            "style": {
+              width: circleImg ? halfOfWidth(parseUnit(width)) : parseUnit(width),
+              height: halfOfWidth(parseUnit(width)),
+              background: `url(${imgSrc}) center`,
+              borderRadius: circleImg ? "50%" : "20px 20px 0 0"
             }
-          }, null)]), r("div", {
-            class: v("container")
-          }, [r("div", {
-            style: {
-              height: k ? c(m(o), 4, (ue) => ue + 20) : "24px"
+          }, null)]), createVNode("div", {
+            "class": bem("container")
+          }, [createVNode("div", {
+            "style": {
+              height: circleImg ? halfOfWidth(parseUnit(width), 4, (num2) => {
+                return num2 + 20;
+              }) : "24px"
             }
-          }, null), ((J = l.title) == null ? void 0 : J.call(l)) || r("div", {
-            class: v("title"),
-            style: {
-              textAlign: b
+          }, null), ((_b = slots.title) == null ? void 0 : _b.call(slots)) || createVNode("div", {
+            "class": bem("title"),
+            "style": {
+              textAlign: titleAlign
             }
-          }, [u]), r("div", {
-            class: v("content")
-          }, [r("div", {
-            class: v("message"),
-            style: {
-              textAlign: $
+          }, [title]), createVNode("div", {
+            "class": bem("content")
+          }, [createVNode("div", {
+            "class": bem("message"),
+            "style": {
+              textAlign: messageAlign
             }
-          }, [((K = l.default) == null ? void 0 : K.call(l)) || y]), ((Q = l.footer) == null ? void 0 : Q.call(l)) || r("div", {
-            class: v("footer"),
-            style: {
-              paddingTop: W || G ? "20px" : "0px"
+          }, [((_c = slots.default) == null ? void 0 : _c.call(slots)) || message]), ((_d = slots.footer) == null ? void 0 : _d.call(slots)) || createVNode("div", {
+            "class": bem("footer"),
+            "style": {
+              paddingTop: showCancelBtn || showConfirmBtn ? "20px" : "0px"
             }
-          }, [W && P(r(_, {
-            type: "secondary",
-            class: v("footer-btn"),
-            onClick: n
-          }, Ee(T) ? T : {
-            default: () => [T]
-          }), [[X("loading"), a.cancel]]), G && P(r(_, {
-            type: "primary",
-            class: v("footer-btn"),
-            onClick: i
+          }, [showCancelBtn && withDirectives(createVNode(Button, {
+            "type": "secondary",
+            "class": bem("footer-btn"),
+            "onClick": onCancel
+          }, _isSlot(cancelButtonText) ? cancelButtonText : {
+            default: () => [cancelButtonText]
+          }), [[resolveDirective("loading"), loading.cancel]]), showConfirmBtn && withDirectives(createVNode(Button, {
+            "type": "primary",
+            "class": bem("footer-btn"),
+            "onClick": onConfirm
           }, {
-            default: () => [a.confirm ? "" : ce]
-          }), [[X("loading"), a.confirm]])])]), V && r("div", {
-            class: v("close"),
-            onClick: () => f("close")
-          }, [r(M, {
-            name: "cross"
+            default: () => [loading.confirm ? "" : confirmButtonText]
+          }), [[resolveDirective("loading"), loading.confirm]])])]), showCloseIcon && createVNode("div", {
+            "class": bem("close"),
+            "onClick": () => onClose("close")
+          }, [createVNode(Icon, {
+            "name": "cross"
           }, null)])])];
         }
       });
     };
   }
 });
-let j = q({}), We = 0;
-const ie = [], Ge = (e, t) => {
-  const l = `dialog${We += 1}`;
-  j = q({
+let dialogApp = createApp({});
+let num = 0;
+const treasures = [];
+const createDialog = (customProps, customSlots) => {
+  const id = `dialog${num += 1}`;
+  const wrapper = {
     setup() {
-      const f = E(!0), n = (i) => {
-        f.value = i;
+      const show = ref(true);
+      const toggle = (val) => {
+        show.value = val;
+      };
+      return () => {
+        return h(
+          Dialog,
+          {
+            modelValue: show.value,
+            "onUpdate:modelValue": toggle,
+            ...customProps,
+            onAfterLeave: () => {
+              close(id);
+            }
+          },
+          { ...customSlots }
+        );
       };
-      return () => le(
-        O,
-        {
-          modelValue: f.value,
-          "onUpdate:modelValue": n,
-          ...e,
-          onAfterLeave: () => {
-            He(l);
-          }
-        },
-        { ...t }
-      );
     }
-  });
-  const s = document.createElement("div");
-  ie.push({ id: l, app: j, el: s }), j.mount(s);
-}, He = (e) => {
-  ie.forEach((t) => {
-    e === t.id && t.app.unmount();
+  };
+  dialogApp = createApp(wrapper);
+  const element = document.createElement("div");
+  treasures.push({ id, app: dialogApp, el: element });
+  dialogApp.mount(element);
+};
+const close = (id) => {
+  treasures.forEach((obj) => {
+    if (id === obj.id) {
+      obj.app.unmount();
+    }
   });
 };
-O.install = (e) => {
-  const { name: t } = O;
-  e.component(t, O), e.provide("dialog", Ge);
+const style = "";
+Dialog.install = (app) => {
+  const { name: name2 } = Dialog;
+  app.component(name2, Dialog);
+  app.provide("dialog", createDialog);
 };
 export {
-  Ge as createDialog,
-  O as default
+  Dialog,
+  createDialog,
+  Dialog as default
 };