3 files changed, 88 insertions, 104 deletions

diff --git a/app/src/components/Folders.vue b/app/src/components/Folders.vue
index 5c5c388..da5214d 100644
--- a/app/src/components/Folders.vue
+++ b/app/src/components/Folders.vue
@@ -9,15 +9,13 @@
   </li>
 </template>
 
-<script>
-export default {
-  props: {
-    folder: {
-      type: Object,
-      required: true,
-    },
+<script setup>
+const props = defineProps({
+  folder: {
+    type: Object,
+    required: true,
   },
-};
+});
 </script>
 
 <style lang="scss">
diff --git a/app/src/components/Panel.vue b/app/src/components/Panel.vue
index eb92af7..8bd911d 100644
--- a/app/src/components/Panel.vue
+++ b/app/src/components/Panel.vue
@@ -7,7 +7,7 @@
     <div class="grid-x">
       <div class="cell">
         <label>
-          Server <input type="text" :value="modelValue.server" required @input="emit('server', $event.target.value)">
+          Server <input type="text" v-model="modelValue.server" required>
         </label>
       </div>
     </div>
@@ -16,24 +16,23 @@
         <label>
           Port
           <Select
-            :model-value="modelValue.port"
+            v-model="modelValue.port"
             required
             :options="ports"
             :config="{ tags: true }"
-            @update:modelValue="(value) => emit('port', value)"
           />
         </label>
       </div>
     </div>
     <label>
-      Username <input type="text" :value="modelValue.username" @input="emit('username', $event.target.value)">
+      Username <input type="text" v-model="modelValue.username">
     </label>
     <label>
-      Passwort <input type="password" :value="modelValue.password" @input="emit('password', $event.target.value)">
+      Passwort <input type="password" v-model="modelValue.password">
     </label>
     <div class="grid-x">
       <div class="cell">
-        <input :id="`tls-${uid}`" type="checkbox" :checked="modelValue.tls" @input="emit('tls', $event.target.checked)">
+        <input :id="`tls-${uid}`" type="checkbox" v-model="modelValue.tls">
         <label :for="`tls-${uid}`">TLS enabled</label>
       </div>
     </div>
@@ -43,60 +42,47 @@
   </form>
 </template>
 
-<script>
-import Select from './Select';
-import dynamicModelObjectEmit from '~/mixins/dynamicModelObjectEmit';
+<script setup>
+import { inject, onMounted, ref } from 'vue';
+import Select from '~/components/Select';
 
-export default {
-  components: {
-    Select,
-  },
+const props = defineProps(['modelValue']);
+const emit = defineEmits(['update:modelValue']);
 
-  mixins: [
-    dynamicModelObjectEmit,
-  ],
+const $electron = inject('electron');
 
-  emits: ['connect'],
+const uid = crypto.getRandomValues(new Uint8Array(1));
+const apiMessage = ref({
+  type: '',
+  msg: '',
+});
 
-  data () {
-    return {
-      uid: crypto.getRandomValues(new Uint8Array(1)),
-      apiMessage: {
-        type: '',
-        msg: '',
-      },
+const ports = ref([...new Set([
+  143,
+  993,
+  Number(props.modelValue.port),
+])].map((port) => ({ id: port, text: port })));
 
-      ports: [...new Set([
-        143,
-        993,
-        Number(this.modelValue.port),
-      ])].map((port) => ({ id: port, text: port })),
-    };
-  },
-
-  mounted () {
-    this.$electron.ipcRenderer.on('imap:connect:reply', (event, success) => {
-      this.apiMessage = {
-        type: 'success',
-        msg: 'Connected!',
-      };
-    });
+function connect() {
+  $electron.ipcRenderer.send('imap:connect', JSON.parse(JSON.stringify(props.modelValue)));
+  emit('connect');
+}
 
-    this.$electron.ipcRenderer.on('imap:connect:error', (event, error) => {
-      this.apiMessage = {
-        type: 'error',
-        msg: error,
-      };
-    });
-  },
+onMounted(() => {
+  $electron.ipcRenderer.on('imap:connect:reply', (_event, _success) => {
+    apiMessage.value = {
+      type: 'success',
+      msg: 'Connected!',
+    };
+  });
 
-  methods: {
-    connect () {
-      this.$electron.ipcRenderer.send('imap:connect', JSON.parse(JSON.stringify(this.modelValue)));
-      this.$emit('connect');
-    },
-  },
-};
+  $electron.ipcRenderer.on('imap:connect:error', (_event, error) => {
+    apiMessage.value = {
+      type: 'error',
+      msg: error,
+    };
+  });
+});
 </script>
 
 <style lang="scss">
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">