@designcrowd/fe-shared-lib 1.1.5 → 1.1.6-eng-2158-2

package/src/atoms/components/Select/Select.vue

@@ -1,595 +1,605 @@
-<template>
-  <div
-    :aria-owns="`listbox-${id}`"
-    :class="{
-      'select--active': isOpen,
-      'select--disabled': isDisabled,
-      'select--above': isAbove,
-    }"
-    :tabindex="isSearchable ? -1 : tabindex"
-    class="select"
-    @blur="isSearchable ? false : deactivate()"
-    @focus="activate"
-    @keydown.self.down.prevent="pointerForward"
-    @keydown.self.up.prevent="pointerBackward"
-    @keydown.enter.tab.stop.self="addPointerElement($event)"
-    @keyup.esc="deactivate"
-  >
-    <slot v-if="!isLoading" :toggle="toggle" name="caret">
-      <div class="select__caret" @mousedown.prevent.stop="toggle"></div>
-    </slot>
-    <slot :search="search" name="clear"></slot>
-    <div
-      ref="tags"
-      class="select__tags tw-text-grayscale-600 tw-border tw-border-solid"
-      :class="{
-        'tw-border-grayscale-500 focus:tw-border-grayscale-600': !isInvalid,
-        'tw-border-error-500 focus:tw-border-error-600': isInvalid,
-      }"
-    >
-      <transition name="select__loading">
-        <slot name="loading">
-          <div v-show="isLoading" class="select__spinner" />
-        </slot>
-      </transition>
-      <input :name="name" :value="valueKey" hidden />
-      <input
-        v-if="isSearchable"
-        :id="id"
-        ref="search"
-        :aria-controls="`listbox-${id}`"
-        :disabled="isDisabled"
-        :placeholder="placeholder"
-        :style="inputStyle"
-        :tabindex="tabindex"
-        :value="search"
-        class="select__input"
-        spellcheck="false"
-        autocomplete="one-time-code"
-        type="text"
-        @input.stop="updateSearch($event.target.value)"
-        @blur.prevent="onBlur"
-        @focus.prevent="activate"
-        @keyup.esc="deactivate"
-        @keydown.down.prevent="pointerForward"
-        @keydown.up.prevent="pointerBackward"
-        @keydown.enter.prevent.stop.self="addPointerElement($event)"
-      />
-      <span v-if="isValueVisible" class="select__value" @mousedown.prevent="toggle">
-        <slot :option="modelValue" name="label">
-          {{ modelValue }}
-        </slot>
-      </span>
-      <span v-if="isPlaceholderVisible" class="select__placeholder" @mousedown.prevent="toggle">
-        <slot name="placeholder"> {{ placeholder }} </slot>
-      </span>
-    </div>
-    <transition name="select">
-      <div
-        v-show="isOpen"
-        ref="list"
-        :style="{ maxHeight: `${optimizedHeight}px` }"
-        class="select__content-wrapper"
-        tabindex="-1"
-        @focus="activate"
-        @mousedown.prevent
-      >
-        <ul :id="`listbox-${id}`" :style="contentStyle" class="select__content" role="listbox">
-          <slot name="beforeList"></slot>
-          <li
-            v-for="(option, index) of filteredOptions"
-            :id="getListId(option)"
-            :key="index"
-            :role="!(option && option.$isDisabled) ? 'option' : null"
-            class="select__element"
-          >
-            <span
-              v-if="!(option && option.$isDisabled)"
-              :class="{
-                'select__option--highlight': isOptionHighlighted(index),
-                'select__option--selected': isOptionSelected(option),
-              }"
-              :data-deselect="deselectLabelText"
-              :data-select="option && option.isCustom ? customPlaceholder : selectLabelText"
-              :data-selected="selectedLabelText"
-              class="select__option"
-              @focus="select(option)"
-              @click.stop="select(option)"
-              @mouseenter.self="pointerSet(index)"
-            >
-              <slot :index="index" :option="option" :search="search" name="option">
-                <span>{{ getOptionLabel(option) }}</span>
-              </slot>
-            </span>
-          </li>
-          <li v-show="shouldShowNoResults && filteredOptions.length === 0 && search && !isLoading">
-            <span class="select__option">
-              <slot :search="search" name="noResult">No results</slot>
-            </span>
-          </li>
-          <slot name="afterList"></slot>
-        </ul>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script>
-import selectMixin from './selectMixin';
-import pointerMixin from './pointerMixin';
-
-export default {
-  mixins: [selectMixin, pointerMixin],
-  props: {
-    name: {
-      type: String,
-      default: '',
-    },
-    selectLabel: {
-      type: String,
-      default: undefined,
-    },
-    selectedLabel: {
-      type: String,
-      default: undefined,
-    },
-    deselectLabel: {
-      type: String,
-      default: undefined,
-    },
-    shouldShowLabels: {
-      type: Boolean,
-      default: true,
-    },
-    maxHeight: {
-      type: Number,
-      default: 300,
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-    openDirection: {
-      type: String,
-      default: '',
-    },
-    shouldShowNoResults: {
-      type: Boolean,
-      default: true,
-    },
-    tabindex: {
-      type: Number,
-      default: 0,
-    },
-    shouldSelectExactMatchOnBlur: {
-      type: Boolean,
-      default: false,
-    },
-    isInvalid: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    isValueVisible() {
-      if (this.isSearchable && this.isOpen) {
-        return false;
-      }
-      return !!this.modelValue;
-    },
-    isPlaceholderVisible() {
-      if (this.isSearchable && this.isOpen) {
-        return false;
-      }
-      return !this.modelValue;
-    },
-    deselectLabelText() {
-      return this.shouldShowLabels ? this.deselectLabel : '';
-    },
-    selectLabelText() {
-      return this.shouldShowLabels ? this.selectLabel : '';
-    },
-    selectedLabelText() {
-      return this.shouldShowLabels ? this.selectedLabel : '';
-    },
-    inputStyle() {
-      if (this.isSearchable) {
-        // Hide input by setting the width to 0 allowing it to receive focus
-        return this.isOpen ? { width: '100%' } : { width: '0', position: 'absolute', padding: '0' };
-      }
-      return '';
-    },
-    contentStyle() {
-      return this.options.length ? { display: 'inline-block' } : { display: 'block' };
-    },
-    isAbove() {
-      if (this.openDirection === 'above' || this.openDirection === 'top') {
-        return true;
-      }
-      if (this.openDirection === 'below' || this.openDirection === 'bottom') {
-        return false;
-      }
-      return this.preferredOpenDirection === 'above';
-    },
-  },
-  watch: {
-    isOpen(isOpen) {
-      if (isOpen && this.modelValue) {
-        const selectedOption = document.getElementById(this.getListId(this.modelValue));
-
-        if (selectedOption) {
-          this.$nextTick(() => {
-            selectedOption.scrollIntoView({ behavior: 'instant', block: 'nearest', inline: 'nearest' });
-          });
-        }
-      }
-    },
-  },
-  methods: {
-    onBlur() {
-      if (this.shouldSelectExactMatchOnBlur && this.hasExactMatch) {
-        if (!this.isOptionSelected(this.exactMatchOption)) {
-          this.select(this.exactMatchOption, this.getOptionKey(this.exactMatchOption));
-        }
-      }
-      this.deactivate();
-    },
-    getListId(option) {
-      return `${this.id}-${this.getOptionKey(option)}`;
-    },
-  },
-};
-</script>
-<style scoped>
-fieldset[disabled] .select {
-  pointer-events: none;
-}
-
-.select__spinner {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translateY(-50%);
-  width: 40px;
-  height: 38px;
-  display: block;
-}
-
-.select__spinner:before,
-.select__spinner:after {
-  position: absolute;
-  content: '';
-  top: 50%;
-  left: 50%;
-  margin: -8px 0 0 -8px;
-  width: 16px;
-  height: 16px;
-  border-radius: 100%;
-  border-color: #41b883 transparent transparent;
-  border-style: solid;
-  border-width: 2px;
-  box-shadow: 0 0 0 1px transparent;
-}
-
-.select__spinner:before {
-  animation: spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62);
-  animation-iteration-count: infinite;
-}
-
-.select__spinner:after {
-  animation: spinning 2.4s cubic-bezier(0.51, 0.09, 0.21, 0.8);
-  animation-iteration-count: infinite;
-}
-
-.select__loading-enter-active,
-.select__loading-leave-active {
-  transition: opacity 0.4s ease-in-out;
-  opacity: 1;
-}
-
-.select__loading-enter,
-.select__loading-leave-active {
-  opacity: 0;
-}
-
-.select,
-.select__input,
-.select__value {
-  font-family: inherit;
-  font-size: 16px;
-  touch-action: manipulation;
-}
-
-.select {
-  box-sizing: content-box;
-  display: block;
-  position: relative;
-  width: 100%;
-  min-height: 50px;
-  text-align: left;
-  color: black;
-}
-
-.select * {
-  box-sizing: border-box;
-}
-
-.select:focus {
-  outline: none;
-}
-
-.select--disabled {
-  background: #ededed;
-  pointer-events: none;
-  opacity: 0.6;
-}
-
-.select--active {
-  z-index: 50;
-}
-
-.select--active:not(.select--above) .select__current,
-.select--active:not(.select--above) .select__input,
-.select--active:not(.select--above) .select__tags {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.select--active .select__caret {
-  transform: rotateZ(180deg);
-}
-
-.select--above.select--active .select__current,
-.select--above.select--active .select__input,
-.select--above.select--active .select__tags {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.select__input,
-.select__value {
-  position: relative;
-  display: inline-block;
-  min-height: 20px;
-  border: none;
-  border-radius: 5px;
-  background: #fff;
-  width: calc(100%);
-  transition: border 0.1s ease;
-  box-sizing: border-box;
-  vertical-align: top;
-}
-
-.select__input::placeholder {
-  color: #35495e;
-}
-
-.select__tag ~ .select__input,
-.select__tag ~ .select__value {
-  width: auto;
-}
-
-.select__input:hover,
-.select__value:hover {
-  border-color: #cfcfcf;
-}
-
-.select__input:focus,
-.select__value:focus {
-  border-color: #a8a8a8;
-  outline: none;
-}
-
-.select__tags {
-  min-height: 48px;
-  display: block;
-  padding: 14px 40px 0 16px;
-  border-radius: 5px;
-  background: #fff;
-}
-
-.select__tags input {
-  padding: 0;
-}
-
-.select__caret {
-  line-height: 16px;
-  display: block;
-  position: absolute;
-  box-sizing: border-box;
-  width: 40px;
-  height: 38px;
-  right: 1px;
-  top: 5px;
-  padding: 4px 8px;
-  margin: 0;
-  text-decoration: none;
-  text-align: center;
-  cursor: pointer;
-  transition: transform 0.2s ease;
-}
-
-.select__caret:before {
-  position: relative;
-  right: 0;
-  top: 65%;
-  color: #999;
-  margin-top: 50%;
-  border-style: solid;
-  border-width: 5px 5px 0 5px;
-  border-color: #999999 transparent transparent transparent;
-  content: '';
-}
-
-.select__placeholder {
-  color: #adadad;
-  display: inline-block;
-  margin-bottom: 10px;
-  padding-top: 2px;
-}
-
-.select__content-wrapper {
-  position: absolute;
-  display: block;
-  background: #fff;
-  width: 100%;
-  max-height: 240px;
-  overflow: auto;
-  border: 1px solid #d0d0d0;
-  border-top: none;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-  z-index: 50;
-  -webkit-overflow-scrolling: touch;
-}
-
-.select__content {
-  list-style: none;
-  display: inline-block;
-  padding: 0;
-  margin: 0;
-  min-width: 100%;
-  vertical-align: top;
-}
-
-.select--above .select__content-wrapper {
-  bottom: 100%;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-  border-bottom: none;
-  border-top: 1px solid #d0d0d0;
-}
-
-.select__content::webkit-scrollbar {
-  display: none;
-}
-
-.select__element {
-  display: block;
-}
-
-.select__option {
-  display: block;
-  padding: 12px;
-  min-height: 40px;
-  line-height: 16px;
-  text-decoration: none;
-  text-transform: none;
-  vertical-align: middle;
-  position: relative;
-  cursor: pointer;
-  white-space: nowrap;
-  color: #4b545d;
-}
-
-.select__option:after {
-  top: 0;
-  right: 0;
-  position: absolute;
-  line-height: 40px;
-  padding-right: 12px;
-  padding-left: 20px;
-  font-size: 13px;
-}
-
-.select__option--highlight {
-  background: #f3f3f3;
-  outline: none;
-  color: black;
-}
-
-.select__option--highlight:after {
-  content: attr(data-select);
-  background: #f3f3f3;
-  color: silver;
-}
-
-.select__option--selected {
-  background: #f3f3f3;
-  color: black;
-  font-weight: bold;
-}
-
-.select__option--selected:after {
-  content: attr(data-selected);
-  color: silver;
-  background: inherit;
-}
-
-.select__option--selected.select__option--highlight:after {
-  content: attr(data-deselect);
-}
-
-.select--disabled .select__current,
-.select--disabled .select__caret {
-  color: #a6a6a6;
-}
-
-.select__option--disabled {
-  background: #ededed !important;
-  color: #a6a6a6 !important;
-  cursor: text;
-  pointer-events: none;
-}
-
-.select-enter-active,
-.select-leave-active {
-  transition: all 0.15s ease;
-}
-
-.select-enter,
-.select-leave-active {
-  opacity: 0;
-}
-
-.select__strong {
-  margin-bottom: 8px;
-  line-height: 20px;
-  display: inline-block;
-  vertical-align: top;
-}
-
-*[dir='rtl'] .select {
-  text-align: right;
-}
-
-*[dir='rtl'] .select__caret {
-  right: auto;
-  left: 1px;
-}
-
-*[dir='rtl'] .select__tags {
-  padding: 8px 8px 0px 40px;
-}
-
-*[dir='rtl'] .select__content {
-  text-align: right;
-}
-
-*[dir='rtl'] .select__option:after {
-  right: auto;
-  left: 0;
-}
-
-*[dir='rtl'] .select__clear {
-  right: auto;
-  left: 12px;
-}
-
-*[dir='rtl'] .select__spinner {
-  right: auto;
-  left: 1px;
-}
-
-@keyframes spinning {
-  from {
-    transform: rotate(0);
-  }
-
-  to {
-    transform: rotate(2turn);
-  }
-}
-</style>
+<template>
+  <div
+    :aria-owns="`listbox-${id}`"
+    :class="{
+      'select--active': isOpen,
+      'select--disabled': isDisabled,
+      'select--above': isAbove,
+    }"
+    :tabindex="isSearchable ? -1 : tabindex"
+    class="select"
+    @blur="isSearchable ? false : deactivate()"
+    @focus="activate"
+    @keydown.self.down.prevent="pointerForward"
+    @keydown.self.up.prevent="pointerBackward"
+    @keydown.enter.tab.stop.self="addPointerElement($event)"
+    @keyup.esc="deactivate"
+  >
+    <slot v-if="!isLoading" :toggle="toggle" name="caret">
+      <div class="select__caret" @mousedown.prevent.stop="toggle"></div>
+    </slot>
+    <slot :search="search" name="clear"></slot>
+    <div
+      ref="tags"
+      class="select__tags tw-text-grayscale-600 tw-border tw-border-solid"
+      :class="{
+        'tw-border-grayscale-500 focus:tw-border-grayscale-600': !isInvalid,
+        'tw-border-error-500 focus:tw-border-error-600': isInvalid,
+      }"
+    >
+      <transition name="select__loading">
+        <slot name="loading">
+          <div v-show="isLoading" class="select__spinner" />
+        </slot>
+      </transition>
+      <input :name="name" :value="valueKey" hidden />
+      <input
+        v-if="isSearchable"
+        :id="id"
+        ref="search"
+        :aria-controls="`listbox-${id}`"
+        :disabled="isDisabled"
+        :placeholder="placeholder"
+        :style="inputStyle"
+        :tabindex="tabindex"
+        :value="search"
+        class="select__input"
+        spellcheck="false"
+        autocomplete="one-time-code"
+        type="text"
+        @input.stop="updateSearch($event.target.value)"
+        @blur.prevent="onBlur"
+        @focus.prevent="activate"
+        @keyup.esc="deactivate"
+        @keydown.down.prevent="pointerForward"
+        @keydown.up.prevent="pointerBackward"
+        @keydown.enter.prevent.stop.self="addPointerElement($event)"
+      />
+      <span v-if="isValueVisible" class="select__value" @mousedown.prevent="toggle">
+        <slot :option="modelValue" name="label">
+          {{ modelValue }}
+        </slot>
+      </span>
+      <span v-if="isPlaceholderVisible" class="select__placeholder" @mousedown.prevent="toggle">
+        <slot name="placeholder"> {{ placeholder }} </slot>
+      </span>
+    </div>
+    <transition name="select">
+      <div
+        v-show="isOpen"
+        ref="list"
+        :style="{ maxHeight: `${optimizedHeight}px` }"
+        class="select__content-wrapper"
+        tabindex="-1"
+        @focus="activate"
+        @mousedown.prevent
+      >
+        <ul :id="`listbox-${id}`" :style="contentStyle" class="select__content" role="listbox">
+          <slot name="beforeList"></slot>
+          <li
+            v-for="(option, index) of filteredOptions"
+            :id="getListId(option)"
+            :key="index"
+            :role="!(option && option.$isDisabled) ? 'option' : null"
+            class="select__element"
+          >
+            <span
+              v-if="!(option && option.$isDisabled)"
+              :class="{
+                'select__option--highlight': isOptionHighlighted(index),
+                'select__option--selected': isOptionSelected(option),
+              }"
+              :data-deselect="deselectLabelText"
+              :data-select="option && option.isCustom ? customPlaceholder : selectLabelText"
+              :data-selected="selectedLabelText"
+              class="select__option"
+              @focus="select(option)"
+              @click.stop="select(option)"
+              @mouseenter.self="pointerSet(index)"
+            >
+              <slot :index="index" :option="option" :search="search" name="option">
+                <span class="select__item">
+                  <span v-if="getOptionImageUrl(option)">
+                    <img class="tw-mr-1" height="24" width="30" :src="getOptionImageUrl(option)" alt="" />
+                  </span>
+                  <span>{{ getOptionLabel(option) }}</span>
+                </span>
+              </slot>
+            </span>
+          </li>
+          <li v-show="shouldShowNoResults && filteredOptions.length === 0 && search && !isLoading">
+            <span class="select__option">
+              <slot :search="search" name="noResult">No results</slot>
+            </span>
+          </li>
+          <slot name="afterList"></slot>
+        </ul>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import selectMixin from './selectMixin';
+import pointerMixin from './pointerMixin';
+
+export default {
+  mixins: [selectMixin, pointerMixin],
+  props: {
+    name: {
+      type: String,
+      default: '',
+    },
+    selectLabel: {
+      type: String,
+      default: undefined,
+    },
+    selectedLabel: {
+      type: String,
+      default: undefined,
+    },
+    deselectLabel: {
+      type: String,
+      default: undefined,
+    },
+    shouldShowLabels: {
+      type: Boolean,
+      default: true,
+    },
+    maxHeight: {
+      type: Number,
+      default: 300,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    openDirection: {
+      type: String,
+      default: '',
+    },
+    shouldShowNoResults: {
+      type: Boolean,
+      default: true,
+    },
+    tabindex: {
+      type: Number,
+      default: 0,
+    },
+    shouldSelectExactMatchOnBlur: {
+      type: Boolean,
+      default: false,
+    },
+    isInvalid: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    isValueVisible() {
+      if (this.isSearchable && this.isOpen) {
+        return false;
+      }
+      return !!this.modelValue;
+    },
+    isPlaceholderVisible() {
+      if (this.isSearchable && this.isOpen) {
+        return false;
+      }
+      return !this.modelValue;
+    },
+    deselectLabelText() {
+      return this.shouldShowLabels ? this.deselectLabel : '';
+    },
+    selectLabelText() {
+      return this.shouldShowLabels ? this.selectLabel : '';
+    },
+    selectedLabelText() {
+      return this.shouldShowLabels ? this.selectedLabel : '';
+    },
+    inputStyle() {
+      if (this.isSearchable) {
+        // Hide input by setting the width to 0 allowing it to receive focus
+        return this.isOpen ? { width: '100%' } : { width: '0', position: 'absolute', padding: '0' };
+      }
+      return '';
+    },
+    contentStyle() {
+      return this.options.length ? { display: 'inline-block' } : { display: 'block' };
+    },
+    isAbove() {
+      if (this.openDirection === 'above' || this.openDirection === 'top') {
+        return true;
+      }
+      if (this.openDirection === 'below' || this.openDirection === 'bottom') {
+        return false;
+      }
+      return this.preferredOpenDirection === 'above';
+    },
+  },
+  watch: {
+    isOpen(isOpen) {
+      if (isOpen && this.modelValue) {
+        const selectedOption = document.getElementById(this.getListId(this.modelValue));
+
+        if (selectedOption) {
+          this.$nextTick(() => {
+            selectedOption.scrollIntoView({ behavior: 'instant', block: 'nearest', inline: 'nearest' });
+          });
+        }
+      }
+    },
+  },
+  methods: {
+    onBlur() {
+      if (this.shouldSelectExactMatchOnBlur && this.hasExactMatch) {
+        if (!this.isOptionSelected(this.exactMatchOption)) {
+          this.select(this.exactMatchOption, this.getOptionKey(this.exactMatchOption));
+        }
+      }
+      this.deactivate();
+    },
+    getListId(option) {
+      return `${this.id}-${this.getOptionKey(option)}`;
+    },
+  },
+};
+</script>
+<style scoped>
+fieldset[disabled] .select {
+  pointer-events: none;
+}
+
+.select__spinner {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  width: 40px;
+  height: 38px;
+  display: block;
+}
+
+.select__spinner:before,
+.select__spinner:after {
+  position: absolute;
+  content: '';
+  top: 50%;
+  left: 50%;
+  margin: -8px 0 0 -8px;
+  width: 16px;
+  height: 16px;
+  border-radius: 100%;
+  border-color: #41b883 transparent transparent;
+  border-style: solid;
+  border-width: 2px;
+  box-shadow: 0 0 0 1px transparent;
+}
+
+.select__spinner:before {
+  animation: spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62);
+  animation-iteration-count: infinite;
+}
+
+.select__spinner:after {
+  animation: spinning 2.4s cubic-bezier(0.51, 0.09, 0.21, 0.8);
+  animation-iteration-count: infinite;
+}
+
+.select__loading-enter-active,
+.select__loading-leave-active {
+  transition: opacity 0.4s ease-in-out;
+  opacity: 1;
+}
+
+.select__loading-enter,
+.select__loading-leave-active {
+  opacity: 0;
+}
+
+.select,
+.select__input,
+.select__value {
+  font-family: inherit;
+  font-size: 16px;
+  touch-action: manipulation;
+}
+
+.select {
+  box-sizing: content-box;
+  display: block;
+  position: relative;
+  width: 100%;
+  min-height: 50px;
+  text-align: left;
+  color: black;
+}
+
+.select * {
+  box-sizing: border-box;
+}
+
+.select:focus {
+  outline: none;
+}
+
+.select--disabled {
+  background: #ededed;
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+.select--active {
+  z-index: 50;
+}
+
+.select--active:not(.select--above) .select__current,
+.select--active:not(.select--above) .select__input,
+.select--active:not(.select--above) .select__tags {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.select--active .select__caret {
+  transform: rotateZ(180deg);
+}
+
+.select--above.select--active .select__current,
+.select--above.select--active .select__input,
+.select--above.select--active .select__tags {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.select__input,
+.select__value {
+  position: relative;
+  display: inline-block;
+  min-height: 20px;
+  border: none;
+  border-radius: 5px;
+  background: #fff;
+  width: calc(100%);
+  transition: border 0.1s ease;
+  box-sizing: border-box;
+  vertical-align: top;
+}
+
+.select__input::placeholder {
+  color: #35495e;
+}
+
+.select__tag ~ .select__input,
+.select__tag ~ .select__value {
+  width: auto;
+}
+
+.select__input:hover,
+.select__value:hover {
+  border-color: #cfcfcf;
+}
+
+.select__input:focus,
+.select__value:focus {
+  border-color: #a8a8a8;
+  outline: none;
+}
+
+.select__tags {
+  min-height: 48px;
+  display: block;
+  padding: 14px 40px 0 16px;
+  border-radius: 5px;
+  background: #fff;
+}
+
+.select__tags input {
+  padding: 0;
+}
+
+.select__caret {
+  line-height: 16px;
+  display: block;
+  position: absolute;
+  box-sizing: border-box;
+  width: 40px;
+  height: 38px;
+  right: 1px;
+  top: 5px;
+  padding: 4px 8px;
+  margin: 0;
+  text-decoration: none;
+  text-align: center;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+.select__caret:before {
+  position: relative;
+  right: 0;
+  top: 65%;
+  color: #999;
+  margin-top: 50%;
+  border-style: solid;
+  border-width: 5px 5px 0 5px;
+  border-color: #999999 transparent transparent transparent;
+  content: '';
+}
+
+.select__placeholder {
+  color: #adadad;
+  display: inline-block;
+  margin-bottom: 10px;
+  padding-top: 2px;
+}
+
+.select__content-wrapper {
+  position: absolute;
+  display: block;
+  background: #fff;
+  width: 100%;
+  max-height: 240px;
+  overflow: auto;
+  border: 1px solid #d0d0d0;
+  border-top: none;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  z-index: 50;
+  -webkit-overflow-scrolling: touch;
+}
+
+.select__content {
+  list-style: none;
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+  min-width: 100%;
+  vertical-align: top;
+}
+
+.select--above .select__content-wrapper {
+  bottom: 100%;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  border-bottom: none;
+  border-top: 1px solid #d0d0d0;
+}
+
+.select__content::webkit-scrollbar {
+  display: none;
+}
+
+.select__element {
+  display: block;
+}
+
+.select__option {
+  display: block;
+  padding: 12px;
+  min-height: 40px;
+  line-height: 16px;
+  text-decoration: none;
+  text-transform: none;
+  vertical-align: middle;
+  position: relative;
+  cursor: pointer;
+  white-space: nowrap;
+  color: #4b545d;
+}
+
+.select__option:after {
+  top: 0;
+  right: 0;
+  position: absolute;
+  line-height: 40px;
+  padding-right: 12px;
+  padding-left: 20px;
+  font-size: 13px;
+}
+
+.select__option--highlight {
+  background: #f3f3f3;
+  outline: none;
+  color: black;
+}
+
+.select__option--highlight:after {
+  content: attr(data-select);
+  background: #f3f3f3;
+  color: silver;
+}
+
+.select__option--selected {
+  background: #f3f3f3;
+  color: black;
+  font-weight: bold;
+}
+
+.select__option--selected:after {
+  content: attr(data-selected);
+  color: silver;
+  background: inherit;
+}
+
+.select__option--selected.select__option--highlight:after {
+  content: attr(data-deselect);
+}
+
+.select--disabled .select__current,
+.select--disabled .select__caret {
+  color: #a6a6a6;
+}
+
+.select__option--disabled {
+  background: #ededed !important;
+  color: #a6a6a6 !important;
+  cursor: text;
+  pointer-events: none;
+}
+
+.select__item {
+  display: flex;
+  align-items: center;
+}
+
+.select-enter-active,
+.select-leave-active {
+  transition: all 0.15s ease;
+}
+
+.select-enter,
+.select-leave-active {
+  opacity: 0;
+}
+
+.select__strong {
+  margin-bottom: 8px;
+  line-height: 20px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+*[dir='rtl'] .select {
+  text-align: right;
+}
+
+*[dir='rtl'] .select__caret {
+  right: auto;
+  left: 1px;
+}
+
+*[dir='rtl'] .select__tags {
+  padding: 8px 8px 0px 40px;
+}
+
+*[dir='rtl'] .select__content {
+  text-align: right;
+}
+
+*[dir='rtl'] .select__option:after {
+  right: auto;
+  left: 0;
+}
+
+*[dir='rtl'] .select__clear {
+  right: auto;
+  left: 12px;
+}
+
+*[dir='rtl'] .select__spinner {
+  right: auto;
+  left: 1px;
+}
+
+@keyframes spinning {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(2turn);
+  }
+}
+</style>