Remove v-deep use pt
tugcekucukoglu
parent
095a203cd8
commit
3598aaef52
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue