Appearance

Card Types ​

File Information ​

  • Path: app/types/cards.ts
  • Purpose: TypeScript interfaces for card components (FolderCard, CollageCard, AssetContainer)
  • Exported From: ~/types (via index.ts)

Overview ​

This file contains TypeScript interfaces for card components including folder cards, collage cards, and asset containers. These types define props, emits, and data structures for card components.

Type Definitions ​

Folder Card Types ​

FolderCardFolder ​

Folder data structure for folder card component.

typescript
interface FolderCardFolder {
  id: number | string
  folder_name?: string
  is_selected?: boolean
  is_uncategorised?: boolean
  total_assets?: number
  sub_category_count?: number
  [key: string]: any
}

Properties:

  • id: number | string - Folder identifier
  • folder_name?: string - Folder name
  • is_selected?: boolean - Selection state
  • is_uncategorised?: boolean - Uncategorized flag
  • total_assets?: number - Total assets count
  • sub_category_count?: number - Subfolder count
  • [key: string]: any - Additional properties

FolderCardProps ​

Folder card component props.

typescript
interface FolderCardProps {
  folder: FolderCardFolder
  downloading?: boolean
  enableCheckbox?: boolean
  total_category?: number
  total_assets?: number
  flag?: string
  shiftKey?: number
  hide_download?: boolean
}

Properties:

  • folder: FolderCardFolder - Folder data
  • downloading?: boolean - Download in progress
  • enableCheckbox?: boolean - Enable selection checkbox
  • total_category?: number - Total categories
  • total_assets?: number - Total assets
  • flag?: string - Component flag
  • shiftKey?: number - Shift key state
  • hide_download?: boolean - Hide download button

FolderCardMenuItem ​

Folder card menu item structure.

typescript
interface FolderCardMenuItem {
  icon: string
  label: string
  clickEvent: () => void
  visible: boolean
  disable: boolean
}

FolderCardEmitEvents ​

Folder card component emit events.

typescript
interface FolderCardEmitEvents {
  (e: 'share', folder: FolderCardFolder): void
  (e: 'download', folder?: FolderCardFolder): void
  (e: 'open-folder'): void
  (e: 'fileSelect', event: Event): void
}

FolderCardComposableReturn ​

Folder card composable return type.

typescript
interface FolderCardComposableReturn {
  ishover: Ref<boolean>
  hoverTimeout: Ref<ReturnType<typeof setTimeout> | null>
  workspaceId: string | number
  screenWidth: Ref<number>
  isSmallScreen: ComputedRef<boolean>
  menuItems: ComputedRef<FolderCardMenuItem[]>
  trackFolderClick: (folder: FolderCardFolder) => void
  openFolder: (event: MouseEvent) => void
  onCardSelect: (event: Event) => void
  updateScreenWidth: () => void
  folderCardMenu: Ref<any>
}

Collage Card Types ​

CollageCardPreviewImage ​

Collage preview image structure.

typescript
interface CollageCardPreviewImage {
  url: string
  file_type?: string
  uuid?: string
}

CollageCardCollage ​

Collage data structure for collage card component.

typescript
interface CollageCardCollage {
  id: string | number
  assets_count: number
  assets_id?: (string | number)[]
  preview_images?: CollageCardPreviewImage[]
  name?: string
  collection_name?: string
  [key: string]: any
}

CollageCardProps ​

Collage card component props.

typescript
interface CollageCardProps {
  collage: CollageCardCollage
  flag?: string
  downloading?: boolean
}

CollageCardMenuItem ​

Collage card menu item structure.

typescript
interface CollageCardMenuItem {
  icon: string
  label: string
  clickEvent: () => void
  visible: boolean
  disable: boolean
}

Asset Container Types ​

AssetContainerOpts ​

Asset container options.

typescript
interface AssetContainerOpts {
  file: DamFile
}

Note: DamFile is imported from ./common

AssetContainerProps ​

Asset container component props.

typescript
interface AssetContainerProps {
  file: any
  selected?: boolean
  downloading?: boolean
  insideFolder?: boolean
}

Usage Examples ​

Folder Card ​

typescript
import type { FolderCardProps, FolderCardFolder } from '~/types'

const folder: FolderCardFolder = {
  id: 123,
  folder_name: 'My Folder',
  total_assets: 10,
  sub_category_count: 2
}

const props: FolderCardProps = {
  folder,
  enableCheckbox: true,
  flag: 'folders'
}

Collage Card ​

typescript
import type { CollageCardProps, CollageCardCollage } from '~/types'

const collage: CollageCardCollage = {
  id: 456,
  assets_count: 5,
  name: 'My Collage',
  preview_images: [{
    url: '/preview.jpg',
    file_type: 'jpg'
  }]
}

const props: CollageCardProps = {
  collage,
  flag: 'collage'
}

Asset Container ​

typescript
import type { AssetContainerProps } from '~/types'

const props: AssetContainerProps = {
  file: assetData,
  selected: false,
  downloading: false,
  insideFolder: true
}
  • DamFile - From common.ts
  • Ref, ComputedRef - From Vue

Import Example ​

typescript
import type {
  FolderCardProps,
  FolderCardFolder,
  CollageCardProps,
  CollageCardCollage,
  AssetContainerProps
} from '~/types'

Notes ​

  • All card types are exported from ~/types
  • Folder and collage cards share similar structure
  • Asset container uses generic any for file type
  • Composable return types include reactive refs and computed values