fix: basically just undo my previous modal changes
This commit is contained in:
parent
0b2a84d805
commit
ce53288bf0
3 changed files with 59 additions and 54 deletions
|
@ -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>
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -6,6 +6,7 @@
|
||||||
@keyup.esc="$emit('close')"
|
@keyup.esc="$emit('close')"
|
||||||
@closed="$emit('closed')"
|
@closed="$emit('closed')"
|
||||||
>
|
>
|
||||||
|
<FocusTrap v-model:active="isActive">
|
||||||
<div
|
<div
|
||||||
ref="rootEl"
|
ref="rootEl"
|
||||||
class="ebkgoccj"
|
class="ebkgoccj"
|
||||||
|
@ -56,6 +57,7 @@
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</FocusTrap>
|
||||||
</MkModal>
|
</MkModal>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue