Appearance

Components Documentation ​

Overview ​

This section documents all Vue components used in the Collage Brand Portal application. Components are organized by functionality and located in the app/components/ directory.

Component Structure ​

components/
├── card/              # Card components for displaying assets, folders, and collages
│   ├── Asset/         # Asset card components
│   │   ├── AssetCard.vue
│   │   └── AssetContainer.vue
│   ├── CollageCard.vue
│   └── FolderCard.vue
├── dashboard/         # Dashboard/homepage components
│   ├── Resource.vue
│   └── Tile.vue
├── dialogs/           # Dialog/modal components
│   ├── AssetConverterDialog.vue
│   ├── ConfirmationDialog.vue
│   ├── QuickViewDialog.vue
│   └── ShareAssetDialog.vue
├── global/            # Global UI components
│   ├── Error.vue
│   ├── Header.vue
│   ├── Notification.vue
│   ├── SideBar.vue
│   ├── SidebarFolderTree.vue
│   └── Snackbar.vue
├── preview/           # Asset preview components
│   ├── PdfJsViewer.vue
│   └── TxtViewer.vue
├── miscellaneous/     # Utility and helper components
│   ├── AsyncIcon.vue
│   ├── BreadCrumbs.vue
│   ├── CollageLoader.vue
│   ├── GridViewSkeleton.vue
│   ├── ListViewSkeleton.vue
│   └── ViewToggle.vue
├── search/            # Search-related components
│   ├── AddedFilterOption.vue
│   ├── ListLevelThree.vue
│   ├── PopularFilterPills.vue
│   ├── SearchAssets.vue
│   ├── SearchBar.vue
│   ├── SearchBulkActions.vue
│   ├── SearchFilter.vue
│   ├── SearchGridAssetsSkeleton.vue
│   ├── SearchListSkeleton.vue
│   └── SearchTableHeader.vue
├── sharing/           # Sharing components
│   ├── ShareLinkListTable.vue
│   ├── ShareTableHeader.vue
│   └── ShareTableListItem.vue
└── svg/               # SVG icon components (144 icon components)
    ├── archiveIcon.vue
    ├── audioIcon.vue
    ├── checkIcon.vue
    ├── closeIcon.vue
    ├── downloadIcon.vue
    ├── editIcon.vue
    ├── folderIcon.vue
    ├── gridIcon.vue
    ├── listViewIcon.vue
    ├── searchIcon.vue
    ├── shareIcon.vue
    ├── uploadIcon.vue
    └── ... (144 total icon components)

Component Categories ​

Card Components ​

Card components for displaying assets, folders, and collages in grid and list views.

  • AssetCard - Individual asset card with thumbnail, metadata, and actions
  • AssetContainer - Container component for asset preview (PDF, video, images, etc.)
  • CollageCard - Collage card display with thumbnail and metadata
  • FolderCard - Folder card with icon and navigation support

Dashboard Components ​

Components used on the dashboard/homepage.

  • Tile - Dashboard tile with image and navigation
  • Resource - File list item component for dashboard

Dialog Components ​

Modal/dialog components for user interactions.

Global Components ​

Global UI components used throughout the application.

  • Header - Main application header with search, notifications, and user menu
  • SideBar - Left sidebar navigation with menu items
  • SidebarFolderTree - Sidebar folder tree for folder navigation
  • Snackbar - Global notification snackbar component
  • Notification - Real-time notification component
  • Error - Error display component

Preview Components ​

Components for in-app asset preview (PDF, plain text).

  • PdfJsViewer - PDF preview using PDF.js (zoom, thumbnails, find-in-page, proxy)
  • TxtViewer - Plain text file viewer (zoom, fit, find-in-page, proxy)

Miscellaneous Components ​

Utility and helper components.

Search Components ​

Components for search functionality and filtering.

Sharing Components ​

Components for asset sharing functionality.

SVG Icon Components ​

The svg/ folder contains 144 SVG icon components used throughout the application. These are Vue components that render SVG icons with consistent styling and props. They are loaded dynamically via the AsyncIcon component by name.

Naming convention: PascalCase file names (e.g. SnackbarSuccess.vue) or camelCase with an "Icon" suffix (e.g. folderIcon.vue). The name passed to AsyncIcon is the component name without .vue.

Props (typical): color, width, height for consistent sizing and theming.

Full list (alphabetical):
archiveIcon, audioIcon, ballIcon, boldIcon, boxIcon, buildingIcon, calendarIcon, checkCircleFillIcon, checkCircleIcon, checkIcon, chevronDownIcon, clockIcon, closeCircleIcon, closeIcon, computerIcon, copyIcon, cropFreeformIcon, cropSquareIcon, customFieldsIcon, daysNotification, deactivateIcon, deleteIcon, downArrowIcon, downloadIcon, draftIcon, draggableIcon, dropboxIcon, dropdownIcon, duplicateIcon, editIcon, emailIcon, embededIcon, emptyCollageIcon, emptyFoldersIcon, emptyTrashIcon, expandIcon, eyeClosedIcon, eyeIcon, faviconIcon, fileIcon, filterIcon, flipHorizontalIcon, flipVerticalIcon, folderIcon, folderLargeIcon, folderUnassignedLargeIcon, globeIcon, googleDriveIcon, googleIcon, gridIcon, gridViewIcon, hamburgerIcon, helpIcon, homeIcon, imageIcon, inboxIcon, infinityIcon, infoIcon, insightIcon, italicIcon, landscapeIcon, lightBoxIcon, linkIcon, listViewIcon, lockIcon, loginElementLeft, loginElementRight, logoIcon, logoTextIcon, logoutIcon, menuIcon, minusIcon, mosaicViewIcon, moveIcon, newTabIcon, optionIcon, pauseIcon, paymentAmexIcon, paymentBankIcon, paymentCartesBancairesIcon, paymentDinersIcon, paymentDiscoverIcon, paymentInteracIcon, paymentJcbIcon, paymentMasterCardIcon, paymentSecureRemoteCommerceIcon, paymentSepaIcon, paymentUnionPayIcon, paymentVisaIcon, playIcon, plusIcon, portalIcon, portraitIcon, publishIcon, redirectIcon, refineIcon, refreshIcon, removeIcon, resendInviteIcon, resetPassIcon, restoreIcon, retryIcon, revokeMailIcon, revokeShareIcon, rotateIcon, rotateLeftIcon, rotateRightIcon, s, searchIcon, sedebartoggleIcon, sessionIcon, settingIcon, shareAltIcon, shareIcon, sheduleIcon, SnackbarClose, SnackbarError, SnackbarInfo, SnackbarSuccess, SnackbarWarning, SpinLoading, squareIcon, supportIcon, tableFilterArrow, tagsIcon, toggleIcon, trendingIcon, underlineIcon, unlinkIcon, unlockIcon, uploadCloudIcon, uploadExtraLargeIcon, uploadIcon, uploadLargeIcon, uploadMediumIcon, userGroupIcon, userIcon, userLargeIcon, versionIcon, videoIcon, warningIcon, workspaceIcon, zoomInIcon, zoomOutIcon.

Usage:

vue
<AsyncIcon name="downloadIcon" :width="24" :height="24" color="#6473FF" />

Component Patterns ​

Props Definition ​

Components use TypeScript for type-safe props:

vue
<script setup lang="ts">
import type { AssetCardProps } from '~/types'

const props = defineProps<AssetCardProps>()
</script>

Events Definition ​

Components emit typed events:

vue
<script setup lang="ts">
const emit = defineEmits<{
  click: [asset: Asset]
  select: [asset: Asset, selected: boolean]
  close: []
}>()
</script>

Composables Usage ​

Components use composables for reusable logic:

vue
<script setup lang="ts">
import { useSnackbar } from '~/composables/core/miscellaneous/useSnackbar'
import { useAuthStore } from '~/stores/auth'

const snackbar = useSnackbar()
const authStore = useAuthStore()

const handleAction = async () => {
  try {
    await performAction()
    snackbar.showSuccess('Action completed')
  } catch (error) {
    snackbar.showError(error)
  }
}
</script>

Styling ​

Components use global SCSS classes from the styling system:

vue
<template>
  <v-card class="asset-card">
    <v-btn class="btn-primary">Action</v-btn>
  </v-card>
</template>

Component Documentation ​

Card Components ​

Dashboard Components ​

  • Tile - Dashboard tile component
  • Resource - Dashboard resource item

Dialog Components ​

Global Components ​

Preview Components ​

Miscellaneous Components ​

Search Components ​

Sharing Components ​

Best Practices ​

  1. Type Safety: Always use TypeScript types from ~/types
  2. Props Validation: Define props with TypeScript interfaces
  3. Event Naming: Use descriptive event names following Vue conventions
  4. Composables: Extract logic into composables when reusable
  5. Styling: Use global SCSS classes from the styling system, avoid inline styles
  6. SSR Compatibility: Ensure components work with SSR (use ClientOnly when needed)
  7. Accessibility: Follow WCAG guidelines, use semantic HTML
  8. Performance: Use v-show vs v-if appropriately, lazy load when possible
  9. Reusability: Create generic components for common patterns
  10. Icon Usage: Use AsyncIcon component for dynamic icon loading instead of direct SVG imports
  • Pages - Pages that use these components
  • Composables - Composables used by components
  • Stores - State management used by components
  • Types - TypeScript types for components
  • Styling - SCSS styling system used by components