@vuetify/nightly 3.0.0-next-20220107.0 → 3.0.0-next-20220126.0

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.0.0-next-20220107.0
+* Vuetify v3.0.0-next-20220126.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -251,6 +251,9 @@
   function isObject(obj) {
     return obj !== null && typeof obj === 'object' && !Array.isArray(obj);
   }
+  function isComponentInstance(obj) {
+    return obj == null ? void 0 : obj.$el;
+  } // KeyboardEvent.keyCode aliases
 
   const keyCodes = Object.freeze({
     enter: 13,
@@ -2608,12 +2611,7 @@
       next: () => step(1),
       isSelected: id => selected.value.includes(id),
       selectedClass: vue.computed(() => props.selectedClass),
-      items: vue.computed(() => items.map(_ref => {
-        let {
-          id
-        } = _ref;
-        return id;
-      }))
+      items: vue.computed(() => items)
     };
     vue.provide(injectKey, state);
     return state;
@@ -4781,6 +4779,7 @@
     name: 'VMessages',
     props: {
       active: Boolean,
+      color: String,
       value: {
         type: [Array, String],
         default: () => []
@@ -4788,6 +4787,7 @@
       ...makeTransitionProps({
         transition: {
           component: VSlideYTransition,
+          leaveAbsolute: true,
           group: true
         }
       })
@@ -4798,20 +4798,25 @@
         slots
       } = _ref;
       const messages = vue.computed(() => wrapInArray(props.value));
+      const {
+        textColorClasses,
+        textColorStyles
+      } = useTextColor(vue.computed(() => props.color));
       return () => {
         var _slots$default;
 
         return vue.createVNode(MaybeTransition, {
           "transition": props.transition,
           "tag": "div",
-          "class": "v-messages"
+          "class": ['v-messages', textColorClasses.value],
+          "style": textColorStyles.value
         }, {
           default: () => [messages.value.length > 0 && props.active && messages.value.map((message, i) => vue.createVNode("div", {
             "class": "v-messages__message",
-            "key": i
+            "key": `${i}-${messages.value}`
           }, [message])), slots == null ? void 0 : (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)],
           _: 1
-        }, 8, ["transition"]);
+        }, 8, ["transition", "class", "style"]);
       };
     }
 
@@ -5115,10 +5120,11 @@
           "class": "v-input__details"
         }, [vue.createVNode(VMessages, {
           "active": showMessages,
-          "value": errorMessages.value || (hasMessages ? props.messages : props.hint)
+          "color": isValid.value === false ? 'error' : undefined,
+          "value": errorMessages.value.length > 0 ? errorMessages.value : hasMessages ? props.messages : props.hint
         }, {
           default: slots.messages
-        }, 8, ["active", "value"]), (_slots$details = slots.details) == null ? void 0 : _slots$details.call(slots, slotProps.value)])], 2);
+        }, 8, ["active", "color", "value"]), (_slots$details = slots.details) == null ? void 0 : _slots$details.call(slots, slotProps.value)])], 2);
       });
       return {
         isValid,
@@ -5823,6 +5829,14 @@
 
       return events;
     });
+    const activatorRef = vue.ref();
+    vue.watchEffect(() => {
+      if (!activatorRef.value) return;
+      vue.nextTick(() => {
+        const activator = activatorRef.value;
+        activatorEl.value = isComponentInstance(activator) ? activator.$el : activator;
+      });
+    });
     let scope;
     vue.watch(() => !!props.activator, val => {
       if (val && IN_BROWSER) {
@@ -5830,6 +5844,7 @@
         scope.run(() => {
           _useActivator(props, {
             activatorEl,
+            activatorRef,
             activatorEvents
           });
         });
@@ -5842,6 +5857,7 @@
     });
     return {
       activatorEl,
+      activatorRef,
       activatorEvents
     };
   }
@@ -6627,6 +6643,7 @@
       }));
       const {
         activatorEl,
+        activatorRef,
         activatorEvents
       } = useActivator(props, isActive);
       const {
@@ -6721,8 +6738,7 @@
         return vue.createVNode(vue.Fragment, null, [(_slots$activator = slots.activator) == null ? void 0 : _slots$activator.call(slots, {
           isActive: isActive.value,
           props: vue.mergeProps({
-            modelValue: isActive.value,
-            'onUpdate:modelValue': val => isActive.value = val
+            ref: activatorRef
           }, vue.toHandlers(activatorEvents.value), props.activatorProps)
         }), vue.createVNode(vue.Teleport, {
           "disabled": !teleportTarget.value,
@@ -7095,11 +7111,11 @@
       } = useElevation(props);
       vue.provide(VExpansionPanelSymbol, groupItem);
       const isBeforeSelected = vue.computed(() => {
-        const index = groupItem.group.items.value.indexOf(groupItem.id);
+        const index = groupItem.group.items.value.findIndex(item => item.id === groupItem.id);
         return !groupItem.isSelected.value && groupItem.group.selected.value.some(id => groupItem.group.items.value.indexOf(id) - index === 1);
       });
       const isAfterSelected = vue.computed(() => {
-        const index = groupItem.group.items.value.indexOf(groupItem.id);
+        const index = groupItem.group.items.value.findIndex(item => item.id === groupItem.id);
         return !groupItem.isSelected.value && groupItem.group.selected.value.some(id => groupItem.group.items.value.indexOf(id) - index === -1);
       });
       const {
@@ -8352,16 +8368,16 @@
       let {
         slots
       } = _ref;
-      const hover = useProxiedModel(props, 'modelValue');
+      const isHovering = useProxiedModel(props, 'modelValue');
       const {
         runOpenDelay,
         runCloseDelay
-      } = useDelay(props, value => !props.disabled && (hover.value = value));
+      } = useDelay(props, value => !props.disabled && (isHovering.value = value));
       return () => {
         var _slots$default;
 
         return (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, {
-          hover: hover.value,
+          isHovering: isHovering.value,
           props: {
             onMouseenter: runOpenDelay,
             onMouseleave: runCloseDelay
@@ -8575,37 +8591,26 @@
 
   });
 
-  const VListSubheader = defineComponent({
-    name: 'VListSubheader',
-    props: {
-      color: String,
-      inset: Boolean,
-      ...makeTagProps()
-    },
-
-    setup(props, _ref) {
-      let {
-        slots
-      } = _ref;
-      const {
-        textColorClasses,
-        textColorStyles
-      } = useTextColor(vue.toRef(props, 'color'));
-      return () => vue.createVNode(props.tag, {
-        "class": ['v-list-subheader', {
-          'v-list-subheader--inset': props.inset
-        }, textColorClasses.value],
-        "style": {
-          textColorStyles
-        }
-      }, {
-        default: () => [slots.default && vue.createVNode("div", {
-          "class": "v-list-subheader__text"
-        }, [slots.default()])]
-      }, 8, ["class", "style"]);
-    }
+  // Utilities
 
-  });
+  const ListKey = Symbol.for('vuetify:list');
+  function createList() {
+    const parent = vue.inject(ListKey, {
+      hasPrepend: vue.ref(false),
+      updateHasPrepend: () => null
+    });
+    const data = {
+      hasPrepend: vue.ref(false),
+      updateHasPrepend: value => {
+        if (value) data.hasPrepend.value = value;
+      }
+    };
+    vue.provide(ListKey, data);
+    return parent;
+  }
+  function useList() {
+    return vue.inject(ListKey, null);
+  }
 
   const singleOpenStrategy = _ref => {
     let {
@@ -8643,7 +8648,7 @@
       let parent = parents.get(id);
       opened.add(id);
 
-      while (parent != null) {
+      while (parent != null && parent !== id) {
         opened.add(parent);
         parent = parents.get(parent);
       }
@@ -8895,7 +8900,7 @@
           return arr;
         }),
         register: (id, parentId, isGroup) => {
-          parentId && parents.value.set(id, parentId);
+          parentId && id !== parentId && parents.value.set(id, parentId);
           isGroup && children.value.set(id, []);
 
           if (parentId != null) {
@@ -9002,30 +9007,6 @@
     return group;
   };
 
-  const VListGroupItems = defineComponent({
-    name: 'VListGroupItems',
-    props: {
-      open: Boolean,
-      items: Array
-    },
-
-    setup(props, _ref) {
-      let {
-        slots
-      } = _ref;
-      createList();
-      return () => {
-        return vue.createVNode(VExpandTransition, null, {
-          default: () => [vue.withDirectives(vue.createVNode("div", {
-            "class": "v-list-group__items"
-          }, [vue.createVNode(VListChildren, {
-            "items": props.items
-          }, slots, 8, ["items"])], 512), [[vue.vShow, props.open]])]
-        });
-      };
-    }
-
-  });
   const VListGroup = genericComponent()({
     name: 'VListGroup',
     props: {
@@ -9038,14 +9019,13 @@
         type: String,
         default: '$expand'
       },
-      items: Array,
       ...makeTagProps()
     },
 
-    setup(props, _ref2) {
+    setup(props, _ref) {
       let {
         slots
-      } = _ref2;
+      } = _ref;
       const {
         isOpen,
         open
@@ -9059,20 +9039,22 @@
       const headerProps = vue.computed(() => ({
         onClick,
         appendIcon: isOpen.value ? props.collapseIcon : props.expandIcon,
-        class: 'v-list-group__header'
+        class: 'v-list-group__header',
+        value: `${props.value}_header`
       }));
       return () => {
-        var _slots$header;
+        var _slots$header, _slots$items;
 
         return vue.createVNode(props.tag, {
           "class": ['v-list-group', {
             'v-list-group--prepend': list == null ? void 0 : list.hasPrepend.value
           }]
         }, {
-          default: () => [(_slots$header = slots.header) == null ? void 0 : _slots$header.call(slots, headerProps.value), vue.createVNode(VListGroupItems, {
-            "items": props.items,
-            "open": isOpen.value
-          }, slots, 8, ["items", "open"])],
+          default: () => [(_slots$header = slots.header) == null ? void 0 : _slots$header.call(slots, headerProps.value), vue.createVNode(VExpandTransition, null, {
+            default: () => [vue.withDirectives(vue.createVNode("div", {
+              "class": "v-list-group__items"
+            }, [(_slots$items = slots.items) == null ? void 0 : _slots$items.call(slots)], 512), [[vue.vShow, isOpen.value]])]
+          })],
           _: 1
         }, 8, ["class"]);
       };
@@ -9270,6 +9252,46 @@
 
   });
 
+  const VListSubheader = defineComponent({
+    name: 'VListSubheader',
+    props: {
+      color: String,
+      inset: Boolean,
+      sticky: Boolean,
+      text: String,
+      ...makeTagProps()
+    },
+
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
+      const {
+        textColorClasses,
+        textColorStyles
+      } = useTextColor(vue.toRef(props, 'color'));
+      return () => {
+        var _slots$default, _slots$default2;
+
+        const hasText = !!(slots.default || props.text);
+        return vue.createVNode(props.tag, {
+          "class": ['v-list-subheader', {
+            'v-list-subheader--inset': props.inset,
+            'v-list-subheader--sticky': props.sticky
+          }, textColorClasses.value],
+          "style": {
+            textColorStyles
+          }
+        }, {
+          default: () => [hasText && vue.createVNode("div", {
+            "class": "v-list-subheader__text"
+          }, [(_slots$default = (_slots$default2 = slots.default) == null ? void 0 : _slots$default2.call(slots)) != null ? _slots$default : props.text])]
+        }, 8, ["class", "style"]);
+      };
+    }
+
+  });
+
   const VListChildren = genericComponent()({
     name: 'VListChildren',
     props: {
@@ -9280,51 +9302,64 @@
       let {
         slots
       } = _ref;
+      createList();
       return () => {
         var _slots$default, _slots$default2, _props$items;
 
         return (_slots$default = (_slots$default2 = slots.default) == null ? void 0 : _slots$default2.call(slots)) != null ? _slots$default : (_props$items = props.items) == null ? void 0 : _props$items.map(_ref2 => {
           let {
             children,
-            ...item
+            props: itemProps,
+            type
           } = _ref2;
-          const {
-            value,
-            ...rest
-          } = item;
+          if (type === 'divider') return vue.createVNode(VDivider, itemProps, null, 16);
+          if (type === 'subheader') return vue.createVNode(VListSubheader, itemProps, slots, 16);
           return children ? vue.createVNode(VListGroup, {
-            "value": value,
-            "items": children
-          }, { ...slots,
-            header: headerProps => slots.externalHeader ? slots.externalHeader({ ...rest,
+            "value": itemProps == null ? void 0 : itemProps.value
+          }, {
+            items: () => vue.createVNode(VListChildren, {
+              "items": children
+            }, slots, 8, ["items"]),
+            header: headerProps => slots.externalHeader ? slots.externalHeader({ ...itemProps,
               ...headerProps
-            }) : vue.createVNode(VListItem, vue.mergeProps(rest, headerProps), null, 16),
+            }) : vue.createVNode(VListItem, vue.mergeProps(itemProps, headerProps), null, 16),
             _: 2
-          }, 8, ["value", "items"]) : slots.item ? slots.item(item) : vue.createVNode(VListItem, item, slots, 16);
+          }, 8, ["value"]) : slots.item ? slots.item(itemProps) : vue.createVNode(VListItem, itemProps, slots, 16);
         });
       };
     }
 
   });
 
-  const ListKey = Symbol.for('vuetify:list');
-  const createList = () => {
-    const parent = vue.inject(ListKey, {
-      hasPrepend: vue.ref(false),
-      updateHasPrepend: () => null
+  const parseItems = items => {
+    if (!items) return undefined;
+    return items.map(item => {
+      if (typeof item === 'string') return {
+        type: 'item',
+        value: item,
+        title: item
+      };
+      const {
+        $type,
+        $children,
+        ...props
+      } = item;
+      if ($type === 'subheader') return {
+        type: 'subheader',
+        props
+      };
+      if ($type === 'divider') return {
+        type: 'divider',
+        props
+      };
+      return {
+        type: 'item',
+        props,
+        children: parseItems($children)
+      };
     });
-    const data = {
-      hasPrepend: vue.ref(false),
-      updateHasPrepend: value => {
-        if (value) data.hasPrepend.value = value;
-      }
-    };
-    vue.provide(ListKey, data);
-    return parent;
-  };
-  const useList = () => {
-    return vue.inject(ListKey, null);
   };
+
   const VList = genericComponent()({
     name: 'VList',
     props: {
@@ -9335,10 +9370,6 @@
         default: 'one'
       },
       nav: Boolean,
-      subheader: {
-        type: [Boolean, String],
-        default: false
-      },
       items: Array,
       ...makeNestedProps({
         selectStrategy: 'leaf',
@@ -9363,6 +9394,7 @@
       let {
         slots
       } = _ref;
+      const items = vue.computed(() => parseItems(props.items));
       const {
         themeClasses
       } = provideTheme(props);
@@ -9392,28 +9424,22 @@
       } = useNested(props);
       createList();
       useRender(() => {
-        const hasHeader = typeof props.subheader === 'string' || slots.subheader;
         return vue.createVNode(props.tag, {
           "class": ['v-list', {
             'v-list--disabled': props.disabled,
             'v-list--nav': props.nav,
-            'v-list--subheader': props.subheader,
-            'v-list--subheader-sticky': props.subheader === 'sticky',
             [`v-list--${props.lines}-line`]: true
           }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value],
           "style": [backgroundColorStyles.value, dimensionStyles.value]
         }, {
-          default: () => [hasHeader && (slots.subheader ? slots.subheader() : vue.createVNode(VListSubheader, null, {
-            default: () => [props.subheader]
-          })), vue.createVNode(VListChildren, {
-            "items": props.items
+          default: () => [vue.createVNode(VListChildren, {
+            "items": items.value
           }, {
             default: slots.default,
             item: slots.item,
             externalHeader: slots.header,
             _: 1
-          }, 8, ["items"])],
-          _: 1
+          }, 8, ["items"])]
         }, 8, ["class", "style"]);
       });
       return {
@@ -10155,14 +10181,14 @@
         default: '...'
       },
       showFirstLastPage: Boolean,
+      ...makeRoundedProps(),
+      ...makeBorderProps(),
+      ...makeDensityProps(),
+      ...makeElevationProps(),
+      ...makeSizeProps(),
       ...makeTagProps({
         tag: 'nav'
       }),
-      ...makeElevationProps(),
-      ...makeDensityProps(),
-      ...makeRoundedProps(),
-      ...makeSizeProps(),
-      ...makeBorderProps(),
       ...makeThemeProps(),
       ...makeVariantProps({
         variant: 'text'
@@ -10256,12 +10282,15 @@
         refs,
         updateRef
       } = useRefs();
+      provideDefaults({
+        VBtn: {
+          border: vue.toRef(props, 'border'),
+          density: vue.toRef(props, 'density'),
+          size: vue.toRef(props, 'size'),
+          variant: vue.toRef(props, 'variant')
+        }
+      });
       const items = vue.computed(() => {
-        const sharedProps = {
-          density: props.density,
-          rounded: props.rounded,
-          size: props.size
-        };
         return range.value.map((item, index) => {
           const ref = e => updateRef(e, index);
 
@@ -10269,13 +10298,11 @@
             return {
               isActive: false,
               page: item,
-              props: { ...sharedProps,
+              props: {
                 ref,
                 ellipsis: true,
                 icon: true,
-                disabled: true,
-                variant: props.variant,
-                border: props.border
+                disabled: true
               }
             };
           } else {
@@ -10283,14 +10310,13 @@
             return {
               isActive,
               page: n(item),
-              props: { ...sharedProps,
+              props: {
                 ref,
                 ellipsis: false,
                 icon: true,
                 disabled: !!props.disabled || props.length < 2,
                 elevation: props.elevation,
-                variant: props.variant,
-                border: props.border,
+                rounded: props.rounded,
                 color: isActive ? props.color : undefined,
                 ariaCurrent: isActive,
                 ariaLabel: t(isActive ? props.currentPageAriaLabel : props.pageAriaLabel, index + 1),
@@ -10301,39 +10327,31 @@
         });
       });
       const controls = vue.computed(() => {
-        const sharedProps = {
-          color: undefined,
-          density: props.density,
-          rounded: props.rounded,
-          size: props.size,
-          variant: props.variant,
-          border: props.border
-        };
         const prevDisabled = !!props.disabled || page.value <= start.value;
         const nextDisabled = !!props.disabled || page.value >= start.value + length.value - 1;
         return {
-          first: props.showFirstLastPage ? { ...sharedProps,
+          first: props.showFirstLastPage ? {
             icon: isRtl.value ? props.lastIcon : props.firstIcon,
             onClick: e => setValue(e, start.value, 'first'),
             disabled: prevDisabled,
             ariaLabel: t(props.firstAriaLabel),
             ariaDisabled: prevDisabled
           } : undefined,
-          prev: { ...sharedProps,
+          prev: {
             icon: isRtl.value ? props.nextIcon : props.prevIcon,
             onClick: e => setValue(e, page.value - 1, 'prev'),
             disabled: prevDisabled,
             ariaLabel: t(props.previousAriaLabel),
             ariaDisabled: prevDisabled
           },
-          next: { ...sharedProps,
+          next: {
             icon: isRtl.value ? props.prevIcon : props.nextIcon,
             onClick: e => setValue(e, page.value + 1, 'next'),
             disabled: nextDisabled,
             ariaLabel: t(props.nextAriaLabel),
             ariaDisabled: nextDisabled
           },
-          last: props.showFirstLastPage ? { ...sharedProps,
+          last: props.showFirstLastPage ? {
             icon: isRtl.value ? props.firstIcon : props.lastIcon,
             onClick: e => setValue(e, start.value + length.value - 1, 'last'),
             disabled: nextDisabled,
@@ -12789,102 +12807,524 @@
 
   });
 
-  var components = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    VApp: VApp,
-    VAppBar: VAppBar,
-    VAppBarNavIcon: VAppBarNavIcon,
-    VAppBarTitle: VAppBarTitle,
-    VAlert: VAlert,
-    VAvatar: VAvatar,
-    VBadge: VBadge,
-    VBanner: VBanner,
-    VBannerActions: VBannerActions,
-    VBannerAvatar: VBannerAvatar,
-    VBannerContent: VBannerContent,
-    VBannerText: VBannerText,
-    VBottomNavigation: VBottomNavigation,
-    VBreadcrumbs: VBreadcrumbs,
-    VBreadcrumbsItem: VBreadcrumbsItem,
-    VBreadcrumbsDivider: VBreadcrumbsDivider,
-    VBtn: VBtn,
-    VBtnGroup: VBtnGroup,
-    VBtnToggle: VBtnToggle,
-    VCard: VCard,
-    VCardActions: VCardActions,
-    VCardAvatar: VCardAvatar,
-    VCardHeader: VCardHeader,
-    VCardHeaderText: VCardHeaderText,
-    VCardImg: VCardImg,
-    VCardSubtitle: VCardSubtitle,
-    VCardText: VCardText,
-    VCardTitle: VCardTitle,
-    VCheckbox: VCheckbox,
-    VChip: VChip,
-    VCode: VCode,
-    VCounter: VCounter,
-    VDefaultsProvider: VDefaultsProvider,
-    VDialog: VDialog,
-    VDivider: VDivider,
-    VExpansionPanels: VExpansionPanels,
-    VExpansionPanel: VExpansionPanel,
-    VExpansionPanelText: VExpansionPanelText,
-    VExpansionPanelTitle: VExpansionPanelTitle,
-    VField: VField,
-    VFieldLabel: VFieldLabel,
-    VFileInput: VFileInput,
-    VFooter: VFooter,
-    VForm: VForm,
-    VContainer: VContainer,
-    VCol: VCol,
-    VRow: VRow,
-    VSpacer: VSpacer,
-    VHover: VHover,
-    VIcon: VIcon,
-    VComponentIcon: VComponentIcon,
-    VSvgIcon: VSvgIcon,
-    VLigatureIcon: VLigatureIcon,
-    VClassIcon: VClassIcon,
-    VImg: VImg,
-    VInput: VInput,
-    VItemGroup: VItemGroup,
-    VItem: VItem,
-    VKbd: VKbd,
-    VLabel: VLabel,
-    VLayout: VLayout,
-    VLayoutItem: VLayoutItem,
-    VLazy: VLazy,
-    VList: VList,
-    VListSubheader: VListSubheader,
-    VListImg: VListImg,
-    VListItem: VListItem,
-    VListItemAvatar: VListItemAvatar,
-    VListItemHeader: VListItemHeader,
-    VListItemMedia: VListItemMedia,
-    VListItemSubtitle: VListItemSubtitle,
-    VListItemTitle: VListItemTitle,
-    VListGroup: VListGroup,
-    VLocaleProvider: VLocaleProvider,
-    VMain: VMain,
-    VMenu: VMenu,
-    VMessages: VMessages,
-    VNavigationDrawer: VNavigationDrawer,
-    VNoSsr: VNoSsr,
-    VOverlay: VOverlay,
-    VPagination: VPagination,
-    VParallax: VParallax,
-    VProgressCircular: VProgressCircular,
-    VProgressLinear: VProgressLinear,
-    VRadio: VRadio,
-    VRadioGroup: VRadioGroup,
-    VRangeSlider: VRangeSlider,
-    VRating: VRating,
-    VResponsive: VResponsive,
-    VSelectionControl: VSelectionControl,
-    VSelectionControlGroup: VSelectionControlGroup,
-    VSheet: VSheet,
-    VSlider: VSlider,
-    VSwitch: VSwitch,
+  // Types
+
+  const handleGesture = wrapper => {
+    const {
+      touchstartX,
+      touchendX,
+      touchstartY,
+      touchendY
+    } = wrapper;
+    const dirRatio = 0.5;
+    const minDistance = 16;
+    wrapper.offsetX = touchendX - touchstartX;
+    wrapper.offsetY = touchendY - touchstartY;
+
+    if (Math.abs(wrapper.offsetY) < dirRatio * Math.abs(wrapper.offsetX)) {
+      wrapper.left && touchendX < touchstartX - minDistance && wrapper.left(wrapper);
+      wrapper.right && touchendX > touchstartX + minDistance && wrapper.right(wrapper);
+    }
+
+    if (Math.abs(wrapper.offsetX) < dirRatio * Math.abs(wrapper.offsetY)) {
+      wrapper.up && touchendY < touchstartY - minDistance && wrapper.up(wrapper);
+      wrapper.down && touchendY > touchstartY + minDistance && wrapper.down(wrapper);
+    }
+  };
+
+  function touchstart(event, wrapper) {
+    var _wrapper$start;
+
+    const touch = event.changedTouches[0];
+    wrapper.touchstartX = touch.clientX;
+    wrapper.touchstartY = touch.clientY;
+    (_wrapper$start = wrapper.start) == null ? void 0 : _wrapper$start.call(wrapper, {
+      originalEvent: event,
+      ...wrapper
+    });
+  }
+
+  function touchend(event, wrapper) {
+    var _wrapper$end;
+
+    const touch = event.changedTouches[0];
+    wrapper.touchendX = touch.clientX;
+    wrapper.touchendY = touch.clientY;
+    (_wrapper$end = wrapper.end) == null ? void 0 : _wrapper$end.call(wrapper, {
+      originalEvent: event,
+      ...wrapper
+    });
+    handleGesture(wrapper);
+  }
+
+  function touchmove(event, wrapper) {
+    var _wrapper$move;
+
+    const touch = event.changedTouches[0];
+    wrapper.touchmoveX = touch.clientX;
+    wrapper.touchmoveY = touch.clientY;
+    (_wrapper$move = wrapper.move) == null ? void 0 : _wrapper$move.call(wrapper, {
+      originalEvent: event,
+      ...wrapper
+    });
+  }
+
+  function createHandlers() {
+    let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const wrapper = {
+      touchstartX: 0,
+      touchstartY: 0,
+      touchendX: 0,
+      touchendY: 0,
+      touchmoveX: 0,
+      touchmoveY: 0,
+      offsetX: 0,
+      offsetY: 0,
+      left: value.left,
+      right: value.right,
+      up: value.up,
+      down: value.down,
+      start: value.start,
+      move: value.move,
+      end: value.end
+    };
+    return {
+      touchstart: e => touchstart(e, wrapper),
+      touchend: e => touchend(e, wrapper),
+      touchmove: e => touchmove(e, wrapper)
+    };
+  }
+
+  function mounted$3(el, binding) {
+    var _value$options, _binding$instance, _target$_touchHandler;
+
+    const value = binding.value;
+    const target = value != null && value.parent ? el.parentElement : el;
+    const options = (_value$options = value == null ? void 0 : value.options) != null ? _value$options : {
+      passive: true
+    };
+    const uid = (_binding$instance = binding.instance) == null ? void 0 : _binding$instance.$.uid; // TODO: use custom uid generator
+
+    if (!target || !uid) return;
+    const handlers = createHandlers(binding.value);
+    target._touchHandlers = (_target$_touchHandler = target._touchHandlers) != null ? _target$_touchHandler : Object.create(null);
+    target._touchHandlers[uid] = handlers;
+    keys(handlers).forEach(eventName => {
+      target.addEventListener(eventName, handlers[eventName], options);
+    });
+  }
+
+  function unmounted$3(el, binding) {
+    var _binding$value, _binding$instance2;
+
+    const target = (_binding$value = binding.value) != null && _binding$value.parent ? el.parentElement : el;
+    const uid = (_binding$instance2 = binding.instance) == null ? void 0 : _binding$instance2.$.uid;
+    if (!(target != null && target._touchHandlers) || !uid) return;
+    const handlers = target._touchHandlers[uid];
+    keys(handlers).forEach(eventName => {
+      target.removeEventListener(eventName, handlers[eventName]);
+    });
+    delete target._touchHandlers[uid];
+  }
+
+  const Touch = {
+    mounted: mounted$3,
+    unmounted: unmounted$3
+  };
+
+  const VWindowSymbol = Symbol.for('vuetify:v-window');
+  const VWindowGroupSymbol = Symbol.for('vuetify:v-window-group');
+  const VWindow = vue.defineComponent({
+    name: 'VWindow',
+    directives: {
+      Touch
+    },
+    props: {
+      continuous: Boolean,
+      nextIcon: {
+        type: [Boolean, String],
+        default: '$next'
+      },
+      prevIcon: {
+        type: [Boolean, String],
+        default: '$prev'
+      },
+      reverse: Boolean,
+      showArrows: {
+        type: [Boolean, String],
+        validator: v => typeof v === 'boolean' || v === 'hover'
+      },
+      touch: {
+        type: [Object, Boolean],
+        default: undefined
+      },
+      direction: {
+        type: String,
+        default: 'horizontal'
+      },
+      modelValue: null,
+      disabled: Boolean,
+      selectedClass: {
+        type: String,
+        default: 'v-window-item--active'
+      },
+      // TODO: mandatory should probably not be exposed but do this for now
+      mandatory: {
+        default: 'force'
+      },
+      ...makeTagProps(),
+      ...makeThemeProps()
+    },
+    emits: {
+      'update:modelValue': v => true
+    },
+
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
+      const {
+        themeClasses
+      } = provideTheme(props);
+      const {
+        isRtl
+      } = useRtl();
+      const {
+        t
+      } = useLocale();
+      const group = useGroup(props, VWindowGroupSymbol);
+      const rootRef = vue.ref();
+      const isRtlReverse = vue.computed(() => isRtl.value ? !props.reverse : props.reverse);
+      const isReversed = vue.ref(false);
+      const transition = vue.computed(() => {
+        const axis = props.direction === 'vertical' ? 'y' : 'x';
+        const reverse = isRtlReverse.value ? !isReversed.value : isReversed.value;
+        const direction = reverse ? '-reverse' : '';
+        return `v-window-${axis}${direction}-transition`;
+      });
+      const transitionCount = vue.ref(0);
+      const transitionHeight = vue.ref(undefined);
+      const activeIndex = vue.computed(() => {
+        return group.items.value.findIndex(item => group.selected.value.includes(item.id));
+      });
+      vue.watch(activeIndex, (newVal, oldVal) => {
+        const itemsLength = group.items.value.length;
+        const lastIndex = itemsLength - 1;
+
+        if (itemsLength <= 2) {
+          isReversed.value = newVal < oldVal;
+        } else if (newVal === lastIndex && oldVal === 0) {
+          isReversed.value = true;
+        } else if (newVal === 0 && oldVal === lastIndex) {
+          isReversed.value = false;
+        } else {
+          isReversed.value = newVal < oldVal;
+        }
+      });
+      vue.provide(VWindowSymbol, {
+        transition,
+        isReversed,
+        transitionCount,
+        transitionHeight,
+        rootRef
+      });
+      const canMoveBack = vue.computed(() => props.continuous || activeIndex.value !== 0);
+      const canMoveForward = vue.computed(() => props.continuous || activeIndex.value !== group.items.value.length - 1);
+
+      function prev() {
+        canMoveBack.value && group.prev();
+      }
+
+      function next() {
+        canMoveForward.value && group.next();
+      }
+
+      provideDefaults({
+        VBtn: {
+          variant: 'text'
+        }
+      }, {
+        scoped: true
+      });
+      const arrows = vue.computed(() => {
+        const arrows = [];
+        const prevProps = {
+          icon: isRtl.value ? props.nextIcon : props.prevIcon,
+          class: `v-window__${isRtlReverse.value ? 'right' : 'left'}`,
+          onClick: group.prev,
+          ariaLabel: t('$vuetify.carousel.prev')
+        };
+        arrows.push(canMoveBack.value ? slots.prev ? slots.prev({
+          props: prevProps
+        }) : vue.createVNode(VBtn, prevProps, null, 16) : vue.createVNode("div", null, null));
+        const nextProps = {
+          icon: isRtl.value ? props.prevIcon : props.nextIcon,
+          class: `v-window__${isRtlReverse.value ? 'left' : 'right'}`,
+          onClick: group.next,
+          ariaLabel: t('$vuetify.carousel.next')
+        };
+        arrows.push(canMoveForward.value ? slots.next ? slots.next({
+          props: nextProps
+        }) : vue.createVNode(VBtn, nextProps, null, 16) : vue.createVNode("div", null, null));
+        return arrows;
+      });
+      const touchOptions = vue.computed(() => {
+        if (props.touch === false) return props.touch;
+        const options = {
+          left: () => {
+            isRtlReverse.value ? prev() : next();
+          },
+          right: () => {
+            isRtlReverse.value ? next() : prev();
+          },
+          end: _ref2 => {
+            let {
+              originalEvent
+            } = _ref2;
+            originalEvent.stopPropagation();
+          },
+          start: _ref3 => {
+            let {
+              originalEvent
+            } = _ref3;
+            originalEvent.stopPropagation();
+          }
+        };
+        return { ...options,
+          ...(props.touch === true ? {} : props.touch)
+        };
+      });
+      return () => {
+        var _slots$default;
+
+        return vue.withDirectives(vue.createVNode(props.tag, {
+          "ref": rootRef,
+          "class": ['v-window', {
+            'v-window--show-arrows-on-hover': props.showArrows === 'hover'
+          }, themeClasses.value]
+        }, {
+          default: () => [vue.createVNode("div", {
+            "class": "v-window__container",
+            "style": {
+              height: transitionHeight.value
+            }
+          }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots), props.showArrows !== false && vue.createVNode("div", {
+            "class": "v-window__controls"
+          }, [arrows.value])], 4)]
+        }, 8, ["class"]), [[vue.resolveDirective("touch"), touchOptions.value]]);
+      };
+    }
+
+  });
+
+  const VWindowItem = defineComponent({
+    name: 'VWindowItem',
+    directives: {
+      Touch
+    },
+    props: {
+      reverseTransition: {
+        type: [Boolean, String],
+        default: undefined
+      },
+      transition: {
+        type: [Boolean, String],
+        default: undefined
+      },
+      ...makeLazyProps(),
+      ...makeGroupItemProps()
+    },
+
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
+      const window = vue.inject(VWindowSymbol);
+      const groupItem = useGroupItem(props, VWindowGroupSymbol);
+      if (!window || !groupItem) throw new Error('[Vuetify] VWindowItem must be used inside VWindow');
+      const isTransitioning = vue.ref(false);
+      const hasTransition = vue.computed(() => window.isReversed.value ? props.reverseTransition !== false : props.transition !== false);
+
+      function onAfterTransition() {
+        if (!isTransitioning.value || !window) {
+          return;
+        } // Finalize transition state.
+
+
+        isTransitioning.value = false;
+
+        if (window.transitionCount.value > 0) {
+          window.transitionCount.value -= 1; // Remove container height if we are out of transition.
+
+          if (window.transitionCount.value === 0) {
+            window.transitionHeight.value = undefined;
+          }
+        }
+      }
+
+      function onBeforeTransition() {
+        if (isTransitioning.value || !window) {
+          return;
+        } // Initialize transition state here.
+
+
+        isTransitioning.value = true;
+
+        if (window.transitionCount.value === 0) {
+          var _window$rootRef$value;
+
+          // Set initial height for height transition.
+          window.transitionHeight.value = convertToUnit((_window$rootRef$value = window.rootRef.value) == null ? void 0 : _window$rootRef$value.clientHeight);
+        }
+
+        window.transitionCount.value += 1;
+      }
+
+      function onTransitionCancelled() {
+        onAfterTransition(); // This should have the same path as normal transition end.
+      }
+
+      function onEnterTransition(el) {
+        if (!isTransitioning.value) {
+          return;
+        }
+
+        vue.nextTick(() => {
+          // Do not set height if no transition or cancelled.
+          if (!hasTransition.value || !isTransitioning.value || !window) {
+            return;
+          } // Set transition target height.
+
+
+          window.transitionHeight.value = convertToUnit(el.clientHeight);
+        });
+      }
+
+      const transition = vue.computed(() => {
+        const name = window.isReversed.value ? props.reverseTransition : props.transition;
+        return !hasTransition.value ? false : {
+          name: typeof name !== 'string' ? window.transition.value : name,
+          onBeforeEnter: onBeforeTransition,
+          onAfterEnter: onAfterTransition,
+          onEnterCancelled: onTransitionCancelled,
+          onBeforeLeave: onBeforeTransition,
+          onAfterLeave: onAfterTransition,
+          onLeaveCancelled: onTransitionCancelled,
+          onEnter: onEnterTransition
+        };
+      });
+      const {
+        hasContent
+      } = useLazy(props, groupItem.isSelected);
+      return () => {
+        return vue.createVNode(MaybeTransition, {
+          "transition": transition.value
+        }, {
+          default: () => [vue.withDirectives(vue.createVNode("div", {
+            "class": ['v-window-item', groupItem.selectedClass.value]
+          }, [slots.default && hasContent.value && slots.default()], 2), [[vue.vShow, groupItem.isSelected.value]])]
+        }, 8, ["transition"]);
+      };
+    }
+
+  });
+
+  var components = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    VApp: VApp,
+    VAppBar: VAppBar,
+    VAppBarNavIcon: VAppBarNavIcon,
+    VAppBarTitle: VAppBarTitle,
+    VAlert: VAlert,
+    VAvatar: VAvatar,
+    VBadge: VBadge,
+    VBanner: VBanner,
+    VBannerActions: VBannerActions,
+    VBannerAvatar: VBannerAvatar,
+    VBannerContent: VBannerContent,
+    VBannerText: VBannerText,
+    VBottomNavigation: VBottomNavigation,
+    VBreadcrumbs: VBreadcrumbs,
+    VBreadcrumbsItem: VBreadcrumbsItem,
+    VBreadcrumbsDivider: VBreadcrumbsDivider,
+    VBtn: VBtn,
+    VBtnGroup: VBtnGroup,
+    VBtnToggle: VBtnToggle,
+    VCard: VCard,
+    VCardActions: VCardActions,
+    VCardAvatar: VCardAvatar,
+    VCardHeader: VCardHeader,
+    VCardHeaderText: VCardHeaderText,
+    VCardImg: VCardImg,
+    VCardSubtitle: VCardSubtitle,
+    VCardText: VCardText,
+    VCardTitle: VCardTitle,
+    VCheckbox: VCheckbox,
+    VChip: VChip,
+    VCode: VCode,
+    VCounter: VCounter,
+    VDefaultsProvider: VDefaultsProvider,
+    VDialog: VDialog,
+    VDivider: VDivider,
+    VExpansionPanels: VExpansionPanels,
+    VExpansionPanel: VExpansionPanel,
+    VExpansionPanelText: VExpansionPanelText,
+    VExpansionPanelTitle: VExpansionPanelTitle,
+    VField: VField,
+    VFieldLabel: VFieldLabel,
+    VFileInput: VFileInput,
+    VFooter: VFooter,
+    VForm: VForm,
+    VContainer: VContainer,
+    VCol: VCol,
+    VRow: VRow,
+    VSpacer: VSpacer,
+    VHover: VHover,
+    VIcon: VIcon,
+    VComponentIcon: VComponentIcon,
+    VSvgIcon: VSvgIcon,
+    VLigatureIcon: VLigatureIcon,
+    VClassIcon: VClassIcon,
+    VImg: VImg,
+    VInput: VInput,
+    VItemGroup: VItemGroup,
+    VItem: VItem,
+    VKbd: VKbd,
+    VLabel: VLabel,
+    VLayout: VLayout,
+    VLayoutItem: VLayoutItem,
+    VLazy: VLazy,
+    VList: VList,
+    VListSubheader: VListSubheader,
+    VListImg: VListImg,
+    VListItem: VListItem,
+    VListItemAvatar: VListItemAvatar,
+    VListItemHeader: VListItemHeader,
+    VListItemMedia: VListItemMedia,
+    VListItemSubtitle: VListItemSubtitle,
+    VListItemTitle: VListItemTitle,
+    VListGroup: VListGroup,
+    VLocaleProvider: VLocaleProvider,
+    VMain: VMain,
+    VMenu: VMenu,
+    VMessages: VMessages,
+    VNavigationDrawer: VNavigationDrawer,
+    VNoSsr: VNoSsr,
+    VOverlay: VOverlay,
+    VPagination: VPagination,
+    VParallax: VParallax,
+    VProgressCircular: VProgressCircular,
+    VProgressLinear: VProgressLinear,
+    VRadio: VRadio,
+    VRadioGroup: VRadioGroup,
+    VRangeSlider: VRangeSlider,
+    VRating: VRating,
+    VResponsive: VResponsive,
+    VSelectionControl: VSelectionControl,
+    VSelectionControlGroup: VSelectionControlGroup,
+    VSheet: VSheet,
+    VSlider: VSlider,
+    VSwitch: VSwitch,
     VSystemBar: VSystemBar,
     VTable: VTable,
     VTextarea: VTextarea,
@@ -12894,6 +13334,8 @@
     VTimelineItem: VTimelineItem,
     VTooltip: VTooltip,
     VValidation: VValidation,
+    VWindow: VWindow,
+    VWindowItem: VWindowItem,
     VDialogTransition: VDialogTransition,
     VCarouselTransition: VCarouselTransition,
     VCarouselReverseTransition: VCarouselReverseTransition,
@@ -12918,7 +13360,7 @@
   });
 
   // Types
-  function mounted$3(el, binding) {
+  function mounted$2(el, binding) {
     var _modifierKeys$attr, _modifierKeys$char, _modifierKeys$child, _modifierKeys$sub;
 
     const modifiers = binding.modifiers || {};
@@ -12945,7 +13387,7 @@
       let mutations = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
       let observer = arguments.length > 1 ? arguments[1] : undefined;
       handler == null ? void 0 : handler(mutations, observer);
-      if (once) unmounted$3(el, binding);
+      if (once) unmounted$2(el, binding);
     });
     if (immediate) handler == null ? void 0 : handler([], observer);
     el._mutate = Object(el._mutate);
@@ -12955,7 +13397,7 @@
     observer.observe(el, options);
   }
 
-  function unmounted$3(el, binding) {
+  function unmounted$2(el, binding) {
     var _el$_mutate;
 
     if (!((_el$_mutate = el._mutate) != null && _el$_mutate[binding.instance.$.uid])) return;
@@ -12966,11 +13408,11 @@
   }
 
   const Mutate = {
-    mounted: mounted$3,
-    unmounted: unmounted$3
+    mounted: mounted$2,
+    unmounted: unmounted$2
   };
 
-  function mounted$2(el, binding) {
+  function mounted$1(el, binding) {
     var _binding$modifiers, _binding$modifiers2;
 
     const handler = binding.value;
@@ -12989,7 +13431,7 @@
     }
   }
 
-  function unmounted$2(el, binding) {
+  function unmounted$1(el, binding) {
     var _el$_onResize;
 
     if (!((_el$_onResize = el._onResize) != null && _el$_onResize[binding.instance.$.uid])) return;
@@ -13002,11 +13444,11 @@
   }
 
   const Resize = {
-    mounted: mounted$2,
-    unmounted: unmounted$2
+    mounted: mounted$1,
+    unmounted: unmounted$1
   };
 
-  function mounted$1(el, binding) {
+  function mounted(el, binding) {
     var _binding$modifiers;
 
     const {
@@ -13029,7 +13471,7 @@
     };
   }
 
-  function unmounted$1(el, binding) {
+  function unmounted(el, binding) {
     var _el$_onScroll;
 
     if (!((_el$_onScroll = el._onScroll) != null && _el$_onScroll[binding.instance.$.uid])) return;
@@ -13044,136 +13486,14 @@
 
   function updated(el, binding) {
     if (binding.value === binding.oldValue) return;
-    unmounted$1(el, binding);
-    mounted$1(el, binding);
+    unmounted(el, binding);
+    mounted(el, binding);
   }
 
   const Scroll = {
-    mounted: mounted$1,
-    unmounted: unmounted$1,
-    updated
-  };
-
-  // Types
-
-  const handleGesture = wrapper => {
-    const {
-      touchstartX,
-      touchendX,
-      touchstartY,
-      touchendY
-    } = wrapper;
-    const dirRatio = 0.5;
-    const minDistance = 16;
-    wrapper.offsetX = touchendX - touchstartX;
-    wrapper.offsetY = touchendY - touchstartY;
-
-    if (Math.abs(wrapper.offsetY) < dirRatio * Math.abs(wrapper.offsetX)) {
-      wrapper.left && touchendX < touchstartX - minDistance && wrapper.left(wrapper);
-      wrapper.right && touchendX > touchstartX + minDistance && wrapper.right(wrapper);
-    }
-
-    if (Math.abs(wrapper.offsetX) < dirRatio * Math.abs(wrapper.offsetY)) {
-      wrapper.up && touchendY < touchstartY - minDistance && wrapper.up(wrapper);
-      wrapper.down && touchendY > touchstartY + minDistance && wrapper.down(wrapper);
-    }
-  };
-
-  function touchstart(event, wrapper) {
-    var _wrapper$start;
-
-    const touch = event.changedTouches[0];
-    wrapper.touchstartX = touch.clientX;
-    wrapper.touchstartY = touch.clientY;
-    (_wrapper$start = wrapper.start) == null ? void 0 : _wrapper$start.call(wrapper, { ...event,
-      ...wrapper
-    });
-  }
-
-  function touchend(event, wrapper) {
-    var _wrapper$end;
-
-    const touch = event.changedTouches[0];
-    wrapper.touchendX = touch.clientX;
-    wrapper.touchendY = touch.clientY;
-    (_wrapper$end = wrapper.end) == null ? void 0 : _wrapper$end.call(wrapper, { ...event,
-      ...wrapper
-    });
-    handleGesture(wrapper);
-  }
-
-  function touchmove(event, wrapper) {
-    var _wrapper$move;
-
-    const touch = event.changedTouches[0];
-    wrapper.touchmoveX = touch.clientX;
-    wrapper.touchmoveY = touch.clientY;
-    (_wrapper$move = wrapper.move) == null ? void 0 : _wrapper$move.call(wrapper, { ...event,
-      ...wrapper
-    });
-  }
-
-  function createHandlers() {
-    let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    const wrapper = {
-      touchstartX: 0,
-      touchstartY: 0,
-      touchendX: 0,
-      touchendY: 0,
-      touchmoveX: 0,
-      touchmoveY: 0,
-      offsetX: 0,
-      offsetY: 0,
-      left: value.left,
-      right: value.right,
-      up: value.up,
-      down: value.down,
-      start: value.start,
-      move: value.move,
-      end: value.end
-    };
-    return {
-      touchstart: e => touchstart(e, wrapper),
-      touchend: e => touchend(e, wrapper),
-      touchmove: e => touchmove(e, wrapper)
-    };
-  }
-
-  function mounted(el, binding) {
-    var _value$options, _binding$instance, _target$_touchHandler;
-
-    const value = binding.value;
-    const target = value != null && value.parent ? el.parentElement : el;
-    const options = (_value$options = value == null ? void 0 : value.options) != null ? _value$options : {
-      passive: true
-    };
-    const uid = (_binding$instance = binding.instance) == null ? void 0 : _binding$instance.$.uid; // TODO: use custom uid generator
-
-    if (!target || !uid) return;
-    const handlers = createHandlers(binding.value);
-    target._touchHandlers = (_target$_touchHandler = target._touchHandlers) != null ? _target$_touchHandler : Object.create(null);
-    target._touchHandlers[uid] = handlers;
-    keys(handlers).forEach(eventName => {
-      target.addEventListener(eventName, handlers[eventName], options);
-    });
-  }
-
-  function unmounted(el, binding) {
-    var _binding$value, _binding$instance2;
-
-    const target = (_binding$value = binding.value) != null && _binding$value.parent ? el.parentElement : el;
-    const uid = (_binding$instance2 = binding.instance) == null ? void 0 : _binding$instance2.$.uid;
-    if (!(target != null && target._touchHandlers) || !uid) return;
-    const handlers = target._touchHandlers[uid];
-    keys(handlers).forEach(eventName => {
-      target.removeEventListener(eventName, handlers[eventName]);
-    });
-    delete target._touchHandlers[uid];
-  }
-
-  const Touch = {
     mounted,
-    unmounted
+    unmounted,
+    updated
   };
 
   var directives = /*#__PURE__*/Object.freeze({
@@ -13312,7 +13632,7 @@
       ...options
     });
   };
-  const version = "3.0.0-next-20220107.0";
+  const version = "3.0.0-next-20220126.0";
 
   exports.components = components;
   exports.createVuetify = createVuetify;