fix(components): remove wrapperClass because of clash with fromkit class handling

Author: sfxcode

dev/components/app/AppTopbar.vue

@@ -78,7 +78,6 @@ const items = ref([
     label: 'More',
     icon: 'pi pi-box',
     class: 'ml-2',
-
     items: [
       [
         {
@@ -127,18 +126,14 @@ const items = ref([
         <router-link to="/" class="">
           <span class="text-3xl">Formkit PrimeVue Demo</span>
         </router-link>
-      </template>
-
-      <template #center>
+      </template>  <template #center>
         <div class="text-lg">
           <span class="text-yellow-600 font-bold">New: </span>
           <router-link to="/samples/formEditor" class="">
             <span class="">Form Editor</span>
           </router-link>
         </div>
-      </template>
-
-      <template #end>
+      </template>  <template #end>
         <Button label="FormKit" class="mr-2" @click="redirectToFormKit" />
         <Button icon="pi pi-prime" label="PrimeVue" class="mr-2" @click="redirectToPrimeVue" />
         <Button icon="pi pi-book" label="Docs" class="mr-2" @click="redirectToDocs" />

dev/components/demo/PrimeSchemaEditor.vue

@@ -99,7 +99,6 @@ function copyObject() {
           <pre>{{ schemaResult }}</pre>
           <Button v-if="isSupported" label="Copy as JSON" class="mr-4" @click="copyJson" />
           <Button v-if="isSupported" label="Copy as Object" @click="copyObject" />
-
           <h3>Generated Formkit Data</h3>
           <pre>{{ data }}</pre>
         </div>

dev/pages/inputs/AutoComplete.vue

@@ -24,7 +24,6 @@ const schema
       multiple: true,
       typeahead: false,
       label: 'Chips Replacement',
-      wrapperClass: 'myClass',
     },
   ]
 

dev/pages/inputs/InputText.vue

@@ -10,9 +10,7 @@ const schema
       label: 'Basic',
       help: 'Required.',
       validation: 'required',
-      wrapperClass: 'myClass',
     },
-
     {
       $formkit: 'primeInputText',
       id: 'icon',

dev/pages/outputs/OutputDate.vue

@@ -8,9 +8,7 @@ const schema
       $formkit: 'primeOutputDate',
       name: 'date1',
       label: 'Basic',
-      wrapperClass: 'myClass',
     },
-
     {
       $formkit: 'primeOutputDate',
       id: 'date2',

dev/pages/outputs/OutputNumber.vue

@@ -9,9 +9,7 @@ const schema
       name: 'mumber1',
       format: 'decimal',
       label: 'Basic',
-      wrapperClass: 'myClass',
     },
-
     {
       $formkit: 'primeOutputNumber',
       name: 'number2',

dev/pages/outputs/OutputText.vue

@@ -8,9 +8,7 @@ const schema
       $formkit: 'primeOutputText',
       name: 'name',
       label: 'Basic',
-      wrapperClass: 'myClass',
     },
-
     {
       $formkit: 'primeOutputText',
       id: 'icon',

dev/pages/samples/FormEditor.vue

@@ -58,9 +58,7 @@ const schemaResult = computed(() => editorDataToSchema(formData.value))
         <Button v-if="false" icon="pi pi-plus" class="mr-2" severity="secondary" text />
         <Button v-if="false" icon="pi pi-print" class="mr-2" severity="secondary" text />
         <Button v-if="false" icon="pi pi-upload" severity="secondary" text />
-      </template>
-
-      <template #center>
+      </template>  <template #center>
         Form Editor
       </template>
       <template #end />
@@ -95,7 +93,6 @@ const schemaResult = computed(() => editorDataToSchema(formData.value))
       </div>
       <div v-if="formData" class="mt-4">
         <FormKit
-
           v-model="formData"
           type="form"
           :submit-attrs="{

dev/pages/samples/Grid.vue

@@ -17,7 +17,6 @@ const schema
         $formkit: 'primeInputText',
         name: 'name2',
         label: 'Col 2',
-
       },
     ], { class: 'flex gap-4' }),
   ]

src/components/PrimeAutoComplete.vue

@@ -12,7 +12,6 @@ export interface FormKitPrimeAutoCompleteProps {
   dropdown?: AutoCompleteProps['dropdown']
   multiple?: AutoCompleteProps['multiple']
   typeahead?: AutoCompleteProps['typeahead']
-  wrapperClass?: string
 }
 
 const props = defineProps({
@@ -22,7 +21,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, wrapperClass, handleInput, handleBlur } = useFormKitInput(props.context)
+const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
 
 const suggestions = ref([])
 
@@ -32,7 +31,7 @@ function search(event: AutoCompleteCompleteEvent) {
 </script>
 
 <template>
-  <div :class="wrapperClass">
+  <div class="p-formkit">
     <AutoComplete
       :id="context.id"
       v-model="context._value"