From d7430e9f18f06a8725d605f8faa80d886f676749 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= Date: Mon, 17 Jun 2019 16:05:21 +0200 Subject: [PATCH] [IMP] owl: update to v0.15.0 --- owl.js | 175 ++++++++++---- playground/samples.js | 504 ++++++++++++++++++++++++--------------- playground/templates.xml | 2 +- 3 files changed, 444 insertions(+), 237 deletions(-) diff --git a/owl.js b/owl.js index c65f3baf..aec8ad59 100644 --- a/owl.js +++ b/owl.js @@ -1125,7 +1125,6 @@ if (data) { this.addTemplates(data); } - this.addTemplate("default", "
"); } static addDirective(directive) { DIRECTIVES.push(directive); @@ -1306,7 +1305,7 @@ for (let i = 0; i < attributes.length; i++) { let attrName = attributes[i].name; if (attrName.startsWith("t-")) { - let dName = attrName.slice(2).split("-")[0]; + let dName = attrName.slice(2).split(/-|\./)[0]; if (!(dName in DIRECTIVE_NAMES)) { throw new Error(`Unknown QWeb directive: '${attrName}'`); } @@ -1321,11 +1320,12 @@ for (let j = 0; j < ATTR_N; j++) { const name = attributes[j].name; if (name === "t-" + directive.name || - name.startsWith("t-" + directive.name + "-")) { + name.startsWith("t-" + directive.name + "-") || + name.startsWith("t-" + directive.name + ".")) { fullName = name; value = attributes[j].textContent; validDirectives.push({ directive, value, fullName }); - if (directive.name === "on") { + if (directive.name === "on" || directive.name === 'model') { withHandlers = true; } } @@ -1817,19 +1817,7 @@ if (shouldPatch && __owl__.isMounted && renderId === __owl__.renderId) { // we only update the vnode and the actual DOM if no other rendering // occurred between now and when the render method was initially called. - const patchLen = patchQueue.length; - for (let i = 0; i < patchLen; i++) { - const patch = patchQueue[i]; - patch.push(patch[0].willPatch()); - } - for (let i = 0; i < patchLen; i++) { - const patch = patchQueue[i]; - patch[0]._patch(patch[1]); - } - for (let i = patchLen - 1; i >= 0; i--) { - const patch = patchQueue[i]; - patch[0].patched(patch[2]); - } + this._applyPatchQueue(patchQueue); } } /** @@ -1997,7 +1985,7 @@ p = p.__proto__; } if (p === Component) { - this.template = "default"; + throw new Error(`Could not find template for component "${this.constructor.name}"`); } else { tmap[name] = template; @@ -2085,6 +2073,28 @@ } return props; } + /** + * Apply the given patch queue. A patch is a pair [c, vn], where c is a + * Component instance and vn a VNode. + * 1) Call 'willPatch' on the component of each patch + * 2) Call '_patch' on the component of each patch + * 3) Call 'patched' on the component of each patch, in inverse order + */ + _applyPatchQueue(patchQueue) { + const patchLen = patchQueue.length; + for (let i = 0; i < patchLen; i++) { + const patch = patchQueue[i]; + patch.push(patch[0].willPatch()); + } + for (let i = 0; i < patchLen; i++) { + const patch = patchQueue[i]; + patch[0]._patch(patch[1]); + } + for (let i = patchLen - 1; i >= 0; i--) { + const patch = patchQueue[i]; + patch[0].patched(patch[2]); + } + } /** * Validate the component props (or next props) against the (static) props * description. This is potentially an expensive operation: it may needs to @@ -2534,6 +2544,7 @@ * - t-widget/t-keepalive * - t-mounted * - t-slot + * - t-model */ //------------------------------------------------------------------------------ // t-on @@ -2718,13 +2729,6 @@ * // t-widget directive: we start by evaluating the expression given by t-key: * let key5 = "somestring"; * - * // We keep the index of the position of the widget in the closure. We push - * // null to reserve the slot, and will replace it later by the widget vnode, - * // when it will be ready (do not forget that preparing/rendering a widget is - * // asynchronous) - * let _2_index = c1.length; - * c1.push(null); - * * // def3 is the promise that will contain later either the new widget * // creation, or the props update... * let def3; @@ -2739,6 +2743,13 @@ * ? context.__owl__.children[context.__owl__.cmap[key5]] * : false; * + * // We keep the index of the position of the widget in the closure. We push + * // null to reserve the slot, and will replace it later by the widget vnode, + * // when it will be ready (do not forget that preparing/rendering a widget is + * // asynchronous) + * let _2_index = c1.length; + * c1.push(null); + * * // we evaluate here the props given to the component. It is done here to be * // able to easily reference it later, and also, it might be an expensive * // computation, so it is certainly better to do it only once @@ -2852,7 +2863,7 @@ */ QWeb.addDirective({ name: "widget", - extraNames: ["props", "keepalive"], + extraNames: ["props", "keepalive", "asyncroot"], priority: 100, atNodeEncounter({ ctx, value, node, qweb }) { ctx.addLine("//WIDGET"); @@ -2860,6 +2871,7 @@ ctx.rootContext.shouldDefineQWeb = true; ctx.rootContext.shouldDefineUtils = true; let keepAlive = node.getAttribute("t-keepalive") ? true : false; + let async = node.getAttribute("t-asyncroot") ? true : false; // t-on- events and t-transition const events = []; let transition = ""; @@ -2904,8 +2916,6 @@ // want to evaluate it only once) ctx.addLine(`let key${keyID} = ${key};`); } - ctx.addLine(`let _${dummyID}_index = c${ctx.parentNode}.length;`); - ctx.addLine(`c${ctx.parentNode}.push(null);`); ctx.addLine(`let def${defID};`); let templateID = key ? `key${keyID}` @@ -2990,6 +3000,14 @@ createHook = `vnode.data.hook = {create(_, vn){${classCode}${styleCode}${eventsCode}}};`; } ctx.addLine(`let w${widgetID} = ${templateID} in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[${templateID}]] : false;`); + ctx.addLine(`let _${dummyID}_index = c${ctx.parentNode}.length;`); + if (async) { + ctx.addLine(`const patchQueue${widgetID} = [];`); + ctx.addLine(`c${ctx.parentNode}.push(w${widgetID} && w${widgetID}.__owl__.pvnode || null);`); + } + else { + ctx.addLine(`c${ctx.parentNode}.push(null);`); + } ctx.addLine(`let props${widgetID} = {${propStr}};`); ctx.addIf(`w${widgetID} && w${widgetID}.__owl__.renderPromise && !w${widgetID}.__owl__.vnode`); ctx.addIf(`utils.shallowEqual(props${widgetID}, w${widgetID}.__owl__.renderProps)`); @@ -3008,32 +3026,46 @@ ctx.addLine(`w${widgetID} = new W${widgetID}(owner, props${widgetID});`); ctx.addLine(`context.__owl__.cmap[${templateID}] = w${widgetID}.__owl__.id;`); // SLOTS - const slotNodes = node.querySelectorAll("[t-set]"); - if (slotNodes.length) { + if (node.childElementCount) { + const clone = node.cloneNode(true); + const slotNodes = clone.querySelectorAll("[t-set]"); const slotId = qweb.nextSlotId++; - for (let i = 0, length = slotNodes.length; i < length; i++) { - const slotNode = slotNodes[i]; - const key = slotNode.getAttribute("t-set"); - slotNode.removeAttribute("t-set"); - const slotFn = qweb._compile(`slot_${key}_template`, slotNode); - qweb.slots[`${slotId}_${key}`] = slotFn.bind(qweb); - } ctx.addLine(`w${widgetID}.__owl__.slotId = ${slotId};`); + if (slotNodes.length) { + for (let i = 0, length = slotNodes.length; i < length; i++) { + const slotNode = slotNodes[i]; + slotNode.parentElement.removeChild(slotNode); + const key = slotNode.getAttribute("t-set"); + slotNode.removeAttribute("t-set"); + const slotFn = qweb._compile(`slot_${key}_template`, slotNode); + qweb.slots[`${slotId}_${key}`] = slotFn.bind(qweb); + } + } + if (clone.childElementCount) { + const content = clone.children[0]; + const slotFn = qweb._compile(`slot_default_template`, content); + qweb.slots[`${slotId}_default`] = slotFn.bind(qweb); + } } ctx.addLine(`def${defID} = w${widgetID}._prepare();`); // hack: specify empty remove hook to prevent the node from being removed from the DOM - // FIXME: click to re-add widget during remove transition -> leak ctx.addLine(`def${defID} = def${defID}.then(vnode=>{${createHook}let pvnode=h(vnode.sel, {key: ${templateID}, hook: {insert(vn) {let nvn=w${widgetID}._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;${refExpr}${transitionsInsertCode}},remove() {},destroy(vn) {${finalizeWidgetCode}}}});c${ctx.parentNode}[_${dummyID}_index]=pvnode;w${widgetID}.__owl__.pvnode = pvnode;});`); ctx.addElse(); // need to update widget - ctx.addLine(`def${defID} = def${defID} || w${widgetID}._updateProps(props${widgetID}, extra.forceUpdate, extra.patchQueue);`); + const patchQueueCode = async ? `patchQueue${widgetID}` : "extra.patchQueue"; + ctx.addLine(`def${defID} = def${defID} || w${widgetID}._updateProps(props${widgetID}, extra.forceUpdate, ${patchQueueCode});`); let keepAliveCode = ""; if (keepAlive) { keepAliveCode = `pvnode.data.hook.insert = vn => {vn.elm.parentNode.replaceChild(w${widgetID}.el,vn.elm);vn.elm=w${widgetID}.el;w${widgetID}._remount();};`; } ctx.addLine(`def${defID} = def${defID}.then(()=>{if (w${widgetID}.__owl__.isDestroyed) {return};${tattStyle ? `w${widgetID}.el.style=${tattStyle};` : ""}${updateClassCode}let pvnode=w${widgetID}.__owl__.pvnode;${keepAliveCode}c${ctx.parentNode}[_${dummyID}_index]=pvnode;});`); ctx.closeIf(); - ctx.addLine(`extra.promises.push(def${defID});`); + if (async) { + ctx.addLine(`def${defID}.then(w${widgetID}._applyPatchQueue.bind(w${widgetID}, patchQueue${widgetID}));`); + } + else { + ctx.addLine(`extra.promises.push(def${defID});`); + } if (node.hasAttribute("t-if") || node.hasAttribute("t-else") || node.hasAttribute("t-elif")) { @@ -3082,6 +3114,49 @@ return true; } }); + //------------------------------------------------------------------------------ + // t-model + //------------------------------------------------------------------------------ + UTILS.toNumber = function (val) { + const n = parseFloat(val); + return isNaN(n) ? val : n; + }; + QWeb.addDirective({ + name: "model", + priority: 42, + atNodeCreation({ ctx, nodeID, value, node, fullName }) { + const type = node.getAttribute("type"); + let handler; + let event = fullName.includes(".lazy") ? "change" : "input"; + if (node.tagName === "select") { + ctx.addLine(`p${nodeID}.props = {value: context.state['${value}']};`); + event = "change"; + handler = `(ev) => {context.state['${value}'] = ev.target.value}`; + } + else if (type === "checkbox") { + ctx.addLine(`p${nodeID}.props = {checked: context.state['${value}']};`); + handler = `(ev) => {context.state['${value}'] = ev.target.checked}`; + } + else if (type === "radio") { + const nodeValue = node.getAttribute("value"); + ctx.addLine(`p${nodeID}.props = {checked:context.state['${value}'] === '${nodeValue}'};`); + handler = `(ev) => {context.state['${value}'] = ev.target.value}`; + event = "click"; + } + else { + ctx.addLine(`p${nodeID}.props = {value: context.state['${value}']};`); + const trimCode = fullName.includes(".trim") ? ".trim()" : ""; + let valueCode = `ev.target.value${trimCode}`; + if (fullName.includes(".number")) { + ctx.rootContext.shouldDefineUtils = true; + valueCode = `utils.toNumber(${valueCode})`; + } + handler = `(ev) => {context.state['${value}'] = ${valueCode}}`; + } + ctx.addLine(`extra.handlers['${event}' + ${nodeID}] = extra.handlers['${event}' + ${nodeID}] || (${handler});`); + ctx.addLine(`p${nodeID}.on['${event}'] = extra.handlers['${event}' + ${nodeID}];`); + } + }); class Store extends EventBus { constructor(config, options = {}) { @@ -3094,17 +3169,29 @@ this.mutations = config.mutations; this.env = config.env; this.observer = new Observer(); - this.observer.notifyCB = this.trigger.bind(this, "update"); + this.observer.notifyCB = () => { + this._gettersCache = {}; + this.trigger("update"); + }; this.observer.allowMutations = false; this.observer.observe(this.state); this.getters = {}; + this._gettersCache = {}; if (this.debug) { this.history.push({ state: this.state }); } + const cTypes = ["undefined", "number", "string"]; for (let entry of Object.entries(config.getters || {})) { const name = entry[0]; const func = entry[1]; this.getters[name] = payload => { + if (this._commitLevel === 0 && cTypes.indexOf(typeof payload) >= 0) { + this._gettersCache[name] = this._gettersCache[name] || {}; + this._gettersCache[name][payload] = + this._gettersCache[name][payload] || + func({ state: this.state, getters: this.getters }, payload); + return this._gettersCache[name][payload]; + } return func({ state: this.state, getters: this.getters }, payload); }; } @@ -3402,9 +3489,9 @@ exports.connect = connect; exports.utils = utils; - exports.__info__.version = '0.14.0'; - exports.__info__.date = '2019-06-13T10:11:15.338Z'; - exports.__info__.hash = '2701a7d'; + exports.__info__.version = '0.15.0'; + exports.__info__.date = '2019-06-17T13:59:39.059Z'; + exports.__info__.hash = '609c108'; exports.__info__.url = 'https://github.com/odoo/owl'; }(this.owl = this.owl || {})); diff --git a/playground/samples.js b/playground/samples.js index 08d3f6ba..e361521c 100644 --- a/playground/samples.js +++ b/playground/samples.js @@ -1,33 +1,6 @@ -const CLICK_COUNTER = `class ClickCounter extends owl.Component { - constructor() { - super(...arguments); - this.state = { value: 0 }; - } +const COMPONENTS = `// In this example, we show how components can be defined and created. - increment() { - this.state.value++; - } -} - -const qweb = new owl.QWeb(TEMPLATES); -const counter = new ClickCounter({ qweb }); -counter.mount(document.body); -`; - -const CLICK_COUNTER_XML = ` - -`; - -const CLICK_COUNTER_CSS = `button { - color: darkred; - font-size: 30px; - width: 220px; -}`; - -const CLICK_COUNTER_ESNEXT = `// This example will not work if your browser does not support ESNext class fields -class ClickCounter extends owl.Component { +class Counter extends owl.Component { state = { value: 0 }; increment() { @@ -35,68 +8,39 @@ class ClickCounter extends owl.Component { } } -const qweb = new owl.QWeb(TEMPLATES); -const counter = new ClickCounter({ qweb }); -counter.mount(document.body); -`; - -const WIDGET_COMPOSITION = `// This example will not work if your browser does not support ESNext class fields - -class ClickCounter extends owl.Component { - state = { value: 0 }; - - increment() { - this.state.value++; - } -} - -class InputWidget extends owl.Component { - state = {text: ""}; - - updateVal(event) { - let value = event.target.value; - if (this.props.reverse) { - value = value.split("").reverse().join(""); - } - this.state.text = value - } -} - // Main root widget class App extends owl.Component { - widgets = {ClickCounter, InputWidget}; + widgets = { Counter }; } // Application setup +// Note that the xml templates are injected into the global TEMPLATES variable. const qweb = new owl.QWeb(TEMPLATES); const app = new App({ qweb }); app.mount(document.body); `; -const WIDGET_COMPOSITION_XML = ` - - -
- - -
+const COMPONENTS_XML = ` +
- - + +
`; -const WIDGET_COMPOSITION_CSS = `button, input { +const COMPONENTS_CSS = `button { font-size: 20px; width: 220px; margin: 5px; }`; -const ANIMATION = `// This example will not work if your browser does not support ESNext class fields -class ClickCounter extends owl.Component { +const ANIMATION = `// The goal of this component is to see how the t-transition directive can be +// used to generate simple transition effects. + +class Counter extends owl.Component { state = { value: 0 }; increment() { @@ -105,15 +49,11 @@ class ClickCounter extends owl.Component { } class App extends owl.Component { - state = {flag: false, widgetFlag: false, numbers: []}; - widgets = {ClickCounter}; + state = { flag: false, widgetFlag: false, numbers: [] }; + widgets = { Counter }; - toggle() { - this.state.flag = !this.state.flag; - } - - toggleWidget() { - this.state.widgetFlag = !this.state.widgetFlag; + toggle(key) { + this.state[key] = !this.state[key]; } addNumber() { @@ -129,46 +69,44 @@ app.mount(document.body); `; const ANIMATION_XML = ` -
+

Transition on DOM element

-

Transition on DOM element

- -
- -
-
Hello
+
+ +
+
Hello
+
-
-

Transition on sub widgets

+

Transition on sub widgets

-
- -
- +
+ +
+ +
-
-

Transition on lists

-

Transitions can also be applied on lists

-
- -
- - - +

Transition on lists

+

Transitions can also be applied on lists

+
+ +
+ + + +
-
-

Simple CSS animation

-

Remember, normal CSS still apply: for example, a simple flash animation with pure css

- +

Simple CSS animation

+

Remember, normal CSS still apply: for example, a simple flash animation with pure css

+
`; @@ -177,6 +115,7 @@ const ANIMATION_CSS = `button { font-size: 18px; height: 35px; } + .btn { cursor: pointer; padding: 5px; @@ -184,7 +123,6 @@ const ANIMATION_CSS = `button { background-color: #dddddd; } - .flash { background-position: center; transition: background .6s; @@ -195,7 +133,6 @@ const ANIMATION_CSS = `button { transition: background 0s; } - .square { background-color: red; width: 100px; @@ -210,6 +147,7 @@ const ANIMATION_CSS = `button { .fade-enter-active, .fade-leave-active { transition: opacity .6s; } + .fade-enter, .fade-leave-to { opacity: 0; } @@ -233,7 +171,14 @@ const ANIMATION_CSS = `button { } `; -const LIFECYCLE_DEMO = `class HookWidget extends owl.Component { +const LIFECYCLE_DEMO = `// This example shows all the possible lifecycle hooks +// +// The root widget controls a sub widget (DemoWidget). It logs all its lifecycle +// methods in the console. Try modifying its state by clicking on it, or by +// clicking on the two main buttons, and look into the console to see what +// happens. + +class DemoWidget extends owl.Component { constructor() { super(...arguments); this.state = { n: 0 }; @@ -262,37 +207,60 @@ const LIFECYCLE_DEMO = `class HookWidget extends owl.Component { } } -class ParentWidget extends owl.Component { - constructor() { - super(...arguments); - this.widgets = { HookWidget }; - this.state = { n: 0, flag: true }; - } +class App extends owl.Component { + widgets = { DemoWidget }; + state = { n: 0, flag: true }; + increment() { this.state.n++; } + toggleSubWidget() { this.state.flag = !this.state.flag; } } const qweb = new owl.QWeb(TEMPLATES); -const widget = new ParentWidget({ qweb }); -widget.mount(document.body); +const app = new App({ qweb }); +app.mount(document.body); `; const LIFECYCLE_DEMO_XML = ` -
- - -
- -
+
+
Demo Sub Widget
+
(click on me to update me)
+
Props: , State: .
+
+ +
+ + +
+
-
Demo Sub Widget. Props: . State: . (click on me to update me)
+
`; -const TODO_APP_STORE = `const ENTER_KEY = 13; +const LIFECYCLE_CSS = `button { + font-size: 18px; + margin: 5px; +} + +.demo { + margin: 10px; + padding: 10px; + background-color: #dddddd; + width: 250px; +}`; + +const TODO_APP_STORE = `// This example is an implementation of the TodoList application, from the +// www.todomvc.com project. This is a non trivial application with some +// interesting user interactions. It uses the local storage for persistence. +// +// In this implementation, we use the owl Store class to manage the state. It +// is very similar to the VueX store. + +const ENTER_KEY = 13; const ESC_KEY = 27; const LOCALSTORAGE_KEY = "todos-odoo"; @@ -937,7 +905,20 @@ html .clear-completed:active { } `; -const RESPONSIVE = `class Navbar extends owl.Component {} +const RESPONSIVE = `// In this example, we show how we can modify keys in the global environment to +// make a responsive application. +// +// The main idea is to have a "isMobile" key in the environment, then listen +// to resize events and update the env if needed. Then, the whole interface +// will be updated, creating and destroying widgets as needed. +// +// To see this in action, try resizing the window. The application will switch +// to mobile mode whenever it has less than 768px. + +//------------------------------------------------------------------------------ +// Components +//------------------------------------------------------------------------------ +class Navbar extends owl.Component {} class ControlPanel extends owl.Component { widgets = { MobileSearchView }; @@ -958,6 +939,9 @@ class App extends owl.Component { widgets = { Navbar, ControlPanel, FormView, Chatter }; } +//------------------------------------------------------------------------------ +// Application Startup +//------------------------------------------------------------------------------ function isMobile() { return window.innerWidth <= 768; } @@ -967,6 +951,7 @@ const env = { isMobile: isMobile() }; + const app = new App(env); app.mount(document.body); @@ -983,44 +968,44 @@ window.addEventListener("resize", owl.utils.debounce(updateEnv, 20)); `; const RESPONSIVE_XML = ` -
Navbar
+
Navbar
-
-

controlpanel

- -
- -
-

formview

- -
- -
-

Chatter

-
Message
-
- -
MOBILE searchview
- -
- - -
-
- - -
-
- - - - - -
-
- This widget is only created in desktop mode. - +
+

Control Panel

+ +
+ +
+

Form View

+ +
+ +
+

Chatter

+
Message
+
+ +
Mobile searchview
+ +
+ This widget is only created in desktop mode. + +
+ +
+ + +
+
+ + +
+ + + + +
`; @@ -1036,6 +1021,7 @@ const RESPONSIVE_CSS = `body { .app.desktop { display: flex; } + .navbar { flex: 0 0 30px; height: 30px; @@ -1081,17 +1067,19 @@ const RESPONSIVE_CSS = `body { } `; -const SLOTS = `// This example will not work if your browser does not support ESNext class fields - -// We show here how slots can be used to create generic components. In this -// example, the Card component is basically only a container, and is created -// by giving it slots, inside the t-widget directive. +const SLOTS = `// 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 widget define the content with t-set. +// +// Note that the t-on-click event, defined in the App template, is executed in +// the context of the App component, even though it is inside the Card component class Card extends owl.Component { - state = { fullDisplay: true }; + state = { showContent: true }; toggleDisplay() { - this.state.fullDisplay = !this.state.fullDisplay; + this.state.showContent = !this.state.showContent; } } @@ -1119,11 +1107,11 @@ const app = new App({ qweb }); app.mount(document.body);`; const SLOTS_XML = ` -
+
- +
@@ -1196,32 +1184,161 @@ const SLOTS_CSS = `.main { border-top: 1px solid white; }`; -const EMPTY = `class App extends owl.Component { +const ASYNC_COMPONENTS = `// This example will not work if your browser does not support ESNext class fields + +// In this example, we have 2 sub widgets, one of them being async (slow). +// However, we don't want renderings of the other sub widget to be delayed +// because of the slow widget. We use the 't-asyncroot' directive for this +// purpose. Try removing it to see the difference. + +class App extends owl.Component { + widgets = {SlowWidget, NotificationList}; + state = { value: 0, notifs: [] }; + + increment() { + this.state.value++; + const notif = "Value will be set to " + this.state.value; + this.state.notifs.push(notif); + setTimeout(() => { + var index = this.state.notifs.indexOf(notif); + this.state.notifs.splice(index, 1); + }, 3000); + } } +class SlowWidget extends owl.Component { + willUpdateProps() { + // simulate a widget that needs to perform async stuff (e.g. an RPC) + // with the updated props before re-rendering itself + return new Promise(resolve => setTimeout(resolve, 1500)); + } +} + +class NotificationList extends owl.Component {} + const qweb = new owl.QWeb(TEMPLATES); -const app = new App({qweb}); +const app = new App({ qweb }); app.mount(document.body); `; +const ASYNC_COMPONENTS_XML = ` +
+ + + +
+ +
+ Current value: +
+ +
+ +
+ +
+`; + +const ASYNC_COMPONENTS_CSS = `.app { + width: 70%; +} + +button { + color: darkred; + font-size: 30px; + width: 220px; +} + +.value { + font-size: 26px; + padding: 20px; +} + +.notification-list { + position: absolute; + top: 0; + right: 0; +} + +.notification { + width: 150px; + margin: 4px 8px; + padding: 16px; + border: 1px solid: black; + background-color: lightgray; +}`; + +const FORM = `// This example illustrate how the t-model directive can be used to synchronize +// data between html inputs (and select/textareas) and the state of a component. +// Note that there are two controls with t-model="color": they are totally +// synchronized. + +class Form extends owl.Component { + state = { + text: "", + othertext: "", + number: 11, + color: "", + bool: false + }; +} + +// Application setup +const qweb = new owl.QWeb(TEMPLATES); +const form = new Form({ qweb }); +form.mount(document.body); +`; + +const FORM_XML = ` +
+

Form

+
+ Text (immediate): +
+
+ Other text (lazy): +
+
+ Number: +
+
+ Boolean: +
+
+ Color, with a select: + +
+
+ Color, with radio buttons: + + +
+
+

State

+
Text:
+
Other Text:
+
Number:
+
Boolean: TrueFalse
+
Color:
+
+ +`; + export const SAMPLES = [ { - description: "Click Counter", - code: CLICK_COUNTER, - xml: CLICK_COUNTER_XML, - css: CLICK_COUNTER_CSS + description: "Components", + code: COMPONENTS, + xml: COMPONENTS_XML, + css: COMPONENTS_CSS }, { - description: "Click Counter (ESNext)", - code: CLICK_COUNTER_ESNEXT, - xml: CLICK_COUNTER_XML, - css: CLICK_COUNTER_CSS - }, - { - description: "Widget Composition", - code: WIDGET_COMPOSITION, - xml: WIDGET_COMPOSITION_XML, - css: WIDGET_COMPOSITION_CSS + description: "Form Input Bindings", + code: FORM, + xml: FORM_XML }, { description: "Animations", @@ -1232,7 +1349,8 @@ export const SAMPLES = [ { description: "Lifecycle demo", code: LIFECYCLE_DEMO, - xml: LIFECYCLE_DEMO_XML + xml: LIFECYCLE_DEMO_XML, + css: LIFECYCLE_CSS, }, { description: "Todo List App (with store)", @@ -1247,13 +1365,15 @@ export const SAMPLES = [ xml: RESPONSIVE_XML }, { - description: "Slots", + description: "Slots And Generic Components", code: SLOTS, xml: SLOTS_XML, css: SLOTS_CSS }, { - description: "Empty", - code: EMPTY + description: "Asynchronous components", + code: ASYNC_COMPONENTS, + xml: ASYNC_COMPONENTS_XML, + css: ASYNC_COMPONENTS_CSS } ]; diff --git a/playground/templates.xml b/playground/templates.xml index 202fb376..9a4d82a7 100644 --- a/playground/templates.xml +++ b/playground/templates.xml @@ -2,7 +2,7 @@
- +