Refactor #3879 - For Skeleton
parent
51653f96f8
commit
cc7d0ccce2
|
@ -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.'
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -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,
|
||||||
|
|
Loading…
Reference in New Issue