diff --git a/api-generator/components/chips.js b/api-generator/components/chips.js index bc2d80de7..9e0940fdd 100644 --- a/api-generator/components/chips.js +++ b/api-generator/components/chips.js @@ -64,6 +64,12 @@ const ChipsProps = [ type: 'object', default: 'null', description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.' + }, + { + name: 'pt', + type: 'any', + default: 'null', + description: 'Uses to pass attributes to DOM elements inside the component.' } ]; diff --git a/components/lib/chips/Chips.d.ts b/components/lib/chips/Chips.d.ts index 21509f45c..b0bc570a4 100755 --- a/components/lib/chips/Chips.d.ts +++ b/components/lib/chips/Chips.d.ts @@ -10,6 +10,16 @@ import { InputHTMLAttributes, VNode } from 'vue'; import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers'; +export declare type ChipsPassThroughOptionType = ChipsPassThroughAttributes | ((options: ChipsPassThroughMethodOptions) => ChipsPassThroughAttributes) | null | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface ChipsPassThroughMethodOptions { + props: ChipsProps; + state: ChipsState; +} + /** * Custom add event. * @see {@link ChipsEmits.add} @@ -32,6 +42,71 @@ export interface ChipsAddEvent { */ export interface ChipsRemoveEvent extends ChipsAddEvent {} +/** + * Custom passthrough(pt) options. + * @see {@link ChipsProps.pt} + */ +export interface ChipsPassThroughOptions { + /** + * Uses to pass attributes to the root's DOM element. + */ + root?: ChipsPassThroughOptionType; + /** + * Uses to pass attributes to the container's DOM element. + */ + container?: ChipsPassThroughOptionType; + /** + * Uses to pass attributes to the token's DOM element. + */ + token?: ChipsPassThroughOptionType; + /** + * Uses to pass attributes to the label's DOM element. + */ + label?: ChipsPassThroughOptionType; + /** + * Uses to pass attributes to the remove token icon's DOM element. + */ + removeTokenIcon?: ChipsPassThroughOptionType; + /** + * Uses to pass attributes to the input token's DOM element. + */ + inputToken?: ChipsPassThroughOptionType; + /** + * Uses to pass attributes to the input's DOM element. + */ + input?: ChipsPassThroughOptionType; +} + +/** + * Custom passthrough attributes for each DOM elements + */ +export interface ChipsPassThroughAttributes { + [key: string]: any; +} + +/** + * Defines current inline state in Chips component. + */ +export interface ChipsState { + /** + * Current id state as a string. + */ + id: string; + /** + * Current input value as a string. + */ + inputValue: string; + /** + * Current focused state as a boolean. + * @defaultValue false + */ + focused: boolean; + /** + * Current focused item index state as a number. + */ + focusedIndex: number; +} + /** * Defines valid properties in Chips component. */ @@ -96,6 +171,11 @@ export interface ChipsProps { * Establishes a string value that labels the component. */ 'aria-label'?: string | undefined; + /** + * Uses to pass attributes to DOM elements inside the component. + * @type {ChipsPassThroughOptions} + */ + pt?: ChipsPassThroughOptions; } /** * Defines valid slots in Chips slots. diff --git a/components/lib/chips/Chips.vue b/components/lib/chips/Chips.vue index 7a3cbc435..8541b82a3 100755 --- a/components/lib/chips/Chips.vue +++ b/components/lib/chips/Chips.vue @@ -1,5 +1,5 @@