@maple-design/cli-vue 0.0.0-stage → 1.1.1

package/template/generators/base/tsconfig.declaration.json

@@ -0,0 +1,21 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "types-generated",
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "noEmit": false,
+    "noEmitOnError": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ],
+  "exclude": [
+    "src/**/__tests__/**",
+    "src/**/example/**",
+    "src/**/__demos__/**"
+  ]
+}

package/template/generators/base/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "downlevelIteration": true,
+    "declaration": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowJs": true,
+    "lib": [
+      "esnext",
+      "dom"
+    ],
+    "allowSyntheticDefaultImports": true,
+    "jsxImportSource": "vue",
+    "jsx": "preserve",
+    "types": [
+      "vitest/globals"
+    ],
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Bundler"
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ]
+}

package/template/generators/base/ui-build.config.mjs

@@ -0,0 +1,16 @@
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+
+const root = fileURLToPath(new URL('.', import.meta.url))
+const pkg = JSON.parse(readFileSync(new URL('./package.json', import.meta.url), 'utf8'))
+
+export default {
+  root,
+  name: pkg.name,
+  globalName: 'ComponentLibrary',
+  bundleName: 'library',
+  emitTypes: false,
+  vueSfcStyles: false,
+  external: ['vue', ...Object.keys(pkg.dependencies ?? {})],
+  globals: { vue: 'Vue' },
+}

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

@@ -0,0 +1,3 @@
+### 介绍
+
+这里可以介绍一下组件库, 想写什么就写什么...

package/template/generators/config/default/base/maple.config.mjs

@@ -0,0 +1,49 @@
+import { defineConfig } from '@maple-design/cli-vue'
+
+export default defineConfig({
+  namespace: 'va',
+  logo: './logo.svg',
+  useMobile: true,
+  pc: {
+    header: {
+      darkMode: null,
+      i18n: null,
+      playground: null,
+      versions: null,
+    },
+    menu: [
+      {
+        text: {
+          'zh-CN': '开发指南',
+        },
+        type: 1,
+      },
+      {
+        text: {
+          'zh-CN': '基本介绍',
+        },
+        doc: 'home-fill',
+        type: 3,
+      },
+      {
+        text: {
+          'zh-CN': '基础组件',
+        },
+        type: 1,
+      },
+      {
+        text: {
+          'zh-CN': 'Button 按钮',
+        },
+        doc: 'button',
+        type: 2,
+      },
+    ],
+  },
+  mobile: {
+    header: {
+      i18n: null,
+      darkMode: null,
+    },
+  },
+})

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

@@ -0,0 +1,34 @@
+<template>
+  <button :class="n()" :style="{ background: color }" @click="handleClick">
+    <slot />
+  </button>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import { createNamespace } from '../utils/components'
+
+const { name, n, classes } = createNamespace('button')
+
+export default defineComponent({
+  name,
+  props: {
+    color: {
+      type: String,
+    },
+    onClick: {
+      type: Function as PropType<(e: Event) => void>,
+    },
+  },
+  setup(props) {
+    const handleClick = (e: Event) => {
+      props.onClick?.(e)
+    }
+
+    return {
+      n,
+      handleClick,
+    }
+  },
+})
+</script>

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

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

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

@@ -0,0 +1,39 @@
+# 按钮
+
+### 基本使用
+```html
+<va-button>按钮起步</va-button>
+```
+
+```vue
+import BasicUse from '../example/BasicUse'
+```
+
+### 主题色按钮
+```html
+<va-button color="#009688">按钮起步</va-button>
+```
+
+```vue
+import ModifyColor from '../example/ModifyColor'
+```
+
+## API
+
+### Button Props
+
+| 参数 | 说明 | 类型 | 默认值 | 
+| --- | --- | --- | --- | 
+| `color` | 按钮颜色 | _string_ | `default` |
+
+### Button Events
+
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| `click` | 点击按钮时触发 | `event: Event` |
+
+### Button Slots
+
+| 插槽名 | 说明 | 参数 |
+| --- | --- | --- |
+| `default` | 按钮内容 | `-` |

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

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

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

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

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

@@ -0,0 +1,12 @@
+<script setup>
+import { AppType } from '@maple-design/cli-vue/client'
+import VaButton from '..'
+</script>
+
+<template>
+  <app-type>基本使用</app-type>
+  <va-button>起步</va-button>
+
+  <app-type>修改颜色</app-type>
+  <va-button color="#03A9F4">起步</va-button>
+</template>

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

@@ -0,0 +1,8 @@
+import { withInstall } from '../utils/components'
+import Button from './Button.vue'
+
+withInstall(Button)
+
+export const _ButtonComponent = Button
+
+export default Button

package/template/generators/config/default/sfc/src/button/style/button.less

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

package/template/generators/config/default/sfc/src/button/style/index.less

@@ -0,0 +1 @@
+@import './button';

package/template/generators/config/default/sfc/src/button/style/index.ts

@@ -0,0 +1 @@
+import './index.less'

package/template/generators/config/default/sfc/src/utils/components.ts

@@ -0,0 +1,20 @@
+import type { App, Component, Plugin } from 'vue'
+import { createNamespaceFn } from '@maple-design/shared-vue'
+
+export type ComponentWithInstall<T> = T & Plugin
+
+export function withInstall<T = Component>(component: Component, target?: T): ComponentWithInstall<T> {
+  const componentWithInstall = target ?? component
+
+  ;(componentWithInstall as ComponentWithInstall<T>).install = function (app: App) {
+    const { name } = component
+
+    if (name) {
+      app.component(name, component)
+    }
+  }
+
+  return componentWithInstall as ComponentWithInstall<T>
+}
+
+export const createNamespace = createNamespaceFn('va')

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

@@ -0,0 +1,30 @@
+import { defineComponent, PropType } from 'vue'
+import { createNamespace } from '../utils/components'
+import './style'
+
+const { name, n, classes } = createNamespace('button')
+
+export default defineComponent({
+  name,
+  props: {
+    color: {
+      type: String,
+    },
+    onClick: {
+      type: Function as PropType<(e: Event) => void>,
+    },
+  },
+  setup(props, { slots }) {
+    const handleClick = (e: Event) => props.onClick?.(e)
+
+    return () => {
+      const { color } = props
+
+      return (
+        <button class={n()} style={{ background: color }} onClick={handleClick}>
+          {slots.default?.()}
+        </button>
+      )
+    }
+  },
+})

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

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

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

@@ -0,0 +1,39 @@
+# 按钮
+
+### 基本使用
+```html
+<va-button>按钮起步</va-button>
+```
+
+```vue
+import BasicUse from '../example/BasicUse'
+```
+
+### 主题色按钮
+```html
+<va-button color="#009688">按钮起步</va-button>
+```
+
+```vue
+import ModifyColor from '../example/ModifyColor'
+```
+
+## API
+
+### Button Props
+
+| 参数 | 说明 | 类型 | 默认值 | 
+| --- | --- | --- | --- | 
+| `color` | 按钮颜色 | _string_ | `default` |
+
+### Button Events
+
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| `click` | 点击按钮时触发 | `event: Event` |
+
+### Button Slots
+
+| 插槽名 | 说明 | 参数 |
+| --- | --- | --- |
+| `default` | 按钮内容 | `-` |

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

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

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

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

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

@@ -0,0 +1,12 @@
+<script setup>
+import { AppType } from '@maple-design/cli-vue/client'
+import VaButton from '..'
+</script>
+
+<template>
+  <app-type>基本使用</app-type>
+  <va-button>起步</va-button>
+
+  <app-type>修改颜色</app-type>
+  <va-button color="#03A9F4">起步</va-button>
+</template>

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

@@ -0,0 +1,8 @@
+import { withInstall } from '../utils/components'
+import Button from './Button'
+
+withInstall(Button)
+
+export const _ButtonComponent = Button
+
+export default Button

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

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

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

@@ -0,0 +1 @@
+@import './button';

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

@@ -0,0 +1 @@
+import './index.less'

package/template/generators/config/default/tsx/src/utils/components.ts

@@ -0,0 +1,20 @@
+import type { App, Component, Plugin } from 'vue'
+import { createNamespaceFn } from '@maple-design/shared-vue'
+
+export type ComponentWithInstall<T> = T & Plugin
+
+export function withInstall<T = Component>(component: Component, target?: T): ComponentWithInstall<T> {
+  const componentWithInstall = target ?? component
+
+  ;(componentWithInstall as ComponentWithInstall<T>).install = function (app: App) {
+    const { name } = component
+
+    if (name) {
+      app.component(name, component)
+    }
+  }
+
+  return componentWithInstall as ComponentWithInstall<T>
+}
+
+export const createNamespace = createNamespaceFn('va')

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

@@ -0,0 +1,3 @@
+### Intro
+
+Introduce the library, write whatever you want to write...

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

@@ -0,0 +1,3 @@
+### 介绍
+
+这里可以介绍一下组件库, 想写什么就写什么...

package/template/generators/config/i18n/base/maple.config.mjs

@@ -0,0 +1,51 @@
+import { defineConfig } from '@maple-design/cli-vue'
+
+export default defineConfig({
+  namespace: 'va',
+  logo: './logo.svg',
+  useMobile: true,
+  pc: {
+    header: {
+      darkMode: null,
+      playground: null,
+      versions: null,
+    },
+    menu: [
+      {
+        text: {
+          'zh-CN': '开发指南',
+          'en-US': 'Developer Guide',
+        },
+        type: 1,
+      },
+      {
+        text: {
+          'zh-CN': '基本介绍',
+          'en-US': 'Basic Introduce',
+        },
+        doc: 'home-fill',
+        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

@@ -0,0 +1,38 @@
+<template>
+  <button :class="n()" :style="{ background: color }" @click="handleClick">
+    {{ t('button') }}
+    <slot />
+  </button>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+// i18n for component's internal
+import { t } from '../locale'
+import { createNamespace } from '../utils/components'
+
+const { name, n, classes } = createNamespace('button')
+
+export default defineComponent({
+  name,
+  props: {
+    color: {
+      type: String,
+    },
+    onClick: {
+      type: Function as PropType<(e: Event) => void>,
+    },
+  },
+  setup(props) {
+    const handleClick = (e: Event) => {
+      props.onClick?.(e)
+    }
+
+    return {
+      t,
+      n,
+      handleClick,
+    }
+  },
+})
+</script>

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

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

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

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

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

@@ -0,0 +1,39 @@
+# 按钮
+
+### 基本使用
+```html
+<va-button>按钮起步</va-button>
+```
+
+```vue
+import BasicUse from '../example/BasicUse'
+```
+
+### 主题色按钮
+```html
+<va-button color="#009688">按钮起步</va-button>
+```
+
+```vue
+import ModifyColor from '../example/ModifyColor'
+```
+
+## API
+
+### Button Props
+
+| 参数 | 说明 | 类型 | 默认值 | 
+| --- | --- | --- | --- | 
+| `color` | 按钮颜色 | _string_ | `default` |
+
+### Button Events
+
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| `click` | 点击按钮时触发 | `event: Event` |
+
+### Button Slots
+
+| 插槽名 | 说明 | 参数 |
+| --- | --- | --- |
+| `default` | 按钮内容 | `-` |

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

@@ -0,0 +1,11 @@
+<script setup>
+import { watchLang } from '@maple-design/cli-vue/client'
+import VaButton from '..'
+import { t, use } from './locale'
+
+watchLang(use, 'pc')
+</script>
+
+<template>
+  <va-button>{{ t('start') }}</va-button>
+</template>

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

@@ -0,0 +1,11 @@
+<script setup>
+import { watchLang } from '@maple-design/cli-vue/client'
+import VaButton from '..'
+import { t, use } from './locale'
+
+watchLang(use, 'pc')
+</script>
+
+<template>
+  <va-button color="#03A9F4">{{ t('start') }}</va-button>
+</template>