n20-common-lib 1.3.36 → 1.3.37

package/src/directives/VRuleKey/index.js

@@ -0,0 +1,194 @@
+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/index.js

@@ -67,6 +67,7 @@ import DialogO from './components/Dialog/indexO.vue'
 import VTitle from './directives/VTitle/index.js'
 import VDrag from './directives/VDrag/index.js'
 import VMove from './directives/VMove/index.js'
+import VRuleKey from './directives/VRuleKey/index.js'
 import VClickOutside from './directives/VClickOutside/index.js'
 import VHas from './directives/VHas/index.js'
 
@@ -165,6 +166,7 @@ const install = function (Vue, opts = { prefix: 'Cl', i18nConfig: {} }) {
   Vue.use(VTitle)
   Vue.use(VDrag)
   Vue.use(VMove)
+  Vue.use(VRuleKey)
   Vue.use(VClickOutside)
   Vue.use(VHas)