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

Visual updates to orderlist-picklist demos

pull/5507/head
Cagatay Civici 2024-04-02 12:21:07 +03:00
parent 5ba2a6b9d5
commit 26a2374f1d
5 changed files with 81 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/lib/themes/primeone/base/picklist/index.js
View File

@ -15,5 +15,9 @@ export default {
.p-picklist-list-wrapper { .p-picklist-list-wrapper {
flex: 1 1 50%; flex: 1 1 50%;
} }
.p-picklist .p-listbox {
height: 100%;
}
` `
}; };

8
doc/orderlist/BasicDoc.vue
View File

@ -3,7 +3,7 @@
<p>OrderList requires an array as its value bound with the <i>v-model</i> directive and <i>item</i> template for its content.</p> <p>OrderList requires an array as its value bound with the <i>v-model</i> directive and <i>item</i> template for its content.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<OrderList v-model="products" dataKey="id" breakpoint="1400px"> <OrderList v-model="products" dataKey="id" breakpoint="1400px" pt:list:root="w-full md:w-14rem">
<template #item="{ item }"> <template #item="{ item }">
{{ item.name }} {{ item.name }}
</template> </template>
@ -21,7 +21,7 @@ export default {
products: null, products: null,
code: { code: {
basic: ` basic: `
<OrderList v-model="products" dataKey="id" breakpoint="1400px"> <OrderList v-model="products" dataKey="id" breakpoint="1400px" pt:list:root="w-full md:w-14rem">
<template #item="{ item }"> <template #item="{ item }">
{{ item.name }} {{ item.name }}
</template> </template>
@ -30,7 +30,7 @@ export default {
options: ` options: `
<template> <template>
<div class="card lg:flex lg:justify-content-center"> <div class="card lg:flex lg:justify-content-center">
<OrderList v-model="products" dataKey="id" breakpoint="1400px"> <OrderList v-model="products" dataKey="id" breakpoint="1400px" pt:list:root="w-full md:w-14rem">
<template #item="{ item }"> <template #item="{ item }">
{{ item.name }} {{ item.name }}
</template> </template>
@ -55,7 +55,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card lg:flex lg:justify-content-center"> <div class="card lg:flex lg:justify-content-center">
<OrderList v-model="products" dataKey="id" breakpoint="1400px"> <OrderList v-model="products" dataKey="id" breakpoint="1400px" pt:list:root="w-full md:w-14rem">
<template #item="{ item }"> <template #item="{ item }">
{{ item.name }} {{ item.name }}
</template> </template>

74
doc/orderlist/TemplateDoc.vue
View File

@ -3,16 +3,15 @@
<p>For custom content support define an <i>item</i> template that gets the item instance as a parameter. In addition <i>header</i> slot is provided for further customization.</p> <p>For custom content support define an <i>item</i> template that gets the item instance as a parameter. In addition <i>header</i> slot is provided for further customization.</p>
</DocSectionText> </DocSectionText>
<div class="card lg:flex lg:justify-content-center"> <div class="card lg:flex lg:justify-content-center">
<OrderList v-model="products" dataKey="id" breakpoint="1400px"> <OrderList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
<template #header> List of Products </template>
<template #item="{ item }"> <template #item="{ item }">
<div class="flex flex-wrap p-2 align-items-center gap-3"> <div class="flex flex-wrap p-1 align-items-center gap-3">
<img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" /> <img class="w-3rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-column gap-2"> <div class="flex-1 flex flex-column gap-1">
<span class="font-bold">{{ item.name }}</span> <span class="font-medium">{{ item.name }}</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-1">
<i class="pi pi-tag text-sm"></i> <i class="pi pi-tag text-sm text-secondary"></i>
<span>{{ item.category }}</span> <span class="text-sm text-secondary">{{ item.category }}</span>
</div> </div>
</div> </div>
<span class="font-bold">${{ item.price }}</span> <span class="font-bold">${{ item.price }}</span>
@ -31,19 +30,18 @@ export default {
products: null, products: null,
code: { code: {
basic: ` basic: `
<OrderList v-model="products" dataKey="id" breakpoint="1400px"> <OrderList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
<template #header> List of Products </template>
<template #item="{ item }"> <template #item="{ item }">
<div class="flex flex-wrap p-2 align-items-center gap-3"> <div class="flex flex-wrap p-1 align-items-center gap-3">
<img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" /> <img class="w-3rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-column gap-2"> <div class="flex-1 flex flex-column gap-1">
<span class="font-bold">{{ item.name }}</span> <span class="font-medium">{{ item.name }}</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-1">
<i class="pi pi-tag text-sm"></i> <i class="pi pi-tag text-sm text-secondary"></i>
<span>{{ item.category }}</span> <span class="text-sm text-secondary">{{ item.category }}</span>
</div> </div>
</div> </div>
<span class="font-bold">$ {{ item.price }}</span> <span class="font-bold">\${{ item.price }}</span>
</div> </div>
</template> </template>
</OrderList> </OrderList>
@ -51,19 +49,18 @@ export default {
options: ` options: `
<template> <template>
<div class="card lg:flex lg:justify-content-center"> <div class="card lg:flex lg:justify-content-center">
<OrderList v-model="products" dataKey="id" breakpoint="1400px"> <OrderList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
<template #header> List of Products </template>
<template #item="{ item }"> <template #item="{ item }">
<div class="flex flex-wrap p-2 align-items-center gap-3"> <div class="flex flex-wrap p-1 align-items-center gap-3">
<img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" /> <img class="w-3rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-column gap-2"> <div class="flex-1 flex flex-column gap-1">
<span class="font-bold">{{ item.name }}</span> <span class="font-medium">{{ item.name }}</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-1">
<i class="pi pi-tag text-sm"></i> <i class="pi pi-tag text-sm text-secondary"></i>
<span>{{ item.category }}</span> <span class="text-sm text-secondary">{{ item.category }}</span>
</div> </div>
</div> </div>
<span class="font-bold">$ {{ item.price }}</span> <span class="font-bold">\${{ item.price }}</span>
</div> </div>
</template> </template>
</OrderList> </OrderList>
@ -87,19 +84,18 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card lg:flex lg:justify-content-center"> <div class="card lg:flex lg:justify-content-center">
<OrderList v-model="products" dataKey="id" breakpoint="1400px"> <OrderList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
<template #header> List of Products </template>
<template #item="{ item }"> <template #item="{ item }">
<div class="flex flex-wrap p-2 align-items-center gap-3"> <div class="flex flex-wrap p-1 align-items-center gap-3">
<img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" /> <img class="w-3rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-column gap-2"> <div class="flex-1 flex flex-column gap-1">
<span class="font-bold">{{ item.name }}</span> <span class="font-medium">{{ item.name }}</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-1">
<i class="pi pi-tag text-sm"></i> <i class="pi pi-tag text-sm text-secondary"></i>
<span>{{ item.category }}</span> <span class="text-sm text-secondary">{{ item.category }}</span>
</div> </div>
</div> </div>
<span class="font-bold">$ {{ item.price }}</span> <span class="font-bold">\${{ item.price }}</span>
</div> </div>
</template> </template>
</OrderList> </OrderList>

8
doc/picklist/BasicDoc.vue
View File

@ -3,7 +3,7 @@
<p>PickList requires a multidimensional array as its value bound with the <i>v-model </i>directive and a template for its content that gets the <i>item</i> instance and the index via slotProps.</p> <p>PickList requires a multidimensional array as its value bound with the <i>v-model </i>directive and a template for its content that gets the <i>item</i> instance and the index via slotProps.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<PickList v-model="products" dataKey="id" listStyle="height:342px" breakpoint="1400px"> <PickList v-model="products" dataKey="id" breakpoint="1400px">
<template #item="{ item }"> <template #item="{ item }">
{{ item.name }} {{ item.name }}
</template> </template>
@ -21,7 +21,7 @@ export default {
products: null, products: null,
code: { code: {
basic: ` basic: `
<PickList v-model="products" dataKey="id" listStyle="height:342px" breakpoint="1400px"> <PickList v-model="products" dataKey="id" breakpoint="1400px">
<template #item="{ item }"> <template #item="{ item }">
{{ item.name }} {{ item.name }}
</template> </template>
@ -30,7 +30,7 @@ export default {
options: ` options: `
<template> <template>
<div class="card"> <div class="card">
<PickList v-model="products" dataKey="id" listStyle="height:342px" breakpoint="1400px"> <PickList v-model="products" dataKey="id" breakpoint="1400px">
<template #item="{ item }"> <template #item="{ item }">
{{ item.name }} {{ item.name }}
</template> </template>
@ -55,7 +55,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card"> <div class="card">
<PickList v-model="products" dataKey="id" listStyle="height:342px" breakpoint="1400px"> <PickList v-model="products" dataKey="id" breakpoint="1400px">
<template #item="{ item }"> <template #item="{ item }">
{{ item.name }} {{ item.name }}
</template> </template>

76
doc/picklist/TemplateDoc.vue
View File

@ -3,17 +3,15 @@
<p>For custom content support define an <i>item</i> template that gets the item instance as a parameter. In addition <i>sourceheader</i> and <i>targetheader</i> slots are provided for further customization.</p> <p>For custom content support define an <i>item</i> template that gets the item instance as a parameter. In addition <i>sourceheader</i> and <i>targetheader</i> slots are provided for further customization.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<PickList v-model="products" dataKey="id" breakpoint="1400px" listStyle="height:342px"> <PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
<template #sourceheader> Available </template>
<template #targetheader> Selected </template>
<template #item="{ item }"> <template #item="{ item }">
<div class="flex flex-wrap p-2 align-items-center gap-3"> <div class="flex flex-wrap p-1 align-items-center gap-3">
<img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" /> <img class="w-3rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-column gap-2"> <div class="flex-1 flex flex-column gap-1">
<span class="font-bold">{{ item.name }}</span> <span class="font-medium">{{ item.name }}</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-1">
<i class="pi pi-tag text-sm"></i> <i class="pi pi-tag text-sm text-secondary"></i>
<span>{{ item.category }}</span> <span class="text-sm text-secondary">{{ item.category }}</span>
</div> </div>
</div> </div>
<span class="font-bold">${{ item.price }}</span> <span class="font-bold">${{ item.price }}</span>
@ -33,20 +31,18 @@ export default {
products: null, products: null,
code: { code: {
basic: ` basic: `
<PickList v-model="products" dataKey="id" breakpoint="1400px"> <PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem>
<template #sourceheader> Available </template>
<template #targetheader> Selected </template>
<template #item="{ item }"> <template #item="{ item }">
<div class="flex flex-wrap p-2 align-items-center gap-3"> <div class="flex flex-wrap p-1 align-items-center gap-3">
<img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" /> <img class="w-3rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-column gap-2"> <div class="flex-1 flex flex-column gap-1">
<span class="font-bold">{{ item.name }}</span> <span class="font-medium">{{ item.name }}</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-1">
<i class="pi pi-tag text-sm"></i> <i class="pi pi-tag text-sm text-secondary"></i>
<span>{{ item.category }}</span> <span class="text-sm text-secondary">{{ item.category }}</span>
</div> </div>
</div> </div>
<span class="font-bold">$ {{ item.price }}</span> <span class="font-bold">\${{ item.price }}</span>
</div> </div>
</template> </template>
</PickList> </PickList>
@ -54,20 +50,18 @@ export default {
options: ` options: `
<template> <template>
<div class="card"> <div class="card">
<PickList v-model="products" dataKey="id" breakpoint="1400px"> <PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem>
<template #sourceheader> Available </template>
<template #targetheader> Selected </template>
<template #item="{ item }"> <template #item="{ item }">
<div class="flex flex-wrap p-2 align-items-center gap-3"> <div class="flex flex-wrap p-1 align-items-center gap-3">
<img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" /> <img class="w-3rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-column gap-2"> <div class="flex-1 flex flex-column gap-1">
<span class="font-bold">{{ item.name }}</span> <span class="font-medium">{{ item.name }}</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-1">
<i class="pi pi-tag text-sm"></i> <i class="pi pi-tag text-sm text-secondary"></i>
<span>{{ item.category }}</span> <span class="text-sm text-secondary">{{ item.category }}</span>
</div> </div>
</div> </div>
<span class="font-bold">$ {{ item.price }}</span> <span class="font-bold">\${{ item.price }}</span>
</div> </div>
</template> </template>
</PickList> </PickList>
@ -92,19 +86,17 @@ 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 #sourceheader> Available </template>
<template #targetheader> Selected </template>
<template #item="{ item }"> <template #item="{ item }">
<div class="flex flex-wrap p-2 align-items-center gap-3"> <div class="flex flex-wrap p-1 align-items-center gap-3">
<img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" /> <img class="w-3rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-column gap-2"> <div class="flex-1 flex flex-column gap-1">
<span class="font-bold">{{ item.name }}</span> <span class="font-medium">{{ item.name }}</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-1">
<i class="pi pi-tag text-sm"></i> <i class="pi pi-tag text-sm text-secondary"></i>
<span>{{ item.category }}</span> <span class="text-sm text-secondary">{{ item.category }}</span>
</div> </div>
</div> </div>
<span class="font-bold">$ {{ item.price }}</span> <span class="font-bold">\${{ item.price }}</span>
</div> </div>
</template> </template>
</PickList> </PickList>