refactor: remove all built in directives, use vdirs instead

package.json

@@ -90,9 +90,10 @@
     "highlight.js": "^9.18.1",
     "lodash-es": "^4.17.15",
     "treemate": "^0.1.11",
+    "vdirs": "^0.0.1",
     "vfonts": "^0.0.1",
     "vooks": "^0.0.1",
     "vue": "^3.0.2",
-    "vueuc": "^0.1.0-alpha.17"
+    "vueuc": "^0.1.0-alpha.19"
   }
 }

src/_directives/clickoutside.js

@@ -1,36 +0,0 @@
-import { warn } from '../_utils/naive'
-import { on, off } from 'evtd'
-
-const ctx = '@@coContext'
-
-const clickoutside = {
-  mounted (el, bindings) {
-    if (typeof bindings.value === 'function') {
-      el[ctx] = {
-        handler: bindings.value
-      }
-      on('clickoutside', el, el[ctx].handler)
-    }
-  },
-  updated (el, bindings) {
-    if (typeof bindings.value === 'function') {
-      if (el[ctx] && el[ctx].handler) {
-        if (el[ctx].handler !== bindings.value) {
-          off('clickoutside', el, el[ctx].handler)
-          el[ctx].handler = bindings.value
-          on('clickoutside', el, el[ctx].handler)
-        }
-      } else {
-        el[ctx].handler = bindings.value
-        on('clickoutside', el, el[ctx].handler)
-      }
-    } else if (__DEV__) {
-      warn('clickoutside', 'Binding value is not a function.')
-    }
-  },
-  unmounted (el) {
-    off('clickoutside', el, el[ctx].handler)
-  }
-}
-
-export default clickoutside

src/_directives/index.js

@@ -1,3 +0,0 @@
-export { default as clickoutside } from './clickoutside'
-export { default as mousemoveoutside } from './mousemoveoutside'
-export { default as zindexable } from './zindexable/index'

src/_directives/mousemoveoutside.js

@@ -1,50 +0,0 @@
-import { debug, warn } from '../_utils'
-import { on, off } from 'evtd'
-
-const ctx = '@@mmoContext'
-
-const mousemoveoutside = {
-  beforeMount (el, bindings) {
-    if (__DEV__) {
-      debug('mousemoveoutside', 'bind $el')
-    }
-    if (typeof bindings.value === 'function') {
-      el[ctx] = {
-        handler: bindings.value
-      }
-      on('mousemoveoutside', el, el[ctx].handler)
-    }
-  },
-  mounted () {
-    if (__DEV__) {
-      debug('mousemoveoutside', 'inserted')
-    }
-  },
-  updated (el, bindings) {
-    if (__DEV__) {
-      debug('mousemoveoutside', 'componentUpdated')
-    }
-    if (typeof bindings.value === 'function') {
-      if (el[ctx] && el[ctx].handler) {
-        if (el[ctx].handler !== bindings.value) {
-          off('mousemoveoutside', el, el[ctx].handler)
-          el[ctx].handler = bindings.value
-          on('mousemoveoutside', el, el[ctx].handler)
-        }
-      } else {
-        el[ctx].handler = bindings.value
-        on('mousemoveoutside', el, el[ctx].handler)
-      }
-    } else {
-      warn('mousemoveoutside', 'Binding value is not a function.')
-    }
-  },
-  unmounted (el) {
-    if (__DEV__) {
-      debug('mousemoveoutside', 'unbind')
-    }
-    off('mousemoveoutside', el, el[ctx].handler)
-  }
-}
-
-export default mousemoveoutside

src/_directives/zindexable/index.js

@@ -1,28 +0,0 @@
-import zIndexManager from './z-index-manager'
-
-const ctx = '@@ziContext'
-
-const zindexable = {
-  mounted (el, { value }) {
-    const { zIndex, enabled } = (value || {})
-    zIndexManager.registerElement(el, zIndex)
-    el[ctx] = {
-      enabled
-    }
-  },
-  updated (el, { value }) {
-    const { zIndex, enabled } = (value || {})
-    const cachedEnabled = el[ctx].enabled
-    if (enabled && cachedEnabled !== enabled) {
-      zIndexManager.setNewZIndex(el, zIndex)
-    }
-    el[ctx].enabled = enabled
-  },
-  unmounted (el) {
-    if (el[ctx].unmounted) return
-    el[ctx].unmounted = true
-    zIndexManager.unregisterElement(el)
-  }
-}
-
-export default zindexable

src/_directives/zindexable/z-index-manager.js

@@ -1,102 +0,0 @@
-import { warn, debug } from '../../_utils/naive'
-
-class ZIndexManager {
-  constructor () {
-    if (__DEV__) {
-      debug('z-index-manager', 'Ctor called.')
-    }
-    this.elementZIndex = new Map()
-    this.nextZIndex = 2000
-  }
-
-  get elementCount () {
-    return this.elementZIndex.size
-  }
-
-  registerElement (el, zIndex) {
-    if (__DEV__) {
-      debug('z-index-manager/register-element', 'Called.')
-    }
-    if (this.elementZIndex.has(el)) {
-      if (__DEV__) {
-        debug('z-index-manager/register-element', 'Do not register duplicate element.')
-      }
-    } else {
-      if (__DEV__) {
-        debug('z-index-manager/register-element', 'Successfully registered.')
-      }
-      el.style.zIndex = this.nextZIndex
-      if (zIndex !== undefined) {
-        el.style.zIndex = zIndex
-        this.elementZIndex.set(el, null)
-        return
-      }
-      this.elementZIndex.set(el, this.nextZIndex)
-      this.nextZIndex++
-    }
-    this.afterManipulation()
-  }
-
-  setNewZIndex (el, zIndex) {
-    if (__DEV__) {
-      debug('z-index-manager/set-new-z-index', 'Called.')
-    }
-    if (this.elementZIndex.has(el)) {
-      if (__DEV__) {
-        debug('z-index-manager/set-new-z-index', `Successfully set z-index ${this.nextZIndex}.`)
-      }
-      if (zIndex !== undefined) {
-        el.style.zIndex = zIndex
-        this.elementZIndex.set(el, null)
-        return
-      }
-      const currentZIndex = this.elementZIndex.get(el)
-      if (currentZIndex !== null && currentZIndex + 1 === this.nextZIndex) return
-      el.style.zIndex = this.nextZIndex
-      this.elementZIndex.set(el, this.nextZIndex)
-      this.nextZIndex++
-    } else {
-      if (__DEV__) {
-        debug('z-index-manager/set-new-z-index', 'Element not found, please register it first.')
-      }
-    }
-    this.afterManipulation()
-  }
-
-  unregisterElement (el) {
-    if (__DEV__) {
-      debug('z-index-manager/unregister-element', 'Called.')
-    }
-    if (this.elementZIndex.has(el)) {
-      if (__DEV__) {
-        debug('z-index-manager/unregister-element', 'Successfully deleted.')
-      }
-      this.elementZIndex.delete(el)
-    } else {
-      warn('z-index-manager/unregister-element', 'Element not found when unregistering.')
-    }
-    this.afterManipulation()
-  }
-
-  afterManipulation () {
-    if (!this.elementCount) {
-      this.nextZIndex = 2000
-    }
-    if (this.nextZIndex - this.elementCount > 2500) this.rearrangeZIndex()
-  }
-
-  rearrangeZIndex () {
-    const elementZIndexPair = Array.from(this.elementZIndex.entries())
-    elementZIndexPair.sort((pair1, pair2) => {
-      return pair1[1] - pair2[1]
-    })
-    this.nextZIndex = 2000
-    elementZIndexPair.forEach(pair => {
-      const el = pair[0]
-      const zIndex = this.nextZIndex++
-      if (zIndex !== el.style.zIndex) el.style.zIndex = zIndex
-    })
-  }
-}
-
-export default new ZIndexManager()

src/auto-complete/src/AutoComplete.vue

@@ -34,6 +34,7 @@
       :show="active"
       :to="adjustedTo"
       :container-class="namespace"
+      :z-index="zIndex"
       placement="bottom-start"
       width="target"
     >
@@ -45,10 +46,6 @@
           v-if="active"
           ref="menuRef"
           v-clickoutside="handleClickOutsideMenu"
-          v-zindexable="{
-            enabled: active,
-            zIndex
-          }"
           auto-pending
           class="n-auto-complete-menu"
           :theme="mergedTheme"
@@ -78,9 +75,8 @@ import {
   withCssr
 } from '../../_mixins'
 import {
-  clickoutside,
-  zindexable
-} from '../../_directives'
+  clickoutside
+} from 'vdirs'
 import { call, warn, useAdjustedTo } from '../../_utils'
 import { useIsMounted } from 'vooks'
 import {
@@ -100,8 +96,7 @@ export default {
     VFollower
   },
   directives: {
-    clickoutside,
-    zindexable
+    clickoutside
   },
   mixins: [
     configurable,

src/cascader/src/CascaderMenu.vue

@@ -6,7 +6,6 @@
     <div
       v-if="show"
       v-clickoutside="handleClickOutside"
-      v-zindexable="{ enabled: show }"
       class="n-cascader-menu"
       :class="{
         [`n-${theme}-theme`]: theme,
@@ -32,12 +31,11 @@
 </template>
 <script>
 import { ref } from 'vue'
+import {
+  clickoutside
+} from 'vdirs'
 import { NBaseMenuMask } from '../../_base'
 import NCascaderSubmenu from './CascaderSubmenu.vue'
-import {
-  zindexable,
-  clickoutside
-} from '../../_directives'
 
 export default {
   name: 'NCascaderMenu',
@@ -46,7 +44,6 @@ export default {
     NBaseMenuMask
   },
   directives: {
-    zindexable,
     clickoutside
   },
   inject: {

src/cascader/src/CascaderSelectMenu.vue

@@ -7,7 +7,6 @@
       v-if="show"
       ref="menuRef"
       v-clickoutside="handleClickOutside"
-      v-zindexable="{ enabled: show }"
       class="n-cascader-menu"
       auto-pending
       :theme="theme"
@@ -23,13 +22,12 @@
 
 <script>
 import { ref, inject, toRef } from 'vue'
+import {
+  clickoutside
+} from 'vdirs'
 import { createTreeMate } from 'treemate'
 import { NBaseSelectMenu } from '../../_base'
 import { createSelectOptions } from './utils'
-import {
-  zindexable,
-  clickoutside
-} from '../../_directives'
 
 export default {
   name: 'NCascaderSelectMenu',
@@ -37,7 +35,6 @@ export default {
     NBaseSelectMenu
   },
   directives: {
-    zindexable,
     clickoutside
   },
   props: {

src/date-picker/src/DatePicker.vue

@@ -87,7 +87,6 @@
           v-if="type === 'datetime' && active"
           ref="panelRef"
           v-clickoutside="handleClickOutside"
-          v-zindexable="{ enabled: active }"
           :value="value"
           :active="active"
           :actions="actions"
@@ -103,7 +102,6 @@
           v-else-if="type === 'date' && active"
           ref="panelRef"
           v-clickoutside="handleClickOutside"
-          v-zindexable="{ enabled: active }"
           :value="value"
           :active="active"
           :actions="actions"
@@ -118,7 +116,6 @@
           v-else-if="type === 'daterange' && active"
           ref="panelRef"
           v-clickoutside="handleClickOutside"
-          v-zindexable="{ enabled: active }"
           :value="value"
           :active="active"
           :actions="actions"
@@ -133,7 +130,6 @@
           v-else-if="type === 'datetimerange' && active"
           ref="panelRef"
           v-clickoutside="handleClickOutside"
-          v-zindexable="{ enabled: active }"
           :format="computedFormat"
           :value="value"
           :active="active"
@@ -159,6 +155,9 @@ import {
   VTarget,
   VFollower
 } from 'vueuc'
+import {
+  clickoutside
+} from 'vdirs'
 import {
   configurable,
   themeable,
@@ -166,10 +165,6 @@ import {
   withCssr,
   locale
 } from '../../_mixins'
-import {
-  clickoutside,
-  zindexable
-} from '../../_directives'
 import { warn, call, useAdjustedTo } from '../../_utils'
 import { useIsMounted } from 'vooks'
 
@@ -206,8 +201,7 @@ const DATE_FORMAT = {
 export default {
   name: 'DatePicker',
   directives: {
-    clickoutside,
-    zindexable
+    clickoutside
   },
   components: {
     VBinder,

src/drawer/src/Drawer.vue

@@ -42,7 +42,7 @@ import {
   themeable,
   withCssr
 } from '../../_mixins'
-import { zindexable } from '../../_directives'
+import { zindexable } from 'vdirs'
 import { warn, formatLength } from '../../_utils'
 import { useCompitable, useIsMounted } from 'vooks'
 import { NBaseLazyTeleport } from '../../_base'

src/modal/src/BodyWrapper.vue

@@ -79,13 +79,13 @@
 
 <script>
 import { nextTick, reactive, toRefs, toRef, watch, ref, inject } from 'vue'
+import { clickoutside } from 'vdirs'
+import { useCompitable } from 'vooks'
 import NScrollbar from '../../scrollbar'
 import NDialog from '../../dialog/src/Dialog.vue'
 import NCard from '../../card'
 import themeable from '../../_mixins/themeable'
 import presetProps from './presetProps'
-import clickoutside from '../../_directives/clickoutside'
-import { useCompitable } from 'vooks'
 
 export default {
   name: 'ModalBody',

src/modal/src/Modal.js

@@ -1,5 +1,5 @@
 import { h, withDirectives, Transition, ref, computed } from 'vue'
-import { zindexable } from '../../_directives'
+import { zindexable } from 'vdirs'
 import { configurable, themeable, withCssr } from '../../_mixins'
 import presetProps from './presetProps'
 import { useIsMounted, useClicked, useClickPosition } from 'vooks'

src/popover/src/PopoverBody.js

@@ -8,7 +8,7 @@ import {
 import {
   VFollower
 } from 'vueuc'
-import { clickoutside, mousemoveoutside, zindexable } from '../../_directives'
+import { clickoutside, mousemoveoutside } from 'vdirs'
 import { configurable, themeable, withCssr } from '../../_mixins'
 import styles from './styles'
 import { formatLength, useAdjustedTo } from '../../_utils'
@@ -133,11 +133,7 @@ export default {
     },
     directives () {
       const { trigger } = this
-      const directives = [
-        [zindexable, {
-          enabled: this.show
-        }]
-      ]
+      const directives = []
       if (trigger === 'click') directives.push([clickoutside, this.handleClickOutside])
       if (trigger === 'hover') directives.push([mousemoveoutside, this.handleMouseMoveOutside])
       if (this.useVShow) directives.push([vShow, this.show])

src/select/src/Select.vue

@@ -53,9 +53,6 @@
           v-if="mergedShow"
           ref="menuRef"
           v-clickoutside="handleMenuClickOutside"
-          v-zindexable="{
-            enabled: mergedShow
-          }"
           class="n-select-menu"
           auto-pending
           :theme="mergedTheme"
@@ -92,6 +89,9 @@ import {
   useMergedState,
   useCompitable
 } from 'vooks'
+import {
+  clickoutside
+} from 'vdirs'
 import {
   configurable,
   themeable,
@@ -99,10 +99,6 @@ import {
   locale,
   withCssr
 } from '../../_mixins'
-import {
-  clickoutside,
-  zindexable
-} from '../../_directives'
 import {
   warn, call, useAdjustedTo
 } from '../../_utils'
@@ -152,8 +148,7 @@ export default {
     VTarget
   },
   directives: {
-    clickoutside,
-    zindexable
+    clickoutside
   },
   mixins: [
     configurable,

src/slider/src/Slider.vue

@@ -112,7 +112,7 @@ import {
 } from '../../_mixins'
 import {
   zindexable
-} from '../../_directives'
+} from 'vdirs'
 import styles from './styles'
 import { warn } from '../../_utils/naive'
 import { call } from '../../_utils/vue'

src/time-picker/src/TimePicker.vue

@@ -48,7 +48,6 @@
         <panel
           v-if="active"
           ref="panelRef"
-          v-zindexable="{ enabled: active }"
           v-clickoutside="handleClickOutside"
           :theme="mergedTheme"
           :transition-disabled="transitionDisabled"
@@ -89,10 +88,10 @@ import {
   VTarget,
   VFollower
 } from 'vueuc'
+import { clickoutside } from 'vdirs'
 import NInput from '../../input'
 import NIcon from '../../icon'
 import { configurable, themeable, locale, withCssr, asFormItem } from '../../_mixins'
-import { zindexable, clickoutside } from '../../_directives'
 import {
   isValid,
   startOfSecond,
@@ -129,8 +128,7 @@ export default {
     TimeIcon
   },
   directives: {
-    clickoutside,
-    zindexable
+    clickoutside
   },
   mixins: [
     configurable,