@opengis/widgets 0.0.1
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 +285 -0
- package/package.json +24 -0
- package/vite.svg +1 -0
- package/widget.css +1 -0
- package/widget.js +1901 -0
- package/widget.umd.cjs +136 -0
package/README.md
ADDED
|
@@ -0,0 +1,285 @@
|
|
|
1
|
+
# OpenGIS Widgets Library
|
|
2
|
+
|
|
3
|
+
Бібліотека незалежних віджетів для OpenGIS систем з універсальною Card обгорткою. Всі віджети можуть використовуватися як окремо, так і в рамках єдиного інтерфейсу через Card компонент.
|
|
4
|
+
|
|
5
|
+
## 🎯 Основні особливості
|
|
6
|
+
|
|
7
|
+
### 🃏 Card Widget - Універсальна обгортка
|
|
8
|
+
|
|
9
|
+
- **Два режими відображення**: Tab (вкладки) та Plain (панелі)
|
|
10
|
+
- **Гнучкий контроль розмірів** через параметри `col` та `width`
|
|
11
|
+
- **Підтримка HTML контенту**, динамічних компонентів та слотів
|
|
12
|
+
- **Адаптивна сітка** з підтримкою 12-колоночної системи
|
|
13
|
+
|
|
14
|
+
### 📦 Доступні віджети
|
|
15
|
+
|
|
16
|
+
- **CommentsWidget** - система коментарів з відповідями та лайками
|
|
17
|
+
- **HistoryWidget** - відображення історії змін
|
|
18
|
+
- **FilesWidget** - управління файлами з завантаженням
|
|
19
|
+
- **GalleryWidget** - галерея зображень з адаптивною сіткою
|
|
20
|
+
- **DescriptionListWidget** - описові списки з різними типами даних
|
|
21
|
+
|
|
22
|
+
### 🎨 Дизайн та UX
|
|
23
|
+
|
|
24
|
+
- **Сучасний інтерфейс** з Tailwind CSS
|
|
25
|
+
- **Адаптивний дизайн** для всіх пристроїв
|
|
26
|
+
- **Інтерактивні елементи** з анімаціями
|
|
27
|
+
- **TypeScript підтримка** з повною типізацією
|
|
28
|
+
|
|
29
|
+
## 🚀 Швидкий старт
|
|
30
|
+
|
|
31
|
+
### Встановлення
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
npm install @opengis/widgets
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Базове використання
|
|
38
|
+
|
|
39
|
+
```vue
|
|
40
|
+
<template>
|
|
41
|
+
<!-- Віджети в табах -->
|
|
42
|
+
<Card :data="tabsData" view="tab">
|
|
43
|
+
<template #tab-0>
|
|
44
|
+
<CommentsWidget :comments="comments" @add-comment="handleAddComment" />
|
|
45
|
+
</template>
|
|
46
|
+
<template #tab-1>
|
|
47
|
+
<HistoryWidget :items="historyItems" />
|
|
48
|
+
</template>
|
|
49
|
+
</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
|
+
</template>
|
|
61
|
+
|
|
62
|
+
<script setup>
|
|
63
|
+
import { Card, CommentsWidget, HistoryWidget, FilesWidget, GalleryWidget } from '@opengis/widgets'
|
|
64
|
+
|
|
65
|
+
// Дані для табів
|
|
66
|
+
const tabsData = [
|
|
67
|
+
{
|
|
68
|
+
"type": "tabs",
|
|
69
|
+
"col": 12,
|
|
70
|
+
"items": [
|
|
71
|
+
{ "name": "comments", "title": "Коментарі" },
|
|
72
|
+
{ "name": "history", "title": "Історія" }
|
|
73
|
+
]
|
|
74
|
+
}
|
|
75
|
+
]
|
|
76
|
+
|
|
77
|
+
// Дані для панелей
|
|
78
|
+
const panelsData = [
|
|
79
|
+
{ name: "files", title: "Файли", col: 6, width: 6 },
|
|
80
|
+
{ name: "gallery", title: "Галерея", col: 6, width: 6 }
|
|
81
|
+
]
|
|
82
|
+
</script>
|
|
83
|
+
```
|
|
84
|
+
|
|
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
|
+
## 📄 Ліцензія
|
|
280
|
+
|
|
281
|
+
Цей проект ліцензований під MIT License - дивіться файл [LICENSE](LICENSE) для деталей.
|
|
282
|
+
|
|
283
|
+
## 🆘 Підтримка
|
|
284
|
+
|
|
285
|
+
Якщо у вас є питання або проблеми, створіть issue в репозиторії або зверніться до команди розробки.
|
package/package.json
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@opengis/widgets",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "A collection of independent widgets for comments, history, files, and gallery",
|
|
5
|
+
"private": false,
|
|
6
|
+
"type": "module",
|
|
7
|
+
"main": "widget.js",
|
|
8
|
+
"homepage": "https://widget.opengis.info/",
|
|
9
|
+
"keywords": [
|
|
10
|
+
"widgets",
|
|
11
|
+
"comments",
|
|
12
|
+
"history",
|
|
13
|
+
"files",
|
|
14
|
+
"gallery",
|
|
15
|
+
"vue",
|
|
16
|
+
"components",
|
|
17
|
+
"opengis"
|
|
18
|
+
],
|
|
19
|
+
"author": {
|
|
20
|
+
"name": "OpenGIS",
|
|
21
|
+
"url": "https://opengis.info/"
|
|
22
|
+
},
|
|
23
|
+
"license": "MIT"
|
|
24
|
+
}
|
package/vite.svg
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
package/widget.css
ADDED
|
@@ -0,0 +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}.card-wrapper[data-v-ae6b1cea]{border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.card-tabs[data-v-ae6b1cea]{overflow:hidden}.tabs-header[data-v-ae6b1cea]{display:flex;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.tab-button[data-v-ae6b1cea]{padding:.75rem 1rem;font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.tab-button[data-v-ae6b1cea]:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.tab-button.active[data-v-ae6b1cea]{border-bottom-width:2px;--tw-border-opacity: 1;border-color:rgb(37 99 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.tab-content[data-v-ae6b1cea]{padding:1rem}.tab-panel[data-v-ae6b1cea]{min-height:400px;width:100%}.card-plain[data-v-ae6b1cea]{padding:1rem}.plain-panel[data-v-ae6b1cea]{min-height:300px;border-radius:.5rem;--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:1rem}.panel-header[data-v-ae6b1cea]{margin-bottom:1rem;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));padding-bottom:.5rem}.panel-title[data-v-ae6b1cea]{font-size:1.125rem;line-height:1.75rem;font-weight:600;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.html-content[data-v-ae6b1cea]{line-height:1.625;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.html-content h1[data-v-ae6b1cea],.html-content h2[data-v-ae6b1cea],.html-content h3[data-v-ae6b1cea],.html-content h4[data-v-ae6b1cea],.html-content h5[data-v-ae6b1cea],.html-content h6[data-v-ae6b1cea]{margin-bottom:.5rem;font-weight:600;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.html-content p[data-v-ae6b1cea]{margin-bottom:.75rem}.html-content ul[data-v-ae6b1cea],.html-content ol[data-v-ae6b1cea]{margin-bottom:.75rem;padding-left:1.25rem}.html-content li[data-v-ae6b1cea]{margin-bottom:.25rem}.component-content[data-v-ae6b1cea]{height:100%;width:100%}.col-1[data-v-ae6b1cea]{grid-column:span 1 / span 1}.col-2[data-v-ae6b1cea]{grid-column:span 2 / span 2}.col-3[data-v-ae6b1cea]{grid-column:span 3 / span 3}.col-4[data-v-ae6b1cea]{grid-column:span 4 / span 4}.col-6[data-v-ae6b1cea]{grid-column:span 6 / span 6}.col-8[data-v-ae6b1cea]{grid-column:span 8 / span 8}.col-9[data-v-ae6b1cea]{grid-column:span 9 / span 9}.col-12[data-v-ae6b1cea]{grid-column:span 12 / span 12}.card-item[data-v-087bdd29]{width:100%}.html-content[data-v-087bdd29]{line-height:1.625;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.html-content h1[data-v-087bdd29],.html-content h2[data-v-087bdd29],.html-content h3[data-v-087bdd29],.html-content h4[data-v-087bdd29],.html-content h5[data-v-087bdd29],.html-content h6[data-v-087bdd29]{margin-bottom:.5rem;font-weight:600;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.html-content p[data-v-087bdd29]{margin-bottom:.75rem}.html-content ul[data-v-087bdd29],.html-content ol[data-v-087bdd29]{margin-bottom:.75rem;padding-left:1.25rem}.html-content li[data-v-087bdd29]{margin-bottom:.25rem}.component-content[data-v-087bdd29]{width:100%}.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-c1f51d80]{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}
|