feat(spin): clsPrefix

src/spin/index.ts

@@ -1,2 +1,2 @@
-/* istanbul ignore file */
 export { default as NSpin } from './src/Spin'
+export type { SpinProps } from './src/Spin'

src/spin/src/Spin.tsx

@@ -8,9 +8,9 @@ import {
 } from 'vue'
 import { useCompitable } from 'vooks'
 import { NBaseLoading } from '../../_internal'
-import { useTheme } from '../../_mixins'
+import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
-import { createKey, warn } from '../../_utils'
+import { createKey, ExtractPublicPropTypes, warn } from '../../_utils'
 import { spinLight } from '../styles'
 import type { SpinTheme } from '../styles'
 import style from './styles/index.cssr'
@@ -21,9 +21,7 @@ const STROKE_WIDTH = {
   large: 18
 }
 
-export default defineComponent({
-  name: 'Spin',
-  props: {
+const spinProps = {
   ...(useTheme.props as ThemeProps<SpinTheme>),
   stroke: {
     type: String,
@@ -49,10 +47,25 @@ export default defineComponent({
     },
     default: undefined
   }
-  },
+}
+
+export type SpinProps = ExtractPublicPropTypes<typeof spinProps>
+
+export default defineComponent({
+  name: 'Spin',
+  props: spinProps,
   setup (props) {
-    const themeRef = useTheme('Spin', 'Spin', style, spinLight, props)
+    const { mergedClsPrefix } = useConfig(props)
+    const themeRef = useTheme(
+      'Spin',
+      'Spin',
+      style,
+      spinLight,
+      props,
+      mergedClsPrefix
+    )
     return {
+      cPrefix: mergedClsPrefix,
       compitableShow: useCompitable(props, ['spinning', 'show']),
       mergedStrokeWidth: computed(() => {
         const { strokeWidth } = props
@@ -76,15 +89,16 @@ export default defineComponent({
     }
   },
   render () {
-    const { $slots } = this
+    const { $slots, cPrefix } = this
     return $slots.default ? (
-      <div class="n-spin-container" style={this.cssVars as CSSProperties}>
+      <div
+        class={`${cPrefix}-spin-container`}
+        style={this.cssVars as CSSProperties}
+      >
         <div
           class={[
-            'n-spin-content',
-            {
-              'n-spin-content--spinning': this.compitableShow
-            }
+            `${cPrefix}-spin-content`,
+            this.compitableShow && `${cPrefix}-spin-content--spinning`
           ]}
         >
           {$slots}
@@ -94,9 +108,10 @@ export default defineComponent({
             default: () =>
               this.compitableShow ? (
                 <NBaseLoading
+                  clsPrefix={cPrefix}
                   stroke={this.stroke}
                   strokeWidth={this.mergedStrokeWidth}
-                  class="n-spin"
+                  class={`${cPrefix}-spin`}
                 />
               ) : null
           }}
@@ -104,10 +119,11 @@ export default defineComponent({
       </div>
     ) : (
       <NBaseLoading
+        clsPrefix={cPrefix}
         style={this.cssVars as CSSProperties}
         stroke={this.stroke}
         stroke-width={this.mergedStrokeWidth}
-        class="n-spin"
+        class={`${cPrefix}-spin`}
       />
     )
   }