@omnia/velcron 7.0.502-dev → 7.0.503-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.
@@ -2,24 +2,26 @@ import { VelcronComponentDescriptor } from "./VelcronDescriptors";
2
2
  import { VelcronEvent, VelcronOnChangedEvent, VelcronOnClosedEvent, VelcronOnCloseRequestedEvent, VelcronOnLoadEvent, VelcronOnPressEvent } from "./VelcronEvents";
3
3
  import { VelcroncomponentArrayType, VelcronPrimitiveType } from "./VelcronTypes";
4
4
  import { AssignOperators, VelcronHorizontalAlignments, VelcronIconTypes, VelcronActionTypes, VelcronSectionColumnWidthTypes, VerticalAlignments } from "./Enums";
5
+ import { VelcronTheming } from "..";
5
6
  export interface ResolvedComponentRenderer {
6
- component: any;
7
+ component: unknown;
7
8
  definition: VelcronDefinition;
8
9
  customComponent: boolean;
9
10
  }
10
11
  export interface BuiltInComponentRenderers {
11
- "View": any;
12
- "Card": any;
13
- "Text": any;
14
- "Image": any;
15
- "Button": any;
16
- "TextInput": any;
17
- "ProgressCircle": any;
18
- "WebView": any;
19
- "CustomComponent": any;
20
- "Dialog": any;
21
- "FlexView": any;
22
- "Icon": any;
12
+ "View": unknown;
13
+ "Card": unknown;
14
+ "Text": unknown;
15
+ "Image": unknown;
16
+ "Button": unknown;
17
+ "TextInput": unknown;
18
+ "ProgressCircle": unknown;
19
+ "WebView": unknown;
20
+ "CustomComponent": unknown;
21
+ "Dialog": unknown;
22
+ "FlexView": unknown;
23
+ "Icon": unknown;
24
+ "Chip": unknown;
23
25
  }
24
26
  export type DynamicViewModel = object;
25
27
  export interface OnItemRenderedHookResult {
@@ -30,6 +32,7 @@ export interface VelcronRenderContext {
30
32
  id?: string;
31
33
  rootContext: DynamicViewModel;
32
34
  currentContext: DynamicViewModel;
35
+ theming?: VelcronTheming;
33
36
  actions?: {
34
37
  [name: string]: [];
35
38
  };
@@ -213,6 +216,14 @@ export interface VelcronFlexViewDefinition extends VelcronDefinition {
213
216
  export interface VelcronSectionColumnWidth {
214
217
  type: VelcronSectionColumnWidthTypes;
215
218
  }
219
+ export interface VelcronChipDefinition extends VelcronDefinition {
220
+ type: "Chip";
221
+ text: string;
222
+ colorSchema: string;
223
+ icon?: VelcronIcon;
224
+ disabled?: boolean;
225
+ events?: VelcronOnPressEvent;
226
+ }
216
227
  /*** Custom Components ***********************************************************************/
217
228
  export type VelcronCustomComponentDefinition = VelcronComponentDescriptor & VelcronComponentDefinition;
218
229
  export type VelcronRenderProps<TDefinition> = {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@omnia/velcron",
3
3
  "license": "MIT",
4
- "version": "7.0.502-dev",
4
+ "version": "7.0.503-dev",
5
5
  "description": "Provide Omnia Velcron Stuffs.",
6
6
  "scripts": {
7
7
  "test": "echo \"Error: no test specified\" && exit 1"
@@ -12,6 +12,7 @@ export declare const VelcronConstants: {
12
12
  dialog: string;
13
13
  flexView: string;
14
14
  icon: string;
15
+ chip: string;
15
16
  };
16
17
  events: {
17
18
  idTokenStart: string;
@@ -14,7 +14,8 @@ exports.VelcronConstants = {
14
14
  webView: "WebView",
15
15
  dialog: "Dialog",
16
16
  flexView: "FlexView",
17
- icon: "Icon"
17
+ icon: "Icon",
18
+ chip: "Chip"
18
19
  },
19
20
  events: {
20
21
  idTokenStart: "$ev{",
@@ -13,10 +13,6 @@ class VelcronRenderers {
13
13
  throw `Velcron Component of type ${type} is already registered`;
14
14
  }
15
15
  }
16
- // private static reactivePropertyCreator: (objToCreateOn: object, propertyName: string, value: any ) => void
17
- // static registerReactiveObjectCreator(reactivePropertyCreator: (objToCreateOn: object, propertyName: string, value: any) => void){
18
- // this.reactivePropertyCreator = reactivePropertyCreator;
19
- // }
20
16
  static hasComponents() {
21
17
  return Object.keys(this.components).length > 0;
22
18
  }
@@ -69,6 +65,7 @@ class VelcronRenderers {
69
65
  if (rendererInfo.customComponent || newViewModel) {
70
66
  result = {
71
67
  rootContext: currentRenderCtx.rootContext,
68
+ theming: currentRenderCtx.theming,
72
69
  currentContext: newViewModel ? newViewModel : currentRenderCtx.currentContext,
73
70
  actions: currentRenderCtx.actions,
74
71
  components: currentRenderCtx.components,
@@ -86,10 +83,6 @@ class VelcronRenderers {
86
83
  VelcronLogger_1.VelcronLogger.logCustomComponentError(`Component of type ${customDef.type} requires property ${propName} but its missing`);
87
84
  }
88
85
  result.properties = result.properties || {};
89
- //Callback to reactive property creator (for example vue register to make it using Vue.set but can be different in react etc)
90
- // if(!result.properties){
91
- // this.reactivePropertyCreator(result, 'properties', {});
92
- // }
93
86
  if (definition.hasOwnProperty(propName)) {
94
87
  if (VelcronData_1.VelcronData.isString(definition[propName])) {
95
88
  //Properties can be databound so if its a string we try do databind
@@ -0,0 +1,13 @@
1
+ import { ColorSchema, ThemeDefinitionV2, TypographyType } from "..";
2
+ import { VelcronStore } from "./VelcronStore";
3
+ export declare class VelcronTheming extends VelcronStore {
4
+ currentTheme: ThemeDefinitionV2;
5
+ private activeSchemaState;
6
+ typography: (name: string) => TypographyType;
7
+ activeColorSchema: () => ColorSchema;
8
+ getColorFromActiveSchema: (name: any) => string;
9
+ mutations: {
10
+ setActiveSchema: (name: string) => void;
11
+ setTheme: (newTheme: ThemeDefinitionV2) => void;
12
+ };
13
+ }
@@ -0,0 +1,96 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.VelcronTheming = void 0;
4
+ const __1 = require("..");
5
+ const VelcronStore_1 = require("./VelcronStore");
6
+ class VelcronTheming extends VelcronStore_1.VelcronStore {
7
+ constructor() {
8
+ super(...arguments);
9
+ this.currentTheme = this.state({});
10
+ this.activeSchemaState = this.state("");
11
+ this.typography = (name) => {
12
+ if (name === __1.TypographyTypes.h1) {
13
+ return this.currentTheme.typography.h1;
14
+ }
15
+ else if (name === __1.TypographyTypes.h2) {
16
+ return this.currentTheme.typography.h2;
17
+ }
18
+ else if (name === __1.TypographyTypes.h3) {
19
+ return this.currentTheme.typography.h3;
20
+ }
21
+ else if (name === __1.TypographyTypes.caption) {
22
+ return this.currentTheme.typography.caption;
23
+ }
24
+ else if (name === __1.TypographyTypes.link) {
25
+ return this.currentTheme.typography.link;
26
+ }
27
+ else if (name === __1.TypographyTypes.text) {
28
+ return this.currentTheme.typography.text;
29
+ }
30
+ return this.currentTheme.typography.text;
31
+ };
32
+ this.activeColorSchema = () => {
33
+ if (this.activeSchemaState === __1.ColorSchemaTypes.primary) {
34
+ return this.currentTheme.primary;
35
+ }
36
+ else if (this.activeSchemaState === __1.ColorSchemaTypes.secondary) {
37
+ return this.currentTheme.secondary;
38
+ }
39
+ else if (this.activeSchemaState === __1.ColorSchemaTypes.accent1) {
40
+ return this.currentTheme.accent1;
41
+ }
42
+ else if (this.activeSchemaState === __1.ColorSchemaTypes.accent2) {
43
+ return this.currentTheme.accent2;
44
+ }
45
+ else if (this.activeSchemaState === __1.ColorSchemaTypes.accent3) {
46
+ return this.currentTheme.accent3;
47
+ }
48
+ else if (this.activeSchemaState === __1.ColorSchemaTypes.background) {
49
+ return this.currentTheme.background;
50
+ }
51
+ else if (this.activeSchemaState === __1.ColorSchemaTypes.neutral) {
52
+ return this.currentTheme.neutral;
53
+ }
54
+ else if (this.activeSchemaState === __1.ColorSchemaTypes.error) {
55
+ return this.currentTheme.error;
56
+ }
57
+ return this.currentTheme.background;
58
+ };
59
+ this.getColorFromActiveSchema = (name) => {
60
+ if (name === __1.ColorTypes.base) {
61
+ return this.activeColorSchema().base.color;
62
+ }
63
+ else if (name === __1.ColorTypes.baseTone) {
64
+ return this.activeColorSchema().base.colorToned;
65
+ }
66
+ else if (name === __1.ColorTypes.onBase) {
67
+ return this.activeColorSchema().onBase.color;
68
+ }
69
+ else if (name === __1.ColorTypes.onBaseTone) {
70
+ return this.activeColorSchema().onBase.colorToned;
71
+ }
72
+ else if (name === __1.ColorTypes.container) {
73
+ return this.activeColorSchema().container.color;
74
+ }
75
+ else if (name === __1.ColorTypes.containerTone) {
76
+ return this.activeColorSchema().container.colorToned;
77
+ }
78
+ else if (name === __1.ColorTypes.onContainer) {
79
+ return this.activeColorSchema().onContainer.color;
80
+ }
81
+ else if (name === __1.ColorTypes.onContainerTone) {
82
+ return this.activeColorSchema().onContainer.colorToned;
83
+ }
84
+ return name;
85
+ };
86
+ this.mutations = {
87
+ setActiveSchema: (name) => {
88
+ this.activeSchemaState = name;
89
+ },
90
+ setTheme: (newTheme) => {
91
+ this.currentTheme = newTheme;
92
+ }
93
+ };
94
+ }
95
+ }
96
+ exports.VelcronTheming = VelcronTheming;
package/stores/index.d.ts CHANGED
@@ -1 +1,2 @@
1
1
  export * from "./VelcronStore";
2
+ export * from "./VelcronTheming";
package/stores/index.js CHANGED
@@ -2,3 +2,4 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  tslib_1.__exportStar(require("./VelcronStore"), exports);
5
+ tslib_1.__exportStar(require("./VelcronTheming"), exports);