@kokoccc/vuetify 1.0.1 → 1.0.3

package/lib/components/VSkeletonLoader/VSkeletonLoader.js

@@ -0,0 +1,188 @@
+import { Transition, h } from 'vue'; // Styles
+
+import "../../../src/components/VSkeletonLoader/VSkeletonLoader.sass"; // Mixins
+
+import Elevatable from '../../mixins/elevatable';
+import Measurable from '../../mixins/measurable';
+import Themeable from '../../mixins/themeable'; // Utilities
+
+import mixins from '../../util/mixins';
+import { getSlot } from '../../util/helpers';
+/* @vue/component */
+
+export default mixins(Elevatable, Measurable, Themeable).extend({
+  name: 'VSkeletonLoader',
+  props: {
+    boilerplate: Boolean,
+    loading: Boolean,
+    loadingText: {
+      type: String,
+      default: '$vuetify.loading'
+    },
+    tile: Boolean,
+    transition: String,
+    type: String,
+    types: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    attrs() {
+      if (!this.isLoading) return this.$attrs;
+      return {
+        'aria-busy': !this.boilerplate ? true : undefined,
+        'aria-live': !this.boilerplate ? 'polite' : undefined,
+        'aria-label': !this.boilerplate ? this.$vuetify.lang.t(this.loadingText) : undefined,
+        role: !this.boilerplate ? 'alert' : undefined
+      };
+    },
+
+    classes() {
+      return {
+        'v-skeleton-loader--boilerplate': this.boilerplate,
+        'v-skeleton-loader--is-loading': this.isLoading,
+        'v-skeleton-loader--tile': this.tile,
+        ...this.themeClasses,
+        ...this.elevationClasses
+      };
+    },
+
+    isLoading() {
+      return !('default' in this.$slots) || this.loading;
+    },
+
+    rootTypes() {
+      return {
+        actions: 'button@2',
+        article: 'heading, paragraph',
+        avatar: 'avatar',
+        button: 'button',
+        card: 'image, card-heading',
+        'card-avatar': 'image, list-item-avatar',
+        'card-heading': 'heading',
+        chip: 'chip',
+        'date-picker': 'list-item, card-heading, divider, date-picker-options, date-picker-days, actions',
+        'date-picker-options': 'text, avatar@2',
+        'date-picker-days': 'avatar@28',
+        heading: 'heading',
+        image: 'image',
+        'list-item': 'text',
+        'list-item-avatar': 'avatar, text',
+        'list-item-two-line': 'sentences',
+        'list-item-avatar-two-line': 'avatar, sentences',
+        'list-item-three-line': 'paragraph',
+        'list-item-avatar-three-line': 'avatar, paragraph',
+        paragraph: 'text@3',
+        sentences: 'text@2',
+        table: 'table-heading, table-thead, table-tbody, table-tfoot',
+        'table-heading': 'heading, text',
+        'table-thead': 'heading@6',
+        'table-tbody': 'table-row-divider@6',
+        'table-row-divider': 'table-row, divider',
+        'table-row': 'table-cell@6',
+        'table-cell': 'text',
+        'table-tfoot': 'text@2, avatar@2',
+        text: 'text',
+        ...this.types
+      };
+    }
+
+  },
+  methods: {
+    genBone(text, children) {
+      return h('div', {
+        class: `v-skeleton-loader__${text} v-skeleton-loader__bone`
+      }, children);
+    },
+
+    genBones(bone) {
+      // e.g. 'text@3'
+      const [type, length] = bone.split('@');
+
+      const generator = () => this.genStructure(type); // Generate a length array based upon
+      // value after @ in the bone string
+
+
+      return Array.from({
+        length
+      }).map(generator);
+    },
+
+    // Fix type when this is merged
+    // https://github.com/microsoft/TypeScript/pull/33050
+    genStructure(type) {
+      let children = [];
+      type = type || this.type || '';
+      const bone = this.rootTypes[type] || ''; // End of recursion, do nothing
+
+      /* eslint-disable-next-line no-empty, brace-style */
+
+      if (type === bone) {} // Array of values - e.g. 'heading, paragraph, text@2'
+      else if (type.indexOf(',') > -1) return this.mapBones(type); // Array of values - e.g. 'paragraph@4'
+      else if (type.indexOf('@') > -1) return this.genBones(type); // Array of values - e.g. 'card@2'
+      else if (bone.indexOf(',') > -1) children = this.mapBones(bone); // Array of values - e.g. 'list-item@2'
+      else if (bone.indexOf('@') > -1) children = this.genBones(bone); // Single value - e.g. 'card-heading'
+      else if (bone) children.push(this.genStructure(bone));
+
+      return [this.genBone(type, children)];
+    },
+
+    genSkeleton() {
+      const children = [];
+      if (!this.isLoading) children.push(getSlot(this));else children.push(this.genStructure());
+      /* istanbul ignore else */
+
+      if (!this.transition) return children;
+      /* istanbul ignore next */
+
+      return h(Transition, {
+        name: this.transition,
+        // Only show transition when
+        // content has been loaded
+        onAfterEnter: this.resetStyles,
+        onBeforeEnter: this.onBeforeEnter,
+        onBeforeLeave: this.onBeforeLeave,
+        onLeaveCancelled: this.resetStyles
+      }, children);
+    },
+
+    mapBones(bones) {
+      // Remove spaces and return array of structures
+      return bones.replace(/\s/g, '').split(',').map(this.genStructure);
+    },
+
+    onBeforeEnter(el) {
+      this.resetStyles(el);
+      if (!this.isLoading) return;
+      el._initialStyle = {
+        display: el.style.display,
+        transition: el.style.transition
+      };
+      el.style.setProperty('transition', 'none', 'important');
+    },
+
+    onBeforeLeave(el) {
+      el.style.setProperty('display', 'none', 'important');
+    },
+
+    resetStyles(el) {
+      if (!el._initialStyle) return;
+      el.style.display = el._initialStyle.display || '';
+      el.style.transition = el._initialStyle.transition;
+      delete el._initialStyle;
+    }
+
+  },
+
+  render() {
+    return h('div', {
+      class: ['v-skeleton-loader', this.classes],
+      ...this.attrs,
+      ...this.$listeners,
+      style: this.isLoading ? this.measurableStyles : undefined
+    }, [this.genSkeleton()]);
+  }
+
+});
+//# sourceMappingURL=VSkeletonLoader.js.map

package/lib/components/VSkeletonLoader/VSkeletonLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/VSkeletonLoader/VSkeletonLoader.ts"],"names":[],"mappings":"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","sourcesContent":["import {Transition, h} from 'vue'\n// Styles\nimport './VSkeletonLoader.sass'\n\n// Mixins\nimport Elevatable from '../../mixins/elevatable'\nimport Measurable from '../../mixins/measurable'\nimport Themeable from '../../mixins/themeable'\n\n// Utilities\nimport mixins from '../../util/mixins'\n\n// Types\nimport { VNode } from 'vue'\nimport { getSlot } from '../../util/helpers'\nimport { PropValidator } from 'vue/types/options'\n\nexport interface HTMLSkeletonLoaderElement extends HTMLElement {\n  _initialStyle?: {\n    display: string | null\n    transition: string\n  }\n}\n\n/* @vue/component */\nexport default mixins(\n  Elevatable,\n  Measurable,\n  Themeable,\n).extend({\n  name: 'VSkeletonLoader',\n\n  props: {\n    boilerplate: Boolean,\n    loading: Boolean,\n    loadingText: {\n      type: String,\n      default: '$vuetify.loading',\n    },\n    tile: Boolean,\n    transition: String,\n    type: String,\n    types: {\n      type: Object,\n      default: () => ({}),\n    } as PropValidator<Record<string, string>>,\n  },\n\n  computed: {\n    attrs (): object {\n      if (!this.isLoading) return this.$attrs\n\n      return {\n        'aria-busy': !this.boilerplate ? true : undefined,\n        'aria-live': !this.boilerplate ? 'polite' : undefined,\n        'aria-label': !this.boilerplate ? this.$vuetify.lang.t(this.loadingText) : undefined,\n        role: !this.boilerplate ? 'alert' : undefined\n      }\n    },\n    classes (): object {\n      return {\n        'v-skeleton-loader--boilerplate': this.boilerplate,\n        'v-skeleton-loader--is-loading': this.isLoading,\n        'v-skeleton-loader--tile': this.tile,\n        ...this.themeClasses,\n        ...this.elevationClasses,\n      }\n    },\n    isLoading (): boolean {\n      return !('default' in this.$slots) || this.loading\n    },\n    rootTypes (): Record<string, string> {\n      return {\n        actions: 'button@2',\n        article: 'heading, paragraph',\n        avatar: 'avatar',\n        button: 'button',\n        card: 'image, card-heading',\n        'card-avatar': 'image, list-item-avatar',\n        'card-heading': 'heading',\n        chip: 'chip',\n        'date-picker': 'list-item, card-heading, divider, date-picker-options, date-picker-days, actions',\n        'date-picker-options': 'text, avatar@2',\n        'date-picker-days': 'avatar@28',\n        heading: 'heading',\n        image: 'image',\n        'list-item': 'text',\n        'list-item-avatar': 'avatar, text',\n        'list-item-two-line': 'sentences',\n        'list-item-avatar-two-line': 'avatar, sentences',\n        'list-item-three-line': 'paragraph',\n        'list-item-avatar-three-line': 'avatar, paragraph',\n        paragraph: 'text@3',\n        sentences: 'text@2',\n        table: 'table-heading, table-thead, table-tbody, table-tfoot',\n        'table-heading': 'heading, text',\n        'table-thead': 'heading@6',\n        'table-tbody': 'table-row-divider@6',\n        'table-row-divider': 'table-row, divider',\n        'table-row': 'table-cell@6',\n        'table-cell': 'text',\n        'table-tfoot': 'text@2, avatar@2',\n        text: 'text',\n        ...this.types,\n      }\n    },\n  },\n\n  methods: {\n    genBone (text: string, children: VNode[]) {\n      return h('div', {\n        class: `v-skeleton-loader__${text} v-skeleton-loader__bone`,\n      }, children)\n    },\n    genBones (bone: string): VNode[] {\n      // e.g. 'text@3'\n      const [type, length] = bone.split('@') as [string, number]\n      const generator = () => this.genStructure(type)\n\n      // Generate a length array based upon\n      // value after @ in the bone string\n      return Array.from({ length }).map(generator)\n    },\n    // Fix type when this is merged\n    // https://github.com/microsoft/TypeScript/pull/33050\n    genStructure (type?: string): any {\n      let children = []\n      type = type || this.type || ''\n      const bone = this.rootTypes[type] || ''\n\n      // End of recursion, do nothing\n      /* eslint-disable-next-line no-empty, brace-style */\n      if (type === bone) {}\n      // Array of values - e.g. 'heading, paragraph, text@2'\n      else if (type.indexOf(',') > -1) return this.mapBones(type)\n      // Array of values - e.g. 'paragraph@4'\n      else if (type.indexOf('@') > -1) return this.genBones(type)\n      // Array of values - e.g. 'card@2'\n      else if (bone.indexOf(',') > -1) children = this.mapBones(bone)\n      // Array of values - e.g. 'list-item@2'\n      else if (bone.indexOf('@') > -1) children = this.genBones(bone)\n      // Single value - e.g. 'card-heading'\n      else if (bone) children.push(this.genStructure(bone))\n\n      return [this.genBone(type, children)]\n    },\n    genSkeleton () {\n      const children = []\n\n      if (!this.isLoading) children.push(getSlot(this))\n      else children.push(this.genStructure())\n\n      /* istanbul ignore else */\n      if (!this.transition) return children\n\n      /* istanbul ignore next */\n      return h(Transition, {\n        name: this.transition,\n        // Only show transition when\n        // content has been loaded\n        onAfterEnter: this.resetStyles,\n        onBeforeEnter: this.onBeforeEnter,\n        onBeforeLeave: this.onBeforeLeave,\n        onLeaveCancelled: this.resetStyles\n      }, children)\n    },\n    mapBones (bones: string) {\n      // Remove spaces and return array of structures\n      return bones.replace(/\\s/g, '').split(',').map(this.genStructure)\n    },\n    onBeforeEnter (el: HTMLSkeletonLoaderElement) {\n      this.resetStyles(el)\n\n      if (!this.isLoading) return\n\n      el._initialStyle = {\n        display: el.style.display,\n        transition: el.style.transition,\n      }\n\n      el.style.setProperty('transition', 'none', 'important')\n    },\n    onBeforeLeave (el: HTMLSkeletonLoaderElement) {\n      el.style.setProperty('display', 'none', 'important')\n    },\n    resetStyles (el: HTMLSkeletonLoaderElement) {\n      if (!el._initialStyle) return\n\n      el.style.display = el._initialStyle.display || ''\n      el.style.transition = el._initialStyle.transition\n\n      delete el._initialStyle\n    },\n  },\n\n  render (): VNode {\n    return h('div', {\n      class: ['v-skeleton-loader', this.classes],\n      ...this.attrs,\n      ...this.$listeners,\n      style: this.isLoading ? this.measurableStyles : undefined,\n    }, [this.genSkeleton()])\n  },\n})\n"],"sourceRoot":"","file":"VSkeletonLoader.js"}

package/lib/components/VSkeletonLoader/index.js

@@ -0,0 +1,4 @@
+import VSkeletonLoader from './VSkeletonLoader';
+export { VSkeletonLoader };
+export default VSkeletonLoader;
+//# sourceMappingURL=index.js.map

package/lib/components/VSkeletonLoader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/VSkeletonLoader/index.ts"],"names":[],"mappings":"AAAA,OAAO,eAAP,MAA4B,mBAA5B;AAEA,SAAS,eAAT;AACA,eAAe,eAAf","sourcesContent":["import VSkeletonLoader from './VSkeletonLoader'\n\nexport { VSkeletonLoader }\nexport default VSkeletonLoader\n"],"sourceRoot":"","file":"index.js"}

package/lib/components/VSlideGroup/VSlideGroup.js

@@ -0,0 +1,450 @@
+import { h, withDirectives } from 'vue'; // Styles
+
+import "../../../src/components/VSlideGroup/VSlideGroup.sass"; // Components
+
+import VIcon from '../VIcon';
+import { VFadeTransition } from '../transitions'; // Extensions
+
+import { BaseItemGroup } from '../VItemGroup/VItemGroup'; // Mixins
+
+import Mobile from '../../mixins/mobile'; // Directives
+
+import Resize from '../../directives/resize';
+import Touch from '../../directives/touch'; // Utilities
+
+import mixins from '../../util/mixins'; // Types
+
+import { defineComponent } from 'vue';
+import { composedPath, getSlot } from '../../util/helpers';
+
+function bias(val) {
+  const c = 0.501;
+  const x = Math.abs(val);
+  return Math.sign(val) * (x / ((1 / c - 2) * (1 - x) + 1));
+}
+
+export function calculateUpdatedOffset(selectedElement, widths, rtl, currentScrollOffset) {
+  const clientWidth = selectedElement.clientWidth;
+  const offsetLeft = rtl ? widths.content - selectedElement.offsetLeft - clientWidth : selectedElement.offsetLeft;
+
+  if (rtl) {
+    currentScrollOffset = -currentScrollOffset;
+  }
+
+  const totalWidth = widths.wrapper + currentScrollOffset;
+  const itemOffset = clientWidth + offsetLeft;
+  const additionalOffset = clientWidth * 0.4;
+
+  if (offsetLeft <= currentScrollOffset) {
+    currentScrollOffset = Math.max(offsetLeft - additionalOffset, 0);
+  } else if (totalWidth <= itemOffset) {
+    currentScrollOffset = Math.min(currentScrollOffset - (totalWidth - itemOffset - additionalOffset), widths.content - widths.wrapper);
+  }
+
+  return rtl ? -currentScrollOffset : currentScrollOffset;
+}
+export function calculateCenteredOffset(selectedElement, widths, rtl) {
+  const {
+    offsetLeft,
+    clientWidth
+  } = selectedElement;
+
+  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));
+  }
+}
+export const BaseSlideGroup = mixins(BaseItemGroup, Mobile).extend({
+  name: 'base-slide-group',
+  props: {
+    activeClass: {
+      type: String,
+      default: 'v-slide-item--active'
+    },
+    centerActive: Boolean,
+    nextIcon: {
+      type: String,
+      default: '$next'
+    },
+    prevIcon: {
+      type: String,
+      default: '$prev'
+    },
+    showArrows: {
+      type: [Boolean, String],
+      validator: v => typeof v === 'boolean' || ['always', 'never', 'desktop', 'mobile'].includes(v)
+    }
+  },
+  emits: ['click:prev', 'click:next'],
+  data: () => ({
+    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.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;
+        // Always hide arrows
+
+        case 'never':
+          return false;
+        // 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;
+    }
+
+  },
+  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) {
+      if (this.$vuetify.rtl) val = -val;
+      let scroll = val <= 0 ? bias(-val) : val > this.widths.content - this.widths.wrapper ? -(this.widths.content - this.widths.wrapper) + bias(this.widths.content - this.widths.wrapper - val) : -val;
+      if (this.$vuetify.rtl) scroll = -scroll;
+      this.$refs.content.style.transform = `translateX(${scroll}px)`;
+    }
+
+  },
+
+  mounted() {
+    if (typeof ResizeObserver !== 'undefined') {
+      const obs = new ResizeObserver(() => {
+        this.onResize();
+      });
+      obs.observe(this.$el);
+      obs.observe(this.$refs.content);
+      this.$on('hook:destroyed', () => {
+        obs.disconnect();
+      });
+    } else {
+      let itemsLength = 0;
+      this.$on('hook:beforeUpdate', () => {
+        var _a;
+
+        itemsLength = (((_a = this.$refs.content) === null || _a === void 0 ? void 0 : _a.children) || []).length;
+      });
+      this.$on('hook:updated', () => {
+        var _a;
+
+        if (itemsLength === (((_a = this.$refs.content) === null || _a === void 0 ? void 0 : _a.children) || []).length) return;
+        this.setWidths();
+      });
+    }
+  },
+
+  methods: {
+    onScroll() {
+      const wrapper = this.$refs.wrapper;
+
+      if (wrapper) {
+        wrapper.scrollLeft = 0;
+      }
+    },
+
+    onFocusin(e) {
+      if (!this.isOverflowing) 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 composedPath(e)) {
+        for (const vm of this.items) {
+          if (vm.$el === el) {
+            this.scrollOffset = calculateUpdatedOffset(vm.$el, this.widths, this.$vuetify.rtl, this.scrollOffset);
+            return;
+          }
+        }
+      }
+    },
+
+    // Always generate next for scrollable hint
+    genNext() {
+      const slot = this.$slots.next ? this.$slots.next({}) : getSlot(this, 'next') || this.__cachedNext;
+      return h('div', {
+        class: ['v-slide-group__next', {
+          'v-slide-group__next--disabled': !this.hasNext
+        }],
+        onClick: () => this.onAffixClick('next'),
+        key: 'next'
+      }, [slot]);
+    },
+
+    genContent() {
+      return h('div', {
+        class: 'v-slide-group__content',
+        ref: 'content',
+        onFocusin: this.onFocusin
+      }, getSlot(this));
+    },
+
+    genData() {
+      return {
+        class: this.classes
+      };
+    },
+
+    genIcon(location) {
+      let icon = location;
+
+      if (this.$vuetify.rtl && location === 'prev') {
+        icon = 'next';
+      } else if (this.$vuetify.rtl && location === 'next') {
+        icon = 'prev';
+      }
+
+      const upperLocation = `${location[0].toUpperCase()}${location.slice(1)}`;
+      const hasAffix = this[`has${upperLocation}`];
+      if (!this.showArrows && !hasAffix) return null;
+      return h(VIcon, {
+        disabled: !hasAffix
+      }, () => this[`${icon}Icon`]);
+    },
+
+    // Always generate prev for scrollable hint
+    genPrev() {
+      const slot = this.$slots.prev ? this.$slots.prev({}) : getSlot(this, 'prev') || this.__cachedPrev;
+      return h('div', {
+        class: ['v-slide-group__prev', {
+          'v-slide-group__prev--disabled': !this.hasPrev
+        }],
+        onClick: () => this.onAffixClick('prev'),
+        key: 'prev'
+      }, [slot]);
+    },
+
+    genTransition(location) {
+      return h(VFadeTransition, {}, () => [this.genIcon(location)]);
+    },
+
+    genWrapper() {
+      return withDirectives(h('div', {
+        class: 'v-slide-group__wrapper',
+        ref: 'wrapper',
+        onScroll: this.onScroll
+      }, [this.genContent()]), [[Touch, {
+        start: e => this.overflowCheck(e, this.onTouchStart),
+        move: e => this.overflowCheck(e, this.onTouchMove),
+        end: e => this.overflowCheck(e, this.onTouchEnd)
+      }]]);
+    },
+
+    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:${location}`);
+      this.scrollTo(location);
+    },
+
+    onResize() {
+      /* istanbul ignore next */
+      if (this.$.isUnmounted) return;
+      this.setWidths();
+    },
+
+    onTouchStart(e) {
+      const content = this.$refs.content;
+      if (!content) return;
+      this.startX = this.scrollOffset + e.touchstartX;
+      content.style.setProperty('transition', 'none');
+      content.style.setProperty('willChange', 'transform');
+    },
+
+    onTouchMove(e) {
+      if (!this.canTouch) return;
+
+      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
+
+        document.documentElement.style.overflowY = 'hidden';
+      }
+    },
+
+    onTouchEnd() {
+      if (!this.canTouch) return;
+      const content = this.$refs.content;
+      const wrapper = this.$refs.wrapper;
+      if (!content || !wrapper) return;
+      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;
+        }
+      } else {
+        /* istanbul ignore else */
+        if (this.scrollOffset < 0 || !this.isOverflowing) {
+          this.scrollOffset = 0;
+        } else if (this.scrollOffset >= maxScrollOffset) {
+          this.scrollOffset = maxScrollOffset;
+        }
+      }
+
+      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 wrapper = this.$refs.wrapper;
+        if (!wrapper) return;
+        const wrapperPosition = wrapper.getBoundingClientRect();
+
+        if (this.$vuetify.rtl && wrapperPosition.right < lastItemPosition.right || !this.$vuetify.rtl && wrapperPosition.left > lastItemPosition.left) {
+          this.scrollTo('prev');
+        }
+      }
+
+      if (!this.selectedItem) {
+        return;
+      }
+
+      if (this.selectedIndex === 0 || !this.centerActive && !this.isOverflowing) {
+        this.scrollOffset = 0;
+      } else if (this.centerActive) {
+        this.scrollOffset = calculateCenteredOffset(this.selectedItem.$el, this.widths, this.$vuetify.rtl);
+      } else if (this.isOverflowing) {
+        this.scrollOffset = calculateUpdatedOffset(this.selectedItem.$el, this.widths, this.$vuetify.rtl, this.scrollOffset);
+      }
+    },
+
+    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() {
+      window.requestAnimationFrame(() => {
+        if (this.$.isUnmounted) return;
+        const content = this.$refs.content;
+        const wrapper = this.$refs.wrapper;
+        if (!content || !wrapper) return;
+        this.widths = {
+          content: content.clientWidth,
+          wrapper: wrapper.clientWidth
+        }; // 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();
+      });
+    }
+
+  },
+
+  render() {
+    return withDirectives(h('div', this.genData(), [this.genPrev(), this.genWrapper(), this.genNext()]), [[Resize, this.onResize]]);
+  }
+
+});
+export default defineComponent({
+  name: 'v-slide-group',
+  extends: BaseSlideGroup,
+
+  provide() {
+    return {
+      slideGroup: this
+    };
+  }
+
+});
+//# sourceMappingURL=VSlideGroup.js.map