@skyservice-developers/vue-dev-kit 1.5.9 → 1.5.10
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 +202 -217
- package/dist/vue2/style.css +1 -1
- package/dist/vue2/vue-dev-kit.cjs +1 -1
- package/dist/vue2/vue-dev-kit.js +256 -197
- package/dist/vue3/style.css +1 -1
- package/dist/vue3/vue-dev-kit.cjs +1 -1
- package/dist/vue3/vue-dev-kit.js +570 -509
- package/package.json +1 -1
- package/src/vue2/components/SkySelect.vue +81 -17
- package/src/vue3/components/SkySelect.vue +146 -38
package/README.md
CHANGED
|
@@ -1,54 +1,33 @@
|
|
|
1
1
|
# @skyservice-developers/vue-dev-kit
|
|
2
2
|
|
|
3
|
-
Vue developer toolkit
|
|
3
|
+
Vue developer toolkit — компоненти для розробки мінідодатків. Підтримує Vue 2.7+ та Vue 3.4+.
|
|
4
4
|
|
|
5
5
|
## Встановлення
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm install @skyservice-developers/vue-dev-kit
|
|
8
|
+
npm install @skyservice-developers/vue-dev-kit --legacy-peer-deps
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
##
|
|
11
|
+
## Підключення
|
|
12
|
+
|
|
13
|
+
### Vue 3
|
|
12
14
|
|
|
13
15
|
```js
|
|
14
|
-
// main.js
|
|
15
|
-
import { createApp } from 'vue'
|
|
16
16
|
import '@skyservice-developers/vue-dev-kit/vue3/style.css'
|
|
17
|
-
import { Header, Modal, Dialog } from '@skyservice-developers/vue-dev-kit'
|
|
18
|
-
// або явно:
|
|
19
|
-
// import { Header, Modal, Dialog } from '@skyservice-developers/vue-dev-kit/vue3'
|
|
20
|
-
|
|
21
|
-
const app = createApp(App)
|
|
22
|
-
app.mount('#app')
|
|
17
|
+
import { Header, Modal, Dialog, SkyButton, SkySelect } from '@skyservice-developers/vue-dev-kit'
|
|
23
18
|
```
|
|
24
19
|
|
|
25
|
-
|
|
20
|
+
### Vue 2
|
|
26
21
|
|
|
27
22
|
```js
|
|
28
|
-
// main.js
|
|
29
|
-
import Vue from 'vue'
|
|
30
23
|
import '@skyservice-developers/vue-dev-kit/vue2/style.css'
|
|
31
|
-
import { Header, Modal, Dialog } from '@skyservice-developers/vue-dev-kit/vue2'
|
|
32
|
-
|
|
33
|
-
new Vue({
|
|
34
|
-
render: h => h(App)
|
|
35
|
-
}).$mount('#app')
|
|
24
|
+
import { Header, Modal, Dialog, SkyButton, SkySelect } from '@skyservice-developers/vue-dev-kit/vue2'
|
|
36
25
|
```
|
|
37
26
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
## Швидкий старт
|
|
45
|
-
|
|
46
|
-
| Версія | Імпорт компонентів | Стилі |
|
|
47
|
-
|--------|-------------------|-------|
|
|
48
|
-
| **Vue 3** | `from '@skyservice-developers/vue-dev-kit'` або `from '@skyservice-developers/vue-dev-kit/vue3'` | `@skyservice-developers/vue-dev-kit/vue3/style.css` |
|
|
49
|
-
| **Vue 2** | `from '@skyservice-developers/vue-dev-kit/vue2'` | `@skyservice-developers/vue-dev-kit/vue2/style.css` |
|
|
50
|
-
|
|
51
|
-
**Доступні компоненти:** `Header`, `Modal`, `Dialog`, `BaseTeleport`
|
|
27
|
+
> **Vue 2:** якщо модалки не відображаються, встановіть `portal-vue`:
|
|
28
|
+
> ```bash
|
|
29
|
+
> npm install portal-vue
|
|
30
|
+
> ```
|
|
52
31
|
|
|
53
32
|
---
|
|
54
33
|
|
|
@@ -56,61 +35,17 @@ npm install portal-vue
|
|
|
56
35
|
|
|
57
36
|
### Header
|
|
58
37
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
#### Імпорт
|
|
62
|
-
|
|
63
|
-
```js
|
|
64
|
-
// Vue 3
|
|
65
|
-
import { Header } from '@skyservice-developers/vue-dev-kit'
|
|
38
|
+
Шапка сторінки з кнопкою "Назад", дропдауном нещодавніх розділів та слотом для кнопок. Автоматично відправляє батьківському iframe сигнал `setRocketMode` при монтуванні та відновлює попередній стан при розмонтуванні.
|
|
66
39
|
|
|
67
|
-
// Vue 2
|
|
68
|
-
import { Header } from '@skyservice-developers/vue-dev-kit/vue2'
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
#### Базове використання
|
|
72
|
-
|
|
73
|
-
**Vue 3 (Composition API)**
|
|
74
|
-
```vue
|
|
75
|
-
<template>
|
|
76
|
-
<Header title="Назва сторінки" subtitle="Опис сторінки">
|
|
77
|
-
<button @click="handleRefresh">Оновити</button>
|
|
78
|
-
<button @click="handleCreate">Створити</button>
|
|
79
|
-
</Header>
|
|
80
|
-
</template>
|
|
81
|
-
|
|
82
|
-
<script setup>
|
|
83
|
-
import { Header } from '@skyservice-developers/vue-dev-kit'
|
|
84
|
-
|
|
85
|
-
const handleRefresh = () => console.log('Refresh')
|
|
86
|
-
const handleCreate = () => console.log('Create')
|
|
87
|
-
</script>
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
**Vue 2 (Options API)**
|
|
91
40
|
```vue
|
|
92
|
-
<
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
import { Header } from '@skyservice-developers/vue-dev-kit/vue2'
|
|
101
|
-
|
|
102
|
-
export default {
|
|
103
|
-
components: { Header },
|
|
104
|
-
methods: {
|
|
105
|
-
handleRefresh() {
|
|
106
|
-
console.log('Refresh')
|
|
107
|
-
},
|
|
108
|
-
handleCreate() {
|
|
109
|
-
console.log('Create')
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
</script>
|
|
41
|
+
<Header
|
|
42
|
+
title="Товари"
|
|
43
|
+
subtitle="Управління каталогом"
|
|
44
|
+
:dropdown-items="recentPages"
|
|
45
|
+
@navigate="goTo"
|
|
46
|
+
>
|
|
47
|
+
<SkyButton @click="openDialog">+ Додати</SkyButton>
|
|
48
|
+
</Header>
|
|
114
49
|
```
|
|
115
50
|
|
|
116
51
|
#### Props
|
|
@@ -118,104 +53,92 @@ export default {
|
|
|
118
53
|
| Prop | Тип | За замовчуванням | Опис |
|
|
119
54
|
|------|-----|------------------|------|
|
|
120
55
|
| `title` | `String` | `''` | Заголовок сторінки |
|
|
121
|
-
| `subtitle` | `String` | `''` | Підзаголовок
|
|
122
|
-
| `showBackButton` | `Boolean` | `true` | Показувати кнопку "Назад" (
|
|
123
|
-
| `backButtonTitle` | `String` | `'Назад'` | Tooltip
|
|
56
|
+
| `subtitle` | `String` | `''` | Підзаголовок |
|
|
57
|
+
| `showBackButton` | `Boolean` | `true` | Показувати кнопку "Назад" (тільки в iframe) |
|
|
58
|
+
| `backButtonTitle` | `String` | `'Назад'` | Tooltip кнопки "Назад" |
|
|
59
|
+
| `backEvent` | `Function` | `null` | Кастомна функція для кнопки "Назад" (замість iframe exit) |
|
|
60
|
+
| `dropdownItems` | `Array` | `[]` | Список нещодавніх розділів `[{ name, path, lastVisit }]` |
|
|
61
|
+
| `dropdownTitle` | `String` | `'Останні відвідані розділи'` | Заголовок дропдауну |
|
|
62
|
+
| `visitLabel` | `String` | `'Останнє відвідування'` | Підпис часу в дропдауні |
|
|
63
|
+
| `trackPageName` | `String` | `''` | Назва сторінки для трекінгу відвідувань |
|
|
64
|
+
| `trackPagePath` | `String` | `''` | Шлях сторінки для трекінгу |
|
|
65
|
+
| `appId` | `String` | `''` | Ідентифікатор додатку для iframe bridge |
|
|
124
66
|
|
|
125
67
|
#### Slots
|
|
126
68
|
|
|
127
69
|
| Slot | Опис |
|
|
128
70
|
|------|------|
|
|
129
|
-
| `default` |
|
|
130
|
-
| `title` | Кастомний заголовок
|
|
131
|
-
| `subtitle` | Кастомний підзаголовок
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
#### Приклади
|
|
135
|
-
|
|
136
|
-
**Мінімальний**
|
|
71
|
+
| `default` | Кнопки та елементи справа |
|
|
72
|
+
| `title` | Кастомний заголовок |
|
|
73
|
+
| `subtitle` | Кастомний підзаголовок |
|
|
137
74
|
|
|
138
|
-
|
|
139
|
-
<Header title="Користувачі" />
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
**З кнопками**
|
|
75
|
+
#### Events
|
|
143
76
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
</Header>
|
|
149
|
-
```
|
|
77
|
+
| Event | Опис |
|
|
78
|
+
|-------|------|
|
|
79
|
+
| `back` | Клік на кнопку "Назад" |
|
|
80
|
+
| `navigate` | Вибір розділу з дропдауну |
|
|
150
81
|
|
|
151
82
|
---
|
|
152
83
|
|
|
153
84
|
### Modal
|
|
154
85
|
|
|
155
|
-
Модальне вікно в
|
|
86
|
+
Модальне вікно з оверлеєм, шапкою, скролом у тілі та опціональним футером. Монтується в `<body>`.
|
|
156
87
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
```js
|
|
160
|
-
// Vue 3
|
|
161
|
-
import { Modal } from '@skyservice-developers/vue-dev-kit'
|
|
88
|
+
```vue
|
|
89
|
+
<button @click="show = true">Відкрити</button>
|
|
162
90
|
|
|
163
|
-
|
|
164
|
-
|
|
91
|
+
<Modal v-model="show" title="Заголовок" subtitle="Підзаголовок">
|
|
92
|
+
<p>Контент модального вікна</p>
|
|
93
|
+
<template #footer>
|
|
94
|
+
<button @click="show = false">Закрити</button>
|
|
95
|
+
</template>
|
|
96
|
+
</Modal>
|
|
165
97
|
```
|
|
166
98
|
|
|
167
|
-
####
|
|
99
|
+
#### Props
|
|
168
100
|
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
101
|
+
| Prop | Тип | За замовчуванням | Опис |
|
|
102
|
+
|------|-----|------------------|------|
|
|
103
|
+
| `modelValue` | `Boolean` | `false` | Стан відкриття (v-model) |
|
|
104
|
+
| `title` | `String` | `''` | Заголовок |
|
|
105
|
+
| `subtitle` | `String` | `''` | Підзаголовок |
|
|
106
|
+
| `closeTitle` | `String` | `'Закрити'` | Tooltip кнопки закриття |
|
|
107
|
+
| `closeOnOverlay` | `Boolean` | `true` | Закривати при кліку на оверлей |
|
|
108
|
+
| `closeOnEsc` | `Boolean` | `true` | Закривати при натисканні Esc |
|
|
109
|
+
| `width` | `String` | `'100%'` | Ширина модалки |
|
|
110
|
+
| `height` | `String` | `'100%'` | Висота модалки |
|
|
111
|
+
|
|
112
|
+
#### Slots
|
|
173
113
|
|
|
174
|
-
|
|
175
|
-
|
|
114
|
+
| Slot | Опис |
|
|
115
|
+
|------|------|
|
|
116
|
+
| `default` | Основний контент |
|
|
117
|
+
| `footer` | Футер з кнопками |
|
|
176
118
|
|
|
177
|
-
|
|
178
|
-
<button @click="showModal = false">Закрити</button>
|
|
179
|
-
</template>
|
|
180
|
-
</Modal>
|
|
181
|
-
</template>
|
|
119
|
+
#### Events
|
|
182
120
|
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
121
|
+
| Event | Опис |
|
|
122
|
+
|-------|------|
|
|
123
|
+
| `update:modelValue` | Зміна стану |
|
|
124
|
+
| `close` | Закриття модалки |
|
|
186
125
|
|
|
187
|
-
|
|
188
|
-
</script>
|
|
189
|
-
```
|
|
126
|
+
---
|
|
190
127
|
|
|
191
|
-
|
|
192
|
-
```vue
|
|
193
|
-
<template>
|
|
194
|
-
<div>
|
|
195
|
-
<button @click="showModal = true">Відкрити</button>
|
|
128
|
+
### Dialog
|
|
196
129
|
|
|
197
|
-
|
|
198
|
-
<p>Контент модального вікна</p>
|
|
130
|
+
Повноекранний діалог. Є два стилі: `next` (кнопка "Назад") та `classic` (кнопка ×). Якщо `mode` не вказано — визначається автоматично за URL-параметром `?rocketMode=`.
|
|
199
131
|
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
132
|
+
```vue
|
|
133
|
+
<Dialog v-model="show" mode="next" title="Новий товар" subtitle="Заповніть дані">
|
|
134
|
+
<div style="padding: 20px">
|
|
135
|
+
<input placeholder="Назва" />
|
|
204
136
|
</div>
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
<
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
export default {
|
|
211
|
-
components: { Modal },
|
|
212
|
-
data() {
|
|
213
|
-
return {
|
|
214
|
-
showModal: false
|
|
215
|
-
}
|
|
216
|
-
}
|
|
217
|
-
}
|
|
218
|
-
</script>
|
|
137
|
+
<template #buttons>
|
|
138
|
+
<button @click="show = false">Скасувати</button>
|
|
139
|
+
<button @click="save">Зберегти</button>
|
|
140
|
+
</template>
|
|
141
|
+
</Dialog>
|
|
219
142
|
```
|
|
220
143
|
|
|
221
144
|
#### Props
|
|
@@ -223,83 +146,149 @@ export default {
|
|
|
223
146
|
| Prop | Тип | За замовчуванням | Опис |
|
|
224
147
|
|------|-----|------------------|------|
|
|
225
148
|
| `modelValue` | `Boolean` | `false` | Стан відкриття (v-model) |
|
|
226
|
-
| `title` | `String` | `''` | Заголовок
|
|
149
|
+
| `title` | `String` | `''` | Заголовок |
|
|
227
150
|
| `subtitle` | `String` | `''` | Підзаголовок |
|
|
228
|
-
| `
|
|
229
|
-
| `
|
|
230
|
-
| `closeOnEsc` | `Boolean` | `true` | Закривати при
|
|
231
|
-
|
|
232
|
-
#### Events
|
|
233
|
-
|
|
234
|
-
| Event | Опис |
|
|
235
|
-
|-------|------|
|
|
236
|
-
| `update:modelValue` | Зміна стану відкриття |
|
|
237
|
-
| `close` | Закриття модального вікна |
|
|
151
|
+
| `mode` | `String` | `null` | `'next'` \| `'classic'` \| `null` (авто) |
|
|
152
|
+
| `closeText` | `String` | `''` | Текст кнопки закриття |
|
|
153
|
+
| `closeOnEsc` | `Boolean` | `true` | Закривати при Esc |
|
|
154
|
+
| `zIndex` | `Number\|String` | `null` | Кастомний z-index |
|
|
238
155
|
|
|
239
156
|
#### Slots
|
|
240
157
|
|
|
241
158
|
| Slot | Опис |
|
|
242
159
|
|------|------|
|
|
243
|
-
| `default` | Основний контент
|
|
244
|
-
| `
|
|
160
|
+
| `default` | Основний контент |
|
|
161
|
+
| `buttons` | Кнопки у футері |
|
|
245
162
|
|
|
163
|
+
#### Events
|
|
246
164
|
|
|
247
|
-
|
|
165
|
+
| Event | Опис |
|
|
166
|
+
|-------|------|
|
|
167
|
+
| `update:modelValue` | Зміна стану |
|
|
168
|
+
| `close` | Закриття |
|
|
169
|
+
| `save` | Підтвердження |
|
|
248
170
|
|
|
249
|
-
|
|
171
|
+
---
|
|
250
172
|
|
|
251
|
-
|
|
252
|
-
<Modal v-model="isOpen" title="Підтвердження">
|
|
253
|
-
<p>Ви впевнені?</p>
|
|
173
|
+
### SkyButton
|
|
254
174
|
|
|
255
|
-
|
|
256
|
-
<button @click="isOpen = false">Скасувати</button>
|
|
257
|
-
<button @click="confirm">Підтвердити</button>
|
|
258
|
-
</template>
|
|
259
|
-
</Modal>
|
|
260
|
-
```
|
|
261
|
-
|
|
262
|
-
---
|
|
175
|
+
Кнопка з чотирма варіантами, станами loading/disabled, режимами block та icon.
|
|
263
176
|
|
|
264
|
-
|
|
177
|
+
```vue
|
|
178
|
+
<SkyButton variant="primary" @click="save">Зберегти</SkyButton>
|
|
179
|
+
<SkyButton variant="danger" :loading="deleting" @click="del">Видалити</SkyButton>
|
|
180
|
+
<SkyButton variant="outline" disabled>Недоступно</SkyButton>
|
|
181
|
+
<SkyButton variant="secondary" block>На всю ширину</SkyButton>
|
|
182
|
+
|
|
183
|
+
<!-- Іконка -->
|
|
184
|
+
<SkyButton variant="primary" icon title="Додати">
|
|
185
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
186
|
+
<path d="M8 2v12M2 8h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
187
|
+
</svg>
|
|
188
|
+
</SkyButton>
|
|
189
|
+
```
|
|
265
190
|
|
|
266
|
-
|
|
191
|
+
#### Props
|
|
267
192
|
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
193
|
+
| Prop | Тип | За замовчуванням | Опис |
|
|
194
|
+
|------|-----|------------------|------|
|
|
195
|
+
| `variant` | `String` | `'primary'` | `'primary'` \| `'danger'` \| `'secondary'` \| `'outline'` |
|
|
196
|
+
| `loading` | `Boolean` | `false` | Показує спінер, блокує клік |
|
|
197
|
+
| `disabled` | `Boolean` | `false` | Вимкнена кнопка |
|
|
198
|
+
| `block` | `Boolean` | `false` | Повна ширина |
|
|
199
|
+
| `icon` | `Boolean` | `false` | Квадратна кнопка для іконки |
|
|
200
|
+
|
|
201
|
+
#### CSS змінні
|
|
202
|
+
|
|
203
|
+
```css
|
|
204
|
+
--sky-btn-padding: 16px 20px
|
|
205
|
+
--sky-btn-radius: 6px
|
|
206
|
+
--sky-btn-font-size: 14px
|
|
207
|
+
--sky-btn-font-weight: 500
|
|
208
|
+
|
|
209
|
+
--sky-btn-primary-bg: #24973f
|
|
210
|
+
--sky-btn-danger-bg: #dc2626
|
|
211
|
+
--sky-btn-secondary-bg: #f3f4f6
|
|
212
|
+
--sky-btn-outline-bg: transparent
|
|
271
213
|
```
|
|
272
214
|
|
|
273
215
|
---
|
|
274
216
|
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
### Vue 2: Модальні вікна не відображаються
|
|
217
|
+
### SkySelect
|
|
278
218
|
|
|
279
|
-
|
|
219
|
+
Кастомний select з дропдауном, клавіатурною навігацією та підтримкою рядків і об'єктів як опцій.
|
|
280
220
|
|
|
281
|
-
```
|
|
282
|
-
|
|
221
|
+
```vue
|
|
222
|
+
<!-- Об'єкти -->
|
|
223
|
+
<SkySelect
|
|
224
|
+
v-model="selected"
|
|
225
|
+
:options="[
|
|
226
|
+
{ label: 'Готівка', value: 'cash' },
|
|
227
|
+
{ label: 'Картка', value: 'card' },
|
|
228
|
+
]"
|
|
229
|
+
placeholder="Оберіть спосіб оплати"
|
|
230
|
+
/>
|
|
231
|
+
|
|
232
|
+
<!-- Рядки -->
|
|
233
|
+
<SkySelect v-model="selected" :options="['Кг', 'Шт', 'Л']" />
|
|
234
|
+
|
|
235
|
+
<!-- На всю ширину -->
|
|
236
|
+
<SkySelect v-model="selected" :options="options" block />
|
|
283
237
|
```
|
|
284
238
|
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
Якщо TypeScript не знаходить типи, додайте в `tsconfig.json`:
|
|
239
|
+
#### Props
|
|
288
240
|
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
241
|
+
| Prop | Тип | За замовчуванням | Опис |
|
|
242
|
+
|------|-----|------------------|------|
|
|
243
|
+
| `modelValue` / `value` | `any` | `null` | Поточне значення (v-model) |
|
|
244
|
+
| `options` | `Array` | `[]` | `Array<{ label, value } \| string>` |
|
|
245
|
+
| `placeholder` | `String` | `''` | Текст-заглушка |
|
|
246
|
+
| `disabled` | `Boolean` | `false` | Вимкнений стан |
|
|
247
|
+
| `block` | `Boolean` | `false` | Повна ширина |
|
|
248
|
+
| `teleport` | `Boolean` | `false` | Рендерить дропдаун в `<body>` (для модалок/overflow:hidden контейнерів) |
|
|
249
|
+
|
|
250
|
+
#### Клавіатура
|
|
251
|
+
|
|
252
|
+
| Клавіша | Дія |
|
|
253
|
+
|---------|-----|
|
|
254
|
+
| `Enter` / `Space` | Відкрити дропдаун |
|
|
255
|
+
| `↑` / `↓` | Навігація по опціях |
|
|
256
|
+
| `Enter` | Вибрати поточну опцію |
|
|
257
|
+
| `Esc` | Закрити дропдаун |
|
|
258
|
+
|
|
259
|
+
#### CSS змінні
|
|
260
|
+
|
|
261
|
+
```css
|
|
262
|
+
--sky-select-padding: 10px 14px
|
|
263
|
+
--sky-select-radius: 6px
|
|
264
|
+
--sky-select-font-size: 14px
|
|
265
|
+
--sky-select-border: 1px solid #d1d5db
|
|
266
|
+
--sky-select-dropdown-shadow: 0 4px 12px rgba(0,0,0,0.1)
|
|
267
|
+
--sky-select-dropdown-max-height: 220px
|
|
268
|
+
--sky-select-option-hover-bg: #f3f4f6
|
|
269
|
+
--sky-select-option-selected-color: #24973f
|
|
295
270
|
```
|
|
296
271
|
|
|
297
|
-
|
|
272
|
+
---
|
|
298
273
|
|
|
299
|
-
|
|
274
|
+
## Теміzація
|
|
300
275
|
|
|
301
|
-
|
|
302
|
-
|
|
276
|
+
Всі компоненти підтримують кастомізацію через CSS змінні. Перевизначайте їх глобально або локально:
|
|
277
|
+
|
|
278
|
+
```css
|
|
279
|
+
/* Глобально */
|
|
280
|
+
:root {
|
|
281
|
+
--sky-btn-primary-bg: #6366f1;
|
|
282
|
+
--sky-btn-radius: 8px;
|
|
283
|
+
--sky-select-radius: 8px;
|
|
284
|
+
--sky-modal-z-index: 1000;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
/* Локально для конкретного блоку */
|
|
288
|
+
.my-form {
|
|
289
|
+
--sky-btn-padding: 12px 16px;
|
|
290
|
+
--sky-select-padding: 8px 12px;
|
|
291
|
+
}
|
|
303
292
|
```
|
|
304
293
|
|
|
305
294
|
---
|
|
@@ -307,19 +296,15 @@ npm install @skyservice-developers/vue-dev-kit --legacy-peer-deps
|
|
|
307
296
|
## Розробка
|
|
308
297
|
|
|
309
298
|
```bash
|
|
310
|
-
# Встановлення залежностей
|
|
311
299
|
npm install --legacy-peer-deps
|
|
312
300
|
|
|
313
|
-
#
|
|
314
|
-
npm run
|
|
315
|
-
|
|
316
|
-
# Білд для Vue 3
|
|
317
|
-
npm run build:vue3
|
|
301
|
+
# Playground (live preview компонентів)
|
|
302
|
+
npm run playground
|
|
318
303
|
|
|
319
|
-
# Білд
|
|
304
|
+
# Білд
|
|
320
305
|
npm run build
|
|
321
306
|
```
|
|
322
307
|
|
|
323
308
|
## Ліцензія
|
|
324
309
|
|
|
325
|
-
MIT © Skyservice-POS
|
|
310
|
+
MIT © Skyservice-POS
|
package/dist/vue2/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.sky-header-container[data-v-24fdfba4]{width:100%;min-height:var(--sky-header-min-height, 82px);background-color:var(--sky-header-bg, transparent);display:flex;flex-direction:row;padding:var(--sky-header-padding, 10px);border-bottom:1px solid var(--sky-header-border-color, #dee2e6);z-index:var(--sky-header-z-index, 4);position:relative}.topmenubox[data-v-24fdfba4]{width:100%;display:flex;padding:4px;justify-content:space-between;align-items:center;background-color:transparent}.header-left[data-v-24fdfba4]{display:flex;align-items:center}.header-left>*+*[data-v-24fdfba4]{margin-left:12px}.titleAndDesc[data-v-24fdfba4]{display:flex;flex-direction:column;position:relative}.notPadding[data-v-24fdfba4]{margin:0;padding:0;font-size:var(--sky-header-title-size, 18px);font-weight:var(--sky-header-title-weight, 500);color:var(--sky-header-title-color, #252525);line-height:1.5;-webkit-user-select:none;user-select:none;display:flex;align-items:center;flex-wrap:nowrap}.topmenu-title[data-v-24fdfba4]{white-space:pre-line}.title-dropdown-toggle[data-v-24fdfba4]{display:flex;flex-direction:row;padding:0;margin:0;background:transparent;border:none;text-align:left;font:inherit;color:inherit}.title-dropdown-toggle-active[data-v-24fdfba4]{cursor:pointer}.arrow[data-v-24fdfba4]{width:12px;position:relative;margin-left:5px;flex-shrink:0;transition:transform .25s ease;color:var(--sky-header-title-color, #252525)}.arrow.open[data-v-24fdfba4]{transform:rotate(180deg)}.title-dropdown[data-v-24fdfba4]{position:absolute;top:100%;left:0;min-width:240px;background:white;border-radius:5px;box-shadow:0 1px 12px #0000001a;border:none;z-index:10;padding:4px 0;margin-top:4px}.title-dropdown-header[data-v-24fdfba4]{padding:4px 24px;font-size:13px;color:#6c757d}.title-dropdown-divider[data-v-24fdfba4]{height:0;margin:4px 0;border-top:1px solid #e9ecef}.title-dropdown-item[data-v-24fdfba4]{padding:4px 24px;cursor:pointer;transition:background-color .1s}.title-dropdown-item[data-v-24fdfba4]:hover{background-color:#f8f9fa}.title-dropdown-item[data-v-24fdfba4]:active{background-color:#e9ecef}.pageName[data-v-24fdfba4]{padding-bottom:0;margin:0;font-weight:500;font-size:14px}.pageVisit[data-v-24fdfba4]{color:gray;font-weight:400;font-size:11px}.topmenu-description[data-v-24fdfba4]{margin:0 0 5px;color:var(--sky-header-subtitle-color, #5d5d5d);font-size:13px;font-weight:400;line-height:1.5}.topmenubox-button[data-v-24fdfba4]{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-back[data-v-24fdfba4]{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:transparent;border:none;cursor:pointer;border-radius:6px;transition:background-color .2s;color:var(--sky-header-back-btn-color, #374151)}.btn-back img[data-v-24fdfba4],.btn-back svg[data-v-24fdfba4]{display:block}.btn-back[data-v-24fdfba4]:hover{background-color:var(--sky-header-back-btn-hover-bg, #f8f9fa)}.btn-back[data-v-24fdfba4]:active{background-color:var(--sky-header-back-btn-active-bg, #e9ecef)}@media (max-width: 499px){.topmenu-description[data-v-24fdfba4]{display:none}.notPadding[data-v-24fdfba4]{font-size:13px}}@media (min-width: 500px) and (max-width: 1099px){.topmenu-description[data-v-24fdfba4]{font-size:11px}}@supports (padding-top: env(safe-area-inset-top)){.sky-header-container[data-v-24fdfba4]{padding-top:calc(10px + env(safe-area-inset-top))}}.sky-modal-overlay[data-v-664a61d1]{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:var(--sky-modal-z-index, 9998);display:flex;justify-content:center;align-items:center}.sky-modal[data-v-664a61d1]{background:var(--sky-modal-bg, white);border-radius:var(--sky-modal-radius, 0);box-shadow:0 1px 3px #0000004d,0 1px 2px #0000003d;display:flex;flex-direction:column;max-width:100%;max-height:100%}.sky-modal-header[data-v-664a61d1]{display:flex;align-items:center;padding:var(--sky-modal-header-padding, 10px 14px);border-bottom:1px solid var(--sky-modal-border-color, #dee2e6);flex-shrink:0}.sky-modal-back[data-v-664a61d1]{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:transparent;border:none;cursor:pointer;border-radius:6px;transition:background-color .2s;color:var(--sky-modal-back-color, #374151);margin-right:12px}.sky-modal-back svg[data-v-664a61d1]{display:block}.sky-modal-back[data-v-664a61d1]:hover{background-color:var(--sky-modal-back-hover-bg, #f8f9fa)}.sky-modal-back[data-v-664a61d1]:active{background-color:var(--sky-modal-back-active-bg, #e9ecef)}.sky-modal-title-wrapper[data-v-664a61d1]{flex:1;min-width:0}.sky-modal-title[data-v-664a61d1]{margin:0;font-size:var(--sky-modal-title-size, 18px);font-weight:var(--sky-modal-title-weight, 500);color:var(--sky-modal-title-color, #252525);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sky-modal-subtitle[data-v-664a61d1]{font-size:var(--sky-modal-subtitle-size, 14px);color:var(--sky-modal-subtitle-color, #6c757d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sky-modal-body[data-v-664a61d1]{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--sky-modal-body-padding, 14px)}.sky-modal-footer[data-v-664a61d1]{padding:var(--sky-modal-footer-padding, 10px 14px);border-top:1px solid var(--sky-modal-border-color, #dee2e6);display:flex;justify-content:flex-end;flex-shrink:0}.sky-modal-footer>*+*[data-v-664a61d1]{margin-left:10px}@media (min-width: 768px){.sky-modal[data-v-664a61d1]{border-radius:var(--sky-modal-radius, 8px)}}@supports (padding-top: env(safe-area-inset-top)){.sky-modal-header[data-v-664a61d1]{padding-top:calc(10px + env(safe-area-inset-top))}.sky-modal-footer[data-v-664a61d1]{padding-bottom:calc(10px + env(safe-area-inset-bottom))}.sky-modal-body[data-v-664a61d1]:last-child{padding-bottom:calc(14px + env(safe-area-inset-bottom))}}.sky-dialogbox-classic{display:block;position:fixed;padding:0;top:0;left:0;width:100%;height:100%;z-index:var(--sky-dialog-z-index, 9998);background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.sky-dialog-overlay[data-v-9d8ed3a8]{display:flex;justify-content:center;align-items:center;position:fixed;padding:0;top:0;left:0;width:100%;height:100%;z-index:9999}.sky-dialog-content[data-v-9d8ed3a8]{background:var(--sky-dialog-bg, white);width:100%;height:100%;border-radius:var(--sky-dialog-radius, 5px);box-shadow:0 1px 3px #0000004d,0 1px 2px #0000003d}.sky-dialog-title[data-v-9d8ed3a8]{max-width:calc(100% - 80px);font-size:var(--sky-dialog-title-size, 13pt);padding:24px 0 24px 24px;float:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sky-dialog-title-color, #252525)}.sky-dialog-subtitle[data-v-9d8ed3a8]{display:block;font-size:var(--sky-dialog-subtitle-size, 12pt);line-height:24px;color:var(--sky-dialog-subtitle-color, #6c757d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sky-dialog-close[data-v-9d8ed3a8]{cursor:pointer;font-size:16pt;margin:15px;padding:17px;float:right;border-radius:50%;width:50px;height:50px;background:transparent;border:none;display:flex;align-items:center;justify-content:center;color:var(--sky-dialog-close-color, #333);transition:background-color .2s}.sky-dialog-close[data-v-9d8ed3a8]:hover{background-color:var(--sky-dialog-close-hover-bg, #f0f0f0)}.sky-dialog-clearfix[data-v-9d8ed3a8]{clear:both}.sky-dialog-paper[data-v-9d8ed3a8]{height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:relative}.sky-dialog-swipe-area[data-v-9d8ed3a8]{position:absolute;width:35px;height:100%;left:0}.sky-dialog-footer[data-v-9d8ed3a8]{padding:5px 10px;display:flex;justify-content:center;width:100%;transform:translateY(-52px)}.sky-dialog-footer>*+*[data-v-9d8ed3a8]{margin-left:10px}.sky-dialog-footer[data-v-9d8ed3a8]>:deep(*){flex:1;min-width:0}.sky-dialog-footer[data-v-9d8ed3a8]:has(>:deep(*:only-child))>:deep(*){max-width:100%}.sky-dialog-footer[data-v-9d8ed3a8]:has(>:deep(*:nth-child(2)):not(:has(>:deep(*:nth-child(3)))))>:deep(*){flex:1 1 50%}@media only screen and (min-width: 1400px){.sky-dialog-content[data-v-9d8ed3a8]{width:75%;margin:0 auto}}@media screen and (min-width: 710px){.sky-dialog-paper[data-v-9d8ed3a8]{height:calc(100% - 150px);max-height:calc(100% - 150px);background-color:#fff;margin:0 10px 60px;border-radius:5px}.sky-dialog-paper-no-footer[data-v-9d8ed3a8]{height:calc(100% - 70px);max-height:calc(100% - 70px);margin-bottom:10px}.sky-dialogbox[data-v-9d8ed3a8],.sky-dialog-overlay[data-v-9d8ed3a8]{padding:10px}}@media screen and (max-width: 709px){.sky-dialog-paper[data-v-9d8ed3a8]{height:calc(100% - 142px);max-height:calc(100% - 142px);background-color:#fff;margin:0 10px 10px;border-radius:5px;max-width:100vw!important}.sky-dialog-paper-no-footer[data-v-9d8ed3a8]{height:calc(100% - 60px);max-height:calc(100% - 60px)}.sky-dialog-footer[data-v-9d8ed3a8]{transform:translateY(-6px)}}@media screen and (max-width: 500px){.sky-dialog-subtitle[data-v-9d8ed3a8]{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sky-dialog-title-with-subtitle[data-v-9d8ed3a8]{padding:12px 24px!important}}@media screen and (max-width: 374px){.sky-dialog-subtitle[data-v-9d8ed3a8]{font-size:9pt}}@supports (padding-top: env(safe-area-inset-top)){.sky-dialog-paper[data-v-9d8ed3a8]{height:calc(100% - 150px - env(safe-area-inset-top))}.sky-dialog-paper-no-footer[data-v-9d8ed3a8]{height:calc(100% - 60px - env(safe-area-inset-top))}.sky-dialog-footer[data-v-9d8ed3a8]{padding-bottom:calc(env(safe-area-inset-bottom) + 8px)}}@supports (padding-top: env(safe-area-inset-top)){.sky-dialog-title[data-v-9d8ed3a8]{padding-top:calc(24px + env(safe-area-inset-top))}.sky-dialog-close[data-v-9d8ed3a8]{margin-top:calc(15px + env(safe-area-inset-top))}.sky-dialog-paper[data-v-9d8ed3a8]{padding-bottom:env(safe-area-inset-bottom)}}.sky-dialogbox-next{display:block;position:fixed;padding:0;top:0;left:0;width:100%;height:100%;z-index:var(--sky-dialog-z-index, 9998);background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.sky-dialog-overlay[data-v-4c07463d]{display:flex;justify-content:center;align-items:center;position:fixed;padding:0;top:0;left:0;width:100%;height:100%;z-index:9999}.sky-dialog-content[data-v-4c07463d]{background:var(--sky-dialog-bg, white);width:100%;height:100%;box-shadow:0 1px 3px #0000004d,0 1px 2px #0000003d;display:flex;flex-direction:column}.sky-dialog-header[data-v-4c07463d]{display:flex;align-items:center;padding:10px 14px}.sky-dialog-back[data-v-4c07463d]{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:transparent;border:none;cursor:pointer;border-radius:6px;color:var(--sky-dialog-back-color, #374151);transition:background-color .2s;margin-right:12px;flex-shrink:0}.sky-dialog-back svg[data-v-4c07463d]{display:block}.sky-dialog-back[data-v-4c07463d]:hover{background-color:var(--sky-dialog-back-hover-bg, #f8f9fa)}.sky-dialog-back[data-v-4c07463d]:active{background-color:var(--sky-dialog-back-active-bg, #e9ecef)}.sky-dialog-title[data-v-4c07463d]{font-size:var(--sky-dialog-title-size, 13pt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sky-dialog-title-color, #252525);min-width:0}.sky-dialog-title-with-subtitle[data-v-4c07463d]{line-height:1.2}.sky-dialog-subtitle[data-v-4c07463d]{display:block;font-size:var(--sky-dialog-subtitle-size, 12pt);line-height:24px;color:var(--sky-dialog-subtitle-color, #6c757d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sky-dialog-paper[data-v-4c07463d]{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:relative}.sky-dialog-swipe-area[data-v-4c07463d]{position:absolute;width:35px;height:100%;left:0}.sky-dialog-footer[data-v-4c07463d]{padding:5px 10px;display:flex;justify-content:center;width:100%;flex-shrink:0}.sky-dialog-footer>*+*[data-v-4c07463d]{margin-left:10px}.sky-dialog-footer[data-v-4c07463d]>:deep(*){flex:1;min-width:0}.sky-dialog-footer[data-v-4c07463d]:has(>:deep(*:only-child))>:deep(*){max-width:100%}.sky-dialog-footer[data-v-4c07463d]:has(>:deep(*:nth-child(2)):not(:has(>:deep(*:nth-child(3)))))>:deep(*){flex:1 1 50%}@media only screen and (min-width: 1400px){.sky-dialog-content[data-v-4c07463d]{width:100%;margin:0 auto}}@media screen and (min-width: 710px){.sky-dialog-paper[data-v-4c07463d]{background-color:#fff;margin:0 10px 10px}}@media screen and (max-width: 709px){.sky-dialog-paper[data-v-4c07463d]{background-color:#fff;margin:0 10px 10px;max-width:100vw!important}}@media screen and (max-width: 500px){.sky-dialog-subtitle[data-v-4c07463d]{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sky-dialog-title-with-subtitle[data-v-4c07463d]{padding:12px 24px!important}}@media screen and (max-width: 374px){.sky-dialog-subtitle[data-v-4c07463d]{font-size:9pt}}@supports (padding-top: env(safe-area-inset-top)){.sky-dialog-footer[data-v-4c07463d]{padding-bottom:calc(env(safe-area-inset-bottom) + 5px)}}@supports (padding-top: env(safe-area-inset-top)){.sky-dialog-header[data-v-4c07463d]{padding-top:calc(10px + env(safe-area-inset-top))}.sky-dialog-paper[data-v-4c07463d]{padding-bottom:env(safe-area-inset-bottom)}}.sky-btn[data-v-4ee18038]{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:var(--sky-btn-padding, 16px 20px);border:var(--sky-btn-border, none);border-radius:var(--sky-btn-radius, 6px);font-size:var(--sky-btn-font-size, 14px);font-weight:var(--sky-btn-font-weight, 500);line-height:1;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none}.sky-btn-icon[data-v-4ee18038]{padding:var(--sky-btn-icon-padding, 10px);border-radius:var(--sky-btn-icon-radius, 6px)}.sky-btn-block[data-v-4ee18038]{width:100%}.sky-btn[data-v-4ee18038]:disabled{opacity:.6;cursor:not-allowed}.sky-btn-primary[data-v-4ee18038]{background:var(--sky-btn-primary-bg, #24973f);color:var(--sky-btn-primary-color, #fff)}.sky-btn-primary[data-v-4ee18038]:hover:not(:disabled){background:var(--sky-btn-primary-hover-bg, #1e7a33)}.sky-btn-primary[data-v-4ee18038]:active:not(:disabled){background:var(--sky-btn-primary-active-bg, #196b2c)}.sky-btn-danger[data-v-4ee18038]{background:var(--sky-btn-danger-bg, #dc2626);color:var(--sky-btn-danger-color, #fff)}.sky-btn-danger[data-v-4ee18038]:hover:not(:disabled){background:var(--sky-btn-danger-hover-bg, #b91c1c)}.sky-btn-danger[data-v-4ee18038]:active:not(:disabled){background:var(--sky-btn-danger-active-bg, #991b1b)}.sky-btn-secondary[data-v-4ee18038]{background:var(--sky-btn-secondary-bg, #f3f4f6);color:var(--sky-btn-secondary-color, #374151)}.sky-btn-secondary[data-v-4ee18038]:hover:not(:disabled){background:var(--sky-btn-secondary-hover-bg, #e5e7eb)}.sky-btn-secondary[data-v-4ee18038]:active:not(:disabled){background:var(--sky-btn-secondary-active-bg, #d1d5db)}.sky-btn-outline[data-v-4ee18038]{background:var(--sky-btn-outline-bg, transparent);color:var(--sky-btn-outline-color, #374151);border:var(--sky-btn-border, 1px solid #d1d5db)}.sky-btn-outline[data-v-4ee18038]:hover:not(:disabled){background:var(--sky-btn-outline-hover-bg, #f3f4f6)}.sky-btn-outline[data-v-4ee18038]:active:not(:disabled){background:var(--sky-btn-outline-active-bg, #e5e7eb)}.sky-btn-spinner[data-v-4ee18038]{width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:sky-btn-spin-data-v-4ee18038 .6s linear infinite;flex-shrink:0}@keyframes sky-btn-spin-data-v-4ee18038{to{transform:rotate(360deg)}}.sky-select[data-v-73cd1848]{position:relative;display:inline-block;font-size:var(--sky-select-font-size, 14px)}.sky-select-block[data-v-73cd1848]{display:block;width:100%}.sky-select-block .sky-select-trigger[data-v-73cd1848]{width:100%}.sky-select-trigger[data-v-73cd1848]{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:var(--sky-select-padding, 10px 14px);background:var(--sky-select-bg, #fff);border:var(--sky-select-border, 1px solid #d1d5db);border-radius:var(--sky-select-radius, 6px);font-size:inherit;font-weight:var(--sky-select-font-weight, 400);color:var(--sky-select-color, #374151);cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;white-space:nowrap}.sky-select-trigger[data-v-73cd1848]:hover:not(:disabled){border-color:var(--sky-select-border-hover, #9ca3af)}.sky-select-open .sky-select-trigger[data-v-73cd1848]{border-color:var(--sky-select-border-focus, #6b7280);outline:none}.sky-select-trigger[data-v-73cd1848]:focus-visible{outline:2px solid var(--sky-select-focus-ring, #24973f);outline-offset:2px}.sky-select-disabled .sky-select-trigger[data-v-73cd1848]{opacity:.6;cursor:not-allowed}.sky-select-value[data-v-73cd1848]{overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.sky-select-placeholder[data-v-73cd1848]{color:var(--sky-select-placeholder-color, #9ca3af)}.sky-select-chevron[data-v-73cd1848]{width:16px;height:16px;flex-shrink:0;color:var(--sky-select-chevron-color, #6b7280);transition:transform .15s ease}.sky-select-open .sky-select-chevron[data-v-73cd1848]{transform:rotate(180deg)}.sky-select-dropdown[data-v-73cd1848]{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:var(--sky-select-dropdown-z-index, 100);background:var(--sky-select-dropdown-bg, #fff);border:var(--sky-select-dropdown-border, 1px solid #d1d5db);border-radius:var(--sky-select-dropdown-radius, 6px);box-shadow:var(--sky-select-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, .1));max-height:var(--sky-select-dropdown-max-height, 220px);overflow-y:auto;padding:4px}.sky-select-option[data-v-73cd1848]{display:flex;align-items:center;justify-content:space-between;padding:var(--sky-select-option-padding, 9px 10px);border-radius:var(--sky-select-option-radius, 4px);cursor:pointer;color:var(--sky-select-option-color, #374151)}.sky-select-option-focused[data-v-73cd1848],.sky-select-option[data-v-73cd1848]:hover{background:var(--sky-select-option-hover-bg, #f3f4f6)}.sky-select-option-selected[data-v-73cd1848]{color:var(--sky-select-option-selected-color, #24973f);font-weight:500}.sky-select-check[data-v-73cd1848]{width:14px;height:14px;flex-shrink:0;color:var(--sky-select-check-color, #24973f)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:0}::-webkit-scrollbar-thumb:hover{background:#a8a8a8}
|
|
1
|
+
.sky-header-container[data-v-24fdfba4]{width:100%;min-height:var(--sky-header-min-height, 82px);background-color:var(--sky-header-bg, transparent);display:flex;flex-direction:row;padding:var(--sky-header-padding, 10px);border-bottom:1px solid var(--sky-header-border-color, #dee2e6);z-index:var(--sky-header-z-index, 4);position:relative}.topmenubox[data-v-24fdfba4]{width:100%;display:flex;padding:4px;justify-content:space-between;align-items:center;background-color:transparent}.header-left[data-v-24fdfba4]{display:flex;align-items:center}.header-left>*+*[data-v-24fdfba4]{margin-left:12px}.titleAndDesc[data-v-24fdfba4]{display:flex;flex-direction:column;position:relative}.notPadding[data-v-24fdfba4]{margin:0;padding:0;font-size:var(--sky-header-title-size, 18px);font-weight:var(--sky-header-title-weight, 500);color:var(--sky-header-title-color, #252525);line-height:1.5;-webkit-user-select:none;user-select:none;display:flex;align-items:center;flex-wrap:nowrap}.topmenu-title[data-v-24fdfba4]{white-space:pre-line}.title-dropdown-toggle[data-v-24fdfba4]{display:flex;flex-direction:row;padding:0;margin:0;background:transparent;border:none;text-align:left;font:inherit;color:inherit}.title-dropdown-toggle-active[data-v-24fdfba4]{cursor:pointer}.arrow[data-v-24fdfba4]{width:12px;position:relative;margin-left:5px;flex-shrink:0;transition:transform .25s ease;color:var(--sky-header-title-color, #252525)}.arrow.open[data-v-24fdfba4]{transform:rotate(180deg)}.title-dropdown[data-v-24fdfba4]{position:absolute;top:100%;left:0;min-width:240px;background:white;border-radius:5px;box-shadow:0 1px 12px #0000001a;border:none;z-index:10;padding:4px 0;margin-top:4px}.title-dropdown-header[data-v-24fdfba4]{padding:4px 24px;font-size:13px;color:#6c757d}.title-dropdown-divider[data-v-24fdfba4]{height:0;margin:4px 0;border-top:1px solid #e9ecef}.title-dropdown-item[data-v-24fdfba4]{padding:4px 24px;cursor:pointer;transition:background-color .1s}.title-dropdown-item[data-v-24fdfba4]:hover{background-color:#f8f9fa}.title-dropdown-item[data-v-24fdfba4]:active{background-color:#e9ecef}.pageName[data-v-24fdfba4]{padding-bottom:0;margin:0;font-weight:500;font-size:14px}.pageVisit[data-v-24fdfba4]{color:gray;font-weight:400;font-size:11px}.topmenu-description[data-v-24fdfba4]{margin:0 0 5px;color:var(--sky-header-subtitle-color, #5d5d5d);font-size:13px;font-weight:400;line-height:1.5}.topmenubox-button[data-v-24fdfba4]{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-back[data-v-24fdfba4]{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:transparent;border:none;cursor:pointer;border-radius:6px;transition:background-color .2s;color:var(--sky-header-back-btn-color, #374151)}.btn-back img[data-v-24fdfba4],.btn-back svg[data-v-24fdfba4]{display:block}.btn-back[data-v-24fdfba4]:hover{background-color:var(--sky-header-back-btn-hover-bg, #f8f9fa)}.btn-back[data-v-24fdfba4]:active{background-color:var(--sky-header-back-btn-active-bg, #e9ecef)}@media (max-width: 499px){.topmenu-description[data-v-24fdfba4]{display:none}.notPadding[data-v-24fdfba4]{font-size:13px}}@media (min-width: 500px) and (max-width: 1099px){.topmenu-description[data-v-24fdfba4]{font-size:11px}}@supports (padding-top: env(safe-area-inset-top)){.sky-header-container[data-v-24fdfba4]{padding-top:calc(10px + env(safe-area-inset-top))}}.sky-modal-overlay[data-v-664a61d1]{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:var(--sky-modal-z-index, 9998);display:flex;justify-content:center;align-items:center}.sky-modal[data-v-664a61d1]{background:var(--sky-modal-bg, white);border-radius:var(--sky-modal-radius, 0);box-shadow:0 1px 3px #0000004d,0 1px 2px #0000003d;display:flex;flex-direction:column;max-width:100%;max-height:100%}.sky-modal-header[data-v-664a61d1]{display:flex;align-items:center;padding:var(--sky-modal-header-padding, 10px 14px);border-bottom:1px solid var(--sky-modal-border-color, #dee2e6);flex-shrink:0}.sky-modal-back[data-v-664a61d1]{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:transparent;border:none;cursor:pointer;border-radius:6px;transition:background-color .2s;color:var(--sky-modal-back-color, #374151);margin-right:12px}.sky-modal-back svg[data-v-664a61d1]{display:block}.sky-modal-back[data-v-664a61d1]:hover{background-color:var(--sky-modal-back-hover-bg, #f8f9fa)}.sky-modal-back[data-v-664a61d1]:active{background-color:var(--sky-modal-back-active-bg, #e9ecef)}.sky-modal-title-wrapper[data-v-664a61d1]{flex:1;min-width:0}.sky-modal-title[data-v-664a61d1]{margin:0;font-size:var(--sky-modal-title-size, 18px);font-weight:var(--sky-modal-title-weight, 500);color:var(--sky-modal-title-color, #252525);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sky-modal-subtitle[data-v-664a61d1]{font-size:var(--sky-modal-subtitle-size, 14px);color:var(--sky-modal-subtitle-color, #6c757d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sky-modal-body[data-v-664a61d1]{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--sky-modal-body-padding, 14px)}.sky-modal-footer[data-v-664a61d1]{padding:var(--sky-modal-footer-padding, 10px 14px);border-top:1px solid var(--sky-modal-border-color, #dee2e6);display:flex;justify-content:flex-end;flex-shrink:0}.sky-modal-footer>*+*[data-v-664a61d1]{margin-left:10px}@media (min-width: 768px){.sky-modal[data-v-664a61d1]{border-radius:var(--sky-modal-radius, 8px)}}@supports (padding-top: env(safe-area-inset-top)){.sky-modal-header[data-v-664a61d1]{padding-top:calc(10px + env(safe-area-inset-top))}.sky-modal-footer[data-v-664a61d1]{padding-bottom:calc(10px + env(safe-area-inset-bottom))}.sky-modal-body[data-v-664a61d1]:last-child{padding-bottom:calc(14px + env(safe-area-inset-bottom))}}.sky-dialogbox-classic{display:block;position:fixed;padding:0;top:0;left:0;width:100%;height:100%;z-index:var(--sky-dialog-z-index, 9998);background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.sky-dialog-overlay[data-v-9d8ed3a8]{display:flex;justify-content:center;align-items:center;position:fixed;padding:0;top:0;left:0;width:100%;height:100%;z-index:9999}.sky-dialog-content[data-v-9d8ed3a8]{background:var(--sky-dialog-bg, white);width:100%;height:100%;border-radius:var(--sky-dialog-radius, 5px);box-shadow:0 1px 3px #0000004d,0 1px 2px #0000003d}.sky-dialog-title[data-v-9d8ed3a8]{max-width:calc(100% - 80px);font-size:var(--sky-dialog-title-size, 13pt);padding:24px 0 24px 24px;float:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sky-dialog-title-color, #252525)}.sky-dialog-subtitle[data-v-9d8ed3a8]{display:block;font-size:var(--sky-dialog-subtitle-size, 12pt);line-height:24px;color:var(--sky-dialog-subtitle-color, #6c757d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sky-dialog-close[data-v-9d8ed3a8]{cursor:pointer;font-size:16pt;margin:15px;padding:17px;float:right;border-radius:50%;width:50px;height:50px;background:transparent;border:none;display:flex;align-items:center;justify-content:center;color:var(--sky-dialog-close-color, #333);transition:background-color .2s}.sky-dialog-close[data-v-9d8ed3a8]:hover{background-color:var(--sky-dialog-close-hover-bg, #f0f0f0)}.sky-dialog-clearfix[data-v-9d8ed3a8]{clear:both}.sky-dialog-paper[data-v-9d8ed3a8]{height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:relative}.sky-dialog-swipe-area[data-v-9d8ed3a8]{position:absolute;width:35px;height:100%;left:0}.sky-dialog-footer[data-v-9d8ed3a8]{padding:5px 10px;display:flex;justify-content:center;width:100%;transform:translateY(-52px)}.sky-dialog-footer>*+*[data-v-9d8ed3a8]{margin-left:10px}.sky-dialog-footer[data-v-9d8ed3a8]>:deep(*){flex:1;min-width:0}.sky-dialog-footer[data-v-9d8ed3a8]:has(>:deep(*:only-child))>:deep(*){max-width:100%}.sky-dialog-footer[data-v-9d8ed3a8]:has(>:deep(*:nth-child(2)):not(:has(>:deep(*:nth-child(3)))))>:deep(*){flex:1 1 50%}@media only screen and (min-width: 1400px){.sky-dialog-content[data-v-9d8ed3a8]{width:75%;margin:0 auto}}@media screen and (min-width: 710px){.sky-dialog-paper[data-v-9d8ed3a8]{height:calc(100% - 150px);max-height:calc(100% - 150px);background-color:#fff;margin:0 10px 60px;border-radius:5px}.sky-dialog-paper-no-footer[data-v-9d8ed3a8]{height:calc(100% - 70px);max-height:calc(100% - 70px);margin-bottom:10px}.sky-dialogbox[data-v-9d8ed3a8],.sky-dialog-overlay[data-v-9d8ed3a8]{padding:10px}}@media screen and (max-width: 709px){.sky-dialog-paper[data-v-9d8ed3a8]{height:calc(100% - 142px);max-height:calc(100% - 142px);background-color:#fff;margin:0 10px 10px;border-radius:5px;max-width:100vw!important}.sky-dialog-paper-no-footer[data-v-9d8ed3a8]{height:calc(100% - 60px);max-height:calc(100% - 60px)}.sky-dialog-footer[data-v-9d8ed3a8]{transform:translateY(-6px)}}@media screen and (max-width: 500px){.sky-dialog-subtitle[data-v-9d8ed3a8]{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sky-dialog-title-with-subtitle[data-v-9d8ed3a8]{padding:12px 24px!important}}@media screen and (max-width: 374px){.sky-dialog-subtitle[data-v-9d8ed3a8]{font-size:9pt}}@supports (padding-top: env(safe-area-inset-top)){.sky-dialog-paper[data-v-9d8ed3a8]{height:calc(100% - 150px - env(safe-area-inset-top))}.sky-dialog-paper-no-footer[data-v-9d8ed3a8]{height:calc(100% - 60px - env(safe-area-inset-top))}.sky-dialog-footer[data-v-9d8ed3a8]{padding-bottom:calc(env(safe-area-inset-bottom) + 8px)}}@supports (padding-top: env(safe-area-inset-top)){.sky-dialog-title[data-v-9d8ed3a8]{padding-top:calc(24px + env(safe-area-inset-top))}.sky-dialog-close[data-v-9d8ed3a8]{margin-top:calc(15px + env(safe-area-inset-top))}.sky-dialog-paper[data-v-9d8ed3a8]{padding-bottom:env(safe-area-inset-bottom)}}.sky-dialogbox-next{display:block;position:fixed;padding:0;top:0;left:0;width:100%;height:100%;z-index:var(--sky-dialog-z-index, 9998);background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.sky-dialog-overlay[data-v-4c07463d]{display:flex;justify-content:center;align-items:center;position:fixed;padding:0;top:0;left:0;width:100%;height:100%;z-index:9999}.sky-dialog-content[data-v-4c07463d]{background:var(--sky-dialog-bg, white);width:100%;height:100%;box-shadow:0 1px 3px #0000004d,0 1px 2px #0000003d;display:flex;flex-direction:column}.sky-dialog-header[data-v-4c07463d]{display:flex;align-items:center;padding:10px 14px}.sky-dialog-back[data-v-4c07463d]{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:transparent;border:none;cursor:pointer;border-radius:6px;color:var(--sky-dialog-back-color, #374151);transition:background-color .2s;margin-right:12px;flex-shrink:0}.sky-dialog-back svg[data-v-4c07463d]{display:block}.sky-dialog-back[data-v-4c07463d]:hover{background-color:var(--sky-dialog-back-hover-bg, #f8f9fa)}.sky-dialog-back[data-v-4c07463d]:active{background-color:var(--sky-dialog-back-active-bg, #e9ecef)}.sky-dialog-title[data-v-4c07463d]{font-size:var(--sky-dialog-title-size, 13pt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sky-dialog-title-color, #252525);min-width:0}.sky-dialog-title-with-subtitle[data-v-4c07463d]{line-height:1.2}.sky-dialog-subtitle[data-v-4c07463d]{display:block;font-size:var(--sky-dialog-subtitle-size, 12pt);line-height:24px;color:var(--sky-dialog-subtitle-color, #6c757d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sky-dialog-paper[data-v-4c07463d]{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:relative}.sky-dialog-swipe-area[data-v-4c07463d]{position:absolute;width:35px;height:100%;left:0}.sky-dialog-footer[data-v-4c07463d]{padding:5px 10px;display:flex;justify-content:center;width:100%;flex-shrink:0}.sky-dialog-footer>*+*[data-v-4c07463d]{margin-left:10px}.sky-dialog-footer[data-v-4c07463d]>:deep(*){flex:1;min-width:0}.sky-dialog-footer[data-v-4c07463d]:has(>:deep(*:only-child))>:deep(*){max-width:100%}.sky-dialog-footer[data-v-4c07463d]:has(>:deep(*:nth-child(2)):not(:has(>:deep(*:nth-child(3)))))>:deep(*){flex:1 1 50%}@media only screen and (min-width: 1400px){.sky-dialog-content[data-v-4c07463d]{width:100%;margin:0 auto}}@media screen and (min-width: 710px){.sky-dialog-paper[data-v-4c07463d]{background-color:#fff;margin:0 10px 10px}}@media screen and (max-width: 709px){.sky-dialog-paper[data-v-4c07463d]{background-color:#fff;margin:0 10px 10px;max-width:100vw!important}}@media screen and (max-width: 500px){.sky-dialog-subtitle[data-v-4c07463d]{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sky-dialog-title-with-subtitle[data-v-4c07463d]{padding:12px 24px!important}}@media screen and (max-width: 374px){.sky-dialog-subtitle[data-v-4c07463d]{font-size:9pt}}@supports (padding-top: env(safe-area-inset-top)){.sky-dialog-footer[data-v-4c07463d]{padding-bottom:calc(env(safe-area-inset-bottom) + 5px)}}@supports (padding-top: env(safe-area-inset-top)){.sky-dialog-header[data-v-4c07463d]{padding-top:calc(10px + env(safe-area-inset-top))}.sky-dialog-paper[data-v-4c07463d]{padding-bottom:env(safe-area-inset-bottom)}}.sky-btn[data-v-4ee18038]{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:var(--sky-btn-padding, 16px 20px);border:var(--sky-btn-border, none);border-radius:var(--sky-btn-radius, 6px);font-size:var(--sky-btn-font-size, 14px);font-weight:var(--sky-btn-font-weight, 500);line-height:1;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none}.sky-btn-icon[data-v-4ee18038]{padding:var(--sky-btn-icon-padding, 10px);border-radius:var(--sky-btn-icon-radius, 6px)}.sky-btn-block[data-v-4ee18038]{width:100%}.sky-btn[data-v-4ee18038]:disabled{opacity:.6;cursor:not-allowed}.sky-btn-primary[data-v-4ee18038]{background:var(--sky-btn-primary-bg, #24973f);color:var(--sky-btn-primary-color, #fff)}.sky-btn-primary[data-v-4ee18038]:hover:not(:disabled){background:var(--sky-btn-primary-hover-bg, #1e7a33)}.sky-btn-primary[data-v-4ee18038]:active:not(:disabled){background:var(--sky-btn-primary-active-bg, #196b2c)}.sky-btn-danger[data-v-4ee18038]{background:var(--sky-btn-danger-bg, #dc2626);color:var(--sky-btn-danger-color, #fff)}.sky-btn-danger[data-v-4ee18038]:hover:not(:disabled){background:var(--sky-btn-danger-hover-bg, #b91c1c)}.sky-btn-danger[data-v-4ee18038]:active:not(:disabled){background:var(--sky-btn-danger-active-bg, #991b1b)}.sky-btn-secondary[data-v-4ee18038]{background:var(--sky-btn-secondary-bg, #f3f4f6);color:var(--sky-btn-secondary-color, #374151)}.sky-btn-secondary[data-v-4ee18038]:hover:not(:disabled){background:var(--sky-btn-secondary-hover-bg, #e5e7eb)}.sky-btn-secondary[data-v-4ee18038]:active:not(:disabled){background:var(--sky-btn-secondary-active-bg, #d1d5db)}.sky-btn-outline[data-v-4ee18038]{background:var(--sky-btn-outline-bg, transparent);color:var(--sky-btn-outline-color, #374151);border:var(--sky-btn-border, 1px solid #d1d5db)}.sky-btn-outline[data-v-4ee18038]:hover:not(:disabled){background:var(--sky-btn-outline-hover-bg, #f3f4f6)}.sky-btn-outline[data-v-4ee18038]:active:not(:disabled){background:var(--sky-btn-outline-active-bg, #e5e7eb)}.sky-btn-spinner[data-v-4ee18038]{width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:sky-btn-spin-data-v-4ee18038 .6s linear infinite;flex-shrink:0}@keyframes sky-btn-spin-data-v-4ee18038{to{transform:rotate(360deg)}}.sky-select[data-v-56478895]{position:relative;display:inline-block;font-size:var(--sky-select-font-size, 14px)}.sky-select-block[data-v-56478895]{display:block;width:100%}.sky-select-block .sky-select-trigger[data-v-56478895]{width:100%}.sky-select-trigger[data-v-56478895]{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:var(--sky-select-padding, 10px 14px);background:var(--sky-select-bg, #fff);border:var(--sky-select-border, 1px solid #d1d5db);border-radius:var(--sky-select-radius, 6px);font-size:inherit;font-weight:var(--sky-select-font-weight, 400);color:var(--sky-select-color, #374151);cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;white-space:nowrap}.sky-select-trigger[data-v-56478895]:hover:not(:disabled){border-color:var(--sky-select-border-hover, #9ca3af)}.sky-select-open .sky-select-trigger[data-v-56478895]{border-color:var(--sky-select-border-focus, #6b7280);outline:none}.sky-select-trigger[data-v-56478895]:focus-visible{outline:2px solid var(--sky-select-focus-ring, #24973f);outline-offset:2px}.sky-select-disabled .sky-select-trigger[data-v-56478895]{opacity:.6;cursor:not-allowed}.sky-select-value[data-v-56478895]{overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.sky-select-placeholder[data-v-56478895]{color:var(--sky-select-placeholder-color, #9ca3af)}.sky-select-chevron[data-v-56478895]{width:16px;height:16px;flex-shrink:0;color:var(--sky-select-chevron-color, #6b7280);transition:transform .15s ease}.sky-select-open .sky-select-chevron[data-v-56478895]{transform:rotate(180deg)}.sky-select-dropdown[data-v-56478895]{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:var(--sky-select-dropdown-z-index, 100);background:var(--sky-select-dropdown-bg, #fff);border:var(--sky-select-dropdown-border, 1px solid #d1d5db);border-radius:var(--sky-select-dropdown-radius, 6px);box-shadow:var(--sky-select-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, .1));max-height:var(--sky-select-dropdown-max-height, 220px);overflow-y:auto;padding:4px}.sky-select-dropdown-teleported[data-v-56478895]{position:fixed;background:var(--sky-select-dropdown-bg, #fff);border:var(--sky-select-dropdown-border, 1px solid #d1d5db);border-radius:var(--sky-select-dropdown-radius, 6px);box-shadow:var(--sky-select-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, .1));max-height:var(--sky-select-dropdown-max-height, 220px);overflow-y:auto;padding:4px}.sky-select-option[data-v-56478895]{display:flex;align-items:center;justify-content:space-between;padding:var(--sky-select-option-padding, 9px 10px);border-radius:var(--sky-select-option-radius, 4px);cursor:pointer;color:var(--sky-select-option-color, #374151)}.sky-select-option-focused[data-v-56478895],.sky-select-option[data-v-56478895]:hover{background:var(--sky-select-option-hover-bg, #f3f4f6)}.sky-select-option-selected[data-v-56478895]{color:var(--sky-select-option-selected-color, #24973f);font-weight:500}.sky-select-check[data-v-56478895]{width:14px;height:14px;flex-shrink:0;color:var(--sky-select-check-color, #24973f)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:0}::-webkit-scrollbar-thumb:hover{background:#a8a8a8}
|