@zag-js/signature-pad
Advanced tools
Comparing version 0.57.0 to 0.58.0
import * as _zag_js_anatomy from '@zag-js/anatomy'; | ||
import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, NormalizeProps } from '@zag-js/types'; | ||
import * as _zag_js_core from '@zag-js/core'; | ||
import { StateMachine } from '@zag-js/core'; | ||
import { Machine, StateMachine } from '@zag-js/core'; | ||
import { StrokeOptions } from 'perfect-freehand'; | ||
@@ -35,2 +35,6 @@ export { StrokeOptions } from 'perfect-freehand'; | ||
}>; | ||
interface IntlTranslations { | ||
clearTrigger: string; | ||
control: string; | ||
} | ||
@@ -43,2 +47,6 @@ interface PublicContext extends DirectionProperty, CommonProperties { | ||
/** | ||
* The translations of the signature pad. Useful for internationalization. | ||
*/ | ||
translations?: IntlTranslations; | ||
/** | ||
* Callback when the signature pad is drawing. | ||
@@ -61,2 +69,6 @@ */ | ||
/** | ||
* Whether the signature pad is required. | ||
*/ | ||
required?: boolean; | ||
/** | ||
* Whether the signature pad is read-only. | ||
@@ -96,2 +108,3 @@ */ | ||
type Send = StateMachine.Send<StateMachine.AnyEventObject>; | ||
type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>; | ||
interface SegmentPathProps { | ||
@@ -142,5 +155,5 @@ path: string; | ||
declare const props: ("dir" | "id" | "getRootNode" | "name" | "disabled" | "ids" | "onDraw" | "onDrawEnd" | "drawing" | "readOnly")[]; | ||
declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "dir" | "id" | "getRootNode" | "name" | "disabled" | "ids" | "onDraw" | "onDrawEnd" | "drawing" | "readOnly">]; | ||
declare const props: ("dir" | "id" | "getRootNode" | "name" | "disabled" | "required" | "ids" | "translations" | "onDraw" | "onDrawEnd" | "drawing" | "readOnly")[]; | ||
declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "dir" | "id" | "getRootNode" | "name" | "disabled" | "required" | "ids" | "translations" | "onDraw" | "onDrawEnd" | "drawing" | "readOnly">]; | ||
export { type MachineApi as Api, type UserDefinedContext as Context, type DataUrlType, type DrawDetails, type DrawEndDetails, type DrawingOptions, type ElementIds, type HiddenInputProps, 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 ElementIds, type HiddenInputProps, type SegmentPathProps, type Service, anatomy, connect, machine, props, splitProps }; |
@@ -74,2 +74,6 @@ "use strict"; | ||
// src/signature-pad.connect.ts | ||
var defaultTranslations = { | ||
control: "signature pad", | ||
clearTrigger: "clear signature" | ||
}; | ||
function connect(state, send, normalize) { | ||
@@ -80,2 +84,3 @@ const drawing = state.matches("drawing"); | ||
const disabled = !!state.context.disabled; | ||
const translations = state.context.translations || defaultTranslations; | ||
return { | ||
@@ -93,6 +98,12 @@ empty, | ||
getLabelProps() { | ||
return normalize.element({ | ||
return normalize.label({ | ||
...parts.label.attrs, | ||
"data-disabled": (0, import_dom_query2.dataAttr)(disabled), | ||
htmlFor: dom.getControlId(state.context) | ||
htmlFor: dom.getHiddenInputId(state.context), | ||
onClick(event) { | ||
if (!interactive) return; | ||
if (event.defaultPrevented) return; | ||
const controlEl = dom.getControlEl(state.context); | ||
controlEl?.focus({ preventScroll: true }); | ||
} | ||
}); | ||
@@ -114,3 +125,3 @@ }, | ||
"aria-roledescription": "signature pad", | ||
"aria-label": "signature pad", | ||
"aria-label": translations.control, | ||
"aria-disabled": disabled, | ||
@@ -173,3 +184,3 @@ "data-disabled": (0, import_dom_query2.dataAttr)(disabled), | ||
type: "button", | ||
"aria-label": "Clear Signature", | ||
"aria-label": translations.clearTrigger, | ||
hidden: !state.context.paths.length || drawing, | ||
@@ -184,5 +195,8 @@ disabled, | ||
return normalize.input({ | ||
id: dom.getHiddenInputId(state.context), | ||
type: "text", | ||
hidden: true, | ||
disabled, | ||
required: state.context.required, | ||
readOnly: state.context.readOnly, | ||
name: state.context.name, | ||
@@ -340,10 +354,12 @@ value: props2.value | ||
"disabled", | ||
"drawing", | ||
"getRootNode", | ||
"id", | ||
"ids", | ||
"name", | ||
"onDraw", | ||
"onDrawEnd", | ||
"readOnly", | ||
"drawing", | ||
"name" | ||
"required", | ||
"translations" | ||
]); | ||
@@ -350,0 +366,0 @@ var splitProps = (0, import_utils2.createSplitProps)(props); |
{ | ||
"name": "@zag-js/signature-pad", | ||
"version": "0.57.0", | ||
"version": "0.58.0", | ||
"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.57.0", | ||
"@zag-js/core": "0.57.0", | ||
"@zag-js/dom-query": "0.57.0", | ||
"@zag-js/dom-event": "0.57.0", | ||
"@zag-js/utils": "0.57.0", | ||
"@zag-js/types": "0.57.0" | ||
"@zag-js/anatomy": "0.58.0", | ||
"@zag-js/core": "0.58.0", | ||
"@zag-js/dom-query": "0.58.0", | ||
"@zag-js/dom-event": "0.58.0", | ||
"@zag-js/utils": "0.58.0", | ||
"@zag-js/types": "0.58.0" | ||
}, | ||
@@ -40,0 +40,0 @@ "devDependencies": { |
@@ -15,3 +15,4 @@ export { anatomy } from "./signature-pad.anatomy" | ||
SegmentPathProps, | ||
Service, | ||
StrokeOptions, | ||
} from "./signature-pad.types" |
@@ -6,4 +6,9 @@ import { getRelativePoint, isLeftClick, isModifierKey } from "@zag-js/dom-event" | ||
import { dom } from "./signature-pad.dom" | ||
import type { MachineApi, Send, State } from "./signature-pad.types" | ||
import type { IntlTranslations, MachineApi, Send, State } from "./signature-pad.types" | ||
const defaultTranslations: IntlTranslations = { | ||
control: "signature pad", | ||
clearTrigger: "clear signature", | ||
} | ||
export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { | ||
@@ -15,2 +20,4 @@ const drawing = state.matches("drawing") | ||
const translations = state.context.translations || defaultTranslations | ||
return { | ||
@@ -30,6 +37,12 @@ empty: empty, | ||
getLabelProps() { | ||
return normalize.element({ | ||
return normalize.label({ | ||
...parts.label.attrs, | ||
"data-disabled": dataAttr(disabled), | ||
htmlFor: dom.getControlId(state.context), | ||
htmlFor: dom.getHiddenInputId(state.context), | ||
onClick(event) { | ||
if (!interactive) return | ||
if (event.defaultPrevented) return | ||
const controlEl = dom.getControlEl(state.context) | ||
controlEl?.focus({ preventScroll: true }) | ||
}, | ||
}) | ||
@@ -53,3 +66,3 @@ }, | ||
"aria-roledescription": "signature pad", | ||
"aria-label": "signature pad", | ||
"aria-label": translations.control, | ||
"aria-disabled": disabled, | ||
@@ -119,5 +132,5 @@ "data-disabled": dataAttr(disabled), | ||
type: "button", | ||
"aria-label": "Clear Signature", | ||
"aria-label": translations.clearTrigger, | ||
hidden: !state.context.paths.length || drawing, | ||
disabled: disabled, | ||
disabled, | ||
onClick() { | ||
@@ -131,5 +144,8 @@ send({ type: "CLEAR" }) | ||
return normalize.input({ | ||
id: dom.getHiddenInputId(state.context), | ||
type: "text", | ||
hidden: true, | ||
disabled: disabled, | ||
disabled, | ||
required: state.context.required, | ||
readOnly: state.context.readOnly, | ||
name: state.context.name, | ||
@@ -136,0 +152,0 @@ value: props.value, |
@@ -8,12 +8,14 @@ import { createProps } from "@zag-js/types" | ||
"disabled", | ||
"drawing", | ||
"getRootNode", | ||
"id", | ||
"ids", | ||
"name", | ||
"onDraw", | ||
"onDrawEnd", | ||
"readOnly", | ||
"drawing", | ||
"name", | ||
"required", | ||
"translations", | ||
]) | ||
export const splitProps = createSplitProps<Partial<UserDefinedContext>>(props) |
@@ -1,2 +0,2 @@ | ||
import type { StateMachine as S } from "@zag-js/core" | ||
import type { Machine, StateMachine as S } from "@zag-js/core" | ||
import type { CommonProperties, DirectionProperty, PropTypes, RequiredBy } from "@zag-js/types" | ||
@@ -45,2 +45,7 @@ import type { StrokeOptions } from "perfect-freehand" | ||
export interface IntlTranslations { | ||
clearTrigger: string | ||
control: string | ||
} | ||
export type { StrokeOptions } | ||
@@ -58,2 +63,6 @@ | ||
/** | ||
* The translations of the signature pad. Useful for internationalization. | ||
*/ | ||
translations?: IntlTranslations | ||
/** | ||
* Callback when the signature pad is drawing. | ||
@@ -76,2 +85,6 @@ */ | ||
/** | ||
* Whether the signature pad is required. | ||
*/ | ||
required?: boolean | ||
/** | ||
* Whether the signature pad is read-only. | ||
@@ -118,2 +131,4 @@ */ | ||
export type Service = Machine<MachineContext, MachineState, S.AnyEventObject> | ||
/* ----------------------------------------------------------------------------- | ||
@@ -120,0 +135,0 @@ * Component API |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
83667
1305
+ Added@zag-js/anatomy@0.58.0(transitive)
+ Added@zag-js/core@0.58.0(transitive)
+ Added@zag-js/dom-event@0.58.0(transitive)
+ Added@zag-js/dom-query@0.58.0(transitive)
+ Added@zag-js/store@0.58.0(transitive)
+ Added@zag-js/text-selection@0.58.0(transitive)
+ Added@zag-js/types@0.58.0(transitive)
+ Added@zag-js/utils@0.58.0(transitive)
- Removed@zag-js/anatomy@0.57.0(transitive)
- Removed@zag-js/core@0.57.0(transitive)
- Removed@zag-js/dom-event@0.57.0(transitive)
- Removed@zag-js/dom-query@0.57.0(transitive)
- Removed@zag-js/store@0.57.0(transitive)
- Removed@zag-js/text-selection@0.57.0(transitive)
- Removed@zag-js/types@0.57.0(transitive)
- Removed@zag-js/utils@0.57.0(transitive)
Updated@zag-js/anatomy@0.58.0
Updated@zag-js/core@0.58.0
Updated@zag-js/dom-event@0.58.0
Updated@zag-js/dom-query@0.58.0
Updated@zag-js/types@0.58.0
Updated@zag-js/utils@0.58.0