pull/5161/head
Cagatay Civici 2024-01-24 13:00:57 +03:00
commit 079589adab
5 changed files with 14 additions and 13 deletions

View File

@ -23,7 +23,8 @@ describe('MultiSelect.vue', () => {
{ name: 'Paris', code: 'PRS' }
],
optionLabel: 'name',
placeholder: 'Select Cities'
placeholder: 'Select Cities',
highlightOnSelect: true
}
});
});

View File

@ -6,11 +6,11 @@
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
@ -18,7 +18,7 @@
<div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
<Button icon="pi pi-shopping-cart" class="ml-2"/>
<Button icon="pi pi-shopping-cart" class="ml-2" />
</span>
</div>
</div>

View File

@ -6,11 +6,11 @@
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
@ -18,7 +18,7 @@
<div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
<Button icon="pi pi-shopping-cart" class="ml-2"/>
<Button icon="pi pi-shopping-cart" class="ml-2" />
</span>
</div>
</div>

View File

@ -9,11 +9,11 @@
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
@ -21,7 +21,7 @@
<div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
<Button icon="pi pi-shopping-cart" class="ml-2"/>
<Button icon="pi pi-shopping-cart" class="ml-2" />
</span>
</div>
</div>

View File

@ -6,11 +6,11 @@
<div class="card">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" contentClass="flex align-items-center">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
@ -18,7 +18,7 @@
<div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
<Button icon="pi pi-shopping-cart" class="ml-2"/>
<Button icon="pi pi-shopping-cart" class="ml-2" />
</span>
</div>
</div>