feat: Vue3 component library reference - 46 new components added#16
Open
lidaixingchen wants to merge 67 commits into
Open
feat: Vue3 component library reference - 46 new components added#16lidaixingchen wants to merge 67 commits into
lidaixingchen wants to merge 67 commits into
Conversation
新增完整的 PoC 项目，包含： 1. 基础项目配置（tsconfig、vite.config、package.json） 2. 核心依赖集成：Reka UI、vee-validate+zod、v-calendar 3. 5个组件Demo：Dialog、Select、表单验证、日历、Combobox 4. 全局样式和静态资源 5. 更新根目录gitignore规则
移除了根目录的.cursorrules和子目录的.cursor/rules/brutxui.mdc两个规则配置文件
1. 替换所有React组件为Vue单文件组件，重写导出逻辑 2. 更新依赖包名和配置，适配Vue开发环境 3. 删除废弃的React测试文件和配置 4. 新增Toast组合式函数和基础组件占位实现 5. 完善项目元信息描述
新增了 Badge、Separator、Label、Switch、Checkbox、Progress、各类 Spinner、Skeleton 全家桶组件，同时重构了 Button 组件的样式系统，替换为统一的新风格样式，更新了全局导出文件。
1. 新增Alert、Avatar、Card等全套业务组件 2. 新增tailwindcss-animate插件并更新依赖 3. 修复button的lg尺寸高度错误 4. 完善spinner组件的变体定义
- 新增命令菜单组件组（Command系列） - 新增表单校验组件组（Form系列） - 新增提示框组件（Toast系列） - 新增仪表盘、英雄页、定价页等业务组件 - 重构提交按钮、日历组件逻辑 - 修复CardContent的类名传递问题 - 更新ESLint配置支持浏览器全局变量
此提交实现了完整的 Brutalism 风格 Vue 组件库： 1. 新增全套基础组件：按钮、输入框、选择器、弹窗、表格等 2. 统一使用自定义 Brutalism 设计系统替换原有灰色系样式 3. 移除冗余依赖并优化构建配置 4. 新增完整的单元测试覆盖 5. 配置 GitHub CI 实现自动化构建测试
不再显式指定pnpm 8版本，使用action默认版本即可
调整了pnpm-lock.yaml中的依赖配置，删除不再需要的@popperjs/core直接依赖项，并修正该包的dev状态标记
1. 移除所有 Next.js 相关配置、组件和文档页面 2. 新增 VitePress 主题、组件和中文文档内容 3. 更新仓库作者、链接等元信息为 lidaixingchen 4. 新增 robots.txt、postcss 配置等基础文件 5. 删除旧的 FUNDING.yml 配置文件
remove all the auto-generated dependency cache files under .vitepress/cache/deps and the stray --output file
1. 更新CLI包信息，修正仓库地址与描述 2. 在安装文档中添加CLI未发布的提示 3. 更新多处文档内容，补充CLI未发布说明 4. 新增AGENTS.md文档，完善AI助手配置 5. 更新llms相关文档，修正框架与站点信息 6. 更新copilot指导规则，适配Vue3项目 7. 添加vitepress缓存忽略与依赖缓存文件
1. 更新 CLI 组件导入路径与项目类型检测，支持 Vite Vue、Nuxt 项目 2. 替换 React 生态依赖为 Vue 对应包，更新注册表校验规则 3. 重构所有组件为 Vue SFC 格式，更新组件示例与文档 4. 整理文档文件格式，合并与拆分说明文档 5. 优化 CI 与构建配置，新增必要开发依赖
1. 为Progress、Alert、Card等近30个UI组件新增默认空class属性 2. 修复Slider、Input等组件缺失的modelValue默认值 3. 优化表单、下拉菜单等组件的样式类绑定逻辑 4. 重构pagination、calendar等组件的单测用例 5. 调整部分组件的文本排版和样式变量 6. 更新eslint配置，关闭测试文件的单组件校验规则
- 将 CLI 文档中的警告信息更新为提示，提供本地使用说明。 - 在安装文档中更新 CLI 使用说明，强调本地构建步骤。 - 在主题功能中添加 useTheme 组合式 API，支持主题和颜色模式管理。 - 添加 useTheme 的单元测试，确保功能正常。
- 更新 AGENTS.md，修改描述为独立维护的 Vue 3 版本。 - 更新 LICENSE，修正版权信息为 lidaixingchen。 - 更新 README.md，修改 CLI 发布状态的说明。 - 更新 dashboard-shell.md，示例中用户邮箱更改为 user@example.com。 - 更新 og-image.svg，修改标题和组件数量信息。 - 更新 cli.md，修正 schema URL 为新的 GitHub 页面。 - 更新 constants.ts，修正 schema 和 registry URL 为新的 GitHub 页面。 - 更新 registry.ts，修正默认注册表 URL 为新的 GitHub 页面。 - 更新 package.json，修正仓库和问题链接为新的 GitHub 页面。 - 更新 DashboardShell.vue，示例中用户邮箱更改为 user@example.com。 - 更新 dashboard-shell.test.ts，测试中用户邮箱更改为 user@example.com。
- 提交按钮组件增加了 class 属性的默认值为空字符串。 - 文本区域组件增加了 modelValue 和 class 属性的默认值。 - 吐司组件增加了 title、description 和 class 属性的默认值。 - 切换组组件增加了 defaultValue、modelValue 和 class 属性的默认值。 - 切换组件增加了 class 属性的默认值为空字符串。 - 工具提示组件增加了 class 属性的默认值为空字符串。 - 等待列表页面组件增加了 description 和 class 属性的默认值。 docs: 更新 README 文件，移除 CLI 发布信息
- 删除了 RekaDialogDemo.vue、RekaSelectDemo.vue、VCalendarDemo.vue、VeeValidateDemo.vue 组件文件。 - 删除了 main.ts 和 style.css 文件，移除全局样式和应用入口。 - 删除了 tsconfig 相关配置文件，简化项目结构。 - 删除了 vite.config.ts 文件，移除构建配置。 - 删除了 favicon 生成脚本，移除生成图标的功能。 - 删除了 vercel.json 配置文件，移除 Vercel 部署配置。 此提交旨在清理项目，移除不再使用的组件和配置文件。
- 将 CLI 工具名称从 `brutx` 更新为 `brutx-ui-vue`，以保持一致性。 - 更新 README.md 中的相关链接和徽章信息。 新文件：CVA.md - 添加 CVA 组件模式的架构蓝图文档。 - 包含示例代码，展示如何使用 `class-variance-authority` 进行组件变体管理。
- 新增 GitHub Actions 工作流用于自动部署文档。 - 配置在主分支推送时触发部署。 - 设置权限以允许写入页面和读取内容。 - 包含构建 UI 库和文档的步骤。 - 部署完成后将文档上传至 GitHub Pages。
- 修改 InstallationTabs 组件中的代码块样式，调整背景色和文本颜色。 - 使代码块在深色模式下更具可读性，确保与整体主题一致。 - 添加 CSS 规则以确保 <code> 元素继承 <pre> 的样式。
- 替换 Textarea 组件的示例为 TextareaDemo 组件 - 替换 Toast 组件的示例为 ToastDemo 组件 - 替换 ToggleGroup 组件的示例为 ToggleGroupDemo 组件 - 替换 Toggle 组件的示例为 ToggleDemo 组件 - 替换 Tooltip 组件的示例为 TooltipDemo 组件 - 更新 Checkbox 组件，添加 checked 和 defaultChecked 属性 - 更新 DropdownMenuCheckboxItem 组件，使用 modelValue 代替 checked - 新增多个组件示例，包括 Alert、AlertDialog、Avatar、Badge、Button、Calendar、Card、Checkbox、Combobox、Command、DashboardStats、Dialog、DropdownMenu、Form、Input、Label、Pagination、Popover、Progress、RadioGroup、SaaSPricing、ScrollArea、Select、Separator、Sheet、Skeleton、Slider、Spinner、SubmitButton、Switch、Table、Tabs、Textarea、Toast、Toggle、ToggleGroup 和 Tooltip
- 在 AvatarFallback 组件中，更新类名以改善文本颜色。 - 在 Table 组件中，移除多余的 overflow-auto 类，简化样式。 - 在样式文件中，添加 v-calendar 样式导入。 - 更新 package.json 中的版本号至 0.1.1。
v-calendar 不支持服务端渲染，导致日历组件在 VitePress 构建时静默失败。 Signed-off-by: 历代星辰
- 删除了 Vue 的缓存文件 vue.js 和 vue.js.map。 - 这些文件在构建过程中生成，通常不需要版本控制。 - 清理缓存文件有助于减少项目的体积和复杂性。
- 修改 VitePress 缓存路径规则，使用双星号以匹配子目录中的缓存文件。 - 这将确保在不同的子目录中生成的缓存文件也被忽略。
1. 侧栏移动：scrollbar-gutter 从 body 移到 .VPContent（VitePress 实际滚动容器） 2. 头像无色：AvatarFallback 背景从 bg-brutal-muted 改为 bg-brutal-primary 3. 日历不可见：docs CSS 直接导入 v-calendar 样式，确保加载 4. 表格截断：移除 ComponentPreview 的 overflow-x-auto Signed-off-by: 历代星辰
- 侧栏：active 项用 #FFE66D 黄色背景 + 黑色边框 + brutal 阴影 - 侧栏：隐藏默认 indicator，inactive 项透明边框 + hover 灰色 - 表格：表头用 #FFE66D 黄色背景，font-black，单元格独立边框 - 代码块：背景改为 #111827 (gray-900) - 预览区：背景改为 bg-gray-50，移除 shadow，添加 overflow-x-auto - 标题：h2 移除底部边框，font-weight 改为 900 - 分类徽章：VPBadge 样式匹配 brutxui.site 设计 - TableHead：添加 bg-brutal-accent 黄色背景 - Table：恢复 overflow-x-auto 容器 Signed-off-by: 历代星辰
- 修改 CopyButton.vue 组件的样式，增强按钮的视觉效果。 - 更新 InstallationTabs.vue 组件的样式，调整标签的字体和背景。 - 修改 Logo.vue 组件的字体样式，使用更粗的字体。 - 更新 ThemeToggle.vue 组件的按钮大小和样式，提升用户体验。 - 在 style.css 中添加新的设计令牌，优化整体样式。 - 更新首页内容，增强描述的清晰度和吸引力。
- 在多个组件中添加了新的样式和功能，包括日历、输入框、选择框等。 - 日历组件中增加了 `getDayClasses` 函数以简化样式逻辑。 - 输入框组件的模板修复了闭合标签问题。 - 选择框和标签触发器组件中添加了按压效果的样式。 更新了多个组件的样式以提升用户体验。
删除了index.md中多余的空description配置行，清理文档冗余配置
- 新增 ChatBubble、Carousel、KanbanBoard、TreeView 四个组件 - 添加组件文档、演示与导航菜单 - 新增组件样式变体与类型定义 - 新增依赖 embla-carousel-vue 用于轮播组件 - 更新组件注册表与全局导出
1. 新增kbd键盘按键组件，支持多尺寸与样式变体 2. 新增counter数字滚动动画组件，支持缓动、格式化等配置 3. 新增stepper步骤条组件，支持水平/垂直布局与三种状态 4. 补充组件元信息、注册表配置与文档Demo 5. 修复carousel组件 autoplay 未提前停止旧定时器的问题
1. 统一组件样式使用 cva 变体系统，替换硬编码样式 2. 新增 before-after、code-block、copy-to-clipboard、marquee、number-input 等组件 3. 补充大量组件单测用例，优化部分组件文案与路径引用 4. 修复部分组件边框粗细、交互样式不一致问题 5. 更新文档首页标语合并展示
1. 移除跑马灯组件中无实际作用的fade变体配置 2. 新增代码块复制按钮的样式变体，抽离内联样式
以下是本次提交的主要变更： 1. 修复v-calendar导入方式，改为具名导入避免命名冲突 2. 优化计数器组件：添加自适应缩放、响应式布局支持，修复溢出问题 3. 新增跑马灯组件的fade渐变遮罩属性，简化样式逻辑 4. 修复面包crumb组件样式污染问题，统一列表样式规范 5. 更新文档站点：添加tooltip延迟触发演示文档与示例 6. 优化文档首页计数器布局，适配移动端显示
1. 将所有包名从brutx改为brutx-vue系列，包括shared、registry、cli和主UI库 2. 为UI测试添加全局ResizeObserver模拟 3. 修复部分组件测试用例的样式类校验逻辑 4. 更新所有文档、配置文件中的包引用和命令示例
将CLI命令描述从"Initialize Brutx"修正为"Initialize Brutx-Vue"，同时同步版本号到0.1.1
1. 为所有组件文档的frontmatter标题和一级标题添加中文译名 2. 更新CLI命令为brutx-vue 3. 修复轮播组件按钮的active状态位移方向错误 4. 重构部分UI组件的样式变量提取，统一组件变体样式管理 5. 修正部分组件的边框宽度细节与交互样式
- 新增插件系统与useLocale组合式函数，支持全局注入切换语言 - 新增zh-CN和en两种语言包，覆盖所有组件的文本内容 - 重构现有组件，将硬编码文本替换为国际化调用 - 新增locale类型定义与mergeLocale工具函数 - 新增多语言相关的单元测试适配 - 调整打包配置，将locale模块打包为独立子包
1. 升级包版本：cli 到 0.1.2，ui 到 0.3.0 2. 新增完整多语言国际化支持系统 3. 重构组件默认文本逻辑，改为通过 useLocale() 读取翻译 4. 替换所有硬编码文本为 locale 调用，新增中英语言包 5. 完善文档：新增国际化指南、更新组件文档、添加导航入口 6. 修复字符串替换函数bug，优化focus样式写法
1. 为文档的代码块指定text语言类型以优化渲染 2. 调整文档主题的代码块样式适配Brutalism设计风格 3. 修复pre内code标签的继承样式问题 4. 将包版本升级到0.3.1
新增组件： - 3D交互卡片Card3D - 故障文字效果GlitchText - 刮刮卡ScratchCard - 手绘风格图表SketchyChart - 硬核输入框HardcoreInput 新增工具： - 防抖动画适配useReducedMotion - 音频引擎useAudioEngine - 画布交互useCanvasInteraction 同时更新组件注册与全局导出，完善部分现有组件国际化支持
update brutx-vue cli to 0.2.0 and brutx-ui-vue to 0.4.0
新增了 Card3D、GlitchText、ScratchCard、SketchyChart、HardcoreInput 五个组件的演示示例与完整文档，同时在侧边栏导航中添加了对应组件的入口链接，更新了组件列表页。
为故障文本组件统一添加基础样式类名，便于全局样式控制
为文档页面的按钮添加自定义焦点环样式，确保点击后依然能显示清晰的轮廓焦点环，提升可访问性
仅更新包版本号至0.4.1，准备发布新版本
- 新增Not Found Page、Loading Page等10个区块组件 - 补全组件注册、国际化、类型定义与导出 - 更新文档站点导航与组件文档 - 修复card-3d变体默认阴影配置
新增组件包括：ErrorCard、SuccessCard、SearchWidget、FeedbackForm、StepperSection、CookieConsent、DataTableSection、SettingsPage，同步添加对应国际化配置、文档页面、导航菜单与组件元信息
1. 新增博客列表页、活动日志页、个人资料页、图表区块、画廊区块、上传卡片、概览页7个UI区块组件 2. 补全所有新增组件的多语言支持与类型定义 3. 更新文档站点的区块列表与导航菜单 4. 修复错误卡片测试用例的匹配文本
更新cli包和ui包的版本号，准备发布新版本
1. 为多个组件添加点击按压动效，统一粗野主义风格交互反馈 2. 重构事件命名为kebab-case，补充缺失的多语言翻译 3. 为卡片类组件新增actions插槽，扩展自定义能力 4. 新增dashboard-stats和saas-pricing文档区块
替换了所有文档页面的手写预览代码为对应的演示组件，同时新增了全部组件的Demo单文件组件，并全局注册这些组件用于文档预览
本次更新包含： 1. 版本号升级：cli升级到0.3.1，ui库升级到0.5.2 2. 修复并优化组件交互细节： - 统一添加按压偏移交互效果，优化按钮点击体验 - 完善表单上下文，新增value和setValue支持 - 修复计数器监听逻辑，同时监听to和from属性 - 优化弹窗、下拉菜单等组件样式，添加圆角和阴影效果 3. 国际化支持：新增多语言文案，完善中文/英文本地化 4. 文档更新：更新sketchy-chart文档，新增饼图支持 5. 修复已知bug：移除冗余的canvas移除逻辑，优化自动播放逻辑 6. 组件增强：为多个组件添加事件绑定、响应式更新等功能
将inject默认值中的error从computed改为显式的Ref<string | undefined>类型，同时导入缺失的Ref类型声明，解决typescript类型检查报错问题。
|
@lidaixingchen is attempting to deploy a commit to the dev-snake's projects Team on Vercel. A member of the Team first needs to authorize it. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📋 Overview
This is a Vue3 version of the component library, completely rewritten from the original React version (
dev-snake/brutxui).🎯 Purpose
I hope the original author can reference the design and implementation of these Vue3 components, and apply the excellent design concepts and new components to the original React version.
✨ New Components (46 total)
Layout & Pages
activity-log-page- Activity log pageblog-card- Blog cardblog-list-page- Blog list pagedashboard-shell- Dashboard shelloverview-page- Overview pageprofile-page- Profile pagesettings-page- Settings pageloading-page- Loading pagenot-found-page- 404 pagewaitlist-page- Waitlist pageData Display
accordion- Accordioncard-3d- 3D cardcarousel- Carouselchart-section- Chart sectioncode-block- Code blockcounter- Counterdata-table-section- Data table sectionkanban- Kanban boardmarquee- Marqueesketchy-chart- Sketchy chartstepper- Steppertestimonial-card- Testimonial cardtimeline- Timelinetree-view- Tree viewForms & Input
before-after- Before/after comparisoncopy-to-clipboard- Copy to clipboardfeedback-form- Feedback formhardcore-input- Hardcore inputnumber-input- Number inputsearch-widget- Search widgettags-input- Tags inputNavigation & Layout
breadcrumb- Breadcrumbheader-section- Header sectionfooter-section- Footer sectiontabs-nav- Tabs navigationFeedback & Alerts
error-card- Error cardsuccess-card- Success cardcookie-consent- Cookie consentglitch-text- Glitch text effectMarketing & Showcase
brutalist-hero- Brutalist hero sectionfaq-section- FAQ sectiongallery-section- Gallery sectionpricing-section- Pricing sectionstepper-section- Stepper sectionOthers
chat-bubble- Chat bubblefile-card- File cardquick-actions- Quick actionsscratch-card- Scratch cardupload-card- Upload card🔧 Tech Stack
💡 Design Highlights
cvafor managing style variantsThanks to the original author for the excellent design! 🙏