natty
/
calckey
1
0
Fork 0
Code Issues 1 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" ref="focusTrap"
v-model:active="isActive" v-model:active="isActive"
:return-focus-on-deactivate="!noReturnFocus" :return-focus-on-deactivate="!noReturnFocus"
:initial-focus="() => itemsEl.children[0]"
@deactivate="emit('close')" @deactivate="emit('close')"
> >
<div> <div>

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

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

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

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