@omnia/velcron 8.0.177-dev → 8.0.179-dev
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/internal-do-not-import-from-here/shared/models/velcron/VelcronDefinition.d.ts +13 -12
- package/models/VelcronDefinitions.d.ts +20 -9
- package/models/VelcronPropertyEditorDefinitions.d.ts +18 -0
- package/package.json +1 -1
- package/parser/VelcronData.d.ts +1 -1
- package/parser/VelcronData.js +6 -2
- package/parser/VelcronStyles.d.ts +5 -2
- package/parser/VelcronStyles.js +48 -103
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { IFontAwesomeIcon } from "@omnia/fx-models";
|
|
1
|
+
import { IFontAwesomeIcon, VelcronOverflowValues } from "@omnia/fx-models";
|
|
2
2
|
import { DynamicState } from "../DynamicState";
|
|
3
3
|
import { VelcronEvent, VelcronOnActiveEvent, VelcronOnEditModeEvent, VelcronOnLoadEvent, VelcronOnPersistingStateEvent, VelcronOnSavingEvent } from "./VelcronEvents";
|
|
4
4
|
/**
|
|
@@ -38,16 +38,16 @@ interface VelcronDimensionStyling {
|
|
|
38
38
|
spacingType?: VelcronSpacingTypes;
|
|
39
39
|
}
|
|
40
40
|
export interface VelcronStyling {
|
|
41
|
-
margin?:
|
|
42
|
-
marginTop?: number;
|
|
43
|
-
marginRight?: number;
|
|
44
|
-
marginBottom?: number;
|
|
45
|
-
marginLeft?: number;
|
|
46
|
-
padding?: number;
|
|
47
|
-
paddingTop?: number;
|
|
48
|
-
paddingRight?: number;
|
|
49
|
-
paddingBottom?: number;
|
|
50
|
-
paddingLeft?: number;
|
|
41
|
+
margin?: string;
|
|
42
|
+
marginTop?: number | string;
|
|
43
|
+
marginRight?: number | string;
|
|
44
|
+
marginBottom?: number | string;
|
|
45
|
+
marginLeft?: number | string;
|
|
46
|
+
padding?: number | string;
|
|
47
|
+
paddingTop?: number | string;
|
|
48
|
+
paddingRight?: number | string;
|
|
49
|
+
paddingBottom?: number | string;
|
|
50
|
+
paddingLeft?: number | string;
|
|
51
51
|
height?: number | string;
|
|
52
52
|
width?: number | string;
|
|
53
53
|
}
|
|
@@ -60,7 +60,7 @@ export interface VelcronComponentDefinition extends VelcronDefinition {
|
|
|
60
60
|
icon?: any;
|
|
61
61
|
}
|
|
62
62
|
export type VelcronCustomComponentDefinition = VelcronComponentDefinition;
|
|
63
|
-
export type BuiltInPropertyEditorType = "text" | "slider" | "switch" | "alignment" | "color" | "markdown" | "icon" | "image" | "typography" | "spacing" | "color-schema-type" | "blueprint" | "background" | "grid" | "reference";
|
|
63
|
+
export type BuiltInPropertyEditorType = "text" | "number" | "slider" | "switch" | "alignment" | "color" | "markdown" | "icon" | "image" | "typography" | "spacing" | "color-schema-type" | "blueprint" | "background" | "grid" | "reference" | "select";
|
|
64
64
|
export type EditorLocation = "inline " | "pane" | "toolbar";
|
|
65
65
|
export interface VelcronEditor<TSettings = any> {
|
|
66
66
|
name?: string;
|
|
@@ -89,6 +89,7 @@ export interface VelcronAppDefinition<TState extends DynamicState = DynamicState
|
|
|
89
89
|
computed?: {
|
|
90
90
|
[name: string]: Array<string>;
|
|
91
91
|
};
|
|
92
|
+
overflow?: VelcronOverflowValues;
|
|
92
93
|
}
|
|
93
94
|
export type VelcronBindableProp<TPropType = string> = TPropType | string;
|
|
94
95
|
export declare function velcronBind<TPropType = string>(bindPath: string): VelcronBindableProp<TPropType>;
|
|
@@ -154,21 +154,26 @@ export interface VelcronRenderProp {
|
|
|
154
154
|
export interface VelcronDefinitionHasEffects {
|
|
155
155
|
effects?: VelcronEffects;
|
|
156
156
|
}
|
|
157
|
+
export interface VelcronDefinitionHasOverflow {
|
|
158
|
+
overflow?: VelcronOverflowValues;
|
|
159
|
+
overflowX?: VelcronOverflowValues;
|
|
160
|
+
overflowY?: VelcronOverflowValues;
|
|
161
|
+
}
|
|
157
162
|
/*** Built-in Components *********************************************************************/
|
|
158
|
-
export interface VelcronFlexDefinition extends VelcronDefinition, VelcronColorStyling {
|
|
163
|
+
export interface VelcronFlexDefinition extends VelcronDefinition, VelcronColorStyling, VelcronDefinitionHasOverflow {
|
|
159
164
|
type: "flex";
|
|
160
165
|
events?: VelcronOnPressEvent;
|
|
161
166
|
border?: VelcronBorder;
|
|
162
167
|
borderRadius?: VelcronDimensions;
|
|
163
168
|
}
|
|
164
|
-
export interface VelcronFlexRowDefinition extends VelcronDefinition, VelcronColorStyling, VelcronDefinitionHasEffects {
|
|
169
|
+
export interface VelcronFlexRowDefinition extends VelcronDefinition, VelcronColorStyling, VelcronDefinitionHasEffects, VelcronDefinitionHasOverflow {
|
|
165
170
|
type: "row";
|
|
166
171
|
events?: VelcronOnPressEvent;
|
|
167
172
|
direction?: VelcronBindableProp<"row" | "row-reverse">;
|
|
168
|
-
|
|
173
|
+
position?: VelcronBindableProp<VelcronPosition>;
|
|
174
|
+
zIndex?: VelcronBindableProp<number>;
|
|
169
175
|
blueprint?: ContainerBlueprint | ContainerVariant;
|
|
170
176
|
background?: BackgroundDefinition;
|
|
171
|
-
hideOverflow?: boolean;
|
|
172
177
|
wrap?: boolean;
|
|
173
178
|
gapX?: number | string;
|
|
174
179
|
gapY?: number | string;
|
|
@@ -180,12 +185,18 @@ export interface VelcronFlexRowDefinition extends VelcronDefinition, VelcronColo
|
|
|
180
185
|
height?: number | string;
|
|
181
186
|
minHeight?: number | string;
|
|
182
187
|
}
|
|
183
|
-
export interface
|
|
188
|
+
export interface VelcronPosition extends VelcronDimensions {
|
|
189
|
+
type: "absolute" | "fixed" | "relative" | "sticky";
|
|
190
|
+
}
|
|
191
|
+
export type VelcronOverflowValues = "visible" | "hidden" | "scroll" | "auto";
|
|
192
|
+
export interface VelcronFlexColumnDefinition extends VelcronDefinition, VelcronColorStyling, VelcronDefinitionHasEffects, VelcronDefinitionHasOverflow {
|
|
184
193
|
type: "column";
|
|
185
194
|
events?: VelcronOnPressEvent;
|
|
186
195
|
grow?: number;
|
|
187
196
|
alignY?: VelcronVerticalAlignments;
|
|
197
|
+
position?: VelcronPosition;
|
|
188
198
|
absolute?: VelcronSpacing;
|
|
199
|
+
zIndex?: number;
|
|
189
200
|
width?: number | string;
|
|
190
201
|
minWidth?: number | string;
|
|
191
202
|
}
|
|
@@ -306,10 +317,10 @@ export interface VelcronEditorRendererDefinition extends VelcronDefinition {
|
|
|
306
317
|
events?: VelcronOnUpdatedEvent;
|
|
307
318
|
}
|
|
308
319
|
export interface VelcronDimensions {
|
|
309
|
-
top
|
|
310
|
-
right
|
|
311
|
-
bottom
|
|
312
|
-
left
|
|
320
|
+
top?: number | string;
|
|
321
|
+
right?: number | string;
|
|
322
|
+
bottom?: number | string;
|
|
323
|
+
left?: number | string;
|
|
313
324
|
}
|
|
314
325
|
export interface VelcronBorder extends VelcronDimensions {
|
|
315
326
|
colorType?: string;
|
|
@@ -18,11 +18,23 @@ export interface VelcronMarkdownEditorSettings {
|
|
|
18
18
|
}
|
|
19
19
|
export interface VelcronSpacingEditorSettings {
|
|
20
20
|
individualSelection: boolean;
|
|
21
|
+
mode?: "default" | "position";
|
|
22
|
+
}
|
|
23
|
+
export interface VelcronSelectEditorSettings {
|
|
24
|
+
options: Array<{
|
|
25
|
+
title: string;
|
|
26
|
+
value: string;
|
|
27
|
+
}>;
|
|
21
28
|
}
|
|
22
29
|
export interface VelcronTextEditorSettings {
|
|
23
30
|
type: TypographyType;
|
|
24
31
|
placeholder: string;
|
|
25
32
|
}
|
|
33
|
+
export interface VelcronNumberEditorSettings {
|
|
34
|
+
min: number;
|
|
35
|
+
max: number;
|
|
36
|
+
step: number;
|
|
37
|
+
}
|
|
26
38
|
export interface VelcronBlueprintEditorSettings {
|
|
27
39
|
type: "container" | "";
|
|
28
40
|
}
|
|
@@ -35,6 +47,9 @@ export interface VelcronSliderPropertyEditor extends VelcronEditor<VelcronSlider
|
|
|
35
47
|
export interface VelcronTextPropertyEditor extends VelcronEditor<VelcronTextEditorSettings> {
|
|
36
48
|
type: "text";
|
|
37
49
|
}
|
|
50
|
+
export interface VelcronNumberPropertyEditor extends VelcronEditor<VelcronNumberEditorSettings> {
|
|
51
|
+
type: "number";
|
|
52
|
+
}
|
|
38
53
|
export interface VelcronEnterprisePropertyEditor extends VelcronEditor<any> {
|
|
39
54
|
type: "enterprise-property";
|
|
40
55
|
}
|
|
@@ -77,3 +92,6 @@ export interface VelcronBackgroundEditor extends VelcronEditor<VelcronBackground
|
|
|
77
92
|
export interface VelcronGridEditor extends VelcronEditor<any> {
|
|
78
93
|
type: "grid";
|
|
79
94
|
}
|
|
95
|
+
export interface VelcronSelectEditor extends VelcronEditor<VelcronSelectEditorSettings> {
|
|
96
|
+
type: "select";
|
|
97
|
+
}
|
package/package.json
CHANGED
package/parser/VelcronData.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ export interface ParseResult<T> {
|
|
|
7
7
|
export declare class VelcronData {
|
|
8
8
|
static dataBind<T = string>(renderContext: VelcronRenderContext, bindTo: VelcronBindableProp<any>): T;
|
|
9
9
|
static isBindable<T = string>(bindable: VelcronBindableProp<T>): boolean;
|
|
10
|
-
static getBindPath(text: string): string;
|
|
10
|
+
static getBindPath(text: string, removeStateToken?: boolean): string;
|
|
11
11
|
static addCtxToVariableNames(template: string, skipIfNameStartsWith?: string, skipIfNameMatches?: Array<string>, overridePrefixWhenNameMatches?: {
|
|
12
12
|
[name: string]: string;
|
|
13
13
|
}): string;
|
package/parser/VelcronData.js
CHANGED
|
@@ -39,8 +39,12 @@ class VelcronData {
|
|
|
39
39
|
}
|
|
40
40
|
return bindable?.startsWith(VelcronConstants_1.VelcronConstants.state.bindToken);
|
|
41
41
|
}
|
|
42
|
-
static getBindPath(text) {
|
|
43
|
-
|
|
42
|
+
static getBindPath(text, removeStateToken = true) {
|
|
43
|
+
text = text?.substring(VelcronConstants_1.VelcronConstants.state.bindToken.length).trim();
|
|
44
|
+
if (removeStateToken && text.indexOf(VelcronConstants_1.VelcronConstants.state.stateRootToken) > -1) {
|
|
45
|
+
text = text.substring(VelcronConstants_1.VelcronConstants.state.stateRootToken.length + 1).trim();
|
|
46
|
+
}
|
|
47
|
+
return text;
|
|
44
48
|
}
|
|
45
49
|
static addCtxToVariableNames(template, skipIfNameStartsWith, skipIfNameMatches, overridePrefixWhenNameMatches) {
|
|
46
50
|
const re = new RegExp(/[^0-9a-z-.'$]/, "gi");
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { VelcronBorder, VelcronColorStyling, VelcronDefinitionHasEffects, VelcronDimensions, VelcronEffects, VelcronRenderContext } from "../models";
|
|
1
|
+
import { VelcronBorder, VelcronColorStyling, VelcronDefinitionHasEffects, VelcronDefinitionHasOverflow, VelcronDimensions, VelcronEffects, VelcronRenderContext } from "../models";
|
|
2
2
|
import { VelcronUnitProvider } from "../models/VelcronUnitProvider";
|
|
3
|
-
import { VelcronDefinition } from "..";
|
|
3
|
+
import { SpacingDefinition, VelcronBindableProp, VelcronDefinition } from "..";
|
|
4
4
|
export declare class VelcronStyles {
|
|
5
5
|
static styleProvider: (baseStyles: object, definition: VelcronDefinition, renderCtx: VelcronRenderContext) => any;
|
|
6
6
|
static effectsProvider: (effects: VelcronEffects, renderCtx: VelcronRenderContext) => VelcronEffects;
|
|
@@ -12,5 +12,8 @@ export declare class VelcronStyles {
|
|
|
12
12
|
static insertBorderRadiusStyles(styleBase: any, settings: VelcronDimensions): void;
|
|
13
13
|
static insertBorderStyles(styleBase: any, borderSettings: VelcronBorder, renderCtx: VelcronRenderContext): void;
|
|
14
14
|
static create(definition: VelcronDefinition, renderCtx: VelcronRenderContext): object | string;
|
|
15
|
+
static applySpacingDimension(value: string | number, spacing: SpacingDefinition): string | number;
|
|
16
|
+
static applyOverflow(definition: VelcronDefinitionHasOverflow, renderCtx: VelcronRenderContext, styleBase: any): void;
|
|
17
|
+
static applySpacingStyles<T>(spacing: VelcronBindableProp<T>, renderCtx: VelcronRenderContext, styleBase: any, spacingDef: SpacingDefinition, styleType: string, objectIsDatabound?: (obj: T) => void, additionalPropsToDataBind?: object): void;
|
|
15
18
|
static dataBindStyles(styles: object, renderCtx: VelcronRenderContext): object;
|
|
16
19
|
}
|
package/parser/VelcronStyles.js
CHANGED
|
@@ -112,7 +112,7 @@ class VelcronStyles {
|
|
|
112
112
|
styleBase["paddingLeft"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, definition.padding.left), spacing));
|
|
113
113
|
}
|
|
114
114
|
if (definition.type === VelcronConstants_1.VelcronConstants.components.velcron) {
|
|
115
|
-
|
|
115
|
+
this.applyOverflow(definition, renderCtx, styleBase);
|
|
116
116
|
}
|
|
117
117
|
if (definition.type === VelcronConstants_1.VelcronConstants.components.image) {
|
|
118
118
|
const imageDefinition = definition;
|
|
@@ -159,6 +159,7 @@ class VelcronStyles {
|
|
|
159
159
|
// styleBase["position"] = "absolute";
|
|
160
160
|
styleBase["width"] = "100%";
|
|
161
161
|
styleBase["boxSizing"] = "border-box";
|
|
162
|
+
this.applyOverflow(definition, renderCtx, styleBase);
|
|
162
163
|
this.insertBackgroundColor(styleBase, flexDefinition, renderCtx);
|
|
163
164
|
}
|
|
164
165
|
else if (definition.type === VelcronConstants_1.VelcronConstants.components.row) {
|
|
@@ -172,13 +173,10 @@ class VelcronStyles {
|
|
|
172
173
|
const minWidth = VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.minWidth);
|
|
173
174
|
const height = VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.height);
|
|
174
175
|
const minHeight = VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.minHeight);
|
|
175
|
-
if (flexDefinition.
|
|
176
|
-
styleBase["position"] =
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
styleBase["marginRight"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.absolute.right), spacing));
|
|
180
|
-
styleBase["marginBottom"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.absolute.bottom), spacing));
|
|
181
|
-
styleBase["marginLeft"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.absolute.left), spacing));
|
|
176
|
+
if (flexDefinition.position) {
|
|
177
|
+
this.applySpacingStyles(flexDefinition.position, renderCtx, styleBase, spacing, "", (pos) => styleBase["position"] = pos.type, {
|
|
178
|
+
"position": "type"
|
|
179
|
+
});
|
|
182
180
|
}
|
|
183
181
|
if (flexDefinition.alignX) {
|
|
184
182
|
if (VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.alignX) === "right") {
|
|
@@ -199,7 +197,7 @@ class VelcronStyles {
|
|
|
199
197
|
alignY = "stretch";
|
|
200
198
|
}
|
|
201
199
|
}
|
|
202
|
-
|
|
200
|
+
this.applyOverflow(definition, renderCtx, styleBase);
|
|
203
201
|
styleBase["flexDirection"] = flexDefinition.direction;
|
|
204
202
|
styleBase["display"] = "flex";
|
|
205
203
|
styleBase["flex"] = "1 1 auto";
|
|
@@ -229,6 +227,7 @@ class VelcronStyles {
|
|
|
229
227
|
yAlignment = "end";
|
|
230
228
|
}
|
|
231
229
|
}
|
|
230
|
+
this.applyOverflow(definition, renderCtx, styleBase);
|
|
232
231
|
styleBase["flexBasis"] = flexDefinition.width ? this.unitProvider.formatDimension(width) : 0;
|
|
233
232
|
styleBase["flexGrow"] = flexDefinition.grow || flexDefinition.grow === 0 ? flexDefinition.grow : 1;
|
|
234
233
|
styleBase["maxWidth"] = flexDefinition.width ? this.unitProvider.formatDimension(width) : "100%";
|
|
@@ -236,100 +235,6 @@ class VelcronStyles {
|
|
|
236
235
|
styleBase["minWidth"] = this.unitProvider.formatDimension(minWidth);
|
|
237
236
|
this.insertBackgroundColor(styleBase, flexDefinition, renderCtx);
|
|
238
237
|
}
|
|
239
|
-
// const flexViewDefinition = definition as VelcronFlexDefinition;
|
|
240
|
-
// // let calculatedMaxHeight = maxHeight;
|
|
241
|
-
// // let calculatedHeight = height;
|
|
242
|
-
// styleBase["overflow"] = "hidden";
|
|
243
|
-
// if(flexViewDefinition.absolute){
|
|
244
|
-
// const spacing = renderCtx.blueprints.get.spacing.inner;
|
|
245
|
-
// styleBase["position"] = "absolute";
|
|
246
|
-
// /**Use margin to position the element since flex does not support absolute positioning */
|
|
247
|
-
// styleBase["marginTop"] = this.unitProvider.formatDimension(getSpacingValueFromBlueprint(VelcronData.dataBind(renderCtx,flexViewDefinition.absolute.top),spacing)) as any;
|
|
248
|
-
// styleBase["marginRight"] = this.unitProvider.formatDimension(getSpacingValueFromBlueprint(VelcronData.dataBind(renderCtx,flexViewDefinition.absolute.right),spacing)) as any;
|
|
249
|
-
// styleBase["marginBottom"] = this.unitProvider.formatDimension(getSpacingValueFromBlueprint(VelcronData.dataBind(renderCtx,flexViewDefinition.absolute.bottom),spacing)) as any;
|
|
250
|
-
// styleBase["marginLeft"] = this.unitProvider.formatDimension(getSpacingValueFromBlueprint(VelcronData.dataBind(renderCtx,flexViewDefinition.absolute.left),spacing)) as any;
|
|
251
|
-
// }
|
|
252
|
-
// const flexGrow = flexViewDefinition.grow === "default"?
|
|
253
|
-
// undefined :
|
|
254
|
-
// flexViewDefinition.grow || flexViewDefinition.grow === 0 ?
|
|
255
|
-
// flexViewDefinition.grow :
|
|
256
|
-
// 1;
|
|
257
|
-
// styleBase["flex"] = flexGrow;
|
|
258
|
-
// const direction = VelcronData.dataBind(renderCtx, flexViewDefinition.direction);
|
|
259
|
-
// //styleBase["flex"] = flexGrow; /**testing */
|
|
260
|
-
// styleBase["flexDirection"] = direction === "column" ? "column"
|
|
261
|
-
// : direction === "column-reverse" ? "column-reverse"
|
|
262
|
-
// : direction === "row-reverse" ? "row-reverse"
|
|
263
|
-
// : "row";
|
|
264
|
-
// if (flexViewDefinition.width) {
|
|
265
|
-
// const width = VelcronData.dataBind(renderCtx,flexViewDefinition.width);
|
|
266
|
-
// const maxWidth = VelcronData.dataBind(renderCtx,flexViewDefinition.maxWidth);
|
|
267
|
-
// if(!direction || direction==="" || direction === "row" || direction === "row-reverse"){
|
|
268
|
-
// styleBase["flexBasis"] = this.unitProvider.formatDimension(width);
|
|
269
|
-
// styleBase["maxWidth"] = maxWidth?this.unitProvider.formatDimension(maxWidth) : this.unitProvider.formatDimension(width);
|
|
270
|
-
// styleBase["width"] = this.unitProvider.formatDimension(width);
|
|
271
|
-
// }
|
|
272
|
-
// else{
|
|
273
|
-
// styleBase["width"] = this.unitProvider.formatDimension(width);
|
|
274
|
-
// if(!flexGrow){
|
|
275
|
-
// styleBase["maxWidth"] = maxWidth?this.unitProvider.formatDimension(maxWidth) : this.unitProvider.formatDimension(width);
|
|
276
|
-
// }
|
|
277
|
-
// }
|
|
278
|
-
// //styleBase["width"] = this.unitProvider.formatDimension(flexViewDefinition.width);
|
|
279
|
-
// }
|
|
280
|
-
// if(flexViewDefinition.minWidth){
|
|
281
|
-
// const minWidth = VelcronData.dataBind(renderCtx,flexViewDefinition.minWidth);
|
|
282
|
-
// styleBase["minWidth"] = this.unitProvider.formatDimension(minWidth);
|
|
283
|
-
// }
|
|
284
|
-
// if (flexViewDefinition.height) {
|
|
285
|
-
// const height = VelcronData.dataBind(renderCtx,flexViewDefinition.height);
|
|
286
|
-
// const maxHeight = VelcronData.dataBind(renderCtx,flexViewDefinition.maxHeight);
|
|
287
|
-
// if(direction === "column" || direction === "column-reverse"){
|
|
288
|
-
// styleBase["flexBasis"] = this.unitProvider.formatDimension(height);
|
|
289
|
-
// styleBase["maxHeight"] = maxHeight?this.unitProvider.formatDimension(maxHeight) : this.unitProvider.formatDimension(height);
|
|
290
|
-
// styleBase["height"] = this.unitProvider.formatDimension(height); /**Test since flex basis doesn't seem to bite on column direction */
|
|
291
|
-
// }
|
|
292
|
-
// else{
|
|
293
|
-
// styleBase["height"] = this.unitProvider.formatDimension(height);
|
|
294
|
-
// if(!flexGrow){
|
|
295
|
-
// styleBase["maxHeight"] = maxHeight?this.unitProvider.formatDimension(maxHeight) : this.unitProvider.formatDimension(height);
|
|
296
|
-
// }
|
|
297
|
-
// }
|
|
298
|
-
// //direction === "column" || direction === "column-reverse"
|
|
299
|
-
// }
|
|
300
|
-
// if(flexViewDefinition.minHeight){
|
|
301
|
-
// const minHeight = VelcronData.dataBind(renderCtx,flexViewDefinition.minHeight);
|
|
302
|
-
// styleBase["minHeight"] = this.unitProvider.formatDimension(minHeight);
|
|
303
|
-
// }
|
|
304
|
-
// if (flexViewDefinition.hAlign) {
|
|
305
|
-
// const propertyName = direction === "column" || direction === "column-reverse" ? "alignItems" : "justifyContent";
|
|
306
|
-
// if (flexViewDefinition.hAlign === VelcronHorizontalAlignments.right) {
|
|
307
|
-
// styleBase[propertyName] = "flex-end";
|
|
308
|
-
// }
|
|
309
|
-
// else if (flexViewDefinition.hAlign === VelcronHorizontalAlignments.center) {
|
|
310
|
-
// styleBase[propertyName] = "center";
|
|
311
|
-
// }
|
|
312
|
-
// }
|
|
313
|
-
// const propertyName = direction === "column" || direction === "column-reverse" ? "justifyContent" : "alignItems";
|
|
314
|
-
// if (flexViewDefinition.vAlign) {
|
|
315
|
-
// if (flexViewDefinition.vAlign === VelcronVerticalAlignments.center
|
|
316
|
-
// ) {
|
|
317
|
-
// styleBase[propertyName] = "center";
|
|
318
|
-
// }
|
|
319
|
-
// else if (flexViewDefinition.vAlign === VelcronVerticalAlignments.bottom) {
|
|
320
|
-
// styleBase[propertyName] = "flex-end";
|
|
321
|
-
// }
|
|
322
|
-
// }
|
|
323
|
-
// else {
|
|
324
|
-
// styleBase[propertyName] = "flex-start";
|
|
325
|
-
// }
|
|
326
|
-
// this.insertBackgroundColor(styleBase, flexViewDefinition, renderCtx);
|
|
327
|
-
//}
|
|
328
|
-
/**
|
|
329
|
-
*
|
|
330
|
-
* Generic styles for all components
|
|
331
|
-
*
|
|
332
|
-
*/
|
|
333
238
|
if (definition.border) {
|
|
334
239
|
const typedDefinition = definition;
|
|
335
240
|
this.insertBorderStyles(styleBase, typedDefinition.border, renderCtx);
|
|
@@ -342,6 +247,46 @@ class VelcronStyles {
|
|
|
342
247
|
}
|
|
343
248
|
return VelcronStyles.styleProvider(styleBase, definition, renderCtx);
|
|
344
249
|
}
|
|
250
|
+
static applySpacingDimension(value, spacing) {
|
|
251
|
+
return this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(value, spacing));
|
|
252
|
+
}
|
|
253
|
+
static applyOverflow(definition, renderCtx, styleBase) {
|
|
254
|
+
styleBase["overflow"] = definition.overflow ?
|
|
255
|
+
VelcronData_1.VelcronData.dataBind(renderCtx, definition.overflow) :
|
|
256
|
+
"hidden";
|
|
257
|
+
if (definition.overflowX) {
|
|
258
|
+
styleBase["overflowX"] = VelcronData_1.VelcronData.dataBind(renderCtx, definition.overflowX);
|
|
259
|
+
}
|
|
260
|
+
if (definition.overflowY) {
|
|
261
|
+
styleBase["overflowY"] = VelcronData_1.VelcronData.dataBind(renderCtx, definition.overflowY);
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
static applySpacingStyles(spacing, renderCtx, styleBase, spacingDef, styleType, objectIsDatabound, additionalPropsToDataBind) {
|
|
265
|
+
const properties = ["top", "right", "bottom", "left"];
|
|
266
|
+
if (VelcronData_1.VelcronData.isBindable(spacing)) {
|
|
267
|
+
//The whole object is databount
|
|
268
|
+
const dataBound = VelcronData_1.VelcronData.dataBind(renderCtx, spacing);
|
|
269
|
+
objectIsDatabound?.(dataBound);
|
|
270
|
+
properties.forEach(prop => {
|
|
271
|
+
if (dataBound?.[prop]) {
|
|
272
|
+
const styleName = styleType?.length > 0 ? `${styleType}${prop.charAt(0).toUpperCase() + prop.slice(1)}` : prop;
|
|
273
|
+
styleBase[styleName] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(dataBound[prop], spacingDef));
|
|
274
|
+
}
|
|
275
|
+
});
|
|
276
|
+
}
|
|
277
|
+
else {
|
|
278
|
+
properties.forEach(prop => {
|
|
279
|
+
//Each property is databound
|
|
280
|
+
if (spacing?.[prop]) {
|
|
281
|
+
const styleName = styleType?.length > 0 ? `${styleType}${prop.charAt(0).toUpperCase() + prop.slice(1)}` : prop;
|
|
282
|
+
styleBase[styleName] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, spacing[prop]), spacingDef));
|
|
283
|
+
}
|
|
284
|
+
});
|
|
285
|
+
additionalPropsToDataBind && Object.keys(additionalPropsToDataBind).forEach((key) => {
|
|
286
|
+
styleBase[key] = VelcronData_1.VelcronData.dataBind(renderCtx, spacing[additionalPropsToDataBind[key]]);
|
|
287
|
+
});
|
|
288
|
+
}
|
|
289
|
+
}
|
|
345
290
|
static dataBindStyles(styles, renderCtx) {
|
|
346
291
|
Object.keys(styles).forEach((key) => {
|
|
347
292
|
const style = styles[key];
|