From f7bd91e3cf107a1b428d6c456c64fa8972927253 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 10:00:16 +0300 Subject: [PATCH] Refactor #3922 - For MultiSelect --- api-generator/components/multiselect.js | 6 + components/lib/config/PrimeVue.d.ts | 2 + components/lib/multiselect/MultiSelect.d.ts | 224 +++++++++++++++++++- components/lib/multiselect/MultiSelect.vue | 111 ++++++---- 4 files changed, 302 insertions(+), 41 deletions(-) diff --git a/api-generator/components/multiselect.js b/api-generator/components/multiselect.js index 43e19d855..8eca6b3e3 100644 --- a/api-generator/components/multiselect.js +++ b/api-generator/components/multiselect.js @@ -292,6 +292,12 @@ const MultiSelectProps = [ 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 35f9c1caa..eb0c67a52 100644 --- a/components/lib/config/PrimeVue.d.ts +++ b/components/lib/config/PrimeVue.d.ts @@ -41,6 +41,7 @@ import { MegaMenuPassThroughOptions } from '../megamenu'; import { MenuPassThroughOptions } from '../menu'; import { MenubarPassThroughOptions } from '../menubar'; import { MessagePassThroughOptions } from '../message'; +import { MultiSelectPassThroughOptions } from '../multiselect'; import { OverlayPanelPassThroughOptions } from '../overlaypanel'; import { PanelPassThroughOptions } from '../panel'; import { PanelMenuPassThroughOptions } from '../panelmenu'; @@ -129,6 +130,7 @@ interface PrimeVuePTOptions { menu?: MenuPassThroughOptions; menubar?: MenubarPassThroughOptions; message?: MessagePassThroughOptions; + multiselect?: MultiSelectPassThroughOptions; overlaypanel?: OverlayPanelPassThroughOptions; panel?: PanelPassThroughOptions; panelmenu?: PanelMenuPassThroughOptions; diff --git a/components/lib/multiselect/MultiSelect.d.ts b/components/lib/multiselect/MultiSelect.d.ts index fdaa73571..44556fb42 100755 --- a/components/lib/multiselect/MultiSelect.d.ts +++ b/components/lib/multiselect/MultiSelect.d.ts @@ -9,7 +9,18 @@ */ import { ButtonHTMLAttributes, 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 MultiSelectPassThroughOptionType = MultiSelectPassThroughAttributes | ((options: MultiSelectPassThroughMethodOptions) => MultiSelectPassThroughAttributes) | null | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface MultiSelectPassThroughMethodOptions { + props: MultiSelectProps; + state: MultiSelectState; + context: MultiSelectContext; +} /** * Custom change event. @@ -56,6 +67,212 @@ export interface MultiSelectFilterEvent { value: string; } +/** + * Custom passthrough(pt) options. + * @see {@link MultiSelectProps.pt} + */ +export interface MultiSelectPassThroughOptions { + /** + * Uses to pass attributes to the root's DOM element. + */ + root?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the input's DOM element. + */ + input?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the label container's DOM element. + */ + labelContainer?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the label's DOM element. + */ + label?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the token's DOM element. + */ + token?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the token label's DOM element. + */ + tokenLabel?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the remove token icon's DOM element. + */ + removeTokenIcon?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the trigger's DOM element. + */ + trigger?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the trigger icon's DOM element. + */ + triggerIcon?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the dropdown icon's DOM element. + */ + dropdownIcon?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the panel's DOM element. + */ + panel?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the header's DOM element. + */ + header?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the header checkbox container's DOM element. + */ + headerCheckboxContainer?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the header checkbox's DOM element. + */ + headerCheckbox?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the filter container's DOM element. + */ + filterContainer?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the filter input's DOM element. + */ + filterInput?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the filter icon's DOM element. + */ + filterIcon?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the close button's DOM element. + */ + closeButton?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the close icon's DOM element. + */ + closeIcon?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the wrapper's DOM element. + */ + wrapper?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the VirtualScroller component. + * @see {@link VirtualScrollerPassThroughOptionType} + */ + virtualScroller?: VirtualScrollerPassThroughOptionType; + /** + * Uses to pass attributes to the list's DOM element. + */ + list?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the item group's DOM element. + */ + itemGroup?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the item's DOM element. + */ + item?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the checkbox container's DOM element. + */ + checkboxContainer?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the checkbox's DOM element. + */ + checkbox?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the checkbox icon's DOM element. + */ + checkboxIcon?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the option's DOM element. + */ + option?: MultiSelectPassThroughOptionType; + + /** + * Uses to pass attributes to the emptyMessage's DOM element. + */ + emptyMessage?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the hidden input wrapper's DOM element. + */ + hiddenInputWrapper?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the hidden input's DOM element. + */ + hiddenInput?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the hidden first focusable element's DOM element. + */ + hiddenFirstFocusableEl?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the hidden filter result's DOM element. + */ + hiddenFilterResult?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the hidden selected message's DOM element. + */ + hiddenSelectedMessage?: MultiSelectPassThroughOptionType; + /** + * Uses to pass attributes to the hidden last focusable element's DOM element. + */ + hiddenLastFocusableEl?: MultiSelectPassThroughOptionType; +} + +/** + * Custom passthrough attributes for each DOM elements + */ +export interface MultiSelectPassThroughAttributes { + [key: string]: any; +} + +/** + * Defines current inline state in MultiSelect component. + */ +export interface MultiSelectState { + /** + * 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 MultiSelect component. + */ +export interface MultiSelectContext { + /** + * 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 MultiSelect component. */ @@ -281,6 +498,11 @@ export interface MultiSelectProps { * Identifier of the underlying input element. */ 'aria-labelledby'?: string | undefined; + /** + * Uses to pass attributes to DOM elements inside the component. + * @type {MultiSelectPassThroughOptions} + */ + pt?: MultiSelectPassThroughOptions; } /** diff --git a/components/lib/multiselect/MultiSelect.vue b/components/lib/multiselect/MultiSelect.vue index aa88656f7..208fdeae8 100755 --- a/components/lib/multiselect/MultiSelect.vue +++ b/components/lib/multiselect/MultiSelect.vue @@ -1,6 +1,6 @@