frontend: design prototype

1 files changed, 65 insertions, 0 deletions

diff --git a/static/widgets/editable/index.js b/static/widgets/editable/index.js
new file mode 100644
index 0000000..8a72aff
--- /dev/null
+++ b/static/widgets/editable/index.js
@@ -0,0 +1,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;
+	}
+}