@varlet/cli 2.0.0-alpha.1663742071515 → 2.0.0-alpha.1664032365126

package/template/generators/config/default/sfc/src/button/example/ModifyColor.vue

@@ -1,7 +1,7 @@
 <script setup>
-import BButton from '../Button'
+import VarButton from '..'
 </script>
 
 <template>
-  <b-button color="#03A9F4">起步</b-button>
+  <var-button color="#03A9F4">起步</var-button>
 </template>

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

@@ -1,13 +1,12 @@
 <script setup>
+import VarButton from '..'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
-import BasicUse from './BasicUse'
-import ModifyColor from './ModifyColor'
 </script>
 
 <template>
   <app-type>基本使用</app-type>
-  <basic-use />
+  <var-button>起步</var-button>
 
   <app-type>修改颜色</app-type>
-  <modify-color />
+  <var-button color="#03A9F4">起步</var-button>
 </template>

package/template/generators/config/default/tsx/src/button/Button.tsx

@@ -2,7 +2,7 @@ import { defineComponent, PropType } from 'vue'
 import './button.less'
 
 export default defineComponent({
-  name: 'BButton',
+  name: 'VarButton',
   props: {
     color: {
       type: String,
@@ -19,7 +19,7 @@ export default defineComponent({
 
       return (
         <>
-          <button class="basic-button" style={{ background: color }} onClick={handleClick}>
+          <button class="var-button" style={{ background: color }} onClick={handleClick}>
             {slots.default?.()}
           </button>
         </>

package/template/generators/config/default/tsx/src/button/button.less

@@ -1,7 +1,7 @@
-.basic-button {
+.var-button {
   display: flex;
   padding: 10px;
-  background: #009688;
+  background: #3a7afe;
   color: #fff;
   outline: none;
   border: none;

package/template/generators/config/default/tsx/src/button/docs/zh-CN.md

@@ -1,17 +1,8 @@
 # 按钮
 
-### 引入
-
-```js
-import { createApp } from 'vue'
-import { Button } from 'basic-ui'
-
-createApp().use(Button)
-```
-
 ### 基本使用
 ```html
-<b-button>组件库从我开始</b-button>
+<var-button>组件库从我开始</var-button>
 ```
 
 ```vue
@@ -20,7 +11,7 @@ import BasicUse from '../example/BasicUse'
 
 ### 主题色按钮
 ```html
-<b-button color="#009688">组件库从我开始</b-button>
+<var-button color="#009688">组件库从我开始</var-button>
 ```
 
 ```vue

package/template/generators/config/default/tsx/src/button/example/BasicUse.vue

@@ -1,7 +1,7 @@
 <script setup>
-import BButton from '../Button'
+import VarButton from '..'
 </script>
 
 <template>
-  <b-button>起步</b-button>
+  <var-button>起步</var-button>
 </template>

package/template/generators/config/default/tsx/src/button/example/ModifyColor.vue

@@ -1,7 +1,7 @@
 <script setup>
-import BButton from '../Button'
+import VarButton from '..'
 </script>
 
 <template>
-  <b-button color="#03A9F4">起步</b-button>
+  <var-button color="#03A9F4">起步</var-button>
 </template>

package/template/generators/config/default/tsx/src/button/example/index.vue

@@ -1,13 +1,12 @@
 <script setup>
+import VarButton from '..'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
-import BasicUse from './BasicUse'
-import ModifyColor from './ModifyColor'
 </script>
 
 <template>
   <app-type>基本使用</app-type>
-  <basic-use />
+  <var-button>起步</var-button>
 
   <app-type>修改颜色</app-type>
-  <modify-color />
+  <var-button color="#03A9F4">起步</var-button>
 </template>

package/template/generators/config/i18n/base/docs/home.en-US.md

@@ -1,11 +1,3 @@
-<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">Components Library</div>
-</div>
-
 ### Intro
 
 Introduce the library, write whatever you want to write...

package/template/generators/config/i18n/base/docs/home.zh-CN.md

@@ -1,11 +1,3 @@
-<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/template/generators/config/i18n/base/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "basic-ui",
+  "name": "@varlet/ui",
   "version": "0.0.0",
-  "description": "A basic components library",
+  "description": "A components library example",
   "main": "lib/index.js",
   "module": "es/index.js",
   "typings": "types/index.d.ts",
@@ -18,6 +18,10 @@
   "sideEffects": [
     "es/**/style/*",
     "lib/**/style/*",
+    "es/style.js",
+    "es/less.js",
+    "lib/style.js",
+    "lib/less.js",
     "*.css",
     "*.less"
   ],
@@ -45,7 +49,7 @@
     "@varlet/stylelint-config": "workspace:*",
     "@varlet/touch-emulator": "workspace:*",
     "@varlet/shared": "workspace:*",
-    "@vue/test-utils": "2.0.0-rc.6",
+    "@vue/test-utils": "^2.0.2",
     "clipboard": "^2.0.6",
     "eslint": "^7.30.0",
     "lint-staged": "^10.5.0",
@@ -76,6 +80,9 @@
       "site/**",
       "public/**",
       "src/*/__tests__/**",
+      "coverage/**",
+      "highlight/**",
+      "types/index.d.ts",
       ".varlet/**"
     ],
     "extends": [
@@ -98,7 +105,7 @@
     ]
   },
   "browserslist": [
-    "Chrome >= 51",
+    "Chrome >= 54",
     "iOS >= 10"
   ],
   "packageManager": "pnpm@7.9.0"

package/template/generators/config/i18n/base/varlet.config.js

@@ -1,75 +1,10 @@
 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': '一个组件库',
-      'en-US': 'Components Library',
-    },
     header: {
       darkMode: null,
-      versions: null,
-      i18n: {
-        'zh-CN': '中文',
-        'en-US': 'English',
-      },
       playground: null,
-      github: 'https://github.com/varletjs/varlet',
     },
     menu: [
       {
@@ -105,18 +40,8 @@ module.exports = {
     ],
   },
   mobile: {
-    redirect: '/home',
-    title: {
-      'zh-CN': '一个组件库',
-      'en-US': 'Components Library',
-    },
     header: {
-      i18n: {
-        'zh-CN': '中文',
-        'en-US': 'English',
-      },
       darkMode: null,
-      github: 'https://github.com/varletjs/varlet',
     },
   },
 }

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

@@ -1,7 +1,7 @@
 <template>
-  <button class="basic-button" :style="{ background: color }">
+  <button class="var-button" :style="{ background: color }">
+    {{ pack.button }} -> 
     <slot />
-    <!--    {{ pack.button }}-->
   </button>
 </template>
 
@@ -9,10 +9,10 @@
 import { defineComponent, PropType } from 'vue'
 
 // i18n for component's internal
-// import { pack } from '../locale'
+import { pack } from '../locale'
 
 export default defineComponent({
-  name: 'BButton',
+  name: 'VarButton',
   props: {
     color: {
       type: String,
@@ -25,6 +25,7 @@ export default defineComponent({
     const handleClick = (e: Event) => props.onClick?.(e)
 
     return {
+      pack,
       handleClick,
     }
   },
@@ -32,5 +33,5 @@ export default defineComponent({
 </script>
 
 <style lang="less">
-@import 'button';
+@import './button';
 </style>

package/template/generators/config/i18n/sfc/src/button/button.less

@@ -1,7 +1,7 @@
-.basic-button {
+.var-button {
   display: flex;
   padding: 10px;
-  background: #009688;
+  background: #3a7afe;
   color: #fff;
   outline: none;
   border: none;

package/template/generators/config/i18n/sfc/src/button/docs/en-US.md

@@ -2,12 +2,16 @@
 
 ### Basic Use
 ```html
-<b-button>start</b-button>
+<var-button>start</var-button>
+```
+
+```vue
+import BasicUse from '../example/BasicUse'
 ```
 
 ### Theme Color Button
 ```html
-<b-button color="#009688">start</b-button>
+<var-button color="#009688">start</var-button>
 ```
 
 ```vue
@@ -20,7 +24,7 @@ import ModifyColor from '../example/ModifyColor'
 
 | Prop  | Description | Type | Default |
 | --- | --- | --- | --- | 
-| `color` | 按钮颜色 | _string_ | `default` |
+| `color` | Button background color | _string_ | `default` |
 
 ### Events
 

package/template/generators/config/i18n/sfc/src/button/docs/zh-CN.md

@@ -2,12 +2,16 @@
 
 ### 基本使用
 ```html
-<b-button>组件库从我开始</b-button>
+<var-button>组件库从我开始</var-button>
+```
+
+```vue
+import BasicUse from '../example/BasicUse'
 ```
 
 ### 主题色按钮
 ```html
-<b-button color="#009688">组件库从我开始</b-button>
+<var-button color="#009688">组件库从我开始</var-button>
 ```
 
 ```vue

package/template/generators/config/i18n/sfc/src/button/example/BasicUse.vue

@@ -1,11 +1,11 @@
 <script setup>
+import VarButton from '..'
 import { watchLang } from '@varlet/cli/site/utils'
-import BButton from '../Button'
 import { pack, use } from './locale'
 
 watchLang(use)
 </script>
 
 <template>
-  <b-button>{{ pack.start }}</b-button>
+  <var-button>{{ pack.start }}</var-button>
 </template>

package/template/generators/config/i18n/sfc/src/button/example/ModifyColor.vue

@@ -1,11 +1,11 @@
 <script setup>
+import VarButton from '..'
 import { watchLang } from '@varlet/cli/site/utils'
-import BButton from '../Button'
 import { pack, use } from './locale'
 
 watchLang(use, 'pc')
 </script>
 
 <template>
-  <b-button color="#03A9F4">{{ pack.start }}</b-button>
+  <var-button color="#03A9F4">{{ pack.start }}</var-button>
 </template>

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

@@ -1,7 +1,7 @@
 <script setup>
+import VarButton from '..'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import { watchLang } from '@varlet/cli/site/utils'
-import BasicUse from './BasicUse'
 import { pack, use } from './locale'
 
 watchLang(use)
@@ -9,5 +9,8 @@ watchLang(use)
 
 <template>
   <app-type>{{ pack.basicUse }}</app-type>
-  <basic-use />
+  <var-button>{{ pack.start }}</var-button>
+
+  <app-type>{{ pack.modifyColor }}</app-type>
+  <var-button color="#03A9F4">{{ pack.start }}</var-button>
 </template>

package/template/generators/config/i18n/tsx/src/button/Button.tsx

@@ -2,10 +2,10 @@ import { defineComponent, PropType } from 'vue'
 import './button.less'
 
 // i18n for component's internal
-// import { pack } from '../locale'
+import { pack } from '../locale'
 
 export default defineComponent({
-  name: 'BButton',
+  name: 'VarButton',
   props: {
     color: {
       type: String,
@@ -21,12 +21,10 @@ export default defineComponent({
       const { color } = props
 
       return (
-        <>
-          <button class="basic-button" style={{ background: color }} onClick={handleClick}>
-            {/* { pack.value.button } */}
-            {slots.default?.()}
-          </button>
-        </>
+        <button class="var-button" style={{ background: color }} onClick={handleClick}>
+          {pack.value.button} -{'> '}
+          {slots.default?.()}
+        </button>
       )
     }
   },

package/template/generators/config/i18n/tsx/src/button/button.less

@@ -1,7 +1,7 @@
-.basic-button {
+.var-button {
   display: flex;
   padding: 10px;
-  background: #009688;
+  background: #3a7afe;
   color: #fff;
   outline: none;
   border: none;

package/template/generators/config/i18n/tsx/src/button/docs/en-US.md

@@ -2,12 +2,16 @@
 
 ### Basic Use
 ```html
-<b-button>start</b-button>
+<var-button>start</var-button>
+```
+
+```vue
+import BasicUse from '../example/BasicUse'
 ```
 
 ### Theme Color Button
 ```html
-<b-button color="#009688">start</b-button>
+<var-button color="#009688">start</var-button>
 ```
 
 ```vue
@@ -20,7 +24,7 @@ import ModifyColor from '../example/ModifyColor'
 
 | Prop  | Description | Type | Default |
 | --- | --- | --- | --- | 
-| `color` | 按钮颜色 | _string_ | `default` |
+| `color` | Button background color | _string_ | `default` |
 
 ### Events
 

package/template/generators/config/i18n/tsx/src/button/docs/zh-CN.md

@@ -2,12 +2,16 @@
 
 ### 基本使用
 ```html
-<b-button>组件库从我开始</b-button>
+<var-button>组件库从我开始</var-button>
+```
+
+```vue
+import BasicUse from '../example/BasicUse'
 ```
 
 ### 主题色按钮
 ```html
-<b-button color="#009688">组件库从我开始</b-button>
+<var-button color="#009688">组件库从我开始</var-button>
 ```
 
 ```vue

package/template/generators/config/i18n/tsx/src/button/example/BasicUse.vue

@@ -1,11 +1,11 @@
 <script setup>
+import VarButton from '..'
 import { watchLang } from '@varlet/cli/site/utils'
-import BButton from '../Button'
 import { pack, use } from './locale'
 
-watchLang(use)
+watchLang(use, 'pc')
 </script>
 
 <template>
-  <b-button>{{ pack.start }}</b-button>
+  <var-button>{{ pack.start }}</var-button>
 </template>

package/template/generators/config/i18n/tsx/src/button/example/ModifyColor.vue

@@ -1,11 +1,11 @@
 <script setup>
+import VarButton from '..'
 import { watchLang } from '@varlet/cli/site/utils'
-import BButton from '../Button'
 import { pack, use } from './locale'
 
 watchLang(use, 'pc')
 </script>
 
 <template>
-  <b-button color="#03A9F4">{{ pack.start }}</b-button>
+  <var-button color="#03A9F4">{{ pack.start }}</var-button>
 </template>

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

@@ -1,7 +1,7 @@
 <script setup>
+import VarButton from '..'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import { watchLang } from '@varlet/cli/site/utils'
-import BasicUse from './BasicUse'
 import { pack, use } from './locale'
 
 watchLang(use)
@@ -9,5 +9,8 @@ watchLang(use)
 
 <template>
   <app-type>{{ pack.basicUse }}</app-type>
-  <basic-use />
+  <var-button>{{ pack.start }}</var-button>
+
+  <app-type>{{ pack.modifyColor }}</app-type>
+  <var-button color="#03A9F4">{{ pack.start }}</var-button>
 </template>

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

@@ -1,5 +1,5 @@
 import type { App } from 'vue'
-import Button from './Button.vue'
+import Button from './Button'
 
 Button.install = function (app: App) {
   app.component(Button.name, Button)

package/lib/commands/test.d.ts

@@ -1,7 +0,0 @@
-interface TestCommandOptions {
-    watch?: boolean;
-    component?: string;
-    coverage?: boolean;
-}
-export declare function test({ component, watch, coverage }: TestCommandOptions): Promise<void>;
-export {};

package/lib/commands/test.js

@@ -1,26 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.test = void 0;
-const execa_1 = __importDefault(require("execa"));
-const constant_1 = require("../shared/constant");
-const compileSiteEntry_1 = require("../compiler/compileSiteEntry");
-async function test({ component, watch, coverage }) {
-    process.env.NODE_ENV = 'test';
-    // Test cases may contain documentation example code, and site dependencies need to build
-    await (0, compileSiteEntry_1.buildSiteEntry)();
-    const args = ['--config', constant_1.VITEST_CONFIG];
-    if (!watch) {
-        args.unshift('run');
-    }
-    if (coverage) {
-        args.push('--coverage');
-    }
-    if (component) {
-        args.push('--dir', `src/${component.trim()}`);
-    }
-    await (0, execa_1.default)('vitest', args, { stdin: 'inherit', stdout: 'inherit', stderr: 'inherit' });
-}
-exports.test = test;

package/lib/commands/useVite.d.ts

@@ -1 +0,0 @@
-export declare function useVite(mode: 'build' | 'dev'): Promise<void>;