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

Fixed #2064 - contentStyle defect on VirtualScroller

pull/2066/head
Tuğçe Küçükoğlu 2022-01-31 17:58:00 +03:00 committed by Tuğçe Küçükoğlu
parent e4789c9a73
commit 828d557f79
9 changed files with 35 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/autocomplete/AutoComplete.vue
View File

@ -21,8 +21,8 @@
<div :ref="overlayRef" :class="panelStyleClass" :style="{'max-height': virtualScrollerDisabled ? scrollHeight : ''}" v-if="overlayVisible" @click="onOverlayClick">
<slot name="header" :value="modelValue" :suggestions="suggestions"></slot>
<VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="{'height': scrollHeight}" :items="suggestions" :disabled="virtualScrollerDisabled">
<template v-slot:content="{ styleClass, contentRef, items, getItemOptions }">
<ul :id="listId" :ref="(el) => listRef(el, contentRef)" :class="['p-autocomplete-items', styleClass]" role="listbox">
<template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle }">
<ul :id="listId" :ref="(el) => listRef(el, contentRef)" :class="['p-autocomplete-items', styleClass]" :style="contentStyle" role="listbox">
<template v-if="!optionGroupLabel">
<li v-for="(item, i) of items" class="p-autocomplete-item" :key="getOptionRenderKey(item)" @click="selectItem($event, item)" role="option" v-ripple :data-index="getOptionIndex(i, getItemOptions)">
<slot name="item" :item="item" :index="getOptionIndex(i, getItemOptions)">{{getItemContent(item)}}</slot>

4
src/components/dropdown/Dropdown.vue
View File

@ -27,8 +27,8 @@
</div>
<div :ref="itemsWrapperRef" class="p-dropdown-items-wrapper" :style="{'max-height': virtualScrollerDisabled ? scrollHeight : ''}">
<VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :items="visibleOptions" :style="{'height': scrollHeight}" :disabled="virtualScrollerDisabled">
<template v-slot:content="{ styleClass, contentRef, items, getItemOptions }">
<ul :ref="contentRef" :class="['p-dropdown-items', styleClass]" role="listbox">
<template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle }">
<ul :ref="contentRef" :class="['p-dropdown-items', styleClass]" :style="contentStyle" role="listbox">
<template v-if="!optionGroupLabel">
<li v-for="(option, i) of items" :class="['p-dropdown-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]" v-ripple
:key="getOptionRenderKey(option)" @click="onOptionSelect($event, option)" role="option" :aria-label="getOptionLabel(option)" :aria-selected="isSelected(option)">

4
src/components/listbox/Listbox.vue
View File

@ -9,8 +9,8 @@
</div>
<div class="p-listbox-list-wrapper" :style="listStyle">
<VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="listStyle" :items="visibleOptions" :disabled="virtualScrollerDisabled">
<template v-slot:content="{ styleClass, contentRef, items, getItemOptions }">
<ul :ref="contentRef" :class="['p-listbox-list', styleClass]" role="listbox" aria-multiselectable="multiple">
<template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle }">
<ul :ref="contentRef" :class="['p-listbox-list', styleClass]" :style="contentStyle" role="listbox" aria-multiselectable="multiple">
<template v-if="!optionGroupLabel">
<li v-for="(option, i) of items" :tabindex="isOptionDisabled(option) ? null : '0'" :class="['p-listbox-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]" v-ripple
:key="getOptionRenderKey(option)" @click="onOptionSelect($event, option)" @touchend="onOptionTouchEnd()" @keydown="onOptionKeyDown($event, option)" role="option" :aria-label="getOptionLabel(option)" :aria-selected="isSelected(option)" >

8
src/components/multiselect/MultiSelect.vue
View File

@ -12,9 +12,9 @@
</template>
<template v-else-if="display === 'chip'">
<div v-for="item of modelValue" class="p-multiselect-token" :key="getLabelByValue(item)">
<slot name="chip" :value="item">
<slot name="chip" :value="item">
<span class="p-multiselect-token-label">{{getLabelByValue(item)}}</span>
</slot>
</slot>
<span v-if="!disabled" class="p-multiselect-token-icon pi pi-times-circle" @click="removeChip(item)"></span>
</div>
<template v-if="!modelValue || modelValue.length === 0">{{placeholder || 'empty'}}</template>
@ -50,8 +50,8 @@
</div>
<div class="p-multiselect-items-wrapper" :style="{'max-height': virtualScrollerDisabled ? scrollHeight : ''}">
<VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :items="visibleOptions" :style="{'height': scrollHeight}" :disabled="virtualScrollerDisabled">
<template v-slot:content="{ styleClass, contentRef, items, getItemOptions }">
<ul :ref="contentRef" :class="['p-multiselect-items p-component', styleClass]" role="listbox" aria-multiselectable="true">
<template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle}">
<ul :ref="contentRef" :class="['p-multiselect-items p-component', styleClass]" :style="contentStyle" role="listbox" aria-multiselectable="true">
<template v-if="!optionGroupLabel">
<li v-for="(option, i) of items" :class="['p-multiselect-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]" role="option" :aria-selected="isSelected(option)"
:key="getOptionRenderKey(option)" @click="onOptionSelect($event, option)" @keydown="onOptionKeyDown($event, option)" :tabindex="tabindex||'0'" :aria-label="getOptionLabel(option)" v-ripple>

2
src/components/virtualscroller/VirtualScroller.vue
View File

@ -284,7 +284,7 @@ export default {
}
},
getLast(last = 0, isCols) {
if (this.items) {
if (this.items) {
return Math.min((isCols ? (this.columns || this.items[0]).length : this.items.length), last);
}

8
src/views/dropdown/DropdownDemo.vue
View File

@ -48,10 +48,10 @@
<h5>Loading State</h5>
<Dropdown placeholder="Loading..." loading></Dropdown>
<h5>Virtual Scroll (1000 Items)</h5>
<h5>Virtual Scroll (100000 Items)</h5>
<Dropdown v-model="selectedItem1" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 31 }" placeholder="Select Item"></Dropdown>
<h5>Virtual Scroll (1000 Items) and Lazy</h5>
<h5>Virtual Scroll (100000 Items) and Lazy</h5>
<Dropdown v-model="selectedItem2" :options="lazyItems" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
<template v-slot:loader="{ options }">
<div class="flex align-items-center p-2" style="height: 31px" >
@ -125,8 +125,8 @@ export default {
{label: 'Yokohama', value: 'Yokohama'}
]
}],
items: Array.from({ length: 1000 }, (_, i) => ({ label: `Item #${i}`, value: i })),
lazyItems: Array.from({ length: 1000 })
items: Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i })),
lazyItems: Array.from({ length: 100000 })
}
},
loadLazyTimeout: null,

12
src/views/dropdown/DropdownDoc.vue
View File

@ -632,8 +632,8 @@ export default {
{label: 'Yokohama', value: 'Yokohama'}
]
}],
items: Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })),
lazyItems: Array.from({ length: 1000 })
items: Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })),
lazyItems: Array.from({ length: 100000 })
}
},
loadLazyTimeout: null,
@ -793,8 +793,8 @@ export default {
}
]);
const items = ref(Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
const lazyItems = ref(Array.from({ length: 1000 }));
const items = ref(Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
const lazyItems = ref(Array.from({ length: 100000 }));
return { selectedCity1, selectedCity2, selectedCountry, selectedGroupedCity, cities, countries, groupedCities, selectedItem1, selectedItem2, loading, items, lazyItems}
},
@ -953,8 +953,8 @@ export default {
}
]);
const items = ref(Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
const lazyItems = ref(Array.from({ length: 1000 }));
const items = ref(Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
const lazyItems = ref(Array.from({ length: 100000 }));
return { selectedCity1, selectedCity2, selectedCountry, selectedGroupedCity, cities, countries, groupedCities, selectedItem1, selectedItem2, loading, items, lazyItems}
},

4
src/views/listbox/ListboxDemo.vue
View File

@ -33,7 +33,7 @@
</template>
</Listbox>
<h5>Virtual Scroll (1000 Items)</h5>
<h5>Virtual Scroll (100000 Items)</h5>
<Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 31 }" style="width:15rem" listStyle="height:250px" />
</div>
</div>
@ -98,7 +98,7 @@ export default {
{label: 'Yokohama', value: 'Yokohama'}
]
}],
items: Array.from({ length: 1000 }, (_, i) => ({ label: `Item #${i}`, value: i }))
items: Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i }))
}
},
components: {

24
src/views/listbox/ListboxDoc.vue
View File

@ -465,7 +465,7 @@ export default {
{label: 'Yokohama', value: 'Yokohama'}
]
}],
items: Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }))
items: Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }))
}
}
}
@ -490,15 +490,15 @@ export default {
</template>
</Listbox>
<h5>Advanced with Templating, Filtering and Multiple Selection</h5>
<Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem" filterPlaceholder="Search">
<template #option="slotProps">
<div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="mr-2" />
<div>{{slotProps.option.name}}</div>
</div>
</template>
</Listbox>
<h5>Advanced with Templating, Filtering and Multiple Selection</h5>
<Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem" filterPlaceholder="Search">
<template #option="slotProps">
<div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="mr-2" />
<div>{{slotProps.option.name}}</div>
</div>
</template>
</Listbox>
<h5>Virtual Scroll (1000 Items)</h5>
<Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 31 }" style="width:15rem" listStyle="height:250px" />
@ -563,7 +563,7 @@ export default {
}
]);
const items = ref(Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
const items = ref(Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
return { selectedCity, selectedCountries, selectedGroupedCity, cities, countries, groupedCities, items, selectedItem }
}
@ -660,7 +660,7 @@ export default {
}
]);
const items = ref(Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
const items = ref(Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
return { selectedCity, selectedCountries, selectedGroupedCity, cities, countries, groupedCities, items, selectedItem }
},