@skyservice-developers/vue-dev-kit 1.0.0 → 1.0.2
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 +8 -64
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
# @skyservice/vue-dev-kit
|
|
1
|
+
# @skyservice-developers/vue-dev-kit
|
|
2
2
|
|
|
3
3
|
Vue 3 developer toolkit - компоненти для розробки.
|
|
4
4
|
|
|
5
5
|
## Встановлення
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm install @skyservice/vue-dev-kit
|
|
8
|
+
npm install @skyservice-developers/vue-dev-kit
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
## Підключення стилів
|
|
12
12
|
|
|
13
13
|
```js
|
|
14
14
|
// main.js
|
|
15
|
-
import '@skyservice/vue-dev-kit/style.css'
|
|
15
|
+
import '@skyservice-developers/vue-dev-kit/style.css'
|
|
16
16
|
```
|
|
17
17
|
|
|
18
18
|
---
|
|
@@ -26,7 +26,7 @@ import '@skyservice/vue-dev-kit/style.css'
|
|
|
26
26
|
#### Імпорт
|
|
27
27
|
|
|
28
28
|
```js
|
|
29
|
-
import { Header } from '@skyservice/vue-dev-kit'
|
|
29
|
+
import { Header } from '@skyservice-developers/vue-dev-kit'
|
|
30
30
|
```
|
|
31
31
|
|
|
32
32
|
#### Базове використання
|
|
@@ -40,7 +40,7 @@ import { Header } from '@skyservice/vue-dev-kit'
|
|
|
40
40
|
</template>
|
|
41
41
|
|
|
42
42
|
<script setup>
|
|
43
|
-
import { Header } from '@skyservice/vue-dev-kit'
|
|
43
|
+
import { Header } from '@skyservice-developers/vue-dev-kit'
|
|
44
44
|
</script>
|
|
45
45
|
```
|
|
46
46
|
|
|
@@ -61,42 +61,6 @@ import { Header } from '@skyservice/vue-dev-kit'
|
|
|
61
61
|
| `title` | Кастомний заголовок (замість `title` prop) |
|
|
62
62
|
| `subtitle` | Кастомний підзаголовок (замість `subtitle` prop) |
|
|
63
63
|
|
|
64
|
-
#### Особливості
|
|
65
|
-
|
|
66
|
-
**Автоматичне визначення iframe та кнопка "Назад"**
|
|
67
|
-
|
|
68
|
-
Кнопка "Назад" автоматично:
|
|
69
|
-
- Відображається тільки коли сторінка завантажена в iframe
|
|
70
|
-
- При кліку відправляє `postMessage({ type: 'exit' }, '*')` батьківському вікну
|
|
71
|
-
|
|
72
|
-
```vue
|
|
73
|
-
<!-- Кнопка з'явиться тільки в iframe -->
|
|
74
|
-
<Header title="Dashboard" />
|
|
75
|
-
|
|
76
|
-
<!-- Примусово приховати кнопку -->
|
|
77
|
-
<Header title="Dashboard" :show-back-button="false" />
|
|
78
|
-
```
|
|
79
|
-
|
|
80
|
-
#### CSS змінні
|
|
81
|
-
|
|
82
|
-
```css
|
|
83
|
-
:root {
|
|
84
|
-
--sky-header-bg: white;
|
|
85
|
-
--sky-header-border-color: #dee2e6;
|
|
86
|
-
--sky-header-z-index: 100;
|
|
87
|
-
--sky-header-padding: 10px 0;
|
|
88
|
-
--sky-header-content-padding: 4px 14px;
|
|
89
|
-
--sky-header-title-size: 18px;
|
|
90
|
-
--sky-header-title-weight: 500;
|
|
91
|
-
--sky-header-title-color: #252525;
|
|
92
|
-
--sky-header-subtitle-size: 14px;
|
|
93
|
-
--sky-header-subtitle-color: #6c757d;
|
|
94
|
-
--sky-header-back-btn-color: #374151;
|
|
95
|
-
--sky-header-back-btn-hover-bg: #f8f9fa;
|
|
96
|
-
--sky-header-back-btn-active-bg: #e9ecef;
|
|
97
|
-
--sky-header-actions-gap: 12px;
|
|
98
|
-
}
|
|
99
|
-
```
|
|
100
64
|
|
|
101
65
|
#### Приклади
|
|
102
66
|
|
|
@@ -124,7 +88,7 @@ import { Header } from '@skyservice/vue-dev-kit'
|
|
|
124
88
|
#### Імпорт
|
|
125
89
|
|
|
126
90
|
```js
|
|
127
|
-
import { Modal } from '@skyservice/vue-dev-kit'
|
|
91
|
+
import { Modal } from '@skyservice-developers/vue-dev-kit'
|
|
128
92
|
```
|
|
129
93
|
|
|
130
94
|
#### Базове використання
|
|
@@ -144,7 +108,7 @@ import { Modal } from '@skyservice/vue-dev-kit'
|
|
|
144
108
|
|
|
145
109
|
<script setup>
|
|
146
110
|
import { ref } from 'vue'
|
|
147
|
-
import { Modal } from '@skyservice/vue-dev-kit'
|
|
111
|
+
import { Modal } from '@skyservice-developers/vue-dev-kit'
|
|
148
112
|
|
|
149
113
|
const showModal = ref(false)
|
|
150
114
|
</script>
|
|
@@ -175,26 +139,6 @@ const showModal = ref(false)
|
|
|
175
139
|
| `default` | Основний контент модального вікна |
|
|
176
140
|
| `footer` | Футер з кнопками (відображається тільки якщо заповнений) |
|
|
177
141
|
|
|
178
|
-
#### CSS змінні
|
|
179
|
-
|
|
180
|
-
```css
|
|
181
|
-
:root {
|
|
182
|
-
--sky-modal-z-index: 9998;
|
|
183
|
-
--sky-modal-bg: white;
|
|
184
|
-
--sky-modal-radius: 0; /* на desktop 8px */
|
|
185
|
-
--sky-modal-border-color: #dee2e6;
|
|
186
|
-
--sky-modal-header-padding: 10px 14px;
|
|
187
|
-
--sky-modal-body-padding: 14px;
|
|
188
|
-
--sky-modal-footer-padding: 10px 14px;
|
|
189
|
-
--sky-modal-title-size: 18px;
|
|
190
|
-
--sky-modal-title-weight: 500;
|
|
191
|
-
--sky-modal-title-color: #252525;
|
|
192
|
-
--sky-modal-subtitle-size: 14px;
|
|
193
|
-
--sky-modal-subtitle-color: #6c757d;
|
|
194
|
-
--sky-modal-back-color: #374151;
|
|
195
|
-
--sky-modal-back-hover-bg: #f8f9fa;
|
|
196
|
-
}
|
|
197
|
-
```
|
|
198
142
|
|
|
199
143
|
#### Приклади
|
|
200
144
|
|
|
@@ -209,4 +153,4 @@ const showModal = ref(false)
|
|
|
209
153
|
<button @click="confirm">Підтвердити</button>
|
|
210
154
|
</template>
|
|
211
155
|
</Modal>
|
|
212
|
-
```
|
|
156
|
+
```
|