@varlet/cli 2.22.3 → 3.0.0-alpha.1707916363117

package/site/mobile/App.vue

@@ -20,22 +20,15 @@
         </template>
         <template #right>
           <var-button
-            v-if="darkMode"
+            v-if="themes.length > 1"
+            class="theme-button"
             text
-            round
             color="transparent"
             text-color="#fff"
-            :style="{
-              transform: languages ? 'translateX(-4px)' : 'translateX(-6px)',
-            }"
-            @click="toggleTheme"
+            @click.stop="showThemeMenu = true"
           >
-            <var-icon
-              class="theme"
-              color="#fff"
-              :size="24"
-              :name="currentTheme === 'lightTheme' ? 'white-balance-sunny' : 'weather-night'"
-            />
+            <var-icon name="palette" :size="28" class="palette"/>
+            <var-icon name="chevron-down" class="arrow-down"/>
           </var-button>
           <var-button
             v-if="languages"
@@ -69,6 +62,21 @@
         </var-cell>
       </div>
     </transition>
+
+    <transition name="site-menu">
+      <div class="theme-settings var-elevation--3" v-if="showThemeMenu">
+        <var-cell
+          v-for="t in themes"
+          :key="t.value"
+          class="mobile-theme-cell"
+          :class="[currentTheme === t.value && 'mobile-theme-cell--active']"
+          v-ripple
+          @click="toggleTheme(t.value)"
+        >
+          {{ t[language] }}
+        </var-cell>
+      </div>
+    </transition>
   </div>
 </template>
 
@@ -78,11 +86,12 @@ import { computed,  defineComponent, ref, watch, type Ref, type ComputedRef } fr
 import { useRoute } from 'vue-router'
 import {
   getBrowserTheme,
-  type Theme,
   watchLang,
-  watchTheme
+  watchTheme,
+  setTheme,
+  type Theme,
 } from '@varlet/cli/client'
-import { removeEmpty, setTheme, inIframe, isPhone } from '../utils'
+import { removeEmpty, inIframe, isPhone } from '../utils'
 import { bigCamelize } from '@varlet/shared'
 import { get } from 'lodash-es'
 
@@ -92,8 +101,10 @@ export default defineComponent({
     const route = useRoute()
     const showBackIcon: Ref<boolean> = ref(false)
     const showMenu: Ref<boolean> = ref(false)
+    const showThemeMenu: Ref<boolean> = ref(false)
     const language: Ref<string> = ref('')
     const languages: Ref<Record<string, string>> = ref(get(config, 'mobile.header.i18n'))
+    const themes: Ref<Record<string, any>[]> = ref(get(config, 'mobile.header.themes'))
     const nonEmptyLanguages: ComputedRef<Record<string, string>> = computed(() => removeEmpty(languages.value))
     const redirect = get(config, 'mobile.redirect', '')
     const github: Ref<string> = ref(get(config, 'mobile.header.github'))
@@ -144,13 +155,14 @@ export default defineComponent({
 
     const setCurrentTheme = (theme: Theme) => {
       currentTheme.value = theme
-      setTheme(config, currentTheme.value)
+      setTheme(currentTheme.value)
       window.localStorage.setItem(get(config, 'themeKey'), currentTheme.value)
     }
 
-    const toggleTheme = () => {
-      setCurrentTheme(currentTheme.value === 'darkTheme' ? 'lightTheme' : 'darkTheme')
+    const toggleTheme = (value: Theme) => {
+      setCurrentTheme(value)
       window.postMessage(getThemeMessage(), '*')
+      showThemeMenu.value = false
 
       if (!isPhone() && inIframe()) {
         ;(window.top as any).postMessage(getThemeMessage(), '*')
@@ -158,11 +170,12 @@ export default defineComponent({
     }
 
     ;(window as any).toggleTheme = toggleTheme
-    setTheme(config, currentTheme.value)
+    setTheme(currentTheme.value)
     window.postMessage(getThemeMessage(), '*')
 
     document.body.addEventListener('click', () => {
       showMenu.value = false
+      showThemeMenu.value = false
     })
 
     watchTheme((theme, from) => {
@@ -175,6 +188,7 @@ export default defineComponent({
       github,
       showMenu,
       languages,
+      themes,
       language,
       nonEmptyLanguages,
       currentTheme,
@@ -183,6 +197,7 @@ export default defineComponent({
       back,
       changeLanguage,
       toggleTheme,
+      showThemeMenu,
     }
   },
 })
@@ -197,11 +212,11 @@ export default defineComponent({
 body {
   margin: 0;
   padding: 0;
-  min-height: 100%;
+  min-height: 100vh;
   font-size: 16px;
   font-family: 'Roboto', sans-serif;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  background: var(--site-config-color-bar);
+  background: var(--site-config-color-mobile-body);
   color: var(--site-config-color-text);
   transition: background-color 0.25s, color 0.25s;
 }
@@ -248,6 +263,14 @@ header {
   background: var(--site-config-color-bar);
 }
 
+.theme-settings {
+  position: fixed;
+  z-index: 200;
+  top: 48px;
+  right: 68px;
+  background: var(--site-config-color-bar);
+}
+
 .router-view__block {
   padding: 55px 15px 15px;
 }
@@ -263,6 +286,17 @@ header {
   }
 }
 
+.mobile-theme-cell {
+  color: var(--site-config-color-text) !important;
+  background: var(--site-config-color-bar) !important;
+  cursor: pointer !important;
+
+  &--active {
+    color: var(--site-config-color-mobile-theme-active) !important;
+    background: var(--site-config-color-mobile-theme-active-background) !important;
+  }
+}
+
 .arrow-left {
   font-size: 28px !important;
 }
@@ -271,11 +305,11 @@ header {
   font-size: 28px !important;
 }
 
-.theme {
+.i18n {
   font-size: 24px !important;
 }
 
-.i18n {
+.palette {
   font-size: 24px !important;
 }
 
@@ -289,6 +323,12 @@ header {
   padding-left: 12px !important;
 }
 
+.theme-button {
+  padding-right: 6px !important;
+  margin-right: 4px;
+  padding-left: 12px !important;
+}
+
 .app-bar {
   background: var(--site-config-color-app-bar) !important;
 }

package/site/pc/Layout.vue

@@ -428,8 +428,14 @@ iframe {
         font-weight: normal;
       }
 
+      table strong {
+        border: 1px solid currentColor;
+        padding: 2px 8px;
+        border-radius: 12px;
+      }
+
       .card {
-        border-radius: 6px;
+        border-radius: var(--site-config-card-border-radius);
         background: var(--site-config-color-bar);
         padding: 20px;
         margin-bottom: 30px;

package/site/pc/components/AppHeader.vue

@@ -42,15 +42,30 @@
       <a class="varlet-site-header__link" target="_blank" :href="github" v-ripple v-if="github">
         <var-icon name="github" :size="28"/>
       </a>
-      <div class="varlet-site-header__theme" v-ripple v-if="darkMode" @click="toggleTheme">
-        <var-icon
-          size="26px"
-          :name="currentTheme === 'lightTheme' ? 'white-balance-sunny' : 'weather-night'"
-          :style="{
-            marginBottom: currentTheme === 'darkTheme' && '2px',
-            marginTop: currentTheme === 'lightTheme' && '2px',
-          }"
-        />
+      <div
+        class="varlet-site-header__theme"
+        @mouseenter="isOpenThemeMenu = true"
+        @mouseleave="isOpenThemeMenu = false"
+        v-if="themes.length > 1"
+      >
+        <var-icon name="palette" :size="28" />
+        <var-icon name="chevron-down"/>
+        <transition name="fade">
+          <div
+            class="varlet-site-header__animation-list var-elevation--5"
+            v-show="isOpenThemeMenu"
+            :style="{ pointerEvents: isOpenThemeMenu ? 'auto' : 'none' }"
+          >
+            <var-cell
+              v-for="t in themes"
+              v-ripple
+              :key="t.value"
+              :class="{ 'varlet-site-header__animation-list--active': currentTheme === t.value }"
+              @click="() => toggleTheme(t.value as Theme)"
+            >{{ t[language as keyof typeof t] }}
+            </var-cell>
+          </div>
+        </transition>
       </div>
       <div
         class="varlet-site-header__language"
@@ -86,8 +101,7 @@
 import config from '@config'
 import { ref, computed, defineComponent } from 'vue'
 import { get } from 'lodash-es'
-import { getBrowserTheme, getPCLocationInfo, Theme, watchTheme } from '@varlet/cli/client'
-import { setTheme } from '../../utils'
+import { getBrowserTheme, getPCLocationInfo, Theme, watchTheme, setTheme } from '@varlet/cli/client'
 import { removeEmpty } from '../../utils'
 import { useRouter } from 'vue-router'
 import type { Ref, ComputedRef } from 'vue'
@@ -109,12 +123,14 @@ export default defineComponent({
     const versionItems: Ref<Array<Record<string, any>>> = ref((versions ?? []).find((i: any) => window.location.host.includes(i.name))?.items ?? versions?.[0]?.items ?? [])
     const playground: Ref<string> = ref(get(config, 'pc.header.playground'))
     const github: Ref<string> = ref(get(config, 'pc.header.github'))
+    const themes: Ref<Record<string, any>> = ref(get(config, 'pc.header.themes'))
     const changelog: Ref<string> = ref(get(config, 'pc.header.changelog'))
     const redirect = get(config, 'pc.redirect')
     const darkMode: Ref<boolean> = ref(get(config, 'pc.header.darkMode'))
     const currentTheme = ref(getBrowserTheme())
 
     const isOpenLanguageMenu: Ref<boolean> = ref(false)
+    const isOpenThemeMenu: Ref<boolean> = ref(false)
     const isOpenVersionsMenu: Ref<boolean> = ref(false)
     const router = useRouter()
     const nonEmptyLanguages: ComputedRef<Record<string, string>> = computed(() => removeEmpty(languages.value))
@@ -132,17 +148,18 @@ export default defineComponent({
 
     const setCurrentTheme = (theme: Theme) => {
       currentTheme.value = theme
-      setTheme(config, currentTheme.value)
+      setTheme(currentTheme.value)
       window.localStorage.setItem(get(config, 'themeKey'), currentTheme.value)
     }
 
     const getThemeMessage = () => ({ action: 'theme-change', from: 'pc', data: currentTheme.value })
 
-    const toggleTheme = () => {
-      setCurrentTheme(currentTheme.value === 'darkTheme' ? 'lightTheme' : 'darkTheme')
+    const toggleTheme = (value: Theme) => {
+      setCurrentTheme(value)
 
       window.postMessage(getThemeMessage(), '*')
       notifyThemeChange('mobile')
+      isOpenThemeMenu.value = false
     }
 
     const notifyThemeChange = (target: 'mobile' | 'window') => {
@@ -169,7 +186,7 @@ export default defineComponent({
       }
     })
 
-    setTheme(config, currentTheme.value)
+    setTheme(currentTheme.value)
     notifyThemeChange('window')
 
     return {
@@ -180,12 +197,14 @@ export default defineComponent({
       languages,
       isShowVersion,
       versionItems,
+      themes,
       nonEmptyLanguages,
       playground,
       changelog,
       github,
       isOpenLanguageMenu,
       isOpenVersionsMenu,
+      isOpenThemeMenu,
       darkMode,
       currentTheme,
       open,
@@ -244,21 +263,6 @@ export default defineComponent({
     }
   }
 
-  &__language {
-    border-radius: 3px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    padding: 0 10px;
-    position: relative;
-    cursor: pointer;
-    transition: background-color 0.25s;
-
-    &:hover {
-      background: var(--site-config-color-nav-button-hover-background);
-    }
-  }
-
   &__versions {
     border-radius: 3px;
     height: 40px;
@@ -298,16 +302,31 @@ export default defineComponent({
     }
   }
 
+  &__language {
+    border-radius: 3px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    position: relative;
+    cursor: pointer;
+    transition: background-color 0.25s;
+
+    &:hover {
+      background: var(--site-config-color-nav-button-hover-background);
+    }
+  }
+
   &__theme {
-    border-radius: 50%;
-    width: 42px;
-    height: 42px;
+    border-radius: 3px;
+    height: 40px;
     display: flex;
-    justify-content: center;
     align-items: center;
+    padding: 0 10px;
+    position: relative;
     cursor: pointer;
     transition: background-color 0.25s;
-    margin-right: 4px;
+    margin-right: 6px;
 
     &:hover {
       background: var(--site-config-color-nav-button-hover-background);
@@ -338,6 +357,30 @@ export default defineComponent({
     }
   }
 
+  &__theme-animation-list {
+    background: var(--site-config-color-bar);
+    cursor: pointer;
+    color: var(--site-config-color-text);
+    border-radius: 2px;
+    position: absolute;
+    top: 40px;
+    left: -20px;
+
+    .var-cell {
+      width: 100px !important;
+      color: var(--site-config-color-text);
+
+      &__content {
+        color: inherit !important;
+      }
+    }
+
+    &--active {
+      background: var(--site-config-color-pc-theme-active-background) !important;
+      color: var(--site-config-color-pc-theme-active) !important;
+    }
+  }
+
   &__animation-versions {
     left: -7px;
   }

package/site/pc/components/code-example/CodeExample.vue

@@ -93,7 +93,7 @@ export default defineComponent({
     const toPlayground = () => {
       const codeText = code.value?.innerText ?? ''
       const file = { 'App.vue': codeText }
-      const initialTheme = getBrowserTheme().replace('Theme', '')
+      const initialTheme = getBrowserTheme()
 
       context.showPlayground = true
       context.playgroundURL = `${playground.value}/?initialTheme=${initialTheme}#${utoa(JSON.stringify(file))}`

package/site/pc/components/code-example/codeExample.less

@@ -30,7 +30,7 @@
   &__code {
     transition: all .25s;
     overflow: hidden;
-    border-radius: 4px;
+    border-radius: var(--site-config-code-example-border-radius);
   }
 
   &--scroller {

package/site/pc/pages/index/index.vue

@@ -7,10 +7,11 @@ import { useRoute, useRouter } from 'vue-router'
 import {
   getPCLocationInfo,
   watchTheme,
+  onThemeChange,
   getBrowserTheme,
+  setTheme,
   type Theme
 } from '@varlet/cli/client'
-import { setTheme } from '../../../utils'
 
 const route = useRoute()
 const router = useRouter()
@@ -32,7 +33,7 @@ const getThemeMessage = () => ({ action: 'theme-change', from: 'pc', data: curre
 
 const setCurrentTheme = (theme: Theme) => {
   currentTheme.value = theme
-  setTheme(config, currentTheme.value)
+  setTheme(currentTheme.value)
   window.localStorage.setItem(get(config, 'themeKey'), currentTheme.value)
 }
 
@@ -48,7 +49,7 @@ const to = (url: string) => {
   window.open(url)
 }
 
-setTheme(config, currentTheme.value)
+setTheme(currentTheme.value)
 
 window.postMessage(getThemeMessage(), '*')
 
@@ -56,8 +57,10 @@ watchTheme((theme, from) => {
   from === 'mobile' && setCurrentTheme(theme)
 })
 
+onThemeChange()
+
 watch(() => route.path, () => {
-  language.value =  getPCLocationInfo().language
+  language.value = getPCLocationInfo().language
   setLocale()
 }, { immediate: true })
 </script>
@@ -79,7 +82,7 @@ watch(() => route.path, () => {
             <var-button class="varlet-doc-index__link-button" type="primary" style="line-height: 1.2" @click="getStar">
             {{ indexPage.started[language] }}
             </var-button>
-            <var-button class="varlet-doc-index__github-button" type="primary" style="line-height: 1.2" @click="toGithub">
+            <var-button class="varlet-doc-index__github-button" style="line-height: 1.2" @click="toGithub">
               {{ indexPage.viewOnGithub[language] }}
             </var-button>
           </var-space>
@@ -239,7 +242,6 @@ watch(() => route.path, () => {
     font-size: 19px !important;
     transition: all .2s !important;
     margin-top: 38px !important;
-    background: var(--site-config-color-index-page-get-started-button) !important;
   }
 
   &__github-button {
@@ -248,7 +250,6 @@ watch(() => route.path, () => {
     font-size: 19px !important;
     transition: all .2s !important;
     margin-top: 38px !important;
-    background: var(--site-config-color-index-page-github-button) !important;
   }
 
   &__features {
@@ -262,7 +263,7 @@ watch(() => route.path, () => {
     width: 300px;
     margin: 12px;
     padding: 20px;
-    border-radius: 10px;
+    border-radius: 12px;
     background: var(--site-config-color-index-page-feature-background);
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   }
@@ -306,7 +307,7 @@ watch(() => route.path, () => {
     width: 300px;
     margin: 12px;
     padding: 30px 20px;
-    border-radius: 10px;
+    border-radius: 12px;
     background: var(--site-config-color-index-page-feature-background);
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 

package/site/utils.ts

@@ -31,12 +31,6 @@ export function inIframe() {
   return window.self !== window.top
 }
 
-export function setTheme(config: Record<string, any>, theme: Theme) {
-  const styleVars = withSiteConfigNamespace(get(config, theme, {}))
-  StyleProvider({ ...styleVars, ...(theme === 'darkTheme' ? Themes.dark : {}) })
-  setColorScheme(theme)
-}
-
 export function utoa(data: string): string {
   return btoa(unescape(encodeURIComponent(data)))
 }

package/template/create/example/locale/_index.ts

@@ -2,7 +2,7 @@ import { Locale } from '@varlet/ui'
 import zhCN from './zh-CN'
 import enUS from './en-US'
 
-const { add, use: exampleUse, pack, packs, merge } = Locale.useLocale()
+const { add, use: exampleUse, t, merge } = Locale.useLocale()
 
 const use = (lang: string) => {
   Locale.use(lang)
@@ -11,7 +11,7 @@ const use = (lang: string) => {
 
 Locale.add('zh-CN', Locale.zhCN)
 Locale.add('en-US', Locale.enUS)
-add('zh-CN', zhCN as any)
-add('en-US', enUS as any)
+add('zh-CN', zhCN)
+add('en-US', enUS)
 
-export { add, pack, packs, merge, use }
+export { add, t, merge, use }

package/template/create/example/locale/index.ts

@@ -7,18 +7,18 @@ import zhCN from './zh-CN'
 import enUS from './en-US'
 import { useLocale, add as _add, use as _use } from '../../../locale'
 
-const { add, use: exampleUse, pack, packs, merge } = useLocale()
+const { add, use: exampleUse, t, merge } = useLocale()
 
 const use = (lang: string) => {
   _use(lang)
   exampleUse(lang)
 }
 
-export { add, pack, packs, merge, use }
+export { add, t, merge, use }
 
 // lib
 _add('zh-CN', _zhCN)
 _add('en-US', _enCN)
 // mobile example doc
-add('zh-CN', zhCN as any)
-add('en-US', enUS as any)
+add('zh-CN', zhCN)
+add('en-US', enUS)

package/template/generators/config/i18n/base/types/locale.d.ts

@@ -1,21 +1,25 @@
 import type { Ref } from 'vue'
 
-export type Pack = {
+export type Message = {
   button: string
+
+  [key: PropertyKey]: any
 }
 
 interface Locale {
-  packs: Record<string, Partial<Pack>>
-  pack: Ref<Partial<Pack>>
-  add(lang: string, pack: Partial<Pack>): void
+  messages: Record<string, Partial<Message>>
+  currentMessage: Ref<Partial<Message>>
+  add(lang: string, message: Partial<Message>): void
   use(lang: string): void
-  merge(lang: string, pack: Partial<Pack>): void
-  useLocale<T = Pack>(): {
-    packs: Record<string, Partial<T>>
-    pack: Ref<Partial<T>>
-    add(lang: string, pack: Partial<T> & { lang?: string }): void
+  merge(lang: string, message: Partial<Message>): void
+  t(id: string): string
+  useLocale<T = Message>(): {
+    messages: Record<string, Partial<T>>
+    currentMessage: Ref<Partial<T>>
+    add(lang: string, message: Partial<T> & { lang?: string }): void
     use(lang: string): void
-    merge(lang: string, pack: Partial<T>): void
+    merge(lang: string, message: Partial<T>): void
+    t(id: string): string
   }
 }
 

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

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

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

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

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

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

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

@@ -6,18 +6,18 @@ import zhCN from './zh-CN'
 import enUS from './en-US'
 import { useLocale, add as _add, use as _use } from '../../../locale'
 
-const { add, use: exampleUse, pack, packs, merge } = useLocale()
+const { add, use: exampleUse, t, merge } = useLocale()
 
 const use = (lang: string) => {
   _use(lang)
   exampleUse(lang)
 }
 
-export { add, pack, packs, merge, use }
+export { add, t, merge, use }
 
 // lib
 _add('zh-CN', _zhCN)
 _add('en-US', _enCN)
 // mobile example doc
-add('zh-CN', zhCN as any)
-add('en-US', enUS as any)
+add('zh-CN', zhCN)
+add('en-US', enUS)