@zag-js/avatar 0.53.0 → 0.55.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 +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +207 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +176 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -6
- package/src/avatar.connect.ts +31 -25
- package/src/avatar.types.ts +3 -3
package/dist/index.d.mts
CHANGED
|
@@ -52,9 +52,9 @@ interface MachineApi<T extends PropTypes = PropTypes> {
|
|
|
52
52
|
* Function to set error state.
|
|
53
53
|
*/
|
|
54
54
|
setError(): void;
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
55
|
+
getRootProps(): T["element"];
|
|
56
|
+
getImageProps(): T["img"];
|
|
57
|
+
getFallbackProps(): T["element"];
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
|
package/dist/index.d.ts
CHANGED
|
@@ -52,9 +52,9 @@ interface MachineApi<T extends PropTypes = PropTypes> {
|
|
|
52
52
|
* Function to set error state.
|
|
53
53
|
*/
|
|
54
54
|
setError(): void;
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
55
|
+
getRootProps(): T["element"];
|
|
56
|
+
getImageProps(): T["img"];
|
|
57
|
+
getFallbackProps(): T["element"];
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,208 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/index.ts
|
|
21
|
+
var src_exports = {};
|
|
22
|
+
__export(src_exports, {
|
|
23
|
+
anatomy: () => anatomy,
|
|
24
|
+
connect: () => connect,
|
|
25
|
+
machine: () => machine,
|
|
26
|
+
props: () => props,
|
|
27
|
+
splitProps: () => splitProps
|
|
28
|
+
});
|
|
29
|
+
module.exports = __toCommonJS(src_exports);
|
|
30
|
+
|
|
31
|
+
// src/avatar.anatomy.ts
|
|
32
|
+
var import_anatomy = require("@zag-js/anatomy");
|
|
33
|
+
var anatomy = (0, import_anatomy.createAnatomy)("avatar").parts("root", "image", "fallback");
|
|
34
|
+
var parts = anatomy.build();
|
|
35
|
+
|
|
36
|
+
// src/avatar.dom.ts
|
|
37
|
+
var import_dom_query = require("@zag-js/dom-query");
|
|
38
|
+
var dom = (0, import_dom_query.createScope)({
|
|
39
|
+
getRootId: (ctx) => ctx.ids?.root ?? `avatar:${ctx.id}`,
|
|
40
|
+
getImageId: (ctx) => ctx.ids?.image ?? `avatar:${ctx.id}:image`,
|
|
41
|
+
getFallbackId: (ctx) => ctx.ids?.fallback ?? `avatar:${ctx.id}:fallback`,
|
|
42
|
+
getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
|
|
43
|
+
getImageEl: (ctx) => dom.getById(ctx, dom.getImageId(ctx))
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
// src/avatar.connect.ts
|
|
47
|
+
function connect(state, send, normalize) {
|
|
48
|
+
const loaded = state.matches("loaded");
|
|
49
|
+
return {
|
|
50
|
+
loaded,
|
|
51
|
+
setSrc(src) {
|
|
52
|
+
send({ type: "SRC.SET", src });
|
|
53
|
+
},
|
|
54
|
+
setLoaded() {
|
|
55
|
+
send({ type: "IMG.LOADED", src: "api" });
|
|
56
|
+
},
|
|
57
|
+
setError() {
|
|
58
|
+
send({ type: "IMG.ERROR", src: "api" });
|
|
59
|
+
},
|
|
60
|
+
getRootProps() {
|
|
61
|
+
return normalize.element({
|
|
62
|
+
...parts.root.attrs,
|
|
63
|
+
dir: state.context.dir,
|
|
64
|
+
id: dom.getRootId(state.context)
|
|
65
|
+
});
|
|
66
|
+
},
|
|
67
|
+
getImageProps() {
|
|
68
|
+
return normalize.img({
|
|
69
|
+
...parts.image.attrs,
|
|
70
|
+
hidden: !loaded,
|
|
71
|
+
dir: state.context.dir,
|
|
72
|
+
id: dom.getImageId(state.context),
|
|
73
|
+
"data-state": loaded ? "visible" : "hidden",
|
|
74
|
+
onLoad() {
|
|
75
|
+
send({ type: "IMG.LOADED", src: "element" });
|
|
76
|
+
},
|
|
77
|
+
onError() {
|
|
78
|
+
send({ type: "IMG.ERROR", src: "element" });
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
},
|
|
82
|
+
getFallbackProps() {
|
|
83
|
+
return normalize.element({
|
|
84
|
+
...parts.fallback.attrs,
|
|
85
|
+
dir: state.context.dir,
|
|
86
|
+
id: dom.getFallbackId(state.context),
|
|
87
|
+
hidden: loaded,
|
|
88
|
+
"data-state": loaded ? "hidden" : "visible"
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
// src/avatar.machine.ts
|
|
95
|
+
var import_core = require("@zag-js/core");
|
|
96
|
+
var import_dom_query2 = require("@zag-js/dom-query");
|
|
97
|
+
var import_utils = require("@zag-js/utils");
|
|
98
|
+
function machine(userContext) {
|
|
99
|
+
const ctx = (0, import_utils.compact)(userContext);
|
|
100
|
+
return (0, import_core.createMachine)(
|
|
101
|
+
{
|
|
102
|
+
id: "avatar",
|
|
103
|
+
initial: "loading",
|
|
104
|
+
activities: ["trackImageRemoval"],
|
|
105
|
+
context: ctx,
|
|
106
|
+
on: {
|
|
107
|
+
"SRC.CHANGE": {
|
|
108
|
+
target: "loading"
|
|
109
|
+
},
|
|
110
|
+
"IMG.UNMOUNT": {
|
|
111
|
+
target: "error"
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
states: {
|
|
115
|
+
loading: {
|
|
116
|
+
activities: ["trackSrcChange"],
|
|
117
|
+
entry: ["checkImageStatus"],
|
|
118
|
+
on: {
|
|
119
|
+
"IMG.LOADED": {
|
|
120
|
+
target: "loaded",
|
|
121
|
+
actions: ["invokeOnLoad"]
|
|
122
|
+
},
|
|
123
|
+
"IMG.ERROR": {
|
|
124
|
+
target: "error",
|
|
125
|
+
actions: ["invokeOnError"]
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
error: {
|
|
130
|
+
activities: ["trackSrcChange"],
|
|
131
|
+
on: {
|
|
132
|
+
"IMG.LOADED": {
|
|
133
|
+
target: "loaded",
|
|
134
|
+
actions: ["invokeOnLoad"]
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
},
|
|
138
|
+
loaded: {
|
|
139
|
+
activities: ["trackSrcChange"],
|
|
140
|
+
on: {
|
|
141
|
+
"IMG.ERROR": {
|
|
142
|
+
target: "error",
|
|
143
|
+
actions: ["invokeOnError"]
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
activities: {
|
|
151
|
+
trackSrcChange(ctx2, _evt, { send }) {
|
|
152
|
+
const imageEl = dom.getImageEl(ctx2);
|
|
153
|
+
return (0, import_dom_query2.observeAttributes)(imageEl, {
|
|
154
|
+
attributes: ["src", "srcset"],
|
|
155
|
+
callback() {
|
|
156
|
+
send({ type: "SRC.CHANGE" });
|
|
157
|
+
}
|
|
158
|
+
});
|
|
159
|
+
},
|
|
160
|
+
trackImageRemoval(ctx2, _evt, { send }) {
|
|
161
|
+
const rootEl = dom.getRootEl(ctx2);
|
|
162
|
+
return (0, import_dom_query2.observeChildren)(rootEl, {
|
|
163
|
+
callback(records) {
|
|
164
|
+
const removedNodes = Array.from(records[0].removedNodes);
|
|
165
|
+
const removed = removedNodes.find((node) => node.matches("[data-scope=avatar][data-part=image]"));
|
|
166
|
+
if (removed) {
|
|
167
|
+
send({ type: "IMG.UNMOUNT" });
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
});
|
|
171
|
+
}
|
|
172
|
+
},
|
|
173
|
+
actions: {
|
|
174
|
+
invokeOnLoad(ctx2) {
|
|
175
|
+
ctx2.onStatusChange?.({ status: "loaded" });
|
|
176
|
+
},
|
|
177
|
+
invokeOnError(ctx2) {
|
|
178
|
+
ctx2.onStatusChange?.({ status: "error" });
|
|
179
|
+
},
|
|
180
|
+
checkImageStatus(ctx2, _evt, { send }) {
|
|
181
|
+
const imageEl = dom.getImageEl(ctx2);
|
|
182
|
+
if (imageEl?.complete) {
|
|
183
|
+
const type = hasLoaded(imageEl) ? "IMG.LOADED" : "IMG.ERROR";
|
|
184
|
+
send({ type, src: "ssr" });
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
);
|
|
190
|
+
}
|
|
191
|
+
function hasLoaded(image) {
|
|
192
|
+
return image.complete && image.naturalWidth !== 0 && image.naturalHeight !== 0;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
// src/avatar.props.ts
|
|
196
|
+
var import_types = require("@zag-js/types");
|
|
197
|
+
var import_utils2 = require("@zag-js/utils");
|
|
198
|
+
var props = (0, import_types.createProps)()(["dir", "id", "ids", "onStatusChange", "getRootNode"]);
|
|
199
|
+
var splitProps = (0, import_utils2.createSplitProps)(props);
|
|
200
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
201
|
+
0 && (module.exports = {
|
|
202
|
+
anatomy,
|
|
203
|
+
connect,
|
|
204
|
+
machine,
|
|
205
|
+
props,
|
|
206
|
+
splitProps
|
|
207
|
+
});
|
|
2
208
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/avatar.anatomy.ts","../src/avatar.dom.ts","../src/avatar.connect.ts","../src/avatar.machine.ts","../src/avatar.props.ts"],"sourcesContent":["export { anatomy } from \"./avatar.anatomy\"\nexport { connect } from \"./avatar.connect\"\nexport { machine } from \"./avatar.machine\"\nexport * from \"./avatar.props\"\nexport type {\n MachineApi as Api,\n UserDefinedContext as Context,\n ElementIds,\n LoadStatus,\n StatusChangeDetails,\n} 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) => ctx.ids?.root ?? `avatar:${ctx.id}`,\n getImageId: (ctx: Ctx) => ctx.ids?.image ?? `avatar:${ctx.id}:image`,\n getFallbackId: (ctx: Ctx) => ctx.ids?.fallback ?? `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 { MachineApi, Send, State } from \"./avatar.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const loaded = state.matches(\"loaded\")\n return {\n loaded,\n setSrc(src) {\n send({ type: \"SRC.SET\", src })\n },\n setLoaded() {\n send({ type: \"IMG.LOADED\", src: \"api\" })\n },\n setError() {\n send({ type: \"IMG.ERROR\", src: \"api\" })\n },\n\n
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/avatar.anatomy.ts","../src/avatar.dom.ts","../src/avatar.connect.ts","../src/avatar.machine.ts","../src/avatar.props.ts"],"sourcesContent":["export { anatomy } from \"./avatar.anatomy\"\nexport { connect } from \"./avatar.connect\"\nexport { machine } from \"./avatar.machine\"\nexport * from \"./avatar.props\"\nexport type {\n MachineApi as Api,\n UserDefinedContext as Context,\n ElementIds,\n LoadStatus,\n StatusChangeDetails,\n} 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) => ctx.ids?.root ?? `avatar:${ctx.id}`,\n getImageId: (ctx: Ctx) => ctx.ids?.image ?? `avatar:${ctx.id}:image`,\n getFallbackId: (ctx: Ctx) => ctx.ids?.fallback ?? `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 { MachineApi, Send, State } from \"./avatar.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const loaded = state.matches(\"loaded\")\n return {\n loaded,\n setSrc(src) {\n send({ type: \"SRC.SET\", src })\n },\n setLoaded() {\n send({ type: \"IMG.LOADED\", src: \"api\" })\n },\n setError() {\n send({ type: \"IMG.ERROR\", src: \"api\" })\n },\n\n getRootProps() {\n return normalize.element({\n ...parts.root.attrs,\n dir: state.context.dir,\n id: dom.getRootId(state.context),\n })\n },\n\n getImageProps() {\n return normalize.img({\n ...parts.image.attrs,\n hidden: !loaded,\n dir: state.context.dir,\n id: dom.getImageId(state.context),\n \"data-state\": loaded ? \"visible\" : \"hidden\",\n onLoad() {\n send({ type: \"IMG.LOADED\", src: \"element\" })\n },\n onError() {\n send({ type: \"IMG.ERROR\", src: \"element\" })\n },\n })\n },\n\n getFallbackProps() {\n return normalize.element({\n ...parts.fallback.attrs,\n dir: state.context.dir,\n id: dom.getFallbackId(state.context),\n hidden: loaded,\n \"data-state\": loaded ? \"hidden\" : \"visible\",\n })\n },\n }\n}\n","import { createMachine } from \"@zag-js/core\"\nimport { observeAttributes, observeChildren } from \"@zag-js/dom-query\"\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: [\"checkImageStatus\"],\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 imageEl = dom.getImageEl(ctx)\n return observeAttributes(imageEl, {\n attributes: [\"src\", \"srcset\"],\n callback() {\n send({ type: \"SRC.CHANGE\" })\n },\n })\n },\n trackImageRemoval(ctx, _evt, { send }) {\n const rootEl = dom.getRootEl(ctx)\n return observeChildren(rootEl, {\n callback(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 },\n actions: {\n invokeOnLoad(ctx) {\n ctx.onStatusChange?.({ status: \"loaded\" })\n },\n invokeOnError(ctx) {\n ctx.onStatusChange?.({ status: \"error\" })\n },\n checkImageStatus(ctx, _evt, { send }) {\n const imageEl = dom.getImageEl(ctx)\n if (imageEl?.complete) {\n const type = hasLoaded(imageEl) ? \"IMG.LOADED\" : \"IMG.ERROR\"\n send({ type, src: \"ssr\" })\n }\n },\n },\n },\n )\n}\n\nfunction hasLoaded(image: HTMLImageElement) {\n return image.complete && image.naturalWidth !== 0 && image.naturalHeight !== 0\n}\n","import { createProps } from \"@zag-js/types\"\nimport { createSplitProps } from \"@zag-js/utils\"\nimport type { UserDefinedContext } from \"./avatar.types\"\n\nexport const props = createProps<UserDefinedContext>()([\"dir\", \"id\", \"ids\", \"onStatusChange\", \"getRootNode\"])\nexport const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)\n"],"mappings":"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","names":["import_dom_query","ctx","import_utils"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,177 @@
|
|
|
1
|
-
|
|
1
|
+
// src/avatar.anatomy.ts
|
|
2
|
+
import { createAnatomy } from "@zag-js/anatomy";
|
|
3
|
+
var anatomy = createAnatomy("avatar").parts("root", "image", "fallback");
|
|
4
|
+
var parts = anatomy.build();
|
|
5
|
+
|
|
6
|
+
// src/avatar.dom.ts
|
|
7
|
+
import { createScope } from "@zag-js/dom-query";
|
|
8
|
+
var dom = createScope({
|
|
9
|
+
getRootId: (ctx) => ctx.ids?.root ?? `avatar:${ctx.id}`,
|
|
10
|
+
getImageId: (ctx) => ctx.ids?.image ?? `avatar:${ctx.id}:image`,
|
|
11
|
+
getFallbackId: (ctx) => ctx.ids?.fallback ?? `avatar:${ctx.id}:fallback`,
|
|
12
|
+
getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
|
|
13
|
+
getImageEl: (ctx) => dom.getById(ctx, dom.getImageId(ctx))
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
// src/avatar.connect.ts
|
|
17
|
+
function connect(state, send, normalize) {
|
|
18
|
+
const loaded = state.matches("loaded");
|
|
19
|
+
return {
|
|
20
|
+
loaded,
|
|
21
|
+
setSrc(src) {
|
|
22
|
+
send({ type: "SRC.SET", src });
|
|
23
|
+
},
|
|
24
|
+
setLoaded() {
|
|
25
|
+
send({ type: "IMG.LOADED", src: "api" });
|
|
26
|
+
},
|
|
27
|
+
setError() {
|
|
28
|
+
send({ type: "IMG.ERROR", src: "api" });
|
|
29
|
+
},
|
|
30
|
+
getRootProps() {
|
|
31
|
+
return normalize.element({
|
|
32
|
+
...parts.root.attrs,
|
|
33
|
+
dir: state.context.dir,
|
|
34
|
+
id: dom.getRootId(state.context)
|
|
35
|
+
});
|
|
36
|
+
},
|
|
37
|
+
getImageProps() {
|
|
38
|
+
return normalize.img({
|
|
39
|
+
...parts.image.attrs,
|
|
40
|
+
hidden: !loaded,
|
|
41
|
+
dir: state.context.dir,
|
|
42
|
+
id: dom.getImageId(state.context),
|
|
43
|
+
"data-state": loaded ? "visible" : "hidden",
|
|
44
|
+
onLoad() {
|
|
45
|
+
send({ type: "IMG.LOADED", src: "element" });
|
|
46
|
+
},
|
|
47
|
+
onError() {
|
|
48
|
+
send({ type: "IMG.ERROR", src: "element" });
|
|
49
|
+
}
|
|
50
|
+
});
|
|
51
|
+
},
|
|
52
|
+
getFallbackProps() {
|
|
53
|
+
return normalize.element({
|
|
54
|
+
...parts.fallback.attrs,
|
|
55
|
+
dir: state.context.dir,
|
|
56
|
+
id: dom.getFallbackId(state.context),
|
|
57
|
+
hidden: loaded,
|
|
58
|
+
"data-state": loaded ? "hidden" : "visible"
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
// src/avatar.machine.ts
|
|
65
|
+
import { createMachine } from "@zag-js/core";
|
|
66
|
+
import { observeAttributes, observeChildren } from "@zag-js/dom-query";
|
|
67
|
+
import { compact } from "@zag-js/utils";
|
|
68
|
+
function machine(userContext) {
|
|
69
|
+
const ctx = compact(userContext);
|
|
70
|
+
return createMachine(
|
|
71
|
+
{
|
|
72
|
+
id: "avatar",
|
|
73
|
+
initial: "loading",
|
|
74
|
+
activities: ["trackImageRemoval"],
|
|
75
|
+
context: ctx,
|
|
76
|
+
on: {
|
|
77
|
+
"SRC.CHANGE": {
|
|
78
|
+
target: "loading"
|
|
79
|
+
},
|
|
80
|
+
"IMG.UNMOUNT": {
|
|
81
|
+
target: "error"
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
states: {
|
|
85
|
+
loading: {
|
|
86
|
+
activities: ["trackSrcChange"],
|
|
87
|
+
entry: ["checkImageStatus"],
|
|
88
|
+
on: {
|
|
89
|
+
"IMG.LOADED": {
|
|
90
|
+
target: "loaded",
|
|
91
|
+
actions: ["invokeOnLoad"]
|
|
92
|
+
},
|
|
93
|
+
"IMG.ERROR": {
|
|
94
|
+
target: "error",
|
|
95
|
+
actions: ["invokeOnError"]
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
error: {
|
|
100
|
+
activities: ["trackSrcChange"],
|
|
101
|
+
on: {
|
|
102
|
+
"IMG.LOADED": {
|
|
103
|
+
target: "loaded",
|
|
104
|
+
actions: ["invokeOnLoad"]
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
loaded: {
|
|
109
|
+
activities: ["trackSrcChange"],
|
|
110
|
+
on: {
|
|
111
|
+
"IMG.ERROR": {
|
|
112
|
+
target: "error",
|
|
113
|
+
actions: ["invokeOnError"]
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
activities: {
|
|
121
|
+
trackSrcChange(ctx2, _evt, { send }) {
|
|
122
|
+
const imageEl = dom.getImageEl(ctx2);
|
|
123
|
+
return observeAttributes(imageEl, {
|
|
124
|
+
attributes: ["src", "srcset"],
|
|
125
|
+
callback() {
|
|
126
|
+
send({ type: "SRC.CHANGE" });
|
|
127
|
+
}
|
|
128
|
+
});
|
|
129
|
+
},
|
|
130
|
+
trackImageRemoval(ctx2, _evt, { send }) {
|
|
131
|
+
const rootEl = dom.getRootEl(ctx2);
|
|
132
|
+
return observeChildren(rootEl, {
|
|
133
|
+
callback(records) {
|
|
134
|
+
const removedNodes = Array.from(records[0].removedNodes);
|
|
135
|
+
const removed = removedNodes.find((node) => node.matches("[data-scope=avatar][data-part=image]"));
|
|
136
|
+
if (removed) {
|
|
137
|
+
send({ type: "IMG.UNMOUNT" });
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
});
|
|
141
|
+
}
|
|
142
|
+
},
|
|
143
|
+
actions: {
|
|
144
|
+
invokeOnLoad(ctx2) {
|
|
145
|
+
ctx2.onStatusChange?.({ status: "loaded" });
|
|
146
|
+
},
|
|
147
|
+
invokeOnError(ctx2) {
|
|
148
|
+
ctx2.onStatusChange?.({ status: "error" });
|
|
149
|
+
},
|
|
150
|
+
checkImageStatus(ctx2, _evt, { send }) {
|
|
151
|
+
const imageEl = dom.getImageEl(ctx2);
|
|
152
|
+
if (imageEl?.complete) {
|
|
153
|
+
const type = hasLoaded(imageEl) ? "IMG.LOADED" : "IMG.ERROR";
|
|
154
|
+
send({ type, src: "ssr" });
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
);
|
|
160
|
+
}
|
|
161
|
+
function hasLoaded(image) {
|
|
162
|
+
return image.complete && image.naturalWidth !== 0 && image.naturalHeight !== 0;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
// src/avatar.props.ts
|
|
166
|
+
import { createProps } from "@zag-js/types";
|
|
167
|
+
import { createSplitProps } from "@zag-js/utils";
|
|
168
|
+
var props = createProps()(["dir", "id", "ids", "onStatusChange", "getRootNode"]);
|
|
169
|
+
var splitProps = createSplitProps(props);
|
|
170
|
+
export {
|
|
171
|
+
anatomy,
|
|
172
|
+
connect,
|
|
173
|
+
machine,
|
|
174
|
+
props,
|
|
175
|
+
splitProps
|
|
176
|
+
};
|
|
2
177
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/avatar.anatomy.ts","../src/avatar.dom.ts","../src/avatar.connect.ts","../src/avatar.machine.ts","../src/avatar.props.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) => ctx.ids?.root ?? `avatar:${ctx.id}`,\n getImageId: (ctx: Ctx) => ctx.ids?.image ?? `avatar:${ctx.id}:image`,\n getFallbackId: (ctx: Ctx) => ctx.ids?.fallback ?? `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 { MachineApi, Send, State } from \"./avatar.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const loaded = state.matches(\"loaded\")\n return {\n loaded,\n setSrc(src) {\n send({ type: \"SRC.SET\", src })\n },\n setLoaded() {\n send({ type: \"IMG.LOADED\", src: \"api\" })\n },\n setError() {\n send({ type: \"IMG.ERROR\", src: \"api\" })\n },\n\n
|
|
1
|
+
{"version":3,"sources":["../src/avatar.anatomy.ts","../src/avatar.dom.ts","../src/avatar.connect.ts","../src/avatar.machine.ts","../src/avatar.props.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) => ctx.ids?.root ?? `avatar:${ctx.id}`,\n getImageId: (ctx: Ctx) => ctx.ids?.image ?? `avatar:${ctx.id}:image`,\n getFallbackId: (ctx: Ctx) => ctx.ids?.fallback ?? `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 { MachineApi, Send, State } from \"./avatar.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const loaded = state.matches(\"loaded\")\n return {\n loaded,\n setSrc(src) {\n send({ type: \"SRC.SET\", src })\n },\n setLoaded() {\n send({ type: \"IMG.LOADED\", src: \"api\" })\n },\n setError() {\n send({ type: \"IMG.ERROR\", src: \"api\" })\n },\n\n getRootProps() {\n return normalize.element({\n ...parts.root.attrs,\n dir: state.context.dir,\n id: dom.getRootId(state.context),\n })\n },\n\n getImageProps() {\n return normalize.img({\n ...parts.image.attrs,\n hidden: !loaded,\n dir: state.context.dir,\n id: dom.getImageId(state.context),\n \"data-state\": loaded ? \"visible\" : \"hidden\",\n onLoad() {\n send({ type: \"IMG.LOADED\", src: \"element\" })\n },\n onError() {\n send({ type: \"IMG.ERROR\", src: \"element\" })\n },\n })\n },\n\n getFallbackProps() {\n return normalize.element({\n ...parts.fallback.attrs,\n dir: state.context.dir,\n id: dom.getFallbackId(state.context),\n hidden: loaded,\n \"data-state\": loaded ? \"hidden\" : \"visible\",\n })\n },\n }\n}\n","import { createMachine } from \"@zag-js/core\"\nimport { observeAttributes, observeChildren } from \"@zag-js/dom-query\"\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: [\"checkImageStatus\"],\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 imageEl = dom.getImageEl(ctx)\n return observeAttributes(imageEl, {\n attributes: [\"src\", \"srcset\"],\n callback() {\n send({ type: \"SRC.CHANGE\" })\n },\n })\n },\n trackImageRemoval(ctx, _evt, { send }) {\n const rootEl = dom.getRootEl(ctx)\n return observeChildren(rootEl, {\n callback(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 },\n actions: {\n invokeOnLoad(ctx) {\n ctx.onStatusChange?.({ status: \"loaded\" })\n },\n invokeOnError(ctx) {\n ctx.onStatusChange?.({ status: \"error\" })\n },\n checkImageStatus(ctx, _evt, { send }) {\n const imageEl = dom.getImageEl(ctx)\n if (imageEl?.complete) {\n const type = hasLoaded(imageEl) ? \"IMG.LOADED\" : \"IMG.ERROR\"\n send({ type, src: \"ssr\" })\n }\n },\n },\n },\n )\n}\n\nfunction hasLoaded(image: HTMLImageElement) {\n return image.complete && image.naturalWidth !== 0 && image.naturalHeight !== 0\n}\n","import { createProps } from \"@zag-js/types\"\nimport { createSplitProps } from \"@zag-js/utils\"\nimport type { UserDefinedContext } from \"./avatar.types\"\n\nexport const props = createProps<UserDefinedContext>()([\"dir\", \"id\", \"ids\", \"onStatusChange\", \"getRootNode\"])\nexport const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)\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.55.0",
|
|
4
4
|
"description": "Core logic for the avatar widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -28,11 +28,11 @@
|
|
|
28
28
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@zag-js/anatomy": "0.
|
|
32
|
-
"@zag-js/core": "0.
|
|
33
|
-
"@zag-js/dom-query": "0.
|
|
34
|
-
"@zag-js/utils": "0.
|
|
35
|
-
"@zag-js/types": "0.
|
|
31
|
+
"@zag-js/anatomy": "0.55.0",
|
|
32
|
+
"@zag-js/core": "0.55.0",
|
|
33
|
+
"@zag-js/dom-query": "0.55.0",
|
|
34
|
+
"@zag-js/utils": "0.55.0",
|
|
35
|
+
"@zag-js/types": "0.55.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"clean-package": "2.2.0"
|
package/src/avatar.connect.ts
CHANGED
|
@@ -17,32 +17,38 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
|
|
|
17
17
|
send({ type: "IMG.ERROR", src: "api" })
|
|
18
18
|
},
|
|
19
19
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
getRootProps() {
|
|
21
|
+
return normalize.element({
|
|
22
|
+
...parts.root.attrs,
|
|
23
|
+
dir: state.context.dir,
|
|
24
|
+
id: dom.getRootId(state.context),
|
|
25
|
+
})
|
|
26
|
+
},
|
|
25
27
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
28
|
+
getImageProps() {
|
|
29
|
+
return normalize.img({
|
|
30
|
+
...parts.image.attrs,
|
|
31
|
+
hidden: !loaded,
|
|
32
|
+
dir: state.context.dir,
|
|
33
|
+
id: dom.getImageId(state.context),
|
|
34
|
+
"data-state": loaded ? "visible" : "hidden",
|
|
35
|
+
onLoad() {
|
|
36
|
+
send({ type: "IMG.LOADED", src: "element" })
|
|
37
|
+
},
|
|
38
|
+
onError() {
|
|
39
|
+
send({ type: "IMG.ERROR", src: "element" })
|
|
40
|
+
},
|
|
41
|
+
})
|
|
42
|
+
},
|
|
39
43
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
44
|
+
getFallbackProps() {
|
|
45
|
+
return normalize.element({
|
|
46
|
+
...parts.fallback.attrs,
|
|
47
|
+
dir: state.context.dir,
|
|
48
|
+
id: dom.getFallbackId(state.context),
|
|
49
|
+
hidden: loaded,
|
|
50
|
+
"data-state": loaded ? "hidden" : "visible",
|
|
51
|
+
})
|
|
52
|
+
},
|
|
47
53
|
}
|
|
48
54
|
}
|
package/src/avatar.types.ts
CHANGED
|
@@ -70,7 +70,7 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
|
|
|
70
70
|
*/
|
|
71
71
|
setError(): void
|
|
72
72
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
73
|
+
getRootProps(): T["element"]
|
|
74
|
+
getImageProps(): T["img"]
|
|
75
|
+
getFallbackProps(): T["element"]
|
|
76
76
|
}
|