mirror of
https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender.git
synced 2025-07-23 21:18:48 +02:00
fix:#24 linted and formatted
This commit is contained in:
@ -1,56 +1,44 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed, useSlots } from 'vue';
|
||||
import { computed, useSlots } from "vue";
|
||||
|
||||
defineProps<{
|
||||
hideContent: boolean,
|
||||
headline: string,
|
||||
subTitle?: string,
|
||||
icon?: string,
|
||||
hideContent: boolean;
|
||||
headline: string;
|
||||
subTitle?: string;
|
||||
icon?: string;
|
||||
button?: {
|
||||
label: string,
|
||||
icon: string,
|
||||
disabled: boolean,
|
||||
onClick: () => void
|
||||
}
|
||||
}>()
|
||||
label: string;
|
||||
icon: string;
|
||||
disabled: boolean;
|
||||
onClick: () => void;
|
||||
};
|
||||
}>();
|
||||
|
||||
const slots = useSlots()
|
||||
const hasSlot = (name:string) => {
|
||||
return !!slots[name];
|
||||
}
|
||||
const slots = useSlots();
|
||||
const hasSlot = (name: string) => {
|
||||
return !!slots[name];
|
||||
};
|
||||
const hasContent = computed(() => {
|
||||
return hasSlot('content')
|
||||
})
|
||||
return hasSlot("content");
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
<div
|
||||
class="flex flex-column align-items-center transition-all transition-duration-500 transition-ease-in-out mt-0"
|
||||
:class="{'md:mt-8': hideContent}"
|
||||
: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>
|
||||
<i v-if="icon" :class="icon" style="font-size: 2rem"></i>
|
||||
</div>
|
||||
<div
|
||||
v-if="subTitle"
|
||||
class="flex justify-content-center"
|
||||
>
|
||||
<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"
|
||||
flex-specs="flex-1 m-0"
|
||||
></slot>
|
||||
<div class="flex flex-wrap mx-0 gap-2 my-4 w-full lg:w-8">
|
||||
<slot name="selection" flex-specs="flex-1 m-0"></slot>
|
||||
</div>
|
||||
<div
|
||||
v-if="button"
|
||||
@ -64,18 +52,22 @@ const hasContent = computed(() => {
|
||||
@click="button.onClick()"
|
||||
/>
|
||||
</div>
|
||||
<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>
|
||||
: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>
|
||||
|
Reference in New Issue
Block a user