@varlet/cli 2.16.0-alpha.1693852447755 → 2.16.0

package/lib/client/index.d.ts

@@ -1,4 +1,5 @@
 import AppType from './appType';
+import { StyleProvider } from '@varlet/ui';
 interface PCLocationInfo {
     language: string;
     menuName: string;
@@ -6,7 +7,6 @@ interface PCLocationInfo {
 }
 export type Theme = 'lightTheme' | 'darkTheme';
 export type StyleVars = Record<string, string>;
-export declare function StyleProvider(styleVars?: StyleVars | null): void;
 export declare function getPCLocationInfo(): PCLocationInfo;
 export declare function getBrowserTheme(): Theme;
 export declare function watchLang(cb: (lang: string) => void, platform?: 'pc' | 'mobile'): void;
@@ -16,4 +16,4 @@ export declare function useRouteListener(cb: () => void): void;
 export declare function watchDarkMode(dark: StyleVars, cb?: (theme: Theme) => void): void;
 export declare function setColorScheme(theme: Theme): void;
 export declare function watchTheme(cb: (theme: Theme, from: 'pc' | 'mobile' | 'default' | 'playground') => void, shouldUnmount?: boolean): void;
-export { AppType };
+export { AppType, StyleProvider };

package/lib/client/index.js

@@ -1,25 +1,8 @@
 import config from '@config';
 import AppType from './appType';
+import { Themes, StyleProvider } from '@varlet/ui';
 import { onMounted, onUnmounted } from 'vue';
-import { kebabCase } from '@varlet/shared';
 import { get } from 'lodash-es';
-const mountedVarKeys = [];
-function formatStyleVars(styleVars) {
-    return Object.entries(styleVars !== null && styleVars !== void 0 ? styleVars : {}).reduce((styles, [key, value]) => {
-        const cssVar = key.startsWith('--') ? key : `--${kebabCase(key)}`;
-        styles[cssVar] = value;
-        return styles;
-    }, {});
-}
-export function StyleProvider(styleVars = {}) {
-    mountedVarKeys.forEach((key) => document.documentElement.style.removeProperty(key));
-    mountedVarKeys.length = 0;
-    const styles = formatStyleVars(styleVars);
-    Object.entries(styles).forEach(([key, value]) => {
-        document.documentElement.style.setProperty(key, value);
-        mountedVarKeys.push(key);
-    });
-}
 export function getPCLocationInfo() {
     var _a;
     const [, language, path] = window.location.hash.split('/');
@@ -87,7 +70,7 @@ export function useRouteListener(cb) {
 export function watchDarkMode(dark, cb) {
     watchTheme((theme) => {
         const siteStyleVars = withSiteConfigNamespace(get(config, theme, {}));
-        const darkStyleVars = Object.assign(Object.assign({}, siteStyleVars), dark);
+        const darkStyleVars = Object.assign(Object.assign(Object.assign({}, siteStyleVars), Themes.dark), dark);
         StyleProvider(theme === 'darkTheme' ? darkStyleVars : siteStyleVars);
         setColorScheme(theme);
         cb === null || cb === void 0 ? void 0 : cb(theme);
@@ -111,4 +94,4 @@ export function watchTheme(cb, shouldUnmount = true) {
     }
     cb(getBrowserTheme(), 'default');
 }
-export { AppType };
+export { AppType, StyleProvider };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "2.16.0-alpha.1693852447755",
+  "version": "2.16.0",
   "type": "module",
   "description": "cli of varlet",
   "bin": {
@@ -67,8 +67,8 @@
     "vite": "4.3.5",
     "vue": "3.3.4",
     "webfont": "^9.0.0",
-    "@varlet/vite-plugins": "2.16.0-alpha.1693852447755",
-    "@varlet/shared": "2.16.0-alpha.1693852447755"
+    "@varlet/shared": "2.16.0",
+    "@varlet/vite-plugins": "2.16.0"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.1",
@@ -83,9 +83,9 @@
     "@types/semver": "^7.3.9",
     "@types/sharp": "0.31.1",
     "rimraf": "^5.0.1",
-    "@varlet/icons": "2.16.0-alpha.1693852447755",
-    "@varlet/ui": "2.16.0-alpha.1693852447755",
-    "@varlet/touch-emulator": "2.16.0-alpha.1693852447755"
+    "@varlet/ui": "2.16.0",
+    "@varlet/icons": "2.16.0",
+    "@varlet/touch-emulator": "2.16.0"
   },
   "peerDependencies": {
     "@vue/runtime-core": "3.3.4",
@@ -98,8 +98,9 @@
     "lodash-es": "^4.17.21",
     "vue": "3.3.4",
     "vue-router": "4.2.0",
-    "@varlet/icons": "2.16.0-alpha.1693852447755",
-    "@varlet/touch-emulator": "2.16.0-alpha.1693852447755"
+    "@varlet/icons": "2.16.0",
+    "@varlet/touch-emulator": "2.16.0",
+    "@varlet/ui": "2.16.0"
   },
   "scripts": {
     "dev": "tsc --watch",

package/site/mobile/App.vue

@@ -149,16 +149,15 @@ export default defineComponent({
     }
 
     const toggleTheme = () => {
-        setCurrentTheme(currentTheme.value === 'darkTheme' ? 'lightTheme' : 'darkTheme')
-        window.postMessage(getThemeMessage(), '*')
+      setCurrentTheme(currentTheme.value === 'darkTheme' ? 'lightTheme' : 'darkTheme')
+      window.postMessage(getThemeMessage(), '*')
 
-        if (!isPhone() && inIframe()) {
-          ;(window.top as any).postMessage(getThemeMessage(), '*')
-        }
+      if (!isPhone() && inIframe()) {
+        ;(window.top as any).postMessage(getThemeMessage(), '*')
       }
+    }
 
     ;(window as any).toggleTheme = toggleTheme
-
     setTheme(config, currentTheme.value)
     window.postMessage(getThemeMessage(), '*')
 

package/site/utils.ts

@@ -1,4 +1,5 @@
 import { get } from 'lodash-es'
+import { Themes } from '@varlet/ui'
 import { StyleProvider, type Theme, withSiteConfigNamespace, setColorScheme } from '@varlet/cli/client'
 
 export interface Menu {
@@ -32,8 +33,7 @@ export function inIframe() {
 
 export function setTheme(config: Record<string, any>, theme: Theme) {
   const styleVars = withSiteConfigNamespace(get(config, theme, {}))
-
-  StyleProvider(styleVars)
+  StyleProvider({ ...styleVars, ...(theme === 'darkTheme' ? Themes.dark : {}) })
   setColorScheme(theme)
 }
 

package/template/generators/config/default/sfc/src/button/Button.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="var-button" :style="{ background: color }" @click="handleClick">
+  <button class="va-button" :style="{ background: color }" @click="handleClick">
     <slot />
   </button>
 </template>
@@ -8,7 +8,7 @@
 import { defineComponent, PropType } from 'vue'
 
 export default defineComponent({
-  name: 'VarButton',
+  name: 'VaButton',
   props: {
     color: {
       type: String,

package/template/generators/config/default/sfc/src/button/button.less

@@ -1,4 +1,4 @@
-.var-button {
+.va-button {
   display: flex;
   padding: 10px;
   background: #3a7afe;

package/template/generators/config/default/sfc/src/button/docs/zh-CN.md

@@ -2,7 +2,7 @@
 
 ### 基本使用
 ```html
-<var-button>按钮起步</var-button>
+<va-button>按钮起步</va-button>
 ```
 
 ```vue
@@ -11,7 +11,7 @@ import BasicUse from '../example/BasicUse'
 
 ### 主题色按钮
 ```html
-<var-button color="#009688">按钮起步</var-button>
+<va-button color="#009688">按钮起步</va-button>
 ```
 
 ```vue

package/template/generators/config/default/sfc/src/button/example/BasicUse.vue

@@ -1,7 +1,7 @@
 <script setup>
-import VarButton from '..'
+import VaButton from '..'
 </script>
 
 <template>
-  <var-button>起步</var-button>
+  <va-button>起步</va-button>
 </template>

package/template/generators/config/default/sfc/src/button/example/ModifyColor.vue

@@ -1,7 +1,7 @@
 <script setup>
-import VarButton from '..'
+import VaButton from '..'
 </script>
 
 <template>
-  <var-button color="#03A9F4">起步</var-button>
+  <va-button color="#03A9F4">起步</va-button>
 </template>

package/template/generators/config/default/sfc/src/button/example/index.vue

@@ -1,12 +1,12 @@
 <script setup>
-import VarButton from '..'
+import VaButton from '..'
 import { AppType } from '@varlet/cli/client'
 </script>
 
 <template>
   <app-type>基本使用</app-type>
-  <var-button>起步</var-button>
+  <va-button>起步</va-button>
 
   <app-type>修改颜色</app-type>
-  <var-button color="#03A9F4">起步</var-button>
+  <va-button color="#03A9F4">起步</va-button>
 </template>

package/template/generators/config/default/tsx/src/button/Button.tsx

@@ -2,7 +2,7 @@ import { defineComponent, PropType } from 'vue'
 import './button.less'
 
 export default defineComponent({
-  name: 'VarButton',
+  name: 'VaButton',
   props: {
     color: {
       type: String,
@@ -18,7 +18,7 @@ export default defineComponent({
       const { color } = props
 
       return (
-        <button class="var-button" style={{ background: color }} onClick={handleClick}>
+        <button class="va-button" style={{ background: color }} onClick={handleClick}>
           {slots.default?.()}
         </button>
       )

package/template/generators/config/default/tsx/src/button/button.less

@@ -1,4 +1,4 @@
-.var-button {
+.va-button {
   display: flex;
   padding: 10px;
   background: #3a7afe;

package/template/generators/config/default/tsx/src/button/docs/zh-CN.md

@@ -2,7 +2,7 @@
 
 ### 基本使用
 ```html
-<var-button>按钮起步</var-button>
+<va-button>按钮起步</va-button>
 ```
 
 ```vue
@@ -11,7 +11,7 @@ import BasicUse from '../example/BasicUse'
 
 ### 主题色按钮
 ```html
-<var-button color="#009688">按钮起步</var-button>
+<va-button color="#009688">按钮起步</va-button>
 ```
 
 ```vue

package/template/generators/config/default/tsx/src/button/example/BasicUse.vue

@@ -1,7 +1,7 @@
 <script setup>
-import VarButton from '..'
+import VaButton from '..'
 </script>
 
 <template>
-  <var-button>起步</var-button>
+  <va-button>起步</va-button>
 </template>

package/template/generators/config/default/tsx/src/button/example/ModifyColor.vue

@@ -1,7 +1,7 @@
 <script setup>
-import VarButton from '..'
+import VaButton from '..'
 </script>
 
 <template>
-  <var-button color="#03A9F4">起步</var-button>
+  <va-button color="#03A9F4">起步</va-button>
 </template>

package/template/generators/config/default/tsx/src/button/example/index.vue

@@ -1,12 +1,12 @@
 <script setup>
-import VarButton from '..'
+import VaButton from '..'
 import { AppType } from '@varlet/cli/client'
 </script>
 
 <template>
   <app-type>基本使用</app-type>
-  <var-button>起步</var-button>
+  <va-button>起步</va-button>
 
   <app-type>修改颜色</app-type>
-  <var-button color="#03A9F4">起步</var-button>
+  <va-button color="#03A9F4">起步</va-button>
 </template>

package/template/generators/config/i18n/sfc/src/button/Button.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="var-button" :style="{ background: color }" @click="handleClick">
+  <button class="va-button" :style="{ background: color }" @click="handleClick">
     {{ pack.button }}
     <slot />
   </button>
@@ -12,7 +12,7 @@ import { defineComponent, PropType } from 'vue'
 import { pack } from '../locale'
 
 export default defineComponent({
-  name: 'VarButton',
+  name: 'VaButton',
   props: {
     color: {
       type: String,

package/template/generators/config/i18n/sfc/src/button/button.less

@@ -1,4 +1,4 @@
-.var-button {
+.va-button {
   display: flex;
   padding: 10px;
   background: #3a7afe;

package/template/generators/config/i18n/sfc/src/button/docs/en-US.md

@@ -2,7 +2,7 @@
 
 ### Basic Use
 ```html
-<var-button>start</var-button>
+<va-button>start</va-button>
 ```
 
 ```vue
@@ -11,7 +11,7 @@ import BasicUse from '../example/BasicUse'
 
 ### Theme Color Button
 ```html
-<var-button color="#009688">start</var-button>
+<va-button color="#009688">start</va-button>
 ```
 
 ```vue

package/template/generators/config/i18n/sfc/src/button/docs/zh-CN.md

@@ -2,7 +2,7 @@
 
 ### 基本使用
 ```html
-<var-button>按钮起步</var-button>
+<va-button>按钮起步</va-button>
 ```
 
 ```vue
@@ -11,7 +11,7 @@ import BasicUse from '../example/BasicUse'
 
 ### 主题色按钮
 ```html
-<var-button color="#009688">按钮起步</var-button>
+<va-button color="#009688">按钮起步</va-button>
 ```
 
 ```vue

package/template/generators/config/i18n/sfc/src/button/example/BasicUse.vue

@@ -1,5 +1,5 @@
 <script setup>
-import VarButton from '..'
+import VaButton from '..'
 import { watchLang } from '@varlet/cli/client'
 import { pack, use } from './locale'
 
@@ -7,5 +7,5 @@ watchLang(use, 'pc')
 </script>
 
 <template>
-  <var-button>{{ pack.start }}</var-button>
+  <va-button>{{ pack.start }}</va-button>
 </template>

package/template/generators/config/i18n/sfc/src/button/example/ModifyColor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import VarButton from '..'
+import VaButton from '..'
 import { watchLang } from '@varlet/cli/client'
 import { pack, use } from './locale'
 
@@ -7,5 +7,5 @@ watchLang(use, 'pc')
 </script>
 
 <template>
-  <var-button color="#03A9F4">{{ pack.start }}</var-button>
+  <va-button color="#03A9F4">{{ pack.start }}</va-button>
 </template>

package/template/generators/config/i18n/sfc/src/button/example/index.vue

@@ -1,5 +1,5 @@
 <script setup>
-import VarButton from '..'
+import VaButton from '..'
 import { watchLang, AppType } from '@varlet/cli/client'
 import { pack, use } from './locale'
 
@@ -8,8 +8,8 @@ watchLang(use)
 
 <template>
   <app-type>{{ pack.basicUse }}</app-type>
-  <var-button>{{ pack.start }}</var-button>
+  <va-button>{{ pack.start }}</va-button>
 
   <app-type>{{ pack.modifyColor }}</app-type>
-  <var-button color="#03A9F4">{{ pack.start }}</var-button>
+  <va-button color="#03A9F4">{{ pack.start }}</va-button>
 </template>

package/template/generators/config/i18n/tsx/src/button/Button.tsx

@@ -5,7 +5,7 @@ import './button.less'
 import { pack } from '../locale'
 
 export default defineComponent({
-  name: 'VarButton',
+  name: 'VaButton',
   props: {
     color: {
       type: String,
@@ -23,7 +23,7 @@ export default defineComponent({
       const { color } = props
 
       return (
-        <button class="var-button" style={{ background: color }} onClick={handleClick}>
+        <button class="va-button" style={{ background: color }} onClick={handleClick}>
           {pack.value.button}
           {slots.default?.()}
         </button>

package/template/generators/config/i18n/tsx/src/button/button.less

@@ -1,4 +1,4 @@
-.var-button {
+.va-button {
   display: flex;
   padding: 10px;
   background: #3a7afe;

package/template/generators/config/i18n/tsx/src/button/docs/en-US.md

@@ -2,7 +2,7 @@
 
 ### Basic Use
 ```html
-<var-button>start</var-button>
+<va-button>start</va-button>
 ```
 
 ```vue
@@ -11,7 +11,7 @@ import BasicUse from '../example/BasicUse'
 
 ### Theme Color Button
 ```html
-<var-button color="#009688">start</var-button>
+<va-button color="#009688">start</va-button>
 ```
 
 ```vue

package/template/generators/config/i18n/tsx/src/button/docs/zh-CN.md

@@ -2,7 +2,7 @@
 
 ### 基本使用
 ```html
-<var-button>按钮起步</var-button>
+<va-button>按钮起步</va-button>
 ```
 
 ```vue
@@ -11,7 +11,7 @@ import BasicUse from '../example/BasicUse'
 
 ### 主题色按钮
 ```html
-<var-button color="#009688">按钮起步</var-button>
+<va-button color="#009688">按钮起步</va-button>
 ```
 
 ```vue

package/template/generators/config/i18n/tsx/src/button/example/BasicUse.vue

@@ -1,5 +1,5 @@
 <script setup>
-import VarButton from '..'
+import VaButton from '..'
 import { watchLang } from '@varlet/cli/client'
 import { pack, use } from './locale'
 
@@ -7,5 +7,5 @@ watchLang(use, 'pc')
 </script>
 
 <template>
-  <var-button>{{ pack.start }}</var-button>
+  <va-button>{{ pack.start }}</va-button>
 </template>

package/template/generators/config/i18n/tsx/src/button/example/ModifyColor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import VarButton from '..'
+import VaButton from '..'
 import { watchLang } from '@varlet/cli/client'
 import { pack, use } from './locale'
 
@@ -7,5 +7,5 @@ watchLang(use, 'pc')
 </script>
 
 <template>
-  <var-button color="#03A9F4">{{ pack.start }}</var-button>
+  <va-button color="#03A9F4">{{ pack.start }}</va-button>
 </template>

package/template/generators/config/i18n/tsx/src/button/example/index.vue

@@ -1,5 +1,5 @@
 <script setup>
-import VarButton from '..'
+import VaButton from '..'
 import { watchLang, AppType } from '@varlet/cli/client'
 import { pack, use } from './locale'
 
@@ -8,8 +8,8 @@ watchLang(use)
 
 <template>
   <app-type>{{ pack.basicUse }}</app-type>
-  <var-button>{{ pack.start }}</var-button>
+  <va-button>{{ pack.start }}</va-button>
 
   <app-type>{{ pack.modifyColor }}</app-type>
-  <var-button color="#03A9F4">{{ pack.start }}</var-button>
+  <va-button color="#03A9F4">{{ pack.start }}</va-button>
 </template>