Support for iconfield and labels
Cagatay Civici
parent
d4c21053ec
commit
3ed43ac4d8
|
|
@ -0,0 +1,148 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>FloatLabel visually integrates a label with its form element. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<div class="card flex flex-wrap justify-center items-end gap-4">
|
||||||
|
<FloatLabel>
|
||||||
|
<IconField>
|
||||||
|
<InputIcon class="pi pi-search" />
|
||||||
|
<InputText id="over_label" v-model="value1" autocomplete="off" />
|
||||||
|
</IconField>
|
||||||
|
<label for="over_label">Over Label</label>
|
||||||
|
</FloatLabel>
|
||||||
|
|
||||||
|
<FloatLabel variant="in">
|
||||||
|
<IconField>
|
||||||
|
<InputIcon class="pi pi-search" />
|
||||||
|
<InputText id="in_label" v-model="value2" autocomplete="off" />
|
||||||
|
</IconField>
|
||||||
|
<label for="in_label">In Label</label>
|
||||||
|
</FloatLabel>
|
||||||
|
|
||||||
|
<FloatLabel variant="on">
|
||||||
|
<IconField>
|
||||||
|
<InputIcon class="pi pi-search" />
|
||||||
|
<InputText id="on_label" v-model="value3" autocomplete="off" />
|
||||||
|
</IconField>
|
||||||
|
<label for="on_label">On Label</label>
|
||||||
|
</FloatLabel>
|
||||||
|
</div>
|
||||||
|
<DocSectionCode :code="code" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value1: null,
|
||||||
|
value2: null,
|
||||||
|
value3: null,
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
<FloatLabel>
|
||||||
|
<IconField>
|
||||||
|
<InputIcon class="pi pi-search" />
|
||||||
|
<InputText id="over_label" v-model="value1" autocomplete="off" />
|
||||||
|
</IconField>
|
||||||
|
<label for="over_label">Over Label</label>
|
||||||
|
</FloatLabel>
|
||||||
|
|
||||||
|
<FloatLabel variant="in">
|
||||||
|
<IconField>
|
||||||
|
<InputIcon class="pi pi-search" />
|
||||||
|
<InputText id="in_label" v-model="value2" autocomplete="off" />
|
||||||
|
</IconField>
|
||||||
|
<label for="in_label">In Label</label>
|
||||||
|
</FloatLabel>
|
||||||
|
|
||||||
|
<FloatLabel variant="on">
|
||||||
|
<IconField>
|
||||||
|
<InputIcon class="pi pi-search" />
|
||||||
|
<InputText id="on_label" v-model="value3" autocomplete="off" />
|
||||||
|
</IconField>
|
||||||
|
<label for="on_label">On Label</label>
|
||||||
|
</FloatLabel>
|
||||||
|
`,
|
||||||
|
options: `
|
||||||
|
<template>
|
||||||
|
<div class="card flex flex-wrap justify-center items-end gap-4">
|
||||||
|
<FloatLabel>
|
||||||
|
<IconField>
|
||||||
|
<InputIcon class="pi pi-search" />
|
||||||
|
<InputText id="over_label" v-model="value1" autocomplete="off" />
|
||||||
|
</IconField>
|
||||||
|
<label for="over_label">Over Label</label>
|
||||||
|
</FloatLabel>
|
||||||
|
|
||||||
|
<FloatLabel variant="in">
|
||||||
|
<IconField>
|
||||||
|
<InputIcon class="pi pi-search" />
|
||||||
|
<InputText id="in_label" v-model="value2" autocomplete="off" />
|
||||||
|
</IconField>
|
||||||
|
<label for="in_label">In Label</label>
|
||||||
|
</FloatLabel>
|
||||||
|
|
||||||
|
<FloatLabel variant="on">
|
||||||
|
<IconField>
|
||||||
|
<InputIcon class="pi pi-search" />
|
||||||
|
<InputText id="on_label" v-model="value3" autocomplete="off" />
|
||||||
|
</IconField>
|
||||||
|
<label for="on_label">On Label</label>
|
||||||
|
</FloatLabel>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value1: null,
|
||||||
|
value2: null,
|
||||||
|
value3: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
<\/script>
|
||||||
|
`,
|
||||||
|
composition: `
|
||||||
|
<template>
|
||||||
|
<div class="card flex flex-wrap justify-center items-end gap-4">
|
||||||
|
<FloatLabel>
|
||||||
|
<IconField>
|
||||||
|
<InputIcon class="pi pi-search" />
|
||||||
|
<InputText id="over_label" v-model="value1" autocomplete="off" />
|
||||||
|
</IconField>
|
||||||
|
<label for="over_label">Over Label</label>
|
||||||
|
</FloatLabel>
|
||||||
|
|
||||||
|
<FloatLabel variant="in">
|
||||||
|
<IconField>
|
||||||
|
<InputIcon class="pi pi-search" />
|
||||||
|
<InputText id="in_label" v-model="value2" autocomplete="off" />
|
||||||
|
</IconField>
|
||||||
|
<label for="in_label">In Label</label>
|
||||||
|
</FloatLabel>
|
||||||
|
|
||||||
|
<FloatLabel variant="on">
|
||||||
|
<IconField>
|
||||||
|
<InputIcon class="pi pi-search" />
|
||||||
|
<InputText id="on_label" v-model="value3" autocomplete="off" />
|
||||||
|
</IconField>
|
||||||
|
<label for="on_label">On Label</label>
|
||||||
|
</FloatLabel>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const value1 = ref(null);
|
||||||
|
const value2 = ref(null);
|
||||||
|
const value3 = ref(null);
|
||||||
|
<\/script>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
<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>
|
||||||
|
<IconField>
|
||||||
|
<InputIcon class="pi pi-user" />
|
||||||
|
<InputText id="username" v-model="value" autocomplete="off" />
|
||||||
|
</IconField>
|
||||||
|
<label for="username">Username</label>
|
||||||
|
</IftaLabel>
|
||||||
|
</div>
|
||||||
|
<DocSectionCode :code="code" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: null,
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
<IftaLabel>
|
||||||
|
<IconField>
|
||||||
|
<InputIcon class="pi pi-user" />
|
||||||
|
<InputText id="username" v-model="value" />
|
||||||
|
</IconField>
|
||||||
|
<label for="username">Username</label>
|
||||||
|
</IftaLabel>
|
||||||
|
`,
|
||||||
|
options: `
|
||||||
|
<template>
|
||||||
|
<div class="card flex justify-center">
|
||||||
|
<IftaLabel>
|
||||||
|
<IconField>
|
||||||
|
<InputIcon class="pi pi-user" />
|
||||||
|
<InputText id="username" v-model="value" />
|
||||||
|
</IconField>
|
||||||
|
<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>
|
||||||
|
<IconField>
|
||||||
|
<InputIcon class="pi pi-user" />
|
||||||
|
<InputText id="username" v-model="value" />
|
||||||
|
</IconField>
|
||||||
|
<label for="username">Username</label>
|
||||||
|
</IftaLabel>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const value = ref(null);
|
||||||
|
<\/script>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -5,6 +5,8 @@
|
||||||
<script>
|
<script>
|
||||||
import AccessibilityDoc from '@/doc/iconfield/AccessibilityDoc.vue';
|
import AccessibilityDoc from '@/doc/iconfield/AccessibilityDoc.vue';
|
||||||
import BasicDoc from '@/doc/iconfield/BasicDoc.vue';
|
import BasicDoc from '@/doc/iconfield/BasicDoc.vue';
|
||||||
|
import FloatLabelDoc from '@/doc/iconfield/FloatLabelDoc.vue';
|
||||||
|
import IftaLabelDoc from '@/doc/iconfield/IftaLabelDoc.vue';
|
||||||
import ImportDoc from '@/doc/iconfield/ImportDoc.vue';
|
import ImportDoc from '@/doc/iconfield/ImportDoc.vue';
|
||||||
import TemplateDoc from '@/doc/iconfield/TemplateDoc.vue';
|
import TemplateDoc from '@/doc/iconfield/TemplateDoc.vue';
|
||||||
import PTComponent from '@/doc/iconfield/pt/index.vue';
|
import PTComponent from '@/doc/iconfield/pt/index.vue';
|
||||||
|
|
@ -29,6 +31,16 @@ export default {
|
||||||
label: 'Template',
|
label: 'Template',
|
||||||
component: TemplateDoc
|
component: TemplateDoc
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 'floatlabel',
|
||||||
|
label: 'Float Label',
|
||||||
|
component: FloatLabelDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'iftalabel',
|
||||||
|
label: 'Ifta Label',
|
||||||
|
component: IftaLabelDoc
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: 'accessibility',
|
id: 'accessibility',
|
||||||
label: 'Accessibility',
|
label: 'Accessibility',
|
||||||
|
|
|
||||||
|
|
@ -25,8 +25,8 @@ const theme = ({ dt }) => `
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-floatlabel:has(.p-inputnumber-horizontal) label {
|
.p-floatlabel:has(.p-inputicon:first-child) label {
|
||||||
margin-inline-start: ${dt('inputnumber.button.width')};
|
left: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-floatlabel:has(.p-invalid) label {
|
.p-floatlabel:has(.p-invalid) label {
|
||||||
|
|
|
||||||
|
|
@ -41,6 +41,12 @@ const theme = ({ dt }) => `
|
||||||
color: ${dt('iftalabel.focus.color')};
|
color: ${dt('iftalabel.focus.color')};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.p-iftalabel .p-inputicon {
|
||||||
|
top: ${dt('iftalabel.input.padding.top')};
|
||||||
|
transform: translateY(25%);
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/*.p-iftalabel .p-placeholder,
|
/*.p-iftalabel .p-placeholder,
|
||||||
.p-iftalabel input::placeholder,
|
.p-iftalabel input::placeholder,
|
||||||
.p-iftalabel .p-inputtext::placeholder {
|
.p-iftalabel .p-inputtext::placeholder {
|
||||||
|
|
|
||||||
|
|
@ -89,6 +89,10 @@ const theme = ({ dt }) => `
|
||||||
border-right: 0 none;
|
border-right: 0 none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.p-floatlabel:has(.p-inputnumber-horizontal) label {
|
||||||
|
margin-inline-start: ${dt('inputnumber.button.width')};
|
||||||
|
}
|
||||||
|
|
||||||
.p-inputnumber-vertical {
|
.p-inputnumber-vertical {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue