PygmySlowLoris · twhtanghk · Apr 16, 2018 · Apr 16, 2018 · Apr 19, 2018 · Apr 19, 2018
diff --git a/.babelrc b/.babelrc
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ Floating Action Button for Vue.
 
 The component supports multiple action buttons so you can add as many actions as you need. It will fire an event to the parent when clicking on each one. 
 
-<a href="https://pygmyslowloris.github.io/vue-fab/"> Live Demo</a>
+<a href="https://rawgit.com/twhtanghk/vue-fab/master/dist/index.html"> Live Demo</a>
 
 ##  Installation
 
@@ -54,6 +54,7 @@ And
 |  `icon`               | String    | Icon name (Please refer to [Material icons](https://material.io/icons/))        |
 |  `tooltip`            | String    | If not used, tooltip won't appear.  |
 |  `color`              | String    | <b>Default `bg-color` value</b><br> Accepts all color formats: HEX, RGB & RGBA  |
+|  `slot`          | String    | Slot with name 'icon' to replace the default material icon
 
 ##  Examples
 

diff --git a/demo/App.vue b/demo/App.vue
@@ -195,14 +195,21 @@
                 :bg-color="colors.hex"
                 :main-icon="mainIcon"
                 :main-tooltip="mainTooltip"
-                :actions="[{name: 'alertMe',icon: firstIcon, tooltip: firstTooltip, color:'#d11014'},{name: 'alertMe',icon: secondIcon, tooltip: secondTooltip}]"
+                :actions="[{name: 'alertMe',icon: firstIcon, tooltip: firstTooltip, color:'#d11014'},{name: 'alertMe',icon: secondIcon, tooltip: secondTooltip},{name: 'alertMe', icon: 'file_upload', tooltip: 'Upload'}]"
                 @alertMe="alert"
                 :fixed-tooltip="fixedTooltip"
-        ></fab>
+        >
+          <template slot='icon' slot-scope='{action}' v-if='action.tooltip == "Upload"'>
+            <upload :action='action' />
+          </template>
+        </fab>
     </div>
 </template>
 
 <script>
+    import Vue from 'vue';
+    import upload from '../src/upload';
+    Vue.component('upload', upload);
     import FAB from '../src/FAB.vue';
     import {Chrome} from 'vue-color';
 
@@ -280,8 +287,15 @@
             }
         },
         methods: {
-            alert(){
-                alert('You have clicked me :)');
+            alert(files){
+                if (files != null) {
+                    let name = [];
+                    for (var i = 0; i < files.length; i++)
+                        name.push(files[i].name);
+                    alert(name.join());
+                }
+                else
+                  alert('You have clicked me :)');
             }
         }
     }

diff --git a/dist/build.js b/dist/build.js
diff --git a/dist/build.js.map b/dist/build.js.map
diff --git a/dist/css/app.5f98460d.css b/dist/css/app.5f98460d.css
diff --git a/dist/favicon.ico b/dist/favicon.ico
diff --git a/dist/logo.png → dist/img/logo.f582b9bd.png b/dist/logo.png → dist/img/logo.f582b9bd.png
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel="shortcut icon" href=favicon.ico><title>frontend</title><link as=style href=css/app.5f98460d.css rel=preload><link as=script href=js/app.cd24ec44.js rel=preload><link as=script href=js/chunk-vendors.9ee2700a.js rel=preload><link href=css/app.5f98460d.css rel=stylesheet></head><body><noscript><strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.9ee2700a.js></script><script src=js/app.cd24ec44.js></script></body></html>
diff --git a/dist/js/app.cd24ec44.js b/dist/js/app.cd24ec44.js
diff --git a/dist/js/app.cd24ec44.js.map b/dist/js/app.cd24ec44.js.map
diff --git a/dist/js/chunk-vendors.9ee2700a.js b/dist/js/chunk-vendors.9ee2700a.js
diff --git a/dist/js/chunk-vendors.9ee2700a.js.map b/dist/js/chunk-vendors.9ee2700a.js.map
diff --git a/index.html b/index.html
diff --git a/package.json b/package.json
@@ -29,28 +29,39 @@
   },
   "homepage": "https://github.com/PygmySlowLoris/vue-fab#readme",
   "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
-    "prepublish": "npm run build"
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "v-tooltip": "2.0.0-beta.1",
-    "vue": "^2.2.1",
+    "vue": "^2.5.13",
     "vue-clickaway": "^2.1.0",
     "vue-ripple-directive": "^1.0.0"
   },
   "devDependencies": {
-    "babel-core": "^6.0.0",
-    "babel-loader": "^6.0.0",
-    "babel-preset-latest": "^6.0.0",
-    "cross-env": "^3.0.0",
-    "css-loader": "^0.25.0",
-    "file-loader": "^0.9.0",
-    "url-loader": "^0.5.8",
-    "vue-color": "^2.0.9",
-    "vue-loader": "^11.1.4",
-    "vue-template-compiler": "^2.2.1",
-    "webpack": "^2.2.0",
-    "webpack-dev-server": "^2.2.0"
-  }
+    "@vue/cli-plugin-babel": "^3.0.0-beta.6",
+    "@vue/cli-service": "^3.0.0-beta.6",
+    "coffee-loader": "latest",
+    "coffeescript": "latest",
+    "node-sass": "^4.8.3",
+    "sass-loader": "^7.0.1",
+    "vue-color": "^2.4.6",
+    "vue-template-compiler": "^2.5.13"
+  },
+  "babel": {
+    "presets": [
+      "@vue/app"
+    ]
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
+    <title>frontend</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/FAB.vue b/src/FAB.vue
@@ -17,13 +17,17 @@
                                     v-tooltip="{ content: action.tooltip, placement: tooltipPosition, classes: 'fab-tooltip', trigger: tooltipTrigger}"
                                     @click="toParent(action.name)" class="pointer"
                                     ref="actions">
-                                    <i :class="[ actionIconSize ,'material-icons']">{{action.icon}}</i>
+                                    <slot name='icon' :action='action'>
+                                        <i :class="[ actionIconSize ,'material-icons']">{{action.icon}}</i>
+                                    </slot>
                                 </li>
                             </template>
                             <template v-else>
                                 <li v-if="toggle" :style="{ 'background-color': action.color || bgColor }"
                                     @click="toParent(action.name)" class="pointer">
-                                    <i :class="[ actionIconSize ,'material-icons']">{{action.icon}}</i>
+                                    <slot name='icon' :action='action'>
+                                        <i :class="[ actionIconSize ,'material-icons']">{{action.icon}}</i>
+                                    </slot>
                                 </li>
                             </template>
                         </transition>
@@ -35,15 +39,15 @@
             <template v-if="mainTooltip">
                 <div v-ripple="rippleColor == 'light' ? 'rgba(255, 255, 255, 0.35)' : ''" @click="toggle = !toggle"
                      v-tooltip="{ content: mainTooltip, placement: tooltipPosition, classes: 'fab-tooltip' }"
-                     class="fab pointer" :style="{ 'background-color': bgColor, 'padding': paddingAmount }"
+                     class="fab-main pointer" :style="{ 'background-color': bgColor, 'padding': paddingAmount }"
                 >
                     <i :class="[ mainIconSize , { rotate: toggle } ,'material-icons main']">{{mainIcon}}</i>
                     <i :class="[ mainIconSize , { rotate: toggle } ,'material-icons close']">add</i>
                 </div>
             </template>
             <template v-else>
                 <div v-ripple="rippleColor == 'light' ? 'rgba(255, 255, 255, 0.35)' : ''" @click="toggle = !toggle"
-                     class="fab pointer" :style="{ 'background-color': bgColor, 'padding': paddingAmount }"
+                     class="fab-main pointer" :style="{ 'background-color': bgColor, 'padding': paddingAmount }"
                 >
                     <i :class="[ mainIconSize , { rotate: toggle }, 'material-icons main']">{{mainIcon}}</i>
                     <i :class="[ mainIconSize , { rotate: toggle }, 'material-icons close']">add</i>
@@ -53,14 +57,14 @@
         <template v-else>
             <template v-if="mainTooltip">
                 <div v-bind:v-tooltip="{ content: mainTooltip, placement: tooltipPosition, classes: 'fab-tooltip'}"
-                     class="fab pointer" :style="{ 'background-color': bgColor, 'padding': paddingAmount }"
+                     class="fab-main pointer" :style="{ 'background-color': bgColor, 'padding': paddingAmount }"
                 >
                     <i class="material-icons md-36 main" :class="{ rotate: toggle }">{{mainIcon}}</i>
                     <i class="material-icons md-36 close" :class="{ rotate: toggle }">add</i>
                 </div>
             </template>
             <template v-else>
-                <div class="fab pointer" :style="{ 'background-color': bgColor, 'padding': paddingAmount }"
+                <div class="fab-main pointer" :style="{ 'background-color': bgColor, 'padding': paddingAmount }"
                 >
                     <i class="material-icons md-36 main" :class="{ rotate: toggle }">{{mainIcon}}</i>
                     <i class="material-icons md-36 close" :class="{ rotate: toggle }">add</i>
@@ -340,7 +344,7 @@
         z-index: 999;
     }
 
-    .fab {
+    .fab-main {
         border-radius: 100px;
         /*width: 65px;*/
         /*height: 65px;*/
@@ -354,25 +358,25 @@
         justify-content: center;
     }
 
-    .fab .material-icons {
+    .fab-main .material-icons {
         color: white;
         -webkit-transition: .4s all;
         -moz-transition: .4s all;
         transition: .4s all;
         margin: 0px auto;
     }
 
-    .fab .material-icons.main {
+    .fab-main .material-icons.main {
         opacity: 1;
         position: absolute;
     }
 
-    .fab .material-icons.close {
+    .fab-main .material-icons.close {
         opacity: 0;
         position: absolute;
     }
 
-    .fab .material-icons.main.rotate {
+    .fab-main .material-icons.main.rotate {
         -ms-transform: rotate(315deg); /* IE 9 */
         -webkit-transform: rotate(315deg); /* Chrome, Safari, Opera */
         transform: rotate(315deg);
@@ -381,7 +385,7 @@
         transition: opacity .3s ease-in, transform .4s;
     }
 
-    .fab .material-icons.close.rotate {
+    .fab-main .material-icons.close.rotate {
         -ms-transform: rotate(315deg); /* IE 9 */
         -webkit-transform: rotate(315deg); /* Chrome, Safari, Opera */
         transform: rotate(315deg);
@@ -480,13 +484,13 @@
             /*font-size: 24px !important;*/
         }
 
-        .fab {
+        .fab-main {
             /*width: 55px;*/
             /*height: 55px;*/
             /*padding: 1.5rem;*/
         }
 
-        .fab i {
+        .fab-main i {
             /*font-size: 34px !important;*/
         }
 

diff --git a/src/upload.vue b/src/upload.vue
@@ -0,0 +1,57 @@
+<template>
+  <label :class="[ $parent.actionIconSize, 'material-icons' ]" @click.stop >
+    <i :class="[ $parent.actionIconSize, 'material-icons' ]">{{action.icon}}</i>
+    <input type='file' @change='change' multiple hidden />
+  </label>
+</template>
+
+<script lang='coffee'>
+export default
+  props: [ 'action' ]
+  methods:
+    change: (event) ->
+      @$parent.$emit @action.name,  event.target.files
+      @$parent.toggle = false
+</script>
+
+<style lang='scss' scoped>
+@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
+
+.fab-list li .material-icons {
+  color: white;
+}
+
+label {
+  cursor: inherit;
+  margin: 0;
+  i {
+    vertical-align: middle;
+    font-size: inherit;
+  }
+}
+
+label.md-18 {
+  height: 18px;
+  width: 18px;
+  font-size: 18px;
+}
+
+label.md-24 {
+  height: 24px;
+  width: 24px;
+  font-size: 24px;
+}
+
+label.md-36 {
+  height: 36px;
+  width: 36px;
+  font-size: 36px;
+}
+
+i.md-36.material-icons {
+    left: 14px;
+    right: 14px;
+    top: 14px;
+    bottom: 14px;
+}
+</style>
diff --git a/vue.config.coffee b/vue.config.coffee
@@ -0,0 +1,14 @@
+module.exports =
+  configureWebpack: (config) ->
+    config.entry =
+      app: [
+        './demo/main.js'
+        './demo/assets/logo.png'
+      ]
+    if process.env.NODE_ENV == 'production'
+      config.output.publicPath = ''
+    config.module.rules
+      .push
+        test: /\.coffee$/
+        use: [ 'babel-loader', 'coffee-loader' ]
+    return
diff --git a/vue.config.js b/vue.config.js
@@ -0,0 +1,2 @@
+require('coffeescript/register');
+module.exports = require("./vue.config.coffee");
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!DOCTYPE html><html><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel="shortcut icon" href=favicon.ico><title>frontend</title><link as=style href=css/app.5f98460d.css rel=preload><link as=script href=js/app.cd24ec44.js rel=preload><link as=script href=js/chunk-vendors.9ee2700a.js rel=preload><link href=css/app.5f98460d.css rel=stylesheet></head><body><noscript><strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.9ee2700a.js></script><script src=js/app.cd24ec44.js></script></body></html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		require('coffeescript/register');
		module.exports = require("./vue.config.coffee");