@bryntum/grid-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 CHANGED
@@ -1,53 +1,262 @@
1
- # Vue 3 wrapper for Bryntum Grid
1
+ <br>
2
+ <br>
2
3
 
3
- This package contains a wrapper that encapsulates Bryntum Grid and turns it into a Vue 3 component, exposing
4
- configuration options, properties, features, and events.
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
+ &emsp;&emsp;&emsp;&emsp;&emsp;
9
+ <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/vue.svg" alt="Vue" width="100">
10
+ </p>
5
11
 
6
- # Bryntum repository access setup
12
+ <br>
7
13
 
8
- This npm package requires access to the private Bryntum npm repository.
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/grid/docs/guide/Grid/npm-repository) for detailed information on the sign-up/login
11
- process.
14
+ # Vue 3 wrapper for Bryntum Grid Thin packages
12
15
 
13
- # Installation
16
+ This package provides a wrapper that turns Bryntum Grid into a Vue 3 component, exposing configuration options,
17
+ properties, features, and events.
14
18
 
15
- The installation is performed by running the installation command in the root of your application folder. The specific
16
- command depends on the package manager used in your application.
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/grid/docs/guide/Grid/integration/vue/multiple-products).
17
22
 
18
- The following commands are most frequently used:
23
+ ## Version Requirement
19
24
 
20
- Install using `npm`:
25
+ * Vue: `3.2` or higher
26
+ * TypeScript: `4.2` or higher
27
+ * Vite `5` or higher
21
28
 
22
- ```shell
23
- npm install @bryntum/grid-vue-3@7.1.1
29
+ ## Package Contents
30
+
31
+ | Path | Description |
32
+ |--------------|------------------------------------------------|
33
+ | `lib/` | Vue 3 wrapper components (BryntumGrid 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/grid-vue-3-thin@latest
43
+ ```
44
+
45
+ ### Component Package (Required)
46
+
47
+ ```bash
48
+ npm install @bryntum/grid-thin@latest
49
+ ```
50
+
51
+ ## Try Bryntum Online Demos
52
+
53
+ * [View Online Vue Demos](https://bryntum.com/products/grid/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 { BryntumGrid } from '@bryntum/grid-vue-3-thin';
64
+ import { gridProps } from './AppConfig';
65
+
66
+ import './App.scss';
67
+
68
+ createApp({
69
+ });
70
+ </script>
71
+
72
+ <template>
73
+ <bryntum-grid
74
+ v-bind=gridProps
75
+ />
76
+ </template>
77
+
78
+ <style lang="scss">
79
+ </style>
24
80
  ```
25
81
 
26
- Install using `yarn`:
82
+ Create a `GridConfig.ts` file in the `src/` directory with the following content:
83
+
84
+ ```typescript
85
+ import { BryntumGridProps } from '@bryntum/grid-vue-3';
86
+
87
+ export const gridProps: BryntumGridProps = {
88
+ columns : [
89
+ {
90
+ text : 'Name',
91
+ field : 'name',
92
+ flex : 1,
93
+ editor : {
94
+ type : 'textfield',
95
+ required : true
96
+ }
97
+ }, {
98
+ text : 'Age',
99
+ field : 'age',
100
+ width : 100,
101
+ type : 'number'
102
+ }, {
103
+ text : 'City',
104
+ field : 'city',
105
+ flex : 1
106
+ }, {
107
+ text : 'Food',
108
+ field : 'food',
109
+ flex : 1
110
+ }, {
111
+ text : 'Color',
112
+ field : 'color',
113
+ flex : 1,
114
+ sortable : false,
115
+ type : 'color'
116
+ }
117
+ ],
27
118
 
28
- ```shell
29
- yarn add @bryntum/grid-vue-3@7.1.1
119
+ data : [
120
+ { id : 1, name : 'Don A Taylor', age : 30, city : 'Moscow', food : 'Salad', color : 'Black' },
121
+ { id : 2, name : 'John B Adams', age : 65, city : 'Paris', food : 'Bolognese', color : 'Orange' },
122
+ { id : 3, name : 'John Doe', age : 40, city : 'London', food : 'Fish and Chips', color : 'Blue' },
123
+ { id : 4, name : 'Maria Garcia', age : 28, city : 'Madrid', food : 'Paella', color : 'Green' },
124
+ { id : 5, name : 'Li Wei', age : 35, city : 'Beijing', food : 'Dumplings', color : 'Yellow' },
125
+ { id : 6, name : 'Sara Johnson', age : 32, city : 'Sydney', food : 'Sushi', color : 'Purple' },
126
+ { id : 7, name : 'Lucas Brown', age : 22, city : 'Toronto', food : 'Poutine', color : 'Orange' },
127
+ { id : 8, name : 'Emma Wilson', age : 27, city : 'Paris', food : 'Croissant', color : 'Pink' },
128
+ { id : 9, name : 'Ivan Petrov', age : 45, city : 'St. Petersburg', food : 'Borscht', color : 'Grey' },
129
+ { id : 10, name : 'Zhang Ming', age : 50, city : 'Shanghai', food : 'Hot Pot', color : 'Purple' },
130
+ { id : 11, name : 'Sophia Martinez', age : 20, city : 'Mexico City', food : 'Tacos', color : 'Crimson' },
131
+ { id : 12, name : 'Noah Smith', age : 55, city : 'Cape Town', food : 'Biltong', color : 'Turquoise' },
132
+ { id : 13, name : 'Isabella Jones', age : 33, city : 'Rio de Janeiro', food : 'Feijoada', color : 'Magenta' },
133
+ { id : 14, name : 'Ethan Taylor', age : 29, city : 'Chicago', food : 'Deep-Dish Pizza', color : 'Cyan' },
134
+ { id : 15, name : 'Olivia Brown', age : 37, city : 'Berlin', food : 'Schnitzel', color : 'Maroon' },
135
+ { id : 16, name : 'Mia Wilson', age : 26, city : 'Rome', food : 'Pasta', color : 'Olive' },
136
+ { id : 17, name : 'Jacob Miller', age : 60, city : 'Amsterdam', food : 'Stroopwafel', color : 'Lime' },
137
+ { id : 18, name : 'Chloe Davis', age : 23, city : 'Los Angeles', food : 'Burger', color : 'Teal' },
138
+ { id : 19, name : 'Aiden Martinez', age : 48, city : 'Buenos Aires', food : 'Asado', color : 'Violet' },
139
+ { id : 20, name : 'Liam Lee', age : 38, city : 'Seoul', food : 'Kimchi', color : 'Indigo' },
140
+ { id : 21, name : 'Sophie Kim', age : 21, city : 'Tokyo', food : 'Ramen', color : 'Pink' },
141
+ { id : 22, name : 'Alexander Nguyen', age : 41, city : 'Hanoi', food : 'Pho', color : 'Coral' },
142
+ { id : 23, name : 'Ella Patel', age : 19, city : 'Mumbai', food : 'Curry', color : 'Amber' },
143
+ { id : 24, name : 'James O Connor', age : 34, city : 'Dublin', food : 'Irish Stew', color : 'Green' },
144
+ { id : 25, name : 'Isabelle Chen', age : 31, city : 'Hong Kong', food : 'Dim Sum', color : 'Brown' }
145
+ ]
146
+ };
30
147
  ```
31
148
 
32
- # Integration guide
149
+ ## Project Structure
150
+
151
+ ### Product Dependencies
152
+
153
+ API packages:
154
+
155
+ ```json
156
+ {
157
+ "dependencies": {
158
+ "@bryntum/core-thin": "7.1.3",
159
+ "@bryntum/grid-thin": "7.1.3"
160
+ }
161
+ }
162
+ ```
163
+
164
+ Framework wrapper packages:
165
+
166
+ ```json
167
+ {
168
+ "dependencies": {
169
+ "@bryntum/core-vue-3-thin": "7.1.3",
170
+ "@bryntum/grid-vue-3-thin": "7.1.3"
171
+ }
172
+ }
173
+ ```
174
+
175
+ ### Product Configuration
176
+
177
+ ```typescript
178
+ import { BryntumGridProps } from '@bryntum/grid-vue-3-thin';
179
+
180
+ const gridProps : BryntumGridProps = {
181
+ // Grid configuration
182
+ };
183
+ ```
184
+
185
+ ### Product Styling
186
+
187
+ **SCSS/CSS:**
188
+
189
+ ```css
190
+ /* FontAwesome is used for icons */
191
+ @import '@bryntum/core-thin/fontawesome/css/fontawesome.css';
192
+ @import "@bryntum/core-thin/fontawesome/css/solid.css";
193
+ /* Structural CSS */
194
+ @import '@bryntum/core-thin/core.css';
195
+ @import '@bryntum/grid-thin/grid.css';
196
+ /* Theme */
197
+ @import '@bryntum/core-thin/svalbard-light.css';
198
+ ```
199
+
200
+ ### Product Localization
201
+
202
+ ```javascript
203
+ import '@bryntum/grid-thin/lib/localization/De.js'
204
+ ```
205
+
206
+ ## Integration Guide
33
207
 
34
208
  For details on installing and using this package, see the
35
209
  [Vue Integration Guide](https://bryntum.com/products/grid/docs/guide/Grid/integration/vue/guide).
36
210
 
37
- # Online references
211
+ ## Wrappers
212
+
213
+ Vue wrappers encapsulate Bryntum components as native Vue components, exposing all configuration options,
214
+ properties, features, and events through Vue-familiar patterns like props, events, and slots.
215
+
216
+ Visit [Wrappers documentation](https://bryntum.com/products/grid/docs/guide/Grid/integration/vue/guide#wrappers) for the complete list of available
217
+ wrapper components.
218
+
219
+ ## Features
220
+
221
+ Features are optional modules that extend Bryntum Grid functionality. Each feature is suffixed with `Feature` and
222
+ can be enabled and configured through standard Vue props.
223
+
224
+ Visit [Features documentation](https://bryntum.com/products/grid/docs/guide/Grid/integration/vue/guide#features) for the complete list of available
225
+ features and their configuration options.
226
+
227
+ ## Explore All Bryntum Products
228
+
229
+ * [Bryntum Grid](https://bryntum.com/products/grid/) - High-performance data grid
230
+ * [Bryntum Scheduler](https://bryntum.com/products/scheduler/) - Resource scheduling component
231
+ * [Bryntum Scheduler Pro](https://bryntum.com/products/schedulerpro/) - Advanced scheduling with dependencies
232
+ * [Bryntum Gantt](https://bryntum.com/products/gantt/) - Project planning and management
233
+ * [Bryntum Calendar](https://bryntum.com/products/calendar/) - Full-featured calendar component
234
+ * [Bryntum TaskBoard](https://bryntum.com/products/taskboard/) - Kanban-style task management
235
+
236
+ Explore our comprehensive collection of demos:
237
+
238
+ | 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 |
239
+ |-------------------|:------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:----------------------------------------------------------------------:|:------------------------------------------------------------------------------:|
240
+ | **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) |
241
+ | **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) |
242
+ | **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) |
243
+ | **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) |
244
+ | **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) |
245
+ | **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) |
246
+
247
+ ## Online references
38
248
 
39
- * [Bryntum Vue Quick Start Guide](https://bryntum.com/products/grid/docs/guide/Grid/quick-start/vue-3)
40
- * [Bryntum Vue Integration Guide](https://bryntum.com/products/grid/docs/guide/Grid/integration/vue/guide)
41
- * [Bryntum npm repository guide](https://bryntum.com/products/grid/docs/guide/Grid/npm-repository)
42
249
  * [Bryntum Grid documentation](https://bryntum.com/products/grid/docs/)
43
250
  * [Bryntum Grid examples](https://bryntum.com/products/grid/examples/)
251
+
44
252
  * [Bryntum Support Forum](https://forum.bryntum.com/)
45
253
  * [Contact us](https://bryntum.com/contact/)
46
254
 
47
- # License and copyright
255
+ ## License and copyright
48
256
 
49
257
  This wrapper depends on Bryntum Grid, which is commercial software and requires a paid license.
50
258
  Please visit the [Bryntum Grid End User License](https://bryntum.com/products/grid/license/) for the full text of the license.
51
259
 
52
260
  Copyright © 2009-2026, Bryntum
53
261
  All rights reserved.
262
+
@@ -169,7 +169,7 @@ const H = {
169
169
  treeFeature: {},
170
170
  treeGroupFeature: {}
171
171
  },
172
- emits: ["beforeCancelCellEdit", "beforeCancelRowEdit", "beforeCellEditStart", "beforeCellRangeDelete", "beforeCellRangeEdit", "beforeColumnDragStart", "beforeColumnDropFinalize", "beforeColumnResize", "beforeCopy", "beforeCSVExport", "beforeDestroy", "beforeExcelExport", "beforeFillHandleDragStart", "beforeFinishCellEdit", "beforeFinishRowEdit", "beforeHide", "beforePaste", "beforePdfExport", "beforeRenderRow", "beforeRenderRows", "beforeRowCollapse", "beforeRowExpand", "beforeSelectionChange", "beforeSetRecord", "beforeShow", "beforeStartRowEdit", "beforeStateApply", "beforeStateSave", "beforeToggleGroup", "beforeToggleNode", "cancelCellEdit", "catchAll", "cellClick", "cellContextMenu", "cellDblClick", "cellMenuBeforeShow", "cellMenuItem", "cellMenuShow", "cellMenuToggleItem", "cellMouseEnter", "cellMouseLeave", "cellMouseOut", "cellMouseOver", "collapse", "collapseNode", "columnDrag", "columnDragStart", "columnDrop", "columnResize", "columnResizeStart", "contextMenuItem", "contextMenuToggleItem", "copy", "dataChange", "destroy", "dirtyStateChange", "dragSelecting", "elementCreated", "expand", "expandNode", "fileDrop", "fillHandleBeforeDragFinalize", "fillHandleDrag", "fillHandleDragAbort", "fillHandleDragEnd", "fillHandleDragStart", "finishCellEdit", "finishRowEdit", "focusIn", "focusOut", "gridRowBeforeDragStart", "gridRowBeforeDropFinalize", "gridRowDrag", "gridRowDragAbort", "gridRowDragStart", "gridRowDrop", "headerClick", "headerMenuBeforeShow", "headerMenuItem", "headerMenuShow", "headerMenuToggleItem", "hide", "lockRows", "mouseOut", "mouseOver", "paint", "paste", "pdfExport", "readOnly", "recompose", "renderRow", "renderRows", "resize", "responsive", "rowCollapse", "rowExpand", "rowMouseEnter", "rowMouseLeave", "scroll", "selectionChange", "selectionModeChange", "show", "split", "splitterCollapseClick", "splitterDragEnd", "splitterDragStart", "splitterExpandClick", "startCellEdit", "startRowEdit", "subGridCollapse", "subGridExpand", "toggleGroup", "toggleNode", "toolClick", "unlockRows", "unsplit"],
172
+ emits: ["beforeCancelCellEdit", "beforeCancelRowEdit", "beforeCellEditStart", "beforeCellRangeDelete", "beforeCellRangeEdit", "beforeColumnCollapseToggle", "beforeColumnDragStart", "beforeColumnDropFinalize", "beforeColumnResize", "beforeCopy", "beforeCSVExport", "beforeDestroy", "beforeExcelExport", "beforeFillHandleDragStart", "beforeFinishCellEdit", "beforeFinishRowEdit", "beforeHide", "beforePaste", "beforePdfExport", "beforeRenderRow", "beforeRenderRows", "beforeRowCollapse", "beforeRowExpand", "beforeSelectionChange", "beforeSetRecord", "beforeShow", "beforeStartRowEdit", "beforeStateApply", "beforeStateSave", "beforeToggleGroup", "beforeToggleNode", "cancelCellEdit", "catchAll", "cellClick", "cellContextMenu", "cellDblClick", "cellMenuBeforeShow", "cellMenuItem", "cellMenuShow", "cellMenuToggleItem", "cellMouseEnter", "cellMouseLeave", "cellMouseOut", "cellMouseOver", "collapse", "collapseNode", "columnCollapseToggle", "columnDrag", "columnDragStart", "columnDrop", "columnResize", "columnResizeStart", "contextMenuItem", "contextMenuToggleItem", "copy", "dataChange", "destroy", "dirtyStateChange", "dragSelecting", "elementCreated", "expand", "expandNode", "fileDrop", "fillHandleBeforeDragFinalize", "fillHandleDrag", "fillHandleDragAbort", "fillHandleDragEnd", "fillHandleDragStart", "finishCellEdit", "finishRowEdit", "focusIn", "focusOut", "gridRowBeforeDragStart", "gridRowBeforeDropFinalize", "gridRowDrag", "gridRowDragAbort", "gridRowDragStart", "gridRowDrop", "headerClick", "headerMenuBeforeShow", "headerMenuItem", "headerMenuShow", "headerMenuToggleItem", "hide", "lockRows", "mouseOut", "mouseOver", "paint", "paste", "pdfExport", "readOnly", "recompose", "renderRow", "renderRows", "resize", "responsive", "rowCollapse", "rowExpand", "rowMouseEnter", "rowMouseLeave", "scroll", "selectionChange", "selectionModeChange", "show", "split", "splitterCollapseClick", "splitterDragEnd", "splitterDragStart", "splitterExpandClick", "startCellEdit", "startRowEdit", "subGridCollapse", "subGridExpand", "toggleGroup", "toggleNode", "toolClick", "unlockRows", "unsplit"],
173
173
  setup(T, { expose: p, emit: g }) {
174
174
  const f = g, i = {
175
175
  instanceClass: B,
@@ -334,6 +334,7 @@ const H = {
334
334
  "onBeforeCellEditStart",
335
335
  "onBeforeCellRangeDelete",
336
336
  "onBeforeCellRangeEdit",
337
+ "onBeforeColumnCollapseToggle",
337
338
  "onBeforeColumnDragStart",
338
339
  "onBeforeColumnDropFinalize",
339
340
  "onBeforeColumnResize",
@@ -374,6 +375,7 @@ const H = {
374
375
  "onCellMouseOver",
375
376
  "onCollapse",
376
377
  "onCollapseNode",
378
+ "onColumnCollapseToggle",
377
379
  "onColumnDrag",
378
380
  "onColumnDragStart",
379
381
  "onColumnDrop",
@@ -481,6 +483,7 @@ const H = {
481
483
  "beforeCellEditStart",
482
484
  "beforeCellRangeDelete",
483
485
  "beforeCellRangeEdit",
486
+ "beforeColumnCollapseToggle",
484
487
  "beforeColumnDragStart",
485
488
  "beforeColumnDropFinalize",
486
489
  "beforeColumnResize",
@@ -521,6 +524,7 @@ const H = {
521
524
  "cellMouseOver",
522
525
  "collapse",
523
526
  "collapseNode",
527
+ "columnCollapseToggle",
524
528
  "columnDrag",
525
529
  "columnDragStart",
526
530
  "columnDrop",
@@ -638,4 +642,4 @@ const H = {
638
642
  export {
639
643
  G as _
640
644
  };
641
- //# sourceMappingURL=BddaT4s7.js.map
645
+ //# sourceMappingURL=CaI_GBO1.js.map