verstak 0.24.264 → 0.24.266
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.
|
@@ -10,12 +10,12 @@ export type El<T = any, M = any> = {
|
|
|
10
10
|
area: ElArea;
|
|
11
11
|
width: Range;
|
|
12
12
|
widthJustMin: string;
|
|
13
|
-
widthJustGrowth: number;
|
|
14
13
|
height: Range;
|
|
15
14
|
heightJustMin: string;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
alignment: Align;
|
|
16
|
+
extraAlignment: Align;
|
|
17
|
+
stretchFactorX: number | undefined;
|
|
18
|
+
stretchFactorY: number | undefined;
|
|
19
19
|
contentWrapping: boolean;
|
|
20
20
|
overlayVisible: boolean | undefined;
|
|
21
21
|
readonly style: CSSStyleDeclaration;
|
|
@@ -37,20 +37,21 @@ export type ElCoords = {
|
|
|
37
37
|
y2: number;
|
|
38
38
|
};
|
|
39
39
|
export declare enum Align {
|
|
40
|
-
default = 16,
|
|
41
|
-
stretch = 0,
|
|
42
40
|
left = 1,
|
|
43
41
|
centerX = 2,
|
|
44
42
|
right = 3,
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
43
|
+
stretchX = 4,
|
|
44
|
+
top = 8,
|
|
45
|
+
centerY = 16,
|
|
46
|
+
bottom = 24,
|
|
47
|
+
stretchY = 32,
|
|
48
|
+
center = 18,
|
|
49
|
+
stretch = 36,
|
|
50
|
+
default = 0
|
|
49
51
|
}
|
|
50
52
|
export type Range = {
|
|
51
53
|
readonly min?: string;
|
|
52
54
|
readonly max?: string;
|
|
53
|
-
readonly growth?: number;
|
|
54
55
|
};
|
|
55
56
|
export type MarkedRange = Range & {
|
|
56
57
|
readonly marker?: string;
|
|
@@ -71,8 +72,10 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
|
|
|
71
72
|
private _coords;
|
|
72
73
|
private _width;
|
|
73
74
|
private _height;
|
|
74
|
-
private
|
|
75
|
-
private
|
|
75
|
+
private _alignment;
|
|
76
|
+
private _extraAlignment;
|
|
77
|
+
private _stretchFactorX;
|
|
78
|
+
private _stretchFactorY;
|
|
76
79
|
private _contentWrapping;
|
|
77
80
|
private _overlayVisible;
|
|
78
81
|
private _hasStylingPresets;
|
|
@@ -89,18 +92,18 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
|
|
|
89
92
|
set width(value: Range);
|
|
90
93
|
get widthJustMin(): string;
|
|
91
94
|
set widthJustMin(value: string);
|
|
92
|
-
get widthJustGrowth(): number;
|
|
93
|
-
set widthJustGrowth(value: number);
|
|
94
95
|
get height(): Range;
|
|
95
96
|
set height(value: Range);
|
|
96
97
|
get heightJustMin(): string;
|
|
97
98
|
set heightJustMin(value: string);
|
|
98
|
-
get
|
|
99
|
-
set
|
|
100
|
-
get
|
|
101
|
-
set
|
|
102
|
-
get
|
|
103
|
-
set
|
|
99
|
+
get alignment(): Align;
|
|
100
|
+
set alignment(value: Align);
|
|
101
|
+
get extraAlignment(): Align;
|
|
102
|
+
set extraAlignment(value: Align);
|
|
103
|
+
get stretchFactorX(): number | undefined;
|
|
104
|
+
set stretchFactorX(value: number | undefined);
|
|
105
|
+
get stretchFactorY(): number | undefined;
|
|
106
|
+
set stretchFactorY(value: number | undefined);
|
|
104
107
|
get contentWrapping(): boolean;
|
|
105
108
|
set contentWrapping(value: boolean);
|
|
106
109
|
get overlayVisible(): boolean | undefined;
|
|
@@ -134,14 +137,14 @@ export declare class CursorCommandDriver extends ElDriver<Element, unknown> {
|
|
|
134
137
|
export declare class Apply {
|
|
135
138
|
static kind<T extends Element>(element: El<T, any>, value: ElKind): void;
|
|
136
139
|
static coords<T extends Element>(element: El<T, any>, value: ElCoords | undefined): void;
|
|
137
|
-
static widthGrowth<T extends Element>(element: El<T, any>, value: number): void;
|
|
138
140
|
static minWidth<T extends Element>(element: El<T, any>, value: string): void;
|
|
139
141
|
static maxWidth<T extends Element>(element: El<T, any>, value: string): void;
|
|
140
|
-
static heightGrowth<T extends Element>(element: El<T, any>, value: number): void;
|
|
141
142
|
static minHeight<T extends Element>(element: El<T, any>, value: string): void;
|
|
142
143
|
static maxHeight<T extends Element>(element: El<T, any>, value: string): void;
|
|
143
|
-
static
|
|
144
|
-
static
|
|
144
|
+
static alignment<T extends Element>(element: El<T, any>, value: Align): void;
|
|
145
|
+
static extraAlignment<T extends Element>(element: El<T, any>, value: Align): void;
|
|
146
|
+
static stretchFactorX<T extends Element>(element: El<T, any>, value: number): void;
|
|
147
|
+
static stretchFactorY<T extends Element>(element: El<T, any>, value: number): void;
|
|
145
148
|
static contentWrapping<T extends Element>(element: El<T, any>, value: boolean): void;
|
|
146
149
|
static overlayVisible<T extends Element>(element: El<T, any>, value: boolean | undefined): void;
|
|
147
150
|
static stylingPreset<T extends Element>(element: El<T, any>, secondary: boolean, styleName: string, enabled?: boolean): void;
|
|
@@ -17,15 +17,17 @@ export var ElKind;
|
|
|
17
17
|
})(ElKind || (ElKind = {}));
|
|
18
18
|
export var Align;
|
|
19
19
|
(function (Align) {
|
|
20
|
-
Align[Align["default"] = 16] = "default";
|
|
21
|
-
Align[Align["stretch"] = 0] = "stretch";
|
|
22
20
|
Align[Align["left"] = 1] = "left";
|
|
23
21
|
Align[Align["centerX"] = 2] = "centerX";
|
|
24
22
|
Align[Align["right"] = 3] = "right";
|
|
25
|
-
Align[Align["
|
|
26
|
-
Align[Align["
|
|
27
|
-
Align[Align["
|
|
28
|
-
Align[Align["
|
|
23
|
+
Align[Align["stretchX"] = 4] = "stretchX";
|
|
24
|
+
Align[Align["top"] = 8] = "top";
|
|
25
|
+
Align[Align["centerY"] = 16] = "centerY";
|
|
26
|
+
Align[Align["bottom"] = 24] = "bottom";
|
|
27
|
+
Align[Align["stretchY"] = 32] = "stretchY";
|
|
28
|
+
Align[Align["center"] = 18] = "center";
|
|
29
|
+
Align[Align["stretch"] = 36] = "stretch";
|
|
30
|
+
Align[Align["default"] = 0] = "default";
|
|
29
31
|
})(Align || (Align = {}));
|
|
30
32
|
export class ElImpl {
|
|
31
33
|
constructor(node) {
|
|
@@ -38,10 +40,12 @@ export class ElImpl {
|
|
|
38
40
|
this._kind = ElKind.part;
|
|
39
41
|
this._area = undefined;
|
|
40
42
|
this._coords = UndefinedElCoords;
|
|
41
|
-
this._width = { min: "", max: ""
|
|
42
|
-
this._height = { min: "", max: ""
|
|
43
|
-
this.
|
|
44
|
-
this.
|
|
43
|
+
this._width = { min: "", max: "" };
|
|
44
|
+
this._height = { min: "", max: "" };
|
|
45
|
+
this._alignment = Align.default;
|
|
46
|
+
this._extraAlignment = Align.default;
|
|
47
|
+
this._stretchFactorX = undefined;
|
|
48
|
+
this._stretchFactorY = undefined;
|
|
45
49
|
this._contentWrapping = true;
|
|
46
50
|
this._overlayVisible = undefined;
|
|
47
51
|
this._hasStylingPresets = false;
|
|
@@ -86,7 +90,7 @@ export class ElImpl {
|
|
|
86
90
|
}
|
|
87
91
|
get width() { return this._width; }
|
|
88
92
|
set width(value) {
|
|
89
|
-
var _a, _b
|
|
93
|
+
var _a, _b;
|
|
90
94
|
const w = this._width;
|
|
91
95
|
let updated = false;
|
|
92
96
|
if (value.min !== w.min) {
|
|
@@ -97,20 +101,14 @@ export class ElImpl {
|
|
|
97
101
|
Apply.maxWidth(this, (_b = value.max) !== null && _b !== void 0 ? _b : "");
|
|
98
102
|
updated = true;
|
|
99
103
|
}
|
|
100
|
-
if (value.growth !== w.growth) {
|
|
101
|
-
Apply.widthGrowth(this, (_c = value.growth) !== null && _c !== void 0 ? _c : 0);
|
|
102
|
-
updated = true;
|
|
103
|
-
}
|
|
104
104
|
if (updated)
|
|
105
105
|
this._width = value;
|
|
106
106
|
}
|
|
107
107
|
get widthJustMin() { var _a; return (_a = this._width.min) !== null && _a !== void 0 ? _a : ""; }
|
|
108
108
|
set widthJustMin(value) { this.width = { min: value }; }
|
|
109
|
-
get widthJustGrowth() { var _a; return (_a = this._width.growth) !== null && _a !== void 0 ? _a : 0; }
|
|
110
|
-
set widthJustGrowth(value) { this.width = { growth: value }; }
|
|
111
109
|
get height() { return this._height; }
|
|
112
110
|
set height(value) {
|
|
113
|
-
var _a, _b
|
|
111
|
+
var _a, _b;
|
|
114
112
|
const w = this._height;
|
|
115
113
|
let updated = false;
|
|
116
114
|
if (value.min !== w.min) {
|
|
@@ -121,29 +119,37 @@ export class ElImpl {
|
|
|
121
119
|
Apply.maxHeight(this, (_b = value.max) !== null && _b !== void 0 ? _b : "");
|
|
122
120
|
updated = true;
|
|
123
121
|
}
|
|
124
|
-
if (value.growth !== w.growth) {
|
|
125
|
-
Apply.heightGrowth(this, (_c = value.growth) !== null && _c !== void 0 ? _c : 0);
|
|
126
|
-
updated = true;
|
|
127
|
-
}
|
|
128
122
|
if (updated)
|
|
129
123
|
this._height = value;
|
|
130
124
|
}
|
|
131
125
|
get heightJustMin() { var _a; return (_a = this._height.min) !== null && _a !== void 0 ? _a : ""; }
|
|
132
126
|
set heightJustMin(value) { this.height = { min: value }; }
|
|
133
|
-
get
|
|
134
|
-
set
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
127
|
+
get alignment() { return this._alignment; }
|
|
128
|
+
set alignment(value) {
|
|
129
|
+
if (value !== this._alignment) {
|
|
130
|
+
Apply.alignment(this, value);
|
|
131
|
+
this._alignment = value;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
get extraAlignment() { return this._extraAlignment; }
|
|
135
|
+
set extraAlignment(value) {
|
|
136
|
+
if (value !== this._extraAlignment) {
|
|
137
|
+
Apply.extraAlignment(this, value);
|
|
138
|
+
this._extraAlignment = value;
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
get stretchFactorX() { return this._stretchFactorX; }
|
|
142
|
+
set stretchFactorX(value) {
|
|
143
|
+
if (value !== this._stretchFactorX) {
|
|
144
|
+
Apply.stretchFactorX(this, value !== null && value !== void 0 ? value : 0);
|
|
145
|
+
this._stretchFactorX = value;
|
|
140
146
|
}
|
|
141
147
|
}
|
|
142
|
-
get
|
|
143
|
-
set
|
|
144
|
-
if (value !== this.
|
|
145
|
-
Apply.
|
|
146
|
-
this.
|
|
148
|
+
get stretchFactorY() { return this._stretchFactorY; }
|
|
149
|
+
set stretchFactorY(value) {
|
|
150
|
+
if (value !== this._stretchFactorY) {
|
|
151
|
+
Apply.stretchFactorY(this, value !== null && value !== void 0 ? value : 0);
|
|
152
|
+
this._stretchFactorY = value;
|
|
147
153
|
}
|
|
148
154
|
}
|
|
149
155
|
get contentWrapping() { return this._contentWrapping; }
|
|
@@ -321,19 +327,6 @@ export class Apply {
|
|
|
321
327
|
s.gridArea = "";
|
|
322
328
|
}
|
|
323
329
|
}
|
|
324
|
-
static widthGrowth(element, value) {
|
|
325
|
-
if (element.native instanceof HTMLElement) {
|
|
326
|
-
const s = element.native.style;
|
|
327
|
-
if (value > 0) {
|
|
328
|
-
s.flexGrow = `${value}`;
|
|
329
|
-
s.flexBasis = "0";
|
|
330
|
-
}
|
|
331
|
-
else {
|
|
332
|
-
s.flexGrow = "";
|
|
333
|
-
s.flexBasis = "";
|
|
334
|
-
}
|
|
335
|
-
}
|
|
336
|
-
}
|
|
337
330
|
static minWidth(element, value) {
|
|
338
331
|
if (element.native instanceof HTMLElement)
|
|
339
332
|
element.native.style.minWidth = `${value}`;
|
|
@@ -342,27 +335,6 @@ export class Apply {
|
|
|
342
335
|
if (element.native instanceof HTMLElement)
|
|
343
336
|
element.native.style.maxWidth = `${value}`;
|
|
344
337
|
}
|
|
345
|
-
static heightGrowth(element, value) {
|
|
346
|
-
const bNode = element.node;
|
|
347
|
-
const driver = bNode.driver;
|
|
348
|
-
if (driver.isPartition) {
|
|
349
|
-
if (element.native instanceof HTMLElement) {
|
|
350
|
-
const s = element.native.style;
|
|
351
|
-
if (value > 0)
|
|
352
|
-
s.flexGrow = `${value}`;
|
|
353
|
-
else
|
|
354
|
-
s.flexGrow = "";
|
|
355
|
-
}
|
|
356
|
-
}
|
|
357
|
-
else {
|
|
358
|
-
const hostDriver = bNode.host.driver;
|
|
359
|
-
if (hostDriver.isPartition) {
|
|
360
|
-
const host = bNode.host.seat.instance;
|
|
361
|
-
Apply.boundsAlignment(element, Align.stretch);
|
|
362
|
-
Apply.heightGrowth(host.element, value);
|
|
363
|
-
}
|
|
364
|
-
}
|
|
365
|
-
}
|
|
366
338
|
static minHeight(element, value) {
|
|
367
339
|
if (element.native instanceof HTMLElement)
|
|
368
340
|
element.native.style.minHeight = `${value}`;
|
|
@@ -371,11 +343,24 @@ export class Apply {
|
|
|
371
343
|
if (element.native instanceof HTMLElement)
|
|
372
344
|
element.native.style.maxHeight = `${value}`;
|
|
373
345
|
}
|
|
374
|
-
static
|
|
346
|
+
static alignment(element, value) {
|
|
375
347
|
if (element.native instanceof HTMLElement) {
|
|
376
348
|
const s = element.native.style;
|
|
377
|
-
if (
|
|
378
|
-
const v = AlignToCss[(value >>
|
|
349
|
+
if (value !== Align.default) {
|
|
350
|
+
const v = AlignToCss[(value >> 3) & 0b11];
|
|
351
|
+
const h = AlignToCss[value & 0b11];
|
|
352
|
+
s.alignSelf = v;
|
|
353
|
+
s.justifySelf = h;
|
|
354
|
+
}
|
|
355
|
+
else
|
|
356
|
+
s.alignSelf = s.justifySelf = "";
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
static extraAlignment(element, value) {
|
|
360
|
+
if (element.native instanceof HTMLElement) {
|
|
361
|
+
const s = element.native.style;
|
|
362
|
+
if (value !== Align.default) {
|
|
363
|
+
const v = AlignToCss[(value >> 3) & 0b11];
|
|
379
364
|
const h = AlignToCss[value & 0b11];
|
|
380
365
|
const t = TextAlignCss[value & 0b11];
|
|
381
366
|
s.justifyContent = v;
|
|
@@ -386,17 +371,38 @@ export class Apply {
|
|
|
386
371
|
s.justifyContent = s.alignContent = s.textAlign = "";
|
|
387
372
|
}
|
|
388
373
|
}
|
|
389
|
-
static
|
|
374
|
+
static stretchFactorX(element, value) {
|
|
390
375
|
if (element.native instanceof HTMLElement) {
|
|
391
376
|
const s = element.native.style;
|
|
392
|
-
if (
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
377
|
+
if (value > 0) {
|
|
378
|
+
s.flexGrow = `${value}`;
|
|
379
|
+
s.flexBasis = "0";
|
|
380
|
+
}
|
|
381
|
+
else {
|
|
382
|
+
s.flexGrow = "";
|
|
383
|
+
s.flexBasis = "";
|
|
384
|
+
}
|
|
385
|
+
}
|
|
386
|
+
}
|
|
387
|
+
static stretchFactorY(element, value) {
|
|
388
|
+
const bNode = element.node;
|
|
389
|
+
const driver = bNode.driver;
|
|
390
|
+
if (driver.isPartition) {
|
|
391
|
+
if (element.native instanceof HTMLElement) {
|
|
392
|
+
const s = element.native.style;
|
|
393
|
+
if (value > 0)
|
|
394
|
+
s.flexGrow = `${value}`;
|
|
395
|
+
else
|
|
396
|
+
s.flexGrow = "";
|
|
397
|
+
}
|
|
398
|
+
}
|
|
399
|
+
else {
|
|
400
|
+
const hostDriver = bNode.host.driver;
|
|
401
|
+
if (hostDriver.isPartition) {
|
|
402
|
+
const host = bNode.host.seat.instance;
|
|
403
|
+
Apply.alignment(element, Align.stretch);
|
|
404
|
+
Apply.stretchFactorY(host.element, value);
|
|
397
405
|
}
|
|
398
|
-
else
|
|
399
|
-
s.alignSelf = s.justifySelf = "";
|
|
400
406
|
}
|
|
401
407
|
}
|
|
402
408
|
static contentWrapping(element, value) {
|
|
@@ -4,7 +4,7 @@ import { HtmlElementDriver } from "./HtmlDriver.js";
|
|
|
4
4
|
export declare function Section<M = unknown>(declaration?: RxNodeDecl<El<HTMLElement, M>>, preset?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
|
|
5
5
|
export declare function Table<M = unknown, R = void>(declaration?: RxNodeDecl<El<HTMLElement, M>>, preset?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
|
|
6
6
|
export declare function row<T = void>(builder?: (element: void) => T, shiftCursorDown?: number): void;
|
|
7
|
-
export declare function
|
|
7
|
+
export declare function rowBreak(shiftCursorDown?: number): void;
|
|
8
8
|
export declare function cursor(areaParams: ElArea): void;
|
|
9
9
|
export declare function Note(content: string, formatted?: boolean, declaration?: RxNodeDecl<El<HTMLElement, void>>): RxNode<El<HTMLElement, void>>;
|
|
10
10
|
export declare function Group<M = unknown, R = void>(declaration?: RxNodeDecl<El<HTMLElement, M>>, preset?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
|
|
@@ -8,10 +8,10 @@ export function Table(declaration, preset) {
|
|
|
8
8
|
return RxNode.declare(Drivers.table, declaration, preset);
|
|
9
9
|
}
|
|
10
10
|
export function row(builder, shiftCursorDown) {
|
|
11
|
-
|
|
11
|
+
rowBreak(shiftCursorDown);
|
|
12
12
|
builder === null || builder === void 0 ? void 0 : builder();
|
|
13
13
|
}
|
|
14
|
-
export function
|
|
14
|
+
export function rowBreak(shiftCursorDown) {
|
|
15
15
|
RxNode.declare(Drivers.partition);
|
|
16
16
|
}
|
|
17
17
|
export function cursor(areaParams) {
|
|
@@ -44,7 +44,7 @@ export class VerstakElementDriver extends HtmlElementDriver {
|
|
|
44
44
|
update(node) {
|
|
45
45
|
const element = node.element;
|
|
46
46
|
if (element.kind === ElKind.section)
|
|
47
|
-
|
|
47
|
+
rowBreak();
|
|
48
48
|
return super.update(node);
|
|
49
49
|
}
|
|
50
50
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "verstak",
|
|
3
|
-
"version": "0.24.
|
|
3
|
+
"version": "0.24.266",
|
|
4
4
|
"description": "Verstak - Front-End Library",
|
|
5
5
|
"publisher": "Nezaboodka Software",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
},
|
|
32
32
|
"homepage": "https://github.com/nezaboodka/verstak/blob/master/README.md#readme",
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"reactronic": "^0.24.
|
|
34
|
+
"reactronic": "^0.24.265"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@types/node": "20.11.17",
|