Skip to content

Commit ba5f9c1

Browse files
sfxcodesfxcode
committed
faet(forms): add new form sample
1 parent 918c3d9 commit ba5f9c1

File tree

7 files changed

+1271
-1208
lines changed

7 files changed

+1271
-1208
lines changed

‎app/App.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import "assets/sass/sidebar";
2+
@import "assets/sass/form";
23
@import "assets/sass/main";
34

45

‎app/assets/sass/form.scss

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.p-formkit-data-view {
2+
.formkit-form {
3+
.formkit-outer {
4+
padding-bottom: 0.8rem;
5+
}
6+
7+
&.form-horizontal {
8+
padding-bottom: 1.2rem;
9+
}
10+
11+
.formkit-help {
12+
margin: 0;
13+
}
14+
}
15+
}

‎app/composables/navigation.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,14 @@ export function useNavigationMenu() {
1717
child: [
1818
{ href: '/prime/datatable', title: 'DataTable' },
1919
{ href: '/prime/messages', title: 'Messages' },
20-
{ href: '/prime/Validation', title: 'Validation' },
20+
],
21+
},
22+
{
23+
title: 'Forms',
24+
icon: 'pi pi-check-square',
25+
child: [
26+
{ href: '/form', title: 'Basic' },
27+
{ href: '/form/toggle', title: 'Edit / View' },
2128
],
2229
},
2330
{

‎app/pages/prime/validation.vue renamed to ‎app/pages/form/index.vue

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ async function submitHandler() {
128128
<template>
129129
<div class="card flex flex-wrap gap-10">
130130
<div class="basis-1/3 md:basis-1/4">
131-
<h2>Data Edit</h2>
131+
<h2>Basic Demo</h2>
132132

133133
<div v-if="data" class="min-w-25rem">
134134
<FormKitDataEdit
@@ -152,7 +152,4 @@ async function submitHandler() {
152152
</template>
153153

154154
<style lang='scss' scoped>
155-
.myFormkit {
156-
157-
}
158155
</style>

‎app/pages/form/toggle.vue

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<script setup lang="ts">
2+
import { FormKitDataEdit, FormKitDataView } from '@sfxcode/formkit-primevue/components'
3+
import { useFormKitSchema } from '@sfxcode/formkit-primevue/composables'
4+
5+
const { addElement } = useFormKitSchema()
6+
const { t } = useI18n()
7+
8+
const horizontal = ref(false)
9+
const edit = ref(true)
10+
11+
const schema = reactive(
12+
[
13+
addElement('h2', ['Register ', '$email']),
14+
addElement('h3', 'Header Text H3'),
15+
{
16+
$formkit: 'primeInputText',
17+
name: 'name',
18+
label: 'Name',
19+
validation: 'required',
20+
},
21+
{
22+
$formkit: 'primeInputText',
23+
name: 'email',
24+
label: 'Email',
25+
help: 'This will be used for your account.',
26+
validation: 'required|email',
27+
iconPrefix: 'pi pi-book',
28+
},
29+
{
30+
$formkit: 'primeTextarea',
31+
name: 'text',
32+
label: 'Text',
33+
validation: '',
34+
rows: '6',
35+
},
36+
{
37+
$formkit: 'primeInputNumber',
38+
name: 'number',
39+
label: 'Balance',
40+
validation: 'max:10000',
41+
useGrouping: true,
42+
minFractionDigits: 2,
43+
},
44+
{
45+
$formkit: 'primeDatePicker',
46+
name: 'date',
47+
label: 'Date',
48+
},
49+
addElement('h3', 'Useful Links'),
50+
{
51+
$formkit: 'primeOutputLink',
52+
name: 'field',
53+
label: 'Google',
54+
value: 'https://www.google.de',
55+
iconSuffix: 'pi pi-check',
56+
prefix: '-> ',
57+
},
58+
],
59+
)
60+
61+
const outputSchema = reactive(
62+
[
63+
addElement('h2', ['Register ', '$email']),
64+
addElement('h3', 'Header Text H3'),
65+
{
66+
$formkit: 'primeOutputText',
67+
name: 'name',
68+
label: 'Name',
69+
validation: 'required',
70+
},
71+
{
72+
$formkit: 'primeOutputText',
73+
name: 'email',
74+
label: 'Email',
75+
iconPrefix: 'pi pi-book',
76+
},
77+
{
78+
$formkit: 'primeOutputText',
79+
name: 'text',
80+
label: 'Text',
81+
class: 'text-justify',
82+
},
83+
{
84+
$formkit: 'primeOutputNumber',
85+
name: 'number',
86+
label: 'Balance',
87+
format: 'currency',
88+
},
89+
{
90+
$formkit: 'primeOutputDate',
91+
name: 'date',
92+
label: 'Date',
93+
},
94+
addElement('h3', 'Useful Links'),
95+
{
96+
$formkit: 'primeOutputLink',
97+
name: 'field',
98+
value: 'https://www.google.de',
99+
label: 'Google',
100+
iconSuffix: 'pi pi-check',
101+
prefix: '-> ',
102+
},
103+
],
104+
)
105+
106+
const data = ref({ name: 'Tom', email: 'tom@coding-universe.com', date: new Date(), number: 2222.33, text: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.' })
107+
108+
const { showSuccessMessage } = useMessages()
109+
async function submitHandler() {
110+
showSuccessMessage('Form Submitted ...', 'Form submitted successfully')
111+
}
112+
</script>
113+
114+
<template>
115+
<div class="card gap-10">
116+
<div class="basis-1/2 md:basis-1/3">
117+
<h2>Data Edit</h2>
118+
<div class="flex gap-2 mb-4">
119+
Edit Mode <ToggleSwitch v-model="edit" />
120+
Horizontal <ToggleSwitch v-model="horizontal" />
121+
</div>
122+
<div class="max-w-100">
123+
<FormKitDataEdit
124+
v-if="edit"
125+
:data="data"
126+
:schema="schema"
127+
:submit-label="t('save')"
128+
:form-class="horizontal ? 'form-horizontal' : ''"
129+
:debug-data="true"
130+
@data-saved="submitHandler"
131+
/>
132+
<FormKitDataView
133+
v-if="!edit" :data="data" :schema="outputSchema"
134+
:form-class="horizontal ? 'form-horizontal' : ''"
135+
:debug-data="true"
136+
/>
137+
</div>
138+
</div>
139+
</div>
140+
</template>

‎package.json

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
},
2222
"devDependencies": {
2323
"@antfu/eslint-config": "3.6.0",
24-
"@formkit/nuxt": "1.6.6",
24+
"@formkit/nuxt": "^1.6.7",
2525
"@iconify-json/carbon": "^1.2.1",
2626
"@iconify-json/mdi": "^1.2.0",
2727
"@iconify-json/prime": "^1.2.0",
@@ -30,21 +30,21 @@
3030
"@nuxt/content": "2.13.2",
3131
"@nuxt/devtools": "1.4.2",
3232
"@nuxt/fonts": "^0.8.0",
33-
"@nuxt/image": "^1.8.0",
33+
"@nuxt/image": "^1.8.1",
3434
"@nuxt/test-utils": "^3.14.2",
3535
"@nuxtjs/i18n": "8.5.5",
36-
"@pinia/nuxt": "^0.5.4",
36+
"@pinia/nuxt": "^0.5.5",
3737
"@primevue/nuxt-module": "4.0.7",
3838
"@primevue/themes": "4.0.7",
39-
"@sfxcode/formkit-primevue": "^2.4.19",
40-
"@tiptap/extension-highlight": "^2.7.4",
41-
"@tiptap/extension-text-align": "^2.7.4",
42-
"@tiptap/extension-text-style": "^2.7.4",
43-
"@tiptap/pm": "^2.7.4",
44-
"@tiptap/starter-kit": "^2.7.4",
45-
"@tiptap/vue-3": "^2.7.4",
39+
"@sfxcode/formkit-primevue": "^2.5.3",
40+
"@tiptap/extension-highlight": "^2.8.0",
41+
"@tiptap/extension-text-align": "^2.8.0",
42+
"@tiptap/extension-text-style": "^2.8.0",
43+
"@tiptap/pm": "^2.8.0",
44+
"@tiptap/starter-kit": "^2.8.0",
45+
"@tiptap/vue-3": "^2.8.0",
4646
"@unocss/nuxt": "^0.62.4",
47-
"@vitest/ui": "^2.1.1",
47+
"@vitest/ui": "^2.1.2",
4848
"@vue/test-utils": "^2.4.6",
4949
"@vueuse/nuxt": "^11.1.0",
5050
"c8": "^10.1.2",
@@ -57,9 +57,9 @@
5757
"sass": "1.78.0",
5858
"typescript": "^5.6.2",
5959
"unstorage": "^1.12.0",
60-
"vitest": "^2.1.1",
60+
"vitest": "^2.1.2",
6161
"vue-i18n": "9.14.0",
6262
"vue-sidebar-menu": "^5.4.2"
6363
},
64-
"packageManager": "pnpm@9.11.0+sha256.1c0e33f70e5df9eede84a357bdfa0b1f9dba6e58194628d48a1055756f553754"
64+
"packageManager": "pnpm@9.12.0+sha256.a61b67ff6cc97af864564f4442556c22a04f2e5a7714fbee76a1011361d9b726"
6565
}

0 commit comments

Comments
 (0)