@opengis/widgets 0.0.2 → 0.0.5

package/README.md

@@ -1,44 +1,52 @@
 # OpenGIS Widgets Library
 
-Бібліотека незалежних віджетів для OpenGIS систем з універсальною Card обгорткою. Всі віджети можуть використовуватися як окремо, так і в рамках єдиного інтерфейсу через Card компонент.
+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.
 
-## 🎯 Основні особливості
+## Features
 
-### 🃏 Card Widget - Універсальна обгортка
+### Card Widget - Universal wrapper
 
-- **Два режими відображення**: Tab (вкладки) та Plain (панелі)
-- **Гнучкий контроль розмірів** через параметри `col` та `width`
-- **Підтримка HTML контенту**, динамічних компонентів та слотів
-- **Адаптивна сітка** з підтримкою 12-колоночної системи
+- **Two display modes**: Tab (tabs) and Plain (panels)
+- **Flexible size control** through `col` and `width` parameters
+- **Support for HTML content**, dynamic components and slots
+- **Adaptive grid** with support for 12-column system
 
-### 📦 Доступні віджети
+### Available widgets
 
-- **CommentsWidget** - система коментарів з відповідями та лайками
-- **HistoryWidget** - відображення історії змін
-- **FilesWidget** - управління файлами з завантаженням
-- **GalleryWidget** - галерея зображень з адаптивною сіткою
-- **DescriptionListWidget** - описові списки з різними типами даних
+- **CommentsWidget** - system comments with replies and likes
+- **HistoryWidget** - display of changes history
+- **FilesWidget** - file management with upload
+- **GalleryWidget** - gallery with adaptive grid
+- **DescriptionListWidget** - description lists with different data types
 
-### 🎨 Дизайн та UX
+## Documentation
 
-- **Сучасний інтерфейс** з Tailwind CSS
-- **Адаптивний дизайн** для всіх пристроїв
-- **Інтерактивні елементи** з анімаціями
-- **TypeScript підтримка** з повною типізацією
+Check out the documentation and live demo here: [Live Demo & Docs](https://widget.opengis.info)
 
-## 🚀 Швидкий старт
 
-### Встановлення
+## Install & Usage
+
+### Install
 
 ```bash
 npm install @opengis/widgets
 ```
 
-### Базове використання
+### Register the components
+
+```ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import { DescriptionList, DescriptionItem } from '@opengis/widgets'
+
+createApp(App).component('DescriptionList', DescriptionList).mount('#app')
+createApp(App).component('DescriptionItem', DescriptionItem).mount('#app')
+```
+
+### Usage
 
 ```vue
 <template>
-  <!-- Віджети в табах -->
   <Card :data="tabsData" view="tab">
     <template #tab-0>
       <CommentsWidget :comments="comments" @add-comment="handleAddComment" />
@@ -47,239 +55,37 @@ npm install @opengis/widgets
       <HistoryWidget :items="historyItems" />
     </template>
   </Card>
-
-  <!-- Віджети в панелях -->
-  <Card :panels="panelsData" view="plain">
-    <template #panel-0>
-      <FilesWidget :files="files" @upload="handleUpload" />
-    </template>
-    <template #panel-1>
-      <GalleryWidget :items="galleryItems" />
-    </template>
-  </Card>
 </template>
 
 <script setup>
 import { Card, CommentsWidget, HistoryWidget, FilesWidget, GalleryWidget } from '@opengis/widgets'
 
-// Дані для табів
 const tabsData = [
   {
     "type": "tabs",
     "col": 12,
     "items": [
-      { "name": "comments", "title": "Коментарі" },
-      { "name": "history", "title": "Історія" }
+      { "name": "comments", "title": "Comments" },
+      { "name": "history", "title": "History" }
     ]
   }
 ]
 
-// Дані для панелей
 const panelsData = [
-  { name: "files", title: "Файли", col: 6, width: 6 },
-  { name: "gallery", title: "Галерея", col: 6, width: 6 }
+  { name: "files", title: "Files", col: 6, width: 6 },
+  { name: "gallery", title: "Gallery", col: 6, width: 6 }
 ]
 </script>
 ```
 
-## 📋 Детальний опис віджетів
-
-### Card Widget
-
-Універсальна обгортка для всіх віджетів з двома режимами відображення.
-
-#### Режими відображення
-
-**Tab View** - віджети у вкладках:
-
-```vue
-<Card :data="tabsData" view="tab">
-  <template #tab-0>
-    <CommentsWidget :comments="comments" />
-  </template>
-</Card>
-```
-
-**Plain View** - віджети в панелях:
-
-```vue
-<Card :panels="panelsData" view="plain">
-  <template #panel-0>
-    <FilesWidget :files="files" />
-  </template>
-</Card>
-```
-
-#### Параметри
-
-```typescript
-interface ICardItem {
-  name?: string          // Унікальна назва
-  title?: string         // Заголовок панелі/таба
-  col?: number           // Кількість колонок (1-12)
-  width?: string | number // Ширина в колонках
-  html?: string          // HTML контент
-  component?: string     // Назва компонента
-  slot?: string          // Назва слота
-}
-```
-
-### CommentsWidget
-
-Система коментарів з підтримкою відповідей, лайків та різних режимів відображення.
-
-```vue
-<CommentsWidget 
-  :comments="comments"
-  @add-comment="handleAddComment"
-  @reply="handleReply"
-  @like="handleLike"
-  @share="handleShare"
-  @view-mode-change="handleViewModeChange"
-/>
-```
-
-### HistoryWidget
-
-Відображення історії змін з різними типами подій.
-
-```vue
-<HistoryWidget 
-  :items="historyItems"
-  :max-items="10"
-/>
-```
-
-### FilesWidget
-
-Управління файлами з можливістю завантаження та видалення.
-
-```vue
-<FilesWidget 
-  :files="files"
-  @upload="handleUpload"
-  @delete="handleDelete"
-/>
-```
-
-### GalleryWidget
-
-Галерея зображень з адаптивною сіткою та інтерактивними елементами.
-
-```vue
-<GalleryWidget 
-  :items="galleryItems"
-  :columns="4"
-  @item-click="handleItemClick"
-/>
-```
-
-### DescriptionListWidget
-
-Описові списки з підтримкою різних типів даних (текст, посилання, дати, статуси).
-
-```vue
-<DescriptionListWidget 
-  title="User Profile"
-  :items="descriptionItems"
-  view="table"
-/>
-```
-
-## 🏗️ Архітектура проекту
-
-```
-src/
-├── widgets/
-│   ├── card/                    # Card віджет (обгортка)
-│   │   ├── Card.vue
-│   │   ├── CardItem.vue
-│   │   └── index.ts
-│   ├── comments/               # Віджет коментарів
-│   ├── history/                # Віджет історії
-│   ├── files/                  # Віджет файлів
-│   ├── gallery/                # Віджет галереї
-│   └── description-list/       # Віджет описових списків
-├── types/
-│   └── index.ts               # TypeScript типи
-└── index.ts                   # Головний експорт
-```
-
-## 🎨 Кастомізація
-
-### Стилі
-
-Всі віджети використовують Tailwind CSS. Можна кастомізувати через CSS змінні або прямий перевизначення класів.
-
-### Розширення
-
-Додавання нового віджета:
-
-1. Створіть папку в `src/widgets/`
-2. Додайте експорт в `src/index.ts`
-3. Додайте типи в `src/types/index.ts`
-4. Використовуйте через Card обгортку
-
-## 📚 Приклади використання
-
-### Повний приклад з усіма віджетами
-
-```vue
-<template>
-  <div class="container mx-auto p-4">
-    <!-- Віджети в табах -->
-    <Card :data="tabsData" view="tab">
-      <template #tab-0>
-        <CommentsWidget :comments="comments" @add-comment="handleAddComment" />
-      </template>
-      <template #tab-1>
-        <HistoryWidget :items="historyItems" />
-      </template>
-      <template #tab-2>
-        <FilesWidget :files="files" @upload="handleUpload" />
-      </template>
-      <template #tab-3>
-        <GalleryWidget :items="galleryItems" @item-click="handleItemClick" />
-      </template>
-      <template #tab-4>
-        <DescriptionListWidget :items="descriptionItems" view="table" />
-      </template>
-    </Card>
-
-    <!-- Віджети в панелях -->
-    <Card :panels="panelsData" view="plain">
-      <template #panel-0>
-        <CommentsWidget :comments="comments" @add-comment="handleAddComment" />
-      </template>
-      <template #panel-1>
-        <HistoryWidget :items="historyItems" />
-      </template>
-      <template #panel-2>
-        <FilesWidget :files="files" @upload="handleUpload" />
-      </template>
-      <template #panel-3>
-        <GalleryWidget :items="galleryItems" @item-click="handleItemClick" />
-      </template>
-      <template #panel-4>
-        <DescriptionListWidget :items="descriptionItems" view="grid" />
-      </template>
-    </Card>
-  </div>
-</template>
-```
-
-## 🤝 Внесок
-
-1. Fork проект
-2. Створіть feature branch (`git checkout -b feature/amazing-feature`)
-3. Commit зміни (`git commit -m 'Add amazing feature'`)
-4. Push до branch (`git push origin feature/amazing-feature`)
-5. Відкрийте Pull Request
-
-## 📄 Ліцензія
+## Contributions
 
-Цей проект ліцензований під MIT License - дивіться файл [LICENSE](LICENSE) для деталей.
+1. Fork project
+2. Create a feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit changes (`git commit -m 'Add amazing feature'`)
+4. Push to branch (`git push origin feature/amazing-feature`)
+5. Open Pull Request
 
-## 🆘 Підтримка
+## License
 
-Якщо у вас є питання або проблеми, створіть issue в репозиторії або зверніться до команди розробки.
+This project is licensed under MIT License.

package/dist/index.css

@@ -0,0 +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}