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

package/credit-card-form/vue.js

@@ -1,16 +1,43 @@
-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({
+import "../chunk-PKUHTIDK.js";
+import {
+  generateMonthValue,
+  changeName,
+  changeNumber,
+  changeMonth,
+  changeYear,
+  changeCvv,
+  invaildCard,
+  blurCardNumber,
+  maskCardNumber,
+  unMaskCardNumber,
+  focusCardNumber,
+  toggleMask,
+  handleSubmit
+} from "./index";
+const api = [
+  "state",
+  "generateMonthValue",
+  "changeName",
+  "changeNumber",
+  "changeMonth",
+  "changeYear",
+  "changeCvv",
+  "invaildCard",
+  "blurCardNumber",
+  "maskCardNumber",
+  "unMaskCardNumber",
+  "focusCardNumber",
+  "toggleMask",
+  "handleSubmit"
+];
+const initState = ({ reactive, props, computed }) => {
+  const state = reactive({
     fields: {
-      cardCvv: 'v-card-cvv',
-      cardName: 'v-card-name',
-      cardYear: 'v-card-year',
-      cardMonth: 'v-card-month',
-      cardNumber: 'v-card-number'
+      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,
@@ -19,132 +46,74 @@ var initState = function initState(_ref) {
     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;
-    })
+    minCardMonth: computed(() => 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
-    }),
+const initApi = ({ api: api2, state, emit, props }) => {
+  Object.assign(api2, {
+    state,
+    generateMonthValue,
+    changeCvv: changeCvv({ emit, state }),
+    changeYear: changeYear({ emit, state }),
+    changeName: changeName({ emit, 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)
+    changeMonth: changeMonth({ emit, state }),
+    changeNumber: changeNumber({ emit, state }),
+    maskCardNumber: maskCardNumber({ props, state }),
+    unMaskCardNumber: unMaskCardNumber({ props, state }),
+    toggleMask: toggleMask({ api: api2, state }),
+    handleSubmit: handleSubmit({ api: api2, emit, props, state }),
+    blurCardNumber: blurCardNumber({ api: api2, state }),
+    focusCardNumber: focusCardNumber(api2)
   });
 };
-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 = '';
+const initWatch = ({ watch, state, props, emit }) => {
+  watch(
+    () => state.cardYear,
+    (value) => {
+      state.formData.cardYear = value;
+      emit("update:formData", state.formData);
     }
-  }, {
-    immediate: true
-  });
+  );
+  watch(
+    () => state.formData.cardNumber,
+    () => emit("update:formData", state.formData)
+  );
+  watch(
+    () => state.formData.cardName,
+    () => emit("update:formData", state.formData)
+  );
+  watch(
+    () => state.formData.cardCvv,
+    () => emit("update:formData", state.formData)
+  );
+  watch(
+    () => state.cardMonth,
+    (value) => {
+      state.formData.cardMonth = value;
+      emit("update:formData", state.formData);
+    }
+  );
+  watch(
+    () => props.formData.cardYear,
+    () => {
+      if (props.formData.cardMonth < state.minCardMonth) {
+        state.cardMonth = "";
+      }
+    },
+    { immediate: true }
+  );
+};
+const renderless = (props, { computed, onMounted, reactive, watch }, { emit }) => {
+  const api2 = {};
+  const state = initState({ reactive, props, computed });
+  initApi({ api: api2, state, emit, props });
+  onMounted(api2.maskCardNumber);
+  initWatch({ watch, state, props, emit });
+  return api2;
+};
+export {
+  api,
+  renderless
 };
-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;
-};