@opentiny/vue-renderless 3.1.0-alpha.0

package/form/vue.js

@@ -0,0 +1,69 @@
+import { watchRules, computedAutoLabelWidth, created, resetFields, clearValidate, validate, validateField, getLabelWidthIndex, registerLabelWidth, deregisterLabelWidth, updateTip, bindDialogEvent } from './index';
+export var api = ['state', 'resetFields', 'clearValidate', 'validate', 'validateField', 'getLabelWidthIndex', 'registerLabelWidth', 'deregisterLabelWidth', 'updateTip'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    inject = _ref.inject,
+    provide = _ref.provide,
+    reactive = _ref.reactive,
+    watch = _ref.watch;
+  var parent = _ref2.parent;
+  var api = {};
+  var dialog = inject('dialog', null);
+  var state = reactive({
+    fields: [],
+    timer: null,
+    potentialLabelWidthArr: [],
+    autoLabelWidth: computed(function () {
+      return api.computedAutoLabelWidth();
+    })
+  });
+  Object.assign(api, {
+    state: state,
+    updateTip: updateTip({
+      props: props,
+      state: state
+    }),
+    computedAutoLabelWidth: computedAutoLabelWidth({
+      state: state
+    }),
+    created: created({
+      parent: parent,
+      state: state
+    }),
+    resetFields: resetFields({
+      props: props,
+      state: state
+    }),
+    clearValidate: clearValidate(state),
+    validate: validate({
+      props: props,
+      state: state
+    }),
+    validateField: validateField(state),
+    getLabelWidthIndex: getLabelWidthIndex(state),
+    registerLabelWidth: registerLabelWidth({
+      api: api,
+      state: state
+    }),
+    deregisterLabelWidth: deregisterLabelWidth({
+      api: api,
+      state: state
+    }),
+    watchRules: watchRules({
+      api: api,
+      props: props,
+      state: state
+    })
+  });
+  api.created();
+  provide('form', parent);
+  bindDialogEvent({
+    api: api,
+    dialog: dialog,
+    state: state
+  });
+  watch(function () {
+    return props.rules;
+  }, api.watchRules);
+  return api;
+};

package/form-item/index.js

@@ -0,0 +1,364 @@
+import { POSITION, VALIDATE_STATE } from '@opentiny/vue-renderless/common';
+import { merge } from '@opentiny/vue-renderless/common/object';
+import Validator from '@opentiny/vue-renderless/common/validate';
+import { isNull } from '@opentiny/vue-renderless/common/type';
+import debounce from '@opentiny/vue-renderless/common/deps/debounce';
+export var watchError = function watchError(state) {
+  return function (value) {
+    if (!isNull(value) && state.getValidateType === 'tip') {
+      state.canShowTip = true;
+    }
+    state.validateMessage = value;
+    state.validateState = value ? VALIDATE_STATE.Error : '';
+  };
+};
+export var watchValidateStatus = function watchValidateStatus(state) {
+  return function (value) {
+    state.validateState = value;
+  };
+};
+export var computedGetValidateType = function computedGetValidateType(_ref) {
+  var props = _ref.props,
+    state = _ref.state;
+  return function () {
+    return props.validateType || (state.formInstance ? state.formInstance.validateType : '');
+  };
+};
+export var computedLabelStyle = function computedLabelStyle(_ref2) {
+  var props = _ref2.props,
+    state = _ref2.state;
+  return function () {
+    var result = {};
+    if (state.form.labelPosition === POSITION.Top) return result;
+    var labelWidth = props.labelWidth || state.form.labelWidth;
+    if (labelWidth) {
+      result.width = labelWidth;
+    }
+    return result;
+  };
+};
+export var computedContentStyle = function computedContentStyle(_ref3) {
+  var props = _ref3.props,
+    state = _ref3.state;
+  return function () {
+    var result = {};
+    var label = props.label;
+    if (state.form.labelPosition === POSITION.Top || state.form.inline) return result;
+    if (!label && !props.labelWidth && state.isNested) return result;
+    var labelWidth = props.labelWidth || state.form.labelWidth;
+    if (labelWidth === 'auto') {
+      if (props.labelWidth === 'auto') {
+        result.marginLeft = state.computedLabelWidth;
+      } else if (state.form.labelWidth === 'auto') {
+        result.marginLeft = state.formInstance.state.autoLabelWidth;
+      }
+    } else {
+      result.marginLeft = labelWidth;
+    }
+    return result;
+  };
+};
+export var computedForm = function computedForm(_ref4) {
+  var constants = _ref4.constants,
+    instance = _ref4.instance,
+    state = _ref4.state;
+  return function () {
+    var FORM_NAME = constants.FORM_NAME,
+      FORM_ITEM_NAME = constants.FORM_ITEM_NAME;
+    var parent = instance.$parent;
+    var parentName = parent.$options.componentName;
+    while (parentName !== FORM_NAME) {
+      if (parentName === FORM_ITEM_NAME) {
+        state.isNested = true;
+      }
+      parent = parent.$parent;
+      parentName = parent.$options.componentName;
+    }
+    return parent;
+  };
+};
+export var computedIsRequired = function computedIsRequired(_ref5) {
+  var api = _ref5.api,
+    state = _ref5.state;
+  return function () {
+    if (state.validationRequired) {
+      return true;
+    }
+    var rules = api.getRules();
+    var isRequired = false;
+    if (rules && rules.length) {
+      rules.every(function (rule) {
+        if (rule.required) {
+          isRequired = true;
+          return false;
+        }
+        return true;
+      });
+    }
+    return isRequired;
+  };
+};
+export var getPropByPath = function getPropByPath(obj, path, strict) {
+  var findObj = obj;
+  path = path.replace(/\[(\w+)\]/g, '.$1');
+  path = path.replace(/^\./, '');
+  var index = 0;
+  var keys = path.split('.');
+  for (var len = keys.length; index < len - 1; ++index) {
+    if (!findObj && !strict) {
+      break;
+    }
+    var key = keys[index];
+    if (key in findObj) {
+      findObj = findObj[key];
+    } else {
+      if (strict) {
+        throw new Error('[Tiny Form] please transfer a valid prop path to form item!');
+      }
+      break;
+    }
+  }
+  return {
+    o: findObj,
+    k: keys[index],
+    v: findObj ? findObj[keys[index]] : null
+  };
+};
+export var computedFieldValue = function computedFieldValue(_ref6) {
+  var props = _ref6.props,
+    state = _ref6.state;
+  return function () {
+    var model = state.form.model;
+    if (!model || !props.prop) {
+      return;
+    }
+    var path = props.prop;
+    if (path.indexOf(':') !== -1) {
+      path = path.replace(/:/, '.');
+    }
+    return getPropByPath(model, path, true).v;
+  };
+};
+export var mounted = function mounted(_ref7) {
+  var api = _ref7.api,
+    instance = _ref7.instance,
+    props = _ref7.props,
+    state = _ref7.state,
+    refs = _ref7.refs;
+  return function () {
+    state.tooltip = refs.tooltip;
+    if (props.prop) {
+      api.dispatch('Form', 'form:addField', instance);
+      var initialValue = state.fieldValue;
+      if (Array.isArray(initialValue)) {
+        initialValue = [].concat(initialValue);
+      }
+      state.initialValue = initialValue;
+      api.addValidateEvents();
+    }
+  };
+};
+export var unmounted = function unmounted(_ref8) {
+  var api = _ref8.api,
+    instance = _ref8.instance,
+    state = _ref8.state;
+  return function () {
+    state.canShowTip = false;
+    api.dispatch('Form', 'form:removeField', instance);
+  };
+};
+export var validate = function validate(_ref9) {
+  var api = _ref9.api,
+    props = _ref9.props,
+    state = _ref9.state,
+    t = _ref9.t;
+  return function (trigger) {
+    var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
+      return undefined;
+    };
+    state.validateDisabled = false;
+    var rules = api.getFilteredRule(trigger);
+    if ((!rules || rules.length === 0) && props.required === undefined) {
+      callback();
+      return true;
+    }
+    state.validateState = VALIDATE_STATE.Validating;
+    var descriptor = {};
+    if (rules && rules.length > 0) {
+      rules.forEach(function (rule) {
+        delete rule.trigger;
+      });
+    }
+    descriptor[props.prop] = rules;
+    var validator = new Validator(descriptor, t);
+    var model = {};
+    model[props.prop] = state.fieldValue;
+    validator.validate(model, {
+      firstFields: true
+    }, function (errors, invalidFields) {
+      api.clearValidate();
+      var handlerError = function handlerError() {
+        state.validateState = !errors ? VALIDATE_STATE.Success : VALIDATE_STATE.Error;
+        state.validateMessage = errors ? errors[0].message : '';
+        state.canShowTip = !!errors;
+        callback(state.validateMessage, invalidFields);
+        state.formInstance && state.formInstance.$emit('validate', props.prop, !errors, state.validateMessage || null);
+      };
+      if (errors && state.stowed[0] === errors[0].field) {
+        handlerError();
+        return;
+      }
+      errors && (state.stowed[0] = errors[0].field);
+      handlerError();
+    });
+  };
+};
+export var clearValidate = function clearValidate(state) {
+  return function () {
+    state.validateState = '';
+    state.validateMessage = '';
+    state.validateDisabled = false;
+  };
+};
+export var resetField = function resetField(_ref10) {
+  var api = _ref10.api,
+    nextTick = _ref10.nextTick,
+    props = _ref10.props,
+    state = _ref10.state;
+  return function () {
+    if (state.getValidateType === 'tip') {
+      state.canShowTip = false;
+    }
+    state.validateState = '';
+    state.validateMessage = '';
+    var model = state.form.model;
+    var value = state.fieldValue;
+    var path = props.prop;
+    if (path.indexOf(':') !== -1) {
+      path = path.replace(/:/, '.');
+    }
+    var prop = getPropByPath(model, path, true);
+    state.validateDisabled = true;
+    if (Array.isArray(value)) {
+      prop.o[prop.k] = [].concat(state.initialValue);
+    } else {
+      prop.o[prop.k] = state.initialValue;
+    }
+    nextTick(function () {
+      state.validateDisabled = false;
+    });
+    setTimeout(function () {
+      return state.validateState && (state.validateState = '');
+    });
+    api.broadcast('timeSelect', 'fieldReset', state.initialValue);
+  };
+};
+export var getRules = function getRules(_ref11) {
+  var props = _ref11.props,
+    state = _ref11.state;
+  return function () {
+    var formRules = state.form.rules;
+    var selfRules = props.rules;
+    var requiredRule = props.required !== undefined ? {
+      required: !!props.required
+    } : [];
+    var prop = getPropByPath(formRules, props.prop || '');
+    formRules = formRules ? prop.o[props.prop || ''] || prop.v : [];
+    return [].concat(selfRules || formRules || []).concat(requiredRule);
+  };
+};
+export var getFilteredRule = function getFilteredRule(api) {
+  return function (trigger) {
+    var rules = api.getRules();
+    return rules.filter(function (rule) {
+      if (!rule.trigger || trigger === '') return true;
+      if (Array.isArray(rule.trigger)) {
+        return rule.trigger.indexOf(trigger) > -1;
+      }
+      return rule.trigger === trigger;
+    }).map(function (rule) {
+      return merge({}, rule);
+    });
+  };
+};
+export var onFieldBlur = function onFieldBlur(api) {
+  return function () {
+    api.validate('blur');
+  };
+};
+export var onFieldChange = function onFieldChange(_ref12) {
+  var api = _ref12.api,
+    state = _ref12.state;
+  return function () {
+    if (state.validateDisabled) {
+      state.validateDisabled = false;
+      return;
+    }
+    api.validate('change');
+  };
+};
+export var updateComputedLabelWidth = function updateComputedLabelWidth(state) {
+  return function (width) {
+    state.computedLabelWidth = width ? "".concat(width, "px") : '';
+  };
+};
+export var addValidateEvents = function addValidateEvents(_ref13) {
+  var api = _ref13.api,
+    instance = _ref13.instance,
+    props = _ref13.props,
+    state = _ref13.state;
+  return function () {
+    var rules = api.getRules();
+    if (rules.length || props.required !== undefined) {
+      var manual = props.manual || (state.formInstance ? state.formInstance.manual : false);
+      if (!manual) {
+        instance.$on('form.blur', api.onFieldBlur);
+        instance.$on('form.change', api.onFieldChange);
+      }
+    }
+  };
+};
+export var removeValidateEvents = function removeValidateEvents(instance) {
+  return function () {
+    instance.$off();
+  };
+};
+export var updateTip = function updateTip(_ref14) {
+  var refs = _ref14.refs,
+    state = _ref14.state;
+  return function () {
+    if (state.getValidateType !== 'tip' && !state.canShowTip) {
+      return;
+    }
+    var tooltip = refs.tooltip;
+    if (!tooltip) {
+      return;
+    }
+    tooltip.updatePopper();
+  };
+};
+export var getValueByPath = function getValueByPath(object, prop) {
+  prop = prop || '';
+  var paths = prop.split('.');
+  var current = object;
+  var result = null;
+  for (var i = 0, len = paths.length; i < len; i++) {
+    var path = paths[i];
+    if (!current) break;
+    if (i === len - 1) {
+      result = current[path];
+      break;
+    }
+    current = current[path];
+  }
+  return result;
+};
+export var wrapValidate = function wrapValidate(_ref15) {
+  var validateFunc = _ref15.validateFunc,
+    props = _ref15.props;
+  if (props.validateDebounce) {
+    return debounce(50, validateFunc);
+  } else {
+    return validateFunc;
+  }
+};

package/form-item/vue.js

@@ -0,0 +1,210 @@
+import { validate, clearValidate, resetField, getRules, getFilteredRule, onFieldBlur, onFieldChange, updateComputedLabelWidth, addValidateEvents, removeValidateEvents, mounted, unmounted, watchError, watchValidateStatus, computedLabelStyle, computedContentStyle, computedForm, computedIsRequired, computedFieldValue, computedGetValidateType, updateTip, wrapValidate } from './index';
+export var api = ['state', 'validate', 'clearValidate', 'resetField', 'getRules', 'getFilteredRule', 'onFieldBlur', 'onFieldChange', 'updateComputedLabelWidth', 'addValidateEvents', 'removeValidateEvents', 'updateTip'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    computed = _ref.computed,
+    api = _ref.api,
+    mode = _ref.mode,
+    inject = _ref.inject,
+    props = _ref.props;
+  var state = reactive({
+    mode: mode,
+    validateState: '',
+    validateMessage: '',
+    validateDisabled: false,
+    validator: {},
+    stowed: [],
+    isNested: false,
+    computedLabelWidth: '',
+    initialValue: null,
+    canShowTip: false,
+    validationRequired: false,
+    tooltip: null,
+    formInstance: inject('form', null),
+    labelFor: computed(function () {
+      return props["for"] || props.prop;
+    }),
+    labelStyle: computed(function () {
+      return api.computedLabelStyle();
+    }),
+    contentStyle: computed(function () {
+      return api.computedContentStyle();
+    }),
+    form: computed(function () {
+      return api.computedForm();
+    }),
+    fieldValue: computed(function () {
+      return api.computedFieldValue();
+    }),
+    isRequired: computed(function () {
+      return api.computedIsRequired();
+    }),
+    formSize: computed(function () {
+      return state.formInstance.size;
+    }),
+    formItemSize: computed(function () {
+      return props.size || state.formSize;
+    }),
+    sizeClass: computed(function () {
+      return state.formItemSize;
+    }),
+    getValidateType: computed(function () {
+      return api.computedGetValidateType();
+    })
+  });
+  return state;
+};
+var initApi = function initApi(_ref2) {
+  var api = _ref2.api,
+    state = _ref2.state,
+    dispatch = _ref2.dispatch,
+    broadcast = _ref2.broadcast,
+    refs = _ref2.refs,
+    props = _ref2.props,
+    constants = _ref2.constants,
+    instance = _ref2.instance,
+    t = _ref2.t,
+    nextTick = _ref2.nextTick;
+  Object.assign(api, {
+    state: state,
+    dispatch: dispatch,
+    broadcast: broadcast,
+    watchError: watchError(state),
+    updateTip: updateTip({
+      refs: refs,
+      state: state
+    }),
+    watchValidateStatus: watchValidateStatus(state),
+    computedLabelStyle: computedLabelStyle({
+      props: props,
+      state: state
+    }),
+    computedContentStyle: computedContentStyle({
+      props: props,
+      state: state
+    }),
+    computedForm: computedForm({
+      constants: constants,
+      instance: instance,
+      state: state
+    }),
+    computedFieldValue: computedFieldValue({
+      props: props,
+      state: state
+    }),
+    computedGetValidateType: computedGetValidateType({
+      props: props,
+      state: state
+    }),
+    clearValidate: clearValidate(state),
+    getRules: getRules({
+      props: props,
+      state: state
+    }),
+    updateComputedLabelWidth: updateComputedLabelWidth(state),
+    removeValidateEvents: removeValidateEvents(instance),
+    unmounted: unmounted({
+      api: api,
+      instance: instance,
+      state: state
+    }),
+    mounted: mounted({
+      api: api,
+      instance: instance,
+      props: props,
+      state: state,
+      refs: refs
+    }),
+    computedIsRequired: computedIsRequired({
+      api: api,
+      state: state
+    }),
+    resetField: resetField({
+      api: api,
+      nextTick: nextTick,
+      props: props,
+      state: state
+    }),
+    getFilteredRule: getFilteredRule(api),
+    onFieldBlur: onFieldBlur(api),
+    onFieldChange: onFieldChange({
+      api: api,
+      state: state
+    }),
+    addValidateEvents: addValidateEvents({
+      api: api,
+      instance: instance,
+      props: props,
+      state: state
+    }),
+    validate: wrapValidate({
+      validateFunc: validate({
+        api: api,
+        props: props,
+        state: state,
+        t: t
+      }),
+      props: props
+    })
+  });
+};
+var initWatch = function initWatch(_ref3) {
+  var watch = _ref3.watch,
+    api = _ref3.api,
+    props = _ref3.props;
+  watch(function () {
+    return props.error;
+  }, api.watchError, {
+    immediate: true
+  });
+  watch(function () {
+    return props.validateStatus;
+  }, api.watchValidateStatus);
+};
+export var renderless = function renderless(props, _ref4, _ref5) {
+  var computed = _ref4.computed,
+    inject = _ref4.inject,
+    onMounted = _ref4.onMounted,
+    onUnmounted = _ref4.onUnmounted,
+    provide = _ref4.provide,
+    reactive = _ref4.reactive,
+    watch = _ref4.watch;
+  var instance = _ref5.vm,
+    constants = _ref5.constants,
+    t = _ref5.t,
+    nextTick = _ref5.nextTick,
+    refs = _ref5.refs,
+    broadcast = _ref5.broadcast,
+    dispatch = _ref5.dispatch,
+    mode = _ref5.mode;
+  var api = {};
+  var state = initState({
+    reactive: reactive,
+    computed: computed,
+    api: api,
+    mode: mode,
+    inject: inject,
+    props: props
+  });
+  provide('formItem', instance);
+  initApi({
+    api: api,
+    state: state,
+    dispatch: dispatch,
+    broadcast: broadcast,
+    refs: refs,
+    props: props,
+    constants: constants,
+    instance: instance,
+    t: t,
+    nextTick: nextTick
+  });
+  initWatch({
+    watch: watch,
+    api: api,
+    props: props
+  });
+  onMounted(api.mounted);
+  onUnmounted(api.unmounted);
+  return api;
+};