182 lines
3.5 KiB
Vue
182 lines
3.5 KiB
Vue
<template>
|
|
<div class="template-showcase">
|
|
<!-- Loading -->
|
|
<div v-if="isLoading" class="templates-list">
|
|
<div v-for="i in 4" :key="i" class="template-skeleton">
|
|
<q-skeleton type="rect" width="60px" height="80px" />
|
|
<div class="skeleton-content">
|
|
<q-skeleton type="text" width="80%" />
|
|
<q-skeleton type="text" width="50%" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Templates List -->
|
|
<div v-else class="templates-list">
|
|
<div
|
|
v-for="template in templates"
|
|
:key="template._id"
|
|
class="template-item"
|
|
@click="$emit('select', template)"
|
|
>
|
|
<div class="template-preview" :style="getPreviewStyle(template)" />
|
|
<div class="template-info">
|
|
<h4>{{ template.name }}</h4>
|
|
<p>{{ formatType(template.templateType) }}</p>
|
|
<div class="usage-count" v-if="template.metadata?.usageCount">
|
|
<q-icon name="trending_up" size="12px" />
|
|
{{ template.metadata.usageCount }} usi
|
|
</div>
|
|
</div>
|
|
<q-icon name="chevron_right" size="20px" class="item-arrow" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Browse All -->
|
|
<q-btn
|
|
flat
|
|
color="primary"
|
|
label="Vedi tutti i template"
|
|
icon-right="arrow_forward"
|
|
class="browse-all-btn"
|
|
@click="$router.push('/templates')"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
templates: any[];
|
|
isLoading: boolean;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'select', template: any): void;
|
|
}>();
|
|
|
|
const formatType = (type: string) => {
|
|
return type.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
|
|
};
|
|
|
|
const getPreviewStyle = (template: any) => {
|
|
if (template.thumbnailUrl) {
|
|
return {
|
|
backgroundImage: `url(${template.thumbnailUrl})`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center'
|
|
};
|
|
}
|
|
|
|
const palette = template.palette || {};
|
|
return {
|
|
background: `linear-gradient(135deg, ${palette.primary || '#667eea'}, ${palette.secondary || '#764ba2'})`
|
|
};
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.template-showcase {
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 1rem;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.templates-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.template-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 0.75rem;
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
|
|
&:hover {
|
|
background: #f5f5f5;
|
|
|
|
.item-arrow {
|
|
transform: translateX(4px);
|
|
}
|
|
}
|
|
}
|
|
|
|
.template-preview {
|
|
width: 50px;
|
|
height: 70px;
|
|
border-radius: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.template-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
|
|
h4 {
|
|
margin: 0;
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
p {
|
|
margin: 0.15rem 0 0;
|
|
font-size: 0.75rem;
|
|
color: #888;
|
|
}
|
|
|
|
.usage-count {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
margin-top: 0.35rem;
|
|
font-size: 0.7rem;
|
|
color: #4caf50;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.item-arrow {
|
|
color: #ccc;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.template-skeleton {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 0.75rem;
|
|
|
|
.skeleton-content {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.browse-all-btn {
|
|
width: 100%;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
// Dark mode
|
|
.body--dark {
|
|
.template-showcase {
|
|
background: #1e1e1e;
|
|
}
|
|
|
|
.template-item:hover {
|
|
background: #2a2a2a;
|
|
}
|
|
|
|
.template-info h4 {
|
|
color: #fff;
|
|
}
|
|
}
|
|
</style>
|