refactor: update deps & fix ts errors in 4.2.3

package.json

@@ -76,15 +76,15 @@
     "@vicons/fluent": "^0.7.0",
     "@vicons/ionicons4": "^0.7.0",
     "@vicons/ionicons5": "^0.7.0",
-    "@vitejs/plugin-vue": "^1.1.4",
-    "@vue/compiler-sfc": "^3.0.7",
+    "@vitejs/plugin-vue": "^1.2.0",
+    "@vue/compiler-sfc": "^3.0.9",
     "@vue/eslint-config-standard": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
-    "@vue/test-utils": "^2.0.0-rc.3",
+    "@vue/test-utils": "^2.0.0-rc.4",
     "autoprefixer": "^9.8.6",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
-    "cross-env": "^5.2.1",
+    "cross-env": "^7.0.3",
     "cssnano": "^4.1.10",
     "eslint": "^7.20.0",
     "eslint-config-standard": "^16.0.2",
@@ -100,25 +100,25 @@
     "jest": "^26.6.2",
     "lint-staged": "^10.5.3",
     "lodash": "^4.17.20",
-    "marked": "^2.0.0",
+    "marked": "^2.0.1",
     "prettier": "^2.2.1",
     "typescript": "^4.2.2",
-    "vite": "^2.0.3"
+    "vite": "^2.1.3"
   },
   "dependencies": {
-    "@css-render/plugin-bem": "^0.12.0",
-    "async-validator": "^3.4.0",
-    "css-render": "^0.12.0",
-    "date-fns": "^2.16.1",
+    "@css-render/plugin-bem": "^0.13.2",
+    "async-validator": "^3.5.1",
+    "css-render": "^0.13.2",
+    "date-fns": "^2.19.0",
     "evtd": "^0.1.1",
-    "highlight.js": "^10.4.1",
-    "lodash-es": "^4.17.15",
+    "highlight.js": "^10.7.1",
+    "lodash-es": "^4.17.21",
     "seemly": "^0.1.18",
     "treemate": "^0.2.4",
     "vdirs": "^0.1.0",
     "vfonts": "^0.1.0",
     "vooks": "^0.1.3",
-    "vue": "^3.0.7",
+    "vue": "^3.0.9",
     "vue-router": "^4.0.5",
     "vueuc": "^0.3.0"
   },

src/_internal/clear/src/Clear.tsx

@@ -12,10 +12,7 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    onClear: {
-      type: Function as PropType<((e: MouseEvent) => void) | undefined>,
-      default: undefined
-    }
+    onClear: Function as PropType<(e: MouseEvent) => void>
   },
   setup () {
     useStyle('BaseClear', style)

src/_internal/focus-detector/src/FocusDetector.tsx

@@ -2,14 +2,8 @@ import { h, defineComponent, PropType } from 'vue'
 
 export default defineComponent({
   props: {
-    onFocus: {
-      type: Function as PropType<((e: FocusEvent) => void) | undefined>,
-      default: undefined
-    },
-    onBlur: {
-      type: Function as PropType<((e: FocusEvent) => void) | undefined>,
-      default: undefined
-    }
+    onFocus: Function as PropType<(e: FocusEvent) => void>,
+    onBlur: Function as PropType<(e: FocusEvent) => void>
   },
   setup (props) {
     return () => (

src/_internal/selection/src/Selection.tsx

@@ -102,14 +102,8 @@ export default defineComponent({
     onDeleteOption: Function,
     onDeleteLastOption: Function,
     maxTagCount: [String, Number] as PropType<number | 'responsive'>,
-    onClear: {
-      type: Function as PropType<((e: MouseEvent) => void) | undefined>,
-      default: undefined
-    },
-    onPatternInput: {
-      type: Function as PropType<((e: InputEvent) => void) | undefined>,
-      default: undefined
-    }
+    onClear: Function as PropType<(e: MouseEvent) => void>,
+    onPatternInput: Function as PropType<(e: InputEvent) => void>
   },
   setup (props) {
     const patternInputMirrorRef = ref<HTMLElement | null>(null)

src/_internal/selection/src/Suffix.tsx

@@ -19,10 +19,7 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    onClear: {
-      type: Function as PropType<((e: MouseEvent) => void) | undefined>,
-      default: undefined
-    }
+    onClear: Function as PropType<(e: MouseEvent) => void>
   },
   setup (props) {
     return () => (

src/affix/src/Affix.tsx

@@ -42,7 +42,7 @@ export const affixProps = {
   },
   // deprecated
   target: {
-    type: Function as PropType<(() => HTMLElement) | undefined>,
+    type: (Function as unknown) as PropType<(() => HTMLElement) | undefined>,
     validator: () => {
       warn('affix', '`target` is deprecated, please use `listen-to` instead.')
       return true

src/anchor/src/BaseAnchor.tsx

@@ -56,7 +56,7 @@ export const baseAnchorProps = {
   },
   // deprecated
   target: {
-    type: Function as PropType<(() => HTMLElement) | undefined>,
+    type: (Function as unknown) as PropType<(() => HTMLElement) | undefined>,
     validator: () => {
       if (__DEV__) {
         warn('anchor', '`target` is deprecated, please use`listen-to` instead.')

src/back-top/src/BackTop.tsx

@@ -73,11 +73,25 @@ export default defineComponent({
       default: undefined
     },
     onShow: {
-      type: Function as PropType<(() => void) | undefined>,
+      type: (Function as unknown) as PropType<(() => void) | undefined>,
+      validator: () => {
+        warn(
+          'back-top',
+          '`on-show` is deprecated, please use `on-update:show` instead.'
+        )
+        return true
+      },
       default: undefined
     },
     onHide: {
-      type: Function as PropType<(() => void) | undefined>,
+      type: (Function as unknown) as PropType<(() => void) | undefined>,
+      validator: () => {
+        warn(
+          'back-top',
+          '`on-hide` is deprecated, please use `on-update:show` instead.'
+        )
+        return true
+      },
       default: undefined
     }
   },

src/card/src/Card.tsx

@@ -41,7 +41,7 @@ const cardProps = {
     default: false as boolean
   },
   hoverable: Boolean,
-  onClose: Function as PropType<MaybeArray<() => void>>
+  onClose: [Function, Array] as PropType<MaybeArray<() => void>>
 } as const
 
 export { cardProps }

src/collapse/src/Collapse.ts

@@ -58,17 +58,19 @@ export default defineComponent({
       type: String as PropType<'if' | 'show'>,
       default: 'if'
     },
-    onItemHeaderClick: Function as PropType<MaybeArray<OnItemHeaderClick>>,
+    onItemHeaderClick: [Function, Array] as PropType<
+    MaybeArray<OnItemHeaderClick>
+    >,
     // eslint-disable-next-line vue/prop-name-casing
-    'onUpdate:expandedNames': Function as PropType<
+    'onUpdate:expandedNames': [Function, Array] as PropType<
     MaybeArray<OnUpdateExpandedNames>
     >,
-    onUpdateExpandedNames: Function as PropType<
+    onUpdateExpandedNames: [Function, Array] as PropType<
     MaybeArray<OnUpdateExpandedNames>
     >,
     // deprecated
     onExpandedNamesChange: {
-      type: (Function as Function) as PropType<
+      type: [Function, Array] as PropType<
       MaybeArray<OnUpdateExpandedNames> | undefined
       >,
       validator: () => {

src/drawer/src/Drawer.tsx

@@ -59,7 +59,9 @@ export default defineComponent({
     },
     scrollbarProps: Object as PropType<ScrollbarProps>,
     // eslint-disable-next-line vue/prop-name-casing
-    'onUpdate:show': Function as PropType<MaybeArray<(value: boolean) => void>>,
+    'onUpdate:show': [Function, Array] as PropType<
+    MaybeArray<(value: boolean) => void>
+    >,
     // deprecated
     drawerStyle: {
       type: [Object, String] as PropType<CSSProperties | string | undefined>,
@@ -91,7 +93,7 @@ export default defineComponent({
       default: undefined
     },
     onShow: {
-      type: Function as PropType<
+      type: [Function, Array] as PropType<
       MaybeArray<(value: boolean) => void> | undefined
       >,
       validator: () => {
@@ -104,7 +106,7 @@ export default defineComponent({
       default: undefined
     },
     onHide: {
-      type: Function as PropType<
+      type: [Function, Array] as PropType<
       MaybeArray<(value: false) => void> | undefined
       >,
       validator: () => {

src/dynamic-input/src/DynamicInput.tsx

@@ -88,7 +88,9 @@ export default defineComponent({
       default: undefined
     },
     onInput: {
-      type: Function as PropType<MaybeArray<OnUpdateValue>>,
+      type: [Function, Array] as PropType<
+      MaybeArray<OnUpdateValue> | undefined
+      >,
       validator: () => {
         if (__DEV__) {
           warn(

src/layout/src/LayoutSider.tsx

@@ -74,13 +74,15 @@ const layoutSiderProps = {
   >,
   triggerStyle: Object as PropType<CSSProperties>,
   // eslint-disable-next-line vue/prop-name-casing
-  'onUpdate:collapsed': Function as PropType<
+  'onUpdate:collapsed': [Function, Array] as PropType<
+  MaybeArray<(value: boolean) => void>
+  >,
+  onUpdateCollapsed: [Function, Array] as PropType<
   MaybeArray<(value: boolean) => void>
   >,
-  onUpdateCollapsed: Function as PropType<MaybeArray<(value: boolean) => void>>,
   // deprecated
-  onExpand: Function as PropType<MaybeArray<() => void>>,
-  onCollapse: Function as PropType<MaybeArray<() => void>>
+  onExpand: [Function, Array] as PropType<MaybeArray<() => void>>,
+  onCollapse: [Function, Array] as PropType<MaybeArray<() => void>>
 } as const
 
 export type LayoutSiderProps = ExtractPropTypes<typeof layoutSiderProps>

src/modal/src/Modal.ts

@@ -98,7 +98,7 @@ export default defineComponent({
       default: undefined
     },
     onBeforeHide: {
-      type: Function as PropType<(() => void) | undefined>,
+      type: (Function as unknown) as PropType<(() => void) | undefined>,
       validator: () => {
         if (__DEV__) {
           warn(
@@ -111,7 +111,7 @@ export default defineComponent({
       default: undefined
     },
     onAfterHide: {
-      type: Function as PropType<(() => void) | undefined>,
+      type: (Function as unknown) as PropType<(() => void) | undefined>,
       validator: () => {
         if (__DEV__) {
           warn(
@@ -124,7 +124,9 @@ export default defineComponent({
       default: undefined
     },
     onHide: {
-      type: Function as PropType<((value: false) => void) | undefined>,
+      type: (Function as unknown) as PropType<
+      ((value: false) => void) | undefined
+      >,
       validator: () => {
         if (__DEV__) warn('modal', '`on-hide` is deprecated.')
         return true

src/pagination/src/Pagination.tsx

@@ -80,16 +80,18 @@ const paginationProps = {
     default: 9
   },
   // eslint-disable-next-line vue/prop-name-casing
-  'onUpdate:page': Function as PropType<MaybeArray<(page: number) => void>>,
+  'onUpdate:page': [Function, Array] as PropType<
+  MaybeArray<(page: number) => void>
+  >,
   // eslint-disable-next-line vue/prop-name-casing
-  'onUpdate:pageSize': Function as PropType<
+  'onUpdate:pageSize': [Function, Array] as PropType<
   MaybeArray<(pageSize: number) => void>
   >,
   // deprecated
-  onPageSizeChange: Function as PropType<
+  onPageSizeChange: [Function, Array] as PropType<
   MaybeArray<(pageSize: number) => void>
   >,
-  onChange: Function as PropType<MaybeArray<(page: number) => void>>,
+  onChange: [Function, Array] as PropType<MaybeArray<(page: number) => void>>,
   total: {
     type: Number,
     validator: (value: any) => {

src/popover/src/Popover.ts

@@ -137,15 +137,15 @@ export const popoverProps = {
   },
   // events
   // eslint-disable-next-line vue/prop-name-casing
-  'onUpdate:show': Function as PropType<
-  MaybeArray<(value: boolean) => void> | undefined
+  'onUpdate:show': [Function, Array] as PropType<
+  MaybeArray<(value: boolean) => void>
   >,
-  onUpdateShow: Function as PropType<
-  MaybeArray<(value: boolean) => void> | undefined
+  onUpdateShow: [Function, Array] as PropType<
+  MaybeArray<(value: boolean) => void>
   >,
   /** @deprecated */
   onShow: {
-    type: Function as PropType<
+    type: [Function, Array] as PropType<
     MaybeArray<(value: boolean) => void> | undefined
     >,
     validator: (): boolean => {
@@ -159,7 +159,7 @@ export const popoverProps = {
   },
   /** @deprecated */
   onHide: {
-    type: Function as PropType<
+    type: [Function, Array] as PropType<
     MaybeArray<(value: boolean) => void> | undefined
     >,
     validator: (): boolean => {

src/radio/src/RadioGroup.ts

@@ -117,7 +117,7 @@ export default defineComponent({
     onUpdateValue: Function as PropType<(value: string | number) => void>,
     // deprecated
     onChange: {
-      type: Function as PropType<
+      type: (Function as unknown) as PropType<
       ((value: string | number) => void) | undefined
       >,
       validator: () => {

src/scrollbar/src/ScrollBar.tsx

@@ -73,12 +73,8 @@ const scrollbarProps = {
     type: Boolean,
     default: false
   },
-  container: Function as PropType<
-  undefined | (() => HTMLElement | null | undefined)
-  >,
-  content: Function as PropType<
-  undefined | (() => HTMLElement | null | undefined)
-  >,
+  container: Function as PropType<() => HTMLElement | null | undefined>,
+  content: Function as PropType<() => HTMLElement | null | undefined>,
   containerStyle: [String, Object] as PropType<string | CSSProperties>,
   contentClass: String,
   contentStyle: [String, Object] as PropType<string | CSSProperties>,

src/slider/src/Slider.tsx

@@ -25,6 +25,7 @@ import type { ThemeProps } from '../../_mixins'
 import { warn, call, useAdjustedTo, MaybeArray } from '../../_utils'
 import { sliderLight, SliderTheme } from '../styles'
 import style from './styles/index.cssr'
+import { OnUpdateValueImpl } from './interface'
 
 export default defineComponent({
   name: 'Slider',
@@ -65,16 +66,16 @@ export default defineComponent({
       default: undefined
     },
     // eslint-disable-next-line vue/prop-name-casing
-    'onUpdate:value': Function as PropType<
-    MaybeArray<<T extends number | [number, number]>(value: T) => void>
+    'onUpdate:value': [Function, Array] as PropType<
+    MaybeArray<<T extends number & [number, number]>(value: T) => void>
     >,
-    onUpdateValue: Function as PropType<
-    MaybeArray<<T extends number | [number, number]>(value: T) => void>
+    onUpdateValue: [Function, Array] as PropType<
+    MaybeArray<<T extends number & [number, number]>(value: T) => void>
     >,
     // deprecated
     onChange: {
-      type: Function as PropType<
-      MaybeArray<<T extends number | [number, number]>(value: T) => void>
+      type: [Function, Array] as PropType<
+      MaybeArray<<T extends number & [number, number]>(value: T) => void>
       >,
       validator: () => {
         if (__DEV__) {
@@ -214,9 +215,9 @@ export default defineComponent({
         onUpdateValue
       } = props
       const { nTriggerFormInput, nTriggerFormChange } = formItem
-      if (onChange) call(onChange, value)
-      if (onUpdateValue) call(onUpdateValue, value)
-      if (_onUpdateValue) call(_onUpdateValue, value)
+      if (onChange) call(onChange as OnUpdateValueImpl, value)
+      if (onUpdateValue) call(onUpdateValue as OnUpdateValueImpl, value)
+      if (_onUpdateValue) call(_onUpdateValue as OnUpdateValueImpl, value)
       uncontrolledValueRef.value = value
       nTriggerFormInput()
       nTriggerFormChange()

src/slider/src/interface.ts

@@ -0,0 +1 @@
+export type OnUpdateValueImpl = (value: number | [number, number]) => void

src/slider/tests/Slider.spec.ts

@@ -5,4 +5,18 @@ describe('n-slider', () => {
   it('should work with import on demand', () => {
     mount(NSlider)
   })
+  it('accept correct callback types', () => {
+    function onUpdateValue1 (value: number): void {}
+    function onUpdateValue2 (value: [number, number]): void {}
+    mount(NSlider, {
+      props: {
+        onUpdateValue: onUpdateValue1
+      }
+    })
+    mount(NSlider, {
+      props: {
+        onUpdateValue: onUpdateValue2
+      }
+    })
+  })
 })

src/tabs/src/Tabs.tsx

@@ -24,6 +24,7 @@ import type { MaybeArray } from '../../_utils'
 import { tabsLight } from '../styles'
 import type { TabsTheme } from '../styles'
 import type { TabsInjection, TabPaneProps } from './TabPane'
+import type { OnUpdateValueImpl } from './interface'
 import style from './styles/index.cssr'
 
 export default defineComponent({
@@ -51,14 +52,17 @@ export default defineComponent({
       default: 'medium'
     },
     navStyle: [String, Object] as PropType<string | CSSProperties>,
-    onScrollableChange: Function as PropType<
+    onScrollableChange: [Function, Array] as PropType<
     MaybeArray<(value: boolean) => void>
     >,
     // eslint-disable-next-line vue/prop-name-casing
-    'onUpdate:value': Function as PropType<
-    MaybeArray<<T extends string | number>(value: T) => void>
+    'onUpdate:value': [Function, Array] as PropType<
+    MaybeArray<(value: string & number) => void>
     >,
-    onClose: Function as PropType<MaybeArray<() => void>>,
+    onUpdateValue: [Function, Array] as PropType<
+    MaybeArray<(value: string & number) => void>
+    >,
+    onClose: [Function, Array] as PropType<MaybeArray<() => void>>,
     // deprecated
     activeName: {
       type: [String, Number] as PropType<string | number | undefined>,
@@ -74,8 +78,8 @@ export default defineComponent({
       default: undefined
     },
     onActiveNameChange: {
-      type: Function as PropType<
-      MaybeArray<<T extends string | number>(value: T) => void>
+      type: [Function, Array] as PropType<
+      MaybeArray<(value: string & number) => void> | undefined
       >,
       validator: () => {
         if (__DEV__) {
@@ -104,10 +108,6 @@ export default defineComponent({
       uncontrolledValueRef
     )
 
-    const compitableOnValueChangeRef = useCompitable(props, [
-      'onActiveNameChange',
-      'onUpdate:value'
-    ])
     const labelWrapperStyleRef = computed(() => {
       if (!props.justifyContent) return undefined
       return {
@@ -162,12 +162,18 @@ export default defineComponent({
       disabled: boolean
     ): void {
       if (!disabled) {
-        setPanelActive(panelName)
+        doUpdateValue(panelName)
       }
     }
-    function setPanelActive (panelName: string | number): void {
-      const { value: compitableOnValueChange } = compitableOnValueChangeRef
-      if (compitableOnValueChange) call(compitableOnValueChange, panelName)
+    function doUpdateValue (panelName: string | number): void {
+      const {
+        onActiveNameChange,
+        onUpdateValue,
+        'onUpdate:value': _onUpdateValue
+      } = props
+      if (onActiveNameChange) { call(onActiveNameChange as OnUpdateValueImpl, panelName) }
+      if (onUpdateValue) call(onUpdateValue as OnUpdateValueImpl, panelName)
+      if (_onUpdateValue) call(_onUpdateValue as OnUpdateValueImpl, panelName)
     }
     function handleCloseClick (e: MouseEvent, panel: TabPaneProps): void {
       const { onClose } = props
@@ -199,7 +205,6 @@ export default defineComponent({
     })
     return {
       mergedValue: mergedValueRef,
-      compitableOnValueChange: compitableOnValueChangeRef,
       labelWrapperRef,
       labelBarRef,
       labelWrapperStyle: labelWrapperStyleRef,

src/tabs/src/interface.ts

@@ -0,0 +1 @@
+export type OnUpdateValueImpl = (value: string | number) => void

src/tabs/tests/Tabs.spec.ts

@@ -5,4 +5,24 @@ describe('n-tabs', () => {
   it('should work with import on demand', () => {
     mount(NTabs)
   })
+  it('should work with callback types', () => {
+    function onUpdateValue1 (name: number): void {}
+    function onUpdateValue2 (name: string): void {}
+    function onUpdateValue3 (name: number | string): void {}
+    mount(NTabs, {
+      props: {
+        onUpdateValue: onUpdateValue1
+      }
+    })
+    mount(NTabs, {
+      props: {
+        onUpdateValue: onUpdateValue2
+      }
+    })
+    mount(NTabs, {
+      props: {
+        onUpdateValue: onUpdateValue3
+      }
+    })
+  })
 })

src/time-picker/src/TimePicker.tsx

@@ -109,7 +109,9 @@ export default defineComponent({
     },
     // deprecated
     onChange: {
-      type: Function as PropType<MaybeArray<OnUpdateValue> | undefined>,
+      type: [Function, Array] as PropType<
+      MaybeArray<OnUpdateValue> | undefined
+      >,
       validator: () => {
         if (__DEV__) {
           warn(

vue3.md

@@ -456,6 +456,8 @@
   - [x] select menu loading
   - [ ] refactor layout to make position work on first shot
   - [ ] mention mention pending option not correct, sometimes it is not the first option
+  - [ ] code Deprecated as of 10.7.0. highlight(lang, code, ...args) has been deprecated.
+  - [ ] vdirs zindexable
 
 ## Build