refactor(popover): refactor prop types

design-notes/how-to-name-a-style-var.md

@@ -1,40 +1,50 @@
 # How to Name a Style Var
+
 For example, you have a button, which has `default` and `error` type. How will you name the background color of the button.
+
 ```
 buttonColor
 errorButtonColor
 ```
+
 or
+
 ```
 buttonColor
 buttonColorError
 ```
+
 The second is the better (The second is easy to extend and read. Also it follow the css pattern for example `padding-right` and `padding-left`).
 
 When it comes to hover style?
+
 ```
 buttonColor
 buttonColorHover
 buttonColorError
 buttonColorErrorHover <-
 ```
+
 or
+
 ```
 buttonColor
 buttonColorHover
 buttonColorError
 buttonColorHoverError <-
 ```
+
 The second is the better since if you want write a map entity, you always loop on types. For example:
+
 ```js
 // better
-['Default', 'Error'].map(type => [
+;['Default', 'Error'].map((type) => [
   'buttonColor' + type,
   'buttonColorHover' + type
 ])
 // worse, hard to maintain
-['Default', 'Error'].map(type => [
+;['Default', 'Error'].map((type) => [
   'button' + type + 'Color',
   'buttonHover' + type + 'Color'
 ])
-```
+```

src/popover/src/Popover.ts

@@ -8,7 +8,8 @@ import {
   PropType,
   VNode,
   Slots,
-  provide
+  provide,
+  CSSProperties
 } from 'vue'
 import { VBinder, VTarget, FollowerPlacement } from 'vueuc'
 import { useMergedState, useCompitable, useIsMounted, useMemo } from 'vooks'
@@ -81,7 +82,7 @@ export interface PopoverInjection {
 
 export const popoverProps = {
   show: {
-    type: Boolean,
+    type: Boolean as PropType<boolean | undefined>,
     default: undefined
   },
   defaultShow: {
@@ -92,10 +93,7 @@ export const popoverProps = {
     type: Boolean,
     default: true
   },
-  trigger: {
-    type: String as PropType<PopoverTrigger>,
-    default: undefined
-  },
+  trigger: String as PropType<PopoverTrigger>,
   delay: {
     type: Number,
     default: 200
@@ -112,26 +110,17 @@ export const popoverProps = {
     type: String as PropType<FollowerPlacement>,
     default: 'bottom'
   },
-  x: {
-    type: Number,
-    default: undefined
-  },
-  y: {
-    type: Number,
-    default: undefined
-  },
+  x: Number,
+  y: Number,
   disabled: {
     type: Boolean,
     default: false
   },
   displayDirective: {
-    type: String,
+    type: String as PropType<'if' | 'show'>,
     default: 'if'
   },
-  arrowStyle: {
-    type: Object,
-    default: undefined
-  },
+  arrowStyle: [String, Object] as PropType<string | CSSProperties>,
   filp: {
     type: Boolean,
     default: true
@@ -157,7 +146,7 @@ export const popoverProps = {
   onUpdateShow: Function as PropType<
   MaybeArray<(value: boolean) => void> | undefined
   >,
-  // deprecated
+  /** @deprecated */
   onShow: {
     type: Function as PropType<
     MaybeArray<(value: boolean) => void> | undefined
@@ -171,6 +160,7 @@ export const popoverProps = {
     },
     default: undefined
   },
+  /** @deprecated */
   onHide: {
     type: Function as PropType<
     MaybeArray<(value: boolean) => void> | undefined
@@ -184,22 +174,17 @@ export const popoverProps = {
     },
     default: undefined
   },
+  /** @deprecated */
   arrow: {
-    type: Boolean,
+    type: Boolean as PropType<boolean | undefined>,
     default: undefined
   },
-  width: {
-    type: Number,
-    default: undefined
-  },
-  minWidth: {
-    type: Number,
-    default: undefined
-  },
-  maxWidth: {
-    type: Number,
-    default: undefined
-  }
+  /** @deprecated */
+  width: Number,
+  /** @deprecated */
+  minWidth: Number,
+  /** @deprecated */
+  maxWidth: Number
 }
 
 export default defineComponent({

src/popover/src/PopoverBody.ts

@@ -23,83 +23,30 @@ import { popoverLight } from '../styles'
 import type { PopoverTheme } from '../styles'
 import style from './styles/index.cssr'
 import type { PopoverInjection } from './Popover'
+import { PopoverTrigger } from './interface'
 
 export const popoverBodyProps = {
   ...(useTheme.props as ThemeProps<PopoverTheme>),
-  show: {
-    type: Boolean,
-    default: undefined
-  },
-  trigger: {
-    type: String,
-    default: undefined
-  },
-  showArrow: {
-    type: Boolean,
-    default: undefined
-  },
-  delay: {
-    type: Number,
-    default: undefined
-  },
-  duration: {
-    type: Number,
-    default: undefined
-  },
-  raw: {
-    type: Boolean,
-    default: undefined
-  },
-  arrowStyle: {
-    type: Object,
-    default: undefined
-  },
-  displayDirective: {
-    type: String,
-    default: undefined
-  },
-  x: {
-    type: Number,
-    default: undefined
-  },
-  y: {
-    type: Number,
-    default: undefined
-  },
-  filp: {
-    type: Boolean,
-    default: undefined
-  },
-  placement: {
-    type: String as PropType<FollowerPlacement>,
-    default: undefined
-  },
+  show: Boolean,
+  trigger: String as PropType<PopoverTrigger>,
+  showArrow: Boolean,
+  delay: Number,
+  duration: Number,
+  raw: Boolean,
+  arrowStyle: [String, Object],
+  displayDirective: String as PropType<'if' | 'show'>,
+  x: Number,
+  y: Number,
+  filp: Boolean,
+  placement: String as PropType<FollowerPlacement>,
   // private
-  shadow: {
-    type: Boolean,
-    default: undefined
-  },
-  padded: {
-    type: Boolean,
-    default: undefined
-  },
-  animated: {
-    type: Boolean,
-    default: undefined
-  },
-  // deprecated
-  width: {
-    type: Number,
-    default: undefined
-  },
-  minWidth: {
-    type: Number,
-    default: undefined
-  },
-  maxWidth: {
-    type: Number,
-    default: undefined
-  }
+  shadow: Boolean,
+  padded: Boolean,
+  animated: Boolean,
+  /** @deprecated */
+  width: Number,
+  minWidth: Number,
+  maxWidth: Number
 }
 
 export default defineComponent({