@rhtml/custom-attributes 0.0.97 → 0.0.98
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 +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/index.ts +2 -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;
|
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":";;;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
|
}
|