@opengis/widgets 0.0.2 → 0.0.3
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 +42 -236
- package/index.css +1 -1
- package/index.js +496 -493
- package/index.umd.cjs +26 -26
- package/package.json +1 -1
- package/vite.svg +0 -1
package/README.md
CHANGED
|
@@ -1,44 +1,52 @@
|
|
|
1
1
|
# OpenGIS Widgets Library
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Library of independent widgets for OpenGIS systems with a universal Card wrapper. All widgets can be used separately or as part of a single interface through the Card component.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Features
|
|
6
6
|
|
|
7
|
-
###
|
|
7
|
+
### Card Widget - Universal wrapper
|
|
8
8
|
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
9
|
+
- **Two display modes**: Tab (tabs) and Plain (panels)
|
|
10
|
+
- **Flexible size control** through `col` and `width` parameters
|
|
11
|
+
- **Support for HTML content**, dynamic components and slots
|
|
12
|
+
- **Adaptive grid** with support for 12-column system
|
|
13
13
|
|
|
14
|
-
###
|
|
14
|
+
### Available widgets
|
|
15
15
|
|
|
16
|
-
- **CommentsWidget** -
|
|
17
|
-
- **HistoryWidget** -
|
|
18
|
-
- **FilesWidget** -
|
|
19
|
-
- **GalleryWidget** -
|
|
20
|
-
- **DescriptionListWidget** -
|
|
16
|
+
- **CommentsWidget** - system comments with replies and likes
|
|
17
|
+
- **HistoryWidget** - display of changes history
|
|
18
|
+
- **FilesWidget** - file management with upload
|
|
19
|
+
- **GalleryWidget** - gallery with adaptive grid
|
|
20
|
+
- **DescriptionListWidget** - description lists with different data types
|
|
21
21
|
|
|
22
|
-
|
|
22
|
+
## Documentation
|
|
23
23
|
|
|
24
|
-
|
|
25
|
-
- **Адаптивний дизайн** для всіх пристроїв
|
|
26
|
-
- **Інтерактивні елементи** з анімаціями
|
|
27
|
-
- **TypeScript підтримка** з повною типізацією
|
|
24
|
+
Check out the documentation and live demo here: [Live Demo & Docs](https://widget.opengis.info)
|
|
28
25
|
|
|
29
|
-
## 🚀 Швидкий старт
|
|
30
26
|
|
|
31
|
-
|
|
27
|
+
## Install & Usage
|
|
28
|
+
|
|
29
|
+
### Install
|
|
32
30
|
|
|
33
31
|
```bash
|
|
34
32
|
npm install @opengis/widgets
|
|
35
33
|
```
|
|
36
34
|
|
|
37
|
-
###
|
|
35
|
+
### Register the components
|
|
36
|
+
|
|
37
|
+
```ts
|
|
38
|
+
import { createApp } from 'vue'
|
|
39
|
+
import App from './App.vue'
|
|
40
|
+
import { DescriptionList, DescriptionItem } from '@opengis/widget'
|
|
41
|
+
|
|
42
|
+
createApp(App).component('DescriptionList', DescriptionList).mount('#app')
|
|
43
|
+
createApp(App).component('DescriptionItem', DescriptionItem).mount('#app')
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### Usage
|
|
38
47
|
|
|
39
48
|
```vue
|
|
40
49
|
<template>
|
|
41
|
-
<!-- Віджети в табах -->
|
|
42
50
|
<Card :data="tabsData" view="tab">
|
|
43
51
|
<template #tab-0>
|
|
44
52
|
<CommentsWidget :comments="comments" @add-comment="handleAddComment" />
|
|
@@ -47,239 +55,37 @@ npm install @opengis/widgets
|
|
|
47
55
|
<HistoryWidget :items="historyItems" />
|
|
48
56
|
</template>
|
|
49
57
|
</Card>
|
|
50
|
-
|
|
51
|
-
<!-- Віджети в панелях -->
|
|
52
|
-
<Card :panels="panelsData" view="plain">
|
|
53
|
-
<template #panel-0>
|
|
54
|
-
<FilesWidget :files="files" @upload="handleUpload" />
|
|
55
|
-
</template>
|
|
56
|
-
<template #panel-1>
|
|
57
|
-
<GalleryWidget :items="galleryItems" />
|
|
58
|
-
</template>
|
|
59
|
-
</Card>
|
|
60
58
|
</template>
|
|
61
59
|
|
|
62
60
|
<script setup>
|
|
63
61
|
import { Card, CommentsWidget, HistoryWidget, FilesWidget, GalleryWidget } from '@opengis/widgets'
|
|
64
62
|
|
|
65
|
-
// Дані для табів
|
|
66
63
|
const tabsData = [
|
|
67
64
|
{
|
|
68
65
|
"type": "tabs",
|
|
69
66
|
"col": 12,
|
|
70
67
|
"items": [
|
|
71
|
-
{ "name": "comments", "title": "
|
|
72
|
-
{ "name": "history", "title": "
|
|
68
|
+
{ "name": "comments", "title": "Comments" },
|
|
69
|
+
{ "name": "history", "title": "History" }
|
|
73
70
|
]
|
|
74
71
|
}
|
|
75
72
|
]
|
|
76
73
|
|
|
77
|
-
// Дані для панелей
|
|
78
74
|
const panelsData = [
|
|
79
|
-
{ name: "files", title: "
|
|
80
|
-
{ name: "gallery", title: "
|
|
75
|
+
{ name: "files", title: "Files", col: 6, width: 6 },
|
|
76
|
+
{ name: "gallery", title: "Gallery", col: 6, width: 6 }
|
|
81
77
|
]
|
|
82
78
|
</script>
|
|
83
79
|
```
|
|
84
80
|
|
|
85
|
-
##
|
|
86
|
-
|
|
87
|
-
### Card Widget
|
|
88
|
-
|
|
89
|
-
Універсальна обгортка для всіх віджетів з двома режимами відображення.
|
|
90
|
-
|
|
91
|
-
#### Режими відображення
|
|
92
|
-
|
|
93
|
-
**Tab View** - віджети у вкладках:
|
|
94
|
-
|
|
95
|
-
```vue
|
|
96
|
-
<Card :data="tabsData" view="tab">
|
|
97
|
-
<template #tab-0>
|
|
98
|
-
<CommentsWidget :comments="comments" />
|
|
99
|
-
</template>
|
|
100
|
-
</Card>
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
**Plain View** - віджети в панелях:
|
|
104
|
-
|
|
105
|
-
```vue
|
|
106
|
-
<Card :panels="panelsData" view="plain">
|
|
107
|
-
<template #panel-0>
|
|
108
|
-
<FilesWidget :files="files" />
|
|
109
|
-
</template>
|
|
110
|
-
</Card>
|
|
111
|
-
```
|
|
112
|
-
|
|
113
|
-
#### Параметри
|
|
114
|
-
|
|
115
|
-
```typescript
|
|
116
|
-
interface ICardItem {
|
|
117
|
-
name?: string // Унікальна назва
|
|
118
|
-
title?: string // Заголовок панелі/таба
|
|
119
|
-
col?: number // Кількість колонок (1-12)
|
|
120
|
-
width?: string | number // Ширина в колонках
|
|
121
|
-
html?: string // HTML контент
|
|
122
|
-
component?: string // Назва компонента
|
|
123
|
-
slot?: string // Назва слота
|
|
124
|
-
}
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
### CommentsWidget
|
|
128
|
-
|
|
129
|
-
Система коментарів з підтримкою відповідей, лайків та різних режимів відображення.
|
|
130
|
-
|
|
131
|
-
```vue
|
|
132
|
-
<CommentsWidget
|
|
133
|
-
:comments="comments"
|
|
134
|
-
@add-comment="handleAddComment"
|
|
135
|
-
@reply="handleReply"
|
|
136
|
-
@like="handleLike"
|
|
137
|
-
@share="handleShare"
|
|
138
|
-
@view-mode-change="handleViewModeChange"
|
|
139
|
-
/>
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
### HistoryWidget
|
|
143
|
-
|
|
144
|
-
Відображення історії змін з різними типами подій.
|
|
145
|
-
|
|
146
|
-
```vue
|
|
147
|
-
<HistoryWidget
|
|
148
|
-
:items="historyItems"
|
|
149
|
-
:max-items="10"
|
|
150
|
-
/>
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
### FilesWidget
|
|
154
|
-
|
|
155
|
-
Управління файлами з можливістю завантаження та видалення.
|
|
156
|
-
|
|
157
|
-
```vue
|
|
158
|
-
<FilesWidget
|
|
159
|
-
:files="files"
|
|
160
|
-
@upload="handleUpload"
|
|
161
|
-
@delete="handleDelete"
|
|
162
|
-
/>
|
|
163
|
-
```
|
|
164
|
-
|
|
165
|
-
### GalleryWidget
|
|
166
|
-
|
|
167
|
-
Галерея зображень з адаптивною сіткою та інтерактивними елементами.
|
|
168
|
-
|
|
169
|
-
```vue
|
|
170
|
-
<GalleryWidget
|
|
171
|
-
:items="galleryItems"
|
|
172
|
-
:columns="4"
|
|
173
|
-
@item-click="handleItemClick"
|
|
174
|
-
/>
|
|
175
|
-
```
|
|
176
|
-
|
|
177
|
-
### DescriptionListWidget
|
|
178
|
-
|
|
179
|
-
Описові списки з підтримкою різних типів даних (текст, посилання, дати, статуси).
|
|
180
|
-
|
|
181
|
-
```vue
|
|
182
|
-
<DescriptionListWidget
|
|
183
|
-
title="User Profile"
|
|
184
|
-
:items="descriptionItems"
|
|
185
|
-
view="table"
|
|
186
|
-
/>
|
|
187
|
-
```
|
|
188
|
-
|
|
189
|
-
## 🏗️ Архітектура проекту
|
|
190
|
-
|
|
191
|
-
```
|
|
192
|
-
src/
|
|
193
|
-
├── widgets/
|
|
194
|
-
│ ├── card/ # Card віджет (обгортка)
|
|
195
|
-
│ │ ├── Card.vue
|
|
196
|
-
│ │ ├── CardItem.vue
|
|
197
|
-
│ │ └── index.ts
|
|
198
|
-
│ ├── comments/ # Віджет коментарів
|
|
199
|
-
│ ├── history/ # Віджет історії
|
|
200
|
-
│ ├── files/ # Віджет файлів
|
|
201
|
-
│ ├── gallery/ # Віджет галереї
|
|
202
|
-
│ └── description-list/ # Віджет описових списків
|
|
203
|
-
├── types/
|
|
204
|
-
│ └── index.ts # TypeScript типи
|
|
205
|
-
└── index.ts # Головний експорт
|
|
206
|
-
```
|
|
207
|
-
|
|
208
|
-
## 🎨 Кастомізація
|
|
209
|
-
|
|
210
|
-
### Стилі
|
|
211
|
-
|
|
212
|
-
Всі віджети використовують Tailwind CSS. Можна кастомізувати через CSS змінні або прямий перевизначення класів.
|
|
213
|
-
|
|
214
|
-
### Розширення
|
|
215
|
-
|
|
216
|
-
Додавання нового віджета:
|
|
217
|
-
|
|
218
|
-
1. Створіть папку в `src/widgets/`
|
|
219
|
-
2. Додайте експорт в `src/index.ts`
|
|
220
|
-
3. Додайте типи в `src/types/index.ts`
|
|
221
|
-
4. Використовуйте через Card обгортку
|
|
222
|
-
|
|
223
|
-
## 📚 Приклади використання
|
|
224
|
-
|
|
225
|
-
### Повний приклад з усіма віджетами
|
|
226
|
-
|
|
227
|
-
```vue
|
|
228
|
-
<template>
|
|
229
|
-
<div class="container mx-auto p-4">
|
|
230
|
-
<!-- Віджети в табах -->
|
|
231
|
-
<Card :data="tabsData" view="tab">
|
|
232
|
-
<template #tab-0>
|
|
233
|
-
<CommentsWidget :comments="comments" @add-comment="handleAddComment" />
|
|
234
|
-
</template>
|
|
235
|
-
<template #tab-1>
|
|
236
|
-
<HistoryWidget :items="historyItems" />
|
|
237
|
-
</template>
|
|
238
|
-
<template #tab-2>
|
|
239
|
-
<FilesWidget :files="files" @upload="handleUpload" />
|
|
240
|
-
</template>
|
|
241
|
-
<template #tab-3>
|
|
242
|
-
<GalleryWidget :items="galleryItems" @item-click="handleItemClick" />
|
|
243
|
-
</template>
|
|
244
|
-
<template #tab-4>
|
|
245
|
-
<DescriptionListWidget :items="descriptionItems" view="table" />
|
|
246
|
-
</template>
|
|
247
|
-
</Card>
|
|
248
|
-
|
|
249
|
-
<!-- Віджети в панелях -->
|
|
250
|
-
<Card :panels="panelsData" view="plain">
|
|
251
|
-
<template #panel-0>
|
|
252
|
-
<CommentsWidget :comments="comments" @add-comment="handleAddComment" />
|
|
253
|
-
</template>
|
|
254
|
-
<template #panel-1>
|
|
255
|
-
<HistoryWidget :items="historyItems" />
|
|
256
|
-
</template>
|
|
257
|
-
<template #panel-2>
|
|
258
|
-
<FilesWidget :files="files" @upload="handleUpload" />
|
|
259
|
-
</template>
|
|
260
|
-
<template #panel-3>
|
|
261
|
-
<GalleryWidget :items="galleryItems" @item-click="handleItemClick" />
|
|
262
|
-
</template>
|
|
263
|
-
<template #panel-4>
|
|
264
|
-
<DescriptionListWidget :items="descriptionItems" view="grid" />
|
|
265
|
-
</template>
|
|
266
|
-
</Card>
|
|
267
|
-
</div>
|
|
268
|
-
</template>
|
|
269
|
-
```
|
|
270
|
-
|
|
271
|
-
## 🤝 Внесок
|
|
272
|
-
|
|
273
|
-
1. Fork проект
|
|
274
|
-
2. Створіть feature branch (`git checkout -b feature/amazing-feature`)
|
|
275
|
-
3. Commit зміни (`git commit -m 'Add amazing feature'`)
|
|
276
|
-
4. Push до branch (`git push origin feature/amazing-feature`)
|
|
277
|
-
5. Відкрийте Pull Request
|
|
278
|
-
|
|
279
|
-
## 📄 Ліцензія
|
|
81
|
+
## Contributions
|
|
280
82
|
|
|
281
|
-
|
|
83
|
+
1. Fork project
|
|
84
|
+
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
|
|
85
|
+
3. Commit changes (`git commit -m 'Add amazing feature'`)
|
|
86
|
+
4. Push to branch (`git push origin feature/amazing-feature`)
|
|
87
|
+
5. Open Pull Request
|
|
282
88
|
|
|
283
|
-
##
|
|
89
|
+
## License
|
|
284
90
|
|
|
285
|
-
|
|
91
|
+
This project is licensed under MIT License.
|
package/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.notification-enter-active[data-v-7b0d3ace],.notification-leave-active[data-v-7b0d3ace]{transition:all .3s ease}.notification-enter-from[data-v-7b0d3ace],.notification-leave-to[data-v-7b0d3ace]{opacity:0;transform:translate(100%)}.notification-move[data-v-7b0d3ace]{transition:transform .3s ease}.
|
|
1
|
+
.notification-enter-active[data-v-7b0d3ace],.notification-leave-active[data-v-7b0d3ace]{transition:all .3s ease}.notification-enter-from[data-v-7b0d3ace],.notification-leave-to[data-v-7b0d3ace]{opacity:0;transform:translate(100%)}.notification-move[data-v-7b0d3ace]{transition:transform .3s ease}.text-value[data-v-c14550b7]{word-break:break-word}.link-value[data-v-e6eb07a6]{word-break:break-all}.date-value[data-v-b9600618],.status-value[data-v-c72e0b01],.custom-value[data-v-11a73810]{word-break:break-word}.description-list-widget[data-v-36d43e50]{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}
|