summaryrefslogtreecommitdiff
path: root/app/src/components
diff options
context:
space:
mode:
authorDaniel Weipert <code@drogueronin.de>2023-11-07 23:47:37 +0100
committerDaniel Weipert <code@drogueronin.de>2023-11-07 23:47:37 +0100
commit7e4a2e3e3a45f0dd302ab3b0e3ac49ad7189eba4 (patch)
treec2a65bd1af9bb55de7680625557260566a1e6087 /app/src/components
parent30c8c2f2b05bab8b962b51c0faeb282980324a5c (diff)
UpdateHEADmain
Diffstat (limited to 'app/src/components')
-rw-r--r--app/src/components/Folders.vue14
-rw-r--r--app/src/components/Panel.vue92
-rw-r--r--app/src/components/Select.vue86
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">