Refactor #5426 - For Dropdown

primefaces · Mar 18, 2024 · 3869287 · 3869287
1 parent bcdc8cb
commit 3869287
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 22 deletions.
diff --git a/components/lib/dropdown/Dropdown.d.ts b/components/lib/dropdown/Dropdown.d.ts
@@ -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[];
     /**

diff --git a/components/lib/dropdown/Dropdown.vue b/components/lib/dropdown/Dropdown.vue
@@ -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,22 +80,26 @@
                     <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"
                                 @vue:mounted="onFilterUpdated"
                                 @vue:updated="onFilterUpdated"
                                 :class="cx('filterInput')"
                                 :placeholder="filterPlaceholder"
+                                :invalid="invalid"
+                                :variant="variant"
+                                :unstyled="unstyled"
                                 role="searchbox"
                                 autocomplete="off"
                                 :aria-owns="id + '_list'"
                                 :aria-activedescendant="focusedOptionId"
                                 @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,

diff --git a/components/lib/dropdown/style/DropdownStyle.js b/components/lib/dropdown/style/DropdownStyle.js
@@ -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,20 +25,15 @@ 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
         }
     ],
     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',