@zag-js/avatar 0.19.0 → 0.20.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 +15 -9
- package/dist/index.d.ts +15 -9
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -2
- package/dist/index.mjs.map +1 -1
- package/package.json +7 -7
- package/src/avatar.machine.ts +2 -2
- package/src/avatar.types.ts +25 -6
package/dist/index.d.mts
CHANGED
|
@@ -5,20 +5,26 @@ import { StateMachine } from '@zag-js/core';
|
|
|
5
5
|
|
|
6
6
|
declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "image" | "fallback">;
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
interface StatusChangeDetails {
|
|
9
|
+
status: "loaded" | "error";
|
|
10
|
+
}
|
|
11
|
+
interface PublicContext extends CommonProperties {
|
|
12
|
+
/**
|
|
13
|
+
* Functional called when the image loading status changes.
|
|
14
|
+
*/
|
|
15
|
+
onLoadingStatusChange?: (details: StatusChangeDetails) => void;
|
|
16
|
+
}
|
|
12
17
|
type PrivateContext = Context<{}>;
|
|
13
18
|
type ComputedContext = Readonly<{}>;
|
|
14
19
|
type UserDefinedContext = RequiredBy<PublicContext, "id">;
|
|
15
|
-
|
|
16
|
-
|
|
20
|
+
interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
|
|
21
|
+
}
|
|
22
|
+
interface MachineState {
|
|
17
23
|
value: "loading" | "error" | "loaded";
|
|
18
|
-
}
|
|
24
|
+
}
|
|
19
25
|
type State = StateMachine.State<MachineContext, MachineState>;
|
|
20
26
|
type Send = StateMachine.Send<StateMachine.AnyEventObject>;
|
|
21
|
-
|
|
27
|
+
interface MachineApi<T extends PropTypes = PropTypes> {
|
|
22
28
|
/**
|
|
23
29
|
* Whether the image is loaded.
|
|
24
30
|
*/
|
|
@@ -42,7 +48,7 @@ type MachineApi<T extends PropTypes = PropTypes> = {
|
|
|
42
48
|
rootProps: T["element"];
|
|
43
49
|
imageProps: T["img"];
|
|
44
50
|
fallbackProps: T["element"];
|
|
45
|
-
}
|
|
51
|
+
}
|
|
46
52
|
|
|
47
53
|
declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
|
|
48
54
|
|
package/dist/index.d.ts
CHANGED
|
@@ -5,20 +5,26 @@ import { StateMachine } from '@zag-js/core';
|
|
|
5
5
|
|
|
6
6
|
declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "image" | "fallback">;
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
interface StatusChangeDetails {
|
|
9
|
+
status: "loaded" | "error";
|
|
10
|
+
}
|
|
11
|
+
interface PublicContext extends CommonProperties {
|
|
12
|
+
/**
|
|
13
|
+
* Functional called when the image loading status changes.
|
|
14
|
+
*/
|
|
15
|
+
onLoadingStatusChange?: (details: StatusChangeDetails) => void;
|
|
16
|
+
}
|
|
12
17
|
type PrivateContext = Context<{}>;
|
|
13
18
|
type ComputedContext = Readonly<{}>;
|
|
14
19
|
type UserDefinedContext = RequiredBy<PublicContext, "id">;
|
|
15
|
-
|
|
16
|
-
|
|
20
|
+
interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
|
|
21
|
+
}
|
|
22
|
+
interface MachineState {
|
|
17
23
|
value: "loading" | "error" | "loaded";
|
|
18
|
-
}
|
|
24
|
+
}
|
|
19
25
|
type State = StateMachine.State<MachineContext, MachineState>;
|
|
20
26
|
type Send = StateMachine.Send<StateMachine.AnyEventObject>;
|
|
21
|
-
|
|
27
|
+
interface MachineApi<T extends PropTypes = PropTypes> {
|
|
22
28
|
/**
|
|
23
29
|
* Whether the image is loaded.
|
|
24
30
|
*/
|
|
@@ -42,7 +48,7 @@ type MachineApi<T extends PropTypes = PropTypes> = {
|
|
|
42
48
|
rootProps: T["element"];
|
|
43
49
|
imageProps: T["img"];
|
|
44
50
|
fallbackProps: T["element"];
|
|
45
|
-
}
|
|
51
|
+
}
|
|
46
52
|
|
|
47
53
|
declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
|
|
48
54
|
|
package/dist/index.js
CHANGED
|
@@ -169,10 +169,10 @@ function machine(userContext) {
|
|
|
169
169
|
},
|
|
170
170
|
actions: {
|
|
171
171
|
invokeOnLoad(ctx2) {
|
|
172
|
-
ctx2.
|
|
172
|
+
ctx2.onLoadingStatusChange?.({ status: "loaded" });
|
|
173
173
|
},
|
|
174
174
|
invokeOnError(ctx2) {
|
|
175
|
-
ctx2.
|
|
175
|
+
ctx2.onLoadingStatusChange?.({ status: "error" });
|
|
176
176
|
},
|
|
177
177
|
checkImgStatus(ctx2, _evt, { send }) {
|
|
178
178
|
const img = dom.getImageEl(ctx2);
|
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"],"sourcesContent":["export { anatomy } from \"./avatar.anatomy\"\nexport { connect } from \"./avatar.connect\"\nexport { machine } from \"./avatar.machine\"\nexport type { UserDefinedContext as Context, MachineApi as Api } 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 { MachineApi, Send, State } from \"./avatar.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<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.
|
|
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, MachineApi as Api } 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 { MachineApi, Send, State } from \"./avatar.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<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.onLoadingStatusChange?.({ status: \"loaded\" })\n },\n invokeOnError(ctx) {\n ctx.onLoadingStatusChange?.({ status: \"error\" })\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
|
@@ -141,10 +141,10 @@ function machine(userContext) {
|
|
|
141
141
|
},
|
|
142
142
|
actions: {
|
|
143
143
|
invokeOnLoad(ctx2) {
|
|
144
|
-
ctx2.
|
|
144
|
+
ctx2.onLoadingStatusChange?.({ status: "loaded" });
|
|
145
145
|
},
|
|
146
146
|
invokeOnError(ctx2) {
|
|
147
|
-
ctx2.
|
|
147
|
+
ctx2.onLoadingStatusChange?.({ status: "error" });
|
|
148
148
|
},
|
|
149
149
|
checkImgStatus(ctx2, _evt, { send }) {
|
|
150
150
|
const img = dom.getImageEl(ctx2);
|
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"],"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 { MachineApi, Send, State } from \"./avatar.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<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.
|
|
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 { MachineApi, Send, State } from \"./avatar.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<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.onLoadingStatusChange?.({ status: \"loaded\" })\n },\n invokeOnError(ctx) {\n ctx.onLoadingStatusChange?.({ status: \"error\" })\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.20.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.20.0",
|
|
32
|
+
"@zag-js/mutation-observer": "0.20.0",
|
|
33
|
+
"@zag-js/core": "0.20.0",
|
|
34
|
+
"@zag-js/dom-query": "0.20.0",
|
|
35
|
+
"@zag-js/utils": "0.20.0",
|
|
36
|
+
"@zag-js/types": "0.20.0"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"clean-package": "2.2.0"
|
package/src/avatar.machine.ts
CHANGED
|
@@ -79,10 +79,10 @@ export function machine(userContext: UserDefinedContext) {
|
|
|
79
79
|
},
|
|
80
80
|
actions: {
|
|
81
81
|
invokeOnLoad(ctx) {
|
|
82
|
-
ctx.
|
|
82
|
+
ctx.onLoadingStatusChange?.({ status: "loaded" })
|
|
83
83
|
},
|
|
84
84
|
invokeOnError(ctx) {
|
|
85
|
-
ctx.
|
|
85
|
+
ctx.onLoadingStatusChange?.({ status: "error" })
|
|
86
86
|
},
|
|
87
87
|
checkImgStatus(ctx, _evt, { send }) {
|
|
88
88
|
const img = dom.getImageEl(ctx)
|
package/src/avatar.types.ts
CHANGED
|
@@ -1,9 +1,23 @@
|
|
|
1
1
|
import type { StateMachine as S } from "@zag-js/core"
|
|
2
2
|
import type { CommonProperties, Context, PropTypes, RequiredBy } from "@zag-js/types"
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
/* -----------------------------------------------------------------------------
|
|
5
|
+
* Callback details
|
|
6
|
+
* -----------------------------------------------------------------------------*/
|
|
7
|
+
|
|
8
|
+
export interface StatusChangeDetails {
|
|
9
|
+
status: "loaded" | "error"
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
/* -----------------------------------------------------------------------------
|
|
13
|
+
* Machine context
|
|
14
|
+
* -----------------------------------------------------------------------------*/
|
|
15
|
+
|
|
16
|
+
interface PublicContext extends CommonProperties {
|
|
17
|
+
/**
|
|
18
|
+
* Functional called when the image loading status changes.
|
|
19
|
+
*/
|
|
20
|
+
onLoadingStatusChange?: (details: StatusChangeDetails) => void
|
|
7
21
|
}
|
|
8
22
|
|
|
9
23
|
type PrivateContext = Context<{}>
|
|
@@ -12,9 +26,9 @@ type ComputedContext = Readonly<{}>
|
|
|
12
26
|
|
|
13
27
|
export type UserDefinedContext = RequiredBy<PublicContext, "id">
|
|
14
28
|
|
|
15
|
-
export
|
|
29
|
+
export interface MachineContext extends PublicContext, PrivateContext, ComputedContext {}
|
|
16
30
|
|
|
17
|
-
export
|
|
31
|
+
export interface MachineState {
|
|
18
32
|
value: "loading" | "error" | "loaded"
|
|
19
33
|
}
|
|
20
34
|
|
|
@@ -22,7 +36,11 @@ export type State = S.State<MachineContext, MachineState>
|
|
|
22
36
|
|
|
23
37
|
export type Send = S.Send<S.AnyEventObject>
|
|
24
38
|
|
|
25
|
-
|
|
39
|
+
/* -----------------------------------------------------------------------------
|
|
40
|
+
* Component API
|
|
41
|
+
* -----------------------------------------------------------------------------*/
|
|
42
|
+
|
|
43
|
+
export interface MachineApi<T extends PropTypes = PropTypes> {
|
|
26
44
|
/**
|
|
27
45
|
* Whether the image is loaded.
|
|
28
46
|
*/
|
|
@@ -43,6 +61,7 @@ export type MachineApi<T extends PropTypes = PropTypes> = {
|
|
|
43
61
|
* Function to set error state.
|
|
44
62
|
*/
|
|
45
63
|
setError(): void
|
|
64
|
+
|
|
46
65
|
rootProps: T["element"]
|
|
47
66
|
imageProps: T["img"]
|
|
48
67
|
fallbackProps: T["element"]
|