Appearance

Component Types ​

File Information ​

  • Path: app/types/components.ts
  • Purpose: Component props and emits interfaces

Overview ​

Component types define props and emits for Vue components. Located in app/types/components.ts.

AssetCardProps ​

AssetCard component props.

typescript
interface AssetCardProps {
  file: any
  insideFolder: boolean
  downloading: boolean
  searchPage: boolean
  flag: string
  source?: string
  shiftKey: number
  hideDownload: boolean
  shareMode?: boolean
  externalQuickView?: boolean // emit quickView instead of opening QuickViewDialog (PR #137)
}

Added in PR #137 (RIV-1266) for GalleryQuickViewDialog and exported from app/types/index.ts.

typescript
interface GalleryPageResult {
  items: any[]
  total?: number
  lastPage?: number
}

interface GalleryPagination {
  fetchPage: (page: number) => Promise<GalleryPageResult>
  loadedPages: number
  pageSize?: number
  total?: number
  lastPage?: number
  prefetchRatio?: number
}

type GalleryPendingMove = 'forward' | 'backward' | 'last'

interface GalleryPaging {
  headLength: () => number
  total: () => number
  hasGap: () => boolean
  hasTail: () => boolean
  canLoadForward: () => boolean
  canLoadBackward: () => boolean
  canLoadLast: () => boolean
  loading: () => boolean
  canPrefetch?: () => boolean
  ratio?: () => number | undefined
  loadForward: () => void
  loadBackward: () => void
  loadLast: () => void
}

interface GalleryNavigationOptions {
  assets: () => any[]
  startAssetId: () => string | number | null | undefined
  open: () => boolean
  keyboardEnabled?: () => boolean
  loop?: () => boolean | undefined
  paging?: GalleryPaging
}

interface GalleryPagerOptions {
  baseAssets: () => any[]
  pagination: () => GalleryPagination | null | undefined
  open: () => boolean
}

interface GalleryThumbSlot {
  key: string        // asset-<id>, pending-<position> or empty-<position>
  offset: number     // 0 = current asset
  position: number
  index: number      // -1 when not loaded or empty
  asset: any | null
  empty: boolean
}

interface GalleryQuickViewProps {
  dialog: boolean
  assets: any[]
  startAssetId?: string | number | null
  pagination?: GalleryPagination | null
  hideDownload?: boolean
  loop?: boolean
}

interface GalleryQuickViewEmits {
  (e: 'update:dialog', v: boolean): void
  (e: 'close'): void
}

CollageCardProps ​

CollageCard component props.

typescript
interface CollageCardProps {
  collage: Collage
}

FolderCardProps ​

FolderCard component props.

typescript
interface FolderCardProps {
  folder: Folder
}

SearchBarProps ​

SearchBar component props.

typescript
interface SearchBarProps {
  placeholder?: string
  autofocus?: boolean
}

ShareDialogProps ​

ShareDialog component props.

typescript
interface ShareDialogProps {
  asset: Asset
  visible: boolean
}

Usage ​

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

const props = defineProps<AssetCardProps>()

File Path: app/types/components.ts