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

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

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

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

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

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

@@ -0,0 +1,23 @@
+// lib
+import { add as _add, use as _use, useLocale } from '../../../locale'
+import _enCN from '../../../locale/en-US'
+import _zhCN from '../../../locale/zh-CN'
+import enUS from './en-US'
+// mobile example doc
+import zhCN from './zh-CN'
+
+const { add, use: exampleUse, t, merge } = useLocale()
+
+const use = (lang: string) => {
+  _use(lang)
+  exampleUse(lang)
+}
+
+export { add, t, merge, use }
+
+// lib
+_add('zh-CN', _zhCN)
+_add('en-US', _enCN)
+// mobile example doc
+add('zh-CN', zhCN)
+add('en-US', enUS)

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

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

package/template/generators/config/i18n/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/i18n/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/i18n/sfc/src/button/style/index.less

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

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

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

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

@@ -0,0 +1,52 @@
+import { expect, test, vi } from 'vitest'
+import enUS from '../en-US'
+import { useLocale } from '../index'
+
+function mockConsole(method, fn = () => {}) {
+  const originMethod = console[method]
+
+  console[method] = fn
+
+  return {
+    mockRestore() {
+      console[method] = originMethod
+    },
+  }
+}
+
+test('test add lang', () => {
+  const { add, use, pack, packs } = useLocale()
+
+  const LANG = 'custom'
+  const PACK = {
+    button: 'Custom Text',
+  }
+
+  add(LANG, PACK)
+  use(LANG)
+
+  expect(pack.value.lang).toBe(LANG)
+  expect(packs[LANG]).toBe(PACK)
+})
+
+test('test merge lang', () => {
+  const fn = vi.fn()
+  const { mockRestore } = mockConsole('warn', fn)
+  const { add, use, merge, pack } = useLocale()
+
+  const LANG = 'en-US'
+  const PACK = {
+    button: 'Custom Text',
+  }
+
+  add(LANG, enUS)
+  use('zh_HK')
+  use(LANG)
+  merge('zh_HK', PACK)
+  merge(LANG, PACK)
+
+  expect(pack.value.button).toBe('Custom Text')
+  expect(fn).toHaveBeenCalledTimes(2)
+
+  mockRestore()
+})

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

@@ -0,0 +1,26 @@
+# Locale
+
+### Intro
+Component library uses Chinese as the default language, support multi-language switch,
+built-in support for `Chinese`, `English`.
+
+### Multi-language switch
+The `Locale` component is introduced to realize multi-language switching, and `Locale.add` is used for language extension.
+
+```js
+Locale.add('en-US', enUS)
+```
+
+Use `Locale.use` to switch languages.
+
+```js
+Locale.use('en-US')
+```
+
+Use `Locale.merge` to merge languages.
+
+```js
+Locale.merge('en-US', {
+  button: 'Hello'
+})
+```

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

@@ -0,0 +1,25 @@
+# 国际化
+
+### 介绍
+组件库使用中文作为默认语言，支持多语言切换，内置支持 `中文`，`英文`。
+
+### 多语言切换
+引入 `Locale` 组件实现多语言切换，使用 `Locale.add` 进行语言扩展。
+
+```js
+Locale.add('en-US', enUS)
+```
+
+使用 `Locale.use` 进行切换语言
+
+```js
+Locale.use('en-US')
+```
+
+使用 `Locale.merge` 进行语言合并
+
+```js
+Locale.merge('en-US', {
+  button: 'Hello'
+})
+```

package/template/generators/config/i18n/sfc/src/locale/en-US.d.ts

@@ -0,0 +1,5 @@
+import type { Pack } from '../../types'
+
+declare const enUS: Pack
+
+export default enUS

package/template/generators/config/i18n/sfc/src/locale/en-US.ts

@@ -0,0 +1,7 @@
+import { Message } from './index'
+
+// for component's internal
+export default {
+  // Button component
+  button: 'Button',
+} as Message

package/template/generators/config/i18n/sfc/src/locale/index.ts

@@ -0,0 +1,82 @@
+import { ref } from 'vue'
+import type { Ref } from 'vue'
+import zhCN from './zh-CN'
+
+export type Message = {
+  // Button component
+  button: string
+
+  // internal
+  lang?: string
+  [key: PropertyKey]: any
+}
+
+type ValueOf<T> = T[keyof T]
+
+const { hasOwnProperty } = Object.prototype
+
+const hasOwn = <T extends object>(val: T, key: PropertyKey): key is keyof T => hasOwnProperty.call(val, key)
+
+function useLocale<T = Message>() {
+  const messages: Record<string, Partial<T>> = {}
+  const currentMessage: Ref<Partial<T>> = ref({})
+
+  const add = (lang: string, message: Partial<T> & { lang?: string }) => {
+    message.lang = lang
+    messages[lang] = message
+  }
+
+  const use = (lang: string) => {
+    if (!messages[lang]) {
+      console.warn(`The ${lang} does not exist. You can mount a language message using the add method`)
+      return {}
+    }
+
+    currentMessage.value = messages[lang]
+  }
+
+  const merge = (lang: string, message: Partial<T>) => {
+    if (!messages[lang]) {
+      console.warn(`The ${lang} does not exist. You can mount a language message using the add method`)
+      return
+    }
+
+    messages[lang] = { ...messages[lang], ...message }
+
+    use(lang)
+  }
+
+  const t = (id: string): ValueOf<T> | undefined => {
+    if (hasOwn(currentMessage.value, id)) {
+      return currentMessage.value[id]
+    }
+  }
+
+  return {
+    messages,
+    currentMessage,
+    add,
+    use,
+    merge,
+    t,
+  }
+}
+
+const { messages, currentMessage, add, use, merge, t } = useLocale()
+
+add('zh-CN', zhCN)
+use('zh-CN')
+
+export { messages, currentMessage, add, use, merge, t, useLocale }
+
+export const _LocaleComponent = { messages, currentMessage, add, use, merge, t, useLocale }
+
+export default {
+  messages,
+  currentMessage,
+  add,
+  use,
+  merge,
+  t,
+  useLocale,
+}

package/template/generators/config/i18n/sfc/src/locale/zh-CN.d.ts

@@ -0,0 +1,5 @@
+import type { Pack } from '../../types'
+
+declare const zhCN: Pack
+
+export default zhCN

package/template/generators/config/i18n/sfc/src/locale/zh-CN.ts

@@ -0,0 +1,7 @@
+import { Message } from './index'
+
+// for component's internal
+export default {
+  // Button component
+  button: '按钮',
+} as Message

package/template/generators/config/i18n/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/i18n/tsx/src/button/Button.tsx

@@ -0,0 +1,35 @@
+import { defineComponent, PropType } from 'vue'
+import { createNamespace } from '../utils/components'
+import './style'
+// i18n for component's internal
+import { t } from '../locale'
+
+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}>
+          {t('button')}
+          {slots.default?.()}
+        </button>
+      )
+    }
+  },
+})

package/template/generators/config/i18n/tsx/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/tsx/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/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/i18n/tsx/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/tsx/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>

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

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

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

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

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

@@ -0,0 +1,23 @@
+// lib
+import { add as _add, use as _use, useLocale } from '../../../locale'
+import _enCN from '../../../locale/en-US'
+import _zhCN from '../../../locale/zh-CN'
+import enUS from './en-US'
+// mobile example doc
+import zhCN from './zh-CN'
+
+const { add, use: exampleUse, t, merge } = useLocale()
+
+const use = (lang: string) => {
+  _use(lang)
+  exampleUse(lang)
+}
+
+export { add, t, merge, use }
+
+// lib
+_add('zh-CN', _zhCN)
+_add('en-US', _enCN)
+// mobile example doc
+add('zh-CN', zhCN)
+add('en-US', enUS)

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

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

package/template/generators/config/i18n/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/i18n/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/i18n/tsx/src/button/style/index.less

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

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

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

package/template/generators/config/i18n/tsx/src/locale/__tests__/index.spec.js

@@ -0,0 +1,52 @@
+import { expect, test, vi } from 'vitest'
+import enUS from '../en-US'
+import { useLocale } from '../index'
+
+function mockConsole(method, fn = () => {}) {
+  const originMethod = console[method]
+
+  console[method] = fn
+
+  return {
+    mockRestore() {
+      console[method] = originMethod
+    },
+  }
+}
+
+test('test add lang', () => {
+  const { add, use, pack, packs } = useLocale()
+
+  const LANG = 'custom'
+  const PACK = {
+    button: 'Custom Text',
+  }
+
+  add(LANG, PACK)
+  use(LANG)
+
+  expect(pack.value.lang).toBe(LANG)
+  expect(packs[LANG]).toBe(PACK)
+})
+
+test('test merge lang', () => {
+  const fn = vi.fn()
+  const { mockRestore } = mockConsole('warn', fn)
+  const { add, use, merge, pack } = useLocale()
+
+  const LANG = 'en-US'
+  const PACK = {
+    button: 'Custom Text',
+  }
+
+  add(LANG, enUS)
+  use('zh_HK')
+  use(LANG)
+  merge('zh_HK', PACK)
+  merge(LANG, PACK)
+
+  expect(pack.value.button).toBe('Custom Text')
+  expect(fn).toHaveBeenCalledTimes(2)
+
+  mockRestore()
+})

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

@@ -0,0 +1,26 @@
+# Locale
+
+### Intro
+Component library uses Chinese as the default language, support multi-language switch,
+built-in support for `Chinese`, `English`.
+
+### Multi-language switch
+The `Locale` component is introduced to realize multi-language switching, and `Locale.add` is used for language extension.
+
+```js
+Locale.add('en-US', enUS)
+```
+
+Use `Locale.use` to switch languages.
+
+```js
+Locale.use('en-US')
+```
+
+Use `Locale.merge` to merge languages.
+
+```js
+Locale.merge('en-US', {
+  button: 'Hello'
+})
+```

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

@@ -0,0 +1,25 @@
+# 国际化
+
+### 介绍
+组件库使用中文作为默认语言，支持多语言切换，内置支持 `中文`，`英文`。
+
+### 多语言切换
+引入 `Locale` 组件实现多语言切换，使用 `Locale.add` 进行语言扩展。
+
+```js
+Locale.add('en-US', enUS)
+```
+
+使用 `Locale.use` 进行切换语言
+
+```js
+Locale.use('en-US')
+```
+
+使用 `Locale.merge` 进行语言合并
+
+```js
+Locale.merge('en-US', {
+  button: 'Hello'
+})
+```

package/template/generators/config/i18n/tsx/src/locale/en-US.d.ts

@@ -0,0 +1,5 @@
+import type { Pack } from '../../types'
+
+declare const enUS: Pack
+
+export default enUS