@redseed/redseed-ui-vue3 8.13.4 → 8.14.0

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.4",
+    "version": "8.14.0",
     "description": "RedSeed UI Vue 3 components",
     "main": "index.js",
     "repository": "https://github.com/redseedtraining/redseed-ui",

package/src/components/Badge/Badge.vue

@@ -46,7 +46,7 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
-    redseedClassic: {
+    classic: {
         type: Boolean,
         default: false,
     },
@@ -68,7 +68,7 @@ const defaultColor = computed(
         !props.info &&
         !props.ai &&
         !props.skillscheck &&
-        !props.redseedClassic &&
+        !props.classic &&
         !props.coach,
 )
 
@@ -86,7 +86,7 @@ const badgeClass = computed(() => [
         'rsui-badge--info': props.info,
         'rsui-badge--ai': props.ai,
         'rsui-badge--skillscheck': props.skillscheck,
-        'rsui-badge--redseed-classic': props.redseedClassic,
+        'rsui-badge--classic': props.classic,
         'rsui-badge--coach': props.coach,
     },
 ])

package/src/components/Tooltip/Tooltip.vue

@@ -0,0 +1,176 @@
+<script setup>
+import { ref, computed, 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)
+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,
+    },
+])
+
+const contentClass = computed(() => [
+    'rsui-tooltip__content',
+    `rsui-tooltip__content--${props.position}`,
+])
+
+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 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>
+
+    <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"
+            :class="contentClass"
+            role="tooltip"
+        >
+            <slot></slot>
+        </div>
+    </transition>
+</div>
+</template>

package/src/components/Tooltip/index.js

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