Merge pull request #17 from greegus/typescript-support

Add typescript support

package.json

@@ -1,9 +1,13 @@
 {
   "name": "vue-last-modal",
-  "description": "Minimalistic promise-based, programmatically-opening & stacking modal plugin for Vue.js.",
-  "version": "1.2.6",
+  "version": "1.3.0",
+  "description": "Minimalistic promise-based, programmatically-opening & stacking modal plugin for Vue 2",
   "main": "dist/last-modal.umd.min.js",
-  "module": "src/last-modal.js",
+  "types": "types/index.d.ts",
+  "files": [
+    "dist/",
+    "types/"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/greegus/vue-last-modal.git"
@@ -27,15 +31,19 @@
   },
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build --target lib --name last-modal src/last-modal.js"
+    "build": "vue-cli-service build --target lib --name last-modal src/vue-last-modal.ts"
   },
-  "dependencies": {
-    "vue": "^2.5.0"
+  "peerDependencies": {
+    "vue": "~2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.2.2",
-    "@vue/cli-service": "^4.2.2",
-    "postcss-nested": "^4.2.1",
-    "vue-template-compiler": "^2.5.0"
+    "@vue/cli-plugin-babel": "^4.5.13",
+    "@vue/cli-plugin-typescript": "^4.5.13",
+    "@vue/cli-service": "^4.5.12",
+    "autoprefixer": "^9.8.6",
+    "postcss": "^7.0.0",
+    "postcss-nested": "^4.2.3",
+    "typescript": "~4.1.5",
+    "vue-template-compiler": "^2.6.12"
   }
 }

src/App.vue

@@ -28,12 +28,14 @@
   </div>
 </template>
 
-<script>
-import BasicModal from './modals/BasicModal'
-import PlainModal from './modals/PlainModal'
-import ScrollableModal from './modals/ScrollableModal'
+<script lang="ts">
+import Vue from 'vue';
 
-export default {
+import BasicModal from './modals/BasicModal.vue'
+import PlainModal from './modals/PlainModal.vue'
+import ScrollableModal from './modals/ScrollableModal.vue'
+
+export default Vue.extend({
   methods: {
     open() {
       this.$modal(BasicModal)
@@ -55,7 +57,7 @@ export default {
       this.$modal(ScrollableModal)
     }
   }
-};
+});
 </script>
 
 <style lang="postcss">

src/components/modal-layout.vue → src/components/ModalLayout.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="ModalLayout" :class="{hasHeader, hasFooter, isScrollable, isPlain}" :style="computedStyle">
+    <div class="ModalLayout" :class="{ hasHeader, hasFooter, isScrollable, isPlain }" :style="computedStyle">
       <div class="ModalLayout__close" @click="close()" v-if="!hideCloser">
       </div>
 
@@ -21,18 +21,29 @@
     </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
   name: "modal-layout",
 
   props: {
-    title: String,
+    title: {
+      type: String,
+      default: ''
+    },
 
-    hideCloser: Boolean,
+    hideCloser: {
+      type: Boolean
+    },
 
-    scroll: Boolean,
+    scroll: {
+      type: Boolean
+    },
 
-    plain: Boolean,
+    plain: {
+      type: Boolean
+    },
 
     width: {
       type: [Number, String],
@@ -41,40 +52,42 @@ export default {
   },
 
   computed: {
-    isScrollable() {
+    isScrollable(): boolean {
       return this.scroll;
     },
 
-    isPlain() {
+    isPlain(): boolean {
       return this.plain;
     },
 
-    hasHeader() {
-      return this.$slots.header || this.title;
+    hasHeader(): boolean {
+      return Boolean(this.$slots.header || this.title);
     },
 
-    hasFooter() {
-      return this.$slots.footer;
+    hasFooter(): boolean {
+      return Boolean(this.$slots.footer);
     },
 
-    computedStyle() {
-      const maxWidth = this.width + (Number(this.width) ? "px" : "");
+    computedStyle(): object {
+      const maxWidth = this.width + (Number(this.width) ? 'px' : '');
 
-      if (maxWidth && maxWidth !== "auto") {
+      if (maxWidth && maxWidth !== 'auto') {
         return {
-          width: "100%",
+          width: '100%',
           maxWidth
         };
       }
+
+      return {}
     }
   },
 
   methods: {
     close() {
-      this.$root.$emit("LastModal.closeTop");
+      this.$root.$emit('LastModal.closeTop');
     }
   }
-};
+});
 </script>
 
 <style lang="postcss">

src/components/dialog.vue → src/components/ModalLayoutDialog.vue

@@ -14,12 +14,26 @@
   </modal-layout>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+
+import { Button } from 'types'
+
+export default Vue.extend({
   props: {
-    title: String,
-    message: String,
-    buttons: Array,
+    title: {
+      type: String,
+      default: ''
+    },
+
+    message: {
+      type: String,
+      default: ''
+    },
+
+    buttons: {
+      type: Array as PropType<Button[]>
+    }
   },
 
   mounted() {
@@ -29,17 +43,17 @@ export default {
       buttons[buttons.length - 1].focus()
     }
   }
-}
+})
 </script>
 
 <style lang="postcss">
 .ModalLayoutDialog__buttons {
   text-align: right;
   margin-top: 1rem;
-}
 
-.ModalLayoutDialog__buttonWrapper + .ModalLayoutDialog__buttonWrapper {
-  margin-left: .5rem;
+  & > * + * {
+    margin-left: .5rem;
+  }
 }
 </style>
 

src/components/modal-stack.vue → src/components/ModalStack.vue

@@ -19,8 +19,11 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+import { Modal, ModalRecord } from 'types'
+
+export default Vue.extend({
   name: "modal-stack",
 
   props: {
@@ -31,27 +34,27 @@ export default {
 
   data() {
     return {
-      sequence: 1,
-      modals: []
+      sequence: 1 as number,
+      modals: [] as ModalRecord[]
     }
   },
 
   computed: {
-    topModal() {
+    topModal(): ModalRecord | null {
       return this.modals.length ? this.modals[this.modals.length - 1] : null
     }
   },
 
   methods: {
-    open(modal) {
-      document.activeElement && document.activeElement.blur()
+    open(modal: Modal) {
+      (document.activeElement as HTMLElement)?.blur()
 
       this.modals.push({
         ...modal, id: this.sequence++
       })
     },
 
-    close(modal, result = undefined) {
+    close(modal: ModalRecord, result: any = undefined) {
       if (!this.modals.find(({id}) => id === modal.id)) {
         return
       }
@@ -71,24 +74,26 @@ export default {
     },
 
     closeTop() {
-      this.close(this.topModal)
+      if (this.topModal) {
+        this.close(this.topModal)
+      }
     },
 
-    closeByEscKey(e) {
+    closeByEscKey(e: KeyboardEvent) {
       if (this.topModal && e.key === "Escape" && !e.defaultPrevented) {
         e.preventDefault()
         this.closeTop()
       }
     },
 
-    closeByBackdropClick(e, modal) {
+    closeByBackdropClick(e: MouseEvent, modal: ModalRecord) {
       if (e.target === e.currentTarget) {
         this.close(modal)
       }
     },
 
-    _getModalInstance(modal) {
-      return this.$refs[`modal_${modal.id}`][0].$children[0]
+    _getModalInstance(modal: ModalRecord) {
+      return (this.$refs[`modal_${modal.id}`] as any) [0].$children[0]
     }
   },
 
@@ -109,7 +114,7 @@ export default {
     this.$root.$off("LastModal.close", this.close)
     this.$root.$off("LastModal.closeTop", this.closeTop)
   }
-}
+})
 </script>
 
 <style lang="postcss">