feat: add icon toggle and color picker to QR code component

components/dashboard/links/QRCode.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { Button } from '#components'
+import { Button, Switch } from '#components'
 import { Download, Palette } from 'lucide-vue-next'
 import QRCodeStyling from 'qr-code-styling'
 import { ref, watch } from 'vue'
@@ -14,6 +14,8 @@ const props = defineProps({
     default: '',
   },
 })
+
+const showIcon = ref(true)
 const color = ref('#000000')
 const options = {
   width: 256,
@@ -21,7 +23,12 @@ const options = {
   data: props.data,
   margin: 10,
   qrOptions: { typeNumber: '0', mode: 'Byte', errorCorrectionLevel: 'Q' },
-  imageOptions: { hideBackgroundDots: true, imageSize: 0.4, margin: 2 },
+  imageOptions: {
+    hideBackgroundDots: true,
+    imageSize: 0.3,
+    margin: 0,
+    crossOrigin: 'anonymous',
+  },
   dotsOptions: { type: 'dots', color: '#000000', gradient: null },
   backgroundOptions: { color: '#ffffff', gradient: null },
   image: props.image,
@@ -72,6 +79,16 @@ const options = {
 const qrCode = new QRCodeStyling(options)
 const qrCodeEl = ref(null)
 
+function updateIcon(show) {
+  qrCode.update({
+    image: show ? props.image : '',
+  })
+}
+
+watch(showIcon, (show) => {
+  updateIcon(show)
+})
+
 function updateColor(newColor) {
   qrCode.update({
     dotsOptions: { type: 'dots', color: newColor, gradient: null },
@@ -94,6 +111,7 @@ function downloadQRCode() {
 
 onMounted(() => {
   qrCode.append(qrCodeEl.value)
+  updateIcon(showIcon.value)
 })
 </script>
 
@@ -103,20 +121,26 @@ onMounted(() => {
       ref="qrCodeEl"
       :data-text="data"
     />
-    <div class="flex items-center gap-2">
+    <div class="flex items-center gap-4">
-      <div class="flex items-center gap-2 px-3 py-2 border rounded-md">
+      <div class="flex items-center gap-2">
-        <Palette class="w-4 h-4" />
+        <div class="flex items-center gap-2 px-3 py-2 border rounded-md">
-        <input
+          <Palette class="w-4 h-4" />
-          v-model="color"
+          <input
-          type="color"
+            v-model="color"
-          class="w-20 h-8 rounded cursor-pointer"
+            type="color"
-          title="Change QR code color"
+            class="w-20 h-8 rounded cursor-pointer"
-        >
+            title="Change QR code color"
+          >
+        </div>
+        <Button variant="outline" @click="downloadQRCode">
+          <Download class="w-4 h-4 mr-2" />
+          Download QR Code
+        </Button>
+      </div>
+      <div class="flex items-center gap-2">
+        <span class="text-sm text-gray-500">Icon</span>
+        <Switch v-model="showIcon" />
       </div>
-      <Button variant="outline" @click="downloadQRCode">
-        <Download class="w-4 h-4 mr-2" />
-        Download QR Code
-      </Button>
     </div>
   </div>
 </template>