Refactor #5426 - For Dropdown
tugcekucukoglu
parent
bcdc8cb702
commit
3869287056
|
|
@ -9,8 +9,9 @@
|
|||
*/
|
||||
import { HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
|
||||
import { ComponentHooks } from '../basecomponent';
|
||||
import { InputTextPassThroughOptions } from '../inputtext';
|
||||
import { PassThroughOptions } from '../passthrough';
|
||||
import { ClassComponent, GlobalComponentConstructor, PassThrough, HintedString } from '../ts-helpers';
|
||||
import { ClassComponent, GlobalComponentConstructor, HintedString, PassThrough } from '../ts-helpers';
|
||||
import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
|
||||
|
||||
export declare type DropdownPassThroughOptionType<T = any> = DropdownPassThroughAttributes | ((options: DropdownPassThroughMethodOptions<T>) => DropdownPassThroughAttributes | string) | string | null | undefined;
|
||||
|
|
@ -47,6 +48,20 @@ 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}
|
||||
|
|
@ -87,9 +102,10 @@ export interface DropdownPassThroughOptions<T = any> {
|
|||
*/
|
||||
root?: DropdownPassThroughOptionType<T>;
|
||||
/**
|
||||
* Used to pass attributes to the input's DOM element.
|
||||
* Used to pass attributes to the InputText component.
|
||||
* @see {@link InputTextPassThroughOptions}
|
||||
*/
|
||||
input?: DropdownPassThroughOptionType<T>;
|
||||
input?: InputTextPassThroughOptions<DropdownSharedPassThroughMethodOptions>;
|
||||
/**
|
||||
* Used to pass attributes to the clear icon's DOM element.
|
||||
*/
|
||||
|
|
@ -115,9 +131,10 @@ export interface DropdownPassThroughOptions<T = any> {
|
|||
*/
|
||||
filterContainer?: DropdownPassThroughOptionType<T>;
|
||||
/**
|
||||
* Used to pass attributes to the filter input's DOM element.
|
||||
* Used to pass attributes to the InputText component.
|
||||
* @see {@link InputTextPassThroughOptions}
|
||||
*/
|
||||
filterInput?: DropdownPassThroughOptionType<T>;
|
||||
filterInput?: InputTextPassThroughOptions<DropdownSharedPassThroughMethodOptions>;
|
||||
/**
|
||||
* Used to pass attributes to the filter icon's DOM element.
|
||||
*/
|
||||
|
|
@ -216,7 +233,7 @@ export interface DropdownState {
|
|||
focused: boolean;
|
||||
/**
|
||||
* Current focused item index as a number.
|
||||
* @defaultvalue -1
|
||||
* @defaultValue -1
|
||||
*/
|
||||
focusedOptionIndex: number;
|
||||
/**
|
||||
|
|
@ -260,7 +277,7 @@ export interface DropdownProps {
|
|||
*/
|
||||
modelValue?: any;
|
||||
/**
|
||||
* An array of selectitems to display as the available options.
|
||||
* An array of select items to display as the available options.
|
||||
*/
|
||||
options?: any[];
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div ref="container" :id="id" :class="cx('root')" @click="onContainerClick" v-bind="ptmi('root')">
|
||||
<input
|
||||
<DInputText
|
||||
v-if="editable"
|
||||
ref="focusInput"
|
||||
:id="inputId"
|
||||
|
|
@ -11,6 +11,9 @@
|
|||
:placeholder="placeholder"
|
||||
:tabindex="!disabled ? tabindex : -1"
|
||||
:disabled="disabled"
|
||||
:invalid="invalid"
|
||||
:variant="variant"
|
||||
:unstyled="unstyled"
|
||||
autocomplete="off"
|
||||
role="combobox"
|
||||
:aria-label="ariaLabel"
|
||||
|
|
@ -19,12 +22,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"
|
||||
v-bind="{ ...inputProps, ...ptm('input') }"
|
||||
v-bind="inputProps"
|
||||
:pt="ptm('input')"
|
||||
/>
|
||||
<span
|
||||
v-else
|
||||
|
|
@ -77,7 +80,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')">
|
||||
<input
|
||||
<DInputText
|
||||
ref="filterInput"
|
||||
type="text"
|
||||
:value="filterValue"
|
||||
|
|
@ -85,6 +88,9 @@
|
|||
@vue:updated="onFilterUpdated"
|
||||
:class="cx('filterInput')"
|
||||
:placeholder="filterPlaceholder"
|
||||
:invalid="invalid"
|
||||
:variant="variant"
|
||||
:unstyled="unstyled"
|
||||
role="searchbox"
|
||||
autocomplete="off"
|
||||
:aria-owns="id + '_list'"
|
||||
|
|
@ -92,7 +98,8 @@
|
|||
@keydown="onFilterKeyDown"
|
||||
@blur="onFilterBlur"
|
||||
@input="onFilterChange"
|
||||
v-bind="{ ...filterInputProps, ...ptm('filterInput') }"
|
||||
v-bind="filterInputProps"
|
||||
:pt="ptm('filterInput')"
|
||||
/>
|
||||
<slot name="filtericon" :class="cx('filterIcon')">
|
||||
<component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
|
||||
|
|
@ -185,6 +192,7 @@ 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';
|
||||
|
|
@ -297,7 +305,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.$refs.focusInput);
|
||||
isFocus && DomHandler.focus(this.$refs.focusInput.$el ? this.$refs.focusInput.$el : this.$refs.focusInput);
|
||||
},
|
||||
hide(isFocus) {
|
||||
const _hide = () => {
|
||||
|
|
@ -308,7 +316,7 @@ export default {
|
|||
this.searchValue = '';
|
||||
|
||||
this.resetFilterOnHide && (this.filterValue = null);
|
||||
isFocus && DomHandler.focus(this.$refs.focusInput);
|
||||
isFocus && DomHandler.focus(this.$refs.focusInput.$el ? this.$refs.focusInput.$el : this.$refs.focusInput);
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
|
|
@ -976,6 +984,7 @@ export default {
|
|||
ripple: Ripple
|
||||
},
|
||||
components: {
|
||||
DInputText: InputText,
|
||||
VirtualScroller,
|
||||
Portal,
|
||||
TimesIcon,
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const classes = {
|
|||
}
|
||||
],
|
||||
input: ({ instance, props }) => [
|
||||
'p-dropdown-label p-inputtext',
|
||||
'p-dropdown-label',
|
||||
{
|
||||
'p-placeholder': !props.editable && instance.label === props.placeholder,
|
||||
'p-dropdown-label-empty': !props.editable && !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0)
|
||||
|
|
@ -25,7 +25,7 @@ const classes = {
|
|||
trigger: 'p-dropdown-trigger',
|
||||
loadingicon: 'p-dropdown-trigger-icon',
|
||||
dropdownIcon: 'p-dropdown-trigger-icon',
|
||||
panel: ({ props, instance }) => [
|
||||
panel: ({ instance }) => [
|
||||
'p-dropdown-panel p-component',
|
||||
{
|
||||
'p-ripple-disabled': instance.$primevue.config.ripple === false
|
||||
|
|
@ -33,12 +33,7 @@ const classes = {
|
|||
],
|
||||
header: 'p-dropdown-header',
|
||||
filterContainer: 'p-dropdown-filter-container',
|
||||
filterInput: ({ props, instance }) => [
|
||||
'p-dropdown-filter p-inputtext p-component',
|
||||
{
|
||||
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
|
||||
}
|
||||
],
|
||||
filterInput: 'p-dropdown-filter',
|
||||
filterIcon: 'p-dropdown-filter-icon',
|
||||
wrapper: 'p-dropdown-items-wrapper',
|
||||
list: 'p-dropdown-items',
|
||||
|
|
|
|||
Loading…
Reference in New Issue