Skip to content

Commit 6ddf2da

Browse files
sfxcodesfxcode
committed
docs(vitepress): add a little bit more documentation
1 parent 6dc52df commit 6ddf2da

File tree

8 files changed

+210
-27
lines changed

8 files changed

+210
-27
lines changed

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ Basic styling is provided with the **formkit-primevue.scss** file.
3131
Features:
3232

3333
- Width of all text and dropdown elements is set to 100%
34-
- Error Color by varianble (--formkit-error-color)
34+
- Error Color by variable (--formkit-error-color)
3535
- Some margins, font sizes ...
3636

3737
You can use it or take it as base for your own styling.
@@ -45,9 +45,9 @@ You can use it or take it as base for your own styling.
4545

4646
## Showcases
4747

48-
A Nuxt 3 Module (PrimeVue and Formkit bundled) under [nuxt-primevue](https://github.com/sfxcode/nuxt-primevue)
48+
[Demo Application](https://formkit-primevue.netlify.app/)
4949

50-
[Nuxt 3 PrimeVue Starter](https://github.com/sfxcode/nuxt3-primevue-starter) and [Vite PrimeVue Starter](https://github.com/sfxcode/vite-primevue-starter) with Formkit support available
50+
[Nuxt 3 PrimeVue Starter](https://github.com/sfxcode/nuxt3-primevue-starter) and [Vite PrimeVue Starter](https://github.com/sfxcode/vite-primevue-starter) with Formkit support available.
5151

5252
## Supported Inputs
5353

‎docs/.vitepress/config.mts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ function sidebarGuide() {
8989
items: [
9090
{ text: 'Usage', link: '/guide/usage' },
9191
{ text: 'PrimeVue Inputs', link: '/guide/inputs' },
92+
{ text: 'Styling', link: '/guide/styling' },
9293
{ text: 'Sample Apps', link: '/guide/examples' },
9394
],
9495
},

‎docs/guide/getting-started.md‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,112 @@ const config: DefaultConfigOptions = {
3030
export default config
3131
```
3232

33+
## Usage
34+
35+
### Example
36+
37+
This example takes parts of the FormKit validation demo and replace the formkit library elements with the one found in this framework.
38+
39+
The working version can be found at the [formkit-primevue-demo](https://formkit-primevue.netlify.app/). There are also some samples for all wrapped PrimeVue form elements.
40+
41+
```vue
42+
<script setup lang='ts'>
43+
import { ref, reactive } from 'vue'
44+
45+
const options = [
46+
{ label: 'Every page load', value: 'refresh' },
47+
{ label: 'Ever hour', value: 'hourly' },
48+
{ label: 'Every day', value: 'daily' },
49+
]
50+
51+
const schema = reactive(
52+
[
53+
{
54+
$el: 'h2',
55+
children: ['Register ', '$email'],
56+
},
57+
{
58+
$el: 'h3',
59+
children: 'Header Text H3',
60+
},
61+
{
62+
$formkit: 'primeInputText',
63+
name: 'email',
64+
label: 'Email',
65+
help: 'This will be used for your account.',
66+
validation: 'required|email',
67+
},
68+
{
69+
$formkit: 'primeTextarea',
70+
name: 'myText',
71+
label: 'Text',
72+
validation: '',
73+
rows: '3',
74+
},
75+
{
76+
$formkit: 'primeEditor',
77+
name: 'myEditor',
78+
label: 'Editor',
79+
style: 'height: 160px;',
80+
},
81+
{
82+
$formkit: 'primeInputText',
83+
name: 'password',
84+
label: 'Password',
85+
help: 'Enter your new password.',
86+
validation: 'required|length:5,16',
87+
},
88+
{
89+
$formkit: 'primeInputText',
90+
name: 'password_confirm',
91+
label: 'Confirm password',
92+
help: 'Enter your new password again.',
93+
validation: 'required|confirm',
94+
validationLabel: 'password confirmation',
95+
},
96+
{
97+
$formkit: 'primeCheckbox',
98+
name: 'eu_citizen',
99+
id: 'eu',
100+
label: 'Are you a european citizen?',
101+
},
102+
{
103+
$formkit: 'primeDropdown',
104+
if: '$get(eu).value', // 👀 Oooo, conditionals!
105+
name: 'cookie_notice',
106+
label: 'Cookie notice frequency',
107+
options,
108+
help: 'How often should we display a cookie notice?',
109+
},
110+
],
111+
)
112+
113+
const data = ref({ email: '[email protected]' })
114+
115+
async function submitHandler() {
116+
await new Promise(resolve => setTimeout(resolve, 1000))
117+
}
118+
</script>
119+
120+
<template>
121+
<div class="max-w-xl">
122+
<div class="myFormkit">
123+
<FormKit
124+
id="form"
125+
v-model="data"
126+
type="form"
127+
:submit-attrs="{
128+
inputClass: 'p-button p-component',
129+
}"
130+
@submit="submitHandler"
131+
>
132+
<FormKitSchema :schema="schema" :data="data" />
133+
</FormKit>
134+
</div>
135+
<h4>Data</h4>
136+
<pre>{{ data }}</pre>
137+
</div>
138+
</template>
139+
140+
```
141+

‎docs/guide/index.md‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,45 @@
1-
# Guide Overview
1+
# Formkit PrimeVue
22

33
**formkit-primevue** combines the [PrimeVue](https://www.primefaces.org/primevue) component framework with the validation power of [Formkit](https://formkit.com/) in your Vue/Nuxt application.
44

5+
The main motivation for this project is to use Formkit Validation by Schema with form elements provided by PrimeVue..
56

67

8+
## Formkit Schema
9+
10+
[Formkit Schema Documentation](https://formkit.com/essentials/schema)
11+
12+
::: info
13+
FormKit's schema is a JSON-serializable data format for storing DOM structures and component implementations, including FormKit forms. Although created specifically for implementing and generating forms, the format is capable of generating any HTML markup or using any third-party components.
14+
:::
15+
16+
PrimeVue inputs are prefixed with prime and try to use as many properties as possible from their definition.
17+
18+
```ts
19+
const schema = reactive(
20+
[
21+
{
22+
$el: 'h2',
23+
children: ['Register ', '$email'],
24+
},
25+
{
26+
$el: 'h3',
27+
children: 'Header Text H3',
28+
},
29+
{
30+
$formkit: 'primeInputText',
31+
name: 'email',
32+
label: 'Email',
33+
help: 'This will be used for your account.',
34+
validation: 'required|email',
35+
},
36+
{
37+
$formkit: 'primeTextarea',
38+
name: 'myText',
39+
label: 'Text',
40+
validation: '',
41+
rows: '3',
42+
}
43+
])
44+
```
745

‎docs/guide/inputs.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ E.g. InputMask -> primeInputMask
1616

1717
## Supported Inputs
1818

19+
- AutoComplete
1920
- Calendar
2021
- Checkbox
2122
- Dropdown

‎docs/guide/styling.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# Styling
2+
3+
PrimeVue has a lot of styling possiblities and the structure of a formkit form gives you all possibilities needed for advanced styling.
4+
5+
## Basic Styling
6+
7+
Basic styling is provided with the **formkit-primevue.scss** file.
8+
9+
Features:
10+
11+
- Width of all text and dropdown elements is set to 100%
12+
- Error Color by variable (--formkit-error-color)
13+
- Some margins, font sizes ...
14+
15+
You can use it or take it as base for your own styling.
16+
17+
## Extended Styling
18+
19+
- All inputs are wrapped in a div with a **p-formkit** class
20+
- Most Prime Components have access to class / styles attributes
21+
- PT and PTOptions are available ([https://primevue.org/passthrough/](https://primevue.org/passthrough/))
22+
- [Styling](https://formkit-primevue.netlify.app/demo/styling), [Grid](https://formkit-primevue.netlify.app/demo/grid) and [PT](https://formkit-primevue.netlify.app/demo/passThrough) demo available

‎docs/guide/usage.md‎

Lines changed: 35 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,44 @@
11
# Usage
22

3-
formkit-primevue was designed for easy integration into FormKit schema.
3+
To build a form a schema is required and some kind of data.
44

5-
## Formkit Schema
5+
More information can be found in the [Formkit Schema](https://formkit.com/essentials/schema) documentation.
6+
7+
## Example
68

79
```ts
810

9-
const schema
10-
= [
11-
{
12-
$formkit: 'primeInputMask',
13-
name: 'myInputMask',
14-
label: 'Input Mask',
15-
validation: 'required',
16-
validationVisibility: 'live',
17-
mask: '99-999999',
18-
placeholder: '99-999999',
19-
},
20-
{
21-
$formkit: 'primeInputMask',
22-
name: 'custom',
23-
label: 'Input Mask',
24-
mask: '(999) 999-9999',
25-
unmask: true,
26-
},
27-
]
28-
const data = { }
11+
const schema = reactive(
12+
[
13+
{
14+
$el: 'h2',
15+
children: 'Registration Form',
16+
},
17+
{
18+
$el: 'h3',
19+
children: ['Register ', '$email'],
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+
},
28+
{
29+
$formkit: 'primeTextarea',
30+
name: 'comment',
31+
label: 'Text',
32+
validation: '',
33+
rows: '3',
34+
}
35+
])
36+
37+
const data = ref({ email: '[email protected]' })
38+
39+
async function submitHandler() {
40+
await new Promise(resolve => setTimeout(resolve, 1000))
41+
}
2942
```
3043

3144
```vue

‎src/pages/index.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,6 @@ const schema = reactive(
7272
const data = ref({ email: '[email protected]' })
7373
7474
async function submitHandler() {
75-
// Lets pretend this is an ajax request:
7675
await new Promise(resolve => setTimeout(resolve, 1000))
7776
}
7877
</script>

0 commit comments

Comments
 (0)