@zag-js/qr-code
Advanced tools
Comparing version 0.80.0 to 0.81.0
@@ -9,3 +9,3 @@ import * as _zag_js_anatomy from '@zag-js/anatomy'; | ||
declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "frame" | "pattern" | "overlay">; | ||
declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "frame" | "pattern" | "overlay" | "downloadTrigger">; | ||
@@ -16,2 +16,5 @@ type ElementIds = Partial<{ | ||
}>; | ||
interface ValueChangeDetails { | ||
value: string; | ||
} | ||
interface PublicContext extends DirectionProperty, CommonProperties { | ||
@@ -30,2 +33,6 @@ /** | ||
encoding?: QrCodeGenerateOptions | undefined; | ||
/** | ||
* Callback fired when the value changes. | ||
*/ | ||
onValueChange?: ((details: ValueChangeDetails) => void) | undefined; | ||
} | ||
@@ -50,2 +57,16 @@ interface PrivateContext { | ||
type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>; | ||
interface DownloadTriggerProps { | ||
/** | ||
* The mime type of the image. | ||
*/ | ||
mimeType: DataUrlType; | ||
/** | ||
* The quality of the image. | ||
*/ | ||
quality?: number; | ||
/** | ||
* The name of the file. | ||
*/ | ||
fileName: string; | ||
} | ||
interface MachineApi<T extends PropTypes = PropTypes> { | ||
@@ -68,2 +89,3 @@ /** | ||
getOverlayProps(): T["element"]; | ||
getDownloadTriggerProps(props: DownloadTriggerProps): T["button"]; | ||
} | ||
@@ -75,5 +97,5 @@ | ||
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">]; | ||
declare const props: ("dir" | "id" | "value" | "getRootNode" | "ids" | "encoding" | "onValueChange")[]; | ||
declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "dir" | "id" | "value" | "getRootNode" | "ids" | "encoding" | "onValueChange">]; | ||
export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type Service, anatomy, connect, machine, props, splitProps }; | ||
export { type MachineApi as Api, type UserDefinedContext as Context, type DownloadTriggerProps, type ElementIds, type Service, type ValueChangeDetails, anatomy, connect, machine, props, splitProps }; |
@@ -12,3 +12,3 @@ 'use strict'; | ||
// src/qr-code.anatomy.ts | ||
var anatomy = anatomy$1.createAnatomy("qr-code").parts("root", "frame", "pattern", "overlay"); | ||
var anatomy = anatomy$1.createAnatomy("qr-code").parts("root", "frame", "pattern", "overlay", "downloadTrigger"); | ||
var parts = anatomy.build(); | ||
@@ -82,2 +82,12 @@ var dom = domQuery.createScope({ | ||
}); | ||
}, | ||
getDownloadTriggerProps(props2) { | ||
return normalize.button({ | ||
type: "button", | ||
...parts.downloadTrigger.attrs, | ||
onClick(event) { | ||
if (event.defaultPrevented) return; | ||
send({ type: "DOWNLOAD_TRIGGER.CLICK", ...props2 }); | ||
} | ||
}); | ||
} | ||
@@ -103,2 +113,5 @@ }; | ||
actions: ["setValue"] | ||
}, | ||
"DOWNLOAD_TRIGGER.CLICK": { | ||
actions: ["downloadQrCode"] | ||
} | ||
@@ -109,4 +122,19 @@ } | ||
actions: { | ||
setValue: (ctx2, e) => { | ||
ctx2.value = e.value; | ||
setValue(ctx2, evt) { | ||
set.value(ctx2, evt.value); | ||
}, | ||
downloadQrCode(ctx2, evt) { | ||
const { mimeType, quality, fileName } = evt; | ||
const svgEl = dom.getFrameEl(ctx2); | ||
const doc = dom.getDoc(ctx2); | ||
domQuery.getDataUrl(svgEl, { type: mimeType, quality }).then((dataUri) => { | ||
const a = doc.createElement("a"); | ||
a.href = dataUri; | ||
a.rel = "noopener"; | ||
a.download = fileName; | ||
a.click(); | ||
setTimeout(() => { | ||
a.remove(); | ||
}, 0); | ||
}); | ||
} | ||
@@ -117,3 +145,18 @@ } | ||
} | ||
var props = types.createProps()(["ids", "value", "id", "encoding", "dir", "getRootNode"]); | ||
var set = { | ||
value(ctx, value) { | ||
if (utils.isEqual(ctx.value, value)) return; | ||
ctx.value = value; | ||
ctx.onValueChange?.({ value }); | ||
} | ||
}; | ||
var props = types.createProps()([ | ||
"ids", | ||
"value", | ||
"id", | ||
"encoding", | ||
"dir", | ||
"getRootNode", | ||
"onValueChange" | ||
]); | ||
var splitProps = utils.createSplitProps(props); | ||
@@ -120,0 +163,0 @@ |
{ | ||
"name": "@zag-js/qr-code", | ||
"version": "0.80.0", | ||
"version": "0.81.0", | ||
"description": "Core logic for the qr-code widget implemented as a state machine", | ||
@@ -32,7 +32,7 @@ "keywords": [ | ||
"uqr": "0.1.2", | ||
"@zag-js/core": "0.80.0", | ||
"@zag-js/anatomy": "0.80.0", | ||
"@zag-js/dom-query": "0.80.0", | ||
"@zag-js/utils": "0.80.0", | ||
"@zag-js/types": "0.80.0" | ||
"@zag-js/anatomy": "0.81.0", | ||
"@zag-js/core": "0.81.0", | ||
"@zag-js/dom-query": "0.81.0", | ||
"@zag-js/utils": "0.81.0", | ||
"@zag-js/types": "0.81.0" | ||
}, | ||
@@ -39,0 +39,0 @@ "devDependencies": { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
18085
402
+ Added@zag-js/anatomy@0.81.0(transitive)
+ Added@zag-js/core@0.81.0(transitive)
+ Added@zag-js/dom-query@0.81.0(transitive)
+ Added@zag-js/store@0.81.0(transitive)
+ Added@zag-js/types@0.81.0(transitive)
+ Added@zag-js/utils@0.81.0(transitive)
- Removed@zag-js/anatomy@0.80.0(transitive)
- Removed@zag-js/core@0.80.0(transitive)
- Removed@zag-js/dom-query@0.80.0(transitive)
- Removed@zag-js/store@0.80.0(transitive)
- Removed@zag-js/types@0.80.0(transitive)
- Removed@zag-js/utils@0.80.0(transitive)
Updated@zag-js/anatomy@0.81.0
Updated@zag-js/core@0.81.0
Updated@zag-js/dom-query@0.81.0
Updated@zag-js/types@0.81.0
Updated@zag-js/utils@0.81.0