@bagelink/vue 1.4.10 → 1.4.14

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

@@ -50,7 +50,6 @@ 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":"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"}
+{"version":3,"file":"SignaturePad.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/SignaturePad.vue"],"names":[],"mappings":"AA4QA,OAAO,KAAK,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,eAAe,CAAA;AAMnE,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;AAgFD,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,MAAM,CAAC,EAAE,IAAI,CAAC;CACb,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;eAxMH,OAAO;;;;AAmSpB,wBAWG"}

package/dist/index.cjs

@@ -19564,7 +19564,6 @@ 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() {
@@ -19700,22 +19699,17 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     }
     function draw() {
       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) {
         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);
-    });
+    useResizeObserver(() => vCanvas.value, resizeCanvas);
+    useEventListener(() => sig.value, "endStroke", onEndStroke);
     __expose({
       save: save2,
       clear,
@@ -19727,7 +19721,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[1] || (_cache[1] = vue.withModifiers(() => {
+        onTouchmove: _cache[0] || (_cache[0] = vue.withModifiers(() => {
         }, ["prevent"]))
       }, [
         _ctx.clearable && !_ctx.disabled ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
@@ -19745,19 +19739,12 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
           disabled: _ctx.disabled
         }, null, 8, _hoisted_1$u),
         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)
+          inputMode: "none"
+        }, null, 8, _hoisted_2$l)
       ], 34);
     };
   }

package/dist/index.mjs

@@ -19562,7 +19562,6 @@ 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() {
@@ -19698,22 +19697,17 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     }
     function draw() {
       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) {
         void loadFile(fileData.value);
       }
     }
     onMounted(draw);
-    onUnmounted(() => {
-      var _a;
-      (_a = sig.value) == null ? void 0 : _a.removeEventListener("endStroke", onEndStroke);
-      window.removeEventListener("resize", resizeCanvas);
-    });
+    useResizeObserver(() => vCanvas.value, resizeCanvas);
+    useEventListener(() => sig.value, "endStroke", onEndStroke);
     __expose({
       save: save2,
       clear,
@@ -19725,7 +19719,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[1] || (_cache[1] = withModifiers(() => {
+        onTouchmove: _cache[0] || (_cache[0] = withModifiers(() => {
         }, ["prevent"]))
       }, [
         _ctx.clearable && !_ctx.disabled ? (openBlock(), createBlock(unref(Btn), {
@@ -19743,19 +19737,12 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
           disabled: _ctx.disabled
         }, null, 8, _hoisted_1$u),
         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)
+          inputMode: "none"
+        }, null, 8, _hoisted_2$l)
       ], 34);
     };
   }

package/package.json

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

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import type { Options as SignaturePadOptions } from 'signature_pad'
 import { Btn } from '@bagelink/vue'
+import { useEventListener, useResizeObserver } from '@vueuse/core'
 import SignaturePad from 'signature_pad'
-import { onMounted, onUnmounted, watch } from 'vue'
+import { onMounted, watch } from 'vue'
 
 export interface WaterMark {
 	text: string
@@ -38,7 +39,6 @@ const sigData = defineModel()
 const fileData = defineModel<File>('file')
 
 const vCanvas = $ref<HTMLCanvasElement>()
-const requiredInput = $ref<HTMLInputElement>()
 
 let sig = $ref<SignaturePad>()
 
@@ -187,12 +187,10 @@ function resizeCanvas() {
 
 function draw() {
 	sig = new SignaturePad(vCanvas!, signatureOptions)
-	window.addEventListener('resize', resizeCanvas)
 	resizeCanvas()
 	if (props.disabled) sig.off()
 	else sig.on()
 	_isEmpty = sig.isEmpty()
-	sig.addEventListener('endStroke', onEndStroke)
 
 	// Load initial file if provided
 	if (fileData.value) {
@@ -201,10 +199,8 @@ function draw() {
 }
 
 onMounted(draw)
-onUnmounted(() => {
-	sig?.removeEventListener('endStroke', onEndStroke)
-	window.removeEventListener('resize', resizeCanvas)
-})
+useResizeObserver(() => vCanvas, resizeCanvas)
+useEventListener(() => sig, 'endStroke', onEndStroke)
 
 defineExpose({
 	save,
@@ -236,21 +232,17 @@ defineExpose({
 			:disabled
 		/>
 		<input
-			ref="requiredInput"
 			placeholder="required"
 			type="text"
 			:required="required && _isEmpty"
 			class="pixel opacity-0"
-			tabindex="-1"
-			aria-hidden="true"
-			@focus="event => (event.target as any)?.blur?.()"
+			inputMode="none"
 		>
 		<!--
 			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
- 	-->
+					we need to set inputMode="none"
+			! this prevents the keyboard from opening on mobile
+		-->
 	</div>
 </template>