dynamic-components.md

@@ -4,9 +4,32 @@ They are written as plain objects that have a couple of special attributes. A ty
 ```js
 const Field = {
   base: ({ classList }) => DOMore.create('div', { classList: ['field', ...classList] }),
+  parse: value => value;
+  validate: value => true;
+
   init({ onClick, type, label, value }) {
+    switch (type) {
+      case 'int':
+        this.parse = v => parseInt(v, 10);
+        this.validate = v => !isNaN(v);
+        break;
+      case 'float':
+        this.parse = parseFloat;
+        this.validate = v => !isNaN(v);
+        break;
+      case 'string':
+        this.parse = v => String(v);
+        break;
+      default:
+        throw new Error('Supported Field-types: string, int, float');
+    }
+    this.labelContainer = DOMore.create('span', { className: 'label', target: this }, label);
+    this.valueContainer = DOMore.create('span', { className: 'value', target: this });
 
+    this.value = value;
+    this.addEventListener('click', onClick);
   },
+
   value: {
     get() {
       return this.parse(this.valueContainer.textContent);