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 instance
*/ */
option: any; option: any;
/**
* Selection state
*/
selected: boolean;
/** /**
* Index of the option * 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')" /> <CheckIcon v-if="isSelected(option)" :class="cx('optionCheckIcon')" v-bind="ptm('optionCheckIcon')" />
<BlankIcon v-else :class="cx('optionBlankIcon')" v-bind="ptm('optionBlankIcon')" /> <BlankIcon v-else :class="cx('optionBlankIcon')" v-bind="ptm('optionBlankIcon')" />
</template> </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> </li>
</template> </template>
<li v-if="filterValue && (!items || (items && items.length === 0))" :class="cx('emptyMessage')" role="option" v-bind="ptm('emptyMessage')"> <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 of the component
*/ */
item: any; item: any;
/**
* Selection state
*/
selected: boolean;
/** /**
* Index of the item. * Index of the item.
*/ */

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

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

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

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

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

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

52
doc/orderlist/TemplateDoc.vue
View File

@ -4,17 +4,14 @@
</DocSectionText> </DocSectionText>
<div class="card sm:flex sm:justify-center"> <div class="card sm:flex sm:justify-center">
<OrderList v-model="products" dataKey="id" breakpoint="575px" scrollHeight="20rem"> <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"> <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" /> <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"> <div class="flex-1 flex flex-col">
<span class="font-medium">{{ item.name }}</span> <span class="font-medium text-sm">{{ item.name }}</span>
<div class="flex items-center gap-1"> <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ item.category }}</span>
<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> </div>
<span class="font-bold">${{ item.price }}</span> <span class="font-bold sm:ml-8">${{ item.price }}</span>
</div> </div>
</template> </template>
</OrderList> </OrderList>
@ -31,17 +28,14 @@ export default {
code: { code: {
basic: ` basic: `
<OrderList v-model="products" dataKey="id" breakpoint="575px" scrollHeight="20rem"> <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"> <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" /> <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"> <div class="flex-1 flex flex-col">
<span class="font-medium">{{ item.name }}</span> <span class="font-medium text-sm">{{ item.name }}</span>
<div class="flex items-center gap-1"> <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ item.category }}</span>
<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> </div>
<span class="font-bold">\${{ item.price }}</span> <span class="font-bold sm:ml-8">\${{ item.price }}</span>
</div> </div>
</template> </template>
</OrderList> </OrderList>
@ -50,17 +44,14 @@ export default {
<template> <template>
<div class="card sm:flex sm:justify-center"> <div class="card sm:flex sm:justify-center">
<OrderList v-model="products" dataKey="id" breakpoint="575px" scrollHeight="20rem"> <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"> <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" /> <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"> <div class="flex-1 flex flex-col">
<span class="font-medium">{{ item.name }}</span> <span class="font-medium text-sm">{{ item.name }}</span>
<div class="flex items-center gap-1"> <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ item.category }}</span>
<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> </div>
<span class="font-bold">\${{ item.price }}</span> <span class="font-bold sm:ml-8">\${{ item.price }}</span>
</div> </div>
</template> </template>
</OrderList> </OrderList>
@ -85,17 +76,14 @@ export default {
<template> <template>
<div class="card sm:flex sm:justify-center"> <div class="card sm:flex sm:justify-center">
<OrderList v-model="products" dataKey="id" breakpoint="575px" scrollHeight="20rem"> <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"> <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" /> <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"> <div class="flex-1 flex flex-col">
<span class="font-medium">{{ item.name }}</span> <span class="font-medium text-sm">{{ item.name }}</span>
<div class="flex items-center gap-1"> <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ item.category }}</span>
<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> </div>
<span class="font-bold">\${{ item.price }}</span> <span class="font-bold sm:ml-8">\${{ item.price }}</span>
</div> </div>
</template> </template>
</OrderList> </OrderList>

46
doc/picklist/TemplateDoc.vue
View File

@ -4,15 +4,12 @@
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem"> <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"> <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" /> <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"> <div class="flex-1 flex flex-col">
<span class="font-medium">{{ item.name }}</span> <span class="font-medium text-sm">{{ item.name }}</span>
<div class="flex items-center gap-1"> <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ item.category }}</span>
<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> </div>
<span class="font-bold">${{ item.price }}</span> <span class="font-bold">${{ item.price }}</span>
</div> </div>
@ -32,15 +29,12 @@ export default {
code: { code: {
basic: ` basic: `
<PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem> <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"> <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" /> <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"> <div class="flex-1 flex flex-col">
<span class="font-medium">{{ item.name }}</span> <span class="font-medium text-sm">{{ item.name }}</span>
<div class="flex items-center gap-1"> <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ item.category }}</span>
<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> </div>
<span class="font-bold">\${{ item.price }}</span> <span class="font-bold">\${{ item.price }}</span>
</div> </div>
@ -51,15 +45,12 @@ export default {
<template> <template>
<div class="card"> <div class="card">
<PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem> <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"> <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" /> <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"> <div class="flex-1 flex flex-col">
<span class="font-medium">{{ item.name }}</span> <span class="font-medium text-sm">{{ item.name }}</span>
<div class="flex items-center gap-1"> <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ item.category }}</span>
<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> </div>
<span class="font-bold">\${{ item.price }}</span> <span class="font-bold">\${{ item.price }}</span>
</div> </div>
@ -86,15 +77,12 @@ export default {
<template> <template>
<div class="card"> <div class="card">
<PickList v-model="products" dataKey="id" breakpoint="1400px"> <PickList v-model="products" dataKey="id" breakpoint="1400px">
<template #item="{ item }"> <template #item="{ item, selected }">
<div class="flex flex-wrap p-1 items-center gap-4"> <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" /> <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"> <div class="flex-1 flex flex-col">
<span class="font-medium">{{ item.name }}</span> <span class="font-medium text-sm">{{ item.name }}</span>
<div class="flex items-center gap-1"> <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ item.category }}</span>
<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> </div>
<span class="font-bold">\${{ item.price }}</span> <span class="font-bold">\${{ item.price }}</span>
</div> </div>