vft 0.0.376 → 0.0.378

package/es/components/popover/popover.vue2.js

@@ -1,22 +1,24 @@
-import { defineComponent as m, computed as r, ref as S, unref as l, createBlock as U, openBlock as p, mergeProps as R, withCtx as s, renderSlot as f, createCommentVNode as d, createElementBlock as T, normalizeClass as V, toDisplayString as u, createTextVNode as $ } from "vue";
-import { VftTooltip as N } from "../tooltip/index.js";
-import { EVENT_CODE as i } from "../../constants/aria.js";
-import { isClient as O } from "@vueuse/core";
+import { defineComponent, computed, ref, unref, createBlock, openBlock, mergeProps, withCtx, renderSlot, createCommentVNode, createElementBlock, normalizeClass, toDisplayString, createTextVNode } from "vue";
+import { VftTooltip } from "../tooltip/index.js";
+import { EVENT_CODE } from "../../constants/aria.js";
+import { isClient } from "@vueuse/core";
 import "@vft/utils";
-import { addUnit as K } from "../../utils/helper.js";
+import { addUnit } from "../../utils/helper.js";
 import "lodash-es";
-import { useNamespace as D } 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 "../../hooks/use-z-index/index.js";
-const H = "onUpdate:visible", L = m({
+const updateEventKeyRaw = `onUpdate:visible`;
+const __default__ = defineComponent({
   name: "vft-popover"
-}), Y = /* @__PURE__ */ m({
-  ...L,
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
   props: {
     trigger: { default: "hover" },
     placement: { default: "bottom" },
-    disabled: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: false },
     visible: { type: Boolean, default: null },
     transition: {},
     popperOptions: {},
@@ -24,19 +26,19 @@ const H = "onUpdate:visible", L = m({
     content: {},
     popperStyle: { type: [Boolean, null, String, Object, Array] },
     popperClass: {},
-    enterable: { type: Boolean, default: !0 },
+    enterable: { type: Boolean, default: true },
     effect: { default: "light" },
-    teleported: { type: Boolean, default: !0 },
+    teleported: { type: Boolean, default: true },
     title: {},
     width: { default: 150 },
     offset: {},
     showAfter: { default: 0 },
     hideAfter: { default: 200 },
     autoClose: { default: 0 },
-    showArrow: { type: Boolean, default: !0 },
-    persistent: { type: Boolean, default: O },
+    showArrow: { type: Boolean, default: true },
+    persistent: { type: Boolean, default: isClient },
     appendTo: {},
-    triggerKeys: { default: () => [i.enter, i.numpadEnter, i.space] },
+    triggerKeys: { default: () => [EVENT_CODE.enter, EVENT_CODE.numpadEnter, EVENT_CODE.space] },
     "onUpdate:visible": {}
   },
   emits: [
@@ -46,76 +48,102 @@ const H = "onUpdate:visible", L = m({
     "after-enter",
     "after-leave"
   ],
-  setup(t, { expose: b, emit: c }) {
-    const o = c, a = D("popover"), v = r(() => [H]), n = S(), g = r(() => l(n)?.popperRef), h = r(() => [
-      {
-        width: K(t.width)
-      },
-      t.popperStyle
-    ]), y = r(() => [a.b(), t.popperClass, { [a.m("plain")]: !!t.content }]), w = r(() => t.transition === `${a.namespace.value}-fade-in-linear`), B = () => {
-      n.value?.hide();
-    }, C = () => {
-      o("before-enter");
-    }, k = () => {
-      o("before-leave");
-    }, A = () => {
-      o("after-enter");
-    }, E = () => {
-      o("update:visible", !1), o("after-leave");
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const emit = __emit;
+    const ns = useNamespace("popover");
+    const onUpdateVisible = computed(() => {
+      return [updateEventKeyRaw];
+    });
+    const tooltipRef = ref();
+    const popperRef = computed(() => {
+      return unref(tooltipRef)?.popperRef;
+    });
+    const style = computed(() => {
+      return [
+        {
+          width: addUnit(__props.width)
+        },
+        __props.popperStyle
+      ];
+    });
+    const kls = computed(() => {
+      return [ns.b(), __props.popperClass, { [ns.m("plain")]: !!__props.content }];
+    });
+    const gpuAcceleration = computed(() => {
+      return __props.transition === `${ns.namespace.value}-fade-in-linear`;
+    });
+    const hide = () => {
+      tooltipRef.value?.hide();
+    };
+    const beforeEnter = () => {
+      emit("before-enter");
+    };
+    const beforeLeave = () => {
+      emit("before-leave");
+    };
+    const afterEnter = () => {
+      emit("after-enter");
+    };
+    const afterLeave = () => {
+      emit("update:visible", false);
+      emit("after-leave");
+    };
+    __expose({
+      popperRef,
+      hide
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(VftTooltip), mergeProps({
+        ref_key: "tooltipRef",
+        ref: tooltipRef
+      }, _ctx.$attrs, {
+        trigger: _ctx.trigger,
+        "trigger-keys": _ctx.triggerKeys,
+        placement: _ctx.placement,
+        disabled: _ctx.disabled,
+        visible: _ctx.visible,
+        transition: _ctx.transition,
+        "popper-options": _ctx.popperOptions,
+        tabindex: _ctx.tabindex,
+        content: _ctx.content,
+        offset: _ctx.offset,
+        "show-after": _ctx.showAfter,
+        "hide-after": _ctx.hideAfter,
+        "auto-close": _ctx.autoClose,
+        "show-arrow": _ctx.showArrow,
+        "aria-label": _ctx.title,
+        effect: _ctx.effect,
+        enterable: _ctx.enterable,
+        "popper-class": kls.value,
+        "popper-style": style.value,
+        teleported: _ctx.teleported,
+        "append-to": _ctx.appendTo,
+        persistent: _ctx.persistent,
+        "gpu-acceleration": gpuAcceleration.value,
+        "onUpdate:visible": onUpdateVisible.value,
+        onBeforeShow: beforeEnter,
+        onBeforeHide: beforeLeave,
+        onShow: afterEnter,
+        onHide: afterLeave
+      }), {
+        content: withCtx(() => [
+          _ctx.title ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(unref(ns).e("title")),
+            role: "title"
+          }, toDisplayString(_ctx.title), 3)) : createCommentVNode("", true),
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString(_ctx.content), 1)
+          ])
+        ]),
+        default: withCtx(() => [
+          _ctx.$slots.reference ? renderSlot(_ctx.$slots, "reference", { key: 0 }) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 16, ["trigger", "trigger-keys", "placement", "disabled", "visible", "transition", "popper-options", "tabindex", "content", "offset", "show-after", "hide-after", "auto-close", "show-arrow", "aria-label", "effect", "enterable", "popper-class", "popper-style", "teleported", "append-to", "persistent", "gpu-acceleration", "onUpdate:visible"]);
     };
-    return b({
-      popperRef: g,
-      hide: B
-    }), (e, j) => (p(), U(l(N), R({
-      ref_key: "tooltipRef",
-      ref: n
-    }, e.$attrs, {
-      trigger: e.trigger,
-      "trigger-keys": e.triggerKeys,
-      placement: e.placement,
-      disabled: e.disabled,
-      visible: e.visible,
-      transition: e.transition,
-      "popper-options": e.popperOptions,
-      tabindex: e.tabindex,
-      content: e.content,
-      offset: e.offset,
-      "show-after": e.showAfter,
-      "hide-after": e.hideAfter,
-      "auto-close": e.autoClose,
-      "show-arrow": e.showArrow,
-      "aria-label": e.title,
-      effect: e.effect,
-      enterable: e.enterable,
-      "popper-class": y.value,
-      "popper-style": h.value,
-      teleported: e.teleported,
-      "append-to": e.appendTo,
-      persistent: e.persistent,
-      "gpu-acceleration": w.value,
-      "onUpdate:visible": v.value,
-      onBeforeShow: C,
-      onBeforeHide: k,
-      onShow: A,
-      onHide: E
-    }), {
-      content: s(() => [
-        e.title ? (p(), T("div", {
-          key: 0,
-          class: V(l(a).e("title")),
-          role: "title"
-        }, u(e.title), 3)) : d("", !0),
-        f(e.$slots, "default", {}, () => [
-          $(u(e.content), 1)
-        ])
-      ]),
-      default: s(() => [
-        e.$slots.reference ? f(e.$slots, "reference", { key: 0 }) : d("", !0)
-      ]),
-      _: 3
-    }, 16, ["trigger", "trigger-keys", "placement", "disabled", "visible", "transition", "popper-options", "tabindex", "content", "offset", "show-after", "hide-after", "auto-close", "show-arrow", "aria-label", "effect", "enterable", "popper-class", "popper-style", "teleported", "append-to", "persistent", "gpu-acceleration", "onUpdate:visible"]));
   }
 });
 export {
-  Y as default
+  _sfc_main as default
 };

package/es/components/popper/arrow.vue.js

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

package/es/components/popper/arrow.vue2.js

@@ -1,48 +1,55 @@
-import { defineComponent as t, inject as m, watch as i, onBeforeUnmount as l, createElementBlock as c, openBlock as _, normalizeStyle as u, normalizeClass as w, unref as o } from "vue";
+import { defineComponent, inject, watch, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref } from "vue";
 import "@vueuse/core";
 import "@vft/utils";
 import "../config-provider/hooks/use-global-config.js";
 import "lodash-es";
-import { useNamespace as d } 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 "../../hooks/use-z-index/index.js";
-import { POPPER_CONTENT_INJECTION_KEY as O } from "./constants.js";
-const E = t({
+import { POPPER_CONTENT_INJECTION_KEY } from "./constants.js";
+const __default__ = defineComponent({
   name: "VftPopperArrow",
-  inheritAttrs: !1
-}), z = /* @__PURE__ */ t({
-  ...E,
+  inheritAttrs: false
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
   props: {
     arrowOffset: { default: 5 }
   },
-  setup(a, { expose: p }) {
-    const f = d("popper"), {
-      arrowOffset: n,
-      arrowRef: r,
-      arrowStyle: s
-    } = m(O, void 0);
-    return i(
-      () => a.arrowOffset,
-      (e) => {
-        n.value = e;
+  setup(__props, { expose: __expose }) {
+    const ns = useNamespace("popper");
+    const {
+      arrowOffset: _arrowOffset,
+      arrowRef,
+      arrowStyle
+    } = inject(POPPER_CONTENT_INJECTION_KEY, void 0);
+    watch(
+      () => __props.arrowOffset,
+      (val) => {
+        _arrowOffset.value = val;
       }
-    ), l(() => {
-      r.value = void 0;
-    }), p({
+    );
+    onBeforeUnmount(() => {
+      arrowRef.value = void 0;
+    });
+    __expose({
       /**
        * @description Arrow element
        */
-      arrowRef: r
-    }), (e, N) => (_(), c("span", {
-      ref_key: "arrowRef",
-      ref: r,
-      class: w(o(f).e("arrow")),
-      "data-popper-arrow": "",
-      style: u(o(s))
-    }, null, 6));
+      arrowRef
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        ref_key: "arrowRef",
+        ref: arrowRef,
+        class: normalizeClass(unref(ns).e("arrow")),
+        "data-popper-arrow": "",
+        style: normalizeStyle(unref(arrowStyle))
+      }, null, 6);
+    };
   }
 });
 export {
-  z as default
+  _sfc_main as default
 };

package/es/components/popper/composables/index.js

@@ -1,8 +1,8 @@
-import { usePopperContent as p } from "./use-content.js";
-import { usePopperContentDOM as t } from "./use-content-dom.js";
-import { usePopperContentFocusTrap as s } from "./use-focus-trap.js";
+import { usePopperContent } from "./use-content.js";
+import { usePopperContentDOM } from "./use-content-dom.js";
+import { usePopperContentFocusTrap } from "./use-focus-trap.js";
 export {
-  p as usePopperContent,
-  t as usePopperContentDOM,
-  s as usePopperContentFocusTrap
+  usePopperContent,
+  usePopperContentDOM,
+  usePopperContentFocusTrap
 };

package/es/components/popper/composables/use-content-dom.js

@@ -1,45 +1,55 @@
-import { computed as t, unref as o, ref as f } from "vue";
+import { computed, unref, ref } from "vue";
 import "@vueuse/core";
-import { isNumber as l } from "@vft/utils";
+import { isNumber } from "@vft/utils";
 import "../../config-provider/hooks/use-global-config.js";
 import "lodash-es";
-import { useNamespace as I } 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 { useZIndex as Z } from "../../../hooks/use-z-index/index.js";
-const A = (e, {
-  attributes: m,
-  styles: p,
-  role: s
+import { useZIndex } from "../../../hooks/use-z-index/index.js";
+const usePopperContentDOM = (props, {
+  attributes,
+  styles,
+  role
 }) => {
-  const { nextZIndex: c } = Z(), n = I("popper"), a = t(() => o(m).popper), r = f(
-    l(e.zIndex) ? e.zIndex : c()
-  ), d = t(() => [
-    n.b(),
-    n.is("pure", e.pure),
-    n.is(e.effect),
-    e.popperClass
-  ]), i = t(() => [
-    { zIndex: o(r) },
-    e.popperStyle || {},
-    o(p).popper
-  ]), u = t(
-    () => s.value === "dialog" ? "false" : void 0
-  ), x = t(
-    () => o(p).arrow || {}
+  const { nextZIndex } = useZIndex();
+  const ns = useNamespace("popper");
+  const contentAttrs = computed(() => unref(attributes).popper);
+  const contentZIndex = ref(
+    isNumber(props.zIndex) ? props.zIndex : nextZIndex()
   );
+  const contentClass = computed(() => [
+    ns.b(),
+    ns.is("pure", props.pure),
+    ns.is(props.effect),
+    props.popperClass
+  ]);
+  const contentStyle = computed(() => {
+    return [
+      { zIndex: unref(contentZIndex) },
+      props.popperStyle || {},
+      unref(styles).popper
+    ];
+  });
+  const ariaModal = computed(
+    () => role.value === "dialog" ? "false" : void 0
+  );
+  const arrowStyle = computed(
+    () => unref(styles).arrow || {}
+  );
+  const updateZIndex = () => {
+    contentZIndex.value = props.zIndex || nextZIndex();
+  };
   return {
-    ariaModal: u,
-    arrowStyle: x,
-    contentAttrs: a,
-    contentClass: d,
-    contentStyle: i,
-    contentZIndex: r,
-    updateZIndex: () => {
-      r.value = e.zIndex || c();
-    }
+    ariaModal,
+    arrowStyle,
+    contentAttrs,
+    contentClass,
+    contentStyle,
+    contentZIndex,
+    updateZIndex
   };
 };
 export {
-  A as usePopperContentDOM
+  usePopperContentDOM
 };

package/es/components/popper/composables/use-content.js

@@ -1,61 +1,76 @@
-import { inject as F, ref as a, computed as o, unref as e, watch as f, onMounted as M } from "vue";
-import { isUndefined as U } from "lodash-es";
+import { inject, ref, computed, unref, watch, onMounted } from "vue";
+import { isUndefined } from "lodash-es";
 import "@vueuse/core";
 import "@vft/utils";
 import "../../config-provider/hooks/use-global-config.js";
 import "../../../hooks/use-model-toggle/index.js";
-import { usePopper as _ } from "../../../hooks/use-popper/index.js";
+import { usePopper } from "../../../hooks/use-popper/index.js";
 import "../../../hooks/use-z-index/index.js";
-import { POPPER_INJECTION_KEY as C } from "../constants.js";
-import { buildPopperOptions as I, unwrapMeasurableEl as L } from "../utils.js";
-const T = 0, S = (r) => {
-  const { popperInstanceRef: m, contentRef: i, triggerRef: d, role: u } = F(
-    C,
+import { POPPER_INJECTION_KEY } from "../constants.js";
+import { buildPopperOptions, unwrapMeasurableEl } from "../utils.js";
+const DEFAULT_ARROW_OFFSET = 0;
+const usePopperContent = (props) => {
+  const { popperInstanceRef, contentRef, triggerRef, role } = inject(
+    POPPER_INJECTION_KEY,
     void 0
-  ), s = a(), l = a(), R = o(() => ({
-    name: "eventListeners",
-    enabled: !!r.visible
-  })), E = o(() => {
-    const t = e(s), v = e(l) ?? T;
+  );
+  const arrowRef = ref();
+  const arrowOffset = ref();
+  const eventListenerModifier = computed(() => {
+    return {
+      name: "eventListeners",
+      enabled: !!props.visible
+    };
+  });
+  const arrowModifier = computed(() => {
+    const arrowEl = unref(arrowRef);
+    const offset = unref(arrowOffset) ?? DEFAULT_ARROW_OFFSET;
     return {
       name: "arrow",
-      enabled: !U(t),
+      enabled: !isUndefined(arrowEl),
       options: {
-        element: t,
-        padding: v
+        element: arrowEl,
+        padding: offset
       }
     };
-  }), w = o(() => ({
-    onFirstUpdate: () => {
-      n();
-    },
-    // @ts-ignore
-    ...I(r, [
-      e(E),
-      e(R)
-    ])
-  })), p = o(
-    () => L(r.referenceEl) || e(d)
-  ), { attributes: b, state: O, styles: P, update: n, forceUpdate: g, instanceRef: c } = _(p, i, w);
-  return f(c, (t) => m.value = t), M(() => {
-    f(
-      () => e(p)?.getBoundingClientRect(),
+  });
+  const options = computed(() => {
+    return {
+      onFirstUpdate: () => {
+        update();
+      },
+      // @ts-ignore
+      ...buildPopperOptions(props, [
+        unref(arrowModifier),
+        unref(eventListenerModifier)
+      ])
+    };
+  });
+  const computedReference = computed(
+    () => unwrapMeasurableEl(props.referenceEl) || unref(triggerRef)
+  );
+  const { attributes, state, styles, update, forceUpdate, instanceRef } = usePopper(computedReference, contentRef, options);
+  watch(instanceRef, (instance) => popperInstanceRef.value = instance);
+  onMounted(() => {
+    watch(
+      () => unref(computedReference)?.getBoundingClientRect(),
       () => {
-        n();
+        update();
       }
     );
-  }), {
-    attributes: b,
-    arrowRef: s,
-    contentRef: i,
-    instanceRef: c,
-    state: O,
-    styles: P,
-    role: u,
-    forceUpdate: g,
-    update: n
+  });
+  return {
+    attributes,
+    arrowRef,
+    contentRef,
+    instanceRef,
+    state,
+    styles,
+    role,
+    forceUpdate,
+    update
   };
 };
 export {
-  S as usePopperContent
+  usePopperContent
 };

package/es/components/popper/composables/use-focus-trap.js

@@ -1,26 +1,46 @@
-import { ref as a } from "vue";
-const i = (n, s) => {
-  const o = a(!1), t = a();
-  return {
-    focusStartRef: t,
-    trapped: o,
-    onFocusAfterReleased: (e) => {
-      e.detail?.focusReason !== "pointer" && (t.value = "first", s("blur"));
-    },
-    onFocusAfterTrapped: () => {
-      s("focus");
-    },
-    onFocusInTrap: (e) => {
-      n.visible && !o.value && (e.target && (t.value = e.target), o.value = !0);
-    },
-    onFocusoutPrevented: (e) => {
-      n.trapping || (e.detail.focusReason === "pointer" && e.preventDefault(), o.value = !1);
-    },
-    onReleaseRequested: () => {
-      o.value = !1, s("close");
+import { ref } from "vue";
+const usePopperContentFocusTrap = (props, emit) => {
+  const trapped = ref(false);
+  const focusStartRef = ref();
+  const onFocusAfterTrapped = () => {
+    emit("focus");
+  };
+  const onFocusAfterReleased = (event) => {
+    if (event.detail?.focusReason !== "pointer") {
+      focusStartRef.value = "first";
+      emit("blur");
     }
   };
+  const onFocusInTrap = (event) => {
+    if (props.visible && !trapped.value) {
+      if (event.target) {
+        focusStartRef.value = event.target;
+      }
+      trapped.value = true;
+    }
+  };
+  const onFocusoutPrevented = (event) => {
+    if (!props.trapping) {
+      if (event.detail.focusReason === "pointer") {
+        event.preventDefault();
+      }
+      trapped.value = false;
+    }
+  };
+  const onReleaseRequested = () => {
+    trapped.value = false;
+    emit("close");
+  };
+  return {
+    focusStartRef,
+    trapped,
+    onFocusAfterReleased,
+    onFocusAfterTrapped,
+    onFocusInTrap,
+    onFocusoutPrevented,
+    onReleaseRequested
+  };
 };
 export {
-  i as usePopperContentFocusTrap
+  usePopperContentFocusTrap
 };

package/es/components/popper/constants.js

@@ -1,5 +1,6 @@
-const o = Symbol("popper"), p = Symbol("popperContent");
+const POPPER_INJECTION_KEY = Symbol("popper");
+const POPPER_CONTENT_INJECTION_KEY = Symbol("popperContent");
 export {
-  p as POPPER_CONTENT_INJECTION_KEY,
-  o as POPPER_INJECTION_KEY
+  POPPER_CONTENT_INJECTION_KEY,
+  POPPER_INJECTION_KEY
 };

package/es/components/popper/content.vue.js

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