diff --git a/api-generator/components/checkbox.js b/api-generator/components/checkbox.js index 2e122f275..0ca595316 100644 --- a/api-generator/components/checkbox.js +++ b/api-generator/components/checkbox.js @@ -88,6 +88,12 @@ const CheckboxProps = [ type: 'string', default: 'null', description: 'Used to define a string that labels the element.' + }, + { + name: 'pt', + type: 'any', + default: 'null', + description: 'Uses to pass attributes to DOM elements inside the component.' } ]; diff --git a/components/lib/checkbox/Checkbox.d.ts b/components/lib/checkbox/Checkbox.d.ts index 86ad112e4..78ed88640 100755 --- a/components/lib/checkbox/Checkbox.d.ts +++ b/components/lib/checkbox/Checkbox.d.ts @@ -10,6 +10,57 @@ import { InputHTMLAttributes, VNode } from 'vue'; import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers'; +export declare type CheckboxPassThroughOptionType = CheckboxPassThroughAttributes | ((options: CheckboxPassThroughMethodOptions) => CheckboxPassThroughAttributes) | null | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface CheckboxPassThroughMethodOptions { + props: CheckboxProps; + state: CheckboxState; +} + +/** + * Custom passthrough(pt) options. + * @see {@link CheckboxProps.pt} + */ +export interface CheckboxPassThroughOptions { + /** + * Uses to pass attributes to the root's DOM element. + */ + root?: CheckboxPassThroughOptionType; + /** + * Uses to pass attributes to the input's DOM element. + */ + input?: CheckboxPassThroughOptionType; + /** + * Uses to pass attributes to the icon's DOM element. + */ + icon?: CheckboxPassThroughOptionType; + /** + * Uses to pass attributes to the input aria's DOM element. + */ + inputAria?: CheckboxPassThroughOptionType; +} + +/** + * Custom passthrough attributes for each DOM elements + */ +export interface CheckboxPassThroughAttributes { + [key: string]: any; +} + +/** + * Defines current inline state in Checkbox component. + */ +export interface CheckboxState { + /** + * Current focus state as a boolean. + * @defaultValue false + */ + focused: boolean; +} + /** * Defines valid properties in Checkbox component. */ @@ -84,6 +135,11 @@ export interface CheckboxProps { * Establishes a string value that labels the component. */ 'aria-label'?: string | undefined; + /** + * Uses to pass attributes to DOM elements inside the component. + * @type {CheckboxPassThroughOptions} + */ + pt?: CheckboxPassThroughOptions; } export interface CheckboxSlots { diff --git a/components/lib/checkbox/Checkbox.vue b/components/lib/checkbox/Checkbox.vue index 6917e992b..49b4ab957 100755 --- a/components/lib/checkbox/Checkbox.vue +++ b/components/lib/checkbox/Checkbox.vue @@ -1,5 +1,5 @@