@varlet/cli 2.22.3 → 3.0.0-alpha.1707916363117

package/README.md

@@ -16,7 +16,7 @@ The out-of-the-box `Vue3 component library` rapid prototyping tool provides a se
 - 💪  Support for `VSCode` extension development
 - 💪  Support `build svg to web fonts`
 - 💪  Support for `Typescript`
-- 💪  Support `Dark Mode`
+- 💪  Support `Various themes, including md2, md3, dark mode`
 - 🌍  Support `Internationalization`
 - 🚀  Based on `pnpm`
 
@@ -40,30 +40,35 @@ The default configuration can be viewed [varlet.default.config.ts](https://githu
 Also refer to `@varlet/ui` [varlet.config.mjs](https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/varlet.config.mjs).
 
 | Parameter | Description | Type | Default |
-| -- | -------------- | -------- | ---------- |
+| --- | -------------- | -------- | ---------- |
 | `name` | The full name of the component library, which will be used as the package name | _string_ | `Varlet` |
-| `namespace` | Component library namespace, which will be used as a component prefix | _string_ | `var` |
+| `namespace` | Component library namespace, will be used as component prefix | _string_ | `var` |
 | `host` | Development server host | _number_ | `localhost` |
 | `port` | Development server port | _number_ | `8080` |
-| `title` | The title of the component library in the documentation | _string_ | `VARLET` |
-| `logo` | The logo of the component library in the documentation | _string_ | `-` |
-| `defaultLanguage` | Documentation default language | _string_ | `zh-CN` |
-| `useMobile` | Whether to show the preview of the right mobile phone | _boolean_ | `false` |
-| `lightTheme` | Light Mode Documentation Theme | _Record<string, any>_ | `-` |
-| `darkTheme` | Dark Mode Documentation Theme | _Record<string, any>_ | `-` |
-| `highlight` | Documentation snippet style related | _{ style: string }_ | `-` |
+| `title` | The title of the component library in the document | _string_ | `VARLET` |
+| `logo` | The logo of the component library in the document | _string_ | `-` |
+| `defaultLanguage` | Document default language | _string_ | `zh-CN` |
+| `defaultLightTheme` | The default light theme | _string_ | `md3LightTheme` |
+| `defaultDarkTheme` | The default dark theme | _string_ | `md3DarkTheme` |
+| `useMobile` | Whether to display the mobile phone preview on the right | _boolean_ | `false` |
+| `themeKey` | The key of the theme in local storage | _string_ | `VARLET_THEME` |
+| `lightTheme` | md2 light mode document theme | _Record<string, any>_ | `-` |
+| `darkTheme` | md2 dark mode document theme | _Record<string, any>_ | `-` |
+| `md3LightTheme` | md3 light mode document theme | _Record<string, any>_ | `-` |
+| `md3DarkTheme` | md3 dark mode document theme | _Record<string, any>_ | `-` |
+| `highlight` | Document code snippet style related | _{ style: string }_ | `-` |
 | `analysis` | Document statistics related | _{ baidu: string }_ | `-` |
-| `pc` | PC-side document structure configuration | _Record<string, any>_ | `-` |
-| `mobile` | Mobile side document structure configuration | _Record<string, any>_ | `-` |
-| `directives` | Directive folder names | _string[]_ | `[]` |
-| `copy` | Copy file options | _[CopyPath[]](https://github.com/varletjs/varlet/blob/dev/packages/varlet-vite-plugins/src/copy.ts)_ | `-` |
-| `icons` | Font icon packaging related configuration | _[VarletConfigIcons](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | `-` |
-| `esbuild` | Esbuild configuration | _[VarletConfigEsbuild](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | `-` |
+| `pc` | PC side document structure configuration | _Record<string, any>_ | `-` |
+| `mobile` | Mobile document structure configuration | _Record<string, any>_ | `-` |
+| `directives` | Component library directive folder name | _string[]_ | `[]` |
+| `copy` | Copy file configuration | _[CopyPath[]](https://github.com/varletjs/varlet/blob/dev/packages/varlet-vite-plugins/src/copy.ts)_ | `- ` |
+| `icons` | Font icon packaging related configurations | _[VarletConfigIcons](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts) _ | `-` |
+| `esbuild` | esbuild configuration | _[VarletConfigEsbuild](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | ` -` |
 
 #### Menu
 
-| 参数 | 说明 | 类型 | 默认值 |
-| -- | -------------- | -------- | ---------- |
+| Parameter | Description | Type | Default |
+| --- | -------------- | -------- | ---------- |
 | `doc` | The document page corresponds to the matching file name, required | _string_ | `-` |
 | `type` | The type of menu, when the type is `1`, it means the category menu, when the type is `2`, the doc field matches the component file under src, when the type is `3`, the doc field matches the md file under docs, required | _MenuTypes_ | `-` |
 | `text` | The text displayed in the menu, English display text can be configured when internationalization is set, required | _Record<string, string>_ | `-` |
@@ -138,6 +143,13 @@ varlet-cli preview
 varlet-cli compile
 ```
 
+#### Compile style vars types declaration file
+
+```shell
+# playground-ignore
+varlet-cli compile:style-vars
+```
+
 #### Run VSCode extension development environment
 
 ```shell

package/README.zh-CN.md

@@ -16,7 +16,7 @@
 - 💪  支持 `VSCode` 插件开发
 - 💪  支持 `字体图标打包`
 - 💪  支持 `Typescript`
-- 💪  支持 `暗黑模式`
+- 💪  支持 `多种主题, 包含 md2、md3、暗黑模式`
 - 🌍  支持 `国际化`
 - 🚀  基于 `pnpm`
 
@@ -48,9 +48,14 @@ varlet-cli gen
 | `title` | 文档中组件库的标题 | _string_ | `VARLET` |
 | `logo` | 文档中组件库的logo | _string_ | `-` |
 | `defaultLanguage` | 文档默认语言 | _string_ | `zh-CN` |
+| `defaultLightTheme` | 默认的亮色主题 | _string_ | `md3LightTheme` |
+| `defaultDarkTheme` | 默认的暗色主题 | _string_ | `md3DarkTheme` |
 | `useMobile` | 是否显示右侧手机预览 | _boolean_ | `false` |
-| `lightTheme` | 亮色模式文档主题 | _Record<string, any>_ | `-` |
-| `darkTheme` | 暗黑模式文档主题 | _Record<string, any>_ | `-` |
+| `themeKey` | 主题在本地存储中的 key | _string_ | `VARLET_THEME` |
+| `lightTheme` | md2 亮色模式文档主题 | _Record<string, any>_ | `-` |
+| `darkTheme` | md2 暗黑模式文档主题 | _Record<string, any>_ | `-` |
+| `md3LightTheme` | md3 亮色模式文档主题 | _Record<string, any>_ | `-` |
+| `md3DarkTheme` | md3 暗黑模式文档主题 | _Record<string, any>_ | `-` |
 | `highlight` | 文档代码片段样式相关 | _{ style: string }_ | `-` |
 | `analysis` | 文档统计相关 | _{ baidu: string }_ | `-` |
 | `pc` | pc 端文档结构配置 | _Record<string, any>_ | `-` |
@@ -58,7 +63,7 @@ varlet-cli gen
 | `directives` | 组件库指令文件夹名称 | _string[]_ | `[]` |
 | `copy` | 复制文件配置 | _[CopyPath[]](https://github.com/varletjs/varlet/blob/dev/packages/varlet-vite-plugins/src/copy.ts)_ | `-` |
 | `icons` | 字体图标打包相关配置 | _[VarletConfigIcons](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | `-` |
-| `esbuild` | Esbuild 配置 | _[VarletConfigEsbuild](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | `-` |
+| `esbuild` | esbuild 配置 | _[VarletConfigEsbuild](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | `-` |
 
 #### Menu
 
@@ -137,6 +142,13 @@ varlet-cli preview
 varlet-cli compile
 ```
 
+#### 构建样式变量类型声明文件
+
+```shell
+# playground-ignore
+varlet-cli compile:style-vars
+```
+
 #### 启动 VSCode 插件开发环境
 
 ```shell

package/lib/client/index.d.ts

@@ -5,7 +5,7 @@ interface PCLocationInfo {
     menuName: string;
     hash: string;
 }
-export type Theme = 'lightTheme' | 'darkTheme';
+export type Theme = 'lightTheme' | 'darkTheme' | 'md3LightTheme' | 'md3DarkTheme';
 export type StyleVars = Record<string, string>;
 export declare function getPCLocationInfo(): PCLocationInfo;
 export declare function getBrowserTheme(): Theme;
@@ -13,7 +13,8 @@ export declare function watchLang(cb: (lang: string) => void, platform?: 'pc' |
 export declare function withSiteConfigNamespace(styleVars: Record<string, any>): StyleVars;
 export declare function watchPlatform(cb: (platform: string) => void): void;
 export declare function useRouteListener(cb: () => void): void;
-export declare function watchDarkMode(dark: StyleVars, cb?: (theme: Theme) => void): void;
+export declare function setTheme(theme: Theme): void;
+export declare function onThemeChange(cb?: (theme: Theme) => void): void;
 export declare function getSiteStyleVars(theme: Theme): StyleVars;
 export declare function setColorScheme(theme: Theme): void;
 export declare function watchTheme(cb: (theme: Theme, from: 'pc' | 'mobile' | 'default' | 'playground') => void, shouldUnmount?: boolean): void;

package/lib/client/index.js

@@ -19,13 +19,13 @@ function getHashSearch() {
 }
 export function getBrowserTheme() {
     const themeKey = get(config, 'themeKey');
-    const darkThemeConfig = get(config, 'darkTheme');
-    if (!darkThemeConfig) {
-        return 'lightTheme';
-    }
+    const defaultLightTheme = get(config, 'defaultLightTheme');
+    const defaultDarkTheme = get(config, 'defaultDarkTheme');
     const storageTheme = window.localStorage.getItem(themeKey);
     if (!storageTheme) {
-        const preferTheme = window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'darkTheme' : 'lightTheme';
+        const preferTheme = window.matchMedia?.('(prefers-color-scheme: dark)').matches
+            ? defaultDarkTheme
+            : defaultLightTheme;
         window.localStorage.setItem(themeKey, preferTheme);
         return preferTheme;
     }
@@ -63,12 +63,21 @@ export function useRouteListener(cb) {
         window.removeEventListener('popstate', cb);
     });
 }
-export function watchDarkMode(dark, cb) {
+const themeMap = {
+    lightTheme: null,
+    darkTheme: Themes.dark,
+    md3LightTheme: Themes.md3Light,
+    md3DarkTheme: Themes.md3Dark,
+};
+export function setTheme(theme) {
+    const siteStyleVars = withSiteConfigNamespace(get(config, theme, {}));
+    const styleVars = { ...siteStyleVars, ...(themeMap[theme] ?? {}) };
+    StyleProvider(styleVars);
+    setColorScheme(theme);
+}
+export function onThemeChange(cb) {
     watchTheme((theme) => {
-        const siteStyleVars = withSiteConfigNamespace(get(config, theme, {}));
-        const darkStyleVars = { ...siteStyleVars, ...Themes.dark, ...dark };
-        StyleProvider(theme === 'darkTheme' ? darkStyleVars : siteStyleVars);
-        setColorScheme(theme);
+        setTheme(theme);
         cb?.(theme);
     });
 }
@@ -76,7 +85,7 @@ export function getSiteStyleVars(theme) {
     return withSiteConfigNamespace(get(config, theme, {}));
 }
 export function setColorScheme(theme) {
-    document.documentElement.style.setProperty('color-scheme', theme === 'darkTheme' ? 'dark' : 'light');
+    document.documentElement.style.setProperty('color-scheme', theme.toLowerCase().includes('dark') ? 'dark' : 'light');
 }
 export function watchTheme(cb, shouldUnmount = true) {
     const handleThemeChange = (event) => {

package/lib/node/bin.js

@@ -68,6 +68,13 @@ program
     const { compile } = await import('./commands/compile.js');
     return compile();
 });
+program
+    .command('compile:style-vars')
+    .description('Compile varlet style vars')
+    .action(async () => {
+    const { styleVars } = await import('./commands/styleVars.js');
+    return styleVars();
+});
 program
     .command('lint')
     .description('Lint code')

package/lib/node/commands/styleVars.d.ts

@@ -0,0 +1 @@
+export declare function styleVars(): void;

package/lib/node/commands/styleVars.js

@@ -0,0 +1,6 @@
+import { compileStyleVars } from '../compiler/compileStyleVars.js';
+import logger from '../shared/logger.js';
+export function styleVars() {
+    compileStyleVars();
+    logger.success('style vars compilation success!');
+}

package/lib/node/config/varlet.config.d.ts

@@ -70,6 +70,10 @@ export interface VarletConfig {
     useMobile?: boolean;
     lightTheme?: Record<string, string>;
     darkTheme?: Record<string, string>;
+    md3LightTheme?: Record<string, string>;
+    md3DarkTheme?: Record<string, string>;
+    defaultLightTheme?: 'lightTheme' | 'md3LightTheme';
+    defaultDarkTheme?: 'darkTheme' | 'md3DarkTheme';
     highlight?: {
         style: string;
     };

package/lib/node/config/varlet.default.config.js

@@ -450,7 +450,12 @@ export default defineConfig({
             github: 'https://github.com/varletjs/varlet',
             changelog: 'https://github.com/varletjs/varlet/blob/main/CHANGELOG.md',
             playground: 'https://varlet.gitee.io/varlet-ui-playground',
-            darkMode: true,
+            themes: [
+                { 'zh-CN': 'Md2 亮色', 'en-US': 'Md2 Light', value: 'lightTheme' },
+                { 'zh-CN': 'Md2 暗色', 'en-US': 'Md2 Dark', value: 'darkTheme' },
+                { 'zh-CN': 'Md3 亮色', 'en-US': 'Md3 Light', value: 'md3LightTheme' },
+                { 'zh-CN': 'Md3 暗色', 'en-US': 'Md3 Dark', value: 'md3DarkTheme' },
+            ],
         },
         clipboard: {
             'zh-CN': '代码已复制到剪切板',
@@ -472,21 +477,27 @@ export default defineConfig({
                 'en-US': 'English',
             },
             github: 'https://github.com/varletjs/varlet',
-            darkMode: true,
+            themes: [
+                { 'zh-CN': 'Md2 亮色', 'en-US': 'Md2 Light', value: 'lightTheme' },
+                { 'zh-CN': 'Md2 暗色', 'en-US': 'Md2 Dark', value: 'darkTheme' },
+                { 'zh-CN': 'Md3 亮色', 'en-US': 'Md3 Light', value: 'md3LightTheme' },
+                { 'zh-CN': 'Md3 暗色', 'en-US': 'Md3 Dark', value: 'md3DarkTheme' },
+            ],
         },
     },
-    themeKey: 'VARLET_THEME',
+    themeKey: 'VARLET_V3_THEME',
+    defaultLightTheme: 'md3LightTheme',
+    defaultDarkTheme: 'md3DarkTheme',
     lightTheme: {
         'color-body': '#fff',
         'color-index-page-background': '#fff',
         'color-index-page-get-started-button': '#3a7afe',
-        'color-index-page-github-button': '#212121',
-        'color-index-page-feature-background': '#fff',
         'color-index-page-logo-mask-background': 'linear-gradient(-45deg, #8baff8 50%, #84e0ff 50%)',
         'color-index-page-second-text-color': 'rgba(60, 60, 60, .7)',
         'color-index-page-divider-color': '#ddd',
+        'card-border-radius': '12px',
+        'code-example-border-radius': '8px',
         'color-bar': '#fff',
-        'color-sub-bar': '#f5f5f5',
         'color-text': '#555',
         'color-sub-text': '#888',
         'color-border': 'rgba(0, 0, 0, 0.12)',
@@ -505,6 +516,11 @@ export default defineConfig({
         'color-pc-language-active-background': '#edf5ff',
         'color-mobile-language-active': '#3a7afe',
         'color-mobile-language-active-background': '#edf5ff',
+        'color-pc-theme-active': '#3a7afe',
+        'color-pc-theme-active-background': '#edf5ff',
+        'color-mobile-theme-active': '#3a7afe',
+        'color-mobile-theme-active-background': '#edf5ff',
+        'color-mobile-body': '#fff',
         'color-hl-background': '#fafafa',
         'color-hl-code': '#58727e',
         'color-hl-border': '#f3f3f3',
@@ -521,14 +537,13 @@ export default defineConfig({
     darkTheme: {
         'color-body': '#121212',
         'color-index-page-background': '#1e1e1e',
-        'color-index-page-get-started-button': '#4a7afe',
-        'color-index-page-github-button': '#303030',
         'color-index-page-feature-background': '#303030',
         'color-index-page-logo-mask-background': 'linear-gradient(-45deg, #729dfc 50%, #6859f4 50%)',
         'color-index-page-second-text-color': 'rgba(255, 255, 255, .75)',
         'color-index-page-divider-color': 'rgba(84, 84, 84, .8)',
+        'card-border-radius': '12px',
+        'code-example-border-radius': '8px',
         'color-bar': '#1e1e1e',
-        'color-sub-bar': '#272727',
         'color-text': '#fff',
         'color-sub-text': '#aaa',
         'color-border': '#333',
@@ -547,6 +562,11 @@ export default defineConfig({
         'color-pc-language-active-background': '#4a7afe20',
         'color-mobile-language-active': '#4a7afe',
         'color-mobile-language-active-background': '#4a7afe20',
+        'color-pc-theme-active': '#4a7afe',
+        'color-pc-theme-active-background': '#4a7afe20',
+        'color-mobile-theme-active': '#4a7afe',
+        'color-mobile-theme-active-background': '#4a7afe20',
+        'color-mobile-body': '#1e1e1e',
         'color-hl-background': '#272727',
         'color-hl-code': '#fff',
         'color-hl-border': '#272727',
@@ -560,6 +580,98 @@ export default defineConfig({
         'color-hl-group-h': '#14a6e9',
         'color-hl-group-i': '#96cbfe',
     },
+    md3LightTheme: {
+        'color-body': '#fff',
+        'color-index-page-background': '#fff',
+        'color-index-page-feature-background': '#fff',
+        'color-index-page-logo-mask-background': 'linear-gradient(-45deg, #8baff8 50%, #84e0ff 50%)',
+        'color-index-page-second-text-color': 'rgba(60, 60, 60, .7)',
+        'color-index-page-divider-color': '#ddd',
+        'card-border-radius': '12px',
+        'code-example-border-radius': '8px',
+        'color-bar': '#fff',
+        'color-text': '#555',
+        'color-sub-text': '#888',
+        'color-border': 'rgba(0, 0, 0, 0.12)',
+        'color-shadow': '#eee',
+        'color-introduce-border': '#6750A4',
+        'color-primary': '#6750A4',
+        'color-link': '#536525',
+        'color-type': '#536525',
+        'color-loading-bar': '#6750A4',
+        'color-side-bar': '#6750A4',
+        'color-side-bar-active-background': '#E8DEF8',
+        'color-app-bar': '#6750A4',
+        'color-nav-button-hover-background': 'rgba(0, 0, 0, 0.08)',
+        'color-mobile-cell-hover': '#6750A4',
+        'color-pc-language-active': '#6750A4',
+        'color-pc-language-active-background': '#E8DEF8',
+        'color-mobile-language-active': '#6750A4',
+        'color-mobile-language-active-background': '#E8DEF8',
+        'color-pc-theme-active': '#6750A4',
+        'color-pc-theme-active-background': '#E8DEF8',
+        'color-mobile-theme-active': '#6750A4',
+        'color-mobile-theme-active-background': '#E8DEF8',
+        'color-mobile-body': '#FEF7FF',
+        'color-hl-background': '#fafafa',
+        'color-hl-code': '#58727e',
+        'color-hl-border': '#f3f3f3',
+        'color-hl-group-a': '#7c7c7c',
+        'color-hl-group-b': '#6750A4',
+        'color-hl-group-c': '#7D5260',
+        'color-hl-group-d': '#B3261E',
+        'color-hl-group-e': '#7D5260',
+        'color-hl-group-f': '#7D5260',
+        'color-hl-group-g': '#7D5260',
+        'color-hl-group-h': '#633B48',
+        'color-hl-group-i': '#633B48',
+    },
+    md3DarkTheme: {
+        'color-body': '#050505',
+        'color-index-page-background': '#1e1e1e',
+        'color-index-page-feature-background': '#303030',
+        'color-index-page-logo-mask-background': 'linear-gradient(-45deg, #729dfc 50%, #6859f4 50%)',
+        'color-index-page-second-text-color': 'rgba(255, 255, 255, .75)',
+        'color-index-page-divider-color': 'rgba(84, 84, 84, .8)',
+        'card-border-radius': '12px',
+        'code-example-border-radius': '8px',
+        'color-bar': '#1e1e1e',
+        'color-text': '#fff',
+        'color-sub-text': '#aaa',
+        'color-border': '#333',
+        'color-shadow': '#090909',
+        'color-introduce-border': '#555',
+        'color-primary': '#D0BCFF',
+        'color-link': '#BACF83',
+        'color-type': '#BACF83',
+        'color-loading-bar': '#D0BCFF',
+        'color-side-bar': '#D0BCFF',
+        'color-side-bar-active-background': '#4A4458',
+        'color-app-bar': '#211F26',
+        'color-nav-button-hover-background': 'rgba(255, 255, 255, 0.08)',
+        'color-mobile-cell-hover': '#D0BCFF',
+        'color-pc-language-active': '#D0BCFF',
+        'color-pc-language-active-background': '#4A4458',
+        'color-mobile-language-active': '#D0BCFF',
+        'color-mobile-language-active-background': '#4A4458',
+        'color-pc-theme-active': '#D0BCFF',
+        'color-pc-theme-active-background': '#4A4458',
+        'color-mobile-theme-active': '#D0BCFF',
+        'color-mobile-theme-active-background': '#4A4458',
+        'color-mobile-body': '#141218',
+        'color-hl-background': '#272727',
+        'color-hl-code': '#fff',
+        'color-hl-border': '#272727',
+        'color-hl-group-a': '#7c7c7c',
+        'color-hl-group-b': '#D0BCFF',
+        'color-hl-group-c': '#EFB8C8',
+        'color-hl-group-d': '#F2B8B5',
+        'color-hl-group-e': '#EFB8C8',
+        'color-hl-group-f': '#EFB8C8',
+        'color-hl-group-g': '#EFB8C8',
+        'color-hl-group-h': '#EFB8C8',
+        'color-hl-group-i': '#EFB8C8',
+    },
     icons: {
         name: 'varlet-icons',
         namespace: 'var-icon',

package/lib/node/index.d.ts

@@ -11,3 +11,4 @@ export * from './commands/preview.js';
 export * from './commands/vite.js';
 export * from './commands/extension.js';
 export * from './commands/checklist.js';
+export * from './commands/styleVars.js';

package/lib/node/index.js

@@ -11,3 +11,4 @@ export * from './commands/preview.js';
 export * from './commands/vite.js';
 export * from './commands/extension.js';
 export * from './commands/checklist.js';
+export * from './commands/styleVars.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "2.22.3",
+  "version": "3.0.0-alpha.1707916363117",
   "type": "module",
   "description": "cli of varlet",
   "bin": {
@@ -64,8 +64,8 @@
     "slash": "^3.0.0",
     "typescript": "^5.1.5",
     "webfont": "11.2.26",
-    "@varlet/shared": "2.22.3",
-    "@varlet/vite-plugins": "2.22.3"
+    "@varlet/shared": "3.0.0-alpha.1707916363117",
+    "@varlet/vite-plugins": "3.0.0-alpha.1707916363117"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.1",
@@ -80,9 +80,9 @@
     "@types/semver": "^7.3.9",
     "@types/sharp": "0.31.1",
     "rimraf": "^5.0.1",
-    "@varlet/ui": "2.22.3",
-    "@varlet/touch-emulator": "2.22.3",
-    "@varlet/icons": "2.22.3"
+    "@varlet/icons": "3.0.0-alpha.1707916363117",
+    "@varlet/touch-emulator": "3.0.0-alpha.1707916363117",
+    "@varlet/ui": "3.0.0-alpha.1707916363117"
   },
   "peerDependencies": {
     "@vue/runtime-core": "3.4.15",
@@ -95,9 +95,9 @@
     "lodash-es": "^4.17.21",
     "vue": "3.4.15",
     "vue-router": "4.2.0",
-    "@varlet/ui": "2.22.3",
-    "@varlet/icons": "2.22.3",
-    "@varlet/touch-emulator": "2.22.3"
+    "@varlet/icons": "3.0.0-alpha.1707916363117",
+    "@varlet/touch-emulator": "3.0.0-alpha.1707916363117",
+    "@varlet/ui": "3.0.0-alpha.1707916363117"
   },
   "scripts": {
     "dev": "tsc --watch",