Arno Kaimbacher
a7142f694f
All checks were successful
CI Pipeline / japa-tests (push) Successful in 51s
- npm updates - new SearchMap.vue component
46 lines
1.4 KiB
Vue
46 lines
1.4 KiB
Vue
<script setup>
|
|
import { ref, computed, useSlots } from 'vue';
|
|
import { mdiClose } from '@mdi/js';
|
|
import { colorsBgLight, colorsOutline } from '@/colors.js';
|
|
import BaseLevel from '@/Components/BaseLevel.vue';
|
|
import BaseIcon from '@/Components/BaseIcon.vue';
|
|
import BaseButton from '@/Components/BaseButton.vue';
|
|
|
|
const props = defineProps({
|
|
icon: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
outline: Boolean,
|
|
color: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const componentClass = computed(() => (props.outline ? colorsOutline[props.color] : colorsBgLight[props.color]));
|
|
|
|
const isDismissed = ref(false);
|
|
|
|
const dismiss = () => {
|
|
isDismissed.value = true;
|
|
};
|
|
|
|
const slots = useSlots();
|
|
|
|
const hasRightSlot = computed(() => slots.right);
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="!isDismissed" :class="componentClass" class="px-3 py-6 md:py-3 mb-6 last:mb-0 border rounded transition-colors duration-150">
|
|
<BaseLevel>
|
|
<div class="flex flex-col md:flex-row items-center">
|
|
<BaseIcon v-if="icon" :path="icon" w="w-10 md:w-5" h="h-10 md:h-5" size="24" class="md:mr-2" />
|
|
<span class="text-center md:text-left"><slot /></span>
|
|
</div>
|
|
<slot v-if="hasRightSlot" name="right" />
|
|
<BaseButton v-else :icon="mdiClose" :outline="outline" small @click="dismiss" />
|
|
</BaseLevel>
|
|
</div>
|
|
</template>
|