mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
Jorge Pinna Puissant
7e687234bf
This commit adds the support for custom directives. To use the
custom directive, an Object of functions needs to be configured on
the owl APP:
```js
new App(..., {
customDirectives: {
test_directive: function (el, value) {
el.setAttribute("t-on-click", value);
return el;
}
}
});
```
The functions will be called when a custom directive with the name of the
function is found. The original element will be replaced with the one
returned by the function.
This :
```xml
<div t-custom-test_directive="click" />
```
will be replace by :
```xml
<div t-on-click="value"/>
```
issue : https://github.com/odoo/owl/issues/1650
56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import { App, Component, xml } from "../../src";
|
|
import { makeTestFixture, snapshotEverything } from "../helpers";
|
|
|
|
let fixture: HTMLElement;
|
|
|
|
snapshotEverything();
|
|
|
|
beforeEach(() => {
|
|
fixture = makeTestFixture();
|
|
});
|
|
|
|
describe("t-custom", () => {
|
|
test("can use t-custom directive on a node", async () => {
|
|
const steps: string[] = [];
|
|
class SomeComponent extends Component {
|
|
static template = xml`<div t-custom-plop="click" class="my-div"/>`;
|
|
click() {
|
|
steps.push("clicked");
|
|
}
|
|
}
|
|
const app = new App(SomeComponent, {
|
|
customDirectives: {
|
|
plop: (node, value) => {
|
|
node.setAttribute("t-on-click", value);
|
|
},
|
|
},
|
|
});
|
|
await app.mount(fixture);
|
|
expect(fixture.innerHTML).toBe(`<div class="my-div"></div>`);
|
|
fixture.querySelector("div")!.click();
|
|
expect(steps).toEqual(["clicked"]);
|
|
});
|
|
|
|
test("can use t-custom directive with modifier on a node", async () => {
|
|
const steps: string[] = [];
|
|
class SomeComponent extends Component {
|
|
static template = xml`<div t-custom-plop.mouse="click" class="my-div"/>`;
|
|
click() {
|
|
steps.push("clicked");
|
|
}
|
|
}
|
|
const app = new App(SomeComponent, {
|
|
customDirectives: {
|
|
plop: (node, value, modifier) => {
|
|
node.setAttribute("t-on-click", value);
|
|
steps.push(modifier || "");
|
|
},
|
|
},
|
|
});
|
|
await app.mount(fixture);
|
|
expect(fixture.innerHTML).toBe(`<div class="my-div"></div>`);
|
|
fixture.querySelector("div")!.click();
|
|
expect(steps).toEqual(["mouse", "clicked"]);
|
|
});
|
|
});
|