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

Refactor #3832 Refactor #3833 - For Dropdown

pull/3841/head
Tuğçe Küçükoğlu 2023-04-04 15:42:36 +03:00
parent 5ea506913f
commit b3914f00f2
1 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
components/lib/dropdown/Dropdown.vue
View File

@ -47,10 +47,13 @@
> >
<slot name="value" :value="modelValue" :placeholder="placeholder">{{ label === 'p-emptylabel' ? '&nbsp;' : label || 'empty' }}</slot> <slot name="value" :value="modelValue" :placeholder="placeholder">{{ label === 'p-emptylabel' ? '&nbsp;' : label || 'empty' }}</slot>
</span> </span>
<i v-if="showClear && modelValue != null" :class="['p-dropdown-clear-icon', clearIcon]" @click="onClearClick" v-bind="clearIconProps"></i> <slot v-if="showClear && modelValue != null" name="clearicon">
<component :is="clearIcon ? 'i' : 'TimesIcon'" :class="['p-dropdown-clear-icon', clearIcon]" @click="onClearClick" v-bind="clearIconProps" />
</slot>
<div class="p-dropdown-trigger"> <div class="p-dropdown-trigger">
<slot name="indicator"> <slot name="indicator">
<span :class="dropdownIconClass" aria-hidden="true"></span> <component v-if="loading" :is="loadingIcon ? 'span' : 'SpinnerIcon'" spin :class="['p-dropdown-trigger-icon', loadingIcon]" aria-hidden="true" />
<component v-else :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="['p-dropdown-trigger-icon', dropdownIcon]" aria-hidden="true" />
</slot> </slot>
</div> </div>
<Portal :appendTo="appendTo"> <Portal :appendTo="appendTo">
@ -76,7 +79,9 @@
@input="onFilterChange" @input="onFilterChange"
v-bind="filterInputProps" v-bind="filterInputProps"
/> />
<span :class="['p-dropdown-filter-icon', filterIcon]" /> <slot name="filtericon">
<component :is="filterIcon ? 'span' : 'FilterIcon'" :class="['p-dropdown-filter-icon', filterIcon]" />
</slot>
</div> </div>
<span role="status" aria-live="polite" class="p-hidden-accessible"> <span role="status" aria-live="polite" class="p-hidden-accessible">
{{ filterResultMessageText }} {{ filterResultMessageText }}
@ -137,6 +142,10 @@
<script> <script>
import { FilterService } from 'primevue/api'; import { FilterService } from 'primevue/api';
import ChevronDownIcon from 'primevue/icon/chevrondown';
import FilterIcon from 'primevue/icon/filter';
import SpinnerIcon from 'primevue/icon/spinner';
import TimesIcon from 'primevue/icon/times';
import OverlayEventBus from 'primevue/overlayeventbus'; import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal'; import Portal from 'primevue/portal';
import Ripple from 'primevue/ripple'; import Ripple from 'primevue/ripple';
@ -229,19 +238,19 @@ export default {
}, },
clearIcon: { clearIcon: {
type: String, type: String,
default: 'pi pi-times' default: undefined
}, },
dropdownIcon: { dropdownIcon: {
type: String, type: String,
default: 'pi pi-chevron-down' default: undefined
}, },
filterIcon: { filterIcon: {
type: String, type: String,
default: 'pi pi-search' default: undefined
}, },
loadingIcon: { loadingIcon: {
type: String, type: String,
default: 'pi pi-spinner pi-spin' default: undefined
}, },
resetFilterOnHide: { resetFilterOnHide: {
type: Boolean, type: Boolean,
@ -964,9 +973,6 @@ export default {
} }
]; ];
}, },
dropdownIconClass() {
return ['p-dropdown-trigger-icon', this.loading ? this.loadingIcon : this.dropdownIcon];
},
visibleOptions() { visibleOptions() {
const options = this.optionGroupLabel ? this.flatOptions(this.options) : this.options || []; const options = this.optionGroupLabel ? this.flatOptions(this.options) : this.options || [];
@ -1047,7 +1053,11 @@ export default {
}, },
components: { components: {
VirtualScroller: VirtualScroller, VirtualScroller: VirtualScroller,
Portal: Portal Portal: Portal,
TimesIcon: TimesIcon,
ChevronDownIcon: ChevronDownIcon,
SpinnerIcon: SpinnerIcon,
FilterIcon: FilterIcon
} }
}; };
</script> </script>