@kokoccc/vuetify 1.0.1

package/src/mixins/mouse/index.ts

@@ -0,0 +1,124 @@
+import { defineComponent } from 'vue'
+import { upperFirst } from '../../util/helpers'
+
+export type MouseHandler = (e: MouseEvent | TouchEvent) => any
+
+export type MouseEvents = {
+  [event: string]: {
+    event: string
+    passive?: boolean
+    capture?: boolean
+    once?: boolean
+    stop?: boolean
+    prevent?: boolean
+    button?: number
+    result?: any
+    originalKey?: string
+  }
+}
+
+export type MouseEventsMap = {
+  [event: string]: MouseHandler | MouseHandler[]
+}
+
+function mapEventName (str: string): string {
+  return `on${upperFirst(str)}`
+}
+
+export default defineComponent({
+  name: 'mouse',
+
+  methods: {
+    getDefaultMouseEventHandlers (suffix: string, getData: MouseHandler, eventFirst = false): MouseEventsMap {
+      const listeners = Object.keys(this.$attrs)
+        .filter(key => key.endsWith(suffix))
+        .reduce((acc, key) => {
+          const eventName = suffix ? key.slice(0, -suffix.length) : key
+          const cleanEventName = eventName.startsWith('on') ? eventName.slice(2).toLowerCase() : eventName.toLowerCase()
+          acc[cleanEventName] = { event: cleanEventName, originalKey: key }
+          return acc
+        }, {} as MouseEvents)
+
+      return this.getMouseEventHandlers({
+        ...listeners,
+        ['contextmenu' + suffix]: { event: 'contextmenu', prevent: true, result: false },
+      }, getData, eventFirst)
+    },
+    getMouseEventHandlers (events: MouseEvents, getData: MouseHandler, eventFirst = false): MouseEventsMap {
+      const on: MouseEventsMap = {}
+
+      for (const event in events) {
+        const eventOptions = events[event]
+
+        const attrName = eventOptions.originalKey || (event.includes(':') ? event : mapEventName(event))
+        if (!this.$attrs[attrName]) continue
+
+        // TODO somehow pull in modifiers
+
+        const prefix = eventOptions.passive ? '&' : ((eventOptions.once ? '~' : '') + (eventOptions.capture ? '!' : ''))
+        const key = prefix + eventOptions.event
+
+        const handler: MouseHandler = e => {
+          const mouseEvent: MouseEvent = e as MouseEvent
+          if (eventOptions.button === undefined || (mouseEvent.buttons > 0 && mouseEvent.button === eventOptions.button)) {
+            if (eventOptions.prevent) {
+              e.preventDefault()
+            }
+            if (eventOptions.stop) {
+              e.stopPropagation()
+            }
+
+            // Due to TouchEvent target always returns the element that is first placed
+            // Even if touch point has since moved outside the interactive area of that element
+            // Ref: https://developer.mozilla.org/en-US/docs/Web/API/Touch/target
+            // This block of code aims to make sure touchEvent is always dispatched from the element that is being pointed at
+            if (e && 'touches' in e) {
+              const classSeparator = ' '
+
+              const eventTargetClasses = (e.currentTarget as HTMLElement)?.className.split(classSeparator)
+              const currentTargets = document.elementsFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY)
+
+              // Get "the same kind" current hovering target by checking
+              // If element has the same class of initial touch start element (which has touch event listener registered)
+              const currentTarget = currentTargets.find(t => t.className.split(classSeparator).some(c => eventTargetClasses.includes(c)))
+
+              if (currentTarget &&
+                !(e.target as HTMLElement)?.isSameNode(currentTarget)
+              ) {
+                currentTarget.dispatchEvent(new TouchEvent(e.type, {
+                  changedTouches: e.changedTouches as unknown as Touch[],
+                  targetTouches: e.targetTouches as unknown as Touch[],
+                  touches: e.touches as unknown as Touch[],
+                }))
+                return
+              }
+            }
+
+            // TODO: VCalendar emits the calendar event as the first argument,
+            // but it really should be the native event instead so modifiers can be used
+            if (eventFirst) {
+              this.$emit(event, e, getData(e))
+            } else {
+              this.$emit(event, getData(e), e)
+            }
+          }
+
+          return eventOptions.result
+        }
+
+        if (key in on) {
+          /* istanbul ignore next */
+          if (Array.isArray(on[key])) {
+            (on[key] as MouseHandler[]).push(handler)
+          } else {
+            on[key] = [on[key], handler] as MouseHandler[]
+          }
+        } else {
+          on[key] = handler
+        }
+      }
+
+      return on
+    },
+  },
+})

package/src/mixins/overlayable/__tests__/overlayable.spec.ts

@@ -0,0 +1,119 @@
+// Components
+import Overlayable from '../index'
+
+// Utilities
+import { mount, MountingOptions, VueWrapper, enableAutoUnmount } from '@vue/test-utils'
+import { waitAnimationFrame } from '../../../../test'
+import { defineComponent, h, nextTick } from 'vue'
+
+describe('Overlayable.ts', () => {
+  enableAutoUnmount(afterEach)
+
+  const Mock = defineComponent({
+    mixins: [Overlayable],
+    data: () => ({
+      isActive: false,
+    }),
+    render: () => h('div'),
+  })
+
+  beforeEach(() => {
+    document.body.setAttribute('data-app', 'true')
+  })
+
+  type Instance = InstanceType<typeof Mock>;
+  let mountFunction: (options?: MountingOptions<any>) => VueWrapper<any>
+
+  beforeEach(() => {
+    mountFunction = (options = {}) => {
+      return mount(Mock, {
+        global: {
+          mocks: {
+            $vuetify: { breakpoint: {} },
+          },
+        },
+        ...options,
+      })
+    }
+  })
+
+  it('should avoid removing overlay', async () => {
+    const wrapper = mountFunction()
+
+    wrapper.vm.genOverlay()
+
+    await waitAnimationFrame()
+
+    expect(wrapper.vm.overlay).toBeTruthy()
+
+    wrapper.vm.removeOverlay()
+    // Simulate overlay being rapidly opened/closed
+    wrapper.vm.overlay.value = true
+
+    const event = new Event('transitionend')
+
+    wrapper.vm.overlay.$el.dispatchEvent(event)
+    expect(wrapper.vm.overlay).toBeTruthy()
+
+    wrapper.vm.removeOverlay()
+
+    wrapper.vm.overlay.$el.dispatchEvent(event)
+    expect(wrapper.vm.overlay).toBeFalsy()
+  })
+
+  it('should be removed', async () => {
+    const wrapper = mountFunction()
+
+    wrapper.vm.genOverlay()
+    wrapper.vm.removeOverlay()
+
+    await waitAnimationFrame()
+    expect(wrapper.vm.overlay.value).toBeFalsy()
+
+    const event = new Event('transitionend')
+    wrapper.vm.overlay.$el.dispatchEvent(event)
+    expect(wrapper.vm.overlay).toBeFalsy()
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/8473
+  it('should get root element z-index if activeIndex is not available', async () => {
+    const wrapper = mountFunction()
+
+    wrapper.vm.$el.style.zIndex = '8'
+
+    wrapper.vm.genOverlay()
+
+    await waitAnimationFrame()
+
+    expect(wrapper.vm.overlay.zIndex).toBe(8)
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/8142
+  it('should not update overlay state if not active', async () => {
+    const cb = jest.fn()
+    const wrapper = mountFunction({
+      global: {
+        mocks: {
+          $vuetify: { breakpoint: {} },
+        },
+      },
+    })
+
+    // Mock the methods
+    wrapper.vm.removeOverlay = cb
+    wrapper.vm.genOverlay = cb
+
+    await wrapper.setProps({ hideOverlay: true })
+    await wrapper.setProps({ hideOverlay: false })
+
+    expect(cb).not.toHaveBeenCalled()
+
+    wrapper.vm.isActive = true
+    await nextTick()
+
+    await wrapper.setProps({ hideOverlay: true })
+    await wrapper.setProps({ hideOverlay: false })
+
+    expect(cb).toHaveBeenCalledTimes(2)
+  })
+})

package/src/mixins/overlayable/index.ts

@@ -0,0 +1,264 @@
+// Components
+import VOverlay from '../../components/VOverlay'
+
+// Utilities
+import {
+  keyCodes,
+  addOnceEventListener,
+  addPassiveEventListener,
+  getZIndex,
+  composedPath,
+} from '../../util/helpers'
+
+// Types
+import { defineComponent, App, createApp, h } from 'vue'
+
+interface Toggleable extends App {
+  isActive?: boolean
+}
+
+interface Stackable extends App {
+  activeZIndex: number
+}
+
+interface options {
+  absolute?: boolean
+  $refs: {
+    dialog?: HTMLElement
+    content?: HTMLElement
+  }
+}
+
+/* @vue/component */
+export default defineComponent({
+  name: 'overlayable',
+
+  props: {
+    hideOverlay: Boolean,
+    overlayColor: String,
+    overlayOpacity: [Number, String],
+  },
+
+  data () {
+    return {
+      animationFrame: 0,
+      overlay: null as InstanceType<typeof VOverlay> | null,
+    }
+  },
+
+  watch: {
+    hideOverlay (value) {
+      if (!this.isActive) return
+
+      if (value) this.removeOverlay()
+      else this.genOverlay()
+    },
+  },
+
+  beforeUnmount () {
+    this.removeOverlay()
+  },
+
+  methods: {
+    createOverlay () {
+      // Create a container element
+      const container = document.createElement('div');
+
+      const props = {
+        absolute: this.absolute,
+        color: this.overlayColor,
+        opacity: this.overlayOpacity
+      }
+      const wrapper = {
+        data() {
+          return { value: false, zIndex: undefined }
+        },
+        render() {
+          return h(VOverlay, {
+            modelValue: this.value,
+            zIndex: this.zIndex,
+            ...props
+          })
+        }
+      }
+      // // Create the overlay app
+      // const overlayApp = createApp(VOverlay, {
+      //   absolute: this.absolute,
+      //   value: false,
+      //   color: this.overlayColor,
+      //   opacity: this.overlayOpacity,
+      // });
+
+      const overlayApp = createApp(wrapper)
+
+      // Mount the app to the container
+      const overlayInstance = overlayApp.mount(container);
+
+      // Determine the parent element
+      const parent = this.absolute
+        ? this.$el.parentNode
+        : document.querySelector('[data-app]');
+
+      if (parent) {
+        parent.insertBefore(container, parent.firstChild);
+      }
+
+      this.overlay = overlayInstance;
+      this.overlayApp = overlayApp
+    },
+    genOverlay () {
+      this.hideScroll()
+
+      if (this.hideOverlay) return
+
+      if (!this.overlay) this.createOverlay()
+
+      this.animationFrame = requestAnimationFrame(() => {
+        if (!this.overlay) return
+
+        if (this.activeZIndex !== undefined) {
+          this.overlay.zIndex = String(this.activeZIndex - 1)
+        } else if (this.$el) {
+          this.overlay.zIndex = getZIndex(this.$el)
+        }
+
+        this.overlay.value = true
+      })
+
+      return true
+    },
+    /** removeOverlay(false) will not restore the scollbar afterwards */
+    removeOverlay (showScroll = true) {
+      if (this.overlay) {
+        addOnceEventListener(this.overlay.$el, 'transitionend', () => {
+          if (
+            !this.overlay ||
+            !this.overlay.$el ||
+            !this.overlay.$el.parentNode ||
+            this.overlay.value ||
+            this.isActive
+          ) return
+
+          this.overlay.$el.parentNode.removeChild(this.overlay.$el)
+          this.overlayApp.unmount()
+          this.overlayApp = null
+          this.overlay = null
+        })
+
+        // Cancel animation frame in case
+        // overlay is removed before it
+        // has finished its animation
+        cancelAnimationFrame(this.animationFrame)
+
+        this.overlay.value = false
+      }
+
+      showScroll && this.showScroll()
+    },
+    scrollListener (e: WheelEvent | KeyboardEvent) {
+      if ('key' in e) {
+        if (
+          ['INPUT', 'TEXTAREA', 'SELECT'].includes((e.target as Element).tagName) ||
+          // https://github.com/vuetifyjs/vuetify/issues/4715
+          (e.target as HTMLElement).isContentEditable
+        ) return
+
+        const up = [keyCodes.up, keyCodes.pageup]
+        const down = [keyCodes.down, keyCodes.pagedown]
+
+        if (up.includes(e.keyCode)) {
+          (e as any).deltaY = -1
+        } else if (down.includes(e.keyCode)) {
+          (e as any).deltaY = 1
+        } else {
+          return
+        }
+      }
+
+      if (e.target === this.overlay ||
+        (e.type !== 'keydown' && e.target === document.body) ||
+        this.checkPath(e as WheelEvent)) e.preventDefault()
+    },
+    hasScrollbar (el?: Element) {
+      if (!el || el.nodeType !== Node.ELEMENT_NODE) return false
+
+      const style = window.getComputedStyle(el)
+      return ((['auto', 'scroll'].includes(style.overflowY!) || el.tagName === 'SELECT') && el.scrollHeight > el.clientHeight) ||
+      ((['auto', 'scroll'].includes(style.overflowX!)) && el.scrollWidth > el.clientWidth)
+    },
+    shouldScroll (el: Element, e: WheelEvent): boolean {
+      if (el.hasAttribute('data-app')) return false
+
+      const dir = e.shiftKey || e.deltaX ? 'x' : 'y'
+      const delta = dir === 'y' ? e.deltaY : e.deltaX || e.deltaY
+
+      let alreadyAtStart: boolean
+      let alreadyAtEnd: boolean
+      if (dir === 'y') {
+        alreadyAtStart = el.scrollTop === 0
+        alreadyAtEnd = el.scrollTop + el.clientHeight === el.scrollHeight
+      } else {
+        alreadyAtStart = el.scrollLeft === 0
+        alreadyAtEnd = el.scrollLeft + el.clientWidth === el.scrollWidth
+      }
+
+      const scrollingUp = delta < 0
+      const scrollingDown = delta > 0
+
+      if (!alreadyAtStart && scrollingUp) return true
+      if (!alreadyAtEnd && scrollingDown) return true
+      if ((alreadyAtStart || alreadyAtEnd) && el.parentNode) {
+        return this.shouldScroll(el.parentNode as Element, e)
+      }
+
+      return false
+    },
+    isInside (el: Element, parent: Element): boolean {
+      if (el === parent) {
+        return true
+      } else if (el === null || el === document.body) {
+        return false
+      } else {
+        return this.isInside(el.parentNode as Element, parent)
+      }
+    },
+    checkPath (e: WheelEvent) {
+      const path = composedPath(e)
+
+      if (e.type === 'keydown' && path[0] === document.body) {
+        const dialog = this.$refs.dialog
+        // getSelection returns null in firefox in some edge cases, can be ignored
+        const selected = window.getSelection()!.anchorNode as Element
+        if (dialog && this.hasScrollbar(dialog) && this.isInside(selected, dialog)) {
+          return !this.shouldScroll(dialog, e)
+        }
+        return true
+      }
+
+      for (let index = 0; index < path.length; index++) {
+        const el = path[index]
+
+        if (el === document) return true
+        if (el === document.documentElement) return true
+        if (el === this.$refs.content) return true
+
+        if (this.hasScrollbar(el as Element)) return !this.shouldScroll(el as Element, e)
+      }
+
+      return true
+    },
+    hideScroll () {
+      if (this.$vuetify.breakpoint.smAndDown) {
+        document.documentElement!.classList.add('overflow-y-hidden')
+      } else {
+        addPassiveEventListener(window, 'wheel', this.scrollListener, { passive: false })
+        window.addEventListener('keydown', this.scrollListener)
+      }
+    },
+    showScroll () {
+      document.documentElement!.classList.remove('overflow-y-hidden')
+      window.removeEventListener('wheel', this.scrollListener)
+      window.removeEventListener('keydown', this.scrollListener)
+    },
+  },
+})

package/src/mixins/picker/index.ts

@@ -0,0 +1,76 @@
+// Components
+import VPicker from '../../components/VPicker'
+
+// Mixins
+import Colorable from '../colorable'
+import Elevatable from '../../mixins/elevatable'
+import Themeable from '../themeable'
+
+// Utils
+import mixins from '../../util/mixins'
+import { getSlot } from '../../util/helpers'
+
+// Types
+import { VNode, h } from 'vue'
+
+export default mixins(
+  Colorable,
+  Elevatable,
+  Themeable
+/* @vue/component */
+).extend({
+  name: 'picker',
+
+  props: {
+    flat: Boolean,
+    fullWidth: Boolean,
+    headerColor: String,
+    landscape: Boolean,
+    noTitle: Boolean,
+    width: {
+      type: [Number, String],
+      default: 290,
+    },
+  },
+
+  methods: {
+    genPickerTitle (): VNode | null {
+      return null
+    },
+    genPickerBody (): VNode | null {
+      return null
+    },
+    genPickerActionsSlot () {
+      return this.$slots.default ? this.$slots.default({
+        save: (this as any).save,
+        cancel: (this as any).cancel,
+      }) : getSlot(this)
+    },
+    genPicker (staticClass: string) {
+      const children: Record<string, any> = {}
+
+      if (!this.noTitle) {
+        const title = this.genPickerTitle()
+        title && (children.title = () => [title])
+      }
+
+      const body = this.genPickerBody()
+      body && (children.default = () => [body])
+
+      children.actions = () => [this.genPickerActionsSlot()]
+
+      return h(VPicker, {
+        class: staticClass,
+        color: this.headerColor || this.color,
+        dark: this.dark,
+        elevation: this.elevation,
+        flat: this.flat,
+        fullWidth: this.fullWidth,
+        landscape: this.landscape,
+        light: this.light,
+        width: this.width,
+        noTitle: this.noTitle
+      }, children)
+    },
+  },
+})

package/src/mixins/picker-button/index.ts

@@ -0,0 +1,38 @@
+// Mixins
+import Colorable from '../colorable'
+
+// Utilities
+import mixins from '../../util/mixins'
+import { kebabCase } from '../../util/helpers'
+
+// Types
+import { VNodeChildren, h } from 'vue'
+
+/* @vue/component */
+export default mixins(
+  Colorable
+).extend({
+  methods: {
+    genPickerButton (
+      prop: string,
+      value: any,
+      content: VNodeChildren,
+      readonly = false,
+      staticClass = ''
+    ) {
+      const active = (this as any)[prop] === value
+      const onClick = (event: Event) => {
+        event.stopPropagation()
+        this.$emit(`update:${kebabCase(prop)}`, value)
+      }
+
+      return h('div', {
+        class: [`v-picker__title__btn ${staticClass}`.trim(), {
+          'v-picker__title__btn--active': active,
+          'v-picker__title__btn--readonly': readonly,
+        }],
+        ...((active || readonly) ? {} : { onClick }),
+      }, Array.isArray(content) ? content : [content])
+    },
+  },
+})

package/src/mixins/positionable/index.ts

@@ -0,0 +1,54 @@
+import {defineComponent} from 'vue'
+import { filterObjectOnKeys } from '../../util/helpers'
+import { OptionsVue, Component } from 'vue/types/vue'
+
+const availableProps = {
+  absolute: Boolean,
+  bottom: Boolean,
+  fixed: Boolean,
+  left: Boolean,
+  right: Boolean,
+  top: Boolean,
+}
+type props = Record<keyof typeof availableProps, boolean>
+
+export type Positionable<S extends keyof props> = Component<Vue & { [P in S]: boolean }, { [P in S]: BooleanConstructor }>
+
+export function factory <S extends keyof props> (selected?: S[]): Positionable<S>
+export function factory (selected: undefined): OptionsVue<Vue, {}, {}, {}, props, typeof availableProps>
+export function factory (selected: any[] = []): any {
+  return defineComponent({
+    name: 'positionable',
+    props: selected.length ? filterObjectOnKeys(availableProps, selected) : availableProps,
+  })
+}
+
+export default factory()
+
+// Add a `*` before the second `/`
+/* Tests /
+let single = factory(['top']).extend({
+  created () {
+    this.top
+    this.bottom
+    this.absolute
+  }
+})
+
+let some = factory(['top', 'bottom']).extend({
+  created () {
+    this.top
+    this.bottom
+    this.absolute
+  }
+})
+
+let all = factory().extend({
+  created () {
+    this.top
+    this.bottom
+    this.absolute
+    this.foobar
+  }
+})
+/**/