vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 17:02:38 +00:00
Code Issues Projects Releases Packages Wiki Activity

Components update v.3.21.0

Browse source
This commit is contained in:
Bahadır Sofuoğlu 2022-12-08 14:04:25 +03:00
parent 18497d55b1
commit defd6ff6e2
242 changed files with 28022 additions and 17523 deletions
Download patch file Download diff file Expand all files Collapse all files

78
components/dropdown/Dropdown.vue
View file

@ -47,7 +47,7 @@
>
<slot name="value" :value="modelValue" :placeholder="placeholder">{{ label === 'p-emptylabel' ? '&nbsp;' : label || 'empty' }}</slot>
</span>
<i v-if="showClear && modelValue != null" class="p-dropdown-clear-icon pi pi-times" @click="onClearClick" v-bind="clearIconProps"></i>
<i v-if="showClear && modelValue != null" :class="['p-dropdown-clear-icon', clearIcon]" @click="onClearClick" v-bind="clearIconProps"></i>
<div class="p-dropdown-trigger">
<slot name="indicator">
<span :class="dropdownIconClass" aria-hidden="true"></span>
@ -76,7 +76,7 @@
@input="onFilterChange"
v-bind="filterInputProps"
/>
<span class="p-dropdown-filter-icon pi pi-search"></span>
<span :class="['p-dropdown-filter-icon', filterIcon]" />
</div>
<span role="status" aria-live="polite" class="p-hidden-accessible">
{{ filterResultMessageText }}
@ -115,12 +115,6 @@
<slot name="empty">{{ emptyMessageText }}</slot>
</li>
</ul>
<span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" class="p-hidden-accessible">
{{ emptyMessageText }}
</span>
<span role="status" aria-live="polite" class="p-hidden-accessible">
{{ selectedMessageText }}
</span>
</template>
<template v-if="$slots.loader" v-slot:loader="{ options }">
<slot name="loader" :options="options"></slot>
@ -128,6 +122,12 @@
</VirtualScroller>
</div>
<slot name="footer" :value="modelValue" :options="visibleOptions"></slot>
<span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" class="p-hidden-accessible">
{{ emptyMessageText }}
</span>
<span role="status" aria-live="polite" class="p-hidden-accessible">
{{ selectedMessageText }}
</span>
<span ref="lastHiddenFocusableElementOnOverlay" role="presentation" aria-hidden="true" class="p-hidden-accessible p-hidden-focusable" :tabindex="0" @focus="onLastHiddenFocus"></span>
</div>
</transition>
@ -136,12 +136,12 @@
</template>
<script>
import { ConnectedOverlayScrollHandler, ObjectUtils, DomHandler, ZIndexUtils, UniqueComponentId } from 'primevue/utils';
import OverlayEventBus from 'primevue/overlayeventbus';
import { FilterService } from 'primevue/api';
import Ripple from 'primevue/ripple';
import VirtualScroller from 'primevue/virtualscroller';
import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal';
import Ripple from 'primevue/ripple';
import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
import VirtualScroller from 'primevue/virtualscroller';
export default {
name: 'Dropdown',
@ -227,6 +227,18 @@ export default {
type: Boolean,
default: false
},
clearIcon: {
type: String,
default: 'pi pi-times'
},
dropdownIcon: {
type: String,
default: 'pi pi-chevron-down'
},
filterIcon: {
type: String,
default: 'pi pi-search'
},
loadingIcon: {
type: String,
default: 'pi pi-spinner pi-spin'
@ -386,7 +398,7 @@ export default {
},
onFocus(event) {
this.focused = true;
this.focusedOptionIndex = this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
this.overlayVisible && this.scrollInView(this.focusedOptionIndex);
this.$emit('focus', event);
},
@ -434,6 +446,7 @@ export default {
break;
case 'Enter':
case 'NumpadEnter':
this.onEnterKey(event);
break;
@ -488,18 +501,14 @@ export default {
this.updateModel(event, null);
},
onFirstHiddenFocus(event) {
const relatedTarget = event.relatedTarget;
const focusableEl = event.relatedTarget === this.$refs.focusInput ? DomHandler.getFirstFocusableElement(this.overlay, ':not(.p-hidden-focusable)') : this.$refs.focusInput;
if (relatedTarget === this.$refs.focusInput) {
const firstFocusableEl = DomHandler.getFirstFocusableElement(this.overlay, ':not(.p-hidden-focusable)');
DomHandler.focus(firstFocusableEl);
} else {
DomHandler.focus(this.$refs.focusInput);
}
DomHandler.focus(focusableEl);
},
onLastHiddenFocus() {
DomHandler.focus(this.$refs.firstHiddenFocusableElementOnOverlay);
onLastHiddenFocus(event) {
const focusableEl = event.relatedTarget === this.$refs.focusInput ? DomHandler.getLastFocusableElement(this.overlay, ':not(.p-hidden-focusable)') : this.$refs.focusInput;
DomHandler.focus(focusableEl);
},
onOptionSelect(event, option, isHide = true) {
const value = this.getOptionValue(option);
@ -939,12 +948,31 @@ export default {
];
},
dropdownIconClass() {
return ['p-dropdown-trigger-icon', this.loading ? this.loadingIcon : 'pi pi-chevron-down'];
return ['p-dropdown-trigger-icon', this.loading ? this.loadingIcon : this.dropdownIcon];
},
visibleOptions() {
const options = this.optionGroupLabel ? this.flatOptions(this.options) : this.options || [];
return this.filterValue ? FilterService.filter(options, this.searchFields, this.filterValue, this.filterMatchMode, this.filterLocale) : options;
if (this.filterValue) {
const filteredOptions = FilterService.filter(options, this.searchFields, this.filterValue, this.filterMatchMode, this.filterLocale);
if (this.optionGroupLabel) {
const optionGroups = this.options || [];
const filtered = [];
optionGroups.forEach((group) => {
const filteredItems = group.items.filter((item) => filteredOptions.includes(item));
if (filteredItems.length > 0) filtered.push({ ...group, items: [...filteredItems] });
});
return this.flatOptions(filtered);
}
return filteredOptions;
}
return options;
},
hasSelectedOption() {
return ObjectUtils.isNotEmpty(this.modelValue);