@varlet/cli 1.27.20 → 2.0.0-alpha.1663742071515

package/{generators → template/generators}/config/default/tsx/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/i18n/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/i18n/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',
@@ -59,7 +59,7 @@ module.exports = {
     redirect: '/home',
     title: {
       'zh-CN': '一个组件库',
-      'en-US': 'Components Library'
+      'en-US': 'Components Library',
     },
     header: {
       darkMode: null,
@@ -108,7 +108,7 @@ module.exports = {
     redirect: '/home',
     title: {
       'zh-CN': '一个组件库',
-      'en-US': 'Components Library'
+      'en-US': 'Components Library',
     },
     header: {
       i18n: {

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

@@ -1,7 +1,7 @@
 <template>
   <button class="basic-button" :style="{ background: color }">
     <slot />
-<!--    {{ pack.button }}-->
+    <!--    {{ pack.button }}-->
   </button>
 </template>
 
@@ -15,22 +15,22 @@ 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 → template/generators}/config/i18n/sfc/src/button/button.less

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

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

@@ -9,5 +9,5 @@ watchLang(use)
 
 <template>
   <app-type>{{ pack.basicUse }}</app-type>
-  <basic-use/>
+  <basic-use />
 </template>

package/{generators/config/i18n/tsx → template/generators/config/i18n/sfc}/src/button/example/locale/en-US.ts

@@ -1,5 +1,5 @@
 export default {
   basicUse: 'Basic use',
   modifyColor: 'Modify Color',
-  start: 'Start'
+  start: 'Start',
 }

package/{generators/config/i18n/tsx → template/generators/config/i18n/sfc}/src/button/example/locale/zh-CN.ts

@@ -1,5 +1,5 @@
 export default {
   basicUse: '基本使用',
   modifyColor: '修改颜色',
-  start: '起步'
+  start: '起步',
 }

package/{generators/config/i18n/tsx → template/generators/config/i18n/sfc}/src/locale/en-US.ts

@@ -3,5 +3,5 @@ import { Pack } from './index'
 // for component's internal
 export default {
   // Button component
-  button: 'Button'
+  button: 'Button',
 } as Pack

package/{generators/config/i18n/tsx → template/generators/config/i18n/sfc}/src/locale/zh-CN.ts

@@ -3,5 +3,5 @@ import { Pack } from './index'
 // for component's internal
 export default {
   // Button component
-  button: '按钮'
+  button: '按钮',
 } as Pack

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

@@ -8,11 +8,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)
@@ -20,16 +20,14 @@ export default defineComponent({
     return () => {
       const { color } = props
 
-      return <>
-        <button
-          class="basic-button"
-          style={{ background: color }}
-          onClick={ handleClick }
-        >
-          {/* { pack.value.button } */}
-          { slots.default?.() }
-        </button>
-      </>
+      return (
+        <>
+          <button class="basic-button" style={{ background: color }} onClick={handleClick}>
+            {/* { pack.value.button } */}
+            {slots.default?.()}
+          </button>
+        </>
+      )
     }
-  }
+  },
 })

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

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

package/{generators → template/generators}/config/i18n/tsx/src/button/example/index.vue

@@ -9,5 +9,5 @@ watchLang(use)
 
 <template>
   <app-type>{{ pack.basicUse }}</app-type>
-  <basic-use/>
+  <basic-use />
 </template>

package/{generators/config/i18n/sfc → template/generators/config/i18n/tsx}/src/button/example/locale/en-US.ts

@@ -1,5 +1,5 @@
 export default {
   basicUse: 'Basic use',
   modifyColor: 'Modify Color',
-  start: 'Start'
+  start: 'Start',
 }

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

@@ -0,0 +1,23 @@
+// lib
+import _zhCN from '../../../locale/zh-CN'
+import _enCN from '../../../locale/en-US'
+// mobile example doc
+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 use = (lang: string) => {
+  _use(lang)
+  exampleUse(lang)
+}
+
+export { add, pack, packs, 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)

package/{generators/config/i18n/sfc → template/generators/config/i18n/tsx}/src/button/example/locale/zh-CN.ts

@@ -1,5 +1,5 @@
 export default {
   basicUse: '基本使用',
   modifyColor: '修改颜色',
-  start: '起步'
+  start: '起步',
 }

package/{generators/config/i18n/sfc → template/generators/config/i18n/tsx}/src/locale/en-US.ts

@@ -3,5 +3,5 @@ import { Pack } from './index'
 // for component's internal
 export default {
   // Button component
-  button: 'Button'
+  button: 'Button',
 } as Pack

package/{generators/config/i18n/sfc → template/generators/config/i18n/tsx}/src/locale/zh-CN.ts

@@ -3,5 +3,5 @@ import { Pack } from './index'
 // for component's internal
 export default {
   // Button component
-  button: '按钮'
+  button: '按钮',
 } as Pack

package/varlet.default.config.js

@@ -4,8 +4,7 @@ module.exports = {
   host: 'localhost',
   port: 8080,
   title: 'VARLET',
-  themesKey: 'VARLET_THEMES',
-  logo: 'https://varlet-varletjs.vercel.app/varlet_icon.png',
+  logo: 'https://varlet.gitee.io/varlet-ui/varlet_icon.png',
   defaultLanguage: 'zh-CN',
   highlight: {
     /**
@@ -20,6 +19,128 @@ module.exports = {
   pc: {
     menu: [],
     redirect: '/index',
+    indexPage: {
+      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',
+      },
+      started: {
+        'zh-CN': '起步',
+        'en-US': 'GET STARTED',
+      },
+      features: [
+        {
+          name: {
+            'zh-CN': '组件丰富',
+            'en-US': 'Rich components',
+          },
+          description: {
+            'zh-CN': '提供 50 个高质量通用组件',
+            'en-US': 'Provide 50 high quality general purpose components',
+          },
+        },
+        {
+          name: {
+            'zh-CN': '按需引入',
+            'en-US': 'On-Demand',
+          },
+          description: {
+            'zh-CN': '每一个组件都可单独引入，并有着良好的 tree-shaking 优化',
+            'en-US': 'Each component can be imported separately and has good tree-shaking optimization',
+          },
+        },
+        {
+          name: {
+            'zh-CN': '主题定制',
+            'en-US': 'Theme customization',
+          },
+          description: {
+            'zh-CN': '内置亮色和暗色两种主题，支持组件的样式自定义',
+            'en-US': 'Built-in light and dark themes, support style customization of components',
+          },
+        },
+        {
+          name: {
+            'zh-CN': '国际化',
+            'en-US': 'Locale',
+          },
+          description: {
+            'zh-CN': '内置国际化 API，内置中文和英文的语言包',
+            'en-US': 'Built-in i18n API, which supports both Chinese and English languages by default',
+          },
+        },
+        {
+          name: {
+            'zh-CN': '支持 Typescript',
+            'en-US': 'Support typescript',
+          },
+          description: {
+            'zh-CN': '使用 Typescript 构建，提供良好的组件类型系统',
+            'en-US': 'Built with typescript, which provides a nice components type system',
+          },
+        },
+        {
+          name: {
+            'zh-CN': '服务端渲染',
+            'en-US': 'Server-side rendering',
+          },
+          description: {
+            'zh-CN': '对服务端渲染支持良好，并对 Nuxt 进行了适配',
+            'en-US': 'Good support for server-side rendering and adaptation to Nuxt',
+          },
+        },
+        {
+          name: {
+            'zh-CN': '国人开发',
+            'en-US': 'Developed by Chinese',
+          },
+          description: {
+            'zh-CN': '由国人开发，完善的中英文文档和后勤保障',
+            'en-US': 'Complete Chinese and English documentation and logistics support',
+          },
+        },
+        {
+          name: {
+            'zh-CN': 'IDE 支持',
+            'en-US': 'IDE Code Support',
+          },
+          description: {
+            'zh-CN': '支持在 webstorm，vscode 中的组件语法高亮, 并提供 vscode 插件为开发提升效率',
+            'en-US':
+              'Supports to highlight the component syntax for webstorm and vscode, and provides a separate helper plugin for vscode',
+          },
+        },
+        {
+          name: {
+            'zh-CN': '组件库快速成型工具',
+            'en-US': 'Component library toolchain',
+          },
+          description: {
+            'zh-CN': '开源了搭建本组件库的所有工具链，提供快速开发组件库的能力',
+            'en-US':
+              'Open-sourced the toolchain for building this component library, providing the ability to rapidly develop the component library',
+          },
+        },
+      ],
+      contributors: {
+        label: {
+          'zh-CN': '贡献者',
+          'en-US': 'Contributors',
+        },
+        link: 'https://github.com/varletjs/varlet/graphs/contributors',
+        image: 'https://contrib.rocks/image?repo=varletjs/varlet',
+      },
+      license: {
+        'zh-CN': '组件库基于 MIT 协议，您可以自由的使用和分享',
+        'en-US': 'Released under the MIT License, You can use and share freely.',
+      },
+      copyright: {
+        'zh-CN': 'Copyright © 2022 varletjs 组织成员以及 varlet 的贡献者们',
+        'en-US': 'Copyright © 2022 varletjs member and varlet contributors.',
+      },
+    },
     title: {
       'zh-CN': '面向 Vue3 的 Material 风格移动端组件库',
       'en-US': 'Material design mobile components built for Vue3',
@@ -31,7 +152,7 @@ module.exports = {
       },
       versions: null,
       github: 'https://github.com/varletjs/varlet',
-      playground: 'https://varlet-ui-playground.vercel.app',
+      playground: 'https://varlet-ui-playground-git-dev-varletjs.vercel.app/',
       darkMode: true,
     },
     clipboard: {
@@ -58,13 +179,14 @@ module.exports = {
       darkMode: true,
     },
   },
-  themes: {
+  themeKey: 'VARLET_THEME',
+  lightTheme: {
     '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-index-page-background': '#f2f2f2',
+    'color-index-page-feature-background': '#fff',
+    'color-index-page-logo-mask-background': 'linear-gradient(-45deg, #8baff8 50%, #84e0ff 50%)',
+    'color-index-page-second-text-color': 'rgba(60, 60, 60, .7)',
+    'color-index-page-divider-color': '#ddd',
     'color-bar': '#fff',
     'color-sub-bar': '#f5f5f5',
     'color-text': '#555',
@@ -100,13 +222,13 @@ module.exports = {
     'color-hl-group-h': '#06a6e9',
     'color-hl-group-i': '#f23733',
   },
-  darkThemes: {
+  darkTheme: {
     '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-index-page-background': '#1e1e1e',
+    'color-index-page-feature-background': '#303030',
+    'color-index-page-logo-mask-background': 'linear-gradient(-45deg, #729dfc 50%, #6859f4 50%)',
+    'color-index-page-second-text-color': 'rgba(255, 255, 255, .75)',
+    'color-index-page-divider-color': 'rgba(84, 84, 84, .8)',
     'color-bar': '#1e1e1e',
     'color-sub-bar': '#272727',
     'color-text': '#fff',

package/site/mobile/components/styles/common.less

@@ -1,64 +0,0 @@
-@import './var';
-
-.var-site {
-  &--box {
-    box-sizing: border-box;
-
-    * {
-      box-sizing: border-box;
-    }
-  }
-
-  &--relative {
-    position: relative;
-  }
-
-  &--absolute {
-    position: absolute;
-  }
-
-  &--hidden {
-    overflow: hidden;
-  }
-
-  &--lock {
-    overflow: hidden;
-  }
-
-  &--block {
-    display: block;
-  }
-
-  &--inline-block {
-    display: inline-block;
-  }
-
-  &--flex {
-    display: flex;
-  }
-
-  &--inline-flex {
-    display: inline-flex;
-  }
-}
-
-:root {
-  --site-font-size-xs: @site-font-size-xs;
-  --site-font-size-sm: @site-font-size-sm;
-  --site-font-size-md: @site-font-size-md;
-  --site-font-size-lg: @site-font-size-lg;
-  --site-icon-size-xs: @site-icon-size-xs;
-  --site-icon-size-sm: @site-icon-size-sm;
-  --site-icon-size-md: @site-icon-size-md;
-  --site-icon-size-lg: @site-icon-size-lg;
-  --site-color-primary: @site-color-primary;
-  --site-color-info: @site-color-info;
-  --site-color-success: @site-color-success;
-  --site-color-warning: @site-color-warning;
-  --site-color-danger: @site-color-danger;
-  --site-color-disabled: @site-color-disabled;
-  --site-cubic-bezier: @site-cubic-bezier;
-  --site-shadow-key-umbra-opacity: @site-shadow-key-umbra-opacity;
-  --site-shadow-key-penumbra-opacity: @site-shadow-key-penumbra-opacity;
-  --site-shadow-key-ambient-opacity: @site-shadow-key-ambient-opacity;
-}