import Validator from './validator';

export default (Vue) => {
    Vue.directive('validate', {
        params: ['rules'],
        onChange() {
            this.vm.$validator.validate(this.fieldName, this.el.value);
        },
        attachValidator() {
            if (! this.vm.$validator) {
                this.vm.$validator = new Validator({
                    [this.fieldName]: this.params.rules
                });

                return;
            }

            this.vm.$validator.attach(this.fieldName, this.params.rules);
        },
        bind() {
            this.fieldName = this.el.name;
            this.attachValidator();
            this.onChangeRef = this.onChange.bind(this);
            this.el.addEventListener('change', this.onChangeRef);
        },
        unbind() {
            this.el.removeEventListener('change', this.onChangeRef);
        }
    });
};

@@ -57,16 +57,103 @@
 e) =%3E %7B%0A
+    Vue.mixin(%7B%0A        // TODO: Maybe add errors bindable field or property.%0A    %7D);%0A%0A
     Vue.

add placeholder