@opentiny/vue-renderless 3.6.0 → 3.6.1-alpha.2

package/credit-card/index.js

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

package/credit-card/vue.js

@@ -1,117 +1,62 @@
-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({
+import "../chunk-PKUHTIDK.js";
+import { cardType, changeFocus, getIsNumberMasked, changePlaceholder, focus, blur, toggleEvent } from "./index";
+const api = ["state", "changeFocus", "getIsNumberMasked", "changePlaceholder"];
+const initState = ({ reactive, props, computed }) => {
+  const state = reactive({
     isFocused: false,
     currentFocus: null,
     isCardFlipped: false,
     focusElementStyle: null,
-    currentPlaceholder: '',
-    amexCardPlaceholder: '#### ###### #####',
-    dinersCardPlaceholder: '#### ###### ####',
-    defaultCardPlaceholder: '#### #### #### ####',
-    cardType: computed(function () {
-      return cardType(props.labels.cardNumber);
-    })
+    currentPlaceholder: "",
+    amexCardPlaceholder: "#### ###### #####",
+    dinersCardPlaceholder: "#### ###### ####",
+    defaultCardPlaceholder: "#### #### #### ####",
+    cardType: computed(() => 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
-    }),
+const initApi = ({ api: api2, state, props, refs, nextTick }) => {
+  Object.assign(api2, {
+    state,
+    blur: blur({ props, state }),
+    focus: focus({ props, state }),
+    changeFocus: changeFocus({ refs, state }),
     getIsNumberMasked: getIsNumberMasked(props),
-    changePlaceholder: changePlaceholder({
-      api: api,
-      nextTick: nextTick,
-      state: state
-    })
+    changePlaceholder: changePlaceholder({ api: api2, nextTick, 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
-  });
+const initWatch = ({ watch, state, api: api2 }) => {
+  watch(
+    () => state.currentFocus,
+    () => {
+      if (state.currentFocus) {
+        api2.changeFocus();
+      } else {
+        state.focusElementStyle = null;
+      }
+    },
+    { immediate: true }
+  );
+  watch(() => state.cardType, api2.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'
-    });
+const renderless = (props, { computed, onMounted, reactive, watch, onBeforeUnmount }, { refs, nextTick, parent }) => {
+  const api2 = {};
+  const state = initState({ reactive, props, computed });
+  initApi({ api: api2, state, props, refs, nextTick });
+  initWatch({ watch, state, api: api2 });
+  let fieldsEls;
+  onMounted(() => {
+    api2.changePlaceholder();
+    fieldsEls = parent.$parent.$el.querySelectorAll("[data-credit-card-field]");
+    toggleEvent({ api: api2, fieldsEls, type: "add" });
+  });
+  onBeforeUnmount(() => {
+    toggleEvent({ api: api2, fieldsEls, type: "remove" });
     fieldsEls = null;
   });
-  return api;
-};
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/credit-card-form/index.js

@@ -1,144 +1,112 @@
-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;
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-PKUHTIDK.js";
+const generateMonthValue = (month) => month < 10 ? `0${month}` : month;
+const changeName = ({ emit, state }) => (event) => {
+  state.formData.cardName = event.target.value;
+  emit("input-card-name", state.formData.cardName);
 };
-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);
-  };
+const changeNumber = ({ emit, state }) => (event) => {
+  state.formData.cardNumber = event.target.value;
+  state.mainCardNumber = event.target.value;
+  let 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 changeNumber = function changeNumber(_ref2) {
-  var emit = _ref2.emit,
-    state = _ref2.state;
-  return function (event) {
-    state.formData.cardNumber = event.target.value;
-    state.mainCardNumber = 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);
-  };
+const changeMonth = ({ emit, state }) => () => {
+  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);
-  };
+const changeYear = ({ emit, state }) => () => {
+  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);
-  };
+const changeCvv = ({ emit, state }) => (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;
+const invaildCard = (props) => () => {
+  let number = props.formData.cardNumber;
+  let sum = 0;
+  let isOdd = true;
+  if (!number) {
+    return true;
+  }
+  for (let i = number.length - 1; i >= 0; i--) {
+    let code = number.charAt(i);
+    if (isOdd) {
+      sum += code;
+    } else {
+      code = code * 2;
+      if (code > 9) {
+        code = code.toString().split("").join("+");
       }
-      isOdd = !isOdd;
-    }
-    if (sum % 10 !== 0) {
-      return true;
+      sum += code;
     }
-    return false;
-  };
+    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, '')
-    }));
-  };
+const handleSubmit = ({ api, emit, props, state }) => () => {
+  const invaildCard2 = api.invaildCard();
+  emit("submit", __spreadProps(__spreadValues({
+    invaildCard: invaildCard2
+  }, 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();
+const blurCardNumber = ({ api, state }) => () => {
+  if (state.isCardNumberMasked) {
+    api.maskCardNumber();
+  }
+};
+const maskCardNumber = ({ props, state }) => () => {
+  state.mainCardNumber = props.formData.cardNumber;
+  let arr = props.formData.cardNumber.split("");
+  arr.forEach((element, index) => {
+    if (index > 4 && index < 14 && element.trim() !== "") {
+      arr[index] = "*";
     }
-  };
+  });
+  props.formData.cardNumber = arr.join("");
 };
-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('');
-  };
+const unMaskCardNumber = ({ props, state }) => () => {
+  props.formData.cardNumber = state.mainCardNumber;
 };
-export var unMaskCardNumber = function unMaskCardNumber(_ref9) {
-  var props = _ref9.props,
-    state = _ref9.state;
-  return function () {
-    props.formData.cardNumber = state.mainCardNumber;
-  };
+const focusCardNumber = (api) => () => {
+  api.unMaskCardNumber();
 };
-export var focusCardNumber = function focusCardNumber(api) {
-  return function () {
+const toggleMask = ({ api, state }) => () => {
+  state.isCardNumberMasked = !state.isCardNumberMasked;
+  if (state.isCardNumberMasked) {
+    api.maskCardNumber();
+  } else {
     api.unMaskCardNumber();
-  };
+  }
+};
+export {
+  blurCardNumber,
+  changeCvv,
+  changeMonth,
+  changeName,
+  changeNumber,
+  changeYear,
+  focusCardNumber,
+  generateMonthValue,
+  handleSubmit,
+  invaildCard,
+  maskCardNumber,
+  toggleMask,
+  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();
-    }
-  };
-};