[IMP] add more examples

Author: etobella

docs/playground/playground.js

@@ -84,6 +84,26 @@ const SAMPLES = [
     folder: "oca_03",
     code: ["js", "xml", "css"],
   },
+  {
+    description: "OCA 04 - Function Props",
+    folder: "oca_04",
+    code: ["js", "xml", "css"],
+  },
+  {
+    description: "OCA 05 - Environment parameters",
+    folder: "oca_05",
+    code: ["js", "xml", "css"],
+  },
+  {
+    description: "OCA 06 - Create your hook",
+    folder: "oca_06",
+    code: ["js", "xml", "css"],
+  },
+  {
+    description: "OCA 07 - Slots usage",
+    folder: "oca_07",
+    code: ["js", "xml", "css"],
+  },
   {
     description: "Components",
     folder: "components",

docs/playground/samples/oca_0/oca_0.css

@@ -0,0 +1,4 @@
+.child {
+    padding: 2px;
+    margin: 3px;
+}

docs/playground/samples/oca_0/oca_0.js

@@ -0,0 +1,42 @@
+// In this example, we show how components can be defined and created.
+import { Component, useEnv, useSubEnv, useState, mount } from "@odoo/owl";
+
+export function useCounter() {
+   const env = useEnv();
+   if (env.counter) {
+      return useState(env.counter);
+   }
+   const counter = useState({ count: 0 });
+   useSubEnv({ counter });
+   return counter;
+}
+
+export class Child extends Component {
+   static template = 'training_oca.Child';
+   setup() {
+      this.counter = useCounter();
+   }
+}
+
+export class B extends Component {
+   static template = 'training_oca.B';
+   static components = { Child };
+}
+
+export class A extends Component {
+   static template = 'training_oca.A';
+   static components = { B };
+}
+
+export class Parent extends Component {
+   static template = 'training_oca.Parent';
+   static components = { A };
+   setup() {
+      this.counter = useCounter();
+   }
+   onIncrement() {
+      this.counter.count++;
+   }
+}
+
+mount(Parent, document.body, { templates: TEMPLATES, dev: true });

docs/playground/samples/oca_0/oca_0.xml

@@ -0,0 +1,17 @@
+<templates xml:space="preserve">
+    <div t-name="training_oca.Parent">
+        <button t-on-click="onIncrement">Increment from Child</button>
+        <A/>
+    </div>
+    <t t-name="training_oca.A">
+        <B/>
+    </t>
+    <t t-name="training_oca.B">
+        <Child/>
+        <Child/>
+        <Child/>
+    </t>
+    <t t-name="training_oca.Child">
+        <div class="child" t-esc="counter.count"/>
+    </t>
+</templates>

docs/playground/samples/oca_04/oca_04.css

@@ -0,0 +1,4 @@
+.child {
+    padding: 2px;
+    margin: 3px;
+}

docs/playground/samples/oca_04/oca_04.js

@@ -0,0 +1,22 @@
+// In this example, we show how components can be defined and created.
+import { Component, useState, mount } from "@odoo/owl";
+
+export class Child extends Component {
+   static template = "training_oca.Child";
+   static props = { onIncrement: Function };
+}
+
+export class Parent extends Component {
+   static template = "training_oca.Parent";
+   static components = { Child };
+
+   setup() {
+      this.state = useState({ count: 0 });
+   }
+
+   increment() {
+      this.state.count++;
+   }
+}
+
+mount(Parent, document.body, { templates: TEMPLATES, dev: true });

docs/playground/samples/oca_04/oca_04.xml

@@ -0,0 +1,11 @@
+<templates xml:space="preserve">
+   <t t-name="training_oca.Parent">
+       <div>
+           <p>Count: <t t-esc="state.count"/></p>
+           <Child onIncrement.bind="increment"/>
+       </div>
+   </t>
+   <t t-name="training_oca.Child">
+       <button t-on-click="props.onIncrement">Increment from Child</button>
+   </t>
+</templates>

docs/playground/samples/oca_05/oca_05.css

@@ -0,0 +1,4 @@
+.child {
+    padding: 2px;
+    margin: 3px;
+}

docs/playground/samples/oca_05/oca_05.js

@@ -0,0 +1,33 @@
+// In this example, we show how components can be defined and created.
+import { Component, useState, mount, useSubEnv } from "@odoo/owl";
+
+export class Child extends Component {
+   static template = 'training_oca.Child';
+   setup() {
+      this.counter = useState(this.env.counter);
+   }
+}
+
+export class B extends Component {
+   static template = 'training_oca.B';
+   static components = { Child };
+}
+
+export class A extends Component {
+   static template = 'training_oca.A';
+   static components = { B };
+}
+
+export class Parent extends Component {
+   static template = 'training_oca.Parent';
+   static components = { A };
+   setup() {
+      this.counter = useState({ count: 0 });
+      useSubEnv({ counter: this.counter });
+   }
+   onIncrement() {
+      this.counter.count++;
+   }
+}
+
+mount(Parent, document.body, { templates: TEMPLATES, dev: true });

docs/playground/samples/oca_05/oca_05.xml

@@ -0,0 +1,17 @@
+<templates xml:space="preserve">
+    <div t-name="training_oca.Parent">
+        <button t-on-click="onIncrement">Increment from Child</button>
+        <A/>
+    </div>
+    <t t-name="training_oca.A">
+        <B/>
+    </t>
+    <t t-name="training_oca.B">
+        <Child/>
+        <Child/>
+        <Child/>
+    </t>
+    <t t-name="training_oca.Child">
+        <div class="child" t-esc="counter.count"/>
+    </t>
+</templates>