fix(QrcodeDropZone): formats prop is not passed along

Closes #453
gruhn · Oct 9, 2024 · 3260651 · 3260651
1 parent 35da4e0
commit 3260651
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 2 deletions.
diff --git a/docs/.vitepress/components/demos/DragDrop.vue b/docs/.vitepress/components/demos/DragDrop.vue
@@ -1,5 +1,24 @@
 <template>
   <div>
+    <p>
+      By default only QR-codes are detected but a variety of other barcode formats are also
+      supported. You can select one or multiple but the more you select the more expensive scanning
+      becomes: <br />
+
+      <span
+        v-for="option in Object.keys(barcodeFormats)"
+        :key="option"
+        class="barcode-format-checkbox"
+      >
+        <input
+          type="checkbox"
+          v-model="barcodeFormats[option]"
+          :id="option"
+        />
+        <label :for="option">{{ option }}</label>
+      </span>
+    </p>
+
     <p class="decode-result">
       Last result: <b>{{ result }}</b>
     </p>
@@ -15,6 +34,7 @@
       @detect="onDetect"
       @dragover="onDragOver"
       @error="logErrors"
+      :formats="selectedBarcodeFormats"
     >
       <div
         class="drop-area"
@@ -29,17 +49,50 @@
 <script>
 import { QrcodeDropZone } from '../../../../src'
 
+/*** barcode formats ***/
+
 export default {
   components: { QrcodeDropZone },
 
   data() {
     return {
       result: null,
       error: null,
-      dragover: false
+      dragover: false,
+      barcodeFormats: {
+        aztec: false,
+        code_128: false,
+        code_39: false,
+        code_93: false,
+        codabar: false,
+        databar: false,
+        databar_expanded: false,
+        data_matrix: false,
+        dx_film_edge: false,
+        ean_13: false,
+        ean_8: false,
+        itf: false,
+        maxi_code: false,
+        micro_qr_code: false,
+        pdf417: false,
+        qr_code: true,
+        rm_qr_code: false,
+        upc_a: false,
+        upc_e: false,
+        linear_codes: false,
+        matrix_codes: false
+      }
     }
   },
 
+  computed: {
+    selectedBarcodeFormats() {
+      return Object
+        .keys(this.barcodeFormats)
+        .filter(format => this.barcodeFormats[format])
+    }   
+  },
+
   methods: {
     onDetect(detectedCodes) {
       console.log(detectedCodes)

diff --git a/src/components/QrcodeDropZone.vue b/src/components/QrcodeDropZone.vue
@@ -46,7 +46,7 @@ const onDrop = ({ dataTransfer }: DragEvent) => {
   const droppedUrl = dataTransfer.getData('text/uri-list')
 
   droppedFiles.forEach((file: File) => {
-    onDetect(processFile(file))
+    onDetect(processFile(file, props.formats))
   })
 
   if (droppedUrl !== '') {