9e5491fdbf
Introduce a brand new lightweight and efficient modal component. It is designed to be visually similar to the previous one to not introduce a change in feel of the application in a patch release, but behind the scenes it features: - Enhanced application speed and reduced bundle size. - New flexbox-driven layout, eliminating JS calculations. - Composition API ready for Vue 3.0 #230. Other changes: - Adopt idiomatic Vue via `v-modal` binding. - Add unit tests for both the modal and dialog. - Remove `vue-js-modal` dependency in favor of the new implementation. - Adjust modal shadow color to better match theme. - Add `@vue/test-utils` for unit testing.
66 lines
1.2 KiB
Vue
66 lines
1.2 KiB
Vue
<template>
|
|
<transition
|
|
name="modal-overlay-transition"
|
|
@after-leave="onAfterTransitionLeave"
|
|
>
|
|
<div
|
|
v-if="show"
|
|
class="modal-overlay-background"
|
|
aria-expanded="true"
|
|
@click.self.stop="onClick"
|
|
/>
|
|
</transition>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue';
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
show: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
emits: [
|
|
'click',
|
|
'transitionedOut',
|
|
],
|
|
setup(_, { emit }) {
|
|
function onAfterTransitionLeave() {
|
|
emit('transitionedOut');
|
|
}
|
|
|
|
function onClick() {
|
|
emit('click');
|
|
}
|
|
|
|
return {
|
|
onAfterTransitionLeave,
|
|
onClick,
|
|
};
|
|
},
|
|
});
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "@/presentation/assets/styles/main" as *;
|
|
|
|
$modal-overlay-transition-duration: 50ms;
|
|
$modal-overlay-color-background: $color-on-surface;
|
|
|
|
.modal-overlay-background {
|
|
position: fixed;
|
|
box-sizing: border-box;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: rgba($modal-overlay-color-background, 0.3);
|
|
opacity: 1;
|
|
}
|
|
|
|
@include fade-slide-transition('modal-overlay-transition', $modal-overlay-transition-duration);
|
|
</style>
|