@omnia/velcron 8.0.295-dev → 8.0.296-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 +8 -2
- package/models/VelcronDefinitions.d.ts +13 -17
- package/package.json +1 -1
- package/parser/VelcronDataBinder.d.ts +1 -1
- package/parser/VelcronDataBinder.js +3 -2
- package/parser/VelcronStyles.d.ts +7 -6
- package/parser/VelcronStyles.js +68 -66
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { IFontAwesomeIcon, VelcronOverflowValues } from "@omnia/fx-models";
|
|
1
|
+
import { ContainerBlueprint, ContainerVariant, IFontAwesomeIcon, VelcronColorStyling, VelcronOverflowValues } from "@omnia/fx-models";
|
|
2
2
|
import { DynamicState } from "../DynamicState";
|
|
3
3
|
import { VelcronEvent, VelcronOnActiveEvent, VelcronOnEditModeEvent, VelcronOnLoadEvent, VelcronOnPersistingStateEvent, VelcronOnSavingEvent } from "./VelcronEvents";
|
|
4
4
|
/**
|
|
@@ -74,10 +74,16 @@ export interface VelcronEditor<TSettings = any> {
|
|
|
74
74
|
multiple?: boolean;
|
|
75
75
|
component?: unknown;
|
|
76
76
|
}
|
|
77
|
-
export interface
|
|
77
|
+
export interface VelcronLazyApp {
|
|
78
|
+
minHeight?: VelcronBindableProp<number | string>;
|
|
79
|
+
backgroundColor?: VelcronBindableProp<string>;
|
|
80
|
+
}
|
|
81
|
+
export interface VelcronAppDefinition<TState extends DynamicState = DynamicState> extends VelcronDefinitionBase, VelcronColorStyling {
|
|
78
82
|
type: "velcron";
|
|
79
83
|
version?: string;
|
|
80
84
|
name?: string;
|
|
85
|
+
lazy?: VelcronLazyApp;
|
|
86
|
+
blueprint?: ContainerBlueprint | ContainerVariant;
|
|
81
87
|
body?: Array<VelcronDefinition>;
|
|
82
88
|
events?: VelcronOnLoadEvent & VelcronOnEditModeEvent & VelcronOnSavingEvent & VelcronOnPersistingStateEvent & VelcronOnActiveEvent;
|
|
83
89
|
actions?: {
|
|
@@ -5,6 +5,7 @@ import { DynamicState, VelcronDefinition, VelcronEffects, useVelcronThemingStore
|
|
|
5
5
|
import { guid, PropertyConfiguration, PropertyValue, PropertyDefinition, PropertySetupBase } from "@omnia/fx/models";
|
|
6
6
|
import { useVelcronColorSchemaStore } from "../stores/VelcronColorSchema";
|
|
7
7
|
import { Properties } from "csstype";
|
|
8
|
+
import type { AnimationOptionsWithOverrides, InViewOptions, VariantDefinition, Variants } from "motion";
|
|
8
9
|
export interface ResolvedComponentRenderer {
|
|
9
10
|
component: unknown;
|
|
10
11
|
definition: VelcronDefinition;
|
|
@@ -37,6 +38,7 @@ export interface BuiltInComponentRenderers {
|
|
|
37
38
|
"slide-panel": unknown;
|
|
38
39
|
"editor": unknown;
|
|
39
40
|
"link": unknown;
|
|
41
|
+
"motion": unknown;
|
|
40
42
|
}
|
|
41
43
|
export interface ColorSchemaReference {
|
|
42
44
|
name: string;
|
|
@@ -327,23 +329,17 @@ export interface VelcronFlowDefinition extends VelcronDefinition, VelcronColorSt
|
|
|
327
329
|
placeholder?: VelcronBindableProp<string>;
|
|
328
330
|
events?: VelcronOnUpdatedEvent;
|
|
329
331
|
}
|
|
330
|
-
export interface
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
url: VelcronBindableProp;
|
|
342
|
-
loop?: VelcronBindableProp<boolean>;
|
|
343
|
-
autoplay?: VelcronBindableProp<boolean>;
|
|
344
|
-
count?: VelcronBindableProp<number>;
|
|
345
|
-
direction?: VelcronBindableProp<"normal" | "reverse">;
|
|
346
|
-
hover?: VelcronBindableProp<boolean>;
|
|
332
|
+
export interface VelcronMotionDefinition extends VelcronDefinition {
|
|
333
|
+
initial?: false | VariantDefinition;
|
|
334
|
+
animate?: VariantDefinition;
|
|
335
|
+
inView?: VariantDefinition;
|
|
336
|
+
hover?: VariantDefinition;
|
|
337
|
+
press?: VariantDefinition;
|
|
338
|
+
variants?: Variants;
|
|
339
|
+
transition?: AnimationOptionsWithOverrides;
|
|
340
|
+
inViewOptions?: InViewOptions & {
|
|
341
|
+
once?: boolean;
|
|
342
|
+
};
|
|
347
343
|
}
|
|
348
344
|
export interface VelcronSlidePanelSlidesOptions {
|
|
349
345
|
foreach: string;
|
package/package.json
CHANGED
|
@@ -9,5 +9,5 @@ export declare class VelcronDataBinder {
|
|
|
9
9
|
static tryUpdateBoundValue(renderContext: VelcronRenderContext, bindPath: string, value: unknown): void;
|
|
10
10
|
static bindMany<T>(renderContext: VelcronRenderContext, definition: {
|
|
11
11
|
[P in keyof T]?: VelcronBindableProp<T[P]>;
|
|
12
|
-
}, propertiesToBind: Array<keyof T>,
|
|
12
|
+
}, propertiesToBind: Array<keyof T>, objectToBindTo: Partial<T>): T;
|
|
13
13
|
}
|
|
@@ -141,13 +141,14 @@ class VelcronDataBinder {
|
|
|
141
141
|
VelcronData_1.VelcronData.getOrSet(renderContext, VelcronData_1.VelcronData.getBindPath(bindPath), value);
|
|
142
142
|
}
|
|
143
143
|
}
|
|
144
|
-
static bindMany(renderContext, definition, propertiesToBind,
|
|
144
|
+
static bindMany(renderContext, definition, propertiesToBind, objectToBindTo) {
|
|
145
145
|
propertiesToBind.forEach((property) => {
|
|
146
146
|
const definitionValue = definition[property];
|
|
147
147
|
if (definitionValue !== undefined) {
|
|
148
|
-
|
|
148
|
+
objectToBindTo[property] = VelcronDataBinder.bind(renderContext, definitionValue);
|
|
149
149
|
}
|
|
150
150
|
});
|
|
151
|
+
return objectToBindTo;
|
|
151
152
|
}
|
|
152
153
|
}
|
|
153
154
|
exports.VelcronDataBinder = VelcronDataBinder;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { VelcronBorder, VelcronColorStyling, VelcronDefinitionHasEffects, VelcronDefinitionHasOverflow, VelcronDimensions, VelcronEffects, VelcronRenderContext } from "../models";
|
|
2
2
|
import { VelcronUnitProvider } from "../models/VelcronUnitProvider";
|
|
3
3
|
import { SpacingBlueprint, VelcronBindableProp, VelcronDefinition } from "..";
|
|
4
|
+
import { CSSProperties, StylexType } from "internal/fx/ux/Styles.stylex";
|
|
4
5
|
export declare class VelcronStyles {
|
|
5
|
-
static styleProvider: (baseStyles:
|
|
6
|
+
static styleProvider: (baseStyles: CSSProperties, definition: VelcronDefinition, renderCtx: VelcronRenderContext) => StylexType;
|
|
6
7
|
static effectsProvider: (effects: VelcronEffects, renderCtx: VelcronRenderContext) => VelcronEffects;
|
|
7
8
|
static unitProvider: VelcronUnitProvider;
|
|
8
9
|
spacingScaling: {
|
|
@@ -19,13 +20,13 @@ export declare class VelcronStyles {
|
|
|
19
20
|
scaling: (value: import("..").SpacingValue) => boolean;
|
|
20
21
|
};
|
|
21
22
|
};
|
|
22
|
-
static registerStyleProvider(fn: (styleBase:
|
|
23
|
+
static registerStyleProvider(fn: (styleBase: CSSProperties, definition: VelcronDefinition, renderCtx: VelcronRenderContext) => StylexType, unitProvider: VelcronUnitProvider): void;
|
|
23
24
|
static registerEffectsProvider(fn: (effects: VelcronEffects, renderCtx: VelcronRenderContext) => VelcronEffects): void;
|
|
24
25
|
static applyEffects(definition: VelcronDefinitionHasEffects, renderCtx: VelcronRenderContext, applyTo: (effects: VelcronEffects) => any): any;
|
|
25
|
-
static insertBackgroundColor(styleBase:
|
|
26
|
-
static insertBorderRadiusStyles(styleBase:
|
|
27
|
-
static insertBorderStyles(styleBase:
|
|
28
|
-
static create(definition: VelcronDefinition, renderCtx: VelcronRenderContext):
|
|
26
|
+
static insertBackgroundColor(styleBase: CSSProperties, color: VelcronColorStyling, renderCtx: VelcronRenderContext): void;
|
|
27
|
+
static insertBorderRadiusStyles(styleBase: CSSProperties, settings: VelcronDimensions, renderCtx: VelcronRenderContext): void;
|
|
28
|
+
static insertBorderStyles(styleBase: CSSProperties, borderSettings: VelcronBorder, renderCtx: VelcronRenderContext): void;
|
|
29
|
+
static create(definition: VelcronDefinition, renderCtx: VelcronRenderContext): StylexType;
|
|
29
30
|
static applySpacingDimension(value: string | number, spacing: SpacingBlueprint): string | number;
|
|
30
31
|
static applyOverflow(definition: VelcronDefinitionHasOverflow, renderCtx: VelcronRenderContext, styleBase: any): void;
|
|
31
32
|
static applySpacingStyles<T>(spacing: VelcronBindableProp<T>, renderCtx: VelcronRenderContext, styleBase: any, spacingDef: SpacingBlueprint, styleType: string, objectIsDatabound?: (obj: T) => void, additionalPropsToDataBind?: object): void;
|
package/parser/VelcronStyles.js
CHANGED
|
@@ -36,7 +36,7 @@ class VelcronStyles {
|
|
|
36
36
|
colorValue = renderCtx.colors.get.base;
|
|
37
37
|
}
|
|
38
38
|
if (colorValue) {
|
|
39
|
-
styleBase
|
|
39
|
+
styleBase.backgroundColor = toned ? colorValue.colorToned : colorValue.color;
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
42
|
}
|
|
@@ -49,16 +49,16 @@ class VelcronStyles {
|
|
|
49
49
|
const bottom = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, settings.bottom);
|
|
50
50
|
const left = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, settings.left);
|
|
51
51
|
if (top || top === 0) {
|
|
52
|
-
styleBase
|
|
52
|
+
styleBase.borderTopLeftRadius = this.unitProvider.formatDimension(top);
|
|
53
53
|
}
|
|
54
54
|
if (right || right === 0) {
|
|
55
|
-
styleBase
|
|
55
|
+
styleBase.borderTopRightRadius = this.unitProvider.formatDimension(right);
|
|
56
56
|
}
|
|
57
57
|
if (bottom || bottom === 0) {
|
|
58
|
-
styleBase
|
|
58
|
+
styleBase.borderBottomRightRadius = this.unitProvider.formatDimension(bottom);
|
|
59
59
|
}
|
|
60
60
|
if (left || left === 0) {
|
|
61
|
-
styleBase
|
|
61
|
+
styleBase.borderBottomLeftRadius = this.unitProvider.formatDimension(left);
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
64
|
static insertBorderStyles(styleBase, borderSettings, renderCtx) {
|
|
@@ -82,22 +82,22 @@ class VelcronStyles {
|
|
|
82
82
|
const left = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, borderSettings.left);
|
|
83
83
|
const width = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, borderSettings.width);
|
|
84
84
|
if (top || top === 0) {
|
|
85
|
-
styleBase
|
|
86
|
-
styleBase
|
|
85
|
+
styleBase.borderTopStyle = "solid";
|
|
86
|
+
styleBase.borderTopColor = borderColor;
|
|
87
87
|
}
|
|
88
88
|
if (right || right === 0) {
|
|
89
|
-
styleBase
|
|
90
|
-
styleBase
|
|
89
|
+
styleBase.borderRightStyle = "solid";
|
|
90
|
+
styleBase.borderRightColor = borderColor;
|
|
91
91
|
}
|
|
92
92
|
if (bottom || bottom === 0) {
|
|
93
|
-
styleBase
|
|
94
|
-
styleBase
|
|
93
|
+
styleBase.borderBottomStyle = "solid";
|
|
94
|
+
styleBase.borderBottomColor = borderColor;
|
|
95
95
|
}
|
|
96
96
|
if (left || left === 0) {
|
|
97
|
-
styleBase
|
|
98
|
-
styleBase
|
|
97
|
+
styleBase.borderLeftStyle = "solid";
|
|
98
|
+
styleBase.borderLeftColor = borderColor;
|
|
99
99
|
}
|
|
100
|
-
styleBase
|
|
100
|
+
styleBase.borderWidth = width
|
|
101
101
|
? this.unitProvider.formatDimension(width)
|
|
102
102
|
: this.unitProvider.formatDimension(1);
|
|
103
103
|
}
|
|
@@ -111,38 +111,40 @@ class VelcronStyles {
|
|
|
111
111
|
const margin = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, definition.margin);
|
|
112
112
|
const spacing = renderCtx.theming.get.spacing();
|
|
113
113
|
if (typeof margin === "object") {
|
|
114
|
-
styleBase
|
|
115
|
-
styleBase
|
|
116
|
-
styleBase
|
|
117
|
-
styleBase
|
|
114
|
+
styleBase.marginTop = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, margin.top), spacing, margin.scale));
|
|
115
|
+
styleBase.marginRight = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, margin.right), spacing, margin.scale));
|
|
116
|
+
styleBase.marginBottom = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, margin.bottom), spacing, margin.scale));
|
|
117
|
+
styleBase.marginLeft = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, margin.left), spacing, margin.scale));
|
|
118
118
|
}
|
|
119
119
|
else {
|
|
120
120
|
const value = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, margin), spacing));
|
|
121
|
-
styleBase
|
|
122
|
-
styleBase
|
|
123
|
-
styleBase
|
|
124
|
-
styleBase
|
|
121
|
+
styleBase.marginTop = value;
|
|
122
|
+
styleBase.marginRight = value;
|
|
123
|
+
styleBase.marginBottom = value;
|
|
124
|
+
styleBase.marginLeft = value;
|
|
125
125
|
}
|
|
126
126
|
}
|
|
127
127
|
if (definition.padding) {
|
|
128
128
|
const padding = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, definition.padding);
|
|
129
129
|
const spacing = renderCtx.theming.get.spacing();
|
|
130
130
|
if (typeof padding === "object") {
|
|
131
|
-
styleBase
|
|
132
|
-
styleBase
|
|
133
|
-
styleBase
|
|
134
|
-
styleBase
|
|
131
|
+
styleBase.paddingTop = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, padding.top), spacing, padding.scale));
|
|
132
|
+
styleBase.paddingRight = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, padding.right), spacing, padding.scale));
|
|
133
|
+
styleBase.paddingBottom = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, padding.bottom), spacing, padding.scale));
|
|
134
|
+
styleBase.paddingLeft = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, padding.left), spacing, padding.scale));
|
|
135
135
|
}
|
|
136
136
|
else {
|
|
137
137
|
const value = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, padding), spacing));
|
|
138
|
-
styleBase
|
|
139
|
-
styleBase
|
|
140
|
-
styleBase
|
|
141
|
-
styleBase
|
|
138
|
+
styleBase.paddingTop = value;
|
|
139
|
+
styleBase.paddingRight = value;
|
|
140
|
+
styleBase.paddingBottom = value;
|
|
141
|
+
styleBase.paddingLeft = value;
|
|
142
142
|
}
|
|
143
143
|
}
|
|
144
144
|
if (definition.type === VelcronConstants_1.VelcronConstants.components.velcron) {
|
|
145
|
-
|
|
145
|
+
const appDefinition = definition;
|
|
146
|
+
this.applyOverflow(appDefinition, renderCtx, styleBase);
|
|
147
|
+
this.insertBackgroundColor(styleBase, appDefinition, renderCtx);
|
|
146
148
|
}
|
|
147
149
|
if (definition.type === VelcronConstants_1.VelcronConstants.components.image) {
|
|
148
150
|
const imageDefinition = definition;
|
|
@@ -165,10 +167,10 @@ class VelcronStyles {
|
|
|
165
167
|
color = renderCtx.colors.get.onBase;
|
|
166
168
|
}
|
|
167
169
|
if (color) {
|
|
168
|
-
styleBase
|
|
170
|
+
styleBase.color = toned ? color.colorToned : color.color + "!important";
|
|
169
171
|
}
|
|
170
172
|
if (noWrap) {
|
|
171
|
-
styleBase
|
|
173
|
+
styleBase.whiteSpace = "nowrap";
|
|
172
174
|
}
|
|
173
175
|
}
|
|
174
176
|
if (definition.type === VelcronConstants_1.VelcronConstants.components.flex) {
|
|
@@ -179,11 +181,11 @@ class VelcronStyles {
|
|
|
179
181
|
const minWidth = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.minWidth);
|
|
180
182
|
const height = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.height);
|
|
181
183
|
const minHeight = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.minHeight);
|
|
182
|
-
styleBase
|
|
183
|
-
styleBase
|
|
184
|
-
styleBase
|
|
185
|
-
styleBase
|
|
186
|
-
styleBase
|
|
184
|
+
styleBase.width = this.unitProvider.formatDimension(width);
|
|
185
|
+
styleBase.maxWidth = this.unitProvider.formatDimension(width);
|
|
186
|
+
styleBase.minWidth = this.unitProvider.formatDimension(minWidth);
|
|
187
|
+
styleBase.height = this.unitProvider.formatDimension(height);
|
|
188
|
+
styleBase.minHeight = this.unitProvider.formatDimension(minHeight);
|
|
187
189
|
}
|
|
188
190
|
if (definition.type === VelcronConstants_1.VelcronConstants.components.row) {
|
|
189
191
|
const flexDefinition = definition;
|
|
@@ -221,25 +223,25 @@ class VelcronStyles {
|
|
|
221
223
|
}
|
|
222
224
|
if (flexDefinition.position) {
|
|
223
225
|
const spacing = renderCtx.theming.get.spacing();
|
|
224
|
-
this.applySpacingStyles(flexDefinition.position, renderCtx, styleBase, spacing, "", (pos) => (styleBase
|
|
226
|
+
this.applySpacingStyles(flexDefinition.position, renderCtx, styleBase, spacing, "", (pos) => (styleBase.position = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, pos.type)), {
|
|
225
227
|
position: "type",
|
|
226
228
|
});
|
|
227
229
|
}
|
|
228
230
|
this.applyOverflow(definition, renderCtx, styleBase);
|
|
229
|
-
styleBase
|
|
230
|
-
styleBase
|
|
231
|
-
styleBase
|
|
232
|
-
styleBase
|
|
233
|
-
styleBase
|
|
234
|
-
styleBase
|
|
235
|
-
styleBase
|
|
236
|
-
styleBase
|
|
237
|
-
styleBase
|
|
238
|
-
styleBase
|
|
239
|
-
styleBase
|
|
240
|
-
styleBase
|
|
241
|
-
styleBase
|
|
242
|
-
styleBase
|
|
231
|
+
styleBase.flexDirection = direction;
|
|
232
|
+
styleBase.display = "flex";
|
|
233
|
+
styleBase.flex = "1 1 auto";
|
|
234
|
+
styleBase.flexWrap = wrap ? "wrap" : null;
|
|
235
|
+
styleBase.justifyContent = alignX;
|
|
236
|
+
styleBase.alignItems = alignY;
|
|
237
|
+
styleBase.rowGap = this.unitProvider.formatDimension(gapY);
|
|
238
|
+
styleBase.columnGap = this.unitProvider.formatDimension(gapX);
|
|
239
|
+
styleBase.flexBasis = height ? this.unitProvider.formatDimension(height) : undefined;
|
|
240
|
+
styleBase.width = this.unitProvider.formatDimension(width);
|
|
241
|
+
styleBase.maxWidth = this.unitProvider.formatDimension(width);
|
|
242
|
+
styleBase.minWidth = this.unitProvider.formatDimension(minWidth);
|
|
243
|
+
styleBase.height = this.unitProvider.formatDimension(height);
|
|
244
|
+
styleBase.minHeight = this.unitProvider.formatDimension(minHeight);
|
|
243
245
|
this.insertBackgroundColor(styleBase, flexDefinition, renderCtx);
|
|
244
246
|
}
|
|
245
247
|
if (definition.type === VelcronConstants_1.VelcronConstants.components.column) {
|
|
@@ -257,12 +259,12 @@ class VelcronStyles {
|
|
|
257
259
|
}
|
|
258
260
|
const flexBasis = width ? this.unitProvider.formatDimension(width) : "0px";
|
|
259
261
|
this.applyOverflow(definition, renderCtx, styleBase);
|
|
260
|
-
styleBase
|
|
261
|
-
styleBase
|
|
262
|
-
styleBase
|
|
263
|
-
styleBase
|
|
264
|
-
styleBase
|
|
265
|
-
styleBase
|
|
262
|
+
styleBase.flexBasis = flexBasis;
|
|
263
|
+
styleBase.flexGrow = grow || grow === 0 ? grow : 1;
|
|
264
|
+
styleBase.flexShrink = styleBase.flexGrow;
|
|
265
|
+
styleBase.maxWidth = width ? this.unitProvider.formatDimension(width) : "100%";
|
|
266
|
+
styleBase.alignSelf = yAlignment;
|
|
267
|
+
styleBase.minWidth = this.unitProvider.formatDimension(minWidth);
|
|
266
268
|
this.insertBackgroundColor(styleBase, flexDefinition, renderCtx);
|
|
267
269
|
}
|
|
268
270
|
if (definition.type === VelcronConstants_1.VelcronConstants.components.grid) {
|
|
@@ -276,11 +278,11 @@ class VelcronStyles {
|
|
|
276
278
|
const gapY = gridDefinition.gapY || gridDefinition?.gapY?.toString() === "0"
|
|
277
279
|
? (0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, gridDefinition.gapY), spacingBlueprint)
|
|
278
280
|
: gapX;
|
|
279
|
-
styleBase
|
|
280
|
-
styleBase
|
|
281
|
+
styleBase.display = "grid";
|
|
282
|
+
styleBase.width = "100%";
|
|
281
283
|
if (minWidth) {
|
|
282
284
|
const widthWithDimension = this.unitProvider.formatDimension(minWidth);
|
|
283
|
-
styleBase
|
|
285
|
+
styleBase.gridTemplateColumns = `repeat(auto-fit, minmax(${widthWithDimension}, 1fr))`;
|
|
284
286
|
}
|
|
285
287
|
else if (columns) {
|
|
286
288
|
let templateColumnString = "";
|
|
@@ -295,10 +297,10 @@ class VelcronStyles {
|
|
|
295
297
|
templateColumnString += "1fr ";
|
|
296
298
|
}
|
|
297
299
|
}
|
|
298
|
-
styleBase
|
|
300
|
+
styleBase.gridTemplateColumns = templateColumnString;
|
|
299
301
|
}
|
|
300
|
-
styleBase
|
|
301
|
-
styleBase
|
|
302
|
+
styleBase.rowGap = this.unitProvider.formatDimension(gapY);
|
|
303
|
+
styleBase.columnGap = this.unitProvider.formatDimension(gapX);
|
|
302
304
|
}
|
|
303
305
|
if (definition.border) {
|
|
304
306
|
const typedDefinition = definition;
|
|
@@ -310,7 +312,7 @@ class VelcronStyles {
|
|
|
310
312
|
this.insertBorderRadiusStyles(styleBase, typedDefinition.borderRadius, renderCtx);
|
|
311
313
|
}
|
|
312
314
|
}
|
|
313
|
-
return
|
|
315
|
+
return this.styleProvider(styleBase, definition, renderCtx);
|
|
314
316
|
}
|
|
315
317
|
static applySpacingDimension(value, spacing) {
|
|
316
318
|
return this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(value, spacing));
|