Doc updates

components/lib/floatlabel/FloatLabel.d.ts

@@ -56,10 +56,6 @@ export interface FloatLabelPassThroughOptions {
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;
-    /**
-     * Used to control Vue Transition API.
-     */
-    transition?: FloatLabelPassThroughTransitionType;
 }
 
 /**

doc/floatlabel/pt/PTImage.vue

@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>

doc/floatlabel/pt/index.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>FloatLabel Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.floatlabel',
+                    label: 'FloatLabel PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('FloatLabel')
+                }
+            ]
+        };
+    }
+};
+</script>

doc/floatlabel/theming/TailwindDoc.vue

@@ -0,0 +1,6 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
+        Tailwind CSS.
+    </DocSectionText>
+</template>

doc/floatlabel/theming/index.vue

@@ -10,6 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -19,6 +20,18 @@ export default {
                     id: 'theming.styled',
                     label: 'Styled',
                     component: StyledDoc
+                },
+                {
+                    id: 'theming.unstyled',
+                    label: 'Unstyled',
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'theming.tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };

doc/iconfield/pt/PTImage.vue

@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>

doc/iconfield/pt/index.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>IconField Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.iconfield',
+                    label: 'IconField PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('IconField')
+                },
+                {
+                    id: 'pt.doc.inputicon',
+                    label: 'InputIcon PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('InputIcon')
+                }
+            ]
+        };
+    }
+};
+</script>

doc/iconfield/theming/TailwindDoc.vue

@@ -0,0 +1,6 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
+        Tailwind CSS.
+    </DocSectionText>
+</template>

doc/iconfield/theming/index.vue

@@ -10,6 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -19,6 +20,18 @@ export default {
                     id: 'theming.styled',
                     label: 'Styled',
                     component: StyledDoc
+                },
+                {
+                    id: 'theming.unstyled',
+                    label: 'Unstyled',
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'theming.tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };

doc/iconfield/theming/pt/PTImage.vue

@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>

doc/iconfield/theming/pt/index.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>IconField Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.iconfield',
+                    label: 'IconField PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('IconField')
+                }
+            ]
+        };
+    }
+};
+</script>

pages/floatlabel/index.vue

@@ -1,11 +1,12 @@
 <template>
-    <DocComponent title="Vue Float Label" header="FloatLabel" description="FloatLabel appears on top of the input field when focused." :componentDocs="docs" :apiDocs="['FloatLabel']" :themingDocs="themingDoc" />
+    <DocComponent title="Vue Float Label" header="FloatLabel" description="FloatLabel appears on top of the input field when focused." :componentDocs="docs" :ptTabComponent="ptComponent" :apiDocs="['FloatLabel']" :themingDocs="themingDoc" />
 </template>
 
 <script>
 import AccessibilityDoc from '@/doc/floatlabel/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/floatlabel/BasicDoc.vue';
 import ImportDoc from '@/doc/floatlabel/ImportDoc.vue';
+import PTComponent from '@/doc/floatlabel/pt/index.vue';
 import ThemingDoc from '@/doc/floatlabel/theming/index.vue';
 
 export default {
@@ -28,6 +29,7 @@ export default {
                     component: AccessibilityDoc
                 }
             ],
+            ptComponent: PTComponent,
             themingDoc: ThemingDoc
         };
     }

pages/iconfield/index.vue

@@ -1,11 +1,12 @@
 <template>
-    <DocComponent title="Vue IconFiled" header="IconFiled" description="IconField wraps an input and an icon." :componentDocs="docs" :apiDocs="['IconField', 'InputIcon']" :themingDocs="themingDoc" />
+    <DocComponent title="Vue IconFiled" header="IconFiled" description="IconField wraps an input and an icon." :componentDocs="docs" :ptTabComponent="ptComponent" :apiDocs="['IconField', 'InputIcon']" :themingDocs="themingDoc" />
 </template>
 
 <script>
 import AccessibilityDoc from '@/doc/iconfield/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/iconfield/BasicDoc.vue';
 import ImportDoc from '@/doc/iconfield/ImportDoc.vue';
+import PTComponent from '@/doc/iconfield/pt/index.vue';
 import ThemingDoc from '@/doc/iconfield/theming/index.vue';
 
 export default {
@@ -28,6 +29,7 @@ export default {
                     component: AccessibilityDoc
                 }
             ],
+            ptComponent: PTComponent,
             themingDoc: ThemingDoc
         };
     }