Core

Опис

Core - інструментарій для швидкої та зручної розробки веб-додатків. Core надає доступ до ключових компонентів, які допомагають створювати дизайн для вашого проекту.

Приклад підключення

<script src="https://cdn.softpro.ua/vue/core/latest/softpro-ui-kit.umd.min.js"></script>

Список компонентів

Basic

• Button: Кнопка з різноманітними стилями та можливостями кастомізації.
• Drop: Компонент для завантаження файлів на сервер.

Form

• Autocomplete: Автоматичне доповнення текстових полів для зручного введення даних.
• Checkbox: Відмітка для вибору одного чи декількох пунктів.
• Datepicker: Календарний вибір дати для спрощення введення дати.
• Radio: Контрольний елемент для вибору одного варіанту з декількох.
• Select: Випадаючий список для вибору одного варіанту із списку.
• Switch: Перемикач для зручного управління ввімкненням/вимкненням.
• Text: Текстове поле для введення короткого тексту.
• Textarea: Багаторядковий текстовий блок для введення довшого тексту.
• Upload: Компонент для завантаження файлів на сервер.

Navigations

• Tabs: Вкладки для структурування та навігації між різними вмістовими частинами.
• Dropdown: Випадаюче меню для створення зручних навігаційних пунктів.

Overlays

• Dialog: Вікно для виведення повідомлень, попереджень або додаткового вмісту.

Загальні пропси

Style

Props	Description	Type
placeholder	Декоративний текст	String
orientation	Орієнтація списків (horizontal, vertical). Default - vertical	String
size	Розмір для input. Доступні розміри: xs, sm, md, lg, xl	String
color	Акцентний колір компонента. Default - blue. Доступні кольори	String

State

Props	Description	Type
disabled	Відключення інпута. Default - false	Boolean
clearable	Очищення значень. Default - false	Boolean
loading	Індикатор загрузки. Default - false	Boolean

Вендори

• Tailwind CSS: Утиліта для швидкого створення користувацького дизайну засобами класів.
• Tabler: Відкритий фреймворк для створення адміністративних панелей та інтерфейсів.

Журнал змін

Список релізів можна глянути тут

Структура проекту

# src - folder 
├── App.vue
├── components
|  ├── basic
|  |  ├── vs-button.test.js
|  |  ├── vs-button.vue
|  |  ├── vs-drop.test.js
|  |  ├── vs-drop.vue
|  |  └── vs-toast.vue
|  ├── form
|  |  ├── misc
|  |  |  ├── vs-form-dropdown-option.vue
|  |  |  └── vs-form-option.vue
|  |  ├── vs-form-autocomplete.vue
|  |  ├── vs-form-checkbox.vue
|  |  ├── vs-form-datepicker.vue
|  |  ├── vs-form-radio.vue
|  |  ├── vs-form-select.vue
|  |  ├── vs-form-switch.vue
|  |  ├── vs-form-text.vue
|  |  ├── vs-form-textarea.vue
|  |  └── vs-form-upload.vue
|  ├── index.js
|  ├── navigations
|  |  ├── misc
|  |  |  └── vs-tab.vue
|  |  ├── vs-dropdown.vue
|  |  └── vs-tabs.vue
|  ├── overlays
|  |  └── dialog
|  |     ├── vs-dialog.md
|  |     ├── vs-dialog.test.js
|  |     └── vs-dialog.vue
|  └── plugins
|     └── modal-plugins.js
├── main.js
└── misc
   └── import-file.js
├── assets
|  ├── base.css
|  ├── fonts
|  |  ├── tabler-icons.eot
|  |  ├── tabler-icons.ttf
|  |  ├── tabler-icons.woff
|  |  └── tabler-icons.woff2
|  ├── logo.png
|  ├── logo.svg
|  ├── main.css
|  ├── tabler-icons.min.css
|  └── tailwind
|     ├── preline.js
|     └── tailwind.js