FloatLabel page added

assets/menu/menu.json

@@ -93,6 +93,11 @@
                             "name": "Editor",
                             "to": "/editor"
                         },
+                        {
+                            "name": "FloatLabel",
+                            "to": "/floatlabel",
+                            "badge": "NEW"
+                        },
                         {
                             "name": "InputGroup",
                             "to": "/inputgroup"

components/lib/floatlabel/FloatLabel.d.ts

@@ -1,13 +1,13 @@
 /**
  *
- * FloatLabel is a grouping component with the optional content toggle feature.
+ * FloatLabel appears on top of the input field when focused.
  *
  * [Live Demo](https://www.primevue.org/inputtext/)
  *
  * @module floatlabel
  *
  */
-import { AnchorHTMLAttributes, TransitionProps, VNode } from 'vue';
+import { TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@@ -108,7 +108,7 @@ export interface FloatLabelEmits {}
 /**
  * **PrimeVue - FloatLabel**
  *
- * _FloatLabel is a grouping component with the optional content toggle feature._
+ * _FloatLabel appears on top of the input field when focused._
  *
  * [Live Demo](https://www.primevue.org/inputtext/)
  * --- ---

doc/floatlabel/AccessibilityDoc.vue

@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>FloatLabel does not require any roles and attributes.</p>
+
+        <h3>Keyboard Support</h3>
+        <p>Component does not include any interactive elements.</p>
+    </DocSectionText>
+</template>

doc/floatlabel/BasicDoc.vue

@@ -0,0 +1,67 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>FloatLabel is used by wrapping the input and its label.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <FloatLabel>
+            <InputText id="username" v-model="value" />
+            <label for="username">Username</label>
+        </FloatLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<FloatLabel>
+    <InputText id="username" v-model="value" />
+    <label for="username">Username</label>
+</FloatLabel>
+`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <FloatLabel>
+            <InputText id="username" v-model="value" />
+            <label for="username">Username</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <FloatLabel>
+            <InputText id="username" v-model="value" />
+            <label for="username">Username</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>

doc/floatlabel/ImportDoc.vue

@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import FloatLabel from 'primevue/floatlabel';
+`
+            }
+        };
+    }
+};
+</script>

doc/floatlabel/theming/StyledDoc.vue

@@ -0,0 +1,21 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-float-label</td>
+                        <td>Float label element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>

doc/floatlabel/theming/index.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>FloatLabel Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'theming.styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>

pages/floatlabel/index.vue

@@ -0,0 +1,35 @@
+<template>
+    <DocComponent title="Vue Float Label" header="Float Label" description="FloatLabel appears on top of the input field when focused." :componentDocs="docs" :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 ThemingDoc from '@/doc/floatlabel/theming/index.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            themingDoc: ThemingDoc
+        };
+    }
+};
+</script>