feat(tooltip, popconfirm): export props type

This commit is contained in:
07akioni 2021-04-17 23:27:12 +08:00
parent 9e9c713bc9
commit e70a6d977a
6 changed files with 49 additions and 33 deletions

View File

@ -1,2 +1,2 @@
/* istanbul ignore file */
export { default as NPopconfirm } from './src/Popconfirm'
export type { PopconfirmProps } from './src/Popconfirm'

View File

@ -2,36 +2,41 @@ import { h, ref, defineComponent, provide, PropType } from 'vue'
import { NPopover, PopoverInst, PopoverTrigger } from '../../popover'
import { popoverBaseProps } from '../../popover/src/Popover'
import { omit, keep, call } from '../../_utils'
import type { ExtractPublicPropTypes } from '../../_utils'
import { useConfig, useTheme } from '../../_mixins'
import type { ThemeProps } from '../../_mixins'
import { popconfirmLight } from '../styles'
import type { PopconfirmTheme } from '../styles'
import PopconfirmPanel, { panelPropKeys } from './PopconfirmPanel'
import style from './styles/index.cssr'
import type { PopconfirmInjection } from './interface'
import { popconfirmInjectionKey } from './interface'
const popconfirmProps = {
...(useTheme.props as ThemeProps<PopconfirmTheme>),
...popoverBaseProps,
positiveText: String,
negativeText: String,
showIcon: {
type: Boolean,
default: true
},
trigger: {
type: String as PropType<PopoverTrigger>,
default: 'click'
},
onPositiveClick: Function as PropType<
(e: MouseEvent) => Promise<boolean> | boolean | any
>,
onNegativeClick: Function as PropType<
(e: MouseEvent) => Promise<boolean> | boolean | any
>
}
export type PopconfirmProps = ExtractPublicPropTypes<typeof popconfirmProps>
export default defineComponent({
name: 'Popconfirm',
props: {
...(useTheme.props as ThemeProps<PopconfirmTheme>),
...popoverBaseProps,
positiveText: String,
negativeText: String,
showIcon: {
type: Boolean,
default: true
},
trigger: {
type: String as PropType<PopoverTrigger>,
default: 'click'
},
onPositiveClick: Function as PropType<
(e: MouseEvent) => Promise<boolean> | boolean | any
>,
onNegativeClick: Function as PropType<
(e: MouseEvent) => Promise<boolean> | boolean | any
>
},
props: popconfirmProps,
setup (props) {
const { mergedClsPrefix } = useConfig()
const themeRef = useTheme(
@ -63,7 +68,7 @@ export default defineComponent({
}
)
}
provide<PopconfirmInjection>('NPopconfirm', {
provide(popconfirmInjectionKey, {
mergedThemeRef: themeRef,
mergedClsPrefixRef: mergedClsPrefix
})

View File

@ -12,7 +12,7 @@ import { NBaseIcon } from '../../_internal'
import { WarningIcon } from '../../_internal/icons'
import { useLocale } from '../../_mixins'
import { keysOf } from '../../_utils'
import type { PopconfirmInjection } from './interface'
import { popconfirmInjectionKey } from './interface'
export const panelProps = {
positiveText: String,
@ -38,9 +38,8 @@ export default defineComponent({
props: panelProps,
setup (props) {
const { locale: localeRef } = useLocale('Popconfirm')
const NPopconfirm = inject<PopconfirmInjection>(
'NPopconfirm'
) as PopconfirmInjection
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const NPopconfirm = inject(popconfirmInjectionKey)!
return {
...useLocale('Popconfirm'),
cPrefix: NPopconfirm.mergedClsPrefixRef,
@ -78,7 +77,9 @@ export default defineComponent({
{this.showIcon ? (
<div class={`${cPrefix}-popconfirm__icon`}>
<slot name="icon">
<NBaseIcon>{{ default: () => <WarningIcon /> }}</NBaseIcon>
<NBaseIcon clsPrefix={cPrefix}>
{{ default: () => <WarningIcon /> }}
</NBaseIcon>
</slot>
</div>
) : null}

View File

@ -1,4 +1,4 @@
import { Ref } from 'vue'
import { InjectionKey, Ref } from 'vue'
import type { MergedTheme } from '../../_mixins'
import type { PopconfirmTheme } from '../styles'
@ -6,3 +6,7 @@ export interface PopconfirmInjection {
mergedThemeRef: Ref<MergedTheme<PopconfirmTheme>>
mergedClsPrefixRef: Ref<string>
}
export const popconfirmInjectionKey: InjectionKey<PopconfirmInjection> = Symbol(
'popconfirm'
)

View File

@ -1 +1,2 @@
export { default as NTooltip } from './src/Tooltip'
export type { TooltipProps } from './src/Tooltip'

View File

@ -7,15 +7,20 @@ import { useTheme } from '../../_mixins'
import type { ThemeProps } from '../../_mixins'
import { tooltipLight } from '../styles'
import type { TooltipTheme } from '../styles'
import type { ExtractPublicPropTypes } from '../../_utils'
export type TooltipInst = PopoverInst
const tooltipProps = {
...popoverBaseProps,
...(useTheme.props as ThemeProps<TooltipTheme>)
}
export type TooltipProps = ExtractPublicPropTypes<typeof tooltipProps>
export default defineComponent({
name: 'Tooltip',
props: {
...popoverBaseProps,
...(useTheme.props as ThemeProps<TooltipTheme>)
},
props: tooltipProps,
setup (props) {
const themeRef = useTheme(
'Tooltip',