diff --git a/api-generator/components/inplace.js b/api-generator/components/inplace.js index 978936a77..f9f96aded 100644 --- a/api-generator/components/inplace.js +++ b/api-generator/components/inplace.js @@ -16,6 +16,12 @@ const InplaceProps = [ type: 'boolean', default: 'false', description: 'When present, it specifies that the element should be disabled.' + }, + { + name: 'pt', + type: 'any', + default: 'null', + description: 'Uses to pass attributes to DOM elements inside the component.' } ]; diff --git a/components/lib/inplace/Inplace.d.ts b/components/lib/inplace/Inplace.d.ts index bfa5a7d10..5736f4896 100755 --- a/components/lib/inplace/Inplace.d.ts +++ b/components/lib/inplace/Inplace.d.ts @@ -10,6 +10,61 @@ import { ButtonHTMLAttributes, HTMLAttributes, VNode } from 'vue'; import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers'; +export declare type InplacePassThroughOptionType = InplacePassThroughAttributes | ((options: InplacePassThroughMethodOptions) => InplacePassThroughAttributes) | null | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface InplacePassThroughMethodOptions { + props: InplaceProps; + state: InplaceState; +} + +/** + * Custom passthrough(pt) options. + * @see {@link InplaceProps.pt} + */ +export interface InplacePassThroughOptions { + /** + * Uses to pass attributes to the root's DOM element. + */ + root?: InplacePassThroughOptionType; + /** + * Uses to pass attributes to the display's DOM element. + */ + display?: InplacePassThroughOptionType; + /** + * Uses to pass attributes to the content's DOM element. + */ + content?: InplacePassThroughOptionType; + /** + * Uses to pass attributes to the close button's DOM element. + */ + closeButton?: InplacePassThroughOptionType; + /** + * Uses to pass attributes to the close icon's DOM element. + */ + closeIcon?: InplacePassThroughOptionType; +} + +/** + * Custom passthrough attributes for each DOM elements + */ +export interface InplacePassThroughAttributes { + [key: string]: any; +} + +/** + * Defines current inline state in Inplace component. + */ +export interface InplaceState { + /** + * Current active state as a boolean. + * @defaultValue false + */ + d_active: boolean; +} + /** * Defines valid properties in Inplace component. */ @@ -42,6 +97,11 @@ export interface InplaceProps { * Uses to pass all properties of the HTMLButtonElement to the close button. */ closeButtonProps?: ButtonHTMLAttributes | undefined; + /** + * Uses to pass attributes to DOM elements inside the component. + * @type {InplacePassThroughOptions} + */ + pt?: InplacePassThroughOptions; } /** diff --git a/components/lib/inplace/Inplace.vue b/components/lib/inplace/Inplace.vue index d6a131421..6f720ca48 100755 --- a/components/lib/inplace/Inplace.vue +++ b/components/lib/inplace/Inplace.vue @@ -1,14 +1,14 @@