@opentiny/vue-renderless 3.6.0 → 3.6.1-alpha.2

package/dropdown/index.js

@@ -1,262 +1,191 @@
-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,
-    nextTick = _ref.nextTick;
-  return function (value) {
-    broadcast('TinyDropdownMenu', 'visible', value);
-    nextTick(function () {
-      return emit('visible-change', value);
-    });
-  };
-};
-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 () {
+import "../chunk-PKUHTIDK.js";
+import { KEY_CODE } from "@opentiny/vue-renderless/common";
+import { addClass, removeClass, on, off } from "@opentiny/vue-renderless/common/deps/dom";
+const watchVisible = ({ broadcast, emit, nextTick }) => (value) => {
+  broadcast("TinyDropdownMenu", "visible", value);
+  nextTick(() => emit("visible-change", value));
+};
+const watchFocusing = ({ parent }) => (value) => {
+  const selfDefine = parent.$el.querySelector(".tiny-dropdown-selfdefine");
+  if (selfDefine) {
+    value ? addClass(selfDefine, "focusing") : removeClass(selfDefine, "focusing");
+  }
+};
+const show = ({ props, state }) => () => {
+  if (props.disabled) {
+    return;
+  }
+  clearTimeout(state.timeout);
+  state.timeout = setTimeout(
+    () => {
       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 () {
+    },
+    props.trigger === "click" ? 0 : props.showTimeout
+  );
+};
+const hide = ({ api, props, state }) => () => {
+  if (props.disabled) {
+    return;
+  }
+  api.removeTabindex();
+  if (props.tabindex >= 0) {
+    api.resetTabindex(state.triggerElm);
+  }
+  clearTimeout(state.timeout);
+  state.timeout = setTimeout(
+    () => {
       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,
-    emit = _ref5.emit;
-  return function () {
-    if (props.disabled) {
-      return;
-    }
-    emit('handle-click', state.visible);
-    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) {
+    },
+    props.trigger === "click" ? 0 : props.hideTimeout
+  );
+};
+const handleClick = ({ api, props, state, emit }) => () => {
+  if (props.disabled) {
+    return;
+  }
+  emit("handle-click", state.visible);
+  state.visible ? api.hide() : api.show();
+};
+const handleTriggerKeyDown = ({ api, state }) => (event) => {
+  const keyCode = event.keyCode;
+  if (~[KEY_CODE.ArrowUp, KEY_CODE.ArrowDown].indexOf(keyCode)) {
     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);
+    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();
+  }
+};
+const handleItemKeyDown = ({ api, props, state }) => (event) => {
+  const keyCode = event.keyCode;
+  const target = event.target;
+  const currentIndex = state.menuItemsArray.indexOf(target);
+  const max = state.menuItemsArray.length - 1;
+  let 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;
     }
-  };
-};
-export var handleMenuItemClick = function handleMenuItemClick(_ref13) {
-  var props = _ref13.props,
-    state = _ref13.state,
-    emit = _ref13.emit;
-  return function (itemData, instance) {
+    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;
     }
-    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);
+  } else if (~[KEY_CODE.Tab, KEY_CODE.Escape].indexOf(keyCode)) {
     api.hide();
-  };
+    api.triggerElmFocus();
+  }
+};
+const resetTabindex = ({ api }) => (el) => {
+  api.removeTabindex();
+  el.setAttribute("tabindex", "0");
+};
+const removeTabindex = ({ state }) => () => {
+  state.triggerElm.setAttribute("tabindex", "-1");
+  state.menuItemsArray.forEach((item) => {
+    item.setAttribute("tabindex", "-1");
+  });
+};
+const initAria = ({ state, props }) => () => {
+  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");
+  }
+};
+const toggleFocus = ({ state, value }) => () => {
+  state.focusing = value;
+};
+const initEvent = ({ api, props, state, vm }) => () => {
+  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, value: true }));
+    on(state.triggerElm, "blur", toggleFocus({ state, value: false }));
+    on(state.triggerElm, "click", toggleFocus({ 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);
+  }
+};
+const handleMenuItemClick = ({ props, state, emit }) => (itemData, instance) => {
+  if (props.hideOnClick) {
+    state.visible = false;
+  }
+  emit("item-click", itemData, instance);
+};
+const triggerElmFocus = ({ state }) => () => {
+  state.triggerElm.focus && state.triggerElm.focus();
+};
+const initDomOperation = ({ api, state, vm }) => () => {
+  state.dropdownElm = vm.popperElm;
+  state.menuItems = state.dropdownElm.querySelectorAll('[tabindex="-1"]');
+  state.menuItemsArray = [].slice.call(state.menuItems);
+  api.initEvent();
+  api.initAria();
+};
+const handleMainButtonClick = ({ api, emit }) => (event) => {
+  emit("button-click", event);
+  api.hide();
+};
+const mounted = ({ api, vm }) => () => {
+  vm.$on("menu-item-click", api.handleMenuItemClick);
+};
+const beforeDistory = ({ api, state }) => () => {
+  if (state.triggerElm) {
+    off(state.triggerElm, "keydown", api.handleTriggerKeyDown);
+    off(state.triggerElm, "focus", toggleFocus({ state, value: true }));
+    off(state.triggerElm, "blur", toggleFocus({ state, value: false }));
+    off(state.triggerElm, "click", toggleFocus({ 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;
+  }
+};
+export {
+  beforeDistory,
+  handleClick,
+  handleItemKeyDown,
+  handleMainButtonClick,
+  handleMenuItemClick,
+  handleTriggerKeyDown,
+  hide,
+  initAria,
+  initDomOperation,
+  initEvent,
+  mounted,
+  removeTabindex,
+  resetTabindex,
+  show,
+  triggerElmFocus,
+  watchFocusing,
+  watchVisible
 };
-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

@@ -1,18 +1,28 @@
-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', 'show', '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,
-    nextTick = _ref2.nextTick;
-  var api = {};
-  var state = reactive({
+import "../chunk-PKUHTIDK.js";
+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";
+const api = ["state", "handleMainButtonClick", "hide", "show", "initDomOperation", "handleClick"];
+const renderless = (props, { reactive, watch, provide, onMounted }, { emit, parent, broadcast, vm, nextTick }) => {
+  const api2 = {};
+  const state = reactive({
     visible: false,
     timeout: null,
     focusing: false,
@@ -20,91 +30,35 @@ export var renderless = function renderless(props, _ref, _ref2) {
     menuItemsArray: null,
     triggerElm: null,
     dropdownElm: null,
-    listId: "dropdown-menu-".concat(guid())
+    listId: `dropdown-menu-${guid()}`
   });
-  provide('dropdown', vm);
-  Object.assign(api, {
-    state: state,
-    watchVisible: watchVisible({
-      broadcast: broadcast,
-      emit: emit,
-      nextTick: nextTick
-    }),
-    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,
-      emit: emit
-    }),
-    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
-    })
+  provide("dropdown", vm);
+  Object.assign(api2, {
+    state,
+    watchVisible: watchVisible({ broadcast, emit, nextTick }),
+    watchFocusing: watchFocusing({ parent }),
+    show: show({ props, state }),
+    hide: hide({ api: api2, props, state }),
+    mounted: mounted({ api: api2, vm }),
+    handleClick: handleClick({ api: api2, props, state, emit }),
+    handleTriggerKeyDown: handleTriggerKeyDown({ api: api2, state }),
+    handleItemKeyDown: handleItemKeyDown({ api: api2, props, state }),
+    resetTabindex: resetTabindex({ api: api2 }),
+    removeTabindex: removeTabindex({ state }),
+    initAria: initAria({ state, props }),
+    initEvent: initEvent({ api: api2, props, state, vm }),
+    handleMenuItemClick: handleMenuItemClick({ props, state, emit }),
+    handleMainButtonClick: handleMainButtonClick({ api: api2, emit }),
+    triggerElmFocus: triggerElmFocus({ state }),
+    initDomOperation: initDomOperation({ api: api2, state, vm }),
+    beforeDistory: beforeDistory({ api: api2, state })
   });
-  watch(function () {
-    return state.visible;
-  }, api.watchVisible);
-  watch(function () {
-    return state.focusing;
-  }, api.watchFocusing);
-  onMounted(api.mounted);
-  return api;
-};
+  watch(() => state.visible, api2.watchVisible);
+  watch(() => state.focusing, api2.watchFocusing);
+  onMounted(api2.mounted);
+  return api2;
+};
+export {
+  api,
+  renderless
+};