@opentiny/vue-renderless 3.1.0-alpha.0

package/rate/index.js

@@ -0,0 +1,254 @@
+import { KEY_CODE } from '@opentiny/vue-renderless/common';
+export var computedActiveColor = function computedActiveColor(props) {
+  return function (state) {
+    var result = '';
+    if (state.currentValue <= props.lowThreshold) {
+      result = state.colorMap.lowColor;
+    } else if (state.currentValue >= props.highThreshold) {
+      result = state.colorMap.highColor;
+    } else {
+      result = state.colorMap.mediumColor;
+    }
+    return result;
+  };
+};
+export var computedActiveClass = function computedActiveClass(props) {
+  return function (state) {
+    var result = '';
+    if (state.currentValue <= props.lowThreshold) {
+      result = state.classMap.lowClass;
+    } else if (state.currentValue >= props.highThreshold) {
+      result = state.classMap.highClass;
+    } else {
+      result = state.classMap.mediumClass;
+    }
+    return result;
+  };
+};
+export var getTextStyle = function getTextStyle(_ref) {
+  var props = _ref.props,
+    state = _ref.state;
+  return function () {
+    var color = props.radio && state.currentValue ? props.textColor : state.activeColor;
+    return {
+      color: color
+    };
+  };
+};
+export var handelKey = function handelKey(_ref2) {
+  var emit = _ref2.emit,
+    props = _ref2.props,
+    state = _ref2.state;
+  return function (event) {
+    var current = state.currentValue;
+    var keyCode = event.keyCode;
+    if (props.disabled) {
+      return;
+    }
+    if (keyCode === KEY_CODE.ArrowUp || keyCode === KEY_CODE.ArrowRight) {
+      current += props.allowHalf ? 0.5 : 1;
+      event.stopPropagation();
+      event.preventDefault();
+    } else if (keyCode === KEY_CODE.ArrowLeft || keyCode === KEY_CODE.ArrowDown) {
+      current -= props.allowHalf ? 0.5 : 1;
+      event.stopPropagation();
+      event.preventDefault();
+    }
+    current = current < 0 ? 0 : current;
+    current = current > props.max ? props.max : current;
+    emit('update:modelValue', current);
+    emit('change', current);
+  };
+};
+export var selectValue = function selectValue(_ref3) {
+  var emit = _ref3.emit,
+    props = _ref3.props,
+    state = _ref3.state;
+  return function (value) {
+    if (props.disabled) {
+      return;
+    }
+    if (props.allowHalf && state.pointerAtLeftHalf) {
+      value = state.currentValue;
+    }
+    emit('update:modelValue', value);
+    emit('change', value);
+  };
+};
+export var setCurrentValue = function setCurrentValue(_ref4) {
+  var _ref4$constants = _ref4.constants,
+    RATENODECLS = _ref4$constants.RATENODECLS,
+    DECIMALCLS = _ref4$constants.DECIMALCLS,
+    ICON_PREFIXCLS = _ref4$constants.ICON_PREFIXCLS,
+    props = _ref4.props,
+    state = _ref4.state,
+    parent = _ref4.parent,
+    api = _ref4.api;
+  return function (_ref5) {
+    var event = _ref5.event,
+      item = _ref5.item;
+    if (props.disabled) {
+      return;
+    }
+    if (!parent.$el.contains(state.mouseTarget)) {
+      api.resetCurrentValue();
+    }
+    if (props.allowHalf) {
+      var target = event.target;
+      var className = target.className;
+      var key = target.parentElement ? 'parentElement' : 'parentNode';
+      if (target.nodeName === 'svg') {
+        className = target[key].className;
+        target = target[key];
+      }
+      if (target.nodeName === 'path') {
+        className = target[key][key].className;
+        target = target[key][key];
+      }
+      if (className.indexOf(RATENODECLS) > -1) {
+        target = target.querySelector(ICON_PREFIXCLS);
+      }
+      if (className.indexOf(DECIMALCLS) > -1) {
+        target = target.parentNode;
+      }
+      state.pointerAtLeftHalf = event.offsetX * 2 <= target.clientWidth;
+      state.currentValue = state.pointerAtLeftHalf ? item - 0.5 : item;
+    } else {
+      state.currentValue = item;
+    }
+    state.hoverIndex = item;
+  };
+};
+export var resetCurrentValue = function resetCurrentValue(_ref6) {
+  var props = _ref6.props,
+    state = _ref6.state;
+  return function () {
+    if (props.disabled) {
+      return;
+    }
+    if (props.allowHalf) {
+      state.pointerAtLeftHalf = props.modelValue !== Math.floor(props.modelValue);
+    }
+    state.currentValue = props.modelValue;
+    state.hoverIndex = -1;
+  };
+};
+export var showDecimalIcon = function showDecimalIcon(_ref7) {
+  var props = _ref7.props,
+    state = _ref7.state;
+  return function (item) {
+    var decimal = props.modelValue * 100 - Math.floor(props.modelValue) * 100;
+    var showWhenDisabled = props.disabled && decimal > 0 && item - 1 < props.modelValue && item > props.modelValue;
+    var showWhenAllowHalf = props.allowHalf && state.pointerAtLeftHalf && item - 0.5 <= state.currentValue && item > state.currentValue;
+    return showWhenDisabled || showWhenAllowHalf;
+  };
+};
+export var getIconStyle = function getIconStyle(_ref8) {
+  var api = _ref8.api,
+    props = _ref8.props,
+    state = _ref8.state;
+  return function (item) {
+    var isHalf = api.showDecimalIcon(item);
+    var voidColor = props.disabled ? props.disabledVoidColor : props.voidColor;
+    if (props.radio) {
+      return {
+        fill: item === state.currentValue ? state.activeColor : voidColor,
+        'font-size': props.size || '18px'
+      };
+    }
+    return {
+      fill: isHalf ? 'transparent' : item <= state.currentValue ? state.activeColor : voidColor,
+      'font-size': props.size || '18px'
+    };
+  };
+};
+export var computedText = function computedText(_ref9) {
+  var props = _ref9.props,
+    state = _ref9.state;
+  var result = '';
+  var currentValue = 0;
+  if (!isNaN(+state.currentValue)) {
+    currentValue = +state.currentValue > 0 ? +state.currentValue : 0;
+  }
+  if (currentValue > props.texts.length) {
+    currentValue = props.texts.length;
+  }
+  if (props.showScore) {
+    result = props.scoreTemplate.replace(/\{\s*value\s*\}/, currentValue);
+    return result;
+  }
+  if (props.showText && currentValue > 0) {
+    currentValue = Math.ceil(currentValue) - 1;
+    result = props.texts[currentValue];
+  }
+  return result;
+};
+export var computedDecimalStyle = function computedDecimalStyle(_ref10) {
+  var props = _ref10.props,
+    state = _ref10.state;
+  var width = '';
+  var clip = '';
+  var clipPath = '';
+  var fontSize = '';
+  if (props.disabled) {
+    width = "".concat(props.modelValue * 100 - Math.floor(props.modelValue) * 100 < 50 ? 0 : 50, "%");
+  } else if (props.allowHalf) {
+    var reactSize = props.size ? Math.ceil(parseInt(props.size) / 2) + 'px' : '6px';
+    clip = "rect(0px, ".concat(reactSize, ", ").concat(props.size || '14px', ", 0px)");
+    clipPath = 'inset(0 50% 0 0)';
+    fontSize = props.size || '18px';
+  }
+  return {
+    fill: state.activeColor,
+    width: width,
+    clip: clip,
+    clipPath: clipPath,
+    fontSize: fontSize
+  };
+};
+export var computedClasses = function computedClasses(_ref11) {
+  var props = _ref11.props,
+    state = _ref11.state;
+  var i = 0;
+  var result = [];
+  var threshold = state.currentValue;
+  if (props.radio) {
+    result = props.iconClasses;
+  } else {
+    if (props.allowHalf && state.currentValue !== Math.floor(state.currentValue)) {
+      threshold--;
+    }
+    while (i < threshold) {
+      result.push(state.activeClass);
+      i++;
+    }
+    while (i < props.max) {
+      result.push(state.voidClass);
+      i++;
+    }
+  }
+  return result;
+};
+export var computedClassMap = function computedClassMap(props) {
+  return {
+    lowClass: props.iconClasses[0],
+    mediumClass: props.iconClasses[1],
+    highClass: props.iconClasses[2],
+    voidClass: props.voidIconClass,
+    disabledVoidClass: props.disabledVoidIconClass
+  };
+};
+export var computedColorMap = function computedColorMap(props) {
+  return {
+    lowColor: props.colors[0],
+    mediumColor: props.colors[1],
+    highColor: props.colors[2],
+    voidColor: props.voidColor,
+    disabledVoidColor: props.disabledVoidColor
+  };
+};
+export var computedVoidClass = function computedVoidClass(_ref12) {
+  var props = _ref12.props,
+    state = _ref12.state;
+  return props.disabled ? state.classMap.disabledVoidClass : state.classMap.voidClass;
+};

package/rate/vue.js

@@ -0,0 +1,158 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { getTextStyle, handelKey, resetCurrentValue, setCurrentValue, selectValue, showDecimalIcon, getIconStyle, computedText, computedDecimalStyle, computedClasses, computedColorMap, computedClassMap, computedVoidClass, computedActiveColor, computedActiveClass } from './index';
+import { on, off } from '@opentiny/vue-renderless/common/deps/dom';
+export var api = ['state', 'showDecimalIcon', 'getIconStyle', 'getTextStyle', 'selectValue', 'handelKey', 'setCurrentValue', 'resetCurrentValue'];
+export var useChangeValue = function useChangeValue(_ref) {
+  var constants = _ref.constants,
+    emit = _ref.emit,
+    props = _ref.props,
+    reactive = _ref.reactive,
+    toRefs = _ref.toRefs,
+    watch = _ref.watch,
+    onMounted = _ref.onMounted,
+    onUnmounted = _ref.onUnmounted,
+    parent = _ref.parent;
+  var state = reactive({
+    hoverIndex: -1,
+    currentValue: props.modelValue
+  });
+  var api = {
+    selectValue: selectValue({
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    resetCurrentValue: resetCurrentValue({
+      props: props,
+      state: state
+    })
+  };
+  api.setCurrentValue = setCurrentValue({
+    constants: constants,
+    props: props,
+    state: state,
+    parent: parent,
+    api: api
+  });
+  watch(function () {
+    return props.modelValue;
+  }, function (value) {
+    state.currentValue = value;
+  }, {
+    immediate: true
+  });
+  var updateMousePostion = function updateMousePostion(event) {
+    state.mouseTarget = event.target;
+  };
+  onMounted(function () {
+    on(document, 'mousemove', updateMousePostion);
+    on(document, 'mouseleave', api.resetCurrentValue);
+  });
+  onUnmounted(function () {
+    off(document, 'mousemove', updateMousePostion);
+    off(document, 'mouseleave', api.resetCurrentValue);
+    state.mouseTarget = null;
+  });
+  return {
+    api: api,
+    state: toRefs(state)
+  };
+};
+export var renderless = function renderless(props, _ref2, _ref3) {
+  var computed = _ref2.computed,
+    reactive = _ref2.reactive,
+    toRefs = _ref2.toRefs,
+    watch = _ref2.watch,
+    onMounted = _ref2.onMounted,
+    onUnmounted = _ref2.onUnmounted;
+  var constants = _ref3.constants,
+    emit = _ref3.emit,
+    parent = _ref3.parent;
+  var api = {};
+  var changeValue = useChangeValue({
+    computed: computed,
+    constants: constants,
+    emit: emit,
+    props: props,
+    reactive: reactive,
+    toRefs: toRefs,
+    watch: watch,
+    onMounted: onMounted,
+    onUnmounted: onUnmounted,
+    parent: parent
+  });
+  var state = reactive(_objectSpread({
+    pointerAtLeftHalf: true,
+    colorMap: computed(function () {
+      return api.computedColorMap(props);
+    }),
+    classMap: computed(function () {
+      return api.computedClassMap(props);
+    }),
+    text: computed(function () {
+      return api.computedText({
+        props: props,
+        state: state
+      });
+    }),
+    activeClass: computed(function () {
+      return api.computedActiveClass(state);
+    }),
+    activeColor: computed(function () {
+      return api.computedActiveColor(state);
+    }),
+    classes: computed(function () {
+      return api.computedClasses({
+        props: props,
+        state: state
+      });
+    }),
+    decimalIconClass: computed(function () {
+      return api.computedActiveClass(state);
+    }),
+    voidClass: computed(function () {
+      return api.computedVoidClass({
+        props: props,
+        state: state
+      });
+    }),
+    decimalStyle: computed(function () {
+      return api.computedDecimalStyle({
+        props: props,
+        state: state
+      });
+    })
+  }, changeValue.state));
+  Object.assign(api, _objectSpread({
+    state: state,
+    computedText: computedText,
+    computedClasses: computedClasses,
+    computedClassMap: computedClassMap,
+    computedColorMap: computedColorMap,
+    computedVoidClass: computedVoidClass,
+    computedDecimalStyle: computedDecimalStyle,
+    getTextStyle: getTextStyle({
+      props: props,
+      state: state
+    }),
+    handelKey: handelKey({
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    computedActiveColor: computedActiveColor(props),
+    computedActiveClass: computedActiveClass(props),
+    showDecimalIcon: showDecimalIcon({
+      props: props,
+      state: state
+    }),
+    getIconStyle: getIconStyle({
+      api: api,
+      props: props,
+      state: state
+    })
+  }, changeValue.api));
+  return api;
+};

package/row/index.js

@@ -0,0 +1,19 @@
+export var computedClassName = function computedClassName(_ref) {
+  var flex = _ref.flex,
+    justify = _ref.justify,
+    align = _ref.align;
+  var className = [];
+  if (flex) {
+    className.push('row-flex');
+    className.push("row-justify-".concat(justify));
+    className.push("row-align-".concat(align));
+  }
+  return className.join(' ');
+};
+export var computedStyle = function computedStyle(gutter) {
+  var value = gutter ? -(gutter / 2) : 0;
+  return value ? {
+    marginLeft: value + 'px',
+    marginRight: value + 'px'
+  } : {};
+};

package/row/vue.js

@@ -0,0 +1,24 @@
+import { computedClassName, computedStyle } from './index';
+export var api = ['state'];
+export var renderless = function renderless(props, _ref) {
+  var computed = _ref.computed,
+    reactive = _ref.reactive;
+  var api = {
+    computedStyle: computedStyle,
+    computedClassName: computedClassName
+  };
+  var state = reactive({
+    style: computed(function () {
+      return api.computedStyle(props.gutter);
+    }),
+    className: computed(function () {
+      return api.computedClassName({
+        flex: props.flex,
+        justify: props.justify,
+        align: props.align
+      });
+    })
+  });
+  api.state = state;
+  return api;
+};

package/scroll-text/index.js

@@ -0,0 +1,24 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+export var computedBindStyle = function computedBindStyle(_ref) {
+  var constants = _ref.constants,
+    time = _ref.time;
+  return _defineProperty({}, constants.ANIMATION_DURATION, parseInt(time, 10) + 's');
+};
+export var stopAnimation = function stopAnimation(_ref3) {
+  var props = _ref3.props,
+    state = _ref3.state;
+  return function () {
+    if (props.hoverStop) {
+      state.isStop = true;
+    }
+  };
+};
+export var startAnimation = function startAnimation(_ref4) {
+  var props = _ref4.props,
+    state = _ref4.state;
+  return function () {
+    if (props.hoverStop) {
+      state.isStop = false;
+    }
+  };
+};

package/scroll-text/vue.js

@@ -0,0 +1,31 @@
+import { computedBindStyle, stopAnimation, startAnimation } from './index';
+export var api = ['state', 'startAnimation', 'stopAnimation'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    reactive = _ref.reactive;
+  var constants = _ref2.constants;
+  var api = {
+    computedBindStyle: computedBindStyle
+  };
+  var state = reactive({
+    isStop: false,
+    bindStyle: computed(function () {
+      return api.computedBindStyle({
+        constants: constants,
+        time: props.time
+      });
+    })
+  });
+  Object.assign(api, {
+    state: state,
+    startAnimation: startAnimation({
+      props: props,
+      state: state
+    }),
+    stopAnimation: stopAnimation({
+      props: props,
+      state: state
+    })
+  });
+  return api;
+};

package/scrollbar/index.js

@@ -0,0 +1,127 @@
+var horizontal = {
+  key: 'horizontal',
+  offset: 'offsetWidth',
+  scroll: 'scrollLeft',
+  scrollSize: 'scrollWidth',
+  size: 'width',
+  axis: 'X',
+  client: 'clientX',
+  direction: 'left'
+};
+var vertical = {
+  key: 'vertical',
+  offset: 'offsetHeight',
+  scroll: 'scrollTop',
+  scrollSize: 'scrollHeight',
+  size: 'height',
+  axis: 'Y',
+  client: 'clientY',
+  direction: 'top'
+};
+export var BAR_MAP = {
+  horizontal: horizontal,
+  vertical: vertical
+};
+export var renderThumbStyle = function renderThumbStyle(_ref) {
+  var bar = _ref.bar,
+    move = _ref.move,
+    size = _ref.size;
+  var style = {};
+  var translate = "translate".concat(bar.axis, "(").concat(move, "%)");
+  style[bar.size] = size;
+  Object.assign(style, {
+    transform: translate,
+    msTransform: translate,
+    webkitTransform: translate
+  });
+  return style;
+};
+export var clickThumbHandler = function clickThumbHandler(_ref2) {
+  var api = _ref2.api,
+    state = _ref2.state;
+  return function (event) {
+    if (event.ctrlKey || event.button === 2) {
+      return;
+    }
+    api.startDrag(event);
+    state[state.bar.axis] = event.currentTarget[state.bar.offset] - (event[state.bar.client] - event.currentTarget.getBoundingClientRect()[state.bar.direction]);
+  };
+};
+export var clickTrackHandler = function clickTrackHandler(_ref3) {
+  var refs = _ref3.refs,
+    state = _ref3.state;
+  return function (event) {
+    var offset = Math.abs(event.target.getBoundingClientRect()[state.bar.direction] - event[state.bar.client]);
+    var thumbHalf = refs.thumb[state.bar.offset] / 2;
+    var thumbPositionPercentage = (offset - thumbHalf) * 100 / refs.bar[state.bar.offset];
+    state.wrap[state.bar.scroll] = thumbPositionPercentage * state.wrap[state.bar.scrollSize] / 100;
+  };
+};
+export var startDrag = function startDrag(_ref4) {
+  var api = _ref4.api,
+    on = _ref4.on,
+    state = _ref4.state;
+  return function (event) {
+    event.stopImmediatePropagation();
+    state.cursorDown = true;
+    on(document, 'mousemove', api.mouseMoveDocumentHandler);
+    on(document, 'mouseup', api.mouseUpDocumentHandler);
+    document.onselectstart = function () {
+      return false;
+    };
+  };
+};
+export var mouseMoveDocumentHandler = function mouseMoveDocumentHandler(_ref5) {
+  var refs = _ref5.refs,
+    state = _ref5.state;
+  return function (event) {
+    if (state.cursorDown === false) {
+      return;
+    }
+    var prevPage = state[state.bar.axis];
+    if (!prevPage) {
+      return;
+    }
+    var offset = (refs.bar.getBoundingClientRect()[state.bar.direction] - event[state.bar.client]) * -1;
+    var thumbClickPosition = refs.thumb[state.bar.offset] - prevPage;
+    var thumbPositionPercentage = (offset - thumbClickPosition) * 100 / refs.bar[state.bar.offset];
+    state.wrap[state.bar.scroll] = thumbPositionPercentage * state.wrap[state.bar.scrollSize] / 100;
+  };
+};
+export var mouseUpDocumentHandler = function mouseUpDocumentHandler(_ref6) {
+  var api = _ref6.api,
+    off = _ref6.off,
+    state = _ref6.state;
+  return function () {
+    state.cursorDown = false;
+    state[state.bar.axis] = 0;
+    off(document, 'mousemove', api.mouseMoveDocumentHandler);
+    document.onselectstart = null;
+  };
+};
+export var handleScroll = function handleScroll(_ref7) {
+  var refs = _ref7.refs,
+    state = _ref7.state,
+    emit = _ref7.emit;
+  return function (event) {
+    var wrap = refs.wrap;
+    state.moveY = wrap.scrollTop * 100 / wrap.clientHeight;
+    state.moveX = wrap.scrollLeft * 100 / wrap.clientWidth;
+    emit('scroll', event);
+  };
+};
+export var update = function update(_ref8) {
+  var refs = _ref8.refs,
+    state = _ref8.state;
+  return function () {
+    var heightPercentage, widthPercentage;
+    var wrap = refs.wrap;
+    if (!wrap) {
+      return;
+    }
+    heightPercentage = wrap.clientHeight * 100 / wrap.scrollHeight;
+    widthPercentage = wrap.clientWidth * 100 / wrap.scrollWidth;
+    state.sizeHeight = heightPercentage < 100 ? heightPercentage + '%' : '';
+    state.sizeWidth = widthPercentage < 100 ? widthPercentage + '%' : '';
+  };
+};

package/scrollbar/vue-bar.js

@@ -0,0 +1,49 @@
+import { BAR_MAP, renderThumbStyle, clickThumbHandler, clickTrackHandler, startDrag, mouseMoveDocumentHandler, mouseUpDocumentHandler } from './index';
+import { on, off } from '@opentiny/vue-renderless/common/deps/dom';
+export var api = ['state', 'startDrag', 'renderThumbStyle', 'clickTrackHandler', 'clickThumbHandler', 'mouseUpDocumentHandler', 'mouseMoveDocumentHandler'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    onUnmounted = _ref.onUnmounted,
+    reactive = _ref.reactive;
+  var refs = _ref2.refs,
+    parent = _ref2.parent;
+  var state = reactive({
+    bar: computed(function () {
+      return BAR_MAP[props.vertical ? 'vertical' : 'horizontal'];
+    }),
+    wrap: computed(function () {
+      return parent.$refs.wrap;
+    })
+  });
+  var api = {
+    state: state,
+    renderThumbStyle: renderThumbStyle,
+    clickTrackHandler: clickTrackHandler({
+      refs: refs,
+      state: state
+    }),
+    mouseMoveDocumentHandler: mouseMoveDocumentHandler({
+      refs: refs,
+      state: state
+    })
+  };
+  onUnmounted(function () {
+    return off(document, 'mouseup', api.mouseUpDocumentHandler);
+  });
+  return Object.assign(api, {
+    startDrag: startDrag({
+      api: api,
+      on: on,
+      state: state
+    }),
+    clickThumbHandler: clickThumbHandler({
+      api: api,
+      state: state
+    }),
+    mouseUpDocumentHandler: mouseUpDocumentHandler({
+      api: api,
+      off: off,
+      state: state
+    })
+  });
+};