<template>
  <v-select class="dropdown" :placeholder="placeholder" :options="options" :clearable="clearable" :class="(border ? 'border' : '') + (optionsShadow ? ' options-shadow' : '')+ (inputShadow ? ' input-shadow' : '')" v-model="value" @input="$emit('input', $event)">
    <template #open-indicator="{ attributes }">
      <svg width="10" height="10" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="attributes">
        <path d="M8.56406 0.126563L4.64062 4.05L0.717187 0.126563C0.548437 -0.0421875 0.28125 -0.0421875 0.126563 0.126563C-0.0421875 0.295313 -0.0421875 0.5625 0.126563 0.717187L4.34531 4.93594C4.42969 5.02031 4.54219 5.0625 4.64062 5.0625C4.73906 5.0625 4.85156 5.02031 4.93594 4.93594L9.15469 0.717187C9.32344 0.548437 9.32344 0.28125 9.15469 0.126563C8.98594 -0.0421875 8.73281 -0.0421875 8.56406 0.126563Z" fill="black"/>
      </svg>
    </template>
    <template #no-options="{ search }">
      <p v-bind="search">
      </p>
    </template>
  </v-select>
</template>

<script>
// import Vue from 'vue'
import vSelect from 'vue-select'
import 'vue-select/dist/vue-select.css'
// Vue.component('VSelect', vSelect)

export default {
  components: {
    vSelect
  },
  props: {
    value: {
      type: Object,
      default: null
    },
    options: {
      type: Array,
      default: () => []
    },
    clearable: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: String,
      default: 'Select an option'
    },
    border: {
      type: Boolean,
      default: true
    },
    optionsShadow: {
      type: Boolean,
      default: true
    },
    inputShadow: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style src="./dropdown.scss" lang="scss"></style>
<style src="../assets/fonts/gilmer/gilmer.css"></style>
