From a00a1fd6b5b6b0d34ea40f39e5db188a6c2a4793 Mon Sep 17 00:00:00 2001 From: Andreas Nedbal <andreas.nedbal@in2code.de> Date: Sun, 1 May 2022 08:50:09 +0200 Subject: [PATCH] Refactor custom-css to use Composition API (#8571) * refactor(client): refactor custom-css to use Composition API * Apply review suggestion from @Johann150 Co-authored-by: Johann150 <johann@qwertqwefsday.eu> Co-authored-by: Johann150 <johann@qwertqwefsday.eu> --- .../client/src/pages/settings/custom-css.vue | 56 ++++++++----------- 1 file changed, 22 insertions(+), 34 deletions(-) diff --git a/packages/client/src/pages/settings/custom-css.vue b/packages/client/src/pages/settings/custom-css.vue index 556ee30c1..20db077ce 100644 --- a/packages/client/src/pages/settings/custom-css.vue +++ b/packages/client/src/pages/settings/custom-css.vue @@ -1,6 +1,6 @@ <template> <div class="_formRoot"> - <FormInfo warn class="_formBlock">{{ $ts.customCssWarn }}</FormInfo> + <FormInfo warn class="_formBlock">{{ i18n.ts.customCssWarn }}</FormInfo> <FormTextarea v-model="localCustomCss" manual-save tall class="_monospace _formBlock" style="tab-size: 2;"> <template #label>CSS</template> @@ -8,50 +8,38 @@ </div> </template> -<script lang="ts"> -import { defineComponent } from 'vue'; +<script lang="ts" setup> +import { defineExpose, ref, watch } from 'vue'; import FormTextarea from '@/components/form/textarea.vue'; import FormInfo from '@/components/ui/info.vue'; import * as os from '@/os'; import { unisonReload } from '@/scripts/unison-reload'; import * as symbols from '@/symbols'; -import { defaultStore } from '@/store'; +import { i18n } from '@/i18n'; -export default defineComponent({ - components: { - FormTextarea, - FormInfo, - }, +const localCustomCss = ref(localStorage.getItem('customCss') ?? ''); - emits: ['info'], +async function apply() { + localStorage.setItem('customCss', localCustomCss.value); - data() { - return { - [symbols.PAGE_INFO]: { - title: this.$ts.customCss, - icon: 'fas fa-code', - bg: 'var(--bg)', - }, - localCustomCss: localStorage.getItem('customCss') - } - }, + const { canceled } = await os.confirm({ + type: 'info', + text: i18n.ts.reloadToApplySetting, + }); + if (canceled) return; - mounted() { - this.$watch('localCustomCss', this.apply); - }, + unisonReload(); +} - methods: { - async apply() { - localStorage.setItem('customCss', this.localCustomCss); +watch(localCustomCss, async () => { + await apply(); +}); - const { canceled } = await os.confirm({ - type: 'info', - text: this.$ts.reloadToApplySetting, - }); - if (canceled) return; - - unisonReload(); - } +defineExpose({ + [symbols.PAGE_INFO]: { + title: i18n.ts.customCss, + icon: 'fas fa-code', + bg: 'var(--bg)', } }); </script>