@openmfp/webcomponents 0.7.0 → 0.8.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 +89 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
# @openmfp/webcomponents
|
|
2
|
+
|
|
3
|
+
Framework-agnostic web components bundle — use in any HTML page, vanilla JS project, or with any framework without any build step.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
## ✨ Features
|
|
8
|
+
|
|
9
|
+
- **Framework-agnostic** - Works with any framework or plain HTML
|
|
10
|
+
- **No build step required** - Copy the file to your web root and load it with a `<script>` tag
|
|
11
|
+
- **Declarative UI** - Table, form, and dashboard driven by JSON schemas
|
|
12
|
+
- **Two bundles** - Full bundle or lightweight dashboard-only bundle
|
|
13
|
+
- **Custom Elements** - Standard Web Components API, no proprietary runtime
|
|
14
|
+
|
|
15
|
+
## 🚀 Getting Started
|
|
16
|
+
|
|
17
|
+
### Installation
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm install @openmfp/webcomponents
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### Usage
|
|
24
|
+
|
|
25
|
+
This package ships pre-built, self-contained bundles — no build step needed. Copy the desired bundle file to your web root and load it with a `<script>` tag:
|
|
26
|
+
|
|
27
|
+
```html
|
|
28
|
+
<!-- All components -->
|
|
29
|
+
<script type="module" src="/assets/mfp-webcomponents.js"></script>
|
|
30
|
+
|
|
31
|
+
<!-- Dashboard only (lighter) -->
|
|
32
|
+
<script type="module" src="/assets/mfp-wc-dashboard.js"></script>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
The script registers the custom elements globally. After it loads, use the tags anywhere in your HTML:
|
|
36
|
+
|
|
37
|
+
```html
|
|
38
|
+
<mfp-wc-declarative-table id="my-table"></mfp-wc-declarative-table>
|
|
39
|
+
|
|
40
|
+
<script type="module">
|
|
41
|
+
document.getElementById('my-table').config = { /* JSON schema config */ };
|
|
42
|
+
</script>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
> If you are using Angular, use [`@openmfp/ngx`](https://www.npmjs.com/package/@openmfp/ngx) instead.
|
|
46
|
+
|
|
47
|
+
## Components
|
|
48
|
+
|
|
49
|
+
### `mfp-webcomponents.js` — full bundle
|
|
50
|
+
|
|
51
|
+
| Custom element | Description | Documentation |
|
|
52
|
+
|---|---|---|
|
|
53
|
+
| `<mfp-wc-declarative-table>` | Data table driven by a JSON schema | [docs/declarative-table.md](https://github.com/openmfp/webcomponents/blob/main/docs/declarative-table.md) |
|
|
54
|
+
| `<mfp-wc-declarative-form>` | Form driven by a JSON schema | [docs/declarative-form.md](https://github.com/openmfp/webcomponents/blob/main/docs/declarative-form.md) |
|
|
55
|
+
| `<mfp-wc-declarative-table-card>` | Table with card wrapper and create/edit/delete dialogs | [docs/declarative-table-card.md](https://github.com/openmfp/webcomponents/blob/main/docs/declarative-table-card.md) |
|
|
56
|
+
| `<mfp-wc-visited-service-card>` | Recently visited services card | — |
|
|
57
|
+
|
|
58
|
+
### `mfp-wc-dashboard.js` — dashboard-only bundle
|
|
59
|
+
|
|
60
|
+
| Custom element | Description | Documentation |
|
|
61
|
+
|---|---|---|
|
|
62
|
+
| `<mfp-wc-dashboard>` | Drag-and-drop dashboard layout | [docs/dashboard.md](https://github.com/openmfp/webcomponents/blob/main/docs/dashboard.md) |
|
|
63
|
+
|
|
64
|
+
### Declarative Form API
|
|
65
|
+
|
|
66
|
+
`mfp-wc-declarative-form` exposes two extra methods:
|
|
67
|
+
|
|
68
|
+
```js
|
|
69
|
+
const form = document.querySelector('mfp-wc-declarative-form');
|
|
70
|
+
form.submit(); // triggers form submission
|
|
71
|
+
form.clear(); // resets all fields
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### Declarative Table API
|
|
75
|
+
|
|
76
|
+
`mfp-wc-declarative-table-card` exposes dialog controls:
|
|
77
|
+
|
|
78
|
+
```js
|
|
79
|
+
const card = document.querySelector('mfp-wc-declarative-table-card');
|
|
80
|
+
card.closeCreateDialog();
|
|
81
|
+
card.closeEditDialog();
|
|
82
|
+
card.closeDeleteDialog();
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
## NeoNephos Foundation
|
|
86
|
+
|
|
87
|
+
This project is part of the [NeoNephos Foundation](https://neonephos.org), a Linux Foundation Europe initiative.
|
|
88
|
+
|
|
89
|
+
<p align="center"><img alt="Bundesministerium für Wirtschaft und Energie (BMWE)-EU funding logo" src="https://apeirora.eu/assets/img/BMWK-EU.png" width="400"/></p>
|