chore: use composition from vooks

demo/Site.vue

@@ -12,7 +12,7 @@ import { inject, toRef } from 'vue'
 import SiteHeader from './SiteHeader.vue'
 import menuOptions from './menu-options'
 import { loadingBarApiRef } from './routes/router'
-import { useMemo } from '../src/_utils/composition'
+import { useMemo } from 'vooks'
 
 export default {
   name: 'Site',

src/_base/select-menu/src/SelectOption.js

@@ -1,5 +1,5 @@
 import { h, inject, toRef } from 'vue'
-import { useMemo } from '../../../_utils/composition'
+import { useMemo } from 'vooks'
 
 export default {
   name: 'NBaseSelectOption',

src/_utils/composition/index.js

@@ -1,6 +1,5 @@
 import {
   ref,
-  computed,
   watch,
   onMounted,
   inject,
@@ -10,58 +9,6 @@ import {
   nextTick
 } from 'vue'
 
-export function useFalseUntilTruthy (valueRef) {
-  const bindValueRef = ref(!!valueRef.value)
-  const stop = watch(valueRef, value => {
-    if (value) {
-      bindValueRef.value = true
-      stop()
-    }
-  })
-  return bindValueRef
-}
-
-export function useMergedState (
-  controlledStateRef,
-  uncontrolledStateRef
-) {
-  watch(controlledStateRef, value => {
-    if (value !== undefined) {
-      uncontrolledStateRef.value = value
-    }
-  })
-  return computed(() => {
-    if (controlledStateRef.value === undefined) {
-      return uncontrolledStateRef.value
-    }
-    return controlledStateRef.value
-  })
-}
-
-export function useCompitable (reactive, keys) {
-  return computed(() => {
-    for (const key of keys) {
-      if (reactive[key] !== undefined) return reactive[key]
-    }
-  })
-}
-
-export function useIsMounted () {
-  const isMounted = ref(false)
-  onMounted(() => {
-    isMounted.value = true
-  })
-  return isMounted
-}
-
-export function useNotMounted () {
-  const notMounted = ref(true)
-  onMounted(() => {
-    notMounted.value = false
-  })
-  return notMounted
-}
-
 export function useDisabledUntilMounted (durationTickCount = 0) {
   const disabled = ref(true)
   onMounted(() => {
@@ -78,15 +25,6 @@ export function useDisabledUntilMounted (durationTickCount = 0) {
   return disabled
 }
 
-export function useMemo (valueGenerator) {
-  const computedValueRef = computed(valueGenerator)
-  const valueRef = ref(computedValueRef.value)
-  watch(computedValueRef, value => {
-    valueRef.value = value
-  })
-  return valueRef
-}
-
 export function useInjectionRef (injectionName, key, fallback) {
   const injection = inject(injectionName)
   if (!injection && arguments.length > 2) return fallback

src/auto-complete/src/AutoComplete.vue

@@ -83,7 +83,7 @@ import {
   zindexable
 } from '../../_directives'
 import { call } from '../../_utils/vue'
-import { useIsMounted } from '../../_utils/composition'
+import { useIsMounted } from 'vooks'
 import { warn } from '../../_utils/naive'
 import NLazyTeleport from '../../_base/lazy-teleport'
 import NInput from '../../input'

src/back-top/src/BackTop.vue

@@ -52,6 +52,7 @@
 
 <script>
 import { ref, computed, toRef, watch, nextTick } from 'vue'
+import { useIsMounted, useMergedState } from 'vooks'
 import getScrollParent from '../../_utils/dom/getScrollParent'
 import {
   configurable,
@@ -63,7 +64,6 @@ import styles from './styles'
 import { warn } from '../../_utils/naive/warn'
 import getTarget from '../../_utils/dom/get-target'
 import NLazyTeleport from '../../_base/lazy-teleport'
-import { useIsMounted, useMergedState } from '../../_utils/composition'
 
 export default {
   name: 'BackTop',

src/checkbox/src/Checkbox.vue

@@ -61,7 +61,7 @@ import LineMark from './LineMark.vue'
 import NIconSwitchTransition from '../../_transition/IconSwitchTransition'
 import usecssr from '../../_mixins/usecssr'
 import styles from './styles'
-import { useMemo } from '../../_utils/composition'
+import { useMemo } from 'vooks'
 import { warn, call } from '../../_utils'
 
 export default {

src/date-picker/src/DatePicker.vue

@@ -161,7 +161,7 @@ import {
 } from '../../_directives'
 import { warn } from '../../_utils/naive'
 import { call } from '../../_utils/vue'
-import { useIsMounted } from '../../_utils/composition'
+import { useIsMounted } from 'vooks'
 
 import DatetimePanel from './panel/datetime.vue'
 import DatetimerangePanel from './panel/datetimerange.vue'
@@ -178,7 +178,7 @@ import {
   getTime,
   isValid
 } from 'date-fns'
-import { strictParse, getDerivedTimeFromKeyboardEvent } from '../../_utils/component/datePicker'
+import { strictParse, getDerivedTimeFromKeyboardEvent } from './utils'
 import { isEqual } from 'lodash-es'
 
 import styles from './styles'

src/date-picker/src/panel/datetimerange.vue

@@ -269,7 +269,7 @@ import {
   getDate,
   isValid
 } from 'date-fns'
-import { strictParse } from '../../../_utils/component/datePicker'
+import { strictParse } from '../utils'
 import { injectDualCalendarValidation } from '../validate-utils'
 
 const DATETIME_FORMAT = 'yyyy-MM-dd HH:mm:ss'

src/date-picker/src/panel/dualCalendarMixin.js

@@ -8,7 +8,7 @@ import {
   isValid
 } from 'date-fns'
 import { warn } from '../../../_utils/naive'
-import { dateArray } from '../../../_utils/component/datePicker'
+import { dateArray } from '../utils'
 import commonCalendarMixin from './commonCalendarMixin'
 
 export default {

src/date-picker/src/panel/uniCalendarMixin.js

@@ -10,7 +10,7 @@ import {
   getDate,
   isValid
 } from 'date-fns'
-import { dateArray, strictParse } from '../../../_utils/component/datePicker'
+import { dateArray, strictParse } from '../utils'
 import commonCalendarMixin from './commonCalendarMixin'
 
 export default {

src/date-picker/src/utils.js

@@ -10,7 +10,7 @@ import addDays from 'date-fns/addDays'
 import getDay from 'date-fns/getDay'
 import parse from 'date-fns/parse'
 import format from 'date-fns/format'
-import { KEY_CODE } from '../dom/key-code'
+import { KEY_CODE } from '../../_utils/dom/key-code'
 
 function getDerivedTimeFromKeyboardEvent (prevValue, event) {
   const now = getTime(Date.now())

src/descriptions/src/Descriptions.js

@@ -7,7 +7,7 @@ import {
 import styles from './styles'
 import { warn } from '../../_utils/naive/warn'
 import { getSlot, getVNodeChildren } from '../../_utils/vue'
-import { useCompitable } from '../../_utils/composition'
+import { useCompitable } from 'vooks'
 import { isDescriptionsItem } from './utils'
 
 export default {

src/drawer/src/Drawer.vue

@@ -45,7 +45,7 @@ import {
 import { zindexable } from '../../_directives'
 import formatLength from '../../_utils/css/formatLength'
 import { warn } from '../../_utils'
-import { useCompitable, useIsMounted } from '../../_utils/composition'
+import { useCompitable, useIsMounted } from 'vooks'
 import NLazyTeleport from '../../_base/lazy-teleport'
 import NDrawerBodyWrapper from './DrawerBodyWrapper.vue'
 import styles from './styles/index'

src/loading-bar/src/LoadingBarProvider.js

@@ -1,5 +1,5 @@
 import { Fragment, h, ref } from 'vue'
-import { useIsMounted } from '../../_utils/composition'
+import { useIsMounted } from 'vooks'
 import { Teleport } from '../../_base'
 import NLoadingBar from './LoadingBar.vue'
 

src/menu/src/Menu.js

@@ -1,9 +1,9 @@
 import { h, nextTick, ref, toRef, computed, onMounted } from 'vue'
+import { useCompitable, useMergedState } from 'vooks'
 import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
 import usecssr from '../../_mixins/usecssr'
 import styles from './styles/index'
-import { useCompitable, useMergedState } from '../../_utils/composition'
 import {
   getActivePath,
   getWrappedItems,

src/modal/src/Modal.js

@@ -2,7 +2,7 @@ import { h, withDirectives, Transition, ref } from 'vue'
 import { zindexable } from '../../_directives'
 import { configurable, themeable, usecssr } from '../../_mixins'
 import presetProps from './presetProps'
-import { useIsMounted } from '../../_utils/composition'
+import { useIsMounted } from 'vooks'
 import { warn } from '../../_utils/naive/warn'
 import { omit } from '../../_utils/vue'
 import NLazyTeleport from '../../_base/lazy-teleport'

src/pagination/src/Pagination.vue

@@ -104,7 +104,7 @@ import locale from '../../_mixins/locale'
 import { pageItems } from './utils'
 import usecssr from '../../_mixins/usecssr'
 import styles from './styles'
-import { useCompitable } from '../../_utils/composition'
+import { useCompitable } from 'vooks'
 
 export default {
   name: 'Pagination',

src/popover/src/Popover.js

@@ -10,7 +10,7 @@ import {
   useMergedState,
   useCompitable,
   useIsMounted
-} from '../../_utils/composition'
+} from 'vooks'
 import { omit } from '../../_utils/vue'
 import NLazyTeleport from '../../_base/lazy-teleport'
 import NPopoverBody from './PopoverBody'

src/radio/src/radio-setup.js

@@ -1,5 +1,5 @@
 import { inject } from 'vue'
-import { useMemo } from '../../_utils/composition'
+import { useMemo } from 'vooks'
 
 export default function setup (props) {
   const NRadioGroup = inject('NRadioGroup', null)

src/slider/src/Slider.vue

@@ -118,7 +118,7 @@ import {
 import styles from './styles'
 import { warn } from '../../_utils/naive'
 import { call } from '../../_utils/vue'
-import { useIsMounted } from '../../_utils/composition'
+import { useIsMounted } from 'vooks'
 import NLazyTeleport from '../../_base/lazy-teleport'
 
 function handleFirstHandleMouseMove (e) {

src/time-picker/src/TimePicker.vue

@@ -183,6 +183,7 @@
 
 <script>
 import { ref } from 'vue'
+import { useIsMounted } from 'vooks'
 import NLazyTeleport from '../../_base/lazy-teleport'
 import NScrollbar from '../../scrollbar'
 import NInput from '../../input'
@@ -202,12 +203,12 @@ import getTime from 'date-fns/getTime'
 import getMinutes from 'date-fns/getMinutes'
 import getHours from 'date-fns/getHours'
 import getSeconds from 'date-fns/getSeconds'
-import { strictParse } from '../../_utils/component/datePicker'
+import { strictParse } from '../../date-picker/src/utils'
 import keyboardDelegate from '../../_utils/delegate/keyboardDelegate'
 import NBaseFocusDetector from '../../_base/focus-detector'
 import TimeIcon from '../../_icons/time-outline.vue'
 import styles from './styles'
-import { warn, call, useIsMounted, KEY_CODE } from '../../_utils'
+import { warn, call, KEY_CODE } from '../../_utils'
 
 const DEFAULT_FORMAT = 'HH:mm:ss'
 

src/transfer/src/Transfer.vue

@@ -202,7 +202,7 @@ import {
 import styles from './styles'
 import { warn } from '../../_utils/naive'
 import { call } from '../../_utils/vue'
-import { useIsMounted } from '../../_utils/composition'
+import { useIsMounted } from 'vooks'
 import { data } from './data-utils'
 
 export default {

src/transfer/src/TransferSourceListItem.vue

@@ -26,7 +26,7 @@
 import { inject } from 'vue'
 import NSimpleCheckbox from '../../checkbox/src/SimpleCheckbox.vue'
 import createValidator from '../../_utils/vue/validateProp'
-import { useMemo } from '../../_utils/composition'
+import { useMemo } from 'vooks'
 
 export default {
   name: 'NTransferListItem',

src/transfer/src/TransferTargetListItem.vue

@@ -26,7 +26,7 @@
 import { inject } from 'vue'
 import NSimpleCheckbox from '../../checkbox/src/SimpleCheckbox.vue'
 import createValidator from '../../_utils/vue/validateProp'
-import { useMemo } from '../../_utils/composition'
+import { useMemo } from 'vooks'
 
 export default {
   name: 'NTransferListItem',