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

47 lines
861 B
TypeScript

import {
defineComponent,
computed,
} from 'vue';
import './Modal.scss';
interface ModalProps {
open: boolean;
onClose: () => void;
}
export const SbModal = defineComponent({
name: 'sb-modal',
props: {
open: {
type: Boolean,
default: false,
},
onClose: { type: Function, default: () => {} },
},
setup(props: ModalProps, context) {
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.onClose();
}}
>
<div class="sb-modal__content">
{context.slots.default()}
</div>
</div>
</div>
);
},
});