@omnia/velcron 8.0.292-dev → 8.0.295-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/models/VelcronDefinitions.d.ts +34 -2
- 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 +154 -0
- package/parser/VelcronRenderers.js +1 -1
- package/parser/VelcronStyles.d.ts +1 -1
- package/parser/VelcronStyles.js +165 -174
- 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,99 +16,108 @@ 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["backgroundColor"] =
|
|
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["borderTopRightRadius"] = this.unitProvider.formatDimension(
|
|
54
|
+
if (right || right === 0) {
|
|
55
|
+
styleBase["borderTopRightRadius"] = this.unitProvider.formatDimension(right);
|
|
58
56
|
}
|
|
59
|
-
if (
|
|
60
|
-
styleBase["borderBottomRightRadius"] = this.unitProvider.formatDimension(
|
|
57
|
+
if (bottom || bottom === 0) {
|
|
58
|
+
styleBase["borderBottomRightRadius"] = this.unitProvider.formatDimension(bottom);
|
|
61
59
|
}
|
|
62
|
-
if (
|
|
63
|
-
styleBase["borderBottomLeftRadius"] = this.unitProvider.formatDimension(
|
|
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
|
-
|
|
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) {
|
|
77
85
|
styleBase["borderTopStyle"] = "solid";
|
|
78
86
|
styleBase["borderTopColor"] = borderColor;
|
|
79
87
|
}
|
|
80
|
-
if (
|
|
88
|
+
if (right || right === 0) {
|
|
81
89
|
styleBase["borderRightStyle"] = "solid";
|
|
82
90
|
styleBase["borderRightColor"] = borderColor;
|
|
83
91
|
}
|
|
84
|
-
if (
|
|
92
|
+
if (bottom || bottom === 0) {
|
|
85
93
|
styleBase["borderBottomStyle"] = "solid";
|
|
86
94
|
styleBase["borderBottomColor"] = borderColor;
|
|
87
95
|
}
|
|
88
|
-
if (
|
|
96
|
+
if (left || left === 0) {
|
|
89
97
|
styleBase["borderLeftStyle"] = "solid";
|
|
90
98
|
styleBase["borderLeftColor"] = borderColor;
|
|
91
99
|
}
|
|
92
|
-
styleBase["borderWidth"] =
|
|
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["marginTop"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(
|
|
105
|
-
styleBase["marginRight"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(
|
|
106
|
-
styleBase["marginBottom"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(
|
|
107
|
-
styleBase["marginLeft"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(
|
|
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
|
-
const value = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, margin), spacing));
|
|
120
|
+
const value = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, margin), spacing));
|
|
112
121
|
styleBase["marginTop"] = value;
|
|
113
122
|
styleBase["marginRight"] = value;
|
|
114
123
|
styleBase["marginBottom"] = value;
|
|
@@ -116,16 +125,16 @@ class VelcronStyles {
|
|
|
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["paddingTop"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(
|
|
123
|
-
styleBase["paddingRight"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(
|
|
124
|
-
styleBase["paddingBottom"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(
|
|
125
|
-
styleBase["paddingLeft"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(
|
|
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)(
|
|
137
|
+
const value = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, padding), spacing));
|
|
129
138
|
styleBase["paddingTop"] = value;
|
|
130
139
|
styleBase["paddingRight"] = value;
|
|
131
140
|
styleBase["paddingBottom"] = value;
|
|
@@ -137,115 +146,95 @@ class VelcronStyles {
|
|
|
137
146
|
}
|
|
138
147
|
if (definition.type === VelcronConstants_1.VelcronConstants.components.image) {
|
|
139
148
|
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
|
-
// }
|
|
149
|
+
// Data binding can be applied here if necessary
|
|
150
150
|
}
|
|
151
151
|
if (definition.type === VelcronConstants_1.VelcronConstants.components.card) {
|
|
152
152
|
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);
|
|
153
|
+
// Data binding can be applied here if necessary
|
|
162
154
|
}
|
|
163
|
-
|
|
155
|
+
if (definition.type === VelcronConstants_1.VelcronConstants.components.text) {
|
|
164
156
|
const textDefinition = definition;
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
157
|
+
const colorType = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, textDefinition.colorType);
|
|
158
|
+
const toned = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, textDefinition.toned);
|
|
159
|
+
const noWrap = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, textDefinition.noWrap);
|
|
160
|
+
let color;
|
|
161
|
+
if (colorType) {
|
|
162
|
+
color = renderCtx.colors.get[colorType];
|
|
170
163
|
}
|
|
171
164
|
else {
|
|
172
|
-
|
|
165
|
+
color = renderCtx.colors.get.onBase;
|
|
166
|
+
}
|
|
167
|
+
if (color) {
|
|
168
|
+
styleBase["color"] = toned ? color.colorToned : color.color + "!important";
|
|
173
169
|
}
|
|
174
|
-
if (
|
|
175
|
-
styleBase["
|
|
170
|
+
if (noWrap) {
|
|
171
|
+
styleBase["whiteSpace"] = "nowrap";
|
|
176
172
|
}
|
|
177
173
|
}
|
|
178
|
-
|
|
174
|
+
if (definition.type === VelcronConstants_1.VelcronConstants.components.flex) {
|
|
179
175
|
const flexDefinition = definition;
|
|
180
|
-
// styleBase["position"] = "absolute";
|
|
181
|
-
styleBase["width"] = "100%";
|
|
182
|
-
styleBase["boxSizing"] = "border-box";
|
|
183
176
|
this.applyOverflow(definition, renderCtx, styleBase);
|
|
184
177
|
this.insertBackgroundColor(styleBase, flexDefinition, renderCtx);
|
|
185
|
-
const width =
|
|
186
|
-
const minWidth =
|
|
187
|
-
const height =
|
|
188
|
-
const minHeight =
|
|
178
|
+
const width = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.width);
|
|
179
|
+
const minWidth = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.minWidth);
|
|
180
|
+
const height = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.height);
|
|
181
|
+
const minHeight = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.minHeight);
|
|
189
182
|
styleBase["width"] = this.unitProvider.formatDimension(width);
|
|
190
183
|
styleBase["maxWidth"] = this.unitProvider.formatDimension(width);
|
|
191
184
|
styleBase["minWidth"] = this.unitProvider.formatDimension(minWidth);
|
|
192
185
|
styleBase["height"] = this.unitProvider.formatDimension(height);
|
|
193
186
|
styleBase["minHeight"] = this.unitProvider.formatDimension(minHeight);
|
|
194
187
|
}
|
|
195
|
-
|
|
188
|
+
if (definition.type === VelcronConstants_1.VelcronConstants.components.row) {
|
|
196
189
|
const flexDefinition = definition;
|
|
197
190
|
const spacingBlueprint = renderCtx.theming.get.spacing();
|
|
191
|
+
const gapX = flexDefinition.gapX || flexDefinition?.gapX?.toString() === "0"
|
|
192
|
+
? (0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.gapX), spacingBlueprint)
|
|
193
|
+
: (0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.gapY), spacingBlueprint);
|
|
194
|
+
const gapY = flexDefinition.gapY || flexDefinition?.gapY?.toString() === "0"
|
|
195
|
+
? (0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.gapY), spacingBlueprint)
|
|
196
|
+
: gapX;
|
|
197
|
+
const width = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.width);
|
|
198
|
+
const minWidth = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.minWidth);
|
|
199
|
+
const height = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.height);
|
|
200
|
+
const minHeight = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.minHeight);
|
|
201
|
+
const alignXProp = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.alignX);
|
|
202
|
+
const alignYProp = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.alignY);
|
|
203
|
+
const direction = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.direction);
|
|
204
|
+
const wrap = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.wrap);
|
|
198
205
|
let alignX = null;
|
|
199
206
|
let alignY = null;
|
|
200
|
-
if (
|
|
201
|
-
|
|
207
|
+
if (alignXProp === "right") {
|
|
208
|
+
alignX = "flex-end";
|
|
209
|
+
}
|
|
210
|
+
else if (alignXProp === "center") {
|
|
211
|
+
alignX = "center";
|
|
212
|
+
}
|
|
213
|
+
if (alignYProp === "center") {
|
|
214
|
+
alignY = "center";
|
|
215
|
+
}
|
|
216
|
+
else if (alignYProp === "bottom") {
|
|
217
|
+
alignY = "flex-end";
|
|
218
|
+
}
|
|
219
|
+
else {
|
|
220
|
+
alignY = "stretch";
|
|
202
221
|
}
|
|
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
222
|
if (flexDefinition.position) {
|
|
215
223
|
const spacing = renderCtx.theming.get.spacing();
|
|
216
|
-
this.applySpacingStyles(flexDefinition.position, renderCtx, styleBase, spacing, "", (pos) => styleBase["position"] = pos.type, {
|
|
217
|
-
|
|
224
|
+
this.applySpacingStyles(flexDefinition.position, renderCtx, styleBase, spacing, "", (pos) => (styleBase["position"] = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, pos.type)), {
|
|
225
|
+
position: "type",
|
|
218
226
|
});
|
|
219
227
|
}
|
|
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
228
|
this.applyOverflow(definition, renderCtx, styleBase);
|
|
240
|
-
styleBase["flexDirection"] =
|
|
229
|
+
styleBase["flexDirection"] = direction;
|
|
241
230
|
styleBase["display"] = "flex";
|
|
242
231
|
styleBase["flex"] = "1 1 auto";
|
|
243
|
-
styleBase["flexWrap"] =
|
|
232
|
+
styleBase["flexWrap"] = wrap ? "wrap" : null;
|
|
244
233
|
styleBase["justifyContent"] = alignX;
|
|
245
234
|
styleBase["alignItems"] = alignY;
|
|
246
235
|
styleBase["rowGap"] = this.unitProvider.formatDimension(gapY);
|
|
247
236
|
styleBase["columnGap"] = this.unitProvider.formatDimension(gapX);
|
|
248
|
-
styleBase["flexBasis"] =
|
|
237
|
+
styleBase["flexBasis"] = height ? this.unitProvider.formatDimension(height) : undefined;
|
|
249
238
|
styleBase["width"] = this.unitProvider.formatDimension(width);
|
|
250
239
|
styleBase["maxWidth"] = this.unitProvider.formatDimension(width);
|
|
251
240
|
styleBase["minWidth"] = this.unitProvider.formatDimension(minWidth);
|
|
@@ -253,48 +242,49 @@ class VelcronStyles {
|
|
|
253
242
|
styleBase["minHeight"] = this.unitProvider.formatDimension(minHeight);
|
|
254
243
|
this.insertBackgroundColor(styleBase, flexDefinition, renderCtx);
|
|
255
244
|
}
|
|
256
|
-
|
|
245
|
+
if (definition.type === VelcronConstants_1.VelcronConstants.components.column) {
|
|
257
246
|
const flexDefinition = definition;
|
|
247
|
+
const width = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.width);
|
|
248
|
+
const minWidth = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.minWidth);
|
|
249
|
+
const grow = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.grow);
|
|
250
|
+
const alignYProp = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, flexDefinition.alignY);
|
|
258
251
|
let yAlignment = null;
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
if (flexDefinition.alignY) {
|
|
262
|
-
if (flexDefinition.alignY === "center") {
|
|
263
|
-
yAlignment = "center";
|
|
264
|
-
}
|
|
265
|
-
else if (flexDefinition.alignY === "bottom") {
|
|
266
|
-
yAlignment = "end";
|
|
267
|
-
}
|
|
252
|
+
if (alignYProp === "center") {
|
|
253
|
+
yAlignment = "center";
|
|
268
254
|
}
|
|
269
|
-
|
|
270
|
-
|
|
255
|
+
else if (alignYProp === "bottom") {
|
|
256
|
+
yAlignment = "end";
|
|
257
|
+
}
|
|
258
|
+
const flexBasis = width ? this.unitProvider.formatDimension(width) : "0px";
|
|
271
259
|
this.applyOverflow(definition, renderCtx, styleBase);
|
|
272
260
|
styleBase["flexBasis"] = flexBasis;
|
|
273
|
-
styleBase["flexGrow"] =
|
|
274
|
-
styleBase["
|
|
261
|
+
styleBase["flexGrow"] = grow || grow === 0 ? grow : 1;
|
|
262
|
+
styleBase["flexShrink"] = styleBase["flexGrow"];
|
|
263
|
+
styleBase["maxWidth"] = width ? this.unitProvider.formatDimension(width) : "100%";
|
|
275
264
|
styleBase["alignSelf"] = yAlignment;
|
|
276
265
|
styleBase["minWidth"] = this.unitProvider.formatDimension(minWidth);
|
|
277
266
|
this.insertBackgroundColor(styleBase, flexDefinition, renderCtx);
|
|
278
267
|
}
|
|
279
|
-
|
|
268
|
+
if (definition.type === VelcronConstants_1.VelcronConstants.components.grid) {
|
|
280
269
|
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;
|
|
270
|
+
const gridDefinition = definition;
|
|
271
|
+
const columns = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, gridDefinition.columns);
|
|
272
|
+
const minWidth = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, gridDefinition.minColumnWidth);
|
|
273
|
+
const gapX = gridDefinition.gapX || gridDefinition?.gapX?.toString() === "0"
|
|
274
|
+
? (0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, gridDefinition.gapX), spacingBlueprint)
|
|
275
|
+
: (0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, gridDefinition.gapY), spacingBlueprint);
|
|
276
|
+
const gapY = gridDefinition.gapY || gridDefinition?.gapY?.toString() === "0"
|
|
277
|
+
? (0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, gridDefinition.gapY), spacingBlueprint)
|
|
278
|
+
: gapX;
|
|
290
279
|
styleBase["display"] = "grid";
|
|
280
|
+
styleBase["width"] = "100%";
|
|
291
281
|
if (minWidth) {
|
|
292
282
|
const widthWithDimension = this.unitProvider.formatDimension(minWidth);
|
|
293
|
-
styleBase["gridTemplateColumns"] = `repeat(auto-fit,minmax(${widthWithDimension}, 1fr))`;
|
|
283
|
+
styleBase["gridTemplateColumns"] = `repeat(auto-fit, minmax(${widthWithDimension}, 1fr))`;
|
|
294
284
|
}
|
|
295
285
|
else if (columns) {
|
|
296
286
|
let templateColumnString = "";
|
|
297
|
-
if (
|
|
287
|
+
if (__1.VelcronData.isArray(columns)) {
|
|
298
288
|
columns.forEach((col) => {
|
|
299
289
|
templateColumnString += `${col} `;
|
|
300
290
|
});
|
|
@@ -317,7 +307,7 @@ class VelcronStyles {
|
|
|
317
307
|
if (definition.borderRadius) {
|
|
318
308
|
const typedDefinition = definition;
|
|
319
309
|
if (typedDefinition.borderRadius) {
|
|
320
|
-
this.insertBorderRadiusStyles(styleBase, typedDefinition.borderRadius);
|
|
310
|
+
this.insertBorderRadiusStyles(styleBase, typedDefinition.borderRadius, renderCtx);
|
|
321
311
|
}
|
|
322
312
|
}
|
|
323
313
|
return VelcronStyles.styleProvider(styleBase, definition, renderCtx);
|
|
@@ -326,47 +316,48 @@ class VelcronStyles {
|
|
|
326
316
|
return this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(value, spacing));
|
|
327
317
|
}
|
|
328
318
|
static applyOverflow(definition, renderCtx, styleBase) {
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
styleBase["overflowY"] = VelcronData_1.VelcronData.dataBind(renderCtx, definition.overflowY);
|
|
337
|
-
}
|
|
319
|
+
const overflowProps = ["overflow", "overflowX", "overflowY"];
|
|
320
|
+
overflowProps.forEach((prop) => {
|
|
321
|
+
const propValue = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, definition[prop]);
|
|
322
|
+
if (propValue) {
|
|
323
|
+
styleBase[prop] = propValue;
|
|
324
|
+
}
|
|
325
|
+
});
|
|
338
326
|
}
|
|
339
327
|
static applySpacingStyles(spacing, renderCtx, styleBase, spacingDef, styleType, objectIsDatabound, additionalPropsToDataBind) {
|
|
340
328
|
const properties = ["top", "right", "bottom", "left"];
|
|
341
|
-
if (
|
|
342
|
-
|
|
343
|
-
const dataBound = VelcronData_1.VelcronData.dataBind(renderCtx, spacing);
|
|
329
|
+
if (__1.VelcronData.isBindable(spacing)) {
|
|
330
|
+
const dataBound = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, spacing);
|
|
344
331
|
objectIsDatabound?.(dataBound);
|
|
345
|
-
properties.forEach(prop => {
|
|
332
|
+
properties.forEach((prop) => {
|
|
346
333
|
if (dataBound?.[prop]) {
|
|
347
|
-
const styleName = styleType?.length > 0
|
|
334
|
+
const styleName = styleType?.length > 0
|
|
335
|
+
? `${styleType}${prop.charAt(0).toUpperCase() + prop.slice(1)}`
|
|
336
|
+
: prop;
|
|
348
337
|
styleBase[styleName] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(dataBound[prop], spacingDef));
|
|
349
338
|
}
|
|
350
339
|
});
|
|
351
340
|
}
|
|
352
341
|
else {
|
|
353
|
-
properties.forEach(prop => {
|
|
354
|
-
//Each property is databound
|
|
342
|
+
properties.forEach((prop) => {
|
|
355
343
|
if (spacing?.[prop]) {
|
|
356
|
-
const styleName = styleType?.length > 0
|
|
357
|
-
|
|
344
|
+
const styleName = styleType?.length > 0
|
|
345
|
+
? `${styleType}${prop.charAt(0).toUpperCase() + prop.slice(1)}`
|
|
346
|
+
: prop;
|
|
347
|
+
styleBase[styleName] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, spacing[prop]), spacingDef));
|
|
358
348
|
}
|
|
359
349
|
});
|
|
360
|
-
additionalPropsToDataBind &&
|
|
361
|
-
|
|
362
|
-
|
|
350
|
+
additionalPropsToDataBind &&
|
|
351
|
+
Object.keys(additionalPropsToDataBind).forEach((key) => {
|
|
352
|
+
styleBase[key] = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, spacing[additionalPropsToDataBind[key]]);
|
|
353
|
+
});
|
|
363
354
|
}
|
|
364
355
|
}
|
|
365
356
|
static dataBindStyles(styles, renderCtx) {
|
|
366
357
|
Object.keys(styles).forEach((key) => {
|
|
367
358
|
const style = styles[key];
|
|
368
|
-
if (style &&
|
|
369
|
-
styles[key] =
|
|
359
|
+
if (style && __1.VelcronData.isString(style)) {
|
|
360
|
+
styles[key] = VelcronDataBinder_1.VelcronDataBinder.bind(renderCtx, style);
|
|
370
361
|
}
|
|
371
362
|
});
|
|
372
363
|
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: {
|