@omnia/velcron 7.0.36-preview
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/README.md +6 -0
- package/actions/ActionResults.d.ts +4 -0
- package/actions/ActionResults.js +14 -0
- package/actions/Alert.d.ts +2 -0
- package/actions/Alert.js +12 -0
- package/actions/Array.d.ts +3 -0
- package/actions/Array.js +22 -0
- package/actions/Debounce.d.ts +2 -0
- package/actions/Debounce.js +43 -0
- package/actions/Delay.d.ts +2 -0
- package/actions/Delay.js +14 -0
- package/actions/Emit.d.ts +2 -0
- package/actions/Emit.js +25 -0
- package/actions/Http.d.ts +2 -0
- package/actions/Http.js +15 -0
- package/actions/IActionHandler.d.ts +5 -0
- package/actions/IActionHandler.js +2 -0
- package/actions/Log.d.ts +2 -0
- package/actions/Log.js +10 -0
- package/actions/MsGraph.d.ts +2 -0
- package/actions/MsGraph.js +16 -0
- package/actions/MsSharePoint.d.ts +2 -0
- package/actions/MsSharePoint.js +17 -0
- package/actions/index.d.ts +11 -0
- package/actions/index.js +14 -0
- package/index.d.ts +6 -0
- package/index.js +9 -0
- package/internal-do-not-import-from-here/shared/models/Bring.d.ts +23 -0
- package/internal-do-not-import-from-here/shared/models/Bring.js +2 -0
- package/internal-do-not-import-from-here/shared/models/Broadcasting.d.ts +25 -0
- package/internal-do-not-import-from-here/shared/models/Broadcasting.js +12 -0
- package/internal-do-not-import-from-here/shared/models/Future.d.ts +44 -0
- package/internal-do-not-import-from-here/shared/models/Future.js +122 -0
- package/internal-do-not-import-from-here/shared/models/Guid.d.ts +17 -0
- package/internal-do-not-import-from-here/shared/models/Guid.js +51 -0
- package/internal-do-not-import-from-here/shared/models/OmniaSharedBootstrapData.d.ts +25 -0
- package/internal-do-not-import-from-here/shared/models/OmniaSharedBootstrapData.js +2 -0
- package/internal-do-not-import-from-here/shared/models/Realtime.d.ts +40 -0
- package/internal-do-not-import-from-here/shared/models/Realtime.js +40 -0
- package/internal-do-not-import-from-here/shared/models/SharedConstants.d.ts +5 -0
- package/internal-do-not-import-from-here/shared/models/SharedConstants.js +9 -0
- package/internal-do-not-import-from-here/shared/models/StringExtensions.d.ts +6 -0
- package/internal-do-not-import-from-here/shared/models/StringExtensions.js +3 -0
- package/internal-do-not-import-from-here/shared/models/Tenant.d.ts +4 -0
- package/internal-do-not-import-from-here/shared/models/Tenant.js +2 -0
- package/internal-do-not-import-from-here/shared/models/Tokens.d.ts +13 -0
- package/internal-do-not-import-from-here/shared/models/Tokens.js +2 -0
- package/internal-do-not-import-from-here/shared/models/Topic.d.ts +10 -0
- package/internal-do-not-import-from-here/shared/models/Topic.js +2 -0
- package/internal-do-not-import-from-here/shared/models/WorkerProxyFuncs.d.ts +8 -0
- package/internal-do-not-import-from-here/shared/models/WorkerProxyFuncs.js +14 -0
- package/internal-do-not-import-from-here/shared/models/Workers.d.ts +29 -0
- package/internal-do-not-import-from-here/shared/models/Workers.js +8 -0
- package/internal-do-not-import-from-here/shared/models/index.d.ts +14 -0
- package/internal-do-not-import-from-here/shared/models/index.js +18 -0
- package/internal-do-not-import-from-here/shared/models/theming/BlueprintDefinition.d.ts +27 -0
- package/internal-do-not-import-from-here/shared/models/theming/BlueprintDefinition.js +2 -0
- package/internal-do-not-import-from-here/shared/models/theming/OmniaThemes.d.ts +5 -0
- package/internal-do-not-import-from-here/shared/models/theming/OmniaThemes.js +18 -0
- package/internal-do-not-import-from-here/shared/models/theming/ThemeDefinitionV2.d.ts +61 -0
- package/internal-do-not-import-from-here/shared/models/theming/ThemeDefinitionV2.js +24 -0
- package/internal-do-not-import-from-here/shared/models/theming/ThemeMethods.d.ts +11 -0
- package/internal-do-not-import-from-here/shared/models/theming/ThemeMethods.js +143 -0
- package/internal-do-not-import-from-here/shared/models/theming/TypographyDefinition.d.ts +29 -0
- package/internal-do-not-import-from-here/shared/models/theming/TypographyDefinition.js +11 -0
- package/internal-do-not-import-from-here/shared/models/theming/index.d.ts +4 -0
- package/internal-do-not-import-from-here/shared/models/theming/index.js +7 -0
- package/models/Enums.d.ts +53 -0
- package/models/Enums.js +65 -0
- package/models/VelcronDefinitions.d.ts +268 -0
- package/models/VelcronDefinitions.js +8 -0
- package/models/VelcronDescriptors.d.ts +35 -0
- package/models/VelcronDescriptors.js +2 -0
- package/models/VelcronEvents.d.ts +16 -0
- package/models/VelcronEvents.js +2 -0
- package/models/VelcronTypes.d.ts +10 -0
- package/models/VelcronTypes.js +2 -0
- package/models/VelcronUnitProvider.d.ts +5 -0
- package/models/VelcronUnitProvider.js +2 -0
- package/models/ViewModelAndContext.d.ts +4 -0
- package/models/ViewModelAndContext.js +2 -0
- package/models/index.d.ts +7 -0
- package/models/index.js +10 -0
- package/package.json +27 -0
- package/parser/TextValue.d.ts +4 -0
- package/parser/TextValue.js +9 -0
- package/parser/VelcronActions.d.ts +36 -0
- package/parser/VelcronActions.js +443 -0
- package/parser/VelcronConstants.d.ts +29 -0
- package/parser/VelcronConstants.js +32 -0
- package/parser/VelcronData.d.ts +39 -0
- package/parser/VelcronData.js +638 -0
- package/parser/VelcronLogger.d.ts +6 -0
- package/parser/VelcronLogger.js +18 -0
- package/parser/VelcronRenderers.d.ts +41 -0
- package/parser/VelcronRenderers.js +126 -0
- package/parser/VelcronStyles.d.ts +12 -0
- package/parser/VelcronStyles.js +159 -0
- package/parser/index.d.ts +7 -0
- package/parser/index.js +10 -0
- package/stores/ReactivitySystem.d.ts +5 -0
- package/stores/ReactivitySystem.js +12 -0
- package/stores/VelcronStore.d.ts +12 -0
- package/stores/VelcronStore.js +23 -0
- package/stores/VelcronTheming.d.ts +19 -0
- package/stores/VelcronTheming.js +49 -0
- package/stores/index.d.ts +3 -0
- package/stores/index.js +6 -0
- package/utilities/ColorUtility.d.ts +1 -0
- package/utilities/ColorUtility.js +45 -0
- package/utilities/index.d.ts +1 -0
- package/utilities/index.js +4 -0
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { BuiltInComponentRenderers, VelcronState, ResolvedComponentRenderer, VelcronCustomComponentDefinition, VelcronDefinition, VelcronRenderContext } from "../models";
|
|
2
|
+
export declare class VelcronRenderers {
|
|
3
|
+
private static components;
|
|
4
|
+
static registerComponent(type: string, component: any): void;
|
|
5
|
+
static hasComponents(): boolean;
|
|
6
|
+
static hasComponent(type: string): any;
|
|
7
|
+
static registerComponents(components: BuiltInComponentRenderers): void;
|
|
8
|
+
static getComponent(definition: VelcronDefinition, renderContext: VelcronRenderContext): ResolvedComponentRenderer;
|
|
9
|
+
static definitionContainsCustomColorSchema(definition: VelcronDefinition): boolean;
|
|
10
|
+
static createNewRendererContext(currentRenderCtx: VelcronRenderContext, definition: VelcronDefinition, newViewModel?: VelcronState): {
|
|
11
|
+
rootContext: VelcronState;
|
|
12
|
+
theming: {
|
|
13
|
+
state: {
|
|
14
|
+
currentTheme: import("@omnia/fx-models").ThemeDefinitionV2;
|
|
15
|
+
};
|
|
16
|
+
get: {
|
|
17
|
+
colorSchema: (colorSchemaType: string) => import("@omnia/fx-models").ColorSchema;
|
|
18
|
+
typography: (typographyType: string) => import("@omnia/fx-models").TypographyType;
|
|
19
|
+
color: (colorSchemaType: string, colorType: string) => string;
|
|
20
|
+
colorDefinition: (colorSchemaType: string, colorType: string) => import("@omnia/fx-models").ColorDefinition;
|
|
21
|
+
complementaryColorType: (colorType: string) => string;
|
|
22
|
+
complementaryColor: (colorSchemaType: string, colorType: string) => string;
|
|
23
|
+
complementaryColorDefinition: (colorSchemaType: string, colorType: string) => import("@omnia/fx-models").ColorDefinition;
|
|
24
|
+
currentTheme: () => import("@omnia/fx-models").ThemeDefinitionV2;
|
|
25
|
+
};
|
|
26
|
+
actions: {
|
|
27
|
+
setTheme(newTheme: import("@omnia/fx-models").ThemeDefinitionV2): void;
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
currentContext: VelcronState;
|
|
31
|
+
actions: {
|
|
32
|
+
[name: string]: [];
|
|
33
|
+
};
|
|
34
|
+
components: VelcronCustomComponentDefinition[];
|
|
35
|
+
hooks: import("../models").VelcronRenderContextHooks;
|
|
36
|
+
computed: {
|
|
37
|
+
[name: string]: [];
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
static ensureRenderContext(rendererInfo: ResolvedComponentRenderer, definition: VelcronDefinition, currentRenderCtx: VelcronRenderContext, newViewModel?: VelcronState): VelcronRenderContext;
|
|
41
|
+
}
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.VelcronRenderers = void 0;
|
|
4
|
+
const VelcronLogger_1 = require("./VelcronLogger");
|
|
5
|
+
const VelcronData_1 = require("./VelcronData");
|
|
6
|
+
const stores_1 = require("../stores");
|
|
7
|
+
class VelcronRenderers {
|
|
8
|
+
static registerComponent(type, component) {
|
|
9
|
+
type = type.toLowerCase();
|
|
10
|
+
if (!this.components[type]) {
|
|
11
|
+
this.components[type] = component;
|
|
12
|
+
}
|
|
13
|
+
else {
|
|
14
|
+
throw `Velcron Component of type ${type} is already registered`;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
static hasComponents() {
|
|
18
|
+
return Object.keys(this.components).length > 0;
|
|
19
|
+
}
|
|
20
|
+
static hasComponent(type) {
|
|
21
|
+
type = type.toLowerCase();
|
|
22
|
+
return this.components[type];
|
|
23
|
+
}
|
|
24
|
+
static registerComponents(components) {
|
|
25
|
+
Object.keys(components).forEach((key) => {
|
|
26
|
+
this.registerComponent(key, components[key]);
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
static getComponent(definition, renderContext) {
|
|
30
|
+
let result;
|
|
31
|
+
let customComponentDefinition;
|
|
32
|
+
if (renderContext.components && Array.isArray(renderContext.components)) {
|
|
33
|
+
customComponentDefinition = renderContext.components?.find(p => p.type.toLowerCase() === definition.type.toLowerCase());
|
|
34
|
+
}
|
|
35
|
+
if (customComponentDefinition) {
|
|
36
|
+
if (!this.components["customcomponent"]) {
|
|
37
|
+
throw "Cant find the custom component renderer";
|
|
38
|
+
}
|
|
39
|
+
//Make a new instance of the custom component
|
|
40
|
+
const customComponentInstance = JSON.parse(JSON.stringify(customComponentDefinition));
|
|
41
|
+
//Apply styles coming from the usage definition
|
|
42
|
+
//TODO: If the custom component contains styling we should check which styling properties that
|
|
43
|
+
//comes from the current instance and override the ones from the original to make style overide work as we want
|
|
44
|
+
customComponentInstance.style = definition.style;
|
|
45
|
+
result = {
|
|
46
|
+
component: this.components["customcomponent"],
|
|
47
|
+
definition: customComponentInstance,
|
|
48
|
+
customComponent: true
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
else if (this.components[definition.type.toLowerCase()]) {
|
|
52
|
+
result = {
|
|
53
|
+
component: this.components[definition.type.toLowerCase()],
|
|
54
|
+
definition: definition,
|
|
55
|
+
customComponent: false
|
|
56
|
+
};
|
|
57
|
+
}
|
|
58
|
+
else {
|
|
59
|
+
throw "Cant find component";
|
|
60
|
+
}
|
|
61
|
+
return result;
|
|
62
|
+
}
|
|
63
|
+
static definitionContainsCustomColorSchema(definition) {
|
|
64
|
+
return (definition.colorSchema && definition.colorSchema !== "");
|
|
65
|
+
}
|
|
66
|
+
static createNewRendererContext(currentRenderCtx, definition, newViewModel) {
|
|
67
|
+
const result = {
|
|
68
|
+
rootContext: currentRenderCtx.rootContext,
|
|
69
|
+
theming: currentRenderCtx.theming,
|
|
70
|
+
currentContext: newViewModel ? newViewModel : currentRenderCtx.currentContext,
|
|
71
|
+
actions: currentRenderCtx.actions,
|
|
72
|
+
components: currentRenderCtx.components,
|
|
73
|
+
hooks: currentRenderCtx.hooks,
|
|
74
|
+
computed: currentRenderCtx.computed,
|
|
75
|
+
};
|
|
76
|
+
if (VelcronRenderers.definitionContainsCustomColorSchema(definition)) {
|
|
77
|
+
const schema = VelcronData_1.VelcronData.dataBind(result, definition.colorSchema);
|
|
78
|
+
result.colorSchemaType = stores_1.ReactivitySystem.makeReactive(schema);
|
|
79
|
+
result.colorSchema = result.theming.get.colorSchema(result.colorSchemaType);
|
|
80
|
+
}
|
|
81
|
+
else {
|
|
82
|
+
result.colorSchemaType = currentRenderCtx.colorSchemaType;
|
|
83
|
+
result.colorSchema = currentRenderCtx.colorSchema;
|
|
84
|
+
}
|
|
85
|
+
return result;
|
|
86
|
+
}
|
|
87
|
+
static ensureRenderContext(rendererInfo, definition, currentRenderCtx, newViewModel) {
|
|
88
|
+
//Ensure we have the correct render context passing properties etc to sub components
|
|
89
|
+
let result = currentRenderCtx;
|
|
90
|
+
if (rendererInfo.customComponent
|
|
91
|
+
|| newViewModel ||
|
|
92
|
+
VelcronRenderers.definitionContainsCustomColorSchema(definition)) {
|
|
93
|
+
result = VelcronRenderers.createNewRendererContext(currentRenderCtx, definition, newViewModel);
|
|
94
|
+
if (rendererInfo.customComponent) {
|
|
95
|
+
//Fetch the custom component definition
|
|
96
|
+
const customDef = rendererInfo.definition;
|
|
97
|
+
if (customDef.properties) {
|
|
98
|
+
// customDef.properties.forEach((prop) => {
|
|
99
|
+
Object.keys(customDef.properties).forEach((propName) => {
|
|
100
|
+
const prop = customDef.properties ? customDef.properties[propName] : null;
|
|
101
|
+
if (!prop || (prop.required && !definition.hasOwnProperty(propName))) {
|
|
102
|
+
VelcronLogger_1.VelcronLogger.logCustomComponentError(`Component of type ${customDef.type} requires property ${propName} but its missing`);
|
|
103
|
+
}
|
|
104
|
+
result.properties = result.properties || {};
|
|
105
|
+
if (definition.hasOwnProperty(propName)) {
|
|
106
|
+
if (VelcronData_1.VelcronData.isString(definition[propName])) {
|
|
107
|
+
//Properties can be databound so if its a string we try do databind
|
|
108
|
+
//this is true for other values such as number / string also
|
|
109
|
+
result.properties[propName] = VelcronData_1.VelcronData.dataBind(currentRenderCtx, definition[propName]);
|
|
110
|
+
}
|
|
111
|
+
else {
|
|
112
|
+
result.properties[propName] = definition[propName];
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
else if (prop.hasOwnProperty("defaultValue")) {
|
|
116
|
+
result.properties[propName] = prop.defaultValue;
|
|
117
|
+
}
|
|
118
|
+
});
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
return result;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
exports.VelcronRenderers = VelcronRenderers;
|
|
126
|
+
VelcronRenderers.components = {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { VelcronBorder, VelcronCustomThemeSettings, VelcronDefinition, VelcronDimensions, VelcronRenderContext } from "../models";
|
|
2
|
+
import { VelcronUnitProvider } from "../models/VelcronUnitProvider";
|
|
3
|
+
export declare class VelcronStyles {
|
|
4
|
+
static styleProvider: (baseStyles: object, definition: VelcronDefinition, renderCtx: VelcronRenderContext) => any;
|
|
5
|
+
static unitProvider: VelcronUnitProvider;
|
|
6
|
+
static registerStyleProvider(fn: (styleBase: object, definition: VelcronDefinition, renderCtx: VelcronRenderContext) => object | string, unitProvider: VelcronUnitProvider): void;
|
|
7
|
+
static insertBackgroundColor(styleBase: any, definition: VelcronCustomThemeSettings, renderCtx: VelcronRenderContext): void;
|
|
8
|
+
static insertBorderRadiusStyles(styleBase: any, settings: VelcronDimensions): void;
|
|
9
|
+
static insertBorderStyles(styleBase: any, borderSettings: VelcronBorder, renderCtx: VelcronRenderContext): void;
|
|
10
|
+
static create(definition: VelcronDefinition, renderCtx: VelcronRenderContext): object | string;
|
|
11
|
+
static dataBindStyles(styles: object, renderCtx: VelcronRenderContext): object;
|
|
12
|
+
}
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.VelcronStyles = void 0;
|
|
4
|
+
const VelcronData_1 = require("./VelcronData");
|
|
5
|
+
const models_1 = require("../models");
|
|
6
|
+
const VelcronConstants_1 = require("./VelcronConstants");
|
|
7
|
+
const utilities_1 = require("../utilities");
|
|
8
|
+
class VelcronStyles {
|
|
9
|
+
static registerStyleProvider(fn, unitProvider) {
|
|
10
|
+
VelcronStyles.styleProvider = fn;
|
|
11
|
+
VelcronStyles.unitProvider = unitProvider;
|
|
12
|
+
}
|
|
13
|
+
static insertBackgroundColor(styleBase, definition, renderCtx) {
|
|
14
|
+
if (definition.colorSchema && definition.colorSchema != "") {
|
|
15
|
+
//styleBase["backgroundColor"] = renderCtx.theming.get.activeColorSchema().base.color;
|
|
16
|
+
styleBase["backgroundColor"] = renderCtx.colorSchema.base.color;
|
|
17
|
+
}
|
|
18
|
+
if (definition.opacity || definition.opacity === 0) {
|
|
19
|
+
if (definition.opacity === 0) {
|
|
20
|
+
styleBase["backgroundColor"] = undefined;
|
|
21
|
+
}
|
|
22
|
+
else {
|
|
23
|
+
styleBase["backgroundColor"] = (0, utilities_1.useOpacityOnColor)(styleBase["backgroundColor"], definition.opacity / 100);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
static insertBorderRadiusStyles(styleBase, settings) {
|
|
28
|
+
if (!settings) {
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
31
|
+
if (settings.top || settings.top === 0) {
|
|
32
|
+
styleBase["borderTopLeftRadius"] = this.unitProvider.formatDimension(settings.top);
|
|
33
|
+
}
|
|
34
|
+
if (settings.right || settings.right === 0) {
|
|
35
|
+
styleBase["borderTopRightRadius"] = this.unitProvider.formatDimension(settings.right);
|
|
36
|
+
}
|
|
37
|
+
if (settings.bottom || settings.bottom === 0) {
|
|
38
|
+
styleBase["borderBottomRightRadius"] = this.unitProvider.formatDimension(settings.bottom);
|
|
39
|
+
}
|
|
40
|
+
if (settings.left || settings.left === 0) {
|
|
41
|
+
styleBase["borderBottomLeftRadius"] = this.unitProvider.formatDimension(settings.left);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
static insertBorderStyles(styleBase, borderSettings, renderCtx) {
|
|
45
|
+
if (!borderSettings) {
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
if (borderSettings.top || borderSettings.top === 0) {
|
|
49
|
+
styleBase["borderTopStyle"] = "solid";
|
|
50
|
+
styleBase["borderTopColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaType, borderSettings.color);
|
|
51
|
+
}
|
|
52
|
+
if (borderSettings.right || borderSettings.right === 0) {
|
|
53
|
+
styleBase["borderRightStyle"] = "solid";
|
|
54
|
+
styleBase["borderRightColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaType, borderSettings.color);
|
|
55
|
+
}
|
|
56
|
+
if (borderSettings.bottom || borderSettings.bottom === 0) {
|
|
57
|
+
styleBase["borderBottomStyle"] = "solid";
|
|
58
|
+
styleBase["borderBottomColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaType, borderSettings.color);
|
|
59
|
+
}
|
|
60
|
+
if (borderSettings.left || borderSettings.left === 0) {
|
|
61
|
+
styleBase["borderLeftStyle"] = "solid";
|
|
62
|
+
styleBase["borderLeftColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaType, borderSettings.color);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
static create(definition, renderCtx) {
|
|
66
|
+
const styleBase = { ...definition.style };
|
|
67
|
+
if (definition.type === VelcronConstants_1.VelcronConstants.components.image) {
|
|
68
|
+
const imageDefinition = definition;
|
|
69
|
+
if (renderCtx.theming.state.currentTheme.blueprint?.image?.borderRadius) {
|
|
70
|
+
const settings = renderCtx.theming.state.currentTheme.blueprint.image.borderRadius;
|
|
71
|
+
this.insertBorderRadiusStyles(styleBase, settings);
|
|
72
|
+
}
|
|
73
|
+
// if (styleBase.width) {
|
|
74
|
+
// styleBase.width = this.unitProvider.formatDimension(200);
|
|
75
|
+
// }
|
|
76
|
+
// if (!styleBase.height) {
|
|
77
|
+
// styleBase.height = this.unitProvider.formatDimension(400);
|
|
78
|
+
// }
|
|
79
|
+
}
|
|
80
|
+
if (definition.type === VelcronConstants_1.VelcronConstants.components.card) {
|
|
81
|
+
const cardDefinition = definition;
|
|
82
|
+
if (renderCtx.theming.state.currentTheme.blueprint?.card?.borderRadius) {
|
|
83
|
+
const settings = renderCtx.theming.state.currentTheme.blueprint.card.borderRadius;
|
|
84
|
+
this.insertBorderRadiusStyles(styleBase, settings);
|
|
85
|
+
}
|
|
86
|
+
if (renderCtx.theming.state.currentTheme.blueprint?.card?.border) {
|
|
87
|
+
const settings = renderCtx.theming.state.currentTheme.blueprint.card.border;
|
|
88
|
+
this.insertBorderStyles(styleBase, settings, renderCtx);
|
|
89
|
+
}
|
|
90
|
+
this.insertBackgroundColor(styleBase, cardDefinition, renderCtx);
|
|
91
|
+
}
|
|
92
|
+
else if (definition.type === VelcronConstants_1.VelcronConstants.components.text) {
|
|
93
|
+
const textDefinition = definition;
|
|
94
|
+
if (textDefinition.color) {
|
|
95
|
+
styleBase["color"] = renderCtx.theming.get.color(renderCtx.colorSchemaType, textDefinition.color);
|
|
96
|
+
}
|
|
97
|
+
else {
|
|
98
|
+
styleBase["color"] = renderCtx.colorSchema.onBase.color;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
else if (definition.type === VelcronConstants_1.VelcronConstants.components.flexView) {
|
|
102
|
+
const flexViewDefinition = definition;
|
|
103
|
+
const flexGrow = flexViewDefinition.grow || flexViewDefinition.grow === 0 ? flexViewDefinition.grow : 1;
|
|
104
|
+
styleBase["flex"] = flexGrow;
|
|
105
|
+
styleBase["flexDirection"] = flexViewDefinition.column ? "column" : "row";
|
|
106
|
+
if (flexViewDefinition.width) {
|
|
107
|
+
styleBase["maxWidth"] = this.unitProvider.formatDimension(flexViewDefinition.width);
|
|
108
|
+
}
|
|
109
|
+
if (flexViewDefinition.horizontalAlignment) {
|
|
110
|
+
const propertyName = flexViewDefinition.column ? "alignItems" : "justifyContent";
|
|
111
|
+
if (flexViewDefinition.horizontalAlignment === models_1.VelcronHorizontalAlignments.right) {
|
|
112
|
+
styleBase[propertyName] = "flex-end";
|
|
113
|
+
}
|
|
114
|
+
else if (flexViewDefinition.horizontalAlignment === models_1.VelcronHorizontalAlignments.center) {
|
|
115
|
+
styleBase[propertyName] = "center";
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
const propertyName = flexViewDefinition.column ? "justifyContent" : "alignItems";
|
|
119
|
+
if (flexViewDefinition.verticalAlignment) {
|
|
120
|
+
if (flexViewDefinition.verticalAlignment === models_1.VerticalAlignments.center) {
|
|
121
|
+
styleBase[propertyName] = "center";
|
|
122
|
+
}
|
|
123
|
+
else if (flexViewDefinition.verticalAlignment === models_1.VerticalAlignments.bottom) {
|
|
124
|
+
styleBase[propertyName] = "flex-end";
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
else {
|
|
128
|
+
styleBase[propertyName] = "flex-start";
|
|
129
|
+
}
|
|
130
|
+
this.insertBackgroundColor(styleBase, flexViewDefinition, renderCtx);
|
|
131
|
+
}
|
|
132
|
+
/**
|
|
133
|
+
*
|
|
134
|
+
* Generic styles for all components
|
|
135
|
+
*
|
|
136
|
+
*/
|
|
137
|
+
if (definition.border) {
|
|
138
|
+
const typedDefinition = definition;
|
|
139
|
+
this.insertBorderStyles(styleBase, typedDefinition.border, renderCtx);
|
|
140
|
+
}
|
|
141
|
+
if (definition.borderRadius) {
|
|
142
|
+
const typedDefinition = definition;
|
|
143
|
+
if (typedDefinition.borderRadius) {
|
|
144
|
+
this.insertBorderRadiusStyles(styleBase, typedDefinition.borderRadius);
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
return VelcronStyles.styleProvider(styleBase, definition, renderCtx);
|
|
148
|
+
}
|
|
149
|
+
static dataBindStyles(styles, renderCtx) {
|
|
150
|
+
Object.keys(styles).forEach((key) => {
|
|
151
|
+
const style = styles[key];
|
|
152
|
+
if (style && VelcronData_1.VelcronData.isString(style)) {
|
|
153
|
+
styles[key] = VelcronData_1.VelcronData.dataBind(renderCtx, style);
|
|
154
|
+
}
|
|
155
|
+
});
|
|
156
|
+
return styles;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
exports.VelcronStyles = VelcronStyles;
|
package/parser/index.js
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const tslib_1 = require("tslib");
|
|
4
|
+
tslib_1.__exportStar(require("./VelcronData"), exports);
|
|
5
|
+
tslib_1.__exportStar(require("./VelcronActions"), exports);
|
|
6
|
+
tslib_1.__exportStar(require("./VelcronConstants"), exports);
|
|
7
|
+
tslib_1.__exportStar(require("./VelcronStyles"), exports);
|
|
8
|
+
tslib_1.__exportStar(require("./VelcronLogger"), exports);
|
|
9
|
+
tslib_1.__exportStar(require("./VelcronRenderers"), exports);
|
|
10
|
+
tslib_1.__exportStar(require("./TextValue"), exports);
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.ReactivitySystem = void 0;
|
|
4
|
+
class ReactivitySystem {
|
|
5
|
+
static registerProvider(fn) {
|
|
6
|
+
ReactivitySystem.makeReactive = fn;
|
|
7
|
+
ReactivitySystem.hasReactivityProvider = true;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
exports.ReactivitySystem = ReactivitySystem;
|
|
11
|
+
ReactivitySystem.makeReactive = null;
|
|
12
|
+
ReactivitySystem.hasReactivityProvider = false;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export declare const defineVelcronStore: <TSetup extends {
|
|
2
|
+
state: object;
|
|
3
|
+
privateState?: object;
|
|
4
|
+
}, TGetters, TActions>(name: string, definition: {
|
|
5
|
+
setup: () => TSetup;
|
|
6
|
+
getters?: (state: TSetup["state"], privateState?: TSetup["privateState"]) => TGetters;
|
|
7
|
+
actions?: (state: TSetup["state"], privateState?: TSetup["privateState"]) => TActions;
|
|
8
|
+
}) => (newStateWithName?: string) => {
|
|
9
|
+
state: TSetup["state"];
|
|
10
|
+
get: TGetters;
|
|
11
|
+
actions: TActions;
|
|
12
|
+
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.defineVelcronStore = void 0;
|
|
4
|
+
const ReactivitySystem_1 = require("./ReactivitySystem");
|
|
5
|
+
const stateMap = new Map();
|
|
6
|
+
const defineVelcronStore = (name, definition) => {
|
|
7
|
+
const result = (newStateWithName) => {
|
|
8
|
+
if (newStateWithName && newStateWithName !== "" && newStateWithName !== name) {
|
|
9
|
+
name = newStateWithName;
|
|
10
|
+
}
|
|
11
|
+
if (!stateMap.has(name)) {
|
|
12
|
+
stateMap.set(name, ReactivitySystem_1.ReactivitySystem.makeReactive(definition.setup()));
|
|
13
|
+
}
|
|
14
|
+
const reactiveState = stateMap.get(name);
|
|
15
|
+
return {
|
|
16
|
+
state: reactiveState.state,
|
|
17
|
+
get: definition.getters?.(reactiveState.state, reactiveState.privateState),
|
|
18
|
+
actions: definition.actions?.(reactiveState.state, reactiveState.privateState)
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
return result;
|
|
22
|
+
};
|
|
23
|
+
exports.defineVelcronStore = defineVelcronStore;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { ThemeDefinitionV2 } from "..";
|
|
2
|
+
export declare const useVelcronThemingStore: (newStateWithName?: string) => {
|
|
3
|
+
state: {
|
|
4
|
+
currentTheme: ThemeDefinitionV2;
|
|
5
|
+
};
|
|
6
|
+
get: {
|
|
7
|
+
colorSchema: (colorSchemaType: string) => import("..").ColorSchema;
|
|
8
|
+
typography: (typographyType: string) => import("..").TypographyType;
|
|
9
|
+
color: (colorSchemaType: string, colorType: string) => string;
|
|
10
|
+
colorDefinition: (colorSchemaType: string, colorType: string) => import("..").ColorDefinition;
|
|
11
|
+
complementaryColorType: (colorType: string) => string;
|
|
12
|
+
complementaryColor: (colorSchemaType: string, colorType: string) => string;
|
|
13
|
+
complementaryColorDefinition: (colorSchemaType: string, colorType: string) => import("..").ColorDefinition;
|
|
14
|
+
currentTheme: () => ThemeDefinitionV2;
|
|
15
|
+
};
|
|
16
|
+
actions: {
|
|
17
|
+
setTheme(newTheme: ThemeDefinitionV2): void;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useVelcronThemingStore = void 0;
|
|
4
|
+
const __1 = require("..");
|
|
5
|
+
const VelcronStore_1 = require("./VelcronStore");
|
|
6
|
+
exports.useVelcronThemingStore = (0, VelcronStore_1.defineVelcronStore)("VelcronTheming", {
|
|
7
|
+
setup() {
|
|
8
|
+
return {
|
|
9
|
+
state: {
|
|
10
|
+
currentTheme: {}
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
},
|
|
14
|
+
getters(state) {
|
|
15
|
+
return {
|
|
16
|
+
colorSchema: (colorSchemaType) => {
|
|
17
|
+
return (0, __1.useThemeMethods)(state.currentTheme).colorSchema(colorSchemaType);
|
|
18
|
+
},
|
|
19
|
+
typography: (typographyType) => {
|
|
20
|
+
return (0, __1.useThemeMethods)(state.currentTheme).typography(typographyType);
|
|
21
|
+
},
|
|
22
|
+
color: (colorSchemaType, colorType) => {
|
|
23
|
+
return (0, __1.useThemeMethods)(state.currentTheme).color(colorSchemaType, colorType);
|
|
24
|
+
},
|
|
25
|
+
colorDefinition: (colorSchemaType, colorType) => {
|
|
26
|
+
return (0, __1.useThemeMethods)(state.currentTheme).colorDefinition(colorSchemaType, colorType);
|
|
27
|
+
},
|
|
28
|
+
complementaryColorType: (colorType) => {
|
|
29
|
+
return (0, __1.useThemeMethods)(state.currentTheme).complementaryColorType(colorType);
|
|
30
|
+
},
|
|
31
|
+
complementaryColor: (colorSchemaType, colorType) => {
|
|
32
|
+
return (0, __1.useThemeMethods)(state.currentTheme).complementaryColor(colorSchemaType, colorType);
|
|
33
|
+
},
|
|
34
|
+
complementaryColorDefinition: (colorSchemaType, colorType) => {
|
|
35
|
+
return (0, __1.useThemeMethods)(state.currentTheme).complementaryColorDefinition(colorSchemaType, colorType);
|
|
36
|
+
},
|
|
37
|
+
currentTheme: () => {
|
|
38
|
+
return this.currentTheme.state;
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
},
|
|
42
|
+
actions(state) {
|
|
43
|
+
return {
|
|
44
|
+
setTheme(newTheme) {
|
|
45
|
+
state.currentTheme = newTheme;
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
}
|
|
49
|
+
});
|
package/stores/index.js
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const tslib_1 = require("tslib");
|
|
4
|
+
tslib_1.__exportStar(require("./VelcronStore"), exports);
|
|
5
|
+
tslib_1.__exportStar(require("./VelcronTheming"), exports);
|
|
6
|
+
tslib_1.__exportStar(require("./ReactivitySystem"), exports);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const useOpacityOnColor: (color: any, opacity: any) => any;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useOpacityOnColor = void 0;
|
|
4
|
+
const useOpacityOnColor = (color, opacity) => {
|
|
5
|
+
const getRGBValues = (color) => {
|
|
6
|
+
const tmpColor = color.replace("rgba", "rgb");
|
|
7
|
+
return tmpColor.substring(4, tmpColor.length - 1)
|
|
8
|
+
.replace(/ /g, "")
|
|
9
|
+
.split(",");
|
|
10
|
+
};
|
|
11
|
+
const getRGBValuesFromHex = (color) => {
|
|
12
|
+
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
|
|
13
|
+
if (result) {
|
|
14
|
+
return [
|
|
15
|
+
parseInt(result[1], 16),
|
|
16
|
+
parseInt(result[2], 16),
|
|
17
|
+
parseInt(result[3], 16)
|
|
18
|
+
];
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
const isRGBColor = (color) => {
|
|
22
|
+
if (!color) {
|
|
23
|
+
return null;
|
|
24
|
+
}
|
|
25
|
+
if (color.indexOf("rgb") > -1) {
|
|
26
|
+
return true;
|
|
27
|
+
}
|
|
28
|
+
if (color.indexOf("rgba") > -1) {
|
|
29
|
+
return true;
|
|
30
|
+
}
|
|
31
|
+
return false;
|
|
32
|
+
};
|
|
33
|
+
let rgb = null;
|
|
34
|
+
if (!isRGBColor(color)) {
|
|
35
|
+
rgb = getRGBValuesFromHex(color);
|
|
36
|
+
}
|
|
37
|
+
else {
|
|
38
|
+
rgb = getRGBValues(color);
|
|
39
|
+
}
|
|
40
|
+
if (rgb) {
|
|
41
|
+
return `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${opacity})`;
|
|
42
|
+
}
|
|
43
|
+
return color;
|
|
44
|
+
};
|
|
45
|
+
exports.useOpacityOnColor = useOpacityOnColor;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./ColorUtility";
|