-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
794757a
commit 66f615a
Showing
4 changed files
with
464 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,398 @@ | ||
| <template> | ||
| <DocSectionText v-bind="$attrs"> </DocSectionText> | ||
| <div class="card"> | ||
| <DataView | ||
| :value="products" | ||
| :layout="layout" | ||
| :pt="{ | ||
| grid: { class: 'surface-ground' } | ||
| }" | ||
| > | ||
| <template #header> | ||
| <div class="flex justify-content-end"> | ||
| <DataViewLayoutOptions | ||
| v-model="layout" | ||
| :pt="{ | ||
| listButton: ({ props }) => ({ class: props.modelValue === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }), | ||
| gridButton: ({ props }) => ({ class: props.modelValue === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' }) | ||
| }" | ||
| /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <template #list="slotProps"> | ||
| <div class="col-12"> | ||
| <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> | ||
| <img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.name" /> | ||
| <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4"> | ||
| <div class="flex flex-column align-items-center sm:align-items-start gap-3"> | ||
| <div class="text-2xl font-bold text-900">{{ slotProps.data.name }}</div> | ||
| <Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> | ||
| <div class="flex align-items-center gap-3"> | ||
| <span class="flex align-items-center gap-2"> | ||
| <i class="pi pi-tag"></i> | ||
| <span class="font-semibold">{{ slotProps.data.category }}</span> | ||
| </span> | ||
| <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> | ||
| </div> | ||
| </div> | ||
| <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> | ||
| <span class="text-2xl font-semibold">${{ slotProps.data.price }}</span> | ||
| <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <template #grid="slotProps"> | ||
| <div class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2"> | ||
| <div class="p-4 border-1 surface-border surface-card border-round"> | ||
| <div class="flex flex-wrap align-items-center justify-content-between gap-2"> | ||
| <div class="flex align-items-center gap-2"> | ||
| <i class="pi pi-tag"></i> | ||
| <span class="font-semibold">{{ slotProps.data.category }}</span> | ||
| </div> | ||
| <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> | ||
| </div> | ||
| <div class="flex flex-column align-items-center gap-3 py-5"> | ||
| <img class="w-9 shadow-2 border-round" :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.name" /> | ||
| <div class="text-2xl font-bold">{{ slotProps.data.name }}</div> | ||
| <Rating value="{product.rating}" readonly :cancel="false"></Rating> | ||
| </div> | ||
| <div class="flex align-items-center justify-content-between"> | ||
| <span class="text-2xl font-semibold">${{ slotProps.data.price }}</span> | ||
| <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| </DataView> | ||
| </div> | ||
| <DocSectionCode :code="code" :service="['ProductService']" /> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { ProductService } from '@/service/ProductService'; | ||
| export default { | ||
| data() { | ||
| return { | ||
| products: null, | ||
| layout: 'grid', | ||
| code: { | ||
| basic: ` | ||
| <DataView | ||
| :value="products" | ||
| :layout="layout" | ||
| :pt="{ | ||
| grid: { class: 'surface-ground' } | ||
| }" | ||
| > | ||
| <template #header> | ||
| <div class="flex justify-content-end"> | ||
| <DataViewLayoutOptions | ||
| v-model="layout" | ||
| :pt="{ | ||
| listButton: ({ props }) => ({ class: props.modelValue === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }), | ||
| gridButton: ({ props }) => ({ class: props.modelValue === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' }) | ||
| }" | ||
| /> | ||
| </div> | ||
| </template> | ||
| <template #list="slotProps"> | ||
| <div class="col-12"> | ||
| <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> | ||
| <img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> | ||
| <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4"> | ||
| <div class="flex flex-column align-items-center sm:align-items-start gap-3"> | ||
| <div class="text-2xl font-bold text-900">{{ slotProps.data.name }}</div> | ||
| <Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> | ||
| <div class="flex align-items-center gap-3"> | ||
| <span class="flex align-items-center gap-2"> | ||
| <i class="pi pi-tag"></i> | ||
| <span class="font-semibold">{{ slotProps.data.category }}</span> | ||
| </span> | ||
| <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> | ||
| </div> | ||
| </div> | ||
| <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> | ||
| <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> | ||
| <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| <template #grid="slotProps"> | ||
| <div class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2"> | ||
| <div class="p-4 border-1 surface-border surface-card border-round"> | ||
| <div class="flex flex-wrap align-items-center justify-content-between gap-2"> | ||
| <div class="flex align-items-center gap-2"> | ||
| <i class="pi pi-tag"></i> | ||
| <span class="font-semibold">{{ slotProps.data.category }}</span> | ||
| </div> | ||
| <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> | ||
| </div> | ||
| <div class="flex flex-column align-items-center gap-3 py-5"> | ||
| <img class="w-9 shadow-2 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> | ||
| <div class="text-2xl font-bold">{{ slotProps.data.name }}</div> | ||
| <Rating value="{product.rating}" readonly :cancel="false"></Rating> | ||
| </div> | ||
| <div class="flex align-items-center justify-content-between"> | ||
| <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> | ||
| <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| </DataView>`, | ||
| options: ` | ||
| <template> | ||
| <div class="card"> | ||
| <DataView | ||
| :value="products" | ||
| :layout="layout" | ||
| :pt="{ | ||
| grid: { class: 'surface-ground' } | ||
| }" | ||
| > | ||
| <template #header> | ||
| <div class="flex justify-content-end"> | ||
| <DataViewLayoutOptions | ||
| v-model="layout" | ||
| :pt="{ | ||
| listButton: ({ props }) => ({ class: props.modelValue === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }), | ||
| gridButton: ({ props }) => ({ class: props.modelValue === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' }) | ||
| }" | ||
| /> | ||
| </div> | ||
| </template> | ||
| <template #list="slotProps"> | ||
| <div class="col-12"> | ||
| <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> | ||
| <img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> | ||
| <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4"> | ||
| <div class="flex flex-column align-items-center sm:align-items-start gap-3"> | ||
| <div class="text-2xl font-bold text-900">{{ slotProps.data.name }}</div> | ||
| <Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> | ||
| <div class="flex align-items-center gap-3"> | ||
| <span class="flex align-items-center gap-2"> | ||
| <i class="pi pi-tag"></i> | ||
| <span class="font-semibold">{{ slotProps.data.category }}</span> | ||
| </span> | ||
| <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> | ||
| </div> | ||
| </div> | ||
| <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> | ||
| <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> | ||
| <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| <template #grid="slotProps"> | ||
| <div class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2"> | ||
| <div class="p-4 border-1 surface-border surface-card border-round"> | ||
| <div class="flex flex-wrap align-items-center justify-content-between gap-2"> | ||
| <div class="flex align-items-center gap-2"> | ||
| <i class="pi pi-tag"></i> | ||
| <span class="font-semibold">{{ slotProps.data.category }}</span> | ||
| </div> | ||
| <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> | ||
| </div> | ||
| <div class="flex flex-column align-items-center gap-3 py-5"> | ||
| <img class="w-9 shadow-2 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> | ||
| <div class="text-2xl font-bold">{{ slotProps.data.name }}</div> | ||
| <Rating value="{product.rating}" readonly :cancel="false"></Rating> | ||
| </div> | ||
| <div class="flex align-items-center justify-content-between"> | ||
| <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> | ||
| <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| </DataView> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| import { ProductService } from '@/service/ProductService'; | ||
| export default { | ||
| data() { | ||
| return { | ||
| products: null, | ||
| layout: 'grid' | ||
| } | ||
| }, | ||
| mounted() { | ||
| ProductService.getProducts().then((data) => (this.products = data.slice(0, 6))); | ||
| }, | ||
| methods: { | ||
| getSeverity(product) { | ||
| switch (product.inventoryStatus) { | ||
| case 'INSTOCK': | ||
| return 'success'; | ||
| case 'LOWSTOCK': | ||
| return 'warning'; | ||
| case 'OUTOFSTOCK': | ||
| return 'danger'; | ||
| default: | ||
| return null; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| <\/script>`, | ||
| composition: ` | ||
| <template> | ||
| <div class="card"> | ||
| <DataView | ||
| :value="products" | ||
| :layout="layout" | ||
| :pt="{ | ||
| grid: { class: 'surface-ground' } | ||
| }" | ||
| > | ||
| <template #header> | ||
| <div class="flex justify-content-end"> | ||
| <DataViewLayoutOptions | ||
| v-model="layout" | ||
| :pt="{ | ||
| listButton: ({ props }) => ({ class: props.modelValue === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }), | ||
| gridButton: ({ props }) => ({ class: props.modelValue === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' }) | ||
| }" | ||
| /> | ||
| </div> | ||
| </template> | ||
| <template #list="slotProps"> | ||
| <div class="col-12"> | ||
| <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> | ||
| <img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> | ||
| <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4"> | ||
| <div class="flex flex-column align-items-center sm:align-items-start gap-3"> | ||
| <div class="text-2xl font-bold text-900">{{ slotProps.data.name }}</div> | ||
| <Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating> | ||
| <div class="flex align-items-center gap-3"> | ||
| <span class="flex align-items-center gap-2"> | ||
| <i class="pi pi-tag"></i> | ||
| <span class="font-semibold">{{ slotProps.data.category }}</span> | ||
| </span> | ||
| <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> | ||
| </div> | ||
| </div> | ||
| <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"> | ||
| <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> | ||
| <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| <template #grid="slotProps"> | ||
| <div class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2"> | ||
| <div class="p-4 border-1 surface-border surface-card border-round"> | ||
| <div class="flex flex-wrap align-items-center justify-content-between gap-2"> | ||
| <div class="flex align-items-center gap-2"> | ||
| <i class="pi pi-tag"></i> | ||
| <span class="font-semibold">{{ slotProps.data.category }}</span> | ||
| </div> | ||
| <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag> | ||
| </div> | ||
| <div class="flex flex-column align-items-center gap-3 py-5"> | ||
| <img class="w-9 shadow-2 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.name" /> | ||
| <div class="text-2xl font-bold">{{ slotProps.data.name }}</div> | ||
| <Rating value="{product.rating}" readonly :cancel="false"></Rating> | ||
| </div> | ||
| <div class="flex align-items-center justify-content-between"> | ||
| <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span> | ||
| <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| </DataView> | ||
| </div> | ||
| </template> | ||
| <script setup> | ||
| import { ref, onMounted } from "vue"; | ||
| import { ProductService } from '@/service/ProductService'; | ||
| onMounted(() => { | ||
| ProductService.getProducts().then((data) => (products.value = data.slice(0, 6))); | ||
| }); | ||
| const products = ref(); | ||
| const layout = ref('grid'); | ||
| const getSeverity = (product) => { | ||
| switch (product.inventoryStatus) { | ||
| case 'INSTOCK': | ||
| return 'success'; | ||
| case 'LOWSTOCK': | ||
| return 'warning'; | ||
| case 'OUTOFSTOCK': | ||
| return 'danger'; | ||
| default: | ||
| return null; | ||
| } | ||
| } | ||
| <\/script>`, | ||
| data: ` | ||
| /* ProductService */ | ||
| { | ||
| id: '1000', | ||
| code: 'f230fh0g3', | ||
| name: 'Bamboo Watch', | ||
| description: 'Product Description', | ||
| image: 'bamboo-watch.jpg', | ||
| price: 65, | ||
| category: 'Accessories', | ||
| quantity: 24, | ||
| inventoryStatus: 'INSTOCK', | ||
| rating: 5 | ||
| }, | ||
| ... | ||
| ` | ||
| } | ||
| }; | ||
| }, | ||
| mounted() { | ||
| ProductService.getProducts().then((data) => (this.products = data.slice(0, 6))); | ||
| }, | ||
| methods: { | ||
| getSeverity(product) { | ||
| switch (product.inventoryStatus) { | ||
| case 'INSTOCK': | ||
| return 'success'; | ||
| case 'LOWSTOCK': | ||
| return 'warning'; | ||
| case 'OUTOFSTOCK': | ||
| return 'danger'; | ||
| default: | ||
| return null; | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| </script> |
Oops, something went wrong.