@opengis/widgets 0.0.41 → 0.0.42
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 +91 -91
- package/dist/index.css +1 -1
- package/dist/index.js +3252 -3082
- package/dist/index.umd.cjs +151 -9
- package/dist/widgets/card/layout.d.ts.map +1 -1
- package/dist/widgets/map/MapWidget.vue.d.ts.map +1 -1
- package/package.json +58 -58
package/README.md
CHANGED
|
@@ -1,91 +1,91 @@
|
|
|
1
|
-
# OpenGIS Widgets Library
|
|
2
|
-
|
|
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
|
-
|
|
5
|
-
## Features
|
|
6
|
-
|
|
7
|
-
### Card Widget - Universal wrapper
|
|
8
|
-
|
|
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
|
-
|
|
14
|
-
### Available widgets
|
|
15
|
-
|
|
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
|
-
|
|
22
|
-
## Documentation
|
|
23
|
-
|
|
24
|
-
Check out the documentation and live demo here: [Live Demo & Docs](https://widget.opengis.info)
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
## Install & Usage
|
|
28
|
-
|
|
29
|
-
### Install
|
|
30
|
-
|
|
31
|
-
```bash
|
|
32
|
-
npm install @opengis/widgets
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
### Register the components
|
|
36
|
-
|
|
37
|
-
```ts
|
|
38
|
-
import { createApp } from 'vue'
|
|
39
|
-
import App from './App.vue'
|
|
40
|
-
import { DescriptionList, DescriptionItem } from '@opengis/widgets'
|
|
41
|
-
|
|
42
|
-
createApp(App).component('DescriptionList', DescriptionList).mount('#app')
|
|
43
|
-
createApp(App).component('DescriptionItem', DescriptionItem).mount('#app')
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
### Usage
|
|
47
|
-
|
|
48
|
-
```vue
|
|
49
|
-
<template>
|
|
50
|
-
<Card :data="tabsData" view="tab">
|
|
51
|
-
<template #tab-0>
|
|
52
|
-
<CommentsWidget :comments="comments" @add-comment="handleAddComment" />
|
|
53
|
-
</template>
|
|
54
|
-
<template #tab-1>
|
|
55
|
-
<HistoryWidget :items="historyItems" />
|
|
56
|
-
</template>
|
|
57
|
-
</Card>
|
|
58
|
-
</template>
|
|
59
|
-
|
|
60
|
-
<script setup>
|
|
61
|
-
import { Card, CommentsWidget, HistoryWidget, FilesWidget, GalleryWidget } from '@opengis/widgets'
|
|
62
|
-
|
|
63
|
-
const tabsData = [
|
|
64
|
-
{
|
|
65
|
-
"type": "tabs",
|
|
66
|
-
"col": 12,
|
|
67
|
-
"items": [
|
|
68
|
-
{ "name": "comments", "title": "Comments" },
|
|
69
|
-
{ "name": "history", "title": "History" }
|
|
70
|
-
]
|
|
71
|
-
}
|
|
72
|
-
]
|
|
73
|
-
|
|
74
|
-
const panelsData = [
|
|
75
|
-
{ name: "files", title: "Files", col: 6, width: 6 },
|
|
76
|
-
{ name: "gallery", title: "Gallery", col: 6, width: 6 }
|
|
77
|
-
]
|
|
78
|
-
</script>
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
## Contributions
|
|
82
|
-
|
|
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
|
|
88
|
-
|
|
89
|
-
## License
|
|
90
|
-
|
|
91
|
-
This project is licensed under MIT License.
|
|
1
|
+
# OpenGIS Widgets Library
|
|
2
|
+
|
|
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
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
### Card Widget - Universal wrapper
|
|
8
|
+
|
|
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
|
+
|
|
14
|
+
### Available widgets
|
|
15
|
+
|
|
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
|
+
|
|
22
|
+
## Documentation
|
|
23
|
+
|
|
24
|
+
Check out the documentation and live demo here: [Live Demo & Docs](https://widget.opengis.info)
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
## Install & Usage
|
|
28
|
+
|
|
29
|
+
### Install
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
npm install @opengis/widgets
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### Register the components
|
|
36
|
+
|
|
37
|
+
```ts
|
|
38
|
+
import { createApp } from 'vue'
|
|
39
|
+
import App from './App.vue'
|
|
40
|
+
import { DescriptionList, DescriptionItem } from '@opengis/widgets'
|
|
41
|
+
|
|
42
|
+
createApp(App).component('DescriptionList', DescriptionList).mount('#app')
|
|
43
|
+
createApp(App).component('DescriptionItem', DescriptionItem).mount('#app')
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### Usage
|
|
47
|
+
|
|
48
|
+
```vue
|
|
49
|
+
<template>
|
|
50
|
+
<Card :data="tabsData" view="tab">
|
|
51
|
+
<template #tab-0>
|
|
52
|
+
<CommentsWidget :comments="comments" @add-comment="handleAddComment" />
|
|
53
|
+
</template>
|
|
54
|
+
<template #tab-1>
|
|
55
|
+
<HistoryWidget :items="historyItems" />
|
|
56
|
+
</template>
|
|
57
|
+
</Card>
|
|
58
|
+
</template>
|
|
59
|
+
|
|
60
|
+
<script setup>
|
|
61
|
+
import { Card, CommentsWidget, HistoryWidget, FilesWidget, GalleryWidget } from '@opengis/widgets'
|
|
62
|
+
|
|
63
|
+
const tabsData = [
|
|
64
|
+
{
|
|
65
|
+
"type": "tabs",
|
|
66
|
+
"col": 12,
|
|
67
|
+
"items": [
|
|
68
|
+
{ "name": "comments", "title": "Comments" },
|
|
69
|
+
{ "name": "history", "title": "History" }
|
|
70
|
+
]
|
|
71
|
+
}
|
|
72
|
+
]
|
|
73
|
+
|
|
74
|
+
const panelsData = [
|
|
75
|
+
{ name: "files", title: "Files", col: 6, width: 6 },
|
|
76
|
+
{ name: "gallery", title: "Gallery", col: 6, width: 6 }
|
|
77
|
+
]
|
|
78
|
+
</script>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
## Contributions
|
|
82
|
+
|
|
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
|
|
88
|
+
|
|
89
|
+
## License
|
|
90
|
+
|
|
91
|
+
This project is licensed under MIT License.
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.image-wrapper{display:grid;grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr 1fr 1fr;grid-column-gap:5px;grid-row-gap:3px;height:100%}.image0{height:100%;width:100%;grid-row-start:1;grid-column-start:1;grid-row-end:3;grid-column-end:3}.image1{grid-row-start:1;grid-column-start:3;grid-row-end:2;grid-column-end:4}.image2{grid-row-start:1;grid-column-start:4;grid-row-end:2;grid-column-end:5}.image3{grid-row-start:2;grid-column-start:3;grid-row-end:3;grid-column-end:4}.image4{grid-row-start:2;grid-column-start:4;grid-row-end:3;grid-column-end:5}.thumb-cover{position:absolute;inset:0;z-index:5;background-color:#00000080;color:#fff;display:flex;align-items:center;justify-content:center;font-size:36px}.text-value[data-v-
|
|
1
|
+
.image-wrapper{display:grid;grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr 1fr 1fr;grid-column-gap:5px;grid-row-gap:3px;height:100%}.image0{height:100%;width:100%;grid-row-start:1;grid-column-start:1;grid-row-end:3;grid-column-end:3}.image1{grid-row-start:1;grid-column-start:3;grid-row-end:2;grid-column-end:4}.image2{grid-row-start:1;grid-column-start:4;grid-row-end:2;grid-column-end:5}.image3{grid-row-start:2;grid-column-start:3;grid-row-end:3;grid-column-end:4}.image4{grid-row-start:2;grid-column-start:4;grid-row-end:3;grid-column-end:5}.thumb-cover{position:absolute;inset:0;z-index:5;background-color:#00000080;color:#fff;display:flex;align-items:center;justify-content:center;font-size:36px}.text-value[data-v-34a76c89]{word-break:break-word}.link-value[data-v-932f028c]{word-break:break-all}.date-value[data-v-cd4df08e],.status-value[data-v-aea1f529],.custom-value[data-v-12c8b3f3]{word-break:break-word}.description-list-widget[data-v-106790ef]{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.notification-enter-active[data-v-d1ac6329],.notification-leave-active[data-v-d1ac6329]{transition:all .3s ease}.notification-enter-from[data-v-d1ac6329],.notification-leave-to[data-v-d1ac6329]{opacity:0;transform:translate(100%)}.notification-move[data-v-d1ac6329]{transition:transform .3s ease}
|