Merge pull request #38 from Mini-ghost/feature/multiple-endpoint-types

update v0.21.x type definition

Author: hunterliu1003

docs/content/en/index.md

@@ -586,6 +586,47 @@ Or get `params` on `@beforeOpen` event:
 
 <alert>`parmas` will be reset to `{}` automatically after `closed` event. You can avoid the modal to reset the `params` to empty object by calling `event.stop()`.</alert>
 
+## TypeScript
+
+### Vue
+Works out of the box in Vue, no other settings are required. But if you customized your access key, you must define the type yourself like below:
+
+```ts
+import Vue from 'vue'
+import VueFinalModal, { 
+  VfmOptions,
+  VueFinalModalProperty 
+} from 'vue-final-modal'
+
+Vue.use<VfmOptions>(VueFinalModal(), {
+  componentName: 'MyComponentName',
+  key: 'myKey',
+})
+
+// define the type of access key yourself
+declare module 'vue/types/vue' {
+  interface Vue {
+    myKey: VueFinalModalProperty;
+  }
+}
+```
+
+### Nuxt
+
+Add the types to your "types" array in tsconfig.json file
+
+```js
+{
+  "compilerOptions": {
+    "types": [
+      // other types
+      // ...
+      "vue-final-modal"
+    ]
+  }
+}
+```
+
 ## **Contribution**
 
 👋 Hi I'm Hunter, the author of `vue-final-modal`.

package.json

@@ -12,7 +12,7 @@
   "files": [
     "lib",
     "dist",
-    "types/index.d.ts",
+    "types",
     "vetur"
   ],
   "scripts": {

types/index.d.ts

@@ -1,4 +1,5 @@
 import Vue, { PluginObject } from 'vue'
+import './lib'
 
 export class VueFinalModalComponant extends Vue {
   $refs: {
@@ -7,17 +8,21 @@ export class VueFinalModalComponant extends Vue {
   }
 }
 
+export type VueFinalModalProperty = {
+  readonly openedModals: VueFinalModalComponant[]
+  readonly modals: VueFinalModalComponant[],
+  get(name: string): VueFinalModalComponant | undefined
+  show(name: string): void
+  hide(name: string): void
+  hideAll(): void
+  toggle(name: string, params?: any): void
+  toggle(name: string, show?: boolean, params?: any): void
+}
+
+
 declare module 'vue/types/vue' {
   interface Vue {
-    readonly $vfm: {
-      readonly openedModals: VueFinalModalComponant[]
-      readonly modals: VueFinalModalComponant[]
-      get(name: string): VueFinalModalComponant | undefined
-      show(name: string): void
-      hide(name: string): void
-      hideAll(): void
-      toggle(name: string, show: boolean): void
-    }
+    readonly $vfm: VueFinalModalProperty
   }
 }
 
@@ -27,4 +32,5 @@ export interface VfmOptions {
 }
 
 declare const VfmPlugin: () => PluginObject<VfmOptions>
+
 export default VfmPlugin

types/lib.d.ts

@@ -0,0 +1,6 @@
+declare module 'vue-final-modal/lib' {
+  import VfmPlugin from 'vue-final-modal'
+
+  export default VfmPlugin
+  export * from 'vue-final-modal'
+}