@rhtml/custom-attributes 0.0.102 → 0.0.103
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 +16 -17
- package/dist/index.d.ts +5 -0
- package/dist/index.js +14 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/index.ts +14 -0
package/README.md
CHANGED
|
@@ -37,20 +37,19 @@ class BackgroundColor extends Attribute {
|
|
|
37
37
|
customAttributes.define('background', BackgroundColor);
|
|
38
38
|
```
|
|
39
39
|
|
|
40
|
-
#### Usage inside @rxdi/lit-html with custom registry
|
|
40
|
+
#### Usage inside @rxdi/lit-html with custom registry and @Modifier decorator
|
|
41
41
|
|
|
42
42
|
```typescript
|
|
43
43
|
import { Component, LitElement, html } from '@rxdi/lit-html';
|
|
44
|
-
import { CustomAttributeRegistry } from '@rhtml/custom-attributes';
|
|
44
|
+
import { Modifier, CustomAttributeRegistry } from '@rhtml/custom-attributes';
|
|
45
45
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
registry: new CustomAttributeRegistry(this.shadowRoot)
|
|
51
|
-
};
|
|
46
|
+
@Modifier({
|
|
47
|
+
selector: 'background',
|
|
48
|
+
registry(this) {
|
|
49
|
+
return new CustomAttributeRegistry(this.shadowRoot);
|
|
52
50
|
}
|
|
53
|
-
|
|
51
|
+
})
|
|
52
|
+
export class BackgroundColor extends Attribute {
|
|
54
53
|
OnInit() {
|
|
55
54
|
console.log('Attribute initialized');
|
|
56
55
|
this.setColor();
|
|
@@ -76,7 +75,7 @@ export class BackgroundColor extends Attribute {
|
|
|
76
75
|
modifiers: [BackgroundColor],
|
|
77
76
|
template(this: HomeComponent) {
|
|
78
77
|
return html`
|
|
79
|
-
<div
|
|
78
|
+
<div background="red">Background</div>
|
|
80
79
|
`;
|
|
81
80
|
}
|
|
82
81
|
})
|
|
@@ -116,13 +115,13 @@ export class BackgroundColor extends Attribute {
|
|
|
116
115
|
}
|
|
117
116
|
}
|
|
118
117
|
|
|
119
|
-
@Component({
|
|
118
|
+
@Component<HomeComponent>({
|
|
120
119
|
selector: 'home-component',
|
|
121
|
-
registry(this
|
|
120
|
+
registry(this) {
|
|
122
121
|
return new CustomAttributeRegistry(this.shadowRoot);
|
|
123
122
|
},
|
|
124
123
|
modifiers: [BackgroundColor],
|
|
125
|
-
template(this
|
|
124
|
+
template(this) {
|
|
126
125
|
return html`
|
|
127
126
|
<div myAttribute="red">Background</div>
|
|
128
127
|
`;
|
|
@@ -131,7 +130,7 @@ export class BackgroundColor extends Attribute {
|
|
|
131
130
|
export class HomeComponent extends LitElement {}
|
|
132
131
|
```
|
|
133
132
|
|
|
134
|
-
#### Decorator @CustomAttribute or @Modifier
|
|
133
|
+
#### Decorator @CustomAttribute or @Modifier there are the same
|
|
135
134
|
|
|
136
135
|
There is a way to define `options` static method as a typescript decorator
|
|
137
136
|
|
|
@@ -152,10 +151,10 @@ export class BackgroundColor extends Attribute {}
|
|
|
152
151
|
#### Modifier accepts also decorators from @rhtml/decorators
|
|
153
152
|
|
|
154
153
|
```typescript
|
|
155
|
-
import {
|
|
156
|
-
import {
|
|
154
|
+
import { Modifier, Input } from '@rhtml/custom-attributes';
|
|
155
|
+
import { HostListener } from '@rhtml/decorators';
|
|
157
156
|
|
|
158
|
-
@
|
|
157
|
+
@Modifier({
|
|
159
158
|
selector: 'hover'
|
|
160
159
|
})
|
|
161
160
|
export class Hoverable extends Attribute {
|
package/dist/index.d.ts
CHANGED
|
@@ -7,6 +7,11 @@ interface ModifierOptions {
|
|
|
7
7
|
selector: string;
|
|
8
8
|
registry?(this: HTMLElement): CustomAttributeRegistry;
|
|
9
9
|
}
|
|
10
|
+
/**
|
|
11
|
+
* Decorator @Input
|
|
12
|
+
* Used to get attribute from element
|
|
13
|
+
*/
|
|
14
|
+
export declare const Input: () => (target: unknown, memberName: string) => void;
|
|
10
15
|
/**
|
|
11
16
|
* Decorator @Modifier
|
|
12
17
|
* Accepts parameter options with selector and registry
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,19 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.CustomAttributeRegistry = exports.Attribute = exports.CustomAttribute = exports.Modifier = void 0;
|
|
3
|
+
exports.CustomAttributeRegistry = exports.Attribute = exports.CustomAttribute = exports.Modifier = exports.Input = void 0;
|
|
4
|
+
/**
|
|
5
|
+
* Decorator @Input
|
|
6
|
+
* Used to get attribute from element
|
|
7
|
+
*/
|
|
8
|
+
exports.Input = () => (target, memberName) => {
|
|
9
|
+
Object.defineProperty(target, memberName, {
|
|
10
|
+
get: function () {
|
|
11
|
+
var _a;
|
|
12
|
+
const element = (_a = this.element) !== null && _a !== void 0 ? _a : this;
|
|
13
|
+
return element.getAttribute(memberName.toLowerCase());
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
};
|
|
4
17
|
/**
|
|
5
18
|
* Decorator @Modifier
|
|
6
19
|
* Accepts parameter options with selector and registry
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAYA;;;GAGG;AACU,QAAA,QAAQ,GAAG,CAAC,OAAwB,EAAE,EAAE;IACnD,OAAO,CAAC,MAAgB,EAAE,EAAE;QAC1B,MAAM,CAAC,SAAS,CAAC,GAAG;;YAClB,uCACK,OAAO,KACV,QAAQ,QAAE,OAAO,CAAC,QAAQ,0CAAE,IAAI,CAAC,IAAI,KACrC;QACJ,CAAC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,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
|
@@ -10,6 +10,19 @@ interface ModifierOptions {
|
|
|
10
10
|
registry?(this: HTMLElement): CustomAttributeRegistry;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
+
/**
|
|
14
|
+
* Decorator @Input
|
|
15
|
+
* Used to get attribute from element
|
|
16
|
+
*/
|
|
17
|
+
export const Input = () => (target: unknown, memberName: string) => {
|
|
18
|
+
Object.defineProperty(target, memberName, {
|
|
19
|
+
get: function() {
|
|
20
|
+
const element = this.element ?? this;
|
|
21
|
+
return element.getAttribute(memberName.toLowerCase());
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
};
|
|
25
|
+
|
|
13
26
|
/**
|
|
14
27
|
* Decorator @Modifier
|
|
15
28
|
* Accepts parameter options with selector and registry
|
|
@@ -24,6 +37,7 @@ export const Modifier = (options: ModifierOptions) => {
|
|
|
24
37
|
};
|
|
25
38
|
};
|
|
26
39
|
};
|
|
40
|
+
|
|
27
41
|
/* Someone may like to use CustomAttribute instead of Modifier */
|
|
28
42
|
export const CustomAttribute = Modifier;
|
|
29
43
|
|