customization ui via slot options

HELMAB · HELMAB · commit 5a3f74e3a6f9 · 2020-06-30T17:22:00.000+07:00
diff --git a/README.md b/README.md
@@ -63,3 +63,4 @@ Vue.use(loading, {
 | icon      | `deault: 'spinner'`      |   : support font-awesome |
 | size | `default: '3'`      |    : {1, 2, 3, 4, 5} string |
 | icon_color | `default: '#ffffff'`      |    : color string |
+| slot | `default: font-awesome`      |    : raw html |
diff --git a/index.js b/index.js
@@ -30,6 +30,9 @@ export default {
                     if (options.hasOwnProperty('icon_color')) {
                         vm.icon_color = options.icon_color
                     }
+                    if (options.hasOwnProperty('slot')) {
+                        vm.slot = options.slot
+                    }
                 }
             }
         })
diff --git a/index.vue b/index.vue
@@ -2,9 +2,14 @@
     <div class="loading"
          :style="`background-color: ${bg};`"
          v-show="isLoading">
-        <i :class="`fa fa-${icon} fa-pulse fa-${size}x fa-fw`"
-           :style="`color: ${icon_color}`"></i>
-        <span class="sr-only">Loading...</span>
+        <template v-if="slot">
+            <div v-html="slot"></div>
+        </template>
+        <template v-else>
+            <i :class="`fa fa-${icon} fa-pulse fa-${size}x fa-fw`"
+               :style="`color: ${icon_color}`"></i>
+            <span class="sr-only">Loading...</span>
+        </template>
     </div>
 </template>
 
@@ -18,6 +23,7 @@
                 icon: 'spinner',
                 size: '3',
                 icon_color: '#ffffff',
+                slot: null,
             }
         },
         methods: {
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vuejs-loading-screen",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Blocking screen while process worked",
   "main": "index.js",
   "scripts": {

Original file line number	Diff line number	Diff line change
`@@ -30,6 +30,9 @@ export default {`
`30`	`30`	`if (options.hasOwnProperty('icon_color')) {`
`31`	`31`	`vm.icon_color = options.icon_color`
`32`	`32`	`}`
	`33`	`+ if (options.hasOwnProperty('slot')) {`
	`34`	`+ vm.slot = options.slot`
	`35`	`+ }`
`33`	`36`	`}`
`34`	`37`	`}`
`35`	`38`	`})`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vuejs-loading-screen",`
`3`		`- "version": "1.0.7",`
	`3`	`+ "version": "1.0.8",`
`4`	`4`	`"description": "Blocking screen while process worked",`
`5`	`5`	`"main": "index.js",`
`6`	`6`	`"scripts": {`