-
Notifications
You must be signed in to change notification settings - Fork 0
/
be-valued.ts
89 lines (79 loc) · 2.42 KB
/
be-valued.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import {BE, propDefaults, propInfo} from 'be-enhanced/BE.js';
import {BEConfig} from 'be-enhanced/types';
import {XE} from 'xtal-element/XE.js';
import {Actions, AllProps, AP, PAP, ProPAP, POA} from './types';
import {register} from 'be-hive/register.js';
export class BeValued extends BE<AP, Actions> implements Actions{
static override get beConfig(){
return {
parse: true,
} as BEConfig
}
#eventControllers: AbortController[] = [];
async onOn(self: this) {
const {enhancedElement, on} = self;
this.#disconnect();
for(const type of on!){
const ec = new AbortController();
enhancedElement.addEventListener(type, async e => {
await this.handleChange(self, e.target as HTMLInputElement);
}, {
signal: ec.signal,
});
this.#eventControllers.push(ec);
}
}
async handleChange(self: this, target: HTMLInputElement){
const {camelToLisp} = await import('trans-render/lib/camelToLisp.js');
const {enhancedElement, props} = self;
for(const prop of props!){
const val = (<any>target)[prop];
const attr = camelToLisp(prop);
switch(typeof val){
case 'boolean':
if(val) {
target.setAttribute(attr, '');
}else{
target.removeAttribute(attr);
}
break;
case 'string':
target.setAttribute(attr, val);
break;
default:
throw 'NI';//not implemented
}
}
}
#disconnect(){
for(const ec of this.#eventControllers){
ec.abort();
this.#eventControllers = [];
}
}
override detach(detachedElement: Element): void {
this.#disconnect();
}
}
export interface BeValued extends AllProps{}
const tagName = 'be-valued';
const ifWantsToBe = 'valued';
const upgrade = 'form';
const xe = new XE<AP, Actions>({
config:{
tagName,
propDefaults: {
...propDefaults,
on: ['input'],
props: ['value']
},
propInfo: {
...propInfo
},
actions: {
onOn: 'on',
}
},
superclass: BeValued
});
register(ifWantsToBe, upgrade, tagName);