[IMP] awesome_owl: task 13-14 (slots and toggle in cards)

Author: tskv

awesome_owl/static/src/card/card.js

@@ -4,8 +4,16 @@ export class Card extends Component {
     static template = "awesome_owl.Card";
 
     static props = {
-        title : {type: String},
-        content : {type: String}
+        title : { type: String },
+        slots : { type: Object, optional: true }
+    }
+
+    setup() {
+        this.state = useState({ isOpen: true })
+    }
+
+    toggle() {
+        this.state.isOpen = !this.state.isOpen;
     }
 
 }

awesome_owl/static/src/card/card.xml

@@ -6,9 +6,10 @@
             <div class="card-body">
                 <h5 class="card-title">
                     <t t-out="props.title"/>
+                    <button class="btn btn-primary" t-on-click="toggle">Toggle</button>
                 </h5>
-                <p class="card-text">
-                    <t t-out="props.content"/>
+                <p class="card-text" t-if="state.isOpen">
+                    <t t-slot="default"/>
                 </p>
             </div>
         </div>

awesome_owl/static/src/playground.js

@@ -9,7 +9,7 @@ export class Playground extends Component {
 
     setup() {
         this.value1 = "<div class='text-primary'>test</div>";
-        this.value2 = markup("<a href='odoo.com'>test2</a>");
+        this.value2 = markup("<a href='http://odoo.com'>test2</a>");
         this.state = useState({ sum : 0 });
     }
 

awesome_owl/static/src/playground.xml

@@ -10,8 +10,17 @@
             <Counter onChange.bind="implementSum"/>
         </div>
         <div>
-            <Card title="'card 1'" content="value1"/>
-            <Card title="'card 2'" content="value2"/>
+            <Card title="'card 1'">
+                <t t-out="value1"/>
+            </Card>
+            <Card title="'card 2'">
+                <t t-out="value2"/>
+            </Card>
+        </div>
+        <div>
+            <Card title="'card 3'">
+                <Counter onChange.bind="implementSum"/>
+            </Card>
         </div>
         <div>
             The sum is: <t t-esc="state.sum"/>