Merge pull request #10 from MahdiFakhr/master

Update to 0.3.0
mediv0 · Jun 16, 2020 · b5e5105 · b5e5105
2 parents 733ab52 + 60c515a
commit b5e5105
Show file tree

Hide file tree

Showing 8 changed files with 685 additions and 699 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # CHANGELOG.md
 
+## 0.3.0 (released)
+
+Features:
+
+  - add import() keyword for importing components
+
+
 ## 0.2.0 (released)
 
 Features:

diff --git a/README.md b/README.md
@@ -173,8 +173,10 @@ export default {
 ```
 # Params prop options
 
-- ##### components
+- ##### component
 You need to pass a reference of your component to modal. In that way, modal can render your component on the page.
+
+*import components using require()*
 ```javascript
 params: {
 	// you have to require it like this !
@@ -184,6 +186,15 @@ params: {
 **🔴 Don't forget to add .default to the end of your require function. If you don't put .default at the end of require, xmodal can't render your component and show it on the page!!**
 
 
+*import components using import()*
+also you can use import() method to import your components. with this method you don't need .default keyword at the end of component property
+```javascript
+params: {
+	// you have to import it like this !
+	component: import("./components/no.vue"),
+}
+```
+
 ------------
 
 

diff --git a/build/rollup.config.js b/build/rollup.config.js
@@ -23,7 +23,11 @@ const baseConfig = {
                 isProduction: false
             }
         },
-        postVue: [buble()]
+        postVue: [
+            buble({
+                transforms: { asyncAwait: false }
+            })
+        ]
     }
 };
 

diff --git a/examples/example.vue b/examples/example.vue
@@ -1,6 +1,7 @@
 <template>
     <div>
         <button @click="isModalOpen = !isModalOpen">open</button>
+        <button @click="open">open with global functions</button>
         <xmodal v-model="isModalOpen" :params="options" />
     </div>
 </template>
@@ -16,7 +17,7 @@ export default {
         return {
             isModalOpen: false,
             options: {
-                component: require("./modal.vue").default,
+                component: import("./modal.vue"),
                 backgroundColor: "#000000",
                 opacity: "0.7",
                 mounted: this.modalOpen,
@@ -30,6 +31,13 @@ export default {
         },
         modalClose() {
             console.log("modals closed");
+        },
+        open() {
+            console.log("opening");
+            this.$xmodal.open({
+                component: require("./modal2.vue").default,
+                backgroundColor: "#0ffddd"
+            });
         }
     }
 };

diff --git a/examples/modal2.vue b/examples/modal2.vue
@@ -0,0 +1,16 @@
+<template>
+    <div class="modal">test modal2</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped>
+.modal {
+    width: 100px;
+    height: 500px;
+    background: green;
+    border-radius: 50px;
+}
+</style>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "xmodal-vue",
-    "version": "0.2.0",
+    "version": "0.3.0",
     "private": false,
     "description": "🚀 a simplistic and easy to use wrapper around your components that will help you create custom modals, from your components",
     "author": "Mahdi Fakhr",
@@ -42,7 +42,7 @@
         "vue-template-compiler": "^2.6.11"
     },
     "peerDependencies": {
-        "vue": "^2.2.6"
+        "vue": "^2.6.11"
     },
     "husky": {
         "hooks": {

diff --git a/src/wrapper.vue b/src/wrapper.vue
@@ -64,16 +64,6 @@ export default {
             }
             this.isModalOpen = false;
         },
-        clearProps(data) {
-            let truthyProps = Object.assign({}, data);
-
-            for (let prop in this.reducedXdata) {
-                if (!this.truthyProps[prop]) {
-                    delete this.truthyProps[prop];
-                }
-            }
-            return truthyProps;
-        },
         modalMounted() {
             // refactor later
             if (this.modalParams.mounted) {
@@ -88,26 +78,35 @@ export default {
             if (this.modalCloseCallBackFromEvent) {
                 this.modalCloseCallBackFromEvent();
             }
+        },
+        async isComponentImported(params = this.params) {
+            if (typeof params.component.then == "function") {
+                await params.component.then(value => {
+                    params.component = value.default;
+                });
+            }
         }
     },
     watch: {
         value(newVal) {
             if (newVal) {
                 this.isBind = true;
                 this.modalParams = Object.assign({}, this.cached);
-
                 this.isModalOpen = true;
             }
         }
     },
     beforeMount() {
         // INITILIZE PROPS
-        this.cached = Object.assign({}, this.params);
         if (this.params.component) {
-            this.modalParams = this.clearProps(this.params);
+            // check if user used import() keyword
+            this.isComponentImported().then(() => {
+                this.modalParams = this.params;
+                this.cached = Object.assign({}, this.params);
+            });
         } else {
             throw new Error(
-                `Please provide a component. check component's path and try again`
+                `Please provide a component. check component's path and try again, 404 component not found`
             );
         }
 
@@ -118,12 +117,10 @@ export default {
         });
         events.$on("open", params => {
             this.isBind = false;
-            if (typeof params === "object") {
-                params = this.clearProps(params);
-            }
-            this.modalParams = Object.assign({}, this.cached, params);
-
-            this.isModalOpen = true;
+            this.isComponentImported(params).then(() => {
+                this.modalParams = Object.assign({}, this.cached, params);
+                this.isModalOpen = true;
+            });
         });
     }
 };