feat(dialog): clsPrefix

src/dialog/demos/enUS/index.demo-entry.md

@@ -20,7 +20,6 @@ import { useDialog } from 'naive-ui'
 
 // content
 export default {
-  inject: ['dialog'],
   setup () {
     const dialog = useDialog()
     return {

src/dialog/demos/zhCN/async.demo.md

@@ -13,7 +13,6 @@ const sleep = () => new Promise((resolve) => setTimeout(resolve, 1000))
 const countDown = (second) => `倒计时 ${second} 秒`
 
 export default {
-  inject: ['dialog'],
   setup () {
     const dialog = useDialog()
     return {

src/dialog/demos/zhCN/index.demo-entry.md

@@ -20,7 +20,6 @@ import { useDialog } from 'naive-ui'
 
 // content
 export default {
-  inject: ['dialog'],
   setup () {
     const dialog = useDialog()
     return {

src/dialog/index.ts

@@ -1,10 +1,11 @@
 export { default as NDialog } from './src/Dialog'
 export type { DialogProps } from './src/Dialog'
-export { dialogProps, dialogPropKeys } from './src/Dialog'
 export { default as NDialogProvider } from './src/DialogProvider'
-export { useDialog } from './src/use-dialog'
 export type {
+  DialogProviderProps,
+  DialogProviderInst,
   DialogOptions,
   DialogReactive,
   DialogApiInjection
 } from './src/DialogProvider'
+export { useDialog } from './src/use-dialog'

src/dialog/src/Dialog.tsx

@@ -10,6 +10,7 @@ import {
 import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import { render, createKey, keysOf } from '../../_utils'
+import type { ExtractPublicPropTypes } from '../../_utils'
 import { NBaseIcon, NBaseClose } from '../../_internal'
 import { NButton } from '../../button'
 import {
@@ -67,7 +68,7 @@ const dialogProps = {
   onClose: Function as PropType<() => void>
 } as const
 
-export type DialogProps = typeof dialogProps
+export type DialogProps = ExtractPublicPropTypes<typeof dialogProps>
 export { dialogProps }
 export const dialogPropKeys = keysOf(dialogProps)
 
@@ -82,7 +83,7 @@ export default defineComponent({
     ...dialogProps
   },
   setup (props) {
-    const { NConfigProvider } = useConfig(props)
+    const { NConfigProvider, mergedClsPrefix } = useConfig(props)
     const mergedIconPlacementRef = computed(() => {
       const { iconPlacement } = props
       return (
@@ -103,8 +104,16 @@ export default defineComponent({
       const { onClose } = props
       if (onClose) onClose()
     }
-    const themeRef = useTheme('Dialog', 'Dialog', style, dialogLight, props)
+    const themeRef = useTheme(
+      'Dialog',
+      'Dialog',
+      style,
+      dialogLight,
+      props,
+      mergedClsPrefix
+    )
     return {
+      cPrefix: mergedClsPrefix,
       mergedIconPlacement: mergedIconPlacementRef,
       mergedTheme: themeRef,
       handlePositiveClick,
@@ -182,25 +191,28 @@ export default defineComponent({
       handleNegativeClick,
       mergedTheme,
       loading,
-      type
+      type,
+      cPrefix
     } = this
     return (
       <div
         class={[
-          'n-dialog',
-          {
-            'n-dialog--bordered': bordered,
-            [`n-dialog--icon-${mergedIconPlacement}`]: true
-          }
+          `${cPrefix}-dialog`,
+          `${cPrefix}-dialog--icon-${mergedIconPlacement}`,
+          bordered && `${cPrefix}-dialog--bordered`
         ]}
         style={cssVars as CSSProperties}
       >
         {closable ? (
-          <NBaseClose class="n-dialog__close" onClick={this.handleCloseClick} />
+          <NBaseClose
+            clsPrefix={cPrefix}
+            class={`${cPrefix}-dialog__close`}
+            onClick={this.handleCloseClick}
+          />
         ) : null}
         {showIcon && mergedIconPlacement === 'top' ? (
-          <div class="n-dialog-icon-container">
-            <NBaseIcon class="n-dialog__icon">
+          <div class={`${cPrefix}-dialog-icon-container`}>
+            <NBaseIcon clsPrefix={cPrefix} class={`${cPrefix}-dialog__icon`}>
               {{
                 default: () =>
                   renderSlot($slots, 'icon', undefined, () => [
@@ -212,9 +224,9 @@ export default defineComponent({
             </NBaseIcon>
           </div>
         ) : null}
-        <div class="n-dialog__title">
+        <div class={`${cPrefix}-dialog__title`}>
           {showIcon && mergedIconPlacement === 'left' ? (
-            <NBaseIcon class="n-dialog__icon">
+            <NBaseIcon clsPrefix={cPrefix} class={`${cPrefix}-dialog__icon`}>
               {{
                 default: () =>
                   renderSlot($slots, 'icon', undefined, () => [
@@ -231,14 +243,14 @@ export default defineComponent({
             })
           ])}
         </div>
-        <div class="n-dialog__content">
+        <div class={`${cPrefix}-dialog__content`}>
           {renderSlot($slots, 'default', undefined, () => [
             h(render, {
               render: content
             })
           ])}
         </div>
-        <div class="n-dialog__action">
+        <div class={`${cPrefix}-dialog__action`}>
           {renderSlot($slots, 'action', undefined, () => [
             negativeText ? (
               <NButton

src/dialog/src/DialogProvider.ts

@@ -6,11 +6,12 @@ import {
   ExtractPropTypes,
   provide,
   PropType,
-  inject,
-  reactive
+  reactive,
+  InjectionKey
 } from 'vue'
 import { createId } from 'seemly'
-import { omit, throwError } from '../../_utils'
+import { omit } from '../../_utils'
+import type { ExtractPublicPropTypes } from '../../_utils'
 import DialogEnvironment, { exposedDialogEnvProps } from './DialogEnvironment'
 import { useClicked, useClickPosition } from 'vooks'
 
@@ -31,27 +32,37 @@ export interface DialogApiInjection {
   info: (options: DialogOptions) => DialogReactive
 }
 
+export const dialogApiInjectionKey: InjectionKey<DialogApiInjection> = Symbol(
+  'dialogApi'
+)
+
 export interface DialogProviderInjection {
   clicked: boolean
   clickPosition: { x: number, y: number } | null
 }
 
+export const dialogProviderInjectionKey: InjectionKey<DialogProviderInjection> = Symbol(
+  'dialogProvider'
+)
+
 interface DialogInst {
   hide: () => void
 }
 
-export function useDialog (): DialogApiInjection {
-  const dialog = inject<DialogApiInjection | null>('dialog', null)
-  if (dialog === null) throwError('use-dialog', 'Dialog injection not found.')
-  return dialog
+export type DialogProviderInst = DialogApiInjection
+
+const dialogProviderProps = {
+  injectionKey: String,
+  to: [String, Object] as PropType<string | HTMLElement>
 }
 
+export type DialogProviderProps = ExtractPublicPropTypes<
+  typeof dialogProviderProps
+>
+
 export default defineComponent({
   name: 'DialogProvider',
-  props: {
-    injectionKey: String,
-    to: [String, Object] as PropType<string | HTMLElement>
-  },
+  props: dialogProviderProps,
   setup () {
     const dialogListRef = ref<DialogReactive[]>([])
     const dialogInstRefs: Record<string, DialogInst> = {}
@@ -79,21 +90,23 @@ export default defineComponent({
         1
       )
     }
-    provide<DialogApiInjection>('dialog', {
+    const api = {
       create,
       info: typedApi[0],
       success: typedApi[1],
       warning: typedApi[2],
       error: typedApi[3]
-    })
-    provide<DialogProviderInjection>(
-      'NDialogProvider',
+    }
+    provide(dialogApiInjectionKey, api)
+    provide(
+      dialogProviderInjectionKey,
       reactive({
         clicked: useClicked(64),
         clickPosition: useClickPosition()
       })
     )
     return {
+      ...api,
       dialogList: dialogListRef,
       dialogInstRefs,
       handleAfterLeave

src/dialog/src/use-dialog.ts

@@ -1,9 +1,12 @@
 import { inject } from 'vue'
-import { DialogApiInjection } from './DialogProvider'
+import { dialogApiInjectionKey } from './DialogProvider'
+import type { DialogApiInjection } from './DialogProvider'
 import { throwError } from '../../_utils'
 
 export function useDialog (): DialogApiInjection {
-  const dialog = inject<DialogApiInjection>('dialog')
-  if (dialog === undefined) { throwError('use-dialog', 'No outer <n-dialog-provider /> founded.') }
+  const dialog = inject(dialogApiInjectionKey, null)
+  if (dialog === null) {
+    throwError('use-dialog', 'No outer <n-dialog-provider /> founded.')
+  }
   return dialog
 }

src/modal/src/BodyWrapper.tsx

@@ -16,9 +16,10 @@ import {
   mergeProps
 } from 'vue'
 import { clickoutside } from 'vdirs'
+import { dialogPropKeys } from '../../dialog/src/Dialog'
 import { cardBasePropKeys } from '../../card/src/Card'
 import { NScrollbar, ScrollbarInst } from '../../scrollbar'
-import { NDialog, dialogPropKeys } from '../../dialog'
+import { NDialog } from '../../dialog'
 import { NCard } from '../../card'
 import { getFirstSlotVNode, keep, warn } from '../../_utils'
 import { presetProps } from './presetProps'

src/modal/src/Modal.ts

@@ -15,7 +15,7 @@ import {
 import { zindexable } from 'vdirs'
 import { useIsMounted, useClicked, useClickPosition } from 'vooks'
 import { VLazyTeleport } from 'vueuc'
-import type { DialogProviderInjection } from '../../dialog/src/DialogProvider'
+import { dialogProviderInjectionKey } from '../../dialog/src/DialogProvider'
 import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps, MergedTheme } from '../../_mixins'
 import { warn, keep, call } from '../../_utils'
@@ -141,7 +141,7 @@ export default defineComponent({
     const clickedPositionRef = useClickPosition()
     const isMountedRef = useIsMounted()
     const NDialogProvider = props.dialog
-      ? inject<DialogProviderInjection | null>('NDialogProvider', null)
+      ? inject(dialogProviderInjectionKey, null)
       : null
     function doUpdateShow (show: boolean): void {
       const { onUpdateShow, 'onUpdate:show': _onUpdateShow, onHide } = props

src/modal/src/presetProps.ts

@@ -1,4 +1,4 @@
-import { dialogProps } from '../../dialog'
+import { dialogProps } from '../../dialog/src/Dialog'
 import { cardBaseProps } from '../../card/src/Card'
 import { keysOf } from '../../_utils'