@opentiny/vue-renderless 3.1.0-alpha.0

package/numeric/vue.js

@@ -0,0 +1,218 @@
+import { watchValue, toPrecision, getPrecision, internalIncrease, internalDecrease, focus, decrease, handleBlur, handleFocus, setCurrentValue, handleInput, handleInputChange, select, mounted, updated, increase, displayValue, getNumPecision, mouseEvent, getUnitPrecision, getDecimal, unmounted, initService } from './index';
+export var api = ['state', 'decrease', 'increase', 'handleBlur', 'handleFocus', 'handleInput', 'handleInputChange', 'mouseEvent', 'focus', 'select'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    computed = _ref.computed,
+    props = _ref.props,
+    api = _ref.api,
+    $service = _ref.$service,
+    parent = _ref.parent;
+  var state = reactive({
+    currentValue: props.modelValue,
+    userInput: props.modelValue,
+    lastInput: props.modelValue,
+    inputStatus: false,
+    decimal: null,
+    strictInput: computed(function () {
+      return props.strictInput;
+    }),
+    inputSize: computed(function () {
+      return props.size || state.formSize;
+    }),
+    formSize: computed(function () {
+      return (parent.tinyForm || {}).size;
+    }),
+    formDisabled: computed(function () {
+      return (parent.tinyForm || {}).disabled;
+    }),
+    inputDisabled: computed(function () {
+      return props.disabled || state.formDisabled;
+    }),
+    displayValue: computed(function () {
+      return api.displayValue();
+    }),
+    numPrecision: computed(function () {
+      return api.getNumPecision();
+    }),
+    minDisabled: computed(function () {
+      return !props.circulate && api.internalDecrease({
+        val: props.modelValue,
+        step: props.step
+      }) < props.min || state.formDisabled;
+    }),
+    maxDisabled: computed(function () {
+      return !props.circulate && api.internalIncrease({
+        val: props.modelValue,
+        step: props.step
+      }) > props.max || state.formDisabled;
+    }),
+    controlsAtRight: computed(function () {
+      return props.controls && props.controlsPosition === 'right';
+    }),
+    format: computed(function () {
+      return getUnitPrecision({
+        service: $service,
+        props: props
+      });
+    })
+  });
+  return state;
+};
+var initApi = function initApi(_ref2) {
+  var api = _ref2.api,
+    props = _ref2.props,
+    state = _ref2.state,
+    parent = _ref2.parent,
+    refs = _ref2.refs,
+    emit = _ref2.emit,
+    dispatch = _ref2.dispatch,
+    constants = _ref2.constants;
+  Object.assign(api, {
+    state: state,
+    focus: focus(refs),
+    select: select(refs),
+    getPrecision: getPrecision(),
+    toPrecision: toPrecision(state),
+    updated: updated({
+      constants: constants,
+      parent: parent,
+      props: props,
+      refs: refs,
+      state: state
+    }),
+    mounted: mounted({
+      constants: constants,
+      parent: parent,
+      props: props,
+      refs: refs,
+      state: state
+    }),
+    unmounted: unmounted({
+      parent: parent,
+      state: state
+    }),
+    getDecimal: getDecimal(props),
+    handleFocus: handleFocus({
+      emit: emit,
+      state: state,
+      props: props,
+      api: api
+    }),
+    decrease: decrease({
+      api: api,
+      props: props,
+      state: state
+    }),
+    increase: increase({
+      api: api,
+      props: props,
+      state: state
+    }),
+    handleInput: handleInput({
+      state: state,
+      api: api,
+      emit: emit,
+      props: props
+    }),
+    getNumPecision: getNumPecision({
+      api: api,
+      props: props
+    }),
+    displayValue: displayValue({
+      props: props,
+      state: state
+    }),
+    internalDecrease: internalDecrease({
+      api: api,
+      state: state
+    }),
+    internalIncrease: internalIncrease({
+      api: api,
+      state: state
+    }),
+    handleInputChange: handleInputChange({
+      api: api
+    }),
+    mouseEvent: mouseEvent({
+      api: api,
+      props: props,
+      state: state
+    }),
+    handleBlur: handleBlur({
+      constants: constants,
+      dispatch: dispatch,
+      emit: emit,
+      props: props,
+      state: state,
+      api: api
+    }),
+    watchValue: watchValue({
+      api: api,
+      state: state
+    }),
+    setCurrentValue: setCurrentValue({
+      api: api,
+      constants: constants,
+      dispatch: dispatch,
+      emit: emit,
+      props: props,
+      state: state
+    })
+  });
+  api.getDecimal(0);
+};
+var initWatch = function initWatch(_ref3) {
+  var watch = _ref3.watch,
+    props = _ref3.props,
+    api = _ref3.api;
+  watch(function () {
+    return props.modelValue;
+  }, api.watchValue, {
+    immediate: true
+  });
+};
+export var renderless = function renderless(props, _ref4, _ref5) {
+  var computed = _ref4.computed,
+    onMounted = _ref4.onMounted,
+    onUpdated = _ref4.onUpdated,
+    onUnmounted = _ref4.onUnmounted,
+    reactive = _ref4.reactive,
+    watch = _ref4.watch,
+    inject = _ref4.inject;
+  var parent = _ref5.parent,
+    emit = _ref5.emit,
+    refs = _ref5.refs,
+    constants = _ref5.constants,
+    dispatch = _ref5.dispatch,
+    service = _ref5.service;
+  var api = {};
+  var $service = initService(service);
+  var state = initState({
+    reactive: reactive,
+    computed: computed,
+    props: props,
+    api: api,
+    $service: $service,
+    parent: parent
+  });
+  parent.tinyForm = parent.tinyForm || inject('form', null);
+  initApi({
+    api: api,
+    props: props,
+    state: state,
+    parent: parent,
+    refs: refs,
+    emit: emit,
+    dispatch: dispatch,
+    constants: constants
+  });
+  initWatch({
+    watch: watch,
+    props: props,
+    api: api
+  });
+  onMounted(api.mounted);
+  onUpdated(api.updated);
+  onUnmounted(api.unmounted);
+  return api;
+};

package/option/index.js

@@ -0,0 +1,79 @@
+import { getObj } from '@opentiny/vue-renderless/common/object';
+var escapeRegexpString = function escapeRegexpString() {
+  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return String(value).replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
+};
+export var isEqual = function isEqual(_ref) {
+  var select = _ref.select,
+    state = _ref.state;
+  return function (a, b) {
+    if (!state.isObject) {
+      return a === b;
+    } else {
+      var valueKey = select.valueKey;
+      return getObj(a, valueKey) === getObj(b, valueKey);
+    }
+  };
+};
+export var contains = function contains(_ref2) {
+  var select = _ref2.select,
+    state = _ref2.state;
+  return function () {
+    var arr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    if (!state.isObject) {
+      return arr && arr.indexOf(target) > -1;
+    } else {
+      var valueKey = select.valueKey;
+      return arr && arr.some(function (item) {
+        return getObj(item, valueKey) === getObj(target, valueKey);
+      });
+    }
+  };
+};
+export var handleGroupDisabled = function handleGroupDisabled(state) {
+  return function (val) {
+    state.groupDisabled = val;
+  };
+};
+export var hoverItem = function hoverItem(_ref3) {
+  var select = _ref3.select,
+    props = _ref3.props,
+    state = _ref3.state,
+    vm = _ref3.vm;
+  return function () {
+    if (!props.disabled && !state.groupDisabled) {
+      select.state.hoverIndex = select.state.options.indexOf(vm);
+    }
+  };
+};
+export var selectOptionClick = function selectOptionClick(_ref4) {
+  var props = _ref4.props,
+    state = _ref4.state,
+    select = _ref4.select,
+    constants = _ref4.constants,
+    vm = _ref4.vm;
+  return function () {
+    if (props.disabled !== true && state.groupDisabled !== true) {
+      select.state.selectEmitter.emit(constants.EVENT_NAME.handleOptionClick, vm, true);
+    }
+  };
+};
+export var queryChange = function queryChange(_ref5) {
+  var select = _ref5.select,
+    props = _ref5.props,
+    state = _ref5.state;
+  return function (query) {
+    state.visible = new RegExp(escapeRegexpString(query), 'i').test(state.currentLabel) || props.created;
+    select.state.filteredOptionsCount += state.visible ? 1 : -1;
+  };
+};
+export var toggleEvent = function toggleEvent(_ref6) {
+  var props = _ref6.props,
+    refs = _ref6.refs,
+    type = _ref6.type;
+  var optionEl = refs.option;
+  Object.keys(props.events).forEach(function (ev) {
+    optionEl[type + 'EventListener'](ev, props.events[ev]);
+  });
+};

package/option/vue.js

@@ -0,0 +1,219 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+import { isEqual, contains, handleGroupDisabled, hoverItem, selectOptionClick, queryChange, toggleEvent } from './index';
+export var api = ['state', 'visible', 'hoverItem', 'selectOptionClick'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    computed = _ref.computed,
+    props = _ref.props,
+    api = _ref.api,
+    markRaw = _ref.markRaw,
+    select = _ref.select,
+    parent = _ref.parent;
+  var state = reactive({
+    parent: markRaw(parent),
+    created: computed(function () {
+      return props.created;
+    }),
+    index: -1,
+    select: markRaw(select),
+    hover: false,
+    visible: true,
+    hitState: false,
+    groupDisabled: false,
+    disabled: computed(function () {
+      return props.disabled;
+    }),
+    isObject: computed(function () {
+      return Object.prototype.toString.call(props.value).toLowerCase() === '[object object]';
+    }),
+    currentLabel: computed(function () {
+      return props.label || (state.isObject ? '' : props.value);
+    }),
+    currentValue: computed(function () {
+      return props.value || props.label || '';
+    }),
+    itemSelected: computed(function () {
+      if (!select.multiple) {
+        return api.isEqual(props.value, select.modelValue);
+      } else {
+        return api.contains(select.modelValue, props.value);
+      }
+    }),
+    limitReached: computed(function () {
+      if (select.multiple) {
+        var multipleLimit = select.state.multipleLimit;
+        return !state.itemSelected && (select.modelValue || []).length >= multipleLimit && multipleLimit > 0;
+      } else {
+        return false;
+      }
+    }),
+    selectCls: computed(function () {
+      return state.itemSelected ? 'checked-sur' : 'check';
+    })
+  });
+  return state;
+};
+var initApi = function initApi(_ref2) {
+  var api = _ref2.api,
+    props = _ref2.props,
+    state = _ref2.state,
+    select = _ref2.select,
+    constants = _ref2.constants,
+    vm = _ref2.vm;
+  Object.assign(api, {
+    state: state,
+    isEqual: isEqual({
+      select: select,
+      state: state
+    }),
+    contains: contains({
+      select: select,
+      state: state
+    }),
+    hoverItem: hoverItem({
+      select: select,
+      vm: vm,
+      props: props,
+      state: state
+    }),
+    queryChange: queryChange({
+      select: select,
+      props: props,
+      state: state
+    }),
+    selectOptionClick: selectOptionClick({
+      constants: constants,
+      vm: vm,
+      props: props,
+      state: state,
+      select: select
+    }),
+    handleGroupDisabled: handleGroupDisabled(state)
+  });
+};
+var initWatch = function initWatch(_ref3) {
+  var watch = _ref3.watch,
+    props = _ref3.props,
+    state = _ref3.state,
+    select = _ref3.select,
+    constants = _ref3.constants;
+  watch(function () {
+    return state.currentLabel;
+  }, function () {
+    if (!props.created && !select.remote) {
+      select.state.selectEmitter.emit(constants.EVENT_NAME.setSelected);
+    }
+  });
+  watch(function () {
+    return props.value;
+  }, function (value, oldVal) {
+    var remote = select.remote,
+      valueKey = select.valueKey;
+    if (!props.created && !remote) {
+      if (valueKey && _typeof(value) === 'object' && _typeof(oldVal) === 'object' && value[valueKey] === oldVal[valueKey]) {
+        return;
+      }
+      select.state.selectEmitter.emit(constants.EVENT_NAME.setSelected);
+    }
+  });
+};
+var initOnMounted = function initOnMounted(_ref4) {
+  var onMounted = _ref4.onMounted,
+    props = _ref4.props,
+    api = _ref4.api,
+    vm = _ref4.vm,
+    state = _ref4.state,
+    refs = _ref4.refs,
+    constants = _ref4.constants,
+    select = _ref4.select;
+  onMounted(function () {
+    state.el = vm.$el;
+    toggleEvent({
+      props: props,
+      refs: refs,
+      type: 'add'
+    });
+    select.state.selectEmitter.on(constants.EVENT_NAME.queryChange, api.queryChange);
+  });
+};
+var initOnBeforeUnmount = function initOnBeforeUnmount(_ref5) {
+  var onBeforeUnmount = _ref5.onBeforeUnmount,
+    props = _ref5.props,
+    select = _ref5.select,
+    refs = _ref5.refs,
+    vm = _ref5.vm;
+  onBeforeUnmount(function () {
+    var index = select.state.cachedOptions.indexOf(vm);
+    toggleEvent({
+      props: props,
+      refs: refs,
+      type: 'remove'
+    });
+    if (index === -1) {
+      select.state.cachedOptions.splice(index, 1);
+    }
+    select.onOptionDestroy(select.state.options.indexOf(vm));
+  });
+};
+export var renderless = function renderless(props, _ref6, _ref7) {
+  var computed = _ref6.computed,
+    onMounted = _ref6.onMounted,
+    onBeforeUnmount = _ref6.onBeforeUnmount,
+    reactive = _ref6.reactive,
+    watch = _ref6.watch,
+    inject = _ref6.inject,
+    markRaw = _ref6.markRaw;
+  var vm = _ref7.vm,
+    refs = _ref7.refs,
+    parent = _ref7.parent;
+  var api = {};
+  var select = inject('select');
+  var constants = select._constants;
+  var state = initState({
+    reactive: reactive,
+    computed: computed,
+    props: props,
+    api: api,
+    markRaw: markRaw,
+    select: select,
+    parent: parent
+  });
+  initApi({
+    api: api,
+    props: props,
+    state: state,
+    select: select,
+    constants: constants,
+    vm: vm
+  });
+  initWatch({
+    watch: watch,
+    props: props,
+    state: state,
+    select: select,
+    constants: constants
+  });
+  initOnMounted({
+    onMounted: onMounted,
+    props: props,
+    api: api,
+    vm: vm,
+    state: state,
+    refs: refs,
+    constants: constants,
+    select: select
+  });
+  initOnBeforeUnmount({
+    onBeforeUnmount: onBeforeUnmount,
+    props: props,
+    select: select,
+    refs: refs,
+    vm: vm
+  });
+  select.state.options.push(markRaw(vm));
+  select.state.cachedOptions.push(markRaw(vm));
+  select.state.optionsCount++;
+  select.state.filteredOptionsCount++;
+  vm.$on(constants.EVENT_NAME.handleGroupDisabled, api.handleGroupDisabled);
+  return api;
+};

package/option-group/index.js

@@ -0,0 +1,18 @@
+export var queryChange = function queryChange(_ref) {
+  var select = _ref.select,
+    state = _ref.state,
+    vm = _ref.vm;
+  return function () {
+    state.visible = true;
+    if (Array.isArray(select.state.options)) {
+      var groupOptions = select.state.options.filter(function (option) {
+        return option.state.parent && vm && option.state.parent.label === vm.label;
+      });
+      if (Array.isArray(groupOptions)) {
+        state.visible = groupOptions.some(function (option) {
+          return option.visible === true;
+        });
+      }
+    }
+  };
+};

package/option-group/vue.js

@@ -0,0 +1,37 @@
+import { queryChange } from './index';
+export var api = ['state', 'queryChange'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var onMounted = _ref.onMounted,
+    reactive = _ref.reactive,
+    watch = _ref.watch,
+    inject = _ref.inject;
+  var broadcast = _ref2.broadcast,
+    vm = _ref2.vm;
+  var select = inject('select');
+  var constants = select._constants;
+  var state = reactive({
+    visible: true
+  });
+  var api = {
+    state: state,
+    queryChange: queryChange({
+      select: select,
+      state: state,
+      vm: vm
+    })
+  };
+  watch(function () {
+    return props.disabled;
+  }, function (value) {
+    broadcast(constants.COMPONENT_NAME.Option, constants.EVENT_NAME.handleGroupDisabled, value);
+  }, {
+    immediate: true
+  });
+  onMounted(function () {
+    if (props.disabled) {
+      broadcast(constants.COMPONENT_NAME.Option, constants.EVENT_NAME.handleGroupDisabled, props.disabled);
+    }
+    select.state.selectEmitter.on(constants.EVENT_NAME.queryChange, api.queryChange);
+  });
+  return api;
+};