Appearance

Selection Types ​

File Information ​

  • Path: app/types/selection.ts
  • Purpose: TypeScript interfaces for toggle selection composable
  • Exported From: ~/types (via index.ts)

Overview ​

This file contains TypeScript interfaces for selection functionality including selectable items and selection contexts. These types are used by the useToggleSelection composable for handling multi-select functionality across different pages.

Type Definitions ​

Core Selection Types ​

SelectableItem ​

Base selectable item interface.

typescript
interface SelectableItem {
  id: string | number
  is_selected: boolean
}

Properties:

  • id: string | number - Item identifier
  • is_selected: boolean - Selection state

Usage:

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

const item: SelectableItem = {
  id: 123,
  is_selected: false
}

SelectableFileItem ​

Selectable file item (extends SelectableItem).

typescript
interface SelectableFileItem extends SelectableItem {
  display_file_name?: string
}

Additional Properties:

  • display_file_name?: string - File display name

SelectableFolderItem ​

Selectable folder item (extends SelectableItem).

typescript
interface SelectableFolderItem extends SelectableItem {}

SelectableSearchDocument ​

Selectable search document (extends SelectableItem).

typescript
interface SelectableSearchDocument extends SelectableItem {}

SelectableSearchItem ​

Selectable search item wrapper.

typescript
interface SelectableSearchItem {
  document: SelectableSearchDocument
}

Properties:

  • document: SelectableSearchDocument - Search document

SelectableSharingItem ​

Selectable sharing item (extends SelectableItem).

typescript
interface SelectableSharingItem extends SelectableItem {}

Context Interfaces ​

FileSelectionContext ​

File selection context for file pages.

typescript
interface FileSelectionContext {
  files: SelectableItem[]
  selected_items?: SelectableItem[]
  lastPage?: number
  currentPage?: number
}

Properties:

  • files: SelectableItem[] - Array of selectable files
  • selected_items?: SelectableItem[] - Selected items array
  • lastPage?: number - Last page number
  • currentPage?: number - Current page number

FolderSelectionContext ​

Folder selection context for folder pages.

typescript
interface FolderSelectionContext {
  folderAssets: SelectableItem[]
  folders: SelectableFolderItem[]
  selectedFolders?: SelectableFolderItem[]
  selected_items?: SelectableItem[]
  lastPage?: number
  currentPage?: number
}

Properties:

  • folderAssets: SelectableItem[] - Folder assets (files + folders)
  • folders: SelectableFolderItem[] - Folders array
  • selectedFolders?: SelectableFolderItem[] - Selected folders
  • selected_items?: SelectableItem[] - Selected items
  • lastPage?: number - Last page number
  • currentPage?: number - Current page number

ExternalSelectionContext ​

External selection context for shared assets pages.

typescript
interface ExternalSelectionContext {
  externalFiles: SelectableItem[]
  selected_items?: SelectableItem[]
  lastPage?: number
  currentPage?: number
}

Properties:

  • externalFiles: SelectableItem[] - External shared files
  • selected_items?: SelectableItem[] - Selected items
  • lastPage?: number - Last page number
  • currentPage?: number - Current page number

SharingSelectionContext ​

Sharing selection context for sharing pages.

typescript
interface SharingSelectionContext {
  share_data: SelectableSharingItem[]
}

Properties:

  • share_data: SelectableSharingItem[] - Share items array

TrashSelectionContext ​

Trash selection context for trash pages.

typescript
interface TrashSelectionContext {
  files: SelectableFileItem[]
  folders: SelectableFolderItem[]
  selectedFiles: SelectableFileItem[]
  selectedFolders: SelectableFolderItem[]
  totalAssets: number
}

Properties:

  • files: SelectableFileItem[] - Trash files
  • folders: SelectableFolderItem[] - Trash folders
  • selectedFiles: SelectableFileItem[] - Selected files
  • selectedFolders: SelectableFolderItem[] - Selected folders
  • totalAssets: number - Total assets count

Page Types ​

RegularPageType ​

Regular page type identifier.

typescript
type RegularPageType = 'collage' | 'uploaded' | 'folders' | 'external'

Values:

  • 'collage' - Collage page
  • 'uploaded' - Uploaded files page
  • 'folders' - Folders page
  • 'external' - External share page

Usage Examples ​

Basic Selection ​

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

const items: SelectableItem[] = [
  { id: 1, is_selected: false },
  { id: 2, is_selected: true },
  { id: 3, is_selected: false }
]

Folder Selection Context ​

typescript
import type { FolderSelectionContext, SelectableFolderItem } from '~/types'

const context: FolderSelectionContext = {
  folderAssets: [
    { id: 1, is_selected: false },
    { id: 2, is_selected: true }
  ],
  folders: [
    { id: 1, is_selected: false }
  ],
  selected_items: [],
  lastPage: 5,
  currentPage: 1
}

Using with Toggle Selection ​

typescript
import type { FileSelectionContext, RegularPageType } from '~/types'
import { useToggleSelection } from '~/composables/core/useToggleSelection'

const context: FileSelectionContext = {
  files: fileList,
  selected_items: [],
  lastPage: 10,
  currentPage: 1
}

const pageType: RegularPageType = 'folders'

// Use in toggle selection composable
toggleSelection(context, file, index, event, pageType)
  • Used by useToggleSelection composable
  • Used by selection utilities

Import Example ​

typescript
import type {
  SelectableItem,
  SelectableFileItem,
  SelectableFolderItem,
  FileSelectionContext,
  FolderSelectionContext,
  RegularPageType
} from '~/types'

Notes ​

  • All selection types are exported from ~/types
  • Base SelectableItem interface used throughout
  • Context types provide structure for different page types
  • Supports Shift+Click range selection
  • Pagination context for multi-page selection