neo.mjs 5.13.7 → 5.13.9

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/apps/ServiceWorker.mjs +2 -2
  2. package/examples/ServiceWorker.mjs +2 -2
  3. package/package.json +4 -4
  4. package/resources/scss/src/form/field/Text.scss +6 -0
  5. package/resources/scss/src/menu/List.scss +41 -20
  6. package/resources/scss/theme-dark/menu/List.scss +38 -24
  7. package/resources/scss/theme-light/menu/List.scss +38 -24
  8. package/src/DefaultConfig.mjs +2 -2
  9. package/src/component/wrapper/GoogleMaps.mjs +15 -9
  10. package/src/main/addon/GoogleMaps.mjs +20 -6
  11. package/src/util/Logger.mjs +204 -17
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='5.13.7'
23
+ * @member {String} version='5.13.9'
24
24
  */
25
- version: '5.13.7'
25
+ version: '5.13.9'
26
26
  }
27
27
 
28
28
  /**
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='5.13.7'
23
+ * @member {String} version='5.13.9'
24
24
  */
25
- version: '5.13.7'
25
+ version: '5.13.9'
26
26
  }
27
27
 
28
28
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "neo.mjs",
3
- "version": "5.13.7",
3
+ "version": "5.13.9",
4
4
  "description": "The webworkers driven UI framework",
5
5
  "type": "module",
6
6
  "repository": {
@@ -41,7 +41,7 @@
41
41
  },
42
42
  "homepage": "https://neomjs.github.io/pages/",
43
43
  "dependencies": {
44
- "@fortawesome/fontawesome-free": "^6.4.0",
44
+ "@fortawesome/fontawesome-free": "^6.4.2",
45
45
  "@material/mwc-button": "^0.27.0",
46
46
  "@material/mwc-textfield": "^0.27.0",
47
47
  "autoprefixer": "^10.4.14",
@@ -52,11 +52,11 @@
52
52
  "envinfo": "^7.10.0",
53
53
  "fs-extra": "^11.1.1",
54
54
  "highlightjs-line-numbers.js": "^2.8.0",
55
- "inquirer": "^9.2.8",
55
+ "inquirer": "^9.2.9",
56
56
  "neo-jsdoc": "^1.0.1",
57
57
  "neo-jsdoc-x": "^1.0.5",
58
58
  "postcss": "^8.4.27",
59
- "sass": "^1.64.1",
59
+ "sass": "^1.64.2",
60
60
  "webpack": "^5.88.2",
61
61
  "webpack-cli": "^5.1.4",
62
62
  "webpack-dev-server": "4.15.1",
package/resources/scss/src/form/field/Text.scss CHANGED
@@ -82,6 +82,12 @@
82
82
  }
83
83
  }
84
84
  }
85
+
86
+ &:not(.label-inline, .neo-input-wrapper) {
87
+ .neo-textfield-input {
88
+ border-color: v(textfield-border-color-invalid);
89
+ }
90
+ }
85
91
  }
86
92
 
87
93
  &.neo-invalid:not(.neo-disabled, .neo-has-content) {
package/resources/scss/src/menu/List.scss CHANGED
@@ -3,27 +3,17 @@
3
3
  overflow-y : auto;
4
4
  width : fit-content;
5
5
 
6
- &.neo-floating {
7
- box-shadow: v(menu-list-box-shadow);
8
- position : absolute;
9
- }
10
-
11
6
  .neo-list-item {
12
- align-items : center;
13
- color : v(menu-list-item-color);
14
- display : flex;
15
- font-family : v(menu-list-item-font-family);
16
- font-weight : v(menu-list-item-font-weight);
17
- height : v(menu-list-item-height);
18
- line-height : v(menu-list-item-line-height);
19
- padding : v(menu-list-item-padding);
20
- text-transform: v(menu-list-item-text-transform);
21
-
22
- &.neo-selected {
23
- .neo-icon {
24
- color: v(menu-list-item-icon-color-selected);
25
- }
26
- }
7
+ align-items : center;
8
+ background-color: v(menu-list-item-background-color);
9
+ color : v(menu-list-item-color);
10
+ display : flex;
11
+ font-family : v(menu-list-item-font-family);
12
+ font-weight : v(menu-list-item-font-weight);
13
+ height : v(menu-list-item-height);
14
+ line-height : v(menu-list-item-line-height);
15
+ padding : v(menu-list-item-padding);
16
+ text-transform : v(menu-list-item-text-transform);
27
17
 
28
18
  .neo-arrow-icon {
29
19
  color : v(menu-list-item-icon-color);
@@ -44,5 +34,36 @@
44
34
  margin-right: v(menu-list-item-icon-gap);
45
35
  width : 1.2em;
46
36
  }
37
+
38
+ &:focus {
39
+ outline: v(menu-list-item-outline-focus);
40
+ }
41
+
42
+ &:hover {
43
+ background-color: v(menu-list-item-background-color-hover);
44
+ }
45
+
46
+ &.neo-disabled {
47
+ background-color: v(menu-list-item-background-color-disabled);
48
+ color : v(menu-list-item-color-disabled);
49
+ opacity : v(menu-list-item-opacity-disabled);
50
+
51
+ .neo-icon {
52
+ color: v(menu-list-item-icon-color-disabled);
53
+ }
54
+ }
55
+
56
+ &.neo-selected {
57
+ background-color: v(menu-list-item-background-color-selected);
58
+
59
+ .neo-icon {
60
+ color: v(menu-list-item-icon-color-selected);
61
+ }
62
+ }
63
+ }
64
+
65
+ &.neo-floating {
66
+ box-shadow: v(menu-list-box-shadow);
67
+ position : absolute;
47
68
  }
48
69
  }
package/resources/scss/theme-dark/menu/List.scss CHANGED
@@ -1,31 +1,45 @@
1
1
  $neoMap: map-merge($neoMap, (
2
- 'menu-list-border-color' : #3c3f41,
3
- 'menu-list-box-shadow' : 0 5px 10px rgba(0,0,0,.4),
4
- 'menu-list-item-color' : inherit,
5
- 'menu-list-item-font-family' : inherit,
6
- 'menu-list-item-font-weight' : inherit,
7
- 'menu-list-item-icon-color' : #bbb,
8
- 'menu-list-item-icon-color-selected': #2b2b2b,
9
- 'menu-list-item-icon-gap' : .4em,
10
- 'menu-list-item-height' : inherit,
11
- 'menu-list-item-line-height' : inherit,
12
- 'menu-list-item-padding' : 5px,
13
- 'menu-list-item-text-transform' : inherit
2
+ 'menu-list-border-color' : #3c3f41,
3
+ 'menu-list-box-shadow' : 0 5px 10px rgba(0,0,0,.4),
4
+ 'menu-list-item-background-color' : inherit,
5
+ 'menu-list-item-background-color-disabled': inherit,
6
+ 'menu-list-item-background-color-hover' : inherit,
7
+ 'menu-list-item-background-color-selected': inherit,
8
+ 'menu-list-item-color' : inherit,
9
+ 'menu-list-item-font-family' : inherit,
10
+ 'menu-list-item-font-weight' : inherit,
11
+ 'menu-list-item-icon-color' : #bbb,
12
+ 'menu-list-item-icon-color-disabled' : #bbb,
13
+ 'menu-list-item-icon-color-selected' : #2b2b2b,
14
+ 'menu-list-item-icon-gap' : .4em,
15
+ 'menu-list-item-height' : inherit,
16
+ 'menu-list-item-line-height' : inherit,
17
+ 'menu-list-item-opacity-disabled' : inherit,
18
+ 'menu-list-item-outline-focus' : none,
19
+ 'menu-list-item-padding' : 5px,
20
+ 'menu-list-item-text-transform' : inherit
14
21
  ));
15
22
 
16
23
  @if $useCssVars == true {
17
24
  :root .neo-theme-dark { // .neo-menu-list
18
- --menu-list-border-color : #{neo(menu-list-border-color)};
19
- --menu-list-box-shadow : #{neo(menu-list-box-shadow)};
20
- --menu-list-item-color : #{neo(menu-list-item-color)};
21
- --menu-list-item-font-family : #{neo(menu-list-item-font-family)};
22
- --menu-list-item-font-weight : #{neo(menu-list-item-font-weight)};
23
- --menu-list-item-icon-color : #{neo(menu-list-item-icon-color)};
24
- --menu-list-item-icon-color-selected: #{neo(menu-list-item-icon-color-selected)};
25
- --menu-list-item-icon-gap : #{neo(menu-list-item-icon-gap)};
26
- --menu-list-item-height : #{neo(menu-list-item-height)};
27
- --menu-list-item-line-height : #{neo(menu-list-item-line-height)};
28
- --menu-list-item-padding : #{neo(menu-list-item-padding)};
29
- --menu-list-item-text-transform : #{neo(menu-list-item-text-transform)};
25
+ --menu-list-border-color : #{neo(menu-list-border-color)};
26
+ --menu-list-box-shadow : #{neo(menu-list-box-shadow)};
27
+ --menu-list-item-background-color : #{neo(menu-list-item-background-color)};
28
+ --menu-list-item-background-color-disabled: #{neo(menu-list-item-background-color-disabled)};
29
+ --menu-list-item-background-color-hover : #{neo(menu-list-item-background-color-hover)};
30
+ --menu-list-item-background-color-selected: #{neo(menu-list-item-background-color-selected)};
31
+ --menu-list-item-color : #{neo(menu-list-item-color)};
32
+ --menu-list-item-font-family : #{neo(menu-list-item-font-family)};
33
+ --menu-list-item-font-weight : #{neo(menu-list-item-font-weight)};
34
+ --menu-list-item-icon-color : #{neo(menu-list-item-icon-color)};
35
+ --menu-list-item-icon-color-disabled : #{neo(menu-list-item-icon-color-disabled)};
36
+ --menu-list-item-icon-color-selected : #{neo(menu-list-item-icon-color-selected)};
37
+ --menu-list-item-icon-gap : #{neo(menu-list-item-icon-gap)};
38
+ --menu-list-item-height : #{neo(menu-list-item-height)};
39
+ --menu-list-item-line-height : #{neo(menu-list-item-line-height)};
40
+ --menu-list-item-opacity-disabled : #{neo(menu-list-item-opacity-disabled)};
41
+ --menu-list-item-outline-focus : #{neo(menu-list-item-outline-focus)};
42
+ --menu-list-item-padding : #{neo(menu-list-item-padding)};
43
+ --menu-list-item-text-transform : #{neo(menu-list-item-text-transform)};
30
44
  }
31
45
  }
package/resources/scss/theme-light/menu/List.scss CHANGED
@@ -1,31 +1,45 @@
1
1
  $neoMap: map-merge($neoMap, (
2
- 'menu-list-border-color' : #1c60a0,
3
- 'menu-list-box-shadow' : 0 5px 10px rgba(0,0,0,.4),
4
- 'menu-list-item-color' : inherit,
5
- 'menu-list-item-font-family' : inherit,
6
- 'menu-list-item-font-weight' : inherit,
7
- 'menu-list-item-icon-color' : #1c60a0,
8
- 'menu-list-item-icon-color-selected': #1c60a0,
9
- 'menu-list-item-icon-gap' : .4em,
10
- 'menu-list-item-height' : inherit,
11
- 'menu-list-item-line-height' : inherit,
12
- 'menu-list-item-padding' : 5px,
13
- 'menu-list-item-text-transform' : inherit
2
+ 'menu-list-border-color' : #1c60a0,
3
+ 'menu-list-box-shadow' : 0 5px 10px rgba(0,0,0,.4),
4
+ 'menu-list-item-background-color' : inherit,
5
+ 'menu-list-item-background-color-disabled': inherit,
6
+ 'menu-list-item-background-color-hover' : inherit,
7
+ 'menu-list-item-background-color-selected': inherit,
8
+ 'menu-list-item-color' : inherit,
9
+ 'menu-list-item-font-family' : inherit,
10
+ 'menu-list-item-font-weight' : inherit,
11
+ 'menu-list-item-icon-color' : #1c60a0,
12
+ 'menu-list-item-icon-color-disabled' : #1c60a0,
13
+ 'menu-list-item-icon-color-selected' : #1c60a0,
14
+ 'menu-list-item-icon-gap' : .4em,
15
+ 'menu-list-item-height' : inherit,
16
+ 'menu-list-item-line-height' : inherit,
17
+ 'menu-list-item-opacity-disabled' : inherit,
18
+ 'menu-list-item-outline-focus' : none,
19
+ 'menu-list-item-padding' : 5px,
20
+ 'menu-list-item-text-transform' : inherit
14
21
  ));
15
22
 
16
23
  @if $useCssVars == true {
17
24
  :root .neo-theme-light { // .neo-menu-list
18
- --menu-list-border-color : #{neo(menu-list-border-color)};
19
- --menu-list-box-shadow : #{neo(menu-list-box-shadow)};
20
- --menu-list-item-color : #{neo(menu-list-item-color)};
21
- --menu-list-item-font-family : #{neo(menu-list-item-font-family)};
22
- --menu-list-item-font-weight : #{neo(menu-list-item-font-weight)};
23
- --menu-list-item-icon-color : #{neo(menu-list-item-icon-color)};
24
- --menu-list-item-icon-color-selected: #{neo(menu-list-item-icon-color-selected)};
25
- --menu-list-item-icon-gap : #{neo(menu-list-item-icon-gap)};
26
- --menu-list-item-height : #{neo(menu-list-item-height)};
27
- --menu-list-item-line-height : #{neo(menu-list-item-line-height)};
28
- --menu-list-item-padding : #{neo(menu-list-item-padding)};
29
- --menu-list-item-text-transform : #{neo(menu-list-item-text-transform)};
25
+ --menu-list-border-color : #{neo(menu-list-border-color)};
26
+ --menu-list-box-shadow : #{neo(menu-list-box-shadow)};
27
+ --menu-list-item-background-color : #{neo(menu-list-item-background-color)};
28
+ --menu-list-item-background-color-disabled: #{neo(menu-list-item-background-color-disabled)};
29
+ --menu-list-item-background-color-hover : #{neo(menu-list-item-background-color-hover)};
30
+ --menu-list-item-background-color-selected: #{neo(menu-list-item-background-color-selected)};
31
+ --menu-list-item-color : #{neo(menu-list-item-color)};
32
+ --menu-list-item-font-family : #{neo(menu-list-item-font-family)};
33
+ --menu-list-item-font-weight : #{neo(menu-list-item-font-weight)};
34
+ --menu-list-item-icon-color : #{neo(menu-list-item-icon-color)};
35
+ --menu-list-item-icon-color-disabled : #{neo(menu-list-item-icon-color-disabled)};
36
+ --menu-list-item-icon-color-selected : #{neo(menu-list-item-icon-color-selected)};
37
+ --menu-list-item-icon-gap : #{neo(menu-list-item-icon-gap)};
38
+ --menu-list-item-height : #{neo(menu-list-item-height)};
39
+ --menu-list-item-line-height : #{neo(menu-list-item-line-height)};
40
+ --menu-list-item-opacity-disabled : #{neo(menu-list-item-opacity-disabled)};
41
+ --menu-list-item-outline-focus : #{neo(menu-list-item-outline-focus)};
42
+ --menu-list-item-padding : #{neo(menu-list-item-padding)};
43
+ --menu-list-item-text-transform : #{neo(menu-list-item-text-transform)};
30
44
  }
31
45
  }
package/src/DefaultConfig.mjs CHANGED
@@ -245,12 +245,12 @@ const DefaultConfig = {
245
245
  useVdomWorker: true,
246
246
  /**
247
247
  * buildScripts/injectPackageVersion.mjs will update this value
248
- * @default '5.13.7'
248
+ * @default '5.13.9'
249
249
  * @memberOf! module:Neo
250
250
  * @name config.version
251
251
  * @type String
252
252
  */
253
- version: '5.13.7'
253
+ version: '5.13.9'
254
254
  };
255
255
 
256
256
  Object.assign(DefaultConfig, {
package/src/component/wrapper/GoogleMaps.mjs CHANGED
@@ -18,7 +18,7 @@ class GoogleMaps extends Base {
18
18
  * @protected
19
19
  */
20
20
  ntype: 'googlemaps',
21
- /**
21
+ /**
22
22
  * Specify lat & lng for the current focus position
23
23
  * @member {Object} center_={lat: -34.397, lng: 150.644}
24
24
  */
@@ -70,27 +70,27 @@ class GoogleMaps extends Base {
70
70
  * Internal flag. Gets set to true once Neo.main.addon.GoogleMaps.create() is finished.
71
71
  * @member {Boolean} mapCreated=false
72
72
  */
73
- mapCreated = false
73
+ mapCreated = false
74
74
  /**
75
75
  * Pass any options to the map instance which are not explicitly defined here
76
76
  * @member {Object} mapOptions={}
77
77
  */
78
- mapOptions = {}
78
+ mapOptions = {}
79
79
  /**
80
80
  * null => the maximum zoom from the current map type is used instead
81
81
  * @member {Number|null} maxZoom=null
82
82
  */
83
- maxZoom = null
83
+ maxZoom = null
84
84
  /**
85
85
  null => the minimum zoom from the current map type is used instead
86
86
  * @member {Number|null} minZoom=null
87
87
  */
88
- minZoom = null
88
+ minZoom = null
89
89
  /**
90
90
  * false hides the default zoom control
91
91
  * @member {Boolean} zoomControl=true
92
92
  */
93
- zoomControl = true
93
+ zoomControl = true
94
94
 
95
95
  /**
96
96
  * @param {Object} config
@@ -122,7 +122,7 @@ class GoogleMaps extends Base {
122
122
  Neo.main.addon.GoogleMaps.addMarker({
123
123
  appName: this.appName,
124
124
  ...data
125
- });
125
+ })
126
126
  }
127
127
 
128
128
  /**
@@ -238,7 +238,7 @@ class GoogleMaps extends Base {
238
238
  * @param {Boolean} updateParentVdom=false
239
239
  * @param {Boolean} silent=false
240
240
  */
241
- destroy(updateParentVdom=false, silent=false) {
241
+ destroy(updateParentVdom = false, silent = false) {
242
242
  this.removeMap();
243
243
  super.destroy(updateParentVdom, silent)
244
244
  }
@@ -257,7 +257,8 @@ class GoogleMaps extends Base {
257
257
  /**
258
258
  * Hook to use once the map instance got rendered
259
259
  */
260
- onComponentMounted() {}
260
+ onComponentMounted() {
261
+ }
261
262
 
262
263
  /**
263
264
  * @param {Object} data
@@ -279,6 +280,11 @@ class GoogleMaps extends Base {
279
280
  onMarkerStoreLoad() {
280
281
  let me = this;
281
282
 
283
+ Neo.main.addon.GoogleMaps.destroyMarkers({
284
+ appName: me.appName,
285
+ id : me.id
286
+ });
287
+
282
288
  me.markerStore.items.forEach(item => {
283
289
  Neo.main.addon.GoogleMaps.addMarker({
284
290
  appName: me.appName,
package/src/main/addon/GoogleMaps.mjs CHANGED
@@ -27,6 +27,7 @@ class GoogleMaps extends Base {
27
27
  app: [
28
28
  'addMarker',
29
29
  'create',
30
+ 'destroyMarkers',
30
31
  'geocode',
31
32
  'hideMarker',
32
33
  'panTo',
@@ -51,11 +52,11 @@ class GoogleMaps extends Base {
51
52
  /**
52
53
  * @member {Object} maps={}
53
54
  */
54
- maps = {}
55
+ maps = {}
55
56
  /**
56
57
  * @member {Object} markers={}
57
58
  */
58
- markers = {}
59
+ markers = {}
59
60
 
60
61
  /**
61
62
  * @param {Object} config
@@ -135,6 +136,19 @@ class GoogleMaps extends Base {
135
136
  me.fire('mapCreated', id);
136
137
  }
137
138
 
139
+ /**
140
+ * Destroys all markers for the specified map ID.
141
+ * @param {Object} data
142
+ * @param {String} data.mapId
143
+ */
144
+ destroyMarkers(data) {
145
+ let me = this,
146
+ markers = me.markers[data.mapId] || {};
147
+
148
+ Object.values(markers).forEach(marker => marker.setMap(null));
149
+ delete me.markers[data.mapId];
150
+ }
151
+
138
152
  /**
139
153
  * Use either address, location or placeId
140
154
  * @param {Object} data
@@ -181,7 +195,7 @@ class GoogleMaps extends Base {
181
195
  * @param {google.maps.Map} map
182
196
  * @param {String} mapId
183
197
  */
184
- onMapZoomChange(map, mapId){
198
+ onMapZoomChange(map, mapId) {
185
199
  DomEvents.sendMessageToApp({
186
200
  id : mapId,
187
201
  path : [{cls: [], id: mapId}],
@@ -199,9 +213,9 @@ class GoogleMaps extends Base {
199
213
  let transformedEvent = DomEvents.getMouseEventData(event.domEvent);
200
214
 
201
215
  DomEvents.sendMessageToApp({
202
- id : marker.neoId,
203
- path: [{cls: [], id: marker.neoMapId}],
204
- type: 'googleMarkerClick',
216
+ id : marker.neoId,
217
+ path : [{cls: [], id: marker.neoMapId}],
218
+ type : 'googleMarkerClick',
205
219
  domEvent: transformedEvent
206
220
  })
207
221
  }
package/src/util/Logger.mjs CHANGED
@@ -6,6 +6,38 @@ import Base from '../core/Base.mjs';
6
6
  * @singleton
7
7
  */
8
8
  class Logger extends Base {
9
+ /**
10
+ * Colors
11
+ * @property {Object} colors
12
+ */
13
+ logColors = {
14
+ error: 'indianred',
15
+ info : '#acacac',
16
+ log : '#448888',
17
+ warn : '#6d6d00'
18
+ }
19
+ /**
20
+ * Character
21
+ * @property {Object} logChar
22
+ */
23
+ logChars = {
24
+ error: 'E',
25
+ info : 'I',
26
+ log : 'L',
27
+ warn : 'W'
28
+ }
29
+ /**
30
+ * LogLevels
31
+ * @property {String[]} logLevels
32
+ */
33
+ logLevels = ['info', 'log', 'warn', 'error']
34
+
35
+ /**
36
+ * Timeout
37
+ * @property {Number} timeToStart in ms
38
+ */
39
+ timeToStartComponentLogger = 1500
40
+
9
41
  static config = {
10
42
  /**
11
43
  * @member {String} className='Neo.util.Logger'
@@ -13,15 +45,33 @@ class Logger extends Base {
13
45
  */
14
46
  className: 'Neo.util.Logger',
15
47
  /**
16
- * Set this config to false to disable the logging
17
- * @member {boolean} enableLogs=true
48
+ * Set this config to false to disable the logging in production
49
+ * To change this on the fly use:
50
+ *
51
+ * Neo.util.Logger.enableLogsInProduction = true;
52
+ *
53
+ * @member {boolean} enableLogsInProduction=true
18
54
  */
19
- enableLogs: true,
55
+ enableLogsInProduction: false,
20
56
  /**
21
- * @member {String} level='log'
57
+ * Set this config to false to disable the component logging using Ctrl-Right Click
58
+ * To turn it on, add:
59
+ *
60
+ * Neo.util.Logger.enableComponentLogger = true;
61
+ *
62
+ * @member {boolean} enableComponentLogger_=true
63
+ */
64
+ enableComponentLogger_: true,
65
+ /**
66
+ * Set the minimum level, which you want to output.
67
+ * Change this at any time using a value of logLevels: ['info', 'log', 'warn', 'error']
68
+ *
69
+ * Neo.util.Logger.level = 'error'
70
+ *
71
+ * @member {String} level='info'
22
72
  * @protected
23
73
  */
24
- level: 'log',
74
+ level_: 'info',
25
75
  /**
26
76
  * @member {boolean} enableLogs=true
27
77
  * @protected
@@ -35,14 +85,75 @@ class Logger extends Base {
35
85
  construct(config) {
36
86
  super.construct(config);
37
87
 
88
+ const me = this;
89
+
38
90
  // aliases
39
- Neo.applyFromNs(Neo, this, {
91
+ Neo.applyFromNs(Neo, me, {
40
92
  error : 'error',
41
93
  info : 'info',
42
94
  log : 'log',
43
95
  logError: 'logError',
44
96
  warn : 'warn'
45
97
  }, true);
98
+
99
+ setTimeout(() => {
100
+ if (!me.enableLogsInProduction && Neo.config.environment === 'dist/production') {
101
+ me.write = Neo.emptyFn;
102
+ }
103
+ }, 50);
104
+ }
105
+
106
+ /**
107
+ * Ctrl-Right Click will show the current component
108
+ * @param {Boolean} value
109
+ * @param {Boolean} oldValue
110
+ */
111
+ afterSetEnableComponentLogger(value, oldValue) {
112
+ setTimeout(() => {
113
+ if (value) {
114
+ if (Neo.workerId !== 'app' || Neo.config.environment === 'dist/production') return;
115
+
116
+ const viewport = Neo.getComponent('neo-viewport-1') || Neo.getComponent('neo-configuration-viewport-1');
117
+ if (!viewport) {
118
+ console.warn('[LOGGER] could not find viewport.');
119
+ return;
120
+ }
121
+
122
+ viewport.addDomListeners({
123
+ contextmenu: (data) => {
124
+ if (data.ctrlKey) {
125
+ let isGroupSet = false;
126
+
127
+ data.path.forEach((item) => {
128
+ const component = Neo.getComponent(item.id);
129
+
130
+ if (component) {
131
+ if (!isGroupSet) {
132
+ isGroupSet = true;
133
+ console.group(item.id);
134
+ }
135
+ console.log(component);
136
+ }
137
+ });
138
+
139
+ if (isGroupSet) {
140
+ console.groupEnd();
141
+ }
142
+ }
143
+ }
144
+ });
145
+ }
146
+ }, this.timeToStartComponentLogger);
147
+ }
148
+
149
+ /**
150
+ * Set level to number based on position in logLevels
151
+ * @param {String} value
152
+ * @param {String|Number} oldValue
153
+ * @returns {number}
154
+ */
155
+ beforeSetLevel(value, oldValue) {
156
+ return this.logLevels.indexOf(value);
46
157
  }
47
158
 
48
159
  /**
@@ -56,42 +167,118 @@ class Logger extends Base {
56
167
  * @param args
57
168
  */
58
169
  info(...args) {
59
- this.level = 'info';
60
- this.write(...args);
170
+ args = this.resolveArgs(...args);
171
+ this.write(args, 'info');
61
172
  }
62
173
 
63
174
  /**
64
175
  * @param args
65
176
  */
66
177
  log(...args) {
67
- this.level = 'log';
68
- this.write(...args);
178
+ args = this.resolveArgs(...args);
179
+ this.write(args, 'log');
69
180
  }
70
181
 
71
182
  /**
72
183
  * @param args
73
184
  */
74
185
  logError(...args) {
75
- this.level = 'error';
76
- this.write(...args);
186
+ args = this.resolveArgs(...args);
187
+ this.write(args, 'error');
77
188
  }
78
189
 
79
190
  /**
80
191
  * @param args
81
192
  */
82
193
  warn(...args) {
83
- this.level = 'warn';
84
- this.write(...args);
194
+ args = this.resolveArgs(...args);
195
+ this.write(args, 'warn');
85
196
  }
86
197
 
87
198
  /**
199
+ * Output method
88
200
  * @param args
201
+ * @param {String} level
89
202
  * @protected
90
203
  */
91
- write(...args) {
92
- if (this.enableLogs === true) {
93
- console[this.level](...args);
204
+ write(args, level) {
205
+ const me = this;
206
+ if (me.beforeSetLevel(level) < me.level) return;
207
+
208
+ const logColor = me.logColors[level],
209
+ logChar = me.logChars[level],
210
+ bg = `background-color:${logColor}; color: white; font-weight: 900;`,
211
+ color = `color:${logColor};`,
212
+ msg = `[${me.getCaller()}] ${args.msg}`;
213
+
214
+ if (args.data) {
215
+ console.groupCollapsed(`%c ${logChar} %c ${msg}`, bg, color)
216
+ console.log(args.data);
217
+ console.groupEnd();
218
+ } else {
219
+ console.log(`%c ${logChar} %c ${msg}`, bg, color)
220
+ }
221
+ }
222
+
223
+ /**
224
+ * HELPER TO CATCH CALLER
225
+ * no known native way in modern JS to know what file that triggered the current method
226
+ * therefore we use Error, we can get the caller file from the stack trace string.
227
+ */
228
+ getCaller() {
229
+ let caller_path = undefined;
230
+
231
+ try {
232
+ throw Error();
233
+
234
+ } catch (err) {
235
+ const stack_lines = err.stack.split('\n');
236
+ let found_this = false;
237
+
238
+ for (let i in stack_lines) {
239
+ let line = stack_lines[i];
240
+
241
+ if (!found_this && /Logger\.mjs/.test(line)) {
242
+ found_this = true
243
+
244
+ } else if (found_this) {
245
+ if (!/Logger\.mjs/.test(line)) {
246
+ // remove the closing )
247
+ line = line.replace(')', '');
248
+ // get the part after the last /
249
+ caller_path = line.match(/([^\/]+)$/)[1].match(/([^ ]+)$/)[1];
250
+
251
+ break;
252
+ }
253
+ }
254
+
255
+ }
256
+
257
+ return caller_path
258
+ }
259
+ }
260
+
261
+ /**
262
+ * HELPER FOR ARGS
263
+ * @param {Array} args
264
+ * @return {Object}
265
+ */
266
+ resolveArgs(...args) {
267
+ const identifier = args[0];
268
+ let argsObject = {};
269
+
270
+ if (args.length === 1) {
271
+ if (Neo.isString(identifier)) {
272
+ argsObject.msg = args[0];
273
+ } else if (Neo.isObject(identifier)) {
274
+ argsObject = identifier;
275
+ }
276
+ } else if (args.length === 2) {
277
+ argsObject.msg = args[0];
278
+ argsObject.data = args[1];
94
279
  }
280
+
281
+ return argsObject
95
282
  }
96
283
  }
97
284