no extra call for css

src/components/Whoosh/Constant.ts

@@ -0,0 +1,10 @@
+export const status = {
+  success: "success",
+  warning: "warn",
+  error: "error"
+}
+
+export const DEFAULT_WIDTH = 500
+export const DEFAULT_HEIGHT = 200
+
+export const MARGIN_GAP = 10

src/components/Whoosh/Util.ts

@@ -0,0 +1,29 @@
+import {status} from '../types/index'
+export const generateId = (i => () => i++)(0)
+
+export const isCustomStatusesDefined = (statuses?: Array<status>) =>{
+    return Array.isArray(statuses) && statuses.length
+  }
+
+
+export class TimerCup {
+    public cancel: Function;
+    public pause: Function;
+    public resume: Function;
+    constructor(fn: Function, countdown: number) {
+        let timerId: number, start: number, remaining = countdown;
+        this.cancel = function () {
+            window.clearTimeout(timerId);
+        };
+        this.pause = function () {
+            window.clearTimeout(timerId);
+            remaining -= Date.now() - start;
+        };
+        this.resume = function () {
+            start = Date.now();
+            window.clearTimeout(timerId);
+            timerId = window.setTimeout(fn, remaining);
+        };
+        this.resume();
+    }
+}

src/components/Whoosh/events.ts

@@ -0,0 +1,5 @@
+import Vue from 'vue'
+
+export const events = new Vue({
+  name: 'Whoosh'
+})

src/components/index.ts

@@ -0,0 +1,31 @@
+import ButtonField from './ButtonField.vue'
+import Whoosh from './Whoosh/Whoosh.vue'
+import {
+  events
+} from './Whoosh/events'
+import {isCustomStatusesDefined} from './Whoosh/Util'
+import {CardContent,WhooshOptions} from './types/index'
+const WhooshOn = {
+  install(Vue: any, options: WhooshOptions = {}) {
+    //this.params = args
+
+    Vue.component('ButtonField', ButtonField)
+    Vue.component('Whoosh', Whoosh)
+
+
+    Vue.prototype.$whoosh = (params: CardContent) => {
+      isCustomStatusesDefined(options.statuses) ? params.statuses = options.statuses : null;
+      events.$emit('startWhoosh', params)
+    }
+  }
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+  window.Vue.use(WhooshOn)
+}
+
+export default WhooshOn
+export {
+  ButtonField,
+  Whoosh
+}

src/components/types/index.ts

@@ -0,0 +1,26 @@
+// eslint-disable-next-line @typescript-eslint/class-name-casing
+export interface status {
+    name: string; 
+    color: string;
+}
+
+export interface TimerType  {
+    pause: Function;
+    resume: Function;
+}
+export type WhooshOptions ={
+    statuses?: Array<status>;
+}
+export type CardContent={
+    id: number;
+    statuses?: Array<status>;
+    status?: string;
+    duration?: number;
+    title?: string;
+    message?: string;
+    size?: {
+        width: number;
+        height: number;
+    };
+
+}

src/main.ts

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')

src/shims-tsx.d.ts

@@ -0,0 +1,13 @@
+import Vue, { VNode } from "vue";
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
+  }
+}

src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module "*.vue" {
+    import Vue from "vue";
+    export default Vue;
+}
+

tsconfig.json

@@ -0,0 +1,40 @@
+{
+    "compilerOptions": {
+      "target": "esnext",
+      "module": "esnext",
+      "strict": true,
+      "jsx": "preserve",
+      "importHelpers": true,
+      "moduleResolution": "node",
+      "experimentalDecorators": true,
+      "esModuleInterop": true,
+      "allowSyntheticDefaultImports": true,
+      "sourceMap": true,
+      "baseUrl": ".",
+      "types": [
+        "webpack-env"
+      ],
+      "paths": {
+        "@/*": [
+          "src/*"
+        ]
+      },
+      "lib": [
+        "esnext",
+        "dom",
+        "dom.iterable",
+        "scripthost"
+      ]
+    },
+    "include": [
+      "src/**/*.ts",
+      "src/**/*.tsx",
+      "src/**/*.vue",
+      "tests/**/*.ts",
+      "tests/**/*.tsx"
+    ],
+    "exclude": [
+      "node_modules"
+    ]
+  }
+

vue.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  css: { extract: false }
+}