From e5a8773bfeaf06a0085fbf8c44524637213acb94 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andreas.nedbal@in2code.de>
Date: Thu, 5 May 2022 15:51:29 +0200
Subject: [PATCH] refactor(client): refactor settings/deck to use Composition
 API (#8598)

---
 packages/client/src/pages/settings/deck.vue | 106 ++++++++------------
 1 file changed, 44 insertions(+), 62 deletions(-)

diff --git a/packages/client/src/pages/settings/deck.vue b/packages/client/src/pages/settings/deck.vue
index 46b90d3d1..2d868aa0a 100644
--- a/packages/client/src/pages/settings/deck.vue
+++ b/packages/client/src/pages/settings/deck.vue
@@ -1,36 +1,36 @@
 <template>
 <div class="_formRoot">
 	<FormGroup>
-		<template #label>{{ $ts.defaultNavigationBehaviour }}</template>
-		<FormSwitch v-model="navWindow">{{ $ts.openInWindow }}</FormSwitch>
+		<template #label>{{ i18n.ts.defaultNavigationBehaviour }}</template>
+		<FormSwitch v-model="navWindow">{{ i18n.ts.openInWindow }}</FormSwitch>
 	</FormGroup>
 
-	<FormSwitch v-model="alwaysShowMainColumn" class="_formBlock">{{ $ts._deck.alwaysShowMainColumn }}</FormSwitch>
+	<FormSwitch v-model="alwaysShowMainColumn" class="_formBlock">{{ i18n.ts._deck.alwaysShowMainColumn }}</FormSwitch>
 
 	<FormRadios v-model="columnAlign" class="_formBlock">
-		<template #label>{{ $ts._deck.columnAlign }}</template>
-		<option value="left">{{ $ts.left }}</option>
-		<option value="center">{{ $ts.center }}</option>
+		<template #label>{{ i18n.ts._deck.columnAlign }}</template>
+		<option value="left">{{ i18n.ts.left }}</option>
+		<option value="center">{{ i18n.ts.center }}</option>
 	</FormRadios>
 
 	<FormRadios v-model="columnHeaderHeight" class="_formBlock">
-		<template #label>{{ $ts._deck.columnHeaderHeight }}</template>
-		<option :value="42">{{ $ts.narrow }}</option>
-		<option :value="45">{{ $ts.medium }}</option>
-		<option :value="48">{{ $ts.wide }}</option>
+		<template #label>{{ i18n.ts._deck.columnHeaderHeight }}</template>
+		<option :value="42">{{ i18n.ts.narrow }}</option>
+		<option :value="45">{{ i18n.ts.medium }}</option>
+		<option :value="48">{{ i18n.ts.wide }}</option>
 	</FormRadios>
 
 	<FormInput v-model="columnMargin" type="number" class="_formBlock">
-		<template #label>{{ $ts._deck.columnMargin }}</template>
+		<template #label>{{ i18n.ts._deck.columnMargin }}</template>
 		<template #suffix>px</template>
 	</FormInput>
 
-	<FormLink class="_formBlock" @click="setProfile">{{ $ts._deck.profile }}<template #suffix>{{ profile }}</template></FormLink>
+	<FormLink class="_formBlock" @click="setProfile">{{ i18n.ts._deck.profile }}<template #suffix>{{ profile }}</template></FormLink>
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { computed, defineExpose, watch } from 'vue';
 import FormSwitch from '@/components/form/switch.vue';
 import FormLink from '@/components/form/link.vue';
 import FormRadios from '@/components/form/radios.vue';
@@ -40,59 +40,41 @@ import { deckStore } from '@/ui/deck/deck-store';
 import * as os from '@/os';
 import { unisonReload } from '@/scripts/unison-reload';
 import * as symbols from '@/symbols';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
-	components: {
-		FormSwitch,
-		FormLink,
-		FormInput,
-		FormRadios,
-		FormGroup,
-	},
+const navWindow = computed(deckStore.makeGetterSetter('navWindow'));
+const alwaysShowMainColumn = computed(deckStore.makeGetterSetter('alwaysShowMainColumn'));
+const columnAlign = computed(deckStore.makeGetterSetter('columnAlign'));
+const columnMargin = computed(deckStore.makeGetterSetter('columnMargin'));
+const columnHeaderHeight = computed(deckStore.makeGetterSetter('columnHeaderHeight'));
+const profile = computed(deckStore.makeGetterSetter('profile'));
 
-	emits: ['info'],
+watch(navWindow, async () => {
+	const { canceled } = await os.confirm({
+		type: 'info',
+		text: i18n.ts.reloadToApplySetting,
+	});
+	if (canceled) return;
 
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.deck,
-				icon: 'fas fa-columns',
-				bg: 'var(--bg)',
-			},
-		}
-	},
+	unisonReload();
+});
 
-	computed: {
-		navWindow: deckStore.makeGetterSetter('navWindow'),
-		alwaysShowMainColumn: deckStore.makeGetterSetter('alwaysShowMainColumn'),
-		columnAlign: deckStore.makeGetterSetter('columnAlign'),
-		columnMargin: deckStore.makeGetterSetter('columnMargin'),
-		columnHeaderHeight: deckStore.makeGetterSetter('columnHeaderHeight'),
-		profile: deckStore.makeGetterSetter('profile'),
-	},
+async function setProfile() {
+	const { canceled, result: name } = await os.inputText({
+		title: i18n.ts._deck.profile,
+		allowEmpty: false
+	});
+	if (canceled) return;
+	
+	profile.value = name;
+	unisonReload();
+}
 
-	watch: {
-		async navWindow() {
-			const { canceled } = await os.confirm({
-				type: 'info',
-				text: this.$ts.reloadToApplySetting,
-			});
-			if (canceled) return;
-
-			unisonReload();
-		}
-	},
-
-	methods: {
-		async setProfile() {
-			const { canceled, result: name } = await os.inputText({
-				title: this.$ts._deck.profile,
-				allowEmpty: false
-			});
-			if (canceled) return;
-			this.profile = name;
-			unisonReload();
-		}
+defineExpose({
+	[symbols.PAGE_INFO]: {
+		title: i18n.ts.deck,
+		icon: 'fas fa-columns',
+		bg: 'var(--bg)',
 	}
 });
 </script>