refactor: ♻️ refactor MkModalWindow for TS safety

This commit is contained in:
ThatOneCalculator 2023-06-23 15:36:28 -07:00
parent cf923e57ad
commit 66ef6a8da8
No known key found for this signature in database
GPG key ID: 8703CACD01000000

View file

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