fix:#24 linted and formatted

This commit is contained in:
Elmar Kresse
2024-01-17 18:53:17 +01:00
parent f112c8c71c
commit c13cfc61fd
25 changed files with 4620 additions and 1890 deletions

View File

@ -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>