@firerian/fireui 1.0.0

package/src/components/tooltip/index.ts

@@ -0,0 +1,8 @@
+import Tooltip from './tooltip.vue'
+import { withInstall } from '../../utils'
+import type { App } from 'vue'
+
+const FireTooltip = withInstall(Tooltip as any) as typeof Tooltip & { install: (app: App) => void }
+
+export { FireTooltip }
+export default FireTooltip

package/src/components/tooltip/tooltip.test.ts

@@ -0,0 +1,187 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { FireTooltip } from './index'
+
+describe('FireTooltip', () => {
+  beforeEach(() => {
+    // 清理 DOM
+    document.body.innerHTML = ''
+  })
+
+  it('should render correctly', () => {
+    const wrapper = mount(FireTooltip, {
+      props: {
+        content: 'Test tooltip'
+      },
+      slots: {
+        default: '<button>Hover me</button>'
+      }
+    })
+
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.find('button').text()).toBe('Hover me')
+  })
+
+  it('should show tooltip on hover', async () => {
+    const wrapper = mount(FireTooltip, {
+      props: {
+        content: 'Test tooltip',
+        trigger: 'hover'
+      },
+      slots: {
+        default: '<button>Hover me</button>'
+      }
+    })
+
+    // 初始状态应该隐藏
+    expect(document.querySelector('.fire-tooltip')).toBe(null)
+
+    // 模拟鼠标移入
+    await wrapper.find('button').trigger('mouseenter')
+    await wrapper.vm.$nextTick()
+
+    // 应该显示 tooltip
+    expect(document.querySelector('.fire-tooltip')).toBeTruthy()
+
+    // 模拟鼠标移出
+    await wrapper.find('button').trigger('mouseleave')
+    await wrapper.vm.$nextTick()
+
+    // 应该隐藏 tooltip
+    expect(document.querySelector('.fire-tooltip')).toBe(null)
+  })
+
+  it('should show tooltip on click', async () => {
+    const wrapper = mount(FireTooltip, {
+      props: {
+        content: 'Test tooltip',
+        trigger: 'click'
+      },
+      slots: {
+        default: '<button>Click me</button>'
+      }
+    })
+
+    // 初始状态应该隐藏
+    expect(document.querySelector('.fire-tooltip')).toBe(null)
+
+    // 模拟点击
+    await wrapper.find('button').trigger('click')
+    await wrapper.vm.$nextTick()
+
+    // 应该显示 tooltip
+    expect(document.querySelector('.fire-tooltip')).toBeTruthy()
+
+    // 再次点击
+    await wrapper.find('button').trigger('click')
+    await wrapper.vm.$nextTick()
+
+    // 应该隐藏 tooltip
+    expect(document.querySelector('.fire-tooltip')).toBe(null)
+  })
+
+  it('should show tooltip on focus', async () => {
+    const wrapper = mount(FireTooltip, {
+      props: {
+        content: 'Test tooltip',
+        trigger: 'focus'
+      },
+      slots: {
+        default: '<input type="text" placeholder="Focus me" />'
+      }
+    })
+
+    // 初始状态应该隐藏
+    expect(document.querySelector('.fire-tooltip')).toBe(null)
+
+    // 模拟聚焦
+    await wrapper.find('input').trigger('focus')
+    await wrapper.vm.$nextTick()
+
+    // 应该显示 tooltip
+    expect(document.querySelector('.fire-tooltip')).toBeTruthy()
+
+    // 模拟失焦
+    await wrapper.find('input').trigger('blur')
+    await wrapper.vm.$nextTick()
+
+    // 应该隐藏 tooltip
+    expect(document.querySelector('.fire-tooltip')).toBe(null)
+  })
+
+  it('should be disabled', async () => {
+    const wrapper = mount(FireTooltip, {
+      props: {
+        content: 'Test tooltip',
+        disabled: true,
+        trigger: 'hover'
+      },
+      slots: {
+        default: '<button>Hover me</button>'
+      }
+    })
+
+    // 模拟鼠标移入
+    await wrapper.find('button').trigger('mouseenter')
+    await wrapper.vm.$nextTick()
+
+    // 应该仍然隐藏
+    expect(document.querySelector('.fire-tooltip')).toBe(null)
+  })
+
+  it('should use slot content', async () => {
+    const wrapper = mount(FireTooltip, {
+      props: {
+        trigger: 'hover'
+      },
+      slots: {
+        default: '<button>Hover me</button>',
+        content: '<div>Custom tooltip content</div>'
+      }
+    })
+
+    // 模拟鼠标移入
+    await wrapper.find('button').trigger('mouseenter')
+    await wrapper.vm.$nextTick()
+
+    // 应该显示自定义内容
+    expect(document.querySelector('.fire-tooltip-content')?.textContent).toBe('Custom tooltip content')
+  })
+
+  it('should emit events', async () => {
+    const showSpy = vi.fn()
+    const hideSpy = vi.fn()
+    const updateVisibleSpy = vi.fn()
+
+    const wrapper = mount(FireTooltip, {
+      props: {
+        content: 'Test tooltip',
+        trigger: 'click'
+      },
+      slots: {
+        default: '<button>Click me</button>'
+      },
+      listeners: {
+        show: showSpy,
+        hide: hideSpy,
+        'update:visible': updateVisibleSpy
+      }
+    })
+
+    // 模拟点击
+    await wrapper.find('button').trigger('click')
+    await wrapper.vm.$nextTick()
+
+    // 应该触发 show 和 update:visible 事件
+    expect(showSpy).toHaveBeenCalled()
+    expect(updateVisibleSpy).toHaveBeenCalledWith(true)
+
+    // 再次点击
+    await wrapper.find('button').trigger('click')
+    await wrapper.vm.$nextTick()
+
+    // 应该触发 hide 和 update:visible 事件
+    expect(hideSpy).toHaveBeenCalled()
+    expect(updateVisibleSpy).toHaveBeenCalledWith(false)
+  })
+})

package/src/components/tooltip/tooltip.vue

@@ -0,0 +1,261 @@
+<template>
+  <div
+    ref="reference"
+    :class="ns.b"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @focus="handleFocus"
+    @blur="handleBlur"
+  >
+    <slot></slot>
+    <Teleport to="body">
+      <Transition name="fire-tooltip">
+        <div
+          v-if="isVisible"
+          ref="floating"
+          :class="[
+            ns.e('content'),
+            ns.m(position)
+          ]"
+          :style="floatingStyles"
+          :id="tooltipId"
+          role="tooltip"
+        >
+          <div :class="ns.e('arrow')"></div>
+          <div :class="ns.e('inner')">
+            <slot name="content">{{ content }}</slot>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { useFloating, flip, offset, autoUpdate } from '@floating-ui/vue'
+import { useNamespace } from '../../utils'
+// 类型定义内联，避免模块解析问题
+type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right'
+type TooltipTrigger = 'hover' | 'click' | 'focus'
+
+const ns = useNamespace('tooltip')
+
+// Props 定义 - 使用 export 导出
+export interface TooltipProps {
+  content?: string
+  placement?: TooltipPlacement
+  trigger?: TooltipTrigger
+  disabled?: boolean
+  visible?: boolean
+  offset?: number
+}
+
+const props = withDefaults(defineProps<TooltipProps>(), {
+  content: '',
+  placement: 'top',
+  trigger: 'hover',
+  disabled: false,
+  visible: false,
+  offset: 8
+})
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  show: []
+  hide: []
+}>()
+
+const reference = ref<HTMLElement | null>(null)
+const floating = ref<HTMLElement | null>(null)
+const isVisible = ref(props.visible)
+const tooltipId = `fire-tooltip-${Math.random().toString(36).substr(2, 9)}`
+const position = ref(props.placement)
+
+const { x, y, strategy } = useFloating(
+  reference,
+  floating,
+  {
+    placement: props.placement,
+    middleware: [
+      offset(props.offset),
+      flip()
+    ],
+    whileElementsMounted: autoUpdate
+  }
+)
+
+const floatingStyles = computed(() => ({
+  position: strategy.value,
+  left: `${x.value ?? 0}px`,
+  top: `${y.value ?? 0}px`
+}))
+
+const show = () => {
+  if (props.disabled) return
+  isVisible.value = true
+  emit('update:visible', true)
+  emit('show')
+}
+
+const hide = () => {
+  isVisible.value = false
+  emit('update:visible', false)
+  emit('hide')
+}
+
+const handleMouseEnter = () => {
+  if (props.trigger === 'hover') {
+    show()
+  }
+}
+
+const handleMouseLeave = () => {
+  if (props.trigger === 'hover') {
+    hide()
+  }
+}
+
+const handleFocus = () => {
+  if (props.trigger === 'focus') {
+    show()
+  }
+}
+
+const handleBlur = () => {
+  if (props.trigger === 'focus') {
+    hide()
+  }
+}
+
+// 点击外部关闭
+const handleClickOutside = (event: MouseEvent) => {
+  if (
+    reference.value &&
+    !reference.value.contains(event.target as Node) &&
+    floating.value &&
+    !floating.value.contains(event.target as Node)
+  ) {
+    hide()
+  }
+}
+
+onMounted(() => {
+  if (props.trigger === 'click') {
+    document.addEventListener('click', handleClickOutside)
+  }
+})
+
+onUnmounted(() => {
+  if (props.trigger === 'click') {
+    document.removeEventListener('click', handleClickOutside)
+  }
+})
+
+// 监听 visible 变化
+watch(() => props.visible, (val) => {
+  isVisible.value = val
+})
+
+// 清理
+</script>
+
+<style scoped lang="scss">
+@import '../../styles/variables.scss';
+
+.#{$namespace}-tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.#{$namespace}-tooltip__content {
+  position: absolute;
+  background-color: $tooltip-bg;
+  color: $tooltip-text;
+  padding: $tooltip-padding;
+  border-radius: $tooltip-border-radius;
+  font-size: $font-size-base;
+  line-height: 1.4;
+  max-width: 250px;
+  word-wrap: break-word;
+  pointer-events: auto;
+  box-shadow: $shadow-md;
+  z-index: 1000;
+
+  &--top {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-bottom: 8px;
+  }
+
+  &--bottom {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: 8px;
+  }
+
+  &--left {
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-right: 8px;
+  }
+
+  &--right {
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-left: 8px;
+  }
+}
+
+.#{$namespace}-tooltip__arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background-color: $tooltip-bg;
+  transform: rotate(45deg);
+
+  .#{$namespace}-tooltip__content--top & {
+    bottom: -4px;
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+  }
+
+  .#{$namespace}-tooltip__content--bottom & {
+    top: -4px;
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+  }
+
+  .#{$namespace}-tooltip__content--left & {
+    right: -4px;
+    top: 50%;
+    transform: translateY(-50%) rotate(45deg);
+  }
+
+  .#{$namespace}-tooltip__content--right & {
+    left: -4px;
+    top: 50%;
+    transform: translateY(-50%) rotate(45deg);
+  }
+}
+
+// 动画效果
+.fire-tooltip-enter-active,
+.fire-tooltip-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.fire-tooltip-enter-from {
+  opacity: 0;
+  transform: scale(0.9);
+}
+
+.fire-tooltip-leave-to {
+  opacity: 0;
+  transform: scale(0.9);
+}
+</style>

package/src/components/tooltip/types.ts

@@ -0,0 +1,60 @@
+export interface TooltipProps {
+  /**
+   * 提示内容
+   */
+  content?: string
+  /**
+   * 触发方式
+   */
+  trigger?: 'hover' | 'click' | 'focus' | 'manual'
+  /**
+   * 禁用状态
+   */
+  disabled?: boolean
+  /**
+   * 初始可见状态 (仅用于 manual 触发)
+   */
+  visible?: boolean
+  /**
+   * 位置偏好
+   */
+  placement?: 'top' | 'bottom' | 'left' | 'right'
+  /**
+   * 偏移量
+   */
+  offset?: number
+  /**
+   * 自定义类名
+   */
+  class?: string
+  /**
+   * 自定义样式
+   */
+  style?: string | object
+}
+
+export interface TooltipEmits {
+  /**
+   * 可见状态变化事件
+   */
+  (e: 'update:visible', value: boolean): void
+  /**
+   * 显示事件
+   */
+  (e: 'show'): void
+  /**
+   * 隐藏事件
+   */
+  (e: 'hide'): void
+}
+
+export interface TooltipSlots {
+  /**
+   * 触发元素
+   */
+  default: () => any
+  /**
+   * 提示内容
+   */
+  content?: () => any
+}