fdb2129f86
* fix(tabs): fix showMoreTabs overflow calculation lag caused by CSS transition The nav element has CSS transition: transform 0.3s, which causes getBoundingClientRect() to return pre-transition positions when calcMorePanes runs in requestAnimationFrame (before the transition has advanced). Fix: use tab-relative-to-nav position delta (transition-invariant since both share the same transform coordinate space) plus navOffset to compute the final expected positions, bypassing the transition intermediate state entirely. Also replace nextTick with requestAnimationFrame in deferred calcMorePanes calls to ensure all cascading DOM updates from scrollToActiveTab -> updated() chains have settled. * fix(tab-nav): trigger calcMorePanes after scrollPrev/scrollNext arrow click * test(tabs): 修正 custom-more-icon 溢出下拉数量断言 showMoreTabs 溢出计算修正后按真实布局计算，容器 400px 减去 更多按钮占位后仅 5 个 tab 完整可见，下拉应为 Tab 6/7/8 共 3 项， 原断言 2 是基于旧实现 mount 早期量宽了 navScroll 的错误结果。 |
||
|---|---|---|
| .agents/skills | ||
| .cid | ||
| .codecheck | ||
| .github | ||
| .husky | ||
| .vscode | ||
| examples | ||
| internals | ||
| packages | ||
| patches | ||
| .all-contributorsrc | ||
| .depcheckrc.yaml | ||
| .eslintignore | ||
| .eslintrc.js | ||
| .gitattributes | ||
| .gitignore | ||
| .hintrc | ||
| .lintstagedrc.json | ||
| .npmrc | ||
| .prettierignore | ||
| .prettierrc | ||
| AGENTS.md | ||
| CHANGELOG.md | ||
| CONTRIBUTING.md | ||
| CONTRIBUTING.zh-CN.md | ||
| LICENSE | ||
| PACKAGES.md | ||
| README.md | ||
| README.zh-CN.md | ||
| commitlint.config.js | ||
| jsconfig.json | ||
| logo.svg | ||
| package.json | ||
| pnpm-workspace.yaml | ||
| tiny-vue-skill.png | ||
| tsconfig.json | ||
| tsconfig.vue2.7.json | ||
| tsconfig.vue2.json | ||
| tsconfig.vue3.json | ||
| vercel.json | ||
| volar.config.js | ||
README.md
An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.
English | 简体中文
🌈 Features:
- 📦 104 clean, easy-to-use and powerful components.
- 🖖 One code, Support both Vue.js 2 and Vue.js 3.
- 🖥️ One code, Support both PC and Mobile.
- 🌍 Support internationalization.
- 🎨 Support theme customization.
- 📊 Components support configuration development, can support low-code platform.
- 💡 Use a cross-end and cross-framework architecture, flexible and portable.
Build with AI
tiny-vue-skill is a set of skill tools designed for AI coding assistants, enabling them to deeply understand the usage, APIs, and best practices of the TinyVue component library, thereby helping you develop applications with TinyVue more efficiently.
You can install tiny-vue-skill globally using the following command:
npx skills add opentiny/agent-skills -g --skill tiny-vue-skill --agent cursor
The --agent parameters corresponding to some other AI tools:
| Agent | --agent |
|---|---|
| Amp | amp |
| Antigravity | antigravity |
| Claude Code | claude-code |
| Clawdbot | clawdbot |
| Codex | codex |
| Cursor | cursor |
| Droid | droid |
| Gemini CLI | gemini-cli |
| GitHub Copilot | github-copilot |
| Goose | goose |
| Kilo Code | kilo |
| Kiro CLI | kiro-cli |
| OpenCode | opencode |
| Roo Code | roo |
| Trae | trae |
| Windsurf | windsurf |
🛠️ Usage
1. Installation
Execute the following command to install the TinyVue component library for Vue.js 3.
npm i @opentiny/vue@3
Execute the following command to install the TinyVue component library for Vue.js 2.
npm i @opentiny/vue@2
2. Import component
Then you can use the TinyVue component(such as <tiny-button>) in the App.vue file.
<script lang="ts" setup>
import { Button as TinyButton } from '@opentiny/vue'
</script>
<template>
<tiny-button>Tiny Vue</tiny-button>
</template>
🖥️ Development
git clone git@github.com:opentiny/tiny-vue.git
cd tiny-vue
pnpm i
# Vue.js 3
pnpm dev
# Vue.js 2
pnpm dev2
Open your browser and visit: http://127.0.0.1:7130/
🤝 Contributing
Welcome to join our OpenTiny community!🎉
If you don't know how to start, please read our contributing guide.
- Add the official assistant WeChat
opentiny-officialand join the technical exchange group. - Add to the mailing list
opentiny@googlegroups.com
✨ Contributors
Contributors are community members who have 1 or more PR merged in OpenTiny.
Thanks goes to these wonderful people (emoji key):
❤️ Credits
Thanks to:
- The element project which is an old component library based on Vue.js. TinyVue draws on Element at the beginning of its design, and is compatible with Element's component API.
- The floating-ui project which is a small library that helps you create "floating" elements such as tooltips, popovers, dropdowns, and more. Many components of TinyVue are based on the capabilities provided by Floating UI.
- The vxe-table project which is a Vue-based table component, supports rich features, TinyVue's Grid component is based on vxe-table.
- The sortablejs project which is a powerful drag-and-drop library. The drag-and-drop sorting function of TinyVue's Grid / Transfer / Tabs and other components is based on Sortable.
- @adamwathan's article Renderless Components in Vue.js, which inspired TinyVue's renderless component design architecture and ultimately enabled cross-end and cross-framework capabilities in the TinyVue project.