docs(styling): Add Samples

Author: sfxcode

src/components/app/AppTopbar.vue

@@ -53,7 +53,17 @@ const items = ref([
           ],
         },
       ],
+
+    [
+        {
+          label: 'Styling',
+          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' },
+          ],
+        },
     ],
+        ]
   },
 ])
 </script>

src/components/demo/PrimeInput.vue

@@ -20,7 +20,7 @@ const documentationLink = `https://primevue.org/${props.header.replace('Prime',
 <template>
   <div>
     <h1>{{ header }}</h1>
-
+    <slot/>
     <div class="flex flex-wrap gap-12">
       <div class="min-w-30rem basis-1/3 md:basis-1/4">
         <FormKit

src/pages/demo/InputText.vue

@@ -2,10 +2,6 @@
 const primeAttributes = 'placeholder'
 const customAttributes = 'iconLeft, iconRight'
 
-const pt_content = {
-  root: { style: 'font-weight: 600;' },
-}
-
 const schema
   = [
     {
@@ -14,7 +10,6 @@ const schema
       label: 'Basic',
       help: 'Required.',
       validation: 'required',
-      pt: pt_content,
       _readonly: true,
     },
     {

src/pages/demo/PassThrough.vue

@@ -0,0 +1,36 @@
+<script setup lang='ts'>
+const primeAttributes = 'placeholder'
+const customAttributes = 'iconLeft, iconRight'
+
+const pt_content = {
+  root: { style: 'font-weight: 600;color: green;' },
+}
+
+const schema
+  = [
+    {
+      $formkit: 'primeInputText',
+      name: 'name',
+      label: 'Basic',
+      help: 'Required.',
+      validation: 'required',
+      pt: pt_content
+    },
+
+  ]
+
+const data = { name: 'Some Text in Green' }
+</script>
+
+<template>
+  <div class="">
+    <PrimeInput
+      header="Pass Through" :schema="schema" :data="data"
+      :prime-attributes="primeAttributes" :custom-attributes="customAttributes"
+    />
+  </div>
+</template>
+
+<style lang='scss' scoped>
+
+</style>

src/pages/demo/Styling.vue

@@ -0,0 +1,55 @@
+<script setup lang='ts'>
+const primeAttributes = 'placeholder'
+const customAttributes = 'iconLeft, iconRight'
+
+const schema
+  = [
+    {
+      $formkit: 'primeInputText',
+      name: 'name',
+      label: 'Styling by class',
+      help: 'Required.',
+      validation: 'required',
+      class: 'stylingSampleClass',
+    },
+  {
+    $formkit: 'primeInputText',
+    name: 'name2',
+    label: 'Styling by class',
+    help: 'Required.',
+    validation: 'required',
+    style: 'color: gray;font-weight: 700;',
+  },
+
+  ]
+
+const data = { name: 'Some Text in Green', name2: 'Some bold Text in Gray' }
+</script>
+
+<template>
+  <div class="">
+    <PrimeInput
+      header="Styling" :schema="schema" :data="data"
+      :prime-attributes="primeAttributes" :custom-attributes="customAttributes"
+    >
+     <div class="pb-8">
+       <span>Use Custom classes for better styling. <br/>To be specific you can use use the parent div class: p-formkit.
+       <br/>
+         Direct styling by the style attribute.
+        <br/>
+       In this demo elements with the  p-formkit class use only 60% of the parent width.
+       </span>
+     </div>
+    </PrimeInput>
+  </div>
+</template>
+
+<style lang='scss'>
+
+.p-formkit {
+  width:60%;
+  .stylingSampleClass {
+    color: green;
+  }
+}
+</style>