@soroka282/migrant.ui-kit 0.0.36 → 0.0.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +147 -147
- package/dist/migrant.ui-kit.es.js +90 -87
- package/dist/migrant.ui-kit.umd.js +3 -3
- package/dist/src/store/modal.store.d.ts +3 -3
- package/package.json +113 -113
- package/scripts/postinstall.js +35 -35
- package/scripts/verify-commit.js +35 -35
- package/src/assets/scss/common/swiper.scss +19 -19
- package/src/assets/scss/common/variables.scss +14 -14
- package/src/assets/scss/index.scss +8 -8
- package/src/assets/scss/mixins/flex.minix.scss +6 -6
- package/src/assets/scss/mixins/identation.mixin.scss +20 -20
- package/src/assets/scss/mixins/index.mixin.scss +2 -2
- package/src/assets/scss/mixins/typograph.mixin.scss +4 -4
- package/src/components/UI/button/UIButton.stories.ts +60 -60
- package/src/components/UI/card/UICard.stories.ts +57 -57
- package/src/components/UI/card/UICard.vue +52 -52
- package/src/components/UI/inputs/BaseMaskedInput.vue +100 -100
- package/src/components/UI/inputs/UIInput.stories.ts +92 -92
- package/src/components/UI/inputs/UIInput.vue +184 -184
- package/src/components/UI/loader/UILoader.vue +69 -76
- package/src/components/UI/modal/UIModal.stories.ts +40 -40
- package/src/components/UI/modal/UIModal.vue +307 -304
- package/src/components/UI/swiper/UISwiper.stories.ts +33 -33
- package/src/components/UI/toaster/UIToastNotification.stories.ts +146 -146
- package/src/components/UI/toaster/UIToaster.ts +57 -57
- package/src/composables/index.ts +2 -2
- package/src/composables/useIframeHandlers.ts +52 -52
- package/src/composables/useRequestHandler.ts +49 -49
- package/src/constants/index.ts +1 -1
- package/src/constants/ui-color.constant.ts +19 -19
- package/src/index.ts +15 -15
- package/src/main.ts +12 -12
- package/src/plugins/formatter.ts +136 -136
- package/src/plugins/global-install-plugin.ts +13 -13
- package/src/plugins/index.ts +3 -3
- package/src/plugins/plural-endings.ts +19 -19
- package/src/store/index.ts +1 -1
- package/src/store/modal.store.ts +82 -76
- package/src/style.css +81 -81
- package/src/types/UI/ui-color.type.ts +22 -22
- package/src/types/UI/ui-input.type.ts +63 -63
- package/src/types/UI/ui-modal.type.ts +7 -7
- package/src/types/UI/ui-size.type.ts +7 -7
- package/src/types/common.type.ts +2 -2
- package/src/types/index.ts +6 -6
- package/src/types/plugin.type.ts +6 -6
- package/src/utils/debounce.util.ts +7 -7
- package/src/utils/index.ts +1 -1
package/README.md
CHANGED
|
@@ -1,147 +1,147 @@
|
|
|
1
|
-
# 📖 Migrant UI Kit
|
|
2
|
-
|
|
3
|
-
Библиотека переиспользуемых компонентов для проектов Migrant. Построена на [Vue 3](https://vuejs.org/) с поддержкой TypeScript и scoped-стилей.
|
|
4
|
-
|
|
5
|
-
## 📦 Установка и использование библиотеки
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm install @soroka282/migrant.ui-kit
|
|
9
|
-
```
|
|
10
|
-
или
|
|
11
|
-
```bash
|
|
12
|
-
yarn add @soroka282/migrant.ui-kit
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
### 🛠️ Использование компонентов
|
|
16
|
-
|
|
17
|
-
```
|
|
18
|
-
<script setup lang="ts">
|
|
19
|
-
import {
|
|
20
|
-
UIButton,
|
|
21
|
-
UIColor,
|
|
22
|
-
UIColorName,
|
|
23
|
-
UISize,
|
|
24
|
-
} from '@soroka282/migrant.ui-kit';
|
|
25
|
-
</script>
|
|
26
|
-
|
|
27
|
-
<template>
|
|
28
|
-
<UIButton
|
|
29
|
-
is-box-shadow
|
|
30
|
-
:size="UISize.S"
|
|
31
|
-
:color="UIColor[UIColorName.White]"
|
|
32
|
-
:bg-color="UIColor[UIColorName.PurpleMain]"
|
|
33
|
-
>
|
|
34
|
-
Кнопка
|
|
35
|
-
</UIButton>
|
|
36
|
-
</template>
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
### ⚙️ TypeScript автодополнение
|
|
40
|
-
|
|
41
|
-
Убедитесь, что `tsconfig.json` содержит:
|
|
42
|
-
|
|
43
|
-
```json
|
|
44
|
-
{
|
|
45
|
-
"compilerOptions": {
|
|
46
|
-
"moduleResolution": "bundler",
|
|
47
|
-
"paths": {
|
|
48
|
-
"@soroka282/migrant.ui-kit": ["node_modules/@soroka282/migrant.ui-kit"]
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
## 💻 Разработка
|
|
55
|
-
|
|
56
|
-
#### Установка зависимостей
|
|
57
|
-
```bash
|
|
58
|
-
npm i
|
|
59
|
-
```
|
|
60
|
-
Проверить, что установился .husky и commit-msg (.husky/commit-msg) имеет:
|
|
61
|
-
```
|
|
62
|
-
node scripts/verify-commit.js
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
#### Запуск локального проекта:
|
|
66
|
-
```bash
|
|
67
|
-
npm run dev
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
#### Запуск локального сторибука
|
|
71
|
-
```bash
|
|
72
|
-
npm run storybook
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
## 🧪 Коммиты
|
|
76
|
-
|
|
77
|
-
Формат коммитов:
|
|
78
|
-
```
|
|
79
|
-
<номер задачи>/<тип>(<scope>): <описание>
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
Если задача в трекере отсутствует:
|
|
83
|
-
```
|
|
84
|
-
<тип>(<scope>): <описание>
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
#### Типы коммитов:
|
|
88
|
-
|
|
89
|
-
- `feat` — добавление нового функционала
|
|
90
|
-
- `fix` — исправление ошибок
|
|
91
|
-
- `docs` — изменение документации
|
|
92
|
-
- `build` — сборка и настройка инфраструктуры (vite, tsconfig и т.п.)
|
|
93
|
-
|
|
94
|
-
#### Примеры:
|
|
95
|
-
|
|
96
|
-
```
|
|
97
|
-
EVOLVE-1/feat(useIframeHandler): добавлен новый composable метод
|
|
98
|
-
EVOLVE-2/fix(UIInput): обработка событий при потере фокуса
|
|
99
|
-
EVOLVE-3/build(vite.config): релиз библиотеки
|
|
100
|
-
|
|
101
|
-
feat(useIframeHandler): добавлен новый composable метод
|
|
102
|
-
build(vite.config): релиз библиотеки
|
|
103
|
-
```
|
|
104
|
-
|
|
105
|
-
## 🛠️ Сборка библиотеки
|
|
106
|
-
|
|
107
|
-
Билд библиотеки:
|
|
108
|
-
```bash
|
|
109
|
-
npm run build
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
Генерация .d.ts:
|
|
113
|
-
```bash
|
|
114
|
-
npm run ts
|
|
115
|
-
```
|
|
116
|
-
|
|
117
|
-
### Публикация пакета в npm
|
|
118
|
-
|
|
119
|
-
- Поднять version в package.json
|
|
120
|
-
- Опубликовать:
|
|
121
|
-
```bash
|
|
122
|
-
npm run publish:npm
|
|
123
|
-
```
|
|
124
|
-
|
|
125
|
-
## 📖 Storybook
|
|
126
|
-
|
|
127
|
-
Сборка:
|
|
128
|
-
```bash
|
|
129
|
-
npm run build:storybook
|
|
130
|
-
```
|
|
131
|
-
|
|
132
|
-
## 🥉 Используемые зависимости
|
|
133
|
-
|
|
134
|
-
- [Vue 3](https://vuejs.org/) — основной фреймворк
|
|
135
|
-
- [Pinia](https://pinia.vuejs.org/) — управление состоянием
|
|
136
|
-
- [Maska](https://beholdr.github.io/maska/) — маски ввода
|
|
137
|
-
- [Swiper](https://swiperjs.com/) — свайпер/карусель
|
|
138
|
-
- [Vue-toastification](https://vue-toastification.maronato.dev/) — уведомления (тосты)
|
|
139
|
-
|
|
140
|
-
## 🎨 Глобальные стили (optional)
|
|
141
|
-
|
|
142
|
-
В `main.ts`:
|
|
143
|
-
|
|
144
|
-
```ts
|
|
145
|
-
import '@soroka282/migrant.ui-kit/dist/style.css';
|
|
146
|
-
```
|
|
147
|
-
|
|
1
|
+
# 📖 Migrant UI Kit
|
|
2
|
+
|
|
3
|
+
Библиотека переиспользуемых компонентов для проектов Migrant. Построена на [Vue 3](https://vuejs.org/) с поддержкой TypeScript и scoped-стилей.
|
|
4
|
+
|
|
5
|
+
## 📦 Установка и использование библиотеки
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @soroka282/migrant.ui-kit
|
|
9
|
+
```
|
|
10
|
+
или
|
|
11
|
+
```bash
|
|
12
|
+
yarn add @soroka282/migrant.ui-kit
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### 🛠️ Использование компонентов
|
|
16
|
+
|
|
17
|
+
```
|
|
18
|
+
<script setup lang="ts">
|
|
19
|
+
import {
|
|
20
|
+
UIButton,
|
|
21
|
+
UIColor,
|
|
22
|
+
UIColorName,
|
|
23
|
+
UISize,
|
|
24
|
+
} from '@soroka282/migrant.ui-kit';
|
|
25
|
+
</script>
|
|
26
|
+
|
|
27
|
+
<template>
|
|
28
|
+
<UIButton
|
|
29
|
+
is-box-shadow
|
|
30
|
+
:size="UISize.S"
|
|
31
|
+
:color="UIColor[UIColorName.White]"
|
|
32
|
+
:bg-color="UIColor[UIColorName.PurpleMain]"
|
|
33
|
+
>
|
|
34
|
+
Кнопка
|
|
35
|
+
</UIButton>
|
|
36
|
+
</template>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### ⚙️ TypeScript автодополнение
|
|
40
|
+
|
|
41
|
+
Убедитесь, что `tsconfig.json` содержит:
|
|
42
|
+
|
|
43
|
+
```json
|
|
44
|
+
{
|
|
45
|
+
"compilerOptions": {
|
|
46
|
+
"moduleResolution": "bundler",
|
|
47
|
+
"paths": {
|
|
48
|
+
"@soroka282/migrant.ui-kit": ["node_modules/@soroka282/migrant.ui-kit"]
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## 💻 Разработка
|
|
55
|
+
|
|
56
|
+
#### Установка зависимостей
|
|
57
|
+
```bash
|
|
58
|
+
npm i
|
|
59
|
+
```
|
|
60
|
+
Проверить, что установился .husky и commit-msg (.husky/commit-msg) имеет:
|
|
61
|
+
```
|
|
62
|
+
node scripts/verify-commit.js
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
#### Запуск локального проекта:
|
|
66
|
+
```bash
|
|
67
|
+
npm run dev
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
#### Запуск локального сторибука
|
|
71
|
+
```bash
|
|
72
|
+
npm run storybook
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## 🧪 Коммиты
|
|
76
|
+
|
|
77
|
+
Формат коммитов:
|
|
78
|
+
```
|
|
79
|
+
<номер задачи>/<тип>(<scope>): <описание>
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
Если задача в трекере отсутствует:
|
|
83
|
+
```
|
|
84
|
+
<тип>(<scope>): <описание>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
#### Типы коммитов:
|
|
88
|
+
|
|
89
|
+
- `feat` — добавление нового функционала
|
|
90
|
+
- `fix` — исправление ошибок
|
|
91
|
+
- `docs` — изменение документации
|
|
92
|
+
- `build` — сборка и настройка инфраструктуры (vite, tsconfig и т.п.)
|
|
93
|
+
|
|
94
|
+
#### Примеры:
|
|
95
|
+
|
|
96
|
+
```
|
|
97
|
+
EVOLVE-1/feat(useIframeHandler): добавлен новый composable метод
|
|
98
|
+
EVOLVE-2/fix(UIInput): обработка событий при потере фокуса
|
|
99
|
+
EVOLVE-3/build(vite.config): релиз библиотеки
|
|
100
|
+
|
|
101
|
+
feat(useIframeHandler): добавлен новый composable метод
|
|
102
|
+
build(vite.config): релиз библиотеки
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
## 🛠️ Сборка библиотеки
|
|
106
|
+
|
|
107
|
+
Билд библиотеки:
|
|
108
|
+
```bash
|
|
109
|
+
npm run build
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
Генерация .d.ts:
|
|
113
|
+
```bash
|
|
114
|
+
npm run ts
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
### Публикация пакета в npm
|
|
118
|
+
|
|
119
|
+
- Поднять version в package.json
|
|
120
|
+
- Опубликовать:
|
|
121
|
+
```bash
|
|
122
|
+
npm run publish:npm
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
## 📖 Storybook
|
|
126
|
+
|
|
127
|
+
Сборка:
|
|
128
|
+
```bash
|
|
129
|
+
npm run build:storybook
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
## 🥉 Используемые зависимости
|
|
133
|
+
|
|
134
|
+
- [Vue 3](https://vuejs.org/) — основной фреймворк
|
|
135
|
+
- [Pinia](https://pinia.vuejs.org/) — управление состоянием
|
|
136
|
+
- [Maska](https://beholdr.github.io/maska/) — маски ввода
|
|
137
|
+
- [Swiper](https://swiperjs.com/) — свайпер/карусель
|
|
138
|
+
- [Vue-toastification](https://vue-toastification.maronato.dev/) — уведомления (тосты)
|
|
139
|
+
|
|
140
|
+
## 🎨 Глобальные стили (optional)
|
|
141
|
+
|
|
142
|
+
В `main.ts`:
|
|
143
|
+
|
|
144
|
+
```ts
|
|
145
|
+
import '@soroka282/migrant.ui-kit/dist/style.css';
|
|
146
|
+
```
|
|
147
|
+
|