mirror of
https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender-pwa.git
synced 2026-01-16 11:02:25 +01:00
82 lines
1.8 KiB
Vue
82 lines
1.8 KiB
Vue
<script lang="ts" setup>
|
|
import { computed, useSlots } from 'vue';
|
|
|
|
defineProps<{
|
|
hideContent: boolean,
|
|
headline: string,
|
|
subTitle?: string,
|
|
icon?: string,
|
|
button?: {
|
|
label: string,
|
|
icon: string,
|
|
disabled: boolean,
|
|
onClick: () => void
|
|
}
|
|
}>()
|
|
|
|
const slots = useSlots()
|
|
const hasSlot = (name:string) => {
|
|
return !!slots[name];
|
|
}
|
|
const hasContent = computed(() => {
|
|
return hasSlot('content')
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="flex flex-column align-items-center transition-all transition-duration-500 transition-ease-in-out mt-0"
|
|
:class="{'md:mt-8': hideContent}"
|
|
>
|
|
<div class="flex align-items-center justify-content-center gap-2 mx-2">
|
|
<h3 class="text-4xl">
|
|
{{ headline }}
|
|
</h3>
|
|
<i
|
|
v-if="icon"
|
|
:class="icon"
|
|
style="font-size: 2rem"
|
|
></i>
|
|
</div>
|
|
<div
|
|
v-if="subTitle"
|
|
class="flex justify-content-center"
|
|
>
|
|
<h5 class="text-2xl m-2">{{ subTitle }}</h5>
|
|
</div>
|
|
<div
|
|
class="flex flex-wrap mx-0 gap-2 my-4 w-full lg:w-8"
|
|
>
|
|
<slot
|
|
name="selection"
|
|
flexSpecs="flex-1 m-0"
|
|
></slot>
|
|
</div>
|
|
<div
|
|
v-if="button"
|
|
class="flex flex-wrap m-0 mb-3 gap-2 w-full lg:w-8 align-items-center justify-content-end"
|
|
>
|
|
<Button
|
|
:disabled="button.disabled"
|
|
class="col-12 md:col-4"
|
|
@click="button.onClick()"
|
|
:icon="button.icon"
|
|
:label="button.label"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-if="hasContent"
|
|
:class="
|
|
[hideContent?
|
|
['opacity-0', 'pointer-events-none', 'h-1rem', 'overflow-hidden'] :
|
|
['opacity-100', 'transition-all', 'transition-duration-500', 'transition-ease-in-out']
|
|
,
|
|
'w-full', 'lg:w-8']"
|
|
>
|
|
<slot
|
|
name="content"
|
|
></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|