treege 0.3.0 → 0.4.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/CHANGELOG.md +4 -2
- package/README.md +0 -95
- package/dist/constants/colors.d.ts +10 -0
- package/dist/features/Treege/components/TreeGrid/useTreeGrid.d.ts +0 -1
- package/dist/main.js +2888 -2262
- package/dist/main.umd.cjs +35 -33
- package/dist/types/vite-env.d.ts +0 -1
- package/package.json +2 -5
- package/dist/locales/en/button.json +0 -5
- package/dist/locales/en/form.json +0 -30
- package/dist/locales/en/modal.json +0 -6
- package/dist/locales/en/translation.json +0 -19
- package/dist/locales/fr/button.json +0 -5
- package/dist/locales/fr/form.json +0 -30
- package/dist/locales/fr/modal.json +0 -6
- package/dist/locales/fr/translation.json +0 -19
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -8,11 +8,6 @@
|
|
|
8
8
|
- [Features](#Features)
|
|
9
9
|
- [Installation](#Installation)
|
|
10
10
|
- [Usage](#Usage)
|
|
11
|
-
- [Embed Treege anywhere](#Embed-Treege-anywhere)
|
|
12
|
-
- [Provide data to iframe](#Provide-data-to-iframe)
|
|
13
|
-
- [Listen Treege event](#Listen-Treege-event)
|
|
14
|
-
- [Events listener](#Events-listener)
|
|
15
|
-
- [Events message](#Events-message)
|
|
16
11
|
- [Generate form from Treege data](#Generate-form-from-Treege-data)
|
|
17
12
|
- [Local installation](#local-installation)
|
|
18
13
|
- [Available Scripts](#Available-Scripts)
|
|
@@ -29,8 +24,6 @@
|
|
|
29
24
|
- 🚀 **[Vitest](https://vitest.dev)** - A Vite native unit test framework. It's fast!
|
|
30
25
|
- 🛠️ **[React Testing Library](https://testing-library.com/docs/react-testing-library/intro)** - React DOM testing
|
|
31
26
|
utilities
|
|
32
|
-
- 💅️ **[CSS Modules](https://github.com/css-modules/css-modules)** - CSS files in which all class names are scoped
|
|
33
|
-
locally
|
|
34
27
|
- 🐶 **[Husky](https://typicode.github.io/husky)** - Modern native git hooks made easy
|
|
35
28
|
|
|
36
29
|
## Installation
|
|
@@ -51,94 +44,6 @@ const App = () => {
|
|
|
51
44
|
export default App;
|
|
52
45
|
```
|
|
53
46
|
|
|
54
|
-
## Embed Treege anywhere
|
|
55
|
-
|
|
56
|
-
#### Treege can be easily embed in any HTML page.
|
|
57
|
-
|
|
58
|
-
```html
|
|
59
|
-
<!doctype html>
|
|
60
|
-
<html lang="en">
|
|
61
|
-
<head>
|
|
62
|
-
<title>Treege Iframe</title>
|
|
63
|
-
<style>
|
|
64
|
-
html,
|
|
65
|
-
body,
|
|
66
|
-
iframe {
|
|
67
|
-
overflow: hidden;
|
|
68
|
-
margin: 0;
|
|
69
|
-
height: 100%;
|
|
70
|
-
width: 100%;
|
|
71
|
-
border: 0;
|
|
72
|
-
}
|
|
73
|
-
</style>
|
|
74
|
-
</head>
|
|
75
|
-
<body>
|
|
76
|
-
|
|
77
|
-
<iframe src="{{YOUR_TREEGE_URL}}"></iframe>
|
|
78
|
-
|
|
79
|
-
</body>
|
|
80
|
-
</html>
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
#### Provide data to iframe
|
|
84
|
-
|
|
85
|
-
```javascript
|
|
86
|
-
const iframe = document.querySelector("iframe");
|
|
87
|
-
|
|
88
|
-
iframe.addEventListener("load", handleLoadIframe);
|
|
89
|
-
|
|
90
|
-
function handleLoadIframe() {
|
|
91
|
-
const tree = {
|
|
92
|
-
"attributes": {
|
|
93
|
-
"depth": 0,
|
|
94
|
-
"label": "Age",
|
|
95
|
-
"type": "number",
|
|
96
|
-
"isRoot": true,
|
|
97
|
-
"isLeaf": true,
|
|
98
|
-
"...": "..."
|
|
99
|
-
},
|
|
100
|
-
"children": [],
|
|
101
|
-
"name": "age"
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
setTimeout(() => {
|
|
105
|
-
iframe.contentWindow.postMessage({ source: "treege", tree, type: "setTree" }, "*");
|
|
106
|
-
}, 100);
|
|
107
|
-
}
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
#### Listen Treege event
|
|
111
|
-
|
|
112
|
-
```javascript
|
|
113
|
-
const iframe = document.querySelector("iframe");
|
|
114
|
-
|
|
115
|
-
window.addEventListener("message", handleMessage);
|
|
116
|
-
|
|
117
|
-
function handleMessage(event) {
|
|
118
|
-
// On save event is trigger from iframe
|
|
119
|
-
if (event.origin === "{{YOUR_TREEGE_URL}}" && event.data.type === "onSave" && event.data.source === "treege") {
|
|
120
|
-
// Get tree data from Treege
|
|
121
|
-
console.log(event.data.tree);
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
```
|
|
125
|
-
|
|
126
|
-
### Events listener
|
|
127
|
-
|
|
128
|
-
List of `event.data` that can be listened with`window.addEventListener("message")`
|
|
129
|
-
|
|
130
|
-
| Event name | Data |
|
|
131
|
-
|------------|---------------------------------------------------------------------------------------------|
|
|
132
|
-
| onSave | `{source: "treege", type : "onSave", tree : {{attributes: {...}, children: [], name: ""}}}` |
|
|
133
|
-
|
|
134
|
-
### Events message
|
|
135
|
-
|
|
136
|
-
List of events that can be sent with `iframe.contentWindow.postMessage`
|
|
137
|
-
|
|
138
|
-
| Event name | Data |
|
|
139
|
-
|------------|----------------------------------------------------------------------------------------------|
|
|
140
|
-
| setTree | `{source: "treege", type : "setTree", tree : {{attributes: {...}, children: [], name: ""}}}` |
|
|
141
|
-
|
|
142
47
|
## Generate form from Treege data
|
|
143
48
|
|
|
144
49
|
Form can be easily generated with the React library [treege-consumer](https://github.com/Tracktor/treege-consumer)
|