@opentiny/vue-renderless 3.1.0-alpha.0

package/checkbox-button/vue.js

@@ -0,0 +1,150 @@
+import { handleChange, computedGetModelGet, computedGetModelSet, computedCheckboxGroup, computedActiveStyle, computedFormItemSize, computedSize, computedIsDisabled, toggleEvent } from './index';
+import { addToStore, computedIsChecked, computedStore, computedIsLimitDisabled } from '@opentiny/vue-renderless/checkbox';
+export var api = ['state', 'handleChange'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    computed = _ref.computed,
+    api = _ref.api;
+  var state = reactive({
+    focus: false,
+    selfModel: false,
+    isLimitExceeded: false,
+    model: computed({
+      get: function get() {
+        return api.computedGetModelGet();
+      },
+      set: function set(value) {
+        return api.computedGetModelSet(value);
+      }
+    }),
+    size: computed(function () {
+      return api.computedSize();
+    }),
+    store: computed(function () {
+      return api.computedStore();
+    }),
+    isChecked: computed(function () {
+      return api.computedIsChecked();
+    }),
+    isDisabled: computed(function () {
+      return api.computedIsDisabled();
+    }),
+    activeStyle: computed(function () {
+      return api.computedActiveStyle();
+    }),
+    checkboxGroup: computed(function () {
+      return api.computedCheckboxGroup();
+    }),
+    isLimitDisabled: computed(function () {
+      return api.computedIsLimitDisabled();
+    })
+  });
+  return state;
+};
+var initApi = function initApi(_ref2) {
+  var api = _ref2.api,
+    state = _ref2.state,
+    props = _ref2.props,
+    formItemSize = _ref2.formItemSize,
+    parent = _ref2.parent,
+    constants = _ref2.constants,
+    emit = _ref2.emit,
+    nextTick = _ref2.nextTick,
+    dispatch = _ref2.dispatch;
+  Object.assign(api, {
+    state: state,
+    addToStore: addToStore({
+      state: state,
+      props: props
+    }),
+    computedStore: computedStore({
+      state: state,
+      props: props
+    }),
+    computedActiveStyle: computedActiveStyle(state),
+    computedFormItemSize: computedFormItemSize(props),
+    computedSize: computedSize({
+      state: state,
+      formItemSize: formItemSize
+    }),
+    computedIsChecked: computedIsChecked({
+      state: state,
+      props: props
+    }),
+    computedIsLimitDisabled: computedIsLimitDisabled(state),
+    computedIsDisabled: computedIsDisabled({
+      state: state,
+      props: props
+    }),
+    computedGetModelGet: computedGetModelGet({
+      state: state,
+      props: props
+    }),
+    computedCheckboxGroup: computedCheckboxGroup({
+      parent: parent,
+      constants: constants
+    }),
+    handleChange: handleChange({
+      state: state,
+      props: props,
+      emit: emit,
+      nextTick: nextTick,
+      dispatch: dispatch,
+      constants: constants
+    }),
+    computedGetModelSet: computedGetModelSet({
+      state: state,
+      props: props,
+      emit: emit,
+      dispatch: dispatch,
+      constants: constants
+    })
+  });
+};
+export var renderless = function renderless(props, _ref3, _ref4) {
+  var computed = _ref3.computed,
+    onMounted = _ref3.onMounted,
+    onBeforeUnmount = _ref3.onBeforeUnmount,
+    reactive = _ref3.reactive;
+  var parent = _ref4.parent,
+    emit = _ref4.emit,
+    dispatch = _ref4.dispatch,
+    constants = _ref4.constants,
+    nextTick = _ref4.nextTick;
+  var api = {};
+  var formItemSize = computed(function () {
+    return api.computedFormItemSize();
+  });
+  var state = initState({
+    reactive: reactive,
+    computed: computed,
+    api: api
+  });
+  initApi({
+    api: api,
+    state: state,
+    props: props,
+    formItemSize: formItemSize,
+    parent: parent,
+    constants: constants,
+    emit: emit,
+    nextTick: nextTick,
+    dispatch: dispatch
+  });
+  onBeforeUnmount(function () {
+    toggleEvent({
+      parent: parent,
+      props: props,
+      type: 'remove'
+    });
+  });
+  onMounted(function () {
+    toggleEvent({
+      parent: parent,
+      props: props,
+      type: 'add'
+    });
+    props.checked && api.addToStore();
+  });
+  return api;
+};

package/checkbox-group/index.js

@@ -0,0 +1,12 @@
+export var computedFormItemSize = function computedFormItemSize(props) {
+  return function () {
+    return (props.formItem || {}).formItemSize;
+  };
+};
+export var computedCheckboxGroupSize = function computedCheckboxGroupSize(_ref) {
+  var props = _ref.props,
+    formItemSize = _ref.formItemSize;
+  return function () {
+    return props.size || formItemSize.value;
+  };
+};

package/checkbox-group/vue.js

@@ -0,0 +1,33 @@
+import { computedFormItemSize, computedCheckboxGroupSize } from './index';
+export var api = ['state'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    reactive = _ref.reactive,
+    watch = _ref.watch;
+  var dispatch = _ref2.dispatch,
+    constants = _ref2.constants;
+  var api = {
+    computedFormItemSize: computedFormItemSize(props)
+  };
+  var formItemSize = computed(function () {
+    return api.computedFormItemSize();
+  });
+  var state = reactive({
+    checkboxGroupSize: computed(function () {
+      return api.computedCheckboxGroupSize();
+    })
+  });
+  Object.assign(api, {
+    state: state,
+    computedCheckboxGroupSize: computedCheckboxGroupSize({
+      props: props,
+      formItemSize: formItemSize
+    })
+  });
+  watch(function () {
+    return props.modelValue;
+  }, function (value) {
+    return dispatch(constants.FORM_ITEM, constants.FORM_CHANGE, [value]);
+  });
+  return api;
+};

package/col/index.js

@@ -0,0 +1,132 @@
+export var setSubitemAttrValue = function setSubitemAttrValue(_ref) {
+  var className = _ref.className,
+    item = _ref.item,
+    value = _ref.value;
+  if (value) {
+    if (typeof value === 'number') {
+      className["col-".concat(item, "-")] = value;
+    } else {
+      if ('span' in value) {
+        className["col-".concat(item, "-")] = value.span;
+      }
+      if ('offset' in value) {
+        className["col-".concat(item, "-offset-")] = value.offset;
+      }
+      if ('push' in value) {
+        className["col-".concat(item, "-push-")] = value.push;
+      }
+      if ('pull' in value) {
+        className["col-".concat(item, "-pull-")] = value.pull;
+      }
+    }
+  }
+};
+export var setGlobalAttrValue = function setGlobalAttrValue(_ref2) {
+  var attr = _ref2.attr,
+    className = _ref2.className,
+    value = _ref2.value;
+  attr = attr ? attr + '-' : '';
+  className["col-xs-".concat(attr)] = value;
+  className["col-sm-".concat(attr)] = value;
+  className["col-md-".concat(attr)] = value;
+  className["col-lg-".concat(attr)] = value;
+  className["col-xl-".concat(attr)] = value;
+};
+export var getClassName = function getClassName(_ref3) {
+  var api = _ref3.api,
+    props = _ref3.props;
+  return function () {
+    var span = props.span;
+    var offset = props.offset;
+    var push = props.move ? props.move : 0;
+    var pull = props.move ? 0 : -props.move;
+    var subitems = {
+      xs: props.xs,
+      sm: props.sm,
+      md: props.md,
+      lg: props.lg,
+      xl: props.xl
+    };
+    var className = {};
+    var result = [];
+    var item = {};
+    if (span) {
+      api.setGlobalAttrValue({
+        attr: '',
+        value: span,
+        className: className
+      });
+    }
+    if (offset) {
+      api.setGlobalAttrValue({
+        attr: 'offset',
+        value: offset,
+        className: className
+      });
+    }
+    if (push) {
+      api.setGlobalAttrValue({
+        attr: 'push',
+        value: push,
+        className: className
+      });
+    }
+    if (pull) {
+      api.setGlobalAttrValue({
+        attr: 'pull',
+        value: pull,
+        className: className
+      });
+    }
+    for (var _i = 0, _Object$keys = Object.keys(subitems); _i < _Object$keys.length; _i++) {
+      item = _Object$keys[_i];
+      api.setSubitemAttrValue({
+        item: item,
+        value: subitems[item],
+        className: className
+      });
+    }
+    for (var _i2 = 0, _Object$keys2 = Object.keys(className); _i2 < _Object$keys2.length; _i2++) {
+      item = _Object$keys2[_i2];
+      result.push(item + className[item]);
+    }
+    return result.join(' ');
+  };
+};
+export var row = function row(pcontext) {
+  return function () {
+    var ROW_NAME = 'Row';
+    var COL_NAME = 'Col';
+    var parent = pcontext.$parent.$parent;
+    var parentName = parent ? parent.$options.componentName : null;
+    var depth = 10;
+    while (parent && parentName !== ROW_NAME && parentName !== COL_NAME && depth--) {
+      parent = parent.$parent;
+      parentName = parent && parent.$options ? parent.$options.componentName : null;
+    }
+    return parentName === ROW_NAME ? parent : null;
+  };
+};
+export var getStyle = function getStyle(_ref4) {
+  var props = _ref4.props,
+    state = _ref4.state;
+  return function () {
+    var parent = state.row;
+    var no = props.no;
+    var styles = [];
+    var gutter = parent ? parent.gutter : null;
+    var noSpace = parent ? parent.noSpace : null;
+    var order = '';
+    if (gutter) {
+      gutter = gutter / 2;
+      styles.push("padding-left:".concat(gutter, "px;padding-right:").concat(gutter, "px;"));
+    } else if (noSpace) {
+      styles.push('padding-left:0;padding-right:0;');
+    }
+    if (parent && parent.flex && parent.order) {
+      order = parent.order === 'asc' ? no : -no;
+      styles.push("order:".concat(order, ";-webkit-order:").concat(order, ";-ms-order:").concat(order, ";-moz-order:").concat(order, ";"));
+    }
+    return styles.join('');
+  };
+};

package/col/vue.js

@@ -0,0 +1,34 @@
+import { setSubitemAttrValue, setGlobalAttrValue, getClassName, getStyle, row } from './index';
+export var api = ['state'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    reactive = _ref.reactive;
+  var parent = _ref2.parent;
+  var api = {};
+  var state = reactive({
+    row: computed(function () {
+      return api.row();
+    }),
+    style: computed(function () {
+      return api.getStyle();
+    }),
+    className: computed(function () {
+      return api.getClassName();
+    })
+  });
+  Object.assign(api, {
+    state: state,
+    row: row(parent),
+    setGlobalAttrValue: setGlobalAttrValue,
+    setSubitemAttrValue: setSubitemAttrValue,
+    getStyle: getStyle({
+      props: props,
+      state: state
+    }),
+    getClassName: getClassName({
+      api: api,
+      props: props
+    })
+  });
+  return api;
+};

package/collapse/index.js

@@ -0,0 +1,45 @@
+export var setActiveNames = function setActiveNames(_ref) {
+  var emit = _ref.emit,
+    props = _ref.props,
+    state = _ref.state;
+  return function (activeNames) {
+    activeNames = [].concat(activeNames);
+    var value = props.accordion ? activeNames[0] : activeNames;
+    state.activeNames = activeNames;
+    emit('update:modelValue', value);
+    emit('change', value);
+  };
+};
+export var handleItemClick = function handleItemClick(_ref2) {
+  var api = _ref2.api,
+    props = _ref2.props,
+    state = _ref2.state;
+  return function (item) {
+    var activeNames = state.activeNames.slice(0);
+    var index = activeNames.indexOf(item.name);
+    var beforeClose = function beforeClose() {
+      var result = props.beforeClose ? props.beforeClose(item, state.activeNames) : true;
+      return new Promise(function (resolve) {
+        if (result && result.then) {
+          result.then(function () {
+            return resolve(true);
+          })["catch"](function () {
+            return resolve(false);
+          });
+        } else {
+          resolve(result);
+        }
+      });
+    };
+    beforeClose().then(function (next) {
+      if (props.accordion) {
+        if (next || !activeNames.length) {
+          api.setActiveNames(activeNames[0] === item.name ? '' : item.name);
+        }
+      } else {
+        index > -1 ? next && activeNames.splice(index, 1) : activeNames.push(item.name);
+        api.setActiveNames(activeNames);
+      }
+    });
+  };
+};

package/collapse/vue.js

@@ -0,0 +1,35 @@
+import { setActiveNames, handleItemClick } from './index';
+export var api = ['state'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var reactive = _ref.reactive,
+    watch = _ref.watch;
+  var parent = _ref2.parent,
+    emit = _ref2.emit,
+    constants = _ref2.constants;
+  var eventName = constants.EVENT_NAME.CollapseItemClick;
+  var state = reactive({
+    activeNames: []
+  });
+  var api = {
+    state: state,
+    setActiveNames: setActiveNames({
+      emit: emit,
+      props: props,
+      state: state
+    })
+  };
+  api.handleItemClick = handleItemClick({
+    api: api,
+    props: props,
+    state: state
+  });
+  watch(function () {
+    return props.modelValue;
+  }, function (value) {
+    state.activeNames = value || value === 0 ? [].concat(value) : [];
+  }, {
+    immediate: true
+  });
+  parent.$on(eventName, api.handleItemClick);
+  return api;
+};

package/collapse-item/index.js

@@ -0,0 +1,38 @@
+export var handleFocus = function handleFocus(_ref) {
+  var state = _ref.state,
+    interval = _ref.interval;
+  return function () {
+    setTimeout(function () {
+      if (!state.isClick) {
+        state.focusing = true;
+      } else {
+        state.isClick = false;
+      }
+    }, interval);
+  };
+};
+export var handleHeaderClick = function handleHeaderClick(_ref2) {
+  var componentName = _ref2.componentName,
+    dispatch = _ref2.dispatch,
+    eventName = _ref2.eventName,
+    props = _ref2.props,
+    parent = _ref2.parent,
+    state = _ref2.state;
+  return function () {
+    if (props.disabled) {
+      return;
+    }
+    dispatch(componentName, eventName, parent);
+    state.focusing = false;
+    state.isClick = true;
+  };
+};
+export var handleEnterClick = function handleEnterClick(_ref3) {
+  var componentName = _ref3.componentName,
+    dispatch = _ref3.dispatch,
+    eventName = _ref3.eventName,
+    parent = _ref3.parent;
+  return function () {
+    return dispatch(componentName, eventName, parent);
+  };
+};

package/collapse-item/vue.js

@@ -0,0 +1,48 @@
+import { handleFocus, handleEnterClick, handleHeaderClick } from './index';
+import { guid } from '@opentiny/vue-renderless/common/string';
+export var api = ['state', 'isActive', 'handleFocus', 'handleEnterClick', 'handleHeaderClick'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    reactive = _ref.reactive;
+  var parent = _ref2.parent,
+    constants = _ref2.constants,
+    dispatch = _ref2.dispatch;
+  var _constants = parent.collapse._constants;
+  var componentName = _constants.COMPONENT_NAME.Collapse;
+  var eventName = _constants.EVENT_NAME.CollapseItemClick;
+  var state = reactive({
+    id: guid(),
+    isClick: false,
+    focusing: false,
+    contentHeight: 0,
+    contentWrapStyle: {
+      height: 'auto',
+      display: 'block'
+    },
+    isActive: computed(function () {
+      return parent.collapse.state.activeNames.indexOf(props.name) > -1;
+    })
+  });
+  var api = {
+    state: state,
+    handleFocus: handleFocus({
+      state: state,
+      interval: constants.INTERVAL
+    }),
+    handleEnterClick: handleEnterClick({
+      componentName: componentName,
+      dispatch: dispatch,
+      eventName: eventName,
+      parent: parent
+    }),
+    handleHeaderClick: handleHeaderClick({
+      componentName: componentName,
+      dispatch: dispatch,
+      eventName: eventName,
+      props: props,
+      parent: parent,
+      state: state
+    })
+  };
+  return api;
+};

package/common/array.js

@@ -0,0 +1,120 @@
+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 { SORT } from '@opentiny/vue-renderless/common';
+import { isSame } from '@opentiny/vue-renderless/common/type';
+import { getObj } from '@opentiny/vue-renderless/common/object';
+export var indexOf = function indexOf(arr, data) {
+  var predicate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : isSame;
+  if (Array.isArray(arr) && typeof predicate === 'function') {
+    for (var i = 0, len = arr.length; i < len; i++) {
+      if (predicate(arr[i], data)) {
+        return i;
+      }
+    }
+  }
+  return -1;
+};
+export var find = function find(arr, predicate) {
+  var index = indexOf(arr, undefined, predicate);
+  return index !== -1 ? arr[index] : undefined;
+};
+export var remove = function remove(arr, data) {
+  var count = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  if (Array.isArray(arr) && arr.length) {
+    var index = indexOf(arr, data);
+    if (index > -1) {
+      arr.splice(index, count);
+    }
+  }
+  return arr;
+};
+export var sort = function sort(arr, field) {
+  var sort = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : SORT.Asc;
+  if (Array.isArray(arr) && arr.length > 1) {
+    arr.sort(function (x, y) {
+      var compare = sort === SORT.Asc ? [1, -1] : [-1, 1];
+      var xField = getObj(x, field);
+      var yField = getObj(y, field);
+      if (isNaN(xField)) {
+        return sort === SORT.Asc ? 1 : -1;
+      } else if (isNaN(yField)) {
+        return -1;
+      }
+      return xField > yField ? compare[0] : compare[1];
+    });
+  }
+  return arr;
+};
+export var push = function push(arr, data) {
+  if (Array.isArray(arr) && !arr.some(function (value) {
+    return isSame(value, data);
+  })) {
+    arr.push(data);
+  }
+  return arr;
+};
+export var unique = function unique(arr) {
+  if (Array.isArray(arr)) {
+    var array = [];
+    for (var i = 0, len = arr.length; i < len; i++) {
+      var value = arr[i];
+      if (indexOf(array, value) === -1) {
+        array.push(value);
+      }
+    }
+    return array;
+  }
+  return arr;
+};
+var extend = function extend(to, _from) {
+  Object.keys(_from).forEach(function (key) {
+    return to[key] = _from[key];
+  });
+  return to;
+};
+export var toObject = function toObject(arr) {
+  var res = {};
+  for (var i = 0; i < arr.length; i++) {
+    if (arr[i]) {
+      extend(res, arr[i]);
+    }
+  }
+  return res;
+};
+export var transformPidToChildren = function transformPidToChildren(data) {
+  var pidName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'pId';
+  var childrenName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'children';
+  var idName = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'id';
+  var result = [];
+  Array.isArray(data) && data.forEach(function (item) {
+    if (item[pidName] == '0') {
+      result.push(item);
+    } else {
+      var parent = find(data, function (i) {
+        return i[idName] == item[pidName];
+      });
+      if (!parent) {
+        return;
+      }
+      if (!parent[childrenName]) {
+        parent[childrenName] = [];
+      }
+      parent[childrenName].push(item);
+    }
+    delete item[pidName];
+  });
+  return result;
+};
+export var transformTreeData = function transformTreeData(data) {
+  var key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'id';
+  var parentKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'pId';
+  if (!Array.isArray(data)) {
+    data = [data];
+  }
+  data = data.map(function (item) {
+    return _objectSpread({}, item);
+  });
+  var treeData = transformPidToChildren(data, parentKey, 'children', key);
+  return treeData;
+};