Fixed #6419 - New IftaLabel component

apps/showcase/assets/menu/menu.json

@@ -95,6 +95,11 @@
                             "name": "Editor",
                             "to": "/editor"
                         },
+                        {
+                            "name": "IftaLabel",
+                            "to": "/iftalabel",
+                            "badge": "NEW"
+                        },
                         {
                             "name": "FloatLabel",
                             "to": "/floatlabel",

apps/showcase/doc/iftalabel/AccessibilityDoc.vue

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

apps/showcase/doc/iftalabel/BasicDoc.vue

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

apps/showcase/doc/iftalabel/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 IftaLabel from 'primevue/iftalabel';
+`
+            }
+        };
+    }
+};
+</script>

apps/showcase/doc/iftalabel/InvalidDoc.vue

@@ -0,0 +1,67 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When the form element is invalid, the label is also highlighted.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <InputText id="username" v-model="value" autocomplete="off" :invalid="!value" />
+            <label for="username">Username</label>
+        </IftaLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            code: {
+                basic: `
+<IftaLabel>
+    <InputText id="username" v-model="value" :invalid="!value" />
+    <label for="username">Username</label>
+</IftaLabel>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+       <IftaLabel>
+            <InputText id="username" v-model="value" :invalid="!value" />
+            <label for="username">Username</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+export default {
+    data() {
+        return {
+            value: ''
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+       <IftaLabel>
+            <InputText id="username" v-model="value" :invalid="!value" />
+            <label for="username">Username</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('');
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>

apps/showcase/doc/iftalabel/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>

apps/showcase/doc/iftalabel/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 { getPTOptions } from '@/components/doc/helpers';
+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: getPTOptions('FloatLabel')
+                }
+            ]
+        };
+    }
+};
+</script>

apps/showcase/doc/iftalabel/theming/TailwindDoc.vue

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

apps/showcase/doc/iftalabel/theming/index.vue

@@ -0,0 +1,56 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>IftaLabel Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
+import TailwindDoc from './TailwindDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'theming.styled',
+                    label: 'Styled',
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('IftaLabel')
+                        },
+                        {
+                            id: 'theming.tokens',
+                            label: 'Design Tokens',
+                            description: 'List of design tokens used in a preset.',
+                            component: DocApiTable,
+                            data: getTokenOptions('IftaLabel')
+                        }
+                    ]
+                },
+                {
+                    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
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+</script>

apps/showcase/pages/iftalabel/index.vue

@@ -0,0 +1,43 @@
+<template>
+    <DocComponent title="Vue Ifta Label" header="IftaLabel" description="IftaLabel visually integrates a label within its form element." :componentDocs="docs" :ptTabComponent="ptComponent" :apiDocs="['IftaLabel']" :themingDocs="themingDoc" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/iftalabel/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/iftalabel/BasicDoc.vue';
+import ImportDoc from '@/doc/iftalabel/ImportDoc.vue';
+import InvalidDoc from '@/doc/iftalabel/InvalidDoc.vue';
+import PTComponent from '@/doc/iftalabel/pt/index.vue';
+import ThemingDoc from '@/doc/iftalabel/theming/index.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
+        };
+    }
+};
+</script>

packages/primevue/src/floatlabel/FloatLabel.d.ts

@@ -1,6 +1,6 @@
 /**
  *
- * FloatLabel appears on top of the input field when focused.
+ * FloatLabel visually integrates a label with its form element.
  *
  * [Live Demo](https://www.primevue.org/floatlabel/)
  *
@@ -115,7 +115,7 @@ export declare type FloatLabelEmits = EmitFn<FloatLabelEmitsOptions>;
 /**
  * **PrimeVue - FloatLabel**
  *
- * _FloatLabel appears on top of the input field when focused._
+ * _FloatLabel visually integrates a label with its form element._
  *
  * [Live Demo](https://www.primevue.org/inputtext/)
  * --- ---

packages/primevue/src/floatlabel/style/FloatLabelStyle.d.ts

@@ -1,6 +1,6 @@
 /**
  *
- * FloatLabel appears on top of the input field when focused.
+ * FloatLabel visually integrates a label with its form element.
  *
  * [Live Demo](https://www.primevue.org/floatlabel/)
  *

packages/primevue/src/iftalabel/IftaLabel.d.ts

@@ -1,6 +1,6 @@
 /**
  *
- * FloatLabel appears on top of the input field when focused.
+ * IftaLabel visually integrates a label within its form element.
  *
  * [Live Demo](https://www.primevue.org/iftalabel/)
  *
@@ -110,7 +110,7 @@ export declare type IftaLabelEmits = EmitFn<IftaLabelEmitsOptions>;
 /**
  * **PrimeVue - IftaLabel**
  *
- * _FloatLabel appears on top of the input field when focused._
+ * _IftaLabel visually integrates a label within its form element._
  *
  * [Live Demo](https://www.primevue.org/inputtext/)
  * --- ---

packages/primevue/src/iftalabel/style/IftaLabelStyle.d.ts

@@ -1,6 +1,6 @@
 /**
  *
- * FloatLabel appears on top of the input field when focused.
+ * IftaLabel visually integrates a label within its form element.
  *
  * [Live Demo](https://www.primevue.org/floatlabel/)
  *

packages/primevue/src/iftalabel/style/IftaLabelStyle.js

@@ -1,6 +1,59 @@
 import BaseStyle from '@primevue/core/base/style';
 
 const theme = ({ dt }) => `
+.p-iftalabel {
+    display: block;
+    position: relative;
+}
+
+.p-iftalabel label {
+    position: absolute;
+    pointer-events: none;
+    top: ${dt('iftalabel.top')};
+    transition-property: all;
+    transition-timing-function: ease;
+    line-height: 1;
+    font-size: ${dt('iftalabel.font.size')};
+    font-weight: ${dt('iftalabel.font.weight')};
+    left: ${dt('iftalabel.position.x')};
+    color: ${dt('iftalabel.color')};
+    transition-duration: ${dt('iftalabel.transition.duration')};
+}
+
+.p-iftalabel .p-inputtext {
+    padding-top: ${dt('iftalabel.input.padding.top')};
+}
+
+.p-iftalabel:has(textarea) label {
+    top: 1rem;
+}
+
+.p-iftalabel:has(.p-invalid) label {
+    color: ${dt('iftalabel.invalid.color')};
+}
+
+.p-iftalabel:has(input:focus) label ,
+.p-iftalabel:has(input:-webkit-autofill) label,
+.p-iftalabel:has(textarea:focus) label ,
+.p-iftalabel:has(.p-inputwrapper-focus) label  {
+    color: ${dt('iftalabel.focus.color')};
+}
+
+.p-iftalabel .p-placeholder,
+.p-iftalabel input::placeholder,
+.p-iftalabel .p-inputtext::placeholder {
+    opacity: 0;
+    transition-property: all;
+    transition-timing-function: ease;
+}
+
+.p-iftalabel .p-focus .p-placeholder,
+.p-iftalabel input:focus::placeholder,
+.p-iftalabel .p-inputtext:focus::placeholder {
+    opacity: 1;
+    transition-property: all;
+    transition-timing-function: ease;
+}
 `;
 
 const classes = {

packages/themes/src/presets/aura/iftalabel/index.js

@@ -0,0 +1,15 @@
+export default {
+    root: {
+        color: '{form.field.float.label.color}',
+        focusColor: '{form.field.float.label.focus.color}',
+        invalidColor: '{form.field.float.label.invalid.color}',
+        transitionDuration: '0.2s',
+        positionX: '{form.field.padding.x}',
+        top: '{form.field.padding.y}',
+        fontSize: '0.875rem',
+        fontWeight: '400'
+    },
+    input: {
+        paddingTop: '1.5rem'
+    }
+};

packages/themes/src/presets/aura/iftalabel/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./index.js",
+    "module": "./index.js",
+    "types": "../types/iftalabel/index.d.ts"
+}

packages/themes/src/presets/aura/index.js

@@ -27,6 +27,7 @@ import fileupload from '@primevue/themes/aura/fileupload';
 import floatlabel from '@primevue/themes/aura/floatlabel';
 import galleria from '@primevue/themes/aura/galleria';
 import iconfield from '@primevue/themes/aura/iconfield';
+import iftalabel from '@primevue/themes/aura/iftalabel';
 import image from '@primevue/themes/aura/image';
 import inlinemessage from '@primevue/themes/aura/inlinemessage';
 import inplace from '@primevue/themes/aura/inplace';
@@ -489,6 +490,7 @@ export default {
         editor,
         fieldset,
         fileupload,
+        iftalabel,
         floatlabel,
         galleria,
         iconfield,

packages/themes/src/presets/lara/iftalabel/index.js

@@ -0,0 +1,15 @@
+export default {
+    root: {
+        color: '{form.field.float.label.color}',
+        focusColor: '{form.field.float.label.focus.color}',
+        invalidColor: '{form.field.float.label.invalid.color}',
+        transitionDuration: '0.2s',
+        positionX: '{form.field.padding.x}',
+        top: '{form.field.padding.y}',
+        fontSize: '0.875rem',
+        fontWeight: '400'
+    },
+    input: {
+        paddingTop: '1.875rem'
+    }
+};

packages/themes/src/presets/lara/iftalabel/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./index.js",
+    "module": "./index.js",
+    "types": "../types/iftalabel/index.d.ts"
+}

packages/themes/src/presets/lara/index.js

@@ -27,6 +27,7 @@ import fileupload from '@primevue/themes/lara/fileupload';
 import floatlabel from '@primevue/themes/lara/floatlabel';
 import galleria from '@primevue/themes/lara/galleria';
 import iconfield from '@primevue/themes/lara/iconfield';
+import iftalabel from '@primevue/themes/lara/iftalabel';
 import image from '@primevue/themes/lara/image';
 import inlinemessage from '@primevue/themes/lara/inlinemessage';
 import inplace from '@primevue/themes/lara/inplace';
@@ -494,6 +495,7 @@ export default {
         editor,
         fieldset,
         fileupload,
+        iftalabel,
         floatlabel,
         galleria,
         iconfield,

packages/themes/src/presets/nora/iftalabel/index.js

@@ -0,0 +1,15 @@
+export default {
+    root: {
+        color: '{form.field.float.label.color}',
+        focusColor: '{form.field.float.label.focus.color}',
+        invalidColor: '{form.field.float.label.invalid.color}',
+        transitionDuration: '0.2s',
+        positionX: '{form.field.padding.x}',
+        top: '{form.field.padding.y}',
+        fontSize: '0.875rem',
+        fontWeight: '400'
+    },
+    input: {
+        paddingTop: '1.5rem'
+    }
+};

packages/themes/src/presets/nora/iftalabel/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./index.js",
+    "module": "./index.js",
+    "types": "../types/iftalabel/index.d.ts"
+}

packages/themes/src/presets/nora/index.js

@@ -27,6 +27,7 @@ import fileupload from '@primevue/themes/nora/fileupload';
 import floatlabel from '@primevue/themes/nora/floatlabel';
 import galleria from '@primevue/themes/nora/galleria';
 import iconfield from '@primevue/themes/nora/iconfield';
+import iftalabel from '@primevue/themes/nora/iftalabel';
 import image from '@primevue/themes/nora/image';
 import inlinemessage from '@primevue/themes/nora/inlinemessage';
 import inplace from '@primevue/themes/nora/inplace';
@@ -489,6 +490,7 @@ export default {
         editor,
         fieldset,
         fileupload,
+        iftalabel,
         floatlabel,
         galleria,
         iconfield,