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

Showcase updates

pull/5677/head
tugcekucukoglu 2024-04-18 17:22:30 +03:00
parent fcf8599cfa
commit b2ec54e364
134 changed files with 6160 additions and 1238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
assets/menu/menu.json
View File

@ -66,10 +66,6 @@
"name": "AutoComplete", "name": "AutoComplete",
"to": "/autocomplete" "to": "/autocomplete"
}, },
{
"name": "Calendar",
"to": "/calendar"
},
{ {
"name": "CascadeSelect", "name": "CascadeSelect",
"to": "/cascadeselect" "to": "/cascadeselect"
@ -78,17 +74,13 @@
"name": "Checkbox", "name": "Checkbox",
"to": "/checkbox" "to": "/checkbox"
}, },
{
"name": "Chips",
"to": "/chips"
},
{ {
"name": "ColorPicker", "name": "ColorPicker",
"to": "/colorpicker" "to": "/colorpicker"
}, },
{ {
"name": "Dropdown", "name": "DatePicker",
"to": "/dropdown" "to": "/datepicker"
}, },
{ {
"name": "Editor", "name": "Editor",
@ -119,8 +111,8 @@
"to": "/inputotp" "to": "/inputotp"
}, },
{ {
"name": "InputSwitch", "name": "InputChips",
"to": "/inputswitch" "to": "/inputchips"
}, },
{ {
"name": "InputText", "name": "InputText",
@ -154,6 +146,10 @@
"name": "SelectButton", "name": "SelectButton",
"to": "/selectbutton" "to": "/selectbutton"
}, },
{
"name": "Select",
"to": "/select"
},
{ {
"name": "Slider", "name": "Slider",
"to": "/slider" "to": "/slider"
@ -166,6 +162,10 @@
"name": "ToggleButton", "name": "ToggleButton",
"to": "/togglebutton" "to": "/togglebutton"
}, },
{
"name": "ToggleSwitch",
"to": "/toggleswitch"
},
{ {
"name": "TreeSelect", "name": "TreeSelect",
"to": "/treeselect" "to": "/treeselect"
@ -303,12 +303,12 @@
"to": "/dynamicdialog" "to": "/dynamicdialog"
}, },
{ {
"name": "OverlayPanel", "name": "Popover",
"to": "/overlaypanel" "to": "/popover"
}, },
{ {
"name": "Sidebar", "name": "Drawer",
"to": "/sidebar" "to": "/drawer"
}, },
{ {
"name": "Tooltip", "name": "Tooltip",

8
components/landing/HeroSection.vue
View File

@ -28,14 +28,14 @@
</div> </div>
<div class="flex-auto" style="width: 1%"> <div class="flex-auto" style="width: 1%">
<span class="text-secondary font-semibold block mb-3">Beneficiary</span> <span class="text-secondary font-semibold block mb-3">Beneficiary</span>
<Dropdown v-model="user" :options="users" optionLabel="name" placeholder="Select a User" class="w-full"> <Select v-model="user" :options="users" optionLabel="name" placeholder="Select a User" class="w-full">
<template #option="slotProps"> <template #option="slotProps">
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
<img :alt="slotProps.option.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`" width="28" /> <img :alt="slotProps.option.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`" width="28" />
<span>{{ slotProps.option.name }}</span> <span>{{ slotProps.option.name }}</span>
</div> </div>
</template> </template>
</Dropdown> </Select>
</div> </div>
</div> </div>
<span class="text-secondary font-medium block mt-5 mb-3">Account</span> <span class="text-secondary font-medium block mt-5 mb-3">Account</span>
@ -50,7 +50,7 @@
</div> </div>
</div> </div>
<span class="text-secondary font-medium block mt-5 mb-3">Date</span> <span class="text-secondary font-medium block mt-5 mb-3">Date</span>
<Calendar v-model="dateValue" :showWeek="true" class="w-full" showIcon iconDisplay="input" /> <DatePicker v-model="dateValue" :showWeek="true" class="w-full" showIcon iconDisplay="input" />
</div> </div>
<div class="box p-4 fadein animation-duration-500"> <div class="box p-4 fadein animation-duration-500">
<Chart type="line" :data="chartData" :options="chartOptions" /> <Chart type="line" :data="chartData" :options="chartOptions" />
@ -59,7 +59,7 @@
<div class="flex align-items-center"> <div class="flex align-items-center">
<Chip label="Vue" class="mr-2 font-medium" /> <Chip label="Vue" class="mr-2 font-medium" />
<Chip label="Typescript" class="mr-2 font-medium" /> <Chip label="Typescript" class="mr-2 font-medium" />
<InputSwitch v-model="switchValue" class="ml-auto"></InputSwitch> <ToggleSwitch v-model="switchValue" class="ml-auto"></ToggleSwitch>
</div> </div>
<div class="mt-5 flex justify-content-center"> <div class="mt-5 flex justify-content-center">
<SelectButton v-model="selectButtonValue" :options="selectButtonOptions" optionLabel="name" /> <SelectButton v-model="selectButtonValue" :options="selectButtonOptions" optionLabel="name" />

95
doc/calendar/TimeDoc.vue
View File

@ -1,95 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>A time picker is displayed when <i>showTime</i> is enabled where 12/24 hour format is configured with <i>hourFormat</i> property. In case, only time needs to be selected, add <i>timeOnly</i> to hide the date section.</p>
</DocSectionText>
<div class="card flex flex-wrap gap-3 p-fluid">
<div class="flex-auto">
<label for="calendar-12h" class="font-bold block mb-2"> 12h Format </label>
<Calendar id="calendar-12h" v-model="datetime12h" showTime hourFormat="12" />
</div>
<div class="flex-auto">
<label for="calendar-24h" class="font-bold block mb-2"> 24h Format </label>
<Calendar id="calendar-24h" v-model="datetime24h" showTime hourFormat="24" />
</div>
<div class="flex-auto">
<label for="calendar-timeonly" class="font-bold block mb-2"> Time Only </label>
<Calendar id="calendar-timeonly" v-model="time" timeOnly />
</div>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
datetime12h: null,
datetime24h: null,
time: null,
code: {
basic: `
<Calendar id="calendar-12h" v-model="datetime12h" showTime hourFormat="12" />
<Calendar id="calendar-24h" v-model="datetime24h" showTime hourFormat="24" />
<Calendar id="calendar-timeonly" v-model="time" timeOnly />
`,
options: `
<template>
<div class="card flex flex-wrap gap-3 p-fluid">
<div class="flex-auto">
<label for="calendar-12h" class="font-bold block mb-2"> 12h Format </label>
<Calendar id="calendar-12h" v-model="datetime12h" showTime hourFormat="12" />
</div>
<div class="flex-auto">
<label for="calendar-24h" class="font-bold block mb-2"> 24h Format </label>
<Calendar id="calendar-24h" v-model="datetime24h" showTime hourFormat="24" />
</div>
<div class="flex-auto">
<label for="calendar-timeonly" class="font-bold block mb-2"> Time Only </label>
<Calendar id="calendar-timeonly" v-model="time" timeOnly />
</div>
</div>
</template>
<script>
export default {
data() {
return {
datetime12h: null,
datetime24h: null,
time: null
};
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex flex-wrap gap-3 p-fluid">
<div class="flex-auto">
<label for="calendar-12h" class="font-bold block mb-2"> 12h Format </label>
<Calendar id="calendar-12h" v-model="datetime12h" showTime hourFormat="12" />
</div>
<div class="flex-auto">
<label for="calendar-24h" class="font-bold block mb-2"> 24h Format </label>
<Calendar id="calendar-24h" v-model="datetime24h" showTime hourFormat="24" />
</div>
<div class="flex-auto">
<label for="calendar-timeonly" class="font-bold block mb-2"> Time Only </label>
<Calendar id="calendar-timeonly" v-model="time" timeOnly />
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
const datetime12h = ref();
const datetime24h = ref();
const time = ref();
<\/script>
`
}
};
}
};
</script>

2
doc/cdn/ComponentDoc.vue
View File

@ -11,7 +11,7 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<script src="https://unpkg.com/primevue/calendar/calendar.min.js"><\/script> <script src="https://unpkg.com/primevue/datepicker/datepicker.min.js"><\/script>
` `
} }
}; };

4
doc/cdn/ExampleDoc.vue
View File

@ -22,7 +22,7 @@ export default {
<body> <body>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script> <script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>
<script src="https://unpkg.com/primevue/core/core.min.js"><\/script> <script src="https://unpkg.com/primevue/core/core.min.js"><\/script>
<script src="https://unpkg.com/primevue/calendar/calendar.min.js"><\/script> <script src="https://unpkg.com/primevue/datepicker/datepicker.min.js"><\/script>
<div id="app"> <div id="app">
<p-datepicker v-model="date"></p-datepicker> <p-datepicker v-model="date"></p-datepicker>
@ -43,7 +43,7 @@ export default {
}); });
app.use(primevue.config.default); app.use(primevue.config.default);
app.component('p-datepicker', primevue.calendar); app.component('p-datepicker', primevue.datepicker);
app.mount('#app'); app.mount('#app');
<\/script> <\/script>

5652
doc/common/apidoc/index.json
View File

File diff suppressed because it is too large Load Diff

4
doc/configuration/ZIndexDoc.vue
View File

@ -21,8 +21,8 @@ const app = createApp(App);
app.use(PrimeVue, { app.use(PrimeVue, {
zIndex: { zIndex: {
modal: 1100, //dialog, sidebar modal: 1100, //dialog, drawer
overlay: 1000, //dropdown, overlaypanel overlay: 1000, //select, popover
menu: 1000, //overlay menus menu: 1000, //overlay menus
tooltip: 1100 //tooltip tooltip: 1100 //tooltip
} }

4
doc/customicons/FontAwesomeDoc.vue
View File

@ -11,11 +11,11 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<Dropdown> <Select>
<template #dropdownicon> <template #dropdownicon>
<i class="fa-light fa-chevron-down"></i> <i class="fa-light fa-chevron-down"></i>
</template> </template>
</Dropdown> </Select>
` `
} }
}; };

4
doc/customicons/ImageDoc.vue
View File

@ -11,11 +11,11 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<Dropdown> <Select>
<template #dropdownicon> <template #dropdownicon>
<img alt="dropdown icon" src="/assets/icons/arrow_down.png"> <img alt="dropdown icon" src="/assets/icons/arrow_down.png">
</template> </template>
</Dropdown> </Select>
` `
} }
}; };

4
doc/customicons/MaterialDoc.vue
View File

@ -11,11 +11,11 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<Dropdown> <Select>
<template #dropdownicon> <template #dropdownicon>
<span class="material-icons">arrow_drop_down</span> <span class="material-icons">arrow_drop_down</span>
</template> </template>
</Dropdown> </Select>
` `
} }
}; };

4
doc/customicons/SVGDoc.vue
View File

@ -11,7 +11,7 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<Dropdown> <Select>
<template #dropdownicon> <template #dropdownicon>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g id="chevron-down"> <g id="chevron-down">
@ -19,7 +19,7 @@ export default {
</g> </g>
</svg> </svg>
</template> </template>
</Dropdown> </Select>
` `
} }
}; };

16
doc/datatable/StatefulDoc.vue
View File

@ -69,11 +69,11 @@
<Tag :value="data.status" :severity="getSeverity(data.status)" /> <Tag :value="data.status" :severity="getSeverity(data.status)" />
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
<Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear> <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
<template #option="slotProps"> <template #option="slotProps">
<Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" /> <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
</template> </template>
</Dropdown> </Select>
</template> </template>
</Column> </Column>
<template #empty> No customers found. </template> <template #empty> No customers found. </template>
@ -158,11 +158,11 @@ export default {
<Tag :value="data.status" :severity="getSeverity(data.status)" /> <Tag :value="data.status" :severity="getSeverity(data.status)" />
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
<Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear> <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
<template #option="slotProps"> <template #option="slotProps">
<Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" /> <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
</template> </template>
</Dropdown> </Select>
</template> </template>
</Column> </Column>
<template #empty> No customers found. </template> <template #empty> No customers found. </template>
@ -221,11 +221,11 @@ export default {
<Tag :value="data.status" :severity="getSeverity(data.status)" /> <Tag :value="data.status" :severity="getSeverity(data.status)" />
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
<Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear> <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
<template #option="slotProps"> <template #option="slotProps">
<Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" /> <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
</template> </template>
</Dropdown> </Select>
</template> </template>
</Column> </Column>
<template #empty> No customers found. </template> <template #empty> No customers found. </template>
@ -349,11 +349,11 @@ export default {
<Tag :value="data.status" :severity="getSeverity(data.status)" /> <Tag :value="data.status" :severity="getSeverity(data.status)" />
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
<Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear> <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
<template #option="slotProps"> <template #option="slotProps">
<Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" /> <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
</template> </template>
</Dropdown> </Select>
</template> </template>
</Column> </Column>
<template #empty> No customers found. </template> <template #empty> No customers found. </template>

16
doc/datatable/edit/RowEditDoc.vue
View File

@ -34,11 +34,11 @@
</Column> </Column>
<Column field="inventoryStatus" header="Status" style="width: 20%"> <Column field="inventoryStatus" header="Status" style="width: 20%">
<template #editor="{ data, field }"> <template #editor="{ data, field }">
<Dropdown v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status"> <Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
<template #option="slotProps"> <template #option="slotProps">
<Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" /> <Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
</template> </template>
</Dropdown> </Select>
</template> </template>
<template #body="slotProps"> <template #body="slotProps">
<Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
@ -96,11 +96,11 @@ export default {
</Column> </Column>
<Column field="inventoryStatus" header="Status" style="width: 20%"> <Column field="inventoryStatus" header="Status" style="width: 20%">
<template #editor="{ data, field }"> <template #editor="{ data, field }">
<Dropdown v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status"> <Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
<template #option="slotProps"> <template #option="slotProps">
<Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" /> <Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
</template> </template>
</Dropdown> </Select>
</template> </template>
<template #body="slotProps"> <template #body="slotProps">
<Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
@ -142,11 +142,11 @@ export default {
</Column> </Column>
<Column field="inventoryStatus" header="Status" style="width: 20%"> <Column field="inventoryStatus" header="Status" style="width: 20%">
<template #editor="{ data, field }"> <template #editor="{ data, field }">
<Dropdown v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status"> <Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
<template #option="slotProps"> <template #option="slotProps">
<Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" /> <Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
</template> </template>
</Dropdown> </Select>
</template> </template>
<template #body="slotProps"> <template #body="slotProps">
<Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
@ -236,11 +236,11 @@ export default {
</Column> </Column>
<Column field="inventoryStatus" header="Status" style="width: 20%"> <Column field="inventoryStatus" header="Status" style="width: 20%">
<template #editor="{ data, field }"> <template #editor="{ data, field }">
<Dropdown v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status"> <Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
<template #option="slotProps"> <template #option="slotProps">
<Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" /> <Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
</template> </template>
</Dropdown> </Select>
</template> </template>
<template #body="slotProps"> <template #body="slotProps">
<Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />

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

@ -69,7 +69,7 @@
{{ formatDate(data.date) }} {{ formatDate(data.date) }}
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
<Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" /> <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
</template> </template>
</Column> </Column>
<Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem"> <Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem">
@ -85,11 +85,11 @@
<Tag :value="data.status" :severity="getSeverity(data.status)" /> <Tag :value="data.status" :severity="getSeverity(data.status)" />
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
<Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear> <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
<template #option="slotProps"> <template #option="slotProps">
<Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" /> <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
</template> </template>
</Dropdown> </Select>
</template> </template>
</Column> </Column>
<Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem"> <Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem">
@ -210,7 +210,7 @@ export default {
{{ formatDate(data.date) }} {{ formatDate(data.date) }}
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
<Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" /> <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
</template> </template>
</Column> </Column>
<Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem"> <Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem">
@ -226,11 +226,11 @@ export default {
<Tag :value="data.status" :severity="getSeverity(data.status)" /> <Tag :value="data.status" :severity="getSeverity(data.status)" />
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
<Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear> <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
<template #option="slotProps"> <template #option="slotProps">
<Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" /> <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
</template> </template>
</Dropdown> </Select>
</template> </template>
</Column> </Column>
<Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem"> <Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem">
@ -325,7 +325,7 @@ export default {
{{ formatDate(data.date) }} {{ formatDate(data.date) }}
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
<Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" /> <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
</template> </template>
</Column> </Column>
<Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem"> <Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem">
@ -341,11 +341,11 @@ export default {
<Tag :value="data.status" :severity="getSeverity(data.status)" /> <Tag :value="data.status" :severity="getSeverity(data.status)" />
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
<Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear> <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
<template #option="slotProps"> <template #option="slotProps">
<Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" /> <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
</template> </template>
</Dropdown> </Select>
</template> </template>
</Column> </Column>
<Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem"> <Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem">
@ -532,7 +532,7 @@ export default {
{{ formatDate(data.date) }} {{ formatDate(data.date) }}
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
<Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" /> <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
</template> </template>
</Column> </Column>
<Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem"> <Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem">
@ -548,11 +548,11 @@ export default {
<Tag :value="data.status" :severity="getSeverity(data.status)" /> <Tag :value="data.status" :severity="getSeverity(data.status)" />
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
<Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear> <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
<template #option="slotProps"> <template #option="slotProps">
<Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" /> <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
</template> </template>
</Dropdown> </Select>
</template> </template>
</Column> </Column>
<Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem"> <Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem">

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

@ -63,11 +63,11 @@
<Tag :value="data.status" :severity="getSeverity(data.status)" /> <Tag :value="data.status" :severity="getSeverity(data.status)" />
</template> </template>
<template #filter="{ filterModel, filterCallback }"> <template #filter="{ filterModel, filterCallback }">
<Dropdown v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" class="p-column-filter" style="min-width: 12rem" :showClear="true"> <Select v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" class="p-column-filter" style="min-width: 12rem" :showClear="true">
<template #option="slotProps"> <template #option="slotProps">
<Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" /> <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
</template> </template>
</Dropdown> </Select>
</template> </template>
</Column> </Column>
<Column field="verified" header="Verified" dataType="boolean" style="min-width: 6rem"> <Column field="verified" header="Verified" dataType="boolean" style="min-width: 6rem">
@ -172,11 +172,11 @@ export default {
<Tag :value="data.status" :severity="getSeverity(data.status)" /> <Tag :value="data.status" :severity="getSeverity(data.status)" />
</template> </template>
<template #filter="{ filterModel, filterCallback }"> <template #filter="{ filterModel, filterCallback }">
<Dropdown v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" class="p-column-filter" style="min-width: 12rem" :showClear="true"> <Select v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" class="p-column-filter" style="min-width: 12rem" :showClear="true">
<template #option="slotProps"> <template #option="slotProps">
<Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" /> <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
</template> </template>
</Dropdown> </Select>
</template> </template>
</Column> </Column>
<Column field="verified" header="Verified" dataType="boolean" style="min-width: 6rem"> <Column field="verified" header="Verified" dataType="boolean" style="min-width: 6rem">
@ -248,11 +248,11 @@ export default {
<Tag :value="data.status" :severity="getSeverity(data.status)" /> <Tag :value="data.status" :severity="getSeverity(data.status)" />
</template> </template>
<template #filter="{ filterModel, filterCallback }"> <template #filter="{ filterModel, filterCallback }">
<Dropdown v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" class="p-column-filter" style="min-width: 12rem" :showClear="true"> <Select v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" class="p-column-filter" style="min-width: 12rem" :showClear="true">
<template #option="slotProps"> <template #option="slotProps">
<Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" /> <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
</template> </template>
</Dropdown> </Select>
</template> </template>
</Column> </Column>
<Column field="verified" header="Verified" dataType="boolean" style="min-width: 6rem"> <Column field="verified" header="Verified" dataType="boolean" style="min-width: 6rem">
@ -404,11 +404,11 @@ export default {
<Tag :value="data.status" :severity="getSeverity(data.status)" /> <Tag :value="data.status" :severity="getSeverity(data.status)" />
</template> </template>
<template #filter="{ filterModel, filterCallback }"> <template #filter="{ filterModel, filterCallback }">
<Dropdown v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" class="p-column-filter" style="min-width: 12rem" :showClear="true"> <Select v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" class="p-column-filter" style="min-width: 12rem" :showClear="true">
<template #option="slotProps"> <template #option="slotProps">
<Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" /> <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
</template> </template>
</Dropdown> </Select>
</template> </template>
</Column> </Column>
<Column field="verified" header="Verified" dataType="boolean" style="min-width: 6rem"> <Column field="verified" header="Verified" dataType="boolean" style="min-width: 6rem">

8
doc/datatable/rowselection/MultipleRowsSelectionDoc.vue
View File

@ -8,7 +8,7 @@
<DeferredDemo @load="loadDemoData"> <DeferredDemo @load="loadDemoData">
<div class="card"> <div class="card">
<div class="flex justify-content-center align-items-center mb-4 gap-2"> <div class="flex justify-content-center align-items-center mb-4 gap-2">
<InputSwitch v-model="metaKey" inputId="input-metakey" /> <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
<label for="input-metakey">MetaKey</label> <label for="input-metakey">MetaKey</label>
</div> </div>
<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="multiple" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem"> <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="multiple" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
@ -33,7 +33,7 @@ export default {
metaKey: true, metaKey: true,
code: { code: {
basic: ` basic: `
<InputSwitch v-model="metaKey" inputId="input-metakey" /> <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="multiple" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem"> <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="multiple" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
<Column field="code" header="Code"></Column> <Column field="code" header="Code"></Column>
@ -46,7 +46,7 @@ export default {
<template> <template>
<div class="card"> <div class="card">
<div class="flex justify-content-center align-items-center mb-4 gap-2"> <div class="flex justify-content-center align-items-center mb-4 gap-2">
<InputSwitch v-model="metaKey" inputId="input-metakey" /> <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
<label for="input-metakey">MetaKey</label> <label for="input-metakey">MetaKey</label>
</div> </div>
<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="multiple" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem"> <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="multiple" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
@ -79,7 +79,7 @@ export default {
<template> <template>
<div class="card"> <div class="card">
<div class="flex justify-content-center align-items-center mb-4 gap-2"> <div class="flex justify-content-center align-items-center mb-4 gap-2">
<InputSwitch v-model="metaKey" inputId="input-metakey" /> <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
<label for="input-metakey">MetaKey</label> <label for="input-metakey">MetaKey</label>
</div> </div>
<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="multiple" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem"> <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="multiple" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">

8
doc/datatable/rowselection/SingleRowSelectionDoc.vue
View File

@ -12,7 +12,7 @@
<DeferredDemo @load="loadDemoData"> <DeferredDemo @load="loadDemoData">
<div class="card"> <div class="card">
<div class="flex justify-content-center align-items-center mb-4 gap-2"> <div class="flex justify-content-center align-items-center mb-4 gap-2">
<InputSwitch v-model="metaKey" inputId="input-metakey" /> <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
<label for="input-metakey">MetaKey</label> <label for="input-metakey">MetaKey</label>
</div> </div>
<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem"> <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
@ -37,7 +37,7 @@ export default {
metaKey: true, metaKey: true,
code: { code: {
basic: ` basic: `
<InputSwitch v-model="metaKey" inputId="input-metakey" /> <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem"> <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
<Column field="code" header="Code"></Column> <Column field="code" header="Code"></Column>
@ -50,7 +50,7 @@ export default {
<template> <template>
<div class="card"> <div class="card">
<div class="flex justify-content-center align-items-center mb-4 gap-2"> <div class="flex justify-content-center align-items-center mb-4 gap-2">
<InputSwitch v-model="metaKey" inputId="input-metakey" /> <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
<label for="input-metakey">MetaKey</label> <label for="input-metakey">MetaKey</label>
</div> </div>
<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem"> <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
@ -83,7 +83,7 @@ export default {
<template> <template>
<div class="card"> <div class="card">
<div class="flex justify-content-center align-items-center mb-4 gap-2"> <div class="flex justify-content-center align-items-center mb-4 gap-2">
<InputSwitch v-model="metaKey" inputId="input-metakey" /> <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
<label for="input-metakey">MetaKey</label> <label for="input-metakey">MetaKey</label>
</div> </div>
<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem"> <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">

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

@ -69,7 +69,7 @@
{{ formatDate(data.date) }} {{ formatDate(data.date) }}
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
<Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" /> <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
</template> </template>
</Column> </Column>
<Column field="balance" header="Balance" sortable filterField="balance" dataType="numeric" style="min-width: 10rem"> <Column field="balance" header="Balance" sortable filterField="balance" dataType="numeric" style="min-width: 10rem">
@ -85,11 +85,11 @@
<Tag :value="data.status" :severity="getSeverity(data.status)" /> <Tag :value="data.status" :severity="getSeverity(data.status)" />
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
<Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear> <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
<template #option="slotProps"> <template #option="slotProps">
<Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" /> <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
</template> </template>
</Dropdown> </Select>
</template> </template>
</Column> </Column>
<Column field="activity" header="Activity" sortable :showFilterMatchModes="false" style="min-width: 12rem"> <Column field="activity" header="Activity" sortable :showFilterMatchModes="false" style="min-width: 12rem">
@ -197,7 +197,7 @@ export default {
{{ formatDate(data.date) }} {{ formatDate(data.date) }}
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
<Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" /> <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
</template> </template>
</Column> </Column>
<Column field="balance" header="Balance" sortable filterField="balance" dataType="numeric" style="min-width: 10rem"> <Column field="balance" header="Balance" sortable filterField="balance" dataType="numeric" style="min-width: 10rem">
@ -213,11 +213,11 @@ export default {
<Tag :value="data.status" :severity="getSeverity(data.status)" /> <Tag :value="data.status" :severity="getSeverity(data.status)" />
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
<Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear> <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
<template #option="slotProps"> <template #option="slotProps">
<Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" /> <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
</template> </template>
</Dropdown> </Select>
</template> </template>
</Column> </Column>
<Column field="activity" header="Activity" sortable :showFilterMatchModes="false" style="min-width: 12rem"> <Column field="activity" header="Activity" sortable :showFilterMatchModes="false" style="min-width: 12rem">
@ -299,7 +299,7 @@ export default {
{{ formatDate(data.date) }} {{ formatDate(data.date) }}
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
<Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" /> <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
</template> </template>
</Column> </Column>
<Column field="balance" header="Balance" sortable filterField="balance" dataType="numeric" style="min-width: 10rem"> <Column field="balance" header="Balance" sortable filterField="balance" dataType="numeric" style="min-width: 10rem">
@ -315,11 +315,11 @@ export default {
<Tag :value="data.status" :severity="getSeverity(data.status)" /> <Tag :value="data.status" :severity="getSeverity(data.status)" />
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
<Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear> <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
<template #option="slotProps"> <template #option="slotProps">
<Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" /> <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
</template> </template>
</Dropdown> </Select>
</template> </template>
</Column> </Column>
<Column field="activity" header="Activity" sortable :showFilterMatchModes="false" style="min-width: 12rem"> <Column field="activity" header="Activity" sortable :showFilterMatchModes="false" style="min-width: 12rem">
@ -492,7 +492,7 @@ export default {
{{ formatDate(data.date) }} {{ formatDate(data.date) }}
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
<Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" /> <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
</template> </template>
</Column> </Column>
<Column field="balance" header="Balance" sortable filterField="balance" dataType="numeric" style="min-width: 10rem"> <Column field="balance" header="Balance" sortable filterField="balance" dataType="numeric" style="min-width: 10rem">
@ -508,11 +508,11 @@ export default {
<Tag :value="data.status" :severity="getSeverity(data.status)" /> <Tag :value="data.status" :severity="getSeverity(data.status)" />
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
<Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear> <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
<template #option="slotProps"> <template #option="slotProps">
<Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" /> <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
</template> </template>
</Dropdown> </Select>
</template> </template>
</Column> </Column>
<Column field="activity" header="Activity" sortable :showFilterMatchModes="false" style="min-width: 12rem"> <Column field="activity" header="Activity" sortable :showFilterMatchModes="false" style="min-width: 12rem">

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

@ -88,7 +88,7 @@
<div class="field"> <div class="field">
<label for="inventoryStatus" class="mb-3">Inventory Status</label> <label for="inventoryStatus" class="mb-3">Inventory Status</label>
<Dropdown id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status"> <Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status">
<template #value="slotProps"> <template #value="slotProps">
<div v-if="slotProps.value && slotProps.value.value"> <div v-if="slotProps.value && slotProps.value.value">
<Tag :value="slotProps.value.value" :severity="getStatusLabel(slotProps.value.label)" /> <Tag :value="slotProps.value.value" :severity="getStatusLabel(slotProps.value.label)" />
@ -100,7 +100,7 @@
{{ slotProps.placeholder }} {{ slotProps.placeholder }}
</span> </span>
</template> </template>
</Dropdown> </Select>
</div> </div>
<div class="field"> <div class="field">
@ -327,7 +327,7 @@ export default {
<div class="field"> <div class="field">
<label for="inventoryStatus" class="mb-3">Inventory Status</label> <label for="inventoryStatus" class="mb-3">Inventory Status</label>
<Dropdown id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status"> <Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status">
<template #value="slotProps"> <template #value="slotProps">
<div v-if="slotProps.value && slotProps.value.value"> <div v-if="slotProps.value && slotProps.value.value">
<Tag :value="slotProps.value.value" :severity="getStatusLabel(slotProps.value.label)" /> <Tag :value="slotProps.value.value" :severity="getStatusLabel(slotProps.value.label)" />
@ -339,7 +339,7 @@ export default {
{{slotProps.placeholder}} {{slotProps.placeholder}}
</span> </span>
</template> </template>
</Dropdown> </Select>
</div> </div>
<div class="field"> <div class="field">
@ -618,7 +618,7 @@ export default {
<div class="field"> <div class="field">
<label for="inventoryStatus" class="mb-3">Inventory Status</label> <label for="inventoryStatus" class="mb-3">Inventory Status</label>
<Dropdown id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status"> <Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status">
<template #value="slotProps"> <template #value="slotProps">
<div v-if="slotProps.value && slotProps.value.value"> <div v-if="slotProps.value && slotProps.value.value">
<Tag :value="slotProps.value.value" :severity="getStatusLabel(slotProps.value.label)" /> <Tag :value="slotProps.value.value" :severity="getStatusLabel(slotProps.value.label)" />
@ -630,7 +630,7 @@ export default {
{{slotProps.placeholder}} {{slotProps.placeholder}}
</span> </span>
</template> </template>
</Dropdown> </Select>
</div> </div>
<div class="field"> <div class="field">

8
doc/dataview/SortingDoc.vue
View File

@ -5,7 +5,7 @@
<div class="card"> <div class="card">
<DataView :value="products" :sortOrder="sortOrder" :sortField="sortField"> <DataView :value="products" :sortOrder="sortOrder" :sortField="sortField">
<template #header> <template #header>
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" /> <Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
@ -63,7 +63,7 @@ export default {
basic: ` basic: `
<DataView :value="products" :sortOrder="sortOrder" :sortField="sortField"> <DataView :value="products" :sortOrder="sortOrder" :sortField="sortField">
<template #header> <template #header>
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" /> <Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
@ -105,7 +105,7 @@ export default {
<div class="card"> <div class="card">
<DataView :value="products" :sortOrder="sortOrder" :sortField="sortField"> <DataView :value="products" :sortOrder="sortOrder" :sortField="sortField">
<template #header> <template #header>
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" /> <Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
@ -202,7 +202,7 @@ export default {
<div class="card"> <div class="card">
<DataView :value="products" :sortOrder="sortOrder" :sortField="sortField"> <DataView :value="products" :sortOrder="sortOrder" :sortField="sortField">
<template #header> <template #header>
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" /> <Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">

10
doc/calendar/AccessibilityDoc.vue → doc/datepicker/AccessibilityDoc.vue
View File

@ -6,7 +6,7 @@
<i>aria-autocomplete</i> as "none", <i>aria-haspopup</i> as "dialog" and <i>aria-expanded</i> attributes. The relation between the input and the popup is created with <i>aria-controls</i> attribute that refers to the id of the popup. <i>aria-autocomplete</i> as "none", <i>aria-haspopup</i> as "dialog" and <i>aria-expanded</i> attributes. The relation between the input and the popup is created with <i>aria-controls</i> attribute that refers to the id of the popup.
</p> </p>
<p> <p>
The optional calendar button requires includes <i>aria-haspopup</i>, <i>aria-expanded</i> for states along with <i>aria-controls</i> to define the relation between the popup and the button. The value to read is retrieved from the The optional datepicker button requires includes <i>aria-haspopup</i>, <i>aria-expanded</i> for states along with <i>aria-controls</i> to define the relation between the popup and the button. The value to read is retrieved from the
<i>chooseDate</i> key of the aria property from the <NuxtLink to="/configuration/#locale">locale</NuxtLink> API. This label is also used for the <i>aria-label</i> of the popup as well. When there is a value selected, it is formatted and <i>chooseDate</i> key of the aria property from the <NuxtLink to="/configuration/#locale">locale</NuxtLink> API. This label is also used for the <i>aria-label</i> of the popup as well. When there is a value selected, it is formatted and
appended to the label to be able to notify users about the current value. appended to the label to be able to notify users about the current value.
</p> </p>
@ -26,7 +26,7 @@
<i>pm</i> keys. <i>pm</i> keys.
</p> </p>
<p>Calendar also includes a hidden section that is only available to screen readers with <i>aria-live</i> as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.</p> <p>DatePicker also includes a hidden section that is only available to screen readers with <i>aria-live</i> as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.</p>
<DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
@ -197,12 +197,12 @@ export default {
code: { code: {
basic: ` basic: `
<label for="date1">Date</label> <label for="date1">Date</label>
<Calendar inputId="date1" /> <DatePicker inputId="date1" />
<span id="date2">Date</span> <span id="date2">Date</span>
<Calendar aria-labelledby="date2" /> <DatePicker aria-labelledby="date2" />
<Calendar aria-label="Date" /> <DatePicker aria-label="Date" />
` `
} }
}; };

10
doc/calendar/BasicDoc.vue → doc/datepicker/BasicDoc.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Calendar is used a controlled input component with <i>v-model</i> property.</p> <p>DatePicker is used a controlled input component with <i>v-model</i> property.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" /> <DatePicker v-model="date" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
date: null, date: null,
code: { code: {
basic: ` basic: `
<Calendar v-model="date" /> <DatePicker v-model="date" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" /> <DatePicker v-model="date" />
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" /> <DatePicker v-model="date" />
</div> </div>
</template> </template>

8
doc/calendar/ButtonBarDoc.vue → doc/datepicker/ButtonBarDoc.vue
View File

@ -3,7 +3,7 @@
<p>When <i>showButtonBar</i> is present, today and clear buttons are displayed at the footer.</p> <p>When <i>showButtonBar</i> is present, today and clear buttons are displayed at the footer.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" showButtonBar /> <DatePicker v-model="date" showButtonBar />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
date: null, date: null,
code: { code: {
basic: ` basic: `
<Calendar v-model="date" showButtonBar /> <DatePicker v-model="date" showButtonBar />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" showButtonBar /> <DatePicker v-model="date" showButtonBar />
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" showButtonBar /> <DatePicker v-model="date" showButtonBar />
</div> </div>
</template> </template>

16
doc/calendar/DateTemplateDoc.vue → doc/datepicker/DateTemplateDoc.vue
View File

@ -3,12 +3,12 @@
<p>Custom content can be placed inside date cells with the <i>date</i> slot that takes a Date as a parameter.</p> <p>Custom content can be placed inside date cells with the <i>date</i> slot that takes a Date as a parameter.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date"> <DatePicker v-model="date">
<template #date="slotProps"> <template #date="slotProps">
<strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" style="text-decoration: line-through">{{ slotProps.date.day }}</strong> <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" style="text-decoration: line-through">{{ slotProps.date.day }}</strong>
<template v-else>{{ slotProps.date.day }}</template> <template v-else>{{ slotProps.date.day }}</template>
</template> </template>
</Calendar> </DatePicker>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -20,22 +20,22 @@ export default {
date: null, date: null,
code: { code: {
basic: ` basic: `
<Calendar v-model="date"> <DatePicker v-model="date">
<template #date="slotProps"> <template #date="slotProps">
<strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" style="text-decoration: line-through">{{ slotProps.date.day }}</strong> <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" style="text-decoration: line-through">{{ slotProps.date.day }}</strong>
<template v-else>{{ slotProps.date.day }}</template> <template v-else>{{ slotProps.date.day }}</template>
</template> </template>
</Calendar> </DatePicker>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date"> <DatePicker v-model="date">
<template #date="slotProps"> <template #date="slotProps">
<strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" style="text-decoration: line-through">{{ slotProps.date.day }}</strong> <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" style="text-decoration: line-through">{{ slotProps.date.day }}</strong>
<template v-else>{{ slotProps.date.day }}</template> <template v-else>{{ slotProps.date.day }}</template>
</template> </template>
</Calendar> </DatePicker>
</div> </div>
</template> </template>
@ -52,12 +52,12 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date"> <DatePicker v-model="date">
<template #date="slotProps"> <template #date="slotProps">
<strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" style="text-decoration: line-through">{{ slotProps.date.day }}</strong> <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" style="text-decoration: line-through">{{ slotProps.date.day }}</strong>
<template v-else>{{ slotProps.date.day }}</template> <template v-else>{{ slotProps.date.day }}</template>
</template> </template>
</Calendar> </DatePicker>
</div> </div>
</template> </template>

10
doc/calendar/DisabledDoc.vue → doc/datepicker/DisabledDoc.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Calendar is used a controlled input component with <i>v-model</i> property.</p> <p>DatePicker is used a controlled input component with <i>v-model</i> property.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" disabled /> <DatePicker v-model="date" disabled />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
date: null, date: null,
code: { code: {
basic: ` basic: `
<Calendar v-model="date" disabled /> <DatePicker v-model="date" disabled />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" disabled /> <DatePicker v-model="date" disabled />
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" disabled /> <DatePicker v-model="date" disabled />
</div> </div>
</template> </template>

8
doc/calendar/FilledDoc.vue → doc/datepicker/FilledDoc.vue
View File

@ -3,7 +3,7 @@
<p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p> <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" variant="filled" /> <DatePicker v-model="date" variant="filled" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
date: null, date: null,
code: { code: {
basic: ` basic: `
<Calendar v-model="date" variant="filled" /> <DatePicker v-model="date" variant="filled" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" variant="filled" /> <DatePicker v-model="date" variant="filled" />
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" variant="filled" /> <DatePicker v-model="date" variant="filled" />
</div> </div>
</template> </template>

8
doc/calendar/FloatLabelDoc.vue → doc/datepicker/FloatLabelDoc.vue
View File

@ -4,7 +4,7 @@
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<FloatLabel> <FloatLabel>
<Calendar v-model="date" inputId="birth_date" /> <DatePicker v-model="date" inputId="birth_date" />
<label for="birth_date">Birth Date</label> <label for="birth_date">Birth Date</label>
</FloatLabel> </FloatLabel>
</div> </div>
@ -19,7 +19,7 @@ export default {
code: { code: {
basic: ` basic: `
<FloatLabel> <FloatLabel>
<Calendar v-model="date" inputId="birth_date" /> <DatePicker v-model="date" inputId="birth_date" />
<label for="birth_date">Birth Date</label> <label for="birth_date">Birth Date</label>
</FloatLabel> </FloatLabel>
`, `,
@ -27,7 +27,7 @@ export default {
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<FloatLabel> <FloatLabel>
<Calendar v-model="date" inputId="birth_date" /> <DatePicker v-model="date" inputId="birth_date" />
<label for="birth_date">Birth Date</label> <label for="birth_date">Birth Date</label>
</FloatLabel> </FloatLabel>
</div> </div>
@ -47,7 +47,7 @@ export default {
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<FloatLabel> <FloatLabel>
<Calendar v-model="date" inputId="birth_date" /> <DatePicker v-model="date" inputId="birth_date" />
<label for="birth_date">Birth Date</label> <label for="birth_date">Birth Date</label>
</FloatLabel> </FloatLabel>
</div> </div>

8
doc/calendar/FormatDoc.vue → doc/datepicker/FormatDoc.vue
View File

@ -22,7 +22,7 @@
</ul> </ul>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" dateFormat="dd/mm/yy" /> <DatePicker v-model="date" dateFormat="dd/mm/yy" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -34,12 +34,12 @@ export default {
date: null, date: null,
code: { code: {
basic: ` basic: `
<Calendar v-model="date" dateFormat="dd/mm/yy" /> <DatePicker v-model="date" dateFormat="dd/mm/yy" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" dateFormat="dd/mm/yy" /> <DatePicker v-model="date" dateFormat="dd/mm/yy" />
</div> </div>
</template> </template>
@ -56,7 +56,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" dateFormat="dd/mm/yy" /> <DatePicker v-model="date" dateFormat="dd/mm/yy" />
</div> </div>
</template> </template>

32
doc/calendar/IconDoc.vue → doc/datepicker/IconDoc.vue
View File

@ -5,19 +5,19 @@
<div class="card flex flex-wrap gap-3 p-fluid"> <div class="card flex flex-wrap gap-3 p-fluid">
<div class="flex-auto"> <div class="flex-auto">
<label for="buttondisplay" class="font-bold block mb-2"> Button </label> <label for="buttondisplay" class="font-bold block mb-2"> Button </label>
<Calendar v-model="buttondisplay" showIcon :showOnFocus="false" inputId="buttondisplay" /> <DatePicker v-model="buttondisplay" showIcon :showOnFocus="false" inputId="buttondisplay" />
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<label for="icondisplay" class="font-bold block mb-2"> Default Icon </label> <label for="icondisplay" class="font-bold block mb-2"> Default Icon </label>
<Calendar v-model="icondisplay" showIcon iconDisplay="input" inputId="icondisplay" /> <DatePicker v-model="icondisplay" showIcon iconDisplay="input" inputId="icondisplay" />
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label> <label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
<Calendar v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay"> <DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay">
<template #inputicon="{ clickCallback }"> <template #inputicon="{ clickCallback }">
<InputIcon class="pi pi-clock cursor-pointer" @click="clickCallback" /> <InputIcon class="pi pi-clock cursor-pointer" @click="clickCallback" />
</template> </template>
</Calendar> </DatePicker>
</div> </div>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -32,32 +32,32 @@ export default {
templatedisplay: null, templatedisplay: null,
code: { code: {
basic: ` basic: `
<Calendar v-model="buttondisplay" showIcon :showOnFocus="false" /> <DatePicker v-model="buttondisplay" showIcon :showOnFocus="false" />
<Calendar v-model="icondisplay" showIcon iconDisplay="input" /> <DatePicker v-model="icondisplay" showIcon iconDisplay="input" />
<Calendar v-model="templatedisplay" showIcon iconDisplay="input" timeOnly> <DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly>
<template #inputicon="{ clickCallback }"> <template #inputicon="{ clickCallback }">
<InputIcon class="pi pi-clock cursor-pointer" @click="clickCallback" /> <InputIcon class="pi pi-clock cursor-pointer" @click="clickCallback" />
</template> </template>
</Calendar> </DatePicker>
`, `,
options: ` options: `
<template> <template>
<div class="card flex flex-wrap gap-3 p-fluid"> <div class="card flex flex-wrap gap-3 p-fluid">
<div class="flex-auto"> <div class="flex-auto">
<label for="buttondisplay" class="font-bold block mb-2"> Button </label> <label for="buttondisplay" class="font-bold block mb-2"> Button </label>
<Calendar v-model="buttondisplay" showIcon :showOnFocus="false" inputId="buttondisplay" /> <DatePicker v-model="buttondisplay" showIcon :showOnFocus="false" inputId="buttondisplay" />
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<label for="icondisplay" class="font-bold block mb-2"> Default Icon </label> <label for="icondisplay" class="font-bold block mb-2"> Default Icon </label>
<Calendar v-model="icondisplay" showIcon iconDisplay="input" inputId="icondisplay" /> <DatePicker v-model="icondisplay" showIcon iconDisplay="input" inputId="icondisplay" />
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label> <label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
<Calendar v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay"> <DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay">
<template #inputicon="{ clickCallback }"> <template #inputicon="{ clickCallback }">
<InputIcon class="pi pi-clock cursor-pointer" @click="clickCallback" /> <InputIcon class="pi pi-clock cursor-pointer" @click="clickCallback" />
</template> </template>
</Calendar> </DatePicker>
</div> </div>
</div> </div>
</template> </template>
@ -79,19 +79,19 @@ export default {
<div class="card flex flex-wrap gap-3 p-fluid"> <div class="card flex flex-wrap gap-3 p-fluid">
<div class="flex-auto"> <div class="flex-auto">
<label for="buttondisplay" class="font-bold block mb-2"> Button </label> <label for="buttondisplay" class="font-bold block mb-2"> Button </label>
<Calendar v-model="buttondisplay" showIcon :showOnFocus="false" inputId="buttondisplay" /> <DatePicker v-model="buttondisplay" showIcon :showOnFocus="false" inputId="buttondisplay" />
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<label for="icondisplay" class="font-bold block mb-2"> Default Icon </label> <label for="icondisplay" class="font-bold block mb-2"> Default Icon </label>
<Calendar v-model="icondisplay" showIcon iconDisplay="input" inputId="icondisplay" /> <DatePicker v-model="icondisplay" showIcon iconDisplay="input" inputId="icondisplay" />
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label> <label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
<Calendar v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay"> <DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay">
<template #inputicon="{ clickCallback }"> <template #inputicon="{ clickCallback }">
<InputIcon class="pi pi-clock cursor-pointer" @click="clickCallback" /> <InputIcon class="pi pi-clock cursor-pointer" @click="clickCallback" />
</template> </template>
</Calendar> </DatePicker>
</div> </div>
</div> </div>
</template> </template>

2
doc/calendar/ImportDoc.vue → doc/datepicker/ImportDoc.vue
View File

@ -9,7 +9,7 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
import Calendar from 'primevue/calendar'; import DatePicker from 'primevue/datepicker';
` `
} }
}; };

10
doc/calendar/InlineDoc.vue → doc/datepicker/InlineDoc.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Calendar is used a controlled input component with <i>v-model</i> property.</p> <p>DatePicker is used a controlled input component with <i>v-model</i> property.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" inline showWeek /> <DatePicker v-model="date" inline showWeek />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
date: null, date: null,
code: { code: {
basic: ` basic: `
<Calendar v-model="date" inline showWeek /> <DatePicker v-model="date" inline showWeek />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" inline showWeek /> <DatePicker v-model="date" inline showWeek />
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" inline showWeek /> <DatePicker v-model="date" inline showWeek />
</div> </div>
</template> </template>

10
doc/calendar/InvalidDoc.vue → doc/datepicker/InvalidDoc.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Calendar is used a controlled input component with <i>v-model</i> property.</p> <p>DatePicker is used a controlled input component with <i>v-model</i> property.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" invalid /> <DatePicker v-model="date" invalid />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
date: null, date: null,
code: { code: {
basic: ` basic: `
<Calendar v-model="date" invalid /> <DatePicker v-model="date" invalid />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" invalid /> <DatePicker v-model="date" invalid />
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" invalid /> <DatePicker v-model="date" invalid />
</div> </div>
</template> </template>

0
doc/calendar/LocaleDoc.vue → doc/datepicker/LocaleDoc.vue
View File

8
doc/calendar/MinMaxDoc.vue → doc/datepicker/MinMaxDoc.vue
View File

@ -3,7 +3,7 @@
<p>Boundaries for the permitted dates that can be entered are defined with <i>minDate</i> and <i>maxDate</i> properties.</p> <p>Boundaries for the permitted dates that can be entered are defined with <i>minDate</i> and <i>maxDate</i> properties.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" /> <DatePicker v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -17,12 +17,12 @@ export default {
maxDate: null, maxDate: null,
code: { code: {
basic: ` basic: `
<Calendar v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" /> <DatePicker v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" /> <DatePicker v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
</div> </div>
</template> </template>
@ -57,7 +57,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" /> <DatePicker v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
</div> </div>
</template> </template>

8
doc/calendar/MonthPickerDoc.vue → doc/datepicker/MonthPickerDoc.vue
View File

@ -3,7 +3,7 @@
<p>Month only picker is enabled by specifying <i>view</i> as <i>month</i> in addition to a suitable <i>dateFormat</i>.</p> <p>Month only picker is enabled by specifying <i>view</i> as <i>month</i> in addition to a suitable <i>dateFormat</i>.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" view="month" dateFormat="mm/yy" /> <DatePicker v-model="date" view="month" dateFormat="mm/yy" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
date: null, date: null,
code: { code: {
basic: ` basic: `
<Calendar v-model="date" view="month" dateFormat="mm/yy" /> <DatePicker v-model="date" view="month" dateFormat="mm/yy" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" view="month" dateFormat="mm/yy" /> <DatePicker v-model="date" view="month" dateFormat="mm/yy" />
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" view="month" dateFormat="mm/yy" /> <DatePicker v-model="date" view="month" dateFormat="mm/yy" />
</div> </div>
</template> </template>

8
doc/calendar/MultipleDoc.vue → doc/datepicker/MultipleDoc.vue
View File

@ -3,7 +3,7 @@
<p>In order to choose multiple dates, set <i>selectionMode</i> as <i>multiple</i>. In this mode, the value binding should be an array.</p> <p>In order to choose multiple dates, set <i>selectionMode</i> as <i>multiple</i>. In this mode, the value binding should be an array.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="dates" selectionMode="multiple" :manualInput="false" /> <DatePicker v-model="dates" selectionMode="multiple" :manualInput="false" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
dates: null, dates: null,
code: { code: {
basic: ` basic: `
<Calendar v-model="dates" selectionMode="multiple" :manualInput="false" /> <DatePicker v-model="dates" selectionMode="multiple" :manualInput="false" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="dates" selectionMode="multiple" :manualInput="false" /> <DatePicker v-model="dates" selectionMode="multiple" :manualInput="false" />
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="dates" selectionMode="multiple" :manualInput="false" /> <DatePicker v-model="dates" selectionMode="multiple" :manualInput="false" />
</div> </div>
</template> </template>

8
doc/calendar/MultipleMonthsDoc.vue → doc/datepicker/MultipleMonthsDoc.vue
View File

@ -3,7 +3,7 @@
<p>Number of months to display is configured with the <i>numberOfMonths</i> property.</p> <p>Number of months to display is configured with the <i>numberOfMonths</i> property.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" :numberOfMonths="2" /> <DatePicker v-model="date" :numberOfMonths="2" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
date: null, date: null,
code: { code: {
basic: ` basic: `
<Calendar v-model="date" :numberOfMonths="2" /> <DatePicker v-model="date" :numberOfMonths="2" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" :numberOfMonths="2" /> <DatePicker v-model="date" :numberOfMonths="2" />
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" :numberOfMonths="2" /> <DatePicker v-model="date" :numberOfMonths="2" />
</div> </div>
</template> </template>

8
doc/calendar/RangeDoc.vue → doc/datepicker/RangeDoc.vue
View File

@ -3,7 +3,7 @@
<p>A range of dates can be selected by defining <i>selectionMode</i> as <i>range</i>, in this case the bound value would be an array with two values where first date is the start of the range and second date is the end.</p> <p>A range of dates can be selected by defining <i>selectionMode</i> as <i>range</i>, in this case the bound value would be an array with two values where first date is the start of the range and second date is the end.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="dates" selectionMode="range" :manualInput="false" /> <DatePicker v-model="dates" selectionMode="range" :manualInput="false" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
dates: null, dates: null,
code: { code: {
basic: ` basic: `
<Calendar v-model="dates" selectionMode="range" :manualInput="false" /> <DatePicker v-model="dates" selectionMode="range" :manualInput="false" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="dates" selectionMode="range" :manualInput="false" /> <DatePicker v-model="dates" selectionMode="range" :manualInput="false" />
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="dates" selectionMode="range" :manualInput="false" /> <DatePicker v-model="dates" selectionMode="range" :manualInput="false" />
</div> </div>
</template> </template>

95
doc/datepicker/TimeDoc.vue Normal file
View File

@ -0,0 +1,95 @@
<template>
<DocSectionText v-bind="$attrs">
<p>A time picker is displayed when <i>showTime</i> is enabled where 12/24 hour format is configured with <i>hourFormat</i> property. In case, only time needs to be selected, add <i>timeOnly</i> to hide the date section.</p>
</DocSectionText>
<div class="card flex flex-wrap gap-3 p-fluid">
<div class="flex-auto">
<label for="datepicker-12h" class="font-bold block mb-2"> 12h Format </label>
<DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" />
</div>
<div class="flex-auto">
<label for="datepicker-24h" class="font-bold block mb-2"> 24h Format </label>
<DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" />
</div>
<div class="flex-auto">
<label for="datepicker-timeonly" class="font-bold block mb-2"> Time Only </label>
<DatePicker id="datepicker-timeonly" v-model="time" timeOnly />
</div>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
datetime12h: null,
datetime24h: null,
time: null,
code: {
basic: `
<DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" />
<DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" />
<DatePicker id="datepicker-timeonly" v-model="time" timeOnly />
`,
options: `
<template>
<div class="card flex flex-wrap gap-3 p-fluid">
<div class="flex-auto">
<label for="datepicker-12h" class="font-bold block mb-2"> 12h Format </label>
<DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" />
</div>
<div class="flex-auto">
<label for="datepicker-24h" class="font-bold block mb-2"> 24h Format </label>
<DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" />
</div>
<div class="flex-auto">
<label for="datepicker-timeonly" class="font-bold block mb-2"> Time Only </label>
<DatePicker id="datepicker-timeonly" v-model="time" timeOnly />
</div>
</div>
</template>
<script>
export default {
data() {
return {
datetime12h: null,
datetime24h: null,
time: null
};
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex flex-wrap gap-3 p-fluid">
<div class="flex-auto">
<label for="datepicker-12h" class="font-bold block mb-2"> 12h Format </label>
<DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" />
</div>
<div class="flex-auto">
<label for="datepicker-24h" class="font-bold block mb-2"> 24h Format </label>
<DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" />
</div>
<div class="flex-auto">
<label for="datepicker-timeonly" class="font-bold block mb-2"> Time Only </label>
<DatePicker id="datepicker-timeonly" v-model="time" timeOnly />
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
const datetime12h = ref();
const datetime24h = ref();
const time = ref();
<\/script>
`
}
};
}
};
</script>

8
doc/calendar/YearPickerDoc.vue → doc/datepicker/YearPickerDoc.vue
View File

@ -3,7 +3,7 @@
<p>Specifying <i>view</i> as <i>year</i> in addition to a suitable <i>dateFormat</i> enables the year picker.</p> <p>Specifying <i>view</i> as <i>year</i> in addition to a suitable <i>dateFormat</i> enables the year picker.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" view="year" dateFormat="yy" /> <DatePicker v-model="date" view="year" dateFormat="yy" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
date: null, date: null,
code: { code: {
basic: ` basic: `
<Calendar v-model="date" view="year" dateFormat="yy" /> <DatePicker v-model="date" view="year" dateFormat="yy" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" view="year" dateFormat="yy" /> <DatePicker v-model="date" view="year" dateFormat="yy" />
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Calendar v-model="date" view="year" dateFormat="yy" /> <DatePicker v-model="date" view="year" dateFormat="yy" />
</div> </div>
</template> </template>

8
doc/calendar/form/VeeValidateDoc.vue → doc/datepicker/form/VeeValidateDoc.vue
View File

@ -5,7 +5,7 @@
<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">
<label for="date">Date</label> <label for="date">Date</label>
<Calendar id="date" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="date-error" /> <DatePicker id="date" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="date-error" />
<small id="date-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small> <small id="date-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" /> <Button type="submit" label="Submit" />
</form> </form>
@ -48,7 +48,7 @@ export default {
<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">
<label for="date">Date</label> <label for="date">Date</label>
<Calendar id="date" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="date-error" /> <DatePicker id="date" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="date-error" />
<small class="p-error" id="date-error">{{ errorMessage || '&nbsp;' }}</small> <small class="p-error" id="date-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" /> <Button type="submit" label="Submit" />
</form> </form>
@ -61,7 +61,7 @@ export default {
<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">
<label for="date">Date</label> <label for="date">Date</label>
<Calendar id="date" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="date-error" /> <DatePicker id="date" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="date-error" />
<small class="p-error" id="date-error">{{ errorMessage || '&nbsp;' }}</small> <small class="p-error" id="date-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" /> <Button type="submit" label="Submit" />
</form> </form>
@ -104,7 +104,7 @@ export default {
<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">
<label for="date">Date</label> <label for="date">Date</label>
<Calendar id="date" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="date-error" /> <DatePicker id="date" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="date-error" />
<small class="p-error" id="date-error">{{ errorMessage || '&nbsp;' }}</small> <small class="p-error" id="date-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" /> <Button type="submit" label="Submit" />
</form> </form>

0
doc/calendar/pt/PTImage.vue → doc/datepicker/pt/PTImage.vue
View File

8
doc/dropdown/pt/index.vue → doc/datepicker/pt/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="doc-main"> <div class="doc-main">
<div class="doc-intro"> <div class="doc-intro">
<h1>Dropdown Pass Through</h1> <h1>DatePicker Pass Through</h1>
</div> </div>
<DocSections :docs="docs" /> <DocSections :docs="docs" />
</div> </div>
@ -23,10 +23,10 @@ export default {
component: PTImage component: PTImage
}, },
{ {
id: 'pt.doc.dropdown', id: 'pt.doc.datepicker',
label: 'Dropdown PT Options', label: 'DatePicker PT Options',
component: DocApiTable, component: DocApiTable,
data: getPTOption('Dropdown') data: getPTOption('DatePicker')
} }
] ]
}; };

6
doc/calendar/theming/StyledDoc.vue → doc/datepicker/theming/StyledDoc.vue
View File

@ -12,15 +12,15 @@
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-calendar</td> <td>p-datepicker</td>
<td>Main container element</td> <td>Main container element</td>
</tr> </tr>
<tr> <tr>
<td>p-calendar-w-btn</td> <td>p-datepicker-w-btn</td>
<td>Main container element when button is enabled.</td> <td>Main container element when button is enabled.</td>
</tr> </tr>
<tr> <tr>
<td>p-calendar-timeonly</td> <td>p-datepicker-timeonly</td>
<td>Main container element in time picker only mode.</td> <td>Main container element in time picker only mode.</td>
</tr> </tr>
<tr> <tr>

0
doc/calendar/theming/TailwindDoc.vue → doc/datepicker/theming/TailwindDoc.vue
View File

2
doc/calendar/theming/index.vue → doc/datepicker/theming/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="doc-main"> <div class="doc-main">
<div class="doc-intro"> <div class="doc-intro">
<h1>Calendar Theming</h1> <h1>DatePicker Theming</h1>
</div> </div>
<DocSections :docs="docs" /> <DocSections :docs="docs" />
</div> </div>

16
doc/sidebar/AccessibilityDoc.vue → doc/drawer/AccessibilityDoc.vue
View File

@ -2,8 +2,8 @@
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs"> <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
<h3>Screen Reader</h3> <h3>Screen Reader</h3>
<p> <p>
Sidebar component uses <i>complementary</i> role by default, since any attribute is passed to the root element aria role can be changed depending on your use case and additional attributes like <i>aria-labelledby</i> can be added. In Drawer component uses <i>complementary</i> role by default, since any attribute is passed to the root element aria role can be changed depending on your use case and additional attributes like <i>aria-labelledby</i> can be added. In
addition <i>aria-modal</i> is added since focus is kept within the sidebar when opened. addition <i>aria-modal</i> is added since focus is kept within the drawer when opened.
</p> </p>
<p>Trigger element also requires <i>aria-expanded</i> and <i>aria-controls</i> to be handled explicitly.</p> <p>Trigger element also requires <i>aria-expanded</i> and <i>aria-controls</i> to be handled explicitly.</p>
@ -24,11 +24,11 @@
<td> <td>
<i>tab</i> <i>tab</i>
</td> </td>
<td>Moves focus to the next the focusable element within the sidebar.</td> <td>Moves focus to the next the focusable element within the drawer.</td>
</tr> </tr>
<tr> <tr>
<td><i>shift</i> + <i>tab</i></td> <td><i>shift</i> + <i>tab</i></td>
<td>Moves focus to the previous the focusable element within the sidebar.</td> <td>Moves focus to the previous the focusable element within the drawer.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
@ -54,13 +54,13 @@
<td> <td>
<i>enter</i> <i>enter</i>
</td> </td>
<td>Closes the sidebar.</td> <td>Closes the drawer.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>space</i> <i>space</i>
</td> </td>
<td>Closes the sidebar.</td> <td>Closes the drawer.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -76,9 +76,9 @@ export default {
basic: ` basic: `
<Button label="Show" icon="pi pi-external-link" @click="visible = true" :aria-controls="visible ? 'sbar' : null" :aria-expanded="visible"/> <Button label="Show" icon="pi pi-external-link" @click="visible = true" :aria-controls="visible ? 'sbar' : null" :aria-expanded="visible"/>
<Sidebar id="sbar" v-model:visible="visible" role="region" > <Drawer id="sbar" v-model:visible="visible" role="region" >
<p>Content</p> <p>Content</p>
</Sidebar> </Drawer>
` `
} }
}; };

18
doc/sidebar/BasicDoc.vue → doc/drawer/BasicDoc.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Sidebar is used as a container and visibility is controlled with a binding to <i>visible</i>.</p> <p>Drawer is used as a container and visibility is controlled with a binding to <i>visible</i>.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Sidebar v-model:visible="visible" header="Sidebar"> <Drawer v-model:visible="visible" header="Drawer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
<Button icon="pi pi-arrow-right" @click="visible = true" /> <Button icon="pi pi-arrow-right" @click="visible = true" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -19,18 +19,18 @@ export default {
code: { code: {
basic: ` basic: `
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Sidebar v-model:visible="visible" header="Sidebar"> <Drawer v-model:visible="visible" header="Drawer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
<Button icon="pi pi-arrow-right" @click="visible = true" /> <Button icon="pi pi-arrow-right" @click="visible = true" />
</div> </div>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Sidebar v-model:visible="visible" header="Sidebar"> <Drawer v-model:visible="visible" header="Drawer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
<Button icon="pi pi-arrow-right" @click="visible = true" /> <Button icon="pi pi-arrow-right" @click="visible = true" />
</div> </div>
</template> </template>
@ -48,9 +48,9 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Sidebar v-model:visible="visible" header="Sidebar"> <Drawer v-model:visible="visible" header="Drawer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
<Button icon="pi pi-arrow-right" @click="visible = true" /> <Button icon="pi pi-arrow-right" @click="visible = true" />
</div> </div>
</template> </template>

16
doc/sidebar/FullScreenDoc.vue → doc/drawer/FullScreenDoc.vue
View File

@ -3,9 +3,9 @@
<p>The whole page is covered when <i>position</i> property is set as <i>full</i>.</p> <p>The whole page is covered when <i>position</i> property is set as <i>full</i>.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Sidebar v-model:visible="visible" header="Sidebar" position="full"> <Drawer v-model:visible="visible" header="Drawer" position="full">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
<Button icon="pi pi-window-maximize" @click="visible = true" /> <Button icon="pi pi-window-maximize" @click="visible = true" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -19,18 +19,18 @@ export default {
code: { code: {
basic: ` basic: `
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Sidebar v-model:visible="visible" header="Sidebar" position="full"> <Drawer v-model:visible="visible" header="Drawer" position="full">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
<Button icon="pi pi-window-maximize" @click="visible = true" /> <Button icon="pi pi-window-maximize" @click="visible = true" />
</div> </div>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Sidebar v-model:visible="visible" header="Sidebar" position="full"> <Drawer v-model:visible="visible" header="Drawer" position="full">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
<Button icon="pi pi-window-maximize" @click="visible = true" /> <Button icon="pi pi-window-maximize" @click="visible = true" />
</div> </div>
</template> </template>
@ -48,9 +48,9 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Sidebar v-model:visible="visible" header="Sidebar" position="full"> <Drawer v-model:visible="visible" header="Drawer" position="full">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
<Button icon="pi pi-window-maximize" @click="visible = true" /> <Button icon="pi pi-window-maximize" @click="visible = true" />
</div> </div>
</template> </template>

16
doc/sidebar/HeadlessDoc.vue → doc/drawer/HeadlessDoc.vue
View File

@ -3,7 +3,7 @@
<p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire UI instead of the default elements.</p> <p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire UI instead of the default elements.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Sidebar v-model:visible="visible"> <Drawer v-model:visible="visible">
<template #container="{ closeCallback }"> <template #container="{ closeCallback }">
<div class="flex flex-column h-full"> <div class="flex flex-column h-full">
<div class="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0"> <div class="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
@ -186,7 +186,7 @@
</div> </div>
</div> </div>
</template> </template>
</Sidebar> </Drawer>
<Button icon="pi pi-bars" @click="visible = true" /> <Button icon="pi pi-bars" @click="visible = true" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -199,7 +199,7 @@ export default {
visible: false, visible: false,
code: { code: {
basic: ` basic: `
<Sidebar v-model:visible="visible"> <Drawer v-model:visible="visible">
<template #container="{ closeCallback }"> <template #container="{ closeCallback }">
<div class="flex flex-column h-full"> <div class="flex flex-column h-full">
<div class="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0"> <div class="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
@ -376,13 +376,13 @@ export default {
</div> </div>
</div> </div>
</template> </template>
</Sidebar> </Drawer>
<Button icon="pi pi-bars" @click="visible = true" /> <Button icon="pi pi-bars" @click="visible = true" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Sidebar v-model:visible="visible"> <Drawer v-model:visible="visible">
<template #container="{ closeCallback }"> <template #container="{ closeCallback }">
<div class="flex flex-column h-full"> <div class="flex flex-column h-full">
<div class="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0"> <div class="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
@ -565,7 +565,7 @@ export default {
</div> </div>
</div> </div>
</template> </template>
</Sidebar> </Drawer>
<Button icon="pi pi-bars" @click="visible = true" /> <Button icon="pi pi-bars" @click="visible = true" />
</div> </div>
</template> </template>
@ -583,7 +583,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Sidebar v-model:visible="visible"> <Drawer v-model:visible="visible">
<template #container="{ closeCallback }"> <template #container="{ closeCallback }">
<div class="flex flex-column h-full"> <div class="flex flex-column h-full">
<div class="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0"> <div class="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
@ -766,7 +766,7 @@ export default {
</div> </div>
</div> </div>
</template> </template>
</Sidebar> </Drawer>
<Button icon="pi pi-bars" @click="visible = true" /> <Button icon="pi pi-bars" @click="visible = true" />
</div> </div>
</template> </template>

2
doc/chips/ImportDoc.vue → doc/drawer/ImportDoc.vue
View File

@ -9,7 +9,7 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
import Chips from 'primevue/chips'; import Drawer from 'primevue/drawer';
` `
} }
}; };

66
doc/sidebar/PositionDoc.vue → doc/drawer/PositionDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Sidebar location is configured with the <i>position</i> property that can take <i>left</i>, <i>right</i>, <i>top</i> and <i>bottom</i> as valid values.</p> <p>Drawer location is configured with the <i>position</i> property that can take <i>left</i>, <i>right</i>, <i>top</i> and <i>bottom</i> as valid values.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<div class="flex gap-2 justify-content-center"> <div class="flex gap-2 justify-content-center">
@ -10,21 +10,21 @@
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" /> <Button icon="pi pi-arrow-up" @click="visibleBottom = true" />
</div> </div>
<Sidebar v-model:visible="visibleLeft" header="Left Sidebar"> <Drawer v-model:visible="visibleLeft" header="Left Drawer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
<Sidebar v-model:visible="visibleRight" header="Right Sidebar" position="right"> <Drawer v-model:visible="visibleRight" header="Right Drawer" position="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
<Sidebar v-model:visible="visibleTop" header="Top Sidebar" position="top" style="height: auto"> <Drawer v-model:visible="visibleTop" header="Top Drawer" position="top" style="height: auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
<Sidebar v-model:visible="visibleBottom" header="Bottom Sidebar" position="bottom" style="height: auto"> <Drawer v-model:visible="visibleBottom" header="Bottom Drawer" position="bottom" style="height: auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -46,21 +46,21 @@ export default {
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" /> <Button icon="pi pi-arrow-up" @click="visibleBottom = true" />
</div> </div>
<Sidebar v-model:visible="visibleLeft" header="Left Sidebar"> <Drawer v-model:visible="visibleLeft" header="Left Drawer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
<Sidebar v-model:visible="visibleRight" header="Right Sidebar" position="right"> <Drawer v-model:visible="visibleRight" header="Right Drawer" position="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
<Sidebar v-model:visible="visibleTop" header="Top Sidebar" position="top" style="height: auto"> <Drawer v-model:visible="visibleTop" header="Top Drawer" position="top" style="height: auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
<Sidebar v-model:visible="visibleBottom" header="Bottom Sidebar" position="bottom" style="height: auto"> <Drawer v-model:visible="visibleBottom" header="Bottom Drawer" position="bottom" style="height: auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
`, `,
options: ` options: `
<template> <template>
@ -72,21 +72,21 @@ export default {
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" /> <Button icon="pi pi-arrow-up" @click="visibleBottom = true" />
</div> </div>
<Sidebar v-model:visible="visibleLeft" header="Left Sidebar"> <Drawer v-model:visible="visibleLeft" header="Left Drawer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
<Sidebar v-model:visible="visibleRight" header="Right Sidebar" position="right"> <Drawer v-model:visible="visibleRight" header="Right Drawer" position="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
<Sidebar v-model:visible="visibleTop" header="Top Sidebar" position="top" style="height: auto"> <Drawer v-model:visible="visibleTop" header="Top Drawer" position="top" style="height: auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
<Sidebar v-model:visible="visibleBottom" header="Bottom Sidebar" position="bottom" style="height: auto"> <Drawer v-model:visible="visibleBottom" header="Bottom Drawer" position="bottom" style="height: auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
</div> </div>
</template> </template>
@ -113,21 +113,21 @@ export default {
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" /> <Button icon="pi pi-arrow-up" @click="visibleBottom = true" />
</div> </div>
<Sidebar v-model:visible="visibleLeft" header="Left Sidebar"> <Drawer v-model:visible="visibleLeft" header="Left Drawer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
<Sidebar v-model:visible="visibleRight" header="Right Sidebar" position="right"> <Drawer v-model:visible="visibleRight" header="Right Drawer" position="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
<Sidebar v-model:visible="visibleTop" header="Top Sidebar" position="top" style="height: auto"> <Drawer v-model:visible="visibleTop" header="Top Drawer" position="top" style="height: auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
<Sidebar v-model:visible="visibleBottom" header="Bottom Sidebar" position="bottom" style="height: auto"> <Drawer v-model:visible="visibleBottom" header="Bottom Drawer" position="bottom" style="height: auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
</div> </div>
</template> </template>

18
doc/sidebar/SizeDoc.vue → doc/drawer/SizeDoc.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Sidebar dimension can be defined with <i>style</i> or <i>class</i> properties which can also be responsive when used with a CSS utility library like PrimeFlex or Tailwind.</p> <p>Drawer dimension can be defined with <i>style</i> or <i>class</i> properties which can also be responsive when used with a CSS utility library like PrimeFlex or Tailwind.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Sidebar v-model:visible="visible" header="Sidebar" class="w-full md:w-20rem lg:w-30rem"> <Drawer v-model:visible="visible" header="Drawer" class="w-full md:w-20rem lg:w-30rem">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
<Button icon="pi pi-arrow-right" @click="visible = true" /> <Button icon="pi pi-arrow-right" @click="visible = true" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -19,18 +19,18 @@ export default {
code: { code: {
basic: ` basic: `
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Sidebar v-model:visible="visible" header="Sidebar" class="w-full md:w-20rem lg:w-30rem"> <Drawer v-model:visible="visible" header="Drawer" class="w-full md:w-20rem lg:w-30rem">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
<Button icon="pi pi-arrow-right" @click="visible = true" /> <Button icon="pi pi-arrow-right" @click="visible = true" />
</div> </div>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Sidebar v-model:visible="visible" header="Sidebar" class="w-full md:w-20rem lg:w-30rem"> <Drawer v-model:visible="visible" header="Drawer" class="w-full md:w-20rem lg:w-30rem">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
<Button icon="pi pi-arrow-right" @click="visible = true" /> <Button icon="pi pi-arrow-right" @click="visible = true" />
</div> </div>
</template> </template>
@ -48,9 +48,9 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Sidebar v-model:visible="visible" header="Sidebar" class="w-full md:w-20rem lg:w-30rem"> <Drawer v-model:visible="visible" header="Drawer" class="w-full md:w-20rem lg:w-30rem">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
<Button icon="pi pi-arrow-right" @click="visible = true" /> <Button icon="pi pi-arrow-right" @click="visible = true" />
</div> </div>
</template> </template>

16
doc/sidebar/TemplateDoc.vue → doc/drawer/TemplateDoc.vue
View File

@ -3,7 +3,7 @@
<p>Additional content at the header section is provided using the <i>header</i> template.</p> <p>Additional content at the header section is provided using the <i>header</i> template.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Sidebar v-model:visible="visible"> <Drawer v-model:visible="visible">
<template #header> <template #header>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
@ -11,7 +11,7 @@
</div> </div>
</template> </template>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
<Button icon="pi pi-plus" @click="visible = true" /> <Button icon="pi pi-plus" @click="visible = true" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -24,7 +24,7 @@ export default {
visible: false, visible: false,
code: { code: {
basic: ` basic: `
<Sidebar v-model:visible="visible"> <Drawer v-model:visible="visible">
<template #header> <template #header>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
<Avatar image="/images/avatar/amyelsner.png" shape="circle" /> <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
@ -32,13 +32,13 @@ export default {
</div> </div>
</template> </template>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
<Button icon="pi pi-plus" @click="visible = true" /> <Button icon="pi pi-plus" @click="visible = true" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Sidebar v-model:visible="visible"> <Drawer v-model:visible="visible">
<template #header> <template #header>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
@ -46,7 +46,7 @@ export default {
</div> </div>
</template> </template>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
<Button icon="pi pi-plus" @click="visible = true" /> <Button icon="pi pi-plus" @click="visible = true" />
</div> </div>
</template> </template>
@ -64,7 +64,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Sidebar v-model:visible="visible"> <Drawer v-model:visible="visible">
<template #header> <template #header>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
@ -72,7 +72,7 @@ export default {
</div> </div>
</template> </template>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar> </Drawer>
<Button icon="pi pi-plus" @click="visible = true" /> <Button icon="pi pi-plus" @click="visible = true" />
</div> </div>
</template> </template>

0
doc/sidebar/pt/PTImage.vue → doc/drawer/pt/PTImage.vue
View File

8
doc/chips/pt/index.vue → doc/drawer/pt/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="doc-main"> <div class="doc-main">
<div class="doc-intro"> <div class="doc-intro">
<h1>Chips Pass Through</h1> <h1>Drawer Pass Through</h1>
</div> </div>
<DocSections :docs="docs" /> <DocSections :docs="docs" />
</div> </div>
@ -23,10 +23,10 @@ export default {
component: PTImage component: PTImage
}, },
{ {
id: 'pt.doc.chips', id: 'pt.doc.drawer',
label: 'Chips PT Options', label: 'Drawer PT Options',
component: DocApiTable, component: DocApiTable,
data: getPTOption('Chips') data: getPTOption('Drawer')
} }
] ]
}; };

66
doc/drawer/theming/StyledDoc.vue Normal file
View File

@ -0,0 +1,66 @@
<template>
<DocSectionText v-bind="$attrs">
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-drawer</td>
<td>Container element</td>
</tr>
<tr>
<td>p-drawer-left</td>
<td>Container element of left drawer.</td>
</tr>
<tr>
<td>p-drawer-right</td>
<td>Container element of right drawer.</td>
</tr>
<tr>
<td>p-drawer-top</td>
<td>Container element of top drawer.</td>
</tr>
<tr>
<td>p-drawer-bottom</td>
<td>Container element of bottom drawer.</td>
</tr>
<tr>
<td>p-drawer-full</td>
<td>Container element of a full screen drawer.</td>
</tr>
<tr>
<td>p-drawer-visible</td>
<td>Container element when drawer is visible.</td>
</tr>
<tr>
<td>p-drawer-close</td>
<td>Close anchor element.</td>
</tr>
<tr>
<td>p-drawer-sm</td>
<td>Small sized drawer.</td>
</tr>
<tr>
<td>p-drawer-md</td>
<td>Medium sized drawer.</td>
</tr>
<tr>
<td>p-drawer-lg</td>
<td>Large sized drawer.</td>
</tr>
<tr>
<td>p-drawer-mask</td>
<td>Modal layer of the drawer.</td>
</tr>
</tbody>
</table>
</div>
</template>

0
doc/chips/theming/TailwindDoc.vue → doc/drawer/theming/TailwindDoc.vue
View File

2
doc/chips/theming/index.vue → doc/drawer/theming/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="doc-main"> <div class="doc-main">
<div class="doc-intro"> <div class="doc-intro">
<h1>Chips Theming</h1> <h1>Drawer Theming</h1>
</div> </div>
<DocSections :docs="docs" /> <DocSections :docs="docs" />
</div> </div>

6
doc/chips/AccessibilityDoc.vue → doc/inputchips/AccessibilityDoc.vue
View File

@ -73,12 +73,12 @@ export default {
code: { code: {
basic: ` basic: `
<label for="chips1">Tags</label> <label for="chips1">Tags</label>
<Chips inputId="chips1" /> <InputChips inputId="chips1" />
<span id="chips2">Tags</span> <span id="chips2">Tags</span>
<Chips aria-labelledby="chips2" /> <InputChips aria-labelledby="chips2" />
<Chips aria-label="Tags" /> <InputChips aria-label="Tags" />
` `
} }
}; };

10
doc/chips/BasicDoc.vue → doc/inputchips/BasicDoc.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Chips is used as a controlled input with <i>v-model</i> property where it should be an array.</p> <p>InputChips is used as a controlled input with <i>v-model</i> property where it should be an array.</p>
</DocSectionText> </DocSectionText>
<div class="card p-fluid"> <div class="card p-fluid">
<Chips v-model="value" /> <InputChips v-model="value" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
value: null, value: null,
code: { code: {
basic: ` basic: `
<Chips v-model="value" /> <InputChips v-model="value" />
`, `,
options: ` options: `
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<Chips v-model="value" /> <InputChips v-model="value" />
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<Chips v-model="value" /> <InputChips v-model="value" />
</div> </div>
</template> </template>

8
doc/chips/DisabledDoc.vue → doc/inputchips/DisabledDoc.vue
View File

@ -3,7 +3,7 @@
<p>When <i>disabled</i> is present, the element cannot be edited and focused.</p> <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
</DocSectionText> </DocSectionText>
<div class="card p-fluid"> <div class="card p-fluid">
<Chips v-model="value" disabled /> <InputChips v-model="value" disabled />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
value: null, value: null,
code: { code: {
basic: ` basic: `
<Chips v-model="value" disabled /> <InputChips v-model="value" disabled />
`, `,
options: ` options: `
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<Chips v-model="value" disabled /> <InputChips v-model="value" disabled />
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<Chips v-model="value" disabled /> <InputChips v-model="value" disabled />
</div> </div>
</template> </template>

8
doc/chips/FilledDoc.vue → doc/inputchips/FilledDoc.vue
View File

@ -3,7 +3,7 @@
<p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p> <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
</DocSectionText> </DocSectionText>
<div class="card p-fluid"> <div class="card p-fluid">
<Chips v-model="value" variant="filled" /> <InputChips v-model="value" variant="filled" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
value: null, value: null,
code: { code: {
basic: ` basic: `
<Chips v-model="value" variant="filled" /> <InputChips v-model="value" variant="filled" />
`, `,
options: ` options: `
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<Chips v-model="value" variant="filled" /> <InputChips v-model="value" variant="filled" />
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<Chips v-model="value" variant="filled" /> <InputChips v-model="value" variant="filled" />
</div> </div>
</template> </template>

16
doc/chips/FloatLabelDoc.vue → doc/inputchips/FloatLabelDoc.vue
View File

@ -4,8 +4,8 @@
</DocSectionText> </DocSectionText>
<div class="card p-fluid"> <div class="card p-fluid">
<FloatLabel> <FloatLabel>
<Chips id="chips" v-model="value" /> <InputChips id="chips" v-model="value" />
<label for="chips">Chips</label> <label for="chips">InputChips</label>
</FloatLabel> </FloatLabel>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -19,16 +19,16 @@ export default {
code: { code: {
basic: ` basic: `
<FloatLabel> <FloatLabel>
<Chips id="chips" v-model="value" /> <InputChips id="chips" v-model="value" />
<label for="chips">Chips</label> <label for="chips">InputChips</label>
</FloatLabel> </FloatLabel>
`, `,
options: ` options: `
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<FloatLabel> <FloatLabel>
<Chips id="chips" v-model="value" /> <InputChips id="chips" v-model="value" />
<label for="chips">Chips</label> <label for="chips">InputChips</label>
</FloatLabel> </FloatLabel>
</div> </div>
</template> </template>
@ -47,8 +47,8 @@ export default {
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<FloatLabel> <FloatLabel>
<Chips id="chips" v-model="value" /> <InputChips id="chips" v-model="value" />
<label for="chips">Chips</label> <label for="chips">InputChips</label>
</FloatLabel> </FloatLabel>
</div> </div>
</template> </template>

2
doc/inputswitch/ImportDoc.vue → doc/inputchips/ImportDoc.vue
View File

@ -9,7 +9,7 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
import InputSwitch from 'primevue/inputswitch'; import InputChips from 'primevue/inputchips';
` `
} }
}; };

8
doc/chips/InvalidDoc.vue → doc/inputchips/InvalidDoc.vue
View File

@ -3,7 +3,7 @@
<p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p> <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
</DocSectionText> </DocSectionText>
<div class="card p-fluid"> <div class="card p-fluid">
<Chips v-model="value" invalid /> <InputChips v-model="value" invalid />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
value: null, value: null,
code: { code: {
basic: ` basic: `
<Chips v-model="value" invalid /> <InputChips v-model="value" invalid />
`, `,
options: ` options: `
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<Chips v-model="value" invalid /> <InputChips v-model="value" invalid />
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<Chips v-model="value" invalid /> <InputChips v-model="value" invalid />
</div> </div>
</template> </template>

8
doc/chips/SeparatorDoc.vue → doc/inputchips/SeparatorDoc.vue
View File

@ -3,7 +3,7 @@
<p>A new chip is added when <i>enter</i> key is pressed, <i>separator</i> property allows definining an additional key. Currently only valid value is <i>,</i> to create a new item when comma key is pressed.</p> <p>A new chip is added when <i>enter</i> key is pressed, <i>separator</i> property allows definining an additional key. Currently only valid value is <i>,</i> to create a new item when comma key is pressed.</p>
</DocSectionText> </DocSectionText>
<div class="card p-fluid"> <div class="card p-fluid">
<Chips v-model="value" separator="," /> <InputChips v-model="value" separator="," />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
value: null, value: null,
code: { code: {
basic: ` basic: `
<Chips v-model="value" separator="," /> <InputChips v-model="value" separator="," />
`, `,
options: ` options: `
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<Chips v-model="value" separator="," /> <InputChips v-model="value" separator="," />
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<Chips v-model="value" separator="," /> <InputChips v-model="value" separator="," />
</div> </div>
</template> </template>

16
doc/chips/TemplateDoc.vue → doc/inputchips/TemplateDoc.vue
View File

@ -3,14 +3,14 @@
<p>Chip content is customized using <i>item</i> slot that receives a single chip value as a parameter.</p> <p>Chip content is customized using <i>item</i> slot that receives a single chip value as a parameter.</p>
</DocSectionText> </DocSectionText>
<div class="card p-fluid"> <div class="card p-fluid">
<Chips v-model="value"> <InputChips v-model="value">
<template #chip="slotProps"> <template #chip="slotProps">
<div> <div>
<span>{{ slotProps.value }} - (active) </span> <span>{{ slotProps.value }} - (active) </span>
<i class="pi pi-user-plus" style="font-size: 14px"></i> <i class="pi pi-user-plus" style="font-size: 14px"></i>
</div> </div>
</template> </template>
</Chips> </InputChips>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -22,26 +22,26 @@ export default {
value: null, value: null,
code: { code: {
basic: ` basic: `
<Chips v-model="value"> <InputChips v-model="value">
<template #chip="slotProps"> <template #chip="slotProps">
<div> <div>
<span>{{ slotProps.value }} - (active) </span> <span>{{ slotProps.value }} - (active) </span>
<i class="pi pi-user-plus" style="font-size: 14px"></i> <i class="pi pi-user-plus" style="font-size: 14px"></i>
</div> </div>
</template> </template>
</Chips> </InputChips>
`, `,
options: ` options: `
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<Chips v-model="value"> <InputChips v-model="value">
<template #chip="slotProps"> <template #chip="slotProps">
<div> <div>
<span>{{ slotProps.value }} - (active) </span> <span>{{ slotProps.value }} - (active) </span>
<i class="pi pi-user-plus" style="font-size: 14px"></i> <i class="pi pi-user-plus" style="font-size: 14px"></i>
</div> </div>
</template> </template>
</Chips> </InputChips>
</div> </div>
</template> </template>
@ -58,14 +58,14 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<Chips v-model="value"> <InputChips v-model="value">
<template #chip="slotProps"> <template #chip="slotProps">
<div> <div>
<span>{{ slotProps.value }} - (active) </span> <span>{{ slotProps.value }} - (active) </span>
<i class="pi pi-user-plus" style="font-size: 14px"></i> <i class="pi pi-user-plus" style="font-size: 14px"></i>
</div> </div>
</template> </template>
</Chips> </InputChips>
</div> </div>
</template> </template>

8
doc/chips/form/VeeValidateDoc.vue → doc/inputchips/form/VeeValidateDoc.vue
View File

@ -4,7 +4,7 @@
</DocSectionText> </DocSectionText>
<div class="card p-fluid"> <div class="card p-fluid">
<form @submit="onSubmit" class="flex flex-column gap-2"> <form @submit="onSubmit" class="flex flex-column gap-2">
<Chips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" /> <InputChips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
<small id="chips-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small> <small id="chips-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" class="w-7rem" /> <Button type="submit" label="Submit" class="w-7rem" />
</form> </form>
@ -46,7 +46,7 @@ export default {
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<form @submit="onSubmit" class="flex flex-column gap-2"> <form @submit="onSubmit" class="flex flex-column gap-2">
<Chips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" /> <InputChips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
<small class="p-error" id="chips-error">{{ errorMessage || '&nbsp;' }}</small> <small class="p-error" id="chips-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" class="w-7rem" /> <Button type="submit" label="Submit" class="w-7rem" />
</form> </form>
@ -58,7 +58,7 @@ export default {
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<form @submit="onSubmit" class="flex flex-column gap-2"> <form @submit="onSubmit" class="flex flex-column gap-2">
<Chips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" /> <InputChips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
<small class="p-error" id="chips-error">{{ errorMessage || '&nbsp;' }}</small> <small class="p-error" id="chips-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" class="w-7rem" /> <Button type="submit" label="Submit" class="w-7rem" />
</form> </form>
@ -100,7 +100,7 @@ export default {
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<form @submit="onSubmit" class="flex flex-column gap-2"> <form @submit="onSubmit" class="flex flex-column gap-2">
<Chips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" /> <InputChips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
<small class="p-error" id="chips-error">{{ errorMessage || '&nbsp;' }}</small> <small class="p-error" id="chips-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" class="w-7rem" /> <Button type="submit" label="Submit" class="w-7rem" />
</form> </form>

0
doc/chips/pt/PTImage.vue → doc/inputchips/pt/PTImage.vue
View File

35
doc/inputchips/pt/index.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>InputChips Pass Through</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
import PTImage from './PTImage.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
},
{
id: 'pt.doc.inputchips',
label: 'InputChips PT Options',
component: DocApiTable,
data: getPTOption('InputChips')
}
]
};
}
};
</script>

10
doc/chips/theming/StyledDoc.vue → doc/inputchips/theming/StyledDoc.vue
View File

@ -13,23 +13,23 @@
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-chips</td> <td>p-inputchips</td>
<td>Container element</td> <td>Container element</td>
</tr> </tr>
<tr> <tr>
<td>p-chips-token</td> <td>p-inputchips-token</td>
<td>Chip element container.</td> <td>Chip element container.</td>
</tr> </tr>
<tr> <tr>
<td>p-chips-token-icon</td> <td>p-inputchips-token-icon</td>
<td>Icon of a chip.</td> <td>Icon of a chip.</td>
</tr> </tr>
<tr> <tr>
<td>p-chips-token-label</td> <td>p-inputchips-token-label</td>
<td>label of a chip.</td> <td>label of a chip.</td>
</tr> </tr>
<tr> <tr>
<td>p-chips-input-token</td> <td>p-inputchips-input-token</td>
<td>Container of input element.</td> <td>Container of input element.</td>
</tr> </tr>
</tbody> </tbody>

0
doc/dropdown/theming/TailwindDoc.vue → doc/inputchips/theming/TailwindDoc.vue
View File

40
doc/inputchips/theming/index.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>InputChips Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import TailwindDoc from './TailwindDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'theming.styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'theming.unstyled',
label: 'Unstyled',
description: 'Theming is implemented with the pass through properties in unstyled mode.',
children: [
{
id: 'theming.tailwind',
label: 'Tailwind',
component: TailwindDoc
}
]
}
]
};
}
};
</script>

2
doc/inputotp/theming/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="doc-main"> <div class="doc-main">
<div class="doc-intro"> <div class="doc-intro">
<h1>InputSwitch Theming</h1> <h1>InputOtp Theming</h1>
</div> </div>
<DocSections :docs="docs" /> <DocSections :docs="docs" />
</div> </div>

35
doc/overlaypanel/pt/index.vue
View File

@ -1,35 +0,0 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>OverlayPanel Pass Through</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
import PTImage from './PTImage.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
},
{
id: 'pt.doc.overlaypanel',
label: 'OverlayPanel PT Options',
component: DocApiTable,
data: getPTOption('OverlayPanel')
}
]
};
}
};
</script>

40
doc/overlaypanel/theming/index.vue
View File

@ -1,40 +0,0 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>OverlayPanel Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import TailwindDoc from './TailwindDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'theming.styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'theming.unstyled',
label: 'Unstyled',
description: 'Theming is implemented with the pass through properties in unstyled mode.',
children: [
{
id: 'theming.tailwind',
label: 'Tailwind',
component: TailwindDoc
}
]
}
]
};
}
};
</script>

4
doc/paginator/AccessibilityDoc.vue
View File

@ -16,7 +16,7 @@
<p>Current page report uses <i>aria-live="polite"</i> to instruct screen reader about the changes to the pagination state.</p> <p>Current page report uses <i>aria-live="polite"</i> to instruct screen reader about the changes to the pagination state.</p>
<p> <p>
Rows per page dropdown internally uses a dropdown component, refer to the <NuxtLink to="/dropdown">dropdown</NuxtLink> documentation for accessibility details. Additionally, the dropdown uses an <i>aria-label</i> from the Rows per page dropdown internally uses a dropdown component, refer to the <NuxtLink to="/select">select</NuxtLink> documentation for accessibility details. Additionally, the dropdown uses an <i>aria-label</i> from the
<i>aria.rowsPerPageLabel</i> property of the <NuxtLink to="/configuration/#locale">locale</NuxtLink> API. <i>aria.rowsPerPageLabel</i> property of the <NuxtLink to="/configuration/#locale">locale</NuxtLink> API.
</p> </p>
@ -58,6 +58,6 @@
</div> </div>
<h3>Rows Per Page Dropdown Keyboard Support</h3> <h3>Rows Per Page Dropdown Keyboard Support</h3>
<p>Refer to the <NuxtLink to="/dropdown">dropdown</NuxtLink> documentation for more details about keyboard support.</p> <p>Refer to the <NuxtLink to="/select">select</NuxtLink> documentation for more details about keyboard support.</p>
</DocSectionText> </DocSectionText>
</template> </template>

8
doc/overlaypanel/AccessibilityDoc.vue → doc/popover/AccessibilityDoc.vue
View File

@ -2,12 +2,12 @@
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs"> <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
<h3>Screen Reader</h3> <h3>Screen Reader</h3>
<p> <p>
OverlayPanel component uses <i>dialog</i> role and since any attribute is passed to the root element you may define attributes like <i>aria-label</i> or <i>aria-labelledby</i> to describe the popup contents. In addition Popover component uses <i>dialog</i> role and since any attribute is passed to the root element you may define attributes like <i>aria-label</i> or <i>aria-labelledby</i> to describe the popup contents. In addition <i>aria-modal</i> is
<i>aria-modal</i> is added since focus is kept within the popup. added since focus is kept within the popup.
</p> </p>
<p>OverlayPanel adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the trigger and the popup is defined.</p> <p>Popover adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the trigger and the popup is defined.</p>
<h3>OverlayPanel Keyboard Support</h3> <h3>Popover Keyboard Support</h3>
<p>When the popup gets opened, the first focusable element receives the focus and this can be customized by adding <i>autofocus</i> to an element within the popup.</p> <p>When the popup gets opened, the first focusable element receives the focus and this can be customized by adding <i>autofocus</i> to an element within the popup.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">

26
doc/overlaypanel/BasicDoc.vue → doc/popover/BasicDoc.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>OverlayPanel is accessed via its ref and visibility is controlled using <i>toggle</i>, <i>show</i> and <i>hide</i> functions with an event of the target.</p> <p>Popover is accessed via its ref and visibility is controlled using <i>toggle</i>, <i>show</i> and <i>hide</i> functions with an event of the target.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button type="button" icon="pi pi-share-alt" label="Share" @click="toggle" /> <Button type="button" icon="pi pi-share-alt" label="Share" @click="toggle" />
<OverlayPanel ref="op"> <Popover ref="op">
<div class="flex flex-column gap-3 w-25rem"> <div class="flex flex-column gap-3 w-25rem">
<div> <div>
<span class="font-medium text-900 block mb-2">Share this document</span> <span class="font-medium text-900 block mb-2">Share this document</span>
@ -19,7 +19,7 @@
<div> <div>
<span class="font-medium text-900 block mb-2">Invite Member</span> <span class="font-medium text-900 block mb-2">Invite Member</span>
<InputGroup> <InputGroup>
<Chips disabled></Chips> <InputChips disabled></InputChips>
<Button label="Invite" icon="pi pi-users"></Button> <Button label="Invite" icon="pi pi-users"></Button>
</InputGroup> </InputGroup>
</div> </div>
@ -40,7 +40,7 @@
</ul> </ul>
</div> </div>
</div> </div>
</OverlayPanel> </Popover>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -58,7 +58,7 @@ export default {
basic: ` basic: `
<Button type="button" icon="pi pi-image" label="Image" @click="toggle" /> <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
<OverlayPanel ref="op"> <Popover ref="op">
<div class="flex flex-column gap-3 w-25rem"> <div class="flex flex-column gap-3 w-25rem">
<div> <div>
<span class="font-medium text-900 block mb-2">Share this document</span> <span class="font-medium text-900 block mb-2">Share this document</span>
@ -72,7 +72,7 @@ export default {
<div> <div>
<span class="font-medium text-900 block mb-2">Invite Member</span> <span class="font-medium text-900 block mb-2">Invite Member</span>
<InputGroup> <InputGroup>
<Chips disabled></Chips> <InputChips disabled></InputChips>
<Button label="Invite" icon="pi pi-users"></Button> <Button label="Invite" icon="pi pi-users"></Button>
</InputGroup> </InputGroup>
</div> </div>
@ -93,14 +93,14 @@ export default {
</ul> </ul>
</div> </div>
</div> </div>
</OverlayPanel> </Popover>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button type="button" icon="pi pi-image" label="Image" @click="toggle" /> <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
<OverlayPanel ref="op"> <Popover ref="op">
<div class="flex flex-column gap-3 w-25rem"> <div class="flex flex-column gap-3 w-25rem">
<div> <div>
<span class="font-medium text-900 block mb-2">Share this document</span> <span class="font-medium text-900 block mb-2">Share this document</span>
@ -114,7 +114,7 @@ export default {
<div> <div>
<span class="font-medium text-900 block mb-2">Invite Member</span> <span class="font-medium text-900 block mb-2">Invite Member</span>
<InputGroup> <InputGroup>
<Chips disabled></Chips> <InputChips disabled></InputChips>
<Button label="Invite" icon="pi pi-users"></Button> <Button label="Invite" icon="pi pi-users"></Button>
</InputGroup> </InputGroup>
</div> </div>
@ -135,7 +135,7 @@ export default {
</ul> </ul>
</div> </div>
</div> </div>
</OverlayPanel> </Popover>
</div> </div>
</template> </template>
@ -163,7 +163,7 @@ export default {
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button type="button" icon="pi pi-image" label="Image" @click="toggle" /> <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
<OverlayPanel ref="op"> <Popover ref="op">
<div class="flex flex-column gap-3 w-25rem"> <div class="flex flex-column gap-3 w-25rem">
<div> <div>
<span class="font-medium text-900 block mb-2">Share this document</span> <span class="font-medium text-900 block mb-2">Share this document</span>
@ -177,7 +177,7 @@ export default {
<div> <div>
<span class="font-medium text-900 block mb-2">Invite Member</span> <span class="font-medium text-900 block mb-2">Invite Member</span>
<InputGroup> <InputGroup>
<Chips disabled></Chips> <InputChips disabled></InputChips>
<Button label="Invite" icon="pi pi-users"></Button> <Button label="Invite" icon="pi pi-users"></Button>
</InputGroup> </InputGroup>
</div> </div>
@ -198,7 +198,7 @@ export default {
</ul> </ul>
</div> </div>
</div> </div>
</OverlayPanel> </Popover>
</div> </div>
</template> </template>

16
doc/overlaypanel/DataTableDoc.vue → doc/popover/DataTableDoc.vue
View File

@ -17,7 +17,7 @@
<span class="text-600">{{ selectedProduct.category }}</span> <span class="text-600">{{ selectedProduct.category }}</span>
</div> </div>
<OverlayPanel ref="op" appendTo="body"> <Popover ref="op" appendTo="body">
<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect"> <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
<Column field="name" header="Name" sortable style="min-width: 12rem"></Column> <Column field="name" header="Name" sortable style="min-width: 12rem"></Column>
<Column header="Image"> <Column header="Image">
@ -29,7 +29,7 @@
<template #body="slotProps"> $ {{ slotProps.data.price }} </template> <template #body="slotProps"> $ {{ slotProps.data.price }} </template>
</Column> </Column>
</DataTable> </DataTable>
</OverlayPanel> </Popover>
</div> </div>
<DocSectionCode :code="code" :service="['ProductService']" /> <DocSectionCode :code="code" :service="['ProductService']" />
</template> </template>
@ -57,7 +57,7 @@ export default {
<span class="text-600">{{ selectedProduct.category }}</span> <span class="text-600">{{ selectedProduct.category }}</span>
</div> </div>
<OverlayPanel ref="op" appendTo="body"> <Popover ref="op" appendTo="body">
<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect"> <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
<Column field="name" header="Name" sortable style="width: 50%"></Column> <Column field="name" header="Name" sortable style="width: 50%"></Column>
<Column header="Image" style="width: 20%"> <Column header="Image" style="width: 20%">
@ -71,7 +71,7 @@ export default {
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
</OverlayPanel> </Popover>
`, `,
options: ` options: `
<template> <template>
@ -90,7 +90,7 @@ export default {
<span class="text-600">{{ selectedProduct.category }}</span> <span class="text-600">{{ selectedProduct.category }}</span>
</div> </div>
<OverlayPanel ref="op" appendTo="body"> <Popover ref="op" appendTo="body">
<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect"> <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
<Column field="name" header="Name" sortable style="min-width: 12rem"></Column> <Column field="name" header="Name" sortable style="min-width: 12rem"></Column>
<Column header="Image"> <Column header="Image">
@ -104,7 +104,7 @@ export default {
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
</OverlayPanel> </Popover>
</div> </div>
</template> </template>
@ -152,7 +152,7 @@ export default {
<span class="text-600">{{ selectedProduct.category }}</span> <span class="text-600">{{ selectedProduct.category }}</span>
</div> </div>
<OverlayPanel ref="op" appendTo="body"> <Popover ref="op" appendTo="body">
<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect"> <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
<Column field="name" header="Name" sortable style="min-width: 12rem"></Column> <Column field="name" header="Name" sortable style="min-width: 12rem"></Column>
<Column header="Image"> <Column header="Image">
@ -166,7 +166,7 @@ export default {
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
</OverlayPanel> </Popover>
</div> </div>
</template> </template>

2
doc/sidebar/ImportDoc.vue → doc/popover/ImportDoc.vue
View File

@ -9,7 +9,7 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
import Sidebar from 'primevue/sidebar'; import Popover from 'primevue/popover';
` `
} }
}; };

0
doc/overlaypanel/pt/PTImage.vue → doc/popover/pt/PTImage.vue
View File

8
doc/sidebar/pt/index.vue → doc/popover/pt/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="doc-main"> <div class="doc-main">
<div class="doc-intro"> <div class="doc-intro">
<h1>Sidebar Pass Through</h1> <h1>Popover Pass Through</h1>
</div> </div>
<DocSections :docs="docs" /> <DocSections :docs="docs" />
</div> </div>
@ -23,10 +23,10 @@ export default {
component: PTImage component: PTImage
}, },
{ {
id: 'pt.doc.sidebar', id: 'pt.doc.popover',
label: 'Sidebar PT Options', label: 'Popover PT Options',
component: DocApiTable, component: DocApiTable,
data: getPTOption('Sidebar') data: getPTOption('Popover')
} }
] ]
}; };

6
doc/overlaypanel/theming/StyledDoc.vue → doc/popover/theming/StyledDoc.vue
View File

@ -13,15 +13,15 @@
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-overlaypanel</td> <td>p-popover</td>
<td>Container element.</td> <td>Container element.</td>
</tr> </tr>
<tr> <tr>
<td>p-overlaypanel-content</td> <td>p-popover-content</td>
<td>Content of the panel.</td> <td>Content of the panel.</td>
</tr> </tr>
<tr> <tr>
<td>p-overlaypanel-close</td> <td>p-popover-close</td>
<td>Close icon.</td> <td>Close icon.</td>
</tr> </tr>
</tbody> </tbody>

0
doc/inputswitch/theming/TailwindDoc.vue → doc/popover/theming/TailwindDoc.vue
View File

2
doc/sidebar/theming/index.vue → doc/popover/theming/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="doc-main"> <div class="doc-main">
<div class="doc-intro"> <div class="doc-intro">
<h1>Sidebar Theming</h1> <h1>Popover Theming</h1>
</div> </div>
<DocSections :docs="docs" /> <DocSections :docs="docs" />
</div> </div>

32
doc/dropdown/AccessibilityDoc.vue → doc/select/AccessibilityDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs"> <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
<h3>Screen Reader</h3> <h3>Screen Reader</h3>
<p> <p>
Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The dropdown element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. If the Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The select element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. If the
editable option is enabled <i>aria-autocomplete</i> is also added. The relation between the combobox and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used to instruct screen reader which editable option is enabled <i>aria-autocomplete</i> is also added. The relation between the combobox and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used to instruct screen reader which
option to read during keyboard navigation within the popup list. option to read during keyboard navigation within the popup list.
</p> </p>
@ -27,7 +27,7 @@
<tbody> <tbody>
<tr> <tr>
<td><i>tab</i></td> <td><i>tab</i></td>
<td>Moves focus to the dropdown element.</td> <td>Moves focus to the select element.</td>
</tr> </tr>
<tr> <tr>
<td><i>space</i></td> <td><i>space</i></td>
@ -47,7 +47,7 @@
</tr> </tr>
<tr> <tr>
<td><i>any printable character</i></td> <td><i>any printable character</i></td>
<td>Opens the popup and moves focus to the option whose label starts with the characters being typed, if there is none and dropdown is not editable then first option receives the focus.</td> <td>Opens the popup and moves focus to the option whose label starts with the characters being typed, if there is none and select is not editable then first option receives the focus.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -73,15 +73,15 @@
</tr> </tr>
<tr> <tr>
<td><i>enter</i></td> <td><i>enter</i></td>
<td>Selects the focused option and closes the popup, then moves focus to the dropdown element.</td> <td>Selects the focused option and closes the popup, then moves focus to the select element.</td>
</tr> </tr>
<tr> <tr>
<td><i>space</i></td> <td><i>space</i></td>
<td>Selects the focused option and closes the popup, then moves focus to the dropdown element.</td> <td>Selects the focused option and closes the popup, then moves focus to the select element.</td>
</tr> </tr>
<tr> <tr>
<td><i>escape</i></td> <td><i>escape</i></td>
<td>Closes the popup, then moves focus to the dropdown element.</td> <td>Closes the popup, then moves focus to the select element.</td>
</tr> </tr>
<tr> <tr>
<td><i>down arrow</i></td> <td><i>down arrow</i></td>
@ -93,23 +93,23 @@
</tr> </tr>
<tr> <tr>
<td><i>alt</i> + <i>up arrow</i></td> <td><i>alt</i> + <i>up arrow</i></td>
<td>Selects the focused option and closes the popup, then moves focus to the dropdown element.</td> <td>Selects the focused option and closes the popup, then moves focus to the select element.</td>
</tr> </tr>
<tr> <tr>
<td><i>left arrow</i></td> <td><i>left arrow</i></td>
<td>If the dropdown is editable, removes the visual focus from the current option and moves input cursor to one character left.</td> <td>If the select is editable, removes the visual focus from the current option and moves input cursor to one character left.</td>
</tr> </tr>
<tr> <tr>
<td><i>right arrow</i></td> <td><i>right arrow</i></td>
<td>If the dropdown is editable, removes the visual focus from the current option and moves input cursor to one character right.</td> <td>If the select is editable, removes the visual focus from the current option and moves input cursor to one character right.</td>
</tr> </tr>
<tr> <tr>
<td><i>home</i></td> <td><i>home</i></td>
<td>If the dropdown is editable, moves input cursor at the end, if not then moves focus to the first option.</td> <td>If the select is editable, moves input cursor at the end, if not then moves focus to the first option.</td>
</tr> </tr>
<tr> <tr>
<td><i>end</i></td> <td><i>end</i></td>
<td>If the dropdown is editable, moves input cursor at the beginning, if not then moves focus to the last option.</td> <td>If the select is editable, moves input cursor at the beginning, if not then moves focus to the last option.</td>
</tr> </tr>
<tr> <tr>
<td><i>pageUp</i></td> <td><i>pageUp</i></td>
@ -121,7 +121,7 @@
</tr> </tr>
<tr> <tr>
<td><i>any printable character</i></td> <td><i>any printable character</i></td>
<td>Moves focus to the option whose label starts with the characters being typed if dropdown is not editable.</td> <td>Moves focus to the option whose label starts with the characters being typed if select is not editable.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -163,11 +163,11 @@
</tr> </tr>
<tr> <tr>
<td><i>enter</i></td> <td><i>enter</i></td>
<td>Closes the popup and moves focus to the dropdown element.</td> <td>Closes the popup and moves focus to the select element.</td>
</tr> </tr>
<tr> <tr>
<td><i>escape</i></td> <td><i>escape</i></td>
<td>Closes the popup and moves focus to the dropdown element.</td> <td>Closes the popup and moves focus to the select element.</td>
</tr> </tr>
<tr> <tr>
<td><i>tab</i></td> <td><i>tab</i></td>
@ -186,9 +186,9 @@ export default {
code: { code: {
basic: ` basic: `
<span id="dd1"></span>Options</span> <span id="dd1"></span>Options</span>
<Dropdown aria-labelledby="dd1" /> <select aria-labelledby="dd1" />
<Dropdown aria-label="Options" /> <select aria-label="Options" />
` `
} }
}; };

12
doc/dropdown/BasicDoc.vue → doc/select/BasicDoc.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p> <p>
Dropdown is used as a controlled component with <i>v-model</i> property along with an <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively. Note Select is used as a controlled component with <i>v-model</i> property along with an <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively. Note that,
that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary. when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
</p> </p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" /> <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -25,12 +25,12 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" /> <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" /> <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
</div> </div>
</template> </template>
@ -54,7 +54,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" /> <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
</div> </div>
</template> </template>

8
doc/dropdown/CheckmarkDoc.vue → doc/select/CheckmarkDoc.vue
View File

@ -3,7 +3,7 @@
<p>An alternative way to highlight the selected option is displaying a checkmark instead.</p> <p>An alternative way to highlight the selected option is displaying a checkmark instead.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" /> <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -22,12 +22,12 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" /> <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" /> <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
</div> </div>
</template> </template>
@ -51,7 +51,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" /> <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
</div> </div>
</template> </template>

10
doc/dropdown/ClearIconDoc.vue → doc/select/ClearIconDoc.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>When <i>showClear</i> is enabled, a clear icon is added to reset the Dropdown.</p> <p>When <i>showClear</i> is enabled, a clear icon is added to reset the Select.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" /> <Select v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -22,12 +22,12 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<Dropdown v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" /> <Select v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" /> <Select v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
</div> </div>
</template> </template>
@ -51,7 +51,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" /> <Select v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
</div> </div>
</template> </template>

8
doc/dropdown/DisabledDoc.vue → doc/select/DisabledDoc.vue
View File

@ -3,7 +3,7 @@
<p>When <i>disabled</i> is present, the element cannot be edited and focused.</p> <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown disabled placeholder="Select a City" class="w-full md:w-14rem" /> <Select disabled placeholder="Select a City" class="w-full md:w-14rem" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -14,12 +14,12 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<Dropdown disabled placeholder="Select a City" class="w-full md:w-14rem" /> <Select disabled placeholder="Select a City" class="w-full md:w-14rem" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown disabled placeholder="Select a City" class="w-full md:w-14rem" /> <Select disabled placeholder="Select a City" class="w-full md:w-14rem" />
</div> </div>
</template> </template>
@ -30,7 +30,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown disabled placeholder="Select a City" class="w-full md:w-14rem" /> <Select disabled placeholder="Select a City" class="w-full md:w-14rem" />
</div> </div>
</template> </template>

8
doc/dropdown/EditableDoc.vue → doc/select/EditableDoc.vue
View File

@ -3,7 +3,7 @@
<p>When <i>editable</i> is present, the input can also be entered with typing.</p> <p>When <i>editable</i> is present, the input can also be entered with typing.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" /> <Select v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -22,12 +22,12 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<Dropdown v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" /> <Select v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" /> <Select v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
</div> </div>
</template> </template>
@ -51,7 +51,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" /> <Select v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
</div> </div>
</template> </template>

8
doc/dropdown/FilledDoc.vue → doc/select/FilledDoc.vue
View File

@ -3,7 +3,7 @@
<p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p> <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" /> <Select v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -22,12 +22,12 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<Dropdown v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" /> <Select v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" /> <Select v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
</div> </div>
</template> </template>
@ -51,7 +51,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" /> <Select v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
</div> </div>
</template> </template>

18
doc/dropdown/FilterDoc.vue → doc/select/FilterDoc.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Dropdown provides built-in filtering that is enabled by adding the <i>filter</i> property.</p> <p>Select provides built-in filtering that is enabled by adding the <i>filter</i> property.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem"> <Select v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
<template #value="slotProps"> <template #value="slotProps">
<div v-if="slotProps.value" class="flex align-items-center"> <div v-if="slotProps.value" class="flex align-items-center">
<img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.value.code.toLowerCase()}`" style="width: 18px" /> <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.value.code.toLowerCase()}`" style="width: 18px" />
@ -19,7 +19,7 @@
<div>{{ slotProps.option.name }}</div> <div>{{ slotProps.option.name }}</div>
</div> </div>
</template> </template>
</Dropdown> </Select>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -43,7 +43,7 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<Dropdown v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem"> <Select v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
<template #value="slotProps"> <template #value="slotProps">
<div v-if="slotProps.value" class="flex align-items-center"> <div v-if="slotProps.value" class="flex align-items-center">
<img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" /> <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
@ -59,12 +59,12 @@ export default {
<div>{{ slotProps.option.name }}</div> <div>{{ slotProps.option.name }}</div>
</div> </div>
</template> </template>
</Dropdown> </Select>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem"> <Select v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
<template #value="slotProps"> <template #value="slotProps">
<div v-if="slotProps.value" class="flex align-items-center"> <div v-if="slotProps.value" class="flex align-items-center">
<img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" /> <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
@ -80,7 +80,7 @@ export default {
<div>{{ slotProps.option.name }}</div> <div>{{ slotProps.option.name }}</div>
</div> </div>
</template> </template>
</Dropdown> </Select>
</div> </div>
</template> </template>
@ -109,7 +109,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem"> <Select v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
<template #value="slotProps"> <template #value="slotProps">
<div v-if="slotProps.value" class="flex align-items-center"> <div v-if="slotProps.value" class="flex align-items-center">
<img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" /> <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
@ -125,7 +125,7 @@ export default {
<div>{{ slotProps.option.name }}</div> <div>{{ slotProps.option.name }}</div>
</div> </div>
</template> </template>
</Dropdown> </Select>
</div> </div>
</template> </template>

8
doc/dropdown/FloatLabelDoc.vue → doc/select/FloatLabelDoc.vue
View File

@ -4,7 +4,7 @@
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<FloatLabel class="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" /> <Select 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>
</FloatLabel> </FloatLabel>
</div> </div>
@ -26,7 +26,7 @@ export default {
code: { code: {
basic: ` basic: `
<FloatLabel class="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" /> <Select 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>
</FloatLabel> </FloatLabel>
`, `,
@ -34,7 +34,7 @@ export default {
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<FloatLabel class="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" /> <Select 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>
</FloatLabel> </FloatLabel>
</div> </div>
@ -61,7 +61,7 @@ export default {
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<FloatLabel class="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" /> <Select 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>
</FloatLabel> </FloatLabel>
</div> </div>

16
doc/dropdown/GroupDoc.vue → doc/select/GroupDoc.vue
View File

@ -6,14 +6,14 @@
</p> </p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-14rem"> <Select v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-14rem">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="flex align-items-center"> <div class="flex align-items-center">
<img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.option.code.toLowerCase()}`" style="width: 18px" /> <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.option.code.toLowerCase()}`" style="width: 18px" />
<div>{{ slotProps.option.label }}</div> <div>{{ slotProps.option.label }}</div>
</div> </div>
</template> </template>
</Dropdown> </Select>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -57,26 +57,26 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<Dropdown v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-14rem"> <Select v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-14rem">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="flex align-items-center"> <div class="flex align-items-center">
<img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" /> <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
<div>{{ slotProps.option.label }}</div> <div>{{ slotProps.option.label }}</div>
</div> </div>
</template> </template>
</Dropdown> </Select>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-14rem"> <Select v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-14rem">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="flex align-items-center"> <div class="flex align-items-center">
<img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" /> <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
<div>{{ slotProps.option.label }}</div> <div>{{ slotProps.option.label }}</div>
</div> </div>
</template> </template>
</Dropdown> </Select>
</div> </div>
</template> </template>
@ -125,14 +125,14 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-14rem"> <Select v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-14rem">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="flex align-items-center"> <div class="flex align-items-center">
<img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" /> <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
<div>{{ slotProps.option.label }}</div> <div>{{ slotProps.option.label }}</div>
</div> </div>
</template> </template>
</Dropdown> </Select>
</div> </div>
</template> </template>

2
doc/dropdown/ImportDoc.vue → doc/select/ImportDoc.vue
View File

@ -9,7 +9,7 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
import Dropdown from 'primevue/dropdown'; import Select from 'primevue/select';
` `
} }
}; };

8
doc/dropdown/InvalidDoc.vue → doc/select/InvalidDoc.vue
View File

@ -3,7 +3,7 @@
<p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p> <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" /> <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -22,12 +22,12 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" /> <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" /> <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" />
</div> </div>
</template> </template>
@ -51,7 +51,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" /> <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" />
</div> </div>
</template> </template>

8
doc/dropdown/LazyVirtualScrollDoc.vue → doc/select/LazyVirtualScrollDoc.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown <Select
v-model="selectedItem" v-model="selectedItem"
:options="items" :options="items"
optionLabel="label" optionLabel="label"
@ -23,13 +23,13 @@ export default {
loading: false, loading: false,
code: { code: {
basic: ` basic: `
<Dropdown v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-14rem" <Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-14rem"
:virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" /> :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-14rem" <Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-14rem"
:virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" /> :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" />
</div> </div>
</template> </template>
@ -72,7 +72,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dropdown v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-14rem" <Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-14rem"
:virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" /> :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" />
</div> </div>
</template> </template>

Some files were not shown because too many files have changed in this diff Show More