Merge branch 'master' of https://github.com/primefaces/primevue
commit
0253a4ac3d
|
@ -2,15 +2,15 @@
|
||||||
"data": [
|
"data": [
|
||||||
{
|
{
|
||||||
"id": "1000",
|
"id": "1000",
|
||||||
"code": "f230fh0g3",
|
"code": "vbb124btr",
|
||||||
"name": "Bamboo Watch",
|
"name": "Game Controller",
|
||||||
"description": "Product Description",
|
"description": "Product Description",
|
||||||
"image": "bamboo-watch.jpg",
|
"image": "game-controller.jpg",
|
||||||
"price": 65,
|
"price": 99,
|
||||||
"category": "Accessories",
|
"category": "Electronics",
|
||||||
"quantity": 24,
|
"quantity": 2,
|
||||||
"inventoryStatus": "INSTOCK",
|
"inventoryStatus": "LOWSTOCK",
|
||||||
"rating": 5
|
"rating": 4
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "1001",
|
"id": "1001",
|
||||||
|
@ -62,15 +62,15 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "1005",
|
"id": "1005",
|
||||||
"code": "av2231fwg",
|
"code": "cm230f032",
|
||||||
"name": "Brown Purse",
|
"name": "Gaming Set",
|
||||||
"description": "Product Description",
|
"description": "Product Description",
|
||||||
"image": "brown-purse.jpg",
|
"image": "gaming-set.jpg",
|
||||||
"price": 120,
|
"price": 299,
|
||||||
"category": "Accessories",
|
"category": "Electronics",
|
||||||
"quantity": 0,
|
"quantity": 63,
|
||||||
"inventoryStatus": "OUTOFSTOCK",
|
"inventoryStatus": "INSTOCK",
|
||||||
"rating": 4
|
"rating": 3
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "1006",
|
"id": "1006",
|
||||||
|
@ -98,27 +98,27 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "1008",
|
"id": "1008",
|
||||||
"code": "vbb124btr",
|
"code": "f230fh0g3",
|
||||||
"name": "Game Controller",
|
"name": "Bamboo Watch",
|
||||||
"description": "Product Description",
|
"description": "Product Description",
|
||||||
"image": "game-controller.jpg",
|
"image": "bamboo-watch.jpg",
|
||||||
"price": 99,
|
"price": 65,
|
||||||
"category": "Electronics",
|
"category": "Accessories",
|
||||||
"quantity": 2,
|
"quantity": 24,
|
||||||
"inventoryStatus": "LOWSTOCK",
|
"inventoryStatus": "INSTOCK",
|
||||||
"rating": 4
|
"rating": 5
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "1009",
|
"id": "1009",
|
||||||
"code": "cm230f032",
|
"code": "av2231fwg",
|
||||||
"name": "Gaming Set",
|
"name": "Brown Purse",
|
||||||
"description": "Product Description",
|
"description": "Product Description",
|
||||||
"image": "gaming-set.jpg",
|
"image": "brown-purse.jpg",
|
||||||
"price": 299,
|
"price": 120,
|
||||||
"category": "Electronics",
|
"category": "Accessories",
|
||||||
"quantity": 63,
|
"quantity": 0,
|
||||||
"inventoryStatus": "INSTOCK",
|
"inventoryStatus": "OUTOFSTOCK",
|
||||||
"rating": 3
|
"rating": 4
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
|
@ -25,11 +25,11 @@
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<template v-for="(optionGroup, i) of suggestions" :key="getOptionGroupRenderKey(optionGroup)">
|
<template v-for="(optionGroup, i) of suggestions" :key="getOptionGroupRenderKey(optionGroup)">
|
||||||
<li class="p-autocomplete-item-group" >
|
<li class="p-autocomplete-item-group">
|
||||||
<slot name="optiongroup" :item="optionGroup" :index="i">{{getOptionGroupLabel(optionGroup)}}</slot>
|
<slot name="optiongroup" :item="optionGroup" :index="i">{{getOptionGroupLabel(optionGroup)}}</slot>
|
||||||
</li>
|
</li>
|
||||||
<li v-for="(item, i) of getOptionGroupChildren(optionGroup)" class="p-autocomplete-item" :key="i" @click="selectItem($event, item)" role="option" v-ripple>
|
<li v-for="(item, j) of getOptionGroupChildren(optionGroup)" class="p-autocomplete-item" :key="j" @click="selectItem($event, item)" role="option" v-ripple :data-group="i" :data-index="j">
|
||||||
<slot name="item" :item="item" :index="i">{{getItemContent(item)}}</slot>
|
<slot name="item" :item="item" :index="j">{{getItemContent(item)}}</slot>
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
|
@ -110,7 +110,8 @@ export default {
|
||||||
searching: false,
|
searching: false,
|
||||||
focused: false,
|
focused: false,
|
||||||
overlayVisible: false,
|
overlayVisible: false,
|
||||||
inputTextValue: null
|
inputTextValue: null,
|
||||||
|
highlightItem: null
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
@ -385,10 +386,10 @@ export default {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
break;
|
break;
|
||||||
|
|
||||||
//enter,tab
|
//enter
|
||||||
case 13:
|
case 13:
|
||||||
if (highlightItem) {
|
if (highlightItem) {
|
||||||
this.selectItem(event, this.suggestions[DomHandler.index(highlightItem)]);
|
this.selectHighlightItem(event, highlightItem);
|
||||||
this.hideOverlay();
|
this.hideOverlay();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -404,7 +405,7 @@ export default {
|
||||||
//tab
|
//tab
|
||||||
case 9:
|
case 9:
|
||||||
if (highlightItem) {
|
if (highlightItem) {
|
||||||
this.selectItem(event, this.suggestions[DomHandler.index(highlightItem)]);
|
this.selectHighlightItem(event, highlightItem);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.hideOverlay();
|
this.hideOverlay();
|
||||||
|
@ -436,6 +437,15 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
selectHighlightItem(event, item) {
|
||||||
|
if (this.optionGroupLabel) {
|
||||||
|
let optionGroup = this.suggestions[item.dataset.group];
|
||||||
|
this.selectItem(event, this.getOptionGroupChildren(optionGroup)[item.dataset.index]);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.selectItem(event, this.suggestions[DomHandler.indexOfType(item)]);
|
||||||
|
}
|
||||||
|
},
|
||||||
findNextItem(item) {
|
findNextItem(item) {
|
||||||
let nextItem = item.nextElementSibling;
|
let nextItem = item.nextElementSibling;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue