refactor: wrap FormKit components in div for improved structure

Author: sfxcode

src/runtime/components/FUDataEdit.vue

@@ -94,59 +94,61 @@ function handleReset() {
 </script>
 
 <template>
-  <FormKit
-    :id="id"
-    v-model="formData"
-    :form-class="formClass"
-    :actions-class="actionsClass"
-    type="form"
-    @submit="handleSave"
-  >
-    <template #default>
-      <FormKitSchema
-        v-if="formSchema"
-        :schema="formSchema"
-        :data="formData"
-      />
-      <slot />
-    </template>
-    <template #messages>
-      <slot name="messages">
-        <FormKitMessages class="p-formkit-data-edit-messages" />
-      </slot>
-    </template>
-    <template #submit>
-      <slot name="submit">
-        <UButton
-          :icon="submitIcon"
-          type="submit"
-          :label="submitLabel"
-          :class="submitClass"
-          :severity="submitSeverity"
-          @submit="handleSave"
+  <div class="formkit-data-edit">
+    <FormKit
+      :id="id"
+      v-model="formData"
+      :form-class="formClass"
+      :actions-class="actionsClass"
+      type="form"
+      @submit="handleSave"
+    >
+      <template #default>
+        <FormKitSchema
+          v-if="formSchema"
+          :schema="formSchema"
+          :data="formData"
         />
-        <UButton
-          v-if="showReset"
-          type="reset"
-          :icon="resetIcon"
-          :label="resetLabel"
-          :class="resetClass"
-          :severity="resetSeverity"
-          @click="handleReset"
-        />
-      </slot>
-    </template>
-  </FormKit>
-  <FUDataDebug
-    v-if="debugData"
-    :data="formData"
-    header="Data"
-  />
-  <FUDataDebug
-    v-if="debugSchema"
-    :data="formSchema as object"
-    header="Schema"
-  />
+        <slot />
+      </template>
+      <template #messages>
+        <slot name="messages">
+          <FormKitMessages class="p-formkit-data-edit-messages" />
+        </slot>
+      </template>
+      <template #submit>
+        <slot name="submit">
+          <UButton
+            :icon="submitIcon"
+            type="submit"
+            :label="submitLabel"
+            :class="submitClass"
+            :severity="submitSeverity"
+            @submit="handleSave"
+          />
+          <UButton
+            v-if="showReset"
+            type="reset"
+            :icon="resetIcon"
+            :label="resetLabel"
+            :class="resetClass"
+            :severity="resetSeverity"
+            @click="handleReset"
+          />
+        </slot>
+      </template>
+    </FormKit>
+    <FUDataDebug
+      v-if="debugData"
+      :data="formData"
+      header="Data"
+    />
+    <FUDataDebug
+      v-if="debugSchema"
+      :data="formSchema as object"
+      header="Schema"
+    />
+  </div>
 </template>
 
 <style scoped>

src/runtime/components/FUDataView.vue

@@ -35,30 +35,32 @@ if (props.data) {
 </script>
 
 <template>
-  <FormKit
-    v-model="formData"
-    :actions="false"
-    :form-class="formClass"
-    type="form"
-  >
-    <FormKitSchema
-      v-if="schema"
-      :schema="schema"
+  <div class="formkit-data-view">
+    <FormKit
+      v-model="formData"
+      :actions="false"
+      :form-class="formClass"
+      type="form"
+    >
+      <FormKitSchema
+        v-if="schema"
+        :schema="schema"
+        :data="formData"
+      />
+    </FormKit>
+
+    <slot />
+    <FuDataDebug
+      v-if="debugData"
       :data="formData"
+      header="Data"
     />
-  </FormKit>
-
-  <slot />
-  <FuDataDebug
-    v-if="debugData"
-    :data="formData"
-    header="Data"
-  />
-  <FuDataDebug
-    v-if="debugSchema"
-    :data="schema as object"
-    header="Debug Schema"
-  />
+    <FuDataDebug
+      v-if="debugSchema"
+      :data="schema as object"
+      header="Debug Schema"
+    />
+  </div>
 </template>
 
 <style scoped>