Skip to content

Commit 2977a75

Browse files
sfxcodesfxcode
committed
feat: implement output components schema and enhance data display in FUDataView
1 parent ea93b24 commit 2977a75

2 files changed

Lines changed: 172 additions & 12 deletions

File tree

‎playground/app/pages/index.vue‎

Lines changed: 159 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -70,18 +70,170 @@ const schema = reactive(
7070
],
7171
)
7272
73-
const data = ref({ email: 'tom@sfxcode.com', eu_citizen: false })
73+
const data = ref({ email: 'john.doe@example.com', eu_citizen: false })
74+
75+
// Output components schema for FUDataView
76+
const outputSchema = reactive([
77+
{
78+
$formkit: 'nuxtUIOutputText',
79+
name: 'username',
80+
label: 'Username',
81+
leadingIcon: 'i-heroicons-user',
82+
color: 'primary',
83+
},
84+
{
85+
$formkit: 'nuxtUIOutputText',
86+
name: 'email',
87+
label: 'Email Address',
88+
outputType: 'email',
89+
leadingIcon: 'i-heroicons-envelope',
90+
},
91+
{
92+
$formkit: 'nuxtUIOutputText',
93+
name: 'website',
94+
label: 'Website',
95+
outputType: 'url',
96+
leadingIcon: 'i-heroicons-globe-alt',
97+
},
98+
{
99+
$formkit: 'nuxtUIOutputText',
100+
name: 'phone',
101+
label: 'Phone',
102+
outputType: 'tel',
103+
leadingIcon: 'i-heroicons-phone',
104+
},
105+
{
106+
$formkit: 'nuxtUIOutputText',
107+
name: 'brandColor',
108+
label: 'Brand Color',
109+
outputType: 'color',
110+
},
111+
{
112+
$formkit: 'nuxtUIOutputBoolean',
113+
name: 'isActive',
114+
label: 'Active Status',
115+
trueIcon: 'i-heroicons-check-circle',
116+
falseIcon: 'i-heroicons-x-circle',
117+
trueValue: 'Active',
118+
falseValue: 'Inactive',
119+
},
120+
{
121+
$formkit: 'nuxtUIOutputDate',
122+
name: 'createdAt',
123+
label: 'Created Date',
124+
dateStyle: 'medium',
125+
leadingIcon: 'i-heroicons-calendar',
126+
},
127+
{
128+
$formkit: 'nuxtUIOutputDate',
129+
name: 'lastLogin',
130+
label: 'Last Login',
131+
relative: true,
132+
leadingIcon: 'i-heroicons-clock',
133+
},
134+
{
135+
$formkit: 'nuxtUIOutputNumber',
136+
name: 'revenue',
137+
label: 'Revenue',
138+
formatOptions: {
139+
style: 'currency',
140+
currency: 'USD',
141+
},
142+
leadingIcon: 'i-heroicons-currency-dollar',
143+
color: 'success',
144+
},
145+
{
146+
$formkit: 'nuxtUIOutputNumber',
147+
name: 'completion',
148+
label: 'Completion',
149+
formatOptions: {
150+
style: 'percent',
151+
minimumFractionDigits: 1,
152+
},
153+
leadingIcon: 'i-heroicons-chart-bar',
154+
},
155+
{
156+
$formkit: 'nuxtUIOutputList',
157+
name: 'tags',
158+
label: 'Tags',
159+
listType: 'badge',
160+
color: 'primary',
161+
},
162+
{
163+
$formkit: 'nuxtUIOutputList',
164+
name: 'skills',
165+
label: 'Skills',
166+
separator: ' • ',
167+
leadingIcon: 'i-heroicons-sparkles',
168+
},
169+
{
170+
$formkit: 'nuxtUIOutputLink',
171+
name: 'portfolio',
172+
label: 'Portfolio',
173+
leadingIcon: 'i-heroicons-link',
174+
},
175+
{
176+
$formkit: 'nuxtUIOutputText',
177+
name: 'bio',
178+
label: 'Biography',
179+
variant: 'soft',
180+
},
181+
])
182+
183+
const outputData = ref({
184+
username: 'John Doe',
185+
email: 'john.doe@example.com',
186+
website: 'https://johndoe.dev',
187+
phone: '+1 (555) 123-4567',
188+
brandColor: '#3b82f6',
189+
isActive: true,
190+
createdAt: '2024-01-15T10:30:00Z',
191+
lastLogin: '2024-02-20T14:45:00Z',
192+
revenue: 125750.50,
193+
completion: 0.875,
194+
tags: ['Vue.js', 'TypeScript', 'Nuxt'],
195+
skills: ['Frontend Development', 'UI/UX Design', 'API Integration'],
196+
portfolio: 'https://portfolio.johndoe.dev',
197+
bio: 'Passionate full-stack developer with 5+ years of experience building modern web applications.',
198+
})
74199
</script>
75200

76201
<template>
77202
<div>
78203
<UContainer>
79-
<FUDataEdit
80-
:data="data"
81-
:schema="schema"
82-
debug-data
83-
@data-saved="console.log('Data saved:', $event)"
84-
/>
204+
<div class="flex flex-col lg:flex-row gap-8">
205+
<!-- Form Edit Section -->
206+
<section class="lg:w-1/3">
207+
<h1 class="text-2xl font-bold mb-4">
208+
Form Edit Example
209+
</h1>
210+
<p class="text-muted-foreground mb-6">
211+
Displaying various input component types with FUDataEdit
212+
</p>
213+
<FUDataEdit
214+
:data="data"
215+
:schema="schema"
216+
@data-saved="console.log('Data saved:', $event)"
217+
/>
218+
</section>
219+
220+
<div class="hidden lg:block w-px bg-gray-200 dark:bg-gray-800" />
221+
222+
<!-- Output Display Section -->
223+
<section class="lg:w-2/3 lg:flex-1">
224+
<h1 class="text-2xl font-bold mb-4">
225+
Data View Example
226+
</h1>
227+
<p class="text-muted-foreground mb-6">
228+
Displaying various output component types with FUDataView
229+
</p>
230+
<FUDataView
231+
:data="outputData"
232+
:schema="outputSchema"
233+
form-class="grid grid-cols-3 gap-2"
234+
/>
235+
</section>
236+
</div>
85237
</UContainer>
86238
</div>
87239
</template>

‎src/runtime/components/FUDataView.vue‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,19 @@ if (props.data) {
3535
</script>
3636

3737
<template>
38-
<FormKitSchema
39-
v-if="schema"
40-
:schema="schema"
41-
:data="formData"
42-
/>
38+
<FormKit
39+
v-model="formData"
40+
:actions="false"
41+
:form-class="formClass"
42+
type="form"
43+
>
44+
<FormKitSchema
45+
v-if="schema"
46+
:schema="schema"
47+
:data="formData"
48+
/>
49+
</FormKit>
50+
4351
<slot />
4452
<FuDataDebug
4553
v-if="debugData"

0 commit comments

Comments
 (0)