@dimailn/vuetify 2.7.2-alpha0

package/src/services/breakpoint/__tests__/breakpoint.spec.ts

@@ -0,0 +1,300 @@
+import { resizeWindow } from '../../../../test'
+import { Breakpoint } from '../'
+import { preset } from '../../../presets/default'
+
+describe('Breakpoint.ts', () => {
+  let breakpoint: Breakpoint
+  const scenarios = [
+    {
+      description: 'Huawei Smartwatch',
+      width: 400,
+      height: 400,
+      name: 'xs',
+      mustBeTrue: [
+        'xs',
+        'xsOnly',
+        'smAndDown',
+        'mdAndDown',
+        'lgAndDown',
+      ],
+    },
+    {
+      description: 'Galaxy S5 (portrait)',
+      width: 360,
+      height: 640,
+      name: 'xs',
+      mustBeTrue: [
+        'xs',
+        'xsOnly',
+        'smAndDown',
+        'mdAndDown',
+        'lgAndDown',
+      ],
+    },
+    {
+      description: 'Galaxy S5 (landscape)',
+      width: 640,
+      height: 360,
+      name: 'sm',
+      mustBeTrue: [
+        'sm',
+        'smOnly',
+        'smAndDown',
+        'smAndUp',
+        'mdAndDown',
+        'lgAndDown',
+      ],
+    },
+    {
+      description: 'iPhone 6 (portrait)',
+      width: 375,
+      height: 667,
+      name: 'xs',
+      mustBeTrue: [
+        'xs',
+        'xsOnly',
+        'smAndDown',
+        'mdAndDown',
+        'lgAndDown',
+      ],
+    },
+    {
+      description: 'iPhone 6 (landscape)',
+      width: 667,
+      height: 375,
+      name: 'sm',
+      mustBeTrue: [
+        'sm',
+        'smOnly',
+        'smAndDown',
+        'smAndUp',
+        'mdAndDown',
+        'lgAndDown',
+      ],
+    },
+    {
+      description: 'iPad (portrait)',
+      width: 768,
+      height: 1024,
+      name: 'sm',
+      mustBeTrue: [
+        'sm',
+        'smOnly',
+        'smAndDown',
+        'smAndUp',
+        'mdAndDown',
+        'lgAndDown',
+      ],
+    },
+    {
+      description: 'iPad (landscape)',
+      width: 1024,
+      height: 768,
+      name: 'md',
+      mustBeTrue: [
+        'md',
+        'mdOnly',
+        'smAndUp',
+        'mdAndDown',
+        'mdAndUp',
+        'lgAndDown',
+      ],
+    },
+    {
+      description: 'iPad Pro (portrait)',
+      width: 1024,
+      height: 1366,
+      name: 'md',
+      mustBeTrue: [
+        'md',
+        'mdOnly',
+        'smAndUp',
+        'mdAndDown',
+        'mdAndUp',
+        'lgAndDown',
+      ],
+    },
+    {
+      description: 'iPad Pro (landscape)',
+      width: 1366,
+      height: 1024,
+      name: 'lg',
+      mustBeTrue: [
+        'lg',
+        'lgOnly',
+        'smAndUp',
+        'mdAndUp',
+        'lgAndDown',
+        'lgAndUp',
+      ],
+    },
+    {
+      description: 'WSXGA+ (portrait)',
+      width: 1050,
+      height: 1680,
+      name: 'md',
+      mustBeTrue: [
+        'md',
+        'mdOnly',
+        'smAndUp',
+        'mdAndDown',
+        'mdAndUp',
+        'lgAndDown',
+      ],
+    },
+    {
+      description: 'WSXGA+ (landscape)',
+      width: 1680,
+      height: 1050,
+      name: 'lg',
+      mustBeTrue: [
+        'lg',
+        'lgOnly',
+        'smAndUp',
+        'mdAndUp',
+        'lgAndDown',
+        'lgAndUp',
+      ],
+    },
+    {
+      description: 'FHD (portrait)',
+      width: 1080,
+      height: 1920,
+      name: 'md',
+      mustBeTrue: [
+        'md',
+        'mdOnly',
+        'smAndUp',
+        'mdAndDown',
+        'mdAndUp',
+        'lgAndDown',
+      ],
+    },
+    {
+      description: 'FHD (landscape)',
+      width: 1920,
+      height: 1080,
+      name: 'xl',
+      mustBeTrue: [
+        'xl',
+        'xlOnly',
+        'smAndUp',
+        'mdAndUp',
+        'lgAndUp',
+      ],
+    },
+    {
+      description: 'WQHD (portrait)',
+      width: 1440,
+      height: 2560,
+      name: 'lg',
+      mustBeTrue: [
+        'lg',
+        'lgOnly',
+        'smAndUp',
+        'mdAndUp',
+        'lgAndDown',
+        'lgAndUp',
+      ],
+    },
+    {
+      description: 'WQHD (landscape)',
+      width: 2560,
+      height: 1440,
+      name: 'xl',
+      mustBeTrue: [
+        'xl',
+        'xlOnly',
+        'smAndUp',
+        'mdAndUp',
+        'lgAndUp',
+      ],
+    },
+  ]
+  const allFlags = [
+    'xs',
+    'sm',
+    'md',
+    'lg',
+    'xl',
+    'xsOnly',
+    'smOnly',
+    'smAndDown',
+    'smAndUp',
+    'mdOnly',
+    'mdAndDown',
+    'mdAndUp',
+    'lgOnly',
+    'lgAndDown',
+    'lgAndUp',
+    'xlOnly',
+  ]
+
+  beforeEach(() => {
+    breakpoint = new Breakpoint(preset)
+    breakpoint.init()
+  })
+
+  scenarios.slice(0, 1).forEach(scenario => {
+    it('should calculate breakpoint for ' + scenario.description, async () => {
+      await resizeWindow(scenario.width, scenario.height)
+
+      expect(breakpoint.width).toBe(scenario.width)
+      expect(breakpoint.height).toBe(scenario.height)
+      expect(breakpoint.name).toBe(scenario.name)
+      allFlags.forEach(flag => {
+        const expectedValue = scenario.mustBeTrue.indexOf(flag) !== -1
+        expect(breakpoint[flag]).toBe(expectedValue)
+      })
+    })
+  })
+
+  it('should update breakpoint on window resize', async () => {
+    await resizeWindow(715)
+    expect(breakpoint.width).toBe(715)
+  })
+
+  it('should allow to change thresholds during runtime', async () => {
+    await resizeWindow(401)
+    expect(breakpoint.xs).toBe(true)
+
+    await resizeWindow(698)
+    expect(breakpoint.xs).toBe(false)
+
+    await resizeWindow(1099)
+    expect(breakpoint.md).toBe(true)
+
+    await resizeWindow(1281)
+    expect(breakpoint.lg).toBe(true)
+
+    await resizeWindow(1921)
+    expect(breakpoint.xl).toBe(true)
+  })
+
+  it('should allow to override defaults via factory args', async () => {
+    breakpoint = new Breakpoint({
+      ...preset,
+      breakpoint: {
+        thresholds: { xs: 400 },
+      } as any,
+    })
+    breakpoint.init()
+
+    await resizeWindow(401)
+    expect(breakpoint.xs).toBe(false)
+
+    await resizeWindow(399)
+    expect(breakpoint.xs).toBe(true)
+  })
+
+  it('should allow breakpoint strings for mobileBreakpoint', async () => {
+    breakpoint.mobileBreakpoint = 'lg'
+    await resizeWindow(1920)
+
+    expect(breakpoint.mobile).toBe(false)
+
+    await resizeWindow(600)
+
+    expect(breakpoint.mobile).toBe(true)
+  })
+})

package/src/services/breakpoint/index.ts

@@ -0,0 +1,189 @@
+// Extensions
+import { Service } from '../service'
+
+// Types
+import { VuetifyPreset } from 'vuetify/types/services/presets'
+import { Breakpoint as IBreakpoint } from 'vuetify/types/services/breakpoint'
+
+export class Breakpoint extends Service implements IBreakpoint {
+  public static property: 'breakpoint' = 'breakpoint'
+
+  // Public
+  public xs = false
+
+  public sm = false
+
+  public md = false
+
+  public lg = false
+
+  public xl = false
+
+  public xsOnly = false
+
+  public smOnly = false
+
+  public smAndDown = false
+
+  public smAndUp = false
+
+  public mdOnly = false
+
+  public mdAndDown = false
+
+  public mdAndUp = false
+
+  public lgOnly = false
+
+  public lgAndDown = false
+
+  public lgAndUp = false
+
+  public xlOnly = false
+
+  // Value is xs to match v2.x functionality
+  public name: IBreakpoint['name'] = 'xs'
+
+  public height = 0
+
+  public width = 0
+
+  // TODO: Add functionality to detect this dynamically in v3
+  // Value is true to match v2.x functionality
+  public mobile = true
+
+  public mobileBreakpoint: IBreakpoint['mobileBreakpoint']
+
+  public thresholds: IBreakpoint['thresholds']
+
+  public scrollBarWidth: IBreakpoint['scrollBarWidth']
+
+  private resizeTimeout = 0
+
+  constructor (preset: VuetifyPreset) {
+    super()
+
+    const {
+      mobileBreakpoint,
+      scrollBarWidth,
+      thresholds,
+    } = preset[Breakpoint.property]
+
+    this.mobileBreakpoint = mobileBreakpoint
+    this.scrollBarWidth = scrollBarWidth
+    this.thresholds = thresholds
+  }
+
+  public init () {
+    this.update()
+
+    /* istanbul ignore if */
+    if (typeof window === 'undefined') return
+
+    window.addEventListener(
+      'resize',
+      this.onResize.bind(this),
+      { passive: true }
+    )
+  }
+
+  /* eslint-disable-next-line max-statements */
+  public update (ssr = false) {
+    const height = ssr ? 0 : this.getClientHeight()
+    const width = ssr ? 0 : this.getClientWidth()
+
+    const xs = width < this.thresholds.xs
+    const sm = width < this.thresholds.sm && !xs
+    const md = width < (this.thresholds.md - this.scrollBarWidth) && !(sm || xs)
+    const lg = width < (this.thresholds.lg - this.scrollBarWidth) && !(md || sm || xs)
+    const xl = width >= (this.thresholds.lg - this.scrollBarWidth)
+
+    this.height = height
+    this.width = width
+
+    this.xs = xs
+    this.sm = sm
+    this.md = md
+    this.lg = lg
+    this.xl = xl
+
+    this.xsOnly = xs
+    this.smOnly = sm
+    this.smAndDown = (xs || sm) && !(md || lg || xl)
+    this.smAndUp = !xs && (sm || md || lg || xl)
+    this.mdOnly = md
+    this.mdAndDown = (xs || sm || md) && !(lg || xl)
+    this.mdAndUp = !(xs || sm) && (md || lg || xl)
+    this.lgOnly = lg
+    this.lgAndDown = (xs || sm || md || lg) && !xl
+    this.lgAndUp = !(xs || sm || md) && (lg || xl)
+    this.xlOnly = xl
+
+    switch (true) {
+      case (xs):
+        this.name = 'xs'
+        break
+      case (sm):
+        this.name = 'sm'
+        break
+      case (md):
+        this.name = 'md'
+        break
+      case (lg):
+        this.name = 'lg'
+        break
+      default:
+        this.name = 'xl'
+        break
+    }
+
+    if (typeof this.mobileBreakpoint === 'number') {
+      this.mobile = width < parseInt(this.mobileBreakpoint, 10)
+
+      return
+    }
+
+    const breakpoints = {
+      xs: 0,
+      sm: 1,
+      md: 2,
+      lg: 3,
+      xl: 4,
+    } as const
+
+    const current = breakpoints[this.name]
+    const max = breakpoints[this.mobileBreakpoint]
+
+    this.mobile = current <= max
+  }
+
+  private onResize () {
+    clearTimeout(this.resizeTimeout)
+
+    // Added debounce to match what
+    // v-resize used to do but was
+    // removed due to a memory leak
+    // https://github.com/vuetifyjs/vuetify/pull/2997
+    this.resizeTimeout = window.setTimeout(this.update.bind(this), 200)
+  }
+
+  // Cross-browser support as described in:
+  // https://stackoverflow.com/questions/1248081
+  private getClientWidth () {
+    /* istanbul ignore if */
+    if (typeof document === 'undefined') return 0 // SSR
+    return Math.max(
+      document.documentElement!.clientWidth,
+      window.innerWidth || 0
+    )
+  }
+
+  private getClientHeight () {
+    /* istanbul ignore if */
+    if (typeof document === 'undefined') return 0 // SSR
+    return Math.max(
+      document.documentElement!.clientHeight,
+      window.innerHeight || 0
+    )
+  }
+}

package/src/services/goto/__tests__/easing-patterns.spec.ts

@@ -0,0 +1,23 @@
+import * as easingPatterns from '../easing-patterns'
+
+describe('easing-patterns.ts', () => {
+  it('should work', () => {
+    expect(easingPatterns.linear(5)).toBe(5)
+    expect(easingPatterns.easeInQuad(5)).toBe(25)
+    expect(easingPatterns.easeOutQuad(5)).toBe(-15)
+    expect(easingPatterns.easeInOutQuad(5)).toBe(-31)
+    expect(easingPatterns.easeInOutQuad(0.1)).toBe(0.020000000000000004)
+    expect(easingPatterns.easeInCubic(5)).toBe(125)
+    expect(easingPatterns.easeOutCubic(5)).toBe(65)
+    expect(easingPatterns.easeInOutCubic(5)).toBe(257)
+    expect(easingPatterns.easeInOutCubic(0.1)).toBe(0.004000000000000001)
+    expect(easingPatterns.easeInQuart(5)).toBe(625)
+    expect(easingPatterns.easeOutQuart(5)).toBe(-255)
+    expect(easingPatterns.easeInOutQuart(5)).toBe(-2047)
+    expect(easingPatterns.easeInOutQuart(0.1)).toBe(0.0008000000000000003)
+    expect(easingPatterns.easeInQuint(5)).toBe(3125)
+    expect(easingPatterns.easeOutQuint(5)).toBe(1025)
+    expect(easingPatterns.easeInOutQuint(5)).toBe(16385)
+    expect(easingPatterns.easeInOutQuint(0.1)).toBeCloseTo(0.00016, 5)
+  })
+})

package/src/services/goto/__tests__/goto.spec.ts

@@ -0,0 +1,69 @@
+// Lib
+import { mount } from '@vue/test-utils'
+
+// Components
+import VBtn from '../../../components/VBtn'
+
+// Services
+import goTo, { Goto } from '../index'
+import { Application } from '../../application/index'
+
+// Types
+import { VuetifyServiceContract } from 'vuetify/types/services'
+
+describe('$vuetify.goTo', () => {
+  (global as any).performance = require('perf_hooks').performance
+  let framework: Record<string, VuetifyServiceContract> = {}
+
+  beforeEach(() => {
+    framework = {
+      application: new Application(),
+    }
+
+    goTo.framework = framework
+  })
+
+  it('should throw error when target is undefined or null', async () => {
+    expect(() => goTo(undefined))
+      .toThrow(new TypeError('Target must be a Number/Selector/HTMLElement/VueComponent, received undefined instead.'))
+
+    expect(() => goTo(null))
+      .toThrow(new TypeError('Target must be a Number/Selector/HTMLElement/VueComponent, received null instead.'))
+  })
+
+  it('should throw error when target element is not found', async () => {
+    expect(() => goTo('#foo'))
+      .toThrow(new Error('Target element "#foo" not found.'))
+  })
+
+  it('should throw error when container element is not found', async () => {
+    expect(() => goTo(0, { container: '#thisContainerDoesNotExist' }))
+      .toThrow(new Error('Container element "#thisContainerDoesNotExist" not found.'))
+  })
+
+  it('should throw error when container is undefined or null', async () => {
+    expect(() => goTo(0, { container: undefined }))
+      .toThrow(new TypeError('Container must be a Selector/HTMLElement/VueComponent, received undefined instead.'))
+
+    expect(() => goTo(0, { container: null }))
+      .toThrow(new TypeError('Container must be a Selector/HTMLElement/VueComponent, received null instead.'))
+
+    expect(() => goTo(0, { container: 42 as any }))
+      .toThrow(new TypeError('Container must be a Selector/HTMLElement/VueComponent, received Number instead.'))
+  })
+
+  it('should throw error if easing does not exist', async () => {
+    expect(() => goTo(1, { easing: 'thisEasingDoesNotExist' }))
+      .toThrow(new TypeError('Easing function "thisEasingDoesNotExist" not found.'))
+  })
+
+  it('should not throw error when using VueComponent as target', async () => {
+    const btn = mount(VBtn)
+
+    await expect(goTo(btn.vm, { duration: 0 })).resolves.not.toBeUndefined()
+  })
+
+  it('should instantiate and return goto', () => {
+    expect(new Goto()).toEqual(goTo)
+  })
+})

package/src/services/goto/easing-patterns.ts

@@ -0,0 +1,28 @@
+export type EasingFunction = (t: number) => number
+
+// linear
+export const linear = (t: number) => t
+// accelerating from zero velocity
+export const easeInQuad = (t: number) => t ** 2
+// decelerating to zero velocity
+export const easeOutQuad = (t: number) => t * (2 - t)
+// acceleration until halfway, then deceleration
+export const easeInOutQuad = (t: number) => (t < 0.5 ? 2 * t ** 2 : -1 + (4 - 2 * t) * t)
+// accelerating from zero velocity
+export const easeInCubic = (t: number) => t ** 3
+// decelerating to zero velocity
+export const easeOutCubic = (t: number) => --t ** 3 + 1
+// acceleration until halfway, then deceleration
+export const easeInOutCubic = (t: number) => t < 0.5 ? 4 * t ** 3 : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
+// accelerating from zero velocity
+export const easeInQuart = (t: number) => t ** 4
+// decelerating to zero velocity
+export const easeOutQuart = (t: number) => 1 - --t ** 4
+// acceleration until halfway, then deceleration
+export const easeInOutQuart = (t: number) => (t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t)
+// accelerating from zero velocity
+export const easeInQuint = (t: number) => t ** 5
+// decelerating to zero velocity
+export const easeOutQuint = (t: number) => 1 + --t ** 5
+// acceleration until halfway, then deceleration
+export const easeInOutQuint = (t: number) => t < 0.5 ? 16 * t ** 5 : 1 + 16 * --t ** 5

package/src/services/goto/index.ts

@@ -0,0 +1,92 @@
+// Extensions
+import { Service } from '../service'
+
+// Utilities
+import * as easingPatterns from './easing-patterns'
+import {
+  getContainer,
+  getOffset,
+} from './util'
+
+// Types
+import { GoToOptions, VuetifyGoToTarget } from 'vuetify/types/services/goto'
+
+import { VuetifyServiceContract } from 'vuetify/types/services'
+
+export default function goTo (
+  _target: VuetifyGoToTarget,
+  _settings: GoToOptions = {}
+): Promise<number> {
+  const settings: GoToOptions = {
+    container: (document.scrollingElement as HTMLElement | null) || document.body || document.documentElement,
+    duration: 500,
+    offset: 0,
+    easing: 'easeInOutCubic',
+    appOffset: true,
+    ..._settings,
+  }
+  const container = getContainer(settings.container)
+
+  /* istanbul ignore else */
+  if (settings.appOffset && goTo.framework.application) {
+    const isDrawer = container.classList.contains('v-navigation-drawer')
+    const isClipped = container.classList.contains('v-navigation-drawer--clipped')
+    const { bar, top } = goTo.framework.application as any
+
+    settings.offset += bar
+    /* istanbul ignore else */
+    if (!isDrawer || isClipped) settings.offset += top
+  }
+
+  const startTime = performance.now()
+
+  let targetLocation: number
+  if (typeof _target === 'number') {
+    targetLocation = getOffset(_target) - settings.offset!
+  } else {
+    targetLocation = getOffset(_target) - getOffset(container) - settings.offset!
+  }
+
+  const startLocation = container.scrollTop
+  if (targetLocation === startLocation) return Promise.resolve(targetLocation)
+
+  const ease = typeof settings.easing === 'function'
+    ? settings.easing
+    : easingPatterns[settings.easing!]
+  /* istanbul ignore else */
+  if (!ease) throw new TypeError(`Easing function "${settings.easing}" not found.`)
+
+  // Cannot be tested properly in jsdom
+  /* istanbul ignore next */
+  return new Promise(resolve => requestAnimationFrame(function step (currentTime: number) {
+    const timeElapsed = currentTime - startTime
+    const progress = Math.abs(settings.duration ? Math.min(timeElapsed / settings.duration, 1) : 1)
+
+    container.scrollTop = Math.floor(startLocation + (targetLocation - startLocation) * ease(progress))
+
+    const clientHeight = container === document.body ? document.documentElement.clientHeight : container.clientHeight
+    const reachBottom = clientHeight + container.scrollTop >= container.scrollHeight
+    if (
+      progress === 1 ||
+      // Need to go lower but reach bottom
+      (targetLocation > container.scrollTop && reachBottom)
+    ) {
+      return resolve(targetLocation)
+    }
+
+    requestAnimationFrame(step)
+  }))
+}
+
+goTo.framework = {} as Record<string, VuetifyServiceContract>
+goTo.init = () => {}
+
+export class Goto extends Service {
+  public static property: 'goTo' = 'goTo'
+
+  constructor () {
+    super()
+
+    return goTo
+  }
+}