92 lines
2.5 KiB
Vue
92 lines
2.5 KiB
Vue
|
<script setup>
|
||
|
|
import { useSlots, computed } from 'vue';
|
||
|
|
import { useRoute } from 'vue-router';
|
||
|
|
import { useI18n } from 'vue-i18n';
|
||
|
|
|
||
|
|
defineProps({
|
||
|
|
data: {
|
||
|
|
type: Object,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
const slots = useSlots();
|
||
|
|
const route = useRoute();
|
||
|
|
const { t } = useI18n();
|
||
|
|
|
||
|
|
const module = computed(() => {
|
||
|
|
return route.matched[1];
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="descriptor">
|
||
|
|
<div class="header bg-primary q-pa-sm">
|
||
|
|
<router-link :to="{ name: `${module.name}List` }">
|
||
|
|
<q-btn round flat dense size="md" icon="view_list" color="white">
|
||
|
|
<q-tooltip>{{ t('components.card.mainList') }}</q-tooltip>
|
||
|
|
</q-btn>
|
||
|
|
</router-link>
|
||
|
|
<router-link :to="{ name: `${module.name}Summary`, params: { id: route.params.id } }">
|
||
|
|
<q-btn round flat dense size="md" icon="launch" color="white">
|
||
|
|
<q-tooltip>{{ t('components.card.summary') }}</q-tooltip>
|
||
|
|
</q-btn>
|
||
|
|
</router-link>
|
||
|
|
|
||
|
|
<q-btn v-if="slots.menu" size="md" icon="more_vert" color="white" round flat dense>
|
||
|
|
<q-tooltip>{{ t('components.card.moreOptions') }}</q-tooltip>
|
||
|
|
<q-menu>
|
||
|
|
<q-list>
|
||
|
|
<slot name="menu" />
|
||
|
|
</q-list>
|
||
|
|
</q-menu>
|
||
|
|
</q-btn>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-if="$props.data" class="q-py-sm">
|
||
|
|
<slot name="body" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Skeleton -->
|
||
|
|
<div id="descriptor-skeleton" v-if="!$props.data">
|
||
|
|
<div class="col q-pl-sm q-pa-sm">
|
||
|
|
<q-skeleton type="text" square height="45px" />
|
||
|
|
<q-skeleton type="text" square height="18px" />
|
||
|
|
<q-skeleton type="text" square height="18px" />
|
||
|
|
<q-skeleton type="text" square height="18px" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<q-card-actions>
|
||
|
|
<q-skeleton size="40px" />
|
||
|
|
<q-skeleton size="40px" />
|
||
|
|
<q-skeleton size="40px" />
|
||
|
|
<q-skeleton size="40px" />
|
||
|
|
<q-skeleton size="40px" />
|
||
|
|
</q-card-actions>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.descriptor {
|
||
|
|
max-width: 256px;
|
||
|
|
|
||
|
|
h5 {
|
||
|
|
margin: 0 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: stretch;
|
||
|
|
}
|
||
|
|
|
||
|
|
.q-card__actions {
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
#descriptor-skeleton .q-card__actions {
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|