@omnia/velcron 8.0.293-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/actions/Array.js +3 -3
- package/actions/Debounce.js +2 -2
- package/actions/Delay.js +2 -2
- package/actions/Http.js +1 -1
- package/actions/MsGraph.js +2 -2
- package/actions/MsSharePoint.js +2 -2
- package/internal-do-not-import-from-here/shared/models/theming/Blueprints.d.ts +10 -6
- package/internal-do-not-import-from-here/shared/models/theming/ThemeDefinitionV2.d.ts +3 -1
- package/internal-do-not-import-from-here/shared/models/theming/ThemingBase.d.ts +14 -0
- package/internal-do-not-import-from-here/shared/models/theming/ThemingBase.js +12 -0
- package/internal-do-not-import-from-here/shared/models/theming/ThemingDefinitionV3.d.ts +44 -0
- package/internal-do-not-import-from-here/shared/models/theming/ThemingDefinitionV3.js +6 -0
- package/internal-do-not-import-from-here/shared/models/theming/Typography.d.ts +28 -2
- package/internal-do-not-import-from-here/shared/models/theming/Typography.js +6 -1
- package/internal-do-not-import-from-here/shared/models/theming/index.d.ts +2 -0
- package/internal-do-not-import-from-here/shared/models/theming/index.js +2 -0
- package/internal-do-not-import-from-here/shared/models/velcron/VelcronDefinition.d.ts +8 -2
- package/models/VelcronDefinitions.d.ts +47 -19
- package/models/VelcronTypes.d.ts +7 -0
- package/package.json +1 -1
- package/parser/VelcronActions.d.ts +0 -2
- package/parser/VelcronActions.js +1 -27
- package/parser/VelcronData.d.ts +2 -1
- package/parser/VelcronData.js +165 -56
- package/parser/VelcronDataBinder.d.ts +13 -0
- package/parser/VelcronDataBinder.js +155 -0
- package/parser/VelcronRenderers.js +1 -1
- package/parser/VelcronStyles.d.ts +7 -6
- package/parser/VelcronStyles.js +208 -215
- package/parser/index.d.ts +1 -0
- package/parser/index.js +1 -0
- package/stores/VelcronTheming.d.ts +4 -4
- package/stores/VelcronTheming.js +2 -2
package/parser/VelcronStyles.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.VelcronStyles = void 0;
|
|
4
|
-
const
|
|
4
|
+
const VelcronDataBinder_1 = require("./VelcronDataBinder");
|
|
5
5
|
const VelcronConstants_1 = require("./VelcronConstants");
|
|
6
6
|
const __1 = require("..");
|
|
7
7
|
class VelcronStyles {
|
|
@@ -16,285 +16,277 @@ class VelcronStyles {
|
|
|
16
16
|
VelcronStyles.effectsProvider = fn;
|
|
17
17
|
}
|
|
18
18
|
static applyEffects(definition, renderCtx, applyTo) {
|
|
19
|
-
return definition?.effects
|
|
19
|
+
return definition?.effects
|
|
20
|
+
? applyTo(VelcronStyles.effectsProvider(definition.effects, renderCtx))
|
|
21
|
+
: null;
|
|
20
22
|
}
|
|
21
23
|
static insertBackgroundColor(styleBase, color, renderCtx) {
|
|
22
24
|
if (!color) {
|
|
23
25
|
return;
|
|
24
26
|
}
|
|
25
|
-
|
|
27
|
+
const filled = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, color.filled);
|
|
28
|
+
const toned = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, color.toned);
|
|
29
|
+
const colorType = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, color.colorType);
|
|
30
|
+
if (filled && !color?.blueprint) {
|
|
26
31
|
let colorValue = undefined;
|
|
27
|
-
if (
|
|
28
|
-
|
|
29
|
-
colorValue = renderCtx.colors.state[color.colorType];
|
|
32
|
+
if (colorType) {
|
|
33
|
+
colorValue = renderCtx.colors.state[colorType];
|
|
30
34
|
}
|
|
31
35
|
else {
|
|
32
36
|
colorValue = renderCtx.colors.get.base;
|
|
33
37
|
}
|
|
34
38
|
if (colorValue) {
|
|
35
|
-
styleBase
|
|
36
|
-
//styleBase["backgroundColor"] = colorValue.colorToned;
|
|
39
|
+
styleBase.backgroundColor = toned ? colorValue.colorToned : colorValue.color;
|
|
37
40
|
}
|
|
38
|
-
//styleBase["backgroundColor"] = renderCtx.colors.get.base.color;
|
|
39
41
|
}
|
|
40
|
-
// if(definition.opacity || definition.opacity === 0){
|
|
41
|
-
// if(definition.opacity === 0){
|
|
42
|
-
// styleBase["backgroundColor"] = undefined;
|
|
43
|
-
// }
|
|
44
|
-
// else{
|
|
45
|
-
// styleBase["backgroundColor"] = useOpacityOnColor(styleBase["backgroundColor"],definition.opacity / 100);
|
|
46
|
-
// }
|
|
47
|
-
// }
|
|
48
42
|
}
|
|
49
|
-
static insertBorderRadiusStyles(styleBase, settings) {
|
|
43
|
+
static insertBorderRadiusStyles(styleBase, settings, renderCtx) {
|
|
50
44
|
if (!settings) {
|
|
51
45
|
return;
|
|
52
46
|
}
|
|
53
|
-
|
|
54
|
-
|
|
47
|
+
const top = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, settings.top);
|
|
48
|
+
const right = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, settings.right);
|
|
49
|
+
const bottom = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, settings.bottom);
|
|
50
|
+
const left = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, settings.left);
|
|
51
|
+
if (top || top === 0) {
|
|
52
|
+
styleBase.borderTopLeftRadius = this.unitProvider.formatDimension(top);
|
|
55
53
|
}
|
|
56
|
-
if (
|
|
57
|
-
styleBase
|
|
54
|
+
if (right || right === 0) {
|
|
55
|
+
styleBase.borderTopRightRadius = this.unitProvider.formatDimension(right);
|
|
58
56
|
}
|
|
59
|
-
if (
|
|
60
|
-
styleBase
|
|
57
|
+
if (bottom || bottom === 0) {
|
|
58
|
+
styleBase.borderBottomRightRadius = this.unitProvider.formatDimension(bottom);
|
|
61
59
|
}
|
|
62
|
-
if (
|
|
63
|
-
styleBase
|
|
60
|
+
if (left || left === 0) {
|
|
61
|
+
styleBase.borderBottomLeftRadius = this.unitProvider.formatDimension(left);
|
|
64
62
|
}
|
|
65
63
|
}
|
|
66
64
|
static insertBorderStyles(styleBase, borderSettings, renderCtx) {
|
|
67
65
|
if (!borderSettings) {
|
|
68
66
|
return;
|
|
69
67
|
}
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
68
|
+
const toned = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, borderSettings.toned);
|
|
69
|
+
const colorType = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, borderSettings.colorType);
|
|
70
|
+
const opacity = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, borderSettings.opacity);
|
|
71
|
+
let borderColor = toned
|
|
72
|
+
? renderCtx.colors.get[colorType]?.colorToned
|
|
73
|
+
: renderCtx.colors.get[colorType]?.color;
|
|
74
|
+
if (opacity) {
|
|
75
|
+
borderColor = renderCtx.colors.get.base.dark
|
|
76
|
+
? `rgba(255,255,255,${opacity})`
|
|
77
|
+
: `rgba(0,0,0,${opacity})`;
|
|
75
78
|
}
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
+
const top = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, borderSettings.top);
|
|
80
|
+
const right = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, borderSettings.right);
|
|
81
|
+
const bottom = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, borderSettings.bottom);
|
|
82
|
+
const left = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, borderSettings.left);
|
|
83
|
+
const width = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, borderSettings.width);
|
|
84
|
+
if (top || top === 0) {
|
|
85
|
+
styleBase.borderTopStyle = "solid";
|
|
86
|
+
styleBase.borderTopColor = borderColor;
|
|
79
87
|
}
|
|
80
|
-
if (
|
|
81
|
-
styleBase
|
|
82
|
-
styleBase
|
|
88
|
+
if (right || right === 0) {
|
|
89
|
+
styleBase.borderRightStyle = "solid";
|
|
90
|
+
styleBase.borderRightColor = borderColor;
|
|
83
91
|
}
|
|
84
|
-
if (
|
|
85
|
-
styleBase
|
|
86
|
-
styleBase
|
|
92
|
+
if (bottom || bottom === 0) {
|
|
93
|
+
styleBase.borderBottomStyle = "solid";
|
|
94
|
+
styleBase.borderBottomColor = borderColor;
|
|
87
95
|
}
|
|
88
|
-
if (
|
|
89
|
-
styleBase
|
|
90
|
-
styleBase
|
|
96
|
+
if (left || left === 0) {
|
|
97
|
+
styleBase.borderLeftStyle = "solid";
|
|
98
|
+
styleBase.borderLeftColor = borderColor;
|
|
91
99
|
}
|
|
92
|
-
styleBase
|
|
100
|
+
styleBase.borderWidth = width
|
|
101
|
+
? this.unitProvider.formatDimension(width)
|
|
102
|
+
: this.unitProvider.formatDimension(1);
|
|
93
103
|
}
|
|
94
104
|
static create(definition, renderCtx) {
|
|
95
105
|
if (!definition) {
|
|
96
106
|
return null;
|
|
97
107
|
}
|
|
98
108
|
const styleBase = { ...definition.style };
|
|
99
|
-
/**Generic styling */
|
|
109
|
+
/** Generic styling */
|
|
100
110
|
if (definition.margin) {
|
|
101
|
-
const margin =
|
|
111
|
+
const margin = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, definition.margin);
|
|
102
112
|
const spacing = renderCtx.theming.get.spacing();
|
|
103
113
|
if (typeof margin === "object") {
|
|
104
|
-
styleBase
|
|
105
|
-
styleBase
|
|
106
|
-
styleBase
|
|
107
|
-
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));
|
|
108
118
|
}
|
|
109
119
|
else {
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
styleBase
|
|
113
|
-
styleBase
|
|
114
|
-
styleBase
|
|
115
|
-
styleBase["marginLeft"] = value;
|
|
120
|
+
const value = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, margin), spacing));
|
|
121
|
+
styleBase.marginTop = value;
|
|
122
|
+
styleBase.marginRight = value;
|
|
123
|
+
styleBase.marginBottom = value;
|
|
124
|
+
styleBase.marginLeft = value;
|
|
116
125
|
}
|
|
117
126
|
}
|
|
118
127
|
if (definition.padding) {
|
|
119
|
-
const padding =
|
|
128
|
+
const padding = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, definition.padding);
|
|
120
129
|
const spacing = renderCtx.theming.get.spacing();
|
|
121
130
|
if (typeof padding === "object") {
|
|
122
|
-
styleBase
|
|
123
|
-
styleBase
|
|
124
|
-
styleBase
|
|
125
|
-
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));
|
|
126
135
|
}
|
|
127
136
|
else {
|
|
128
|
-
const value = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(
|
|
129
|
-
styleBase
|
|
130
|
-
styleBase
|
|
131
|
-
styleBase
|
|
132
|
-
styleBase
|
|
137
|
+
const value = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, padding), spacing));
|
|
138
|
+
styleBase.paddingTop = value;
|
|
139
|
+
styleBase.paddingRight = value;
|
|
140
|
+
styleBase.paddingBottom = value;
|
|
141
|
+
styleBase.paddingLeft = value;
|
|
133
142
|
}
|
|
134
143
|
}
|
|
135
144
|
if (definition.type === VelcronConstants_1.VelcronConstants.components.velcron) {
|
|
136
|
-
|
|
145
|
+
const appDefinition = definition;
|
|
146
|
+
this.applyOverflow(appDefinition, renderCtx, styleBase);
|
|
147
|
+
this.insertBackgroundColor(styleBase, appDefinition, renderCtx);
|
|
137
148
|
}
|
|
138
149
|
if (definition.type === VelcronConstants_1.VelcronConstants.components.image) {
|
|
139
150
|
const imageDefinition = definition;
|
|
140
|
-
// if
|
|
141
|
-
// const settings = renderCtx.theming.state.currentTheme.blueprints.default.image.borderRadius;
|
|
142
|
-
// this.insertBorderRadiusStyles(styleBase,settings);
|
|
143
|
-
// }
|
|
144
|
-
// if (styleBase.width) {
|
|
145
|
-
// styleBase.width = this.unitProvider.formatDimension(200);
|
|
146
|
-
// }
|
|
147
|
-
// if (!styleBase.height) {
|
|
148
|
-
// styleBase.height = this.unitProvider.formatDimension(400);
|
|
149
|
-
// }
|
|
151
|
+
// Data binding can be applied here if necessary
|
|
150
152
|
}
|
|
151
153
|
if (definition.type === VelcronConstants_1.VelcronConstants.components.card) {
|
|
152
154
|
const cardDefinition = definition;
|
|
153
|
-
// if
|
|
154
|
-
// const settings = renderCtx.theming.state.currentTheme.blueprints.default.card.borderRadius;
|
|
155
|
-
// this.insertBorderRadiusStyles(styleBase,settings);
|
|
156
|
-
// }
|
|
157
|
-
// if(renderCtx.theming.state.currentTheme.blueprints.default.card?.border){
|
|
158
|
-
// const settings = renderCtx.theming.state.currentTheme.blueprints.default.card.border;
|
|
159
|
-
// this.insertBorderStyles(styleBase,settings,renderCtx);
|
|
160
|
-
// }
|
|
161
|
-
//this.insertBackgroundColor(styleBase, cardDefinition.color, renderCtx);
|
|
155
|
+
// Data binding can be applied here if necessary
|
|
162
156
|
}
|
|
163
|
-
|
|
157
|
+
if (definition.type === VelcronConstants_1.VelcronConstants.components.text) {
|
|
164
158
|
const textDefinition = definition;
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
159
|
+
const colorType = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, textDefinition.colorType);
|
|
160
|
+
const toned = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, textDefinition.toned);
|
|
161
|
+
const noWrap = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, textDefinition.noWrap);
|
|
162
|
+
let color;
|
|
163
|
+
if (colorType) {
|
|
164
|
+
color = renderCtx.colors.get[colorType];
|
|
170
165
|
}
|
|
171
166
|
else {
|
|
172
|
-
|
|
167
|
+
color = renderCtx.colors.get.onBase;
|
|
173
168
|
}
|
|
174
|
-
if (
|
|
175
|
-
styleBase
|
|
169
|
+
if (color) {
|
|
170
|
+
styleBase.color = toned ? color.colorToned : color.color + "!important";
|
|
171
|
+
}
|
|
172
|
+
if (noWrap) {
|
|
173
|
+
styleBase.whiteSpace = "nowrap";
|
|
176
174
|
}
|
|
177
175
|
}
|
|
178
|
-
|
|
176
|
+
if (definition.type === VelcronConstants_1.VelcronConstants.components.flex) {
|
|
179
177
|
const flexDefinition = definition;
|
|
180
|
-
// styleBase["position"] = "absolute";
|
|
181
|
-
styleBase["width"] = "100%";
|
|
182
|
-
styleBase["boxSizing"] = "border-box";
|
|
183
178
|
this.applyOverflow(definition, renderCtx, styleBase);
|
|
184
179
|
this.insertBackgroundColor(styleBase, flexDefinition, renderCtx);
|
|
185
|
-
const width =
|
|
186
|
-
const minWidth =
|
|
187
|
-
const height =
|
|
188
|
-
const minHeight =
|
|
189
|
-
styleBase
|
|
190
|
-
styleBase
|
|
191
|
-
styleBase
|
|
192
|
-
styleBase
|
|
193
|
-
styleBase
|
|
180
|
+
const width = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.width);
|
|
181
|
+
const minWidth = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.minWidth);
|
|
182
|
+
const height = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.height);
|
|
183
|
+
const minHeight = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.minHeight);
|
|
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);
|
|
194
189
|
}
|
|
195
|
-
|
|
190
|
+
if (definition.type === VelcronConstants_1.VelcronConstants.components.row) {
|
|
196
191
|
const flexDefinition = definition;
|
|
197
192
|
const spacingBlueprint = renderCtx.theming.get.spacing();
|
|
193
|
+
const gapX = flexDefinition.gapX || flexDefinition?.gapX?.toString() === "0"
|
|
194
|
+
? (0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.gapX), spacingBlueprint)
|
|
195
|
+
: (0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.gapY), spacingBlueprint);
|
|
196
|
+
const gapY = flexDefinition.gapY || flexDefinition?.gapY?.toString() === "0"
|
|
197
|
+
? (0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.gapY), spacingBlueprint)
|
|
198
|
+
: gapX;
|
|
199
|
+
const width = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.width);
|
|
200
|
+
const minWidth = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.minWidth);
|
|
201
|
+
const height = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.height);
|
|
202
|
+
const minHeight = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.minHeight);
|
|
203
|
+
const alignXProp = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.alignX);
|
|
204
|
+
const alignYProp = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.alignY);
|
|
205
|
+
const direction = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.direction);
|
|
206
|
+
const wrap = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.wrap);
|
|
198
207
|
let alignX = null;
|
|
199
208
|
let alignY = null;
|
|
200
|
-
if (
|
|
201
|
-
|
|
209
|
+
if (alignXProp === "right") {
|
|
210
|
+
alignX = "flex-end";
|
|
211
|
+
}
|
|
212
|
+
else if (alignXProp === "center") {
|
|
213
|
+
alignX = "center";
|
|
214
|
+
}
|
|
215
|
+
if (alignYProp === "center") {
|
|
216
|
+
alignY = "center";
|
|
217
|
+
}
|
|
218
|
+
else if (alignYProp === "bottom") {
|
|
219
|
+
alignY = "flex-end";
|
|
220
|
+
}
|
|
221
|
+
else {
|
|
222
|
+
alignY = "stretch";
|
|
202
223
|
}
|
|
203
|
-
//const testing = getSpacingValueFromBlueprint(VelcronData.dataBind(renderCtx, flexDefinition.gapX), spacing);
|
|
204
|
-
const gapX = flexDefinition.gapX || flexDefinition?.gapX?.toString() === "0" ?
|
|
205
|
-
(0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.gapX), spacingBlueprint) :
|
|
206
|
-
(0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.gapY), spacingBlueprint);
|
|
207
|
-
const gapY = flexDefinition.gapY || flexDefinition?.gapY?.toString() === "0" ?
|
|
208
|
-
(0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.gapY), spacingBlueprint) :
|
|
209
|
-
gapX;
|
|
210
|
-
const width = VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.width);
|
|
211
|
-
const minWidth = VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.minWidth);
|
|
212
|
-
const height = VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.height);
|
|
213
|
-
const minHeight = VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.minHeight);
|
|
214
224
|
if (flexDefinition.position) {
|
|
215
225
|
const spacing = renderCtx.theming.get.spacing();
|
|
216
|
-
this.applySpacingStyles(flexDefinition.position, renderCtx, styleBase, spacing, "", (pos) => styleBase
|
|
217
|
-
|
|
226
|
+
this.applySpacingStyles(flexDefinition.position, renderCtx, styleBase, spacing, "", (pos) => (styleBase.position = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, pos.type)), {
|
|
227
|
+
position: "type",
|
|
218
228
|
});
|
|
219
229
|
}
|
|
220
|
-
if (flexDefinition.alignX) {
|
|
221
|
-
if (VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.alignX) === "right") {
|
|
222
|
-
alignX = "flex-end";
|
|
223
|
-
}
|
|
224
|
-
else if (VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.alignX) === "center") {
|
|
225
|
-
alignX = "center";
|
|
226
|
-
}
|
|
227
|
-
}
|
|
228
|
-
if (flexDefinition.alignY) {
|
|
229
|
-
if (VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.alignY) === "center") {
|
|
230
|
-
alignY = "center";
|
|
231
|
-
}
|
|
232
|
-
else if (VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.alignY) === "bottom") {
|
|
233
|
-
alignY = "flex-end";
|
|
234
|
-
}
|
|
235
|
-
else {
|
|
236
|
-
alignY = "stretch";
|
|
237
|
-
}
|
|
238
|
-
}
|
|
239
230
|
this.applyOverflow(definition, renderCtx, styleBase);
|
|
240
|
-
styleBase
|
|
241
|
-
styleBase
|
|
242
|
-
styleBase
|
|
243
|
-
styleBase
|
|
244
|
-
styleBase
|
|
245
|
-
styleBase
|
|
246
|
-
styleBase
|
|
247
|
-
styleBase
|
|
248
|
-
styleBase
|
|
249
|
-
styleBase
|
|
250
|
-
styleBase
|
|
251
|
-
styleBase
|
|
252
|
-
styleBase
|
|
253
|
-
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);
|
|
254
245
|
this.insertBackgroundColor(styleBase, flexDefinition, renderCtx);
|
|
255
246
|
}
|
|
256
|
-
|
|
247
|
+
if (definition.type === VelcronConstants_1.VelcronConstants.components.column) {
|
|
257
248
|
const flexDefinition = definition;
|
|
249
|
+
const width = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.width);
|
|
250
|
+
const minWidth = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.minWidth);
|
|
251
|
+
const grow = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.grow);
|
|
252
|
+
const alignYProp = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.alignY);
|
|
258
253
|
let yAlignment = null;
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
}
|
|
265
|
-
else if (flexDefinition.alignY === "bottom") {
|
|
266
|
-
yAlignment = "end";
|
|
267
|
-
}
|
|
254
|
+
if (alignYProp === "center") {
|
|
255
|
+
yAlignment = "center";
|
|
256
|
+
}
|
|
257
|
+
else if (alignYProp === "bottom") {
|
|
258
|
+
yAlignment = "end";
|
|
268
259
|
}
|
|
269
|
-
const flexBasis =
|
|
270
|
-
undefined;
|
|
260
|
+
const flexBasis = width ? this.unitProvider.formatDimension(width) : "0px";
|
|
271
261
|
this.applyOverflow(definition, renderCtx, styleBase);
|
|
272
|
-
styleBase
|
|
273
|
-
styleBase
|
|
274
|
-
styleBase
|
|
275
|
-
styleBase
|
|
276
|
-
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);
|
|
277
268
|
this.insertBackgroundColor(styleBase, flexDefinition, renderCtx);
|
|
278
269
|
}
|
|
279
|
-
|
|
270
|
+
if (definition.type === VelcronConstants_1.VelcronConstants.components.grid) {
|
|
280
271
|
const spacingBlueprint = renderCtx.theming.get.spacing();
|
|
281
|
-
const
|
|
282
|
-
const columns =
|
|
283
|
-
const minWidth =
|
|
284
|
-
const gapX =
|
|
285
|
-
(0, __1.getSpacingValueFromBlueprint)(
|
|
286
|
-
(0, __1.getSpacingValueFromBlueprint)(
|
|
287
|
-
const gapY =
|
|
288
|
-
(0, __1.getSpacingValueFromBlueprint)(
|
|
289
|
-
gapX;
|
|
290
|
-
styleBase
|
|
272
|
+
const gridDefinition = definition;
|
|
273
|
+
const columns = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, gridDefinition.columns);
|
|
274
|
+
const minWidth = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, gridDefinition.minColumnWidth);
|
|
275
|
+
const gapX = gridDefinition.gapX || gridDefinition?.gapX?.toString() === "0"
|
|
276
|
+
? (0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, gridDefinition.gapX), spacingBlueprint)
|
|
277
|
+
: (0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, gridDefinition.gapY), spacingBlueprint);
|
|
278
|
+
const gapY = gridDefinition.gapY || gridDefinition?.gapY?.toString() === "0"
|
|
279
|
+
? (0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, gridDefinition.gapY), spacingBlueprint)
|
|
280
|
+
: gapX;
|
|
281
|
+
styleBase.display = "grid";
|
|
282
|
+
styleBase.width = "100%";
|
|
291
283
|
if (minWidth) {
|
|
292
284
|
const widthWithDimension = this.unitProvider.formatDimension(minWidth);
|
|
293
|
-
styleBase
|
|
285
|
+
styleBase.gridTemplateColumns = `repeat(auto-fit, minmax(${widthWithDimension}, 1fr))`;
|
|
294
286
|
}
|
|
295
287
|
else if (columns) {
|
|
296
288
|
let templateColumnString = "";
|
|
297
|
-
if (
|
|
289
|
+
if (__1.VelcronData.isArray(columns)) {
|
|
298
290
|
columns.forEach((col) => {
|
|
299
291
|
templateColumnString += `${col} `;
|
|
300
292
|
});
|
|
@@ -305,10 +297,10 @@ class VelcronStyles {
|
|
|
305
297
|
templateColumnString += "1fr ";
|
|
306
298
|
}
|
|
307
299
|
}
|
|
308
|
-
styleBase
|
|
300
|
+
styleBase.gridTemplateColumns = templateColumnString;
|
|
309
301
|
}
|
|
310
|
-
styleBase
|
|
311
|
-
styleBase
|
|
302
|
+
styleBase.rowGap = this.unitProvider.formatDimension(gapY);
|
|
303
|
+
styleBase.columnGap = this.unitProvider.formatDimension(gapX);
|
|
312
304
|
}
|
|
313
305
|
if (definition.border) {
|
|
314
306
|
const typedDefinition = definition;
|
|
@@ -317,56 +309,57 @@ class VelcronStyles {
|
|
|
317
309
|
if (definition.borderRadius) {
|
|
318
310
|
const typedDefinition = definition;
|
|
319
311
|
if (typedDefinition.borderRadius) {
|
|
320
|
-
this.insertBorderRadiusStyles(styleBase, typedDefinition.borderRadius);
|
|
312
|
+
this.insertBorderRadiusStyles(styleBase, typedDefinition.borderRadius, renderCtx);
|
|
321
313
|
}
|
|
322
314
|
}
|
|
323
|
-
return
|
|
315
|
+
return this.styleProvider(styleBase, definition, renderCtx);
|
|
324
316
|
}
|
|
325
317
|
static applySpacingDimension(value, spacing) {
|
|
326
318
|
return this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(value, spacing));
|
|
327
319
|
}
|
|
328
320
|
static applyOverflow(definition, renderCtx, styleBase) {
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
styleBase["overflowY"] = VelcronData_1.VelcronData.dataBind(renderCtx, definition.overflowY);
|
|
337
|
-
}
|
|
321
|
+
const overflowProps = ["overflow", "overflowX", "overflowY"];
|
|
322
|
+
overflowProps.forEach((prop) => {
|
|
323
|
+
const propValue = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, definition[prop]);
|
|
324
|
+
if (propValue) {
|
|
325
|
+
styleBase[prop] = propValue;
|
|
326
|
+
}
|
|
327
|
+
});
|
|
338
328
|
}
|
|
339
329
|
static applySpacingStyles(spacing, renderCtx, styleBase, spacingDef, styleType, objectIsDatabound, additionalPropsToDataBind) {
|
|
340
330
|
const properties = ["top", "right", "bottom", "left"];
|
|
341
|
-
if (
|
|
342
|
-
|
|
343
|
-
const dataBound = VelcronData_1.VelcronData.dataBind(renderCtx, spacing);
|
|
331
|
+
if (__1.VelcronData.isBindable(spacing)) {
|
|
332
|
+
const dataBound = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, spacing);
|
|
344
333
|
objectIsDatabound?.(dataBound);
|
|
345
|
-
properties.forEach(prop => {
|
|
334
|
+
properties.forEach((prop) => {
|
|
346
335
|
if (dataBound?.[prop]) {
|
|
347
|
-
const styleName = styleType?.length > 0
|
|
336
|
+
const styleName = styleType?.length > 0
|
|
337
|
+
? `${styleType}${prop.charAt(0).toUpperCase() + prop.slice(1)}`
|
|
338
|
+
: prop;
|
|
348
339
|
styleBase[styleName] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(dataBound[prop], spacingDef));
|
|
349
340
|
}
|
|
350
341
|
});
|
|
351
342
|
}
|
|
352
343
|
else {
|
|
353
|
-
properties.forEach(prop => {
|
|
354
|
-
//Each property is databound
|
|
344
|
+
properties.forEach((prop) => {
|
|
355
345
|
if (spacing?.[prop]) {
|
|
356
|
-
const styleName = styleType?.length > 0
|
|
357
|
-
|
|
346
|
+
const styleName = styleType?.length > 0
|
|
347
|
+
? `${styleType}${prop.charAt(0).toUpperCase() + prop.slice(1)}`
|
|
348
|
+
: prop;
|
|
349
|
+
styleBase[styleName] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, spacing[prop]), spacingDef));
|
|
358
350
|
}
|
|
359
351
|
});
|
|
360
|
-
additionalPropsToDataBind &&
|
|
361
|
-
|
|
362
|
-
|
|
352
|
+
additionalPropsToDataBind &&
|
|
353
|
+
Object.keys(additionalPropsToDataBind).forEach((key) => {
|
|
354
|
+
styleBase[key] = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, spacing[additionalPropsToDataBind[key]]);
|
|
355
|
+
});
|
|
363
356
|
}
|
|
364
357
|
}
|
|
365
358
|
static dataBindStyles(styles, renderCtx) {
|
|
366
359
|
Object.keys(styles).forEach((key) => {
|
|
367
360
|
const style = styles[key];
|
|
368
|
-
if (style &&
|
|
369
|
-
styles[key] =
|
|
361
|
+
if (style && __1.VelcronData.isString(style)) {
|
|
362
|
+
styles[key] = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, style);
|
|
370
363
|
}
|
|
371
364
|
});
|
|
372
365
|
return styles;
|
package/parser/index.d.ts
CHANGED
package/parser/index.js
CHANGED
|
@@ -9,3 +9,4 @@ tslib_1.__exportStar(require("./VelcronLogger"), exports);
|
|
|
9
9
|
tslib_1.__exportStar(require("./VelcronRenderers"), exports);
|
|
10
10
|
tslib_1.__exportStar(require("./TextValue"), exports);
|
|
11
11
|
tslib_1.__exportStar(require("./VelcronPropertyEditors"), exports);
|
|
12
|
+
tslib_1.__exportStar(require("./VelcronDataBinder"), exports);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { ColorSchemaType, ColorSchemaTypes, ColorType, ColorTypes, ContainerBlueprint, ContainerVariant,
|
|
1
|
+
import { ColorSchemaType, ColorSchemaTypes, ColorType, ColorTypes, ContainerBlueprint, ContainerVariant, ResolvedThemeDefinition, TypographySize, TypographySizes, TypographyType, TypographyTypes } from "..";
|
|
2
2
|
export declare const useVelcronThemingStore: (newStateWithName?: string) => {
|
|
3
3
|
state: {
|
|
4
|
-
currentTheme:
|
|
4
|
+
currentTheme: ResolvedThemeDefinition;
|
|
5
5
|
};
|
|
6
6
|
get: {
|
|
7
7
|
componentBlueprints: () => void;
|
|
@@ -14,9 +14,9 @@ export declare const useVelcronThemingStore: (newStateWithName?: string) => {
|
|
|
14
14
|
complementaryColorType: (colorType: ColorTypes | ColorType) => ColorTypes;
|
|
15
15
|
complementaryColor: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: ColorTypes | ColorType) => string;
|
|
16
16
|
complementaryColorDefinition: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: ColorTypes | ColorType) => import("..").ColorDefinition;
|
|
17
|
-
currentTheme: () =>
|
|
17
|
+
currentTheme: () => ResolvedThemeDefinition;
|
|
18
18
|
};
|
|
19
19
|
actions: {
|
|
20
|
-
setTheme(newTheme:
|
|
20
|
+
setTheme(newTheme: ResolvedThemeDefinition): void;
|
|
21
21
|
};
|
|
22
22
|
};
|
package/stores/VelcronTheming.js
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useVelcronThemingStore = void 0;
|
|
4
4
|
const __1 = require("..");
|
|
5
|
-
const
|
|
6
|
-
exports.useVelcronThemingStore = (0,
|
|
5
|
+
const VelcronStore_1 = require("./VelcronStore");
|
|
6
|
+
exports.useVelcronThemingStore = (0, VelcronStore_1.defineVelcronStore)("VelcronTheming", {
|
|
7
7
|
setup() {
|
|
8
8
|
return {
|
|
9
9
|
state: {
|