natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: basically just undo my previous modal changes

This commit is contained in:
freeplay 2023-06-24 16:35:56 -04:00
parent 0b2a84d805
commit ce53288bf0
3 changed files with 59 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/client/src/components/MkMenu.vue
View File

@ -3,7 +3,6 @@
ref="focusTrap"
v-model:active="isActive"
:return-focus-on-deactivate="!noReturnFocus"
:initial-focus="() => itemsEl.children[0]"
@deactivate="emit('close')"
>
<div>

12
packages/client/src/components/MkModal.vue
View File

@ -14,16 +14,17 @@
:duration="transitionDuration"
appear
@after-leave="emit('closed')"
@keyup.esc="emit('click')"
@enter="emit('opening')"
@after-enter="onOpened"
>
<FocusTrap
v-model:active="isActive"
:return-focus-on-deactivate="false"
@deactivate="close"
:return-focus-on-deactivate="!noReturnFocus"
>
<div
v-show="manualShowing != null ? manualShowing : showing"
v-hotkey.global="keymap"
:class="[
$style.root,
{
@ -43,6 +44,7 @@
'--transformOrigin': transformOrigin,
}"
tabindex="-1"
v-focus
>
<div
class="_modalBg data-cy-bg"
@ -206,6 +208,10 @@ if (type === "drawer") {
maxHeight = window.innerHeight / 1.5;
}
const keymap = {
esc: () => emit("esc"),
};
const MARGIN = 16;
const align = () => {
@ -381,8 +387,6 @@ onMounted(() => {
{ immediate: true }
);
content.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')?.focus();
nextTick(() => {
new ResizeObserver((entries, observer) => {
align();

100
packages/client/src/components/MkModalWindow.vue
View File

@ -6,56 +6,58 @@
@keyup.esc="$emit('close')"
@closed="$emit('closed')"
>
<div
ref="rootEl"
class="ebkgoccj"
:style="{
width: `${props.width}px`,
height: scroll
? height
? `${props.height}px`
: null
: height
? `min(${props.height}px, 100%)`
: '100%',
}"
tabindex="-1"
>
<div ref="headerEl" class="header">
<button
v-if="props.withOkButton"
:aria-label="i18n.t('close')"
class="_button"
@click="$emit('close')"
v-tooltip="i18n.ts.close"
>
<i class="ph-x ph-bold ph-lg"></i>
</button>
<span class="title">
<slot name="header"></slot>
</span>
<button
v-if="!props.withOkButton"
:aria-label="i18n.t('close')"
class="_button"
@click="$emit('close')"
>
<i class="ph-x ph-bold ph-lg"></i>
</button>
<button
v-if="props.withOkButton"
:aria-label="i18n.t('ok')"
class="_button"
:disabled="props.okButtonDisabled"
@click="$emit('ok')"
>
<i class="ph-check ph-bold ph-lg"></i>
</button>
<FocusTrap v-model:active="isActive">
<div
ref="rootEl"
class="ebkgoccj"
:style="{
width: `${props.width}px`,
height: scroll
? height
? `${props.height}px`
: null
: height
? `min(${props.height}px, 100%)`
: '100%',
}"
tabindex="-1"
>
<div ref="headerEl" class="header">
<button
v-if="props.withOkButton"
:aria-label="i18n.t('close')"
class="_button"
@click="$emit('close')"
v-tooltip="i18n.ts.close"
>
<i class="ph-x ph-bold ph-lg"></i>
</button>
<span class="title">
<slot name="header"></slot>
</span>
<button
v-if="!props.withOkButton"
:aria-label="i18n.t('close')"
class="_button"
@click="$emit('close')"
>
<i class="ph-x ph-bold ph-lg"></i>
</button>
<button
v-if="props.withOkButton"
:aria-label="i18n.t('ok')"
class="_button"
:disabled="props.okButtonDisabled"
@click="$emit('ok')"
>
<i class="ph-check ph-bold ph-lg"></i>
</button>
</div>
<div class="body">
<slot></slot>
</div>
</div>
<div class="body">
<slot></slot>
</div>
</div>
</FocusTrap>
</MkModal>
</template>