From 9a3e60e8780669f48c4d903ea865da3ebde38e7c Mon Sep 17 00:00:00 2001
From: Kathleen Tuite <ktuite@getodk.org>
Date: Mon, 5 Feb 2024 10:38:19 -0800
Subject: [PATCH 1/2] Switch collect qr to composition api

---
 src/components/collect-qr.vue | 52 ++++++++++++++++++-----------------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/components/collect-qr.vue b/src/components/collect-qr.vue
index 821585937..ad54223f2 100644
--- a/src/components/collect-qr.vue
+++ b/src/components/collect-qr.vue
@@ -16,34 +16,36 @@ except according to the terms contained in the LICENSE file.
 </template>
 <!-- eslint-enable vue/no-v-html -->
 
-<script>
+<script setup>
+import { computed } from 'vue';
 import qrcode from 'qrcode-generator';
 import pako from 'pako/lib/deflate';
 
-export default {
-  name: 'CollectQr',
-  props: {
-    settings: {
-      type: Object,
-      required: true
-    },
-    errorCorrectionLevel: {
-      type: String,
-      required: true
-    },
-    cellSize: {
-      type: Number,
-      required: true
-    }
+defineOptions({
+  name: 'CollectQr'
+});
+
+const props = defineProps({
+  settings: {
+    type: Object,
+    required: true
+  },
+  errorCorrectionLevel: {
+    type: String,
+    required: true
   },
-  computed: {
-    imgHtml() {
-      const code = qrcode(0, this.errorCorrectionLevel);
-      const json = JSON.stringify(this.settings);
-      code.addData(btoa(pako.deflate(json, { to: 'string' })));
-      code.make();
-      return code.createImgTag(this.cellSize, 0);
-    }
+  cellSize: {
+    type: Number,
+    required: true
   }
-};
+});
+
+const imgHtml = computed(() => {
+  const code = qrcode(0, props.errorCorrectionLevel);
+  const json = JSON.stringify(props.settings);
+  code.addData(btoa(pako.deflate(json, { to: 'string' })));
+  code.make();
+  return code.createImgTag(props.cellSize, 0);
+});
+
 </script>

From f39a6efbade14843b5eb1ab7aa8b47d500c1b521 Mon Sep 17 00:00:00 2001
From: Kathleen Tuite <ktuite@getodk.org>
Date: Mon, 5 Feb 2024 11:42:27 -0800
Subject: [PATCH 2/2] add 15px white border to qr code image

---
 src/components/collect-qr.vue      | 10 +++++++++-
 test/components/collect-qr.spec.js |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/collect-qr.vue b/src/components/collect-qr.vue
index ad54223f2..c06d44de0 100644
--- a/src/components/collect-qr.vue
+++ b/src/components/collect-qr.vue
@@ -45,7 +45,15 @@ const imgHtml = computed(() => {
   const json = JSON.stringify(props.settings);
   code.addData(btoa(pako.deflate(json, { to: 'string' })));
   code.make();
-  return code.createImgTag(props.cellSize, 0);
+  return code.createImgTag(props.cellSize, 15);
 });
 
 </script>
+
+<style lang="scss">
+
+.collect-qr img {
+  margin: -15px;
+}
+
+</style>
diff --git a/test/components/collect-qr.spec.js b/test/components/collect-qr.spec.js
index c2c48c3d0..260722766 100644
--- a/test/components/collect-qr.spec.js
+++ b/test/components/collect-qr.spec.js
@@ -85,6 +85,6 @@ describe('CollectQr', () => {
       10
     );
 
-    width2.should.equal(2 * width1);
+    width2.should.equal(2 * (width1 - 15)); // remove negative padding
   });
 });