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

New components added to demos

pull/5182/head
tugcekucukoglu 2024-01-30 11:04:48 +03:00
parent 8af1ec6eb7
commit 2032fd5216
28 changed files with 373 additions and 272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/landing/ThemeSection.vue
View File

@ -26,10 +26,12 @@
<template #header> <template #header>
<div class="flex flex-column sm:flex-row sm:justify-content-between sm:align-items-center"> <div class="flex flex-column sm:flex-row sm:justify-content-between sm:align-items-center">
<h5 class="m-0">Customers</h5> <h5 class="m-0">Customers</h5>
<span class="p-input-icon-left mt-3 sm:mt-0 w-full sm:w-auto"> <IconField iconPosition="left" class="mt-3 sm:mt-0 w-full sm:w-auto">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global'].value" placeholder="Search" class="w-full" /> <InputText v-model="filters['global'].value" placeholder="Search" class="w-full" />
</span> </IconField>
</div> </div>
</template> </template>
<template #empty> No customers found. </template> <template #empty> No customers found. </template>

16
doc/autocomplete/FloatLabelDoc.vue
View File

@ -3,10 +3,10 @@
<p>A floating label appears on top of the input field when focused.</p> <p>A floating label appears on top of the input field when focused.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <FloatLabel>
<AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" /> <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
<label for="ac">Float Label</label> <label for="ac">Float Label</label>
</span> </FloatLabel>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -19,18 +19,18 @@ export default {
items: [], items: [],
code: { code: {
basic: ` basic: `
<span class="p-float-label"> <FloatLabel>
<AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" /> <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
<label for="ac">Float Label</label> <label for="ac">Float Label</label>
</span> </FloatLabel>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <FloatLabel>
<AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" /> <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
<label for="ac">Float Label</label> <label for="ac">Float Label</label>
</span> </FloatLabel>
</div> </div>
</template> </template>
@ -53,10 +53,10 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <FloatLabel>
<AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" /> <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
<label for="ac">Float Label</label> <label for="ac">Float Label</label>
</span> </FloatLabel>
</div> </div>
</template> </template>

16
doc/calendar/FloatLabelDoc.vue
View File

@ -3,10 +3,10 @@
<p>A floating label appears on top of the input field when focused.</p> <p>A floating label appears on top of the input field when focused.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <FloatLabel>
<Calendar v-model="date" inputId="birth_date" /> <Calendar v-model="date" inputId="birth_date" />
<label for="birth_date">Birth Date</label> <label for="birth_date">Birth Date</label>
</span> </FloatLabel>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -18,18 +18,18 @@ export default {
date: null, date: null,
code: { code: {
basic: ` basic: `
<span class="p-float-label"> <FloatLabel>
<Calendar v-model="date" inputId="birth_date" /> <Calendar v-model="date" inputId="birth_date" />
<label for="birth_date">Birth Date</label> <label for="birth_date">Birth Date</label>
</span> </FloatLabel>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <FloatLabel>
<Calendar v-model="date" inputId="birth_date" /> <Calendar v-model="date" inputId="birth_date" />
<label for="birth_date">Birth Date</label> <label for="birth_date">Birth Date</label>
</span> </FloatLabel>
</div> </div>
</template> </template>
@ -46,10 +46,10 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <FloatLabel>
<Calendar v-model="date" inputId="birth_date" /> <Calendar v-model="date" inputId="birth_date" />
<label for="birth_date">Birth Date</label> <label for="birth_date">Birth Date</label>
</span> </FloatLabel>
</div> </div>
</template> </template>

16
doc/cascadeselect/FloatLabelDoc.vue
View File

@ -3,10 +3,10 @@
<p>A floating label appears on top of the input field when focused.</p> <p>A floating label appears on top of the input field when focused.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <FloatLabel>
<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="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
<label for="cs-city">City</label> <label for="cs-city">City</label>
</span> </FloatLabel>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -92,20 +92,20 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<span class="p-float-label"> <FloatLabel>
<CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
<label for="cs-city">City</label> <label for="cs-city">City</label>
</span> </FloatLabel>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <FloatLabel>
<CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
<label for="cs-city">City</label> <label for="cs-city">City</label>
</span> </FloatLabel>
</div> </div>
</template> </template>
@ -196,11 +196,11 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <FloatLabel>
<CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
<label for="cs-city">City</label> <label for="cs-city">City</label>
</span> </FloatLabel>
</div> </div>
</template> </template>

16
doc/chips/FloatLabelDoc.vue
View File

@ -3,10 +3,10 @@
<p>A floating label appears on top of the input field when focused.</p> <p>A floating label appears on top of the input field when focused.</p>
</DocSectionText> </DocSectionText>
<div class="card p-fluid"> <div class="card p-fluid">
<span class="p-float-label"> <FloatLabel>
<Chips id="chips" v-model="value" /> <Chips id="chips" v-model="value" />
<label for="chips">Chips</label> <label for="chips">Chips</label>
</span> </FloatLabel>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -18,18 +18,18 @@ export default {
value: null, value: null,
code: { code: {
basic: ` basic: `
<span class="p-float-label"> <FloatLabel>
<Chips id="chips" v-model="value" /> <Chips id="chips" v-model="value" />
<label for="chips">Chips</label> <label for="chips">Chips</label>
</span> </FloatLabel>
`, `,
options: ` options: `
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<span class="p-float-label"> <FloatLabel>
<Chips id="chips" v-model="value" /> <Chips id="chips" v-model="value" />
<label for="chips">Chips</label> <label for="chips">Chips</label>
</span> </FloatLabel>
</div> </div>
</template> </template>
@ -46,10 +46,10 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<span class="p-float-label"> <FloatLabel>
<Chips id="chips" v-model="value" /> <Chips id="chips" v-model="value" />
<label for="chips">Chips</label> <label for="chips">Chips</label>
</span> </FloatLabel>
</div> </div>
</template> </template>

24
doc/datatable/StatefulDoc.vue
View File

@ -23,10 +23,12 @@
tableStyle="min-width: 50rem" tableStyle="min-width: 50rem"
> >
<template #header> <template #header>
<span class="p-input-icon-left"> <IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global'].value" placeholder="Global Search" /> <InputText v-model="filters['global'].value" placeholder="Global Search" />
</span> </IconField>
</template> </template>
<Column field="name" header="Name" sortable style="width: 25%"> <Column field="name" header="Name" sortable style="width: 25%">
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
@ -110,10 +112,12 @@ export default {
stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu" stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu"
selectionMode="single" dataKey="id" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']" tableStyle="min-width: 50rem"> selectionMode="single" dataKey="id" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']" tableStyle="min-width: 50rem">
<template #header> <template #header>
<span class="p-input-icon-left"> <IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global'].value" placeholder="Global Search" /> <InputText v-model="filters['global'].value" placeholder="Global Search" />
</span> </IconField>
</template> </template>
<Column field="name" header="Name" sortable style="width: 25%"> <Column field="name" header="Name" sortable style="width: 25%">
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
@ -171,10 +175,12 @@ export default {
stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu" stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu"
selectionMode="single" dataKey="id" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']" tableStyle="min-width: 50rem"> selectionMode="single" dataKey="id" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']" tableStyle="min-width: 50rem">
<template #header> <template #header>
<span class="p-input-icon-left"> <IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global'].value" placeholder="Global Search" /> <InputText v-model="filters['global'].value" placeholder="Global Search" />
</span> </IconField>
</template> </template>
<Column field="name" header="Name" sortable style="width: 25%"> <Column field="name" header="Name" sortable style="width: 25%">
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
@ -297,10 +303,12 @@ export default {
stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu" stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu"
selectionMode="single" dataKey="id" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']" tableStyle="min-width: 50rem"> selectionMode="single" dataKey="id" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']" tableStyle="min-width: 50rem">
<template #header> <template #header>
<span class="p-input-icon-left"> <IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global'].value" placeholder="Global Search" /> <InputText v-model="filters['global'].value" placeholder="Global Search" />
</span> </IconField>
</template> </template>
<Column field="name" header="Name" sortable style="width: 25%"> <Column field="name" header="Name" sortable style="width: 25%">
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">

24
doc/datatable/filter/AdvancedFilterDoc.vue
View File

@ -8,10 +8,12 @@
<template #header> <template #header>
<div class="flex justify-content-between"> <div class="flex justify-content-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" /> <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<span class="p-input-icon-left"> <IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global'].value" placeholder="Keyword Search" /> <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
</span> </IconField>
</div> </div>
</template> </template>
<template #empty> No customers found. </template> <template #empty> No customers found. </template>
@ -147,10 +149,12 @@ export default {
<template #header> <template #header>
<div class="flex justify-content-between"> <div class="flex justify-content-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" /> <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<span class="p-input-icon-left"> <IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global'].value" placeholder="Keyword Search" /> <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
</span> </IconField>
</div> </div>
</template> </template>
<template #empty> No customers found. </template> <template #empty> No customers found. </template>
@ -260,10 +264,12 @@ export default {
<template #header> <template #header>
<div class="flex justify-content-between"> <div class="flex justify-content-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" /> <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<span class="p-input-icon-left"> <IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global'].value" placeholder="Keyword Search" /> <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
</span> </IconField>
</div> </div>
</template> </template>
<template #empty> No customers found. </template> <template #empty> No customers found. </template>
@ -465,10 +471,12 @@ export default {
<template #header> <template #header>
<div class="flex justify-content-between"> <div class="flex justify-content-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" /> <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<span class="p-input-icon-left"> <IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global'].value" placeholder="Keyword Search" /> <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
</span> </IconField>
</div> </div>
</template> </template>
<template #empty> No customers found. </template> <template #empty> No customers found. </template>

24
doc/datatable/filter/BasicFilterDoc.vue
View File

@ -11,10 +11,12 @@
<DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']"> <DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
<template #header> <template #header>
<div class="flex justify-content-end"> <div class="flex justify-content-end">
<span class="p-input-icon-left"> <IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global'].value" placeholder="Keyword Search" /> <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
</span> </IconField>
</div> </div>
</template> </template>
<template #empty> No customers found. </template> <template #empty> No customers found. </template>
@ -118,10 +120,12 @@ export default {
:globalFilterFields="['name', 'country.name', 'representative.name', 'status']"> :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
<template #header> <template #header>
<div class="flex justify-content-end"> <div class="flex justify-content-end">
<span class="p-input-icon-left"> <IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global'].value" placeholder="Keyword Search" /> <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
</span> </IconField>
</div> </div>
</template> </template>
<template #empty> No customers found. </template> <template #empty> No customers found. </template>
@ -192,10 +196,12 @@ export default {
:globalFilterFields="['name', 'country.name', 'representative.name', 'status']"> :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
<template #header> <template #header>
<div class="flex justify-content-end"> <div class="flex justify-content-end">
<span class="p-input-icon-left"> <IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global'].value" placeholder="Keyword Search" /> <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
</span> </IconField>
</div> </div>
</template> </template>
<template #empty> No customers found. </template> <template #empty> No customers found. </template>
@ -346,10 +352,12 @@ export default {
:globalFilterFields="['name', 'country.name', 'representative.name', 'status']"> :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
<template #header> <template #header>
<div class="flex justify-content-end"> <div class="flex justify-content-end">
<span class="p-input-icon-left"> <IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global'].value" placeholder="Keyword Search" /> <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
</span> </IconField>
</div> </div>
</template> </template>
<template #empty> No customers found. </template> <template #empty> No customers found. </template>

24
doc/datatable/samples/CustomersDoc.vue
View File

@ -17,10 +17,12 @@
<template #header> <template #header>
<div class="flex justify-content-between"> <div class="flex justify-content-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" /> <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<span class="p-input-icon-left"> <IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global'].value" placeholder="Keyword Search" /> <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
</span> </IconField>
</div> </div>
</template> </template>
<template #empty> No customers found. </template> <template #empty> No customers found. </template>
@ -143,10 +145,12 @@ export default {
<template #header> <template #header>
<div class="flex justify-content-between"> <div class="flex justify-content-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" /> <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<span class="p-input-icon-left"> <IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global'].value" placeholder="Keyword Search" /> <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
</span> </IconField>
</div> </div>
</template> </template>
<template #empty> No customers found. </template> <template #empty> No customers found. </template>
@ -243,10 +247,12 @@ export default {
<template #header> <template #header>
<div class="flex justify-content-between"> <div class="flex justify-content-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" /> <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<span class="p-input-icon-left"> <IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global'].value" placeholder="Keyword Search" /> <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
</span> </IconField>
</div> </div>
</template> </template>
<template #empty> No customers found. </template> <template #empty> No customers found. </template>
@ -434,10 +440,12 @@ export default {
<template #header> <template #header>
<div class="flex justify-content-between"> <div class="flex justify-content-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" /> <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<span class="p-input-icon-left"> <IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global'].value" placeholder="Keyword Search" /> <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
</span> </IconField>
</div> </div>
</template> </template>
<template #empty> No customers found. </template> <template #empty> No customers found. </template>

24
doc/datatable/samples/ProductsDoc.vue
View File

@ -31,10 +31,12 @@
<template #header> <template #header>
<div class="flex flex-wrap gap-2 align-items-center justify-content-between"> <div class="flex flex-wrap gap-2 align-items-center justify-content-between">
<h4 class="m-0">Manage Products</h4> <h4 class="m-0">Manage Products</h4>
<span class="p-input-icon-left"> <IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global'].value" placeholder="Search..." /> <InputText v-model="filters['global'].value" placeholder="Search..." />
</span> </IconField>
</div> </div>
</template> </template>
@ -206,10 +208,12 @@ export default {
<template #header> <template #header>
<div class="flex flex-wrap gap-2 align-items-center justify-content-between"> <div class="flex flex-wrap gap-2 align-items-center justify-content-between">
<h4 class="m-0">Manage Products</h4> <h4 class="m-0">Manage Products</h4>
<span class="p-input-icon-left"> <IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global'].value" placeholder="Search..." /> <InputText v-model="filters['global'].value" placeholder="Search..." />
</span> </IconField>
</div> </div>
</template> </template>
<Column selectionMode="multiple" style="width: 3rem" :exportable="false"></Column> <Column selectionMode="multiple" style="width: 3rem" :exportable="false"></Column>
@ -267,10 +271,12 @@ export default {
<template #header> <template #header>
<div class="flex flex-wrap gap-2 align-items-center justify-content-between"> <div class="flex flex-wrap gap-2 align-items-center justify-content-between">
<h4 class="m-0">Manage Products</h4> <h4 class="m-0">Manage Products</h4>
<span class="p-input-icon-left"> <IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global'].value" placeholder="Search..." /> <InputText v-model="filters['global'].value" placeholder="Search..." />
</span> </IconField>
</div> </div>
</template> </template>
@ -556,10 +562,12 @@ export default {
<template #header> <template #header>
<div class="flex flex-wrap gap-2 align-items-center justify-content-between"> <div class="flex flex-wrap gap-2 align-items-center justify-content-between">
<h4 class="m-0">Manage Products</h4> <h4 class="m-0">Manage Products</h4>
<span class="p-input-icon-left"> <IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global'].value" placeholder="Search..." /> <InputText v-model="filters['global'].value" placeholder="Search..." />
</span> </IconField>
</div> </div>
</template> </template>

16
doc/dropdown/FloatLabelDoc.vue
View File

@ -3,10 +3,10 @@
<p>A floating label appears on top of the input field when focused.</p> <p>A floating label appears on top of the input field when focused.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<div class="p-float-label w-full md:w-14rem"> <FloatLabel class="w-full md:w-14rem">
<Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" /> <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
<label for="dd-city">Select a City</label> <label for="dd-city">Select a City</label>
</div> </FloatLabel>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -25,18 +25,18 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<div class="p-float-label w-full md:w-14rem"> <FloatLabel class="w-full md:w-14rem">
<Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" /> <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
<label for="dd-city">Select a City</label> <label for="dd-city">Select a City</label>
</div> </FloatLabel>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<div class="p-float-label w-full md:w-14rem"> <FloatLabel class="w-full md:w-14rem">
<Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" /> <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
<label for="dd-city">Select a City</label> <label for="dd-city">Select a City</label>
</div> </FloatLabel>
</div> </div>
</template> </template>
@ -60,10 +60,10 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<div class="p-float-label w-full md:w-14rem"> <FloatLabel class="w-full md:w-14rem">
<Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" /> <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
<label for="dd-city">Select a City</label> <label for="dd-city">Select a City</label>
</div> </FloatLabel>
</div> </div>
</template> </template>

16
doc/dropdown/form/VeeValidateDoc.vue
View File

@ -4,10 +4,10 @@
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2"> <form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label"> <FloatLabel>
<Dropdown id="dd" v-model="value" :options="cities" optionLabel="name" :class="['w-full md:w-14rem', { 'p-invalid': errorMessage }]" aria-describedby="dd-error" /> <Dropdown id="dd" v-model="value" :options="cities" optionLabel="name" :class="['w-full md:w-14rem', { 'p-invalid': errorMessage }]" aria-describedby="dd-error" />
<label for="dd">Select a City</label> <label for="dd">Select a City</label>
</span> </FloatLabel>
<small id="dd-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small> <small id="dd-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" /> <Button type="submit" label="Submit" />
</form> </form>
@ -56,11 +56,11 @@ export default {
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2"> <form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label"> <FloatLabel>
<Dropdown id="dd" v-model="value" :options="cities" optionLabel="name" <Dropdown id="dd" v-model="value" :options="cities" optionLabel="name"
:class="['w-full md:w-14rem', { 'p-invalid': errorMessage }]" aria-describedby="dd-error" /> :class="['w-full md:w-14rem', { 'p-invalid': errorMessage }]" aria-describedby="dd-error" />
<label for="dd">Select a City</label> <label for="dd">Select a City</label>
</span> </FloatLabel>
<small class="p-error" id="dd-error">{{ errorMessage || '&nbsp;' }}</small> <small class="p-error" id="dd-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" /> <Button type="submit" label="Submit" />
</form> </form>
@ -72,11 +72,11 @@ export default {
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2"> <form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label"> <FloatLabel>
<Dropdown id="dd" v-model="value" :options="cities" optionLabel="name" <Dropdown id="dd" v-model="value" :options="cities" optionLabel="name"
:class="['w-full md:w-14rem', { 'p-invalid': errorMessage }]" aria-describedby="dd-error" /> :class="['w-full md:w-14rem', { 'p-invalid': errorMessage }]" aria-describedby="dd-error" />
<label for="dd">Select a City</label> <label for="dd">Select a City</label>
</span> </FloatLabel>
<small class="p-error" id="dd-error">{{ errorMessage || '&nbsp;' }}</small> <small class="p-error" id="dd-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" /> <Button type="submit" label="Submit" />
</form> </form>
@ -129,11 +129,11 @@ export default {
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2"> <form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label"> <FloatLabel>
<Dropdown id="dd" v-model="value" :options="cities" optionLabel="name" <Dropdown id="dd" v-model="value" :options="cities" optionLabel="name"
:class="['w-full md:w-14rem', { 'p-invalid': errorMessage }]" aria-describedby="dd-error" /> :class="['w-full md:w-14rem', { 'p-invalid': errorMessage }]" aria-describedby="dd-error" />
<label for="dd">Select a City</label> <label for="dd">Select a City</label>
</span> </FloatLabel>
<small class="p-error" id="dd-error">{{ errorMessage || '&nbsp;' }}</small> <small class="p-error" id="dd-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" /> <Button type="submit" label="Submit" />
</form> </form>

48
doc/focustrap/BasicDoc.vue
View File

@ -5,16 +5,20 @@
<div class="card flex justify-content-center p-fluid"> <div class="card flex justify-content-center p-fluid">
<div v-focustrap class="w-full" style="max-width: 20rem"> <div v-focustrap class="w-full" style="max-width: 20rem">
<div class="field"> <div class="field">
<div class="p-input-icon-right"> <IconField>
<InputIcon>
<i class="pi pi-user" /> <i class="pi pi-user" />
</InputIcon>
<InputText id="input" v-model="name" type="text" placeholder="Name" autofocus /> <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
</div> </IconField>
</div> </div>
<div class="field"> <div class="field">
<div class="p-input-icon-right"> <IconField>
<InputIcon>
<i class="pi pi-envelope" /> <i class="pi pi-envelope" />
</InputIcon>
<InputText id="email" v-model="email" type="email" placeholder="Email" /> <InputText id="email" v-model="email" type="email" placeholder="Email" />
</div> </IconField>
</div> </div>
<div class="field-checkbox"> <div class="field-checkbox">
<Checkbox id="accept" v-model="accept" name="accept" value="Accept" /> <Checkbox id="accept" v-model="accept" name="accept" value="Accept" />
@ -37,16 +41,20 @@ export default {
basic: ` basic: `
<div v-focustrap class="w-full" style="max-width: 20rem"> <div v-focustrap class="w-full" style="max-width: 20rem">
<div class="field"> <div class="field">
<div class="p-input-icon-right"> <IconField>
<InputIcon>
<i class="pi pi-user" /> <i class="pi pi-user" />
</InputIcon>
<InputText id="input" v-model="name" type="text" placeholder="Name" autofocus /> <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
</div> </IconField>
</div> </div>
<div class="field"> <div class="field">
<div class="p-input-icon-right"> <IconField>
<InputIcon>
<i class="pi pi-envelope" /> <i class="pi pi-envelope" />
</InputIcon>
<InputText id="email" v-model="email" type="email" placeholder="Email" /> <InputText id="email" v-model="email" type="email" placeholder="Email" />
</div> </IconField>
</div> </div>
<div class="field-checkbox"> <div class="field-checkbox">
<Checkbox id="accept" v-model="accept" name="accept" value="Accept" /> <Checkbox id="accept" v-model="accept" name="accept" value="Accept" />
@ -60,16 +68,20 @@ export default {
<div class="card flex justify-content-center p-fluid"> <div class="card flex justify-content-center p-fluid">
<div v-focustrap class="w-full" style="max-width: 20rem"> <div v-focustrap class="w-full" style="max-width: 20rem">
<div class="field"> <div class="field">
<div class="p-input-icon-right"> <IconField>
<InputIcon>
<i class="pi pi-user" /> <i class="pi pi-user" />
</InputIcon>
<InputText id="input" v-model="name" type="text" placeholder="Name" autofocus /> <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
</div> </IconField>
</div> </div>
<div class="field"> <div class="field">
<div class="p-input-icon-right"> <IconField>
<InputIcon>
<i class="pi pi-envelope" /> <i class="pi pi-envelope" />
</InputIcon>
<InputText id="email" v-model="email" type="email" placeholder="Email" /> <InputText id="email" v-model="email" type="email" placeholder="Email" />
</div> </IconField>
</div> </div>
<div class="field-checkbox"> <div class="field-checkbox">
<Checkbox id="accept" v-model="accept" name="accept" value="Accept" /> <Checkbox id="accept" v-model="accept" name="accept" value="Accept" />
@ -97,16 +109,20 @@ export default {
<div class="card flex justify-content-center p-fluid"> <div class="card flex justify-content-center p-fluid">
<div v-focustrap class="w-full" style="max-width: 20rem"> <div v-focustrap class="w-full" style="max-width: 20rem">
<div class="field"> <div class="field">
<div class="p-input-icon-right"> <IconField>
<InputIcon>
<i class="pi pi-user" /> <i class="pi pi-user" />
</InputIcon>
<InputText id="input" v-model="name" type="text" placeholder="Name" autofocus /> <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
</div> </IconField>
</div> </div>
<div class="field"> <div class="field">
<div class="p-input-icon-right"> <IconField>
<InputIcon>
<i class="pi pi-envelope" /> <i class="pi pi-envelope" />
</InputIcon>
<InputText id="email" v-model="email" type="email" placeholder="Email" /> <InputText id="email" v-model="email" type="email" placeholder="Email" />
</div> </IconField>
</div> </div>
<div class="field-checkbox"> <div class="field-checkbox">
<Checkbox id="accept" v-model="accept" name="accept" value="Accept" /> <Checkbox id="accept" v-model="accept" name="accept" value="Accept" />

16
doc/inputmask/FloatLabelDoc.vue
View File

@ -3,10 +3,10 @@
<p>A floating label appears on top of the input field when focused.</p> <p>A floating label appears on top of the input field when focused.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <FloatLabel>
<InputMask id="ssn" v-model="value" mask="999-99-9999" placeholder="999-99-9999" /> <InputMask id="ssn" v-model="value" mask="999-99-9999" placeholder="999-99-9999" />
<label for="ssn">SSN</label> <label for="ssn">SSN</label>
</span> </FloatLabel>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -18,18 +18,18 @@ export default {
value: '', value: '',
code: { code: {
basic: ` basic: `
<span class="p-float-label"> <FloatLabel>
<InputMask id="ssn" v-model="value" mask="999-99-9999" placeholder="999-99-9999" /> <InputMask id="ssn" v-model="value" mask="999-99-9999" placeholder="999-99-9999" />
<label for="ssn">SSN</label> <label for="ssn">SSN</label>
</span> </FloatLabel>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <FloatLabel>
<InputMask id="ssn" v-model="value" mask="999-99-9999" placeholder="999-99-9999" /> <InputMask id="ssn" v-model="value" mask="999-99-9999" placeholder="999-99-9999" />
<label for="ssn">SSN</label> <label for="ssn">SSN</label>
</span> </FloatLabel>
</div> </div>
</template> </template>
@ -47,10 +47,10 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <FloatLabel>
<InputMask id="ssn" v-model="val2" mask="999-99-9999" placeholder="999-99-9999" /> <InputMask id="ssn" v-model="val2" mask="999-99-9999" placeholder="999-99-9999" />
<label for="ssn">SSN</label> <label for="ssn">SSN</label>
</span> </FloatLabel>
</div> </div>
</template> </template>

16
doc/inputnumber/FloatLabelDoc.vue
View File

@ -3,10 +3,10 @@
<p>A floating label appears on top of the input field when focused.</p> <p>A floating label appears on top of the input field when focused.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <FloatLabel>
<InputNumber id="number-input" v-model="value" /> <InputNumber id="number-input" v-model="value" />
<label for="number-input">Number</label> <label for="number-input">Number</label>
</span> </FloatLabel>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -18,18 +18,18 @@ export default {
value: null, value: null,
code: { code: {
basic: ` basic: `
<span class="p-float-label"> <FloatLabel>
<InputNumber id="number-input" v-model="value" /> <InputNumber id="number-input" v-model="value" />
<label for="number-input">Number</label> <label for="number-input">Number</label>
</span> </FloatLabel>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <FloatLabel>
<InputNumber id="number-input" v-model="value" /> <InputNumber id="number-input" v-model="value" />
<label for="number-input">Number</label> <label for="number-input">Number</label>
</span> </FloatLabel>
</div> </div>
</template> </template>
@ -46,10 +46,10 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <FloatLabel>
<InputNumber id="number-input" v-model="value" /> <InputNumber id="number-input" v-model="value" />
<label for="number-input">Number</label> <label for="number-input">Number</label>
</span> </FloatLabel>
</div> </div>
</template> </template>

16
doc/inputtext/FloatLabelDoc.vue
View File

@ -3,10 +3,10 @@
<p>A floating label appears on top of the input field when focused.</p> <p>A floating label appears on top of the input field when focused.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <FloatLabel>
<InputText id="username" v-model="value" /> <InputText id="username" v-model="value" />
<label for="username">Username</label> <label for="username">Username</label>
</span> </FloatLabel>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -18,18 +18,18 @@ export default {
value: null, value: null,
code: { code: {
basic: ` basic: `
<span class="p-float-label"> <FloatLabel>
<InputText id="username" v-model="value" /> <InputText id="username" v-model="value" />
<label for="username">Username</label> <label for="username">Username</label>
</span> </FloatLabel>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <FloatLabel>
<InputText id="username" v-model="value" /> <InputText id="username" v-model="value" />
<label for="username">Username</label> <label for="username">Username</label>
</span> </FloatLabel>
</div> </div>
</template> </template>
@ -47,10 +47,10 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <FloatLabel>
<InputText id="username" v-model="value" /> <InputText id="username" v-model="value" />
<label for="username">Username</label> <label for="username">Username</label>
</span> </FloatLabel>
</div> </div>
</template> </template>

53
doc/inputtext/IconsDoc.vue
View File

@ -1,17 +1,24 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Icons can be placed inside an input element by wrapping both the input and the icon with an element that has either <i>.p-input-icon-left</i> or <i>.p-input-icon-right</i> class.</p> <p>
A group is created by wrapping the input and icon with the <i>IconField</i> component. Each icon is defined as a child of <i>InputIcon</i> component. In addition, position of the icon can be changed using <i>iconPosition</i> property that
the default value is <i>right</i> and also <i>left</i> option is available.
</p>
</DocSectionText> </DocSectionText>
<div class="card flex flex-wrap justify-content-center gap-3"> <div class="card flex flex-wrap justify-content-center gap-3">
<span class="p-input-icon-left"> <IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText v-model="value1" placeholder="Search" /> <InputText v-model="value1" placeholder="Search" />
</span> </IconField>
<span class="p-input-icon-right"> <IconField>
<InputIcon>
<i class="pi pi-spin pi-spinner" /> <i class="pi pi-spin pi-spinner" />
</InputIcon>
<InputText v-model="value2" /> <InputText v-model="value2" />
</span> </IconField>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -24,28 +31,36 @@ export default {
value2: null, value2: null,
code: { code: {
basic: ` basic: `
<span class="p-input-icon-left"> <IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText v-model="value1" placeholder="Search" /> <InputText v-model="value1" placeholder="Search" />
</span> </IconField>
<span class="p-input-icon-right"> <IconField>
<InputIcon>
<i class="pi pi-spin pi-spinner" /> <i class="pi pi-spin pi-spinner" />
</InputIcon>
<InputText v-model="value2" /> <InputText v-model="value2" />
</span> </IconField>
`, `,
options: ` options: `
<template> <template>
<div class="card flex flex-wrap justify-content-center gap-3"> <div class="card flex flex-wrap justify-content-center gap-3">
<span class="p-input-icon-left"> <IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText v-model="value1" placeholder="Search" /> <InputText v-model="value1" placeholder="Search" />
</span> </IconField>
<span class="p-input-icon-right"> <IconField>
<InputIcon>
<i class="pi pi-spin pi-spinner" /> <i class="pi pi-spin pi-spinner" />
</InputIcon>
<InputText v-model="value2" /> <InputText v-model="value2" />
</span> </IconField>
</div> </div>
</template> </template>
@ -63,15 +78,19 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex flex-wrap justify-content-center gap-3"> <div class="card flex flex-wrap justify-content-center gap-3">
<span class="p-input-icon-left"> <IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText v-model="value1" placeholder="Search" /> <InputText v-model="value1" placeholder="Search" />
</span> </IconField>
<span class="p-input-icon-right"> <IconField>
<InputIcon>
<i class="pi pi-spin pi-spinner" /> <i class="pi pi-spin pi-spinner" />
</InputIcon>
<InputText v-model="value2" /> <InputText v-model="value2" />
</span> </IconField>
</div> </div>
</template> </template>

16
doc/inputtext/form/VeeValidateDoc.vue
View File

@ -4,10 +4,10 @@
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2"> <form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label"> <FloatLabel>
<InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" /> <InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<label for="value">Name - Surname</label> <label for="value">Name - Surname</label>
</span> </FloatLabel>
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small> <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" /> <Button type="submit" label="Submit" />
</form> </form>
@ -49,10 +49,10 @@ export default {
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2"> <form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label"> <FloatLabel>
<InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" /> <InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<label for="value">Name - Surname</label> <label for="value">Name - Surname</label>
</span> </FloatLabel>
<small class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small> <small class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" /> <Button type="submit" label="Submit" />
</form> </form>
@ -64,10 +64,10 @@ export default {
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2"> <form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label"> <FloatLabel>
<InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" /> <InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<label for="value">Name - Surname</label> <label for="value">Name - Surname</label>
</span> </FloatLabel>
<small class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small> <small class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" /> <Button type="submit" label="Submit" />
</form> </form>
@ -109,10 +109,10 @@ export default {
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2"> <form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label"> <FloatLabel>
<InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" /> <InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<label for="value">Name - Surname</label> <label for="value">Name - Surname</label>
</span> </FloatLabel>
<small class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small> <small class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" /> <Button type="submit" label="Submit" />
</form> </form>

16
doc/multiselect/FloatLabelDoc.vue
View File

@ -3,10 +3,10 @@
<p>A floating label appears on top of the input field when focused.</p> <p>A floating label appears on top of the input field when focused.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label w-full md:w-20rem"> <FloatLabel class="w-full md:w-20rem">
<MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" /> <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" />
<label for="ms-cities">MultiSelect</label> <label for="ms-cities">MultiSelect</label>
</span> </FloatLabel>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -25,18 +25,18 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<span class="p-float-label w-full md:w-20rem"> <FloatLabel class="w-full md:w-20rem">
<MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" /> <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" />
<label for="ms-cities">MultiSelect</label> <label for="ms-cities">MultiSelect</label>
</span> </FloatLabel>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label w-full md:w-20rem"> <FloatLabel class="w-full md:w-20rem">
<MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" /> <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" />
<label for="ms-cities">MultiSelect</label> <label for="ms-cities">MultiSelect</label>
</span> </FloatLabel>
</div> </div>
</template> </template>
@ -60,10 +60,10 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label w-full md:w-20rem"> <FloatLabel class="w-full md:w-20rem">
<MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" /> <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" />
<label for="ms-cities">MultiSelect</label> <label for="ms-cities">MultiSelect</label>
</span> </FloatLabel>
</div> </div>
</template> </template>

16
doc/password/FloatLabelDoc.vue
View File

@ -3,10 +3,10 @@
<p>A floating label appears on top of the input field when focused.</p> <p>A floating label appears on top of the input field when focused.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <FloatLabel>
<Password v-model="value" inputId="password" /> <Password v-model="value" inputId="password" />
<label for="password">Password</label> <label for="password">Password</label>
</span> </FloatLabel>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -18,18 +18,18 @@ export default {
value: null, value: null,
code: { code: {
basic: ` basic: `
<span class="p-float-label"> <FloatLabel>
<Password v-model="value" inputId="password" /> <Password v-model="value" inputId="password" />
<label for="password">Password</label> <label for="password">Password</label>
</span> </FloatLabel>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <FloatLabel>
<Password v-model="value" inputId="password" /> <Password v-model="value" inputId="password" />
<label for="password">Password</label> <label for="password">Password</label>
</span> </FloatLabel>
</div> </div>
</template> </template>
@ -46,10 +46,10 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <FloatLabel>
<Password v-model="value" inputId="password" /> <Password v-model="value" inputId="password" />
<label for="password">Password</label> <label for="password">Password</label>
</span> </FloatLabel>
</div> </div>
</template> </template>

16
doc/textarea/FloatLabelDoc.vue
View File

@ -3,10 +3,10 @@
<p>A floating label appears on top of the input field when focused.</p> <p>A floating label appears on top of the input field when focused.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <FloatLabel>
<Textarea v-model="value" rows="5" cols="30" style="resize: none" /> <Textarea v-model="value" rows="5" cols="30" style="resize: none" />
<label>Username</label> <label>Username</label>
</span> </FloatLabel>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -18,18 +18,18 @@ export default {
value: '', value: '',
code: { code: {
basic: ` basic: `
<span class="p-float-label"> <FloatLabel>
<Textarea v-model="value" rows="5" cols="30" /> <Textarea v-model="value" rows="5" cols="30" />
<label>Username</label> <label>Username</label>
</span> </FloatLabel>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <FloatLabel>
<Textarea v-model="value" rows="5" cols="30" /> <Textarea v-model="value" rows="5" cols="30" />
<label>Username</label> <label>Username</label>
</span> </FloatLabel>
</div> </div>
</template> </template>
@ -46,10 +46,10 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <FloatLabel>
<Textarea v-model="value" rows="5" cols="30" /> <Textarea v-model="value" rows="5" cols="30" />
<label>Username</label> <label>Username</label>
</span> </FloatLabel>
</div> </div>
</template> </template>

16
doc/textarea/form/VeeValidateDoc.vue
View File

@ -4,10 +4,10 @@
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2"> <form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label"> <FloatLabel>
<Textarea id="value" v-model="value" :class="{ 'p-invalid': errorMessage }" rows="4" cols="30" aria-describedby="text-error" /> <Textarea id="value" v-model="value" :class="{ 'p-invalid': errorMessage }" rows="4" cols="30" aria-describedby="text-error" />
<label for="value">Description</label> <label for="value">Description</label>
</span> </FloatLabel>
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small> <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" /> <Button type="submit" label="Submit" />
</form> </form>
@ -47,10 +47,10 @@ export default {
basic: ` basic: `
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2"> <form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label"> <FloatLabel>
<Textarea id="value" v-model="value" :class="{ 'p-invalid': errorMessage }" rows="4" cols="30" aria-describedby="text-error" /> <Textarea id="value" v-model="value" :class="{ 'p-invalid': errorMessage }" rows="4" cols="30" aria-describedby="text-error" />
<label for="value">Description</label> <label for="value">Description</label>
</span> </FloatLabel>
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small> <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" /> <Button type="submit" label="Submit" />
</form> </form>
@ -61,10 +61,10 @@ export default {
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2"> <form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label"> <FloatLabel>
<Textarea id="value" v-model="value" :class="{ 'p-invalid': errorMessage }" rows="4" cols="30" aria-describedby="text-error" /> <Textarea id="value" v-model="value" :class="{ 'p-invalid': errorMessage }" rows="4" cols="30" aria-describedby="text-error" />
<label for="value">Description</label> <label for="value">Description</label>
</span> </FloatLabel>
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small> <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" /> <Button type="submit" label="Submit" />
</form> </form>
@ -105,10 +105,10 @@ export default {
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2"> <form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label"> <FloatLabel>
<Textarea id="value" v-model="value" :class="{ 'p-invalid': errorMessage }" rows="4" cols="30" aria-describedby="text-error" /> <Textarea id="value" v-model="value" :class="{ 'p-invalid': errorMessage }" rows="4" cols="30" aria-describedby="text-error" />
<label for="value">Description</label> <label for="value">Description</label>
</span> </FloatLabel>
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small> <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" /> <Button type="submit" label="Submit" />
</form> </form>

24
doc/toolbar/BasicDoc.vue
View File

@ -11,10 +11,12 @@
</template> </template>
<template #center> <template #center>
<span class="p-input-icon-left"> <IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText placeholder="Search" /> <InputText placeholder="Search" />
</span> </IconField>
</template> </template>
<template #end> <SplitButton label="Save" icon="pi pi-check" :model="items"></SplitButton></template> <template #end> <SplitButton label="Save" icon="pi pi-check" :model="items"></SplitButton></template>
@ -47,10 +49,12 @@ export default {
</template> </template>
<template #center> <template #center>
<span class="p-input-icon-left"> <IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText placeholder="Search" /> <InputText placeholder="Search" />
</span> </IconField>
</template> </template>
<template #end> <SplitButton label="Save" icon="pi pi-check" :model="items"></SplitButton></template> <template #end> <SplitButton label="Save" icon="pi pi-check" :model="items"></SplitButton></template>
@ -67,10 +71,12 @@ export default {
</template> </template>
<template #center> <template #center>
<span class="p-input-icon-left"> <IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText placeholder="Search" /> <InputText placeholder="Search" />
</span> </IconField>
</template> </template>
<template #end> <SplitButton label="Save" icon="pi pi-check" :model="items"></SplitButton></template> <template #end> <SplitButton label="Save" icon="pi pi-check" :model="items"></SplitButton></template>
@ -108,10 +114,12 @@ export default {
</template> </template>
<template #center> <template #center>
<span class="p-input-icon-left"> <IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon>
<InputText placeholder="Search" /> <InputText placeholder="Search" />
</span> </IconField>
</template> </template>
<template #end> <SplitButton label="Save" icon="pi pi-check" :model="items"></SplitButton></template> <template #end> <SplitButton label="Save" icon="pi pi-check" :model="items"></SplitButton></template>

16
doc/treeselect/FloatLabelDoc.vue
View File

@ -3,10 +3,10 @@
<p>A floating label appears on top of the input field when focused.</p> <p>A floating label appears on top of the input field when focused.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label w-full md:w-20rem"> <FloatLabel class="w-full md:w-20rem">
<TreeSelect v-model="selectedValue" :options="nodes" class="w-full" /> <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
<label>Tree Select</label> <label>Tree Select</label>
</span> </FloatLabel>
</div> </div>
<DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" /> <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
</template> </template>
@ -21,18 +21,18 @@ export default {
selectedValue: null, selectedValue: null,
code: { code: {
basic: ` basic: `
<span class="p-float-label w-full md:w-20rem"> <FloatLabel class="w-full md:w-20rem">
<TreeSelect v-model="selectedValue" :options="nodes" class="w-full" /> <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
<label>Tree Select</label> <label>Tree Select</label>
</span> </FloatLabel>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label w-full md:w-20rem"> <FloatLabel class="w-full md:w-20rem">
<TreeSelect v-model="selectedValue" :options="nodes" class="w-full" /> <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
<label>Tree Select</label> <label>Tree Select</label>
</span> </FloatLabel>
</div> </div>
</template> </template>
@ -55,10 +55,10 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label w-full md:w-20rem"> <FloatLabel class="w-full md:w-20rem">
<TreeSelect v-model="selectedValue" :options="nodes" class="w-full" /> <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
<label>Tree Select</label> <label>Tree Select</label>
</span> </FloatLabel>
</div> </div>
</template> </template>

32
doc/treetable/FilterDoc.vue
View File

@ -13,10 +13,12 @@
<TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value"> <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
<template #header> <template #header>
<div class="text-right"> <div class="text-right">
<div class="p-input-icon-left"> <IconField iconPosition="left">
<i class="pi pi-search"></i> <InputIcon>
<i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global']" placeholder="Global Search" /> <InputText v-model="filters['global']" placeholder="Global Search" />
</div> </IconField>
</div> </div>
</template> </template>
<Column field="name" header="Name" expander> <Column field="name" header="Name" expander>
@ -58,10 +60,12 @@ export default {
<TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value"> <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
<template #header> <template #header>
<div class="text-right"> <div class="text-right">
<div class="p-input-icon-left"> <IconField iconPosition="left">
<i class="pi pi-search"></i> <InputIcon>
<i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global']" placeholder="Global Search" /> <InputText v-model="filters['global']" placeholder="Global Search" />
</div> </IconField>
</div> </div>
</template> </template>
<Column field="name" header="Name" expander> <Column field="name" header="Name" expander>
@ -90,10 +94,12 @@ export default {
<TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value"> <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
<template #header> <template #header>
<div class="text-right"> <div class="text-right">
<div class="p-input-icon-left"> <IconField iconPosition="left">
<i class="pi pi-search"></i> <InputIcon>
<i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global']" placeholder="Global Search" /> <InputText v-model="filters['global']" placeholder="Global Search" />
</div> </IconField>
</div> </div>
</template> </template>
<Column field="name" header="Name" expander> <Column field="name" header="Name" expander>
@ -145,10 +151,12 @@ export default {
<TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value"> <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
<template #header> <template #header>
<div class="text-right"> <div class="text-right">
<div class="p-input-icon-left"> <IconField iconPosition="left">
<i class="pi pi-search"></i> <InputIcon>
<i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global']" placeholder="Global Search" /> <InputText v-model="filters['global']" placeholder="Global Search" />
</div> </IconField>
</div> </div>
</template> </template>
<Column field="name" header="Name" expander> <Column field="name" header="Name" expander>

10
pages/inputtext/index.vue
View File

@ -1,5 +1,13 @@
<template> <template>
<DocComponent title="Vue Input Component" header="InputText" description="InputText is an extension to standard input element with theming." :componentDocs="docs" :apiDocs="['InputText']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" /> <DocComponent
title="Vue Input Component"
header="InputText"
description="InputText is an extension to standard input element with theming."
:componentDocs="docs"
:apiDocs="['InputText', 'FloatLabel', 'InputIcon', 'IconField']"
:ptTabComponent="ptComponent"
:themingDocs="themingDoc"
/>
</template> </template>
<script> <script>