ISS UI KIT

Библиотека компонентов для Vue 3: модульная, легковесная и оптимизированная для производительности. Импортируйте только те компоненты, которые вам нужны — никакого раздутого JavaScript. Каждый компонент поставляется как ES-модуль, что гарантирует:

• 🚀 Оптимизированный размер бандлов — Удаление неиспользуемого кода «из коробки»

• 🛠️ Контроль на уровне компонентов — Импортируйте отдельные элементы (например, <IssButton>) или целые функциональные наборы

• 🌐 Независимость от CSS-фреймворков — Совместимость с Tailwind, CSS Modules, чистым CSS и другими

Преимущества для разработчиков:

• ✅ Первоклассный опыт работы с TypeScript
• ✅ Нативная поддержка Composition API Vue 3
• ✅ CSS-переменные для темной/светлой тем

Импорты

css

import 'iss-ui-kit/dist/iss-ui-kit.css';

tokens

import 'iss-ui-kit/dist/colors.css';

Переменные для цветовой схемы копируются из фигмы верно, а общие переменные имеют префикс --core-.

mixins

@use 'iss-ui-kit/dist/mixins.scss' as iss-mixins;

// устанавливаем шрифт по умолчанию
@include iss-mixins.any-theme {
  @include iss-mixins.iss-default-font;
}

// используем типографику из figma
h1 {
  @include iss-mixins.font-headline-1;
}

// либо используйте одноимённые классы для типографики с префиксом `iss-`
.iss-font-headline-1

Сам шрифт вы должны установить вручную, например с помощью библиотеки @fontsource-variable/golos-text:

npm install @fontsource-variable/golos-text

import '@fontsource-variable/golos-text';

components

import { IssButton } from 'iss-ui-kit/components';

app.component('IssButton', IssButton);

Для корректного отображения компонентов импортируйте стили и токены, а так же вызовите метод useIssColorScheme, поскольку без этого цвета не будут применены.

composables

import { useIssColorScheme } from 'iss-ui-kit/composables';

utils

import { createContext } from 'iss-ui-kit/utils';

vitePlugins

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { viteVueSvgLoader, generateDataComponentAttribute } from 'iss-ui-kit/vitePlugins';

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          nodeTransforms: [generateDataComponentAttribute],
        },
      },
    }),
    viteVueSvgLoader(),
  ],
});

Типы для импорта *.svg?component:

• В tsconfig.app.json:

{
  "compilerOptions": {
    "types": ["iss-ui-kit/types/svg-component"]
  }
}

• Либо в src/vite-env.d.ts:

/// <reference types="iss-ui-kit/types/svg-component" />

Переопределение tokens

Этот способ дублирует токены в css, поэтому не рекомендуется:

@include iss-mixins.light-theme {
  --background-page: #f5f7f9;
}

@include iss-mixins.dark-theme {
  --background-page: #121720;
}

Настройка светлой и тёмной темы

Выбор режима

const { setScheme } = useIssColorScheme();

// Значения: 'light', 'dark' или undefined.
// По умолчанию undefined, при котором тема определяется автоматически.
setScheme('light');

Глобальное определение темы

// Глобальная цветовая схема, которая задаётся в атрибут `iss-color-scheme` в теге html.
// При отключении потребуется использовать `schemeClass` на верхнем html-элементе.
const global = true;
useIssColorScheme(global);

Локальное определение темы

const global = false;
const { schemeClass } = useIssColorScheme(global);

Применяем класс:

<div :class="schemeClass" />

Импорт vue-компонентов иконок

import { Icon24SettingsOutline } from 'iss-ui-kit/icons';

app.component('Icon24SettingsOutline', Icon24SettingsOutline);

Roadmap

Components

| Title | Release | | :----------------------- | :-----: | | IssAvatar | 2.0 | | IssAvatarStack | 2.0 | | IssBadge | 2.0 | | IssButton | 2.0 | | IssCalendar | 2.0 | | IssCellProgressBar | 2.0 | | IssCheckbox | 2.0 | | IssCheckboxForm | 2.0 | | IssChip | 2.0 | | IssCircleLoader | 2.0 | | IssCombobox | 2.0 | | IssContextMenu | 2.0 | | IssCounter | 2.0 | | IssDatePicker | 2.0 | | IssDialog | 2.1 | | IssDropdownMenu | 2.0 | | IssFragment | 2.0 | | IssIconButton | 2.0 | | IssIconContainer | 2.0 | | IssInput | 2.0 | | IssListItem | 2.0 | | IssListItemCheckbox | 2.0 | | IssListItemRadioButton | 2.0 | | IssMapMarker | 2.0 | | IssNotification | 2.0 | | IssOverlay | 2.1 | | IssOverrideColorScheme | 2.1 | | IssPagination | 2.1 | | IssRadiobutton | 2.0 | | IssRadiobuttonForm | 2.0 | | IssScroll | 2.0 | | IssSelect | 2.0 | | IssSidebarItem | 2.0 | | IssSidebarMenu | 2.0 | | IssSidebarUser | 2.0 | | IssSpacer | 2.0 | | IssSpinbox | 2.0 | | IssStringOrComponent | 2.0 | | IssSwitch | 2.0 | | IssSwitchForm | 2.0 | | IssTab | 2.0 | | IssTable | 2.0 | | IssTableCell | 2.0 | | IssTableHeader | 2.0 | | IssTableRow | 2.0 | | IssTableVirtualBody | 2.0 | | IssTabsGroup | 2.0 | | IssTag | 2.0 | | IssTextarea | 2.0 | | IssTimePicker | 2.0 | | IssToast | 2.0 | | IssTooltip | 2.0 | | IssTree | 2.0 | | IssTreeSelect | 2.0 |

Composables

| Title | Release | | :------------------------- | :------ | | useIssColorScheme | 0.1 | | useElementScrollSize | 0.1 | | useComponentElements | 0.1 | | useScroll | 2.0 | | useManualDraggable | 2.0 | | useEnterPressed | 2.0 | | useTodayDayjs | 2.0 | | useTodayDayjsShared | 2.0 | | useReactiveEntries | 2.0 | | useMagicCodes | 2.0 | | useDropdownStyle | 2.0 | | useSelectorHoverWithin | 2.0 | | useAllowedDateRanges | 2.0 | | useAllowedDateRangesBounds | 2.0 | | useExpirableStorage | 2.1 | | useIssLockScroll | 2.1 |

Utils

| Title | Release | | :--------------------------------- | :------ | | createContext | 0.1 | | filterSet | 2.0 | | getIssSize | 2.0 | | isSpecialCode | 2.0 | | putCursorAtEnd | 2.0 | | putCursor | 2.0 | | scheduleCallback | 2.0 | | issToast | 2.0 | | issToastPlugin | 2.0 | | toggleArray | 2.0 | | toggleSet | 2.0 | | extractNumber | 2.0 | | escapeForRegex | 2.0 | | issUnrefElement | 2.0 | | getIssColorSchemeClass | 2.1 | | buildToastButton | 2.1 | | addPostfixToNumbers | 2.0 | | syncVNodeProps | 2.0 | | toDayjs | 2.0 | | toDayjsRange | 2.0 | | isCalendarValueUnion | 2.0 | | createTimeoutController | 2.1 | | createIssDeferred | 2.1 | | generateInputPatternFromDateFormat | 2.1 |

Vite plugins

| Title | Status | Release | | :----------------------------- | :----: | :------ | | viteVueSvgLoader | + | 2.0 | | generateDataComponentAttribute | + | 2.0 |

Системные требования

• @vueuse/core >= 13.2.0
• vue >= 3.5.21
• es-toolkit >= 1.35.0
• vue-i18n >= 11.1.3
• dayjs >= 1.11.13