Appearance

AssetList Components ​

Overview ​

AssetList components handle the display, management, and interaction with digital assets throughout the application.

AssetContainer ​

File Information ​

  • Path: components/dam/AssetList/AssetContainer.vue
  • Purpose: Container component for asset preview and display

Features ​

  • Supports multiple file types (PDF, images, videos, documents, text)
  • Preview generation for various file formats
  • Loading states with skeleton loaders
  • Error handling for failed previews

Props ​

javascript
{
  file: Object,          // Asset object
  loadSkeleton: Boolean, // Show skeleton loader
  contentLoader: Boolean // Content loading state
}

File Type Support ​

  • PDF: iframe preview with Office Online
  • Images: Direct image display
  • Videos: Video player with controls
  • Documents: Office Online preview
  • Text: iframe preview
  • HTML: Image preview or iframe

Methods ​

  • checkPreview() - Validates preview load
  • handleImageError() - Handles image load errors
  • handleVideoError() - Handles video load errors

Versions ​

File Information ​

  • Path: components/dam/AssetList/Versions.vue
  • Purpose: Manages asset version history

Features ​

  • Display version list
  • Upload new versions
  • Download specific versions
  • Version comparison

Props ​

javascript
{
  asset: Object,        // Asset object
  versions: Array       // Version list
}

Events ​

  • version-uploaded - Emitted when new version is uploaded
  • version-selected - Emitted when version is selected

AddTags ​

File Information ​

  • Path: components/dam/AssetList/AddTags.vue
  • Purpose: Tag management for assets

Features ​

  • Add tags to assets
  • Remove tags
  • Tag suggestions
  • Bulk tag operations

Props ​

javascript
{
  asset: Object,        // Asset object
  tags: Array,          // Available tags
  selectedTags: Array  // Currently selected tags
}

Events ​

  • tags-updated - Emitted when tags are updated
  • tag-added - Emitted when tag is added
  • tag-removed - Emitted when tag is removed

ShareLinkHeader ​

File Information ​

  • Path: components/dam/AssetList/ShareLinkHeader.vue
  • Purpose: Header for shared asset links

Features ​

  • Display share link information
  • Copy link functionality
  • Link expiration display
  • Access control display

Props ​

javascript
{
  shareLink: Object,    // Share link object
  asset: Object        // Asset object
}

Usage Examples ​

AssetContainer ​

vue
<AssetContainer
  :file="asset"
  :load-skeleton="loading"
  :content-loader="contentLoading"
/>

Versions ​

vue
<Versions
  :asset="selectedAsset"
  :versions="assetVersions"
  @version-uploaded="handleVersionUpload"
/>

AddTags ​

vue
<AddTags
  :asset="selectedAsset"
  :tags="availableTags"
  :selected-tags="assetTags"
  @tags-updated="handleTagsUpdate"
/>

API Integration ​

Components interact with these endpoints:

  • GET /dam/assets/:id - Fetch asset details
  • GET /dam/assets/:id/versions - Fetch versions
  • POST /dam/assets/:id/versions - Upload version
  • POST /dam/assets/:id/tags - Update tags
  • GET /dam/tags - Fetch available tags