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

Float and Ifta label demos for InputGroup

pull/6454/head
Cagatay Civici 2024-09-20 20:59:42 +03:00
parent 63cfc0c44c
commit 52da6269bc
4 changed files with 268 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
apps/showcase/doc/inputgroup/FloatLabelDoc.vue Normal file
View File

@ -0,0 +1,160 @@
<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-col md:items-end md:flex-row gap-4">
<InputGroup>
<InputGroupAddon>
<i class="pi pi-user"></i>
</InputGroupAddon>
<FloatLabel>
<InputText id="over_label" v-model="value1" />
<label for="over_label">Over Label</label>
</FloatLabel>
</InputGroup>
<InputGroup>
<InputGroupAddon>$</InputGroupAddon>
<FloatLabel variant="in">
<InputText id="in_label" v-model="value2" />
<label for="in_label">In Label</label>
</FloatLabel>
<InputGroupAddon>.00</InputGroupAddon>
</InputGroup>
<InputGroup>
<InputGroupAddon>www</InputGroupAddon>
<FloatLabel variant="on">
<InputText id="on_label" v-model="value3" />
<label for="on_label">On Label</label>
</FloatLabel>
</InputGroup>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value1: null,
value2: null,
value3: null,
code: {
basic: `
<InputGroup>
<InputGroupAddon>
<i class="pi pi-user"></i>
</InputGroupAddon>
<FloatLabel>
<InputText id="over_label" v-model="value1" />
<label for="over_label">Over Label</label>
</FloatLabel>
</InputGroup>
<InputGroup>
<InputGroupAddon>$</InputGroupAddon>
<FloatLabel variant="in">
<InputText id="in_label" v-model="value2" />
<label for="in_label">In Label</label>
</FloatLabel>
<InputGroupAddon>.00</InputGroupAddon>
</InputGroup>
<InputGroup>
<InputGroupAddon>www</InputGroupAddon>
<FloatLabel variant="on">
<InputText id="on_label" v-model="value3" />
<label for="on_label">On Label</label>
</FloatLabel>
</InputGroup>
`,
options: `
<template>
<div class="card flex flex-col md:items-end md:flex-row gap-4">
<InputGroup>
<InputGroupAddon>
<i class="pi pi-user"></i>
</InputGroupAddon>
<FloatLabel>
<InputText id="over_label" v-model="value1" />
<label for="over_label">Over Label</label>
</FloatLabel>
</InputGroup>
<InputGroup>
<InputGroupAddon>$</InputGroupAddon>
<FloatLabel variant="in">
<InputText id="in_label" v-model="value2" />
<label for="in_label">In Label</label>
</FloatLabel>
<InputGroupAddon>.00</InputGroupAddon>
</InputGroup>
<InputGroup>
<InputGroupAddon>www</InputGroupAddon>
<FloatLabel variant="on">
<InputText id="on_label" v-model="value3" />
<label for="on_label">On Label</label>
</FloatLabel>
</InputGroup>
</div>
</template>
<script setup>
export default {
data() {
return {
value1: null,
value2: null,
value3: null
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card flex flex-col md:items-end md:flex-row gap-4">
<InputGroup>
<InputGroupAddon>
<i class="pi pi-user"></i>
</InputGroupAddon>
<FloatLabel>
<InputText id="over_label" v-model="value1" />
<label for="over_label">Over Label</label>
</FloatLabel>
</InputGroup>
<InputGroup>
<InputGroupAddon>$</InputGroupAddon>
<FloatLabel variant="in">
<InputText id="in_label" v-model="value2" />
<label for="in_label">In Label</label>
</FloatLabel>
<InputGroupAddon>.00</InputGroupAddon>
</InputGroup>
<InputGroup>
<InputGroupAddon>www</InputGroupAddon>
<FloatLabel variant="on">
<InputText id="on_label" v-model="value3" />
<label for="on_label">On Label</label>
</FloatLabel>
</InputGroup>
</div>
</template>
<script setup>
import { ref } from 'vue';
const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
<\/script>
`
}
};
}
};
</script>

82
apps/showcase/doc/inputgroup/IftaLabelDoc.vue Normal file
View File

@ -0,0 +1,82 @@
<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">
<InputGroup class="md:w-80">
<InputGroupAddon>USD</InputGroupAddon>
<IftaLabel>
<InputText id="price" v-model="value" />
<label for="price">Price</label>
</IftaLabel>
<InputGroupAddon>.00</InputGroupAddon>
</InputGroup>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value: null,
code: {
basic: `
<InputGroup>
<InputGroupAddon>USD</InputGroupAddon>
<IftaLabel>
<InputText id="price" v-model="value" />
<label for="price">Price</label>
</IftaLabel>
<InputGroupAddon>.00</InputGroupAddon>
</InputGroup>
`,
options: `
<template>
<div class="card flex justify-center">
<InputGroup class="md:w-80">
<InputGroupAddon>USD</InputGroupAddon>
<IftaLabel>
<InputText id="price" v-model="value" />
<label for="price">Price</label>
</IftaLabel>
<InputGroupAddon>.00</InputGroupAddon>
</InputGroup>
</div>
</template>
<script>
export default {
data() {
return {
value: null
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card flex justify-center">
<InputGroup class="md:w-80">
<InputGroupAddon>USD</InputGroupAddon>
<IftaLabel>
<InputText id="price" v-model="value" />
<label for="price">Price</label>
</IftaLabel>
<InputGroupAddon>.00</InputGroupAddon>
</InputGroup>
</div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(null);
<\/script>
`
}
};
}
};
</script>

12
apps/showcase/pages/inputgroup/index.vue
View File

@ -15,6 +15,8 @@ import AccessibilityDoc from '@/doc/inputgroup/AccessibilityDoc.vue';
import BasicDoc from '@/doc/inputgroup/BasicDoc.vue'; import BasicDoc from '@/doc/inputgroup/BasicDoc.vue';
import ButtonDoc from '@/doc/inputgroup/ButtonDoc.vue'; import ButtonDoc from '@/doc/inputgroup/ButtonDoc.vue';
import CheckboxDoc from '@/doc/inputgroup/CheckboxDoc.vue'; import CheckboxDoc from '@/doc/inputgroup/CheckboxDoc.vue';
import FloatLabelDoc from '@/doc/inputgroup/FloatLabelDoc.vue';
import IftaLabelDoc from '@/doc/inputgroup/IftaLabelDoc.vue';
import ImportDoc from '@/doc/inputgroup/ImportDoc.vue'; import ImportDoc from '@/doc/inputgroup/ImportDoc.vue';
import MultipleDoc from '@/doc/inputgroup/MultipleDoc.vue'; import MultipleDoc from '@/doc/inputgroup/MultipleDoc.vue';
import PTComponent from '@/doc/inputgroup/pt/index.vue'; import PTComponent from '@/doc/inputgroup/pt/index.vue';
@ -49,6 +51,16 @@ export default {
label: 'Checkbox & Radio', label: 'Checkbox & Radio',
component: CheckboxDoc component: CheckboxDoc
}, },
{
id: 'floatlabel',
label: 'Float Label',
component: FloatLabelDoc
},
{
id: 'iftalabel',
label: 'Ifta Label',
component: IftaLabelDoc
},
{ {
id: 'accessibility', id: 'accessibility',
label: 'Accessibility', label: 'Accessibility',

21
packages/primevue/src/inputgroup/style/InputGroupStyle.js
View File

@ -21,7 +21,8 @@ const theme = ({ dt }) => `
min-width: 2.5rem; min-width: 2.5rem;
} }
.p-inputgroup .p-floatlabel { .p-inputgroup .p-floatlabel,
.p-inputgroup .p-iftalabel {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
width: 100%; width: 100%;
@ -41,26 +42,30 @@ const theme = ({ dt }) => `
.p-inputgroup > .p-component, .p-inputgroup > .p-component,
.p-inputgroup > .p-inputwrapper > .p-inputtext, .p-inputgroup > .p-inputwrapper > .p-inputtext,
.p-inputgroup > .p-floatlabel > .p-component { .p-inputgroup > .p-floatlabel > .p-component,
.p-inputgroup > .p-iftalabel > .p-component {
border-radius: 0; border-radius: 0;
margin: 0; margin: 0;
} }
.p-inputgroup > .p-component + .p-inputgroupaddon, .p-inputgroup > .p-component + .p-inputgroupaddon,
.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroupaddon, .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroupaddon,
.p-inputgroup > .p-floatlabel > .p-component + .p-inputgroupaddon { .p-inputgroup > .p-floatlabel > .p-component + .p-inputgroupaddon,
.p-inputgroup > .p-iftalabel > .p-component + .p-inputgroupaddon {
border-left: 0 none; border-left: 0 none;
} }
.p-inputgroup > .p-component:focus, .p-inputgroup > .p-component:focus,
.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, .p-inputgroup > .p-inputwrapper > .p-inputtext:focus,
.p-inputgroup > .p-floatlabel > .p-component:focus { .p-inputgroup > .p-floatlabel > .p-component:focus,
.p-inputgroup > .p-iftalabel > .p-component:focus {
z-index: 1; z-index: 1;
} }
.p-inputgroup > .p-component:focus ~ label, .p-inputgroup > .p-component:focus ~ label,
.p-inputgroup > .p-inputwrapper > .p-inputtext:focus~label, .p-inputgroup > .p-inputwrapper > .p-inputtext:focus~label,
.p-inputgroup > .p-floatlabel > .p-component:focus~label { .p-inputgroup > .p-floatlabel > .p-component:focus~label,
.p-inputgroup > .p-iftalabel > .p-component:focus~label {
z-index: 1; z-index: 1;
} }
@ -73,7 +78,8 @@ const theme = ({ dt }) => `
border-bottom-left-radius: ${dt('inputgroup.addon.border.radius')}; border-bottom-left-radius: ${dt('inputgroup.addon.border.radius')};
} }
.p-inputgroup .p-floatlabel:first-child input { .p-inputgroup .p-floatlabel:first-child input,
.p-inputgroup .p-iftalabel:first-child input {
border-top-left-radius: ${dt('inputgroup.addon.border.radius')}; border-top-left-radius: ${dt('inputgroup.addon.border.radius')};
border-bottom-left-radius: ${dt('inputgroup.addon.border.radius')}; border-bottom-left-radius: ${dt('inputgroup.addon.border.radius')};
} }
@ -87,7 +93,8 @@ const theme = ({ dt }) => `
border-bottom-right-radius: ${dt('inputgroup.addon.border.radius')}; border-bottom-right-radius: ${dt('inputgroup.addon.border.radius')};
} }
.p-inputgroup .p-floatlabel:last-child input { .p-inputgroup .p-floatlabel:last-child input,
.p-inputgroup .p-iftalabel:last-child input {
border-top-right-radius: ${dt('inputgroup.addon.border.radius')}; border-top-right-radius: ${dt('inputgroup.addon.border.radius')};
border-bottom-right-radius: ${dt('inputgroup.addon.border.radius')}; border-bottom-right-radius: ${dt('inputgroup.addon.border.radius')};
} }