SCheckboxGroup > SCheckbox

Одиночная галочка или набор галочек.

В чем отличие от аналогов?

В отличие от популярных библиотек компонентов для Vue3:

1. Сразу идет с кликабельным стандартизированным лейблом в качестве простого атрибута. Это унифицирует код и внешний вид компонентов, упрощается поддержка и взаимозаменяемость.
2. Поддерживает три формата передачи опций в группы чекбоксов, что удобно в зависимости от кейса:
   1. <SCheckbox /> — там где опции являются частью дизайна, их можно и удобно хардкодить в шаблон;
   2. {value1: title1, value2: title2} — что удобно для быстрого получения из key-value конфигов, а также из моделей — User::pluck('name', 'id');
   3. [[value1, title1], [value2, title2]] — что удобно для выгрузки там, где важен порядок. Это минимизирует код в контроллерах, помогая сохранять принцип «тонкого контроллера», которого мы придерживаемся.
3. Взаимозаменяемость формата опций с другими выбиралками из вариантов. Это позволяет легко заменять SCheckboxGroup на SSelect или SRadioGroup, не трогая бэкенд код.

Одиночная галочка

Я согласен

<SCheckbox v-model="isAccepted">Я согласен</SCheckbox>

<template>
    <SCheckbox v-model="isAccepted">Я согласен</SCheckbox>
</template>
<script setup>
import { ref } from 'vue'
const isAccepted = ref(false)
</script>

Модель принимает значение true/false.

Группа галочек

Ошибка

Вопрос

Идея

В модели будет храниться массив выбранных значений: []

<SCheckboxGroup v-model="types">
    <SCheckbox value="bug">Ошибка</SCheckbox>
    <SCheckbox value="question">Вопрос</SCheckbox>
    <SCheckbox value="idea">Идея</SCheckbox>
</SCheckboxGroup>
<p>В модели будет храниться массив выбранных значений: <code>{{ types }}</code></p>

<template>
    <SCheckboxGroup v-model="types">
        <SCheckbox value="bug">Ошибка</SCheckbox>
        <SCheckbox value="question">Вопрос</SCheckbox>
        <SCheckbox value="idea">Идея</SCheckbox>
    </SCheckboxGroup>
    <p>В модели будет храниться массив выбранных значений: <code>{{ types }}</code></p>
</template>
<script setup>
import { ref } from 'vue'
const types = ref([])
</script>

Динамический набор значений

В предыдущем примере набор вариантов хардкодился в шаблоне, что удобно, когда набор значений относится к логическому уровню интерфейса. Но когда набор вариантов идет из базы данных или конфига, очень неудобно каждый раз формировать набор элементов через v-for, и вместо этого используем атрибут options.

Иванов

Петров

Сидоров

<SCheckboxGroup v-model="users" :options="userOptions" />

<template>
    <SCheckboxGroup v-model="users" :options="userOptions" />
</template>
<script setup>
import { ref } from 'vue'
const users = ref([])
const userOptions = { 1: 'Иванов', 2: 'Петров', 3: 'Сидоров' }
</script>

Где options — это объект вариантов выбора в формате {value1: title1, value2: title2} или массив в формате [[value1, title1], [value2, title2]]

Вертикальный список галочек

Чтобы выводить группу галочек вертикальным списком, добавляем атрибут vertical:

Иванов

Петров

Сидоров

<SCheckboxGroup v-model="users" :options="userOptions" vertical />

<template>
    <SCheckboxGroup v-model="users" :options="userOptions" vertical />
</template>
<script setup>
import { ref } from 'vue'
const users = ref([])
const userOptions = { 1: 'Иванов', 2: 'Петров', 3: 'Сидоров' }
</script>

Недоступное значение

Добавляем атрибут disabled значению, которое должно быть недоступно для переключения.

Ошибка

Вопрос

Идея

<SCheckboxGroup v-model="types">
    <SCheckbox value="bug" disabled>Ошибка</SCheckbox>
    <SCheckbox value="question">Вопрос</SCheckbox>
    <SCheckbox value="idea">Идея</SCheckbox>
</SCheckboxGroup>

<template>
    <SCheckboxGroup v-model="types">
        <SCheckbox value="bug" disabled>Ошибка</SCheckbox>
        <SCheckbox value="question">Вопрос</SCheckbox>
        <SCheckbox value="idea">Идея</SCheckbox>
    </SCheckboxGroup>
</template>
<script setup>
import { ref } from 'vue'
const types = ref([])
</script>

Интерфейс компонента SCheckboxGroup

Свойства (Props)

Название	Тип	По умолчанию	Описание
v-model	any[]	[]	Массив выбранных значений.
options	Record | Array	{}	Список вариантов (объект или массив пар).
vertical	boolean	false	Расположение элементов в колонку.

Слоты (Slots)

Название	Описание
default	Содержимое группы (обычно компоненты SCheckbox).

Интерфейс компонента SCheckbox

Свойства (Props)

Название	Тип	По умолчанию	Описание
v-model	any	-	Значение (для одиночного использования).
value	any	undefined	Значение элемента (для использования в группе).
disabled	boolean	false	Отключает возможность выбора.

Слоты (Slots)

Название	Описание
default	Текст лейбла рядом с галочкой.

События (Events)

Название	Параметры	Описание
change	(value: any)	Вызывается при изменении состояния.