@varlet/cli 1.27.17-alpha.1656907860130 → 1.27.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENCE +21 -21
- package/README.en-US.md +401 -401
- package/README.md +396 -396
- package/generators/base/.prettierignore +9 -9
- package/generators/base/.prettierrc +5 -5
- package/generators/base/README.md +82 -82
- package/generators/base/babel.config.js +10 -10
- package/generators/base/public/highlight.css +1 -1
- package/generators/base/public/logo.svg +1 -1
- package/generators/base/shims/shims-md.d.ts +4 -4
- package/generators/base/shims/shims-vue.d.ts +6 -6
- package/generators/base/tsconfig.json +13 -13
- package/generators/config/default/base/docs/home.zh-CN.md +10 -10
- package/generators/config/default/base/types/basicComponent.d.ts +7 -7
- package/generators/config/default/base/types/button.d.ts +12 -12
- package/generators/config/default/base/types/index.d.ts +6 -6
- package/generators/config/default/base/varlet.config.js +110 -110
- package/generators/config/default/sfc/src/button/Button.vue +30 -30
- package/generators/config/default/sfc/src/button/__tests__/index.spec.js +7 -7
- package/generators/config/default/sfc/src/button/button.less +14 -14
- package/generators/config/default/sfc/src/button/docs/zh-CN.md +47 -47
- package/generators/config/default/sfc/src/button/example/BasicUse.vue +7 -7
- package/generators/config/default/sfc/src/button/example/ModifyColor.vue +7 -7
- package/generators/config/default/sfc/src/button/example/index.vue +13 -13
- package/generators/config/default/sfc/src/button/index.ts +10 -10
- package/generators/config/default/tsx/src/button/Button.tsx +31 -31
- package/generators/config/default/tsx/src/button/__tests__/index.spec.js +7 -7
- package/generators/config/default/tsx/src/button/button.less +14 -14
- package/generators/config/default/tsx/src/button/docs/zh-CN.md +47 -47
- package/generators/config/default/tsx/src/button/example/BasicUse.vue +7 -7
- package/generators/config/default/tsx/src/button/example/ModifyColor.vue +7 -7
- package/generators/config/default/tsx/src/button/example/index.vue +13 -13
- package/generators/config/default/tsx/src/button/index.ts +10 -10
- package/generators/config/i18n/base/docs/home.en-US.md +11 -11
- package/generators/config/i18n/base/docs/home.zh-CN.md +10 -10
- package/generators/config/i18n/base/types/basicComponent.d.ts +7 -7
- package/generators/config/i18n/base/types/button.d.ts +12 -12
- package/generators/config/i18n/base/types/index.d.ts +7 -7
- package/generators/config/i18n/base/types/locale.d.ts +24 -24
- package/generators/config/i18n/base/varlet.config.js +122 -122
- package/generators/config/i18n/sfc/src/button/Button.vue +36 -36
- package/generators/config/i18n/sfc/src/button/__tests__/index.spec.js +7 -7
- package/generators/config/i18n/sfc/src/button/button.less +14 -14
- package/generators/config/i18n/sfc/src/button/docs/en-US.md +34 -34
- package/generators/config/i18n/sfc/src/button/docs/zh-CN.md +34 -34
- package/generators/config/i18n/sfc/src/button/example/BasicUse.vue +11 -11
- package/generators/config/i18n/sfc/src/button/example/ModifyColor.vue +11 -11
- package/generators/config/i18n/sfc/src/button/example/index.vue +13 -13
- package/generators/config/i18n/sfc/src/button/example/locale/en-US.ts +5 -5
- package/generators/config/i18n/sfc/src/button/example/locale/index.ts +23 -23
- package/generators/config/i18n/sfc/src/button/example/locale/zh-CN.ts +5 -5
- package/generators/config/i18n/sfc/src/button/index.ts +10 -10
- package/generators/config/i18n/sfc/src/locale/__tests__/index.spec.js +51 -51
- package/generators/config/i18n/sfc/src/locale/docs/en-US.md +26 -26
- package/generators/config/i18n/sfc/src/locale/docs/zh-CN.md +25 -25
- package/generators/config/i18n/sfc/src/locale/en-US.d.ts +5 -5
- package/generators/config/i18n/sfc/src/locale/en-US.ts +7 -7
- package/generators/config/i18n/sfc/src/locale/index.ts +67 -67
- package/generators/config/i18n/sfc/src/locale/zh-CN.d.ts +5 -5
- package/generators/config/i18n/sfc/src/locale/zh-CN.ts +7 -7
- package/generators/config/i18n/tsx/src/button/Button.tsx +35 -35
- package/generators/config/i18n/tsx/src/button/__tests__/index.spec.js +7 -7
- package/generators/config/i18n/tsx/src/button/button.less +14 -14
- package/generators/config/i18n/tsx/src/button/docs/en-US.md +34 -34
- package/generators/config/i18n/tsx/src/button/docs/zh-CN.md +34 -34
- package/generators/config/i18n/tsx/src/button/example/BasicUse.vue +11 -11
- package/generators/config/i18n/tsx/src/button/example/ModifyColor.vue +11 -11
- package/generators/config/i18n/tsx/src/button/example/index.vue +13 -13
- package/generators/config/i18n/tsx/src/button/example/locale/en-US.ts +5 -5
- package/generators/config/i18n/tsx/src/button/example/locale/index.ts +23 -23
- package/generators/config/i18n/tsx/src/button/example/locale/zh-CN.ts +5 -5
- package/generators/config/i18n/tsx/src/button/index.ts +10 -10
- package/generators/config/i18n/tsx/src/locale/__tests__/index.spec.js +51 -51
- package/generators/config/i18n/tsx/src/locale/docs/en-US.md +26 -26
- package/generators/config/i18n/tsx/src/locale/docs/zh-CN.md +25 -25
- package/generators/config/i18n/tsx/src/locale/en-US.d.ts +5 -5
- package/generators/config/i18n/tsx/src/locale/en-US.ts +7 -7
- package/generators/config/i18n/tsx/src/locale/index.ts +67 -67
- package/generators/config/i18n/tsx/src/locale/zh-CN.d.ts +5 -5
- package/generators/config/i18n/tsx/src/locale/zh-CN.ts +7 -7
- package/lib/commands/build.d.ts +1 -1
- package/lib/commands/build.js +67 -67
- package/lib/commands/changelog.d.ts +6 -6
- package/lib/commands/changelog.js +27 -27
- package/lib/commands/commitLint.d.ts +1 -1
- package/lib/commands/commitLint.js +21 -21
- package/lib/commands/compile.d.ts +5 -5
- package/lib/commands/compile.js +119 -119
- package/lib/commands/create.d.ts +3 -3
- package/lib/commands/create.js +132 -132
- package/lib/commands/dev.d.ts +3 -3
- package/lib/commands/dev.js +123 -123
- package/lib/commands/gen.d.ts +1 -1
- package/lib/commands/gen.js +112 -112
- package/lib/commands/jest.d.ts +8 -8
- package/lib/commands/jest.js +81 -81
- package/lib/commands/lint.d.ts +1 -1
- package/lib/commands/lint.js +123 -123
- package/lib/commands/preview.d.ts +1 -1
- package/lib/commands/preview.js +74 -74
- package/lib/commands/release.d.ts +3 -3
- package/lib/commands/release.js +269 -267
- package/lib/compiler/compileModule.d.ts +5 -5
- package/lib/compiler/compileModule.js +186 -186
- package/lib/compiler/compileSFC.d.ts +2 -2
- package/lib/compiler/compileSFC.js +132 -132
- package/lib/compiler/compileScript.d.ts +17 -17
- package/lib/compiler/compileScript.js +202 -202
- package/lib/compiler/compileSiteEntry.d.ts +13 -13
- package/lib/compiler/compileSiteEntry.js +237 -237
- package/lib/compiler/compileStyle.d.ts +11 -11
- package/lib/compiler/compileStyle.js +101 -101
- package/lib/compiler/compileTemplateHighlight.d.ts +10 -10
- package/lib/compiler/compileTemplateHighlight.js +193 -193
- package/lib/compiler/compileTypes.d.ts +2 -2
- package/lib/compiler/compileTypes.js +88 -88
- package/lib/config/babel.config.d.ts +2 -2
- package/lib/config/babel.config.js +31 -31
- package/lib/config/babel.sfc.transform.d.ts +1 -1
- package/lib/config/babel.sfc.transform.js +18 -18
- package/lib/config/jest.config.d.ts +1 -1
- package/lib/config/jest.config.js +36 -36
- package/lib/config/jest.media.mock.js +2 -2
- package/lib/config/jest.style.mock.js +2 -2
- package/lib/config/varlet.config.d.ts +1 -1
- package/lib/config/varlet.config.js +24 -24
- package/lib/config/vite.config.d.ts +5 -5
- package/lib/config/vite.config.js +162 -162
- package/lib/index.d.ts +2 -2
- package/lib/index.js +83 -83
- package/lib/shared/constant.d.ts +43 -43
- package/lib/shared/constant.js +50 -50
- package/lib/shared/fsUtils.d.ts +12 -12
- package/lib/shared/fsUtils.js +108 -108
- package/lib/shared/logger.d.ts +7 -7
- package/lib/shared/logger.js +20 -20
- package/package.json +8 -7
- package/preset.js +3 -3
- package/site/components/button/Button.vue +84 -84
- package/site/components/button/button.less +183 -183
- package/site/components/button/index.ts +10 -10
- package/site/components/button/props.ts +70 -70
- package/site/components/cell/Cell.vue +42 -42
- package/site/components/cell/cell.less +74 -74
- package/site/components/cell/index.ts +10 -10
- package/site/components/cell/props.ts +27 -27
- package/site/components/code-example/CodeExample.vue +143 -143
- package/site/components/code-example/codeExample.less +41 -41
- package/site/components/code-example/index.ts +10 -10
- package/site/components/context/index.ts +17 -17
- package/site/components/context/lock.ts +103 -103
- package/site/components/context/zIndex.ts +20 -20
- package/site/components/icon/Icon.vue +68 -68
- package/site/components/icon/icon.less +26 -26
- package/site/components/icon/index.ts +10 -10
- package/site/components/icon/props.ts +24 -24
- package/site/components/loading/Loading.vue +55 -55
- package/site/components/loading/index.ts +10 -10
- package/site/components/loading/loading.less +420 -420
- package/site/components/loading/props.ts +37 -37
- package/site/components/progress/Progress.vue +108 -108
- package/site/components/progress/index.ts +10 -10
- package/site/components/progress/progress.less +98 -98
- package/site/components/progress/props.ts +55 -55
- package/site/components/ripple/index.ts +167 -167
- package/site/components/ripple/ripple.less +17 -17
- package/site/components/snackbar/Snackbar.vue +38 -38
- package/site/components/snackbar/core.vue +117 -117
- package/site/components/snackbar/index.tsx +270 -270
- package/site/components/snackbar/props.ts +94 -94
- package/site/components/snackbar/snackbar.less +135 -135
- package/site/components/styles/common.less +64 -64
- package/site/components/styles/elevation.less +126 -126
- package/site/components/styles/var.less +27 -27
- package/site/components/utils/components.ts +69 -69
- package/site/components/utils/elements.ts +85 -85
- package/site/index.html +49 -49
- package/site/mobile/App.vue +291 -291
- package/site/mobile/components/AppHome.vue +134 -134
- package/site/mobile/components/AppType.vue +22 -22
- package/site/mobile/components/app-bar/AppBar.vue +69 -69
- package/site/mobile/components/app-bar/appBar.less +56 -56
- package/site/mobile/components/app-bar/index.ts +10 -10
- package/site/mobile/components/app-bar/props.ts +25 -25
- package/site/mobile/components/styles/common.less +64 -64
- package/site/mobile/components/styles/elevation.less +126 -126
- package/site/mobile/components/styles/var.less +27 -27
- package/site/mobile/main.ts +74 -74
- package/site/mobile.html +41 -41
- package/site/module.d.ts +5 -5
- package/site/pc/App.vue +43 -43
- package/site/pc/Layout.vue +397 -397
- package/site/pc/components/AnimationBox.vue +45 -45
- package/site/pc/components/AppHeader.vue +355 -355
- package/site/pc/components/AppMobile.vue +54 -54
- package/site/pc/components/AppSidebar.vue +134 -134
- package/site/pc/components/LogoAnimation.vue +119 -119
- package/site/pc/floating.ts +9 -9
- package/site/pc/main.ts +94 -94
- package/site/pc/pages/index/index.less +194 -194
- package/site/pc/pages/index/index.vue +145 -128
- package/site/pc/pages/index/locale/en-US.ts +5 -3
- package/site/pc/pages/index/locale/zh-CN.ts +5 -3
- package/site/tsconfig.json +11 -11
- package/site/useProgress.ts +75 -75
- package/site/utils.ts +153 -153
- package/tsconfig.json +14 -14
- package/varlet.default.config.js +145 -151
|
@@ -1,51 +1,51 @@
|
|
|
1
|
-
import enUS from '../en-US'
|
|
2
|
-
import { useLocale } from '../index'
|
|
3
|
-
|
|
4
|
-
function mockConsole(method, fn = () => {}) {
|
|
5
|
-
const originMethod = console[method]
|
|
6
|
-
|
|
7
|
-
console[method] = fn
|
|
8
|
-
|
|
9
|
-
return {
|
|
10
|
-
mockRestore() {
|
|
11
|
-
console[method] = originMethod
|
|
12
|
-
},
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
test('test add lang', () => {
|
|
17
|
-
const { add, use, pack, packs } = useLocale()
|
|
18
|
-
|
|
19
|
-
const LANG = 'custom'
|
|
20
|
-
const PACK = {
|
|
21
|
-
button: 'Custom Text',
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
add(LANG, PACK)
|
|
25
|
-
use(LANG)
|
|
26
|
-
|
|
27
|
-
expect(pack.value.lang).toBe(LANG)
|
|
28
|
-
expect(packs[LANG]).toBe(PACK)
|
|
29
|
-
})
|
|
30
|
-
|
|
31
|
-
test('test merge lang', () => {
|
|
32
|
-
const fn = jest.fn()
|
|
33
|
-
const { mockRestore } = mockConsole('warn', fn)
|
|
34
|
-
const { add, use, merge, pack } = useLocale()
|
|
35
|
-
|
|
36
|
-
const LANG = 'en-US'
|
|
37
|
-
const PACK = {
|
|
38
|
-
button: 'Custom Text',
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
add(LANG, enUS)
|
|
42
|
-
use('zh_HK')
|
|
43
|
-
use(LANG)
|
|
44
|
-
merge('zh_HK', PACK)
|
|
45
|
-
merge(LANG, PACK)
|
|
46
|
-
|
|
47
|
-
expect(pack.value.button).toBe('Custom Text')
|
|
48
|
-
expect(fn).toHaveBeenCalledTimes(2)
|
|
49
|
-
|
|
50
|
-
mockRestore()
|
|
51
|
-
})
|
|
1
|
+
import enUS from '../en-US'
|
|
2
|
+
import { useLocale } from '../index'
|
|
3
|
+
|
|
4
|
+
function mockConsole(method, fn = () => {}) {
|
|
5
|
+
const originMethod = console[method]
|
|
6
|
+
|
|
7
|
+
console[method] = fn
|
|
8
|
+
|
|
9
|
+
return {
|
|
10
|
+
mockRestore() {
|
|
11
|
+
console[method] = originMethod
|
|
12
|
+
},
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
test('test add lang', () => {
|
|
17
|
+
const { add, use, pack, packs } = useLocale()
|
|
18
|
+
|
|
19
|
+
const LANG = 'custom'
|
|
20
|
+
const PACK = {
|
|
21
|
+
button: 'Custom Text',
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
add(LANG, PACK)
|
|
25
|
+
use(LANG)
|
|
26
|
+
|
|
27
|
+
expect(pack.value.lang).toBe(LANG)
|
|
28
|
+
expect(packs[LANG]).toBe(PACK)
|
|
29
|
+
})
|
|
30
|
+
|
|
31
|
+
test('test merge lang', () => {
|
|
32
|
+
const fn = jest.fn()
|
|
33
|
+
const { mockRestore } = mockConsole('warn', fn)
|
|
34
|
+
const { add, use, merge, pack } = useLocale()
|
|
35
|
+
|
|
36
|
+
const LANG = 'en-US'
|
|
37
|
+
const PACK = {
|
|
38
|
+
button: 'Custom Text',
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
add(LANG, enUS)
|
|
42
|
+
use('zh_HK')
|
|
43
|
+
use(LANG)
|
|
44
|
+
merge('zh_HK', PACK)
|
|
45
|
+
merge(LANG, PACK)
|
|
46
|
+
|
|
47
|
+
expect(pack.value.button).toBe('Custom Text')
|
|
48
|
+
expect(fn).toHaveBeenCalledTimes(2)
|
|
49
|
+
|
|
50
|
+
mockRestore()
|
|
51
|
+
})
|
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
# Locale
|
|
2
|
-
|
|
3
|
-
### Intro
|
|
4
|
-
Component library uses Chinese as the default language, support multi-language switch,
|
|
5
|
-
built-in support for `Chinese`, `English`.
|
|
6
|
-
|
|
7
|
-
### Multi-language switch
|
|
8
|
-
The `Locale` component is introduced to realize multi-language switching, and `Locale.add` is used for language extension.
|
|
9
|
-
|
|
10
|
-
```js
|
|
11
|
-
Locale.add('en-US', enUS)
|
|
12
|
-
```
|
|
13
|
-
|
|
14
|
-
Use `Locale.use` to switch languages.
|
|
15
|
-
|
|
16
|
-
```js
|
|
17
|
-
Locale.use('en-US')
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
Use `Locale.merge` to merge languages.
|
|
21
|
-
|
|
22
|
-
```js
|
|
23
|
-
Locale.merge('en-US', {
|
|
24
|
-
button: 'Hello'
|
|
25
|
-
})
|
|
26
|
-
```
|
|
1
|
+
# Locale
|
|
2
|
+
|
|
3
|
+
### Intro
|
|
4
|
+
Component library uses Chinese as the default language, support multi-language switch,
|
|
5
|
+
built-in support for `Chinese`, `English`.
|
|
6
|
+
|
|
7
|
+
### Multi-language switch
|
|
8
|
+
The `Locale` component is introduced to realize multi-language switching, and `Locale.add` is used for language extension.
|
|
9
|
+
|
|
10
|
+
```js
|
|
11
|
+
Locale.add('en-US', enUS)
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
Use `Locale.use` to switch languages.
|
|
15
|
+
|
|
16
|
+
```js
|
|
17
|
+
Locale.use('en-US')
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Use `Locale.merge` to merge languages.
|
|
21
|
+
|
|
22
|
+
```js
|
|
23
|
+
Locale.merge('en-US', {
|
|
24
|
+
button: 'Hello'
|
|
25
|
+
})
|
|
26
|
+
```
|
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
# 国际化
|
|
2
|
-
|
|
3
|
-
### 介绍
|
|
4
|
-
组件库使用中文作为默认语言,支持多语言切换,内置支持 `中文`,`英文`。
|
|
5
|
-
|
|
6
|
-
### 多语言切换
|
|
7
|
-
引入 `Locale` 组件实现多语言切换,使用 `Locale.add` 进行语言扩展。
|
|
8
|
-
|
|
9
|
-
```js
|
|
10
|
-
Locale.add('en-US', enUS)
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
使用 `Locale.use` 进行切换语言
|
|
14
|
-
|
|
15
|
-
```js
|
|
16
|
-
Locale.use('en-US')
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
使用 `Locale.merge` 进行语言合并
|
|
20
|
-
|
|
21
|
-
```js
|
|
22
|
-
Locale.merge('en-US', {
|
|
23
|
-
button: 'Hello'
|
|
24
|
-
})
|
|
25
|
-
```
|
|
1
|
+
# 国际化
|
|
2
|
+
|
|
3
|
+
### 介绍
|
|
4
|
+
组件库使用中文作为默认语言,支持多语言切换,内置支持 `中文`,`英文`。
|
|
5
|
+
|
|
6
|
+
### 多语言切换
|
|
7
|
+
引入 `Locale` 组件实现多语言切换,使用 `Locale.add` 进行语言扩展。
|
|
8
|
+
|
|
9
|
+
```js
|
|
10
|
+
Locale.add('en-US', enUS)
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
使用 `Locale.use` 进行切换语言
|
|
14
|
+
|
|
15
|
+
```js
|
|
16
|
+
Locale.use('en-US')
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
使用 `Locale.merge` 进行语言合并
|
|
20
|
+
|
|
21
|
+
```js
|
|
22
|
+
Locale.merge('en-US', {
|
|
23
|
+
button: 'Hello'
|
|
24
|
+
})
|
|
25
|
+
```
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Pack } from '../../types'
|
|
2
|
-
|
|
3
|
-
declare const enUS: Pack
|
|
4
|
-
|
|
5
|
-
export default enUS
|
|
1
|
+
import type { Pack } from '../../types'
|
|
2
|
+
|
|
3
|
+
declare const enUS: Pack
|
|
4
|
+
|
|
5
|
+
export default enUS
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { Pack } from './index'
|
|
2
|
-
|
|
3
|
-
// for component's internal
|
|
4
|
-
export default {
|
|
5
|
-
// Button component
|
|
6
|
-
button: 'Button'
|
|
7
|
-
} as Pack
|
|
1
|
+
import { Pack } from './index'
|
|
2
|
+
|
|
3
|
+
// for component's internal
|
|
4
|
+
export default {
|
|
5
|
+
// Button component
|
|
6
|
+
button: 'Button'
|
|
7
|
+
} as Pack
|
|
@@ -1,67 +1,67 @@
|
|
|
1
|
-
import { ref } from 'vue'
|
|
2
|
-
import type { Ref } from 'vue'
|
|
3
|
-
import zhCN from './zh-CN'
|
|
4
|
-
|
|
5
|
-
export type Pack = {
|
|
6
|
-
// Button component
|
|
7
|
-
button: string
|
|
8
|
-
|
|
9
|
-
// internal
|
|
10
|
-
lang?: string
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
function useLocale<T = Pack>() {
|
|
14
|
-
const packs: Record<string, Partial<T>> = {}
|
|
15
|
-
const pack: Ref<Partial<T>> = ref({})
|
|
16
|
-
|
|
17
|
-
const add = (lang: string, pack: Partial<T> & { lang?: string }) => {
|
|
18
|
-
pack.lang = lang
|
|
19
|
-
packs[lang] = pack
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
const use = (lang: string) => {
|
|
23
|
-
if (!packs[lang]) {
|
|
24
|
-
console.warn(`The ${lang} does not exist. You can mount a language package using the add method`)
|
|
25
|
-
return {}
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
pack.value = packs[lang]
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
const merge = (lang: string, pack: Partial<T>) => {
|
|
32
|
-
if (!packs[lang]) {
|
|
33
|
-
console.warn(`The ${lang} does not exist. You can mount a language package using the add method`)
|
|
34
|
-
return
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
packs[lang] = { ...packs[lang], ...pack }
|
|
38
|
-
|
|
39
|
-
use(lang)
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
return {
|
|
43
|
-
packs,
|
|
44
|
-
pack,
|
|
45
|
-
add,
|
|
46
|
-
use,
|
|
47
|
-
merge,
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
const { packs, pack, add, use, merge } = useLocale()
|
|
52
|
-
|
|
53
|
-
add('zh-CN', zhCN)
|
|
54
|
-
use('zh-CN')
|
|
55
|
-
|
|
56
|
-
export { packs, pack, add, use, merge, useLocale }
|
|
57
|
-
|
|
58
|
-
export const _LocaleComponent = { packs, pack, add, use, merge, useLocale }
|
|
59
|
-
|
|
60
|
-
export default {
|
|
61
|
-
packs,
|
|
62
|
-
pack,
|
|
63
|
-
add,
|
|
64
|
-
use,
|
|
65
|
-
merge,
|
|
66
|
-
useLocale,
|
|
67
|
-
}
|
|
1
|
+
import { ref } from 'vue'
|
|
2
|
+
import type { Ref } from 'vue'
|
|
3
|
+
import zhCN from './zh-CN'
|
|
4
|
+
|
|
5
|
+
export type Pack = {
|
|
6
|
+
// Button component
|
|
7
|
+
button: string
|
|
8
|
+
|
|
9
|
+
// internal
|
|
10
|
+
lang?: string
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
function useLocale<T = Pack>() {
|
|
14
|
+
const packs: Record<string, Partial<T>> = {}
|
|
15
|
+
const pack: Ref<Partial<T>> = ref({})
|
|
16
|
+
|
|
17
|
+
const add = (lang: string, pack: Partial<T> & { lang?: string }) => {
|
|
18
|
+
pack.lang = lang
|
|
19
|
+
packs[lang] = pack
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
const use = (lang: string) => {
|
|
23
|
+
if (!packs[lang]) {
|
|
24
|
+
console.warn(`The ${lang} does not exist. You can mount a language package using the add method`)
|
|
25
|
+
return {}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
pack.value = packs[lang]
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
const merge = (lang: string, pack: Partial<T>) => {
|
|
32
|
+
if (!packs[lang]) {
|
|
33
|
+
console.warn(`The ${lang} does not exist. You can mount a language package using the add method`)
|
|
34
|
+
return
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
packs[lang] = { ...packs[lang], ...pack }
|
|
38
|
+
|
|
39
|
+
use(lang)
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
return {
|
|
43
|
+
packs,
|
|
44
|
+
pack,
|
|
45
|
+
add,
|
|
46
|
+
use,
|
|
47
|
+
merge,
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
const { packs, pack, add, use, merge } = useLocale()
|
|
52
|
+
|
|
53
|
+
add('zh-CN', zhCN)
|
|
54
|
+
use('zh-CN')
|
|
55
|
+
|
|
56
|
+
export { packs, pack, add, use, merge, useLocale }
|
|
57
|
+
|
|
58
|
+
export const _LocaleComponent = { packs, pack, add, use, merge, useLocale }
|
|
59
|
+
|
|
60
|
+
export default {
|
|
61
|
+
packs,
|
|
62
|
+
pack,
|
|
63
|
+
add,
|
|
64
|
+
use,
|
|
65
|
+
merge,
|
|
66
|
+
useLocale,
|
|
67
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Pack } from '../../types'
|
|
2
|
-
|
|
3
|
-
declare const zhCN: Pack
|
|
4
|
-
|
|
5
|
-
export default zhCN
|
|
1
|
+
import type { Pack } from '../../types'
|
|
2
|
+
|
|
3
|
+
declare const zhCN: Pack
|
|
4
|
+
|
|
5
|
+
export default zhCN
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { Pack } from './index'
|
|
2
|
-
|
|
3
|
-
// for component's internal
|
|
4
|
-
export default {
|
|
5
|
-
// Button component
|
|
6
|
-
button: '按钮'
|
|
7
|
-
} as Pack
|
|
1
|
+
import { Pack } from './index'
|
|
2
|
+
|
|
3
|
+
// for component's internal
|
|
4
|
+
export default {
|
|
5
|
+
// Button component
|
|
6
|
+
button: '按钮'
|
|
7
|
+
} as Pack
|
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
import { defineComponent, PropType } from 'vue'
|
|
2
|
-
import './button.less'
|
|
3
|
-
|
|
4
|
-
// i18n for component's internal
|
|
5
|
-
// import { pack } from '../locale'
|
|
6
|
-
|
|
7
|
-
export default defineComponent({
|
|
8
|
-
name: 'BButton',
|
|
9
|
-
props: {
|
|
10
|
-
color: {
|
|
11
|
-
type: String
|
|
12
|
-
},
|
|
13
|
-
onClick: {
|
|
14
|
-
type: Function as PropType<(e: Event) => void>
|
|
15
|
-
}
|
|
16
|
-
},
|
|
17
|
-
setup(props, { slots }) {
|
|
18
|
-
const handleClick = (e: Event) => props.onClick?.(e)
|
|
19
|
-
|
|
20
|
-
return () => {
|
|
21
|
-
const { color } = props
|
|
22
|
-
|
|
23
|
-
return <>
|
|
24
|
-
<button
|
|
25
|
-
class="basic-button"
|
|
26
|
-
style={{ background: color }}
|
|
27
|
-
onClick={ handleClick }
|
|
28
|
-
>
|
|
29
|
-
{/* { pack.value.button } */}
|
|
30
|
-
{ slots.default?.() }
|
|
31
|
-
</button>
|
|
32
|
-
</>
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
})
|
|
1
|
+
import { defineComponent, PropType } from 'vue'
|
|
2
|
+
import './button.less'
|
|
3
|
+
|
|
4
|
+
// i18n for component's internal
|
|
5
|
+
// import { pack } from '../locale'
|
|
6
|
+
|
|
7
|
+
export default defineComponent({
|
|
8
|
+
name: 'BButton',
|
|
9
|
+
props: {
|
|
10
|
+
color: {
|
|
11
|
+
type: String
|
|
12
|
+
},
|
|
13
|
+
onClick: {
|
|
14
|
+
type: Function as PropType<(e: Event) => void>
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
setup(props, { slots }) {
|
|
18
|
+
const handleClick = (e: Event) => props.onClick?.(e)
|
|
19
|
+
|
|
20
|
+
return () => {
|
|
21
|
+
const { color } = props
|
|
22
|
+
|
|
23
|
+
return <>
|
|
24
|
+
<button
|
|
25
|
+
class="basic-button"
|
|
26
|
+
style={{ background: color }}
|
|
27
|
+
onClick={ handleClick }
|
|
28
|
+
>
|
|
29
|
+
{/* { pack.value.button } */}
|
|
30
|
+
{ slots.default?.() }
|
|
31
|
+
</button>
|
|
32
|
+
</>
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
})
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import Button from '../index'
|
|
2
|
-
import { createApp } from 'vue'
|
|
3
|
-
|
|
4
|
-
test('test button use', () => {
|
|
5
|
-
const app = createApp({}).use(Button)
|
|
6
|
-
expect(app.component(Button.name)).toBeTruthy()
|
|
7
|
-
})
|
|
1
|
+
import Button from '../index'
|
|
2
|
+
import { createApp } from 'vue'
|
|
3
|
+
|
|
4
|
+
test('test button use', () => {
|
|
5
|
+
const app = createApp({}).use(Button)
|
|
6
|
+
expect(app.component(Button.name)).toBeTruthy()
|
|
7
|
+
})
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
.basic-button {
|
|
2
|
-
display: flex;
|
|
3
|
-
padding: 10px;
|
|
4
|
-
background: #009688;
|
|
5
|
-
color: #fff;
|
|
6
|
-
outline: none;
|
|
7
|
-
border: none;
|
|
8
|
-
border-radius: 2px;
|
|
9
|
-
cursor: pointer;
|
|
10
|
-
|
|
11
|
-
&:active {
|
|
12
|
-
opacity: 0.9
|
|
13
|
-
}
|
|
14
|
-
}
|
|
1
|
+
.basic-button {
|
|
2
|
+
display: flex;
|
|
3
|
+
padding: 10px;
|
|
4
|
+
background: #009688;
|
|
5
|
+
color: #fff;
|
|
6
|
+
outline: none;
|
|
7
|
+
border: none;
|
|
8
|
+
border-radius: 2px;
|
|
9
|
+
cursor: pointer;
|
|
10
|
+
|
|
11
|
+
&:active {
|
|
12
|
+
opacity: 0.9
|
|
13
|
+
}
|
|
14
|
+
}
|
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
# Button
|
|
2
|
-
|
|
3
|
-
### Basic Use
|
|
4
|
-
```html
|
|
5
|
-
<b-button>start</b-button>
|
|
6
|
-
```
|
|
7
|
-
|
|
8
|
-
### Theme Color Button
|
|
9
|
-
```html
|
|
10
|
-
<b-button color="#009688">start</b-button>
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
```vue
|
|
14
|
-
import ModifyColor from '../example/ModifyColor'
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
## API
|
|
18
|
-
|
|
19
|
-
### Props
|
|
20
|
-
|
|
21
|
-
| Prop | Description | Type | Default |
|
|
22
|
-
| --- | --- | --- | --- |
|
|
23
|
-
| `color` | 按钮颜色 | _string_ | `default` |
|
|
24
|
-
|
|
25
|
-
### Events
|
|
26
|
-
|
|
27
|
-
| Event | Description | Arguments |
|
|
28
|
-
| --- | --- | --- |
|
|
29
|
-
| `click` | Triggered when the button is clicked | `event: Event` |
|
|
30
|
-
|
|
31
|
-
### Slots
|
|
32
|
-
|
|
33
|
-
| Slot | Description | Arguments |
|
|
34
|
-
|-----------| --- | --- |
|
|
1
|
+
# Button
|
|
2
|
+
|
|
3
|
+
### Basic Use
|
|
4
|
+
```html
|
|
5
|
+
<b-button>start</b-button>
|
|
6
|
+
```
|
|
7
|
+
|
|
8
|
+
### Theme Color Button
|
|
9
|
+
```html
|
|
10
|
+
<b-button color="#009688">start</b-button>
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
```vue
|
|
14
|
+
import ModifyColor from '../example/ModifyColor'
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## API
|
|
18
|
+
|
|
19
|
+
### Props
|
|
20
|
+
|
|
21
|
+
| Prop | Description | Type | Default |
|
|
22
|
+
| --- | --- | --- | --- |
|
|
23
|
+
| `color` | 按钮颜色 | _string_ | `default` |
|
|
24
|
+
|
|
25
|
+
### Events
|
|
26
|
+
|
|
27
|
+
| Event | Description | Arguments |
|
|
28
|
+
| --- | --- | --- |
|
|
29
|
+
| `click` | Triggered when the button is clicked | `event: Event` |
|
|
30
|
+
|
|
31
|
+
### Slots
|
|
32
|
+
|
|
33
|
+
| Slot | Description | Arguments |
|
|
34
|
+
|-----------| --- | --- |
|
|
35
35
|
| `default` | Button content | `-` |
|
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
# 按钮
|
|
2
|
-
|
|
3
|
-
### 基本使用
|
|
4
|
-
```html
|
|
5
|
-
<b-button>组件库从我开始</b-button>
|
|
6
|
-
```
|
|
7
|
-
|
|
8
|
-
### 主题色按钮
|
|
9
|
-
```html
|
|
10
|
-
<b-button color="#009688">组件库从我开始</b-button>
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
```vue
|
|
14
|
-
import ModifyColor from '../example/ModifyColor'
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
## API
|
|
18
|
-
|
|
19
|
-
### 属性
|
|
20
|
-
|
|
21
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
22
|
-
| --- | --- | --- | --- |
|
|
23
|
-
| `color` | 按钮颜色 | _string_ | `default` |
|
|
24
|
-
|
|
25
|
-
### 事件
|
|
26
|
-
|
|
27
|
-
| 事件名 | 说明 | 参数 |
|
|
28
|
-
| --- | --- | --- |
|
|
29
|
-
| `click` | 点击按钮时触发 | `event: Event` |
|
|
30
|
-
|
|
31
|
-
### 插槽
|
|
32
|
-
|
|
33
|
-
| 插槽名 | 说明 | 参数 |
|
|
34
|
-
| --- | --- | --- |
|
|
1
|
+
# 按钮
|
|
2
|
+
|
|
3
|
+
### 基本使用
|
|
4
|
+
```html
|
|
5
|
+
<b-button>组件库从我开始</b-button>
|
|
6
|
+
```
|
|
7
|
+
|
|
8
|
+
### 主题色按钮
|
|
9
|
+
```html
|
|
10
|
+
<b-button color="#009688">组件库从我开始</b-button>
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
```vue
|
|
14
|
+
import ModifyColor from '../example/ModifyColor'
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## API
|
|
18
|
+
|
|
19
|
+
### 属性
|
|
20
|
+
|
|
21
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
22
|
+
| --- | --- | --- | --- |
|
|
23
|
+
| `color` | 按钮颜色 | _string_ | `default` |
|
|
24
|
+
|
|
25
|
+
### 事件
|
|
26
|
+
|
|
27
|
+
| 事件名 | 说明 | 参数 |
|
|
28
|
+
| --- | --- | --- |
|
|
29
|
+
| `click` | 点击按钮时触发 | `event: Event` |
|
|
30
|
+
|
|
31
|
+
### 插槽
|
|
32
|
+
|
|
33
|
+
| 插槽名 | 说明 | 参数 |
|
|
34
|
+
| --- | --- | --- |
|
|
35
35
|
| `default` | 按钮内容 | `-` |
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
<script setup>
|
|
2
|
-
import { watchLang } from '@varlet/cli/site/utils'
|
|
3
|
-
import BButton from '../Button'
|
|
4
|
-
import { pack, use } from './locale'
|
|
5
|
-
|
|
6
|
-
watchLang(use)
|
|
7
|
-
</script>
|
|
8
|
-
|
|
9
|
-
<template>
|
|
10
|
-
<b-button>{{ pack.start }}</b-button>
|
|
11
|
-
</template>
|
|
1
|
+
<script setup>
|
|
2
|
+
import { watchLang } from '@varlet/cli/site/utils'
|
|
3
|
+
import BButton from '../Button'
|
|
4
|
+
import { pack, use } from './locale'
|
|
5
|
+
|
|
6
|
+
watchLang(use)
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<template>
|
|
10
|
+
<b-button>{{ pack.start }}</b-button>
|
|
11
|
+
</template>
|