@firerian/fireui 1.0.0

package/package.json

@@ -0,0 +1,132 @@
+{
+  "name": "@firerian/fireui",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "A modern Vue 3 UI component library",
+  "main": "./dist/fireui.cjs",
+  "module": "./dist/fireui.es.mjs",
+  "types": "./dist/types/index.d.ts",
+  "typings": "./dist/types/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/types/index.d.ts"
+      ]
+    }
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/fireui.es.mjs",
+      "require": "./dist/fireui.cjs",
+      "default": "./dist/fireui.es.mjs"
+    },
+    "./dist/fireui.css": {
+      "import": "./dist/fireui.css",
+      "require": "./dist/fireui.css",
+      "default": "./dist/fireui.css"
+    },
+    "./fireui.css": {
+      "import": "./dist/fireui.css",
+      "require": "./dist/fireui.css",
+      "default": "./dist/fireui.css"
+    },
+    "./style.css": {
+      "import": "./dist/fireui.css",
+      "require": "./dist/fireui.css",
+      "default": "./dist/fireui.css"
+    },
+    "./dist/*": "./dist/*",
+    "./*": "./*"
+  },
+  "sideEffects": [
+    "dist/fireui.css",
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "build:lib": "npm run clean && vue-tsc --noEmit && vite build --config vite.config.build.ts",
+    "build:watch": "vite build --config vite.config.build.ts --watch",
+    "clean": "rimraf dist",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
+    "lint:check": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts",
+    "format": "prettier --write src/ docs/",
+    "format:check": "prettier --check src/ docs/",
+    "prepublishOnly": "npm run build:lib",
+    "prepare": "husky"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "@floating-ui/vue": "^1.1.10",
+    "async-validator": "^4.2.5",
+    "lucide-vue-next": "^0.454.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.13.0",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@types/node": "^22.10.1",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitest/eslint-plugin": "^1.1.0",
+    "@vue/test-utils": "^2.4.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.13.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-vue": "^9.30.0",
+    "globals": "^15.11.0",
+    "husky": "^9.1.7",
+    "jsdom": "^26.0.0",
+    "lint-staged": "^15.2.10",
+    "postcss": "^8.5.1",
+    "prettier": "^3.3.3",
+    "rimraf": "^6.0.1",
+    "sass": "^1.80.6",
+    "tailwindcss": "^4.0.0",
+    "terser": "^5.36.0",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.10.0",
+    "vite": "^6.0.3",
+    "vite-plugin-dts": "^4.3.0",
+    "vitepress": "^1.4.0",
+    "vitest": "^2.1.4",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.1.10"
+  },
+  "lint-staged": {
+    "*.{vue,js,jsx,cjs,mjs,ts,tsx,cts,mts}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{json,md}": [
+      "prettier --write"
+    ]
+  },
+  "keywords": [
+    "vue",
+    "ui",
+    "components",
+    "fireui",
+    "component-library"
+  ],
+  "author": "firerian",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  }
+}

package/src/components/button/button.test.ts

@@ -0,0 +1,357 @@
+/**
+ * @file Button 组件测试
+ * @description 测试 Button 组件的功能和交互
+ */
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h } from 'vue'
+import FButton from './button.vue'
+
+describe('FButton', () => {
+  // 基础渲染测试
+  describe('render', () => {
+    it('should render default button', () => {
+      const wrapper = mount(FButton, {
+        slots: { default: '按钮' },
+      })
+      
+      expect(wrapper.text()).toContain('按钮')
+      expect(wrapper.classes()).toContain('f-button')
+      expect(wrapper.classes()).toContain('f-button--default')
+    })
+    
+    it('should render with custom content', () => {
+      const wrapper = mount(FButton, {
+        slots: {
+          default: () => h('span', { class: 'custom-content' }, '自定义内容'),
+        },
+      })
+      
+      expect(wrapper.find('.custom-content').exists()).toBe(true)
+    })
+    
+    it('should have correct native type', () => {
+      const wrapper = mount(FButton, {
+        props: { nativeType: 'submit' },
+        slots: { default: '提交' },
+      })
+      
+      expect(wrapper.attributes('type')).toBe('submit')
+    })
+  })
+  
+  // 类型测试
+  describe('type prop', () => {
+    const types = ['default', 'primary', 'success', 'warning', 'danger', 'info']
+    
+    types.forEach((type) => {
+      it(`should render ${type} type`, () => {
+        const wrapper = mount(FButton, {
+          props: { type: type as any },
+          slots: { default: '按钮' },
+        })
+        
+        expect(wrapper.classes()).toContain(`f-button--${type}`)
+      })
+    })
+  })
+  
+  // 尺寸测试
+  describe('size prop', () => {
+    const sizes = ['small', 'default', 'large']
+    
+    sizes.forEach((size) => {
+      it(`should render ${size} size`, () => {
+        const wrapper = mount(FButton, {
+          props: { size: size as any },
+          slots: { default: '按钮' },
+        })
+        
+        expect(wrapper.classes()).toContain(`f-button--${size}`)
+      })
+    })
+  })
+  
+  // 状态测试
+  describe('status', () => {
+    it('should render disabled button', async () => {
+      const wrapper = mount(FButton, {
+        props: { disabled: true },
+        slots: { default: '禁用按钮' },
+      })
+      
+      expect(wrapper.classes()).toContain('f-button--disabled')
+      expect(wrapper.attributes('disabled')).toBeDefined()
+      
+      // 禁用状态下点击不应触发事件
+      await wrapper.trigger('click')
+      expect(wrapper.emitted('click')).toBeUndefined()
+    })
+    
+    it('should render loading button', async () => {
+      const wrapper = mount(FButton, {
+        props: { loading: true },
+        slots: { default: '加载中' },
+      })
+      
+      expect(wrapper.classes()).toContain('f-button--loading')
+      expect(wrapper.attributes('disabled')).toBeDefined()
+      
+      // 检查是否显示加载图标
+      expect(wrapper.find('.f-button-loading-icon').exists()).toBe(true)
+      
+      // 加载状态下点击不应触发事件
+      await wrapper.trigger('click')
+      expect(wrapper.emitted('click')).toBeUndefined()
+    })
+    
+    it('should not have disabled attribute when not disabled or loading', () => {
+      const wrapper = mount(FButton, {
+        slots: { default: '按钮' },
+      })
+      
+      expect(wrapper.attributes('disabled')).toBeUndefined()
+    })
+  })
+  
+  // 特殊样式测试
+  describe('special styles', () => {
+    it('should render circle button', () => {
+      const wrapper = mount(FButton, {
+        props: { circle: true },
+        slots: { default: '圆形' },
+      })
+      
+      expect(wrapper.classes()).toContain('f-button--circle')
+    })
+    
+    it('should render block button', () => {
+      const wrapper = mount(FButton, {
+        props: { block: true },
+        slots: { default: '块级' },
+      })
+      
+      expect(wrapper.classes()).toContain('f-button--block')
+    })
+    
+    it('should hide content when circle button', () => {
+      const wrapper = mount(FButton, {
+        props: { circle: true },
+        slots: { default: '内容' },
+      })
+      
+      // 圆形按钮应该隐藏内容文本
+      const contentElement = wrapper.find('.f-button-content')
+      expect(contentElement.exists()).toBe(true)
+      // 在 CSS 中通过 display: none 隐藏
+    })
+  })
+  
+  // 事件测试
+  describe('events', () => {
+    it('should emit click event', async () => {
+      const wrapper = mount(FButton, {
+        slots: { default: '按钮' },
+      })
+      
+      await wrapper.trigger('click')
+      expect(wrapper.emitted('click')).toHaveLength(1)
+    })
+    
+    it('should pass click event object', async () => {
+      const wrapper = mount(FButton, {
+        slots: { default: '按钮' },
+      })
+      
+      await wrapper.trigger('click')
+      const clickEvent = wrapper.emitted('click')![0][0]
+      expect(clickEvent).toBeInstanceOf(MouseEvent)
+    })
+    
+    it('should not emit click when disabled', async () => {
+      const wrapper = mount(FButton, {
+        props: { disabled: true },
+        slots: { default: '按钮' },
+      })
+      
+      await wrapper.trigger('click')
+      expect(wrapper.emitted('click')).toBeUndefined()
+    })
+    
+    it('should not emit click when loading', async () => {
+      const wrapper = mount(FButton, {
+        props: { loading: true },
+        slots: { default: '按钮' },
+      })
+      
+      await wrapper.trigger('click')
+      expect(wrapper.emitted('click')).toBeUndefined()
+    })
+    
+    it('should emit click only once per click', async () => {
+      const wrapper = mount(FButton, {
+        slots: { default: '按钮' },
+      })
+      
+      await wrapper.trigger('click')
+      await wrapper.trigger('click')
+      
+      expect(wrapper.emitted('click')).toHaveLength(2)
+    })
+  })
+  
+  // 插槽测试
+  describe('slots', () => {
+    it('should render icon slot', () => {
+      const wrapper = mount(FButton, {
+        props: { icon: 'SearchIcon' },
+        slots: {
+          icon: () => h('span', { class: 'custom-icon' }, '🔍'),
+          default: '搜索',
+        },
+      })
+      
+      expect(wrapper.find('.custom-icon').exists()).toBe(true)
+    })
+    
+    it('should render loading slot', () => {
+      const wrapper = mount(FButton, {
+        props: { loading: true },
+        slots: {
+          loading: () => h('span', { class: 'custom-loading' }, '加载中...'),
+          default: '按钮',
+        },
+      })
+      
+      expect(wrapper.find('.custom-loading').exists()).toBe(true)
+    })
+    
+    it('should render default slot content', () => {
+      const wrapper = mount(FButton, {
+        slots: {
+          default: () => h('div', { class: 'custom-content' }, '自定义内容'),
+        },
+      })
+      
+      expect(wrapper.find('.custom-content').exists()).toBe(true)
+      expect(wrapper.text()).toContain('自定义内容')
+    })
+    
+    it('should render loading icon by default when loading', () => {
+      const wrapper = mount(FButton, {
+        props: { loading: true },
+        slots: { default: '按钮' },
+      })
+      
+      // 应该显示默认的 SVG 加载图标
+      expect(wrapper.find('.f-button-loading-svg').exists()).toBe(true)
+    })
+    
+    it('should render custom loading icon when loadingIcon prop is provided', () => {
+      const wrapper = mount(FButton, {
+        props: { 
+          loading: true,
+          loadingIcon: '/loading.gif'
+        },
+        slots: { default: '按钮' },
+      })
+      
+      const img = wrapper.find('.f-button-loading-img')
+      expect(img.exists()).toBe(true)
+      expect(img.attributes('src')).toBe('/loading.gif')
+    })
+  })
+  
+  // 原生属性透传测试
+  describe('native attributes', () => {
+    it('should render with nativeType="button"', () => {
+      const wrapper = mount(FButton, {
+        props: { nativeType: 'button' },
+        slots: { default: '按钮' },
+      })
+      
+      expect(wrapper.attributes('type')).toBe('button')
+    })
+    
+    it('should render with nativeType="submit"', () => {
+      const wrapper = mount(FButton, {
+        props: { nativeType: 'submit' },
+        slots: { default: '提交' },
+      })
+      
+      expect(wrapper.attributes('type')).toBe('submit')
+    })
+    
+    it('should render with nativeType="reset"', () => {
+      const wrapper = mount(FButton, {
+        props: { nativeType: 'reset' },
+        slots: { default: '重置' },
+      })
+      
+      expect(wrapper.attributes('type')).toBe('reset')
+    })
+  })
+  
+  // 组合测试
+  describe('combinations', () => {
+    it('should render primary large button', () => {
+      const wrapper = mount(FButton, {
+        props: { 
+          type: 'primary',
+          size: 'large'
+        },
+        slots: { default: '按钮' },
+      })
+      
+      expect(wrapper.classes()).toContain('f-button--primary')
+      expect(wrapper.classes()).toContain('f-button--large')
+    })
+    
+    it('should render disabled circle button', () => {
+      const wrapper = mount(FButton, {
+        props: { 
+          disabled: true,
+          circle: true
+        },
+        slots: { default: 'X' },
+      })
+      
+      expect(wrapper.classes()).toContain('f-button--disabled')
+      expect(wrapper.classes()).toContain('f-button--circle')
+    })
+    
+    it('should render loading success button', () => {
+      const wrapper = mount(FButton, {
+        props: { 
+          type: 'success',
+          loading: true
+        },
+        slots: { default: '保存' },
+      })
+      
+      expect(wrapper.classes()).toContain('f-button--success')
+      expect(wrapper.classes()).toContain('f-button--loading')
+    })
+  })
+  
+  // 辅助函数测试
+  describe('helper functions', () => {
+    it('should have buttonClasses computed property', () => {
+      const wrapper = mount(FButton, {
+        props: { 
+          type: 'primary',
+          size: 'large',
+          disabled: true
+        },
+        slots: { default: '按钮' },
+      })
+      
+      const classes = wrapper.classes()
+      expect(classes).toContain('f-button')
+      expect(classes).toContain('f-button--primary')
+      expect(classes).toContain('f-button--large')
+      expect(classes).toContain('f-button--disabled')
+    })
+  })
+})