Merge pull request #7 from YPBConnectPlatform/feature/mm-3017-add-dat…

…a-elements-tracking

feat: [MM-3017] Add Data Elements for Tracking

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ypbconnectplatform/qrcode-vue3",
   "private": false,
-  "version": "1.9.0",
+  "version": "1.9.1",
   "description": "Add a style and an image to your QR code Vue3",
   "main": "./dist/index.cjs.js",
   "types": "src/index.d.ts",

src/QRCodeVue3.vue

@@ -11,7 +11,7 @@ export interface Props {
   imgclass: string;
   myclass: string;
   downloadButton: string;
-  ButtonName: string;
+  buttonName: string;
   qrOptions: any;
   imageOptions: any;
   dotsOptions: any;
@@ -25,6 +25,7 @@ export interface Props {
   downloadOptions: any;
   isDownloadBtnDisabled: boolean;
   previewImage: any;
+  dataIdText?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -36,7 +37,7 @@ const props = withDefaults(defineProps<Props>(), {
   imgclass: "",
   myclass: "",
   downloadButton: "",
-  ButtonName: "Download",
+  buttonName: "Download",
   qrOptions: {
     typeNumber: 0,
     mode: "Byte",
@@ -76,7 +77,7 @@ const props = withDefaults(defineProps<Props>(), {
     <QRCodeVue3Async
       v-bind="$attrs"
       :background-options="props.backgroundOptions"
-      :button-name="props.ButtonName"
+      :button-name="props.buttonName"
       :corners-dot-options="props.cornersDotOptions"
       :corners-square-options="props.cornersSquareOptions"
       :dots-options="props.dotsOptions"
@@ -96,6 +97,7 @@ const props = withDefaults(defineProps<Props>(), {
       :width="props.width"
       :is-download-btn-disabled="props.isDownloadBtnDisabled"
       :preview-image="previewImage"
+      :data-id-text="dataIdText"
     />
   </Suspense>
 </template>

src/QRCodeVue3Async.vue

@@ -12,7 +12,7 @@ export interface Props {
   imgclass: string;
   myclass: string;
   downloadButton: string;
-  ButtonName: string;
+  buttonName: string;
   qrOptions: any;
   imageOptions: any;
   dotsOptions: any;
@@ -26,6 +26,7 @@ export interface Props {
   downloadOptions: any;
   isDownloadBtnDisabled: boolean;
   previewImage: any;
+  dataIdText?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -37,7 +38,7 @@ const props = withDefaults(defineProps<Props>(), {
   imgclass: "",
   myclass: "",
   downloadButton: "",
-  ButtonName: "Download",
+  buttonName: "Download",
   qrOptions: {
     typeNumber: 0,
     mode: "Byte",
@@ -107,8 +108,8 @@ defineExpose({ onDownloadClick });
       />
     </div>
     <div v-if="imageUrl && download" class="text-center">
-      <button @click.prevent="onDownloadClick" :class="downloadButton">
-        {{ ButtonName }}
+      <button @click.prevent="onDownloadClick" :class="downloadButton" :data-id="dataIdText">
+        {{ buttonName }}
       </button>
     </div>
     <div v-if="imageUrl && downloadWithIcon" class="text-center">
@@ -118,6 +119,7 @@ defineExpose({ onDownloadClick });
         @click.prevent="onDownloadClick"
         :class="downloadButton"
         :disabled="isDownloadBtnDisabled"
+        :data-id="dataIdText"
       >
         <span class="v-btn__overlay"></span><span class="v-btn__underlay"></span
         ><span class="v-btn__prepend"
@@ -126,7 +128,7 @@ defineExpose({ onDownloadClick });
             aria-hidden="true"
           ></i></span
         ><span class="v-btn__content" data-no-activator=""
-          ><!--v-if--><span>{{ ButtonName }}</span></span
+          ><!--v-if--><span>{{ buttonName }}</span></span
         ><span class="v-btn__append"></span
         ><!---->
       </button>