[IMP] awesome_owl: add a global counter

Add a callback to the buttons to create a global counter.

Author: clom-odoo

awesome_owl/static/src/counter/counter.js

@@ -3,12 +3,19 @@ import { Component, useState } from "@odoo/owl";
 
 export class Counter extends Component {
     static template = "awesome_owl.counter";
+    static props = {
+        onChange: { type: Function, optional: true }
+    }
 
     setup() {
-        this.state = useState({ value:0});
+        this.state = useState({ value: 0 });
     }
 
     increment() {
         this.state.value++;
+        if (this.props.onChange) {
+            this.props.onChange();
+        }
     }
-}
+
+} 

awesome_owl/static/src/playground.js

@@ -8,14 +8,14 @@ export class Playground extends Component {
     static template = "awesome_owl.playground";
     static components = { Counter, Card };
 
-    someHTML = markup("<div class='text-primary'>some content</div>")
-    someText = "<div class='text-primary'>some content</div>"
-
+    
     setup() {
-        this.state = useState({ value:0});
+        this.someHTML = markup("<div class='text-primary'>some content</div>");
+        this.someText = "<div class='text-primary'>some content</div>";
+        this.sum = useState({ value: 0 });
     }
-    
-    increment() {
-        this.state.value++;
+
+    incrementSum() {
+        this.sum.value++;
     }
 }

awesome_owl/static/src/playground.xml

@@ -4,9 +4,12 @@
     <t t-name="awesome_owl.playground">
         <div class="p-3">
             hello world
-            <Counter />
+            <Counter onChange.bind="incrementSum"/>
+            <Counter onChange.bind="incrementSum"/>
+            <Counter onChange.bind="incrementSum"/>
             <Card title="'My Card'" content="someText"/>
             <Card title="'Card 2'" content="someHTML"/>
+            <t t-esc="this.sum.value.toString()"/>
         </div>
     </t>