From 7e4a2e3e3a45f0dd302ab3b0e3ac49ad7189eba4 Mon Sep 17 00:00:00 2001
From: Daniel Weipert <code@drogueronin.de>
Date: Tue, 7 Nov 2023 23:47:37 +0100
Subject: Update

---
 app/src/components/Select.vue | 86 +++++++++++++++++++++----------------------
 1 file changed, 43 insertions(+), 43 deletions(-)

(limited to 'app/src/components/Select.vue')

diff --git a/app/src/components/Select.vue b/app/src/components/Select.vue
index f2d1187..0f55cca 100644
--- a/app/src/components/Select.vue
+++ b/app/src/components/Select.vue
@@ -1,60 +1,60 @@
 <template>
-  <select />
+  <select ref="$el" />
 </template>
 
-<script>
+<script setup>
+import { onMounted, onUnmounted, ref, watch } from 'vue';
 import 'select2/dist/js/select2.min';
 import $ from 'jquery';
 
-export default {
-  props: {
-    options: {
-      type: Array,
-      required: true,
-    },
+const props = defineProps({
+  modelValue: {},
 
-    modelValue: {
-      type: [Number, String],
-      required: true,
-    },
+  options: {
+    type: Array,
+    required: true,
+  },
 
-    config: {
-      type: Object,
-      default: () => ({}),
-    },
+  modelValue: {
+    type: [Number, String],
+    required: true,
   },
 
-  emits: ['update:modelValue'],
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const emit = defineEmits(['update:modelValue']);
 
-  watch: {
-    options (value) {
-      $(this.$el)
-        .empty().select2({ data: value });
-    },
+const $el = ref(null);
 
-    modelValue (value) {
-      $(this.$el)
-        .val(value)
-        .trigger('change');
-    },
-  },
+onMounted(() => {
+  $($el.value)
+    .select2({ ...props.config, data: props.options })
+    .val(props.modelValue)
+    .trigger('change')
+    .on('change', (event) => {
+      emit('update:modelValue', event.target.value);
+    });
+});
 
-  mounted () {
-    $(this.$el)
-      .select2({ ...this.config, data: this.options })
-      .val(this.modelValue)
-      .trigger('change')
-      .on('change', (ev) => {
-        this.$emit('update:modelValue', ev.target.value);
-      });
-  },
+onUnmounted(() => {
+  $($el.value)
+    .off()
+    .select2('destroy');
+});
 
-  unmounted () {
-    $(this.$el)
-      .off()
-      .select2('destroy');
-  },
-};
+watch(() => props.options, (value) => {
+  $($el.value)
+    .empty().select2({ data: value });
+});
+
+watch(() => props.modelValue, (value) => {
+  $($el.value)
+    .val(value)
+    .trigger('change');
+});
 </script>
 
 <style lang="scss">
-- 
cgit v1.2.3