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.
- package/apps/ServiceWorker.mjs +2 -2
- package/examples/ServiceWorker.mjs +2 -2
- package/examples/component/dateSelector/MainContainer.mjs +36 -22
- package/examples/component/timer/MainContainer.mjs +71 -0
- package/examples/component/timer/MainContainerController.mjs +95 -0
- package/examples/component/timer/app.mjs +7 -0
- package/examples/component/timer/index.html +12 -0
- package/examples/component/timer/neo-config.json +7 -0
- package/examples/component/video/MainContainer.mjs +46 -0
- package/examples/component/video/MainContainerController.mjs +37 -0
- package/examples/component/video/app.mjs +7 -0
- package/examples/component/video/index.html +12 -0
- package/examples/component/video/neo-config.json +7 -0
- package/examples/layout/form/MainContainer.mjs +131 -0
- package/examples/layout/form/app.mjs +6 -0
- package/examples/layout/form/index.html +11 -0
- package/examples/layout/form/neo-config.json +6 -0
- package/examples/list/base/MainModel.mjs +3 -0
- package/examples/list/base/MainStore.mjs +6 -0
- package/examples/table/container/MainContainer.mjs +6 -0
- package/package.json +4 -4
- package/resources/scss/src/component/Timer.scss +115 -0
- package/resources/scss/src/component/Video.scss +31 -0
- package/resources/scss/src/layout/Form.scss +27 -0
- package/resources/scss/theme-dark/component/Timer.scss +14 -0
- package/resources/scss/theme-dark/component/Video.scss +11 -0
- package/resources/scss/theme-light/component/Timer.scss +15 -0
- package/resources/scss/theme-light/component/Video.scss +11 -0
- package/src/DefaultConfig.mjs +2 -2
- package/src/component/DateSelector.mjs +44 -10
- package/src/component/Timer.mjs +328 -0
- package/src/component/Video.mjs +165 -0
- package/src/form/field/Date.mjs +42 -0
- package/src/layout/Flexbox.mjs +21 -0
- package/src/layout/Form.mjs +140 -0
- package/src/list/Base.mjs +11 -1
- package/src/selection/ListModel.mjs +3 -1
- package/src/table/Container.mjs +17 -0
- package/src/table/header/Button.mjs +36 -9
- 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>
|
@@ -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.
|
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.
|
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.
|
55
|
+
"inquirer": "^9.2.8",
|
56
56
|
"neo-jsdoc": "^1.0.1",
|
57
57
|
"neo-jsdoc-x": "^1.0.5",
|
58
|
-
"postcss": "^8.4.
|
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
|
+
}
|
package/src/DefaultConfig.mjs
CHANGED
@@ -236,12 +236,12 @@ const DefaultConfig = {
|
|
236
236
|
useVdomWorker: true,
|
237
237
|
/**
|
238
238
|
* buildScripts/injectPackageVersion.mjs will update this value
|
239
|
-
* @default '5.
|
239
|
+
* @default '5.11.1'
|
240
240
|
* @memberOf! module:Neo
|
241
241
|
* @name config.version
|
242
242
|
* @type String
|
243
243
|
*/
|
244
|
-
version: '5.
|
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]
|
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
|
/**
|