barmar/tethys.backend
1
0
Fork 0
forked from geolba/tethys.backend
Code Pull requests Activity

- second commit

Browse source
This commit is contained in:
Kaimbacher 2023-03-17 16:13:37 +01:00
parent 4fc3bb0a01
commit 59a99ff3c8
61 changed files with 2625 additions and 1182 deletions
Download patch file Download diff file Expand all files Collapse all files

154
resources/js/Components/CardBox.vue
View file

@ -1,111 +1,81 @@
<script setup>
import { mdiCog } from '@mdi/js'
import { computed, useSlots } from 'vue'
import BaseIcon from '@/Components/BaseIcon.vue'
import { mdiCog } from '@mdi/js';
import { computed, useSlots } from 'vue';
import BaseIcon from '@/Components/BaseIcon.vue';
const props = defineProps({
title: {
type: String,
default: null
},
icon: {
type: String,
default: null
},
headerIcon: {
type: String,
default: null
},
rounded: {
type: String,
default: 'rounded-xl'
},
hasTable: Boolean,
empty: Boolean,
form: Boolean,
hoverable: Boolean,
modal: Boolean
})
title: {
type: String,
default: null,
},
icon: {
type: String,
default: null,
},
headerIcon: {
type: String,
default: null,
},
rounded: {
type: String,
default: 'rounded-xl',
},
hasFormData: Boolean,
empty: Boolean,
form: Boolean,
hoverable: Boolean,
modal: Boolean,
});
const emit = defineEmits(['header-icon-click', 'submit'])
const emit = defineEmits(['header-icon-click', 'submit']);
const is = computed(() => props.form ? 'form' : 'div')
const is = computed(() => (props.form ? 'form' : 'div'));
const slots = useSlots()
const slots = useSlots();
const footer = computed(() => slots.footer && !!slots.footer())
const footer = computed(() => slots.footer && !!slots.footer());
const componentClass = computed(() => {
const base = [
props.rounded,
props.modal ? 'dark:bg-slate-900' : 'dark:bg-slate-900/70'
]
const base = [props.rounded, props.modal ? 'dark:bg-slate-900' : 'dark:bg-slate-900/70'];
if (props.hoverable) {
base.push('hover:shadow-lg transition-shadow duration-500')
}
if (props.hoverable) {
base.push('hover:shadow-lg transition-shadow duration-500');
}
return base
})
return base;
});
const computedHeaderIcon = computed(() => props.headerIcon ?? mdiCog)
const computedHeaderIcon = computed(() => props.headerIcon ?? mdiCog);
const headerIconClick = () => {
emit('header-icon-click')
}
emit('header-icon-click');
};
const submit = e => {
emit('submit', e)
}
const submit = (e) => {
emit('submit', e);
};
</script>
<template>
<component
:is="is"
:class="componentClass"
class="bg-white flex flex-col"
@submit="submit"
>
<header
v-if="title"
class="flex items-stretch border-b border-gray-100 dark:border-slate-800"
>
<div
class="flex items-center py-3 grow font-bold"
:class="[ icon ? 'px-4' : 'px-6' ]"
>
<BaseIcon
v-if="icon"
:path="icon"
class="mr-3"
/>
{{ title }}
</div>
<button
class="flex items-center py-3 px-4 justify-center ring-blue-700 focus:ring"
@click="headerIconClick"
>
<BaseIcon :path="computedHeaderIcon" />
</button>
</header>
<div
v-if="empty"
class="text-center py-24 text-gray-500 dark:text-slate-400"
>
<p>Nothing's here…</p>
</div>
<div
v-else
class="flex-1"
:class="{'p-6':!hasTable}"
>
<slot />
</div>
<div
v-if="footer"
class="p-6 border-t border-gray-100 dark:border-slate-800"
>
<slot name="footer" />
</div>
</component>
<component :is="is" :class="componentClass" class="bg-white flex flex-col" @submit="submit">
<header v-if="title" class="flex items-stretch border-b border-gray-100 dark:border-slate-800">
<div class="flex items-center py-3 grow font-bold" :class="[icon ? 'px-4' : 'px-6']">
<BaseIcon v-if="icon" :path="icon" class="mr-3" />
{{ title }}
</div>
<button class="flex items-center py-3 px-4 justify-center ring-blue-700 focus:ring" @click="headerIconClick">
<BaseIcon :path="computedHeaderIcon" />
</button>
</header>
<div v-if="empty" class="text-center py-24 text-gray-500 dark:text-slate-400">
<p>Nothing's here…</p>
</div>
<!-- <div v-else class="flex-1" :class="{'p-6':!hasTable}"> -->
<div v-else class="flex-1" :class="[!hasFormData && 'p-6']">
<slot />
</div>
<div v-if="footer" class="p-6 border-t border-gray-100 dark:border-slate-800">
<slot name="footer" />
</div>
</component>
</template>