[IMP] awesome_owl: add section 13

Author: trcazier

awesome_owl/static/src/card/card.js

@@ -2,10 +2,17 @@ import { Component, useState } from "@odoo/owl";
 
 export class Card extends Component {
     static template = "awesome_owl.card";
-    static props = { title: {type: String}, content: {type: String}}
+    static props = { 
+        title: String,
+        slots: {
+            type: Object,
+            shape: {
+                default: true
+            },
+        } 
+    }
 
     setup() {
-        this.title = this.props.title; 
-        this.content = this.props.content;
+        this.title = this.props.title;
     }
 }

awesome_owl/static/src/card/card.xml

@@ -6,7 +6,7 @@
             <div class="card-body">
                 <h5 class="card-title"><t t-esc="this.title"/></h5>
                 <p class="card-text">
-                    <t t-out="this.content"/>
+                    <t t-slot="default"/>
                 </p>
             </div>
         </div>

awesome_owl/static/src/playground.xml

@@ -9,9 +9,16 @@
         <Counter value="this.state.val2" side_effect.bind="() => this.state.val2++"/>
         <div>The sum is: <t t-esc="sum"/></div>
         <Counter/>
-        <Card title="'card title'" content="'card content'"/>
-        <Card title="'card title'" content="str1"/>
-        <Card title="'card title'" content="str2"/>
+        <Card title="'epic card title'">
+            New content for the new card
+        </Card>
+        <Card title="'cute card title'">
+            this should work with arbitrary html content
+        </Card>
+        <Card title="'scary card title'">
+            Here is a cool counter for you
+            <Counter/>
+        </Card>
 
         <TodoList/>
     </t>

awesome_owl/static/src/todo_list/todo_list.js

@@ -9,8 +9,8 @@ export class TodoList extends Component {
     setup() {
         useAutoFocus("todo-input");
         this.state = useState({todos: {
-                2: { description: "penser à acheter du lait", isCompleted: false }, 
-                3: { description: "penser à acheter des tomates cerises", isCompleted: true }
+                2: { description: "buy milk", isCompleted: false }, 
+                3: { description: "buy tomatoes", isCompleted: true }
             },
             lastId: 3
         });