refactor(data): Data Edit / View

Author: sfxcode

dev/components/app/AppTopbar.vue

@@ -81,7 +81,7 @@ const items = ref([
     items: [
       [
         {
-          label: 'Outputs',
+          label: 'Output Components',
           items: [
             { label: 'Output Text', icon: 'pi pi-fw pi-user-edit', route: '/outputs/outputText' },
             { label: 'Output Number', icon: 'pi pi-fw pi-user-edit', route: '/outputs/outputNumber' },
@@ -99,6 +99,8 @@ const items = ref([
           items: [
             { 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' },
           ],
         },
       ],

dev/pages/styling/Class.vue

@@ -4,17 +4,15 @@ const schema
     {
       $formkit: 'primeInputText',
       name: 'name',
-      label: 'Styling by class',
+      label: 'Styling outer class',
       help: 'Required.',
-      validation: 'required',
       outerClass: 'stylingOuterClass',
     },
     {
       $formkit: 'primeInputText',
       name: 'name2',
-      label: 'Styling by class',
+      label: 'Styling inner class',
       help: 'Required.',
-      validation: 'required',
       innerClass: 'stylingSampleClass',
 
     },
@@ -27,7 +25,7 @@ const data = { name: 'Some Label in Green', name2: 'Some Text in Green' }
 <template>
   <div class="">
     <PrimeInput
-      header="Styling" :schema="schema" form-class="grid grid-cols-2 gap-4" :data="data"
+      header="Styling by FormKit Classes" :schema="schema" form-class="grid grid-cols-2 gap-4" :data="data"
     >
       <div class="pb-8" />
     </PrimeInput>

dev/pages/styling/Grid.vue

@@ -0,0 +1,55 @@
+<script setup lang='ts'>
+import { FormKitDataEdit, FormKitDataView } from 'my-library-components'
+
+const schema
+    = [
+      {
+        $formkit: 'primeInputText',
+        name: 'name',
+        label: 'Styling by class',
+        help: 'Required.',
+        validation: 'required',
+        outerClass: 'col-span-full md:col-span-8',
+      },
+      {
+        $formkit: 'primeInputText',
+        name: 'name2',
+        label: 'Styling by class',
+        help: 'Required.',
+        validation: 'required',
+        outerClass: 'col-span-full md:col-span-4',
+
+      },
+      {
+        $formkit: 'primeInputText',
+        name: 'name3',
+        label: 'Styling by class',
+        help: 'Required.',
+        validation: 'required',
+        outerClass: 'col-span-full md:col-span-4',
+
+      },
+
+    ]
+
+const data = { name: 'Some Label in Green', name2: 'Some Text in Green' }
+</script>
+
+<template>
+  <h2 class="text-color-[var(--primary-color)]">
+    Grid in Data Edit
+  </h2>
+  <div class="p-10">
+    <FormKitDataEdit form-class="grid grid-cols-12 gap-4" actions-class="col-span-full" :schema="schema" :data="data" :debug-schema="false" :debug-data="false" />
+  </div>
+  <h2 class="text-color-[var(--primary-color)]">
+    Grid in Data View
+  </h2>
+  <div class="p-10">
+    <FormKitDataView form-class="grid grid-cols-12 gap-4" :schema="schema" :data="data" :debug-schema="false" :debug-data="false" />
+  </div>
+</template>
+
+<style lang='scss'>
+
+</style>

src/components/FormKitDataEdit.vue

@@ -19,10 +19,18 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  inputClass: {
+    type: String,
+    default: 'p-button p-component p-formkit-button',
+  },
   submitLabel: {
     type: String,
     default: 'Save',
   },
+  actionsClass: {
+    type: String,
+    default: '',
+  },
   formClass: {
     type: String,
     default: '',
@@ -45,12 +53,12 @@ function handleSave() {
       id="form"
       v-model="formData"
       :form-class="formClass"
+      :actions-class="actionsClass"
       type="form"
       :submit-label="submitLabel"
       :submit-attrs="{
-        inputClass: 'p-button p-component p-formkit-button',
+        inputClass,
       }"
-
       @submit="handleSave"
     >
       <FormKitSchema :schema="formSchema" :data="formData" />

src/components/FormKitDataView.vue

@@ -35,9 +35,7 @@ const formData = ref(props.data)
       v-model="formData"
       type="form"
       :form-class="formClass"
-      :submit-attrs="{
-        style: 'display: none;',
-      }"
+      :actions="false"
     >
       <FormKitSchema :schema="formSchema" :data="formData" />
     </FormKit>

src/sass/formkit-primevue.scss

@@ -108,14 +108,6 @@
   margin-left: 1rem;
 }
 
-.p-formkit-icon-left {
-  padding-right: 0.5rem;
-}
-
-.p-formkit-icon-right {
-  padding-left: 0.5rem;
-}
-
 .formkit-prefix-icon {
   padding-right: 0.5rem;
 }
@@ -141,9 +133,7 @@
 }
 
 .p-formkit-data-view {
-  .formkit-actions {
-      display: none;
-  }
+
 }
 
 .p-formkit-data-edit {