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

<template>
  <teleport to="body">
    <div v-if="props.visibility" id="backdrop" @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">
01ff4231	3	<div v-if="props.visibility" id="backdrop" @click.self="close()">
32de5a57 LM	4	<slot></slot>
	5	</div>
	6	</teleport>
	7	</template>
	8
	9	<script setup lang="ts">
	10	const props = defineProps<{
66a7748d JB	11	visibility: boolean
66a7748d JB	12	}>()
32de5a57	13
66a7748d	14	const emit = defineEmits(['close'])
32de5a57 LM	15
32de5a57 LM	16	function close() {
66a7748d	17	emit('close')
32de5a57 LM	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>