vft 0.0.43 → 0.0.45

package/es/components/pagination/pagination.js

@@ -0,0 +1,250 @@
+import { useNamespace as w } from "../../hooks/use-namespace/index.js";
+import { defineComponent as A, getCurrentInstance as E, computed as s, ref as y, watch as M, provide as U, h as l } from "vue";
+import "@popperjs/core";
+import "lodash";
+import "../../hooks/use-z-index/index.js";
+import "@vueuse/core";
+import { isNumber as g } from "@vft/utils";
+import "../../utils/ns-cover.js";
+import $ from "./components/jumper.vue2.js";
+import j from "./components/next.vue2.js";
+import L from "./components/pager.vue2.js";
+import R from "./components/prev.vue2.js";
+import W from "./components/sizes.vue2.js";
+import O from "./components/total.vue2.js";
+import { elPaginationKey as V } from "./usePagination.js";
+const n = (e) => typeof e != "number", K = {
+  "update:current-page": (e) => g(e),
+  "update:page-size": (e) => g(e),
+  "size-change": (e) => g(e),
+  "current-change": (e) => g(e),
+  "prev-click": (e) => g(e),
+  "next-click": (e) => g(e)
+}, q = "VftPagination", ue = A({
+  name: q,
+  props: {
+    /**
+     * @description total item count
+     */
+    total: Number,
+    /**
+     * @description options of item count per page
+     */
+    pageSize: Number,
+    /**
+     * @description default initial value of page size
+     */
+    defaultPageSize: Number,
+    /**
+     * @description current page number
+     */
+    currentPage: Number,
+    /**
+     * @description default initial value of current-page
+     */
+    defaultCurrentPage: Number,
+    /**
+     * @description total page count. Set either `total` or `page-count` and pages will be displayed; if you need `page-sizes`, `total` is required
+     */
+    pageCount: Number,
+    /**
+     * @description number of pagers. Pagination collapses when the total page count exceeds this value
+     */
+    pagerCount: {
+      type: Number,
+      validator: (e) => g(e) && Math.trunc(e) === e && e > 4 && e < 22 && e % 2 === 1,
+      default: 7
+    },
+    /**
+     * @description layout of Pagination, elements separated with a comma
+     */
+    layout: {
+      type: String,
+      default: ["prev", "pager", "next", "jumper", "->", "total"].join(", ")
+    },
+    /**
+     * @description item count of each page
+     */
+    pageSizes: {
+      type: Array,
+      default: [10, 20, 30, 40, 50, 100]
+    },
+    /**
+     * @description custom class name for the page size Select's dropdown
+     */
+    popperClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * @description text for the prev button
+     */
+    prevText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * @description icon for the prev button, higher priority of `prev-text`
+     */
+    prevIcon: {
+      type: String,
+      default: () => "ArrowLeft"
+    },
+    /**
+     * @description text for the next button
+     */
+    nextText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * @description icon for the next button, higher priority of `next-text`
+     */
+    nextIcon: {
+      type: String,
+      default: () => "ArrowRight"
+    },
+    /**
+     * @description whether to use small pagination
+     */
+    small: Boolean,
+    /**
+     * @description whether the buttons have a background color
+     */
+    background: Boolean,
+    /**
+     * @description whether Pagination is disabled
+     */
+    disabled: Boolean,
+    /**
+     * @description whether to hide when there's only one page
+     */
+    hideOnSinglePage: Boolean
+  },
+  emits: K,
+  setup(e, { emit: o, slots: f }) {
+    const r = w("pagination"), c = E().vnode.props || {}, v = "onUpdate:currentPage" in c || "onUpdate:current-page" in c || "onCurrentChange" in c, p = "onUpdate:pageSize" in c || "onUpdate:page-size" in c || "onSizeChange" in c, _ = s(() => {
+      if (n(e.total) && n(e.pageCount) || !n(e.currentPage) && !v)
+        return !1;
+      if (e.layout.includes("sizes")) {
+        if (n(e.pageCount)) {
+          if (!n(e.total) && !n(e.pageSize) && !p)
+            return !1;
+        } else if (!p)
+          return !1;
+      }
+      return !0;
+    }), P = y(n(e.defaultPageSize) ? 10 : e.defaultPageSize), b = y(n(e.defaultCurrentPage) ? 1 : e.defaultCurrentPage), C = s({
+      get() {
+        return n(e.pageSize) ? P.value : e.pageSize;
+      },
+      set(a) {
+        n(e.pageSize) && (P.value = a), p && (o("update:page-size", a), o("size-change", a));
+      }
+    }), u = s(() => {
+      let a = 0;
+      return n(e.pageCount) ? n(e.total) || (a = Math.max(1, Math.ceil(e.total / C.value))) : a = e.pageCount, a;
+    }), i = s({
+      get() {
+        return n(e.currentPage) ? b.value : e.currentPage;
+      },
+      set(a) {
+        let t = a;
+        a < 1 ? t = 1 : a > u.value && (t = u.value), n(e.currentPage) && (b.value = t), v && (o("update:current-page", t), o("current-change", t));
+      }
+    });
+    M(u, (a) => {
+      i.value > a && (i.value = a);
+    });
+    function z(a) {
+      i.value = a;
+    }
+    function N(a) {
+      C.value = a;
+      const t = u.value;
+      i.value > t && (i.value = t);
+    }
+    function k() {
+      e.disabled || (i.value -= 1, o("prev-click", i.value));
+    }
+    function T() {
+      e.disabled || (i.value += 1, o("next-click", i.value));
+    }
+    function m(a, t) {
+      a && (a.props || (a.props = {}), a.props.class = [a.props.class, t].join(" "));
+    }
+    return U(V, {
+      pageCount: u,
+      disabled: s(() => e.disabled),
+      currentPage: i,
+      changeEvent: z,
+      handleSizeChange: N
+    }), () => {
+      var x;
+      if (!_.value || !e.layout || e.hideOnSinglePage && u.value <= 1)
+        return null;
+      const a = [], t = [], B = l("div", { class: r.e("rightwrapper") }, t), S = {
+        prev: l(R, {
+          disabled: e.disabled,
+          currentPage: i.value,
+          prevText: e.prevText,
+          prevIcon: e.prevIcon,
+          onClick: k
+        }),
+        jumper: l($, {
+          size: e.small ? "small" : "default"
+        }),
+        pager: l(L, {
+          currentPage: i.value,
+          pageCount: u.value,
+          pagerCount: e.pagerCount,
+          onChange: z,
+          disabled: e.disabled
+        }),
+        next: l(j, {
+          disabled: e.disabled,
+          currentPage: i.value,
+          pageCount: u.value,
+          nextText: e.nextText,
+          nextIcon: e.nextIcon,
+          onClick: T
+        }),
+        sizes: l(W, {
+          pageSize: C.value,
+          pageSizes: e.pageSizes,
+          popperClass: e.popperClass,
+          disabled: e.disabled,
+          size: e.small ? "small" : "default"
+        }),
+        slot: ((x = f == null ? void 0 : f.default) == null ? void 0 : x.call(f)) ?? null,
+        total: l(O, { total: n(e.total) ? 0 : e.total })
+      }, I = e.layout.split(",").map((d) => d.trim());
+      let h = !1;
+      return I.forEach((d) => {
+        if (d === "->") {
+          h = !0;
+          return;
+        }
+        h ? t.push(S[d]) : a.push(S[d]);
+      }), m(a[0], r.is("first")), m(a[a.length - 1], r.is("last")), h && t.length > 0 && (m(t[0], r.is("first")), m(t[t.length - 1], r.is("last")), a.push(B)), l(
+        "div",
+        {
+          role: "pagination",
+          "aria-label": "pagination",
+          class: [
+            r.b(),
+            r.is("background", e.background),
+            {
+              [r.m("small")]: e.small
+            }
+          ]
+        },
+        a
+      );
+    };
+  }
+});
+export {
+  ue as default,
+  K as paginationEmits
+};

package/es/components/popover/index.js

@@ -0,0 +1,10 @@
+import { withInstall as o } from "../../utils/vue/install.js";
+import "vue";
+import "@vft/utils";
+import "../../utils/ns-cover.js";
+import t from "./popover.vue2.js";
+const a = o(t);
+export {
+  a as VftPopover,
+  a as default
+};

package/es/components/popover/popover.vue.js

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

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

@@ -0,0 +1,116 @@
+import { defineComponent as c, ref as k, computed as n, unref as o, openBlock as i, createBlock as A, mergeProps as S, withCtx as f, createElementBlock as $, normalizeClass as x, toDisplayString as s, createCommentVNode as d, renderSlot as u, createTextVNode as R } from "vue";
+import { addUnit as E } from "@vft/utils";
+import { useNamespace as N } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "lodash";
+import "../../hooks/use-z-index/index.js";
+import "@vueuse/core";
+import "../../utils/ns-cover.js";
+import { VftTooltip as V } from "../tooltip/index.js";
+const r = (
+  /* hoist-static*/
+  N("popover")
+), H = c({
+  name: r.b()
+}), G = /* @__PURE__ */ c({
+  ...H,
+  props: {
+    trigger: { default: "hover" },
+    placement: { default: "bottom" },
+    disabled: { type: Boolean },
+    visible: { type: Boolean, default: null },
+    transition: { default: "vft-fade-in-linear" },
+    popperOptions: null,
+    tabindex: { default: 0 },
+    content: null,
+    popperStyle: null,
+    popperClass: null,
+    enterable: { type: Boolean, default: !0 },
+    effect: { default: "light" },
+    teleported: { type: Boolean, default: !0 },
+    title: null,
+    width: { default: 150 },
+    offset: null,
+    showAfter: { default: 0 },
+    hideAfter: { default: 200 },
+    autoClose: { default: 0 },
+    showArrow: { type: Boolean, default: !0 },
+    persistent: { type: Boolean, default: !0 }
+  },
+  emits: ["update:visible", "before-enter", "before-leave", "after-enter", "after-leave"],
+  setup(e, { expose: p, emit: l }) {
+    const a = k(), b = n(() => {
+      var t;
+      return (t = o(a)) == null ? void 0 : t.popperRef;
+    }), m = n(() => [
+      {
+        width: E(e.width)
+      },
+      e.popperStyle
+    ]), h = n(() => [r.b(), e.popperClass, { [r.m("plain")]: !!e.content }]), v = n(() => e.transition === `${r.namespace.value}-fade-in-linear`), w = () => {
+      var t;
+      (t = a.value) == null || t.hide();
+    }, y = () => {
+      l("before-enter");
+    }, g = () => {
+      l("before-leave");
+    }, B = () => {
+      l("after-enter");
+    }, C = () => {
+      l("update:visible", !1), l("after-leave");
+    };
+    return p({
+      /** @description popper ref */
+      popperRef: b,
+      /** @description hide popover */
+      hide: w
+    }), (t, L) => (i(), A(o(V), S({
+      ref_key: "tooltipRef",
+      ref: a
+    }, t.$attrs, {
+      trigger: e.trigger,
+      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": o(h),
+      "popper-style": o(m),
+      teleported: e.teleported,
+      persistent: e.persistent,
+      "gpu-acceleration": o(v),
+      onBeforeShow: y,
+      onBeforeHide: g,
+      onShow: B,
+      onHide: C
+    }), {
+      content: f(() => [
+        e.title ? (i(), $("div", {
+          key: 0,
+          class: x(o(r).e("title")),
+          role: "title"
+        }, s(e.title), 3)) : d("", !0),
+        u(t.$slots, "default", {}, () => [
+          R(s(e.content), 1)
+        ])
+      ]),
+      default: f(() => [
+        t.$slots.reference ? u(t.$slots, "reference", { key: 0 }) : d("", !0)
+      ]),
+      _: 3
+    }, 16, ["trigger", "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", "persistent", "gpu-acceleration"]));
+  }
+});
+export {
+  G as default
+};

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

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

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

@@ -0,0 +1,46 @@
+import { defineComponent as t, inject as m, watch as i, onBeforeUnmount as l, openBlock as c, createElementBlock as _, normalizeClass as u, unref as o, normalizeStyle as w } from "vue";
+import { useNamespace as d } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "lodash";
+import "../../hooks/use-z-index/index.js";
+import "@vueuse/core";
+import "@vft/utils";
+import "../../utils/ns-cover.js";
+import { POPPER_CONTENT_INJECTION_KEY as O } from "./constants.js";
+const v = t({
+  name: "vft-popper-arrow",
+  inheritAttrs: !1
+}), x = /* @__PURE__ */ t({
+  ...v,
+  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;
+      }
+    ), l(() => {
+      r.value = void 0;
+    }), p({
+      /**
+       * @description Arrow element
+       */
+      arrowRef: r
+    }), (e, E) => (c(), _("span", {
+      ref_key: "arrowRef",
+      ref: r,
+      class: u(o(f).e("arrow")),
+      "data-popper-arrow": "",
+      style: w(o(s))
+    }, null, 6));
+  }
+});
+export {
+  x as default
+};

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

@@ -0,0 +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";
+export {
+  p as usePopperContent,
+  t as usePopperContentDOM,
+  s as usePopperContentFocusTrap
+};

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

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

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

@@ -0,0 +1,64 @@
+import { inject as F, ref as a, computed as o, unref as t, watch as f, onMounted as M } from "vue";
+import { isUndefined as U } from "lodash";
+import "../../config-provider/hooks/use-global-config.js";
+import { usePopper as _ } from "../../../hooks/use-popper/index.js";
+import "../../../hooks/use-z-index/index.js";
+import "@vueuse/core";
+import "@vft/utils";
+import "../../../utils/ns-cover.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,
+    void 0
+  ), s = a(), l = a(), R = o(() => ({
+    name: "eventListeners",
+    enabled: !!r.visible
+  })), E = o(() => {
+    const e = t(s), v = t(l) ?? T;
+    return {
+      name: "arrow",
+      enabled: !U(e),
+      options: {
+        element: e,
+        padding: v
+      }
+    };
+  }), w = o(() => ({
+    onFirstUpdate: () => {
+      n();
+    },
+    // @ts-ignore
+    ...I(r, [
+      t(E),
+      t(R)
+    ])
+  })), p = o(
+    () => L(r.referenceEl) || t(d)
+  ), { attributes: b, state: O, styles: P, update: n, forceUpdate: g, instanceRef: c } = _(p, i, w);
+  return f(c, (e) => m.value = e), M(() => {
+    f(
+      () => {
+        var e;
+        return (e = t(p)) == null ? void 0 : e.getBoundingClientRect();
+      },
+      () => {
+        n();
+      }
+    );
+  }), {
+    attributes: b,
+    arrowRef: s,
+    contentRef: i,
+    instanceRef: c,
+    state: O,
+    styles: P,
+    role: u,
+    forceUpdate: g,
+    update: n
+  };
+};
+export {
+  S as usePopperContent
+};

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

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

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

@@ -0,0 +1,143 @@
+import { defineComponent as y, getCurrentInstance as z, ref as D, provide as J, onMounted as K, watch as i, unref as e, onBeforeUnmount as U, openBlock as Y, createElementBlock as Z, mergeProps as j, createVNode as G, withCtx as H, renderSlot as Q } from "vue";
+import X from "../focus-trap/focus-trap.vue.js";
+import "../focus-trap/utils.js";
+import { isElement as R } from "@vft/utils";
+import { isNil as h } from "lodash";
+import { usePopperContent as W } from "./composables/use-content.js";
+import { usePopperContentDOM as _ } from "./composables/use-content-dom.js";
+import { usePopperContentFocusTrap as ee } from "./composables/use-focus-trap.js";
+import { POPPER_CONTENT_INJECTION_KEY as te } from "./constants.js";
+const oe = y({
+  name: "vft-popper-content"
+}), de = /* @__PURE__ */ y({
+  ...oe,
+  props: {
+    boundariesPadding: { default: 0 },
+    fallbackPlacements: null,
+    gpuAcceleration: { type: Boolean, default: !0 },
+    offset: { default: 12 },
+    placement: { default: "bottom" },
+    popperOptions: { default: {} },
+    strategy: { default: "absolute" },
+    id: null,
+    style: null,
+    className: null,
+    effect: { default: "dark" },
+    visible: { type: Boolean },
+    enterable: { type: Boolean, default: !0 },
+    pure: { type: Boolean },
+    focusOnShow: { type: Boolean, default: !1 },
+    trapping: { type: Boolean, default: !1 },
+    popperClass: null,
+    popperStyle: null,
+    referenceEl: null,
+    triggerTargetEl: null,
+    stopPopperMouseEvent: { type: Boolean, default: !0 },
+    ariaLabel: null,
+    virtualTriggering: { type: Boolean },
+    zIndex: null
+  },
+  emits: ["mouseenter", "mouseleave", "focus", "blur", "close"],
+  setup(n, { expose: P, emit: F }) {
+    const u = z(), {
+      focusStartRef: E,
+      trapped: p,
+      onFocusAfterReleased: B,
+      onFocusAfterTrapped: C,
+      onFocusInTrap: A,
+      onFocusoutPrevented: T,
+      onReleaseRequested: g
+    } = ee(u.props, F), { attributes: O, arrowRef: I, contentRef: a, styles: N, instanceRef: w, role: d, update: M } = W(u.props), {
+      ariaModal: k,
+      arrowStyle: S,
+      contentAttrs: q,
+      contentClass: $,
+      contentStyle: c,
+      updateZIndex: x
+    } = _(u.props, {
+      styles: N,
+      attributes: O,
+      role: d
+    }), L = D();
+    J(te, {
+      arrowStyle: S,
+      arrowRef: I,
+      arrowOffset: L
+    });
+    let t;
+    const m = (l = !0) => {
+      M(), l && x();
+    }, V = () => {
+      m(!1), n.visible && n.focusOnShow ? p.value = !0 : n.visible === !1 && (p.value = !1);
+    };
+    return K(() => {
+      i(
+        () => n.triggerTargetEl,
+        (l, r) => {
+          t == null || t(), t = void 0;
+          const o = e(l || a.value), f = e(r || a.value);
+          R(o) && (t = i(
+            [d, () => n.ariaLabel, k, () => n.id],
+            (s) => {
+              ["role", "aria-label", "aria-modal", "id"].forEach((v, b) => {
+                h(s[b]) ? o.removeAttribute(v) : o.setAttribute(v, s[b]);
+              });
+            },
+            { immediate: !0 }
+          )), f !== o && R(f) && ["role", "aria-label", "aria-modal", "id"].forEach((s) => {
+            f.removeAttribute(s);
+          });
+        },
+        { immediate: !0 }
+      ), i(() => n.visible, V, { immediate: !0 });
+    }), U(() => {
+      t == null || t(), t = void 0;
+    }), P({
+      /**
+       * @description popper content element
+       */
+      popperContentRef: a,
+      /**
+       * @description popperjs instance
+       */
+      popperInstanceRef: w,
+      /**
+       * @description method for updating popper
+       */
+      updatePopper: m,
+      /**
+       * @description content style
+       */
+      contentStyle: c
+    }), (l, r) => (Y(), Z("div", j({
+      ref_key: "contentRef",
+      ref: a
+    }, e(q), {
+      style: e(c),
+      class: e($),
+      tabindex: "-1",
+      onMouseenter: r[0] || (r[0] = (o) => l.$emit("mouseenter", o)),
+      onMouseleave: r[1] || (r[1] = (o) => l.$emit("mouseleave", o))
+    }), [
+      G(e(X), {
+        trapped: e(p),
+        "trap-on-focus-in": !0,
+        "focus-trap-el": e(a),
+        "focus-start-el": e(E),
+        onFocusAfterTrapped: e(C),
+        onFocusAfterReleased: e(B),
+        onFocusin: e(A),
+        onFocusoutPrevented: e(T),
+        onReleaseRequested: e(g)
+      }, {
+        default: H(() => [
+          Q(l.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["trapped", "focus-trap-el", "focus-start-el", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusin", "onFocusoutPrevented", "onReleaseRequested"])
+    ], 16));
+  }
+});
+export {
+  de as default
+};