blob: 8a72aff03da65d9649925dbf2ef2510103322b0a (
plain)
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
|
import * as sfw from 'sfw';
const { Div, Label, Input } = sfw.element.native;
import icons from '../../icons/index.js';
const css = await sfw.css(import.meta.url, './index.css');
export default class Editable extends sfw.element.Container {
#label
#input
#edit
constructor() {
super({ css });
this.body.append(
Div.new({
id: 'container',
children: [
this.#label = Label.new({ htmlFor: 'input' }),
this.#input = Input.new({
readOnly: true,
onkeydown: (e) => {
if (e.key === 'Enter') {
this.#input.readOnly = true;
this.#update()
}
},
}),
this.#edit = Div.new({
id: 'edit',
children: [ icons.edit ],
onclick: () => {
this.#input.readOnly = !this.#input.readOnly;
this.#update();
}
}),
],
})
);
}
#update() {
this.#edit.innerHTML = '';
this.#edit.append(
this.#input.readOnly ? icons.edit : icons.check
);
if (!this.#input.readOnly) {
this.#input.select();
}
}
set title(value) {
this.#label.innerText = value;
}
set value(value) {
this.#input.value = value;
}
set type(type) {
this.#input.type = type;
}
}
|
