@vdegenne/forms 0.0.1
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/lib/FormBuilder.d.ts +21 -0
- package/lib/FormBuilder.d.ts.map +1 -0
- package/lib/FormBuilder.js +76 -0
- package/lib/FormBuilder.js.map +1 -0
- package/lib/bindInput.d.ts +18 -0
- package/lib/bindInput.d.ts.map +1 -0
- package/lib/bindInput.js +282 -0
- package/lib/bindInput.js.map +1 -0
- package/lib/index.d.ts +3 -0
- package/lib/index.d.ts.map +1 -0
- package/lib/index.js +3 -0
- package/lib/index.js.map +1 -0
- package/package.json +36 -0
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export declare class FormBuilder<T> {
|
|
2
|
+
protected host: T;
|
|
3
|
+
constructor(host: T);
|
|
4
|
+
SWITCH(headline: string, key: keyof T): import("lit-html").TemplateResult<1>;
|
|
5
|
+
SLIDER(label: string, key: keyof T, options?: {
|
|
6
|
+
min: number;
|
|
7
|
+
max: number;
|
|
8
|
+
}): import("lit-html").TemplateResult<1>;
|
|
9
|
+
SELECT(label: string, key: keyof T, choices?: string[]): import("lit-html").TemplateResult<1>;
|
|
10
|
+
TEXTFIELD(label: string, type: string, key: keyof T): import("lit-html").TemplateResult<1>;
|
|
11
|
+
TEXTAREA(label: string, key: keyof T): import("lit-html").TemplateResult<1>;
|
|
12
|
+
}
|
|
13
|
+
export declare const SWITCH: <T>(headline: string, host: T, key: keyof T) => import("lit-html").TemplateResult<1>;
|
|
14
|
+
export declare const SLIDER: <T>(label: string, host: T, key: keyof T, options?: {
|
|
15
|
+
min: number;
|
|
16
|
+
max: number;
|
|
17
|
+
}) => import("lit-html").TemplateResult<1>;
|
|
18
|
+
export declare const SELECT: <T>(label: string, host: T, key: keyof T, choices?: string[]) => import("lit-html").TemplateResult<1>;
|
|
19
|
+
export declare const TEXTFIELD: <T>(label: string, type: string, host: T, key: keyof T) => import("lit-html").TemplateResult<1>;
|
|
20
|
+
export declare const TEXTAREA: <T>(label: string, host: T, key: keyof T) => import("lit-html").TemplateResult<1>;
|
|
21
|
+
//# sourceMappingURL=FormBuilder.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormBuilder.d.ts","sourceRoot":"","sources":["../src/FormBuilder.ts"],"names":[],"mappings":"AAGA,qBAAa,WAAW,CAAC,CAAC;IACb,SAAS,CAAC,IAAI,EAAE,CAAC;gBAAP,IAAI,EAAE,CAAC;IAE7B,MAAM,CAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC;IAIrC,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,OAAO;;;KAAmB;IAI9D,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,OAAO,GAAE,MAAM,EAAO;IAI1D,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC;IAInD,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC;CAGpC;AAED,eAAO,MAAM,MAAM,GAAI,CAAC,YAAY,MAAM,QAAQ,CAAC,OAAO,MAAM,CAAC,yCAahE,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,CAAC,SAChB,MAAM,QACP,CAAC,OACF,MAAM,CAAC;;;0CAeZ,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,CAAC,SAChB,MAAM,QACP,CAAC,OACF,MAAM,CAAC,YACH,MAAM,EAAE,yCAWjB,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,CAAC,SACnB,MAAM,QACP,MAAM,QACN,CAAC,OACF,MAAM,CAAC,yCASZ,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,MAAM,QAAQ,CAAC,OAAO,MAAM,CAAC,yCAM/D,CAAC"}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
import { bindInput } from './bindInput.js';
|
|
3
|
+
export class FormBuilder {
|
|
4
|
+
constructor(host) {
|
|
5
|
+
this.host = host;
|
|
6
|
+
}
|
|
7
|
+
SWITCH(headline, key) {
|
|
8
|
+
return SWITCH(headline, this.host, key);
|
|
9
|
+
}
|
|
10
|
+
SLIDER(label, key, options = { min: 1, max: 5 }) {
|
|
11
|
+
return SLIDER(label, this.host, key, options);
|
|
12
|
+
}
|
|
13
|
+
SELECT(label, key, choices = []) {
|
|
14
|
+
return SELECT(label, this.host, key, choices);
|
|
15
|
+
}
|
|
16
|
+
TEXTFIELD(label, type, key) {
|
|
17
|
+
return TEXTFIELD(label, type, this.host, key);
|
|
18
|
+
}
|
|
19
|
+
TEXTAREA(label, key) {
|
|
20
|
+
return TEXTAREA(label, this.host, key);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
export const SWITCH = (headline, host, key) => html `
|
|
24
|
+
<md-list-item
|
|
25
|
+
type="button"
|
|
26
|
+
@click=${() => {
|
|
27
|
+
// @ts-ignore
|
|
28
|
+
host[key] = !host[key];
|
|
29
|
+
}}
|
|
30
|
+
class="select-none cursor-pointer flex items-center gap-3"
|
|
31
|
+
style="/*--md-list-item-top-space:0;--md-list-item-bottom-space:0;--md-list-item-leading-space:0;--md-list-item-trailing-space:0;*/"
|
|
32
|
+
>
|
|
33
|
+
<md-switch slot="start" ?selected=${host[key]} inert></md-switch>
|
|
34
|
+
<div slot="headline">${headline}</div>
|
|
35
|
+
</md-list-item>
|
|
36
|
+
`;
|
|
37
|
+
export const SLIDER = (label, host, key, options = { min: 1, max: 5 }) => html `
|
|
38
|
+
<div class="flex items-center gap-3">
|
|
39
|
+
<span>${label}</span>
|
|
40
|
+
<md-slider
|
|
41
|
+
class="flex-1"
|
|
42
|
+
ticks
|
|
43
|
+
labeled
|
|
44
|
+
min=${options.min}
|
|
45
|
+
max=${options.max}
|
|
46
|
+
${bindInput(host, key)}
|
|
47
|
+
>
|
|
48
|
+
</md-slider>
|
|
49
|
+
</div>
|
|
50
|
+
`;
|
|
51
|
+
export const SELECT = (label, host, key, choices = []) => html `
|
|
52
|
+
<md-filled-select quick value=${host[key]} label=${label}>
|
|
53
|
+
<md-select-option></md-select-option>
|
|
54
|
+
${choices.map((item, id) => html `
|
|
55
|
+
<md-select-option value=${id}>${item}</md-select-option>
|
|
56
|
+
`)}
|
|
57
|
+
<md-option></md-option>
|
|
58
|
+
</md-filled-select>
|
|
59
|
+
`;
|
|
60
|
+
export const TEXTFIELD = (label, type, host, key) => html `
|
|
61
|
+
<md-filled-text-field
|
|
62
|
+
label=${label.replace(/\*/g, '')}
|
|
63
|
+
type=${type}
|
|
64
|
+
${bindInput(host, key)}
|
|
65
|
+
?required=${label.includes('*')}
|
|
66
|
+
>
|
|
67
|
+
</md-filled-text-field>
|
|
68
|
+
`;
|
|
69
|
+
export const TEXTAREA = (label, host, key) => html `
|
|
70
|
+
<md-filled-text-field
|
|
71
|
+
type="textarea"
|
|
72
|
+
label=${label}
|
|
73
|
+
${bindInput(host, key)}
|
|
74
|
+
></md-filled-text-field>
|
|
75
|
+
`;
|
|
76
|
+
//# sourceMappingURL=FormBuilder.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormBuilder.js","sourceRoot":"","sources":["../src/FormBuilder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,MAAM,OAAO,WAAW;IACvB,YAAsB,IAAO;QAAP,SAAI,GAAJ,IAAI,CAAG;IAAG,CAAC;IAEjC,MAAM,CAAC,QAAgB,EAAE,GAAY;QACpC,OAAO,MAAM,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IACzC,CAAC;IAED,MAAM,CAAC,KAAa,EAAE,GAAY,EAAE,OAAO,GAAG,EAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAC;QAC7D,OAAO,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,OAAO,CAAC,CAAC;IAC/C,CAAC;IAED,MAAM,CAAC,KAAa,EAAE,GAAY,EAAE,UAAoB,EAAE;QACzD,OAAO,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,OAAO,CAAC,CAAC;IAC/C,CAAC;IAED,SAAS,CAAC,KAAa,EAAE,IAAY,EAAE,GAAY;QAClD,OAAO,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAC/C,CAAC;IAED,QAAQ,CAAC,KAAa,EAAE,GAAY;QACnC,OAAO,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IACxC,CAAC;CACD;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,CAAI,QAAgB,EAAE,IAAO,EAAE,GAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;WAG/D,GAAG,EAAE;IACb,aAAa;IACb,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACxB,CAAC;;;;sCAImC,IAAI,CAAC,GAAG,CAAC;yBACtB,QAAQ;;CAEhC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CACrB,KAAa,EACb,IAAO,EACP,GAAY,EACZ,OAAO,GAAG,EAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAC,EACzB,EAAE,CAAC,IAAI,CAAA;;UAEC,KAAK;;;;;SAKN,OAAO,CAAC,GAAG;SACX,OAAO,CAAC,GAAG;KACf,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC;;;;CAIxB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CACrB,KAAa,EACb,IAAO,EACP,GAAY,EACZ,UAAoB,EAAE,EACrB,EAAE,CAAC,IAAI,CAAA;iCACwB,IAAI,CAAC,GAAG,CAAC,UAAU,KAAK;;IAErD,OAAO,CAAC,GAAG,CACZ,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;8BACS,EAAE,IAAI,IAAI;IACpC,CACD;;;CAGF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CACxB,KAAa,EACb,IAAY,EACZ,IAAO,EACP,GAAY,EACX,EAAE,CAAC,IAAI,CAAA;;UAEC,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;SACzB,IAAI;IACT,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC;cACV,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC;;;CAGhC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAI,KAAa,EAAE,IAAO,EAAE,GAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;UAG/D,KAAK;IACX,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC;;CAEvB,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { DirectiveResult, DirectiveClass } from 'lit/directive.js';
|
|
2
|
+
/**
|
|
3
|
+
* Two-way binds a given property to the input it is defined on.
|
|
4
|
+
*
|
|
5
|
+
* For example:
|
|
6
|
+
*
|
|
7
|
+
* ```ts
|
|
8
|
+
* html`
|
|
9
|
+
* <input type="text" ${input(this, 'name')}>
|
|
10
|
+
* `;
|
|
11
|
+
* ```
|
|
12
|
+
*
|
|
13
|
+
* @param {T} host Host object of the property
|
|
14
|
+
* @param {string} key Property to bind
|
|
15
|
+
* @return {DirectiveResult}
|
|
16
|
+
*/
|
|
17
|
+
export declare function bindInput<T, TKey extends keyof T>(host: T, key: TKey): DirectiveResult<DirectiveClass>;
|
|
18
|
+
//# sourceMappingURL=bindInput.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bindInput.d.ts","sourceRoot":"","sources":["../src/bindInput.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAIX,eAAe,EACf,cAAc,EACd,MAAM,kBAAkB,CAAC;AA6T1B;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,IAAI,SAAS,MAAM,CAAC,EAChD,IAAI,EAAE,CAAC,EACP,GAAG,EAAE,IAAI,GACP,eAAe,CAAC,cAAc,CAAC,CAEjC"}
|
package/lib/bindInput.js
ADDED
|
@@ -0,0 +1,282 @@
|
|
|
1
|
+
import { directive, AsyncDirective } from 'lit/async-directive.js';
|
|
2
|
+
import { nothing } from 'lit';
|
|
3
|
+
import { PartType } from 'lit/directive.js';
|
|
4
|
+
/**
|
|
5
|
+
* Determines if a target is an element
|
|
6
|
+
* @param {EventTarget} target Target to test
|
|
7
|
+
* @return {boolean}
|
|
8
|
+
*/
|
|
9
|
+
function isElement(target) {
|
|
10
|
+
return target.nodeType === Node.ELEMENT_NODE;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Determines if a target is an input element
|
|
14
|
+
* @param {EventTarget} target Target to test
|
|
15
|
+
* @return {boolean}
|
|
16
|
+
*/
|
|
17
|
+
function isInputElement(target) {
|
|
18
|
+
return isElement(target) && (target.nodeName === 'INPUT' || 'type' in target);
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* Determines if a target is a select element
|
|
22
|
+
* @param {EventTarget} target Target to test
|
|
23
|
+
* @return {boolean}
|
|
24
|
+
*/
|
|
25
|
+
function isSelectElement(target) {
|
|
26
|
+
return isElement(target) && target.nodeName === 'SELECT';
|
|
27
|
+
}
|
|
28
|
+
///**
|
|
29
|
+
// * Determines if a target is a textarea element
|
|
30
|
+
// * @param {EventTarget} target Target to test
|
|
31
|
+
// * @return {boolean}
|
|
32
|
+
// */
|
|
33
|
+
//function isTextAreaElement(target: EventTarget): target is HTMLTextAreaElement {
|
|
34
|
+
// return isElement(target) && target.nodeName === 'TEXTAREA';
|
|
35
|
+
//}
|
|
36
|
+
/**
|
|
37
|
+
* Tracks the value of a form control and propagates data two-way to/from a
|
|
38
|
+
* given host property.
|
|
39
|
+
*/
|
|
40
|
+
class BindInputDirective extends AsyncDirective {
|
|
41
|
+
/** @inheritdoc */
|
|
42
|
+
constructor(partInfo) {
|
|
43
|
+
super(partInfo);
|
|
44
|
+
this.__host = undefined;
|
|
45
|
+
this.__lastValue = undefined;
|
|
46
|
+
/**
|
|
47
|
+
* Fired when the change event occurs
|
|
48
|
+
* @param {Event} ev Event fired
|
|
49
|
+
* @return {void}
|
|
50
|
+
*/
|
|
51
|
+
this.__onChange = (ev) => {
|
|
52
|
+
const target = ev.currentTarget;
|
|
53
|
+
if (target !== this.__element) {
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
this.__updateValueFromElement(this.__element);
|
|
57
|
+
};
|
|
58
|
+
/**
|
|
59
|
+
* Fired when the input event occurs
|
|
60
|
+
* @param {Event} ev Event fired
|
|
61
|
+
* @return {void}
|
|
62
|
+
*/
|
|
63
|
+
this.__onInput = (ev) => {
|
|
64
|
+
const target = ev.currentTarget;
|
|
65
|
+
if (target !== this.__element) {
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
this.__updateValueFromElement(this.__element);
|
|
69
|
+
};
|
|
70
|
+
if (partInfo.type !== PartType.ELEMENT &&
|
|
71
|
+
partInfo.type !== PartType.ATTRIBUTE &&
|
|
72
|
+
partInfo.type !== PartType.PROPERTY) {
|
|
73
|
+
throw new Error('The `bindInput` directive must be used in an element or ' +
|
|
74
|
+
'attribute binding');
|
|
75
|
+
}
|
|
76
|
+
this.__isAttribute =
|
|
77
|
+
partInfo.type === PartType.ATTRIBUTE ||
|
|
78
|
+
partInfo.type === PartType.PROPERTY;
|
|
79
|
+
}
|
|
80
|
+
/** @inheritdoc */
|
|
81
|
+
render(host, prop) {
|
|
82
|
+
if (this.__isAttribute) {
|
|
83
|
+
return this.__computeValueFromHost(host, prop);
|
|
84
|
+
}
|
|
85
|
+
return nothing;
|
|
86
|
+
}
|
|
87
|
+
/** @inheritdoc */
|
|
88
|
+
update(part, [host, prop]) {
|
|
89
|
+
if (part.element !== this.__element) {
|
|
90
|
+
this.__setElement(part.element);
|
|
91
|
+
}
|
|
92
|
+
if (prop !== this.__prop) {
|
|
93
|
+
this.__prop = prop;
|
|
94
|
+
}
|
|
95
|
+
if (host !== this.__host) {
|
|
96
|
+
this.__host = host;
|
|
97
|
+
}
|
|
98
|
+
if (host && !this.__isAttribute) {
|
|
99
|
+
this.__updateValueFromHost(host);
|
|
100
|
+
}
|
|
101
|
+
return this.render(host, prop);
|
|
102
|
+
}
|
|
103
|
+
/**
|
|
104
|
+
* Gets the value of the property from the host
|
|
105
|
+
* @param {unknown} host Host to retrieve value from
|
|
106
|
+
* @param {string|symbol|number} prop Property to retrieve
|
|
107
|
+
* @return {unknown}
|
|
108
|
+
*/
|
|
109
|
+
__computeValueFromHost(host, prop) {
|
|
110
|
+
if (typeof host !== 'object' || host === null || !(prop in host)) {
|
|
111
|
+
return undefined;
|
|
112
|
+
}
|
|
113
|
+
return host[prop];
|
|
114
|
+
}
|
|
115
|
+
/**
|
|
116
|
+
* Updates the value based on the host's current value for the given
|
|
117
|
+
* property
|
|
118
|
+
* @param {unknown} host Host to retrieve value from
|
|
119
|
+
* @return {void}
|
|
120
|
+
*/
|
|
121
|
+
__updateValueFromHost(host) {
|
|
122
|
+
if (!this.__prop || !this.__element) {
|
|
123
|
+
return;
|
|
124
|
+
}
|
|
125
|
+
const value = this.__computeValueFromHost(host, this.__prop);
|
|
126
|
+
const element = this.__element;
|
|
127
|
+
if (value === this.__lastValue) {
|
|
128
|
+
return;
|
|
129
|
+
}
|
|
130
|
+
this.__lastValue = value;
|
|
131
|
+
if (isSelectElement(element)) {
|
|
132
|
+
switch (element.type.toLowerCase()) {
|
|
133
|
+
case 'select-multiple':
|
|
134
|
+
const valuesArray = Array.isArray(value) ? value : [value];
|
|
135
|
+
for (const opt of element.options) {
|
|
136
|
+
if (valuesArray.includes(opt.value)) {
|
|
137
|
+
opt.selected = true;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
break;
|
|
141
|
+
case 'select-one':
|
|
142
|
+
default:
|
|
143
|
+
element.value = String(value ?? '');
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
else if (isInputElement(element)) {
|
|
147
|
+
switch (element.type.toLowerCase()) {
|
|
148
|
+
case 'checkbox':
|
|
149
|
+
element.checked = value === true;
|
|
150
|
+
break;
|
|
151
|
+
case 'number':
|
|
152
|
+
case 'date':
|
|
153
|
+
case 'time':
|
|
154
|
+
element.valueAsNumber = value;
|
|
155
|
+
break;
|
|
156
|
+
case 'textarea':
|
|
157
|
+
default:
|
|
158
|
+
element.value = String(value ?? '');
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
else if ('value' in element) {
|
|
162
|
+
element.value = value;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
/**
|
|
166
|
+
* Sets the element and its handlers
|
|
167
|
+
* @param {Element} element Element to set
|
|
168
|
+
* @return {void}
|
|
169
|
+
*/
|
|
170
|
+
__setElement(element) {
|
|
171
|
+
if (this.__element) {
|
|
172
|
+
this.__removeListenersFromElement(this.__element);
|
|
173
|
+
}
|
|
174
|
+
this.__element = element;
|
|
175
|
+
this.__addListenersToElement(element);
|
|
176
|
+
}
|
|
177
|
+
/**
|
|
178
|
+
* Removes any associated listeners from the given element
|
|
179
|
+
* @param {Element} element Element to remove listeners from
|
|
180
|
+
* @return {void}
|
|
181
|
+
*/
|
|
182
|
+
__removeListenersFromElement(element) {
|
|
183
|
+
element.removeEventListener('change', this.__onChange);
|
|
184
|
+
element.removeEventListener('input', this.__onInput);
|
|
185
|
+
}
|
|
186
|
+
/**
|
|
187
|
+
* Adds any associated listeners to the given element
|
|
188
|
+
* @param {Element} element Element to add listeners to
|
|
189
|
+
* @return {void}
|
|
190
|
+
*/
|
|
191
|
+
__addListenersToElement(element) {
|
|
192
|
+
element.addEventListener('change', this.__onChange);
|
|
193
|
+
element.addEventListener('input', this.__onInput);
|
|
194
|
+
}
|
|
195
|
+
/**
|
|
196
|
+
* Retrieves the value of a given element
|
|
197
|
+
* @param {Element} element Element to retrieve value from
|
|
198
|
+
* @return {unknown}
|
|
199
|
+
*/
|
|
200
|
+
__getValueFromElement(element) {
|
|
201
|
+
let value = undefined;
|
|
202
|
+
if (isSelectElement(element)) {
|
|
203
|
+
switch (element.type.toLowerCase()) {
|
|
204
|
+
case 'select-multiple':
|
|
205
|
+
value = [...element.selectedOptions].map((opt) => opt.value);
|
|
206
|
+
break;
|
|
207
|
+
case 'select-one':
|
|
208
|
+
default:
|
|
209
|
+
value = element.value;
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
else if (isInputElement(element)) {
|
|
213
|
+
switch (element.type.toLowerCase()) {
|
|
214
|
+
case 'checkbox':
|
|
215
|
+
value = element.checked === true;
|
|
216
|
+
break;
|
|
217
|
+
case 'number':
|
|
218
|
+
case 'date':
|
|
219
|
+
case 'time':
|
|
220
|
+
value = element.valueAsNumber;
|
|
221
|
+
break;
|
|
222
|
+
case 'textarea':
|
|
223
|
+
default:
|
|
224
|
+
value = element.value;
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
else if ('value' in element) {
|
|
228
|
+
value = element.value;
|
|
229
|
+
}
|
|
230
|
+
return value;
|
|
231
|
+
}
|
|
232
|
+
/**
|
|
233
|
+
* Updates the host value from an element
|
|
234
|
+
* @param {Element} element Element to retrieve value from
|
|
235
|
+
* @return {void}
|
|
236
|
+
*/
|
|
237
|
+
__updateValueFromElement(element) {
|
|
238
|
+
if (!this.__prop) {
|
|
239
|
+
return;
|
|
240
|
+
}
|
|
241
|
+
if (!this.__host ||
|
|
242
|
+
typeof this.__host !== 'object' ||
|
|
243
|
+
!(this.__prop in this.__host)) {
|
|
244
|
+
return;
|
|
245
|
+
}
|
|
246
|
+
const value = this.__getValueFromElement(element);
|
|
247
|
+
this.__lastValue = value;
|
|
248
|
+
this.__host[this.__prop] = value;
|
|
249
|
+
}
|
|
250
|
+
/** @inheritdoc */
|
|
251
|
+
reconnected() {
|
|
252
|
+
if (this.__element) {
|
|
253
|
+
this.__addListenersToElement(this.__element);
|
|
254
|
+
}
|
|
255
|
+
}
|
|
256
|
+
/** @inheritdoc */
|
|
257
|
+
disconnected() {
|
|
258
|
+
if (this.__element) {
|
|
259
|
+
this.__removeListenersFromElement(this.__element);
|
|
260
|
+
}
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
const bindInputDirective = directive(BindInputDirective);
|
|
264
|
+
/**
|
|
265
|
+
* Two-way binds a given property to the input it is defined on.
|
|
266
|
+
*
|
|
267
|
+
* For example:
|
|
268
|
+
*
|
|
269
|
+
* ```ts
|
|
270
|
+
* html`
|
|
271
|
+
* <input type="text" ${input(this, 'name')}>
|
|
272
|
+
* `;
|
|
273
|
+
* ```
|
|
274
|
+
*
|
|
275
|
+
* @param {T} host Host object of the property
|
|
276
|
+
* @param {string} key Property to bind
|
|
277
|
+
* @return {DirectiveResult}
|
|
278
|
+
*/
|
|
279
|
+
export function bindInput(host, key) {
|
|
280
|
+
return bindInputDirective(host, key);
|
|
281
|
+
}
|
|
282
|
+
//# sourceMappingURL=bindInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bindInput.js","sourceRoot":"","sources":["../src/bindInput.ts"],"names":[],"mappings":"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"}
|
package/lib/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC"}
|
package/lib/index.js
ADDED
package/lib/index.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC"}
|
package/package.json
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@vdegenne/forms",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"scripts": {
|
|
6
|
+
"build": "wireit"
|
|
7
|
+
},
|
|
8
|
+
"wireit": {
|
|
9
|
+
"build": {
|
|
10
|
+
"command": "tsc --pretty",
|
|
11
|
+
"clean": "if-file-deleted",
|
|
12
|
+
"files": [
|
|
13
|
+
"./tsconfig.json",
|
|
14
|
+
"./src/"
|
|
15
|
+
],
|
|
16
|
+
"output": [
|
|
17
|
+
"./lib/"
|
|
18
|
+
]
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
"devDependencies": {
|
|
22
|
+
"lit": "^3.2.1",
|
|
23
|
+
"typescript": "^5.7.3",
|
|
24
|
+
"wireit": "^0.14.11"
|
|
25
|
+
},
|
|
26
|
+
"files": [
|
|
27
|
+
"./lib/"
|
|
28
|
+
],
|
|
29
|
+
"exports": {
|
|
30
|
+
".": {
|
|
31
|
+
"default": "./lib/index.js",
|
|
32
|
+
"types": "./lib/index.d.ts"
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|