Quasar qr-code scanner

You can use it to submit Github tickets for Quasar v1.

by s_light

HTML

<script src="qr-scanner"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qr-scanner/1.4.1/qr-scanner.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@quasar/extras/material-icons/material-icons.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quasar@2/dist/quasar.prod.css">
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2/dist/quasar.umd.prod.js"></script>

<div id="q-app">
  <div class="q-ma-md">
    Running Quasar v{{ $q.version }}
  </div>
  <div class="q-ma-md">
    <q-file
            label="photos"
            v-model="files"
            accept=".jpg, .png, image/*"
            multiple
            counter
            clearable
            use-chips
            filled
            append
     ></q-file>
        <q-separator></q-separator>
        <ul>
            <li
                class="card"
                v-for="(item, index) in imageObjList"
                :key="item.id"
            >
                <img
                    :src="item.objURL"
                />
                {{index}}
            </li>
        </ul>
  </div>
</div>

Vue

const {
  ref,
  unref,
  watch,
} = Vue
const {
  useQuasar
} = Quasar

//const QrScanner = 'qr-scanner'
//import QrScanner from 'https://cdnjs.cloudflare.com/ajax/libs/qr-scanner/1.4.1/qr-scanner.min.js';

const app = Vue.createApp({setup() {
    const $q = useQuasar()

    const imageObjList = []
    const imageObj_template = {
      id: 0,
      file: '',
      qrdata: null,
      qrscanDone: false,
    }

    const imageObjListAdd = async (file) => {
      const imageObj = structuredClone(imageObj_template)
      imageObj.file = file
      imageObj.objURL = URL.createObjectURL(file)
      imageObjList.push(imageObj)
      return QrScanner.scanImage(unref(file), {
          // qrEngine: engine,
          // canvas: canvas,
          returnDetailedScanResult: true,
        })
        .then((result) => {
          console.log(result)
          imageObj.qrdata = result
          imageObj.qrerror = null

        })
        .catch((err) => {
          console.log(err || 'No QR code found.')
          imageObj.qrdata = null
          imageObj.qrerror = err
        })
        .finally(() => {
          imageObj.qrscanDone = true
        })
      // return promise....
    }

    watch(files, (newFiles, oldFiles) => {
      if (newFiles instanceof Array) {
        // todo:
        // compare all files...
        // for now e use the fast route
        const qrscanning = []
        for (const file of newFiles) {
          if (!(oldFiles && oldFiles.includes(file))) {
            qrscanning.push(imageObjListAdd(file))
          }
        }
        // Promise.all(qrscanning).then(() => {
        Promise.allSettled(qrscanning).then(() => {
          console.log("all images are scanned...");
        })
      } else if (newFiles == null) {
        // all files are cleared.
        // so lets reset ouer other arrays..
        imageObjList.length = 0
      }
    })


    return {
      onRejected,
      imageObjList,
    }
}})

app.use(Quasar, {
  config:...