Skip to content

Commit f394a96

Browse files
andrew-boydandrew-boyd
committed
feat: restructure architecture demo with 4 component files
Split the architecture illustration into separate files: - user-profile.vue: Main form component - user-account.vue: Account fields (name, email, bio, proSubscriber) - user-networks.vue: Connected networks repeater - user-preferences.vue: Email preferences checkboxes Updated data structure to have networks as top-level key.
1 parent 6604bd5 commit f394a96

File tree

6 files changed

+79
-26
lines changed

6 files changed

+79
-26
lines changed

‎_marketing/architecture-form-data.js‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎_marketing/architecture-form-data.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<pre class="language-js shiki shiki-themes github-light github-dark"><code><span class="line" line="1"><span style="--shiki-default:#E2931D;--shiki-dark:#FFCB6B">account</span><span style="--shiki-default:#39ADB5;--shiki-dark:#89DDFF">: {
2+
</span></span><span class="line" line="2"><span style="--shiki-default:#E53935;--shiki-dark:#F07178"> name</span><span style="--shiki-default:#39ADB5;--shiki-dark:#89DDFF">: </span><span style="--shiki-default:#6e923a;--shiki-dark:#C3E88D">'John FormKit'</span><span style="--shiki-default:#39ADB5;--shiki-dark:#89DDFF">,
3+
</span></span><span class="line" line="3"><span style="--shiki-default:#E53935;--shiki-dark:#F07178"> email</span><span style="--shiki-default:#39ADB5;--shiki-dark:#89DDFF">: </span><span style="--shiki-default:#6e923a;--shiki-dark:#C3E88D">'[email protected]'</span><span style="--shiki-default:#39ADB5;--shiki-dark:#89DDFF">,
4+
</span></span><span class="line" line="4"><span style="--shiki-default:#E53935;--shiki-dark:#F07178"> bio</span><span style="--shiki-default:#39ADB5;--shiki-dark:#89DDFF">: </span><span style="--shiki-default:#6e923a;--shiki-dark:#C3E88D">'I love building forms with FormKit!'</span><span style="--shiki-default:#39ADB5;--shiki-dark:#89DDFF">,
5+
</span></span><span class="line" line="5"><span style="--shiki-default:#E53935;--shiki-dark:#F07178"> proSubscriber</span><span style="--shiki-default:#39ADB5;--shiki-dark:#89DDFF">: </span><span style="--shiki-default:#39ADB5;--shiki-dark:#89DDFF">true
6+
</span></span><span class="line" line="6"><span style="--shiki-default:#39ADB5;--shiki-dark:#89DDFF">},
7+
</span></span><span class="line" line="7"><span style="--shiki-default:#E2931D;--shiki-dark:#FFCB6B">networks</span><span style="--shiki-default:#39ADB5;--shiki-dark:#89DDFF">: [
8+
</span></span><span class="line" line="8"><span style="--shiki-default:#39ADB5;--shiki-dark:#89DDFF"> {
9+
</span></span><span class="line" line="9"><span style="--shiki-default:#E53935;--shiki-dark:#F07178"> name</span><span style="--shiki-default:#39ADB5;--shiki-dark:#89DDFF">: </span><span style="--shiki-default:#6e923a;--shiki-dark:#C3E88D">'twitter'</span><span style="--shiki-default:#39ADB5;--shiki-dark:#89DDFF">,
10+
</span></span><span class="line" line="10"><span style="--shiki-default:#E53935;--shiki-dark:#F07178"> username</span><span style="--shiki-default:#39ADB5;--shiki-dark:#89DDFF">: </span><span style="--shiki-default:#6e923a;--shiki-dark:#C3E88D">'@FormKit'
11+
</span></span><span class="line" line="11"><span style="--shiki-default:#39ADB5;--shiki-dark:#89DDFF"> },
12+
</span></span><span class="line" line="12"><span style="--shiki-default:#39ADB5;--shiki-dark:#89DDFF"> {
13+
</span></span><span class="line" line="13"><span style="--shiki-default:#E53935;--shiki-dark:#F07178"> name</span><span style="--shiki-default:#39ADB5;--shiki-dark:#89DDFF">: </span><span style="--shiki-default:#6e923a;--shiki-dark:#C3E88D">'github'</span><span style="--shiki-default:#39ADB5;--shiki-dark:#89DDFF">,
14+
</span></span><span class="line" line="14"><span style="--shiki-default:#E53935;--shiki-dark:#F07178"> username</span><span style="--shiki-default:#39ADB5;--shiki-dark:#89DDFF">: </span><span style="--shiki-default:#6e923a;--shiki-dark:#C3E88D">'FormKit'
15+
</span></span><span class="line" line="15"><span style="--shiki-default:#39ADB5;--shiki-dark:#89DDFF"> }
16+
</span></span><span class="line" line="16"><span style="--shiki-default:#39ADB5;--shiki-dark:#89DDFF">],
17+
</span></span><span class="line" line="17"><span style="--shiki-default:#E2931D;--shiki-dark:#FFCB6B">preferences</span><span style="--shiki-default:#39ADB5;--shiki-dark:#89DDFF">: [
18+
</span></span><span class="line" line="18"><span style="--shiki-default:#6e923a;--shiki-dark:#C3E88D"> 'marketing'</span><span style="--shiki-default:#39ADB5;--shiki-dark:#89DDFF">,
19+
</span></span><span class="line" line="19"><span style="--shiki-default:#6e923a;--shiki-dark:#C3E88D"> 'updates'
20+
</span></span><span class="line" line="20"><span style="--shiki-default:#39ADB5;--shiki-dark:#89DDFF">]
21+
</span></span></code></pre>

‎_marketing/user-account.vue‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<!-- %partial% -->
3+
<FormKit type="group" name="account">
4+
<FormKit
5+
type="text"
6+
name="name"
7+
label="Full Name"
8+
validation="required"
9+
/>
10+
<FormKit
11+
type="email"
12+
name="email"
13+
label="Email Address"
14+
validation="required|email"
15+
/>
16+
<FormKit
17+
type="textarea"
18+
name="bio"
19+
label="Bio"
20+
:rows="3"
21+
/>
22+
<FormKit
23+
type="checkbox"
24+
name="proSubscriber"
25+
label="FormKit Pro subscriber"
26+
/>
27+
</FormKit>
28+
<!-- %partial% -->
29+
</template>

‎_marketing/user-networks.vue‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<!-- %partial% -->
3+
<FormKit
4+
type="repeater"
5+
name="networks"
6+
label="Connected Networks"
7+
:min="1"
8+
>
9+
<FormKit type="text" name="name" label="Network" />
10+
<FormKit type="text" name="username" label="Username" />
11+
</FormKit>
12+
<!-- %partial% -->
13+
</template>

‎_marketing/user-preferences.vue‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<!-- %partial% -->
3+
<FormKit
4+
type="checkbox"
5+
name="preferences"
6+
label="Email Preferences"
7+
:options="[
8+
'marketing',
9+
'updates',
10+
]"
11+
/>
12+
<!-- %partial% -->
13+
</template>

_marketing/architecture-form.vue renamed to _marketing/user-profile.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22
<!-- %partial% -->
33
<FormKit type="form">
44
<!-- 👀 No bindings, no modeling -->
5-
<UserAccountFields />
6-
<UserMessagingPreferences />
5+
<UserAccount />
6+
<UserNetworks />
7+
<UserPreferences />
78
</FormKit>
89
<!-- %partial% -->
910
</template>

0 commit comments

Comments
 (0)