![](\"https://varletjs.org/design/components.png\")
\n\n```vue\nimport ComponentResourcesDownload from './components/ComponentResourcesDownload.vue'\n```\n\n### Icons Resources\n\nThe icon resource contains `100+` icons built into the component library.\n\n![](\"https://varletjs.org/design/icons.png\"){kind=icon}
\n\n```vue\nimport IconResourcesDownload from './components/IconResourcesDownload.vue'\n```\n\n","packages/varlet-ui/docs/designResources.zh-CN.md":"# 设计资源\n\n### 介绍\n\n我们为设计师提供了设计资源，您可以在本页面选择所需的资源进行下载。\n\n### 组件资源\n\n组件资源包含了`色彩`、`文字`、`组件资源`。目前只提供 Material Design 2 亮色模式的设计资源，其他资源暂未提供，欢迎社区贡献。\n\n\n\n```vue\nimport ComponentResourcesDownload from './components/ComponentResourcesDownload.vue'\n```\n\n### 图标资源\n\n图标资源包含了组件库内置的 `100+` 图标。\n\n\n\n```vue\nimport IconResourcesDownload from './components/IconResourcesDownload.vue'\n```\n\n","packages/varlet-ui/docs/extension.en-US.md":"# VSCode Extension\n\n### Intro\n\nFor a better development experience, we built a `VSCode plugin`.\n\n### Features\n\n- 🛠️ Support syntax hints and quick completion for all components.\n- 🛠️ Support document address preview and quick jump for all components.\n- 🛠️ Support frame selection of code snippets to quickly open `Playground`.\n- 🛠️ Support full icon preview for icon components.\n- 🌍 Support switching between Chinese and English.\n\n### Install\n\nVsCode Extension Marketplace Search [varlet-vscode-extension](https://marketplace.visualstudio.com/items?itemName=haoziqaq.varlet-vscode-extension).\n\n### How To Use\n\nGrammatical hints appear when you enter the keyword of the component name, and you can quickly complete it after selecting it.\n\n![](\"https://varletjs.org/vscode/1.png\")
\n\nMoving the mouse to the component name will display the document address of the component, which can be clicked to jump, and it also directly displays the properties, events and slots of the component in the form of a table.\n\n![](\"https://varletjs.org/vscode/2.png\")
\n\nPress space or attribute keywords in the attribute input range of the label to display attribute completion prompts and attribute information.\n\n![](\"https://varletjs.org/vscode/3.png\")
\n\nWhen the `name` property of the `Icon` component is input, an icon preview will appear, and syntax completion will be performed after selection.\n\n![](\"https://varletjs.org/vscode/4.png\")
\n\nFrame the code snippet, and you can quickly open `Playground` in the right-click menu to preview the framed code online.\n\n![](\"https://varletjs.org/vscode/7.png\")
\n\nSupport switching between Chinese and English, more friendly to Chinese people.\n\n![](\"https://varletjs.org/vscode/5.png\")
\n![](\"https://varletjs.org/vscode/6.png\")
\n","packages/varlet-ui/docs/extension.zh-CN.md":"# VSCode 插件\n\n### 介绍\n\n为了更优秀的开发体验，我们构建了一个 `VSCode 插件`。\n\n### 特性\n\n- 🛠️ 支持全组件的语法提示、快速补全。\n- 🛠️ 支持全组件的文档地址预览、快速跳转。\n- 🛠️ 支持框选代码片段，快速打开 `Playground`。\n- 🛠️ 支持图标组件的全图标预览。\n- 🌍 支持中英文切换。\n\n### 安装\n\nVsCode 插件市场搜索 [varlet-vscode-extension](https://marketplace.visualstudio.com/items?itemName=haoziqaq.varlet-vscode-extension)。\n\n### 如何使用\n\n输入组件名称关键字时出现语法提示，选中后进行快速补全。\n\n\n\n鼠标移动到组件名会显示组件的文档地址用来点击跳转，也直接以表格的形式展示组件的属性、事件和插槽。\n\n\n\n在标签的属性输入范围按下空格或属性关键字，显示属性补全提示和属性信息。\n\n\n\n输入 `Icon` 组件的 `name` 属性时出现图标预览，选中后进行语法补全。\n\n\n\n框选代码片段，右键菜单中可以快速打开 `Playground` 对框选的代码进行线上预览。\n\n\n\n支持中英文切换，对中国人更加友好。\n\n\n\n\n","packages/varlet-ui/docs/home.en-US.md":"# Basic Introduce\n\n### Intro\n\nVarlet is a `Vue3` component library based on Material Design 2 and 3, supporting mobile and desktop, developed and maintained by `varletjs` organization.\n\n### Features\n\n- 🚀 Provide 60+ high quality general purpose components\n- 🚀 Components are very lightweight\n- 💪 Developed by Chinese, complete Chinese and English documentation and logistics support\n- 🛠️ Support on-demand introduction\n- 🛠️ Support theme customization\n- 🌍 Support internationalization\n- 💡 Support WebStorm syntax highlighting\n- 💪 Support the SSR\n- 📦 Support [Nuxt Module](https://github.com/varletjs/varlet-nuxt)\n- 💡 Support the Typescript\n- 💪 Make sure more than 90 percent unit test coverage, providing stability assurance\n- 🎨 Supports both Material Design 2 and Material Design 3 design systems\n- 🛠️ Support dark mode\n- 🔧 Provide official VSCode extension\n- ⌨️ Support Accessibility (still improving)\n\n\n### Official Ecosystem\n\nThe following projects are maintained by the official team for a long time.\n\n| Name | Description |\n|------------------------------------------------------------------------------------------------------|--------------------------------------|\n| [@varlet/cli](https://github.com/varletjs/varlet/tree/dev/packages/varlet-cli) | `Vue3 component library rapid prototyping tool` |\n| [@varlet/touch-emulator](https://github.com/varletjs/varlet/tree/dev/packages/varlet-touch-emulator) | `Desktop adapter, so that the mobile component library can run on the desktop` |\n| [@varlet/ui-playground](https://github.com/varletjs/varlet/tree/dev/packages/varlet-ui-playground) | `Varlet component library online editing tool` |\n| [@varlet/import-resolver](https://github.com/varletjs/varlet/tree/dev/packages/varlet-import-resolver) | `A resolver for` [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) ` used to implement Varlet and import it on demand` |\n| [@varlet/preset-unocss](https://github.com/varletjs/varlet/tree/dev/packages/varlet-preset-unocss) | [UnoCss](https://unocss.dev/) `presets for varlet` |\n| [@varlet/preset-tailwindcss](https://github.com/varletjs/varlet/tree/dev/packages/varlet-preset-tailwindcss) | [tailwindcss](https://tailwindcss.com/) `presets for varlet` |\n| [varlet-theme-builder](https://github.com/varletjs/varlet-theme-builder) | `Theme generator for generating theme variables for varlet Material Design 3` | \n| [varlet-vscode-extension](https://github.com/varletjs/varlet/tree/dev/packages/varlet-vscode-extension) | `Varlet Component Library VSCode Plugin` |\n| [vscode-theme-varlet](https://github.com/varletjs/vscode-theme-varlet) | `Varlet VSCode Theme` |\n| [varlet-app-example](https://github.com/varletjs/varlet-app-template) | `Varlet component library app template` |\n| [varlet-install-example](https://github.com/varletjs/varlet-install-example) | `Case collection of Varlet component library and various ecosystem integration` |\n\n### Community Ecosystem\n\nThe following projects are maintained by community personnel, welcome to add.\n\n| Name | Description |\n|----------------------------------------------------------------|-----------------------------------------|\n| [vue-h5-template](https://github.com/sunniejs/vue-h5-template) | `Vue-based mobile template scaffolding, providing mobile presets for Varlet component library` |\n| [create-vite-app](https://github.com/ErKeLost/create-vite-app) | `A desktop template scaffolding based on Vue3, providing desktop presets for Varlet component library` |\n| [vscode-common-intellisense](https://github.com/Simon-He95/vscode-common-intellisense) | `A VS Code extension that provides better intellisense to Varlet developers` |\n| [vue3-varlet-mobile](https://github.com/vue-zone/vue3-varlet-mobile) | `A mobile template based on Vue 3 and Varlet Component Library` |\n\n### PR & Issue\nIf you have any problems during use, you can [issue](https://github.com/varletjs/varlet/issues) them to us on [github](https://github.com/varletjs/varlet),\nwe will deal with it as soon as possible. You can also give us [PR](https://github.com/varletjs/varlet/pulls).\n\n### Open source licenses\nComponent library based on `MIT` licenses.\n\n### Contribution Guide\nSee [Varlet Contribution](https://github.com/varletjs/varlet/blob/dev/.github/CONTRIBUTING.md).\n\n### Thanks to contributors\n\n\n ![](\"https://cdn.jsdelivr.net/gh/varletjs/varlet-static/sponsorkit/sponsors.svg\")
\n","packages/varlet-ui/docs/home.zh-CN.md":"# 基本介绍\n\n### 介绍\n\nVarlet 是一个 `Vue3` 组件库，基于 Material Design 2 和 3，支持移动端、桌面端，由 `varletjs` 组织维护。\n\n### 特性\n\n- 🚀 提供 60+ 个高质量通用组件\n- 🚀 组件十分轻量\n- 💪 由国人开发，完善的中英文文档和后勤保障\n- 🛠️ 支持按需引入\n- 🛠️ 支持主题定制\n- 🌍 支持国际化\n- 💡 支持 webstorm 组件属性高亮\n- 💪 支持 SSR\n- 📦 支持 [Nuxt Module](https://github.com/varletjs/varlet-nuxt)\n- 💡 支持 Typescript\n- 💪 确保 90% 以上单元测试覆盖率，提供稳定性保证\n- 🎨 同时支持 Material Design 2 和 Material Design 3 两套设计系统\n- 🛠️ 支持暗黑模式\n- 🔧 提供官方的 VSCode 插件\n- ⌨️ 支持无障碍访问（持续改进中）\n\n### 官方生态\n\n以下项目由官方团队长期维护。\n\n| 名称 | 描述 |\n|------------------------------------------------------------------------------------------------------|--------------------------|\n| [@varlet/cli](https://github.com/varletjs/varlet/tree/dev/packages/varlet-cli) | `Vue3 组件库快速成型工具` |\n| [@varlet/touch-emulator](https://github.com/varletjs/varlet/tree/dev/packages/varlet-touch-emulator) | `桌面端适配器，让移动端组件库可以在桌面端运行` |\n| [@varlet/ui-playground](https://github.com/varletjs/varlet/tree/dev/packages/varlet-ui-playground) | `Varlet 组件库在线编辑工具` |\n| [@varlet/import-resolver](https://github.com/varletjs/varlet/tree/dev/packages/varlet-import-resolver) | [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) `的一个解析器，用于实现 Varlet 按需引入` |\n| [@varlet/preset-unocss](https://github.com/varletjs/varlet/tree/dev/packages/varlet-preset-unocss) | `varlet 的` [UnoCss](https://unocss.dev/) `预设` |\n| [@varlet/preset-tailwindcss](https://github.com/varletjs/varlet/tree/dev/packages/varlet-preset-tailwindcss) | `varlet 的` [tailwindcss](https://tailwindcss.com/) `预设` |\n| [varlet-theme-builder](https://github.com/varletjs/varlet-theme-builder) | `主题生成器，用于为 varlet material design 3 生成主题变量` | \n| [varlet-vscode-extension](https://github.com/varletjs/varlet/tree/dev/packages/varlet-vscode-extension) | `Varlet 组件库 VSCode 插件` |\n| [vscode-theme-varlet](https://github.com/varletjs/vscode-theme-varlet) | `Varlet VSCode 主题` |\n| [varlet-app-example](https://github.com/varletjs/varlet-app-template) | `Varlet 组件库移动端模板` |\n| [varlet-install-example](https://github.com/varletjs/varlet-install-example) | `Varlet 组件库与各种生态集成的案例集合` |\n\n### 社区生态\n\n以下项目由社区人员维护，欢迎补充。\n\n| 名称 | 描述 |\n|----------------------------------------------------------------|-------------------------------------------|\n| [vue-h5-template](https://github.com/sunniejs/vue-h5-template) | `基于 Vue 的移动端模板脚手架，提供了 Varlet 组件库的移动端预设` |\n| [create-vite-app](https://github.com/ErKeLost/create-vite-app) | `基于 Vue3 的桌面端模板脚手架，提供了 Varlet 组件库的桌面端预设` |\n| [vscode-common-intellisense](https://github.com/Simon-He95/vscode-common-intellisense) | `为 Varlet 开发人员提供更好的智能感知的 VSCode 扩展` |\n| [vue3-varlet-mobile](https://github.com/vue-zone/vue3-varlet-mobile) | `基于 Vue 3 和 Varlet 组件库的移动模板` |\n\n### PR & Issue\n使用过程中出现的问题可以到 [github](https://github.com/varletjs/varlet) 来给我们提 [issue](https://github.com/varletjs/varlet/issues)，\n我们会在第一时间处理问题。也可以给我们提 [PR](https://github.com/varletjs/varlet/pulls)，我们也十分欢迎小伙伴们来参与贡献。\n\n### 开源协议\n组件库基于 `MIT` 协议。\n\n### 贡献指南\n详情见 [Varlet 贡献指南](https://github.com/varletjs/varlet/blob/dev/.github/CONTRIBUTING.md)。\n\n### 感谢贡献者们做出的努力\n\n\n \n","packages/varlet-ui/docs/importOnDemand.en-US.md":"# Import On Demand\n\n### Intro\n\nOn-demand import avoids the full import of components, which can effectively reduce the size of the release package.\n\n### Automatic Import\n\nvia plugin\n[unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) and\n[unplugin-auto-import](https://github.com/antfu/unplugin-auto-import)\nImplement components to automatically import on demand, This is our most recommended way.\n\n#### Install Plugin\n\n```shell\n# playground-ignore\n# npm\nnpm i @varlet/import-resolver unplugin-vue-components unplugin-auto-import -D\n\n# yarn\nyarn add @varlet/import-resolver unplugin-vue-components unplugin-auto-import -D\n\n# pnpm\npnpm add @varlet/import-resolver unplugin-vue-components unplugin-auto-import -D\n```\n\n#### Vite\n\n```js\n// playground-ignore\n// vite.config.js\nimport vue from '@vitejs/plugin-vue'\nimport components from 'unplugin-vue-components/vite'\nimport autoImport from 'unplugin-auto-import/vite'\nimport { VarletImportResolver } from '@varlet/import-resolver'\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n plugins: [\n vue(),\n components({\n resolvers: [VarletImportResolver()]\n }),\n autoImport({\n resolvers: [VarletImportResolver({ autoImport: true })]\n })\n ]\n})\n```\n\n#### Vue CLI\n```js\n// playground-ignore\n// vue.config.js\nconst Components = require('unplugin-vue-components/webpack')\nconst AutoImport = require('unplugin-auto-import/webpack')\nconst { VarletImportResolver } = require('@varlet/import-resolver')\n\nmodule.exports = {\n configureWebpack: {\n plugins: [\n Components.default({\n resolvers: [VarletImportResolver()]\n }),\n AutoImport.default({\n resolvers: [VarletImportResolver({ autoImport: true })]\n })\n ]\n }\n}\n```\n\n#### Typescript configuration note\n\nIn order to get good IDE syntax highlighting, \nplease make sure that the type declaration files generated by the above two plugins are include by `typescript`,\nwhich can be configured as follows in `tsconfig.json`:\n\n```json\n// playground-ignore\n{\n \"include\": [\"auto-imports.d.ts\", \"components.d.ts\"]\n}\n```\n\n### Manual import\n\nEach component is a `Vue plugin` and consists of `component logic` and `style files`, which are manually imported and used as follows.\n\n```js\n// playground-ignore\nimport App from './App.vue'\nimport { createApp } from 'vue'\nimport { Button } from '@varlet/ui'\nimport '@varlet/ui/es/button/style/index'\n\ncreateApp(App).use(Button)\n```\n\nOR\n\n```html\n// playground-ignore\n\n\n\n \n Scroll to bottom {{ list }} \n
\n\n```\n\n## API\n\n### Props\n\n| Prop | Description | Type | Default |\n| ----- |---------------------------------------------------------------------------------------------------------|--------|-------|\n| `target` | The target to trigger scroll. If it is `undefined`, back top will listen to the nearest scrollable parent. | _string \\| HTMLElement_ | `-` |\n| `visibility-height` | The button will not show until the scroll height reaches this value | _string \\| number_ | `200` |\n| `bottom` | Distance between `BackTop` and page bottom | _string \\| number_ | `-` |\n| `right` | Distance between `BackTop` and page right | _string \\| number_ | `-` |\n| `size` | BackTop button size | _string \\| number_ | `-` |\n| `elevation` | Elevation level, options `true` `false` and level of `0-24` | _string \\| number \\| boolean_| `true` |\n| `duration` | Time to return to top(ms) | _number_ | `300` |\n\n### Events\n\n| Event | Description | arguments |\n| ----- | -------------- | -------- |\n| `click` | Triggered when click | `event: Event` |\n\n### Slots\n\n| Name | Description | SlotProps |\n| ----- | -------------- | -------- |\n| `default` | Custom the content | `-` |\n\n### Style Variables\n\nHere are the CSS variables used by the component. Styles can be customized using [StyleProvider](#/en-US/style-provider).\n\n| Variable | Default |\n| --- | --- |\n| `--back-top-right` | `40px` |\n| `--back-top-bottom` | `40px` |\n| `--back-top-button-size` | `40px` |\n| `--back-top-button-border-radius` | `50%` |\n","packages/varlet-ui/src/back-top/docs/zh-CN.md":"# 回到顶部\n\n### 介绍\n\n返回页面顶部的操作按钮。\n\n### 基本使用\n\n当页面滚动到 `200px` 时，右下角会出现返回顶部按钮。\n\n```html\n\n\n\n \n Scroll to bottom {{ list }} \n
\n\n```\n\n## API\n\n### 属性\n\n| 参数 | 说明 | 类型 | 默认值 |\n|---------------------|-------------------------------------------|------|--------------|\n| `target` | 触发滚动的对象，如果为 `undefined` 会监听距离最近的一个可滚动的祖先节点\t | _string \\| HTMLElement_ | `-` |\n| `visibility-height` | 滚动高度达到此参数值才出现 | _string \\| number_ | `200` |\n| `bottom` | `BackTop` 距离页面底部的距离 | _string \\| number_ | `-` |\n| `right` | `BackTop` 距离页面右侧的距离 | _string \\| number_ | `-` |\n| `size` | `BackTop` 按钮大小 | _string \\| number_ | `-` |\n| `elevation` | 海拔高度，可选值为 `true` `false` 和 `0-24` 的等级 | _string \\| number \\| boolean_| `true` |\n| `duration` | 回到顶部所需时间（ms） | _number_ | `300` |\n\n### 事件\n\n| 事件名 | 说明 | 回调参数 |\n| ----- | -------------- | -------- |\n| `click` | 点击按钮触发的事件 | `event: Event` |\n\n### 插槽\n\n| 名称 | 说明 | 参数 |\n| ----- | -------------- | -------- |\n| `default` | 自定义按钮内容 | `-` |\n\n### 样式变量\n\n以下为组件使用的 css 变量，可以使用 [StyleProvider 组件](#/zh-CN/style-provider) 进行样式定制。\n\n| 变量名 | 默认值 |\n| --- | --- |\n| `--back-top-right` | `40px` |\n| `--back-top-bottom` | `40px` |\n| `--back-top-button-size` | `40px` |\n| `--back-top-button-border-radius` | `50%` |\n","packages/varlet-ui/src/badge/docs/en-US.md":"# Badge\n\n### Intro\n\nA red dot, number, or text that appears in the upper corner of an icon or text indicates that there is new content or pending information.\n\n### Theme Color Badge\n\nSet different color badge through the `type` attribute.\n\n```html\n\n hello
\n world
\n varlet
\n\n```\n\nWe also support the HSL variables, which makes the transparency of adjusting the color easier.\n\n```html\n\n\n hello
\n\n```","packages/varlet-ui/docs/atomicCssSupport.zh-CN.md":"# 原子化 CSS 支持\n\n### 介绍\n\n我们提供了常见的 CSS 原子化框架预设，使访问组件库的基础样式变量更加容易，并且一致化了页面响应式断点。\n\n### UnoCSS\n\n#### 安装\n\n```shell\n# playground-ignore\n# npm\nnpm i @varlet/preset-unocss -D\n# yarn\nyarn add @varlet/preset-unocss -D\n# pnpm\npnpm add @varlet/preset-unocss -D\n```\n\n#### 配置\n\n```js\n// playground-ignore\n// uno.config.ts\nimport { defineConfig, presetUno } from 'unocss'\nimport { presetVarlet } from '@varlet/preset-unocss'\n\nexport default defineConfig({\n presets: [presetUno(), presetVarlet()]\n})\n```\n\n#### 更多配置\n\n预设的详细定义[请看这里](https://github.com/varletjs/varlet/blob/main/packages/varlet-preset-unocss/src/index.ts)。\n\n### Tailwindcss\n\n#### 安装\n\n```shell\n# playground-ignore\n# npm\nnpm i @varlet/preset-tailwindcss -D\n# yarn\nyarn add @varlet/preset-tailwindcss -D\n# pnpm\npnpm add @varlet/preset-tailwindcss -D\n```\n\n#### Tailwindcss V3 配置\n\n```js\n// playground-ignore\n// tailwind.config.js\nimport { presetVarlet } from '@varlet/preset-tailwindcss'\n\nexport default {\n content: [\n './index.html',\n './src/**/*.{vue,js,ts,jsx,tsx}',\n ],\n presets: [presetVarlet()]\n}\n```\n\n#### Tailwindcss V4 配置\n\n```js\n// playground-ignore\n// tailwind.config.js\nimport { presetVarlet } from '@varlet/preset-tailwindcss'\n\nexport default {\n presets: [presetVarlet()]\n}\n```\n\n```css\n/** src/style.css */\n@import \"tailwindcss\";\n@config \"../tailwind.config.js\";\n```\n\n#### 更多配置\n\n预设的详细定义[请看这里](https://github.com/varletjs/varlet/blob/main/packages/varlet-preset-tailwindcss/src/index.ts)。\n\n### 使用方式\n\n```html\n\n\n hello
\n world
\n varlet
\n\n```\n\n我们同时也支持了 hsl 变量，这使得调整颜色的透明度变得更加容易。\n\n```html\n\n\n hello
\n\n```\n\n","packages/varlet-ui/docs/browserAdaptation.en-US.md":"# Browser Adaptation\n\n### Intro\n\nThe component library provides mobile and desktop adaptations,\nscheme `varlet-touch-emulator` is used for mobile terminal adaptation,\nscheme `varlet-touch-emulator` is used for mobile terminal adaptation.\n\n### Mobile Adaptation\n\n#### CSS Unit Adaptation\n\nThe component library design is based on the `375px` width design draft. \nIt is recommended to use [postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport) to convert `px` units into `vw` units to achieve mobile terminal adaptation.\nCreate `postcss.config.js` under the `Webpack/Vite` project root path And do the following configuration `375px -> 100vw`.\n\n```shell\n# playground-ignore\n# npm\nnpm i postcss-px-to-viewport -D\n\n# yarn\nyarn add postcss-px-to-viewport -D\n\n# pnpm\npnpm add postcss-px-to-viewport -D\n```\n\n```js\n// playground-ignore\n// postcss.config.js\nmodule.exports = {\n plugins: {\n 'postcss-px-to-viewport': {\n viewportWidth: 375,\n unitPrecision: 6,\n unitToConvert: 'px',\n viewportUnit: 'vmin',\n fontViewportUnit: 'vmin',\n propList: ['*'],\n }\n }\n}\n```\n\n#### Theme Unit Adaptation (Viewport)\n\nBecause the theme is mounted at runtime and is not affected by postcss, the component library provides a utility tool `Themes.toViewport` for adaptation. The theme returned by the function will use the `375px -> 100vmin` rule by default.\n\n```js\nimport { Themes } from '@varlet/ui'\n\nconst viewportTheme = Themes.toViewport(Themes.md3Dark)\n```\n\nYou can also make changes to the conversion rules\n\n```js\nimport { Themes } from '@varlet/ui'\n\nconst viewportTheme = Themes.toViewport(Themes.md3Dark, {\n // defaults 375\n viewportWidth: 750,\n // defaults 'vmin'\n viewportUnit: 'vw',\n // defaults 6\n unitPrecision: 4,\n})\n```\n\n#### Theme Unit Adaptation (Rem)\n\nSimilar to the Viewport solution\n\n```js\nimport { Themes } from '@varlet/ui'\n\nconst remTheme = Themes.toRem(Themes.md3Dark)\n```\n\nOr customize\n\n```js\nimport { Themes } from '@varlet/ui'\n\nconst viewportTheme = Themes.toRem(Themes.md3Dark, {\n // defaults 16\n rootFontSize: 32,\n // defaults 6\n unitPrecision: 4,\n})\n```\n\n### Desktop Adaptation\n\nBecause component library interaction events are developed using `touch` events, `mouse` events on the desktop side are not supported.\nIt is recommended to use `@varlet/touch-emulator` to set `touch -> mouse` for desktop adaptation.\n\n```shell\n# playground-ignore\n# npm\nnpm i @varlet/touch-emulator\n# yarn\nyarn add @varlet/touch-emulator\n# pnpm\npnpm add @varlet/touch-emulator\n```\n\n```js\n// playground-ignore\nimport '@varlet/touch-emulator'\n```","packages/varlet-ui/docs/browserAdaptation.zh-CN.md":"# 浏览器适配\n\n### 介绍\n\n组件库提供移动端和桌面端适配方案，\n移动端使用 [postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport) 方案进行适配，\n桌面端使用 `@varlet/touch-emulator` 方案进行适配。\n\n### 移动端适配\n\n#### CSS 单位适配\n\n组件库设计基于 `375px` 宽度设计稿，推荐使用 postcss 插件将 `px` 单位转换成 `vmin` 单位从而实现移动端适配。\n在 `webpack/vite` 项目根路径下创建 `postcss.config.js` 并做如下配置之后 `375px -> 100vmin`。\n\n```shell\n# playground-ignore\n# npm\nnpm i postcss-px-to-viewport -D\n\n# yarn\nyarn add postcss-px-to-viewport -D\n\n# pnpm\npnpm add postcss-px-to-viewport -D\n```\n\n```js\n// playground-ignore\n// postcss.config.js\nmodule.exports = {\n plugins: {\n 'postcss-px-to-viewport': {\n viewportWidth: 375,\n unitPrecision: 6,\n unitToConvert: 'px',\n viewportUnit: 'vmin',\n fontViewportUnit: 'vmin',\n propList: ['*'],\n }\n }\n}\n```\n\n#### 主题包单位适配 (Viewport)\n\n因为主题包是运行时挂载的，不受 postcss 影响，组件库提供了实用工具 `Themes.toViewport` 进行适配，函数返回的主题将默认使用 `375px -> 100vmin` 的规则。\n\n```js\nimport { Themes } from '@varlet/ui'\n\nconst viewportTheme = Themes.toViewport(Themes.md3Dark)\n```\n\n也可以对转换规则进行更改\n\n```js\nimport { Themes } from '@varlet/ui'\n\nconst viewportTheme = Themes.toViewport(Themes.md3Dark, {\n // 默认值为 375\n viewportWidth: 750,\n // 默认值为 'vmin'\n viewportUnit: 'vw',\n // 默认值为 6\n unitPrecision: 4,\n})\n```\n\n#### 主题包单位适配 (Rem)\n\n与 `Viewport` 方案类似\n\n```js\nimport { Themes } from '@varlet/ui'\n\nconst remTheme = Themes.toRem(Themes.md3Dark)\n```\n\n也支持自定义\n\n```js\nimport { Themes } from '@varlet/ui'\n\nconst viewportTheme = Themes.toRem(Themes.md3Dark, {\n // 默认值为 16\n rootFontSize: 32,\n // 默认值为 6\n unitPrecision: 4,\n})\n```\n\n### 桌面端适配\n\n由于组件库交互事件使用 `touch` 事件进行开发，不支持桌面端的 `mouse` 事件，\n推荐使用 `@varlet/touch-emulator` 将 `touch -> mouse` 从而实现桌面端适配。\n\n```shell\n# playground-ignore\n# npm\nnpm i @varlet/touch-emulator\n# yarn\nyarn add @varlet/touch-emulator\n# pnpm\npnpm add @varlet/touch-emulator\n```\n\n```js\n// playground-ignore\nimport '@varlet/touch-emulator'\n```","packages/varlet-ui/docs/cli.en-US.md":"# Components Library Tools\n\n### Intro\n\nThe out-of-the-box `Vue3 component library` rapid prototyping tool provides a series of commands and tools to solve the problem of component library development.\n\n### Features\n\n- 📦 Out-of-the-box component library development environment\n- 📦 An out-of-the-box component library compilation tool that supports exporting `esm`, `cjs`, `umd` module codes\n- 🛠️ Configuration file-based component library documentation site, support Baidu statistics and theme customization\n- 🛠️ Supports both `sfc` and `tsx` styles for writing component libraries\n- 📦 Out-of-the-box code inspection tool\n- 📦 Out-of-the-box unit testing tools\n- 📦 Out-of-the-box code publishing tool, publishes to both `npm` and `github`, and automatically generates changelogs\n- 💪 Support for `VSCode` extension development\n- 💪 Support `build svg to web fonts`\n- 💪 Support for `Typescript`\n- 💪 Support `Various themes, including Material Design 2, Material Design 3`\n- 🌍 Support `Internationalization`\n- 🚀 Based on `pnpm`\n\n### Recommended toolchain\n\nUnder Varlet’s current `component-library toolchain`, we recommend combining `@varlet/cli`, [`vite-plus`](https://viteplus.dev/) (`vp`), and [`rattail`](https://rattail.varletjs.org/) (`rt`): `@varlet/cli` covers first-party library workflows (docs, compile, tests, …), `vp` covers lint/format and app/extension build entrypoints aligned with the Oxc/Rolldown stack, and `rattail` covers `clean`, git hooks, `changelog`, `release`, `commit-lint`, and similar automation. Use this trio for new libraries and scaffold upgrades.\n\n| Piece | Role |\n| --- | --- |\n| `@varlet/cli` | First-party Varlet workflows: `create`, `gen`, `dev`, `build`, `preview`, `compile`, `compile:style-vars`, `build:icons`, `test`, … |\n| [`vite-plus`](https://viteplus.dev/) (`vp`) | Lint, format, app/extension `build`/`dev`/`preview`, and other toolchain entrypoints aligned with the Oxc/Rolldown stack |\n| [`rattail`](https://rattail.varletjs.org/) (`rt`) | `clean`, git hooks, `changelog`, `release`, `commit-lint`, and other repo automation |\n\n### Commands pending deprecation\n\nThese commands still run for backward compatibility and may print a deprecation notice. Do not rely on them in new scripts or new projects — prefer `vp` / `rt` (or `vr` where documented). Any future changes will be called out in release notes.\n\n| Command | Use instead |\n| --- | --- |\n| `varlet-cli dev:vite` | `vp dev` |\n| `varlet-cli build:vite` | `vp build` |\n| `varlet-cli dev:extension` | `vp pack --watch` (with a local `vite.config.ts` for the extension) |\n| `varlet-cli build:extension` | `vp pack` |\n| `varlet-cli commit-lint` | `rt commit-lint` |\n| `varlet-cli checklist` | Minimal value; deprecated without replacement |\n| `varlet-cli changelog` | `rt changelog` |\n| `varlet-cli release` | `rt release` |\n\n### Quickstart\n\n`@varlet/cli` has built-in `sfc` and `tsx` style component library project templates, which can be generated directly by the `gen` command.\nIt is convenient for you to directly enter the component library development.\n\n```shell\n# playground-ignore\npnpm add @varlet/cli -g\nvarlet-cli gen\n```\n\n## Advanced customization\n\n### Configuration file\n\nThe `varlet.config.mjs` in the project root directory is used to manage the specific details of the entire component library project.\nThe default configuration can be viewed [varlet.default.config.ts](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.default.config.ts).\nAlso refer to `@varlet/ui` [varlet.config.mjs](https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/varlet.config.mjs).\n\n| Parameter | Description | Type | Default |\n| --- | -------------- | -------- | ---------- |\n| `name` | The full name of the component library, which will be used as the package name | _string_ | `Varlet` |\n| `namespace` | Component library namespace, will be used as component prefix | _string_ | `var` |\n| `host` | Development server host | _number_ | `localhost` |\n| `port` | Development server port | _number_ | `8080` |\n| `proxy` | Development server proxy | _Record\n\n```vue\nimport ComponentResourcesDownload from './components/ComponentResourcesDownload.vue'\n```\n\n### Icons Resources\n\nThe icon resource contains `100+` icons built into the component library.\n\n\n\n```vue\nimport IconResourcesDownload from './components/IconResourcesDownload.vue'\n```\n\n","packages/varlet-ui/docs/designResources.zh-CN.md":"# 设计资源\n\n### 介绍\n\n我们为设计师提供了设计资源，您可以在本页面选择所需的资源进行下载。\n\n### 组件资源\n\n组件资源包含了`色彩`、`文字`、`组件资源`。目前只提供 Material Design 2 亮色模式的设计资源，其他资源暂未提供，欢迎社区贡献。\n\n\n\n```vue\nimport ComponentResourcesDownload from './components/ComponentResourcesDownload.vue'\n```\n\n### 图标资源\n\n图标资源包含了组件库内置的 `100+` 图标。\n\n\n\n```vue\nimport IconResourcesDownload from './components/IconResourcesDownload.vue'\n```\n\n","packages/varlet-ui/docs/extension.en-US.md":"# VSCode Extension\n\n### Intro\n\nFor a better development experience, we built a `VSCode plugin`.\n\n### Features\n\n- 🛠️ Support syntax hints and quick completion for all components.\n- 🛠️ Support document address preview and quick jump for all components.\n- 🛠️ Support frame selection of code snippets to quickly open `Playground`.\n- 🛠️ Support full icon preview for icon components.\n- 🌍 Support switching between Chinese and English.\n\n### Install\n\nVsCode Extension Marketplace Search [varlet-vscode-extension](https://marketplace.visualstudio.com/items?itemName=haoziqaq.varlet-vscode-extension).\n\n### How To Use\n\nGrammatical hints appear when you enter the keyword of the component name, and you can quickly complete it after selecting it.\n\n\n\nMoving the mouse to the component name will display the document address of the component, which can be clicked to jump, and it also directly displays the properties, events and slots of the component in the form of a table.\n\n\n\nPress space or attribute keywords in the attribute input range of the label to display attribute completion prompts and attribute information.\n\n\n\nWhen the `name` property of the `Icon` component is input, an icon preview will appear, and syntax completion will be performed after selection.\n\n\n\nFrame the code snippet, and you can quickly open `Playground` in the right-click menu to preview the framed code online.\n\n\n\nSupport switching between Chinese and English, more friendly to Chinese people.\n\n\n\n","packages/varlet-ui/docs/extension.zh-CN.md":"# VSCode 插件\n\n### 介绍\n\n为了更优秀的开发体验，我们构建了一个 `VSCode 插件`。\n\n### 特性\n\n- 🛠️ 支持全组件的语法提示、快速补全。\n- 🛠️ 支持全组件的文档地址预览、快速跳转。\n- 🛠️ 支持框选代码片段，快速打开 `Playground`。\n- 🛠️ 支持图标组件的全图标预览。\n- 🌍 支持中英文切换。\n\n### 安装\n\nVsCode 插件市场搜索 [varlet-vscode-extension](https://marketplace.visualstudio.com/items?itemName=haoziqaq.varlet-vscode-extension)。\n\n### 如何使用\n\n输入组件名称关键字时出现语法提示，选中后进行快速补全。\n\n\n\n鼠标移动到组件名会显示组件的文档地址用来点击跳转，也直接以表格的形式展示组件的属性、事件和插槽。\n\n\n\n在标签的属性输入范围按下空格或属性关键字，显示属性补全提示和属性信息。\n\n\n\n输入 `Icon` 组件的 `name` 属性时出现图标预览，选中后进行语法补全。\n\n\n\n框选代码片段，右键菜单中可以快速打开 `Playground` 对框选的代码进行线上预览。\n\n\n\n支持中英文切换，对中国人更加友好。\n\n\n\n\n","packages/varlet-ui/docs/home.en-US.md":"# Basic Introduce\n\n### Intro\n\nVarlet is a `Vue3` component library based on Material Design 2 and 3, supporting mobile and desktop, developed and maintained by `varletjs` organization.\n\n### Features\n\n- 🚀 Provide 60+ high quality general purpose components\n- 🚀 Components are very lightweight\n- 💪 Developed by Chinese, complete Chinese and English documentation and logistics support\n- 🛠️ Support on-demand introduction\n- 🛠️ Support theme customization\n- 🌍 Support internationalization\n- 💡 Support WebStorm syntax highlighting\n- 💪 Support the SSR\n- 📦 Support [Nuxt Module](https://github.com/varletjs/varlet-nuxt)\n- 💡 Support the Typescript\n- 💪 Make sure more than 90 percent unit test coverage, providing stability assurance\n- 🎨 Supports both Material Design 2 and Material Design 3 design systems\n- 🛠️ Support dark mode\n- 🔧 Provide official VSCode extension\n- ⌨️ Support Accessibility (still improving)\n\n\n### Official Ecosystem\n\nThe following projects are maintained by the official team for a long time.\n\n| Name | Description |\n|------------------------------------------------------------------------------------------------------|--------------------------------------|\n| [@varlet/cli](https://github.com/varletjs/varlet/tree/dev/packages/varlet-cli) | `Vue3 component library rapid prototyping tool` |\n| [@varlet/touch-emulator](https://github.com/varletjs/varlet/tree/dev/packages/varlet-touch-emulator) | `Desktop adapter, so that the mobile component library can run on the desktop` |\n| [@varlet/ui-playground](https://github.com/varletjs/varlet/tree/dev/packages/varlet-ui-playground) | `Varlet component library online editing tool` |\n| [@varlet/import-resolver](https://github.com/varletjs/varlet/tree/dev/packages/varlet-import-resolver) | `A resolver for` [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) ` used to implement Varlet and import it on demand` |\n| [@varlet/preset-unocss](https://github.com/varletjs/varlet/tree/dev/packages/varlet-preset-unocss) | [UnoCss](https://unocss.dev/) `presets for varlet` |\n| [@varlet/preset-tailwindcss](https://github.com/varletjs/varlet/tree/dev/packages/varlet-preset-tailwindcss) | [tailwindcss](https://tailwindcss.com/) `presets for varlet` |\n| [varlet-theme-builder](https://github.com/varletjs/varlet-theme-builder) | `Theme generator for generating theme variables for varlet Material Design 3` | \n| [varlet-vscode-extension](https://github.com/varletjs/varlet/tree/dev/packages/varlet-vscode-extension) | `Varlet Component Library VSCode Plugin` |\n| [vscode-theme-varlet](https://github.com/varletjs/vscode-theme-varlet) | `Varlet VSCode Theme` |\n| [varlet-app-example](https://github.com/varletjs/varlet-app-template) | `Varlet component library app template` |\n| [varlet-install-example](https://github.com/varletjs/varlet-install-example) | `Case collection of Varlet component library and various ecosystem integration` |\n\n### Community Ecosystem\n\nThe following projects are maintained by community personnel, welcome to add.\n\n| Name | Description |\n|----------------------------------------------------------------|-----------------------------------------|\n| [vue-h5-template](https://github.com/sunniejs/vue-h5-template) | `Vue-based mobile template scaffolding, providing mobile presets for Varlet component library` |\n| [create-vite-app](https://github.com/ErKeLost/create-vite-app) | `A desktop template scaffolding based on Vue3, providing desktop presets for Varlet component library` |\n| [vscode-common-intellisense](https://github.com/Simon-He95/vscode-common-intellisense) | `A VS Code extension that provides better intellisense to Varlet developers` |\n| [vue3-varlet-mobile](https://github.com/vue-zone/vue3-varlet-mobile) | `A mobile template based on Vue 3 and Varlet Component Library` |\n\n### PR & Issue\nIf you have any problems during use, you can [issue](https://github.com/varletjs/varlet/issues) them to us on [github](https://github.com/varletjs/varlet),\nwe will deal with it as soon as possible. You can also give us [PR](https://github.com/varletjs/varlet/pulls).\n\n### Open source licenses\nComponent library based on `MIT` licenses.\n\n### Contribution Guide\nSee [Varlet Contribution](https://github.com/varletjs/varlet/blob/dev/.github/CONTRIBUTING.md).\n\n### Thanks to contributors\n\n\n \n","packages/varlet-ui/docs/home.zh-CN.md":"# 基本介绍\n\n### 介绍\n\nVarlet 是一个 `Vue3` 组件库，基于 Material Design 2 和 3，支持移动端、桌面端，由 `varletjs` 组织维护。\n\n### 特性\n\n- 🚀 提供 60+ 个高质量通用组件\n- 🚀 组件十分轻量\n- 💪 由国人开发，完善的中英文文档和后勤保障\n- 🛠️ 支持按需引入\n- 🛠️ 支持主题定制\n- 🌍 支持国际化\n- 💡 支持 webstorm 组件属性高亮\n- 💪 支持 SSR\n- 📦 支持 [Nuxt Module](https://github.com/varletjs/varlet-nuxt)\n- 💡 支持 Typescript\n- 💪 确保 90% 以上单元测试覆盖率，提供稳定性保证\n- 🎨 同时支持 Material Design 2 和 Material Design 3 两套设计系统\n- 🛠️ 支持暗黑模式\n- 🔧 提供官方的 VSCode 插件\n- ⌨️ 支持无障碍访问（持续改进中）\n\n### 官方生态\n\n以下项目由官方团队长期维护。\n\n| 名称 | 描述 |\n|------------------------------------------------------------------------------------------------------|--------------------------|\n| [@varlet/cli](https://github.com/varletjs/varlet/tree/dev/packages/varlet-cli) | `Vue3 组件库快速成型工具` |\n| [@varlet/touch-emulator](https://github.com/varletjs/varlet/tree/dev/packages/varlet-touch-emulator) | `桌面端适配器，让移动端组件库可以在桌面端运行` |\n| [@varlet/ui-playground](https://github.com/varletjs/varlet/tree/dev/packages/varlet-ui-playground) | `Varlet 组件库在线编辑工具` |\n| [@varlet/import-resolver](https://github.com/varletjs/varlet/tree/dev/packages/varlet-import-resolver) | [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) `的一个解析器，用于实现 Varlet 按需引入` |\n| [@varlet/preset-unocss](https://github.com/varletjs/varlet/tree/dev/packages/varlet-preset-unocss) | `varlet 的` [UnoCss](https://unocss.dev/) `预设` |\n| [@varlet/preset-tailwindcss](https://github.com/varletjs/varlet/tree/dev/packages/varlet-preset-tailwindcss) | `varlet 的` [tailwindcss](https://tailwindcss.com/) `预设` |\n| [varlet-theme-builder](https://github.com/varletjs/varlet-theme-builder) | `主题生成器，用于为 varlet material design 3 生成主题变量` | \n| [varlet-vscode-extension](https://github.com/varletjs/varlet/tree/dev/packages/varlet-vscode-extension) | `Varlet 组件库 VSCode 插件` |\n| [vscode-theme-varlet](https://github.com/varletjs/vscode-theme-varlet) | `Varlet VSCode 主题` |\n| [varlet-app-example](https://github.com/varletjs/varlet-app-template) | `Varlet 组件库移动端模板` |\n| [varlet-install-example](https://github.com/varletjs/varlet-install-example) | `Varlet 组件库与各种生态集成的案例集合` |\n\n### 社区生态\n\n以下项目由社区人员维护，欢迎补充。\n\n| 名称 | 描述 |\n|----------------------------------------------------------------|-------------------------------------------|\n| [vue-h5-template](https://github.com/sunniejs/vue-h5-template) | `基于 Vue 的移动端模板脚手架，提供了 Varlet 组件库的移动端预设` |\n| [create-vite-app](https://github.com/ErKeLost/create-vite-app) | `基于 Vue3 的桌面端模板脚手架，提供了 Varlet 组件库的桌面端预设` |\n| [vscode-common-intellisense](https://github.com/Simon-He95/vscode-common-intellisense) | `为 Varlet 开发人员提供更好的智能感知的 VSCode 扩展` |\n| [vue3-varlet-mobile](https://github.com/vue-zone/vue3-varlet-mobile) | `基于 Vue 3 和 Varlet 组件库的移动模板` |\n\n### PR & Issue\n使用过程中出现的问题可以到 [github](https://github.com/varletjs/varlet) 来给我们提 [issue](https://github.com/varletjs/varlet/issues)，\n我们会在第一时间处理问题。也可以给我们提 [PR](https://github.com/varletjs/varlet/pulls)，我们也十分欢迎小伙伴们来参与贡献。\n\n### 开源协议\n组件库基于 `MIT` 协议。\n\n### 贡献指南\n详情见 [Varlet 贡献指南](https://github.com/varletjs/varlet/blob/dev/.github/CONTRIBUTING.md)。\n\n### 感谢贡献者们做出的努力\n\n\n \n","packages/varlet-ui/docs/importOnDemand.en-US.md":"# Import On Demand\n\n### Intro\n\nOn-demand import avoids the full import of components, which can effectively reduce the size of the release package.\n\n### Automatic Import\n\nvia plugin\n[unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) and\n[unplugin-auto-import](https://github.com/antfu/unplugin-auto-import)\nImplement components to automatically import on demand, This is our most recommended way.\n\n#### Install Plugin\n\n```shell\n# playground-ignore\n# npm\nnpm i @varlet/import-resolver unplugin-vue-components unplugin-auto-import -D\n\n# yarn\nyarn add @varlet/import-resolver unplugin-vue-components unplugin-auto-import -D\n\n# pnpm\npnpm add @varlet/import-resolver unplugin-vue-components unplugin-auto-import -D\n```\n\n#### Vite\n\n```js\n// playground-ignore\n// vite.config.js\nimport vue from '@vitejs/plugin-vue'\nimport components from 'unplugin-vue-components/vite'\nimport autoImport from 'unplugin-auto-import/vite'\nimport { VarletImportResolver } from '@varlet/import-resolver'\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n plugins: [\n vue(),\n components({\n resolvers: [VarletImportResolver()]\n }),\n autoImport({\n resolvers: [VarletImportResolver({ autoImport: true })]\n })\n ]\n})\n```\n\n#### Vue CLI\n```js\n// playground-ignore\n// vue.config.js\nconst Components = require('unplugin-vue-components/webpack')\nconst AutoImport = require('unplugin-auto-import/webpack')\nconst { VarletImportResolver } = require('@varlet/import-resolver')\n\nmodule.exports = {\n configureWebpack: {\n plugins: [\n Components.default({\n resolvers: [VarletImportResolver()]\n }),\n AutoImport.default({\n resolvers: [VarletImportResolver({ autoImport: true })]\n })\n ]\n }\n}\n```\n\n#### Typescript configuration note\n\nIn order to get good IDE syntax highlighting, \nplease make sure that the type declaration files generated by the above two plugins are include by `typescript`,\nwhich can be configured as follows in `tsconfig.json`:\n\n```json\n// playground-ignore\n{\n \"include\": [\"auto-imports.d.ts\", \"components.d.ts\"]\n}\n```\n\n### Manual import\n\nEach component is a `Vue plugin` and consists of `component logic` and `style files`, which are manually imported and used as follows.\n\n```js\n// playground-ignore\nimport App from './App.vue'\nimport { createApp } from 'vue'\nimport { Button } from '@varlet/ui'\nimport '@varlet/ui/es/button/style/index'\n\ncreateApp(App).use(Button)\n```\n\nOR\n\n```html\n// playground-ignore\n\n\n\n \n Scroll to bottom {{ list }} \n
\n\n```\n\n## API\n\n### Props\n\n| Prop | Description | Type | Default |\n| ----- |---------------------------------------------------------------------------------------------------------|--------|-------|\n| `target` | The target to trigger scroll. If it is `undefined`, back top will listen to the nearest scrollable parent. | _string \\| HTMLElement_ | `-` |\n| `visibility-height` | The button will not show until the scroll height reaches this value | _string \\| number_ | `200` |\n| `bottom` | Distance between `BackTop` and page bottom | _string \\| number_ | `-` |\n| `right` | Distance between `BackTop` and page right | _string \\| number_ | `-` |\n| `size` | BackTop button size | _string \\| number_ | `-` |\n| `elevation` | Elevation level, options `true` `false` and level of `0-24` | _string \\| number \\| boolean_| `true` |\n| `duration` | Time to return to top(ms) | _number_ | `300` |\n\n### Events\n\n| Event | Description | arguments |\n| ----- | -------------- | -------- |\n| `click` | Triggered when click | `event: Event` |\n\n### Slots\n\n| Name | Description | SlotProps |\n| ----- | -------------- | -------- |\n| `default` | Custom the content | `-` |\n\n### Style Variables\n\nHere are the CSS variables used by the component. Styles can be customized using [StyleProvider](#/en-US/style-provider).\n\n| Variable | Default |\n| --- | --- |\n| `--back-top-right` | `40px` |\n| `--back-top-bottom` | `40px` |\n| `--back-top-button-size` | `40px` |\n| `--back-top-button-border-radius` | `50%` |\n","packages/varlet-ui/src/back-top/docs/zh-CN.md":"# 回到顶部\n\n### 介绍\n\n返回页面顶部的操作按钮。\n\n### 基本使用\n\n当页面滚动到 `200px` 时，右下角会出现返回顶部按钮。\n\n```html\n\n\n\n \n Scroll to bottom {{ list }} \n
\n\n```\n\n## API\n\n### 属性\n\n| 参数 | 说明 | 类型 | 默认值 |\n|---------------------|-------------------------------------------|------|--------------|\n| `target` | 触发滚动的对象，如果为 `undefined` 会监听距离最近的一个可滚动的祖先节点\t | _string \\| HTMLElement_ | `-` |\n| `visibility-height` | 滚动高度达到此参数值才出现 | _string \\| number_ | `200` |\n| `bottom` | `BackTop` 距离页面底部的距离 | _string \\| number_ | `-` |\n| `right` | `BackTop` 距离页面右侧的距离 | _string \\| number_ | `-` |\n| `size` | `BackTop` 按钮大小 | _string \\| number_ | `-` |\n| `elevation` | 海拔高度，可选值为 `true` `false` 和 `0-24` 的等级 | _string \\| number \\| boolean_| `true` |\n| `duration` | 回到顶部所需时间（ms） | _number_ | `300` |\n\n### 事件\n\n| 事件名 | 说明 | 回调参数 |\n| ----- | -------------- | -------- |\n| `click` | 点击按钮触发的事件 | `event: Event` |\n\n### 插槽\n\n| 名称 | 说明 | 参数 |\n| ----- | -------------- | -------- |\n| `default` | 自定义按钮内容 | `-` |\n\n### 样式变量\n\n以下为组件使用的 css 变量，可以使用 [StyleProvider 组件](#/zh-CN/style-provider) 进行样式定制。\n\n| 变量名 | 默认值 |\n| --- | --- |\n| `--back-top-right` | `40px` |\n| `--back-top-bottom` | `40px` |\n| `--back-top-button-size` | `40px` |\n| `--back-top-button-border-radius` | `50%` |\n","packages/varlet-ui/src/badge/docs/en-US.md":"# Badge\n\n### Intro\n\nA red dot, number, or text that appears in the upper corner of an icon or text indicates that there is new content or pending information.\n\n### Theme Color Badge\n\nSet different color badge through the `type` attribute.\n\n```html\n\n hello
\n world
\n varlet
\n\n```\n\nWe also support the HSL variables, which makes the transparency of adjusting the color easier.\n\n```html\n\n\n hello
\n\n```","isInternal":false,"tokens":601,"sizeBytes":2245},{"name":"atomicCssSupport.zh-CN.md","path":"packages/varlet-ui/docs/atomicCssSupport.zh-CN.md","rawUrl":"https://raw.githubusercontent.com/varletjs/varlet/HEAD/packages/varlet-ui/docs/atomicCssSupport.zh-CN.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"# 原子化 CSS 支持\n\n### 介绍\n\n我们提供了常见的 CSS 原子化框架预设，使访问组件库的基础样式变量更加容易，并且一致化了页面响应式断点。\n\n### UnoCSS\n\n#### 安装\n\n```shell\n# playground-ignore\n# npm\nnpm i @varlet/preset-unocss -D\n# yarn\nyarn add @varlet/preset-unocss -D\n# pnpm\npnpm add @varlet/preset-unocss -D\n```\n\n#### 配置\n\n```js\n// playground-ignore\n// uno.config.ts\nimport { defineConfig, presetUno } from 'unocss'\nimport { presetVarlet } from '@varlet/preset-unocss'\n\nexport default defineConfig({\n presets: [presetUno(), presetVarlet()]\n})\n```\n\n#### 更多配置\n\n预设的详细定义[请看这里](https://github.com/varletjs/varlet/blob/main/packages/varlet-preset-unocss/src/index.ts)。\n\n### Tailwindcss\n\n#### 安装\n\n```shell\n# playground-ignore\n# npm\nnpm i @varlet/preset-tailwindcss -D\n# yarn\nyarn add @varlet/preset-tailwindcss -D\n# pnpm\npnpm add @varlet/preset-tailwindcss -D\n```\n\n#### Tailwindcss V3 配置\n\n```js\n// playground-ignore\n// tailwind.config.js\nimport { presetVarlet } from '@varlet/preset-tailwindcss'\n\nexport default {\n content: [\n './index.html',\n './src/**/*.{vue,js,ts,jsx,tsx}',\n ],\n presets: [presetVarlet()]\n}\n```\n\n#### Tailwindcss V4 配置\n\n```js\n// playground-ignore\n// tailwind.config.js\nimport { presetVarlet } from '@varlet/preset-tailwindcss'\n\nexport default {\n presets: [presetVarlet()]\n}\n```\n\n```css\n/** src/style.css */\n@import \"tailwindcss\";\n@config \"../tailwind.config.js\";\n```\n\n#### 更多配置\n\n预设的详细定义[请看这里](https://github.com/varletjs/varlet/blob/main/packages/varlet-preset-tailwindcss/src/index.ts)。\n\n### 使用方式\n\n```html\n\n\n hello
\n world
\n varlet
\n\n```\n\n我们同时也支持了 hsl 变量，这使得调整颜色的透明度变得更加容易。\n\n```html\n\n\n hello
\n\n```\n\n","isInternal":false,"tokens":674,"sizeBytes":2179},{"name":"browserAdaptation.en-US.md","path":"packages/varlet-ui/docs/browserAdaptation.en-US.md","rawUrl":"https://raw.githubusercontent.com/varletjs/varlet/HEAD/packages/varlet-ui/docs/browserAdaptation.en-US.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"# Browser Adaptation\n\n### Intro\n\nThe component library provides mobile and desktop adaptations,\nscheme `varlet-touch-emulator` is used for mobile terminal adaptation,\nscheme `varlet-touch-emulator` is used for mobile terminal adaptation.\n\n### Mobile Adaptation\n\n#### CSS Unit Adaptation\n\nThe component library design is based on the `375px` width design draft. \nIt is recommended to use [postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport) to convert `px` units into `vw` units to achieve mobile terminal adaptation.\nCreate `postcss.config.js` under the `Webpack/Vite` project root path And do the following configuration `375px -> 100vw`.\n\n```shell\n# playground-ignore\n# npm\nnpm i postcss-px-to-viewport -D\n\n# yarn\nyarn add postcss-px-to-viewport -D\n\n# pnpm\npnpm add postcss-px-to-viewport -D\n```\n\n```js\n// playground-ignore\n// postcss.config.js\nmodule.exports = {\n plugins: {\n 'postcss-px-to-viewport': {\n viewportWidth: 375,\n unitPrecision: 6,\n unitToConvert: 'px',\n viewportUnit: 'vmin',\n fontViewportUnit: 'vmin',\n propList: ['*'],\n }\n }\n}\n```\n\n#### Theme Unit Adaptation (Viewport)\n\nBecause the theme is mounted at runtime and is not affected by postcss, the component library provides a utility tool `Themes.toViewport` for adaptation. The theme returned by the function will use the `375px -> 100vmin` rule by default.\n\n```js\nimport { Themes } from '@varlet/ui'\n\nconst viewportTheme = Themes.toViewport(Themes.md3Dark)\n```\n\nYou can also make changes to the conversion rules\n\n```js\nimport { Themes } from '@varlet/ui'\n\nconst viewportTheme = Themes.toViewport(Themes.md3Dark, {\n // defaults 375\n viewportWidth: 750,\n // defaults 'vmin'\n viewportUnit: 'vw',\n // defaults 6\n unitPrecision: 4,\n})\n```\n\n#### Theme Unit Adaptation (Rem)\n\nSimilar to the Viewport solution\n\n```js\nimport { Themes } from '@varlet/ui'\n\nconst remTheme = Themes.toRem(Themes.md3Dark)\n```\n\nOr customize\n\n```js\nimport { Themes } from '@varlet/ui'\n\nconst viewportTheme = Themes.toRem(Themes.md3Dark, {\n // defaults 16\n rootFontSize: 32,\n // defaults 6\n unitPrecision: 4,\n})\n```\n\n### Desktop Adaptation\n\nBecause component library interaction events are developed using `touch` events, `mouse` events on the desktop side are not supported.\nIt is recommended to use `@varlet/touch-emulator` to set `touch -> mouse` for desktop adaptation.\n\n```shell\n# playground-ignore\n# npm\nnpm i @varlet/touch-emulator\n# yarn\nyarn add @varlet/touch-emulator\n# pnpm\npnpm add @varlet/touch-emulator\n```\n\n```js\n// playground-ignore\nimport '@varlet/touch-emulator'\n```","isInternal":false,"tokens":686,"sizeBytes":2591},{"name":"browserAdaptation.zh-CN.md","path":"packages/varlet-ui/docs/browserAdaptation.zh-CN.md","rawUrl":"https://raw.githubusercontent.com/varletjs/varlet/HEAD/packages/varlet-ui/docs/browserAdaptation.zh-CN.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"# 浏览器适配\n\n### 介绍\n\n组件库提供移动端和桌面端适配方案，\n移动端使用 [postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport) 方案进行适配，\n桌面端使用 `@varlet/touch-emulator` 方案进行适配。\n\n### 移动端适配\n\n#### CSS 单位适配\n\n组件库设计基于 `375px` 宽度设计稿，推荐使用 postcss 插件将 `px` 单位转换成 `vmin` 单位从而实现移动端适配。\n在 `webpack/vite` 项目根路径下创建 `postcss.config.js` 并做如下配置之后 `375px -> 100vmin`。\n\n```shell\n# playground-ignore\n# npm\nnpm i postcss-px-to-viewport -D\n\n# yarn\nyarn add postcss-px-to-viewport -D\n\n# pnpm\npnpm add postcss-px-to-viewport -D\n```\n\n```js\n// playground-ignore\n// postcss.config.js\nmodule.exports = {\n plugins: {\n 'postcss-px-to-viewport': {\n viewportWidth: 375,\n unitPrecision: 6,\n unitToConvert: 'px',\n viewportUnit: 'vmin',\n fontViewportUnit: 'vmin',\n propList: ['*'],\n }\n }\n}\n```\n\n#### 主题包单位适配 (Viewport)\n\n因为主题包是运行时挂载的，不受 postcss 影响，组件库提供了实用工具 `Themes.toViewport` 进行适配，函数返回的主题将默认使用 `375px -> 100vmin` 的规则。\n\n```js\nimport { Themes } from '@varlet/ui'\n\nconst viewportTheme = Themes.toViewport(Themes.md3Dark)\n```\n\n也可以对转换规则进行更改\n\n```js\nimport { Themes } from '@varlet/ui'\n\nconst viewportTheme = Themes.toViewport(Themes.md3Dark, {\n // 默认值为 375\n viewportWidth: 750,\n // 默认值为 'vmin'\n viewportUnit: 'vw',\n // 默认值为 6\n unitPrecision: 4,\n})\n```\n\n#### 主题包单位适配 (Rem)\n\n与 `Viewport` 方案类似\n\n```js\nimport { Themes } from '@varlet/ui'\n\nconst remTheme = Themes.toRem(Themes.md3Dark)\n```\n\n也支持自定义\n\n```js\nimport { Themes } from '@varlet/ui'\n\nconst viewportTheme = Themes.toRem(Themes.md3Dark, {\n // 默认值为 16\n rootFontSize: 32,\n // 默认值为 6\n unitPrecision: 4,\n})\n```\n\n### 桌面端适配\n\n由于组件库交互事件使用 `touch` 事件进行开发，不支持桌面端的 `mouse` 事件，\n推荐使用 `@varlet/touch-emulator` 将 `touch -> mouse` 从而实现桌面端适配。\n\n```shell\n# playground-ignore\n# npm\nnpm i @varlet/touch-emulator\n# yarn\nyarn add @varlet/touch-emulator\n# pnpm\npnpm add @varlet/touch-emulator\n```\n\n```js\n// playground-ignore\nimport '@varlet/touch-emulator'\n```","isInternal":false,"tokens":795,"sizeBytes":2414},{"name":"cli.en-US.md","path":"packages/varlet-ui/docs/cli.en-US.md","rawUrl":"https://raw.githubusercontent.com/varletjs/varlet/HEAD/packages/varlet-ui/docs/cli.en-US.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"# Components Library Tools\n\n### Intro\n\nThe out-of-the-box `Vue3 component library` rapid prototyping tool provides a series of commands and tools to solve the problem of component library development.\n\n### Features\n\n- 📦 Out-of-the-box component library development environment\n- 📦 An out-of-the-box component library compilation tool that supports exporting `esm`, `cjs`, `umd` module codes\n- 🛠️ Configuration file-based component library documentation site, support Baidu statistics and theme customization\n- 🛠️ Supports both `sfc` and `tsx` styles for writing component libraries\n- 📦 Out-of-the-box code inspection tool\n- 📦 Out-of-the-box unit testing tools\n- 📦 Out-of-the-box code publishing tool, publishes to both `npm` and `github`, and automatically generates changelogs\n- 💪 Support for `VSCode` extension development\n- 💪 Support `build svg to web fonts`\n- 💪 Support for `Typescript`\n- 💪 Support `Various themes, including Material Design 2, Material Design 3`\n- 🌍 Support `Internationalization`\n- 🚀 Based on `pnpm`\n\n### Recommended toolchain\n\nUnder Varlet’s current `component-library toolchain`, we recommend combining `@varlet/cli`, [`vite-plus`](https://viteplus.dev/) (`vp`), and [`rattail`](https://rattail.varletjs.org/) (`rt`): `@varlet/cli` covers first-party library workflows (docs, compile, tests, …), `vp` covers lint/format and app/extension build entrypoints aligned with the Oxc/Rolldown stack, and `rattail` covers `clean`, git hooks, `changelog`, `release`, `commit-lint`, and similar automation. Use this trio for new libraries and scaffold upgrades.\n\n| Piece | Role |\n| --- | --- |\n| `@varlet/cli` | First-party Varlet workflows: `create`, `gen`, `dev`, `build`, `preview`, `compile`, `compile:style-vars`, `build:icons`, `test`, … |\n| [`vite-plus`](https://viteplus.dev/) (`vp`) | Lint, format, app/extension `build`/`dev`/`preview`, and other toolchain entrypoints aligned with the Oxc/Rolldown stack |\n| [`rattail`](https://rattail.varletjs.org/) (`rt`) | `clean`, git hooks, `changelog`, `release`, `commit-lint`, and other repo automation |\n\n### Commands pending deprecation\n\nThese commands still run for backward compatibility and may print a deprecation notice. Do not rely on them in new scripts or new projects — prefer `vp` / `rt` (or `vr` where documented). Any future changes will be called out in release notes.\n\n| Command | Use instead |\n| --- | --- |\n| `varlet-cli dev:vite` | `vp dev` |\n| `varlet-cli build:vite` | `vp build` |\n| `varlet-cli dev:extension` | `vp pack --watch` (with a local `vite.config.ts` for the extension) |\n| `varlet-cli build:extension` | `vp pack` |\n| `varlet-cli commit-lint` | `rt commit-lint` |\n| `varlet-cli checklist` | Minimal value; deprecated without replacement |\n| `varlet-cli changelog` | `rt changelog` |\n| `varlet-cli release` | `rt release` |\n\n### Quickstart\n\n`@varlet/cli` has built-in `sfc` and `tsx` style component library project templates, which can be generated directly by the `gen` command.\nIt is convenient for you to directly enter the component library development.\n\n```shell\n# playground-ignore\npnpm add @varlet/cli -g\nvarlet-cli gen\n```\n\n## Advanced customization\n\n### Configuration file\n\nThe `varlet.config.mjs` in the project root directory is used to manage the specific details of the entire component library project.\nThe default configuration can be viewed [varlet.default.config.ts](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.default.config.ts).\nAlso refer to `@varlet/ui` [varlet.config.mjs](https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/varlet.config.mjs).\n\n| Parameter | Description | Type | Default |\n| --- | -------------- | -------- | ---------- |\n| `name` | The full name of the component library, which will be used as the package name | _string_ | `Varlet` |\n| `namespace` | Component library namespace, will be used as component prefix | _string_ | `var` |\n| `host` | Development server host | _number_ | `localhost` |\n| `port` | Development server port | _number_ | `8080` |\n| `proxy` | Development server proxy | _Record\n\n```vue\nimport ComponentResourcesDownload from './components/ComponentResourcesDownload.vue'\n```\n\n### Icons Resources\n\nThe icon resource contains `100+` icons built into the component library.\n\n\n\n```vue\nimport IconResourcesDownload from './components/IconResourcesDownload.vue'\n```\n\n","isInternal":false,"tokens":208,"sizeBytes":944},{"name":"designResources.zh-CN.md","path":"packages/varlet-ui/docs/designResources.zh-CN.md","rawUrl":"https://raw.githubusercontent.com/varletjs/varlet/HEAD/packages/varlet-ui/docs/designResources.zh-CN.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"# 设计资源\n\n### 介绍\n\n我们为设计师提供了设计资源，您可以在本页面选择所需的资源进行下载。\n\n### 组件资源\n\n组件资源包含了`色彩`、`文字`、`组件资源`。目前只提供 Material Design 2 亮色模式的设计资源，其他资源暂未提供，欢迎社区贡献。\n\n\n\n```vue\nimport ComponentResourcesDownload from './components/ComponentResourcesDownload.vue'\n```\n\n### 图标资源\n\n图标资源包含了组件库内置的 `100+` 图标。\n\n\n\n```vue\nimport IconResourcesDownload from './components/IconResourcesDownload.vue'\n```\n\n","isInternal":false,"tokens":237,"sizeBytes":836},{"name":"extension.en-US.md","path":"packages/varlet-ui/docs/extension.en-US.md","rawUrl":"https://raw.githubusercontent.com/varletjs/varlet/HEAD/packages/varlet-ui/docs/extension.en-US.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"# VSCode Extension\n\n### Intro\n\nFor a better development experience, we built a `VSCode plugin`.\n\n### Features\n\n- 🛠️ Support syntax hints and quick completion for all components.\n- 🛠️ Support document address preview and quick jump for all components.\n- 🛠️ Support frame selection of code snippets to quickly open `Playground`.\n- 🛠️ Support full icon preview for icon components.\n- 🌍 Support switching between Chinese and English.\n\n### Install\n\nVsCode Extension Marketplace Search [varlet-vscode-extension](https://marketplace.visualstudio.com/items?itemName=haoziqaq.varlet-vscode-extension).\n\n### How To Use\n\nGrammatical hints appear when you enter the keyword of the component name, and you can quickly complete it after selecting it.\n\n\n\nMoving the mouse to the component name will display the document address of the component, which can be clicked to jump, and it also directly displays the properties, events and slots of the component in the form of a table.\n\n\n\nPress space or attribute keywords in the attribute input range of the label to display attribute completion prompts and attribute information.\n\n\n\nWhen the `name` property of the `Icon` component is input, an icon preview will appear, and syntax completion will be performed after selection.\n\n\n\nFrame the code snippet, and you can quickly open `Playground` in the right-click menu to preview the framed code online.\n\n\n\nSupport switching between Chinese and English, more friendly to Chinese people.\n\n\n\n","isInternal":false,"tokens":601,"sizeBytes":2355},{"name":"extension.zh-CN.md","path":"packages/varlet-ui/docs/extension.zh-CN.md","rawUrl":"https://raw.githubusercontent.com/varletjs/varlet/HEAD/packages/varlet-ui/docs/extension.zh-CN.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"# VSCode 插件\n\n### 介绍\n\n为了更优秀的开发体验，我们构建了一个 `VSCode 插件`。\n\n### 特性\n\n- 🛠️ 支持全组件的语法提示、快速补全。\n- 🛠️ 支持全组件的文档地址预览、快速跳转。\n- 🛠️ 支持框选代码片段，快速打开 `Playground`。\n- 🛠️ 支持图标组件的全图标预览。\n- 🌍 支持中英文切换。\n\n### 安装\n\nVsCode 插件市场搜索 [varlet-vscode-extension](https://marketplace.visualstudio.com/items?itemName=haoziqaq.varlet-vscode-extension)。\n\n### 如何使用\n\n输入组件名称关键字时出现语法提示，选中后进行快速补全。\n\n\n\n鼠标移动到组件名会显示组件的文档地址用来点击跳转，也直接以表格的形式展示组件的属性、事件和插槽。\n\n\n\n在标签的属性输入范围按下空格或属性关键字，显示属性补全提示和属性信息。\n\n\n\n输入 `Icon` 组件的 `name` 属性时出现图标预览，选中后进行语法补全。\n\n\n\n框选代码片段，右键菜单中可以快速打开 `Playground` 对框选的代码进行线上预览。\n\n\n\n支持中英文切换，对中国人更加友好。\n\n\n\n\n","isInternal":false,"tokens":685,"sizeBytes":2028},{"name":"home.en-US.md","path":"packages/varlet-ui/docs/home.en-US.md","rawUrl":"https://raw.githubusercontent.com/varletjs/varlet/HEAD/packages/varlet-ui/docs/home.en-US.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"# Basic Introduce\n\n### Intro\n\nVarlet is a `Vue3` component library based on Material Design 2 and 3, supporting mobile and desktop, developed and maintained by `varletjs` organization.\n\n### Features\n\n- 🚀 Provide 60+ high quality general purpose components\n- 🚀 Components are very lightweight\n- 💪 Developed by Chinese, complete Chinese and English documentation and logistics support\n- 🛠️ Support on-demand introduction\n- 🛠️ Support theme customization\n- 🌍 Support internationalization\n- 💡 Support WebStorm syntax highlighting\n- 💪 Support the SSR\n- 📦 Support [Nuxt Module](https://github.com/varletjs/varlet-nuxt)\n- 💡 Support the Typescript\n- 💪 Make sure more than 90 percent unit test coverage, providing stability assurance\n- 🎨 Supports both Material Design 2 and Material Design 3 design systems\n- 🛠️ Support dark mode\n- 🔧 Provide official VSCode extension\n- ⌨️ Support Accessibility (still improving)\n\n\n### Official Ecosystem\n\nThe following projects are maintained by the official team for a long time.\n\n| Name | Description |\n|------------------------------------------------------------------------------------------------------|--------------------------------------|\n| [@varlet/cli](https://github.com/varletjs/varlet/tree/dev/packages/varlet-cli) | `Vue3 component library rapid prototyping tool` |\n| [@varlet/touch-emulator](https://github.com/varletjs/varlet/tree/dev/packages/varlet-touch-emulator) | `Desktop adapter, so that the mobile component library can run on the desktop` |\n| [@varlet/ui-playground](https://github.com/varletjs/varlet/tree/dev/packages/varlet-ui-playground) | `Varlet component library online editing tool` |\n| [@varlet/import-resolver](https://github.com/varletjs/varlet/tree/dev/packages/varlet-import-resolver) | `A resolver for` [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) ` used to implement Varlet and import it on demand` |\n| [@varlet/preset-unocss](https://github.com/varletjs/varlet/tree/dev/packages/varlet-preset-unocss) | [UnoCss](https://unocss.dev/) `presets for varlet` |\n| [@varlet/preset-tailwindcss](https://github.com/varletjs/varlet/tree/dev/packages/varlet-preset-tailwindcss) | [tailwindcss](https://tailwindcss.com/) `presets for varlet` |\n| [varlet-theme-builder](https://github.com/varletjs/varlet-theme-builder) | `Theme generator for generating theme variables for varlet Material Design 3` | \n| [varlet-vscode-extension](https://github.com/varletjs/varlet/tree/dev/packages/varlet-vscode-extension) | `Varlet Component Library VSCode Plugin` |\n| [vscode-theme-varlet](https://github.com/varletjs/vscode-theme-varlet) | `Varlet VSCode Theme` |\n| [varlet-app-example](https://github.com/varletjs/varlet-app-template) | `Varlet component library app template` |\n| [varlet-install-example](https://github.com/varletjs/varlet-install-example) | `Case collection of Varlet component library and various ecosystem integration` |\n\n### Community Ecosystem\n\nThe following projects are maintained by community personnel, welcome to add.\n\n| Name | Description |\n|----------------------------------------------------------------|-----------------------------------------|\n| [vue-h5-template](https://github.com/sunniejs/vue-h5-template) | `Vue-based mobile template scaffolding, providing mobile presets for Varlet component library` |\n| [create-vite-app](https://github.com/ErKeLost/create-vite-app) | `A desktop template scaffolding based on Vue3, providing desktop presets for Varlet component library` |\n| [vscode-common-intellisense](https://github.com/Simon-He95/vscode-common-intellisense) | `A VS Code extension that provides better intellisense to Varlet developers` |\n| [vue3-varlet-mobile](https://github.com/vue-zone/vue3-varlet-mobile) | `A mobile template based on Vue 3 and Varlet Component Library` |\n\n### PR & Issue\nIf you have any problems during use, you can [issue](https://github.com/varletjs/varlet/issues) them to us on [github](https://github.com/varletjs/varlet),\nwe will deal with it as soon as possible. You can also give us [PR](https://github.com/varletjs/varlet/pulls).\n\n### Open source licenses\nComponent library based on `MIT` licenses.\n\n### Contribution Guide\nSee [Varlet Contribution](https://github.com/varletjs/varlet/blob/dev/.github/CONTRIBUTING.md).\n\n### Thanks to contributors\n\n\n \n","isInternal":false,"tokens":1251,"sizeBytes":5049},{"name":"home.zh-CN.md","path":"packages/varlet-ui/docs/home.zh-CN.md","rawUrl":"https://raw.githubusercontent.com/varletjs/varlet/HEAD/packages/varlet-ui/docs/home.zh-CN.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"# 基本介绍\n\n### 介绍\n\nVarlet 是一个 `Vue3` 组件库，基于 Material Design 2 和 3，支持移动端、桌面端，由 `varletjs` 组织维护。\n\n### 特性\n\n- 🚀 提供 60+ 个高质量通用组件\n- 🚀 组件十分轻量\n- 💪 由国人开发，完善的中英文文档和后勤保障\n- 🛠️ 支持按需引入\n- 🛠️ 支持主题定制\n- 🌍 支持国际化\n- 💡 支持 webstorm 组件属性高亮\n- 💪 支持 SSR\n- 📦 支持 [Nuxt Module](https://github.com/varletjs/varlet-nuxt)\n- 💡 支持 Typescript\n- 💪 确保 90% 以上单元测试覆盖率，提供稳定性保证\n- 🎨 同时支持 Material Design 2 和 Material Design 3 两套设计系统\n- 🛠️ 支持暗黑模式\n- 🔧 提供官方的 VSCode 插件\n- ⌨️ 支持无障碍访问（持续改进中）\n\n### 官方生态\n\n以下项目由官方团队长期维护。\n\n| 名称 | 描述 |\n|------------------------------------------------------------------------------------------------------|--------------------------|\n| [@varlet/cli](https://github.com/varletjs/varlet/tree/dev/packages/varlet-cli) | `Vue3 组件库快速成型工具` |\n| [@varlet/touch-emulator](https://github.com/varletjs/varlet/tree/dev/packages/varlet-touch-emulator) | `桌面端适配器，让移动端组件库可以在桌面端运行` |\n| [@varlet/ui-playground](https://github.com/varletjs/varlet/tree/dev/packages/varlet-ui-playground) | `Varlet 组件库在线编辑工具` |\n| [@varlet/import-resolver](https://github.com/varletjs/varlet/tree/dev/packages/varlet-import-resolver) | [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) `的一个解析器，用于实现 Varlet 按需引入` |\n| [@varlet/preset-unocss](https://github.com/varletjs/varlet/tree/dev/packages/varlet-preset-unocss) | `varlet 的` [UnoCss](https://unocss.dev/) `预设` |\n| [@varlet/preset-tailwindcss](https://github.com/varletjs/varlet/tree/dev/packages/varlet-preset-tailwindcss) | `varlet 的` [tailwindcss](https://tailwindcss.com/) `预设` |\n| [varlet-theme-builder](https://github.com/varletjs/varlet-theme-builder) | `主题生成器，用于为 varlet material design 3 生成主题变量` | \n| [varlet-vscode-extension](https://github.com/varletjs/varlet/tree/dev/packages/varlet-vscode-extension) | `Varlet 组件库 VSCode 插件` |\n| [vscode-theme-varlet](https://github.com/varletjs/vscode-theme-varlet) | `Varlet VSCode 主题` |\n| [varlet-app-example](https://github.com/varletjs/varlet-app-template) | `Varlet 组件库移动端模板` |\n| [varlet-install-example](https://github.com/varletjs/varlet-install-example) | `Varlet 组件库与各种生态集成的案例集合` |\n\n### 社区生态\n\n以下项目由社区人员维护，欢迎补充。\n\n| 名称 | 描述 |\n|----------------------------------------------------------------|-------------------------------------------|\n| [vue-h5-template](https://github.com/sunniejs/vue-h5-template) | `基于 Vue 的移动端模板脚手架，提供了 Varlet 组件库的移动端预设` |\n| [create-vite-app](https://github.com/ErKeLost/create-vite-app) | `基于 Vue3 的桌面端模板脚手架，提供了 Varlet 组件库的桌面端预设` |\n| [vscode-common-intellisense](https://github.com/Simon-He95/vscode-common-intellisense) | `为 Varlet 开发人员提供更好的智能感知的 VSCode 扩展` |\n| [vue3-varlet-mobile](https://github.com/vue-zone/vue3-varlet-mobile) | `基于 Vue 3 和 Varlet 组件库的移动模板` |\n\n### PR & Issue\n使用过程中出现的问题可以到 [github](https://github.com/varletjs/varlet) 来给我们提 [issue](https://github.com/varletjs/varlet/issues)，\n我们会在第一时间处理问题。也可以给我们提 [PR](https://github.com/varletjs/varlet/pulls)，我们也十分欢迎小伙伴们来参与贡献。\n\n### 开源协议\n组件库基于 `MIT` 协议。\n\n### 贡献指南\n详情见 [Varlet 贡献指南](https://github.com/varletjs/varlet/blob/dev/.github/CONTRIBUTING.md)。\n\n### 感谢贡献者们做出的努力\n\n\n \n","isInternal":false,"tokens":1542,"sizeBytes":4981},{"name":"importOnDemand.en-US.md","path":"packages/varlet-ui/docs/importOnDemand.en-US.md","rawUrl":"https://raw.githubusercontent.com/varletjs/varlet/HEAD/packages/varlet-ui/docs/importOnDemand.en-US.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"# Import On Demand\n\n### Intro\n\nOn-demand import avoids the full import of components, which can effectively reduce the size of the release package.\n\n### Automatic Import\n\nvia plugin\n[unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) and\n[unplugin-auto-import](https://github.com/antfu/unplugin-auto-import)\nImplement components to automatically import on demand, This is our most recommended way.\n\n#### Install Plugin\n\n```shell\n# playground-ignore\n# npm\nnpm i @varlet/import-resolver unplugin-vue-components unplugin-auto-import -D\n\n# yarn\nyarn add @varlet/import-resolver unplugin-vue-components unplugin-auto-import -D\n\n# pnpm\npnpm add @varlet/import-resolver unplugin-vue-components unplugin-auto-import -D\n```\n\n#### Vite\n\n```js\n// playground-ignore\n// vite.config.js\nimport vue from '@vitejs/plugin-vue'\nimport components from 'unplugin-vue-components/vite'\nimport autoImport from 'unplugin-auto-import/vite'\nimport { VarletImportResolver } from '@varlet/import-resolver'\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n plugins: [\n vue(),\n components({\n resolvers: [VarletImportResolver()]\n }),\n autoImport({\n resolvers: [VarletImportResolver({ autoImport: true })]\n })\n ]\n})\n```\n\n#### Vue CLI\n```js\n// playground-ignore\n// vue.config.js\nconst Components = require('unplugin-vue-components/webpack')\nconst AutoImport = require('unplugin-auto-import/webpack')\nconst { VarletImportResolver } = require('@varlet/import-resolver')\n\nmodule.exports = {\n configureWebpack: {\n plugins: [\n Components.default({\n resolvers: [VarletImportResolver()]\n }),\n AutoImport.default({\n resolvers: [VarletImportResolver({ autoImport: true })]\n })\n ]\n }\n}\n```\n\n#### Typescript configuration note\n\nIn order to get good IDE syntax highlighting, \nplease make sure that the type declaration files generated by the above two plugins are include by `typescript`,\nwhich can be configured as follows in `tsconfig.json`:\n\n```json\n// playground-ignore\n{\n \"include\": [\"auto-imports.d.ts\", \"components.d.ts\"]\n}\n```\n\n### Manual import\n\nEach component is a `Vue plugin` and consists of `component logic` and `style files`, which are manually imported and used as follows.\n\n```js\n// playground-ignore\nimport App from './App.vue'\nimport { createApp } from 'vue'\nimport { Button } from '@varlet/ui'\nimport '@varlet/ui/es/button/style/index'\n\ncreateApp(App).use(Button)\n```\n\nOR\n\n```html\n// playground-ignore\n\n\n\n \n Scroll to bottom {{ list }} \n
\n\n```\n\n## API\n\n### Props\n\n| Prop | Description | Type | Default |\n| ----- |---------------------------------------------------------------------------------------------------------|--------|-------|\n| `target` | The target to trigger scroll. If it is `undefined`, back top will listen to the nearest scrollable parent. | _string \\| HTMLElement_ | `-` |\n| `visibility-height` | The button will not show until the scroll height reaches this value | _string \\| number_ | `200` |\n| `bottom` | Distance between `BackTop` and page bottom | _string \\| number_ | `-` |\n| `right` | Distance between `BackTop` and page right | _string \\| number_ | `-` |\n| `size` | BackTop button size | _string \\| number_ | `-` |\n| `elevation` | Elevation level, options `true` `false` and level of `0-24` | _string \\| number \\| boolean_| `true` |\n| `duration` | Time to return to top(ms) | _number_ | `300` |\n\n### Events\n\n| Event | Description | arguments |\n| ----- | -------------- | -------- |\n| `click` | Triggered when click | `event: Event` |\n\n### Slots\n\n| Name | Description | SlotProps |\n| ----- | -------------- | -------- |\n| `default` | Custom the content | `-` |\n\n### Style Variables\n\nHere are the CSS variables used by the component. Styles can be customized using [StyleProvider](#/en-US/style-provider).\n\n| Variable | Default |\n| --- | --- |\n| `--back-top-right` | `40px` |\n| `--back-top-bottom` | `40px` |\n| `--back-top-button-size` | `40px` |\n| `--back-top-button-border-radius` | `50%` |\n","isInternal":false,"tokens":502,"sizeBytes":2331},{"name":"zh-CN.md","path":"packages/varlet-ui/src/back-top/docs/zh-CN.md","rawUrl":"https://raw.githubusercontent.com/varletjs/varlet/HEAD/packages/varlet-ui/src/back-top/docs/zh-CN.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"# 回到顶部\n\n### 介绍\n\n返回页面顶部的操作按钮。\n\n### 基本使用\n\n当页面滚动到 `200px` 时，右下角会出现返回顶部按钮。\n\n```html\n\n\n\n \n Scroll to bottom {{ list }} \n
\n\n```\n\n## API\n\n### 属性\n\n| 参数 | 说明 | 类型 | 默认值 |\n|---------------------|-------------------------------------------|------|--------------|\n| `target` | 触发滚动的对象，如果为 `undefined` 会监听距离最近的一个可滚动的祖先节点\t | _string \\| HTMLElement_ | `-` |\n| `visibility-height` | 滚动高度达到此参数值才出现 | _string \\| number_ | `200` |\n| `bottom` | `BackTop` 距离页面底部的距离 | _string \\| number_ | `-` |\n| `right` | `BackTop` 距离页面右侧的距离 | _string \\| number_ | `-` |\n| `size` | `BackTop` 按钮大小 | _string \\| number_ | `-` |\n| `elevation` | 海拔高度，可选值为 `true` `false` 和 `0-24` 的等级 | _string \\| number \\| boolean_| `true` |\n| `duration` | 回到顶部所需时间（ms） | _number_ | `300` |\n\n### 事件\n\n| 事件名 | 说明 | 回调参数 |\n| ----- | -------------- | -------- |\n| `click` | 点击按钮触发的事件 | `event: Event` |\n\n### 插槽\n\n| 名称 | 说明 | 参数 |\n| ----- | -------------- | -------- |\n| `default` | 自定义按钮内容 | `-` |\n\n### 样式变量\n\n以下为组件使用的 css 变量，可以使用 [StyleProvider 组件](#/zh-CN/style-provider) 进行样式定制。\n\n| 变量名 | 默认值 |\n| --- | --- |\n| `--back-top-right` | `40px` |\n| `--back-top-bottom` | `40px` |\n| `--back-top-button-size` | `40px` |\n| `--back-top-button-border-radius` | `50%` |\n","isInternal":false,"tokens":612,"sizeBytes":2100},{"name":"en-US.md","path":"packages/varlet-ui/src/badge/docs/en-US.md","rawUrl":"https://raw.githubusercontent.com/varletjs/varlet/HEAD/packages/varlet-ui/src/badge/docs/en-US.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"# Badge\n\n### Intro\n\nA red dot, number, or text that appears in the upper corner of an icon or text indicates that there is new content or pending information.\n\n### Theme Color Badge\n\nSet different color badge through the `type` attribute.\n\n```html\n\n hello
\n world
\n varlet
\n\n```\n\nWe also support the HSL variables, which makes the transparency of adjusting the color easier.\n\n```html\n\n\n hello
\n\n```\n\n\n# 原子化 CSS 支持\n\n### 介绍\n\n我们提供了常见的 CSS 原子化框架预设，使访问组件库的基础样式变量更加容易，并且一致化了页面响应式断点。\n\n### UnoCSS\n\n#### 安装\n\n```shell\n# playground-ignore\n# npm\nnpm i @varlet/preset-unocss -D\n# yarn\nyarn add @varlet/preset-unocss -D\n# pnpm\npnpm add @varlet/preset-unocss -D\n```\n\n#### 配置\n\n```js\n// playground-ignore\n// uno.config.ts\nimport { defineConfig, presetUno } from 'unocss'\nimport { presetVarlet } from '@varlet/preset-unocss'\n\nexport default defineConfig({\n presets: [presetUno(), presetVarlet()]\n})\n```\n\n#### 更多配置\n\n预设的详细定义[请看这里](https://github.com/varletjs/varlet/blob/main/packages/varlet-preset-unocss/src/index.ts)。\n\n### Tailwindcss\n\n#### 安装\n\n```shell\n# playground-ignore\n# npm\nnpm i @varlet/preset-tailwindcss -D\n# yarn\nyarn add @varlet/preset-tailwindcss -D\n# pnpm\npnpm add @varlet/preset-tailwindcss -D\n```\n\n#### Tailwindcss V3 配置\n\n```js\n// playground-ignore\n// tailwind.config.js\nimport { presetVarlet } from '@varlet/preset-tailwindcss'\n\nexport default {\n content: [\n './index.html',\n './src/**/*.{vue,js,ts,jsx,tsx}',\n ],\n presets: [presetVarlet()]\n}\n```\n\n#### Tailwindcss V4 配置\n\n```js\n// playground-ignore\n// tailwind.config.js\nimport { presetVarlet } from '@varlet/preset-tailwindcss'\n\nexport default {\n presets: [presetVarlet()]\n}\n```\n\n```css\n/** src/style.css */\n@import \"tailwindcss\";\n@config \"../tailwind.config.js\";\n```\n\n#### 更多配置\n\n预设的详细定义[请看这里](https://github.com/varletjs/varlet/blob/main/packages/varlet-preset-tailwindcss/src/index.ts)。\n\n### 使用方式\n\n```html\n\n\n hello
\n world
\n varlet
\n\n```\n\n我们同时也支持了 hsl 变量，这使得调整颜色的透明度变得更加容易。\n\n```html\n\n\n hello
\n\n```\n\n\n# Browser Adaptation\n\n### Intro\n\nThe component library provides mobile and desktop adaptations,\nscheme `varlet-touch-emulator` is used for mobile terminal adaptation,\nscheme `varlet-touch-emulator` is used for mobile terminal adaptation.\n\n### Mobile Adaptation\n\n#### CSS Unit Adaptation\n\nThe component library design is based on the `375px` width design draft. \nIt is recommended to use [postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport) to convert `px` units into `vw` units to achieve mobile terminal adaptation.\nCreate `postcss.config.js` under the `Webpack/Vite` project root path And do the following configuration `375px -> 100vw`.\n\n```shell\n# playground-ignore\n# npm\nnpm i postcss-px-to-viewport -D\n\n# yarn\nyarn add postcss-px-to-viewport -D\n\n# pnpm\npnpm add postcss-px-to-viewport -D\n```\n\n```js\n// playground-ignore\n// postcss.config.js\nmodule.exports = {\n plugins: {\n 'postcss-px-to-viewport': {\n viewportWidth: 375,\n unitPrecision: 6,\n unitToConvert: 'px',\n viewportUnit: 'vmin',\n fontViewportUnit: 'vmin',\n propList: ['*'],\n }\n }\n}\n```\n\n#### Theme Unit Adaptation (Viewport)\n\nBecause the theme is mounted at runtime and is not affected by postcss, the component library provides a utility tool `Themes.toViewport` for adaptation. The theme returned by the function will use the `375px -> 100vmin` rule by default.\n\n```js\nimport { Themes } from '@varlet/ui'\n\nconst viewportTheme = Themes.toViewport(Themes.md3Dark)\n```\n\nYou can also make changes to the conversion rules\n\n```js\nimport { Themes } from '@varlet/ui'\n\nconst viewportTheme = Themes.toViewport(Themes.md3Dark, {\n // defaults 375\n viewportWidth: 750,\n // defaults 'vmin'\n viewportUnit: 'vw',\n // defaults 6\n unitPrecision: 4,\n})\n```\n\n#### Theme Unit Adaptation (Rem)\n\nSimilar to the Viewport solution\n\n```js\nimport { Themes } from '@varlet/ui'\n\nconst remTheme = Themes.toRem(Themes.md3Dark)\n```\n\nOr customize\n\n```js\nimport { Themes } from '@varlet/ui'\n\nconst viewportTheme = Themes.toRem(Themes.md3Dark, {\n // defaults 16\n rootFontSize: 32,\n // defaults 6\n unitPrecision: 4,\n})\n```\n\n### Desktop Adaptation\n\nBecause component library interaction events are developed using `touch` events, `mouse` events on the desktop side are not supported.\nIt is recommended to use `@varlet/touch-emulator` to set `touch -> mouse` for desktop adaptation.\n\n```shell\n# playground-ignore\n# npm\nnpm i @varlet/touch-emulator\n# yarn\nyarn add @varlet/touch-emulator\n# pnpm\npnpm add @varlet/touch-emulator\n```\n\n```js\n// playground-ignore\nimport '@varlet/touch-emulator'\n```\n\n\n# 浏览器适配\n\n### 介绍\n\n组件库提供移动端和桌面端适配方案，\n移动端使用 [postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport) 方案进行适配，\n桌面端使用 `@varlet/touch-emulator` 方案进行适配。\n\n### 移动端适配\n\n#### CSS 单位适配\n\n组件库设计基于 `375px` 宽度设计稿，推荐使用 postcss 插件将 `px` 单位转换成 `vmin` 单位从而实现移动端适配。\n在 `webpack/vite` 项目根路径下创建 `postcss.config.js` 并做如下配置之后 `375px -> 100vmin`。\n\n```shell\n# playground-ignore\n# npm\nnpm i postcss-px-to-viewport -D\n\n# yarn\nyarn add postcss-px-to-viewport -D\n\n# pnpm\npnpm add postcss-px-to-viewport -D\n```\n\n```js\n// playground-ignore\n// postcss.config.js\nmodule.exports = {\n plugins: {\n 'postcss-px-to-viewport': {\n viewportWidth: 375,\n unitPrecision: 6,\n unitToConvert: 'px',\n viewportUnit: 'vmin',\n fontViewportUnit: 'vmin',\n propList: ['*'],\n }\n }\n}\n```\n\n#### 主题包单位适配 (Viewport)\n\n因为主题包是运行时挂载的，不受 postcss 影响，组件库提供了实用工具 `Themes.toViewport` 进行适配，函数返回的主题将默认使用 `375px -> 100vmin` 的规则。\n\n```js\nimport { Themes } from '@varlet/ui'\n\nconst viewportTheme = Themes.toViewport(Themes.md3Dark)\n```\n\n也可以对转换规则进行更改\n\n```js\nimport { Themes } from '@varlet/ui'\n\nconst viewportTheme = Themes.toViewport(Themes.md3Dark, {\n // 默认值为 375\n viewportWidth: 750,\n // 默认值为 'vmin'\n viewportUnit: 'vw',\n // 默认值为 6\n unitPrecision: 4,\n})\n```\n\n#### 主题包单位适配 (Rem)\n\n与 `Viewport` 方案类似\n\n```js\nimport { Themes } from '@varlet/ui'\n\nconst remTheme = Themes.toRem(Themes.md3Dark)\n```\n\n也支持自定义\n\n```js\nimport { Themes } from '@varlet/ui'\n\nconst viewportTheme = Themes.toRem(Themes.md3Dark, {\n // 默认值为 16\n rootFontSize: 32,\n // 默认值为 6\n unitPrecision: 4,\n})\n```\n\n### 桌面端适配\n\n由于组件库交互事件使用 `touch` 事件进行开发，不支持桌面端的 `mouse` 事件，\n推荐使用 `@varlet/touch-emulator` 将 `touch -> mouse` 从而实现桌面端适配。\n\n```shell\n# playground-ignore\n# npm\nnpm i @varlet/touch-emulator\n# yarn\nyarn add @varlet/touch-emulator\n# pnpm\npnpm add @varlet/touch-emulator\n```\n\n```js\n// playground-ignore\nimport '@varlet/touch-emulator'\n```\n\n\n# Components Library Tools\n\n### Intro\n\nThe out-of-the-box `Vue3 component library` rapid prototyping tool provides a series of commands and tools to solve the problem of component library development.\n\n### Features\n\n- 📦 Out-of-the-box component library development environment\n- 📦 An out-of-the-box component library compilation tool that supports exporting `esm`, `cjs`, `umd` module codes\n- 🛠️ Configuration file-based component library documentation site, support Baidu statistics and theme customization\n- 🛠️ Supports both `sfc` and `tsx` styles for writing component libraries\n- 📦 Out-of-the-box code inspection tool\n- 📦 Out-of-the-box unit testing tools\n- 📦 Out-of-the-box code publishing tool, publishes to both `npm` and `github`, and automatically generates changelogs\n- 💪 Support for `VSCode` extension development\n- 💪 Support `build svg to web fonts`\n- 💪 Support for `Typescript`\n- 💪 Support `Various themes, including Material Design 2, Material Design 3`\n- 🌍 Support `Internationalization`\n- 🚀 Based on `pnpm`\n\n### Recommended toolchain\n\nUnder Varlet’s current `component-library toolchain`, we recommend combining `@varlet/cli`, [`vite-plus`](https://viteplus.dev/) (`vp`), and [`rattail`](https://rattail.varletjs.org/) (`rt`): `@varlet/cli` covers first-party library workflows (docs, compile, tests, …), `vp` covers lint/format and app/extension build entrypoints aligned with the Oxc/Rolldown stack, and `rattail` covers `clean`, git hooks, `changelog`, `release`, `commit-lint`, and similar automation. Use this trio for new libraries and scaffold upgrades.\n\n| Piece | Role |\n| --- | --- |\n| `@varlet/cli` | First-party Varlet workflows: `create`, `gen`, `dev`, `build`, `preview`, `compile`, `compile:style-vars`, `build:icons`, `test`, … |\n| [`vite-plus`](https://viteplus.dev/) (`vp`) | Lint, format, app/extension `build`/`dev`/`preview`, and other toolchain entrypoints aligned with the Oxc/Rolldown stack |\n| [`rattail`](https://rattail.varletjs.org/) (`rt`) | `clean`, git hooks, `changelog`, `release`, `commit-lint`, and other repo automation |\n\n### Commands pending deprecation\n\nThese commands still run for backward compatibility and may print a deprecation notice. Do not rely on them in new scripts or new projects — prefer `vp` / `rt` (or `vr` where documented). Any future changes will be called out in release notes.\n\n| Command | Use instead |\n| --- | --- |\n| `varlet-cli dev:vite` | `vp dev` |\n| `varlet-cli build:vite` | `vp build` |\n| `varlet-cli dev:extension` | `vp pack --watch` (with a local `vite.config.ts` for the extension) |\n| `varlet-cli build:extension` | `vp pack` |\n| `varlet-cli commit-lint` | `rt commit-lint` |\n| `varlet-cli checklist` | Minimal value; deprecated without replacement |\n| `varlet-cli changelog` | `rt changelog` |\n| `varlet-cli release` | `rt release` |\n\n### Quickstart\n\n`@varlet/cli` has built-in `sfc` and `tsx` style component library project templates, which can be generated directly by the `gen` command.\nIt is convenient for you to directly enter the component library development.\n\n```shell\n# playground-ignore\npnpm add @varlet/cli -g\nvarlet-cli gen\n```\n\n## Advanced customization\n\n### Configuration file\n\nThe `varlet.config.mjs` in the project root directory is used to manage the specific details of the entire component library project.\nThe default configuration can be viewed [varlet.default.config.ts](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.default.config.ts).\nAlso refer to `@varlet/ui` [varlet.config.mjs](https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/varlet.config.mjs).\n\n| Parameter | Description | Type | Default |\n| --- | -------------- | -------- | ---------- |\n| `name` | The full name of the component library, which will be used as the package name | _string_ | `Varlet` |\n| `namespace` | Component library namespace, will be used as component prefix | _string_ | `var` |\n| `host` | Development server host | _number_ | `localhost` |\n| `port` | Development server port | _number_ | `8080` |\n| `proxy` | Development server proxy | _Record\n\n```vue\nimport ComponentResourcesDownload from './components/ComponentResourcesDownload.vue'\n```\n\n### Icons Resources\n\nThe icon resource contains `100+` icons built into the component library.\n\n\n\n```vue\nimport IconResourcesDownload from './components/IconResourcesDownload.vue'\n```\n\n\n# 设计资源\n\n### 介绍\n\n我们为设计师提供了设计资源，您可以在本页面选择所需的资源进行下载。\n\n### 组件资源\n\n组件资源包含了`色彩`、`文字`、`组件资源`。目前只提供 Material Design 2 亮色模式的设计资源，其他资源暂未提供，欢迎社区贡献。\n\n\n\n```vue\nimport ComponentResourcesDownload from './components/ComponentResourcesDownload.vue'\n```\n\n### 图标资源\n\n图标资源包含了组件库内置的 `100+` 图标。\n\n\n\n```vue\nimport IconResourcesDownload from './components/IconResourcesDownload.vue'\n```\n\n\n# VSCode Extension\n\n### Intro\n\nFor a better development experience, we built a `VSCode plugin`.\n\n### Features\n\n- 🛠️ Support syntax hints and quick completion for all components.\n- 🛠️ Support document address preview and quick jump for all components.\n- 🛠️ Support frame selection of code snippets to quickly open `Playground`.\n- 🛠️ Support full icon preview for icon components.\n- 🌍 Support switching between Chinese and English.\n\n### Install\n\nVsCode Extension Marketplace Search [varlet-vscode-extension](https://marketplace.visualstudio.com/items?itemName=haoziqaq.varlet-vscode-extension).\n\n### How To Use\n\nGrammatical hints appear when you enter the keyword of the component name, and you can quickly complete it after selecting it.\n\n\n\nMoving the mouse to the component name will display the document address of the component, which can be clicked to jump, and it also directly displays the properties, events and slots of the component in the form of a table.\n\n\n\nPress space or attribute keywords in the attribute input range of the label to display attribute completion prompts and attribute information.\n\n\n\nWhen the `name` property of the `Icon` component is input, an icon preview will appear, and syntax completion will be performed after selection.\n\n\n\nFrame the code snippet, and you can quickly open `Playground` in the right-click menu to preview the framed code online.\n\n\n\nSupport switching between Chinese and English, more friendly to Chinese people.\n\n\n\n\n\n# VSCode 插件\n\n### 介绍\n\n为了更优秀的开发体验，我们构建了一个 `VSCode 插件`。\n\n### 特性\n\n- 🛠️ 支持全组件的语法提示、快速补全。\n- 🛠️ 支持全组件的文档地址预览、快速跳转。\n- 🛠️ 支持框选代码片段，快速打开 `Playground`。\n- 🛠️ 支持图标组件的全图标预览。\n- 🌍 支持中英文切换。\n\n### 安装\n\nVsCode 插件市场搜索 [varlet-vscode-extension](https://marketplace.visualstudio.com/items?itemName=haoziqaq.varlet-vscode-extension)。\n\n### 如何使用\n\n输入组件名称关键字时出现语法提示，选中后进行快速补全。\n\n\n\n鼠标移动到组件名会显示组件的文档地址用来点击跳转，也直接以表格的形式展示组件的属性、事件和插槽。\n\n\n\n在标签的属性输入范围按下空格或属性关键字，显示属性补全提示和属性信息。\n\n\n\n输入 `Icon` 组件的 `name` 属性时出现图标预览，选中后进行语法补全。\n\n\n\n框选代码片段，右键菜单中可以快速打开 `Playground` 对框选的代码进行线上预览。\n\n\n\n支持中英文切换，对中国人更加友好。\n\n\n\n\n\n# Basic Introduce\n\n### Intro\n\nVarlet is a `Vue3` component library based on Material Design 2 and 3, supporting mobile and desktop, developed and maintained by `varletjs` organization.\n\n### Features\n\n- 🚀 Provide 60+ high quality general purpose components\n- 🚀 Components are very lightweight\n- 💪 Developed by Chinese, complete Chinese and English documentation and logistics support\n- 🛠️ Support on-demand introduction\n- 🛠️ Support theme customization\n- 🌍 Support internationalization\n- 💡 Support WebStorm syntax highlighting\n- 💪 Support the SSR\n- 📦 Support [Nuxt Module](https://github.com/varletjs/varlet-nuxt)\n- 💡 Support the Typescript\n- 💪 Make sure more than 90 percent unit test coverage, providing stability assurance\n- 🎨 Supports both Material Design 2 and Material Design 3 design systems\n- 🛠️ Support dark mode\n- 🔧 Provide official VSCode extension\n- ⌨️ Support Accessibility (still improving)\n\n\n### Official Ecosystem\n\nThe following projects are maintained by the official team for a long time.\n\n| Name | Description |\n|------------------------------------------------------------------------------------------------------|--------------------------------------|\n| [@varlet/cli](https://github.com/varletjs/varlet/tree/dev/packages/varlet-cli) | `Vue3 component library rapid prototyping tool` |\n| [@varlet/touch-emulator](https://github.com/varletjs/varlet/tree/dev/packages/varlet-touch-emulator) | `Desktop adapter, so that the mobile component library can run on the desktop` |\n| [@varlet/ui-playground](https://github.com/varletjs/varlet/tree/dev/packages/varlet-ui-playground) | `Varlet component library online editing tool` |\n| [@varlet/import-resolver](https://github.com/varletjs/varlet/tree/dev/packages/varlet-import-resolver) | `A resolver for` [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) ` used to implement Varlet and import it on demand` |\n| [@varlet/preset-unocss](https://github.com/varletjs/varlet/tree/dev/packages/varlet-preset-unocss) | [UnoCss](https://unocss.dev/) `presets for varlet` |\n| [@varlet/preset-tailwindcss](https://github.com/varletjs/varlet/tree/dev/packages/varlet-preset-tailwindcss) | [tailwindcss](https://tailwindcss.com/) `presets for varlet` |\n| [varlet-theme-builder](https://github.com/varletjs/varlet-theme-builder) | `Theme generator for generating theme variables for varlet Material Design 3` | \n| [varlet-vscode-extension](https://github.com/varletjs/varlet/tree/dev/packages/varlet-vscode-extension) | `Varlet Component Library VSCode Plugin` |\n| [vscode-theme-varlet](https://github.com/varletjs/vscode-theme-varlet) | `Varlet VSCode Theme` |\n| [varlet-app-example](https://github.com/varletjs/varlet-app-template) | `Varlet component library app template` |\n| [varlet-install-example](https://github.com/varletjs/varlet-install-example) | `Case collection of Varlet component library and various ecosystem integration` |\n\n### Community Ecosystem\n\nThe following projects are maintained by community personnel, welcome to add.\n\n| Name | Description |\n|----------------------------------------------------------------|-----------------------------------------|\n| [vue-h5-template](https://github.com/sunniejs/vue-h5-template) | `Vue-based mobile template scaffolding, providing mobile presets for Varlet component library` |\n| [create-vite-app](https://github.com/ErKeLost/create-vite-app) | `A desktop template scaffolding based on Vue3, providing desktop presets for Varlet component library` |\n| [vscode-common-intellisense](https://github.com/Simon-He95/vscode-common-intellisense) | `A VS Code extension that provides better intellisense to Varlet developers` |\n| [vue3-varlet-mobile](https://github.com/vue-zone/vue3-varlet-mobile) | `A mobile template based on Vue 3 and Varlet Component Library` |\n\n### PR & Issue\nIf you have any problems during use, you can [issue](https://github.com/varletjs/varlet/issues) them to us on [github](https://github.com/varletjs/varlet),\nwe will deal with it as soon as possible. You can also give us [PR](https://github.com/varletjs/varlet/pulls).\n\n### Open source licenses\nComponent library based on `MIT` licenses.\n\n### Contribution Guide\nSee [Varlet Contribution](https://github.com/varletjs/varlet/blob/dev/.github/CONTRIBUTING.md).\n\n### Thanks to contributors\n\n\n \n\n\n\n# 基本介绍\n\n### 介绍\n\nVarlet 是一个 `Vue3` 组件库，基于 Material Design 2 和 3，支持移动端、桌面端，由 `varletjs` 组织维护。\n\n### 特性\n\n- 🚀 提供 60+ 个高质量通用组件\n- 🚀 组件十分轻量\n- 💪 由国人开发，完善的中英文文档和后勤保障\n- 🛠️ 支持按需引入\n- 🛠️ 支持主题定制\n- 🌍 支持国际化\n- 💡 支持 webstorm 组件属性高亮\n- 💪 支持 SSR\n- 📦 支持 [Nuxt Module](https://github.com/varletjs/varlet-nuxt)\n- 💡 支持 Typescript\n- 💪 确保 90% 以上单元测试覆盖率，提供稳定性保证\n- 🎨 同时支持 Material Design 2 和 Material Design 3 两套设计系统\n- 🛠️ 支持暗黑模式\n- 🔧 提供官方的 VSCode 插件\n- ⌨️ 支持无障碍访问（持续改进中）\n\n### 官方生态\n\n以下项目由官方团队长期维护。\n\n| 名称 | 描述 |\n|------------------------------------------------------------------------------------------------------|--------------------------|\n| [@varlet/cli](https://github.com/varletjs/varlet/tree/dev/packages/varlet-cli) | `Vue3 组件库快速成型工具` |\n| [@varlet/touch-emulator](https://github.com/varletjs/varlet/tree/dev/packages/varlet-touch-emulator) | `桌面端适配器，让移动端组件库可以在桌面端运行` |\n| [@varlet/ui-playground](https://github.com/varletjs/varlet/tree/dev/packages/varlet-ui-playground) | `Varlet 组件库在线编辑工具` |\n| [@varlet/import-resolver](https://github.com/varletjs/varlet/tree/dev/packages/varlet-import-resolver) | [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) `的一个解析器，用于实现 Varlet 按需引入` |\n| [@varlet/preset-unocss](https://github.com/varletjs/varlet/tree/dev/packages/varlet-preset-unocss) | `varlet 的` [UnoCss](https://unocss.dev/) `预设` |\n| [@varlet/preset-tailwindcss](https://github.com/varletjs/varlet/tree/dev/packages/varlet-preset-tailwindcss) | `varlet 的` [tailwindcss](https://tailwindcss.com/) `预设` |\n| [varlet-theme-builder](https://github.com/varletjs/varlet-theme-builder) | `主题生成器，用于为 varlet material design 3 生成主题变量` | \n| [varlet-vscode-extension](https://github.com/varletjs/varlet/tree/dev/packages/varlet-vscode-extension) | `Varlet 组件库 VSCode 插件` |\n| [vscode-theme-varlet](https://github.com/varletjs/vscode-theme-varlet) | `Varlet VSCode 主题` |\n| [varlet-app-example](https://github.com/varletjs/varlet-app-template) | `Varlet 组件库移动端模板` |\n| [varlet-install-example](https://github.com/varletjs/varlet-install-example) | `Varlet 组件库与各种生态集成的案例集合` |\n\n### 社区生态\n\n以下项目由社区人员维护，欢迎补充。\n\n| 名称 | 描述 |\n|----------------------------------------------------------------|-------------------------------------------|\n| [vue-h5-template](https://github.com/sunniejs/vue-h5-template) | `基于 Vue 的移动端模板脚手架，提供了 Varlet 组件库的移动端预设` |\n| [create-vite-app](https://github.com/ErKeLost/create-vite-app) | `基于 Vue3 的桌面端模板脚手架，提供了 Varlet 组件库的桌面端预设` |\n| [vscode-common-intellisense](https://github.com/Simon-He95/vscode-common-intellisense) | `为 Varlet 开发人员提供更好的智能感知的 VSCode 扩展` |\n| [vue3-varlet-mobile](https://github.com/vue-zone/vue3-varlet-mobile) | `基于 Vue 3 和 Varlet 组件库的移动模板` |\n\n### PR & Issue\n使用过程中出现的问题可以到 [github](https://github.com/varletjs/varlet) 来给我们提 [issue](https://github.com/varletjs/varlet/issues)，\n我们会在第一时间处理问题。也可以给我们提 [PR](https://github.com/varletjs/varlet/pulls)，我们也十分欢迎小伙伴们来参与贡献。\n\n### 开源协议\n组件库基于 `MIT` 协议。\n\n### 贡献指南\n详情见 [Varlet 贡献指南](https://github.com/varletjs/varlet/blob/dev/.github/CONTRIBUTING.md)。\n\n### 感谢贡献者们做出的努力\n\n\n \n\n\n\n# Import On Demand\n\n### Intro\n\nOn-demand import avoids the full import of components, which can effectively reduce the size of the release package.\n\n### Automatic Import\n\nvia plugin\n[unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) and\n[unplugin-auto-import](https://github.com/antfu/unplugin-auto-import)\nImplement components to automatically import on demand, This is our most recommended way.\n\n#### Install Plugin\n\n```shell\n# playground-ignore\n# npm\nnpm i @varlet/import-resolver unplugin-vue-components unplugin-auto-import -D\n\n# yarn\nyarn add @varlet/import-resolver unplugin-vue-components unplugin-auto-import -D\n\n# pnpm\npnpm add @varlet/import-resolver unplugin-vue-components unplugin-auto-import -D\n```\n\n#### Vite\n\n```js\n// playground-ignore\n// vite.config.js\nimport vue from '@vitejs/plugin-vue'\nimport components from 'unplugin-vue-components/vite'\nimport autoImport from 'unplugin-auto-import/vite'\nimport { VarletImportResolver } from '@varlet/import-resolver'\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n plugins: [\n vue(),\n components({\n resolvers: [VarletImportResolver()]\n }),\n autoImport({\n resolvers: [VarletImportResolver({ autoImport: true })]\n })\n ]\n})\n```\n\n#### Vue CLI\n```js\n// playground-ignore\n// vue.config.js\nconst Components = require('unplugin-vue-components/webpack')\nconst AutoImport = require('unplugin-auto-import/webpack')\nconst { VarletImportResolver } = require('@varlet/import-resolver')\n\nmodule.exports = {\n configureWebpack: {\n plugins: [\n Components.default({\n resolvers: [VarletImportResolver()]\n }),\n AutoImport.default({\n resolvers: [VarletImportResolver({ autoImport: true })]\n })\n ]\n }\n}\n```\n\n#### Typescript configuration note\n\nIn order to get good IDE syntax highlighting, \nplease make sure that the type declaration files generated by the above two plugins are include by `typescript`,\nwhich can be configured as follows in `tsconfig.json`:\n\n```json\n// playground-ignore\n{\n \"include\": [\"auto-imports.d.ts\", \"components.d.ts\"]\n}\n```\n\n### Manual import\n\nEach component is a `Vue plugin` and consists of `component logic` and `style files`, which are manually imported and used as follows.\n\n```js\n// playground-ignore\nimport App from './App.vue'\nimport { createApp } from 'vue'\nimport { Button } from '@varlet/ui'\nimport '@varlet/ui/es/button/style/index'\n\ncreateApp(App).use(Button)\n```\n\nOR\n\n```html\n// playground-ignore\n\n\n\n