neo.mjs 7.0.3 → 7.0.4

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 (11) hide show
  1. package/.github/workflows/cose-inactive-issues.yml +23 -0
  2. package/README.md +31 -39
  3. package/apps/ServiceWorker.mjs +2 -2
  4. package/apps/portal/view/home/FooterContainer.mjs +1 -1
  5. package/buildScripts/README.md +2 -1
  6. package/examples/ServiceWorker.mjs +2 -2
  7. package/package.json +1 -1
  8. package/resources/images/workers-focus.svg +6 -0
  9. package/src/DefaultConfig.mjs +2 -2
  10. package/src/button/Base.mjs +42 -23
  11. package/src/form/field/Picker.mjs +1 -0
package/.github/workflows/cose-inactive-issues.yml ADDED
@@ -0,0 +1,23 @@
1
+ name: Close inactive issues
2
+ on:
3
+ schedule:
4
+ - cron: '30 1 * * *'
5
+
6
+ jobs:
7
+ close-issues:
8
+ runs-on: ubuntu-latest
9
+ permissions:
10
+ issues: write
11
+ pull-requests: write
12
+ steps:
13
+ - uses: actions/stale@v9
14
+ with:
15
+ days-before-issue-stale: 90
16
+ days-before-issue-close: 14
17
+ exempt-issue-labels: 'no auto close'
18
+ stale-issue-label: 'stale'
19
+ stale-issue-message: 'This issue is stale because it has been open for 90 days with no activity.'
20
+ close-issue-message: 'This issue was closed because it has been inactive for 14 days since being marked as stale.'
21
+ days-before-pr-stale: -1
22
+ days-before-pr-close: -1
23
+ repo-token: ${{ secrets.GITHUB_TOKEN }}
package/README.md CHANGED
@@ -12,22 +12,24 @@
12
12
  </p>
13
13
 
14
14
  # Modern Enterprise-Ready JavaScript Framework
15
+ Neo.mjs provides a new approach for building feature-rich web applications. Increase productivity by leveraging a vast
16
+ component library and harness the power of multi-threading for extreme real-time performance.
17
+
18
+ Neo.mjs is the first frontend framework which can run a JavaScript module based dev mode
19
+ without compilations. This makes debugging easier and reduces development costs.
20
+
21
+ In case you care about scalability, extensibility or solid architectures, congratulations,
22
+ you have found the right spot.
15
23
 
16
24
  ## Content
17
25
  1. <a href="#introduction">Introduction</a>
18
- 2. <a href="#slack-channel">Slack Channel for questions & feedback</a>
19
- 3. <a href="#architectures">Scalable frontend architectures</a>
26
+ 2. <a href="#use-cases">Potential Use Cases</a>
27
+ 3. <a href="#slack-channel">Slack Channel for questions & feedback</a>
20
28
  4. <a href="#getting-started">Getting Started</a>
21
29
  5. <a href="#cli">Command-Line Interface</a>
22
30
  6. <a href="#blog">Blog</a>
23
31
 
24
- </br></br>
25
- <h2 id="introduction">1. Introduction</h2>
26
- Neo.mjs is **not** intended for rather simple & static websites.
27
-
28
- The Framework does not focus primarily on a fast first rendering experience for new users,
29
- but instead on a super-fast update & navigation experience for returning users.
30
-
32
+ </br><h2 id="introduction">1. Introduction</h2>
31
33
  Neo.mjs drives the OMT (off the main thread) paradigm into perfection,
32
34
  which is intended to move expensive tasks into Workers.
33
35
 
@@ -46,48 +48,38 @@ Neo.mjs also provides sharing state across multiple Browser-Windows.
46
48
  So far, it is the only Framework which enables us to build complex multi-Window Apps
47
49
  without the need for a native shell.
48
50
 
49
- <img src="https://raw.githubusercontent.com/neomjs/pages/main/resources_pub/images/workers-setup-v4.png">
51
+ <img src="./resources/images/workers-focus.svg">
52
+
53
+
54
+ Neo.mjs is **not** intended for rather simple & static websites.
55
+
56
+ The Framework does not focus primarily on a fast first rendering experience for new users,
57
+ but instead on a super-fast update & navigation experience for returning users.
58
+
50
59
 
51
- Potential Use-Cases:
60
+ </br><h2 id="use-cases">2. Potential Use-Cases</h2>
52
61
  1. Finance (Banking & Trading Apps)
53
62
  2. Data Science
54
63
  3. Web-based IDEs
55
64
  4. Multi-Window Data Visualisation
65
+ 5. Complex dynamic Forms
66
+ 6. "Desktop-like" Apps
67
+ 7. Enterprise Apps in general (e.g. Admin Dashboards)
56
68
 
57
- </br></br>
58
- <h2 id="slack-channel">2. Slack Channel for questions, ideas & feedback</h2>
69
+ </br><h2 id="slack-channel">3. Slack Channel for questions, ideas & feedback</h2>
59
70
  Join our community:</br>
60
71
  <a href="https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA"><img src="https://img.shields.io/badge/Slack-neo.mjs-brightgreen.svg?logo=slack&style=for-the-badge" alt="Join the Slack channel"></a>
61
72
 
62
- </br></br>
63
- <h2 id="getting-started">4. Getting Started</h2>
64
- Take a look at the <a href="./.github/GETTING_STARTED.md">Getting Started Guide</a>
65
- </br></br>
66
- There are 2 options:
67
-
68
- 1. In case you want to create a Neo.mjs App (workspace), use
69
- > npx neo-app@latest
70
-
71
- 2. In case you want to work on the Framework and your App in parallel, you can fork this repository and use
72
- > npm run create-app
73
-
74
- inside of it.
73
+ </br><h2 id="getting-started">4. Getting Started</h2>
74
+ * Take a look at the <a href="./.github/GETTING_STARTED.md">Getting Started Guide</a>
75
+ * Make sure to dive into the <a href="https://neomjs.com/dist/production/apps/portal/#/learn/Setup">Learning Section</a>
76
+ * The most advanced tutorial to help you with getting up to speed is this one:</br>
77
+ <a href="https://neomjs.com/dist/production/apps/portal/#/learn/Earthquakes">Earthquakes Tutorial</a>
75
78
 
76
-
77
- * You can easily move your app from the framework to a workspace or vice versa.
78
- * The CLI inside the framework and inside a workspace works the same.
79
-
80
- Make sure to take a look into the <a href="https://neomjs.com/dist/production/apps/portal/#/learn/Setup">Learning Section</a>
81
-
82
- The most advanced tutorial to help you with getting up to speed is this one:</br>
83
- <a href="https://neomjs.com/dist/production/apps/portal/#/learn/Earthquakes">Earthquakes Tutorial</a>
84
-
85
- </br></br>
86
- <h2 id="cli">5. Command-Line Interface</h2>
79
+ </br><h2 id="cli">5. Command-Line Interface</h2>
87
80
  You can find an in-depth description here: <a href="./buildScripts/README.md">Neo.mjs CLI</a>
88
81
 
89
- </br></br>
90
- <h2 id="blog">6. Blog</h2>
82
+ </br><h2 id="blog">6. Blog</h2>
91
83
  All Blog Posts are listed here: <a href="https://neomjs.com/dist/production/apps/portal/#/blog">Neo.mjs Blog</a>
92
84
 
93
85
  </br></br>
package/apps/ServiceWorker.mjs CHANGED
@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
20
20
  */
21
21
  singleton: true,
22
22
  /**
23
- * @member {String} version='7.0.3'
23
+ * @member {String} version='7.0.4'
24
24
  */
25
- version: '7.0.3'
25
+ version: '7.0.4'
26
26
  }
27
27
 
28
28
  /**
package/apps/portal/view/home/FooterContainer.mjs CHANGED
@@ -111,7 +111,7 @@ class FooterContainer extends Container {
111
111
  }, {
112
112
  module: Component,
113
113
  cls : ['neo-version'],
114
- html : 'v7.0.3'
114
+ html : 'v7.0.4'
115
115
  }]
116
116
  }],
117
117
  /**
package/buildScripts/README.md CHANGED
@@ -242,10 +242,11 @@ Using the default options, this will generate the following 4 files:
242
242
  neo
243
243
  | - apps
244
244
  | | - myapp
245
+ | | | - view
246
+ | | | | - MainContainer.mjs
245
247
  | | | - app.mjs
246
248
  | | | - index.html
247
249
  | | | - neo-config.json
248
- | | | - MainContainer.mjs
249
250
  ```
250
251
 
251
252
  The program will also add the App config into buildScripts/webpack/json/myApps.json.
package/examples/ServiceWorker.mjs CHANGED
@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
20
20
  */
21
21
  singleton: true,
22
22
  /**
23
- * @member {String} version='7.0.3'
23
+ * @member {String} version='7.0.4'
24
24
  */
25
- version: '7.0.3'
25
+ version: '7.0.4'
26
26
  }
27
27
 
28
28
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "neo.mjs",
3
- "version": "7.0.3",
3
+ "version": "7.0.4",
4
4
  "description": "The webworkers driven UI framework",
5
5
  "type": "module",
6
6
  "repository": {
package/resources/images/workers-focus.svg ADDED
@@ -0,0 +1,6 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color: #000;" version="1.1" width="100%" height="100%" viewBox="-10 -10 700 500"><style>
4
+ font, span {transition: opacity .5s ease-out;}
5
+ path, rect {transition: fill-opacity .5s ease-out, stroke-opacity .5s ease-out;}
6
+ </style><defs><linearGradient x1="0%" y1="100%" x2="0%" y2="0%" id="mx-gradient-3e63dd-1-6c83dd-1-s-0"><stop offset="0%" style="stop-color: rgb(108, 131, 221); stop-opacity: 1;"/><stop offset="100%" style="stop-color: rgb(62, 99, 221); stop-opacity: 1;"/></linearGradient><linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="mx-gradient-ffcc99-1-fbc593-1-s-0"><stop offset="0%" style="stop-color: rgb(255, 204, 153); stop-opacity: 1;"/><stop offset="100%" style="stop-color: rgb(251, 197, 147); stop-opacity: 1;"/></linearGradient><linearGradient x1="0%" y1="100%" x2="0%" y2="0%" id="mx-gradient-008a00-1-00cc00-1-s-0"><stop offset="0%" style="stop-color: rgb(0, 204, 0); stop-opacity: 1;"/><stop offset="100%" style="stop-color: rgb(0, 138, 0); stop-opacity: 1;"/></linearGradient></defs><g><g data-cell-id="0"><g data-cell-id="1"><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-1"><g><path d="M 486.37 240 L 553.63 240" fill="none" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 481.12 240 L 488.12 236.5 L 486.37 240 L 488.12 243.5 Z" fill-opacity="var(--fill-opacity)" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="all"/><path d="M 558.88 240 L 551.88 243.5 L 553.63 240 L 551.88 236.5 Z" fill-opacity="var(--fill-opacity)" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-2"><g><path d="M 240.04 320 L 240 440 L 206.37 440" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 201.12 440 L 208.12 436.5 L 206.37 440 L 208.12 443.5 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-3"><g><rect x="200" y="160" width="280" height="160" rx="24" ry="24" fill="url(#mx-gradient-3e63dd-1-6c83dd-1-s-0)" stroke="#8ba6ff" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 278px; height: 1px; padding-top: 240px; margin-left: 201px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 16px;">App Worker</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-4"><g><rect x="360" y="280" width="120" height="40" rx="6" ry="6" fill="#cce5ff" stroke="#36393d" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 300px; margin-left: 361px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 13px;" color="#000000">Your App(s)</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-5"><g><rect x="200" y="160" width="120" height="40" rx="6" ry="6" fill="#cce5ff" stroke="#36393d" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 180px; margin-left: 201px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 13px;" color="#000000">Framework</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-6"><g><rect x="0" y="200" width="120" height="80" rx="12" ry="12" fill-opacity="var(--fill-opacity)" fill="url(#mx-gradient-3e63dd-1-6c83dd-1-s-0)" stroke="#8ba6ff" stroke-opacity="var(--stroke-opacity)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left; opacity: var(--fill-opacity);"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 240px; margin-left: 1px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span style="font-size: 13px;">Service Worker<br />(optional)</span></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-7"><g><path d="M 126.37 260 L 193.63 260" fill="none" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 121.12 260 L 128.12 256.5 L 126.37 260 L 128.12 263.5 Z" fill-opacity="var(--fill-opacity)" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="all"/><path d="M 198.88 260 L 191.88 263.5 L 193.63 260 L 191.88 256.5 Z" fill-opacity="var(--fill-opacity)" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-8"><g><path d="M 486.37 40 L 553.63 40" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 481.12 40 L 488.12 36.5 L 486.37 40 L 488.12 43.5 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><path d="M 558.88 40 L 551.88 43.5 L 553.63 40 L 551.88 36.5 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-9"><g><rect x="320" y="0" width="160" height="80" rx="12" ry="12" fill="url(#mx-gradient-3e63dd-1-6c83dd-1-s-0)" stroke="#8ba6ff" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 40px; margin-left: 321px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 15px;">Data Worker</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-10"><g><path d="M 400 153.63 L 400 86.37" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 400 158.88 L 396.5 151.88 L 400 153.63 L 403.5 151.88 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><path d="M 400 81.12 L 403.5 88.12 L 400 86.37 L 396.5 88.12 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-11"><g><rect x="560" y="0" width="120" height="80" rx="12" ry="12" fill="#647687" stroke="#314354" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 40px; margin-left: 561px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 14px;">Backend</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-12"><g><path d="M 620 286.37 L 620 340 L 620 393.63" fill="none" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 620 281.12 L 623.5 288.12 L 620 286.37 L 616.5 288.12 Z" fill-opacity="var(--fill-opacity)" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="all"/><path d="M 620 398.88 L 616.5 391.88 L 620 393.63 L 623.5 391.88 Z" fill-opacity="var(--fill-opacity)" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-13"><g><rect x="560" y="200" width="120" height="80" rx="12" ry="12" fill-opacity="var(--fill-opacity)" fill="url(#mx-gradient-ffcc99-1-fbc593-1-s-0)" stroke="#994c00" stroke-opacity="var(--stroke-opacity)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left; opacity: var(--fill-opacity);"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 240px; margin-left: 561px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 13px;" color="#000000">Canvas Worker<br />(optional)</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-14"><g><rect x="280" y="400" width="400" height="80" rx="12" ry="12" fill="url(#mx-gradient-008a00-1-00cc00-1-s-0)" stroke="#005700" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 398px; height: 1px; padding-top: 440px; margin-left: 281px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 13px;">Main Thread<br />(Browser Window)</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-15"><g><path d="M 200 460 L 273.63 460" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 278.88 460 L 271.88 463.5 L 273.63 460 L 271.88 456.5 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-16"><g><rect x="0" y="400" width="200" height="80" rx="12" ry="12" fill="url(#mx-gradient-3e63dd-1-6c83dd-1-s-0)" stroke="#8ba6ff" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 198px; height: 1px; padding-top: 440px; margin-left: 1px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 13px;">VDom Worker<br />(optional)</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-17"><g><rect x="280" y="440" width="120" height="40" rx="6" ry="6" fill="url(#mx-gradient-ffcc99-1-fbc593-1-s-0)" stroke="#994c00" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 460px; margin-left: 281px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 13px;" color="#000000">DOM Operations</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-18"><g><rect x="560" y="400" width="120" height="40" rx="6" ry="6" fill-opacity="var(--fill-opacity)" fill="url(#mx-gradient-ffcc99-1-fbc593-1-s-0)" stroke="#994c00" stroke-opacity="var(--stroke-opacity)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left; opacity: var(--fill-opacity);"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 420px; margin-left: 561px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 13px;" color="#000000">Canvas</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-19"><g><path d="M 340 326.37 L 340 393.63" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 340 321.12 L 343.5 328.12 L 340 326.37 L 336.5 328.12 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><path d="M 340 398.88 L 336.5 391.88 L 340 393.63 L 343.5 391.88 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-20"><g><rect x="80" y="0" width="160" height="80" rx="12" ry="12" fill-opacity="var(--fill-opacity)" fill="url(#mx-gradient-3e63dd-1-6c83dd-1-s-0)" stroke="#8ba6ff" stroke-opacity="var(--stroke-opacity)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left; opacity: var(--fill-opacity);"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 40px; margin-left: 81px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 14px;">Task Worker<br />(optional)</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-21"><g><path d="M 160 86.37 L 160 240 L 193.63 240" fill="none" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 160 81.12 L 163.5 88.12 L 160 86.37 L 156.5 88.12 Z" fill-opacity="var(--fill-opacity)" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="all"/><path d="M 198.88 240 L 191.88 243.5 L 193.63 240 L 191.88 236.5 Z" fill-opacity="var(--fill-opacity)" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="all"/></g></g></g></g></g></svg>
package/src/DefaultConfig.mjs CHANGED
@@ -262,12 +262,12 @@ const DefaultConfig = {
262
262
  useVdomWorker: true,
263
263
  /**
264
264
  * buildScripts/injectPackageVersion.mjs will update this value
265
- * @default '7.0.3'
265
+ * @default '7.0.4'
266
266
  * @memberOf! module:Neo
267
267
  * @name config.version
268
268
  * @type String
269
269
  */
270
- version: '7.0.3'
270
+ version: '7.0.4'
271
271
  };
272
272
 
273
273
  Object.assign(DefaultConfig, {
package/src/button/Base.mjs CHANGED
@@ -92,7 +92,9 @@ class Base extends Component {
92
92
  */
93
93
  pressed_: false,
94
94
  /**
95
- * Change the browser hash value on click
95
+ * Change the browser hash value on click.
96
+ * Use route for internal navigation and url for external links. Do not use both on the same instance.
97
+ * Transforms the button tag into an a tag [optional]
96
98
  * @member {String|null} route_=null
97
99
  */
98
100
  route_: null,
@@ -297,6 +299,16 @@ class Base extends Component {
297
299
  this.cls = cls
298
300
  }
299
301
 
302
+ /**
303
+ * Triggered after the route config got changed
304
+ * @param {String|null} value
305
+ * @param {String|null} oldValue
306
+ * @protected
307
+ */
308
+ afterSetRoute(value, oldValue) {
309
+ !this.editRoute && this.updateTag()
310
+ }
311
+
300
312
  /**
301
313
  * Triggered after the theme config got changed
302
314
  * @param {String|null} value
@@ -338,22 +350,12 @@ class Base extends Component {
338
350
 
339
351
  /**
340
352
  * Triggered after the url config got changed
341
- * @param {String} value
342
- * @param {String} oldValue
353
+ * @param {String|null} value
354
+ * @param {String|null} oldValue
343
355
  * @protected
344
356
  */
345
357
  afterSetUrl(value, oldValue) {
346
- let vdomRoot = this.getVdomRoot();
347
-
348
- if (value) {
349
- vdomRoot.href = value;
350
- vdomRoot.tag = 'a'
351
- } else {
352
- delete vdomRoot.href;
353
- vdomRoot.tag = 'button'
354
- }
355
-
356
- this.update()
358
+ this.updateTag()
357
359
  }
358
360
 
359
361
  /**
@@ -458,14 +460,7 @@ class Base extends Component {
458
460
  * @protected
459
461
  */
460
462
  changeRoute() {
461
- let me = this,
462
- {windowId} = me;
463
-
464
- if (me.editRoute) {
465
- Neo.Main.editRoute(me.route)
466
- } else {
467
- Neo.Main.setRoute({value: me.route, windowId})
468
- }
463
+ this.editRoute && Neo.Main.editRoute(this.route)
469
464
  }
470
465
 
471
466
  /**
@@ -510,7 +505,7 @@ class Base extends Component {
510
505
  me.callback(me.handler, me.handlerScope || me, [data]);
511
506
 
512
507
  me.menu && me.toggleMenu();
513
- me.route && me.changeRoute();
508
+ me.route && me.changeRoute(); // only relevant for editRoute=true
514
509
  me.useRippleEffect && me.showRipple(data)
515
510
  }
516
511
 
@@ -567,6 +562,30 @@ class Base extends Component {
567
562
  await this.timeout(50)
568
563
  }
569
564
  }
565
+
566
+ /**
567
+ *
568
+ */
569
+ updateTag() {
570
+ let me = this,
571
+ {editRoute, route, url} = me,
572
+ link = !editRoute && route || url,
573
+ vdomRoot = me.getVdomRoot();
574
+
575
+ if (!editRoute && route?.startsWith('#') === false) {
576
+ link = '#' + link
577
+ }
578
+
579
+ if (link) {
580
+ vdomRoot.href = link;
581
+ vdomRoot.tag = 'a'
582
+ } else {
583
+ delete vdomRoot.href;
584
+ vdomRoot.tag = 'button'
585
+ }
586
+
587
+ me.update()
588
+ }
570
589
  }
571
590
 
572
591
  export default Neo.setupClass(Base);
package/src/form/field/Picker.mjs CHANGED
@@ -154,6 +154,7 @@ class Picker extends Text {
154
154
  maxHeight: me.pickerMaxHeight,
155
155
  theme : me.theme,
156
156
  width : pickerWidth,
157
+ windowId : me.windowId,
157
158
  ...me.pickerConfig,
158
159
 
159
160
  // scoped to the field instance