n20-common-lib 1.3.42 → 1.3.45

package/src/directives/VRuleKey/index.js

@@ -1,201 +1,201 @@
-const VD = '_v-rule-key_validate_'
-
-function getRules(rules, evType) {
-  if (rules) {
-    let _rules = []
-    if (Array.isArray(rules)) {
-      _rules = rules
-    } else if (typeof rules === 'object') {
-      _rules.push(rules)
-    }
-    if (evType === 'submit') {
-      return _rules
-    } else {
-      return _rules.filter((r) => r.trigger.includes(evType))
-    }
-  } else {
-    return []
-  }
-}
-
-function validateRoule(rule, value) {
-  return new Promise(function (resolve, reject) {
-    if (rule.required) {
-      if (
-        value === undefined ||
-        value === null ||
-        value === '' ||
-        (Array.isArray(value) && value.length === 0)
-      ) {
-        reject(rule.message)
-        return
-      }
-    }
-    if (rule.type === 'string') {
-      if (typeof value !== 'string') {
-        reject(rule.message)
-        return
-      }
-    }
-    if (rule.type === 'number') {
-      if (typeof value !== 'number') {
-        reject(rule.message)
-        return
-      }
-    }
-    if (rule.type === 'boolean') {
-      if (typeof value !== 'boolean') {
-        reject(rule.message)
-        return
-      }
-    }
-    if (rule.type === 'array') {
-      if (!(Array.isArray(value) && value.length > 0)) {
-        reject(rule.message)
-        return
-      }
-    }
-    if (rule.type === 'date') {
-      if (new Date(value).toString() === 'Invalid Date') {
-        reject(rule.message)
-        return
-      }
-    }
-    if (rule.min !== undefined || rule.max !== undefined) {
-      if (value === undefined || value === null) {
-        reject(rule.message)
-        return
-      } else {
-        let _v = value.toString()
-        if (_v.length < rule.min || _v.length > rule.max) {
-          reject(rule.message)
-          return
-        }
-      }
-    }
-    if (rule.regexp) {
-      if (new RegExp(rule.regexp).test(value)) {
-        reject(rule.message)
-        return
-      }
-    }
-    if (!rule.validator) {
-      resolve()
-      return
-    }
-    if (rule.validator) {
-      rule.validator(rule, value, (err) => {
-        if (err === undefined || err === false) {
-          resolve()
-          return
-        } else {
-          reject(err === true ? rule.message : err)
-        }
-      })
-    }
-  })
-}
-
-function showErr(el, err = '', rErr) {
-  el.classList.add('rule-key__is-error')
-
-  if (rErr) {
-    let msgEl = el.querySelector('.rule-key__error_msg')
-    if (!msgEl) {
-      let msgEl = document.createElement('div')
-      msgEl.classList.add('rule-key__error_msg')
-      msgEl.innerText = err.toString()
-      el.appendChild(msgEl)
-    } else if (msgEl) {
-      msgEl.innerText = err.toString()
-    }
-  }
-}
-function hideErr(el, rErr) {
-  el.classList.remove('rule-key__is-error')
-
-  if (rErr) {
-    let msgEl = el.querySelector('.rule-key__error_msg')
-    if (msgEl) {
-      el.removeChild(msgEl)
-    }
-  }
-}
-
-const directive = {}
-directive.install = (Vue) => {
-  Vue.directive('rule-key', {
-    bind(el, binding, node) {
-      let _this = node.child
-
-      let ruleForm = _this.$attrs['rule-form'] || _this.$attrs['ruleForm']
-      ruleForm && el.classList.add(ruleForm)
-
-      let rErr =
-        _this.$attrs['rule-error-hide'] || _this.$attrs['ruleErrorHide']
-      rErr = rErr !== 'true' && rErr !== true
-
-      el[VD] = (val, type) => {
-        let _val = _this[binding.value || 'value']
-        let _rules = getRules(_this.$attrs['rules'], type)
-        if (_rules.length > 0) {
-          return Promise.all(_rules.map((rule) => validateRoule(rule, _val)))
-            .then(() => {
-              hideErr(el, rErr)
-            })
-            .catch((err) => {
-              showErr(el, err, rErr)
-            })
-        } else {
-          return Promise.resolve()
-        }
-      }
-
-      _this.$on('change', () => {
-        setTimeout(() => el[VD](undefined, 'change'))
-      })
-      // el.addEventListener('change', () => {
-      //   el[VD](undefined, 'change')
-      // })
-
-      _this.$on('blur', () => {
-        setTimeout(() => el[VD](undefined, 'blur'))
-      })
-      // el.addEventListener('blur', () => {
-      //   el[VD](undefined, 'blur')
-      // })
-    }
-  })
-}
-
-function rulesValidateForm(query, fn) {
-  let nodeList = document.querySelectorAll('.' + query)
-  if (nodeList.length) {
-    let validateList = []
-    nodeList.forEach((el) => {
-      typeof el[VD] === 'function' &&
-        validateList.push(el[VD](undefined, 'submit'))
-    })
-    return Promise.all(validateList)
-      .then(() => {
-        fn && fn(true)
-      })
-      .catch(() => {
-        fn && fn(false)
-      })
-  } else {
-    fn && fn(true)
-    return Promise.resolve()
-  }
-}
-function rulesValidateFormClear(query) {
-  let nodeList = document.querySelectorAll('.' + query)
-  nodeList.forEach((el) => {
-    hideErr(el, true)
-  })
-}
-
-window.rulesValidateForm = rulesValidateForm
-window.rulesValidateFormClear = rulesValidateFormClear
-
-export default directive
+const VD = '_v-rule-key_validate_'
+
+function getRules(rules, evType) {
+  if (rules) {
+    let _rules = []
+    if (Array.isArray(rules)) {
+      _rules = rules
+    } else if (typeof rules === 'object') {
+      _rules.push(rules)
+    }
+    if (evType === 'submit') {
+      return _rules
+    } else {
+      return _rules.filter((r) => r.trigger.includes(evType))
+    }
+  } else {
+    return []
+  }
+}
+
+function validateRoule(rule, value) {
+  return new Promise(function (resolve, reject) {
+    if (rule.required) {
+      if (
+        value === undefined ||
+        value === null ||
+        value === '' ||
+        (Array.isArray(value) && value.length === 0)
+      ) {
+        reject(rule.message)
+        return
+      }
+    }
+    if (rule.type === 'string') {
+      if (typeof value !== 'string') {
+        reject(rule.message)
+        return
+      }
+    }
+    if (rule.type === 'number') {
+      if (typeof value !== 'number') {
+        reject(rule.message)
+        return
+      }
+    }
+    if (rule.type === 'boolean') {
+      if (typeof value !== 'boolean') {
+        reject(rule.message)
+        return
+      }
+    }
+    if (rule.type === 'array') {
+      if (!(Array.isArray(value) && value.length > 0)) {
+        reject(rule.message)
+        return
+      }
+    }
+    if (rule.type === 'date') {
+      if (new Date(value).toString() === 'Invalid Date') {
+        reject(rule.message)
+        return
+      }
+    }
+    if (rule.min !== undefined || rule.max !== undefined) {
+      if (value === undefined || value === null) {
+        reject(rule.message)
+        return
+      } else {
+        let _v = value.toString()
+        if (_v.length < rule.min || _v.length > rule.max) {
+          reject(rule.message)
+          return
+        }
+      }
+    }
+    if (rule.regexp) {
+      if (new RegExp(rule.regexp).test(value)) {
+        reject(rule.message)
+        return
+      }
+    }
+    if (!rule.validator) {
+      resolve()
+      return
+    }
+    if (rule.validator) {
+      rule.validator(rule, value, (err) => {
+        if (err === undefined || err === false) {
+          resolve()
+          return
+        } else {
+          reject(err === true ? rule.message : err)
+        }
+      })
+    }
+  })
+}
+
+function showErr(el, err = '', rErr) {
+  el.classList.add('rule-key__is-error')
+
+  if (rErr) {
+    let msgEl = el.querySelector('.rule-key__error_msg')
+    if (!msgEl) {
+      let msgEl = document.createElement('div')
+      msgEl.classList.add('rule-key__error_msg')
+      msgEl.innerText = err.toString()
+      el.appendChild(msgEl)
+    } else if (msgEl) {
+      msgEl.innerText = err.toString()
+    }
+  }
+}
+function hideErr(el, rErr) {
+  el.classList.remove('rule-key__is-error')
+
+  if (rErr) {
+    let msgEl = el.querySelector('.rule-key__error_msg')
+    if (msgEl) {
+      el.removeChild(msgEl)
+    }
+  }
+}
+
+const directive = {}
+directive.install = (Vue) => {
+  Vue.directive('rule-key', {
+    bind(el, binding, node) {
+      let _this = node.child
+
+      let ruleForm = _this.$attrs['rule-form'] || _this.$attrs['ruleForm']
+      ruleForm && el.classList.add(ruleForm)
+
+      let rErr =
+        _this.$attrs['rule-error-hide'] || _this.$attrs['ruleErrorHide']
+      rErr = rErr !== 'true' && rErr !== true
+
+      el[VD] = (val, type) => {
+        let _val = _this[binding.value || 'value']
+        let _rules = getRules(_this.$attrs['rules'], type)
+        if (_rules.length > 0) {
+          return Promise.all(_rules.map((rule) => validateRoule(rule, _val)))
+            .then(() => {
+              hideErr(el, rErr)
+            })
+            .catch((err) => {
+              showErr(el, err, rErr)
+            })
+        } else {
+          return Promise.resolve()
+        }
+      }
+
+      _this.$on('change', () => {
+        setTimeout(() => el[VD](undefined, 'change'))
+      })
+      // el.addEventListener('change', () => {
+      //   el[VD](undefined, 'change')
+      // })
+
+      _this.$on('blur', () => {
+        setTimeout(() => el[VD](undefined, 'blur'))
+      })
+      // el.addEventListener('blur', () => {
+      //   el[VD](undefined, 'blur')
+      // })
+    }
+  })
+}
+
+function rulesValidateForm(query, fn) {
+  let nodeList = document.querySelectorAll('.' + query)
+  if (nodeList.length) {
+    let validateList = []
+    nodeList.forEach((el) => {
+      typeof el[VD] === 'function' &&
+        validateList.push(el[VD](undefined, 'submit'))
+    })
+    return Promise.all(validateList)
+      .then(() => {
+        fn && fn(true)
+      })
+      .catch(() => {
+        fn && fn(false)
+      })
+  } else {
+    fn && fn(true)
+    return Promise.resolve()
+  }
+}
+function rulesValidateFormClear(query) {
+  let nodeList = document.querySelectorAll('.' + query)
+  nodeList.forEach((el) => {
+    hideErr(el, true)
+  })
+}
+
+window.rulesValidateForm = rulesValidateForm
+window.rulesValidateFormClear = rulesValidateFormClear
+
+export default directive

package/src/directives/VTitle/index.js

@@ -1,106 +1,109 @@
-import { Popover as elPopover } from 'element-ui'
-
-let timer = undefined
-const popClass = 'at-title-pop-' + Date.now()
-
-function tipShow(el, tip) {
-  if (el.$tooltipTitle) {
-    if (!el.$tooltipTitleOverflow || el.clientWidth < el.scrollWidth) {
-      document.querySelector('.' + popClass).innerText = el.$tooltipTitle
-
-      tip.$refs['title-pop'].referenceElm = el
-      tip.$refs['title-pop'].doDestroy()
-
-      tip.$nextTick(() => {
-        tip.visible = true
-        timer = setInterval(() => {
-          if (tip.visible && !el.scrollWidth) tipHide(el, tip)
-        }, 1000)
-      })
-    }
-  } else {
-    let _input = el.querySelector('.el-input__inner')
-    if (_input && _input.clientWidth < _input.scrollWidth) {
-      document.querySelector('.' + popClass).innerText = _input.value
-
-      tip.$refs['title-pop'].referenceElm = el
-      tip.$refs['title-pop'].doDestroy()
-
-      tip.$nextTick(() => {
-        tip.visible = true
-        timer = setInterval(() => {
-          if (tip.visible && !el.scrollWidth) tipHide(el, tip)
-        }, 1000)
-      })
-    }
-  }
-}
-
-function tipHide(el, tip) {
-  tip.visible = false
-  clearInterval(timer)
-}
-
-const TitleDirective = {}
-TitleDirective.install = (Vue) => {
-  if (Vue.prototype.$isServer) return
-  const tooltip = new Vue({
-    el: document.createElement('div'),
-    components: {
-      elPopover
-    },
-    data() {
-      return {
-        visible: false
-      }
-    },
-    render(_h) {
-      var _vm = this
-      return _h(
-        'el-popover',
-        {
-          ref: 'title-pop',
-          attrs: {
-            value: _vm.visible,
-            trigger: 'manual',
-            'popper-class': 'n20-title-pop',
-            placement: 'top'
-          },
-          on: {
-            input(v) {
-              _vm.visible = v
-            }
-          }
-        },
-        [_h('span', { staticClass: popClass })]
-      )
-    }
-  })
-  document.querySelector('body').appendChild(tooltip.$el)
-
-  Vue.directive('title', {
-    bind: function (el, binding, vnode) {
-      if (vnode.data && vnode.data.attrs) {
-        el.$tooltipTitleOverflow = vnode.data.attrs['show-overflow-tooltip']
-      }
-      el.$tooltipTitle = binding.value
-      el.$tooltipShow = () => tipShow(el, tooltip)
-      el.$tooltipHide = () => tipHide(el, tooltip)
-      el.addEventListener('mouseenter', el.$tooltipShow)
-      el.addEventListener('mouseleave', el.$tooltipHide)
-    },
-    update: function (el, binding) {
-      if (binding.value !== binding.oldValue) {
-        el.$tooltipTitle = binding.value
-      }
-    },
-    unbind: function (el, binding) {
-      el.$tooltipHide()
-      el.removeEventListener('mouseenter', el.$tooltipShow)
-      el.removeEventListener('mouseleave', el.$tooltipHide)
-      clearInterval(timer)
-    }
-  })
-}
-
-export default TitleDirective
+let tooltip = undefined
+const popClass = 'at-title-pop-' + Date.now()
+
+function tipInit(Vue) {
+  const el = document.createElement('div')
+  document.body.appendChild(el)
+
+  tooltip = new Vue({
+    data() {
+      return {
+        visible: false
+      }
+    },
+    render(_h) {
+      var _vm = this
+      return _h(
+        'el-popover',
+        {
+          ref: 'title-pop',
+          attrs: {
+            value: _vm.visible,
+            trigger: 'manual',
+            'popper-class': 'n20-title-pop',
+            placement: 'top'
+          },
+          on: {
+            input(v) {
+              _vm.visible = v
+            }
+          }
+        },
+        [_h('span', { staticClass: popClass })]
+      )
+    }
+  }).$mount(el)
+}
+
+export function tipShow(el, popC) {
+  let _C = undefined
+  if (popC) {
+    _C = popC
+  } else if (el.$tooltipTitle) {
+    if (!el.$tooltipTitleOverflow || el.clientWidth < el.scrollWidth) {
+      _C = el.$tooltipTitle
+    }
+  } else {
+    let _input = el.querySelector('.el-input__inner')
+    if (_input && _input.clientWidth < _input.scrollWidth) {
+      _C = _input.value
+    }
+  }
+
+  if (_C) {
+    let popEl = document.querySelector('.' + popClass)
+    if (_C.nodeName) {
+      popEl.innerText = ''
+      _C = _C.cloneNode(true)
+      popEl.appendChild(_C)
+    } else {
+      popEl.innerText = _C
+    }
+
+    if (tooltip.$refs['title-pop'].referenceElm !== el) {
+      tooltip.$refs['title-pop'].doDestroy()
+      tooltip.$refs['title-pop'].referenceElm = el
+    }
+
+    tooltip.visible = true
+  }
+}
+
+export function tipHide(el) {
+  if (tooltip.$refs['title-pop'].referenceElm === el) {
+    tooltip.visible = false
+  }
+}
+
+const TitleDirective = {}
+TitleDirective.install = (Vue) => {
+  if (Vue.prototype.$isServer) return
+  Vue.directive('title', {
+    bind: function (el, binding, vnode) {
+      tooltip || tipInit(Vue)
+
+      el.$tooltipTitleOverflow =
+        vnode.data.attrs && vnode.data.attrs['show-overflow-tooltip']
+      el.$tooltipTitle = binding.value
+
+      let vmethods = vnode.child ? vnode.child.$options : vnode.context.$options
+      vmethods.deactivated || (vmethods.deactivated = [])
+
+      vmethods.deactivated.push(tipHide.bind(null, el))
+      el.$tipShow = () => tipShow(el)
+      el.$tipHide = () => tipHide(el)
+      el.addEventListener('mouseenter', el.$tipShow)
+      el.addEventListener('mouseleave', el.$tipHide)
+    },
+    update: function (el, binding) {
+      el.$tooltipTitle = binding.value
+    },
+    unbind: function (el, binding) {
+      tipHide(el)
+      el.removeEventListener('mouseenter', el.$tipShow)
+      el.removeEventListener('mouseleave', el.$tipHide)
+    }
+  })
+}
+
+export default TitleDirective