Appearance

Components Documentation ​

Overview ​

This section documents all Vue components used in the Admin Frontend application. Components are organized by functionality and located in the components/ directory.

Component Structure ​

DAM Components ​

AssetList ​

Components for displaying and managing assets:

  • AssetContainer - Asset preview container
  • AssetUpload - Asset upload interface
  • Versions - Asset version management
  • AddTags - Tag management for assets

Collage ​

Components for collage functionality:

  • FileListingCard - Asset card in collage view
  • AvatarList - User avatar list
  • MediaResources - Media resource display
  • VideoHoverContent - Video hover actions
  • NonVideoHoverContent - Non-video hover actions

Folders ​

Folder management components:

  • FolderCard - Folder display card
  • FolderDialogs - Folder operation dialogs

Search-related components:

  • SearchBar - Search input component
  • SearchBarTypeSense - Typesense search bar
  • SearchFilter - Filter panel
  • SearchTabs - Search tabs navigation
  • SearchBulkActions - Bulk action toolbar

Dialogs ​

Dialog components for various operations:

  • AdvanceShareDialog - Advanced sharing options
  • CreateCollageDialog - Create collage dialog
  • PermissionDialog - Portal visibility selection ("Portals" dialog; replaces public/private toggle)
  • CreatePortalDialog - Create new brand portal
  • PortalLogoEditDialog - Edit portal logo
  • PortalFaviconEditDialog - Edit portal favicon
  • PortalLimitDialog - Portal plan limit prompt
  • PreviewDialog - Asset preview dialog
  • QuickViewDialog - Quick view dialog
  • ShareAssetDialog - Share asset dialog

Theme Components ​

Global ​

Global theme components:

  • CollageHeader - Main application header
  • CoreHeader - Core header component
  • LeftMenu - Left navigation menu
  • DamNotification - DAM notifications
  • OverlayLoader - Loading overlay
  • Error - Error display component

Settings ​

Settings-related components:

  • AccountSettingsLeftMenu - Settings navigation
  • WorkspaceNote - Workspace notes

Table Components ​

Table components for data display:

  • announcementTable - Announcements table
  • externalUserTable - External users table
  • InvoiceTable - Invoices table
  • shareLinkListTable - Share links table
  • usersMenuOption - User menu options
  • wpAdminsTable - Workspace admins table

Utility Components ​

  • BreadCrumbs - Breadcrumb navigation
  • ViewToggle - View mode toggle
  • UpgradePlanSection - Plan upgrade section
  • EmailNotificationsAlert - Email notification alert

Component Patterns ​

Props ​

Components use props for data input:

javascript
props: {
  file: Object,
  folder: Object,
  canEdit: Boolean,
  // ... other props
}

Events ​

Components emit events for parent communication:

javascript
this.$emit('fileSelect', file)
this.$emit('menuAction', action)

Slots ​

Many components use slots for flexible content:

vue
<slot name="actions"></slot>
<slot name="content"></slot>

Component Best Practices ​

  1. Single Responsibility - Each component has a focused purpose
  2. Reusability - Components are designed for reuse
  3. Props Validation - Props are validated with types
  4. Event Communication - Parent-child communication via events
  5. Scoped Styles - Styles are scoped to prevent conflicts

Component Documentation ​

Detailed documentation for each component includes:

  • Purpose and functionality
  • Props and their types
  • Events emitted
  • Slots available
  • Usage examples
  • Dependencies