@kokoccc/vuetify 1.0.1

package/src/components/transitions/expand-transition.ts

@@ -0,0 +1,86 @@
+import { upperFirst } from '../../util/helpers'
+
+interface HTMLExpandElement extends HTMLElement {
+  _parent?: (Node & ParentNode & HTMLElement) | null
+  _initialStyle?: {
+    transition: string
+    overflow: string
+    height?: string | null
+    width?: string | null
+  }
+}
+
+export default function (expandedParentClass = '', x = false) {
+  const sizeProperty = x ? 'width' : 'height' as 'width' | 'height'
+  const offsetProperty = `offset${upperFirst(sizeProperty)}` as 'offsetHeight' | 'offsetWidth'
+
+  return {
+    onBeforeEnter (el: HTMLExpandElement) {
+      el._parent = el.parentNode as (Node & ParentNode & HTMLElement) | null
+      el._initialStyle = {
+        transition: el.style.transition,
+        overflow: el.style.overflow,
+        [sizeProperty]: el.style[sizeProperty],
+      }
+    },
+
+    onEnter (el: HTMLExpandElement) {
+      if(el.style.display === 'none') return
+
+      const initialStyle = el._initialStyle!
+
+      el.style.setProperty('transition', 'none', 'important')
+      // Hide overflow to account for collapsed margins in the calculated height
+      el.style.overflow = 'hidden'
+      const offset = `${el[offsetProperty]}px`
+
+      el.style[sizeProperty] = '0'
+
+      void el.offsetHeight // force reflow
+
+      el.style.transition = initialStyle.transition
+
+      if (expandedParentClass && el._parent) {
+        el._parent.classList.add(expandedParentClass)
+      }
+
+      requestAnimationFrame(() => {
+        el.style[sizeProperty] = offset
+      })
+    },
+
+    onAfterEnter: resetStyles,
+    onEnterCancelled: resetStyles,
+
+    onLeave (el: HTMLExpandElement) {
+      el._initialStyle = {
+        transition: '',
+        overflow: el.style.overflow,
+        [sizeProperty]: el.style[sizeProperty],
+      }
+
+      el.style.overflow = 'hidden'
+      el.style[sizeProperty] = `${el[offsetProperty]}px`
+      void el.offsetHeight // force reflow
+
+      requestAnimationFrame(() => (el.style[sizeProperty] = '0'))
+    },
+
+    onAfterLeave: afterLeave,
+    onLeaveCancelled: afterLeave,
+  }
+
+  function afterLeave (el: HTMLExpandElement) {
+    if (expandedParentClass && el._parent) {
+      el._parent.classList.remove(expandedParentClass)
+    }
+    resetStyles(el)
+  }
+
+  function resetStyles (el: HTMLExpandElement) {
+    const size = el._initialStyle![sizeProperty]
+    el.style.overflow = el._initialStyle!.overflow
+    if (size != null) el.style[sizeProperty] = size
+    delete el._initialStyle
+  }
+}

package/src/components/transitions/index.ts

@@ -0,0 +1,59 @@
+import {
+  createSimpleTransition,
+  createJavascriptTransition,
+} from './createTransition'
+
+import ExpandTransitionGenerator from './expand-transition'
+
+// Component specific transitions
+export const VCarouselTransition = createSimpleTransition('carousel-transition')
+export const VCarouselReverseTransition = createSimpleTransition('carousel-reverse-transition')
+export const VTabTransition = createSimpleTransition('tab-transition')
+export const VTabReverseTransition = createSimpleTransition('tab-reverse-transition')
+export const VMenuTransition = createSimpleTransition('menu-transition')
+export const VFabTransition = createSimpleTransition('fab-transition', 'center center', 'out-in')
+
+// Generic transitions
+export const VDialogTransition = createSimpleTransition('dialog-transition')
+export const VDialogBottomTransition = createSimpleTransition('dialog-bottom-transition')
+export const VDialogTopTransition = createSimpleTransition('dialog-top-transition')
+export const VFadeTransition = createSimpleTransition('fade-transition')
+export const VScaleTransition = createSimpleTransition('scale-transition')
+export const VScrollXTransition = createSimpleTransition('scroll-x-transition')
+export const VScrollXReverseTransition = createSimpleTransition('scroll-x-reverse-transition')
+export const VScrollYTransition = createSimpleTransition('scroll-y-transition')
+export const VScrollYReverseTransition = createSimpleTransition('scroll-y-reverse-transition')
+export const VSlideXTransition = createSimpleTransition('slide-x-transition')
+export const VSlideXReverseTransition = createSimpleTransition('slide-x-reverse-transition')
+export const VSlideYTransition = createSimpleTransition('slide-y-transition')
+export const VSlideYReverseTransition = createSimpleTransition('slide-y-reverse-transition')
+
+// Javascript transitions
+export const VExpandTransition = createJavascriptTransition('expand-transition', ExpandTransitionGenerator())
+export const VExpandXTransition = createJavascriptTransition('expand-x-transition', ExpandTransitionGenerator('', true))
+
+export default {
+  $_vuetify_subcomponents: {
+    VCarouselTransition,
+    VCarouselReverseTransition,
+    VDialogTransition,
+    VDialogBottomTransition,
+    VDialogTopTransition,
+    VFabTransition,
+    VFadeTransition,
+    VMenuTransition,
+    VScaleTransition,
+    VScrollXTransition,
+    VScrollXReverseTransition,
+    VScrollYTransition,
+    VScrollYReverseTransition,
+    VSlideXTransition,
+    VSlideXReverseTransition,
+    VSlideYTransition,
+    VSlideYReverseTransition,
+    VTabReverseTransition,
+    VTabTransition,
+    VExpandTransition,
+    VExpandXTransition,
+  },
+}

package/src/directives/click-outside/__tests__/click-outside-shadow-dom.spec.ts

@@ -0,0 +1,118 @@
+// Directives
+import ClickOutside from '../'
+import { wait } from '../../../../test'
+
+function bootstrap (args?: object) {
+  const outsideEl = document.createElement('div')
+  const shadowHost = document.createElement('div')
+  const shadowRoot = shadowHost.attachShadow({ mode: 'open' })
+  const shadowEl = document.createElement('div')
+
+  const binding = {
+    value: {
+      handler: jest.fn(),
+      ...args,
+    },
+  } as any
+  const vnode = { ctx: { uid: 1 } } as any
+
+  let shadowClickHandler
+  let outsideClickHandler
+
+  let shadowMousedownHandler
+  let outsideMousedownHandler
+
+  document.body.appendChild(shadowHost)
+  shadowRoot.appendChild(shadowEl)
+
+  jest.spyOn(window.document, 'addEventListener').mockImplementation((eventName, eventHandler, options) => {
+    if (eventName === 'click') outsideClickHandler = eventHandler
+    if (eventName === 'mousedown') outsideMousedownHandler = eventHandler
+  })
+
+  jest.spyOn(shadowRoot, 'addEventListener').mockImplementation((eventName, eventHandler, options) => {
+    if (eventName === 'click') shadowClickHandler = eventHandler
+    if (eventName === 'mousedown') shadowMousedownHandler = eventHandler
+  })
+
+  jest.spyOn(window.document, 'removeEventListener')
+  jest.spyOn(shadowRoot, 'removeEventListener')
+
+  ClickOutside.mounted(shadowEl as HTMLElement, binding, vnode)
+
+  return {
+    binding,
+    vnode,
+    callback: binding.value.handler,
+    shadowEl: shadowEl as HTMLElement,
+    outsideEl: outsideEl as HTMLElement,
+    shadowRoot: shadowRoot as Node,
+    shadowClickHandler,
+    outsideClickHandler,
+    shadowMousedownHandler,
+    outsideMousedownHandler,
+  }
+}
+
+describe('click-outside.js within the Shadow DOM', () => {
+  it('should register and unregister handler outside of the shadow DOM', () => {
+    const { outsideClickHandler, shadowEl, binding, vnode } = bootstrap()
+    expect(window.document.addEventListener).toHaveBeenCalledWith('click', outsideClickHandler, true)
+
+    ClickOutside.unmounted(shadowEl, binding, vnode)
+    expect(window.document.removeEventListener).toHaveBeenCalledWith('click', outsideClickHandler, true)
+  })
+
+  it('should register and unregister handler within the shadow DOM', () => {
+    const { shadowClickHandler, shadowRoot, shadowEl, binding, vnode } = bootstrap()
+    expect(shadowRoot.addEventListener).toHaveBeenCalledWith('click', shadowClickHandler, true)
+
+    ClickOutside.unmounted(shadowEl, binding, vnode)
+    expect(shadowRoot.removeEventListener).toHaveBeenCalledWith('click', shadowClickHandler, true)
+  })
+
+  it('should call the callback when closeConditional returns true and event target is outside the shadow DOM', async () => {
+    const { outsideClickHandler, callback, outsideEl } = bootstrap({ closeConditional: () => true })
+    const event = { target: outsideEl }
+
+    outsideClickHandler(event)
+    await wait()
+    expect(callback).toHaveBeenCalledWith(event)
+  })
+
+  it('should call the callback when closeConditional returns true and event target is within the shadow DOM', async () => {
+    const { shadowClickHandler, callback, shadowRoot } = bootstrap({ closeConditional: () => true })
+    const event = { target: shadowRoot }
+
+    shadowClickHandler(event)
+    await wait()
+    expect(callback).toHaveBeenCalledWith(event)
+  })
+
+  it('should not call the callback when closeConditional is not provided', async () => {
+    const { shadowClickHandler, callback, shadowEl } = bootstrap()
+
+    shadowClickHandler({ target: shadowEl })
+    await wait()
+    expect(callback).not.toHaveBeenCalled()
+  })
+
+  it('should not call the callback when clicked in element within the shadow DOM', async () => {
+    const { shadowClickHandler, callback, shadowEl } = bootstrap({ closeConditional: () => true })
+
+    shadowClickHandler({ target: shadowEl })
+    await wait()
+    expect(callback).not.toHaveBeenCalledWith()
+  })
+
+  it('should not call the callback when mousedown was on the element within the shadow DOM', async () => {
+    const { shadowClickHandler, shadowMousedownHandler, callback, shadowEl } = bootstrap({ closeConditional: () => true })
+    const mousedownEvent = { target: shadowEl }
+    const clickEvent = { target: document.createElement('div') }
+
+    shadowMousedownHandler(mousedownEvent)
+    shadowClickHandler(clickEvent)
+    await wait()
+    expect(callback).not.toHaveBeenCalledWith(clickEvent)
+  })
+})

package/src/directives/click-outside/__tests__/click-outside.spec.ts

@@ -0,0 +1,111 @@
+// Directives
+import ClickOutside from '../'
+import { wait } from '../../../../test'
+
+function bootstrap (args?: object) {
+  const el = document.createElement('div')
+
+  const binding = {
+    value: {
+      handler: jest.fn(),
+      ...args,
+    },
+  } as any
+  const vnode = { ctx: { uid: 1 } } as any
+
+  let clickHandler
+  let mousedownHandler
+  jest.spyOn(window.document, 'addEventListener').mockImplementation((eventName, eventHandler, options) => {
+    if (eventName === 'click') clickHandler = eventHandler
+    if (eventName === 'mousedown') mousedownHandler = eventHandler
+  })
+  jest.spyOn(window.document, 'removeEventListener')
+
+  ClickOutside.mounted(el as HTMLElement, binding, vnode)
+
+  return {
+    binding,
+    vnode,
+    callback: binding.value.handler,
+    el: el as HTMLElement,
+    clickHandler,
+    mousedownHandler,
+  }
+}
+
+describe('click-outside', () => {
+  it('should register and unregister handler', () => {
+    const { clickHandler, el, binding, vnode } = bootstrap()
+    expect(window.document.addEventListener).toHaveBeenCalledWith('click', clickHandler, true)
+
+    ClickOutside.unmounted(el, binding, vnode)
+    expect(window.document.removeEventListener).toHaveBeenCalledWith('click', clickHandler, true)
+  })
+
+  it('should call the callback when closeConditional returns true', async () => {
+    const { clickHandler, callback } = bootstrap({ closeConditional: () => true })
+    const event = { target: document.createElement('div') }
+
+    clickHandler(event)
+    await wait()
+    expect(callback).toHaveBeenCalledWith(event)
+  })
+
+  it('should not call the callback when closeConditional returns false', async () => {
+    const { clickHandler, callback, el } = bootstrap({ closeConditional: () => false })
+
+    clickHandler({ target: el })
+    await wait()
+    expect(callback).not.toHaveBeenCalled()
+  })
+
+  it('should not call the callback when closeConditional is not provided', async () => {
+    const { clickHandler, callback, el } = bootstrap()
+
+    clickHandler({ target: el })
+    await wait()
+    expect(callback).not.toHaveBeenCalled()
+  })
+
+  it('should not call the callback when clicked in element', async () => {
+    const { clickHandler, callback, el } = bootstrap({ closeConditional: () => true })
+
+    clickHandler({ target: el })
+    await wait()
+    expect(callback).not.toHaveBeenCalledWith()
+  })
+
+  it('should not call the callback when clicked in elements', async () => {
+    const { clickHandler, callback, el } = bootstrap({
+      closeConditional: () => true,
+      include: () => [el],
+    })
+
+    clickHandler({ target: document.createElement('div') })
+    await wait()
+    expect(callback).not.toHaveBeenCalledWith()
+  })
+
+  it('should not call the callback when event is not fired by user action', async () => {
+    const { clickHandler, callback } = bootstrap({ closeConditional: () => true })
+
+    clickHandler({ isTrusted: false })
+    await wait()
+    expect(callback).not.toHaveBeenCalledWith()
+
+    clickHandler({ pointerType: false })
+    await wait()
+    expect(callback).not.toHaveBeenCalledWith()
+  })
+
+  it('should not call the callback when mousedown was on the element', async () => {
+    const { clickHandler, mousedownHandler, callback, el } = bootstrap({ closeConditional: () => true })
+    const mousedownEvent = { target: el }
+    const clickEvent = { target: document.createElement('div') }
+
+    mousedownHandler(mousedownEvent)
+    clickHandler(clickEvent)
+    await wait()
+    expect(callback).not.toHaveBeenCalledWith(clickEvent)
+  })
+})

package/src/directives/click-outside/index.ts

@@ -0,0 +1,119 @@
+import { attachedRoot } from '../../util/dom'
+import { VNodeDirective } from 'vue/types/vnode'
+import { VNode } from 'vue'
+
+interface ClickOutsideBindingArgs {
+  handler: (e: Event) => void
+  closeConditional?: (e: Event) => boolean
+  include?: () => HTMLElement[]
+}
+
+interface ClickOutsideDirective extends VNodeDirective {
+  value?: ((e: Event) => void) | ClickOutsideBindingArgs
+}
+
+function defaultConditional () {
+  return true
+}
+
+function checkEvent (e: PointerEvent, el: HTMLElement, binding: ClickOutsideDirective): boolean {
+  // The include element callbacks below can be expensive
+  // so we should avoid calling them when we're not active.
+  // Explicitly check for false to allow fallback compatibility
+  // with non-toggleable components
+  if (!e || checkIsActive(e, binding) === false) return false
+
+  // If we're clicking inside the shadowroot, then the app root doesn't get the same
+  // level of introspection as to _what_ we're clicking. We want to check to see if
+  // our target is the shadowroot parent container, and if it is, ignore.
+  const root = attachedRoot(el)
+  if (
+    typeof ShadowRoot !== 'undefined' &&
+    root instanceof ShadowRoot &&
+    root.host === e.target
+  ) return false
+
+  // Check if additional elements were passed to be included in check
+  // (click must be outside all included elements, if any)
+  const elements = ((typeof binding.value === 'object' && binding.value.include) || (() => []))()
+  // Add the root element for the component this directive was defined on
+  elements.push(el)
+
+  // Check if it's a click outside our elements, and then if our callback returns true.
+  // Non-toggleable components should take action in their callback and return falsy.
+  // Toggleable can return true if it wants to deactivate.
+  // Note that, because we're in the capture phase, this callback will occur before
+  // the bubbling click event on any outside elements.
+  return !elements.some(el => el.contains(e.target as Node))
+}
+
+function checkIsActive (e: PointerEvent, binding: ClickOutsideDirective): boolean | void {
+  const isActive = (typeof binding.value === 'object' && binding.value.closeConditional) || defaultConditional
+
+  return isActive(e)
+}
+
+function directive (e: PointerEvent, el: HTMLElement, binding: ClickOutsideDirective) {
+  const handler = typeof binding.value === 'function' ? binding.value : binding.value!.handler
+
+  el._clickOutside!.lastMousedownWasOutside && checkEvent(e, el, binding) && setTimeout(() => {
+    checkIsActive(e, binding) && handler && handler(e)
+  }, 0)
+}
+
+function handleShadow (el: HTMLElement, callback: Function): void {
+  const root = attachedRoot(el)
+
+  callback(document)
+
+  if (typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot) {
+    callback(root)
+  }
+}
+
+export const ClickOutside = {
+  // [data-app] may not be found
+  // if using bind, inserted makes
+  // sure that the root element is
+  // available, iOS does not support
+  // clicks on body
+  mounted (el: HTMLElement, binding: ClickOutsideDirective, vnode: VNode) {
+    const onClick = (e: Event) => directive(e as PointerEvent, el, binding)
+    const onMousedown = (e: Event) => {
+      el._clickOutside!.lastMousedownWasOutside = checkEvent(e as PointerEvent, el, binding)
+    }
+
+    handleShadow(el, (app: HTMLElement) => {
+      app.addEventListener('click', onClick, true)
+      app.addEventListener('mousedown', onMousedown, true)
+    })
+
+    if (!el._clickOutside) {
+      el._clickOutside = {
+        lastMousedownWasOutside: true,
+      }
+    }
+
+    el._clickOutside[vnode.ctx.uid] = {
+      onClick,
+      onMousedown,
+    }
+  },
+
+  unmounted (el: HTMLElement, binding: ClickOutsideDirective, vnode: VNode) {
+    if (!el._clickOutside) return
+
+    handleShadow(el, (app: HTMLElement) => {
+      if (!app || !el._clickOutside?.[vnode.ctx.uid]) return
+
+      const { onClick, onMousedown } = el._clickOutside[vnode.ctx.uid]!
+
+      app.removeEventListener('click', onClick, true)
+      app.removeEventListener('mousedown', onMousedown, true)
+    })
+
+    delete el._clickOutside[vnode.ctx.uid]
+  },
+}
+
+export default ClickOutside

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

@@ -0,0 +1,154 @@
+// Vue
+import { h, defineComponent } from 'vue'
+
+// Directives
+import Color from '../'
+
+// Utilities
+import {
+  mount,
+  VueWrapper,
+  enableAutoUnmount,
+} from '@vue/test-utils'
+
+describe('color.ts', () => {
+  let mountFunction: (directive?: any) => VueWrapper<any>
+
+  enableAutoUnmount(afterEach)
+
+  beforeEach(() => {
+    mountFunction = (directive = {}) => {
+      const TestComponent = defineComponent({
+        directives: { Color },
+        data: () => ({
+          color: '',
+        }),
+        template: `<div v-color${directive.arg ? `:${directive.arg}` : ''}${Object.keys(directive.modifiers || {}).length ? '.' + Object.keys(directive.modifiers).join('.') : ''}="color"></div>`,
+      })
+
+      return mount(TestComponent, {
+        global: {
+          config: {
+            globalProperties: {
+              $vuetify: {
+                theme: {
+                  currentTheme: {
+                    primary: '#1976d2',
+                  },
+                },
+              },
+            },
+          },
+          mocks: {
+            $vuetify: {
+              theme: {
+                currentTheme: {
+                  primary: '#1976d2',
+                },
+              },
+            },
+          },
+          provide: {
+            $vuetify: {
+              theme: {
+                currentTheme: {
+                  primary: '#1976d2',
+                },
+              },
+            },
+          },
+        },
+      })
+    }
+  })
+
+  it('should set background color', async () => {
+    const wrapper = mountFunction({
+      name: 'color',
+    })
+
+    await wrapper.setData({ color: '#01f' })
+    expect(wrapper.element.style.backgroundColor).toEqual('rgb(0, 17, 255)')
+    expect(wrapper.element.style.borderColor).toEqual('#01f')
+
+    await wrapper.setData({ color: 'rgb(255, 255, 0)' })
+    expect(wrapper.element.style.backgroundColor).toEqual('rgb(255, 255, 0)')
+    expect(wrapper.element.style.borderColor).toEqual('rgb(255, 255, 0)')
+
+    await wrapper.setData({ color: 'red' })
+    expect(wrapper.element.style.backgroundColor).toEqual('rgb(244, 67, 54)')
+    expect(wrapper.element.style.borderColor).toEqual('#f44336')
+
+    await wrapper.setData({ color: 'red lighten-1' })
+    expect(wrapper.element.style.backgroundColor).toEqual('rgb(239, 83, 80)')
+    expect(wrapper.element.style.borderColor).toEqual('#ef5350')
+
+    await wrapper.setData({ color: 'primary' })
+    expect(wrapper.element.style.backgroundColor).toEqual('rgb(25, 118, 210)')
+    expect(wrapper.element.style.borderColor).toEqual('#1976d2')
+  })
+
+  it('should set text color', async () => {
+    const wrapper = mountFunction({
+      name: 'color',
+      arg: 'text',
+    })
+
+    await wrapper.setData({ color: '#01f' })
+    expect(wrapper.element.style.color).toEqual('rgb(0, 17, 255)')
+    expect(wrapper.element.style.caretColor).toEqual('#01f')
+
+    await wrapper.setData({ color: 'rgba(0, 1, 2, 0.5)' })
+    expect(wrapper.element.style.color).toEqual('rgba(0, 1, 2, 0.5)')
+    expect(wrapper.element.style.caretColor).toEqual('rgba(0, 1, 2, 0.5)')
+
+    await wrapper.setData({ color: 'red' })
+    expect(wrapper.element.style.color).toEqual('rgb(244, 67, 54)')
+    expect(wrapper.element.style.caretColor).toEqual('#f44336')
+
+    await wrapper.setData({ color: 'red lighten-1' })
+    expect(wrapper.element.style.color).toEqual('rgb(239, 83, 80)')
+    expect(wrapper.element.style.caretColor).toEqual('#ef5350')
+
+    await wrapper.setData({ color: 'primary' })
+    expect(wrapper.element.style.color).toEqual('rgb(25, 118, 210)')
+    expect(wrapper.element.style.caretColor).toEqual('#1976d2')
+  })
+
+  it('should set border color', async () => {
+    const wrapper = mountFunction({
+      name: 'color',
+      arg: 'border',
+    })
+
+    await wrapper.setData({ color: '#01f' })
+    expect(wrapper.element.style.borderColor).toEqual('#01f')
+
+    await wrapper.setData({ color: 'rgb(255, 255, 0)' })
+    expect(wrapper.element.style.borderColor).toEqual('rgb(255, 255, 0)')
+
+    await wrapper.setData({ color: 'red' })
+    expect(wrapper.element.style.borderColor).toEqual('#f44336')
+
+    await wrapper.setData({ color: 'red lighten-1' })
+    expect(wrapper.element.style.borderColor).toEqual('#ef5350')
+
+    await wrapper.setData({ color: 'primary' })
+    expect(wrapper.element.style.borderColor).toEqual('#1976d2')
+  })
+
+  it('should respect border sides modifiers', async () => {
+    const wrapper = mountFunction({
+      name: 'color',
+      arg: 'border',
+      modifiers: { top: true, right: true, left: true },
+    })
+
+    await wrapper.setData({ color: '#fff' })
+    expect(wrapper.element.style.borderTopColor).toEqual('#fff')
+    expect(wrapper.element.style.borderRightColor).toEqual('#fff')
+    expect(wrapper.element.style.borderLeftColor).toEqual('#fff')
+    expect(wrapper.element.style.borderBottomColor).toEqual('')
+    expect(wrapper.element.style.borderColor).toEqual('')
+  })
+})