@rhtml/custom-attributes 0.0.101 → 0.0.102
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 +50 -3
- package/dist/index.d.ts +13 -2
- package/dist/index.js +16 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/index.ts +25 -3
package/README.md
CHANGED
|
@@ -34,7 +34,7 @@ class BackgroundColor extends Attribute {
|
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
customAttributes.define('
|
|
37
|
+
customAttributes.define('background', BackgroundColor);
|
|
38
38
|
```
|
|
39
39
|
|
|
40
40
|
#### Usage inside @rxdi/lit-html with custom registry
|
|
@@ -46,7 +46,7 @@ import { CustomAttributeRegistry } from '@rhtml/custom-attributes';
|
|
|
46
46
|
export class BackgroundColor extends Attribute {
|
|
47
47
|
static options(this: HTMLElement) {
|
|
48
48
|
return {
|
|
49
|
-
|
|
49
|
+
selector: 'background',
|
|
50
50
|
registry: new CustomAttributeRegistry(this.shadowRoot)
|
|
51
51
|
};
|
|
52
52
|
}
|
|
@@ -92,7 +92,7 @@ import { CustomAttributeRegistry } from '@rhtml/custom-attributes';
|
|
|
92
92
|
export class BackgroundColor extends Attribute {
|
|
93
93
|
static options(this: HTMLElement) {
|
|
94
94
|
return {
|
|
95
|
-
|
|
95
|
+
selector: 'myAttribute'
|
|
96
96
|
};
|
|
97
97
|
}
|
|
98
98
|
|
|
@@ -130,3 +130,50 @@ export class BackgroundColor extends Attribute {
|
|
|
130
130
|
})
|
|
131
131
|
export class HomeComponent extends LitElement {}
|
|
132
132
|
```
|
|
133
|
+
|
|
134
|
+
#### Decorator @CustomAttribute or @Modifier
|
|
135
|
+
|
|
136
|
+
There is a way to define `options` static method as a typescript decorator
|
|
137
|
+
|
|
138
|
+
```typescript
|
|
139
|
+
import { CustomAttribute, Modifier } from '@rhtml/custom-attributes';
|
|
140
|
+
|
|
141
|
+
@CustomAttribute({
|
|
142
|
+
selector: 'background'
|
|
143
|
+
})
|
|
144
|
+
export class BackgroundColor extends Attribute {}
|
|
145
|
+
|
|
146
|
+
@Modifier({
|
|
147
|
+
selector: 'background'
|
|
148
|
+
})
|
|
149
|
+
export class BackgroundColor extends Attribute {}
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
#### Modifier accepts also decorators from @rhtml/decorators
|
|
153
|
+
|
|
154
|
+
```typescript
|
|
155
|
+
import { CustomAttribute } from '@rhtml/custom-attributes';
|
|
156
|
+
import { Input, HostListener } from '@rhtml/decorators';
|
|
157
|
+
|
|
158
|
+
@CustomAttribute({
|
|
159
|
+
selector: 'hover'
|
|
160
|
+
})
|
|
161
|
+
export class Hoverable extends Attribute {
|
|
162
|
+
@Input()
|
|
163
|
+
myProperty: string;
|
|
164
|
+
|
|
165
|
+
@HostListener('mouseenter')
|
|
166
|
+
enter(event: Event) {
|
|
167
|
+
console.log('Enter', event);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
@HostListener('mouseleave')
|
|
171
|
+
leave(event: Event) {
|
|
172
|
+
console.log('Leave', event);
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
```html
|
|
178
|
+
<div hover myProperty="123">Lorem ipsum dolor</div>
|
|
179
|
+
```
|
package/dist/index.d.ts
CHANGED
|
@@ -1,13 +1,23 @@
|
|
|
1
1
|
export declare type Constructor<T> = new (...args: never[]) => T;
|
|
2
2
|
export interface Options {
|
|
3
3
|
registry?: CustomAttributeRegistry;
|
|
4
|
-
|
|
4
|
+
selector: string;
|
|
5
5
|
}
|
|
6
|
+
interface ModifierOptions {
|
|
7
|
+
selector: string;
|
|
8
|
+
registry?(this: HTMLElement): CustomAttributeRegistry;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Decorator @Modifier
|
|
12
|
+
* Accepts parameter options with selector and registry
|
|
13
|
+
*/
|
|
14
|
+
export declare const Modifier: (options: ModifierOptions) => (target: Function) => void;
|
|
15
|
+
export declare const CustomAttribute: (options: ModifierOptions) => (target: Function) => void;
|
|
6
16
|
export declare abstract class Attribute<T = {}> {
|
|
7
17
|
static options(this: HTMLElement): Options;
|
|
8
18
|
element?: HTMLElement;
|
|
9
19
|
value?: string;
|
|
10
|
-
|
|
20
|
+
selector?: string;
|
|
11
21
|
parent?: HTMLElement | Document | ShadowRoot;
|
|
12
22
|
setStyles(keys: T): (div: HTMLElement | Element | HTMLDivElement) => void;
|
|
13
23
|
OnInit(): void;
|
|
@@ -30,3 +40,4 @@ export declare class CustomAttributeRegistry {
|
|
|
30
40
|
private downgrade;
|
|
31
41
|
private found;
|
|
32
42
|
}
|
|
43
|
+
export {};
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,20 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.CustomAttributeRegistry = exports.Attribute = void 0;
|
|
3
|
+
exports.CustomAttributeRegistry = exports.Attribute = exports.CustomAttribute = exports.Modifier = void 0;
|
|
4
|
+
/**
|
|
5
|
+
* Decorator @Modifier
|
|
6
|
+
* Accepts parameter options with selector and registry
|
|
7
|
+
*/
|
|
8
|
+
exports.Modifier = (options) => {
|
|
9
|
+
return (target) => {
|
|
10
|
+
target['options'] = function () {
|
|
11
|
+
var _a;
|
|
12
|
+
return Object.assign(Object.assign({}, options), { registry: (_a = options.registry) === null || _a === void 0 ? void 0 : _a.call(this) });
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
/* Someone may like to use CustomAttribute instead of Modifier */
|
|
17
|
+
exports.CustomAttribute = exports.Modifier;
|
|
4
18
|
class Attribute {
|
|
5
19
|
static options() {
|
|
6
20
|
return;
|
|
@@ -122,7 +136,7 @@ class CustomAttributeRegistry {
|
|
|
122
136
|
const modifier = new Constructor();
|
|
123
137
|
map.set(attributeName, modifier);
|
|
124
138
|
modifier.element = el;
|
|
125
|
-
modifier.
|
|
139
|
+
modifier.selector = attributeName;
|
|
126
140
|
modifier.value = attribute || modifier.value;
|
|
127
141
|
modifier.parent = this.parent;
|
|
128
142
|
if (modifier.OnInit) {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;
|
|
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
|
@@ -2,16 +2,38 @@ export type Constructor<T> = new (...args: never[]) => T;
|
|
|
2
2
|
|
|
3
3
|
export interface Options {
|
|
4
4
|
registry?: CustomAttributeRegistry;
|
|
5
|
-
|
|
5
|
+
selector: string;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
+
interface ModifierOptions {
|
|
9
|
+
selector: string;
|
|
10
|
+
registry?(this: HTMLElement): CustomAttributeRegistry;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* Decorator @Modifier
|
|
15
|
+
* Accepts parameter options with selector and registry
|
|
16
|
+
*/
|
|
17
|
+
export const Modifier = (options: ModifierOptions) => {
|
|
18
|
+
return (target: Function) => {
|
|
19
|
+
target['options'] = function(this: HTMLElement): Options {
|
|
20
|
+
return {
|
|
21
|
+
...options,
|
|
22
|
+
registry: options.registry?.call(this)
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
/* Someone may like to use CustomAttribute instead of Modifier */
|
|
28
|
+
export const CustomAttribute = Modifier;
|
|
29
|
+
|
|
8
30
|
export abstract class Attribute<T = {}> {
|
|
9
31
|
public static options(this: HTMLElement): Options {
|
|
10
32
|
return;
|
|
11
33
|
}
|
|
12
34
|
public element?: HTMLElement;
|
|
13
35
|
public value?: string;
|
|
14
|
-
public
|
|
36
|
+
public selector?: string;
|
|
15
37
|
public parent?: HTMLElement | Document | ShadowRoot;
|
|
16
38
|
setStyles(keys: T) {
|
|
17
39
|
return (div: HTMLElement | Element | HTMLDivElement) => {
|
|
@@ -148,7 +170,7 @@ export class CustomAttributeRegistry {
|
|
|
148
170
|
const modifier = new Constructor();
|
|
149
171
|
map.set(attributeName, modifier);
|
|
150
172
|
modifier.element = el;
|
|
151
|
-
modifier.
|
|
173
|
+
modifier.selector = attributeName;
|
|
152
174
|
modifier.value = attribute || modifier.value;
|
|
153
175
|
modifier.parent = this.parent;
|
|
154
176
|
|