From 133c543eabd5f007c766653b5d5e635e189e408b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Sun, 7 May 2023 23:37:26 +0300 Subject: [PATCH] Refactor #3922 - For Dropdown --- api-generator/components/dropdown.js | 6 + components/lib/config/PrimeVue.d.ts | 2 + components/lib/dropdown/Dropdown.d.ts | 163 +++++++++++++++++++++++++- components/lib/dropdown/Dropdown.vue | 67 +++++++---- 4 files changed, 213 insertions(+), 25 deletions(-) diff --git a/api-generator/components/dropdown.js b/api-generator/components/dropdown.js index b98d00d0c..afe00f1b1 100644 --- a/api-generator/components/dropdown.js +++ b/api-generator/components/dropdown.js @@ -256,6 +256,12 @@ const DropdownProps = [ type: 'string', default: 'null', description: 'Identifier of the underlying input element.' + }, + { + name: 'pt', + type: 'any', + default: 'null', + description: 'Uses to pass attributes to DOM elements inside the component.' } ]; diff --git a/components/lib/config/PrimeVue.d.ts b/components/lib/config/PrimeVue.d.ts index 6ee74cc78..c3a53281e 100644 --- a/components/lib/config/PrimeVue.d.ts +++ b/components/lib/config/PrimeVue.d.ts @@ -23,6 +23,7 @@ import { DeferredContentPassThroughOptions } from '../deferredcontent'; import { DialogPassThroughOptions } from '../dialog'; import { DividerPassThroughOptions } from '../divider'; import { DockPassThroughOptions } from '../dock'; +import { DropdownPassThroughOptions } from '../dropdown'; import { EditorPassThroughOptions } from '../editor'; import { FieldsetPassThroughOptions } from '../fieldset'; import { FileUploadPassThroughOptions } from '../fileupload'; @@ -108,6 +109,7 @@ interface PrimeVuePTOptions { divider?: DividerPassThroughOptions; dialog?: DialogPassThroughOptions; dock?: DockPassThroughOptions; + dropdown?: DropdownPassThroughOptions; dynamicdialog?: DialogPassThroughOptions; editor?: EditorPassThroughOptions; fieldset?: FieldsetPassThroughOptions; diff --git a/components/lib/dropdown/Dropdown.d.ts b/components/lib/dropdown/Dropdown.d.ts index 948067249..a3647500a 100755 --- a/components/lib/dropdown/Dropdown.d.ts +++ b/components/lib/dropdown/Dropdown.d.ts @@ -9,7 +9,18 @@ */ import { HTMLAttributes, InputHTMLAttributes, VNode } from 'vue'; import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers'; -import { VirtualScrollerItemOptions, VirtualScrollerProps } from '../virtualscroller'; +import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller'; + +export declare type DropdownPassThroughOptionType = DropdownPassThroughAttributes | ((options: DropdownPassThroughMethodOptions) => DropdownPassThroughAttributes) | null | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface DropdownPassThroughMethodOptions { + props: DropdownProps; + state: DropdownState; + context: DropdownContext; +} /** * Custom change event. @@ -41,6 +52,151 @@ export interface DropdownFilterEvent { value: any; } +/** + * Custom passthrough(pt) options. + * @see {@link DropdownProps.pt} + */ +export interface DropdownPassThroughOptions { + /** + * Uses to pass attributes to the root's DOM element. + */ + root?: DropdownPassThroughOptionType; + /** + * Uses to pass attributes to the input's DOM element. + */ + input?: DropdownPassThroughOptionType; + /** + * Uses to pass attributes to the clear icon's DOM element. + */ + clearIcon?: DropdownPassThroughOptionType; + /** + * Uses to pass attributes to the trigger' DOM element. + */ + trigger?: DropdownPassThroughOptionType; + /** + * Uses to pass attributes to the loading icon's DOM element. + */ + loadingIcon?: DropdownPassThroughOptionType; + /** + * Uses to pass attributes to the panel's DOM element. + */ + panel?: DropdownPassThroughOptionType; + /** + * Uses to pass attributes to the header's DOM element. + */ + header?: DropdownPassThroughOptionType; + /** + * Uses to pass attributes to the filter container's DOM element. + */ + filterContainer?: DropdownPassThroughOptionType; + /** + * Uses to pass attributes to the filter input's DOM element. + */ + filterInput?: DropdownPassThroughOptionType; + /** + * Uses to pass attributes to the filter icon's DOM element. + */ + filterIcon?: DropdownPassThroughOptionType; + /** + * Uses to pass attributes to the wrapper's DOM element. + */ + wrapper?: DropdownPassThroughOptionType; + /** + * Uses to pass attributes to the VirtualScroller component. + * @see {@link VirtualScrollerPassThroughOptionType} + */ + virtualScroller?: VirtualScrollerPassThroughOptionType; + /** + * Uses to pass attributes to the list's DOM element. + */ + list?: DropdownPassThroughOptionType; + /** + * Uses to pass attributes to the item group's DOM element. + */ + itemGroup?: DropdownPassThroughOptionType; + /** + * Uses to pass attributes to the item's DOM element. + */ + item?: DropdownPassThroughOptionType; + /** + * Uses to pass attributes to the emptyMessage's DOM element. + */ + emptyMessage?: DropdownPassThroughOptionType; + /** + * Uses to pass attributes to the hidden first focusable element's DOM element. + */ + hiddenFirstFocusableEl?: DropdownPassThroughOptionType; + /** + * Uses to pass attributes to the hidden filter result's DOM element. + */ + hiddenFilterResult?: DropdownPassThroughOptionType; + /** + * Uses to pass attributes to the hidden selected message's DOM element. + */ + hiddenSelectedMessage?: DropdownPassThroughOptionType; + /** + * Uses to pass attributes to the hidden last focusable element's DOM element. + */ + hiddenLastFocusableEl?: DropdownPassThroughOptionType; +} + +/** + * Custom passthrough attributes for each DOM elements + */ +export interface DropdownPassThroughAttributes { + [key: string]: any; +} + +/** + * Defines current inline state in Dropdown component. + */ +export interface DropdownState { + /** + * Current id state as a string. + */ + id: string; + /** + * Current focused state as a boolean. + * @defaultValue false + */ + focused: boolean; + /** + * Current focused item index as a number. + * @defaultvalue -1 + */ + focusedOptionIndex: number; + /** + * Current filter value state as a string. + */ + filterValue: string; + /** + * Current overlay visible state as a boolean. + * @defaultValue false + */ + overlayVisible: boolean; +} + +/** + * Defines current options in Dropdown component. + */ +export interface DropdownContext { + /** + * Current selection state of the item as a boolean. + * @defaultValue false + */ + selected: boolean; + /** + * Current focus state of the item as a boolean. + * @defaultValue false + */ + focused: boolean; + /** + * Current disabled state of the item as a boolean. + * @defaultValue false + */ + disabled: boolean; +} + /** * Defines valid properties in Dropdown component. */ @@ -251,6 +407,11 @@ export interface DropdownProps { * Identifier of the underlying input element. */ 'aria-labelledby'?: string | undefined; + /** + * Uses to pass attributes to DOM elements inside the component. + * @type {DropdownPassThroughOptions} + */ + pt?: DropdownPassThroughOptions; } /** diff --git a/components/lib/dropdown/Dropdown.vue b/components/lib/dropdown/Dropdown.vue index 779cd4a26..eca50c7bc 100755 --- a/components/lib/dropdown/Dropdown.vue +++ b/components/lib/dropdown/Dropdown.vue @@ -1,5 +1,5 @@