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

Added selected param to templates and fixed coloring issues

pull/5806/head
Cagatay Civici 2024-05-30 10:15:50 +03:00
parent ee110b7004
commit cc7ae3b82a
8 changed files with 56 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/lib/listbox/Listbox.d.ts vendored
View File

@ -478,6 +478,10 @@ export interface ListboxSlots {
* Option instance
*/
option: any;
/**
* Selection state
*/
selected: boolean;
/**
* Index of the option
*/

2
components/lib/listbox/Listbox.vue
View File

@ -95,7 +95,7 @@
<CheckIcon v-if="isSelected(option)" :class="cx('optionCheckIcon')" v-bind="ptm('optionCheckIcon')" />
<BlankIcon v-else :class="cx('optionBlankIcon')" v-bind="ptm('optionBlankIcon')" />
</template>
<slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
<slot name="option" :option="option" :selected="isSelected(option)" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
</li>
</template>
<li v-if="filterValue && (!items || (items && items.length === 0))" :class="cx('emptyMessage')" role="option" v-bind="ptm('emptyMessage')">

4
components/lib/orderlist/OrderList.d.ts vendored
View File

@ -299,6 +299,10 @@ export interface OrderListSlots {
* Item of the component
*/
item: any;
/**
* Selection state
*/
selected: boolean;
/**
* Index of the item.
*/

4
components/lib/orderlist/OrderList.vue
View File

@ -58,8 +58,8 @@
<template v-if="$slots.header" #header>
<slot name="header"></slot>
</template>
<template #option="{ option, index }">
<slot name="item" :item="option" :index="index" />
<template #option="{ option, selected, index }">
<slot name="item" :item="option" :selected="selected" :index="index" />
</template>
</Listbox>
</div>

4
components/lib/picklist/PickList.d.ts vendored
View File

@ -446,6 +446,10 @@ export interface PickListSlots {
* Item of the component
*/
item: any;
/**
* Selection state
*/
selected: boolean;
/**
* Index of the item
*/

8
components/lib/picklist/PickList.vue
View File

@ -59,8 +59,8 @@
<template v-if="$slots.sourceheader" #header>
<slot name="sourceheader"></slot>
</template>
<template #option="{ option, index }">
<slot name="item" :item="option" :index="index" />
<template #option="{ option, selected, index }">
<slot name="item" :item="option" :selected="selected" :index="index" />
</template>
</Listbox>
</div>
@ -123,8 +123,8 @@
<template v-if="$slots.targetheader" #header>
<slot name="targetheader"></slot>
</template>
<template #option="{ option, index }">
<slot name="item" :item="option" :index="index" />
<template #option="{ option, selected, index }">
<slot name="item" :item="option" :selected="selected" :index="index" />
</template>
</Listbox>
</div>

52
doc/orderlist/TemplateDoc.vue
View File

@ -4,17 +4,14 @@
</DocSectionText>
<div class="card sm:flex sm:justify-center">
<OrderList v-model="products" dataKey="id" breakpoint="575px" 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>
<span class="font-bold sm:ml-8">${{ item.price }}</span>
</div>
</template>
</OrderList>
@ -31,17 +28,14 @@ export default {
code: {
basic: `
<OrderList v-model="products" dataKey="id" breakpoint="575px" 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>
<span class="font-bold sm:ml-8">\${{ item.price }}</span>
</div>
</template>
</OrderList>
@ -50,17 +44,14 @@ export default {
<template>
<div class="card sm:flex sm:justify-center">
<OrderList v-model="products" dataKey="id" breakpoint="575px" 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>
<span class="font-bold sm:ml-8">\${{ item.price }}</span>
</div>
</template>
</OrderList>
@ -85,17 +76,14 @@ export default {
<template>
<div class="card sm:flex sm:justify-center">
<OrderList v-model="products" dataKey="id" breakpoint="575px" 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>
<span class="font-bold sm:ml-8">\${{ item.price }}</span>
</div>
</template>
</OrderList>

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>