neo.mjs 5.16.5 → 5.17.0

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.
@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
20
20
  */
21
21
  singleton: true,
22
22
  /**
23
- * @member {String} version='5.16.5'
23
+ * @member {String} version='5.17.0'
24
24
  */
25
- version: '5.16.5'
25
+ version: '5.17.0'
26
26
  }
27
27
 
28
28
  /**
@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
20
20
  */
21
21
  singleton: true,
22
22
  /**
23
- * @member {String} version='5.16.5'
23
+ * @member {String} version='5.17.0'
24
24
  */
25
- version: '5.16.5'
25
+ version: '5.17.0'
26
26
  }
27
27
 
28
28
  /**
@@ -101,7 +101,12 @@ class MainContainer extends ConfigurationViewport {
101
101
  }, {
102
102
  module : FileUploadField,
103
103
  id : 'my-existing-document-test',
104
- documentId : 2,
104
+ document : {
105
+ id : 2,
106
+ fileName : 'test.pdf',
107
+ size : 10664885,
108
+ status : 'UN_DOWNLOADABLE'
109
+ },
105
110
  uploadUrl : 'http://127.0.0.1:3000/file-upload-test',
106
111
  documentStatusUrl : 'http://127.0.0.1:3000/document-status-not-downloadable?documentId={documentId}',
107
112
  documentDeleteUrl : 'http://127.0.0.1:3000/document-delete?documentId={documentId}',
@@ -117,7 +122,12 @@ class MainContainer extends ConfigurationViewport {
117
122
  }, {
118
123
  module : FileUploadField,
119
124
  id : 'my-non-existing-document-test',
120
- documentId : 2,
125
+ document : {
126
+ id : 2,
127
+ fileName : 'test.pdf',
128
+ size : 10664885,
129
+ status : 'DELETED'
130
+ },
121
131
  uploadUrl : 'http://127.0.0.1:3000/file-upload-test',
122
132
  documentStatusUrl : 'http://127.0.0.1:3000/document-status-non-existent?documentId={documentId}',
123
133
  documentDeleteUrl : 'http://127.0.0.1:3000/document-delete?documentId={documentId}',
@@ -0,0 +1,142 @@
1
+ import ConfigurationViewport from '../ConfigurationViewport.mjs';
2
+
3
+ import Store from '../../src/data/Store.mjs';
4
+ import NumberField from '../../src/form/field/Number.mjs';
5
+ import AccordionTree from '../../src/tree/Accordion.mjs';
6
+ import CheckBox from "../../src/form/field/CheckBox.mjs";
7
+
8
+ /**
9
+ * @class Neo.examples.treeSelectionModel.MainContainer
10
+ * @extends Neo.examples.ConfigurationViewport
11
+ */
12
+ class MainContainer extends ConfigurationViewport {
13
+ static config = {
14
+ className : 'Neo.examples.treeSelectionModel.MainContainer',
15
+ autoMount : true,
16
+ configItemLabelWidth: 100,
17
+ configItemWidth : 230,
18
+ layout : {ntype: 'hbox', align: 'stretch'},
19
+ cls : ['examples-container-accordion']
20
+ }
21
+
22
+ onConfigChange(config, opts) {
23
+ this.exampleComponent.items[0][config] = opts.value;
24
+ }
25
+
26
+ createConfigurationComponents() {
27
+ let me = this,
28
+ treeList = me.exampleComponent.items[0];
29
+
30
+ return [{
31
+ module : CheckBox,
32
+ checked : treeList.rootParentsAreCollapsible,
33
+ hideLabel : true,
34
+ hideValueLabel: false,
35
+ listeners : {change: me.onConfigChange.bind(me, 'rootParentsAreCollapsible')},
36
+ valueLabelText: 'rootParentsAreCollapsible'
37
+ }, {
38
+ module : CheckBox,
39
+ checked : treeList.firstParentIsVisible,
40
+ hideLabel : true,
41
+ hideValueLabel: false,
42
+ listeners : {change: me.onConfigChange.bind(me, 'firstParentIsVisible')},
43
+ style : {marginTop: '10px'},
44
+ valueLabelText: 'firstParentIsVisible'
45
+ }, {
46
+ module : NumberField,
47
+ clearable: true,
48
+ labelText: 'height',
49
+ listeners: {change: me.onConfigChange.bind(me, 'height')},
50
+ maxValue : 1200,
51
+ minValue : 400,
52
+ stepSize : 5,
53
+ value : treeList.height,
54
+ style : {marginTop: '10px'}
55
+ }, {
56
+ module : NumberField,
57
+ clearable: true,
58
+ labelText: 'width',
59
+ listeners: {change: me.onConfigChange.bind(me, 'width')},
60
+ maxValue : 1200,
61
+ minValue : 200,
62
+ stepSize : 5,
63
+ style : {marginTop: '10px'},
64
+ value : treeList.width
65
+ }];
66
+ }
67
+
68
+ /**
69
+ * @returns {*}
70
+ */
71
+ createExampleComponent() {
72
+ const store = Neo.create(Store, {
73
+ keyProperty: 'id',
74
+ model : {
75
+ fields: [
76
+ {name: 'collapsed', type: 'Boolean'},
77
+ {name: 'content', type: 'String'},
78
+ {name: 'iconCls', type: 'String'},
79
+ {name: 'id', type: 'Integer'},
80
+ {name: 'isLeaf', type: 'Boolean'},
81
+ {name: 'name', type: 'String'},
82
+ {name: 'parentId', type: 'Integer'}
83
+ ]
84
+ }
85
+ });
86
+
87
+ return Neo.ntype({
88
+ ntype : 'container',
89
+ layout: {ntype: 'hbox', align: 'stretch'},
90
+ items : [{
91
+ // module: TextField,
92
+ // label: 'Test',
93
+ // plugin: {
94
+ // Plugin: {
95
+ // bold: true
96
+ // }
97
+ // }
98
+ // },{
99
+ module: AccordionTree,
100
+ store : store,
101
+ height: 800,
102
+ width : 400,
103
+
104
+ // ensure afterSetMounted runs only once
105
+ storeLoaded: false,
106
+ afterSetMounted() {
107
+ if (!this.storeLoaded) {
108
+ this.storeLoaded = true;
109
+ } else {
110
+ return;
111
+ }
112
+
113
+ let me = this;
114
+
115
+ Neo.Xhr.promiseJson({
116
+ url: '../../examples/treeSelectionModel/tree.json'
117
+ }).then(data => {
118
+ const items = data.json,
119
+ colorArray = ['red', 'yellow', 'green'],
120
+ iconArray = ['home', 'industry', 'user'];
121
+
122
+ // create random iconCls colors
123
+ items.forEach((item) => {
124
+ if (!item.iconCls) {
125
+ const rand = Math.floor(Math.random() * 3);
126
+
127
+ item.iconCls = 'fa fa-' + iconArray[rand] + ' color-' + colorArray[rand];
128
+ }
129
+ });
130
+
131
+ me.store.data = data.json;
132
+ me.createItems(null, me.getListItemsRoot(), 0);
133
+ });
134
+ }
135
+ }]
136
+ });
137
+ }
138
+ }
139
+
140
+ Neo.applyClassConfig(MainContainer);
141
+
142
+ export default MainContainer;
@@ -0,0 +1,6 @@
1
+ import MainContainer from './MainContainer.mjs';
2
+
3
+ export const onStart = () => Neo.app({
4
+ mainView: MainContainer,
5
+ name : 'Neo.examples.treeSelectionModel'
6
+ });
@@ -0,0 +1,11 @@
1
+ <!DOCTYPE HTML>
2
+ <html>
3
+ <head>
4
+ <meta name="viewport" content="width=device-width, initial-scale=1">
5
+ <meta charset="UTF-8">
6
+ <title>Neo Tree</title>
7
+ </head>
8
+ <body>
9
+ <script src="../../src/MicroLoader.mjs" type="module"></script>
10
+ </body>
11
+ </html>
@@ -0,0 +1,7 @@
1
+ {
2
+ "appPath" : "examples/treeSelectionModel/app.mjs",
3
+ "basePath" : "../../",
4
+ "environment": "development",
5
+ "mainPath" : "./Main.mjs",
6
+ "themes" : ["neo-theme-dark", "neo-theme-light"]
7
+ }
@@ -0,0 +1,112 @@
1
+ [
2
+ {
3
+ "id": 1,
4
+ "name": "ROOT",
5
+ "parentId": null,
6
+ "collapsed": false,
7
+ "isLeaf": false
8
+ },
9
+ {
10
+ "id": 2,
11
+ "name": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr,",
12
+ "parentId": 1,
13
+ "isLeaf": true,
14
+ "content": "Textfeld",
15
+ "iconCls": "fa fa-t color-blue"
16
+ },
17
+ {
18
+ "id": 3,
19
+ "name": "Sed diam nonumy",
20
+ "parentId": 1,
21
+ "isLeaf": true,
22
+ "content": "Textfeld",
23
+ "iconCls": "fa fa-t color-blue"
24
+ },
25
+ {
26
+ "id": 4,
27
+ "name": "Eirmod",
28
+ "parentId": 1,
29
+ "isLeaf": true,
30
+ "content": "Textfeld",
31
+ "iconCls": "fa fa-t color-blue"
32
+ },
33
+ {
34
+ "id": 5,
35
+ "name": "Tempor",
36
+ "parentId": 1,
37
+ "isLeaf": true,
38
+ "content": "Textfeld",
39
+ "iconCls": "fa fa-t color-blue"
40
+ },
41
+ {
42
+ "id": 6,
43
+ "name": "Invidunt ut labore",
44
+ "parentId": 1,
45
+ "isLeaf": true,
46
+ "content": "Textfeld",
47
+ "iconCls": "fa fa-t color-blue"
48
+ },
49
+ {
50
+ "id": 7,
51
+ "name": "Dolore magna aliquyam",
52
+ "parentId": null,
53
+ "collapsed": false,
54
+ "isLeaf": false
55
+ },
56
+ {
57
+ "id": 8,
58
+ "name": "V01 . At vero eos et accusam",
59
+ "parentId": 7,
60
+ "collapsed": true,
61
+ "isLeaf": false,
62
+ "content": "Auswählliste",
63
+ "iconCls": "fa fa-chevron-down color-red"
64
+ },
65
+ {
66
+ "id": 9,
67
+ "name": "Justo 1",
68
+ "parentId": 8,
69
+ "isLeaf": true,
70
+ "content": "Child",
71
+ "iconCls": "fa-regular fa-square-check color-green"
72
+ },
73
+ {
74
+ "id": 10,
75
+ "name": "Justo 2",
76
+ "parentId": 8,
77
+ "isLeaf": true,
78
+ "content": "Child",
79
+ "iconCls": "fa-regular fa-square-check color-green"
80
+ },
81
+ {
82
+ "id": 11,
83
+ "name": "Rebum",
84
+ "parentId": null,
85
+ "collapsed": false,
86
+ "isLeaf": false
87
+ },
88
+ {
89
+ "id": 12,
90
+ "name": "F0801 - Stet ",
91
+ "parentId": 11,
92
+ "isLeaf": true,
93
+ "content": "Datumfeld",
94
+ "iconCls": "fa-solid fa-calendar-days color-yellow"
95
+ },
96
+ {
97
+ "id": 13,
98
+ "name": "F0802 - Kasd",
99
+ "parentId": 11,
100
+ "isLeaf": true,
101
+ "content": "Datumfeld",
102
+ "iconCls": "fa-solid fa-calendar-days color-yellow"
103
+ },
104
+ {
105
+ "id": 14,
106
+ "name": "E30 - Gubergren",
107
+ "parentId": 11,
108
+ "isLeaf": true,
109
+ "content": "Mehrfachauswahl",
110
+ "iconCls": "fa-regular fa-square-check color-green"
111
+ }
112
+ ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "neo.mjs",
3
- "version": "5.16.5",
3
+ "version": "5.17.0",
4
4
  "description": "The webworkers driven UI framework",
5
5
  "type": "module",
6
6
  "repository": {
@@ -55,8 +55,8 @@
55
55
  "inquirer": "^9.2.10",
56
56
  "neo-jsdoc": "1.0.1",
57
57
  "neo-jsdoc-x": "1.0.5",
58
- "postcss": "^8.4.27",
59
- "sass": "^1.65.1",
58
+ "postcss": "^8.4.28",
59
+ "sass": "^1.66.0",
60
60
  "showdown": "^2.1.0",
61
61
  "webpack": "^5.88.2",
62
62
  "webpack-cli": "^5.1.4",
@@ -0,0 +1,24 @@
1
+ .examples-container-accordion {
2
+ .neo-accordion-item-icon {
3
+ &.color-blue {
4
+ background-color: lightskyblue;
5
+ color: v(list-item-background-color);
6
+ }
7
+
8
+ &.color-red {
9
+ background-color: palevioletred;
10
+ color: v(list-item-background-color);
11
+ }
12
+
13
+ &.color-yellow {
14
+ background-color: goldenrod;
15
+ color: v(list-item-background-color);
16
+ }
17
+
18
+ &.color-green {
19
+ background-color: lightseagreen;
20
+ color: v(list-container-list-color);
21
+ color: v(list-item-background-color);
22
+ }
23
+ }
24
+ }
@@ -122,7 +122,7 @@
122
122
  var(--fileuploadfield-progress-color) 180deg,
123
123
  transparent 180deg
124
124
  );
125
- animation: spinner-rotation 3s linear infinite;
125
+ animation : spinner-rotation 3s linear infinite;
126
126
 
127
127
  &::after {
128
128
  content : "";
@@ -130,6 +130,12 @@
130
130
  background-color : var(--fileuploadfield-background-color);
131
131
  }
132
132
  }
133
+ // No interaction while scanning. We just have to wait.
134
+ // But
135
+ .neo-file-upload-action-button {
136
+ position : absolute;
137
+ clip : rect(0, 0, 0, 0);
138
+ }
133
139
  }
134
140
 
135
141
  // While uploading and scanning, we can abort the whole upload/scan process
@@ -142,7 +148,7 @@
142
148
  }
143
149
 
144
150
  // If the upload or scan failed, we show an error UI and the action button cancels
145
- .neo-file-upload-state-upload-failed, .neo-file-upload-state-scan-failed {
151
+ .neo-file-upload-state-upload-failed, .neo-file-upload-state-scan-failed, .neo-file-upload-field.neo-invalid {
146
152
  --fileuploadfield-progress-color : var(--fileuploadfield-error-color);
147
153
  border-color : var(--fileuploadfield-error-color);
148
154
 
@@ -202,6 +208,14 @@
202
208
  }
203
209
  }
204
210
 
211
+ .neo-file-upload-state-deleted {
212
+ .neo-file-upload-action-button {
213
+ &::after {
214
+ content : var(--cancel-icon-codepoint );
215
+ }
216
+ }
217
+ }
218
+
205
219
  .neo-file-upload-state-ready {
206
220
  // Only the input field is visible when in ready state
207
221
  // It takes up the whole component, and is the only interactive item
@@ -0,0 +1,128 @@
1
+ .neo-tree-list {
2
+ &.root-not-collapsible {
3
+ .neo-accordion-style {
4
+ .neo-list-folder.neo-not-collapsible {
5
+ pointer-events: none;
6
+ font-size: 1.2em;
7
+ font-weight: 100;
8
+
9
+ // needs to have double class call
10
+ .neo-list-item-content::before {
11
+ content: unset !important;
12
+ }
13
+ }
14
+ }
15
+ }
16
+
17
+ &.first-parent-not-visible {
18
+ .neo-accordion-style {
19
+ & > li:first-child {
20
+ display: none;
21
+ }
22
+ }
23
+ }
24
+
25
+ .neo-accordion-style {
26
+ .neo-list-item-content::before {
27
+ content: unset;
28
+ }
29
+
30
+ .neo-list-item:focus {
31
+ outline: unset;
32
+ }
33
+
34
+ // remove indentation
35
+ ul {
36
+ padding-left: 0 !important;
37
+ }
38
+
39
+ // base folder
40
+ & > .neo-list-folder {
41
+ & > .neo-list-item-content {
42
+ // folder closed
43
+ &::before {
44
+ content: "\f077" !important;
45
+ position: absolute;
46
+ right: 5px;
47
+ text-align: center;
48
+ }
49
+ }
50
+
51
+ // folder open
52
+ &.neo-folder-open {
53
+ .neo-list-item-content:before {
54
+ content: "\f078" !important;
55
+ }
56
+ }
57
+ }
58
+
59
+
60
+ // sub folder
61
+ ul {
62
+ .neo-list-folder {
63
+ // remove original folder icon
64
+ .neo-list-item-content::before {
65
+ content: unset !important;
66
+ }
67
+
68
+ // folder closed
69
+ &.neo-list-item:before {
70
+ color: var(--list-item-glyph-color);
71
+ display: inline-block;
72
+ font-family: var(--fa-style-family-classic);
73
+ font-weight: 900;
74
+
75
+ background-color: palevioletred;
76
+ content: "\f077" !important;
77
+ margin-right: .5em;
78
+ width: 25px;
79
+ height: 25px;
80
+ text-align: center;
81
+ line-height: 25px;
82
+ }
83
+
84
+ // folder open
85
+ &.neo-folder-open {
86
+ &.neo-list-item:before {
87
+ content: "\f078" !important;
88
+ }
89
+ }
90
+
91
+ }
92
+ }
93
+
94
+ .neo-list-item {
95
+ display: flex;
96
+ flex-direction: row;
97
+ align-items: center;
98
+ margin-right: 0;
99
+ padding-right: 10px;
100
+
101
+ .neo-accordion-item-icon {
102
+ width: 25px;
103
+ height: 25px;
104
+ text-align: center;
105
+ line-height: 25px;
106
+ margin-right: .5em;
107
+ }
108
+
109
+ .neo-list-item-content {
110
+ display: flex;
111
+ flex-direction: column;
112
+ width: 85%;
113
+
114
+ .neo-list-item-content-header {
115
+ font-weight: 700;
116
+ text-overflow: ellipsis;
117
+ overflow: hidden;
118
+ white-space: nowrap;
119
+ width: 100%;
120
+ }
121
+
122
+ .neo-list-item-content-text {
123
+ font-size: 0.8em;
124
+ }
125
+ }
126
+ }
127
+ }
128
+ }
@@ -245,12 +245,12 @@ const DefaultConfig = {
245
245
  useVdomWorker: true,
246
246
  /**
247
247
  * buildScripts/injectPackageVersion.mjs will update this value
248
- * @default '5.16.5'
248
+ * @default '5.17.0'
249
249
  * @memberOf! module:Neo
250
250
  * @name config.version
251
251
  * @type String
252
252
  */
253
- version: '5.16.5'
253
+ version: '5.17.0'
254
254
  };
255
255
 
256
256
  Object.assign(DefaultConfig, {
package/src/core/Base.mjs CHANGED
@@ -293,6 +293,7 @@ class Base {
293
293
  * Applies all class configs to this instance
294
294
  * @param {Object} config
295
295
  * @param {Boolean} [preventOriginalConfig] True prevents the instance from getting an originalConfig property
296
+ * @protected
296
297
  */
297
298
  initConfig(config, preventOriginalConfig) {
298
299
  let me = this;
@@ -304,6 +305,7 @@ class Base {
304
305
  /**
305
306
  * Does get triggered with a delay to ensure that Neo.workerId & Neo.worker.Manager are defined
306
307
  * Remote method access via promises
308
+ * @protected
307
309
  */
308
310
  initRemote() {
309
311
  let me = this,
@@ -333,6 +335,7 @@ class Base {
333
335
  * @param {Object} config
334
336
  * @param {Boolean} [preventOriginalConfig] True prevents the instance from getting an originalConfig property
335
337
  * @returns {Object} config
338
+ * @protected
336
339
  */
337
340
  mergeConfig(config, preventOriginalConfig) {
338
341
  let me = this,
@@ -413,6 +416,7 @@ class Base {
413
416
  * When using set(), configs without a trailing underscore can already be assigned,
414
417
  * so the hasOwnProperty() check will return true
415
418
  * @param {Boolean} [forceAssign=false]
419
+ * @protected
416
420
  */
417
421
  processConfigs(forceAssign=false) {
418
422
  let me = this,
@@ -439,6 +443,7 @@ class Base {
439
443
  /**
440
444
  * @param {String} className
441
445
  * @param {Object} remote
446
+ * @protected
442
447
  */
443
448
  static sendRemotes(className, remote) {
444
449
  let origin;
@@ -482,6 +487,7 @@ class Base {
482
487
  * so that afterSet(), beforeGet() and beforeSet() methods can get the new values right away
483
488
  * @param {Object} config
484
489
  * @returns {Object}
490
+ * @protected
485
491
  */
486
492
  setFields(config) {
487
493
  let me = this,