47 lines
861 B
TypeScript
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>
|
|
);
|
|
},
|
|
});
|