chore: Add multiselect support in stories (#2427)

.storybook/preview.js

@@ -3,6 +3,7 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
 import Vuelidate from 'vuelidate';
+import Multiselect from 'vue-multiselect';
 
 import WootUiKit from '../app/javascript/dashboard/components';
 import i18n from '../app/javascript/dashboard/i18n';
@@ -13,6 +14,7 @@ Vue.use(VueI18n);
 Vue.use(Vuelidate);
 Vue.use(WootUiKit);
 Vue.use(Vuex);
+Vue.component('multiselect', Multiselect);
 
 const store = new Vuex.Store({});
 const i18nConfig = new VueI18n({

app/javascript/dashboard/assets/scss/plugins/_multiselect.scss

@@ -137,6 +137,7 @@
 }
 
 .sidebar-labels-wrap {
+
   &.has-edited,
   &:hover {
     .multiselect {
@@ -162,6 +163,12 @@
 .multiselect-wrap--small {
   $multiselect-height: 3.8rem;
 
+  .multiselect__tags,
+  .multiselect__input {
+    align-items: center;
+    display: flex;
+  }
+
   .multiselect__tags,
   .multiselect__input,
   .multiselect {
@@ -177,15 +184,24 @@
   }
 
   .multiselect__single {
+    align-items: center;
+    display: flex;
     font-size: var(--font-size-small);
-    padding: var(--space-small) 0;
+    margin: 0;
+    padding: var(--space-smaller) var(--space-micro);
   }
 
   .multiselect__placeholder {
-    padding: var(--space-small) 0;
+    margin: 0;
+    padding: var(--space-smaller) var(--space-micro);
   }
 
   .multiselect__select {
     min-height: $multiselect-height;
   }
+
+  .multiselect--disabled .multiselect__current,
+  .multiselect--disabled .multiselect__select {
+    background: transparent;
+  }
 }

app/javascript/dashboard/assets/scss/storybook.scss

@@ -8,6 +8,7 @@
 @import 'variables';
 
 @import '~spinkit/scss/spinners/7-three-bounce';
+@import '~vue-multiselect/dist/vue-multiselect.min.css';
 @import '~shared/assets/stylesheets/ionicons';
 
 @import 'mixins';
@@ -27,3 +28,5 @@
 @import 'foundation-custom';
 @import 'widgets/buttons';
 @import 'widgets/forms';
+
+@import 'plugins/multiselect';