@kokoccc/vuetify 1.0.1

package/src/services/goto/__tests__/goto.spec.ts

@@ -0,0 +1,214 @@
+// Lib
+import { mount, enableAutoUnmount } from '@vue/test-utils'
+import { defineComponent, h } from 'vue'
+
+// Components
+import VBtn from '../../../components/VBtn'
+
+// Services
+import goTo, { Goto } from '../index'
+import { Application } from '../../application/index'
+
+// Utils
+import { getOffset, getContainer } from '../util'
+
+// Types
+import { VuetifyServiceContract } from 'vuetify/types/services'
+
+describe('$vuetify.goTo', () => {
+  (global as any).performance = require('perf_hooks').performance
+  let framework: Record<string, VuetifyServiceContract> = {}
+
+  enableAutoUnmount(afterEach)
+
+  beforeEach(() => {
+    framework = {
+      application: new Application(),
+    }
+
+    goTo.framework = framework
+  })
+
+  it('should throw error when target is undefined or null', async () => {
+    expect(() => goTo(undefined))
+      .toThrow(new TypeError('Target must be a Number/Selector/HTMLElement/VueComponent, received undefined instead.'))
+
+    expect(() => goTo(null))
+      .toThrow(new TypeError('Target must be a Number/Selector/HTMLElement/VueComponent, received null instead.'))
+  })
+
+  it('should throw error when target element is not found', async () => {
+    expect(() => goTo('#foo'))
+      .toThrow(new Error('Target element "#foo" not found.'))
+  })
+
+  it('should throw error when container element is not found', async () => {
+    expect(() => goTo(0, { container: '#thisContainerDoesNotExist' }))
+      .toThrow(new Error('Container element "#thisContainerDoesNotExist" not found.'))
+  })
+
+  it('should throw error when container is undefined or null', async () => {
+    expect(() => goTo(0, { container: undefined }))
+      .toThrow(new TypeError('Container must be a Selector/HTMLElement/VueComponent, received undefined instead.'))
+
+    expect(() => goTo(0, { container: null }))
+      .toThrow(new TypeError('Container must be a Selector/HTMLElement/VueComponent, received null instead.'))
+
+    expect(() => goTo(0, { container: 42 as any }))
+      .toThrow(new TypeError('Container must be a Selector/HTMLElement/VueComponent, received Number instead.'))
+  })
+
+  it('should throw error if easing does not exist', async () => {
+    expect(() => goTo(1, { easing: 'thisEasingDoesNotExist' }))
+      .toThrow(new TypeError('Easing function "thisEasingDoesNotExist" not found.'))
+  })
+
+  it('should not throw error when using VueComponent as target', async () => {
+    const btn = mount(VBtn)
+
+    await expect(goTo(btn.vm, { duration: 0 })).resolves.not.toBeUndefined()
+  })
+
+  it('should work with Vue 3 component wrapper from Vue Test Utils', async () => {
+    const TestComponent = defineComponent({
+      template: '<div>Test Component</div>',
+    })
+    const wrapper = mount(TestComponent)
+
+    await expect(goTo(wrapper.vm, { duration: 0 })).resolves.not.toBeUndefined()
+  })
+
+  it('should work with raw HTMLElement', async () => {
+    const element = document.createElement('div')
+    document.body.appendChild(element)
+
+    await expect(goTo(element, { duration: 0 })).resolves.not.toBeUndefined()
+
+    document.body.removeChild(element)
+  })
+
+  it('should work with CSS selector string', async () => {
+    const element = document.createElement('div')
+    element.id = 'test-goto-element'
+    document.body.appendChild(element)
+
+    await expect(goTo('#test-goto-element', { duration: 0 })).resolves.not.toBeUndefined()
+
+    document.body.removeChild(element)
+  })
+
+  it('should work with number offset', async () => {
+    await expect(goTo(100, { duration: 0 })).resolves.not.toBeUndefined()
+  })
+
+  it('should use VueComponent as container', async () => {
+    const TestComponent = defineComponent({
+      template: '<div style="height: 1000px; overflow: auto"><div style="height: 2000px;">Content</div></div>',
+    })
+    const wrapper = mount(TestComponent)
+
+    await expect(goTo(100, { container: wrapper.vm, duration: 0 })).resolves.not.toBeUndefined()
+  })
+
+  it('should instantiate and return goto', () => {
+    expect(new Goto()).toEqual(goTo)
+  })
+})
+
+describe('goto utilities', () => {
+  let utilsFramework: Record<string, VuetifyServiceContract> = {}
+
+  beforeEach(() => {
+    utilsFramework = {
+      application: new Application(),
+    }
+    goTo.framework = utilsFramework
+  })
+
+  describe('getOffset', () => {
+    it('should return number when target is number', () => {
+      expect(getOffset(100)).toBe(100)
+    })
+
+    it('should return offset for HTMLElement', () => {
+      const element = document.createElement('div')
+      element.style.position = 'absolute'
+      element.style.top = '50px'
+      document.body.appendChild(element)
+
+      expect(getOffset(element)).toBeGreaterThanOrEqual(0)
+
+      document.body.removeChild(element)
+    })
+
+    it('should return offset for Vue 3 component', () => {
+      const TestComponent = defineComponent({
+        template: '<div>Test</div>',
+      })
+      const wrapper = mount(TestComponent)
+
+      expect(getOffset(wrapper.vm)).toBeGreaterThanOrEqual(0)
+    })
+
+    it('should return offset for CSS selector', () => {
+      const element = document.createElement('div')
+      element.id = 'test-offset-element'
+      document.body.appendChild(element)
+
+      expect(getOffset('#test-offset-element')).toBeGreaterThanOrEqual(0)
+
+      document.body.removeChild(element)
+    })
+
+    it('should throw error for invalid selector', () => {
+      expect(() => getOffset('#nonexistent-element'))
+        .toThrow('Target element "#nonexistent-element" not found.')
+    })
+
+    it('should throw error for invalid target type', () => {
+      expect(() => getOffset({ invalid: 'target' }))
+        .toThrow('Target must be a Number/Selector/HTMLElement/VueComponent')
+    })
+  })
+
+  describe('getContainer', () => {
+    it('should return HTMLElement for valid container', () => {
+      const element = document.createElement('div')
+      document.body.appendChild(element)
+
+      expect(getContainer(element)).toBe(element)
+
+      document.body.removeChild(element)
+    })
+
+    it('should return HTMLElement for Vue 3 component container', () => {
+      const TestComponent = defineComponent({
+        template: '<div>Test Container</div>',
+      })
+      const wrapper = mount(TestComponent)
+
+      const result = getContainer(wrapper.vm)
+      expect(result).toBeInstanceOf(HTMLElement)
+    })
+
+    it('should return HTMLElement for CSS selector container', () => {
+      const element = document.createElement('div')
+      element.id = 'test-container-element'
+      document.body.appendChild(element)
+
+      expect(getContainer('#test-container-element')).toBe(element)
+
+      document.body.removeChild(element)
+    })
+
+    it('should throw error for invalid container selector', () => {
+      expect(() => getContainer('#nonexistent-container'))
+        .toThrow('Container element "#nonexistent-container" not found.')
+    })
+
+    it('should throw error for invalid container type', () => {
+      expect(() => getContainer(42))
+        .toThrow('Container must be a Selector/HTMLElement/VueComponent')
+    })
+  })
+})

package/src/services/goto/easing-patterns.ts

@@ -0,0 +1,28 @@
+export type EasingFunction = (t: number) => number
+
+// linear
+export const linear = (t: number) => t
+// accelerating from zero velocity
+export const easeInQuad = (t: number) => t ** 2
+// decelerating to zero velocity
+export const easeOutQuad = (t: number) => t * (2 - t)
+// acceleration until halfway, then deceleration
+export const easeInOutQuad = (t: number) => (t < 0.5 ? 2 * t ** 2 : -1 + (4 - 2 * t) * t)
+// accelerating from zero velocity
+export const easeInCubic = (t: number) => t ** 3
+// decelerating to zero velocity
+export const easeOutCubic = (t: number) => --t ** 3 + 1
+// acceleration until halfway, then deceleration
+export const easeInOutCubic = (t: number) => t < 0.5 ? 4 * t ** 3 : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
+// accelerating from zero velocity
+export const easeInQuart = (t: number) => t ** 4
+// decelerating to zero velocity
+export const easeOutQuart = (t: number) => 1 - --t ** 4
+// acceleration until halfway, then deceleration
+export const easeInOutQuart = (t: number) => (t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t)
+// accelerating from zero velocity
+export const easeInQuint = (t: number) => t ** 5
+// decelerating to zero velocity
+export const easeOutQuint = (t: number) => 1 + --t ** 5
+// acceleration until halfway, then deceleration
+export const easeInOutQuint = (t: number) => t < 0.5 ? 16 * t ** 5 : 1 + 16 * --t ** 5

package/src/services/goto/index.ts

@@ -0,0 +1,92 @@
+// Extensions
+import { Service } from '../service'
+
+// Utilities
+import * as easingPatterns from './easing-patterns'
+import {
+  getContainer,
+  getOffset,
+} from './util'
+
+// Types
+import { GoToOptions, VuetifyGoToTarget } from 'vuetify/types/services/goto'
+
+import { VuetifyServiceContract } from 'vuetify/types/services'
+
+export default function goTo (
+  _target: VuetifyGoToTarget,
+  _settings: GoToOptions = {}
+): Promise<number> {
+  const settings: GoToOptions = {
+    container: (document.scrollingElement as HTMLElement | null) || document.body || document.documentElement,
+    duration: 500,
+    offset: 0,
+    easing: 'easeInOutCubic',
+    appOffset: true,
+    ..._settings,
+  }
+  const container = getContainer(settings.container)
+
+  /* istanbul ignore else */
+  if (settings.appOffset && goTo.framework.application) {
+    const isDrawer = container.classList.contains('v-navigation-drawer')
+    const isClipped = container.classList.contains('v-navigation-drawer--clipped')
+    const { bar, top } = goTo.framework.application as any
+
+    settings.offset += bar
+    /* istanbul ignore else */
+    if (!isDrawer || isClipped) settings.offset += top
+  }
+
+  const startTime = performance.now()
+
+  let targetLocation: number
+  if (typeof _target === 'number') {
+    targetLocation = getOffset(_target) - settings.offset!
+  } else {
+    targetLocation = getOffset(_target) - getOffset(container) - settings.offset!
+  }
+
+  const startLocation = container.scrollTop
+  if (targetLocation === startLocation) return Promise.resolve(targetLocation)
+
+  const ease = typeof settings.easing === 'function'
+    ? settings.easing
+    : easingPatterns[settings.easing!]
+  /* istanbul ignore else */
+  if (!ease) throw new TypeError(`Easing function "${settings.easing}" not found.`)
+
+  // Cannot be tested properly in jsdom
+  /* istanbul ignore next */
+  return new Promise(resolve => requestAnimationFrame(function step (currentTime: number) {
+    const timeElapsed = currentTime - startTime
+    const progress = Math.abs(settings.duration ? Math.min(timeElapsed / settings.duration, 1) : 1)
+
+    container.scrollTop = Math.floor(startLocation + (targetLocation - startLocation) * ease(progress))
+
+    const clientHeight = container === document.body ? document.documentElement.clientHeight : container.clientHeight
+    const reachBottom = clientHeight + container.scrollTop >= container.scrollHeight
+    if (
+      progress === 1 ||
+      // Need to go lower but reach bottom
+      (targetLocation > container.scrollTop && reachBottom)
+    ) {
+      return resolve(targetLocation)
+    }
+
+    requestAnimationFrame(step)
+  }))
+}
+
+goTo.framework = {} as Record<string, VuetifyServiceContract>
+goTo.init = () => {}
+
+export class Goto extends Service {
+  public static property: 'goTo' = 'goTo'
+
+  constructor () {
+    super()
+
+    return goTo
+  }
+}

package/src/services/goto/util.ts

@@ -0,0 +1,89 @@
+// Return target's cumulative offset from the top
+export function getOffset (target: any): number {
+  if (typeof target === 'number') {
+    return target
+  }
+
+  let el = $(target)
+
+  if (!el) {
+    throw typeof target === 'string'
+      ? new Error(`Target element "${target}" not found.`)
+      : new TypeError(`Target must be a Number/Selector/HTMLElement/VueComponent, received ${type(target)} instead.`)
+  }
+
+  let totalOffset = 0
+  while (el) {
+    totalOffset += el.offsetTop
+    el = el.offsetParent as HTMLElement
+  }
+
+  return totalOffset
+}
+
+export function getContainer (container: any): HTMLElement {
+  const el = $(container)
+
+  if (el) return el
+
+  throw typeof container === 'string'
+    ? new Error(`Container element "${container}" not found.`)
+    : new TypeError(`Container must be a Selector/HTMLElement/VueComponent, received ${type(container)} instead.`)
+}
+
+function type (el: any) {
+  if (el == null) return el
+  // Vue 3 component detection
+  if (isVue3Component(el)) return 'VueComponent'
+  return el.constructor?.name || 'Unknown'
+}
+
+// Helper function to detect Vue 3 component instances
+function isVue3Component (el: any): boolean {
+  // Check for Vue 3 component instance properties
+  return !!(el && (
+    // Direct component instance with $el
+    el.$el ||
+    // Component instance with appContext (Vue 3 runtime)
+    el.appContext ||
+    // Component proxy with type property (from Vue Test Utils)
+    (el.type && (el.type.name || el.type.__name)) ||
+    // Component with setupState (Composition API)
+    el.setupState ||
+    // Component with ctx property (internal Vue 3)
+    (el.ctx && el.ctx.type)
+  ))
+}
+
+function $ (el: any): HTMLElement | null {
+  if (typeof el === 'string') {
+    return document.querySelector<HTMLElement>(el)
+  } else if (el instanceof HTMLElement) {
+    return el
+  } else if (isVue3Component(el)) {
+    return extractElementFromVue3Component(el)
+  } else {
+    return null
+  }
+}
+
+// Helper function to extract HTMLElement from Vue 3 component
+function extractElementFromVue3Component (component: any): HTMLElement | null {
+  if (component.$el instanceof HTMLElement) {
+    return component.$el
+  }
+
+  if (component.element instanceof HTMLElement) {
+    return component.element
+  }
+
+  if (component.ctx?.vnode?.el instanceof HTMLElement) {
+    return component.ctx.vnode.el
+  }
+
+  if (component.vnode?.el instanceof HTMLElement) {
+    return component.vnode.el
+  }
+
+  return null
+}

package/src/services/icons/__tests__/__snapshots__/icons.spec.ts.snap

@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Icons.ts should generate default icons 1`] = `
+Object {
+  "cancel": "mdi-close-circle",
+  "checkboxIndeterminate": "mdi-minus-box",
+  "checkboxOff": "mdi-checkbox-blank-outline",
+  "checkboxOn": "mdi-checkbox-marked",
+  "clear": "mdi-close",
+  "close": "mdi-close",
+  "complete": "mdi-check",
+  "delete": "mdi-close-circle",
+  "delimiter": "mdi-circle",
+  "dropdown": "mdi-menu-down",
+  "edit": "mdi-pencil",
+  "error": "mdi-alert",
+  "expand": "mdi-chevron-down",
+  "file": "mdi-paperclip",
+  "first": "mdi-page-first",
+  "info": "mdi-information",
+  "last": "mdi-page-last",
+  "loading": "mdi-cached",
+  "menu": "mdi-menu",
+  "minus": "mdi-minus",
+  "next": "mdi-chevron-right",
+  "plus": "mdi-plus",
+  "prev": "mdi-chevron-left",
+  "radioOff": "mdi-radiobox-blank",
+  "radioOn": "mdi-radiobox-marked",
+  "ratingEmpty": "mdi-star-outline",
+  "ratingFull": "mdi-star",
+  "ratingHalf": "mdi-star-half-full",
+  "sort": "mdi-arrow-up",
+  "subgroup": "mdi-menu-down",
+  "success": "mdi-check-circle",
+  "unfold": "mdi-unfold-more-horizontal",
+  "warning": "mdi-exclamation",
+}
+`;
+
+exports[`Icons.ts should use a custom iconfont preset 1`] = `
+Object {
+  "cancel": "fa fa-times-circle",
+  "checkboxIndeterminate": "fa fa-minus-square",
+  "checkboxOff": "fa fa-square-o",
+  "checkboxOn": "fa fa-check-square",
+  "clear": "fa fa-times-circle",
+  "close": "fa fa-times",
+  "complete": "fa fa-check",
+  "delete": "fa fa-times-circle",
+  "delimiter": "fa fa-circle",
+  "dropdown": "fa fa-caret-down",
+  "edit": "fa fa-pencil",
+  "error": "fa fa-exclamation-triangle",
+  "expand": "fa fa-chevron-down",
+  "file": "fa fa-paperclip",
+  "first": "fa fa-step-backward",
+  "info": "fa fa-info-circle",
+  "last": "fa fa-step-forward",
+  "loading": "fa fa-refresh",
+  "menu": "fa fa-bars",
+  "minus": "fa fa-minus",
+  "next": "fa fa-chevron-right",
+  "plus": "fa fa-plus",
+  "prev": "fa fa-chevron-left",
+  "radioOff": "fa fa-circle-o",
+  "radioOn": "fa fa-dot-circle-o",
+  "ratingEmpty": "fa fa-star-o",
+  "ratingFull": "fa fa-star",
+  "ratingHalf": "fa fa-star-half-o",
+  "sort": "fa fa-sort-up",
+  "subgroup": "fa fa-caret-down",
+  "success": "fa fa-check-circle",
+  "unfold": "fa fa-angle-double-down",
+  "warning": "fa fa-exclamation",
+}
+`;

package/src/services/icons/__tests__/icons.spec.ts

@@ -0,0 +1,31 @@
+// Service
+import { Icons } from '../index'
+
+// Preset
+import { preset } from '../../../presets/default'
+
+describe('Icons.ts', () => {
+  let icon
+
+  it('should generate default icons', () => {
+    icon = new Icons(preset)
+
+    expect(icon.values).toMatchSnapshot()
+  })
+
+  it('should use a custom iconfont preset', () => {
+    preset.icons.iconfont = 'fa4'
+    icon = new Icons(preset)
+
+    expect(icon.values).toMatchSnapshot()
+  })
+
+  it('should accept custom icons', () => {
+    preset.icons.iconfont = 'fa4'
+    preset.icons.values.complete = 'fizzbuzz'
+
+    icon = new Icons(preset)
+
+    expect(icon.values.complete).toBe('fizzbuzz')
+  })
+})

package/src/services/icons/index.ts

@@ -0,0 +1,39 @@
+// Extensions
+import { Service } from '../service'
+
+// Utilities
+import { mergeDeep } from '../../util/helpers'
+
+// Types
+import { VuetifyPreset } from 'vuetify/types/services/presets'
+import { Icons as IIcons } from 'vuetify/types/services/icons'
+
+// Presets
+import presets from './presets'
+
+export class Icons extends Service implements IIcons {
+  static property: 'icons' = 'icons'
+
+  public iconfont: IIcons['iconfont']
+
+  public values: IIcons['values']
+
+  public component: IIcons['component']
+
+  constructor (preset: VuetifyPreset) {
+    super()
+
+    const {
+      iconfont,
+      values,
+      component,
+    } = preset[Icons.property]
+
+    this.component = component
+    this.iconfont = iconfont
+    this.values = mergeDeep(
+      presets[iconfont],
+      values
+    ) as IIcons['values']
+  }
+}

package/src/services/icons/presets/fa-svg.ts

@@ -0,0 +1,23 @@
+import { VuetifyIcons } from 'vuetify/types/services/icons'
+import { Component } from 'vue'
+import icons from './fa'
+
+export function convertToComponentDeclarations (
+  component: Component | string,
+  iconSet: VuetifyIcons,
+) {
+  const result: Partial<VuetifyIcons> = {}
+
+  for (const key in iconSet) {
+    result[key] = {
+      component,
+      props: {
+        icon: (iconSet[key] as string).split(' fa-'),
+      },
+    }
+  }
+
+  return result as VuetifyIcons
+}
+
+export default convertToComponentDeclarations('font-awesome-icon', icons)

package/src/services/icons/presets/fa.ts

@@ -0,0 +1,39 @@
+import { VuetifyIcons } from 'vuetify/types/services/icons'
+
+const icons: VuetifyIcons = {
+  complete: 'fas fa-check',
+  cancel: 'fas fa-times-circle',
+  close: 'fas fa-times',
+  delete: 'fas fa-times-circle', // delete (e.g. v-chip close)
+  clear: 'fas fa-times-circle', // delete (e.g. v-chip close)
+  success: 'fas fa-check-circle',
+  info: 'fas fa-info-circle',
+  warning: 'fas fa-exclamation-circle',
+  error: 'fas fa-exclamation-triangle',
+  prev: 'fas fa-chevron-left',
+  next: 'fas fa-chevron-right',
+  checkboxOn: 'fas fa-check-square',
+  checkboxOff: 'far fa-square', // note 'far'
+  checkboxIndeterminate: 'fas fa-minus-square',
+  delimiter: 'fas fa-circle', // for carousel
+  sort: 'fas fa-sort-up',
+  expand: 'fas fa-chevron-down',
+  menu: 'fas fa-bars',
+  subgroup: 'fas fa-caret-down',
+  dropdown: 'fas fa-caret-down',
+  radioOn: 'far fa-dot-circle',
+  radioOff: 'far fa-circle',
+  edit: 'fas fa-edit',
+  ratingEmpty: 'far fa-star',
+  ratingFull: 'fas fa-star',
+  ratingHalf: 'fas fa-star-half',
+  loading: 'fas fa-sync',
+  first: 'fas fa-step-backward',
+  last: 'fas fa-step-forward',
+  unfold: 'fas fa-arrows-alt-v',
+  file: 'fas fa-paperclip',
+  plus: 'fas fa-plus',
+  minus: 'fas fa-minus',
+}
+
+export default icons

package/src/services/icons/presets/fa4.ts

@@ -0,0 +1,39 @@
+import { VuetifyIcons } from 'vuetify/types/services/icons'
+
+const icons: VuetifyIcons = {
+  complete: 'fa fa-check',
+  cancel: 'fa fa-times-circle',
+  close: 'fa fa-times',
+  delete: 'fa fa-times-circle', // delete (e.g. v-chip close)
+  clear: 'fa fa-times-circle', // delete (e.g. v-chip close)
+  success: 'fa fa-check-circle',
+  info: 'fa fa-info-circle',
+  warning: 'fa fa-exclamation',
+  error: 'fa fa-exclamation-triangle',
+  prev: 'fa fa-chevron-left',
+  next: 'fa fa-chevron-right',
+  checkboxOn: 'fa fa-check-square',
+  checkboxOff: 'fa fa-square-o',
+  checkboxIndeterminate: 'fa fa-minus-square',
+  delimiter: 'fa fa-circle', // for carousel
+  sort: 'fa fa-sort-up',
+  expand: 'fa fa-chevron-down',
+  menu: 'fa fa-bars',
+  subgroup: 'fa fa-caret-down',
+  dropdown: 'fa fa-caret-down',
+  radioOn: 'fa fa-dot-circle-o',
+  radioOff: 'fa fa-circle-o',
+  edit: 'fa fa-pencil',
+  ratingEmpty: 'fa fa-star-o',
+  ratingFull: 'fa fa-star',
+  ratingHalf: 'fa fa-star-half-o',
+  loading: 'fa fa-refresh',
+  first: 'fa fa-step-backward',
+  last: 'fa fa-step-forward',
+  unfold: 'fa fa-angle-double-down',
+  file: 'fa fa-paperclip',
+  plus: 'fa fa-plus',
+  minus: 'fa fa-minus',
+}
+
+export default icons

package/src/services/icons/presets/index.ts

@@ -0,0 +1,15 @@
+import mdiSvg from './mdi-svg'
+import md from './md'
+import mdi from './mdi'
+import fa from './fa'
+import fa4 from './fa4'
+import faSvg from './fa-svg'
+
+export default Object.freeze({
+  mdiSvg,
+  md,
+  mdi,
+  fa,
+  fa4,
+  faSvg,
+})