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

package/lib/components/VSlideGroup/VSlideGroup.mjs

@@ -1,418 +1,367 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VSlideGroup.sass"; // Components
-
-import VIcon from "../VIcon/index.mjs";
-import { VFadeTransition } from "../transitions/index.mjs"; // Extensions
-
-import { BaseItemGroup } from "../VItemGroup/VItemGroup.mjs"; // Mixins
+import "./VSlideGroup.css"; // Components
 
-import Mobile from "../../mixins/mobile/index.mjs"; // Directives
+import { VFadeTransition } from "../transitions/index.mjs";
+import { VIcon } from "../VIcon/index.mjs"; // Composables
 
-import Resize from "../../directives/resize/index.mjs";
-import Touch from "../../directives/touch/index.mjs"; // Utilities
+import { IconValue } from "../../composables/icons.mjs";
+import { makeGroupProps, useGroup } from "../../composables/group.mjs";
+import { makeTagProps } from "../../composables/tag.mjs";
+import { useDisplay } from "../../composables/index.mjs";
+import { useResizeObserver } from "../../composables/resizeObserver.mjs";
+import { useRtl } from "../../composables/rtl.mjs"; // Utilities
 
-import mixins from "../../util/mixins.mjs"; // Types
+import { bias, calculateCenteredOffset, calculateUpdatedOffset } from "./helpers.mjs";
+import { clamp, defineComponent, IN_BROWSER, useRender } from "../../util/index.mjs";
+import { computed, ref, watch } from 'vue'; // Types
 
-export const BaseSlideGroup = mixins(BaseItemGroup, Mobile
-/* @vue/component */
-).extend({
-  name: 'base-slide-group',
-  directives: {
-    Resize,
-    Touch
-  },
+export const VSlideGroupSymbol = Symbol.for('vuetify:v-slide-group');
+export const VSlideGroup = defineComponent({
+  name: 'VSlideGroup',
   props: {
-    activeClass: {
+    centerActive: Boolean,
+    direction: {
       type: String,
-      default: 'v-slide-item--active'
+      default: 'horizontal'
+    },
+    symbol: {
+      type: null,
+      default: VSlideGroupSymbol
     },
-    centerActive: Boolean,
     nextIcon: {
-      type: String,
+      type: IconValue,
       default: '$next'
     },
     prevIcon: {
-      type: String,
+      type: IconValue,
       default: '$prev'
     },
     showArrows: {
       type: [Boolean, String],
       validator: v => typeof v === 'boolean' || ['always', 'desktop', 'mobile'].includes(v)
-    }
-  },
-  data: () => ({
-    internalItemsLength: 0,
-    isOverflowing: false,
-    resizeTimeout: 0,
-    startX: 0,
-    isSwipingHorizontal: false,
-    isSwiping: false,
-    scrollOffset: 0,
-    widths: {
-      content: 0,
-      wrapper: 0
-    }
-  }),
-  computed: {
-    canTouch() {
-      return typeof window !== 'undefined';
-    },
-
-    __cachedNext() {
-      return this.genTransition('next');
-    },
-
-    __cachedPrev() {
-      return this.genTransition('prev');
     },
-
-    classes() {
-      return { ...BaseItemGroup.options.computed.classes.call(this),
-        'v-slide-group': true,
-        'v-slide-group--has-affixes': this.hasAffixes,
-        'v-slide-group--is-overflowing': this.isOverflowing
-      };
-    },
-
-    hasAffixes() {
-      switch (this.showArrows) {
-        // Always show arrows on desktop & mobile
-        case 'always':
-          return true;
-        // Always show arrows on desktop
-
-        case 'desktop':
-          return !this.isMobile;
-        // Show arrows on mobile when overflowing.
-        // This matches the default 2.2 behavior
-
-        case true:
-          return this.isOverflowing || Math.abs(this.scrollOffset) > 0;
-        // Always show on mobile
-
-        case 'mobile':
-          return this.isMobile || this.isOverflowing || Math.abs(this.scrollOffset) > 0;
-        // https://material.io/components/tabs#scrollable-tabs
-        // Always show arrows when
-        // overflowed on desktop
-
-        default:
-          return !this.isMobile && (this.isOverflowing || Math.abs(this.scrollOffset) > 0);
-      }
-    },
-
-    hasNext() {
-      if (!this.hasAffixes) return false;
-      const {
-        content,
-        wrapper
-      } = this.widths; // Check one scroll ahead to know the width of right-most item
-
-      return content > Math.abs(this.scrollOffset) + wrapper;
-    },
-
-    hasPrev() {
-      return this.hasAffixes && this.scrollOffset !== 0;
-    }
-
+    ...makeTagProps(),
+    ...makeGroupProps({
+      selectedClass: 'v-slide-group-item--active'
+    })
   },
-  watch: {
-    internalValue: 'setWidths',
-    // When overflow changes, the arrows alter
-    // the widths of the content and wrapper
-    // and need to be recalculated
-    isOverflowing: 'setWidths',
-
-    scrollOffset(val) {
-      this.$refs.content.style.transform = "translateX(".concat(-val, "px)");
-    }
-
+  emits: {
+    'update:modelValue': value => true
   },
 
-  beforeUpdate() {
-    this.internalItemsLength = (this.$children || []).length;
-  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      isRtl
+    } = useRtl();
+    const {
+      mobile
+    } = useDisplay();
+    const group = useGroup(props, props.symbol);
+    const isOverflowing = ref(false);
+    const scrollOffset = ref(0);
+    const containerSize = ref(0);
+    const contentSize = ref(0);
+    const isHorizontal = computed(() => props.direction === 'horizontal');
+    const {
+      resizeRef: containerRef,
+      contentRect: containerRect
+    } = useResizeObserver();
+    const {
+      resizeRef: contentRef,
+      contentRect
+    } = useResizeObserver();
+    const firstSelectedIndex = computed(() => {
+      if (!group.selected.value.length) return -1;
+      return group.items.value.findIndex(item => item.id === group.selected.value[0]);
+    });
+    const lastSelectedIndex = computed(() => {
+      if (!group.selected.value.length) return -1;
+      return group.items.value.findIndex(item => item.id === group.selected.value[group.selected.value.length - 1]);
+    });
+
+    if (IN_BROWSER) {
+      let frame = -1;
+      watch(() => [group.selected.value, containerRect.value, contentRect.value, isHorizontal.value], () => {
+        cancelAnimationFrame(frame);
+        frame = requestAnimationFrame(() => {
+          if (containerRect.value && contentRect.value) {
+            const sizeProperty = isHorizontal.value ? 'width' : 'height';
+            containerSize.value = containerRect.value[sizeProperty];
+            contentSize.value = contentRect.value[sizeProperty];
+            isOverflowing.value = containerSize.value + 1 < contentSize.value;
+          }
 
-  updated() {
-    if (this.internalItemsLength === (this.$children || []).length) return;
-    this.setWidths();
-  },
+          if (firstSelectedIndex.value >= 0 && contentRef.value) {
+            // TODO: Is this too naive? Should we store element references in group composable?
+            const selectedElement = contentRef.value.children[lastSelectedIndex.value];
+
+            if (firstSelectedIndex.value === 0 || !isOverflowing.value) {
+              scrollOffset.value = 0;
+            } else if (props.centerActive) {
+              scrollOffset.value = calculateCenteredOffset({
+                selectedElement,
+                containerSize: containerSize.value,
+                contentSize: contentSize.value,
+                isRtl: isRtl.value,
+                isHorizontal: isHorizontal.value
+              });
+            } else if (isOverflowing.value) {
+              scrollOffset.value = calculateUpdatedOffset({
+                selectedElement,
+                containerSize: containerSize.value,
+                contentSize: contentSize.value,
+                isRtl: isRtl.value,
+                currentScrollOffset: scrollOffset.value,
+                isHorizontal: isHorizontal.value
+              });
+            }
+          }
+        });
+      });
+    }
 
-  methods: {
-    // Always generate next for scrollable hint
-    genNext() {
-      const slot = this.$scopedSlots.next ? this.$scopedSlots.next({}) : this.$slots.next || this.__cachedNext;
-      return this.$createElement('div', {
-        staticClass: 'v-slide-group__next',
-        class: {
-          'v-slide-group__next--disabled': !this.hasNext
-        },
-        on: {
-          click: () => this.onAffixClick('next')
-        },
-        key: 'next'
-      }, [slot]);
-    },
+    const disableTransition = ref(false);
+    let startTouch = 0;
+    let startOffset = 0;
 
-    genContent() {
-      return this.$createElement('div', {
-        staticClass: 'v-slide-group__content',
-        ref: 'content'
-      }, this.$slots.default);
-    },
+    function onTouchstart(e) {
+      const sizeProperty = isHorizontal.value ? 'clientX' : 'clientY';
+      const sign = isRtl.value && isHorizontal.value ? -1 : 1;
+      startOffset = sign * scrollOffset.value;
+      startTouch = e.touches[0][sizeProperty];
+      disableTransition.value = true;
+    }
 
-    genData() {
-      return {
-        class: this.classes,
-        directives: [{
-          name: 'resize',
-          value: this.onResize
-        }]
-      };
-    },
+    function onTouchmove(e) {
+      if (!isOverflowing.value) return;
+      const sizeProperty = isHorizontal.value ? 'clientX' : 'clientY';
+      const sign = isRtl.value && isHorizontal.value ? -1 : 1;
+      scrollOffset.value = sign * (startOffset + startTouch - e.touches[0][sizeProperty]);
+    }
 
-    genIcon(location) {
-      let icon = location;
+    function onTouchend(e) {
+      const maxScrollOffset = contentSize.value - containerSize.value;
 
-      if (this.$vuetify.rtl && location === 'prev') {
-        icon = 'next';
-      } else if (this.$vuetify.rtl && location === 'next') {
-        icon = 'prev';
+      if (scrollOffset.value < 0 || !isOverflowing.value) {
+        scrollOffset.value = 0;
+      } else if (scrollOffset.value >= maxScrollOffset) {
+        scrollOffset.value = maxScrollOffset;
       }
 
-      const upperLocation = "".concat(location[0].toUpperCase()).concat(location.slice(1));
-      const hasAffix = this["has".concat(upperLocation)];
-      if (!this.showArrows && !hasAffix) return null;
-      return this.$createElement(VIcon, {
-        props: {
-          disabled: !hasAffix
-        }
-      }, this["".concat(icon, "Icon")]);
-    },
-
-    // Always generate prev for scrollable hint
-    genPrev() {
-      const slot = this.$scopedSlots.prev ? this.$scopedSlots.prev({}) : this.$slots.prev || this.__cachedPrev;
-      return this.$createElement('div', {
-        staticClass: 'v-slide-group__prev',
-        class: {
-          'v-slide-group__prev--disabled': !this.hasPrev
-        },
-        on: {
-          click: () => this.onAffixClick('prev')
-        },
-        key: 'prev'
-      }, [slot]);
-    },
+      disableTransition.value = false;
+    }
 
-    genTransition(location) {
-      return this.$createElement(VFadeTransition, [this.genIcon(location)]);
-    },
+    function onScroll() {
+      if (!containerRef.value) return;
+      containerRef.value[isHorizontal.value ? 'scrollLeft' : 'scrollTop'] = 0;
+    }
 
-    genWrapper() {
-      return this.$createElement('div', {
-        staticClass: 'v-slide-group__wrapper',
-        directives: [{
-          name: 'touch',
-          value: {
-            start: e => this.overflowCheck(e, this.onTouchStart),
-            move: e => this.overflowCheck(e, this.onTouchMove),
-            end: e => this.overflowCheck(e, this.onTouchEnd)
+    const isFocused = ref(false);
+
+    function onFocusin(e) {
+      isFocused.value = true;
+      if (!isOverflowing.value || !contentRef.value) return; // Focused element is likely to be the root of an item, so a
+      // breadth-first search will probably find it in the first iteration
+
+      for (const el of e.composedPath()) {
+        for (const item of contentRef.value.children) {
+          if (item === el) {
+            scrollOffset.value = calculateUpdatedOffset({
+              selectedElement: item,
+              containerSize: containerSize.value,
+              contentSize: contentSize.value,
+              isRtl: isRtl.value,
+              currentScrollOffset: scrollOffset.value,
+              isHorizontal: isHorizontal.value
+            });
+            return;
           }
-        }],
-        ref: 'wrapper'
-      }, [this.genContent()]);
-    },
-
-    calculateNewOffset(direction, widths, rtl, currentScrollOffset) {
-      const sign = rtl ? -1 : 1;
-      const newAbosluteOffset = sign * currentScrollOffset + (direction === 'prev' ? -1 : 1) * widths.wrapper;
-      return sign * Math.max(Math.min(newAbosluteOffset, widths.content - widths.wrapper), 0);
-    },
-
-    onAffixClick(location) {
-      this.$emit("click:".concat(location));
-      this.scrollTo(location);
-    },
-
-    onResize() {
-      /* istanbul ignore next */
-      if (this._isDestroyed) return;
-      this.setWidths();
-    },
+        }
+      }
+    }
 
-    onTouchStart(e) {
-      const {
-        content
-      } = this.$refs;
-      this.startX = this.scrollOffset + e.touchstartX;
-      content.style.setProperty('transition', 'none');
-      content.style.setProperty('willChange', 'transform');
-    },
+    function onFocusout(e) {
+      isFocused.value = false;
+    }
 
-    onTouchMove(e) {
-      if (!this.canTouch) return;
+    function onFocus(e) {
+      var _contentRef$value;
 
-      if (!this.isSwiping) {
-        // only calculate disableSwipeHorizontal during the first onTouchMove invoke
-        // in order to ensure disableSwipeHorizontal value is consistent between onTouchStart and onTouchEnd
-        const diffX = e.touchmoveX - e.touchstartX;
-        const diffY = e.touchmoveY - e.touchstartY;
-        this.isSwipingHorizontal = Math.abs(diffX) > Math.abs(diffY);
-        this.isSwiping = true;
-      }
-
-      if (this.isSwipingHorizontal) {
-        // sliding horizontally
-        this.scrollOffset = this.startX - e.touchmoveX; // temporarily disable window vertical scrolling
+      if (!isFocused.value && !(e.relatedTarget && (_contentRef$value = contentRef.value) != null && _contentRef$value.contains(e.relatedTarget))) focus();
+    }
 
-        document.documentElement.style.overflowY = 'hidden';
-      }
-    },
+    function onKeydown(e) {
+      if (!contentRef.value) return;
 
-    onTouchEnd() {
-      if (!this.canTouch) return;
-      const {
-        content,
-        wrapper
-      } = this.$refs;
-      const maxScrollOffset = content.clientWidth - wrapper.clientWidth;
-      content.style.setProperty('transition', null);
-      content.style.setProperty('willChange', null);
-
-      if (this.$vuetify.rtl) {
-        /* istanbul ignore else */
-        if (this.scrollOffset > 0 || !this.isOverflowing) {
-          this.scrollOffset = 0;
-        } else if (this.scrollOffset <= -maxScrollOffset) {
-          this.scrollOffset = -maxScrollOffset;
+      if (isHorizontal.value) {
+        if (e.key === 'ArrowRight') {
+          focus(isRtl.value ? 'prev' : 'next');
+        } else if (e.key === 'ArrowLeft') {
+          focus(isRtl.value ? 'next' : 'prev');
         }
       } else {
-        /* istanbul ignore else */
-        if (this.scrollOffset < 0 || !this.isOverflowing) {
-          this.scrollOffset = 0;
-        } else if (this.scrollOffset >= maxScrollOffset) {
-          this.scrollOffset = maxScrollOffset;
+        if (e.key === 'ArrowDown') {
+          focus('next');
+        } else if (e.key === 'ArrowUp') {
+          focus('prev');
         }
       }
 
-      this.isSwiping = false; // rollback whole page scrolling to default
-
-      document.documentElement.style.removeProperty('overflow-y');
-    },
-
-    overflowCheck(e, fn) {
-      e.stopPropagation();
-      this.isOverflowing && fn(e);
-    },
-
-    scrollIntoView
-    /* istanbul ignore next */
-    () {
-      if (!this.selectedItem && this.items.length) {
-        const lastItemPosition = this.items[this.items.length - 1].$el.getBoundingClientRect();
-        const wrapperPosition = this.$refs.wrapper.getBoundingClientRect();
-
-        if (this.$vuetify.rtl && wrapperPosition.right < lastItemPosition.right || !this.$vuetify.rtl && wrapperPosition.left > lastItemPosition.left) {
-          this.scrollTo('prev');
-        }
+      if (e.key === 'Home') {
+        focus('first');
+      } else if (e.key === 'End') {
+        focus('last');
       }
+    }
 
-      if (!this.selectedItem) {
-        return;
-      }
+    function focus(location) {
+      if (!contentRef.value) return;
 
-      if (this.selectedIndex === 0 || !this.centerActive && !this.isOverflowing) {
-        this.scrollOffset = 0;
-      } else if (this.centerActive) {
-        this.scrollOffset = this.calculateCenteredOffset(this.selectedItem.$el, this.widths, this.$vuetify.rtl);
-      } else if (this.isOverflowing) {
-        this.scrollOffset = this.calculateUpdatedOffset(this.selectedItem.$el, this.widths, this.$vuetify.rtl, this.scrollOffset);
-      }
-    },
+      if (!location) {
+        var _focusable$;
 
-    calculateUpdatedOffset(selectedElement, widths, rtl, currentScrollOffset) {
-      const clientWidth = selectedElement.clientWidth;
-      const offsetLeft = rtl ? widths.content - selectedElement.offsetLeft - clientWidth : selectedElement.offsetLeft;
+        contentRef.value.querySelector('[tabindex]');
+        const focusable = [...contentRef.value.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')].filter(el => !el.hasAttribute('disabled'));
+        (_focusable$ = focusable[0]) == null ? void 0 : _focusable$.focus();
+      } else if (location === 'next') {
+        var _contentRef$value$que;
 
-      if (rtl) {
-        currentScrollOffset = -currentScrollOffset;
-      }
+        const el = (_contentRef$value$que = contentRef.value.querySelector(':focus')) == null ? void 0 : _contentRef$value$que.nextElementSibling;
+        if (el) el.focus();else focus('first');
+      } else if (location === 'prev') {
+        var _contentRef$value$que2;
 
-      const totalWidth = widths.wrapper + currentScrollOffset;
-      const itemOffset = clientWidth + offsetLeft;
-      const additionalOffset = clientWidth * 0.4;
+        const el = (_contentRef$value$que2 = contentRef.value.querySelector(':focus')) == null ? void 0 : _contentRef$value$que2.previousElementSibling;
+        if (el) el.focus();else focus('last');
+      } else if (location === 'first') {
+        var _contentRef$value$fir;
 
-      if (offsetLeft <= currentScrollOffset) {
-        currentScrollOffset = Math.max(offsetLeft - additionalOffset, 0);
-      } else if (totalWidth <= itemOffset) {
-        currentScrollOffset = Math.min(currentScrollOffset - (totalWidth - itemOffset - additionalOffset), widths.content - widths.wrapper);
+        (_contentRef$value$fir = contentRef.value.firstElementChild) == null ? void 0 : _contentRef$value$fir.focus();
+      } else if (location === 'last') {
+        var _contentRef$value$las;
+
+        (_contentRef$value$las = contentRef.value.lastElementChild) == null ? void 0 : _contentRef$value$las.focus();
       }
+    }
 
-      return rtl ? -currentScrollOffset : currentScrollOffset;
-    },
+    function scrollTo(location) {
+      const newAbsoluteOffset = scrollOffset.value + (location === 'prev' ? -1 : 1) * containerSize.value;
+      scrollOffset.value = clamp(newAbsoluteOffset, 0, contentSize.value - containerSize.value);
+    }
 
-    calculateCenteredOffset(selectedElement, widths, rtl) {
-      const {
-        offsetLeft,
-        clientWidth
-      } = selectedElement;
+    const contentStyles = computed(() => {
+      // This adds friction when scrolling the 'wrong' way when at max offset
+      let scrollAmount = scrollOffset.value > contentSize.value - containerSize.value ? -(contentSize.value - containerSize.value) + bias(contentSize.value - containerSize.value - scrollOffset.value) : -scrollOffset.value; // This adds friction when scrolling the 'wrong' way when at min offset
 
-      if (rtl) {
-        const offsetCentered = widths.content - offsetLeft - clientWidth / 2 - widths.wrapper / 2;
-        return -Math.min(widths.content - widths.wrapper, Math.max(0, offsetCentered));
-      } else {
-        const offsetCentered = offsetLeft + clientWidth / 2 - widths.wrapper / 2;
-        return Math.min(widths.content - widths.wrapper, Math.max(0, offsetCentered));
+      if (scrollOffset.value <= 0) {
+        scrollAmount = bias(-scrollOffset.value);
       }
-    },
-
-    scrollTo
-    /* istanbul ignore next */
-    (location) {
-      this.scrollOffset = this.calculateNewOffset(location, {
-        // Force reflow
-        content: this.$refs.content ? this.$refs.content.clientWidth : 0,
-        wrapper: this.$refs.wrapper ? this.$refs.wrapper.clientWidth : 0
-      }, this.$vuetify.rtl, this.scrollOffset);
-    },
 
-    setWidths
-    /* istanbul ignore next */
-    () {
-      window.requestAnimationFrame(() => {
-        const {
-          content,
-          wrapper
-        } = this.$refs;
-        this.widths = {
-          content: content ? content.clientWidth : 0,
-          wrapper: wrapper ? wrapper.clientWidth : 0
-        }; // https://github.com/vuetifyjs/vuetify/issues/13212
-        // We add +1 to the wrappers width to prevent an issue where the `clientWidth`
-        // gets calculated wrongly by the browser if using a different zoom-level.
-
-        this.isOverflowing = this.widths.wrapper + 1 < this.widths.content;
-        this.scrollIntoView();
-      });
-    }
+      const sign = isRtl.value && isHorizontal.value ? -1 : 1;
+      return {
+        transform: `translate${isHorizontal.value ? 'X' : 'Y'}(${sign * scrollAmount}px)`,
+        transition: disableTransition.value ? 'none' : '',
+        willChange: disableTransition.value ? 'transform' : ''
+      };
+    });
+    const slotProps = computed(() => ({
+      next: group.next,
+      prev: group.prev,
+      select: group.select,
+      isSelected: group.isSelected
+    }));
+    const hasAffixes = computed(() => {
+      switch (props.showArrows) {
+        // Always show arrows on desktop & mobile
+        case 'always':
+          return true;
+        // Always show arrows on desktop
 
-  },
+        case 'desktop':
+          return !mobile.value;
+        // Show arrows on mobile when overflowing.
+        // This matches the default 2.2 behavior
 
-  render(h) {
-    return h('div', this.genData(), [this.genPrev(), this.genWrapper(), this.genNext()]);
-  }
+        case true:
+          return isOverflowing.value || Math.abs(scrollOffset.value) > 0;
+        // Always show on mobile
 
-});
-export default BaseSlideGroup.extend({
-  name: 'v-slide-group',
+        case 'mobile':
+          return mobile.value || isOverflowing.value || Math.abs(scrollOffset.value) > 0;
+        // https://material.io/components/tabs#scrollable-tabs
+        // Always show arrows when
+        // overflowed on desktop
 
-  provide() {
+        default:
+          return !mobile.value && (isOverflowing.value || Math.abs(scrollOffset.value) > 0);
+      }
+    });
+    const hasPrev = computed(() => {
+      return Math.abs(scrollOffset.value) > 0;
+    });
+    const hasNext = computed(() => {
+      // Check one scroll ahead to know the width of right-most item
+      return contentSize.value > Math.abs(scrollOffset.value) + containerSize.value;
+    });
+    useRender(() => {
+      var _slots$prev, _slots$default, _slots$next;
+
+      return _createVNode(props.tag, {
+        "class": ['v-slide-group', {
+          'v-slide-group--vertical': !isHorizontal.value,
+          'v-slide-group--has-affixes': hasAffixes.value,
+          'v-slide-group--is-overflowing': isOverflowing.value
+        }],
+        "tabindex": isFocused.value || group.selected.value.length ? -1 : 0,
+        "onFocus": onFocus
+      }, {
+        default: () => [hasAffixes.value && _createVNode("div", {
+          "key": "prev",
+          "class": ['v-slide-group__prev', {
+            'v-slide-group__prev--disabled': !hasPrev.value
+          }],
+          "onClick": () => scrollTo('prev')
+        }, [((_slots$prev = slots.prev) == null ? void 0 : _slots$prev.call(slots, slotProps.value)) ?? _createVNode(VFadeTransition, null, {
+          default: () => [_createVNode(VIcon, {
+            "icon": isRtl.value ? props.nextIcon : props.prevIcon
+          }, null)]
+        })]), _createVNode("div", {
+          "key": "container",
+          "ref": containerRef,
+          "class": "v-slide-group__container",
+          "onScroll": onScroll
+        }, [_createVNode("div", {
+          "ref": contentRef,
+          "class": "v-slide-group__content",
+          "style": contentStyles.value,
+          "onTouchstartPassive": onTouchstart,
+          "onTouchmovePassive": onTouchmove,
+          "onTouchendPassive": onTouchend,
+          "onFocusin": onFocusin,
+          "onFocusout": onFocusout,
+          "onKeydown": onKeydown
+        }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, slotProps.value)])]), hasAffixes.value && _createVNode("div", {
+          "key": "next",
+          "class": ['v-slide-group__next', {
+            'v-slide-group__next--disabled': !hasNext.value
+          }],
+          "onClick": () => scrollTo('next')
+        }, [((_slots$next = slots.next) == null ? void 0 : _slots$next.call(slots, slotProps.value)) ?? _createVNode(VFadeTransition, null, {
+          default: () => [_createVNode(VIcon, {
+            "icon": isRtl.value ? props.prevIcon : props.nextIcon
+          }, null)]
+        })])]
+      });
+    });
     return {
-      slideGroup: this
+      selected: group.selected,
+      scrollTo,
+      scrollOffset,
+      focus
     };
   }