Merge pull request #3 from MineraleYT:qrcode

Add color picker and simplify QR code component

components/dashboard/links/QRCode.vue

@@ -2,6 +2,7 @@
 import { Button } from '#components'
 import { Download } from 'lucide-vue-next'
 import QRCodeStyling from 'qr-code-styling'
+import { ref, watch } from 'vue'
 
 const props = defineProps({
   data: {
@@ -13,6 +14,7 @@ const props = defineProps({
     default: '',
   },
 })
+const color = ref('#000000')
 const options = {
   width: 256,
   height: 256,
@@ -70,6 +72,18 @@ const options = {
 const qrCode = new QRCodeStyling(options)
 const qrCodeEl = ref(null)
 
+function updateColor(newColor) {
+  qrCode.update({
+    dotsOptions: { type: 'dots', color: newColor, gradient: null },
+    cornersSquareOptions: { type: 'extra-rounded', color: newColor },
+    cornersDotOptions: { type: 'dot', color: newColor },
+  })
+}
+
+watch(color, (newColor) => {
+  updateColor(newColor)
+})
+
 function downloadQRCode() {
   const slug = props.data.split('/').pop()
   qrCode.download({
@@ -89,9 +103,24 @@ onMounted(() => {
       ref="qrCodeEl"
       :data-text="data"
     />
-    <Button variant="outline" @click="downloadQRCode">
+    <div class="flex items-center gap-2">
-      <Download class="w-4 h-4 mr-2" />
+      <div class="relative flex items-center">
-      Download QR Code
+        <div
-    </Button>
+          class="w-8 h-8 rounded-full border cursor-pointer overflow-hidden"
+          :style="{ backgroundColor: color }"
+        >
+          <input
+            v-model="color"
+            type="color"
+            class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+            title="Change QR code color"
+          >
+        </div>
+      </div>
+      <Button variant="outline" @click="downloadQRCode">
+        <Download class="w-4 h-4 mr-2" />
+        Download QR Code
+      </Button>
+    </div>
   </div>
 </template>

server/api/link/create.post.ts

@@ -1,15 +1,7 @@
-import { LinkSchema, nanoid } from '@/schemas/link'
+import { LinkSchema } from '@/schemas/link'
 
 export default eventHandler(async (event) => {
-  const body = await readBody(event)
+  const link = await readValidatedBody(event, LinkSchema.parse)
-
-  // If no slug provided, generate one with default length from env or fall back to default
-  if (!body.slug) {
-    const { slugDefaultLength } = useRuntimeConfig().public
-    body.slug = slugDefaultLength ? nanoid(+slugDefaultLength)() : nanoid()()
-  }
-
-  const link = await LinkSchema.parse(body)
 
   const { caseSensitive } = useRuntimeConfig(event)