web-mojo 2.1.46

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 (91) hide show
  1. package/LICENSE +198 -0
  2. package/README.md +510 -0
  3. package/dist/admin.cjs.js +2 -0
  4. package/dist/admin.cjs.js.map +1 -0
  5. package/dist/admin.css +621 -0
  6. package/dist/admin.es.js +7973 -0
  7. package/dist/admin.es.js.map +1 -0
  8. package/dist/auth.cjs.js +2 -0
  9. package/dist/auth.cjs.js.map +1 -0
  10. package/dist/auth.css +804 -0
  11. package/dist/auth.es.js +2168 -0
  12. package/dist/auth.es.js.map +1 -0
  13. package/dist/charts.cjs.js +2 -0
  14. package/dist/charts.cjs.js.map +1 -0
  15. package/dist/charts.css +1002 -0
  16. package/dist/charts.es.js +16 -0
  17. package/dist/charts.es.js.map +1 -0
  18. package/dist/chunks/ContextMenu-BrHqj0fn.js +80 -0
  19. package/dist/chunks/ContextMenu-BrHqj0fn.js.map +1 -0
  20. package/dist/chunks/ContextMenu-gEcpSz56.js +2 -0
  21. package/dist/chunks/ContextMenu-gEcpSz56.js.map +1 -0
  22. package/dist/chunks/DataView-DPryYpEW.js +2 -0
  23. package/dist/chunks/DataView-DPryYpEW.js.map +1 -0
  24. package/dist/chunks/DataView-DjZQrpba.js +843 -0
  25. package/dist/chunks/DataView-DjZQrpba.js.map +1 -0
  26. package/dist/chunks/Dialog-BsRx4eg3.js +2 -0
  27. package/dist/chunks/Dialog-BsRx4eg3.js.map +1 -0
  28. package/dist/chunks/Dialog-DSlctbon.js +1377 -0
  29. package/dist/chunks/Dialog-DSlctbon.js.map +1 -0
  30. package/dist/chunks/FilePreviewView-BmFHzK5K.js +5868 -0
  31. package/dist/chunks/FilePreviewView-BmFHzK5K.js.map +1 -0
  32. package/dist/chunks/FilePreviewView-DcdRl_ta.js +2 -0
  33. package/dist/chunks/FilePreviewView-DcdRl_ta.js.map +1 -0
  34. package/dist/chunks/FormView-CmBuwKGD.js +2 -0
  35. package/dist/chunks/FormView-CmBuwKGD.js.map +1 -0
  36. package/dist/chunks/FormView-DqUBMPJ9.js +5054 -0
  37. package/dist/chunks/FormView-DqUBMPJ9.js.map +1 -0
  38. package/dist/chunks/MetricsChart-CM4CI6eA.js +2095 -0
  39. package/dist/chunks/MetricsChart-CM4CI6eA.js.map +1 -0
  40. package/dist/chunks/MetricsChart-CPidSMaN.js +2 -0
  41. package/dist/chunks/MetricsChart-CPidSMaN.js.map +1 -0
  42. package/dist/chunks/PDFViewer-BNQlnS83.js +2 -0
  43. package/dist/chunks/PDFViewer-BNQlnS83.js.map +1 -0
  44. package/dist/chunks/PDFViewer-Dyo-Oeyd.js +946 -0
  45. package/dist/chunks/PDFViewer-Dyo-Oeyd.js.map +1 -0
  46. package/dist/chunks/Page-B524zSQs.js +351 -0
  47. package/dist/chunks/Page-B524zSQs.js.map +1 -0
  48. package/dist/chunks/Page-BFgj0pAA.js +2 -0
  49. package/dist/chunks/Page-BFgj0pAA.js.map +1 -0
  50. package/dist/chunks/TokenManager-BXNva8Jk.js +287 -0
  51. package/dist/chunks/TokenManager-BXNva8Jk.js.map +1 -0
  52. package/dist/chunks/TokenManager-Bzn4guFm.js +2 -0
  53. package/dist/chunks/TokenManager-Bzn4guFm.js.map +1 -0
  54. package/dist/chunks/TopNav-D3I3_25f.js +371 -0
  55. package/dist/chunks/TopNav-D3I3_25f.js.map +1 -0
  56. package/dist/chunks/TopNav-MDjL4kV0.js +2 -0
  57. package/dist/chunks/TopNav-MDjL4kV0.js.map +1 -0
  58. package/dist/chunks/User-BalfYTEF.js +3 -0
  59. package/dist/chunks/User-BalfYTEF.js.map +1 -0
  60. package/dist/chunks/User-DwIT-CTQ.js +1937 -0
  61. package/dist/chunks/User-DwIT-CTQ.js.map +1 -0
  62. package/dist/chunks/WebApp-B6mgbNn2.js +4767 -0
  63. package/dist/chunks/WebApp-B6mgbNn2.js.map +1 -0
  64. package/dist/chunks/WebApp-DqDowtkl.js +2 -0
  65. package/dist/chunks/WebApp-DqDowtkl.js.map +1 -0
  66. package/dist/chunks/WebSocketClient-D6i85jl2.js +2 -0
  67. package/dist/chunks/WebSocketClient-D6i85jl2.js.map +1 -0
  68. package/dist/chunks/WebSocketClient-Dvl3AYx1.js +297 -0
  69. package/dist/chunks/WebSocketClient-Dvl3AYx1.js.map +1 -0
  70. package/dist/core.css +1181 -0
  71. package/dist/css/web-mojo.css +17 -0
  72. package/dist/css-manifest.json +6 -0
  73. package/dist/docit.cjs.js +2 -0
  74. package/dist/docit.cjs.js.map +1 -0
  75. package/dist/docit.es.js +959 -0
  76. package/dist/docit.es.js.map +1 -0
  77. package/dist/index.cjs.js +2 -0
  78. package/dist/index.cjs.js.map +1 -0
  79. package/dist/index.es.js +2681 -0
  80. package/dist/index.es.js.map +1 -0
  81. package/dist/lightbox.cjs.js +2 -0
  82. package/dist/lightbox.cjs.js.map +1 -0
  83. package/dist/lightbox.css +606 -0
  84. package/dist/lightbox.es.js +3737 -0
  85. package/dist/lightbox.es.js.map +1 -0
  86. package/dist/loader.es.js +115 -0
  87. package/dist/loader.umd.js +85 -0
  88. package/dist/portal.css +2446 -0
  89. package/dist/table.css +639 -0
  90. package/dist/toast.css +181 -0
  91. package/package.json +179 -0
package/LICENSE ADDED
@@ -0,0 +1,198 @@
1
+ Apache License
2
+ Version 2.0, January 2004
3
+ http://www.apache.org/licenses/
4
+
5
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
6
+
7
+ 1. Definitions.
8
+
9
+ "License" shall mean the terms and conditions for use, reproduction,
10
+ and distribution as defined by Sections 1 through 9 of this document.
11
+
12
+ "Licensor" shall mean the copyright owner or entity granting the License.
13
+
14
+ "Legal Entity" shall mean the union of the acting entity and all
15
+ other entities that control, are controlled by, or are under common
16
+ control with that entity. For the purposes of this definition,
17
+ "control" means (i) the power, direct or indirect, to cause the
18
+ direction or management of such entity, whether by contract or
19
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
20
+ outstanding shares, or (iii) beneficial ownership of such entity.
21
+
22
+ "You" (or "Your") shall mean an individual or Legal Entity
23
+ exercising permissions granted by this License.
24
+
25
+ "Source" form shall mean the preferred form for making modifications,
26
+ including but not limited to software source code, documentation
27
+ source, and configuration files.
28
+
29
+ "Object" form shall mean any form resulting from mechanical
30
+ transformation or translation of a Source form, including but
31
+ not limited to compiled object code, generated documentation,
32
+ and conversions to other media types.
33
+
34
+ "Work" shall mean the work of authorship, whether in Source or
35
+ Object form, made available under the License, as indicated by a
36
+ copyright notice that is included in or attached to the work
37
+ (which shall not include combinations of the Work with other works).
38
+
39
+ "Derivative Works" shall mean any work, whether in Source or Object
40
+ form, that is based upon (or derived from) the Work and for which the
41
+ editorial revisions, annotations, elaborations, or other modifications
42
+ represent, as a whole, an original work of authorship. For the purposes
43
+ of this License, Derivative Works shall not include works that remain
44
+ separable from, or merely link (or bind by name) to the interfaces of,
45
+ the Work and derivative works thereof.
46
+
47
+ "Contribution" shall mean any work of authorship, including
48
+ the original version of the Work and any modifications or additions
49
+ to that Work or Derivative Works thereof, that is intentionally
50
+ submitted to Licensor for inclusion in the Work by the copyright owner
51
+ or by an individual or Legal Entity authorized to submit on behalf of
52
+ the copyright owner. For the purposes of this definition, "submitted"
53
+ means any form of electronic, verbal, or written communication sent
54
+ to the Licensor or its representatives, including but not limited to
55
+ communication on electronic mailing lists, source code control
56
+ systems, and issue tracking systems that are managed by, or on behalf
57
+ of, the Licensor for the purpose of discussing and improving the Work,
58
+ but excluding communication that is conspicuously marked or otherwise
59
+ designated in writing by the copyright owner as "Not a Contribution."
60
+
61
+ "Contributor" shall mean Licensor and any individual or Legal Entity
62
+ on behalf of whom a Contribution has been received by Licensor and
63
+ subsequently incorporated within the Work.
64
+
65
+ 2. Grant of Copyright License. Subject to the terms and conditions of
66
+ this License, each Contributor hereby grants to You a perpetual,
67
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
68
+ copyright license to use, reproduce, modify, derive works of, and
69
+ distribute the Work and such Derivative Works in Source or Object
70
+ form.
71
+
72
+ 3. Grant of Patent License. Subject to the terms and conditions of
73
+ this License, each Contributor hereby grants to You a perpetual,
74
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
75
+ (except as stated in this section) patent license to make, have made,
76
+ use, offer to sell, sell, import, and otherwise transfer the Work,
77
+ where such license applies only to those patent claims licensable
78
+ by such Contributor that are necessarily infringed by their
79
+ Contribution(s) alone or by combination of their Contribution(s)
80
+ with the Work to which such Contribution(s) was submitted. If You
81
+ institute patent litigation against any entity (including a
82
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
83
+ or a Contribution incorporated within the Work constitutes direct
84
+ or contributory patent infringement, then any patent licenses
85
+ granted to You under this License for that Work shall terminate
86
+ as of the date such litigation is filed.
87
+
88
+ 4. Redistribution. You may reproduce and distribute copies of the
89
+ Work or Derivative Works thereof in any medium, with or without
90
+ modifications, and in Source or Object form, provided that You
91
+ meet the following conditions:
92
+
93
+ (a) You must give any other recipients of the Work or
94
+ Derivative Works a copy of this License; and
95
+
96
+ (b) You must cause any modified files to carry prominent notices
97
+ stating that You changed the files; and
98
+
99
+ (c) You must retain, in the Source form of any Derivative Works
100
+ that You distribute, all copyright, patent, trademark, and
101
+ attribution notices from the Source form of the Work,
102
+ excluding those notices that do not pertain to any part of
103
+ the Derivative Works; and
104
+
105
+ (d) If the Work includes a "NOTICE" file as part of its
106
+ distribution, then any Derivative Works that You distribute must
107
+ include a readable copy of the attribution notices contained
108
+ within such NOTICE file, excluding those notices that do not
109
+ pertain to any part of the Derivative Works, in at least one
110
+ of the following places: within a NOTICE file distributed
111
+ as part of the Derivative Works; within the Source form or
112
+ documentation, if provided along with the Derivative Works; or,
113
+ within a display generated by the Derivative Works, if and
114
+ wherever such third-party notices normally appear. The contents
115
+ of the NOTICE file are for informational purposes only and
116
+ do not modify the License. You may add Your own attribution
117
+ notices within Derivative Works that You distribute, alongside
118
+ or as an addendum to the NOTICE text from the Work, provided
119
+ that such additional attribution notices cannot be construed
120
+ as modifying the License.
121
+
122
+ You may add Your own copyright notice to Your modifications and
123
+ may provide additional or different license terms and conditions
124
+ for use, reproduction, or distribution of Your modifications, or
125
+ for any such Derivative Works as a whole, provided Your use,
126
+ reproduction, and distribution of the Work otherwise complies with
127
+ the conditions stated in this License.
128
+
129
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
130
+ any Contribution intentionally submitted for inclusion in the Work
131
+ by You to the Licensor shall be under the terms and conditions of
132
+ this License, without any additional terms or conditions.
133
+ Notwithstanding the above, nothing herein shall supersede or modify
134
+ the terms of any separate license agreement you may have executed
135
+ with Licensor regarding such Contributions.
136
+
137
+ 6. Trademarks. This License does not grant permission to use the trade
138
+ names, trademarks, service marks, or product names of the Licensor,
139
+ except as required for reasonable and customary use in describing the
140
+ origin of the Work and reproducing the content of the NOTICE file.
141
+
142
+ 7. Disclaimer of Warranty. Unless required by applicable law or
143
+ agreed to in writing, Licensor provides the Work (and each
144
+ Contributor provides its Contributions) on an "AS IS" BASIS,
145
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
146
+ implied, including, without limitation, any warranties or conditions
147
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
148
+ PARTICULAR PURPOSE. You are solely responsible for determining the
149
+ appropriateness of using or redistributing the Work and assume any
150
+ risks associated with Your exercise of permissions under this License.
151
+
152
+ 8. Limitation of Liability. In no event and under no legal theory,
153
+ whether in tort (including negligence), contract, or otherwise,
154
+ unless required by applicable law (such as deliberate and grossly
155
+ negligent acts) or agreed to in writing, shall any Contributor be
156
+ liable to You for damages, including any direct, indirect, special,
157
+ incidental, or consequential damages of any character arising as a
158
+ result of this License or out of the use or inability to use the
159
+ Work (including but not limited to damages for loss of goodwill,
160
+ work stoppage, computer failure or malfunction, or any and all
161
+ other commercial damages or losses), even if such Contributor
162
+ has been advised of the possibility of such damages.
163
+
164
+ 9. Accepting Warranty or Support. You may choose to offer, and to
165
+ charge a fee for, warranty, support, indemnity, or other liability
166
+ obligations and/or rights consistent with this License. However, in
167
+ accepting such obligations, You may act only on Your own behalf and
168
+ on Your sole responsibility, not on behalf of any other Contributor,
169
+ and only if You agree to indemnify, defend, and hold each Contributor
170
+ harmless for any liability incurred by, or claims asserted against,
171
+ such Contributor by reason of your accepting any such warranty or support.
172
+
173
+ END OF TERMS AND CONDITIONS
174
+
175
+ APPENDIX: How to apply the Apache License to your work.
176
+
177
+ To apply the Apache License to your work, attach the following
178
+ boilerplate notice, with the fields enclosed by brackets "[]"
179
+ replaced with your own identifying information. (Don't include
180
+ the brackets!) The text should be enclosed in the appropriate
181
+ comment syntax for the file format. We also recommend that a
182
+ file or class name and description of purpose be included on the
183
+ same "printed page" as the copyright notice for easier
184
+ identification within third-party archives.
185
+
186
+ Copyright 2024 MOJO Framework Team
187
+
188
+ Licensed under the Apache License, Version 2.0 (the "License");
189
+ you may not use this file except in compliance with the License.
190
+ You may obtain a copy of the License at
191
+
192
+ http://www.apache.org/licenses/LICENSE-2.0
193
+
194
+ Unless required by applicable law or agreed to in writing, software
195
+ distributed under the License is distributed on an "AS IS" BASIS,
196
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
197
+ See the License for the specific language governing permissions and
198
+ limitations under the License.
package/README.md ADDED
@@ -0,0 +1,510 @@
1
+ # MOJO Framework 2.1.0
2
+
3
+ [![License: Apache-2.0](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
4
+ [![Version](https://img.shields.io/badge/version-2.1.0-green.svg)](https://github.com/yourusername/web-mojo)
5
+
6
+ **MOJO** is a modern, lightweight JavaScript framework for building data-driven web applications. Built with a **core + extensions** architecture, MOJO provides maximum flexibility while maintaining clean boundaries and optimal performance.
7
+
8
+ ## ✨ What's New in 2.1.0
9
+
10
+ 🏗️ **Core + Extensions Architecture** - Clean separation with plugin system
11
+ 📦 **Subpath Exports** - Import exactly what you need
12
+ ⚡ **Lazy Loading** - Reduced bundle sizes with dynamic imports
13
+ 🔌 **Plugin System** - Extensions enhance core without dependencies
14
+ 🎯 **Tree Shaking** - Optimized builds with modern bundlers
15
+
16
+ ## 🚀 Quick Start
17
+
18
+ ### Installation
19
+
20
+ ```bash
21
+ npm install web-mojo
22
+ ```
23
+
24
+ ### Basic Usage
25
+
26
+ ```javascript
27
+ // Core framework
28
+ import { WebApp, Page, View } from 'web-mojo';
29
+
30
+ // Create a simple page
31
+ class HomePage extends Page {
32
+ getTemplate() {
33
+ return '<h1>Welcome to MOJO!</h1>';
34
+ }
35
+ }
36
+
37
+ // Initialize app
38
+ const app = new WebApp({
39
+ name: 'My App',
40
+ container: '#app'
41
+ });
42
+
43
+ app.registerPage('home', HomePage);
44
+ app.start();
45
+ ```
46
+
47
+ ## 📦 Architecture Overview
48
+
49
+ MOJO 2.1.0 uses a **core + extensions** architecture:
50
+
51
+ ### Core Package (`web-mojo`)
52
+ The stable runtime and building blocks:
53
+ - **WebApp** & **PortalApp** - Application containers
54
+ - **View** & **Page** - Component system
55
+ - **Model** & **Collection** - Data layer
56
+ - **Router** - URL routing
57
+ - **Dialog** - Modal system
58
+ - **Essential services** - File upload, events, utilities
59
+
60
+ ### Extensions
61
+ Feature-rich packages that extend core functionality:
62
+
63
+ #### 🔐 Authentication (`web-mojo/auth`)
64
+ Complete authentication system with JWT tokens:
65
+
66
+ ```javascript
67
+ import { AuthApp, LoginPage } from 'web-mojo/auth';
68
+
69
+ const app = new AuthApp({
70
+ api: { baseURL: 'https://api.example.com' },
71
+ loginRedirect: '/dashboard'
72
+ });
73
+ ```
74
+
75
+ #### 🖼️ Lightbox (`web-mojo/lightbox`)
76
+ Image and PDF viewers with editing capabilities:
77
+
78
+ ```javascript
79
+ import 'web-mojo/lightbox'; // Auto-registers plugins
80
+
81
+ // Core can now use lightbox features
82
+ import { Dialog } from 'web-mojo';
83
+ // Dialog automatically gets image cropping when lightbox is loaded
84
+ ```
85
+
86
+ #### 📊 Charts (`web-mojo/charts`)
87
+ Interactive charts built on Chart.js:
88
+
89
+ ```javascript
90
+ import { PieChart, SeriesChart } from 'web-mojo/charts';
91
+
92
+ const chart = new PieChart({
93
+ data: salesData,
94
+ container: '#chart'
95
+ });
96
+ ```
97
+
98
+ #### 📚 Documentation (`web-mojo/docit`)
99
+ Documentation portal system:
100
+
101
+ ```javascript
102
+ import { DocItApp } from 'web-mojo/docit';
103
+
104
+ const docs = new DocItApp({
105
+ books: ['user-guide', 'api-docs']
106
+ });
107
+ ```
108
+
109
+ #### ⚡ Loader (`web-mojo/loader`)
110
+ Beautiful loading animations:
111
+
112
+ ```html
113
+ <script src="web-mojo/loader"></script>
114
+ <script>
115
+ // Your app initialization
116
+ // Call hideInitialLoader() when ready
117
+ </script>
118
+ ```
119
+
120
+ ## 🎯 Usage Examples
121
+
122
+ ### Portal Application
123
+
124
+ ```javascript
125
+ import { PortalApp, Page } from 'web-mojo';
126
+ import 'web-mojo/lightbox'; // Enable image features
127
+
128
+ const app = new PortalApp({
129
+ name: 'Admin Portal',
130
+ sidebar: {
131
+ menus: [{
132
+ items: [
133
+ { text: 'Dashboard', route: 'dashboard', icon: 'bi-speedometer2' },
134
+ { text: 'Users', route: 'users', icon: 'bi-people' }
135
+ ]
136
+ }]
137
+ }
138
+ });
139
+
140
+ class DashboardPage extends Page {
141
+ constructor(options = {}) {
142
+ super({
143
+ title: 'Dashboard',
144
+ template: `
145
+ <div class="row">
146
+ <div class="col-md-6">
147
+ <div class="card">
148
+ <div class="card-body">
149
+ <h5>Welcome to MOJO</h5>
150
+ <p>{{message}}</p>
151
+ <button class="btn btn-primary" data-action="show-dialog">
152
+ Open Dialog
153
+ </button>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ `,
159
+ ...options
160
+ });
161
+ }
162
+
163
+ getTemplateData() {
164
+ return {
165
+ message: 'Your application is ready!'
166
+ };
167
+ }
168
+
169
+ async onActionShowDialog() {
170
+ const { Dialog } = await import('web-mojo');
171
+ Dialog.showInfo('Hello from MOJO!');
172
+ }
173
+ }
174
+
175
+ app.registerPage('dashboard', DashboardPage);
176
+ app.start();
177
+ ```
178
+
179
+ ### Authentication Flow
180
+
181
+ ```javascript
182
+ import { AuthApp } from 'web-mojo/auth';
183
+ import { WebApp } from 'web-mojo';
184
+
185
+ // Auth portal
186
+ const authApp = new AuthApp({
187
+ api: { baseURL: 'https://api.example.com' },
188
+ ui: {
189
+ title: 'Acme Corp',
190
+ logoUrl: '/assets/logo.png'
191
+ }
192
+ });
193
+
194
+ // Main app (after authentication)
195
+ const mainApp = new WebApp({
196
+ name: 'Acme Portal',
197
+ api: {
198
+ baseURL: 'https://api.example.com',
199
+ token: localStorage.getItem('auth_token')
200
+ }
201
+ });
202
+
203
+ // Handle successful login
204
+ authApp.events.on('auth:login', (user) => {
205
+ window.location.href = '/dashboard';
206
+ });
207
+ ```
208
+
209
+ ### Data Management
210
+
211
+ ```javascript
212
+ import { Model, Collection, View } from 'web-mojo';
213
+
214
+ // Define models
215
+ class User extends Model {
216
+ static endpoint = '/api/users';
217
+ }
218
+
219
+ class UserList extends Collection {
220
+ model = User;
221
+ endpoint = '/api/users';
222
+ }
223
+
224
+ // Create views
225
+ class UserTableView extends View {
226
+ constructor(options = {}) {
227
+ super({
228
+ template: `
229
+ <table class="table">
230
+ <thead>
231
+ <tr><th>Name</th><th>Email</th><th>Actions</th></tr>
232
+ </thead>
233
+ <tbody>
234
+ {{#users}}
235
+ <tr>
236
+ <td>{{name}}</td>
237
+ <td>{{email}}</td>
238
+ <td>
239
+ <button class="btn btn-sm btn-primary"
240
+ data-action="edit-user"
241
+ data-user-id="{{id}}">Edit</button>
242
+ </td>
243
+ </tr>
244
+ {{/users}}
245
+ </tbody>
246
+ </table>
247
+ `,
248
+ ...options
249
+ });
250
+
251
+ this.collection = new UserList();
252
+ }
253
+
254
+ async onMount() {
255
+ await this.collection.fetch();
256
+ this.render();
257
+ }
258
+
259
+ getTemplateData() {
260
+ return {
261
+ users: this.collection.toJSON()
262
+ };
263
+ }
264
+
265
+ async onActionEditUser(action, event, element) {
266
+ const userId = element.dataset.userId;
267
+ const user = this.collection.get(userId);
268
+
269
+ const { Dialog } = await import('web-mojo');
270
+ Dialog.showModelForm(user, {
271
+ title: 'Edit User',
272
+ fields: ['name', 'email']
273
+ });
274
+ }
275
+ }
276
+ ```
277
+
278
+ ## 🛠️ Development
279
+
280
+ ### Project Structure
281
+ ```
282
+ web-mojo/
283
+ ├── src/
284
+ │ ├── index.js # Core entry point
285
+ │ ├── auth.js # Auth extension entry
286
+ │ ├── lightbox.js # Lightbox extension entry
287
+ │ ├── charts.js # Charts extension entry
288
+ │ ├── docit.js # DocIt extension entry
289
+ │ ├── loader.js # Loader entry
290
+ │ ├── core/ # Core framework
291
+ │ │ ├── View.js
292
+ │ │ ├── Page.js
293
+ │ │ ├── WebApp.js
294
+ │ │ ├── PortalApp.js
295
+ │ │ ├── models/
296
+ │ │ ├── views/
297
+ │ │ ├── services/
298
+ │ │ └── utils/
299
+ │ └── extensions/ # Extension packages
300
+ │ ├── auth/
301
+ │ ├── lightbox/
302
+ │ ├── charts/
303
+ │ └── docit/
304
+ ├── examples/ # Live examples
305
+ └── dist/ # Built packages
306
+ ```
307
+
308
+ ### Building from Source
309
+
310
+ ```bash
311
+ # Install dependencies
312
+ npm install
313
+
314
+ # Build all packages
315
+ npm run build:lib
316
+
317
+ # Development server
318
+ npm run dev
319
+
320
+ # Watch mode
321
+ npm run dev:watch
322
+ ```
323
+
324
+ ### Import Aliases (Development)
325
+ When developing the framework itself:
326
+
327
+ ```javascript
328
+ // Use aliases for clean imports
329
+ import View from '@core/View.js';
330
+ import AuthApp from '@ext/auth/AuthApp.js';
331
+ import { PieChart } from '@ext/charts/PieChart.js';
332
+ ```
333
+
334
+ ## 📋 API Reference
335
+
336
+ ### WebApp
337
+ Main application container with routing and page management.
338
+
339
+ ```javascript
340
+ const app = new WebApp({
341
+ name: 'My App', // App name
342
+ container: '#app', // DOM container
343
+ debug: true, // Debug mode
344
+ api: { // API configuration
345
+ baseURL: 'https://api.example.com',
346
+ token: 'jwt-token'
347
+ }
348
+ });
349
+
350
+ // Register pages
351
+ app.registerPage('home', HomePage);
352
+ app.registerPage('users', UserListPage);
353
+
354
+ // Navigation
355
+ await app.navigate('users');
356
+ await app.navigate('user/123');
357
+
358
+ // Start app
359
+ await app.start();
360
+ ```
361
+
362
+ ### PortalApp
363
+ Extended WebApp with built-in sidebar and top navigation.
364
+
365
+ ```javascript
366
+ const app = new PortalApp({
367
+ // All WebApp options plus:
368
+ sidebar: {
369
+ menus: [{
370
+ name: 'main',
371
+ items: [
372
+ { text: 'Home', route: 'home', icon: 'bi-house' },
373
+ {
374
+ text: 'Admin',
375
+ icon: 'bi-gear',
376
+ children: [
377
+ { text: 'Users', route: 'users' },
378
+ { text: 'Settings', route: 'settings' }
379
+ ]
380
+ }
381
+ ]
382
+ }]
383
+ },
384
+ topbar: {
385
+ brand: 'My Portal',
386
+ rightItems: [
387
+ { icon: 'bi-bell', action: 'notifications' }
388
+ ]
389
+ }
390
+ });
391
+ ```
392
+
393
+ ### View Component System
394
+
395
+ ```javascript
396
+ class MyView extends View {
397
+ constructor(options = {}) {
398
+ super({
399
+ className: 'my-view',
400
+ template: `
401
+ <div>
402
+ <h3>{{title}}</h3>
403
+ <button data-action="click-me">Click Me</button>
404
+ <div data-region="content"></div>
405
+ </div>
406
+ `,
407
+ ...options
408
+ });
409
+ }
410
+
411
+ // Lifecycle hooks
412
+ async onMount() { /* Called when mounted to DOM */ }
413
+ async onUnmount() { /* Called when removed */ }
414
+
415
+ // Template data
416
+ getTemplateData() {
417
+ return { title: 'My View' };
418
+ }
419
+
420
+ // Event handlers
421
+ async onActionClickMe(action, event, element) {
422
+ this.showRegion('content', new AnotherView());
423
+ }
424
+
425
+ // Custom events
426
+ onCustomEvent(data) { /* Handle custom events */ }
427
+ }
428
+ ```
429
+
430
+ ## 🔧 Configuration
431
+
432
+ ### Vite Integration
433
+ For modern build tools:
434
+
435
+ ```javascript
436
+ // vite.config.js
437
+ export default {
438
+ optimizeDeps: {
439
+ exclude: ['web-mojo']
440
+ },
441
+ ssr: {
442
+ noExternal: ['web-mojo']
443
+ }
444
+ }
445
+ ```
446
+
447
+ ### CSS Imports
448
+ ```javascript
449
+ // Bundle all CSS automatically
450
+ import 'web-mojo'; // Includes core CSS
451
+
452
+ // Or import specific stylesheets
453
+ import 'web-mojo/css/core';
454
+ import 'web-mojo/css/portal';
455
+ import 'web-mojo/css/auth';
456
+ ```
457
+
458
+ ## 🔄 Migration from 2.0.x
459
+
460
+ ### Import Changes
461
+ ```javascript
462
+ // Old (2.0.x)
463
+ import WebApp from '/src/core/WebApp.js';
464
+ import AuthApp from '/src/auth/AuthApp.js';
465
+
466
+ // New (2.1.0)
467
+ import { WebApp } from 'web-mojo';
468
+ import { AuthApp } from 'web-mojo/auth';
469
+ ```
470
+
471
+ ### CSS Updates
472
+ ```html
473
+ <!-- Old -->
474
+ <link href="/src/css/core.css" rel="stylesheet" />
475
+
476
+ <!-- New -->
477
+ <link href="/dist/core.css" rel="stylesheet" />
478
+ ```
479
+
480
+ ## 🤝 Contributing
481
+
482
+ 1. Fork the repository
483
+ 2. Create your feature branch (`git checkout -b feature/amazing-feature`)
484
+ 3. Make your changes following our coding standards
485
+ 4. Add tests for new functionality
486
+ 5. Commit your changes (`git commit -m 'Add amazing feature'`)
487
+ 6. Push to the branch (`git push origin feature/amazing-feature`)
488
+ 7. Open a Pull Request
489
+
490
+ ### Development Setup
491
+ ```bash
492
+ git clone https://github.com/yourusername/web-mojo.git
493
+ cd web-mojo
494
+ npm install
495
+ npm run dev
496
+ ```
497
+
498
+ ## 📄 License
499
+
500
+ This project is licensed under the Apache License 2.0 - see the [LICENSE](LICENSE) file for details.
501
+
502
+ ## 🙋 Support
503
+
504
+ - 📖 **Documentation**: [Full docs and examples](./docs/)
505
+ - 🐛 **Issues**: [GitHub Issues](https://github.com/yourusername/web-mojo/issues)
506
+ - 💬 **Discussions**: [GitHub Discussions](https://github.com/yourusername/web-mojo/discussions)
507
+
508
+ ---
509
+
510
+ Built with ❤️ by the MOJO Framework Team