@studio-west/component-sw v0.5.3

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.

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

• Установка / Install

• SwAlert

• SwButton

• SwCollapse

• SwDatePicker

• SwDropdown

• SwDropdownItem

• SwInput

• SwMessage

• SwSelect

• SwSection

• SwSkeleton

• SwSkeletonItem

• SwSwitch

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

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

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

const darkMode = () => {
    if(mode.value === 'dark-theme') {
        document.querySelector('html').classList.remove('light')
        document.querySelector('html').classList.add('dark')
    }
    else {
        document.querySelector('html').classList.remove('dark')
        document.querySelector('html').classList.add('light')
    }
    mode.value = (document.querySelector('html').classList.contains('dark')) ? 'light-theme' : 'dark-theme'
}

SwAlert

Функция / Компонент SwAlert

Свойства / Properties

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

// .js addons
import { Alert } from "@studio-west/component-sw"
Alert({message: 'Message', type: 'danger', duration:10000, before:'bell'})

// Composition API else <script setup>:
import {inject} from "vue"
const Alert = inject('Alert')
Alert({message: 'Alarm!', type: 'warning'})
//Options API:
this.$Alert({message: 'Welcome!', type: 'success'});

SwButton

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

Свойства / Properties

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

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

SwCollapse

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

Свойства / Properties

Слоты / Slots

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

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

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

SwDatePicker

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

Свойства / Properties

События / Events

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

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

<sw-date-picker
        :data="{startDate: '11.11.2011' endDate: '14-12-2011'}"
        limitation=" [{endDate: '14-04-2025', startDate:'30-03-2025'}]"
        range="range"
        @selectPicker.stop="processing"
/>

SwDropdown

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

Свойства / Properties

Слоты / Slots

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

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

<script>let visual = false </script>
<sw-dropdown
  class="custom-class"
  trigger="none"
  v-model="visual"
  maxWidth="o250"
>
  <button @cick="visual = true">Описание</button>
</sw-dropdown>

SwDropdownItem

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

Свойства / Properties

Слоты / Slots

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

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

<script>let visual = false </script>
<sw-dropdown
  class="custom-class"
  trigger="none"
  v-model="visual"
  maxWidth="o250"
>
  <sw-dropdown-item @cick="visual = true" iconBefore="documents">Описание</sw-dropdown-item>
</sw-dropdown>

SwInput

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

Свойства / Properties

Слоты / Slots

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

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

События / 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"
  after=""
  placeholder="input"
  label="input"
  @prefix="console.log('before')"
>
  <template #suffix>#</template>
</sw-input>

SwMessage

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

Свойства / Properties

Слоты / Slots

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

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

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

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

SwSection

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

Свойства / Properties

Слоты / 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

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

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

SwSkeleton

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

Свойства / Properties

Слоты / Slots

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

#skeleton - слот для skeleton

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

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

SwSkeletonItem

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

Свойства / Properties

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

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

SwSwitch

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

Свойства / Properties

Слоты / Slots

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

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

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

SwTabs

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

Свойства / Properties

Слоты / Slots

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

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

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

SwTabsPane

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

Свойства / Properties

Слоты / 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 на почту info@studiowest.ru. / If you have any questions or suggestions, please create an issue to E-mail info@studiowest.ru.