feat(validation): add repeater example

Author: sfxcode

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-primevue-starter",
-  "version": "1.7.4",
+  "version": "1.7.5",
   "license": "MIT",
   "type": "module",
   "scripts": {

src/pages/elements/validation.vue

@@ -1,54 +1,101 @@
 <script setup lang='ts'>
-import { ref } from 'vue'
+import { FormKitSchema } from '@formkit/vue'
+import { reactive, ref } from 'vue'
+import { useFormKitSchema } from '@sfxcode/formkit-primevue/composables'
+
+const { addElement, addList, addListGroup, addComponent, addListGroupFunctions } = useFormKitSchema()
+function addFlexElement(children: any[]) {
+  return addElement('div', children, { class: 'min-w-50rem 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 options = [
   { label: 'Every page load', value: 'refresh' },
   { label: 'Ever hour', value: 'hourly' },
   { label: 'Every day', value: 'daily' },
 ]
 
+const data = ref()
+
+onMounted(() => {
+  const defaultData = { email: '[email protected]', additionalMails: [{ email: '[email protected]' }, { email: '[email protected]' }], myCalendar: new Date() }
+  addListGroupFunctions(defaultData, { email: '[email protected]' })
+  data.value = defaultData
+})
+
 const schema = reactive(
   [
-    {
-      $el: 'h2',
-      children: ['Register ', '$email'],
-    },
-    {
-      $el: 'h3',
-      children: 'Header Text H3',
-    },
+    addElement('h2', ['Validation with FormKit']),
+    addElement('h3', ['Inputs from PrimeVue']),
     {
       $formkit: 'primeInputText',
       name: 'email',
       label: 'Email',
       help: 'This will be used for your account.',
       validation: 'required|email',
+
     },
+    addList('additionalMails', [
+      addFlexElement([
+        addElement('div', ['Additional Mails'], { 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: 'Additional Mail',
+              name: 'email',
+            },
+            addGroupButtons(),
+          ]),
+        ],
+      ),
+    ], true, 'true'),
+
     {
       $formkit: 'primeTextarea',
       name: 'myText',
       label: 'Text',
-      validation: '',
-      rows: '3',
+      rows: '5',
     },
     {
-      $formkit: 'primeEditor',
-      name: 'myEditor',
-      label: 'Editor',
-      style: 'height: 160px;',
+      $formkit: 'primeCalendar',
+      name: 'myCalendar',
+      label: 'Calendar',
+      validation: '',
+      showIcon: true,
+
     },
     {
-      $formkit: 'primeInputText',
+      $formkit: 'primePassword',
       name: 'password',
       label: 'Password',
       help: 'Enter your new password.',
       validation: 'required|length:5,16',
     },
     {
-      $formkit: 'primeInputText',
+      $formkit: 'primePassword',
       name: 'password_confirm',
       label: 'Confirm password',
-      help: 'Enter your new password again.',
+      toggleMask: true,
+      feedback: false,
+      help: 'Enter your new password again to confirm it.',
       validation: 'required|confirm',
       validationLabel: 'password confirmation',
     },
@@ -57,44 +104,82 @@ const schema = reactive(
       name: 'eu_citizen',
       id: 'eu',
       label: 'Are you a european citizen?',
+
     },
     {
       $formkit: 'primeDropdown',
-      if: '$get(eu).value', // 👀 Oooo, conditionals!
+      if: '$eu_citizen', // 👀 Oooo, conditionals!
       name: 'cookie_notice',
       label: 'Cookie notice frequency',
+      value: 'hourly',
+      showClear: false,
+      filter: false,
       optionLabel: 'label',
       optionValue: 'value',
       options,
       help: 'How often should we display a cookie notice?',
+      class: 'test',
+
+    },
+    {
+      $formkit: 'primeSlider',
+      name: 'slider',
+      label: 'Max messages',
+      style: 'width: 200px;margin-top: 6px;margin-bottom: 4px',
+      min: 5,
+      step: 5,
+      value: 10,
+    },
+    {
+      $formkit: 'primeChips',
+      name: 'chips',
+      label: 'Use Chips',
+    },
+    {
+      $formkit: 'primeKnob',
+      name: 'knob',
+      label: 'Use Knob',
+      value: 50,
     },
   ],
 )
 
-const data = ref({ email: '[email protected]' })
-
 async function submitHandler() {
   // Lets pretend this is an ajax request:
   await new Promise(resolve => setTimeout(resolve, 1000))
 }
 </script>
 
 <template>
-  <div class="max-w-xl">
-    <div class="myFormkit">
-      <FormKit
-        id="form"
-        v-model="data"
-        type="form"
-        :submit-attrs="{
-          inputClass: 'p-button p-component',
-        }"
-        @submit="submitHandler"
-      >
-        <FormKitSchema :schema="schema" :data="data" />
-      </FormKit>
+  <div class="card flex flex-wrap gap-16">
+    <div class="basis-1/2 md:basis-1/3">
+      <span class="" />
+      <div v-if="data" class="myFormkit max-w-30rem">
+        <FormKit
+          id="form"
+          v-model="data"
+          type="form"
+          :submit-attrs="{
+            inputClass: 'p-button p-component',
+            wrapperClass: '',
+            outerClass: '',
+          }"
+          @submit="submitHandler"
+        >
+          <FormKitSchema :schema="schema" :data="data" />
+        </FormKit>
+      </div>
+    </div>
+    <div class="basis-1/2 md:basis-1/3">
+      <h2>Formkit Debug</h2>
+      <h3>Data</h3>
+      <pre>{{ data }}</pre>
     </div>
-    <h4>Data</h4>
-    <pre>{{ data }}</pre>
   </div>
 </template>
+
+<style lang='scss' scoped>
+.myFormkit {
+
+}
+</style>

src/pages/index.vue

@@ -35,7 +35,7 @@ import AdvertiseBox from '@/components/AdvertiseBox.vue'
         Typesafe by default
       </AdvertiseBox>
 
-      <AdvertiseBox header="PrimeVue 3.49" icon="pi-check-circle" color="green-600">
+      <AdvertiseBox header="PrimeVue 3.50" icon="pi-check-circle" color="green-600">
         Excellent Component Library for VUE
       </AdvertiseBox>
       <AdvertiseBox header="PrimeVue Theme and Layout" icon="pi-check-circle" color="green-600">
@@ -44,7 +44,7 @@ import AdvertiseBox from '@/components/AdvertiseBox.vue'
       <AdvertiseBox header="Uno CSS" icon="pi-check-circle" color="blue-400">
         The instant on-demand Atomic CSS engine
       </AdvertiseBox>
-      <AdvertiseBox header="Formkit" icon="pi-check-circle" color="green-600">
+      <AdvertiseBox header="Formkit 1.6" icon="pi-check-circle" color="green-600">
         Formkit PrimeVue Example included
       </AdvertiseBox>
       <AdvertiseBox header="VueUse" icon="pi-check-circle" color="green-600">