docs(vitepress): add composables documentation

Author: sfxcode

dev/components/app/AppFooter.vue

@@ -4,7 +4,7 @@ const version = ref(import.meta.env.VITE_APP_VERSION)
 
 <template>
   <div class="mt-8 layout-footer text-center text-gray-700">
-    <span class="font-medium ml-2">Formkit (1.5) - PrimeVue (3.49) - FormKit-PrimeVue-Version {{ version }} - sfxcode 2024</span>
+    <span class="font-medium ml-2">Formkit (1.6) - PrimeVue (3.49) - FormKit-PrimeVue-Version {{ version }} - sfxcode 2024</span>
   </div>
 </template>
 

dev/pages/index.vue

@@ -1,5 +1,8 @@
 <script setup lang='ts'>
 import { ref } from 'vue'
+import { useFormKitSchema } from 'my-library'
+
+const { addElement } = useFormKitSchema()
 
 const options = [
   { label: 'Every page load', value: 'refresh' },
@@ -9,14 +12,8 @@ const options = [
 
 const schema = reactive(
   [
-    {
-      $el: 'h2',
-      children: ['Register ', '$email'],
-    },
-    {
-      $el: 'h3',
-      children: 'Header Text H3',
-    },
+    addElement('h2', ['Register ', '$email']),
+    addElement('h3', 'Header Text H3'),
     {
       $formkit: 'primeInputText',
       name: 'email',

docs/.vitepress/config.mts

@@ -90,6 +90,7 @@ function sidebarGuide() {
         { text: 'Usage', link: '/guide/usage' },
         { text: 'PrimeVue Inputs', link: '/guide/inputs' },
         { text: 'Options', link: '/guide/options' },
+        { text: 'Composables', link: '/guide/composables' },
         { text: 'Styling', link: '/guide/styling' },
         { text: 'Sample Apps', link: '/guide/examples' },
       ],

docs/guide/composables.md

@@ -0,0 +1,57 @@
+# Composables
+
+Composables are used make your development with this library a little easier.
+
+## useFormkitSchema
+
+This composable provides helper functions to simplify building a schema.
+
+Sometimes it provides a little more concise syntax or provide the needed helper functions.
+
+### addComponent
+
+```ts
+  const { addComponent } = useFormKitSchema()
+
+  const addButtonComponent = (onClick: string = '', label: string = '', icon: string = '', severity: string = '', render: string = 'true', styleClass: string = 'p-button-sm ml-2'): object => {
+    return addComponent('Button', { onClick, label, icon, class: styleClass, severity }, render)
+  }
+```
+
+### addElement
+
+Following json in the schema 
+
+```json
+    [
+      {
+        $el: 'h2',
+        children: ['Register ', '$email'],
+      },
+      {
+        $el: 'h3',
+        children: 'Header Text H3',
+      }
+    ]
+```
+
+can be replaced by:
+
+```ts
+  const { addElement } = useFormKitSchema()
+
+    [
+        addElement('h2', ['Register ', '$email']), 
+        addElement('h3', 'Header Text H3')
+    ]
+```
+
+### Repeater
+
+To simplify the build of a repeater you can use:
+
+- addList
+- addListGroup
+- addListGroupFunctions
+
+A working example can be found in the [repeater demo](https://github.com/sfxcode/formkit-primevue/blob/main/dev/pages/samples/Repeater.vue).

docs/guide/index.md

@@ -2,7 +2,7 @@
 
 **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.
 
-The main motivation for this project is to use Formkit Validation by Schema with form elements provided by PrimeVue..
+The main motivation for this project is to use Formkit Validation by Schema with form elements provided by PrimeVue.
 
 ## Formkit Schema