@opentiny/vue-renderless 3.1.0-alpha.0

package/time-spinner/vue.js

@@ -0,0 +1,122 @@
+import { getArrowHourList, getArrowMinuteList, bindScrollEvent, typeItemHeight, scrollBarHeight, amPm, scrollDown, adjustSpinners, adjustSpinner, adjustCurrentSpinner, handleScroll, getArrowSecondList, increase, decrease, modifyDateField, handleClick, emitSelectRange } from './index';
+import { getRangeHours, getRangeMinutes } from '@opentiny/vue-renderless/common/deps/date-util';
+export var api = ['state', 'emitSelectRange', 'adjustCurrentSpinner', 'handleClick', 'decrease', 'increase', 'amPm', 'adjustSpinners'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    computed = _ref.computed,
+    props = _ref.props,
+    api = _ref.api;
+  var state = reactive({
+    selectableRange: [],
+    currentScrollbar: null,
+    hours: computed(function () {
+      return props.date.getHours();
+    }),
+    minutes: computed(function () {
+      return props.date.getMinutes();
+    }),
+    seconds: computed(function () {
+      return props.date.getSeconds();
+    }),
+    hoursList: computed(function () {
+      return getRangeHours(state.selectableRange);
+    }),
+    minutesList: computed(function () {
+      return getRangeMinutes(state.selectableRange, state.hours);
+    }),
+    arrowHourList: computed(function () {
+      return api.getArrowHourList();
+    }),
+    arrowMinuteList: computed(function () {
+      return api.getArrowMinuteList();
+    }),
+    arrowSecondList: computed(function () {
+      return api.getArrowSecondList();
+    }),
+    animationName: ''
+  });
+  return state;
+};
+export var renderless = function renderless(props, _ref2, _ref3) {
+  var computed = _ref2.computed,
+    onMounted = _ref2.onMounted,
+    reactive = _ref2.reactive,
+    watch = _ref2.watch,
+    nextTick = _ref2.nextTick;
+  var emit = _ref3.emit,
+    refs = _ref3.refs,
+    constants = _ref3.constants;
+  var api = {};
+  var state = initState({
+    reactive: reactive,
+    computed: computed,
+    props: props,
+    api: api
+  });
+  onMounted(function () {
+    !props.arrowControl && api.bindScrollEvent();
+  });
+  Object.assign(api, {
+    state: state,
+    amPm: amPm(props),
+    typeItemHeight: typeItemHeight({
+      refs: refs
+    }),
+    scrollBarHeight: scrollBarHeight(refs),
+    getArrowHourList: getArrowHourList(state),
+    getArrowSecondList: getArrowSecondList(state),
+    getArrowMinuteList: getArrowMinuteList(state),
+    emitSelectRange: emitSelectRange({
+      emit: emit,
+      state: state
+    }),
+    modifyDateField: modifyDateField({
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    bindScrollEvent: bindScrollEvent({
+      api: api,
+      refs: refs
+    }),
+    adjustSpinners: adjustSpinners({
+      api: api,
+      state: state
+    }),
+    adjustSpinner: adjustSpinner({
+      api: api,
+      props: props,
+      refs: refs
+    }),
+    increase: increase(api),
+    decrease: decrease(api),
+    handleClick: handleClick(api),
+    scrollDown: scrollDown({
+      api: api,
+      state: state
+    }),
+    handleScroll: handleScroll({
+      api: api,
+      refs: refs
+    }),
+    adjustCurrentSpinner: adjustCurrentSpinner({
+      api: api,
+      state: state
+    })
+  });
+  watch(function () {
+    return props.date;
+  }, function () {
+    nextTick(api.adjustSpinners);
+  }, {
+    immediate: true
+  });
+  watch(function () {
+    return state.hoursList;
+  }, function () {
+    state.animationName = constants.ANIMATIONNAME;
+  }, {
+    immediate: true
+  });
+  return api;
+};

package/toggle-menu/index.js

@@ -0,0 +1,104 @@
+import { xss } from '@opentiny/vue-renderless/common/xss.js';
+export var filterNode = function filterNode(props) {
+  return function (value, data) {
+    var node = data[props.props.label || 'label'] || '';
+    return node.indexOf(value) !== -1;
+  };
+};
+export var searchNodeText = function searchNodeText(_ref) {
+  var state = _ref.state,
+    refs = _ref.refs,
+    nextTick = _ref.nextTick;
+  return function () {
+    nextTick(function () {
+      return refs.tree.filter(state.filterText);
+    });
+  };
+};
+export var hideNodeText = function hideNodeText(state) {
+  return function () {
+    if (state.toggleIcon && state.showNode) {
+      state.toggleIcon = false;
+      state.showNode = false;
+    } else {
+      state.toggleIcon = true;
+      state.showNode = true;
+    }
+  };
+};
+export var initData = function initData(_ref2) {
+  var state = _ref2.state,
+    props = _ref2.props,
+    service = _ref2.service,
+    api = _ref2.api;
+  return function () {
+    if (props.data) {
+      state.datas = props.data;
+      return;
+    }
+    if (typeof service.getMenuDataSync === 'function') {
+      var menuData = service.getMenuDataSync();
+      state.datas = api.setMenuKey({
+        newData: [],
+        menuData: menuData
+      });
+    }
+  };
+};
+export var computedPlaceholder = function computedPlaceholder(_ref3) {
+  var constants = _ref3.constants,
+    props = _ref3.props,
+    t = _ref3.t;
+  return function () {
+    return props.placeholder || t(constants.LOCALE_PLACEHOLDER);
+  };
+};
+export var nodeClick = function nodeClick(emit) {
+  return function (nodeData, node) {
+    emit('node-click', nodeData, node);
+  };
+};
+export var nodeExpand = function nodeExpand(emit) {
+  return function (nodeData, node, instance) {
+    emit('node-expand', nodeData, node, instance);
+  };
+};
+export var nodeDragStart = function nodeDragStart(emit) {
+  return function (node, event) {
+    emit('node-drag-start', node, event);
+  };
+};
+export var nodeCollapse = function nodeCollapse(emit) {
+  return function (nodeData, node) {
+    emit('node-collapse', nodeData, node);
+  };
+};
+export var nodeDragEnter = function nodeDragEnter(emit) {
+  return function (dragNode, dropNode, event) {
+    emit('node-drag-enter', dragNode, dropNode, event);
+  };
+};
+export var nodeDragOver = function nodeDragOver(emit) {
+  return function (dragNode, dropNode, event) {
+    emit('node-drag-over', dragNode, dropNode, event);
+  };
+};
+export var nodeDragLeave = function nodeDragLeave(emit) {
+  return function (dragNode, dropNode, event) {
+    emit('node-drag-leave', dragNode, dropNode, event);
+  };
+};
+export var nodeDragEnd = function nodeDragEnd(emit) {
+  return function (dragNode, dropNode, dropType, event) {
+    emit('node-drag-end', dragNode, dropNode, dropType, event);
+  };
+};
+export var nodeDrop = function nodeDrop(emit) {
+  return function (dragNode, dropNode, dropType, event) {
+    emit('node-drop', dragNode, dropNode, dropType, event);
+  };
+};
+export var clickA = function clickA(href) {
+  href = xss.filterUrl(href);
+  return href && (location.href = href);
+};

package/toggle-menu/vue.js

@@ -0,0 +1,74 @@
+import { initData, computedPlaceholder, hideNodeText, filterNode, searchNodeText, nodeClick, nodeExpand, nodeCollapse, nodeDragEnd, nodeDragEnter, nodeDragLeave, nodeDragOver, nodeDragStart, nodeDrop, clickA } from './index';
+import { setMenuKey } from '@opentiny/vue-renderless/tree-menu';
+export var api = ['state', 'setMenuKey', 'initData', 'hideNodeText', 'filterNode', 'searchNodeText', 'nodeClick', 'nodeExpand', 'nodeCollapse', 'nodeDragEnd', 'nodeDragEnter', 'nodeDragLeave', 'nodeDragOver', 'nodeDragStart', 'nodeDrop', 'clickA'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var reactive = _ref.reactive,
+    watch = _ref.watch,
+    computed = _ref.computed,
+    onMounted = _ref.onMounted;
+  var t = _ref2.t,
+    service = _ref2.service,
+    nextTick = _ref2.nextTick,
+    constants = _ref2.constants,
+    emit = _ref2.emit,
+    refs = _ref2.refs;
+  var api = {};
+  var state = reactive({
+    datas: [],
+    toggleIcon: true,
+    showNode: true,
+    filterText: '',
+    placeholder: computed(function () {
+      return api.computedPlaceholder();
+    })
+  });
+  service = service || {
+    base: {}
+  };
+  service = {
+    getMenuDataSync: props.getMenuDataSync || service.base.getMenuDataSync
+  };
+  Object.assign(api, {
+    state: state,
+    clickA: clickA,
+    nodeDrop: nodeDrop(emit),
+    filterNode: filterNode(props),
+    nodeClick: nodeClick(emit),
+    nodeExpand: nodeExpand(emit),
+    nodeDragEnd: nodeDragEnd(emit),
+    hideNodeText: hideNodeText(state),
+    nodeDragOver: nodeDragOver(emit),
+    nodeCollapse: nodeCollapse(emit),
+    nodeDragStart: nodeDragStart(emit),
+    nodeDragLeave: nodeDragLeave(emit),
+    nodeDragEnter: nodeDragEnter(emit),
+    searchNodeText: searchNodeText({
+      state: state,
+      refs: refs,
+      nextTick: nextTick
+    }),
+    computedPlaceholder: computedPlaceholder({
+      constants: constants,
+      props: props,
+      t: t
+    }),
+    setMenuKey: setMenuKey(api),
+    initData: initData({
+      state: state,
+      props: props,
+      service: service,
+      api: api
+    })
+  });
+  watch(function () {
+    return state.filterText;
+  }, function (value) {
+    if (props.automaticFiltering) {
+      nextTick(function () {
+        return refs.tree.filter(value);
+      });
+    }
+  });
+  onMounted(api.initData);
+  return api;
+};

package/tooltip/index.js

@@ -0,0 +1,171 @@
+import debounce from '@opentiny/vue-renderless/common/deps/debounce';
+import { on, off, addClass, removeClass } from '@opentiny/vue-renderless/common/deps/dom';
+export var show = function show(api) {
+  return function () {
+    api.setExpectedState(true);
+    api.handleShowPopper();
+  };
+};
+export var hide = function hide(api) {
+  return function () {
+    api.setExpectedState(false);
+    api.debounceClose();
+  };
+};
+export var handleFocus = function handleFocus(_ref) {
+  var api = _ref.api,
+    state = _ref.state;
+  return function () {
+    state.focusing = true;
+    api.show();
+  };
+};
+export var handleBlur = function handleBlur(_ref2) {
+  var api = _ref2.api,
+    state = _ref2.state;
+  return function () {
+    state.focusing = false;
+    api.hide();
+  };
+};
+export var removeFocusing = function removeFocusing(state) {
+  return function () {
+    state.focusing = false;
+  };
+};
+export var handleShowPopper = function handleShowPopper(_ref3) {
+  var props = _ref3.props,
+    state = _ref3.state;
+  return function () {
+    if (!state.expectedState || props.manual) {
+      return;
+    }
+    clearTimeout(state.timeout);
+    state.timeout = setTimeout(function () {
+      state.showPopper = true;
+    }, props.openDelay);
+    if (props.hideAfter > 0) {
+      state.timeoutPending = setTimeout(function () {
+        state.showPopper = false;
+      }, props.hideAfter);
+    }
+  };
+};
+export var handleClosePopper = function handleClosePopper(_ref4) {
+  var api = _ref4.api,
+    props = _ref4.props,
+    state = _ref4.state;
+  return function () {
+    if (props.enterable && state.expectedState || props.manual) {
+      return;
+    }
+    clearTimeout(state.timeout);
+    if (state.timeoutPending) {
+      clearTimeout(state.timeoutPending);
+    }
+    state.showPopper = false;
+    if (props.disabled) {
+      api.doDestroy();
+    }
+  };
+};
+export var setExpectedState = function setExpectedState(_ref5) {
+  var api = _ref5.api,
+    state = _ref5.state;
+  return function (value) {
+    if (state.expectedState === false) {
+      clearTimeout(api.timeoutPending);
+    }
+    state.expectedState = value;
+  };
+};
+export var destroyed = function destroyed(_ref6) {
+  var state = _ref6.state,
+    api = _ref6.api;
+  return function () {
+    var reference = state.referenceElm;
+    state.showPopper = false;
+    if (reference && reference.nodeType === 1) {
+      off(reference, 'mouseenter', api.show);
+      off(reference, 'mouseleave', api.hide);
+      off(reference, 'focus', api.focusHandler);
+      off(reference, 'blur', api.handleBlur);
+      off(reference, 'click', api.removeFocusing);
+    }
+  };
+};
+export var debounceClose = function debounceClose(_ref7) {
+  var api = _ref7.api,
+    props = _ref7.props;
+  return debounce(props.closeDelay, function () {
+    api.handleClosePopper();
+  });
+};
+export var watchFocusing = function watchFocusing(state) {
+  return function (value) {
+    if (value) {
+      addClass(state.referenceElm, 'focusing');
+    } else {
+      removeClass(state.referenceElm, 'focusing');
+    }
+  };
+};
+export var focusHandler = function focusHandler(_ref8) {
+  var slots = _ref8.slots,
+    api = _ref8.api;
+  return function () {
+    if (!slots["default"] || !slots["default"]().length) {
+      api.handleFocus();
+      return;
+    }
+    var instance = slots["default"]()[0];
+    instance = instance.elm || instance.el;
+    if (instance && instance.focus) {
+      instance.focus();
+    } else {
+      api.handleFocus();
+    }
+  };
+};
+export var bindEvent = function bindEvent(_ref9) {
+  var api = _ref9.api,
+    state = _ref9.state,
+    vm = _ref9.vm;
+  return function (reference) {
+    var referenceElm = null;
+    if (vm.$el.nodeType === 8) {
+      referenceElm = reference;
+    } else if (vm.$el.nodeType === 1) {
+      referenceElm = vm.$el;
+    }
+    if (!referenceElm || referenceElm.nodeType === 8 || state.referenceElm) {
+      return;
+    }
+    state.referenceElm = referenceElm;
+    referenceElm.setAttribute('aria-describedby', state.tooltipId);
+    referenceElm.setAttribute('tabindex', state.tabindex);
+    on(referenceElm, 'mouseenter', api.show);
+    on(referenceElm, 'mouseleave', api.hide);
+    on(referenceElm, 'focus', api.focusHandler);
+    on(referenceElm, 'blur', api.handleBlur);
+    on(referenceElm, 'click', api.removeFocusing);
+  };
+};
+export var bindPopper = function bindPopper(_ref10) {
+  var vm = _ref10.vm,
+    refs = _ref10.refs,
+    nextTick = _ref10.nextTick;
+  return function (el) {
+    nextTick(function () {
+      return vm.bindEvent(el);
+    });
+    if (vm.popperVM) {
+      refs['popper'] || (refs['popper'] = vm.popperVM.$el);
+      nextTick(function () {
+        if (vm.modelValue) {
+          vm.updatePopper();
+        }
+      });
+    }
+  };
+};

package/tooltip/vue.js

@@ -0,0 +1,133 @@
+import { bindEvent, show, hide, handleFocus, handleBlur, removeFocusing, handleShowPopper, handleClosePopper, setExpectedState, destroyed, debounceClose, watchFocusing, bindPopper, focusHandler } from './index';
+import userPopper from '@opentiny/vue-renderless/common/deps/vue-popper';
+import { guid } from '@opentiny/vue-renderless/common/string';
+export var api = ['state', 'bindEvent', 'hide', 'show', 'doDestroy', 'handleFocus', 'setExpectedState', 'debounceClose', 'handleShowPopper', 'handleClosePopper', 'setExpectedState', 'updatePopper', 'focusHandler'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    showPopper = _ref.showPopper,
+    popperElm = _ref.popperElm,
+    referenceElm = _ref.referenceElm,
+    props = _ref.props;
+  return reactive({
+    showPopper: showPopper,
+    popperElm: popperElm,
+    referenceElm: referenceElm,
+    timeout: null,
+    focusing: false,
+    expectedState: undefined,
+    mounted: false,
+    tooltipId: guid('tiny-tooltip-', 4),
+    tabindex: props.tabindex
+  });
+};
+export var renderless = function renderless(props, _ref2, _ref3) {
+  var watch = _ref2.watch,
+    toRefs = _ref2.toRefs,
+    reactive = _ref2.reactive,
+    onBeforeUnmount = _ref2.onBeforeUnmount,
+    onDeactivated = _ref2.onDeactivated,
+    onMounted = _ref2.onMounted,
+    onUnmounted = _ref2.onUnmounted;
+  var vm = _ref3.vm,
+    emit = _ref3.emit,
+    refs = _ref3.refs,
+    slots = _ref3.slots,
+    nextTick = _ref3.nextTick,
+    parent = _ref3.parent;
+  var api = {};
+  var popperParam = {
+    emit: emit,
+    props: props,
+    nextTick: nextTick,
+    toRefs: toRefs,
+    reactive: reactive,
+    parent: parent,
+    refs: refs
+  };
+  Object.assign(popperParam, {
+    slots: slots,
+    onBeforeUnmount: onBeforeUnmount,
+    onDeactivated: onDeactivated,
+    watch: watch
+  });
+  var _userPopper = userPopper(popperParam),
+    showPopper = _userPopper.showPopper,
+    updatePopper = _userPopper.updatePopper,
+    popperElm = _userPopper.popperElm,
+    referenceElm = _userPopper.referenceElm,
+    doDestroy = _userPopper.doDestroy;
+  var state = initState({
+    reactive: reactive,
+    showPopper: showPopper,
+    popperElm: popperElm,
+    referenceElm: referenceElm,
+    props: props
+  });
+  Object.assign(api, {
+    state: state,
+    doDestroy: doDestroy,
+    updatePopper: updatePopper,
+    show: show(api),
+    hide: hide(api),
+    destroyed: destroyed({
+      state: state,
+      api: api
+    }),
+    bindPopper: bindPopper({
+      vm: vm,
+      refs: refs,
+      state: state,
+      nextTick: nextTick
+    }),
+    watchFocusing: watchFocusing(state),
+    removeFocusing: removeFocusing(state),
+    handleBlur: handleBlur({
+      api: api,
+      state: state
+    }),
+    handleFocus: handleFocus({
+      api: api,
+      state: state
+    }),
+    debounceClose: debounceClose({
+      api: api,
+      props: props
+    }),
+    setExpectedState: setExpectedState({
+      api: api,
+      state: state
+    }),
+    handleShowPopper: handleShowPopper({
+      props: props,
+      state: state
+    }),
+    handleClosePopper: handleClosePopper({
+      api: api,
+      props: props,
+      state: state
+    }),
+    bindEvent: bindEvent({
+      api: api,
+      state: state,
+      vm: vm
+    }),
+    focusHandler: focusHandler({
+      slots: slots,
+      api: api
+    })
+  });
+  watch(function () {
+    return state.focusing;
+  }, api.watchFocusing);
+  watch(function () {
+    return props.modelValue;
+  }, function (val) {
+    return nextTick(function () {
+      return props.manual && (state.showPopper = val);
+    });
+  });
+  onMounted(api.bindPopper);
+  vm.$on('tooltip-update', api.bindPopper);
+  onUnmounted(api.destroyed);
+  return api;
+};

package/top-box/index.js

@@ -0,0 +1,81 @@
+import { KEY_CODE } from '@opentiny/vue-renderless/common';
+import { on, off } from '@opentiny/vue-renderless/common/deps/dom';
+import PopupManager from '@opentiny/vue-renderless/common/deps/popup-manager';
+export var handleAfterLeave = function handleAfterLeave(api) {
+  return function () {
+    return api.destroy();
+  };
+};
+export var destroy = function destroy(parent) {
+  return function () {
+    parent.$el.parentNode.removeChild(parent.$el);
+  };
+};
+export var bindKeyDown = function bindKeyDown(_ref) {
+  var api = _ref.api,
+    state = _ref.state;
+  return function (event) {
+    if (event.keyCode === KEY_CODE.Escape) {
+      !state.closed && api.close();
+    }
+  };
+};
+export var bindEvent = function bindEvent(_ref2) {
+  var api = _ref2.api;
+  return function () {
+    return on(document, 'keydown', api.bindKeyDown);
+  };
+};
+export var unBindEvent = function unBindEvent(_ref3) {
+  var api = _ref3.api;
+  return function () {
+    return off(document, 'keydown', api.bindKeyDown);
+  };
+};
+export var startTimer = function startTimer(_ref4) {
+  var api = _ref4.api,
+    state = _ref4.state;
+  return function () {
+    if (state.duration > 0) {
+      state.timer = setTimeout(function () {
+        !state.closed && api.close();
+      }, state.duration);
+    }
+  };
+};
+export var clearTimer = function clearTimer(state) {
+  return function () {
+    return clearTimeout(state.timer);
+  };
+};
+export var close = function close(state) {
+  return function () {
+    state.closed = true;
+    typeof state.onClose === 'function' && state.onClose(state);
+  };
+};
+export var watchClosed = function watchClosed(_ref5) {
+  var state = _ref5.state;
+  return function (value) {
+    return value && (state.visible = false);
+  };
+};
+export var getZindex = function getZindex() {
+  return PopupManager.nextZIndex();
+};
+export var getTypeClass = function getTypeClass(_ref6) {
+  var constants = _ref6.constants,
+    state = _ref6.state;
+  return function () {
+    var typeClass = constants[(state.type || '').toUpperCase()];
+    return state.type && !state.iconClass && typeClass ? "".concat(typeClass) : '';
+  };
+};
+export var getOffsetStyle = function getOffsetStyle(_ref7) {
+  var state = _ref7.state;
+  return function () {
+    return {
+      top: "".concat(state.verticalOffset, "px")
+    };
+  };
+};