Fixed #1489 - Add tooltipOptions property to SpeedDial
parent
c4be23c9af
commit
be2365bfef
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue