1 files changed, 81 insertions, 0 deletions
diff --git a/app/src/components/Select.vue b/app/src/components/Select.vue
new file mode 100644
index 0000000..f2d1187
--- /dev/null
+++ b/app/src/components/Select.vue
@@ -0,0 +1,81 @@
+<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>