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

Float and Ifta label support for textarea

pull/6439/head
Cagatay Civici 2024-09-19 10:29:46 +03:00
parent d9db64cbc8
commit 483dfe94b5
8 changed files with 147 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
apps/showcase/doc/textarea/FloatLabelDoc.vue
View File

@ -2,10 +2,20 @@
<DocSectionText v-bind="$attrs">
<p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
</DocSectionText>
<div class="card flex justify-center">
<div class="card flex flex-wrap justify-center items-stretch gap-4">
<FloatLabel>
<Textarea v-model="value" rows="5" cols="30" style="resize: none" />
<label>Username</label>
<Textarea id="over_label" v-model="value1" rows="5" cols="30" style="resize: none" class="h-full" />
<label for="over_label">Over Label</label>
</FloatLabel>
<FloatLabel variant="in">
<Textarea id="over_label" v-model="value2" rows="5" cols="30" style="resize: none" class="h-full" />
<label for="in_label">In Label</label>
</FloatLabel>
<FloatLabel variant="on">
<Textarea id="over_label" v-model="value3" rows="5" cols="30" style="resize: none" class="h-full" />
<label for="on_label">On Label</label>
</FloatLabel>
</div>
<DocSectionCode :code="code" />
@ -15,20 +25,42 @@
export default {
data() {
return {
value: '',
value1: '',
value2: '',
value3: '',
code: {
basic: `
<FloatLabel>
<Textarea v-model="value" rows="5" cols="30" />
<label>Username</label>
<Textarea id="over_label" v-model="value1" rows="5" cols="30" style="resize: none" />
<label for="over_label">Over Label</label>
</FloatLabel>
<FloatLabel variant="in">
<Textarea id="over_label" v-model="value2" rows="5" cols="30" style="resize: none" />
<label for="in_label">In Label</label>
</FloatLabel>
<FloatLabel variant="on">
<Textarea id="over_label" v-model="value3" rows="5" cols="30" style="resize: none" />
<label for="on_label">On Label</label>
</FloatLabel>
`,
options: `
<template>
<div class="card flex justify-center">
<div class="card flex flex-wrap justify-center items-end gap-4">
<FloatLabel>
<Textarea v-model="value" rows="5" cols="30" />
<label>Username</label>
<Textarea id="over_label" v-model="value1" rows="5" cols="30" style="resize: none" />
<label for="over_label">Over Label</label>
</FloatLabel>
<FloatLabel variant="in">
<Textarea id="over_label" v-model="value2" rows="5" cols="30" style="resize: none" />
<label for="in_label">In Label</label>
</FloatLabel>
<FloatLabel variant="on">
<Textarea id="over_label" v-model="value3" rows="5" cols="30" style="resize: none" />
<label for="on_label">On Label</label>
</FloatLabel>
</div>
</template>
@ -37,7 +69,9 @@ export default {
export default {
data() {
return {
value: ''
value1: '',
value2: '',
value3: ''
}
}
};
@ -45,10 +79,20 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-center">
<div class="card flex flex-wrap justify-center items-end gap-4">
<FloatLabel>
<Textarea v-model="value" rows="5" cols="30" />
<label>Username</label>
<Textarea id="over_label" v-model="value1" rows="5" cols="30" style="resize: none" />
<label for="over_label">Over Label</label>
</FloatLabel>
<FloatLabel variant="in">
<Textarea id="over_label" v-model="value2" rows="5" cols="30" style="resize: none" />
<label for="in_label">In Label</label>
</FloatLabel>
<FloatLabel variant="on">
<Textarea id="over_label" v-model="value3" rows="5" cols="30" style="resize: none" />
<label for="on_label">On Label</label>
</FloatLabel>
</div>
</template>
@ -56,7 +100,9 @@ export default {
<script setup>
import { ref } from 'vue';
const value = ref('');
const value1 = ref('');
const value2 = ref('');
const value3 = ref('');
<\/script>
`
}

66
apps/showcase/doc/textarea/IftaLabelDoc.vue Normal file
View File

@ -0,0 +1,66 @@
<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">
<IftaLabel>
<Textarea id="description" v-model="value" rows="5" cols="30" style="resize: none" />
<label for="description">Description</label>
</IftaLabel>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
description: null,
code: {
basic: `
<IftaLabel>
<Textarea id="description" v-model="value" rows="5" cols="30" style="resize: none" />
<label for="description">Description</label>
</IftaLabel>
`,
options: `
<template>
<div class="card flex justify-center">
<IftaLabel>
<Textarea id="description" v-model="value" rows="5" cols="30" style="resize: none" />
<label for="description">Description</label>
</IftaLabel>
</div>
</template>
<script setup>
export default {
data() {
return {
value: null
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card flex justify-center">
<IftaLabel>
<Textarea id="description" v-model="value" rows="5" cols="30" style="resize: none" />
<label for="description">Description</label>
</IftaLabel>
</div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(null);
<\/script>
`
}
};
}
};
</script>

6
apps/showcase/pages/textarea/index.vue
View File

@ -17,6 +17,7 @@ import BasicDoc from '@/doc/textarea/BasicDoc.vue';
import DisabledDoc from '@/doc/textarea/DisabledDoc.vue';
import FilledDoc from '@/doc/textarea/FilledDoc.vue';
import FloatLabelDoc from '@/doc/textarea/FloatLabelDoc.vue';
import IftaLabelDoc from '@/doc/textarea/IftaLabelDoc.vue';
import ImportDoc from '@/doc/textarea/ImportDoc.vue';
import InvalidDoc from '@/doc/textarea/InvalidDoc.vue';
import PTComponent from '@/doc/textarea/pt/index.vue';
@ -46,6 +47,11 @@ export default {
label: 'Float Label',
component: FloatLabelDoc
},
{
id: 'iftalabel',
label: 'Ifta Label',
component: IftaLabelDoc
},
{
id: 'filled',
label: 'Filled',

14
packages/primevue/src/floatlabel/style/FloatLabelStyle.js
View File

@ -10,7 +10,7 @@ const theme = ({ dt }) => `
position: absolute;
pointer-events: none;
top: 50%;
margin-top: -.5rem;
transform: translateY(-50%);
transition-property: all;
transition-timing-function: ease;
line-height: 1;
@ -20,8 +20,9 @@ const theme = ({ dt }) => `
transition-duration: ${dt('floatlabel.transition.duration')};
}
.p-floatlabel:has(textarea) label {
top: 1rem;
.p-floatlabel:has(.p-textarea) label {
top: ${dt('floatlabel.position.y')};
transform: translateY(0);
}
.p-floatlabel:has(.p-invalid) label {
@ -36,7 +37,7 @@ const theme = ({ dt }) => `
.p-floatlabel:has(.p-inputwrapper-focus) label,
.p-floatlabel:has(.p-inputwrapper-filled) label {
top: ${dt('floatlabel.over.focus.top')};
margin-top: 0;
transform: translateY(0);
font-size: ${dt('floatlabel.focus.font.size')};
font-weight: ${dt('floatlabel.label.focus.font.weight')};
}
@ -47,7 +48,7 @@ const theme = ({ dt }) => `
color: ${dt('floatlabel.active.color')};
}
.p-floatlabel:has(input:focus) label ,
.p-floatlabel:has(input:focus) label,
.p-floatlabel:has(input:-webkit-autofill) label,
.p-floatlabel:has(textarea:focus) label ,
.p-floatlabel:has(.p-inputwrapper-focus) label {
@ -70,7 +71,8 @@ const theme = ({ dt }) => `
transition-timing-function: ease;
}
.p-floatlabel-in .p-inputtext {
.p-floatlabel-in .p-inputtext,
.p-floatlabel-in .p-textarea {
padding-top: ${dt('floatlabel.in.input.padding.top')};
}

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

@ -20,14 +20,11 @@ const theme = ({ dt }) => `
transition-duration: ${dt('iftalabel.transition.duration')};
}
.p-iftalabel .p-inputtext {
.p-iftalabel .p-inputtext,
.p-iftalabel .p-textarea {
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')};
}

1
packages/themes/src/presets/aura/floatlabel/index.js
View File

@ -6,6 +6,7 @@ export default {
invalidColor: '{form.field.float.label.invalid.color}',
transitionDuration: '0.2s',
positionX: '{form.field.padding.x}',
positionY: '{form.field.padding.y}',
fontWeight: '500',
focus: {
fontSize: '0.75rem',

3
packages/themes/src/presets/lara/floatlabel/index.js
View File

@ -6,6 +6,7 @@ export default {
invalidColor: '{form.field.float.label.invalid.color}',
transitionDuration: '0.2s',
positionX: '{form.field.padding.x}',
positionY: '{form.field.padding.y}',
fontWeight: '500',
focus: {
fontSize: '0.875rem',
@ -14,7 +15,7 @@ export default {
},
over: {
focus: {
top: '-1.25rem'
top: '-1.375rem'
}
},
in: {

3
packages/themes/src/presets/nora/floatlabel/index.js
View File

@ -6,9 +6,10 @@ export default {
invalidColor: '{form.field.float.label.invalid.color}',
transitionDuration: '0.2s',
positionX: '{form.field.padding.x}',
positionY: '{form.field.padding.y}',
fontWeight: '500',
focus: {
fontSize: '0.875rem',
fontSize: '0.75rem',
fontWeight: '400'
}
},