@nexxtmove/ui 0.1.24 → 0.1.26

package/src/components/Tooltip/Tooltip.test.ts

@@ -0,0 +1,122 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+import Tooltip from './Tooltip.vue'
+
+// Stub reka-ui components so we can inspect slots and props without portal/hover behaviour
+const TooltipProviderStub = defineComponent({ template: '<div><slot /></div>' })
+const TooltipRootStub = defineComponent({
+  props: ['delayDuration', 'disableHoverableContent'],
+  template:
+    '<div :data-delay="delayDuration" :data-disable-hoverable="disableHoverableContent"><slot /></div>',
+})
+const TooltipTriggerStub = defineComponent({ template: '<div><slot /></div>' })
+const TooltipPortalStub = defineComponent({ template: '<div><slot /></div>' })
+const TooltipContentStub = defineComponent({
+  props: ['side', 'sideOffset', 'align'],
+  template:
+    '<div class="tooltip-content" :data-side="side" :data-side-offset="sideOffset" :data-align="align"><slot /></div>',
+})
+
+const stubs = {
+  TooltipProvider: TooltipProviderStub,
+  TooltipRoot: TooltipRootStub,
+  TooltipTrigger: TooltipTriggerStub,
+  TooltipPortal: TooltipPortalStub,
+  TooltipContent: TooltipContentStub,
+}
+
+const mountTooltip = (slots = {}, props = {}) => mount(Tooltip, { props, slots, global: { stubs } })
+
+describe('Tooltip', () => {
+  describe('trigger slot', () => {
+    it('renders the default slot as the trigger', () => {
+      const wrapper = mountTooltip({ default: '<button>Click me</button>' })
+      expect(wrapper.find('button').exists()).toBe(true)
+      expect(wrapper.find('button').text()).toBe('Click me')
+    })
+
+    it('renders plain text in the default slot', () => {
+      const wrapper = mountTooltip({ default: 'Trigger text' })
+      expect(wrapper.text()).toContain('Trigger text')
+    })
+  })
+
+  describe('tooltip slot', () => {
+    it('renders the tooltip slot content', () => {
+      const wrapper = mountTooltip({ tooltip: 'Tooltip message' })
+      expect(wrapper.find('.tooltip-content').text()).toContain('Tooltip message')
+    })
+
+    it('renders rich HTML in the tooltip slot', () => {
+      const wrapper = mountTooltip({ tooltip: '<strong>Bold text</strong>' })
+      expect(wrapper.find('.tooltip-content strong').exists()).toBe(true)
+      expect(wrapper.find('.tooltip-content strong').text()).toBe('Bold text')
+    })
+
+    it('renders an empty tooltip content when no tooltip slot is provided', () => {
+      const wrapper = mountTooltip()
+      expect(wrapper.find('.tooltip-content').text()).toBe('')
+    })
+  })
+
+  describe('delay prop', () => {
+    it('passes the delay to TooltipRoot', () => {
+      const wrapper = mountTooltip({}, { delay: 500 })
+      expect(wrapper.findComponent(TooltipRootStub).attributes('data-delay')).toBe('500')
+    })
+
+    it('defaults delay to 0', () => {
+      const wrapper = mountTooltip()
+      expect(wrapper.findComponent(TooltipRootStub).attributes('data-delay')).toBe('0')
+    })
+  })
+
+  describe('side prop', () => {
+    it('passes the side to TooltipContent', () => {
+      const wrapper = mountTooltip({}, { side: 'bottom' })
+      expect(wrapper.find('.tooltip-content').attributes('data-side')).toBe('bottom')
+    })
+
+    it('defaults side to top', () => {
+      const wrapper = mountTooltip()
+      expect(wrapper.find('.tooltip-content').attributes('data-side')).toBe('top')
+    })
+  })
+
+  describe('sideOffset prop', () => {
+    it('passes the sideOffset to TooltipContent', () => {
+      const wrapper = mountTooltip({}, { sideOffset: 16 })
+      expect(wrapper.find('.tooltip-content').attributes('data-side-offset')).toBe('16')
+    })
+
+    it('defaults sideOffset to 8', () => {
+      const wrapper = mountTooltip()
+      expect(wrapper.find('.tooltip-content').attributes('data-side-offset')).toBe('8')
+    })
+  })
+
+  describe('align prop', () => {
+    it('passes the align to TooltipContent', () => {
+      const wrapper = mountTooltip({}, { align: 'start' })
+      expect(wrapper.find('.tooltip-content').attributes('data-align')).toBe('start')
+    })
+
+    it('defaults align to center', () => {
+      const wrapper = mountTooltip()
+      expect(wrapper.find('.tooltip-content').attributes('data-align')).toBe('center')
+    })
+  })
+
+  describe('disableHoverableContent prop', () => {
+    it('passes disableHoverableContent to TooltipRoot', () => {
+      const wrapper = mountTooltip({}, { disableHoverableContent: true })
+      expect(wrapper.findComponent(TooltipRootStub).props('disableHoverableContent')).toBe(true)
+    })
+
+    it('defaults disableHoverableContent to false', () => {
+      const wrapper = mountTooltip()
+      expect(wrapper.findComponent(TooltipRootStub).props('disableHoverableContent')).toBe(false)
+    })
+  })
+})

package/src/components/Tooltip/Tooltip.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import {
+  TooltipContent,
+  TooltipPortal,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+} from 'reka-ui'
+
+defineOptions({
+  name: 'NexxtTooltip',
+})
+
+interface NexxtTooltip {
+  delay?: number
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  sideOffset?: number
+  align?: 'start' | 'center' | 'end'
+  disableHoverableContent?: boolean
+}
+
+const {
+  delay = 0,
+  side = 'top',
+  sideOffset = 8,
+  align = 'center',
+  disableHoverableContent = false,
+} = defineProps<NexxtTooltip>()
+</script>
+
+<template>
+  <TooltipProvider>
+    <TooltipRoot :delay-duration="delay" :disable-hoverable-content="disableHoverableContent">
+      <TooltipTrigger as-child>
+        <slot />
+      </TooltipTrigger>
+      <TooltipPortal>
+        <TooltipContent
+          :side="side"
+          :side-offset="sideOffset"
+          :align="align"
+          class="z-50 rounded-lg border border-gray-200 bg-white px-3 py-2 shadow-xs"
+        >
+          <slot name="tooltip" />
+        </TooltipContent>
+      </TooltipPortal>
+    </TooltipRoot>
+  </TooltipProvider>
+</template>

package/src/components.json

@@ -12,5 +12,8 @@
   "NexxtSocialMediaCustomTemplate": "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue",
   "NexxtSocialMediaTemplate": "components/SocialMediaTemplate/SocialMediaTemplate.vue",
   "NexxtSocialMediaType": "components/SocialMediaType/SocialMediaType.vue",
-  "NexxtStepperHeader": "components/StepperHeader/StepperHeader.vue"
+  "NexxtStepperHeader": "components/StepperHeader/StepperHeader.vue",
+  "NexxtTimelineEvent": "components/TimelineEvent/TimelineEvent.vue",
+  "NexxtTimelinePhaseblock": "components/TimelinePhaseblock/TimelinePhaseblock.vue",
+  "NexxtTooltip": "components/Tooltip/Tooltip.vue"
 }

package/src/index.ts

@@ -13,3 +13,6 @@ export { default as NexxtSocialMediaCustomTemplate } from './components/SocialMe
 export { default as NexxtSocialMediaTemplate } from './components/SocialMediaTemplate/SocialMediaTemplate.vue'
 export { default as NexxtSocialMediaType } from './components/SocialMediaType/SocialMediaType.vue'
 export { default as NexxtStepperHeader } from './components/StepperHeader/StepperHeader.vue'
+export { default as NexxtTimelineEvent } from './components/TimelineEvent/TimelineEvent.vue'
+export { default as NexxtTimelinePhaseblock } from './components/TimelinePhaseblock/TimelinePhaseblock.vue'
+export { default as NexxtTooltip } from './components/Tooltip/Tooltip.vue'