feat(result): clsPrefix

src/result/index.ts

@@ -1,2 +1,2 @@
-/* istanbul ignore file */
 export { default as NResult } from './src/Result'
+export type { ResultProps } from './src/Result'

src/result/src/Result.tsx

@@ -6,9 +6,10 @@ import {
   renderSlot,
   CSSProperties
 } from 'vue'
-import { useTheme } from '../../_mixins'
+import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import { createKey } from '../../_utils'
+import type { ExtractPublicPropTypes } from '../../_utils'
 import {
   InfoIcon,
   SuccessIcon,
@@ -38,32 +39,39 @@ const iconMap = {
   error: <ErrorIcon />
 }
 
+const resultProps = {
+  ...(useTheme.props as ThemeProps<ResultTheme>),
+  size: {
+    type: String as PropType<'small' | 'medium' | 'large' | 'huge'>,
+    default: 'medium'
+  },
+  status: {
+    type: String as PropType<
+    'info' | 'success' | 'warning' | 'error' | '404' | '403' | '500' | '418'
+    >,
+    default: 'info'
+  },
+  title: String,
+  description: String
+}
+
+export type ResultProps = ExtractPublicPropTypes<typeof resultProps>
+
 export default defineComponent({
   name: 'Result',
-  props: {
-    ...(useTheme.props as ThemeProps<ResultTheme>),
-    size: {
-      type: String as PropType<'small' | 'medium' | 'large' | 'huge'>,
-      default: 'medium'
-    },
-    status: {
-      type: String as PropType<
-      'info' | 'success' | 'warning' | 'error' | '404' | '403' | '500' | '418'
-      >,
-      default: 'info'
-    },
-    title: {
-      type: String,
-      default: undefined
-    },
-    description: {
-      type: String,
-      default: undefined
-    }
-  },
+  props: resultProps,
   setup (props) {
-    const themeRef = useTheme('Result', 'Result', style, resultLight, props)
+    const { mergedClsPrefix } = useConfig(props)
+    const themeRef = useTheme(
+      'Result',
+      'Result',
+      style,
+      resultLight,
+      props,
+      mergedClsPrefix
+    )
     return {
+      cPrefix: mergedClsPrefix,
       cssVars: computed(() => {
         const { size, status } = props
         const {
@@ -94,24 +102,30 @@ export default defineComponent({
     }
   },
   render () {
-    const { status, $slots } = this
+    const { status, $slots, cPrefix } = this
     return (
-      <div class="n-result" style={this.cssVars as CSSProperties}>
-        <div class="n-result-icon">
+      <div class={`${cPrefix}-result`} style={this.cssVars as CSSProperties}>
+        <div class={`${cPrefix}-result-icon`}>
           {status in imgMap ? (
             imgMap[(status as unknown) as keyof typeof imgMap]
           ) : (
-            <NBaseIcon>
+            <NBaseIcon clsPrefix={cPrefix}>
               {{ default: () => iconMap[status as keyof typeof iconMap] }}
             </NBaseIcon>
           )}
         </div>
-        <div class="n-result-header">
-          <div class="n-result-header__title">{this.title}</div>
-          <div class="n-result-header__description">{this.description}</div>
+        <div class={`${cPrefix}-result-header`}>
+          <div class={`${cPrefix}-result-header__title`}>{this.title}</div>
+          <div class={`${cPrefix}-result-header__description`}>
+            {this.description}
+          </div>
+        </div>
+        {$slots.default ? (
+          <div class={`${cPrefix}-result-content`}>{$slots}</div>
+        ) : null}
+        <div class={`${cPrefix}-result-footer`}>
+          {renderSlot($slots, 'footer')}
         </div>
-        {$slots.default ? <div class="n-result-content">{$slots}</div> : null}
-        <div class="n-result-footer">{renderSlot($slots, 'footer')}</div>
       </div>
     )
   }