@web-atoms/web-controls 2.1.1 → 2.1.2
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/dist/form/AtomField.d.ts +20 -2
- package/dist/form/AtomField.d.ts.map +1 -1
- package/dist/form/AtomField.js +105 -2
- package/dist/form/AtomField.js.map +1 -1
- package/dist/form/AtomForm.d.ts +0 -6
- package/dist/form/AtomForm.d.ts.map +1 -1
- package/dist/form/AtomForm.js +17 -20
- package/dist/form/AtomForm.js.map +1 -1
- package/package.json +2 -2
- package/src/form/AtomField.tsx +185 -0
- package/src/form/AtomForm.ts +17 -22
- package/dist/form/AtomFieldTemplate.d.ts +0 -10
- package/dist/form/AtomFieldTemplate.d.ts.map +0 -1
- package/dist/form/AtomFieldTemplate.js +0 -32
- package/dist/form/AtomFieldTemplate.js.map +0 -1
- package/dist/form/DefaultFieldTemplate.d.ts +0 -5
- package/dist/form/DefaultFieldTemplate.d.ts.map +0 -1
- package/dist/form/DefaultFieldTemplate.js +0 -31
- package/dist/form/DefaultFieldTemplate.js.map +0 -1
- package/src/form/AtomField.ts +0 -73
- package/src/form/AtomFieldTemplate.ts +0 -31
- package/src/form/DefaultFieldTemplate.tsx +0 -30
package/dist/form/AtomField.d.ts
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
|
+
import { IClassOf } from "@web-atoms/core/dist/core/types";
|
|
2
|
+
import XNode from "@web-atoms/core/dist/core/XNode";
|
|
1
3
|
import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
|
|
2
4
|
export { default as HP } from "./HelpPopup";
|
|
3
|
-
|
|
5
|
+
declare class AtomFieldControl extends AtomControl {
|
|
6
|
+
icon: string;
|
|
4
7
|
label: string;
|
|
5
8
|
error: string;
|
|
6
9
|
helpText: string;
|
|
@@ -9,10 +12,25 @@ export default class AtomField extends AtomControl {
|
|
|
9
12
|
required: boolean;
|
|
10
13
|
visible: boolean;
|
|
11
14
|
fieldClass: string;
|
|
15
|
+
content: any;
|
|
12
16
|
get hasError(): boolean;
|
|
13
17
|
get hasHelp(): boolean;
|
|
14
|
-
|
|
18
|
+
protected contentPresenter: any;
|
|
19
|
+
protected htmlFor: any;
|
|
20
|
+
onPropertyChanged(name: keyof AtomFieldControl): void;
|
|
15
21
|
openHelp(): Promise<void>;
|
|
16
22
|
protected preCreate(): void;
|
|
17
23
|
}
|
|
24
|
+
export interface IFieldAttributes {
|
|
25
|
+
label?: any;
|
|
26
|
+
error?: any;
|
|
27
|
+
helpText?: any;
|
|
28
|
+
helpLink?: any;
|
|
29
|
+
helpIcon?: any;
|
|
30
|
+
required?: any;
|
|
31
|
+
visible?: any;
|
|
32
|
+
fieldClass?: any;
|
|
33
|
+
baseClass?: IClassOf<AtomFieldControl>;
|
|
34
|
+
}
|
|
35
|
+
export default function AtomField({ label, error, helpText, helpLink, helpIcon, required, visible, fieldClass, baseClass: controlClass }: IFieldAttributes, child: XNode): any;
|
|
18
36
|
//# sourceMappingURL=AtomField.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AtomField.d.ts","sourceRoot":"","sources":["../../src/form/AtomField.
|
|
1
|
+
{"version":3,"file":"AtomField.d.ts","sourceRoot":"","sources":["../../src/form/AtomField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,KAAK,MAAM,iCAAiC,CAAC;AAGpD,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,EAAE,EAAE,MAAM,aAAa,CAAC;AAI5C,cAAM,gBAAiB,SAAQ,WAAW;IAG/B,IAAI,EAAE,MAAM,CAAC;IAGb,KAAK,EAAE,MAAM,CAAC;IAGd,KAAK,EAAE,MAAM,CAAC;IAGd,QAAQ,EAAE,MAAM,CAAC;IAGjB,QAAQ,EAAE,MAAM,CAAC;IAGjB,QAAQ,EAAE,MAAM,CAAC;IAGjB,QAAQ,EAAE,OAAO,CAAC;IAGlB,OAAO,EAAE,OAAO,CAAC;IAGjB,UAAU,EAAE,MAAM,CAAC;IAGnB,OAAO,EAAE,GAAG,CAAC;IAEpB,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,IAAW,OAAO,IAAI,OAAO,CAE5B;IAGD,SAAS,CAAC,gBAAgB,EAAE,GAAG,CAAC;IAGhC,SAAS,CAAC,OAAO,EAAE,GAAG,CAAC;IAEhB,iBAAiB,CAAC,IAAI,EAAE,MAAM,gBAAgB,GAAG,IAAI;IAmC/C,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAiBtC,SAAS,CAAC,SAAS;CAqCtB;AAED,MAAM,WAAW,gBAAgB;IAC7B,KAAK,CAAC,MAAC;IACP,KAAK,CAAC,MAAC;IACP,QAAQ,CAAC,MAAC;IACV,QAAQ,CAAC,MAAC;IACV,QAAQ,CAAC,MAAC;IACV,QAAQ,CAAC,MAAC;IACV,OAAO,CAAC,MAAC;IACT,UAAU,CAAC,MAAC;IACZ,SAAS,CAAC,EAAE,QAAQ,CAAC,gBAAgB,CAAC,CAAC;CAC1C;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAC9B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,OAAc,EACd,UAAiB,EACjB,SAAS,EAAE,YAA+B,EAC7C,EAAE,gBAAgB,EAAe,KAAK,EAAE,KAAK,OAa7C"}
|
package/dist/form/AtomField.js
CHANGED
|
@@ -1,3 +1,12 @@
|
|
|
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
|
+
var __metadata = (this && this.__metadata) || function (k, v) {
|
|
8
|
+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
|
9
|
+
};
|
|
1
10
|
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
11
|
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
12
|
return new (P || (P = Promise))(function (resolve, reject) {
|
|
@@ -13,18 +22,22 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
13
22
|
if (v !== undefined) module.exports = v;
|
|
14
23
|
}
|
|
15
24
|
else if (typeof define === "function" && define.amd) {
|
|
16
|
-
define(["require", "exports", "@web-atoms/core/dist/core/AtomBinder", "@web-atoms/core/dist/services/NavigationService", "@web-atoms/core/dist/web/controls/AtomControl", "./HelpPopup"], factory);
|
|
25
|
+
define(["require", "exports", "@web-atoms/core/dist/core/AtomBinder", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/BindableProperty", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/services/NavigationService", "@web-atoms/core/dist/web/controls/AtomControl", "./HelpPopup"], factory);
|
|
17
26
|
}
|
|
18
27
|
})(function (require, exports) {
|
|
19
28
|
"use strict";
|
|
20
29
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
21
30
|
exports.HP = void 0;
|
|
22
31
|
const AtomBinder_1 = require("@web-atoms/core/dist/core/AtomBinder");
|
|
32
|
+
const Bind_1 = require("@web-atoms/core/dist/core/Bind");
|
|
33
|
+
const BindableProperty_1 = require("@web-atoms/core/dist/core/BindableProperty");
|
|
34
|
+
const XNode_1 = require("@web-atoms/core/dist/core/XNode");
|
|
23
35
|
const NavigationService_1 = require("@web-atoms/core/dist/services/NavigationService");
|
|
24
36
|
const AtomControl_1 = require("@web-atoms/core/dist/web/controls/AtomControl");
|
|
25
37
|
var HelpPopup_1 = require("./HelpPopup");
|
|
26
38
|
Object.defineProperty(exports, "HP", { enumerable: true, get: function () { return HelpPopup_1.default; } });
|
|
27
|
-
|
|
39
|
+
let inputID = 0;
|
|
40
|
+
class AtomFieldControl extends AtomControl_1.AtomControl {
|
|
28
41
|
get hasError() {
|
|
29
42
|
return this.error ? true : false;
|
|
30
43
|
}
|
|
@@ -32,6 +45,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
32
45
|
return (this.helpText || this.helpLink) ? true : false;
|
|
33
46
|
}
|
|
34
47
|
onPropertyChanged(name) {
|
|
48
|
+
var _a, _b;
|
|
35
49
|
switch (name) {
|
|
36
50
|
case "error":
|
|
37
51
|
AtomBinder_1.AtomBinder.refreshValue(this, "hasError");
|
|
@@ -40,6 +54,29 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
40
54
|
case "helpText":
|
|
41
55
|
AtomBinder_1.AtomBinder.refreshValue(this, "hasHelp");
|
|
42
56
|
break;
|
|
57
|
+
case "content":
|
|
58
|
+
if (!this.contentPresenter) {
|
|
59
|
+
setTimeout(() => this.onPropertyChanged(name), 100);
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
this.removeAllChildren(this.contentPresenter);
|
|
63
|
+
const e = (_b = (_a = this.content) === null || _a === void 0 ? void 0 : _a.element) !== null && _b !== void 0 ? _b : this.content;
|
|
64
|
+
if (!e) {
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
if (typeof e === "string") {
|
|
68
|
+
this.contentPresenter.appendChild(document.createTextNode(e));
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
this.contentPresenter.appendChild(e);
|
|
72
|
+
const input = e.tagName === "INPUT" ? e : e.getElementsByTagName("input")[0];
|
|
73
|
+
if (input) {
|
|
74
|
+
if (!input.id) {
|
|
75
|
+
input.id = `__ID__formElementInput${inputID++}`;
|
|
76
|
+
}
|
|
77
|
+
this.htmlFor = input.id;
|
|
78
|
+
}
|
|
79
|
+
break;
|
|
43
80
|
}
|
|
44
81
|
}
|
|
45
82
|
openHelp() {
|
|
@@ -66,8 +103,74 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
66
103
|
this.required = false;
|
|
67
104
|
this.visible = true;
|
|
68
105
|
this.fieldClass = "";
|
|
106
|
+
this.contentPresenter = null;
|
|
107
|
+
this.render(XNode_1.default.create("div", { class: Bind_1.default.oneWay(() => ({
|
|
108
|
+
"form-field": 1,
|
|
109
|
+
[this.fieldClass]: this.fieldClass,
|
|
110
|
+
"has-error": this.error,
|
|
111
|
+
"field-hidden": !this.visible
|
|
112
|
+
})) },
|
|
113
|
+
XNode_1.default.create("label", { class: "label", text: Bind_1.default.oneWay(() => this.label), htmlFor: Bind_1.default.oneWay(() => this.htmlFor) }),
|
|
114
|
+
XNode_1.default.create("span", { class: "required", styleVisibility: Bind_1.default.oneTime(() => this.required ? "visible" : "hidden") }, "*"),
|
|
115
|
+
XNode_1.default.create("div", { presenter: Bind_1.default.presenter("contentPresenter"), class: "presenter" }),
|
|
116
|
+
XNode_1.default.create("span", { class: "error", styleDisplay: Bind_1.default.oneWay(() => this.error ? "" : "none"), text: Bind_1.default.oneWay(() => this.error) })));
|
|
117
|
+
if (this.content) {
|
|
118
|
+
this.onPropertyChanged("content");
|
|
119
|
+
}
|
|
69
120
|
}
|
|
70
121
|
}
|
|
122
|
+
__decorate([
|
|
123
|
+
BindableProperty_1.BindableProperty,
|
|
124
|
+
__metadata("design:type", String)
|
|
125
|
+
], AtomFieldControl.prototype, "icon", void 0);
|
|
126
|
+
__decorate([
|
|
127
|
+
BindableProperty_1.BindableProperty,
|
|
128
|
+
__metadata("design:type", String)
|
|
129
|
+
], AtomFieldControl.prototype, "label", void 0);
|
|
130
|
+
__decorate([
|
|
131
|
+
BindableProperty_1.BindableProperty,
|
|
132
|
+
__metadata("design:type", String)
|
|
133
|
+
], AtomFieldControl.prototype, "error", void 0);
|
|
134
|
+
__decorate([
|
|
135
|
+
BindableProperty_1.BindableProperty,
|
|
136
|
+
__metadata("design:type", String)
|
|
137
|
+
], AtomFieldControl.prototype, "helpText", void 0);
|
|
138
|
+
__decorate([
|
|
139
|
+
BindableProperty_1.BindableProperty,
|
|
140
|
+
__metadata("design:type", String)
|
|
141
|
+
], AtomFieldControl.prototype, "helpLink", void 0);
|
|
142
|
+
__decorate([
|
|
143
|
+
BindableProperty_1.BindableProperty,
|
|
144
|
+
__metadata("design:type", String)
|
|
145
|
+
], AtomFieldControl.prototype, "helpIcon", void 0);
|
|
146
|
+
__decorate([
|
|
147
|
+
BindableProperty_1.BindableProperty,
|
|
148
|
+
__metadata("design:type", Boolean)
|
|
149
|
+
], AtomFieldControl.prototype, "required", void 0);
|
|
150
|
+
__decorate([
|
|
151
|
+
BindableProperty_1.BindableProperty,
|
|
152
|
+
__metadata("design:type", Boolean)
|
|
153
|
+
], AtomFieldControl.prototype, "visible", void 0);
|
|
154
|
+
__decorate([
|
|
155
|
+
BindableProperty_1.BindableProperty,
|
|
156
|
+
__metadata("design:type", String)
|
|
157
|
+
], AtomFieldControl.prototype, "fieldClass", void 0);
|
|
158
|
+
__decorate([
|
|
159
|
+
BindableProperty_1.BindableProperty,
|
|
160
|
+
__metadata("design:type", Object)
|
|
161
|
+
], AtomFieldControl.prototype, "content", void 0);
|
|
162
|
+
__decorate([
|
|
163
|
+
BindableProperty_1.BindableProperty,
|
|
164
|
+
__metadata("design:type", Object)
|
|
165
|
+
], AtomFieldControl.prototype, "contentPresenter", void 0);
|
|
166
|
+
__decorate([
|
|
167
|
+
BindableProperty_1.BindableProperty,
|
|
168
|
+
__metadata("design:type", Object)
|
|
169
|
+
], AtomFieldControl.prototype, "htmlFor", void 0);
|
|
170
|
+
function AtomField({ label, error, helpText, helpLink, helpIcon, required, visible = true, fieldClass = null, baseClass: controlClass = AtomFieldControl }, child) {
|
|
171
|
+
const ControlClass = controlClass;
|
|
172
|
+
return XNode_1.default.create(ControlClass, { label: label, error: error, helpIcon: helpIcon, helpLink: helpLink, helpText: helpText, required: required, visible: visible, fieldClass: fieldClass, content: child });
|
|
173
|
+
}
|
|
71
174
|
exports.default = AtomField;
|
|
72
175
|
});
|
|
73
176
|
//# sourceMappingURL=AtomField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AtomField.js","sourceRoot":"","sources":["../../src/form/AtomField.
|
|
1
|
+
{"version":3,"file":"AtomField.js","sourceRoot":"","sources":["../../src/form/AtomField.tsx"],"names":[],"mappings":"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"}
|
package/dist/form/AtomForm.d.ts
CHANGED
|
@@ -1,14 +1,8 @@
|
|
|
1
|
-
import { IClassOf } from "@web-atoms/core/dist/core/types";
|
|
2
1
|
import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
|
|
3
|
-
import AtomField from "./AtomField";
|
|
4
|
-
import AtomFieldTemplate from "./AtomFieldTemplate";
|
|
5
2
|
export default class AtomForm extends AtomControl {
|
|
6
3
|
/** Submit event fired when enter was pressed on last input on mobile (Done button event) */
|
|
7
4
|
eventSubmit: () => void;
|
|
8
|
-
fieldTemplate: IClassOf<AtomFieldTemplate>;
|
|
9
5
|
focusNextOnEnter: boolean;
|
|
10
|
-
append(e: AtomControl | HTMLElement | Text): AtomControl;
|
|
11
|
-
protected createField(e: AtomField): AtomFieldTemplate;
|
|
12
6
|
protected preCreate(): void;
|
|
13
7
|
protected watchKeyInput(): void;
|
|
14
8
|
protected onKeyPress(e: KeyboardEvent): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AtomForm.d.ts","sourceRoot":"","sources":["../../src/form/AtomForm.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AtomForm.d.ts","sourceRoot":"","sources":["../../src/form/AtomForm.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAG5E,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,WAAW;IAE7C,4FAA4F;IACrF,WAAW,EAAE,MAAM,IAAI,CAAC;IAExB,gBAAgB,EAAE,OAAO,CAAuC;IAsBvE,SAAS,CAAC,SAAS,IAAI,IAAI;IAiB3B,SAAS,CAAC,aAAa,IAAI,IAAI;IAM/B,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAwB5C,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,gBAAgB,GAAG,IAAI;IAWzD,OAAO,CAAC,cAAc;CA+BzB"}
|
package/dist/form/AtomForm.js
CHANGED
|
@@ -4,41 +4,38 @@
|
|
|
4
4
|
if (v !== undefined) module.exports = v;
|
|
5
5
|
}
|
|
6
6
|
else if (typeof define === "function" && define.amd) {
|
|
7
|
-
define(["require", "exports", "@web-atoms/core/dist/core/AtomBridge", "@web-atoms/core/dist/web/controls/AtomControl", "./
|
|
7
|
+
define(["require", "exports", "@web-atoms/core/dist/core/AtomBridge", "@web-atoms/core/dist/web/controls/AtomControl", "./AtomFormStyle"], factory);
|
|
8
8
|
}
|
|
9
9
|
})(function (require, exports) {
|
|
10
10
|
"use strict";
|
|
11
11
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
12
|
const AtomBridge_1 = require("@web-atoms/core/dist/core/AtomBridge");
|
|
13
13
|
const AtomControl_1 = require("@web-atoms/core/dist/web/controls/AtomControl");
|
|
14
|
-
const AtomField_1 = require("./AtomField");
|
|
15
14
|
const AtomFormStyle_1 = require("./AtomFormStyle");
|
|
16
|
-
const DefaultFieldTemplate_1 = require("./DefaultFieldTemplate");
|
|
17
15
|
class AtomForm extends AtomControl_1.AtomControl {
|
|
18
16
|
constructor() {
|
|
19
17
|
super(...arguments);
|
|
20
18
|
this.focusNextOnEnter = /mobile/i.test(navigator.userAgent);
|
|
21
19
|
}
|
|
22
|
-
append(e) {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}
|
|
33
|
-
createField(e) {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}
|
|
20
|
+
// public append(e: AtomControl | HTMLElement | Text): AtomControl {
|
|
21
|
+
// // you can create nested AtomForm
|
|
22
|
+
// if (e instanceof AtomForm) {
|
|
23
|
+
// return super.append(e);
|
|
24
|
+
// }
|
|
25
|
+
// if (!(e instanceof AtomField)) {
|
|
26
|
+
// throw new Error(`Only AtomField or AtomFormGroup can be added inside AtomForm`);
|
|
27
|
+
// }
|
|
28
|
+
// const fieldContainer = this.createField(e);
|
|
29
|
+
// return super.append(fieldContainer);
|
|
30
|
+
// }
|
|
31
|
+
// protected createField(e: AtomField): AtomFieldTemplate {
|
|
32
|
+
// const field = new (this.fieldTemplate)(this.app);
|
|
33
|
+
// field.field = e;
|
|
34
|
+
// return field;
|
|
35
|
+
// }
|
|
38
36
|
preCreate() {
|
|
39
37
|
super.preCreate();
|
|
40
38
|
this.defaultControlStyle = AtomFormStyle_1.default;
|
|
41
|
-
this.fieldTemplate = DefaultFieldTemplate_1.default;
|
|
42
39
|
this.runAfterInit(() => {
|
|
43
40
|
this.element.classList.add(this.controlStyle.name);
|
|
44
41
|
this.app.callLater(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AtomForm.js","sourceRoot":"","sources":["../../src/form/AtomForm.ts"],"names":[],"mappings":";;;;;;;;;;;IACA,qEAAkE;IAGlE,+EAA4E;IAC5E,
|
|
1
|
+
{"version":3,"file":"AtomForm.js","sourceRoot":"","sources":["../../src/form/AtomForm.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@web-atoms/web-controls",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.2",
|
|
4
4
|
"description": "HTML controls for web atoms core",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
},
|
|
19
19
|
"homepage": "https://github.com/web-atoms/web-controls#readme",
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@web-atoms/core": "^2.1.
|
|
21
|
+
"@web-atoms/core": "^2.1.66",
|
|
22
22
|
"@web-atoms/date-time": "^1.0.26",
|
|
23
23
|
"@web-atoms/module-loader": "^2.0.9",
|
|
24
24
|
"reflect-metadata": "^0.1.13"
|
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
import { AtomBinder } from "@web-atoms/core/dist/core/AtomBinder";
|
|
2
|
+
import Bind from "@web-atoms/core/dist/core/Bind";
|
|
3
|
+
import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
|
|
4
|
+
import { IClassOf } from "@web-atoms/core/dist/core/types";
|
|
5
|
+
import XNode from "@web-atoms/core/dist/core/XNode";
|
|
6
|
+
import { NavigationService } from "@web-atoms/core/dist/services/NavigationService";
|
|
7
|
+
import { AtomContentControl } from "@web-atoms/core/dist/web/controls/AtomContentControl";
|
|
8
|
+
import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
|
|
9
|
+
export { default as HP } from "./HelpPopup";
|
|
10
|
+
|
|
11
|
+
let inputID = 0;
|
|
12
|
+
|
|
13
|
+
class AtomFieldControl extends AtomControl {
|
|
14
|
+
|
|
15
|
+
@BindableProperty
|
|
16
|
+
public icon: string;
|
|
17
|
+
|
|
18
|
+
@BindableProperty
|
|
19
|
+
public label: string;
|
|
20
|
+
|
|
21
|
+
@BindableProperty
|
|
22
|
+
public error: string;
|
|
23
|
+
|
|
24
|
+
@BindableProperty
|
|
25
|
+
public helpText: string;
|
|
26
|
+
|
|
27
|
+
@BindableProperty
|
|
28
|
+
public helpLink: string;
|
|
29
|
+
|
|
30
|
+
@BindableProperty
|
|
31
|
+
public helpIcon: string;
|
|
32
|
+
|
|
33
|
+
@BindableProperty
|
|
34
|
+
public required: boolean;
|
|
35
|
+
|
|
36
|
+
@BindableProperty
|
|
37
|
+
public visible: boolean;
|
|
38
|
+
|
|
39
|
+
@BindableProperty
|
|
40
|
+
public fieldClass: string;
|
|
41
|
+
|
|
42
|
+
@BindableProperty
|
|
43
|
+
public content: any;
|
|
44
|
+
|
|
45
|
+
public get hasError(): boolean {
|
|
46
|
+
return this.error ? true : false;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
public get hasHelp(): boolean {
|
|
50
|
+
return (this.helpText || this.helpLink) ? true : false;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@BindableProperty
|
|
54
|
+
protected contentPresenter: any;
|
|
55
|
+
|
|
56
|
+
@BindableProperty
|
|
57
|
+
protected htmlFor: any;
|
|
58
|
+
|
|
59
|
+
public onPropertyChanged(name: keyof AtomFieldControl): void {
|
|
60
|
+
switch (name) {
|
|
61
|
+
case "error":
|
|
62
|
+
AtomBinder.refreshValue(this, "hasError");
|
|
63
|
+
break;
|
|
64
|
+
case "helpLink":
|
|
65
|
+
case "helpText":
|
|
66
|
+
AtomBinder.refreshValue(this, "hasHelp");
|
|
67
|
+
break;
|
|
68
|
+
case "content":
|
|
69
|
+
if (!this.contentPresenter) {
|
|
70
|
+
setTimeout(() => this.onPropertyChanged(name), 100);
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
this.removeAllChildren(this.contentPresenter);
|
|
74
|
+
const e = this.content?.element ?? this.content as HTMLElement;
|
|
75
|
+
if (!e) {
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
if (typeof e === "string") {
|
|
79
|
+
this.contentPresenter.appendChild(document.createTextNode(e));
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
82
|
+
this.contentPresenter.appendChild(e);
|
|
83
|
+
const input = e.tagName === "INPUT" ? e : e.getElementsByTagName("input")[0];
|
|
84
|
+
if (input) {
|
|
85
|
+
if (!input.id) {
|
|
86
|
+
input.id = `__ID__formElementInput${inputID++}`;
|
|
87
|
+
}
|
|
88
|
+
this.htmlFor = input.id;
|
|
89
|
+
}
|
|
90
|
+
break;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
public async openHelp(): Promise<void> {
|
|
95
|
+
const n = this.app.resolve(NavigationService) as NavigationService;
|
|
96
|
+
|
|
97
|
+
if (this.helpText) {
|
|
98
|
+
await n.openPage("@web-atoms/web-controls/dist/form/HelpPopup", { message: this.helpText });
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
if (this.helpLink) {
|
|
103
|
+
// if it is http, then open it inside iframe..
|
|
104
|
+
// pending
|
|
105
|
+
|
|
106
|
+
// else
|
|
107
|
+
await n.openPage(this.helpLink);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
protected preCreate() {
|
|
112
|
+
this.label = null;
|
|
113
|
+
this.error = null;
|
|
114
|
+
this.helpText = null;
|
|
115
|
+
this.helpLink = null;
|
|
116
|
+
this.helpIcon = null;
|
|
117
|
+
this.required = false;
|
|
118
|
+
this.visible = true;
|
|
119
|
+
this.fieldClass = "";
|
|
120
|
+
this.contentPresenter = null;
|
|
121
|
+
this.render(<div
|
|
122
|
+
class={Bind.oneWay(() => ({
|
|
123
|
+
"form-field": 1,
|
|
124
|
+
[this.fieldClass]: this.fieldClass,
|
|
125
|
+
"has-error": this.error,
|
|
126
|
+
"field-hidden": !this.visible
|
|
127
|
+
}))}>
|
|
128
|
+
<label
|
|
129
|
+
class="label"
|
|
130
|
+
text={Bind.oneWay(() => this.label)}
|
|
131
|
+
htmlFor={Bind.oneWay(() => this.htmlFor)}/>
|
|
132
|
+
<span
|
|
133
|
+
class="required"
|
|
134
|
+
styleVisibility={Bind.oneTime(() => this.required ? "visible" : "hidden")}>*</span>
|
|
135
|
+
<div presenter={Bind.presenter("contentPresenter")}
|
|
136
|
+
class="presenter"></div>
|
|
137
|
+
<span
|
|
138
|
+
class="error"
|
|
139
|
+
styleDisplay={Bind.oneWay(() => this.error ? "" : "none")}
|
|
140
|
+
text={Bind.oneWay(() => this.error)}></span>
|
|
141
|
+
</div>);
|
|
142
|
+
|
|
143
|
+
if (this.content) {
|
|
144
|
+
this.onPropertyChanged("content");
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
export interface IFieldAttributes {
|
|
151
|
+
label?;
|
|
152
|
+
error?;
|
|
153
|
+
helpText?;
|
|
154
|
+
helpLink?;
|
|
155
|
+
helpIcon?;
|
|
156
|
+
required?;
|
|
157
|
+
visible?;
|
|
158
|
+
fieldClass?;
|
|
159
|
+
baseClass?: IClassOf<AtomFieldControl>;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
export default function AtomField({
|
|
163
|
+
label,
|
|
164
|
+
error,
|
|
165
|
+
helpText,
|
|
166
|
+
helpLink,
|
|
167
|
+
helpIcon,
|
|
168
|
+
required,
|
|
169
|
+
visible = true,
|
|
170
|
+
fieldClass = null,
|
|
171
|
+
baseClass: controlClass = AtomFieldControl
|
|
172
|
+
}: IFieldAttributes, child: XNode) {
|
|
173
|
+
const ControlClass = controlClass;
|
|
174
|
+
return <ControlClass
|
|
175
|
+
label={label}
|
|
176
|
+
error={error}
|
|
177
|
+
helpIcon={helpIcon}
|
|
178
|
+
helpLink={helpLink}
|
|
179
|
+
helpText={helpText}
|
|
180
|
+
required={required}
|
|
181
|
+
visible={visible}
|
|
182
|
+
fieldClass={fieldClass}
|
|
183
|
+
content={child}
|
|
184
|
+
/>;
|
|
185
|
+
}
|
package/src/form/AtomForm.ts
CHANGED
|
@@ -3,45 +3,40 @@ import { AtomBridge } from "@web-atoms/core/dist/core/AtomBridge";
|
|
|
3
3
|
import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
|
|
4
4
|
import { IClassOf } from "@web-atoms/core/dist/core/types";
|
|
5
5
|
import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
|
|
6
|
-
import AtomField from "./AtomField";
|
|
7
|
-
import AtomFieldTemplate from "./AtomFieldTemplate";
|
|
8
6
|
import AtomFormStyle from "./AtomFormStyle";
|
|
9
|
-
import DefaultFieldTemplate from "./DefaultFieldTemplate";
|
|
10
7
|
|
|
11
8
|
export default class AtomForm extends AtomControl {
|
|
12
9
|
|
|
13
10
|
/** Submit event fired when enter was pressed on last input on mobile (Done button event) */
|
|
14
11
|
public eventSubmit: () => void;
|
|
15
12
|
|
|
16
|
-
public fieldTemplate: IClassOf<AtomFieldTemplate>;
|
|
17
|
-
|
|
18
13
|
public focusNextOnEnter: boolean = /mobile/i.test(navigator.userAgent);
|
|
19
14
|
|
|
20
|
-
public append(e: AtomControl | HTMLElement | Text): AtomControl {
|
|
15
|
+
// public append(e: AtomControl | HTMLElement | Text): AtomControl {
|
|
21
16
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
17
|
+
// // you can create nested AtomForm
|
|
18
|
+
// if (e instanceof AtomForm) {
|
|
19
|
+
// return super.append(e);
|
|
20
|
+
// }
|
|
26
21
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}
|
|
22
|
+
// if (!(e instanceof AtomField)) {
|
|
23
|
+
// throw new Error(`Only AtomField or AtomFormGroup can be added inside AtomForm`);
|
|
24
|
+
// }
|
|
25
|
+
// const fieldContainer = this.createField(e);
|
|
26
|
+
// return super.append(fieldContainer);
|
|
27
|
+
// }
|
|
33
28
|
|
|
34
|
-
protected createField(e: AtomField): AtomFieldTemplate {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}
|
|
29
|
+
// protected createField(e: AtomField): AtomFieldTemplate {
|
|
30
|
+
// const field = new (this.fieldTemplate)(this.app);
|
|
31
|
+
// field.field = e;
|
|
32
|
+
// return field;
|
|
33
|
+
// }
|
|
39
34
|
|
|
40
35
|
protected preCreate(): void {
|
|
41
36
|
super.preCreate();
|
|
42
37
|
this.defaultControlStyle = AtomFormStyle;
|
|
43
|
-
this.fieldTemplate = DefaultFieldTemplate;
|
|
44
38
|
this.runAfterInit(() => {
|
|
39
|
+
|
|
45
40
|
this.element.classList.add(this.controlStyle.name);
|
|
46
41
|
|
|
47
42
|
this.app.callLater(() => {
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
|
|
2
|
-
import AtomField from "./AtomField";
|
|
3
|
-
export default class AtomFieldTemplate extends AtomControl {
|
|
4
|
-
static labelIDs: number;
|
|
5
|
-
contentPresenter: HTMLElement;
|
|
6
|
-
labelPresenter: HTMLElement;
|
|
7
|
-
field: AtomField;
|
|
8
|
-
protected preCreate(): void;
|
|
9
|
-
}
|
|
10
|
-
//# sourceMappingURL=AtomFieldTemplate.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AtomFieldTemplate.d.ts","sourceRoot":"","sources":["../../src/form/AtomFieldTemplate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAC5E,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,WAAW;IAEtD,OAAc,QAAQ,EAAE,MAAM,CAAK;IAE5B,gBAAgB,EAAE,WAAW,CAAC;IAE9B,cAAc,EAAE,WAAW,CAAC;IAE5B,KAAK,EAAE,SAAS,CAAC;IAExB,SAAS,CAAC,SAAS,IAAI,IAAI;CAiB9B"}
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
(function (factory) {
|
|
2
|
-
if (typeof module === "object" && typeof module.exports === "object") {
|
|
3
|
-
var v = factory(require, exports);
|
|
4
|
-
if (v !== undefined) module.exports = v;
|
|
5
|
-
}
|
|
6
|
-
else if (typeof define === "function" && define.amd) {
|
|
7
|
-
define(["require", "exports", "@web-atoms/core/dist/web/controls/AtomControl"], factory);
|
|
8
|
-
}
|
|
9
|
-
})(function (require, exports) {
|
|
10
|
-
"use strict";
|
|
11
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
-
const AtomControl_1 = require("@web-atoms/core/dist/web/controls/AtomControl");
|
|
13
|
-
class AtomFieldTemplate extends AtomControl_1.AtomControl {
|
|
14
|
-
preCreate() {
|
|
15
|
-
super.preCreate();
|
|
16
|
-
this.contentPresenter = null;
|
|
17
|
-
this.labelPresenter = null;
|
|
18
|
-
this.runAfterInit(() => {
|
|
19
|
-
this.contentPresenter.appendChild(this.field.element);
|
|
20
|
-
const input = this.field.element.getElementsByTagName("input")[0];
|
|
21
|
-
if (input) {
|
|
22
|
-
const label = this.labelPresenter;
|
|
23
|
-
input.id = input.id || (input.id = `__id__${AtomFieldTemplate.labelIDs++}`);
|
|
24
|
-
label.htmlFor = input.id;
|
|
25
|
-
}
|
|
26
|
-
});
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
exports.default = AtomFieldTemplate;
|
|
30
|
-
AtomFieldTemplate.labelIDs = 1;
|
|
31
|
-
});
|
|
32
|
-
//# sourceMappingURL=AtomFieldTemplate.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AtomFieldTemplate.js","sourceRoot":"","sources":["../../src/form/AtomFieldTemplate.ts"],"names":[],"mappings":";;;;;;;;;;;IAAA,+EAA4E;IAG5E,MAAqB,iBAAkB,SAAQ,yBAAW;QAU5C,SAAS;YACf,KAAK,CAAC,SAAS,EAAE,CAAC;YAClB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;YAC7B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC3B,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE;gBACnB,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;gBAEtD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAqB,CAAC;gBACtF,IAAI,KAAK,EAAE;oBACP,MAAM,KAAK,GAAI,IAAI,CAAC,cAAmC,CAAC;oBACxD,KAAK,CAAC,EAAE,GAAG,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,SAAS,iBAAiB,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;oBAC5E,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,EAAE,CAAC;iBAC5B;YAEL,CAAC,CAAC,CAAC;QACP,CAAC;;IAzBL,oCA2BC;IAzBiB,0BAAQ,GAAW,CAAC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultFieldTemplate.d.ts","sourceRoot":"","sources":["../../src/form/DefaultFieldTemplate.tsx"],"names":[],"mappings":"AAEA,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AAEpD,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,iBAAiB;IAE3D,MAAM,IAAI,IAAI;CAuBrB"}
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
(function (factory) {
|
|
2
|
-
if (typeof module === "object" && typeof module.exports === "object") {
|
|
3
|
-
var v = factory(require, exports);
|
|
4
|
-
if (v !== undefined) module.exports = v;
|
|
5
|
-
}
|
|
6
|
-
else if (typeof define === "function" && define.amd) {
|
|
7
|
-
define(["require", "exports", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/XNode", "./AtomFieldTemplate"], factory);
|
|
8
|
-
}
|
|
9
|
-
})(function (require, exports) {
|
|
10
|
-
"use strict";
|
|
11
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
-
const Bind_1 = require("@web-atoms/core/dist/core/Bind");
|
|
13
|
-
const XNode_1 = require("@web-atoms/core/dist/core/XNode");
|
|
14
|
-
const AtomFieldTemplate_1 = require("./AtomFieldTemplate");
|
|
15
|
-
class DefaultFieldTemplate extends AtomFieldTemplate_1.default {
|
|
16
|
-
create() {
|
|
17
|
-
this.render(XNode_1.default.create("div", { class: Bind_1.default.oneWay(() => ({
|
|
18
|
-
"form-field": 1,
|
|
19
|
-
[this.field.fieldClass]: this.field.fieldClass,
|
|
20
|
-
"hasError": this.field.hasError,
|
|
21
|
-
"field-hidden": !this.field.visible
|
|
22
|
-
})) },
|
|
23
|
-
XNode_1.default.create("label", { presenter: Bind_1.default.presenter("labelPresenter"), class: "label", text: Bind_1.default.oneWay(() => this.field.label) }),
|
|
24
|
-
XNode_1.default.create("span", { class: "required", styleVisibility: Bind_1.default.oneTime(() => this.field.required ? "visible" : "hidden") }, "*"),
|
|
25
|
-
XNode_1.default.create("div", { presenter: Bind_1.default.presenter("contentPresenter"), class: "presenter" }),
|
|
26
|
-
XNode_1.default.create("span", { class: "error", styleDisplay: Bind_1.default.oneWay(() => this.field.hasError ? "" : "none"), text: Bind_1.default.oneWay(() => this.field.error) })));
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
exports.default = DefaultFieldTemplate;
|
|
30
|
-
});
|
|
31
|
-
//# sourceMappingURL=DefaultFieldTemplate.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultFieldTemplate.js","sourceRoot":"","sources":["../../src/form/DefaultFieldTemplate.tsx"],"names":[],"mappings":";;;;;;;;;;;IAAA,yDAAkD;IAClD,2DAAoD;IACpD,2DAAoD;IAEpD,MAAqB,oBAAqB,SAAQ,2BAAiB;QAE3D,MAAM;YACZ,IAAI,CAAC,MAAM,CAAC,gCACX,KAAK,EAAE,cAAI,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC;oBACzB,YAAY,EAAE,CAAC;oBACf,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU;oBAC9C,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ;oBAC/B,cAAc,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO;iBACnC,CAAC,CAAC;gBACH,kCACC,SAAS,EAAE,cAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAC3C,KAAK,EAAC,OAAO,EACb,IAAI,EAAE,cAAI,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG;gBAC7C,iCACC,KAAK,EAAC,UAAU,EAChB,eAAe,EAAE,cAAI,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAU;gBAC1F,gCAAK,SAAS,EAAE,cAAI,CAAC,SAAS,CAAC,kBAAkB,CAAC,EACjD,KAAK,EAAC,WAAW,GAAO;gBACzB,iCACC,KAAK,EAAC,OAAO,EACb,YAAY,EAAE,cAAI,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,EAClE,IAAI,EAAE,cAAI,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAS,CAC9C,CAAC,CAAC;QACT,CAAC;KACD;IAzBD,uCAyBC"}
|
package/src/form/AtomField.ts
DELETED
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { AtomBinder } from "@web-atoms/core/dist/core/AtomBinder";
|
|
2
|
-
import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
|
|
3
|
-
import { NavigationService } from "@web-atoms/core/dist/services/NavigationService";
|
|
4
|
-
import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
|
|
5
|
-
export { default as HP } from "./HelpPopup";
|
|
6
|
-
|
|
7
|
-
export default class AtomField extends AtomControl {
|
|
8
|
-
|
|
9
|
-
public label: string;
|
|
10
|
-
|
|
11
|
-
public error: string;
|
|
12
|
-
|
|
13
|
-
public helpText: string;
|
|
14
|
-
|
|
15
|
-
public helpLink: string;
|
|
16
|
-
|
|
17
|
-
public helpIcon: string;
|
|
18
|
-
|
|
19
|
-
public required: boolean;
|
|
20
|
-
|
|
21
|
-
public visible: boolean;
|
|
22
|
-
|
|
23
|
-
public fieldClass: string;
|
|
24
|
-
|
|
25
|
-
public get hasError(): boolean {
|
|
26
|
-
return this.error ? true : false;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
public get hasHelp(): boolean {
|
|
30
|
-
return (this.helpText || this.helpLink) ? true : false;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
public onPropertyChanged(name: keyof AtomField): void {
|
|
34
|
-
switch (name) {
|
|
35
|
-
case "error":
|
|
36
|
-
AtomBinder.refreshValue(this, "hasError");
|
|
37
|
-
break;
|
|
38
|
-
case "helpLink":
|
|
39
|
-
case "helpText":
|
|
40
|
-
AtomBinder.refreshValue(this, "hasHelp");
|
|
41
|
-
break;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
public async openHelp(): Promise<void> {
|
|
46
|
-
const n = this.app.resolve(NavigationService) as NavigationService;
|
|
47
|
-
|
|
48
|
-
if (this.helpText) {
|
|
49
|
-
await n.openPage("@web-atoms/web-controls/dist/form/HelpPopup", { message: this.helpText });
|
|
50
|
-
return;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
if (this.helpLink) {
|
|
54
|
-
// if it is http, then open it inside iframe..
|
|
55
|
-
// pending
|
|
56
|
-
|
|
57
|
-
// else
|
|
58
|
-
await n.openPage(this.helpLink);
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
protected preCreate() {
|
|
63
|
-
this.label = null;
|
|
64
|
-
this.error = null;
|
|
65
|
-
this.helpText = null;
|
|
66
|
-
this.helpLink = null;
|
|
67
|
-
this.helpIcon = null;
|
|
68
|
-
this.required = false;
|
|
69
|
-
this.visible = true;
|
|
70
|
-
this.fieldClass = "";
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
}
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
|
|
2
|
-
import AtomField from "./AtomField";
|
|
3
|
-
|
|
4
|
-
export default class AtomFieldTemplate extends AtomControl {
|
|
5
|
-
|
|
6
|
-
public static labelIDs: number = 1;
|
|
7
|
-
|
|
8
|
-
public contentPresenter: HTMLElement;
|
|
9
|
-
|
|
10
|
-
public labelPresenter: HTMLElement;
|
|
11
|
-
|
|
12
|
-
public field: AtomField;
|
|
13
|
-
|
|
14
|
-
protected preCreate(): void {
|
|
15
|
-
super.preCreate();
|
|
16
|
-
this.contentPresenter = null;
|
|
17
|
-
this.labelPresenter = null;
|
|
18
|
-
this.runAfterInit(() => {
|
|
19
|
-
this.contentPresenter.appendChild(this.field.element);
|
|
20
|
-
|
|
21
|
-
const input = this.field.element.getElementsByTagName("input")[0] as HTMLInputElement;
|
|
22
|
-
if (input) {
|
|
23
|
-
const label = (this.labelPresenter as HTMLLabelElement);
|
|
24
|
-
input.id = input.id || (input.id = `__id__${AtomFieldTemplate.labelIDs++}`);
|
|
25
|
-
label.htmlFor = input.id;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
});
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import Bind from "@web-atoms/core/dist/core/Bind";
|
|
2
|
-
import XNode from "@web-atoms/core/dist/core/XNode";
|
|
3
|
-
import AtomFieldTemplate from "./AtomFieldTemplate";
|
|
4
|
-
|
|
5
|
-
export default class DefaultFieldTemplate extends AtomFieldTemplate {
|
|
6
|
-
|
|
7
|
-
public create(): void {
|
|
8
|
-
this.render(<div
|
|
9
|
-
class={Bind.oneWay(() => ({
|
|
10
|
-
"form-field": 1,
|
|
11
|
-
[this.field.fieldClass]: this.field.fieldClass,
|
|
12
|
-
"hasError": this.field.hasError,
|
|
13
|
-
"field-hidden": !this.field.visible
|
|
14
|
-
}))}>
|
|
15
|
-
<label
|
|
16
|
-
presenter={Bind.presenter("labelPresenter")}
|
|
17
|
-
class="label"
|
|
18
|
-
text={Bind.oneWay(() => this.field.label)}/>
|
|
19
|
-
<span
|
|
20
|
-
class="required"
|
|
21
|
-
styleVisibility={Bind.oneTime(() => this.field.required ? "visible" : "hidden")}>*</span>
|
|
22
|
-
<div presenter={Bind.presenter("contentPresenter")}
|
|
23
|
-
class="presenter"></div>
|
|
24
|
-
<span
|
|
25
|
-
class="error"
|
|
26
|
-
styleDisplay={Bind.oneWay(() => this.field.hasError ? "" : "none")}
|
|
27
|
-
text={Bind.oneWay(() => this.field.error)}></span>
|
|
28
|
-
</div>);
|
|
29
|
-
}
|
|
30
|
-
}
|