From 801576936c3cd54db84cf6a69fcd63bd28076c20 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Tue, 6 Apr 2021 18:33:37 +0800 Subject: [PATCH] docs(popover): exposed methods --- src/ellipsis/src/index.tsx | 4 ++-- src/popconfirm/src/Popconfirm.ts | 4 ++-- src/popover/demos/enUS/index.demo-entry.md | 7 +++++++ src/popover/demos/zhCN/index.demo-entry.md | 7 +++++++ src/popover/index.ts | 2 +- src/popover/src/interface.ts | 2 +- src/popover/tests/Popover.spec.tsx | 19 +++++++++++++++++-- src/popselect/src/Popselect.ts | 4 ++-- src/tooltip/src/Tooltip.ts | 8 ++++---- 9 files changed, 43 insertions(+), 14 deletions(-) diff --git a/src/ellipsis/src/index.tsx b/src/ellipsis/src/index.tsx index 19ae65b15..27039dbbe 100644 --- a/src/ellipsis/src/index.tsx +++ b/src/ellipsis/src/index.tsx @@ -8,7 +8,7 @@ import { ExtractPropTypes } from 'vue' import type { PopoverProps } from '../../popover/src/Popover' -import { TooltipRef } from '../../tooltip/src/Tooltip' +import { TooltipInst } from '../../tooltip/src/Tooltip' import { NTooltip } from '../../tooltip' import { useTheme } from '../../_mixins' import type { ThemeProps } from '../../_mixins' @@ -45,7 +45,7 @@ export default defineComponent({ props ) const triggerRef = ref(null) - const tooltipRef = ref(null) + const tooltipRef = ref(null) const expandedRef = ref(false) const ellpisisStyleRef = computed(() => { const { lineClamp } = props diff --git a/src/popconfirm/src/Popconfirm.ts b/src/popconfirm/src/Popconfirm.ts index 512452c4d..05cf6acd8 100644 --- a/src/popconfirm/src/Popconfirm.ts +++ b/src/popconfirm/src/Popconfirm.ts @@ -2,7 +2,7 @@ import { h, ref, defineComponent, provide, PropType, reactive } from 'vue' import { NPopover, popoverProps, - PopoverRef, + PopoverInst, PopoverTrigger } from '../../popover' import { omit, keep, call } from '../../_utils' @@ -44,7 +44,7 @@ export default defineComponent({ popconfirmLight, props ) - const popoverInstRef = ref(null) + const popoverInstRef = ref(null) function handlePositiveClick (e: MouseEvent): void { const { onPositiveClick, 'onUpdate:show': onUpdateShow } = props void Promise.resolve(onPositiveClick ? onPositiveClick(e) : true).then( diff --git a/src/popover/demos/enUS/index.demo-entry.md b/src/popover/demos/enUS/index.demo-entry.md index 30a7ac153..8f2f1f10b 100644 --- a/src/popover/demos/enUS/index.demo-entry.md +++ b/src/popover/demos/enUS/index.demo-entry.md @@ -47,3 +47,10 @@ manual-position | ------- | ---------- | ----------------------------------------------- | | trigger | `()` | The element or component that triggers popover. | | default | `()` | The content inside popover. | + +## Methods + +| Name | Parameters | Description | +| ------------ | ----------------- | ------------------------------------- | +| setShow | `(show: boolean)` | Set show status in uncontrolled mode. | +| syncPosition | `()` | Sync popover position. | diff --git a/src/popover/demos/zhCN/index.demo-entry.md b/src/popover/demos/zhCN/index.demo-entry.md index 9a58da5fd..3266bf1c1 100644 --- a/src/popover/demos/zhCN/index.demo-entry.md +++ b/src/popover/demos/zhCN/index.demo-entry.md @@ -47,3 +47,10 @@ manual-position | ------- | ---- | ------------------------ | | trigger | `()` | 触发弹出信息的组件或元素 | | default | `()` | 弹出的内容 | + +## Methods + +| 名称 | 参数 | 说明 | +| ------------ | ----------------- | -------------------------------- | +| setShow | `(show: boolean)` | 非受控模式下控制是否显示 popover | +| syncPosition | `()` | 同步 popover 位置 | diff --git a/src/popover/index.ts b/src/popover/index.ts index dc2b7c91b..5d82aaaa4 100644 --- a/src/popover/index.ts +++ b/src/popover/index.ts @@ -1,2 +1,2 @@ export { default as NPopover, popoverProps } from './src/Popover' -export type { PopoverTrigger, PopoverRef } from './src/interface' +export type { PopoverTrigger, PopoverInst } from './src/interface' diff --git a/src/popover/src/interface.ts b/src/popover/src/interface.ts index ce92bfd27..330c919b6 100644 --- a/src/popover/src/interface.ts +++ b/src/popover/src/interface.ts @@ -1,6 +1,6 @@ export type PopoverTrigger = 'click' | 'hover' | 'manual' -export interface PopoverRef { +export interface PopoverInst { syncPosition: () => void setShow: (value: boolean) => void } diff --git a/src/popover/tests/Popover.spec.tsx b/src/popover/tests/Popover.spec.tsx index c4b68230b..306835271 100644 --- a/src/popover/tests/Popover.spec.tsx +++ b/src/popover/tests/Popover.spec.tsx @@ -1,6 +1,6 @@ -import { defineComponent, h, Fragment } from 'vue' +import { defineComponent, h, Fragment, nextTick } from 'vue' import { mount } from '@vue/test-utils' -import { NPopover } from '../index' +import { NPopover, PopoverInst } from '../index' import { createId } from 'seemly' async function sleep (ms: number): Promise { @@ -78,6 +78,21 @@ describe('n-popover', () => { expect( document.querySelector(`.star-kirby-${classNameHash}-content`) ).toEqual(null) + + const inst = wrapper.vm as PopoverInst + + inst.setShow(true) + await nextTick() + expect( + document.querySelector(`.star-kirby-${classNameHash}-content`) + ).not.toEqual(null) + + inst.setShow(false) + await nextTick() + expect( + document.querySelector(`.star-kirby-${classNameHash}-content`) + ).toEqual(null) + wrapper.unmount() }) }) diff --git a/src/popselect/src/Popselect.ts b/src/popselect/src/Popselect.ts index 361eff3e3..ce4f4ff55 100644 --- a/src/popselect/src/Popselect.ts +++ b/src/popselect/src/Popselect.ts @@ -1,6 +1,6 @@ import { h, ref, provide, defineComponent, reactive, PropType } from 'vue' import { NPopover, popoverProps } from '../../popover' -import type { PopoverRef, PopoverTrigger } from '../../popover' +import type { PopoverInst, PopoverTrigger } from '../../popover' import NPopselectPanel, { panelPropKeys, panelProps } from './PopselectPanel' import { omit, keep } from '../../_utils' import { useTheme } from '../../_mixins' @@ -34,7 +34,7 @@ export default defineComponent({ popselectLight, props ) - const popoverInstRef = ref(null) + const popoverInstRef = ref(null) function syncPosition (): void { popoverInstRef.value?.syncPosition() } diff --git a/src/tooltip/src/Tooltip.ts b/src/tooltip/src/Tooltip.ts index 87a4c6997..bc85d2bf3 100644 --- a/src/tooltip/src/Tooltip.ts +++ b/src/tooltip/src/Tooltip.ts @@ -1,13 +1,13 @@ // Tooltip: popover wearing waistcoat import { h, defineComponent, ref, computed } from 'vue' import { NPopover, popoverProps } from '../../popover' -import type { PopoverRef } from '../../popover' +import type { PopoverInst } from '../../popover' import { useTheme } from '../../_mixins' import type { ThemeProps } from '../../_mixins' import { tooltipLight } from '../styles' import type { TooltipTheme } from '../styles' -export type TooltipRef = PopoverRef +export type TooltipInst = PopoverInst export default defineComponent({ name: 'Tooltip', @@ -23,8 +23,8 @@ export default defineComponent({ tooltipLight, props ) - const popoverRef = ref(null) - const tooltipExposedMethod: TooltipRef = { + const popoverRef = ref(null) + const tooltipExposedMethod: TooltipInst = { syncPosition () { // eslint-disable-next-line @typescript-eslint/no-non-null-assertion popoverRef.value!.syncPosition()