@bagelink/vue 1.4.8 → 1.4.10

package/dist/components/form/inputs/SignaturePad.vue.d.ts

@@ -50,6 +50,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
     clearable: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     vCanvas: HTMLCanvasElement;
+    requiredInput: HTMLInputElement;
 }, HTMLDivElement>;
 export default _default;
 //# sourceMappingURL=SignaturePad.vue.d.ts.map

package/dist/components/form/inputs/SignaturePad.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SignaturePad.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/SignaturePad.vue"],"names":[],"mappings":"AA0QA,OAAO,KAAK,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,eAAe,CAAA;AAKnE,MAAM,WAAW,SAAS;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,EAAE,EAAE,MAAM,CAAA;IACV,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;CACb;AAED,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,YAAY,GAAG,eAAe,CAAA;AAEnF,KAAK,WAAW,GAAG;IAClB,SAAS,CAAC,EAAE,mBAAmB,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;CAClB,CAAC;AAcF,iBAAS,KAAK,SAIb;AAED,iBAAS,IAAI,CAAC,MAAM,CAAC,EAAE,UAAU,sBAGhC;AAgCD,iBAAS,WAAW,CAAC,GAAG,EAAE,MAAM,6BAQ/B;AAGD,iBAAS,IAAI,SAMZ;AAiBD,iBAAS,YAAY,CAAC,IAAI,EAAE,SAAS,QA0BpC;AAoFD,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,MAAM,CAAC,EAAE,IAAI,CAAC;CACb,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;eA5MH,OAAO;;;;AAwSpB,wBAWG"}
+{"version":3,"file":"SignaturePad.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/SignaturePad.vue"],"names":[],"mappings":"AAoRA,OAAO,KAAK,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,eAAe,CAAA;AAKnE,MAAM,WAAW,SAAS;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,EAAE,EAAE,MAAM,CAAA;IACV,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;CACb;AAED,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,YAAY,GAAG,eAAe,CAAA;AAEnF,KAAK,WAAW,GAAG;IAClB,SAAS,CAAC,EAAE,mBAAmB,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;CAClB,CAAC;AAeF,iBAAS,KAAK,SAIb;AAED,iBAAS,IAAI,CAAC,MAAM,CAAC,EAAE,UAAU,sBAGhC;AAgCD,iBAAS,WAAW,CAAC,GAAG,EAAE,MAAM,6BAQ/B;AAGD,iBAAS,IAAI,SAMZ;AAiBD,iBAAS,YAAY,CAAC,IAAI,EAAE,SAAS,QA0BpC;AAoFD,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,MAAM,CAAC,EAAE,IAAI,CAAC;CACb,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;eA7MH,OAAO;;;;;AA+SpB,wBAWG"}

package/dist/index.cjs

@@ -19537,13 +19537,7 @@ class SignaturePad extends SignatureEventTarget {
   }
 }
 const _hoisted_1$u = ["disabled"];
-const _hoisted_2$l = {
-  key: 1,
-  placeholder: "required",
-  type: "text",
-  required: "",
-  class: "pixel opacity-0"
-};
+const _hoisted_2$l = ["required"];
 const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
   __name: "SignaturePad",
   props: /* @__PURE__ */ vue.mergeModels({
@@ -19570,6 +19564,7 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     const sigData = vue.useModel(__props, "modelValue");
     const fileData = vue.useModel(__props, "file");
     const vCanvas = vue.ref();
+    const requiredInput = vue.ref();
     let sig = vue.ref();
     let _isEmpty = vue.ref(true);
     function clear() {
@@ -19674,7 +19669,7 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
       sigData.value = data2;
       saveFile();
     }
-    async function loadFile(file) {
+    function loadFile(file) {
       if (!file) return;
       const reader = new FileReader();
       return new Promise((resolve) => {
@@ -19690,38 +19685,36 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
       });
     }
     vue.watch(fileData, (newFile) => {
-      loadFile(newFile);
-    });
+      void loadFile(newFile);
+    });
+    function resizeCanvas() {
+      let url;
+      if (!isEmpty()) url = save2();
+      const ratio = props2.ratio ?? 1 / 2;
+      const { width } = vCanvas.value.getBoundingClientRect();
+      vCanvas.value.width = props2.width ? Number(props2.width.replaceAll("px", "")) : width;
+      vCanvas.value.height = props2.height ? Number(props2.height.replaceAll("px", "")) : width * ratio;
+      clear();
+      if (!props2.clearOnResize && url !== void 0) void fromDataURL(url);
+      if (props2.waterMark) addWaterMark(props2.waterMark);
+    }
     function draw() {
-      const canvas = vCanvas.value;
-      sig.value = new SignaturePad(canvas, signatureOptions.value);
-      function resizeCanvas(c2) {
-        let url;
-        if (!isEmpty()) url = save2();
-        const ratio = props2.ratio ?? 1 / 2;
-        const { width } = c2.getBoundingClientRect();
-        c2.width = props2.width ? Number(props2.width.replaceAll("px", "")) : width;
-        c2.height = props2.height ? Number(props2.height.replaceAll("px", "")) : width * ratio;
-        clear();
-        if (!props2.clearOnResize && url !== void 0) void fromDataURL(url);
-        if (props2.waterMark) addWaterMark(props2.waterMark);
-      }
-      window.addEventListener("resize", () => {
-        resizeCanvas(canvas);
-      });
-      resizeCanvas(canvas);
+      sig.value = new SignaturePad(vCanvas.value, signatureOptions.value);
+      window.addEventListener("resize", resizeCanvas);
+      resizeCanvas();
       if (props2.disabled) sig.value.off();
       else sig.value.on();
       _isEmpty.value = sig.value.isEmpty();
       sig.value.addEventListener("endStroke", onEndStroke);
       if (fileData.value) {
-        loadFile(fileData.value);
+        void loadFile(fileData.value);
       }
     }
     vue.onMounted(draw);
     vue.onUnmounted(() => {
       var _a;
       (_a = sig.value) == null ? void 0 : _a.removeEventListener("endStroke", onEndStroke);
+      window.removeEventListener("resize", resizeCanvas);
     });
     __expose({
       save: save2,
@@ -19734,7 +19727,7 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(["bgl_input signature-pad relative", { "bg-transparent": _ctx.disabled }]),
-        onTouchmove: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+        onTouchmove: _cache[1] || (_cache[1] = vue.withModifiers(() => {
         }, ["prevent"]))
       }, [
         _ctx.clearable && !_ctx.disabled ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
@@ -19751,7 +19744,20 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
           class: "canvas",
           disabled: _ctx.disabled
         }, null, 8, _hoisted_1$u),
-        _ctx.required && vue.unref(_isEmpty) ? (vue.openBlock(), vue.createElementBlock("input", _hoisted_2$l)) : vue.createCommentVNode("", true)
+        vue.createElementVNode("input", {
+          ref_key: "requiredInput",
+          ref: requiredInput,
+          placeholder: "required",
+          type: "text",
+          required: _ctx.required && vue.unref(_isEmpty),
+          class: "pixel opacity-0",
+          tabindex: "-1",
+          "aria-hidden": "true",
+          onFocus: _cache[0] || (_cache[0] = (event) => {
+            var _a, _b;
+            return (_b = (_a = event.target) == null ? void 0 : _a.blur) == null ? void 0 : _b.call(_a);
+          })
+        }, null, 40, _hoisted_2$l)
       ], 34);
     };
   }

package/dist/index.mjs

@@ -19535,13 +19535,7 @@ class SignaturePad extends SignatureEventTarget {
   }
 }
 const _hoisted_1$u = ["disabled"];
-const _hoisted_2$l = {
-  key: 1,
-  placeholder: "required",
-  type: "text",
-  required: "",
-  class: "pixel opacity-0"
-};
+const _hoisted_2$l = ["required"];
 const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "SignaturePad",
   props: /* @__PURE__ */ mergeModels({
@@ -19568,6 +19562,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     const sigData = useModel(__props, "modelValue");
     const fileData = useModel(__props, "file");
     const vCanvas = ref();
+    const requiredInput = ref();
     let sig = ref();
     let _isEmpty = ref(true);
     function clear() {
@@ -19672,7 +19667,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       sigData.value = data2;
       saveFile();
     }
-    async function loadFile(file) {
+    function loadFile(file) {
       if (!file) return;
       const reader = new FileReader();
       return new Promise((resolve) => {
@@ -19688,38 +19683,36 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       });
     }
     watch(fileData, (newFile) => {
-      loadFile(newFile);
-    });
+      void loadFile(newFile);
+    });
+    function resizeCanvas() {
+      let url;
+      if (!isEmpty()) url = save2();
+      const ratio = props2.ratio ?? 1 / 2;
+      const { width } = vCanvas.value.getBoundingClientRect();
+      vCanvas.value.width = props2.width ? Number(props2.width.replaceAll("px", "")) : width;
+      vCanvas.value.height = props2.height ? Number(props2.height.replaceAll("px", "")) : width * ratio;
+      clear();
+      if (!props2.clearOnResize && url !== void 0) void fromDataURL(url);
+      if (props2.waterMark) addWaterMark(props2.waterMark);
+    }
     function draw() {
-      const canvas = vCanvas.value;
-      sig.value = new SignaturePad(canvas, signatureOptions.value);
-      function resizeCanvas(c2) {
-        let url;
-        if (!isEmpty()) url = save2();
-        const ratio = props2.ratio ?? 1 / 2;
-        const { width } = c2.getBoundingClientRect();
-        c2.width = props2.width ? Number(props2.width.replaceAll("px", "")) : width;
-        c2.height = props2.height ? Number(props2.height.replaceAll("px", "")) : width * ratio;
-        clear();
-        if (!props2.clearOnResize && url !== void 0) void fromDataURL(url);
-        if (props2.waterMark) addWaterMark(props2.waterMark);
-      }
-      window.addEventListener("resize", () => {
-        resizeCanvas(canvas);
-      });
-      resizeCanvas(canvas);
+      sig.value = new SignaturePad(vCanvas.value, signatureOptions.value);
+      window.addEventListener("resize", resizeCanvas);
+      resizeCanvas();
       if (props2.disabled) sig.value.off();
       else sig.value.on();
       _isEmpty.value = sig.value.isEmpty();
       sig.value.addEventListener("endStroke", onEndStroke);
       if (fileData.value) {
-        loadFile(fileData.value);
+        void loadFile(fileData.value);
       }
     }
     onMounted(draw);
     onUnmounted(() => {
       var _a;
       (_a = sig.value) == null ? void 0 : _a.removeEventListener("endStroke", onEndStroke);
+      window.removeEventListener("resize", resizeCanvas);
     });
     __expose({
       save: save2,
@@ -19732,7 +19725,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["bgl_input signature-pad relative", { "bg-transparent": _ctx.disabled }]),
-        onTouchmove: _cache[0] || (_cache[0] = withModifiers(() => {
+        onTouchmove: _cache[1] || (_cache[1] = withModifiers(() => {
         }, ["prevent"]))
       }, [
         _ctx.clearable && !_ctx.disabled ? (openBlock(), createBlock(unref(Btn), {
@@ -19749,7 +19742,20 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
           class: "canvas",
           disabled: _ctx.disabled
         }, null, 8, _hoisted_1$u),
-        _ctx.required && unref(_isEmpty) ? (openBlock(), createElementBlock("input", _hoisted_2$l)) : createCommentVNode("", true)
+        createElementVNode("input", {
+          ref_key: "requiredInput",
+          ref: requiredInput,
+          placeholder: "required",
+          type: "text",
+          required: _ctx.required && unref(_isEmpty),
+          class: "pixel opacity-0",
+          tabindex: "-1",
+          "aria-hidden": "true",
+          onFocus: _cache[0] || (_cache[0] = (event) => {
+            var _a, _b;
+            return (_b = (_a = event.target) == null ? void 0 : _a.blur) == null ? void 0 : _b.call(_a);
+          })
+        }, null, 40, _hoisted_2$l)
       ], 34);
     };
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.4.8",
+  "version": "1.4.10",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/form/inputs/SignaturePad.vue

@@ -38,6 +38,7 @@ const sigData = defineModel()
 const fileData = defineModel<File>('file')
 
 const vCanvas = $ref<HTMLCanvasElement>()
+const requiredInput = $ref<HTMLInputElement>()
 
 let sig = $ref<SignaturePad>()
 
@@ -153,7 +154,7 @@ function onEndStroke() {
 	saveFile()
 }
 
-async function loadFile(file: File | undefined) {
+function loadFile(file: File | undefined) {
 	if (!file) return
 	const reader = new FileReader()
 	return new Promise((resolve) => {
@@ -169,26 +170,25 @@ async function loadFile(file: File | undefined) {
 }
 
 watch(fileData, (newFile) => {
-	loadFile(newFile)
+	void loadFile(newFile)
 })
 
+function resizeCanvas() {
+	let url
+	if (!isEmpty()) url = save()
+	const ratio = props.ratio ?? 1 / 2
+	const { width } = vCanvas!.getBoundingClientRect()
+	vCanvas!.width = props.width ? Number(props.width.replaceAll('px', '')) : width
+	vCanvas!.height = props.height ? Number(props.height.replaceAll('px', '')) : width * ratio
+	clear()
+	if (!props.clearOnResize && url !== undefined) void fromDataURL(url)
+	if (props.waterMark) addWaterMark(props.waterMark)
+}
+
 function draw() {
-	const canvas = vCanvas!
-	sig = new SignaturePad(canvas, signatureOptions)
-	function resizeCanvas(c: HTMLCanvasElement) {
-		// ! TODO: function does not need to be declared inside draw()
-		let url
-		if (!isEmpty()) url = save()
-		const ratio = props.ratio ?? 1 / 2
-		const { width } = c.getBoundingClientRect()
-		c.width = props.width ? Number(props.width.replaceAll('px', '')) : width
-		c.height = props.height ? Number(props.height.replaceAll('px', '')) : width * ratio
-		clear()
-		if (!props.clearOnResize && url !== undefined) void fromDataURL(url)
-		if (props.waterMark) addWaterMark(props.waterMark)
-	}
-	window.addEventListener('resize', () => { resizeCanvas(canvas) })
-	resizeCanvas(canvas)
+	sig = new SignaturePad(vCanvas!, signatureOptions)
+	window.addEventListener('resize', resizeCanvas)
+	resizeCanvas()
 	if (props.disabled) sig.off()
 	else sig.on()
 	_isEmpty = sig.isEmpty()
@@ -196,13 +196,14 @@ function draw() {
 
 	// Load initial file if provided
 	if (fileData.value) {
-		loadFile(fileData.value)
+		void loadFile(fileData.value)
 	}
 }
 
 onMounted(draw)
 onUnmounted(() => {
 	sig?.removeEventListener('endStroke', onEndStroke)
+	window.removeEventListener('resize', resizeCanvas)
 })
 
 defineExpose({
@@ -235,12 +236,21 @@ defineExpose({
 			:disabled
 		/>
 		<input
-			v-if="required && _isEmpty"
+			ref="requiredInput"
 			placeholder="required"
 			type="text"
-			required
+			:required="required && _isEmpty"
 			class="pixel opacity-0"
+			tabindex="-1"
+			aria-hidden="true"
+			@focus="event => (event.target as any)?.blur?.()"
 		>
+		<!--
+			we add a hidden input to make the signature pad required
+					we need to set the tabindex to -1 and aria-hidden to true
+					to make it not focusable and not visible to screen readers
+			! most importantally this prevents the keyboard from opening on mobile
+ 	-->
 	</div>
 </template>