@transsionfe/semi-ui-vue 0.0.5 → 0.0.7

package/lib/es/components/modal/Modal.vue.js

@@ -1,277 +0,0 @@
-import { defineComponent as V, useModel as G, inject as U, ref as u, computed as s, h as C, watch as m, onMounted as q, onBeforeUnmount as J, openBlock as Q, createBlock as X, unref as f, withCtx as p, createVNode as h, normalizeStyle as Y, mergeProps as Z, renderSlot as ee, createCommentVNode as oe, mergeModels as x } from "vue";
-import N from "classnames";
-import { omit as te } from "lodash-es";
-import { cssClasses as ne } from "@douyinfe/semi-foundation/modal/constants";
-import ae from "@douyinfe/semi-foundation/modal/modalFoundation";
-import le from "./ModalContent.vue.js";
-import se from "../_portal/Portal.vue.js";
-import F from "../_cssAnimation/index.vue.js";
-import O from "../button/Button.vue.js";
-import { useFoundation as ie } from "../../_utils/useFoundation.js";
-const he = /* @__PURE__ */ V({
-  __name: "Modal",
-  props: /* @__PURE__ */ x({
-    afterClose: {},
-    bodyStyle: {},
-    cancelButtonProps: {},
-    cancelText: {},
-    centered: { type: Boolean, default: !1 },
-    className: {},
-    modalContentClass: {},
-    closable: { type: Boolean, default: !0 },
-    confirmLoading: { type: Boolean },
-    cancelLoading: { type: Boolean },
-    content: {},
-    footer: {},
-    hasCancel: { type: Boolean, default: !0 },
-    header: {},
-    height: {},
-    mask: { type: Boolean, default: !0 },
-    maskClosable: { type: Boolean, default: !0 },
-    maskStyle: {},
-    maskFixed: { type: Boolean, default: !1 },
-    motion: { type: Boolean, default: !0 },
-    okButtonProps: {},
-    okText: {},
-    okType: { default: "primary" },
-    style: {},
-    title: {},
-    visible: { type: Boolean, default: !1 },
-    width: {},
-    zIndex: { default: 1e3 },
-    icon: {},
-    getPopupContainer: {},
-    closeIcon: {},
-    closeOnEsc: { type: Boolean, default: !0 },
-    size: { default: "small" },
-    lazyRender: { type: Boolean, default: !0 },
-    keepDOM: { type: Boolean, default: !1 },
-    direction: {},
-    fullScreen: { type: Boolean, default: !1 },
-    preventScroll: { type: Boolean },
-    footerFill: { type: Boolean },
-    modalRender: {},
-    onCancel: {},
-    onOk: {}
-  }, {
-    modelValue: { type: Boolean },
-    modelModifiers: {}
-  }),
-  emits: /* @__PURE__ */ x(["cancel", "ok", "update:visible"], ["update:modelValue"]),
-  setup(i, { emit: $ }) {
-    const r = ne.DIALOG, g = G(i, "modelValue"), R = U("semi-modal-imperative", !1), o = i, v = $, t = u({
-      displayNone: !o.visible,
-      isFullScreen: o.fullScreen,
-      onOKReturnPromiseStatus: void 0,
-      onCancelReturnPromiseStatus: void 0
-    }), d = u(null), S = u(0), y = u("100%"), B = u(!1), w = () => {
-      const e = document.createElement("div");
-      e.style.cssText = "width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;", document.body.appendChild(e);
-      const n = e.offsetWidth - e.clientWidth;
-      return document.body.removeChild(e), n;
-    }, E = {
-      disabledBodyScroll: () => {
-        const { getPopupContainer: e } = o;
-        d.value = document.body.style.overflow || "", (!e || e() === document.body) && d.value !== "hidden" && (document.body.style.overflow = "hidden", document.body.style.width = `calc(${y.value || "100%"} - ${S.value}px)`);
-      },
-      enabledBodyScroll: () => {
-        const { getPopupContainer: e } = o;
-        (!e || e() === document.body) && d.value !== null && d.value !== "hidden" && (document.body.style.overflow = d.value, document.body.style.width = y.value);
-      },
-      notifyCancel: (e) => {
-        v("cancel", e);
-      },
-      notifyOk: (e) => {
-        v("ok", e);
-      },
-      notifyClose: () => {
-        var e;
-        (e = o.afterClose) == null || e.call(o);
-      },
-      toggleDisplayNone: (e, n) => {
-        e !== t.value.displayNone && (t.value.displayNone = e, n == null || n(e));
-      },
-      notifyFullScreen: (e) => {
-        e !== t.value.isFullScreen && (t.value.isFullScreen = e);
-      },
-      getProps: () => o,
-      getProp: (e) => o[e],
-      getState: (e) => t.value[e],
-      getStates: () => t.value,
-      setState: (e) => {
-        Object.assign(t.value, e);
-      },
-      getContext: () => {
-      },
-      getContexts: () => ({}),
-      getCache: () => {
-      },
-      getCaches: () => ({}),
-      setCache: () => {
-      },
-      stopPropagation: (e) => {
-        var n;
-        return (n = e == null ? void 0 : e.stopPropagation) == null ? void 0 : n.call(e);
-      },
-      persistEvent: () => {
-      }
-    }, { foundation: L } = ie(ae, E), a = L, k = (e) => {
-      a.handleCancel(e), R || (g.value = !1, v("update:visible", !1));
-    }, M = (e) => {
-      a.handleOk(e);
-    }, T = () => {
-      b();
-    }, z = () => {
-      b();
-    }, b = () => {
-      const e = l.value;
-      a.toggleDisplayNone(!e);
-    }, D = s(() => {
-      var c;
-      if (o.footer !== void 0 && o.footer !== null)
-        return o.footer;
-      const e = o.hasCancel ? C(
-        O,
-        {
-          "aria-label": "cancel",
-          onClick: k,
-          loading: o.cancelLoading === void 0 ? t.value.onCancelReturnPromiseStatus === "pending" : o.cancelLoading,
-          type: "tertiary",
-          block: o.footerFill,
-          autoFocus: !0,
-          ...o.cancelButtonProps,
-          style: {
-            ...o.footerFill ? { marginLeft: "unset" } : {},
-            ...(c = o.cancelButtonProps) == null ? void 0 : c.style
-          }
-        },
-        { default: () => o.cancelText || "取消" }
-      ) : null, n = C(
-        O,
-        {
-          "aria-label": "confirm",
-          type: o.okType,
-          theme: "solid",
-          block: o.footerFill,
-          loading: o.confirmLoading === void 0 ? t.value.onOKReturnPromiseStatus === "pending" : o.confirmLoading,
-          onClick: M,
-          ...o.okButtonProps
-        },
-        { default: () => o.okText || "确定" }
-      );
-      return C(
-        "div",
-        {
-          class: N({
-            [`${r}-footerfill`]: o.footerFill
-          })
-        },
-        [e, n].filter(Boolean)
-      );
-    }), I = s(() => t.value.isFullScreen), l = s(() => o.visible === !0 || g.value === !0), P = s(() => l.value || o.keepDOM && (!o.lazyRender || B.value) || o.motion && !t.value.displayNone), _ = s(() => {
-      const e = { zIndex: o.zIndex };
-      return o.getPopupContainer && o.getPopupContainer() !== document.body && (e.position = "static"), e;
-    }), W = s(() => N(o.className, {
-      [`${r}-displayNone`]: o.keepDOM && t.value.displayNone
-    })), A = s(() => ({
-      ...te(o, [
-        "footer",
-        "motion",
-        "keepDOM",
-        "zIndex",
-        "getPopupContainer",
-        "visible",
-        "modalContentClass",
-        "modalRender",
-        "afterClose",
-        "cancelButtonProps",
-        "cancelText",
-        "confirmLoading",
-        "cancelLoading",
-        "hasCancel",
-        "okButtonProps",
-        "okText",
-        "okType",
-        "onCancel",
-        "onOk",
-        "fullScreen",
-        "preventScroll",
-        "footerFill",
-        "lazyRender"
-      ]),
-      className: W.value
-    }));
-    return m(
-      () => o.fullScreen,
-      (e) => {
-        e !== t.value.isFullScreen && (t.value.isFullScreen = e);
-      }
-    ), m(
-      () => l.value,
-      (e, n) => {
-        e && t.value.displayNone ? t.value.displayNone = !1 : !e && !t.value.displayNone && (o.motion || (t.value.displayNone = !0)), !n && e ? a.beforeShow() : n && !e && a.afterHide();
-      },
-      { immediate: !0 }
-    ), m(
-      () => t.value.displayNone,
-      (e, n) => {
-        !n && e && a.afterHide();
-      }
-    ), q(() => {
-      S.value = w(), y.value = document.body.style.width, l.value && a.beforeShow();
-    }), J(() => {
-      l.value ? a.destroy() : a.enabledBodyScroll();
-    }), m(P, (e) => {
-      e && (B.value = !0);
-    }), (e, n) => P.value ? (Q(), X(F, {
-      key: 0,
-      motion: i.motion,
-      animationState: l.value ? "enter" : "leave",
-      startClassName: l.value ? `${f(r)}-content-animate-show` : `${f(r)}-content-animate-hide`,
-      onAnimationEnd: T
-    }, {
-      default: p(({ animationClassName: c, animationEventsNeedBind: j }) => [
-        h(F, {
-          motion: i.motion,
-          animationState: l.value ? "enter" : "leave",
-          startClassName: l.value ? `${f(r)}-mask-animate-show` : `${f(r)}-mask-animate-hide`,
-          onAnimationEnd: z
-        }, {
-          default: p(({
-            animationClassName: H,
-            animationEventsNeedBind: K
-          }) => [
-            h(se, {
-              style: Y(_.value),
-              getPopupContainer: i.getPopupContainer
-            }, {
-              default: p(() => [
-                h(le, Z(A.value, {
-                  contentClassName: `${c} ${i.modalContentClass || ""}`,
-                  maskClassName: H,
-                  contentExtraProps: j,
-                  maskExtraProps: K,
-                  isFullScreen: I.value,
-                  footer: D.value,
-                  modalRender: o.modalRender,
-                  onClose: k
-                }), {
-                  default: p(() => [
-                    ee(e.$slots, "default")
-                  ]),
-                  _: 3
-                }, 16, ["contentClassName", "maskClassName", "contentExtraProps", "maskExtraProps", "isFullScreen", "footer", "modalRender"])
-              ]),
-              _: 2
-            }, 1032, ["style", "getPopupContainer"])
-          ]),
-          _: 2
-        }, 1032, ["motion", "animationState", "startClassName"])
-      ]),
-      _: 3
-    }, 8, ["motion", "animationState", "startClassName"])) : oe("", !0);
-  }
-});
-export {
-  he as default
-};

package/lib/es/components/modal/ModalContent.vue.js

@@ -1,257 +0,0 @@
-import { defineComponent as W, useSlots as G, ref as w, onMounted as b, computed as a, h as l, onBeforeUnmount as q, openBlock as h, createElementBlock as E, mergeProps as v, createCommentVNode as J, createElementVNode as x, normalizeStyle as Q, normalizeClass as X, createBlock as Y, resolveDynamicComponent as Z, nextTick as ee } from "vue";
-import d from "classnames";
-import { get as te } from "lodash-es";
-import { cssClasses as oe } from "@douyinfe/semi-foundation/modal/constants";
-import ne from "../button/Button.vue.js";
-import se from "../typography/index.js";
-import le from "@douyinfe/semi-foundation/modal/modalContentFoundation";
-import { useFoundation as ae } from "../../_utils/useFoundation.js";
-import re from "../icons/icons/IconClose.vue.js";
-const ye = /* @__PURE__ */ W({
-  inheritAttrs: !1,
-  __name: "ModalContent",
-  props: {
-    title: {},
-    content: {},
-    icon: {},
-    header: {},
-    footer: {},
-    closable: { type: Boolean, default: !0 },
-    closeIcon: {},
-    closeOnEsc: { type: Boolean, default: !0 },
-    bodyStyle: {},
-    className: {},
-    contentClassName: {},
-    maskClassName: {},
-    style: {},
-    maskStyle: {},
-    width: {},
-    height: {},
-    centered: { type: Boolean, default: !1 },
-    mask: { type: Boolean, default: !0 },
-    maskClosable: { type: Boolean, default: !0 },
-    maskFixed: { type: Boolean, default: !1 },
-    size: {},
-    isFullScreen: { type: Boolean },
-    direction: {},
-    getPopupContainer: {},
-    contentExtraProps: {},
-    maskExtraProps: {},
-    modalRender: {},
-    onAnimationEnd: {}
-  },
-  emits: ["close"],
-  setup(m, { emit: D }) {
-    const o = oe.DIALOG, t = m, M = D, p = G(), f = w(), s = w({
-      dialogMouseDown: !1,
-      prevFocusElement: null
-    });
-    b(() => {
-      s.value.prevFocusElement = document.activeElement;
-    });
-    const F = {
-      notifyClose: (e) => {
-        M("close", e);
-      },
-      notifyDialogMouseDown: () => {
-        s.value.dialogMouseDown = !0;
-      },
-      notifyDialogMouseUp: () => {
-        s.value.dialogMouseDown && setTimeout(() => {
-          s.value.dialogMouseDown = !1;
-        }, 0);
-      },
-      addKeyDownEventListener: () => {
-        t.closeOnEsc && document.addEventListener("keydown", y);
-      },
-      removeKeyDownEventListener: () => {
-        t.closeOnEsc && document.removeEventListener("keydown", y);
-      },
-      getMouseState: () => s.value.dialogMouseDown,
-      modalDialogFocus: () => {
-        ee(() => {
-          var e;
-          (e = f.value) == null || e.focus({ preventScroll: !0 });
-        });
-      },
-      modalDialogBlur: () => {
-        var e;
-        (e = f.value) == null || e.blur();
-      },
-      prevFocusElementReFocus: () => {
-        s.value.prevFocusElement && typeof s.value.prevFocusElement.focus == "function" && s.value.prevFocusElement.focus({ preventScroll: !0 });
-      },
-      getState: (e) => s.value[e],
-      getStates: () => s.value,
-      setState: (e) => {
-        Object.assign(s.value, e);
-      },
-      getContext: () => {
-      },
-      getContexts: () => ({}),
-      getProp: (e) => t[e],
-      getProps: () => t,
-      getCache: () => {
-      },
-      getCaches: () => ({}),
-      setCache: () => {
-      },
-      stopPropagation: (e) => {
-        var n;
-        return (n = e == null ? void 0 : e.stopPropagation) == null ? void 0 : n.call(e);
-      },
-      persistEvent: () => {
-      }
-    }, { foundation: S } = ae(le, F), r = S, y = (e) => {
-      r.handleKeyDown(e);
-    }, B = () => {
-      t.maskClosable && r.handleMaskMouseUp();
-    }, P = (e) => {
-      t.maskClosable && r.handleMaskClick(e);
-    }, N = () => {
-      r.handleDialogMouseDown();
-    }, z = (e) => {
-      r.close(e);
-    }, g = () => {
-      const { closable: e, closeIcon: n } = t;
-      if (!e)
-        return null;
-      const i = n || l(re);
-      return l(ne, {
-        key: "close-btn",
-        onClick: z,
-        type: "tertiary",
-        icon: i,
-        theme: "borderless",
-        size: "small",
-        className: `${o}-close`,
-        "aria-label": "Close"
-      });
-    }, C = () => {
-      const { icon: e } = t;
-      return e ? l("span", { class: `${o}-icon-wrapper`, "x-semi-prop": "icon" }, [e]) : null;
-    }, A = () => {
-      if (t.header !== void 0 && t.header !== null)
-        return t.header;
-      const { title: e } = t;
-      if (e == null)
-        return null;
-      const n = g(), u = [
-        C(),
-        l(
-          se.Title,
-          {
-            heading: 5,
-            className: `${o}-title`,
-            id: `${o}-title`,
-            "x-semi-prop": "title"
-          },
-          { default: () => e }
-        ),
-        n
-      ].filter((c) => c !== null);
-      return l("div", { class: `${o}-header` }, u);
-    }, O = () => {
-      var $;
-      const { bodyStyle: e, title: n } = t, i = d(`${o}-body`, {
-        [`${o}-withIcon`]: t.icon
-      }), u = g(), c = C(), V = n != null || t.header !== void 0 && t.header !== null, k = ($ = p.default) == null ? void 0 : $.call(p);
-      return V ? l(
-        "div",
-        {
-          class: i,
-          id: `${o}-body`,
-          style: e,
-          "x-semi-prop": "children"
-        },
-        k
-      ) : l("div", { class: `${o}-body-wrapper` }, [
-        c,
-        l(
-          "div",
-          {
-            class: i,
-            style: e,
-            "x-semi-prop": "children"
-          },
-          k
-        ),
-        u
-      ]);
-    }, T = () => {
-      const { footer: e } = t;
-      return e ? l("div", { class: `${o}-footer`, "x-semi-prop": "footer" }, [e]) : null;
-    }, I = a(() => {
-      const e = d(`${o}-content`, t.contentClassName, {
-        [`${o}-content-fullScreen`]: t.isFullScreen,
-        [`${o}-content-height-set`]: t.height || te(t.style, "height")
-      }), n = A(), i = O(), u = T(), c = l(
-        "div",
-        {
-          role: "dialog",
-          ref: f,
-          "aria-modal": "true",
-          "aria-labelledby": `${o}-title`,
-          "aria-describedby": `${o}-body`,
-          class: e,
-          onAnimationEnd: t.onAnimationEnd
-        },
-        [n, i, u]
-      );
-      return t.modalRender ? t.modalRender(c) : c;
-    }), L = a(() => {
-      var n;
-      const { direction: e } = t;
-      return d(t.className, {
-        [`${o}-popup`]: t.getPopupContainer && t.getPopupContainer() !== ((n = globalThis == null ? void 0 : globalThis.document) == null ? void 0 : n.body) && !t.maskFixed,
-        [`${o}-fixed`]: t.maskFixed,
-        [`${o}-rtl`]: e === "rtl"
-      });
-    }), R = a(() => d({
-      [`${o}-wrap`]: !0,
-      [`${o}-wrap-center`]: t.centered
-    })), K = a(() => d(`${o}-mask`, t.maskClassName, {
-      [`${o}-mask-fixed`]: t.maskFixed
-    })), U = a(() => d(o, {
-      [`${o}-centered`]: t.centered,
-      [`${o}-${t.size}`]: t.size
-    })), _ = a(() => {
-      const e = { ...t.style };
-      return t.width && (e.width = typeof t.width == "number" ? `${t.width}px` : t.width), t.height && (e.height = typeof t.height == "number" ? `${t.height}px` : t.height), t.isFullScreen && (e.width = "100%", e.height = "100%", e.margin = "unset"), e;
-    }), j = a(() => t.maskStyle || {}), H = a(() => {
-      const e = {};
-      return Object.keys(t).forEach((n) => {
-        (n.startsWith("data-") || n.startsWith("aria-")) && (e[n] = t[n]);
-      }), e;
-    });
-    return b(() => {
-      r.modalDialogFocus();
-    }), q(() => {
-      r.destroy();
-    }), (e, n) => (h(), E("div", v({ class: L.value }, H.value), [
-      m.mask ? (h(), E("div", v({
-        key: 0,
-        class: K.value,
-        style: j.value
-      }, m.maskExtraProps), null, 16)) : J("", !0),
-      x("div", v({
-        role: "none",
-        class: R.value
-      }, m.contentExtraProps, {
-        onClick: P,
-        onMouseup: B
-      }), [
-        x("div", {
-          class: X(U.value),
-          style: Q(_.value),
-          onMousedown: N
-        }, [
-          (h(), Y(Z(I.value)))
-        ], 38)
-      ], 16)
-    ], 16));
-  }
-});
-export {
-  ye as default
-};

package/lib/es/components/modal/confirm.js

@@ -1,107 +0,0 @@
-import { createApp as h, h as r } from "vue";
-import { omit as y } from "lodash-es";
-import _ from "./ConfirmModal.vue.js";
-import C from "../icons/icons/IconInfoCircle.vue.js";
-import w from "../icons/icons/IconTickCircle.vue.js";
-import g from "../icons/icons/IconAlertCircle.vue.js";
-import v from "../icons/icons/IconAlertTriangle.vue.js";
-import $ from "../icons/icons/IconHelpCircle.vue.js";
-const a = [];
-function N(n) {
-  const i = document.createElement("div");
-  document.body.appendChild(i);
-  let o = { ...n, visible: !0 }, t = null, c = !1;
-  const l = () => {
-    if (c)
-      return;
-    c = !0, t && (t.unmount(), t = null), i.parentNode && i.parentNode.removeChild(i);
-    const e = a.indexOf(u);
-    e !== -1 && a.splice(e, 1);
-  };
-  function f(e) {
-    const { afterClose: s } = e;
-    if (c)
-      return;
-    t && (t.unmount(), t = null);
-    const p = {
-      ...e,
-      afterClose: () => {
-        c || (s == null || s(), setTimeout(() => l(), 0));
-      }
-    };
-    try {
-      t = h({
-        render() {
-          return r(_, p);
-        }
-      }), t.mount(i);
-    } catch (m) {
-      throw console.error("[Modal] Error mounting app:", m), m;
-    }
-  }
-  function u() {
-    o = {
-      ...o,
-      visible: !1
-    }, f(o);
-  }
-  function d(e) {
-    o = {
-      ...o,
-      ...e
-    }, f(o);
-  }
-  return f(o), a.push(u), {
-    destroy: u,
-    update: d
-  };
-}
-function A(n) {
-  return {
-    ...n,
-    type: "info",
-    icon: n.icon || r(C),
-    hasCancel: !1
-  };
-}
-function D(n) {
-  return {
-    ...n,
-    type: "success",
-    icon: n.icon || r(w),
-    hasCancel: !1
-  };
-}
-function F(n) {
-  return {
-    ...n,
-    type: "warning",
-    icon: n.icon || r(v),
-    hasCancel: !1
-  };
-}
-function O(n) {
-  return {
-    ...y(n, ["okButtonProps"]),
-    type: "error",
-    icon: n.icon || r(g),
-    hasCancel: !1,
-    okButtonProps: { type: "danger", ...n.okButtonProps }
-  };
-}
-function S(n) {
-  return {
-    ...n,
-    type: "confirm",
-    icon: n.icon || r($)
-  };
-}
-export {
-  N as default,
-  a as destroyFns,
-  S as withConfirm,
-  O as withError,
-  A as withInfo,
-  D as withSuccess,
-  F as withWarning
-};

package/lib/es/components/modal/useModal.js

@@ -1,64 +0,0 @@
-import { ref as E, h as f, createApp as b } from "vue";
-import { withConfirm as k, withWarning as x, withError as F, withSuccess as I, withInfo as M } from "./confirm.js";
-import N from "./ConfirmModal.vue.js";
-let m = 0;
-function H() {
-  const e = E([]);
-  function p(r) {
-    return e.value = [...e.value, r], () => {
-      e.value = e.value.filter((s) => s !== r);
-    };
-  }
-  function t(r) {
-    return function(w) {
-      m += 1;
-      const o = document.createElement("div");
-      document.body.appendChild(o);
-      let i = { ...r(w), visible: !0 }, n = null, u = !1;
-      const y = p(f("div", { key: `semi-modal-${m}` }));
-      function a(c) {
-        const { afterClose: l } = c;
-        if (u)
-          return;
-        n && (n.unmount(), n = null);
-        const g = {
-          ...c,
-          afterClose: () => {
-            u || (l == null || l(), setTimeout(() => {
-              d(), y();
-            }, 0));
-          }
-        };
-        n = b({
-          render() {
-            return f(N, g);
-          }
-        }), n.mount(o);
-      }
-      function d() {
-        u || (u = !0, n && (n.unmount(), n = null), o.parentNode && o.parentNode.removeChild(o));
-      }
-      function C(c) {
-        i = {
-          ...i,
-          ...c
-        }, a(i);
-      }
-      return a(i), {
-        destroy: d,
-        update: C
-      };
-    };
-  }
-  const v = {
-    info: t(M),
-    success: t(I),
-    error: t(F),
-    warning: t(x),
-    confirm: t(k)
-  }, h = f("div", { style: { display: "none" } }, e.value);
-  return [v, h];
-}
-export {
-  H as default
-};