@opentiny/vue-renderless 3.1.0-alpha.0

package/mini-picker/index.js

@@ -0,0 +1,227 @@
+export var visibleHandle = function visibleHandle(emit) {
+  return function () {
+    return emit('update:visible', false);
+  };
+};
+export var watchVisible = function watchVisible(emit) {
+  return function (_ref) {
+    var state = _ref.state,
+      value = _ref.value;
+    setTimeout(function () {
+      value ? state.toggle = true : state.toggle = false;
+    }, 0);
+    emit('update:visible', value);
+  };
+};
+export var getDataType = function getDataType(state) {
+  return function () {
+    var columns = state.columns;
+    var firstColumn = columns[0] || {};
+    if (firstColumn.children) {
+      return 'cascade';
+    }
+    if (firstColumn.values) {
+      return 'object';
+    }
+    return 'text';
+  };
+};
+export var format = function format(_ref2) {
+  var state = _ref2.state,
+    api = _ref2.api;
+  return function () {
+    var columns = state.columns,
+      dataType = state.dataType;
+    if (dataType === 'text') {
+      state.formattedColumns = [{
+        values: columns
+      }];
+    } else if (dataType === 'cascade') {
+      api.formatCascade();
+    } else {
+      state.formattedColumns = columns;
+    }
+  };
+};
+export var formatCascade = function formatCascade(_ref3) {
+  var state = _ref3.state,
+    props = _ref3.props;
+  return function () {
+    var formatted = [];
+    var cursor = {
+      children: state.columns
+    };
+    while (cursor && cursor.children) {
+      var defaultIndex = cursor.defaultIndex || +state.defaultIndex;
+      formatted.push({
+        values: cursor.children.map(function (item) {
+          return item[props.valueKey];
+        }),
+        defaultIndex: defaultIndex
+      });
+      cursor = cursor.children[defaultIndex];
+    }
+    state.formattedColumns = formatted;
+  };
+};
+export var change = function change(api) {
+  return function (index) {
+    api.onChange(index);
+  };
+};
+export var setColumnValue = function setColumnValue(api) {
+  return function (index, value) {
+    var column = api.getColumn(index);
+    column && column.setValue(value);
+  };
+};
+export var setValues = function setValues(api) {
+  return function (values) {
+    values.forEach(function (value, index) {
+      api.setColumnValue(index, value);
+    });
+  };
+};
+export var getColumnValue = function getColumnValue(api) {
+  return function (index) {
+    var column = api.getColumn(index);
+    return column && column.getValue();
+  };
+};
+export var confirm = function confirm(_ref4) {
+  var api = _ref4.api,
+    refs = _ref4.refs;
+  return function () {
+    var children = refs.childrenPicker;
+    children && children.forEach(function (child) {
+      return child.onTransitionEnd();
+    });
+    api.emitEvent('confirm');
+    api.visibleHandle();
+  };
+};
+export var cancel = function cancel(_ref5) {
+  var api = _ref5.api,
+    emit = _ref5.emit;
+  return function () {
+    emit('cancel');
+    api.visibleHandle();
+  };
+};
+export var emitEvent = function emitEvent(_ref6) {
+  var api = _ref6.api,
+    state = _ref6.state,
+    emit = _ref6.emit;
+  return function (event) {
+    if (state.dataType === 'text') {
+      emit(event, api.getColumnValue(0), api.getColumnIndex(0));
+    } else {
+      emit(event, api.getValues(), api.getIndexes());
+    }
+  };
+};
+export var getColumn = function getColumn(refs) {
+  return function (index) {
+    var children = refs.childrenPicker;
+    return children[index];
+  };
+};
+export var getColumnIndex = function getColumnIndex(api) {
+  return function (columnIndex) {
+    return (api.getColumn(columnIndex) || {}).state.currentIndex;
+  };
+};
+export var getValues = function getValues(refs) {
+  return function () {
+    return refs.childrenPicker && refs.childrenPicker.map(function (child) {
+      return child.getValue();
+    });
+  };
+};
+export var getIndexes = function getIndexes(refs) {
+  return function () {
+    return refs.childrenPicker && refs.childrenPicker.map(function (child) {
+      return child.state.currentIndex;
+    });
+  };
+};
+export var setIndexes = function setIndexes(api) {
+  return function (indexes) {
+    indexes.forEach(function (optionIndex, columnIndex) {
+      api.setColumnIndex(columnIndex, optionIndex);
+    });
+  };
+};
+export var setColumnIndex = function setColumnIndex(api) {
+  return function (columnIndex, optionIndex) {
+    var column = api.getColumn(columnIndex);
+    column && column.setIndex(optionIndex);
+  };
+};
+export var getColumnValues = function getColumnValues(refs) {
+  return function (index) {
+    return (refs.childrenPicker[index] || {}).state.columnsItem.values;
+  };
+};
+export var setColumnValues = function setColumnValues(refs) {
+  return function (index, options) {
+    var children = refs.childrenPicker;
+    var column = children[index];
+    if (column) {
+      column.setOptions(options);
+    }
+  };
+};
+export var onCascadeChange = function onCascadeChange(_ref7) {
+  var api = _ref7.api,
+    state = _ref7.state,
+    props = _ref7.props;
+  return function (columnIndex) {
+    var columns = state.columns;
+    var cursor = {
+      children: columns
+    };
+    var indexes = api.getIndexes();
+    for (var i = 0; i <= columnIndex; i++) {
+      cursor = cursor.children[indexes[i]];
+    }
+    while (columnIndex < state.formattedColumns.length) {
+      if (cursor.children && cursor.children.length !== 0) {
+        columnIndex++;
+        api.setColumnValues(columnIndex, cursor.children.map(function (item) {
+          return item[props.valueKey];
+        }));
+        cursor = cursor.children[cursor.defaultIndex || 0];
+      } else {
+        columnIndex++;
+        api.setColumnValues(columnIndex, []);
+      }
+    }
+  };
+};
+export var onChange = function onChange(_ref8) {
+  var api = _ref8.api,
+    state = _ref8.state,
+    emit = _ref8.emit;
+  return function (columnIndex) {
+    if (state.dataType === 'cascade') {
+      api.onCascadeChange(columnIndex);
+    }
+    if (api.dataType === 'text') {
+      emit('change', api.getColumnValue(0), api.getColumnIndex(0));
+    } else {
+      emit('change', api.getValues(), columnIndex);
+    }
+  };
+};
+export var getChildrenComponent = function getChildrenComponent(_ref9) {
+  var state = _ref9.state,
+    vm = _ref9.vm,
+    constants = _ref9.constants;
+  var childrenName = constants.CHILDREN_PICKER;
+  var children = [];
+  for (var index = 0; index < state.formattedColumns.length; index++) {
+    children.push(Array.isArray(vm.$refs[childrenName + index]) ? vm.$refs[childrenName + index][0] : vm.$refs[childrenName + index]);
+  }
+  return children;
+};

package/mini-picker/vue.js

@@ -0,0 +1,142 @@
+import { visibleHandle, watchVisible, formatCascade, format, getDataType, change, setColumnValue, setValues, getColumnValue, confirm, cancel, getColumnIndex, getValues, getIndexes, setIndexes, setColumnIndex, getColumnValues, setColumnValues, onChange, onCascadeChange, emitEvent, getColumn, getChildrenComponent } from './index';
+export var api = ['state', 'visibleHandle', 'watchVisible', 'change', 'setValues', 'getColumnValue', 'confirm', 'cancel', 'getColumnIndex', 'getValues', 'getIndexes', 'setIndexes', 'setColumnIndex', 'getColumnValues', 'setColumnValues', 'onChange', 'onCascadeChange', 'emitEvent', 'getColumn', 'setColumnValue'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    computed = _ref.computed,
+    props = _ref.props,
+    api = _ref.api;
+  var state = reactive({
+    columns: props.columns,
+    toggle: false,
+    itemHeight: +props.itemHeight,
+    defaultIndex: props.defaultIndex,
+    visibleItemCount: props.visibleItemCount,
+    clumnsWrapHeight: null,
+    formattedColumns: [],
+    dataType: computed(function () {
+      return api.getDataType();
+    })
+  });
+  return state;
+};
+var initApi = function initApi(_ref2) {
+  var api = _ref2.api,
+    props = _ref2.props,
+    state = _ref2.state,
+    emit = _ref2.emit,
+    refs = _ref2.refs;
+  Object.assign(api, {
+    state: state,
+    getColumn: getColumn(refs),
+    getValues: getValues(refs),
+    getIndexes: getIndexes(refs),
+    getDataType: getDataType(state),
+    visibleHandle: visibleHandle(emit),
+    formatCascade: formatCascade({
+      state: state,
+      props: props
+    }),
+    getColumnValues: getColumnValues(refs),
+    setColumnValues: setColumnValues(refs),
+    emitEvent: emitEvent({
+      api: api,
+      state: state,
+      emit: emit
+    }),
+    change: change(api),
+    onChange: onChange({
+      api: api,
+      state: state,
+      emit: emit
+    }),
+    cancel: cancel({
+      api: api,
+      emit: emit
+    }),
+    confirm: confirm({
+      api: api,
+      refs: refs
+    }),
+    format: format({
+      state: state,
+      api: api
+    }),
+    setValues: setValues(api),
+    setIndexes: setIndexes(api),
+    watchVisible: watchVisible(emit),
+    setColumnIndex: setColumnIndex(api),
+    getColumnValue: getColumnValue(api),
+    getColumnIndex: getColumnIndex(api),
+    setColumnValue: setColumnValue(api),
+    onCascadeChange: onCascadeChange({
+      api: api,
+      state: state,
+      props: props
+    })
+  });
+};
+var initWatch = function initWatch(_ref3) {
+  var watch = _ref3.watch,
+    props = _ref3.props,
+    state = _ref3.state,
+    api = _ref3.api;
+  watch(function () {
+    return props.visible;
+  }, function (value) {
+    api.watchVisible({
+      state: state,
+      value: value
+    });
+  });
+  watch(function () {
+    return props.columns;
+  }, function (value) {
+    state.columns = value;
+    api.format();
+  });
+};
+export var renderless = function renderless(props, _ref4, _ref5) {
+  var computed = _ref4.computed,
+    onMounted = _ref4.onMounted,
+    reactive = _ref4.reactive,
+    watch = _ref4.watch;
+  var emit = _ref5.emit,
+    nextTick = _ref5.nextTick,
+    vm = _ref5.vm,
+    constants = _ref5.constants;
+  var api = {};
+  var refs = {
+    childrenPicker: null
+  };
+  var state = initState({
+    reactive: reactive,
+    computed: computed,
+    props: props,
+    api: api
+  });
+  initApi({
+    api: api,
+    props: props,
+    state: state,
+    emit: emit,
+    refs: refs
+  });
+  initWatch({
+    watch: watch,
+    props: props,
+    state: state,
+    api: api
+  });
+  onMounted(function () {
+    nextTick(function () {
+      refs.childrenPicker = getChildrenComponent({
+        state: state,
+        vm: vm,
+        constants: constants
+      });
+    });
+    api.format();
+    state.clumnsWrapHeight = state.itemHeight * state.visibleItemCount;
+  });
+  return api;
+};