Skip to content

Commit fa9425f

Browse files
zeejerszeejers
committed
doc update
1 parent a86f6f7 commit fa9425f

3 files changed

Lines changed: 148 additions & 55 deletions

File tree

‎docs/assets/quickforms-showcase-quasar.png‎

587 KB
Loading

‎docs/assets/quickforms-showcase-vue.png‎

657 KB
Loading

‎packages/vue/dev/Showcase.vue‎

Lines changed: 148 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,136 @@
11
<script setup lang="ts">
2-
import { ref } from 'vue';
3-
import DynamicForm from '../src/components/DynamicForm.vue';
4-
import type { JSONSchema } from '@quickflo/quickforms';
2+
import { ref } from "vue";
3+
import DynamicForm from "../src/components/DynamicForm.vue";
4+
import type { JSONSchema } from "@quickflo/quickforms";
55
6-
const emit = defineEmits(['back']);
6+
const emit = defineEmits(["back"]);
77
88
const formData = ref({});
99
1010
// Single comprehensive schema
1111
const schema: JSONSchema = {
12-
type: 'object',
12+
type: "object",
1313
properties: {
1414
name: {
15-
type: 'string',
16-
title: 'Full Name',
17-
minLength: 2
15+
type: "string",
16+
title: "Full Name",
17+
minLength: 2,
1818
},
1919
email: {
20-
type: 'string',
21-
format: 'email',
22-
title: 'Email Address'
20+
type: "string",
21+
format: "email",
22+
title: "Email Address",
2323
},
2424
age: {
25-
type: 'number',
26-
title: 'Age',
25+
type: "number",
26+
title: "Age",
2727
minimum: 18,
28-
maximum: 120
28+
maximum: 120,
2929
},
3030
bio: {
31-
type: 'string',
32-
format: 'textarea',
33-
title: 'About You',
34-
maxLength: 200
31+
type: "string",
32+
format: "textarea",
33+
title: "About You",
34+
maxLength: 200,
3535
},
3636
role: {
37-
type: 'string',
38-
enum: ['developer', 'designer', 'manager', 'other'],
39-
title: 'Role',
40-
'x-enum-labels': {
41-
developer: '💻 Developer',
42-
designer: '🎨 Designer',
43-
manager: '📊 Manager',
44-
other: '👤 Other'
45-
}
37+
type: "string",
38+
enum: ["developer", "designer", "manager", "other"],
39+
title: "Role",
40+
"x-enum-labels": {
41+
developer: "💻 Developer",
42+
designer: "🎨 Designer",
43+
manager: "📊 Manager",
44+
other: "👤 Other",
45+
},
4646
},
4747
skills: {
48-
type: 'array',
49-
title: 'Skills',
48+
type: "array",
49+
title: "Skills",
5050
items: {
51-
type: 'string'
51+
type: "string",
5252
},
5353
minItems: 1,
54-
maxItems: 5
54+
maxItems: 5,
5555
},
5656
subscribe: {
57-
type: 'boolean',
58-
title: 'Subscribe to newsletter',
59-
default: true
60-
}
57+
type: "boolean",
58+
title: "Subscribe to newsletter",
59+
default: true,
60+
},
6161
},
62-
required: ['name', 'email', 'age', 'role']
62+
required: ["name", "email", "age", "role"],
6363
};
64-
6564
</script>
6665

6766
<template>
68-
<div style="min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 3rem 1rem;">
69-
<div style="max-width: 1200px; margin: 0 auto;">
67+
<div
68+
style="
69+
min-height: 100vh;
70+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
71+
padding: 3rem 1rem;
72+
"
73+
>
74+
<div style="max-width: 1200px; margin: 0 auto">
7075
<!-- Back Button -->
71-
<div style="margin-bottom: 2rem;">
76+
<div style="margin-bottom: 2rem">
7277
<button
7378
@click="emit('back')"
74-
style="padding: 0.75rem 1.5rem; background: rgba(255,255,255,0.2); color: white; border: 2px solid white; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; backdrop-filter: blur(10px);"
79+
style="
80+
padding: 0.75rem 1.5rem;
81+
background: rgba(255, 255, 255, 0.2);
82+
color: white;
83+
border: 2px solid white;
84+
border-radius: 8px;
85+
font-size: 1rem;
86+
font-weight: 600;
87+
cursor: pointer;
88+
backdrop-filter: blur(10px);
89+
"
7590
>
7691
← Back to Development Test
7792
</button>
7893
</div>
7994

8095
<!-- Header -->
81-
<div style="text-align: center; margin-bottom: 3rem;">
82-
<h1 style="color: white; font-size: 3rem; margin: 0 0 1rem 0; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.2);">
83-
QuickForms Showcase
96+
<div style="text-align: center; margin-bottom: 3rem">
97+
<h1
98+
style="
99+
color: white;
100+
font-size: 3rem;
101+
margin: 0 0 1rem 0;
102+
font-weight: 700;
103+
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
104+
"
105+
>
106+
QuickForms X Vue
84107
</h1>
85-
<p style="color: rgba(255,255,255,0.9); font-size: 1.25rem; margin: 0;">
108+
<p
109+
style="color: rgba(255, 255, 255, 0.9); font-size: 1.25rem; margin: 0"
110+
>
86111
Beautiful, powerful forms from JSON Schema
87112
</p>
88113
</div>
89114

90-
91115
<!-- Main Content -->
92-
<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; max-width: 1000px; margin: 0 auto;">
116+
<div
117+
style="
118+
display: grid;
119+
grid-template-columns: 2fr 1fr;
120+
gap: 2rem;
121+
max-width: 1000px;
122+
margin: 0 auto;
123+
"
124+
>
93125
<!-- Form Panel -->
94-
<div style="background: white; padding: 2rem; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.15);">
126+
<div
127+
style="
128+
background: white;
129+
padding: 2rem;
130+
border-radius: 16px;
131+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
132+
"
133+
>
95134
<DynamicForm
96135
:schema="schema"
97136
v-model="formData"
@@ -101,18 +140,72 @@ const schema: JSONSchema = {
101140

102141
<!-- Info Panel -->
103142
<div>
104-
<div style="background: white; padding: 1.5rem; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); margin-bottom: 1.5rem;">
105-
<h3 style="margin: 0 0 1rem 0; color: #1f2937; font-size: 1.25rem; font-weight: 600;">
143+
<div
144+
style="
145+
background: white;
146+
padding: 1.5rem;
147+
border-radius: 16px;
148+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
149+
margin-bottom: 1.5rem;
150+
"
151+
>
152+
<h3
153+
style="
154+
margin: 0 0 1rem 0;
155+
color: #1f2937;
156+
font-size: 1.25rem;
157+
font-weight: 600;
158+
"
159+
>
106160
📋 JSON Schema
107161
</h3>
108-
<pre style="margin: 0; color: #374151; font-size: 0.75rem; line-height: 1.4; max-height: 400px; overflow-y: auto; background: #f5f5f5; padding: 1rem; border-radius: 8px; white-space: pre-wrap; word-wrap: break-word;">{{ JSON.stringify(schema, null, 2) }}</pre>
162+
<pre
163+
style="
164+
margin: 0;
165+
color: #374151;
166+
font-size: 0.75rem;
167+
line-height: 1.4;
168+
max-height: 400px;
169+
overflow-y: auto;
170+
background: #f5f5f5;
171+
padding: 1rem;
172+
border-radius: 8px;
173+
white-space: pre-wrap;
174+
word-wrap: break-word;
175+
"
176+
>{{ JSON.stringify(schema, null, 2) }}</pre
177+
>
109178
</div>
110-
111-
<div style="background: #1f2937; padding: 1.5rem; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.15);">
112-
<h3 style="margin: 0 0 1rem 0; color: white; font-size: 1rem; font-weight: 600;">
179+
180+
<div
181+
style="
182+
background: #1f2937;
183+
padding: 1.5rem;
184+
border-radius: 16px;
185+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
186+
"
187+
>
188+
<h3
189+
style="
190+
margin: 0 0 1rem 0;
191+
color: white;
192+
font-size: 1rem;
193+
font-weight: 600;
194+
"
195+
>
113196
📊 Form Data
114197
</h3>
115-
<pre style="margin: 0; color: #f3f4f6; font-size: 0.75rem; line-height: 1.4; max-height: 300px; overflow-y: auto;">{{ JSON.stringify(formData, null, 2) }}</pre>
198+
<pre
199+
style="
200+
margin: 0;
201+
color: #f3f4f6;
202+
font-size: 0.75rem;
203+
line-height: 1.4;
204+
max-height: 300px;
205+
overflow-y: auto;
206+
"
207+
>{{ JSON.stringify(formData, null, 2) }}</pre
208+
>
116209
</div>
117210
</div>
118211
</div>

0 commit comments

Comments
 (0)