@openremote/or-json-forms 1.8.0-snapshot.20250725070921 → 1.8.0-snapshot.20250725120000
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 +113 -113
- package/custom-elements.json +2 -2
- package/dist/umd/index.js +1105 -1105
- package/dist/umd/index.js.map +1 -1
- package/dist/umd/index.orbundle.js +1163 -1163
- package/dist/umd/index.orbundle.js.map +1 -1
- package/lib/base-element.js +57 -1
- package/lib/controls/control-array-element.js +277 -83
- package/lib/controls/control-base-element.js +48 -1
- package/lib/controls/control-input-element.js +157 -20
- package/lib/index.js +141 -7
- package/lib/layouts/layout-base-element.js +29 -1
- package/lib/layouts/layout-vertical-element.js +340 -128
- package/lib/standard-renderers.js +188 -12
- package/lib/styles.js +156 -148
- package/lib/util.js +291 -23
- package/package.json +4 -4
|
@@ -1,21 +1,158 @@
|
|
|
1
|
-
var __decorate=this&&this.__decorate
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { InputType } from "@openremote/or-mwc-components/or-mwc-input";
|
|
8
|
+
import { css, html } from "lit";
|
|
9
|
+
import { customElement } from "lit/decorators.js";
|
|
10
|
+
import { ControlBaseElement } from "./control-base-element";
|
|
11
|
+
import { baseStyle } from "../styles";
|
|
12
|
+
import { isBooleanControl, isEnumControl, isIntegerControl, isNumberControl, isOneOfEnumControl, isStringControl } from "@jsonforms/core";
|
|
13
|
+
import { isEnumArray } from "../standard-renderers";
|
|
14
|
+
// language=CSS
|
|
15
|
+
const style = css `
|
|
16
|
+
or-mwc-input {
|
|
17
|
+
width: 100%;
|
|
18
|
+
}
|
|
19
|
+
`;
|
|
20
|
+
let ControlInputElement = class ControlInputElement extends ControlBaseElement {
|
|
21
|
+
static get styles() {
|
|
22
|
+
return [
|
|
23
|
+
baseStyle,
|
|
24
|
+
style
|
|
25
|
+
];
|
|
4
26
|
}
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
27
|
+
render() {
|
|
28
|
+
var _a;
|
|
29
|
+
const uischema = this.uischema;
|
|
30
|
+
const schema = this.schema;
|
|
31
|
+
const format = this.schema.format;
|
|
32
|
+
const context = { rootSchema: this.rootSchema, config: this.config };
|
|
33
|
+
this.inputType = InputType.TEXT;
|
|
34
|
+
let step;
|
|
35
|
+
let min;
|
|
36
|
+
let minLength;
|
|
37
|
+
let max;
|
|
38
|
+
let maxLength;
|
|
39
|
+
let pattern;
|
|
40
|
+
let options;
|
|
41
|
+
let multiple = false;
|
|
42
|
+
let value = (_a = this.data) !== null && _a !== void 0 ? _a : schema.default;
|
|
43
|
+
if (Array.isArray(schema.type)) {
|
|
44
|
+
this.inputType = InputType.JSON;
|
|
45
|
+
}
|
|
46
|
+
else if (isBooleanControl(uischema, schema, context)) {
|
|
47
|
+
this.inputType = InputType.CHECKBOX;
|
|
48
|
+
}
|
|
49
|
+
else if (isNumberControl(uischema, schema, context) || isIntegerControl(uischema, schema, context)) {
|
|
50
|
+
step = isNumberControl(uischema, schema, context) ? 0.1 : 1;
|
|
51
|
+
this.inputType = InputType.NUMBER;
|
|
52
|
+
min = schema.minimum;
|
|
53
|
+
max = schema.maximum;
|
|
54
|
+
step = schema.multipleOf || step;
|
|
55
|
+
if (min !== undefined && max !== undefined && format === "or-range") {
|
|
56
|
+
// Limit to 200 graduations
|
|
57
|
+
if ((max - min) / step <= 200) {
|
|
58
|
+
this.inputType = InputType.RANGE;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
else if (isEnumControl(uischema, schema, context)
|
|
63
|
+
|| isOneOfEnumControl(uischema, schema, context)
|
|
64
|
+
|| isEnumArray(uischema, schema, context)) {
|
|
65
|
+
this.inputType = InputType.SELECT;
|
|
66
|
+
if (isEnumControl(uischema, schema, context)) {
|
|
67
|
+
options = schema.enum.map(enm => {
|
|
68
|
+
return [JSON.stringify(enm), String(enm)];
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
else if (isOneOfEnumControl(uischema, schema, context)) {
|
|
72
|
+
options = schema.oneOf.map(s => {
|
|
73
|
+
return [JSON.stringify(s.const), String(s.const)];
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
else {
|
|
77
|
+
multiple = true;
|
|
78
|
+
if (schema.items.oneOf) {
|
|
79
|
+
options = schema.items.oneOf.map(s => {
|
|
80
|
+
return [JSON.stringify(s.const), String(s.const)];
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
else {
|
|
84
|
+
options = schema.items.enum.map(enm => {
|
|
85
|
+
return [JSON.stringify(enm), String(enm)];
|
|
86
|
+
});
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
if (multiple) {
|
|
90
|
+
value = Array.isArray(value) ? value.map(v => JSON.stringify(v)) : value !== undefined ? [JSON.stringify(value)] : undefined;
|
|
91
|
+
}
|
|
92
|
+
else {
|
|
93
|
+
value = value !== undefined ? JSON.stringify(value) : undefined;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
else if (isStringControl(uischema, schema, context)) {
|
|
97
|
+
minLength = schema.minLength;
|
|
98
|
+
maxLength = schema.maxLength;
|
|
99
|
+
pattern = schema.pattern;
|
|
100
|
+
if (format === "date-time") {
|
|
101
|
+
this.inputType = InputType.DATETIME;
|
|
102
|
+
}
|
|
103
|
+
else if (format === "date") {
|
|
104
|
+
this.inputType = InputType.DATE;
|
|
105
|
+
}
|
|
106
|
+
else if (format === "time") {
|
|
107
|
+
this.inputType = InputType.TIME;
|
|
108
|
+
}
|
|
109
|
+
else if (format === "email") {
|
|
110
|
+
this.inputType = InputType.EMAIL;
|
|
111
|
+
}
|
|
112
|
+
else if (format === "tel") {
|
|
113
|
+
this.inputType = InputType.TELEPHONE;
|
|
114
|
+
}
|
|
115
|
+
else if (format === "or-multiline") {
|
|
116
|
+
this.inputType = InputType.TEXTAREA;
|
|
117
|
+
}
|
|
118
|
+
else if (format === "or-password" || schema.writeOnly) {
|
|
119
|
+
this.inputType = InputType.PASSWORD;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
return html `<or-mwc-input
|
|
123
|
+
.label="${this.label}"
|
|
124
|
+
.type="${this.inputType}"
|
|
125
|
+
.disabled="${!this.enabled}"
|
|
126
|
+
.required="${!!this.required}"
|
|
127
|
+
.id="${this.id}"
|
|
128
|
+
.options="${options}"
|
|
129
|
+
.multiple="${multiple}"
|
|
130
|
+
@or-mwc-input-changed="${(e) => this.onValueChanged(e)}"
|
|
131
|
+
.maxLength="${maxLength}"
|
|
132
|
+
.minLength="${minLength}"
|
|
133
|
+
.pattern="${pattern}"
|
|
134
|
+
.validationMessage="${this.errors}"
|
|
135
|
+
.step="${step}"
|
|
136
|
+
.max="${max}"
|
|
137
|
+
.min="${min}"
|
|
138
|
+
.value="${value}"></or-mwc-input>`;
|
|
139
|
+
}
|
|
140
|
+
onValueChanged(e) {
|
|
141
|
+
if (this.inputType === InputType.SELECT) {
|
|
142
|
+
if (Array.isArray(e.detail.value)) {
|
|
143
|
+
this.handleChange(this.path, e.detail.value.map((v) => JSON.parse(v)));
|
|
144
|
+
}
|
|
145
|
+
else {
|
|
146
|
+
this.handleChange(this.path, JSON.parse(e.detail.value));
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
else {
|
|
150
|
+
this.handleChange(this.path, e.detail.value);
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
};
|
|
154
|
+
ControlInputElement = __decorate([
|
|
155
|
+
customElement("or-json-forms-input-control")
|
|
156
|
+
], ControlInputElement);
|
|
157
|
+
export { ControlInputElement };
|
|
158
|
+
//# sourceMappingURL=control-input-element.js.map
|
package/lib/index.js
CHANGED
|
@@ -1,9 +1,143 @@
|
|
|
1
|
-
var __decorate=this&&this.__decorate
|
|
2
|
-
.
|
|
3
|
-
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { css, html, LitElement } from "lit";
|
|
8
|
+
import { customElement, property, state } from "lit/decorators.js";
|
|
9
|
+
import { Actions, configReducer, coreReducer, createAjv, generateDefaultUISchema, generateJsonSchema, mapStateToJsonFormsRendererProps, setConfig } from "@jsonforms/core";
|
|
10
|
+
import { getTemplateWrapper, StandardRenderers } from "./standard-renderers";
|
|
11
|
+
import { getLabel, getTemplateFromProps } from "./util";
|
|
12
|
+
import { baseStyle } from "./styles";
|
|
13
|
+
import { Util } from "@openremote/core";
|
|
14
|
+
export { StandardRenderers, getTemplateWrapper };
|
|
15
|
+
// language=CSS
|
|
16
|
+
const styles = css `
|
|
17
|
+
.delete-container {
|
|
18
|
+
width: 0;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.item-container {
|
|
22
|
+
margin: 0; /* Remove inherited margin */
|
|
23
|
+
}
|
|
24
|
+
`;
|
|
25
|
+
let OrJSONForms = class OrJSONForms extends LitElement {
|
|
26
|
+
constructor() {
|
|
27
|
+
super(...arguments);
|
|
28
|
+
this.renderers = StandardRenderers;
|
|
29
|
+
this.readonly = false;
|
|
30
|
+
this.required = false;
|
|
31
|
+
this.previousErrors = [];
|
|
4
32
|
}
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
33
|
+
static get styles() {
|
|
34
|
+
return [
|
|
35
|
+
baseStyle,
|
|
36
|
+
styles
|
|
37
|
+
];
|
|
8
38
|
}
|
|
9
|
-
|
|
39
|
+
checkValidity() {
|
|
40
|
+
return this.previousErrors.length === 0;
|
|
41
|
+
}
|
|
42
|
+
shouldUpdate(_changedProperties) {
|
|
43
|
+
super.shouldUpdate(_changedProperties);
|
|
44
|
+
if (!this.schema) {
|
|
45
|
+
this.schema = this.data !== undefined ? generateJsonSchema(this.data) : {};
|
|
46
|
+
}
|
|
47
|
+
if (!this.uischema) {
|
|
48
|
+
this.uischema = generateDefaultUISchema(this.schema);
|
|
49
|
+
}
|
|
50
|
+
if (!this.core) {
|
|
51
|
+
this.core = {
|
|
52
|
+
ajv: createAjv({ useDefaults: true, validateFormats: false }),
|
|
53
|
+
data: {},
|
|
54
|
+
schema: this.schema,
|
|
55
|
+
uischema: this.uischema
|
|
56
|
+
};
|
|
57
|
+
this.updateCore(Actions.init(this.data, this.schema, this.uischema));
|
|
58
|
+
this.config = configReducer(undefined, setConfig(this.config));
|
|
59
|
+
}
|
|
60
|
+
if (_changedProperties.has("data") || _changedProperties.has("schema") || _changedProperties.has("uischema")) {
|
|
61
|
+
this.updateCore(Actions.updateCore(this.data, this.schema, this.uischema));
|
|
62
|
+
}
|
|
63
|
+
if (!this.contextValue || _changedProperties.has("core") || _changedProperties.has("renderers") || _changedProperties.has("cells") || _changedProperties.has("config") || _changedProperties.has("readonly")) {
|
|
64
|
+
this.contextValue = {
|
|
65
|
+
core: this.core,
|
|
66
|
+
renderers: this.renderers,
|
|
67
|
+
cells: this.cells,
|
|
68
|
+
config: this.config,
|
|
69
|
+
uischemas: this.uischemas,
|
|
70
|
+
readonly: this.readonly,
|
|
71
|
+
dispatch: (action) => this.updateCore(action)
|
|
72
|
+
};
|
|
73
|
+
}
|
|
74
|
+
if (_changedProperties.has("core")) {
|
|
75
|
+
const data = this.core.data;
|
|
76
|
+
const errors = this.core.errors;
|
|
77
|
+
if (this.onChange && (!Util.objectsEqual(data, this.previousData, true) || (errors && !Util.objectsEqual(errors, this.previousErrors, true)))) {
|
|
78
|
+
this.previousErrors = errors || [];
|
|
79
|
+
this.previousData = data;
|
|
80
|
+
this.onChange({ data: data, errors: errors });
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
return true;
|
|
84
|
+
}
|
|
85
|
+
updateCore(coreAction) {
|
|
86
|
+
const coreState = coreReducer(this.core, coreAction);
|
|
87
|
+
if (coreState !== this.core) {
|
|
88
|
+
this.core = coreState;
|
|
89
|
+
}
|
|
90
|
+
return coreAction;
|
|
91
|
+
}
|
|
92
|
+
render() {
|
|
93
|
+
if (!this.contextValue) {
|
|
94
|
+
return html ``;
|
|
95
|
+
}
|
|
96
|
+
const props = Object.assign(Object.assign({}, mapStateToJsonFormsRendererProps({ jsonforms: Object.assign({}, this.contextValue) }, this)), { label: getLabel(this.schema, this.uischema, this.label, undefined) || "", required: this.required });
|
|
97
|
+
return getTemplateFromProps(this.contextValue, props) || html ``;
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
__decorate([
|
|
101
|
+
property({ type: Object })
|
|
102
|
+
], OrJSONForms.prototype, "uischema", void 0);
|
|
103
|
+
__decorate([
|
|
104
|
+
property({ type: Object })
|
|
105
|
+
], OrJSONForms.prototype, "schema", void 0);
|
|
106
|
+
__decorate([
|
|
107
|
+
property({ type: Object, attribute: false })
|
|
108
|
+
], OrJSONForms.prototype, "data", void 0);
|
|
109
|
+
__decorate([
|
|
110
|
+
property({ type: Array })
|
|
111
|
+
], OrJSONForms.prototype, "renderers", void 0);
|
|
112
|
+
__decorate([
|
|
113
|
+
property({ type: Array })
|
|
114
|
+
], OrJSONForms.prototype, "cells", void 0);
|
|
115
|
+
__decorate([
|
|
116
|
+
property({ type: String, attribute: false })
|
|
117
|
+
], OrJSONForms.prototype, "onChange", void 0);
|
|
118
|
+
__decorate([
|
|
119
|
+
property({ type: String, attribute: false })
|
|
120
|
+
], OrJSONForms.prototype, "config", void 0);
|
|
121
|
+
__decorate([
|
|
122
|
+
property({ type: Array })
|
|
123
|
+
], OrJSONForms.prototype, "uischemas", void 0);
|
|
124
|
+
__decorate([
|
|
125
|
+
property({ type: Boolean })
|
|
126
|
+
], OrJSONForms.prototype, "readonly", void 0);
|
|
127
|
+
__decorate([
|
|
128
|
+
property({ type: String })
|
|
129
|
+
], OrJSONForms.prototype, "label", void 0);
|
|
130
|
+
__decorate([
|
|
131
|
+
property({ type: Boolean })
|
|
132
|
+
], OrJSONForms.prototype, "required", void 0);
|
|
133
|
+
__decorate([
|
|
134
|
+
state()
|
|
135
|
+
], OrJSONForms.prototype, "core", void 0);
|
|
136
|
+
__decorate([
|
|
137
|
+
state()
|
|
138
|
+
], OrJSONForms.prototype, "contextValue", void 0);
|
|
139
|
+
OrJSONForms = __decorate([
|
|
140
|
+
customElement("or-json-forms")
|
|
141
|
+
], OrJSONForms);
|
|
142
|
+
export { OrJSONForms };
|
|
143
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1,29 @@
|
|
|
1
|
-
var __decorate=this&&this.__decorate
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { property } from "lit/decorators.js";
|
|
8
|
+
import { BaseElement } from "../base-element";
|
|
9
|
+
export class LayoutBaseElement extends BaseElement {
|
|
10
|
+
constructor() {
|
|
11
|
+
super(...arguments);
|
|
12
|
+
this.direction = "column";
|
|
13
|
+
}
|
|
14
|
+
getChildProps() {
|
|
15
|
+
return (this.uischema && this.uischema.elements ? this.uischema.elements : []).map((el) => {
|
|
16
|
+
const props = {
|
|
17
|
+
renderers: this.renderers,
|
|
18
|
+
uischema: el,
|
|
19
|
+
schema: this.schema,
|
|
20
|
+
path: this.path
|
|
21
|
+
};
|
|
22
|
+
return props;
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
__decorate([
|
|
27
|
+
property({ type: String })
|
|
28
|
+
], LayoutBaseElement.prototype, "direction", void 0);
|
|
29
|
+
//# sourceMappingURL=layout-base-element.js.map
|