@opentiny/vue-renderless 3.1.0-alpha.0

package/dialog-box/vue.js

@@ -0,0 +1,226 @@
+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 { afterEnter, afterLeave, computedAnimationName, computedStyle, handleConfirm, handleCancel, watchVisible, hide, handleClose, handleWrapperClick, mounted, unMounted, updatePopper, handleDrag, showScrollbar, hideScrollbar } from './index';
+import usePopup from '@opentiny/vue-renderless/common/deps/vue-popup';
+export var api = ['afterEnter', 'afterLeave', 'handleClose', 'handleWrapperClick', 'handleCancel', 'handleConfirm', 'handleDrag', 'state'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    computed = _ref.computed,
+    api = _ref.api,
+    emitter = _ref.emitter,
+    props = _ref.props;
+  var state = reactive({
+    emitter: emitter(),
+    key: 0,
+    x: null,
+    y: null,
+    top: null,
+    left: null,
+    max: null,
+    move: false,
+    closed: false,
+    dragable: null,
+    isFull: props.fullscreen,
+    style: computed(function () {
+      return api.computedStyle();
+    }),
+    animationName: computed(function () {
+      return api.computedAnimationName();
+    })
+  });
+  return state;
+};
+var mergeState = function mergeState(_ref2) {
+  var reactive = _ref2.reactive,
+    state = _ref2.state,
+    toRefs = _ref2.toRefs,
+    usePopups = _ref2.usePopups;
+  var bodyPaddingRight = usePopups.bodyPaddingRight,
+    computedBodyPaddingRight = usePopups.computedBodyPaddingRight,
+    opened = usePopups.opened,
+    rendered = usePopups.rendered,
+    withoutHiddenClass = usePopups.withoutHiddenClass;
+  var merge = reactive(_objectSpread({
+    bodyPaddingRight: bodyPaddingRight,
+    computedBodyPaddingRight: computedBodyPaddingRight,
+    opened: opened,
+    rendered: rendered,
+    withoutHiddenClass: withoutHiddenClass
+  }, toRefs(state)));
+  return merge;
+};
+var initApi = function initApi(_ref3) {
+  var emit = _ref3.emit,
+    api = _ref3.api,
+    state = _ref3.state,
+    parent = _ref3.parent,
+    props = _ref3.props,
+    lockScrollClass = _ref3.lockScrollClass,
+    constants = _ref3.constants,
+    usePopups = _ref3.usePopups,
+    nextTick = _ref3.nextTick,
+    refs = _ref3.refs;
+  var open = usePopups.open,
+    close = usePopups.close,
+    doOpen = usePopups.doOpen,
+    doClose = usePopups.doClose;
+  var doAfterOpen = usePopups.doAfterOpen,
+    doAfterClose = usePopups.doAfterClose,
+    restoreBodyStyle = usePopups.restoreBodyStyle;
+  Object.assign(api, {
+    state: state,
+    open: open,
+    close: close,
+    doOpen: doOpen,
+    doClose: doClose,
+    doAfterOpen: doAfterOpen,
+    doAfterClose: doAfterClose,
+    restoreBodyStyle: restoreBodyStyle,
+    handleCancel: handleCancel({
+      api: api,
+      emit: emit
+    }),
+    handleConfirm: handleConfirm({
+      api: api,
+      emit: emit
+    }),
+    updatePopper: updatePopper({
+      api: api,
+      constants: constants
+    }),
+    handleWrapperClick: handleWrapperClick({
+      api: api,
+      props: props
+    }),
+    hide: hide({
+      api: api,
+      emit: emit,
+      state: state,
+      props: props
+    }),
+    handleClose: handleClose({
+      api: api,
+      constants: constants,
+      emit: emit,
+      parent: parent,
+      props: props
+    }),
+    watchVisible: watchVisible({
+      api: api,
+      constants: constants,
+      emit: emit,
+      nextTick: nextTick,
+      parent: parent,
+      props: props,
+      refs: refs,
+      state: state
+    }),
+    computedStyle: computedStyle({
+      state: state,
+      props: props
+    }),
+    mounted: mounted({
+      api: api,
+      parent: parent,
+      props: props
+    }),
+    unMounted: unMounted({
+      api: api,
+      parent: parent,
+      props: props
+    }),
+    computedAnimationName: computedAnimationName({
+      constants: constants,
+      props: props
+    }),
+    afterEnter: afterEnter(emit),
+    afterLeave: afterLeave(emit),
+    hideScrollbar: hideScrollbar(lockScrollClass),
+    showScrollbar: showScrollbar(lockScrollClass),
+    handleDrag: handleDrag({
+      parent: parent,
+      props: props,
+      state: state,
+      emit: emit
+    })
+  });
+};
+var initWatch = function initWatch(_ref4) {
+  var watch = _ref4.watch,
+    state = _ref4.state,
+    api = _ref4.api,
+    props = _ref4.props;
+  watch(function () {
+    return props.visible;
+  }, api.watchVisible);
+  watch(function () {
+    return props.fullscreen;
+  }, function (value) {
+    state.isFull = value;
+  });
+};
+export var renderless = function renderless(props, _ref5, _ref6) {
+  var computed = _ref5.computed,
+    onBeforeUnmount = _ref5.onBeforeUnmount,
+    onMounted = _ref5.onMounted,
+    toRefs = _ref5.toRefs,
+    reactive = _ref5.reactive,
+    watch = _ref5.watch;
+  var vm = _ref6.vm,
+    emitter = _ref6.emitter,
+    parent = _ref6.parent,
+    emit = _ref6.emit,
+    constants = _ref6.constants,
+    nextTick = _ref6.nextTick,
+    refs = _ref6.refs,
+    mode = _ref6.mode;
+  var api = {};
+  var lockScrollClass = constants.scrollLockClass(mode);
+  var state = initState({
+    reactive: reactive,
+    computed: computed,
+    api: api,
+    emitter: emitter,
+    props: props
+  });
+  var usePopups = usePopup({
+    api: api,
+    nextTick: nextTick,
+    onBeforeUnmount: onBeforeUnmount,
+    onMounted: onMounted,
+    props: props,
+    reactive: reactive,
+    state: state,
+    toRefs: toRefs,
+    vm: vm,
+    watch: watch
+  });
+  initApi({
+    api: api,
+    state: state,
+    parent: parent,
+    props: props,
+    emit: emit,
+    constants: constants,
+    usePopups: usePopups,
+    lockScrollClass: lockScrollClass,
+    nextTick: nextTick,
+    refs: refs
+  });
+  state = mergeState({
+    reactive: reactive,
+    state: state,
+    toRefs: toRefs,
+    usePopups: usePopups
+  });
+  initWatch({
+    watch: watch,
+    state: state,
+    api: api,
+    props: props
+  });
+  onMounted(api.mounted);
+  onBeforeUnmount(api.unMounted);
+  return api;
+};

package/drop-times/index.js

@@ -0,0 +1,23 @@
+import { format } from '@opentiny/vue-renderless/common/date';
+export var init = function init(_ref) {
+  var state = _ref.state,
+    props = _ref.props;
+  return function () {
+    var list = [],
+      value;
+    for (var minutes = props.start; minutes <= props.end; minutes += props.step) {
+      value = format(new Date(0, 0, 0, 0, minutes, 0), 'hh:mm');
+      list.push({
+        label: value,
+        value: value
+      });
+    }
+    state.options = list;
+  };
+};
+export var change = function change(emit) {
+  return function (value) {
+    emit('update:modelValue', value);
+    emit('change', value);
+  };
+};

package/drop-times/vue.js

@@ -0,0 +1,28 @@
+import { init, change } from './index';
+export var api = ['state', 'change'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var onMounted = _ref.onMounted,
+    reactive = _ref.reactive,
+    watch = _ref.watch;
+  var emit = _ref2.emit;
+  var state = reactive({
+    options: [],
+    selectedValue: props.modelValue
+  });
+  watch(function () {
+    return props.modelValue;
+  }, function (newValue) {
+    return state.selectedValue = newValue;
+  });
+  var api = {
+    state: state,
+    change: change(emit),
+    init: init({
+      state: state,
+      props: props,
+      emit: emit
+    })
+  };
+  onMounted(api.init);
+  return api;
+};

package/dropdown/index.js

@@ -0,0 +1,259 @@
+import { KEY_CODE } from '@opentiny/vue-renderless/common';
+import { addClass, removeClass, on, off } from '@opentiny/vue-renderless/common/deps/dom';
+export var watchVisible = function watchVisible(_ref) {
+  var broadcast = _ref.broadcast,
+    emit = _ref.emit;
+  return function (value) {
+    broadcast('TinyDropdownMenu', 'visible', value);
+    setTimeout(function () {
+      emit('visibles-change', value);
+    }, 0);
+  };
+};
+export var watchFocusing = function watchFocusing(_ref2) {
+  var parent = _ref2.parent;
+  return function (value) {
+    var selfDefine = parent.$el.querySelector('.tiny-dropdown-selfdefine');
+    if (selfDefine) {
+      value ? addClass(selfDefine, 'focusing') : removeClass(selfDefine, 'focusing');
+    }
+  };
+};
+export var show = function show(_ref3) {
+  var props = _ref3.props,
+    state = _ref3.state;
+  return function () {
+    if (props.disabled) {
+      return;
+    }
+    clearTimeout(state.timeout);
+    state.timeout = setTimeout(function () {
+      state.visible = true;
+    }, props.trigger === 'click' ? 0 : props.showTimeout);
+  };
+};
+export var hide = function hide(_ref4) {
+  var api = _ref4.api,
+    props = _ref4.props,
+    state = _ref4.state;
+  return function () {
+    if (props.disabled) {
+      return;
+    }
+    api.removeTabindex();
+    if (props.tabindex >= 0) {
+      api.resetTabindex(state.triggerElm);
+    }
+    clearTimeout(state.timeout);
+    state.timeout = setTimeout(function () {
+      state.visible = false;
+    }, props.trigger === 'click' ? 0 : props.hideTimeout);
+  };
+};
+export var handleClick = function handleClick(_ref5) {
+  var api = _ref5.api,
+    props = _ref5.props,
+    state = _ref5.state;
+  return function () {
+    if (props.disabled) {
+      return;
+    }
+    state.visible ? api.hide() : api.show();
+  };
+};
+export var handleTriggerKeyDown = function handleTriggerKeyDown(_ref6) {
+  var api = _ref6.api,
+    state = _ref6.state;
+  return function (event) {
+    var keyCode = event.keyCode;
+    if (~[KEY_CODE.ArrowUp, KEY_CODE.ArrowDown].indexOf(keyCode)) {
+      api.removeTabindex();
+      api.resetTabindex(state.menuItems[0]);
+      state.menuItems[0].focus();
+      event.preventDefault();
+      event.stopPropagation();
+    } else if (keyCode === KEY_CODE.Enter) {
+      api.handleClick();
+    } else if (~[KEY_CODE.Tab, KEY_CODE.Escape].indexOf(keyCode)) {
+      api.hide();
+    }
+  };
+};
+export var handleItemKeyDown = function handleItemKeyDown(_ref7) {
+  var api = _ref7.api,
+    props = _ref7.props,
+    state = _ref7.state;
+  return function (event) {
+    var keyCode = event.keyCode;
+    var target = event.target;
+    var currentIndex = state.menuItemsArray.indexOf(target);
+    var max = state.menuItemsArray.length - 1;
+    var nextIndex;
+    if (~[KEY_CODE.ArrowUp, KEY_CODE.ArrowDown].indexOf(keyCode)) {
+      if (keyCode === KEY_CODE.ArrowUp) {
+        nextIndex = currentIndex !== 0 ? currentIndex - 1 : 0;
+      } else {
+        nextIndex = currentIndex < max ? currentIndex + 1 : max;
+      }
+      api.removeTabindex();
+      api.resetTabindex(state.menuItems[nextIndex]);
+      state.menuItems[nextIndex].focus();
+      event.preventDefault();
+      event.stopPropagation();
+    } else if (keyCode === KEY_CODE.Enter) {
+      api.triggerElmFocus();
+      target.click();
+      if (props.hideOnClick) {
+        state.visible = false;
+      }
+    } else if (~[KEY_CODE.Tab, KEY_CODE.Escape].indexOf(keyCode)) {
+      api.hide();
+      api.triggerElmFocus();
+    }
+  };
+};
+export var resetTabindex = function resetTabindex(_ref8) {
+  var api = _ref8.api;
+  return function (el) {
+    api.removeTabindex();
+    el.setAttribute('tabindex', '0');
+  };
+};
+export var removeTabindex = function removeTabindex(_ref9) {
+  var state = _ref9.state;
+  return function () {
+    state.triggerElm.setAttribute('tabindex', '-1');
+    state.menuItemsArray.forEach(function (item) {
+      item.setAttribute('tabindex', '-1');
+    });
+  };
+};
+export var initAria = function initAria(_ref10) {
+  var state = _ref10.state,
+    props = _ref10.props;
+  return function () {
+    state.dropdownElm.setAttribute('id', state.listId);
+    state.triggerElm.setAttribute('aria-haspopup', 'list');
+    state.triggerElm.setAttribute('aria-controls', state.listId);
+    if (!props.splitButton) {
+      state.triggerElm.setAttribute('role', 'button');
+      state.triggerElm.setAttribute('tabindex', props.tabindex);
+      addClass(state.triggerElm, 'tiny-dropdown-selfdefine');
+    }
+  };
+};
+var toggleFocus = function toggleFocus(_ref11) {
+  var state = _ref11.state,
+    value = _ref11.value;
+  return function () {
+    state.focusing = value;
+  };
+};
+export var initEvent = function initEvent(_ref12) {
+  var api = _ref12.api,
+    props = _ref12.props,
+    state = _ref12.state,
+    vm = _ref12.vm;
+  return function () {
+    state.triggerElm = props.splitButton ? vm.$refs.trigger.$el : vm.$refs.trigger;
+    on(state.triggerElm, 'keydown', api.handleTriggerKeyDown);
+    state.dropdownElm.addEventListener('keydown', api.handleItemKeyDown, true);
+    if (!props.splitButton) {
+      on(state.triggerElm, 'focus', toggleFocus({
+        state: state,
+        value: true
+      }));
+      on(state.triggerElm, 'blur', toggleFocus({
+        state: state,
+        value: false
+      }));
+      on(state.triggerElm, 'click', toggleFocus({
+        state: state,
+        value: false
+      }));
+    }
+    if (props.trigger === 'hover') {
+      on(state.triggerElm, 'mouseenter', api.show);
+      on(state.triggerElm, 'mouseleave', api.hide);
+      on(state.dropdownElm, 'mouseenter', api.show);
+      on(state.dropdownElm, 'mouseleave', api.hide);
+    } else if (props.trigger === 'click') {
+      on(state.triggerElm, 'click', api.handleClick);
+    }
+  };
+};
+export var handleMenuItemClick = function handleMenuItemClick(_ref13) {
+  var props = _ref13.props,
+    state = _ref13.state,
+    emit = _ref13.emit;
+  return function (itemData, instance) {
+    if (props.hideOnClick) {
+      state.visible = false;
+    }
+    emit('item-click', itemData, instance);
+  };
+};
+export var triggerElmFocus = function triggerElmFocus(_ref14) {
+  var state = _ref14.state;
+  return function () {
+    state.triggerElm.focus && state.triggerElm.focus();
+  };
+};
+export var initDomOperation = function initDomOperation(_ref15) {
+  var api = _ref15.api,
+    state = _ref15.state,
+    vm = _ref15.vm;
+  return function () {
+    state.dropdownElm = vm.popperElm;
+    state.menuItems = state.dropdownElm.querySelectorAll('[tabindex="-1"]');
+    state.menuItemsArray = [].slice.call(state.menuItems);
+    api.initEvent();
+    api.initAria();
+  };
+};
+export var handleMainButtonClick = function handleMainButtonClick(_ref16) {
+  var api = _ref16.api,
+    emit = _ref16.emit;
+  return function (event) {
+    emit('button-click', event);
+    api.hide();
+  };
+};
+export var mounted = function mounted(_ref17) {
+  var api = _ref17.api,
+    vm = _ref17.vm;
+  return function () {
+    vm.$on('menu-item-click', api.handleMenuItemClick);
+  };
+};
+export var beforeDistory = function beforeDistory(_ref18) {
+  var api = _ref18.api,
+    state = _ref18.state;
+  return function () {
+    if (state.triggerElm) {
+      off(state.triggerElm, 'keydown', api.handleTriggerKeyDown);
+      off(state.triggerElm, 'focus', toggleFocus({
+        state: state,
+        value: true
+      }));
+      off(state.triggerElm, 'blur', toggleFocus({
+        state: state,
+        value: false
+      }));
+      off(state.triggerElm, 'click', toggleFocus({
+        state: state,
+        value: false
+      }));
+      off(state.triggerElm, 'mouseenter', api.show);
+      off(state.triggerElm, 'mouseleave', api.hide);
+      off(state.triggerElm, 'click', api.handleClick);
+      state.triggerElm = null;
+    }
+    if (state.dropdownElm) {
+      state.dropdownElm.removeEventListener('keydown', api.handleItemKeyDown, true);
+      off(state.dropdownElm, 'mouseenter', api.show);
+      off(state.dropdownElm, 'mouseleave', api.hide);
+      state.dropdownElm = null;
+    }
+  };
+};

package/dropdown/vue.js

@@ -0,0 +1,107 @@
+import { guid } from '@opentiny/vue-renderless/common/string';
+import { watchVisible, watchFocusing, show, hide, handleClick, handleTriggerKeyDown, handleItemKeyDown, resetTabindex, removeTabindex, initAria, initEvent, handleMenuItemClick, handleMainButtonClick, triggerElmFocus, initDomOperation, mounted, beforeDistory } from './index';
+export var api = ['state', 'handleMainButtonClick', 'hide', 'initDomOperation', 'handleClick'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var reactive = _ref.reactive,
+    watch = _ref.watch,
+    provide = _ref.provide,
+    onMounted = _ref.onMounted;
+  var emit = _ref2.emit,
+    parent = _ref2.parent,
+    broadcast = _ref2.broadcast,
+    vm = _ref2.vm;
+  var api = {};
+  var state = reactive({
+    visible: false,
+    timeout: null,
+    focusing: false,
+    menuItems: null,
+    menuItemsArray: null,
+    triggerElm: null,
+    dropdownElm: null,
+    listId: "dropdown-menu-".concat(guid())
+  });
+  provide('dropdown', vm);
+  Object.assign(api, {
+    state: state,
+    watchVisible: watchVisible({
+      broadcast: broadcast,
+      emit: emit
+    }),
+    watchFocusing: watchFocusing({
+      parent: parent
+    }),
+    show: show({
+      props: props,
+      state: state
+    }),
+    hide: hide({
+      api: api,
+      props: props,
+      state: state
+    }),
+    mounted: mounted({
+      api: api,
+      vm: vm
+    }),
+    handleClick: handleClick({
+      api: api,
+      props: props,
+      state: state
+    }),
+    handleTriggerKeyDown: handleTriggerKeyDown({
+      api: api,
+      state: state
+    }),
+    handleItemKeyDown: handleItemKeyDown({
+      api: api,
+      props: props,
+      state: state
+    }),
+    resetTabindex: resetTabindex({
+      api: api
+    }),
+    removeTabindex: removeTabindex({
+      state: state
+    }),
+    initAria: initAria({
+      state: state,
+      props: props
+    }),
+    initEvent: initEvent({
+      api: api,
+      props: props,
+      state: state,
+      vm: vm
+    }),
+    handleMenuItemClick: handleMenuItemClick({
+      props: props,
+      state: state,
+      emit: emit
+    }),
+    handleMainButtonClick: handleMainButtonClick({
+      api: api,
+      emit: emit
+    }),
+    triggerElmFocus: triggerElmFocus({
+      state: state
+    }),
+    initDomOperation: initDomOperation({
+      api: api,
+      state: state,
+      vm: vm
+    }),
+    beforeDistory: beforeDistory({
+      api: api,
+      state: state
+    })
+  });
+  watch(function () {
+    return state.visible;
+  }, api.watchVisible);
+  watch(function () {
+    return state.focusing;
+  }, api.watchFocusing);
+  onMounted(api.mounted);
+  return api;
+};