refactor(frontend): 非推奨となったReactivity Transformを使わないように (#12539)

* refactor(frontend): 非推奨となったReactivity Transformを使わないように

* refactor: 不要な括弧を除去

* fix: 不要なアノテーションを除去

* fix: Refの配列をrefしている部分の対応

* refactor: 不要な括弧を除去

* fix: lint

* refactor: Ref、ShallowRef、ComputedRefの変数の宣言をletからconstに置換

* fix: type error

* chore: drop reactivity transform from eslint configuration

* refactor: remove unnecessary import

* fix: 対応漏れ

1 files changed, 7 insertions, 6 deletions

diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.vue b/packages/frontend/src/components/MkEmojiPickerDialog.vue
index 05b137e335..2cce1f5520 100644
--- a/packages/frontend/src/components/MkEmojiPickerDialog.vue
+++ b/packages/frontend/src/components/MkEmojiPickerDialog.vue
@@ -31,6 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
+import { shallowRef } from 'vue';
 import MkModal from '@/components/MkModal.vue';
 import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
 import { defaultStore } from '@/store.js';
@@ -54,23 +55,23 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-const modal = $shallowRef<InstanceType<typeof MkModal>>();
-const picker = $shallowRef<InstanceType<typeof MkEmojiPicker>>();
+const modal = shallowRef<InstanceType<typeof MkModal>>();
+const picker = shallowRef<InstanceType<typeof MkEmojiPicker>>();
 
 function chosen(emoji: any) {
 	emit('done', emoji);
 	if (props.choseAndClose) {
-		modal?.close();
+		modal.value?.close();
 	}
 }
 
 function opening() {
-	picker?.reset();
-	picker?.focus();
+	picker.value?.reset();
+	picker.value?.focus();
 
 	// 何故かちょっと待たないとフォーカスされない
 	setTimeout(() => {
-		picker?.focus();
+		picker.value?.focus();
 	}, 10);
 }
 </script>