refactor(FormKitDataEdit): use FormKit form slots and PrimeVue Button component - try to fix #59 - add some more styling

Author: sfxcode

src/components/FormKitDataEdit.vue

@@ -1,9 +1,13 @@
 <script setup lang='ts'>
-import { FormKit, FormKitSchema } from '@formkit/vue'
+import { FormKit, FormKitMessages, FormKitSchema } from '@formkit/vue'
 import { ref } from 'vue'
 import FormKitDebug from './FormKitDebug.vue'
 
 const props = defineProps({
+  id: {
+    type: String,
+    default: 'form',
+  },
   data: {
     type: Object,
     default: null,
@@ -28,6 +32,10 @@ const props = defineProps({
     type: String,
     default: 'Save',
   },
+  cancelLabel: {
+    type: String,
+    default: 'Cancel',
+  },
   actionsClass: {
     type: String,
     default: '',
@@ -51,19 +59,23 @@ function handleSave() {
 <template>
   <div class="p-formkit-data-edit">
     <FormKit
-      id="form"
+      :id="id"
       v-model="formData"
       :form-class="formClass"
       :actions-class="actionsClass"
       type="form"
-      :submit-label="submitLabel"
-      :submit-attrs="{
-        inputClass,
-      }"
       @submit="handleSave"
     >
-      <FormKitSchema v-if="formSchema" :schema="formSchema" :data="formData" />
-      <slot />
+      <template #default>
+        <FormKitSchema v-if="formSchema" :schema="formSchema" :data="formData" />
+        <slot />
+      </template>
+      <template #messages>
+        <FormKitMessages class="p-formkit-data-edit-messages" />
+      </template>
+      <template #submit>
+        <Button type="submit" :label="submitLabel" @submit="handleSave" />
+      </template>
     </FormKit>
     <FormKitDebug v-if="debugData" :data="formData" header="Data" />
     <FormKitDebug v-if="debugSchema" :data="formSchema" header="Schema" />

src/sass/formkit-primevue.scss

@@ -35,8 +35,8 @@ $grid-breakpoints: (
   // General message item styling
   .formkit-messages {
     margin: 0.125rem 0;
-    padding-top: 0.25rem;
-    padding-left: 0;
+    padding-top: 0.5rem;
+    padding-left: 0.5rem;
   }
 
   .formkit-message {
@@ -51,6 +51,12 @@ $grid-breakpoints: (
   .formkit-outer {
     padding-bottom: 0.8rem;
 
+    .formkit-messages {
+      margin: 0.125rem 0;
+      padding-top: 0.25rem;
+      padding-left: 0;
+    }
+
     .formkit-inner {
       .p-formkit {
         .p-formkit-icon {
@@ -163,6 +169,110 @@ $grid-breakpoints: (
   }
 }
 
+// data view only
+.p-formkit-data-view {
+  .formkit-form {
+    .formkit-outer {
+      padding-bottom: 0;
+    }
+
+    .formkit-help {
+      margin: 0;
+    }
+  }
+}
+
+// data edit only
+.p-formkit-data-edit {
+
+  .formkit-form {
+    .formkit-label {
+      //font-weight: normal;
+    }
+
+    // specific checkbox stylings
+    .formkit-outer[data-type="primeCheckbox"] {
+      //padding-left: 0;
+
+      .formkit-wrapper {
+        display: flex;
+        flex-wrap: wrap;
+
+        .formkit-inner {
+          width: auto !important;
+        }
+
+        label {
+          width: auto;
+          order: 2;
+          padding: 0.125rem 0;
+
+          &:after {
+            content: "";
+          }
+
+          // styling of output when label is used in schema
+          + .formkit-inner {
+            margin-left: 0 !important;
+            order: 1;
+            flex-basis: 2rem;
+            flex-grow: 0;
+            flex-shrink: 0;
+            overflow: hidden;
+            // styling of suffix when suffix is used in addition to label
+            &:has( label) {
+              flex-grow: 1;
+              flex-basis: 100%;
+            }
+          }
+        }
+
+        // styling when both prefix and suffix are used in schema
+        label:first-child:nth-last-child(3), label:first-child:nth-last-child(3) ~ label {
+          width: auto;
+        }
+
+        label:first-child:nth-last-child(3) {
+          order: 1;
+
+          + div.p-checkbox {
+            order: 2;
+            width: auto;
+          }
+        }
+
+        label:first-child:nth-last-child(3) ~ label {
+          order: 3
+        }
+
+        // end styling when both prefix and suffix are used in schema
+
+
+        // styling of output when only suffix is used in schema
+        .formkit-inner:first-child {
+          margin-left: 0 !important;
+
+          .p-formkit {
+            display: flex;
+          }
+        }
+
+        .p-checkbox:not(:only-child) {
+          width: 2rem;
+          overflow: hidden;
+        }
+      }
+
+      .formkit-help {
+        width: auto !important;
+        //padding-left: 2rem;
+      }
+    }
+  }
+}
+
+
+
 // Debug
 .p-formkit-data-debug {
   pre, span {