Merge pull request #66 from avil13/feature/html

Feature/html
avil13 · Jul 25, 2019 · 06b494f · 06b494f
2 parents 3951f7c + 7e1ec29
commit 06b494f
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 11 deletions.
diff --git a/example/package.json b/example/package.json
@@ -16,7 +16,7 @@
     "vue": "^2.6.10"
   },
   "devDependencies": {
-    "@babel/core": "^7.4.5",
+    "@babel/core": "^7.5.4",
     "babel-core": "^6.26.3",
     "babel-loader": "^8.0.6",
     "babel-preset-env": "^1.7.0",
@@ -27,13 +27,13 @@
     "gh-pages": "^2.0.1",
     "html-webpack-plugin": "^3.2.0",
     "ts-loader": "^6.0.4",
-    "typescript": "^3.5.2",
+    "typescript": "^3.5.3",
     "uglifyjs-webpack-plugin": "^2.1.3",
     "vue-class-component": "^7.1.0",
     "vue-loader": "^15.7.0",
     "vue-property-decorator": "^8.2.1",
     "vue-template-compiler": "^2.6.10",
-    "webpack": "^4.35.0",
+    "webpack": "^4.35.3",
     "webpack-cli": "^3.3.5",
     "webpack-dev-server": "^3.7.2"
   },

diff --git a/example/src/App.vue b/example/src/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="app" class="container">
-        <img src="./assets/logo.png" alt="vue sweetalert2" class="responsive">
+        <!-- <img src="./assets/logo.png" alt="vue sweetalert2" class="responsive"> -->
         <h1 class="h1">{{ msg }}</h1>
 
         <div class="row">
@@ -16,6 +16,9 @@
             <button @click="toastTopEnd" class="btn btn-outline-primary col s12 m3" type="button">
                 toast top end
             </button>
+            <button @click="alertHtmlTemplate" class="btn btn-outline-primary col s12 m3" type="button">
+                html & vue-component
+            </button>
         </div>
 
         <a href="https://sweetalert2.github.io" class="doc-link" target="_blank">Sweetalert2 documentation</a>
@@ -26,7 +29,13 @@
 // import Vue from 'vue';
 import { Component, Vue } from 'vue-property-decorator';
 
-@Component
+import TitleComponnet from './components/TitleComponnet.vue';
+
+@Component({
+    components: {
+        TitleComponnet
+    }
+})
 export default class AppComponent extends Vue {
     msg: string = 'Welcome to Vue-Sweetalert2 example'
 
@@ -62,6 +71,13 @@ export default class AppComponent extends Vue {
             text: 'is a good day!'
         });
     }
+
+    alertHtmlTemplate() {
+        this.$swal({
+            title: 'this is Vue component',
+            html: `<div> <title-componnet color="963">Component</title-componnet> </div>`
+        })
+    }
 // */
 }
 </script>

diff --git a/example/src/components/TitleComponnet.vue b/example/src/components/TitleComponnet.vue
@@ -0,0 +1,17 @@
+<template>
+<h1 :style="`color: #${color};`" >
+    <slot></slot>
+</h1>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component
+export default class TitleComponent extends Vue {
+    @Prop({
+        type: String
+    })
+    color!: string;
+}
+</script>
diff --git a/package.json b/package.json
@@ -38,7 +38,7 @@
     },
     "devDependencies": {
         "@types/jest": "^24.0.15",
-        "@types/node": "^12.0.10",
+        "@types/node": "^12.6.2",
         "@vue/eslint-config-typescript": "^4.0.0",
         "@vue/test-utils": "^1.0.0-beta.29",
         "babel-core": "^6.26.3",
@@ -49,14 +49,19 @@
         "babel-preset-vue": "^2.0.2",
         "eslint": "^6.0.1",
         "eslint-plugin-vue": "^5.2.3",
-        "husky": "^2.5.0",
+        "husky": "^3.0.0",
         "jest": "^24.8.0",
         "require-hacker": "^3.0.1",
         "ts-jest": "^24.0.2",
         "tslint": "^5.18.0",
-        "typescript": "^3.5.2",
+        "typescript": "^3.5.3",
         "vue": "^2.6.10",
         "vue-jest": "^3.0.4",
         "vue-template-compiler": "^2.6.10"
+    },
+    "nodemonConfig": {
+        "watch": ["src"],
+        "exec": "npm run prepublish",
+        "delay": 2500
     }
 }
diff --git a/src/index.ts b/src/index.ts
@@ -21,13 +21,15 @@ interface VueSweetalert2Options extends SweetAlertOptions {
 
 class VueSweetalert2 {
     static install(vue: Vue | any, options?: VueSweetalert2Options): void {
-        const _swal = (...args: [SweetAlertOptions]) => {
+        function _swal(...args: [SweetAlertOptions]) {
+            args = prepareArgs.call(this, args) as [SweetAlertOptions];
+
             if (options) {
                 const mixed = Swal.mixin(options);
-                return  mixed.fire.apply(mixed, args);
+                return mixed.fire.apply(mixed, args);
             }
             return Swal.fire.apply(Swal, args);
-        };
+        }
 
         for (let k in Swal) {
             if (Swal.hasOwnProperty(k) && typeof Swal[k] === 'function') {
@@ -46,4 +48,20 @@ class VueSweetalert2 {
     }
 }
 
+function prepareArgs(args: SweetAlertOptions[]): SweetAlertOptions[] {
+    return args.map(item => {
+        //  this.$options.components
+        // https://github.com/alexjoverm/v-runtime-template/blob/master/index.js#L34-L53
+
+        if (item.html) {
+            // const comp = createComp.call(this, this.$createElement, item.html);
+            const el = Vue.compile(item.html as string);
+            console.log(el, this);
+
+            debugger;
+        }
+        return item;
+    });
+}
+
 export default VueSweetalert2;