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: { slots: {
grid: ` grid: `
<template #grid="slotProps"> <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 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 card">
<div class="product-grid-item-top"> <div class="product-grid-item-top">

28
doc/dataview/LayoutDoc.vue
View File

@ -8,7 +8,7 @@
<div class="flex justify-end"> <div class="flex justify-end">
<SelectButton v-model="layout" :options="options" :allowEmpty="false"> <SelectButton v-model="layout" :options="options" :allowEmpty="false">
<template #option="{ option }"> <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> </template>
</SelectButton> </SelectButton>
</div> </div>
@ -49,7 +49,7 @@
</template> </template>
<template #grid="slotProps"> <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 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="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"> <div class="bg-surface-50 flex justify-center rounded p-4">
@ -95,8 +95,8 @@ export default {
data() { data() {
return { return {
products: null, products: null,
layout: 'grid grid-cols-12 gap-4', layout: 'grid',
options: ['list', 'grid grid-cols-12 gap-4'], options: ['list', 'grid'],
code: { code: {
basic: ` basic: `
<DataView :value="products" :layout="layout"> <DataView :value="products" :layout="layout">
@ -104,7 +104,7 @@ export default {
<div class="flex justify-end"> <div class="flex justify-end">
<SelectButton v-model="layout" :options="options" :allowEmpty="false"> <SelectButton v-model="layout" :options="options" :allowEmpty="false">
<template #option="{ option }"> <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> </template>
</SelectButton> </SelectButton>
</div> </div>
@ -145,7 +145,7 @@ export default {
</template> </template>
<template #grid="slotProps"> <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 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="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"> <div class="bg-surface-50 flex justify-center rounded p-4">
@ -189,7 +189,7 @@ export default {
<div class="flex justify-end"> <div class="flex justify-end">
<SelectButton v-model="layout" :options="options" :allowEmpty="false"> <SelectButton v-model="layout" :options="options" :allowEmpty="false">
<template #option="{ option }"> <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> </template>
</SelectButton> </SelectButton>
</div> </div>
@ -230,7 +230,7 @@ export default {
</template> </template>
<template #grid="slotProps"> <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 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="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"> <div class="bg-surface-50 flex justify-center rounded p-4">
@ -275,8 +275,8 @@ export default {
data() { data() {
return { return {
products: null, products: null,
layout: 'grid grid-cols-12 gap-4', layout: 'grid',
options: ['list', 'grid grid-cols-12 gap-4'], options: ['list', 'grid'],
} }
}, },
mounted() { mounted() {
@ -310,7 +310,7 @@ export default {
<div class="flex justify-end"> <div class="flex justify-end">
<SelectButton v-model="layout" :options="options" :allowEmpty="false"> <SelectButton v-model="layout" :options="options" :allowEmpty="false">
<template #option="{ option }"> <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> </template>
</SelectButton> </SelectButton>
</div> </div>
@ -351,7 +351,7 @@ export default {
</template> </template>
<template #grid="slotProps"> <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 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="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"> <div class="bg-surface-50 flex justify-center rounded p-4">
@ -398,8 +398,8 @@ onMounted(() => {
}); });
const products = ref(); const products = ref();
const layout = ref('grid grid-cols-12 gap-4'); const layout = ref('grid');
const options = ref(['list', 'grid grid-cols-12 gap-4']); const options = ref(['list', 'grid']);
const getSeverity = (product) => { const getSeverity = (product) => {
switch (product.inventoryStatus) { switch (product.inventoryStatus) {

20
doc/dataview/LoadingDoc.vue
View File

@ -8,7 +8,7 @@
<div class="flex justify-end"> <div class="flex justify-end">
<SelectButton v-model="layout" :options="options" :allowEmpty="false"> <SelectButton v-model="layout" :options="options" :allowEmpty="false">
<template #option="{ option }"> <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> </template>
</SelectButton> </SelectButton>
</div> </div>
@ -71,8 +71,8 @@ export default {
data() { data() {
return { return {
products: null, products: null,
layout: 'grid grid-cols-12 gap-4', layout: 'grid',
options: ['list', 'grid grid-cols-12 gap-4'], options: ['list', 'grid'],
code: { code: {
basic: ` basic: `
<DataView :value="products" :layout="layout"> <DataView :value="products" :layout="layout">
@ -80,7 +80,7 @@ export default {
<div class="flex justify-end"> <div class="flex justify-end">
<SelectButton v-model="layout" :options="options" :allowEmpty="false"> <SelectButton v-model="layout" :options="options" :allowEmpty="false">
<template #option="{ option }"> <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> </template>
</SelectButton> </SelectButton>
</div> </div>
@ -141,7 +141,7 @@ export default {
<div class="flex justify-end"> <div class="flex justify-end">
<SelectButton v-model="layout" :options="options" :allowEmpty="false"> <SelectButton v-model="layout" :options="options" :allowEmpty="false">
<template #option="{ option }"> <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> </template>
</SelectButton> </SelectButton>
</div> </div>
@ -203,8 +203,8 @@ export default {
data() { data() {
return { return {
products: null, products: null,
layout: 'grid grid-cols-12 gap-4', layout: 'grid',
options: ['list', 'grid grid-cols-12 gap-4'], options: ['list', 'grid'],
} }
}, },
mounted() { mounted() {
@ -238,7 +238,7 @@ export default {
<div class="flex justify-end"> <div class="flex justify-end">
<SelectButton v-model="layout" :options="options" :allowEmpty="false"> <SelectButton v-model="layout" :options="options" :allowEmpty="false">
<template #option="{ option }"> <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> </template>
</SelectButton> </SelectButton>
</div> </div>
@ -302,8 +302,8 @@ onMounted(() => {
}); });
const products = ref(); const products = ref();
const layout = ref('grid grid-cols-12 gap-4'); const layout = ref('grid');
const options = ref(['list', 'grid grid-cols-12 gap-4']); const options = ref(['list', 'grid']);
const getSeverity = (product) => { const getSeverity = (product) => {
switch (product.inventoryStatus) { 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' : '' }]" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
</template> </template>
<template #thumbnail="slotProps"> <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" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</div> </div>
</template> </template>
@ -105,7 +105,7 @@ export default {
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
</template> </template>
<template #thumbnail="slotProps"> <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" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</div> </div>
</template> </template>
@ -154,7 +154,7 @@ export default {
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
</template> </template>
<template #thumbnail="slotProps"> <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" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</div> </div>
</template> </template>
@ -300,7 +300,7 @@ export default {
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
</template> </template>
<template #thumbnail="slotProps"> <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" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</div> </div>
</template> </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" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </template>
<template #thumbnail="slotProps"> <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" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</div> </div>
</template> </template>
@ -43,7 +43,7 @@ export default {
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </template>
<template #thumbnail="slotProps"> <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" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</div> </div>
</template> </template>
@ -57,7 +57,7 @@ export default {
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </template>
<template #thumbnail="slotProps"> <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" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</div> </div>
</template> </template>
@ -98,7 +98,7 @@ export default {
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </template>
<template #thumbnail="slotProps"> <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" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</div> </div>
</template> </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" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </template>
<template #thumbnail="slotProps"> <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" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</div> </div>
</template> </template>
@ -68,7 +68,7 @@ export default {
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </template>
<template #thumbnail="slotProps"> <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;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</div> </div>
</template> </template>
@ -88,7 +88,7 @@ export default {
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </template>
<template #thumbnail="slotProps"> <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;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</div> </div>
</template> </template>
@ -154,7 +154,7 @@ export default {
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </template>
<template #thumbnail="slotProps"> <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;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</div> </div>
</template> </template>

8
package-lock.json generated
View File

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

2
package.json
View File

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