Component SW

Component SW — собственная UI-библиотека Studio West на Vue 3. Её используем в кабинетах, Service Desk и внутренних сервисах студии: один набор компонентов вместо разрозненных кнопок и полей на каждом проекте. Пакет открыт на npm как @studio-west/component-sw.

Это не шаблон сайта и не конструктор «под ключ». Библиотека нужна разработчику, которому нужны готовые SwButton, SwInput, таблицы, меню и формы со светлой и тёмной темой — с предсказуемым API и песочницей на этих страницах.

Зачем отдельная библиотека

• Единый UI. Одинаковые состояния, отступы и темы на разных продуктах студии.
• Vue 3. Компоненты рассчитаны на Composition API и современный бандл.
• Тема. Светлая и тёмная через классы light / dark на html.
• Документация здесь. Слева — список компонентов; у каждого — свойства и живой пример.

Что внутри

В меню раздела: Affix, Alert, Badge, Button, ButtonGroup, Collapse, Dadata, DatePicker, Drawer, Dropdown, File, FormItem, Guide, Icon, Input, Menu, Message, Pagination, Section, Select, Skeleton, Slider, Switch, Table, Tabs, Tag и связанные части. Состав растёт по мере проектов Studio West — не «ещё один Element Plus clone ради npm».

Установка

Установка / Install

npm install @studio-west/component-sw 

Registry: npmjs.

Глобальное подключение / 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'
}

Подробный анонс и контекст появления библиотеки — в журнале. Заказ сайта или кабинета на базе этих компонентов — через веб-приложения или форму «Начать проект».