Refactor #3879 - For Skeleton

pull/3892/head
Tuğçe Küçükoğlu 2023-04-24 12:43:33 +03:00
parent 51653f96f8
commit cc7d0ccce2
3 changed files with 42 additions and 1 deletions

View File

@ -34,6 +34,12 @@ const SkeletonProps = [
type: 'string', type: 'string',
default: 'wave', default: 'wave',
description: 'Type of the animation, valid options are "wave" and "none".' description: 'Type of the animation, valid options are "wave" and "none".'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
} }
]; ];

View File

@ -9,6 +9,33 @@
*/ */
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers'; import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type SkeletonPassThroughOptionType = SkeletonPassThroughAttributes | ((options: SkeletonPassThroughMethodOptions) => SkeletonPassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface SkeletonPassThroughMethodOptions {
props: SkeletonProps;
}
/**
* Custom passthrough(pt) options.
* @see {@link SkeletonProps.pt}
*/
export interface SkeletonPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: SkeletonPassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface SkeletonPassThroughAttributes {
[key: string]: any;
}
/** /**
* Defines valid properties in Skeleton component. * Defines valid properties in Skeleton component.
*/ */
@ -41,6 +68,11 @@ export interface SkeletonProps {
* @defaultValue wave * @defaultValue wave
*/ */
animation?: 'wave' | 'none' | undefined; animation?: 'wave' | 'none' | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {SkeletonPassThroughOptions}
*/
pt?: SkeletonPassThroughOptions;
} }
/** /**

View File

@ -1,10 +1,13 @@
<template> <template>
<div :style="containerStyle" :class="containerClass" aria-hidden="true"></div> <div :style="containerStyle" :class="containerClass" aria-hidden="true" v-bind="ptm('root')"></div>
</template> </template>
<script> <script>
import BaseComponent from 'primevue/basecomponent';
export default { export default {
name: 'Skeleton', name: 'Skeleton',
extends: BaseComponent,
props: { props: {
shape: { shape: {
type: String, type: String,