vft 0.0.374 → 0.0.375

package/es/components/dialog/dialog.vue2.js

@@ -1,188 +1,199 @@
-import { defineComponent as B, ref as i, getCurrentInstance as z, provide as O, computed as P, createBlock as C, openBlock as b, unref as e, withCtx as t, createVNode as f, Transition as N, withDirectives as q, createElementVNode as j, normalizeStyle as K, normalizeClass as U, createCommentVNode as G, mergeProps as H, createSlots as J, renderSlot as n, vShow as Q } from "vue";
-import { isBoolean as W } from "@vft/utils";
-import X from "../focus-trap/focus-trap.vue.js";
+import { defineComponent, ref, getCurrentInstance, provide, computed, createBlock, openBlock, unref, withCtx, createVNode, Transition, withDirectives, createElementVNode, normalizeStyle, normalizeClass, createCommentVNode, mergeProps, createSlots, renderSlot, vShow } from "vue";
+import { isBoolean } from "@vft/utils";
+import VftFocusTrap from "../focus-trap/focus-trap.vue.js";
 import "../focus-trap/utils.js";
-import { VftOverlay as Y } from "../overlay/index.js";
-import { UPDATE_MODEL_EVENT as Z } from "../../constants/event.js";
+import { VftOverlay } from "../overlay/index.js";
+import { UPDATE_MODEL_EVENT } from "../../constants/event.js";
 import "@vueuse/core";
 import "../config-provider/hooks/use-global-config.js";
 import "lodash-es";
-import { useNamespace as _ } from "../../hooks/use-namespace/index.js";
+import { useNamespace } from "../../hooks/use-namespace/index.js";
 import "../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
-import { useSameTarget as x } from "../../hooks/use-same-target/index.js";
+import { useSameTarget } from "../../hooks/use-same-target/index.js";
 import "../../hooks/use-z-index/index.js";
-import { VftTeleport as ee } from "../teleport/index.js";
-import { dialogInjectionKey as oe } from "./constants.js";
-import te from "./dialog-content.vue2.js";
-import { useDialog as le } from "./hooks/use-dialog.js";
-const ae = ["aria-label", "aria-labelledby", "aria-describedby"], se = B({
+import { VftTeleport } from "../teleport/index.js";
+import { dialogInjectionKey } from "./constants.js";
+import _sfc_main$1 from "./dialog-content.vue2.js";
+import { useDialog } from "./hooks/use-dialog.js";
+const _hoisted_1 = ["aria-label", "aria-labelledby", "aria-describedby"];
+const __default__ = defineComponent({
   name: "vft-dialog",
-  inheritAttrs: !1
-}), we = /* @__PURE__ */ B({
-  ...se,
+  inheritAttrs: false
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
   props: {
-    appendToBody: { type: Boolean, default: !1 },
+    appendToBody: { type: Boolean, default: false },
     beforeClose: {},
-    destroyOnClose: { type: Boolean, default: !1 },
-    closeOnClickModal: { type: Boolean, default: !0 },
-    closeOnPressEscape: { type: Boolean, default: !0 },
-    lockScroll: { type: Boolean, default: !0 },
-    modal: { type: Boolean, default: !0 },
+    destroyOnClose: { type: Boolean, default: false },
+    closeOnClickModal: { type: Boolean, default: true },
+    closeOnPressEscape: { type: Boolean, default: true },
+    lockScroll: { type: Boolean, default: true },
+    modal: { type: Boolean, default: true },
     openDelay: { default: 0 },
     closeDelay: { default: 0 },
     top: {},
-    modelValue: { type: Boolean, default: !1 },
+    modelValue: { type: Boolean, default: false },
     modalClass: {},
     width: {},
     zIndex: {},
-    trapFocus: { type: Boolean, default: !1 },
-    center: { type: Boolean, default: !1 },
-    alignCenter: { type: Boolean, default: !1 },
+    trapFocus: { type: Boolean, default: false },
+    center: { type: Boolean, default: false },
+    alignCenter: { type: Boolean, default: false },
     closeIcon: {},
     customClass: { default: "" },
-    draggable: { type: Boolean, default: !1 },
-    fullscreen: { type: Boolean, default: !1 },
-    showClose: { type: Boolean, default: !0 },
+    draggable: { type: Boolean, default: false },
+    fullscreen: { type: Boolean, default: false },
+    showClose: { type: Boolean, default: true },
     title: { default: "" }
   },
   emits: {
-    [Z]: (r) => W(r),
-    open: () => !0,
-    opened: () => !0,
-    close: () => !0,
-    closed: () => !0,
-    openAutoFocus: () => !0,
-    closeAutoFocus: () => !0
+    [UPDATE_MODEL_EVENT]: (value) => isBoolean(value),
+    open: () => true,
+    opened: () => true,
+    close: () => true,
+    closed: () => true,
+    openAutoFocus: () => true,
+    closeAutoFocus: () => true
   },
-  setup(r, { expose: k }) {
-    const d = _("dialog"), p = i(), A = i(), c = i(), F = z(), {
-      visible: u,
-      titleId: m,
-      bodyId: y,
-      style: w,
-      overlayDialogStyle: R,
-      rendered: v,
-      zIndex: E,
-      afterEnter: T,
-      afterLeave: h,
-      beforeLeave: I,
-      handleClose: g,
-      onModalClick: M,
-      onOpenAutoFocus: $,
-      onCloseAutoFocus: V,
-      onCloseRequested: D,
-      onFocusoutPrevented: L
-    } = le(F.props, p);
-    O(oe, {
-      dialogRef: p,
-      headerRef: A,
-      bodyId: y,
-      ns: d,
-      rendered: v,
-      style: w
+  setup(__props, { expose: __expose }) {
+    const ns = useNamespace("dialog");
+    const dialogRef = ref();
+    const headerRef = ref();
+    const dialogContentRef = ref();
+    const vm = getCurrentInstance();
+    const {
+      visible,
+      titleId,
+      bodyId,
+      style,
+      overlayDialogStyle,
+      rendered,
+      zIndex,
+      afterEnter,
+      afterLeave,
+      beforeLeave,
+      handleClose,
+      onModalClick,
+      onOpenAutoFocus,
+      onCloseAutoFocus,
+      onCloseRequested,
+      onFocusoutPrevented
+    } = useDialog(vm.props, dialogRef);
+    provide(dialogInjectionKey, {
+      dialogRef,
+      headerRef,
+      bodyId,
+      ns,
+      rendered,
+      style
+    });
+    const overlayEvent = useSameTarget(onModalClick);
+    const _draggable = computed(() => __props.draggable && !__props.fullscreen);
+    __expose({
+      visible,
+      dialogContentRef
     });
-    const l = x(M), S = P(() => r.draggable && !r.fullscreen);
-    return k({
-      visible: u,
-      dialogContentRef: c
-    }), (o, a) => (b(), C(e(ee), {
-      to: "body",
-      disabled: !o.appendToBody
-    }, {
-      default: t(() => [
-        f(N, {
-          name: "dialog-fade",
-          onAfterEnter: e(T),
-          onAfterLeave: e(h),
-          onBeforeLeave: e(I)
-        }, {
-          default: t(() => [
-            q(f(e(Y), {
-              "custom-mask-event": "",
-              mask: o.modal,
-              "overlay-class": o.modalClass,
-              "z-index": e(E)
-            }, {
-              default: t(() => [
-                j("div", {
-                  role: "dialog",
-                  "aria-modal": "true",
-                  "aria-label": o.title || void 0,
-                  "aria-labelledby": o.title ? void 0 : e(m),
-                  "aria-describedby": e(y),
-                  class: U(`${e(d).namespace.value}-overlay-dialog`),
-                  style: K(e(R)),
-                  onClick: a[0] || (a[0] = //@ts-ignore
-                  (...s) => e(l).onClick && e(l).onClick(...s)),
-                  onMousedown: a[1] || (a[1] = //@ts-ignore
-                  (...s) => e(l).onMousedown && e(l).onMousedown(...s)),
-                  onMouseup: a[2] || (a[2] = //@ts-ignore
-                  (...s) => e(l).onMouseup && e(l).onMouseup(...s))
-                }, [
-                  f(e(X), {
-                    loop: "",
-                    trapped: e(u),
-                    "focus-start-el": "container",
-                    onFocusAfterTrapped: e($),
-                    onFocusAfterReleased: e(V),
-                    onFocusoutPrevented: e(L),
-                    onReleaseRequested: e(D)
-                  }, {
-                    default: t(() => [
-                      e(v) ? (b(), C(te, H({
-                        key: 0,
-                        ref_key: "dialogContentRef",
-                        ref: c
-                      }, o.$attrs, {
-                        "custom-class": o.customClass,
-                        center: o.center,
-                        "align-center": o.alignCenter,
-                        "close-icon": o.closeIcon,
-                        draggable: S.value,
-                        fullscreen: o.fullscreen,
-                        "show-close": o.showClose,
-                        title: o.title,
-                        onClose: e(g)
-                      }), J({
-                        header: t(() => [
-                          o.$slots.title ? n(o.$slots, "title", { key: 1 }) : n(o.$slots, "header", {
-                            key: 0,
-                            close: e(g),
-                            titleId: e(m),
-                            titleClass: e(d).e("title")
-                          })
-                        ]),
-                        default: t(() => [
-                          n(o.$slots, "default")
-                        ]),
-                        _: 2
-                      }, [
-                        o.$slots.footer ? {
-                          name: "footer",
-                          fn: t(() => [
-                            n(o.$slots, "footer")
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(VftTeleport), {
+        to: "body",
+        disabled: !_ctx.appendToBody
+      }, {
+        default: withCtx(() => [
+          createVNode(Transition, {
+            name: "dialog-fade",
+            onAfterEnter: unref(afterEnter),
+            onAfterLeave: unref(afterLeave),
+            onBeforeLeave: unref(beforeLeave)
+          }, {
+            default: withCtx(() => [
+              withDirectives(createVNode(unref(VftOverlay), {
+                "custom-mask-event": "",
+                mask: _ctx.modal,
+                "overlay-class": _ctx.modalClass,
+                "z-index": unref(zIndex)
+              }, {
+                default: withCtx(() => [
+                  createElementVNode("div", {
+                    role: "dialog",
+                    "aria-modal": "true",
+                    "aria-label": _ctx.title || void 0,
+                    "aria-labelledby": !_ctx.title ? unref(titleId) : void 0,
+                    "aria-describedby": unref(bodyId),
+                    class: normalizeClass(`${unref(ns).namespace.value}-overlay-dialog`),
+                    style: normalizeStyle(unref(overlayDialogStyle)),
+                    onClick: _cache[0] || (_cache[0] = //@ts-ignore
+                    (...args) => unref(overlayEvent).onClick && unref(overlayEvent).onClick(...args)),
+                    onMousedown: _cache[1] || (_cache[1] = //@ts-ignore
+                    (...args) => unref(overlayEvent).onMousedown && unref(overlayEvent).onMousedown(...args)),
+                    onMouseup: _cache[2] || (_cache[2] = //@ts-ignore
+                    (...args) => unref(overlayEvent).onMouseup && unref(overlayEvent).onMouseup(...args))
+                  }, [
+                    createVNode(unref(VftFocusTrap), {
+                      loop: "",
+                      trapped: unref(visible),
+                      "focus-start-el": "container",
+                      onFocusAfterTrapped: unref(onOpenAutoFocus),
+                      onFocusAfterReleased: unref(onCloseAutoFocus),
+                      onFocusoutPrevented: unref(onFocusoutPrevented),
+                      onReleaseRequested: unref(onCloseRequested)
+                    }, {
+                      default: withCtx(() => [
+                        unref(rendered) ? (openBlock(), createBlock(_sfc_main$1, mergeProps({
+                          key: 0,
+                          ref_key: "dialogContentRef",
+                          ref: dialogContentRef
+                        }, _ctx.$attrs, {
+                          "custom-class": _ctx.customClass,
+                          center: _ctx.center,
+                          "align-center": _ctx.alignCenter,
+                          "close-icon": _ctx.closeIcon,
+                          draggable: _draggable.value,
+                          fullscreen: _ctx.fullscreen,
+                          "show-close": _ctx.showClose,
+                          title: _ctx.title,
+                          onClose: unref(handleClose)
+                        }), createSlots({
+                          header: withCtx(() => [
+                            !_ctx.$slots.title ? renderSlot(_ctx.$slots, "header", {
+                              key: 0,
+                              close: unref(handleClose),
+                              titleId: unref(titleId),
+                              titleClass: unref(ns).e("title")
+                            }) : renderSlot(_ctx.$slots, "title", { key: 1 })
+                          ]),
+                          default: withCtx(() => [
+                            renderSlot(_ctx.$slots, "default")
                           ]),
-                          key: "0"
-                        } : void 0
-                      ]), 1040, ["custom-class", "center", "align-center", "close-icon", "draggable", "fullscreen", "show-close", "title", "onClose"])) : G("", !0)
-                    ]),
-                    _: 3
-                  }, 8, ["trapped", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusoutPrevented", "onReleaseRequested"])
-                ], 46, ae)
-              ]),
-              _: 3
-            }, 8, ["mask", "overlay-class", "z-index"]), [
-              [Q, e(u)]
-            ])
-          ]),
-          _: 3
-        }, 8, ["onAfterEnter", "onAfterLeave", "onBeforeLeave"])
-      ]),
-      _: 3
-    }, 8, ["disabled"]));
+                          _: 2
+                        }, [
+                          _ctx.$slots.footer ? {
+                            name: "footer",
+                            fn: withCtx(() => [
+                              renderSlot(_ctx.$slots, "footer")
+                            ]),
+                            key: "0"
+                          } : void 0
+                        ]), 1040, ["custom-class", "center", "align-center", "close-icon", "draggable", "fullscreen", "show-close", "title", "onClose"])) : createCommentVNode("", true)
+                      ]),
+                      _: 3
+                    }, 8, ["trapped", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusoutPrevented", "onReleaseRequested"])
+                  ], 46, _hoisted_1)
+                ]),
+                _: 3
+              }, 8, ["mask", "overlay-class", "z-index"]), [
+                [vShow, unref(visible)]
+              ])
+            ]),
+            _: 3
+          }, 8, ["onAfterEnter", "onAfterLeave", "onBeforeLeave"])
+        ]),
+        _: 3
+      }, 8, ["disabled"]);
+    };
   }
 });
 export {
-  we as default
+  _sfc_main as default
 };

package/es/components/dialog/hooks/use-dialog.js

@@ -1,105 +1,186 @@
-import { useTimeoutFn as I, isClient as N } from "@vueuse/core";
+import { useTimeoutFn, isClient } from "@vueuse/core";
 import "@vft/utils";
-import { addUnit as S } from "../../../utils/helper.js";
-import { getCurrentInstance as U, ref as s, computed as T, watch as b, nextTick as Z, onMounted as _ } from "vue";
+import { addUnit } from "../../../utils/helper.js";
+import { getCurrentInstance, ref, computed, watch, nextTick, onMounted } from "vue";
 import "lodash-es";
 import "../../config-provider/index.js";
-import { UPDATE_MODEL_EVENT as q } from "../../../constants/event.js";
-import { useId as h } from "../../../hooks/use-id/index.js";
-import { useLockscreen as G } from "../../../hooks/use-lockscreen/index.js";
+import { UPDATE_MODEL_EVENT } from "../../../constants/event.js";
+import { useId } from "../../../hooks/use-id/index.js";
+import { useLockscreen } from "../../../hooks/use-lockscreen/index.js";
 import "../../../hooks/use-model-toggle/index.js";
-import { defaultNamespace as j } from "../../../hooks/use-namespace/index.js";
+import { defaultNamespace } from "../../../hooks/use-namespace/index.js";
 import "@popperjs/core";
-import { useZIndex as B } from "../../../hooks/use-z-index/index.js";
-import { useGlobalConfig as H } from "../../config-provider/hooks/use-global-config.js";
-const se = (e, l) => {
-  const n = U().emit, { nextZIndex: y } = B();
-  let C = "";
-  const E = h(), F = h(), t = s(!1), a = s(!1), i = s(!1), c = s(e.zIndex || y());
-  let f, r;
-  const O = H("namespace", j), k = T(() => {
-    const o = {}, u = `--${O.value}-dialog`;
-    return e.fullscreen || (e.top && (o[`${u}-margin-top`] = e.top), e.width && (o[`${u}-width`] = S(e.width))), o;
-  }), A = T(() => e.alignCenter ? { display: "flex" } : {});
-  function P() {
-    n("opened");
+import { useZIndex } from "../../../hooks/use-z-index/index.js";
+import { useGlobalConfig } from "../../config-provider/hooks/use-global-config.js";
+const useDialog = (props, targetRef) => {
+  const instance = getCurrentInstance();
+  const emit = instance.emit;
+  const { nextZIndex } = useZIndex();
+  let lastPosition = "";
+  const titleId = useId();
+  const bodyId = useId();
+  const visible = ref(false);
+  const closed = ref(false);
+  const rendered = ref(false);
+  const zIndex = ref(props.zIndex || nextZIndex());
+  let openTimer = void 0;
+  let closeTimer = void 0;
+  const namespace = useGlobalConfig("namespace", defaultNamespace);
+  const style = computed(() => {
+    const style2 = {};
+    const varPrefix = `--${namespace.value}-dialog`;
+    if (!props.fullscreen) {
+      if (props.top) {
+        style2[`${varPrefix}-margin-top`] = props.top;
+      }
+      if (props.width) {
+        style2[`${varPrefix}-width`] = addUnit(props.width);
+      }
+    }
+    return style2;
+  });
+  const overlayDialogStyle = computed(() => {
+    if (props.alignCenter) {
+      return { display: "flex" };
+    }
+    return {};
+  });
+  function afterEnter() {
+    emit("opened");
   }
-  function w() {
-    n("closed"), n(q, !1), e.destroyOnClose && (i.value = !1);
+  function afterLeave() {
+    emit("closed");
+    emit(UPDATE_MODEL_EVENT, false);
+    if (props.destroyOnClose) {
+      rendered.value = false;
+    }
   }
-  function L() {
-    n("close");
+  function beforeLeave() {
+    emit("close");
   }
-  function D() {
-    r?.(), f?.(), e.openDelay && e.openDelay > 0 ? { stop: f } = I(() => x(), e.openDelay) : x();
+  function open() {
+    closeTimer?.();
+    openTimer?.();
+    if (props.openDelay && props.openDelay > 0) {
+      ({ stop: openTimer } = useTimeoutFn(() => doOpen(), props.openDelay));
+    } else {
+      doOpen();
+    }
   }
-  function d() {
-    f?.(), r?.(), e.closeDelay && e.closeDelay > 0 ? { stop: r } = I(() => v(), e.closeDelay) : v();
+  function close() {
+    openTimer?.();
+    closeTimer?.();
+    if (props.closeDelay && props.closeDelay > 0) {
+      ({ stop: closeTimer } = useTimeoutFn(() => doClose(), props.closeDelay));
+    } else {
+      doClose();
+    }
   }
-  function m() {
-    function o(u) {
-      u || (a.value = !0, t.value = !1);
+  function handleClose() {
+    function hide(shouldCancel) {
+      if (shouldCancel) return;
+      closed.value = true;
+      visible.value = false;
+    }
+    if (props.beforeClose) {
+      props.beforeClose(hide);
+    } else {
+      close();
     }
-    e.beforeClose ? e.beforeClose(o) : d();
   }
-  function M() {
-    e.closeOnClickModal && m();
+  function onModalClick() {
+    if (props.closeOnClickModal) {
+      handleClose();
+    }
   }
-  function x() {
-    N && (t.value = !0);
+  function doOpen() {
+    if (!isClient) return;
+    visible.value = true;
   }
-  function v() {
-    t.value = !1;
+  function doClose() {
+    visible.value = false;
   }
-  function z() {
-    n("openAutoFocus");
+  function onOpenAutoFocus() {
+    emit("openAutoFocus");
   }
-  function V() {
-    n("closeAutoFocus");
+  function onCloseAutoFocus() {
+    emit("closeAutoFocus");
   }
-  function $(o) {
-    o.detail?.focusReason === "pointer" && o.preventDefault();
+  function onFocusoutPrevented(event) {
+    if (event.detail?.focusReason === "pointer") {
+      event.preventDefault();
+    }
   }
-  e.lockScroll && G(t);
-  function g() {
-    e.closeOnPressEscape && m();
+  if (props.lockScroll) {
+    useLockscreen(visible);
   }
-  return b(
-    () => e.modelValue,
-    (o) => {
-      o ? (a.value = !1, D(), i.value = !0, c.value = e.zIndex ? c.value++ : y(), Z(() => {
-        n("open"), l.value && (l.value.scrollTop = 0);
-      })) : t.value && d();
+  function onCloseRequested() {
+    if (props.closeOnPressEscape) {
+      handleClose();
+    }
+  }
+  watch(
+    () => props.modelValue,
+    (val) => {
+      if (val) {
+        closed.value = false;
+        open();
+        rendered.value = true;
+        zIndex.value = props.zIndex ? zIndex.value++ : nextZIndex();
+        nextTick(() => {
+          emit("open");
+          if (targetRef.value) {
+            targetRef.value.scrollTop = 0;
+          }
+        });
+      } else {
+        if (visible.value) {
+          close();
+        }
+      }
+    }
+  );
+  watch(
+    () => props.fullscreen,
+    (val) => {
+      if (!targetRef.value) return;
+      if (val) {
+        lastPosition = targetRef.value.style.transform;
+        targetRef.value.style.transform = "";
+      } else {
+        targetRef.value.style.transform = lastPosition;
+      }
     }
-  ), b(
-    () => e.fullscreen,
-    (o) => {
-      l.value && (o ? (C = l.value.style.transform, l.value.style.transform = "") : l.value.style.transform = C);
+  );
+  onMounted(() => {
+    if (props.modelValue) {
+      visible.value = true;
+      rendered.value = true;
+      open();
     }
-  ), _(() => {
-    e.modelValue && (t.value = !0, i.value = !0, D());
-  }), {
-    afterEnter: P,
-    afterLeave: w,
-    beforeLeave: L,
-    handleClose: m,
-    onModalClick: M,
-    close: d,
-    doClose: v,
-    onOpenAutoFocus: z,
-    onCloseAutoFocus: V,
-    onCloseRequested: g,
-    onFocusoutPrevented: $,
-    titleId: E,
-    bodyId: F,
-    closed: a,
-    style: k,
-    overlayDialogStyle: A,
-    rendered: i,
-    visible: t,
-    zIndex: c
+  });
+  return {
+    afterEnter,
+    afterLeave,
+    beforeLeave,
+    handleClose,
+    onModalClick,
+    close,
+    doClose,
+    onOpenAutoFocus,
+    onCloseAutoFocus,
+    onCloseRequested,
+    onFocusoutPrevented,
+    titleId,
+    bodyId,
+    closed,
+    style,
+    overlayDialogStyle,
+    rendered,
+    visible,
+    zIndex
   };
 };
 export {
-  se as useDialog
+  useDialog
 };

package/es/components/dialog/index.js

@@ -2,15 +2,15 @@ import "@vueuse/core";
 import "@vft/utils";
 import "../config-provider/hooks/use-global-config.js";
 import "vue";
-import { withInstall as o } from "../../utils/vue/install.js";
+import { withInstall } from "../../utils/vue/install.js";
 import "lodash-es";
-import t from "./dialog.vue2.js";
-import { dialogInjectionKey as c } from "./constants.js";
-import { useDialog as x } from "./hooks/use-dialog.js";
-const l = o(t);
+import _sfc_main from "./dialog.vue2.js";
+import { dialogInjectionKey } from "./constants.js";
+import { useDialog } from "./hooks/use-dialog.js";
+const VftDialog = withInstall(_sfc_main);
 export {
-  l as VftDialog,
-  l as default,
-  c as dialogInjectionKey,
-  x as useDialog
+  VftDialog,
+  VftDialog as default,
+  dialogInjectionKey,
+  useDialog
 };