OrderList PickList demo updates
tugcekucukoglu
parent
76fc9f54ec
commit
cda1e16bd8
|
|
@ -51047,7 +51047,21 @@
|
|||
}
|
||||
],
|
||||
"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",
|
||||
|
|
@ -57039,12 +57053,26 @@
|
|||
{
|
||||
"name": "scope",
|
||||
"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."
|
||||
}
|
||||
],
|
||||
"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",
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<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>
|
||||
<div class="card sm:flex sm:justify-center">
|
||||
<OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcList:root="w-full sm:w-56">
|
||||
<template #item="{ item }">
|
||||
{{ item.name }}
|
||||
<template #option="{ option }">
|
||||
{{ option.name }}
|
||||
</template>
|
||||
</OrderList>
|
||||
</div>
|
||||
|
|
@ -22,8 +22,8 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
<OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcList:root="w-full sm:w-56">
|
||||
<template #item="{ item }">
|
||||
{{ item.name }}
|
||||
<template #option="{ option }">
|
||||
{{ option.name }}
|
||||
</template>
|
||||
</OrderList>
|
||||
`,
|
||||
|
|
@ -31,8 +31,8 @@ export default {
|
|||
<template>
|
||||
<div class="card sm:flex sm:justify-center">
|
||||
<OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcList:root="w-full sm:w-56">
|
||||
<template #item="{ item }">
|
||||
{{ item.name }}
|
||||
<template #option="{ option }">
|
||||
{{ option.name }}
|
||||
</template>
|
||||
</OrderList>
|
||||
</div>
|
||||
|
|
@ -56,8 +56,8 @@ export default {
|
|||
<template>
|
||||
<div class="card sm:flex sm:justify-center">
|
||||
<OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcList:root="w-full sm:w-56">
|
||||
<template #item="{ item }">
|
||||
{{ item.name }}
|
||||
<template #option="{ option }">
|
||||
{{ option.name }}
|
||||
</template>
|
||||
</OrderList>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<template>
|
||||
<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>
|
||||
<div class="card sm:flex sm:justify-center">
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
<span class="font-medium text-sm">{{ option.name }}</span>
|
||||
<span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
|
||||
</div>
|
||||
<span class="font-bold sm:ml-8">${{ item.price }}</span>
|
||||
<span class="font-bold sm:ml-8">${{ option.price }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</OrderList>
|
||||
|
|
@ -28,14 +28,14 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
<span class="font-medium text-sm">{{ option.name }}</span>
|
||||
<span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
|
||||
</div>
|
||||
<span class="font-bold sm:ml-8">\${{ item.price }}</span>
|
||||
<span class="font-bold sm:ml-8">\${{ option.price }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</OrderList>
|
||||
|
|
@ -44,14 +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, selected }">
|
||||
<template #option="{ option , 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" />
|
||||
<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">
|
||||
<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>
|
||||
<span class="font-medium text-sm">{{ option.name }}</span>
|
||||
<span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
|
||||
</div>
|
||||
<span class="font-bold sm:ml-8">\${{ item.price }}</span>
|
||||
<span class="font-bold sm:ml-8">\${{ option.price }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</OrderList>
|
||||
|
|
@ -76,14 +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, selected }">
|
||||
<template #option="{ option , 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" />
|
||||
<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">
|
||||
<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>
|
||||
<span class="font-medium text-sm">{{ option.name }}</span>
|
||||
<span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
|
||||
</div>
|
||||
<span class="font-bold sm:ml-8">\${{ item.price }}</span>
|
||||
<span class="font-bold sm:ml-8">\${{ option.price }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</OrderList>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<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>
|
||||
<div class="card">
|
||||
<PickList v-model="products" dataKey="id" breakpoint="1400px">
|
||||
<template #item="{ item }">
|
||||
{{ item.name }}
|
||||
<template #option="{ option }">
|
||||
{{ option.name }}
|
||||
</template>
|
||||
</PickList>
|
||||
</div>
|
||||
|
|
@ -22,8 +22,8 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
<PickList v-model="products" dataKey="id" breakpoint="1400px">
|
||||
<template #item="{ item }">
|
||||
{{ item.name }}
|
||||
<template #option="{ option }">
|
||||
{{ option.name }}
|
||||
</template>
|
||||
</PickList>
|
||||
`,
|
||||
|
|
@ -31,8 +31,8 @@ export default {
|
|||
<template>
|
||||
<div class="card">
|
||||
<PickList v-model="products" dataKey="id" breakpoint="1400px">
|
||||
<template #item="{ item }">
|
||||
{{ item.name }}
|
||||
<template #option="{ option }">
|
||||
{{ option.name }}
|
||||
</template>
|
||||
</PickList>
|
||||
</div>
|
||||
|
|
@ -56,8 +56,8 @@ export default {
|
|||
<template>
|
||||
<div class="card">
|
||||
<PickList v-model="products" dataKey="id" breakpoint="1400px">
|
||||
<template #item="{ item }">
|
||||
{{ item.name }}
|
||||
<template #option="{ option }">
|
||||
{{ option.name }}
|
||||
</template>
|
||||
</PickList>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<template>
|
||||
<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>
|
||||
<div class="card">
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
<span class="font-medium text-sm">{{ option.name }}</span>
|
||||
<span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
|
||||
</div>
|
||||
<span class="font-bold">${{ item.price }}</span>
|
||||
<span class="font-bold">${{ option.price }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</PickList>
|
||||
|
|
@ -29,14 +29,14 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
<span class="font-medium text-sm">{{ option.name }}</span>
|
||||
<span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
|
||||
</div>
|
||||
<span class="font-bold">\${{ item.price }}</span>
|
||||
<span class="font-bold">\${{ option.price }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</PickList>
|
||||
|
|
@ -45,14 +45,14 @@ export default {
|
|||
<template>
|
||||
<div class="card">
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
<span class="font-medium text-sm">{{ option.name }}</span>
|
||||
<span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
|
||||
</div>
|
||||
<span class="font-bold">\${{ item.price }}</span>
|
||||
<span class="font-bold">\${{ option.price }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</PickList>
|
||||
|
|
@ -77,14 +77,14 @@ export default {
|
|||
<template>
|
||||
<div class="card">
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
<span class="font-medium text-sm">{{ option.name }}</span>
|
||||
<span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
|
||||
</div>
|
||||
<span class="font-bold">\${{ item.price }}</span>
|
||||
<span class="font-bold">\${{ option.price }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</PickList>
|
||||
|
|
|
|||
Loading…
Reference in New Issue