swordpass-ui 1.0.0

package/src/directive/badge.js

@@ -0,0 +1,53 @@
+import Vue from 'vue'
+
+const SUCCESS = '#72c140'
+const ERROR = '#ed5b56'
+const WARNING = '#f0af41'
+const INFO = '#4091f7'
+const HEIGHT = 20
+
+export default function(el, binding) {
+  const { modifiers, value } = binding
+  if (
+    value !== null &&
+    value !== undefined &&
+    value.constructor == Number &&
+    value <= 0
+  ) {
+    if (el.flag) {
+      el.removeChild(el.lastChild)
+      el.flag = false
+    }
+    return
+  }
+  const modifiersKey = Object.keys(modifiers)
+  let isDot = modifiersKey.includes('dot')
+  let backgroundColor = ''
+  if (modifiersKey.includes('success')) {
+    backgroundColor = SUCCESS
+  } else if (modifiersKey.includes('warning')) {
+    backgroundColor = WARNING
+  } else if (modifiersKey.includes('info')) {
+    backgroundColor = INFO
+  } else {
+    backgroundColor = ERROR
+  }
+
+  const targetTemplate = isDot
+    ? `<div style="border:1px solid #fff;position:absolute;top:-5px;right:-5px;height:10px;width:10px;border-radius:50%;background:${backgroundColor}"></div>`
+    : `<div style="border:1px solid #fff;background:${backgroundColor};position:absolute;top:-${HEIGHT /
+        2}px;right:-${HEIGHT /
+        2}px;height:${HEIGHT}px;min-width:${HEIGHT}px;border-radius:${HEIGHT /
+        2}px;text-align:center;line-height:${HEIGHT}px;color:#fff;padding:0 5px;">${value}</div>`
+
+  el.style.position = el.style.position || 'relative'
+  const badge = Vue.extend({
+    template: targetTemplate,
+  })
+  const component = new badge().$mount().$el
+  if (el.flag) {
+    el.removeChild(el.lastChild)
+  }
+  el.appendChild(component)
+  el.flag = true
+}

package/src/directive/copy.js

@@ -0,0 +1,47 @@
+import { Message } from 'element-ui'
+
+export default {
+  bind(el, binding) {
+    // 双击触发复制
+    if (binding.modifiers.dblclick) {
+      el.addEventListener('dblclick', () => handleClick(el.innerText))
+      el.style.cursor = 'copy'
+    }
+    // 点击icon触发复制
+    else if (binding.modifiers.icon) {
+      if (el.hasIcon) return
+      const iconElement = document.createElement('i')
+      iconElement.setAttribute('class', 'el-icon-document-copy')
+      iconElement.setAttribute('style', 'margin-left:5px')
+      el.appendChild(iconElement)
+      el.hasIcon = true
+      iconElement.addEventListener('click', () => handleClick(el.innerText))
+      iconElement.style.cursor = 'copy'
+    }
+    // 单击触发复制
+    else {
+      el.addEventListener('click', () => handleClick(el.innerText))
+      el.style.cursor = 'copy'
+    }
+  },
+}
+
+function handleClick(text) {
+  // 创建元素
+  if (!document.getElementById('copyTarget')) {
+    const copyTarget = document.createElement('input')
+    copyTarget.setAttribute(
+      'style',
+      'position:fixed;top:0;left:0;opacity:0;z-index:-1000;'
+    )
+    copyTarget.setAttribute('id', 'copyTarget')
+    document.body.appendChild(copyTarget)
+  }
+
+  // 复制内容
+  const input = document.getElementById('copyTarget')
+  input.value = text
+  input.select()
+  document.execCommand('copy')
+  Message({ message: '复制成功', type: 'success' })
+}

package/src/directive/ellipsis.js

@@ -0,0 +1,6 @@
+export default function(el, binding) {
+  binding.arg && (el.style.width = binding.arg + 'px')
+  el.style.whiteSpace = 'nowrap'
+  el.style.overflow = 'hidden'
+  el.style.textOverflow = 'ellipsis'
+}

package/src/directive/expandClick.js

@@ -0,0 +1,23 @@
+export default function(el, binding) {
+  const s = document.styleSheets[document.styleSheets.length - 1]
+  const DEFAULT = 10 // 默认向外扩展10px
+  const [top, right, bottom, left] =
+    (binding.expression && binding.expression.split(',')) || []
+  const ruleStr = `content:"";position:absolute;top:-${top ||
+    DEFAULT}px;bottom:-${bottom || DEFAULT}px;right:-${right ||
+    DEFAULT}px;left:-${left || DEFAULT}px;`
+  const classNameList = el.className.split(' ')
+  el.className = classNameList.includes('expand_click_range')
+    ? classNameList.join(' ')
+    : [...classNameList, 'expand_click_range'].join(' ')
+  el.style.position = el.style.position || 'relative'
+  if (s.insertRule) {
+    s.insertRule(
+      '.expand_click_range::before' + '{' + ruleStr + '}',
+      s.cssRules.length
+    )
+  } else {
+    /* IE */
+    s.addRule('.expand_click_range::before', ruleStr, -1)
+  }
+}

package/src/directive/express.js

@@ -0,0 +1,86 @@
+import utils from '@/utils.js'
+import FormMath from '@/math.js'
+
+// 判断输入框是否作为计算字段，是则添加监听
+export default {
+  componentUpdated: function(el, binding, vnode) {
+    const inst = vnode.context
+    if (!inst.$vnode.data.model) {
+      return
+    }
+    let elAttr = inst.$vnode.data.model.expression
+
+    if (
+      inst.$vnode &&
+      inst.$vnode.componentOptions &&
+      inst.$vnode.componentOptions.propsData &&
+      inst.$vnode.componentOptions.propsData.modelExpression
+    ) {
+      elAttr = inst.$vnode.componentOptions.propsData.modelExpression
+    }
+
+    if (elAttr && !inst._expressInit) {
+      inst._expressInit = true
+      // 子表每一行数据作用域所在的dom元素
+      let { subScopeEl, subname } = utils.getSubScopeElAndIndex(el)
+      let aliasElAttr = null
+      // 子表数据，需要找到配置了data-subname的元素
+      if (subScopeEl) {
+        if (!subname) {
+          throw '无法获取到当前子表前缀'
+        }
+        const elAttrAry = elAttr.split('.'),
+          elAttrArySize = elAttrAry.length
+        if (elAttrArySize < 1) {
+          throw `子表中的数据绑定表达式${elAttr}错误`
+        }
+        aliasElAttr = `${subname}.${elAttrAry[elAttrArySize - 1]}`
+      }
+      const p = utils.getOnlineFormInstance(inst)
+      if (
+        p.watchMap &&
+        (p.watchMap.has(elAttr) || p.watchMap.has(aliasElAttr))
+      ) {
+        if (!inst._watchers.some((m) => m.expression === 'inputVal')) {
+          inst.$watch(
+            'inputVal',
+            function(newVal, oldVal) {
+              if (newVal !== oldVal) {
+                const elAttrExpList = p.watchMap.get(elAttr) || []
+                const aliasElAttrExpList = p.watchMap.get(aliasElAttr) || []
+                const unionExpList = elAttrExpList.concat(aliasElAttrExpList)
+                const attrExpObj = {}
+                unionExpList.forEach((item) => {
+                  let result = 0
+                  const t = item.target
+                  const targetList = attrExpObj[t] || []
+                  if (targetList.indexOf(item.exp) < 0) {
+                    targetList.push(item.exp)
+                    attrExpObj[t] = targetList
+                    if (subScopeEl && t.split('.').length == 2) {
+                      const index = subScopeEl.dataset['index']
+                      if (index === undefined) {
+                        throw '获取不到当前子表行的索引，无法完成计算.'
+                      }
+                      result = FormMath.calcSubExpValue(
+                        item.exp,
+                        p,
+                        subname,
+                        index
+                      )
+                      p.$emit(t, { result, index })
+                    } else {
+                      result = FormMath.calcExpValue(item.exp, p)
+                      p.$emit(t, { result })
+                    }
+                  }
+                })
+              }
+            },
+            { immediate: true }
+          )
+        }
+      }
+    }
+  },
+}

package/src/directive/form.js

@@ -0,0 +1,122 @@
+// 广播事件发送到指定componentName的组件
+function broadcast(componentName, eventName, params) {
+  this.$children.forEach((child) => {
+    var name = child.$options.componentName
+
+    if (name === componentName) {
+      child.$emit.apply(child, [eventName].concat(params))
+    } else {
+      broadcast.apply(child, [componentName, eventName].concat([params]))
+    }
+  })
+}
+
+// 广播事件发送到指定componentGroup的组件
+function broadcastGroup(componentGroup, eventName, params) {
+  this.$children.forEach((child) => {
+    var name = child.$options.componentGroup
+
+    if (name === componentGroup) {
+      child.$emit.apply(child, [eventName].concat(params))
+    } else {
+      broadcastGroup.apply(child, [componentGroup, eventName].concat([params]))
+    }
+  })
+}
+
+function setFormExtend(el, binding) {
+  // 在注入的elForm对象上挂载表单扩展属性
+  const elFormInst = el.__vue__
+  if (elFormInst && binding.value) {
+    elFormInst.$nextTick(() => {
+      broadcast.apply(elFormInst, [
+        'ClFormItem',
+        'formExtend:update',
+        binding.value,
+      ])
+      broadcast.apply(elFormInst, [
+        'ClReadonlyInput',
+        'formExtend:update',
+        binding.value,
+      ])
+      broadcastGroup.apply(elFormInst, [
+        'ClFormInputs',
+        'formExtend:update',
+        binding.value,
+      ])
+    })
+  }
+}
+
+// 表单指令，会在表单的vue实例上添加一个map，用以存放数学运算的表达式
+export default {
+  bind: function(el, binding, vnode) {
+    // 修正vee-validate中对于元素上的aria-invalid属性更新的问题
+    const judgeAriaInvalid = (fields) => {
+      if (!fields || fields.length == 0) {
+        return
+      }
+
+      const fieldInst = fields.items[0]
+      const includes = function(collection, item) {
+        return collection.indexOf(item) !== -1
+      }
+      const isCheckboxOrRadioInput = function(el) {
+        return includes(['radio', 'checkbox'], el.type)
+      }
+      const isCallable = function(func) {
+        return typeof func === 'function'
+      }
+      Object.getPrototypeOf(
+        fieldInst
+      ).constructor.prototype.updateAriaAttrs = function updateAriaAttrs() {
+        var this$1 = this
+
+        if (!this.aria || !this.el || !isCallable(this.el.setAttribute)) {
+          return
+        }
+
+        var applyAriaAttrs = function(el) {
+          el.setAttribute('aria-required', this$1.isRequired ? 'true' : 'false')
+          el.setAttribute(
+            'aria-invalid',
+            this$1.flags.invalid ? 'true' : 'false'
+          )
+          // 组件初次加载时，既不显示验证失败也不显示验证成功
+          if (this$1.flags.invalid == null) {
+            el.removeAttribute('aria-invalid')
+          }
+        }
+
+        if (!isCheckboxOrRadioInput(this.el)) {
+          applyAriaAttrs(this.el)
+          return
+        }
+
+        var els = document.querySelectorAll(
+          'input[name="' + this.el.name + '"]'
+        )
+        window.toArray(els).forEach(applyAriaAttrs)
+      }
+    }
+
+    const inst = vnode.context
+
+    inst.$root.$validator && judgeAriaInvalid(inst.$root.$validator.fields)
+    if (inst && !inst.hasOwnProperty('watchMap')) {
+      inst['watchMap'] = new Map()
+      inst.$watch(
+        'data',
+        function() {
+          inst.$emit('updateData')
+        },
+        { deep: true }
+      )
+    }
+
+    setFormExtend(el, binding)
+  },
+  update: function(el, binding) {
+    setFormExtend(el, binding)
+  },
+}

package/src/directive/format.js

@@ -0,0 +1,24 @@
+export default function(el, binding) {
+  const { value, modifiers } = binding
+  if (!value) return
+  let formatValue = value
+  if (modifiers.toFixed) {
+    formatValue = value.toFixed(2)
+  }
+  if (modifiers.price) {
+    formatValue = formatNumber(formatValue)
+  }
+  el.innerText = formatValue
+}
+
+function formatNumber(num) {
+  num += ''
+  let strs = num.split('.')
+  let x1 = strs[0]
+  let x2 = strs.length > 1 ? '.' + strs[1] : ''
+  var rgx = /(\d+)(\d{3})/
+  while (rgx.test(x1)) {
+    x1 = x1.replace(rgx, '$1' + ',' + '$2')
+  }
+  return x1 + x2
+}