Fixed #1495 - Change button/maskClassName properties with button/maskClass properties on SpeedDial

pull/1533/head
mertsincan 2021-09-01 10:43:29 +03:00
parent a6f05052db
commit 2b3e461811
4 changed files with 14 additions and 14 deletions

View File

@ -54,13 +54,13 @@ const SpeedDialProps = [
description: "Whether the actions close when clicked outside." description: "Whether the actions close when clicked outside."
}, },
{ {
name: "buttonClassName", name: "buttonClass",
type: "string", type: "string",
default: "null", default: "null",
description: "Style class of the button element." description: "Style class of the button element."
}, },
{ {
name: "maskClassName", name: "maskClass",
type: "string", type: "string",
default: "null", default: "null",
description: "Style class of the mask element." description: "Style class of the mask element."

View File

@ -10,9 +10,9 @@ interface SpeedDialProps {
mask?: boolean; mask?: boolean;
disabled?: boolean; disabled?: boolean;
hideOnClickOutside?: boolean; hideOnClickOutside?: boolean;
buttonClassName?: string; buttonClass?: string;
maskStyle?: string; maskStyle?: string;
maskClassName?: string; maskClass?: string;
showIcon?: string; showIcon?: string;
hideIcon?: string; hideIcon?: string;
rotateAnimation?: boolean; rotateAnimation?: boolean;

View File

@ -1,7 +1,7 @@
<template> <template>
<div :ref="containerRef" :class="containerClass" :style="style"> <div :ref="containerRef" :class="containerClass" :style="style">
<slot name="button" :toggle="onClick"> <slot name="button" :toggle="onClick">
<SDButton type="button" :class="buttonClass" :icon="iconClassName" @click="onClick($event)" :disabled="disabled" /> <SDButton type="button" :class="buttonClassName" :icon="iconClassName" @click="onClick($event)" :disabled="disabled" />
</slot> </slot>
<ul :ref="listRef" class="p-speeddial-list" role="menu"> <ul :ref="listRef" class="p-speeddial-list" role="menu">
<li v-for="(item, index) of model" :key="index" class="p-speeddial-item" :style="getItemStyle(index)" role="none"> <li v-for="(item, index) of model" :key="index" class="p-speeddial-item" :style="getItemStyle(index)" role="none">
@ -16,7 +16,7 @@
</ul> </ul>
</div> </div>
<template v-if="mask"> <template v-if="mask">
<div :class="maskClass" :style="maskStyle"></div> <div :class="maskClassName" :style="maskStyle"></div>
</template> </template>
</template> </template>
@ -61,9 +61,9 @@ export default {
type: Boolean, type: Boolean,
default: true default: true
}, },
buttonClassName: null, buttonClass: null,
maskStyle: null, maskStyle: null,
maskClassName: null, maskClass: null,
showIcon: { showIcon: {
type: String, type: String,
default: 'pi pi-plus' default: 'pi pi-plus'
@ -243,18 +243,18 @@ export default {
'p-disabled': this.disabled 'p-disabled': this.disabled
}, this.class]; }, this.class];
}, },
buttonClass() { buttonClassName() {
return ['p-speeddial-button p-button-rounded', { return ['p-speeddial-button p-button-rounded', {
'p-speeddial-rotate': this.rotateAnimation && !this.hideIcon 'p-speeddial-rotate': this.rotateAnimation && !this.hideIcon
}, this.buttonClassName]; }, this.buttonClass];
}, },
iconClassName() { iconClassName() {
return this.d_visible && !!this.hideIcon ? this.hideIcon : this.showIcon; return this.d_visible && !!this.hideIcon ? this.hideIcon : this.showIcon;
}, },
maskClass() { maskClassName() {
return ['p-speeddial-mask', { return ['p-speeddial-mask', {
'p-speeddial-mask-visible': this.d_visible 'p-speeddial-mask-visible': this.d_visible
}, this.maskClassName]; }, this.maskClass];
} }
}, },
components: { components: {

View File

@ -132,13 +132,13 @@ items: [
<td>Whether the actions close when clicked outside.</td> <td>Whether the actions close when clicked outside.</td>
</tr> </tr>
<tr> <tr>
<td>buttonClassName</td> <td>buttonClass</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Style class of the button element.</td> <td>Style class of the button element.</td>
</tr> </tr>
<tr> <tr>
<td>maskClassName</td> <td>maskClass</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Style class of the mask element.</td> <td>Style class of the mask element.</td>