docs(styling): Add Grid Sample

src/components/app/AppTopbar.vue

@@ -60,6 +60,7 @@ const items = ref([
           items: [
             { label: 'Basic', icon: 'pi pi-fw pi-user-edit', to: '/demo/styling' },
             { label: 'Pass Through', icon: 'pi pi-fw pi-user-edit', to: '/demo/passThrough' },
+            { label: 'Grid', icon: 'pi pi-fw pi-user-edit', to: '/demo/grid' },
           ],
         },
     ],

src/pages/demo/Grid.vue

@@ -0,0 +1,46 @@
+<script setup lang='ts'>
+const primeAttributes = 'placeholder'
+const customAttributes = 'iconLeft, iconRight'
+
+const schema
+  = [
+  {
+    $el: 'div', // try an h1!
+    attrs: {
+      'class': 'flex gap-4',
+    },
+    children: [
+      {
+        $formkit: 'primeInputText',
+        name: 'name',
+        label: 'Col 1',
+        help: 'Required.',
+        validation: 'required',
+      },
+      {
+        $formkit: 'primeInputText',
+        name: 'name2',
+        label: 'Col 2',
+
+      },
+    ],
+  },
+  ]
+
+const data = { name: 'Name', name2: 'Name 2' }
+</script>
+
+<template>
+  <div class="">
+    <PrimeInput
+      header="Grid" :schema="schema" :data="data"
+      :prime-attributes="primeAttributes" :custom-attributes="customAttributes"
+    >
+
+    </PrimeInput>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+
+</style>

src/pages/demo/InputText.vue

@@ -9,8 +9,7 @@ const schema
       name: 'name',
       label: 'Basic',
       help: 'Required.',
-      validation: 'required',
-      _readonly: true,
+      validation: 'required'
     },
     {
       $formkit: 'primeInputText',

src/pages/demo/Styling.vue

@@ -44,7 +44,7 @@ const data = { name: 'Some Text in Green', name2: 'Some bold Text in Gray' }
   </div>
 </template>
 
-<style lang='scss'>
+<style lang='scss' scoped>
 
 .p-formkit {
   width:60%;