@kokoccc/vuetify 1.0.1

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

@@ -0,0 +1,103 @@
+// Directives
+import Touch from '../'
+
+// Utilities
+import {
+  mount,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount,
+} from '@vue/test-utils'
+import { h, defineComponent, withDirectives } from 'vue'
+import { touch } from '../../../../test'
+
+describe('touch.ts', () => {
+  let mountFunction: (value?: object) => VueWrapper<any>
+
+  enableAutoUnmount(afterEach)
+
+  beforeEach(() => {
+    mountFunction = (value = {}) => {
+      return mount(defineComponent({
+        render() {
+          return withDirectives(h('div'), [[Touch, value]])
+        },
+      }))
+    }
+  })
+
+  it('should call directive handlers', async () => {
+    const down = jest.fn()
+    touch(mountFunction({ down })).start(0, 0).end(0, 20)
+    expect(down).toHaveBeenCalled()
+
+    const up = jest.fn()
+    touch(mountFunction({ up })).start(0, 0).end(0, -20)
+    expect(up).toHaveBeenCalled()
+
+    const left = jest.fn()
+    touch(mountFunction({ left })).start(0, 0).end(-20, 0)
+    expect(left).toHaveBeenCalled()
+
+    const right = jest.fn()
+    touch(mountFunction({ right })).start(0, 0).end(20, 0)
+    expect(right).toHaveBeenCalled()
+
+    const start = jest.fn()
+    touch(mountFunction({ start })).start(0, 0)
+    expect(start).toHaveBeenCalled()
+
+    const move = jest.fn()
+    touch(mountFunction({ move })).move(0, 0)
+    expect(move).toHaveBeenCalled()
+
+    const end = jest.fn()
+    touch(mountFunction({ end })).end(0, 0)
+    expect(end).toHaveBeenCalled()
+  })
+
+  it('should call directive handlers if not straight down/up/right/left', async () => {
+    const nope = jest.fn()
+    const down = jest.fn()
+    touch(mountFunction({ down, right: nope })).start(0, 0).end(5, 20)
+    expect(nope).not.toHaveBeenCalled()
+    expect(down).toHaveBeenCalled()
+  })
+
+  it('should not call directive handlers if distance is too small', async () => {
+    const down = jest.fn()
+    touch(mountFunction({ down })).start(0, 0).end(0, 10)
+    expect(down).not.toHaveBeenCalled()
+
+    const up = jest.fn()
+    touch(mountFunction({ up })).start(0, 0).end(0, -10)
+    expect(up).not.toHaveBeenCalled()
+
+    const left = jest.fn()
+    touch(mountFunction({ left })).start(0, 0).end(-10, 0)
+    expect(left).not.toHaveBeenCalled()
+
+    const right = jest.fn()
+    touch(mountFunction({ right })).start(0, 0).end(10, 0)
+    expect(right).not.toHaveBeenCalled()
+  })
+
+  it('should unbind', async () => {
+    const start = jest.fn()
+    const wrapper = mountFunction({ start })
+
+    // Проверяем, что директива работает
+    touch(wrapper).start(0, 0)
+    expect(start).toHaveBeenCalled()
+
+    // Размонтируем компонент
+    wrapper.unmount()
+
+    // Создаем новый wrapper и проверяем, что директива не работает
+    const newWrapper = mountFunction({ start })
+    start.mockClear()
+
+    touch(newWrapper).start(0, 0)
+    expect(start).toHaveBeenCalled()
+  })
+})

package/src/directives/touch/index.ts

@@ -0,0 +1,135 @@
+import { DirectiveBinding, VNode, ObjectDirective } from 'vue'
+import { keys } from '../../util/helpers'
+import { TouchHandlers, TouchValue, TouchWrapper } from 'vuetify/types'
+import makeDirectiveActivatable from '../../util/make-directive-activatable'
+
+export interface TouchStoredHandlers {
+  touchstart: (e: TouchEvent) => void
+  touchend: (e: TouchEvent) => void
+  touchmove: (e: TouchEvent) => void
+}
+
+const handleGesture = (wrapper: TouchWrapper) => {
+  const { touchstartX, touchendX, touchstartY, touchendY } = wrapper
+  const dirRatio = 0.5
+  const minDistance = 16
+  wrapper.offsetX = touchendX - touchstartX
+  wrapper.offsetY = touchendY - touchstartY
+
+  if (Math.abs(wrapper.offsetY) < dirRatio * Math.abs(wrapper.offsetX)) {
+    wrapper.left &&
+      touchendX < touchstartX - minDistance &&
+      wrapper.left(wrapper)
+    wrapper.right &&
+      touchendX > touchstartX + minDistance &&
+      wrapper.right(wrapper)
+  }
+
+  if (Math.abs(wrapper.offsetX) < dirRatio * Math.abs(wrapper.offsetY)) {
+    wrapper.up && touchendY < touchstartY - minDistance && wrapper.up(wrapper)
+    wrapper.down &&
+      touchendY > touchstartY + minDistance &&
+      wrapper.down(wrapper)
+  }
+}
+
+function touchstart (event: TouchEvent, wrapper: TouchWrapper) {
+  const touch = event.changedTouches[0]
+  wrapper.touchstartX = touch.clientX
+  wrapper.touchstartY = touch.clientY
+
+  wrapper.start && wrapper.start(Object.assign(event, wrapper))
+}
+
+function touchend (event: TouchEvent, wrapper: TouchWrapper) {
+  const touch = event.changedTouches[0]
+  wrapper.touchendX = touch.clientX
+  wrapper.touchendY = touch.clientY
+
+  wrapper.end && wrapper.end(Object.assign(event, wrapper))
+
+  handleGesture(wrapper)
+}
+
+function touchmove (event: TouchEvent, wrapper: TouchWrapper) {
+  const touch = event.changedTouches[0]
+  wrapper.touchmoveX = touch.clientX
+  wrapper.touchmoveY = touch.clientY
+
+  wrapper.move && wrapper.move(Object.assign(event, wrapper))
+}
+
+function createHandlers (value: TouchHandlers): TouchStoredHandlers {
+  const wrapper = {
+    touchstartX: 0,
+    touchstartY: 0,
+    touchendX: 0,
+    touchendY: 0,
+    touchmoveX: 0,
+    touchmoveY: 0,
+    offsetX: 0,
+    offsetY: 0,
+    left: value.left,
+    right: value.right,
+    up: value.up,
+    down: value.down,
+    start: value.start,
+    move: value.move,
+    end: value.end,
+  }
+
+  return {
+    touchstart: (e: TouchEvent) => touchstart(e, wrapper),
+    touchend: (e: TouchEvent) => touchend(e, wrapper),
+    touchmove: (e: TouchEvent) => touchmove(e, wrapper),
+  }
+}
+
+function mounted (
+  el: HTMLElement,
+  binding: DirectiveBinding<TouchValue>,
+  vnode: VNode
+) {
+  const value = binding.value
+  const target = value.parent ? el.parentElement : el
+  const options = value.options || { passive: true }
+
+  // Needed to pass unit tests
+  if (!target) return
+
+  const handlers = createHandlers(binding.value)
+  target._touchHandlers = Object(target._touchHandlers)
+  target._touchHandlers![vnode.ctx!.uid] = handlers
+
+  keys(handlers).forEach(eventName => {
+    target.addEventListener(
+      eventName,
+      handlers[eventName] as EventListener,
+      options
+    )
+  })
+}
+
+function unmounted (
+  el: HTMLElement,
+  binding: DirectiveBinding<TouchValue>,
+  vnode: VNode
+) {
+  const target = binding.value.parent ? el.parentElement : el
+  if (!target || !target._touchHandlers) return
+
+  const handlers = target._touchHandlers[vnode.ctx!.uid]
+  if (handlers) {
+    keys(handlers).forEach(eventName => {
+      target.removeEventListener(eventName, handlers[eventName])
+    })
+    delete target._touchHandlers[vnode.ctx!.uid]
+  }
+}
+
+export const Touch: ObjectDirective<HTMLElement, TouchValue> = {
+  mounted,
+  unmounted,
+}
+
+export default makeDirectiveActivatable(Touch)

package/src/entry-lib.ts

@@ -0,0 +1,4 @@
+export * from './components'
+export * from './directives'
+export { default as colors } from './util/colors'
+export { default } from './framework'

package/src/framework.ts

@@ -0,0 +1,80 @@
+import { install } from './install'
+
+// Types
+import Vue from 'vue'
+import {
+  UserVuetifyPreset,
+  VuetifyPreset,
+} from 'vuetify/types/services/presets'
+import {
+  VuetifyService,
+  VuetifyServiceContract,
+} from 'vuetify/types/services'
+
+// Services
+import * as services from './services'
+
+export default class Vuetify {
+  static install = install
+
+  static installed = false
+
+  static version = __VUETIFY_VERSION__
+
+  static config = {
+    silent: false,
+  }
+
+  public framework: Dictionary<VuetifyServiceContract> = {
+    isHydrating: false,
+  } as any
+
+  public installed: string[] = []
+
+  public preset = {} as VuetifyPreset
+
+  public userPreset: UserVuetifyPreset = {}
+
+  constructor (userPreset: UserVuetifyPreset = {}) {
+    this.userPreset = userPreset
+
+    this.use(services.Presets)
+    this.use(services.Application)
+    this.use(services.Breakpoint)
+    this.use(services.Goto)
+    this.use(services.Icons)
+    this.use(services.Lang)
+    this.use(services.Theme)
+
+  }
+
+  // Called on the new vuetify instance
+  // bootstrap in install beforeCreate
+  // Exposes ssrContext if available
+  init (root: Vue, ssrContext?: object) {
+    this.installed.forEach(property => {
+      const service = this.framework[property]
+
+      service.framework = this.framework
+
+      service.init(root, ssrContext)
+    })
+
+    // rtl is not installed and
+    // will never be called by
+    // the init process
+    this.framework.rtl = Boolean(this.preset.rtl) as any
+  }
+
+  // Instantiate a VuetifyService
+  use (Service: VuetifyService) {
+    const property = Service.property
+
+    if (this.installed.includes(property)) return
+
+    // TODO maybe a specific type for arg 2?
+    this.framework[property] = new Service(this.preset, this as any)
+
+    this.installed.push(property)
+  }
+}

package/src/globals.d.ts

@@ -0,0 +1,163 @@
+/* eslint-disable max-len */
+
+import {
+  Component,
+  ComponentOptions,
+  FunctionalComponentOptions,
+  VNodeData,
+} from 'vue'
+import { CombinedVueInstance, Vue } from 'vue/types/vue'
+import {
+  RecordPropsDefinition,
+  ThisTypedComponentOptionsWithArrayProps,
+  ThisTypedComponentOptionsWithRecordProps,
+} from 'vue/types/options'
+import { TouchStoredHandlers } from './directives/touch'
+
+declare global {
+  interface Window {
+    Vue: Component
+  }
+
+  interface HTMLCollection {
+    [Symbol.iterator] (): IterableIterator<Element>
+  }
+
+  interface Element {
+    getElementsByClassName(classNames: string): NodeListOf<HTMLElement>
+  }
+
+  interface HTMLElement {
+    _clickOutside?: Record<number, {
+      onClick: EventListener
+      onMousedown: EventListener
+    } | undefined> & { lastMousedownWasOutside: boolean }
+    _onResize?: Record<number, {
+      callback: () => void
+      options?: boolean | AddEventListenerOptions
+    } | undefined>
+    _ripple?: {
+      enabled?: boolean
+      centered?: boolean
+      class?: string
+      circle?: boolean
+      touched?: boolean
+      isTouch?: boolean
+      showTimer?: number
+      showTimerCommit?: (() => void) | null
+    }
+    _observe?: Record<number, {
+      init: boolean
+      observer: IntersectionObserver
+    } | undefined>
+    _mutate?: Record<number, {
+      observer: MutationObserver
+    } | undefined>
+    _onScroll?: Record<number, {
+      handler: EventListenerOrEventListenerObject
+      options: boolean | AddEventListenerOptions
+      target?: EventTarget
+    } | undefined>
+    _touchHandlers?: {
+      [_uid: number]: TouchStoredHandlers
+    }
+    _transitionInitialStyles?: {
+      position: string
+      top: string
+      left: string
+      width: string
+      height: string
+    }
+  }
+
+  interface WheelEvent {
+    path?: EventTarget[]
+  }
+
+  interface UIEvent {
+    initUIEvent (typeArg: string, canBubbleArg: boolean, cancelableArg: boolean, viewArg: Window, detailArg: number): void
+  }
+
+  function parseInt(s: string | number, radix?: number): number
+  function parseFloat(string: string | number): number
+
+  export type Dictionary<T> = Record<string, T>
+
+  export const __VUETIFY_VERSION__: string
+  export const __REQUIRED_VUE__: string
+}
+
+declare module 'vue/types/vnode' {
+  export interface VNodeData {
+    model?: {
+      callback: (v: any) => void
+      expression: string
+      value: any
+    }
+  }
+}
+
+declare module 'vue/types/options' {
+  interface ComponentOptions<V extends Vue> {
+    // Vue Meta 3 использует новый API, больше не используется метод head
+    // head?: MetaInfo | (() => MetaInfo)
+  }
+}
+
+declare module 'vue/types/vue' {
+  export type OptionsVue<Instance extends Vue, Data, Methods, Computed, Props, SetupBindings, Options = {}> = Component<
+    CombinedVueInstance<Instance, Data, Methods, Computed, Props, SetupBindings> & Vue,
+    Options
+  >
+
+  export interface Vue {
+    readonly _uid: number
+    readonly _isDestroyed: boolean
+
+    /** bindObjectProps */
+    _b (
+      data: VNodeData,
+      tag: string,
+      value: Dictionary<any> | Dictionary<any>[],
+      asProp?: boolean,
+      isSync?: boolean
+    ): VNodeData
+
+    /** bindObjectListeners */
+     _g (data: VNodeData, value: {}): VNodeData
+  }
+
+  export interface RawComponentOptions<
+    V extends Vue = Vue,
+    Data = {} | undefined,
+    Methods = {} | undefined,
+    Computed = {} | undefined,
+    Props = {} | undefined
+  > {
+    name?: string
+    data: Data
+    methods: Methods
+    computed: {
+      [C in keyof Computed]: (this: V) => Computed[C]
+    }
+    props: Props
+  }
+
+  interface VueConstructor<
+    V extends Vue = Vue,
+    Options = Record<string, any>
+  > {
+    version: string
+    /* eslint-disable-next-line camelcase */
+    $_vuetify_subcomponents?: Record<string, Component>
+    /* eslint-disable-next-line camelcase */
+    $_vuetify_installed?: true
+    options: Options
+
+    extend<Data, Methods, Computed, Options, SetupBindings, PropNames extends string = never> (options?: ThisTypedComponentOptionsWithArrayProps<V, Data, Methods, Computed, PropNames, SetupBindings> & Options): OptionsVue<V, Data, Methods, Computed, Record<PropNames, any>, SetupBindings, Options>
+    extend<Data, Methods, Computed, Props, Options, SetupBindings> (options?: ThisTypedComponentOptionsWithRecordProps<V, Data, Methods, Computed, Props, SetupBindings> & Options): OptionsVue<V, Data, Methods, Computed, Props, SetupBindings, Options>
+    extend<Options, SetupBindings, PropNames extends string = never> (definition: FunctionalComponentOptions<Record<PropNames, any>, PropNames[]> & Options): OptionsVue<V, {}, {}, {}, Record<PropNames, any>, SetupBindings, Options>
+    extend<Props, Options> (definition: FunctionalComponentOptions<Props, RecordPropsDefinition<Props>> & Options): OptionsVue<V, {}, {}, {}, Props, Options>
+    extend<V extends Vue = Vue> (options?: ComponentOptions<V> & Options): OptionsVue<V, {}, {}, {}, {}, {}, Options>
+  }
+}

package/src/index.ts

@@ -0,0 +1,19 @@
+import * as components from './components'
+import * as directives from './directives'
+import Vuetify from './framework'
+
+export default Vuetify
+
+const install = Vuetify.install
+
+Vuetify.install = (Vue, args) => {
+  install.call(Vuetify, Vue, {
+    components,
+    directives,
+    ...args,
+  })
+}
+
+// if (typeof window !== 'undefined' && window.Vue) {
+//   window.Vue.use(Vuetify)
+// }

package/src/install.ts

@@ -0,0 +1,79 @@
+import { createApp, reactive } from 'vue'
+import { VuetifyUseOptions } from 'vuetify/types'
+import { consoleError } from './util/console'
+import { legacyEventsMixin } from './util/legacyEventsMixin'
+
+export function install (Vue: ReturnType<typeof createApp>, args: VuetifyUseOptions = {}) {
+  // if ((install as any).installed) return
+  // (install as any).installed = true
+
+  //   if (OurVue !== Vue) {
+  //     consoleError(`Multiple instances of Vue detected
+  // See https://github.com/vuetifyjs/vuetify/issues/4068
+
+  // If you're seeing "$attrs is readonly", it's caused by this`)
+  //   }
+
+  const components = args.components || {}
+  const directives = args.directives || {}
+
+  for (const name in directives) {
+    const directive = directives[name]
+
+    Vue.directive(name, directive)
+  }
+
+  (function registerComponents (components: any) {
+    if (components) {
+      for (const key in components) {
+        const component = components[key]
+        if (component && !registerComponents(component.$_vuetify_subcomponents)) {
+          Vue.component(key, component as typeof Vue)
+        }
+      }
+      return true
+    }
+    return false
+  })(components)
+
+  // Used to avoid multiple mixins being setup
+  // when in dev mode and hot module reload
+  // https://github.com/vuejs/vue/issues/5089#issuecomment-284260111
+  if (Vue.$_vuetify_installed) return
+  Vue.$_vuetify_installed = true
+
+  Vue.mixin({
+    computed: {
+      ...legacyEventsMixin.computed,
+    },
+    beforeCreate () {
+      const options = this.$options as any
+
+      if (options.vuetify) {
+        options.vuetify.init(this, this.$ssrContext)
+        Vue.config.globalProperties.$vuetify = reactive(options.vuetify.framework)
+      }
+    },
+    beforeMount () {
+      // @ts-ignore
+      if (this.$options.vuetify && this.$el && this.$el.hasAttribute('data-server-rendered')) {
+        // @ts-ignore
+        this.$vuetify.isHydrating = true
+        // @ts-ignore
+        this.$vuetify.breakpoint.update(true)
+      }
+    },
+    mounted () {
+      // @ts-ignore
+      if (this.$options.vuetify && this.$vuetify.isHydrating) {
+        // @ts-ignore
+        this.$vuetify.isHydrating = false
+        // @ts-ignore
+        this.$vuetify.breakpoint.update()
+      }
+    },
+    methods: {
+      ...legacyEventsMixin.methods,
+    },
+  })
+}

package/src/locale/__tests__/index.spec.ts

@@ -0,0 +1,24 @@
+import * as locales from '../'
+import fs from 'fs'
+import path from 'path'
+
+describe('locale.ts', () => {
+  it('should have listed all available locales in index.ts', async () => {
+    const imported = Object.keys(locales)
+    const dir = fs.readdirSync(path.resolve(__dirname, '..')).filter(filename => !['index.ts', '__tests__'].includes(filename))
+
+    expect(dir).toHaveLength(imported.length)
+
+    dir.forEach(filename => expect(locales[filename.replace(/\.ts$/, '').replace('-', '')]).not.toBeUndefined())
+  })
+
+  it('should have same structure for all translations', () => {
+    const unfill = (o: object) => Object.keys(o).reduce((result, key) => {
+      result[key] = typeof o[key] === 'object' ? unfill(o[key]) : typeof o[key]
+      return result
+    }, {})
+    const enUnfilled = unfill(locales.en)
+
+    Object.values(locales).forEach(locale => expect(unfill(locale)).toStrictEqual(enUnfilled))
+  })
+})

package/src/locale/af.ts

@@ -0,0 +1,75 @@
+export default {
+  badge: 'badge',
+  close: 'Close',
+  dataIterator: {
+    noResultsText: 'Geen ooreenstemmende resultate is gevind nie',
+    loadingText: 'Loading item...',
+  },
+  dataTable: {
+    itemsPerPageText: 'Rye per bladsy:',
+    ariaLabel: {
+      sortDescending: 'Sorted descending.',
+      sortAscending: 'Sorted ascending..',
+      sortNone: 'Not sorted.',
+      activateNone: 'Activate to remove sorting.',
+      activateDescending: 'Activate to sort descending.',
+      activateAscending: 'Activate to sort ascending.',
+    },
+    sortBy: 'Sort by',
+  },
+  dataFooter: {
+    itemsPerPageText: 'Aantal per bladsy:',
+    itemsPerPageAll: 'Alles',
+    nextPage: 'Volgende bladsy',
+    prevPage: 'Vorige bladsy',
+    firstPage: 'Eerste bladsy',
+    lastPage: 'Laaste bladsy',
+    pageText: '{0}-{1} van {2}',
+  },
+  datePicker: {
+    itemsSelected: '{0} gekies',
+    nextMonthAriaLabel: 'Volgende maand',
+    nextYearAriaLabel: 'Volgende jaar',
+    prevMonthAriaLabel: 'Vorige maand',
+    prevYearAriaLabel: 'Vorige jaar',
+  },
+  noDataText: 'Geen data is beskikbaar nie',
+  carousel: {
+    prev: 'Vorige visuele',
+    next: 'Volgende visuele',
+    ariaLabel: {
+      delimiter: 'Carousel slide {0} of {1}',
+    },
+  },
+  calendar: {
+    moreEvents: '{0} meer',
+  },
+  input: {
+    clear: 'Clear {0}',
+    prependAction: '{0} prepended action',
+    appendAction: '{0} appended action',
+  },
+  fileInput: {
+    counter: '{0} files',
+    counterSize: '{0} files ({1} in total)',
+  },
+  timePicker: {
+    am: 'AM',
+    pm: 'PM',
+  },
+  pagination: {
+    ariaLabel: {
+      wrapper: 'Paginasie-navigasie',
+      next: 'Volgende bladsy',
+      previous: 'Vorige bladsy',
+      page: 'Gaan na bladsy {0}',
+      currentPage: 'Huidige bladsy, Bladsy {0}',
+    },
+  },
+  rating: {
+    ariaLabel: {
+      icon: 'Rating {0} of {1}',
+    },
+  },
+  loading: 'Loading...',
+}