GrCheckboxGroup

Примеры 4 у каждого — живое демо и его код

• Права роли по разделам

  Каждый раздел — группа со своим string[], и группа раздаёт флажкам выбор, name и состояния — собственный v-model ни одному не нужен. disabled у опции сильнее доступной группы: аннулирование выставленных счетов остаётся за владельцем, и подпись это говорит.

  Role · Accountant3 members · 5 of 7 permissionsSave role

  Invoices

  View invoices

  Create and edit drafts

  Send to customers

  Void issued invoices · owner only

  Payments

  View payments

  Match bank transfers

  Issue refunds
  Код и пропы

• Фильтр со счётчиками

  Когда строке нужно больше подписи, слот по умолчанию заменяет options: каждый GrCheckbox получает только value, остальное даёт группа. Здесь у каждого статуса свой счётчик, а итог под списком следует за выбором.

  StatusClear

  Open48

  Waiting on customer23

  On hold6

  Solved this week131

  71 tickets in the queue
  Код и пропы

• Просмотр, который становится правкой

  readonly у группы оставляет выбор видимым и в форме, но не переключаемым: продление просматривают, а не правят, пока не нажата «Изменить». Состояние принадлежит группе и доходит до каждого флажка, и при переключении ничего не сдвигается.

  Renewal · add-onsBusiness plan renews on 1 NovemberChange

  Single sign-on€120 a month

  Audit log export€60 a month

  Sandbox workspace€45 a month

  Priority support€200 a month

  Add-ons on the next invoice€320 a month
  Код и пропы

• Дни недели в ряд

  direction="horizontal" подходит семи коротким подписям. required объявляет правило, а invalid отмечает группу целиком: «хотя бы один день» нарушает набор, а не отдельный флажок, поэтому ошибка объявляется один раз, а не семь.

  Café Lumen · deliveriesBread arrives before 7:00 on the chosen days

  Delivery days

  Mon

  Tue

  Wed

  Thu

  Fri

  Sat

  Sun

  3 deliveries a week
  Код и пропы

API порождается из пакета · разойтись не может

import type { GrCheckboxGroupConfigurableProps, GrCheckboxGroupDirection, GrCheckboxGroupOption } from '@feugene/granularity/components/GrCheckboxGroup'

const grCheckboxGroupConfig: import("@feugene/granum/contract").GranumComponentDescriptor<"GrCheckboxGroup">;

interface GrCheckboxGroupConfigurableProps {
    size: GrCheckboxSize;
}

type GrCheckboxGroupDirection = 'vertical' | 'horizontal';

interface GrCheckboxGroupOption {
    value: string;
    label: string;
    disabled?: boolean;
}

interface GrCheckboxGroupProps {
    /** Отмеченные значения (`v-model`): у каждого чекбокса группы свой `value`. */
    modelValue: string[];
    /** Варианты, из которых группа строит чекбоксы. Не нужны, если флажки разложены в слоте. */
    options?: GrCheckboxGroupOption[];
    /** Общее имя для нативной формы: значения уйдут как повторяющиеся поля. */
    name?: string;
    /** Выключить всю группу. Складывается с `disabled` у `GrFormField`. */
    disabled?: boolean;
    /** Только для чтения: выбор видно, но он не меняется. */
    readonly?: boolean;
    /** Визуальное и ARIA-состояние ошибки для всей группы. */
    invalid?: boolean;
    /** Обязательная группа: `aria-required` объявляют сами чекбоксы. */
    required?: boolean;
    /** Раскладка: `vertical` — столбцом, `horizontal` — строкой с переносом. По умолчанию `vertical`. */
    direction?: GrCheckboxGroupDirection;
    /** Ступень размера чекбоксов группы. По умолчанию `md`; берётся из `GrConfigProvider`. */
    size?: GrCheckboxSize;
    /** Доступное имя группы. Не задано — имя берётся из подписи `GrFormField`. */
    ariaLabel?: string;
}

interface GrCheckboxGroupEmits {
    /** Новый набор отмеченных значений (`v-model`). */
    (e: 'update:modelValue', value: string[]): void;
    /** Пользователь отметил или снял чекбокс — тот же payload, что у `update:modelValue`. */
    (e: 'change', value: string[]): void;
    /** Фокус вошёл в группу. Переход между её чекбоксами событием не считается. */
    (e: 'focus', event: FocusEvent): void;
    /** Фокус ушёл из группы целиком. */
    (e: 'blur', event: FocusEvent): void;
}

type GrCheckboxGroupInstance = ComponentExposed<typeof GrCheckboxGroupComponent>;

Доступность

Полный контракт пакета: docs/keyboard.md ↗

Связанные четвёртый вопрос: когда не это

• GrCheckboxФормы

  Чекбокс один

• GrSelectФормы

  Вариантов много

• GrAutocompleteФормы

  Вариантов много и их ищут вводом

• GrRadioGroupФормы

  Можно выбрать только один

• GrTreeSelectФормы

  Варианты вложены

• GrChipGroupДанныессылается сюда

  Берут, когда фильтры списка строкой.

• GrFormFieldФормыссылается сюда

  Берут, когда у поля есть подпись.

• GrSwitchФормыссылается сюда

  Берут, когда настройка включается сразу.