Create shared component

package-lock.json

@@ -1332,6 +1332,12 @@
             "yallist": "^2.1.2"
           }
         },
+        "prettier": {
+          "version": "1.16.3",
+          "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.16.3.tgz",
+          "integrity": "sha512-kn/GU6SMRYPxUakNXhpP0EedT/KmaPzr0H5lIsDogrykbaxOpOfAFfk5XA7DZrJyMAv1wlMV3CPcZruGXVVUZw==",
+          "dev": true
+        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -4277,6 +4283,15 @@
         }
       }
     },
+    "eslint-config-prettier": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-4.1.0.tgz",
+      "integrity": "sha512-zILwX9/Ocz4SV2vX7ox85AsrAgXV3f2o2gpIicdMIOra48WYqgUnWNH/cR/iHtmD2Vb3dLSC3LiEJnS05Gkw7w==",
+      "dev": true,
+      "requires": {
+        "get-stdin": "^6.0.0"
+      }
+    },
     "eslint-loader": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/eslint-loader/-/eslint-loader-2.1.2.tgz",
@@ -4290,6 +4305,15 @@
         "rimraf": "^2.6.1"
       }
     },
+    "eslint-plugin-prettier": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.0.1.tgz",
+      "integrity": "sha512-/PMttrarPAY78PLvV3xfWibMOdMDl57hmlQ2XqFeA37wd+CJ7WSxV7txqjVPHi/AAFKd2lX0ZqfsOc/i5yFCSQ==",
+      "dev": true,
+      "requires": {
+        "prettier-linter-helpers": "^1.0.0"
+      }
+    },
     "eslint-plugin-vue": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-5.2.2.tgz",
@@ -4686,6 +4710,12 @@
       "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
       "dev": true
     },
+    "fast-diff": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
+      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
+      "dev": true
+    },
     "fast-glob": {
       "version": "2.2.6",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.6.tgz",
@@ -5536,6 +5566,12 @@
       "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==",
       "dev": true
     },
+    "get-stdin": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz",
+      "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==",
+      "dev": true
+    },
     "get-stream": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
@@ -8494,11 +8530,20 @@
       "dev": true
     },
     "prettier": {
-      "version": "1.16.3",
+      "version": "1.16.4",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.16.3.tgz",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.16.4.tgz",
-      "integrity": "sha512-kn/GU6SMRYPxUakNXhpP0EedT/KmaPzr0H5lIsDogrykbaxOpOfAFfk5XA7DZrJyMAv1wlMV3CPcZruGXVVUZw==",
+      "integrity": "sha512-ZzWuos7TI5CKUeQAtFd6Zhm2s6EpAD/ZLApIhsF9pRvRtM1RFo61dM/4MSRUA0SuLugA/zgrZD8m0BaY46Og7g==",
       "dev": true
     },
+    "prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "requires": {
+        "fast-diff": "^1.1.2"
+      }
+    },
     "pretty-error": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.1.tgz",

package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "build-bundle": "vue-cli-service build --target lib --name myLib ./src/components/index.js"
   },
   "dependencies": {
     "vue": "^2.6.6"
@@ -16,7 +17,10 @@
     "@vue/cli-service": "^3.5.0",
     "babel-eslint": "^10.0.1",
     "eslint": "^5.8.0",
+    "eslint-config-prettier": "^4.1.0",
+    "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-vue": "^5.0.0",
+    "prettier": "^1.16.4",
     "vue-template-compiler": "^2.5.21"
   },
   "eslintConfig": {
@@ -26,7 +30,8 @@
     },
     "extends": [
       "plugin:vue/essential",
-      "eslint:recommended"
+      "eslint:recommended",
+      "prettier/vue"
     ],
     "rules": {},
     "parserOptions": {

src/App.vue

@@ -1,24 +1,23 @@
 <template>
-  <div id="app">
+  <div class="share-buttons">
-    <img alt="Vue logo" src="./assets/logo.png">
+    <twitter-button class="button-social--twitter" btnText="Twitter" pageUrl hasIcon></twitter-button>
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import TwitterButton from "./components/TwitterButton";
 
 export default {
-  name: 'app',
+  name: "app-share-buttons",
   components: {
-    HelloWorld
+    TwitterButton
   }
-}
+};
 </script>
 
 <style>
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/TwitterButton.vue

@@ -0,0 +1,33 @@
+<template>
+  <button class="share-button" :class="className" @click="openShareWindow">
+    <i class="share-button__icon">123</i>
+    <span class="share-button__text" v-if="btnText">{{btnText}}</span>
+  </button>
+</template>
+ 
+<script>
+import { getDocumentHref, eventEmit } from "../helpers";
+export default {
+  name: "twitter-button",
+  props: {
+    className: { type: String },
+    pageUrl: { type: String, deflate: getDocumentHref },
+    btnText: { type: String, default: "Twitter" },
+    hasIcon: { type: Boolean, default: true }
+  },
+  methods: {
+    openShareWindow: function() {
+      console.log(eventEmit(this, { name: "qwee" }));
+      const url =
+        "https://twitter.com/share?url=https://vuejs.org/&text=Super-test";
+      // return window.open(url, "__blank");
+      return window.open(
+        url,
+        "Share this",
+        "width=500,height=700,left=100,top=200,toolbar=no,menubar=no,scrollbars=no"
+      );
+    }
+  }
+};
+</script>
+

src/helpers/event.js

@@ -0,0 +1,8 @@
+/**
+ * Trigger an event.
+ *
+ * @param {object} vm - VueComponent.
+ * @param {object} option - Custom options.
+ * @return {object} - Event.
+ */
+export const eventEmit = (vm, option) => vm.$emit("onClick", { ...option });

src/helpers/href.js

@@ -0,0 +1,6 @@
+/**
+ * Get href for page.
+ *
+ * @returns {string} - page href.
+ */
+export const getDocumentHref = () => document.location.href;

src/helpers/index.js

@@ -0,0 +1,2 @@
+export { getDocumentHref } from "./href.js";
+export { eventEmit } from "./event";