diff --git a/examples/type-restore/Object.mjs b/examples/type-restore/Object.mjs
index 1fbed07..78da5fb 100644
--- a/examples/type-restore/Object.mjs
+++ b/examples/type-restore/Object.mjs
@@ -4,7 +4,7 @@ export class ObjectText extends WebComponent {
static properties = ["object"];
onInit() {
this.props.object = {
- hello: 'world',
+ hello: 'worldzz',
age: 2
};
}
@@ -12,7 +12,37 @@ export class ObjectText extends WebComponent {
console.log('>>> object', this.props.object)
}
get template() {
- return ``;
+ const greeting = document.createElement('textarea')
+ greeting.innerHTML = this.props.object.hello;
+ greeting.setAttribute('id', 'greeting-field');
+ const greetingLabel = document.createElement('label');
+ greetingLabel.setAttribute('for', 'greeting-field');
+ greetingLabel.textContent = 'Hello';
+ greeting.onkeyup = () => {
+ this.props.object = {
+ ...this.props.object,
+ hello: greeting.value
+ };
+ }
+ const ageField = document.createElement('input');
+ ageField.value = this.props.object.age;
+ ageField.setAttribute('id', 'age-field');
+ const ageLabel = document.createElement('label')
+ ageLabel.setAttribute('for', 'age-field');
+ ageLabel.textContent = 'Age'
+ ageField.onkeyup = () => {
+ this.props.object = {
+ ...this.props.object,
+ age: ageField.value
+ }
+ }
+ const form = document.createElement('form');
+ form.append(greetingLabel, greeting, ageLabel, ageField)
+ return form;
+ }
+
+ render() {
+ if (this.children.length === 0) this.replaceChildren(this.template);
}
}
diff --git a/examples/type-restore/index.html b/examples/type-restore/index.html
index dbf9646..952258c 100644
--- a/examples/type-restore/index.html
+++ b/examples/type-restore/index.html
@@ -22,10 +22,21 @@
Toggle: