vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #6419 - New IftaLabel component

pull/6424/head
Cagatay Civici 2024-09-17 14:34:59 +03:00
parent 9ca36be4b0
commit d3c67ceadc
24 changed files with 441 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/showcase/assets/menu/menu.json
View File

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

9
apps/showcase/doc/iftalabel/AccessibilityDoc.vue Normal file
View File

@ -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>

67
apps/showcase/doc/iftalabel/BasicDoc.vue Normal file
View File

@ -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>

18
apps/showcase/doc/iftalabel/ImportDoc.vue Normal file
View File

@ -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>

67
apps/showcase/doc/iftalabel/InvalidDoc.vue Normal file
View File

@ -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>

8
apps/showcase/doc/iftalabel/pt/PTImage.vue Normal file
View File

@ -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>

35
apps/showcase/doc/iftalabel/pt/index.vue Normal file
View File

@ -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>

8
apps/showcase/doc/iftalabel/theming/TailwindDoc.vue Normal file
View File

@ -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>

56
apps/showcase/doc/iftalabel/theming/index.vue Normal file
View File

@ -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>

43
apps/showcase/pages/iftalabel/index.vue Normal file
View File

@ -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>

4
packages/primevue/src/floatlabel/FloatLabel.d.ts vendored
View File

@ -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/)
* --- ---

2
packages/primevue/src/floatlabel/style/FloatLabelStyle.d.ts vendored
View File

@ -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/)
*

4
packages/primevue/src/iftalabel/IftaLabel.d.ts vendored
View File

@ -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/)
* --- ---

2
packages/primevue/src/iftalabel/style/IftaLabelStyle.d.ts vendored
View File

@ -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/)
*

53
packages/primevue/src/iftalabel/style/IftaLabelStyle.js
View File

@ -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 = {

15
packages/themes/src/presets/aura/iftalabel/index.js Normal file
View File

@ -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'
}
};

5
packages/themes/src/presets/aura/iftalabel/package.json Normal file
View File

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

2
packages/themes/src/presets/aura/index.js
View File

@ -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,

15
packages/themes/src/presets/lara/iftalabel/index.js Normal file
View File

@ -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'
}
};

5
packages/themes/src/presets/lara/iftalabel/package.json Normal file
View File

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

2
packages/themes/src/presets/lara/index.js
View File

@ -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,

15
packages/themes/src/presets/nora/iftalabel/index.js Normal file
View File

@ -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'
}
};

5
packages/themes/src/presets/nora/iftalabel/package.json Normal file
View File

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

2
packages/themes/src/presets/nora/index.js
View File

@ -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,