vuetify 3.1.3 → 3.1.4

package/dist/vuetify-labs.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.1.3
+* Vuetify v3.1.4
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { ref, onBeforeUnmount, watch, readonly, reactive, computed, watchEffect, toRefs, capitalize, getCurrentInstance as getCurrentInstance$1, unref, provide, inject as inject$1, onScopeDispose, effectScope, shallowRef, defineComponent as defineComponent$1, camelize, h, onDeactivated, onActivated, onMounted, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, Fragment, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, cloneVNode, warn, toHandlers, Teleport, createTextVNode, onBeforeUpdate, vModelText } from 'vue';
+import { ref, onBeforeUnmount, watch, readonly, reactive, computed, watchEffect, toRefs, capitalize, getCurrentInstance as getCurrentInstance$1, unref, provide, inject as inject$1, onScopeDispose, effectScope, shallowRef, defineComponent as defineComponent$1, camelize, h, onDeactivated, onActivated, onMounted, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, Fragment, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, cloneVNode, warn, toHandlers, Teleport, createTextVNode, onBeforeUpdate, vModelText, onUpdated } from 'vue';
 
 const IN_BROWSER = typeof window !== 'undefined';
 const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
@@ -2925,12 +2925,13 @@ const makeTagProps = propsFactory({
 
 // 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
@@ -3382,18 +3383,21 @@ function useVariant(props) {
   };
 }
 
+// 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
@@ -3431,6 +3435,9 @@ const VBtnGroup = defineComponent({
     });
   }
 });
+function filterVBtnGroupProps(props) {
+  return pick(props, Object.keys(VBtnGroup.props));
+}
 
 // Composables
 
@@ -3638,7 +3645,10 @@ function getValues(items, ids) {
 const VBtnToggleSymbol = Symbol.for('vuetify:v-btn-toggle');
 const VBtnToggle = genericComponent()({
   name: 'VBtnToggle',
-  props: makeGroupProps(),
+  props: {
+    ...makeVBtnGroupProps(),
+    ...makeGroupProps()
+  },
   emits: {
     'update:modelValue': value => true
   },
@@ -3655,9 +3665,10 @@ const VBtnToggle = genericComponent()({
     } = useGroup(props, VBtnToggleSymbol);
     useRender(() => {
       var _slots$default;
-      return createVNode(VBtnGroup, {
+      const [btnGroupProps] = filterVBtnGroupProps(props);
+      return createVNode(VBtnGroup, mergeProps({
         "class": "v-btn-toggle"
-      }, {
+      }, btnGroupProps), {
         default: () => [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, {
           isSelected,
           next,
@@ -4112,9 +4123,6 @@ function transform(el, value) {
   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';
 }
@@ -4190,13 +4198,11 @@ const ripples = {
     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) {
@@ -4211,14 +4217,14 @@ const ripples = {
     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);
   }
@@ -5005,9 +5011,7 @@ const VToolbarItems = defineComponent({
 
 const VAppBarTitle = defineComponent({
   name: 'VAppBarTitle',
-  props: {
-    ...VToolbarTitle.props
-  },
+  props: makeVToolbarTitleProps(),
   setup(props, _ref) {
     let {
       slots
@@ -6833,6 +6837,9 @@ const VChip = defineComponent({
       emit,
       slots
     } = _ref;
+    const {
+      t
+    } = useLocale();
     const {
       borderClasses
     } = useBorder(props);
@@ -6969,6 +6976,7 @@ const VChip = defineComponent({
         }, {
           default: () => [createVNode("div", {
             "class": "v-chip__close",
+            "aria-label": t(props.closeLabel),
             "onClick": onCloseClick
           }, [slots.close ? slots.close() : createVNode(VIcon, null, null)])]
         })]
@@ -7454,7 +7462,8 @@ const useNested = props => {
 };
 const useNestedItem = (id, isGroup) => {
   const parent = inject$1(VNestedSymbol, emptyNested);
-  const computedId = computed(() => id.value ?? Symbol(getUid()));
+  const uidSymbol = Symbol(getUid());
+  const computedId = computed(() => id.value ?? uidSymbol);
   const item = {
     ...parent,
     id: computedId,
@@ -19054,7 +19063,7 @@ function createPagination(props, items) {
     return Math.min(itemsLength.value, startIndex.value + itemsPerPage.value);
   });
   const pageCount = computed(() => {
-    if (itemsPerPage.value === -1) return 1;
+    if (itemsPerPage.value === -1 || itemsLength.value === 0) return 1;
     return Math.ceil(itemsLength.value / itemsPerPage.value);
   });
   watchEffect(() => {
@@ -19157,7 +19166,7 @@ const VDataTableFooter = defineComponent({
         "hide-details": true
       }, null)]), createVNode("div", {
         "class": "v-data-table-footer__info"
-      }, [createVNode("div", null, [(startIndex.value ?? -1) + 1, createTextVNode(" - "), stopIndex.value ?? 0, createTextVNode(" of "), itemsLength.value ?? 0])]), createVNode("div", {
+      }, [createVNode("div", null, [!itemsLength.value ? 0 : startIndex.value + 1, createTextVNode(" - "), stopIndex.value, createTextVNode(" of "), itemsLength.value])]), createVNode("div", {
         "class": "v-data-table-footer__pagination"
       }, [createVNode(VBtn, {
         "icon": props.firstIcon,
@@ -19225,18 +19234,12 @@ function useOptions(_ref) {
     page,
     itemsPerPage,
     sortBy,
-    startIndex,
-    stopIndex,
-    pageCount,
     groupBy
   } = _ref;
   const vm = getCurrentInstance('VDataTable');
   const options = computed(() => ({
     page: page.value,
     itemsPerPage: itemsPerPage.value,
-    startIndex: startIndex.value,
-    stopIndex: stopIndex.value,
-    pageCount: pageCount.value,
     sortBy: sortBy.value,
     groupBy: groupBy.value
   }));
@@ -19340,8 +19343,7 @@ const VDataTable = defineComponent({
       page,
       itemsPerPage,
       startIndex,
-      stopIndex,
-      pageCount
+      stopIndex
     } = createPagination(props, flatItems);
     const {
       paginatedItems
@@ -19353,9 +19355,6 @@ const VDataTable = defineComponent({
       page,
       itemsPerPage,
       sortBy,
-      pageCount,
-      startIndex,
-      stopIndex,
       groupBy
     });
     provideDefaults({
@@ -19550,9 +19549,6 @@ const VDataTableVirtual = defineComponent({
     useOptions({
       sortBy,
       page: ref(1),
-      startIndex: ref(0),
-      stopIndex: computed(() => flatItems.value.length - 1),
-      pageCount: ref(1),
       itemsPerPage: ref(-1),
       groupBy
     });
@@ -19669,10 +19665,7 @@ const VDataTableServer = defineComponent({
     } = createGroupBy(props, groupBy, sortBy);
     const {
       page,
-      itemsPerPage,
-      startIndex,
-      stopIndex,
-      pageCount
+      itemsPerPage
     } = createPagination(props, items);
     const {
       flatItems
@@ -19682,9 +19675,6 @@ const VDataTableServer = defineComponent({
       page,
       itemsPerPage,
       sortBy,
-      startIndex,
-      stopIndex,
-      pageCount,
       groupBy
     });
     provide('v-data-table', {
@@ -19746,12 +19736,23 @@ const VVirtualScrollItem = defineComponent({
       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, () => {
+      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);
+      }
+    }
+    onUpdated(updateHeight);
     useRender(() => {
       var _slots$default;
       return createVNode("div", {
@@ -19773,15 +19774,8 @@ const VVirtualScroll = genericComponent()({
       type: Array,
       default: () => []
     },
-    itemKey: {
-      type: String,
-      default: 'value'
-    },
     itemHeight: [Number, String],
-    visibleItems: {
-      type: [Number, String],
-      default: 30
-    },
+    visibleItems: [Number, String],
     ...makeDimensionProps()
   },
   setup(props, _ref) {
@@ -19796,15 +19790,23 @@ const VVirtualScroll = genericComponent()({
         baseItemHeight.value = val;
       }
     });
-    const visibleItems = computed(() => parseInt(props.visibleItems, 10));
     const rootEl = ref();
-    const ids = new Map(props.items.map((item, index) => [getPropertyFromItem(item, props.itemKey, item), index]));
+    const {
+      resizeRef,
+      contentRect
+    } = useResizeObserver();
+    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 = 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);
@@ -19827,18 +19829,24 @@ const VVirtualScroll = genericComponent()({
     }
     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 = computed(() => Math.min(props.items.length, first.value + visibleItems.value));
     const computedItems = computed(() => props.items.slice(first.value, last.value));
     const paddingTop = computed(() => calculateOffset(first.value));
@@ -19846,6 +19854,12 @@ const VVirtualScroll = genericComponent()({
     const {
       dimensionStyles
     } = useDimension(props);
+    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(() => createVNode("div", {
       "ref": rootEl,
       "class": "v-virtual-scroll",
@@ -19862,7 +19876,7 @@ const VVirtualScroll = genericComponent()({
       return 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,
@@ -19870,6 +19884,9 @@ const VVirtualScroll = genericComponent()({
         })]
       });
     })])]));
+    return {
+      scrollToIndex
+    };
   }
 });
 
@@ -20012,6 +20029,7 @@ var components = /*#__PURE__*/Object.freeze({
   VDataTableRow: VDataTableRow,
   VDataTableVirtual: VDataTableVirtual,
   VDataTableServer: VDataTableServer,
+  VDataTableFooter: VDataTableFooter,
   VVirtualScroll: VVirtualScroll
 });
 
@@ -20227,7 +20245,7 @@ function createVuetify$1() {
     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
@@ -20240,7 +20258,7 @@ function inject(key) {
   }
 }
 
-const version = "3.1.3";
+const version = "3.1.4";
 
 const createVuetify = function () {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};