feat: add QR code modal example

Author: Norbiros

docs/app/components/ComponentPreview.vue

@@ -20,7 +20,7 @@ highlightedCode.value = await codeToHtml(sourceCode!, { lang: 'vue', theme: 'mat
 
 <template>
   <div class="flex flex-col md:flex-row p-4 rounded-lg shadow-lg">
-    <ProseCode class="p-5">
+    <ProseCode class="w-3/5 overflow-auto">
       <div class="[&>pre]:bg-transparent! [&_.line]:inline-block!" v-html="highlightedCode" />
     </ProseCode>
     <div class="flex-1 p-4 bg-muted">

docs/app/components/examples/Qr.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import * as z from 'zod'
+
+const schema = z.object({
+  code: z.array(z.string({ error: 'Kod do rejestracji jest wymagany' })).length(6, 'Kod do rejestracji musi mieć 6 znaków'),
+})
+
+const open = defineModel<boolean>()
+const formRef = useTemplateRef('form')
+
+async function onSubmit(event: z.infer<typeof schema>) {
+  useToast().add({ title: 'Code', description: event.code.join(''), color: 'success' })
+  open.value = false
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" title="QR code" :ui="{ footer: 'justify-end' }">
+    <UButton label="Open" color="neutral" variant="subtle" />
+
+    <template #body>
+      <AutoForm ref="form" :schema="schema" :config="{ submit: false }" @submit="onSubmit">
+        <template #code="{ field, state: stateValue }">
+          <div class="flex items-center space-x-2">
+            <UPinInput v-model="stateValue[field]" class="mr-5" :length="6" />
+            <UButton icon="lucide:qr-code" @click="stateValue[field] = '123123'.split('')" />
+          </div>
+        </template>
+      </AutoForm>
+    </template>
+
+    <template #footer>
+      <UButton label="Close" color="neutral" variant="outline" @click="open = false" />
+      <UButton label="Send" @click="formRef?.submit()" />
+    </template>
+  </UModal>
+</template>

docs/content/3.components/1.form.md

@@ -113,4 +113,10 @@ See [Slots](/customization/slots) for details
 For real world use cases, checkout out the [Hack4KrakSite](https://github.com/search?q=repo%3AHack4Krak%2FHack4KrakSite%20AutoForm&type=code) project.
 ::
 
+### Complex real world example
+
 ::component-preview{name="RealWorld"}
+
+### Custom slots & modals
+
+::component-preview{name="Qr"}