Skip to content

Commit bc2e97c

Browse files
sfxcodesfxcode
committed
feat: add i18n documentation and update guide with new I18n section
1 parent f40fbc0 commit bc2e97c

File tree

7 files changed

+195
-7
lines changed

7 files changed

+195
-7
lines changed

‎docs/.vitepress/config.mts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@ function sidebarGuide() {
108108
{ text: 'Nuxt', link: '/advanced/nuxt' },
109109
{ text: 'Schema', link: '/advanced/schema' },
110110
{ text: 'Plugins', link: '/advanced/plugins' },
111+
{ text: 'I18n', link: '/advanced/i18n' },
111112
],
112113
},
113114
...sidebarComponent(),

‎docs/advanced/i18n.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Vue I18n Integration
2+
3+
This guide explains how to use [vue-i18n](https://vue-i18n.intlify.dev/) for internationalization in your FormKit PrimeVue project.
4+
## Installation
5+
6+
If you are using Nuxt, the i18n module can be installed automatically by the [FormKit PrimeVue Nuxt module](nuxt.md). For manual installation in a Vue project:
7+
8+
```bash
9+
npm install vue-i18n
10+
```
11+
12+
## Nuxt Integration
13+
14+
If you use the Nuxt module, i18n is auto-installed and configured. You can add your translations in the `/locales` directory.
15+
16+
::: info
17+
**Note:** Internationalization (i18n) is only required for Output components in FormKit PrimeVue. Input components do not require i18n integration.
18+
:::
19+
20+
## Resources
21+
22+
- [vue-i18n Documentation](https://vue-i18n.intlify.dev/)
23+
- [Nuxt i18n Module](https://i18n.nuxtjs.org/)
24+
- [FormKit Internationalization](https://formkit.com/essentials/internationalization)

‎docs/advanced/index.md‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
# Advanced
22

3-
## Composables
3+
This section covers advanced usage and features of the FormKit PrimeVue integration. Explore the following topics for deeper insights and customization options:
44

5-
Composables are used make your development with this library a little easier.
6-
Schema- and Repeater-related composables are provided to simplify the usage of the library.
5+
## Available Topics
76

8-
## Nuxt
9-
10-
Nuxt Module is available.
7+
- [Composables](composables.md): Utility functions and helpers to simplify schema and repeater usage in your forms.
8+
- [Nuxt](nuxt.md): Guide to using the Nuxt module for seamless integration with Nuxt projects.
9+
- [Plugins](plugins.md): Extend and enhance functionality with available plugins.
10+
- [Schema](schema.md): Advanced schema usage, tips, and best practices for dynamic and complex forms.
11+
- [I18n](i18n.md): Internationalization support for Output components.

‎docs/advanced/nuxt.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,4 @@ That's it! You can now use FormKit PrimeVue Nuxt Module in your Nuxt app ✨
2727
- **includeStyles** (default: `true`): Add custom FormKit CSS to the project.
2828
- **installI18N** (default: `true`): Install nuxt i18n module automatically.
2929
- **installFormKit** (default: `true`): Install nuxt formkit module automatically.
30+

‎docs/guide/index.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,21 @@
44

55
The main motivation for this project is to use Formkit Validation by Schema with form elements provided by PrimeVue.
66

7+
## Guide Overview
8+
9+
Navigate the guide to learn about all features and usage:
10+
11+
- [Getting Started](getting-started.md): How to install and set up FormKit PrimeVue in your project.
12+
- [Form](form.md): Creating and managing forms with FormKit and PrimeVue.
13+
- [Inputs](inputs.md): Overview and usage of input components.
14+
- [Outputs](outputs.md): Display and output components for showing data.
15+
- [Options](options.md): Working with options, selects, and dropdowns.
16+
- [Prefix](prefix.md): Using prefixes and suffixes in your form fields.
17+
- [Styling](styling.md): Styling your forms and components, including advanced customization.
18+
- [Examples](examples.md): Practical code examples and usage patterns.
19+
- [Usage](usage.md): General usage tips and best practices.
20+
- [History](history.md): Changelog and project history.
21+
722
## Formkit Schema
823

924
[Formkit Schema Documentation](https://formkit.com/essentials/schema)

‎docs/guide/styling.md‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,3 +55,148 @@ const formkitItems = [
5555
- Some Components have addtional properties for the rendered inputs (eg: optionClass, labelClass in primeRadioButton)
5656
- PT and PTOptions are available ([https://primevue.org/passthrough/](https://primevue.org/passthrough/))
5757
- [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
58+
59+
## Advanced Styling Examples
60+
61+
### Styling by Class and Style Attribute
62+
63+
You can apply custom classes or direct style attributes to your FormKit PrimeVue components:
64+
65+
```js
66+
const schema = [
67+
{
68+
$formkit: 'primeInputText',
69+
name: 'name',
70+
label: 'Styling by class',
71+
class: 'stylingSampleClass',
72+
},
73+
{
74+
$formkit: 'primeInputText',
75+
name: 'name2',
76+
label: 'Styling by style attribute',
77+
style: { color: 'gray', fontWeight: 700 },
78+
},
79+
]
80+
```
81+
82+
```scss
83+
.p-formkit {
84+
.stylingSampleClass {
85+
color: green;
86+
}
87+
}
88+
```
89+
90+
This allows you to use either a CSS class or inline styles for flexible customization.
91+
92+
---
93+
94+
### Using outerClass and innerClass
95+
96+
You can target the outer or inner wrapper of a component for more granular styling:
97+
98+
```js
99+
const schema = [
100+
{
101+
$formkit: 'primeInputText',
102+
name: 'name',
103+
label: 'Styling outer class',
104+
outerClass: 'stylingOuterClass',
105+
},
106+
{
107+
$formkit: 'primeInputText',
108+
name: 'name2',
109+
label: 'Styling inner class',
110+
innerClass: 'stylingSampleClass',
111+
},
112+
]
113+
```
114+
115+
```scss
116+
.stylingOuterClass {
117+
color: yellowgreen;
118+
}
119+
.stylingSampleClass input {
120+
color: green;
121+
}
122+
```
123+
124+
---
125+
126+
### Grid Layout
127+
128+
Use the grid system by assigning `outerClass` values like `col-6`, `col-8`, etc., to arrange fields responsively:
129+
130+
```js
131+
const schema = [
132+
{
133+
$formkit: 'primeInputText',
134+
name: 'name',
135+
label: 'col-8',
136+
outerClass: 'col-8',
137+
},
138+
{
139+
$formkit: 'primeInputText',
140+
name: 'name2',
141+
label: 'col-4',
142+
outerClass: 'col-4',
143+
},
144+
]
145+
```
146+
147+
---
148+
149+
### Horizontal Forms
150+
151+
Combine grid classes and custom layout for horizontal forms:
152+
153+
```js
154+
const schema = [
155+
{
156+
$formkit: 'primeInputText',
157+
name: 'email',
158+
label: 'Email',
159+
outerClass: 'col-6',
160+
},
161+
{
162+
$formkit: 'primePassword',
163+
name: 'password',
164+
label: 'Password',
165+
outerClass: 'col-5',
166+
},
167+
// ...
168+
]
169+
```
170+
171+
---
172+
173+
### PassThrough Styling
174+
175+
You can use the `pt` property to pass styles or classes directly to PrimeVue components:
176+
177+
```js
178+
const pt_content = {
179+
root: { style: 'font-weight: 600;color: green;' },
180+
}
181+
const pt_content_style_class = {
182+
root: { class: '!text-red-500' },
183+
}
184+
const schema = [
185+
{
186+
$formkit: 'primeInputText',
187+
name: 'name',
188+
label: 'PassThrough with style',
189+
pt: pt_content,
190+
},
191+
{
192+
$formkit: 'primeInputText',
193+
name: 'name2',
194+
label: 'PassThrough with tailwind like style class',
195+
pt: pt_content_style_class,
196+
},
197+
]
198+
```
199+
200+
---
201+
202+
These examples demonstrate the flexibility of FormKit PrimeVue components for advanced styling, including class-based, inline, grid, horizontal, and pass-through customizations.

‎docs/index.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,5 @@ features:
2020
details: Next Generation Vue UI Component Library. Rich set of open source native components for Vue.
2121
- title: "FormKit"
2222
details: A Vue form building framework that simplifies form structure, generation, validation, theming, submission, error handling, and more.
23-
---
23+
- title: "Components"
24+
details: This project currently provides 18 input components and 7 output components, making it easy to build and display forms with PrimeVue and FormKit.

0 commit comments

Comments
 (0)