@kokoccc/vuetify 1.0.1

package/src/directives/ripple/__tests__/ripple.spec.ts

@@ -0,0 +1,160 @@
+// Directives
+import { Ripple } from '../'
+
+// Utilities
+import {
+  mount,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount,
+} from '@vue/test-utils'
+import { h, defineComponent, withDirectives } from 'vue'
+
+describe('ripple.ts', () => {
+  let mountFunction: (options?: MountingOptions) => VueWrapper<any>
+
+  enableAutoUnmount(afterEach)
+
+  beforeEach(() => {
+    jest.useFakeTimers()
+
+    mountFunction = (options = {}) => {
+      const testComponent = defineComponent({
+        render () {
+          return withDirectives(h('div'), [[Ripple, true]])
+        },
+      })
+
+      return mount(testComponent, {
+        global: {
+          directives: {
+            ripple: Ripple,
+          },
+        },
+        ...options,
+      })
+    }
+  })
+
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
+  it('should render element with ripple enabled if no value is passed', () => {
+    const wrapper = mountFunction()
+
+    const div = wrapper.find('div')
+    expect(div.element._ripple?.enabled).toBe(true)
+  })
+
+  it('should update element property reactively', async () => {
+    const testComponent = defineComponent({
+      directives: {
+        Ripple,
+      },
+      props: {
+        ripple: {
+          type: Boolean,
+          default: false,
+        },
+      },
+      render () {
+        return withDirectives(h('div'), [[Ripple, this.ripple]])
+      },
+    })
+
+    const wrapper = mount(testComponent, {
+      props: {
+        ripple: true,
+      },
+    })
+
+    const div = wrapper.find('div')
+    expect(div.element._ripple?.enabled).toBe(true)
+
+    await wrapper.setProps({ ripple: false })
+    expect(div.element._ripple?.enabled).toBe(false)
+
+    await wrapper.setProps({ ripple: true })
+    expect(div.element._ripple?.enabled).toBe(true)
+  })
+
+  it('should trigger ripple on mousedown', () => {
+    const wrapper = mountFunction()
+
+    const mousedownEvent = new MouseEvent('mousedown', { detail: 1 })
+    wrapper.element.dispatchEvent(mousedownEvent)
+
+    expect(wrapper.find('.v-ripple__container').exists()).toBe(true)
+
+    const mouseupEvent = new MouseEvent('mouseup', { detail: 1 })
+    wrapper.element.dispatchEvent(mouseupEvent)
+
+    jest.runAllTimers()
+    expect(wrapper.find('.v-ripple__container').exists()).toBe(false)
+  })
+
+  it('should trigger ripple on enter key press', () => {
+    const wrapper = mountFunction()
+
+    const keydownEvent = new KeyboardEvent('keydown', { keyCode: 13 })
+    wrapper.element.dispatchEvent(keydownEvent)
+
+    expect(wrapper.find('.v-ripple__container').exists()).toBe(true)
+
+    const keyupEvent = new KeyboardEvent('keyup')
+    wrapper.element.dispatchEvent(keyupEvent)
+
+    jest.runAllTimers()
+    expect(wrapper.find('.v-ripple__container').exists()).toBe(false)
+  })
+
+  it('should trigger ripple on space key press', () => {
+    const wrapper = mountFunction()
+
+    const keydownEvent = new KeyboardEvent('keydown', { keyCode: 32 })
+    wrapper.element.dispatchEvent(keydownEvent)
+
+    expect(wrapper.find('.v-ripple__container').exists()).toBe(true)
+
+    const keyupEvent = new KeyboardEvent('keyup')
+    wrapper.element.dispatchEvent(keyupEvent)
+
+    jest.runAllTimers()
+    expect(wrapper.find('.v-ripple__container').exists()).toBe(false)
+  })
+
+  it('should only ripple on one element', () => {
+    const wrapper = mount({
+      directives: { Ripple },
+      template: '<div v-ripple><div class="child" v-ripple></div></div>',
+    })
+
+    const child = wrapper.find('.child').element
+
+    const mousedownEvent = new MouseEvent('mousedown', { detail: 1, bubbles: true })
+    child.dispatchEvent(mousedownEvent)
+
+    expect(wrapper.findAll('.v-ripple__container')).toHaveLength(1)
+
+    const mouseupEvent = new MouseEvent('mouseup', { detail: 1, bubbles: true })
+    child.dispatchEvent(mouseupEvent)
+
+    jest.runAllTimers()
+    expect(wrapper.findAll('.v-ripple__container')).toHaveLength(0)
+  })
+
+  it('should hide ripple on blur if keyboardRipple is true', () => {
+    const wrapper = mountFunction()
+    const keydownEvent = new KeyboardEvent('keydown', { keyCode: 13 })
+    wrapper.element.dispatchEvent(keydownEvent)
+
+    expect(wrapper.find('.v-ripple__container').exists()).toBe(true)
+
+    const blurEvent = new FocusEvent('blur')
+    wrapper.element.dispatchEvent(blurEvent)
+
+    jest.runAllTimers()
+    expect(wrapper.find('.v-ripple__container').exists()).toBe(false)
+  })
+})

package/src/directives/ripple/index.ts

@@ -0,0 +1,342 @@
+// Styles
+import './VRipple.sass'
+
+// Utilities
+import { consoleWarn } from '../../util/console'
+import { keyCodes } from '../../util/helpers'
+import makeDirectiveActivatable from '../../util/make-directive-activatable'
+// Types
+import { VNode, VNodeDirective, nextTick } from 'vue'
+
+type VuetifyRippleEvent = (MouseEvent | TouchEvent | KeyboardEvent) & { rippleStop?: boolean }
+
+const DELAY_RIPPLE = 80
+
+function transform (el: HTMLElement, value: string) {
+  el.style.transform = value
+  el.style.webkitTransform = value
+}
+
+export interface RippleOptions {
+  class?: string
+  center?: boolean
+  circle?: boolean
+}
+
+function isTouchEvent (e: VuetifyRippleEvent): e is TouchEvent {
+  return e.constructor.name === 'TouchEvent'
+}
+
+function isKeyboardEvent (e: VuetifyRippleEvent): e is KeyboardEvent {
+  return e.constructor.name === 'KeyboardEvent'
+}
+
+const calculate = (
+  e: VuetifyRippleEvent,
+  el: HTMLElement,
+  value: RippleOptions = {}
+) => {
+  let localX = 0
+  let localY = 0
+
+  if (!isKeyboardEvent(e)) {
+    const offset = el.getBoundingClientRect()
+    const target = isTouchEvent(e) ? e.touches[e.touches.length - 1] : e
+
+    localX = target.clientX - offset.left
+    localY = target.clientY - offset.top
+  }
+
+  let radius = 0
+  let scale = 0.3
+  if (el._ripple && el._ripple.circle) {
+    scale = 0.15
+    radius = el.clientWidth / 2
+    radius = value.center ? radius : radius + Math.sqrt((localX - radius) ** 2 + (localY - radius) ** 2) / 4
+  } else {
+    radius = Math.sqrt(el.clientWidth ** 2 + el.clientHeight ** 2) / 2
+  }
+
+  const centerX = `${(el.clientWidth - (radius * 2)) / 2}px`
+  const centerY = `${(el.clientHeight - (radius * 2)) / 2}px`
+
+  const x = value.center ? centerX : `${localX - radius}px`
+  const y = value.center ? centerY : `${localY - radius}px`
+
+  return { radius, scale, x, y, centerX, centerY }
+}
+
+const ripples = {
+  /* eslint-disable max-statements */
+  show (
+    e: VuetifyRippleEvent,
+    el: HTMLElement,
+    value: RippleOptions = {}
+  ) {
+    if (!el._ripple || !el._ripple.enabled) {
+      return
+    }
+
+    const container = document.createElement('span')
+    const animation = document.createElement('span')
+
+    container.appendChild(animation)
+    container.className = 'v-ripple__container'
+
+    if (value.class) {
+      container.className += ` ${value.class}`
+    }
+
+    const { radius, scale, x, y, centerX, centerY } = calculate(e, el, value)
+
+    const size = `${radius * 2}px`
+    animation.className = 'v-ripple__animation'
+    animation.style.width = size
+    animation.style.height = size
+
+    el.appendChild(container)
+
+    const computed = window.getComputedStyle(el)
+    if (computed && computed.position === 'static') {
+      el.style.position = 'relative'
+      el.dataset.previousPosition = 'static'
+    }
+
+    animation.classList.add('v-ripple__animation--enter')
+    animation.classList.add('v-ripple__animation--visible')
+    transform(animation, `translate(${x}, ${y}) scale3d(${scale},${scale},${scale})`)
+    animation.dataset.activated = String(performance.now())
+
+    setTimeout(() => {
+      animation.classList.remove('v-ripple__animation--enter')
+      animation.classList.add('v-ripple__animation--in')
+      transform(animation, `translate(${centerX}, ${centerY}) scale3d(1,1,1)`)
+    }, 0)
+  },
+
+  hide (el: HTMLElement | null) {
+    if (!el || !el._ripple || !el._ripple.enabled) return
+
+    const ripples = el.getElementsByClassName('v-ripple__animation')
+
+    if (ripples.length === 0) return
+    const animation = ripples[ripples.length - 1]
+
+    if (animation.dataset.isHiding) return
+    else animation.dataset.isHiding = 'true'
+
+    const diff = performance.now() - Number(animation.dataset.activated)
+    const delay = Math.max(250 - diff, 0)
+
+    setTimeout(() => {
+      animation.classList.remove('v-ripple__animation--in')
+      animation.classList.add('v-ripple__animation--out')
+
+      setTimeout(() => {
+        const ripples = el.getElementsByClassName('v-ripple__animation')
+        if (ripples.length === 1 && el.dataset.previousPosition) {
+          el.style.position = el.dataset.previousPosition
+          delete el.dataset.previousPosition
+        }
+
+        if (animation.parentNode?.parentNode === el) el.removeChild(animation.parentNode)
+      }, 300)
+    }, delay)
+  },
+}
+
+function isRippleEnabled (value: any): value is true {
+  return typeof value === 'undefined' || !!value
+}
+
+function rippleShow (e: VuetifyRippleEvent) {
+  const value: RippleOptions = {}
+  const element = e.currentTarget as HTMLElement
+
+  if (!element || !element._ripple || element._ripple.touched || e.rippleStop) return
+
+  // Don't allow the event to trigger ripples on any other elements
+  e.rippleStop = true
+
+  if (isTouchEvent(e)) {
+    element._ripple.touched = true
+    element._ripple.isTouch = true
+  } else {
+    // It's possible for touch events to fire
+    // as mouse events on Android/iOS, this
+    // will skip the event call if it has
+    // already been registered as touch
+    if (element._ripple.isTouch) return
+  }
+  value.center = element._ripple.centered || isKeyboardEvent(e)
+  if (element._ripple.class) {
+    value.class = element._ripple.class
+  }
+
+  if (isTouchEvent(e)) {
+    // already queued that shows or hides the ripple
+    if (element._ripple.showTimerCommit) return
+
+    element._ripple.showTimerCommit = () => {
+      ripples.show(e, element, value)
+    }
+    element._ripple.showTimer = window.setTimeout(() => {
+      if (element && element._ripple && element._ripple.showTimerCommit) {
+        element._ripple.showTimerCommit()
+        element._ripple.showTimerCommit = null
+      }
+    }, DELAY_RIPPLE)
+  } else {
+    ripples.show(e, element, value)
+  }
+}
+
+function rippleHide (e: Event) {
+  const element = e.currentTarget as HTMLElement | null
+  if (!element || !element._ripple) return
+
+  window.clearTimeout(element._ripple.showTimer)
+
+  // The touch interaction occurs before the show timer is triggered.
+  // We still want to show ripple effect.
+  if (e.type === 'touchend' && element._ripple.showTimerCommit) {
+    element._ripple.showTimerCommit()
+    element._ripple.showTimerCommit = null
+
+    // re-queue ripple hiding
+    element._ripple.showTimer = setTimeout(() => {
+      rippleHide(e)
+    })
+    return
+  }
+
+  window.setTimeout(() => {
+    if (element._ripple) {
+      element._ripple.touched = false
+    }
+  })
+  ripples.hide(element)
+}
+
+function rippleCancelShow (e: MouseEvent | TouchEvent) {
+  const element = e.currentTarget as HTMLElement | undefined
+
+  if (!element || !element._ripple) return
+
+  if (element._ripple.showTimerCommit) {
+    element._ripple.showTimerCommit = null
+  }
+
+  window.clearTimeout(element._ripple.showTimer)
+}
+
+let keyboardRipple = false
+
+function keyboardRippleShow (e: KeyboardEvent) {
+  if (!keyboardRipple && (e.keyCode === keyCodes.enter || e.keyCode === keyCodes.space)) {
+    keyboardRipple = true
+    rippleShow(e)
+  }
+}
+
+function keyboardRippleHide (e: KeyboardEvent) {
+  keyboardRipple = false
+  rippleHide(e)
+}
+
+function focusRippleHide (e: FocusEvent) {
+  if (keyboardRipple === true) {
+    keyboardRipple = false
+    rippleHide(e)
+  }
+}
+
+function updateRipple (el: HTMLElement, binding: VNodeDirective, wasEnabled: boolean) {
+  const enabled = isRippleEnabled(binding.value)
+  if (!enabled) {
+    ripples.hide(el)
+  }
+  el._ripple = el._ripple || {}
+  el._ripple.enabled = enabled
+  const value = binding.value || {}
+  if (value.center) {
+    el._ripple.centered = true
+  }
+  if (value.class) {
+    el._ripple.class = binding.value.class
+  }
+  if (value.circle) {
+    el._ripple.circle = value.circle
+  }
+  if (enabled && !wasEnabled) {
+    el.addEventListener('touchstart', rippleShow, { passive: true })
+    el.addEventListener('touchend', rippleHide, { passive: true })
+    el.addEventListener('touchmove', rippleCancelShow, { passive: true })
+    el.addEventListener('touchcancel', rippleHide)
+
+    el.addEventListener('mousedown', rippleShow)
+    el.addEventListener('mouseup', rippleHide)
+    el.addEventListener('mouseleave', rippleHide)
+
+    el.addEventListener('keydown', keyboardRippleShow)
+    el.addEventListener('keyup', keyboardRippleHide)
+
+    el.addEventListener('blur', focusRippleHide)
+
+    // Anchor tags can be dragged, causes other hides to fail - #1537
+    el.addEventListener('dragstart', rippleHide, { passive: true })
+  } else if (!enabled && wasEnabled) {
+    removeListeners(el)
+  }
+}
+
+function removeListeners (el: HTMLElement) {
+  el.removeEventListener('mousedown', rippleShow)
+  el.removeEventListener('touchstart', rippleShow)
+  el.removeEventListener('touchend', rippleHide)
+  el.removeEventListener('touchmove', rippleCancelShow)
+  el.removeEventListener('touchcancel', rippleHide)
+  el.removeEventListener('mouseup', rippleHide)
+  el.removeEventListener('mouseleave', rippleHide)
+  el.removeEventListener('keydown', keyboardRippleShow)
+  el.removeEventListener('keyup', keyboardRippleHide)
+  el.removeEventListener('dragstart', rippleHide)
+  el.removeEventListener('blur', focusRippleHide)
+}
+
+function directive (el: HTMLElement, binding: VNodeDirective, node: VNode) {
+  updateRipple(el, binding, false)
+
+  if (process.env.NODE_ENV === 'development') {
+    // warn if an inline element is used, waiting for el to be in the DOM first
+    nextTick(() => {
+      const computed = window.getComputedStyle(el)
+      if (computed && computed.display === 'inline') {
+        const context = (node as any).fnOptions ? [(node as any).fnOptions] : [node.componentInstance]
+        consoleWarn('v-ripple can only be used on block-level elements', ...context)
+      }
+    })
+  }
+}
+
+function unbind (el: HTMLElement, binding) {
+  delete el._ripple
+  removeListeners(el)
+}
+
+function update (el: HTMLElement, binding: VNodeDirective) {
+  if (binding.value === binding.oldValue) {
+    return
+  }
+
+  const wasEnabled = isRippleEnabled(binding.oldValue)
+  updateRipple(el, binding, wasEnabled)
+}
+
+export const Ripple = {
+  mounted: directive,
+  unmounted: unbind,
+  updated: update,
+}
+
+export default makeDirectiveActivatable(Ripple)

package/src/directives/scroll/__tests__/scroll.spec.ts

@@ -0,0 +1,130 @@
+// Directives
+import Scroll from '../'
+import { DirectiveBinding } from 'vue'
+
+describe('scroll.ts', () => {
+  const { mounted, unmounted } = Scroll
+
+  let binding
+  let el
+  let options
+  let passive
+  let vnode
+
+  beforeEach(() => {
+    vnode = { ctx: { uid: 1 } } as any
+    options = { passive: true }
+    binding = {
+      value: jest.fn(),
+      modifiers: {},
+      arg: null,
+    } as DirectiveBinding
+    el = {
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+    }
+  })
+
+  it('should work with no provided scroll target (window)', () => {
+    const spyOnWindowAddListener = jest.spyOn(window, 'addEventListener')
+    const spyOnWindowRemoveListener = jest.spyOn(window, 'removeEventListener')
+
+    mounted(el, binding, vnode)
+
+    expect(spyOnWindowAddListener).toHaveBeenCalledWith('scroll', binding.value, options)
+    expect(el._onScroll[1]).toEqual({
+      handler: binding.value,
+      options,
+      target: window,
+    })
+
+    unmounted(el, binding, vnode)
+
+    expect(spyOnWindowRemoveListener).toHaveBeenCalledWith('scroll', binding.value, options)
+    expect(el._onScroll[1]).toBeUndefined()
+  })
+
+  it('should work with a provided valid querySelector string', () => {
+    // Query selector searches the document
+    const target = document.createElement('div')
+    const spyOnFooAddListener = jest.spyOn(target, 'addEventListener')
+    const spyOnFooRemoveListener = jest.spyOn(target, 'removeEventListener')
+
+    target.id = 'foo'
+    document.body.appendChild(target)
+
+    binding.arg = '#bar'
+
+    // Binds nothing if element not found
+    mounted(el, binding, vnode)
+
+    expect(spyOnFooAddListener).not.toHaveBeenCalled()
+    expect(el._onScroll).toBeUndefined()
+
+    binding.arg = '#foo'
+
+    mounted(el, binding, vnode)
+
+    expect(spyOnFooAddListener).toHaveBeenCalledWith('scroll', binding.value, options)
+    expect(el._onScroll[1]).toEqual({
+      handler: binding.value,
+      options,
+      target,
+    })
+
+    unmounted(el, binding, vnode)
+
+    expect(spyOnFooRemoveListener).toHaveBeenCalledWith('scroll', binding.value, options)
+    expect(el._onScroll[1]).toBeUndefined()
+
+    document.body.removeChild(target)
+  })
+
+  it('should work with the self modifier', () => {
+    binding.modifiers = { self: true }
+
+    mounted(el, binding, vnode)
+
+    expect(el.addEventListener).toHaveBeenCalledWith('scroll', binding.value, options)
+    expect(el._onScroll[1]).toEqual({
+      handler: binding.value,
+      options,
+      target: undefined,
+    })
+
+    unmounted(el, binding, vnode)
+
+    expect(el.removeEventListener).toHaveBeenCalledWith('scroll', binding.value, options)
+    expect(el._onScroll[1]).toBeUndefined()
+  })
+
+  it('should not remove listeners if no _onScroll property present', () => {
+    unmounted(el, binding, vnode)
+
+    expect(el.removeEventListener).not.toHaveBeenCalled()
+  })
+
+  it('should accept an object for the value with handler and/or options', () => {
+    const handler = binding.value
+
+    binding.value = { handler }
+
+    mounted(el, binding, vnode)
+
+    expect(el._onScroll[1]).toEqual({
+      handler,
+      target: window,
+      options: { passive: true },
+    })
+
+    binding.value = { handler, options: { passive: false } }
+
+    mounted(el, binding, vnode)
+
+    expect(el._onScroll[1]).toEqual({
+      handler,
+      target: window,
+      options: { passive: false },
+    })
+  })
+})

package/src/directives/scroll/index.ts

@@ -0,0 +1,68 @@
+import { DirectiveBinding, VNode, ObjectDirective } from 'vue'
+
+interface ScrollDirectiveBinding extends Omit<DirectiveBinding, 'modifiers'> {
+  value:
+    | EventListener
+    | {
+        handler: EventListener
+        options?: boolean | AddEventListenerOptions
+      }
+    | (EventListenerObject & { options?: boolean | AddEventListenerOptions })
+  modifiers?: {
+    self?: boolean
+  }
+}
+
+function mounted (
+  el: HTMLElement,
+  binding: ScrollDirectiveBinding,
+  vnode: VNode
+) {
+  const { self = false } = binding.modifiers || {}
+  const value = binding.value
+  const options = (typeof value === 'object' && value.options) || {
+    passive: true,
+  }
+  const handler =
+    typeof value === 'function' || 'handleEvent' in value
+      ? value
+      : value.handler
+
+  const target = self
+    ? el
+    : binding.arg
+      ? document.querySelector(binding.arg)
+      : window
+
+  if (!target) return
+
+  target.addEventListener('scroll', handler, options)
+
+  el._onScroll = Object(el._onScroll)
+  el._onScroll![vnode.ctx!.uid] = {
+    handler,
+    options,
+    // Don't reference self
+    target: self ? undefined : target,
+  }
+}
+
+function unmounted (
+  el: HTMLElement,
+  binding: ScrollDirectiveBinding,
+  vnode: VNode
+) {
+  if (!el._onScroll?.[vnode.ctx!.uid]) return
+
+  const { handler, options, target = el } = el._onScroll[vnode.ctx!.uid]!
+
+  target.removeEventListener('scroll', handler, options)
+  delete el._onScroll[vnode.ctx!.uid]
+}
+
+export const Scroll: ObjectDirective = {
+  mounted,
+  unmounted,
+}
+
+export default Scroll