mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[FIX] qweb/component: better handling of class attribute
This changes requires using the class module of vdom. closes #192
This commit is contained in:
Géry Debongnie
@@ -53,6 +53,7 @@ export interface Meta<T extends Env, Props> {
|
||||
observer?: Observer;
|
||||
render?: CompiledTemplate;
|
||||
mountedHandlers: { [key: number]: Function };
|
||||
classObj?: { [key: string]: boolean };
|
||||
}
|
||||
|
||||
// If a component does not define explicitely a template
|
||||
@@ -435,6 +436,12 @@ export class Component<T extends Env, Props extends {}, State extends {}> {
|
||||
const __owl__ = this.__owl__;
|
||||
__owl__.renderPromise = null;
|
||||
const target = __owl__.vnode || document.createElement(vnode.sel!);
|
||||
if (this.__owl__.classObj) {
|
||||
(<any>vnode).data.class = Object.assign(
|
||||
(<any>vnode).data.class || {},
|
||||
this.__owl__.classObj
|
||||
);
|
||||
}
|
||||
__owl__.vnode = patch(target, vnode);
|
||||
}
|
||||
|
||||
@@ -528,6 +535,12 @@ export class Component<T extends Env, Props extends {}, State extends {}> {
|
||||
*/
|
||||
__mount(vnode: VNode, elm: HTMLElement): VNode {
|
||||
const __owl__ = this.__owl__;
|
||||
if (__owl__.classObj) {
|
||||
(<any>vnode).data.class = Object.assign(
|
||||
(<any>vnode).data.class || {},
|
||||
__owl__.classObj
|
||||
);
|
||||
}
|
||||
__owl__.vnode = patch(elm, vnode);
|
||||
if (__owl__.parent!.__owl__.isMounted && !__owl__.isMounted) {
|
||||
this.__callMounted();
|
||||
|
||||
+63
-38
@@ -88,21 +88,27 @@ const NODE_HOOKS_PARAMS = {
|
||||
|
||||
interface Utils {
|
||||
h: typeof h;
|
||||
objectToAttrString(obj: Object): string;
|
||||
toObj(expr: any): Object;
|
||||
shallowEqual(p1: Object, p2: Object): boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
export const UTILS: Utils = {
|
||||
h: h,
|
||||
objectToAttrString(obj: Object): string {
|
||||
let classes: string[] = [];
|
||||
for (let k in obj) {
|
||||
if (obj[k]) {
|
||||
classes.push(k);
|
||||
toObj(expr) {
|
||||
if (typeof expr === "string") {
|
||||
expr = expr.trim();
|
||||
if (!expr) {
|
||||
return {};
|
||||
}
|
||||
let words = expr.split(/\s+/);
|
||||
let result = {};
|
||||
for (let i = 0; i < words.length; i++) {
|
||||
result[words[i]] = true;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
return classes.join(" ");
|
||||
return expr;
|
||||
},
|
||||
shallowEqual(p1, p2) {
|
||||
for (let k in p1) {
|
||||
@@ -513,6 +519,7 @@ export class QWeb extends EventBus {
|
||||
props.push(`${key}: _${val}`);
|
||||
}
|
||||
}
|
||||
let classObj = "";
|
||||
|
||||
for (let i = 0; i < attributes.length; i++) {
|
||||
let name = attributes[i].name;
|
||||
@@ -524,13 +531,23 @@ export class QWeb extends EventBus {
|
||||
!(<Element>node).getAttribute("t-attf-" + name)
|
||||
) {
|
||||
const attID = ctx.generateID();
|
||||
ctx.addLine(`var _${attID} = '${value}';`);
|
||||
if (!name.match(/^[a-zA-Z]+$/)) {
|
||||
// attribute contains 'non letters' => we want to quote it
|
||||
name = '"' + name + '"';
|
||||
if (name === "class") {
|
||||
let classDef = value
|
||||
.trim()
|
||||
.split(/\s+/)
|
||||
.map(a => `'${a}':true`)
|
||||
.join(",");
|
||||
classObj = `_${ctx.generateID()}`;
|
||||
ctx.addLine(`let ${classObj} = {${classDef}};`);
|
||||
} else {
|
||||
ctx.addLine(`var _${attID} = '${value}';`);
|
||||
if (!name.match(/^[a-zA-Z]+$/)) {
|
||||
// attribute contains 'non letters' => we want to quote it
|
||||
name = '"' + name + '"';
|
||||
}
|
||||
attrs.push(`${name}: _${attID}`);
|
||||
handleBooleanProps(name, attID);
|
||||
}
|
||||
attrs.push(`${name}: _${attID}`);
|
||||
handleBooleanProps(name, attID);
|
||||
}
|
||||
|
||||
// dynamic attributes
|
||||
@@ -538,32 +555,37 @@ export class QWeb extends EventBus {
|
||||
let attName = name.slice(6);
|
||||
const v = ctx.getValue(value);
|
||||
let formattedValue = v.id || ctx.formatExpression(v);
|
||||
if (
|
||||
formattedValue[0] === "{" &&
|
||||
formattedValue[formattedValue.length - 1] === "}"
|
||||
) {
|
||||
formattedValue = `this.utils.objectToAttrString(${formattedValue})`;
|
||||
|
||||
if (attName === "class") {
|
||||
formattedValue = `this.utils.toObj(${formattedValue})`;
|
||||
if (classObj) {
|
||||
ctx.addLine(`Object.assign(${classObj}, ${formattedValue})`);
|
||||
} else {
|
||||
classObj = `_${ctx.generateID()}`;
|
||||
ctx.addLine(`let ${classObj} = ${formattedValue};`);
|
||||
}
|
||||
} else {
|
||||
const attID = ctx.generateID();
|
||||
if (!attName.match(/^[a-zA-Z]+$/)) {
|
||||
// attribute contains 'non letters' => we want to quote it
|
||||
attName = '"' + attName + '"';
|
||||
}
|
||||
// we need to combine dynamic with non dynamic attributes:
|
||||
// class="a" t-att-class="'yop'" should be rendered as class="a yop"
|
||||
const attValue = (<Element>node).getAttribute(attName);
|
||||
if (attValue) {
|
||||
const attValueID = ctx.generateID();
|
||||
ctx.addLine(`var _${attValueID} = ${formattedValue};`);
|
||||
formattedValue = `'${attValue}' + (_${attValueID} ? ' ' + _${attValueID} : '')`;
|
||||
const attrIndex = attrs.findIndex(att =>
|
||||
att.startsWith(attName + ":")
|
||||
);
|
||||
attrs.splice(attrIndex, 1);
|
||||
}
|
||||
ctx.addLine(`var _${attID} = ${formattedValue};`);
|
||||
attrs.push(`${attName}: _${attID}`);
|
||||
handleBooleanProps(attName, attID);
|
||||
}
|
||||
const attID = ctx.generateID();
|
||||
if (!attName.match(/^[a-zA-Z]+$/)) {
|
||||
// attribute contains 'non letters' => we want to quote it
|
||||
attName = '"' + attName + '"';
|
||||
}
|
||||
// we need to combine dynamic with non dynamic attributes:
|
||||
// class="a" t-att-class="'yop'" should be rendered as class="a yop"
|
||||
const attValue = (<Element>node).getAttribute(attName);
|
||||
if (attValue) {
|
||||
const attValueID = ctx.generateID();
|
||||
ctx.addLine(`var _${attValueID} = ${formattedValue};`);
|
||||
formattedValue = `'${attValue}' + (_${attValueID} ? ' ' + _${attValueID} : '')`;
|
||||
const attrIndex = attrs.findIndex(att =>
|
||||
att.startsWith(attName + ":")
|
||||
);
|
||||
attrs.splice(attrIndex, 1);
|
||||
}
|
||||
ctx.addLine(`var _${attID} = ${formattedValue};`);
|
||||
attrs.push(`${attName}: _${attID}`);
|
||||
handleBooleanProps(attName, attID);
|
||||
}
|
||||
|
||||
if (name.startsWith("t-attf-")) {
|
||||
@@ -604,6 +626,9 @@ export class QWeb extends EventBus {
|
||||
if (props.length > 0) {
|
||||
parts.push(`props:{${props.join(",")}}`);
|
||||
}
|
||||
if (classObj) {
|
||||
parts.push(`class:${classObj}`);
|
||||
}
|
||||
if (withHandlers) {
|
||||
parts.push(`on:{}`);
|
||||
}
|
||||
|
||||
+25
-19
@@ -469,26 +469,28 @@ QWeb.addDirective({
|
||||
ctx.addLine(`const ${attVar} = ${ctx.formatExpression(tattStyle)};`);
|
||||
tattStyle = attVar;
|
||||
}
|
||||
let updateClassCode = "";
|
||||
let classObj = "";
|
||||
if (classAttr || tattClass || styleAttr || tattStyle || events.length) {
|
||||
let classCode = "";
|
||||
if (classAttr) {
|
||||
classCode =
|
||||
classAttr
|
||||
.trim()
|
||||
.split(/\s+/)
|
||||
.map(c => `vn.elm.classList.add('${c}')`)
|
||||
.join(";") + ";";
|
||||
let classDef = classAttr
|
||||
.trim()
|
||||
.split(/\s+/)
|
||||
.map(a => `'${a}':true`)
|
||||
.join(",");
|
||||
classObj = `_${ctx.generateID()}`;
|
||||
ctx.addLine(`let ${classObj} = {${classDef}};`);
|
||||
}
|
||||
if (tattClass) {
|
||||
const attVar = `_${ctx.generateID()}`;
|
||||
ctx.addLine(`const ${attVar} = ${ctx.formatExpression(tattClass)};`);
|
||||
classCode = `for (let k in ${attVar}) {
|
||||
if (${attVar}[k]) {
|
||||
vn.elm.classList.add(k);
|
||||
}
|
||||
}`;
|
||||
updateClassCode = `let cl=w${componentID}.el.classList;for (let k in ${attVar}) {if (${attVar}[k]) {cl.add(k)} else {cl.remove(k)}}`;
|
||||
let tattExpr = ctx.formatExpression(tattClass);
|
||||
if (tattExpr[0] !== "{" || tattExpr[tattExpr.length - 1] !== "}") {
|
||||
tattExpr = `this.utils.toObj(${tattExpr})`;
|
||||
}
|
||||
if (classAttr) {
|
||||
ctx.addLine(`Object.assign(${classObj}, ${tattExpr})`);
|
||||
} else {
|
||||
classObj = `_${ctx.generateID()}`;
|
||||
ctx.addLine(`let ${classObj} = ${tattExpr};`);
|
||||
}
|
||||
}
|
||||
let eventsCode = events
|
||||
.map(function([eventName, mods, handlerName, extraArgs]) {
|
||||
@@ -524,7 +526,7 @@ QWeb.addDirective({
|
||||
.join("");
|
||||
const styleExpr = tattStyle || (styleAttr ? `'${styleAttr}'` : false);
|
||||
const styleCode = styleExpr ? `vn.elm.style = ${styleExpr};` : "";
|
||||
createHook = `vnode.data.hook = {create(_, vn){${classCode}${styleCode}${eventsCode}}};`;
|
||||
createHook = `vnode.data.hook = {create(_, vn){${styleCode}${eventsCode}}};`;
|
||||
}
|
||||
|
||||
ctx.addLine(
|
||||
@@ -630,12 +632,16 @@ QWeb.addDirective({
|
||||
ctx.addLine(
|
||||
`def${defID} = def${defID}.then(()=>{if (w${componentID}.__owl__.isDestroyed) {return};${
|
||||
tattStyle ? `w${componentID}.el.style=${tattStyle};` : ""
|
||||
}${updateClassCode}let pvnode=w${componentID}.__owl__.pvnode;${keepAliveCode}c${
|
||||
}let pvnode=w${componentID}.__owl__.pvnode;${keepAliveCode}c${
|
||||
ctx.parentNode
|
||||
}[_${dummyID}_index]=pvnode;});`
|
||||
);
|
||||
ctx.closeIf();
|
||||
|
||||
if (classObj) {
|
||||
ctx.addLine(`w${componentID}.__owl__.classObj=${classObj};`);
|
||||
}
|
||||
|
||||
if (async) {
|
||||
ctx.addLine(
|
||||
`def${defID}.then(w${componentID}.__applyPatchQueue.bind(w${componentID}, patchQueue${componentID}));`
|
||||
@@ -706,7 +712,7 @@ QWeb.addDirective({
|
||||
ctx.addLine(
|
||||
`const slot${slotKey} = this.slots[context.__owl__.slotId + '_' + '${value}'];`
|
||||
);
|
||||
ctx.addIf(`slot${slotKey}`)
|
||||
ctx.addIf(`slot${slotKey}`);
|
||||
ctx.addLine(
|
||||
`slot${slotKey}(context.__owl__.parent, Object.assign({}, extra, {parentNode: c${
|
||||
ctx.parentNode
|
||||
|
||||
+42
-2
@@ -59,7 +59,7 @@ function vnode(
|
||||
elm: Element | Text | undefined
|
||||
): VNode {
|
||||
let key = data === undefined ? undefined : data.key;
|
||||
return {sel, data, children, text, elm, key};
|
||||
return { sel, data, children, text, elm, key };
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
@@ -938,4 +938,44 @@ export const attrsModule = {
|
||||
update: updateAttrs
|
||||
} as Module;
|
||||
|
||||
export const patch = init([eventListenersModule, attrsModule, propsModule]);
|
||||
//------------------------------------------------------------------------------
|
||||
// class.ts
|
||||
//------------------------------------------------------------------------------
|
||||
function updateClass(oldVnode: VNode, vnode: VNode): void {
|
||||
var cur: any,
|
||||
name: string,
|
||||
elm: Element,
|
||||
oldClass = (oldVnode.data as VNodeData).class,
|
||||
klass = (vnode.data as VNodeData).class;
|
||||
|
||||
if (!oldClass && !klass) return;
|
||||
if (oldClass === klass) return;
|
||||
oldClass = oldClass || {};
|
||||
klass = klass || {};
|
||||
|
||||
elm = vnode.elm as Element;
|
||||
|
||||
for (name in oldClass) {
|
||||
if (!klass[name]) {
|
||||
elm.classList.remove(name);
|
||||
}
|
||||
}
|
||||
for (name in klass) {
|
||||
cur = klass[name];
|
||||
if (cur !== oldClass[name]) {
|
||||
(elm.classList as any)[cur ? "add" : "remove"](name);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const classModule = { create: updateClass, update: updateClass } as Module;
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// patch
|
||||
//------------------------------------------------------------------------------
|
||||
export const patch = init([
|
||||
eventListenersModule,
|
||||
attrsModule,
|
||||
propsModule,
|
||||
classModule
|
||||
]);
|
||||
|
||||
@@ -18,65 +18,65 @@ exports[`async rendering delayed component with t-asyncroot directive 1`] = `
|
||||
extra.handlers['click' + 2] = extra.handlers['click' + 2] || context['updateApp'].bind(owner);
|
||||
p2.on['click'] = extra.handlers['click' + 2];
|
||||
c2.push({text: \`Update App State\`});
|
||||
var _3 = 'children';
|
||||
let c4 = [], p4 = {key:4,attrs:{class: _3}};
|
||||
var vn4 = h('div', p4, c4);
|
||||
c1.push(vn4);
|
||||
let _4 = {'children':true};
|
||||
let c5 = [], p5 = {key:5,class:_4};
|
||||
var vn5 = h('div', p5, c5);
|
||||
c1.push(vn5);
|
||||
//COMPONENT
|
||||
let def6;
|
||||
let w7 = 7 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[7]] : false;
|
||||
let _5_index = c4.length;
|
||||
c4.push(null);
|
||||
let props7 = {val:context['state'].val};
|
||||
if (w7 && w7.__owl__.renderPromise && !w7.__owl__.vnode) {
|
||||
if (utils.shallowEqual(props7, w7.__owl__.renderProps)) {
|
||||
def6 = w7.__owl__.renderPromise;
|
||||
let def7;
|
||||
let w8 = 8 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[8]] : false;
|
||||
let _6_index = c5.length;
|
||||
c5.push(null);
|
||||
let props8 = {val:context['state'].val};
|
||||
if (w8 && w8.__owl__.renderPromise && !w8.__owl__.vnode) {
|
||||
if (utils.shallowEqual(props8, w8.__owl__.renderProps)) {
|
||||
def7 = w8.__owl__.renderPromise;
|
||||
} else {
|
||||
w7.destroy();
|
||||
w7 = false;
|
||||
w8.destroy();
|
||||
w8 = false;
|
||||
}
|
||||
}
|
||||
if (!w7) {
|
||||
let componentKey7 = \`Child\`;
|
||||
let W7 = context.components && context.components[componentKey7] || QWeb.components[componentKey7];
|
||||
if (!W7) {throw new Error('Cannot find the definition of component \\"' + componentKey7 + '\\"')}
|
||||
w7 = new W7(owner, props7);
|
||||
context.__owl__.cmap[7] = w7.__owl__.id;
|
||||
def6 = w7.__prepare();
|
||||
def6 = def6.then(vnode=>{let pvnode=h(vnode.sel, {key: 7, hook: {insert(vn) {let nvn=w7.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w7.destroy();}}});c4[_5_index]=pvnode;w7.__owl__.pvnode = pvnode;});
|
||||
if (!w8) {
|
||||
let componentKey8 = \`Child\`;
|
||||
let W8 = context.components && context.components[componentKey8] || QWeb.components[componentKey8];
|
||||
if (!W8) {throw new Error('Cannot find the definition of component \\"' + componentKey8 + '\\"')}
|
||||
w8 = new W8(owner, props8);
|
||||
context.__owl__.cmap[8] = w8.__owl__.id;
|
||||
def7 = w8.__prepare();
|
||||
def7 = def7.then(vnode=>{let pvnode=h(vnode.sel, {key: 8, hook: {insert(vn) {let nvn=w8.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w8.destroy();}}});c5[_6_index]=pvnode;w8.__owl__.pvnode = pvnode;});
|
||||
} else {
|
||||
def6 = def6 || w7.__updateProps(props7, extra.forceUpdate, extra.patchQueue);
|
||||
def6 = def6.then(()=>{if (w7.__owl__.isDestroyed) {return};let pvnode=w7.__owl__.pvnode;c4[_5_index]=pvnode;});
|
||||
def7 = def7 || w8.__updateProps(props8, extra.forceUpdate, extra.patchQueue);
|
||||
def7 = def7.then(()=>{if (w8.__owl__.isDestroyed) {return};let pvnode=w8.__owl__.pvnode;c5[_6_index]=pvnode;});
|
||||
}
|
||||
extra.promises.push(def6);
|
||||
extra.promises.push(def7);
|
||||
//COMPONENT
|
||||
let def9;
|
||||
let w10 = 10 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[10]] : false;
|
||||
let _8_index = c4.length;
|
||||
const patchQueue10 = [];
|
||||
c4.push(w10 && w10.__owl__.pvnode || null);
|
||||
let props10 = {val:context['state'].val};
|
||||
if (w10 && w10.__owl__.renderPromise && !w10.__owl__.vnode) {
|
||||
if (utils.shallowEqual(props10, w10.__owl__.renderProps)) {
|
||||
def9 = w10.__owl__.renderPromise;
|
||||
let def10;
|
||||
let w11 = 11 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[11]] : false;
|
||||
let _9_index = c5.length;
|
||||
const patchQueue11 = [];
|
||||
c5.push(w11 && w11.__owl__.pvnode || null);
|
||||
let props11 = {val:context['state'].val};
|
||||
if (w11 && w11.__owl__.renderPromise && !w11.__owl__.vnode) {
|
||||
if (utils.shallowEqual(props11, w11.__owl__.renderProps)) {
|
||||
def10 = w11.__owl__.renderPromise;
|
||||
} else {
|
||||
w10.destroy();
|
||||
w10 = false;
|
||||
w11.destroy();
|
||||
w11 = false;
|
||||
}
|
||||
}
|
||||
if (!w10) {
|
||||
let componentKey10 = \`AsyncChild\`;
|
||||
let W10 = context.components && context.components[componentKey10] || QWeb.components[componentKey10];
|
||||
if (!W10) {throw new Error('Cannot find the definition of component \\"' + componentKey10 + '\\"')}
|
||||
w10 = new W10(owner, props10);
|
||||
context.__owl__.cmap[10] = w10.__owl__.id;
|
||||
def9 = w10.__prepare();
|
||||
def9 = def9.then(vnode=>{let pvnode=h(vnode.sel, {key: 10, hook: {insert(vn) {let nvn=w10.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w10.destroy();}}});c4[_8_index]=pvnode;w10.__owl__.pvnode = pvnode;});
|
||||
if (!w11) {
|
||||
let componentKey11 = \`AsyncChild\`;
|
||||
let W11 = context.components && context.components[componentKey11] || QWeb.components[componentKey11];
|
||||
if (!W11) {throw new Error('Cannot find the definition of component \\"' + componentKey11 + '\\"')}
|
||||
w11 = new W11(owner, props11);
|
||||
context.__owl__.cmap[11] = w11.__owl__.id;
|
||||
def10 = w11.__prepare();
|
||||
def10 = def10.then(vnode=>{let pvnode=h(vnode.sel, {key: 11, hook: {insert(vn) {let nvn=w11.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w11.destroy();}}});c5[_9_index]=pvnode;w11.__owl__.pvnode = pvnode;});
|
||||
} else {
|
||||
def9 = def9 || w10.__updateProps(props10, extra.forceUpdate, patchQueue10);
|
||||
def9 = def9.then(()=>{if (w10.__owl__.isDestroyed) {return};let pvnode=w10.__owl__.pvnode;c4[_8_index]=pvnode;});
|
||||
def10 = def10 || w11.__updateProps(props11, extra.forceUpdate, patchQueue11);
|
||||
def10 = def10.then(()=>{if (w11.__owl__.isDestroyed) {return};let pvnode=w11.__owl__.pvnode;c5[_9_index]=pvnode;});
|
||||
}
|
||||
def9.then(w10.__applyPatchQueue.bind(w10, patchQueue10));
|
||||
def10.then(w11.__applyPatchQueue.bind(w11, patchQueue11));
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
@@ -99,65 +99,65 @@ exports[`async rendering fast component with t-asyncroot directive 1`] = `
|
||||
extra.handlers['click' + 2] = extra.handlers['click' + 2] || context['updateApp'].bind(owner);
|
||||
p2.on['click'] = extra.handlers['click' + 2];
|
||||
c2.push({text: \`Update App State\`});
|
||||
var _3 = 'children';
|
||||
let c4 = [], p4 = {key:4,attrs:{class: _3}};
|
||||
var vn4 = h('div', p4, c4);
|
||||
c1.push(vn4);
|
||||
let _4 = {'children':true};
|
||||
let c5 = [], p5 = {key:5,class:_4};
|
||||
var vn5 = h('div', p5, c5);
|
||||
c1.push(vn5);
|
||||
//COMPONENT
|
||||
let def6;
|
||||
let w7 = 7 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[7]] : false;
|
||||
let _5_index = c4.length;
|
||||
const patchQueue7 = [];
|
||||
c4.push(w7 && w7.__owl__.pvnode || null);
|
||||
let props7 = {val:context['state'].val};
|
||||
if (w7 && w7.__owl__.renderPromise && !w7.__owl__.vnode) {
|
||||
if (utils.shallowEqual(props7, w7.__owl__.renderProps)) {
|
||||
def6 = w7.__owl__.renderPromise;
|
||||
let def7;
|
||||
let w8 = 8 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[8]] : false;
|
||||
let _6_index = c5.length;
|
||||
const patchQueue8 = [];
|
||||
c5.push(w8 && w8.__owl__.pvnode || null);
|
||||
let props8 = {val:context['state'].val};
|
||||
if (w8 && w8.__owl__.renderPromise && !w8.__owl__.vnode) {
|
||||
if (utils.shallowEqual(props8, w8.__owl__.renderProps)) {
|
||||
def7 = w8.__owl__.renderPromise;
|
||||
} else {
|
||||
w7.destroy();
|
||||
w7 = false;
|
||||
w8.destroy();
|
||||
w8 = false;
|
||||
}
|
||||
}
|
||||
if (!w7) {
|
||||
let componentKey7 = \`Child\`;
|
||||
let W7 = context.components && context.components[componentKey7] || QWeb.components[componentKey7];
|
||||
if (!W7) {throw new Error('Cannot find the definition of component \\"' + componentKey7 + '\\"')}
|
||||
w7 = new W7(owner, props7);
|
||||
context.__owl__.cmap[7] = w7.__owl__.id;
|
||||
def6 = w7.__prepare();
|
||||
def6 = def6.then(vnode=>{let pvnode=h(vnode.sel, {key: 7, hook: {insert(vn) {let nvn=w7.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w7.destroy();}}});c4[_5_index]=pvnode;w7.__owl__.pvnode = pvnode;});
|
||||
if (!w8) {
|
||||
let componentKey8 = \`Child\`;
|
||||
let W8 = context.components && context.components[componentKey8] || QWeb.components[componentKey8];
|
||||
if (!W8) {throw new Error('Cannot find the definition of component \\"' + componentKey8 + '\\"')}
|
||||
w8 = new W8(owner, props8);
|
||||
context.__owl__.cmap[8] = w8.__owl__.id;
|
||||
def7 = w8.__prepare();
|
||||
def7 = def7.then(vnode=>{let pvnode=h(vnode.sel, {key: 8, hook: {insert(vn) {let nvn=w8.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w8.destroy();}}});c5[_6_index]=pvnode;w8.__owl__.pvnode = pvnode;});
|
||||
} else {
|
||||
def6 = def6 || w7.__updateProps(props7, extra.forceUpdate, patchQueue7);
|
||||
def6 = def6.then(()=>{if (w7.__owl__.isDestroyed) {return};let pvnode=w7.__owl__.pvnode;c4[_5_index]=pvnode;});
|
||||
def7 = def7 || w8.__updateProps(props8, extra.forceUpdate, patchQueue8);
|
||||
def7 = def7.then(()=>{if (w8.__owl__.isDestroyed) {return};let pvnode=w8.__owl__.pvnode;c5[_6_index]=pvnode;});
|
||||
}
|
||||
def6.then(w7.__applyPatchQueue.bind(w7, patchQueue7));
|
||||
def7.then(w8.__applyPatchQueue.bind(w8, patchQueue8));
|
||||
//COMPONENT
|
||||
let def9;
|
||||
let w10 = 10 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[10]] : false;
|
||||
let _8_index = c4.length;
|
||||
c4.push(null);
|
||||
let props10 = {val:context['state'].val};
|
||||
if (w10 && w10.__owl__.renderPromise && !w10.__owl__.vnode) {
|
||||
if (utils.shallowEqual(props10, w10.__owl__.renderProps)) {
|
||||
def9 = w10.__owl__.renderPromise;
|
||||
let def10;
|
||||
let w11 = 11 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[11]] : false;
|
||||
let _9_index = c5.length;
|
||||
c5.push(null);
|
||||
let props11 = {val:context['state'].val};
|
||||
if (w11 && w11.__owl__.renderPromise && !w11.__owl__.vnode) {
|
||||
if (utils.shallowEqual(props11, w11.__owl__.renderProps)) {
|
||||
def10 = w11.__owl__.renderPromise;
|
||||
} else {
|
||||
w10.destroy();
|
||||
w10 = false;
|
||||
w11.destroy();
|
||||
w11 = false;
|
||||
}
|
||||
}
|
||||
if (!w10) {
|
||||
let componentKey10 = \`AsyncChild\`;
|
||||
let W10 = context.components && context.components[componentKey10] || QWeb.components[componentKey10];
|
||||
if (!W10) {throw new Error('Cannot find the definition of component \\"' + componentKey10 + '\\"')}
|
||||
w10 = new W10(owner, props10);
|
||||
context.__owl__.cmap[10] = w10.__owl__.id;
|
||||
def9 = w10.__prepare();
|
||||
def9 = def9.then(vnode=>{let pvnode=h(vnode.sel, {key: 10, hook: {insert(vn) {let nvn=w10.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w10.destroy();}}});c4[_8_index]=pvnode;w10.__owl__.pvnode = pvnode;});
|
||||
if (!w11) {
|
||||
let componentKey11 = \`AsyncChild\`;
|
||||
let W11 = context.components && context.components[componentKey11] || QWeb.components[componentKey11];
|
||||
if (!W11) {throw new Error('Cannot find the definition of component \\"' + componentKey11 + '\\"')}
|
||||
w11 = new W11(owner, props11);
|
||||
context.__owl__.cmap[11] = w11.__owl__.id;
|
||||
def10 = w11.__prepare();
|
||||
def10 = def10.then(vnode=>{let pvnode=h(vnode.sel, {key: 11, hook: {insert(vn) {let nvn=w11.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w11.destroy();}}});c5[_9_index]=pvnode;w11.__owl__.pvnode = pvnode;});
|
||||
} else {
|
||||
def9 = def9 || w10.__updateProps(props10, extra.forceUpdate, extra.patchQueue);
|
||||
def9 = def9.then(()=>{if (w10.__owl__.isDestroyed) {return};let pvnode=w10.__owl__.pvnode;c4[_8_index]=pvnode;});
|
||||
def10 = def10 || w11.__updateProps(props11, extra.forceUpdate, extra.patchQueue);
|
||||
def10 = def10.then(()=>{if (w11.__owl__.isDestroyed) {return};let pvnode=w11.__owl__.pvnode;c5[_9_index]=pvnode;});
|
||||
}
|
||||
extra.promises.push(def9);
|
||||
extra.promises.push(def10);
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
@@ -180,65 +180,65 @@ exports[`async rendering t-component with t-asyncroot directive: mixed re-render
|
||||
extra.handlers['click' + 2] = extra.handlers['click' + 2] || context['updateApp'].bind(owner);
|
||||
p2.on['click'] = extra.handlers['click' + 2];
|
||||
c2.push({text: \`Update App State\`});
|
||||
var _3 = 'children';
|
||||
let c4 = [], p4 = {key:4,attrs:{class: _3}};
|
||||
var vn4 = h('div', p4, c4);
|
||||
c1.push(vn4);
|
||||
let _4 = {'children':true};
|
||||
let c5 = [], p5 = {key:5,class:_4};
|
||||
var vn5 = h('div', p5, c5);
|
||||
c1.push(vn5);
|
||||
//COMPONENT
|
||||
let def6;
|
||||
let w7 = 7 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[7]] : false;
|
||||
let _5_index = c4.length;
|
||||
c4.push(null);
|
||||
let props7 = {val:context['state'].val};
|
||||
if (w7 && w7.__owl__.renderPromise && !w7.__owl__.vnode) {
|
||||
if (utils.shallowEqual(props7, w7.__owl__.renderProps)) {
|
||||
def6 = w7.__owl__.renderPromise;
|
||||
let def7;
|
||||
let w8 = 8 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[8]] : false;
|
||||
let _6_index = c5.length;
|
||||
c5.push(null);
|
||||
let props8 = {val:context['state'].val};
|
||||
if (w8 && w8.__owl__.renderPromise && !w8.__owl__.vnode) {
|
||||
if (utils.shallowEqual(props8, w8.__owl__.renderProps)) {
|
||||
def7 = w8.__owl__.renderPromise;
|
||||
} else {
|
||||
w7.destroy();
|
||||
w7 = false;
|
||||
w8.destroy();
|
||||
w8 = false;
|
||||
}
|
||||
}
|
||||
if (!w7) {
|
||||
let componentKey7 = \`Child\`;
|
||||
let W7 = context.components && context.components[componentKey7] || QWeb.components[componentKey7];
|
||||
if (!W7) {throw new Error('Cannot find the definition of component \\"' + componentKey7 + '\\"')}
|
||||
w7 = new W7(owner, props7);
|
||||
context.__owl__.cmap[7] = w7.__owl__.id;
|
||||
def6 = w7.__prepare();
|
||||
def6 = def6.then(vnode=>{let pvnode=h(vnode.sel, {key: 7, hook: {insert(vn) {let nvn=w7.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w7.destroy();}}});c4[_5_index]=pvnode;w7.__owl__.pvnode = pvnode;});
|
||||
if (!w8) {
|
||||
let componentKey8 = \`Child\`;
|
||||
let W8 = context.components && context.components[componentKey8] || QWeb.components[componentKey8];
|
||||
if (!W8) {throw new Error('Cannot find the definition of component \\"' + componentKey8 + '\\"')}
|
||||
w8 = new W8(owner, props8);
|
||||
context.__owl__.cmap[8] = w8.__owl__.id;
|
||||
def7 = w8.__prepare();
|
||||
def7 = def7.then(vnode=>{let pvnode=h(vnode.sel, {key: 8, hook: {insert(vn) {let nvn=w8.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w8.destroy();}}});c5[_6_index]=pvnode;w8.__owl__.pvnode = pvnode;});
|
||||
} else {
|
||||
def6 = def6 || w7.__updateProps(props7, extra.forceUpdate, extra.patchQueue);
|
||||
def6 = def6.then(()=>{if (w7.__owl__.isDestroyed) {return};let pvnode=w7.__owl__.pvnode;c4[_5_index]=pvnode;});
|
||||
def7 = def7 || w8.__updateProps(props8, extra.forceUpdate, extra.patchQueue);
|
||||
def7 = def7.then(()=>{if (w8.__owl__.isDestroyed) {return};let pvnode=w8.__owl__.pvnode;c5[_6_index]=pvnode;});
|
||||
}
|
||||
extra.promises.push(def6);
|
||||
extra.promises.push(def7);
|
||||
//COMPONENT
|
||||
let def9;
|
||||
let w10 = 10 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[10]] : false;
|
||||
let _8_index = c4.length;
|
||||
const patchQueue10 = [];
|
||||
c4.push(w10 && w10.__owl__.pvnode || null);
|
||||
let props10 = {val:context['state'].val};
|
||||
if (w10 && w10.__owl__.renderPromise && !w10.__owl__.vnode) {
|
||||
if (utils.shallowEqual(props10, w10.__owl__.renderProps)) {
|
||||
def9 = w10.__owl__.renderPromise;
|
||||
let def10;
|
||||
let w11 = 11 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[11]] : false;
|
||||
let _9_index = c5.length;
|
||||
const patchQueue11 = [];
|
||||
c5.push(w11 && w11.__owl__.pvnode || null);
|
||||
let props11 = {val:context['state'].val};
|
||||
if (w11 && w11.__owl__.renderPromise && !w11.__owl__.vnode) {
|
||||
if (utils.shallowEqual(props11, w11.__owl__.renderProps)) {
|
||||
def10 = w11.__owl__.renderPromise;
|
||||
} else {
|
||||
w10.destroy();
|
||||
w10 = false;
|
||||
w11.destroy();
|
||||
w11 = false;
|
||||
}
|
||||
}
|
||||
if (!w10) {
|
||||
let componentKey10 = \`AsyncChild\`;
|
||||
let W10 = context.components && context.components[componentKey10] || QWeb.components[componentKey10];
|
||||
if (!W10) {throw new Error('Cannot find the definition of component \\"' + componentKey10 + '\\"')}
|
||||
w10 = new W10(owner, props10);
|
||||
context.__owl__.cmap[10] = w10.__owl__.id;
|
||||
def9 = w10.__prepare();
|
||||
def9 = def9.then(vnode=>{let pvnode=h(vnode.sel, {key: 10, hook: {insert(vn) {let nvn=w10.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w10.destroy();}}});c4[_8_index]=pvnode;w10.__owl__.pvnode = pvnode;});
|
||||
if (!w11) {
|
||||
let componentKey11 = \`AsyncChild\`;
|
||||
let W11 = context.components && context.components[componentKey11] || QWeb.components[componentKey11];
|
||||
if (!W11) {throw new Error('Cannot find the definition of component \\"' + componentKey11 + '\\"')}
|
||||
w11 = new W11(owner, props11);
|
||||
context.__owl__.cmap[11] = w11.__owl__.id;
|
||||
def10 = w11.__prepare();
|
||||
def10 = def10.then(vnode=>{let pvnode=h(vnode.sel, {key: 11, hook: {insert(vn) {let nvn=w11.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w11.destroy();}}});c5[_9_index]=pvnode;w11.__owl__.pvnode = pvnode;});
|
||||
} else {
|
||||
def9 = def9 || w10.__updateProps(props10, extra.forceUpdate, patchQueue10);
|
||||
def9 = def9.then(()=>{if (w10.__owl__.isDestroyed) {return};let pvnode=w10.__owl__.pvnode;c4[_8_index]=pvnode;});
|
||||
def10 = def10 || w11.__updateProps(props11, extra.forceUpdate, patchQueue11);
|
||||
def10 = def10.then(()=>{if (w11.__owl__.isDestroyed) {return};let pvnode=w11.__owl__.pvnode;c5[_9_index]=pvnode;});
|
||||
}
|
||||
def9.then(w10.__applyPatchQueue.bind(w10, patchQueue10));
|
||||
def10.then(w11.__applyPatchQueue.bind(w11, patchQueue11));
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
@@ -284,6 +284,118 @@ exports[`class and style attributes with t-component dynamic t-att-style is prop
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`class and style attributes with t-component t-att-class is properly added/removed on widget root el (v2) 1`] = `
|
||||
"function anonymous(context,extra
|
||||
) {
|
||||
let utils = this.utils;
|
||||
let QWeb = this.constructor;
|
||||
let owner = context;
|
||||
var h = this.utils.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
var vn1 = h('div', p1, c1);
|
||||
//COMPONENT
|
||||
let def3;
|
||||
const ref5 = \`child\`;
|
||||
let _6 = {'a':true};
|
||||
Object.assign(_6, {b:context['state'].b})
|
||||
let w4 = 4 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[4]] : false;
|
||||
let _2_index = c1.length;
|
||||
c1.push(null);
|
||||
let props4 = {};
|
||||
if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
|
||||
if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
|
||||
def3 = w4.__owl__.renderPromise;
|
||||
} else {
|
||||
w4.destroy();
|
||||
w4 = false;
|
||||
}
|
||||
}
|
||||
if (!w4) {
|
||||
let componentKey4 = \`Child\`;
|
||||
let W4 = context.components && context.components[componentKey4] || QWeb.components[componentKey4];
|
||||
if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
|
||||
w4 = new W4(owner, props4);
|
||||
context.__owl__.cmap[4] = w4.__owl__.id;
|
||||
def3 = w4.__prepare();
|
||||
def3 = def3.then(vnode=>{vnode.data.hook = {create(_, vn){}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;context.refs[ref5] = w4;},remove() {},destroy(vn) {w4.destroy();delete context.refs[ref5];}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
|
||||
} else {
|
||||
def3 = def3 || w4.__updateProps(props4, extra.forceUpdate, extra.patchQueue);
|
||||
def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
|
||||
}
|
||||
w4.__owl__.classObj=_6;
|
||||
extra.promises.push(def3);
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`class and style attributes with t-component t-att-class is properly added/removed on widget root el (v2) 2`] = `
|
||||
"function anonymous(context,extra
|
||||
) {
|
||||
var h = this.utils.h;
|
||||
let _2 = {'c':true};
|
||||
Object.assign(_2, this.utils.toObj({d:context['state'].d}))
|
||||
let c3 = [], p3 = {key:3,class:_2};
|
||||
var vn3 = h('span', p3, c3);
|
||||
return vn3;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`class and style attributes with t-component t-att-class is properly added/removed on widget root el (v3) 1`] = `
|
||||
"function anonymous(context,extra
|
||||
) {
|
||||
let utils = this.utils;
|
||||
let QWeb = this.constructor;
|
||||
let owner = context;
|
||||
var h = this.utils.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
var vn1 = h('div', p1, c1);
|
||||
//COMPONENT
|
||||
let def3;
|
||||
const ref5 = \`child\`;
|
||||
let _6 = {'a':true};
|
||||
Object.assign(_6, this.utils.toObj(context['state'].b?'b':''))
|
||||
let w4 = 4 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[4]] : false;
|
||||
let _2_index = c1.length;
|
||||
c1.push(null);
|
||||
let props4 = {};
|
||||
if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
|
||||
if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
|
||||
def3 = w4.__owl__.renderPromise;
|
||||
} else {
|
||||
w4.destroy();
|
||||
w4 = false;
|
||||
}
|
||||
}
|
||||
if (!w4) {
|
||||
let componentKey4 = \`Child\`;
|
||||
let W4 = context.components && context.components[componentKey4] || QWeb.components[componentKey4];
|
||||
if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
|
||||
w4 = new W4(owner, props4);
|
||||
context.__owl__.cmap[4] = w4.__owl__.id;
|
||||
def3 = w4.__prepare();
|
||||
def3 = def3.then(vnode=>{vnode.data.hook = {create(_, vn){}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;context.refs[ref5] = w4;},remove() {},destroy(vn) {w4.destroy();delete context.refs[ref5];}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
|
||||
} else {
|
||||
def3 = def3 || w4.__updateProps(props4, extra.forceUpdate, extra.patchQueue);
|
||||
def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
|
||||
}
|
||||
w4.__owl__.classObj=_6;
|
||||
extra.promises.push(def3);
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`class and style attributes with t-component t-att-class is properly added/removed on widget root el (v3) 2`] = `
|
||||
"function anonymous(context,extra
|
||||
) {
|
||||
var h = this.utils.h;
|
||||
let _2 = {'c':true};
|
||||
Object.assign(_2, this.utils.toObj(context['state'].d?'d':''))
|
||||
let c3 = [], p3 = {key:3,class:_2};
|
||||
var vn3 = h('span', p3, c3);
|
||||
return vn3;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`class and style attributes with t-component t-att-class is properly added/removed on widget root el 1`] = `
|
||||
"function anonymous(context,extra
|
||||
) {
|
||||
@@ -295,7 +407,7 @@ exports[`class and style attributes with t-component t-att-class is properly add
|
||||
var vn1 = h('div', p1, c1);
|
||||
//COMPONENT
|
||||
let def3;
|
||||
const _5 = {a:context['state'].a,b:context['state'].b};
|
||||
let _5 = {a:context['state'].a,b:context['state'].b};
|
||||
let w4 = 4 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[4]] : false;
|
||||
let _2_index = c1.length;
|
||||
c1.push(null);
|
||||
@@ -315,15 +427,12 @@ exports[`class and style attributes with t-component t-att-class is properly add
|
||||
w4 = new W4(owner, props4);
|
||||
context.__owl__.cmap[4] = w4.__owl__.id;
|
||||
def3 = w4.__prepare();
|
||||
def3 = def3.then(vnode=>{vnode.data.hook = {create(_, vn){for (let k in _5) {
|
||||
if (_5[k]) {
|
||||
vn.elm.classList.add(k);
|
||||
}
|
||||
}}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
|
||||
def3 = def3.then(vnode=>{vnode.data.hook = {create(_, vn){}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
|
||||
} else {
|
||||
def3 = def3 || w4.__updateProps(props4, extra.forceUpdate, extra.patchQueue);
|
||||
def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let cl=w4.el.classList;for (let k in _5) {if (_5[k]) {cl.add(k)} else {cl.remove(k)}}let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
|
||||
def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
|
||||
}
|
||||
w4.__owl__.classObj=_5;
|
||||
extra.promises.push(def3);
|
||||
return vn1;
|
||||
}"
|
||||
|
||||
@@ -128,8 +128,8 @@ exports[`attributes from object variables set previously 1`] = `
|
||||
let c1 = [], p1 = {key:1};
|
||||
var vn1 = h('div', p1, c1);
|
||||
var _2 = {a:'b'};
|
||||
var _3 = _2.a;
|
||||
let c4 = [], p4 = {key:4,attrs:{class: _3}};
|
||||
let _3 = this.utils.toObj(_2.a);
|
||||
let c4 = [], p4 = {key:4,class:_3};
|
||||
var vn4 = h('span', p4, c4);
|
||||
c1.push(vn4);
|
||||
return vn1;
|
||||
@@ -143,8 +143,8 @@ exports[`attributes from variables set previously 1`] = `
|
||||
let c1 = [], p1 = {key:1};
|
||||
var vn1 = h('div', p1, c1);
|
||||
var _2 = 'def';
|
||||
var _3 = _2;
|
||||
let c4 = [], p4 = {key:4,attrs:{class: _3}};
|
||||
let _3 = this.utils.toObj(_2);
|
||||
let c4 = [], p4 = {key:4,class:_3};
|
||||
var vn4 = h('span', p4, c4);
|
||||
c1.push(vn4);
|
||||
return vn1;
|
||||
@@ -209,12 +209,11 @@ exports[`attributes t-att-class and class should combine together 1`] = `
|
||||
"function anonymous(context,extra
|
||||
) {
|
||||
var h = this.utils.h;
|
||||
var _1 = 'hello';
|
||||
var _3 = context['value'];
|
||||
var _2 = 'hello' + (_3 ? ' ' + _3 : '');
|
||||
let c4 = [], p4 = {key:4,attrs:{class: _2}};
|
||||
var vn4 = h('div', p4, c4);
|
||||
return vn4;
|
||||
let _2 = {'hello':true};
|
||||
Object.assign(_2, this.utils.toObj(context['value']))
|
||||
let c3 = [], p3 = {key:3,class:_2};
|
||||
var vn3 = h('div', p3, c3);
|
||||
return vn3;
|
||||
}"
|
||||
`;
|
||||
|
||||
@@ -222,12 +221,11 @@ exports[`attributes t-att-class with object 1`] = `
|
||||
"function anonymous(context,extra
|
||||
) {
|
||||
var h = this.utils.h;
|
||||
var _1 = 'static';
|
||||
var _3 = this.utils.objectToAttrString({a:context['b'],c:context['d'],e:context['f']});
|
||||
var _2 = 'static' + (_3 ? ' ' + _3 : '');
|
||||
let c4 = [], p4 = {key:4,attrs:{class: _2}};
|
||||
var vn4 = h('div', p4, c4);
|
||||
return vn4;
|
||||
let _2 = {'static':true};
|
||||
Object.assign(_2, this.utils.toObj({a:context['b'],c:context['d'],e:context['f']}))
|
||||
let c3 = [], p3 = {key:3,class:_2};
|
||||
var vn3 = h('div', p3, c3);
|
||||
return vn3;
|
||||
}"
|
||||
`;
|
||||
|
||||
|
||||
+108
-7
@@ -1481,6 +1481,112 @@ describe("class and style attributes with t-component", () => {
|
||||
expect(fixture.innerHTML).toBe(`<div><div class="a b c d"></div></div>`);
|
||||
});
|
||||
|
||||
test("t-att-class is properly added/removed on widget root el (v2)", async () => {
|
||||
env.qweb.addTemplates(`
|
||||
<templates>
|
||||
<div t-name="ParentWidget">
|
||||
<Child class="a" t-att-class="{ b: state.b }" t-ref="child"/>
|
||||
</div>
|
||||
<span t-name="Child" class="c" t-att-class="{ d: state.d }"/>
|
||||
</templates>`);
|
||||
|
||||
class ParentWidget extends Widget {
|
||||
components = { Child };
|
||||
state = { b: true };
|
||||
}
|
||||
class Child extends Widget {
|
||||
state = { d: true };
|
||||
}
|
||||
const widget = new ParentWidget(env);
|
||||
await widget.mount(fixture);
|
||||
|
||||
const span = fixture.querySelector("span")!;
|
||||
expect(span.className).toBe("c d a b");
|
||||
|
||||
widget.state.b = false;
|
||||
await nextTick();
|
||||
expect(span.className).toBe("c d a");
|
||||
|
||||
(<any>widget.refs.child).state.d = false;
|
||||
await nextTick();
|
||||
expect(span.className).toBe("c a");
|
||||
|
||||
widget.state.b = true;
|
||||
await nextTick();
|
||||
expect(span.className).toBe("c a b");
|
||||
|
||||
(<any>widget.refs.child).state.d = true;
|
||||
await nextTick();
|
||||
expect(span.className).toBe("c a b d");
|
||||
expect(env.qweb.templates.ParentWidget.fn.toString()).toMatchSnapshot();
|
||||
expect(env.qweb.templates.Child.fn.toString()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test("t-att-class is properly added/removed on widget root el (v3)", async () => {
|
||||
env.qweb.addTemplates(`
|
||||
<templates>
|
||||
<div t-name="ParentWidget">
|
||||
<Child class="a" t-att-class="state.b ? 'b' : ''" t-ref="child"/>
|
||||
</div>
|
||||
<span t-name="Child" class="c" t-att-class="state.d ? 'd' : ''"/>
|
||||
</templates>`);
|
||||
|
||||
class ParentWidget extends Widget {
|
||||
components = { Child };
|
||||
state = { b: true };
|
||||
}
|
||||
class Child extends Widget {
|
||||
state = { d: true };
|
||||
}
|
||||
const widget = new ParentWidget(env);
|
||||
await widget.mount(fixture);
|
||||
|
||||
const span = fixture.querySelector("span")!;
|
||||
expect(span.className).toBe("c d a b");
|
||||
|
||||
widget.state.b = false;
|
||||
await nextTick();
|
||||
expect(span.className).toBe("c d a");
|
||||
|
||||
(<any>widget.refs.child).state.d = false;
|
||||
await nextTick();
|
||||
expect(span.className).toBe("c a");
|
||||
|
||||
widget.state.b = true;
|
||||
await nextTick();
|
||||
expect(span.className).toBe("c a b");
|
||||
|
||||
(<any>widget.refs.child).state.d = true;
|
||||
await nextTick();
|
||||
expect(span.className).toBe("c a b d");
|
||||
expect(env.qweb.templates.ParentWidget.fn.toString()).toMatchSnapshot();
|
||||
expect(env.qweb.templates.Child.fn.toString()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test("class on components do not interfere with user defined classes", async () => {
|
||||
env.qweb.addTemplates(`
|
||||
<templates>
|
||||
<div t-name="App" t-att-class="{ c: state.c }" />
|
||||
</templates>`);
|
||||
|
||||
class App extends Widget {
|
||||
state = { c: true };
|
||||
mounted() {
|
||||
this.el!.classList.add("user");
|
||||
}
|
||||
}
|
||||
|
||||
const widget = new App(env);
|
||||
await widget.mount(fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe('<div class="c user"></div>');
|
||||
|
||||
widget.state.c = false;
|
||||
await nextTick();
|
||||
|
||||
expect(fixture.innerHTML).toBe('<div class="user"></div>');
|
||||
});
|
||||
|
||||
test("style is properly added on widget root el", async () => {
|
||||
env.qweb.addTemplate(
|
||||
"ParentWidget",
|
||||
@@ -3014,9 +3120,7 @@ describe("t-slot directive", () => {
|
||||
const parent = new Parent(env);
|
||||
await parent.mount(fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe(
|
||||
"<div><div>sts rocks</div></div>"
|
||||
);
|
||||
expect(fixture.innerHTML).toBe("<div><div>sts rocks</div></div>");
|
||||
});
|
||||
|
||||
test("multiple roots are allowed in a named slot", async () => {
|
||||
@@ -3090,7 +3194,7 @@ describe("t-slot directive", () => {
|
||||
await parent.mount(fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe(
|
||||
'<div><span><span>some content</span></span></div>'
|
||||
"<div><span><span>some content</span></span></div>"
|
||||
);
|
||||
});
|
||||
|
||||
@@ -3117,7 +3221,6 @@ describe("t-slot directive", () => {
|
||||
expect(console.log).toHaveBeenCalledTimes(0);
|
||||
console.log = consoleLog;
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("t-model directive", () => {
|
||||
@@ -3350,8 +3453,6 @@ describe("t-model directive", () => {
|
||||
expect(comp.state.number).toBe("invalid");
|
||||
expect(fixture.innerHTML).toBe("<div><input><span>invalid</span></div>");
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
describe("environment and plugins", () => {
|
||||
|
||||
Reference in New Issue
Block a user