@varlet/cli 1.23.8 → 1.24.0

package/site/pc/components/AppHeader.vue

@@ -61,15 +61,14 @@
 </template>
 
 <script lang="ts">
-// @ts-ignore
 import config from '@config'
-import { ref, computed } from 'vue'
+import { ref, computed, defineComponent } from 'vue'
 import { get } from 'lodash-es'
 import { getBrowserThemes, getPCLocationInfo, removeEmpty, setThemes, watchThemes } from '../../utils'
 import { useRouter } from 'vue-router'
 import type { Ref, ComputedRef } from 'vue'
 
-export default {
+export default defineComponent({
   name: 'AppHeader',
   props: {
     language: {
@@ -77,19 +76,19 @@ export default {
     },
   },
   setup() {
-    // config
     const title: Ref<string> = ref(get(config, 'title'))
     const logo: Ref<string> = ref(get(config, 'logo'))
+    const themesKey = get(config, 'themesKey')
     const languages: Ref<Record<string, string>> = ref(get(config, 'pc.header.i18n'))
     const github: Ref<Record<string, string>> = ref(get(config, 'pc.header.github'))
     const darkMode: Ref<Record<string, string>> = ref(get(config, 'pc.header.darkMode'))
-    const currentThemes = ref(getBrowserThemes())
+    const currentThemes = ref(getBrowserThemes(themesKey))
 
     const isOpenMenu: Ref<boolean> = ref(false)
     const router = useRouter()
     const nonEmptyLanguages: ComputedRef<Record<string, string>> = computed(() => removeEmpty(languages.value))
 
-    const handleLanguageChange = (language) => {
+    const handleLanguageChange = (language: string) => {
       const { menuName } = getPCLocationInfo()
       router.replace(`/${language}/${menuName}`)
       isOpenMenu.value = false
@@ -98,7 +97,7 @@ export default {
     const setCurrentThemes = (themes: 'themes' | 'darkThemes') => {
       currentThemes.value = themes
       setThemes(config, currentThemes.value)
-      window.localStorage.setItem('currentThemes', currentThemes.value)
+      window.localStorage.setItem(themesKey, currentThemes.value)
     }
 
     const getThemesMessage = () => ({ action: 'themesChange', from: 'pc', data: currentThemes.value })
@@ -106,7 +105,7 @@ export default {
     const toggleTheme = () => {
       setCurrentThemes(currentThemes.value === 'darkThemes' ? 'themes' : 'darkThemes')
       window.postMessage(getThemesMessage(), '*')
-      ;(document.getElementById('mobile') as HTMLIFrameElement).contentWindow.postMessage(getThemesMessage(), '*')
+      ;(document.getElementById('mobile') as HTMLIFrameElement).contentWindow!.postMessage(getThemesMessage(), '*')
     }
 
     watchThemes((themes, from) => {
@@ -129,7 +128,7 @@ export default {
       toggleTheme,
     }
   },
-}
+})
 </script>
 
 <style scoped lang="less">

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/sfc/.prettierignore

@@ -1,8 +0,0 @@
-coverage/**
-es/**
-umd/**
-site/**
-public/**
-src/*/__tests__/**
-*.md
-

package/generators/tsx/.gitignore

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

package/generators/tsx/.husky/commit-msg

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx --no-install commitlint --edit $1

package/generators/tsx/.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx --no-install lint-staged

package/generators/tsx/.prettierrc

@@ -1,5 +0,0 @@
-{
-  "printWidth": 120,
-  "singleQuote": true,
-  "semi": false
-}

package/generators/tsx/README.md

@@ -1,88 +0,0 @@
-# varlet-cli-app
-
-### Reference
-
-[@varlet/cli 中文文档](https://github.com/haoziqaq/varlet/blob/dev/packages/varlet-cli/README.md)
-[@varlet/cli documentation](https://github.com/haoziqaq/varlet/blob/dev/packages/varlet-cli/README.en-US.md)
-
-### Quickstart
-
-```shell
-yarn
-yarn dev
-```
-
-### Commands
-
-#### Start the development server
-
-```shell
-yarn dev
-```
-
-#### Build documentation site
-
-```shell
-yarn build
-```
-
-#### Building component libraries
-
-```shell
-yarn compile
-```
-
-#### Lint code
-
-```shell
-yarn lint
-```
-
-#### Run unit test
-
-```shell
-yarn test
-```
-
-#### Run unit test in watch mode
-
-```shell
-yarn test:watch 
-or
-yarn test:watchAll 
-```
-
-#### Quickly create a component folder
-
-```shell
-yarn run create <componentName>
-```
-
-#### Mount git hook
-
-```shell
-yarn husky
-```
-
-#### Generate changelog
-
-```shell
-yarn genlog
-```
-
-#### Generate all changelog
-
-```shell
-yarn genAllLog
-```
-
-#### Publish
-
-tips: 
-- 1.The registry of npm and yarn must be the official source of npm
-- 2.Both npm and yarn must be logged in
-
-```shell
-yarn release
-```
-

package/generators/tsx/babel.config.js

@@ -1,10 +0,0 @@
-module.exports = {
-  presets: [
-    [
-      '@varlet/cli/preset',
-      {
-        loose: process.env.NODE_ENV === 'compile',
-      },
-    ],
-  ],
-}

package/generators/tsx/commitlint.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ['@commitlint/config-conventional'],
-}

package/generators/tsx/docs/home.zh-CN.md

@@ -1,11 +0,0 @@
-<div class="varlet-introduce">
-  <div class="varlet-introduce__row">
-    <img class="varlet-introduce__image" src="../public/logo.svg" />
-    <div class="varlet-introduce__name">Basic UI</div>  
-  </div>
-  <div class="varlet-introduce__des">一个组件库</div>
-</div>
-
-### 介绍
-
-这里可以介绍一下组件库, 想写什么就写什么...

package/generators/tsx/package.json

@@ -1,98 +0,0 @@
-{
-  "name": "basic-ui",
-  "version": "0.0.0",
-  "description": "A basic components library",
-  "main": "lib/index.js",
-  "module": "es/index.js",
-  "typings": "types/index.d.ts",
-  "vetur": {
-    "tags": "highlight/tags.json",
-    "attributes": "highlight/attributes.json"
-  },
-  "web-types": "highlight/web-types.json",
-  "keywords": [
-    "Vue",
-    "UI"
-  ],
-  "license": "MIT",
-  "scripts": {
-    "husky": "husky install",
-    "commit": "git-cz",
-    "dev": "varlet-cli dev",
-    "build": "varlet-cli build",
-    "preview": "varlet-cli preview",
-    "compile": "varlet-cli compile",
-    "create": "varlet-cli create",
-    "lint": "varlet-cli lint",
-    "genlog": "conventional-changelog -p angular -i CHANGELOG.md -s",
-    "genAllLog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
-    "release": "yarn compile && release-it",
-    "test": "varlet-cli jest",
-    "test:watch": "varlet-cli jest -w",
-    "test:watchAll": "varlet-cli jest -wa"
-  },
-  "peerDependencies": {
-    "vue": "^3.2.0"
-  },
-  "devDependencies": {
-    "@varlet/cli": "^1.20.0-alpha.0",
-    "vue": "3.2.16"
-  },
-  "release-it": {
-    "git": {
-      "changelog": "git log --pretty=format:\"* %s (%h)\" ${from}...${to}",
-      "tagName": "v${version}",
-      "commitMessage": "chore: release ${version}",
-      "requireCleanWorkingDir": false
-    },
-    "plugins": {
-      "@release-it/conventional-changelog": {
-        "preset": "angular",
-        "infile": "CHANGELOG.md"
-      }
-    }
-  },
-  "config": {
-    "commitizen": {
-      "path": "cz-conventional-changelog"
-    }
-  },
-  "lint-staged": {
-    "*.{ts,tsx,js,vue,less}": "prettier --write",
-    "*.{ts,tsx,js,vue}": "eslint --fix",
-    "*.{vue,css,less}": "stylelint --fix"
-  },
-  "eslintConfig": {
-    "root": true,
-    "ignorePatterns": [
-      "lib/**",
-      "es/**",
-      "umd/**",
-      "site/**",
-      "public/**",
-      "src/*/__tests__/**",
-      ".varlet/**"
-    ],
-    "extends": [
-      "@varlet"
-    ]
-  },
-  "stylelint": {
-    "extends": [
-      "@varlet/stylelint-config"
-    ],
-    "ignoreFiles": [
-      "lib/**",
-      "es/**",
-      "umd/**",
-      "site/**",
-      "coverage/**",
-      "public/**",
-      "highlight/**"
-    ]
-  },
-  "browserslist": [
-    "Chrome >= 51",
-    "iOS >= 10"
-  ]
-}

package/generators/tsx/public/highlight.css

@@ -1 +0,0 @@
-.hljs{display:block;overflow-x:auto;padding:.5em;background:#011627;color:#d6deeb}.hljs-keyword{color:#c792ea;font-style:italic}.hljs-built_in{color:#addb67;font-style:italic}.hljs-type{color:#82aaff}.hljs-literal{color:#ff5874}.hljs-number{color:#f78c6c}.hljs-regexp{color:#5ca7e4}.hljs-string{color:#ecc48d}.hljs-subst{color:#d3423e}.hljs-symbol{color:#82aaff}.hljs-class{color:#ffcb8b}.hljs-function{color:#82aaff}.hljs-title{color:#dcdcaa;font-style:italic}.hljs-params{color:#7fdbca}.hljs-comment{color:#637777;font-style:italic}.hljs-doctag{color:#7fdbca}.hljs-meta{color:#82aaff}.hljs-meta-keyword{color:#82aaff}.hljs-meta-string{color:#ecc48d}.hljs-section{color:#82b1ff}.hljs-builtin-name,.hljs-name,.hljs-tag{color:#7fdbca}.hljs-attr{color:#7fdbca}.hljs-attribute{color:#80cbc4}.hljs-variable{color:#addb67}.hljs-bullet{color:#d9f5dd}.hljs-code{color:#80cbc4}.hljs-emphasis{color:#c792ea;font-style:italic}.hljs-strong{color:#addb67;font-weight:700}.hljs-formula{color:#c792ea}.hljs-link{color:#ff869a}.hljs-quote{color:#697098;font-style:italic}.hljs-selector-tag{color:#ff6363}.hljs-selector-id{color:#fad430}.hljs-selector-class{color:#addb67;font-style:italic}.hljs-selector-attr,.hljs-selector-pseudo{color:#c792ea;font-style:italic}.hljs-template-tag{color:#c792ea}.hljs-template-variable{color:#addb67}.hljs-addition{color:#addb67ff;font-style:italic}.hljs-deletion{color:#ef535090;font-style:italic}

package/generators/tsx/public/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

package/generators/tsx/shims/shims-md.d.ts

@@ -1,4 +0,0 @@
-declare module '*.md' {
-  const content: string
-  export default content
-}

package/generators/tsx/shims/shims-vue.d.ts

@@ -1,6 +0,0 @@
-declare module '*.vue' {
-  import { defineComponent } from 'vue'
-
-  const component: ReturnType<typeof defineComponent>
-  export default component
-}

package/generators/tsx/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "compilerOptions": {
-    "strict": true,
-    "downlevelIteration": true,
-    "declaration": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowJs": true,
-    "lib": ["esnext", "dom"],
-    "allowSyntheticDefaultImports": true,
-    "jsx": "preserve"
-  }
-}

package/generators/tsx/types/basicComponent.d.ts

@@ -1,7 +0,0 @@
-import type { App } from 'vue'
-
-export class BasicComponent {
-  static name: string
-
-  static install(app: App): void
-}

package/generators/tsx/types/button.d.ts

@@ -1,12 +0,0 @@
-import { BasicComponent } from './basicComponent'
-
-export interface ButtonProps {
-  color?: string
-  onClick?: (e: Event) => void
-}
-
-export class Button extends BasicComponent {
-  $props: ButtonProps
-}
-
-export class _ButtonComponent extends Button {}

package/generators/tsx/types/index.d.ts

@@ -1,6 +0,0 @@
-import type { App } from 'vue'
-
-export const install: (app: App) => void
-
-export * from './basicComponent'
-export * from './button'

package/generators/tsx/varlet.config.js

@@ -1,106 +0,0 @@
-module.exports = {
-  name: 'Basic',
-  namespace: 'b',
-  title: 'Basic UI',
-  logo: './logo.svg',
-  useMobile: true,
-  themes: {
-    'color-body': '#fff',
-    'color-bar': '#fff',
-    'color-sub-bar': '#f5f5f5',
-    'color-text': '#555',
-    'color-sub-text': '#888',
-    'color-border': 'rgba(0, 0, 0, 0.12)',
-    'color-shadow': '#eee',
-    'color-introduce-border': '#009688',
-    'color-primary': '#009688',
-    'color-link': '#009688',
-    'color-type': '#009688',
-    'color-progress': '#009688',
-    'color-progress-track': '#fff',
-    'color-side-bar': '#009688',
-    'color-side-bar-active-background': '#00968821',
-    'color-app-bar': '#009688',
-    'color-nav-button-hover-background': 'rgba(0, 0, 0, 0.08)',
-    'color-pc-language-active': '#009688',
-    'color-pc-language-active-background': '#00968821',
-    'color-mobile-language-active': '#009688',
-    'color-mobile-language-active-background': '#00968821',
-    'color-mobile-cell-hover': '#009688'
-  },
-  darkThemes: {
-    'color-body': '#121212',
-    'color-bar': '#1e1e1e',
-    'color-sub-bar': '#272727',
-    'color-text': '#fff',
-    'color-sub-text': '#aaa',
-    'color-border': '#333',
-    'color-shadow': '#121212',
-    'color-introduce-border': '#555',
-    'color-primary': '#009688',
-    'color-link': '#009688',
-    'color-type': '#009688',
-    'color-progress': '#009688',
-    'color-progress-track': '#202020',
-    'color-side-bar': '#009688',
-    'color-side-bar-active-background': '#00968821',
-    'color-app-bar': '#009688',
-    'color-nav-button-hover-background': 'rgba(255, 255, 255, 0.08)',
-    'color-pc-language-active': '#009688',
-    'color-pc-language-active-background': '#00968821',
-    'color-mobile-language-active': '#009688',
-    'color-mobile-language-active-background': '#00968821',
-    'color-mobile-cell-hover': '#009688',
-  },
-  highlight: {
-    style: './highlight.css',
-  },
-  pc: {
-    redirect: '/home',
-    title: {
-      'zh-CN': '一个组件库',
-    },
-    header: {
-      i18n: null,
-      github: 'https://github.com/haoziqaq/varlet',
-    },
-    menu: [
-      {
-        text: {
-          'zh-CN': '开发指南',
-        },
-        type: 1,
-      },
-      {
-        text: {
-          'zh-CN': '基本介绍',
-        },
-        doc: 'home',
-        type: 3,
-      },
-      {
-        text: {
-          'zh-CN': '基础组件',
-        },
-        type: 1,
-      },
-      {
-        text: {
-          'zh-CN': 'Button 按钮',
-        },
-        doc: 'button',
-        type: 2,
-      },
-    ],
-  },
-  mobile: {
-    redirect: '/home',
-    title: {
-      'zh-CN': '一个组件库',
-    },
-    header: {
-      i18n: null,
-      github: 'https://github.com/haoziqaq/varlet',
-    },
-  },
-}