{"_id":"@parkonika-dev/design-system","_rev":"58-6b85e56558a616560de0404f6d4f4e54","name":"@parkonika-dev/design-system","dist-tags":{"latest":"1.1.3"},"versions":{"1.0.1":{"name":"@parkonika-dev/design-system","version":"1.0.1","_id":"@parkonika-dev/design-system@1.0.1","maintainers":[{"name":"parkonika-dev","email":"a.spiridonov@parkonika.com"}],"dist":{"shasum":"1ddcdd50e727ddf90634995df60411cf00c3feca","tarball":"https://registry.npmjs.org/@parkonika-dev/design-system/-/design-system-1.0.1.tgz","fileCount":5,"integrity":"sha512-uh+eZ5hbalJ214mUzh3jWLz8W9AjftZLAdMdKGvFucBet2TJkF6eBahe5ptHCfOl0n0AzjMf5Jf6mkHPj4pAoA==","signatures":[{"sig":"MEUCIDj+rxocpBlyGwvQR6M7LG+YIa9EZQA4VZ+gZA4QfHtzAiEAs8Un4DH366y2qHXEgPQZXB/D+emGC3kqb2mIkqIn6vs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":28102},"main":"./dist/parkonika-design-system.umd.js","type":"module","module":"./dist/parkonika-design-system.es.js","exports":{".":{"import":"./dist/parkonika-design-system.es.js","require":"./dist/parkonika-design-system.umd.js"},"./style.css":"./dist/style.css"},"gitHead":"9809762ffa9ebc4af4a51008d1861f8c617b69c5","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","release":"changeset publish","version":"changeset version"},"_npmUser":{"name":"parkonika-dev","email":"a.spiridonov@parkonika.com"},"deprecated":"⚠️ DEPRECATED: This package is no longer maintained. Please use an alternative solution.","_npmVersion":"10.8.2","description":"This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `\n```\n\n#### Глобальное управление (рекомендуется для приложений)\n\nИспользуйте хранилище для централизованного управления всеми модальными окнами:\n\nvue\n\n```vue\n\n \n\n \n
Содержимое модалки
\n
Управление через глобальное хранилище
\n \n\n\n\n```\n\n#### Пропсы\n\n| Пропс | Тип | Обязательный | По умолчанию | Описание |\n| ------------------- | ------------- | :----------: | ------------ | -------------------------------- |\n| `modal-id` | String | ✅ | - | Уникальный идентификатор модалки |\n| `v-model` | Boolean | ❌ | `false` | Состояние открытия/закрытия |\n| `close-icon` | Object/String | ❌ | `null` | Компонент иконки закрытия |\n| `close-on-backdrop` | Boolean | ❌ | `true` | Закрывать при клике на фон |\n\n#### Методы хранилища\n\n| Метод | Параметры | Описание |\n| ------------------------------------- | --------------------------------------- | -------------------------------------------- |\n| `setModalVisible(modalId, isVisible)` | `modalId: string`, `isVisible: boolean` | Установить видимость модального окна |\n| `openModalWithProps(modalId, props)` | `modalId: string`, `props: object` | Открыть модальное окно с передачей данных |\n| `closeModal(modalId)` | `modalId: string` | Закрыть модальное окно и очистить его пропсы |\n| `isModalOpen(modalId)` | `modalId: string` | Проверить, открыто ли модальное окно |\n| `getModalProps(modalId)` | `modalId: string` | Получить пропсы модального окна |\n\n#### События компонента\n\n```vue\n\n Содержимое модалки\n\n```\n\n#### Важные правила использования\n\n| Статус | Код | Описание |\n| -------------- | --------------------------------------------------------------------------------------------- | ------------------------------------ |\n| ✅ ПРАВИЛЬНО | `modalStore.closeModal('myModal');` | Автоматически очищает пропсы |\n| ✅ ПРАВИЛЬНО | `modalStore.setModalVisible('myModal', false);` | Корректное закрытие модального окна |\n| ❌ НЕПРАВИЛЬНО | `modalStore.setModalVisible('myModal', false);` `modalStore.modalProps['myModal'] = null;` | Не очищает пропсы и ломает хранилище |\n| ❌ НЕПРАВИЛЬНО | `modalStore.modalProps = null;` | Уничтожает все модальные окна |\n\n---\n\n### UiButton - Кнопки \n\n#### [ ⬆️ 📖 К содержанию ](#content)\n\nУниверсальные кнопки с поддержкой различных стилей, состояний загрузки и размеров. Идеально подходят для любых действий в интерфейсе.\n\n#### Основные типы кнопок\n\n```vue\n\n \n Основная кнопка\n \n\n Вторичная кнопка \n\n Третичная кнопка \n\n Опасное действие \n\n Загрузка... \n\n\n\n```\n\n#### Пропсы UiButton\n\n| Параметр | Тип | По умолчанию | Описание |\n| ------------ | --------- | ------------ | ----------------------------------------------------------------------------------- |\n| `type` | `String` | `'primary'` | Тип кнопки: `'primary'`, `'secondary'`, `'tertiary'`, `'danger'`, `'lite'`, `'pay'` |\n| `buttonText` | `String` | `'Далее'` | Текст кнопки |\n| `size` | `String` | `'md'` | Размер кнопки: `'sm'`, `'md'`, `'lg'` |\n| `disabled` | `Boolean` | `false` | Отключенное состояние |\n| `isLoading` | `Boolean` | `false` | Состояние загрузки |\n| `isActive` | `Boolean` | `false` | Активное состояние |\n| `autoWidth` | `Boolean` | `false` | Автоматическая ширина |\n\n---\n\n### UiSwitch - Переключатели \n\n#### [ ⬆️ 📖 К содержанию ](#content)\n\nСтильные переключатели для булевых значений с плавными анимациями и поддержкой различных тем.\n\n```vue\n\n \n\n \n\n\n\n```\n\n### UiLoader - Индикатор загрузки \n\n#### [ ⬆️ 📖 К содержанию ](#content)\n\nЭлегантные индикаторы загрузки для отображения процессов выполнения операций. Поддерживает различные размеры и цвета.\n\n```vue\n\n \n\n \n\n\n\n```\n\n---\n\n### UiLink - Ссылки \n\n#### [ ⬆️ 📖 К содержанию ](#content)\n\nДоступные ссылки с поддержкой маршрутизации Vue Router и внешних URL. Имеют четкие состояния hover и focus.\n\n```vue\n\n \n Настройки\n \n\n \n Внешняя ссылка\n \n\n\n\n```\n\n---\n\n### UiNotification - Уведомления \n\n#### [ ⬆️ 📖 К содержанию ](#content)\n\nКрасивые системные уведомления для информирования пользователей о событиях в приложении. Поддерживает 7 типов статусов с уникальными иконками и цветами.\n\n#### Все доступные типы уведомлений\n\n```js\n// Поддерживаемые типы:\nconst notificationTypes = {\n success: 'Успех', // Зеленый\n error: 'Ошибка', // Красный\n warn: 'Предупреждение', // Желтый\n info: 'Информация', // Синий\n add: 'Добавление', // Зеленый\n delete: 'Удаление', // Красный\n reload: 'Перезагрузка', // Синий\n};\n```\n\n#### Пропсы компонента\n\n| Параметр | Тип | По умолчанию | Описание |\n| ------------ | ---------- | ------------ | -------------------------------------------------------------------------------- |\n| `item` | `Object` | - | Объект уведомления |\n| `item.title` | `String` | - | Текст уведомления |\n| `item.type` | `String` | `'info'` | Тип: `'success'`, `'error'`, `'warn'`, `'info'`, `'add'`, `'delete'`, `'reload'` |\n| `close` | `Function` | - | Функция закрытия уведомления |\n\n#### Можно переопределить стили\n\n```css\n/* Глобальные стили для уведомлений */\n.vue-notification-group {\n width: auto !important;\n margin: 0 0 16px;\n left: 20px !important;\n box-sizing: border-box;\n}\n\n@media screen and (max-width: 479px) {\n .vue-notification-group {\n width: 100% !important;\n left: 0 !important;\n margin: 0 0 65px;\n padding: 0 16px;\n }\n}\n\n@media screen and (max-width: 319px) {\n .vue-notification-group {\n padding: 0 7px;\n }\n}\n```\n\n#### Использование в компонентах\n\n##### Вариант A: Глобальное подключение в App.vue\n\n```vue\n\n\n
\n \n\n \n \n \n \n \n \n
\n\n\n\n```\n\n##### Вариант B: Локальное использование в компоненте\n\n```vue\n\n
\n \n\n \n \n \n \n \n \n
\n\n\n\n```\n\n---\n\n### UiRadioButton - Радио кнопка \n\n#### [ ⬆️ 📖 К содержанию ](#content)\n\nКастомные радио-кнопки с поддержкой группировки и доступной разметкой. Идеальны для выбора одного варианта из нескольких.\n\n#### Пропсы компонента\n\n| Параметр | Тип | По умолчанию | Обязательный | Описание |\n| ------------ | --------------------------------------------- | ------------ | ------------ | ------------------------------------ |\n| `id` | `String` | - | ✅ | Уникальный идентификатор радиокнопки |\n| `value` | `String` \\| `Number` \\| `Boolean` | - | ✅ | Значение радиокнопки |\n| `modelValue` | `String` \\| `Number` \\| `Boolean` \\| `Object` | `''` | ❌ | Текущее выбранное значение (v-model) |\n| `label` | `String` | `''` | ❌ | Текст метки радиокнопки |\n\n#### Базовое использование\n\n```vue\n\n \n\n \n\n\n\n```\n\n---\n\n### UiSelect - Выпадающий список \n\n#### [ ⬆️ 📖 К содержанию ](#content)\n\nФункциональные выпадающие списки с поиском, валидацией и поддержкой сложных структур данных. Полностью кастомный дизайн.\n\n#### Пропсы компонента\n\n| Параметр | Тип | По умолчанию | Обязательный | Описание |\n| ---------------- | --------------------------------------- | ------------ | :----------: | -------------------------------------------------------- |\n| `modelValue` | `String \\| Number \\| Boolean \\| Object` | `''` | ❌ | Текущее выбранное значение (v-model) |\n| `options` | `Array` | `[]` | ❌ | Массив опций (строк или объектов) |\n| `label` | `String` | `''` | ❌ | Текст метки селекта |\n| `placeholder` | `String` | `''` | ❌ | Текст плейсхолдера |\n| `disabled` | `Boolean` | `false` | ❌ | Отключенное состояние |\n| `required` | `Boolean` | `false` | ❌ | Обязательное поле |\n| `error` | `String` | `''` | ❌ | Текст ошибки |\n| `hint` | `String` | `''` | ❌ | Текст подсказки |\n| `optionValue` | `String` | `'value'` | ❌ | Ключ для значения опции (для объектов) |\n| `optionLabel` | `String` | `'label'` | ❌ | Ключ для отображаемого текста опции (для объектов) |\n| `optionDisabled` | `String` | `'disabled'` | ❌ | Ключ для отключенного состояния опции (для объектов) |\n| `optionKey` | `String` | `'id'` | ❌ | Ключ для уникального идентификатора опции (для объектов) |\n| `id` | `String` | `'random'` | ❌ | Уникальный идентификатор селекта |\n\n#### События компонента\n\n| Событие | Тип данных | Описание |\n| ------------------- | --------------------------------------- | --------------------------------- |\n| `update:modelValue` | `String \\| Number \\| Boolean \\| Object` | Обновление значения через v-model |\n| `change` | `String \\| Number \\| Boolean \\| Object` | Изменение выбранного значения |\n\n### Базовое использование\n\n```vue\n\n \n\n\n\n```\n\n#### Использование с простыми массивами\n\n```vue\n\n \n\n\n\n```\n\n#### Использование с валидацией и подсказками\n\n```vue\n\n \n\n\n\n```\n\n#### Кастомизация ключей опций\n\n```vue\n\n \n\n\n\n```\n\n#### Отключенное состояние\n\n```vue\n\n \n\n\n\n```\n\n---\n\n### UiCheckbox - Чекбокс \n\n#### [ ⬆️ 📖 К содержанию ](#content)\n\nДоступные чекбоксы с кастомным дизайном, состояниями неопределенности и поддержкой touch-устройств.\n\n#### Пропсы компонента\n\n| Параметр | Тип | Обязательный | По умолчанию | Описание |\n| ------------ | --------- | :----------: | ------------ | --------------------------------- |\n| `id` | `String` | ✅ | - | Уникальный идентификатор чекбокса |\n| `label` | `String` | ❌ | `''` | Текст метки чекбокса |\n| `modelValue` | `Boolean` | ❌ | `false` | Текущее состояние (v-model) |\n| `disabled` | `Boolean` | ❌ | `false` | Отключенное состояние |\n\n#### События компонента\n\n| Событие | Тип данных | Описание |\n| ------------------- | ---------- | ---------------------------------- |\n| `update:modelValue` | `Boolean` | Обновление состояния через v-model |\n\n#### Базовое использование\n\n```vue\n\n \n\n \n\n\n\n```\n\n---\n\n### UiTextarea - Текстовое поле \n\n#### [ ⬆️ 📖 К содержанию ](#content)\n\nМногострочные текстовые поля с авто-размером, валидацией и подсветкой синтаксиса. Идеально для длинных текстов.\n\n#### Пропсы компонента\n\n| Параметр | Тип | Обязательный | По умолчанию | Описание |\n| ------------- | --------- | :----------: | ------------ | --------------------------- |\n| `modelValue` | `String` | ❌ | `''` | Текущее значение (v-model) |\n| `label` | `String` | ❌ | `''` | Текст метки текстового поля |\n| `placeholder` | `String` | ❌ | `''` | Текст плейсхолдера |\n| `disabled` | `Boolean` | ❌ | `false` | Отключенное состояние |\n| `readonly` | `Boolean` | ❌ | `false` | Только для чтения |\n| `error` | `String` | ❌ | `''` | Текст ошибки |\n| `hint` | `String` | ❌ | `''` | Текст подсказки |\n| `rows` | `Number` | ❌ | `3` | Количество строк |\n| `id` | `String` | ❌ | `''` | Уникальный идентификатор |\n\n#### События компонента\n\n| Событие | Тип данных | Описание |\n| ------------------- | ---------- | --------------------------------- |\n| `update:modelValue` | `String` | Обновление значения через v-model |\n| `input` | `String` | Ввод данных |\n| `focus` | `Event` | Фокус на поле |\n| `blur` | `Event` | Потеря фокуса |\n\n#### Базовое использование\n\n```vue\n\n \n\n \n\n\n\n```\n\n#### Использование с различными состояниями\n\n```vue\n\n \n\n \n\n \n\n \n\n \n\n\n\n```\n\n---\n\n### UiRange - Ползунок \n\n#### [ ⬆️ 📖 К содержанию ](#content)\n\nИнтуитивные ползунки для выбора числовых значений в диапазоне. Поддерживает кастомные форматы значений и подсказки.\n\n#### Пропсы компонента\n\n| Параметр | Тип | Обязательный | По умолчанию | Описание |\n| ------------ | ------------------ | :----------: | ------------ | ------------------------------- |\n| `modelValue` | `Number \\| String` | ❌ | `0` | Текущее значение (v-model) |\n| `label` | `String` | ❌ | `''` | Текст метки ползунка |\n| `min` | `Number` | ❌ | `0` | Минимальное значение |\n| `max` | `Number` | ❌ | `100` | Максимальное значение |\n| `step` | `Number` | ❌ | `1` | Шаг изменения |\n| `unit` | `String` | ❌ | `'%'` | Единица измерения |\n| `disabled` | `Boolean` | ❌ | `false` | Отключенное состояние |\n| `required` | `Boolean` | ❌ | `false` | Обязательное поле |\n| `showValue` | `Boolean` | ❌ | `true` | Показывать текущее значение |\n| `hints` | `Boolean` | ❌ | `false` | Показывать подсказки min/max |\n| `format` | `Function` | ❌ | `null` | Функция форматирования значения |\n\n#### События компонента\n\n| Событие | Тип данных | Описание |\n| ------------------- | ---------- | ------------------------------------- |\n| `update:modelValue` | `Number` | Обновление значения через v-model |\n| `input` | `Number` | Ввод данных (при движении ползунка) |\n| `change` | `Number` | Изменение значения (после отпускания) |\n\n#### Базовое использование\n\n```vue\n\n \n\n \n\n\n\n```\n\n#### Использование с форматированием\n\n```vue\n\n
\n \n\n \n\n \n Элемент\n
\n \n\n\n\n```\n\n---\n\n### UiInput - Поле ввода с валидацией \n\n#### [ ⬆️ 📖 К содержанию ](#content)\n\nУмные поля ввода со встроенной валидацией, масками и поддержкой различных типов данных. Интегрируется с популярными библиотеками валидации.\n\n#### Пропсы компонента\n\n| Параметр | Тип | По умолчанию | Описание |\n| --------------- | ------------------ | ------------ | ------------------------------------------------------- |\n| `modelValue` | `String`, `Number` | `''` | Значение поля (v-model) |\n| `type` | `String` | `'text'` | Тип поля: `'text'`, `'password'`, `'email'`, `'number'` |\n| `label` | `String` | `''` | Метка поля |\n| `placeholder` | `String` | `''` | Плейсхолдер |\n| `id` | `String` | `''` | Уникальный ID поля |\n| `error` | `String` | `''` | Текст ошибки валидации |\n| `textColor` | `String` | `''` | Кастомный цвет текста |\n| `width` | `String` | `'100%'` | Ширина поля |\n| `height` | `String` | `'39px'` | Высота поля |\n| `minWidth` | `String` | `'280px'` | Минимальная ширина |\n| `maxWidth` | `String` | `'100%'` | Максимальная ширина |\n| `fontSize` | `String` | `'0.9rem'` | Размер шрифта |\n| `fontSizeError` | `String` | `'12px'` | Размер шрифта ошибки |\n| `borderRadius` | `String` | `'10px'` | Радиус скругления |\n\n#### События компонента\n\n| Событие | Описание | Параметры |\n| ------------------- | ------------------ | -------------------------- |\n| `update:modelValue` | Изменение значения | `value` - новое значение |\n| `blur` | Потеря фокуса | `value` - текущее значение |\n\n#### Базовое использование\n\n```vue\n\n \n\n\n\n```\n\n#### Пример с ручной валидацией\n\n```vue\n\n \n \n\n \n\n \n Сохранить\n \n \n\n\n\n```\n\n### Пример с Yup валидацией (сторонняя библиотек)\n\n```vue\n\n \n \n\n \n\n \n\n \n Зарегистрироваться\n \n \n\n\n\n```\n\n---\n\nДокументация постоянно обновляется. Следите за обновлениями!\n","readmeFilename":"README.md"}