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.
88 lines
1.5 KiB
Vue
88 lines
1.5 KiB
Vue
<template>
|
|
<ModalContainer
|
|
v-model="showDialog"
|
|
>
|
|
<div class="dialog">
|
|
<div class="dialog__content">
|
|
<slot />
|
|
</div>
|
|
<div
|
|
class="dialog__close-button"
|
|
@click="hide"
|
|
>
|
|
<font-awesome-icon
|
|
:icon="['fas', 'times']"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</ModalContainer>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, computed } from 'vue';
|
|
import ModalContainer from './ModalContainer.vue';
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
ModalContainer,
|
|
},
|
|
emits: {
|
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
input: (isOpen: boolean) => true,
|
|
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
},
|
|
props: {
|
|
value: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
},
|
|
setup(props, { emit }) {
|
|
const showDialog = computed({
|
|
get: () => props.value,
|
|
set: (value) => {
|
|
if (value !== props.value) {
|
|
emit('input', value);
|
|
}
|
|
},
|
|
});
|
|
|
|
function hide() {
|
|
showDialog.value = false;
|
|
}
|
|
|
|
return {
|
|
showDialog,
|
|
hide,
|
|
};
|
|
},
|
|
});
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "@/presentation/assets/styles/main" as *;
|
|
|
|
.dialog {
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
&__content {
|
|
margin: 5%;
|
|
}
|
|
|
|
&__close-button {
|
|
color: $color-primary-dark;
|
|
width: auto;
|
|
font-size: 1.5em;
|
|
margin-right: 0.25em;
|
|
align-self: flex-start;
|
|
@include clickable;
|
|
@include hover-or-touch {
|
|
color: $color-primary;
|
|
}
|
|
}
|
|
}
|
|
</style>
|