@varlet/cli 1.23.11 → 1.24.2-alpha.1640861757955

package/site/pc/components/AppSidebar.vue

@@ -27,12 +27,12 @@
 // @ts-ignore
 import config from '@config'
 import { MenuTypes } from '../../utils'
-import { reactive, ref } from 'vue'
+import { reactive, ref, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import type { Menu } from '../App'
+import type { Menu } from '../App.vue'
 import { get } from 'lodash-es'
 
-export default {
+export default defineComponent({
   name: 'AppSidebar',
   props: {
     menu: {
@@ -50,7 +50,7 @@ export default {
     const menuTypes = reactive(MenuTypes)
     const themes = ref(get(config, 'themes'))
 
-    const changeRoute = (item) => {
+    const changeRoute = (item: Menu) => {
       if (item.type === MenuTypes.TITLE || props.menuName === item.doc) {
         return
       }
@@ -64,7 +64,7 @@ export default {
       changeRoute
     }
   }
-}
+})
 </script>
 
 <style scoped lang="less">
@@ -75,7 +75,7 @@ export default {
   top: 60px;
   bottom: 0;
   left: 0;
-  z-index: 1;
+  z-index: 99;
   overflow-y: scroll;
   box-shadow: 0 8px 12px var(--site-config-color-shadow);
   background: var(--site-config-color-bar);

package/site/pc/main.ts

@@ -1,13 +1,14 @@
 import App from './App.vue'
 import '@varlet/touch-emulator'
-// @ts-ignore
 import routes from '@pc-routes'
-// @ts-ignore
 import config from '@config'
 
 import Icon from '../components/icon'
 import Cell from '../components/cell'
 import Ripple from '../components/ripple'
+import CodeExample from '../components/code-example'
+import Snackbar from '../components/snackbar'
+
 import '../components/styles/common.less'
 import '../components/styles/elevation.less'
 
@@ -20,6 +21,8 @@ const defaultLanguage = get(config, 'defaultLanguage')
 const redirect = get(config, 'pc.redirect')
 const mobileRedirect = get(config, 'mobile.redirect')
 
+Snackbar.allowMultiple(true)
+
 redirect &&
   routes.push({
     path: '/:pathMatch(.*)*',
@@ -85,4 +88,7 @@ createApp(App)
   .use(Ripple)
   // @ts-ignore
   .use(Icon)
+  // @ts-ignore
+  .use(CodeExample)
+  .use(Snackbar)
   .mount('#app')

package/site/tsconfig.json

@@ -1,16 +1,11 @@
 {
   "compilerOptions": {
-    "outDir": "./lib",
     "target": "es5",
-    "module": "commonjs",
-    "sourceMap": false,
     "strict": true,
     "downlevelIteration": true,
-    "declaration": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "jsx": "preserve",
     "lib": ["esnext", "dom"]
-  },
-  "include": ["*"]
+  }
 }

package/site/useProgress.ts

@@ -7,11 +7,15 @@ import { getBrowserThemes, mountInstance, watchThemes } from './utils'
 import { get } from 'lodash-es'
 
 function getColor(themes?: 'themes' | 'darkThemes') {
-  return get(config, `${themes ?? getBrowserThemes()}.color-progress`)
+  const themesKey = get(config, 'themesKey')
+
+  return get(config, `${themes ?? getBrowserThemes(themesKey)}.color-progress`)
 }
 
 function getTrackColor(themes?: 'themes' | 'darkThemes') {
-  return get(config, `${themes ?? getBrowserThemes()}.color-progress-track`)
+  const themesKey = get(config, 'themesKey')
+
+  return get(config, `${themes ?? getBrowserThemes(themesKey)}.color-progress-track`)
 }
 
 export function useProgress() {

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'
@@ -138,12 +139,12 @@ export function setThemes(config: Record<string, any>, name: 'themes' | 'darkThe
   StyleProvider(styleVars)
 }
 
-export function getBrowserThemes(): 'darkThemes' | 'themes' {
-  let currentThemes = window.localStorage.getItem('currentThemes') as 'darkThemes' | 'themes'
+export function getBrowserThemes(themes = 'VARLET_THEMES'): 'darkThemes' | 'themes' {
+  let currentThemes = window.localStorage.getItem(themes) as 'darkThemes' | 'themes'
 
   if (!currentThemes) {
     currentThemes = window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'darkThemes' : 'themes'
-    window.localStorage.setItem('currentThemes', currentThemes)
+    window.localStorage.setItem(themes, currentThemes)
   }
 
   return currentThemes

package/tsconfig.json

@@ -2,8 +2,6 @@
   "compilerOptions": {
     "outDir": "./lib",
     "target": "es5",
-    "module": "commonjs",
-    "sourceMap": false,
     "strict": true,
     "downlevelIteration": true,
     "declaration": true,

package/varlet.default.config.js

@@ -4,6 +4,7 @@ module.exports = {
   host: 'localhost',
   port: 8080,
   title: 'VARLET',
+  themesKey: 'VARLET_THEMES',
   logo: 'https://varlet.gitee.io/varlet-ui/varlet_icon.png',
   defaultLanguage: 'zh-CN',
   highlight: {
@@ -31,6 +32,18 @@ module.exports = {
       github: 'https://github.com/haoziqaq/varlet',
       darkMode: true,
     },
+    clipboard: {
+      'zh-CN': '代码已复制到剪切板',
+      'en-US': 'The code has been copied to the clipboard',
+    },
+    fold: {
+      message: {
+        'zh-CN': '已显示完整代码',
+        'en-US': 'Complete code displayed',
+      },
+      defaultFold: true,
+      foldHeight: 60,
+    },
   },
   mobile: {
     redirect: '/home',

package/generators/base/.gitignore

@@ -1,14 +0,0 @@
-node_modules
-
-.varlet
-.idea
-.vscode
-*.log
-.DS_Store
-
-site
-lib
-es
-umd
-coverage
-highlight