@opentiny/vue-renderless 3.1.0-alpha.0 → 3.5.0-alpha.0

package/action-menu/index.js

@@ -0,0 +1,10 @@
+export var handleMoreClick = function handleMoreClick(emit) {
+  return function () {
+    emit('more-click');
+  };
+};
+export var handleItemClick = function handleItemClick(emit) {
+  return function (data) {
+    emit('item-click', data);
+  };
+};

package/action-menu/vue.js

@@ -0,0 +1,26 @@
+import { handleMoreClick, handleItemClick } from './index';
+export var api = ['state', 'handleMoreClick', 'handleItemClick'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    reactive = _ref.reactive;
+  var emit = _ref2.emit;
+  var api = {
+    handleMoreClick: handleMoreClick(emit),
+    handleItemClick: handleItemClick(emit)
+  };
+  var state = reactive({
+    visibleOptions: computed(function () {
+      return props.options.slice(0, props.maxShowNum);
+    }),
+    moreOptions: computed(function () {
+      return props.options.slice(props.maxShowNum);
+    }),
+    spacing: computed(function () {
+      return String(props.spacing).includes('px') ? props.spacing : props.spacing + 'px';
+    })
+  });
+  Object.assign(api, {
+    state: state
+  });
+  return api;
+};

package/amount/index.js

@@ -0,0 +1,334 @@
+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 { on, off } from '@opentiny/vue-renderless/common/deps/dom';
+import { formatNumber } from '@opentiny/vue-renderless/common/decimal';
+import { getMiniDecimal, equalsDecimal } from '@opentiny/vue-renderless/common/bigInt';
+import { isNumber } from '@opentiny/vue-renderless/common/type';
+export var initService = function initService(service) {
+  var _ref = service || {},
+    _ref$utils = _ref.utils,
+    utils = _ref$utils === void 0 ? {} : _ref$utils;
+  var noopFn = function noopFn() {
+    return null;
+  };
+  return {
+    getCurrencyPrecision: utils.getCurrencyPrecision || noopFn,
+    getNumberFormat: utils.getNumberFormat || noopFn
+  };
+};
+export var getDecimal = function getDecimal(props) {
+  return function (value) {
+    return getMiniDecimal(value, props.plugin);
+  };
+};
+export var closePopper = function closePopper(state) {
+  return function () {
+    state.visible = false;
+  };
+};
+export var popInput = function popInput(_ref2) {
+  var editorState = _ref2.editorState,
+    props = _ref2.props,
+    state = _ref2.state,
+    api = _ref2.api;
+  return function (value) {
+    value = api.onInputPreprocess(value);
+    var _state$format = state.format,
+      fraction = _state$format.fraction,
+      groupSeparator = _state$format.groupSeparator;
+    value = value.replace(/^-+/, '-');
+    var groups = value.split(groupSeparator).map(function (val) {
+      return val.trim();
+    });
+    value = groups.join('');
+    if (value !== '-' && api.getDecimal(value).isNaN()) {
+      value = editorState.lastInput;
+    } else {
+      value = value.split('.').map(function (a, i) {
+        return i && props.strictInput && typeof fraction === 'number' ? a.substr(0, fraction) : a;
+      }).join('.');
+    }
+    editorState.lastInput = value;
+    editorState.amount = value;
+  };
+};
+export var toggleVisible = function toggleVisible(_ref3) {
+  var api = _ref3.api,
+    props = _ref3.props,
+    state = _ref3.state,
+    editorState = _ref3.editorState;
+  return function () {
+    if (props.disabled || !props.popUp) {
+      return;
+    }
+    state.lock = true;
+    state.visible = !state.visible;
+    if (state.visible) {
+      var date = state.date,
+        currency = state.currency;
+      Object.assign(editorState, {
+        amount: state.amount,
+        date: date,
+        currency: currency
+      });
+      api.addOutSideEvent(state.visible);
+    }
+  };
+};
+export var innerFormat = function innerFormat(_ref4) {
+  var state = _ref4.state,
+    props = _ref4.props;
+  return function (value) {
+    var _state$format2 = state.format,
+      fraction = _state$format2.fraction,
+      zeroize = _state$format2.zeroize,
+      rounding = _state$format2.rounding;
+    var modelTruncation = props.modelTruncation;
+    var fractionLen = (value.split('.')[1] || '').length;
+    if (value === '-') {
+      return 0;
+    }
+    if (!modelTruncation && fractionLen > fraction) {
+      return value;
+    }
+    return formatNumber(value, {
+      fraction: fraction,
+      zeroize: zeroize,
+      groupSeparator: '',
+      decimalSeparator: '.',
+      rounding: rounding
+    });
+  };
+};
+export var save = function save(_ref5) {
+  var api = _ref5.api,
+    state = _ref5.state,
+    editorState = _ref5.editorState;
+  return function () {
+    var amount = editorState.amount,
+      date = editorState.date,
+      currency = editorState.currency;
+    Object.assign(state, {
+      amount: amount,
+      date: date,
+      currency: currency
+    });
+    api.closePopper();
+    var num = api.innerFormat(String(state.amount));
+    state.amount = isNaN(num) ? 0 : num;
+    if (!equalsDecimal(state.lastInput, state.amount) || state.lastCurrency !== currency || state.lastDate !== date) {
+      api.emitChange();
+    }
+    state.lastInput = state.amount;
+    state.lastCurrency = currency;
+    state.lastDate = date;
+    api.initText();
+  };
+};
+export var reset = function reset(_ref6) {
+  var state = _ref6.state,
+    editorState = _ref6.editorState;
+  return function () {
+    var amount = state.amount,
+      date = state.date,
+      currency = state.currency;
+    Object.assign(editorState, {
+      amount: amount,
+      date: date,
+      currency: currency
+    });
+  };
+};
+export var emitChange = function emitChange(_ref7) {
+  var emit = _ref7.emit,
+    state = _ref7.state;
+  return function () {
+    var date = state.date,
+      currency = state.currency;
+    var emitAmount = Number(state.amount);
+    emit('update:modelValue', emitAmount);
+    emit('update:currency', currency);
+    emit('update:date', date);
+    emit('change', {
+      amount: emitAmount,
+      date: date,
+      currency: currency
+    });
+  };
+};
+export var inputFocus = function inputFocus(_ref8) {
+  var state = _ref8.state,
+    props = _ref8.props;
+  return function () {
+    var amount = String(state.amount);
+    state.isFocus = true;
+    state.lock = false;
+    var fraction = state.format.fraction;
+    var fractionLen = (amount.split('.')[1] || '').length;
+    if (fractionLen < fraction && props.holdZero) {
+      amount = formatNumber(amount, {
+        fraction: fraction
+      });
+    }
+    state.amountText = amount;
+  };
+};
+export var inputBlur = function inputBlur(_ref9) {
+  var api = _ref9.api,
+    state = _ref9.state,
+    props = _ref9.props;
+  return function () {
+    if (state.amountText !== '') {
+      var amount = api.innerFormat(String(state.amountText));
+      if (isNaN(amount)) {
+        state.amount = '';
+      }
+      state.amount = props.holdZero ? amount : api.getDecimal(amount).toString();
+    }
+    state.isFocus = false;
+    state.amountText = formatNumber(state.amount, state.format);
+    if (!equalsDecimal(state.lastInput, state.amount)) {
+      api.emitChange();
+    }
+    state.lastInput = state.amount;
+  };
+};
+export var handelClick = function handelClick(_ref10) {
+  var api = _ref10.api,
+    refs = _ref10.refs;
+  return function (e) {
+    var contains = refs.root.contains(e.target);
+    if (!contains) {
+      api.closePopper();
+    }
+  };
+};
+export var addOutSideEvent = function addOutSideEvent(api) {
+  return function (visible) {
+    if (visible) {
+      on(document, 'click', api.handelClick);
+    } else {
+      off(document, 'click', api.handelClick);
+    }
+  };
+};
+export var initText = function initText(_ref11) {
+  var state = _ref11.state;
+  return function () {
+    var amount = String(state.amount);
+    state.amountText = amount ? state.isFocus ? amount : formatNumber(state.amount, state.format) : '';
+  };
+};
+export var onInputPreprocess = function onInputPreprocess(props) {
+  return function (value) {
+    var inputElem = event.target;
+    if (value) {
+      var i = value.lastIndexOf('-');
+      if (i === 0 && !props.negative || i > 0) {
+        var tmpArr = value.split('');
+        tmpArr.splice(i, 1);
+        inputElem.value = value = tmpArr.join('');
+        inputElem.selectionStart = inputElem.selectionEnd = i;
+      }
+    }
+    return value;
+  };
+};
+export var onInput = function onInput(_ref12) {
+  var state = _ref12.state,
+    props = _ref12.props,
+    api = _ref12.api;
+  return function (value) {
+    value = api.onInputPreprocess(value);
+    var _state$format3 = state.format,
+      fraction = _state$format3.fraction,
+      groupSeparator = _state$format3.groupSeparator;
+    value = event.target.value.replace(/^-+/, '-');
+    var groups = value.split(groupSeparator).map(function (val) {
+      return val.trim();
+    });
+    value = groups.join('');
+    if (value !== '-' && api.getDecimal(value).isNaN()) {
+      value = state.lastInput;
+    } else {
+      value = value.split('.').map(function (a, i) {
+        return i && props.strictInput && typeof fraction === 'number' ? a.substr(0, fraction) : a;
+      }).join('.');
+    }
+    event.target.value = value;
+    state.amount = value;
+    state.amountText = value;
+  };
+};
+export var getPrecision = function getPrecision(_ref13) {
+  var service = _ref13.service,
+    props = _ref13.props,
+    currency = _ref13.currency;
+  var _props$format = props.format,
+    format = _props$format === void 0 ? {} : _props$format,
+    r = props.rounding,
+    digits = props.digits,
+    type = props.type;
+  var fraction;
+  var rounding = format.rounding;
+  var getCurrencyPrecision = service.getCurrencyPrecision,
+    getNumberFormat = service.getNumberFormat;
+  var serFra = getCurrencyPrecision(type, currency) || {};
+  var serFmt = getNumberFormat() || {};
+  var defaultFmt = {
+    groupSeparator: ',',
+    groupSize: 3,
+    decimalSeparator: '.',
+    zeroize: props.holdZero
+  };
+  fraction = isNumber(format.fraction) ? format.fraction : isNumber(serFra.fraction) ? serFra.fraction : digits;
+  if (r === false) {
+    rounding = 0;
+  } else {
+    rounding = isNumber(rounding) ? rounding : isNumber(serFra.rounding) ? serFra.rounding : 5;
+  }
+  return _objectSpread(_objectSpread(_objectSpread({}, defaultFmt), {}, {
+    fraction: fraction,
+    rounding: rounding
+  }, serFmt), format);
+};
+export var getAmountText = function getAmountText(_ref14) {
+  var state = _ref14.state,
+    props = _ref14.props;
+  return function () {
+    return props.hideCurrency ? typeof state.amountText === 'string' ? state.amountText.replace(state.currency, '') : state.amountText : state.amountText;
+  };
+};
+export var watchModelValue = function watchModelValue(_ref15) {
+  var api = _ref15.api,
+    state = _ref15.state;
+  return function () {
+    var value = api.initAmount();
+    state.amount = value;
+    state.lastInput = value;
+    api.initText();
+  };
+};
+export var watchCurrency = function watchCurrency(_ref16) {
+  var api = _ref16.api,
+    state = _ref16.state,
+    editorState = _ref16.editorState;
+  return function (value) {
+    state.currency = value;
+    editorState.currency = value;
+    state.lastCurrency = value;
+    api.initText();
+  };
+};
+export var initAmount = function initAmount(props) {
+  return function () {
+    var value = props.modelValue;
+    value = value === null || isNaN(Number(value)) ? '' : value;
+    if (!props.negative && value && Number(value) < 0) {
+      value -= 0;
+      value = Math.abs(value);
+    }
+    return value;
+  };
+};

package/amount/vue.js

@@ -0,0 +1,206 @@
+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 { closePopper, popInput, save, reset, inputBlur, emitChange, inputFocus, toggleVisible, addOutSideEvent, handelClick, initText, onInput, getPrecision, getDecimal, innerFormat, getAmountText, initService, watchModelValue, watchCurrency, onInputPreprocess, initAmount } from './index';
+export var api = ['t', 'popInput', 'state', 'editorState', 'save', 'reset', 'inputBlur', 'init', 'toggleVisible', 'inputFocus', 'closePopper', 'onInput', 'getAmountText'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    computed = _ref.computed,
+    props = _ref.props,
+    $service = _ref.$service,
+    editorState = _ref.editorState;
+  var state = reactive({
+    visible: false,
+    amount: props.modelValue || '',
+    currency: props.currency,
+    date: props.date,
+    overMaxLen: false,
+    isFocus: false,
+    lock: false,
+    amountText: '',
+    lastInput: props.modelValue,
+    lastCurrency: props.currency,
+    lastDate: props.date,
+    format: computed(function () {
+      return _objectSpread(_objectSpread({}, getPrecision({
+        service: $service,
+        props: props,
+        currency: editorState.currency
+      })), {}, {
+        prefix: state.currency
+      });
+    })
+  });
+  return state;
+};
+var initEditorState = function initEditorState(_ref2) {
+  var reactive = _ref2.reactive,
+    props = _ref2.props;
+  return reactive({
+    amount: '',
+    date: '',
+    currency: props.currency,
+    lastInput: props.modelValue
+  });
+};
+var initApi = function initApi(_ref3) {
+  var api = _ref3.api,
+    t = _ref3.t,
+    editorState = _ref3.editorState,
+    props = _ref3.props,
+    state = _ref3.state,
+    emit = _ref3.emit,
+    refs = _ref3.refs;
+  Object.assign(api, {
+    state: state,
+    t: t,
+    editorState: editorState,
+    getDecimal: getDecimal(props),
+    innerFormat: innerFormat({
+      state: state,
+      props: props
+    }),
+    getAmountText: getAmountText({
+      state: state,
+      props: props
+    }),
+    initAmount: initAmount(props),
+    onInputPreprocess: onInputPreprocess(props),
+    onInput: onInput({
+      state: state,
+      props: props,
+      api: api
+    }),
+    initText: initText({
+      state: state
+    }),
+    inputFocus: inputFocus({
+      state: state,
+      props: props
+    }),
+    inputBlur: inputBlur({
+      api: api,
+      props: props,
+      state: state
+    }),
+    closePopper: closePopper(state),
+    emitChange: emitChange({
+      emit: emit,
+      state: state
+    }),
+    popInput: popInput({
+      editorState: editorState,
+      api: api,
+      state: state,
+      props: props
+    }),
+    save: save({
+      api: api,
+      state: state,
+      editorState: editorState,
+      props: props
+    }),
+    reset: reset({
+      api: api,
+      state: state,
+      editorState: editorState
+    }),
+    handelClick: handelClick({
+      api: api,
+      refs: refs
+    }),
+    addOutSideEvent: addOutSideEvent(api),
+    watchModelValue: watchModelValue({
+      api: api,
+      state: state
+    }),
+    watchCurrency: watchCurrency({
+      api: api,
+      state: state,
+      editorState: editorState
+    }),
+    toggleVisible: toggleVisible({
+      api: api,
+      props: props,
+      state: state,
+      editorState: editorState
+    })
+  });
+};
+var initWatch = function initWatch(_ref4) {
+  var watch = _ref4.watch,
+    props = _ref4.props,
+    state = _ref4.state,
+    api = _ref4.api;
+  watch(function () {
+    return props.modelValue;
+  }, api.watchModelValue, {
+    immediate: true
+  });
+  watch(function () {
+    return props.currency;
+  }, api.watchCurrency, {
+    immediate: true
+  });
+  watch(function () {
+    return props.date;
+  }, function (value) {
+    state.date = value;
+    state.lastDate = value;
+  }, {
+    immediate: true
+  });
+  watch(function () {
+    return props.rounding;
+  }, function (value) {
+    state.format.rounding = value;
+  });
+  watch(function () {
+    return props.digits;
+  }, function (value) {
+    state.format.fraction = value;
+  });
+};
+export var renderless = function renderless(props, _ref5, _ref6) {
+  var onUnmounted = _ref5.onUnmounted,
+    computed = _ref5.computed,
+    reactive = _ref5.reactive,
+    watch = _ref5.watch;
+  var t = _ref6.t,
+    emit = _ref6.emit,
+    refs = _ref6.refs,
+    service = _ref6.service;
+  var api = {};
+  var $service = initService(service);
+  var editorState = initEditorState({
+    reactive: reactive,
+    props: props
+  });
+  var state = initState({
+    reactive: reactive,
+    computed: computed,
+    props: props,
+    $service: $service,
+    editorState: editorState
+  });
+  initApi({
+    api: api,
+    t: t,
+    editorState: editorState,
+    props: props,
+    state: state,
+    emit: emit,
+    refs: refs
+  });
+  api.getDecimal(0);
+  initWatch({
+    watch: watch,
+    props: props,
+    state: state,
+    api: api
+  });
+  onUnmounted(function () {
+    return api.addOutSideEvent(false);
+  });
+  return api;
+};