From 88a679feafa927f04cd9658090a95aed691d4247 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Fri, 2 Feb 2024 15:40:35 +0300
Subject: [PATCH] FloatLabel page added

---
 assets/menu/menu.json                     |  5 ++
 components/lib/floatlabel/FloatLabel.d.ts |  6 +-
 doc/floatlabel/AccessibilityDoc.vue       |  9 +++
 doc/floatlabel/BasicDoc.vue               | 67 +++++++++++++++++++++++
 doc/floatlabel/ImportDoc.vue              | 18 ++++++
 doc/floatlabel/theming/StyledDoc.vue      | 21 +++++++
 doc/floatlabel/theming/index.vue          | 27 +++++++++
 pages/floatlabel/index.vue                | 35 ++++++++++++
 8 files changed, 185 insertions(+), 3 deletions(-)
 create mode 100644 doc/floatlabel/AccessibilityDoc.vue
 create mode 100644 doc/floatlabel/BasicDoc.vue
 create mode 100644 doc/floatlabel/ImportDoc.vue
 create mode 100644 doc/floatlabel/theming/StyledDoc.vue
 create mode 100644 doc/floatlabel/theming/index.vue
 create mode 100644 pages/floatlabel/index.vue

diff --git a/assets/menu/menu.json b/assets/menu/menu.json
index 1f54976eb..ca4700c4b 100644
--- a/assets/menu/menu.json
+++ b/assets/menu/menu.json
@@ -93,6 +93,11 @@
                             "name": "Editor",
                             "to": "/editor"
                         },
+                        {
+                            "name": "FloatLabel",
+                            "to": "/floatlabel",
+                            "badge": "NEW"
+                        },
                         {
                             "name": "InputGroup",
                             "to": "/inputgroup"
diff --git a/components/lib/floatlabel/FloatLabel.d.ts b/components/lib/floatlabel/FloatLabel.d.ts
index 4c04e0499..4fad3a484 100644
--- a/components/lib/floatlabel/FloatLabel.d.ts
+++ b/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/)
  * --- ---
diff --git a/doc/floatlabel/AccessibilityDoc.vue b/doc/floatlabel/AccessibilityDoc.vue
new file mode 100644
index 000000000..6f5b4e1eb
--- /dev/null
+++ b/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>
diff --git a/doc/floatlabel/BasicDoc.vue b/doc/floatlabel/BasicDoc.vue
new file mode 100644
index 000000000..aeaf46ebc
--- /dev/null
+++ b/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>
diff --git a/doc/floatlabel/ImportDoc.vue b/doc/floatlabel/ImportDoc.vue
new file mode 100644
index 000000000..b6bd6f478
--- /dev/null
+++ b/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>
diff --git a/doc/floatlabel/theming/StyledDoc.vue b/doc/floatlabel/theming/StyledDoc.vue
new file mode 100644
index 000000000..492c7c372
--- /dev/null
+++ b/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>
diff --git a/doc/floatlabel/theming/index.vue b/doc/floatlabel/theming/index.vue
new file mode 100644
index 000000000..c34b8f644
--- /dev/null
+++ b/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>
diff --git a/pages/floatlabel/index.vue b/pages/floatlabel/index.vue
new file mode 100644
index 000000000..0f992c137
--- /dev/null
+++ b/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>