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

Refactor #5548 - For Dropdown

pull/5677/head
tugcekucukoglu 2024-04-08 15:58:58 +03:00
parent 285790f12c
commit f6751003f9
3 changed files with 16 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
components/lib/dropdown/Dropdown.d.ts vendored
View File

@ -9,7 +9,6 @@
*/
import { TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { InputTextPassThroughOptions } from '../inputtext';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, DesignToken, GlobalComponentConstructor, HintedString, PassThrough } from '../ts-helpers';
import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
@ -48,20 +47,6 @@ export interface DropdownPassThroughMethodOptions<T> {
global: object | undefined;
}
/**
* Custom shared passthrough(pt) option method.
*/
export interface DropdownSharedPassThroughMethodOptions {
/**
* Defines valid properties.
*/
props: DropdownProps;
/**
* Defines current inline state.
*/
state: DropdownState;
}
/**
* Custom change event.
* @see {@link DropdownEmits.change}
@ -102,10 +87,9 @@ export interface DropdownPassThroughOptions<T = any> {
*/
root?: DropdownPassThroughOptionType<T>;
/**
* Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptions}
* Used to pass attributes to the input's DOM element.
*/
input?: InputTextPassThroughOptions<DropdownSharedPassThroughMethodOptions>;
input?: DropdownPassThroughOptionType<T>;
/**
* Used to pass attributes to the clear icon's DOM element.
*/
@ -131,10 +115,9 @@ export interface DropdownPassThroughOptions<T = any> {
*/
filterContainer?: DropdownPassThroughOptionType<T>;
/**
* Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptions}
* Used to pass attributes to the filter input's DOM element.
*/
filterInput?: InputTextPassThroughOptions<DropdownSharedPassThroughMethodOptions>;
filterInput?: DropdownPassThroughOptionType<T>;
/**
* Used to pass attributes to the filter icon's DOM element.
*/

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

@ -1,6 +1,6 @@
<template>
<div ref="container" :id="id" :class="cx('root')" @click="onContainerClick" v-bind="ptmi('root')">
<InputText
<input
v-if="editable"
ref="focusInput"
:id="inputId"
@ -11,9 +11,6 @@
:placeholder="placeholder"
:tabindex="!disabled ? tabindex : -1"
:disabled="disabled"
:invalid="invalid"
:variant="variant"
:unstyled="unstyled"
autocomplete="off"
role="combobox"
:aria-label="ariaLabel"
@ -22,11 +19,12 @@
:aria-expanded="overlayVisible"
:aria-controls="id + '_list'"
:aria-activedescendant="focused ? focusedOptionId : undefined"
:aria-invalid="invalid || undefined"
@focus="onFocus"
@blur="onBlur"
@keydown="onKeyDown"
@input="onEditableInput"
:pt="ptm('input')"
v-bind="ptm('input')"
/>
<span
v-else
@ -79,7 +77,7 @@
<slot name="header" :value="modelValue" :options="visibleOptions"></slot>
<div v-if="filter" :class="cx('header')" v-bind="ptm('header')">
<div :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
<InputText
<input
ref="filterInput"
type="text"
:value="filterValue"
@ -87,9 +85,6 @@
@vue:updated="onFilterUpdated"
:class="cx('filterInput')"
:placeholder="filterPlaceholder"
:invalid="invalid"
:variant="variant"
:unstyled="unstyled"
role="searchbox"
autocomplete="off"
:aria-owns="id + '_list'"
@ -97,7 +92,7 @@
@keydown="onFilterKeyDown"
@blur="onFilterBlur"
@input="onFilterChange"
:pt="ptm('filterInput')"
v-bind="ptm('filterInput')"
/>
<slot name="filtericon" :class="cx('filterIcon')">
<component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
@ -190,7 +185,6 @@ import ChevronDownIcon from 'primevue/icons/chevrondown';
import SearchIcon from 'primevue/icons/search';
import SpinnerIcon from 'primevue/icons/spinner';
import TimesIcon from 'primevue/icons/times';
import InputText from 'primevue/inputtext';
import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal';
import Ripple from 'primevue/ripple';
@ -307,7 +301,7 @@ export default {
this.overlayVisible = true;
this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : this.editable ? -1 : this.findSelectedOptionIndex();
isFocus && DomHandler.focus(this.editable ? this.$refs.focusInput.$el : this.$refs.focusInput);
isFocus && DomHandler.focus(this.$refs.focusInput);
},
hide(isFocus) {
const _hide = () => {
@ -318,7 +312,7 @@ export default {
this.searchValue = '';
this.resetFilterOnHide && (this.filterValue = null);
isFocus && DomHandler.focus(this.editable ? this.$refs.focusInput.$el : this.$refs.focusInput);
isFocus && DomHandler.focus(this.$refs.focusInput);
};
setTimeout(() => {
@ -986,7 +980,6 @@ export default {
ripple: Ripple
},
components: {
InputText,
VirtualScroller,
Portal,
TimesIcon,

33
doc/common/apidoc/index.json
View File

@ -3289,7 +3289,7 @@
"name": "input",
"optional": true,
"readonly": false,
"type": "InputTextPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>",
"type": "AutoCompletePassThroughOptionType | InputTextPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>",
"default": "",
"description": "Used to pass attributes to the InputText component."
},
@ -23988,29 +23988,6 @@
],
"methods": []
},
"DropdownSharedPassThroughMethodOptions": {
"description": "Custom shared passthrough(pt) option method.",
"relatedProp": "",
"props": [
{
"name": "props",
"optional": false,
"readonly": false,
"type": "DropdownProps",
"default": "",
"description": "Defines valid properties."
},
{
"name": "state",
"optional": false,
"readonly": false,
"type": "DropdownState",
"default": "",
"description": "Defines current inline state."
}
],
"methods": []
},
"DropdownChangeEvent": {
"description": "Custom change event.",
"relatedProp": "DropdownEmits.change",
@ -24073,9 +24050,9 @@
"name": "input",
"optional": true,
"readonly": false,
"type": "InputTextPassThroughOptions<DropdownSharedPassThroughMethodOptions>",
"type": "DropdownPassThroughOptionType<T>",
"default": "",
"description": "Used to pass attributes to the InputText component."
"description": "Used to pass attributes to the input's DOM element."
},
{
"name": "clearIcon",
@ -24129,9 +24106,9 @@
"name": "filterInput",
"optional": true,
"readonly": false,
"type": "InputTextPassThroughOptions<DropdownSharedPassThroughMethodOptions>",
"type": "DropdownPassThroughOptionType<T>",
"default": "",
"description": "Used to pass attributes to the InputText component."
"description": "Used to pass attributes to the filter input's DOM element."
},
{
"name": "filterIcon",