@designcrowd/fe-shared-lib 1.0.0-test-publish

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

@@ -0,0 +1,583 @@
+<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 :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">
+      <transition name="select__loading">
+        <slot name="loading">
+          <div v-show="isLoading" class="select__spinner" />
+        </slot>
+      </transition>
+      <input
+        v-if="isSearchable"
+        :id="id"
+        ref="search"
+        :aria-controls="`listbox-${id}`"
+        :disabled="isDisabled"
+        :name="name"
+        :placeholder="placeholder"
+        :style="inputStyle"
+        :tabindex="tabindex"
+        :value="search"
+        autocomplete="off"
+        class="select__input"
+        spellcheck="false"
+        type="text"
+        @input.stop="updateSearch($event.target.value)"
+        @focus.prevent="activate"
+        @blur.prevent="deactivate"
+        @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: 'Press enter to select',
+    },
+    selectedLabel: {
+      type: String,
+      default: 'Selected',
+    },
+    deselectLabel: {
+      type: String,
+      default: 'Press enter to remove',
+    },
+    shouldShowLabels: {
+      type: Boolean,
+      default: true,
+    },
+    maxHeight: {
+      type: Number,
+      default: 300,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    openDirection: {
+      type: String,
+      default: '',
+    },
+    shouldShowNoResults: {
+      type: Boolean,
+      default: true,
+    },
+    tabindex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  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.value) {
+        const selectedOption = document.getElementById(this.getListId(this.value));
+
+        if (selectedOption) {
+          this.$nextTick(() => {
+            selectedOption.scrollIntoView({ behavior: 'instant', block: 'nearest', inline: 'nearest' });
+          });
+        }
+      }
+    },
+  },
+  methods: {
+    getListId(option) {
+      return `${this.id}-${this.getOptionKey(option)}`;
+    },
+  },
+};
+</script>
+<style scoped>
+fieldset[disabled] .select {
+  pointer-events: none;
+}
+
+.select__spinner {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  width: 40px;
+  height: 38px;
+  background: #fff;
+  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;
+  line-height: 20px;
+  border: none;
+  border-radius: 5px;
+  background: #fff;
+  padding: 0 0 0 5px;
+  width: calc(100%);
+  transition: border 0.1s ease;
+  box-sizing: border-box;
+  margin-bottom: 8px;
+  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__value {
+  padding-left: 5px;
+  margin-bottom: 8px;
+}
+
+.select__tags {
+  min-height: 48px;
+  display: block;
+  padding: 12px 40px 0 8px;
+  border-radius: 5px;
+  border: 1px solid #d0d0d0;
+  background: #fff;
+  font-size: 14px;
+}
+
+.select__caret {
+  line-height: 16px;
+  display: block;
+  position: absolute;
+  box-sizing: border-box;
+  width: 40px;
+  height: 38px;
+  right: 1px;
+  top: 4px;
+  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: 4px;
+  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 {
+  background: #ededed;
+  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>

package/src/atoms/components/Select/pointerMixin.js

@@ -0,0 +1,99 @@
+export default {
+  data() {
+    return {
+      pointer: 0,
+      pointerDirty: false,
+    };
+  },
+  props: {
+    shouldShowPointer: {
+      type: Boolean,
+      default: true,
+    },
+    optionHeight: {
+      type: Number,
+      default: 40,
+    },
+    shouldCloseOnSelect: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    pointerPosition() {
+      return this.pointer * this.optionHeight;
+    },
+    visibleElements() {
+      return this.optimizedHeight / this.optionHeight;
+    },
+  },
+  watch: {
+    filteredOptions() {
+      this.pointerAdjust();
+    },
+    isOpen() {
+      this.pointerDirty = false;
+    },
+    pointer() {
+      if (this.$refs.search) {
+        this.$refs.search.setAttribute('aria-activedescendant', `${this.id}-${this.pointer.toString()}`);
+      }
+    },
+  },
+  methods: {
+    isOptionHighlighted(index) {
+      return index === this.pointer && this.shouldShowPointer;
+    },
+    addPointerElement({ key } = 'Enter') {
+      if (this.filteredOptions.length > 0) {
+        this.select(this.filteredOptions[this.pointer], key);
+      }
+      this.pointerReset();
+    },
+    shouldScrollDown() {
+      return this.$refs.list.scrollTop <= this.pointerPosition - (this.visibleElements - 1) * this.optionHeight;
+    },
+    shouldScrollUp() {
+      return this.$refs.list.scrollTop >= this.pointerPosition;
+    },
+    pointerForward() {
+      if (this.pointer < this.filteredOptions.length - 1) {
+        this.pointer += 1;
+
+        if (this.shouldScrollDown()) {
+          this.$refs.list.scrollTop = this.pointerPosition - (this.visibleElements - 1) * this.optionHeight;
+        }
+      }
+      this.pointerDirty = true;
+    },
+    pointerBackward() {
+      if (this.pointer > 0) {
+        this.pointer -= 1;
+
+        if (this.shouldScrollUp()) {
+          this.$refs.list.scrollTop = this.pointerPosition;
+        }
+      }
+      this.pointerDirty = true;
+    },
+    pointerReset() {
+      if (!this.shouldCloseOnSelect) {
+        return;
+      }
+      this.pointer = 0;
+
+      if (this.$refs.list) {
+        this.$refs.list.scrollTop = 0;
+      }
+    },
+    pointerAdjust() {
+      if (this.pointer >= this.filteredOptions.length - 1) {
+        this.pointer = this.filteredOptions.length ? this.filteredOptions.length - 1 : 0;
+      }
+    },
+    pointerSet(index) {
+      this.pointer = index;
+      this.pointerDirty = true;
+    },
+  },
+};