@varlet/cli 2.0.0-alpha.1663499244572 → 2.0.0-alpha.1664031123039

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

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

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

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

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...
+### 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,105 +1,112 @@
-{
-  "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",
-  "sideEffects": [
-    "es/**/style/*",
-    "lib/**/style/*",
-    "*.css",
-    "*.less"
-  ],
-  "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"
-  },
-  "peerDependencies": {
-    "vue": "^3.2.0"
-  },
-  "devDependencies": {
-    "@varlet/cli": "workspace:*",
-    "@varlet/eslint-config": "workspace:*",
-    "@varlet/icons": "workspace:*",
-    "@varlet/stylelint-config": "workspace:*",
-    "@varlet/touch-emulator": "workspace:*",
-    "@varlet/shared": "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@7.9.0"
-}
+{
+  "name": "@varlet/ui",
+  "version": "0.0.0",
+  "description": "A components library example",
+  "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",
+  "sideEffects": [
+    "es/**/style/*",
+    "lib/**/style/*",
+    "es/style.js",
+    "es/less.js",
+    "lib/style.js",
+    "lib/less.js",
+    "*.css",
+    "*.less"
+  ],
+  "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"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.0"
+  },
+  "devDependencies": {
+    "@varlet/cli": "workspace:*",
+    "@varlet/eslint-config": "workspace:*",
+    "@varlet/icons": "workspace:*",
+    "@varlet/stylelint-config": "workspace:*",
+    "@varlet/touch-emulator": "workspace:*",
+    "@varlet/shared": "workspace:*",
+    "@vue/test-utils": "^2.0.2",
+    "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__/**",
+      "coverage/**",
+      "highlight/**",
+      "types/index.d.ts",
+      ".varlet/**"
+    ],
+    "extends": [
+      "@varlet"
+    ]
+  },
+  "stylelint": {
+    "extends": [
+      "@varlet/stylelint-config"
+    ],
+    "ignoreFiles": [
+      "lib/**",
+      "es/**",
+      "umd/**",
+      "site/**",
+      "coverage/**",
+      "public/**",
+      "highlight/**",
+      ".varlet/**"
+    ]
+  },
+  "browserslist": [
+    "Chrome >= 54",
+    "iOS >= 10"
+  ],
+  "packageManager": "pnpm@7.9.0"
+}

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

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

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

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

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

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

@@ -1,24 +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 {}
+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/template/generators/config/i18n/base/varlet.config.js

@@ -1,122 +1,47 @@
-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',
-    },
-  },
-}
+module.exports = {
+  logo: './logo.svg',
+  useMobile: true,
+  pc: {
+    header: {
+      darkMode: null,
+      playground: null,
+    },
+    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: {
+    header: {
+      darkMode: null,
+    },
+  },
+}

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

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