vft 0.0.415 → 0.0.417

package/es/components/dialog/index.js

@@ -6,12 +6,13 @@ import { withInstall as o } from "../../utils/vue/install.js";
 import "lodash-es";
 import "../form/index.js";
 import t from "./dialog.vue2.js";
-import { dialogInjectionKey as g } from "./constants.js";
-import { useDialog as d } from "./hooks/use-dialog.js";
+import { DEFAULT_DIALOG_TRANSITION as D, dialogInjectionKey as _ } from "./constants.js";
+import { useDialog as g } from "./use-dialog.js";
 const n = o(t);
 export {
+  D as DEFAULT_DIALOG_TRANSITION,
   n as VftDialog,
   n as default,
-  g as dialogInjectionKey,
-  d as useDialog
+  _ as dialogInjectionKey,
+  g as useDialog
 };

package/es/components/dialog/types.d.ts

@@ -1,11 +1,80 @@
 import type { IconProps } from 'vft/es/components/icon';
+import type { TransitionProps } from 'vue';
+type DoneFn = (cancel?: boolean) => void;
+export interface DialogProps extends DialogContentProps {
+    /** 是否将对话框挂载到 body 元素上 */
+    appendToBody?: boolean;
+    /** 指定对话框挂载的容器元素 */
+    appendTo?: string | HTMLElement;
+    /** 关闭前的回调，会暂停对话框的关闭 */
+    beforeClose?: (done: DoneFn) => void;
+    /** 关闭时销毁对话框内的元素 */
+    destroyOnClose?: boolean;
+    /** 是否可以通过点击遮罩层关闭对话框 */
+    closeOnClickModal?: boolean;
+    /** 是否可以通过按下 ESC 键关闭对话框 */
+    closeOnPressEscape?: boolean;
+    /** 是否锁定页面滚动 */
+    lockScroll?: boolean;
+    /** 是否显示遮罩层 */
+    modal?: boolean;
+    /** 对话框打开的延时时间（毫秒） */
+    openDelay?: number;
+    /** 对话框关闭的延时时间（毫秒） */
+    closeDelay?: number;
+    /** 对话框距离顶部的距离 */
+    top?: string;
+    /** 遮罩层是否可穿透 */
+    modalPenetrable?: boolean;
+    /** 对话框是否可见 */
+    modelValue?: boolean;
+    /** 遮罩层的自定义类名 */
+    modalClass?: string;
+    /** 对话框的宽度 */
+    width?: string | number;
+    /** 对话框的层级 */
+    zIndex?: number;
+    /** 是否启用焦点陷阱 */
+    trapFocus?: boolean;
+    /** 是否允许对话框内容溢出 */
+    overflow?: boolean;
+    /** 对话框的过渡动画 */
+    transition?: string | TransitionProps;
+}
 export interface DialogContentProps {
+    /** 是否居中显示对话框 */
     center?: boolean;
+    /** 是否垂直居中显示对话框 */
     alignCenter?: boolean;
+    /** 关闭按钮的图标 */
     closeIcon?: string | IconProps;
+    /** 对话框的自定义类名 */
     customClass?: string;
+    /** 是否可拖拽对话框 */
     draggable?: boolean;
+    /** 是否全屏显示对话框 */
     fullscreen?: boolean;
+    /** 是否显示关闭按钮 */
     showClose?: boolean;
+    /** 对话框标题 */
     title?: string;
+    /** 是否允许对话框内容溢出 */
+    overflow?: boolean;
+    /** 对话框头部内容的自定义类名 */
+    headerClass?: string;
+    /** 对话框主体内容的自定义类名 */
+    bodyClass?: string;
+    /** 对话框底部内容的自定义类名 */
+    footerClass?: string;
+}
+export interface DialogConfigContext {
+    /** 是否垂直居中显示对话框 */
+    alignCenter?: boolean;
+    /** 是否可拖拽对话框 */
+    draggable?: boolean;
+    /** 是否允许对话框内容溢出 */
+    overflow?: boolean;
+    /** 对话框的过渡动画 */
+    transition?: string | TransitionProps;
 }
+export {};

package/es/components/dialog/{hooks/use-dialog.d.ts → use-dialog.d.ts}

@@ -1,5 +1,5 @@
-import type { CSSProperties, Ref } from 'vue';
-import type { DialogProps } from '../dialog.vue';
+import type { CSSProperties, Ref, TransitionProps } from 'vue';
+import type { DialogProps } from './types';
 export declare const useDialog: (props: DialogProps, targetRef: Ref<HTMLElement | undefined>) => {
     afterEnter: () => void;
     afterLeave: () => void;
@@ -20,4 +20,13 @@ export declare const useDialog: (props: DialogProps, targetRef: Ref<HTMLElement
     rendered: Ref<boolean, boolean>;
     visible: Ref<boolean, boolean>;
     zIndex: Ref<number, number>;
+    transitionConfig: import("vue").ComputedRef<TransitionProps | {
+        name: string | TransitionProps;
+        onAfterEnter: () => void;
+        onBeforeLeave: () => void;
+        onAfterLeave: () => void;
+    }>;
+    _draggable: import("vue").ComputedRef<boolean>;
+    _alignCenter: import("vue").ComputedRef<boolean>;
+    _overflow: import("vue").ComputedRef<boolean>;
 };

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

@@ -0,0 +1,138 @@
+import { DEFAULT_DIALOG_TRANSITION as P } from "./constants.js";
+import "../config-provider/index.js";
+import { UPDATE_MODEL_EVENT as Y } from "../../constants/event.js";
+import { useTimeoutFn as M, isClient as H } from "@vueuse/core";
+import { isObject as R, isArray as p, isFunction as N } from "@vft/utils";
+import { addUnit as ee } from "../../utils/helper.js";
+import { getCurrentInstance as ne, ref as r, computed as l, watch as x, nextTick as oe, onMounted as te } from "vue";
+import "lodash-es";
+import "../form/index.js";
+import { useId as k } from "../../hooks/use-id/index.js";
+import { useLockscreen as le } from "../../hooks/use-lockscreen/index.js";
+import "../../hooks/use-model-toggle/index.js";
+import { defaultNamespace as ie } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import { useZIndex as ae } from "../../hooks/use-z-index/index.js";
+import { useGlobalConfig as fe } from "../config-provider/hooks/use-global-config.js";
+const Te = (e, t) => {
+  const i = ne().emit, { nextZIndex: m } = ae();
+  let T = "";
+  const B = k(), S = k(), a = r(!1), v = r(!1), c = r(!1), d = r(e.zIndex ?? m());
+  let C, g;
+  const O = fe(), U = l(() => O.value?.namespace ?? ie), s = l(() => O.value?.dialog), V = l(() => {
+    const n = {}, f = `--${U.value}-dialog`;
+    return e.fullscreen || (e.top && (n[`${f}-margin-top`] = e.top), e.width && (n[`${f}-width`] = ee(e.width))), n;
+  }), $ = l(
+    () => (e.draggable ?? s.value?.draggable ?? !1) && !e.fullscreen
+  ), F = l(
+    () => e.alignCenter ?? s.value?.alignCenter ?? !1
+  ), G = l(
+    () => e.overflow ?? s.value?.overflow ?? !1
+  ), Z = l(() => F.value ? { display: "flex" } : {}), j = l(() => {
+    const n = e.transition ?? s.value?.transition ?? P, f = {
+      name: n,
+      onAfterEnter: y,
+      onBeforeLeave: I,
+      onAfterLeave: A
+    };
+    if (R(n)) {
+      const o = { ...n }, b = (u, X) => (w) => {
+        p(u) ? u.forEach((z) => {
+          N(z) && z(w);
+        }) : N(u) && u(w), X();
+      };
+      return o.onAfterEnter = b(o.onAfterEnter, y), o.onBeforeLeave = b(o.onBeforeLeave, I), o.onAfterLeave = b(o.onAfterLeave, A), o.name || (o.name = P), o;
+    }
+    return f;
+  });
+  function y() {
+    i("opened");
+  }
+  function A() {
+    i("closed"), i(Y, !1), e.destroyOnClose && (c.value = !1);
+  }
+  function I() {
+    i("close");
+  }
+  function _() {
+    g?.(), C?.(), e.openDelay && e.openDelay > 0 ? { stop: C } = M(() => h(), e.openDelay) : h();
+  }
+  function D() {
+    C?.(), g?.(), e.closeDelay && e.closeDelay > 0 ? { stop: g } = M(() => L(), e.closeDelay) : L();
+  }
+  function E() {
+    function n(f) {
+      f || (v.value = !0, a.value = !1);
+    }
+    console.log(111), e.beforeClose ? e.beforeClose(n) : D();
+  }
+  function q() {
+    e.closeOnClickModal && E();
+  }
+  function h() {
+    H && (a.value = !0);
+  }
+  function L() {
+    a.value = !1;
+  }
+  function J() {
+    i("openAutoFocus");
+  }
+  function K() {
+    i("closeAutoFocus");
+  }
+  function Q(n) {
+    n.detail?.focusReason === "pointer" && n.preventDefault();
+  }
+  e.lockScroll && le(a);
+  function W() {
+    e.closeOnPressEscape && E();
+  }
+  return x(
+    () => e.zIndex,
+    () => {
+      d.value = e.zIndex ?? m();
+    }
+  ), x(
+    () => e.modelValue,
+    (n) => {
+      n ? (v.value = !1, _(), c.value = !0, d.value = e.zIndex ?? m(), oe(() => {
+        i("open"), t.value && (t.value.parentElement.scrollTop = 0, t.value.parentElement.scrollLeft = 0, t.value.scrollTop = 0);
+      })) : a.value && D();
+    }
+  ), x(
+    () => e.fullscreen,
+    (n) => {
+      t.value && (n ? (T = t.value.style.transform, t.value.style.transform = "") : t.value.style.transform = T);
+    }
+  ), te(() => {
+    e.modelValue && (a.value = !0, c.value = !0, _());
+  }), {
+    afterEnter: y,
+    afterLeave: A,
+    beforeLeave: I,
+    handleClose: E,
+    onModalClick: q,
+    close: D,
+    doClose: L,
+    onOpenAutoFocus: J,
+    onCloseAutoFocus: K,
+    onCloseRequested: W,
+    onFocusoutPrevented: Q,
+    titleId: B,
+    bodyId: S,
+    closed: v,
+    style: V,
+    overlayDialogStyle: Z,
+    rendered: c,
+    visible: a,
+    zIndex: d,
+    transitionConfig: j,
+    _draggable: $,
+    _alignCenter: F,
+    _overflow: G
+  };
+};
+export {
+  Te as useDialog
+};

package/es/components/drawer/composables/useResizable.d.ts

@@ -0,0 +1,7 @@
+import type { DrawerProps } from '../types';
+import type { Ref } from 'vue';
+export declare function useResizable(props: DrawerProps, target: Ref<HTMLElement | undefined>): {
+    size: import("vue").ComputedRef<string>;
+    isResizing: Ref<boolean, boolean>;
+    isHorizontal: import("vue").ComputedRef<boolean>;
+};

package/es/components/drawer/composables/useResizable.js

@@ -0,0 +1,53 @@
+import { computed as o, ref as i, watch as x, onBeforeUnmount as H } from "vue";
+import { useWindowSize as R, clamp as W, useEventListener as f } from "@vueuse/core";
+import "@vft/utils";
+import { addUnit as A } from "../../../utils/helper.js";
+import "lodash-es";
+import "../../form/index.js";
+function k(t, d) {
+  const { width: z, height: g } = R(), s = o(
+    () => ["ltr", "rtl"].includes(t.direction)
+  ), w = o(
+    () => ["ltr", "ttb"].includes(t.direction) ? 1 : -1
+  ), h = o(
+    () => s.value ? z.value : g.value
+  ), m = o(() => W(
+    u.value + w.value * a.value,
+    4,
+    h.value
+  )), u = i(0), a = i(0), r = i(!1), n = i(!1);
+  let l = [], c = [];
+  const p = () => {
+    const e = d.value?.closest(
+      '[aria-modal="true"]'
+    );
+    return e ? s.value ? e.offsetWidth : e.offsetHeight : 100;
+  };
+  x(
+    () => [t.size, t.resizable],
+    () => {
+      n.value = !1, u.value = 0, a.value = 0, v();
+    }
+  );
+  const S = (e) => {
+    t.resizable && (n.value || (u.value = p(), n.value = !0), l = [e.pageX, e.pageY], r.value = !0, c.push(
+      f(window, "mouseup", v),
+      f(window, "mousemove", b)
+    ));
+  }, b = (e) => {
+    const { pageX: E, pageY: U } = e, X = E - l[0], Y = U - l[1];
+    a.value = s.value ? X : Y;
+  }, v = () => {
+    l = [], u.value = m.value, a.value = 0, r.value = !1, c.forEach((e) => e?.()), c = [];
+  }, M = f(d, "mousedown", S);
+  return H(() => {
+    M(), v();
+  }), {
+    size: o(() => n.value ? `${m.value}px` : A(t.size)),
+    isResizing: r,
+    isHorizontal: s
+  };
+}
+export {
+  k as useResizable
+};

package/es/components/drawer/drawer.vue.d.ts

@@ -1,10 +1,4 @@
-import { type DialogProps } from 'vft/es/components/dialog';
-export interface DrawerProps extends DialogProps {
-    direction?: 'ltr' | 'rtl' | 'ttb' | 'btt';
-    size?: string | number;
-    withHeader?: boolean;
-    modalFade?: boolean;
-}
+import type { DrawerProps } from './types';
 declare function __VLS_template(): {
     header?(_: {
         close: () => void;
@@ -17,6 +11,8 @@ declare function __VLS_template(): {
 };
 declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<DrawerProps>>, {
     close: () => void;
+    afterEnter: () => void;
+    afterLeave: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => void;
     close: () => void;

package/es/components/drawer/drawer.vue2.js

@@ -1,31 +1,35 @@
-import { defineComponent as A, getCurrentInstance as O, ref as k, computed as m, createBlock as h, openBlock as a, unref as e, withCtx as n, createVNode as y, Transition as N, withDirectives as M, createElementVNode as w, mergeProps as g, withModifiers as P, createElementBlock as d, createCommentVNode as s, normalizeClass as r, renderSlot as i, toDisplayString as q, vShow as H } from "vue";
-import { isBoolean as U, singleAttrToObj as j } from "@vft/utils";
+import { defineComponent as F, getCurrentInstance as q, ref as m, computed as H, createBlock as A, openBlock as l, unref as e, withCtx as r, createVNode as y, Transition as j, withDirectives as U, createElementVNode as b, mergeProps as R, withModifiers as _, createElementBlock as n, createCommentVNode as s, normalizeClass as a, renderSlot as d, toDisplayString as G, normalizeStyle as J, vShow as K } from "vue";
 import "../dialog/index.js";
-import G from "../focus-trap/focus-trap.vue.js";
+import Q from "../focus-trap/focus-trap.vue.js";
 import "../focus-trap/utils.js";
-import { VftIcon as J } from "../icon/index.js";
-import { VftOverlay as K } from "../overlay/index.js";
-import { UPDATE_MODEL_EVENT as Q } from "../../constants/event.js";
+import { VftIcon as W } from "../icon/index.js";
+import { VftOverlay as X } from "../overlay/index.js";
+import { VftTeleport as Y } from "../teleport/index.js";
+import { UPDATE_MODEL_EVENT as Z } from "../../constants/event.js";
 import "@vueuse/core";
-import { addUnit as W } from "../../utils/helper.js";
+import { isBoolean as x, singleAttrToObj as ee } from "@vft/utils";
+import "../config-provider/hooks/use-global-config.js";
 import "lodash-es";
 import "../form/index.js";
-import { useNamespace as X } from "../../hooks/use-namespace/index.js";
+import { useNamespace as oe } from "../../hooks/use-namespace/index.js";
 import "../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../hooks/use-z-index/index.js";
-import { VftTeleport as Y } from "../teleport/index.js";
-import { useDialog as Z } from "../dialog/hooks/use-dialog.js";
-const _ = ["aria-label", "aria-labelledby", "aria-describedby"], x = ["id"], ee = ["id"], oe = A({
-  name: "vft-drawer"
-}), Re = /* @__PURE__ */ A({
-  ...oe,
+import { useResizable as te } from "./composables/useResizable.js";
+import { useDialog as le } from "../dialog/use-dialog.js";
+const ae = ["aria-label", "aria-labelledby", "aria-describedby"], se = ["id"], re = ["id"], ne = F({
+  name: "vft-drawer",
+  inheritAttrs: !1
+}), Fe = /* @__PURE__ */ F({
+  ...ne,
   props: {
     direction: { default: "rtl" },
     size: { default: "30%" },
     withHeader: { type: Boolean, default: !0 },
     modalFade: { type: Boolean, default: !0 },
+    resizable: { type: Boolean, default: !1 },
     appendToBody: { type: Boolean, default: !1 },
+    appendTo: { default: "body" },
     beforeClose: {},
     destroyOnClose: { type: Boolean, default: !1 },
     closeOnClickModal: { type: Boolean, default: !0 },
@@ -35,11 +39,14 @@ const _ = ["aria-label", "aria-labelledby", "aria-describedby"], x = ["id"], ee
     openDelay: { default: 0 },
     closeDelay: { default: 0 },
     top: {},
+    modalPenetrable: { type: Boolean },
     modelValue: { type: Boolean, default: !1 },
     modalClass: {},
     width: {},
     zIndex: {},
     trapFocus: { type: Boolean, default: !1 },
+    overflow: { type: Boolean },
+    transition: {},
     center: { type: Boolean, default: !1 },
     alignCenter: { type: Boolean, default: !1 },
     closeIcon: {},
@@ -47,10 +54,13 @@ const _ = ["aria-label", "aria-labelledby", "aria-describedby"], x = ["id"], ee
     draggable: { type: Boolean, default: !1 },
     fullscreen: { type: Boolean, default: !1 },
     showClose: { type: Boolean, default: !0 },
-    title: { default: "" }
+    title: { default: "" },
+    headerClass: {},
+    bodyClass: {},
+    footerClass: {}
   },
   emits: {
-    [Q]: (l) => U(l),
+    [Z]: (i) => x(i),
     open: () => !0,
     opened: () => !0,
     close: () => !0,
@@ -58,134 +68,149 @@ const _ = ["aria-label", "aria-labelledby", "aria-describedby"], x = ["id"], ee
     openAutoFocus: () => !0,
     closeAutoFocus: () => !0
   },
-  setup(l, { expose: E }) {
-    const t = X("drawer"), I = O(), u = k(), {
-      afterEnter: z,
-      afterLeave: R,
-      beforeLeave: V,
-      handleClose: f,
-      onModalClick: D,
-      close: te,
-      doClose: le,
-      onOpenAutoFocus: ae,
-      onCloseAutoFocus: se,
-      onCloseRequested: F,
-      onFocusoutPrevented: re,
-      titleId: c,
-      bodyId: v,
-      closed: ne,
-      style: de,
-      overlayDialogStyle: ie,
-      rendered: S,
-      visible: p,
-      zIndex: T
-    } = Z(I.props, u), C = k(), $ = m(() => l.direction === "rtl" || l.direction === "ltr"), b = m(() => W(l.size)), L = m(() => j(l.closeIcon, "icon", {
+  setup(i, { expose: T }) {
+    const C = q(), f = m(), v = m(), B = m(), t = oe("drawer"), {
+      afterEnter: k,
+      afterLeave: h,
+      beforeLeave: I,
+      visible: u,
+      rendered: E,
+      titleId: p,
+      bodyId: g,
+      zIndex: w,
+      onModalClick: V,
+      onOpenAutoFocus: D,
+      onCloseAutoFocus: L,
+      onFocusoutPrevented: O,
+      onCloseRequested: P,
+      handleClose: c
+    } = le(C.props, f), {
+      isHorizontal: S,
+      size: $,
+      isResizing: N
+    } = te(C.props, B), M = H(() => ee(i.closeIcon, "icon", {
       icon: "icon-close",
       pointer: !0
     }));
-    return E({
-      close: f
-    }), (o, B) => (a(), h(e(Y), {
-      to: "body",
-      disabled: !o.appendToBody
+    return T({
+      close: c,
+      afterEnter: k,
+      afterLeave: h
+    }), (o, z) => (l(), A(e(Y), {
+      to: o.appendTo,
+      disabled: o.appendTo !== "body" ? !1 : !o.appendToBody
     }, {
-      default: n(() => [
-        y(N, {
+      default: r(() => [
+        y(j, {
           name: e(t).b("fade"),
-          onAfterEnter: e(z),
-          onAfterLeave: e(R),
-          onBeforeLeave: e(V)
+          onAfterEnter: e(k),
+          onAfterLeave: e(h),
+          onBeforeLeave: e(I)
         }, {
-          default: n(() => [
-            M(y(e(K), {
+          default: r(() => [
+            U(y(e(X), {
               mask: o.modal,
-              "overlay-class": o.modalClass,
-              "z-index": e(T),
-              onClick: e(D)
+              "overlay-class": [e(t).is("drawer"), o.modalClass ?? ""],
+              "z-index": e(w),
+              onClick: e(V)
             }, {
-              default: n(() => [
-                y(e(G), {
+              default: r(() => [
+                y(e(Q), {
                   loop: "",
-                  trapped: e(p),
-                  "focus-trap-el": u.value,
-                  "focus-start-el": C.value,
-                  onReleaseRequested: e(F)
+                  trapped: e(u),
+                  "focus-trap-el": f.value,
+                  "focus-start-el": v.value,
+                  onFocusAfterTrapped: e(D),
+                  onFocusAfterReleased: e(L),
+                  onFocusoutPrevented: e(O),
+                  onReleaseRequested: e(P)
                 }, {
-                  default: n(() => [
-                    w("div", g({
+                  default: r(() => [
+                    b("div", R({
                       ref_key: "drawerRef",
-                      ref: u,
+                      ref: f,
                       "aria-modal": "true",
                       "aria-label": o.title || void 0,
-                      "aria-labelledby": o.title ? void 0 : e(c),
-                      "aria-describedby": e(v)
+                      "aria-labelledby": o.title ? void 0 : e(p),
+                      "aria-describedby": e(g)
                     }, o.$attrs, {
-                      class: [e(t).b(), o.direction, e(p) && "open", o.customClass],
-                      style: $.value ? "width: " + b.value : "height: " + b.value,
+                      class: [
+                        e(t).b(),
+                        o.direction,
+                        e(u) && "open",
+                        e(t).is("dragging", e(N))
+                      ],
+                      style: { [e(S) ? "width" : "height"]: e($) },
                       role: "dialog",
-                      onClick: B[0] || (B[0] = P(() => {
+                      onClick: z[0] || (z[0] = _(() => {
                       }, ["stop"]))
                     }), [
-                      w("span", {
+                      b("span", {
                         ref_key: "focusStartRef",
-                        ref: C,
-                        class: r(e(t).e("sr-focus")),
+                        ref: v,
+                        class: a(e(t).e("sr-focus")),
                         tabindex: "-1"
                       }, null, 2),
-                      o.withHeader ? (a(), d("header", {
+                      o.withHeader ? (l(), n("header", {
                         key: 0,
-                        class: r(e(t).e("header"))
+                        class: a([e(t).e("header"), o.headerClass])
                       }, [
-                        o.$slots.title ? i(o.$slots, "title", { key: 1 }) : i(o.$slots, "header", {
+                        o.$slots.title ? d(o.$slots, "title", { key: 1 }) : d(o.$slots, "header", {
                           key: 0,
-                          close: e(f),
-                          titleId: e(c),
+                          close: e(c),
+                          titleId: e(p),
                           titleClass: e(t).e("title")
                         }, () => [
-                          o.$slots.title ? s("", !0) : (a(), d("span", {
-                            key: 0,
-                            id: e(c),
+                          b("span", {
+                            id: e(p),
                             role: "heading",
-                            class: r(e(t).e("title"))
-                          }, q(o.title), 11, x))
+                            class: a(e(t).e("title"))
+                          }, G(o.title), 11, se)
                         ]),
-                        o.showClose ? (a(), h(e(J), g({
+                        o.showClose ? (l(), A(e(W), R({
                           key: 2,
-                          onClick: e(f)
-                        }, L.value, {
+                          onClick: e(c)
+                        }, M.value, {
                           class: e(t).e("close")
                         }), null, 16, ["onClick", "class"])) : s("", !0)
                       ], 2)) : s("", !0),
-                      e(S) ? (a(), d("div", {
+                      e(E) ? (l(), n("div", {
                         key: 1,
-                        id: e(v),
-                        class: r(e(t).e("body"))
+                        id: e(g),
+                        class: a([e(t).e("body"), o.bodyClass])
                       }, [
-                        i(o.$slots, "default")
-                      ], 10, ee)) : s("", !0),
-                      o.$slots.footer ? (a(), d("div", {
+                        d(o.$slots, "default")
+                      ], 10, re)) : s("", !0),
+                      o.$slots.footer ? (l(), n("div", {
                         key: 2,
-                        class: r(e(t).e("footer"))
+                        class: a([e(t).e("footer"), o.footerClass])
                       }, [
-                        i(o.$slots, "footer")
-                      ], 2)) : s("", !0)
-                    ], 16, _)
+                        d(o.$slots, "footer")
+                      ], 2)) : s("", !0),
+                      o.resizable ? (l(), n("div", {
+                        key: 3,
+                        ref_key: "draggerRef",
+                        ref: B,
+                        style: J({ zIndex: e(w) }),
+                        class: a(e(t).e("dragger"))
+                      }, null, 6)) : s("", !0)
+                    ], 16, ae)
                   ]),
                   _: 3
-                }, 8, ["trapped", "focus-trap-el", "focus-start-el", "onReleaseRequested"])
+                }, 8, ["trapped", "focus-trap-el", "focus-start-el", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusoutPrevented", "onReleaseRequested"])
               ]),
               _: 3
             }, 8, ["mask", "overlay-class", "z-index", "onClick"]), [
-              [H, e(p)]
+              [K, e(u)]
             ])
           ]),
           _: 3
         }, 8, ["name", "onAfterEnter", "onAfterLeave", "onBeforeLeave"])
       ]),
       _: 3
-    }, 8, ["disabled"]));
+    }, 8, ["to", "disabled"]));
   }
 });
 export {
-  Re as default
+  Fe as default
 };