Set version as 3.8.0
parent
a04c9c74ad
commit
82afb526a6
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "primevue",
|
"name": "primevue",
|
||||||
"version": "3.7.3-SNAPSHOT",
|
"version": "3.8.0",
|
||||||
"homepage": "https://www.primefaces.org/primevue",
|
"homepage": "https://www.primefaces.org/primevue",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "primevue",
|
"name": "primevue",
|
||||||
"version": "3.7.3-SNAPSHOT",
|
"version": "3.8.0",
|
||||||
"homepage": "https://www.primefaces.org/primevue",
|
"homepage": "https://www.primefaces.org/primevue",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="layout-footer">
|
<div class="layout-footer">
|
||||||
<div class="layout-footer-left">
|
<div class="layout-footer-left">
|
||||||
<span>PrimeVue 3.7.3 on Vue 3 by </span>
|
<span>PrimeVue 3.8.0 on Vue 3 by </span>
|
||||||
<a href="https://www.primetek.com.tr">PrimeTek</a>
|
<a href="https://www.primetek.com.tr">PrimeTek</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -1116,9 +1116,10 @@ export default {
|
||||||
so that the editing behavior is implemented by the page author whether it utilizes v-model or vuex.
|
so that the editing behavior is implemented by the page author whether it utilizes v-model or vuex.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>Individuals cell editing is configured by setting the <i>editMode</i> to "cell" and defining editors with the "editor" template. The content of the
|
<p>Individual cell editing is configured by setting the <i>editMode</i> to <b>cell</b>, defining editors with the <b>editor</b> template along with the <i>@cell-edit-complete</i> event. The content of the
|
||||||
editor defines how the editing is implemented, below example demonstrates two cases. In the first example, simple v-model editors are utilized. This is pretty straightforward in most cases.
|
editor defines how the editing is implemented. The editor template receives a clone of the row data and using <i>@cell-edit-complete</i> event the new value can be updated to the model or cancelled.
|
||||||
On the other hand, second example is more advanced to consider validations and ability to revert values with the escape key.</p>
|
This also provides flexibility to apply conditional logic such as implementing validations.</p>
|
||||||
|
|
||||||
<pre v-code><code><template v-pre>
|
<pre v-code><code><template v-pre>
|
||||||
<h5>Cell Editing</h5>
|
<h5>Cell Editing</h5>
|
||||||
<DataTable :value="cars" editMode="cell" @cell-edit-complete="onCellEditComplete">
|
<DataTable :value="cars" editMode="cell" @cell-edit-complete="onCellEditComplete">
|
||||||
|
@ -1216,7 +1217,8 @@ export default {
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<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
|
<p>Row Editing is specified by setting <i>cellEdit</i> as <b>row</b>, defining <i>editingRows</i> with the v-model directive to hold the reference of the editing rows,
|
||||||
|
adding a row editor column to provide the editing controls and implementing <i>@row-edit-save</i> to update the original row data. 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>
|
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>
|
<pre v-code><code><template v-pre>
|
||||||
<h3>Row Editing</h3>
|
<h3>Row Editing</h3>
|
||||||
|
@ -1224,17 +1226,17 @@ export default {
|
||||||
<Column field="vin" header="Vin"></Column>
|
<Column field="vin" header="Vin"></Column>
|
||||||
<Column field="year" header="Year">
|
<Column field="year" header="Year">
|
||||||
<template #editor="slotProps">
|
<template #editor="slotProps">
|
||||||
<InputText v-model="slotProps.data[slotProps.column.field]" autofocus/>
|
<InputText v-model="slotProps.data[slotProps.field]" autofocus/>
|
||||||
</template>
|
</template>
|
||||||
</Column>
|
</Column>
|
||||||
<Column field="brand" header="Brand">
|
<Column field="brand" header="Brand">
|
||||||
<template #editor="slotProps">
|
<template #editor="slotProps">
|
||||||
<InputText v-model="slotProps.data[slotProps.column.field]" />
|
<InputText v-model="slotProps.data[slotProps.field]" />
|
||||||
</template>
|
</template>
|
||||||
</Column>
|
</Column>
|
||||||
<Column field="color" header="Color">
|
<Column field="color" header="Color">
|
||||||
<template #editor="slotProps">
|
<template #editor="slotProps">
|
||||||
<InputText v-model="slotProps.data[slotProps.column.field]" />
|
<InputText v-model="slotProps.data[slotProps.field]" />
|
||||||
</template>
|
</template>
|
||||||
</Column>
|
</Column>
|
||||||
<Column :rowEditor="true" headerStyle="width:7rem" bodyStyle="text-align:center"></Column>
|
<Column :rowEditor="true" headerStyle="width:7rem" bodyStyle="text-align:center"></Column>
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
<p>PrimeVue is available at <a href="https://www.npmjs.com/package/primevue">npm</a>, if you have an existing application run the following commands to download PrimeVue and PrimeIcons to your project.</p>
|
<p>PrimeVue is available at <a href="https://www.npmjs.com/package/primevue">npm</a>, if you have an existing application run the following commands to download PrimeVue and PrimeIcons to your project.</p>
|
||||||
|
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
npm install primevue@^3.7.1 --save
|
npm install primevue@^3.8.0 --save
|
||||||
npm install primeicons --save
|
npm install primeicons --save
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
@ -87,12 +87,13 @@ import Dialog from 'primevue/dialog/sfc';
|
||||||
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet">
|
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet">
|
||||||
|
|
||||||
<script src="https://unpkg.com/vue@next"></script>
|
<script src="https://unpkg.com/vue@next"></script>
|
||||||
<script src="https://unpkg.com/primevue/inputtext/inputtext.min.js"></script>
|
<script src="https://unpkg.com/primevue/core/core.min.js"></script>
|
||||||
|
<script src="https://unpkg.com/primevue/slider/slider.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<p-inputtext v-model="val"></p-inputtext>
|
<p-slider v-model="val"></p-slider>
|
||||||
<h6>{{val}}</h6>
|
<h6>{{val}}</h6>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -108,11 +109,11 @@ import Dialog from 'primevue/dialog/sfc';
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
'p-inputtext': primevue.inputtext
|
'p-slider': primevue.slider
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
createApp(App).mount("#app");
|
createApp(App).use(primevue.config.default).mount("#app");
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in New Issue