@opentiny/vue-renderless 3.1.0-alpha.0

package/detail-page/index.js

@@ -0,0 +1,135 @@
+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; }
+export var computedCancel = function computedCancel(_ref) {
+  var constants = _ref.constants,
+    props = _ref.props,
+    t = _ref.t;
+  return function () {
+    return props.cancelButton || t(constants.CANCEL_BUTTTON_TEXT);
+  };
+};
+export var computedconfirm = function computedconfirm(_ref2) {
+  var constants = _ref2.constants,
+    props = _ref2.props,
+    t = _ref2.t;
+  return function () {
+    return props.saveButton || t(constants.SAVE_BUTTON_TEXT);
+  };
+};
+export var computedSetLocalTips = function computedSetLocalTips(_ref3) {
+  var constants = _ref3.constants,
+    props = _ref3.props,
+    t = _ref3.t;
+  return function () {
+    return props.tips || t(constants.LOCAL_TIPS);
+  };
+};
+export var computedSetValueTitle = function computedSetValueTitle(_ref4) {
+  var constants = _ref4.constants,
+    props = _ref4.props,
+    t = _ref4.t;
+  return function () {
+    return props.valueTitle || t(constants.VALUE_TITLE);
+  };
+};
+export var computedSetLocalTitle = function computedSetLocalTitle(_ref5) {
+  var constants = _ref5.constants,
+    props = _ref5.props,
+    t = _ref5.t;
+  return function () {
+    return props.title || t(constants.LOCAL_TITLE);
+  };
+};
+export var computedSetLabelTitle = function computedSetLabelTitle(_ref6) {
+  var constants = _ref6.constants,
+    props = _ref6.props,
+    t = _ref6.t;
+  return function () {
+    return props.labelTitle || t(constants.LABEL_TITLE);
+  };
+};
+export var computedSetDialogTitle = function computedSetDialogTitle(_ref7) {
+  var constants = _ref7.constants,
+    props = _ref7.props,
+    t = _ref7.t;
+  return function () {
+    return props.dialogTitle || t(constants.DIALOG_TITLE);
+  };
+};
+export var showDialog = function showDialog(state) {
+  return function () {
+    state.isShowDialog = true;
+    state.cloneValue = state.value.map(function (item) {
+      if (item.hidden != undefined) {
+        return _objectSpread({}, item);
+      } else {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          hidden: false
+        });
+      }
+    });
+  };
+};
+export var closeDialog = function closeDialog(state) {
+  return function () {
+    state.isShowDialog = false;
+  };
+};
+export var checkAllHander = function checkAllHander(state) {
+  return function () {
+    return state.cloneValue = state.cloneValue.map(function (item) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        hidden: state.checkAll
+      });
+    });
+  };
+};
+export var checkValueHiddenItem = function checkValueHiddenItem(state) {
+  return function () {
+    var hiddenItemCount = 0;
+    state.cloneValue.forEach(function (item) {
+      if (item.hidden) {
+        ++hiddenItemCount;
+      }
+    });
+    if (hiddenItemCount > 0 && hiddenItemCount < state.cloneValue.length) {
+      state.checkAll = false;
+      return true;
+    } else if (hiddenItemCount === 0) {
+      state.checkAll = false;
+      return false;
+    } else if (hiddenItemCount === state.cloneValue.length) {
+      state.checkAll = true;
+      return false;
+    }
+  };
+};
+export var saveHandler = function saveHandler(_ref8) {
+  var emit = _ref8.emit,
+    state = _ref8.state,
+    alert = _ref8.alert;
+  return function () {
+    if (state.checkAll) {
+      alert({
+        message: state.tips,
+        title: '',
+        status: 'warning'
+      });
+      emit('saveWarning');
+      return;
+    }
+    state.value = state.cloneValue;
+    state.isShowDialog = false;
+  };
+};
+export var watchValue = function watchValue(state) {
+  return function (value) {
+    state.value = value;
+  };
+};
+export var watchTextSplit = function watchTextSplit(state) {
+  return function (value) {
+    state.textSplit = value;
+  };
+};

package/detail-page/vue.js

@@ -0,0 +1,145 @@
+import { watchTextSplit, watchValue, showDialog, saveHandler, checkAllHander, checkValueHiddenItem, closeDialog, computedCancel, computedconfirm, computedSetLocalTips, computedSetValueTitle, computedSetLocalTitle, computedSetLabelTitle, computedSetDialogTitle } from './index';
+export var api = ['state', 'valueChange', 'showDialog', 'closeDialog', 'checkAllHander', 'saveHandler', 'checkValueHiddenItem'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    computed = _ref.computed,
+    api = _ref.api,
+    props = _ref.props;
+  var state = reactive({
+    value: props.modelValue,
+    cloneValue: props.modelValue,
+    textSplit: props.textSplit,
+    isShowDialog: false,
+    checkAll: false,
+    indeterminate: computed(function () {
+      return api.checkValueHiddenItem();
+    }),
+    tips: computed(function () {
+      return api.computedSetLocalTips();
+    }),
+    saveButton: computed(function () {
+      return api.computedconfirm();
+    }),
+    cancelButton: computed(function () {
+      return api.computedCancel();
+    }),
+    title: computed(function () {
+      return api.computedSetLocalTitle();
+    }),
+    labelTitle: computed(function () {
+      return api.computedSetLabelTitle();
+    }),
+    valueTitle: computed(function () {
+      return api.computedSetValueTitle();
+    }),
+    dialogTitle: computed(function () {
+      return api.computedSetDialogTitle();
+    })
+  });
+  return state;
+};
+var initApi = function initApi(_ref2) {
+  var api = _ref2.api,
+    state = _ref2.state,
+    emit = _ref2.emit,
+    alert = _ref2.alert,
+    constants = _ref2.constants,
+    props = _ref2.props,
+    t = _ref2.t;
+  Object.assign(api, {
+    state: state,
+    watchValue: watchValue(state),
+    showDialog: showDialog(state),
+    closeDialog: closeDialog(state),
+    watchTextSplit: watchTextSplit(state),
+    checkAllHander: checkAllHander(state),
+    saveHandler: saveHandler({
+      emit: emit,
+      state: state,
+      alert: alert
+    }),
+    checkValueHiddenItem: checkValueHiddenItem(state),
+    computedCancel: computedCancel({
+      constants: constants,
+      props: props,
+      t: t
+    }),
+    computedconfirm: computedconfirm({
+      constants: constants,
+      props: props,
+      t: t
+    }),
+    computedSetLocalTips: computedSetLocalTips({
+      constants: constants,
+      props: props,
+      t: t
+    }),
+    computedSetValueTitle: computedSetValueTitle({
+      constants: constants,
+      props: props,
+      t: t
+    }),
+    computedSetLocalTitle: computedSetLocalTitle({
+      constants: constants,
+      props: props,
+      t: t
+    }),
+    computedSetLabelTitle: computedSetLabelTitle({
+      constants: constants,
+      props: props,
+      t: t
+    }),
+    computedSetDialogTitle: computedSetDialogTitle({
+      api: api,
+      constants: constants,
+      props: props,
+      t: t
+    })
+  });
+};
+var initWatch = function initWatch(_ref3) {
+  var watch = _ref3.watch,
+    props = _ref3.props,
+    api = _ref3.api;
+  watch(function () {
+    return props.modelValue;
+  }, api.watchValue, {
+    immediate: true
+  });
+  watch(function () {
+    return props.textSplit;
+  }, api.watchTextSplit, {
+    immediate: true
+  });
+};
+export var renderless = function renderless(props, _ref4, _ref5, _ref6) {
+  var computed = _ref4.computed,
+    reactive = _ref4.reactive,
+    watch = _ref4.watch;
+  var t = _ref5.t,
+    emit = _ref5.emit,
+    constants = _ref5.constants;
+  var alert = _ref6.alert;
+  var api = {};
+  var state = initState({
+    reactive: reactive,
+    computed: computed,
+    api: api,
+    props: props
+  });
+  initApi({
+    api: api,
+    state: state,
+    emit: emit,
+    alert: alert,
+    constants: constants,
+    props: props,
+    t: t
+  });
+  initWatch({
+    watch: watch,
+    props: props,
+    api: api
+  });
+  return api;
+};

package/dialog-box/index.js

@@ -0,0 +1,268 @@
+import { on, off, addClass, removeClass } from '@opentiny/vue-renderless/common/deps/dom';
+import { emitEvent } from '@opentiny/vue-renderless/common/event';
+import { getDomNode } from '@opentiny/vue-renderless/common/deps/dom';
+export var computedAnimationName = function computedAnimationName(_ref) {
+  var constants = _ref.constants,
+    props = _ref.props;
+  return function () {
+    return props.rightSlide ? constants.DIALOG_SLIDER_RIGHT : constants.DIALOG_FADE;
+  };
+};
+export var computedAddUnit = function computedAddUnit(value) {
+  return isNaN(Number(value)) ? value : value + 'px';
+};
+export var computedStyle = function computedStyle(_ref2) {
+  var props = _ref2.props,
+    state = _ref2.state;
+  return function () {
+    var style = {};
+    var width = props.width,
+      top = props.top,
+      rightSlide = props.rightSlide;
+    if (top === undefined) {
+      top = rightSlide ? '0' : '15vh';
+    }
+    width = computedAddUnit(width);
+    top = computedAddUnit(top);
+    if (!state.isFull) {
+      style.width = width;
+      style.top = top;
+      if (rightSlide) {
+        style.right = 0;
+        style.height = 'calc(100vh - ' + style.top + ')';
+      } else {
+        style.left = 'calc((100vw - ' + width + ') / 2)';
+      }
+    }
+    return style;
+  };
+};
+export var watchVisible = function watchVisible(_ref3) {
+  var api = _ref3.api,
+    constants = _ref3.constants,
+    emit = _ref3.emit,
+    nextTick = _ref3.nextTick,
+    parent = _ref3.parent,
+    props = _ref3.props,
+    refs = _ref3.refs,
+    state = _ref3.state;
+  return function (val) {
+    var el = parent.$el;
+    if (props.lockScroll) {
+      val ? api.showScrollbar() : api.hideScrollbar();
+    }
+    state.move = false;
+    state.isFull = props.fullscreen;
+    emit('update:visible', val);
+    if (val) {
+      state.closed = false;
+      emit('open');
+      on(el, 'scroll', api.updatePopper);
+      nextTick(function () {
+        refs.dialog.scrollTop = 0;
+      });
+      if (props.appendToBody) {
+        document.body.appendChild(el);
+      }
+    } else {
+      off(el, 'scroll', api.updatePopper);
+      if (!state.closed) {
+        state.emitter.emit('boxclose', props.isFormReset);
+        emit('close');
+      }
+      if (props.destroyOnClose) {
+        nextTick(function () {
+          return state.key++;
+        });
+      }
+      props.rightSlide && (el.querySelector(constants.DIALOG_BOX_CLASS).style.left = '');
+    }
+  };
+};
+export var mounted = function mounted(_ref4) {
+  var api = _ref4.api,
+    parent = _ref4.parent,
+    props = _ref4.props;
+  return function () {
+    if (props.lockScroll && props.visible) {
+      api.showScrollbar();
+    }
+    if (props.visible) {
+      var el = parent.$el;
+      api.open();
+      if (props.appendToBody) {
+        document.body.appendChild(el);
+      }
+    }
+  };
+};
+export var unMounted = function unMounted(_ref5) {
+  var api = _ref5.api,
+    parent = _ref5.parent,
+    props = _ref5.props;
+  return function () {
+    var el = parent.$el;
+    api.hideScrollbar();
+    if (props.appendToBody && el && el.parentNode) {
+      el.parentNode.removeChild(el);
+    }
+  };
+};
+export var handleWrapperClick = function handleWrapperClick(_ref6) {
+  var api = _ref6.api,
+    props = _ref6.props;
+  return function () {
+    if (!props.closeOnClickModal) {
+      return;
+    }
+    api.handleClose('mask');
+  };
+};
+export var handleClose = function handleClose(_ref7) {
+  var api = _ref7.api,
+    constants = _ref7.constants,
+    emit = _ref7.emit,
+    parent = _ref7.parent,
+    props = _ref7.props;
+  return function () {
+    var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'close';
+    if (typeof props.beforeClose === 'function' && props.beforeClose(type) === false) return;
+    var el = parent.$el;
+    props.rightSlide && (el.querySelector(constants.DIALOG_BOX_CLASS).style.left = '');
+    if (!emitEvent(emit, 'before-close', api.hide)) {
+      return;
+    }
+    api.hide();
+  };
+};
+export var hide = function hide(_ref8) {
+  var api = _ref8.api,
+    emit = _ref8.emit,
+    state = _ref8.state,
+    props = _ref8.props;
+  return function (cancel) {
+    if (cancel !== false) {
+      state.emitter.emit('boxclose', props.isFormReset);
+      emit('update:visible', false);
+      emit('change', false);
+      emit('close');
+      state.closed = true;
+      api.hideScrollbar();
+    }
+  };
+};
+export var handleConfirm = function handleConfirm(_ref9) {
+  var api = _ref9.api,
+    emit = _ref9.emit;
+  return function () {
+    emit('confirm');
+    api.handleClose();
+  };
+};
+export var handleCancel = function handleCancel(_ref10) {
+  var api = _ref10.api,
+    emit = _ref10.emit;
+  return function () {
+    emit('cancel');
+    api.handleClose();
+  };
+};
+export var updatePopper = function updatePopper(_ref11) {
+  var api = _ref11.api,
+    constants = _ref11.constants;
+  return function () {
+    api.broadcast(constants.SELECT_DROPDOWN, 'updatePopper');
+    api.broadcast(constants.DROPDOWN_MENU, 'updatePopper');
+  };
+};
+export var afterEnter = function afterEnter(emit) {
+  return function () {
+    emit('opened');
+  };
+};
+export var afterLeave = function afterLeave(emit) {
+  return function () {
+    emit('closed');
+  };
+};
+var findPopoverComponent = function findPopoverComponent(_ref12) {
+  var vm = _ref12.vm,
+    componentList = _ref12.componentList;
+  var children = vm.$children;
+  if (!children || children.length === 0) return;
+  children.forEach(function (child) {
+    var tag = child.$options.componentName;
+    if (tag === 'Select') {
+      componentList.push(child);
+    }
+    findPopoverComponent({
+      vm: child,
+      componentList: componentList
+    });
+  });
+  return componentList;
+};
+var closeAllPopover = function closeAllPopover(parent) {
+  findPopoverComponent({
+    vm: parent,
+    componentList: []
+  }).forEach(function (component) {
+    component.state.visible = false;
+  });
+};
+export var handleDrag = function handleDrag(_ref13) {
+  var parent = _ref13.parent,
+    props = _ref13.props,
+    state = _ref13.state,
+    emit = _ref13.emit;
+  return function (event) {
+    if (!props.draggable) {
+      return;
+    }
+    var modalBoxElem = parent.$el.querySelector('.tiny-dialog-box');
+    event.preventDefault();
+    var demMousemove = document.onmousemove;
+    var demMouseup = document.onmouseup;
+    var disX = event.clientX - modalBoxElem.offsetLeft;
+    var disY = event.clientY - modalBoxElem.offsetTop;
+    var _getDomNode = getDomNode(),
+      visibleHeight = _getDomNode.visibleHeight,
+      visibleWidth = _getDomNode.visibleWidth;
+    document.onmousemove = function (event) {
+      event.preventDefault();
+      if (!state.move) {
+        emit('drag-start', event);
+        closeAllPopover(parent);
+        state.move = true;
+      }
+      var offsetWidth = modalBoxElem.offsetWidth;
+      var offsetHeight = modalBoxElem.offsetHeight;
+      var maxX = visibleWidth - offsetWidth;
+      var maxY = visibleHeight - offsetHeight;
+      var left = event.clientX - disX;
+      var top = event.clientY - disY;
+      left = left < 0 ? 0 : left > maxX ? maxX : left;
+      top = top < 0 ? 0 : top > maxY ? maxY : top;
+      modalBoxElem.style.left = "".concat(left, "px");
+      modalBoxElem.style.top = "".concat(top, "px");
+      state.emitter.emit('boxdrag');
+      emit('drag-move', event);
+    };
+    document.onmouseup = function () {
+      document.onmousemove = demMousemove;
+      document.onmouseup = demMouseup;
+      state.move = false;
+      props.draggable && emit('drag-end', event);
+    };
+  };
+};
+export var showScrollbar = function showScrollbar(lockScrollClass) {
+  return function () {
+    addClass(document.body, lockScrollClass);
+  };
+};
+export var hideScrollbar = function hideScrollbar(lockScrollClass) {
+  return function () {
+    removeClass(document.body, lockScrollClass);
+  };
+};