@opentiny/vue-renderless 3.1.0-alpha.0

package/dropdown-item/index.js

@@ -0,0 +1,155 @@
+import { on, off } from '@opentiny/vue-renderless/common/deps/dom';
+export var getTitle = function getTitle(props) {
+  return function () {
+    if (props.title) {
+      return props.title;
+    }
+    var match = props.options.filter(function (option) {
+      return option.value === props.modelValue;
+    });
+    return match.length ? match[0].text : '';
+  };
+};
+export var bindScroll = function bindScroll(_ref) {
+  var api = _ref.api,
+    parent = _ref.parent;
+  return function (value) {
+    var action = value ? on : off;
+    action(parent.state.scroller, 'scroll', api.onScroll, true);
+  };
+};
+export var toggle = function toggle(_ref2) {
+  var parent = _ref2.parent,
+    props = _ref2.props,
+    state = _ref2.state;
+  return function (show) {
+    if (show === state.showPopup) {
+      return;
+    }
+    state.transition = !props.options.immediate;
+    state.showPopup = show;
+    if (show) {
+      parent.updateOffset();
+      state.showWrapper = true;
+    }
+  };
+};
+export var onScroll = function onScroll(parent) {
+  return function () {
+    return parent.updateOffset();
+  };
+};
+export var clickWrapper = function clickWrapper(parent) {
+  return function (event) {
+    return parent.$el && event.stopPropagation();
+  };
+};
+export var clickItem = function clickItem(_ref3) {
+  var emit = _ref3.emit,
+    props = _ref3.props,
+    state = _ref3.state;
+  return function (value) {
+    state.showPopup = false;
+    if (value !== props.modelValue) {
+      emit('update:modelValue', value);
+      emit('change', value);
+    }
+  };
+};
+export var getItemStyle = function getItemStyle(_ref4) {
+  var parent = _ref4.parent,
+    state = _ref4.state;
+  return function () {
+    return {
+      zIndex: parent.zIndex,
+      top: parent.direction === 'down' ? state.offset + 'px' : '',
+      bottom: parent.direction !== 'down' ? state.offset + 'px' : ''
+    };
+  };
+};
+export var getOptionStyle = function getOptionStyle(state) {
+  return function (tag, tags) {
+    if (tags.indexOf(tag.value) > -1) {
+      return {
+        color: state.activeColor ? state.activeColor : '#f36f64',
+        border: "1px solid ".concat(state.activeColor ? state.activeColor : '#f36f64')
+      };
+    } else {
+      return {
+        color: '#333'
+      };
+    }
+  };
+};
+export var closed = function closed(_ref5) {
+  var emit = _ref5.emit,
+    state = _ref5.state;
+  return function () {
+    state.showWrapper = false;
+    emit('closed');
+  };
+};
+export var open = function open(emit) {
+  return function () {
+    return emit('open');
+  };
+};
+export var opened = function opened(emit) {
+  return function () {
+    return emit('opened');
+  };
+};
+export var close = function close(emit) {
+  return function () {
+    return emit('close');
+  };
+};
+export var tagClick = function tagClick(_ref6) {
+  var emit = _ref6.emit,
+    props = _ref6.props;
+  return function (key, tag, event) {
+    event.preventDefault();
+    event.stopPropagation();
+    var filterValue = props.modelValue.slice();
+    var value = filterValue[key];
+    var index = value.indexOf(tag.value);
+    if (index === -1) {
+      value.push(tag.value);
+    } else {
+      value.splice(index, 1);
+    }
+    filterValue[key] = value;
+    emit('update:modelValue', filterValue);
+  };
+};
+export var confirm = function confirm(_ref7) {
+  var emit = _ref7.emit,
+    props = _ref7.props,
+    state = _ref7.state;
+  return function () {
+    state.showPopup = false;
+    emit('confirm', props.modelValue);
+  };
+};
+export var reset = function reset(_ref8) {
+  var emit = _ref8.emit,
+    props = _ref8.props;
+  return function () {
+    var len = props.modelValue.length;
+    var array = [];
+    for (var i = 0; i < len; i++) {
+      array.push([]);
+    }
+    emit('update:modelValue', array);
+    emit('reset', array);
+  };
+};
+export var clickOutside = function clickOutside(parent) {
+  return function () {
+    if (parent.closeOnClickOutside && parent.closeOnClickOverlay) {
+      parent.state.children.forEach(function (item) {
+        item.toggle(false);
+      });
+    }
+  };
+};

package/dropdown-item/vue.js

@@ -0,0 +1,124 @@
+import { tagClick, confirm, clickOutside, getOptionStyle, reset, getTitle, bindScroll, toggle, onScroll, open, opened, close, closed, clickItem, clickWrapper, getItemStyle } from './index';
+export var api = ['state', 'confirm', 'clickOutside', 'getOptionStyle', 'reset', 'tagClick', 'clickItem', 'clickWrapper', 'toggle', 'open', 'opened', 'close', 'closed'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    computed = _ref.computed,
+    api = _ref.api,
+    props = _ref.props,
+    parent = _ref.parent;
+  var state = reactive({
+    sort: props.modelValue,
+    transition: true,
+    getTitle: false,
+    showWrapper: false,
+    showPopup: false,
+    duration: parent.duration,
+    overlay: computed(function () {
+      return parent.overlay;
+    }),
+    offset: computed(function () {
+      return parent.state.offset;
+    }),
+    direction: computed(function () {
+      return parent.direction;
+    }),
+    displayTitle: computed(function () {
+      return api.getTitle();
+    }),
+    itemStyle: computed(function () {
+      return api.getItemStyle();
+    }),
+    activeColor: computed(function () {
+      return parent.activeColor;
+    }),
+    closeOnClickOverlay: computed(function () {
+      return parent.closeOnClickOverlay;
+    })
+  });
+  return state;
+};
+var initApi = function initApi(_ref2) {
+  var api = _ref2.api,
+    state = _ref2.state,
+    emit = _ref2.emit,
+    props = _ref2.props,
+    parent = _ref2.parent;
+  Object.assign(api, {
+    state: state,
+    open: open(emit),
+    opened: opened(emit),
+    close: close(emit),
+    getTitle: getTitle(props),
+    onScroll: onScroll(parent),
+    reset: reset({
+      emit: emit,
+      props: props
+    }),
+    closed: closed({
+      emit: emit,
+      state: state
+    }),
+    clickWrapper: clickWrapper(parent),
+    clickOutside: clickOutside(parent),
+    tagClick: tagClick({
+      emit: emit,
+      props: props
+    }),
+    getOptionStyle: getOptionStyle(state),
+    toggle: toggle({
+      parent: parent,
+      props: props,
+      state: state
+    }),
+    clickItem: clickItem({
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    getItemStyle: getItemStyle({
+      parent: parent,
+      state: state
+    }),
+    bindScroll: bindScroll({
+      api: api,
+      parent: parent
+    }),
+    confirm: confirm({
+      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;
+  var parent = _ref4.parent,
+    emit = _ref4.emit,
+    vm = _ref4.vm;
+  var api = {};
+  parent = parent.$parent;
+  var state = initState({
+    reactive: reactive,
+    computed: computed,
+    api: api,
+    props: props,
+    parent: parent
+  });
+  initApi({
+    api: api,
+    state: state,
+    emit: emit,
+    props: props,
+    parent: parent
+  });
+  watch(function () {
+    return state.showPopup;
+  }, api.bindScroll);
+  onMounted(function () {
+    parent.state.children.push(vm);
+  });
+  return api;
+};

package/dropdown-menu/index.js

@@ -0,0 +1,148 @@
+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 userPopper from '@opentiny/vue-renderless/common/deps/vue-popper';
+export var toggleItem = function toggleItem(state) {
+  return function (active, item) {
+    if (item.disabled) {
+      return;
+    }
+    if (item.type == 'sort') {
+      if (!item.modelValue || item.modelValue === 'desc') {
+        item.state.sort = 'asc';
+        item.$emit('update:modelValue', 'asc');
+        item.$emit('click', 'asc');
+      } else {
+        item.state.sort = 'desc';
+        item.$emit('update:modelValue', 'desc');
+        item.$emit('click', 'desc');
+      }
+    } else {
+      var singleton = state.children.length === 1 && item.state.showPopup;
+      state.children.forEach(function (item, index) {
+        if (index === active && !singleton) {
+          item.toggle(true);
+        } else if (item.state.showPopup) {
+          item.toggle(false, {
+            immediate: true
+          });
+        }
+      });
+    }
+  };
+};
+export var updateOffset = function updateOffset(_ref) {
+  var props = _ref.props,
+    state = _ref.state,
+    refs = _ref.refs;
+  return function () {
+    if (!refs.menu) {
+      return;
+    }
+    var rect = refs.menu.getBoundingClientRect();
+    if (props.direction === 'down') {
+      state.offset = rect.bottom;
+    } else {
+      state.offset = window.innerHeight - rect.top;
+    }
+  };
+};
+export var clickOutside = function clickOutside(_ref2) {
+  var props = _ref2.props,
+    state = _ref2.state;
+  return function () {
+    if (props.closeOnClickOutside && props.closeOnClickOverlay) {
+      state.children.forEach(function (item) {
+        item.type !== 'filter' && item.toggle(false);
+      });
+    }
+  };
+};
+export var getScroller = function getScroller(el, root) {
+  var overflowScrollReg = /scroll|auto/i;
+  var node = el;
+  var getComputedStyle = window.getComputedStyle;
+  while (node && node.tagName !== 'HTML' && node.nodeType === 1 && node !== root) {
+    var _getComputedStyle = getComputedStyle(node),
+      overflowY = _getComputedStyle.overflowY;
+    if (overflowScrollReg.test(overflowY)) {
+      if (node.tagName !== 'BODY') {
+        return node;
+      }
+      var _getComputedStyle2 = getComputedStyle(node.parentNode),
+        htmlOverflowY = _getComputedStyle2.overflowY;
+      if (overflowScrollReg.test(htmlOverflowY)) {
+        return node;
+      }
+    }
+    node = node.parentNode;
+  }
+  return root;
+};
+export var useVuePopper = function useVuePopper(_ref3) {
+  var api = _ref3.api,
+    props = _ref3.props,
+    hooks = _ref3.hooks,
+    instance = _ref3.instance,
+    state = _ref3.state;
+  var inject = hooks.inject,
+    nextTick = hooks.nextTick,
+    onBeforeUnmount = hooks.onBeforeUnmount,
+    onDeactivated = hooks.onDeactivated,
+    onMounted = hooks.onMounted,
+    reactive = hooks.reactive,
+    toRefs = hooks.toRefs,
+    watch = hooks.watch;
+  var emit = instance.emit,
+    refs = instance.refs,
+    slots = instance.slots,
+    vm = instance.vm,
+    parent = instance.parent;
+  var dropdown = inject('dropdown');
+  var popper = userPopper({
+    emit: emit,
+    nextTick: nextTick,
+    onBeforeUnmount: onBeforeUnmount,
+    onDeactivated: onDeactivated,
+    props: _objectSpread({
+      popperOptions: {
+        boundariesPadding: 0,
+        gpuAcceleration: false
+      },
+      offset: 0,
+      boundariesPadding: 5
+    }, props),
+    reactive: reactive,
+    refs: refs,
+    slots: slots,
+    toRefs: toRefs,
+    watch: watch
+  });
+  onMounted(function () {
+    dropdown.popperElm = popper.popperElm.value = vm.$el;
+    popper.referenceElm.value = dropdown.$el;
+    dropdown.initDomOperation();
+  });
+  onBeforeUnmount(function () {
+    popper.destroyPopper('remove');
+    popper.popperElm = null;
+    popper.referenceElm = null;
+  });
+  api.doDestroy = popper.doDestroy;
+  state.size = dropdown.size;
+  state.showPopper = popper.showPopper.value;
+  parent.$on('updatePopper', function () {
+    if (state.showPopper) {
+      popper.updatePopper();
+    }
+  });
+  parent.$on('visible', function (value) {
+    state.showPopper = value;
+    popper.showPopper.value = value;
+  });
+  watch(function () {
+    return props.placement;
+  }, function (value) {
+    popper.currentPlacement.value = value;
+  });
+};

package/dropdown-menu/vue.js

@@ -0,0 +1,44 @@
+import { toggleItem, updateOffset, clickOutside, getScroller, useVuePopper } from './index';
+export var api = ['state', 'toggleItem', 'updateOffset', 'clickOutside', 'doDestroy'];
+export var renderless = function renderless(props, hooks, instance) {
+  var api = {};
+  var reactive = hooks.reactive;
+  var refs = instance.refs,
+    nextTick = instance.nextTick,
+    mode = instance.mode;
+  var state = reactive({
+    offset: 0,
+    scroller: null,
+    children: [],
+    size: '',
+    showPopper: false
+  });
+  if (mode === 'mobile') {
+    nextTick(function () {
+      state.scroller = getScroller(refs.menu);
+    });
+  } else {
+    useVuePopper({
+      api: api,
+      hooks: hooks,
+      props: props,
+      instance: instance,
+      state: state
+    });
+  }
+  Object.assign(api, {
+    state: state,
+    toggleItem: toggleItem(state),
+    clickOutside: clickOutside({
+      props: props,
+      refs: refs,
+      state: state
+    }),
+    updateOffset: updateOffset({
+      props: props,
+      state: state,
+      refs: refs
+    })
+  });
+  return api;
+};

package/exception/index.js

@@ -0,0 +1,13 @@
+export var create = function create(emit) {
+  return function () {
+    return emit('click');
+  };
+};
+export var getMessage = function getMessage(_ref) {
+  var props = _ref.props,
+    t = _ref.t;
+  return function () {
+    var types = ['build', 'weaknet', 'pcview', 'busy', 'noperm'];
+    return props.message || t("ui.exception.".concat(~types.indexOf(props.type) ? props.type : 'nodata'));
+  };
+};

package/exception/vue.js

@@ -0,0 +1,25 @@
+import { create, getMessage } from './index';
+export var api = ['state', 'create'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    reactive = _ref.reactive;
+  var t = _ref2.t,
+    emit = _ref2.emit;
+  var api = {
+    create: create(emit),
+    getMessage: getMessage({
+      props: props,
+      t: t
+    })
+  };
+  var state = reactive({
+    message: computed(function () {
+      return api.getMessage({
+        props: props,
+        t: t
+      });
+    })
+  });
+  api.state = state;
+  return api;
+};

package/fall-menu/index.js

@@ -0,0 +1,121 @@
+import { REFRESH_INTERVAL } 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';
+import { xss } from '@opentiny/vue-renderless/common/xss.js';
+export var arrowClick = function arrowClick(state) {
+  return function (opt) {
+    state.pager += opt;
+  };
+};
+export var overContent = function overContent(state) {
+  return function (on) {
+    state.isActive = on;
+  };
+};
+export var mouseover = function mouseover(_ref) {
+  var fall = _ref.fall,
+    props = _ref.props,
+    state = _ref.state;
+  return function (index) {
+    var popupBox = fall.value;
+    state.activeNode = index;
+    var level2Array = props.data[index].children || [];
+    level2Array.forEach(function (level2) {
+      var level3Array = level2.children || [];
+      level3Array.forEach(function (level3) {
+        level3.url = xss.filterUrl(level3.url);
+      });
+    });
+    state.level2data = level2Array;
+    if (popupBox && state.level2data.length > 0) {
+      popupBox.style.zIndex = PopupManager.nextZIndex();
+      state.isActive = true;
+    }
+  };
+};
+export var mouseout = function mouseout(state) {
+  return function () {
+    state.isActive = false;
+    state.activeNode = null;
+  };
+};
+export var computePx = function computePx(_ref2) {
+  var props = _ref2.props,
+    refs = _ref2.refs,
+    state = _ref2.state;
+  return function () {
+    var list = refs.list;
+    var width = list.parentElement.clientWidth;
+    var arr = list.querySelectorAll('li');
+    var set = {
+      data: [],
+      offset: [],
+      index: []
+    };
+    var liWidth = [];
+    var innerwidth = 0;
+    var start = 0;
+    for (var i = 0, len = arr.length; i < len; i++) {
+      innerwidth += arr[i].clientWidth;
+      liWidth.push(arr[i].clientWidth);
+      if (innerwidth > width || i === len - 1) {
+        set.data.push(props.data.slice(start, i));
+        set.offset.push("-".concat(arr[start].offsetLeft, "px"));
+        set.index.push(i);
+        innerwidth = arr[i].clientWidth;
+        start = i;
+      }
+    }
+    var pagers = set.index.length;
+    var lastRange = set.data.length === 1 ? liWidth : liWidth.slice(set.index[pagers - 2], set.index[pagers]);
+    if (lastRange.reduce(function (a, b) {
+      return a + b;
+    }) > width) {
+      set.data.push(props.data[start]);
+      set.offset.push("-".concat(arr[start].offsetLeft, "px"));
+    }
+    set.size = set.data.length;
+    state.pagerData = set;
+  };
+};
+export var reRender = function reRender(_ref3) {
+  var api = _ref3.api,
+    state = _ref3.state,
+    timeout = _ref3.timeout;
+  return function () {
+    timeout && clearTimeout(timeout);
+    timeout = setTimeout(function () {
+      api.computePx();
+    }, REFRESH_INTERVAL);
+    state.pager = 1;
+  };
+};
+export var mounted = function mounted(_ref4) {
+  var api = _ref4.api;
+  return function () {
+    api.computePx();
+    on(window, 'resize', api.reRender);
+  };
+};
+export var beforeDestroy = function beforeDestroy(api) {
+  return function () {
+    return off(window, 'resize', api.reRender);
+  };
+};
+export var computeLeft = function computeLeft(_ref5) {
+  var state = _ref5.state;
+  return function () {
+    return state.pagerData.offset[state.pager - 1];
+  };
+};
+export var computeData = function computeData(_ref6) {
+  var props = _ref6.props;
+  return function () {
+    if (Array.isArray(props.data) && props.data.length) {
+      props.data.forEach(function (level1) {
+        level1.url = xss.filterUrl(level1.url);
+      });
+    }
+    return props.data;
+  };
+};