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

[FIX] slots: allow t-call and components in slot default content

Browse Source
This commit is contained in:
Samuel Degueldre
2021-11-24 14:13:09 +01:00
committed by Géry Debongnie
parent 840348892f
commit 92174559a1
4 changed files with 133 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/template_helpers.ts
+3 -3
View File
@@ -19,7 +19,7 @@ function callSlot(
name: string,
dynamic: boolean,
extra: any,
defaultSlot?: (ctx: any, key: string) => BDom
defaultContent?: (ctx: any, node: any, key: string) => BDom
): BDom {
const slots = (ctx.props && ctx.props.slots) || {};
const { __render, __ctx, __scope } = slots[name] || {};
@@ -28,13 +28,13 @@ function callSlot(
slotScope[__scope] = extra || {};
}
const slotBDom = __render ? __render(slotScope, parent, key) : null;
if (defaultSlot) {
if (defaultContent) {
let child1: BDom | undefined = undefined;
let child2: BDom | undefined = undefined;
if (slotBDom) {
child1 = dynamic ? toggler(name, slotBDom) : slotBDom;
} else {
child2 = defaultSlot(parent, key);
child2 = defaultContent(ctx, parent, key);
}
return multi([child1, child2]);
}
src/compiler/code_generator.ts
+2 -2
View File
@@ -1095,9 +1095,9 @@ export class CodeGenerator {
}
if (ast.defaultContent) {
let name = this.generateId("defaultSlot");
let name = this.generateId("defaultContent");
const slot = new CodeTarget(name);
slot.signature = "ctx => {";
slot.signature = "(ctx, node, key) => {";
this.functions.push(slot);
const initialTarget = this.target;
const subCtx: Context = createContext(ctx);
tests/components/__snapshots__/slots.test.ts.snap
+99 -18
View File
@@ -133,6 +133,87 @@ exports[`slots can render only empty slot 1`] = `
}"
`;
exports[`slots can use component in default-content of t-slot 1`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
return function template(ctx, node, key = \\"\\") {
return text(\`\`);
}
}"
`;
exports[`slots can use component in default-content of t-slot 2`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
const defaultContent1 = (ctx, node, key) => {
return component(\`GrandChild\`, {}, key + \`__2\`, node, ctx);
}
return function template(ctx, node, key = \\"\\") {
return callSlot(ctx, node, key, 'default', false, {}, defaultContent1);
}
}"
`;
exports[`slots can use component in default-content of t-slot 3`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
return function template(ctx, node, key = \\"\\") {
return component(\`Child\`, {}, key + \`__1\`, node, ctx);
}
}"
`;
exports[`slots can use t-call in default-content of t-slot 1`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
return function template(ctx, node, key = \\"\\") {
return text(\`\`);
}
}"
`;
exports[`slots can use t-call in default-content of t-slot 2`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
const callTemplate_3 = getTemplate(\`__template__9\`);
const defaultContent1 = (ctx, node, key) => {
return callTemplate_3.call(this, ctx, node, key + \`__2\`);
}
return function template(ctx, node, key = \\"\\") {
return callSlot(ctx, node, key, 'default', false, {}, defaultContent1);
}
}"
`;
exports[`slots can use t-call in default-content of t-slot 3`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
return function template(ctx, node, key = \\"\\") {
return component(\`Child\`, {}, key + \`__1\`, node, ctx);
}
}"
`;
exports[`slots content is the default slot (variation) 1`] = `
"function anonymous(bdom, helpers
) {
@@ -206,12 +287,12 @@ exports[`slots dafault slots can define a default content 1`] = `
let block1 = createBlock(\`<span><block-child-0/></span>\`);
const defaultSlot1 = ctx => {
const defaultContent1 = (ctx, node, key) => {
return text(\`default content\`);
}
return function template(ctx, node, key = \\"\\") {
let b3 = callSlot(ctx, node, key, 'default', false, {}, defaultSlot1);
let b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1);
return block1([], [b3]);
}
}"
@@ -240,12 +321,12 @@ exports[`slots default content is not rendered if named slot is provided 1`] = `
let block1 = createBlock(\`<span><block-child-0/></span>\`);
const defaultSlot1 = ctx => {
const defaultContent1 = (ctx, node, key) => {
return text(\`default content\`);
}
return function template(ctx, node, key = \\"\\") {
let b3 = callSlot(ctx, node, key, 'header', false, {}, defaultSlot1);
let b3 = callSlot(ctx, node, key, 'header', false, {}, defaultContent1);
return block1([], [b3]);
}
}"
@@ -279,12 +360,12 @@ exports[`slots default content is not rendered if slot is provided 1`] = `
let block1 = createBlock(\`<span><block-child-0/></span>\`);
const defaultSlot1 = ctx => {
const defaultContent1 = (ctx, node, key) => {
return text(\`default content\`);
}
return function template(ctx, node, key = \\"\\") {
let b3 = callSlot(ctx, node, key, 'default', false, {}, defaultSlot1);
let b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1);
return block1([], [b3]);
}
}"
@@ -317,17 +398,17 @@ exports[`slots default slot next to named slot, with default content 1`] = `
let block1 = createBlock(\`<div class=\\"Dialog\\"><div class=\\"content\\"><block-child-0/></div><div class=\\"footer\\"><block-child-1/></div></div>\`);
const defaultSlot1 = ctx => {
const defaultContent1 = (ctx, node, key) => {
return text(\` Default content \`);
}
const defaultSlot2 = ctx => {
const defaultContent2 = (ctx, node, key) => {
return text(\` Default footer \`);
}
return function template(ctx, node, key = \\"\\") {
let b3 = callSlot(ctx, node, key, 'default', false, {}, defaultSlot1);
let b5 = callSlot(ctx, node, key, 'footer', false, {}, defaultSlot2);
let b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1);
let b5 = callSlot(ctx, node, key, 'footer', false, {}, defaultContent2);
return block1([], [b3, b5]);
}
}"
@@ -469,13 +550,13 @@ exports[`slots dynamic t-slot call with default 1`] = `
let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-child-0/></button>\`);
const defaultSlot1 = ctx => {
const defaultContent1 = (ctx, node, key) => {
return text(\` owl \`);
}
return function template(ctx, node, key = \\"\\") {
let d1 = [ctx['toggle'], ctx];
let b3 = callSlot(ctx, node, key, (ctx['current'].slot), true, {}, defaultSlot1);
let b3 = callSlot(ctx, node, key, (ctx['current'].slot), true, {}, defaultContent1);
return block1([d1], [b3]);
}
}"
@@ -806,12 +887,12 @@ exports[`slots named slots can define a default content 1`] = `
let block1 = createBlock(\`<span><block-child-0/></span>\`);
const defaultSlot1 = ctx => {
const defaultContent1 = (ctx, node, key) => {
return text(\`default content\`);
}
return function template(ctx, node, key = \\"\\") {
let b3 = callSlot(ctx, node, key, 'header', false, {}, defaultSlot1);
let b3 = callSlot(ctx, node, key, 'header', false, {}, defaultContent1);
return block1([], [b3]);
}
}"
@@ -840,17 +921,17 @@ exports[`slots named slots inside slot, again 1`] = `
let block1 = createBlock(\`<child><block-child-0/><block-child-1/><block-child-2/></child>\`);
const defaultSlot1 = ctx => {
const defaultContent1 = (ctx, node, key) => {
return text(\`default1\`);
}
const defaultSlot2 = ctx => {
const defaultContent2 = (ctx, node, key) => {
return text(\`default2\`);
}
return function template(ctx, node, key = \\"\\") {
let b3 = callSlot(ctx, node, key, 'brol1', false, {}, defaultSlot1);
let b5 = callSlot(ctx, node, key, 'brol2', false, {}, defaultSlot2);
let b3 = callSlot(ctx, node, key, 'brol1', false, {}, defaultContent1);
let b5 = callSlot(ctx, node, key, 'brol2', false, {}, defaultContent2);
let b6 = callSlot(ctx, node, key, 'default', false, {});
return block1([], [b3, b5, b6]);
}
tests/components/slots.test.ts
+29
View File
@@ -1434,4 +1434,33 @@ describe("slots", () => {
}
expect(error).toBeNull();
});
test("can use t-call in default-content of t-slot", async () => {
const template = xml``;
class Child extends Component {
static template = xml`<t t-slot="default"><t t-call="${template}"/></t>`;
}
class Parent extends Component {
static template = xml`<Child/>`;
static components = { Child };
}
await mount(Parent, fixture);
});
test("can use component in default-content of t-slot", async () => {
class GrandChild extends Component {
static template = xml``;
}
class Child extends Component {
static template = xml`<t t-slot="default"><GrandChild/></t>`;
static components = { GrandChild };
}
class Parent extends Component {
static template = xml`<Child/>`;
static components = { Child };
}
await mount(Parent, fixture);
});
});