@kokoccc/vuetify 1.0.1

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,194 @@
+import { reactive } from 'vue'
+
+
+// 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
+
+    return reactive(this)
+  }
+
+  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)
+  })
+})