vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 17:02:38 +00:00
Code Issues Projects Releases Packages Wiki Activity

Added selected param to templates and fixed coloring issues

Browse source
This commit is contained in:
Cagatay Civici 2024-05-30 10:15:50 +03:00
parent ee110b7004
commit cc7ae3b82a
8 changed files with 56 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

46
doc/picklist/TemplateDoc.vue
View file

@ -4,15 +4,12 @@
</DocSectionText>
<div class="card">
<PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
<template #item="{ item }">
<template #item="{ item, selected }">
<div class="flex flex-wrap p-1 items-center gap-4 w-full">
<img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-col gap-1">
<span class="font-medium">{{ item.name }}</span>
<div class="flex items-center gap-1">
<i class="pi pi-tag text-sm text-surface-500 dark:text-surface-400"></i>
<span class="text-sm text-surface-500 dark:text-surface-400">{{ item.category }}</span>
</div>
<div class="flex-1 flex flex-col">
<span class="font-medium text-sm">{{ item.name }}</span>
<span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ item.category }}</span>
</div>
<span class="font-bold">${{ item.price }}</span>
</div>
@ -32,15 +29,12 @@ export default {
code: {
basic: `
<PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem>
<template #item="{ item }">
<template #item="{ item, selected }">
<div class="flex flex-wrap p-1 items-center gap-4 w-full">
<img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-col gap-1">
<span class="font-medium">{{ item.name }}</span>
<div class="flex items-center gap-1">
<i class="pi pi-tag text-sm text-surface-500 dark:text-surface-400"></i>
<span class="text-sm text-surface-500 dark:text-surface-400">{{ item.category }}</span>
</div>
<div class="flex-1 flex flex-col">
<span class="font-medium text-sm">{{ item.name }}</span>
<span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ item.category }}</span>
</div>
<span class="font-bold">\${{ item.price }}</span>
</div>
@ -51,15 +45,12 @@ export default {
<template>
<div class="card">
<PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem>
<template #item="{ item }">
<template #item="{ item, selected }">
<div class="flex flex-wrap p-1 items-center gap-4 w-full">
<img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-col gap-1">
<span class="font-medium">{{ item.name }}</span>
<div class="flex items-center gap-1">
<i class="pi pi-tag text-sm text-surface-500 dark:text-surface-400"></i>
<span class="text-sm text-surface-500 dark:text-surface-400">{{ item.category }}</span>
</div>
<div class="flex-1 flex flex-col">
<span class="font-medium text-sm">{{ item.name }}</span>
<span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ item.category }}</span>
</div>
<span class="font-bold">\${{ item.price }}</span>
</div>
@ -86,15 +77,12 @@ export default {
<template>
<div class="card">
<PickList v-model="products" dataKey="id" breakpoint="1400px">
<template #item="{ item }">
<div class="flex flex-wrap p-1 items-center gap-4">
<template #item="{ item, selected }">
<div class="flex flex-wrap p-1 items-center gap-4 w-full">
<img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-col gap-1">
<span class="font-medium">{{ item.name }}</span>
<div class="flex items-center gap-1">
<i class="pi pi-tag text-sm text-surface-500 dark:text-surface-400"></i>
<span class="text-sm text-surface-500 dark:text-surface-400">{{ item.category }}</span>
</div>
<div class="flex-1 flex flex-col">
<span class="font-medium text-sm">{{ item.name }}</span>
<span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ item.category }}</span>
</div>
<span class="font-bold">\${{ item.price }}</span>
</div>