@varlet/cli 3.5.3 → 3.5.4

package/README.md

@@ -183,6 +183,13 @@ varlet-cli build:icons
 varlet-cli test
 ```
 
+#### Execute a unit test
+
+```shell
+# playground-ignore
+varlet-cli test -c <componentName>
+```
+
 #### Execute unit tests in watch mode
 
 ```shell

package/README.zh-CN.md

@@ -182,6 +182,13 @@ varlet-cli build:icons
 varlet-cli test
 ```
 
+#### 执行单个组件的单元测试
+
+```shell
+# playground-ignore
+varlet-cli test -c <componentName>
+```
+
 #### 以 watch 模式执行单元测试
 
 ```shell

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "3.5.3",
+  "version": "3.5.4",
   "type": "module",
   "description": "cli of varlet",
   "bin": {
@@ -61,8 +61,8 @@
     "vite": "5.4.6",
     "vitest": "2.1.1",
     "vue": "3.4.21",
-    "@varlet/shared": "3.5.3",
-    "@varlet/vite-plugins": "3.5.3"
+    "@varlet/shared": "3.5.4",
+    "@varlet/vite-plugins": "3.5.4"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.1",
@@ -74,9 +74,9 @@
     "@types/node": "^18.7.20",
     "@types/sharp": "0.31.1",
     "rimraf": "^5.0.1",
-    "@varlet/touch-emulator": "3.5.3",
-    "@varlet/ui": "3.5.3",
-    "@varlet/icons": "3.5.3"
+    "@varlet/ui": "3.5.4",
+    "@varlet/touch-emulator": "3.5.4",
+    "@varlet/icons": "3.5.4"
   },
   "peerDependencies": {
     "@vitest/coverage-istanbul": "2.0.5",
@@ -87,9 +87,9 @@
     "live-server": "^1.2.1",
     "vue": "3.4.21",
     "vue-router": "4.2.0",
-    "@varlet/icons": "3.5.3",
-    "@varlet/touch-emulator": "3.5.3",
-    "@varlet/ui": "3.5.3"
+    "@varlet/touch-emulator": "3.5.4",
+    "@varlet/ui": "3.5.4",
+    "@varlet/icons": "3.5.4"
   },
   "scripts": {
     "dev": "tsc --watch",

package/template/create/[ComponentName].tsx.ejs

@@ -1,9 +1,13 @@
 import { defineComponent } from 'vue'
 import { props } from './props'
+import { createNamespace } from '../utils/components'
+
 import './<%- camelizeName %>.less'
 
+const { name, n, classes } = createNamespace('<%- kebabCaseName %>')
+
 export default defineComponent({
-  name: '<%- bigCamelizeNamespace + bigCamelizeName %>',
+  name,
   props,
   setup(props, { slots }) {
     return () => {

package/template/create/[ComponentName].vue.ejs

@@ -5,13 +5,16 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { props } from './props'
+import { createNamespace } from '../utils/components'
+
+const { name, n, classes } = createNamespace('<%- kebabCaseName %>')
 
 export default defineComponent({
-  name: '<%- bigCamelizeNamespace + bigCamelizeName %>',
+  name,
   props
 })
 </script>
 
 <style lang="less">
-@import './<%- camelizeName %>.less';
+@import './<%- camelizeName %>';
 </style>

package/template/create/__tests__/index.spec.js.ejs

@@ -1,4 +1,5 @@
 import <%- bigCamelizeName %> from '..'
+import <%- bigCamelizeNamespace + bigCamelizeName %> from '../<%- bigCamelizeName %>'
 import { createApp } from 'vue'
 import { mount } from '@vue/test-utils'
 import { expect, test } from 'vitest'

package/template/create/example/locale/_index.ts

@@ -14,4 +14,4 @@ Locale.add('en-US', Locale.enUS)
 add('zh-CN', zhCN)
 add('en-US', enUS)
 
-export { add, t, merge, use }
+export { add, t, merge, use }

package/template/generators/base/.eslintrc

@@ -12,7 +12,5 @@
     "types/index.d.ts",
     ".varlet/**"
   ],
-  "extends": [
-    "@varlet"
-  ]
-}
+  "extends": ["@varlet"]
+}

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

@@ -8,7 +8,7 @@ export default defineConfig({
       darkMode: null,
       i18n: null,
       playground: null,
-      versions: null
+      versions: null,
     },
     menu: [
       {
@@ -44,5 +44,5 @@ export default defineConfig({
       i18n: null,
       darkMode: null,
     },
-  }
+  },
 })

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

@@ -1,14 +1,17 @@
 <template>
-  <button class="va-button" :style="{ background: color }" @click="handleClick">
+  <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: 'VaButton',
+  name,
   props: {
     color: {
       type: String,
@@ -21,8 +24,9 @@ export default defineComponent({
     const handleClick = (e: Event) => {
       props.onClick?.(e)
     }
-    
+
     return {
+      n,
       handleClick,
     }
   },

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

@@ -1,4 +1,5 @@
 import type { Component, Plugin, App } from 'vue'
+import { createNamespaceFn } from '@varlet/shared'
 
 export type ComponentWithInstall<T> = T & Plugin
 
@@ -14,4 +15,6 @@ export function withInstall<T = Component>(component: Component, target?: T): Co
   }
 
   return componentWithInstall as ComponentWithInstall<T>
-}
+}
+
+export const createNamespace = createNamespaceFn('va')

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

@@ -1,8 +1,12 @@
 import { defineComponent, PropType } from 'vue'
+import { createNamespace } from '../utils/components'
+
 import './button.less'
 
+const { name, n, classes } = createNamespace('button')
+
 export default defineComponent({
-  name: 'VaButton',
+  name,
   props: {
     color: {
       type: String,
@@ -18,7 +22,7 @@ export default defineComponent({
       const { color } = props
 
       return (
-        <button class="va-button" style={{ background: color }} onClick={handleClick}>
+        <button class={n()} style={{ background: color }} onClick={handleClick}>
           {slots.default?.()}
         </button>
       )

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

@@ -5,4 +5,4 @@ withInstall(Button)
 
 export const _ButtonComponent = Button
 
-export default Button
+export default Button

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

@@ -1,4 +1,5 @@
 import type { Component, Plugin, App } from 'vue'
+import { createNamespaceFn } from '@varlet/shared'
 
 export type ComponentWithInstall<T> = T & Plugin
 
@@ -14,4 +15,6 @@ export function withInstall<T = Component>(component: Component, target?: T): Co
   }
 
   return componentWithInstall as ComponentWithInstall<T>
-}
+}
+
+export const createNamespace = createNamespaceFn('va')

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

@@ -7,7 +7,7 @@ export default defineConfig({
     header: {
       darkMode: null,
       playground: null,
-      versions: null
+      versions: null,
     },
     menu: [
       {

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

@@ -1,5 +1,5 @@
 <template>
-  <button class="va-button" :style="{ background: color }" @click="handleClick">
+  <button :class="n()" :style="{ background: color }" @click="handleClick">
     {{ t('button') }}
     <slot />
   </button>
@@ -7,12 +7,15 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
+import { createNamespace } from '../utils/components'
 
 // i18n for component's internal
 import { t } from '../locale'
 
+const { name, n, classes } = createNamespace('button')
+
 export default defineComponent({
-  name: 'VaButton',
+  name,
   props: {
     color: {
       type: String,
@@ -28,6 +31,7 @@ export default defineComponent({
 
     return {
       t,
+      n,
       handleClick,
     }
   },

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

@@ -58,7 +58,7 @@ function useLocale<T = Message>() {
     add,
     use,
     merge,
-    t
+    t,
   }
 }
 

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

@@ -1,4 +1,5 @@
 import type { Component, Plugin, App } from 'vue'
+import { createNamespaceFn } from '@varlet/shared'
 
 export type ComponentWithInstall<T> = T & Plugin
 
@@ -14,4 +15,6 @@ export function withInstall<T = Component>(component: Component, target?: T): Co
   }
 
   return componentWithInstall as ComponentWithInstall<T>
-}
+}
+
+export const createNamespace = createNamespaceFn('va')

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

@@ -1,11 +1,15 @@
 import { defineComponent, PropType } from 'vue'
+import { createNamespace } from '../utils/components'
+
 import './button.less'
 
 // i18n for component's internal
 import { t } from '../locale'
 
+const { name, n, classes } = createNamespace('button')
+
 export default defineComponent({
-  name: 'VaButton',
+  name,
   props: {
     color: {
       type: String,
@@ -23,7 +27,7 @@ export default defineComponent({
       const { color } = props
 
       return (
-        <button class="va-button" style={{ background: color }} onClick={handleClick}>
+        <button class={n()} style={{ background: color }} onClick={handleClick}>
           {t('button')}
           {slots.default?.()}
         </button>

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

@@ -58,7 +58,7 @@ function useLocale<T = Message>() {
     add,
     use,
     merge,
-    t
+    t,
   }
 }
 

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

@@ -1,4 +1,5 @@
 import type { Component, Plugin, App } from 'vue'
+import { createNamespaceFn } from '@varlet/shared'
 
 export type ComponentWithInstall<T> = T & Plugin
 
@@ -14,4 +15,6 @@ export function withInstall<T = Component>(component: Component, target?: T): Co
   }
 
   return componentWithInstall as ComponentWithInstall<T>
-}
+}
+
+export const createNamespace = createNamespaceFn('va')