@varlet/cli 1.27.14 → 1.27.17-alpha.1656907860130

package/site/utils.ts

@@ -1,162 +1,153 @@
-import { onMounted, onUnmounted } from 'vue'
-import { get } from 'lodash-es'
-import { formatStyleVars } from './components/utils/elements'
-
-export * from './components/utils/components'
-export * from './components/utils/elements'
-export * from './components/utils/shared'
-
-export type StyleVars = Record<string, string>
-
-const mountedVarKeys: string[] = []
-
-function StyleProvider(styleVars: StyleVars | null = {}) {
-  mountedVarKeys.forEach((key) => document.documentElement.style.removeProperty(key))
-  mountedVarKeys.length = 0
-
-  const styles: StyleVars = formatStyleVars(styleVars)
-  Object.entries(styles).forEach(([key, value]) => {
-    document.documentElement.style.setProperty(key, value)
-    mountedVarKeys.push(key)
-  })
-}
-
-export function camelize(str: string): string {
-  return str.replace(/-(\w)/g, (_: any, p: string) => p.toUpperCase())
-}
-
-export function bigCamelize(str: string): string {
-  return camelize(str).replace(str.charAt(0), str.charAt(0).toUpperCase())
-}
-
-export interface PCLocationInfo {
-  language: string
-  menuName: string
-}
-
-export function getPCLocationInfo(): PCLocationInfo {
-  const [, language, menuName] = window.location.hash.split('/')
-
-  return {
-    language,
-    menuName,
-  }
-}
-
-export function isPhone() {
-  return /Android|webOS|iPhone|iPod|BlackBerry|Pad/i.test(navigator.userAgent)
-}
-
-export enum MenuTypes {
-  TITLE = 1,
-  COMPONENT = 2,
-  DOCUMENTATION = 3,
-}
-
-export function inIframe() {
-  return window.self !== window.top
-}
-
-export function removeEmpty(object: Record<string, string> = {}) {
-  return Object.keys(object).reduce((record: Record<string, string>, key) => {
-    const value = object[key]
-    value && (record[key] = value)
-    return record
-  }, {})
-}
-
-export function getHashSearch() {
-  const { href } = window.location
-  const hashSearch = href.slice(href.indexOf('?'))
-
-  return new URLSearchParams(hashSearch)
-}
-
-export function watchLang(cb: (lang: string) => void, platform: 'pc' | 'mobile' = 'mobile') {
-  const handleHashchange = () => {
-    const language = platform === 'mobile' ? getHashSearch().get('language') ?? 'zh-CN' : getPCLocationInfo().language
-
-    cb(language)
-  }
-
-  addRouteListener(handleHashchange)
-
-  handleHashchange()
-}
-
-export function watchPlatform(cb: (platform: string) => void) {
-  const handleHashchange = () => {
-    const platform = getHashSearch().get('platform') ?? 'mobile'
-    cb(platform)
-  }
-
-  addRouteListener(handleHashchange)
-
-  handleHashchange()
-}
-
-export function watchThemes(
-  cb: (themes: 'themes' | 'darkThemes', from: 'pc' | 'mobile' | 'default') => void,
-  shouldUnmount = true
-) {
-  const handleThemesChange = (event: MessageEvent) => {
-    const { data } = event
-    if (data.action === 'themesChange') {
-      cb(data.data, data.from)
-    }
-  }
-
-  window.addEventListener('message', handleThemesChange)
-
-  if (shouldUnmount) {
-    onUnmounted(() => {
-      window.removeEventListener('message', handleThemesChange)
-    })
-  }
-
-  cb(getBrowserThemes(), 'default')
-}
-
-export function addRouteListener(cb: () => void) {
-  onMounted(() => {
-    window.addEventListener('hashchange', cb)
-    window.addEventListener('popstate', cb)
-  })
-  onUnmounted(() => {
-    window.removeEventListener('hashchange', cb)
-    window.removeEventListener('popstate', cb)
-  })
-}
-
-export function setThemes(config: Record<string, any>, name: 'themes' | 'darkThemes') {
-  const themes = get(config, name, {})
-  const styleVars = Object.entries(themes).reduce((styleVars, [key, value]) => {
-    styleVars[`--site-config-${key}`] = value as string
-    return styleVars
-  }, {} as StyleVars)
-
-  StyleProvider(styleVars)
-}
-
-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(themes, currentThemes)
-  }
-
-  return currentThemes
-}
-
-export function watchDarkMode(dark: StyleVars, cb?: (themes: 'darkThemes' | 'themes') => void) {
-  watchThemes((themes) => {
-    StyleProvider(themes === 'darkThemes' ? dark : null)
-
-    cb?.(themes)
-  })
-}
-
-export function utoa(data: string): string {
-  return btoa(unescape(encodeURIComponent(data)))
-}
+import { onMounted, onUnmounted } from 'vue'
+import { get } from 'lodash-es'
+import { formatStyleVars } from './components/utils/elements'
+
+export * from './components/utils/components'
+export * from './components/utils/elements'
+
+export type StyleVars = Record<string, string>
+
+const mountedVarKeys: string[] = []
+
+function StyleProvider(styleVars: StyleVars | null = {}) {
+  mountedVarKeys.forEach((key) => document.documentElement.style.removeProperty(key))
+  mountedVarKeys.length = 0
+
+  const styles: StyleVars = formatStyleVars(styleVars)
+  Object.entries(styles).forEach(([key, value]) => {
+    document.documentElement.style.setProperty(key, value)
+    mountedVarKeys.push(key)
+  })
+}
+
+export interface PCLocationInfo {
+  language: string
+  menuName: string
+}
+
+export function getPCLocationInfo(): PCLocationInfo {
+  const [, language, menuName] = window.location.hash.split('/')
+
+  return {
+    language,
+    menuName,
+  }
+}
+
+export function isPhone() {
+  return /Android|webOS|iPhone|iPod|BlackBerry|Pad/i.test(navigator.userAgent)
+}
+
+export enum MenuTypes {
+  TITLE = 1,
+  COMPONENT = 2,
+  DOCUMENTATION = 3,
+}
+
+export function inIframe() {
+  return window.self !== window.top
+}
+
+export function removeEmpty(object: Record<string, string> = {}) {
+  return Object.keys(object).reduce((record: Record<string, string>, key) => {
+    const value = object[key]
+    value && (record[key] = value)
+    return record
+  }, {})
+}
+
+export function getHashSearch() {
+  const { href } = window.location
+  const hashSearch = href.slice(href.indexOf('?'))
+
+  return new URLSearchParams(hashSearch)
+}
+
+export function watchLang(cb: (lang: string) => void, platform: 'pc' | 'mobile' = 'mobile') {
+  const handleHashchange = () => {
+    const language = platform === 'mobile' ? getHashSearch().get('language') ?? 'zh-CN' : getPCLocationInfo().language
+
+    cb(language)
+  }
+
+  addRouteListener(handleHashchange)
+
+  handleHashchange()
+}
+
+export function watchPlatform(cb: (platform: string) => void) {
+  const handleHashchange = () => {
+    const platform = getHashSearch().get('platform') ?? 'mobile'
+    cb(platform)
+  }
+
+  addRouteListener(handleHashchange)
+
+  handleHashchange()
+}
+
+export function watchThemes(
+  cb: (themes: 'themes' | 'darkThemes', from: 'pc' | 'mobile' | 'default') => void,
+  shouldUnmount = true
+) {
+  const handleThemesChange = (event: MessageEvent) => {
+    const { data } = event
+    if (data.action === 'themesChange') {
+      cb(data.data, data.from)
+    }
+  }
+
+  window.addEventListener('message', handleThemesChange)
+
+  if (shouldUnmount) {
+    onUnmounted(() => {
+      window.removeEventListener('message', handleThemesChange)
+    })
+  }
+
+  cb(getBrowserThemes(), 'default')
+}
+
+export function addRouteListener(cb: () => void) {
+  onMounted(() => {
+    window.addEventListener('hashchange', cb)
+    window.addEventListener('popstate', cb)
+  })
+  onUnmounted(() => {
+    window.removeEventListener('hashchange', cb)
+    window.removeEventListener('popstate', cb)
+  })
+}
+
+export function setThemes(config: Record<string, any>, name: 'themes' | 'darkThemes') {
+  const themes = get(config, name, {})
+  const styleVars = Object.entries(themes).reduce((styleVars, [key, value]) => {
+    styleVars[`--site-config-${key}`] = value as string
+    return styleVars
+  }, {} as StyleVars)
+
+  StyleProvider(styleVars)
+}
+
+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(themes, currentThemes)
+  }
+
+  return currentThemes
+}
+
+export function watchDarkMode(dark: StyleVars, cb?: (themes: 'darkThemes' | 'themes') => void) {
+  watchThemes((themes) => {
+    StyleProvider(themes === 'darkThemes' ? dark : null)
+
+    cb?.(themes)
+  })
+}
+
+export function utoa(data: string): string {
+  return btoa(unescape(encodeURIComponent(data)))
+}

package/tsconfig.json

@@ -1,14 +1,14 @@
-{
-  "compilerOptions": {
-    "outDir": "./lib",
-    "target": "es5",
-    "strict": true,
-    "downlevelIteration": true,
-    "declaration": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "jsx": "preserve",
-    "lib": ["esnext", "dom"]
-  },
-  "include": ["src/**/*"]
-}
+{
+  "compilerOptions": {
+    "outDir": "./lib",
+    "target": "es5",
+    "strict": true,
+    "downlevelIteration": true,
+    "declaration": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "lib": ["esnext", "dom"]
+  },
+  "include": ["src/**/*"]
+}

package/varlet.default.config.js

@@ -1,145 +1,151 @@
-module.exports = {
-  name: 'Varlet',
-  namespace: 'var',
-  host: 'localhost',
-  port: 8080,
-  title: 'VARLET',
-  themesKey: 'VARLET_THEMES',
-  logo: 'https://varlet-varletjs.vercel.app/varlet_icon.png',
-  defaultLanguage: 'zh-CN',
-  highlight: {
-    /**
-     * @see https://highlightjs.org/
-     */
-    style: '//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/styles/nord.min.css',
-  },
-  analysis: {
-    baidu: '',
-  },
-  useMobile: false,
-  pc: {
-    menu: [],
-    redirect: '/index',
-    title: {
-      'zh-CN': '面向 Vue3 的 Material 风格移动端组件库',
-      'en-US': 'Material design mobile components built for Vue3',
-    },
-    header: {
-      i18n: {
-        'zh-CN': '中文',
-        'en-US': 'English',
-      },
-      versions: null,
-      github: 'https://github.com/varletjs/varlet',
-      playground: 'https://varlet-ui-playground.vercel.app',
-      darkMode: true,
-    },
-    clipboard: {
-      'zh-CN': '代码已复制到剪切板',
-      'en-US': 'The code has been copied to the clipboard',
-    },
-    fold: {
-      defaultFold: false,
-      foldHeight: 50,
-    },
-  },
-  mobile: {
-    redirect: '/home',
-    title: {
-      'zh-CN': '面向 Vue3 的 Material 风格移动端组件库',
-      'en-US': 'Material design mobile components built for Vue3',
-    },
-    header: {
-      i18n: {
-        'zh-CN': '中文',
-        'en-US': 'English',
-      },
-      github: 'https://github.com/varletjs/varlet',
-      darkMode: true,
-    },
-  },
-  themes: {
-    'color-body': '#fff',
-    'color-home-page-background': '#fff',
-    'color-home-page-slash': '#ccc',
-    'color-home-page-primary-button-background': '#3a7afe',
-    'color-home-page-extra-button-background': '#f5f5f5',
-    'color-home-page-github-button-background': '#212121',
-    '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': '#2196f3',
-    'color-primary': '#2196f3',
-    'color-link': '#00c48f',
-    'color-type': '#00c48f',
-    'color-progress': '#1d92e9',
-    'color-progress-track': 'transparent',
-    'color-side-bar': '#3a7afe',
-    'color-side-bar-active-background': '#3a7afe1a',
-    'color-app-bar': '#3a7afe',
-    'color-nav-button-hover-background': 'rgba(0, 0, 0, 0.08)',
-    'color-mobile-cell-hover': '#3a7afe',
-    'color-pc-language-active': '#3a7afe',
-    'color-pc-language-active-background': '#edf5ff',
-    'color-pc-github-active-background': '#212121',
-    'color-mobile-language-active': '#3a7afe',
-    'color-mobile-language-active-background': '#edf5ff',
-    'color-hl-background': '#fafafa',
-    'color-hl-code': '#58727e',
-    'color-hl-border': '#f3f3f3',
-    'color-hl-group-a': '#7c7c7c',
-    'color-hl-group-b': '#2196f3',
-    'color-hl-group-c': '#ff9422',
-    'color-hl-group-d': '#58c193',
-    'color-hl-group-e': '#ff9422',
-    'color-hl-group-f': '#ff9422',
-    'color-hl-group-g': '#ff9422',
-    'color-hl-group-h': '#06a6e9',
-    'color-hl-group-i': '#f23733',
-  },
-  darkThemes: {
-    'color-body': '#121212',
-    'color-home-page-background': 'linear-gradient(to right, #1e1e1e, #272727)',
-    'color-home-page-slash': '#111',
-    'color-home-page-primary-button-background': '#4a7afe',
-    'color-home-page-extra-button-background': '#303030',
-    'color-home-page-github-button-background': '#303030',
-    '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': '#96cbfe',
-    'color-link': '#A8FFC4',
-    'color-type': '#A8FFC4',
-    'color-progress': '#5580f8',
-    'color-progress-track': 'transparent',
-    'color-side-bar': '#4a7afe',
-    'color-side-bar-active-background': '#4a7afe1a',
-    'color-app-bar': '#272727',
-    'color-nav-button-hover-background': 'rgba(255, 255, 255, 0.08)',
-    'color-mobile-cell-hover': '#4a7afe',
-    'color-pc-language-active': '#4a7afe',
-    'color-pc-language-active-background': '#4a7afe20',
-    'color-pc-github-active-background': '#303030',
-    'color-mobile-language-active': '#4a7afe',
-    'color-mobile-language-active-background': '#4a7afe20',
-    'color-hl-background': '#272727',
-    'color-hl-code': '#fff',
-    'color-hl-border': '#272727',
-    'color-hl-group-a': '#7c7c7c',
-    'color-hl-group-b': '#96cbfe',
-    'color-hl-group-c': '#ff7b1e',
-    'color-hl-group-d': '#A8FFC4',
-    'color-hl-group-e': '#ff7b1e',
-    'color-hl-group-f': '#ff7b1e',
-    'color-hl-group-g': '#ff7b1e',
-    'color-hl-group-h': '#14a6e9',
-    'color-hl-group-i': '#ed4648',
-  },
-}
+module.exports = {
+  name: 'Varlet',
+  namespace: 'var',
+  host: 'localhost',
+  port: 8080,
+  title: 'VARLET',
+  themesKey: 'VARLET_THEMES',
+  logo: 'https://varlet-varletjs.vercel.app/varlet_icon.png',
+  defaultLanguage: 'zh-CN',
+  highlight: {
+    /**
+     * @see https://highlightjs.org/
+     */
+    style: '//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/styles/nord.min.css',
+  },
+  analysis: {
+    baidu: '',
+  },
+  useMobile: false,
+  pc: {
+    menu: [],
+    redirect: '/index',
+    title: {
+      'zh-CN': '面向 Vue3 的 Material 风格移动端组件库',
+      'en-US': 'Material design mobile components built for Vue3',
+    },
+    header: {
+      i18n: {
+        'zh-CN': '中文',
+        'en-US': 'English',
+      },
+      versions: null,
+      github: 'https://github.com/varletjs/varlet',
+      playground: 'https://varlet-ui-playground.vercel.app',
+      darkMode: true,
+    },
+    description: {
+      'zh-CN':
+        'Varlet 是一个基于 Vue3 开发的 Material 风格移动端组件库，全面拥抱 Vue3 生态，由社区团队维护。支持 Typescript、按需引入、暗黑模式、主题定制、国际化，并提供 VSCode 插件保障良好的开发体验',
+      'en-US':
+        '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',
+    },
+    clipboard: {
+      'zh-CN': '代码已复制到剪切板',
+      'en-US': 'The code has been copied to the clipboard',
+    },
+    fold: {
+      defaultFold: false,
+      foldHeight: 50,
+    },
+  },
+  mobile: {
+    redirect: '/home',
+    title: {
+      'zh-CN': '面向 Vue3 的 Material 风格移动端组件库',
+      'en-US': 'Material design mobile components built for Vue3',
+    },
+    header: {
+      i18n: {
+        'zh-CN': '中文',
+        'en-US': 'English',
+      },
+      github: 'https://github.com/varletjs/varlet',
+      darkMode: true,
+    },
+  },
+  themes: {
+    'color-body': '#fff',
+    'color-home-page-background': '#fff',
+    'color-home-page-slash': '#ccc',
+    'color-home-page-primary-button-background': '#3a7afe',
+    'color-home-page-extra-button-background': '#f5f5f5',
+    'color-home-page-github-button-background': '#212121',
+    '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': '#2196f3',
+    'color-primary': '#2196f3',
+    'color-link': '#00c48f',
+    'color-type': '#00c48f',
+    'color-progress': '#1d92e9',
+    'color-progress-track': 'transparent',
+    'color-side-bar': '#3a7afe',
+    'color-side-bar-active-background': '#3a7afe1a',
+    'color-app-bar': '#3a7afe',
+    'color-nav-button-hover-background': 'rgba(0, 0, 0, 0.08)',
+    'color-mobile-cell-hover': '#3a7afe',
+    'color-pc-language-active': '#3a7afe',
+    'color-pc-language-active-background': '#edf5ff',
+    'color-pc-github-active-background': '#212121',
+    'color-mobile-language-active': '#3a7afe',
+    'color-mobile-language-active-background': '#edf5ff',
+    'color-hl-background': '#fafafa',
+    'color-hl-code': '#58727e',
+    'color-hl-border': '#f3f3f3',
+    'color-hl-group-a': '#7c7c7c',
+    'color-hl-group-b': '#2196f3',
+    'color-hl-group-c': '#ff9422',
+    'color-hl-group-d': '#58c193',
+    'color-hl-group-e': '#ff9422',
+    'color-hl-group-f': '#ff9422',
+    'color-hl-group-g': '#ff9422',
+    'color-hl-group-h': '#06a6e9',
+    'color-hl-group-i': '#f23733',
+  },
+  darkThemes: {
+    'color-body': '#121212',
+    'color-home-page-background': 'linear-gradient(to right, #1e1e1e, #272727)',
+    'color-home-page-slash': '#111',
+    'color-home-page-primary-button-background': '#4a7afe',
+    'color-home-page-extra-button-background': '#303030',
+    'color-home-page-github-button-background': '#303030',
+    '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': '#96cbfe',
+    'color-link': '#A8FFC4',
+    'color-type': '#A8FFC4',
+    'color-progress': '#5580f8',
+    'color-progress-track': 'transparent',
+    'color-side-bar': '#4a7afe',
+    'color-side-bar-active-background': '#4a7afe1a',
+    'color-app-bar': '#272727',
+    'color-nav-button-hover-background': 'rgba(255, 255, 255, 0.08)',
+    'color-mobile-cell-hover': '#4a7afe',
+    'color-pc-language-active': '#4a7afe',
+    'color-pc-language-active-background': '#4a7afe20',
+    'color-pc-github-active-background': '#303030',
+    'color-mobile-language-active': '#4a7afe',
+    'color-mobile-language-active-background': '#4a7afe20',
+    'color-hl-background': '#272727',
+    'color-hl-code': '#fff',
+    'color-hl-border': '#272727',
+    'color-hl-group-a': '#7c7c7c',
+    'color-hl-group-b': '#96cbfe',
+    'color-hl-group-c': '#ff7b1e',
+    'color-hl-group-d': '#A8FFC4',
+    'color-hl-group-e': '#ff7b1e',
+    'color-hl-group-f': '#ff7b1e',
+    'color-hl-group-g': '#ff7b1e',
+    'color-hl-group-h': '#14a6e9',
+    'color-hl-group-i': '#ed4648',
+  },
+}