Added features to non multiple selects

fidgetwidget · fidgetwidget · commit 5271ed7c70e8 · 2017-03-30T16:21:18.000-07:00
- added a single class to the selected-tag for non multiple selects
- added styling to the single selected-tag to differentiate it from the default
diff --git a/src/components/Select.vue b/src/components/Select.vue
@@ -115,6 +115,14 @@
     float: left;
     line-height: 24px;
   }
+  .v-select .selected-tag.single {
+    background-color: transparent;
+    border-color: transparent;
+  }
+  .v-select.open .selected-tag.single {
+    position: absolute;
+    opacity: 0.5;
+  }
   .v-select .selected-tag .close {
     float: none;
     margin-right: 0;
@@ -254,7 +262,7 @@
   <div class="dropdown v-select" :class="dropdownClasses">
     <div ref="toggle" @mousedown.prevent="toggleDropdown" class="dropdown-toggle">
 
-      <span class="selected-tag" v-for="option in valueAsArray" v-bind:key="option.index">
+      <span class="selected-tag" :class="selectedTagClasses" v-for="option in valueAsArray" v-bind:key="option.index">
         {{ getOptionLabel(option) }}
         <button v-if="multiple" @click="deselect(option)" type="button" class="close">
           <span aria-hidden="true">&times;</span>
@@ -769,6 +777,16 @@
         }
       },
 
+      /**
+       * Classes to be output on .selected-tag
+       * @return {Object}
+       */
+      selectedTagClasses() {
+        return {
+          single: !this.multiple
+        }
+      },
+
       /**
        * Return the current state of the
        * dropdown menu.
