feat(Components): Add p-formkit to each outer div for better styling

Author: sfxcode

src/formkit/PrimeAutoComplete.vue

@@ -20,7 +20,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
 </script>
 
 <template>
-  <div>
+  <div class="p-formkit">
     <AutoComplete
       :id="context.id"
       v-model="context._value"

src/formkit/PrimeCalendar.vue

@@ -18,7 +18,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
 </script>
 
 <template>
-  <div>
+  <div class="p-formkit">
     <Calendar
       v-model="context._value"
       :input-id="props.context.id"

src/formkit/PrimeCheckbox.vue

@@ -14,7 +14,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
 </script>
 
 <template>
-  <div>
+  <div class="p-formkit">
     <span v-if="context.attrs.labelLeft" class="formkit-prime-left">{{ context.attrs.labelLeft }}</span>
     <Checkbox
       v-model="context._value"

src/formkit/PrimeChips.vue

@@ -13,7 +13,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
 </script>
 
 <template>
-  <div>
+  <div class="p-formkit">
     <Chips
       v-model="context._value"
       :input-id="context.id"

src/formkit/PrimeColorPicker.vue

@@ -12,7 +12,7 @@ function handleChange(e: any) {
 </script>
 
 <template>
-  <div>
+  <div class="p-formkit">
     <ColorPicker
       v-model="context._value"
       :disabled="attrs._disabled ?? false"

src/formkit/PrimeDropdown.vue

@@ -16,7 +16,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
 </script>
 
 <template>
-  <div>
+  <div class="p-formkit">
     <Dropdown
       v-model="context._value"
       :input-id="context.id"

src/formkit/PrimeEditor.vue

@@ -21,7 +21,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
 </script>
 
 <template>
-  <div>
+  <div class="p-formkit">
     <Editor
       :id="context.id"
       v-model="context._value"

src/formkit/PrimeInputMask.vue

@@ -14,7 +14,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
 </script>
 
 <template>
-  <div>
+  <div class="p-formkit">
     <InputMask
       :id="context.id"
       v-model="context._value"

src/formkit/PrimeInputNumber.vue

@@ -17,7 +17,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
 </script>
 
 <template>
-  <div>
+  <div class="p-formkit">
     <InputNumber
       v-model="context._value"
       :input-id="context.id"

src/formkit/PrimeInputSwitch.vue

@@ -13,7 +13,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
 </script>
 
 <template>
-  <div :class="attrs.option_class">
+  <div :class="attrs.option_class" class="p-formkit">
     <span v-if="context.attrs.labelLeft" class="formkit-prime-left">{{ context.attrs.labelLeft }}</span>
     <InputSwitch
       v-model="context._value"