NextERP/owl
2
0
Fork 0
mirror of https://github.com/odoo/owl.git synced 2025-10-06 19:59:41 +07:00
Code Issues Packages Projects Releases Wiki Activity

[IMP] qweb: allow multiclasses in t-att-class object form

Browse Source 
the low level method htmlelement.classList.add does not accept multiple
classes in one string, which is why, in owl, the expression

`<div t-att-class="{'a b c': value}" />`

did not work as one might expect. It is however very convenient in real
life templates, so this commit improve owl by adding support for this
feature.

closes #813
This commit is contained in:
Géry Debongnie
2021-07-03 16:02:57 +02:00
committed by aab-odoo
parent 3a93370ab6
commit 27629cedfa
8 changed files with 104 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/component/__snapshots__/class_style.test.ts.snap
+3 -3
View File
@@ -90,7 +90,7 @@ exports[`class and style attributes with t-component t-att-class is properly add
let scope = Object.create(context);
let h = this.h;
let _7 = {'c':true};
Object.assign(_7, utils.toObj({d:scope['state'].d}))
Object.assign(_7, utils.toClassObj({d:scope['state'].d}))
let c8 = [], p8 = {key:8,class:_7};
let vn8 = h('span', p8, c8);
return vn8;
@@ -112,7 +112,7 @@ exports[`class and style attributes with t-component t-att-class is properly add
// Component 'Child'
const ref4 = \`child\`;
let _5 = {'a':true};
Object.assign(_5, utils.toObj(scope['state'].b?'b':''))
Object.assign(_5, utils.toClassObj(scope['state'].b?'b':''))
let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
let props2 = {};
if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
@@ -148,7 +148,7 @@ exports[`class and style attributes with t-component t-att-class is properly add
let scope = Object.create(context);
let h = this.h;
let _7 = {'c':true};
Object.assign(_7, utils.toObj(scope['state'].d?'d':''))
Object.assign(_7, utils.toClassObj(scope['state'].d?'d':''))
let c8 = [], p8 = {key:8,class:_7};
let vn8 = h('span', p8, c8);
return vn8;
tests/qweb/__snapshots__/qweb.test.ts.snap
+7 -7
View File
@@ -7,7 +7,7 @@ exports[`attributes class and t-att-class should combine together 1`] = `
let utils = this.constructor.utils;
let scope = Object.create(context);
let h = this.h;
let _1 = utils.toObj(scope['value']);
let _1 = utils.toClassObj(scope['value']);
Object.assign(_1, {'hello':true})
let c3 = [], p3 = {key:3,class:_1};
let vn3 = h('div', p3, c3);
@@ -74,7 +74,7 @@ exports[`attributes dynamic class attribute 1`] = `
let utils = this.constructor.utils;
let scope = Object.create(context);
let h = this.h;
let _1 = utils.toObj(scope['c']);
let _1 = utils.toClassObj(scope['c']);
let c2 = [], p2 = {key:2,class:_1};
let vn2 = h('div', p2, c2);
return vn2;
@@ -88,7 +88,7 @@ exports[`attributes dynamic empty class attribute 1`] = `
let utils = this.constructor.utils;
let scope = Object.create(context);
let h = this.h;
let _1 = utils.toObj(scope['c']);
let _1 = utils.toClassObj(scope['c']);
let c2 = [], p2 = {key:2,class:_1};
let vn2 = h('div', p2, c2);
return vn2;
@@ -195,7 +195,7 @@ exports[`attributes from object variables set previously 1`] = `
let c1 = [], p1 = {key:1};
let vn1 = h('div', p1, c1);
scope.o = {a:'b'};
let _2 = utils.toObj(scope.o.a);
let _2 = utils.toClassObj(scope.o.a);
let c3 = [], p3 = {key:3,class:_2};
let vn3 = h('span', p3, c3);
c1.push(vn3);
@@ -213,7 +213,7 @@ exports[`attributes from variables set previously 1`] = `
let c1 = [], p1 = {key:1};
let vn1 = h('div', p1, c1);
scope.abc = 'def';
let _2 = utils.toObj(scope.abc);
let _2 = utils.toClassObj(scope.abc);
let c3 = [], p3 = {key:3,class:_2};
let vn3 = h('span', p3, c3);
c1.push(vn3);
@@ -288,7 +288,7 @@ exports[`attributes t-att-class and class should combine together 1`] = `
let scope = Object.create(context);
let h = this.h;
let _2 = {'hello':true};
Object.assign(_2, utils.toObj(scope['value']))
Object.assign(_2, utils.toClassObj(scope['value']))
let c3 = [], p3 = {key:3,class:_2};
let vn3 = h('div', p3, c3);
return vn3;
@@ -303,7 +303,7 @@ exports[`attributes t-att-class with object 1`] = `
let scope = Object.create(context);
let h = this.h;
let _2 = {'static':true};
Object.assign(_2, utils.toObj({a:scope['b'],c:scope['d'],e:scope['f']}))
Object.assign(_2, utils.toClassObj({a:scope['b'],c:scope['d'],e:scope['f']}))
let c3 = [], p3 = {key:3,class:_2};
let vn3 = h('div', p3, c3);
return vn3;
tests/qweb/__snapshots__/qweb_t_att.test.ts.snap
+29
View File
@@ -0,0 +1,29 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`qweb t-att t-att-class with multiple classes 1`] = `
"function anonymous(context, extra
) {
// Template name: \\"test\\"
let utils = this.constructor.utils;
let scope = Object.create(context);
let h = this.h;
let _1 = utils.toClassObj({'a b c':scope['value']});
let c2 = [], p2 = {key:2,class:_1};
let vn2 = h('div', p2, c2);
return vn2;
}"
`;
exports[`qweb t-att t-att-class with multiple classes 2`] = `
"function anonymous(context, extra
) {
// Template name: \\"test\\"
let utils = this.constructor.utils;
let scope = Object.create(context);
let h = this.h;
let _3 = utils.toClassObj({['a b c']:scope['value']});
let c4 = [], p4 = {key:4,class:_3};
let vn4 = h('div', p4, c4);
return vn4;
}"
`;
tests/qweb/qweb_t_att.test.ts
+27
View File
@@ -0,0 +1,27 @@
import { QWeb } from "../../src/qweb/index";
import { renderToString } from "../helpers";
//------------------------------------------------------------------------------
// Setup and helpers
//------------------------------------------------------------------------------
function render(template, context = {}) {
const qweb = new QWeb();
qweb.addTemplate("test", template);
return renderToString(qweb, "test", context);
}
//------------------------------------------------------------------------------
// Tests
//------------------------------------------------------------------------------
describe("qweb t-att", () => {
test("t-att-class with multiple classes", () => {
expect(render(`<div t-att-class="{'a b c': value}" />`, { value: true })).toBe(
'<div class="a b c"></div>'
);
expect(render(`<div t-att-class="{['a b c']: value}" />`, { value: true })).toBe(
'<div class="a b c"></div>'
);
});
});
tests/router/__snapshots__/link.test.ts.snap
+1 -1
View File
@@ -7,7 +7,7 @@ exports[`Link component can render simple cases 1`] = `
let utils = this.constructor.utils;
let scope = Object.create(context);
let h = this.h;
let _5 = utils.toObj({'router-link-active':scope['isActive']});
let _5 = utils.toClassObj({'router-link-active':scope['isActive']});
let _6 = scope['href'];
let c7 = [], p7 = {key:7,attrs:{href: _6},class:_5,on:{}};
let vn7 = h('a', p7, c7);