CataUiIconSwitch

A toggle component that switches between different icons, typically used for toggling between different view modes or states.

<CataUiIconSwitch :icons="iconsData" v-model="iconsModel" />

Props

Prop	Description	Type	Default	Required
icons	An array of icon objects	Array		Yes
v-model	The icon object for the active icon	Object		Yes

Events

Event	Description	Parameters
update:modelValue	Emitted when the selected icon changes	The newly selected icon object

Data structure

The component expects the icons array to contain objects with the following properties:

Property	Description	Type	Required	Default
icon	The icon identifier (Bootstrap icon name)	String	Yes
id	A unique identifier for the icon	Any	Yes
size	The size of the icon	String	No	'18px'
title	Tooltip text when hovering over the icon	String	No	''

const iconsData = [
    {
        id: 1,
        icon: 'bi-justify',
        size: '18px',  // Optional - sets the icon size
        title: 'List view' // Optional - adds tooltip when hovering
    },
    { 
        id: 2,
        icon: 'bi-grid',
        size: '18px',  // Optional - sets the icon size
        title: 'Grid view' // Optional - adds tooltip when hovering
    },
];

const iconsModel = ref(iconsData[0]);

Example with all properties

<template>
  <CataUiIconSwitch :icons="viewOptions" v-model="currentView" />
</template>

<script setup>
import { ref } from 'vue';

const viewOptions = [
  {
    id: 'list',
    icon: 'bi-list-ul',
    size: '20px',
    title: 'List View'
  },
  {
    id: 'grid',
    icon: 'bi-grid-3x3-gap',
    size: '20px',
    title: 'Grid View'
  },
  {
    id: 'calendar',
    icon: 'bi-calendar3',
    size: '20px',
    title: 'Calendar View'
  }
];

const currentView = ref(viewOptions[0]);
</script>