feat(demo): add schema based repeater demo

Author: sfxcode

README.md

@@ -23,6 +23,11 @@ import { primeInputs } from '@sfxcode/formkit-primevue'
   }))
 ```
 
+### Schema Helper Functions
+
+[useFormKitSchema](https://github.com/sfxcode/formkit-primevue/blob/main/src/composables/useFormKitSchema.ts) provide functions to simplify the usage of elements, components, lists, ...
+
+
 ### Basic Styling
 
 Basic styling is provided with the **formkit-primevue.scss** file.
@@ -40,7 +45,14 @@ You can use it or take it as base for your own styling.
 - All inputs are wrapped in a div with a **p-formkit** class
 - Most Prime Components have access to class / styles attributes
 - PT and PTOptions are available ([https://primevue.org/passthrough/](https://primevue.org/passthrough/))
-- [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
+- [Styling](https://formkit-primevue.netlify.app/demo/styling) and [PT](https://formkit-primevue.netlify.app/demo/passThrough) demo available
+
+### Samples 
+
+Some samples for common tasks are available
+
+- Repeater (with the help of the useFormKitSchema compsable)
+- Grid
 
 ## Showcases
 
@@ -50,9 +62,11 @@ You can use it or take it as base for your own styling.
 
 ## Supported Inputs
 
+- AutoComplete
 - Calendar
 - CascadeSelect
 - Checkbox
+- Chips
 - Dropdown
 - Editor (HTML Editor)
 - InputMask
@@ -63,7 +77,6 @@ You can use it or take it as base for your own styling.
 - MultiSelect
 - Password
 - Ranking
-- Chips
 - Knob
 - ColorPicker
 - Listbox

dev/components/app/AppTopbar.vue

@@ -95,6 +95,7 @@ const items = ref([
           label: 'Samples',
           items: [
             { label: 'Grid', icon: 'pi pi-fw pi-user-edit', route: '/samples/grid' },
+            { label: 'Repeater', icon: 'pi pi-fw pi-user-edit', route: '/samples/repeater' },
           ],
         },
       ],

dev/components/demo/PrimeInput.vue

@@ -37,7 +37,7 @@ async function submitHandler() {
       {{ header }}
     </h2>
     <slot />
-    <div class="flex flex-wrap gap-12">
+    <div class="flex flex-wrap gap-8">
       <div class="min-w-30rem basis-1/3 md:basis-1/4">
         <FormKit
           id="form"

dev/pages/samples/Repeater.vue

@@ -0,0 +1,81 @@
+<script setup lang='ts'>
+import { useFormKitSchema } from 'my-library'
+
+const { addElement, addList, addListGroup, addComponent, addListGroupFunctions } = useFormKitSchema()
+function addFlexElement(children: any[]) {
+  return addElement('div', children, { class: 'min-w-40rem flex gap-4' })
+}
+
+function addGroupButtons() {
+  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)
+  }
+
+  return addElement('div', [
+    addButtonComponent('$removeNode($node, $index)', '', 'pi pi-times', 'danger'),
+    addButtonComponent('$copyNode($node, $index)', '', 'pi pi-plus'),
+    addButtonComponent('$moveNodeUp($node, $index)', '', 'pi pi-arrow-up', 'secondary', '$index != 0'),
+    addElement('span', [], { class: 'ml-2 mr-10' }, '$index == 0'),
+    addButtonComponent('$moveNodeDown($node, $index)', '', 'pi pi-arrow-down', 'secondary', '$index < $node.value.length -1'),
+    addElement('span', [], { class: 'ml-2 mr-10' }, '$index == $node.value.length -1'),
+  ], { class: 'pt-6' })
+}
+
+const data = ref()
+
+function createDefaultValue(): object {
+  return { name: 'Sword', damage: '2D20' }
+}
+
+onMounted(() => {
+  const defaultData = { name: 'Fighter', attacks: [{ name: 'Sword', damage: '2D20' }, { name: 'Dagger', damage: '2D6' }] }
+  addListGroupFunctions(defaultData, createDefaultValue())
+  data.value = defaultData
+})
+
+const schema
+  = [
+    {
+      $formkit: 'primeInputText',
+      label: 'Name',
+      name: 'name',
+    },
+    addElement('hr', [], { class: 'mt-4 mb-4' }),
+    addList('attacks', [
+      addFlexElement([
+        addElement('div', ['Attacks'], { class: 'text-xl mb-2' }),
+        addComponent('Button', { onClick: '$addNode($node)', label: 'Add', class: 'p-button-sm', icon: 'pi pi-plus' }, '$node.value.length == 0'),
+      ]),
+      addListGroup(
+        [
+          addFlexElement([
+            {
+              $formkit: 'primeInputText',
+              label: 'Name',
+              name: 'name',
+            },
+            {
+              $formkit: 'primeInputText',
+              label: 'Damage',
+              name: 'damage',
+              style: 'width:70px;',
+            },
+            addGroupButtons(),
+          ]),
+        ],
+      ),
+    ], true, 'true'),
+  ]
+</script>
+
+<template>
+  <div v-if="data" class="">
+    <PrimeInput
+      header="Repeater" :schema="schema" :data="data"
+    />
+  </div>
+</template>
+
+<style lang='scss' scoped>
+
+</style>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sfxcode/formkit-primevue",
   "type": "module",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "author": {
     "name": "Tom",
     "email": "[email protected]"