NPM Core UI

Бібліотека Vue.js компонентів та утиліт для швидкої розробки інтерфейсів користувача.

📦 Встановлення

npm install npm-core-ui

🚀 Швидкий старт

Імпорт компонентів

import {
  TemplateButton,
  TemplateInput,
  CoreTable,
} from "npm-core-ui/components";
import "npm-core-ui/style.css";

Імпорт утиліт

import { formatDate, copyToClipboard, isNumber } from "npm-core-ui/utils";

Імпорт composables

import {
  useValidation,
  useFormSection,
  useDebounce,
} from "npm-core-ui/composables";

🎨 Компоненти

Template Components (UI компоненти)

• TemplateButton - Кнопка з підтримкою іконок та станів завантаження
• TemplateInput - Текстове поле з валідацією та масками
• TemplateCheckbox - Чекбокс з кастомним стилем
• TemplateSelect - Випадаючий список
• TemplateCombobox - Комбобокс з пошуком
• TemplateDatePicker - Вибір дати
• TemplateTimePicker - Вибір часу
• TemplateTextarea - Багаторядкове текстове поле
• TemplateSwitch - Перемикач
• TemplateRadioGroup - Група радіо-кнопок
• TemplateAlert - Алерт/сповіщення
• TemplateChip - Чіп/тег
• TemplateLoader - Індикатор завантаження
• TemplateTooltip - Підказка
• TemplateDialogWindow - Модальне вікно

Input Components (Спеціалізовані поля вводу)

• TemplateFileInput - Завантаження файлів
• TemplatePhoneInput - Поле для телефону
• TemplateMaskInput - Поле з маскою вводу
• PasswordInput - Поле для паролю

Table Components (Таблиці)

• CoreTable - Основна таблиця з фільтрами, пагінацією та сортуванням
• CoreActionsMenu - Меню дій для таблиці
• CoreConfirmationDialog - Діалог підтвердження

Layout Components (Макет)

• ConfirmationDialog - Діалог підтвердження

Filter Components (Фільтри)

• Filter - Основний компонент фільтрації
• filter-date - Фільтр по даті
• filter-select - Фільтр-вибір
• filter-text - Текстовий фільтр

Shared Components (Спільні)

• FilePreview - Попередній перегляд файлів
• InputLabelTooltip - Підказка для лейбла поля
• LazyImg - Ліниве завантаження зображень

🛠 Утиліти

Основні утиліти (utils/index.js)

// Перевірка типів
isDate(date); // Перевіряє чи є значення датою
isObject(obj); // Перевіряє чи є значення об'єктом
isNumber(value); // Перевіряє чи є значення числом
isEmptyObject(obj); // Перевіряє чи є об'єкт порожнім
isFilledObject(obj); // Перевіряє чи є об'єкт заповненим

// Робота з об'єктами
cloneDeep(obj); // Глибоке клонування об'єкта
getObjectDifferences(original, copy); // Знаходить відмінності між об'єктами
getDeepValue(valueItem, key); // Отримує значення з глибокої структури

// Робота з текстом
arabicToRoman(num); // Конвертує арабські числа в римські
capitalizeAfterDot(str); // Капіталізує першу літеру після крапки
getFullName(item); // Отримує повне ім'я з об'єкта
getShortName(item); // Отримує коротке ім'я з об'єкта

// Робота з даними
setDefaultQuery(value); // Встановлює значення за замовчуванням для запиту
getPriceWithCurrency(price, currency); // Форматує ціну з валютою
getReceiverIdentificationNumber(obj); // Отримує ідентифікаційний номер

// UI утиліти
copyToClipboard({ id, text }); // Копіює текст в буфер обміну
scrollToError(); // Прокручує до першого поля з помилкою
findHighestObjectKey(obj, key); // Знаходить найвищий ключ об'єкта

Робота з датами (utils/date.js)

getDateOffset(days); // Отримує дату зі зміщенням на N днів
formatMonthYear(date); // Форматує дату як "ММ.РРРР"
formatDate(value, returnWithTime); // Форматує дату
getTimeFromISOString(dateString); // Отримує час з ISO рядка
calculateExpiryDate(issueDate); // Розраховує дату закінчення терміну

Робота з файлами (utils/file.js)

triggerDownload(file, filename, extension); // Запускає завантаження файлу
getFileExtensionFromUrl(url); // Отримує розширення файлу з URL
formatBytes(bytes, decimals); // Форматує розмір файлу
getMimeTypeFromURL(url); // Отримує MIME тип з URL
getFileIconByType(fileType); // Отримує іконку для типу файлу
isImageFile(file); // Перевіряє чи є файл зображенням
validateImageFile(file, options); // Валідує зображення
createImageThumbnail(file, maxWidth, maxHeight); // Створює мініатюру
getImageDimensions(file); // Отримує розміри зображення

🎯 Composables

Валідація (useValidation.js)

import { useValidation } from "npm-core-ui/composables";

const { rules, $v, errorMessage, isShowRequiredIcon } = useValidation(
  props,
  modelValue
);

Допоміжні функції (helpers.js)

// Дебаунс функція
const debouncedFunction = useDebounce(myFunction, 300);

// Завантажувач дій таблиці
const { handleAction } = useTableActionLoader();

// Менеджер форм
const { formRefs, validateAll, clearAll, changeActiveFormsState } =
  useFormManager();

// Пошук з оновленням
const { searchData, searchParams, updateSearch, updateLazyLoadSearch } =
  useUpdateSearch(searchMethod);

Еліпсис (useEllipsis.js)

import useEllipsis from "npm-core-ui/composables";

const { isEllipsis, getInputLabelClass } = useEllipsis(elementRef);

🎨 Стилізація

Бібліотека включає готові стилі для всіх компонентів:

import "npm-core-ui/style.css";

Стилі базуються на Vuetify 3 та включають:

• Кастомні теми та кольори
• Адаптивний дизайн
• Темна/світла тема
• Кастомні компоненти

📱 Підтримка браузерів

• Chrome 88+
• Firefox 78+
• Safari 14+
• Edge 88+

🔧 Залежності

• Vue 3.5+
• Vuetify 3.8+
• Vue I18n 11+
• Vuelidate 2.0+
• Date-fns 4.1+

📚 Документація

Повна документація доступна в папці docs/:

• Швидкий старт - Встановлення та перші кроки
• Компоненти - Детальний опис всіх компонентів
• Composables та Утиліти - Функції та допоміжні утиліти
• Приклади використання - Практичні приклади та кейси
• Журнал змін - Історія версій та оновлень
• Індекс документації - Загальний огляд та навігація

📄 Ліцензія

MIT License

👥 Автори

infotrans

🔄 Версія

0.0.33