refactor: ♻️ refactor MkModalWindow for TS safety

packages/client/src/components/MkModalWindow.vue

@@ -10,20 +10,20 @@
 			ref="rootEl"
 			class="ebkgoccj"
 			:style="{
-				width: `${width}px`,
+				width: `${props.width}px`,
 				height: scroll
 					? height
-						? `${height}px`
+						? `${props.height}px`
 						: null
 					: height
-					? `min(${height}px, 100%)`
+					? `min(${props.height}px, 100%)`
 					: '100%',
 			}"
 			tabindex="-1"
 		>
 			<div ref="headerEl" class="header">
 				<button
-					v-if="withOkButton"
+					v-if="props.withOkButton"
 					:aria-label="i18n.t('close')"
 					class="_button"
 					@click="$emit('close')"
@@ -35,7 +35,7 @@
 					<slot name="header"></slot>
 				</span>
 				<button
-					v-if="!withOkButton"
+					v-if="!props.withOkButton"
 					:aria-label="i18n.t('close')"
 					class="_button"
 					@click="$emit('close')"
@@ -43,10 +43,10 @@
 					<i class="ph-x ph-bold ph-lg"></i>
 				</button>
 				<button
-					v-if="withOkButton"
+					v-if="props.withOkButton"
 					:aria-label="i18n.t('ok')"
 					class="_button"
-					:disabled="okButtonDisabled"
+					:disabled="props.okButtonDisabled"
 					@click="$emit('ok')"
 				>
 					<i class="ph-check ph-bold ph-lg"></i>
@@ -92,8 +92,10 @@ let modal = $shallowRef<InstanceType<typeof MkModal>>();
 let rootEl = $shallowRef<HTMLElement>();
 let headerEl = $shallowRef<HTMLElement>();
 
-const close = () => {
-	modal.close();
+const close = (ev) => {
+	if (modal != null) {
+		modal.close(ev);
+	}
 };
 
 const onBgClick = () => {