2022-09-09 20:41:18 +00:00
< template >
2022-12-12 20:26:59 +00:00
< ClientOnly
> < AppDoc name = "OrderListDemo" :sources ="sources" :service ="['ProductService']" :data ="['products-small']" github = "orderlist/OrderListDemo.vue" >
< h5 > Import via Module < / h5 >
< pre v -code .script > < code >
2022-09-09 20:41:18 +00:00
import OrderList from 'primevue/orderlist' ;
< / code > < / pre >
2022-12-12 20:26:59 +00:00
< h5 > Import via CDN < / h5 >
< pre v-code > < code >
2022-09-09 20:41:18 +00:00
& lt ; script src = "https://unpkg.com/primevue@^3/core/core.min.js" & gt ; & lt ; / s c r i p t & g t ;
& lt ; script src = "https://unpkg.com/primevue@^3/orderlist/orderlist.min.js" & gt ; & lt ; / s c r i p t & g t ;
< / code > < / pre >
2022-12-12 20:26:59 +00:00
< h5 > Getting Started < / h5 >
< p > OrderList requires an array as its value bound with the v - model directive and a template for its content . < / p >
< p > Header of the component is defined with the "header" template and to define the content of an item in the list a named template called "item" needs to be defined which gets the < i > item < / i > and the < i > index < / i > via slotProps . < / p >
< pre v-code > < code > < template v-pre >
2022-09-09 20:41:18 +00:00
& lt ; OrderList v - model = "cars" listStyle = "height:auto" dataKey = "vin" & gt ;
& lt ; template # header & gt ;
List of Cars
& lt ; / t e m p l a t e & g t ;
& lt ; template # item = "slotProps" & gt ;
& lt ; div class = "p-caritem" & gt ;
2022-12-08 12:26:57 +00:00
& lt ; img : src = "'demo/images/car/' + slotProps.item.brand + '.png'" & gt ;
2022-09-09 20:41:18 +00:00
& lt ; div & gt ;
& lt ; span class = "p-caritem-vin" & gt ; { { slotProps . item . vin } } & lt ; / s p a n & g t ;
& lt ; span & gt ; { { slotProps . item . year } } - { { slotProps . item . color } } & lt ; / s p a n & g t ;
& lt ; / d i v & g t ;
& lt ; / d i v & g t ;
& lt ; / t e m p l a t e & g t ;
& lt ; / O r d e r L i s t & g t ;
< / template >
< / code > < / pre >
2022-12-12 20:26:59 +00:00
< h5 > Selection < / h5 >
< p >
In case you ' d need to access the selected items in the list , define a binding to the < i > selection < / i > property with the v - model directive so that it gets updated when the user makes a selection . Since it is two - way binding enabled ,
your changes to the selection will be reflected as well . Note that this is optional and only necessary when you need to access the selection .
< / p >
2022-09-09 20:41:18 +00:00
2022-12-12 20:26:59 +00:00
< p > Use the v - model directive to enable two - way binding . < / p >
2022-09-09 20:41:18 +00:00
2022-12-12 20:26:59 +00:00
< pre v-code > < code > < template v-pre >
2022-09-09 20:41:18 +00:00
& lt ; OrderList v - model = "cars" dataKey = "vin" v - model : selection = "selection" & gt ;
& lt ; template # header & gt ;
List of Cars
& lt ; / t e m p l a t e & g t ;
& lt ; template # item = "slotProps" & gt ;
& lt ; div class = "p-caritem" & gt ;
2022-12-08 12:26:57 +00:00
& lt ; img : src = "'demo/images/car/' + slotProps.item.brand + '.png'" & gt ;
2022-09-09 20:41:18 +00:00
& lt ; div & gt ;
& lt ; span class = "p-caritem-vin" & gt ; { { slotProps . item . vin } } & lt ; / s p a n & g t ;
& lt ; span & gt ; { { slotProps . item . year } } - { { slotProps . item . color } } & lt ; / s p a n & g t ;
& lt ; / d i v & g t ;
& lt ; / d i v & g t ;
& lt ; / t e m p l a t e & g t ;
& lt ; / O r d e r L i s t & g t ;
< / template >
< / code > < / pre >
2022-12-12 20:26:59 +00:00
< h5 > DataKey < / h5 >
< p > It is recommended to provide the name of the field that uniquely identifies the a record in the data via the < i > dataKey < / i > property for better performance . < / p >
2022-09-09 20:41:18 +00:00
2022-12-12 20:26:59 +00:00
< h5 > Templating < / h5 >
< p >
In addition to the < i > item < / i > template , < i > header < / i > is provided to place custom content at the list header . Controls section can also be customized to place content before and after the buttons with < i > controlsstart < / i > and
< i > controlsend < / i > slots respectively .
< / p >
2022-09-09 20:41:18 +00:00
2022-12-12 20:26:59 +00:00
< h5 > Properties < / h5 >
< p > Any property as style and class are passed to the main container element . Following are the additional properties to configure the component . < / p >
< div class = "doc-tablewrapper" >
< table class = "doc-table" >
< thead >
< tr >
< th > Name < / th >
< th > Type < / th >
< th > Default < / th >
< th > Description < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > modelValue < / td >
< td > array < / td >
< td > null < / td >
< td > Value of the component . < / td >
< / tr >
< tr >
< td > selection < / td >
< td > any < / td >
< td > null < / td >
< td > Selected items in the list . < / td >
< / tr >
< tr >
< td > metaKeySelection < / td >
< td > boolean < / td >
< td > true < / td >
< td >
Defines whether metaKey is requred or not for the selection . < br / >
When true metaKey needs to be pressed to select or unselect an item and < br / >
when set to false selection of each item can be toggled individually . On touch enabled devices , metaKeySelection is turned off automatically .
< / td >
< / tr >
< tr >
< td > dataKey < / td >
< td > string < / td >
< td > null < / td >
< td > Name of the field that uniquely identifies the a record in the data . < / td >
< / tr >
< tr >
< td > listStyle < / td >
< td > object < / td >
< td > null < / td >
< td > Inline style of the the list element . < / td >
< / tr >
< tr >
< td > responsive < / td >
< td > boolean < / td >
< td > true < / td >
< td > Whether the list optimizes layout based on screen size . < / td >
< / tr >
< tr >
< td > breakpoint < / td >
< td > string < / td >
< td > 960 px < / td >
< td > The breakpoint to define the maximum width boundary when responsiveness is enabled . < / td >
< / tr >
< tr >
< td > stripedRows < / td >
< td > boolean < / td >
< td > false < / td >
< td > Whether to displays rows with alternating colors . < / td >
< / tr >
< tr >
< td > tabindex < / td >
< td > number < / td >
< td > 0 < / td >
< td > Index of the element in tabbing order . < / td >
< / tr >
< tr >
< td > moveUpButtonProps < / td >
< td > object < / td >
< td > null < / td >
< td > Uses to pass all properties of the HTMLButtonElement to the move up button inside the component . < / td >
< / tr >
< tr >
< td > moveTopButtonProps < / td >
< td > object < / td >
< td > null < / td >
< td > Uses to pass all properties of the HTMLButtonElement to the move top button inside the component . < / td >
< / tr >
< tr >
< td > moveDownButtonProps < / td >
< td > object < / td >
< td > null < / td >
< td > Uses to pass all properties of the HTMLButtonElement to the move down button inside the component . < / td >
< / tr >
< tr >
< td > moveBottomButtonProps < / td >
< td > object < / td >
< td > null < / td >
< td > Uses to pass all properties of the HTMLButtonElement to the move bottom button inside the component . < / td >
< / tr >
< tr >
< td > aria - label < / td >
< td > string < / td >
< td > null < / td >
< td > Defines a string value that labels an interactive list element . < / td >
< / tr >
< tr >
< td > aria - labelledby < / td >
< td > string < / td >
< td > null < / td >
< td > Identifier of the underlying list element . < / td >
< / tr >
< / tbody >
< / table >
< / div >
2022-09-09 20:41:18 +00:00
2022-12-12 20:26:59 +00:00
< h5 > Events < / h5 >
< div class = "doc-tablewrapper" >
< table class = "doc-table" >
< thead >
< tr >
< th > Name < / th >
< th > Parameters < / th >
< th > Description < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > reorder < / td >
< td >
event . originalEvent : browser event < br / >
event . value : Ordered list < br / >
event . direction : Direction of the change ; "up" , "down" , "bottom" , "top"
< / td >
< td > Callback to invoke when the list is reordered . < / td >
< / tr >
< tr >
< td > selection - change < / td >
< td >
event . originalEvent : browser event < br / >
event . value : Ordered list
< / td >
< td > Callback to invoke when selection changes . < / td >
< / tr >
< / tbody >
< / table >
< / div >
2022-09-09 20:41:18 +00:00
2022-12-12 20:26:59 +00:00
< h5 > Slots < / h5 >
< div class = "doc-tablewrapper" >
< table class = "doc-table" >
< thead >
< tr >
< th > Name < / th >
< th > Parameters < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > header < / td >
< td > - < / td >
< / tr >
< tr >
< td > item < / td >
< td >
item : Item of the component < br / >
index : Index of the item
< / td >
< / tr >
< tr >
< td > controlsstart < / td >
< td > - < / td >
< / tr >
< tr >
< td > controlsend < / td >
< td > - < / td >
< / tr >
< / tbody >
< / table >
< / div >
2022-09-09 20:41:18 +00:00
2022-12-12 20:26:59 +00:00
< h5 > Styling < / h5 >
< p > Following is the list of structural style classes , for theming classes visit < router -link to = "/theming" > theming < / r o u t e r - l i n k > p a g e . < / p >
< div class = "doc-tablewrapper" >
< table class = "doc-table" >
< thead >
< tr >
< th > Name < / th >
< th > Element < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > p - orderlist < / td >
< td > Container element . < / td >
< / tr >
< tr >
< td > p - orderlist - list < / td >
< td > List container . < / td >
< / tr >
< tr >
< td > p - orderlist - item < / td >
< td > An item in the list < / td >
< / tr >
< / tbody >
< / table >
< / div >
2022-09-09 20:41:18 +00:00
2022-12-12 20:26:59 +00:00
< h5 > Accessibility < / h5 >
< h6 > Screen Reader < / h6 >
< p >
Value to describe the listbox can be provided with < i > listProps < / i > by passing < i > aria - labelledby < / i > or < i > aria - label < / i > props . The list element has a < i > listbox < / i > role with the < i > aria - multiselectable < / i > attribute . Each list
item has an < i > option < / i > role with < i > aria - selected < / i > and < i > aria - disabled < / i > as their attributes .
< / p >
< p >
Controls buttons are < i > button < / i > elements with an < i > aria - label < / i > that refers to the < i > aria . moveTop < / i > , < i > aria . moveUp < / i > , < i > aria . moveDown < / i > and < i > aria . moveBottom < / i > properties of the
< router -link to = "/locale" > locale < /router-link> API by default, alternatively you may use <i>moveTopButtonProps</i > , < i > moveUpButtonProps < / i > , < i > moveDownButtonProps < / i > and < i > moveBottomButtonProps < / i > to customize the buttons like
overriding the default < i > aria - label < / i > attributes .
< / p >
< pre v-code > < code > < template v-pre >
2022-12-08 12:26:57 +00:00
& lt ; span id = "lb" & gt ; Options & lt ; / s p a n & g t ;
& lt ; OrderList aria - labelledby = "lb" / & gt ;
& lt ; OrderList aria - label = "City" / & gt ;
< / template > < / code > < / pre >
2022-12-12 20:26:59 +00:00
< h6 > ListBox Keyboard Support < / h6 >
< div class = "doc-tablewrapper" >
< table class = "doc-table" >
< thead >
< tr >
< th > Key < / th >
< th > Function < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td >
< i > tab < / i >
< / td >
< td > Moves focus to the first selected option , if there is none then first option receives the focus . < / td >
< / tr >
< tr >
< td >
< i > up arrow < / i >
< / td >
< td > Moves focus to the previous option . < / td >
< / tr >
< tr >
< td >
< i > down arrow < / i >
< / td >
< td > Moves focus to the next option . < / td >
< / tr >
< tr >
< td >
< i > enter < / i >
< / td >
< td > Toggles the selected state of the focused option . < / td >
< / tr >
< tr >
< td >
< i > space < / i >
< / td >
< td > Toggles the selected state of the focused option . < / td >
< / tr >
< tr >
< td >
< i > home < / i >
< / td >
< td > Moves focus to the first option . < / td >
< / tr >
< tr >
< td >
< i > end < / i >
< / td >
< td > Moves focus to the last option . < / td >
< / tr >
< tr >
< td > < i > shift < / i > + < i > down arrow < / i > < / td >
< td > Moves focus to the next option and toggles the selection state . < / td >
< / tr >
< tr >
< td > < i > shift < / i > + < i > up arrow < / i > < / td >
< td > Moves focus to the previous option and toggles the selection state . < / td >
< / tr >
< tr >
< td > < i > shift < / i > + < i > space < / i > < / td >
< td > Selects the items between the most recently selected option and the focused option . < / td >
< / tr >
< tr >
< td > < i > control < / i > + < i > shift < / i > + < i > home < / i > < / td >
< td > Selects the focused options and all the options up to the first one . < / td >
< / tr >
< tr >
< td > < i > control < / i > + < i > shift < / i > + < i > end < / i > < / td >
< td > Selects the focused options and all the options down to the first one . < / td >
< / tr >
< tr >
< td > < i > control < / i > + < i > a < / i > < / td >
< td > Selects all options . < / td >
< / tr >
< / tbody >
< / table >
< / div >
2022-12-08 12:26:57 +00:00
2022-12-12 20:26:59 +00:00
< h6 > Buttons Keyboard Support < / h6 >
< div class = "doc-tablewrapper" >
< table class = "doc-table" >
< thead >
< tr >
< th > Key < / th >
< th > Function < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td >
< i > enter < / i >
< / td >
< td > Executes button action . < / td >
< / tr >
< tr >
< td >
< i > space < / i >
< / td >
< td > Executes button action . < / td >
< / tr >
< / tbody >
< / table >
< / div >
2022-12-08 12:26:57 +00:00
2022-12-12 20:26:59 +00:00
< h5 > Dependencies < / h5 >
< p > None . < / p >
< / AppDoc > < / C l i e n t O n l y
>
2022-09-09 20:41:18 +00:00
< / template >
< script >
export default {
data ( ) {
return {
sources : {
'options-api' : {
tabName : 'Options API Source' ,
content : `
< template >
< div class = "card" >
< OrderList v-model ="products" listStyle="height:auto" dataKey="id" >
< template # header >
List of Products
< / template >
< template # item = "slotProps" >
< div class = "product-item" >
< div class = "image-container" >
< img src = "https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt ="slotProps.item.name" / >
< / div >
< div class = "product-list-detail" >
< h6 class = "mb-2" > { { slotProps . item . name } } < / h6 >
< i class = "pi pi-tag product-category-icon" > < / i >
< span class = "product-category" > { { slotProps . item . category } } < / span >
< / div >
< div class = "product-list-action" >
< h6 class = "mb-2" > \ $ { { slotProps . item . price } } < / h6 >
< span : class = "'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()" > { { slotProps . item . inventoryStatus } } < / span >
< / div >
< / div >
< / template >
< / OrderList >
< / div >
< / template >
< script >
import ProductService from './service/ProductService' ;
export default {
data ( ) {
return {
products : null
}
} ,
productService : null ,
created ( ) {
this . productService = new ProductService ( ) ;
} ,
mounted ( ) {
this . productService . getProductsSmall ( ) . then ( data => this . products = data ) ;
}
}
< \ \ / script >
< style lang = "scss" scoped >
. card {
background : # ffffff ;
padding : 2 rem ;
box - shadow : 0 2 px 1 px - 1 px rgba ( 0 , 0 , 0 , .2 ) , 0 1 px 1 px 0 rgba ( 0 , 0 , 0 , .14 ) , 0 1 px 3 px 0 rgba ( 0 , 0 , 0 , .12 ) ;
border - radius : 4 px ;
margin - bottom : 2 rem ;
}
. product - item {
display : flex ;
align - items : center ;
padding : .5 rem ;
width : 100 % ;
img {
width : 75 px ;
box - shadow : 0 3 px 6 px rgba ( 0 , 0 , 0 , 0.16 ) , 0 3 px 6 px rgba ( 0 , 0 , 0 , 0.23 ) ;
margin - right : 1 rem ;
}
. product - list - detail {
flex : 1 1 0 ;
}
. product - list - action {
display : flex ;
flex - direction : column ;
align - items : flex - end ;
}
. product - category - icon {
vertical - align : middle ;
margin - right : .5 rem ;
font - size : .875 rem ;
}
. product - category {
vertical - align : middle ;
line - height : 1 ;
font - size : .875 rem ;
}
}
@ media screen and ( max - width : 576 px ) {
. product - item {
flex - wrap : wrap ;
. image - container {
width : 100 % ;
text - align : center ;
}
img {
margin : 0 0 1 rem 0 ;
width : 100 px ;
}
}
}
< / style > `
} ,
'composition-api' : {
tabName : 'Composition API Source' ,
content : `
< template >
< div class = "card" >
< OrderList v-model ="products" listStyle="height:auto" dataKey="id" >
< template # header >
List of Products
< / template >
< template # item = "slotProps" >
< div class = "product-item" >
< div class = "image-container" >
< img src = "https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt ="slotProps.item.name" / >
< / div >
< div class = "product-list-detail" >
< h6 class = "mb-2" > { { slotProps . item . name } } < / h6 >
< i class = "pi pi-tag product-category-icon" > < / i >
< span class = "product-category" > { { slotProps . item . category } } < / span >
< / div >
< div class = "product-list-action" >
< h6 class = "mb-2" > \ $ { { slotProps . item . price } } < / h6 >
< span : class = "'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()" > { { slotProps . item . inventoryStatus } } < / span >
< / div >
< / div >
< / template >
< / OrderList >
< / div >
< / template >
< script >
import { ref , onMounted } from 'vue' ;
import ProductService from './service/ProductService' ;
export default {
setup ( ) {
onMounted ( ( ) => {
productService . value . getProductsSmall ( ) . then ( data => products . value = data ) ;
} )
const products = ref ( null ) ;
const productService = ref ( new ProductService ( ) ) ;
return { products , productService }
}
}
< \ \ / script >
< style lang = "scss" scoped >
. card {
background : # ffffff ;
padding : 2 rem ;
box - shadow : 0 2 px 1 px - 1 px rgba ( 0 , 0 , 0 , .2 ) , 0 1 px 1 px 0 rgba ( 0 , 0 , 0 , .14 ) , 0 1 px 3 px 0 rgba ( 0 , 0 , 0 , .12 ) ;
border - radius : 4 px ;
margin - bottom : 2 rem ;
}
. product - item {
display : flex ;
align - items : center ;
padding : .5 rem ;
width : 100 % ;
img {
width : 75 px ;
box - shadow : 0 3 px 6 px rgba ( 0 , 0 , 0 , 0.16 ) , 0 3 px 6 px rgba ( 0 , 0 , 0 , 0.23 ) ;
margin - right : 1 rem ;
}
. product - list - detail {
flex : 1 1 0 ;
}
. product - list - action {
display : flex ;
flex - direction : column ;
align - items : flex - end ;
}
. product - category - icon {
vertical - align : middle ;
margin - right : .5 rem ;
font - size : .875 rem ;
}
. product - category {
vertical - align : middle ;
line - height : 1 ;
font - size : .875 rem ;
}
}
@ media screen and ( max - width : 576 px ) {
. product - item {
flex - wrap : wrap ;
. image - container {
width : 100 % ;
text - align : center ;
}
img {
margin : 0 0 1 rem 0 ;
width : 100 px ;
}
}
}
< / style > `
} ,
'browser-source' : {
tabName : 'Browser Source' ,
imports : ` <script src="https://unpkg.com/primevue@^3/orderlist/orderlist.min.js">< \\ /script>
< script src = "./ProductService.js" > < \ \ / script > ` ,
content : ` <div id="app">
< div class = "card" >
< p -orderlist v-model ="products" list-style="height:auto" data-key="id" >
< template # header >
List of Products
< / template >
< template # item = "slotProps" >
< div class = "product-item" >
< div class = "image-container" >
< img src = "https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt ="slotProps.item.name" / >
< / div >
< div class = "product-list-detail" >
< h6 class = "mb-2" > { { slotProps . item . name } } < / h6 >
< i class = "pi pi-tag product-category-icon" > < / i >
< span class = "product-category" > { { slotProps . item . category } } < / span >
< / div >
< div class = "product-list-action" >
< h6 class = "mb-2" > \ $ { { slotProps . item . price } } < / h6 >
< span : class = "'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()" > { { slotProps . item . inventoryStatus } } < / span >
< / div >
< / div >
< / template >
< / p - o r d e r l i s t >
< / div >
< / div >
< script type = "module" >
const { createApp , ref , onMounted } = Vue ;
const App = {
setup ( ) {
onMounted ( ( ) => {
productService . value . getProductsSmall ( ) . then ( data => products . value = data ) ;
} )
const products = ref ( null ) ;
const productService = ref ( new ProductService ( ) ) ;
return { products , productService }
} ,
components : {
"p-orderlist" : primevue . orderlist
}
} ;
createApp ( App )
. use ( primevue . config . default )
. mount ( "#app" ) ;
< \ \ / script >
< style >
. card {
background : # ffffff ;
padding : 2 rem ;
box - shadow : 0 2 px 1 px - 1 px rgba ( 0 , 0 , 0 , .2 ) , 0 1 px 1 px 0 rgba ( 0 , 0 , 0 , .14 ) , 0 1 px 3 px 0 rgba ( 0 , 0 , 0 , .12 ) ;
border - radius : 4 px ;
margin - bottom : 2 rem ;
}
. product - item {
display : flex ;
align - items : center ;
padding : .5 rem ;
width : 100 % ;
}
. product - item img {
width : 75 px ;
box - shadow : 0 3 px 6 px rgba ( 0 , 0 , 0 , 0.16 ) , 0 3 px 6 px rgba ( 0 , 0 , 0 , 0.23 ) ;
margin - right : 1 rem ;
}
. product - item . product - list - detail {
flex : 1 1 0 ;
}
. product - item . product - list - action {
display : flex ;
flex - direction : column ;
align - items : flex - end ;
}
. product - item . product - category - icon {
vertical - align : middle ;
margin - right : .5 rem ;
font - size : .875 rem ;
}
. product - item . product - category {
vertical - align : middle ;
line - height : 1 ;
font - size : .875 rem ;
}
@ media screen and ( max - width : 576 px ) {
. product - item {
flex - wrap : wrap ;
}
. product - item . image - container {
width : 100 % ;
text - align : center ;
}
. product - item img {
margin : 0 0 1 rem 0 ;
width : 100 px ;
}
}
< / style > `
}
}
} ;
}
} ;
< / script >
