update Form

update Form

src/components/form/form-item.vue

@@ -1,13 +1,232 @@
 <template>
-
+    <div :class="classes">
+        <label :class="[prefixCls + '-label']" :style="labelStyles" v-if="label">{{ label }}</label>
+        <div :style="contentStyles">
+            <slot></slot>
+            <div transition="fade" :class="[prefixCls + '-error']" v-if="validateState === 'error'">{{ validateMessage }}</div>
+        </div>
+    </div>
 </template>
 <script>
+    // https://github.com/ElemeFE/element/blob/dev/packages/form/src/form-item.vue
+
+    import AsyncValidator from 'async-validator';
+
+    const prefixCls = 'ivu-form-item';
+
+    function getPropByPath(obj, path) {
+        let tempObj = obj;
+        path = path.replace(/\[(\w+)\]/g, '.$1');
+        path = path.replace(/^\./, '');
+
+        let keyArr = path.split('.');
+        let i = 0;
+
+        for (let len = keyArr.length; i < len - 1; ++i) {
+            let key = keyArr[i];
+            if (key in tempObj) {
+                tempObj = tempObj[key];
+            } else {
+                throw new Error('[iView warn]: please transfer a valid prop path to form item!');
+            }
+        }
+        return {
+            o: tempObj,
+            k: keyArr[i],
+            v: tempObj[keyArr[i]]
+        };
+    }
+
     export default {
-        props: {},
+        props: {
-        data () {
+            label: {
-            return {};
+                type: String,
+                default: ''
+            },
+            labelWidth: {
+                type: Number
+            },
+            prop: {
+                type: String
+            },
+            required: {
+                type: Boolean,
+                default: false
+            },
+            rules: {
+                type: [Object, Array]
+            },
+            error: {
+                type: Boolean
+            },
+            validateStatus: {
+                type: Boolean
+            }
         },
-        computed: {},
+        data () {
-        methods: {}
+            return {
+                prefixCls: prefixCls,
+                isRequired: false,
+                validateState: '',
+                validateMessage: '',
+                validateDisabled: false,
+                validator: {}
+            };
+        },
+        watch: {
+            error (val) {
+                this.validateMessage = val;
+                this.validateState = 'error';
+            },
+            validateStatus (val) {
+                this.validateState = val;
+            }
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-required`]: this.required || this.isRequired,
+                        [`${prefixCls}-error`]: this.validateState === 'error',
+                        [`${prefixCls}-validating`]: this.validateState === 'validating'
+                    }
+                ];
+            },
+            form() {
+                let parent = this.$parent;
+                while (parent.$options.name !== 'iForm') {
+                    parent = parent.$parent;
+                }
+                return parent;
+            },
+            fieldValue: {
+                cache: false,
+                get() {
+                    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).v;
+                }
+            },
+            labelStyles () {
+                let style = {};
+                const labelWidth = this.labelWidth || this.form.labelWidth;
+                if (labelWidth) {
+                    style.width = `${labelWidth}px`;
+                }
+                return style;
+            },
+            contentStyles () {
+                let style = {};
+                const labelWidth = this.labelWidth || this.form.labelWidth;
+                if (labelWidth) {
+                    style.marginLeft = `${labelWidth}px`;
+                }
+                return style;
+            }
+        },
+        methods: {
+            getRules () {
+                let formRules = this.form.rules;
+                const selfRules = this.rules;
+
+                formRules = formRules ? formRules[this.prop] : [];
+
+                return [].concat(selfRules || formRules || []);
+            },
+            getFilteredRule (trigger) {
+                const rules = this.getRules();
+
+                return rules.filter(rule => !rule.trigger || rule.trigger.indexOf(trigger) !== -1);
+            },
+            validate(trigger, callback = function () {}) {
+                const rules = this.getFilteredRule(trigger);
+                if (!rules || rules.length === 0) {
+                    callback();
+                    return true;
+                }
+
+                this.validateState = 'validating';
+
+                let descriptor = {};
+                descriptor[this.prop] = rules;
+
+                const validator = new AsyncValidator(descriptor);
+                let model = {};
+
+                model[this.prop] = this.fieldValue;
+
+                validator.validate(model, { firstFields: true }, (errors, fields) => {
+                    this.validateState = !errors ? 'success' : 'error';
+                    this.validateMessage = errors ? errors[0].message : '';
+
+                    callback(this.validateMessage);
+                });
+            },
+            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);
+
+                if (Array.isArray(value) && value.length > 0) {
+                    this.validateDisabled = true;
+                    prop.o[prop.k] = [];
+                } else if (value) {
+                    this.validateDisabled = true;
+                    prop.o[prop.k] = this.initialValue;
+                }
+            },
+            onFieldBlur() {
+                this.validate('blur');
+            },
+            onFieldChange() {
+                if (this.validateDisabled) {
+                    this.validateDisabled = false;
+                    return;
+                }
+
+                this.validate('change');
+            }
+        },
+        ready () {
+            if (this.prop) {
+                this.$dispatch('on-form-item-add', this);
+
+                Object.defineProperty(this, 'initialValue', {
+                    value: this.fieldValue
+                });
+
+                let rules = this.getRules();
+
+                if (rules.length) {
+                    rules.every(rule => {
+                        if (rule.required) {
+                            this.isRequired = true;
+                            return false;
+                        }
+                    });
+                    // todo
+//                    this.$on('el.form.blur', this.onFieldBlur);
+//                    this.$on('el.form.change', this.onFieldChange);
+                }
+            }
+        },
+        beforeDestroy () {
+            this.$dispatch('on-form-item-remove', this);
+        }
     };
 </script>

src/components/form/form.vue

@@ -1,13 +1,84 @@
 <template>
-
+    <form :class="classes"><slot></slot></form>
 </template>
 <script>
+    // https://github.com/ElemeFE/element/blob/dev/packages/form/src/form.vue
+
+    const prefixCls = 'ivu-form';
+
     export default {
-        props: {},
+        name: 'iForm',
-        data () {
+        props: {
-            return {};
+            model: {
+                type: Object
+            },
+            rules: {
+                type: Object
+            },
+            labelWidth: {
+                type: Number
+            },
+            inline: {
+                type: Boolean,
+                default: false
+            }
         },
-        computed: {},
+        data () {
-        methods: {}
+            return {
+                fields: []
+            };
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-inline`]: this.inline
+                    }
+                ];
+            }
+        },
+        methods: {
+            resetFields() {
+                this.fields.forEach(field => {
+                    field.resetField();
+                });
+            },
+            validate(callback) {
+                let valid = true;
+                let count = 0;
+                this.fields.forEach(field => {
+                    field.validate('', errors => {
+                        if (errors) {
+                            valid = false;
+                        }
+                        if (typeof callback === 'function' && ++count === this.fields.length) {
+                            callback(valid);
+                        }
+                    });
+                });
+            },
+            validateField(prop, cb) {
+                const field = this.fields.filter(field => field.prop === prop)[0];
+                if (!field) { throw new Error('[iView warn]: must call validateField with valid prop string!'); }
+
+                field.validate('', cb);
+            }
+        },
+        watch: {
+            rules() {
+                this.validate();
+            }
+        },
+        events: {
+            'on-form-item-add' (field) {
+                if (field) this.fields.push(field);
+                return false;
+            },
+            'on-form-item-remove' (field) {
+                if (field.prop) this.fields.splice(this.fields.indexOf(field), 1);
+                return false;
+            }
+        }
     };
 </script>

test/app.vue

@@ -46,6 +46,7 @@ li + li {
                 <li><a v-link="'/tabs'">Tabs</a></li>
                 <li><a v-link="'/menu'">Menu</a></li>
                 <li><a v-link="'/date'">Date</a></li>
+                <li><a v-link="'/form'">Form</a></li>
             </ul>
         </nav>
         <router-view></router-view>

test/main.js

@@ -127,7 +127,12 @@ router.map({
         component: function (resolve) {
             require(['./routers/date.vue'], resolve);
         }
-    }
+    },
+    '/form': {
+        component: function (resolve) {
+            require(['./routers/form.vue'], resolve);
+        }
+    },
 });
 
 router.beforeEach(function () {

test/routers/form.vue

@@ -0,0 +1,17 @@
+<template>
+    <div>
+        <i-form>
+
+        </i-form>
+    </div>
+</template>
+<script>
+    export default {
+        props: {},
+        data () {
+            return {}
+        },
+        computed: {},
+        methods: {}
+    };
+</script>