Skip to content

Commit 06df146

Browse files
sfxcodesfxcode
committed
feat: add examples for FormKit usage without schema and slots in FormKit components
1 parent f3b1d65 commit 06df146

File tree

3 files changed

+202
-0
lines changed

3 files changed

+202
-0
lines changed

‎playground/app/app.vue‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,20 @@ const items = ref<NavigationMenuItem[]>([
152152
label: 'Form Components',
153153
icon: 'i-lucide-box',
154154
active: false,
155+
children: [
156+
{
157+
label: 'Without Schema',
158+
icon: 'i-lucide-file-code',
159+
description: 'Form example without schema, using direct component approach.',
160+
to: '/form/without-schema',
161+
},
162+
{
163+
label: 'Slot Usage',
164+
icon: 'i-lucide-layers',
165+
description: 'Examples of using slots to customize FormKit components with Nuxt UI.',
166+
to: '/form/slot',
167+
},
168+
],
155169
},
156170
{
157171
label: 'Composables',

‎playground/app/pages/form/slot.vue‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<script setup lang='ts'>
2+
import { FormKit } from '@formkit/vue'
3+
import type { ChipProps, SelectItem } from '@nuxt/ui'
4+
5+
const data = ref({ })
6+
7+
async function submitHandler() {
8+
console.log('Form Submitted ...', 'Form submitted successfully')
9+
}
10+
11+
const items = ref([
12+
{
13+
label: 'bug',
14+
value: 'bug',
15+
chip: {
16+
color: 'error',
17+
},
18+
},
19+
{
20+
label: 'feature',
21+
value: 'feature',
22+
chip: {
23+
color: 'success',
24+
},
25+
},
26+
{
27+
label: 'enhancement',
28+
value: 'enhancement',
29+
chip: {
30+
color: 'info',
31+
},
32+
},
33+
] satisfies SelectItem[])
34+
35+
function getChip(value: string) {
36+
return items.value.find(item => item.value === value)?.chip
37+
}
38+
</script>
39+
40+
<template>
41+
<UContainer>
42+
<div class="mb-8">
43+
<h1 class="text-4xl font-bold mb-4">
44+
FormKit Slots Usage
45+
</h1>
46+
<p class="text-lg text-muted-foreground mb-2">
47+
This example demonstrates how to use slots with FormKit and Nuxt UI components to customize the rendering and add additional elements.
48+
</p>
49+
<p class="text-muted-foreground mb-4">
50+
Slots provide a powerful way to inject custom content into FormKit components. All Nuxt UI component slots are available and merged with FormKit's base slots.
51+
</p>
52+
<div class="bg-muted p-4 rounded-lg border">
53+
<h3 class="font-semibold mb-2">
54+
About Slots
55+
</h3>
56+
<ul class="list-disc list-inside space-y-1 text-sm text-muted-foreground">
57+
<li>Use the <code class="px-1 py-0.5 bg-background rounded">#leading</code> slot to add content before the input (like icons or chips)</li>
58+
<li>Use the <code class="px-1 py-0.5 bg-background rounded">#trailing</code> slot to add content after the input</li>
59+
<li>Access <code class="px-1 py-0.5 bg-background rounded">modelValue</code>, <code class="px-1 py-0.5 bg-background rounded">ui</code>, and other props through slot scope</li>
60+
<li>All Nuxt UI component-specific slots (like USelect, UInput, etc.) are preserved and available</li>
61+
<li>FormKit base slots (label, help, messages, etc.) are also available and merged with component slots</li>
62+
</ul>
63+
</div>
64+
</div>
65+
66+
<USeparator class="my-8" />
67+
68+
<div class="space-y-12">
69+
<section>
70+
<h2 class="text-2xl font-semibold mb-4">
71+
Leading Slot Example
72+
</h2>
73+
<p class="text-muted-foreground mb-6">
74+
This example shows how to use the <code class="px-1 py-0.5 bg-muted rounded">#leading</code> slot to display a colored chip based on the selected value.
75+
The slot receives <code class="px-1 py-0.5 bg-muted rounded">modelValue</code> and <code class="px-1 py-0.5 bg-muted rounded">ui</code> props,
76+
allowing you to render dynamic content that responds to the current selection.
77+
</p>
78+
<FUDataEdit
79+
:data="data"
80+
:debug-data="true"
81+
@data-saved="submitHandler"
82+
>
83+
<FormKit
84+
type="nuxtUISelect"
85+
name="option"
86+
label="Option"
87+
:options="items"
88+
class="w-46"
89+
placeholder="Select an option"
90+
validation="required"
91+
>
92+
<template #leading="{ modelValue, ui }">
93+
<UChip
94+
v-if="modelValue"
95+
v-bind="getChip(modelValue)"
96+
inset
97+
standalone
98+
:size="(ui.itemLeadingChipSize() as ChipProps['size'])"
99+
:class="ui.itemLeadingChip()"
100+
/>
101+
</template>
102+
</FormKit>
103+
</FUDataEdit>
104+
</section>
105+
</div>
106+
</UContainer>
107+
</template>
108+
109+
<style lang='scss' scoped>
110+
111+
</style>

‎playground/app/pages/form/without-schema.vue‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<script setup lang='ts'>
2+
import { FormKit, FormKitMessages } from '@formkit/vue'
3+
4+
const data = ref({ })
5+
6+
async function submitHandler() {
7+
console.log('Form Submitted ...', 'Form submitted successfully')
8+
}
9+
10+
const options = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig']
11+
</script>
12+
13+
<template>
14+
<UContainer>
15+
<div class="mb-8">
16+
<h1 class="text-4xl font-bold mb-4">
17+
FormKit Without Schema
18+
</h1>
19+
<p class="text-lg text-muted-foreground mb-2">
20+
This example demonstrates using FormKit components directly without schema definition, providing a more traditional component-based approach.
21+
</p>
22+
<p class="text-muted-foreground">
23+
Build forms using individual FormKit components with Nuxt UI integration for inputs and selects.
24+
</p>
25+
</div>
26+
27+
<USeparator class="my-8" />
28+
29+
<div class="space-y-12">
30+
<section>
31+
<h2 class="text-2xl font-semibold mb-4">
32+
Direct Component Usage
33+
</h2>
34+
<p class="text-muted-foreground mb-6">
35+
Use FormKit components directly in your template with validation and data binding.
36+
</p>
37+
<FUDataEdit
38+
:data="data"
39+
:debug-data="true"
40+
@data-saved="submitHandler"
41+
>
42+
<FormKit
43+
type="nuxtUIInput"
44+
name="name"
45+
validation="required"
46+
label="Name"
47+
/>
48+
<FormKit
49+
type="nuxtUISelect"
50+
name="option"
51+
label="Option"
52+
:options="options"
53+
class="w-46"
54+
placeholder="Select an option"
55+
validation="required"
56+
/>
57+
<template #messages>
58+
<USeparator class="my-2" />
59+
<FormKitMessages class="p-formkit-data-edit-messages" />
60+
</template>
61+
<template #submit>
62+
<UButton
63+
type="submit"
64+
label="Save"
65+
icon="i-lucide-save"
66+
@submit="submitHandler"
67+
/>
68+
</template>
69+
</FUDataEdit>
70+
</section>
71+
</div>
72+
</UContainer>
73+
</template>
74+
75+
<style lang='scss' scoped>
76+
77+
</style>

0 commit comments

Comments
 (0)