Fixed #6419 - New IftaLabel component

primefaces · Sep 17, 2024 · d3c67ce · d3c67ce
1 parent 9ca36be
commit d3c67ce
Show file tree

Hide file tree

Showing 24 changed files with 441 additions and 6 deletions.
diff --git a/apps/showcase/assets/menu/menu.json b/apps/showcase/assets/menu/menu.json
@@ -95,6 +95,11 @@
                             "name": "Editor",
                             "to": "/editor"
                         },
+                        {
+                            "name": "IftaLabel",
+                            "to": "/iftalabel",
+                            "badge": "NEW"
+                        },
                         {
                             "name": "FloatLabel",
                             "to": "/floatlabel",

diff --git a/apps/showcase/doc/iftalabel/AccessibilityDoc.vue b/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>
diff --git a/apps/showcase/doc/iftalabel/BasicDoc.vue b/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>
diff --git a/apps/showcase/doc/iftalabel/ImportDoc.vue b/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>
diff --git a/apps/showcase/doc/iftalabel/InvalidDoc.vue b/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>
diff --git a/apps/showcase/doc/iftalabel/pt/PTImage.vue b/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>
diff --git a/apps/showcase/doc/iftalabel/pt/index.vue b/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>
diff --git a/apps/showcase/doc/iftalabel/theming/TailwindDoc.vue b/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>
diff --git a/apps/showcase/doc/iftalabel/theming/index.vue b/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>
diff --git a/apps/showcase/pages/iftalabel/index.vue b/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>
diff --git a/packages/primevue/src/floatlabel/FloatLabel.d.ts b/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/)
  * --- ---

diff --git a/packages/primevue/src/floatlabel/style/FloatLabelStyle.d.ts b/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/)
  *

diff --git a/packages/primevue/src/iftalabel/IftaLabel.d.ts b/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/)
  * --- ---

diff --git a/packages/primevue/src/iftalabel/style/IftaLabelStyle.d.ts b/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/)
  *