relayers-network-ui/components/base-select.vue

<template>
  <div v-on-clickAway="clickOutside" :class="$style.select">
    <button
      :disabled="disabled"
      :tabindex="tabindex"
      :class="[$style.select__selected, $style[type], $style[size], { [$style.select__selected_open]: open }]"
      @click="onSelectToggle"
    >
      {{ selected }}
    </button>

    <label v-if="label" :class="$style.select__label">
      {{ label }}
    </label>

    <div :class="[$style.select__items, { [$style.select__items_hide]: !open }]">
      <button
        v-for="option of options"
        :key="option"
        :class="[$style.select__item, { [$style.select__item_selected]: option === selected }]"
        @click="setSelected(option)"
      >
        {{ option }}
      </button>
    </div>
  </div>
</template>

<script>
import { directive as onClickAway } from 'vue-clickaway'
import { numbers } from '@/constants'

export default {
  directives: {
    onClickAway: onClickAway,
  },
  props: {
    options: {
      type: Array,
      required: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    default: {
      type: String,
      required: false,
      default: null,
    },
    tabindex: {
      type: Number,
      required: false,
      default: 0,
    },
    label: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: 'defaultType',
      validator(value) {
        return ['defaultType'].includes(value)
      },
    },
    size: {
      type: String,
      default: 'defaultSize',
      validator(value) {
        return ['defaultSize', 'large', 'medium'].includes(value)
      },
    },
  },
  data() {
    return {
      selected: this.default || this.options[numbers.ZERO],
      open: false,
    }
  },
  mounted() {
    this.$emit('input', this.selected)
  },
  methods: {
    setSelected(option) {
      this.open = false
      this.selected = option
      this.$emit('input', option)
    },
    clickOutside() {
      this.open = false
    },
    onSelectToggle() {
      this.open = !this.open
    },
  },
}
</script>

<style lang="scss" module>
.select {
  position: relative;
  margin: 0;
  display: block;
  width: 100%;
  text-align: left;
  &__selected {
    position: relative;
    width: 100%;
    height: 100%;
    font-family: $font-family-main;
    font-weight: $font-weight-regular;
    color: $color-white;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: $color-transparent;
    border: none;
    border-radius: 0.4rem;
    opacity: $opacity-08;
    cursor: pointer;
    transition: opacity $duration-animation-02s ease;
    z-index: $zIndex-4;
    overflow: hidden;
    outline: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:hover:not([disabled]),
    &:focus:not([disabled]) {
      opacity: $opacity-default;
      -moz-appearance: number-input;
    }
    &:focus:not([disabled]) {
      outline: none;
    }
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: auto;
      right: 2rem;
      bottom: auto;
      height: 1rem;
      width: 1rem;
      display: block;
      border-width: 0 0 0.1rem 0.1rem;
      border-style: solid;
      border-color: $color-white;
      transform-origin: center center;
      transform: translateY(-50%) rotate(-45deg);
      transition: transform $duration-animation-02s ease, border-color $duration-animation-02s ease;
    }
    &_open {
      &::after {
        transform: rotate(135deg);
      }
    }
  }

  &__label {
    position: absolute;
    left: 2rem;
    top: 50%;
    margin: 0;
    padding: 0;
    display: inline-block;
    font-weight: $font-weight-regular;
    font-size: 1.2rem;
    line-height: 1.43;
    color: $color-grey;
    background-color: $color-transparent;
    transform-origin: left bottom;
    transform: translate(0, -145%);
    transition: transform $duration-animation-02s ease, font-size $duration-animation-02s ease, color $duration-animation-02s ease;
    touch-action: manipulation;
    pointer-events: none;
    z-index: $zIndex-4;
  }

  &__items {
    position: absolute;
    top: calc(100% - 0.3rem);
    left: 0;
    right: 0;
    max-height: 27.6rem;
    background-color: $color-dark-heavy;
    border-right: 0.1rem solid $color-white-02;
    border-left: 0.1rem solid $color-white-02;
    border-bottom: 0.1rem solid $color-white-02;
    border-radius: 0 0 0.4rem 0.4rem;
    box-shadow: 0 1rem 2rem $color-black-004, 0 0.2rem 0.6rem $color-black-004, 0 0 0.1rem $color-black-004;
    overflow: auto;
    z-index: $zIndex-3;
    &_hide {
      display: none;
    }
  }
  &__item {
    padding: 1.5rem 2rem 1.4rem;
    width: 100%;
    font-family: $font-family-main;
    font-weight: $font-weight-regular;
    font-size: 1.8rem;
    line-height: 1.2;
    color: $color-grey;
    text-align: left;
    background-color: $color-transparent;
    border: none;
    border-bottom: 0.1rem solid $color-dark;
    box-shadow: 0 0.1rem $color-dark-light;
    transition: color $duration-animation-02s ease, background-color $duration-animation-02s ease;
    cursor: pointer;
    outline: none;
    user-select: none;
    &:first-child {
      padding: 1.8rem 2rem 1.4rem;
    }
    &:last-child {
      border-color: $color-transparent;
      box-shadow: none;
    }
    &:hover:not([disabled]) {
      color: $color-white;
      border-bottom: 0.1rem solid $color-grey-heavy;
      background-color: $color-grey-heavy;
    }
    &:focus-within:not([disabled]),
    &:active:not([disabled]) {
      color: $color-white;
    }
    &_selected {
      color: $color-white;
    }
  }
}

/* Types */
/* defaultType */
.defaultType {
  color: $color-white;
  background-color: $color-input-bg;
  border: $size-input-border solid $color-white-01;

  &:hover:not([disabled]) {
    background-color: $color-input-bg-bold;
    border: $size-input-border solid $color-white-03;
  }
  &:focus-within:not([disabled]),
  &:active:not([disabled]) {
    background-color: $color-input-bg-light;
    border: $size-input-border solid $color-white-03;
  }
}

/* Sizes */
/* defaultSize, large, medium */
.defaultSize {
  padding: 3.1rem 3.6rem 1.2rem 2rem;
  font-size: 1.8rem;
  line-height: 1.43;
  &::placeholder {
    font-size: 1.6rem;
  }
}
.large {
  padding: 2rem;
  font-size: 1.6rem;
  line-height: 1.25;
  &::placeholder {
    font-size: 1.6rem;
  }
}
.medium {
  padding: 1.2rem;
  font-size: 1.4rem;
  line-height: 1.25;
  &::placeholder {
    font-size: 1.4rem;
  }
}
</style>