Doc update to cover sync to v-model migration
Cagatay Civici
parent
3d2d2a7a0f
commit
7b7e80d2db
|
|
@ -158,7 +158,7 @@
|
|||
</template>
|
||||
</Toolbar>
|
||||
|
||||
<DataTable ref="dt" :value="products" :selection.sync="selectedProducts" dataKey="id"
|
||||
<DataTable ref="dt" :value="products" v-model:selection="selectedProducts" dataKey="id"
|
||||
:paginator="true" :rows="10" :filters="filters"
|
||||
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[5,10,25]"
|
||||
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products">
|
||||
|
|
@ -205,7 +205,7 @@
|
|||
</DataTable>
|
||||
</div>
|
||||
|
||||
<Dialog :visible.sync="productDialog" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid">
|
||||
<Dialog v-model:visible="productDialog" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid">
|
||||
<img :src="'demo/images/product/' + product.image" :alt="product.image" class="product-image" v-if="product.image" />
|
||||
<div class="p-field">
|
||||
<label for="name">Name</label>
|
||||
|
|
@ -255,7 +255,7 @@
|
|||
</template>
|
||||
</Dialog>
|
||||
|
||||
<Dialog :visible.sync="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
|
||||
<Dialog v-model:visible="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
|
||||
<div class="confirmation-content">
|
||||
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
|
||||
<span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
|
||||
|
|
@ -266,7 +266,7 @@
|
|||
</template>
|
||||
</Dialog>
|
||||
|
||||
<Dialog :visible.sync="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
|
||||
<Dialog v-model:visible="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
|
||||
<div class="confirmation-content">
|
||||
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
|
||||
<span v-if="product">Are you sure you want to delete the selected products?</span>
|
||||
|
|
|
|||
|
|
@ -459,7 +459,7 @@ export default {
|
|||
|
||||
<p>Paginator can also be programmed programmatically using a binding to the <i>first</i> property that defines the index of the
|
||||
first element to display. For example setting first to zero will reset the paginator to the very first page. This property
|
||||
also supports "sync" keyword in case you'd like your binding to be updated whenever the user changes the page.</p>
|
||||
also supports v-model in case you'd like your binding to be updated whenever the user changes the page.</p>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<DataTable :value="cars" :paginator="true" :rows="10" :first="firstRecordIndex">
|
||||
|
|
@ -499,7 +499,7 @@ export default {
|
|||
</code></pre>
|
||||
|
||||
<p>In case you'd like to display the table as sorted per a single column by default on mount or programmatically apply sort, use <i>sortField</i> and <i>sortOrder</i> properties. These
|
||||
two properties also support the "sync" keyword to get updated when the user applies sort a column.</p>
|
||||
two properties also support the v-model directive to get updated when the user applies sort a column.</p>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<DataTable :value="cars" sortField="year" :sortOrder="1">
|
||||
|
|
@ -619,7 +619,7 @@ methods: {
|
|||
</code></pre>
|
||||
|
||||
<h5>Selection</h5>
|
||||
<p>DataTable provides single and multiple selection modes on click of a row. Selected rows are bound to the <i>selection</i> property and updated using the sync keyword.
|
||||
<p>DataTable provides single and multiple selection modes on click of a row. Selected rows are bound to the <i>selection</i> property and updated using the v-model directive.
|
||||
Alternatively column based selection can be done using radio buttons or checkboxes using <i>selectionMode</i> of a particular column. In addition row-select and row-unselect
|
||||
events are provided as optional callbacks.</p>
|
||||
|
||||
|
|
@ -629,7 +629,7 @@ methods: {
|
|||
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<DataTable :value="cars" :selection.sync="selectedCar" selectionMode="single" dataKey="vin">
|
||||
<DataTable :value="cars" v-model:selection="selectedCar" selectionMode="single" dataKey="vin">
|
||||
<Column field="vin" header="Vin"></Column>
|
||||
<Column field="year" header="Year"></Column>
|
||||
<Column field="brand" header="Brand"></Column>
|
||||
|
|
@ -641,7 +641,7 @@ methods: {
|
|||
<p>In multiple mode, selection binding should be an array and multiple items can either be selected using metaKey or toggled individually depending on the value of <i>metaKeySelection</i> property value which is true by default. On touch enabled devices metaKeySelection is turned off automatically. Additionally ShiftKey is supported for range selection.</p>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<DataTable :value="cars" :selection.sync="selectedCars" selectionMode="multiple" dataKey="vin">
|
||||
<DataTable :value="cars" v-model:selection="selectedCars" selectionMode="multiple" dataKey="vin">
|
||||
<Column field="vin" header="Vin"></Column>
|
||||
<Column field="year" header="Year"></Column>
|
||||
<Column field="brand" header="Brand"></Column>
|
||||
|
|
@ -653,7 +653,7 @@ methods: {
|
|||
<p>If you prefer a radioButton or a checkbox instead of a row click, use the <i>selectionMode</i> of a column instead. Following datatable displays a checkbox at the first column of each row and automatically adds a header checkbox to toggle selection of all rows.</p>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<DataTable :value="cars" :selection.sync="selectedCars" selectionMode="multiple" dataKey="vin">
|
||||
<DataTable :value="cars" v-model:selection="selectedCars" selectionMode="multiple" dataKey="vin">
|
||||
<Column selectionMode="multiple"></Column>
|
||||
<Column field="vin" header="Vin"></Column>
|
||||
<Column field="year" header="Year"></Column>
|
||||
|
|
@ -681,7 +681,7 @@ methods: {
|
|||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<Button label="Show" icon="pi pi-external-link" @click="openDialog" />
|
||||
<Dialog header="Flex Scroll" :visible.sync="dialogVisible" :style="{width: '50vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}">
|
||||
<Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '50vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}">
|
||||
<DataTable :value="cars" :scrollable="true" scrollHeight="flex">
|
||||
<Column field="vin" header="Vin"></Column>
|
||||
<Column field="year" header="Year"></Column>
|
||||
|
|
@ -913,12 +913,12 @@ export default {
|
|||
</code></pre>
|
||||
|
||||
<h5>Row Expansion</h5>
|
||||
<p>Rows can be expanded to display additional content using the <i>expandedRows</i> property with the sync operator accompanied by a template named "expansion". <i>row-expand</i> and <i>row-collapse</i> are optional callbacks that are invoked when a row is expanded or toggled.</p>
|
||||
<p>Rows can be expanded to display additional content using the <i>expandedRows</i> property with the v-model directive accompanied by a template named "expansion". <i>row-expand</i> and <i>row-collapse</i> are optional callbacks that are invoked when a row is expanded or toggled.</p>
|
||||
|
||||
<p>The <i>dataKey</i> property identifies a unique value of a row in the dataset, it is not mandatory in row expansion functionality however being able to define it increases the performance of the table signifantly.</p>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<DataTable :value="cars" :expandedRows.sync="expandedRows" dataKey="vin"
|
||||
<DataTable :value="cars" v-model:expandedRows="expandedRows" dataKey="vin"
|
||||
@row-expand="onRowExpand" @row-collapse="onRowCollapse">
|
||||
<template #header>
|
||||
<div class="table-header-container">
|
||||
|
|
@ -1128,12 +1128,12 @@ export default {
|
|||
|
||||
</code></pre>
|
||||
|
||||
<p>Row Editing is defined by setting <i>cellEdit</i> as "row", defining <i>editingRows</i> with the sync operator to hold the reference to the editing rows and adding a row editor column to provide the editing controls. Note that
|
||||
<p>Row Editing is defined by setting <i>cellEdit</i> as "row", defining <i>editingRows</i> with the v-model directive to hold the reference to the editing rows and adding a row editor column to provide the editing controls. Note that
|
||||
since <i>editingRows</i> is two-way binding enabled, you may use it to initially display one or more rows in editing more or programmatically toggle row editing.</p>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<h3>Row Editing</h3>
|
||||
<DataTable :value="cars" editMode="row" dataKey="vin" :editingRows.sync="editingRows"
|
||||
<DataTable :value="cars" editMode="row" dataKey="vin" v-model:editingRows="editingRows"
|
||||
@row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel">
|
||||
<Column field="vin" header="Vin"></Column>
|
||||
<Column field="year" header="Year">
|
||||
|
|
@ -1300,7 +1300,7 @@ export default {
|
|||
<h3>Expandable Row Groups</h3>
|
||||
<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
|
||||
sortMode="single" sortField="brand" :sortOrder="1"
|
||||
:expandableRowGroups="true" :expandedRowGroups.sync="expandedRowGroups"
|
||||
:expandableRowGroups="true" v-model:expandedRowGroups="expandedRowGroups"
|
||||
@rowgroup-expand="onRowExpand" @rowgroup-collapse="onRowCollapse">
|
||||
<Column field="brand" header="Brand"></Column>
|
||||
<Column field="vin" header="Vin"></Column>
|
||||
|
|
@ -1427,9 +1427,9 @@ export default {
|
|||
</p>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters"
|
||||
<DataTable :value="cars" :paginator="true" :rows="10" v-model:filters="filters"
|
||||
stateStorage="session" stateKey="dt-state-demo-session"
|
||||
:selection.sync="selectedCar" selectionMode="single" dataKey="vin">
|
||||
v-model:selection="selectedCar" selectionMode="single" dataKey="vin">
|
||||
<template #header>
|
||||
<div style="text-align: right">
|
||||
<i class="pi pi-search" style="margin: 4px 4px 0px 0px;"></i>
|
||||
|
|
@ -1519,7 +1519,7 @@ export default {
|
|||
<p>DataTable provides exclusive integration with the ContextMenu component using, <i>contextMenu</i>, <i>contextMenuSelection</i> property along with the <i>row-contextmenu</i> event.</p>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<DataTable :value="cars" contextMenu :contextMenuSelection.sync="selectedCar" @row-contextmenu="onRowContextMenu">
|
||||
<DataTable :value="cars" contextMenu v-model:contextMenuSelection="selectedCar" @row-contextmenu="onRowContextMenu">
|
||||
<Column field="vin" header="Vin"></Column>
|
||||
<Column field="year" header="Year"></Column>
|
||||
<Column field="brand" header="Brand"></Column>
|
||||
|
|
@ -2467,7 +2467,7 @@ export default {
|
|||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<DataTable :value="customers" :paginator="true" class="p-datatable-customers" :rows="10"
|
||||
dataKey="id" :rowHover="true" :selection.sync="selectedCustomers" :filters="filters" :loading="loading"
|
||||
dataKey="id" :rowHover="true" v-model:selection="selectedCustomers" :filters="filters" :loading="loading"
|
||||
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"
|
||||
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries">
|
||||
<template #header>
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@
|
|||
<TabPanel header="Source">
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<DataTable :value="products" :expandedRows.sync="expandedRows" dataKey="id"
|
||||
<DataTable :value="products" v-model:expandedRows="expandedRows" dataKey="id"
|
||||
@row-expand="onRowExpand" @row-collapse="onRowCollapse">
|
||||
<template #header>
|
||||
<div class="table-header-container">
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@
|
|||
<p>Group customers by their representative.</p>
|
||||
<DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name"
|
||||
sortMode="single" sortField="representative.name" :sortOrder="1"
|
||||
:expandableRowGroups="true" :expandedRowGroups.sync="expandedRowGroups"
|
||||
:expandableRowGroups="true" v-model:expandedRowGroups="expandedRowGroups"
|
||||
@rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse">
|
||||
<Column field="representative.name" header="Representative"></Column>
|
||||
<Column field="name" header="Name"></Column>
|
||||
|
|
|
|||
|
|
@ -131,7 +131,7 @@
|
|||
<Button label="Show" icon="pi pi-external-link" @click="openDialog" />
|
||||
</div>
|
||||
|
||||
<Dialog header="Flex Scroll" :visible.sync="dialogVisible" :style="{width: '75vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}">
|
||||
<Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '75vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}">
|
||||
<DataTable :value="customers" :scrollable="true" scrollHeight="flex">
|
||||
<Column field="name" header="Name"></Column>
|
||||
<Column field="country.name" header="Country"></Column>
|
||||
|
|
|
|||
|
|
@ -134,8 +134,8 @@
|
|||
<code><template v-pre>
|
||||
<div class="card">
|
||||
<h5>Session Storage</h5>
|
||||
<DataTable :value="customers" :paginator="true" :rows="10" :filters.sync="filters1"
|
||||
:selection.sync="selectedCustomer1" selectionMode="single" dataKey="id"
|
||||
<DataTable :value="customers" :paginator="true" :rows="10" v-model:filters="filters1"
|
||||
v-model:selection="selectedCustomer1" selectionMode="single" dataKey="id"
|
||||
stateStorage="session" stateKey="dt-state-demo-session">
|
||||
<template #header>
|
||||
<span class="p-input-icon-left">
|
||||
|
|
@ -193,8 +193,8 @@
|
|||
|
||||
<div class="card">
|
||||
<h5>Local Storage</h5>
|
||||
<DataTable :value="customers" :paginator="true" :rows="10" :filters.sync="filters2"
|
||||
:selection.sync="selectedCustomer2" selectionMode="single" dataKey="id"
|
||||
<DataTable :value="customers" :paginator="true" :rows="10" v-model:filters="filters2"
|
||||
v-model:selection="selectedCustomer2" selectionMode="single" dataKey="id"
|
||||
stateStorage="session" stateKey="dt-state-demo-local">
|
||||
<template #header>
|
||||
<span class="p-input-icon-left">
|
||||
|
|
|
|||
|
|
@ -58,11 +58,11 @@ import Fieldset from 'primevue/fieldset';
|
|||
|
||||
</code></pre>
|
||||
|
||||
<p>Use the sync operator to enable two-way binding.</p>
|
||||
<p>Use the v-model directive to enable two-way binding.</p>
|
||||
<pre v-code>
|
||||
<code>
|
||||
<button type="button" @click="isCollapsed = !isCollapsed">Toggle Programmatically</button>
|
||||
<Fieldset legend="Header Text" :toggleable="true" :collapsed.sync="isCollapsed">
|
||||
<Fieldset legend="Header Text" :toggleable="true" v-model:collapsed="isCollapsed">
|
||||
Content
|
||||
</Fieldset>
|
||||
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
<TabPanel header="Source">
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<Galleria ref="galleria" :value="images" :activeIndex.sync="activeIndex" :numVisible="5" style="max-width: 640px;" :class="galleriaClass"
|
||||
<Galleria ref="galleria" :value="images" v-model:activeIndex="activeIndex" :numVisible="5" style="max-width: 640px;" :class="galleriaClass"
|
||||
:showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true"
|
||||
:circular="true" :autoPlay="true" :transitionInterval="3000">
|
||||
<template #item="slotProps">
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
<code><template v-pre>
|
||||
<h3>With Thumbnails</h3>
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%"
|
||||
:circular="true" :fullScreen="true" :showItemNavigators="true" :visible.sync="displayBasic">
|
||||
:circular="true" :fullScreen="true" :showItemNavigators="true" v-model:visible="displayBasic">
|
||||
<template #item="slotProps">
|
||||
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
|
||||
<h3>Without Thumbnails</h3>
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
|
||||
:circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayBasic2">
|
||||
:circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" v-model:visible="displayBasic2">
|
||||
<template #item="slotProps">
|
||||
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
|
|
@ -90,8 +90,8 @@
|
|||
<Button label="Show" icon="pi pi-external-link" @click="displayBasic2 = true" />
|
||||
|
||||
<h3>Custom Content</h3>
|
||||
<Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
|
||||
:circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayCustom">
|
||||
<Galleria :value="images" v-model:activeIndex="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
|
||||
:circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" v-model:visible="displayCustom">
|
||||
<template #item="slotProps">
|
||||
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
<Button icon="pi pi-plus" @click="next" class="p-button-secondary" style="margin-left: .5rem" />
|
||||
</div>
|
||||
|
||||
<Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
|
||||
<Galleria :value="images" v-model:activeIndex="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
|
||||
<template #item="slotProps">
|
||||
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -191,11 +191,11 @@ export default {
|
|||
</code></pre>
|
||||
|
||||
<h5>Selection</h5>
|
||||
<p>Selection is enabled by defining the <i>selectionMode</i> to either "single" or "multiple" and specifying the <i>selectionKeys</i> with the sync operator. Note that
|
||||
<p>Selection is enabled by defining the <i>selectionMode</i> to either "single" or "multiple" and specifying the <i>selectionKeys</i> with the v-model directive. Note that
|
||||
selection on a particular node can be disabled if the <i>selectable</i> is false on the node instance.</p>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<OrganizationChart :value="data" selecionMode="single" :selectionKeys.sync="selectionKeys">
|
||||
<OrganizationChart :value="data" selecionMode="single" v-model:selectionKeys="selectionKeys">
|
||||
<template #default="slotProps">
|
||||
<span>{{slotProps.node.data.label}}</span>
|
||||
</template>
|
||||
|
|
@ -496,7 +496,7 @@ export default {
|
|||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<h3>Advanced</h3>
|
||||
<OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" :selectionKeys.sync="selection"
|
||||
<OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" v-model:selectionKeys="selection"
|
||||
@node-select="onNodeSelect" @node-unselect="onNodeUnselect" @node-collapse="onNodeCollapse" @node-expand="onNodeExpand">
|
||||
<template #person="slotProps">
|
||||
<div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div>
|
||||
|
|
|
|||
|
|
@ -163,7 +163,7 @@ toggle(event) {
|
|||
<Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />
|
||||
|
||||
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px">
|
||||
<DataTable :value="products" :selection.sync="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
|
||||
<DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
|
||||
<Column field="name" header="Name" sortable></Column>
|
||||
<Column header="Image">
|
||||
<template #body="slotProps">
|
||||
|
|
|
|||
|
|
@ -26,10 +26,10 @@ import Paginator from 'primevue/paginator';
|
|||
|
||||
</code></pre>
|
||||
|
||||
<p>Use the sync operator to enable two-way binding, this is useful in cases where you need to programmatically control the paginator.</p>
|
||||
<p>Use the v-model directive to enable two-way binding, this is useful in cases where you need to programmatically control the paginator.</p>
|
||||
<pre v-code>
|
||||
<code>
|
||||
<Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount"></Paginator>
|
||||
<Paginator v-model:first="offset" :rows="10" :totalRecords="totalItemsCount"></Paginator>
|
||||
|
||||
</code></pre>
|
||||
|
||||
|
|
@ -37,15 +37,15 @@ import Paginator from 'primevue/paginator';
|
|||
<p>Number of items per page can be changed by the user using a dropdown with the <i>rowsPerPageOptions</i> property which accepts an array of possible values.</p>
|
||||
<pre v-code>
|
||||
<code>
|
||||
<Paginator :first.sync="offset" :rows="rows" :totalRecords="totalItemsCount" :rowsPerPageOptions="[10,20,30]"></Paginator>
|
||||
<Paginator v-model:first="offset" :rows="rows" :totalRecords="totalItemsCount" :rowsPerPageOptions="[10,20,30]"></Paginator>
|
||||
|
||||
</code></pre>
|
||||
|
||||
<p>As <i>rows</i> also change when the dropdown changes, use the optional sync operator if you need two-way binding.</p>
|
||||
<p>As <i>rows</i> also change when the dropdown changes, use the optional v-model directive if you need two-way binding.</p>
|
||||
|
||||
<pre v-code>
|
||||
<code>
|
||||
<Paginator :first.sync="offset" :rows.sync="rows" :totalRecords="totalItemsCount" :rowsPerPageOptions="[10,20,30]"></Paginator>
|
||||
<Paginator v-model:first="offset" v-model:rows="rows" :totalRecords="totalItemsCount" :rowsPerPageOptions="[10,20,30]"></Paginator>
|
||||
|
||||
</code></pre>
|
||||
|
||||
|
|
@ -83,7 +83,7 @@ import Paginator from 'primevue/paginator';
|
|||
</p>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount">
|
||||
<Paginator v-model:first="offset" :rows="10" :totalRecords="totalItemsCount">
|
||||
<template #left="slotProps">
|
||||
Page: {{slotProps.state.page}}
|
||||
First: {{slotProps.state.first}}
|
||||
|
|
@ -266,7 +266,7 @@ onPage(event) {
|
|||
<Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
|
||||
|
||||
<h3>Custom</h3>
|
||||
<Paginator :first.sync="first" :rows="1" :totalRecords="totalRecords2"
|
||||
<Paginator v-model:first="first" :rows="1" :totalRecords="totalRecords2"
|
||||
template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
|
||||
<template #left>
|
||||
<Button type="button" icon="pi pi-refresh" @click="reset()"/>
|
||||
|
|
|
|||
|
|
@ -57,12 +57,12 @@ import Panel from 'primevue/panel';
|
|||
|
||||
</code></pre>
|
||||
|
||||
<p>Use the sync operator to enable two-way binding.</p>
|
||||
<p>Use the v-model directive to enable two-way binding.</p>
|
||||
|
||||
<pre v-code>
|
||||
<code>
|
||||
<button type="button" @click="isCollapsed = !isCollapsed">Toggle Programmatically</button>
|
||||
<Panel header="Header Text" :toggleable="true" :collapsed.sync="isCollapsed">
|
||||
<Panel header="Header Text" :toggleable="true" v-model:collapsed="isCollapsed">
|
||||
Content
|
||||
</Panel>
|
||||
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ import TabPanel from 'primevue/tabpanel';
|
|||
</code></pre>
|
||||
|
||||
<h5>Programmatic Control</h5>
|
||||
<p>Tabs can be controlled programmatically using active property that defines the active tab.</p>
|
||||
<p>Tabs can be controlled programmatically using <i>activeIndex</i> property.</p>
|
||||
<pre v-code>
|
||||
<code>
|
||||
<Button @click="active = 0" class="p-button-text" label="Activate 1st" />
|
||||
|
|
@ -113,13 +113,13 @@ import TabPanel from 'primevue/tabpanel';
|
|||
<Button @click="active = 2" class="p-button-text" label="Activate 3rd" />
|
||||
|
||||
<TabView v-model:activeIndex="active">
|
||||
<TabPanel header="Header I" :active.sync="active[0]">
|
||||
<TabPanel header="Header I">
|
||||
Content I
|
||||
</TabPanel>
|
||||
<TabPanel header="Header II" :active.sync="active[1]">
|
||||
<TabPanel header="Header II">
|
||||
Content II
|
||||
</TabPanel>
|
||||
<TabPanel header="Header III" :active.sync="active[2]">
|
||||
<TabPanel header="Header III">
|
||||
Content III
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
|
|
|
|||
|
|
@ -192,7 +192,7 @@ export default class NodeService {
|
|||
|
||||
<h5>Programmatic Control</h5>
|
||||
<p>Tree state can be controlled programmatically with the <i>expandedKeys</i> property that defines the keys
|
||||
that are expanded. This property is a Map instance whose key is the key of a node and value is a boolean. Note that <i>expandedKeys</i> also supports two-way binding with the sync modifier.
|
||||
that are expanded. This property is a Map instance whose key is the key of a node and value is a boolean. Note that <i>expandedKeys</i> also supports two-way binding with the v-model directive.
|
||||
</p>
|
||||
|
||||
<p>Example below expands and collapses all nodes with buttons.</p>
|
||||
|
|
@ -276,7 +276,7 @@ export default {
|
|||
</code></pre>
|
||||
|
||||
<h5>Selection</h5>
|
||||
<p>Tree supports <b>single</b>, <b>multiple</b> and <b>checkbox</b> selection modes. Define the <i>selectionKeys</i> with the sync operator and the <i>selectionMode</i> properties to enable the selection.
|
||||
<p>Tree supports <b>single</b>, <b>multiple</b> and <b>checkbox</b> selection modes. Define the <i>selectionKeys</i> with the v-model directive and the <i>selectionMode</i> properties to enable the selection.
|
||||
By default in multiple selection mode, metaKey is necessary to add to existing selections however this can be configured with <i>metaKeySelection</i> property. Note that
|
||||
in touch enabled devices, Tree does not require metaKey. In addition selection on a particular node can be disabled if the <i>selectable</i> is false on the node instance.</p>
|
||||
|
||||
|
|
@ -285,19 +285,19 @@ export default {
|
|||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<h3>Single Selection</h3>
|
||||
<Tree :value="nodes" selectionMode="single" :selectionKeys.sync="selectedKey1"></Tree>
|
||||
<Tree :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey1"></Tree>
|
||||
|
||||
<h3>Multiple Selection with MetaKey</h3>
|
||||
<Tree :value="nodes" selectionMode="multiple" :selectionKeys.sync="selectedKeys1"></Tree>
|
||||
<Tree :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys1"></Tree>
|
||||
|
||||
<h3>Multiple Selection without MetaKey</h3>
|
||||
<Tree :value="nodes" selectionMode="multiple" :selectionKeys.sync="selectedKeys2" :metaKeySelection="false"></Tree>
|
||||
<Tree :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys2" :metaKeySelection="false"></Tree>
|
||||
|
||||
<h3>Checkbox Selection</h3>
|
||||
<Tree :value="nodes" selectionMode="checkbox" :selectionKeys.sync="selectedKeys3"></Tree>
|
||||
<Tree :value="nodes" selectionMode="checkbox" v-model:selectionKeys="selectedKeys3"></Tree>
|
||||
|
||||
<h3>Events</h3>
|
||||
<Tree :value="nodes" selectionMode="single" :selectionKeys.sync="selectedKey2" :metaKeySelection="false"
|
||||
<Tree :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey2" :metaKeySelection="false"
|
||||
@node-select="onNodeSelect" @node-unselect="onNodeUnselect"></Tree>
|
||||
</template>
|
||||
</code></pre>
|
||||
|
|
|
|||
|
|
@ -33,19 +33,19 @@
|
|||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<h3>Single Selection</h3>
|
||||
<Tree :value="nodes" selectionMode="single" :selectionKeys.sync="selectedKey1"></Tree>
|
||||
<Tree :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey1"></Tree>
|
||||
|
||||
<h3>Multiple Selection with MetaKey</h3>
|
||||
<Tree :value="nodes" selectionMode="multiple" :selectionKeys.sync="selectedKeys1"></Tree>
|
||||
<Tree :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys1"></Tree>
|
||||
|
||||
<h3>Multiple Selection without MetaKey</h3>
|
||||
<Tree :value="nodes" selectionMode="multiple" :selectionKeys.sync="selectedKeys2" :metaKeySelection="false"></Tree>
|
||||
<Tree :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys2" :metaKeySelection="false"></Tree>
|
||||
|
||||
<h3>Checkbox Selection</h3>
|
||||
<Tree :value="nodes" selectionMode="checkbox" :selectionKeys.sync="selectedKeys3"></Tree>
|
||||
<Tree :value="nodes" selectionMode="checkbox" v-model:selectionKeys="selectedKeys3"></Tree>
|
||||
|
||||
<h3>Events</h3>
|
||||
<Tree :value="nodes" selectionMode="single" :selectionKeys.sync="selectedKey2" :metaKeySelection="false"
|
||||
<Tree :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey2" :metaKeySelection="false"
|
||||
@node-select="onNodeSelect" @node-unselect="onNodeUnselect"></Tree>
|
||||
</template>
|
||||
</code></pre>
|
||||
|
|
|
|||
|
|
@ -633,7 +633,7 @@ export default {
|
|||
|
||||
<h5>Programmatic Control</h5>
|
||||
<p>Tree state can be controlled programmatically with the <i>expandedKeys</i> property that defines the keys
|
||||
that are expanded. This property is a Map instance whose key is the key of a node and value is a boolean. Note that <i>expandedKeys</i> also supports two-way binding with the sync modifier.
|
||||
that are expanded. This property is a Map instance whose key is the key of a node and value is a boolean. Note that <i>expandedKeys</i> also supports two-way binding with the v-model directive.
|
||||
</p>
|
||||
|
||||
<p>Example below expands and collapses all nodes with buttons.</p>
|
||||
|
|
@ -821,7 +821,7 @@ export default {
|
|||
|
||||
<p>Paginator can also be programmed programmatically using a binding to the <i>first</i> property that defines the index of the
|
||||
first element to display. For example setting first to zero will reset the paginator to the very first page. This property
|
||||
also supports "sync" keyword in case you'd like your binding to be updated whenever the user changes the page.</p>
|
||||
also supports the v-model directive in case you'd like your binding to be updated whenever the user changes the page.</p>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<TreeTable :value="nodes" :paginator="true" :rows="10" :first="firstRecordIndex">
|
||||
|
|
@ -858,7 +858,7 @@ export default {
|
|||
</code></pre>
|
||||
|
||||
<p>In case you'd like to display the table as sorted per a single column by default on mount or programmatically apply sort, use <i>sortField</i> and <i>sortOrder</i> properties. These
|
||||
two properties also support the "sync" keyword to get updated when the user applies sort a column.</p>
|
||||
two properties also support the v-model directive to get updated when the user applies sort a column.</p>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<TreeTable :value="nodes" sortField="size" :sortOrder="1"">
|
||||
|
|
@ -959,7 +959,7 @@ export default {
|
|||
</code></pre>
|
||||
|
||||
<h5>Selection</h5>
|
||||
<p>Tree supports <b>single</b>, <b>multiple</b> and <b>checkbox</b> selection modes. Define the <i>selectionKeys</i> with the sync operator and the <i>selectionMode</i> properties to enable the selection.
|
||||
<p>Tree supports <b>single</b>, <b>multiple</b> and <b>checkbox</b> selection modes. Define the <i>selectionKeys</i> with the v-model operator and the <i>selectionMode</i> properties to enable the selection.
|
||||
By default in multiple selection mode, metaKey is necessary to add to existing selections however this can be configured with <i>metaKeySelection</i> property. Note that
|
||||
in touch enabled devices, Tree does not require metaKey. In addition selection on a particular node can be disabled if the <i>selectable</i> is false on the node instance.</p>
|
||||
|
||||
|
|
@ -967,28 +967,28 @@ export default {
|
|||
in "checkbox" mode, instead of a boolean, value should be an object that has "checked" and "partialChecked" properties to represent the checked state of a node.</p>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<TreeTable :value="nodes" selectionMode="multiple" :selectionKeys.sync="selectedKeys1">
|
||||
<TreeTable :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys1">
|
||||
<Column field="name" header="Name" :expander="true"></Column>
|
||||
<Column field="size" header="Size"></Column>
|
||||
<Column field="type" header="Type"></Column>
|
||||
</TreeTable>
|
||||
|
||||
<h3>Multiple Selection without MetaKey</h3>
|
||||
<TreeTable :value="nodes" selectionMode="multiple" :selectionKeys.sync="selectedKeys2" :metaKeySelection="false">
|
||||
<TreeTable :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys2" :metaKeySelection="false">
|
||||
<Column field="name" header="Name" :expander="true"></Column>
|
||||
<Column field="size" header="Size"></Column>
|
||||
<Column field="type" header="Type"></Column>
|
||||
</TreeTable>
|
||||
|
||||
<h3>Checkbox Selection</h3>
|
||||
<TreeTable :value="nodes" selectionMode="checkbox" :selectionKeys.sync="selectedKeys3">
|
||||
<TreeTable :value="nodes" selectionMode="checkbox" v-model:selectionKeys="selectedKeys3">
|
||||
<Column field="name" header="Name" :expander="true"></Column>
|
||||
<Column field="size" header="Size"></Column>
|
||||
<Column field="type" header="Type"></Column>
|
||||
</TreeTable>
|
||||
|
||||
<h3>Events</h3>
|
||||
<TreeTable :value="nodes" selectionMode="single" :selectionKeys.sync="selectedKey2"
|
||||
<TreeTable :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey2"
|
||||
@node-select="onNodeSelect" @node-unselect="onNodeUnselect">
|
||||
<Column field="name" header="Name" :expander="true"></Column>
|
||||
<Column field="size" header="Size"></Column>
|
||||
|
|
|
|||
|
|
@ -61,35 +61,35 @@
|
|||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<h3>Single Selection</h3>
|
||||
<TreeTable :value="nodes" selectionMode="single" :selectionKeys.sync="selectedKey1">
|
||||
<TreeTable :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey1">
|
||||
<Column field="name" header="Name" :expander="true"></Column>
|
||||
<Column field="size" header="Size"></Column>
|
||||
<Column field="type" header="Type"></Column>
|
||||
</TreeTable>
|
||||
|
||||
<h3>Multiple Selection with MetaKey</h3>
|
||||
<TreeTable :value="nodes" selectionMode="multiple" :selectionKeys.sync="selectedKeys1">
|
||||
<TreeTable :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys1">
|
||||
<Column field="name" header="Name" :expander="true"></Column>
|
||||
<Column field="size" header="Size"></Column>
|
||||
<Column field="type" header="Type"></Column>
|
||||
</TreeTable>
|
||||
|
||||
<h3>Multiple Selection without MetaKey</h3>
|
||||
<TreeTable :value="nodes" selectionMode="multiple" :selectionKeys.sync="selectedKeys2" :metaKeySelection="false">
|
||||
<TreeTable :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys2" :metaKeySelection="false">
|
||||
<Column field="name" header="Name" :expander="true"></Column>
|
||||
<Column field="size" header="Size"></Column>
|
||||
<Column field="type" header="Type"></Column>
|
||||
</TreeTable>
|
||||
|
||||
<h3>Checkbox Selection</h3>
|
||||
<TreeTable :value="nodes" selectionMode="checkbox" :selectionKeys.sync="selectedKeys3">
|
||||
<TreeTable :value="nodes" selectionMode="checkbox" v-model:selectionKeys="selectedKeys3">
|
||||
<Column field="name" header="Name" :expander="true"></Column>
|
||||
<Column field="size" header="Size"></Column>
|
||||
<Column field="type" header="Type"></Column>
|
||||
</TreeTable>
|
||||
|
||||
<h3>Events</h3>
|
||||
<TreeTable :value="nodes" selectionMode="single" :selectionKeys.sync="selectedKey2"
|
||||
<TreeTable :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey2"
|
||||
@node-select="onNodeSelect" @node-unselect="onNodeUnselect">
|
||||
<Column field="name" header="Name" :expander="true"></Column>
|
||||
<Column field="size" header="Size"></Column>
|
||||
|
|
|
|||
Loading…
Reference in New Issue