@toyz/loom 0.19.0 → 0.19.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/dist/element/icon.d.ts +22 -3
- package/dist/element/icon.d.ts.map +1 -1
- package/dist/element/icon.js +25 -4
- package/dist/element/icon.js.map +1 -1
- package/package.json +1 -1
package/dist/element/icon.d.ts
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Loom — Icon Component
|
|
3
3
|
*
|
|
4
|
-
* Reusable SVG icon wrapper with a static registry.
|
|
5
|
-
* Ships with zero built-in icons — register your own.
|
|
4
|
+
* Reusable SVG icon wrapper with a static registry and optional DI resolver.
|
|
6
5
|
*
|
|
7
6
|
* Usage:
|
|
8
7
|
* // Register icons (once, at boot)
|
|
@@ -10,10 +9,30 @@
|
|
|
10
9
|
*
|
|
11
10
|
* // Use anywhere in JSX
|
|
12
11
|
* <loom-icon name="bolt" size={20} color="var(--accent)" />
|
|
12
|
+
*
|
|
13
|
+
* // Optional: plug in an icon pack via DI
|
|
14
|
+
* app.use(IconResolver, myHeroIconResolver);
|
|
13
15
|
*/
|
|
14
16
|
import { LoomElement } from "./element";
|
|
17
|
+
/**
|
|
18
|
+
* Abstract resolver for external icon packs.
|
|
19
|
+
* Register via `app.use(IconResolver, myResolver)`.
|
|
20
|
+
*
|
|
21
|
+
* ```ts
|
|
22
|
+
* class HeroIconResolver extends IconResolver {
|
|
23
|
+
* resolve(name: string) {
|
|
24
|
+
* return heroicons[name] ?? null;
|
|
25
|
+
* }
|
|
26
|
+
* }
|
|
27
|
+
* app.use(IconResolver, new HeroIconResolver());
|
|
28
|
+
* ```
|
|
29
|
+
*/
|
|
30
|
+
export declare abstract class IconResolver {
|
|
31
|
+
/** Return SVG inner content for `name`, or `null` to fall back to static registry. */
|
|
32
|
+
abstract resolve(name: string): string | null;
|
|
33
|
+
}
|
|
15
34
|
export declare class LoomIcon extends LoomElement {
|
|
16
|
-
/** Icon name (must be registered via LoomIcon.register) */
|
|
35
|
+
/** Icon name (must be registered via LoomIcon.register or resolved via IconResolver) */
|
|
17
36
|
accessor name: string;
|
|
18
37
|
/** Size in pixels */
|
|
19
38
|
accessor size: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/element/icon.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/element/icon.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AA+BxC;;;;;;;;;;;;GAYG;AACH,8BAAsB,YAAY;IAChC,sFAAsF;IACtF,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;CAC9C;AAED,qBAEa,QAAS,SAAQ,WAAW;IAEvC,wFAAwF;IAClF,QAAQ,CAAC,IAAI,SAAM;IAEzB,qBAAqB;IACf,QAAQ,CAAC,IAAI,SAAM;IAEzB,+BAA+B;IACzB,QAAQ,CAAC,KAAK,SAAkB;IAEtC,mFAAmF;IACnF,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAIrD,uCAAuC;IACvC,MAAM,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI;IAMvD,sCAAsC;IACtC,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAIjC,sCAAsC;IACtC,MAAM,KAAK,KAAK,IAAI,MAAM,EAAE,CAE3B;IAID,OAAO,CAAC,QAAQ;IAKhB,MAAM;CAiBP"}
|
package/dist/element/icon.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Loom — Icon Component
|
|
3
3
|
*
|
|
4
|
-
* Reusable SVG icon wrapper with a static registry.
|
|
5
|
-
* Ships with zero built-in icons — register your own.
|
|
4
|
+
* Reusable SVG icon wrapper with a static registry and optional DI resolver.
|
|
6
5
|
*
|
|
7
6
|
* Usage:
|
|
8
7
|
* // Register icons (once, at boot)
|
|
@@ -10,6 +9,9 @@
|
|
|
10
9
|
*
|
|
11
10
|
* // Use anywhere in JSX
|
|
12
11
|
* <loom-icon name="bolt" size={20} color="var(--accent)" />
|
|
12
|
+
*
|
|
13
|
+
* // Optional: plug in an icon pack via DI
|
|
14
|
+
* app.use(IconResolver, myHeroIconResolver);
|
|
13
15
|
*/
|
|
14
16
|
var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
|
|
15
17
|
var useValue = arguments.length > 2;
|
|
@@ -50,6 +52,7 @@ import { component, styles } from "./decorators";
|
|
|
50
52
|
import { prop } from "../store/decorators";
|
|
51
53
|
import { watch } from "../store/watch";
|
|
52
54
|
import { css } from "../css";
|
|
55
|
+
import { app } from "../app";
|
|
53
56
|
const baseStyles = css `
|
|
54
57
|
loom-icon {
|
|
55
58
|
display: inline-flex;
|
|
@@ -72,6 +75,21 @@ const baseStyles = css `
|
|
|
72
75
|
`;
|
|
73
76
|
/** Icon path data registry (name → SVG inner content) */
|
|
74
77
|
const registry = new Map();
|
|
78
|
+
/**
|
|
79
|
+
* Abstract resolver for external icon packs.
|
|
80
|
+
* Register via `app.use(IconResolver, myResolver)`.
|
|
81
|
+
*
|
|
82
|
+
* ```ts
|
|
83
|
+
* class HeroIconResolver extends IconResolver {
|
|
84
|
+
* resolve(name: string) {
|
|
85
|
+
* return heroicons[name] ?? null;
|
|
86
|
+
* }
|
|
87
|
+
* }
|
|
88
|
+
* app.use(IconResolver, new HeroIconResolver());
|
|
89
|
+
* ```
|
|
90
|
+
*/
|
|
91
|
+
export class IconResolver {
|
|
92
|
+
}
|
|
75
93
|
let LoomIcon = (() => {
|
|
76
94
|
let _classDecorators = [component("loom-icon", { shadow: false }), styles(baseStyles)];
|
|
77
95
|
let _classDescriptor;
|
|
@@ -107,7 +125,7 @@ let LoomIcon = (() => {
|
|
|
107
125
|
__runInitializers(_classThis, _classExtraInitializers);
|
|
108
126
|
}
|
|
109
127
|
#name_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _name_initializers, ""));
|
|
110
|
-
/** Icon name (must be registered via LoomIcon.register) */
|
|
128
|
+
/** Icon name (must be registered via LoomIcon.register or resolved via IconResolver) */
|
|
111
129
|
get name() { return this.#name_accessor_storage; }
|
|
112
130
|
set name(value) { this.#name_accessor_storage = value; }
|
|
113
131
|
#size_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _size_initializers, 24));
|
|
@@ -143,7 +161,10 @@ let LoomIcon = (() => {
|
|
|
143
161
|
update() {
|
|
144
162
|
this.style.setProperty("--_s", `${this.size}px`);
|
|
145
163
|
this.style.setProperty("--_c", this.color);
|
|
146
|
-
|
|
164
|
+
// Resolver first → static registry fallback
|
|
165
|
+
const resolver = app.maybe(IconResolver);
|
|
166
|
+
const inner = (resolver.ok ? resolver.unwrap().resolve(this.name) : null)
|
|
167
|
+
?? registry.get(this.name);
|
|
147
168
|
if (!inner)
|
|
148
169
|
return document.createElement("span");
|
|
149
170
|
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
package/dist/element/icon.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../src/element/icon.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../src/element/icon.ts"],"names":[],"mappings":"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"}
|