Refactor #3879 - For ProgressSpinner

pull/3892/head
Tuğçe Küçükoğlu 2023-04-21 16:39:16 +03:00
parent 498b40f80f
commit c7d3a2fd14
3 changed files with 52 additions and 3 deletions

View File

@ -16,6 +16,12 @@ const ProgressSpinnerProps = [
type: 'string',
default: '2s',
description: 'Duration of the rotate animation.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

View File

@ -9,6 +9,41 @@
*/
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type ProgressSpinnerPassThroughOptionType = ProgressSpinnerPassThroughAttributes | ((options: ProgressSpinnerPassThroughMethodOptions) => ProgressSpinnerPassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface ProgressSpinnerPassThroughMethodOptions {
props: ProgressSpinnerProps;
}
/**
* Custom passthrough(pt) options.
* @see {@link ProgressSpinnerProps.pt}
*/
export interface ProgressSpinnerPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: ProgressSpinnerPassThroughOptionType;
/**
* Uses to pass attributes to the spinner's DOM element.
*/
spinner?: ProgressSpinnerPassThroughOptionType;
/**
* Uses to pass attributes to the circle's DOM element.
*/
circle?: ProgressSpinnerPassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface ProgressSpinnerPassThroughAttributes {
[key: string]: any;
}
/**
* Defines valid properties in ProgressSpinner component.
*/
@ -27,6 +62,11 @@ export interface ProgressSpinnerProps {
* @defaultValue 2s
*/
animationDuration?: string | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {ProgressSpinnerPassThroughOptions}
*/
pt?: ProgressSpinnerPassThroughOptions;
}
/**

View File

@ -1,14 +1,17 @@
<template>
<div class="p-progress-spinner" role="progressbar">
<svg class="p-progress-spinner-svg" viewBox="25 25 50 50" :style="svgStyle">
<circle class="p-progress-spinner-circle" cx="50" cy="50" r="20" :fill="fill" :stroke-width="strokeWidth" strokeMiterlimit="10" />
<div class="p-progress-spinner" role="progressbar" v-bind="ptm('root')">
<svg class="p-progress-spinner-svg" viewBox="25 25 50 50" :style="svgStyle" v-bind="ptm('spinner')">
<circle class="p-progress-spinner-circle" cx="50" cy="50" r="20" :fill="fill" :stroke-width="strokeWidth" strokeMiterlimit="10" v-bind="ptm('circle')" />
</svg>
</div>
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
export default {
name: 'ProgressSpinner',
extends: BaseComponent,
props: {
strokeWidth: {
type: String,