Added node server and demo example.

Edujugon · Edujugon · commit 64438e610925 · 2017-05-03T11:13:33.000+02:00
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,7 @@
+{
+  "presets": [
+    ["latest", {
+      "es2015": { "modules": false }
+    }]
+  ]
+}
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,6 @@
-node_modules
+.DS_Store
+node_modules/
+dist/
 npm-debug.log
-.idea
-.DS_Store
+yarn-error.log
+.idea
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,4 @@
+node_modules
+.idea
+.DS_Store
+dist
diff --git a/LICENSE.txt b/LICENSE.txt
diff --git a/demo/App.vue b/demo/App.vue
@@ -0,0 +1,72 @@
+<template>
+    <div id="app">
+        <img width="400px" src="./assets/logo.png">
+        <h1></h1>
+        <h2>Floating Action Button</h2>
+        <fab :styles="fabStyles"
+             :actions="fabActions"
+             @cache="cache"
+             @alertMe="alert"
+        ></fab>
+    </div>
+</template>
+
+<script>
+    import FAB from '../src/FAB.vue';
+    export default {
+        name: 'app',
+        components: {
+            fab: FAB
+        },
+        data(){
+            return {
+                fabStyles: {
+                    bgColor: '#778899'
+                },
+                fabActions: [
+                    {
+                        name: 'cache',
+                        icon: 'cached'
+                    },
+                    {
+                        name: 'alertMe',
+                        icon: 'add_alert'
+                    }
+                ]
+            }
+        },
+        methods: {
+            cache(){
+                console.log('Cache Cleared');
+            },
+            alert(){
+                alert('Clicked on alert icon');
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    #app {
+        font-family: 'Avenir', Helvetica, Arial, sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        text-align: center;
+        color: #2c3e50;
+        margin-top: 60px;
+    }
+
+    h1, h2 {
+        font-weight: normal;
+    }
+
+
+    li {
+        display: inline-block;
+        margin: 0 10px;
+    }
+
+    a {
+        color: #42b983;
+    }
+</style>
diff --git a/demo/assets/logo.png b/demo/assets/logo.png
diff --git a/demo/main.js b/demo/main.js
@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+new Vue({
+  el: '#app',
+  render: h => h(App)
+})
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
+    <title>vue-fab</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="./dist/build.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -1,11 +1,8 @@
 {
   "name": "vue-fab",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "Vue Floating Action Button",
   "main": "src/index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/PygmySlowLoris/vue-fab"
@@ -31,8 +28,24 @@
     "url": "https://github.com/PygmySlowLoris/vue-fab/issues"
   },
   "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"
+  },
   "dependencies": {
-    "vue": "^2.2.6",
+    "vue": "^2.2.1",
     "vue-clickaway": "^2.1.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",
+    "vue-loader": "^11.1.4",
+    "vue-template-compiler": "^2.2.1",
+    "webpack": "^2.2.0",
+    "webpack-dev-server": "^2.2.0"
   }
 }
diff --git a/src/FAB.vue b/src/FAB.vue
@@ -181,8 +181,9 @@
         cursor: pointer;
     }
 
-    .fab ul {
-        padding: 0;
+    ul {
+        list-style-type: none;
+        padding: 0 !important;
     }
 
     .fab-wrapper .actions-container {
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,70 @@
+var path = require('path')
+var webpack = require('webpack')
+
+module.exports = {
+  entry: './demo/main.js',
+  output: {
+    path: path.resolve(__dirname, './dist'),
+    publicPath: '/dist/',
+    filename: 'build.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+          }
+          // other vue-loader options go here
+        }
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/
+      },
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]?[hash]'
+        }
+      }
+    ]
+  },
+  resolve: {
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js'
+    }
+  },
+  devServer: {
+    historyApiFallback: true,
+    noInfo: true
+  },
+  performance: {
+    hints: false
+  },
+  devtool: '#eval-source-map'
+}
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports.devtool = '#source-map'
+  // http://vue-loader.vuejs.org/en/workflow/production.html
+  module.exports.plugins = (module.exports.plugins || []).concat([
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"'
+      }
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      sourceMap: true,
+      compress: {
+        warnings: false
+      }
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true
+    })
+  ])
+}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +node_modules
 +.idea
 +.DS_Store
 +dist
Original file line number	Diff line number	Diff line change
`@@ -181,8 +181,9 @@`
`181`	`181`	`cursor: pointer;`
`182`	`182`	`}`
`183`	`183`
`184`		`- .fab ul {`
`185`		`- padding: 0;`
	`184`	`+ ul {`
	`185`	`+ list-style-type: none;`
	`186`	`+ padding: 0 !important;`
`186`	`187`	`}`
`187`	`188`
`188`	`189`	`.fab-wrapper .actions-container {`