@varlet/cli 1.27.20 → 2.0.0-alpha.1663742071515

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

@@ -1,44 +1,23 @@
 <script setup lang="ts">
 import AnimationBox from '../../components/AnimationBox.vue'
 import config from '@config'
-import VarSiteButton from '../../../components/button'
-import VarSiteIcon from '../../../components/icon'
 import { get } from 'lodash-es'
-import { ref, watch, computed } from 'vue'
+import { ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { getBrowserThemes, setThemes } from '../../../utils'
-import { getPCLocationInfo, watchThemes } from '@varlet/cli/site/utils'
-import en_US from './locale/en-US'
-import zh_CN from './locale/zh-CN'
-import type { Ref, ComputedRef } from 'vue'
+import { getBrowserTheme, setTheme, Theme } from "../../../utils";
+import { getPCLocationInfo, watchTheme } from '@varlet/cli/site/utils'
+import type { Ref } from 'vue'
 
 const route = useRoute()
 const router = useRouter()
-const packs = {
-  'zh-CN': zh_CN,
-  'en-US': en_US,
-} as any
 
 const github = get(config, 'pc.header.github')
-const themesKey = get(config, 'themesKey')
-const currentThemes = ref(getBrowserThemes(themesKey))
+const currentTheme = ref(getBrowserTheme())
 const darkMode: Ref<boolean> = ref(get(config, 'pc.header.darkMode'))
 const title: Ref<string> = ref(get(config, 'title'))
 const language: Ref<string> = ref(get(config, 'defaultLanguage'))
 const languages: Ref<Record<string, string>> = ref(get(config, 'pc.header.i18n'))
-const pack: Ref<Record<string, string>> = ref({})
-
-const description: ComputedRef<string> = computed(() => {
-  const { indexPage = {} } = get(config, 'pc')
-
-  return indexPage?.description?.[language.value] || pack.value.description
-})
-
-const started: ComputedRef<string> = computed(() => {
-  const { indexPage = {} } = get(config, 'pc')
-
-  return indexPage?.started?.[language.value] || pack.value.started
-})
+const indexPage: Ref<Record<string, any>> = get(config, 'pc.indexPage')
 
 const goGithub = () => {
   window.open(github)
@@ -48,18 +27,18 @@ const getStar = () => {
   router.push(`/${language.value}/home`)
 }
 
-const getThemesMessage = () => ({ action: 'themesChange', from: 'pc', data: currentThemes.value })
+const getThemeMessage = () => ({ action: 'theme-change', from: 'pc', data: currentTheme.value })
 
-const setCurrentThemes = (themes: 'themes' | 'darkThemes') => {
-  currentThemes.value = themes
-  setThemes(config, currentThemes.value)
-  window.localStorage.setItem(themesKey, currentThemes.value)
+const setCurrentTheme = (theme: Theme) => {
+  currentTheme.value = theme
+  setTheme(config, currentTheme.value)
+  window.localStorage.setItem(get(config, 'themeKey'), currentTheme.value)
 }
 
 const toggleTheme = () => {
-  setCurrentThemes(currentThemes.value === 'darkThemes' ? 'themes' : 'darkThemes')
-  window.postMessage(getThemesMessage(), '*')
-    ; (document.getElementById('mobile') as HTMLIFrameElement)?.contentWindow!.postMessage(getThemesMessage(), '*')
+  setCurrentTheme(currentTheme.value === 'darkTheme' ? 'lightTheme' : 'darkTheme')
+  window.postMessage(getThemeMessage(), '*')
+  ;(document.getElementById('mobile') as HTMLIFrameElement)?.contentWindow!.postMessage(getThemeMessage(), '*')
 }
 
 const setLocale = () => {
@@ -67,7 +46,6 @@ const setLocale = () => {
   if (!lang) return
 
   language.value = lang
-  pack.value = packs[lang]
   document.title = get(config, 'pc.title')[lang] as string
 }
 
@@ -81,61 +59,68 @@ const toggleLanguages = () => {
   router.replace(replaceStr)
 }
 
-setThemes(config, currentThemes.value)
+setTheme(config, currentTheme.value)
 
-window.postMessage(getThemesMessage(), '*')
+window.postMessage(getThemeMessage(), '*')
 
-watchThemes((themes, from) => {
-  from === 'mobile' && setCurrentThemes(themes)
+watchTheme((theme, from) => {
+  from === 'mobile' && setCurrentTheme(theme)
 })
 
 watch(() => route.path, setLocale, { immediate: true })
 </script>
 
 <template>
-  <div class="home-page">
-    <div class="slash-box box-1"></div>
-    <div class="slash-box box-2"></div>
-    <div class="slash-box box-3"></div>
-    <div class="slash-box box-4"></div>
-    <div class="slash-box box-5"></div>
-    <div class="profile-container">
-      <div class="container-box">
-        <div class="description-container">
-          <animation-box class="logo-box" />
-          <div class="base-title">{{ title }}</div>
-        </div>
-        <div class="base-description">{{ description }}</div>
-
-        <div class="button-group">
-          <var-site-button class="common-button github-button" block @click="goGithub">
-            <div class="block-button-content">
-              <span>GITHUB</span>
-              <var-site-icon style="margin-left: 10px" name="github" size="24px" />
-            </div>
-          </var-site-button>
-          <var-site-button class="common-button extra-button margin-left" text v-if="darkMode" @click="toggleTheme">
-            <var-site-icon size="24px" :name="currentThemes === 'themes' ? 'white-balance-sunny' : 'weather-night'" />
-          </var-site-button>
-        </div>
+  <div class="varlet-doc-index">
+    <div class="varlet-doc-index__layout">
+      <div class="varlet-doc-index__logo-container">
+        <div class="varlet-doc-index__logo-background-mask"></div>
+        <animation-box class="varlet-doc-index__logo" />
+      </div>
+
+      <div class="varlet-doc-index__title">{{ title }}</div>
+      <div class="varlet-doc-index__description">{{ indexPage.description[language] }}</div>
+      <div class="varlet-doc-index__link-button-group">
+        <var-button class="varlet-doc-index__link-button" text outline @click="goGithub">
+          <var-icon name="github" size="24px" />
+        </var-button>
+        <var-button class="varlet-doc-index__link-button" text outline v-if="darkMode" @click="toggleTheme">
+          <var-icon size="24px" :name="currentTheme === 'lightTheme' ? 'white-balance-sunny' : 'weather-night'" />
+        </var-button>
+        <var-button
+          class="varlet-doc-index__link-button"
+          text
+          outline
+          v-if="languages"
+          @click="toggleLanguages"
+        >
+          <var-icon name="translate" size="24px" />
+        </var-button>
+        <var-button class="varlet-doc-index__link-button" type="primary" style="line-height: 1.2" @click="getStar">
+          <span class="varlet-doc-index__link-button-text">{{ indexPage.started[language] }}</span>
+          <var-icon style="transform: rotate(-90deg)" name="arrow-down" size="24px" />
+        </var-button>
+      </div>
 
-        <div class="button-group">
-          <var-site-button type="primary" class="common-button primary-button" block @click="getStar">
-            <div class="block-button-content">
-              <span>{{ started }}</span>
-              <var-site-icon style="margin-left: 10px; transform: rotate(-90deg)" name="arrow-down" size="24px" />
-            </div>
-          </var-site-button>
-          <var-site-button
-            class="common-button extra-button margin-left"
-            text
-            v-if="languages"
-            @click="toggleLanguages"
-          >
-            <var-site-icon name="translate" size="24px" />
-          </var-site-button>
+      <div class="varlet-doc-index__features" v-if="indexPage.features">
+        <div class="varlet-doc-index__feature" v-for="feature in indexPage.features">
+          <div class="varlet-doc-index__feature-name">{{ feature.name[language] }}</div>
+          <div class="varlet-doc-index__feature-description">{{ feature.description[language] }}</div>
         </div>
       </div>
+
+      <div class="varlet-doc-index__contributors" v-if="indexPage.contributors">
+        <div class="varlet-doc-index__contributors-title">{{ indexPage.contributors.label[language] }}</div>
+
+        <a class="varlet-doc-index__contributors-link" :href="indexPage.contributors.link">
+          <img class="varlet-doc-index__contributors-image" :src="indexPage.contributors.image">
+        </a>
+      </div>
+
+      <div class="varlet-doc-index__footer">
+        <div class="varlet-doc-index__license">{{ indexPage.license[language] }}</div>
+        <div class="varlet-doc-index__copyright">{{ indexPage.copyright[language] }}</div>
+      </div>
     </div>
   </div>
 </template>

package/site/pc/pages/index/locale/en-US.ts

@@ -1,5 +1 @@
-export default {
-  started: 'GET STARTED',
-  description: 'Varlet is a Material design mobile component library developed based on Vue3, developed and maintained by partners in the community. ' +
-    'Support Typescript, import on demand, dark mode, theme customization, internationalization, and provide VSCode plugin to ensure a good development experience',
-}
+// this file used to generate route path ('/en-US/index')

package/site/pc/pages/index/locale/zh-CN.ts

@@ -1,5 +1 @@
-export default {
-  started: '起步',
-  description: 'Varlet 是一个基于 Vue3 开发的 Material 风格移动端组件库，' +
-    '全面拥抱 Vue3 生态，由社区团队维护。支持 Typescript、按需引入、暗黑模式、主题定制、国际化，并提供 VSCode 插件保障良好的开发体验',
-}
+// this file used to generate route path ('/zh-CN/index')

package/site/useProgress.ts

@@ -1,24 +1,21 @@
 import Progress from './components/progress'
-import { reactive } from 'vue'
 import config from '@config'
-import { getBrowserThemes, mountInstance, watchThemes } from './utils'
+import { reactive } from 'vue'
+import { getBrowserTheme, mountInstance, Theme, watchTheme } from "./utils";
 import { get } from 'lodash-es'
 
-function getColor(themes?: 'themes' | 'darkThemes') {
-  const themesKey = get(config, 'themesKey')
-
-  return get(config, `${themes ?? getBrowserThemes(themesKey)}.color-progress`)
+function getColor(theme?: Theme) {
+  return get(config, `${theme ?? getBrowserTheme()}.color-progress`)
 }
 
-function getTrackColor(themes?: 'themes' | 'darkThemes') {
-  const themesKey = get(config, 'themesKey')
-
-  return get(config, `${themes ?? getBrowserThemes(themesKey)}.color-progress-track`)
+function getTrackColor(theme?: Theme) {
+  return get(config, `${theme ?? getBrowserTheme()}.color-progress-track`)
 }
 
 export function useProgress() {
   let timer: number
-  let currentThemes: 'themes' | 'darkThemes'
+  let currentTheme: Theme
+
   const trackColor = getTrackColor()
   const color = getColor()
 
@@ -36,10 +33,10 @@ export function useProgress() {
     value: 0,
   })
 
-  watchThemes((themes) => {
-    currentThemes = themes
-    props.trackColor = getTrackColor(themes)
-    props.color = props.value === 100 ? getTrackColor(themes) : getColor(themes)
+  watchTheme((theme) => {
+    currentTheme = theme
+    props.trackColor = getTrackColor(theme)
+    props.color = props.value === 100 ? getTrackColor(theme) : getColor(theme)
   }, false)
 
   const changeValue = () => {
@@ -56,13 +53,13 @@ export function useProgress() {
 
   const start = () => {
     props.value = 0
-    setTimeout(() => (props.color = getColor(currentThemes)), 200)
+    setTimeout(() => (props.color = getColor(currentTheme)), 200)
     changeValue()
   }
 
   const end = () => {
     props.value = 100
-    setTimeout(() => (props.color = getTrackColor(currentThemes)), 300)
+    setTimeout(() => (props.color = getTrackColor(currentTheme)), 300)
     window.clearTimeout(timer)
   }
 

package/site/utils.ts

@@ -1,6 +1,7 @@
 import { onMounted, onUnmounted } from 'vue'
 import { get } from 'lodash-es'
 import { formatStyleVars } from './components/utils/elements'
+import config from '@config'
 
 export * from './components/utils/components'
 export * from './components/utils/elements'
@@ -86,26 +87,26 @@ export function watchPlatform(cb: (platform: string) => void) {
   handleHashchange()
 }
 
-export function watchThemes(
-  cb: (themes: 'themes' | 'darkThemes', from: 'pc' | 'mobile' | 'default') => void,
+export function watchTheme(
+  cb: (theme: Theme, from: 'pc' | 'mobile' | 'default' | 'playground') => void,
   shouldUnmount = true
 ) {
-  const handleThemesChange = (event: MessageEvent) => {
+  const handleThemeChange = (event: MessageEvent) => {
     const { data } = event
-    if (data.action === 'themesChange') {
+    if (data.action === 'theme-change') {
       cb(data.data, data.from)
     }
   }
 
-  window.addEventListener('message', handleThemesChange)
+  window.addEventListener('message', handleThemeChange)
 
   if (shouldUnmount) {
     onUnmounted(() => {
-      window.removeEventListener('message', handleThemesChange)
+      window.removeEventListener('message', handleThemeChange)
     })
   }
 
-  cb(getBrowserThemes(), 'default')
+  cb(getBrowserTheme(), 'default')
 }
 
 export function addRouteListener(cb: () => void) {
@@ -119,9 +120,11 @@ export function addRouteListener(cb: () => void) {
   })
 }
 
-export function setThemes(config: Record<string, any>, name: 'themes' | 'darkThemes') {
-  const themes = get(config, name, {})
-  const styleVars = Object.entries(themes).reduce((styleVars, [key, value]) => {
+export type Theme = 'lightTheme' | 'darkTheme'
+
+export function setTheme(config: Record<string, any>, name: Theme) {
+  const themeConfig = get(config, name, {})
+  const styleVars = Object.entries(themeConfig).reduce((styleVars, [key, value]) => {
     styleVars[`--site-config-${key}`] = value as string
     return styleVars
   }, {} as StyleVars)
@@ -129,22 +132,31 @@ export function setThemes(config: Record<string, any>, name: 'themes' | 'darkThe
   StyleProvider(styleVars)
 }
 
-export function getBrowserThemes(themes = 'VARLET_THEMES'): 'darkThemes' | 'themes' {
-  let currentThemes = window.localStorage.getItem(themes) as 'darkThemes' | 'themes'
+export function getBrowserTheme(): Theme {
+  const themeKey = get(config, 'themeKey')
+  const darkThemeConfig = get(config, 'darkTheme')
+
+  if (!darkThemeConfig) {
+    return 'lightTheme'
+  }
+
+  const storageTheme = window.localStorage.getItem(themeKey) as Theme
+
+  if (!storageTheme) {
+    const preferTheme = window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'darkTheme' : 'lightTheme'
+    window.localStorage.setItem(themeKey, preferTheme)
 
-  if (!currentThemes) {
-    currentThemes = window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'darkThemes' : 'themes'
-    window.localStorage.setItem(themes, currentThemes)
+    return preferTheme
   }
 
-  return currentThemes
+  return storageTheme
 }
 
-export function watchDarkMode(dark: StyleVars, cb?: (themes: 'darkThemes' | 'themes') => void) {
-  watchThemes((themes) => {
-    StyleProvider(themes === 'darkThemes' ? dark : null)
+export function watchDarkMode(dark: StyleVars, cb?: (theme: Theme) => void) {
+  watchTheme((theme) => {
+    StyleProvider(theme === 'darkTheme' ? dark : null)
 
-    cb?.(themes)
+    cb?.(theme)
   })
 }
 

package/template/create/__tests__/index.spec.ejs

@@ -0,0 +1,8 @@
+import <%- bigCamelizeName %> from '..'
+import { createApp } from 'vue'
+import { mount } from '@vue/test-utils'
+
+test('test <%- kebabCaseName %> use', () => {
+  const app = createApp({}).use(<%- bigCamelizeName %>)
+  expect(app.component(<%- bigCamelizeName %>.name)).toBeTruthy()
+})

package/template/create/example/index.ejs

@@ -0,0 +1,15 @@
+<script setup>
+import <%- bigCamelizeNamespace + bigCamelizeName %> from '../index'
+import AppType from '@varlet/cli/site/mobile/components/AppType'
+<% if (locale) { -%>
+import { watchLang } from '@varlet/cli/site/utils'
+import { use, pack } from './locale'
+
+watchLang(use)
+<% } -%>
+</script>
+
+<template>
+  <app-type>Mobile phone example code</app-type>
+  <var-<%- kebabCaseName %>/>
+</template>

package/template/create/example/locale/en-US.ts

@@ -0,0 +1,3 @@
+export default {
+  // Example locale
+}

package/template/create/example/locale/zh-CN.ts

@@ -0,0 +1,3 @@
+export default {
+  // Example locale
+}

package/template/create/index.ejs

@@ -0,0 +1,12 @@
+// Component entry, the folder where the file exists will be exposed to the user
+
+import <%- bigCamelizeName %> from './<%- bigCamelizeName %>.vue'
+import type { App } from 'vue'
+
+<%- bigCamelizeName %>.install = function(app: App) {
+  app.component(<%- bigCamelizeName %>.name, <%- bigCamelizeName %>)
+}
+
+export const _<%- bigCamelizeName %>Component = <%- bigCamelizeName %>
+
+export default <%- bigCamelizeName %>

package/template/create/less.ejs

@@ -0,0 +1,3 @@
+.<%- namespace %>-<%- kebabCaseName %> {
+
+}

package/template/create/props.ts

@@ -0,0 +1 @@
+export const props = {}

package/template/create/tsx.ejs

@@ -0,0 +1,13 @@
+import { defineComponent } from 'vue'
+import { props } from './props'
+import './<%- kebabCaseName %>.less'
+
+export default defineComponent({
+  name: '<%- bigCamelizeNamespace + bigCamelizeName %>',
+  props,
+  setup(props, { slots }) {
+    return () => {
+      return <div>{ slots.default?.() }</div>
+    }
+  },
+})

package/template/create/vue.ejs

@@ -0,0 +1,17 @@
+<template>
+  <div class="var-<%- kebabCaseName %>"></div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { props } from './props'
+
+export default defineComponent({
+  name: '<%- bigCamelizeNamespace + bigCamelizeName %>',
+  props
+})
+</script>
+
+<style lang="less">
+@import './<%- kebabCaseName %>.less';
+</style>

package/{generators → template/generators}/config/default/base/package.json

@@ -101,5 +101,5 @@
     "Chrome >= 51",
     "iOS >= 10"
   ],
-  "packageManager": "pnpm@6.24.3"
+  "packageManager": "pnpm@7.9.0"
 }

package/{generators → template/generators}/config/default/base/varlet.config.js

@@ -26,7 +26,7 @@ module.exports = {
     'color-pc-language-active-background': '#00968821',
     'color-mobile-language-active': '#009688',
     'color-mobile-language-active-background': '#00968821',
-    'color-mobile-cell-hover': '#009688'
+    'color-mobile-cell-hover': '#009688',
   },
   darkThemes: {
     'color-body': '#121212',

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

@@ -10,21 +10,21 @@ export default defineComponent({
   name: 'BButton',
   props: {
     color: {
-      type: String
+      type: String,
     },
     onClick: {
-      type: Function as PropType<(e: Event) => void>
-    }
+      type: Function as PropType<(e: Event) => void>,
+    },
   },
   setup(props) {
     const handleClick = (e: Event) => props.onClick?.(e)
     return {
-      handleClick
+      handleClick,
     }
-  }
+  },
 })
 </script>
 
 <style lang="less">
-@import "./button";
+@import './button';
 </style>

package/{generators/config/default/tsx → template/generators/config/default/sfc}/src/button/button.less

@@ -9,6 +9,6 @@
   cursor: pointer;
 
   &:active {
-    opacity: 0.9
+    opacity: 0.9;
   }
 }

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

@@ -6,8 +6,8 @@ import ModifyColor from './ModifyColor'
 
 <template>
   <app-type>基本使用</app-type>
-  <basic-use/>
+  <basic-use />
 
   <app-type>修改颜色</app-type>
-  <modify-color/>
+  <modify-color />
 </template>

package/{generators → template/generators}/config/default/tsx/src/button/Button.tsx

@@ -5,11 +5,11 @@ export default defineComponent({
   name: 'BButton',
   props: {
     color: {
-      type: String
+      type: String,
     },
     onClick: {
-      type: Function as PropType<(e: Event) => void>
-    }
+      type: Function as PropType<(e: Event) => void>,
+    },
   },
   setup(props, { slots }) {
     const handleClick = (e: Event) => props.onClick?.(e)
@@ -17,15 +17,13 @@ export default defineComponent({
     return () => {
       const { color } = props
 
-      return <>
-        <button
-          class="basic-button"
-          style={{ background: color }}
-          onClick={ handleClick }
-        >
-          { slots.default?.() }
-        </button>
-      </>
+      return (
+        <>
+          <button class="basic-button" style={{ background: color }} onClick={handleClick}>
+            {slots.default?.()}
+          </button>
+        </>
+      )
     }
-  }
+  },
 })

package/{generators/config/i18n → template/generators/config/default}/tsx/src/button/button.less

@@ -9,6 +9,6 @@
   cursor: pointer;
 
   &:active {
-    opacity: 0.9
+    opacity: 0.9;
   }
 }