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

• SwAlert

• SwButton

• SwCollapse

• SwDatePicker

• SwDropdown

• SwDropdownItem

• SwGide

• SwInput

• SwMessage

• SwSelect

• SwSection

• SwSkeleton

• SwSkeletonItem

• SwSlider

• SwSwitch

• SwTable

• SwTabs

• SwTabsPane

Установка / Install

npm install @studio-west/component-sw 

Глобальное подключение / global add to main.js:

import { Library } from '@studio-west/component-sw';
import '@studio-west/component-sw/dist/component-sw.css';

app.use(Library)

Локальное подключение / Local add:

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

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 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

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

SwCollapse

Компонент SwCollapse представляет собой аналог тегов <details> + <summary> , но с анимацией.

Свойства / Properties

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

Слоты / Slots

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

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

<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

<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

<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

<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 с управляющими кнопками, переключающими по массиву из параметров 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

<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

<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

<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

<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

<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

<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

<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

<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

<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

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

SwTabs

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

Свойства / Properties

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

Слоты / Slots

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

Модель / Model

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

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

<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

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

Лицензия / License

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

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