@varlet/cli 1.27.10 → 1.27.11-alpha.1653999804324

package/generators/base/README.md

@@ -74,3 +74,9 @@ tips:
 pnpm release
 ```
 
+#### Create component template files
+
+```shell
+pnpm create <componentName>
+```
+

package/generators/config/default/base/package.json

@@ -0,0 +1,98 @@
+{
+  "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": {
+    "preinstall": "npx only-allow pnpm",
+    "dev": "varlet-cli dev",
+    "build": "varlet-cli build",
+    "preview": "varlet-cli preview",
+    "compile": "varlet-cli compile",
+    "lint": "varlet-cli lint",
+    "changelog": "varlet-cli changelog",
+    "release": "pnpm compile && varlet-cli release",
+    "test": "varlet-cli jest",
+    "test:watch": "varlet-cli jest -w",
+    "test:watchAll": "varlet-cli jest -wa",
+    "create": "varlet-cli create -d"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.0"
+  },
+  "devDependencies": {
+    "@varlet/cli": "workspace:*",
+    "@varlet/eslint-config": "workspace:*",
+    "@varlet/icons": "workspace:*",
+    "@varlet/stylelint-config": "workspace:*",
+    "@varlet/touch-emulator": "workspace:*",
+    "@vue/test-utils": "2.0.0-rc.6",
+    "clipboard": "^2.0.6",
+    "eslint": "^7.30.0",
+    "lint-staged": "^10.5.0",
+    "live-server": "^1.2.1",
+    "lodash-es": "^4.17.21",
+    "prettier": "^2.3.2",
+    "simple-git-hooks": "^2.7.0",
+    "stylelint": "^13.13.1",
+    "typescript": "^4.4.4",
+    "vue": "3.2.25",
+    "vue-router": "4.0.12"
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,vue,less}": "prettier --write",
+    "*.{ts,tsx,js,vue}": "eslint --fix",
+    "*.{vue,css,less}": "stylelint --fix"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "pnpm exec lint-staged --allow-empty --concurrent false",
+    "commit-msg": "npx --no-install varlet-cli commit-lint $1"
+  },
+  "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/**",
+      ".varlet/**"
+    ]
+  },
+  "browserslist": [
+    "Chrome >= 51",
+    "iOS >= 10"
+  ],
+  "packageManager": "pnpm@6.24.3"
+}

package/generators/{base → config/default/base}/varlet.config.js

@@ -103,6 +103,7 @@ module.exports = {
     },
     header: {
       i18n: null,
+      darkMode: null,
       github: 'https://github.com/varletjs/varlet',
     },
   },

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

@@ -6,7 +6,6 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
-
 export default defineComponent({
   name: 'BButton',
   props: {
@@ -19,7 +18,6 @@ export default defineComponent({
   },
   setup(props) {
     const handleClick = (e: Event) => props.onClick?.(e)
-
     return {
       handleClick
     }

package/generators/config/default/sfc/src/button/__tests__/index.spec.js

@@ -0,0 +1,7 @@
+import Button from '..'
+import { createApp } from 'vue'
+
+test('test button use', () => {
+  const app = createApp({}).use(Button)
+  expect(app.component(Button.name)).toBeTruthy()
+})

package/generators/config/default/sfc/src/button/example/BasicUse.vue

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

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

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

package/generators/{tsx → config/default/sfc}/src/button/example/index.vue

@@ -1,3 +1,9 @@
+<script setup>
+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/>
@@ -5,19 +11,3 @@
   <app-type>修改颜色</app-type>
   <modify-color/>
 </template>
-
-<script>
-import Button from '../Button'
-import AppType from '@varlet/cli/site/mobile/components/AppType'
-import BasicUse from './BasicUse'
-import ModifyColor from './ModifyColor'
-
-export default {
-  components: {
-    [Button.name]: Button,
-    AppType,
-    BasicUse,
-    ModifyColor
-  },
-}
-</script>

package/generators/config/default/tsx/src/button/__tests__/index.spec.js

@@ -0,0 +1,7 @@
+import Button from '..'
+import { createApp } from 'vue'
+
+test('test button use', () => {
+  const app = createApp({}).use(Button)
+  expect(app.component(Button.name)).toBeTruthy()
+})

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

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

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

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

package/generators/{sfc → config/default/tsx}/src/button/example/index.vue

@@ -1,3 +1,9 @@
+<script setup>
+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/>
@@ -5,19 +11,3 @@
   <app-type>修改颜色</app-type>
   <modify-color/>
 </template>
-
-<script>
-import Button from '../Button'
-import AppType from '@varlet/cli/site/mobile/components/AppType'
-import BasicUse from './BasicUse'
-import ModifyColor from './ModifyColor'
-
-export default {
-  components: {
-    [Button.name]: Button,
-    AppType,
-    BasicUse,
-    ModifyColor
-  },
-}
-</script>

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

@@ -0,0 +1,11 @@
+<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/generators/config/i18n/base/docs/home.zh-CN.md

@@ -0,0 +1,11 @@
+<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/{base → config/i18n/base}/package.json

@@ -26,7 +26,8 @@
     "release": "pnpm compile && varlet-cli release",
     "test": "varlet-cli jest",
     "test:watch": "varlet-cli jest -w",
-    "test:watchAll": "varlet-cli jest -wa"
+    "test:watchAll": "varlet-cli jest -wa",
+    "create": "varlet-cli create"
   },
   "peerDependencies": {
     "vue": "^3.2.0"
@@ -47,7 +48,7 @@
     "simple-git-hooks": "^2.7.0",
     "stylelint": "^13.13.1",
     "typescript": "^4.4.4",
-    "vue": "3.2.16",
+    "vue": "3.2.25",
     "vue-router": "4.0.12"
   },
   "lint-staged": {

package/generators/config/i18n/base/types/basicComponent.d.ts

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

package/generators/config/i18n/base/types/button.d.ts

@@ -0,0 +1,12 @@
+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/config/i18n/base/types/index.d.ts

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

package/generators/config/i18n/base/types/locale.d.ts

@@ -0,0 +1,24 @@
+import type { Ref } from 'vue'
+
+export type Pack = {
+  button: string
+}
+
+interface Locale {
+  packs: Record<string, Partial<Pack>>
+  pack: Ref<Partial<Pack>>
+  add(lang: string, pack: Partial<Pack>): void
+  use(lang: string): void
+  merge(lang: string, pack: Partial<Pack>): void
+  useLocale<T = Pack>(): {
+    packs: Record<string, Partial<T>>
+    pack: Ref<Partial<T>>
+    add(lang: string, pack: Partial<T> & { lang?: string }): void
+    use(lang: string): void
+    merge(lang: string, pack: Partial<T>): void
+  }
+}
+
+export const Locale: Locale
+
+export class _LocaleComponent {}

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

@@ -0,0 +1,122 @@
+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: [
+      {
+        text: {
+          'zh-CN': '开发指南',
+          'en-US': 'Developer guide',
+        },
+        type: 1,
+      },
+      {
+        text: {
+          'zh-CN': '基本介绍',
+          'en-US': 'Basic Introduce',
+        },
+        doc: 'home',
+        type: 3,
+      },
+      {
+        text: {
+          'zh-CN': '基础组件',
+          'en-US': 'Basic Components',
+        },
+        type: 1,
+      },
+      {
+        text: {
+          'zh-CN': 'Button 按钮',
+          'en-US': 'Button',
+        },
+        doc: 'button',
+        type: 2,
+      },
+    ],
+  },
+  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/generators/config/i18n/sfc/src/button/Button.vue

@@ -0,0 +1,36 @@
+<template>
+  <button class="basic-button" :style="{ background: color }">
+    <slot />
+<!--    {{ pack.button }}-->
+  </button>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+
+// i18n for component's internal
+// import { pack } from '../locale'
+
+export default defineComponent({
+  name: 'BButton',
+  props: {
+    color: {
+      type: String
+    },
+    onClick: {
+      type: Function as PropType<(e: Event) => void>
+    }
+  },
+  setup(props) {
+    const handleClick = (e: Event) => props.onClick?.(e)
+
+    return {
+      handleClick
+    }
+  }
+})
+</script>
+
+<style lang="less">
+@import "button";
+</style>

package/generators/config/i18n/sfc/src/button/__tests__/index.spec.js

@@ -0,0 +1,7 @@
+import Button from '../index'
+import { createApp } from 'vue'
+
+test('test button use', () => {
+  const app = createApp({}).use(Button)
+  expect(app.component(Button.name)).toBeTruthy()
+})

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

@@ -0,0 +1,14 @@
+.basic-button {
+  display: flex;
+  padding: 10px;
+  background: #009688;
+  color: #fff;
+  outline: none;
+  border: none;
+  border-radius: 2px;
+  cursor: pointer;
+
+  &:active {
+    opacity: 0.9
+  }
+}

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

@@ -0,0 +1,35 @@
+# Button
+
+### Basic Use
+```html
+<b-button>start</b-button>
+```
+
+### Theme Color Button
+```html
+<b-button color="#009688">start</b-button>
+```
+
+```vue
+import ModifyColor from '../example/ModifyColor'
+```
+
+## API
+
+### Props
+
+| Prop  | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `color` | 按钮颜色 | _string_ | `default` |
+
+### Events
+
+| Event | Description | Arguments |
+| --- | --- | --- |
+| `click` | Triggered when the button is clicked | `event: Event` |
+
+### Slots
+
+| Slot      | Description | Arguments |
+|-----------| --- | --- |
+| `default` | Button content | `-` |

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

@@ -0,0 +1,35 @@
+# 按钮
+
+### 基本使用
+```html
+<b-button>组件库从我开始</b-button>
+```
+
+### 主题色按钮
+```html
+<b-button color="#009688">组件库从我开始</b-button>
+```
+
+```vue
+import ModifyColor from '../example/ModifyColor'
+```
+
+## API
+
+### 属性
+
+| 参数 | 说明 | 类型 | 默认值 | 
+| --- | --- | --- | --- | 
+| `color` | 按钮颜色 | _string_ | `default` |
+
+### 事件
+
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| `click` | 点击按钮时触发 | `event: Event` |
+
+### 插槽
+
+| 插槽名 | 说明 | 参数 |
+| --- | --- | --- |
+| `default` | 按钮内容 | `-` |

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

@@ -0,0 +1,11 @@
+<script setup>
+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>
+</template>

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

@@ -0,0 +1,11 @@
+<script setup>
+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>
+</template>

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

@@ -0,0 +1,13 @@
+<script setup>
+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)
+</script>
+
+<template>
+  <app-type>{{ pack.basicUse }}</app-type>
+  <basic-use/>
+</template>