verstak 0.23.108 → 0.23.110

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 (14) hide show
  1. package/README.md +38 -17
  2. package/build/dist/source/core/Interfaces.d.ts +61 -60
  3. package/build/dist/source/core/Interfaces.js +2 -1
  4. package/build/dist/source/core/Verstak.d.ts +26 -25
  5. package/build/dist/source/core/Verstak.js +217 -217
  6. package/build/dist/source/html/Blocks.d.ts +21 -21
  7. package/build/dist/source/html/Blocks.js +65 -68
  8. package/build/dist/source/html/HtmlBlocks.d.ts +175 -175
  9. package/build/dist/source/html/HtmlBlocks.js +173 -173
  10. package/build/dist/source/html/HtmlDriver.d.ts +11 -11
  11. package/build/dist/source/html/HtmlDriver.js +17 -16
  12. package/build/dist/source/html/ReactingFocuser.js +1 -1
  13. package/build/dist/source/html/sensors/ResizeSensor.d.ts +2 -2
  14. package/package.json +1 -1
package/build/dist/source/html/Blocks.d.ts CHANGED
@@ -1,27 +1,27 @@
1
- import { VBlock, BlockKind, BlockBuilder, Align, BlockCoords, BlockArea } from "../core/api";
1
+ import { Block, BlockKind, BlockBuilder, Align, BlockCoords, BlockArea } from "../core/api";
2
2
  import { HtmlDriver } from "./HtmlDriver";
3
- export declare function Band<M = unknown, R = void>(builder?: BlockBuilder<HTMLElement, M, R>, base?: BlockBuilder<HTMLElement, M, R>): VBlock<HTMLElement, M, R>;
4
- export declare function Table<M = unknown, R = void>(builder?: BlockBuilder<HTMLElement, M, R>, base?: BlockBuilder<HTMLElement, M, R>): VBlock<HTMLElement, M, R>;
3
+ export declare function Band<M = unknown, R = void>(builder?: BlockBuilder<HTMLElement, M, R>, base?: BlockBuilder<HTMLElement, M, R>): Block<HTMLElement, M, R>;
4
+ export declare function Table<M = unknown, R = void>(builder?: BlockBuilder<HTMLElement, M, R>, base?: BlockBuilder<HTMLElement, M, R>): Block<HTMLElement, M, R>;
5
5
  export declare function row<T = void>(builder?: (block: void) => T, shiftCursorDown?: number): void;
6
6
  export declare function fromNewRow(shiftCursorDown?: number): void;
7
7
  export declare function cursor(areaParams: BlockArea): void;
8
- export declare function Note(content: string, builder?: BlockBuilder<HTMLElement, void, void>): VBlock<HTMLElement, void, void>;
9
- export declare function HtmlNote(content: string, builder?: BlockBuilder<HTMLElement, void, void>): VBlock<HTMLElement, void, void>;
10
- export declare function Group<M = unknown, R = void>(builder?: BlockBuilder<HTMLElement, M, R>, base?: BlockBuilder<HTMLElement, M, R>): VBlock<HTMLElement, M, R>;
11
- export declare function Fragment<M = unknown, R = void>(builder?: BlockBuilder<void, M, R>, base?: BlockBuilder<void, M, R>): VBlock<void, M, R>;
8
+ export declare function Note(content: string, builder?: BlockBuilder<HTMLElement, void, void>): Block<HTMLElement, void, void>;
9
+ export declare function HtmlNote(content: string, builder?: BlockBuilder<HTMLElement, void, void>): Block<HTMLElement, void, void>;
10
+ export declare function Group<M = unknown, R = void>(builder?: BlockBuilder<HTMLElement, M, R>, base?: BlockBuilder<HTMLElement, M, R>): Block<HTMLElement, M, R>;
11
+ export declare function Fragment<M = unknown, R = void>(builder?: BlockBuilder<void, M, R>, base?: BlockBuilder<void, M, R>): Block<void, M, R>;
12
12
  export declare class VerstakHtmlDriver<T extends HTMLElement> extends HtmlDriver<T> {
13
- applyKind(block: VBlock<T, any, any>, value: BlockKind): void;
14
- applyCoords(block: VBlock<T>, value: BlockCoords | undefined): void;
15
- applyWidthGrowth(block: VBlock<T>, value: number): void;
16
- applyMinWidth(block: VBlock<T>, value: string): void;
17
- applyMaxWidth(block: VBlock<T>, value: string): void;
18
- applyHeightGrowth(block: VBlock<T>, value: number): void;
19
- applyMinHeight(block: VBlock<T>, value: string): void;
20
- applyMaxHeight(block: VBlock<T>, value: string): void;
21
- applyContentAlignment(block: VBlock<T>, value: Align): void;
22
- applyBlockAlignment(block: VBlock<T>, value: Align): void;
23
- applyContentWrapping(block: VBlock<T>, value: boolean): void;
24
- applyOverlayVisible(block: VBlock<T>, value: boolean | undefined): void;
25
- applyStyle(block: VBlock<T, any, any>, secondary: boolean, styleName: string, enabled?: boolean): void;
26
- render(block: VBlock<T>): void | Promise<void>;
13
+ applyKind(block: Block<T, any, any>, value: BlockKind): void;
14
+ applyCoords(block: Block<T>, value: BlockCoords | undefined): void;
15
+ applyWidthGrowth(block: Block<T>, value: number): void;
16
+ applyMinWidth(block: Block<T>, value: string): void;
17
+ applyMaxWidth(block: Block<T>, value: string): void;
18
+ applyHeightGrowth(block: Block<T>, value: number): void;
19
+ applyMinHeight(block: Block<T>, value: string): void;
20
+ applyMaxHeight(block: Block<T>, value: string): void;
21
+ applyContentAlignment(block: Block<T>, value: Align): void;
22
+ applyBlockAlignment(block: Block<T>, value: Align): void;
23
+ applyContentWrapping(block: Block<T>, value: boolean): void;
24
+ applyOverlayVisible(block: Block<T>, value: boolean | undefined): void;
25
+ applyStyle(block: Block<T, any, any>, secondary: boolean, styleName: string, enabled?: boolean): void;
26
+ render(block: Block<T>): void | Promise<void>;
27
27
  }
package/build/dist/source/html/Blocks.js CHANGED
@@ -48,27 +48,27 @@ export class VerstakHtmlDriver extends HtmlDriver {
48
48
  super.applyKind(block, value);
49
49
  }
50
50
  applyCoords(block, value) {
51
- const css = block.native.style;
51
+ const s = block.native.style;
52
52
  if (value) {
53
53
  const x1 = value.x1 || 1;
54
54
  const y1 = value.y1 || 1;
55
55
  const x2 = value.x2 || x1;
56
56
  const y2 = value.y2 || y1;
57
- css.gridArea = `${y1} / ${x1} / span ${y2 - y1 + 1} / span ${x2 - x1 + 1}`;
57
+ s.gridArea = `${y1} / ${x1} / span ${y2 - y1 + 1} / span ${x2 - x1 + 1}`;
58
58
  }
59
59
  else
60
- css.gridArea = "";
60
+ s.gridArea = "";
61
61
  super.applyCoords(block, value);
62
62
  }
63
63
  applyWidthGrowth(block, value) {
64
- const css = block.native.style;
64
+ const s = block.native.style;
65
65
  if (value > 0) {
66
- css.flexGrow = `${value}`;
67
- css.flexBasis = "0";
66
+ s.flexGrow = `${value}`;
67
+ s.flexBasis = "0";
68
68
  }
69
69
  else {
70
- css.flexGrow = "";
71
- css.flexBasis = "";
70
+ s.flexGrow = "";
71
+ s.flexBasis = "";
72
72
  }
73
73
  }
74
74
  applyMinWidth(block, value) {
@@ -78,17 +78,17 @@ export class VerstakHtmlDriver extends HtmlDriver {
78
78
  block.native.style.maxWidth = `${value}`;
79
79
  }
80
80
  applyHeightGrowth(block, value) {
81
- const bNode = block.descriptor;
81
+ const bNode = block.node;
82
82
  const driver = bNode.driver;
83
83
  if (driver.isRow) {
84
- const css = block.native.style;
84
+ const s = block.native.style;
85
85
  if (value > 0)
86
- css.flexGrow = `${value}`;
86
+ s.flexGrow = `${value}`;
87
87
  else
88
- css.flexGrow = "";
88
+ s.flexGrow = "";
89
89
  }
90
90
  else {
91
- const hostDriver = bNode.host.descriptor.driver;
91
+ const hostDriver = bNode.host.node.driver;
92
92
  if (hostDriver.isRow) {
93
93
  driver.applyBlockAlignment(block, Align.Stretch);
94
94
  hostDriver.applyHeightGrowth(bNode.host, value);
@@ -102,71 +102,71 @@ export class VerstakHtmlDriver extends HtmlDriver {
102
102
  block.native.style.maxHeight = `${value}`;
103
103
  }
104
104
  applyContentAlignment(block, value) {
105
- const css = block.native.style;
105
+ const s = block.native.style;
106
106
  if ((value & Align.Default) === 0) {
107
107
  const v = AlignToCss[(value >> 2) & 0b11];
108
108
  const h = AlignToCss[value & 0b11];
109
109
  const t = TextAlignCss[value & 0b11];
110
- css.justifyContent = v;
111
- css.alignItems = h;
112
- css.textAlign = t;
110
+ s.justifyContent = v;
111
+ s.alignItems = h;
112
+ s.textAlign = t;
113
113
  }
114
114
  else
115
- css.justifyContent = css.alignContent = css.textAlign = "";
115
+ s.justifyContent = s.alignContent = s.textAlign = "";
116
116
  }
117
117
  applyBlockAlignment(block, value) {
118
- const css = block.native.style;
118
+ const s = block.native.style;
119
119
  if ((value & Align.Default) === 0) {
120
120
  const v = AlignToCss[(value >> 2) & 0b11];
121
121
  const h = AlignToCss[value & 0b11];
122
- css.alignSelf = v;
123
- css.justifySelf = h;
122
+ s.alignSelf = v;
123
+ s.justifySelf = h;
124
124
  }
125
125
  else
126
- css.alignSelf = css.justifySelf = "";
126
+ s.alignSelf = s.justifySelf = "";
127
127
  }
128
128
  applyContentWrapping(block, value) {
129
- const css = block.native.style;
129
+ const s = block.native.style;
130
130
  if (value) {
131
- css.flexFlow = "wrap";
132
- css.overflow = "";
133
- css.textOverflow = "";
134
- css.whiteSpace = "";
131
+ s.flexFlow = "wrap";
132
+ s.overflow = "";
133
+ s.textOverflow = "";
134
+ s.whiteSpace = "";
135
135
  }
136
136
  else {
137
- css.flexFlow = "";
138
- css.overflow = "hidden";
139
- css.textOverflow = "ellipsis";
140
- css.whiteSpace = "nowrap";
137
+ s.flexFlow = "";
138
+ s.overflow = "hidden";
139
+ s.textOverflow = "ellipsis";
140
+ s.whiteSpace = "nowrap";
141
141
  }
142
142
  }
143
143
  applyOverlayVisible(block, value) {
144
144
  const e = block.native;
145
- const css = e.style;
145
+ const s = e.style;
146
146
  const host = HtmlDriver.findEffectiveHtmlBlockHost(block).native;
147
147
  if (value === true) {
148
148
  const doc = document.body;
149
149
  const rect = host.getBoundingClientRect();
150
150
  if (doc.offsetWidth - rect.left > rect.right)
151
- css.left = "0", css.right = "";
151
+ s.left = "0", s.right = "";
152
152
  else
153
- css.left = "", css.right = "0";
153
+ s.left = "", s.right = "0";
154
154
  if (doc.clientHeight - rect.top > rect.bottom)
155
- css.top = "100%", css.bottom = "";
155
+ s.top = "100%", s.bottom = "";
156
156
  else
157
- css.top = "", css.bottom = "100%";
158
- css.display = "";
159
- css.position = "absolute";
160
- css.minWidth = "100%";
161
- css.boxSizing = "border-box";
157
+ s.top = "", s.bottom = "100%";
158
+ s.display = "";
159
+ s.position = "absolute";
160
+ s.minWidth = "100%";
161
+ s.boxSizing = "border-box";
162
162
  host.style.position = "relative";
163
163
  }
164
164
  else {
165
165
  host.style.position = "";
166
166
  if (value === false)
167
- css.display = "none";
167
+ s.display = "none";
168
168
  else
169
- css.position = css.display = css.left = css.right = css.top = css.bottom = "";
169
+ s.position = s.display = s.left = s.right = s.top = s.bottom = "";
170
170
  }
171
171
  }
172
172
  applyStyle(block, secondary, styleName, enabled) {
@@ -199,40 +199,37 @@ const Drivers = {
199
199
  };
200
200
  const VerstakDriversByLayout = [
201
201
  b => {
202
- const css = b.native.style;
203
- css.display = "flex";
204
- css.flexDirection = "column";
205
- css.alignSelf = b.descriptor.owner.isTable ? "stretch" : "center";
206
- css.textAlign = "initial";
207
- css.flexShrink = "1";
208
- css.minWidth = "0";
202
+ const s = b.native.style;
203
+ s.display = "flex";
204
+ s.flexDirection = "column";
205
+ s.alignSelf = b.node.owner.isTable ? "stretch" : "center";
206
+ s.textAlign = "initial";
207
+ s.flexShrink = "1";
208
+ s.minWidth = "0";
209
209
  },
210
210
  b => {
211
- const css = b.native.style;
212
- css.alignSelf = b.descriptor.owner.isTable ? "stretch" : "center";
213
- css.display = "grid";
214
- css.flexBasis = "0";
215
- css.gridAutoRows = "minmax(min-content, 1fr)";
216
- css.gridAutoColumns = "minmax(min-content, 1fr)";
217
- css.textAlign = "initial";
211
+ const s = b.native.style;
212
+ s.alignSelf = b.node.owner.isTable ? "stretch" : "center";
213
+ s.display = "grid";
214
+ s.flexBasis = "0";
215
+ s.gridAutoRows = "minmax(min-content, 1fr)";
216
+ s.gridAutoColumns = "minmax(min-content, 1fr)";
217
+ s.textAlign = "initial";
218
218
  },
219
219
  b => {
220
- const css = b.native.style;
221
- css.alignSelf = b.descriptor.owner.isTable ? "stretch" : "center";
222
- css.display = "inline-grid";
223
- css.flexShrink = "1";
224
- css.overflow = "";
225
- css.textOverflow = "";
226
- css.whiteSpace = "";
220
+ const s = b.native.style;
221
+ s.alignSelf = b.node.owner.isTable ? "stretch" : "center";
222
+ s.display = "inline-grid";
223
+ s.flexShrink = "1";
227
224
  },
228
225
  b => {
229
- const css = b.native.style;
230
- css.display = "contents";
226
+ const s = b.native.style;
227
+ s.display = "contents";
231
228
  },
232
229
  b => {
233
- const css = b.native.style;
234
- css.display = b.descriptor.owner.isTable ? "none" : "flex";
235
- css.flexDirection = "row";
230
+ const s = b.native.style;
231
+ s.display = b.node.owner.isTable ? "none" : "flex";
232
+ s.flexDirection = "row";
236
233
  },
237
234
  ];
238
235
  const AlignToCss = ["stretch", "start", "center", "end"];