<template>
  <select />
</template>

<script>
import 'select2/dist/js/select2.min';
import $ from 'jquery';

export default {
  props: {
    options: {
      type: Array,
      required: true,
    },

    modelValue: {
      type: [Number, String],
      required: true,
    },

    config: {
      type: Object,
      default: () => ({}),
    },
  },

  emits: ['update:modelValue'],

  watch: {
    options (value) {
      $(this.$el)
        .empty().select2({ data: value });
    },

    modelValue (value) {
      $(this.$el)
        .val(value)
        .trigger('change');
    },
  },

  mounted () {
    $(this.$el)
      .select2({ ...this.config, data: this.options })
      .val(this.modelValue)
      .trigger('change')
      .on('change', (ev) => {
        this.$emit('update:modelValue', ev.target.value);
      });
  },

  unmounted () {
    $(this.$el)
      .off()
      .select2('destroy');
  },
};
</script>

<style lang="scss">
@import '~select2/dist/css/select2.min.css';

.select2 {
  &-selection {
    height: 2.4375rem !important;
    border-radius: 0 !important;
    border: 1px solid #cacaca !important;

    &__rendered {
      padding: .5rem;
      font-size: 1rem !important;
      line-height: 1.5 !important;
    }

    &__arrow {
      height: 2.4375rem !important;
      top: 0;
    }
  }
}
</style>
