feat(popover): get-disabled prop

CHANGELOG.en-US.md

@@ -5,13 +5,14 @@
 ### Feat
 
 - `n-config-provider` prop `theme-overrides` support inheritance.
-- `card` add `hoverable` prop.
-- `select` add `max-tag-count` prop.
-- `cascader` add `max-tag-count` prop.
+- `n-card` add `hoverable` prop.
+- `n-select` add `max-tag-count` prop.
+- `n-cascader` add `max-tag-count` prop.
+- `n-popover` add `get-disabled` prop.
 
 ### Fixes
 
-- Fix `cascader` menu appears after click clear button.
+- Fix `n-cascader` menu appears after click clear button.
 
 ## 2.0.1
 

CHANGELOG.zh-CN.md

@@ -5,13 +5,14 @@
 ### Feat
 
 - `n-config-provider` 的 `theme-overrides` 支持继承
-- `card` 新增 `hoverable` 属性
-- `select` 新增 `max-tag-count` 属性
-- `cascader` 新增 `max-tag-count` 属性
+- `n-card` 新增 `hoverable` 属性
+- `n-select` 新增 `max-tag-count` 属性
+- `n-cascader` 新增 `max-tag-count` 属性
+- `n-popover` 新增 `get-disabled` 属性
 
 ### Fixes
 
-- 修正 `cascader` 再点击清除按钮后菜单出现
+- 修正 `n-cascader` 再点击清除按钮后菜单出现
 
 ## 2.0.1
 

src/popover/src/Popover.ts

@@ -102,6 +102,7 @@ export const popoverProps = {
     type: Boolean,
     default: false
   },
+  getDisabled: Function as PropType<() => boolean>,
   displayDirective: {
     type: String as PropType<'if' | 'show'>,
     default: 'if'
@@ -194,9 +195,16 @@ export default defineComponent({
       controlledShowRef,
       uncontrolledShowRef
     )
-    const mergedShowRef = computed(() => {
-      return props.disabled ? false : mergedShowWithoutDisabledRef.value
-    })
+    const getMergedDisabled = (): boolean => {
+      if (props.disabled) return true
+      const { getDisabled } = props
+      if (getDisabled?.()) return true
+      return false
+    }
+    const getMergedShow = (): boolean => {
+      if (getMergedDisabled()) return false
+      return mergedShowWithoutDisabledRef.value
+    }
     // setup show-arrow
     const compatibleShowArrowRef = useCompitable(props, ['arrow', 'showArrow'])
     const mergedShowArrowRef = computed(() => {
@@ -249,9 +257,10 @@ export default defineComponent({
       }
     }
     function handleMouseEnter (): void {
-      if (props.trigger === 'hover' && !props.disabled) {
+      const mergedDisabled = getMergedDisabled()
+      if (props.trigger === 'hover' && !mergedDisabled) {
         clearTimer()
-        if (mergedShowRef.value) return
+        if (getMergedShow()) return
         const delayCallback = (): void => {
           doUpdateShow(true)
           showTimerIdRef.value = null
@@ -265,9 +274,10 @@ export default defineComponent({
       }
     }
     function handleMouseLeave (): void {
-      if (props.trigger === 'hover' && !props.disabled) {
+      const mergedDisabled = getMergedDisabled()
+      if (props.trigger === 'hover' && !mergedDisabled) {
         clearTimer()
-        if (!mergedShowRef.value) return
+        if (!getMergedShow()) return
         const delayedCallback = (): void => {
           doUpdateShow(false)
           hideTimerIdRef.value = null
@@ -286,7 +296,7 @@ export default defineComponent({
     }
     // will be called in popover-content
     function handleClickOutside (): void {
-      if (!mergedShowRef.value) return
+      if (!getMergedShow()) return
       if (props.trigger === 'click') {
         clearTimer()
         doUpdateShow(false)
@@ -295,7 +305,7 @@ export default defineComponent({
     function handleClick (): void {
       if (props.trigger === 'click' && !props.disabled) {
         clearTimer()
-        const nextShow = !mergedShowRef.value
+        const nextShow = !getMergedShow()
         doUpdateShow(nextShow)
       }
     }
@@ -326,8 +336,8 @@ export default defineComponent({
       }),
       // if to show popover body
       uncontrolledShow: uncontrolledShowRef,
-      mergedShow: mergedShowRef,
       mergedShowArrow: mergedShowArrowRef,
+      getMergedShow,
       setShow,
       handleClick,
       handleMouseEnter,
@@ -365,6 +375,7 @@ export default defineComponent({
 
     return h(VBinder, null, {
       default: () => {
+        const mergedShow = this.getMergedShow()
         return [
           positionManually
             ? null
@@ -376,7 +387,7 @@ export default defineComponent({
             keep(this.$props, bodyPropKeys, {
               ...this.$attrs,
               showArrow: this.mergedShowArrow,
-              show: this.mergedShow
+              show: mergedShow
             }),
             slots
           )