@mypolis.eu/action-controller 3.0.1 → 4.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -11
- package/dist/controller.js +2 -13
- package/dist/controller.js.map +1 -1
- package/dist/index.js +0 -1
- package/dist/index.js.map +1 -1
- package/dist/types/controller.d.ts +0 -1
- package/dist/types/controller.d.ts.map +1 -1
- package/dist/types/index.d.ts +0 -1
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -55,7 +55,7 @@ of UI. The Controller base class handles the setup of action listeners.
|
|
|
55
55
|
Actions link DOM events on elements within a controller's template to methods
|
|
56
56
|
on that controller instance. They are defined using the data-action attribute.
|
|
57
57
|
|
|
58
|
-
**Syntax**: `data-action="eventType
|
|
58
|
+
**Syntax**: `data-action="eventType->controllerTagName#methodName eventType2->controllerTagName#methodName2 ..."`
|
|
59
59
|
|
|
60
60
|
- **eventType**: The name of the DOM event (e.g., click, input, custom-event).
|
|
61
61
|
|
|
@@ -63,15 +63,14 @@ on that controller instance. They are defined using the data-action attribute.
|
|
|
63
63
|
my-greeter). This must match the tag name of the controller component where the
|
|
64
64
|
data-action attribute is placed.
|
|
65
65
|
|
|
66
|
-
- **methodName**: The name of the method to call on the controller instance.
|
|
67
|
-
omitted (e.g., click:my-greeter), it defaults to handleEvent.
|
|
66
|
+
- **methodName**: The name of the method to call on the controller instance.
|
|
68
67
|
|
|
69
68
|
### Registration
|
|
70
69
|
|
|
71
|
-
Controllers are registered as custom elements using the
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
my-example-controller).
|
|
70
|
+
Controllers are registered as custom elements using the `@customElement`
|
|
71
|
+
decorator from `lit/decorators.js`. This decorator requires you to explicitly
|
|
72
|
+
provide the custom element's tag name (e.g.,
|
|
73
|
+
`@customElement("my-example-controller")`).
|
|
75
74
|
|
|
76
75
|
### Targets
|
|
77
76
|
|
|
@@ -85,10 +84,11 @@ using the query and queryAll helper functions.
|
|
|
85
84
|
// dialog-trigger.ts
|
|
86
85
|
|
|
87
86
|
```typescript
|
|
88
|
-
import {
|
|
87
|
+
import {customElement} from "lit/decorators.js";
|
|
88
|
+
import {Controller, target} from "@mypolis.eu/action-controller";
|
|
89
89
|
import type {SlDialog} from "@shoelace-style/shoelace";
|
|
90
90
|
|
|
91
|
-
@
|
|
91
|
+
@customElement("dialog-trigger")
|
|
92
92
|
export class DialogTrigger extends Controller {
|
|
93
93
|
@target dialog!: SlDialog;
|
|
94
94
|
|
|
@@ -115,7 +115,7 @@ export class DialogTrigger extends Controller {
|
|
|
115
115
|
<sl-button
|
|
116
116
|
size="small"
|
|
117
117
|
title="Cancelar"
|
|
118
|
-
data-action="click
|
|
118
|
+
data-action="click->dialog-trigger#close"
|
|
119
119
|
circle
|
|
120
120
|
>
|
|
121
121
|
<sl-icon
|
|
@@ -131,7 +131,7 @@ export class DialogTrigger extends Controller {
|
|
|
131
131
|
</p>
|
|
132
132
|
</div>
|
|
133
133
|
<button
|
|
134
|
-
data-action="click
|
|
134
|
+
data-action="click->dialog-trigger#close"
|
|
135
135
|
style="width: 100%"
|
|
136
136
|
>
|
|
137
137
|
Fechar
|
package/dist/controller.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { html, LitElement } from "lit";
|
|
2
2
|
import { parseActions } from "./action";
|
|
3
|
-
import { parseAttributes } from "./attributes";
|
|
4
3
|
import { findElements, targetKey } from "./query";
|
|
5
4
|
export class Controller extends LitElement {
|
|
6
5
|
#handlers = new Map();
|
|
@@ -28,26 +27,16 @@ export class Controller extends LitElement {
|
|
|
28
27
|
});
|
|
29
28
|
}
|
|
30
29
|
disconnectedCallback() {
|
|
31
|
-
super.disconnectedCallback();
|
|
32
30
|
// Clean up existing listeners
|
|
33
31
|
this.#cleanupActions();
|
|
34
32
|
// Stop observing
|
|
35
33
|
this.#observer.disconnect();
|
|
34
|
+
// Free the custom element
|
|
35
|
+
super.disconnectedCallback();
|
|
36
36
|
}
|
|
37
37
|
render() {
|
|
38
38
|
return html `<slot />`;
|
|
39
39
|
}
|
|
40
|
-
eventDetail(event) {
|
|
41
|
-
// handle customevent
|
|
42
|
-
if (event instanceof CustomEvent && event.detail) {
|
|
43
|
-
return event.detail;
|
|
44
|
-
}
|
|
45
|
-
// handle data attributes
|
|
46
|
-
const target = event.target;
|
|
47
|
-
if (!target)
|
|
48
|
-
return {};
|
|
49
|
-
return parseAttributes(target);
|
|
50
|
-
}
|
|
51
40
|
#handleAction(event, element, action) {
|
|
52
41
|
// look for the nearest controller matching the action's controller name
|
|
53
42
|
const controller = element.closest(action.controller);
|
package/dist/controller.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"controller.js","sourceRoot":"","sources":["../src/controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AACrC,OAAO,EAAC,YAAY,EAAc,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"controller.js","sourceRoot":"","sources":["../src/controller.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAIxC,OAAO,EAAC,MAAM,EAAE,OAAO,EAAC,MAAM,SAAS,CAAC;AAExC,OAAO,EAAC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAIxC,OAAO,EAAC,MAAM,EAAE,OAAO,EAAC,MAAM,SAAS,CAAC;AAExC,OAAO,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC"}
|
|
@@ -7,6 +7,5 @@ export declare class Controller extends LitElement {
|
|
|
7
7
|
connectedCallback(): void;
|
|
8
8
|
disconnectedCallback(): void;
|
|
9
9
|
render(): import("lit").TemplateResult<1>;
|
|
10
|
-
eventDetail<T extends Record<string, any>>(event: CustomEvent<T> | Event): Partial<T>;
|
|
11
10
|
}
|
|
12
11
|
//# sourceMappingURL=controller.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"controller.d.ts","sourceRoot":"","sources":["../../src/controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,UAAU,EAAC,MAAM,KAAK,CAAC;AAGrC,OAAO,EAAe,MAAM,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC;AAIxD,qBAAa,UAAW,SAAQ,UAAU;;IAIzC,CAAC,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC;;IAWvB,iBAAiB;IAgBjB,oBAAoB;
|
|
1
|
+
{"version":3,"file":"controller.d.ts","sourceRoot":"","sources":["../../src/controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,UAAU,EAAC,MAAM,KAAK,CAAC;AAGrC,OAAO,EAAe,MAAM,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC;AAIxD,qBAAa,UAAW,SAAQ,UAAU;;IAIzC,CAAC,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC;;IAWvB,iBAAiB;IAgBjB,oBAAoB;IASpB,MAAM;CAuFN"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAExC,OAAO,EAAC,KAAK,MAAM,EAAC,MAAM,UAAU,CAAC;AAErC,OAAO,EAAC,MAAM,EAAE,OAAO,EAAC,MAAM,SAAS,CAAC;AAExC,OAAO,EAAC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAExC,OAAO,EAAC,KAAK,MAAM,EAAC,MAAM,UAAU,CAAC;AAErC,OAAO,EAAC,MAAM,EAAE,OAAO,EAAC,MAAM,SAAS,CAAC;AAExC,OAAO,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC"}
|