schlechtenburg/packages/core/lib/components/Modal.tsx

47 lines
870 B
TypeScript
Raw Normal View History

2020-05-27 13:57:57 +00:00
import {
defineComponent,
computed,
2020-12-27 21:32:43 +00:00
} from 'vue';
2020-05-27 13:57:57 +00:00
import './Modal.scss';
2020-05-27 15:06:14 +00:00
interface ModalProps {
open: boolean;
eventClose: () => void;
}
2020-12-30 13:34:23 +00:00
export const SbModal = defineComponent({
2020-05-27 13:57:57 +00:00
name: 'sb-modal',
props: {
open: {
type: Boolean,
default: false,
},
2020-05-27 15:06:14 +00:00
eventClose: { type: Function, default: () => {} },
2020-05-27 13:57:57 +00:00
},
2020-05-27 15:06:14 +00:00
setup(props: ModalProps, context) {
2020-05-27 13:57:57 +00:00
const classes = computed(() => ({
'sb-modal': true,
'sb-modal_open': props.open,
}));
return () => (
<div class={classes.value}>
<div
class="sb-modal__overlay"
onClick={($event: MouseEvent) => {
$event.stopPropagation();
props.eventClose();
}}
>
<div class="sb-modal__content">
{context.slots.default()}
</div>
</div>
</div>
);
},
});