x4js 2.2.56 → 2.2.57
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/package.json +1 -1
- package/src/components/boxes/boxes.module.scss +5 -0
- package/src/components/boxes/boxes.ts +3 -0
- package/src/components/btngroup/btngroup.module.scss +79 -0
- package/src/components/button/button.module.scss +4 -0
- package/src/components/header/header.module.scss +1 -1
- package/src/components/header/header.ts +3 -2
- package/src/components/listbox/listbox.module.scss +60 -60
- package/src/components/listbox/listbox.ts +1 -0
- package/src/components/popup/popup.ts +6 -5
- package/src/components/propgrid/progrid.module.scss +8 -67
- package/src/components/propgrid/propgrid.ts +1 -0
- package/src/components/tooltips/tooltips.scss +2 -0
- package/src/core/component.ts +7 -5
package/package.json
CHANGED
|
@@ -62,6 +62,9 @@ export interface BoxProps extends ComponentProps {
|
|
|
62
62
|
@class_ns( "x4" )
|
|
63
63
|
export class Box<P extends BoxProps=BoxProps,E extends ComponentEvents=ComponentEvents> extends Component<P,E> {
|
|
64
64
|
protected refs: Record<string,Component> = {};
|
|
65
|
+
constructor( props: P ) {
|
|
66
|
+
super( { tag: "fieldset", ...props } );
|
|
67
|
+
}
|
|
65
68
|
}
|
|
66
69
|
|
|
67
70
|
|
|
@@ -38,4 +38,83 @@
|
|
|
38
38
|
fill: var( --border );
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.x4btngroup.packed {
|
|
44
|
+
gap: 0px;
|
|
45
|
+
|
|
46
|
+
.x4button {
|
|
47
|
+
background-color: var( --ol-button-background );
|
|
48
|
+
margin: 0;
|
|
49
|
+
color: var( --ol-button-color );
|
|
50
|
+
|
|
51
|
+
.x4icon {
|
|
52
|
+
height: 1.5em;
|
|
53
|
+
width: 1.5em;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
#icon {
|
|
57
|
+
height: 1.5em;
|
|
58
|
+
width: 1.5em;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&:not(:disabled) {
|
|
62
|
+
#icon {
|
|
63
|
+
.fa-secondary {
|
|
64
|
+
fill: var( --accent-background-hover );
|
|
65
|
+
opacity: 0.7;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.fa-primary {
|
|
69
|
+
fill: var( --accent-background );
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
&.icon-danger:not(:disabled) {
|
|
74
|
+
#icon {
|
|
75
|
+
.fa-primary {
|
|
76
|
+
fill: var( --alert-background );
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
&.icon-success {
|
|
82
|
+
#icon {
|
|
83
|
+
.fa-primary {
|
|
84
|
+
fill: var( --success-background );
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
&:hover{
|
|
90
|
+
background-color: var( --ol-button-background-hover );
|
|
91
|
+
color: var( --ol-button-color-hover );
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
&:active{
|
|
95
|
+
background-color: var( --ol-button-background-active );
|
|
96
|
+
color: var( --ol-button-color-active );
|
|
97
|
+
#icon {
|
|
98
|
+
color: var( --button-icon-color );
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
&:focus {
|
|
103
|
+
background-color: var( --ol-button-background-hover );
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
&:disabled {
|
|
108
|
+
color: var( --disabled-color-dark );
|
|
109
|
+
#icon {
|
|
110
|
+
.fa-primary {
|
|
111
|
+
fill: var( --disabled-color-dark ) !important;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.fa-secondary {
|
|
115
|
+
fill: var( --disabled-background ) !important;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
|
41
120
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { class_ns } from '../../core/core_tools';
|
|
1
|
+
import { class_ns, getScrollbarSize } from '../../core/core_tools';
|
|
2
2
|
import { Component, ComponentProps } from '../../core/component';
|
|
3
3
|
import { HBox } from '../boxes/boxes';
|
|
4
4
|
import { Label } from '../label/label';
|
|
@@ -106,8 +106,9 @@ export class Header extends HBox<HeaderProps> {
|
|
|
106
106
|
} );
|
|
107
107
|
|
|
108
108
|
const rc = this.getBoundingRect( );
|
|
109
|
+
const cs = this.getComputedStyle( );
|
|
109
110
|
|
|
110
|
-
let rest = (rc.width-filled-
|
|
111
|
+
let rest = (rc.width-filled-getScrollbarSize()) - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight);
|
|
111
112
|
const unit = Math.ceil( rest/count );
|
|
112
113
|
|
|
113
114
|
//console.log( "filled", filled );
|
|
@@ -44,6 +44,7 @@
|
|
|
44
44
|
|
|
45
45
|
&>.x4header {
|
|
46
46
|
border-bottom: 1px solid var( --border );
|
|
47
|
+
padding: 0 4px;
|
|
47
48
|
}
|
|
48
49
|
|
|
49
50
|
&>.title {
|
|
@@ -82,65 +83,64 @@
|
|
|
82
83
|
}
|
|
83
84
|
}
|
|
84
85
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
//}
|
|
86
|
+
.x4item {
|
|
87
|
+
@extend %flex;
|
|
88
|
+
|
|
89
|
+
padding: 4px;
|
|
90
|
+
background-color: transparent;
|
|
91
|
+
color: var( --text-primary );
|
|
92
|
+
|
|
93
|
+
// multicolumns
|
|
94
|
+
&:has( >.x4hbox ) {
|
|
95
|
+
padding: 4px 0;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
--label-color: var( --listbox-item-color );
|
|
99
|
+
|
|
100
|
+
.x4label,
|
|
101
|
+
.x4simpletext {
|
|
102
|
+
padding: 2px 6px;
|
|
103
|
+
|
|
104
|
+
#icon {
|
|
105
|
+
color: var( --listbox-icon-color );
|
|
106
|
+
fill: var( --listbox-icon-color );
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
&:hover {
|
|
111
|
+
background-color: var( --listbox-item-background-hover );
|
|
112
|
+
--label-color: var( --listbox-item-color-hover );
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
&.selected {
|
|
116
|
+
background-color: var( --listbox-item-background-sel );
|
|
117
|
+
color: var( --listbox-item-color-sel );
|
|
118
|
+
|
|
119
|
+
--label-color: var( --listbox-item-color-sel );
|
|
120
|
+
|
|
121
|
+
&> .x4label {
|
|
122
|
+
#icon {
|
|
123
|
+
color: var( --listbox-item-color-sel );
|
|
124
|
+
fill: var( --listbox-item-color-sel );
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.column {
|
|
130
|
+
background-color: transparent;
|
|
131
|
+
overflow: hidden;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.ref-c1 { width: var( --ref-c1-width); }
|
|
135
|
+
.ref-c2 { width: var( --ref-c2-width); }
|
|
136
|
+
.ref-c3 { width: var( --ref-c3-width); }
|
|
137
|
+
.ref-c4 { width: var( --ref-c4-width); }
|
|
138
|
+
.ref-c5 { width: var( --ref-c5-width); }
|
|
139
|
+
|
|
140
|
+
//&:active{
|
|
141
|
+
//background-color: var( --color-80 );
|
|
142
|
+
//color: var(--color-0);
|
|
143
|
+
//}
|
|
144
144
|
|
|
145
145
|
}
|
|
146
146
|
|
|
@@ -152,7 +152,7 @@
|
|
|
152
152
|
border-top: 1px solid var(--border);
|
|
153
153
|
margin: 0;
|
|
154
154
|
|
|
155
|
-
|
|
155
|
+
&.--x4btngroup {
|
|
156
156
|
gap: 0px;
|
|
157
157
|
|
|
158
158
|
.x4button {
|
|
@@ -172,12 +172,13 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
|
|
|
172
172
|
displayAt( x: number, y: number ) {
|
|
173
173
|
const zm = getGlobalZoom( );
|
|
174
174
|
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
left: (x/zm)+"px",
|
|
178
|
-
top: (y/zm)+"px",
|
|
179
|
-
})
|
|
175
|
+
x /= zm;
|
|
176
|
+
y /= zm;
|
|
180
177
|
|
|
178
|
+
this.setStyleValue( "left", x );
|
|
179
|
+
this.setStyleValue( "top", y );
|
|
180
|
+
|
|
181
|
+
//TODO: check is already visible
|
|
181
182
|
this._do_show( ); // to compute size
|
|
182
183
|
|
|
183
184
|
const rc = this.getBoundingRect( ).scale( 1/zm );
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
|
|
12
12
|
--propertygrid-odd-background: var(--color-primary-a5);
|
|
13
13
|
--propertygrid-even-background: transparent;
|
|
14
|
+
--propertygrid-disabled-background: rgb(170 170 170 / 14%);
|
|
14
15
|
}
|
|
15
16
|
|
|
16
17
|
.x4propertygrid {
|
|
@@ -31,71 +32,6 @@
|
|
|
31
32
|
&> #footer {
|
|
32
33
|
border-top: 1px solid var(--border);
|
|
33
34
|
margin: 0;
|
|
34
|
-
|
|
35
|
-
&.x4btngroup {
|
|
36
|
-
gap: 0px;
|
|
37
|
-
|
|
38
|
-
.x4button {
|
|
39
|
-
background-color: var( --ol-button-background );
|
|
40
|
-
margin: 0;
|
|
41
|
-
color: var( --ol-button-color );
|
|
42
|
-
|
|
43
|
-
&:disabled {
|
|
44
|
-
color: var( --ol-button-color-disabled );
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.x4icon {
|
|
48
|
-
height: 1.5em;
|
|
49
|
-
width: 1.5em;
|
|
50
|
-
|
|
51
|
-
.fa-primary, .fa-secondary {
|
|
52
|
-
fill: var( --accent-background );
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
&.icon-danger {
|
|
57
|
-
.x4icon {
|
|
58
|
-
.fa-secondary {
|
|
59
|
-
fill: var( --disabled-color-dark);
|
|
60
|
-
opacity: 0.7;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.fa-primary {
|
|
64
|
-
fill: var( --alert-background );
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
&.icon-success {
|
|
70
|
-
.x4icon {
|
|
71
|
-
.fa-primary {
|
|
72
|
-
fill: var( --success-background );
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
&:hover{
|
|
78
|
-
background-color: var( --ol-button-background-hover );
|
|
79
|
-
color: var( --ol-button-color-hover );
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
&:active{
|
|
83
|
-
background-color: var( --ol-button-background-active );
|
|
84
|
-
color: var( --ol-button-color-active );
|
|
85
|
-
#icon {
|
|
86
|
-
color: var( --button-icon-color );
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
&:focus {
|
|
91
|
-
background-color: var( --ol-button-background-hover );
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
&:disabled {
|
|
95
|
-
color: var( --disabled-color-dark );
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
35
|
}
|
|
100
36
|
|
|
101
37
|
.root {
|
|
@@ -158,13 +94,18 @@
|
|
|
158
94
|
//border-left: 1px solid var(--color-primary-a50);
|
|
159
95
|
//border-right: 1px solid var(--color-primary-a50);
|
|
160
96
|
|
|
161
|
-
&.even {
|
|
97
|
+
&.even:not(:disabled) {
|
|
162
98
|
background-color: var(--propertygrid-even-background)
|
|
163
99
|
}
|
|
164
|
-
|
|
100
|
+
|
|
101
|
+
&.odd:not(:disabled) {
|
|
165
102
|
background-color: var(--propertygrid-odd-background)
|
|
166
103
|
}
|
|
167
104
|
|
|
105
|
+
&.odd:disabled {
|
|
106
|
+
background-color: var(--propertygrid-disabled-background)
|
|
107
|
+
}
|
|
108
|
+
|
|
168
109
|
&:has(:focus) {
|
|
169
110
|
background-color: var(--color-primary-a20);
|
|
170
111
|
}
|
package/src/core/component.ts
CHANGED
|
@@ -899,18 +899,20 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
|
|
|
899
899
|
|
|
900
900
|
enable( ena = true ): this {
|
|
901
901
|
this.setAttribute( "disabled", !ena ? 'true' : null );
|
|
902
|
+
this.setAttribute( "inert", !ena ? 'true' : null );
|
|
902
903
|
|
|
904
|
+
/*
|
|
905
|
+
boxes are now fieldset, this is native
|
|
903
906
|
if( this.dom instanceof HTMLInputElement || this.dom instanceof HTMLButtonElement ) {
|
|
904
907
|
this.dom.disabled = !ena;
|
|
905
908
|
}
|
|
906
909
|
|
|
907
|
-
// propagate
|
|
908
|
-
const nodes = this.
|
|
910
|
+
// propagate enable state to all input children
|
|
911
|
+
const nodes = this.enumChildComponents( true );
|
|
909
912
|
nodes.forEach( x => {
|
|
910
|
-
|
|
911
|
-
x.disabled = !ena;
|
|
912
|
-
}
|
|
913
|
+
x.enable( ena );
|
|
913
914
|
});
|
|
915
|
+
*/
|
|
914
916
|
|
|
915
917
|
return this;
|
|
916
918
|
}
|