@vuetify/nightly 3.0.0-alpha.8 → 3.0.0-beta.3

package/lib/components/VWindow/VWindow.mjs

@@ -1,276 +1,201 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
 // Styles
-import "./VWindow.sass"; // Types
+import "./VWindow.css"; // Components
+
+import { VBtn } from "../VBtn/index.mjs"; // Composables
+
+import { makeTagProps } from "../../composables/tag.mjs";
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
+import { useGroup } from "../../composables/group.mjs";
+import { useLocale } from "../../composables/locale.mjs";
+import { useRtl } from "../../composables/rtl.mjs"; // Directives
 
-// Directives
-import Touch from "../../directives/touch/index.mjs"; // Components
+import { Touch } from "../../directives/touch/index.mjs"; // Utilities
 
-import VBtn from "../VBtn/index.mjs";
-import VIcon from "../VIcon/index.mjs";
-import { BaseItemGroup } from "../VItemGroup/VItemGroup.mjs";
-/* @vue/component */
+import { computed, provide, ref, watch } from 'vue';
+import { genericComponent, useRender } from "../../util/index.mjs"; // Types
 
-export default BaseItemGroup.extend({
-  name: 'v-window',
+export const VWindowSymbol = Symbol.for('vuetify:v-window');
+export const VWindowGroupSymbol = Symbol.for('vuetify:v-window-group');
+export const VWindow = genericComponent()({
+  name: 'VWindow',
   directives: {
     Touch
   },
-
-  provide() {
-    return {
-      windowGroup: this
-    };
-  },
-
   props: {
-    activeClass: {
-      type: String,
-      default: 'v-window-item--active'
-    },
     continuous: Boolean,
-    mandatory: {
-      type: Boolean,
-      default: true
-    },
     nextIcon: {
-      type: [Boolean, String],
+      type: [Boolean, String, Function, Object],
       default: '$next'
     },
     prevIcon: {
-      type: [Boolean, String],
+      type: [Boolean, String, Function, Object],
       default: '$prev'
     },
     reverse: Boolean,
-    showArrows: Boolean,
-    showArrowsOnHover: Boolean,
-    touch: Object,
-    touchless: Boolean,
-    value: {
-      required: false
-    },
-    vertical: Boolean
-  },
-
-  data() {
-    return {
-      changedByDelimiters: false,
-      internalHeight: undefined,
-      // This can be fixed by child class.
-      transitionHeight: undefined,
-      // Intermediate height during transition.
-      transitionCount: 0,
-      // Number of windows in transition state.
-      isBooted: false,
-      isReverse: false
-    };
-  },
-
-  computed: {
-    isActive() {
-      return this.transitionCount > 0;
-    },
-
-    classes() {
-      return { ...BaseItemGroup.options.computed.classes.call(this),
-        'v-window--show-arrows-on-hover': this.showArrowsOnHover
-      };
-    },
-
-    computedTransition() {
-      if (!this.isBooted) return '';
-      const axis = this.vertical ? 'y' : 'x';
-      const reverse = this.internalReverse ? !this.isReverse : this.isReverse;
-      const direction = reverse ? '-reverse' : '';
-      return `v-window-${axis}${direction}-transition`;
+    showArrows: {
+      type: [Boolean, String],
+      validator: v => typeof v === 'boolean' || v === 'hover'
     },
-
-    hasActiveItems() {
-      return Boolean(this.items.find(item => !item.disabled));
+    touch: {
+      type: [Object, Boolean],
+      default: undefined
     },
-
-    hasNext() {
-      return this.continuous || this.internalIndex < this.items.length - 1;
+    direction: {
+      type: String,
+      default: 'horizontal'
     },
-
-    hasPrev() {
-      return this.continuous || this.internalIndex > 0;
+    modelValue: null,
+    disabled: Boolean,
+    selectedClass: {
+      type: String,
+      default: 'v-window-item--active'
     },
-
-    internalIndex() {
-      return this.items.findIndex((item, i) => {
-        return this.internalValue === this.getValue(item, i);
-      });
+    // TODO: mandatory should probably not be exposed but do this for now
+    mandatory: {
+      default: 'force'
     },
-
-    internalReverse() {
-      return this.$vuetify.rtl ? !this.reverse : this.reverse;
-    }
-
+    ...makeTagProps(),
+    ...makeThemeProps()
   },
-  watch: {
-    internalIndex(val, oldVal) {
-      this.isReverse = this.updateReverse(val, oldVal);
-    }
-
+  emits: {
+    'update:modelValue': v => true
   },
 
-  mounted() {
-    window.requestAnimationFrame(() => this.isBooted = true);
-  },
-
-  methods: {
-    genDefaultSlot() {
-      return this.$slots.default;
-    },
-
-    genContainer() {
-      const children = [this.genDefaultSlot()];
-
-      if (this.showArrows) {
-        children.push(this.genControlIcons());
-      }
-
-      return this.$createElement('div', {
-        staticClass: 'v-window__container',
-        class: {
-          'v-window__container--is-active': this.isActive
-        },
-        style: {
-          height: this.internalHeight || this.transitionHeight
-        }
-      }, children);
-    },
-
-    genIcon(direction, icon, click) {
-      var _this$$scopedSlots$di, _this$$scopedSlots$di2, _this$$scopedSlots;
-
-      const on = {
-        click: e => {
-          e.stopPropagation();
-          this.changedByDelimiters = true;
-          click();
-        }
-      };
-      const attrs = {
-        'aria-label': this.$vuetify.lang.t(`$vuetify.carousel.${direction}`)
-      };
-      const children = (_this$$scopedSlots$di = (_this$$scopedSlots$di2 = (_this$$scopedSlots = this.$scopedSlots)[direction]) == null ? void 0 : _this$$scopedSlots$di2.call(_this$$scopedSlots, {
-        on,
-        attrs
-      })) != null ? _this$$scopedSlots$di : [this.$createElement(VBtn, {
-        props: {
-          icon: true
-        },
-        attrs,
-        on
-      }, [this.$createElement(VIcon, {
-        props: {
-          large: true
-        }
-      }, icon)])];
-      return this.$createElement('div', {
-        staticClass: `v-window__${direction}`
-      }, children);
-    },
-
-    genControlIcons() {
-      const icons = [];
-      const prevIcon = this.$vuetify.rtl ? this.nextIcon : this.prevIcon;
-      /* istanbul ignore else */
-
-      if (this.hasPrev && prevIcon && typeof prevIcon === 'string') {
-        const icon = this.genIcon('prev', prevIcon, this.prev);
-        icon && icons.push(icon);
-      }
-
-      const nextIcon = this.$vuetify.rtl ? this.prevIcon : this.nextIcon;
-      /* istanbul ignore else */
-
-      if (this.hasNext && nextIcon && typeof nextIcon === 'string') {
-        const icon = this.genIcon('next', nextIcon, this.next);
-        icon && icons.push(icon);
-      }
-
-      return icons;
-    },
-
-    getNextIndex(index) {
-      const nextIndex = (index + 1) % this.items.length;
-      const item = this.items[nextIndex];
-      if (item.disabled) return this.getNextIndex(nextIndex);
-      return nextIndex;
-    },
-
-    getPrevIndex(index) {
-      const prevIndex = (index + this.items.length - 1) % this.items.length;
-      const item = this.items[prevIndex];
-      if (item.disabled) return this.getPrevIndex(prevIndex);
-      return prevIndex;
-    },
-
-    next() {
-      /* istanbul ignore if */
-      if (!this.hasActiveItems || !this.hasNext) return;
-      const nextIndex = this.getNextIndex(this.internalIndex);
-      const item = this.items[nextIndex];
-      this.internalValue = this.getValue(item, nextIndex);
-    },
-
-    prev() {
-      /* istanbul ignore if */
-      if (!this.hasActiveItems || !this.hasPrev) return;
-      const lastIndex = this.getPrevIndex(this.internalIndex);
-      const item = this.items[lastIndex];
-      this.internalValue = this.getValue(item, lastIndex);
-    },
-
-    updateReverse(val, oldVal) {
-      const itemsLength = this.items.length;
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const {
+      isRtl
+    } = useRtl();
+    const {
+      t
+    } = useLocale();
+    const group = useGroup(props, VWindowGroupSymbol);
+    const rootRef = ref();
+    const isRtlReverse = computed(() => isRtl.value ? !props.reverse : props.reverse);
+    const isReversed = ref(false);
+    const transition = 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 = ref(0);
+    const transitionHeight = ref(undefined);
+    const activeIndex = computed(() => {
+      return group.items.value.findIndex(item => group.selected.value.includes(item.id));
+    });
+    watch(activeIndex, (newVal, oldVal) => {
+      const itemsLength = group.items.value.length;
       const lastIndex = itemsLength - 1;
-      if (itemsLength <= 2) return val < oldVal;
 
-      if (val === lastIndex && oldVal === 0) {
-        return true;
-      } else if (val === 0 && oldVal === lastIndex) {
-        return false;
+      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 {
-        return val < oldVal;
+        isReversed.value = newVal < oldVal;
       }
+    });
+    provide(VWindowSymbol, {
+      transition,
+      isReversed,
+      transitionCount,
+      transitionHeight,
+      rootRef
+    });
+    const canMoveBack = computed(() => props.continuous || activeIndex.value !== 0);
+    const canMoveForward = computed(() => props.continuous || activeIndex.value !== group.items.value.length - 1);
+
+    function prev() {
+      canMoveBack.value && group.prev();
     }
 
-  },
-
-  render(h) {
-    const data = {
-      staticClass: 'v-window',
-      class: this.classes,
-      directives: []
-    };
+    function next() {
+      canMoveForward.value && group.next();
+    }
 
-    if (!this.touchless) {
-      const value = this.touch || {
+    const arrows = 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
+      }) : _createVNode(VBtn, prevProps, null) : _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
+      }) : _createVNode(VBtn, nextProps, null) : _createVNode("div", null, null));
+      return arrows;
+    });
+    const touchOptions = computed(() => {
+      if (props.touch === false) return props.touch;
+      const options = {
         left: () => {
-          this.$vuetify.rtl ? this.prev() : this.next();
+          isRtlReverse.value ? prev() : next();
         },
         right: () => {
-          this.$vuetify.rtl ? this.next() : this.prev();
+          isRtlReverse.value ? next() : prev();
         },
-        end: e => {
-          e.stopPropagation();
+        end: _ref2 => {
+          let {
+            originalEvent
+          } = _ref2;
+          originalEvent.stopPropagation();
         },
-        start: e => {
-          e.stopPropagation();
+        start: _ref3 => {
+          let {
+            originalEvent
+          } = _ref3;
+          originalEvent.stopPropagation();
         }
       };
-      data.directives.push({
-        name: 'touch',
-        value
-      });
-    }
-
-    return h('div', data, [this.genContainer()]);
+      return { ...options,
+        ...(props.touch === true ? {} : props.touch)
+      };
+    });
+    useRender(() => {
+      var _slots$default, _slots$additional;
+
+      return _withDirectives(_createVNode(props.tag, {
+        "ref": rootRef,
+        "class": ['v-window', {
+          'v-window--show-arrows-on-hover': props.showArrows === 'hover'
+        }, themeClasses.value]
+      }, {
+        default: () => [_createVNode("div", {
+          "class": "v-window__container",
+          "style": {
+            height: transitionHeight.value
+          }
+        }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, {
+          group
+        }), props.showArrows !== false && _createVNode("div", {
+          "class": "v-window__controls"
+        }, [arrows.value])]), (_slots$additional = slots.additional) == null ? void 0 : _slots$additional.call(slots, {
+          group
+        })]
+      }), [[_resolveDirective("touch"), touchOptions.value]]);
+    });
+    return {
+      group
+    };
   }
 
 });

package/lib/components/VWindow/VWindow.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VWindow/VWindow.ts"],"names":["Touch","VBtn","VIcon","BaseItemGroup","extend","name","directives","provide","windowGroup","props","activeClass","type","String","default","continuous","Boolean","mandatory","nextIcon","prevIcon","reverse","showArrows","showArrowsOnHover","touch","Object","touchless","value","required","vertical","data","changedByDelimiters","internalHeight","undefined","transitionHeight","transitionCount","isBooted","isReverse","computed","isActive","classes","options","call","computedTransition","axis","internalReverse","direction","hasActiveItems","items","find","item","disabled","hasNext","internalIndex","length","hasPrev","findIndex","i","internalValue","getValue","$vuetify","rtl","watch","val","oldVal","updateReverse","mounted","window","requestAnimationFrame","methods","genDefaultSlot","$slots","genContainer","children","push","genControlIcons","$createElement","staticClass","class","style","height","genIcon","icon","click","on","e","stopPropagation","attrs","lang","t","$scopedSlots","large","icons","prev","next","getNextIndex","index","nextIndex","getPrevIndex","prevIndex","lastIndex","itemsLength","render","h","left","right","end","start"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Styles\nimport './VWindow.sass'\n\n// Types\nimport { VNode, VNodeDirective } from 'vue/types/vnode'\nimport { PropType } from 'vue'\nimport { TouchHandlers } from 'vuetify/types'\n\n// Directives\nimport Touch from '../../directives/touch'\n\n// Components\nimport VBtn from '../VBtn'\nimport VIcon from '../VIcon'\nimport { BaseItemGroup } from '../VItemGroup/VItemGroup'\n\n/* @vue/component */\nexport default BaseItemGroup.extend({\n  name: 'v-window',\n\n  directives: { Touch },\n\n  provide (): object {\n    return {\n      windowGroup: this,\n    }\n  },\n\n  props: {\n    activeClass: {\n      type: String,\n      default: 'v-window-item--active',\n    },\n    continuous: Boolean,\n    mandatory: {\n      type: Boolean,\n      default: true,\n    },\n    nextIcon: {\n      type: [Boolean, String],\n      default: '$next',\n    },\n    prevIcon: {\n      type: [Boolean, String],\n      default: '$prev',\n    },\n    reverse: Boolean,\n    showArrows: Boolean,\n    showArrowsOnHover: Boolean,\n    touch: Object as PropType<TouchHandlers>,\n    touchless: Boolean,\n    value: {\n      required: false,\n    },\n    vertical: Boolean,\n  },\n\n  data () {\n    return {\n      changedByDelimiters: false,\n      internalHeight: undefined as undefined | string, // This can be fixed by child class.\n      transitionHeight: undefined as undefined | string, // Intermediate height during transition.\n      transitionCount: 0, // Number of windows in transition state.\n      isBooted: false,\n      isReverse: false,\n    }\n  },\n\n  computed: {\n    isActive (): boolean {\n      return this.transitionCount > 0\n    },\n    classes (): object {\n      return {\n        ...BaseItemGroup.options.computed.classes.call(this),\n        'v-window--show-arrows-on-hover': this.showArrowsOnHover,\n      }\n    },\n    computedTransition (): string {\n      if (!this.isBooted) return ''\n\n      const axis = this.vertical ? 'y' : 'x'\n      const reverse = this.internalReverse ? !this.isReverse : this.isReverse\n      const direction = reverse ? '-reverse' : ''\n\n      return `v-window-${axis}${direction}-transition`\n    },\n    hasActiveItems (): boolean {\n      return Boolean(\n        this.items.find(item => !item.disabled)\n      )\n    },\n    hasNext (): boolean {\n      return this.continuous || this.internalIndex < this.items.length - 1\n    },\n    hasPrev (): boolean {\n      return this.continuous || this.internalIndex > 0\n    },\n    internalIndex (): number {\n      return this.items.findIndex((item, i) => {\n        return this.internalValue === this.getValue(item, i)\n      })\n    },\n    internalReverse (): boolean {\n      return this.$vuetify.rtl ? !this.reverse : this.reverse\n    },\n  },\n\n  watch: {\n    internalIndex (val, oldVal) {\n      this.isReverse = this.updateReverse(val, oldVal)\n    },\n  },\n\n  mounted () {\n    window.requestAnimationFrame(() => (this.isBooted = true))\n  },\n\n  methods: {\n    genDefaultSlot () {\n      return this.$slots.default\n    },\n    genContainer (): VNode {\n      const children = [this.genDefaultSlot()]\n\n      if (this.showArrows) {\n        children.push(this.genControlIcons())\n      }\n\n      return this.$createElement('div', {\n        staticClass: 'v-window__container',\n        class: {\n          'v-window__container--is-active': this.isActive,\n        },\n        style: {\n          height: this.internalHeight || this.transitionHeight,\n        },\n      }, children)\n    },\n    genIcon (\n      direction: 'prev' | 'next',\n      icon: string,\n      click: () => void\n    ) {\n      const on = {\n        click: (e: Event) => {\n          e.stopPropagation()\n          this.changedByDelimiters = true\n          click()\n        },\n      }\n      const attrs = {\n        'aria-label': this.$vuetify.lang.t(`$vuetify.carousel.${direction}`),\n      }\n      const children = this.$scopedSlots[direction]?.({\n        on,\n        attrs,\n      }) ?? [this.$createElement(VBtn, {\n        props: { icon: true },\n        attrs,\n        on,\n      }, [\n        this.$createElement(VIcon, {\n          props: { large: true },\n        }, icon),\n      ])]\n\n      return this.$createElement('div', {\n        staticClass: `v-window__${direction}`,\n      }, children)\n    },\n    genControlIcons () {\n      const icons = []\n\n      const prevIcon = this.$vuetify.rtl\n        ? this.nextIcon\n        : this.prevIcon\n\n      /* istanbul ignore else */\n      if (\n        this.hasPrev &&\n        prevIcon &&\n        typeof prevIcon === 'string'\n      ) {\n        const icon = this.genIcon('prev', prevIcon, this.prev)\n        icon && icons.push(icon)\n      }\n\n      const nextIcon = this.$vuetify.rtl\n        ? this.prevIcon\n        : this.nextIcon\n\n      /* istanbul ignore else */\n      if (\n        this.hasNext &&\n        nextIcon &&\n        typeof nextIcon === 'string'\n      ) {\n        const icon = this.genIcon('next', nextIcon, this.next)\n        icon && icons.push(icon)\n      }\n\n      return icons\n    },\n    getNextIndex (index: number): number {\n      const nextIndex = (index + 1) % this.items.length\n      const item = this.items[nextIndex]\n\n      if (item.disabled) return this.getNextIndex(nextIndex)\n\n      return nextIndex\n    },\n    getPrevIndex (index: number): number {\n      const prevIndex = (index + this.items.length - 1) % this.items.length\n      const item = this.items[prevIndex]\n\n      if (item.disabled) return this.getPrevIndex(prevIndex)\n\n      return prevIndex\n    },\n    next () {\n      /* istanbul ignore if */\n      if (!this.hasActiveItems || !this.hasNext) return\n\n      const nextIndex = this.getNextIndex(this.internalIndex)\n      const item = this.items[nextIndex]\n\n      this.internalValue = this.getValue(item, nextIndex)\n    },\n    prev () {\n      /* istanbul ignore if */\n      if (!this.hasActiveItems || !this.hasPrev) return\n\n      const lastIndex = this.getPrevIndex(this.internalIndex)\n      const item = this.items[lastIndex]\n\n      this.internalValue = this.getValue(item, lastIndex)\n    },\n    updateReverse (val: number, oldVal: number) {\n      const itemsLength = this.items.length\n      const lastIndex = itemsLength - 1\n\n      if (itemsLength <= 2) return val < oldVal\n\n      if (val === lastIndex && oldVal === 0) {\n        return true\n      } else if (val === 0 && oldVal === lastIndex) {\n        return false\n      } else {\n        return val < oldVal\n      }\n    },\n  },\n\n  render (h): VNode {\n    const data = {\n      staticClass: 'v-window',\n      class: this.classes,\n      directives: [] as VNodeDirective[],\n    }\n\n    if (!this.touchless) {\n      const value = this.touch || {\n        left: () => {\n          this.$vuetify.rtl ? this.prev() : this.next()\n        },\n        right: () => {\n          this.$vuetify.rtl ? this.next() : this.prev()\n        },\n        end: (e: TouchEvent) => {\n          e.stopPropagation()\n        },\n        start: (e: TouchEvent) => {\n          e.stopPropagation()\n        },\n      }\n\n      data.directives.push({\n        name: 'touch',\n        value,\n      })\n    }\n\n    return h('div', data, [this.genContainer()])\n  },\n})\n"],"file":"VWindow.mjs"}
+{"version":3,"file":"VWindow.mjs","names":["VBtn","makeTagProps","makeThemeProps","provideTheme","useGroup","useLocale","useRtl","Touch","computed","provide","ref","watch","genericComponent","useRender","VWindowSymbol","Symbol","for","VWindowGroupSymbol","VWindow","name","directives","props","continuous","Boolean","nextIcon","type","String","Function","Object","default","prevIcon","reverse","showArrows","validator","v","touch","undefined","direction","modelValue","disabled","selectedClass","mandatory","emits","setup","slots","themeClasses","isRtl","t","group","rootRef","isRtlReverse","value","isReversed","transition","axis","transitionCount","transitionHeight","activeIndex","items","findIndex","item","selected","includes","id","newVal","oldVal","itemsLength","length","lastIndex","canMoveBack","canMoveForward","prev","next","arrows","prevProps","icon","class","onClick","ariaLabel","push","nextProps","touchOptions","options","left","right","end","originalEvent","stopPropagation","start","height","additional"],"sources":["../../../src/components/VWindow/VWindow.tsx"],"sourcesContent":["// Styles\nimport './VWindow.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useGroup } from '@/composables/group'\nimport { useLocale } from '@/composables/locale'\nimport { useRtl } from '@/composables/rtl'\n\n// Directives\nimport { Touch } from '@/directives/touch'\n\n// Utilities\nimport { computed, provide, ref, watch } from 'vue'\nimport { genericComponent, useRender } from '@/util'\n\n// Types\nimport type { ComputedRef, InjectionKey, PropType, Ref } from 'vue'\nimport type { GroupItemProvide, GroupProvide } from '@/composables/group'\nimport type { TouchHandlers } from '@/directives/touch'\nimport type { MakeSlots } from '@/util'\nimport type { IconValue } from '@/composables/icons'\n\ntype WindowProvide = {\n  transition: ComputedRef<undefined | string>\n  transitionCount: Ref<number>\n  transitionHeight: Ref<undefined | string>\n  isReversed: Ref<boolean>\n  rootRef: Ref<HTMLElement | undefined>\n}\n\ntype ControlProps = {\n  icon: IconValue\n  class: string\n  onClick: () => void\n  ariaLabel: string\n}\n\nexport const VWindowSymbol: InjectionKey<WindowProvide> = Symbol.for('vuetify:v-window')\nexport const VWindowGroupSymbol: InjectionKey<GroupItemProvide> = Symbol.for('vuetify:v-window-group')\n\nexport const VWindow = genericComponent<new () => {\n  $slots: MakeSlots<{\n    default: [{ group: GroupProvide }]\n    additional: [{ group: GroupProvide }]\n    prev: [{ props: ControlProps }]\n    next: [{ props: ControlProps }]\n  }>\n}>()({\n  name: 'VWindow',\n\n  directives: {\n    Touch,\n  },\n\n  props: {\n    continuous: Boolean,\n    nextIcon: {\n      type: [Boolean, String, Function, Object] as PropType<IconValue>,\n      default: '$next',\n    },\n    prevIcon: {\n      type: [Boolean, String, Function, Object] as PropType<IconValue>,\n      default: '$prev',\n    },\n    reverse: Boolean,\n    showArrows: {\n      type: [Boolean, String],\n      validator: (v: any) => typeof v === 'boolean' || v === 'hover',\n    },\n    touch: {\n      type: [Object, Boolean] as PropType<boolean | TouchHandlers>,\n      default: undefined,\n    },\n    direction: {\n      type: String,\n      default: 'horizontal',\n    },\n\n    modelValue: null,\n    disabled: Boolean,\n    selectedClass: {\n      type: String,\n      default: 'v-window-item--active',\n    },\n    // TODO: mandatory should probably not be exposed but do this for now\n    mandatory: {\n      default: 'force' as const,\n    },\n\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  emits: {\n    'update:modelValue': (v: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { isRtl } = useRtl()\n    const { t } = useLocale()\n\n    const group = useGroup(props, VWindowGroupSymbol)\n\n    const rootRef = ref()\n    const isRtlReverse = computed(() => isRtl.value ? !props.reverse : props.reverse)\n    const isReversed = ref(false)\n    const transition = computed(() => {\n      const axis = props.direction === 'vertical' ? 'y' : 'x'\n      const reverse = isRtlReverse.value ? !isReversed.value : isReversed.value\n      const direction = reverse ? '-reverse' : ''\n\n      return `v-window-${axis}${direction}-transition`\n    })\n    const transitionCount = ref(0)\n    const transitionHeight = ref<undefined | string>(undefined)\n\n    const activeIndex = computed(() => {\n      return group.items.value.findIndex(item => group.selected.value.includes(item.id))\n    })\n\n    watch(activeIndex, (newVal, oldVal) => {\n      const itemsLength = group.items.value.length\n      const lastIndex = itemsLength - 1\n\n      if (itemsLength <= 2) {\n        isReversed.value = newVal < oldVal\n      } else if (newVal === lastIndex && oldVal === 0) {\n        isReversed.value = true\n      } else if (newVal === 0 && oldVal === lastIndex) {\n        isReversed.value = false\n      } else {\n        isReversed.value = newVal < oldVal\n      }\n    })\n\n    provide(VWindowSymbol, {\n      transition,\n      isReversed,\n      transitionCount,\n      transitionHeight,\n      rootRef,\n    })\n\n    const canMoveBack = computed(() => props.continuous || activeIndex.value !== 0)\n    const canMoveForward = computed(() => props.continuous || activeIndex.value !== group.items.value.length - 1)\n\n    function prev () {\n      canMoveBack.value && group.prev()\n    }\n\n    function next () {\n      canMoveForward.value && group.next()\n    }\n\n    const arrows = computed(() => {\n      const arrows = []\n\n      const prevProps = {\n        icon: isRtl.value ? props.nextIcon : props.prevIcon,\n        class: `v-window__${isRtlReverse.value ? 'right' : 'left'}`,\n        onClick: group.prev,\n        ariaLabel: t('$vuetify.carousel.prev'),\n      }\n\n      arrows.push(canMoveBack.value\n        ? slots.prev\n          ? slots.prev({ props: prevProps })\n          : <VBtn { ...prevProps } />\n        : <div />\n      )\n\n      const nextProps = {\n        icon: isRtl.value ? props.prevIcon : props.nextIcon,\n        class: `v-window__${isRtlReverse.value ? 'left' : 'right'}`,\n        onClick: group.next,\n        ariaLabel: t('$vuetify.carousel.next'),\n      }\n\n      arrows.push(canMoveForward.value\n        ? slots.next\n          ? slots.next({ props: nextProps })\n          : <VBtn { ...nextProps } />\n        : <div />\n      )\n\n      return arrows\n    })\n\n    const touchOptions = computed(() => {\n      if (props.touch === false) return props.touch\n\n      const options: TouchHandlers = {\n        left: () => {\n          isRtlReverse.value ? prev() : next()\n        },\n        right: () => {\n          isRtlReverse.value ? next() : prev()\n        },\n        end: ({ originalEvent }) => {\n          originalEvent.stopPropagation()\n        },\n        start: ({ originalEvent }) => {\n          originalEvent.stopPropagation()\n        },\n      }\n\n      return {\n        ...options,\n        ...(props.touch === true ? {} : props.touch),\n      }\n    })\n\n    useRender(() => (\n      <props.tag\n        ref={ rootRef }\n        class={[\n          'v-window',\n          {\n            'v-window--show-arrows-on-hover': props.showArrows === 'hover',\n          },\n          themeClasses.value,\n        ]}\n        v-touch={ touchOptions.value }\n      >\n        <div\n          class=\"v-window__container\"\n          style={{\n            height: transitionHeight.value,\n          }}\n        >\n          { slots.default?.({ group }) }\n\n          { props.showArrows !== false && (\n            <div class=\"v-window__controls\">\n              { arrows.value }\n            </div>\n          )}\n        </div>\n\n        { slots.additional?.({ group }) }\n      </props.tag>\n    ))\n\n    return {\n      group,\n    }\n  },\n})\n\nexport type VWindow = InstanceType<typeof VWindow>\n"],"mappings":"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"}

package/lib/components/VWindow/VWindow.sass

@@ -1,4 +1,6 @@
-@import './_variables.scss'
+// Imports
+@forward './variables'
+@use './variables' as *
 
 .v-window
   overflow: hidden
@@ -10,59 +12,33 @@
     position: relative
     transition: $window-transition
 
-    &--is-active
-      overflow: hidden
-
-  &__prev,
-  &__next
-    background: rgba(0, 0, 0, .3)
-    border-radius: 50%
+  &__controls
     position: absolute
-    margin: $window-controls-margin
-    top: $window-controls-top
-    z-index: 1
-
-    .v-btn:hover
-      background: none
-
-  &__prev
-    +ltr()
-      left: 0
-
-    +rtl()
-      right: 0
-
-  &__next
-    +ltr()
-      right: 0
+    left: 0
+    top: 0
+    width: 100%
+    height: 100%
+    display: flex
+    align-items: center
+    justify-content: space-between
+    padding: $window-controls-padding
+    pointer-events: none
 
-    +rtl()
-      left: 0
+    *
+      pointer-events: auto
 
   &--show-arrows-on-hover
     overflow: hidden
 
-    .v-window__next,
-    .v-window__prev
-      transition: .2s transform map-get($transition, 'swing')
-
-    .v-window__prev
-      +ltr()
-        transform: translateX(-200%)
-
-      +rtl()
-        transform: translateX(200%)
-
-    .v-window__next
-      +ltr()
-        transform: translateX(200%)
+    .v-window__left
+      transform: translateX(-200%)
 
-      +rtl()
-        transform: translateX(-200%)
+    .v-window__right
+      transform: translateX(200%)
 
     &:hover
-      .v-window__next,
-      .v-window__prev
+      .v-window__left,
+      .v-window__right
         transform: translateX(0)
 
   &-x-transition,
@@ -73,35 +49,35 @@
     &-leave-active
       transition: $window-transition
 
-    &-leave,
+    &-leave-from,
     &-leave-to
       position: absolute !important
       top: 0
       width: 100%
 
   &-x-transition
-    &-enter
+    &-enter-from
       transform: translateX(100%)
 
     &-leave-to
       transform: translateX(-100%)
 
   &-x-reverse-transition
-    &-enter
+    &-enter-from
       transform: translateX(-100%)
 
     &-leave-to
       transform: translateX(100%)
 
   &-y-transition
-    &-enter
+    &-enter-from
       transform: translateY(100%)
 
     &-leave-to
       transform: translateY(-100%)
 
   &-y-reverse-transition
-    &-enter
+    &-enter-from
       transform: translateY(-100%)
 
     &-leave-to