Browse Source

feat(nc-gui): add disabled prop to tooltip for force disable

pull/4071/head
braks 2 years ago
parent
commit
50779659b8
  1. 16
      packages/nc-gui/components/general/Tooltip.vue

16
packages/nc-gui/components/general/Tooltip.vue

@ -1,19 +1,25 @@
<script lang="ts" setup> <script lang="ts" setup>
import { onKeyStroke } from '@vueuse/core' import { onKeyStroke } from '@vueuse/core'
import type { CSSProperties } from '@vue/runtime-dom' import type { CSSProperties } from '@vue/runtime-dom'
import { ref, useElementHover, watch } from '#imports' import { controlledRef, ref, useElementHover, watch } from '#imports'
interface Props { interface Props {
// Key to be pressed on hover to trigger the tooltip // Key to be pressed on hover to trigger the tooltip
modifierKey?: string modifierKey?: string
tooltipStyle?: CSSProperties tooltipStyle?: CSSProperties
// force disable tooltip
disabled?: boolean
} }
const { modifierKey, tooltipStyle } = defineProps<Props>() const { modifierKey, tooltipStyle, disabled } = defineProps<Props>()
const el = ref() const el = ref()
const showTooltip = ref(false) const showTooltip = controlledRef(false, {
onBeforeChange: (shouldShow) => {
if (shouldShow && disabled) return false
},
})
const isHovering = useElementHover(() => el.value) const isHovering = useElementHover(() => el.value)
@ -44,8 +50,8 @@ onKeyStroke(
{ eventName: 'keyup' }, { eventName: 'keyup' },
) )
watch([isHovering, () => modifierKey], ([hovering, key]) => { watch([isHovering, () => modifierKey, () => disabled], ([hovering, key, isDisabled]) => {
if (!hovering) { if (!hovering || isDisabled) {
showTooltip.value = false showTooltip.value = false
return return
} }

Loading…
Cancel
Save