fix(samples): Some minor fixes

Author: sfxcode

dev/components/app/AppTopbar.vue

@@ -100,18 +100,17 @@ const items = ref([
             { label: 'Basic', icon: 'pi pi-fw pi-user-edit', route: '/styling/base' },
             { label: 'Pass Through', icon: 'pi pi-fw pi-user-edit', route: '/styling/passThrough' },
             { label: 'FormKit Class', icon: 'pi pi-fw pi-user-edit', route: '/styling/class' },
-            { label: 'Grid based Form', icon: 'pi pi-fw pi-user-edit', route: '/styling/grid' },
+            { label: 'Grid', icon: 'pi pi-fw pi-user-edit', route: '/styling/grid' },
           ],
         },
       ],
       [
         {
           label: 'Samples',
           items: [
+            { label: 'Repeater', icon: 'pi pi-fw pi-user-edit', route: '/samples/repeater' },
             { label: 'Input Editor', icon: 'pi pi-fw pi-user-edit', route: '/samples/inputEditor' },
             { label: 'Form Editor', icon: 'pi pi-fw pi-user-edit', route: '/samples/formEditor' },
-            { 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

@@ -38,7 +38,7 @@ async function submitHandler() {
     </h2>
     <slot />
     <div class="flex flex-wrap gap-8">
-      <div class="min-w-35rem basis-1/3 md:basis-1/4">
+      <div class="min-w-30rem basis-1/3 xl:basis-1/4">
         <FormKitDataEdit :form-class="formClass" :schema="formSchema" :data="formData" :debug-schema="false" :debug-data="true" form-class="data-edit" @data-saved="submitHandler" />
       </div>
       <div class="">

dev/pages/samples/FormEditor.vue

@@ -2,11 +2,12 @@
 import { useDragAndDrop } from '@formkit/drag-and-drop/vue'
 import { FormKitSchema } from '@formkit/vue'
 import { ref } from 'vue'
-import { useInputEditor, useInputEditorSchema } from 'my-library'
+import { useFormKitRepeater, useInputEditor, useInputEditorSchema } from 'my-library'
 import { blueprint, formkitPreset } from '../../utils/presets'
 
 const { editorSchema } = useInputEditorSchema()
 const { generateSchemaItemId, schemaToEditorData, editorDataToSchema } = useInputEditor()
+const { addListGroupFunctions } = useFormKitRepeater()
 
 const formSchema = ref(editorSchema)
 const formData = ref(null)
@@ -26,7 +27,9 @@ function actionDelete(schema: any) {
 }
 
 function actionEdit(schema: any) {
-  formData.value = schemaToEditorData({ ...schema })
+  const data = schemaToEditorData({ ...schema })
+  addListGroupFunctions(data)
+  formData.value = data
 }
 
 function actionInsert(schema: any) {
@@ -66,7 +69,7 @@ const schemaResult = computed(() => editorDataToSchema(formData.value))
     <div class="grid grid-cols-2 xl:grid-cols-3 gap-10">
       <div>
         <ul ref="formInputRef" class="list-none">
-          <li v-for="formInput in formInputList" :key="formInput" class="mb-1">
+          <li v-for="formInput in formInputList" :key="formInput" class="mt-4">
             <div class="" style="box-sizing: border-box;">
               <div class="min-w-100 mr-4 flex gap-2">
                 <span class="block  p-drag-handle"><i class="pi pi-bars text-[color:var(--primary-color)]" /></span>

src/composables/useFormKitRepeater.ts

@@ -39,7 +39,7 @@ export function useFormKitRepeater() {
     }
   }
 
-  function addGroupButtons(innerClass: string = '', outerClass: string = 'col-6', label: string = 'Actions', help: string = '', render: string = 'true') {
+  function addGroupButtons(innerClass: string = '', outerClass: string = 'col-4', label: string = 'Actions', help: string = '', render: string = 'true') {
     const addButtonComponent = (onClick: string = '', label: string = '', icon: string = '', severity: string = '', render: string = 'true', styleClass: string = 'p-button-sm'): object => {
       return addComponent('Button', { onClick, label, icon, class: styleClass, severity }, render)
     }

src/composables/useInputEditorSchema.ts

@@ -315,7 +315,7 @@ export function useInputEditorSchema() {
           [
             {
               $formkit: 'primeInputText',
-              label: 'PrimeVue Property',
+              label: 'PrimeVue Key',
               name: 'prime_key',
               outerClass: 'col-3',
             },