@bryntum/grid-vue-3 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,207 @@
1
+ <br>
2
+ <br>
3
+
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>
11
+
12
+ <br>
13
+
1
14
  # Vue 3 wrapper for Bryntum Grid
2
15
 
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.
16
+ This package provides a wrapper that turns Bryntum Grid into a Vue 3 component, exposing configuration options,
17
+ properties, features, and events.
18
+
19
+ ## Version Requirement
5
20
 
6
- # Bryntum repository access setup
21
+ * Vue: `3.2` or higher
22
+ * TypeScript: `4.2` or higher
23
+ * Vite `5` or higher
7
24
 
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.
25
+ ## Package Contents
12
26
 
13
- # Installation
27
+ | Path | Description |
28
+ |--------------|------------------------------------------------|
29
+ | `lib/` | Vue 3 wrapper components (BryntumGrid etc.) |
30
+ | `src/` | Original Vue source files |
31
+ | `src/*.d.ts` | TypeScript type definitions |
14
32
 
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.
33
+ **Note:** This is a wrapper package. The core `@bryntum/grid` package must be installed separately.
17
34
 
18
- The following commands are most frequently used:
35
+ ## Installation
19
36
 
20
- Install using `npm`:
37
+ ### Vue 3 Wrapper
21
38
 
22
- ```shell
23
- npm install @bryntum/grid-vue-3@7.1.1
39
+ ```bash
40
+ npm install @bryntum/grid-vue-3@latest
24
41
  ```
25
42
 
26
- Install using `yarn`:
43
+ ### Component Package (Required)
27
44
 
28
- ```shell
29
- yarn add @bryntum/grid-vue-3@7.1.1
45
+ ```bash
46
+ npm install @bryntum/grid@latest
30
47
  ```
31
48
 
32
- # Integration guide
49
+ ## Try Bryntum Online Demos
50
+
51
+ * [View Online Vue Demos](https://bryntum.com/products/grid/examples/?framework=vue)
52
+
53
+ ## Quick Start
54
+
55
+ Edit the `src/App.vue` file and replace the content with the following:
56
+
57
+ ```typescript
58
+ <script setup>
59
+ import { BryntumGrid } from '@bryntum/grid-vue-3';
60
+ import { gridProps } from './AppConfig.js';
61
+ </script>
62
+
63
+ <template>
64
+ <bryntum-grid v-bind=gridProps />
65
+ </template>
66
+
67
+ <style lang="scss">
68
+ @import './App.scss';
69
+ </style>
70
+ ```
71
+
72
+ Create a `GridConfig.ts` file in the `src/` directory with the following content:
73
+
74
+ ```typescript
75
+ import { BryntumGridProps } from '@bryntum/grid-vue-3';
76
+
77
+ export const gridProps: BryntumGridProps = {
78
+ columns : [
79
+ {
80
+ text : 'Name',
81
+ field : 'name',
82
+ flex : 1,
83
+ editor : {
84
+ type : 'textfield',
85
+ required : true
86
+ }
87
+ }, {
88
+ text : 'Age',
89
+ field : 'age',
90
+ width : 100,
91
+ type : 'number'
92
+ }, {
93
+ text : 'City',
94
+ field : 'city',
95
+ flex : 1
96
+ }, {
97
+ text : 'Food',
98
+ field : 'food',
99
+ flex : 1
100
+ }, {
101
+ text : 'Color',
102
+ field : 'color',
103
+ flex : 1,
104
+ sortable : false,
105
+ type : 'color'
106
+ }
107
+ ],
108
+
109
+ data : [
110
+ { id : 1, name : 'Don A Taylor', age : 30, city : 'Moscow', food : 'Salad', color : 'Black' },
111
+ { id : 2, name : 'John B Adams', age : 65, city : 'Paris', food : 'Bolognese', color : 'Orange' },
112
+ { id : 3, name : 'John Doe', age : 40, city : 'London', food : 'Fish and Chips', color : 'Blue' },
113
+ { id : 4, name : 'Maria Garcia', age : 28, city : 'Madrid', food : 'Paella', color : 'Green' },
114
+ { id : 5, name : 'Li Wei', age : 35, city : 'Beijing', food : 'Dumplings', color : 'Yellow' },
115
+ { id : 6, name : 'Sara Johnson', age : 32, city : 'Sydney', food : 'Sushi', color : 'Purple' },
116
+ { id : 7, name : 'Lucas Brown', age : 22, city : 'Toronto', food : 'Poutine', color : 'Orange' },
117
+ { id : 8, name : 'Emma Wilson', age : 27, city : 'Paris', food : 'Croissant', color : 'Pink' },
118
+ { id : 9, name : 'Ivan Petrov', age : 45, city : 'St. Petersburg', food : 'Borscht', color : 'Grey' },
119
+ { id : 10, name : 'Zhang Ming', age : 50, city : 'Shanghai', food : 'Hot Pot', color : 'Purple' },
120
+ { id : 11, name : 'Sophia Martinez', age : 20, city : 'Mexico City', food : 'Tacos', color : 'Crimson' },
121
+ { id : 12, name : 'Noah Smith', age : 55, city : 'Cape Town', food : 'Biltong', color : 'Turquoise' },
122
+ { id : 13, name : 'Isabella Jones', age : 33, city : 'Rio de Janeiro', food : 'Feijoada', color : 'Magenta' },
123
+ { id : 14, name : 'Ethan Taylor', age : 29, city : 'Chicago', food : 'Deep-Dish Pizza', color : 'Cyan' },
124
+ { id : 15, name : 'Olivia Brown', age : 37, city : 'Berlin', food : 'Schnitzel', color : 'Maroon' },
125
+ { id : 16, name : 'Mia Wilson', age : 26, city : 'Rome', food : 'Pasta', color : 'Olive' },
126
+ { id : 17, name : 'Jacob Miller', age : 60, city : 'Amsterdam', food : 'Stroopwafel', color : 'Lime' },
127
+ { id : 18, name : 'Chloe Davis', age : 23, city : 'Los Angeles', food : 'Burger', color : 'Teal' },
128
+ { id : 19, name : 'Aiden Martinez', age : 48, city : 'Buenos Aires', food : 'Asado', color : 'Violet' },
129
+ { id : 20, name : 'Liam Lee', age : 38, city : 'Seoul', food : 'Kimchi', color : 'Indigo' },
130
+ { id : 21, name : 'Sophie Kim', age : 21, city : 'Tokyo', food : 'Ramen', color : 'Pink' },
131
+ { id : 22, name : 'Alexander Nguyen', age : 41, city : 'Hanoi', food : 'Pho', color : 'Coral' },
132
+ { id : 23, name : 'Ella Patel', age : 19, city : 'Mumbai', food : 'Curry', color : 'Amber' },
133
+ { id : 24, name : 'James O Connor', age : 34, city : 'Dublin', food : 'Irish Stew', color : 'Green' },
134
+ { id : 25, name : 'Isabelle Chen', age : 31, city : 'Hong Kong', food : 'Dim Sum', color : 'Brown' }
135
+ ]
136
+ };
137
+ ```
138
+
139
+ Lastly, add some styling to your `src/style.css`:
140
+
141
+ ```css
142
+ /* FontAwesome is used for icons */
143
+ @import '@bryntum/grid/fontawesome/css/fontawesome.css';
144
+ @import '@bryntum/grid/fontawesome/css/solid.css';
145
+ /* Structural CSS */
146
+ @import "@bryntum/grid/grid.css";
147
+ /* Bryntum theme of your choice */
148
+ @import "@bryntum/grid/svalbard-light.css";
149
+ ```
150
+
151
+ ## Integration Guide
33
152
 
34
153
  For details on installing and using this package, see the
35
154
  [Vue Integration Guide](https://bryntum.com/products/grid/docs/guide/Grid/integration/vue/guide).
36
155
 
37
- # Online references
156
+ ## Wrappers
157
+
158
+ Vue wrappers encapsulate Bryntum components as native Vue components, exposing all configuration options,
159
+ properties, features, and events through Vue-familiar patterns like props, events, and slots.
160
+
161
+ Visit [Wrappers documentation](https://bryntum.com/products/grid/docs/guide/Grid/integration/vue/guide#wrappers) for the complete list of available
162
+ wrapper components.
163
+
164
+ ## Features
165
+
166
+ Features are optional modules that extend Bryntum Grid functionality. Each feature is suffixed with `Feature` and
167
+ can be enabled and configured through standard Vue props.
168
+
169
+ Visit [Features documentation](https://bryntum.com/products/grid/docs/guide/Grid/integration/vue/guide#features) for the complete list of available
170
+ features and their configuration options.
171
+
172
+ ## Explore All Bryntum Products
173
+
174
+ * [Bryntum Grid](https://bryntum.com/products/grid/) - High-performance data grid
175
+ * [Bryntum Scheduler](https://bryntum.com/products/scheduler/) - Resource scheduling component
176
+ * [Bryntum Scheduler Pro](https://bryntum.com/products/schedulerpro/) - Advanced scheduling with dependencies
177
+ * [Bryntum Gantt](https://bryntum.com/products/gantt/) - Project planning and management
178
+ * [Bryntum Calendar](https://bryntum.com/products/calendar/) - Full-featured calendar component
179
+ * [Bryntum TaskBoard](https://bryntum.com/products/taskboard/) - Kanban-style task management
180
+
181
+ Explore our comprehensive collection of demos:
182
+
183
+ | 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 |
184
+ |-------------------|:------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:----------------------------------------------------------------------:|:------------------------------------------------------------------------------:|
185
+ | **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) |
186
+ | **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) |
187
+ | **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) |
188
+ | **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) |
189
+ | **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) |
190
+ | **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) |
191
+
192
+ ## Online references
38
193
 
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
194
  * [Bryntum Grid documentation](https://bryntum.com/products/grid/docs/)
43
195
  * [Bryntum Grid examples](https://bryntum.com/products/grid/examples/)
196
+
44
197
  * [Bryntum Support Forum](https://forum.bryntum.com/)
45
198
  * [Contact us](https://bryntum.com/contact/)
46
199
 
47
- # License and copyright
200
+ ## License and copyright
48
201
 
49
202
  This wrapper depends on Bryntum Grid, which is commercial software and requires a paid license.
50
203
  Please visit the [Bryntum Grid End User License](https://bryntum.com/products/grid/license/) for the full text of the license.
51
204
 
52
205
  Copyright © 2009-2026, Bryntum
53
206
  All rights reserved.
207
+
@@ -168,7 +168,7 @@ const H = {
168
168
  treeFeature: {},
169
169
  treeGroupFeature: {}
170
170
  },
171
- 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"],
171
+ 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"],
172
172
  setup(T, { expose: p, emit: g }) {
173
173
  const f = g, i = {
174
174
  instanceClass: B,
@@ -332,6 +332,7 @@ const H = {
332
332
  "onBeforeCellEditStart",
333
333
  "onBeforeCellRangeDelete",
334
334
  "onBeforeCellRangeEdit",
335
+ "onBeforeColumnCollapseToggle",
335
336
  "onBeforeColumnDragStart",
336
337
  "onBeforeColumnDropFinalize",
337
338
  "onBeforeColumnResize",
@@ -372,6 +373,7 @@ const H = {
372
373
  "onCellMouseOver",
373
374
  "onCollapse",
374
375
  "onCollapseNode",
376
+ "onColumnCollapseToggle",
375
377
  "onColumnDrag",
376
378
  "onColumnDragStart",
377
379
  "onColumnDrop",
@@ -479,6 +481,7 @@ const H = {
479
481
  "beforeCellEditStart",
480
482
  "beforeCellRangeDelete",
481
483
  "beforeCellRangeEdit",
484
+ "beforeColumnCollapseToggle",
482
485
  "beforeColumnDragStart",
483
486
  "beforeColumnDropFinalize",
484
487
  "beforeColumnResize",
@@ -519,6 +522,7 @@ const H = {
519
522
  "cellMouseOver",
520
523
  "collapse",
521
524
  "collapseNode",
525
+ "columnCollapseToggle",
522
526
  "columnDrag",
523
527
  "columnDragStart",
524
528
  "columnDrop",
@@ -636,4 +640,4 @@ const H = {
636
640
  export {
637
641
  G as _
638
642
  };
639
- //# sourceMappingURL=D4TAsqNB.js.map
643
+ //# sourceMappingURL=DjlFx3AM.js.map