@zkwq/business 0.0.1

package/src/components/base/ui/form/Form.vue

@@ -0,0 +1,167 @@
+<template>
+  <form class="base-form" :class="[
+    labelPosition ? 'base-form--label-' + labelPosition : '',
+    { 'base-form--inline': inline }
+  ]">
+    <slot></slot>
+  </form>
+</template>
+<script>
+import objectAssign from '../util/merge'
+export default {
+  name: 'BaseForm',
+  componentName: 'BaseForm',
+  provide () {
+    return {
+      baseForm: this
+    }
+  },
+  props: {
+    model: Object,
+    rules: Object,
+    labelPosition: String,
+    labelWidth: String,
+    labelSuffix: {
+      type: String,
+      default: ''
+    },
+    inline: Boolean,
+    inlineMessage: Boolean,
+    statusIcon: Boolean,
+    showMessage: {
+      type: Boolean,
+      default: true
+    },
+    size: String,
+    disabled: Boolean,
+    validateOnRuleChange: {
+      type: Boolean,
+      default: true
+    },
+    hideRequiredAsterisk: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    rules () {
+      this.fields.forEach(field => {
+        field.removeValidateEvents()
+        field.addValidateEvents()
+      })
+      if (this.validateOnRuleChange) {
+        this.validate(() => {})
+      }
+    }
+  },
+  computed: {
+    autoLabelWidth() {
+      if (!this.potentialLabelWidthArr.length) {
+        return 0
+      }
+      const max = Math.max(...this.potentialLabelWidthArr)
+      return max ? `${max}px` : ''
+    }
+  },
+  data () {
+    return {
+      fields: [],
+      potentialLabelWidthArr: []
+    }
+  },
+  created () {
+    this.$on('base.form.addField', (field) => {
+      if (field) {
+        this.fields.push(field)
+      }
+    })
+    this.$on('base.form.removeField', (field) => {
+      if (field.prop) {
+        this.fields.splice(this.fields.indexOf(field), 1)
+      }
+    })
+  },
+  methods: {
+    resetFields() {
+      if (!this.model) {
+        return
+      }
+      this.fields.forEach(field => {
+        field.resetField()
+      })
+    },
+    clearValidate(props = []) {
+      const fields = props.length
+        ? (typeof props === 'string'
+          ? this.fields.filter(field => props === field.prop)
+          : this.fields.filter(field => props.indexOf(field.prop) > -1)
+        ) : this.fields
+      fields.forEach(field => {
+        field.clearValidate()
+      })
+    },
+    validate(callback) {
+      if (!this.model) {
+        return
+      }
+      let promise
+      if (typeof callback !== 'function' && window.Promise) {
+        promise = new window.Promise((resolve, reject) => {
+          callback = function(valid) {
+            valid ? resolve(valid) : reject(valid)
+          }
+        })
+      }
+      let valid = true
+      let count = 0
+      if (this.fields.length === 0 && callback) {
+        callback(true)
+      }
+      let invalidFields = {}
+      this.fields.forEach(field => {
+        field.validate('', (message, field) => {
+          if (message) {
+            valid = false
+          }
+          invalidFields = objectAssign({}, invalidFields, field)
+          if (typeof callback === 'function' && ++count === this.fields.length) {
+            callback(valid, invalidFields)
+          }
+        })
+      })
+      if (promise) {
+        return promise
+      }
+    },
+    validateField(props, cb) {
+      props = [].concat(props)
+      const fields = this.fields.filter(field => props.indexOf(field.prop) !== -1)
+      if (!fields.length) {
+        return
+      }
+      fields.forEach(field => {
+        field.validate('', cb)
+      })
+    },
+    getLabelWidthIndex(width) {
+      const index = this.potentialLabelWidthArr.indexOf(width);
+      if (index === -1) {
+        throw -1
+      }
+      return index
+    },
+    registerLabelWidth(val, oldVal) {
+      if (val && oldVal) {
+        const index = this.getLabelWidthIndex(oldVal)
+        this.potentialLabelWidthArr.splice(index, 1, val)
+      } else if (val) {
+        this.potentialLabelWidthArr.push(val)
+      }
+    },
+    deregisterLabelWidth(val) {
+      const index = this.getLabelWidthIndex(val)
+      this.potentialLabelWidthArr.splice(index, 1)
+    }
+  }
+}
+</script>

package/src/components/base/ui/form/FormItem.vue

@@ -0,0 +1,334 @@
+<template>
+  <div class="base-form-item" :class="[{
+      'base-form-item--feedback': baseForm && baseForm.statusIcon,
+      'is-error': validateState === 'error',
+      'is-validating': validateState === 'validating',
+      'is-success': validateState === 'success',
+      'is-required': isRequired || required,
+      'is-no-asterisk': baseForm && baseForm.hideRequiredAsterisk
+    },
+    sizeClass ? 'base-form-item--' + sizeClass : ''
+  ]">
+    <label-wrap
+      :is-auto-width="labelStyle && labelStyle.width === 'auto'"
+      :update-all="form.labelWidth === 'auto'">
+      <label :for="labelFor" class="base-form-item__label" :style="labelStyle" v-if="label || $slots.label">
+        <slot name="label">{{label + form.labelSuffix}}</slot>
+      </label>
+    </label-wrap>
+    <div class="base-form-item__content" :style="contentStyle">
+      <slot></slot>
+      <transition name="fade-in-linear">
+        <slot
+          v-if="validateState === 'error' && showMessage && form.showMessage"
+          name="error"
+          :error="validateMessage">
+          <div
+            class="base-form-item__error"
+            :class="{
+              'base-form-item__error--inline': typeof inlineMessage === 'boolean'
+                ? inlineMessage
+                : (baseForm && baseForm.inlineMessage || false),
+              'is-required': isValueRequired
+            }"
+            @click="removeErrorMask"
+          >
+            {{validateMessage}}
+          </div>
+        </slot>
+      </transition>
+    </div>
+  </div>
+</template>
+<script>
+import AsyncValidator from 'async-validator'
+import emitter from '../mixin/emitter'
+import objectAssign from '../util/merge'
+import { noop, getPropByPath } from '../util'
+import LabelWrap from './LabelWrap'
+export default {
+  name: 'BaseFormItem',
+  componentName: 'BaseFormItem',
+  mixins: [emitter],
+  provide() {
+    return {
+      baseFormItem: this
+    }
+  },
+  inject: ['baseForm'],
+  props: {
+    label: String,
+    labelWidth: String,
+    prop: String,
+    required: {
+      type: Boolean,
+      default: undefined
+    },
+    rules: [Object, Array],
+    error: String,
+    validateStatus: String,
+    for: String,
+    inlineMessage: {
+      type: [String, Boolean],
+      default: ''
+    },
+    showMessage: {
+      type: Boolean,
+      default: true
+    },
+    size: String,
+    customItem: {
+      type: Boolean,
+      default: false
+    },
+  },
+  components: {
+    LabelWrap
+  },
+  watch: {
+    error: {
+      immediate: true,
+      handler(value) {
+        this.validateMessage = value
+        this.validateState = value ? 'error' : ''
+      }
+    },
+    validateStatus(value) {
+      this.validateState = value
+    }
+  },
+  computed: {
+    labelFor() {
+      return this.for || this.prop
+    },
+    labelStyle() {
+      const ret = {}
+      if (this.form.labelPosition === 'top') return ret
+      const labelWidth = this.labelWidth || this.form.labelWidth
+      if (labelWidth) {
+        ret.width = labelWidth
+      }
+      return ret
+    },
+    contentStyle() {
+      const ret = {}
+      const label = this.label
+      if (this.form.labelPosition === 'top' || this.form.inline) return ret
+      if (!label && !this.labelWidth && this.isNested) return ret
+      const labelWidth = this.labelWidth || this.form.labelWidth
+      if (labelWidth === 'auto') {
+        if (this.labelWidth === 'auto') {
+          ret.marginLeft = this.computedLabelWidth
+        } else if (this.form.labelWidth === 'auto') {
+          ret.marginLeft = this.baseForm.autoLabelWidth
+        }
+      } else {
+        ret.marginLeft = labelWidth
+      }
+      return ret
+    },
+    form() {
+      let parent = this.$parent
+      let parentName = parent.$options.componentName
+      while (parentName !== 'BaseForm') {
+        if (parentName === 'BaseFormItem') {
+          this.isNested = true;
+        }
+        parent = parent.$parent
+        parentName = parent.$options.componentName
+      }
+      return parent
+    },
+    fieldValue() {
+      const model = this.form.model
+      if (!model || !this.prop) { return }
+
+      let path = this.prop
+      if (path.indexOf(':') !== -1) {
+        path = path.replace(/:/, '.')
+      }
+      return getPropByPath(model, path, true).v
+    },
+    isRequired() {
+      let rules = this.getRules()
+      let isRequired = false
+      if (rules && rules.length) {
+        rules.every(rule => {
+          if (rule.required) {
+            isRequired = true
+            return false
+          }
+          return true
+        })
+      }
+      return isRequired
+    },
+    _formSize() {
+      return this.baseForm.size
+    },
+    baseFormItemSize() {
+      return this.size || this._formSize
+    },
+    sizeClass() {
+      return this.baseFormItemSize || (this.$ELEMENT || {}).size
+    },
+    isValueRequired() {
+      if (this.prop === 'mobile') {
+        return !this.fieldValue['number']
+      } else {
+        return !this.fieldValue || this.fieldValue.length === 0 || (this.fieldValue.length > 0 && !this.fieldValue[0])
+      }
+    }
+  },
+  data() {
+    return {
+      validateState: '',
+      validateMessage: '',
+      validateDisabled: false,
+      validator: {},
+      isNested: false,
+      computedLabelWidth: ''
+    }
+  },
+  methods: {
+    validate(trigger, callback = noop) {
+      this.validateDisabled = false
+      const rules = this.getFilteredRule(trigger)
+      if ((!rules || rules.length === 0) && this.required === undefined) {
+        callback()
+        return true
+      }
+
+      this.validateState = 'validating'
+
+      const descriptor = {}
+      if (rules && rules.length > 0) {
+        rules.forEach(rule => {
+          delete rule.trigger
+        })
+      }
+      descriptor[this.prop] = rules
+
+      const validator = new AsyncValidator(descriptor)
+      const model = {}
+
+      model[this.prop] = this.fieldValue
+      validator.validate(model, { firstFields: true }, (errors, invalidFields) => {
+        this.validateState = !errors ? 'success' : 'error'
+        this.validateMessage = errors ? errors[0].message : ''
+        if (this.customItem && !this.error) {
+          this.dispatch('MobileFormItem', 'is-error', !!errors)
+          this.dispatch('CaptchaFormItem', 'is-error', !!errors)
+          this.dispatch('MobileCodeFormItem', 'is-error', !!errors)
+        }
+        callback(this.validateMessage, invalidFields)
+        this.baseForm && this.baseForm.$emit('validate', this.prop, !errors, this.validateMessage || null)
+      })
+    },
+    clearValidate() {
+      this.validateState = ''
+      this.validateMessage = ''
+      this.validateDisabled = false
+    },
+    resetField() {
+      this.validateState = ''
+      this.validateMessage = ''
+
+      let model = this.form.model
+      let value = this.fieldValue
+      let path = this.prop
+      if (path.indexOf(':') !== -1) {
+        path = path.replace(/:/, '.')
+      }
+
+      let prop = getPropByPath(model, path, true)
+
+      this.validateDisabled = true
+      if (Array.isArray(value)) {
+        prop.o[prop.k] = [].concat(this.initialValue)
+      } else {
+        prop.o[prop.k] = this.initialValue
+      }
+      this.$nextTick(() => {
+        this.validateDisabled = false
+      });
+      this.broadcast('BaseTimeSelect', 'fieldReset', this.initialValue)
+    },
+    getRules() {
+      let formRules = this.form.rules
+      const selfRules = this.rules
+      const requiredRule = this.required !== undefined ? { required: !!this.required } : []
+
+      const prop = getPropByPath(formRules, this.prop || '')
+      formRules = formRules ? (prop.o[this.prop || ''] || prop.v) : []
+
+      return [].concat(selfRules || formRules || []).concat(requiredRule)
+    },
+    getFilteredRule(trigger) {
+      const rules = this.getRules()
+
+      return rules.filter(rule => {
+        if (!rule.trigger || trigger === '') return true
+        if (Array.isArray(rule.trigger)) {
+          return rule.trigger.indexOf(trigger) > -1
+        } else {
+          return rule.trigger === trigger
+        }
+      }).map(rule => objectAssign({}, rule))
+    },
+    onFieldBlur() {
+      this.validate('blur')
+    },
+    onFieldChange() {
+      if (this.validateDisabled) {
+        this.validateDisabled = false
+        return
+      }
+
+      this.validate('change')
+    },
+    updateComputedLabelWidth(width) {
+      this.computedLabelWidth = width ? `${width}px` : ''
+    },
+    addValidateEvents() {
+      const rules = this.getRules()
+
+      if (rules.length || this.required !== undefined) {
+        this.$on('clearMessage', this.clearValidate)
+        this.$on('base.form.blur', this.onFieldBlur)
+        this.$on('base.form.change', this.onFieldChange)
+      }
+    },
+    removeValidateEvents() {
+      this.$off()
+    },
+    removeErrorMask () {
+      this.clearValidate()
+      this.broadcast('BaseInput', 'clearError', '')
+    },
+    setErrorMsg(msg) {
+      this.validateState = !msg ? 'success' : 'error'
+      this.validateMessage = msg
+    }
+  },
+  mounted() {
+    if (this.prop) {
+      this.dispatch('BaseForm', 'base.form.addField', [this])
+      this.$on('clearValidate', this.clearValidate)
+
+      let initialValue = this.fieldValue
+      if (Array.isArray(initialValue)) {
+        initialValue = [].concat(initialValue)
+      }
+      Object.defineProperty(this, 'initialValue', {
+        value: initialValue
+      })
+
+      this.addValidateEvents()
+    }
+  },
+  beforeDestroy() {
+    this.dispatch('BaseForm', 'base.form.removeField', [this])
+  }
+}
+</script>

package/src/components/base/ui/form/LabelWrap.vue

@@ -0,0 +1,69 @@
+<script lang="jsx"  type="text/jsx">
+export default {
+  props: {
+    isAutoWidth: Boolean,
+    updateAll: Boolean
+  },
+  inject: ['baseForm', 'baseFormItem'],
+  render() {
+    const slots = this.$slots.default
+    if (!slots) return null
+    if (this.isAutoWidth) {
+      const autoLabelWidth = this.elForm.autoLabelWidth
+      const style = {}
+      if (autoLabelWidth && autoLabelWidth !== 'auto') {
+        const marginLeft = parseInt(autoLabelWidth, 10) - this.computedWidth
+        if (marginLeft) {
+          style.marginLeft = marginLeft + 'px'
+        }
+      }
+      return (<div class="base-form-item__label-wrap" style={style}>
+        { slots }
+      </div>)
+    } else {
+      return slots[0]
+    }
+  },
+  methods: {
+    getLabelWidth() {
+      if (this.$el && this.$el.firstElementChild) {
+        const computedWidth = window.getComputedStyle(this.$el.firstElementChild).width
+        return Math.ceil(parseFloat(computedWidth))
+      } else {
+        return 0
+      }
+    },
+    updateLabelWidth(action = 'update') {
+      if (this.$slots.default && this.isAutoWidth && this.$el.firstElementChild) {
+        if (action === 'update') {
+          this.computedWidth = this.getLabelWidth()
+        } else if (action === 'remove') {
+          this.baseForm.deregisterLabelWidth(this.computedWidth)
+        }
+      }
+    }
+  },
+  watch: {
+    computedWidth(val, oldVal) {
+      if (this.updateAll) {
+        this.elForm.registerLabelWidth(val, oldVal)
+        this.elFormItem.updateComputedLabelWidth(val)
+      }
+    }
+  },
+  data() {
+    return {
+      computedWidth: 0
+    }
+  },
+  mounted() {
+    this.updateLabelWidth('update')
+  },
+  updated() {
+    this.updateLabelWidth('update')
+  },
+  beforeDestroy() {
+    this.updateLabelWidth('remove')
+  }
+}
+</script>

package/src/components/base/ui/icon/icon.vue

@@ -0,0 +1,13 @@
+<template>
+  <i :class="'base-icon-' + name"></i>
+</template>
+
+<script>
+  export default {
+    name: 'BaseIcon',
+
+    props: {
+      name: String
+    }
+  };
+</script>