feat(button): clsPrefix

src/_internal/icon/src/Icon.tsx

@@ -7,7 +7,7 @@ export default defineComponent({
   props: {
     clsPerfix: {
       type: String,
-      default: 'n'
+      required: true
     },
     onClick: Function as PropType<(e: MouseEvent) => void>,
     onMousedown: Function as PropType<(e: MouseEvent) => void>

src/_internal/loading/src/Loading.tsx

@@ -1,4 +1,4 @@
-import { h, defineComponent } from 'vue'
+import { h, defineComponent, toRef } from 'vue'
 import { useStyle } from '../../../_mixins'
 import NIconSwitchTransition from '../../icon-switch-transition'
 import style from './styles/index.cssr'
@@ -6,6 +6,10 @@ import style from './styles/index.cssr'
 export default defineComponent({
   name: 'BaseLoading',
   props: {
+    clsPrefix: {
+      type: String,
+      required: true
+    },
     scale: {
       type: Number,
       default: 1
@@ -27,26 +31,27 @@ export default defineComponent({
       default: true
     }
   },
-  setup () {
-    useStyle('BaseLoading', style)
+  setup (props) {
+    useStyle('BaseLoading', style, toRef(props, 'clsPrefix'))
   },
   render () {
+    const { clsPrefix } = this
     return (
-      <div class="n-base-loading" style={{ stroke: this.stroke }}>
+      <div class={`${clsPrefix}-base-loading`} style={{ stroke: this.stroke }}>
         <NIconSwitchTransition>
           {{
             default: () =>
               this.show ? (
                 <svg
                   key="loading"
-                  class="n-base-loading-circular n-base-loading__icon"
+                  class={`${clsPrefix}-base-loading-circular ${clsPrefix}-base-loading__icon`}
                   viewBox={`0 0 ${(this.radius * 2) / this.scale} ${
                     (this.radius * 2) / this.scale
                   }`}
                 >
                   <circle
                     style={{ strokeWidth: this.strokeWidth }}
-                    class="n-base-loading-circular-path"
+                    class={`${clsPrefix}-base-loading-circular-path`}
                     cx={this.radius / this.scale}
                     cy={this.radius / this.scale}
                     fill="none"
@@ -54,7 +59,10 @@ export default defineComponent({
                   />
                 </svg>
               ) : (
-                <div key="placeholder" class="n-base-loading__placeholder">
+                <div
+                  key="placeholder"
+                  class={`${clsPrefix}-base-loading__placeholder`}
+                >
                   {this.$slots}
                 </div>
               )

src/_internal/wave/src/Wave.tsx

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, onBeforeUnmount, nextTick } from 'vue'
+import { h, defineComponent, ref, onBeforeUnmount, nextTick, toRef } from 'vue'
 import { useStyle } from '../../../_mixins'
 import style from './styles/index.cssr'
 
@@ -8,8 +8,14 @@ export interface BaseWaveRef {
 
 export default defineComponent({
   name: 'BaseWave',
-  setup () {
-    useStyle('BaseWave', style)
+  props: {
+    clsPrefix: {
+      type: String,
+      required: true
+    }
+  },
+  setup (props) {
+    useStyle('BaseWave', style, toRef(props, 'clsPrefix'))
     const selfRef = ref<HTMLElement | null>(null)
     const activeRef = ref(false)
     let animationTimerId: number | null = null
@@ -40,14 +46,13 @@ export default defineComponent({
     }
   },
   render () {
+    const { clsPrefix } = this
     return (
       <div
         ref="selfRef"
         class={[
-          'n-base-wave',
-          {
-            'n-base-wave--active': this.active
-          }
+          `${clsPrefix}-base-wave`,
+          this.active && `${clsPrefix}-base-wave--active`
         ]}
       />
     )

src/alert/src/Alert.tsx

@@ -179,7 +179,7 @@ export default defineComponent({
                       {this.$slots.icon ? (
                         renderSlot(this.$slots, 'icon')
                       ) : (
-                        <NBaseIcon>
+                        <NBaseIcon clsPerfix={cPrefix}>
                           {{
                             default: () => {
                               switch (this.type) {

src/button/index.ts

@@ -1,3 +1,4 @@
-/* istanbul ignore file */
 export { default as NButton } from './src/Button'
 export { default as NButtonGroup } from './src/ButtonGroup'
+export type { ButtonProps } from './src/Button'
+export type { ButtonGroupProps } from './src/ButtonGroup'

src/button/src/Button.tsx

@@ -7,7 +7,8 @@ import {
   defineComponent,
   PropType,
   renderSlot,
-  CSSProperties
+  CSSProperties,
+  ExtractPropTypes
 } from 'vue'
 import { useMemo } from 'vooks'
 import { createHoverColor, createPressedColor } from '../../_utils/color/index'
@@ -24,74 +25,78 @@ import { call, createKey } from '../../_utils'
 import type { MaybeArray } from '../../_utils'
 import { buttonLight } from '../styles'
 import type { ButtonTheme } from '../styles'
-import type { ButtonGroupInjection } from './ButtonGroup'
+import { buttonGroupInjectionKey } from './ButtonGroup'
 import type { Type, Size } from './interface'
 import style from './styles/button.cssr'
 
+const buttonProps = {
+  ...(useTheme.props as ThemeProps<ButtonTheme>),
+  color: String,
+  text: {
+    type: Boolean,
+    default: false
+  },
+  block: {
+    type: Boolean,
+    default: false
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  circle: {
+    type: Boolean,
+    default: false
+  },
+  size: String as PropType<Size>,
+  ghost: {
+    type: Boolean,
+    default: false
+  },
+  round: {
+    type: Boolean,
+    default: false
+  },
+  focusable: {
+    type: Boolean,
+    default: true
+  },
+  keyboard: {
+    type: Boolean,
+    default: true
+  },
+  type: {
+    type: String as PropType<Type>,
+    default: 'default'
+  },
+  dashed: {
+    type: Boolean,
+    default: false
+  },
+  iconPlacement: {
+    type: String as PropType<'left' | 'right'>,
+    default: 'left'
+  },
+  attrType: {
+    type: String as PropType<'button' | 'submit' | 'reset'>,
+    default: 'button'
+  },
+  onClick: [Function, Array] as PropType<MaybeArray<(e: MouseEvent) => void>>,
+  bordered: {
+    type: Boolean,
+    default: true
+  }
+} as const
+
+export type ButtonProps = Partial<ExtractPropTypes<typeof buttonProps>>
+
 export default defineComponent({
   name: 'Button',
-  props: {
-    ...(useTheme.props as ThemeProps<ButtonTheme>),
-    color: String,
-    text: {
-      type: Boolean,
-      default: false
-    },
-    block: {
-      type: Boolean,
-      default: false
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    circle: {
-      type: Boolean,
-      default: false
-    },
-    size: String as PropType<Size>,
-    ghost: {
-      type: Boolean,
-      default: false
-    },
-    round: {
-      type: Boolean,
-      default: false
-    },
-    focusable: {
-      type: Boolean,
-      default: true
-    },
-    keyboard: {
-      type: Boolean,
-      default: true
-    },
-    type: {
-      type: String as PropType<Type>,
-      default: 'default'
-    },
-    dashed: {
-      type: Boolean,
-      default: false
-    },
-    iconPlacement: {
-      type: String as PropType<'left' | 'right'>,
-      default: 'left'
-    },
-    attrType: {
-      type: String as PropType<'button' | 'submit' | 'reset'>,
-      default: 'button'
-    },
-    onClick: [Function, Array] as PropType<MaybeArray<(e: MouseEvent) => void>>,
-    bordered: {
-      type: Boolean,
-      default: true
-    }
-  },
+  props: buttonProps,
   setup (props) {
     const selfRef = ref<HTMLElement | null>(null)
     const waveRef = ref<BaseWaveRef | null>(null)
@@ -103,7 +108,7 @@ export default defineComponent({
         props.bordered
       )
     })
-    const NButtonGroup = inject<ButtonGroupInjection>('NButtonGroup', {})
+    const NButtonGroup = inject(buttonGroupInjectionKey, {})
     const { mergedSize: mergedSizeRef } = useFormItem(
       {},
       {
@@ -429,6 +434,7 @@ export default defineComponent({
                       default: () =>
                         this.loading ? (
                           <NBaseLoading
+                            clsPrefix={cPrefix}
                             key="loading"
                             class={`${cPrefix}-icon-slot`}
                             strokeWidth={24}
@@ -447,7 +453,7 @@ export default defineComponent({
         {$slots.default && this.iconPlacement === 'left' ? (
           <span class={`${cPrefix}-button__content`}>{$slots}</span>
         ) : null}
-        {!this.text ? <NBaseWave ref="waveRef" /> : null}
+        {!this.text ? <NBaseWave ref="waveRef" clsPrefix={cPrefix} /> : null}
         {this.showBorder ? (
           <div
             class={`${cPrefix}-button__border`}

src/button/src/ButtonGroup.tsx

@@ -1,5 +1,12 @@
-import { h, PropType, defineComponent, provide } from 'vue'
-import { useStyle } from '../../_mixins'
+import {
+  h,
+  PropType,
+  defineComponent,
+  provide,
+  InjectionKey,
+  ExtractPropTypes
+} from 'vue'
+import { useConfig, useStyle } from '../../_mixins'
 import type { Size } from './interface'
 import style from './styles/button-group.cssr'
 
@@ -7,29 +14,41 @@ export interface ButtonGroupInjection {
   size?: Size | undefined
 }
 
+export const buttonGroupInjectionKey: InjectionKey<ButtonGroupInjection> = Symbol(
+  'button-group'
+)
+
+const buttonGroupProps = {
+  size: {
+    type: String as PropType<Size | undefined>,
+    default: undefined
+  },
+  vertical: Boolean
+} as const
+
+export type ButtonGroupProps = Partial<
+ExtractPropTypes<typeof buttonGroupProps>
+>
+
 export default defineComponent({
   name: 'ButtonGroup',
-  props: {
-    size: {
-      type: String as PropType<Size | undefined>,
-      default: undefined
-    },
-    vertical: {
-      type: Boolean,
-      default: false
+  props: buttonGroupProps,
+  setup (props) {
+    const { mergedClsPrefix } = useConfig(props)
+    useStyle('ButtonGroup', style, mergedClsPrefix)
+    provide(buttonGroupInjectionKey, props)
+    return {
+      cPrefix: mergedClsPrefix
     }
   },
-  setup (props) {
-    useStyle('ButtonGroup', style)
-    provide<ButtonGroupInjection>('NButtonGroup', props)
-  },
   render () {
+    const { cPrefix } = this
     return (
       <div
         class={[
-          'n-button-group',
+          `${cPrefix}-button-group`,
           {
-            'n-button-group--vertical': this.vertical
+            [`${cPrefix}-button-group--vertical`]: this.vertical
           }
         ]}
       >