y-design-ssr 0.1.1 → 0.2.0

package/libs/dialog/index.mjs

@@ -0,0 +1,952 @@
+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 = {
+  "pull-refresh": {
+    pulling: "下拉刷新...",
+    loosing: "释放刷新...",
+    loading: "数据加载中...",
+    success: "数据已更新",
+    failed: "数据跟新失败，请稍后再试"
+  },
+  "form-item": {
+    validateMessage: "请输入正确内容"
+  }
+};
+E("zh-CN");
+U({
+  "zh-CN": ke
+});
+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) {
+    case "top":
+      return "column-reverse";
+    case "bottom":
+      return "column";
+    case "left":
+      return "row-reverse";
+    case "right":
+      return "row";
+    default:
+      return "column";
+  }
+}, [xe, we, Be] = w("mask"), Ne = {
+  // 控制显示
+  modelValue: {
+    type: Boolean,
+    default: !1
+  },
+  // 层级
+  zIndex: {
+    type: [Number, String],
+    default: null
+  },
+  // 动画时长
+  duration: {
+    type: Number,
+    default: 300
+  },
+  // 自定义类名
+  customClass: {
+    type: String,
+    default: ""
+  },
+  // 自定义样式
+  customStyle: {
+    type: Object,
+    default: () => ({})
+  },
+  // 触摸滚动开关
+  lockScroll: {
+    type: Boolean,
+    default: !0
+  },
+  onAfterLeave: {
+    type: Function,
+    default: null
+  }
+}, S = U([]);
+let Y = 0;
+const I = /* @__PURE__ */ x({
+  name: xe,
+  props: Ne,
+  emits: ["update:modelValue"],
+  setup(e, {
+    slots: t
+  }) {
+    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 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);
+      return {
+        _state: n
+      };
+    }, f = (n) => {
+      const {
+        lockScroll: i
+      } = e;
+      i && (n.preventDefault(), n.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
+      }, {
+        default: () => {
+          var o;
+          return [P(r("div", {
+            style: {
+              animationDuration: `${i}ms`,
+              zIndex: p,
+              ...g
+            },
+            class: [we(), n],
+            onTouchmove: f
+          }, [(o = t.default) == null ? void 0 : o.call(t)]), [[ne, d]])];
+        }
+      });
+    };
+  }
+});
+I.install = (e) => {
+  const { name: t } = I;
+  e.component(t, I);
+};
+const [_e, Z, Ve] = w("popup"), Ae = {
+  // 控制显示
+  modelValue: {
+    type: Boolean,
+    default: !1
+  },
+  // 位置
+  position: {
+    type: String,
+    default: "center"
+  },
+  // 圆角
+  borderRadius: {
+    type: [Number, String],
+    default: ""
+  },
+  // 自定义类名
+  customClass: {
+    type: String,
+    default: ""
+  },
+  // 自定义属性
+  customStyle: {
+    type: Object,
+    default: () => ({})
+  },
+  // 插入对象
+  teleport: {
+    type: String,
+    default: "body"
+  },
+  // 动画时长
+  duration: {
+    type: Number,
+    default: 300
+  },
+  // 点击遮罩是否关闭
+  isCloseOnClickMask: {
+    type: Boolean,
+    default: !0
+  },
+  onAfterLeave: {
+    type: Function,
+    default: null
+  },
+  lockScroll: {
+    type: Boolean,
+    default: !0
+  },
+  zIndex: {
+    type: Number,
+    default: 101
+  }
+}, L = /* @__PURE__ */ x({
+  name: _e,
+  props: Ae,
+  emits: ["clickMask", "update:modelValue"],
+  setup(e, {
+    slots: t,
+    emit: l
+  }) {
+    const a = F(() => {
+      const {
+        position: n,
+        borderRadius: i,
+        customStyle: p,
+        duration: g
+      } = e, c = m(i);
+      let d = "0";
+      switch (n) {
+        case "top":
+          d = ` 0 0 ${c} ${c}`;
+          break;
+        case "bottom":
+          d = `${c} ${c} 0 0`;
+          break;
+        case "left":
+          d = `0 ${c} ${c} 0`;
+          break;
+        case "right":
+          d = `${c} 0 0 ${c}`;
+          break;
+        default:
+          d = `${c}`;
+      }
+      return {
+        borderRadius: d,
+        animationDuration: `${g}ms`,
+        ...p
+      };
+    }), s = (n) => {
+      l("clickMask", n), e.isCloseOnClickMask && (f.value = !1);
+    }, f = F({
+      get: () => e.modelValue,
+      set: (n) => l("update:modelValue", n)
+    });
+    return () => {
+      const {
+        teleport: n,
+        position: i,
+        customClass: p,
+        duration: g,
+        onAfterLeave: c,
+        lockScroll: d,
+        zIndex: o
+      } = e;
+      return r(me, {
+        to: n
+      }, {
+        default: () => [r("div", {
+          class: Z(),
+          style: {
+            zIndex: o
+          }
+        }, [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}`)
+        }, {
+          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]])];
+          }
+        })])]
+      });
+    };
+  }
+});
+L.install = (e) => {
+  const { name: t } = L;
+  e.component(t, L);
+};
+const [ze, z] = w("icon"), Ie = (e) => new RegExp(/\.(https|png|jpg|gif|jpeg|webp|apng)$/).test(e.toLowerCase()), M = /* @__PURE__ */ x({
+  name: ze,
+  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: l
+  }) {
+    const a = Ie(e.name), s = () => ({
+      fontSize: m(e.size),
+      color: e.color
+    }), f = (n) => {
+      l("click", n);
+    };
+    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
+      }, {
+        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
+            }
+          }, null) : null, p ? r("em", {
+            class: z("badge"),
+            style: {
+              color: c,
+              backgroundColor: d
+            }
+          }, [p]) : null, ((u = t.default) == null ? void 0 : u.call(t)) || null];
+        }
+      });
+    };
+  }
+});
+M.install = (e) => {
+  const { name: t } = M;
+  e.component(t, M);
+};
+const [Le, B, Me] = w("button"), _ = /* @__PURE__ */ x({
+  name: Le,
+  props: {
+    // 标签
+    tag: {
+      type: String,
+      default: "button"
+    },
+    // 文案
+    text: {
+      type: String,
+      default: ""
+    },
+    // 类型
+    type: {
+      type: String,
+      default: "primary"
+    },
+    // 尺寸
+    size: {
+      type: String,
+      default: "middle"
+    },
+    // 不可以状态
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    // 阴影
+    shadow: {
+      type: String,
+      default: ""
+    },
+    // 方形
+    square: {
+      type: Boolean,
+      default: !1
+    },
+    // 半圆弧
+    semicircle: {
+      type: Boolean,
+      default: !1
+    },
+    // 自定义圆角
+    radius: {
+      type: [Number, String],
+      default: ""
+    },
+    // 补充文案，双行显示
+    supplementText: {
+      type: String,
+      default: ""
+    },
+    // block 自动填满父布局
+    block: {
+      type: Boolean,
+      default: !1
+    },
+    // 危险按钮状态
+    danger: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["click"],
+  setup(e, {
+    slots: t,
+    emit: l
+  }) {
+    const a = (s) => {
+      l("click", s);
+    };
+    return () => {
+      let {
+        tag: s
+      } = e;
+      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)
+        },
+        disabled: p,
+        onClick: a
+      }, {
+        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])];
+        }
+      });
+    };
+  }
+});
+_.install = (e) => {
+  const { name: t } = _;
+  e.component(t, _);
+};
+const [Re, C] = w("loading"), Oe = {
+  // Loading icon 的颜色
+  color: {
+    type: String,
+    default: ""
+  },
+  // 背景色
+  bgColor: {
+    type: String,
+    default: ""
+  },
+  bgBorderRadius: {
+    type: [Number, String],
+    default: "16px"
+  },
+  // 粗细
+  thick: {
+    type: [Number, String],
+    default: 8
+  },
+  // 方向
+  direction: {
+    type: String,
+    default: "forward"
+  },
+  // 大小
+  size: {
+    type: [Number, String],
+    default: "24px"
+  },
+  padding: {
+    type: [Number, String],
+    default: ""
+  },
+  // 文案
+  text: {
+    type: String,
+    default: ""
+  },
+  // 文案位置
+  textLocation: {
+    type: String,
+    default: "bottom"
+  },
+  // 文案大小
+  textSize: {
+    type: [Number, String],
+    default: ""
+  },
+  // 文案颜色
+  textColor: {
+    type: String,
+    default: ""
+  },
+  // 布局位置
+  position: {
+    type: String,
+    default: "relative"
+  }
+}, R = /* @__PURE__ */ x({
+  name: Re,
+  props: Oe,
+  setup(e, {
+    slots: t
+  }) {
+    return () => {
+      var y, $;
+      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"
+        })
+      }, [r("div", {
+        class: C("bg", {
+          [l]: l !== "relative"
+        }),
+        style: {
+          flexDirection: Ce(a),
+          backgroundColor: s,
+          borderRadius: m(f),
+          padding: m(i)
+        }
+      }, [r("span", {
+        class: C("icon-wrapper"),
+        style: {
+          width: m(n),
+          height: m(n)
+        }
+      }, [(($ = t.icon) == null ? void 0 : $.call(t)) || r("svg", {
+        class: C("icon", {
+          [c]: c
+        }),
+        viewBox: "25 25 50 50"
+      }, [r("circle", {
+        class: C("icon-circle"),
+        style: {
+          stroke: p,
+          strokeWidth: m(g)
+        },
+        cx: "50",
+        cy: "50",
+        r: "20",
+        fill: "none"
+      }, null)])]), b && r("span", {
+        class: C("text", {
+          [a]: a
+        }),
+        style: {
+          color: o,
+          fontSize: m(u)
+        }
+      }, [b])])]);
+    };
+  }
+}), Pe = {
+  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 = {
+  /**
+   * @description: show
+   * @param {LoadingPropsType} options
+   * @return {*}
+   */
+  show: (e, t) => {
+    N || (N = ae(
+      {
+        ...Pe,
+        ...e
+      },
+      t
+    )), document.body.appendChild(N.$el);
+  },
+  /**
+   * @description: hide
+   * @param {*}
+   * @return {*}
+   */
+  hide: () => {
+    N && N.$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);
+  }
+}, re = {
+  getSSRProps: (e) => ({ ...e }),
+  mounted: (e, t) => {
+    e.instance = ae({ ...e.customProps }, { ...e.customSlots }), t.value && ee(e, t);
+  },
+  updated: (e, t) => {
+    t.oldValue !== t.value && ee(e, t);
+  },
+  unmounted: (e) => {
+    e.instance && e.instance.$el.remove();
+  }
+}, je = {
+  getSSRProps: (e) => ({ ...e }),
+  beforeMount: (e, t) => {
+    e.customProps = { ...t.value };
+  }
+}, Fe = {
+  getSSRProps: (e) => ({ ...e }),
+  beforeMount: (e, t) => {
+    e.customSlots = { ...t.value };
+  }
+};
+R.install = (e) => {
+  e.component(R.name, R), e.provide("loading", De), e.use(Te);
+};
+function Ee(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !be(e);
+}
+const [Ue, v] = w("dialog"), qe = {
+  // 控制显示
+  modelValue: {
+    type: Boolean,
+    default: !1
+  },
+  width: {
+    type: [Number, String],
+    default: 288
+  },
+  title: {
+    type: String,
+    default: ""
+  },
+  titleAlign: {
+    type: String,
+    default: "center"
+  },
+  message: {
+    type: String,
+    default: ""
+  },
+  messageAlign: {
+    type: String,
+    default: "center"
+  },
+  isCloseOnClickMask: {
+    type: Boolean,
+    default: !0
+  },
+  showCloseIcon: {
+    type: Boolean,
+    default: !1
+  },
+  showCancelBtn: {
+    type: Boolean,
+    default: !1
+  },
+  cancelButtonText: {
+    type: String,
+    default: "取消"
+  },
+  showConfirmBtn: {
+    type: Boolean,
+    default: !1
+  },
+  confirmButtonText: {
+    type: String,
+    default: "确认"
+  },
+  beforeClose: {
+    type: Function,
+    default: null
+  },
+  callback: {
+    type: Function,
+    default: null
+  },
+  imgSrc: {
+    type: String,
+    default: null
+  },
+  circleImg: {
+    type: Boolean,
+    default: !1
+  },
+  // 插入对象
+  teleport: {
+    type: String,
+    default: "body"
+  }
+}, O = /* @__PURE__ */ x({
+  name: Ue,
+  directives: {
+    loading: re
+  },
+  props: qe,
+  emits: ["update:modelValue", "cancel", "confirm"],
+  setup(e, {
+    emit: t,
+    slots: l
+  }) {
+    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 {
+        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)
+    });
+    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)
+        }
+      }, {
+        "onUpdate:modelValue": s
+      }, {
+        isCloseOnClickMask: h,
+        teleport: se
+      }), {
+        default: () => {
+          var A, J, K, Q;
+          return [((A = l.img) == null ? void 0 : A.call(l)) || H && r("div", {
+            class: v("img", {
+              circle: k
+            }),
+            style: {
+              top: k ? `-${c(m(o), 4)}` : "auto",
+              left: k ? `calc(50% - ${c(m(o), 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"
+            }
+          }, null)]), r("div", {
+            class: v("container")
+          }, [r("div", {
+            style: {
+              height: k ? c(m(o), 4, (ue) => ue + 20) : "24px"
+            }
+          }, null), ((J = l.title) == null ? void 0 : J.call(l)) || r("div", {
+            class: v("title"),
+            style: {
+              textAlign: b
+            }
+          }, [u]), r("div", {
+            class: v("content")
+          }, [r("div", {
+            class: v("message"),
+            style: {
+              textAlign: $
+            }
+          }, [((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"
+            }
+          }, [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
+          }, {
+            default: () => [a.confirm ? "" : ce]
+          }), [[X("loading"), a.confirm]])])]), V && r("div", {
+            class: v("close"),
+            onClick: () => f("close")
+          }, [r(M, {
+            name: "cross"
+          }, null)])])];
+        }
+      });
+    };
+  }
+});
+let j = q({}), We = 0;
+const ie = [], Ge = (e, t) => {
+  const l = `dialog${We += 1}`;
+  j = q({
+    setup() {
+      const f = E(!0), n = (i) => {
+        f.value = i;
+      };
+      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();
+  });
+};
+O.install = (e) => {
+  const { name: t } = O;
+  e.component(t, O), e.provide("dialog", Ge);
+};
+export {
+  Ge as createDialog,
+  O as default
+};