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

OrderList PickList demo updates

pull/5806/head
tugcekucukoglu 2024-05-30 14:10:35 +03:00
parent 76fc9f54ec
commit cda1e16bd8
5 changed files with 91 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
doc/common/apidoc/index.json
View File

@ -51047,7 +51047,21 @@
} }
], ],
"returnType": "VNode<RendererNode, RendererElement, Object>[]", "returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom item template." "description": "",
"deprecated": "since v4.0. Use option slot instead.\nCustom item template."
},
{
"name": "option",
"parameters": [
{
"name": "scope",
"optional": false,
"type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">option</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Option of the component</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">selected</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Selection state</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">index</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Index of the option.</span>\n }",
"description": "option slot's params."
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom option template."
}, },
{ {
"name": "controlsstart", "name": "controlsstart",
@ -57039,12 +57053,26 @@
{ {
"name": "scope", "name": "scope",
"optional": false, "optional": false,
"type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">item</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Item of the component</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">selected</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Selection state</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">index</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Index of the item</span>\n }", "type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">item</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Item of the component</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">selected</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Selection state</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">index</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Index of the item.</span>\n }",
"description": "item slot's params." "description": "item slot's params."
} }
], ],
"returnType": "VNode<RendererNode, RendererElement, Object>[]", "returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom item template." "description": "",
"deprecated": "since v4.0. Use option slot instead.\nCustom item template."
},
{
"name": "option",
"parameters": [
{
"name": "scope",
"optional": false,
"type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">option</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Option of the component</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">selected</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Selection state</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">index</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Index of the option.</span>\n }",
"description": "option slot's params."
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom option template."
}, },
{ {
"name": "sourceheader", "name": "sourceheader",

18
doc/orderlist/BasicDoc.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<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>option</i> template for its content.</p>
</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" pt:pcList:root="w-full sm:w-56"> <OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcList:root="w-full sm:w-56">
<template #item="{ item }"> <template #option="{ option }">
{{ item.name }} {{ option.name }}
</template> </template>
</OrderList> </OrderList>
</div> </div>
@ -22,8 +22,8 @@ export default {
code: { code: {
basic: ` basic: `
<OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcList:root="w-full sm:w-56"> <OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcList:root="w-full sm:w-56">
<template #item="{ item }"> <template #option="{ option }">
{{ item.name }} {{ option.name }}
</template> </template>
</OrderList> </OrderList>
`, `,
@ -31,8 +31,8 @@ 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" pt:pcList:root="w-full sm:w-56"> <OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcList:root="w-full sm:w-56">
<template #item="{ item }"> <template #option="{ option }">
{{ item.name }} {{ option.name }}
</template> </template>
</OrderList> </OrderList>
</div> </div>
@ -56,8 +56,8 @@ 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" pt:pcList:root="w-full sm:w-56"> <OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcList:root="w-full sm:w-56">
<template #item="{ item }"> <template #option="{ option }">
{{ item.name }} {{ option.name }}
</template> </template>
</OrderList> </OrderList>
</div> </div>

42
doc/orderlist/TemplateDoc.vue
View File

@ -1,17 +1,17 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<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>option</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 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, selected }"> <template #option="{ option, 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/' + option.image" :alt="option.name" />
<div class="flex-1 flex flex-col"> <div class="flex-1 flex flex-col">
<span class="font-medium text-sm">{{ item.name }}</span> <span class="font-medium text-sm">{{ option.name }}</span>
<span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ item.category }}</span> <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
</div> </div>
<span class="font-bold sm:ml-8">${{ item.price }}</span> <span class="font-bold sm:ml-8">${{ option.price }}</span>
</div> </div>
</template> </template>
</OrderList> </OrderList>
@ -28,14 +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, selected }"> <template #option="{ option , 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/' + option.image" :alt="option.name" />
<div class="flex-1 flex flex-col"> <div class="flex-1 flex flex-col">
<span class="font-medium text-sm">{{ item.name }}</span> <span class="font-medium text-sm">{{ option.name }}</span>
<span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ item.category }}</span> <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
</div> </div>
<span class="font-bold sm:ml-8">\${{ item.price }}</span> <span class="font-bold sm:ml-8">\${{ option.price }}</span>
</div> </div>
</template> </template>
</OrderList> </OrderList>
@ -44,14 +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, selected }"> <template #option="{ option , 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/' + option.image" :alt="option.name" />
<div class="flex-1 flex flex-col"> <div class="flex-1 flex flex-col">
<span class="font-medium text-sm">{{ item.name }}</span> <span class="font-medium text-sm">{{ option.name }}</span>
<span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ item.category }}</span> <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
</div> </div>
<span class="font-bold sm:ml-8">\${{ item.price }}</span> <span class="font-bold sm:ml-8">\${{ option.price }}</span>
</div> </div>
</template> </template>
</OrderList> </OrderList>
@ -76,14 +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, selected }"> <template #option="{ option , 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/' + option.image" :alt="option.name" />
<div class="flex-1 flex flex-col"> <div class="flex-1 flex flex-col">
<span class="font-medium text-sm">{{ item.name }}</span> <span class="font-medium text-sm">{{ option.name }}</span>
<span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ item.category }}</span> <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
</div> </div>
<span class="font-bold sm:ml-8">\${{ item.price }}</span> <span class="font-bold sm:ml-8">\${{ option.price }}</span>
</div> </div>
</template> </template>
</OrderList> </OrderList>

18
doc/picklist/BasicDoc.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<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>option</i> instance and the index via slotProps.</p>
</DocSectionText> </DocSectionText>
<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 #option="{ option }">
{{ item.name }} {{ option.name }}
</template> </template>
</PickList> </PickList>
</div> </div>
@ -22,8 +22,8 @@ export default {
code: { code: {
basic: ` basic: `
<PickList v-model="products" dataKey="id" breakpoint="1400px"> <PickList v-model="products" dataKey="id" breakpoint="1400px">
<template #item="{ item }"> <template #option="{ option }">
{{ item.name }} {{ option.name }}
</template> </template>
</PickList> </PickList>
`, `,
@ -31,8 +31,8 @@ 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 #option="{ option }">
{{ item.name }} {{ option.name }}
</template> </template>
</PickList> </PickList>
</div> </div>
@ -56,8 +56,8 @@ 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 #option="{ option }">
{{ item.name }} {{ option.name }}
</template> </template>
</PickList> </PickList>
</div> </div>

42
doc/picklist/TemplateDoc.vue
View File

@ -1,17 +1,17 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<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>option</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" scrollHeight="20rem"> <PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
<template #item="{ item, selected }"> <template #option="{ option, 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/' + option.image" :alt="option.name" />
<div class="flex-1 flex flex-col"> <div class="flex-1 flex flex-col">
<span class="font-medium text-sm">{{ item.name }}</span> <span class="font-medium text-sm">{{ option.name }}</span>
<span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ item.category }}</span> <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
</div> </div>
<span class="font-bold">${{ item.price }}</span> <span class="font-bold">${{ option.price }}</span>
</div> </div>
</template> </template>
</PickList> </PickList>
@ -29,14 +29,14 @@ 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, selected }"> <template #option="{ option , 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/' + option.image" :alt="option.name" />
<div class="flex-1 flex flex-col"> <div class="flex-1 flex flex-col">
<span class="font-medium text-sm">{{ item.name }}</span> <span class="font-medium text-sm">{{ option.name }}</span>
<span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ item.category }}</span> <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
</div> </div>
<span class="font-bold">\${{ item.price }}</span> <span class="font-bold">\${{ option.price }}</span>
</div> </div>
</template> </template>
</PickList> </PickList>
@ -45,14 +45,14 @@ 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, selected }"> <template #option="{ option , 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/' + option.image" :alt="option.name" />
<div class="flex-1 flex flex-col"> <div class="flex-1 flex flex-col">
<span class="font-medium text-sm">{{ item.name }}</span> <span class="font-medium text-sm">{{ option.name }}</span>
<span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ item.category }}</span> <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
</div> </div>
<span class="font-bold">\${{ item.price }}</span> <span class="font-bold">\${{ option.price }}</span>
</div> </div>
</template> </template>
</PickList> </PickList>
@ -77,14 +77,14 @@ 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, selected }"> <template #option="{ option , 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/' + option.image" :alt="option.name" />
<div class="flex-1 flex flex-col"> <div class="flex-1 flex flex-col">
<span class="font-medium text-sm">{{ item.name }}</span> <span class="font-medium text-sm">{{ option.name }}</span>
<span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ item.category }}</span> <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
</div> </div>
<span class="font-bold">\${{ item.price }}</span> <span class="font-bold">\${{ option.price }}</span>
</div> </div>
</template> </template>
</PickList> </PickList>