@destyler/qr-code 0.0.7-beta.7 → 0.1.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.
Files changed (7) hide show
  1. package/dist/index.d.ts +82 -56
  2. package/dist/index.js +163 -0
  3. package/package.json +12 -16
  4. package/dist/index.cjs +0 -121
  5. package/dist/index.d.cts +0 -71
  6. package/dist/index.d.mts +0 -71
  7. package/dist/index.mjs +0 -115
package/dist/index.d.ts CHANGED
@@ -1,71 +1,97 @@
1
- import * as _zag_js_anatomy from '@zag-js/anatomy';
2
- import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
3
- import * as _zag_js_core from '@zag-js/core';
4
- import { StateMachine } from '@zag-js/core';
5
- import { DataUrlType } from '@zag-js/dom-query';
6
- import { QrCodeGenerateOptions, QrCodeGenerateResult } from 'uqr';
7
-
8
- declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "frame" | "pattern" | "overlay">;
1
+ import * as _destyler_anatomy0 from "@destyler/anatomy";
2
+ import { DataUrlType } from "@destyler/dom";
3
+ import * as _destyler_xstate0 from "@destyler/xstate";
4
+ import { AnyEventObject, XSend, XState } from "@destyler/xstate";
5
+ import { QrCodeGenerateOptions, QrCodeGenerateResult } from "uqr";
6
+ import { CommonProperties, DirectionProperty, NormalizeProps, PropTypes, RequiredBy } from "@destyler/types";
9
7
 
8
+ //#region src/anatomy.d.ts
9
+ declare const anatomy: _destyler_anatomy0.AnatomyInstance<"root" | "frame" | "pattern" | "overlay" | "downloadTrigger">;
10
+ //#endregion
11
+ //#region src/types.d.ts
10
12
  type ElementIds = Partial<{
11
- root: string;
12
- frame: string;
13
+ root: string;
14
+ frame: string;
13
15
  }>;
16
+ interface ValueChangeDetails {
17
+ value: string;
18
+ }
14
19
  interface PublicContext extends DirectionProperty, CommonProperties {
15
- /**
16
- * The value to encode.
17
- */
18
- value: string;
19
- /**
20
- * The element ids.
21
- */
22
- ids?: ElementIds | undefined;
23
- /**
24
- * The qr code encoding options.
25
- */
26
- encoding?: QrCodeGenerateOptions | undefined;
20
+ /**
21
+ * The value to encode.
22
+ */
23
+ value: string;
24
+ /**
25
+ * The element ids.
26
+ */
27
+ ids?: ElementIds | undefined;
28
+ /**
29
+ * The qr code encoding options.
30
+ */
31
+ encoding?: QrCodeGenerateOptions | undefined;
32
+ /**
33
+ * Callback fired when the value changes.
34
+ */
35
+ onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
27
36
  }
28
37
  interface PrivateContext {
29
- /**
30
- * The pixel size of the qr code.
31
- */
32
- pixelSize: number;
38
+ /**
39
+ * The pixel size of the qr code.
40
+ */
41
+ pixelSize: number;
33
42
  }
34
43
  type ComputedContext = Readonly<{
35
- encoded: QrCodeGenerateResult;
44
+ encoded: QrCodeGenerateResult;
36
45
  }>;
37
46
  type UserDefinedContext = RequiredBy<PublicContext, 'id'>;
38
- interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
39
- }
47
+ interface MachineContext extends PublicContext, PrivateContext, ComputedContext {}
40
48
  interface MachineState {
41
- value: 'idle';
49
+ value: 'idle';
50
+ }
51
+ type State = XState<MachineContext, MachineState>;
52
+ type Send = XSend<AnyEventObject>;
53
+ interface DownloadTriggerProps {
54
+ /**
55
+ * The mime type of the image.
56
+ */
57
+ mimeType: DataUrlType;
58
+ /**
59
+ * The quality of the image.
60
+ */
61
+ quality?: number;
62
+ /**
63
+ * The name of the file.
64
+ */
65
+ fileName: string;
42
66
  }
43
- type State = StateMachine.State<MachineContext, MachineState>;
44
- type Send = StateMachine.Send<StateMachine.AnyEventObject>;
45
67
  interface MachineApi<T extends PropTypes = PropTypes> {
46
- /**
47
- * The value to encode.
48
- */
49
- value: string;
50
- /**
51
- * Set the value to encode.
52
- */
53
- setValue: (value: string) => void;
54
- /**
55
- * Returns the data URL of the qr code.
56
- */
57
- getDataUrl: (type: DataUrlType, quality?: number) => Promise<string>;
58
- getRootProps: () => T['element'];
59
- getFrameProps: () => T['svg'];
60
- getPatternProps: () => T['path'];
61
- getOverlayProps: () => T['element'];
68
+ /**
69
+ * The value to encode.
70
+ */
71
+ value: string;
72
+ /**
73
+ * Set the value to encode.
74
+ */
75
+ setValue: (value: string) => void;
76
+ /**
77
+ * Returns the data URL of the qr code.
78
+ */
79
+ getDataUrl: (type: DataUrlType, quality?: number) => Promise<string>;
80
+ getRootProps: () => T['element'];
81
+ getFrameProps: () => T['svg'];
82
+ getPatternProps: () => T['path'];
83
+ getOverlayProps: () => T['element'];
84
+ getDownloadTriggerProps: (props: DownloadTriggerProps) => T['button'];
62
85
  }
63
-
86
+ //#endregion
87
+ //#region src/connect.d.ts
64
88
  declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
65
-
66
- declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
67
-
68
- declare const props: ("value" | "ids" | "encoding" | "id" | "dir" | "getRootNode")[];
69
- declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "ids" | "encoding" | "id" | "dir" | "getRootNode">];
70
-
71
- export { type UserDefinedContext as Context, anatomy, connect, machine, props, splitProps };
89
+ //#endregion
90
+ //#region src/machine.d.ts
91
+ declare function machine(userContext: UserDefinedContext): _destyler_xstate0.Machine<MachineContext, MachineState, _destyler_xstate0.AnyEventObject>;
92
+ //#endregion
93
+ //#region src/props.d.ts
94
+ declare const props: ("value" | "ids" | "encoding" | "onValueChange" | "dir" | "id" | "getRootNode")[];
95
+ declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "ids" | "encoding" | "onValueChange" | "dir" | "id" | "getRootNode">];
96
+ //#endregion
97
+ export { type UserDefinedContext as Context, anatomy, connect, machine, props, splitProps };
package/dist/index.js ADDED
@@ -0,0 +1,163 @@
1
+ import { createAnatomy } from "@destyler/anatomy";
2
+ import { createScope, getDataUrl } from "@destyler/dom";
3
+ import { compact, createSplitProps, isEqual } from "@destyler/utils";
4
+ import { createMachine } from "@destyler/xstate";
5
+ import { memoize } from "proxy-memoize";
6
+ import { encode } from "uqr";
7
+ import { createProps } from "@destyler/types";
8
+
9
+ //#region src/anatomy.ts
10
+ const anatomy = createAnatomy("qr-code").parts("root", "frame", "pattern", "overlay", "downloadTrigger");
11
+ const parts = anatomy.build();
12
+
13
+ //#endregion
14
+ //#region src/dom.ts
15
+ const dom = createScope({
16
+ getRootId: (ctx) => ctx.ids?.root ?? `qr-code:${ctx.id}:root`,
17
+ getFrameId: (ctx) => ctx.ids?.frame ?? `qr-code:${ctx.id}:frame`,
18
+ getFrameEl: (ctx) => dom.getById(ctx, dom.getFrameId(ctx))
19
+ });
20
+
21
+ //#endregion
22
+ //#region src/connect.ts
23
+ function connect(state, send, normalize) {
24
+ const encoded = state.context.encoded;
25
+ const pixelSize = state.context.pixelSize;
26
+ const height = encoded.size * pixelSize;
27
+ const width = encoded.size * pixelSize;
28
+ const paths = [];
29
+ for (let row = 0; row < encoded.size; row++) for (let col = 0; col < encoded.size; col++) {
30
+ const x = col * pixelSize;
31
+ const y = row * pixelSize;
32
+ if (encoded.data[row][col]) paths.push(`M${x},${y}h${pixelSize}v${pixelSize}h-${pixelSize}z`);
33
+ }
34
+ return {
35
+ value: state.context.value,
36
+ setValue(value) {
37
+ send({
38
+ type: "VALUE.SET",
39
+ value
40
+ });
41
+ },
42
+ getDataUrl(type, quality) {
43
+ const svgEl = dom.getFrameEl(state.context);
44
+ return getDataUrl(svgEl, {
45
+ type,
46
+ quality
47
+ });
48
+ },
49
+ getRootProps() {
50
+ return normalize.element({
51
+ id: dom.getRootId(state.context),
52
+ ...parts.root.attrs,
53
+ style: {
54
+ "--qrcode-pixel-size": `${pixelSize}px`,
55
+ "--qrcode-width": `${width}px`,
56
+ "--qrcode-height": `${height}px`,
57
+ "position": "relative"
58
+ }
59
+ });
60
+ },
61
+ getFrameProps() {
62
+ return normalize.svg({
63
+ id: dom.getFrameId(state.context),
64
+ ...parts.frame.attrs,
65
+ xmlns: "http://www.w3.org/2000/svg",
66
+ viewBox: `0 0 ${width} ${height}`
67
+ });
68
+ },
69
+ getPatternProps() {
70
+ return normalize.path({
71
+ d: paths.join(""),
72
+ ...parts.pattern.attrs
73
+ });
74
+ },
75
+ getOverlayProps() {
76
+ return normalize.element({
77
+ ...parts.overlay.attrs,
78
+ style: {
79
+ position: "absolute",
80
+ top: "50%",
81
+ left: "50%",
82
+ translate: "-50% -50%"
83
+ }
84
+ });
85
+ },
86
+ getDownloadTriggerProps(props$1) {
87
+ return normalize.button({
88
+ type: "button",
89
+ ...parts.downloadTrigger.attrs,
90
+ onClick(event) {
91
+ if (event.defaultPrevented) return;
92
+ send({
93
+ type: "DOWNLOAD_TRIGGER.CLICK",
94
+ ...props$1
95
+ });
96
+ }
97
+ });
98
+ }
99
+ };
100
+ }
101
+
102
+ //#endregion
103
+ //#region src/machine.ts
104
+ const set = { value(ctx, value) {
105
+ if (isEqual(ctx.value, value)) return;
106
+ ctx.value = value;
107
+ ctx.onValueChange?.({ value });
108
+ } };
109
+ function machine(userContext) {
110
+ const ctx = compact(userContext);
111
+ return createMachine({
112
+ id: "qr-code",
113
+ initial: "idle",
114
+ context: {
115
+ value: "",
116
+ ...ctx,
117
+ pixelSize: 10
118
+ },
119
+ computed: { encoded: memoize((ctx$1) => encode(ctx$1.value, ctx$1.encoding)) },
120
+ on: {
121
+ "VALUE.SET": { actions: ["setValue"] },
122
+ "DOWNLOAD_TRIGGER.CLICK": { actions: ["downloadQrCode"] }
123
+ }
124
+ }, { actions: {
125
+ setValue(ctx$1, evt) {
126
+ set.value(ctx$1, evt.value);
127
+ },
128
+ downloadQrCode(ctx$1, evt) {
129
+ const { mimeType, quality, fileName } = evt;
130
+ const svgEl = dom.getFrameEl(ctx$1);
131
+ const doc = dom.getDoc(ctx$1);
132
+ getDataUrl(svgEl, {
133
+ type: mimeType,
134
+ quality
135
+ }).then((dataUri) => {
136
+ const a = doc.createElement("a");
137
+ a.href = dataUri;
138
+ a.rel = "noopener";
139
+ a.download = fileName;
140
+ a.click();
141
+ setTimeout(() => {
142
+ a.remove();
143
+ }, 0);
144
+ });
145
+ }
146
+ } });
147
+ }
148
+
149
+ //#endregion
150
+ //#region src/props.ts
151
+ const props = createProps()([
152
+ "ids",
153
+ "value",
154
+ "id",
155
+ "encoding",
156
+ "dir",
157
+ "getRootNode",
158
+ "onValueChange"
159
+ ]);
160
+ const splitProps = createSplitProps(props);
161
+
162
+ //#endregion
163
+ export { anatomy, connect, machine, props, splitProps };
package/package.json CHANGED
@@ -1,37 +1,33 @@
1
1
  {
2
2
  "name": "@destyler/qr-code",
3
3
  "type": "module",
4
- "version": "0.0.7-beta.7",
4
+ "version": "0.1.0",
5
5
  "description": "a component that generates a QR code based on the provided data.",
6
6
  "author": "Elone Hoo <elonehoo@gmail.com>",
7
7
  "license": "MIT",
8
8
  "exports": {
9
- ".": {
10
- "types": "./dist/index.d.mts",
11
- "default": "./dist/index.mjs"
12
- },
13
- "./*": "./*"
9
+ ".": "./dist/index.js"
14
10
  },
15
- "main": "dist/index.cjs",
16
- "module": "dist/index.mjs",
11
+ "main": "dist/index.js",
12
+ "module": "dist/index.js",
17
13
  "types": "dist/index.d.ts",
18
14
  "files": [
19
15
  "*.d.ts",
20
16
  "dist"
21
17
  ],
22
18
  "dependencies": {
23
- "@zag-js/anatomy": "^0.82.1",
24
- "@zag-js/core": "^0.82.1",
25
- "@zag-js/dom-query": "^0.82.1",
26
- "@zag-js/types": "^0.82.1",
27
- "@zag-js/utils": "^0.82.1",
28
19
  "proxy-memoize": "^3.0.1",
29
- "uqr": "^0.1.2"
20
+ "uqr": "^0.1.2",
21
+ "@destyler/anatomy": "0.1.0",
22
+ "@destyler/xstate": "0.1.0",
23
+ "@destyler/dom": "0.1.0",
24
+ "@destyler/types": "0.1.0",
25
+ "@destyler/utils": "0.1.0"
30
26
  },
31
27
  "scripts": {
32
28
  "clear": "rimraf ./dist",
33
29
  "clear:node_modules": "rimraf ./node_modules",
34
- "build": "pnpm run clear && unbuild",
35
- "stub": "unbuild --stub"
30
+ "build": "pnpm run clear && tsdown",
31
+ "watch": "tsdown --watch"
36
32
  }
37
33
  }
package/dist/index.cjs DELETED
@@ -1,121 +0,0 @@
1
- 'use strict';
2
-
3
- const anatomy$1 = require('@zag-js/anatomy');
4
- const domQuery = require('@zag-js/dom-query');
5
- const core = require('@zag-js/core');
6
- const utils = require('@zag-js/utils');
7
- const proxyMemoize = require('proxy-memoize');
8
- const uqr = require('uqr');
9
- const types = require('@zag-js/types');
10
-
11
- const anatomy = anatomy$1.createAnatomy("qr-code").parts("root", "frame", "pattern", "overlay");
12
- const parts = anatomy.build();
13
-
14
- const dom = domQuery.createScope({
15
- getRootId: (ctx) => ctx.ids?.root ?? `qrcode:${ctx.id}:root`,
16
- getFrameId: (ctx) => ctx.ids?.frame ?? `qrcode:${ctx.id}:frame`,
17
- getFrameEl: (ctx) => dom.getById(ctx, dom.getFrameId(ctx))
18
- });
19
-
20
- function connect(state, send, normalize) {
21
- const encoded = state.context.encoded;
22
- const pixelSize = state.context.pixelSize;
23
- const height = encoded.size * pixelSize;
24
- const width = encoded.size * pixelSize;
25
- const paths = [];
26
- for (let row = 0; row < encoded.size; row++) {
27
- for (let col = 0; col < encoded.size; col++) {
28
- const x = col * pixelSize;
29
- const y = row * pixelSize;
30
- if (encoded.data[row][col]) {
31
- paths.push(`M${x},${y}h${pixelSize}v${pixelSize}h-${pixelSize}z`);
32
- }
33
- }
34
- }
35
- return {
36
- value: state.context.value,
37
- setValue(value) {
38
- send({ type: "VALUE.SET", value });
39
- },
40
- getDataUrl(type, quality) {
41
- const svgEl = dom.getFrameEl(state.context);
42
- return domQuery.getDataUrl(svgEl, { type, quality });
43
- },
44
- getRootProps() {
45
- return normalize.element({
46
- id: dom.getRootId(state.context),
47
- ...parts.root.attrs,
48
- style: {
49
- "--qrcode-pixel-size": `${pixelSize}px`,
50
- "--qrcode-width": `${width}px`,
51
- "--qrcode-height": `${height}px`,
52
- "position": "relative"
53
- }
54
- });
55
- },
56
- getFrameProps() {
57
- return normalize.svg({
58
- id: dom.getFrameId(state.context),
59
- ...parts.frame.attrs,
60
- xmlns: "http://www.w3.org/2000/svg",
61
- viewBox: `0 0 ${width} ${height}`
62
- });
63
- },
64
- getPatternProps() {
65
- return normalize.path({
66
- d: paths.join(""),
67
- ...parts.pattern.attrs
68
- });
69
- },
70
- getOverlayProps() {
71
- return normalize.element({
72
- ...parts.overlay.attrs,
73
- style: {
74
- position: "absolute",
75
- top: "50%",
76
- left: "50%",
77
- translate: "-50% -50%"
78
- }
79
- });
80
- }
81
- };
82
- }
83
-
84
- function machine(userContext) {
85
- const ctx = utils.compact(userContext);
86
- return core.createMachine(
87
- {
88
- id: "qr-code",
89
- initial: "idle",
90
- context: {
91
- value: "",
92
- ...ctx,
93
- pixelSize: 10
94
- },
95
- computed: {
96
- encoded: proxyMemoize.memoize((ctx2) => uqr.encode(ctx2.value, ctx2.encoding))
97
- },
98
- on: {
99
- "VALUE.SET": {
100
- actions: ["setValue"]
101
- }
102
- }
103
- },
104
- {
105
- actions: {
106
- setValue: (ctx2, e) => {
107
- ctx2.value = e.value;
108
- }
109
- }
110
- }
111
- );
112
- }
113
-
114
- const props = types.createProps()(["ids", "value", "id", "encoding", "dir", "getRootNode"]);
115
- const splitProps = utils.createSplitProps(props);
116
-
117
- exports.anatomy = anatomy;
118
- exports.connect = connect;
119
- exports.machine = machine;
120
- exports.props = props;
121
- exports.splitProps = splitProps;
package/dist/index.d.cts DELETED
@@ -1,71 +0,0 @@
1
- import * as _zag_js_anatomy from '@zag-js/anatomy';
2
- import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
3
- import * as _zag_js_core from '@zag-js/core';
4
- import { StateMachine } from '@zag-js/core';
5
- import { DataUrlType } from '@zag-js/dom-query';
6
- import { QrCodeGenerateOptions, QrCodeGenerateResult } from 'uqr';
7
-
8
- declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "frame" | "pattern" | "overlay">;
9
-
10
- type ElementIds = Partial<{
11
- root: string;
12
- frame: string;
13
- }>;
14
- interface PublicContext extends DirectionProperty, CommonProperties {
15
- /**
16
- * The value to encode.
17
- */
18
- value: string;
19
- /**
20
- * The element ids.
21
- */
22
- ids?: ElementIds | undefined;
23
- /**
24
- * The qr code encoding options.
25
- */
26
- encoding?: QrCodeGenerateOptions | undefined;
27
- }
28
- interface PrivateContext {
29
- /**
30
- * The pixel size of the qr code.
31
- */
32
- pixelSize: number;
33
- }
34
- type ComputedContext = Readonly<{
35
- encoded: QrCodeGenerateResult;
36
- }>;
37
- type UserDefinedContext = RequiredBy<PublicContext, 'id'>;
38
- interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
39
- }
40
- interface MachineState {
41
- value: 'idle';
42
- }
43
- type State = StateMachine.State<MachineContext, MachineState>;
44
- type Send = StateMachine.Send<StateMachine.AnyEventObject>;
45
- interface MachineApi<T extends PropTypes = PropTypes> {
46
- /**
47
- * The value to encode.
48
- */
49
- value: string;
50
- /**
51
- * Set the value to encode.
52
- */
53
- setValue: (value: string) => void;
54
- /**
55
- * Returns the data URL of the qr code.
56
- */
57
- getDataUrl: (type: DataUrlType, quality?: number) => Promise<string>;
58
- getRootProps: () => T['element'];
59
- getFrameProps: () => T['svg'];
60
- getPatternProps: () => T['path'];
61
- getOverlayProps: () => T['element'];
62
- }
63
-
64
- declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
65
-
66
- declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
67
-
68
- declare const props: ("value" | "ids" | "encoding" | "id" | "dir" | "getRootNode")[];
69
- declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "ids" | "encoding" | "id" | "dir" | "getRootNode">];
70
-
71
- export { type UserDefinedContext as Context, anatomy, connect, machine, props, splitProps };
package/dist/index.d.mts DELETED
@@ -1,71 +0,0 @@
1
- import * as _zag_js_anatomy from '@zag-js/anatomy';
2
- import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
3
- import * as _zag_js_core from '@zag-js/core';
4
- import { StateMachine } from '@zag-js/core';
5
- import { DataUrlType } from '@zag-js/dom-query';
6
- import { QrCodeGenerateOptions, QrCodeGenerateResult } from 'uqr';
7
-
8
- declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "frame" | "pattern" | "overlay">;
9
-
10
- type ElementIds = Partial<{
11
- root: string;
12
- frame: string;
13
- }>;
14
- interface PublicContext extends DirectionProperty, CommonProperties {
15
- /**
16
- * The value to encode.
17
- */
18
- value: string;
19
- /**
20
- * The element ids.
21
- */
22
- ids?: ElementIds | undefined;
23
- /**
24
- * The qr code encoding options.
25
- */
26
- encoding?: QrCodeGenerateOptions | undefined;
27
- }
28
- interface PrivateContext {
29
- /**
30
- * The pixel size of the qr code.
31
- */
32
- pixelSize: number;
33
- }
34
- type ComputedContext = Readonly<{
35
- encoded: QrCodeGenerateResult;
36
- }>;
37
- type UserDefinedContext = RequiredBy<PublicContext, 'id'>;
38
- interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
39
- }
40
- interface MachineState {
41
- value: 'idle';
42
- }
43
- type State = StateMachine.State<MachineContext, MachineState>;
44
- type Send = StateMachine.Send<StateMachine.AnyEventObject>;
45
- interface MachineApi<T extends PropTypes = PropTypes> {
46
- /**
47
- * The value to encode.
48
- */
49
- value: string;
50
- /**
51
- * Set the value to encode.
52
- */
53
- setValue: (value: string) => void;
54
- /**
55
- * Returns the data URL of the qr code.
56
- */
57
- getDataUrl: (type: DataUrlType, quality?: number) => Promise<string>;
58
- getRootProps: () => T['element'];
59
- getFrameProps: () => T['svg'];
60
- getPatternProps: () => T['path'];
61
- getOverlayProps: () => T['element'];
62
- }
63
-
64
- declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
65
-
66
- declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
67
-
68
- declare const props: ("value" | "ids" | "encoding" | "id" | "dir" | "getRootNode")[];
69
- declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "ids" | "encoding" | "id" | "dir" | "getRootNode">];
70
-
71
- export { type UserDefinedContext as Context, anatomy, connect, machine, props, splitProps };
package/dist/index.mjs DELETED
@@ -1,115 +0,0 @@
1
- import { createAnatomy } from '@zag-js/anatomy';
2
- import { createScope, getDataUrl } from '@zag-js/dom-query';
3
- import { createMachine } from '@zag-js/core';
4
- import { compact, createSplitProps } from '@zag-js/utils';
5
- import { memoize } from 'proxy-memoize';
6
- import { encode } from 'uqr';
7
- import { createProps } from '@zag-js/types';
8
-
9
- const anatomy = createAnatomy("qr-code").parts("root", "frame", "pattern", "overlay");
10
- const parts = anatomy.build();
11
-
12
- const dom = createScope({
13
- getRootId: (ctx) => ctx.ids?.root ?? `qrcode:${ctx.id}:root`,
14
- getFrameId: (ctx) => ctx.ids?.frame ?? `qrcode:${ctx.id}:frame`,
15
- getFrameEl: (ctx) => dom.getById(ctx, dom.getFrameId(ctx))
16
- });
17
-
18
- function connect(state, send, normalize) {
19
- const encoded = state.context.encoded;
20
- const pixelSize = state.context.pixelSize;
21
- const height = encoded.size * pixelSize;
22
- const width = encoded.size * pixelSize;
23
- const paths = [];
24
- for (let row = 0; row < encoded.size; row++) {
25
- for (let col = 0; col < encoded.size; col++) {
26
- const x = col * pixelSize;
27
- const y = row * pixelSize;
28
- if (encoded.data[row][col]) {
29
- paths.push(`M${x},${y}h${pixelSize}v${pixelSize}h-${pixelSize}z`);
30
- }
31
- }
32
- }
33
- return {
34
- value: state.context.value,
35
- setValue(value) {
36
- send({ type: "VALUE.SET", value });
37
- },
38
- getDataUrl(type, quality) {
39
- const svgEl = dom.getFrameEl(state.context);
40
- return getDataUrl(svgEl, { type, quality });
41
- },
42
- getRootProps() {
43
- return normalize.element({
44
- id: dom.getRootId(state.context),
45
- ...parts.root.attrs,
46
- style: {
47
- "--qrcode-pixel-size": `${pixelSize}px`,
48
- "--qrcode-width": `${width}px`,
49
- "--qrcode-height": `${height}px`,
50
- "position": "relative"
51
- }
52
- });
53
- },
54
- getFrameProps() {
55
- return normalize.svg({
56
- id: dom.getFrameId(state.context),
57
- ...parts.frame.attrs,
58
- xmlns: "http://www.w3.org/2000/svg",
59
- viewBox: `0 0 ${width} ${height}`
60
- });
61
- },
62
- getPatternProps() {
63
- return normalize.path({
64
- d: paths.join(""),
65
- ...parts.pattern.attrs
66
- });
67
- },
68
- getOverlayProps() {
69
- return normalize.element({
70
- ...parts.overlay.attrs,
71
- style: {
72
- position: "absolute",
73
- top: "50%",
74
- left: "50%",
75
- translate: "-50% -50%"
76
- }
77
- });
78
- }
79
- };
80
- }
81
-
82
- function machine(userContext) {
83
- const ctx = compact(userContext);
84
- return createMachine(
85
- {
86
- id: "qr-code",
87
- initial: "idle",
88
- context: {
89
- value: "",
90
- ...ctx,
91
- pixelSize: 10
92
- },
93
- computed: {
94
- encoded: memoize((ctx2) => encode(ctx2.value, ctx2.encoding))
95
- },
96
- on: {
97
- "VALUE.SET": {
98
- actions: ["setValue"]
99
- }
100
- }
101
- },
102
- {
103
- actions: {
104
- setValue: (ctx2, e) => {
105
- ctx2.value = e.value;
106
- }
107
- }
108
- }
109
- );
110
- }
111
-
112
- const props = createProps()(["ids", "value", "id", "encoding", "dir", "getRootNode"]);
113
- const splitProps = createSplitProps(props);
114
-
115
- export { anatomy, connect, machine, props, splitProps };