[e-mobility-charging-stations-simulator.git] / ui / web / src / components / Modal.vue

<template>
  <teleport to="body">
    <div id="backdrop" v-if="props.visibility" @click.self="close()">
      <slot></slot>
    </div>
  </teleport>
</template>

<script setup lang="ts">
const props = defineProps<{
  visibility: boolean;
}>();

const emit = defineEmits(['close']);

function close() {
  emit('close');
}
</script>

<style>
#backdrop {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
}
</style>
Commit	Line	Data
32de5a57 LM	1	<template>
32de5a57 LM	2	<teleport to="body">
8fc2e5cc	3	<div id="backdrop" v-if="props.visibility" @click.self="close()">
32de5a57 LM	4	<slot></slot>
	5	</div>
	6	</teleport>
	7	</template>
	8
	9	<script setup lang="ts">
	10	const props = defineProps<{
	11	visibility: boolean;
	12	}>();
	13
	14	const emit = defineEmits(['close']);
	15
	16	function close() {
	17	emit('close');
	18	}
	19	</script>
	20
	21	<style>
	22	#backdrop {
	23	position: fixed;
	24	display: flex;
	25	justify-content: center;
	26	align-items: center;
	27	inset: 0;
	28	background-color: rgba(0, 0, 0, 0.2);
	29	}
	30	</style>