fix(types): avoid importing from src, update for v2 (#7878)

* fix(types): avoid importing from src fixes #7040 fixes #7387 fixes #7964 * fix(types): don't use Dictionary<T> * fix(types): update for v2 * refactor: rename breakpoint interface
vuetifyjs · Sep 3, 2019 · 64056b4 · 64056b4
1 parent 2246337
commit 64056b4
Show file tree

Hide file tree

Showing 23 changed files with 252 additions and 276 deletions.
diff --git a/packages/docs/src/snippets/ts/breakpoint_service_structure.txt b/packages/docs/src/snippets/ts/breakpoint_service_structure.txt
@@ -36,5 +36,5 @@
   }
 
   // Scrollbar
-  scrollbarWidth: number
+  scrollBarWidth: number
 }
diff --git a/packages/vuetify/src/components/VApp/VApp.ts b/packages/vuetify/src/components/VApp/VApp.ts
@@ -35,7 +35,7 @@ export default mixins(
   },
 
   beforeCreate () {
-    if (!this.$vuetify || (this.$vuetify === this.$root)) {
+    if (!this.$vuetify || (this.$vuetify === this.$root as any)) {
       throw new Error('Vuetify is not properly initialized, see https://vuetifyjs.com/getting-started/quick-start#bootstrapping-the-vuetify-object')
     }
   },

diff --git a/packages/vuetify/src/components/VDatePicker/VDatePicker.ts b/packages/vuetify/src/components/VDatePicker/VDatePicker.ts
@@ -186,7 +186,7 @@ export default mixins(
           return this.defaultTitleDateFormatter(dates[0])
         }
 
-        return this.$vuetify.lang.t(this.selectedItemsText, [dates.length])
+        return this.$vuetify.lang.t(this.selectedItemsText, dates.length)
       }
     },
     defaultTitleDateFormatter (): DatePickerFormatter {

diff --git a/packages/vuetify/src/directives/index.ts b/packages/vuetify/src/directives/index.ts
@@ -1,5 +1,5 @@
-export { default as ClickOutside } from './click-outside'
-export { default as Resize } from './resize'
-export { default as Ripple } from './ripple'
-export { default as Scroll } from './scroll'
-export { default as Touch } from './touch'
+export { ClickOutside } from './click-outside'
+export { Resize } from './resize'
+export { Ripple } from './ripple'
+export { Scroll } from './scroll'
+export { Touch } from './touch'
diff --git a/packages/vuetify/src/services/application/index.ts b/packages/vuetify/src/services/application/index.ts
@@ -2,9 +2,9 @@
 import { Service } from '../service'
 
 // Types
-import { TargetPropValues, TargetProp } from 'vuetify/types/services/application'
+import { TargetPropValues, TargetProp, Application as IApplication } from 'vuetify/types/services/application'
 
-export class Application extends Service {
+export class Application extends Service implements IApplication {
   static property = 'application'
 
   bar = 0
@@ -21,7 +21,7 @@ export class Application extends Service {
 
   footer = 0
 
-  application: Record<string, TargetPropValues> = {
+  application: Dictionary<TargetPropValues> = {
     bar: {},
     top: {},
     left: {},

diff --git a/packages/vuetify/src/services/breakpoint/index.ts b/packages/vuetify/src/services/breakpoint/index.ts
@@ -2,9 +2,9 @@
 import { Service } from '../service'
 
 // Types
-import { VuetifyBreakpointOptions } from 'vuetify/types/services/breakpoint'
+import { BreakpointOptions, Breakpoint as IBreakpoint } from 'vuetify/types/services/breakpoint'
 
-export class Breakpoint extends Service {
+export class Breakpoint extends Service implements IBreakpoint {
   public static property = 'breakpoint'
 
   // Public
@@ -53,19 +53,19 @@ export class Breakpoint extends Service {
     lg: 1920,
   }
 
-  public scrollbarWidth = 16
+  public scrollBarWidth = 16
 
   private resizeTimeout = 0
 
-  constructor (options: Partial<VuetifyBreakpointOptions> = {}) {
+  constructor (options: Partial<BreakpointOptions> = {}) {
     super()
     this.thresholds = {
       ...this.thresholds,
       ...options.thresholds,
     }
-    this.scrollbarWidth = (
+    this.scrollBarWidth = (
       options.scrollBarWidth ||
-      this.scrollbarWidth
+      this.scrollBarWidth
     )
     this.init()
   }
@@ -100,9 +100,9 @@ export class Breakpoint extends Service {
 
     const xs = width < this.thresholds.xs
     const sm = width < this.thresholds.sm && !xs
-    const md = width < (this.thresholds.md - this.scrollbarWidth) && !(sm || xs)
-    const lg = width < (this.thresholds.lg - this.scrollbarWidth) && !(md || sm || xs)
-    const xl = width >= (this.thresholds.lg - this.scrollbarWidth)
+    const md = width < (this.thresholds.md - this.scrollBarWidth) && !(sm || xs)
+    const lg = width < (this.thresholds.lg - this.scrollBarWidth) && !(md || sm || xs)
+    const xl = width >= (this.thresholds.lg - this.scrollBarWidth)
 
     this.height = height
     this.width = width

diff --git a/packages/vuetify/src/services/goto/index.ts b/packages/vuetify/src/services/goto/index.ts
@@ -9,15 +9,15 @@ import {
 } from './util'
 
 // Types
-import { VuetifyGoToOptions, VuetifyGoToTarget } from 'vuetify/types/services/goto'
+import { GoToOptions, VuetifyGoToTarget } from 'vuetify/types/services/goto'
 
 import { VuetifyServiceContract } from 'vuetify/types/services'
 
 export default function goTo (
   _target: VuetifyGoToTarget,
-  _settings: Partial<VuetifyGoToOptions> = {}
+  _settings: Partial<GoToOptions> = {}
 ): Promise<number> {
-  const settings: VuetifyGoToOptions = {
+  const settings: GoToOptions = {
     container: (document.scrollingElement as HTMLElement | null) || document.body || document.documentElement,
     duration: 500,
     offset: 0,

diff --git a/packages/vuetify/src/services/icons/index.ts b/packages/vuetify/src/services/icons/index.ts
@@ -2,19 +2,19 @@
 import { Service } from '../service'
 
 // Types
-import { VuetifyIconOptions } from 'vuetify/types/services/icons'
+import { Icons as IIcons } from 'vuetify/types/services/icons'
 
 // Presets
 import presets from './presets'
 
-export class Icons extends Service {
+export class Icons extends Service implements IIcons {
   static property = 'icons'
 
-  public iconfont: VuetifyIconOptions['iconfont'] = 'mdi'
+  public iconfont: IIcons['iconfont'] = 'mdi'
 
-  public values: VuetifyIconOptions['values'] = presets[this.iconfont]
+  public values: IIcons['values'] = presets[this.iconfont]
 
-  constructor (options: Partial<VuetifyIconOptions> = {}) {
+  constructor (options: Partial<IIcons> = {}) {
     super()
     if (options.iconfont) this.iconfont = options.iconfont
 

diff --git a/packages/vuetify/src/services/lang/index.ts b/packages/vuetify/src/services/lang/index.ts
@@ -10,8 +10,8 @@ import { consoleError, consoleWarn } from '../../util/console'
 
 // Types
 import {
-  VuetifyLangOptions,
   VuetifyLocale,
+  Lang as ILang,
 } from 'vuetify/types/services/lang'
 
 const LANG_PREFIX = '$vuetify.'
@@ -38,7 +38,7 @@ function getTranslation (
   return translation
 }
 
-export class Lang extends Service {
+export class Lang extends Service implements ILang {
   static property = 'lang'
 
   public locales: Record<string, VuetifyLocale>
@@ -47,7 +47,7 @@ export class Lang extends Service {
 
   private translator: ((key: string, ...params: any[]) => string) | undefined
 
-  constructor (options: Partial<VuetifyLangOptions> = {}) {
+  constructor (options: Partial<ILang> = {}) {
     super()
     this.current = options.current || 'en'
     this.locales = Object.assign({ en }, options.locales)

diff --git a/packages/vuetify/src/services/theme/index.ts b/packages/vuetify/src/services/theme/index.ts
@@ -9,17 +9,17 @@ import * as ThemeUtils from './utils'
 import Vue from 'vue'
 import {
   VuetifyParsedTheme,
-  VuetifyThemeOptions,
   VuetifyThemes,
   VuetifyThemeVariant,
+  Theme as ITheme,
 } from 'vuetify/types/services/theme'
 
 export class Theme extends Service {
   static property = 'theme'
 
   public disabled = false
 
-  public options: VuetifyThemeOptions['options']
+  public options!: ITheme['options']
 
   public styleEl?: HTMLStyleElement
 
@@ -52,21 +52,18 @@ export class Theme extends Service {
 
   private vueMeta = false
 
-  constructor (options: Partial<VuetifyThemeOptions> = {}) {
+  constructor (options: Partial<ITheme> = {}) {
     super()
     if (options.disable) {
       this.disabled = true
 
       return
     }
 
-    this.options = {
-      ...this.options,
-      ...options.options,
-    }
+    this.options = options.options!
 
     this.dark = Boolean(options.dark)
-    const themes = options.themes || {}
+    const themes = options.themes || {} as never
 
     this.themes = {
       dark: this.fillVariant(themes.dark, true),

diff --git a/packages/vuetify/types/alacarte.d.ts b/packages/vuetify/types/alacarte.d.ts
@@ -27,7 +27,7 @@ declare module 'vuetify/es5/components/*' {
 }
 
 declare module 'vuetify/es5/directives' {
-  import { DirectiveOptions, PluginFunction } from 'vue'
+  import { DirectiveOptions } from 'vue'
 
   const ClickOutside: DirectiveOptions
   const Ripple: DirectiveOptions
@@ -43,50 +43,3 @@ declare module 'vuetify/es5/directives' {
     Touch
   }
 }
-
-declare module 'vuetify/lib/install' {
-  import { VueConstructor } from 'vue'
-
-  const install: (Vue: VueConstructor, args: {}) => void
-
-  export { install }
-}
-declare module 'vuetify/lib/components/Vuetify' {
-  import Vuetify from 'vuetify'
-
-  export default Vuetify
-}
-
-declare module 'vuetify/lib/components/*' {
-  import { ComponentOrPack } from 'vuetify'
-  import { VueConstructor } from 'vue'
-
-  const VuetifyComponent: {
-    // FIX: The & VueConstructor is a lie.
-    // This might not be a valid component.
-    // But registering arbitrary objects as components is the status quo.
-    default: ComponentOrPack & VueConstructor
-    [key: string]: ComponentOrPack & VueConstructor
-  }
-
-  export = VuetifyComponent
-}
-
-declare module 'vuetify/lib/directives' {
-  import { DirectiveOptions, PluginFunction } from 'vue'
-
-  const ClickOutside: DirectiveOptions
-  const Ripple: DirectiveOptions
-  const Resize: DirectiveOptions
-  const Scroll: DirectiveOptions
-  const Touch: DirectiveOptions
-
-  export {
-    ClickOutside,
-    Ripple,
-    Resize,
-    Scroll,
-    Touch
-  }
-}
-
diff --git a/packages/vuetify/types/index.d.ts b/packages/vuetify/types/index.d.ts
@@ -1,30 +1,26 @@
-import Vue, { Component, PluginFunction, PluginObject, VueConstructor, DirectiveFunction, DirectiveOptions } from 'vue'
+import Vue, { Component, PluginFunction, VueConstructor, DirectiveOptions } from 'vue'
 import './lib'
 import './alacarte'
 import './colors'
 
 // Services
-import { Application } from '../src/services/application'
-import { Breakpoint } from '../src/services/breakpoint'
-import { Goto } from '../src/services/goto'
-import { Icons } from '../src/services/icons'
-import { Lang } from '../src/services/lang'
-import { Theme } from '../src/services/theme'
+import { Application } from './services/application'
+import { Breakpoint } from './services/breakpoint'
+import { Icons } from './services/icons'
+import { Lang } from './services/lang'
+import { Theme } from './services/theme'
 
 // Service Options
-import { VuetifyBreakpointOptions } from './services/breakpoint'
-import { VuetifyGoToOptions } from './services/goto'
-import { VuetifyIconOptions } from './services/icons'
-import { VuetifyLangOptions } from './services/lang'
-import { VuetifyThemeOptions } from './services/theme'
+import { GoToOptions } from './services/goto'
 import { VuetifyPreset } from './presets'
 
 declare const Vuetify: Vuetify
 export default Vuetify
 export interface Vuetify {
-  new (preset?: Partial<VuetifyPreset>): Vuetify;
   install: PluginFunction<VuetifyUseOptions>
   version: string
+  framework: Framework
+  new (preset?: Partial<VuetifyPreset>): Vuetify
 }
 
 export type ComponentOrPack = Component & {
@@ -37,19 +33,19 @@ export interface VuetifyUseOptions {
   components?: Record<string, ComponentOrPack>
 }
 
-export interface VuetifyObject extends Vue {
-  readonly breakpoint: InstanceType<typeof Breakpoint>
-  readonly goTo: <T extends string | number | HTMLElement | Vue>(target: T, options?: VuetifyGoToOptions) => Promise<T>
-  application: InstanceType<typeof Application>
-  theme: InstanceType<typeof Theme>
-  icons: InstanceType<typeof Icons>
-  lang: InstanceType<typeof Lang>
+export interface Framework {
+  readonly breakpoint: Breakpoint
+  readonly goTo: <T extends string | number | HTMLElement | Vue>(target: T, options?: GoToOptions) => Promise<T>
+  application: Application
+  theme: Theme
+  icons: Icons
+  lang: Lang
   rtl: boolean
 }
 
 declare module 'vue/types/vue' {
   export interface Vue {
-    $vuetify: VuetifyObject
+    $vuetify: Framework
   }
 }
 
@@ -61,6 +57,6 @@ declare module 'vue/types/options' {
     Computed=DefaultComputed,
     PropsDef=PropsDefinition<DefaultProps>,
     Props=DefaultProps> {
-    vuetify?: any
+    vuetify?: Vuetify
   }
 }