@omnia/velcron 7.0.523-dev → 7.0.525-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.
Files changed (8) hide show
  1. package/internal-do-not-import-from-here/shared/models/theming/BlueprintDefinition.d.ts +23 -0
  2. package/internal-do-not-import-from-here/shared/models/theming/BlueprintDefinition.js +2 -0
  3. package/internal-do-not-import-from-here/shared/models/theming/ThemeDefinitionV2.d.ts +2 -0
  4. package/models/VelcronDefinitions.d.ts +15 -8
  5. package/package.json +1 -1
  6. package/parser/VelcronRenderers.d.ts +5 -5
  7. package/parser/VelcronStyles.d.ts +4 -1
  8. package/parser/VelcronStyles.js +83 -29
package/internal-do-not-import-from-here/shared/models/theming/BlueprintDefinition.d.ts ADDED
@@ -0,0 +1,23 @@
1
+ import { Guid } from "../Guid";
2
+ export interface BoxDimensions {
3
+ top: number;
4
+ right: number;
5
+ bottom: number;
6
+ left: number;
7
+ }
8
+ export interface BoxBorder extends BoxDimensions {
9
+ color: string;
10
+ }
11
+ export interface BlueprintDefinition {
12
+ id: Guid;
13
+ card?: {
14
+ border?: BoxBorder;
15
+ borderRadius?: BoxDimensions;
16
+ };
17
+ image?: {
18
+ borderRadius?: BoxDimensions;
19
+ };
20
+ chip?: {
21
+ borderRadius?: BoxDimensions;
22
+ };
23
+ }
package/internal-do-not-import-from-here/shared/models/theming/BlueprintDefinition.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
package/internal-do-not-import-from-here/shared/models/theming/ThemeDefinitionV2.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { Guid } from "../Guid";
2
+ import { BlueprintDefinition } from "./BlueprintDefinition";
2
3
  import { TypographyDefinition } from "./TypographyDefinition";
3
4
  export interface ColorDefinition {
4
5
  dark: boolean;
@@ -36,6 +37,7 @@ export interface ThemeDefinitionV2 {
36
37
  error: ColorSchema;
37
38
  info: ColorSchema;
38
39
  typography: TypographyDefinition;
40
+ blueprint: BlueprintDefinition;
39
41
  }
40
42
  export declare const ColorSchemaTypes: {
41
43
  primary: string;
package/models/VelcronDefinitions.d.ts CHANGED
@@ -23,15 +23,23 @@ export interface BuiltInComponentRenderers {
23
23
  "Icon": unknown;
24
24
  "Chip": unknown;
25
25
  }
26
- export type DynamicViewModel = object;
26
+ export interface ColorSchemaReference {
27
+ name: string;
28
+ schema: string;
29
+ }
30
+ export interface VelcronState {
31
+ colorSchemas?: {
32
+ [key: string]: ColorSchemaReference;
33
+ };
34
+ }
27
35
  export interface OnItemRenderedHookResult {
28
36
  cssClass: string;
29
37
  containerRenderer?: VelcronContainerRenderer;
30
38
  }
31
39
  export interface VelcronRenderContext {
32
40
  id?: string;
33
- rootContext: DynamicViewModel;
34
- currentContext: DynamicViewModel;
41
+ rootContext: VelcronState;
42
+ currentContext: VelcronState;
35
43
  theming?: ReturnType<typeof useVelcronThemingStore>;
36
44
  colorSchemaName?: string;
37
45
  colorSchema?: ColorSchema;
@@ -102,6 +110,7 @@ export interface VelcronDefinitionBase {
102
110
  }
103
111
  export interface VelcronCustomThemeSettings {
104
112
  colorSchema?: string;
113
+ opacity?: number;
105
114
  }
106
115
  export interface VelcronDefinition extends VelcronDefinitionBase {
107
116
  body?: Array<VelcronDefinition>;
@@ -145,7 +154,7 @@ export interface VelcronAppDefinition extends VelcronDefinitionBase {
145
154
  [name: string]: [];
146
155
  };
147
156
  components?: Array<VelcronCustomComponentDefinition>;
148
- state?: DynamicViewModel;
157
+ state?: VelcronState;
149
158
  computed?: {
150
159
  [name: string]: [];
151
160
  };
@@ -160,7 +169,7 @@ export interface VelcronViewDefinition extends VelcronDefinition {
160
169
  style?: VelcronStyling;
161
170
  events?: VelcronOnPressEvent;
162
171
  }
163
- export interface VelcronCardDefinition extends VelcronDefinition {
172
+ export interface VelcronCardDefinition extends VelcronDefinition, VelcronCustomThemeSettings {
164
173
  type: "Card";
165
174
  style?: VelcronCardStyling;
166
175
  footer?: Array<VelcronDefinition>;
@@ -232,7 +241,6 @@ export interface VelcronFlexViewDefinition extends VelcronDefinition, VelcronCus
232
241
  grow?: number;
233
242
  border?: VelcronBorder;
234
243
  borderRadius?: VelcronDimensions;
235
- opacity: number;
236
244
  width: string;
237
245
  }
238
246
  export interface VelcronDimensions {
@@ -244,10 +252,9 @@ export interface VelcronDimensions {
244
252
  export interface VelcronBorder extends VelcronDimensions {
245
253
  color: string;
246
254
  }
247
- export interface VelcronChipDefinition extends VelcronDefinition {
255
+ export interface VelcronChipDefinition extends VelcronDefinition, VelcronCustomThemeSettings {
248
256
  type: "Chip";
249
257
  text: string;
250
- colorSchema: string;
251
258
  icon?: VelcronIcon;
252
259
  disabled?: boolean;
253
260
  events?: VelcronOnPressEvent;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@omnia/velcron",
3
3
  "license": "MIT",
4
- "version": "7.0.523-dev",
4
+ "version": "7.0.525-dev",
5
5
  "description": "Provide Omnia Velcron Stuffs.",
6
6
  "scripts": {
7
7
  "test": "echo \"Error: no test specified\" && exit 1"
package/parser/VelcronRenderers.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { BuiltInComponentRenderers, DynamicViewModel, ResolvedComponentRenderer, VelcronCustomComponentDefinition, VelcronDefinition, VelcronRenderContext } from "../models";
1
+ import { BuiltInComponentRenderers, VelcronState, ResolvedComponentRenderer, VelcronCustomComponentDefinition, VelcronDefinition, VelcronRenderContext } from "../models";
2
2
  export declare class VelcronRenderers {
3
3
  private static components;
4
4
  static registerComponent(type: string, component: any): void;
@@ -7,8 +7,8 @@ export declare class VelcronRenderers {
7
7
  static registerComponents(components: BuiltInComponentRenderers): void;
8
8
  static getComponent(definition: VelcronDefinition, renderContext: VelcronRenderContext): ResolvedComponentRenderer;
9
9
  static definitionContainsCustomColorSchema(definition: VelcronDefinition): boolean;
10
- static createNewRendererContext(currentRenderCtx: VelcronRenderContext, definition: VelcronDefinition, newViewModel?: DynamicViewModel): {
11
- rootContext: object;
10
+ static createNewRendererContext(currentRenderCtx: VelcronRenderContext, definition: VelcronDefinition, newViewModel?: VelcronState): {
11
+ rootContext: VelcronState;
12
12
  theming: {
13
13
  state: {
14
14
  currentTheme: import("@omnia/fx-models").ThemeDefinitionV2;
@@ -22,7 +22,7 @@ export declare class VelcronRenderers {
22
22
  setTheme(newTheme: import("@omnia/fx-models").ThemeDefinitionV2): void;
23
23
  };
24
24
  };
25
- currentContext: object;
25
+ currentContext: VelcronState;
26
26
  actions: {
27
27
  [name: string]: [];
28
28
  };
@@ -32,5 +32,5 @@ export declare class VelcronRenderers {
32
32
  [name: string]: [];
33
33
  };
34
34
  };
35
- static ensureRenderContext(rendererInfo: ResolvedComponentRenderer, definition: VelcronDefinition, currentRenderCtx: VelcronRenderContext, newViewModel?: DynamicViewModel): VelcronRenderContext;
35
+ static ensureRenderContext(rendererInfo: ResolvedComponentRenderer, definition: VelcronDefinition, currentRenderCtx: VelcronRenderContext, newViewModel?: VelcronState): VelcronRenderContext;
36
36
  }
package/parser/VelcronStyles.d.ts CHANGED
@@ -1,9 +1,12 @@
1
- import { VelcronDefinition, VelcronRenderContext } from "../models";
1
+ import { VelcronBorder, VelcronCustomThemeSettings, VelcronDefinition, VelcronDimensions, VelcronRenderContext } from "../models";
2
2
  import { VelcronUnitProvider } from "../models/VelcronUnitProvider";
3
3
  export declare class VelcronStyles {
4
4
  static styleProvider: (baseStyles: object, definition: VelcronDefinition, renderCtx: VelcronRenderContext) => any;
5
5
  static unitProvider: VelcronUnitProvider;
6
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;
7
10
  static create(definition: VelcronDefinition, renderCtx: VelcronRenderContext): object | string;
8
11
  static dataBindStyles(styles: object, renderCtx: VelcronRenderContext): object;
9
12
  }
package/parser/VelcronStyles.js CHANGED
@@ -10,18 +10,66 @@ class VelcronStyles {
10
10
  VelcronStyles.styleProvider = fn;
11
11
  VelcronStyles.unitProvider = unitProvider;
12
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.colorSchemaName, borderSettings.color);
51
+ }
52
+ if (borderSettings.right || borderSettings.right === 0) {
53
+ styleBase["borderRightStyle"] = "solid";
54
+ styleBase["borderRightColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaName, borderSettings.color);
55
+ }
56
+ if (borderSettings.bottom || borderSettings.bottom === 0) {
57
+ styleBase["borderBottomStyle"] = "solid";
58
+ styleBase["borderBottomColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaName, borderSettings.color);
59
+ }
60
+ if (borderSettings.left || borderSettings.left === 0) {
61
+ styleBase["borderLeftStyle"] = "solid";
62
+ styleBase["borderLeftColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaName, borderSettings.color);
63
+ }
64
+ }
13
65
  static create(definition, renderCtx) {
14
66
  const styleBase = { ...definition.style };
15
- if (definition.borderRadius) {
67
+ if (definition.type === VelcronConstants_1.VelcronConstants.components.image) {
16
68
  const imageDefinition = definition;
17
- if (imageDefinition.borderRadius) {
18
- styleBase["borderTopLeftRadius"] = this.unitProvider.formatDimension(imageDefinition.borderRadius.top);
19
- styleBase["borderTopRightRadius"] = this.unitProvider.formatDimension(imageDefinition.borderRadius.right);
20
- styleBase["borderBottomRightRadius"] = this.unitProvider.formatDimension(imageDefinition.borderRadius.bottom);
21
- styleBase["borderBottomLeftRadius"] = this.unitProvider.formatDimension(imageDefinition.borderRadius.left);
69
+ if (renderCtx.theming.state.currentTheme.blueprint?.image?.borderRadius) {
70
+ const settings = renderCtx.theming.state.currentTheme.blueprint.image.borderRadius;
71
+ this.insertBorderRadiusStyles(styleBase, settings);
22
72
  }
23
- }
24
- if (definition.type === VelcronConstants_1.VelcronConstants.components.image) {
25
73
  // if (styleBase.width) {
26
74
  // styleBase.width = this.unitProvider.formatDimension(200);
27
75
  // }
@@ -29,6 +77,18 @@ class VelcronStyles {
29
77
  // styleBase.height = this.unitProvider.formatDimension(400);
30
78
  // }
31
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
+ }
32
92
  else if (definition.type === VelcronConstants_1.VelcronConstants.components.text) {
33
93
  const textDefinition = definition;
34
94
  if (textDefinition.color) {
@@ -67,27 +127,21 @@ class VelcronStyles {
67
127
  else {
68
128
  styleBase[propertyName] = "flex-start";
69
129
  }
70
- if (flexViewDefinition.colorSchema && flexViewDefinition.colorSchema != "") {
71
- //styleBase["backgroundColor"] = renderCtx.theming.get.activeColorSchema().base.color;
72
- styleBase["backgroundColor"] = renderCtx.colorSchema.base.color;
73
- }
74
- if (flexViewDefinition.opacity || flexViewDefinition.opacity === 0) {
75
- if (flexViewDefinition.opacity === 0) {
76
- styleBase["backgroundColor"] = undefined;
77
- }
78
- else {
79
- styleBase["backgroundColor"] = (0, utilities_1.useOpacityOnColor)(styleBase["backgroundColor"], flexViewDefinition.opacity / 100);
80
- }
81
- }
82
- if (flexViewDefinition.border) {
83
- styleBase["borderTopStyle"] = "solid";
84
- styleBase["borderRightStyle"] = "solid";
85
- styleBase["borderBottomStyle"] = "solid";
86
- styleBase["borderLeftStyle"] = "solid";
87
- styleBase["borderTopColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaName, flexViewDefinition.border.color);
88
- styleBase["borderRightColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaName, flexViewDefinition.border.color);
89
- styleBase["borderBottomColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaName, flexViewDefinition.border.color);
90
- styleBase["borderLeftColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaName, flexViewDefinition.border.color);
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);
91
145
  }
92
146
  }
93
147
  return VelcronStyles.styleProvider(styleBase, definition, renderCtx);