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

Merge branch 'master' of https://github.com/primefaces/primevue

pull/4704/head
Cagatay Civici 2023-10-26 12:37:24 +03:00
parent 51446f2a8b 657446007e
commit 886e34f47f
10 changed files with 220 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
api-generator/build-apidoc.js
View File

@ -358,6 +358,10 @@ if (project) {
.map((s) => {
if (s.text.indexOf('[here]') > -1) {
return `${s.text.slice(0, s.text.indexOf('[here]'))} <a target="_blank" href="${s.text.slice(s.text.indexOf('(') + 1, s.text.indexOf(')'))}">here</a> ${s.text.slice(s.text.indexOf(')') + 1)}`;
} else if (s.text.indexOf('[MDN Reference]') > -1) {
return `${s.text.slice(0, s.text.indexOf('[MDN Reference]'))} <a target="_blank" href="${s.text.slice(s.text.indexOf('(') + 1, s.text.indexOf(')'))}">MDN Reference</a> ${s.text.slice(
s.text.indexOf(')') + 1
)}`;
}
return s.text || '';

2
components/lib/scrollpanel/ScrollPanel.vue
View File

@ -103,6 +103,7 @@ export default {
}
},
moveBar() {
if (this.$refs.content) {
/* horizontal scroll */
let totalWidth = this.$refs.content.scrollWidth;
let ownWidth = this.$refs.content.clientWidth;
@ -136,6 +137,7 @@ export default {
this.$refs.yBar.style.cssText = 'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
}
});
}
},
onYBarMouseDown(e) {
this.isYBarClicked = true;

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

@ -882,7 +882,7 @@
"readonly": false,
"type": "null | Element | Document",
"default": "",
"description": "Specifies the `root` option of the IntersectionObserver API\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/root)"
"description": "Specifies the `root` option of the IntersectionObserver API\n <a target=\"_blank\" href=\"https://developer.mozilla.org/docs/Web/API/IntersectionObserver/root\">MDN Reference</a> "
},
{
"name": "rootMargin",
@ -890,7 +890,7 @@
"readonly": false,
"type": "string",
"default": "",
"description": "Specifies the `rootMargin` option of the IntersectionObserver API\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/rootMargin)"
"description": "Specifies the `rootMargin` option of the IntersectionObserver API\n <a target=\"_blank\" href=\"https://developer.mozilla.org/docs/Web/API/IntersectionObserver/rootMargin\">MDN Reference</a> "
},
{
"name": "threshold",
@ -898,7 +898,7 @@
"readonly": false,
"type": "readonly number[]",
"default": "",
"description": "Specifies the `threshold` option of the IntersectionObserver API\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/thresholds)"
"description": "Specifies the `threshold` option of the IntersectionObserver API\n <a target=\"_blank\" href=\"https://developer.mozilla.org/docs/Web/API/IntersectionObserver/thresholds\">MDN Reference</a> "
},
{
"name": "animateOnLoad",

15
doc/datatable/edit/CellEditDoc.vue
View File

@ -49,10 +49,7 @@ export default {
],
code: {
basic: `
<DataTable
:value="products"
editMode="cell"
@cell-edit-complete="onCellEditComplete"
<DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete"
:pt="{
table: { style: 'min-width: 50rem' },
column: {
@ -80,10 +77,7 @@ export default {
options: `
<template>
<div class="card p-fluid">
<DataTable
:value="products"
editMode="cell"
@cell-edit-complete="onCellEditComplete"
<DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete"
:pt="{
table: { style: 'min-width: 50rem' },
column: {
@ -169,10 +163,7 @@ export default {
composition: `
<template>
<div class="card p-fluid">
<DataTable
:value="products"
editMode="cell"
@cell-edit-complete="onCellEditComplete"
<DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete"
:pt="{
table: { style: 'min-width: 50rem' },
column: {

21
doc/datatable/edit/FilterSortEditDoc.vue
View File

@ -48,12 +48,7 @@ export default {
},
code: {
basic: `
<DataTable
v-model:filters="filters"
:value="products"
editMode="cell"
@cell-edit-complete="onCellEditComplete"
filterDisplay="row"
<DataTable v-model:filters="filters" :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" filterDisplay="row"
:pt="{
table: { style: 'min-width: 50rem' },
column: {
@ -76,12 +71,7 @@ export default {
options: `
<template>
<div class="card p-fluid">
<DataTable
v-model:filters="filters"
:value="products"
editMode="cell"
@cell-edit-complete="onCellEditComplete"
filterDisplay="row"
<DataTable v-model:filters="filters" :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" filterDisplay="row"
:pt="{
table: { style: 'min-width: 50rem' },
column: {
@ -159,12 +149,7 @@ export default {
composition: `
<template>
<div class="card p-fluid">
<DataTable
v-model:filters="filters"
:value="products"
editMode="cell"
@cell-edit-complete="onCellEditComplete"
filterDisplay="row"
<DataTable v-model:filters="filters" :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" filterDisplay="row"
:pt="{
table: { style: 'min-width: 50rem' },
column: {

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

@ -6,7 +6,21 @@
</p>
</DocSectionText>
<div class="card p-fluid">
<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id" @row-edit-save="onRowEditSave" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
<DataTable
v-model:editingRows="editingRows"
:value="products"
editMode="row"
dataKey="id"
@row-edit-save="onRowEditSave"
:pt="{
table: { style: 'min-width: 50rem' },
column: {
bodycell: ({ state }) => ({
style: state['d_editing'] && 'padding-top: 0.6rem; padding-bottom: 0.6rem'
})
}
}"
>
<Column field="code" header="Code" style="width: 20%">
<template #editor="{ data, field }">
<InputText v-model="data[field]" />
@ -58,8 +72,16 @@ export default {
],
code: {
basic: `
<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id"
@row-edit-save="onRowEditSave" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id" @row-edit-save="onRowEditSave"
:pt="{
table: { style: 'min-width: 50rem' },
column: {
bodycell: ({ state }) => ({
style: state['d_editing']&&'padding-top: 0.6rem; padding-bottom: 0.6rem'
})
}
}"
>
<Column field="code" header="Code" style="width: 20%">
<template #editor="{ data, field }">
<InputText v-model="data[field]" />
@ -96,8 +118,16 @@ export default {
options: `
<template>
<div class="card p-fluid">
<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id"
@row-edit-save="onRowEditSave" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id" @row-edit-save="onRowEditSave"
:pt="{
table: { style: 'min-width: 50rem' },
column: {
bodycell: ({ state }) => ({
style: state['d_editing']&&'padding-top: 0.6rem; padding-bottom: 0.6rem'
})
}
}"
>
<Column field="code" header="Code" style="width: 20%">
<template #editor="{ data, field }">
<InputText v-model="data[field]" />
@ -178,19 +208,20 @@ export default {
}
};
<\/script>
<style lang="scss" scoped>
::v-deep(.editable-cells-table td.p-cell-editing) {
padding-top: 0.6rem;
padding-bottom: 0.6rem;
}
</style>
`,
composition: `
<template>
<div class="card p-fluid">
<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id"
@row-edit-save="onRowEditSave" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id" @row-edit-save="onRowEditSave"
:pt="{
table: { style: 'min-width: 50rem' },
column: {
bodycell: ({ state }) => ({
style: state['d_editing']&&'padding-top: 0.6rem; padding-bottom: 0.6rem'
})
}
}"
>
<Column field="code" header="Code" style="width: 20%">
<template #editor="{ data, field }">
<InputText v-model="data[field]" />
@ -266,14 +297,7 @@ const formatCurrency = (value) => {
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
}
<\/script>
<style lang="scss" scoped>
::v-deep(.editable-cells-table td.p-cell-editing) {
padding-top: 0.6rem;
padding-bottom: 0.6rem;
}
</style>`,
<\/script>`,
data: `
{
id: '1000',
@ -322,10 +346,3 @@ const formatCurrency = (value) => {
}
};
</script>
<style lang="scss" scoped>
::v-deep(.editable-cells-table td.p-cell-editing) {
padding-top: 0.6rem;
padding-bottom: 0.6rem;
}
</style>

2
doc/inputnumber/VerticalDoc.vue
View File

@ -54,7 +54,7 @@ export default {
</template>
<script setup>
import { ref } from "vuetest";
import { ref } from "vue";
const value = ref(50);
<\/script>

4
doc/ripple/ConfigurationDoc.vue
View File

@ -14,7 +14,6 @@ export default {
mounted() {
this.$primevue.config.ripple = true;
}
`,
options: `
mounted() {
@ -26,7 +25,8 @@ import { usePrimeVue } from 'primevue/config';
const PrimeVue = usePrimeVue();
PrimeVue.config.ripple = true;`
PrimeVue.config.ripple = true;
`
}
};
}

169
doc/ripple/CustomDoc.vue
View File

@ -3,9 +3,36 @@
<p>Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of <i>p-ink</i> element.</p>
</DocSectionText>
<div class="card flex justify-content-center align-items-center gap-2">
<div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
<div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
<div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>
<div
v-ripple="{
pt: {
root: { style: 'background: rgba(75, 175, 80, 0.3)' }
}
}"
class="p-ripple box shadow-2"
>
Green
</div>
<div
v-ripple="{
pt: {
root: { style: 'background: rgba(255, 193, 6, 0.3)' }
}
}"
class="p-ripple box shadow-2"
>
Orange
</div>
<div
v-ripple="{
pt: {
root: { style: 'background: rgba(156, 39, 176, 0.3)' }
}
}"
class="p-ripple box shadow-2"
>
Purple
</div>
</div>
<DocSectionCode :code="code" />
</template>
@ -16,31 +43,74 @@ export default {
return {
code: {
basic: `
<div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
<div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
<div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>
<div
v-ripple="{
pt: {
root: { style: 'background: rgba(75, 175, 80, 0.3)' }
}
}"
class="p-ripple box shadow-2"
>
Green
</div>
<div
v-ripple="{
pt: {
root: { style: 'background: rgba(255, 193, 6, 0.3)' }
}
}"
class="p-ripple box shadow-2"
>
Orange
</div>
<div
v-ripple="{
pt: {
root: { style: 'background: rgba(156, 39, 176, 0.3)' }
}
}"
class="p-ripple box shadow-2"
>
Purple
</div>
`,
options: `
<template>
<div class="flex justify-content-center align-items-center">
<div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
<div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
<div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>
<div class="flex justify-content-center align-items-center gap-2">
<div
v-ripple="{
pt: {
root: { style: 'background: rgba(75, 175, 80, 0.3)' }
}
}"
class="p-ripple box shadow-2"
>
Green
</div>
<div
v-ripple="{
pt: {
root: { style: 'background: rgba(255, 193, 6, 0.3)' }
}
}"
class="p-ripple box shadow-2"
>
Orange
</div>
<div
v-ripple="{
pt: {
root: { style: 'background: rgba(156, 39, 176, 0.3)' }
}
}"
class="p-ripple box shadow-2"
>
Purple
</div>
</div>
</template>
<style scoped>
::v-deep(.styled-box-green .p-ink) {
background: rgba(75, 175, 80, 0.3);
}
::v-deep(.styled-box-orange .p-ink) {
background: rgba(255, 193, 6, 0.3);
}
::v-deep(.styled-box-purple .p-ink) {
background: rgba(156, 39, 176, 0.3);
}
.box {
background: var(--surface-card);
padding: 2rem;
@ -52,25 +122,41 @@ export default {
`,
composition: `
<template>
<div class="flex justify-content-center align-items-center">
<div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
<div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
<div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>
<div class="flex justify-content-center align-items-center gap-2">
<div
v-ripple="{
pt: {
root: { style: 'background: rgba(75, 175, 80, 0.3)' }
}
}"
class="p-ripple box shadow-2"
>
Green
</div>
<div
v-ripple="{
pt: {
root: { style: 'background: rgba(255, 193, 6, 0.3)' }
}
}"
class="p-ripple box shadow-2"
>
Orange
</div>
<div
v-ripple="{
pt: {
root: { style: 'background: rgba(156, 39, 176, 0.3)' }
}
}"
class="p-ripple box shadow-2"
>
Purple
</div>
</div>
</template>
<style scoped>
::v-deep(.styled-box-green .p-ink) {
background: rgba(75, 175, 80, 0.3);
}
::v-deep(.styled-box-orange .p-ink) {
background: rgba(255, 193, 6, 0.3);
}
::v-deep(.styled-box-purple .p-ink) {
background: rgba(156, 39, 176, 0.3);
}
.box {
background: var(--surface-card);
padding: 2rem;
@ -93,15 +179,4 @@ export default {
width: 110px;
text-align: center;
}
::v-deep(.styled-box-green .p-ink) {
background: rgba(75, 175, 80, 0.3);
}
::v-deep(.styled-box-orange .p-ink) {
background: rgba(255, 193, 6, 0.3);
}
::v-deep(.styled-box-purple .p-ink) {
background: rgba(156, 39, 176, 0.3);
}
</style>

38
doc/virtualscroller/HorizontalDoc.vue
View File

@ -3,13 +3,13 @@
<p>Setting <i>orientation</i> to <i>horizontal</i> enables scrolling horizontally. In this case, the <i>itemSize</i> should refer to the width of an item.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
<VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
<template v-slot:item="{ item, options }">
<div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr">{{ item }}</div>
</template>
</VirtualScroller>
</div>
<DocSectionCode :code="code" :dependencies="{ sass: '1.45.0', 'sass-loader': '8.0.2' }" />
<DocSectionCode :code="code" />
</template>
<script>
@ -19,7 +19,7 @@ export default {
items: null,
code: {
basic: `
<VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
<VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
<template v-slot:item="{ item, options }">
<div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
</template>
@ -28,7 +28,7 @@ export default {
options: `
<template>
<div class="card flex justify-content-center">
<VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
<VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
<template v-slot:item="{ item, options }">
<div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
</template>
@ -48,20 +48,11 @@ export default {
}
};
<\/script>
<style lang="scss" scoped>
::v-deep(.p-virtualscroller) {
.p-virtualscroller-content {
display: flex;
flex-direction: row;
}
}
</style>
`,
composition: `
<template>
<div class="card flex justify-content-center">
<VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
<VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
<template v-slot:item="{ item, options }">
<div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
</template>
@ -74,15 +65,7 @@ import { ref } from 'vue';
const items = ref(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
<\/script>
<style lang="scss" scoped>
::v-deep(.p-virtualscroller) {
.p-virtualscroller-content {
display: flex;
flex-direction: row;
}
}
</style>`
`
}
};
},
@ -91,12 +74,3 @@ const items = ref(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`))
}
};
</script>
<style lang="scss" scoped>
::v-deep(.p-virtualscroller) {
.p-virtualscroller-content {
display: flex;
flex-direction: row;
}
}
</style>