@opentiny/vue-renderless 3.1.0-alpha.0

package/progress/vue.js

@@ -0,0 +1,118 @@
+import { computedBarStyle, computedRelativeStrokeWidth, computedRadius, computedTrackPath, computedPerimeter, computedRate, computedStrokeDashoffset, computedTrailPathStyle, computedCirclePathStyle, computedStroke, computedIconClass, computedProgressTextSize, computedContent, getCurrentColor, getLevelColor, getColorArray, customBeforeAppearHook, customAppearHook, customAfterAppearHook } from './index';
+export var api = ['state', 'getCurrentColor', 'getLevelColor', 'getColorArray', 'customBeforeAppearHook', 'customAppearHook', 'customAfterAppearHook'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    reactive = _ref.reactive;
+  var constants = _ref2.constants;
+  var api = {};
+  var state = reactive({
+    rate: computed(function () {
+      return api.computedRate();
+    }),
+    radius: computed(function () {
+      return api.computedRadius();
+    }),
+    stroke: computed(function () {
+      return api.computedStroke();
+    }),
+    content: computed(function () {
+      return api.computedContent();
+    }),
+    barStyle: computed(function () {
+      return api.computedBarStyle();
+    }),
+    trackPath: computed(function () {
+      return api.computedTrackPath();
+    }),
+    perimeter: computed(function () {
+      return api.computedPerimeter();
+    }),
+    iconClass: computed(function () {
+      return api.computedIconClass();
+    }),
+    trailPathStyle: computed(function () {
+      return api.computedTrailPathStyle();
+    }),
+    circlePathStyle: computed(function () {
+      return api.computedCirclePathStyle();
+    }),
+    progressTextSize: computed(function () {
+      return api.computedProgressTextSize();
+    }),
+    strokeDashoffset: computed(function () {
+      return api.computedStrokeDashoffset();
+    }),
+    relativeStrokeWidth: computed(function () {
+      return api.computedRelativeStrokeWidth();
+    })
+  });
+  Object.assign(api, {
+    state: state,
+    customAppearHook: customAppearHook,
+    computedContent: computedContent({
+      props: props
+    }),
+    getColorArray: getColorArray(props),
+    computedRate: computedRate({
+      constants: constants,
+      props: props
+    }),
+    computedPerimeter: computedPerimeter({
+      state: state
+    }),
+    computedRadius: computedRadius({
+      constants: constants,
+      props: props,
+      state: state
+    }),
+    computedTrackPath: computedTrackPath({
+      constants: constants,
+      props: props,
+      state: state
+    }),
+    computedIconClass: computedIconClass({
+      constants: constants,
+      props: props
+    }),
+    computedCirclePathStyle: computedCirclePathStyle({
+      props: props,
+      state: state
+    }),
+    computedStrokeDashoffset: computedStrokeDashoffset({
+      state: state
+    }),
+    computedTrailPathStyle: computedTrailPathStyle({
+      state: state
+    }),
+    computedRelativeStrokeWidth: computedRelativeStrokeWidth({
+      props: props
+    }),
+    computedProgressTextSize: computedProgressTextSize({
+      constants: constants,
+      props: props
+    }),
+    customAfterAppearHook: customAfterAppearHook({
+      state: state,
+      props: props
+    }),
+    customBeforeAppearHook: customBeforeAppearHook({
+      props: props,
+      state: state
+    }),
+    getLevelColor: getLevelColor(api),
+    computedBarStyle: computedBarStyle({
+      api: api,
+      props: props
+    }),
+    getCurrentColor: getCurrentColor({
+      api: api,
+      props: props
+    }),
+    computedStroke: computedStroke({
+      api: api,
+      constants: constants,
+      props: props
+    })
+  });
+  return api;
+};

package/pull-refresh/index.js

@@ -0,0 +1,104 @@
+import { on, off } from '@opentiny/vue-renderless/common/deps/dom';
+export var onTouchstart = function onTouchstart(_ref) {
+  var state = _ref.state;
+  return function (event) {
+    state.draggposition = event.touches[0].clientY;
+  };
+};
+export var onTouchmove = function onTouchmove(_ref2) {
+  var refs = _ref2.refs,
+    state = _ref2.state;
+  return function (event) {
+    if (!state.disabled) {
+      if (event.touches[0].clientY < state.draggposition || refs.track.parentNode.scrollTop > 10) {
+        return;
+      }
+      state.replaces = state.pullingText;
+      state.animationDuration = 0;
+      state.translate3d = (event.touches[0].clientY - state.draggposition) / 2;
+      state.styleObj = {
+        'transition-duration': '0ms',
+        transform: 'translate3d(0px,' + state.translate3d + 'px,0px)'
+      };
+      state.checkStatus = false;
+      if (state.translate3d > state.headHeight) {
+        state.replaces = state.loosingText;
+      } else {
+        state.replaces = state.pullingText;
+      }
+    }
+  };
+};
+export var onTouchend = function onTouchend(_ref3) {
+  var emit = _ref3.emit,
+    props = _ref3.props,
+    state = _ref3.state;
+  return function () {
+    state.animationDuration = props.animationDuration;
+    if (state.translate3d >= state.headHeight) {
+      state.translate3d = state.headHeight;
+      state.checkStatus = true;
+      state.styleObj = {
+        'transition-duration': state.animationDuration + 'ms',
+        transform: 'translate3d(0px,' + state.translate3d + 'px,0px)'
+      };
+      emit('update:modelValue', true);
+      emit('refresh');
+    } else {
+      state.styleObj = {
+        'transition-duration': state.animationDuration + 'ms'
+      };
+      state.translate3d = 0;
+      state.checkStatus = false;
+      state.replaces = '';
+    }
+  };
+};
+export var mountedHandler = function mountedHandler(_ref4) {
+  var api = _ref4.api,
+    refs = _ref4.refs,
+    state = _ref4.state;
+  return function () {
+    state.styleObj = {
+      'transition-duration': state.animationDuration + 'ms'
+    };
+    var track = refs.track;
+    on(track, 'touchstart', api.onTouchstart);
+    on(track, 'touchmove', api.onTouchmove);
+    on(track, 'touchend', api.onTouchend);
+  };
+};
+export var beforeUnmountHandler = function beforeUnmountHandler(_ref5) {
+  var api = _ref5.api,
+    refs = _ref5.refs;
+  return function () {
+    var track = refs.track;
+    off(track, 'touchstart', api.onTouchstart);
+    off(track, 'touchmove', api.onTouchmove);
+    off(track, 'touchend', api.onTouchend);
+  };
+};
+export var watchModelValue = function watchModelValue(_ref6) {
+  var value = _ref6.value,
+    state = _ref6.state;
+  if (!value) {
+    if (state.successText) {
+      state.checkStatus = false;
+      state.replaces = state.successText;
+      setTimeout(function () {
+        state.translate3d = 0;
+        state.styleObj = {
+          'transition-duration': state.animationDuration + 'ms'
+        };
+        state.replaces = '';
+      }, state.successDuration);
+    } else {
+      state.translate3d = 0;
+      state.checkStatus = false;
+      state.replaces = '';
+      state.styleObj = {
+        'transition-duration': state.animationDuration + 'ms'
+      };
+    }
+  }
+};

package/pull-refresh/vue.js

@@ -0,0 +1,64 @@
+import { mountedHandler, beforeUnmountHandler, watchModelValue, onTouchstart, onTouchmove, onTouchend } from './index';
+export var api = ['state'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    onMounted = _ref.onMounted,
+    reactive = _ref.reactive,
+    watch = _ref.watch,
+    onBeforeUnmount = _ref.onBeforeUnmount;
+  var refs = _ref2.refs,
+    emit = _ref2.emit;
+  var api = {};
+  var state = reactive({
+    replaces: '',
+    styleObj: {},
+    translate3d: 0,
+    draggposition: 0,
+    value: props.modelValue,
+    checkStatus: false,
+    headHeight: props.headHeight,
+    pullingText: props.pullingText,
+    loosingText: props.loosingText,
+    successText: props.successText,
+    successDuration: props.successDuration,
+    animationDuration: props.animationDuration,
+    disabled: computed(function () {
+      return props.disabled;
+    })
+  });
+  Object.assign(api, {
+    state: state,
+    onTouchstart: onTouchstart({
+      state: state
+    }),
+    onTouchmove: onTouchmove({
+      refs: refs,
+      state: state
+    }),
+    onTouchend: onTouchend({
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    mountedHandler: mountedHandler({
+      api: api,
+      refs: refs,
+      state: state
+    }),
+    beforeUnmountHandler: beforeUnmountHandler({
+      api: api,
+      refs: refs
+    })
+  });
+  watch(function () {
+    return props.modelValue;
+  }, function (value) {
+    watchModelValue({
+      value: value,
+      state: state
+    });
+  });
+  onMounted(api.mountedHandler);
+  onBeforeUnmount(api.beforeUnmountHandler);
+  return api;
+};

package/radio/index.js

@@ -0,0 +1,83 @@
+export var handleChange = function handleChange(_ref) {
+  var constants = _ref.constants,
+    dispatch = _ref.dispatch,
+    emit = _ref.emit,
+    state = _ref.state,
+    nextTick = _ref.nextTick;
+  return function () {
+    nextTick(function () {
+      emit('change', state.model);
+      state.isGroup && dispatch(constants.RADIO_GROUP, 'handleChange', [state.model]);
+    });
+  };
+};
+export var isGroup = function isGroup(_ref2) {
+  var constants = _ref2.constants,
+    $parent = _ref2.parent,
+    state = _ref2.state;
+  return function () {
+    var parent = $parent.$parent.$parent;
+    while (parent) {
+      if (parent.$options.componentName !== constants.RADIO_GROUP) {
+        parent = parent.$parent;
+      } else {
+        state.radioGroup = parent;
+        return true;
+      }
+    }
+    return false;
+  };
+};
+export var radioSize = function radioSize(_ref3) {
+  var props = _ref3.props,
+    state = _ref3.state;
+  return function () {
+    return state.isGroup ? state.radioGroup.state.radioGroupSize || props.size : props.size;
+  };
+};
+export var isDisabled = function isDisabled(_ref4) {
+  var props = _ref4.props,
+    state = _ref4.state;
+  return function () {
+    return props.disabled || state.radioGroup.disabled || state.formDisabled;
+  };
+};
+export var tabIndex = function tabIndex(_ref5) {
+  var props = _ref5.props,
+    state = _ref5.state;
+  return function () {
+    return state.isDisabled || state.isGroup && state.model !== props.label ? -1 : 0;
+  };
+};
+export var getModel = function getModel(_ref6) {
+  var props = _ref6.props,
+    state = _ref6.state;
+  return function () {
+    return state.isGroup ? state.radioGroup.modelValue : props.modelValue;
+  };
+};
+export var setModel = function setModel(_ref7) {
+  var constants = _ref7.constants,
+    dispatch = _ref7.dispatch,
+    emit = _ref7.emit,
+    props = _ref7.props,
+    refs = _ref7.refs,
+    state = _ref7.state;
+  return function (val) {
+    if (state.isGroup) {
+      dispatch(constants.RADIO_GROUP, 'update:modelValue', [val]);
+    } else {
+      emit('update:modelValue', val);
+    }
+    refs.radio && (refs.radio.checked = state.model === props.label);
+  };
+};
+export var toggleEvent = function toggleEvent(_ref8) {
+  var props = _ref8.props,
+    refs = _ref8.refs,
+    type = _ref8.type;
+  var radioEl = refs.radio;
+  Object.keys(props.events).forEach(function (ev) {
+    radioEl[type + 'EventListener'](ev, props.events[ev]);
+  });
+};

package/radio/vue.js

@@ -0,0 +1,99 @@
+import { handleChange, isGroup, radioSize, isDisabled, tabIndex, getModel, setModel, toggleEvent } from './index';
+export var api = ['state', 'handleChange'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var onMounted = _ref.onMounted,
+    onBeforeUnmount = _ref.onBeforeUnmount,
+    computed = _ref.computed,
+    reactive = _ref.reactive,
+    inject = _ref.inject;
+  var refs = _ref2.refs,
+    parent = _ref2.parent,
+    emit = _ref2.emit,
+    constants = _ref2.constants,
+    nextTick = _ref2.nextTick,
+    dispatch = _ref2.dispatch;
+  parent.tinyForm = parent.tinyForm || inject('form', null);
+  var api = {};
+  var state = reactive({
+    focus: false,
+    radioGroup: '',
+    isGroup: computed(function () {
+      return api.isGroup();
+    }),
+    radioSize: computed(function () {
+      return api.radioSize();
+    }),
+    isDisabled: computed(function () {
+      return api.isDisabled();
+    }),
+    tabIndex: computed(function () {
+      return api.tabIndex();
+    }),
+    formDisabled: computed(function () {
+      return (parent.tinyForm || {}).disabled;
+    }),
+    model: computed({
+      get: function get() {
+        return api.getModel();
+      },
+      set: function set(val) {
+        return api.setModel(val);
+      }
+    })
+  });
+  Object.assign(api, {
+    state: state,
+    radioSize: radioSize({
+      props: props,
+      state: state
+    }),
+    getModel: getModel({
+      props: props,
+      state: state
+    }),
+    isGroup: isGroup({
+      constants: constants,
+      parent: parent,
+      state: state
+    }),
+    tabIndex: tabIndex({
+      props: props,
+      state: state
+    }),
+    isDisabled: isDisabled({
+      props: props,
+      state: state
+    }),
+    setModel: setModel({
+      constants: constants,
+      dispatch: dispatch,
+      emit: emit,
+      props: props,
+      refs: refs,
+      state: state
+    }),
+    handleChange: handleChange({
+      constants: constants,
+      dispatch: dispatch,
+      emit: emit,
+      state: state,
+      nextTick: nextTick
+    })
+  });
+  onMounted(function () {
+    dispatch('Tooltip', 'tooltip-update');
+    toggleEvent({
+      props: props,
+      refs: refs,
+      type: 'add'
+    });
+  });
+  onBeforeUnmount(function () {
+    toggleEvent({
+      props: props,
+      refs: refs,
+      type: 'remove'
+    });
+  });
+  return api;
+};

package/radio-button/index.js

@@ -0,0 +1,58 @@
+export var handleChange = function handleChange(_ref) {
+  var constants = _ref.constants,
+    nextTick = _ref.nextTick,
+    dispatch = _ref.dispatch,
+    state = _ref.state;
+  return function () {
+    nextTick(function () {
+      dispatch(constants.RADIO_GROUP, 'handleChange', [state.value]);
+    });
+  };
+};
+export var getValue = function getValue(state) {
+  return function () {
+    return state.radioGroup.modelValue;
+  };
+};
+export var setValue = function setValue(_ref2) {
+  var state = _ref2.state;
+  return function (val) {
+    return state.radioGroup.$emit('update:modelValue', val);
+  };
+};
+export var getGroup = function getGroup(_ref3) {
+  var constants = _ref3.constants,
+    $parent = _ref3.parent;
+  return function () {
+    var parent = $parent.$parent;
+    while (parent) {
+      if (parent.$options.componentName !== constants.RADIO_GROUP) {
+        parent = parent.$parent;
+      } else {
+        return parent;
+      }
+    }
+    return false;
+  };
+};
+export var getStyle = function getStyle(state) {
+  return function () {
+    return {
+      backgroundColor: state.radioGroup.fill || '',
+      borderColor: state.radioGroup.fill || '',
+      boxShadow: state.radioGroup.fill ? "-1px 0 0 0 ".concat(state.radioGroup.fill) : '',
+      color: state.radioGroup.textColor || ''
+    };
+  };
+};
+export var toggleEvents = function toggleEvents(_ref4) {
+  var refs = _ref4.refs,
+    props = _ref4.props;
+  return function () {
+    var isUnBind = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    var radioEl = refs.radio;
+    Object.keys(props.events).forEach(function (ev) {
+      radioEl[(isUnBind ? 'remove' : 'add') + 'EventListener'](ev, props.events[ev]);
+    });
+  };
+};

package/radio-button/vue.js

@@ -0,0 +1,70 @@
+import { handleChange, getValue, setValue, getGroup, getStyle, toggleEvents } from './index';
+export var api = ['state', 'handleChange'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    reactive = _ref.reactive,
+    onMounted = _ref.onMounted,
+    onBeforeUnmount = _ref.onBeforeUnmount;
+  var emit = _ref2.emit,
+    parent = _ref2.parent,
+    dispatch = _ref2.dispatch,
+    constants = _ref2.constants,
+    nextTick = _ref2.nextTick,
+    refs = _ref2.refs;
+  var api = {
+    getGroup: getGroup({
+      constants: constants,
+      parent: parent
+    }),
+    toggleEvents: toggleEvents({
+      refs: refs,
+      props: props
+    })
+  };
+  var state = reactive({
+    focus: false,
+    value: computed({
+      get: function get() {
+        return api.getValue();
+      },
+      set: function set(val) {
+        return api.setValue(val);
+      }
+    }),
+    radioGroup: computed(function () {
+      return api.getGroup();
+    }),
+    activeStyle: computed(function () {
+      return api.getStyle();
+    }),
+    size: computed(function () {
+      return state.radioGroup.state.radioGroupSize;
+    }),
+    isDisabled: computed(function () {
+      return props.disabled || state.radioGroup.disabled;
+    }),
+    tabIndex: computed(function () {
+      return state.isDisabled || state.radioGroup && state.value !== props.label ? -1 : 0;
+    })
+  });
+  Object.assign(api, {
+    state: state,
+    getValue: getValue(state),
+    getStyle: getStyle(state),
+    setValue: setValue({
+      emit: emit,
+      state: state
+    }),
+    handleChange: handleChange({
+      constants: constants,
+      dispatch: dispatch,
+      nextTick: nextTick,
+      state: state
+    })
+  });
+  onMounted(api.toggleEvents);
+  onBeforeUnmount(function () {
+    api.toggleEvents(true);
+  });
+  return api;
+};

package/radio-group/index.js

@@ -0,0 +1,51 @@
+import { KEY_CODE } from '@opentiny/vue-renderless/common';
+export var handleKeydown = function handleKeydown(_ref) {
+  var parent = _ref.parent;
+  return function (event) {
+    var target = event.target;
+    var className = target.nodeName === 'INPUT' ? '[type=radio]' : '[role=radio]';
+    var radios = parent.$el.querySelectorAll(className);
+    var length = radios.length;
+    var index = [].indexOf.call(radios, target);
+    var roleRadiosNodes = parent.$el.querySelectorAll('[role=radio]');
+    switch (event.keyCode) {
+      case KEY_CODE.ArrowDown:
+      case KEY_CODE.ArrowRight:
+        if (index === length - 1) {
+          event.stopPropagation();
+          event.preventDefault();
+          roleRadiosNodes[0].click();
+          roleRadiosNodes[0].focus();
+        } else {
+          roleRadiosNodes[index + 1].click();
+          roleRadiosNodes[index + 1].focus();
+        }
+        break;
+      case KEY_CODE.ArrowUp:
+      case KEY_CODE.ArrowLeft:
+        event.stopPropagation();
+        event.preventDefault();
+        if (index === 0) {
+          roleRadiosNodes[length - 1].click();
+          roleRadiosNodes[length - 1].focus();
+        } else {
+          roleRadiosNodes[index - 1].click();
+          roleRadiosNodes[index - 1].focus();
+        }
+        break;
+      default:
+        break;
+    }
+  };
+};
+export var mounted = function mounted(parent) {
+  return function () {
+    var radios = parent.$el.querySelectorAll('[type=radio]');
+    var firstLabel = parent.$el.querySelectorAll('[role=radio]')[0];
+    if (![].some.call(radios, function (radio) {
+      return radio.checked;
+    }) && firstLabel) {
+      firstLabel.tabIndex = 0;
+    }
+  };
+};

package/radio-group/vue.js

@@ -0,0 +1,34 @@
+import { handleKeydown, mounted } from './index';
+export var api = ['state', 'handleKeydown'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    onMounted = _ref.onMounted,
+    reactive = _ref.reactive,
+    watch = _ref.watch;
+  var parent = _ref2.parent,
+    dispatch = _ref2.dispatch;
+  var state = reactive({
+    radioGroupSize: computed(function () {
+      return props.size;
+    }),
+    tag: 'div'
+  });
+  parent.$on('handleChange', function (value) {
+    parent.$emit('change', value);
+  });
+  var api = {
+    state: state,
+    dispatch: dispatch,
+    onMounted: mounted(parent),
+    handleKeydown: handleKeydown({
+      parent: parent
+    })
+  };
+  watch(function () {
+    return props.modelValue;
+  }, function (value) {
+    api.dispatch('FormItem', 'form.change', [value]);
+  });
+  onMounted(api.onMounted);
+  return api;
+};