Initial commit
This commit is contained in:
779
resources/js/components/ComponentsLibrary.vue
Normal file
779
resources/js/components/ComponentsLibrary.vue
Normal file
@@ -0,0 +1,779 @@
|
||||
<template>
|
||||
<div class="components-library-container">
|
||||
<!-- Toggle Button -->
|
||||
<VBtn
|
||||
v-if="!isLibraryOpen"
|
||||
@click="toggleLibrary"
|
||||
class="library-toggle-btn"
|
||||
color="primary"
|
||||
variant="elevated"
|
||||
size="large"
|
||||
>
|
||||
<VIcon icon="tabler-layout-dashboard" size="20" class="me-2" />
|
||||
Components Library
|
||||
<VIcon icon="tabler-chevron-up" size="16" class="ms-2" />
|
||||
</VBtn>
|
||||
|
||||
<!-- Components Library Panel -->
|
||||
<VCard
|
||||
v-if="isLibraryOpen"
|
||||
class="components-library-panel"
|
||||
:class="{ 'panel-open': isLibraryOpen }"
|
||||
elevation="8"
|
||||
>
|
||||
<VCardTitle class="library-header">
|
||||
<div class="header-content">
|
||||
<div class="header-left">
|
||||
<VIcon icon="tabler-layout-dashboard" size="24" class="me-2" />
|
||||
<span>Dashboard Components</span>
|
||||
</div>
|
||||
<VBtn
|
||||
@click="toggleLibrary"
|
||||
variant="text"
|
||||
size="small"
|
||||
icon
|
||||
class="close-btn"
|
||||
>
|
||||
<VIcon icon="tabler-x" size="20" />
|
||||
</VBtn>
|
||||
</div>
|
||||
</VCardTitle>
|
||||
|
||||
<VCardText class="library-content">
|
||||
<div class="search-section">
|
||||
<VTextField
|
||||
v-model="searchQuery"
|
||||
placeholder="Search components..."
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
prepend-inner-icon="tabler-search"
|
||||
clearable
|
||||
class="search-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="categories-tabs">
|
||||
<VChipGroup
|
||||
v-model="selectedCategory"
|
||||
selected-class="text-primary"
|
||||
class="category-chips"
|
||||
>
|
||||
<VChip
|
||||
v-for="category in categories"
|
||||
:key="category"
|
||||
:value="category"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
>
|
||||
{{ category }}
|
||||
</VChip>
|
||||
</VChipGroup>
|
||||
</div>
|
||||
|
||||
<div class="components-grid">
|
||||
<div
|
||||
v-for="component in filteredComponents"
|
||||
:key="component.id"
|
||||
class="component-item"
|
||||
:draggable="isEditMode"
|
||||
@dragstart="handleDragStart($event, component)"
|
||||
@dragend="handleDragEnd"
|
||||
:class="{ 'draggable': isEditMode, 'disabled': !isEditMode }"
|
||||
>
|
||||
<div class="component-preview">
|
||||
<VIcon :icon="component.icon" size="32" :color="component.color" />
|
||||
<div v-if="isEditMode" class="component-overlay">
|
||||
<VIcon icon="tabler-plus" size="20" color="white" />
|
||||
</div>
|
||||
<div v-if="!isEditMode" class="disabled-overlay">
|
||||
<VIcon icon="tabler-lock" size="16" color="grey" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="component-info">
|
||||
<h4 class="component-title">{{ component.title }}</h4>
|
||||
<p class="component-description">{{ component.description }}</p>
|
||||
<div class="component-meta">
|
||||
<VChip
|
||||
:color="component.color"
|
||||
size="x-small"
|
||||
variant="outlined"
|
||||
class="component-type-chip"
|
||||
>
|
||||
{{ component.category }}
|
||||
</VChip>
|
||||
<VChip
|
||||
size="x-small"
|
||||
variant="outlined"
|
||||
color="grey"
|
||||
class="size-chip"
|
||||
>
|
||||
{{ component.defaultSize.cols }}×{{ Math.round(component.defaultSize.height) }}
|
||||
</VChip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="filteredComponents.length === 0" class="no-results">
|
||||
<VIcon icon="tabler-layout-dashboard" size="48" color="grey-lighten-1" />
|
||||
<h3>No components found</h3>
|
||||
<p>Try adjusting your search or category filter</p>
|
||||
</div>
|
||||
|
||||
<div v-if="!isEditMode" class="edit-mode-notice">
|
||||
<VAlert
|
||||
type="info"
|
||||
variant="tonal"
|
||||
class="ma-2"
|
||||
>
|
||||
<template #prepend>
|
||||
<VIcon icon="tabler-info-circle" />
|
||||
</template>
|
||||
<div>
|
||||
<strong>Edit Mode Required</strong>
|
||||
<br>
|
||||
Enable edit mode to add components to your dashboard
|
||||
</div>
|
||||
</VAlert>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<!-- Drop Zone Overlay -->
|
||||
<div
|
||||
v-if="isDragging"
|
||||
class="drop-zone-overlay"
|
||||
@dragover="handleDragOver"
|
||||
@drop="handleDrop"
|
||||
@dragleave="handleDragLeave"
|
||||
>
|
||||
<div class="drop-zone-content">
|
||||
<VIcon icon="tabler-download" size="64" color="primary" />
|
||||
<h2>Drop component here to add to dashboard</h2>
|
||||
<p>Release to add the component to your dashboard</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
isEditMode: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['add-component'])
|
||||
|
||||
const isLibraryOpen = ref(false)
|
||||
const isDragging = ref(false)
|
||||
const searchQuery = ref('')
|
||||
const selectedCategory = ref('All')
|
||||
|
||||
const categories = ['All', 'CRM', 'Ecommerce', 'Analytics', 'Reports', 'Activity']
|
||||
|
||||
const availableComponents = ref([
|
||||
{
|
||||
id: 'crm-active-project',
|
||||
title: 'Active Project',
|
||||
description: 'Shows current active project details',
|
||||
icon: 'tabler-folder-open',
|
||||
color: 'primary',
|
||||
category: 'CRM',
|
||||
component: 'CrmActiveProject',
|
||||
defaultSize: { cols: 4, height: 33.33 },
|
||||
defaultProps: {}
|
||||
},
|
||||
{
|
||||
id: 'crm-activity-timeline',
|
||||
title: 'Activity Timeline',
|
||||
description: 'Recent activities and updates timeline',
|
||||
icon: 'tabler-timeline',
|
||||
color: 'info',
|
||||
category: 'Activity',
|
||||
component: 'CrmActivityTimeline',
|
||||
defaultSize: { cols: 6, height: 33.33 },
|
||||
defaultProps: {}
|
||||
},
|
||||
{
|
||||
id: 'crm-analytics-sales',
|
||||
title: 'Sales Analytics',
|
||||
description: 'Sales performance and analytics',
|
||||
icon: 'tabler-chart-line',
|
||||
color: 'success',
|
||||
category: 'Analytics',
|
||||
component: 'CrmAnalyticsSales',
|
||||
defaultSize: { cols: 4, height: 33.33 },
|
||||
defaultProps: {}
|
||||
},
|
||||
{
|
||||
id: 'crm-earning-reports',
|
||||
title: 'Earning Reports',
|
||||
description: 'Yearly earning overview and reports',
|
||||
icon: 'tabler-report-money',
|
||||
color: 'warning',
|
||||
category: 'Reports',
|
||||
component: 'CrmEarningReportsYearlyOverview',
|
||||
defaultSize: { cols: 8, height: 33.33 },
|
||||
defaultProps: {}
|
||||
},
|
||||
{
|
||||
id: 'crm-project-status',
|
||||
title: 'Project Status',
|
||||
description: 'Current status of all projects',
|
||||
icon: 'tabler-checkup-list',
|
||||
color: 'deep-purple',
|
||||
category: 'CRM',
|
||||
component: 'CrmProjectStatus',
|
||||
defaultSize: { cols: 4, height: 33.33 },
|
||||
defaultProps: {}
|
||||
},
|
||||
{
|
||||
id: 'crm-recent-transactions',
|
||||
title: 'Recent Transactions',
|
||||
description: 'Latest financial transactions',
|
||||
icon: 'tabler-credit-card',
|
||||
color: 'teal',
|
||||
category: 'CRM',
|
||||
component: 'CrmRecentTransactions',
|
||||
defaultSize: { cols: 6, height: 33.33 },
|
||||
defaultProps: {}
|
||||
},
|
||||
{
|
||||
id: 'crm-sales-countries',
|
||||
title: 'Sales by Countries',
|
||||
description: 'Geographic sales distribution',
|
||||
icon: 'tabler-world',
|
||||
color: 'indigo',
|
||||
category: 'Analytics',
|
||||
component: 'CrmSalesByCountries',
|
||||
defaultSize: { cols: 4, height: 33.33 },
|
||||
defaultProps: {}
|
||||
},
|
||||
{
|
||||
id: 'project-activity-bar',
|
||||
title: 'Project Activity Chart',
|
||||
description: 'Bar chart showing project activities',
|
||||
icon: 'tabler-chart-bar',
|
||||
color: 'cyan',
|
||||
category: 'Analytics',
|
||||
component: 'ProjectActivityBarChart',
|
||||
defaultSize: { cols: 8, height: 33.33 },
|
||||
defaultProps: {}
|
||||
},
|
||||
{
|
||||
id: 'analysis-card-1',
|
||||
title: 'Analysis Card (Projects)',
|
||||
description: 'Active projects progress analysis',
|
||||
icon: 'tabler-analytics',
|
||||
color: 'pink',
|
||||
category: 'Analytics',
|
||||
component: 'AnalysisCard',
|
||||
defaultSize: { cols: 4, height: 33.33 },
|
||||
defaultProps: { chartName: 'Active Projects Progress' }
|
||||
},
|
||||
{
|
||||
id: 'analysis-card-2',
|
||||
title: 'Analysis Card (Cost)',
|
||||
description: 'Cost overview analysis',
|
||||
icon: 'tabler-analytics',
|
||||
color: 'pink',
|
||||
category: 'Analytics',
|
||||
component: 'AnalysisCard',
|
||||
defaultSize: { cols: 4, height: 33.33 },
|
||||
defaultProps: { chartName: 'Cost overview' }
|
||||
},
|
||||
{
|
||||
id: 'cost-overview',
|
||||
title: 'Cost Overview',
|
||||
description: 'Detailed cost breakdown and overview',
|
||||
icon: 'tabler-coin',
|
||||
color: 'orange',
|
||||
category: 'Reports',
|
||||
component: 'CostOverview',
|
||||
defaultSize: { cols: 8, height: 33.33 },
|
||||
defaultProps: {}
|
||||
},
|
||||
{
|
||||
id: 'generated-leads-1',
|
||||
title: 'Generated Leads (Primary)',
|
||||
description: 'Lead generation progress - Primary theme',
|
||||
icon: 'tabler-users',
|
||||
color: 'primary',
|
||||
category: 'Ecommerce',
|
||||
component: 'GeneratedLeadsCard',
|
||||
defaultSize: { cols: 4, height: 33.33 },
|
||||
defaultProps: { progress: 33 }
|
||||
},
|
||||
{
|
||||
id: 'generated-leads-2',
|
||||
title: 'Generated Leads (Success)',
|
||||
description: 'Lead generation progress - Success theme',
|
||||
icon: 'tabler-users',
|
||||
color: 'success',
|
||||
category: 'Ecommerce',
|
||||
component: 'GeneratedLeadsCard',
|
||||
defaultSize: { cols: 4, height: 33.33 },
|
||||
defaultProps: { donutColors: ["primary"], progress: 71 }
|
||||
},
|
||||
{
|
||||
id: 'generated-leads-3',
|
||||
title: 'Generated Leads (Warning)',
|
||||
description: 'Lead generation progress - Warning theme',
|
||||
icon: 'tabler-users',
|
||||
color: 'warning',
|
||||
category: 'Ecommerce',
|
||||
component: 'GeneratedLeadsCard',
|
||||
defaultSize: { cols: 4, height: 33.33 },
|
||||
defaultProps: { donutColors: ["warning"], progress: 56 }
|
||||
}
|
||||
])
|
||||
|
||||
const filteredComponents = computed(() => {
|
||||
let components = availableComponents.value
|
||||
|
||||
// Filter by category
|
||||
if (selectedCategory.value !== 'All') {
|
||||
components = components.filter(comp => comp.category === selectedCategory.value)
|
||||
}
|
||||
|
||||
// Filter by search query
|
||||
if (searchQuery.value) {
|
||||
const query = searchQuery.value.toLowerCase()
|
||||
components = components.filter(comp =>
|
||||
comp.title.toLowerCase().includes(query) ||
|
||||
comp.description.toLowerCase().includes(query) ||
|
||||
comp.category.toLowerCase().includes(query)
|
||||
)
|
||||
}
|
||||
|
||||
return components
|
||||
})
|
||||
|
||||
const toggleLibrary = () => {
|
||||
isLibraryOpen.value = !isLibraryOpen.value
|
||||
}
|
||||
|
||||
const handleDragStart = (event, component) => {
|
||||
if (!props.isEditMode) {
|
||||
event.preventDefault()
|
||||
return
|
||||
}
|
||||
|
||||
isDragging.value = true
|
||||
event.dataTransfer.setData('application/json', JSON.stringify(component))
|
||||
event.dataTransfer.effectAllowed = 'copy'
|
||||
|
||||
// Create drag image
|
||||
const dragImage = event.target.cloneNode(true)
|
||||
dragImage.style.transform = 'rotate(5deg) scale(0.8)'
|
||||
dragImage.style.opacity = '0.8'
|
||||
dragImage.style.zIndex = '9999'
|
||||
document.body.appendChild(dragImage)
|
||||
event.dataTransfer.setDragImage(dragImage, 50, 50)
|
||||
|
||||
setTimeout(() => {
|
||||
if (document.body.contains(dragImage)) {
|
||||
document.body.removeChild(dragImage)
|
||||
}
|
||||
}, 0)
|
||||
}
|
||||
|
||||
const handleDragEnd = () => {
|
||||
isDragging.value = false
|
||||
}
|
||||
|
||||
const handleDragOver = (event) => {
|
||||
event.preventDefault()
|
||||
event.dataTransfer.dropEffect = 'copy'
|
||||
}
|
||||
|
||||
const handleDrop = (event) => {
|
||||
event.preventDefault()
|
||||
isDragging.value = false
|
||||
|
||||
try {
|
||||
const componentData = JSON.parse(event.dataTransfer.getData('application/json'))
|
||||
emit('add-component', componentData)
|
||||
|
||||
// Show success feedback
|
||||
console.log('Component added successfully:', componentData.title)
|
||||
} catch (error) {
|
||||
console.error('Error adding component:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDragLeave = (event) => {
|
||||
// Only hide if we're leaving the drop zone entirely
|
||||
if (!event.currentTarget.contains(event.relatedTarget)) {
|
||||
isDragging.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Close library when clicking outside
|
||||
const handleClickOutside = (event) => {
|
||||
if (isLibraryOpen.value && !event.target.closest('.components-library-panel, .library-toggle-btn')) {
|
||||
isLibraryOpen.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', handleClickOutside)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', handleClickOutside)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.components-library-container {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.library-toggle-btn {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 8px 32px rgba(var(--v-theme-primary), 0.2) !important;
|
||||
border-radius: 12px !important;
|
||||
padding: 12px 20px !important;
|
||||
font-weight: 600 !important;
|
||||
text-transform: none !important;
|
||||
backdrop-filter: blur(10px);
|
||||
animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
.library-toggle-btn:hover {
|
||||
transform: translateY(-2px) scale(1.02);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 12px 40px rgba(var(--v-theme-primary), 0.3) !important;
|
||||
}
|
||||
|
||||
.components-library-panel {
|
||||
position: absolute;
|
||||
bottom: 80px;
|
||||
right: 0;
|
||||
width: 450px;
|
||||
max-height: 600px;
|
||||
border-radius: 16px !important;
|
||||
backdrop-filter: blur(20px);
|
||||
background: rgba(255, 255, 255, 0.95) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.library-header {
|
||||
background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.1), rgba(var(--v-theme-secondary), 0.05));
|
||||
border-radius: 16px 16px 0 0;
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
opacity: 0.7;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
opacity: 1;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.library-content {
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.categories-tabs {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.category-chips {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.components-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.component-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.component-item.draggable {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.component-item.draggable:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
border-color: rgba(var(--v-theme-primary), 0.3);
|
||||
background: rgba(var(--v-theme-primary), 0.02);
|
||||
}
|
||||
|
||||
.component-item.disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.component-item:active.draggable {
|
||||
cursor: grabbing;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.component-preview {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: rgba(var(--v-theme-surface), 0.8);
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.component-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(var(--v-theme-primary), 0.9);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.disabled-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(128, 128, 128, 0.3);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.component-item.draggable:hover .component-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.component-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.component-title {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 0.25rem 0;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.component-description {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
margin: 0 0 0.5rem 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.component-meta {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.component-type-chip,
|
||||
.size-chip {
|
||||
font-size: 0.7rem !important;
|
||||
height: 20px !important;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
text-align: center;
|
||||
padding: 2rem 1rem;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.no-results h3 {
|
||||
margin: 1rem 0 0.5rem 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.no-results p {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.edit-mode-notice {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.drop-zone-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(var(--v-theme-primary), 0.1);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: fadeIn 0.2s ease;
|
||||
}
|
||||
|
||||
.drop-zone-content {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 20px;
|
||||
border: 3px dashed rgba(var(--v-theme-primary), 0.5);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
animation: dropZonePulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.drop-zone-content h2 {
|
||||
margin: 1rem 0 0.5rem 0;
|
||||
color: rgba(var(--v-theme-primary), 0.9);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.drop-zone-content p {
|
||||
margin: 0;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
@keyframes bounceIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.3) translateY(100px);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
70% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dropZonePulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
border-color: rgba(var(--v-theme-primary), 0.5);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.02);
|
||||
border-color: rgba(var(--v-theme-primary), 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.components-library-container {
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.components-library-panel {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.library-toggle-btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.component-item {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.component-preview {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.component-title {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.component-description {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user