@bagelink/vue 0.0.1298 → 0.0.1300

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

@@ -30,6 +30,7 @@ declare function undo(): void;
 declare function addWaterMark(data: WaterMark): void;
 type __VLS_PublicProps = {
     modelValue?: any;
+    'file'?: File;
 } & __VLS_Props;
 declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
     save: typeof save;
@@ -40,8 +41,10 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
     fromDataURL: (url: string) => Promise<void> | undefined;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: any) => any;
+    "update:file": (value: File) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onUpdate:file"?: ((value: File) => any) | undefined;
 }>, {
     clearable: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {

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":"AAoLA,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;AAaF,iBAAS,KAAK,SAIb;AAED,iBAAS,IAAI,CAAC,MAAM,CAAC,EAAE,UAAU,sBAGhC;AAKD,iBAAS,IAAI,SAMZ;AAiBD,iBAAS,YAAY,CAAC,IAAI,EAAE,SAAS,QA0BpC;AA0DD,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CAChB,GAAG,WAAW,CAAC;;;;;;;uBAhHU,MAAM;;;;;;eA1BnB,OAAO;;;;AAqOpB,wBAWG"}
+{"version":3,"file":"SignaturePad.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/SignaturePad.vue"],"names":[],"mappings":"AAuOA,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;AA8BD,iBAAS,IAAI,SAMZ;AAiBD,iBAAS,YAAY,CAAC,IAAI,EAAE,SAAS,QA0BpC;AAmFD,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,MAAM,CAAC,EAAE,IAAI,CAAC;CACb,GAAG,WAAW,CAAC;;;;;;;uBA1IU,MAAM;;;;;;;;eApDnB,OAAO;;;;AA0RpB,wBAWG"}

package/dist/index.cjs

@@ -20586,7 +20586,7 @@ const _hoisted_2$g = {
   placeholder: "required",
   type: "text",
   required: "",
-  class: "pixel"
+  class: "pixel opacity-0"
 };
 const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
   __name: "SignaturePad",
@@ -20604,12 +20604,15 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     required: { type: Boolean }
   }, {
     "modelValue": {},
-    "modelModifiers": {}
+    "modelModifiers": {},
+    "file": {},
+    "fileModifiers": {}
   }),
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", "update:file"],
   setup(__props, { expose: __expose }) {
     const props2 = __props;
     const sigData = vue.useModel(__props, "modelValue");
+    const fileData = vue.useModel(__props, "file");
     const vCanvas = vue.ref();
     let sig = vue.ref();
     let _isEmpty = vue.ref(true);
@@ -20624,6 +20627,24 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
       format2 = format2 || props2.format;
       return format2 ? (_a = sig.value) == null ? void 0 : _a.toDataURL(format2) : (_b = sig.value) == null ? void 0 : _b.toDataURL();
     }
+    function saveFile() {
+      const data2 = save2();
+      if (!data2) return;
+      if (props2.format === "image/svg+xml") {
+        fileData.value = new File([data2], "signature.svg", { type: "image/svg+xml" });
+      } else {
+        const base64Data = data2.split(",")[1];
+        const byteCharacters = atob(base64Data);
+        const byteNumbers = new Array(byteCharacters.length);
+        for (let i2 = 0; i2 < byteCharacters.length; i2++) {
+          byteNumbers[i2] = byteCharacters.charCodeAt(i2);
+        }
+        const byteArray = new Uint8Array(byteNumbers);
+        const blob = new Blob([byteArray], { type: props2.format || "image/png" });
+        const extension = (props2.format || "image/png").split("/")[1];
+        fileData.value = new File([blob], `signature.${extension}`, { type: props2.format || "image/png" });
+      }
+    }
     const fromDataURL = (url) => {
       var _a;
       return (_a = sig.value) == null ? void 0 : _a.fromDataURL(url);
@@ -20685,7 +20706,26 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
       _isEmpty.value = ((_a = sig.value) == null ? void 0 : _a.isEmpty()) ?? false;
       const data2 = save2();
       sigData.value = data2;
+      saveFile();
+    }
+    async function loadFile(file) {
+      if (!file) return;
+      const reader = new FileReader();
+      return new Promise((resolve) => {
+        reader.onload = (e) => {
+          var _a;
+          const dataUrl = (_a = e.target) == null ? void 0 : _a.result;
+          fromDataURL(dataUrl);
+          _isEmpty.value = false;
+          sigData.value = dataUrl;
+          resolve(true);
+        };
+        reader.readAsDataURL(file);
+      });
     }
+    vue.watch(fileData, (newFile) => {
+      loadFile(newFile);
+    });
     function draw() {
       const canvas = vCanvas.value;
       sig.value = new SignaturePad(canvas, signatureOptions.value);
@@ -20708,6 +20748,9 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
       else sig.value.on();
       _isEmpty.value = sig.value.isEmpty();
       sig.value.addEventListener("endStroke", onEndStroke);
+      if (fileData.value) {
+        loadFile(fileData.value);
+      }
     }
     vue.onMounted(draw);
     vue.onUnmounted(() => {

package/dist/index.mjs

@@ -20584,7 +20584,7 @@ const _hoisted_2$g = {
   placeholder: "required",
   type: "text",
   required: "",
-  class: "pixel"
+  class: "pixel opacity-0"
 };
 const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "SignaturePad",
@@ -20602,12 +20602,15 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     required: { type: Boolean }
   }, {
     "modelValue": {},
-    "modelModifiers": {}
+    "modelModifiers": {},
+    "file": {},
+    "fileModifiers": {}
   }),
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", "update:file"],
   setup(__props, { expose: __expose }) {
     const props2 = __props;
     const sigData = useModel(__props, "modelValue");
+    const fileData = useModel(__props, "file");
     const vCanvas = ref();
     let sig = ref();
     let _isEmpty = ref(true);
@@ -20622,6 +20625,24 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       format2 = format2 || props2.format;
       return format2 ? (_a = sig.value) == null ? void 0 : _a.toDataURL(format2) : (_b = sig.value) == null ? void 0 : _b.toDataURL();
     }
+    function saveFile() {
+      const data2 = save2();
+      if (!data2) return;
+      if (props2.format === "image/svg+xml") {
+        fileData.value = new File([data2], "signature.svg", { type: "image/svg+xml" });
+      } else {
+        const base64Data = data2.split(",")[1];
+        const byteCharacters = atob(base64Data);
+        const byteNumbers = new Array(byteCharacters.length);
+        for (let i2 = 0; i2 < byteCharacters.length; i2++) {
+          byteNumbers[i2] = byteCharacters.charCodeAt(i2);
+        }
+        const byteArray = new Uint8Array(byteNumbers);
+        const blob = new Blob([byteArray], { type: props2.format || "image/png" });
+        const extension = (props2.format || "image/png").split("/")[1];
+        fileData.value = new File([blob], `signature.${extension}`, { type: props2.format || "image/png" });
+      }
+    }
     const fromDataURL = (url) => {
       var _a;
       return (_a = sig.value) == null ? void 0 : _a.fromDataURL(url);
@@ -20683,7 +20704,26 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       _isEmpty.value = ((_a = sig.value) == null ? void 0 : _a.isEmpty()) ?? false;
       const data2 = save2();
       sigData.value = data2;
+      saveFile();
+    }
+    async function loadFile(file) {
+      if (!file) return;
+      const reader = new FileReader();
+      return new Promise((resolve) => {
+        reader.onload = (e) => {
+          var _a;
+          const dataUrl = (_a = e.target) == null ? void 0 : _a.result;
+          fromDataURL(dataUrl);
+          _isEmpty.value = false;
+          sigData.value = dataUrl;
+          resolve(true);
+        };
+        reader.readAsDataURL(file);
+      });
     }
+    watch(fileData, (newFile) => {
+      loadFile(newFile);
+    });
     function draw() {
       const canvas = vCanvas.value;
       sig.value = new SignaturePad(canvas, signatureOptions.value);
@@ -20706,6 +20746,9 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       else sig.value.on();
       _isEmpty.value = sig.value.isEmpty();
       sig.value.addEventListener("endStroke", onEndStroke);
+      if (fileData.value) {
+        loadFile(fileData.value);
+      }
     }
     onMounted(draw);
     onUnmounted(() => {

package/package.json

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

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

@@ -35,6 +35,7 @@ const props = withDefaults(defineProps<{
 })
 
 const sigData = defineModel()
+const fileData = defineModel<File>('file')
 
 const vCanvas = $ref<HTMLCanvasElement>()
 
@@ -53,6 +54,31 @@ function save(format?: FormatType) {
 	return format ? sig?.toDataURL(format) : sig?.toDataURL()
 }
 
+function saveFile() {
+	const data = save()
+	if (!data) return
+
+	if (props.format === 'image/svg+xml') {
+		// For SVG, create file directly from the SVG string
+		fileData.value = new File([data], 'signature.svg', { type: 'image/svg+xml' })
+	} else {
+		// For PNG/JPG, convert base64 to blob first
+		const base64Data = data.split(',')[1]
+		const byteCharacters = atob(base64Data)
+		const byteNumbers = new Array(byteCharacters.length)
+
+		for (let i = 0; i < byteCharacters.length; i++) {
+			byteNumbers[i] = byteCharacters.charCodeAt(i)
+		}
+
+		const byteArray = new Uint8Array(byteNumbers)
+		const blob = new Blob([byteArray], { type: props.format || 'image/png' })
+
+		const extension = (props.format || 'image/png').split('/')[1]
+		fileData.value = new File([blob], `signature.${extension}`, { type: props.format || 'image/png' })
+	}
+}
+
 const fromDataURL = (url: string) => sig?.fromDataURL(url)
 
 const isEmpty = () => sig?.isEmpty()
@@ -111,8 +137,28 @@ function onEndStroke() {
 	_isEmpty = sig?.isEmpty() ?? false
 	const data = save()
 	sigData.value = data
+	saveFile()
+}
+
+async function loadFile(file: File | undefined) {
+	if (!file) return
+	const reader = new FileReader()
+	return new Promise((resolve) => {
+		reader.onload = (e) => {
+			const dataUrl = e.target?.result as string
+			fromDataURL(dataUrl)
+			_isEmpty = false
+			sigData.value = dataUrl
+			resolve(true)
+		}
+		reader.readAsDataURL(file)
+	})
 }
 
+watch(fileData, (newFile) => {
+	loadFile(newFile)
+})
+
 function draw() {
 	const canvas = vCanvas!
 	sig = new SignaturePad(canvas, signatureOptions)
@@ -133,6 +179,11 @@ function draw() {
 	else sig.on()
 	_isEmpty = sig.isEmpty()
 	sig.addEventListener('endStroke', onEndStroke)
+
+	// Load initial file if provided
+	if (fileData.value) {
+		loadFile(fileData.value)
+	}
 }
 
 onMounted(draw)
@@ -154,7 +205,7 @@ defineExpose({
 	<div class="bgl_input signature-pad relative" :class="{ 'bg-transparent': disabled }" @touchmove.prevent>
 		<Btn v-if="clearable && !disabled" flat thin icon="refresh" class="position-bottom-end" @click="clear" />
 		<canvas ref="vCanvas" class="canvas" :disabled />
-		<input v-if="required && _isEmpty" placeholder="required" type="text" required class="pixel">
+		<input v-if="required && _isEmpty" placeholder="required" type="text" required class="pixel opacity-0">
 	</div>
 </template>