@ar-gus/ui
v0.1.25
Published
Vue 3 UI компонентная библиотека для проекта Argus.
Readme
Argus UI
Vue 3 UI компонентная библиотека для проекта Argus.
Установка
npm install @ar-gus/uiИспользование
Импорт отдельных компонентов
import { BackButton, CustomButton, CustomInput } from '@ar-gus/ui';
import '@ar-gus/ui/styles'; // Основные стили + темы
export default {
components: {
BackButton,
CustomButton,
CustomInput
}
}Импорт всех компонентов через плагин
import { createApp } from 'vue';
import ArgusUI from '@ar-gus/ui';
import '@ar-gus/ui/styles';
const app = createApp(App);
app.use(ArgusUI);В HTML (с bundler)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="node_modules/@ar-gus/ui/dist/ui.css">
</head>
<body>
<div id="app"></div>
<script type="module">
import { createApp } from 'vue';
import { BackButton } from '@ar-gus/ui';
const app = createApp({
components: { BackButton }
});
app.mount('#app');
</script>
</body>
</html>В HTML (без bundler)
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<link rel="stylesheet" href="node_modules/@ar-gus/ui/dist/ui.css">
</head>
<body>
<div id="app"></div>
<script src="node_modules/@ar-gus/ui/dist/index.umd.js"></script>
<script>
const { createApp } = Vue;
const app = createApp({
components: {
BackButton: window.index.BackButton
}
});
app.mount('#app');
</script>
</body>
</html>Доступные компоненты
Buttons
BackButton- Кнопка "Назад" с иконкойCustomButton- Кастомная кнопкаDefaultButton- Кнопка по умолчаниюCancelAcceptButton- Кнопка отмены/принятияObjectPanelBackButton- Кнопка назад для панели объектовSideBarButtonFill- Кнопка сайдбара с заливкойSideBarButtonStroke- Кнопка сайдбара с обводкой
Inputs
CustomInput- Кастомный инпутFileInput- Инпут для файловSearchBox- Поисковая строка
Icons
IconArrow,IconBack,IconDialog,IconEdit,IconGrid,IconList,IconMap,IconMoveObject,IconObject,IconRotateObject,IconSafeZone,IconSave,IconTrash,IconYandexIconAPI,IconCart,IconCompile,IconDocumentation,IconEditor,IconInfo,IconProfile,IconServices,IconUpload
Dividers
ObjectPanelDivider- Разделитель панели объектовSidebarDivider- Разделитель сайдбараToolbarDivider- Разделитель тулбара
Modals
ConfirmationModal- Модальное окно подтверждения
Разработка
Установка зависимостей
npm installЗапуск в режиме разработки
npm run devСборка для production
npm run buildStorybook
npm run storybookСтруктура проекта
src/
├── components/ # Vue компоненты
│ ├── buttons/ # Кнопки
│ ├── inputs/ # Инпуты
│ ├── icons/ # Иконки
│ ├── dividers/ # Разделители
│ └── modals/ # Модальные окна
├── assets/ # Стили и шрифты
└── stories/ # Storybook истории