@opentiny/vue-renderless 3.1.0-alpha.0

package/popover/vue.js

@@ -0,0 +1,174 @@
+import { mounted, computedTooltipId, destroyed, doToggle, doShow, doClose, handleFocus, handleClick, handleBlur, handleKeydown, handleAfterEnter, handleAfterLeave, handleMouseEnter, handleMouseLeave, handleDocumentClick, cleanup, wrapMounted } from './index';
+import userPopper from '@opentiny/vue-renderless/common/deps/vue-popper';
+export var api = ['state', 'handleAfterEnter', 'handleAfterLeave'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    computed = _ref.computed,
+    api = _ref.api,
+    popperElm = _ref.popperElm,
+    showPopper = _ref.showPopper,
+    referenceElm = _ref.referenceElm;
+  var state = reactive({
+    popperElm: popperElm,
+    showPopper: showPopper,
+    timer: null,
+    mounted: false,
+    referenceElm: referenceElm,
+    tooltipId: computed(function () {
+      return api.computedTooltipId();
+    })
+  });
+  return state;
+};
+var initApi = function initApi(_ref2) {
+  var api = _ref2.api,
+    props = _ref2.props,
+    state = _ref2.state,
+    refs = _ref2.refs,
+    emit = _ref2.emit,
+    doDestroy = _ref2.doDestroy,
+    constants = _ref2.constants;
+  Object.assign(api, {
+    state: state,
+    mounted: mounted({
+      api: api,
+      state: state,
+      constants: constants,
+      props: props
+    }),
+    cleanup: cleanup({
+      state: state,
+      props: props
+    }),
+    destroyed: destroyed({
+      state: state,
+      api: api
+    }),
+    doDestroy: doDestroy,
+    computedTooltipId: computedTooltipId(constants),
+    doShow: doShow(state),
+    doClose: doClose(state),
+    doToggle: doToggle(state),
+    handleClick: handleClick(state),
+    handleAfterEnter: handleAfterEnter(emit),
+    handleBlur: handleBlur({
+      props: props,
+      state: state
+    }),
+    handleFocus: handleFocus({
+      props: props,
+      state: state
+    }),
+    handleKeydown: handleKeydown({
+      api: api,
+      props: props
+    }),
+    handleMouseLeave: handleMouseLeave({
+      props: props,
+      state: state
+    }),
+    handleAfterLeave: handleAfterLeave({
+      emit: emit,
+      api: api
+    }),
+    handleMouseEnter: handleMouseEnter({
+      props: props,
+      state: state
+    }),
+    handleDocumentClick: handleDocumentClick({
+      refs: refs,
+      state: state
+    }),
+    wrapMounted: wrapMounted({
+      api: api,
+      props: props,
+      refs: refs,
+      state: state
+    })
+  });
+};
+var initWatch = function initWatch(_ref3) {
+  var watch = _ref3.watch,
+    props = _ref3.props,
+    state = _ref3.state,
+    emit = _ref3.emit;
+  watch(function () {
+    return state.showPopper;
+  }, function (val) {
+    if (props.disabled) {
+      return;
+    }
+    val ? emit('show') : emit('hide');
+  }, {
+    immediate: true
+  });
+};
+export var renderless = function renderless(props, _ref4, _ref5) {
+  var reactive = _ref4.reactive,
+    computed = _ref4.computed,
+    watch = _ref4.watch,
+    toRefs = _ref4.toRefs,
+    onBeforeUnmount = _ref4.onBeforeUnmount,
+    onMounted = _ref4.onMounted,
+    onUnmounted = _ref4.onUnmounted,
+    onActivated = _ref4.onActivated,
+    onDeactivated = _ref4.onDeactivated;
+  var $prefix = _ref5.$prefix,
+    emit = _ref5.emit,
+    refs = _ref5.refs,
+    slots = _ref5.slots,
+    nextTick = _ref5.nextTick;
+  var api = {};
+  var constants = {
+    IDPREFIX: "".concat($prefix.toLowerCase(), "-popover")
+  };
+  var options = {
+    emit: emit,
+    onBeforeUnmount: onBeforeUnmount,
+    nextTick: nextTick,
+    reactive: reactive,
+    props: props,
+    watch: watch,
+    onDeactivated: onDeactivated,
+    refs: refs,
+    slots: slots,
+    toRefs: toRefs
+  };
+  var _userPopper = userPopper(options),
+    showPopper = _userPopper.showPopper,
+    popperElm = _userPopper.popperElm,
+    referenceElm = _userPopper.referenceElm,
+    doDestroy = _userPopper.doDestroy;
+  var state = initState({
+    reactive: reactive,
+    computed: computed,
+    api: api,
+    popperElm: popperElm,
+    showPopper: showPopper,
+    referenceElm: referenceElm
+  });
+  initApi({
+    api: api,
+    constants: constants,
+    props: props,
+    state: state,
+    refs: refs,
+    emit: emit,
+    doDestroy: doDestroy
+  });
+  onDeactivated(function () {
+    api.destroyed();
+    api.cleanup();
+  });
+  onMounted(api.wrapMounted);
+  onActivated(api.mounted);
+  onUnmounted(api.destroyed);
+  onBeforeUnmount(api.cleanup);
+  initWatch({
+    watch: watch,
+    props: props,
+    state: state,
+    emit: emit
+  });
+  return api;
+};

package/popup/index.js

@@ -0,0 +1,139 @@
+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 { on, off } from '@opentiny/vue-renderless/common/deps/dom';
+import { touchStart, touchMove } from '@opentiny/vue-renderless/common/deps/touch';
+import { getScroller } from '@opentiny/vue-renderless/dropdown-menu';
+import { isNull } from '@opentiny/vue-renderless/common/type';
+export var getStyle = function getStyle(props) {
+  return function () {
+    var style = _objectSpread({}, props.popupStyle);
+    if (!isNull(props.duration)) {
+      var key = props.position === 'center' ? 'animationDuration' : 'transitionDuration';
+      style[key] = "".concat(props.duration, "s");
+    }
+    return style;
+  };
+};
+export var watchValue = function watchValue(api) {
+  return function (value) {
+    var type = value ? 'open' : 'close';
+    api[type]();
+  };
+};
+export var open = function open(_ref) {
+  var api = _ref.api,
+    constants = _ref.constants,
+    emit = _ref.emit,
+    props = _ref.props,
+    state = _ref.state;
+  return function () {
+    if (state.opened) {
+      return;
+    }
+    if (props.zIndex !== undefined) {
+      state.context.zIndex = props.zIndex;
+    }
+    api.renderOverlay();
+    state.opened = true;
+    emit('open');
+    if (props.lockScroll) {
+      on(document, 'touchstart', touchStart);
+      on(document, 'touchmove', api.onTouchMove);
+      if (!state.context.lockCount) {
+        document.body.classList.add(constants.OVERFLOWHIDDEN);
+      }
+      state.context.lockCount++;
+    }
+  };
+};
+export var close = function close(_ref2) {
+  var api = _ref2.api,
+    constants = _ref2.constants,
+    emit = _ref2.emit,
+    props = _ref2.props,
+    state = _ref2.state;
+  return function () {
+    if (!state.opened) {
+      return;
+    }
+    if (props.lockScroll) {
+      state.context.lockCount--;
+      off(document, 'touchstart', touchStart);
+      off(document, 'touchmove', api.onTouchMove);
+      if (!state.context.lockCount) {
+        document.body.classList.remove(constants.OVERFLOWHIDDEN);
+      }
+    }
+    state.opened = false;
+    emit('update:modelValue', false);
+    emit('close');
+  };
+};
+export var onTouchMove = function onTouchMove(_ref3) {
+  var refs = _ref3.refs,
+    state = _ref3.state;
+  return function (event) {
+    touchMove(event);
+    var direction = state.deltaY > 0 ? '10' : '01';
+    var el = getScroller()(event.target, refs.$el);
+    var scrollHeight = el.scrollHeight,
+      offsetHeight = el.offsetHeight,
+      scrollTop = el.scrollTop;
+    var status = '11';
+    if (scrollTop === 0) {
+      status = offsetHeight >= scrollHeight ? '00' : '01';
+    } else if (scrollTop + offsetHeight >= scrollHeight) {
+      status = '10';
+    }
+    if (status !== '11' && state.direction === 'vertical' && !(parseInt(status, 2) & parseInt(direction, 2))) {
+      event.preventDefault();
+    }
+  };
+};
+export var renderOverlay = function renderOverlay(_ref4) {
+  var api = _ref4.api,
+    nextTick = _ref4.nextTick,
+    props = _ref4.props,
+    state = _ref4.state;
+  return function () {
+    if (!props.modelValue) {
+      return;
+    }
+    nextTick(function () {
+      api.updateZIndex(props.overlay ? 1 : 0);
+      if (props.overlay) {
+        state.zIndex = state.context.zIndex++;
+      }
+    });
+  };
+};
+export var updateZIndex = function updateZIndex(_ref5) {
+  var refs = _ref5.refs,
+    state = _ref5.state;
+  return function () {
+    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    return refs.popup.style.zIndex = ++state.context.zIndex + value;
+  };
+};
+export var clickOverlay = function clickOverlay(_ref6) {
+  var api = _ref6.api,
+    props = _ref6.props,
+    emit = _ref6.emit;
+  return function () {
+    if (props.closeOnClickOverlay) {
+      api.close();
+      emit('click-overlay');
+    }
+  };
+};
+export var closed = function closed(emit) {
+  return function () {
+    return emit('closed');
+  };
+};
+export var opened = function opened(emit) {
+  return function () {
+    return emit('opened');
+  };
+};

package/popup/vue.js

@@ -0,0 +1,129 @@
+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 { getStyle, watchValue, open, opened, closed, onTouchMove, close, renderOverlay, clickOverlay, updateZIndex } from './index';
+export var api = ['state', 'open', 'close', 'clickOverlay', 'onTouchMove', 'opened', 'closed'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    computed = _ref.computed,
+    props = _ref.props,
+    api = _ref.api;
+  var state = reactive({
+    transitionName: computed(function () {
+      return props.transition || props.position === 'center' ? 'tiny-fade' : "tiny-popup-slide-".concat(props.position);
+    }),
+    style: computed(function () {
+      return api.getStyle();
+    }),
+    inited: computed(function () {
+      return state.inited || props.modelValue;
+    }),
+    opened: false,
+    startX: 0,
+    startY: 0,
+    deltaX: 0,
+    deltaY: 0,
+    offsetX: 0,
+    offsetY: 0,
+    direction: '',
+    shouldRender: computed(function () {
+      return state.inited || props.lazyRender;
+    }),
+    context: {
+      zIndex: 2000,
+      lockCount: 0,
+      stack: []
+    },
+    zIndex: props.zIndex,
+    overlayStyle: computed(function () {
+      return _objectSpread({
+        zIndex: state.zIndex
+      }, props.overlayStyle);
+    })
+  });
+  return state;
+};
+var initApi = function initApi(_ref2) {
+  var api = _ref2.api,
+    props = _ref2.props,
+    state = _ref2.state,
+    refs = _ref2.refs,
+    emit = _ref2.emit,
+    nextTick = _ref2.nextTick,
+    constants = _ref2.constants;
+  Object.assign(api, {
+    state: state,
+    opened: opened(emit),
+    closed: closed(emit),
+    getStyle: getStyle(props),
+    watchValue: watchValue(api),
+    updateZIndex: updateZIndex({
+      refs: refs,
+      state: state
+    }),
+    clickOverlay: clickOverlay({
+      api: api,
+      emit: emit,
+      props: props
+    }),
+    renderOverlay: renderOverlay({
+      api: api,
+      nextTick: nextTick,
+      props: props,
+      state: state
+    }),
+    onTouchMove: onTouchMove({
+      refs: refs,
+      state: state
+    }),
+    open: open({
+      api: api,
+      constants: constants,
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    close: close({
+      api: api,
+      constants: constants,
+      emit: emit,
+      props: props,
+      state: state
+    })
+  });
+};
+export var renderless = function renderless(props, _ref3, _ref4) {
+  var computed = _ref3.computed,
+    onMounted = _ref3.onMounted,
+    reactive = _ref3.reactive,
+    watch = _ref3.watch,
+    nextTick = _ref3.nextTick;
+  var constants = _ref4.constants,
+    refs = _ref4.refs,
+    emit = _ref4.emit;
+  var api = {};
+  var state = initState({
+    reactive: reactive,
+    computed: computed,
+    props: props,
+    api: api
+  });
+  initApi({
+    api: api,
+    props: props,
+    state: state,
+    refs: refs,
+    emit: emit,
+    nextTick: nextTick,
+    constants: constants
+  });
+  watch(function () {
+    return props.modelValue;
+  }, api.watchValue, {
+    immediate: true
+  });
+  onMounted(function () {
+    props.modelValue && api.open();
+  });
+  return api;
+};

package/progress/index.js

@@ -0,0 +1,174 @@
+export var computedBarStyle = function computedBarStyle(_ref) {
+  var api = _ref.api,
+    props = _ref.props;
+  return function () {
+    return {
+      width: props.percentage + '%',
+      backgroundColor: api.getCurrentColor(props.percentage)
+    };
+  };
+};
+export var computedRelativeStrokeWidth = function computedRelativeStrokeWidth(_ref2) {
+  var props = _ref2.props;
+  return function () {
+    return (props.strokeWidth / props.width * 100).toFixed(1);
+  };
+};
+export var computedRadius = function computedRadius(_ref3) {
+  var constants = _ref3.constants,
+    props = _ref3.props,
+    state = _ref3.state;
+  return function () {
+    return props.type === constants.PROGRESS_TYPE.CIRCLE || props.type === constants.PROGRESS_TYPE.DASHBOARD ? parseInt(50 - parseFloat(state.relativeStrokeWidth) / 2, 10) : 0;
+  };
+};
+export var computedTrackPath = function computedTrackPath(_ref4) {
+  var constants = _ref4.constants,
+    props = _ref4.props,
+    state = _ref4.state;
+  return function () {
+    var radiusValue = state.radius;
+    var isDashboardType = props.type === constants.PROGRESS_TYPE.DASHBOARD;
+    return "\n    M 50 50\n    m 0 ".concat(isDashboardType ? '' : '-').concat(radiusValue, "\n    a ").concat(radiusValue, " ").concat(radiusValue, " 0 1 1 0 ").concat(isDashboardType ? '-' : '').concat(radiusValue * 2, "\n    a ").concat(radiusValue, " ").concat(radiusValue, " 0 1 1 0 ").concat(isDashboardType ? '' : '-').concat(radiusValue * 2, "\n    ");
+  };
+};
+export var computedPerimeter = function computedPerimeter(_ref5) {
+  var state = _ref5.state;
+  return function () {
+    return 2 * Math.PI * state.radius;
+  };
+};
+export var computedRate = function computedRate(_ref6) {
+  var constants = _ref6.constants,
+    props = _ref6.props;
+  return function () {
+    return props.type === constants.PROGRESS_TYPE.DASHBOARD ? 0.75 : 1;
+  };
+};
+export var computedStrokeDashoffset = function computedStrokeDashoffset(_ref7) {
+  var state = _ref7.state;
+  return function () {
+    return "".concat(-1 * state.perimeter * (1 - state.rate) / 2, "px");
+  };
+};
+export var computedTrailPathStyle = function computedTrailPathStyle(_ref8) {
+  var state = _ref8.state;
+  return function () {
+    return {
+      strokeDasharray: "".concat(state.perimeter * state.rate, "px, ").concat(state.perimeter, "px"),
+      strokeDashoffset: state.strokeDashoffset
+    };
+  };
+};
+export var computedCirclePathStyle = function computedCirclePathStyle(_ref9) {
+  var props = _ref9.props,
+    state = _ref9.state;
+  return function () {
+    return {
+      strokeDasharray: "".concat(state.perimeter * state.rate * (props.percentage / 100), "px, ").concat(state.perimeter, "px"),
+      strokeDashoffset: state.strokeDashoffset,
+      transition: 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease'
+    };
+  };
+};
+export var computedStroke = function computedStroke(_ref10) {
+  var api = _ref10.api,
+    constants = _ref10.constants,
+    props = _ref10.props;
+  return function () {
+    return props.color && api.getCurrentColor(props.percentage) || constants.STATUS_TO_COLOR[props.status] || constants.STATUS_DEFAULT_COLOR;
+  };
+};
+export var computedIconClass = function computedIconClass(_ref11) {
+  var constants = _ref11.constants,
+    props = _ref11.props;
+  return function () {
+    if (props.status === constants.PROGRESS_STATUS.SUCCESS) {
+      return props.type === constants.PROGRESS_TYPE.LINE ? constants.ICON_SUCCESS : constants.ICON_CIRCLE_SUCCESS;
+    } else if (props.status === constants.PROGRESS_STATUS.WARNING) {
+      return props.type === constants.PROGRESS_TYPE.LINE ? constants.ICON_WARNING : constants.ICON_CIRCLE_WARNING;
+    } else if (props.status === constants.PROGRESS_STATUS.EXCEPTION) {
+      return props.type === constants.PROGRESS_TYPE.LINE ? constants.ICON_EXCEPTION : constants.ICON_CIRCLE_EXCEPTION;
+    }
+  };
+};
+export var computedProgressTextSize = function computedProgressTextSize(_ref12) {
+  var constants = _ref12.constants,
+    props = _ref12.props;
+  return function () {
+    return props.type === constants.PROGRESS_TYPE.LINE ? 12 + props.strokeWidth * 0.4 : props.width * 0.111111 + 2;
+  };
+};
+export var computedContent = function computedContent(_ref13) {
+  var props = _ref13.props;
+  return function () {
+    return typeof props.format === 'function' ? props.format(props.percentage) || '' : "".concat(props.percentage, "%");
+  };
+};
+export var getCurrentColor = function getCurrentColor(_ref14) {
+  var api = _ref14.api,
+    props = _ref14.props;
+  return function (percentage) {
+    if (typeof props.color === 'function') {
+      return props.color(percentage);
+    } else if (typeof props.color === 'string') {
+      return props.color;
+    } else {
+      return api.getLevelColor(percentage);
+    }
+  };
+};
+export var getLevelColor = function getLevelColor(api) {
+  return function (percentage) {
+    var colorArray = api.getColorArray().sort(function (a, b) {
+      return a.percentage - b.percentage;
+    });
+    for (var i = 0; i < colorArray.length; i++) {
+      if (colorArray[i].percentage > percentage) {
+        return colorArray[i].color;
+      }
+    }
+    return colorArray[colorArray.length - 1].color;
+  };
+};
+export var getColorArray = function getColorArray(props) {
+  return function () {
+    var color = props.color;
+    var span = 100 / color.length;
+    return color.map(function (seriesColor, index) {
+      if (typeof seriesColor === 'string') {
+        return {
+          color: seriesColor,
+          progress: (index + 1) * span
+        };
+      }
+      return seriesColor;
+    });
+  };
+};
+export var customBeforeAppearHook = function customBeforeAppearHook(_ref15) {
+  var props = _ref15.props,
+    state = _ref15.state;
+  return function (el) {
+    if (props.type === 'line') {
+      el.style.width = 0;
+    } else if (props.type === 'circle') {
+      el.style.strokeDasharray = state.perimeter * state.content;
+      el.style.strokeDashoffset = state.perimeter;
+    }
+  };
+};
+export var customAppearHook = function customAppearHook(el) {
+  el.style.transition = 'all 0.5s';
+};
+export var customAfterAppearHook = function customAfterAppearHook(_ref16) {
+  var state = _ref16.state,
+    props = _ref16.props;
+  return function (el) {
+    if (props.type === 'line') {
+      el.style.width = state.barStyle.width;
+    } else if (props.type === 'circle') {
+      el.style.strokeDashoffset = 0;
+    }
+  };
+};