@bryntum/grid-vue 7.1.1 → 7.1.2

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.
Files changed (3) hide show
  1. package/README.md +124 -22
  2. package/Version.md +8 -0
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -1,51 +1,153 @@
1
- # Vue wrapper for Bryntum Grid
1
+ <div style="display: flex; justify-content: space-between; align-items: center; margin: 0 50px;">
2
+ <a href="https://bryntum.com/" rel="noopener" target="_blank">
3
+ <img width="350" src="https://bryntum.com/resources/bryntum_logo_blue.svg" alt="Bryntum logo">
4
+ </a>
5
+ <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/vue.svg" alt="Vue" width="100">
6
+ </div>
2
7
 
3
- This package contains a wrapper that encapsulates Bryntum Grid and turns it into a Vue component, exposing
4
- configuration options, properties, features, and events.
8
+ # Vue 2 wrapper for Bryntum Grid
5
9
 
6
- # Bryntum repository access setup
10
+ This package provides a wrapper that turns Bryntum Grid into a Vue 2 component, exposing configuration options,
11
+ properties, features, and events.
7
12
 
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.
13
+ ## Version Requirement
12
14
 
13
- # Installation
15
+ * Vue: `2.6` or higher
16
+ * TypeScript: `4.2` or higher (optional)
14
17
 
15
- The installation is performed by issuing the installation command in the root of the application folder. The specific
16
- command depends on the package manager used by the application.
18
+ ### Vue 3 version compatibility
17
19
 
18
- The following are most frequently used:
20
+ For Vue 3+, use [`@bryntum/grid-vue-3`](https://www.npmjs.com/package/@bryntum/grid-vue-3) instead.
19
21
 
20
- Install using `npm`:
22
+ ## Package Contents
21
23
 
22
- ```shell
23
- npm install @bryntum/grid-vue@7.1.1
24
+ | Path | Description |
25
+ |----------|---------------------------------------------------|
26
+ | `src/` | Original Vue source files (BryntumGrid etc.) |
27
+ | `*.d.ts` | TypeScript type definitions |
28
+
29
+ **Note:** This is a wrapper package. The core `@bryntum/grid` package must be installed separately.
30
+
31
+ ## Installation
32
+
33
+ ### Vue 2 Wrapper
34
+
35
+ ```bash
36
+ npm install @bryntum/grid-vue@latest
24
37
  ```
25
38
 
26
- Install using `yarn`:
39
+ ### Component Package (Required)
40
+
41
+ ```bash
42
+ npm install @bryntum/grid@latest
43
+ ```
27
44
 
28
- ```shell
29
- yarn add @bryntum/grid-vue@7.1.1
45
+ ## Try Bryntum Online Demos
46
+
47
+ * [View Online Vue Demos](https://bryntum.com/products/grid/examples/?framework=vue)
48
+
49
+ ## Quick Start
50
+
51
+ Edit the `src/App.vue` file and replace the content with the following:
52
+
53
+ ```javascript
54
+ <template>
55
+ <bryntum-grid
56
+ :columns="columns"
57
+ :data="data"
58
+ />
59
+ </template>
60
+
61
+ <script>
62
+ import { BryntumGrid } from '@bryntum/grid-vue';
63
+ import './app.css';
64
+
65
+ export default {
66
+ components : {
67
+ BryntumGrid
68
+ },
69
+ data() {
70
+ return {
71
+ columns : [
72
+ { field : 'name', text : 'Name', flex : 1 },
73
+ { field : 'role', text : 'Role', width : 150 }
74
+ ],
75
+ data : [
76
+ { name : 'John Doe', role : 'Developer' },
77
+ { name : 'Jane Smith', role : 'Designer' }
78
+ ]
79
+ };
80
+ }
81
+ };
82
+ </script>
30
83
  ```
31
84
 
32
- # Integration guide
85
+ Lastly, add some styling to your `src/main.js` or CSS file:
86
+
87
+ ```css
88
+ /* FontAwesome is used for icons */
89
+ @import '@bryntum/grid/fontawesome/css/fontawesome.css';
90
+ @import '@bryntum/grid/fontawesome/css/solid.css';
91
+ /* Structural CSS */
92
+ @import "@bryntum/grid/grid.css";
93
+ /* Bryntum theme of your choice */
94
+ @import "@bryntum/grid/svalbard-light.css";
95
+ ```
96
+
97
+ ## Integration Guide
33
98
 
34
99
  For details on installing and using this package, see the
35
100
  [Vue Integration Guide](https://bryntum.com/products/grid/docs/guide/Grid/integration/vue/guide).
36
101
 
37
- # Online references
102
+ ## Wrappers
103
+
104
+ Vue wrappers encapsulate Bryntum components as native Vue components, exposing all configuration options,
105
+ properties, features, and events through Vue-familiar patterns like props, events, and slots.
106
+
107
+ Visit [Wrappers documentation](https://bryntum.com/products/grid/docs/guide/Grid/integration/vue/guide#wrappers) for the complete list of available
108
+ wrapper components.
109
+
110
+ ## Features
111
+
112
+ Features are optional modules that extend Bryntum Grid functionality. Each feature is suffixed with `Feature` and
113
+ can be enabled and configured through standard Vue props.
114
+
115
+ Visit [Features documentation](https://bryntum.com/products/grid/docs/guide/Grid/integration/vue/guide#features) for the complete list of available
116
+ features and their configuration options.
117
+
118
+ ## Explore All Bryntum Products
119
+
120
+ * [Bryntum Grid](https://bryntum.com/products/grid/) - High-performance data grid
121
+ * [Bryntum Scheduler](https://bryntum.com/products/scheduler/) - Resource scheduling component
122
+ * [Bryntum Scheduler Pro](https://bryntum.com/products/schedulerpro/) - Advanced scheduling with dependencies
123
+ * [Bryntum Gantt](https://bryntum.com/products/gantt/) - Project planning and management
124
+ * [Bryntum Calendar](https://bryntum.com/products/calendar/) - Full-featured calendar component
125
+ * [Bryntum TaskBoard](https://bryntum.com/products/taskboard/) - Kanban-style task management
126
+
127
+ Explore our comprehensive collection of demos:
128
+
129
+ | 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 |
130
+ |-------------------|:------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:----------------------------------------------------------------------:|:------------------------------------------------------------------------------:|
131
+ | **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) |
132
+ | **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) |
133
+ | **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) |
134
+ | **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) |
135
+ | **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) |
136
+ | **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) |
137
+
138
+ ## Online references
38
139
 
39
- * [Bryntum npm repository guide](https://bryntum.com/products/grid/docs/guide/Grid/npm-repository)
40
140
  * [Bryntum Grid documentation](https://bryntum.com/products/grid/docs/)
41
141
  * [Bryntum Grid examples](https://bryntum.com/products/grid/examples/)
142
+
42
143
  * [Bryntum Support Forum](https://forum.bryntum.com/)
43
144
  * [Contact us](https://bryntum.com/contact/)
44
145
 
45
- # License and copyright
146
+ ## License and copyright
46
147
 
47
148
  This wrapper depends on Bryntum Grid, which is commercial software and requires a paid license.
48
149
  Please visit the [Bryntum Grid End User License](https://bryntum.com/products/grid/license/) for the full text of the license.
49
150
 
50
151
  Copyright © 2009-2026, Bryntum
51
152
  All rights reserved.
153
+
package/Version.md ADDED
@@ -0,0 +1,8 @@
1
+ ## Version Requirement
2
+
3
+ * Vue: `2.6` or higher
4
+ * TypeScript: `4.2` or higher (optional)
5
+
6
+ ### Vue 3 version compatibility
7
+
8
+ For Vue 3+, use [`@bryntum/grid-vue-3`](https://www.npmjs.com/package/@bryntum/grid-vue-3) instead.
package/package.json CHANGED
@@ -14,7 +14,7 @@
14
14
  "wrapper"
15
15
  ],
16
16
  "license": "Commercial",
17
- "version": "7.1.1",
17
+ "version": "7.1.2",
18
18
  "bugs": "https://github.com/bryntum/support/issues",
19
19
  "main": "index.js",
20
20
  "dependencies": {},