refactor(client): use setup sugar

packages/client/src/components/ui/modal.vue

@@ -1,5 +1,5 @@
 <template>
-<transition :name="$store.state.animation ? (type === 'drawer') ? 'modal-drawer' : (type === 'popup') ? 'modal-popup' : 'modal' : ''" :duration="$store.state.animation ? 200 : 0" appear @after-leave="$emit('closed')" @enter="$emit('opening')" @after-enter="childRendered">
+<transition :name="$store.state.animation ? (type === 'drawer') ? 'modal-drawer' : (type === 'popup') ? 'modal-popup' : 'modal' : ''" :duration="$store.state.animation ? 200 : 0" appear @after-leave="emit('closed')" @enter="emit('opening')" @after-enter="childRendered">
 	<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" class="qzhlnise" :class="{ drawer: type === 'drawer', dialog: type === 'dialog' || type === 'dialog:top', popup: type === 'popup' }" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
 		<div class="bg _modalBg" :class="{ transparent: transparentBg && (type === 'popup') }" :style="{ zIndex }" @click="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
 		<div ref="content" class="content" :class="{ fixed, top: type === 'dialog:top' }" :style="{ zIndex }" @click.self="onBgClick">
@@ -9,8 +9,8 @@
 </transition>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, nextTick, onMounted, computed, PropType, ref, watch } from 'vue';
+import { nextTick, onMounted, computed, ref, watch, provide } from 'vue';
 import * as os from '@/os';
 import { isTouchUsing } from '@/scripts/touch';
 import { defaultStore } from '@/store';
@@ -25,51 +25,33 @@ function getFixedContainer(el: Element | null): Element | null {
 	}
 }
 
-export default defineComponent({
+const props = withDefaults(defineProps<{
-	provide: {
+	manualShowing?: boolean;
-		modal: true
+	srcCenter?: boolean;
-	},
+	src?: HTMLElement;
+	preferType?: string;
+	zPriority?: 'low' | 'middle' | 'high';
+	noOverlap?: boolean;
+	transparentBg?: boolean;
+}>(), {
+	manualShowing: null,
+	src: null,
+	preferType: 'auto',
+	zPriority: 'low',
+	noOverlap: true,
+	transparentBg: false,
+});
 
-	props: {
+const emit = defineEmits<{
-		manualShowing: {
+	(ev: 'opening'): void;
-			type: Boolean,
+	(ev: 'click'): void;
-			required: false,
+	(ev: 'esc'): void;
-			default: null,
+	(ev: 'close'): void;
-		},
+	(ev: 'closed'): void;
-		srcCenter: {
+}>();
-			type: Boolean,
-			required: false
-		},
-		src: {
-			type: Object as PropType<HTMLElement>,
-			required: false,
-			default: null,
-		},
-		preferType: {
-			required: false,
-			type: String,
-			default: 'auto',
-		},
-		zPriority: {
-			type: String as PropType<'low' | 'middle' | 'high'>,
-			required: false,
-			default: 'low',
-		},
-		noOverlap: {
-			type: Boolean,
-			required: false,
-			default: true,
-		},
-		transparentBg: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
 
-	emits: ['opening', 'click', 'esc', 'close', 'closed'],
+provide('modal', true);
 
-	setup(props, context) {
 const maxHeight = ref<number>();
 const fixed = ref(false);
 const transformOrigin = ref('center');
@@ -94,12 +76,12 @@ export default defineComponent({
 	// eslint-disable-next-line vue/no-mutating-props
 	if (props.src) props.src.style.pointerEvents = 'auto';
 	showing.value = false;
-			context.emit('close');
+	emit('close');
 };
 
 const onBgClick = () => {
 	if (contentClicking) return;
-			context.emit('click');
+	emit('click');
 };
 
 if (type.value === 'drawer') {
@@ -107,7 +89,7 @@ export default defineComponent({
 }
 
 const keymap = {
-			'esc': () => context.emit('esc'),
+	'esc': () => emit('esc'),
 };
 
 const MARGIN = 16;
@@ -207,9 +189,9 @@ export default defineComponent({
 const childRendered = () => {
 	// モーダルコンテンツにマウスボタンが押され、コンテンツ外でマウスボタンが離されたときにモーダルバックグラウンドクリックと判定させないためにマウスイベントを監視しフラグ管理する
 	const el = content.value!.children[0];
-			el.addEventListener('mousedown', e => {
+	el.addEventListener('mousedown', ev => {
 		contentClicking = true;
-				window.addEventListener('mouseup', e => {
+		window.addEventListener('mouseup', ev => {
 			// click イベントより先に mouseup イベントが発生するかもしれないのでちょっと待つ
 			window.setTimeout(() => {
 				contentClicking = false;
@@ -239,20 +221,8 @@ export default defineComponent({
 	});
 });
 
-		return {
+defineExpose({
-			showing,
-			type,
-			fixed,
-			content,
-			transformOrigin,
-			maxHeight,
 	close,
-			zIndex,
-			keymap,
-			onBgClick,
-			childRendered,
-		};
-	},
 });
 </script>