npm package: @studio-west/component-sw
Description: Vue components of Component-SW collection.
Author: Alexander Efimov
Latest version: 0.11.20

# Component SW - UI компоненты с поддержкой светлой и темной системной темы

Библиотека компонентов `Component SW` предоставляет набор готовых UI-компонентов на vue 3 для быстрой разработки интерфейсов. Каждый компонент имеет набор свойств, которые можно настраивать для достижения желаемого поведения и внешнего вида. Имеет поддержку светлой и темной системной темы. А также имеет поддержку мобильных систем разработки.

---

### Component SW - UI Components with Light and Dark Theme Support

The `Component SW` library provides a set of ready-to-use UI components on Vue 3 for rapid interface development. Each component has a set of properties that can be customized to achieve the desired behavior and appearance. It supports both light and dark system themes. And also has support for mobile development systems.

---

### Содержание / Table of Contents

- [Установка / Install](#установка--install)

- [SwAlert](#swalert)

- [SwButton](#swbutton)

- [SwButtonGroup](#swbuttongroup)

- [SwCollapse](#swcollapse)

- [SwDatePicker](#swdatepicker)

- [SwDropdown](#swdropdown)

- [SwDropdownItem](#swdropdownitem)

- [SwGide](#swgide)

- [SwInput](#swinput)

- [SwMessage](#swmessage)

- [SwSelect](#swselect)

- [SwSection](#swsection)

- [SwSkeleton](#swskeleton)

- [SwSkeletonItem](#swskeletonitem)

- [SwSlider](#swslider)

- [SwSwitch](#swswitch)

- [SwTable](#swtable)

- [SwTabs](#swtabs)

- [SwTabsPane](#swtabspane)
---

## Установка / Install
```bash
npm install @studio-west/component-sw 
```

### Глобальное подключение  / global add to main.js
```js
import { Library } from '@studio-west/component-sw';
import '@studio-west/component-sw/dist/component-sw.css';

app.use(Library)
```
### Локальное подключение  / Local add:
```js
import { components } from '@studio-west/component-sw';
import '@studio-west/component-sw/dist/component-sw.css';
const { 
  SwSlider,
  SwInput
} = components;

```
Установка в ручную светлой и темной темы - добавление к тегу `html` классов `dark` или `light` /  Installation in a manual light and dark theme - adding to the tag `html` classes` dark` or `light`

### Пример использования / Example Usage

```js
const mode = ref((getTheme() === 'dark' || getTheme() !== 'light' && window.matchMedia('(prefers-color-scheme: dark)').matches)? 'light-theme': 'dark-theme')
const darkMode = () => {
    if(mode.value === 'dark-theme') { // name icon
        document.querySelector('html').classList.remove('light')
        document.querySelector('html').classList.add('dark')
        setTheme('dark') // set cookies
    }
    else {
        document.querySelector('html').classList.remove('dark')
        document.querySelector('html').classList.add('light')
        setTheme('light') // set cookies
    }
    mode.value = (document.querySelector('html').classList.contains('dark')) ? 'light-theme' : 'dark-theme'
}
```
## SwAlert

Функция / Компонент `SwAlert` система всплывающих сообщений. Сообщения могут быть с разным типом и временем показа. Могут иметь футер с кнопками.


### Свойства / Properties

| Имя        | Тип      | по умолчанию      | Значения/Описание                                                           |
|------------|----------|-------------------|-----------------------------------------------------------------------------|
| `class`    | `String` | `sw-alert`        | Добавляет пользовательский CSS-класс к компоненту.                          |
| `size`     | `String` | ``                | Размер сообщения: `'large'`, `'small'`.                                     |
| `type`     | `String` | `info`            | Тип сообщения: `'primary'`, `'success'`, `'info'`, `'warning'`, `'danger'`. |
| `message`  | `String` | `Default message` | Само сообщение.                                                             |
| `duration` | `Number` | `6000`            | Время отображения в миллисекундах.                                          |
| `before`   | `String` | ``                | Название svg в спрайте загружаемое в начале.                                |
| `after`    | `String` | ``                | Название svg в спрайте загружаемое в конце (кнопка закрыть).                |

### Слоты / Slots

#prefix - Вставка перед текстом (если не передан `before`)

#suffix - Вставка после текста (если не передан `after`)

#footer - Нижний блок

### Пример использования / Example Usage

```js
// .js addons
import { Alert, components } from "@studio-west/component-sw"
import { h } from 'vue'
Alert({message: 'Message', type: 'danger', duration:10000, before:'bell', footer: h(components.SwButton, { onClick: () => console.log('Клик по кнопке в футере') }, () => 'OK')})

// Composition API else <script setup>:
import { inject, h } from "vue"
const Alert = inject('Alert')
Alert({message: 'Alarm!', type: 'warning', suffix: h(components.SwgIcon, { name: 'info-circle' })})
//Options API:
this.$Alert({message: 'Welcome!', type: 'success', prefix: 'Дополнительная информация'});
```
---

## SwButton

Компонент `SwButton` представляет собой кнопку с различными настраиваемыми параметрами.

### Свойства / Properties

| Имя     | Тип       | по умолчанию | Значения/Описание                                                              |
|---------|-----------|--------------|--------------------------------------------------------------------------------|
| `class` | `String`  | `sw-button`  | Добавляет пользовательский CSS-класс к компоненту.                             |
| `size`  | `String`  | ``           | Размер кнопки: `'large'`, `'small'`.                                           |
| `type`  | `String`  | `info`       | Тип кнопки: `'primary'`, `'success'`, `'info'`, `'warning'`, `'danger'`.       |
| `round` | `Boolean` | `false`      | Делает кнопку визуально закругленной.                                          |
| `text`  | `Boolean` | `false`      | Делает кнопку визуально похожей на текст (без фона только граница).            |
| `link`  | `Boolean` | `false`      | Преобразует кнопку в ссылку(без фона и границ).                                |
| `href`  | `String`  | ``           | URL, на который будет перенаправлен пользователь при клике (если `link=true`). |

### Пример использования / Example Usage

```html
<sw-button
  class="custom-class"
  size="large"
  type="primary"
  round
  text
  link
  href="https://example.com"
>
  Нажми меня / Click Me
</sw-button>
```
---

## SwButtonGroup

Компонент `SwButtonGroup` представляет собой группу кнопок с возможностью включения режима "Radio".

### Свойства / Properties

| Имя         | Тип       | по умолчанию | Значения/Описание                                            |
|-------------|-----------|--------------|--------------------------------------------------------------|
| `class`     | `String`  | `sw-button`  | Добавляет пользовательский CSS-класс к компоненту.           |
| `vertical`  | `Boolean` | `false`      | Вертикальное расположение кнопок.                            |
| `radio`     | `Boolean` | `false`      | Режим "Radio" неактивные кнопки будут иметь класс 'sw-text'. |
| `round`     | `Boolean` | `false`      | Делает группу кнопок визуально закругленной.                 |

### Модель / Model

model - индекс активной кнопки.

### Пример использования / Example Usage

```html
<script>let active = 0 </script>
<sw-button-group
  class="custom-class"
  radio
  v-model="active"
  vertical
>
    <sw-button type="primary" size="small">Нажми меня 1 / Click Me 1</sw-button>
    <sw-button type="primary" >Нажми меня 2 / Click Me 2</sw-button>
    <sw-button type="danger">Нажми меня 3 / Click Me 3</sw-button>
</sw-button-group>
```
---

## SwCollapse

Компонент `SwCollapse` представляет собой аналог тегов  &lt;details&gt; + &lt;summary&gt; , но с анимацией.

### Свойства / Properties

| Имя      | Тип       | По умолчанию | Значения/Описание     |
|----------|-----------|--------------|-----------------------|
| `visual` | `Boolean` | `true`       | Видимость             |

### Слоты / Slots

Default - Контент для скрытия

### Пример использования / Example Usage

```html
<sw-collapse :visual="false">
  <p>Скрытое / Hidden</p>
</sw-collapse>
```
---

## SwDatePicker

Компонент `SwDatePicker` представляет собой панель с календарем.

### Свойства / Properties

| Имя          | Тип              | По умолчанию | Значения/Описание                                                                                                                                                                                                                                                                                                                                                                                        |
|--------------|------------------|--------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `data`       | `Object`         | `new Date()` | Начальные данные - диапазон ( при `'solid'` - используется только `'startDate'`) изначальных выбранных дат {firstDate:  '01-04-2025', endDate: '14-04-2025', startDate:'30-03-2025', holiday: { preholidays: ["2020-03-30"], holidays: ["2020-03-30"], holiday: ["2020-03-30"], nowork: ["2020-03-30"] }}, ограничение не более 2х месяцев. firstDate - выбор месяца календаря при отсутствии startDate  |
| `limitation` | `Boolean, Array` | `false`      | Массив ограничений дат: [{endDate: '14-04-2025', startDate:'30-03-2025'}].                                                                                                                                                                                                                                                                                                                               |
| `range`      | `String`         | `solid`      | Тип календаря: `'decades'`,`'year'`,`'range'`, `'solid'`.                                                                                                                                                                                                                                                                                                                                                |

### События / Events

input - событие выбора с данными {dateStart: "11.11.2011", dateEnd: "14-12-2011" ( при range), count: 1 }

### Слоты / Slots

#double-arrow - для двойной стрелки по умолчанию `«`

#arrow - для одинарной стрелки по умолчанию `‹`

### Пример использования / Example Usage

```html
<script>const addDateStart = (date) => {console.log(date)}</script>
<sw-date-picker
  :data="{startDate: '11.11.2011' endDate: '14-12-2011'}"
  limitation=" [{endDate: '14-04-2025', startDate:'30-03-2025'}]"
  range="range"
  @input="addDateStart"
>
  <template #double-arrow>«</template>
  <template #arrow>‹</template>
</sw-date-picker>
```
---

## SwDropdown

Компонент `SwDropdown` это всплывающее меню с возможностью настройки места относительного всплытия и типа Триггера.

### Свойства / Properties

| Имя         | Тип       | По умолчанию  | Значения/Описание                                                                                                                      |
|-------------|-----------|---------------|----------------------------------------------------------------------------------------------------------------------------------------|
| `class`     | `String`  | `sw-dropdown` | Добавляет пользовательский CSS-класс к компоненту.                                                                                     |
| `size`      | `String`  | ``            | Размер поля: `'large'`, `'small'`.                                                                                                     |
| `type`      | `String`  | `info`        | `'primary'`, `'success'`, `'info'`, `'warning'`, `'danger'`.                                                                           |
| `trigger`   | `String`  | `click`       | `'click'`, `'hover'`, `'context'`,`'none'`.                                                                                            |
| `placement` | `String`  | `bottom-left` | Относительное место всплытия `'bottom-left'`, `'bottom'`, `'bottom-right'`, `'top-left'`, `'top'`, `'top-right'`, `'left'`, `'right'`. |
| `maxWidth`  | `Number`  | `0`           | Максимальная ширина меню в пикселях. 0 - без ограничений.                                                                              |

### Слоты / Slots

Default - текст описания или модуль / модули

#dropdown - контент всплывающего окна

### Модель / Model

model - состояние меню, булевое значение открыто - true

### Пример использования / Example Usage

```html
<script>let visual = false </script>
<sw-dropdown
  class="custom-class"
  trigger="none"
  v-model="visual"
  maxWidth="250"
>
  <sw-button @click="visual = true">Описание / Description</sw-button>
    <template #dropdown>
        <sw-dropdown-item> содержание / context </sw-dropdown-item>
    </template>
</sw-dropdown>
```
---

## SwDropdownItem

Компонент `SwDropdownItem` это пункт во всплывающем меню с возможностью добавления в начало иконки.

### Свойства / Properties

| Имя           | Тип      | По умолчанию       | Значения/Описание                                            |
|---------------|----------|--------------------|--------------------------------------------------------------|
| `class`       | `String` | `sw-dropdown-item` | Добавляет пользовательский CSS-класс к компоненту.           |
| `size`        | `String` | ``                 | Размер поля: `'large'`, `'small'`.                           |
| `type`        | `String` | `info`             | `'primary'`, `'success'`, `'info'`, `'warning'`, `'danger'`. |
| `iconBefore`  | `String` | ``                 | Название иконки в коллекции. При наличии вставляет иконку.   |

### Слоты / Slots

Default - текст названия или модуль

### Пример использования / Example Usage

```html
<script>let visual = false </script>
<sw-dropdown
  class="custom-class"
  trigger="none"
  v-model="visual"
  maxWidth="250"
>
    <sw-button @click="visual = true">Описание / Description</sw-button>
    <template #dropdown>
        <sw-dropdown-item @click="visual = false" iconBefore="documents"> содержание / context </sw-dropdown-item>
    </template>
  
</sw-dropdown>
```
---

## SwGide

Компонент `SwGide` Создает затенение вокруг блока по заданному тегу, и выводит [SwDropdown](#swdropdown) с управляющими кнопками, переключающими по массиву из параметров `steps`

### Свойства / Properties

| Имя          | Тип       | По умолчанию | Значения/Описание                                                                                                                                      |
|--------------|-----------|--------------|--------------------------------------------------------------------------------------------------------------------------------------------------------|
| `steps`      | `Array`   | `() => []`   | Массив шагов обучения.  [{header: 'заголовок',text: 'текст сообщения',tag: 'тег,якорь или класс', placement: 'место всплытия', img: 'src картинки' }], |
| `iconClose`  | `String`  | ``           | Иконка закрытия обучения.                                                                                                                              |
| `maxWidth`   | `Number`  | `250`        | Ширина всплывающего окна в px (без картинки). по умолчанию 250                                                                                         |

### Слоты / Slots

#header - заголовок окна

Default - текст сообщения с картинкой

#arrow - слот для стрелок

### Модель / Model

model - массив обьектов шагов обучения

### Пример использования / Example Usage

```html
<script>
    let step = 0;
    let steps = [
        {header: 'заголовок',
         text: 'текст сообщения',
         tag: 'nav', 
         placement: 'bottom',
         img: '/img/img.npg' 
        }
    ]
</script>
<sw-gide v-if="settings.gide" :steps="steps" v-model="step" @close="settings.gide=false" icon-step="arrow">
    <template #header>
        Блок {{ steps[step].header }} 
        <sw-button type="primary" link @click="settings.gide=false"><svg-icon icon-class="close" /></sw-button>
    </template>
    <template #arrow><svg-icon icon-class="arrow" /></template>
</sw-gide>
```
---
## SwInput

Компонент `SwInput` представляет собой поле ввода с возможностью настройки внешнего вида и поведения.

### Свойства / Properties

| Имя           | Тип       | По умолчанию | Значения/Описание                                                                                                                                               |
|---------------|-----------|--------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `name`        | `String`  | `required`   | Обязателен! нужен для связывания через id  input и label.                                                                                                       |
| `class`       | `String`  | `sw-input`   | Добавляет пользовательский CSS-класс к компоненту.                                                                                                              |
| `size`        | `String`  | ``           | Размер поля: `'large'`, `'small'`.                                                                                                                              |
| `type`        | `String`  | `text`       | Тип поля: `'text'`- текст, `'phone'`- телефон, `'password'` - пароль                                                                                            |
| `inputMode`   | `String`  | `text`       | Мобильная клавиатура: `'text'`- стандартная, `'search'`- поиск, `'numeric'`- цифры, `'decimal'` - числа, `'tel'` - телефон, `'url'` - адреса, `'email'` - почта |
| `before`      | `String`  | ``           | Название svg в спрайте загружаемое в начале.                                                                                                                    |
| `after`       | `String`  | ``           | Название svg в спрайте загружаемое в конце.                                                                                                                     |
| `placeholder` | `String`  | ``           | Текст Placeholder.                                                                                                                                              |
| `required`    | `Boolean` | `false`      | Признак обязательно ли для заполнения.                                                                                                                          |
| `label`       | `String`  | ``           | Текст в Label.                                                                                                                                                  |
| `maxlength`   | `Number`  | `128`        | Параметр атрибута max-length. Минимальное количество символов разрешённых в тексте.                                                                             |
| `minlength`   | `Number`  | `1`          | Параметр атрибута min-length. Минимальное количество символов разрешённых в тексте.                                                                             |
| `inputSize`   | `Number`  | `60`         | Параметр атрибута size - ширина текстового поля.                                                                                                                |

### Слоты / Slots

#prefix - вставка при отсутствии before не обязательно / Insertion when before is not used (optional).

#suffix - вставка при отсутствии after не обязательно / Insertion when after is not used (optional).

### Модель / Model

model - значение поля ввода

### События / Events

prefix - клик иконке before

suffix - клик иконке after

focusInput - focus на поле ввода

### Пример использования / Example Usage

```html
<sw-input 
  v-model="model"
  name="input"
  class="custom-class" 
  size="large" 
  type="phone"
  before="phone"
  placeholder="input"
  label="input"
  @prefix="console.log('before')"
>
  <template #suffix>#</template>
</sw-input>
```
---

## SwMessage

Компонент `SwMessage` это выплывающее окно, центрируется по центру.

### Свойства / Properties

| Имя         | Тип       | По умолчанию | Значения/Описание                                                          |
|-------------|-----------|--------------|----------------------------------------------------------------------------|
| `name`      | `String`  | ``           | Добавляет текстовый заголовок, при отсутствии реализован слот `"header"`.  |
| `class`     | `String`  | `sw-section` | Добавляет пользовательский CSS-класс к компоненту.                         |
| `iconAfter` | `String`  | ``           | Добавляет иконку из коллекции для кнопки закрытия (при наличии заголовка). |

### Слоты / Slots

#header - слот для заголовка окна.

#footer - слот для подвала.

### Модель / Model

model - состояние компонента булевое значение, при true - окно открыто, при false - закрыто.

### Пример использования / Example Usage

```html
<sw-message
  v-model="model"
  name="Message"
  class="custom-class"
>
  <p>Описание / Description</p>
</sw-message>
```
---

## SwSection

Компонент `SwSection` это тег section с шаблоном из слотов, по умолчанию в слот #header добавлено заголовок и иконка.

### Свойства / Properties

| Имя         | Тип       | По умолчанию | Значения/Описание                                  |
|-------------|-----------|--------------|----------------------------------------------------|
| `name`      | `String`  | ``           | Добавляет заголовок в секцию.                      |
| `class`     | `String`  | `sw-section` | Добавляет пользовательский CSS-класс к компоненту. |
| `iconAfter` | `String`  | ``           | Добавляет иконку из коллекции.                     |

### Слоты / Slots

#header - слот для заголовка секции.

Default - содержимое секции

#footer - слот для подвала секции.

### События / Events

header - клик по всему Header

### Пример использования / Example Usage

```html
<sw-section
  name="section"
  class="custom-class"
  iconAfter="cross"
>
  <p>Содержимое / Content</p>
  <template #footer>
    <p>Footer!</p> 
  </template>
</sw-section>
```
---

## SwSelect

Компонент `SwSelect` - реализация подсказок для https://dadata.ru/api/suggest/address/.

### Свойства / Properties

| Имя            | Тип       | По умолчанию | Значения/Описание                             |
|----------------|-----------|--------------|-----------------------------------------------|
| `class`        | `String`  | ``           | Добавляет пользовательский CSS-класс к popup. |
| `size`         | `String`  | `large`      | Размер поля: `'large'`, `'small'`.            |
| `placeholder`  | `String`  | ``           | Добавляет в placeholder описание.             |
| `token`        | `String`  | ``           | API-ключ для DADATA.                          |

### Модель / Model

model - текст ввода или выбора из списка

### Пример использования / Example Usage

```html
<sw-select
  v-model="model"
  class="custom-class"
  placeholder="placeholder"
  :token="${API_KEY}"
/>
```
---

## SwSkeleton

Компонент `SwSkeleton` используется для анимации загрузки данных, выступая оболочкой компонента SwSkeletonItem
или пользовательского компонента при использовании слота #skeleton, по умолчанию в слот #skeleton добавлен 1 SwSkeletonItem с базовыми настройками

### Свойства / Properties

| Имя      | Тип       | По умолчанию   | Значения/Описание                                  |
|----------|-----------|----------------|----------------------------------------------------|
| `class`  | `String`  | `sw-skeleton`  | Добавляет пользовательский CSS-класс к компоненту. |
| `visual` | `Boolean` | `false`        | Тригер на переключение.                            |

### Слоты / Slots

Default - Содержимое

#skeleton - слот для skeleton

### Пример использования / Example Usage

```html
<sw-skeleton
  :visual="visual"
>
  <p>Содержимое / Content</p>
</sw-skeleton>
```
---

## SwSkeletonItem

Компонент `SwSkeletonItem` представляет собой полоску псевдо данных с возможностью анимирования.

### Свойства / Properties

| Имя        | Тип       | По умолчанию       | Значения/Описание                                  |
|------------|-----------|--------------------|----------------------------------------------------|
| `width`    | `String`  | `100`              | Ширина элемента в процентах.                       |
| `class`    | `String`  | `sw-skeleton-item` | Добавляет пользовательский CSS-класс к компоненту. |
| `animate`  | `String`  | `false`            | Добавляет анимацию в элемент.                      |
| `size`     | `String`  | ``                 | Размер поля: `'large'`, `'small'`.                 |


### Пример использования / Example Usage

```html
<sw-skeleton-item
  animate
  class="custom-class"
  size="small"
  width="60"
 />
```
---

## SwSlider

Компонент `SwSlider` представляет собой Мультислайдер с возможностью настройки внешнего вида ползунка. Количество ползунков зависит от входных данных 1 - число. n - массив из n чисел.
- отображения значений в виде всплывающих подсказок при наведении на бегунки:
- Поддержка как горизонтальной, так и вертикальной ориентации
- Адаптивное позиционирование подсказок в зависимости от доступного пространства
- Поддержка сенсорных устройств (touch events)

### Свойства / Properties

| Имя          | Тип       | По умолчанию | Значения/Описание                                  |
|--------------|-----------|--------------|----------------------------------------------------|
| `vertical`   | `Boolean` | `false`      | Вертикальная ориентация слайдера.                  |
| `class`      | `String`  | `sw-switch`  | Добавляет пользовательский CSS-класс к компоненту. |
| `size`       | `String`  | `small`      | Размер бегунка: `'large'`, `'small'`.              |
| `min`        | `Number`  | `0`          | Минимальное значение переменной.                   |
| `max`        | `Number`  | `100`        | Максимальное значение переменной.                  |
| `step`       | `Number`  | `1`          | Шаг в приросте переменной.                         |
| `show-value` | `Boolean` | `false`      | Добавляет всплывающее окно с текущим значением.    |

### Слоты / Slots

Default - текст, картинка, svg - содержимое бегунка.

### Модель / Model

model - значение слайдера (число, массив чисел)

### Пример использования / Example Usage

```html

<script>let model = [5, 50]</script>
<sw-slider 
  v-model="model"
  :min="0" 
  :max="100" 
  :step="5"
  show-value
  class="custom-class"
  vertical
>
    <svg-icon icon-class="component" />
</sw-slider>
```
---

## SwSwitch

Компонент `SwSwitch` представляет собой чекбокс с возможностью настройки внешнего вида галочка | переключатель | переключатель с подписью и поведения.

### Свойства / Properties

| Имя        | Тип       | По умолчанию | Значения/Описание                                  |
|------------|-----------|--------------|----------------------------------------------------|
| `name`     | `String`  | ``           | Добавляет в атрибут `'name'`.                      |
| `class`    | `String`  | `sw-switch`  | Добавляет пользовательский CSS-класс к компоненту. |
| `size`     | `String`  | ``           | Размер поля: `'large'`, `'small'`.                 |
| `id`       | `String`  | `checkbox`   | Добавляет в атрибут `'id'`.                        |
| `on`       | `String`  | ``           | Текст при true.                                    |
| `off`      | `String`  | ``           | Текст при false.                                   |
| `checkbox` | `Boolean` | `false`      | Визуализирует как обычный чекбокс.                 |

### Слоты / Slots

Default - текст описания

### Модель / Model

model - состояние чекбокса (checked ) булевое  значение

### Пример использования / Example Usage

```html
<sw-switch 
  v-model="model"
  name="switch"
  class="custom-class"
  id="switch"
  on="on"
  off="off"
>
  <p>Описание / Description</p>
</sw-switch>
```
---

## SwTable

Разработка! Компонент `SwTable` представляет собой динамическую таблицу. Шаблон шапки задается вложением компонентов `SwTablecolumn` друг в друга. Содержание таблицы берется из свойства `data` - массив объектов, а слияние столбцов и строк задается подобъектом с соответствующими параметрами.

### Свойства / Properties

| Имя    | Тип      | По умолчанию | Значения/Описание                                  |
|--------|----------|--------------|----------------------------------------------------|
| `data` | `Array`  | `required`   | Содержание таблицы - обязательный массив объектов. |

### Слоты / Slots

#`<name>` - пре определение шаблона столбца

### Пример использования / Example Usage

```html
<script>
    let table = [
        {city:{label:'Moscow', rowspan:2},district:'Center'},
        {city:'Moscow',district:'MRCR'},
    ]
</script>
<sw-table :data="table">
  <sw-table-column label="Label">
      <sw-table-column label="City" prop="city"/>
      <sw-table-column label="District" prop="district"/>
  </sw-table-column>
</sw-table>
```
---

## SwTabs

Компонент `SwTabs` представляет собой панель вкладок SwTabsPane.

### Свойства / Properties

| Имя     | Тип       | По умолчанию | Значения/Описание                                  |
|---------|-----------|--------------|----------------------------------------------------|
| `class` | `String`  | `sw-tabs`    | Добавляет пользовательский CSS-класс к компоненту. |

### Слоты / Slots

Default - для компонентов SwTabsPane

### Модель / Model

model - индекс активной вкладки (по порядку в коде с 0)

### Пример использования / Example Usage

```html
<script>let activeTabId = 0 </script>
<sw-tabs
  v-model="activeTabId"
  class="custom-class"
>
  <sw-tabs-pane label="Label" title="Title">Вкладка / Tab</sw-tabs-pane>
</sw-tabs>
```
---

## SwTabsPane

Компонент `SwTabsPane` представляет собой оболочку для вкладок.

### Свойства / Properties

| Имя     | Тип       | По умолчанию | Значения/Описание                                                                       |
|---------|-----------|--------------|-----------------------------------------------------------------------------------------|
| `title` | `String`  | ``           | Название унификатор - обязателен при отсутствии `label` будет взят за название вкладки. |
| `label` | `String`  | ``           | Название вкладки при отсутствии возьмется из `title`.                                   |

### Слоты / Slots

Default - для вкладок

### Пример использования / Example Usage

```html
<sw-tabs
  v-model="activeTabId"
  class="custom-class"
>
  <sw-tabs-pane label="Label" title="Title">Вкладка / Tab</sw-tabs-pane>
</sw-tabs>
```
---

## Лицензия / License

Этот проект распространяется под лицензией MIT. Подробности см. в файле [LICENSE](./LICENSE) . /
This project is distributed under the MIT License. For details, see the [LICENSE](./LICENSE)  file.

---

Если у вас есть вопросы или предложения, пожалуйста, создайте issue на почту info@studiowest.ru. /
If you have any questions or suggestions, please create an issue to E-mail info@studiowest.ru.