vft 0.0.47 → 0.0.50

package/es/packages/components/roving-focus-group/roving-focus-item.vue2.js

@@ -0,0 +1,104 @@
+import { defineComponent as y, inject as l, ref as w, computed as d, unref as n, provide as R, nextTick as g } from "vue";
+import "../config-provider/hooks/use-global-config.js";
+import "@popperjs/core";
+import "lodash";
+import "../../hooks/use-z-index/index.js";
+import { useId as h } from "../../hooks/use-id/index.js";
+import "@vueuse/core";
+import "@vft/utils";
+import { composeEventHandlers as i } from "../../utils/event.js";
+import "../../utils/ns-cover.js";
+import { EVENT_CODE as k } from "../../constants/aria.js";
+import { VftCollectionItem as x, ROVING_FOCUS_COLLECTION_INJECTION_KEY as G } from "./types.js";
+import { ROVING_FOCUS_GROUP_INJECTION_KEY as K, ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY as U } from "./tokens.js";
+import { getFocusIntent as V, reorderArray as J, focusFirst as L } from "./utils.js";
+const $ = y({
+  components: {
+    RovingFocusCollectionItem: x
+  },
+  props: {
+    focusable: {
+      type: Boolean,
+      default: !0
+    },
+    active: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["mousedown", "focus", "keydown"],
+  setup(I, { emit: s }) {
+    const { currentTabbedId: O, loop: _, onItemFocus: m, onItemShiftTab: C } = l(
+      K,
+      void 0
+    ), { getItems: v } = l(
+      G,
+      void 0
+    ), r = h(), E = w(null), a = i(
+      (e) => {
+        s("mousedown", e);
+      },
+      (e) => {
+        I.focusable ? m(n(r)) : e.preventDefault();
+      }
+    ), f = i(
+      (e) => {
+        s("focus", e);
+      },
+      () => {
+        m(n(r));
+      }
+    ), u = i(
+      (e) => {
+        s("keydown", e);
+      },
+      (e) => {
+        const { key: T, shiftKey: b, target: F, currentTarget: p } = e;
+        if (T === k.tab && b) {
+          C();
+          return;
+        }
+        if (F !== p)
+          return;
+        const c = V(e);
+        if (c) {
+          e.preventDefault();
+          let o = v().filter(
+            (t) => t.focusable
+          ).map((t) => t.ref);
+          switch (c) {
+            case "last": {
+              o.reverse();
+              break;
+            }
+            case "prev":
+            case "next": {
+              c === "prev" && o.reverse();
+              const t = o.indexOf(p);
+              o = _.value ? J(o, t + 1) : o.slice(t + 1);
+              break;
+            }
+          }
+          g(() => {
+            L(o);
+          });
+        }
+      }
+    ), N = d(() => O.value === n(r));
+    return R(U, {
+      rovingFocusGroupItemRef: E,
+      tabIndex: d(() => n(N) ? 0 : -1),
+      handleMousedown: a,
+      handleFocus: f,
+      handleKeydown: u
+    }), {
+      id: r,
+      handleKeydown: u,
+      handleFocus: f,
+      handleMousedown: a
+    };
+  }
+});
+export {
+  $ as default
+};

package/es/packages/components/roving-focus-group/tokens.js

@@ -0,0 +1,5 @@
+const o = Symbol("vftRovingFocusGroup"), _ = Symbol("vftRovingFocusGroupItem");
+export {
+  o as ROVING_FOCUS_GROUP_INJECTION_KEY,
+  _ as ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY
+};

package/es/packages/components/roving-focus-group/types.js

@@ -0,0 +1,13 @@
+import { createCollectionWithScope as C } from "../collection/collection.js";
+const {
+  VftCollection: O,
+  VftCollectionItem: o,
+  COLLECTION_INJECTION_KEY: E,
+  COLLECTION_ITEM_INJECTION_KEY: N
+} = C("RovingFocusGroup");
+export {
+  E as ROVING_FOCUS_COLLECTION_INJECTION_KEY,
+  N as ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY,
+  O as VftCollection,
+  o as VftCollectionItem
+};

package/es/packages/components/roving-focus-group/utils.js

@@ -0,0 +1,36 @@
+import { EVENT_CODE as r } from "../../constants/aria.js";
+const c = {
+  ArrowLeft: "prev",
+  ArrowUp: "prev",
+  ArrowRight: "next",
+  ArrowDown: "next",
+  PageUp: "first",
+  Home: "first",
+  PageDown: "last",
+  End: "last"
+}, i = (t, e) => {
+  if (e !== "rtl")
+    return t;
+  switch (t) {
+    case r.right:
+      return r.left;
+    case r.left:
+      return r.right;
+    default:
+      return t;
+  }
+}, u = (t, e, n) => {
+  const o = i(t.key, n);
+  if (!(e === "vertical" && [r.left, r.right].includes(o)) && !(e === "horizontal" && [r.up, r.down].includes(o)))
+    return c[o];
+}, f = (t, e) => t.map((n, o) => t[(o + e) % t.length]), l = (t) => {
+  const { activeElement: e } = document;
+  for (const n of t)
+    if (n === e || (n.focus(), e !== document.activeElement))
+      return;
+};
+export {
+  l as focusFirst,
+  u as getFocusIntent,
+  f as reorderArray
+};

package/es/packages/components/scrollbar/bar.vue.js

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

package/es/packages/components/scrollbar/bar.vue2.js

@@ -0,0 +1,41 @@
+import { defineComponent as u, ref as n, openBlock as h, createElementBlock as d, Fragment as v, createVNode as r } from "vue";
+import { GAP as s } from "./util.js";
+import c from "./thumb.vue2.js";
+const X = /* @__PURE__ */ u({
+  __name: "bar",
+  props: {
+    always: { type: Boolean, default: !0 },
+    width: null,
+    height: null,
+    ratioX: { default: 1 },
+    ratioY: { default: 1 }
+  },
+  setup(e, { expose: f }) {
+    const o = e, a = n(0), l = n(0);
+    return f({
+      handleScroll: (t) => {
+        if (t) {
+          const i = t.offsetHeight - s, m = t.offsetWidth - s;
+          l.value = t.scrollTop * 100 / i * o.ratioY, a.value = t.scrollLeft * 100 / m * o.ratioX;
+        }
+      }
+    }), (t, i) => (h(), d(v, null, [
+      r(c, {
+        move: a.value,
+        ratio: e.ratioX,
+        size: e.width,
+        always: e.always
+      }, null, 8, ["move", "ratio", "size", "always"]),
+      r(c, {
+        move: l.value,
+        ratio: e.ratioY,
+        size: e.height,
+        vertical: "",
+        always: e.always
+      }, null, 8, ["move", "ratio", "size", "always"])
+    ], 64));
+  }
+});
+export {
+  X as default
+};

package/es/packages/components/scrollbar/constants.js

@@ -0,0 +1,6 @@
+const o = Symbol(
+  "scrollbarContextKey"
+);
+export {
+  o as scrollbarContextKey
+};

package/es/packages/components/scrollbar/index.js

@@ -0,0 +1,21 @@
+import { withInstall as r } from "../../utils/vue/install.js";
+import "vue";
+import "@vft/utils";
+import "lodash";
+import "@vueuse/core";
+import "../../utils/ns-cover.js";
+import o from "./scrollbar.vue2.js";
+import { BAR_MAP as A, GAP as _, renderThumbStyle as d } from "./util.js";
+import "../config-provider/hooks/use-global-config.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+import { scrollbarContextKey as u } from "./constants.js";
+const c = r(o);
+export {
+  A as BAR_MAP,
+  _ as GAP,
+  c as VftScrollbar,
+  c as default,
+  d as renderThumbStyle,
+  u as scrollbarContextKey
+};

package/es/packages/components/scrollbar/scrollbar.vue.js

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

package/es/packages/components/scrollbar/scrollbar.vue2.js

@@ -0,0 +1,145 @@
+import { defineComponent as L, ref as a, computed as w, watch as E, nextTick as N, provide as D, reactive as G, onMounted as X, onUpdated as Y, openBlock as g, createElementBlock as q, normalizeClass as b, unref as m, createElementVNode as F, normalizeStyle as R, createBlock as B, resolveDynamicComponent as I, withCtx as J, renderSlot as Q, createCommentVNode as Z } from "vue";
+import { useResizeObserver as ee, useEventListener as te } from "@vueuse/core";
+import { addUnit as W, isObject as le, isNumber as v } from "@vft/utils";
+import { debugWarn as M } from "../../utils/error.js";
+import "lodash";
+import "../../utils/ns-cover.js";
+import { useNamespace as oe } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+import { GAP as h } from "./util.js";
+import ae from "./bar.vue2.js";
+import { scrollbarContextKey as re } from "./constants.js";
+const S = "VftScrollbar", ie = L({
+  name: S
+}), ge = /* @__PURE__ */ L({
+  ...ie,
+  props: {
+    height: null,
+    maxHeight: null,
+    native: { type: Boolean },
+    wrapStyle: null,
+    wrapClass: null,
+    viewClass: null,
+    viewStyle: null,
+    noresize: { type: Boolean },
+    tag: { default: "div" },
+    always: { type: Boolean },
+    minSize: { default: 20 }
+  },
+  emits: ["scroll"],
+  setup(i, { expose: $, emit: K }) {
+    const l = i, s = oe("scrollbar");
+    let n, c;
+    const x = a(), t = a(), z = a(), C = a("0"), H = a("0"), d = a(), k = a(1), T = a(1), O = w(() => {
+      const e = {};
+      return l.height && (e.height = W(l.height)), l.maxHeight && (e.maxHeight = W(l.maxHeight)), [l.wrapStyle, e];
+    }), V = w(() => [
+      l.wrapClass,
+      s.e("wrap"),
+      { [s.em("wrap", "hidden-default")]: !l.native }
+    ]), A = w(() => [s.e("view"), l.viewClass]), _ = () => {
+      var e;
+      t.value && ((e = d.value) == null || e.handleScroll(t.value), K("scroll", {
+        scrollTop: t.value.scrollTop,
+        scrollLeft: t.value.scrollLeft
+      }));
+    };
+    function P(e, o) {
+      le(e) ? t.value.scrollTo(e) : v(e) && v(o) && t.value.scrollTo(e, o);
+    }
+    const U = (e) => {
+      if (!v(e)) {
+        M(S, "value must be a number");
+        return;
+      }
+      t.value.scrollTop = e;
+    }, j = (e) => {
+      if (!v(e)) {
+        M(S, "value must be a number");
+        return;
+      }
+      t.value.scrollLeft = e;
+    }, r = () => {
+      if (!t.value)
+        return;
+      const e = t.value.offsetHeight - h, o = t.value.offsetWidth - h, p = e ** 2 / t.value.scrollHeight, y = o ** 2 / t.value.scrollWidth, u = Math.max(p, l.minSize), f = Math.max(y, l.minSize);
+      k.value = p / (e - p) / (u / (e - u)), T.value = y / (o - y) / (f / (o - f)), H.value = u + h < e ? `${u}px` : "", C.value = f + h < o ? `${f}px` : "";
+    };
+    return E(
+      () => l.noresize,
+      (e) => {
+        e ? (n == null || n(), c == null || c()) : ({ stop: n } = ee(z, r), c = te("resize", r));
+      },
+      { immediate: !0 }
+    ), E(
+      () => [l.maxHeight, l.height],
+      () => {
+        l.native || N(() => {
+          var e;
+          r(), t.value && ((e = d.value) == null || e.handleScroll(t.value));
+        });
+      }
+    ), D(
+      re,
+      G({
+        scrollbarElement: x,
+        wrapElement: t
+      })
+    ), X(() => {
+      l.native || N(() => {
+        r();
+      });
+    }), Y(() => r()), $({
+      /** @description scrollbar wrap ref */
+      wrapRef: t,
+      /** @description update scrollbar state manually */
+      update: r,
+      /** @description scrolls to a particular set of coordinates */
+      scrollTo: P,
+      /** @description set distance to scroll top */
+      setScrollTop: U,
+      /** @description set distance to scroll left */
+      setScrollLeft: j,
+      /** @description handle scroll event */
+      handleScroll: _
+    }), (e, o) => (g(), q("div", {
+      ref_key: "scrollbarRef",
+      ref: x,
+      class: b(m(s).b())
+    }, [
+      F("div", {
+        ref_key: "wrapRef",
+        ref: t,
+        class: b(m(V)),
+        style: R(m(O)),
+        onScroll: _
+      }, [
+        (g(), B(I(i.tag), {
+          ref_key: "resizeRef",
+          ref: z,
+          class: b(m(A)),
+          style: R(i.viewStyle)
+        }, {
+          default: J(() => [
+            Q(e.$slots, "default")
+          ]),
+          _: 3
+        }, 8, ["class", "style"]))
+      ], 38),
+      i.native ? Z("", !0) : (g(), B(ae, {
+        key: 0,
+        ref_key: "barRef",
+        ref: d,
+        height: H.value,
+        width: C.value,
+        always: i.always,
+        "ratio-x": T.value,
+        "ratio-y": k.value
+      }, null, 8, ["height", "width", "always", "ratio-x", "ratio-y"]))
+    ], 2));
+  }
+});
+export {
+  ge as default
+};

package/es/packages/components/scrollbar/style/css.js

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

package/es/packages/components/scrollbar/style/index.js

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

package/es/packages/components/scrollbar/thumb.vue.js

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

package/es/packages/components/scrollbar/thumb.vue2.js

@@ -0,0 +1,111 @@
+import { defineComponent as T, inject as D, ref as v, computed as E, onBeforeUnmount as N, toRef as z, openBlock as A, createBlock as O, Transition as j, unref as s, withCtx as K, withDirectives as U, createElementVNode as C, normalizeClass as P, normalizeStyle as I, vShow as V } from "vue";
+import { useEventListener as k, isClient as q } from "@vueuse/core";
+import "@vft/utils";
+import { throwError as F } from "../../utils/error.js";
+import "lodash";
+import "../../utils/ns-cover.js";
+import { useNamespace as G } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+import { scrollbarContextKey as J } from "./constants.js";
+import { BAR_MAP as Q, renderThumbStyle as W } from "./util.js";
+const X = "Thumb", ue = /* @__PURE__ */ T({
+  __name: "thumb",
+  props: {
+    vertical: { type: Boolean },
+    size: null,
+    move: null,
+    ratio: null,
+    always: { type: Boolean }
+  },
+  setup(g) {
+    const u = g, o = D(J), c = G("scrollbar");
+    o || F(X, "can not inject scrollbar context");
+    const l = v(), a = v(), f = v({}), i = v(!1);
+    let m = !1, d = !1, p = q ? document.onselectstart : null;
+    const e = E(() => Q[u.vertical ? "vertical" : "horizontal"]), B = E(
+      () => W({
+        size: u.size,
+        move: u.move,
+        bar: e.value
+      })
+    ), w = E(
+      () => (
+        // offsetRatioX = original width of thumb / current width of thumb / ratioX
+        // offsetRatioY = original height of thumb / current height of thumb / ratioY
+        // instance height = wrap height - GAP
+        l.value[e.value.offset] ** 2 / o.wrapElement[e.value.scrollSize] / u.ratio / a.value[e.value.offset]
+      )
+    ), _ = (t) => {
+      var r;
+      if (t.stopPropagation(), t.ctrlKey || [1, 2].includes(t.button))
+        return;
+      (r = window.getSelection()) == null || r.removeAllRanges(), L(t);
+      const n = t.currentTarget;
+      n && (f.value[e.value.axis] = n[e.value.offset] - (t[e.value.client] - n.getBoundingClientRect()[e.value.direction]));
+    }, x = (t) => {
+      if (!a.value || !l.value || !o.wrapElement)
+        return;
+      const n = Math.abs(
+        t.target.getBoundingClientRect()[e.value.direction] - t[e.value.client]
+      ), r = a.value[e.value.offset] / 2, h = (n - r) * 100 * w.value / l.value[e.value.offset];
+      o.wrapElement[e.value.scroll] = h * o.wrapElement[e.value.scrollSize] / 100;
+    }, L = (t) => {
+      t.stopImmediatePropagation(), m = !0, document.addEventListener("mousemove", y), document.addEventListener("mouseup", b), p = document.onselectstart, document.onselectstart = () => !1;
+    }, y = (t) => {
+      if (!l.value || !a.value || m === !1)
+        return;
+      const n = f.value[e.value.axis];
+      if (!n)
+        return;
+      const r = (l.value.getBoundingClientRect()[e.value.direction] - t[e.value.client]) * -1, h = a.value[e.value.offset] - n, R = (r - h) * 100 * w.value / l.value[e.value.offset];
+      o.wrapElement[e.value.scroll] = R * o.wrapElement[e.value.scrollSize] / 100;
+    }, b = () => {
+      m = !1, f.value[e.value.axis] = 0, document.removeEventListener("mousemove", y), document.removeEventListener("mouseup", b), S(), d && (i.value = !1);
+    }, M = () => {
+      d = !1, i.value = !!u.size;
+    }, H = () => {
+      d = !0, i.value = m;
+    };
+    N(() => {
+      S(), document.removeEventListener("mouseup", b);
+    });
+    const S = () => {
+      document.onselectstart !== p && (document.onselectstart = p);
+    };
+    return k(
+      z(o, "scrollbarElement"),
+      "mousemove",
+      M
+    ), k(
+      z(o, "scrollbarElement"),
+      "mouseleave",
+      H
+    ), (t, n) => (A(), O(j, {
+      name: s(c).b("fade")
+    }, {
+      default: K(() => [
+        U(C("div", {
+          ref_key: "instance",
+          ref: l,
+          class: P([s(c).e("bar"), s(c).is(s(e).key)]),
+          onMousedown: x
+        }, [
+          C("div", {
+            ref_key: "thumb",
+            ref: a,
+            class: P(s(c).e("thumb")),
+            style: I(s(B)),
+            onMousedown: _
+          }, null, 38)
+        ], 34), [
+          [V, g.always || i.value]
+        ])
+      ]),
+      _: 1
+    }, 8, ["name"]));
+  }
+});
+export {
+  ue as default
+};

package/es/packages/components/scrollbar/util.js

@@ -0,0 +1,34 @@
+const i = 4, o = {
+  vertical: {
+    offset: "offsetHeight",
+    scroll: "scrollTop",
+    scrollSize: "scrollHeight",
+    size: "height",
+    key: "vertical",
+    axis: "Y",
+    client: "clientY",
+    direction: "top"
+  },
+  horizontal: {
+    offset: "offsetWidth",
+    scroll: "scrollLeft",
+    scrollSize: "scrollWidth",
+    size: "width",
+    key: "horizontal",
+    axis: "X",
+    client: "clientX",
+    direction: "left"
+  }
+}, s = ({
+  move: e,
+  size: l,
+  bar: t
+}) => ({
+  [t.size]: l,
+  transform: `translate${t.axis}(${e}%)`
+});
+export {
+  o as BAR_MAP,
+  i as GAP,
+  s as renderThumbStyle
+};

package/es/packages/components/search/index.js

@@ -0,0 +1,12 @@
+import { withInstall as t } from "../../utils/vue/install.js";
+import "vue";
+import "@vft/utils";
+import "lodash";
+import "@vueuse/core";
+import "../../utils/ns-cover.js";
+import o from "./search.vue2.js";
+const c = t(o);
+export {
+  c as VftSearch,
+  c as default
+};