diff --git a/docs/components-api/listbox.md b/docs/components-api/listbox.md index baaa4a9a..4fb85a87 100644 --- a/docs/components-api/listbox.md +++ b/docs/components-api/listbox.md @@ -2,22 +2,24 @@ # ExtraListbox -| Свойство | Описание | Типизация | -| ------------------- | ------------------------------------------------- | -------------------------------------------------------------- | -| `options` | список элементов или список групп с элементами | `ExtraListboxGroup[] \| ExtraListboxOption[] \| any[]` | -| `optionLabel` | наименование поля, содержащего отображаемое значение | `string` | -| `multiple` | множественный выбор (элементы с чекбоксами) | `boolean` | -| `showFilter` | отображать поле поиска элементов | `boolean` | -| `filterPlaceholder` | текст подсказки в поле поиска | `string` | -| `showCheckbox` | отображать чекбоксы у элементов и «выбрать всё» | `boolean` | -| `emptyMessage` | сообщение при отсутствии элементов | `string` | +> ✅ **Реализован**: `ExtraListboxComponent` (`@cdek-it/angular-ui-kit`) соответствует спецификации. + +| Свойство | Описание | Типизация | +| ------------------- | ---------------------------------------------------- | ------------------------------------------------------ | +| `options` | список элементов или список групп с элементами | `ExtraListboxGroup[] \| ExtraListboxOption[] \| any[]` | +| `optionLabel` | наименование поля, содержащего отображаемое значение | `string` | +| `multiple` | множественный выбор (элементы с чекбоксами) | `boolean` | +| `showFilter` | отображать поле поиска элементов | `boolean` | +| `filterPlaceholder` | текст подсказки в поле поиска | `string` | +| `showCheckbox` | отображать чекбоксы у элементов и «выбрать всё» | `boolean` | +| `emptyMessage` | сообщение при отсутствии элементов | `string` | # События -| Событие | Описание | Типизация | -| ----------------- | ----------------------------------------- | ----------------------------------------------- | -| `change` | срабатывает при изменении выбора | `(event: ExtraListboxChangeEvent) => void` | -| `filter` | срабатывает при фильтрации | `(event: ExtraListboxFilterEvent) => void` | +| Событие | Описание | Типизация | +| ----------- | ------------------------------------------ | --------------------------------------------------- | +| `change` | срабатывает при изменении выбора | `(event: ExtraListboxChangeEvent) => void` | +| `filter` | срабатывает при фильтрации | `(event: ExtraListboxFilterEvent) => void` | | `selectAll` | срабатывает при переключении «выбрать всё» | `(event: ExtraListboxSelectAllChangeEvent) => void` | # ExtraListboxChangeEvent @@ -29,28 +31,28 @@ # ExtraListboxFilterEvent -| Свойство | Описание | Типизация | -| --------------- | ----------------------- | --------- | -| `filter` | введённый текст поиска | `string` | -| `originalEvent` | исходное событие | `Event` | +| Свойство | Описание | Типизация | +| --------------- | ---------------------- | --------- | +| `filter` | введённый текст поиска | `string` | +| `originalEvent` | исходное событие | `Event` | # ExtraListboxSelectAllChangeEvent -| Свойство | Описание | Типизация | -| --------------- | --------------- | --------- | -| `checked` | выбрано ли всё | `boolean` | +| Свойство | Описание | Типизация | +| --------------- | ---------------- | --------- | +| `checked` | выбрано ли всё | `boolean` | | `originalEvent` | исходное событие | `Event` | # ExtraListboxOption -| Свойство | Описание | Типизация | -| -------- | --------------- | ------------------ | -| `name` | текст элемента | `string` | -| `code` | идентификатор | `string \| number` | +| Свойство | Описание | Типизация | +| -------- | -------------- | ------------------ | +| `name` | текст элемента | `string` | +| `code` | идентификатор | `string \| number` | # ExtraListboxGroup -| Свойство | Описание | Типизация | -| --------- | ------------------- | ------------------------------------ | -| `options` | список элементов | `ExtraListboxOption[] \| any[]` | -| `name` | наименование группы | `string` | +| Свойство | Описание | Типизация | +| --------- | ------------------- | ------------------------------- | +| `options` | список элементов | `ExtraListboxOption[] \| any[]` | +| `name` | наименование группы | `string` | diff --git a/src/lib/components/listbox/listbox.component.ts b/src/lib/components/listbox/listbox.component.ts index f7cd2df8..56165d9d 100644 --- a/src/lib/components/listbox/listbox.component.ts +++ b/src/lib/components/listbox/listbox.component.ts @@ -1,20 +1,45 @@ import { ChangeDetectionStrategy, + ChangeDetectorRef, Component, ContentChild, Directive, EventEmitter, forwardRef, + inject, Input, Output, TemplateRef } from '@angular/core'; import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { Listbox, ListboxChangeEvent } from 'primeng/listbox'; +import { Listbox } from 'primeng/listbox'; import { SharedModule } from 'primeng/api'; import { NgTemplateOutlet } from '@angular/common'; -export type ExtraListboxChangeEvent = ListboxChangeEvent; +export interface ExtraListboxChangeEvent { + value: any; + originalEvent: Event; +} + +export interface ExtraListboxFilterEvent { + filter: string; + originalEvent: Event; +} + +export interface ExtraListboxSelectAllChangeEvent { + checked: boolean; + originalEvent: Event; +} + +export interface ExtraListboxOption { + name: string; + code: string | number; +} + +export interface ExtraListboxGroup { + options: ExtraListboxOption[] | any[]; + name: string; +} @Directive({ selector: '[extraListboxItem]', standalone: true }) export class ExtraListboxItemDirective {} @@ -32,8 +57,10 @@ export class ExtraListboxItemDirective {} [optionLabel]="optionLabel" [optionValue]="optionValue" [multiple]="multiple" - [filter]="filter" - [filterPlaceHolder]="filterPlaceHolder" + [filter]="showFilter" + [filterPlaceHolder]="filterPlaceholder" + [checkbox]="showCheckbox" + [showToggleAll]="showCheckbox" [checkmark]="checkmark" [group]="group" [optionGroupLabel]="optionGroupLabel" @@ -42,6 +69,8 @@ export class ExtraListboxItemDirective {} [emptyMessage]="emptyMessage" [disabled]="isDisabled" (onChange)="onChangeHandler($event)" + (onFilter)="onFilter.emit($event)" + (onSelectAllChange)="onSelectAll.emit($event)" (onFocus)="onFocus.emit($event)" (onBlur)="onBlurHandler($event)" > @@ -57,12 +86,16 @@ export class ExtraListboxItemDirective {} ` }) export class ExtraListboxComponent implements ControlValueAccessor { - @Input() options: any[] = []; + private readonly _cdr = inject(ChangeDetectorRef); + + @Input() options: ExtraListboxGroup[] | ExtraListboxOption[] | any[] = []; @Input() optionLabel = 'label'; @Input() optionValue: string | undefined = undefined; @Input() multiple = false; - @Input() filter = false; - @Input() filterPlaceHolder: string | undefined = undefined; + @Input() showFilter = false; + @Input() filterPlaceholder: string | undefined = undefined; + @Input() showCheckbox = false; + /** Галочка у выбранного пункта (одиночный выбор) — полезный проп сверх спеки. */ @Input() checkmark = false; @Input() group = false; @Input() optionGroupLabel: string | undefined = undefined; @@ -71,6 +104,9 @@ export class ExtraListboxComponent implements ControlValueAccessor { @Input() emptyMessage: string | undefined = undefined; @ContentChild(ExtraListboxItemDirective, { read: TemplateRef }) itemTemplate: TemplateRef | null = null; + @Output() onChange = new EventEmitter(); + @Output() onFilter = new EventEmitter(); + @Output() onSelectAll = new EventEmitter(); @Output() onFocus = new EventEmitter(); @Output() onBlur = new EventEmitter(); @@ -85,19 +121,19 @@ export class ExtraListboxComponent implements ControlValueAccessor { } onChangeHandler(event: ExtraListboxChangeEvent): void { - // Обновляем внутреннее значение и уведомляем форму об изменении. this.modelValue = event.value; this._onChange(event.value); + this.onChange.emit(event); } onBlurHandler(event: FocusEvent): void { - // emit external onBlur and mark control as touched for forms this.onBlur.emit(event); this._onTouched(); } writeValue(value: any): void { this.modelValue = value; + this._cdr.markForCheck(); } registerOnChange(fn: (value: any) => void): void { @@ -110,5 +146,6 @@ export class ExtraListboxComponent implements ControlValueAccessor { setDisabledState(isDisabled: boolean): void { this._disabled = isDisabled; + this._cdr.markForCheck(); } } diff --git a/src/lib/components/listbox/listbox.figma.md b/src/lib/components/listbox/listbox.figma.md index c0894b0c..d47689a4 100644 --- a/src/lib/components/listbox/listbox.figma.md +++ b/src/lib/components/listbox/listbox.figma.md @@ -17,30 +17,39 @@ updated: '2026-06-22' `ExtraListboxComponent` — всегда видимый список опций для выбора одного или нескольких значений, который не сворачивается за триггером. Оборачивает PrimeNG `p-listbox` и расширяет его множественным выбором с чекбоксами, фильтрацией, группировкой опций и кастомным шаблоном пункта. Реализует `ControlValueAccessor` и работает с `[(ngModel)]` и `[formControl]` «из коробки». -Компонент соответствует Figma-компоненту `` (component set, nodeId `349:2649`, fileKey `Khh7arsuXss3ncqy1Dz3OZ`, библиотека «UI Kit (DS) v2.0»). Варианты задаются Figma-свойствами `state` (`default | disabled`), `empty`, `overlay`, `header`, а вложенные свойства `show-checkbox`, `show-filter` и `show-close` управляют отображением чекбоксов и строки поиска. Пункты, группы и расширенные шаблоны опций вынесены в отдельные внутренние Figma-узлы (``, ``, ``, ``) и в коде описываются через шаблон-директиву (см. Slots). +Компонент соответствует Figma-компоненту `` (component set, nodeId `349:2649`, fileKey `Khh7arsuXss3ncqy1Dz3OZ`, библиотека «UI Kit (DS) v2.0»). Верхнеуровневые варианты задаются Figma-свойствами `state` (`default | disabled`), `empty`, `overlay`, `header`; внутри `header=true` лежат вложенные узлы `` (чекбокс «выбрать всё»), `<🚧Listbox.Filter>` (строка поиска, помечена 🚧 work-in-progress в самой Figma) и `` (кнопка закрытия — актуальна только для `overlay=true`, в спеке не описана и не реализуется). Пункты, группы и расширенные шаблоны опций вынесены в отдельные внутренние Figma-узлы (``, ``, ``, ``) и в коде описываются через шаблон-директиву (см. Slots). ## Props mapping | Свойство | Тип | По умолчанию | Описание | |----------|-----|--------------|---------| -| `options` | `any[]` | `[]` | Массив опций для выбора | +| `options` | `ExtraListboxGroup[] \| ExtraListboxOption[] \| any[]` | `[]` | Массив опций (или групп опций при `group=true`) для выбора | | `optionLabel` | `string` | `'label'` | Имя поля опции, отображаемое как подпись | | `optionValue` | `string \| undefined` | `undefined` | Имя поля опции, используемое как значение модели | -| `multiple` | `boolean` | `false` | Множественный выбор — соответствует Figma-свойству `show-checkbox` | -| `filter` | `boolean` | `false` | Показывает строку поиска над списком — соответствует Figma-свойству `show-filter` | -| `filterPlaceHolder` | `string \| undefined` | `undefined` | Подсказка в строке поиска (при `filter=true`) | -| `checkmark` | `boolean` | `false` | Показывает галочку у выбранного пункта (одиночный выбор) | +| `multiple` | `boolean` | `false` | Множественный выбор — кратность значения в модели (одно / массив). Визуальные чекбоксы на пунктах сами по себе не включает — за них отвечает `showCheckbox` | +| `showFilter` | `boolean` | `false` | Показывает строку поиска над списком — соответствует Figma-узлу `<🚧Listbox.Filter>` в `header=true`. Пробрасывается в PrimeNG `[filter]` | +| `filterPlaceholder` | `string \| undefined` | `undefined` | Подсказка в строке поиска (при `showFilter=true`). Пробрасывается в PrimeNG `[filterPlaceHolder]` (нестандартный camelCase — особенность самого PrimeNG, в публичном API компонента имя приведено к обычному `filterPlaceholder`) | +| `showCheckbox` | `boolean` | `false` | Чекбоксы у элементов + чекбокс «выбрать всё» в заголовке — соответствует Figma-узлу `` в `header=true`. Пробрасывается сразу в два PrimeNG-пропа: `[checkbox]` (чекбоксы на пунктах) и `[showToggleAll]` (чекбокс «выбрать всё», имеет смысл только при `multiple=true`) | +| `checkmark` | `boolean` | `false` | Показывает галочку у выбранного пункта (одиночный выбор) — полезный проп сверх черновика спеки | | `group` | `boolean` | `false` | Включает группировку опций по секциям | | `optionGroupLabel` | `string \| undefined` | `undefined` | Имя поля заголовка группы (при `group=true`) — соответствует Figma-узлу `` | | `optionGroupChildren` | `string \| undefined` | `undefined` | Имя поля группы со списком дочерних опций | | `scrollHeight` | `string` | `'200px'` | Максимальная высота прокручиваемой области списка | | `emptyMessage` | `string \| undefined` | `undefined` | Сообщение при пустом списке опций — соответствует Figma-свойству `empty=true` | +| `(onChange)` | `EventEmitter` | — | Событие изменения выбора | +| `(onFilter)` | `EventEmitter` | — | Событие фильтрации (при `showFilter=true`) | +| `(onSelectAll)` | `EventEmitter` | — | Событие переключения «выбрать всё» (при `showCheckbox=true` и `multiple=true`) | | `(onFocus)` | `EventEmitter` | — | Событие получения фокуса | | `(onBlur)` | `EventEmitter` | — | Событие потери фокуса | | `[(ngModel)]` / `[formControl]` | `any` | `null` | Выбранное значение через ControlValueAccessor | > `disabled` — компонент не объявляет `@Input() disabled`; отключённое состояние (Figma `state=disabled`) задаётся через `ControlValueAccessor` (`FormControl.disable()`). +> ⚠️ Прошлая версия этого документа ошибочно описывала `multiple` как Figma-свойство `show-checkbox` +> и не упоминала реальный PrimeNG-проп `checkbox` вовсе (в коде был привязан только `checkmark` — +> визуально другая фича, галочка у одного выбранного пункта). Исправлено по итогам доработки под +> спеку: `showCheckbox` теперь реализован и пробрасывается в `checkbox` + `showToggleAll`. + ## Variants ### Single (одиночный выбор) @@ -56,9 +65,10 @@ Figma: ``, state=default, header=true — nodeId `365:1812` > ``` -### Single c optionValue (примитивное значение модели) +### Single c optionValue и checkmark (примитивное значение модели) -Figma: ``, state=default +Figma: ``, state=default. `checkmark` — полезный проп сверх черновика спеки (галочка у +выбранного пункта) ```html `, state=default > ``` -### Multiple (множественный выбор с чекбоксами) +### Multiple (множественный выбор) -Figma: ``, state=default, show-checkbox=true — пункты `` +Figma: ``, state=default — кратность значения в модели, без визуальных чекбоксов ```html `, state=default, show-checkbox=true — пункты ` ``` -### Checkbox + checkmark (галочка выбранного пункта) +### Checkbox (чекбоксы у элементов и «выбрать всё») -Figma: ``, state=default, show-checkbox=true +Figma: ``, state=default, header=true — чекбокс «выбрать всё» в заголовке, пункты `` ```html @@ -102,14 +112,14 @@ Figma: ``, state=default, show-checkbox=true ### Filter (строка поиска над списком) -Figma: ``, state=default, show-filter=true +Figma: ``, state=default, header=true — узел `<🚧Listbox.Filter>` ```html diff --git a/src/stories/components/listbox/examples/listbox-checkbox.component.ts b/src/stories/components/listbox/examples/listbox-checkbox.component.ts new file mode 100644 index 00000000..fb7f1cdf --- /dev/null +++ b/src/stories/components/listbox/examples/listbox-checkbox.component.ts @@ -0,0 +1,66 @@ +import { Component } from '@angular/core'; +import { FormControl, ReactiveFormsModule } from '@angular/forms'; +import { StoryObj } from '@storybook/angular'; +import { ExtraListboxComponent } from '../../../../lib/components/listbox/listbox.component'; + +const options = [ + { label: 'New York', value: 'NY' }, + { label: 'Rome', value: 'RM' }, + { label: 'London', value: 'LDN' }, + { label: 'Istanbul', value: 'IST' }, + { label: 'Paris', value: 'PRS' } +]; + +const template = ` + +`; +const styles = ''; + +@Component({ + selector: 'app-listbox-checkbox', + standalone: true, + imports: [ExtraListboxComponent, ReactiveFormsModule], + template, + styles +}) +export class ListboxCheckboxComponent { + ctrl = new FormControl([]); + options = options; +} + +export const Checkbox: StoryObj = { + render: () => ({ + template: `` + }), + parameters: { + controls: { disable: true }, + docs: { + description: { + story: 'Чекбоксы у элементов и чекбокс «выбрать всё» в заголовке (`showCheckbox`, требует `multiple=true`).' + }, + source: { + language: 'ts', + code: ` +import { ExtraListboxComponent } from '@cdek-it/angular-ui-kit'; + +@Component({ + selector: 'app-listbox-checkbox', + standalone: true, + imports: [ExtraListboxComponent, ReactiveFormsModule], + template: \` + + \`, +}) +export class ListboxCheckboxComponent { + ctrl = new FormControl([]); + options = [ + { label: 'New York', value: 'NY' }, + { label: 'Rome', value: 'RM' }, + { label: 'London', value: 'LDN' }, + ]; +} + ` + } + } + } +}; diff --git a/src/stories/components/listbox/examples/listbox-checkmark.component.ts b/src/stories/components/listbox/examples/listbox-checkmark.component.ts index 975026ca..8d7d5f1e 100644 --- a/src/stories/components/listbox/examples/listbox-checkmark.component.ts +++ b/src/stories/components/listbox/examples/listbox-checkmark.component.ts @@ -39,7 +39,7 @@ export const Checkmark: StoryObj = { source: { language: 'ts', code: ` - import { ExtraListboxComponent } from '@cdek-it/angular-ui-kit'; +import { ExtraListboxComponent } from '@cdek-it/angular-ui-kit'; @Component({ selector: 'app-listbox-checkmark', diff --git a/src/stories/components/listbox/examples/listbox-disabled.component.ts b/src/stories/components/listbox/examples/listbox-disabled.component.ts index 72762bae..7586a2b4 100644 --- a/src/stories/components/listbox/examples/listbox-disabled.component.ts +++ b/src/stories/components/listbox/examples/listbox-disabled.component.ts @@ -39,7 +39,7 @@ export const Disabled: StoryObj = { source: { language: 'ts', code: ` - import { ExtraListboxComponent } from '@cdek-it/angular-ui-kit'; +import { ExtraListboxComponent } from '@cdek-it/angular-ui-kit'; @Component({ selector: 'app-listbox-disabled', diff --git a/src/stories/components/listbox/examples/listbox-filter.component.ts b/src/stories/components/listbox/examples/listbox-filter.component.ts index 0cbb0827..7f59e6f0 100644 --- a/src/stories/components/listbox/examples/listbox-filter.component.ts +++ b/src/stories/components/listbox/examples/listbox-filter.component.ts @@ -12,7 +12,7 @@ const options = [ ]; const template = ` - + `; const styles = ''; @@ -39,14 +39,14 @@ export const Filter: StoryObj = { source: { language: 'ts', code: ` - import { ExtraListboxComponent } from '@cdek-it/angular-ui-kit'; +import { ExtraListboxComponent } from '@cdek-it/angular-ui-kit'; @Component({ selector: 'app-listbox-filter', standalone: true, imports: [ExtraListboxComponent, ReactiveFormsModule], template: \` - + \`, }) export class ListboxFilterComponent { diff --git a/src/stories/components/listbox/examples/listbox-grouped.component.ts b/src/stories/components/listbox/examples/listbox-grouped.component.ts index 4292b31a..6eeb2dad 100644 --- a/src/stories/components/listbox/examples/listbox-grouped.component.ts +++ b/src/stories/components/listbox/examples/listbox-grouped.component.ts @@ -57,7 +57,7 @@ export const Grouped: StoryObj = { source: { language: 'ts', code: ` - import { ExtraListboxComponent } from '@cdek-it/angular-ui-kit'; +import { ExtraListboxComponent } from '@cdek-it/angular-ui-kit'; @Component({ selector: 'app-listbox-grouped', diff --git a/src/stories/components/listbox/examples/listbox-multiple.component.ts b/src/stories/components/listbox/examples/listbox-multiple.component.ts index 81649a9d..a294bf42 100644 --- a/src/stories/components/listbox/examples/listbox-multiple.component.ts +++ b/src/stories/components/listbox/examples/listbox-multiple.component.ts @@ -39,7 +39,7 @@ export const Multiple: StoryObj = { source: { language: 'ts', code: ` - import { ExtraListboxComponent } from '@cdek-it/angular-ui-kit'; +import { ExtraListboxComponent } from '@cdek-it/angular-ui-kit'; @Component({ selector: 'app-listbox-multiple', diff --git a/src/stories/components/listbox/listbox.stories.ts b/src/stories/components/listbox/listbox.stories.ts index 3740a153..e8bcb21c 100644 --- a/src/stories/components/listbox/listbox.stories.ts +++ b/src/stories/components/listbox/listbox.stories.ts @@ -1,8 +1,8 @@ import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; import { FormControl, ReactiveFormsModule } from '@angular/forms'; -import { Listbox } from 'primeng/listbox'; import { ExtraListboxComponent } from '../../../lib/components/listbox/listbox.component'; import { Checkmark, ListboxCheckmarkComponent } from './examples/listbox-checkmark.component'; +import { Checkbox, ListboxCheckboxComponent } from './examples/listbox-checkbox.component'; import { Filter, ListboxFilterComponent } from './examples/listbox-filter.component'; import { ListboxMultipleComponent, Multiple } from './examples/listbox-multiple.component'; import { Grouped, ListboxGroupedComponent } from './examples/listbox-grouped.component'; @@ -20,8 +20,8 @@ const meta: Meta = { imports: [ ExtraListboxComponent, ReactiveFormsModule, - Listbox, ListboxCheckmarkComponent, + ListboxCheckboxComponent, ListboxFilterComponent, ListboxMultipleComponent, ListboxGroupedComponent, @@ -54,7 +54,7 @@ import { ExtraListboxComponent, ExtraListboxItemDirective } from '@cdek-it/angul control: 'text', description: 'Поле объекта для отображения текста элемента', table: { - category: 'Props', + category: 'Свойства', defaultValue: { summary: 'label' }, type: { summary: 'string' } } @@ -63,43 +63,52 @@ import { ExtraListboxComponent, ExtraListboxItemDirective } from '@cdek-it/angul control: 'text', description: 'Поле объекта, используемое как значение', table: { - category: 'Props', + category: 'Свойства', defaultValue: { summary: 'undefined' }, type: { summary: 'string' } } }, multiple: { control: 'boolean', - description: 'Множественный выбор', + description: 'Множественный выбор (кратность значения в модели)', table: { - category: 'Props', + category: 'Свойства', defaultValue: { summary: 'false' }, type: { summary: 'boolean' } } }, - filter: { + showFilter: { control: 'boolean', description: 'Показывать строку фильтрации', table: { - category: 'Props', + category: 'Свойства', defaultValue: { summary: 'false' }, type: { summary: 'boolean' } } }, - filterPlaceHolder: { + filterPlaceholder: { control: 'text', description: 'Placeholder строки фильтрации', table: { - category: 'Props', + category: 'Свойства', defaultValue: { summary: 'undefined' }, type: { summary: 'string' } } }, + showCheckbox: { + control: 'boolean', + description: 'Чекбоксы у элементов и «выбрать всё» в заголовке', + table: { + category: 'Свойства', + defaultValue: { summary: 'false' }, + type: { summary: 'boolean' } + } + }, checkmark: { control: 'boolean', description: 'Показывать галочку у выбранного элемента', table: { - category: 'Props', + category: 'Свойства', defaultValue: { summary: 'false' }, type: { summary: 'boolean' } } @@ -108,7 +117,7 @@ import { ExtraListboxComponent, ExtraListboxItemDirective } from '@cdek-it/angul control: 'boolean', description: 'Группировка элементов', table: { - category: 'Props', + category: 'Свойства', defaultValue: { summary: 'false' }, type: { summary: 'boolean' } } @@ -117,7 +126,7 @@ import { ExtraListboxComponent, ExtraListboxItemDirective } from '@cdek-it/angul control: 'text', description: 'Высота прокручиваемой области', table: { - category: 'Props', + category: 'Свойства', defaultValue: { summary: '200px' }, type: { summary: 'string' } } @@ -126,17 +135,41 @@ import { ExtraListboxComponent, ExtraListboxItemDirective } from '@cdek-it/angul control: 'text', description: 'Текст при пустом списке', table: { - category: 'Props', + category: 'Свойства', defaultValue: { summary: 'undefined' }, type: { summary: 'string' } } }, - // ── Events ─────────────────────────────────────────────── + // ── События ─────────────────────────────────────────────── + onChange: { + control: false, + description: 'Событие изменения выбора', + table: { + category: 'События', + type: { summary: 'EventEmitter' } + } + }, + onFilter: { + control: false, + description: 'Событие фильтрации', + table: { + category: 'События', + type: { summary: 'EventEmitter' } + } + }, + onSelectAll: { + control: false, + description: 'Событие переключения «выбрать всё»', + table: { + category: 'События', + type: { summary: 'EventEmitter' } + } + }, onFocus: { control: false, description: 'Событие фокуса', table: { - category: 'Events', + category: 'События', type: { summary: 'EventEmitter' } } }, @@ -144,7 +177,7 @@ import { ExtraListboxComponent, ExtraListboxItemDirective } from '@cdek-it/angul control: false, description: 'Событие потери фокуса', table: { - category: 'Events', + category: 'События', type: { summary: 'EventEmitter' } } } @@ -152,7 +185,8 @@ import { ExtraListboxComponent, ExtraListboxItemDirective } from '@cdek-it/angul args: { optionLabel: 'label', multiple: false, - filter: false, + showFilter: false, + showCheckbox: false, checkmark: false, group: false, scrollHeight: '200px' @@ -186,8 +220,9 @@ export const Default: Story = { [options]="options" [optionLabel]="optionLabel" [multiple]="multiple" - [filter]="filter" - [filterPlaceHolder]="filterPlaceHolder" + [showFilter]="showFilter" + [filterPlaceholder]="filterPlaceholder" + [showCheckbox]="showCheckbox" [checkmark]="checkmark" [scrollHeight]="scrollHeight" [emptyMessage]="emptyMessage" @@ -204,4 +239,4 @@ export const Default: Story = { // ── Варианты ───────────────────────────────────────────────────────────────── -export { Checkmark, Filter, Multiple, Grouped, Custom, Disabled }; +export { Checkmark, Checkbox, Filter, Multiple, Grouped, Custom, Disabled };