[IMP] qweb: add t-slot directive

Closes #67

tools/playground/samples.js

@@ -233,7 +233,6 @@ const ANIMATION_CSS = `button {
 }
 `;
 
-
 const LIFECYCLE_DEMO = `class HookWidget extends owl.Component {
     constructor() {
         super(...arguments);
@@ -1082,6 +1081,121 @@ const RESPONSIVE_CSS = `body {
 }
 `;
 
+const SLOTS = `// This example will not work if your browser does not support ESNext class fields
+
+// We show here how slots can be used to create generic components. In this
+// example, the Card component is basically only a container, and is created
+// by giving it slots, inside the t-widget directive.
+
+class Card extends owl.Component {
+    state = { fullDisplay: true };
+
+    toggleDisplay() {
+        this.state.fullDisplay = !this.state.fullDisplay;
+    }
+}
+
+class Counter extends owl.Component {
+    state = {val: 1};
+
+    inc() {
+        this.state.val++;
+    }
+}
+
+// Main root widget
+class App extends owl.Component {
+    widgets = {Card, Counter};
+    state = {a: 1, b: 3};
+
+    inc(key, delta) {
+        this.state[key] += delta;
+    }
+}
+
+// Application setup
+const qweb = new owl.QWeb(TEMPLATES);
+const app = new App({ qweb });
+app.mount(document.body);`;
+
+const SLOTS_XML = `<templates>
+  <div t-name="Card" class="card" t-att-class="state.fullDisplay ? 'full' : 'small'">
+    <div class="card-title">
+      <t t-esc="props.title"/><button t-on-click="toggleDisplay">Toggle</button>
+    </div>
+    <t t-if="state.fullDisplay">
+      <div class="card-content" >
+        <t t-slot="content"/>
+      </div>
+      <div class="card-footer">
+        <t t-slot="footer"/>
+      </div>
+    </t>
+  </div>
+
+  <div t-name="Counter">
+    <t t-esc="state.val"/><button t-on-click="inc">Inc</button>
+  </div>
+
+  <div t-name="App" class="main">
+    <t t-widget="Card" title="'Title card A'">
+      <t t-set="content">Content of card 1...  [<t t-esc="state.a"/>]</t>
+      <t t-set="footer"><button t-on-click="inc('a', 1)">Increment A</button></t>
+    </t>
+    <t t-widget="Card"  title="'Title card B'">
+      <div t-set="content">
+        <div>Card 2... [<t t-esc="state.b"/>]</div>
+        <t t-widget="Counter"/>
+      </div>
+      <t t-set="footer"><button t-on-click="inc('b', -1)">Decrement B</button></t>
+    </t>
+  </div>
+</templates>`;
+
+const SLOTS_CSS = `.main {
+    display: flex;
+}
+
+.card {
+    display: flex;
+    flex-direction: column;
+    background-color: #eeeeee;
+    width: 200px;
+    height: 100px;
+    margin: 10px;
+    border: 1px solid gray;
+}
+
+.card.full {
+    height: 100px;
+}
+
+.card.small {
+    height: 25px;
+}
+
+.card-title {
+    flex: 0 0 25px;
+    font-weight: bold;
+    background-color: darkcyan;
+    color: white;
+    padding: 2px;
+}
+
+.card-title button {
+    float: right;
+}
+
+.card-content {
+    flex: 1 1 auto;
+    padding: 5px;
+    border-top: 1px solid white;
+}
+
+.card-footer {
+    border-top: 1px solid white;
+}`;
+
 const EMPTY = `class App extends owl.Component {
 }
 
@@ -1113,7 +1227,7 @@ export const SAMPLES = [
     description: "Animations",
     code: ANIMATION,
     xml: ANIMATION_XML,
-    css: ANIMATION_CSS,
+    css: ANIMATION_CSS
   },
   {
     description: "Lifecycle demo",
@@ -1132,6 +1246,12 @@ export const SAMPLES = [
     css: RESPONSIVE_CSS,
     xml: RESPONSIVE_XML
   },
+  {
+    description: "Slots",
+    code: SLOTS,
+    xml: SLOTS_XML,
+    css: SLOTS_CSS
+  },
   {
     description: "Empty",
     code: EMPTY