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

Fixed datataview grid layout

pull/5806/head
Cagatay Civici 2024-05-24 09:25:19 +03:00
parent d27c88c1f2
commit 8119a873dd
8 changed files with 42 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/lib/dataview/DataView.spec.js
View File

@ -54,7 +54,7 @@ describe('DataView.vue', () => {
slots: {
grid: `
<template #grid="slotProps">
<div class="grid grid-nogutter">
<div class="grid">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12 md:col-4">
<div class="product-grid-item card">
<div class="product-grid-item-top">

28
doc/dataview/LayoutDoc.vue
View File

@ -8,7 +8,7 @@
<div class="flex justify-end">
<SelectButton v-model="layout" :options="options" :allowEmpty="false">
<template #option="{ option }">
<i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
<i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
</template>
</SelectButton>
</div>
@ -49,7 +49,7 @@
</template>
<template #grid="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter">
<div class="grid grid-cols-12 gap-4">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
<div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
<div class="bg-surface-50 flex justify-center rounded p-4">
@ -95,8 +95,8 @@ export default {
data() {
return {
products: null,
layout: 'grid grid-cols-12 gap-4',
options: ['list', 'grid grid-cols-12 gap-4'],
layout: 'grid',
options: ['list', 'grid'],
code: {
basic: `
<DataView :value="products" :layout="layout">
@ -104,7 +104,7 @@ export default {
<div class="flex justify-end">
<SelectButton v-model="layout" :options="options" :allowEmpty="false">
<template #option="{ option }">
<i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
<i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
</template>
</SelectButton>
</div>
@ -145,7 +145,7 @@ export default {
</template>
<template #grid="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter">
<div class="grid grid-cols-12 gap-4">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
<div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
<div class="bg-surface-50 flex justify-center rounded p-4">
@ -189,7 +189,7 @@ export default {
<div class="flex justify-end">
<SelectButton v-model="layout" :options="options" :allowEmpty="false">
<template #option="{ option }">
<i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
<i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
</template>
</SelectButton>
</div>
@ -230,7 +230,7 @@ export default {
</template>
<template #grid="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter">
<div class="grid grid-cols-12 gap-4">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
<div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
<div class="bg-surface-50 flex justify-center rounded p-4">
@ -275,8 +275,8 @@ export default {
data() {
return {
products: null,
layout: 'grid grid-cols-12 gap-4',
options: ['list', 'grid grid-cols-12 gap-4'],
layout: 'grid',
options: ['list', 'grid'],
}
},
mounted() {
@ -310,7 +310,7 @@ export default {
<div class="flex justify-end">
<SelectButton v-model="layout" :options="options" :allowEmpty="false">
<template #option="{ option }">
<i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
<i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
</template>
</SelectButton>
</div>
@ -351,7 +351,7 @@ export default {
</template>
<template #grid="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter">
<div class="grid grid-cols-12 gap-4">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
<div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
<div class="bg-surface-50 flex justify-center rounded p-4">
@ -398,8 +398,8 @@ onMounted(() => {
});
const products = ref();
const layout = ref('grid grid-cols-12 gap-4');
const options = ref(['list', 'grid grid-cols-12 gap-4']);
const layout = ref('grid');
const options = ref(['list', 'grid']);
const getSeverity = (product) => {
switch (product.inventoryStatus) {

20
doc/dataview/LoadingDoc.vue
View File

@ -8,7 +8,7 @@
<div class="flex justify-end">
<SelectButton v-model="layout" :options="options" :allowEmpty="false">
<template #option="{ option }">
<i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
<i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
</template>
</SelectButton>
</div>
@ -71,8 +71,8 @@ export default {
data() {
return {
products: null,
layout: 'grid grid-cols-12 gap-4',
options: ['list', 'grid grid-cols-12 gap-4'],
layout: 'grid',
options: ['list', 'grid'],
code: {
basic: `
<DataView :value="products" :layout="layout">
@ -80,7 +80,7 @@ export default {
<div class="flex justify-end">
<SelectButton v-model="layout" :options="options" :allowEmpty="false">
<template #option="{ option }">
<i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
<i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
</template>
</SelectButton>
</div>
@ -141,7 +141,7 @@ export default {
<div class="flex justify-end">
<SelectButton v-model="layout" :options="options" :allowEmpty="false">
<template #option="{ option }">
<i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
<i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
</template>
</SelectButton>
</div>
@ -203,8 +203,8 @@ export default {
data() {
return {
products: null,
layout: 'grid grid-cols-12 gap-4',
options: ['list', 'grid grid-cols-12 gap-4'],
layout: 'grid',
options: ['list', 'grid'],
}
},
mounted() {
@ -238,7 +238,7 @@ export default {
<div class="flex justify-end">
<SelectButton v-model="layout" :options="options" :allowEmpty="false">
<template #option="{ option }">
<i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
<i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
</template>
</SelectButton>
</div>
@ -302,8 +302,8 @@ onMounted(() => {
});
const products = ref();
const layout = ref('grid grid-cols-12 gap-4');
const options = ref(['list', 'grid grid-cols-12 gap-4']);
const layout = ref('grid');
const options = ref(['list', 'grid']);
const getSeverity = (product) => {
switch (product.inventoryStatus) {

8
doc/galleria/AdvancedDoc.vue
View File

@ -31,7 +31,7 @@
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
</template>
<template #thumbnail="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
<div class="grid grid-cols-12 gap-4 justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</div>
</template>
@ -105,7 +105,7 @@ export default {
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
</template>
<template #thumbnail="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
<div class="grid grid-cols-12 gap-4 justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</div>
</template>
@ -154,7 +154,7 @@ export default {
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
</template>
<template #thumbnail="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
<div class="grid grid-cols-12 gap-4 justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</div>
</template>
@ -300,7 +300,7 @@ export default {
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
</template>
<template #thumbnail="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
<div class="grid grid-cols-12 gap-4 justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</div>
</template>

8
doc/galleria/ResponsiveDoc.vue
View File

@ -9,7 +9,7 @@
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
<div class="grid grid-cols-12 gap-4 justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</div>
</template>
@ -43,7 +43,7 @@ export default {
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
<div class="grid grid-cols-12 gap-4 justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</div>
</template>
@ -57,7 +57,7 @@ export default {
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
<div class="grid grid-cols-12 gap-4 justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</div>
</template>
@ -98,7 +98,7 @@ export default {
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
<div class="grid grid-cols-12 gap-4 justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</div>
</template>

8
doc/galleria/ThumbnailDoc.vue
View File

@ -15,7 +15,7 @@
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
<div class="grid grid-cols-12 gap-4 justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</div>
</template>
@ -68,7 +68,7 @@ export default {
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
<div class="grid grid-cols-12 gap-4 justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</div>
</template>
@ -88,7 +88,7 @@ export default {
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
<div class="grid grid-cols-12 gap-4 justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</div>
</template>
@ -154,7 +154,7 @@ export default {
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<div class="grid grid-cols-12 gap-4 grid-nogutter justify-center">
<div class="grid grid-cols-12 gap-4 justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</div>
</template>

8
package-lock.json generated
View File

@ -42,7 +42,7 @@
"sass": "^1.45.0",
"sass-loader": "^8.0.2",
"tailwindcss": "^3.4.1",
"tailwindcss-primeui": "^0.1.0",
"tailwindcss-primeui": "^0.2.0",
"typedoc": "0.23.23",
"typescript": "^4.9.4",
"vitest": "^0.29.8"
@ -12263,9 +12263,9 @@
}
},
"node_modules/tailwindcss-primeui": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/tailwindcss-primeui/-/tailwindcss-primeui-0.1.0.tgz",
"integrity": "sha512-nF6AUxJ1OGCiKR06D00h3e8qWEB+D602wEYw2C8vk5W8bIiNwfO62dsIiaHBy+GVUHYK64F1AMscF0rUB0Y9Dw==",
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/tailwindcss-primeui/-/tailwindcss-primeui-0.2.0.tgz",
"integrity": "sha512-HnR59OhL/hAjgLms32q6afIRf7GtYFwrI8GlLcpK9280/G5i/gQXwJQLgjO8qFoIZHZw9uEKj/0C/YqGvHdRcA==",
"dev": true,
"peerDependencies": {
"tailwindcss": ">=3.1.0"

2
package.json
View File

@ -71,7 +71,7 @@
"sass": "^1.45.0",
"sass-loader": "^8.0.2",
"tailwindcss": "^3.4.1",
"tailwindcss-primeui": "^0.1.0",
"tailwindcss-primeui": "^0.2.0",
"typedoc": "0.23.23",
"typescript": "^4.9.4",
"vitest": "^0.29.8"