Fixed #1489 - Add tooltipOptions property to SpeedDial

pull/1533/head
mertsincan 2021-08-31 14:18:37 +03:00
parent c4be23c9af
commit be2365bfef
3 changed files with 25 additions and 7 deletions

View File

@ -18,6 +18,7 @@ interface SpeedDialProps {
rotateAnimation?: boolean; rotateAnimation?: boolean;
class?: string; class?: string;
style?: any; style?: any;
tooltipOptions?: any;
} }
declare class SpeedDial { declare class SpeedDial {

View File

@ -6,8 +6,8 @@
<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">
<template v-if="!$slots.item"> <template v-if="!$slots.item">
<a :href="item.url || '#'" role="menuitem" :class="['p-speeddial-action', { 'p-disabled': item.disabled }]" :target="item.target" <a :href="item.url || '#'" role="menuitem" :class="['p-speeddial-action', { 'p-disabled': item.disabled }]" :target="item.target"
:data-pr-tooltip="item.label" @click="onItemClick($event, item)" v-ripple> v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item)" v-ripple>
<span v-if="item.icon" :class="['p-speeddial-action-icon', item.icon]"></span> <span v-if="item.icon" :class="['p-speeddial-action-icon', item.icon]"></span>
</a> </a>
</template> </template>
@ -73,6 +73,7 @@ export default {
type: Boolean, type: Boolean,
default: true default: true
}, },
tooltipOptions: null,
style: null, style: null,
class: null class: null
}, },
@ -375,4 +376,4 @@ export default {
.p-speeddial-direction-right .p-speeddial-list { .p-speeddial-direction-right .p-speeddial-list {
flex-direction: row; flex-direction: row;
} }
</style> </style>

View File

@ -241,10 +241,27 @@ function getTarget(el) {
return DomHandler.hasClass(el, 'p-inputwrapper') ? DomHandler.findSingle(el, 'input'): el; return DomHandler.hasClass(el, 'p-inputwrapper') ? DomHandler.findSingle(el, 'input'): el;
} }
function getModifiers(options) {
// modifiers
if (options.modifiers && Object.keys(options.modifiers).length) {
return options.modifiers;
}
// arg
if (options.arg && typeof options.arg === 'object') {
return Object.entries(options.arg).reduce((acc, [key, val]) => {
if (key === 'event' || key === 'position') acc[val] = true;
return acc;
}, {});
}
return {};
}
const Tooltip = { const Tooltip = {
beforeMount(el, options) { beforeMount(el, options) {
let target = getTarget(el); let target = getTarget(el);
target.$_ptooltipModifiers = options.modifiers; target.$_ptooltipModifiers = getModifiers(options);
if (typeof options.value === 'string') { if (typeof options.value === 'string') {
target.$_ptooltipValue = options.value; target.$_ptooltipValue = options.value;
target.$_ptooltipDisabled = false; target.$_ptooltipDisabled = false;
@ -271,7 +288,7 @@ const Tooltip = {
}, },
updated(el, options) { updated(el, options) {
let target = getTarget(el); let target = getTarget(el);
target.$_ptooltipModifiers = options.modifiers; target.$_ptooltipModifiers = getModifiers(options);
if (typeof options.value === 'string') { if (typeof options.value === 'string') {
target.$_ptooltipValue = options.value; target.$_ptooltipValue = options.value;
@ -281,8 +298,7 @@ const Tooltip = {
target.$_ptooltipValue = options.value.value; target.$_ptooltipValue = options.value.value;
target.$_ptooltipDisabled = options.value.disabled; target.$_ptooltipDisabled = options.value.disabled;
} }
}, }
}; };
export default Tooltip; export default Tooltip;