@opentiny/vue-renderless 3.1.0-alpha.0

package/container/index.js

@@ -0,0 +1,110 @@
+import { isNumber } from '@opentiny/vue-renderless/common/type';
+export var computedShowHeader = function computedShowHeader(_ref) {
+  var constants = _ref.constants,
+    props = _ref.props;
+  return function () {
+    return props.pattern !== constants.SIMPLE;
+  };
+};
+export var computedShowFooter = function computedShowFooter(_ref2) {
+  var constants = _ref2.constants,
+    props = _ref2.props;
+  return function () {
+    return props.pattern === constants.LEGEND || props.pattern === constants.CLASSIC;
+  };
+};
+export var computedShowAside = function computedShowAside(_ref3) {
+  var constants = _ref3.constants,
+    props = _ref3.props;
+  return function () {
+    return props.pattern !== constants.CLASSIC;
+  };
+};
+var transferWidthOrHeight = function transferWidthOrHeight(value) {
+  return isNumber(value) ? value + 'px' : value;
+};
+export var computedHeaderStyle = function computedHeaderStyle(_ref4) {
+  var constants = _ref4.constants,
+    props = _ref4.props;
+  return function () {
+    if (props.pattern === constants.FASHION) {
+      return {
+        height: transferWidthOrHeight(props.headerHeight),
+        left: transferWidthOrHeight(props.asideWidth)
+      };
+    }
+    return {
+      height: transferWidthOrHeight(props.headerHeight)
+    };
+  };
+};
+export var computedAsideStyle = function computedAsideStyle(_ref5) {
+  var constants = _ref5.constants,
+    props = _ref5.props;
+  return function () {
+    if (props.pattern === constants.SIMPLE || props.pattern === constants.FASHION) {
+      return {
+        top: transferWidthOrHeight(0),
+        width: transferWidthOrHeight(props.asideWidth)
+      };
+    }
+    return {
+      width: transferWidthOrHeight(props.asideWidth),
+      top: transferWidthOrHeight(props.headerHeight)
+    };
+  };
+};
+export var computedMainStyle = function computedMainStyle(_ref6) {
+  var constants = _ref6.constants,
+    props = _ref6.props;
+  return function () {
+    if (props.pattern === constants.DEFAULT || props.pattern === constants.FASHION) {
+      return {
+        top: transferWidthOrHeight(props.headerHeight),
+        left: transferWidthOrHeight(props.asideWidth),
+        bottom: transferWidthOrHeight(0)
+      };
+    }
+    if (props.pattern === constants.LEGEND) {
+      return {
+        top: transferWidthOrHeight(props.headerHeight),
+        left: transferWidthOrHeight(props.asideWidth),
+        bottom: transferWidthOrHeight(props.footerHeight)
+      };
+    }
+    if (props.pattern === constants.SIMPLE) {
+      return {
+        top: transferWidthOrHeight(0),
+        left: transferWidthOrHeight(props.asideWidth),
+        bottom: transferWidthOrHeight(0)
+      };
+    }
+    if (props.pattern === constants.CLASSIC) {
+      return {
+        top: transferWidthOrHeight(props.headerHeight),
+        left: transferWidthOrHeight(0),
+        bottom: transferWidthOrHeight(props.footerHeight)
+      };
+    }
+  };
+};
+export var computedFooterStyle = function computedFooterStyle(_ref7) {
+  var constants = _ref7.constants,
+    props = _ref7.props;
+  return function () {
+    if (props.pattern === constants.CLASSIC) {
+      return {
+        height: transferWidthOrHeight(props.footerHeight),
+        left: transferWidthOrHeight(0)
+      };
+    } else if (props.pattern === constants.LEGEND) {
+      return {
+        height: transferWidthOrHeight(props.footerHeight),
+        left: transferWidthOrHeight(props.asideWidth)
+      };
+    }
+    return {
+      height: transferWidthOrHeight(props.footerHeight)
+    };
+  };
+};

package/container/vue.js

@@ -0,0 +1,63 @@
+import { computedShowHeader, computedShowAside, computedShowFooter, computedHeaderStyle, computedAsideStyle, computedMainStyle, computedFooterStyle } from './index';
+export var api = ['state'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    reactive = _ref.reactive;
+  var constants = _ref2.constants;
+  var api = {};
+  var state = reactive({
+    showAside: computed(function () {
+      return api.computedShowAside();
+    }),
+    showHeader: computed(function () {
+      return api.computedShowHeader();
+    }),
+    showFooter: computed(function () {
+      return api.computedShowFooter();
+    }),
+    mainStyle: computed(function () {
+      return api.computedMainStyle();
+    }),
+    asideStyle: computed(function () {
+      return api.computedAsideStyle();
+    }),
+    headerStyle: computed(function () {
+      return api.computedHeaderStyle();
+    }),
+    footerStyle: computed(function () {
+      return api.computedFooterStyle();
+    })
+  });
+  Object.assign(api, {
+    state: state,
+    computedShowAside: computedShowAside({
+      constants: constants,
+      props: props
+    }),
+    computedShowHeader: computedShowHeader({
+      constants: constants,
+      props: props
+    }),
+    computedShowFooter: computedShowFooter({
+      constants: constants,
+      props: props
+    }),
+    computedMainStyle: computedMainStyle({
+      constants: constants,
+      props: props
+    }),
+    computedAsideStyle: computedAsideStyle({
+      constants: constants,
+      props: props
+    }),
+    computedHeaderStyle: computedHeaderStyle({
+      constants: constants,
+      props: props
+    }),
+    computedFooterStyle: computedFooterStyle({
+      constants: constants,
+      props: props
+    })
+  });
+  return api;
+};

package/credit-card/index.js

@@ -0,0 +1,107 @@
+export var cardType = function cardType(number) {
+  if (/^4/.test(number)) {
+    return 'visa';
+  }
+  if (/^(34|37)/.test(number)) {
+    return 'amex';
+  }
+  if (/^5[1-5]/.test(number)) {
+    return 'mastercard';
+  }
+  if (/^6011/.test(number)) {
+    return 'discover';
+  }
+  if (/^62/.test(number)) {
+    return 'unionpay';
+  }
+  if (/^9792/.test(number)) {
+    return 'troy';
+  }
+  if (/^3(?:0([0-5]|9)|[689]\\d?)\\d{0,11}/.test(number)) {
+    return 'dinersclub';
+  }
+  if (/^35(2[89]|[3-8])/.test(number)) {
+    return 'jcb';
+  }
+  return '';
+};
+export var changeFocus = function changeFocus(_ref) {
+  var refs = _ref.refs,
+    state = _ref.state;
+  return function () {
+    var target = refs[state.currentFocus];
+    if (target) {
+      var transform = "translateX(".concat(target.offsetLeft, "px) translateY(").concat(target.offsetTop, "px)");
+      state.focusElementStyle = {
+        transform: transform,
+        width: "".concat(target.offsetWidth, "px"),
+        height: "".concat(target.offsetHeight, "px")
+      };
+    } else {
+      state.focusElementStyle = null;
+    }
+  };
+};
+export var getIsNumberMasked = function getIsNumberMasked(props) {
+  return function (index, n) {
+    return index > 4 && index < 14 && props.labels.cardNumber.length > index && n.trim() !== '' && props.isCardNumberMasked;
+  };
+};
+export var changePlaceholder = function changePlaceholder(_ref2) {
+  var api = _ref2.api,
+    nextTick = _ref2.nextTick,
+    state = _ref2.state;
+  return function () {
+    if (state.cardType === 'amex') {
+      state.currentPlaceholder = state.amexCardPlaceholder;
+    } else if (state.cardType === 'dinersclub') {
+      state.currentPlaceholder = state.dinersCardPlaceholder;
+    } else {
+      state.currentPlaceholder = state.defaultCardPlaceholder;
+    }
+    nextTick(function () {
+      api.changeFocus();
+    });
+  };
+};
+export var focus = function focus(_ref3) {
+  var props = _ref3.props,
+    state = _ref3.state;
+  return function (event) {
+    var element = event.target;
+    state.isFocused = true;
+    if (element.id === props.fields.cardYear || element.id === props.fields.cardMonth) {
+      state.currentFocus = 'cardDate';
+    } else {
+      state.currentFocus = element.id;
+    }
+    state.isCardFlipped = element.id === props.fields.cardCvv;
+  };
+};
+export var blur = function blur(_ref4) {
+  var props = _ref4.props,
+    state = _ref4.state;
+  return function (event) {
+    var element = event.target;
+    state.isCardFlipped = !element.id === props.fields.cardCvv;
+    setTimeout(function () {
+      if (!state.isFocused) {
+        state.currentFocus = null;
+      }
+    }, 300);
+    state.isFocused = false;
+  };
+};
+export var toggleEvent = function toggleEvent(_ref5) {
+  var api = _ref5.api,
+    fieldsEls = _ref5.fieldsEls,
+    type = _ref5.type;
+  if (fieldsEls) {
+    for (var i = 0; i < fieldsEls.length; i++) {
+      var element = fieldsEls[i];
+      var eventType = "".concat(type, "EventListener");
+      element[eventType]('focus', api.focus);
+      element[eventType]('blur', api.blur);
+    }
+  }
+};

package/credit-card/vue.js

@@ -0,0 +1,117 @@
+import { cardType, changeFocus, getIsNumberMasked, changePlaceholder, focus, blur, toggleEvent } from './index';
+export var api = ['state', 'changeFocus', 'getIsNumberMasked', 'changePlaceholder'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    props = _ref.props,
+    computed = _ref.computed;
+  var state = reactive({
+    isFocused: false,
+    currentFocus: null,
+    isCardFlipped: false,
+    focusElementStyle: null,
+    currentPlaceholder: '',
+    amexCardPlaceholder: '#### ###### #####',
+    dinersCardPlaceholder: '#### ###### ####',
+    defaultCardPlaceholder: '#### #### #### ####',
+    cardType: computed(function () {
+      return cardType(props.labels.cardNumber);
+    })
+  });
+  return state;
+};
+var initApi = function initApi(_ref2) {
+  var api = _ref2.api,
+    state = _ref2.state,
+    props = _ref2.props,
+    refs = _ref2.refs,
+    nextTick = _ref2.nextTick;
+  Object.assign(api, {
+    state: state,
+    blur: blur({
+      props: props,
+      state: state
+    }),
+    focus: focus({
+      props: props,
+      state: state
+    }),
+    changeFocus: changeFocus({
+      refs: refs,
+      state: state
+    }),
+    getIsNumberMasked: getIsNumberMasked(props),
+    changePlaceholder: changePlaceholder({
+      api: api,
+      nextTick: nextTick,
+      state: state
+    })
+  });
+};
+var initWatch = function initWatch(_ref3) {
+  var watch = _ref3.watch,
+    state = _ref3.state,
+    api = _ref3.api;
+  watch(function () {
+    return state.currentFocus;
+  }, function () {
+    if (state.currentFocus) {
+      api.changeFocus();
+    } else {
+      state.focusElementStyle = null;
+    }
+  }, {
+    immediate: true
+  });
+  watch(function () {
+    return state.cardType;
+  }, api.changePlaceholder, {
+    immediate: true
+  });
+};
+export var renderless = function renderless(props, _ref4, _ref5) {
+  var computed = _ref4.computed,
+    onMounted = _ref4.onMounted,
+    reactive = _ref4.reactive,
+    watch = _ref4.watch,
+    onBeforeUnmount = _ref4.onBeforeUnmount;
+  var refs = _ref5.refs,
+    nextTick = _ref5.nextTick,
+    parent = _ref5.parent;
+  var api = {};
+  var state = initState({
+    reactive: reactive,
+    props: props,
+    computed: computed
+  });
+  initApi({
+    api: api,
+    state: state,
+    props: props,
+    refs: refs,
+    nextTick: nextTick
+  });
+  initWatch({
+    watch: watch,
+    state: state,
+    api: api
+  });
+  var fieldsEls;
+  onMounted(function () {
+    api.changePlaceholder();
+    fieldsEls = parent.$parent.$el.querySelectorAll('[data-credit-card-field]');
+    toggleEvent({
+      api: api,
+      fieldsEls: fieldsEls,
+      type: 'add'
+    });
+  });
+  onBeforeUnmount(function () {
+    toggleEvent({
+      api: api,
+      fieldsEls: fieldsEls,
+      type: 'remove'
+    });
+    fieldsEls = null;
+  });
+  return api;
+};

package/credit-card-form/index.js

@@ -0,0 +1,143 @@
+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 generateMonthValue = function generateMonthValue(month) {
+  return month < 10 ? "0".concat(month) : month;
+};
+export var changeName = function changeName(_ref) {
+  var emit = _ref.emit,
+    state = _ref.state;
+  return function (event) {
+    state.formData.cardName = event.target.value;
+    emit('input-card-name', state.formData.cardName);
+  };
+};
+export var changeNumber = function changeNumber(_ref2) {
+  var emit = _ref2.emit,
+    state = _ref2.state;
+  return function (event) {
+    state.formData.cardNumber = event.target.value;
+    var value = state.formData.cardNumber.replace(/\D/g, '');
+    if (/^3[47]\d{0,13}$/.test(value)) {
+      state.formData.cardNumber = value.replace(/^(\d{4})(?=\d)/, '$1 ').replace(/^(\d{4}) (\d{6})(?=\d)/, '$1 $2 ');
+      state.cardNumberMaxLength = 17;
+    } else if (/^3(?:0[0-5]|[68]\d)\d{0,11}$/.test(value)) {
+      state.formData.cardNumber = value.replace(/^(\d{4})(?=\d)/, '$1 ').replace(/^(\d{4}) (\d{6})(?=\d)/, '$1 $2 ');
+      state.cardNumberMaxLength = 16;
+    } else if (/^\d{0,16}$/.test(value)) {
+      state.formData.cardNumber = value.replace(/^(\d{4})(?=\d)/, '$1 ').replace(/^(\d{4}) (\d{4})(?=\d)/, '$1 $2 ').replace(/^(\d{4}) (\d{4}) (\d{4})(?=\d)/, '$1 $2 $3 ');
+      state.cardNumberMaxLength = 19;
+    }
+    emit('input-card-number', state.formData.cardNumber);
+  };
+};
+export var changeMonth = function changeMonth(_ref3) {
+  var emit = _ref3.emit,
+    state = _ref3.state;
+  return function () {
+    emit('input-card-month', state.cardMonth);
+  };
+};
+export var changeYear = function changeYear(_ref4) {
+  var emit = _ref4.emit,
+    state = _ref4.state;
+  return function () {
+    emit('input-card-year', state.cardYear);
+  };
+};
+export var changeCvv = function changeCvv(_ref5) {
+  var emit = _ref5.emit,
+    state = _ref5.state;
+  return function (event) {
+    state.formData.cardCvv = event.target.value;
+    emit('input-card-cvv', state.formData.cardCvv);
+  };
+};
+export var invaildCard = function invaildCard(props) {
+  return function () {
+    var number = props.formData.cardNumber;
+    var sum = 0;
+    var isOdd = true;
+    if (!number) {
+      return true;
+    }
+    for (var i = number.length - 1; i >= 0; i--) {
+      var code = number.charAt(i);
+      if (isOdd) {
+        sum += code;
+      } else {
+        code = code * 2;
+        if (code > 9) {
+          code = code.toString().split('').join('+');
+        }
+        sum += code;
+      }
+      isOdd = !isOdd;
+    }
+    if (sum % 10 !== 0) {
+      return true;
+    }
+    return false;
+  };
+};
+export var handleSubmit = function handleSubmit(_ref6) {
+  var api = _ref6.api,
+    emit = _ref6.emit,
+    props = _ref6.props,
+    state = _ref6.state;
+  return function () {
+    var invaildCard = api.invaildCard();
+    emit('submit', _objectSpread(_objectSpread({
+      invaildCard: invaildCard
+    }, props.formData), {}, {
+      cardNumber: state.mainCardNumber.replace(/ /g, '')
+    }));
+  };
+};
+export var blurCardNumber = function blurCardNumber(_ref7) {
+  var api = _ref7.api,
+    state = _ref7.state;
+  return function () {
+    if (state.isCardNumberMasked) {
+      api.maskCardNumber();
+    }
+  };
+};
+export var maskCardNumber = function maskCardNumber(_ref8) {
+  var props = _ref8.props,
+    state = _ref8.state;
+  return function () {
+    state.mainCardNumber = props.formData.cardNumber;
+    var arr = props.formData.cardNumber.split('');
+    arr.forEach(function (element, index) {
+      if (index > 4 && index < 14 && element.trim() !== '') {
+        arr[index] = '*';
+      }
+    });
+    props.formData.cardNumber = arr.join('');
+  };
+};
+export var unMaskCardNumber = function unMaskCardNumber(_ref9) {
+  var props = _ref9.props,
+    state = _ref9.state;
+  return function () {
+    props.formData.cardNumber = state.mainCardNumber;
+  };
+};
+export var focusCardNumber = function focusCardNumber(api) {
+  return function () {
+    api.unMaskCardNumber();
+  };
+};
+export var toggleMask = function toggleMask(_ref10) {
+  var api = _ref10.api,
+    state = _ref10.state;
+  return function () {
+    state.isCardNumberMasked = !state.isCardNumberMasked;
+    if (state.isCardNumberMasked) {
+      api.maskCardNumber();
+    } else {
+      api.unMaskCardNumber();
+    }
+  };
+};

package/credit-card-form/vue.js

@@ -0,0 +1,150 @@
+import { generateMonthValue, changeName, changeNumber, changeMonth, changeYear, changeCvv, invaildCard, blurCardNumber, maskCardNumber, unMaskCardNumber, focusCardNumber, toggleMask, handleSubmit } from './index';
+export var api = ['state', 'generateMonthValue', 'changeName', 'changeNumber', 'changeMonth', 'changeYear', 'changeCvv', 'invaildCard', 'blurCardNumber', 'maskCardNumber', 'unMaskCardNumber', 'focusCardNumber', 'toggleMask', 'handleSubmit'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    props = _ref.props,
+    computed = _ref.computed;
+  var state = reactive({
+    fields: {
+      cardCvv: 'v-card-cvv',
+      cardName: 'v-card-name',
+      cardYear: 'v-card-year',
+      cardMonth: 'v-card-month',
+      cardNumber: 'v-card-number'
+    },
+    minCardYear: new Date().getFullYear(),
+    isCardNumberMasked: true,
+    mainCardNumber: props.formData.cardNumber,
+    cardNumberMaxLength: 19,
+    cardMonth: props.formData.cardMonth,
+    cardYear: props.formData.cardYear,
+    formData: props.formData,
+    minCardMonth: computed(function () {
+      return props.formData.cardYear === state.minCardYear ? new Date().getMonth() + 1 : 1;
+    })
+  });
+  return state;
+};
+var initApi = function initApi(_ref2) {
+  var api = _ref2.api,
+    state = _ref2.state,
+    emit = _ref2.emit,
+    props = _ref2.props;
+  Object.assign(api, {
+    state: state,
+    generateMonthValue: generateMonthValue,
+    changeCvv: changeCvv({
+      emit: emit,
+      state: state
+    }),
+    changeYear: changeYear({
+      emit: emit,
+      state: state
+    }),
+    changeName: changeName({
+      emit: emit,
+      state: state
+    }),
+    invaildCard: invaildCard(props),
+    changeMonth: changeMonth({
+      emit: emit,
+      state: state
+    }),
+    changeNumber: changeNumber({
+      emit: emit,
+      state: state
+    }),
+    maskCardNumber: maskCardNumber({
+      props: props,
+      state: state
+    }),
+    unMaskCardNumber: unMaskCardNumber({
+      props: props,
+      state: state
+    }),
+    toggleMask: toggleMask({
+      api: api,
+      state: state
+    }),
+    handleSubmit: handleSubmit({
+      api: api,
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    blurCardNumber: blurCardNumber({
+      api: api,
+      state: state
+    }),
+    focusCardNumber: focusCardNumber(api)
+  });
+};
+var initWatch = function initWatch(_ref3) {
+  var watch = _ref3.watch,
+    state = _ref3.state,
+    props = _ref3.props,
+    emit = _ref3.emit;
+  watch(function () {
+    return state.cardYear;
+  }, function (value) {
+    state.formData.cardYear = value;
+    emit('update:formData', state.formData);
+  });
+  watch(function () {
+    return state.formData.cardNumber;
+  }, function () {
+    return emit('update:formData', state.formData);
+  });
+  watch(function () {
+    return state.formData.cardName;
+  }, function () {
+    return emit('update:formData', state.formData);
+  });
+  watch(function () {
+    return state.formData.cardCvv;
+  }, function () {
+    return emit('update:formData', state.formData);
+  });
+  watch(function () {
+    return state.cardMonth;
+  }, function (value) {
+    state.formData.cardMonth = value;
+    emit('update:formData', state.formData);
+  });
+  watch(function () {
+    return props.formData.cardYear;
+  }, function () {
+    if (props.formData.cardMonth < state.minCardMonth) {
+      state.cardMonth = '';
+    }
+  }, {
+    immediate: true
+  });
+};
+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;
+  var api = {};
+  var state = initState({
+    reactive: reactive,
+    props: props,
+    computed: computed
+  });
+  initApi({
+    api: api,
+    state: state,
+    emit: emit,
+    props: props
+  });
+  onMounted(api.maskCardNumber);
+  initWatch({
+    watch: watch,
+    state: state,
+    props: props,
+    emit: emit
+  });
+  return api;
+};