Implement custom lightweight modal #230
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.
This commit is contained in:
65
src/presentation/components/Shared/Modal/ModalOverlay.vue
Normal file
65
src/presentation/components/Shared/Modal/ModalOverlay.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user