vuetify 3.1.3 → 3.1.4

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.1.3
+* Vuetify v3.1.4
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -2929,12 +2929,13 @@
 
   // Types
 
+  const makeVToolbarTitleProps = propsFactory({
+    text: String,
+    ...makeTagProps()
+  }, 'v-toolbar-title');
   const VToolbarTitle = genericComponent()({
     name: 'VToolbarTitle',
-    props: {
-      text: String,
-      ...makeTagProps()
-    },
+    props: makeVToolbarTitleProps(),
     setup(props, _ref) {
       let {
         slots
@@ -3386,18 +3387,21 @@
     };
   }
 
+  // Types
+
+  const makeVBtnGroupProps = propsFactory({
+    divided: Boolean,
+    ...makeBorderProps(),
+    ...makeDensityProps(),
+    ...makeElevationProps(),
+    ...makeRoundedProps(),
+    ...makeTagProps(),
+    ...makeThemeProps(),
+    ...makeVariantProps()
+  }, 'v-btn-group');
   const VBtnGroup = defineComponent({
     name: 'VBtnGroup',
-    props: {
-      divided: Boolean,
-      ...makeBorderProps(),
-      ...makeDensityProps(),
-      ...makeElevationProps(),
-      ...makeRoundedProps(),
-      ...makeTagProps(),
-      ...makeThemeProps(),
-      ...makeVariantProps()
-    },
+    props: makeVBtnGroupProps(),
     setup(props, _ref) {
       let {
         slots
@@ -3435,6 +3439,9 @@
       });
     }
   });
+  function filterVBtnGroupProps(props) {
+    return pick(props, Object.keys(VBtnGroup.props));
+  }
 
   // Composables
 
@@ -3642,7 +3649,10 @@
   const VBtnToggleSymbol = Symbol.for('vuetify:v-btn-toggle');
   const VBtnToggle = genericComponent()({
     name: 'VBtnToggle',
-    props: makeGroupProps(),
+    props: {
+      ...makeVBtnGroupProps(),
+      ...makeGroupProps()
+    },
     emits: {
       'update:modelValue': value => true
     },
@@ -3659,9 +3669,10 @@
       } = useGroup(props, VBtnToggleSymbol);
       useRender(() => {
         var _slots$default;
-        return vue.createVNode(VBtnGroup, {
+        const [btnGroupProps] = filterVBtnGroupProps(props);
+        return vue.createVNode(VBtnGroup, vue.mergeProps({
           "class": "v-btn-toggle"
-        }, {
+        }, btnGroupProps), {
           default: () => [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, {
             isSelected,
             next,
@@ -4116,9 +4127,6 @@
     el.style.transform = value;
     el.style.webkitTransform = value;
   }
-  function opacity(el, value) {
-    el.style.opacity = `calc(${value} * var(--v-theme-overlay-multiplier))`;
-  }
   function isTouchEvent(e) {
     return e.constructor.name === 'TouchEvent';
   }
@@ -4194,13 +4202,11 @@
       animation.classList.add('v-ripple__animation--enter');
       animation.classList.add('v-ripple__animation--visible');
       transform(animation, `translate(${x}, ${y}) scale3d(${scale},${scale},${scale})`);
-      opacity(animation, 0);
       animation.dataset.activated = String(performance.now());
       setTimeout(() => {
         animation.classList.remove('v-ripple__animation--enter');
         animation.classList.add('v-ripple__animation--in');
         transform(animation, `translate(${centerX}, ${centerY}) scale3d(1,1,1)`);
-        opacity(animation, 0.08);
       }, 0);
     },
     hide(el) {
@@ -4215,14 +4221,14 @@
       setTimeout(() => {
         animation.classList.remove('v-ripple__animation--in');
         animation.classList.add('v-ripple__animation--out');
-        opacity(animation, 0);
         setTimeout(() => {
+          var _animation$parentNode;
           const ripples = el.getElementsByClassName('v-ripple__animation');
           if (ripples.length === 1 && el.dataset.previousPosition) {
             el.style.position = el.dataset.previousPosition;
             delete el.dataset.previousPosition;
           }
-          animation.parentNode && el.removeChild(animation.parentNode);
+          if (((_animation$parentNode = animation.parentNode) == null ? void 0 : _animation$parentNode.parentNode) === el) el.removeChild(animation.parentNode);
         }, 300);
       }, delay);
     }
@@ -5009,9 +5015,7 @@
 
   const VAppBarTitle = defineComponent({
     name: 'VAppBarTitle',
-    props: {
-      ...VToolbarTitle.props
-    },
+    props: makeVToolbarTitleProps(),
     setup(props, _ref) {
       let {
         slots
@@ -6837,6 +6841,9 @@
         emit,
         slots
       } = _ref;
+      const {
+        t
+      } = useLocale();
       const {
         borderClasses
       } = useBorder(props);
@@ -6973,6 +6980,7 @@
           }, {
             default: () => [vue.createVNode("div", {
               "class": "v-chip__close",
+              "aria-label": t(props.closeLabel),
               "onClick": onCloseClick
             }, [slots.close ? slots.close() : vue.createVNode(VIcon, null, null)])]
           })]
@@ -7458,7 +7466,8 @@
   };
   const useNestedItem = (id, isGroup) => {
     const parent = vue.inject(VNestedSymbol, emptyNested);
-    const computedId = vue.computed(() => id.value ?? Symbol(getUid()));
+    const uidSymbol = Symbol(getUid());
+    const computedId = vue.computed(() => id.value ?? uidSymbol);
     const item = {
       ...parent,
       id: computedId,
@@ -19058,7 +19067,7 @@
       return Math.min(itemsLength.value, startIndex.value + itemsPerPage.value);
     });
     const pageCount = vue.computed(() => {
-      if (itemsPerPage.value === -1) return 1;
+      if (itemsPerPage.value === -1 || itemsLength.value === 0) return 1;
       return Math.ceil(itemsLength.value / itemsPerPage.value);
     });
     vue.watchEffect(() => {
@@ -19161,7 +19170,7 @@
           "hide-details": true
         }, null)]), vue.createVNode("div", {
           "class": "v-data-table-footer__info"
-        }, [vue.createVNode("div", null, [(startIndex.value ?? -1) + 1, vue.createTextVNode(" - "), stopIndex.value ?? 0, vue.createTextVNode(" of "), itemsLength.value ?? 0])]), vue.createVNode("div", {
+        }, [vue.createVNode("div", null, [!itemsLength.value ? 0 : startIndex.value + 1, vue.createTextVNode(" - "), stopIndex.value, vue.createTextVNode(" of "), itemsLength.value])]), vue.createVNode("div", {
           "class": "v-data-table-footer__pagination"
         }, [vue.createVNode(VBtn, {
           "icon": props.firstIcon,
@@ -19229,18 +19238,12 @@
       page,
       itemsPerPage,
       sortBy,
-      startIndex,
-      stopIndex,
-      pageCount,
       groupBy
     } = _ref;
     const vm = getCurrentInstance('VDataTable');
     const options = vue.computed(() => ({
       page: page.value,
       itemsPerPage: itemsPerPage.value,
-      startIndex: startIndex.value,
-      stopIndex: stopIndex.value,
-      pageCount: pageCount.value,
       sortBy: sortBy.value,
       groupBy: groupBy.value
     }));
@@ -19344,8 +19347,7 @@
         page,
         itemsPerPage,
         startIndex,
-        stopIndex,
-        pageCount
+        stopIndex
       } = createPagination(props, flatItems);
       const {
         paginatedItems
@@ -19357,9 +19359,6 @@
         page,
         itemsPerPage,
         sortBy,
-        pageCount,
-        startIndex,
-        stopIndex,
         groupBy
       });
       provideDefaults({
@@ -19554,9 +19553,6 @@
       useOptions({
         sortBy,
         page: vue.ref(1),
-        startIndex: vue.ref(0),
-        stopIndex: vue.computed(() => flatItems.value.length - 1),
-        pageCount: vue.ref(1),
         itemsPerPage: vue.ref(-1),
         groupBy
       });
@@ -19673,10 +19669,7 @@
       } = createGroupBy(props, groupBy, sortBy);
       const {
         page,
-        itemsPerPage,
-        startIndex,
-        stopIndex,
-        pageCount
+        itemsPerPage
       } = createPagination(props, items);
       const {
         flatItems
@@ -19686,9 +19679,6 @@
         page,
         itemsPerPage,
         sortBy,
-        startIndex,
-        stopIndex,
-        pageCount,
         groupBy
       });
       vue.provide('v-data-table', {
@@ -19750,12 +19740,23 @@
         slots
       } = _ref;
       const {
-        resizeRef
-      } = useResizeObserver(entries => {
-        if (!entries.length) return;
-        const contentRect = entries[0].contentRect;
-        emit('update:height', contentRect.height);
+        resizeRef,
+        contentRect
+      } = useResizeObserver();
+      useToggleScope(() => props.dynamicHeight, () => {
+        vue.watch(() => {
+          var _contentRect$value;
+          return (_contentRect$value = contentRect.value) == null ? void 0 : _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(() => {
         var _slots$default;
         return vue.createVNode("div", {
@@ -19777,15 +19778,8 @@
         type: Array,
         default: () => []
       },
-      itemKey: {
-        type: String,
-        default: 'value'
-      },
       itemHeight: [Number, String],
-      visibleItems: {
-        type: [Number, String],
-        default: 30
-      },
+      visibleItems: [Number, String],
       ...makeDimensionProps()
     },
     setup(props, _ref) {
@@ -19800,15 +19794,23 @@
           baseItemHeight.value = val;
         }
       });
-      const visibleItems = vue.computed(() => parseInt(props.visibleItems, 10));
       const rootEl = vue.ref();
-      const ids = new Map(props.items.map((item, index) => [getPropertyFromItem(item, props.itemKey, item), index]));
+      const {
+        resizeRef,
+        contentRect
+      } = useResizeObserver();
+      vue.watchEffect(() => {
+        resizeRef.value = rootEl.value;
+      });
+      const display = useDisplay();
       const sizes = createRange(props.items.length).map(() => itemHeight.value);
-      function handleItemResize(item, height) {
-        const index = ids.get(getPropertyFromItem(item, props.itemKey, item));
-        if (!index) return;
+      const visibleItems = vue.computed(() => {
+        var _contentRect$value;
+        return props.visibleItems ? parseInt(props.visibleItems, 10) : Math.max(12, Math.ceil((((_contentRect$value = contentRect.value) == null ? void 0 : _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;
-        if (!itemHeight.value) itemHeight.value = height;
       }
       function calculateOffset(index) {
         return sizes.slice(0, index).reduce((curr, value) => curr + (value || itemHeight.value), 0);
@@ -19831,18 +19833,24 @@
       }
       let lastScrollTop = 0;
       function handleScroll() {
-        if (!rootEl.value) return;
+        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);
+        const midPointIndex = calculateMidPointIndex(scrollTop + height / 2);
         const buffer = Math.round(visibleItems.value / 3);
-        if (direction === UP && midPointIndex <= first.value) {
+        if (direction === UP && midPointIndex <= first.value + buffer * 2 - 1) {
           first.value = Math.max(midPointIndex - buffer, 0);
-        } else if (direction === DOWN && midPointIndex >= first.value + buffer * 2) {
+        } else if (direction === DOWN && midPointIndex >= first.value + buffer * 2 - 1) {
           first.value = Math.min(Math.max(0, midPointIndex - buffer), 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));
@@ -19850,6 +19858,12 @@
       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;
+        }
+      });
       useRender(() => vue.createVNode("div", {
         "ref": rootEl,
         "class": "v-virtual-scroll",
@@ -19866,7 +19880,7 @@
         return vue.createVNode(VVirtualScrollItem, {
           "key": index,
           "dynamicHeight": !props.itemHeight,
-          "onUpdate:height": height => handleItemResize(item, height)
+          "onUpdate:height": height => handleItemResize(index + first.value, height)
         }, {
           default: () => [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, {
             item,
@@ -19874,6 +19888,9 @@
           })]
         });
       })])]));
+      return {
+        scrollToIndex
+      };
     }
   });
 
@@ -20016,6 +20033,7 @@
     VDataTableRow: VDataTableRow,
     VDataTableVirtual: VDataTableVirtual,
     VDataTableServer: VDataTableServer,
+    VDataTableFooter: VDataTableFooter,
     VVirtualScroll: VVirtualScroll
   });
 
@@ -20231,7 +20249,7 @@
       locale
     };
   }
-  const version$1 = "3.1.3";
+  const version$1 = "3.1.4";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -20244,7 +20262,7 @@
     }
   }
 
-  const version = "3.1.3";
+  const version = "3.1.4";
 
   const createVuetify = function () {
     let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};