Appearance

Resource Component ​

File Information ​

  • Path: app/components/dashboard/Resource.vue
  • Purpose: File list item component for dashboard displaying recent files and resources
  • Type: Dashboard Component

Overview ​

The Resource component (also known as FileListItem) displays a file in a list format on the dashboard. It shows file thumbnail, metadata, and provides actions like share and download.

Features ​

  • Thumbnail Display: Shows file thumbnail or video poster
  • Video Support: Video preview with hover autoplay
  • Selection: Checkbox for multi-select (optional)
  • Metadata: File name, date modified, and file size
  • Quick Actions: Share and download menu
  • Video Controls: Play/pause button for videos
  • Loading States: Skeleton loader for thumbnails
  • Error Handling: Fallback for failed thumbnail loads

Props ​

typescript
{
  file: DamFile              // File data object (required)
  selected?: boolean         // Whether file is selected
  shareMode?: boolean        // Share mode (hides share option)
  hideSelect?: boolean       // Hide selection checkbox
  mode?: 'row' | 'panalview' // Display mode (default: 'row')
}

Events ​

typescript
{
  click: []                          // File clicked
  'click:selected': [file: DamFile]  // Selection toggled
  share: [file: DamFile]             // Share requested
}

Composables Used ​

  • useHelpers() - Format date and file size
  • useAnalytics() - Track download events
  • useFileType() - Determine if file is image/video
  • useDownloadStore() - Download functionality

Key Functionality ​

Thumbnail Display ​

  • Image files: Shows thumbnail or preview image
  • Video files: Shows video poster or preview
  • Fallback: Placeholder icon based on file type
  • Error handling: Handles failed image loads

Video Support ​

  • Video element with hover autoplay
  • Play/pause button overlay
  • Muted, looped, playsinline
  • Preloads metadata

Selection ​

  • Checkbox appears when hideSelect is false
  • Emits click:selected event
  • Visual feedback for selected state

Actions Menu ​

  • Share option (hidden in share mode)
  • Download option
  • Uses AsyncIcon for menu icons

Download ​

  • Handles image and non-image downloads differently
  • Tracks analytics events
  • Supports collection context
  • Uses download store

Usage Example ​

vue
<template>
  <Resource
    :file="file"
    :selected="isSelected"
    :share-mode="false"
    @click="handleClick"
    @click:selected="handleSelect"
    @share="handleShare"
  />
</template>

<script setup lang="ts">
import Resource from '~/components/dashboard/Resource.vue'
import type { DamFile } from '~/types'

const file = ref<DamFile>({
  id: 1,
  display_file_name: 'example.jpg',
  // ... other file properties
})
</script>

Styling ​

Uses Vuetify list item component with custom classes:

  • .pa-2 - Padding
  • .rounded-lg - Rounded corners
  • .bg-primary - Selected background
  • .bg-surface - Default background