Input and button updates

src/components/MewButton/MewButton.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <v-btn
+      @click="onBtnClick()"
       :class="getClasses()"
       :color="colorTheme"
       :disabled="disabled"
@@ -75,15 +76,20 @@ export default {
         outline: "outline"
       },
       colorThemes: {
-        white: "white"
+        white: "white",
+        primary: "primary"
       },
       iconAlignments: {
         left: "left",
         right: "right"
-      }
+      },
+      active: false
     };
   },
   methods: {
+    onBtnClick() {
+      this.active = !this.active;
+    },
     getClasses() {
       const classes = [];
 
@@ -93,15 +99,35 @@ export default {
       ) {
         classes.push("white--text");
       }
+
       if (
         this.btnStyle.toLowerCase() === this.btnStyles.background &&
         this.colorTheme.toLowerCase() === this.colorThemes.white
       ) {
         classes.push("primary--text");
       }
+
       if (this.disabled) {
         classes.push("disabled-theme");
       }
+
+      if (
+        this.active &&
+        !this.disabled &&
+        this.btnStyle.toLowerCase() === this.btnStyles.background &&
+        this.colorTheme.toLowerCase() === this.colorThemes.primary
+      ) {
+        classes.push("primary-active");
+      }
+
+      if (
+        this.active &&
+        !this.disabled &&
+        this.btnStyle.toLowerCase() === this.btnStyles.outline
+      ) {
+        classes.push("bg-white");
+      }
+
       return classes;
     }
   }
@@ -121,6 +147,18 @@ export default {
     .icon {
       height: 27px;
     }
+
+    &.primary:hover {
+      background-color: var(--v-primary-hover-base) !important;
+    }
+  }
+
+  .primary-active {
+    background-color: var(--v-primary-active-base) !important;
+  }
+
+  .bg-white {
+    background-color: var(--v-white-base) !important;
   }
 
   .disabled-theme {
@@ -130,5 +168,9 @@ export default {
       filter: grayscale(100%);
     }
   }
+
+  .theme--light.v-btn.v-btn--disabled:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined) {
+    color: var(--v-white-base) !important;
+  }
 }
 </style>

src/components/MewInput/MewInput.vue

@@ -86,7 +86,7 @@ export default {
   },
   watch: {
     inputValue(newValue) {
-      this.$emit("input", newValue);
+      console.log("input value:", newValue);
     }
   },
   mounted() {

src/components/MewSelect/MewSelect.vue

@@ -5,40 +5,69 @@
       append-icon="mdi-chevron-down"
       :disabled="disabled"
       :items="items"
-      :label="selectLabel"
+      item-text="name"
+      item-value="value"
+      :label="label"
+      v-model="selectModel"
       outlined
-    ></v-select>
+    >
+      <template slot="item" slot-scope="data">
+        <img class="item-img" v-if="data.item.img" :src="data.item.img" />{{
+          data.item.name ? data.item.name : data.item
+        }}
+      </template>
+    </v-select>
   </div>
 </template>
 
 <script>
 export default {
   name: "MewSelect",
   props: {
+    /**
+     * Disables the select dropdown.
+     */
     disabled: {
       type: Boolean,
       default: false
     },
+    /**
+     * Can be an array of objects or array of strings. When using objects, will look for a text and value field.
+     * Can also add an img attribute to the object to append an img to the value.
+     * Example: { name: "Orange", value: "Orange", img: orangeImg }
+     */
     items: {
       type: Array,
       default: function() {
         return [];
       }
     },
-    selectLabel: String
+    /**
+     * Sets the select label
+     */
+    label: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Sets the select value
+     */
+    value: {
+      type: [String, Object]
+    }
   },
   data() {
     return {
-      inputModel: ""
+      selectModel: ""
     };
   },
   watch: {
-    inputModel(newValue) {
-      this.$emit("input", newValue);
+    selectModel(newValue) {
+      console.log("select value:", newValue);
     }
   },
   mounted() {
-    this.inputModel = this.inputValue;
+    this.selectModel = this.value;
   }
 };
 </script>
@@ -60,5 +89,10 @@ export default {
   .v-text-field--outlined fieldset:before {
     border: 1px solid var(--v-form-base);
   }
+
+  .item-img {
+    margin-right: 5px;
+    max-height: 25px;
+  }
 }
 </style>

src/plugins/vuetify.js

@@ -101,7 +101,9 @@ export default new Vuetify({
         "input-label": "#6d89a6",
         form: "#cecece",
         "input-placeholder": "#96a8b6",
-        "select-border": "#a3b7cf"
+        "select-border": "#a3b7cf",
+        "primary-hover": "#0BAA93",
+        "primary-active": "#0A8170"
       },
       dark: {
         primary: "#0b2840",

stories/MewSelect/MewSelect.stories.js

@@ -9,27 +9,25 @@ export default {
   decorators: [withKnobs]
 };
 
-const itemsArray = ["Green", "Orange", "Blue"]
+const itemsArray = ["Green", "Orange", "Blue"];
+
 export const MEWSelect = () => ({
   components: { "mew-select": MewSelect },
   props: {
     disabled: {
       default: boolean("Disabled", false)
     },
-    selectLabel: {
+    label: {
       default: text("select-label", "label")
     },
     items: {
       default: array("items", itemsArray)
-    },
-    inputValue: {
-      default: text("input-value", "")
     }
   },
   template: `
     <div>
     <br />
-    <mew-select :select-label="selectLabel" :items="items"
+    <mew-select :label="label" :items="items" :disabled="disabled"
     />
   </div>`
 });