Appearance

ViewToggle Component ​

File Information ​

  • Path: app/components/miscellaneous/ViewToggle.vue
  • Purpose: Grid/list view mode toggle component with icon buttons
  • Type: Miscellaneous Component

Overview ​

The ViewToggle component provides a toggle between grid and list view modes. It displays two icon buttons (grid and list) with active state indication and tooltips.

Features ​

  • Grid View Button: Toggles to grid view mode
  • List View Button: Toggles to list view mode
  • Active State: Highlights active view mode
  • Tooltips: Shows "Grid View" and "List View" tooltips
  • Two-Way Binding: Supports v-model for view mode

Props ​

typescript
{
  mode?: 'grid' | 'list'  // Current view mode (default: 'grid')
}

Events ​

typescript
{
  'update:mode': [value: 'grid' | 'list']  // View mode changed
}

Key Functionality ​

View Modes ​

  • Grid View: Displays items in grid layout
  • List View: Displays items in list layout

Active State ​

  • Active button has .active class
  • Visual indication of current view mode
  • Icon color changes for active state

Tooltips ​

  • "Grid View" tooltip on grid button
  • "List View" tooltip on list button
  • Custom tooltip styling

Usage Example ​

vue
<template>
  <!-- Two-way binding -->
  <ViewToggle v-model:mode="viewMode" />
  
  <!-- Or with explicit event handling -->
  <ViewToggle :mode="viewMode" @update:mode="viewMode = $event" />
</template>

<script setup lang="ts">
import ViewToggle from '~/components/miscellaneous/ViewToggle.vue'

const viewMode = ref<'grid' | 'list'>('grid')
</script>

Styling ​

Uses global SCSS classes:

  • .grid-list-view - Main container
  • .active - Active button state
  • Icons use gray color (#B8B8B8)