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

Label support for select components

pull/6447/head
Cagatay Civici 2024-09-20 12:28:05 +03:00
parent f492825569
commit 4293c938ce
12 changed files with 702 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
apps/showcase/doc/cascadeselect/FloatLabelDoc.vue
View File

@ -2,10 +2,20 @@
<DocSectionText v-bind="$attrs"> <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> <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> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex flex-wrap justify-center items-end gap-4">
<FloatLabel> <FloatLabel class="w-full md:w-56">
<CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" /> <CascadeSelect v-model="value1" inputId="over_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
<label for="cs-city">City</label> <label for="over_label">Over Label</label>
</FloatLabel>
<FloatLabel class="w-full md:w-56" variant="in">
<CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
<label for="in_label">In Label</label>
</FloatLabel>
<FloatLabel class="w-full md:w-56" variant="on">
<CascadeSelect v-model="value3" inputId="on_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
<label for="on_label">On Label</label>
</FloatLabel> </FloatLabel>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -15,7 +25,9 @@
export default { export default {
data() { data() {
return { return {
selectedCity: null, value1: null,
value2: null,
value3: null,
countries: [ countries: [
{ {
name: 'Australia', name: 'Australia',
@ -92,19 +104,37 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<FloatLabel> <FloatLabel class="w-full md:w-56">
<CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="value1" inputId="over_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" /> <label for="over_label">Over Label</label>
<label for="cs-city">City</label> </FloatLabel>
<FloatLabel class="w-full md:w-56">
<CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
<label for="in_label">In Label</label>
</FloatLabel>
<FloatLabel class="w-full md:w-56">
<CascadeSelect v-model="value3" inputId="on_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
<label for="on_label">On Label</label>
</FloatLabel> </FloatLabel>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex flex-wrap justify-center items-end gap-4">
<FloatLabel> <FloatLabel class="w-full md:w-56">
<CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="value1" inputId="over_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" /> <label for="over_label">Over Label</label>
<label for="cs-city">City</label> </FloatLabel>
<FloatLabel class="w-full md:w-56">
<CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
<label for="in_label">In Label</label>
</FloatLabel>
<FloatLabel class="w-full md:w-56">
<CascadeSelect v-model="value3" inputId="on_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
<label for="on_label">On Label</label>
</FloatLabel> </FloatLabel>
</div> </div>
</template> </template>
@ -113,7 +143,9 @@ export default {
export default { export default {
data() { data() {
return { return {
selectedCity: null, value1: null,
value2: null,
value3: null,
countries: [ countries: [
{ {
name: 'Australia', name: 'Australia',
@ -195,11 +227,20 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex flex-wrap justify-center items-end gap-4">
<FloatLabel> <FloatLabel class="w-full md:w-56">
<CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="value1" inputId="over_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" /> <label for="over_label">Over Label</label>
<label for="cs-city">City</label> </FloatLabel>
<FloatLabel class="w-full md:w-56">
<CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
<label for="in_label">In Label</label>
</FloatLabel>
<FloatLabel class="w-full md:w-56">
<CascadeSelect v-model="value3" inputId="on_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
<label for="on_label">On Label</label>
</FloatLabel> </FloatLabel>
</div> </div>
</template> </template>
@ -207,7 +248,9 @@ export default {
<script setup> <script setup>
import { ref } from "vue"; import { ref } from "vue";
const selectedCity = ref(); const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
const countries = ref([ const countries = ref([
{ {
name: 'Australia', name: 'Australia',

288
apps/showcase/doc/cascadeselect/IftaLabelDoc.vue Normal file
View File

@ -0,0 +1,288 @@
<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 class="w-full md:w-56">
<CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
<label for="cs_city">City</label>
</IftaLabel>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
selectedCity: null,
countries: [
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{ cname: 'Sydney', code: 'A-SY' },
{ cname: 'Newcastle', code: 'A-NE' },
{ cname: 'Wollongong', code: 'A-WO' }
]
},
{
name: 'Queensland',
cities: [
{ cname: 'Brisbane', code: 'A-BR' },
{ cname: 'Townsville', code: 'A-TO' }
]
}
]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{ cname: 'Montreal', code: 'C-MO' },
{ cname: 'Quebec City', code: 'C-QU' }
]
},
{
name: 'Ontario',
cities: [
{ cname: 'Ottawa', code: 'C-OT' },
{ cname: 'Toronto', code: 'C-TO' }
]
}
]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{ cname: 'Los Angeles', code: 'US-LA' },
{ cname: 'San Diego', code: 'US-SD' },
{ cname: 'San Francisco', code: 'US-SF' }
]
},
{
name: 'Florida',
cities: [
{ cname: 'Jacksonville', code: 'US-JA' },
{ cname: 'Miami', code: 'US-MI' },
{ cname: 'Tampa', code: 'US-TA' },
{ cname: 'Orlando', code: 'US-OR' }
]
},
{
name: 'Texas',
cities: [
{ cname: 'Austin', code: 'US-AU' },
{ cname: 'Dallas', code: 'US-DA' },
{ cname: 'Houston', code: 'US-HO' }
]
}
]
}
],
code: {
basic: `
<IftaLabel class="w-full md:w-56">
<CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
<label for="cs_city">City</label>
</IftaLabel>
`,
options: `
<template>
<div class="card flex justify-center">
<IftaLabel class="w-full md:w-56">
<CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
<label for="cs_city">City</label>
</IftaLabel>
</div>
</template>
<script setup>
export default {
data() {
return {
selectedCity: null,
countries: [
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{ cname: 'Sydney', code: 'A-SY' },
{ cname: 'Newcastle', code: 'A-NE' },
{ cname: 'Wollongong', code: 'A-WO' }
]
},
{
name: 'Queensland',
cities: [
{ cname: 'Brisbane', code: 'A-BR' },
{ cname: 'Townsville', code: 'A-TO' }
]
}
]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{ cname: 'Montreal', code: 'C-MO' },
{ cname: 'Quebec City', code: 'C-QU' }
]
},
{
name: 'Ontario',
cities: [
{ cname: 'Ottawa', code: 'C-OT' },
{ cname: 'Toronto', code: 'C-TO' }
]
}
]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{ cname: 'Los Angeles', code: 'US-LA' },
{ cname: 'San Diego', code: 'US-SD' },
{ cname: 'San Francisco', code: 'US-SF' }
]
},
{
name: 'Florida',
cities: [
{ cname: 'Jacksonville', code: 'US-JA' },
{ cname: 'Miami', code: 'US-MI' },
{ cname: 'Tampa', code: 'US-TA' },
{ cname: 'Orlando', code: 'US-OR' }
]
},
{
name: 'Texas',
cities: [
{ cname: 'Austin', code: 'US-AU' },
{ cname: 'Dallas', code: 'US-DA' },
{ cname: 'Houston', code: 'US-HO' }
]
}
]
}
]
};
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex justify-center">
<IftaLabel class="w-full md:w-56">
<CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
<label for="cs_city">City</label>
</IftaLabel>
</div>
</template>
<script setup>
import { ref } from "vue";
const selectedCity = ref();
const countries = ref([
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{ cname: 'Sydney', code: 'A-SY' },
{ cname: 'Newcastle', code: 'A-NE' },
{ cname: 'Wollongong', code: 'A-WO' }
]
},
{
name: 'Queensland',
cities: [
{ cname: 'Brisbane', code: 'A-BR' },
{ cname: 'Townsville', code: 'A-TO' }
]
}
]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{ cname: 'Montreal', code: 'C-MO' },
{ cname: 'Quebec City', code: 'C-QU' }
]
},
{
name: 'Ontario',
cities: [
{ cname: 'Ottawa', code: 'C-OT' },
{ cname: 'Toronto', code: 'C-TO' }
]
}
]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{ cname: 'Los Angeles', code: 'US-LA' },
{ cname: 'San Diego', code: 'US-SD' },
{ cname: 'San Francisco', code: 'US-SF' }
]
},
{
name: 'Florida',
cities: [
{ cname: 'Jacksonville', code: 'US-JA' },
{ cname: 'Miami', code: 'US-MI' },
{ cname: 'Tampa', code: 'US-TA' },
{ cname: 'Orlando', code: 'US-OR' }
]
},
{
name: 'Texas',
cities: [
{ cname: 'Austin', code: 'US-AU' },
{ cname: 'Dallas', code: 'US-DA' },
{ cname: 'Houston', code: 'US-HO' }
]
}
]
}
]);
<\/script>
`
}
};
}
};
</script>

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

@ -2,10 +2,20 @@
<DocSectionText v-bind="$attrs"> <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> <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> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex flex-wrap justify-center items-end gap-4">
<FloatLabel class="w-full md:w-80"> <FloatLabel class="w-full md:w-80">
<MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" /> <MultiSelect id="over_label" v-model="value1" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
<label for="ms-cities">MultiSelect</label> <label for="over_label">Over Label</label>
</FloatLabel>
<FloatLabel class="w-full md:w-80" variant="in">
<MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
<label for="in_label">In Label</label>
</FloatLabel>
<FloatLabel class="w-full md:w-80" variant="on">
<MultiSelect id="on_label" v-model="value3" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
<label for="on_label">On Label</label>
</FloatLabel> </FloatLabel>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -15,7 +25,9 @@
export default { export default {
data() { data() {
return { return {
selectedCities: null, value1: null,
value2: null,
value3: null,
cities: [ cities: [
{ name: 'New York', code: 'NY' }, { name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' }, { name: 'Rome', code: 'RM' },
@ -26,16 +38,36 @@ export default {
code: { code: {
basic: ` basic: `
<FloatLabel class="w-full md:w-80"> <FloatLabel class="w-full md:w-80">
<MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" /> <MultiSelect id="over_label" v-model="value1" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
<label for="ms-cities">MultiSelect</label> <label for="over_label">Over Label</label>
</FloatLabel>
<FloatLabel class="w-full md:w-80" variant="in">
<MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
<label for="in_label">In Label</label>
</FloatLabel>
<FloatLabel class="w-full md:w-80" variant="on">
<MultiSelect id="on_label" v-model="value3" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
<label for="on_label">On Label</label>
</FloatLabel> </FloatLabel>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex flex-wrap justify-center items-end gap-4">
<FloatLabel class="w-full md:w-80"> <FloatLabel class="w-full md:w-80">
<MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" /> <MultiSelect id="over_label" v-model="value1" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
<label for="ms-cities">MultiSelect</label> <label for="over_label">Over Label</label>
</FloatLabel>
<FloatLabel class="w-full md:w-80" variant="in">
<MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
<label for="in_label">In Label</label>
</FloatLabel>
<FloatLabel class="w-full md:w-80" variant="on">
<MultiSelect id="on_label" v-model="value3" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
<label for="on_label">On Label</label>
</FloatLabel> </FloatLabel>
</div> </div>
</template> </template>
@ -44,7 +76,9 @@ export default {
export default { export default {
data() { data() {
return { return {
selectedCities: null, value1: null,
value2: null,
value3: null,
cities: [ cities: [
{ name: 'New York', code: 'NY' }, { name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' }, { name: 'Rome', code: 'RM' },
@ -59,10 +93,20 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex flex-wrap justify-center items-end gap-4">
<FloatLabel class="w-full md:w-80"> <FloatLabel class="w-full md:w-80">
<MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" /> <MultiSelect id="over_label" v-model="value1" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
<label for="ms-cities">MultiSelect</label> <label for="over_label">Over Label</label>
</FloatLabel>
<FloatLabel class="w-full md:w-80" variant="in">
<MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
<label for="in_label">In Label</label>
</FloatLabel>
<FloatLabel class="w-full md:w-80" variant="on">
<MultiSelect id="on_label" v-model="value3" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
<label for="on_label">On Label</label>
</FloatLabel> </FloatLabel>
</div> </div>
</template> </template>
@ -70,7 +114,9 @@ export default {
<script setup> <script setup>
import { ref } from "vue"; import { ref } from "vue";
const selectedCities = ref(); const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
const cities = ref([ const cities = ref([
{ name: 'New York', code: 'NY' }, { name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' }, { name: 'Rome', code: 'RM' },

87
apps/showcase/doc/multiselect/IftaLabelDoc.vue Normal file
View File

@ -0,0 +1,87 @@
<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 class="w-full md:w-80">
<MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
<label for="ms_cities">MultiSelect</label>
</IftaLabel>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
selectedCities: null,
cities: [
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
],
code: {
basic: `
<IftaLabel>
<MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
<label for="ms_cities">MultiSelect</label>
</IftaLabel>
`,
options: `
<template>
<div class="card flex justify-center">
<IftaLabel class="w-full md:w-80">
<MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
<label for="ms_cities">MultiSelect</label>
</IftaLabel>
</div>
</template>
<script setup>
export default {
data() {
return {
selectedCities: null,
cities: [
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]
};
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex justify-center">
<IftaLabel class="w-full md:w-80">
<MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
<label for="ms_cities">MultiSelect</label>
</IftaLabel>
</div>
</template>
<script setup>
import { ref } from "vue";
const selectedCities = ref(null);
const cities = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
<\/script>
`
}
};
}
};
</script>

4
apps/showcase/doc/select/IftaLabelDoc.vue
View File

@ -33,7 +33,7 @@ export default {
options: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<IftaLabel> <IftaLabel class="w-full md:w-56">
<Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" /> <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
<label for="dd-city">City</label> <label for="dd-city">City</label>
</IftaLabel> </IftaLabel>
@ -60,7 +60,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<IftaLabel> <IftaLabel class="w-full md:w-56">
<Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" /> <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
<label for="dd-city">City</label> <label for="dd-city">City</label>
</IftaLabel> </IftaLabel>

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

@ -2,10 +2,20 @@
<DocSectionText v-bind="$attrs"> <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> <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> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex flex-wrap justify-center items-end gap-4">
<FloatLabel class="w-full md:w-80"> <FloatLabel class="w-full md:w-80">
<TreeSelect v-model="selectedValue" :options="nodes" class="w-full" /> <TreeSelect v-model="value1" inputId="over_label" :options="nodes" class="w-full" />
<label>Tree Select</label> <label for="over_label">Over Label</label>
</FloatLabel>
<FloatLabel class="w-full md:w-80" variant="in">
<TreeSelect v-model="value2" inputId="in_label" :options="nodes" class="w-full" />
<label for="in_label">In Label</label>
</FloatLabel>
<FloatLabel class="w-full md:w-80" variant="on">
<TreeSelect v-model="value3" inputId="on_label" :options="nodes" class="w-full" />
<label for="on_label">On Label</label>
</FloatLabel> </FloatLabel>
</div> </div>
<DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" /> <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
@ -18,20 +28,42 @@ export default {
data() { data() {
return { return {
nodes: null, nodes: null,
selectedValue: null, value1: null,
value2: null,
value3: null,
code: { code: {
basic: ` basic: `
<FloatLabel class="w-full md:w-80"> <FloatLabel class="w-full md:w-80">
<TreeSelect v-model="selectedValue" :options="nodes" class="w-full" /> <TreeSelect v-model="value1" inputId="over_label" :options="nodes" class="w-full" />
<label>Tree Select</label> <label for="over_label">Over Label</label>
</FloatLabel>
<FloatLabel class="w-full md:w-80" variant="in">
<TreeSelect v-model="value2" inputId="in_label" :options="nodes" class="w-full" />
<label for="in_label">In Label</label>
</FloatLabel>
<FloatLabel class="w-full md:w-80" variant="on">
<TreeSelect v-model="value3" inputId="on_label" :options="nodes" class="w-full" />
<label for="on_label">On Label</label>
</FloatLabel> </FloatLabel>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex flex-wrap justify-center items-end gap-4">
<FloatLabel class="w-full md:w-80"> <FloatLabel class="w-full md:w-80">
<TreeSelect v-model="selectedValue" :options="nodes" class="w-full" /> <TreeSelect v-model="value1" inputId="over_label" :options="nodes" class="w-full" />
<label>Tree Select</label> <label for="over_label">Over Label</label>
</FloatLabel>
<FloatLabel class="w-full md:w-80" variant="in">
<TreeSelect v-model="value2" inputId="in_label" :options="nodes" class="w-full" />
<label for="in_label">In Label</label>
</FloatLabel>
<FloatLabel class="w-full md:w-80" variant="on">
<TreeSelect v-model="value3" inputId="on_label" :options="nodes" class="w-full" />
<label for="on_label">On Label</label>
</FloatLabel> </FloatLabel>
</div> </div>
</template> </template>
@ -43,7 +75,9 @@ export default {
data() { data() {
return { return {
nodes: null, nodes: null,
selectedValue: null, value1: null,
value2: null,
value3: null
} }
}, },
mounted() { mounted() {
@ -54,10 +88,20 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex flex-wrap justify-center items-end gap-4">
<FloatLabel class="w-full md:w-80"> <FloatLabel class="w-full md:w-80">
<TreeSelect v-model="selectedValue" :options="nodes" class="w-full" /> <TreeSelect v-model="value1" inputId="over_label" :options="nodes" class="w-full" />
<label>Tree Select</label> <label for="over_label">Over Label</label>
</FloatLabel>
<FloatLabel class="w-full md:w-80" variant="in">
<TreeSelect v-model="value2" inputId="in_label" :options="nodes" class="w-full" />
<label for="in_label">In Label</label>
</FloatLabel>
<FloatLabel class="w-full md:w-80" variant="on">
<TreeSelect v-model="value3" inputId="on_label" :options="nodes" class="w-full" />
<label for="on_label">On Label</label>
</FloatLabel> </FloatLabel>
</div> </div>
</template> </template>
@ -67,7 +111,9 @@ import { ref, onMounted } from 'vue';
import { NodeService } from './service/NodeService'; import { NodeService } from './service/NodeService';
const nodes = ref(null); const nodes = ref(null);
const selectedValue = ref(null); const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
onMounted(() => { onMounted(() => {
NodeService.getTreeNodes().then((data) => (nodes.value = data)); NodeService.getTreeNodes().then((data) => (nodes.value = data));

111
apps/showcase/doc/treeselect/IftaLabelDoc.vue Normal file
View File

@ -0,0 +1,111 @@
<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 class="w-full md:w-80">
<TreeSelect v-model="selectedValue" inputId="t_file" :options="nodes" class="w-full" />
<label for="t_file">File</label>
</IftaLabel>
</div>
<DocSectionCode :code="code" />
</template>
<script>
import { NodeService } from '/service/NodeService';
export default {
data() {
return {
nodes: null,
selectedValue: null,
code: {
basic: `
<IftaLabel class="w-full md:w-80">
<TreeSelect v-model="selectedValue" inputId="t_file" :options="nodes" class="w-full" />
<label for="t_file">File</label>
</IftaLabel>
`,
options: `
<template>
<div class="card flex justify-center">
<IftaLabel class="w-full md:w-80">
<TreeSelect v-model="selectedValue" inputId="t_file" :options="nodes" class="w-full" />
<label for="t_file">File</label>
</IftaLabel>
</div>
</template>
<script>
import { NodeService } from './service/NodeService';
export default {
data() {
return {
nodes: null,
selectedValue: null,
}
},
mounted() {
NodeService.getTreeNodes().then((data) => (this.nodes = data));
}
}
<\/script>
`,
composition: `
<template>
<div class="card flex justify-center">
<IftaLabel class="w-full md:w-80">
<TreeSelect v-model="selectedValue" inputId="t_file" :options="nodes" class="w-full" />
<label for="t_file">File</label>
</IftaLabel>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { NodeService } from './service/NodeService';
const nodes = ref(null);
const selectedValue = ref(null);
onMounted(() => {
NodeService.getTreeNodes().then((data) => (nodes.value = data));
});
<\/script>
`,
data: `
{
key: '0',
label: 'Documents',
data: 'Documents Folder',
icon: 'pi pi-fw pi-inbox',
children: [
{
key: '0-0',
label: 'Work',
data: 'Work Folder',
icon: 'pi pi-fw pi-cog',
children: [
{ key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
{ key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
]
},
{
key: '0-1',
label: 'Home',
data: 'Home Folder',
icon: 'pi pi-fw pi-home',
children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
}
]
},
...`
}
};
},
mounted() {
NodeService.getTreeNodes().then((data) => (this.nodes = data));
}
};
</script>

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

@ -16,6 +16,7 @@ import BasicDoc from '@/doc/cascadeselect/BasicDoc.vue';
import DisabledDoc from '@/doc/cascadeselect/DisabledDoc.vue'; import DisabledDoc from '@/doc/cascadeselect/DisabledDoc.vue';
import FilledDoc from '@/doc/cascadeselect/FilledDoc.vue'; import FilledDoc from '@/doc/cascadeselect/FilledDoc.vue';
import FloatLabelDoc from '@/doc/cascadeselect/FloatLabelDoc.vue'; import FloatLabelDoc from '@/doc/cascadeselect/FloatLabelDoc.vue';
import IftaLabelDoc from '@/doc/cascadeselect/IftaLabelDoc.vue';
import ImportDoc from '@/doc/cascadeselect/ImportDoc.vue'; import ImportDoc from '@/doc/cascadeselect/ImportDoc.vue';
import InvalidDoc from '@/doc/cascadeselect/InvalidDoc.vue'; import InvalidDoc from '@/doc/cascadeselect/InvalidDoc.vue';
import LoadingStateDoc from '@/doc/cascadeselect/LoadingStateDoc.vue'; import LoadingStateDoc from '@/doc/cascadeselect/LoadingStateDoc.vue';
@ -52,6 +53,11 @@ export default {
label: 'Float Label', label: 'Float Label',
component: FloatLabelDoc component: FloatLabelDoc
}, },
{
id: 'iftalabel',
label: 'Ifta Label',
component: IftaLabelDoc
},
{ {
id: 'filled', id: 'filled',
label: 'Filled', label: 'Filled',

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

@ -19,6 +19,7 @@ import FilledDoc from '@/doc/multiselect/FilledDoc.vue';
import FilterDoc from '@/doc/multiselect/FilterDoc.vue'; import FilterDoc from '@/doc/multiselect/FilterDoc.vue';
import FloatLabelDoc from '@/doc/multiselect/FloatLabelDoc.vue'; import FloatLabelDoc from '@/doc/multiselect/FloatLabelDoc.vue';
import GroupDoc from '@/doc/multiselect/GroupDoc.vue'; import GroupDoc from '@/doc/multiselect/GroupDoc.vue';
import IftaLabelDoc from '@/doc/multiselect/IftaLabelDoc.vue';
import ImportDoc from '@/doc/multiselect/ImportDoc.vue'; import ImportDoc from '@/doc/multiselect/ImportDoc.vue';
import InvalidDoc from '@/doc/multiselect/InvalidDoc.vue'; import InvalidDoc from '@/doc/multiselect/InvalidDoc.vue';
import LoadingStateDoc from '@/doc/multiselect/LoadingStateDoc.vue'; import LoadingStateDoc from '@/doc/multiselect/LoadingStateDoc.vue';
@ -76,6 +77,11 @@ export default {
label: 'Float Label', label: 'Float Label',
component: FloatLabelDoc component: FloatLabelDoc
}, },
{
id: 'iftalabel',
label: 'Ifta Label',
component: IftaLabelDoc
},
{ {
id: 'filled', id: 'filled',
label: 'Filled', label: 'Filled',

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

@ -17,6 +17,7 @@ import CheckboxDoc from '@/doc/treeselect/CheckboxDoc.vue';
import DisabledDoc from '@/doc/treeselect/DisabledDoc.vue'; import DisabledDoc from '@/doc/treeselect/DisabledDoc.vue';
import FilledDoc from '@/doc/treeselect/FilledDoc.vue'; import FilledDoc from '@/doc/treeselect/FilledDoc.vue';
import FloatLabelDoc from '@/doc/treeselect/FloatLabelDoc.vue'; import FloatLabelDoc from '@/doc/treeselect/FloatLabelDoc.vue';
import IftaLabelDoc from '@/doc/treeselect/IftaLabelDoc.vue';
import ImportDoc from '@/doc/treeselect/ImportDoc.vue'; import ImportDoc from '@/doc/treeselect/ImportDoc.vue';
import InvalidDoc from '@/doc/treeselect/InvalidDoc.vue'; import InvalidDoc from '@/doc/treeselect/InvalidDoc.vue';
import MultipleDoc from '@/doc/treeselect/MultipleDoc.vue'; import MultipleDoc from '@/doc/treeselect/MultipleDoc.vue';
@ -52,6 +53,11 @@ export default {
label: 'Float Label', label: 'Float Label',
component: FloatLabelDoc component: FloatLabelDoc
}, },
{
id: 'iftalabel',
label: 'Ifta Label',
component: IftaLabelDoc
},
{ {
id: 'filled', id: 'filled',
label: 'Filled', label: 'Filled',

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

@ -73,7 +73,10 @@ const theme = ({ dt }) => `
.p-floatlabel-in .p-inputtext, .p-floatlabel-in .p-inputtext,
.p-floatlabel-in .p-textarea, .p-floatlabel-in .p-textarea,
.p-floatlabel-in .p-select-label { .p-floatlabel-in .p-select-label,
.p-floatlabel-in .p-multiselect-label,
.p-floatlabel-in .p-cascadeselect-label,
.p-floatlabel-in .p-treeselect-label {
padding-top: ${dt('floatlabel.in.input.padding.top')}; padding-top: ${dt('floatlabel.in.input.padding.top')};
} }
@ -88,7 +91,10 @@ const theme = ({ dt }) => `
} }
.p-floatlabel-on .p-inputtext, .p-floatlabel-on .p-inputtext,
.p-floatlabel-on .p-select-label { .p-floatlabel-on .p-select-label,
.p-floatlabel-on .p-multiselect-label,
.p-floatlabel-on .p-cascadeselect-label,
.p-floatlabel-on .p-treeselect-label {
padding-top: ${dt('floatlabel.on.input.padding.top')}; padding-top: ${dt('floatlabel.on.input.padding.top')};
padding-bottom: ${dt('floatlabel.on.input.padding.bottom')}; padding-bottom: ${dt('floatlabel.on.input.padding.bottom')};
} }

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

@ -22,7 +22,10 @@ const theme = ({ dt }) => `
.p-iftalabel .p-inputtext, .p-iftalabel .p-inputtext,
.p-iftalabel .p-textarea, .p-iftalabel .p-textarea,
.p-iftalabel .p-select-label { .p-iftalabel .p-select-label,
.p-iftalabel .p-multiselect-label,
.p-iftalabel .p-cascadeselect-label,
.p-iftalabel .p-treeselect-label {
padding-top: ${dt('iftalabel.input.padding.top')}; padding-top: ${dt('iftalabel.input.padding.top')};
} }