mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
Samuel Degueldre
9475de4d18
The playground hasn't been touched for a while and a few things were broken before this commit: - Exporting as a standalone web application was broken because it still attempted to load the templates like it was done in owl 1 - Resizing the editor tabs still tried to use `this.trigger` While fixing the export feature, the files needed by the app were factored out of hardcoded strings and into real files, as this makes it easier to maintain, since these files get syntax highlighting. The samples received the same treatment: there is now a `samples` folder containing all the samples, it also contains a jsconfig, giving autocompletion on owl functions while editing the files, and allowing the owl import to look how it would when using owl as a node_module. In the browser, this import is translated to the relative path of the owl module using an import map.
50 lines
1.2 KiB
JavaScript
50 lines
1.2 KiB
JavaScript
// We show here how slots can be used to create generic components.
|
|
// In this example, the Card component is basically only a container. It is not
|
|
// aware of its content. It just knows where it should be (with t-slot).
|
|
// The parent component define the content with t-set-slot.
|
|
//
|
|
// Note that the t-on-click event, defined in the Root template, is executed in
|
|
// the context of the Root component, even though it is inside the Card component
|
|
import { Component, useState, mount } from "@odoo/owl";
|
|
|
|
class Card extends Component {
|
|
static template = "Card";
|
|
|
|
setup() {
|
|
this.state = useState({ showContent: true });
|
|
}
|
|
|
|
toggleDisplay() {
|
|
this.state.showContent = !this.state.showContent;
|
|
}
|
|
}
|
|
|
|
class Counter extends Component {
|
|
static template = "Counter";
|
|
|
|
setup() {
|
|
this.state = useState({val: 1});
|
|
}
|
|
|
|
inc() {
|
|
this.state.val++;
|
|
}
|
|
}
|
|
|
|
// Main root component
|
|
class Root extends Component {
|
|
static template = "Root"
|
|
static components = { Card, Counter };
|
|
|
|
setup() {
|
|
this.state = useState({a: 1, b: 3});
|
|
}
|
|
|
|
inc(key, delta) {
|
|
this.state[key] += delta;
|
|
}
|
|
}
|
|
|
|
// Application setup
|
|
mount(Root, document.body, { templates: TEMPLATES, dev: true});
|