@bryntum/taskboard-vue-3-thin 7.1.1 → 7.1.3
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 +274 -24
- package/lib/helper/WrapperHelper.js +42 -42
- package/lib/helper/WrapperHelper.js.map +1 -1
- package/package.json +1 -1
- package/src/helper/WrapperHelper.ts +5 -1
package/README.md
CHANGED
|
@@ -1,53 +1,303 @@
|
|
|
1
|
-
|
|
1
|
+
<br>
|
|
2
|
+
<br>
|
|
2
3
|
|
|
3
|
-
|
|
4
|
-
|
|
4
|
+
<p align="center">
|
|
5
|
+
<a href="https://bryntum.com/" rel="noopener" target="_blank">
|
|
6
|
+
<img width="350" src="https://bryntum.com/resources/bryntum_logo_blue.svg" alt="Bryntum logo">
|
|
7
|
+
</a>
|
|
8
|
+
     
|
|
9
|
+
<img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/vue.svg" alt="Vue" width="100">
|
|
10
|
+
</p>
|
|
5
11
|
|
|
6
|
-
|
|
12
|
+
<br>
|
|
7
13
|
|
|
8
|
-
|
|
9
|
-
You must be logged in to this repository as a licensed or trial user to access it.
|
|
10
|
-
Please check the [Online npm repository guide](https://bryntum.com/products/taskboard/docs/guide/TaskBoard/npm-repository) for detailed information on the sign-up/login
|
|
11
|
-
process.
|
|
14
|
+
# Vue 3 wrapper for Bryntum TaskBoard Thin packages
|
|
12
15
|
|
|
13
|
-
|
|
16
|
+
This package provides a wrapper that turns Bryntum TaskBoard into a Vue 3 component, exposing configuration options,
|
|
17
|
+
properties, features, and events.
|
|
14
18
|
|
|
15
|
-
|
|
16
|
-
|
|
19
|
+
> **Thin Package:** This is a thin wrapper package designed for applications that use multiple Bryntum products.
|
|
20
|
+
> Thin packages exclude bundled dependencies to avoid duplication. For details, see
|
|
21
|
+
> [Vue Multiple Products](https://bryntum.com/products/taskboard/docs/guide/TaskBoard/integration/vue/multiple-products).
|
|
17
22
|
|
|
18
|
-
|
|
23
|
+
## Version Requirement
|
|
19
24
|
|
|
20
|
-
|
|
25
|
+
* Vue: `3.2` or higher
|
|
26
|
+
* TypeScript: `4.2` or higher
|
|
27
|
+
* Vite `5` or higher
|
|
28
|
+
|
|
29
|
+
## Package Contents
|
|
30
|
+
|
|
31
|
+
| Path | Description |
|
|
32
|
+
|--------------|------------------------------------------------|
|
|
33
|
+
| `lib/` | Vue 3 wrapper components (BryntumTaskBoard etc.) |
|
|
34
|
+
| `src/` | Original Vue source files |
|
|
35
|
+
| `src/*.d.ts` | TypeScript type definitions |
|
|
36
|
+
|
|
37
|
+
## Installation
|
|
38
|
+
|
|
39
|
+
### Vue 3 Wrapper
|
|
40
|
+
|
|
41
|
+
```bash
|
|
42
|
+
npm install @bryntum/taskboard-vue-3-thin@latest
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### Component Package (Required)
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
npm install @bryntum/taskboard-thin@latest
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Try Bryntum Online Demos
|
|
52
|
+
|
|
53
|
+
* [View Online Vue Demos](https://bryntum.com/products/taskboard/examples/?framework=vue)
|
|
54
|
+
|
|
55
|
+
## Quick Start
|
|
56
|
+
|
|
57
|
+
Edit the `src/App.vue` file and replace the content with the following:
|
|
58
|
+
|
|
59
|
+
```typescript
|
|
60
|
+
<script setup>
|
|
61
|
+
import { createApp, ref } from 'vue';
|
|
62
|
+
|
|
63
|
+
import { BryntumTaskBoard, BryntumTaskBoardProjectModel } from '@bryntum/taskboard-vue-3-thin';
|
|
64
|
+
import { taskBoardProjectProps,taskBoardProps } from './AppConfig';
|
|
65
|
+
|
|
66
|
+
import './App.scss';
|
|
67
|
+
|
|
68
|
+
const taskBoardProject = ref(null);
|
|
69
|
+
|
|
70
|
+
createApp({
|
|
71
|
+
setup() {
|
|
72
|
+
return {
|
|
73
|
+
taskBoardProject
|
|
74
|
+
};
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
</script>
|
|
78
|
+
|
|
79
|
+
<template>
|
|
80
|
+
<bryntum-task-board-project-model
|
|
81
|
+
ref="taskBoardProject"
|
|
82
|
+
v-bind=taskBoardProjectProps
|
|
83
|
+
/>
|
|
84
|
+
<bryntum-task-board
|
|
85
|
+
:project="taskBoardProject"
|
|
86
|
+
v-bind=taskBoardProps
|
|
87
|
+
/>
|
|
88
|
+
|
|
89
|
+
</template>
|
|
90
|
+
|
|
91
|
+
<style lang="scss">
|
|
92
|
+
</style>
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
Create a `TaskBoardConfig.ts` file in the `src/` directory with the following content:
|
|
96
|
+
|
|
97
|
+
```typescript
|
|
98
|
+
import { type BryntumTaskBoardProps } from '@bryntum/taskboard-vue-3';
|
|
99
|
+
|
|
100
|
+
export const taskBoardProps : BryntumTaskBoardProps = {
|
|
101
|
+
// Url for resource avatar images, if you have images in `public/`, uncomment this
|
|
102
|
+
// resourceImagePath : 'users/',
|
|
103
|
+
|
|
104
|
+
// Experimental, transition moving cards using the editor
|
|
105
|
+
useDomTransition : true,
|
|
106
|
+
|
|
107
|
+
// Columns to display
|
|
108
|
+
columns : ['todo', 'doing', 'done'],
|
|
109
|
+
|
|
110
|
+
// Field used to pair a task to a column
|
|
111
|
+
columnField : 'status',
|
|
112
|
+
|
|
113
|
+
// Project using inline data
|
|
114
|
+
project : {
|
|
115
|
+
loadUrl : 'data/data.json',
|
|
116
|
+
autoLoad : true
|
|
117
|
+
}
|
|
118
|
+
};
|
|
21
119
|
|
|
22
|
-
```shell
|
|
23
|
-
npm install @bryntum/taskboard-vue-3@7.1.1
|
|
24
120
|
```
|
|
25
121
|
|
|
26
|
-
|
|
122
|
+
<details>
|
|
123
|
+
<summary>Create sample data (click to expand)</summary>
|
|
124
|
+
|
|
125
|
+
Create a `public/data/data.json` file for example data and add the following JSON data to it:
|
|
27
126
|
|
|
28
|
-
```
|
|
29
|
-
|
|
127
|
+
```json
|
|
128
|
+
{
|
|
129
|
+
"success": true,
|
|
130
|
+
"tasks": {
|
|
131
|
+
"rows": [
|
|
132
|
+
{ "id": 1, "name": "Design landing page", "status": "doing", "description": "Creating layout for the new landing page" },
|
|
133
|
+
{ "id": 2, "name": "Set up database schema", "status": "todo", "description": "Define tables and relationships for user data" },
|
|
134
|
+
{ "id": 3, "name": "Write API documentation", "status": "done", "description": "Document the REST endpoints for the project" },
|
|
135
|
+
{ "id": 4, "name": "Create login screen", "status": "doing", "description": "Implement authentication UI with validation" },
|
|
136
|
+
{ "id": 5, "name": "Integrate payment gateway", "status": "todo", "description": "Connect Stripe API to the backend" },
|
|
137
|
+
{ "id": 6, "name": "Fix navigation bugs", "status": "done", "description": "Resolve reported issues with navbar links" },
|
|
138
|
+
{ "id": 7, "name": "Build notification system", "status": "doing", "description": "Real-time push notifications for events" },
|
|
139
|
+
{ "id": 8, "name": "Add unit tests", "status": "todo", "description": "Write tests for services and components" },
|
|
140
|
+
{ "id": 9, "name": "Optimize image loading", "status": "done", "description": "Implement lazy loading for large images" },
|
|
141
|
+
{ "id": 10, "name": "Deploy staging server", "status": "doing", "description": "Set up CI/CD pipeline for staging environment" },
|
|
142
|
+
{ "id": 11, "name": "Create user profile page", "status": "todo", "description": "Design and implement profile management UI" },
|
|
143
|
+
{ "id": 12, "name": "Implement role-based access control", "status": "todo", "description": "Restrict features based on user roles" },
|
|
144
|
+
{ "id": 13, "name": "Set up error logging", "status": "todo", "description": "Integrate centralized error monitoring tool" },
|
|
145
|
+
{ "id": 14, "name": "Improve form validation", "status": "todo", "description": "Enhance validation rules for all forms" },
|
|
146
|
+
{ "id": 15, "name": "Add search functionality", "status": "todo", "description": "Implement search bar with filtering options" }
|
|
147
|
+
]
|
|
148
|
+
},
|
|
149
|
+
"resources": {
|
|
150
|
+
"rows": [
|
|
151
|
+
{ "id": 1, "name": "Angelo" },
|
|
152
|
+
{ "id": 2, "name": "Celia" },
|
|
153
|
+
{ "id": 3, "name": "Dave" },
|
|
154
|
+
{ "id": 4, "name": "Emilia" },
|
|
155
|
+
{ "id": 5, "name": "Gloria" },
|
|
156
|
+
{ "id": 6, "name": "Henrik" },
|
|
157
|
+
{ "id": 7, "name": "Kate" }
|
|
158
|
+
]
|
|
159
|
+
},
|
|
160
|
+
"assignments": {
|
|
161
|
+
"rows": [
|
|
162
|
+
{ "id": 1, "event": 1, "resource": 1 },
|
|
163
|
+
{ "id": 2, "event": 2, "resource": 2 },
|
|
164
|
+
{ "id": 3, "event": 3, "resource": 3 },
|
|
165
|
+
{ "id": 4, "event": 4, "resource": 4 },
|
|
166
|
+
{ "id": 5, "event": 5, "resource": 5 },
|
|
167
|
+
{ "id": 6, "event": 6, "resource": 6 },
|
|
168
|
+
{ "id": 7, "event": 7, "resource": 7 },
|
|
169
|
+
{ "id": 8, "event": 8, "resource": 1 },
|
|
170
|
+
{ "id": 9, "event": 9, "resource": 2 },
|
|
171
|
+
{ "id": 10, "event": 10, "resource": 3 },
|
|
172
|
+
{ "id": 11, "event": 11, "resource": 4 },
|
|
173
|
+
{ "id": 12, "event": 12, "resource": 5 },
|
|
174
|
+
{ "id": 13, "event": 1, "resource": 5 },
|
|
175
|
+
{ "id": 14, "event": 2, "resource": 5 },
|
|
176
|
+
{ "id": 15, "event": 3, "resource": 5 },
|
|
177
|
+
{ "id": 16, "event": 4, "resource": 5 },
|
|
178
|
+
{ "id": 17, "event": 6, "resource": 5 },
|
|
179
|
+
{ "id": 18, "event": 7, "resource": 5 }
|
|
180
|
+
]
|
|
181
|
+
}
|
|
182
|
+
}
|
|
30
183
|
```
|
|
31
184
|
|
|
32
|
-
|
|
185
|
+
This is the data the Bryntum TaskBoard will use.
|
|
186
|
+
|
|
187
|
+
</details>
|
|
188
|
+
|
|
189
|
+
## Project Structure
|
|
190
|
+
|
|
191
|
+
### Product Dependencies
|
|
192
|
+
|
|
193
|
+
API packages:
|
|
194
|
+
|
|
195
|
+
```json
|
|
196
|
+
{
|
|
197
|
+
"dependencies": {
|
|
198
|
+
"@bryntum/core-thin": "7.1.3",
|
|
199
|
+
"@bryntum/engine-thin": "7.1.3",
|
|
200
|
+
"@bryntum/taskboard-thin": "7.1.3"
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
Framework wrapper packages:
|
|
206
|
+
|
|
207
|
+
```json
|
|
208
|
+
{
|
|
209
|
+
"dependencies": {
|
|
210
|
+
"@bryntum/core-vue-3-thin": "7.1.3",
|
|
211
|
+
"@bryntum/taskboard-vue-3-thin": "7.1.3"
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
### Product Configuration
|
|
217
|
+
|
|
218
|
+
```typescript
|
|
219
|
+
import { BryntumTaskBoardProps } from '@bryntum/taskboard-vue-3-thin';
|
|
220
|
+
|
|
221
|
+
const taskBoardProps : BryntumTaskBoardProps = {
|
|
222
|
+
// TaskBoard configuration
|
|
223
|
+
};
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
### Product Styling
|
|
227
|
+
|
|
228
|
+
**SCSS/CSS:**
|
|
229
|
+
|
|
230
|
+
```css
|
|
231
|
+
/* FontAwesome is used for icons */
|
|
232
|
+
@import '@bryntum/core-thin/fontawesome/css/fontawesome.css';
|
|
233
|
+
@import "@bryntum/core-thin/fontawesome/css/solid.css";
|
|
234
|
+
/* Structural CSS */
|
|
235
|
+
@import '@bryntum/core-thin/core.css';
|
|
236
|
+
@import '@bryntum/taskboard-thin/taskboard.css';
|
|
237
|
+
/* Theme */
|
|
238
|
+
@import '@bryntum/core-thin/svalbard-light.css';
|
|
239
|
+
```
|
|
240
|
+
|
|
241
|
+
### Product Localization
|
|
242
|
+
|
|
243
|
+
```javascript
|
|
244
|
+
import '@bryntum/taskboard-thin/lib/localization/De.js'
|
|
245
|
+
```
|
|
246
|
+
|
|
247
|
+
## Integration Guide
|
|
33
248
|
|
|
34
249
|
For details on installing and using this package, see the
|
|
35
250
|
[Vue Integration Guide](https://bryntum.com/products/taskboard/docs/guide/TaskBoard/integration/vue/guide).
|
|
36
251
|
|
|
37
|
-
|
|
252
|
+
## Wrappers
|
|
253
|
+
|
|
254
|
+
Vue wrappers encapsulate Bryntum components as native Vue components, exposing all configuration options,
|
|
255
|
+
properties, features, and events through Vue-familiar patterns like props, events, and slots.
|
|
256
|
+
|
|
257
|
+
Visit [Wrappers documentation](https://bryntum.com/products/taskboard/docs/guide/TaskBoard/integration/vue/guide#wrappers) for the complete list of available
|
|
258
|
+
wrapper components.
|
|
259
|
+
|
|
260
|
+
## Features
|
|
261
|
+
|
|
262
|
+
Features are optional modules that extend Bryntum TaskBoard functionality. Each feature is suffixed with `Feature` and
|
|
263
|
+
can be enabled and configured through standard Vue props.
|
|
264
|
+
|
|
265
|
+
Visit [Features documentation](https://bryntum.com/products/taskboard/docs/guide/TaskBoard/integration/vue/guide#features) for the complete list of available
|
|
266
|
+
features and their configuration options.
|
|
267
|
+
|
|
268
|
+
## Explore All Bryntum Products
|
|
269
|
+
|
|
270
|
+
* [Bryntum Grid](https://bryntum.com/products/grid/) - High-performance data grid
|
|
271
|
+
* [Bryntum Scheduler](https://bryntum.com/products/scheduler/) - Resource scheduling component
|
|
272
|
+
* [Bryntum Scheduler Pro](https://bryntum.com/products/schedulerpro/) - Advanced scheduling with dependencies
|
|
273
|
+
* [Bryntum Gantt](https://bryntum.com/products/gantt/) - Project planning and management
|
|
274
|
+
* [Bryntum Calendar](https://bryntum.com/products/calendar/) - Full-featured calendar component
|
|
275
|
+
* [Bryntum TaskBoard](https://bryntum.com/products/taskboard/) - Kanban-style task management
|
|
276
|
+
|
|
277
|
+
Explore our comprehensive collection of demos:
|
|
278
|
+
|
|
279
|
+
| Product | <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/js.svg" alt="JavaScript" width="30"><br>JavaScript | <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/react.svg" alt="React" width="30"><br>React | <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/vue.svg" alt="Vue" width="30"><br>Vue | <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/angular.svg" alt="Angular" width="30"><br>Angular |
|
|
280
|
+
|-------------------|:------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:----------------------------------------------------------------------:|:------------------------------------------------------------------------------:|
|
|
281
|
+
| **Grid** | [Grid JavaScript demos](https://bryntum.com/products/grid/examples/?framework=javascript) | [Grid React demos](https://bryntum.com/products/grid/examples/?framework=react) | [Grid Vue demos](https://bryntum.com/products/grid/examples/?framework=vue) | [Grid Angular demos](https://bryntum.com/products/grid/examples/?framework=angular) |
|
|
282
|
+
| **Scheduler** | [Scheduler JavaScript demos](https://bryntum.com/products/scheduler/examples/?framework=javascript) | [Scheduler React demos](https://bryntum.com/products/scheduler/examples/?framework=react) | [Scheduler Vue demos](https://bryntum.com/products/scheduler/examples/?framework=vue) | [Scheduler Angular demos](https://bryntum.com/products/scheduler/examples/?framework=angular) |
|
|
283
|
+
| **Scheduler Pro** | [Scheduler Pro JavaScript demos](https://bryntum.com/products/schedulerpro/examples/?framework=javascript) | [Scheduler Pro React demos](https://bryntum.com/products/schedulerpro/examples/?framework=react) | [Scheduler Pro Vue demos](https://bryntum.com/products/schedulerpro/examples/?framework=vue) | [Scheduler Pro Angular demos](https://bryntum.com/products/schedulerpro/examples/?framework=angular) |
|
|
284
|
+
| **Gantt** | [Gantt JavaScript demos](https://bryntum.com/products/gantt/examples/?framework=javascript) | [Gantt React demos](https://bryntum.com/products/gantt/examples/?framework=react) | [Gantt Vue demos](https://bryntum.com/products/gantt/examples/?framework=vue) | [Gantt Angular demos](https://bryntum.com/products/gantt/examples/?framework=angular) |
|
|
285
|
+
| **Calendar** | [Calendar JavaScript demos](https://bryntum.com/products/calendar/examples/?framework=javascript) | [Calendar React demos](https://bryntum.com/products/calendar/examples/?framework=react) | [Calendar Vue demos](https://bryntum.com/products/calendar/examples/?framework=vue) | [Calendar Angular demos](https://bryntum.com/products/calendar/examples/?framework=angular) |
|
|
286
|
+
| **TaskBoard** | [TaskBoard JavaScript demos](https://bryntum.com/products/taskboard/examples/?framework=javascript) | [TaskBoard React demos](https://bryntum.com/products/taskboard/examples/?framework=react) | [TaskBoard Vue demos](https://bryntum.com/products/taskboard/examples/?framework=vue) | [TaskBoard Angular demos](https://bryntum.com/products/taskboard/examples/?framework=angular) |
|
|
287
|
+
|
|
288
|
+
## Online references
|
|
38
289
|
|
|
39
|
-
* [Bryntum Vue Quick Start Guide](https://bryntum.com/products/taskboard/docs/guide/TaskBoard/quick-start/vue-3)
|
|
40
|
-
* [Bryntum Vue Integration Guide](https://bryntum.com/products/taskboard/docs/guide/TaskBoard/integration/vue/guide)
|
|
41
|
-
* [Bryntum npm repository guide](https://bryntum.com/products/taskboard/docs/guide/TaskBoard/npm-repository)
|
|
42
290
|
* [Bryntum TaskBoard documentation](https://bryntum.com/products/taskboard/docs/)
|
|
43
291
|
* [Bryntum TaskBoard examples](https://bryntum.com/products/taskboard/examples/)
|
|
292
|
+
|
|
44
293
|
* [Bryntum Support Forum](https://forum.bryntum.com/)
|
|
45
294
|
* [Contact us](https://bryntum.com/contact/)
|
|
46
295
|
|
|
47
|
-
|
|
296
|
+
## License and copyright
|
|
48
297
|
|
|
49
298
|
This wrapper depends on Bryntum TaskBoard, which is commercial software and requires a paid license.
|
|
50
299
|
Please visit the [Bryntum TaskBoard End User License](https://bryntum.com/products/taskboard/license/) for the full text of the license.
|
|
51
300
|
|
|
52
301
|
Copyright © 2009-2026, Bryntum
|
|
53
302
|
All rights reserved.
|
|
303
|
+
|
|
@@ -67,8 +67,8 @@ Solution: Use separate parameter for each "${e}" value to enable reactive update
|
|
|
67
67
|
widgetData: e,
|
|
68
68
|
emit: n,
|
|
69
69
|
element: i,
|
|
70
|
-
processCellContent:
|
|
71
|
-
processEventContent:
|
|
70
|
+
processCellContent: o,
|
|
71
|
+
processEventContent: s,
|
|
72
72
|
processWidgetContent: l,
|
|
73
73
|
hasFrameworkRenderer: r,
|
|
74
74
|
toRaw: d
|
|
@@ -77,14 +77,14 @@ Solution: Use separate parameter for each "${e}" value to enable reactive update
|
|
|
77
77
|
for (const a of Object.keys(u))
|
|
78
78
|
f[this.camelize(a)] = u[a];
|
|
79
79
|
const {
|
|
80
|
-
instanceClass:
|
|
80
|
+
instanceClass: m,
|
|
81
81
|
instanceName: v
|
|
82
|
-
} = e,
|
|
82
|
+
} = e, y = (a) => f[a] !== void 0, p = (e.configNames || []).filter(y), C = (e.propertyConfigNames || []).filter(y), h = (e.propertyNames || []).filter(y), $ = (e.featureNames || []).filter(y), E = e.eventNames.filter((a) => !y(a) && !f[`on${this.capitalize(a)}`]), g = {
|
|
83
83
|
vueComponent: t,
|
|
84
84
|
listeners: {},
|
|
85
85
|
features: {},
|
|
86
|
-
processCellContent:
|
|
87
|
-
processEventContent:
|
|
86
|
+
processCellContent: o,
|
|
87
|
+
processEventContent: s,
|
|
88
88
|
processWidgetContent: l,
|
|
89
89
|
hasFrameworkRenderer: r
|
|
90
90
|
};
|
|
@@ -93,8 +93,8 @@ Solution: Use separate parameter for each "${e}" value to enable reactive update
|
|
|
93
93
|
...C,
|
|
94
94
|
...$
|
|
95
95
|
].forEach((a) => {
|
|
96
|
-
c.applyPropValue(g, a, f[a], !0, d), ["features", "config"].includes(a) && c.devWarningConfigProp(
|
|
97
|
-
}), g.cls = (g.cls || "") + ` b-vue-${
|
|
96
|
+
c.applyPropValue(g, a, f[a], !0, d), ["features", "config"].includes(a) && c.devWarningConfigProp(m.$name, a);
|
|
97
|
+
}), g.cls = (g.cls || "") + ` b-vue-${m.$name.toLowerCase()}-container`, e.configNames = p, e.propertyNames = [
|
|
98
98
|
...p,
|
|
99
99
|
...h,
|
|
100
100
|
...C,
|
|
@@ -106,7 +106,7 @@ Solution: Use separate parameter for each "${e}" value to enable reactive update
|
|
|
106
106
|
"insertAfter",
|
|
107
107
|
"insertBefore"
|
|
108
108
|
].find((a) => g[a]);
|
|
109
|
-
return V ? c.devWarningContainer(
|
|
109
|
+
return V ? c.devWarningContainer(m.$name, V) : v === "Button" ? g.appendTo = i : g.adopt = i, g;
|
|
110
110
|
}
|
|
111
111
|
/**
|
|
112
112
|
* Setup store events relay
|
|
@@ -115,9 +115,9 @@ Solution: Use separate parameter for each "${e}" value to enable reactive update
|
|
|
115
115
|
*/
|
|
116
116
|
static relayStores(t, e) {
|
|
117
117
|
const { dataStores: n, projectStores: i } = t;
|
|
118
|
-
n && (Object.keys(n).forEach((
|
|
119
|
-
const
|
|
120
|
-
|
|
118
|
+
n && (Object.keys(n).forEach((o) => {
|
|
119
|
+
const s = i ? e.project[o] : e[o];
|
|
120
|
+
s && (s.syncDataOnLoad == null && !s.readUrl && !s.lazyLoad && (!s.crudManager || !s.crudManager.loadUrl) && (s.syncDataOnLoad = !0), e && e.relayStoreEvents && s.relayAll(e, n[o]));
|
|
121
121
|
}), delete t.dataStores);
|
|
122
122
|
}
|
|
123
123
|
/**
|
|
@@ -144,25 +144,25 @@ Solution: Use separate parameter for each "${e}" value to enable reactive update
|
|
|
144
144
|
* @param {Boolean} [isConfig] config setting mode
|
|
145
145
|
* @param {Function} [toRaw] Vue fn to unwrap reactive object
|
|
146
146
|
*/
|
|
147
|
-
static applyPropValue(t, e, n, i = !0,
|
|
147
|
+
static applyPropValue(t, e, n, i = !0, o) {
|
|
148
148
|
if (e === "project")
|
|
149
149
|
n && typeof n == "object" && (t[e] = n.instance ? n.instance.value || n.instance : n);
|
|
150
150
|
else if (e === "features" && typeof n == "object")
|
|
151
|
-
Object.keys(n).forEach((
|
|
151
|
+
Object.keys(n).forEach((s) => c.applyPropValue(t, `${s}Feature`, n[s], i, o));
|
|
152
152
|
else if (e === "config" && typeof n == "object")
|
|
153
|
-
Object.keys(n).forEach((
|
|
153
|
+
Object.keys(n).forEach((s) => c.applyPropValue(t, s, n[s], i, o));
|
|
154
154
|
else if (e === "columns" && !i)
|
|
155
155
|
t.columns.data = n;
|
|
156
156
|
else if (e.endsWith("Feature")) {
|
|
157
|
-
const
|
|
157
|
+
const s = t.features, l = e.replace("Feature", "");
|
|
158
158
|
if (i)
|
|
159
|
-
|
|
159
|
+
s[l] = n;
|
|
160
160
|
else {
|
|
161
|
-
const r =
|
|
161
|
+
const r = s[l];
|
|
162
162
|
r && r.setConfig(n);
|
|
163
163
|
}
|
|
164
164
|
} else
|
|
165
|
-
t[e] =
|
|
165
|
+
t[e] = o ? o(n) : n;
|
|
166
166
|
}
|
|
167
167
|
/**
|
|
168
168
|
* Creates watches for vue component properties
|
|
@@ -175,12 +175,12 @@ Solution: Use separate parameter for each "${e}" value to enable reactive update
|
|
|
175
175
|
static watchProps(t, e, n) {
|
|
176
176
|
const {
|
|
177
177
|
configNames: i,
|
|
178
|
-
propertyNames:
|
|
179
|
-
instanceClass:
|
|
178
|
+
propertyNames: o,
|
|
179
|
+
instanceClass: s
|
|
180
180
|
} = e;
|
|
181
|
-
|
|
181
|
+
o.forEach((l) => n(l, (r) => {
|
|
182
182
|
const d = Array.isArray(r) ? r.slice() : r;
|
|
183
|
-
c.applyPropValue(t, l, d, !1), i.includes(l) && c.devWarningUpdateProp(
|
|
183
|
+
c.applyPropValue(t, l, d, !1), i.includes(l) && c.devWarningUpdateProp(s.$name, l);
|
|
184
184
|
})), e.configNames = [], e.propertyNames = [];
|
|
185
185
|
}
|
|
186
186
|
/**
|
|
@@ -190,11 +190,11 @@ Solution: Use separate parameter for each "${e}" value to enable reactive update
|
|
|
190
190
|
* @param {Object} context.html Object containing the Vue component properties and event listeners
|
|
191
191
|
*/
|
|
192
192
|
static processWidgetContent({ widget: t, html: e }) {
|
|
193
|
-
const { is: n, bind: i = {}, vue:
|
|
194
|
-
if (
|
|
193
|
+
const { is: n, bind: i = {}, vue: o, on: s = {} } = e, { vueComponent: l } = this, { teleports: { value: r } } = l.provides, { contentElement: d, id: f } = t;
|
|
194
|
+
if (o) {
|
|
195
195
|
const u = `key-${f}`;
|
|
196
196
|
r.has(u) && r.delete(u), b(() => {
|
|
197
|
-
r.set(u, { bind: i, on:
|
|
197
|
+
r.set(u, { bind: i, on: s, key: u, is: n, to: d });
|
|
198
198
|
});
|
|
199
199
|
}
|
|
200
200
|
}
|
|
@@ -204,7 +204,7 @@ Solution: Use separate parameter for each "${e}" value to enable reactive update
|
|
|
204
204
|
* @param {String} html The HTML content to be processed
|
|
205
205
|
*/
|
|
206
206
|
static handleVueContent(t, e) {
|
|
207
|
-
const n = (
|
|
207
|
+
const n = (s) => !!s.vueComponent?.provides?.teleports, i = t.closest(n);
|
|
208
208
|
(i?.vueComponent ? i : N.query(n))?.processWidgetContent?.({ widget: t, html: e });
|
|
209
209
|
}
|
|
210
210
|
/**
|
|
@@ -224,25 +224,25 @@ Solution: Use separate parameter for each "${e}" value to enable reactive update
|
|
|
224
224
|
targetElement: n,
|
|
225
225
|
isRelease: i
|
|
226
226
|
}) {
|
|
227
|
-
let
|
|
227
|
+
let o = n, s = !1;
|
|
228
228
|
const l = this.isVertical ? e?.elementData?.renderData : e?.elementData;
|
|
229
229
|
if (c.isVueConfig(t) && t?.is) {
|
|
230
|
-
e?.dataset?.isMilestone ?
|
|
231
|
-
const r = this.isVertical ?
|
|
232
|
-
|
|
230
|
+
e?.dataset?.isMilestone ? o = n.parentElement.parentElement.parentElement : o = n.parentElement.parentElement;
|
|
231
|
+
const r = this.isVertical ? o.elementData.renderData : o.elementData, { assignmentRecord: d } = i ? l : r, { eventRecord: f } = r, { vueComponent: u } = this, { teleports: { value: m } } = u.provides, v = f.isRecurring || f.isOccurrence, y = `assignment-${d?.id}${v ? "-" + f.id : ""}`;
|
|
232
|
+
o.vueKey && m.get(o.vueKey)?.to === n && m.delete(o.vueKey);
|
|
233
233
|
const p = { ...t }, { is: C, on: h = {} } = p;
|
|
234
234
|
delete p.is, delete p.on, b(() => {
|
|
235
|
-
|
|
235
|
+
m.set(y, {
|
|
236
236
|
bind: p,
|
|
237
|
-
key:
|
|
237
|
+
key: y,
|
|
238
238
|
is: C,
|
|
239
239
|
on: h,
|
|
240
240
|
to: n,
|
|
241
241
|
generation: d.generation
|
|
242
242
|
});
|
|
243
|
-
}),
|
|
243
|
+
}), o.vueKey = y, s = !0;
|
|
244
244
|
}
|
|
245
|
-
return
|
|
245
|
+
return s;
|
|
246
246
|
}
|
|
247
247
|
/**
|
|
248
248
|
* Cell renderer method
|
|
@@ -252,21 +252,21 @@ Solution: Use separate parameter for each "${e}" value to enable reactive update
|
|
|
252
252
|
* @returns {Boolean}
|
|
253
253
|
*/
|
|
254
254
|
static processCellContent({ rendererData: t, rendererHtml: e }) {
|
|
255
|
-
const { record: n, column: i, cellElement:
|
|
255
|
+
const { record: n, column: i, cellElement: o, row: s } = t;
|
|
256
256
|
if (c.isVueConfig(i.data) && i.data?.renderer) {
|
|
257
|
-
const { vueComponent: l } = this, { teleports: { value: r } } = l.provides, d = `${i.id}-${n.id}`, f = i.tree ?
|
|
258
|
-
|
|
259
|
-
const u = { ...e }, { is:
|
|
257
|
+
const { vueComponent: l } = this, { teleports: { value: r } } = l.provides, d = `${i.id}-${n.id}`, f = i.tree ? o.querySelector(".b-tree-cell-value") : o;
|
|
258
|
+
o.vueKey && r.delete(o.vueKey);
|
|
259
|
+
const u = { ...e }, { is: m, on: v = {} } = u;
|
|
260
260
|
delete u.is, delete u.on, b(() => {
|
|
261
|
-
|
|
261
|
+
s.id === n.id && r.set(d, {
|
|
262
262
|
bind: u,
|
|
263
263
|
key: d,
|
|
264
|
-
is:
|
|
264
|
+
is: m,
|
|
265
265
|
on: v,
|
|
266
266
|
to: f,
|
|
267
267
|
generation: n.generation
|
|
268
268
|
});
|
|
269
|
-
}),
|
|
269
|
+
}), o.vueKey = d;
|
|
270
270
|
}
|
|
271
271
|
}
|
|
272
272
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WrapperHelper.js","sources":["../../src/helper/WrapperHelper.ts"],"sourcesContent":["/**\n * Vue 3 widget helper\n */\n\nimport { type ComponentInternalInstance, nextTick } from 'vue';\nimport { type VueConfig, Widget } from '@bryntum/core-thin';\n\ndeclare global {\n interface Window {\n bryntum: {\n isTestEnv?: boolean;\n vue?: {\n isVueConfig?: (config: any) => boolean;\n handleVueContent?: (widget: Widget, html: VueConfig) => void;\n };\n };\n }\n}\n\ninterface RenderElement extends HTMLElement {\n vueKey: string;\n}\n\nexport type Data = Record<string, unknown>;\n\ntype SuppressNew<T> = { [K in keyof T]: T[ K ] }\n\ntype AnyConstructor<\n Instance extends object = object,\n Static extends object = object\n> = (new (...input: any[]) => Instance) & SuppressNew<Static>\n\ntype AnyWidget = AnyConstructor<any, any>;\n\ntype RenderData = {\n record: any,\n row: any,\n column: any,\n cellElement: RenderElement\n}\n\ntype VueTeleportConfig = {\n vue: boolean,\n is: string,\n bind?: object\n on?: object\n}\n\nexport type WidgetData<T extends AnyWidget> = {\n instanceClass: T,\n instanceName: string\n isView?: boolean,\n dataStores?: object,\n projectStores?: boolean,\n configNames: string[]\n propertyConfigNames: string[]\n propertyNames: string[]\n eventNames: string[]\n featureNames?: string[]\n}\n\nexport type WidgetConfig<T extends AnyWidget> = {\n me?: ComponentInternalInstance;\n widgetData: WidgetData<T>,\n emit: (...args: any[]) => any\n element: HTMLDivElement;\n processCellContent?: Function;\n processEventContent?: Function;\n processWidgetContent?: Function;\n hasFrameworkRenderer?: Function;\n toRaw?: Function\n}\n\nexport type BryntumConfig = Record<string, any> & {\n vueComponent?: Object,\n listeners: Record<string, Function>,\n features: {},\n processCellContent: Function,\n processEventContent: Function,\n processWidgetContent: Function;\n hasFrameworkRenderer: Function\n};\n\nexport class WrapperHelper {\n\n /**\n * Development warning. Showed when environment is set to 'development'\n * @param {String} clsName vue component instance\n * @param {String} msg console message\n */\n static devWarning(clsName: string, msg: string) {\n // @ts-ignore\n if (window.bryntum?.isTestEnv || process.env.NODE_ENV === 'development') {\n console.warn(`Bryntum${clsName}Component development warning!\\n${msg}\\n` +\n 'Please check Vue integration guide: https://bryntum.com/products/grid/docs/guide/Grid/integration/vue/guide'\n );\n }\n }\n\n static devWarningContainer(clsName: string, containerParam: string) {\n WrapperHelper.devWarning(clsName,\n `Using \"${containerParam}\" parameter for configuration is not recommended.\\n` +\n 'Widget is placed automatically inside it\\'s container element.\\n' +\n `Solution: remove \"${containerParam}\" parameter from configuration.`\n );\n }\n\n static devWarningConfigProp(clsName: string, prop: string) {\n WrapperHelper.devWarning(clsName,\n `Using \"${prop}\" parameter for configuration is not recommended.\\n` +\n `Solution: Use separate parameter for each \"${prop}\" value to enable reactive updates of the API instance`\n );\n }\n\n static devWarningUpdateProp(clsName: string, prop: string) {\n WrapperHelper.devWarning(clsName,\n `\"${prop}\" is a static config option for component constructor only. No runtime changes are supported!`\n );\n }\n\n static camelize(str: string) {\n return str.replace(/-./g, s => (s[1] || '').toUpperCase());\n }\n\n static capitalize(str: string) {\n return str.charAt(0).toUpperCase() + str.slice(1);\n }\n\n /**\n * Returns `true` if the provided configuration object is valid for Vue processing.\n * @param {*} config\n * @returns {Boolean}\n */\n static isVueConfig(config: any): boolean {\n return Boolean(config?.vue);\n }\n\n /**\n * Creates bryntum component config from vue component\n * @param {Object} context\n * @param {Object} context.me vue component instance\n * @param {Object} context.widgetData reference to data\n * @param {Function} context.emit reference to emit\n * @param {Object} context.element HTML element\n * @param {Function} context.processCellContent cell renderer method\n * @param {Function} context.processEventContent event renderer method\n * @param {Function} context.processWidgetContent widget renderer method\n * @param {Function} context.hasFrameworkRenderer checks presence of vue renderer\n * @param {Function} context.toRaw Vue fn to unwrap reactive object\n * @returns {Object} config object\n */\n static createConfig<T extends AnyWidget>({\n me,\n widgetData,\n emit,\n element,\n processCellContent,\n processEventContent,\n processWidgetContent,\n hasFrameworkRenderer,\n toRaw\n }: WidgetConfig<T>) {\n\n const\n props: Record<string, any> = {},\n vProps = me!.vnode!.props! || {};\n\n for (const key of Object.keys(vProps)) {\n // Convert possible kebab keys to camelCase\n props[this.camelize(key)] = vProps[key];\n }\n\n const\n {\n instanceClass,\n instanceName\n } = widgetData,\n isValidProp = (propName: string) => props[propName] !== undefined,\n configNames = (widgetData.configNames || []).filter(isValidProp),\n propertyConfigNames = (widgetData.propertyConfigNames || []).filter(isValidProp),\n propertyNames = (widgetData.propertyNames || []).filter(isValidProp),\n featureNames = (widgetData.featureNames || []).filter(isValidProp),\n // Disable event listeners for onProps, which are duplicating functions with preventable result support\n eventNames = widgetData.eventNames.filter(eventName => !isValidProp(eventName) && !props[`on${this.capitalize(eventName)}`]),\n bryntumConfig = {\n vueComponent : me,\n listeners : {},\n features : {},\n processCellContent,\n processEventContent,\n processWidgetContent,\n hasFrameworkRenderer\n } as BryntumConfig;\n\n // Setup events listeners\n eventNames.forEach(eventName => bryntumConfig.listeners[eventName] = (params: any) => emit(eventName, params));\n\n // Setup configs\n [\n ...configNames,\n ...propertyConfigNames,\n ...featureNames\n ].forEach(propName => {\n WrapperHelper.applyPropValue(bryntumConfig, propName, props[propName], true, toRaw);\n if (['features', 'config'].includes(propName)) {\n WrapperHelper.devWarningConfigProp(instanceClass.$name, propName);\n }\n });\n\n // Add vue wrapper class name\n bryntumConfig.cls = (bryntumConfig.cls || '') + ` b-vue-${instanceClass.$name.toLowerCase()}-container`;\n\n // Prepare watch arrays\n widgetData.configNames = configNames;\n widgetData.propertyNames = [\n ...configNames,\n ...propertyNames,\n ...propertyConfigNames,\n ...featureNames\n ];\n\n // Cleanup unused instance arrays\n widgetData.eventNames = [];\n widgetData.propertyConfigNames = [];\n widgetData.featureNames = [];\n\n // If component has no container specified in config then use adopt to Wrapper's element\n const\n containerParam = [\n 'adopt',\n 'appendTo',\n 'insertAfter',\n 'insertBefore'\n ].find((prop: string) => bryntumConfig[prop]);\n\n if (!containerParam) {\n if (instanceName === 'Button') {\n // Button should always be <a> or <button> inside owner element\n bryntumConfig.appendTo = element;\n }\n else {\n bryntumConfig.adopt = element;\n }\n }\n else {\n WrapperHelper.devWarningContainer(instanceClass.$name, containerParam);\n }\n return bryntumConfig;\n }\n\n /**\n * Setup store events relay\n * @param {Object} data reference to data\n * @param {Object} instance bryntum widget instance\n */\n static relayStores(data: any, instance: any) {\n const { dataStores, projectStores } = data;\n\n if (dataStores) {\n Object.keys(dataStores).forEach(storeName => {\n const store = projectStores ? instance.project[storeName] : instance[storeName];\n if (store) {\n\n\n if (store.syncDataOnLoad == null && !store.readUrl && !store.lazyLoad && (!store.crudManager || !store.crudManager.loadUrl)) {\n store.syncDataOnLoad = true;\n }\n\n\n\n // Makes relaying store events configurable but off by default\n if (instance && instance.relayStoreEvents) {\n store.relayAll(instance, dataStores[storeName]);\n }\n }\n });\n delete data.dataStores;\n }\n }\n\n /**\n * Creates bryntum Widget from vue component\n * @param {Object} config\n * @param {Object} config.me vue component instance\n * @param {Object} config.widgetData reference to data\n * @param {Function} config.emit reference to emit\n * @param {Object} config.element HTML element\n * @param {Function} config.processCellContent cell renderer method\n * @param {Function} config.hasFrameworkRenderer check the presence of vue renderer\n * @param {Function} config.toRaw Vue fn to unwrap reactive object\n * @returns {Object} widget object\n */\n static createWidget<T extends AnyWidget>(config: WidgetConfig<T>): InstanceType<T> {\n const\n { instanceClass } = config.widgetData,\n cfg = WrapperHelper.createConfig(config);\n return (instanceClass.$name === 'Widget' ? Widget.create(cfg) : new instanceClass(cfg)) as InstanceType<T>;\n }\n\n /**\n * Applies property value to Bryntum config or instance.\n * @param {Object} configOrInstance target object\n * @param {String} prop property name\n * @param {Object} value value\n * @param {Boolean} [isConfig] config setting mode\n * @param {Function} [toRaw] Vue fn to unwrap reactive object\n */\n static applyPropValue(configOrInstance: any, prop: string, value: any, isConfig = true, toRaw?: Function) {\n\n if (prop === 'project') {\n // Allow use ProjectModel component as project\n if (value && typeof value === 'object') {\n configOrInstance[prop] = value.instance ? value.instance.value || value.instance : value;\n }\n }\n else if (prop === 'features' && typeof value === 'object') {\n Object.keys(value).forEach(key => WrapperHelper.applyPropValue(configOrInstance, `${key}Feature`, value[key], isConfig, toRaw));\n }\n else if (prop === 'config' && typeof value === 'object') {\n Object.keys(value).forEach(key => WrapperHelper.applyPropValue(configOrInstance, key, value[key], isConfig, toRaw));\n }\n else if (prop === 'columns' && !isConfig) {\n configOrInstance['columns'].data = value;\n }\n else if (prop.endsWith('Feature')) {\n const\n features = configOrInstance['features'],\n featureName = prop.replace('Feature', '');\n if (isConfig) {\n features[featureName] = value;\n }\n else {\n const feature = features[featureName];\n if (feature) {\n feature.setConfig(value);\n }\n }\n }\n else {\n configOrInstance[prop] = toRaw ? toRaw(value) : value;\n }\n }\n\n /**\n * Creates watches for vue component properties\n * @param {Object} me vue component instance\n * @param {Object} instance bryntum widget instance\n * @param {Object} props reference to props\n * @param {Object} data reference to data\n * @param {Function} watcher watch method reference (Accepts: prop and newValue)\n */\n static watchProps<T extends AnyWidget>(\n instance: InstanceType<T>,\n data: WidgetData<T>,\n watcher: (prop: string, callback: (value: any) => void) => void) {\n const\n {\n configNames,\n propertyNames,\n instanceClass\n } = data;\n\n propertyNames.forEach(prop => watcher(prop, newValue => {\n const value = Array.isArray(newValue) ? newValue.slice() : newValue;\n WrapperHelper.applyPropValue(instance, prop, value, false);\n\n // Check if property is a config and notify\n if (configNames.includes(prop)) {\n WrapperHelper.devWarningUpdateProp(instanceClass.$name, prop);\n }\n }));\n\n // Cleanup unused instance arrays\n data.configNames = [];\n data.propertyNames = [];\n }\n\n /**\n * Called from Widget.js to add the Vue component to teleports\n * @param {Object} context\n * @param {Widget} context.widget Widget which content is rendered by the Vue component\n * @param {Object} context.html Object containing the Vue component properties and event listeners\n */\n static processWidgetContent({ widget, html }: { widget: Widget; html: VueTeleportConfig }) {\n const\n { is, bind = {}, vue, on = {} } = html,\n // @ts-ignore\n { vueComponent } = this,\n { teleports : { value : teleports } } = vueComponent.provides,\n { contentElement : to, id } = widget;\n\n if (vue) {\n const key = `key-${id}`;\n\n // delete the teleport with the same key if any\n if (teleports.has(key)) {\n teleports.delete(key);\n }\n\n nextTick(() => {\n teleports.set(key, { bind, on, key, is, to });\n });\n }\n }\n\n /**\n * Handles the content provided by a Vue component for the widget.\n * @param {Widget} widget Owner widget\n * @param {String} html The HTML content to be processed\n */\n static handleVueContent(widget: Widget, html: VueConfig): void {\n // Called when a Vue component is to provide the widget content\n const\n hasTeleports = (element: any) => Boolean(element.vueComponent?.provides?.teleports),\n parentView = widget.closest(hasTeleports) as any,\n // Find a view (grid, scheduler, etc.) which has `teleports` defined. It also has `processWidgetContent`\n view = parentView?.vueComponent ? parentView : Widget.query(hasTeleports);\n\n view?.processWidgetContent?.({ widget, html });\n }\n\n /**\n * Event renderer method\n * @param {Object} context\n * @param {*} context.jsx\n * @param {DomConfig} context.domConfig\n * @param {HTMLElement} context.targetElement\n * @param {Boolean} context.isRelease\n * @returns {Boolean}\n */\n static processEventContent({\n // Core passes it as jsx for React wrappers.\n // Let's rename it to a more appropriate name.\n jsx : rendererConfig,\n domConfig,\n targetElement,\n isRelease\n }: {\n jsx: { [key: string]: any },\n domConfig: any;\n isRelease: boolean;\n targetElement: HTMLElement & { vueKey: string }\n scrolling: boolean\n }) {\n\n let wrap: any = targetElement,\n returnValue = false;\n\n // @ts-ignore\n const domConfigData = this.isVertical ? domConfig?.elementData?.renderData : domConfig?.elementData;\n\n if (WrapperHelper.isVueConfig(rendererConfig) && rendererConfig?.is) {\n if (domConfig?.dataset?.isMilestone) {\n wrap = targetElement.parentElement!.parentElement!.parentElement!;\n }\n else {\n wrap = targetElement.parentElement!.parentElement!;\n }\n const\n // Vertical nests renderData, while horizontal does not\n // @ts-ignore\n wrapData = this.isVertical ? wrap.elementData.renderData : wrap.elementData,\n { assignmentRecord } = isRelease ? domConfigData : wrapData,\n { eventRecord } = wrapData,\n { vueComponent } = this as any,\n { teleports : { value : teleports } } = vueComponent.provides,\n\n // Recurring events are handled a bit differently so get the flag\n isRecurring = eventRecord.isRecurring || eventRecord.isOccurrence,\n key = `assignment-${assignmentRecord?.id}${isRecurring ? '-' + eventRecord.id : ''}`;\n\n if (wrap.vueKey) {\n teleports.delete(wrap.vueKey);\n }\n const\n bind = { ...rendererConfig },\n { is, on = {} } = bind;\n\n delete bind.is;\n delete bind.on;\n\n nextTick(() => {\n teleports.set(key, {\n bind,\n key,\n is,\n on,\n to : targetElement,\n generation : assignmentRecord.generation\n });\n\n });\n\n wrap.vueKey = key;\n returnValue = true;\n }\n\n return returnValue;\n }\n\n /**\n * Cell renderer method\n * @param {Object} context\n * @param {RenderData} context.rendererData\n * @param {*} context.rendererHtml\n * @returns {Boolean}\n */\n static processCellContent({ rendererData, rendererHtml }: { rendererData: RenderData, rendererHtml: any }) {\n const { record, column, cellElement, row } = rendererData;\n\n // Only run for cells with vue renderers\n if (WrapperHelper.isVueConfig(column.data) && column.data?.renderer) {\n const\n // `this` is a caller component\n { vueComponent } = this as any,\n // `teleports` is javascript Map object\n { teleports : { value : teleports } } = vueComponent.provides,\n key = `${column.id}-${record.id}`,\n renderElement = column.tree\n ? cellElement.querySelector('.b-tree-cell-value')\n : cellElement;\n\n // If the cell already has a teleport, release it\n if (cellElement.vueKey) {\n teleports.delete(cellElement.vueKey);\n }\n\n const\n bind = { ...rendererHtml },\n { is, on = {} } = bind;\n\n delete bind.is;\n delete bind.on;\n\n // Create new teleport\n nextTick(() => {\n // Only teleport if the row is still used for the same record. Since this happens async, we might have\n // scrolled over the entire block of rows since the render\n if (row.id === record.id) {\n teleports.set(key, {\n bind,\n key,\n is,\n on,\n to : renderElement,\n generation : record.generation\n });\n }\n });\n\n // Link cell to the teleport, to be able to release it above\n cellElement.vueKey = key;\n }\n }\n\n /**\n *\n * @param {Object} context\n * @param {*} context.cellContent Content to be rendered in cell (set by renderer)\n * @param {*} context.column Column being rendered\n * @returns {Boolean} `true` if there is a Vue Renderer in this cell, `false` otherwise\n */\n static hasFrameworkRenderer({ cellContent, column }: { cellContent: any, column: any }) {\n return cellContent && typeof cellContent === 'object' && WrapperHelper.isVueConfig(column?.data);\n }\n}\n\n// Expose wrapper methods on window.bryntum\nwindow.bryntum = window.bryntum || {};\nwindow.bryntum.vue = {\n isVueConfig : WrapperHelper.isVueConfig,\n handleVueContent : WrapperHelper.handleVueContent\n};\n"],"names":["WrapperHelper","clsName","msg","containerParam","prop","str","s","config","me","widgetData","emit","element","processCellContent","processEventContent","processWidgetContent","hasFrameworkRenderer","toRaw","props","vProps","key","instanceClass","instanceName","isValidProp","propName","configNames","propertyConfigNames","propertyNames","featureNames","eventNames","eventName","bryntumConfig","params","data","instance","dataStores","projectStores","storeName","store","cfg","Widget","configOrInstance","value","isConfig","features","featureName","feature","watcher","newValue","widget","html","is","bind","vue","on","vueComponent","teleports","to","id","nextTick","hasTeleports","parentView","rendererConfig","domConfig","targetElement","isRelease","wrap","returnValue","domConfigData","wrapData","assignmentRecord","eventRecord","isRecurring","rendererData","rendererHtml","record","column","cellElement","row","renderElement","cellContent"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"WrapperHelper.js","sources":["../../src/helper/WrapperHelper.ts"],"sourcesContent":["/**\n * Vue 3 widget helper\n */\n\nimport { type ComponentInternalInstance, nextTick } from 'vue';\nimport { type VueConfig, Widget } from '@bryntum/core-thin';\n\ndeclare global {\n interface Window {\n bryntum: {\n isTestEnv?: boolean;\n vue?: {\n isVueConfig?: (config: any) => boolean;\n handleVueContent?: (widget: Widget, html: VueConfig) => void;\n };\n };\n }\n}\n\ninterface RenderElement extends HTMLElement {\n vueKey: string;\n}\n\nexport type Data = Record<string, unknown>;\n\ntype SuppressNew<T> = { [K in keyof T]: T[ K ] }\n\ntype AnyConstructor<\n Instance extends object = object,\n Static extends object = object\n> = (new (...input: any[]) => Instance) & SuppressNew<Static>\n\ntype AnyWidget = AnyConstructor<any, any>;\n\ntype RenderData = {\n record: any,\n row: any,\n column: any,\n cellElement: RenderElement\n}\n\ntype VueTeleportConfig = {\n vue: boolean,\n is: string,\n bind?: object\n on?: object\n}\n\nexport type WidgetData<T extends AnyWidget> = {\n instanceClass: T,\n instanceName: string\n isView?: boolean,\n dataStores?: object,\n projectStores?: boolean,\n configNames: string[]\n propertyConfigNames: string[]\n propertyNames: string[]\n eventNames: string[]\n featureNames?: string[]\n}\n\nexport type WidgetConfig<T extends AnyWidget> = {\n me?: ComponentInternalInstance;\n widgetData: WidgetData<T>,\n emit: (...args: any[]) => any\n element: HTMLDivElement;\n processCellContent?: Function;\n processEventContent?: Function;\n processWidgetContent?: Function;\n hasFrameworkRenderer?: Function;\n toRaw?: Function\n}\n\nexport type BryntumConfig = Record<string, any> & {\n vueComponent?: Object,\n listeners: Record<string, Function>,\n features: {},\n processCellContent: Function,\n processEventContent: Function,\n processWidgetContent: Function;\n hasFrameworkRenderer: Function\n};\n\nexport class WrapperHelper {\n\n /**\n * Development warning. Showed when environment is set to 'development'\n * @param {String} clsName vue component instance\n * @param {String} msg console message\n */\n static devWarning(clsName: string, msg: string) {\n // @ts-ignore\n if (window.bryntum?.isTestEnv || process.env.NODE_ENV === 'development') {\n console.warn(`Bryntum${clsName}Component development warning!\\n${msg}\\n` +\n 'Please check Vue integration guide: https://bryntum.com/products/grid/docs/guide/Grid/integration/vue/guide'\n );\n }\n }\n\n static devWarningContainer(clsName: string, containerParam: string) {\n WrapperHelper.devWarning(clsName,\n `Using \"${containerParam}\" parameter for configuration is not recommended.\\n` +\n 'Widget is placed automatically inside it\\'s container element.\\n' +\n `Solution: remove \"${containerParam}\" parameter from configuration.`\n );\n }\n\n static devWarningConfigProp(clsName: string, prop: string) {\n WrapperHelper.devWarning(clsName,\n `Using \"${prop}\" parameter for configuration is not recommended.\\n` +\n `Solution: Use separate parameter for each \"${prop}\" value to enable reactive updates of the API instance`\n );\n }\n\n static devWarningUpdateProp(clsName: string, prop: string) {\n WrapperHelper.devWarning(clsName,\n `\"${prop}\" is a static config option for component constructor only. No runtime changes are supported!`\n );\n }\n\n static camelize(str: string) {\n return str.replace(/-./g, s => (s[1] || '').toUpperCase());\n }\n\n static capitalize(str: string) {\n return str.charAt(0).toUpperCase() + str.slice(1);\n }\n\n /**\n * Returns `true` if the provided configuration object is valid for Vue processing.\n * @param {*} config\n * @returns {Boolean}\n */\n static isVueConfig(config: any): boolean {\n return Boolean(config?.vue);\n }\n\n /**\n * Creates bryntum component config from vue component\n * @param {Object} context\n * @param {Object} context.me vue component instance\n * @param {Object} context.widgetData reference to data\n * @param {Function} context.emit reference to emit\n * @param {Object} context.element HTML element\n * @param {Function} context.processCellContent cell renderer method\n * @param {Function} context.processEventContent event renderer method\n * @param {Function} context.processWidgetContent widget renderer method\n * @param {Function} context.hasFrameworkRenderer checks presence of vue renderer\n * @param {Function} context.toRaw Vue fn to unwrap reactive object\n * @returns {Object} config object\n */\n static createConfig<T extends AnyWidget>({\n me,\n widgetData,\n emit,\n element,\n processCellContent,\n processEventContent,\n processWidgetContent,\n hasFrameworkRenderer,\n toRaw\n }: WidgetConfig<T>) {\n\n const\n props: Record<string, any> = {},\n vProps = me!.vnode!.props! || {};\n\n for (const key of Object.keys(vProps)) {\n // Convert possible kebab keys to camelCase\n props[this.camelize(key)] = vProps[key];\n }\n\n const\n {\n instanceClass,\n instanceName\n } = widgetData,\n isValidProp = (propName: string) => props[propName] !== undefined,\n configNames = (widgetData.configNames || []).filter(isValidProp),\n propertyConfigNames = (widgetData.propertyConfigNames || []).filter(isValidProp),\n propertyNames = (widgetData.propertyNames || []).filter(isValidProp),\n featureNames = (widgetData.featureNames || []).filter(isValidProp),\n // Disable event listeners for onProps, which are duplicating functions with preventable result support\n eventNames = widgetData.eventNames.filter(eventName => !isValidProp(eventName) && !props[`on${this.capitalize(eventName)}`]),\n bryntumConfig = {\n vueComponent : me,\n listeners : {},\n features : {},\n processCellContent,\n processEventContent,\n processWidgetContent,\n hasFrameworkRenderer\n } as BryntumConfig;\n\n // Setup events listeners\n eventNames.forEach(eventName => bryntumConfig.listeners[eventName] = (params: any) => emit(eventName, params));\n\n // Setup configs\n [\n ...configNames,\n ...propertyConfigNames,\n ...featureNames\n ].forEach(propName => {\n WrapperHelper.applyPropValue(bryntumConfig, propName, props[propName], true, toRaw);\n if (['features', 'config'].includes(propName)) {\n WrapperHelper.devWarningConfigProp(instanceClass.$name, propName);\n }\n });\n\n // Add vue wrapper class name\n bryntumConfig.cls = (bryntumConfig.cls || '') + ` b-vue-${instanceClass.$name.toLowerCase()}-container`;\n\n // Prepare watch arrays\n widgetData.configNames = configNames;\n widgetData.propertyNames = [\n ...configNames,\n ...propertyNames,\n ...propertyConfigNames,\n ...featureNames\n ];\n\n // Cleanup unused instance arrays\n widgetData.eventNames = [];\n widgetData.propertyConfigNames = [];\n widgetData.featureNames = [];\n\n // If component has no container specified in config then use adopt to Wrapper's element\n const\n containerParam = [\n 'adopt',\n 'appendTo',\n 'insertAfter',\n 'insertBefore'\n ].find((prop: string) => bryntumConfig[prop]);\n\n if (!containerParam) {\n if (instanceName === 'Button') {\n // Button should always be <a> or <button> inside owner element\n bryntumConfig.appendTo = element;\n }\n else {\n bryntumConfig.adopt = element;\n }\n }\n else {\n WrapperHelper.devWarningContainer(instanceClass.$name, containerParam);\n }\n return bryntumConfig;\n }\n\n /**\n * Setup store events relay\n * @param {Object} data reference to data\n * @param {Object} instance bryntum widget instance\n */\n static relayStores(data: any, instance: any) {\n const { dataStores, projectStores } = data;\n\n if (dataStores) {\n Object.keys(dataStores).forEach(storeName => {\n const store = projectStores ? instance.project[storeName] : instance[storeName];\n if (store) {\n\n\n if (store.syncDataOnLoad == null && !store.readUrl && !store.lazyLoad && (!store.crudManager || !store.crudManager.loadUrl)) {\n store.syncDataOnLoad = true;\n }\n\n\n\n // Makes relaying store events configurable but off by default\n if (instance && instance.relayStoreEvents) {\n store.relayAll(instance, dataStores[storeName]);\n }\n }\n });\n delete data.dataStores;\n }\n }\n\n /**\n * Creates bryntum Widget from vue component\n * @param {Object} config\n * @param {Object} config.me vue component instance\n * @param {Object} config.widgetData reference to data\n * @param {Function} config.emit reference to emit\n * @param {Object} config.element HTML element\n * @param {Function} config.processCellContent cell renderer method\n * @param {Function} config.hasFrameworkRenderer check the presence of vue renderer\n * @param {Function} config.toRaw Vue fn to unwrap reactive object\n * @returns {Object} widget object\n */\n static createWidget<T extends AnyWidget>(config: WidgetConfig<T>): InstanceType<T> {\n const\n { instanceClass } = config.widgetData,\n cfg = WrapperHelper.createConfig(config);\n return (instanceClass.$name === 'Widget' ? Widget.create(cfg) : new instanceClass(cfg)) as InstanceType<T>;\n }\n\n /**\n * Applies property value to Bryntum config or instance.\n * @param {Object} configOrInstance target object\n * @param {String} prop property name\n * @param {Object} value value\n * @param {Boolean} [isConfig] config setting mode\n * @param {Function} [toRaw] Vue fn to unwrap reactive object\n */\n static applyPropValue(configOrInstance: any, prop: string, value: any, isConfig = true, toRaw?: Function) {\n\n if (prop === 'project') {\n // Allow use ProjectModel component as project\n if (value && typeof value === 'object') {\n configOrInstance[prop] = value.instance ? value.instance.value || value.instance : value;\n }\n }\n else if (prop === 'features' && typeof value === 'object') {\n Object.keys(value).forEach(key => WrapperHelper.applyPropValue(configOrInstance, `${key}Feature`, value[key], isConfig, toRaw));\n }\n else if (prop === 'config' && typeof value === 'object') {\n Object.keys(value).forEach(key => WrapperHelper.applyPropValue(configOrInstance, key, value[key], isConfig, toRaw));\n }\n else if (prop === 'columns' && !isConfig) {\n configOrInstance['columns'].data = value;\n }\n else if (prop.endsWith('Feature')) {\n const\n features = configOrInstance['features'],\n featureName = prop.replace('Feature', '');\n if (isConfig) {\n features[featureName] = value;\n }\n else {\n const feature = features[featureName];\n if (feature) {\n feature.setConfig(value);\n }\n }\n }\n else {\n configOrInstance[prop] = toRaw ? toRaw(value) : value;\n }\n }\n\n /**\n * Creates watches for vue component properties\n * @param {Object} me vue component instance\n * @param {Object} instance bryntum widget instance\n * @param {Object} props reference to props\n * @param {Object} data reference to data\n * @param {Function} watcher watch method reference (Accepts: prop and newValue)\n */\n static watchProps<T extends AnyWidget>(\n instance: InstanceType<T>,\n data: WidgetData<T>,\n watcher: (prop: string, callback: (value: any) => void) => void) {\n const\n {\n configNames,\n propertyNames,\n instanceClass\n } = data;\n\n propertyNames.forEach(prop => watcher(prop, newValue => {\n const value = Array.isArray(newValue) ? newValue.slice() : newValue;\n WrapperHelper.applyPropValue(instance, prop, value, false);\n\n // Check if property is a config and notify\n if (configNames.includes(prop)) {\n WrapperHelper.devWarningUpdateProp(instanceClass.$name, prop);\n }\n }));\n\n // Cleanup unused instance arrays\n data.configNames = [];\n data.propertyNames = [];\n }\n\n /**\n * Called from Widget.js to add the Vue component to teleports\n * @param {Object} context\n * @param {Widget} context.widget Widget which content is rendered by the Vue component\n * @param {Object} context.html Object containing the Vue component properties and event listeners\n */\n static processWidgetContent({ widget, html }: { widget: Widget; html: VueTeleportConfig }) {\n const\n { is, bind = {}, vue, on = {} } = html,\n // @ts-ignore\n { vueComponent } = this,\n { teleports : { value : teleports } } = vueComponent.provides,\n { contentElement : to, id } = widget;\n\n if (vue) {\n const key = `key-${id}`;\n\n // delete the teleport with the same key if any\n if (teleports.has(key)) {\n teleports.delete(key);\n }\n\n nextTick(() => {\n teleports.set(key, { bind, on, key, is, to });\n });\n }\n }\n\n /**\n * Handles the content provided by a Vue component for the widget.\n * @param {Widget} widget Owner widget\n * @param {String} html The HTML content to be processed\n */\n static handleVueContent(widget: Widget, html: VueConfig): void {\n // Called when a Vue component is to provide the widget content\n const\n hasTeleports = (element: any) => Boolean(element.vueComponent?.provides?.teleports),\n parentView = widget.closest(hasTeleports) as any,\n // Find a view (grid, scheduler, etc.) which has `teleports` defined. It also has `processWidgetContent`\n view = parentView?.vueComponent ? parentView : Widget.query(hasTeleports);\n\n view?.processWidgetContent?.({ widget, html });\n }\n\n /**\n * Event renderer method\n * @param {Object} context\n * @param {*} context.jsx\n * @param {DomConfig} context.domConfig\n * @param {HTMLElement} context.targetElement\n * @param {Boolean} context.isRelease\n * @returns {Boolean}\n */\n static processEventContent({\n // Core passes it as jsx for React wrappers.\n // Let's rename it to a more appropriate name.\n jsx : rendererConfig,\n domConfig,\n targetElement,\n isRelease\n }: {\n jsx: { [key: string]: any },\n domConfig: any;\n isRelease: boolean;\n targetElement: HTMLElement & { vueKey: string }\n scrolling: boolean\n }) {\n\n let wrap: any = targetElement,\n returnValue = false;\n\n // @ts-ignore\n const domConfigData = this.isVertical ? domConfig?.elementData?.renderData : domConfig?.elementData;\n\n if (WrapperHelper.isVueConfig(rendererConfig) && rendererConfig?.is) {\n if (domConfig?.dataset?.isMilestone) {\n wrap = targetElement.parentElement!.parentElement!.parentElement!;\n }\n else {\n wrap = targetElement.parentElement!.parentElement!;\n }\n const\n // Vertical nests renderData, while horizontal does not\n // @ts-ignore\n wrapData = this.isVertical ? wrap.elementData.renderData : wrap.elementData,\n { assignmentRecord } = isRelease ? domConfigData : wrapData,\n { eventRecord } = wrapData,\n { vueComponent } = this as any,\n { teleports : { value : teleports } } = vueComponent.provides,\n\n // Recurring events are handled a bit differently so get the flag\n isRecurring = eventRecord.isRecurring || eventRecord.isOccurrence,\n key = `assignment-${assignmentRecord?.id}${isRecurring ? '-' + eventRecord.id : ''}`;\n\n // Only delete the teleport if it's rendering into this specific targetElement.\n // Prevents issues when elements are reused during scrolling with LockRows feature.\n if (wrap.vueKey && teleports.get(wrap.vueKey)?.to === targetElement) {\n // Only delete if the existing teleport is rendering into this specific targetElement\n teleports.delete(wrap.vueKey);\n }\n\n const\n bind = { ...rendererConfig },\n { is, on = {} } = bind;\n\n delete bind.is;\n delete bind.on;\n\n nextTick(() => {\n teleports.set(key, {\n bind,\n key,\n is,\n on,\n to : targetElement,\n generation : assignmentRecord.generation\n });\n\n });\n\n wrap.vueKey = key;\n returnValue = true;\n }\n\n return returnValue;\n }\n\n /**\n * Cell renderer method\n * @param {Object} context\n * @param {RenderData} context.rendererData\n * @param {*} context.rendererHtml\n * @returns {Boolean}\n */\n static processCellContent({ rendererData, rendererHtml }: { rendererData: RenderData, rendererHtml: any }) {\n const { record, column, cellElement, row } = rendererData;\n\n // Only run for cells with vue renderers\n if (WrapperHelper.isVueConfig(column.data) && column.data?.renderer) {\n const\n // `this` is a caller component\n { vueComponent } = this as any,\n // `teleports` is javascript Map object\n { teleports : { value : teleports } } = vueComponent.provides,\n key = `${column.id}-${record.id}`,\n renderElement = column.tree\n ? cellElement.querySelector('.b-tree-cell-value')\n : cellElement;\n\n // If the cell already has a teleport, release it\n if (cellElement.vueKey) {\n teleports.delete(cellElement.vueKey);\n }\n\n const\n bind = { ...rendererHtml },\n { is, on = {} } = bind;\n\n delete bind.is;\n delete bind.on;\n\n // Create new teleport\n nextTick(() => {\n // Only teleport if the row is still used for the same record. Since this happens async, we might have\n // scrolled over the entire block of rows since the render\n if (row.id === record.id) {\n teleports.set(key, {\n bind,\n key,\n is,\n on,\n to : renderElement,\n generation : record.generation\n });\n }\n });\n\n // Link cell to the teleport, to be able to release it above\n cellElement.vueKey = key;\n }\n }\n\n /**\n *\n * @param {Object} context\n * @param {*} context.cellContent Content to be rendered in cell (set by renderer)\n * @param {*} context.column Column being rendered\n * @returns {Boolean} `true` if there is a Vue Renderer in this cell, `false` otherwise\n */\n static hasFrameworkRenderer({ cellContent, column }: { cellContent: any, column: any }) {\n return cellContent && typeof cellContent === 'object' && WrapperHelper.isVueConfig(column?.data);\n }\n}\n\n// Expose wrapper methods on window.bryntum\nwindow.bryntum = window.bryntum || {};\nwindow.bryntum.vue = {\n isVueConfig : WrapperHelper.isVueConfig,\n handleVueContent : WrapperHelper.handleVueContent\n};\n"],"names":["WrapperHelper","clsName","msg","containerParam","prop","str","s","config","me","widgetData","emit","element","processCellContent","processEventContent","processWidgetContent","hasFrameworkRenderer","toRaw","props","vProps","key","instanceClass","instanceName","isValidProp","propName","configNames","propertyConfigNames","propertyNames","featureNames","eventNames","eventName","bryntumConfig","params","data","instance","dataStores","projectStores","storeName","store","cfg","Widget","configOrInstance","value","isConfig","features","featureName","feature","watcher","newValue","widget","html","is","bind","vue","on","vueComponent","teleports","to","id","nextTick","hasTeleports","parentView","rendererConfig","domConfig","targetElement","isRelease","wrap","returnValue","domConfigData","wrapData","assignmentRecord","eventRecord","isRecurring","rendererData","rendererHtml","record","column","cellElement","row","renderElement","cellContent"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -469,9 +469,13 @@ export class WrapperHelper {
|
|
|
469
469
|
isRecurring = eventRecord.isRecurring || eventRecord.isOccurrence,
|
|
470
470
|
key = `assignment-${assignmentRecord?.id}${isRecurring ? '-' + eventRecord.id : ''}`;
|
|
471
471
|
|
|
472
|
-
if
|
|
472
|
+
// Only delete the teleport if it's rendering into this specific targetElement.
|
|
473
|
+
// Prevents issues when elements are reused during scrolling with LockRows feature.
|
|
474
|
+
if (wrap.vueKey && teleports.get(wrap.vueKey)?.to === targetElement) {
|
|
475
|
+
// Only delete if the existing teleport is rendering into this specific targetElement
|
|
473
476
|
teleports.delete(wrap.vueKey);
|
|
474
477
|
}
|
|
478
|
+
|
|
475
479
|
const
|
|
476
480
|
bind = { ...rendererConfig },
|
|
477
481
|
{ is, on = {} } = bind;
|