LeagueStats/client/src/components/SearchForm.vue

<template>
  <form @submit.prevent="formSubmit" :class="formClasses" class="flex text-teal-100 text-lg w-full">
    <div v-if="dropdown" @click="dropdown = false" class="fixed z-20 inset-0"></div>
    <div class="relative w-full">
      <input
        v-model="summoner"
        type="text"
        :class="[elementClasses, inputClasses]"
        class="input w-full px-2 rounded-lg outline-none pl-8 pr-16 font-bold"
      />
      <div class="absolute right-0 z-30 vertical-center flex items-center h-full mr-2">
        <div
          @click="dropdown = !dropdown"
          :class="{'bg-teal-600' : dropdown}"
          class="cursor-pointer flex items-center px-2 py-1 rounded transition-all transition-fast ease-in-quad ease-out-quad hover:text-white"
        >
          <span class="selected font-bold select-none">{{ selectedRegion }}</span>
          <v-icon name="caret-down" class="ml-1"></v-icon>
        </div>
      </div>
      <transition
        enter-active-class="transition-all transition-fastest ease-out-quad"
        leave-active-class="transition-all transition-faster ease-in-quad"
        enter-class="opacity-0 scale-70"
        enter-to-class="opacity-100 scale-100"
        leave-class="opacity-100 scale-100"
        leave-to-class="opacity-0 scale-70"
      >
        <div
          v-if="dropdown"
          class="absolute right-0 z-30 text-white rounded-b shadow cursor-pointer mr-2 offsetDropDown"
        >
          <div
            v-for="(region, index) in regions"
            :key="region"
            @click="selectedRegion = region"
            :class="classRegions(index)"
            class="relative px-4b py-1 text-xs bg-teal-600 hover:bg-teal-500"
          >
            <v-icon
              v-if="region === selectedRegion"
              name="check"
              scale="0.7"
              class="absolute vertical-center offsetIcon"
            ></v-icon>
            {{ region }}
          </div>
        </div>
      </transition>
    </div>

    <button
      :class="[elementClasses, btnClasses]"
      class="input btn rounded-lg ml-2 relative"
      type="submit"
    >
      <v-icon name="search" class="absolute vertical-center horizontal-center"></v-icon>
    </button>
  </form>
</template>

<script>
export default {
  props: {
    size: {
      type: String,
      default: 'xl'
    }
  },
  data() {
    return {
      summoner: '',
      dropdown: false,
      regions: [
        'BR',
        'EUNE',
        'EUW',
        'JP',
        'KR',
        'LAN',
        'LAS',
        'NA',
        'OCE',
        'TR',
        'RU'
      ],
      selectedRegion: 'EUW'
    }
  },
  computed: {
    btnClasses() {
      return {
        'w-12': this.size === 'small',
        'w-20': this.size === 'xl'
      }
    },
    elementClasses() {
      return {
        'border-2': this.size === 'small',
        'border-4': this.size === 'xl'
      }
    },
    formClasses() {
      return {
        'max-w-lg': this.size === 'small',
      }
    },
    inputClasses() {
      return {
        'py-2': this.size === 'small',
        'py-4': this.size === 'xl'
      }
    }
  },
  methods: {
    classRegions(index) {
      return {
        'rounded-t': index === 0,
        'rounded-b': index === this.regions.length - 1
      }
    },
    formSubmit() {
      const search = this.summoner.split(' ').join('')
      if (search.length) {
        this.$emit('formSubmit', search, this.selectedRegion.toLowerCase())
      }
    }
  }
}
</script>

<style scoped>
.offsetDropDown {
  top: 57px;
  right: 1px;
}

.offsetIcon {
  left: 4px;
}

.input {
  border-color: rgba(129, 230, 217, .7);
  background: rgba(40, 94, 97, .35);
}

.input:focus,
.btn:hover {
  background: rgba(40, 94, 97, .75);
  border-color: rgba(129, 230, 217, .9);
}
</style>