@vuetify/nightly 3.2.0-dev-20230405.0 → 3.2.0-dev-20230407.0

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.2.0-dev-20230405.0
+* Vuetify v3.2.0-dev-20230407.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -17993,6 +17993,177 @@
     }
   });
 
+  const VVirtualScrollItem = genericComponent()({
+    name: 'VVirtualScrollItem',
+    props: {
+      dynamicHeight: Boolean
+    },
+    emits: {
+      'update:height': height => true
+    },
+    setup(props, _ref) {
+      let {
+        emit,
+        slots
+      } = _ref;
+      const {
+        resizeRef,
+        contentRect
+      } = useResizeObserver();
+      useToggleScope(() => props.dynamicHeight, () => {
+        vue.watch(() => contentRect.value?.height, height => {
+          if (height != null) emit('update:height', height);
+        });
+      });
+      function updateHeight() {
+        if (props.dynamicHeight && contentRect.value) {
+          emit('update:height', contentRect.value.height);
+        }
+      }
+      vue.onUpdated(updateHeight);
+      useRender(() => vue.createVNode("div", {
+        "ref": props.dynamicHeight ? resizeRef : undefined,
+        "class": "v-virtual-scroll__item"
+      }, [slots.default?.()]));
+    }
+  });
+
+  // Types
+
+  const UP = -1;
+  const DOWN = 1;
+  const VVirtualScroll = genericComponent()({
+    name: 'VVirtualScroll',
+    props: {
+      items: {
+        type: Array,
+        default: () => []
+      },
+      itemHeight: [Number, String],
+      visibleItems: [Number, String],
+      ...makeDimensionProps()
+    },
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
+      const first = vue.ref(0);
+      const baseItemHeight = vue.ref(props.itemHeight);
+      const itemHeight = vue.computed({
+        get: () => parseInt(baseItemHeight.value ?? 0, 10),
+        set(val) {
+          baseItemHeight.value = val;
+        }
+      });
+      const rootEl = vue.ref();
+      const {
+        resizeRef,
+        contentRect
+      } = useResizeObserver();
+      vue.watchEffect(() => {
+        resizeRef.value = rootEl.value;
+      });
+      const display = useDisplay();
+      const sizeMap = new Map();
+      let sizes = createRange(props.items.length).map(() => itemHeight.value);
+      const visibleItems = vue.computed(() => {
+        return props.visibleItems ? parseInt(props.visibleItems, 10) : Math.max(12, Math.ceil((contentRect.value?.height ?? display.height.value) / itemHeight.value * 1.7 + 1));
+      });
+      function handleItemResize(index, height) {
+        itemHeight.value = Math.max(itemHeight.value, height);
+        sizes[index] = height;
+        sizeMap.set(props.items[index], height);
+      }
+      function calculateOffset(index) {
+        return sizes.slice(0, index).reduce((curr, value) => curr + (value || itemHeight.value), 0);
+      }
+      function calculateMidPointIndex(scrollTop) {
+        let start = 0;
+        let end = props.items.length;
+        while (start <= end) {
+          const middle = start + Math.floor((end - start) / 2);
+          const middleOffset = calculateOffset(middle);
+          if (middleOffset === scrollTop) {
+            return middle;
+          } else if (middleOffset < scrollTop) {
+            start = middle + 1;
+          } else if (middleOffset > scrollTop) {
+            end = middle - 1;
+          }
+        }
+        return start;
+      }
+      let lastScrollTop = 0;
+      function handleScroll() {
+        if (!rootEl.value || !contentRect.value) return;
+        const height = contentRect.value.height;
+        const scrollTop = rootEl.value.scrollTop;
+        const direction = scrollTop < lastScrollTop ? UP : DOWN;
+        const midPointIndex = calculateMidPointIndex(scrollTop + height / 2);
+        const buffer = Math.round(visibleItems.value / 3);
+        if (direction === UP && midPointIndex <= first.value + buffer * 2 - 1) {
+          first.value = clamp(midPointIndex - buffer, 0, props.items.length);
+        } else if (direction === DOWN && midPointIndex >= first.value + buffer * 2 - 1) {
+          first.value = clamp(midPointIndex - buffer, 0, props.items.length - visibleItems.value);
+        }
+        lastScrollTop = rootEl.value.scrollTop;
+      }
+      function scrollToIndex(index) {
+        if (!rootEl.value) return;
+        const offset = calculateOffset(index);
+        rootEl.value.scrollTop = offset;
+      }
+      const last = vue.computed(() => Math.min(props.items.length, first.value + visibleItems.value));
+      const computedItems = vue.computed(() => props.items.slice(first.value, last.value));
+      const paddingTop = vue.computed(() => calculateOffset(first.value));
+      const paddingBottom = vue.computed(() => calculateOffset(props.items.length) - calculateOffset(last.value));
+      const {
+        dimensionStyles
+      } = useDimension(props);
+      vue.onMounted(() => {
+        if (!itemHeight.value) {
+          // If itemHeight prop is not set, then calculate an estimated height from the average of inital items
+          itemHeight.value = sizes.slice(first.value, last.value).reduce((curr, height) => curr + height, 0) / visibleItems.value;
+        }
+      });
+      vue.watch(() => props.items.length, () => {
+        sizes = createRange(props.items.length).map(() => itemHeight.value);
+        sizeMap.forEach((height, item) => {
+          const index = props.items.indexOf(item);
+          if (index === -1) {
+            sizeMap.delete(item);
+          } else {
+            sizes[index] = height;
+          }
+        });
+      });
+      useRender(() => vue.createVNode("div", {
+        "ref": rootEl,
+        "class": "v-virtual-scroll",
+        "onScroll": handleScroll,
+        "style": dimensionStyles.value
+      }, [vue.createVNode("div", {
+        "class": "v-virtual-scroll__container",
+        "style": {
+          paddingTop: convertToUnit(paddingTop.value),
+          paddingBottom: convertToUnit(paddingBottom.value)
+        }
+      }, [computedItems.value.map((item, index) => vue.createVNode(VVirtualScrollItem, {
+        "key": index,
+        "dynamicHeight": !props.itemHeight,
+        "onUpdate:height": height => handleItemResize(index + first.value, height)
+      }, {
+        default: () => [slots.default?.({
+          item,
+          index: index + first.value
+        })]
+      }))])]));
+      return {
+        scrollToIndex
+      };
+    }
+  });
+
   var components = /*#__PURE__*/Object.freeze({
     __proto__: null,
     VAlert: VAlert,
@@ -18125,6 +18296,7 @@
     VToolbarTitle: VToolbarTitle,
     VTooltip: VTooltip,
     VValidation: VValidation,
+    VVirtualScroll: VVirtualScroll,
     VWindow: VWindow,
     VWindowItem: VWindowItem
   });
@@ -18337,7 +18509,7 @@
       locale
     };
   }
-  const version$1 = "3.2.0-dev-20230405.0";
+  const version$1 = "3.2.0-dev-20230407.0";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -18357,7 +18529,7 @@
       ...options
     });
   };
-  const version = "3.2.0-dev-20230405.0";
+  const version = "3.2.0-dev-20230407.0";
   createVuetify.version = version;
 
   exports.components = components;