neo.mjs 5.10.13 → 5.11.1

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 (40) hide show
  1. package/apps/ServiceWorker.mjs +2 -2
  2. package/examples/ServiceWorker.mjs +2 -2
  3. package/examples/component/dateSelector/MainContainer.mjs +36 -22
  4. package/examples/component/timer/MainContainer.mjs +71 -0
  5. package/examples/component/timer/MainContainerController.mjs +95 -0
  6. package/examples/component/timer/app.mjs +7 -0
  7. package/examples/component/timer/index.html +12 -0
  8. package/examples/component/timer/neo-config.json +7 -0
  9. package/examples/component/video/MainContainer.mjs +46 -0
  10. package/examples/component/video/MainContainerController.mjs +37 -0
  11. package/examples/component/video/app.mjs +7 -0
  12. package/examples/component/video/index.html +12 -0
  13. package/examples/component/video/neo-config.json +7 -0
  14. package/examples/layout/form/MainContainer.mjs +131 -0
  15. package/examples/layout/form/app.mjs +6 -0
  16. package/examples/layout/form/index.html +11 -0
  17. package/examples/layout/form/neo-config.json +6 -0
  18. package/examples/list/base/MainModel.mjs +3 -0
  19. package/examples/list/base/MainStore.mjs +6 -0
  20. package/examples/table/container/MainContainer.mjs +6 -0
  21. package/package.json +4 -4
  22. package/resources/scss/src/component/Timer.scss +115 -0
  23. package/resources/scss/src/component/Video.scss +31 -0
  24. package/resources/scss/src/layout/Form.scss +27 -0
  25. package/resources/scss/theme-dark/component/Timer.scss +14 -0
  26. package/resources/scss/theme-dark/component/Video.scss +11 -0
  27. package/resources/scss/theme-light/component/Timer.scss +15 -0
  28. package/resources/scss/theme-light/component/Video.scss +11 -0
  29. package/src/DefaultConfig.mjs +2 -2
  30. package/src/component/DateSelector.mjs +44 -10
  31. package/src/component/Timer.mjs +328 -0
  32. package/src/component/Video.mjs +165 -0
  33. package/src/form/field/Date.mjs +42 -0
  34. package/src/layout/Flexbox.mjs +21 -0
  35. package/src/layout/Form.mjs +140 -0
  36. package/src/list/Base.mjs +11 -1
  37. package/src/selection/ListModel.mjs +3 -1
  38. package/src/table/Container.mjs +17 -0
  39. package/src/table/header/Button.mjs +36 -9
  40. package/src/table/header/Toolbar.mjs +26 -1
@@ -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 Form Layout</title>
7
+ </head>
8
+ <body>
9
+ <script src="../../../src/MicroLoader.mjs" type="module"></script>
10
+ </body>
11
+ </html>
@@ -0,0 +1,6 @@
1
+ {
2
+ "appPath" : "examples/layout/form/app.mjs",
3
+ "basePath" : "../../../",
4
+ "environment": "development",
5
+ "mainPath" : "./Main.mjs"
6
+ }
@@ -12,6 +12,9 @@ class MainModel extends Model {
12
12
  fields: [{
13
13
  name: 'country',
14
14
  type: 'String'
15
+ }, {
16
+ name: 'disabled',
17
+ type: 'Boolean'
15
18
  }, {
16
19
  name: 'firstname',
17
20
  type: 'String'
@@ -13,31 +13,37 @@ class MainStore extends Store {
13
13
 
14
14
  data: [{
15
15
  country : 'Germany',
16
+ disabled : false,
16
17
  firstname: 'Tobias',
17
18
  githubId : 'tobiu',
18
19
  lastname : 'Uhlig'
19
20
  }, {
20
21
  country : 'USA',
22
+ disabled : true,
21
23
  firstname: 'Rich',
22
24
  githubId : 'rwaters',
23
25
  lastname : 'Waters'
24
26
  }, {
25
27
  country : 'Germany',
28
+ disabled : false,
26
29
  firstname: 'Nils',
27
30
  githubId : 'mrsunshine',
28
31
  lastname : 'Dehl'
29
32
  }, {
30
33
  country : 'USA',
34
+ disabled : false,
31
35
  firstname: 'Gerard',
32
36
  githubId : 'camtnbikerrwc',
33
37
  lastname : 'Horan'
34
38
  }, {
35
39
  country : 'Slovakia',
40
+ disabled : false,
36
41
  firstname: 'Jozef',
37
42
  githubId : 'jsakalos',
38
43
  lastname : 'Sakalos'
39
44
  }, {
40
45
  country : 'Germany',
46
+ disabled : false,
41
47
  firstname: 'Bastian',
42
48
  githubId : 'bhaustein',
43
49
  lastname : 'Haustein'
@@ -2,6 +2,7 @@ import CellColumnModel from '../../../src/selection/table/CellColumnModel.
2
2
  import CellColumnRowModel from '../../../src/selection/table/CellColumnRowModel.mjs';
3
3
  import CellModel from '../../../src/selection/table/CellModel.mjs';
4
4
  import CellRowModel from '../../../src/selection/table/CellRowModel.mjs';
5
+ import Checkbox from '../../../src/form/field/CheckBox.mjs';
5
6
  import ConfigurationViewport from '../../ConfigurationViewport.mjs';
6
7
  import ColumnModel from '../../../src/selection/table/ColumnModel.mjs';
7
8
  import MainStore from './MainStore.mjs';
@@ -75,6 +76,11 @@ class MainContainer extends ConfigurationViewport {
75
76
  checked : me.exampleComponent.selectionModel.ntype === 'selection-table-cellcolumnrowmodel',
76
77
  listeners : {change: me.onRadioChange.bind(me, 'selectionModel', CellColumnRowModel)},
77
78
  valueLabelText: 'Cell & Column & Row'
79
+ }, {
80
+ module : Checkbox,
81
+ labelText: 'sortable',
82
+ listeners: {change: me.onConfigChange.bind(me, 'sortable')},
83
+ value : me.exampleComponent.sortable
78
84
  }];
79
85
  }
80
86
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "neo.mjs",
3
- "version": "5.10.13",
3
+ "version": "5.11.1",
4
4
  "description": "The webworkers driven UI framework",
5
5
  "type": "module",
6
6
  "repository": {
@@ -45,17 +45,17 @@
45
45
  "@material/mwc-button": "^0.27.0",
46
46
  "@material/mwc-textfield": "^0.27.0",
47
47
  "autoprefixer": "^10.4.14",
48
- "chalk": "^5.2.0",
48
+ "chalk": "^5.3.0",
49
49
  "clean-webpack-plugin": "^4.0.0",
50
50
  "commander": "^11.0.0",
51
51
  "cssnano": "^6.0.1",
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.7",
55
+ "inquirer": "^9.2.8",
56
56
  "neo-jsdoc": "^1.0.1",
57
57
  "neo-jsdoc-x": "^1.0.5",
58
- "postcss": "^8.4.24",
58
+ "postcss": "^8.4.26",
59
59
  "sass": "^1.63.6",
60
60
  "webpack": "^5.88.1",
61
61
  "webpack-cli": "^5.1.4",
@@ -0,0 +1,115 @@
1
+ //@property --neo-timer-current {
2
+ // syntax: '<number>';
3
+ // initial-value: 1000;
4
+ // inherits: true
5
+ //}
6
+
7
+ .neo-timer {
8
+ --neo-timer-current: '';
9
+ --neo-timer-full: '';
10
+
11
+ margin: 1rem auto;
12
+
13
+ .countdown {
14
+ display: grid;
15
+ width: v(timer-dimension);
16
+ height: v(timer-dimension);
17
+ container-type: size;
18
+ }
19
+
20
+ @keyframes t {
21
+ to {
22
+ --neo-timer-current: 0
23
+ }
24
+ }
25
+
26
+ svg {
27
+ grid-column: 1;
28
+ grid-row: 1
29
+ }
30
+
31
+ [r] {
32
+ fill: none;
33
+ stroke: silver;
34
+
35
+ + [r] {
36
+ --k: calc(var(--neo-timer-current) / var(--neo-timer-full));
37
+ transform: rotate(-90deg);
38
+ stroke-linecap: round;
39
+ stroke: color-mix(in hsl shorter hue, v(timer-color-start) calc(var(--k) * 300%), v(timer-color-end));
40
+ stroke-dasharray: var(--k) 1
41
+ }
42
+ }
43
+ }
44
+
45
+ .flip-card {
46
+ grid-column: 1;
47
+ grid-row: 1;
48
+
49
+ margin: 7cqh;
50
+ border-radius: 100%;
51
+ overflow: hidden;
52
+
53
+ background-color: transparent;
54
+ perspective: 1000px; /* Remove this if you don't want the 3D effect */
55
+
56
+ /* This container is needed to position the front and back side */
57
+ .flip-card-inner {
58
+ position: relative;
59
+ width: 100%;
60
+ height: 100%;
61
+ text-align: center;
62
+ transition: transform 0.8s;
63
+ transform-style: preserve-3d;
64
+
65
+ /* Position the front and back side */
66
+ .flip-card-front, .flip-card-back {
67
+ position: absolute;
68
+ width: 100%;
69
+ height: 100%;
70
+ -webkit-backface-visibility: hidden; /* Safari */
71
+ backface-visibility: hidden;
72
+ }
73
+
74
+ /* Style the front side (fallback if image is missing) */
75
+ .flip-card-front {
76
+ & > input {
77
+ background-color: v(container-background-color);
78
+ color: v(container-color);
79
+ margin-top: 25%;
80
+ height:41%;
81
+ width: 100%;
82
+ font: calc(v(timer-dimension) * 0.25)/2 ubuntu mono, consolas, monaco, monospace;
83
+ text-align: center;
84
+ border-width: 0 !important;
85
+
86
+ &:focus {
87
+ outline: none;
88
+ }
89
+ }
90
+
91
+ & > button {
92
+ border: 0 none;
93
+ background-color: v(timer-button-color);
94
+ height: 35%;
95
+ width: 100%;
96
+ font-size: 15cqh;
97
+ }
98
+ }
99
+
100
+ /* Style the back side */
101
+ .flip-card-back {
102
+ display: flex;
103
+ align-items: center;
104
+ justify-content: center;
105
+ font: calc(v(timer-dimension)*.25)/ 2 ubuntu mono, consolas, monaco, monospace;
106
+ // initial transformation
107
+ transform: rotateY(180deg);
108
+ }
109
+ }
110
+
111
+ /* Do an horizontal flip when you move the mouse over the flip box container */
112
+ &.turn .flip-card-inner {
113
+ transform: rotateY(180deg);
114
+ }
115
+ }
@@ -0,0 +1,31 @@
1
+ .neo-video {
2
+ position: relative;
3
+
4
+ & > * {
5
+ position: absolute;
6
+ inset: 0;
7
+ }
8
+
9
+ .neo-video-ghost {
10
+ display: flex;
11
+ align-items: center;
12
+ justify-content: center;
13
+
14
+ height: 100%;
15
+ width: 100%;
16
+ background-color: v(video-ghost-color);
17
+
18
+ .fa-solid {
19
+ height: v(video-ghost-size);
20
+ width: v(video-ghost-size);
21
+ font-size: v(video-ghost-size);
22
+ cursor: pointer;
23
+ }
24
+ }
25
+
26
+ .neo-video-media {
27
+ height: 100%;
28
+ width: 100%;
29
+ background: black;
30
+ }
31
+ }
@@ -0,0 +1,27 @@
1
+ .neo-layout-form {
2
+ display: grid;
3
+ grid-template-columns: max-content 1fr;
4
+ column-gap: 1rem;
5
+
6
+ & > .neo-layout-form-item {
7
+ grid-column: 1 / 3;
8
+
9
+ display: grid;
10
+ grid-template-columns: subgrid;
11
+
12
+ .neo-textfield-label {
13
+ grid-column: 1 / 2;
14
+ width: auto !important;
15
+ }
16
+
17
+ .neo-input-wrapper {
18
+ grid-column: 2 / 3;
19
+ }
20
+ }
21
+
22
+ // In case we have a fieldset inside the form
23
+ & > .neo-layout-form-subfieldset,
24
+ .legend {
25
+ grid-column: 1 / 3;
26
+ }
27
+ }
@@ -0,0 +1,14 @@
1
+ $neoMap: map-merge($neoMap, (
2
+ 'timer-color-start': #8a9b0f,
3
+ 'timer-color-end': #940a3d,
4
+ 'timer-dimension': '6rem'
5
+ ));
6
+
7
+ @if $useCssVars == true {
8
+ :root .neo-theme-dark { // .neo-timer
9
+ --timer-color-start : #{neo(timer-color-start)};
10
+ --timer-color-end : #{neo(timer-color-end)};
11
+ --timer-dimension : #{neo(timer-dimension)};
12
+ --timer-button-color : #{neo(container-color)};
13
+ }
14
+ }
@@ -0,0 +1,11 @@
1
+ $neoMap: map-merge($neoMap, (
2
+ 'video-ghost-color': rgb(50, 50, 50),
3
+ 'video-ghost-size' : 30px
4
+ ));
5
+
6
+ @if $useCssVars == true {
7
+ :root .neo-theme-dark { // .neo-video
8
+ --video-ghost-color: #{neo(video-ghost-color)};
9
+ --video-ghost-size: #{neo(video-ghost-size)};
10
+ }
11
+ }
@@ -0,0 +1,15 @@
1
+ $neoMap: map-merge($neoMap, (
2
+ 'timer-color-start': #8a9b0f,
3
+ 'timer-color-end': #940a3d,
4
+ 'timer-dimension': '6rem',
5
+ 'timer-button-color': #cde8e7
6
+ ));
7
+
8
+ @if $useCssVars == true {
9
+ :root .neo-theme-light { // .neo-timer
10
+ --timer-color-start : #{neo(timer-color-start)};
11
+ --timer-color-end : #{neo(timer-color-end)};
12
+ --timer-dimension : #{neo(timer-dimension)};
13
+ --timer-button-color : #{neo(timer-button-color)};
14
+ }
15
+ }
@@ -0,0 +1,11 @@
1
+ $neoMap: map-merge($neoMap, (
2
+ 'video-ghost-color': rgba(50, 50, 50, 0.3),
3
+ 'video-ghost-size' : 30px
4
+ ));
5
+
6
+ @if $useCssVars == true {
7
+ :root .neo-theme-light { // .neo-video
8
+ --video-ghost-color: #{neo(video-ghost-color)};
9
+ --video-ghost-size: #{neo(video-ghost-size)};
10
+ }
11
+ }
@@ -236,12 +236,12 @@ const DefaultConfig = {
236
236
  useVdomWorker: true,
237
237
  /**
238
238
  * buildScripts/injectPackageVersion.mjs will update this value
239
- * @default '5.10.13'
239
+ * @default '5.11.1'
240
240
  * @memberOf! module:Neo
241
241
  * @name config.version
242
242
  * @type String
243
243
  */
244
- version: '5.10.13'
244
+ version: '5.11.1'
245
245
  };
246
246
 
247
247
  Object.assign(DefaultConfig, {
@@ -75,6 +75,14 @@ class DateSelector extends Component {
75
75
  * @member {String} locale_=Neo.config.locale
76
76
  */
77
77
  locale_: Neo.config.locale,
78
+ /**
79
+ * @member {String|null} maxValue_=null
80
+ */
81
+ maxValue_: null,
82
+ /**
83
+ * @member {String|null} minValue_=null
84
+ */
85
+ minValue_: null,
78
86
  /**
79
87
  * Used for wheel events. min value = 1.
80
88
  * A higher value means lesser sensitivity for wheel events
@@ -241,6 +249,26 @@ class DateSelector extends Component {
241
249
  }
242
250
  }
243
251
 
252
+ /**
253
+ * Triggered after the maxValue config got changed
254
+ * @param {Text} value
255
+ * @param {Text} oldValue
256
+ * @protected
257
+ */
258
+ afterSetMaxValue(value, oldValue) {
259
+ oldValue !== undefined && this.recreateDayViewContent()
260
+ }
261
+
262
+ /**
263
+ * Triggered after the minValue config got changed
264
+ * @param {Text} value
265
+ * @param {Text} oldValue
266
+ * @protected
267
+ */
268
+ afterSetMinValue(value, oldValue) {
269
+ oldValue !== undefined && this.recreateDayViewContent()
270
+ }
271
+
244
272
  /**
245
273
  * Triggered after the showCellBorders config got changed
246
274
  * @param {Boolean} value
@@ -262,7 +290,7 @@ class DateSelector extends Component {
262
290
  * @protected
263
291
  */
264
292
  afterSetShowDisabledDays(value, oldValue) {
265
- oldValue !== undefined && this.recreateDayViewContent();
293
+ oldValue !== undefined && this.recreateDayViewContent()
266
294
  }
267
295
 
268
296
  /**
@@ -566,6 +594,8 @@ class DateSelector extends Component {
566
594
  currentMonth = currentDate.getMonth(),
567
595
  currentYear = currentDate.getFullYear(),
568
596
  date = me.currentDate, // cloned
597
+ maxDate = me.maxValue && new Date(`${me.maxValue}T00:00:00.000Z`),
598
+ minDate = me.minValue && new Date(`${me.minValue}T00:00:00.000Z`),
569
599
  valueDate = new Date(`${me.value}T00:00:00.000Z`),
570
600
  valueMonth = valueDate.getMonth(),
571
601
  valueYear = valueDate.getFullYear(),
@@ -612,23 +642,27 @@ class DateSelector extends Component {
612
642
  config.cls.push('neo-weekend');
613
643
  }
614
644
 
645
+ if (maxDate && date > maxDate || minDate && date < minDate) {
646
+ NeoArray.add(config.cls, 'neo-disabled')
647
+ }
648
+
615
649
  if (today.year === currentYear && today.month === currentMonth && today.day === day) {
616
- config.cn[0].cls.push('neo-today');
650
+ config.cn[0].cls.push('neo-today')
617
651
  }
618
652
 
619
653
  if (valueYear === currentYear && valueMonth === currentMonth && day === currentDay) {
620
654
  config.cls.push('neo-selected');
621
- me.selectionModel.items = [cellId]; // silent update
655
+ me.selectionModel.items = [cellId] // silent update
622
656
  }
623
657
 
624
658
  row.cn.push(config);
625
659
 
626
660
  date.setDate(date.getDate() + 1);
627
661
 
628
- day++;
662
+ day++
629
663
  }
630
664
 
631
- centerEl.cn.push(row);
665
+ centerEl.cn.push(row)
632
666
  }
633
667
 
634
668
  !silent && me.update()
@@ -638,7 +672,7 @@ class DateSelector extends Component {
638
672
  *
639
673
  */
640
674
  focusCurrentItem() {
641
- this.focus(this.selectionModel.items[0]);
675
+ this.focus(this.selectionModel.items[0])
642
676
  }
643
677
 
644
678
  /**
@@ -752,7 +786,7 @@ class DateSelector extends Component {
752
786
  */
753
787
  onConstructed() {
754
788
  super.onConstructed();
755
- this.selectionModel?.register(this);
789
+ this.selectionModel?.register(this)
756
790
  }
757
791
 
758
792
  /**
@@ -777,7 +811,7 @@ class DateSelector extends Component {
777
811
  monthIncrement !== 0 && me.updateHeaderMonth(monthIncrement, yearIncrement, true);
778
812
  yearIncrement !== 0 && me.updateHeaderYear(yearIncrement, true);
779
813
 
780
- me.triggerVdomUpdate(silent);
814
+ me.triggerVdomUpdate(silent)
781
815
  }
782
816
 
783
817
  /**
@@ -793,10 +827,10 @@ class DateSelector extends Component {
793
827
  me.createDayViewContent(true);
794
828
 
795
829
  if (syncIds) {
796
- me.syncVdomIds();
830
+ me.syncVdomIds()
797
831
  }
798
832
 
799
- me.triggerVdomUpdate(silent);
833
+ me.triggerVdomUpdate(silent)
800
834
  }
801
835
 
802
836
  /**