y-design-ssr/libs/dialog/index.mjs

SSR component library of YUI with Vue3

import { ref as D, reactive as P, defineComponent as x, onMounted as de, onUnmounted as fe, watch as ee, createVNode as r, Transition as O, withDirectives as N, vShow as R, computed as j, Teleport as me, Fragment as te, createApp as T, h as ne, mergeProps as pe, resolveDirective as H, isVNode as ge } from "vue";
const le = (e) => (t) => Object.prototype.toString.call(t) === `[object ${e}]`, ye = le("Function"), be = le("Promise"), A = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t) ? t.reduce((o, a) => o + A(e, a), "") : Object.keys(t).reduce(
  (o, a) => o + (t[a] ? A(e, a) : ""),
  ""
) : "", Se = (e) => (t, o) => {
  let a = t, c = o;
  return a && typeof a != "string" && (c = a, a = ""), a = a ? `${e}__${a}` : e, `${a}${A(a, c)}`;
}, ve = () => (e, t) => t ? `${A(`y-${e}`, t)}` : `y-${e}`, ke = {
  "pull-refresh": {
    pulling: "下拉刷新...",
    loosing: "释放刷新...",
    loading: "数据加载中...",
    success: "数据已更新",
    failed: "数据跟新失败，请稍后再试"
  },
  "form-item": {
    validateMessage: "请输入正确内容"
  }
};
D("zh-CN");
P({
  "zh-CN": ke
});
const w = (e) => {
  const t = `y-${e}`;
  return [t, Se(t), ve()];
}, y = (e) => isNaN(Number(e)) && typeof e == "string" ? e : `${e}px`, $e = (e) => {
  switch (e) {
    case "top":
      return "column-reverse";
    case "bottom":
      return "column";
    case "left":
      return "row-reverse";
    case "right":
      return "row";
    default:
      return "column";
  }
}, [Ce, he, xe] = w("mask"), we = {
  // 控制显示
  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 = P([]);
let J = 0;
const Be = /* @__PURE__ */ x({
  name: Ce,
  props: we,
  emits: ["update:modelValue"],
  setup(e, {
    slots: t
  }) {
    const o = D("");
    de(() => {
      o.value = `mask${J}`, J += 1, a(e.modelValue, !0);
    }), fe(() => {
      const l = S.findIndex((u) => u._id === o.value);
      l >= 0 && S.splice(l, 1);
    }), ee(() => e.modelValue, (l) => {
      a(l);
    });
    const a = (l, u) => {
      l ? (S.unshift({
        _id: o.value,
        _state: l
      }), S.length > 1 && (S[1]._state = !1)) : u || (S.splice(0, 1), S.length > 0 && (S[0]._state = !0));
    }, c = () => {
      let l = !1;
      for (let u = 0; u < S.length; u++)
        S[u]._id === o.value && (l = S[u]._state);
      return {
        _state: l
      };
    }, d = (l) => {
      const {
        lockScroll: u
      } = e;
      u && (l.preventDefault(), l.stopPropagation());
    };
    return () => {
      const {
        customClass: l,
        duration: u,
        zIndex: p,
        customStyle: g,
        onAfterLeave: m
      } = e, {
        _state: i
      } = c();
      return r(O, {
        name: xe("animation", "fade"),
        onAfterLeave: m
      }, {
        default: () => {
          var n;
          return [N(r("div", {
            style: {
              animationDuration: `${u}ms`,
              zIndex: p,
              ...g
            },
            class: [he(), l],
            onTouchmove: d
          }, [(n = t.default) == null ? void 0 : n.call(t)]), [[R, i]])];
        }
      });
    };
  }
});
function B(e) {
  const t = e;
  return t.install = (o) => {
    const { name: a } = e;
    a && o.component(a, e);
  }, t;
}
const K = B(Be), [_e, Q, X] = w("popup"), Ne = {
  // 控制显示
  modelValue: {
    type: Boolean,
    default: !1
  },
  // 位置
  position: {
    type: String,
    default: "center"
  },
  // 圆角
  borderRadius: {
    type: [Number, String],
    default: ""
  },
  // 自定义类名
  customClass: {
    type: String,
    default: ""
  },
  // 自定义属性
  customStyle: {
    type: Object,
    default: () => ({})
  },
  // 自定义类名
  maskCustomClass: {
    type: String,
    default: ""
  },
  // 自定义属性
  maskCustomStyle: {
    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: 100
  }
}, Ve = /* @__PURE__ */ x({
  name: _e,
  props: Ne,
  emits: ["clickMask", "update:modelValue"],
  setup(e, {
    slots: t,
    emit: o
  }) {
    const a = j(() => {
      const {
        position: l,
        borderRadius: u,
        customStyle: p,
        duration: g,
        zIndex: m
      } = e, i = y(u);
      let n = "0";
      switch (l) {
        case "top":
          n = ` 0 0 ${i} ${i}`;
          break;
        case "bottom":
          n = `${i} ${i} 0 0`;
          break;
        case "left":
          n = `0 ${i} ${i} 0`;
          break;
        case "right":
          n = `${i} 0 0 ${i}`;
          break;
        default:
          n = `${i}`;
      }
      return {
        borderRadius: n,
        animationDuration: `${g}ms`,
        ...p,
        zIndex: m + 1
      };
    }), c = (l) => {
      o("clickMask", l), e.isCloseOnClickMask && (d.value = !1);
    }, d = j({
      get: () => e.modelValue,
      set: (l) => o("update:modelValue", l)
    });
    return ee(() => d.value, (l, u) => {
      l !== u && (l && e.lockScroll ? document.body.style.overflow = "hidden" : document.body.style.overflow = "");
    }), () => {
      const {
        teleport: l,
        position: u,
        customClass: p,
        duration: g,
        onAfterLeave: m,
        lockScroll: i,
        zIndex: n,
        maskCustomClass: f,
        maskCustomStyle: b
      } = e;
      return l ? r(me, {
        to: l
      }, {
        default: () => [r(K, {
          modelValue: d.value,
          "onUpdate:modelValue": (s) => d.value = s,
          duration: g,
          lockScroll: i,
          onClick: c,
          onAfterLeave: m,
          zIndex: n,
          customClass: f,
          customStyle: b
        }, null), r(O, {
          name: X("animation", `slide-${u}`)
        }, {
          default: () => {
            var s;
            return [N(r("div", {
              style: a.value,
              class: [Q("content", {
                [u]: u
              }), p]
            }, [((s = t.default) == null ? void 0 : s.call(t)) || null]), [[R, d.value]])];
          }
        })]
      }) : r(te, null, [r(K, {
        modelValue: d.value,
        "onUpdate:modelValue": (s) => d.value = s,
        duration: g,
        lockScroll: i,
        onClick: c,
        onAfterLeave: m,
        zIndex: n,
        customClass: f,
        customStyle: b
      }, null), r(O, {
        name: X("animation", `slide-${u}`)
      }, {
        default: () => {
          var s;
          return [N(r("div", {
            style: a.value,
            class: [Q("content", {
              [u]: u
            }), p]
          }, [((s = t.default) == null ? void 0 : s.call(t)) || null]), [[R, d.value]])];
        }
      })]);
    };
  }
});
const Ie = B(Ve), [ze, z] = w("icon"), Ae = (e) => new RegExp(/\.(https|png|jpg|gif|jpeg|webp|apng)$/).test(e.toLowerCase()), Le = /* @__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: o
  }) {
    const a = Ae(e.name), c = () => ({
      fontSize: y(e.size),
      color: e.color
    }), d = (l) => {
      o("click", l);
    };
    return () => {
      const {
        name: l,
        classPrefix: u,
        badge: p,
        dot: g,
        subColor: m,
        subBg: i,
        tag: n
      } = e;
      return r(n, {
        class: `${u}${a ? "" : ` y-icon--${l}`}`,
        style: c(),
        onClick: d
      }, {
        default: () => {
          var f;
          return [a ? r("em", {
            class: z("node")
          }, [r("img", {
            class: z("image"),
            src: l,
            alt: "icon"
          }, null)]) : null, g ? r("em", {
            class: z("dot"),
            style: {
              backgroundColor: i
            }
          }, null) : null, p ? r("em", {
            class: z("badge"),
            style: {
              color: m,
              backgroundColor: i
            }
          }, [p]) : null, ((f = t.default) == null ? void 0 : f.call(t)) || null];
        }
      });
    };
  }
});
const Me = B(Le), [Oe, _, Re] = w("button"), je = /* @__PURE__ */ x({
  name: Oe,
  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: o
  }) {
    const a = (c) => {
      o("click", c);
    };
    return () => {
      let {
        tag: c
      } = e;
      const {
        radius: d,
        type: l,
        size: u,
        disabled: p,
        shadow: g,
        block: m,
        square: i,
        semicircle: n,
        danger: f,
        text: b,
        supplementText: s
      } = e, k = t.default ? t.default() : b;
      return c = l === "link" ? "a" : c, r(c, {
        class: [_([l, u, {
          block: m,
          square: i,
          semicircle: n,
          disabled: p && c === "a"
        }, (l === "primary" || l === "secondary") && g ? `shadow_${g}` : "", f ? `${l}_danger` : "", p ? `${l}_disabled` : ""]), Re("el", "clickable")],
        style: {
          borderRadius: y(d)
        },
        disabled: p,
        onClick: a
      }, {
        default: () => {
          var $, V;
          return [r("div", {
            class: _("content")
          }, [(($ = t.leftIcon) == null ? void 0 : $.call(t)) || null, k && r(te, null, [s ? r("div", {
            class: _("text")
          }, [r("p", null, [k]), r("p", {
            class: _("subtext")
          }, [s])]) : r("span", {
            class: _("text")
          }, [k])]), ((V = t.rightIcon) == null ? void 0 : V.call(t)) || null])];
        }
      });
    };
  }
});
const Y = B(je), [De, h] = w("loading"), Pe = {
  // 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"
  }
}, ae = /* @__PURE__ */ x({
  name: De,
  props: Pe,
  setup(e, {
    slots: t
  }) {
    return () => {
      var s, k;
      const {
        position: o,
        textLocation: a,
        bgColor: c,
        bgBorderRadius: d,
        size: l,
        padding: u,
        color: p,
        thick: g,
        direction: m,
        text: i,
        textColor: n,
        textSize: f
      } = e, b = ((s = t.default) == null ? void 0 : s.call(t)) || i;
      return r("div", {
        class: h({
          [o]: o !== "relative"
        })
      }, [r("div", {
        class: h("bg", {
          [o]: o !== "relative"
        }),
        style: {
          flexDirection: $e(a),
          backgroundColor: c,
          borderRadius: y(d),
          padding: y(u)
        }
      }, [r("span", {
        class: h("icon-wrapper"),
        style: {
          width: y(l),
          height: y(l)
        }
      }, [((k = t.icon) == null ? void 0 : k.call(t)) || r("svg", {
        class: h("icon", {
          [m]: m
        }),
        viewBox: "25 25 50 50"
      }, [r("circle", {
        class: h("icon-circle"),
        style: {
          stroke: p,
          strokeWidth: y(g)
        },
        cx: "50",
        cy: "50",
        r: "20",
        fill: "none"
      }, null)])]), b && r("span", {
        class: h("text", {
          [a]: a
        }),
        style: {
          color: n,
          fontSize: y(f)
        }
      }, [b])])]);
    };
  }
}), Te = (e, t) => {
  const a = T({
    render: () => ne(ae, { ...e }, { ...t })
  }), c = document.createElement("div");
  return a.mount(c);
}, Z = (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));
}, Fe = {
  getSSRProps: (e) => ({ ...e }),
  mounted: (e, t) => {
    e.instance = Te({ ...e.customProps }, { ...e.customSlots }), t.value && Z(e, t);
  },
  updated: (e, t) => {
    t.oldValue !== t.value && Z(e, t);
  },
  unmounted: (e) => {
    e.instance && e.instance.$el.remove();
  }
};
B(ae);
function Ue(e) {
  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !ge(e);
}
const [Ee, 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"
  },
  // 动画时长
  duration: {
    type: Number,
    default: 300
  }
}, oe = /* @__PURE__ */ x({
  name: Ee,
  directives: {
    loading: Fe
  },
  props: qe,
  emits: ["update:modelValue", "cancel", "confirm"],
  setup(e, {
    emit: t,
    slots: o
  }) {
    const a = P({
      cancel: !1,
      confirm: !1
    }), c = (n) => {
      i.value = n;
    }, d = (n) => {
      var f;
      c(!1), (f = e.callback) == null || f.call(e, n);
    }, l = (n) => {
      t("cancel", n, p("cancel"));
    }, u = (n) => {
      t("confirm", n, p("confirm"));
    }, p = (n) => {
      const {
        modelValue: f,
        beforeClose: b
      } = e;
      if (f)
        if (ye(b)) {
          a[n] = !0;
          const s = b(n);
          be(s) ? s.then(($) => {
            g($, n);
          }).catch(($) => {
            throw new Error($);
          }) : g(s, n);
        } else
          d(n);
    }, g = (n, f) => {
      n && d(f), a[f] = !1;
    }, m = (n, f, b) => {
      let s = Number(n.substring(0, n.length - 2));
      return s /= f || 2, b ? `${b(s)}px` : `${s}px`;
    }, i = j({
      get: () => e.modelValue,
      set: (n) => t("update:modelValue", n)
    });
    return () => {
      const {
        width: n,
        title: f,
        titleAlign: b,
        message: s,
        messageAlign: k,
        isCloseOnClickMask: $,
        showCloseIcon: V,
        showCancelBtn: F,
        cancelButtonText: L,
        showConfirmBtn: U,
        confirmButtonText: ue,
        imgSrc: E,
        circleImg: C,
        teleport: ce,
        duration: ie
      } = e;
      return r(Ie, pe({
        modelValue: i.value,
        "onUpdate:modelValue": (I) => i.value = I,
        customClass: v(),
        customStyle: {
          width: y(n)
        }
      }, {
        "onUpdate:modelValue": c
      }, {
        isCloseOnClickMask: $,
        teleport: ce,
        duration: ie
      }), {
        default: () => {
          var I, q, W, G;
          return [((I = o.img) == null ? void 0 : I.call(o)) || E && r("div", {
            class: v("img", {
              circle: C
            }),
            style: {
              top: C ? `-${m(y(n), 4)}` : "auto",
              left: C ? `calc(50% - ${m(y(n), 4)})` : "auto"
            }
          }, [r("div", {
            style: {
              width: C ? m(y(n)) : y(n),
              height: m(y(n)),
              background: `url(${E}) center`,
              borderRadius: C ? "50%" : "20px 20px 0 0"
            }
          }, null)]), r("div", {
            class: v("container")
          }, [r("div", {
            style: {
              height: C ? m(y(n), 4, (se) => se + 20) : "24px"
            }
          }, null), ((q = o.title) == null ? void 0 : q.call(o)) || r("div", {
            class: v("title"),
            style: {
              textAlign: b
            }
          }, [f]), r("div", {
            class: v("content")
          }, [r("div", {
            class: v("message"),
            style: {
              textAlign: k
            }
          }, [((W = o.default) == null ? void 0 : W.call(o)) || s]), ((G = o.footer) == null ? void 0 : G.call(o)) || r("div", {
            class: v("footer"),
            style: {
              paddingTop: F || U ? "20px" : "0px"
            }
          }, [F && N(r(Y, {
            type: "secondary",
            class: v("footer-btn"),
            onClick: l
          }, Ue(L) ? L : {
            default: () => [L]
          }), [[H("loading"), a.cancel]]), U && N(r(Y, {
            type: "primary",
            class: v("footer-btn"),
            onClick: u
          }, {
            default: () => [a.confirm ? "" : ue]
          }), [[H("loading"), a.confirm]])])]), V && r("div", {
            class: v("close"),
            onClick: () => d("close")
          }, [r(Me, {
            name: "cross"
          }, null)])])];
        }
      });
    };
  }
});
let M = T({}), We = 0;
const re = [], Je = (e, t) => {
  const o = `dialog${We += 1}`;
  M = T({
    setup() {
      const d = D(!0), l = (u) => {
        d.value = u;
      };
      return () => ne(
        oe,
        {
          modelValue: d.value,
          "onUpdate:modelValue": l,
          ...e,
          onAfterLeave: () => {
            Ge(o);
          }
        },
        { ...t }
      );
    }
  });
  const c = document.createElement("div");
  re.push({ id: o, app: M, el: c }), M.mount(c);
}, Ge = (e) => {
  re.forEach((t) => {
    e === t.id && t.app.unmount();
  });
};
const Ke = B(oe);
export {
  Je as createDialog,
  Ke as default
};