diff --git a/apps/showcase/assets/menu/menu.json b/apps/showcase/assets/menu/menu.json index 26e9f9482..007937412 100644 --- 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 new file mode 100644 index 000000000..05d727668 --- /dev/null +++ b/apps/showcase/doc/iftalabel/AccessibilityDoc.vue @@ -0,0 +1,9 @@ + diff --git a/apps/showcase/doc/iftalabel/BasicDoc.vue b/apps/showcase/doc/iftalabel/BasicDoc.vue new file mode 100644 index 000000000..4710e6753 --- /dev/null +++ b/apps/showcase/doc/iftalabel/BasicDoc.vue @@ -0,0 +1,67 @@ + + + diff --git a/apps/showcase/doc/iftalabel/ImportDoc.vue b/apps/showcase/doc/iftalabel/ImportDoc.vue new file mode 100644 index 000000000..c54ef52e4 --- /dev/null +++ b/apps/showcase/doc/iftalabel/ImportDoc.vue @@ -0,0 +1,18 @@ + + + diff --git a/apps/showcase/doc/iftalabel/InvalidDoc.vue b/apps/showcase/doc/iftalabel/InvalidDoc.vue new file mode 100644 index 000000000..8f0fd39ed --- /dev/null +++ b/apps/showcase/doc/iftalabel/InvalidDoc.vue @@ -0,0 +1,67 @@ + + + diff --git a/apps/showcase/doc/iftalabel/pt/PTImage.vue b/apps/showcase/doc/iftalabel/pt/PTImage.vue new file mode 100644 index 000000000..9ac50d6b4 --- /dev/null +++ b/apps/showcase/doc/iftalabel/pt/PTImage.vue @@ -0,0 +1,8 @@ + diff --git a/apps/showcase/doc/iftalabel/pt/index.vue b/apps/showcase/doc/iftalabel/pt/index.vue new file mode 100644 index 000000000..dab994c74 --- /dev/null +++ b/apps/showcase/doc/iftalabel/pt/index.vue @@ -0,0 +1,35 @@ + + + diff --git a/apps/showcase/doc/iftalabel/theming/TailwindDoc.vue b/apps/showcase/doc/iftalabel/theming/TailwindDoc.vue new file mode 100644 index 000000000..4daa6c5f8 --- /dev/null +++ b/apps/showcase/doc/iftalabel/theming/TailwindDoc.vue @@ -0,0 +1,8 @@ + diff --git a/apps/showcase/doc/iftalabel/theming/index.vue b/apps/showcase/doc/iftalabel/theming/index.vue new file mode 100644 index 000000000..7439af3b9 --- /dev/null +++ b/apps/showcase/doc/iftalabel/theming/index.vue @@ -0,0 +1,56 @@ + + + diff --git a/apps/showcase/pages/iftalabel/index.vue b/apps/showcase/pages/iftalabel/index.vue new file mode 100644 index 000000000..30acb8cb3 --- /dev/null +++ b/apps/showcase/pages/iftalabel/index.vue @@ -0,0 +1,43 @@ + + + diff --git a/packages/primevue/src/floatlabel/FloatLabel.d.ts b/packages/primevue/src/floatlabel/FloatLabel.d.ts index c40a53cfa..34e9182be 100644 --- 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; /** * **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 index b03eae5bc..cd7f0c190 100644 --- 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 index 05f26456e..31dee0933 100644 --- 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; /** * **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 index b06f0eeeb..1dbafe6da 100644 --- 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/) * diff --git a/packages/primevue/src/iftalabel/style/IftaLabelStyle.js b/packages/primevue/src/iftalabel/style/IftaLabelStyle.js index 72d6aa192..e6519b25c 100644 --- a/packages/primevue/src/iftalabel/style/IftaLabelStyle.js +++ b/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 = { diff --git a/packages/themes/src/presets/aura/iftalabel/index.js b/packages/themes/src/presets/aura/iftalabel/index.js new file mode 100644 index 000000000..5cc6aa652 --- /dev/null +++ b/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' + } +}; diff --git a/packages/themes/src/presets/aura/iftalabel/package.json b/packages/themes/src/presets/aura/iftalabel/package.json new file mode 100644 index 000000000..aabb4f24e --- /dev/null +++ b/packages/themes/src/presets/aura/iftalabel/package.json @@ -0,0 +1,5 @@ +{ + "main": "./index.js", + "module": "./index.js", + "types": "../types/iftalabel/index.d.ts" +} diff --git a/packages/themes/src/presets/aura/index.js b/packages/themes/src/presets/aura/index.js index c58df5a3d..c7796c794 100644 --- a/packages/themes/src/presets/aura/index.js +++ b/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, diff --git a/packages/themes/src/presets/lara/iftalabel/index.js b/packages/themes/src/presets/lara/iftalabel/index.js new file mode 100644 index 000000000..3b0a4aae7 --- /dev/null +++ b/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' + } +}; diff --git a/packages/themes/src/presets/lara/iftalabel/package.json b/packages/themes/src/presets/lara/iftalabel/package.json new file mode 100644 index 000000000..aabb4f24e --- /dev/null +++ b/packages/themes/src/presets/lara/iftalabel/package.json @@ -0,0 +1,5 @@ +{ + "main": "./index.js", + "module": "./index.js", + "types": "../types/iftalabel/index.d.ts" +} diff --git a/packages/themes/src/presets/lara/index.js b/packages/themes/src/presets/lara/index.js index b5b78fa6f..628afbbae 100644 --- a/packages/themes/src/presets/lara/index.js +++ b/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, diff --git a/packages/themes/src/presets/nora/iftalabel/index.js b/packages/themes/src/presets/nora/iftalabel/index.js new file mode 100644 index 000000000..5cc6aa652 --- /dev/null +++ b/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' + } +}; diff --git a/packages/themes/src/presets/nora/iftalabel/package.json b/packages/themes/src/presets/nora/iftalabel/package.json new file mode 100644 index 000000000..aabb4f24e --- /dev/null +++ b/packages/themes/src/presets/nora/iftalabel/package.json @@ -0,0 +1,5 @@ +{ + "main": "./index.js", + "module": "./index.js", + "types": "../types/iftalabel/index.d.ts" +} diff --git a/packages/themes/src/presets/nora/index.js b/packages/themes/src/presets/nora/index.js index fda99dd13..a121ec0be 100644 --- a/packages/themes/src/presets/nora/index.js +++ b/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,