Sorter

Sorter - компонент для сортировки списков со свободной кастомизацией.

Props

sort

• type: string
• default: ''

Текущая активная сортировка

dir

• type: string
• default: по пропу defaultDir
• available values: 'asc' | 'desc'

Текущее активное направление сортировка

defaultDir

• type: string
• default: 'desc'
• available values: 'asc' | 'desc'

Дефолтное направление сортировки. При выборе новой сортировки, направление будет выбрано исходя из этого поля

heading

• type: string
• default: 'Сортировка по:'

Заголовок сортера

options

• type: Array<SortOption>

Type declaration for SortOption:

interface SortOption {
  id: string;
  name: string;
  disabled?: boolean;
  noDir?: boolean; // Сортировка не имеет направления
  tooltip?: String;
}

Slots

extended

• required: false

Дополнительный блок, справа от типов сортировки, подробнее в Example

Events

sort

• type: { sort, dir }

Событие происходящее при смене сортировки/направления

Example

Test-data

export const testSort = 'foo';
export const testDir = 'desc';
export const testOptions = [
  {
    sort: 'foo',
    name: 'Foo-asc',
    dir: 'asc',
    tooltip: 'Подсказка',
  },
  {
    sort: 'foo',
    name: 'Foo-desc',
    dir: 'desc',
    tooltip: 'Подсказка',
  },
  {
    sort: 'bar',
    name: 'Bar-desc',
    dir: 'desc',
  },
  {
    sort: 'bar',
    name: 'Bar-asc',
    dir: 'asc',
  },
  {
    name: 'Baz',
    sort: 'baz',
    disabled: true,
  },
];