vft 0.0.48 → 0.0.51

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

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

package/es/components/dialog/hooks/use-dialog.d.ts

@@ -0,0 +1,23 @@
+import type { CSSProperties, Ref } from 'vue';
+import type { DialogProps } from '../dialog.vue';
+export declare const useDialog: (props: DialogProps, targetRef: Ref<HTMLElement | undefined>) => {
+    afterEnter: () => void;
+    afterLeave: () => void;
+    beforeLeave: () => void;
+    handleClose: () => void;
+    onModalClick: () => void;
+    close: () => void;
+    doClose: () => void;
+    onOpenAutoFocus: () => void;
+    onCloseAutoFocus: () => void;
+    onCloseRequested: () => void;
+    onFocusoutPrevented: (event: CustomEvent) => void;
+    titleId: Ref<string>;
+    bodyId: Ref<string>;
+    closed: Ref<boolean>;
+    style: import("vue").ComputedRef<CSSProperties>;
+    overlayDialogStyle: import("vue").ComputedRef<CSSProperties>;
+    rendered: Ref<boolean>;
+    visible: Ref<boolean>;
+    zIndex: Ref<number>;
+};

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

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

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

@@ -0,0 +1,146 @@
+export * from './hooks/use-dialog';
+export * from './types';
+export * from './constants';
+export declare const WflyDialog: import("vft/es/utils").SFCWithInstall<import("vue").DefineComponent<{
+    appendToBody: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    beforeClose: {
+        type: import("vue").PropType<((done: (cancel?: boolean | undefined) => void) => void) | undefined>;
+        required: false;
+    };
+    destroyOnClose: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    closeOnClickModal: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    closeOnPressEscape: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    lockScroll: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    modal: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    openDelay: {
+        type: import("vue").PropType<number | undefined>;
+        required: false;
+    };
+    closeDelay: {
+        type: import("vue").PropType<number | undefined>;
+        required: false;
+    };
+    top: {
+        type: import("vue").PropType<string | undefined>;
+        required: false;
+    };
+    modelValue: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    modalClass: {
+        type: import("vue").PropType<string | undefined>;
+        required: false;
+    };
+    width: {
+        type: import("vue").PropType<string | number | undefined>;
+        required: false;
+    };
+    zIndex: {
+        type: import("vue").PropType<number | undefined>;
+        required: false;
+    };
+    trapFocus: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+}, {
+    visible: import("vue").Ref<boolean>;
+    dialogContentRef: import("vue").Ref<any>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => boolean;
+    open: () => boolean;
+    opened: () => boolean;
+    close: () => boolean;
+    closed: () => boolean;
+    openAutoFocus: () => boolean;
+    closeAutoFocus: () => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    appendToBody: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    beforeClose: {
+        type: import("vue").PropType<((done: (cancel?: boolean | undefined) => void) => void) | undefined>;
+        required: false;
+    };
+    destroyOnClose: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    closeOnClickModal: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    closeOnPressEscape: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    lockScroll: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    modal: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    openDelay: {
+        type: import("vue").PropType<number | undefined>;
+        required: false;
+    };
+    closeDelay: {
+        type: import("vue").PropType<number | undefined>;
+        required: false;
+    };
+    top: {
+        type: import("vue").PropType<string | undefined>;
+        required: false;
+    };
+    modelValue: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    modalClass: {
+        type: import("vue").PropType<string | undefined>;
+        required: false;
+    };
+    width: {
+        type: import("vue").PropType<string | number | undefined>;
+        required: false;
+    };
+    zIndex: {
+        type: import("vue").PropType<number | undefined>;
+        required: false;
+    };
+    trapFocus: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+}>> & {
+    onClose?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    onOpened?: (() => any) | undefined;
+    onClosed?: (() => any) | undefined;
+    onOpenAutoFocus?: (() => any) | undefined;
+    onCloseAutoFocus?: (() => any) | undefined;
+}, {}>> & Record<string, any>;
+export default WflyDialog;

package/es/components/dialog/index.js

@@ -0,0 +1,16 @@
+import { withInstall as o } from "../../utils/vue/install.js";
+import "vue";
+import "@vft/utils";
+import "lodash";
+import "@vueuse/core";
+import "../../utils/ns-cover.js";
+import t from "./dialog.vue2.js";
+import { useDialog as c } from "./hooks/use-dialog.js";
+import { dialogInjectionKey as x } from "./constants.js";
+const l = o(t);
+export {
+  l as WflyDialog,
+  l as default,
+  x as dialogInjectionKey,
+  c as useDialog
+};

package/es/components/dialog/style/css.js

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

package/es/components/dialog/style/index.js

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

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

@@ -0,0 +1,10 @@
+export interface DialogContentProps {
+    center?: boolean;
+    alignCenter?: boolean;
+    closeIcon?: string;
+    customClass?: string;
+    draggable?: boolean;
+    fullscreen?: boolean;
+    showClose?: boolean;
+    title?: string;
+}

package/es/components/dialog/types.js

@@ -0,0 +1 @@
+

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

@@ -5,7 +5,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         required: false;
     };
     contentPosition: {
-        type: __PropType<"left" | "right" | "center" | undefined>;
+        type: __PropType<"right" | "left" | "center" | undefined>;
         required: false;
     };
     borderStyle: {
@@ -30,7 +30,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         required: false;
     };
     contentPosition: {
-        type: __PropType<"left" | "right" | "center" | undefined>;
+        type: __PropType<"right" | "left" | "center" | undefined>;
         required: false;
     };
     borderStyle: {

package/es/components/divider/divider.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as a, computed as m, openBlock as n, createElementBlock as i, normalizeClass as l, unref as r, normalizeStyle as c, renderSlot as s, createCommentVNode as u } from "vue";
+import { defineComponent as a, computed as d, openBlock as i, createElementBlock as n, normalizeClass as l, unref as r, normalizeStyle as c, renderSlot as s, createCommentVNode as u } from "vue";
 import { useNamespace as f } from "../../hooks/use-namespace/index.js";
 import "@popperjs/core";
 import "lodash";
@@ -6,12 +6,14 @@ import "../../hooks/use-z-index/index.js";
 import "@vueuse/core";
 import "@vft/utils";
 import "../../utils/ns-cover.js";
+import "@vue/reactivity";
+import "@vue/shared";
 const t = (
   /* hoist-static*/
   f("divider")
 ), b = a({
   name: t.b()
-}), h = /* @__PURE__ */ a({
+}), N = /* @__PURE__ */ a({
   ...b,
   props: {
     direction: { default: "horizontal" },
@@ -22,7 +24,7 @@ const t = (
     marginX: null
   },
   setup(e) {
-    const d = m(() => ({
+    const m = d(() => ({
       ...t.cssVarBlock({
         "border-style": e.borderStyle,
         "border-color": e.borderColor,
@@ -30,12 +32,12 @@ const t = (
         "margin-x": e.marginX
       })
     }));
-    return (o, y) => (n(), i("div", {
+    return (o, y) => (i(), n("div", {
       class: l([r(t).b(), r(t).m(e.direction)]),
-      style: c(r(d)),
+      style: c(r(m)),
       role: "separator"
     }, [
-      o.$slots.default && e.direction !== "vertical" ? (n(), i("div", {
+      o.$slots.default && e.direction !== "vertical" ? (i(), n("div", {
         key: 0,
         class: l([r(t).e("text"), r(t).is(e.contentPosition)])
       }, [
@@ -45,5 +47,5 @@ const t = (
   }
 });
 export {
-  h as default
+  N as default
 };

package/es/components/divider/index.d.ts

@@ -4,7 +4,7 @@ export declare const VftDivider: import("vft/es/utils").SFCWithInstall<import("v
         required: false;
     };
     contentPosition: {
-        type: import("vue").PropType<"left" | "right" | "center" | undefined>;
+        type: import("vue").PropType<"right" | "left" | "center" | undefined>;
         required: false;
     };
     borderStyle: {
@@ -29,7 +29,7 @@ export declare const VftDivider: import("vft/es/utils").SFCWithInstall<import("v
         required: false;
     };
     contentPosition: {
-        type: import("vue").PropType<"left" | "right" | "center" | undefined>;
+        type: import("vue").PropType<"right" | "left" | "center" | undefined>;
         required: false;
     };
     borderStyle: {

package/es/components/divider/index.js

@@ -1,11 +1,12 @@
 import { withInstall as t } from "../../utils/vue/install.js";
 import "vue";
 import "@vft/utils";
-import "../../utils/ns-cover.js";
 import "lodash";
+import "@vueuse/core";
+import "../../utils/ns-cover.js";
 import i from "./divider.vue2.js";
-const s = t(i);
+const e = t(i);
 export {
-  s as VftDivider,
-  s as default
+  e as VftDivider,
+  e as default
 };

package/es/components/docs-layout/style/css.js

@@ -0,0 +1,2 @@
+import "vft/theme-style/base.css";
+import "vft/theme-style/vft-docs-layout.css";

package/es/components/docs-layout/style/index.js

@@ -0,0 +1,2 @@
+import "vft/theme-style/src/base.scss";
+import "vft/theme-style/src/docs-layout.scss";