@redseed/redseed-ui-vue3 8.13.5 → 8.14.1

package/index.js

@@ -41,4 +41,5 @@ export * from './src/components/Sorting'
 export * from './src/components/Switcher'
 export * from './src/components/Table'
 export * from './src/components/Toggle'
+export * from './src/components/Tooltip'
 export * from './src/helpers'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "8.13.5",
+    "version": "8.14.1",
     "description": "RedSeed UI Vue 3 components",
     "main": "index.js",
     "repository": "https://github.com/redseedtraining/redseed-ui",

package/src/components/Tooltip/Tooltip.vue

@@ -0,0 +1,213 @@
+<script setup>
+import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
+import { InformationCircleIcon } from '@heroicons/vue/24/outline'
+
+const props = defineProps({
+    position: {
+        type: String,
+        default: 'top',
+        validator: (value) => ['top', 'right', 'bottom', 'left'].includes(value),
+    },
+    xs: {
+        type: Boolean,
+        default: false,
+    },
+    sm: {
+        type: Boolean,
+        default: false,
+    },
+    md: {
+        type: Boolean,
+        default: false,
+    },
+    secondary: {
+        type: Boolean,
+        default: false,
+    },
+    info: {
+        type: Boolean,
+        default: false,
+    },
+    success: {
+        type: Boolean,
+        default: false,
+    },
+    warning: {
+        type: Boolean,
+        default: false,
+    },
+    error: {
+        type: Boolean,
+        default: false,
+    },
+    skillscheck: {
+        type: Boolean,
+        default: false,
+    },
+    coach: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const isOpen = ref(false)
+const tooltipRef = ref(null)
+const contentRef = ref(null)
+const contentStyle = ref({})
+let hoverTimeout = null
+
+const defaultSize = computed(() => !props.xs && !props.sm && !props.md)
+
+const defaultColor = computed(
+    () =>
+        !props.secondary &&
+        !props.info &&
+        !props.success &&
+        !props.warning &&
+        !props.error &&
+        !props.skillscheck &&
+        !props.coach,
+)
+
+const triggerClass = computed(() => [
+    'rsui-tooltip__trigger',
+    {
+        'rsui-tooltip__trigger--xs': props.xs,
+        'rsui-tooltip__trigger--sm': props.sm || defaultSize.value,
+        'rsui-tooltip__trigger--md': props.md,
+        'rsui-tooltip__trigger--secondary': props.secondary || defaultColor.value,
+        'rsui-tooltip__trigger--info': props.info,
+        'rsui-tooltip__trigger--success': props.success,
+        'rsui-tooltip__trigger--warning': props.warning,
+        'rsui-tooltip__trigger--error': props.error,
+        'rsui-tooltip__trigger--skillscheck': props.skillscheck,
+        'rsui-tooltip__trigger--coach': props.coach,
+    },
+])
+
+function open() {
+    clearTimeout(hoverTimeout)
+    isOpen.value = true
+}
+
+function close() {
+    clearTimeout(hoverTimeout)
+    isOpen.value = false
+}
+
+function onMouseEnter() {
+    clearTimeout(hoverTimeout)
+    hoverTimeout = setTimeout(() => {
+        isOpen.value = true
+    }, 100)
+}
+
+function onMouseLeave() {
+    clearTimeout(hoverTimeout)
+    hoverTimeout = setTimeout(() => {
+        isOpen.value = false
+    }, 150)
+}
+
+function toggle() {
+    isOpen.value = !isOpen.value
+}
+
+function updatePosition() {
+    if (!tooltipRef.value) return
+    const rect = tooltipRef.value.getBoundingClientRect()
+    const style = { position: 'fixed', zIndex: 50 }
+
+    if (props.position === 'top') {
+        style.left = `${rect.left + rect.width / 2}px`
+        style.top = `${rect.top}px`
+        style.transform = 'translate(-50%, -100%)'
+        style.marginTop = '-8px'
+    } else if (props.position === 'bottom') {
+        style.left = `${rect.left + rect.width / 2}px`
+        style.top = `${rect.bottom}px`
+        style.transform = 'translate(-50%, 0)'
+        style.marginTop = '8px'
+    } else if (props.position === 'left') {
+        style.left = `${rect.left}px`
+        style.top = `${rect.top + rect.height / 2}px`
+        style.transform = 'translate(-100%, -50%)'
+        style.marginLeft = '-8px'
+    } else if (props.position === 'right') {
+        style.left = `${rect.right}px`
+        style.top = `${rect.top + rect.height / 2}px`
+        style.transform = 'translate(0, -50%)'
+        style.marginLeft = '8px'
+    }
+
+    contentStyle.value = style
+}
+
+watch(isOpen, (val) => {
+    if (val) {
+        nextTick(() => updatePosition())
+    }
+})
+
+function closeOnEscape(e) {
+    if (isOpen.value && e.key === 'Escape') {
+        isOpen.value = false
+    }
+}
+
+onMounted(() => document.addEventListener('keydown', closeOnEscape))
+onUnmounted(() => {
+    document.removeEventListener('keydown', closeOnEscape)
+    clearTimeout(hoverTimeout)
+})
+</script>
+<template>
+<div
+    ref="tooltipRef"
+    class="rsui-tooltip"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+>
+    <slot name="trigger" :toggle="toggle" :open="open" :close="close">
+        <button
+            :class="triggerClass"
+            type="button"
+            @click="toggle"
+            @focus="open"
+            @blur="close"
+            aria-label="More information"
+        >
+            <InformationCircleIcon />
+        </button>
+    </slot>
+
+    <Teleport to="body">
+        <div
+            v-show="isOpen"
+            class="rsui-tooltip__overlay"
+            @click="close"
+        ></div>
+    </Teleport>
+
+    <Teleport to="body">
+        <transition
+            enter-active-class="rsui-tooltip__transition--enter-active"
+            enter-from-class="rsui-tooltip__transition--enter-from"
+            enter-to-class="rsui-tooltip__transition--enter-to"
+            leave-active-class="rsui-tooltip__transition--leave-active"
+            leave-from-class="rsui-tooltip__transition--leave-from"
+            leave-to-class="rsui-tooltip__transition--leave-to"
+        >
+            <div
+                v-show="isOpen"
+                ref="contentRef"
+                class="rsui-tooltip__content"
+                :style="contentStyle"
+                role="tooltip"
+            >
+                <slot></slot>
+            </div>
+        </transition>
+    </Teleport>
+</div>
+</template>

package/src/components/Tooltip/index.js

@@ -0,0 +1,5 @@
+import Tooltip from './Tooltip.vue'
+
+export {
+    Tooltip
+}