refactor(formkit): simplify with useFormKitRepeater

sfxcode · Jul 27, 2024 · 9ee8e53 · 9ee8e53
1 parent cd0a128
commit 9ee8e53
Show file tree

Hide file tree

Showing 4 changed files with 1,474 additions and 1,515 deletions.
diff --git a/app/pages/prime/validation.vue b/app/pages/prime/validation.vue
@@ -1,27 +1,10 @@
 <script setup lang='ts'>
 import { FormKitSchema } from '@formkit/vue'
 import { reactive, ref } from 'vue'
-import { useFormKitSchema } from '@sfxcode/formkit-primevue/composables'
+import { useFormKitRepeater, 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 { addElement, addList, addListGroup } = useFormKitSchema()
+const { addListGroupFunctions, addGroupButtons, addInsertButton } = useFormKitRepeater()
 
 const options = [
   { label: 'Every page load', value: 'refresh' },
@@ -47,23 +30,21 @@ const schema = reactive(
       label: 'Email',
       help: 'This will be used for your account.',
       validation: 'required|email',
-
+      outerClass: 'col-7',
     },
     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'),
-      ]),
+      addElement('div', ['Additional Mail'], { class: 'text-xl' }),
+      addInsertButton(),
       addListGroup(
         [
-          addFlexElement([
-            {
-              $formkit: 'primeInputText',
-              label: 'Additional Mail',
-              name: 'email',
-            },
-            addGroupButtons(),
-          ]),
+          {
+            $formkit: 'primeInputText',
+            label: 'Additional Mail',
+            name: 'email',
+            outerClass: 'col-6',
+
+          },
+          addGroupButtons('', 'col-6'),
         ],
       ),
     ], true, 'true'),
@@ -88,6 +69,7 @@ const schema = reactive(
       label: 'Password',
       help: 'Enter your new password.',
       validation: 'required|length:5,16',
+      outerClass: 'col-6',
     },
     {
       $formkit: 'primePassword',
@@ -98,13 +80,14 @@ const schema = reactive(
       help: 'Enter your new password again to confirm it.',
       validation: 'required|confirm',
       validationLabel: 'password confirmation',
+      outerClass: 'col-6',
     },
     {
       $formkit: 'primeCheckbox',
       name: 'eu_citizen',
       id: 'eu',
       label: 'Are you a european citizen?',
-
+      outerClass: 'col-6',
     },
     {
       $formkit: 'primeSelect',
@@ -118,8 +101,7 @@ const schema = reactive(
       optionValue: 'value',
       options,
       help: 'How often should we display a cookie notice?',
-      class: 'test',
-
+      outerClass: 'col-6',
     },
     {
       $formkit: 'primeSlider',
@@ -146,10 +128,9 @@ async function submitHandler() {
 </script>
 
 <template>
-  <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-25rem">
+  <div class="card flex flex-wrap gap-4">
+    <div class="basis-1/3 md:basis-1/4">
+      <div v-if="data" class="min-w-25rem">
         <FormKit
           id="form"
           v-model="data"

diff --git a/formkit.config.ts b/formkit.config.ts
@@ -1,16 +1,15 @@
 // formkit.config.ts
 import type { DefaultConfigOptions } from '@formkit/vue'
-import { defu } from 'defu'
 import { de, en } from '@formkit/i18n'
 import { createAutoAnimatePlugin } from '@formkit/addons'
-import { primeInputs } from '@sfxcode/formkit-primevue'
+import { primeInputs, primeOutputs } from '@sfxcode/formkit-primevue'
 import { addPrimeAsteriskPlugin } from '@sfxcode/formkit-primevue/plugins'
 
 const config: DefaultConfigOptions = {
   locales: { de, en },
   // Define the active locale
   locale: 'de',
-  inputs: defu(primeInputs),
+  inputs: { ...primeInputs, ...primeOutputs },
 
   plugins: [
     createAutoAnimatePlugin(

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "nuxt3-primevue-starter",
   "type": "module",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "license": "MIT",
   "scripts": {
     "build": "nuxi build",
@@ -19,7 +19,7 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "2.23.0",
+    "@antfu/eslint-config": "2.23.2",
     "@formkit/nuxt": "1.6.5",
     "@iconify-json/carbon": "^1.1.36",
     "@iconify-json/mdi": "^1.1.67",
@@ -29,32 +29,32 @@
     "@nuxt/devtools": "1.3.9",
     "@nuxt/fonts": "^0.7.1",
     "@nuxt/image": "^1.7.0",
-    "@nuxt/test-utils": "^3.13.1",
-    "@nuxtjs/i18n": "8.3.1",
-    "@pinia/nuxt": "^0.5.1",
-    "@primevue/nuxt-module": "4.0.0",
-    "@primevue/themes": "4.0.0",
-    "@sfxcode/formkit-primevue": "^2.3.0",
-    "@tiptap/extension-highlight": "^2.5.4",
-    "@tiptap/extension-text-align": "^2.5.4",
-    "@tiptap/extension-text-style": "^2.5.4",
-    "@tiptap/pm": "^2.5.4",
-    "@tiptap/starter-kit": "^2.5.4",
-    "@tiptap/vue-3": "^2.5.4",
-    "@unocss/nuxt": "^0.61.5",
-    "@vitest/ui": "^2.0.3",
+    "@nuxt/test-utils": "^3.14.0",
+    "@nuxtjs/i18n": "8.3.2",
+    "@pinia/nuxt": "^0.5.2",
+    "@primevue/nuxt-module": "4.0.2",
+    "@primevue/themes": "4.0.2",
+    "@sfxcode/formkit-primevue": "^2.3.10",
+    "@tiptap/extension-highlight": "^2.5.7",
+    "@tiptap/extension-text-align": "^2.5.7",
+    "@tiptap/extension-text-style": "^2.5.7",
+    "@tiptap/pm": "^2.5.7",
+    "@tiptap/starter-kit": "^2.5.7",
+    "@tiptap/vue-3": "^2.5.7",
+    "@unocss/nuxt": "^0.61.6",
+    "@vitest/ui": "^2.0.4",
     "@vue/test-utils": "^2.4.6",
     "@vueuse/nuxt": "^10.11.0",
     "c8": "^10.1.2",
-    "eslint": "^9.7.0",
+    "eslint": "^9.8.0",
     "happy-dom": "^14.12.3",
-    "jsdom": "^24.1.0",
+    "jsdom": "^24.1.1",
     "nuxt": "^3.12.4",
-    "primevue": "^4.0.0",
+    "primevue": "^4.0.2",
     "sass": "1.76.0",
-    "typescript": "^5.5.3",
+    "typescript": "^5.5.4",
     "unstorage": "^1.10.2",
-    "vitest": "^2.0.3",
+    "vitest": "^2.0.4",
     "vue-sidebar-menu": "^5.4.0"
   },
   "packageManager": "pnpm@9.4.0+sha256.b6fd0bfda555e7e584ad7e56b30c68b01d5a04f9ee93989f4b93ca8473c49c74"