From a84c2587e304813d72972159fe4cb31199288b71 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: Mon, 8 May 2023 00:07:47 +0300 Subject: [PATCH] Refactor #3922 - For Listbox --- api-generator/components/listbox.js | 6 ++ components/lib/config/PrimeVue.d.ts | 2 + components/lib/listbox/Listbox.d.ts | 138 +++++++++++++++++++++++++++- components/lib/listbox/Listbox.vue | 43 ++++++--- 4 files changed, 173 insertions(+), 16 deletions(-) diff --git a/api-generator/components/listbox.js b/api-generator/components/listbox.js index 58844f546..f2c6d7c03 100644 --- a/api-generator/components/listbox.js +++ b/api-generator/components/listbox.js @@ -173,6 +173,12 @@ const ListboxProps = [ 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 c3a53281e..35f9c1caa 100644 --- a/components/lib/config/PrimeVue.d.ts +++ b/components/lib/config/PrimeVue.d.ts @@ -36,6 +36,7 @@ import { InputNumberPassThroughOptions } from '../inputnumber'; import { InputSwitchPassThroughOptions } from '../inputswitch'; import { InputTextPassThroughOptions } from '../inputtext'; import { KnobPassThroughOptions } from '../knob'; +import { ListboxPassThroughOptions } from '../listbox'; import { MegaMenuPassThroughOptions } from '../megamenu'; import { MenuPassThroughOptions } from '../menu'; import { MenubarPassThroughOptions } from '../menubar'; @@ -123,6 +124,7 @@ interface PrimeVuePTOptions { inputswitch?: InputSwitchPassThroughOptions; inputtext?: InputTextPassThroughOptions; knob?: KnobPassThroughOptions; + listbox?: ListboxPassThroughOptions; megamenu?: MegaMenuPassThroughOptions; menu?: MenuPassThroughOptions; menubar?: MenubarPassThroughOptions; diff --git a/components/lib/listbox/Listbox.d.ts b/components/lib/listbox/Listbox.d.ts index 84f53460b..15d50b974 100755 --- a/components/lib/listbox/Listbox.d.ts +++ b/components/lib/listbox/Listbox.d.ts @@ -9,7 +9,18 @@ */ import { InputHTMLAttributes, VNode } from 'vue'; import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers'; -import { VirtualScrollerItemOptions, VirtualScrollerProps } from '../virtualscroller'; +import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller'; + +export declare type ListboxPassThroughOptionType = ListboxPassThroughAttributes | ((options: ListboxPassThroughMethodOptions) => ListboxPassThroughAttributes) | null | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface ListboxPassThroughMethodOptions { + props: ListboxProps; + state: ListboxState; + context: ListboxContext; +} /** * Custom change event. @@ -41,6 +52,126 @@ export interface ListboxFilterEvent { value: string; } +/** + * Custom passthrough(pt) options. + * @see {@link ListboxProps.pt} + */ +export interface ListboxPassThroughOptions { + /** + * Uses to pass attributes to the root's DOM element. + */ + root?: ListboxPassThroughOptionType; + /** + * Uses to pass attributes to the header's DOM element. + */ + header?: ListboxPassThroughOptionType; + /** + * Uses to pass attributes to the filter container's DOM element. + */ + filterContainer?: ListboxPassThroughOptionType; + /** + * Uses to pass attributes to the filter input's DOM element. + */ + filterInput?: ListboxPassThroughOptionType; + /** + * Uses to pass attributes to the filter icon's DOM element. + */ + filterIcon?: ListboxPassThroughOptionType; + /** + * Uses to pass attributes to the wrapper's DOM element. + */ + wrapper?: ListboxPassThroughOptionType; + /** + * Uses to pass attributes to the VirtualScroller component. + * @see {@link VirtualScrollerPassThroughOptionType} + */ + virtualScroller?: VirtualScrollerPassThroughOptionType; + /** + * Uses to pass attributes to the list's DOM element. + */ + list?: ListboxPassThroughOptionType; + /** + * Uses to pass attributes to the item group's DOM element. + */ + itemGroup?: ListboxPassThroughOptionType; + /** + * Uses to pass attributes to the item's DOM element. + */ + item?: ListboxPassThroughOptionType; + /** + * Uses to pass attributes to the emptyMessage's DOM element. + */ + emptyMessage?: ListboxPassThroughOptionType; + /** + * Uses to pass attributes to the hidden first focusable element's DOM element. + */ + hiddenFirstFocusableEl?: ListboxPassThroughOptionType; + /** + * Uses to pass attributes to the hidden filter result's DOM element. + */ + hiddenFilterResult?: ListboxPassThroughOptionType; + /** + * Uses to pass attributes to the hidden selected message's DOM element. + */ + hiddenSelectedMessage?: ListboxPassThroughOptionType; + /** + * Uses to pass attributes to the hidden last focusable element's DOM element. + */ + hiddenLastFocusableEl?: ListboxPassThroughOptionType; +} + +/** + * Custom passthrough attributes for each DOM elements + */ +export interface ListboxPassThroughAttributes { + [key: string]: any; +} + +/** + * Defines current inline state in Listbox component. + */ +export interface ListboxState { + /** + * Current id state as a string. + */ + id: string; + /** + * Current focused state as a boolean. + * @defaultValue false + */ + focused: boolean; + /** + * Current filter value state as a string. + */ + filterValue: string; + /** + * Current focused item index as a number. + * @defaultValue -1 + */ + focusedOptionIndex: number; +} + +/** + * Defines current options in Listbox component. + */ +export interface ListboxContext { + /** + * 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 Listbox component. */ @@ -180,6 +311,11 @@ export interface ListboxProps { * Identifier of the underlying input element. */ 'aria-labelledby'?: string | undefined; + /** + * Uses to pass attributes to DOM elements inside the component. + * @type {ListboxPassThroughOptions} + */ + pt?: ListboxPassThroughOptions; } /** diff --git a/components/lib/listbox/Listbox.vue b/components/lib/listbox/Listbox.vue index e95df14e7..e41a64751 100755 --- a/components/lib/listbox/Listbox.vue +++ b/components/lib/listbox/Listbox.vue @@ -1,9 +1,9 @@