vft 0.0.507 → 0.0.511

package/es/components/message-box/message-box.vue.d.ts

@@ -0,0 +1,103 @@
+import type { Action, MessageBoxState, MessageBoxType } from './types';
+interface Props {
+    /** 按钮尺寸 */
+    buttonSize?: 'large' | 'default' | 'small';
+    /** 是否显示遮罩 */
+    modal?: boolean;
+    /** 是否锁定 body 滚动 */
+    lockScroll?: boolean;
+    /** 是否显示关闭按钮 */
+    showClose?: boolean;
+    /** 点击遮罩是否关闭 */
+    closeOnClickModal?: boolean;
+    /** 按 ESC 是否关闭 */
+    closeOnPressEscape?: boolean;
+    /** hash 改变时是否关闭 */
+    closeOnHashChange?: boolean;
+    /** 内容是否居中 */
+    center?: boolean;
+    /** 是否可拖拽 */
+    draggable?: boolean;
+    /** 拖拽时是否允许溢出视口 */
+    overflow?: boolean;
+    /** 按钮是否使用圆角 */
+    roundButton?: boolean;
+    /** 自定义挂载节点 */
+    container?: string;
+    /** boxType，由 alert / confirm / prompt 内部传入 */
+    boxType?: MessageBoxType;
+}
+declare function doClose(): void;
+declare function handleAction(action: Action): void;
+declare function handleClose(): void;
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>, {
+    visible: import("vue").Ref<boolean, boolean>;
+    state: {
+        autofocus: boolean;
+        title: string | undefined;
+        message: string | import("vue").VNode;
+        type: import("./types").MessageBoxMessageType;
+        icon: string;
+        closeIcon: string;
+        customClass: string;
+        customStyle: Record<string, string | number>;
+        showInput: boolean;
+        inputValue: string;
+        inputPlaceholder: string;
+        inputType: string;
+        inputPattern: RegExp | null;
+        inputValidator: import("./types").MessageBoxInputValidator;
+        inputErrorMessage: string;
+        showConfirmButton: boolean;
+        showCancelButton: boolean;
+        action: Action;
+        dangerouslyUseHTMLString: boolean;
+        confirmButtonText: string;
+        cancelButtonText: string;
+        confirmButtonType: import("./types").MessageBoxButtonType;
+        cancelButtonType: import("./types").MessageBoxButtonType;
+        confirmButtonLoading: boolean;
+        cancelButtonLoading: boolean;
+        confirmButtonLoadingIcon: string;
+        cancelButtonLoadingIcon: string;
+        confirmButtonClass: string;
+        confirmButtonDisabled: boolean;
+        cancelButtonClass: string;
+        editorErrorMessage: string;
+        beforeClose: null | ((action: Action, instance: MessageBoxState, done: () => void) => void);
+        callback: null | import("./types").Callback;
+        distinguishCancelAndClose: boolean;
+        modalFade: boolean;
+        modalClass: string;
+        validateError: boolean;
+        zIndex: number;
+    };
+    doClose: typeof doClose;
+    handleClose: typeof handleClose;
+    handleAction: typeof handleAction;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    vanish: () => void;
+    action: (action: Action) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & Readonly<{
+    onAction?: ((action: Action) => any) | undefined;
+    onVanish?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/components/message-box/message-box.vue.js

@@ -0,0 +1,4 @@
+import f from "./message-box.vue2.js";
+export {
+  f as default
+};

package/es/components/message-box/message-box.vue2.js

@@ -0,0 +1,358 @@
+import { defineComponent as J, ref as p, reactive as se, computed as v, watch as F, nextTick as T, onMounted as ie, onBeforeUnmount as re, openBlock as u, createBlock as y, Transition as ue, withCtx as x, withDirectives as V, createVNode as w, unref as t, createElementVNode as c, normalizeClass as i, withModifiers as E, normalizeStyle as q, createElementBlock as R, createCommentVNode as g, toDisplayString as h, withKeys as M, renderSlot as ce, resolveDynamicComponent as Z, vShow as S, createTextVNode as W } from "vue";
+import { VftButton as j } from "../button/index.js";
+import de from "../focus-trap/focus-trap.vue.js";
+import "../focus-trap/utils.js";
+import { VftIcon as z } from "../icon/index.js";
+import { VftInput as fe } from "../input/index.js";
+import { VftOverlay as me } from "../overlay/index.js";
+import "@vueuse/core";
+import { isFunction as pe, isString as ve } from "@vft/utils";
+import "../config-provider/hooks/use-global-config.js";
+import "lodash-es";
+import "../form/index.js";
+import { useDraggable as ye } from "../../hooks/use-draggable/index.js";
+import { useId as G } from "../../hooks/use-id/index.js";
+import { useLockscreen as ge } from "../../hooks/use-lockscreen/index.js";
+import "../../hooks/use-model-toggle/index.js";
+import { useNamespace as Ce } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import { useSameTarget as Be } from "../../hooks/use-same-target/index.js";
+import { useZIndex as be } from "../../hooks/use-z-index/index.js";
+const xe = ["aria-label", "aria-describedby"], we = ["id"], he = J({
+  name: "VftMessageBox",
+  inheritAttrs: !1
+}), qe = /* @__PURE__ */ J({
+  ...he,
+  props: {
+    buttonSize: { default: "default" },
+    modal: { type: Boolean, default: !0 },
+    lockScroll: { type: Boolean, default: !0 },
+    showClose: { type: Boolean, default: !0 },
+    closeOnClickModal: { type: Boolean, default: !0 },
+    closeOnPressEscape: { type: Boolean, default: !0 },
+    closeOnHashChange: { type: Boolean, default: !0 },
+    center: { type: Boolean, default: !1 },
+    draggable: { type: Boolean, default: !1 },
+    overflow: { type: Boolean, default: !1 },
+    roundButton: { type: Boolean, default: !1 },
+    container: { default: "body" },
+    boxType: { default: "" }
+  },
+  emits: ["vanish", "action"],
+  setup(l, { expose: Q, emit: X }) {
+    const Y = X, L = {
+      primary: "icon-info-filled",
+      success: "icon-success-filled",
+      warning: "icon-warning-filled",
+      info: "icon-info-filled",
+      error: "icon-circle-close-filled"
+    }, a = Ce("message-box"), { nextZIndex: $ } = be(), d = p(!1), e = se({
+      autofocus: !0,
+      beforeClose: null,
+      callback: null,
+      cancelButtonText: "",
+      cancelButtonClass: "",
+      confirmButtonText: "",
+      confirmButtonClass: "",
+      cancelButtonType: "default",
+      confirmButtonType: "primary",
+      customClass: "",
+      customStyle: {},
+      dangerouslyUseHTMLString: !1,
+      distinguishCancelAndClose: !1,
+      icon: "",
+      closeIcon: "",
+      inputPattern: null,
+      inputPlaceholder: "",
+      inputType: "text",
+      inputValue: "",
+      inputValidator: void 0,
+      inputErrorMessage: "",
+      message: "",
+      modalFade: !0,
+      modalClass: "",
+      showCancelButton: !1,
+      showConfirmButton: !0,
+      type: "",
+      title: void 0,
+      showInput: !1,
+      action: "",
+      confirmButtonLoading: !1,
+      cancelButtonLoading: !1,
+      confirmButtonLoadingIcon: "icon-loading",
+      cancelButtonLoadingIcon: "icon-loading",
+      confirmButtonDisabled: !1,
+      editorErrorMessage: "",
+      validateError: !1,
+      zIndex: $()
+    }), D = G(), I = G(), O = v(() => {
+      const n = e.type;
+      return { [a.bm("icon", n)]: n && L[n] };
+    }), k = v(() => {
+      const n = e.type;
+      return e.icon || n && L[n] || "";
+    }), A = v(() => !!e.message), f = p(), H = p(), C = p(), B = p(), P = p(), K = v(() => l.buttonSize), _ = v(() => l.draggable), ee = v(() => l.overflow), { isDragging: te } = ye(
+      f,
+      H,
+      _,
+      ee
+    );
+    F(
+      () => e.inputValue,
+      async (n) => {
+        await T(), l.boxType === "prompt" && n && N();
+      },
+      { immediate: !0 }
+    ), F(
+      () => d.value,
+      (n) => {
+        n && (l.boxType !== "prompt" && (e.autofocus ? C.value = P.value?.$el ?? f.value : C.value = f.value), e.zIndex = $()), l.boxType === "prompt" && (n ? T().then(() => {
+          B.value && B.value.$el && (e.autofocus ? C.value = le() ?? f.value : C.value = f.value);
+        }) : (e.editorErrorMessage = "", e.validateError = !1));
+      }
+    ), ie(async () => {
+      await T(), l.closeOnHashChange && window.addEventListener("hashchange", b);
+    }), re(() => {
+      l.closeOnHashChange && window.removeEventListener("hashchange", b);
+    });
+    function b() {
+      d.value && (d.value = !1, T(() => {
+        e.action && Y("action", e.action);
+      }));
+    }
+    function oe() {
+      l.closeOnClickModal && r(e.distinguishCancelAndClose ? "close" : "cancel");
+    }
+    const m = Be(oe);
+    function ne(n) {
+      if (e.inputType !== "textarea" && !B.value?.isComposing)
+        return n.preventDefault(), r("confirm");
+    }
+    function r(n) {
+      l.boxType === "prompt" && n === "confirm" && !N() || (e.action = n, e.beforeClose ? e.beforeClose?.(n, e, b) : b());
+    }
+    function N() {
+      if (l.boxType === "prompt") {
+        const n = e.inputPattern;
+        if (n && !n.test(e.inputValue || ""))
+          return e.editorErrorMessage = e.inputErrorMessage || "输入的数据不合法!", e.validateError = !0, !1;
+        const o = e.inputValidator;
+        if (pe(o)) {
+          const s = o(e.inputValue);
+          if (s === !1)
+            return e.editorErrorMessage = e.inputErrorMessage || "输入的数据不合法!", e.validateError = !0, !1;
+          if (ve(s))
+            return e.editorErrorMessage = s, e.validateError = !0, !1;
+        }
+      }
+      return e.editorErrorMessage = "", e.validateError = !1, !0;
+    }
+    function le() {
+      const n = B.value?.$refs;
+      return n?.input ?? n?.textarea;
+    }
+    function U() {
+      r("close");
+    }
+    function ae() {
+      l.closeOnPressEscape && U();
+    }
+    return l.lockScroll && ge(d, { ns: a }), Q({
+      visible: d,
+      state: e,
+      doClose: b,
+      handleClose: U,
+      handleAction: r
+    }), (n, o) => (u(), y(ue, {
+      name: "fade-in-linear",
+      onAfterLeave: o[11] || (o[11] = (s) => n.$emit("vanish"))
+    }, {
+      default: x(() => [
+        V(w(t(me), {
+          "z-index": e.zIndex,
+          "overlay-class": [t(a).is("message-box"), e.modalClass],
+          mask: l.modal
+        }, {
+          default: x(() => [
+            c("div", {
+              role: "dialog",
+              "aria-label": e.title,
+              "aria-modal": "true",
+              "aria-describedby": e.showInput ? void 0 : t(D),
+              class: i(`${t(a).namespace.value}-overlay-message-box`),
+              onClick: o[8] || (o[8] = //@ts-ignore
+              (...s) => t(m).onClick && t(m).onClick(...s)),
+              onMousedown: o[9] || (o[9] = //@ts-ignore
+              (...s) => t(m).onMousedown && t(m).onMousedown(...s)),
+              onMouseup: o[10] || (o[10] = //@ts-ignore
+              (...s) => t(m).onMouseup && t(m).onMouseup(...s))
+            }, [
+              w(t(de), {
+                loop: "",
+                trapped: d.value,
+                "focus-trap-el": f.value,
+                "focus-start-el": C.value,
+                onReleaseRequested: ae
+              }, {
+                default: x(() => [
+                  c("div", {
+                    ref_key: "rootRef",
+                    ref: f,
+                    class: i([
+                      t(a).b(),
+                      e.customClass,
+                      t(a).is("draggable", l.draggable),
+                      t(a).is("dragging", t(te)),
+                      { [t(a).m("center")]: l.center }
+                    ]),
+                    style: q(e.customStyle),
+                    tabindex: "-1",
+                    onClick: o[7] || (o[7] = E(() => {
+                    }, ["stop"]))
+                  }, [
+                    e.title !== null && e.title !== void 0 ? (u(), R("div", {
+                      key: 0,
+                      ref_key: "headerRef",
+                      ref: H,
+                      class: i([t(a).e("header"), { "show-close": l.showClose }])
+                    }, [
+                      c("div", {
+                        class: i(t(a).e("title"))
+                      }, [
+                        k.value && l.center ? (u(), y(t(z), {
+                          key: 0,
+                          icon: k.value,
+                          class: i([t(a).e("status"), O.value])
+                        }, null, 8, ["icon", "class"])) : g("", !0),
+                        c("span", null, h(e.title), 1)
+                      ], 2),
+                      l.showClose ? (u(), R("button", {
+                        key: 0,
+                        type: "button",
+                        class: i(t(a).e("headerbtn")),
+                        "aria-label": "close",
+                        onClick: o[0] || (o[0] = (s) => r(
+                          e.distinguishCancelAndClose ? "close" : "cancel"
+                        )),
+                        onKeydown: o[1] || (o[1] = M(E((s) => r(
+                          e.distinguishCancelAndClose ? "close" : "cancel"
+                        ), ["prevent"]), ["enter"]))
+                      }, [
+                        w(t(z), {
+                          icon: e.closeIcon || "icon-close",
+                          class: i(t(a).e("close"))
+                        }, null, 8, ["icon", "class"])
+                      ], 34)) : g("", !0)
+                    ], 2)) : g("", !0),
+                    c("div", {
+                      id: t(D),
+                      class: i(t(a).e("content"))
+                    }, [
+                      c("div", {
+                        class: i(t(a).e("container"))
+                      }, [
+                        k.value && !l.center && A.value ? (u(), y(t(z), {
+                          key: 0,
+                          icon: k.value,
+                          class: i([t(a).e("status"), O.value])
+                        }, null, 8, ["icon", "class"])) : g("", !0),
+                        A.value ? (u(), R("div", {
+                          key: 1,
+                          class: i(t(a).e("message"))
+                        }, [
+                          ce(n.$slots, "default", {}, () => [
+                            e.dangerouslyUseHTMLString ? (u(), y(Z(e.showInput ? "label" : "p"), {
+                              key: 1,
+                              for: e.showInput ? t(I) : void 0,
+                              innerHTML: e.message
+                            }, null, 8, ["for", "innerHTML"])) : (u(), y(Z(e.showInput ? "label" : "p"), {
+                              key: 0,
+                              for: e.showInput ? t(I) : void 0,
+                              textContent: h(e.message)
+                            }, null, 8, ["for", "textContent"]))
+                          ])
+                        ], 2)) : g("", !0)
+                      ], 2),
+                      V(c("div", {
+                        class: i(t(a).e("input"))
+                      }, [
+                        w(t(fe), {
+                          id: t(I),
+                          ref_key: "inputRef",
+                          ref: B,
+                          modelValue: e.inputValue,
+                          "onUpdate:modelValue": o[2] || (o[2] = (s) => e.inputValue = s),
+                          type: e.inputType,
+                          placeholder: e.inputPlaceholder,
+                          "aria-invalid": e.validateError,
+                          class: i({ invalid: e.validateError }),
+                          onKeydown: M(ne, ["enter"])
+                        }, null, 8, ["id", "modelValue", "type", "placeholder", "aria-invalid", "class"]),
+                        c("div", {
+                          class: i(t(a).e("errormsg")),
+                          style: q({
+                            visibility: e.editorErrorMessage ? "visible" : "hidden"
+                          })
+                        }, h(e.editorErrorMessage), 7)
+                      ], 2), [
+                        [S, e.showInput]
+                      ])
+                    ], 10, we),
+                    c("div", {
+                      class: i(t(a).e("btns"))
+                    }, [
+                      e.showCancelButton ? (u(), y(t(j), {
+                        key: 0,
+                        type: e.cancelButtonType === "text" ? "default" : e.cancelButtonType,
+                        text: e.cancelButtonType === "text",
+                        loading: e.cancelButtonLoading,
+                        class: i([e.cancelButtonClass]),
+                        round: l.roundButton,
+                        size: K.value,
+                        onClick: o[3] || (o[3] = (s) => r("cancel")),
+                        onKeydown: o[4] || (o[4] = M(E((s) => r("cancel"), ["prevent"]), ["enter"]))
+                      }, {
+                        default: x(() => [
+                          W(h(e.cancelButtonText || "取消"), 1)
+                        ]),
+                        _: 1
+                      }, 8, ["type", "text", "loading", "class", "round", "size"])) : g("", !0),
+                      V(w(t(j), {
+                        ref_key: "confirmRef",
+                        ref: P,
+                        type: e.confirmButtonType === "text" ? "default" : e.confirmButtonType,
+                        text: e.confirmButtonType === "text",
+                        loading: e.confirmButtonLoading,
+                        class: i([e.confirmButtonClass]),
+                        round: l.roundButton,
+                        disabled: e.confirmButtonDisabled,
+                        size: K.value,
+                        onClick: o[5] || (o[5] = (s) => r("confirm")),
+                        onKeydown: o[6] || (o[6] = M(E((s) => r("confirm"), ["prevent"]), ["enter"]))
+                      }, {
+                        default: x(() => [
+                          W(h(e.confirmButtonText || "确定"), 1)
+                        ]),
+                        _: 1
+                      }, 8, ["type", "text", "loading", "class", "round", "disabled", "size"]), [
+                        [S, e.showConfirmButton]
+                      ])
+                    ], 2)
+                  ], 6)
+                ]),
+                _: 3
+              }, 8, ["trapped", "focus-trap-el", "focus-start-el"])
+            ], 42, xe)
+          ]),
+          _: 3
+        }, 8, ["z-index", "overlay-class", "mask"]), [
+          [S, d.value]
+        ])
+      ]),
+      _: 3
+    }));
+  }
+});
+export {
+  qe as default
+};

package/es/components/message-box/method.d.ts

@@ -0,0 +1,3 @@
+import type { IMessageBox } from './types';
+declare const _default: IMessageBox;
+export default _default;

package/es/components/message-box/method.js

@@ -0,0 +1,101 @@
+import { isString as g, hasOwn as u, isFunction as d, isElement as f, isObject as p, isUndefined as C } from "@vft/utils";
+import { isClient as b } from "@vueuse/core";
+import { debugWarn as A } from "../../utils/error.js";
+import "../config-provider/hooks/use-global-config.js";
+import { isVNode as h, render as E, createVNode as O } from "vue";
+import "lodash-es";
+import "../form/index.js";
+import T from "./message-box.vue2.js";
+const a = /* @__PURE__ */ new Map(), _ = (e) => {
+  let n = document.body;
+  return e.appendTo && (g(e.appendTo) && (n = document.querySelector(e.appendTo)), f(e.appendTo) && (n = e.appendTo), f(n) || (A(
+    "VftMessageBox",
+    "the appendTo option is not an HTMLElement. Falling back to document.body."
+  ), n = document.body)), n;
+}, i = (e, n) => {
+  const c = e.component?.proxy;
+  return () => c.handleAction(n);
+}, v = (e, n, c = null) => {
+  const l = O(
+    T,
+    e,
+    d(e.message) || h(e.message) ? {
+      default: d(e.message) ? () => e.message({
+        confirm: i(l, "confirm"),
+        cancel: i(l, "cancel"),
+        close: i(l, "close")
+      }) : () => e.message
+    } : null
+  );
+  return l.appContext = c, E(l, n), _(e).appendChild(n.firstElementChild), l.component;
+}, M = () => document.createElement("div"), w = (e, n) => {
+  const c = M();
+  e.onVanish = () => {
+    E(null, c), a.delete(s);
+  }, e.onAction = (t) => {
+    const m = a.get(s);
+    let o;
+    e.showInput ? o = { value: s.state.inputValue, action: t } : o = t, e.callback ? e.callback(o, l.proxy) : t === "cancel" || t === "close" ? e.distinguishCancelAndClose && t !== "cancel" ? m.reject("close") : m.reject("cancel") : m.resolve(o);
+  };
+  const l = v(e, c, n), s = l.proxy;
+  for (const t in e)
+    u(e, t) && !u(s.$props, t) && (s.state[t] = e[t]);
+  return s.visible = !0, s;
+};
+function r(e, n = null) {
+  if (!b) return Promise.reject();
+  let c;
+  return g(e) || h(e) ? e = {
+    message: e
+  } : c = e.callback, new Promise((l, s) => {
+    const t = w(
+      e,
+      n ?? r._context
+    );
+    a.set(t, {
+      options: e,
+      callback: c,
+      resolve: l,
+      reject: s
+    });
+  });
+}
+const x = ["alert", "confirm", "prompt"], S = {
+  alert: { closeOnPressEscape: !1, closeOnClickModal: !1 },
+  confirm: { showCancelButton: !0 },
+  prompt: { showCancelButton: !0, showInput: !0 }
+};
+x.forEach((e) => {
+  r[e] = y(
+    e
+  );
+});
+function y(e) {
+  return (n, c, l, s) => {
+    let t = "";
+    return p(c) ? (l = c, t = "") : C(c) ? t = "" : t = c, r(
+      Object.assign(
+        {
+          title: t,
+          message: n,
+          type: "",
+          ...S[e]
+        },
+        l,
+        {
+          boxType: e
+        }
+      ),
+      s
+    );
+  };
+}
+r.close = () => {
+  a.forEach((e, n) => {
+    n.doClose();
+  }), a.clear();
+};
+r._context = null;
+export {
+  r as default
+};

package/es/components/message-box/style/css.d.ts

@@ -0,0 +1,2 @@
+import 'vft/theme-style/vft-message-box.css';
+import 'vft/es/components/overlay/style/css';

package/es/components/message-box/style/css.js

@@ -0,0 +1,3 @@
+import "vft/theme-style/base.css";
+import "vft/theme-style/vft-message-box.css";
+import "vft/theme-style/vft-overlay.css";

package/es/components/message-box/style/index.d.ts

@@ -0,0 +1,2 @@
+import 'vft/theme-style/src/message-box.scss';
+import 'vft/es/components/overlay/style';

package/es/components/message-box/style/index.js

@@ -0,0 +1,3 @@
+import "vft/theme-style/src/base.scss";
+import "vft/theme-style/src/message-box.scss";
+import "vft/theme-style/src/overlay.scss";