From 82e81a0984cf078bfe2b9a47a4e8418ecf39dd45 Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Fri, 28 Jan 2022 12:30:59 +0900 Subject: [PATCH] refactor(client): use composition api --- .../client/src/pages/settings/reaction.vue | 139 ++++++++---------- 1 file changed, 59 insertions(+), 80 deletions(-) diff --git a/packages/client/src/pages/settings/reaction.vue b/packages/client/src/pages/settings/reaction.vue index e5b118994..ae3e1a118 100644 --- a/packages/client/src/pages/settings/reaction.vue +++ b/packages/client/src/pages/settings/reaction.vue @@ -44,8 +44,8 @@ </div> </template> -<script lang="ts"> -import { defineComponent } from 'vue'; +<script lang="ts" setup> +import { watch } from 'vue'; import XDraggable from 'vuedraggable'; import FormInput from '@/components/form/input.vue'; import FormRadios from '@/components/form/radios.vue'; @@ -56,91 +56,70 @@ import FormSwitch from '@/components/form/switch.vue'; import * as os from '@/os'; import { defaultStore } from '@/store'; import * as symbols from '@/symbols'; +import { i18n } from '@/i18n'; -export default defineComponent({ - components: { - FormInput, - FormButton, - FromSlot, - FormRadios, - FormSection, - FormSwitch, - XDraggable, - }, +let reactions = $ref(JSON.parse(JSON.stringify(defaultStore.state.reactions))); - emits: ['info'], - - data() { - return { - [symbols.PAGE_INFO]: { - title: this.$ts.reaction, - icon: 'fas fa-laugh', - action: { - icon: 'fas fa-eye', - handler: this.preview - }, - bg: 'var(--bg)', - }, - reactions: JSON.parse(JSON.stringify(this.$store.state.reactions)), +const reactionPickerWidth = $computed(defaultStore.makeGetterSetter('reactionPickerWidth')); +const reactionPickerHeight = $computed(defaultStore.makeGetterSetter('reactionPickerHeight')); +const reactionPickerUseDrawerForMobile = $computed(defaultStore.makeGetterSetter('reactionPickerUseDrawerForMobile')); + +function save() { + defaultStore.set('reactions', reactions); +} + +function remove(reaction, ev: MouseEvent) { + os.popupMenu([{ + text: i18n.ts.remove, + action: () => { + reactions = reactions.filter(x => x !== reaction); } - }, + }], ev.currentTarget ?? ev.target); +} - computed: { - reactionPickerWidth: defaultStore.makeGetterSetter('reactionPickerWidth'), - reactionPickerHeight: defaultStore.makeGetterSetter('reactionPickerHeight'), - reactionPickerUseDrawerForMobile: defaultStore.makeGetterSetter('reactionPickerUseDrawerForMobile'), - }, +function preview(ev: MouseEvent) { + os.popup(import('@/components/emoji-picker-dialog.vue'), { + asReactionPicker: true, + src: ev.currentTarget ?? ev.target, + }, {}, 'closed'); +} - watch: { - reactions: { - handler() { - this.save(); - }, - deep: true +async function setDefault() { + const { canceled } = await os.confirm({ + type: 'warning', + text: i18n.ts.resetAreYouSure, + }); + if (canceled) return; + + reactions = JSON.parse(JSON.stringify(defaultStore.def.reactions.default)); +} + +function chooseEmoji(ev: MouseEvent) { + os.pickEmoji(ev.currentTarget ?? ev.target, { + showPinned: false + }).then(emoji => { + if (!reactions.includes(emoji)) { + reactions.push(emoji); } + }); +} + +watch($$(reactions), () => { + save(); +}, { + deep: true, +}); + +defineExpose({ + [symbols.PAGE_INFO]: { + title: i18n.ts.reaction, + icon: 'fas fa-laugh', + action: { + icon: 'fas fa-eye', + handler: preview, + }, + bg: 'var(--bg)', }, - - methods: { - save() { - this.$store.set('reactions', this.reactions); - }, - - remove(reaction, ev) { - os.popupMenu([{ - text: this.$ts.remove, - action: () => { - this.reactions = this.reactions.filter(x => x !== reaction) - } - }], ev.currentTarget || ev.target); - }, - - preview(ev) { - os.popup(import('@/components/emoji-picker-dialog.vue'), { - asReactionPicker: true, - src: ev.currentTarget || ev.target, - }, {}, 'closed'); - }, - - async setDefault() { - const { canceled } = await os.confirm({ - type: 'warning', - text: this.$ts.resetAreYouSure, - }); - if (canceled) return; - - this.reactions = JSON.parse(JSON.stringify(this.$store.def.reactions.default)); - }, - - chooseEmoji(ev) { - os.pickEmoji(ev.currentTarget || ev.target, { - showPinned: false - }).then(emoji => { - if (!this.reactions.includes(emoji)) { - this.reactions.push(emoji); - } - }); - } - } }); </script>