@zag-js/avatar 0.0.0-dev-20230713105642 → 0.0.0-dev-20230713124852
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 +0 -15
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +0 -15
- package/dist/index.mjs.map +1 -1
- package/package.json +7 -7
- package/src/avatar.connect.ts +4 -17
- 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
|
},
|
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 type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./avatar.anatomy\"\nimport { dom } from \"./avatar.dom\"\nimport type { Send, State } from \"./avatar.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>) {\n const isLoaded = state.matches(\"loaded\")\n const showFallback = !isLoaded\n\n return {\n
|
|
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":"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","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
|
},
|
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 type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./avatar.anatomy\"\nimport { dom } from \"./avatar.dom\"\nimport type { Send, State } from \"./avatar.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>) {\n const isLoaded = state.matches(\"loaded\")\n const showFallback = !isLoaded\n\n return {\n
|
|
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":";AAAA,SAAS,qBAAqB;AAEvB,IAAM,UAAU,cAAc,QAAQ,EAAE,MAAM,QAAQ,SAAS,UAAU;AAEzE,IAAM,QAAQ,QAAQ,MAAM;;;ACJnC,SAAS,gBAAgB;;;ACAzB,SAAS,mBAAmB;AAGrB,IAAM,MAAM,YAAY;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,eAAe,SAAS,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,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB,uBAAuB;AACnD,SAAS,eAAe;AAIjB,SAAS,QAAQ,aAAiC;AACvD,QAAM,MAAM,QAAQ,WAAW;AAC/B,SAAO;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,eAAeA,MAAK,MAAM,EAAE,KAAK,GAAG;AAClC,gBAAM,MAAM,IAAI,WAAWA,IAAG;AAC9B,iBAAO,kBAAkB,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,iBAAO,gBAAgB,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":["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-20230713124852",
|
|
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.0.0-dev-
|
|
32
|
-
"@zag-js/mutation-observer": "0.0.0-dev-
|
|
33
|
-
"@zag-js/core": "0.0.0-dev-
|
|
34
|
-
"@zag-js/dom-query": "0.0.0-dev-
|
|
35
|
-
"@zag-js/utils": "0.0.0-dev-
|
|
36
|
-
"@zag-js/types": "0.0.0-dev-
|
|
31
|
+
"@zag-js/anatomy": "0.0.0-dev-20230713124852",
|
|
32
|
+
"@zag-js/mutation-observer": "0.0.0-dev-20230713124852",
|
|
33
|
+
"@zag-js/core": "0.0.0-dev-20230713124852",
|
|
34
|
+
"@zag-js/dom-query": "0.0.0-dev-20230713124852",
|
|
35
|
+
"@zag-js/utils": "0.0.0-dev-20230713124852",
|
|
36
|
+
"@zag-js/types": "0.0.0-dev-20230713124852"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"clean-package": "2.2.0"
|
package/src/avatar.connect.ts
CHANGED
|
@@ -2,36 +2,23 @@ import { dataAttr } from "@zag-js/dom-query"
|
|
|
2
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 type { 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.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"
|