MyEtherWallet · gesseekur · Mar 9, 2020 · Jan 21, 2020 · Mar 6, 2020 · Mar 9, 2020
diff --git a/.gitignore b/.gitignore
@@ -59,3 +59,6 @@ typings/
 
 # next.js build output
 .next
+
+
+dist/
diff --git a/build/rollup.config.js b/build/rollup.config.js
@@ -0,0 +1,19 @@
+import commonjs from "rollup-plugin-commonjs"; // Convert CommonJS modules to ES6
+import vue from "rollup-plugin-vue"; // Handle .vue SFC files
+import buble from "rollup-plugin-buble"; // Transpile/polyfill with reasonable browser support
+
+export default {
+  input: "src/wrapper.js", // Path relative to package.json
+  output: {
+    name: "MewButton",
+    exports: "named"
+  },
+  plugins: [
+    commonjs(),
+    vue({
+      css: true, // Dynamically inject css as a <style> tag
+      compileTemplate: true // Explicitly convert template to render function
+    }),
+    buble() // Transpile to ES5
+  ]
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,11 +1,20 @@
 {
-  "name": "mew-components",
-  "version": "0.1.0",
-  "private": true,
+  "name": "@myetherwallet/mew-components",
+  "version": "0.1.0-beta",
+  "main": "dist/my-component.umd.js",
+  "module": "dist/my-component.esm.js",
+  "unpkg": "dist/my-component.min.js",
+  "browser": {
+    "./sfc": "src/my-component.vue"
+  },
+  "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "build": "npm run build:umd & npm run build:es & npm run build:unpkg",
+    "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/my-component.umd.js",
+    "build:es": "rollup --config build/rollup.config.js --format es --file dist/my-component.esm.js",
+    "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/my-component.min.js"
   },
   "dependencies": {
     "core-js": "^2.6.5",
@@ -24,6 +33,10 @@
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-vue": "^5.0.0",
     "prettier": "^1.18.2",
+    "rollup": "^1.17.0",
+    "rollup-plugin-buble": "^0.19.8",
+    "rollup-plugin-commonjs": "^10.0.1",
+    "rollup-plugin-vue": "^5.0.1",
     "sass": "^1.18.0",
     "sass-loader": "^7.1.0",
     "vue-cli-plugin-vuetify": "^0.6.3",

diff --git a/src/App.vue b/src/App.vue
@@ -26,7 +26,7 @@ export default {
 @import "@/global.scss";
 
 * {
-  color: $color--text--dark-sacramento;
+  color: var(--v-primaryText-base);
 }
 
 p {

diff --git a/src/components/Button/ButtonBlue.vue b/src/components/Button/ButtonBlue.vue
diff --git a/src/components/Button/ButtonBlueBorder.vue b/src/components/Button/ButtonBlueBorder.vue
diff --git a/src/components/Button/ButtonGreen.vue b/src/components/Button/ButtonGreen.vue
diff --git a/src/components/Button/ButtonGreenBorder.vue b/src/components/Button/ButtonGreenBorder.vue
diff --git a/src/components/HelpCenter/Community.vue b/src/components/HelpCenter/Community.vue
@@ -53,7 +53,7 @@ export default {
     text-decoration: none;
   }
   i {
-    color: $color--text--dark-sacramento;
+    color: var(--v-primaryText-base);
     font-size: 22px;
     margin-right: 13px;
   }

diff --git a/src/components/HelpCenter/CustomerSupport.vue b/src/components/HelpCenter/CustomerSupport.vue
@@ -41,7 +41,7 @@ export default {
 }
 
 .icon {
-  color: $color--text--dark-sacramento;
+  color: var(--v-primaryText-base);
   font-size: 18px;
 }
 </style>
diff --git a/src/components/MewButton/MewButton.vue b/src/components/MewButton/MewButton.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <p>Hello</p>
+    <v-btn
+      x-large
+      depressed
+      v-text="label"
+      :disabled="disabled"
+      :color="color"
+      :outlined="outlined"
+    ></v-btn>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: String,
+    disabled: Boolean,
+    color: String,
+    outlined: Boolean
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+p {
+  color: var(--v-example-base);
+}
+@import "@/global.scss";
+</style>
diff --git a/src/global.scss b/src/global.scss
@@ -1,4 +1,4 @@
-// COLOR PALETTE ==============================================================
+// // COLOR PALETTE ==============================================================
 $color--primary--emerald: #05c0a5;
 $color--primary--royal-blue: #5a78f0;
 $color--primary--dark-sacramento: #003945;
@@ -13,7 +13,7 @@ $color--secondary--naples-yellow: #fcb755;
 $color--secondary--primary-silver: #f2f4fa;
 $color--secondary--mint: #cdf2ee;
 $color--secondary--light-mint: #f2fafa;
-$color--text--dark-sacramento: #003945;
+$color: #003945;
 $color--text--spruce: #506175;
 $color--text--silver: #cecece;
 $color--disabled--1: #d8d8d8;
@@ -60,8 +60,8 @@ $color--disabled--1: #d8d8d8;
 .text--color--secondary--light-mint {
   $color--secondary--light-mint: #f2fafa;
 }
-.text--color--text--dark-sacramento {
-  $color--text--dark-sacramento: #003945;
+.text--color {
+  color: #003945;
 }
 .text--color--text--spruce {
   $color--text--spruce: #506175;
@@ -71,7 +71,7 @@ $color--disabled--1: #d8d8d8;
 }
 
 // SWITCH/CHECKBOX LABEL ======================================================
-$label--active--color: $color--text--dark-sacramento;
+$label--active--color:  var(--v-primaryText-base);
 $label--inactive--color: $color--disabled--1;
 
 // BUTTON PROPS ===============================================================

diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
@@ -6,5 +6,37 @@ Vue.use(Vuetify);
 export default new Vuetify({
   icons: {
     iconfont: "mdi"
+  },
+  theme: {
+    options: {
+      customProperties: true
+    },
+    themes: {
+      light: {
+        primary: "#05c0a5",
+        secondary: "#5a78f0",
+        accent: "#cdf2ee",
+        error: "#a70015",
+        info: "#003945",
+        success: "#4CAF50",
+        warning: "#ff9800",
+        cerise: "#e96071",
+        violet: "#7070e3",
+        independence: "#536d8b",
+        spruce: "#506175",
+        silver: "#cecece",
+        "dark-space": "#0b2840",
+        "police-strobe": "#25b0e8",
+        "dark-independence": "#334758",
+        "naples-yellow": "#fcb755",
+        "primary-silver": "#f2f4fa",
+        "light-mint": "#f2fafa",
+        "disabled-1": "#d8d8d8",
+        "disabled-2": "#999",
+        "grey-1": "#96a8b6",
+        "yellow-1": "#ffe9c5"
+      }
+      // dark:
+    }
   }
 });
diff --git a/src/views/Colors.vue b/src/views/Colors.vue
@@ -1,42 +1,131 @@
 <template>
   <v-container>
-    <div class="title">Primary Colors</div>
-    <v-row class="mb-12">
-      <CardColor color="#05c0a5" colorName="Emerald" />
-      <CardColor color="#5a78f0" colorName="Royal Blue" />
-      <CardColor color="#003945" colorName="Dark Sacramento" />
-      <CardColor color="#0b2840" colorName="Dark Space" />
-    </v-row>
-
-    <div class="title">Secondary Colors</div>
-    <v-row class="mb-12">
-      <CardColor color="#7070e3" colorName="Violet" />
-      <CardColor color="#25b0e8" colorName="Police Strobe" />
-      <CardColor color="#536d8b" colorName="Independence" />
-      <CardColor color="#334758" colorName="Dark Independence" />
-      <CardColor color="#e96071" colorName="Cerise" />
-      <CardColor color="#a70015" colorName="Cardinal" />
-      <CardColor color="#fcb755" colorName="Naples Yellow" />
-      <CardColor color="#f2f4fa" colorName="Primary Silver" />
-      <CardColor color="#cdf2ee" colorName="Mint" />
-      <CardColor color="#f2fafa" colorName="Light Mint" />
-    </v-row>
-
-    <div class="title">Text Colors</div>
-    <v-row class="mb-12">
-      <CardColor color="#506175" colorName="Spruce" />
-      <CardColor color="#cecece" colorName="Silver" />
-    </v-row>
+    <div class="title">Theme Colors</div>
+    <h5 class="mt-2">Green</h5>
+    <card-color :colors="greenShades" />
+    <h5 class="mt-2">Blue</h5>
+    <card-color :colors="blueShades" />
+    <h5 class="mt-2">Grey</h5>
+    <card-color :colors="greyShades" />
+    <h5 class="mt-2">Red</h5>
+    <card-color :colors="redShades" />
+    <h5 class="mt-2">Yellow/Orange</h5>
+    <card-color :colors="orangeShades" />
+    <h5 class="mt-2">Purple</h5>
+    <card-color :colors="purpleShades" />
   </v-container>
 </template>
 
 <script>
-import CardColor from "@/views/components/CardColor";
+import CardColorComponent from "./components/CardColorComponent";
 
 export default {
-  components: {
-    CardColor
+  data() {
+    return {
+      greenShades: [
+        {
+          type: "primary",
+          hex: "#05c0a5"
+        },
+        {
+          type: "success",
+          hex: "#4CAF50"
+        },
+        {
+          type: "info",
+          hex: "#003945"
+        }
+      ],
+      blueShades: [
+        {
+          type: "secondary",
+          hex: "#5a78f0"
+        },
+        {
+          type: "police-strobe",
+          hex: "#25b0e8"
+        },
+        {
+          type: "accent",
+          hex: "#cdf2ee"
+        },
+        {
+          type: "light-mint",
+          hex: "#f2fafa"
+        },
+        {
+          type: "dark-space",
+          hex: "#0b2840"
+        }
+      ],
+      redShades: [
+        {
+          type: "error",
+          hex: "#a70015"
+        },
+        {
+          type: "cerise",
+          hex: "#e96071"
+        }
+      ],
+      orangeShades: [
+        {
+          type: "warning",
+          hex: "#ff9800"
+        },
+        {
+          type: "naples-yellow",
+          hex: "#fcb755"
+        },
+        {
+          type: "yellow-1",
+          hex: "#ffe9c5"
+        }
+      ],
+      purpleShades: [
+        {
+          type: "violet",
+          hex: "#7070e3"
+        }
+      ],
+      greyShades: [
+        {
+          type: "primary-silver",
+          hex: "#f2f4fa"
+        },
+        {
+          type: "silver",
+          hex: "#cecece"
+        },
+        {
+          type: "disabled-1",
+          hex: "d8d8d8"
+        },
+        {
+          type: "disabled-2",
+          hex: "#999"
+        },
+        {
+          type: "grey-1",
+          hex: "#96a8b6"
+        },
+        {
+          type: "independence",
+          hex: "#536d8b"
+        },
+        {
+          type: "dark-independence",
+          hex: "#334758"
+        },
+        {
+          type: "spruce",
+          hex: "#506175"
+        }
+      ]
+    };
   },
-  data: () => ({})
+  components: {
+    "card-color": CardColorComponent
+  }
 };
 </script>
diff --git a/src/views/Components.vue b/src/views/Components.vue
@@ -16,77 +16,77 @@
 
     <!--================================================================================-->
     <v-divider></v-divider>
+    <h2 class="mt-4 mb-2">Buttons</h2>
     <v-row>
-      <cc subtitle="Button" title="Button Green">
-        <ButtonGreen
-          label="Button"
+      <cc title="Green">
+        <mew-button
+          class="white--text mr-1"
+          color="#05c0a5"
           @click.native="
             snackbarOpen = true;
             snackbarMsg = 'Clicked';
           "
-          class="mr-1"
-        />
-        <ButtonGreen
           label="Button"
-          disabled
-          @click.native="
-            snackbarOpen = true;
-            snackbarMsg = 'Clicked';
-          "
         />
       </cc>
-      <cc subtitle="Button" title="Button Green Border">
-        <ButtonGreenBorder
+      <cc title="Green Outline">
+        <mew-button
           label="Button"
+          color="#05c0a5"
+          outlined
           @click.native="
             snackbarOpen = true;
             snackbarMsg = 'Clicked';
           "
           class="mr-1"
         />
-        <ButtonGreenBorder
+      </cc>
+      <cc title="Blue">
+        <mew-button
           label="Button"
-          disabled
+          color="#5a78f0"
           @click.native="
             snackbarOpen = true;
             snackbarMsg = 'Clicked';
           "
+          class="mr-1 white--text"
         />
       </cc>
-      <cc subtitle="Button" title="Button Blue">
-        <ButtonBlue
+      <cc title="Blue Outline">
+        <mew-button
           label="Button"
+          color="#5a78f0"
+          outlined
           @click.native="
             snackbarOpen = true;
             snackbarMsg = 'Clicked';
           "
           class="mr-1"
         />
-        <ButtonBlue
-          label="Button"
-          disabled
-          @click.native="
-            snackbarOpen = true;
-            snackbarMsg = 'Clicked';
-          "
-        />
       </cc>
-      <cc subtitle="Button" title="Button Blue Border">
-        <ButtonBlueBorder
+      <cc title="Disabled">
+        <mew-button
           label="Button"
+          color="#5a78f0"
+          disabled
           @click.native="
             snackbarOpen = true;
             snackbarMsg = 'Clicked';
           "
           class="mr-1"
         />
-        <ButtonBlueBorder
+      </cc>
+      <cc title="Outline Disabled">
+        <mew-button
           label="Button"
+          color="#5a78f0"
+          outlined
           disabled
           @click.native="
             snackbarOpen = true;
             snackbarMsg = 'Clicked';
           "
+          class="mr-1"
         />
       </cc>
     </v-row>
@@ -314,10 +314,7 @@
 <script>
 import cc from "@/views/components/ComponentContainer";
 
-import ButtonGreen from "@/components/Button/ButtonGreen";
-import ButtonGreenBorder from "@/components/Button/ButtonGreenBorder";
-import ButtonBlue from "@/components/Button/ButtonBlue";
-import ButtonBlueBorder from "@/components/Button/ButtonBlueBorder";
+import MewButton from "@/components/MewButton/MewButton";
 import SwitchToggle from "@/components/Switch/SwitchToggle";
 import Checkbox from "@/components/Checkbox/Checkbox";
 import Radio from "@/components/Radio/Radio";
@@ -344,10 +341,7 @@ import xrp from "@/assets/coins/xrp.png";
 export default {
   components: {
     cc,
-    ButtonGreen,
-    ButtonGreenBorder,
-    ButtonBlue,
-    ButtonBlueBorder,
+    "mew-button": MewButton,
     SwitchToggle,
     Checkbox,
     Radio,

diff --git a/src/views/components/CardColor.vue b/src/views/components/CardColor.vue
diff --git a/src/views/components/CardColorComponent.vue b/src/views/components/CardColorComponent.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <v-row class="mb-6">
+      <v-col
+        class="pt-2"
+        cols="12"
+        sm="2"
+        md="2"
+        v-for="(color, idx) in colors"
+        :key="idx"
+      >
+        <v-card :color="color.type" class="py-12"></v-card>
+        <p class="mt-2">{{ color.type }} : {{ color.hex }}</p>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    colors: {
+      type: Array,
+      default: function() {
+        return [];
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/global.scss";
+</style>
diff --git a/src/views/components/ComponentContainer.vue b/src/views/components/ComponentContainer.vue
@@ -25,6 +25,6 @@ export default {
 <style lang="scss" scoped>
 @import "@/global.scss";
 .dark-sacramento {
-  color: $color--text--dark-sacramento;
+  color: var(--v-primaryText-base);
 }
 </style>
diff --git a/src/wrapper.js b/src/wrapper.js
@@ -0,0 +1,29 @@
+// Import vue component
+import mewButton from "/components/MewButton.vue";
+
+// Declare install function executed by Vue.use()
+export function install(Vue) {
+  if (install.installed) return;
+  install.installed = true;
+  Vue.component("MewButton", mewButton);
+}
+
+// Create module definition for Vue.use()
+const plugin = {
+  install
+};
+
+// Auto-install when vue is found (eg. in browser via <script> tag)
+let GlobalVue = null;
+
+if (typeof window !== "undefined") {
+  GlobalVue = window.Vue;
+} else if (typeof global !== "undefined") {
+  GlobalVue = global.Vue;
+}
+if (GlobalVue) {
+  GlobalVue.use(plugin);
+}
+
+// To allow use as module (npm/webpack/etc.) export component
+export default mewButton;