@rhtml/custom-attributes 0.0.97 → 0.0.100
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 +53 -4
- package/dist/index.d.ts +2 -1
- package/dist/index.js +5 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/index.ts +6 -2
package/README.md
CHANGED
|
@@ -29,7 +29,7 @@ class BackgroundColor extends Attribute {
|
|
|
29
29
|
this.setColor();
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
setColor() {
|
|
32
|
+
private setColor() {
|
|
33
33
|
this.element.style.backgroundColor = this.value;
|
|
34
34
|
}
|
|
35
35
|
}
|
|
@@ -37,16 +37,17 @@ class BackgroundColor extends Attribute {
|
|
|
37
37
|
customAttributes.define('red', BackgroundColor);
|
|
38
38
|
```
|
|
39
39
|
|
|
40
|
-
#### Usage inside @rxdi/lit-html
|
|
40
|
+
#### Usage inside @rxdi/lit-html with custom registry
|
|
41
41
|
|
|
42
42
|
```typescript
|
|
43
43
|
import { Component, LitElement, html } from '@rxdi/lit-html';
|
|
44
|
+
import { CustomAttributeRegistry } from '@rhtml/custom-attributes';
|
|
44
45
|
|
|
45
46
|
export class BackgroundColor extends Attribute {
|
|
46
47
|
static options(this: HTMLElement) {
|
|
47
48
|
return {
|
|
48
49
|
name: 'myAttribute',
|
|
49
|
-
registry: CustomAttributeRegistry
|
|
50
|
+
registry: new CustomAttributeRegistry(this.shadowRoot)
|
|
50
51
|
};
|
|
51
52
|
}
|
|
52
53
|
|
|
@@ -65,7 +66,7 @@ export class BackgroundColor extends Attribute {
|
|
|
65
66
|
this.setColor();
|
|
66
67
|
}
|
|
67
68
|
|
|
68
|
-
setColor() {
|
|
69
|
+
private setColor() {
|
|
69
70
|
this.element.style.backgroundColor = this.value;
|
|
70
71
|
}
|
|
71
72
|
}
|
|
@@ -81,3 +82,51 @@ export class BackgroundColor extends Attribute {
|
|
|
81
82
|
})
|
|
82
83
|
export class HomeComponent extends LitElement {}
|
|
83
84
|
```
|
|
85
|
+
|
|
86
|
+
#### Usage with per component registry
|
|
87
|
+
|
|
88
|
+
```typescript
|
|
89
|
+
import { Component, LitElement, html } from '@rxdi/lit-html';
|
|
90
|
+
import { CustomAttributeRegistry } from '@rhtml/custom-attributes';
|
|
91
|
+
|
|
92
|
+
export class BackgroundColor extends Attribute {
|
|
93
|
+
static options(this: HTMLElement) {
|
|
94
|
+
return {
|
|
95
|
+
name: 'myAttribute'
|
|
96
|
+
};
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
OnInit() {
|
|
100
|
+
console.log('Attribute initialized');
|
|
101
|
+
this.setColor();
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
OnDestroy() {
|
|
105
|
+
console.log('Attribute destroyed');
|
|
106
|
+
this.element.style.backgroundColor = null;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
OnUpdate(oldValue: string, newValue: string) {
|
|
110
|
+
console.log('Attribute updated');
|
|
111
|
+
this.setColor();
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
private setColor() {
|
|
115
|
+
this.element.style.backgroundColor = this.value;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
@Component({
|
|
120
|
+
selector: 'home-component',
|
|
121
|
+
registry(this: HomeComponent) {
|
|
122
|
+
return new CustomAttributeRegistry(this.shadowRoot);
|
|
123
|
+
},
|
|
124
|
+
modifiers: [BackgroundColor],
|
|
125
|
+
template(this: HomeComponent) {
|
|
126
|
+
return html`
|
|
127
|
+
<div myAttribute="red">Background</div>
|
|
128
|
+
`;
|
|
129
|
+
}
|
|
130
|
+
})
|
|
131
|
+
export class HomeComponent extends LitElement {}
|
|
132
|
+
```
|
package/dist/index.d.ts
CHANGED
|
@@ -9,7 +9,7 @@ export declare abstract class Attribute<T = {}> {
|
|
|
9
9
|
value?: string;
|
|
10
10
|
name?: string;
|
|
11
11
|
parent?: HTMLElement | Document | ShadowRoot;
|
|
12
|
-
setStyles(keys: T): (div: HTMLElement) => void;
|
|
12
|
+
setStyles(keys: T): (div: HTMLElement | Element | HTMLDivElement) => void;
|
|
13
13
|
OnInit(): void;
|
|
14
14
|
OnDestroy(): void;
|
|
15
15
|
OnUpdate(_oldValue: string, _newValue: string): void;
|
|
@@ -24,6 +24,7 @@ export declare class CustomAttributeRegistry {
|
|
|
24
24
|
get(element: HTMLElement, attrName: string): Attribute<{}>;
|
|
25
25
|
private getConstructor;
|
|
26
26
|
private observe;
|
|
27
|
+
unsubscribe(): void;
|
|
27
28
|
private upgradeAttribute;
|
|
28
29
|
private upgradeElement;
|
|
29
30
|
private downgrade;
|
package/dist/index.js
CHANGED
|
@@ -8,7 +8,7 @@ class Attribute {
|
|
|
8
8
|
setStyles(keys) {
|
|
9
9
|
return (div) => {
|
|
10
10
|
for (const [key, value] of Object.entries(keys)) {
|
|
11
|
-
div
|
|
11
|
+
div['style'][key] = value;
|
|
12
12
|
}
|
|
13
13
|
};
|
|
14
14
|
}
|
|
@@ -73,6 +73,10 @@ class CustomAttributeRegistry {
|
|
|
73
73
|
attributeOldValue: true
|
|
74
74
|
});
|
|
75
75
|
}
|
|
76
|
+
unsubscribe() {
|
|
77
|
+
var _a;
|
|
78
|
+
(_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
79
|
+
}
|
|
76
80
|
upgradeAttribute(attrName, doc) {
|
|
77
81
|
const parent = doc || this.parent;
|
|
78
82
|
const matches = parent.querySelectorAll('[' + attrName + ']');
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAOA,MAAsB,SAAS;IACtB,MAAM,CAAC,OAAO;QACnB,OAAO;IACT,CAAC;IAKD,SAAS,CAAC,IAAO;QACf,OAAO,CAAC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/index.ts
CHANGED
|
@@ -14,9 +14,9 @@ export abstract class Attribute<T = {}> {
|
|
|
14
14
|
public name?: string;
|
|
15
15
|
public parent?: HTMLElement | Document | ShadowRoot;
|
|
16
16
|
setStyles(keys: T) {
|
|
17
|
-
return (div: HTMLElement) => {
|
|
17
|
+
return (div: HTMLElement | Element | HTMLDivElement) => {
|
|
18
18
|
for (const [key, value] of Object.entries(keys)) {
|
|
19
|
-
div
|
|
19
|
+
div['style'][key] = value;
|
|
20
20
|
}
|
|
21
21
|
};
|
|
22
22
|
}
|
|
@@ -92,6 +92,10 @@ export class CustomAttributeRegistry {
|
|
|
92
92
|
});
|
|
93
93
|
}
|
|
94
94
|
|
|
95
|
+
unsubscribe() {
|
|
96
|
+
this.observer?.disconnect();
|
|
97
|
+
}
|
|
98
|
+
|
|
95
99
|
private upgradeAttribute(attrName: string, doc?: HTMLElement) {
|
|
96
100
|
const parent = doc || this.parent;
|
|
97
101
|
|