@zag-js/qr-code - npm Package Compare versions

Comparing version 0.0.0-dev-20240607195446 to 0.0.0-dev-20240607213716

dist/index.d.ts

@@ -5,8 +5,10 @@ import * as _zag_js_anatomy from '@zag-js/anatomy';
 import { StateMachine } from '@zag-js/core';
+import { DataUrlType } from '@zag-js/dom-query';
 import { QrCodeGenerateOptions, QrCodeGenerateResult } from 'uqr';
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "svg" | "path" | "image">;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "frame" | "pattern" | "overlay">;
 
 interface ElementIds {
     root?: string;
+    svg?: string;
 }
@@ -26,10 +28,9 @@ interface PublicContext extends DirectionProperty, CommonProperties {
     encoding?: QrCodeGenerateOptions;
+}
+interface PrivateContext {
     /**
      * The pixel size of the qr code.
-     * @default 10
      */
     pixelSize: number;
 }
-interface PrivateContext {
-}
 type ComputedContext = Readonly<{
@@ -55,22 +56,19 @@ encoded: QrCodeGenerateResult;
     setValue(value: string): void;
+    /**
+     * Returns the data URL of the qr code.
+     */
+    getDataUrl(type: DataUrlType, quality?: number): Promise<string>;
     getRootProps(): T["element"];
-    getSvgProps(): T["svg"];
-    getPathProps(): T["path"];
-    getImageProps(): T["img"];
+    getFrameProps(): T["svg"];
+    getPatternProps(): T["path"];
+    getOverlayProps(): T["element"];
 }
 
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
-    value: string;
-    setValue(value: string): void;
-    getRootProps(): T["element"];
-    getSvgProps(): T["svg"];
-    getPathProps(): T["path"];
-    getImageProps(): T["img"];
-};
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
 
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-declare const props: ("dir" | "id" | "value" | "getRootNode" | "ids" | "encoding" | "pixelSize")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "dir" | "id" | "value" | "getRootNode" | "ids" | "encoding" | "pixelSize">];
+declare const props: ("value" | "dir" | "id" | "getRootNode" | "ids" | "encoding")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "dir" | "id" | "getRootNode" | "ids" | "encoding">];
 
 export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, anatomy, connect, machine, props, splitProps };

dist/index.js

@@ -33,9 +33,14 @@ "use strict";
 var import_anatomy = require("@zag-js/anatomy");
-var anatomy = (0, import_anatomy.createAnatomy)("qr-code").parts("root", "svg", "path", "image");
+var anatomy = (0, import_anatomy.createAnatomy)("qr-code").parts("root", "frame", "pattern", "overlay");
 var parts = anatomy.build();
 
+// src/qr-code.connect.ts
+var import_dom_query2 = require("@zag-js/dom-query");
+
 // src/qr-code.dom.ts
 var import_dom_query = require("@zag-js/dom-query");
 var dom = (0, import_dom_query.createScope)({
-  getRootId: (ctx) => ctx.ids?.root ?? `qrcode:${ctx.id}:root`
+  getRootId: (ctx) => ctx.ids?.root ?? `qrcode:${ctx.id}:root`,
+  getFrameId: (ctx) => ctx.ids?.svg ?? `qrcode:${ctx.id}:svg`,
+  getFrameEl: (ctx) => dom.getById(ctx, dom.getFrameId(ctx))
 });
@@ -64,2 +69,6 @@
     },
+    getDataUrl(type, quality) {
+      const svgEl = dom.getFrameEl(state.context);
+      return (0, import_dom_query2.getDataUrl)(svgEl, { type, quality });
+    },
     getRootProps() {
@@ -77,5 +86,6 @@ return normalize.element({
     },
-    getSvgProps() {
+    getFrameProps() {
       return normalize.svg({
-        ...parts.svg.attrs,
+        id: dom.getFrameId(state.context),
+        ...parts.frame.attrs,
         xmlns: "http://www.w3.org/2000/svg",
@@ -85,12 +95,11 @@ viewBox: `0 0 ${width} ${height}`
     },
-    getPathProps() {
+    getPatternProps() {
       return normalize.path({
         d: paths.join(""),
-        ...parts.path.attrs
+        ...parts.pattern.attrs
       });
     },
-    getImageProps() {
-      return normalize.img({
-        ...parts.image.attrs,
-        alt: "qr code",
+    getOverlayProps() {
+      return normalize.element({
+        ...parts.overlay.attrs,
         style: {
@@ -120,4 +129,4 @@ position: "absolute",
         value: "",
-        pixelSize: 10,
-        ...ctx
+        ...ctx,
+        pixelSize: 10
       },
@@ -146,11 +155,3 @@ computed: {
 var import_utils2 = require("@zag-js/utils");
-var props = (0, import_types.createProps)()([
-  "ids",
-  "value",
-  "id",
-  "encoding",
-  "dir",
-  "getRootNode",
-  "pixelSize"
-]);
+var props = (0, import_types.createProps)()(["ids", "value", "id", "encoding", "dir", "getRootNode"]);
 var splitProps = (0, import_utils2.createSplitProps)(props);
@@ -157,0 +158,0 @@ // Annotate the CommonJS export names for ESM import in node:

package.json

 {
   "name": "@zag-js/qr-code",
-  "version": "0.0.0-dev-20240607195446",
+  "version": "0.0.0-dev-20240607213716",
   "description": "Core logic for the qr-code widget implemented as a state machine",
@@ -33,7 +33,7 @@ "keywords": [
     "uqr": "0.1.2",
-    "@zag-js/anatomy": "0.0.0-dev-20240607195446",
-    "@zag-js/core": "0.0.0-dev-20240607195446",
-    "@zag-js/dom-query": "0.0.0-dev-20240607195446",
-    "@zag-js/utils": "0.0.0-dev-20240607195446",
-    "@zag-js/types": "0.0.0-dev-20240607195446"
+    "@zag-js/anatomy": "0.0.0-dev-20240607213716",
+    "@zag-js/core": "0.0.0-dev-20240607213716",
+    "@zag-js/dom-query": "0.0.0-dev-20240607213716",
+    "@zag-js/utils": "0.0.0-dev-20240607213716",
+    "@zag-js/types": "0.0.0-dev-20240607213716"
   },
@@ -40,0 +40,0 @@ "devDependencies": {

src/qr-code.anatomy.ts

 import { createAnatomy } from "@zag-js/anatomy"
 
-export const anatomy = createAnatomy("qr-code").parts("root", "svg", "path", "image")
+export const anatomy = createAnatomy("qr-code").parts("root", "frame", "pattern", "overlay")
 
 export const parts = anatomy.build()

src/qr-code.connect.ts

@@ -0,7 +1,8 @@
+import { getDataUrl } from "@zag-js/dom-query"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { parts } from "./qr-code.anatomy"
 import { dom } from "./qr-code.dom"
-import type { Send, State } from "./qr-code.types"
+import type { MachineApi, Send, State } from "./qr-code.types"
 
-export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>) {
+export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
   const encoded = state.context.encoded
@@ -27,5 +28,9 @@ const pixelSize = state.context.pixelSize
     value: state.context.value,
-    setValue(value: string) {
+    setValue(value) {
       send({ type: "VALUE.SET", value })
     },
+    getDataUrl(type, quality) {
+      const svgEl = dom.getFrameEl(state.context)
+      return getDataUrl(svgEl, { type, quality })
+    },
 
@@ -45,5 +50,6 @@ getRootProps() {
 
-    getSvgProps() {
+    getFrameProps() {
       return normalize.svg({
-        ...parts.svg.attrs,
+        id: dom.getFrameId(state.context),
+        ...parts.frame.attrs,
         xmlns: "http://www.w3.org/2000/svg",
@@ -54,13 +60,12 @@ viewBox: `0 0 ${width} ${height}`,
 
-    getPathProps() {
+    getPatternProps() {
       return normalize.path({
         d: paths.join(""),
-        ...parts.path.attrs,
+        ...parts.pattern.attrs,
       })
     },
 
-    getImageProps() {
-      return normalize.img({
-        ...parts.image.attrs,
-        alt: "qr code",
+    getOverlayProps() {
+      return normalize.element({
+        ...parts.overlay.attrs,
         style: {
@@ -67,0 +72,0 @@ position: "absolute",

src/qr-code.dom.ts

 import { createScope } from "@zag-js/dom-query"
-import type { MachineContext } from "./qr-code.types"
+import type { MachineContext as Ctx } from "./qr-code.types"
 
 export const dom = createScope({
-  getRootId: (ctx: MachineContext) => ctx.ids?.root ?? `qrcode:${ctx.id}:root`,
+  getRootId: (ctx: Ctx) => ctx.ids?.root ?? `qrcode:${ctx.id}:root`,
+  getFrameId: (ctx: Ctx) => ctx.ids?.svg ?? `qrcode:${ctx.id}:svg`,
+  getFrameEl: (ctx: Ctx) => dom.getById<SVGElement>(ctx, dom.getFrameId(ctx)),
 })

src/qr-code.machine.ts

@@ -15,4 +15,4 @@ import { createMachine } from "@zag-js/core"
         value: "",
+        ...ctx,
         pixelSize: 10,
-        ...ctx,
       },
@@ -19,0 +19,0 @@

src/qr-code.props.ts

@@ -5,12 +5,4 @@ import { createProps } from "@zag-js/types"
 
-export const props = createProps<UserDefinedContext>()([
-  "ids",
-  "value",
-  "id",
-  "encoding",
-  "dir",
-  "getRootNode",
-  "pixelSize",
-])
+export const props = createProps<UserDefinedContext>()(["ids", "value", "id", "encoding", "dir", "getRootNode"])
 
 export const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)

src/qr-code.types.ts

 import type { StateMachine as S } from "@zag-js/core"
+import type { DataUrlType } from "@zag-js/dom-query"
 import type { CommonProperties, DirectionProperty, PropTypes, RequiredBy } from "@zag-js/types"
@@ -7,2 +8,3 @@ import type { QrCodeGenerateOptions, QrCodeGenerateResult } from "uqr"
   root?: string
+  svg?: string
 }
@@ -23,5 +25,7 @@
   encoding?: QrCodeGenerateOptions
+}
+
+interface PrivateContext {
   /**
    * The pixel size of the qr code.
-   * @default 10
    */
@@ -31,4 +35,2 @@ pixelSize: number
 
-interface PrivateContext {}
-
 type ComputedContext = Readonly<{
@@ -63,7 +65,11 @@ encoded: QrCodeGenerateResult
   setValue(value: string): void
+  /**
+   * Returns the data URL of the qr code.
+   */
+  getDataUrl(type: DataUrlType, quality?: number): Promise<string>
 
   getRootProps(): T["element"]
-  getSvgProps(): T["svg"]
-  getPathProps(): T["path"]
-  getImageProps(): T["img"]
+  getFrameProps(): T["svg"]
+  getPatternProps(): T["path"]
+  getOverlayProps(): T["element"]
 }

No alert changes

Improved metrics

Total package byte prevSize

35365

increased by7.6%

Lines of code

521

increased by0.58%

Dependency changes

• + Added@zag-js/anatomy@0.0.0-dev-20240607213716(transitive)

• + Added@zag-js/core@0.0.0-dev-20240607213716(transitive)

• + Added@zag-js/dom-query@0.0.0-dev-20240607213716(transitive)

• + Added@zag-js/store@0.0.0-dev-20240607213716(transitive)

• + Added@zag-js/types@0.0.0-dev-20240607213716(transitive)

• + Added@zag-js/utils@0.0.0-dev-20240607213716(transitive)

• - Removed@zag-js/anatomy@0.0.0-dev-20240607195446(transitive)

• - Removed@zag-js/core@0.0.0-dev-20240607195446(transitive)

• - Removed@zag-js/dom-query@0.0.0-dev-20240607195446(transitive)

• - Removed@zag-js/store@0.0.0-dev-20240607195446(transitive)

• - Removed@zag-js/types@0.0.0-dev-20240607195446(transitive)

• - Removed@zag-js/utils@0.0.0-dev-20240607195446(transitive)

• Updated@zag-js/anatomy@0.0.0-dev-20240607213716

• Updated@zag-js/core@0.0.0-dev-20240607213716

• Updated@zag-js/dom-query@0.0.0-dev-20240607213716

• Updated@zag-js/types@0.0.0-dev-20240607213716

• Updated@zag-js/utils@0.0.0-dev-20240607213716