@zag-js/avatar 0.0.0-dev-20240420202821 → 0.0.0-dev-20240422161736
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 +4 -7
- package/dist/index.d.ts +4 -7
- package/dist/index.js +6 -8
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +6 -8
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -6
- package/src/avatar.connect.ts +6 -9
- package/src/avatar.types.ts +4 -6
- package/src/index.ts +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -5,8 +5,9 @@ import { StateMachine } from '@zag-js/core';
|
|
|
5
5
|
|
|
6
6
|
declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "image" | "fallback">;
|
|
7
7
|
|
|
8
|
+
type LoadStatus = "error" | "loaded";
|
|
8
9
|
interface StatusChangeDetails {
|
|
9
|
-
status:
|
|
10
|
+
status: LoadStatus;
|
|
10
11
|
}
|
|
11
12
|
interface PublicContext extends CommonProperties, DirectionProperty {
|
|
12
13
|
/**
|
|
@@ -29,11 +30,7 @@ interface MachineApi<T extends PropTypes = PropTypes> {
|
|
|
29
30
|
/**
|
|
30
31
|
* Whether the image is loaded.
|
|
31
32
|
*/
|
|
32
|
-
|
|
33
|
-
/**
|
|
34
|
-
* Whether the fallback is shown.
|
|
35
|
-
*/
|
|
36
|
-
showFallback: boolean;
|
|
33
|
+
loaded: boolean;
|
|
37
34
|
/**
|
|
38
35
|
* Function to set new src.
|
|
39
36
|
*/
|
|
@@ -58,4 +55,4 @@ declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<
|
|
|
58
55
|
declare const props: ("dir" | "id" | "onStatusChange" | "getRootNode")[];
|
|
59
56
|
declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "dir" | "id" | "onStatusChange" | "getRootNode">];
|
|
60
57
|
|
|
61
|
-
export { type MachineApi as Api, type UserDefinedContext as Context, type StatusChangeDetails, anatomy, connect, machine, props, splitProps };
|
|
58
|
+
export { type MachineApi as Api, type UserDefinedContext as Context, type LoadStatus, type StatusChangeDetails, anatomy, connect, machine, props, splitProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -5,8 +5,9 @@ import { StateMachine } from '@zag-js/core';
|
|
|
5
5
|
|
|
6
6
|
declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "image" | "fallback">;
|
|
7
7
|
|
|
8
|
+
type LoadStatus = "error" | "loaded";
|
|
8
9
|
interface StatusChangeDetails {
|
|
9
|
-
status:
|
|
10
|
+
status: LoadStatus;
|
|
10
11
|
}
|
|
11
12
|
interface PublicContext extends CommonProperties, DirectionProperty {
|
|
12
13
|
/**
|
|
@@ -29,11 +30,7 @@ interface MachineApi<T extends PropTypes = PropTypes> {
|
|
|
29
30
|
/**
|
|
30
31
|
* Whether the image is loaded.
|
|
31
32
|
*/
|
|
32
|
-
|
|
33
|
-
/**
|
|
34
|
-
* Whether the fallback is shown.
|
|
35
|
-
*/
|
|
36
|
-
showFallback: boolean;
|
|
33
|
+
loaded: boolean;
|
|
37
34
|
/**
|
|
38
35
|
* Function to set new src.
|
|
39
36
|
*/
|
|
@@ -58,4 +55,4 @@ declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<
|
|
|
58
55
|
declare const props: ("dir" | "id" | "onStatusChange" | "getRootNode")[];
|
|
59
56
|
declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "dir" | "id" | "onStatusChange" | "getRootNode">];
|
|
60
57
|
|
|
61
|
-
export { type MachineApi as Api, type UserDefinedContext as Context, type StatusChangeDetails, anatomy, connect, machine, props, splitProps };
|
|
58
|
+
export { type MachineApi as Api, type UserDefinedContext as Context, type LoadStatus, type StatusChangeDetails, anatomy, connect, machine, props, splitProps };
|
package/dist/index.js
CHANGED
|
@@ -45,11 +45,9 @@ var dom = (0, import_dom_query.createScope)({
|
|
|
45
45
|
|
|
46
46
|
// src/avatar.connect.ts
|
|
47
47
|
function connect(state, send, normalize) {
|
|
48
|
-
const
|
|
49
|
-
const showFallback = !isLoaded;
|
|
48
|
+
const loaded = state.matches("loaded");
|
|
50
49
|
return {
|
|
51
|
-
|
|
52
|
-
showFallback,
|
|
50
|
+
loaded,
|
|
53
51
|
setSrc(src) {
|
|
54
52
|
send({ type: "SRC.SET", src });
|
|
55
53
|
},
|
|
@@ -66,10 +64,10 @@ function connect(state, send, normalize) {
|
|
|
66
64
|
}),
|
|
67
65
|
imageProps: normalize.img({
|
|
68
66
|
...parts.image.attrs,
|
|
69
|
-
hidden: !
|
|
67
|
+
hidden: !loaded,
|
|
70
68
|
dir: state.context.dir,
|
|
71
69
|
id: dom.getImageId(state.context),
|
|
72
|
-
"data-state":
|
|
70
|
+
"data-state": loaded ? "visible" : "hidden",
|
|
73
71
|
onLoad() {
|
|
74
72
|
send({ type: "IMG.LOADED", src: "element" });
|
|
75
73
|
},
|
|
@@ -81,8 +79,8 @@ function connect(state, send, normalize) {
|
|
|
81
79
|
...parts.fallback.attrs,
|
|
82
80
|
dir: state.context.dir,
|
|
83
81
|
id: dom.getFallbackId(state.context),
|
|
84
|
-
hidden:
|
|
85
|
-
"data-state":
|
|
82
|
+
hidden: loaded,
|
|
83
|
+
"data-state": loaded ? "hidden" : "visible"
|
|
86
84
|
})
|
|
87
85
|
};
|
|
88
86
|
}
|
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 { MachineApi as Api, UserDefinedContext as Context, StatusChangeDetails } 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
|
|
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 { MachineApi as Api, UserDefinedContext as Context, StatusChangeDetails, LoadStatus } 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 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 rootProps: normalize.element({\n ...parts.root.attrs,\n dir: state.context.dir,\n id: dom.getRootId(state.context),\n }),\n\n imageProps: 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 fallbackProps: 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","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: [\"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 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 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","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\", \"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
|
@@ -15,11 +15,9 @@ var dom = createScope({
|
|
|
15
15
|
|
|
16
16
|
// src/avatar.connect.ts
|
|
17
17
|
function connect(state, send, normalize) {
|
|
18
|
-
const
|
|
19
|
-
const showFallback = !isLoaded;
|
|
18
|
+
const loaded = state.matches("loaded");
|
|
20
19
|
return {
|
|
21
|
-
|
|
22
|
-
showFallback,
|
|
20
|
+
loaded,
|
|
23
21
|
setSrc(src) {
|
|
24
22
|
send({ type: "SRC.SET", src });
|
|
25
23
|
},
|
|
@@ -36,10 +34,10 @@ function connect(state, send, normalize) {
|
|
|
36
34
|
}),
|
|
37
35
|
imageProps: normalize.img({
|
|
38
36
|
...parts.image.attrs,
|
|
39
|
-
hidden: !
|
|
37
|
+
hidden: !loaded,
|
|
40
38
|
dir: state.context.dir,
|
|
41
39
|
id: dom.getImageId(state.context),
|
|
42
|
-
"data-state":
|
|
40
|
+
"data-state": loaded ? "visible" : "hidden",
|
|
43
41
|
onLoad() {
|
|
44
42
|
send({ type: "IMG.LOADED", src: "element" });
|
|
45
43
|
},
|
|
@@ -51,8 +49,8 @@ function connect(state, send, normalize) {
|
|
|
51
49
|
...parts.fallback.attrs,
|
|
52
50
|
dir: state.context.dir,
|
|
53
51
|
id: dom.getFallbackId(state.context),
|
|
54
|
-
hidden:
|
|
55
|
-
"data-state":
|
|
52
|
+
hidden: loaded,
|
|
53
|
+
"data-state": loaded ? "hidden" : "visible"
|
|
56
54
|
})
|
|
57
55
|
};
|
|
58
56
|
}
|
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) => `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
|
|
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) => `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 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 rootProps: normalize.element({\n ...parts.root.attrs,\n dir: state.context.dir,\n id: dom.getRootId(state.context),\n }),\n\n imageProps: 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 fallbackProps: 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","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: [\"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 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 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","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\", \"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.0.0-dev-
|
|
3
|
+
"version": "0.0.0-dev-20240422161736",
|
|
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.0.0-dev-
|
|
32
|
-
"@zag-js/core": "0.0.0-dev-
|
|
33
|
-
"@zag-js/dom-query": "0.0.0-dev-
|
|
34
|
-
"@zag-js/utils": "0.0.0-dev-
|
|
35
|
-
"@zag-js/types": "0.0.0-dev-
|
|
31
|
+
"@zag-js/anatomy": "0.0.0-dev-20240422161736",
|
|
32
|
+
"@zag-js/core": "0.0.0-dev-20240422161736",
|
|
33
|
+
"@zag-js/dom-query": "0.0.0-dev-20240422161736",
|
|
34
|
+
"@zag-js/utils": "0.0.0-dev-20240422161736",
|
|
35
|
+
"@zag-js/types": "0.0.0-dev-20240422161736"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"clean-package": "2.2.0"
|
package/src/avatar.connect.ts
CHANGED
|
@@ -4,12 +4,9 @@ import { dom } from "./avatar.dom"
|
|
|
4
4
|
import type { MachineApi, Send, State } from "./avatar.types"
|
|
5
5
|
|
|
6
6
|
export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
|
|
7
|
-
const
|
|
8
|
-
const showFallback = !isLoaded
|
|
9
|
-
|
|
7
|
+
const loaded = state.matches("loaded")
|
|
10
8
|
return {
|
|
11
|
-
|
|
12
|
-
showFallback,
|
|
9
|
+
loaded,
|
|
13
10
|
setSrc(src) {
|
|
14
11
|
send({ type: "SRC.SET", src })
|
|
15
12
|
},
|
|
@@ -28,10 +25,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
|
|
|
28
25
|
|
|
29
26
|
imageProps: normalize.img({
|
|
30
27
|
...parts.image.attrs,
|
|
31
|
-
hidden: !
|
|
28
|
+
hidden: !loaded,
|
|
32
29
|
dir: state.context.dir,
|
|
33
30
|
id: dom.getImageId(state.context),
|
|
34
|
-
"data-state":
|
|
31
|
+
"data-state": loaded ? "visible" : "hidden",
|
|
35
32
|
onLoad() {
|
|
36
33
|
send({ type: "IMG.LOADED", src: "element" })
|
|
37
34
|
},
|
|
@@ -44,8 +41,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
|
|
|
44
41
|
...parts.fallback.attrs,
|
|
45
42
|
dir: state.context.dir,
|
|
46
43
|
id: dom.getFallbackId(state.context),
|
|
47
|
-
hidden:
|
|
48
|
-
"data-state":
|
|
44
|
+
hidden: loaded,
|
|
45
|
+
"data-state": loaded ? "hidden" : "visible",
|
|
49
46
|
}),
|
|
50
47
|
}
|
|
51
48
|
}
|
package/src/avatar.types.ts
CHANGED
|
@@ -5,8 +5,10 @@ import type { CommonProperties, DirectionProperty, PropTypes, RequiredBy } from
|
|
|
5
5
|
* Callback details
|
|
6
6
|
* -----------------------------------------------------------------------------*/
|
|
7
7
|
|
|
8
|
+
export type LoadStatus = "error" | "loaded"
|
|
9
|
+
|
|
8
10
|
export interface StatusChangeDetails {
|
|
9
|
-
status:
|
|
11
|
+
status: LoadStatus
|
|
10
12
|
}
|
|
11
13
|
|
|
12
14
|
/* -----------------------------------------------------------------------------
|
|
@@ -44,11 +46,7 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
|
|
|
44
46
|
/**
|
|
45
47
|
* Whether the image is loaded.
|
|
46
48
|
*/
|
|
47
|
-
|
|
48
|
-
/**
|
|
49
|
-
* Whether the fallback is shown.
|
|
50
|
-
*/
|
|
51
|
-
showFallback: boolean
|
|
49
|
+
loaded: boolean
|
|
52
50
|
/**
|
|
53
51
|
* Function to set new src.
|
|
54
52
|
*/
|
package/src/index.ts
CHANGED
|
@@ -2,4 +2,4 @@ export { anatomy } from "./avatar.anatomy"
|
|
|
2
2
|
export { connect } from "./avatar.connect"
|
|
3
3
|
export { machine } from "./avatar.machine"
|
|
4
4
|
export * from "./avatar.props"
|
|
5
|
-
export type { MachineApi as Api, UserDefinedContext as Context, StatusChangeDetails } from "./avatar.types"
|
|
5
|
+
export type { MachineApi as Api, UserDefinedContext as Context, StatusChangeDetails, LoadStatus } from "./avatar.types"
|