From 52da6269bc2f2b6e5f45f99c38c9866bca5ef980 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 20 Sep 2024 20:59:42 +0300
Subject: [PATCH] Float and Ifta label demos for InputGroup

---
 .../showcase/doc/inputgroup/FloatLabelDoc.vue | 160 ++++++++++++++++++
 apps/showcase/doc/inputgroup/IftaLabelDoc.vue |  82 +++++++++
 apps/showcase/pages/inputgroup/index.vue      |  12 ++
 .../src/inputgroup/style/InputGroupStyle.js   |  21 ++-
 4 files changed, 268 insertions(+), 7 deletions(-)
 create mode 100644 apps/showcase/doc/inputgroup/FloatLabelDoc.vue
 create mode 100644 apps/showcase/doc/inputgroup/IftaLabelDoc.vue

diff --git a/apps/showcase/doc/inputgroup/FloatLabelDoc.vue b/apps/showcase/doc/inputgroup/FloatLabelDoc.vue
new file mode 100644
index 000000000..fa503280d
--- /dev/null
+++ b/apps/showcase/doc/inputgroup/FloatLabelDoc.vue
@@ -0,0 +1,160 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>FloatLabel visually integrates a label with its form element. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex flex-col md:items-end md:flex-row gap-4">
+        <InputGroup>
+            <InputGroupAddon>
+                <i class="pi pi-user"></i>
+            </InputGroupAddon>
+            <FloatLabel>
+                <InputText id="over_label" v-model="value1" />
+                <label for="over_label">Over Label</label>
+            </FloatLabel>
+        </InputGroup>
+
+        <InputGroup>
+            <InputGroupAddon>$</InputGroupAddon>
+            <FloatLabel variant="in">
+                <InputText id="in_label" v-model="value2" />
+                <label for="in_label">In Label</label>
+            </FloatLabel>
+            <InputGroupAddon>.00</InputGroupAddon>
+        </InputGroup>
+
+        <InputGroup>
+            <InputGroupAddon>www</InputGroupAddon>
+            <FloatLabel variant="on">
+                <InputText id="on_label" v-model="value3" />
+                <label for="on_label">On Label</label>
+            </FloatLabel>
+        </InputGroup>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            code: {
+                basic: `
+<InputGroup>
+    <InputGroupAddon>
+        <i class="pi pi-user"></i>
+    </InputGroupAddon>
+    <FloatLabel>
+        <InputText id="over_label" v-model="value1" />
+        <label for="over_label">Over Label</label>
+    </FloatLabel>
+</InputGroup>
+
+<InputGroup>
+    <InputGroupAddon>$</InputGroupAddon>
+    <FloatLabel variant="in">
+        <InputText id="in_label" v-model="value2" />
+        <label for="in_label">In Label</label>
+    </FloatLabel>
+    <InputGroupAddon>.00</InputGroupAddon>
+</InputGroup>
+
+<InputGroup>
+    <InputGroupAddon>www</InputGroupAddon>
+    <FloatLabel variant="on">
+        <InputText id="on_label" v-model="value3" />
+        <label for="on_label">On Label</label>
+    </FloatLabel>
+</InputGroup>
+`,
+                options: `
+<template>
+    <div class="card flex flex-col md:items-end md:flex-row gap-4">
+        <InputGroup>
+            <InputGroupAddon>
+                <i class="pi pi-user"></i>
+            </InputGroupAddon>
+            <FloatLabel>
+                <InputText id="over_label" v-model="value1" />
+                <label for="over_label">Over Label</label>
+            </FloatLabel>
+        </InputGroup>
+
+        <InputGroup>
+            <InputGroupAddon>$</InputGroupAddon>
+            <FloatLabel variant="in">
+                <InputText id="in_label" v-model="value2" />
+                <label for="in_label">In Label</label>
+            </FloatLabel>
+            <InputGroupAddon>.00</InputGroupAddon>
+        </InputGroup>
+
+        <InputGroup>
+            <InputGroupAddon>www</InputGroupAddon>
+            <FloatLabel variant="on">
+                <InputText id="on_label" v-model="value3" />
+                <label for="on_label">On Label</label>
+            </FloatLabel>
+        </InputGroup>
+    </div>
+</template>
+
+<script setup>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col md:items-end md:flex-row gap-4">
+        <InputGroup>
+            <InputGroupAddon>
+                <i class="pi pi-user"></i>
+            </InputGroupAddon>
+            <FloatLabel>
+                <InputText id="over_label" v-model="value1" />
+                <label for="over_label">Over Label</label>
+            </FloatLabel>
+        </InputGroup>
+
+        <InputGroup>
+            <InputGroupAddon>$</InputGroupAddon>
+            <FloatLabel variant="in">
+                <InputText id="in_label" v-model="value2" />
+                <label for="in_label">In Label</label>
+            </FloatLabel>
+            <InputGroupAddon>.00</InputGroupAddon>
+        </InputGroup>
+
+        <InputGroup>
+            <InputGroupAddon>www</InputGroupAddon>
+            <FloatLabel variant="on">
+                <InputText id="on_label" v-model="value3" />
+                <label for="on_label">On Label</label>
+            </FloatLabel>
+        </InputGroup>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/inputgroup/IftaLabelDoc.vue b/apps/showcase/doc/inputgroup/IftaLabelDoc.vue
new file mode 100644
index 000000000..6e9ecd24d
--- /dev/null
+++ b/apps/showcase/doc/inputgroup/IftaLabelDoc.vue
@@ -0,0 +1,82 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputGroup class="md:w-80">
+            <InputGroupAddon>USD</InputGroupAddon>
+            <IftaLabel>
+                <InputText id="price" v-model="value" />
+                <label for="price">Price</label>
+            </IftaLabel>
+            <InputGroupAddon>.00</InputGroupAddon>
+        </InputGroup>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<InputGroup>
+    <InputGroupAddon>USD</InputGroupAddon>
+    <IftaLabel>
+        <InputText id="price" v-model="value" />
+        <label for="price">Price</label>
+    </IftaLabel>
+    <InputGroupAddon>.00</InputGroupAddon>
+</InputGroup>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <InputGroup class="md:w-80">
+            <InputGroupAddon>USD</InputGroupAddon>
+            <IftaLabel>
+                <InputText id="price" v-model="value" />
+                <label for="price">Price</label>
+            </IftaLabel>
+            <InputGroupAddon>.00</InputGroupAddon>
+        </InputGroup>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <InputGroup class="md:w-80">
+            <InputGroupAddon>USD</InputGroupAddon>
+            <IftaLabel>
+                <InputText id="price" v-model="value" />
+                <label for="price">Price</label>
+            </IftaLabel>
+            <InputGroupAddon>.00</InputGroupAddon>
+        </InputGroup>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/pages/inputgroup/index.vue b/apps/showcase/pages/inputgroup/index.vue
index 34ac5b733..cabb64a20 100755
--- a/apps/showcase/pages/inputgroup/index.vue
+++ b/apps/showcase/pages/inputgroup/index.vue
@@ -15,6 +15,8 @@ import AccessibilityDoc from '@/doc/inputgroup/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/inputgroup/BasicDoc.vue';
 import ButtonDoc from '@/doc/inputgroup/ButtonDoc.vue';
 import CheckboxDoc from '@/doc/inputgroup/CheckboxDoc.vue';
+import FloatLabelDoc from '@/doc/inputgroup/FloatLabelDoc.vue';
+import IftaLabelDoc from '@/doc/inputgroup/IftaLabelDoc.vue';
 import ImportDoc from '@/doc/inputgroup/ImportDoc.vue';
 import MultipleDoc from '@/doc/inputgroup/MultipleDoc.vue';
 import PTComponent from '@/doc/inputgroup/pt/index.vue';
@@ -49,6 +51,16 @@ export default {
                     label: 'Checkbox & Radio',
                     component: CheckboxDoc
                 },
+                {
+                    id: 'floatlabel',
+                    label: 'Float Label',
+                    component: FloatLabelDoc
+                },
+                {
+                    id: 'iftalabel',
+                    label: 'Ifta Label',
+                    component: IftaLabelDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
diff --git a/packages/primevue/src/inputgroup/style/InputGroupStyle.js b/packages/primevue/src/inputgroup/style/InputGroupStyle.js
index 456986b2e..9173c5789 100644
--- a/packages/primevue/src/inputgroup/style/InputGroupStyle.js
+++ b/packages/primevue/src/inputgroup/style/InputGroupStyle.js
@@ -21,7 +21,8 @@ const theme = ({ dt }) => `
     min-width: 2.5rem;
 }
 
-.p-inputgroup .p-floatlabel {
+.p-inputgroup .p-floatlabel,
+.p-inputgroup .p-iftalabel {
     display: flex;
     align-items: stretch;
     width: 100%;
@@ -41,26 +42,30 @@ const theme = ({ dt }) => `
 
 .p-inputgroup > .p-component,
 .p-inputgroup > .p-inputwrapper > .p-inputtext,
-.p-inputgroup > .p-floatlabel > .p-component {
+.p-inputgroup > .p-floatlabel > .p-component,
+.p-inputgroup > .p-iftalabel > .p-component {
     border-radius: 0;
     margin: 0;
 }
 
 .p-inputgroup > .p-component + .p-inputgroupaddon,
 .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroupaddon,
-.p-inputgroup > .p-floatlabel > .p-component + .p-inputgroupaddon {
+.p-inputgroup > .p-floatlabel > .p-component + .p-inputgroupaddon,
+.p-inputgroup > .p-iftalabel > .p-component + .p-inputgroupaddon {
     border-left: 0 none;
 }
 
 .p-inputgroup > .p-component:focus,
 .p-inputgroup > .p-inputwrapper > .p-inputtext:focus,
-.p-inputgroup > .p-floatlabel > .p-component:focus {
+.p-inputgroup > .p-floatlabel > .p-component:focus,
+.p-inputgroup > .p-iftalabel > .p-component:focus {
     z-index: 1;
 }
 
 .p-inputgroup > .p-component:focus ~ label,
 .p-inputgroup > .p-inputwrapper > .p-inputtext:focus~label,
-.p-inputgroup > .p-floatlabel > .p-component:focus~label {
+.p-inputgroup > .p-floatlabel > .p-component:focus~label,
+.p-inputgroup > .p-iftalabel > .p-component:focus~label {
     z-index: 1;
 }
 
@@ -73,7 +78,8 @@ const theme = ({ dt }) => `
     border-bottom-left-radius: ${dt('inputgroup.addon.border.radius')};
 }
 
-.p-inputgroup .p-floatlabel:first-child input {
+.p-inputgroup .p-floatlabel:first-child input,
+.p-inputgroup .p-iftalabel:first-child input {
     border-top-left-radius: ${dt('inputgroup.addon.border.radius')};
     border-bottom-left-radius: ${dt('inputgroup.addon.border.radius')};
 }
@@ -87,7 +93,8 @@ const theme = ({ dt }) => `
     border-bottom-right-radius: ${dt('inputgroup.addon.border.radius')};
 }
 
-.p-inputgroup .p-floatlabel:last-child input {
+.p-inputgroup .p-floatlabel:last-child input,
+.p-inputgroup .p-iftalabel:last-child input {
     border-top-right-radius: ${dt('inputgroup.addon.border.radius')};
     border-bottom-right-radius: ${dt('inputgroup.addon.border.radius')};
 }