OpenGIS Widgets Library

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 - Universal wrapper

• 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 - 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

Documentation

Check out the documentation and live demo here: Live Demo & Docs

Install & Usage

Install

npm install @opengis/widgets

Register the components

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

<template>
  <Card :data="tabsData" view="tab">
    <template #tab-0>
      <CommentsWidget :comments="comments" @add-comment="handleAddComment" />
    </template>
    <template #tab-1>
      <HistoryWidget :items="historyItems" />
    </template>
  </Card>
</template>

<script setup>
import { Card, CommentsWidget, HistoryWidget, FilesWidget, GalleryWidget } from '@opengis/widgets'

const tabsData = [
  {
    "type": "tabs",
    "col": 12,
    "items": [
      { "name": "comments", "title": "Comments" },
      { "name": "history", "title": "History" }
    ]
  }
]

const panelsData = [
  { name: "files", title: "Files", col: 6, width: 6 },
  { name: "gallery", title: "Gallery", col: 6, width: 6 }
]
</script>

Contributions

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

This project is licensed under MIT License.