@varlet/cli 3.5.2 → 3.5.4-alpha.1727864204645

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.
Files changed (26) hide show
  1. package/README.md +8 -0
  2. package/README.zh-CN.md +8 -0
  3. package/lib/node/config/varlet.config.d.ts +10 -4
  4. package/lib/node/config/varlet.default.config.js +63 -74
  5. package/lib/node/config/vite.config.js +7 -9
  6. package/package.json +9 -9
  7. package/site/mobile/App.vue +1 -0
  8. package/site/pc/components/code-example/CodeExample.vue +23 -17
  9. package/template/create/[ComponentName].tsx.ejs +5 -1
  10. package/template/create/[ComponentName].vue.ejs +5 -2
  11. package/template/create/__tests__/index.spec.js.ejs +1 -0
  12. package/template/create/example/locale/_index.ts +1 -1
  13. package/template/generators/base/.eslintrc +2 -4
  14. package/template/generators/config/default/base/varlet.config.mjs +2 -2
  15. package/template/generators/config/default/sfc/src/button/Button.vue +7 -3
  16. package/template/generators/config/default/sfc/src/utils/components.ts +4 -1
  17. package/template/generators/config/default/tsx/src/button/Button.tsx +6 -2
  18. package/template/generators/config/default/tsx/src/button/index.ts +1 -1
  19. package/template/generators/config/default/tsx/src/utils/components.ts +4 -1
  20. package/template/generators/config/i18n/base/varlet.config.mjs +1 -1
  21. package/template/generators/config/i18n/sfc/src/button/Button.vue +6 -2
  22. package/template/generators/config/i18n/sfc/src/locale/index.ts +1 -1
  23. package/template/generators/config/i18n/sfc/src/utils/components.ts +4 -1
  24. package/template/generators/config/i18n/tsx/src/button/Button.tsx +6 -2
  25. package/template/generators/config/i18n/tsx/src/locale/index.ts +1 -1
  26. package/template/generators/config/i18n/tsx/src/utils/components.ts +4 -1
package/README.md CHANGED
@@ -67,6 +67,7 @@ Also refer to `@varlet/ui` [varlet.config.mjs](https://github.com/varletjs/varle
67
67
  | `copy` | Copy file configuration | _[CopyPath[]](https://github.com/varletjs/varlet/blob/dev/packages/varlet-vite-plugins/src/copy.ts)_ | `- ` |
68
68
  | `icons` | Font icon packaging related configurations | _[VarletConfigIcons](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts) _ | `-` |
69
69
  | `esbuild` | esbuild configuration | _[VarletConfigEsbuild](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | ` -` |
70
+ | `seo` | seo options | _[VarletConfigSeo](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | ` -` |
70
71
 
71
72
  #### Menu
72
73
 
@@ -182,6 +183,13 @@ varlet-cli build:icons
182
183
  varlet-cli test
183
184
  ```
184
185
 
186
+ #### Execute a unit test
187
+
188
+ ```shell
189
+ # playground-ignore
190
+ varlet-cli test -c <componentName>
191
+ ```
192
+
185
193
  #### Execute unit tests in watch mode
186
194
 
187
195
  ```shell
package/README.zh-CN.md CHANGED
@@ -67,6 +67,7 @@ varlet-cli gen
67
67
  | `copy` | 复制文件配置 | _[CopyPath[]](https://github.com/varletjs/varlet/blob/dev/packages/varlet-vite-plugins/src/copy.ts)_ | `-` |
68
68
  | `icons` | 字体图标打包相关配置 | _[VarletConfigIcons](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | `-` |
69
69
  | `esbuild` | esbuild 配置 | _[VarletConfigEsbuild](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | `-` |
70
+ | `seo` | seo 选项 | _[VarletConfigSeo](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/src/node/config/varlet.config.ts)_ | ` -` |
70
71
 
71
72
  #### Menu
72
73
 
@@ -181,6 +182,13 @@ varlet-cli build:icons
181
182
  varlet-cli test
182
183
  ```
183
184
 
185
+ #### 执行单个组件的单元测试
186
+
187
+ ```shell
188
+ # playground-ignore
189
+ varlet-cli test -c <componentName>
190
+ ```
191
+
184
192
  #### 以 watch 模式执行单元测试
185
193
 
186
194
  ```shell
package/lib/node/config/varlet.config.d.ts CHANGED
@@ -56,6 +56,11 @@ export interface VarletConfigMobileHeader {
56
56
  github?: string;
57
57
  themes?: Record<string, string>[];
58
58
  }
59
+ export interface VarletConfigSeo {
60
+ title?: string;
61
+ description?: string;
62
+ keywords?: string;
63
+ }
59
64
  export interface VarletConfigPcIndexPage {
60
65
  description?: Record<string, string>;
61
66
  started?: Record<string, string>;
@@ -90,8 +95,6 @@ export interface VarletConfigPcIndexPage {
90
95
  }
91
96
  export interface VarletConfigPc {
92
97
  title?: Record<string, string>;
93
- description?: Record<string, string>;
94
- keywords?: Record<string, string>;
95
98
  redirect?: string;
96
99
  clipboard?: Record<string, string>;
97
100
  indexPage?: VarletConfigPcIndexPage;
@@ -106,8 +109,6 @@ export interface VarletConfigPc {
106
109
  }
107
110
  export interface VarletConfigMobile {
108
111
  title?: Record<string, string>;
109
- description?: Record<string, string>;
110
- keywords?: Record<string, string>;
111
112
  redirect?: string;
112
113
  header?: VarletConfigMobileHeader;
113
114
  htmlInject?: VarletConfigHtmlInject;
@@ -137,6 +138,11 @@ export interface VarletConfig {
137
138
  title?: string;
138
139
  logo?: string;
139
140
  themeKey?: string;
141
+ seo?: {
142
+ title?: string;
143
+ description?: string;
144
+ keywords?: string;
145
+ };
140
146
  defaultLanguage?: 'zh-CN' | 'en-US';
141
147
  alias?: Record<string, string>;
142
148
  /**
package/lib/node/config/varlet.default.config.js CHANGED
@@ -1,64 +1,4 @@
1
1
  import { defineConfig } from './varlet.config.js';
2
- const title = {
3
- 'zh-CN': 'Varlet UI - Vue3 Material Design 组件库',
4
- 'en-US': 'Varlet UI - Vue3 Material design component library',
5
- };
6
- const description = {
7
- 'zh-CN': 'Varlet UI 是一个基于 Vue3 开发的 Material Design 组件库，全面拥抱 Vue3 生态，支持移动端和桌面端，由 varletjs 组织维护。支持 Typescript、按需引入、暗黑模式、主题定制、国际化，并提供 VSCode 插件保障良好的开发体验。',
8
- 'en-US': 'Varlet UI is a Material design component library developed based on Vue3, supporting mobile and desktop, developed and maintained by varletjs organization. Support Typescript, import on demand, dark mode, theme customization, internationalization, and provide VSCode plugin to ensure a good development experience.',
9
- };
10
- const keywords = {
11
- 'zh-CN': [
12
- 'Varlet',
13
- 'Varlet UI',
14
- 'varlet',
15
- 'varlet-ui',
16
- 'Vue3 组件库',
17
- 'Material Design 2',
18
- 'Material Design 3',
19
- '移动端',
20
- '桌面端',
21
- '提供 60+ 个高质量通用组件',
22
- '组件十分轻量',
23
- '由国人开发，完善的中英文文档和后勤保障',
24
- '支持按需引入',
25
- '支持主题定制',
26
- '支持国际化',
27
- '支持 webstorm 组件属性高亮',
28
- '支持 SSR',
29
- '支持 Nuxt Module',
30
- '支持 Typescript',
31
- '提供官方的 VSCode 插件',
32
- '支持无障碍访问（持续改进中）',
33
- ].join(','),
34
- 'en-US': [
35
- 'Varlet',
36
- 'Varlet UI',
37
- 'varlet',
38
- 'varlet-ui',
39
- 'UI',
40
- 'Vue3 Mobile Components Library',
41
- 'Material Design 2',
42
- 'Material Design 3',
43
- 'Mobile',
44
- 'Desktop',
45
- 'Provide 60+ high quality general purpose components',
46
- 'Components are very lightweight',
47
- 'Developed by Chinese, complete Chinese and English documentation and logistics support',
48
- 'Support on-demand introduction',
49
- 'Support theme customization',
50
- 'Support internationalization',
51
- 'Support WebStorm syntax highlighting',
52
- 'Support the SSR',
53
- 'Support Nuxt Module',
54
- 'Support the Typescript',
55
- 'Make sure more than 90 percent unit test coverage, providing stability assurance',
56
- 'Supports both Material Design 2 and Material Design 3 design systems',
57
- 'Support dark mode',
58
- 'Provide official VSCode extension',
59
- 'Support Accessibility (still improving)',
60
- ].join(','),
61
- };
62
2
  export default defineConfig({
63
3
  name: 'Varlet',
64
4
  namespace: 'var',
@@ -67,18 +7,24 @@ export default defineConfig({
67
7
  title: 'VARLET',
68
8
  logo: 'varlet_icon.png',
69
9
  defaultLanguage: 'zh-CN',
70
- analysis: {
71
- baidu: '',
72
- },
10
+ themeKey: 'VARLET_V3_THEME',
11
+ defaultLightTheme: 'md3LightTheme',
12
+ defaultDarkTheme: 'md3DarkTheme',
73
13
  useMobile: false,
14
+ _cf: ['pages.dev', 'varletjs.org'],
15
+ analysis: { baidu: '' },
74
16
  pc: {
75
- title,
76
- description,
77
- keywords,
17
+ title: {
18
+ 'zh-CN': 'Varlet UI - Vue3 Material Design 组件库',
19
+ 'en-US': 'Varlet UI - Vue3 Material Design Component Library',
20
+ },
78
21
  menu: [],
79
22
  redirect: '/index',
80
23
  indexPage: {
81
- description,
24
+ description: {
25
+ 'zh-CN': 'Varlet UI 是一个基于 Vue3 开发的 Material Design 组件库，全面拥抱 Vue3 生态，支持移动端和桌面端，由 varletjs 组织维护。支持 Typescript、按需引入、暗黑模式、主题定制、国际化，并提供 VSCode 插件保障良好的开发体验。',
26
+ 'en-US': 'Varlet UI is a Material design component library developed based on Vue3, supporting mobile and desktop, developed and maintained by varletjs organization. Support Typescript, import on demand, dark mode, theme customization, internationalization, and provide VSCode plugin to ensure a good development experience.',
27
+ },
82
28
  started: {
83
29
  'zh-CN': '快速开始',
84
30
  'en-US': 'Get Started',
@@ -526,9 +472,10 @@ export default defineConfig({
526
472
  },
527
473
  },
528
474
  mobile: {
529
- title,
530
- description,
531
- keywords,
475
+ title: {
476
+ 'zh-CN': 'Varlet UI - Vue3 Material Design 组件库',
477
+ 'en-US': 'Varlet UI - Vue3 Material Design Component Library',
478
+ },
532
479
  redirect: '/home',
533
480
  header: {
534
481
  i18n: {
@@ -548,10 +495,52 @@ export default defineConfig({
548
495
  body: [],
549
496
  },
550
497
  },
551
- themeKey: 'VARLET_V3_THEME',
552
- defaultLightTheme: 'md3LightTheme',
553
- defaultDarkTheme: 'md3DarkTheme',
554
- _cf: ['pages.dev', 'varletjs.org'],
498
+ seo: {
499
+ title: 'Varlet UI - Vue3 Material Design Component Library',
500
+ description: 'Varlet UI is a Material design component library developed based on Vue3, supporting mobile and desktop, developed and maintained by varletjs organization. Support Typescript, import on demand, dark mode, theme customization, internationalization, and provide VSCode plugin to ensure a good development experience.',
501
+ keywords: [
502
+ 'Varlet',
503
+ 'Varlet UI',
504
+ 'varlet',
505
+ 'varlet-ui',
506
+ 'UI',
507
+ 'Vue3 Mobile Components Library',
508
+ 'Material Design 2',
509
+ 'Material Design 3',
510
+ 'Mobile',
511
+ 'Desktop',
512
+ 'Provide 60+ high quality general purpose components',
513
+ 'Components are very lightweight',
514
+ 'Developed by Chinese, complete Chinese and English documentation and logistics support',
515
+ 'Support on-demand introduction',
516
+ 'Support theme customization',
517
+ 'Support internationalization',
518
+ 'Support WebStorm syntax highlighting',
519
+ 'Support the SSR',
520
+ 'Support Nuxt Module',
521
+ 'Support the Typescript',
522
+ 'Make sure more than 90 percent unit test coverage, providing stability assurance',
523
+ 'Supports both Material Design 2 and Material Design 3 design systems',
524
+ 'Support dark mode',
525
+ 'Provide official VSCode extension',
526
+ 'Support Accessibility (still improving)',
527
+ 'Vue3 组件库',
528
+ '移动端',
529
+ '桌面端',
530
+ '提供 60+ 个高质量通用组件',
531
+ '组件十分轻量',
532
+ '由国人开发，完善的中英文文档和后勤保障',
533
+ '支持按需引入',
534
+ '支持主题定制',
535
+ '支持国际化',
536
+ '支持 webstorm 组件属性高亮',
537
+ '支持 SSR',
538
+ '支持 Nuxt Module',
539
+ '支持 Typescript',
540
+ '提供官方的 VSCode 插件',
541
+ '支持无障碍访问（持续改进中）',
542
+ ].join(','),
543
+ },
555
544
  lightTheme: {
556
545
  'color-body': '#fff',
557
546
  'color-index-page-background': '#fff',
package/lib/node/config/vite.config.js CHANGED
@@ -19,7 +19,7 @@ export function getHtmlInject(inject) {
19
19
  };
20
20
  }
21
21
  export function getDevConfig(varletConfig) {
22
- const { defaultLanguage, alias = {}, host } = varletConfig;
22
+ const { alias = {}, host } = varletConfig;
23
23
  const resolveAlias = Object.entries(alias).reduce((resolveAlias, [key, value]) => {
24
24
  const isRelative = value.startsWith('.');
25
25
  resolveAlias[key] = isRelative ? resolve(SRC_DIR, value) : value;
@@ -53,15 +53,13 @@ export function getDevConfig(varletConfig) {
53
53
  data: {
54
54
  logo: varletConfig?.logo,
55
55
  baidu: varletConfig?.analysis?.baidu,
56
- pcTitle: varletConfig?.pc?.title ? varletConfig?.pc?.title[defaultLanguage] : '',
57
- pcDescription: varletConfig?.pc?.description ? varletConfig?.pc?.description[defaultLanguage] : '',
58
- pcKeywords: varletConfig?.pc?.keywords ? varletConfig?.pc?.keywords[defaultLanguage] : '',
56
+ pcTitle: varletConfig?.seo?.title ?? '',
57
+ pcDescription: varletConfig?.seo?.description ?? '',
58
+ pcKeywords: varletConfig?.seo?.keywords ?? '',
59
59
  pcHtmlInject: getHtmlInject(varletConfig?.pc?.htmlInject || {}),
60
- mobileTitle: varletConfig?.mobile?.title ? varletConfig?.mobile?.title[defaultLanguage] : '',
61
- mobileDescription: varletConfig?.mobile?.description
62
- ? varletConfig?.mobile?.description[defaultLanguage]
63
- : '',
64
- mobileKeywords: varletConfig?.mobile?.keywords ? varletConfig?.mobile?.keywords[defaultLanguage] : '',
60
+ mobileTitle: varletConfig?.seo?.title ?? '',
61
+ mobileDescription: varletConfig?.seo?.description ?? '',
62
+ mobileKeywords: varletConfig?.seo?.keywords ?? '',
65
63
  mobileHtmlInject: getHtmlInject(varletConfig?.mobile?.htmlInject || {}),
66
64
  },
67
65
  }),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@varlet/cli",
3
- "version": "3.5.2",
3
+ "version": "3.5.4-alpha.1727864204645",
4
4
  "type": "module",
5
5
  "description": "cli of varlet",
6
6
  "bin": {
@@ -61,8 +61,8 @@
61
61
  "vite": "5.4.6",
62
62
  "vitest": "2.1.1",
63
63
  "vue": "3.4.21",
64
- "@varlet/vite-plugins": "3.5.2",
65
- "@varlet/shared": "3.5.2"
64
+ "@varlet/shared": "3.5.4-alpha.1727864204645",
65
+ "@varlet/vite-plugins": "3.5.4-alpha.1727864204645"
66
66
  },
67
67
  "devDependencies": {
68
68
  "@types/babel__core": "^7.20.1",
@@ -74,9 +74,9 @@
74
74
  "@types/node": "^18.7.20",
75
75
  "@types/sharp": "0.31.1",
76
76
  "rimraf": "^5.0.1",
77
- "@varlet/icons": "3.5.2",
78
- "@varlet/touch-emulator": "3.5.2",
79
- "@varlet/ui": "3.5.2"
77
+ "@varlet/icons": "3.5.4-alpha.1727864204645",
78
+ "@varlet/ui": "3.5.4-alpha.1727864204645",
79
+ "@varlet/touch-emulator": "3.5.4-alpha.1727864204645"
80
80
  },
81
81
  "peerDependencies": {
82
82
  "@vitest/coverage-istanbul": "2.0.5",
@@ -87,9 +87,9 @@
87
87
  "live-server": "^1.2.1",
88
88
  "vue": "3.4.21",
89
89
  "vue-router": "4.2.0",
90
- "@varlet/icons": "3.5.2",
91
- "@varlet/touch-emulator": "3.5.2",
92
- "@varlet/ui": "3.5.2"
90
+ "@varlet/icons": "3.5.4-alpha.1727864204645",
91
+ "@varlet/ui": "3.5.4-alpha.1727864204645",
92
+ "@varlet/touch-emulator": "3.5.4-alpha.1727864204645"
93
93
  },
94
94
  "scripts": {
95
95
  "dev": "tsc --watch",
package/site/mobile/App.vue CHANGED
@@ -235,6 +235,7 @@ body {
235
235
  padding: 15px 0;
236
236
  color: var(--site-config-color-sub-text);
237
237
  font-size: 14px;
238
+ min-height: 50px;
238
239
  }
239
240
 
240
241
  header {
package/site/pc/components/code-example/CodeExample.vue CHANGED
@@ -1,23 +1,29 @@
1
1
  <template>
2
2
  <div class="var-site-code-example">
3
3
  <div class="var-site-code-example__toolbar">
4
- <var-button text round @click="toggle" v-if="fold && !disabledFold">
5
- <var-icon name="xml" size="18" />
6
- </var-button>
7
-
8
- <var-button
9
- :id="`clip-trigger-${cid}`"
10
- :data-clipboard-target="`#clip-target-${cid}`"
11
- text
12
- round
13
- v-if="clipboard"
14
- >
15
- <var-icon name="content-copy" size="18" />
16
- </var-button>
17
-
18
- <var-button text round @click="toPlayground" v-if="playground">
19
- <var-icon name="code-json" size="18" />
20
- </var-button>
4
+ <var-tooltip placement="top" :content="height >= 0 ? 'Show Source' : 'Hide Source'">
5
+ <var-button text round @click="toggle" v-if="fold && !disabledFold">
6
+ <var-icon name="xml" size="18" />
7
+ </var-button>
8
+ </var-tooltip>
9
+
10
+ <var-tooltip placement="top" content="Copy Example Code">
11
+ <var-button
12
+ :id="`clip-trigger-${cid}`"
13
+ :data-clipboard-target="`#clip-target-${cid}`"
14
+ text
15
+ round
16
+ v-if="clipboard"
17
+ >
18
+ <var-icon name="content-copy" size="18" />
19
+ </var-button>
20
+ </var-tooltip>
21
+
22
+ <var-tooltip placement="top" content="Edit In Playground">
23
+ <var-button text round @click="toPlayground" v-if="playground">
24
+ <var-icon name="code-json" size="18" />
25
+ </var-button>
26
+ </var-tooltip>
21
27
  </div>
22
28
  <div
23
29
  :id="`clip-target-${cid}`"
package/template/create/[ComponentName].tsx.ejs CHANGED
@@ -1,9 +1,13 @@
1
1
  import { defineComponent } from 'vue'
2
2
  import { props } from './props'
3
+ import { createNamespace } from '../utils/components'
4
+
3
5
  import './<%- camelizeName %>.less'
4
6
 
7
+ const { name, n, classes } = createNamespace('<%- kebabCaseName %>')
8
+
5
9
  export default defineComponent({
6
- name: '<%- bigCamelizeNamespace + bigCamelizeName %>',
10
+ name,
7
11
  props,
8
12
  setup(props, { slots }) {
9
13
  return () => {
package/template/create/[ComponentName].vue.ejs CHANGED
@@ -5,13 +5,16 @@
5
5
  <script lang="ts">
6
6
  import { defineComponent } from 'vue'
7
7
  import { props } from './props'
8
+ import { createNamespace } from '../utils/components'
9
+
10
+ const { name, n, classes } = createNamespace('<%- kebabCaseName %>')
8
11
 
9
12
  export default defineComponent({
10
- name: '<%- bigCamelizeNamespace + bigCamelizeName %>',
13
+ name,
11
14
  props
12
15
  })
13
16
  </script>
14
17
 
15
18
  <style lang="less">
16
- @import './<%- camelizeName %>.less';
19
+ @import './<%- camelizeName %>';
17
20
  </style>
package/template/create/__tests__/index.spec.js.ejs CHANGED
@@ -1,4 +1,5 @@
1
1
  import <%- bigCamelizeName %> from '..'
2
+ import <%- bigCamelizeNamespace + bigCamelizeName %> from '../<%- bigCamelizeName %>'
2
3
  import { createApp } from 'vue'
3
4
  import { mount } from '@vue/test-utils'
4
5
  import { expect, test } from 'vitest'
package/template/create/example/locale/_index.ts CHANGED
@@ -14,4 +14,4 @@ Locale.add('en-US', Locale.enUS)
14
14
  add('zh-CN', zhCN)
15
15
  add('en-US', enUS)
16
16
 
17
- export { add, t, merge, use }
17
+ export { add, t, merge, use }
package/template/generators/base/.eslintrc CHANGED
@@ -12,7 +12,5 @@
12
12
  "types/index.d.ts",
13
13
  ".varlet/**"
14
14
  ],
15
- "extends": [
16
- "@varlet"
17
- ]
18
- }
15
+ "extends": ["@varlet"]
16
+ }
package/template/generators/config/default/base/varlet.config.mjs CHANGED
@@ -8,7 +8,7 @@ export default defineConfig({
8
8
  darkMode: null,
9
9
  i18n: null,
10
10
  playground: null,
11
- versions: null
11
+ versions: null,
12
12
  },
13
13
  menu: [
14
14
  {
@@ -44,5 +44,5 @@ export default defineConfig({
44
44
  i18n: null,
45
45
  darkMode: null,
46
46
  },
47
- }
47
+ },
48
48
  })
package/template/generators/config/default/sfc/src/button/Button.vue CHANGED
@@ -1,14 +1,17 @@
1
1
  <template>
2
- <button class="va-button" :style="{ background: color }" @click="handleClick">
2
+ <button :class="n()" :style="{ background: color }" @click="handleClick">
3
3
  <slot />
4
4
  </button>
5
5
  </template>
6
6
 
7
7
  <script lang="ts">
8
8
  import { defineComponent, PropType } from 'vue'
9
+ import { createNamespace } from '../utils/components'
10
+
11
+ const { name, n, classes } = createNamespace('button')
9
12
 
10
13
  export default defineComponent({
11
- name: 'VaButton',
14
+ name,
12
15
  props: {
13
16
  color: {
14
17
  type: String,
@@ -21,8 +24,9 @@ export default defineComponent({
21
24
  const handleClick = (e: Event) => {
22
25
  props.onClick?.(e)
23
26
  }
24
-
27
+
25
28
  return {
29
+ n,
26
30
  handleClick,
27
31
  }
28
32
  },
package/template/generators/config/default/sfc/src/utils/components.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import type { Component, Plugin, App } from 'vue'
2
+ import { createNamespaceFn } from '@varlet/shared'
2
3
 
3
4
  export type ComponentWithInstall<T> = T & Plugin
4
5
 
@@ -14,4 +15,6 @@ export function withInstall<T = Component>(component: Component, target?: T): Co
14
15
  }
15
16
 
16
17
  return componentWithInstall as ComponentWithInstall<T>
17
- }
18
+ }
19
+
20
+ export const createNamespace = createNamespaceFn('va')
package/template/generators/config/default/tsx/src/button/Button.tsx CHANGED
@@ -1,8 +1,12 @@
1
1
  import { defineComponent, PropType } from 'vue'
2
+ import { createNamespace } from '../utils/components'
3
+
2
4
  import './button.less'
3
5
 
6
+ const { name, n, classes } = createNamespace('button')
7
+
4
8
  export default defineComponent({
5
- name: 'VaButton',
9
+ name,
6
10
  props: {
7
11
  color: {
8
12
  type: String,
@@ -18,7 +22,7 @@ export default defineComponent({
18
22
  const { color } = props
19
23
 
20
24
  return (
21
- <button class="va-button" style={{ background: color }} onClick={handleClick}>
25
+ <button class={n()} style={{ background: color }} onClick={handleClick}>
22
26
  {slots.default?.()}
23
27
  </button>
24
28
  )
package/template/generators/config/default/tsx/src/button/index.ts CHANGED
@@ -5,4 +5,4 @@ withInstall(Button)
5
5
 
6
6
  export const _ButtonComponent = Button
7
7
 
8
- export default Button
8
+ export default Button
package/template/generators/config/default/tsx/src/utils/components.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import type { Component, Plugin, App } from 'vue'
2
+ import { createNamespaceFn } from '@varlet/shared'
2
3
 
3
4
  export type ComponentWithInstall<T> = T & Plugin
4
5
 
@@ -14,4 +15,6 @@ export function withInstall<T = Component>(component: Component, target?: T): Co
14
15
  }
15
16
 
16
17
  return componentWithInstall as ComponentWithInstall<T>
17
- }
18
+ }
19
+
20
+ export const createNamespace = createNamespaceFn('va')
package/template/generators/config/i18n/base/varlet.config.mjs CHANGED
@@ -7,7 +7,7 @@ export default defineConfig({
7
7
  header: {
8
8
  darkMode: null,
9
9
  playground: null,
10
- versions: null
10
+ versions: null,
11
11
  },
12
12
  menu: [
13
13
  {
package/template/generators/config/i18n/sfc/src/button/Button.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <button class="va-button" :style="{ background: color }" @click="handleClick">
2
+ <button :class="n()" :style="{ background: color }" @click="handleClick">
3
3
  {{ t('button') }}
4
4
  <slot />
5
5
  </button>
@@ -7,12 +7,15 @@
7
7
 
8
8
  <script lang="ts">
9
9
  import { defineComponent, PropType } from 'vue'
10
+ import { createNamespace } from '../utils/components'
10
11
 
11
12
  // i18n for component's internal
12
13
  import { t } from '../locale'
13
14
 
15
+ const { name, n, classes } = createNamespace('button')
16
+
14
17
  export default defineComponent({
15
- name: 'VaButton',
18
+ name,
16
19
  props: {
17
20
  color: {
18
21
  type: String,
@@ -28,6 +31,7 @@ export default defineComponent({
28
31
 
29
32
  return {
30
33
  t,
34
+ n,
31
35
  handleClick,
32
36
  }
33
37
  },
package/template/generators/config/i18n/sfc/src/locale/index.ts CHANGED
@@ -58,7 +58,7 @@ function useLocale<T = Message>() {
58
58
  add,
59
59
  use,
60
60
  merge,
61
- t
61
+ t,
62
62
  }
63
63
  }
64
64
 
package/template/generators/config/i18n/sfc/src/utils/components.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import type { Component, Plugin, App } from 'vue'
2
+ import { createNamespaceFn } from '@varlet/shared'
2
3
 
3
4
  export type ComponentWithInstall<T> = T & Plugin
4
5
 
@@ -14,4 +15,6 @@ export function withInstall<T = Component>(component: Component, target?: T): Co
14
15
  }
15
16
 
16
17
  return componentWithInstall as ComponentWithInstall<T>
17
- }
18
+ }
19
+
20
+ export const createNamespace = createNamespaceFn('va')
package/template/generators/config/i18n/tsx/src/button/Button.tsx CHANGED
@@ -1,11 +1,15 @@
1
1
  import { defineComponent, PropType } from 'vue'
2
+ import { createNamespace } from '../utils/components'
3
+
2
4
  import './button.less'
3
5
 
4
6
  // i18n for component's internal
5
7
  import { t } from '../locale'
6
8
 
9
+ const { name, n, classes } = createNamespace('button')
10
+
7
11
  export default defineComponent({
8
- name: 'VaButton',
12
+ name,
9
13
  props: {
10
14
  color: {
11
15
  type: String,
@@ -23,7 +27,7 @@ export default defineComponent({
23
27
  const { color } = props
24
28
 
25
29
  return (
26
- <button class="va-button" style={{ background: color }} onClick={handleClick}>
30
+ <button class={n()} style={{ background: color }} onClick={handleClick}>
27
31
  {t('button')}
28
32
  {slots.default?.()}
29
33
  </button>
package/template/generators/config/i18n/tsx/src/locale/index.ts CHANGED
@@ -58,7 +58,7 @@ function useLocale<T = Message>() {
58
58
  add,
59
59
  use,
60
60
  merge,
61
- t
61
+ t,
62
62
  }
63
63
  }
64
64
 
package/template/generators/config/i18n/tsx/src/utils/components.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import type { Component, Plugin, App } from 'vue'
2
+ import { createNamespaceFn } from '@varlet/shared'
2
3
 
3
4
  export type ComponentWithInstall<T> = T & Plugin
4
5
 
@@ -14,4 +15,6 @@ export function withInstall<T = Component>(component: Component, target?: T): Co
14
15
  }
15
16
 
16
17
  return componentWithInstall as ComponentWithInstall<T>
17
- }
18
+ }
19
+
20
+ export const createNamespace = createNamespaceFn('va')