@zag-js/avatar 0.11.0 → 0.11.2
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 +1 -16
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -16
- package/dist/index.mjs.map +1 -1
- package/package.json +7 -7
- package/src/avatar.connect.ts +5 -18
- package/src/avatar.machine.ts +2 -2
- 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
|
@@ -49,29 +49,14 @@ function connect(state, send, normalize) {
|
|
|
49
49
|
const isLoaded = state.matches("loaded");
|
|
50
50
|
const showFallback = !isLoaded;
|
|
51
51
|
return {
|
|
52
|
-
/**
|
|
53
|
-
* Whether the image is loaded.
|
|
54
|
-
*/
|
|
55
52
|
isLoaded,
|
|
56
|
-
/**
|
|
57
|
-
* Whether the fallback is shown.
|
|
58
|
-
*/
|
|
59
53
|
showFallback,
|
|
60
|
-
/**
|
|
61
|
-
* Function to set new src.
|
|
62
|
-
*/
|
|
63
54
|
setSrc(src) {
|
|
64
55
|
send({ type: "SRC.SET", src });
|
|
65
56
|
},
|
|
66
|
-
/**
|
|
67
|
-
* Function to set loaded state.
|
|
68
|
-
*/
|
|
69
57
|
setLoaded() {
|
|
70
58
|
send({ type: "IMG.LOADED", src: "api" });
|
|
71
59
|
},
|
|
72
|
-
/**
|
|
73
|
-
* Function to set error state.
|
|
74
|
-
*/
|
|
75
60
|
setError() {
|
|
76
61
|
send({ type: "IMG.ERROR", src: "api" });
|
|
77
62
|
},
|
|
@@ -112,8 +97,8 @@ function connect(state, send, normalize) {
|
|
|
112
97
|
|
|
113
98
|
// src/avatar.machine.ts
|
|
114
99
|
var import_core = require("@zag-js/core");
|
|
115
|
-
var import_utils = require("@zag-js/utils");
|
|
116
100
|
var import_mutation_observer = require("@zag-js/mutation-observer");
|
|
101
|
+
var import_utils = require("@zag-js/utils");
|
|
117
102
|
function machine(userContext) {
|
|
118
103
|
const ctx = (0, import_utils.compact)(userContext);
|
|
119
104
|
return (0, import_core.createMachine)(
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/avatar.anatomy.ts","../src/avatar.connect.ts","../src/avatar.dom.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 } 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 { dataAttr } from \"@zag-js/dom-query\"\nimport { NormalizeProps,
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/avatar.anatomy.ts","../src/avatar.connect.ts","../src/avatar.dom.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 { dataAttr } from \"@zag-js/dom-query\"\nimport 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-loaded\": dataAttr(isLoaded),\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 style: {\n gridArea: \"1 / 1 / 2 / 2\",\n },\n }),\n }\n}\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 { 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 send({ type: \"IMG.LOADED\", src: \"ssr\" })\n }\n },\n },\n },\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,qBAA8B;AAEvB,IAAM,cAAU,8BAAc,QAAQ,EAAE,MAAM,QAAQ,SAAS,UAAU;AAEzE,IAAM,QAAQ,QAAQ,MAAM;;;ACJnC,IAAAA,oBAAyB;;;ACAzB,uBAA4B;AAGrB,IAAM,UAAM,8BAAY;AAAA,EAC7B,WAAW,CAAC,QAAa,UAAU,IAAI;AAAA,EACvC,YAAY,CAAC,QAAa,UAAU,IAAI;AAAA,EACxC,eAAe,CAAC,QAAa,UAAU,IAAI;AAAA,EAE3C,WAAW,CAAC,QAAa,IAAI,QAAQ,KAAK,IAAI,UAAU,GAAG,CAAC;AAAA,EAC5D,YAAY,CAAC,QAAa,IAAI,QAA0B,KAAK,IAAI,WAAW,GAAG,CAAC;AAClF,CAAC;;;ADJM,SAAS,QAA6B,OAAc,MAAY,WAA4C;AACjH,QAAM,WAAW,MAAM,QAAQ,QAAQ;AACvC,QAAM,eAAe,CAAC;AAEtB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,OAAO,KAAa;AAClB,WAAK,EAAE,MAAM,WAAW,IAAI,CAAC;AAAA,IAC/B;AAAA,IAEA,YAAY;AACV,WAAK,EAAE,MAAM,cAAc,KAAK,MAAM,CAAC;AAAA,IACzC;AAAA,IAEA,WAAW;AACT,WAAK,EAAE,MAAM,aAAa,KAAK,MAAM,CAAC;AAAA,IACxC;AAAA,IAEA,WAAW,UAAU,QAAQ;AAAA,MAC3B,GAAG,MAAM,KAAK;AAAA,MACd,IAAI,IAAI,UAAU,MAAM,OAAO;AAAA,MAC/B,OAAO;AAAA,QACL,SAAS;AAAA,QACT,kBAAkB;AAAA,QAClB,UAAU;AAAA,MACZ;AAAA,IACF,CAAC;AAAA,IAED,YAAY,UAAU,IAAI;AAAA,MACxB,GAAG,MAAM,MAAM;AAAA,MACf,IAAI,IAAI,WAAW,MAAM,OAAO;AAAA,MAChC,mBAAe,4BAAS,QAAQ;AAAA,MAChC,SAAS;AACP,aAAK,EAAE,MAAM,cAAc,KAAK,UAAU,CAAC;AAAA,MAC7C;AAAA,MACA,UAAU;AACR,aAAK,EAAE,MAAM,aAAa,KAAK,UAAU,CAAC;AAAA,MAC5C;AAAA,MACA,OAAO;AAAA,QACL,UAAU;AAAA,QACV,YAAY,CAAC,WAAW,WAAW;AAAA,MACrC;AAAA,IACF,CAAC;AAAA,IAED,eAAe,UAAU,QAAQ;AAAA,MAC/B,GAAG,MAAM,SAAS;AAAA,MAClB,IAAI,IAAI,cAAc,MAAM,OAAO;AAAA,MACnC,QAAQ,CAAC;AAAA,MACT,OAAO;AAAA,QACL,UAAU;AAAA,MACZ;AAAA,IACF,CAAC;AAAA,EACH;AACF;;;AE5DA,kBAA8B;AAC9B,+BAAmD;AACnD,mBAAwB;AAIjB,SAAS,QAAQ,aAAiC;AACvD,QAAM,UAAM,sBAAQ,WAAW;AAC/B,aAAO;AAAA,IACL;AAAA,MACE,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,YAAY,CAAC,mBAAmB;AAAA,MAEhC,SAAS;AAAA,MAET,IAAI;AAAA,QACF,cAAc;AAAA,UACZ,QAAQ;AAAA,QACV;AAAA,QACA,eAAe;AAAA,UACb,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,MAEA,QAAQ;AAAA,QACN,SAAS;AAAA,UACP,YAAY,CAAC,gBAAgB;AAAA,UAC7B,OAAO,CAAC,gBAAgB;AAAA,UACxB,IAAI;AAAA,YACF,cAAc;AAAA,cACZ,QAAQ;AAAA,cACR,SAAS,CAAC,cAAc;AAAA,YAC1B;AAAA,YACA,aAAa;AAAA,cACX,QAAQ;AAAA,cACR,SAAS,CAAC,eAAe;AAAA,YAC3B;AAAA,UACF;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL,YAAY,CAAC,gBAAgB;AAAA,UAC7B,IAAI;AAAA,YACF,cAAc;AAAA,cACZ,QAAQ;AAAA,cACR,SAAS,CAAC,cAAc;AAAA,YAC1B;AAAA,UACF;AAAA,QACF;AAAA,QACA,QAAQ;AAAA,UACN,YAAY,CAAC,gBAAgB;AAAA,UAC7B,IAAI;AAAA,YACF,aAAa;AAAA,cACX,QAAQ;AAAA,cACR,SAAS,CAAC,eAAe;AAAA,YAC3B;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE,YAAY;AAAA,QACV,eAAeC,MAAK,MAAM,EAAE,KAAK,GAAG;AAClC,gBAAM,MAAM,IAAI,WAAWA,IAAG;AAC9B,qBAAO,4CAAkB,KAAK,CAAC,OAAO,QAAQ,GAAG,MAAM;AACrD,iBAAK,EAAE,MAAM,aAAa,CAAC;AAAA,UAC7B,CAAC;AAAA,QACH;AAAA,QACA,kBAAkBA,MAAK,MAAM,EAAE,KAAK,GAAG;AACrC,gBAAM,SAAS,IAAI,UAAUA,IAAG;AAChC,qBAAO,0CAAgB,QAAQ,CAAC,YAAY;AAC1C,kBAAM,eAAe,MAAM,KAAK,QAAQ,CAAC,EAAE,YAAY;AACvD,kBAAM,UAAU,aAAa,KAAK,CAAC,SAAS,KAAK,QAAQ,sCAAsC,CAAC;AAChG,gBAAI,SAAS;AACX,mBAAK,EAAE,MAAM,cAAc,CAAC;AAAA,YAC9B;AAAA,UACF,CAAC;AAAA,QACH;AAAA,MACF;AAAA,MACA,SAAS;AAAA,QACP,aAAaA,MAAK;AAChB,UAAAA,KAAI,SAAS;AAAA,QACf;AAAA,QACA,cAAcA,MAAK;AACjB,UAAAA,KAAI,UAAU;AAAA,QAChB;AAAA,QACA,eAAeA,MAAK,MAAM,EAAE,KAAK,GAAG;AAClC,gBAAM,MAAM,IAAI,WAAWA,IAAG;AAC9B,cAAI,KAAK,UAAU;AACjB,iBAAK,EAAE,MAAM,cAAc,KAAK,MAAM,CAAC;AAAA,UACzC;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;","names":["import_dom_query","ctx"]}
|
package/dist/index.mjs
CHANGED
|
@@ -21,29 +21,14 @@ function connect(state, send, normalize) {
|
|
|
21
21
|
const isLoaded = state.matches("loaded");
|
|
22
22
|
const showFallback = !isLoaded;
|
|
23
23
|
return {
|
|
24
|
-
/**
|
|
25
|
-
* Whether the image is loaded.
|
|
26
|
-
*/
|
|
27
24
|
isLoaded,
|
|
28
|
-
/**
|
|
29
|
-
* Whether the fallback is shown.
|
|
30
|
-
*/
|
|
31
25
|
showFallback,
|
|
32
|
-
/**
|
|
33
|
-
* Function to set new src.
|
|
34
|
-
*/
|
|
35
26
|
setSrc(src) {
|
|
36
27
|
send({ type: "SRC.SET", src });
|
|
37
28
|
},
|
|
38
|
-
/**
|
|
39
|
-
* Function to set loaded state.
|
|
40
|
-
*/
|
|
41
29
|
setLoaded() {
|
|
42
30
|
send({ type: "IMG.LOADED", src: "api" });
|
|
43
31
|
},
|
|
44
|
-
/**
|
|
45
|
-
* Function to set error state.
|
|
46
|
-
*/
|
|
47
32
|
setError() {
|
|
48
33
|
send({ type: "IMG.ERROR", src: "api" });
|
|
49
34
|
},
|
|
@@ -84,8 +69,8 @@ function connect(state, send, normalize) {
|
|
|
84
69
|
|
|
85
70
|
// src/avatar.machine.ts
|
|
86
71
|
import { createMachine } from "@zag-js/core";
|
|
87
|
-
import { compact } from "@zag-js/utils";
|
|
88
72
|
import { observeAttributes, observeChildren } from "@zag-js/mutation-observer";
|
|
73
|
+
import { compact } from "@zag-js/utils";
|
|
89
74
|
function machine(userContext) {
|
|
90
75
|
const ctx = compact(userContext);
|
|
91
76
|
return createMachine(
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/avatar.anatomy.ts","../src/avatar.connect.ts","../src/avatar.dom.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 { dataAttr } from \"@zag-js/dom-query\"\nimport { NormalizeProps,
|
|
1
|
+
{"version":3,"sources":["../src/avatar.anatomy.ts","../src/avatar.connect.ts","../src/avatar.dom.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 { dataAttr } from \"@zag-js/dom-query\"\nimport 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-loaded\": dataAttr(isLoaded),\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 style: {\n gridArea: \"1 / 1 / 2 / 2\",\n },\n }),\n }\n}\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 { 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 send({ type: \"IMG.LOADED\", 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.11.
|
|
3
|
+
"version": "0.11.2",
|
|
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.11.
|
|
32
|
-
"@zag-js/mutation-observer": "0.11.
|
|
33
|
-
"@zag-js/core": "0.11.
|
|
34
|
-
"@zag-js/dom-query": "0.11.
|
|
35
|
-
"@zag-js/utils": "0.11.
|
|
36
|
-
"@zag-js/types": "0.11.
|
|
31
|
+
"@zag-js/anatomy": "0.11.2",
|
|
32
|
+
"@zag-js/mutation-observer": "0.11.2",
|
|
33
|
+
"@zag-js/core": "0.11.2",
|
|
34
|
+
"@zag-js/dom-query": "0.11.2",
|
|
35
|
+
"@zag-js/utils": "0.11.2",
|
|
36
|
+
"@zag-js/types": "0.11.2"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"clean-package": "2.2.0"
|
package/src/avatar.connect.ts
CHANGED
|
@@ -1,37 +1,24 @@
|
|
|
1
1
|
import { dataAttr } from "@zag-js/dom-query"
|
|
2
|
-
import { NormalizeProps,
|
|
2
|
+
import type { NormalizeProps, PropTypes } from "@zag-js/types"
|
|
3
3
|
import { parts } from "./avatar.anatomy"
|
|
4
4
|
import { dom } from "./avatar.dom"
|
|
5
|
-
import { Send, State } from "./avatar.types"
|
|
5
|
+
import type { PublicApi, Send, State } from "./avatar.types"
|
|
6
6
|
|
|
7
|
-
export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>) {
|
|
7
|
+
export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T> {
|
|
8
8
|
const isLoaded = state.matches("loaded")
|
|
9
9
|
const showFallback = !isLoaded
|
|
10
10
|
|
|
11
11
|
return {
|
|
12
|
-
/**
|
|
13
|
-
* Whether the image is loaded.
|
|
14
|
-
*/
|
|
15
12
|
isLoaded,
|
|
16
|
-
/**
|
|
17
|
-
* Whether the fallback is shown.
|
|
18
|
-
*/
|
|
19
13
|
showFallback,
|
|
20
|
-
/**
|
|
21
|
-
* Function to set new src.
|
|
22
|
-
*/
|
|
23
14
|
setSrc(src: string) {
|
|
24
15
|
send({ type: "SRC.SET", src })
|
|
25
16
|
},
|
|
26
|
-
|
|
27
|
-
* Function to set loaded state.
|
|
28
|
-
*/
|
|
17
|
+
|
|
29
18
|
setLoaded() {
|
|
30
19
|
send({ type: "IMG.LOADED", src: "api" })
|
|
31
20
|
},
|
|
32
|
-
|
|
33
|
-
* Function to set error state.
|
|
34
|
-
*/
|
|
21
|
+
|
|
35
22
|
setError() {
|
|
36
23
|
send({ type: "IMG.ERROR", src: "api" })
|
|
37
24
|
},
|
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)
|
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"
|