Appearance

CollageCard Component ​

File Information ​

  • Path: app/components/card/CollageCard.vue
  • Purpose: Displays collage cards with preview images, metadata, and actions
  • Type: Card Component

Overview ​

The CollageCard component displays collage (collection) cards with preview images arranged in different layouts based on the number of preview images. It supports 1, 2, or 3+ preview images in a grid layout.

Features ​

  • Preview Images: Displays 1, 2, or 3+ preview images in grid layout
  • Image Layout: Different layouts for different image counts
  • Quick Actions: Context menu with actions (share, download, delete, etc.)
  • Empty State: Placeholder for empty collages
  • Asset Count: Shows number of assets in collage
  • Hover Effects: Options appear on hover
  • Responsive: Adapts to mobile screens

Props ​

typescript
{
  collage: Collage              // Collage data object (required)
  downloading?: boolean         // Download in progress
  flag?: string                 // Context flag
}

Events ​

typescript
{
  share: [collage: Collage]     // Emitted when share is requested
  download: [collage: Collage]  // Emitted when download is requested
}

Composables Used ​

  • useCollagecard(props, emit) - Collage card logic and state

Key Functionality ​

Preview Image Layouts ​

Single Image (1 image) ​

  • Full width image display
  • imageGroup100 class

Two Images (2 images) ​

  • 60% / 40% split layout
  • imageGroup60 and imageGroup40 classes

Three or More Images (3+ images) ​

  • 60% / 40% split with two stacked images on right
  • imageGroup60 and imageGroup40 with h-50 classes
  • Shows first 3 preview images

Empty Collage ​

  • Placeholder layout with gray backgrounds
  • threeColumnPlaceholder class

Quick Actions Menu ​

  • Context menu with actions:
    • Share
    • Download
    • Delete
    • And more based on permissions
  • Disabled state for empty collages
  • Loading indicator for download action
  • Collage name
  • Asset count ("X Assets" or "Empty Collage")
  • Clickable to open collage

Usage Example ​

vue
<template>
  <CollageCard
    :collage="collage"
    :downloading="downloading"
    @share="handleShare"
    @download="handleDownload"
  />
</template>

<script setup lang="ts">
import CollageCard from '~/components/card/CollageCard.vue'

const collage = ref({
  id: 1,
  name: 'My Collage',
  assets_count: 5,
  preview_images: [
    { url: '...', file_type: 'jpg' },
    // ... more preview images
  ]
})
</script>

Styling ​

Uses global SCSS classes:

  • .collageBoxs - Main collage box container
  • .collageBoxsContent - Content area
  • .collageBoxsFooter - Footer area
  • .imageGroup - Image group container
  • .imageGroup100, .imageGroup60, .imageGroup40 - Layout classes
  • .visibleOptions - Shows options on small screens