[ADD] component: implement t-model directive

closes #170

src/qweb_core.ts

@@ -362,7 +362,7 @@ export class QWeb {
     for (let i = 0; i < attributes.length; i++) {
       let attrName = attributes[i].name;
       if (attrName.startsWith("t-")) {
-        let dName = attrName.slice(2).split("-")[0];
+        let dName = attrName.slice(2).split(/-|\./)[0];
         if (!(dName in DIRECTIVE_NAMES)) {
           throw new Error(`Unknown QWeb directive: '${attrName}'`);
         }
@@ -379,12 +379,13 @@ export class QWeb {
         const name = attributes[j].name;
         if (
           name === "t-" + directive.name ||
-          name.startsWith("t-" + directive.name + "-")
+          name.startsWith("t-" + directive.name + "-") ||
+          name.startsWith("t-" + directive.name + ".")
         ) {
           fullName = name;
           value = attributes[j].textContent;
           validDirectives.push({ directive, value, fullName });
-          if (directive.name === "on") {
+          if (directive.name === "on" || directive.name === 'model') {
             withHandlers = true;
           }
         }

src/qweb_extensions.ts

@@ -13,6 +13,7 @@ import { VNode } from "./vdom";
  * - t-widget/t-keepalive
  * - t-mounted
  * - t-slot
+ * - t-model
  */
 
 //------------------------------------------------------------------------------
@@ -658,3 +659,51 @@ QWeb.addDirective({
     return true;
   }
 });
+
+//------------------------------------------------------------------------------
+// t-model
+//------------------------------------------------------------------------------
+UTILS.toNumber = function(val: string): number | string {
+  const n = parseFloat(val);
+  return isNaN(n) ? val : n;
+};
+
+QWeb.addDirective({
+  name: "model",
+  priority: 42,
+  atNodeCreation({ ctx, nodeID, value, node, fullName }) {
+    const type = node.getAttribute("type");
+    let handler;
+    let event = fullName.includes(".lazy") ? "change" : "input";
+    if (node.tagName === "select") {
+      ctx.addLine(`p${nodeID}.props = {value: context.state['${value}']};`);
+      event = "change";
+      handler = `(ev) => {context.state['${value}'] = ev.target.value}`;
+    } else if (type === "checkbox") {
+      ctx.addLine(`p${nodeID}.props = {checked: context.state['${value}']};`);
+      handler = `(ev) => {context.state['${value}'] = ev.target.checked}`;
+    } else if (type === "radio") {
+      const nodeValue = node.getAttribute("value")!;
+      ctx.addLine(
+        `p${nodeID}.props = {checked:context.state['${value}'] === '${nodeValue}'};`
+      );
+      handler = `(ev) => {context.state['${value}'] = ev.target.value}`;
+      event = "click";
+    } else {
+      ctx.addLine(`p${nodeID}.props = {value: context.state['${value}']};`);
+      const trimCode = fullName.includes(".trim") ? ".trim()" : "";
+      let valueCode = `ev.target.value${trimCode}`;
+      if (fullName.includes(".number")) {
+        ctx.rootContext.shouldDefineUtils = true;
+        valueCode = `utils.toNumber(${valueCode})`;
+      }
+      handler = `(ev) => {context.state['${value}'] = ${valueCode}}`;
+    }
+    ctx.addLine(
+      `extra.handlers['${event}' + ${nodeID}] = extra.handlers['${event}' + ${nodeID}] || (${handler});`
+    );
+    ctx.addLine(
+      `p${nodeID}.on['${event}'] = extra.handlers['${event}' + ${nodeID}];`
+    );
+  }
+});