@zag-js/signature-pad - npm Package Compare versions

Comparing version 0.0.0-dev-20240412181302 to 0.0.0-dev-20240412192708

dist/index.d.ts

@@ -7,3 +7,3 @@ import * as _zag_js_anatomy from '@zag-js/anatomy';
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "control" | "segment" | "segmentPath" | "separator" | "clearTrigger" | "label">;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "control" | "segment" | "segmentPath" | "guide" | "clearTrigger" | "label">;
 
@@ -51,2 +51,6 @@ interface Point {
     readOnly?: boolean;
+    /**
+     * The name of the signature pad. Useful for form submission.
+     */
+    name?: string;
 }
@@ -82,2 +86,5 @@ interface PrivateContext {
 }
+interface HiddenInputProps {
+    value: string;
+}
 interface MachineApi<T extends PropTypes = PropTypes> {
@@ -113,3 +120,4 @@ /**
     getSegmentPathProps(props: SegmentPathProps): T["path"];
-    separatorProps: T["element"];
+    getHiddenInputProps(props: HiddenInputProps): T["input"];
+    guideProps: T["element"];
     clearTriggerProps: T["element"];
@@ -122,5 +130,5 @@ }
 
-declare const props: ("disabled" | "dir" | "id" | "onDraw" | "onDrawEnd" | "drawing" | "readOnly" | "getRootNode")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "disabled" | "dir" | "id" | "onDraw" | "onDrawEnd" | "drawing" | "readOnly" | "getRootNode">];
+declare const props: ("disabled" | "dir" | "id" | "name" | "onDraw" | "onDrawEnd" | "drawing" | "readOnly" | "getRootNode")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "disabled" | "dir" | "id" | "name" | "onDraw" | "onDrawEnd" | "drawing" | "readOnly" | "getRootNode">];
 
-export { type MachineApi as Api, type UserDefinedContext as Context, type DrawDetails, type DrawEndDetails, type SegmentPathProps, anatomy, connect, machine, props, splitProps };
+export { type MachineApi as Api, type UserDefinedContext as Context, type DataUrlType, type DrawDetails, type DrawEndDetails, type DrawingOptions, type HiddenInputProps, type SegmentPathProps, anatomy, connect, machine, props, splitProps };

dist/index.js

@@ -48,3 +48,3 @@ "use strict";
   "segmentPath",
-  "separator",
+  "guide",
   "clearTrigger",
@@ -64,4 +64,6 @@ "label"
   getControlId: (ctx) => `signature-control-${ctx.id}`,
+  getHiddenInputId: (ctx) => `signature-input-${ctx.id}`,
   getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
   getSegmentEl: (ctx) => (0, import_dom_query.query)(dom.getControlEl(ctx), "[data-part=segment]"),
+  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
   getDataUrl: (ctx, options) => {
@@ -138,2 +140,5 @@ const { type, quality = 0.92 } = options;
       onPointerDown(event) {
+        const target = (0, import_dom_query2.getEventTarget)((0, import_dom_event.getNativeEvent)(event));
+        if (target?.closest("[data-part=clear-trigger]"))
+          return;
         if (!(0, import_dom_event.isLeftClick)(event) || (0, import_dom_event.isModifiedEvent)(event) || !isInteractive)
@@ -175,4 +180,4 @@ return;
     },
-    separatorProps: normalize.element({
-      ...parts.separator.attrs,
+    guideProps: normalize.element({
+      ...parts.guide.attrs,
       "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled)
@@ -189,3 +194,12 @@ }),
       }
-    })
+    }),
+    getHiddenInputProps(props2) {
+      return normalize.input({
+        type: "text",
+        hidden: true,
+        disabled: isDisabled,
+        name: state.context.name,
+        value: props2.value
+      });
+    }
   };
@@ -342,3 +356,4 @@ }
   "readOnly",
-  "drawing"
+  "drawing",
+  "name"
 ]);
@@ -345,0 +360,0 @@ var splitProps = (0, import_utils2.createSplitProps)(props);

package.json

 {
   "name": "@zag-js/signature-pad",
-  "version": "0.0.0-dev-20240412181302",
+  "version": "0.0.0-dev-20240412192708",
   "description": "Core logic for the signature-pad widget implemented as a state machine",
@@ -32,8 +32,8 @@ "keywords": [
     "perfect-freehand": "^1.2.2",
-    "@zag-js/anatomy": "0.0.0-dev-20240412181302",
-    "@zag-js/core": "0.0.0-dev-20240412181302",
-    "@zag-js/dom-query": "0.0.0-dev-20240412181302",
-    "@zag-js/dom-event": "0.0.0-dev-20240412181302",
-    "@zag-js/utils": "0.0.0-dev-20240412181302",
-    "@zag-js/types": "0.0.0-dev-20240412181302"
+    "@zag-js/anatomy": "0.0.0-dev-20240412192708",
+    "@zag-js/core": "0.0.0-dev-20240412192708",
+    "@zag-js/dom-query": "0.0.0-dev-20240412192708",
+    "@zag-js/dom-event": "0.0.0-dev-20240412192708",
+    "@zag-js/utils": "0.0.0-dev-20240412192708",
+    "@zag-js/types": "0.0.0-dev-20240412192708"
   },
@@ -40,0 +40,0 @@ "devDependencies": {

src/index.ts

@@ -6,7 +6,10 @@ export { anatomy } from "./signature-pad.anatomy"
 export type {
+  MachineApi as Api,
   UserDefinedContext as Context,
-  MachineApi as Api,
+  DataUrlType,
   DrawDetails,
   DrawEndDetails,
+  DrawingOptions,
+  HiddenInputProps,
   SegmentPathProps,
 } from "./signature-pad.types"

src/signature-pad.anatomy.ts

@@ -8,3 +8,3 @@ import { createAnatomy } from "@zag-js/anatomy"
   "segmentPath",
-  "separator",
+  "guide",
   "clearTrigger",
@@ -11,0 +11,0 @@ "label",

src/signature-pad.connect.ts

@@ -1,3 +0,3 @@
-import { getRelativePoint, isLeftClick, isModifiedEvent } from "@zag-js/dom-event"
-import { dataAttr } from "@zag-js/dom-query"
+import { getNativeEvent, getRelativePoint, isLeftClick, isModifiedEvent } from "@zag-js/dom-event"
+import { dataAttr, getEventTarget } from "@zag-js/dom-query"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
@@ -48,2 +48,4 @@ import { parts } from "./signature-pad.anatomy"
       onPointerDown(event) {
+        const target = getEventTarget<HTMLElement>(getNativeEvent(event))
+        if (target?.closest("[data-part=clear-trigger]")) return
         if (!isLeftClick(event) || isModifiedEvent(event) || !isInteractive) return
@@ -86,4 +88,4 @@ event.currentTarget.setPointerCapture(event.pointerId)
 
-    separatorProps: normalize.element({
-      ...parts.separator.attrs,
+    guideProps: normalize.element({
+      ...parts.guide.attrs,
       "data-disabled": dataAttr(isDisabled),
@@ -102,3 +104,13 @@ }),
     }),
+
+    getHiddenInputProps(props) {
+      return normalize.input({
+        type: "text",
+        hidden: true,
+        disabled: isDisabled,
+        name: state.context.name,
+        value: props.value,
+      })
+    },
   }
 }

src/signature-pad.dom.ts

@@ -7,5 +7,7 @@ import { createScope, query } from "@zag-js/dom-query"
   getControlId: (ctx: Ctx) => `signature-control-${ctx.id}`,
+  getHiddenInputId: (ctx: Ctx) => `signature-input-${ctx.id}`,
 
   getControlEl: (ctx: Ctx) => dom.getById(ctx, dom.getControlId(ctx)),
   getSegmentEl: (ctx: Ctx) => query(dom.getControlEl(ctx), "[data-part=segment]"),
+  getHiddenInputEl: (ctx: Ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
 
@@ -12,0 +14,0 @@ getDataUrl: (ctx: Ctx, options: DataUrlOptions): Promise<string> => {

src/signature-pad.props.ts

@@ -14,4 +14,5 @@ import { createProps } from "@zag-js/types"
   "drawing",
+  "name",
 ])
 
 export const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)

src/signature-pad.types.ts

@@ -56,2 +56,6 @@ import type { StateMachine as S } from "@zag-js/core"
   readOnly?: boolean
+  /**
+   * The name of the signature pad. Useful for form submission.
+   */
+  name?: string
 }
@@ -99,2 +103,6 @@
 
+export interface HiddenInputProps {
+  value: string
+}
+
 export interface MachineApi<T extends PropTypes = PropTypes> {
@@ -131,4 +139,5 @@ /**
   getSegmentPathProps(props: SegmentPathProps): T["path"]
-  separatorProps: T["element"]
+  getHiddenInputProps(props: HiddenInputProps): T["input"]
+  guideProps: T["element"]
   clearTriggerProps: T["element"]
 }

No alert changes

Improved metrics

Total package byte prevSize

80819

increased by5.58%

Lines of code

1230

increased by5.4%

Dependency changes

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

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

• + Added@zag-js/dom-event@0.0.0-dev-20240412192708(transitive)

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

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

• + Added@zag-js/text-selection@0.0.0-dev-20240412192708(transitive)

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

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

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

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

• - Removed@zag-js/dom-event@0.0.0-dev-20240412181302(transitive)

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

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

• - Removed@zag-js/text-selection@0.0.0-dev-20240412181302(transitive)

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

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

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

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

• Updated@zag-js/dom-event@0.0.0-dev-20240412192708

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

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

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