vft 0.0.374 → 0.0.375

package/es/components/virtual-list/components/scrollbar.js

@@ -1,127 +1,180 @@
-import { defineComponent as C, computed as r, ref as E, reactive as N, unref as f, watch as k, onBeforeUnmount as O, h as x, withModifiers as _ } from "vue";
+import { defineComponent, computed, ref, reactive, unref, watch, onBeforeUnmount, h, withModifiers } from "vue";
 import "../../scrollbar/index.js";
 import "@vueuse/core";
 import "@vft/utils";
 import "../../config-provider/hooks/use-global-config.js";
 import "lodash-es";
-import { cAF as F, rAF as H } from "../../../utils/vue/raf.js";
-import { useNamespace as L } from "../../../hooks/use-namespace/index.js";
+import { cAF, rAF } from "../../../utils/vue/raf.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 { ScrollbarDirKey as G, HORIZONTAL as R, SCROLLBAR_MIN_SIZE as V } from "../defaults.js";
-import { virtualizedScrollbarProps as Z } from "../props.js";
-import { renderThumbStyle as $ } from "../utils.js";
-import { BAR_MAP as K } from "../../scrollbar/util.js";
-const st = C({
+import { ScrollbarDirKey, HORIZONTAL, SCROLLBAR_MIN_SIZE } from "../defaults.js";
+import { virtualizedScrollbarProps } from "../props.js";
+import { renderThumbStyle } from "../utils.js";
+import { BAR_MAP } from "../../scrollbar/util.js";
+const ScrollBar = defineComponent({
   name: "ElVirtualScrollBar",
-  props: Z,
+  props: virtualizedScrollbarProps,
   emits: ["scroll", "start-move", "stop-move"],
-  setup(e, { emit: u }) {
-    const S = r(() => e.startGap + e.endGap), I = L("virtual-scrollbar"), A = L("scrollbar"), h = E(), a = E();
-    let M = null, g = null;
-    const n = N({
-      isDragging: !1,
+  setup(props, { emit }) {
+    const GAP = computed(() => props.startGap + props.endGap);
+    const nsVirtualScrollbar = useNamespace("virtual-scrollbar");
+    const nsScrollbar = useNamespace("scrollbar");
+    const trackRef = ref();
+    const thumbRef = ref();
+    let frameHandle = null;
+    let onselectstartStore = null;
+    const state = reactive({
+      isDragging: false,
       traveled: 0
-    }), o = r(() => K[e.layout]), s = r(() => e.clientSize - f(S)), B = r(() => ({
+    });
+    const bar = computed(() => BAR_MAP[props.layout]);
+    const trackSize = computed(() => props.clientSize - unref(GAP));
+    const trackStyle = computed(() => ({
       position: "absolute",
-      width: `${R === e.layout ? s.value : e.scrollbarSize}px`,
-      height: `${R === e.layout ? e.scrollbarSize : s.value}px`,
-      [G[e.layout]]: "2px",
+      width: `${HORIZONTAL === props.layout ? trackSize.value : props.scrollbarSize}px`,
+      height: `${HORIZONTAL === props.layout ? props.scrollbarSize : trackSize.value}px`,
+      [ScrollbarDirKey[props.layout]]: "2px",
       right: "2px",
       bottom: "2px",
       borderRadius: "4px"
-    })), b = r(() => {
-      const t = e.ratio;
-      if (t >= 100)
+    }));
+    const thumbSize = computed(() => {
+      const ratio = props.ratio;
+      if (ratio >= 100) {
         return Number.POSITIVE_INFINITY;
-      if (t >= 50)
-        return t * s.value / 100;
-      const l = s.value / 3;
+      }
+      if (ratio >= 50) {
+        return ratio * trackSize.value / 100;
+      }
+      const SCROLLBAR_MAX_SIZE = trackSize.value / 3;
       return Math.floor(
         Math.min(
-          Math.max(t * s.value, V),
-          l
+          Math.max(ratio * trackSize.value, SCROLLBAR_MIN_SIZE),
+          SCROLLBAR_MAX_SIZE
         )
       );
-    }), T = r(() => {
-      if (!Number.isFinite(b.value))
+    });
+    const thumbStyle = computed(() => {
+      if (!Number.isFinite(thumbSize.value)) {
         return {
           display: "none"
         };
-      const t = `${b.value}px`;
-      return $(
+      }
+      const thumb = `${thumbSize.value}px`;
+      const style = renderThumbStyle(
         {
-          bar: o.value,
-          size: t,
-          move: n.traveled
+          bar: bar.value,
+          size: thumb,
+          move: state.traveled
         },
-        e.layout
+        props.layout
       );
-    }), i = r(
-      () => Math.ceil(e.clientSize - b.value - f(S))
-    ), z = () => {
-      window.addEventListener("mousemove", v), window.addEventListener("mouseup", c);
-      const t = f(a);
-      t && (g = document.onselectstart, document.onselectstart = () => !1, t.addEventListener("touchmove", v, { passive: !0 }), t.addEventListener("touchend", c));
-    }, p = () => {
-      window.removeEventListener("mousemove", v), window.removeEventListener("mouseup", c), document.onselectstart = g, g = null;
-      const t = f(a);
-      t && (t.removeEventListener("touchmove", v), t.removeEventListener("touchend", c));
-    }, y = (t) => {
-      t.stopImmediatePropagation(), !(t.ctrlKey || [1, 2].includes(t.button)) && (n.isDragging = !0, n[o.value.axis] = t.currentTarget[o.value.offset] - (t[o.value.client] - t.currentTarget.getBoundingClientRect()[o.value.direction]), u("start-move"), z());
-    }, c = () => {
-      n.isDragging = !1, n[o.value.axis] = 0, u("stop-move"), p();
-    }, v = (t) => {
-      const { isDragging: l } = n;
-      if (!l || !a.value || !h.value) return;
-      const m = n[o.value.axis];
-      if (!m) return;
-      F(M);
-      const d = (h.value.getBoundingClientRect()[o.value.direction] - t[o.value.client]) * -1, P = a.value[o.value.offset] - m, w = d - P;
-      M = H(() => {
-        n.traveled = Math.max(0, Math.min(w, i.value)), u("scroll", w, i.value);
+      return style;
+    });
+    const totalSteps = computed(
+      () => Math.ceil(props.clientSize - thumbSize.value - unref(GAP))
+    );
+    const attachEvents = () => {
+      window.addEventListener("mousemove", onMouseMove);
+      window.addEventListener("mouseup", onMouseUp);
+      const thumbEl = unref(thumbRef);
+      if (!thumbEl) return;
+      onselectstartStore = document.onselectstart;
+      document.onselectstart = () => false;
+      thumbEl.addEventListener("touchmove", onMouseMove, { passive: true });
+      thumbEl.addEventListener("touchend", onMouseUp);
+    };
+    const detachEvents = () => {
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+      document.onselectstart = onselectstartStore;
+      onselectstartStore = null;
+      const thumbEl = unref(thumbRef);
+      if (!thumbEl) return;
+      thumbEl.removeEventListener("touchmove", onMouseMove);
+      thumbEl.removeEventListener("touchend", onMouseUp);
+    };
+    const onThumbMouseDown = (e) => {
+      e.stopImmediatePropagation();
+      if (e.ctrlKey || [1, 2].includes(e.button)) {
+        return;
+      }
+      state.isDragging = true;
+      state[bar.value.axis] = e.currentTarget[bar.value.offset] - (e[bar.value.client] - e.currentTarget.getBoundingClientRect()[bar.value.direction]);
+      emit("start-move");
+      attachEvents();
+    };
+    const onMouseUp = () => {
+      state.isDragging = false;
+      state[bar.value.axis] = 0;
+      emit("stop-move");
+      detachEvents();
+    };
+    const onMouseMove = (e) => {
+      const { isDragging } = state;
+      if (!isDragging) return;
+      if (!thumbRef.value || !trackRef.value) return;
+      const prevPage = state[bar.value.axis];
+      if (!prevPage) return;
+      cAF(frameHandle);
+      const offset = (trackRef.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
+      const thumbClickPosition = thumbRef.value[bar.value.offset] - prevPage;
+      const distance = offset - thumbClickPosition;
+      frameHandle = rAF(() => {
+        state.traveled = Math.max(0, Math.min(distance, totalSteps.value));
+        emit("scroll", distance, totalSteps.value);
       });
-    }, D = (t) => {
-      const l = Math.abs(
-        t.target.getBoundingClientRect()[o.value.direction] - t[o.value.client]
-      ), m = a.value[o.value.offset] / 2, d = l - m;
-      n.traveled = Math.max(0, Math.min(d, i.value)), u("scroll", d, i.value);
     };
-    return k(
-      () => e.scrollFrom,
-      (t) => {
-        n.isDragging || (n.traveled = Math.ceil(t * i.value));
+    const clickTrackHandler = (e) => {
+      const offset = Math.abs(
+        e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]
+      );
+      const thumbHalf = thumbRef.value[bar.value.offset] / 2;
+      const distance = offset - thumbHalf;
+      state.traveled = Math.max(0, Math.min(distance, totalSteps.value));
+      emit("scroll", distance, totalSteps.value);
+    };
+    watch(
+      () => props.scrollFrom,
+      (v) => {
+        if (state.isDragging) return;
+        state.traveled = Math.ceil(v * totalSteps.value);
       }
-    ), O(() => {
-      p();
-    }), () => x(
-      "div",
-      {
-        role: "presentation",
-        ref: h,
-        class: [
-          I.b(),
-          e.class,
-          (e.alwaysOn || n.isDragging) && "always-on"
-        ],
-        style: B.value,
-        onMousedown: _(D, ["stop", "prevent"]),
-        onTouchstartPrevent: y
-      },
-      x(
+    );
+    onBeforeUnmount(() => {
+      detachEvents();
+    });
+    return () => {
+      return h(
         "div",
         {
-          ref: a,
-          class: A.e("thumb"),
-          style: T.value,
-          onMousedown: y
+          role: "presentation",
+          ref: trackRef,
+          class: [
+            nsVirtualScrollbar.b(),
+            props.class,
+            (props.alwaysOn || state.isDragging) && "always-on"
+          ],
+          style: trackStyle.value,
+          onMousedown: withModifiers(clickTrackHandler, ["stop", "prevent"]),
+          onTouchstartPrevent: onThumbMouseDown
         },
-        []
-      )
-    );
+        h(
+          "div",
+          {
+            ref: thumbRef,
+            class: nsScrollbar.e("thumb"),
+            style: thumbStyle.value,
+            onMousedown: onThumbMouseDown
+          },
+          []
+        )
+      );
+    };
   }
 });
 export {
-  st as default
+  ScrollBar as default
 };

package/es/components/virtual-list/defaults.js

@@ -1,29 +1,48 @@
-const n = 50, c = "itemRendered", s = "scroll", T = "forward", E = "backward", _ = "auto", e = "smart", R = "start", r = "center", A = "end", t = "horizontal", o = "vertical", L = "ltr", N = "rtl", S = "negative", i = "positive-ascending", I = "positive-descending", a = {
-  [t]: "height",
-  [o]: "width"
-}, l = {
-  [t]: "left",
-  [o]: "top"
-}, O = 20;
+const DEFAULT_DYNAMIC_LIST_ITEM_SIZE = 50;
+const ITEM_RENDER_EVT = "itemRendered";
+const SCROLL_EVT = "scroll";
+const FORWARD = "forward";
+const BACKWARD = "backward";
+const AUTO_ALIGNMENT = "auto";
+const SMART_ALIGNMENT = "smart";
+const START_ALIGNMENT = "start";
+const CENTERED_ALIGNMENT = "center";
+const END_ALIGNMENT = "end";
+const HORIZONTAL = "horizontal";
+const VERTICAL = "vertical";
+const LTR = "ltr";
+const RTL = "rtl";
+const RTL_OFFSET_NAG = "negative";
+const RTL_OFFSET_POS_ASC = "positive-ascending";
+const RTL_OFFSET_POS_DESC = "positive-descending";
+const ScrollbarSizeKey = {
+  [HORIZONTAL]: "height",
+  [VERTICAL]: "width"
+};
+const ScrollbarDirKey = {
+  [HORIZONTAL]: "left",
+  [VERTICAL]: "top"
+};
+const SCROLLBAR_MIN_SIZE = 20;
 export {
-  _ as AUTO_ALIGNMENT,
-  E as BACKWARD,
-  r as CENTERED_ALIGNMENT,
-  n as DEFAULT_DYNAMIC_LIST_ITEM_SIZE,
-  A as END_ALIGNMENT,
-  T as FORWARD,
-  t as HORIZONTAL,
-  c as ITEM_RENDER_EVT,
-  L as LTR,
-  N as RTL,
-  S as RTL_OFFSET_NAG,
-  i as RTL_OFFSET_POS_ASC,
-  I as RTL_OFFSET_POS_DESC,
-  O as SCROLLBAR_MIN_SIZE,
-  s as SCROLL_EVT,
-  e as SMART_ALIGNMENT,
-  R as START_ALIGNMENT,
-  l as ScrollbarDirKey,
-  a as ScrollbarSizeKey,
-  o as VERTICAL
+  AUTO_ALIGNMENT,
+  BACKWARD,
+  CENTERED_ALIGNMENT,
+  DEFAULT_DYNAMIC_LIST_ITEM_SIZE,
+  END_ALIGNMENT,
+  FORWARD,
+  HORIZONTAL,
+  ITEM_RENDER_EVT,
+  LTR,
+  RTL,
+  RTL_OFFSET_NAG,
+  RTL_OFFSET_POS_ASC,
+  RTL_OFFSET_POS_DESC,
+  SCROLLBAR_MIN_SIZE,
+  SCROLL_EVT,
+  SMART_ALIGNMENT,
+  START_ALIGNMENT,
+  ScrollbarDirKey,
+  ScrollbarSizeKey,
+  VERTICAL
 };

package/es/components/virtual-list/hooks/use-cache.js

@@ -1,13 +1,14 @@
-import { getCurrentInstance as r, computed as t } from "vue";
-import { memoize as m } from "lodash-es";
-import p from "memoize-one";
-const a = () => {
-  const o = r().proxy.$props;
-  return t(() => {
-    const e = (c, s, _) => ({});
-    return o.perfMode ? m(e) : p(e);
+import { getCurrentInstance, computed } from "vue";
+import { memoize } from "lodash-es";
+import memoOne from "memoize-one";
+const useCache = () => {
+  const vm = getCurrentInstance();
+  const props = vm.proxy.$props;
+  return computed(() => {
+    const _getItemStyleCache = (_, __, ___) => ({});
+    return props.perfMode ? memoize(_getItemStyleCache) : memoOne(_getItemStyleCache);
   });
 };
 export {
-  a as useCache
+  useCache
 };

package/es/components/virtual-list/hooks/use-grid-wheel.js

@@ -3,24 +3,45 @@ import "@vft/utils";
 import "../../config-provider/hooks/use-global-config.js";
 import "vue";
 import "lodash-es";
-import { cAF as c, rAF as m } from "../../../utils/vue/raf.js";
-const W = ({ atXEndEdge: s, atXStartEdge: f, atYEndEdge: i, atYStartEdge: d }, h) => {
-  let n = null, r = 0, a = 0;
-  const o = (l, t) => {
-    const e = l <= 0 && f.value || l >= 0 && s.value, u = t <= 0 && d.value || t >= 0 && i.value;
-    return e && u;
+import { cAF, rAF } from "../../../utils/vue/raf.js";
+const useGridWheel = ({ atXEndEdge, atXStartEdge, atYEndEdge, atYStartEdge }, onWheelDelta) => {
+  let frameHandle = null;
+  let xOffset = 0;
+  let yOffset = 0;
+  const hasReachedEdge = (x, y) => {
+    const xEdgeReached = x <= 0 && atXStartEdge.value || x >= 0 && atXEndEdge.value;
+    const yEdgeReached = y <= 0 && atYStartEdge.value || y >= 0 && atYEndEdge.value;
+    return xEdgeReached && yEdgeReached;
   };
-  return {
-    hasReachedEdge: o,
-    onWheel: (l) => {
-      c(n);
-      let t = l.deltaX, e = l.deltaY;
-      Math.abs(t) > Math.abs(e) ? e = 0 : t = 0, l.shiftKey && e !== 0 && (t = e, e = 0), !(o(r, a) && o(r + t, a + e)) && (r += t, a += e, l.preventDefault(), n = m(() => {
-        h(r, a), r = 0, a = 0;
-      }));
+  const onWheel = (e) => {
+    cAF(frameHandle);
+    let x = e.deltaX;
+    let y = e.deltaY;
+    if (Math.abs(x) > Math.abs(y)) {
+      y = 0;
+    } else {
+      x = 0;
+    }
+    if (e.shiftKey && y !== 0) {
+      x = y;
+      y = 0;
     }
+    if (hasReachedEdge(xOffset, yOffset) && hasReachedEdge(xOffset + x, yOffset + y))
+      return;
+    xOffset += x;
+    yOffset += y;
+    e.preventDefault();
+    frameHandle = rAF(() => {
+      onWheelDelta(xOffset, yOffset);
+      xOffset = 0;
+      yOffset = 0;
+    });
+  };
+  return {
+    hasReachedEdge,
+    onWheel
   };
 };
 export {
-  W as useGridWheel
+  useGridWheel
 };

package/es/components/virtual-list/hooks/use-wheel.js

@@ -1,27 +1,39 @@
 import "@vueuse/core";
-import { isFirefox as i } from "@vft/utils";
+import { isFirefox } from "@vft/utils";
 import "../../config-provider/hooks/use-global-config.js";
 import "vue";
 import "lodash-es";
-import { cAF as m, rAF as c } from "../../../utils/vue/raf.js";
-import { VERTICAL as d, HORIZONTAL as u } from "../defaults.js";
-const p = {
-  [u]: "deltaX",
-  [d]: "deltaY"
-}, W = ({ atEndEdge: n, atStartEdge: l, layout: s }, f) => {
-  let a, e = 0;
-  const o = (t) => t < 0 && l.value || t > 0 && n.value;
-  return {
-    hasReachedEdge: o,
-    onWheel: (t) => {
-      m(a);
-      const r = t[p[s.value]];
-      o(e) && o(e + r) || (e += r, i() || t.preventDefault(), a = c(() => {
-        f(e), e = 0;
-      }));
+import { cAF, rAF } from "../../../utils/vue/raf.js";
+import { VERTICAL, HORIZONTAL } from "../defaults.js";
+const LayoutKeys = {
+  [HORIZONTAL]: "deltaX",
+  [VERTICAL]: "deltaY"
+};
+const useWheel = ({ atEndEdge, atStartEdge, layout }, onWheelDelta) => {
+  let frameHandle;
+  let offset = 0;
+  const hasReachedEdge = (offset2) => {
+    const edgeReached = offset2 < 0 && atStartEdge.value || offset2 > 0 && atEndEdge.value;
+    return edgeReached;
+  };
+  const onWheel = (e) => {
+    cAF(frameHandle);
+    const newOffset = e[LayoutKeys[layout.value]];
+    if (hasReachedEdge(offset) && hasReachedEdge(offset + newOffset)) return;
+    offset += newOffset;
+    if (!isFirefox()) {
+      e.preventDefault();
     }
+    frameHandle = rAF(() => {
+      onWheelDelta(offset);
+      offset = 0;
+    });
+  };
+  return {
+    hasReachedEdge,
+    onWheel
   };
 };
 export {
-  W as default
+  useWheel as default
 };

package/es/components/virtual-list/index.js

@@ -1,15 +1,15 @@
-import { default as e } from "./components/fixed-size-list.js";
-import { default as a } from "./components/dynamic-size-list.js";
-import { default as d } from "./components/fixed-size-grid.js";
-import { default as l } from "./components/dynamic-size-grid.js";
-import { virtualizedGridProps as p, virtualizedListProps as u, virtualizedProps as z, virtualizedScrollbarProps as m } from "./props.js";
+import { default as default2 } from "./components/fixed-size-list.js";
+import { default as default3 } from "./components/dynamic-size-list.js";
+import { default as default4 } from "./components/fixed-size-grid.js";
+import { default as default5 } from "./components/dynamic-size-grid.js";
+import { virtualizedGridProps, virtualizedListProps, virtualizedProps, virtualizedScrollbarProps } from "./props.js";
 export {
-  l as DynamicSizeGrid,
-  a as DynamicSizeList,
-  d as FixedSizeGrid,
-  e as FixedSizeList,
-  p as virtualizedGridProps,
-  u as virtualizedListProps,
-  z as virtualizedProps,
-  m as virtualizedScrollbarProps
+  default5 as DynamicSizeGrid,
+  default3 as DynamicSizeList,
+  default4 as FixedSizeGrid,
+  default2 as FixedSizeList,
+  virtualizedGridProps,
+  virtualizedListProps,
+  virtualizedProps,
+  virtualizedScrollbarProps
 };