@zag-js/avatar 0.11.1 → 0.12.0
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/index.d.mts +14 -13
- package/dist/index.d.ts +14 -13
- package/dist/index.js +5 -21
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +5 -21
- package/dist/index.mjs.map +1 -1
- package/package.json +7 -7
- package/src/avatar.connect.ts +7 -20
- package/src/avatar.machine.ts +4 -3
- package/src/avatar.types.ts +27 -1
- package/src/index.ts +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as _zag_js_anatomy from '@zag-js/anatomy';
|
|
2
|
-
import { RequiredBy, CommonProperties, Context,
|
|
2
|
+
import { PropTypes, RequiredBy, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
|
|
3
3
|
import * as _zag_js_core from '@zag-js/core';
|
|
4
4
|
import { StateMachine } from '@zag-js/core';
|
|
5
5
|
|
|
@@ -9,17 +9,7 @@ type PublicContext = CommonProperties & {
|
|
|
9
9
|
onLoad?: () => void;
|
|
10
10
|
onError?: () => void;
|
|
11
11
|
};
|
|
12
|
-
type
|
|
13
|
-
type ComputedContext = Readonly<{}>;
|
|
14
|
-
type UserDefinedContext = RequiredBy<PublicContext, "id">;
|
|
15
|
-
type MachineContext = PublicContext & PrivateContext & ComputedContext;
|
|
16
|
-
type MachineState = {
|
|
17
|
-
value: "loading" | "error" | "loaded";
|
|
18
|
-
};
|
|
19
|
-
type State = StateMachine.State<MachineContext, MachineState>;
|
|
20
|
-
type Send = StateMachine.Send<StateMachine.AnyEventObject>;
|
|
21
|
-
|
|
22
|
-
declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
|
|
12
|
+
type PublicApi<T extends PropTypes = PropTypes> = {
|
|
23
13
|
/**
|
|
24
14
|
* Whether the image is loaded.
|
|
25
15
|
*/
|
|
@@ -44,7 +34,18 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
|
|
|
44
34
|
imageProps: T["img"];
|
|
45
35
|
fallbackProps: T["element"];
|
|
46
36
|
};
|
|
37
|
+
type PrivateContext = Context<{}>;
|
|
38
|
+
type ComputedContext = Readonly<{}>;
|
|
39
|
+
type UserDefinedContext = RequiredBy<PublicContext, "id">;
|
|
40
|
+
type MachineContext = PublicContext & PrivateContext & ComputedContext;
|
|
41
|
+
type MachineState = {
|
|
42
|
+
value: "loading" | "error" | "loaded";
|
|
43
|
+
};
|
|
44
|
+
type State = StateMachine.State<MachineContext, MachineState>;
|
|
45
|
+
type Send = StateMachine.Send<StateMachine.AnyEventObject>;
|
|
46
|
+
|
|
47
|
+
declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T>;
|
|
47
48
|
|
|
48
49
|
declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
|
|
49
50
|
|
|
50
|
-
export { UserDefinedContext as Context, anatomy, connect, machine };
|
|
51
|
+
export { UserDefinedContext as Context, PublicApi, anatomy, connect, machine };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as _zag_js_anatomy from '@zag-js/anatomy';
|
|
2
|
-
import { RequiredBy, CommonProperties, Context,
|
|
2
|
+
import { PropTypes, RequiredBy, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
|
|
3
3
|
import * as _zag_js_core from '@zag-js/core';
|
|
4
4
|
import { StateMachine } from '@zag-js/core';
|
|
5
5
|
|
|
@@ -9,17 +9,7 @@ type PublicContext = CommonProperties & {
|
|
|
9
9
|
onLoad?: () => void;
|
|
10
10
|
onError?: () => void;
|
|
11
11
|
};
|
|
12
|
-
type
|
|
13
|
-
type ComputedContext = Readonly<{}>;
|
|
14
|
-
type UserDefinedContext = RequiredBy<PublicContext, "id">;
|
|
15
|
-
type MachineContext = PublicContext & PrivateContext & ComputedContext;
|
|
16
|
-
type MachineState = {
|
|
17
|
-
value: "loading" | "error" | "loaded";
|
|
18
|
-
};
|
|
19
|
-
type State = StateMachine.State<MachineContext, MachineState>;
|
|
20
|
-
type Send = StateMachine.Send<StateMachine.AnyEventObject>;
|
|
21
|
-
|
|
22
|
-
declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
|
|
12
|
+
type PublicApi<T extends PropTypes = PropTypes> = {
|
|
23
13
|
/**
|
|
24
14
|
* Whether the image is loaded.
|
|
25
15
|
*/
|
|
@@ -44,7 +34,18 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
|
|
|
44
34
|
imageProps: T["img"];
|
|
45
35
|
fallbackProps: T["element"];
|
|
46
36
|
};
|
|
37
|
+
type PrivateContext = Context<{}>;
|
|
38
|
+
type ComputedContext = Readonly<{}>;
|
|
39
|
+
type UserDefinedContext = RequiredBy<PublicContext, "id">;
|
|
40
|
+
type MachineContext = PublicContext & PrivateContext & ComputedContext;
|
|
41
|
+
type MachineState = {
|
|
42
|
+
value: "loading" | "error" | "loaded";
|
|
43
|
+
};
|
|
44
|
+
type State = StateMachine.State<MachineContext, MachineState>;
|
|
45
|
+
type Send = StateMachine.Send<StateMachine.AnyEventObject>;
|
|
46
|
+
|
|
47
|
+
declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T>;
|
|
47
48
|
|
|
48
49
|
declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
|
|
49
50
|
|
|
50
|
-
export { UserDefinedContext as Context, anatomy, connect, machine };
|
|
51
|
+
export { UserDefinedContext as Context, PublicApi, anatomy, connect, machine };
|
package/dist/index.js
CHANGED
|
@@ -31,9 +31,6 @@ var import_anatomy = require("@zag-js/anatomy");
|
|
|
31
31
|
var anatomy = (0, import_anatomy.createAnatomy)("avatar").parts("root", "image", "fallback");
|
|
32
32
|
var parts = anatomy.build();
|
|
33
33
|
|
|
34
|
-
// src/avatar.connect.ts
|
|
35
|
-
var import_dom_query2 = require("@zag-js/dom-query");
|
|
36
|
-
|
|
37
34
|
// src/avatar.dom.ts
|
|
38
35
|
var import_dom_query = require("@zag-js/dom-query");
|
|
39
36
|
var dom = (0, import_dom_query.createScope)({
|
|
@@ -49,29 +46,14 @@ function connect(state, send, normalize) {
|
|
|
49
46
|
const isLoaded = state.matches("loaded");
|
|
50
47
|
const showFallback = !isLoaded;
|
|
51
48
|
return {
|
|
52
|
-
/**
|
|
53
|
-
* Whether the image is loaded.
|
|
54
|
-
*/
|
|
55
49
|
isLoaded,
|
|
56
|
-
/**
|
|
57
|
-
* Whether the fallback is shown.
|
|
58
|
-
*/
|
|
59
50
|
showFallback,
|
|
60
|
-
/**
|
|
61
|
-
* Function to set new src.
|
|
62
|
-
*/
|
|
63
51
|
setSrc(src) {
|
|
64
52
|
send({ type: "SRC.SET", src });
|
|
65
53
|
},
|
|
66
|
-
/**
|
|
67
|
-
* Function to set loaded state.
|
|
68
|
-
*/
|
|
69
54
|
setLoaded() {
|
|
70
55
|
send({ type: "IMG.LOADED", src: "api" });
|
|
71
56
|
},
|
|
72
|
-
/**
|
|
73
|
-
* Function to set error state.
|
|
74
|
-
*/
|
|
75
57
|
setError() {
|
|
76
58
|
send({ type: "IMG.ERROR", src: "api" });
|
|
77
59
|
},
|
|
@@ -87,7 +69,7 @@ function connect(state, send, normalize) {
|
|
|
87
69
|
imageProps: normalize.img({
|
|
88
70
|
...parts.image.attrs,
|
|
89
71
|
id: dom.getImageId(state.context),
|
|
90
|
-
"data-
|
|
72
|
+
"data-state": isLoaded ? "visible" : "hidden",
|
|
91
73
|
onLoad() {
|
|
92
74
|
send({ type: "IMG.LOADED", src: "element" });
|
|
93
75
|
},
|
|
@@ -103,6 +85,7 @@ function connect(state, send, normalize) {
|
|
|
103
85
|
...parts.fallback.attrs,
|
|
104
86
|
id: dom.getFallbackId(state.context),
|
|
105
87
|
hidden: !showFallback,
|
|
88
|
+
"data-state": isLoaded ? "hidden" : "visible",
|
|
106
89
|
style: {
|
|
107
90
|
gridArea: "1 / 1 / 2 / 2"
|
|
108
91
|
}
|
|
@@ -112,8 +95,8 @@ function connect(state, send, normalize) {
|
|
|
112
95
|
|
|
113
96
|
// src/avatar.machine.ts
|
|
114
97
|
var import_core = require("@zag-js/core");
|
|
115
|
-
var import_utils = require("@zag-js/utils");
|
|
116
98
|
var import_mutation_observer = require("@zag-js/mutation-observer");
|
|
99
|
+
var import_utils = require("@zag-js/utils");
|
|
117
100
|
function machine(userContext) {
|
|
118
101
|
const ctx = (0, import_utils.compact)(userContext);
|
|
119
102
|
return (0, import_core.createMachine)(
|
|
@@ -194,7 +177,8 @@ function machine(userContext) {
|
|
|
194
177
|
checkImgStatus(ctx2, _evt, { send }) {
|
|
195
178
|
const img = dom.getImageEl(ctx2);
|
|
196
179
|
if (img?.complete) {
|
|
197
|
-
|
|
180
|
+
const type = img.currentSrc ? "IMG.LOADED" : "IMG.ERROR";
|
|
181
|
+
send({ type, src: "ssr" });
|
|
198
182
|
}
|
|
199
183
|
}
|
|
200
184
|
}
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/avatar.anatomy.ts","../src/avatar.
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/avatar.anatomy.ts","../src/avatar.dom.ts","../src/avatar.connect.ts","../src/avatar.machine.ts"],"sourcesContent":["export { anatomy } from \"./avatar.anatomy\"\nexport { connect } from \"./avatar.connect\"\nexport { machine } from \"./avatar.machine\"\nexport type { UserDefinedContext as Context, PublicApi } from \"./avatar.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"avatar\").parts(\"root\", \"image\", \"fallback\")\n\nexport const parts = anatomy.build()\n","import { createScope } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./avatar.types\"\n\nexport const dom = createScope({\n getRootId: (ctx: Ctx) => `avatar:${ctx.id}`,\n getImageId: (ctx: Ctx) => `avatar:${ctx.id}:image`,\n getFallbackId: (ctx: Ctx) => `avatar:${ctx.id}:fallback`,\n\n getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),\n getImageEl: (ctx: Ctx) => dom.getById<HTMLImageElement>(ctx, dom.getImageId(ctx)),\n})\n","import type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./avatar.anatomy\"\nimport { dom } from \"./avatar.dom\"\nimport type { PublicApi, Send, State } from \"./avatar.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T> {\n const isLoaded = state.matches(\"loaded\")\n const showFallback = !isLoaded\n\n return {\n isLoaded,\n showFallback,\n setSrc(src: string) {\n send({ type: \"SRC.SET\", src })\n },\n\n setLoaded() {\n send({ type: \"IMG.LOADED\", src: \"api\" })\n },\n\n setError() {\n send({ type: \"IMG.ERROR\", src: \"api\" })\n },\n\n rootProps: normalize.element({\n ...parts.root.attrs,\n id: dom.getRootId(state.context),\n style: {\n display: \"grid\",\n gridTemplateRows: \"1fr 1fr\",\n overflow: \"hidden\",\n },\n }),\n\n imageProps: normalize.img({\n ...parts.image.attrs,\n id: dom.getImageId(state.context),\n \"data-state\": isLoaded ? \"visible\" : \"hidden\",\n onLoad() {\n send({ type: \"IMG.LOADED\", src: \"element\" })\n },\n onError() {\n send({ type: \"IMG.ERROR\", src: \"element\" })\n },\n style: {\n gridArea: \"1 / 1 / 2 / 2\",\n visibility: !isLoaded ? \"hidden\" : undefined,\n },\n }),\n\n fallbackProps: normalize.element({\n ...parts.fallback.attrs,\n id: dom.getFallbackId(state.context),\n hidden: !showFallback,\n \"data-state\": isLoaded ? \"hidden\" : \"visible\",\n style: {\n gridArea: \"1 / 1 / 2 / 2\",\n },\n }),\n }\n}\n","import { createMachine } from \"@zag-js/core\"\nimport { observeAttributes, observeChildren } from \"@zag-js/mutation-observer\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./avatar.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./avatar.types\"\n\nexport function machine(userContext: UserDefinedContext) {\n const ctx = compact(userContext)\n return createMachine<MachineContext, MachineState>(\n {\n id: \"avatar\",\n initial: \"loading\",\n activities: [\"trackImageRemoval\"],\n\n context: ctx,\n\n on: {\n \"SRC.CHANGE\": {\n target: \"loading\",\n },\n \"IMG.UNMOUNT\": {\n target: \"error\",\n },\n },\n\n states: {\n loading: {\n activities: [\"trackSrcChange\"],\n entry: [\"checkImgStatus\"],\n on: {\n \"IMG.LOADED\": {\n target: \"loaded\",\n actions: [\"invokeOnLoad\"],\n },\n \"IMG.ERROR\": {\n target: \"error\",\n actions: [\"invokeOnError\"],\n },\n },\n },\n error: {\n activities: [\"trackSrcChange\"],\n on: {\n \"IMG.LOADED\": {\n target: \"loaded\",\n actions: [\"invokeOnLoad\"],\n },\n },\n },\n loaded: {\n activities: [\"trackSrcChange\"],\n on: {\n \"IMG.ERROR\": {\n target: \"error\",\n actions: [\"invokeOnError\"],\n },\n },\n },\n },\n },\n {\n activities: {\n trackSrcChange(ctx, _evt, { send }) {\n const img = dom.getImageEl(ctx)\n return observeAttributes(img, [\"src\", \"srcset\"], () => {\n send({ type: \"SRC.CHANGE\" })\n })\n },\n trackImageRemoval(ctx, _evt, { send }) {\n const rootEl = dom.getRootEl(ctx)\n return observeChildren(rootEl, (records) => {\n const removedNodes = Array.from(records[0].removedNodes) as HTMLElement[]\n const removed = removedNodes.find((node) => node.matches(\"[data-scope=avatar][data-part=image]\"))\n if (removed) {\n send({ type: \"IMG.UNMOUNT\" })\n }\n })\n },\n },\n actions: {\n invokeOnLoad(ctx) {\n ctx.onLoad?.()\n },\n invokeOnError(ctx) {\n ctx.onError?.()\n },\n checkImgStatus(ctx, _evt, { send }) {\n const img = dom.getImageEl(ctx)\n if (img?.complete) {\n const type = img.currentSrc ? \"IMG.LOADED\" : \"IMG.ERROR\"\n send({ type, src: \"ssr\" })\n }\n },\n },\n },\n )\n}\n"],"mappings":"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","names":["ctx"]}
|
package/dist/index.mjs
CHANGED
|
@@ -3,9 +3,6 @@ import { createAnatomy } from "@zag-js/anatomy";
|
|
|
3
3
|
var anatomy = createAnatomy("avatar").parts("root", "image", "fallback");
|
|
4
4
|
var parts = anatomy.build();
|
|
5
5
|
|
|
6
|
-
// src/avatar.connect.ts
|
|
7
|
-
import { dataAttr } from "@zag-js/dom-query";
|
|
8
|
-
|
|
9
6
|
// src/avatar.dom.ts
|
|
10
7
|
import { createScope } from "@zag-js/dom-query";
|
|
11
8
|
var dom = createScope({
|
|
@@ -21,29 +18,14 @@ function connect(state, send, normalize) {
|
|
|
21
18
|
const isLoaded = state.matches("loaded");
|
|
22
19
|
const showFallback = !isLoaded;
|
|
23
20
|
return {
|
|
24
|
-
/**
|
|
25
|
-
* Whether the image is loaded.
|
|
26
|
-
*/
|
|
27
21
|
isLoaded,
|
|
28
|
-
/**
|
|
29
|
-
* Whether the fallback is shown.
|
|
30
|
-
*/
|
|
31
22
|
showFallback,
|
|
32
|
-
/**
|
|
33
|
-
* Function to set new src.
|
|
34
|
-
*/
|
|
35
23
|
setSrc(src) {
|
|
36
24
|
send({ type: "SRC.SET", src });
|
|
37
25
|
},
|
|
38
|
-
/**
|
|
39
|
-
* Function to set loaded state.
|
|
40
|
-
*/
|
|
41
26
|
setLoaded() {
|
|
42
27
|
send({ type: "IMG.LOADED", src: "api" });
|
|
43
28
|
},
|
|
44
|
-
/**
|
|
45
|
-
* Function to set error state.
|
|
46
|
-
*/
|
|
47
29
|
setError() {
|
|
48
30
|
send({ type: "IMG.ERROR", src: "api" });
|
|
49
31
|
},
|
|
@@ -59,7 +41,7 @@ function connect(state, send, normalize) {
|
|
|
59
41
|
imageProps: normalize.img({
|
|
60
42
|
...parts.image.attrs,
|
|
61
43
|
id: dom.getImageId(state.context),
|
|
62
|
-
"data-
|
|
44
|
+
"data-state": isLoaded ? "visible" : "hidden",
|
|
63
45
|
onLoad() {
|
|
64
46
|
send({ type: "IMG.LOADED", src: "element" });
|
|
65
47
|
},
|
|
@@ -75,6 +57,7 @@ function connect(state, send, normalize) {
|
|
|
75
57
|
...parts.fallback.attrs,
|
|
76
58
|
id: dom.getFallbackId(state.context),
|
|
77
59
|
hidden: !showFallback,
|
|
60
|
+
"data-state": isLoaded ? "hidden" : "visible",
|
|
78
61
|
style: {
|
|
79
62
|
gridArea: "1 / 1 / 2 / 2"
|
|
80
63
|
}
|
|
@@ -84,8 +67,8 @@ function connect(state, send, normalize) {
|
|
|
84
67
|
|
|
85
68
|
// src/avatar.machine.ts
|
|
86
69
|
import { createMachine } from "@zag-js/core";
|
|
87
|
-
import { compact } from "@zag-js/utils";
|
|
88
70
|
import { observeAttributes, observeChildren } from "@zag-js/mutation-observer";
|
|
71
|
+
import { compact } from "@zag-js/utils";
|
|
89
72
|
function machine(userContext) {
|
|
90
73
|
const ctx = compact(userContext);
|
|
91
74
|
return createMachine(
|
|
@@ -166,7 +149,8 @@ function machine(userContext) {
|
|
|
166
149
|
checkImgStatus(ctx2, _evt, { send }) {
|
|
167
150
|
const img = dom.getImageEl(ctx2);
|
|
168
151
|
if (img?.complete) {
|
|
169
|
-
|
|
152
|
+
const type = img.currentSrc ? "IMG.LOADED" : "IMG.ERROR";
|
|
153
|
+
send({ type, src: "ssr" });
|
|
170
154
|
}
|
|
171
155
|
}
|
|
172
156
|
}
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/avatar.anatomy.ts","../src/avatar.
|
|
1
|
+
{"version":3,"sources":["../src/avatar.anatomy.ts","../src/avatar.dom.ts","../src/avatar.connect.ts","../src/avatar.machine.ts"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"avatar\").parts(\"root\", \"image\", \"fallback\")\n\nexport const parts = anatomy.build()\n","import { createScope } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./avatar.types\"\n\nexport const dom = createScope({\n getRootId: (ctx: Ctx) => `avatar:${ctx.id}`,\n getImageId: (ctx: Ctx) => `avatar:${ctx.id}:image`,\n getFallbackId: (ctx: Ctx) => `avatar:${ctx.id}:fallback`,\n\n getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),\n getImageEl: (ctx: Ctx) => dom.getById<HTMLImageElement>(ctx, dom.getImageId(ctx)),\n})\n","import type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./avatar.anatomy\"\nimport { dom } from \"./avatar.dom\"\nimport type { PublicApi, Send, State } from \"./avatar.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T> {\n const isLoaded = state.matches(\"loaded\")\n const showFallback = !isLoaded\n\n return {\n isLoaded,\n showFallback,\n setSrc(src: string) {\n send({ type: \"SRC.SET\", src })\n },\n\n setLoaded() {\n send({ type: \"IMG.LOADED\", src: \"api\" })\n },\n\n setError() {\n send({ type: \"IMG.ERROR\", src: \"api\" })\n },\n\n rootProps: normalize.element({\n ...parts.root.attrs,\n id: dom.getRootId(state.context),\n style: {\n display: \"grid\",\n gridTemplateRows: \"1fr 1fr\",\n overflow: \"hidden\",\n },\n }),\n\n imageProps: normalize.img({\n ...parts.image.attrs,\n id: dom.getImageId(state.context),\n \"data-state\": isLoaded ? \"visible\" : \"hidden\",\n onLoad() {\n send({ type: \"IMG.LOADED\", src: \"element\" })\n },\n onError() {\n send({ type: \"IMG.ERROR\", src: \"element\" })\n },\n style: {\n gridArea: \"1 / 1 / 2 / 2\",\n visibility: !isLoaded ? \"hidden\" : undefined,\n },\n }),\n\n fallbackProps: normalize.element({\n ...parts.fallback.attrs,\n id: dom.getFallbackId(state.context),\n hidden: !showFallback,\n \"data-state\": isLoaded ? \"hidden\" : \"visible\",\n style: {\n gridArea: \"1 / 1 / 2 / 2\",\n },\n }),\n }\n}\n","import { createMachine } from \"@zag-js/core\"\nimport { observeAttributes, observeChildren } from \"@zag-js/mutation-observer\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./avatar.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./avatar.types\"\n\nexport function machine(userContext: UserDefinedContext) {\n const ctx = compact(userContext)\n return createMachine<MachineContext, MachineState>(\n {\n id: \"avatar\",\n initial: \"loading\",\n activities: [\"trackImageRemoval\"],\n\n context: ctx,\n\n on: {\n \"SRC.CHANGE\": {\n target: \"loading\",\n },\n \"IMG.UNMOUNT\": {\n target: \"error\",\n },\n },\n\n states: {\n loading: {\n activities: [\"trackSrcChange\"],\n entry: [\"checkImgStatus\"],\n on: {\n \"IMG.LOADED\": {\n target: \"loaded\",\n actions: [\"invokeOnLoad\"],\n },\n \"IMG.ERROR\": {\n target: \"error\",\n actions: [\"invokeOnError\"],\n },\n },\n },\n error: {\n activities: [\"trackSrcChange\"],\n on: {\n \"IMG.LOADED\": {\n target: \"loaded\",\n actions: [\"invokeOnLoad\"],\n },\n },\n },\n loaded: {\n activities: [\"trackSrcChange\"],\n on: {\n \"IMG.ERROR\": {\n target: \"error\",\n actions: [\"invokeOnError\"],\n },\n },\n },\n },\n },\n {\n activities: {\n trackSrcChange(ctx, _evt, { send }) {\n const img = dom.getImageEl(ctx)\n return observeAttributes(img, [\"src\", \"srcset\"], () => {\n send({ type: \"SRC.CHANGE\" })\n })\n },\n trackImageRemoval(ctx, _evt, { send }) {\n const rootEl = dom.getRootEl(ctx)\n return observeChildren(rootEl, (records) => {\n const removedNodes = Array.from(records[0].removedNodes) as HTMLElement[]\n const removed = removedNodes.find((node) => node.matches(\"[data-scope=avatar][data-part=image]\"))\n if (removed) {\n send({ type: \"IMG.UNMOUNT\" })\n }\n })\n },\n },\n actions: {\n invokeOnLoad(ctx) {\n ctx.onLoad?.()\n },\n invokeOnError(ctx) {\n ctx.onError?.()\n },\n checkImgStatus(ctx, _evt, { send }) {\n const img = dom.getImageEl(ctx)\n if (img?.complete) {\n const type = img.currentSrc ? \"IMG.LOADED\" : \"IMG.ERROR\"\n send({ type, src: \"ssr\" })\n }\n },\n },\n },\n )\n}\n"],"mappings":"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","names":["ctx"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/avatar",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.12.0",
|
|
4
4
|
"description": "Core logic for the avatar widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -28,12 +28,12 @@
|
|
|
28
28
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@zag-js/anatomy": "0.
|
|
32
|
-
"@zag-js/mutation-observer": "0.
|
|
33
|
-
"@zag-js/core": "0.
|
|
34
|
-
"@zag-js/dom-query": "0.
|
|
35
|
-
"@zag-js/utils": "0.
|
|
36
|
-
"@zag-js/types": "0.
|
|
31
|
+
"@zag-js/anatomy": "0.12.0",
|
|
32
|
+
"@zag-js/mutation-observer": "0.12.0",
|
|
33
|
+
"@zag-js/core": "0.12.0",
|
|
34
|
+
"@zag-js/dom-query": "0.12.0",
|
|
35
|
+
"@zag-js/utils": "0.12.0",
|
|
36
|
+
"@zag-js/types": "0.12.0"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"clean-package": "2.2.0"
|
package/src/avatar.connect.ts
CHANGED
|
@@ -1,37 +1,23 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { NormalizeProps, type PropTypes } from "@zag-js/types"
|
|
1
|
+
import type { NormalizeProps, PropTypes } from "@zag-js/types"
|
|
3
2
|
import { parts } from "./avatar.anatomy"
|
|
4
3
|
import { dom } from "./avatar.dom"
|
|
5
|
-
import { Send, State } from "./avatar.types"
|
|
4
|
+
import type { PublicApi, Send, State } from "./avatar.types"
|
|
6
5
|
|
|
7
|
-
export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>) {
|
|
6
|
+
export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T> {
|
|
8
7
|
const isLoaded = state.matches("loaded")
|
|
9
8
|
const showFallback = !isLoaded
|
|
10
9
|
|
|
11
10
|
return {
|
|
12
|
-
/**
|
|
13
|
-
* Whether the image is loaded.
|
|
14
|
-
*/
|
|
15
11
|
isLoaded,
|
|
16
|
-
/**
|
|
17
|
-
* Whether the fallback is shown.
|
|
18
|
-
*/
|
|
19
12
|
showFallback,
|
|
20
|
-
/**
|
|
21
|
-
* Function to set new src.
|
|
22
|
-
*/
|
|
23
13
|
setSrc(src: string) {
|
|
24
14
|
send({ type: "SRC.SET", src })
|
|
25
15
|
},
|
|
26
|
-
|
|
27
|
-
* Function to set loaded state.
|
|
28
|
-
*/
|
|
16
|
+
|
|
29
17
|
setLoaded() {
|
|
30
18
|
send({ type: "IMG.LOADED", src: "api" })
|
|
31
19
|
},
|
|
32
|
-
|
|
33
|
-
* Function to set error state.
|
|
34
|
-
*/
|
|
20
|
+
|
|
35
21
|
setError() {
|
|
36
22
|
send({ type: "IMG.ERROR", src: "api" })
|
|
37
23
|
},
|
|
@@ -49,7 +35,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
|
|
|
49
35
|
imageProps: normalize.img({
|
|
50
36
|
...parts.image.attrs,
|
|
51
37
|
id: dom.getImageId(state.context),
|
|
52
|
-
"data-
|
|
38
|
+
"data-state": isLoaded ? "visible" : "hidden",
|
|
53
39
|
onLoad() {
|
|
54
40
|
send({ type: "IMG.LOADED", src: "element" })
|
|
55
41
|
},
|
|
@@ -66,6 +52,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
|
|
|
66
52
|
...parts.fallback.attrs,
|
|
67
53
|
id: dom.getFallbackId(state.context),
|
|
68
54
|
hidden: !showFallback,
|
|
55
|
+
"data-state": isLoaded ? "hidden" : "visible",
|
|
69
56
|
style: {
|
|
70
57
|
gridArea: "1 / 1 / 2 / 2",
|
|
71
58
|
},
|
package/src/avatar.machine.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { createMachine } from "@zag-js/core"
|
|
2
|
-
import { compact } from "@zag-js/utils"
|
|
3
2
|
import { observeAttributes, observeChildren } from "@zag-js/mutation-observer"
|
|
4
|
-
import {
|
|
3
|
+
import { compact } from "@zag-js/utils"
|
|
5
4
|
import { dom } from "./avatar.dom"
|
|
5
|
+
import type { MachineContext, MachineState, UserDefinedContext } from "./avatar.types"
|
|
6
6
|
|
|
7
7
|
export function machine(userContext: UserDefinedContext) {
|
|
8
8
|
const ctx = compact(userContext)
|
|
@@ -87,7 +87,8 @@ export function machine(userContext: UserDefinedContext) {
|
|
|
87
87
|
checkImgStatus(ctx, _evt, { send }) {
|
|
88
88
|
const img = dom.getImageEl(ctx)
|
|
89
89
|
if (img?.complete) {
|
|
90
|
-
|
|
90
|
+
const type = img.currentSrc ? "IMG.LOADED" : "IMG.ERROR"
|
|
91
|
+
send({ type, src: "ssr" })
|
|
91
92
|
}
|
|
92
93
|
},
|
|
93
94
|
},
|
package/src/avatar.types.ts
CHANGED
|
@@ -1,11 +1,37 @@
|
|
|
1
1
|
import type { StateMachine as S } from "@zag-js/core"
|
|
2
|
-
import type { CommonProperties, Context, RequiredBy } from "@zag-js/types"
|
|
2
|
+
import type { CommonProperties, Context, PropTypes, RequiredBy } from "@zag-js/types"
|
|
3
3
|
|
|
4
4
|
type PublicContext = CommonProperties & {
|
|
5
5
|
onLoad?: () => void
|
|
6
6
|
onError?: () => void
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
+
export type PublicApi<T extends PropTypes = PropTypes> = {
|
|
10
|
+
/**
|
|
11
|
+
* Whether the image is loaded.
|
|
12
|
+
*/
|
|
13
|
+
isLoaded: boolean
|
|
14
|
+
/**
|
|
15
|
+
* Whether the fallback is shown.
|
|
16
|
+
*/
|
|
17
|
+
showFallback: boolean
|
|
18
|
+
/**
|
|
19
|
+
* Function to set new src.
|
|
20
|
+
*/
|
|
21
|
+
setSrc(src: string): void
|
|
22
|
+
/**
|
|
23
|
+
* Function to set loaded state.
|
|
24
|
+
*/
|
|
25
|
+
setLoaded(): void
|
|
26
|
+
/**
|
|
27
|
+
* Function to set error state.
|
|
28
|
+
*/
|
|
29
|
+
setError(): void
|
|
30
|
+
rootProps: T["element"]
|
|
31
|
+
imageProps: T["img"]
|
|
32
|
+
fallbackProps: T["element"]
|
|
33
|
+
}
|
|
34
|
+
|
|
9
35
|
type PrivateContext = Context<{}>
|
|
10
36
|
|
|
11
37
|
type ComputedContext = Readonly<{}>
|
package/src/index.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { anatomy } from "./avatar.anatomy"
|
|
2
2
|
export { connect } from "./avatar.connect"
|
|
3
3
|
export { machine } from "./avatar.machine"
|
|
4
|
-
export type { UserDefinedContext as Context } from "./avatar.types"
|
|
4
|
+
export type { UserDefinedContext as Context, PublicApi } from "./avatar.types"
|