@opentiny/vue-renderless 3.14.1 → 3.15.0

package/credit-card/index.js

@@ -1,93 +0,0 @@
-import "../chunk-G2ADBYYC.js";
-const cardType = (number) => {
-  if (number.startsWith("4")) {
-    return "visa";
-  }
-  if (/^(34|37)/.test(number)) {
-    return "amex";
-  }
-  if (/^5[1-5]/.test(number)) {
-    return "mastercard";
-  }
-  if (number.startsWith("6011")) {
-    return "discover";
-  }
-  if (number.startsWith("62")) {
-    return "unionpay";
-  }
-  if (number.startsWith("9792")) {
-    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 "";
-};
-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;
-  }
-};
-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();
-  });
-};
-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;
-};
-const blur = ({ props, state }) => (event) => {
-  const element = event.target;
-  state.isCardFlipped = !element.id === props.fields.cardCvv;
-  setTimeout(() => {
-    if (!state.isFocused) {
-      state.currentFocus = null;
-    }
-  }, 300);
-  state.isFocused = false;
-};
-const toggleEvent = ({ api, fieldsEls, type }) => {
-  if (fieldsEls) {
-    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,62 +0,0 @@
-import "../chunk-G2ADBYYC.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(() => cardType(props.labels.cardNumber))
-  });
-  return 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: api2, nextTick, state })
-  });
-};
-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 });
-};
-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 api2;
-};
-export {
-  api,
-  renderless
-};

package/credit-card-form/index.js

@@ -1,112 +0,0 @@
-import {
-  __spreadProps,
-  __spreadValues
-} from "../chunk-G2ADBYYC.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);
-};
-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);
-};
-const changeMonth = ({ emit, state }) => () => {
-  emit("input-card-month", state.cardMonth);
-};
-const changeYear = ({ emit, state }) => () => {
-  emit("input-card-year", state.cardYear);
-};
-const changeCvv = ({ emit, state }) => (event) => {
-  state.formData.cardCvv = event.target.value;
-  emit("input-card-cvv", state.formData.cardCvv);
-};
-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("+");
-      }
-      sum += code;
-    }
-    isOdd = !isOdd;
-  }
-  if (sum % 10 !== 0) {
-    return true;
-  }
-  return false;
-};
-const handleSubmit = ({ api, emit, props, state }) => () => {
-  const invaildCard2 = api.invaildCard();
-  emit("submit", __spreadProps(__spreadValues({
-    invaildCard: invaildCard2
-  }, props.formData), {
-    cardNumber: state.mainCardNumber.replace(/ /g, "")
-  }));
-};
-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("");
-};
-const unMaskCardNumber = ({ props, state }) => () => {
-  props.formData.cardNumber = state.mainCardNumber;
-};
-const focusCardNumber = (api) => () => {
-  api.unMaskCardNumber();
-};
-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
-};

package/credit-card-form/vue.js

@@ -1,119 +0,0 @@
-import "../chunk-G2ADBYYC.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"
-    },
-    minCardYear: (/* @__PURE__ */ new Date()).getFullYear(),
-    isCardNumberMasked: true,
-    mainCardNumber: props.formData.cardNumber,
-    cardNumberMaxLength: 19,
-    cardMonth: props.formData.cardMonth,
-    cardYear: props.formData.cardYear,
-    formData: props.formData,
-    minCardMonth: computed(() => props.formData.cardYear === state.minCardYear ? (/* @__PURE__ */ new Date()).getMonth() + 1 : 1)
-  });
-  return 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, 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)
-  });
-};
-const initWatch = ({ watch, state, props, emit }) => {
-  watch(
-    () => state.cardYear,
-    (value) => {
-      state.formData.cardYear = value;
-      emit("update:formData", state.formData);
-    }
-  );
-  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
-};

package/detail-page/index.js

@@ -1,79 +0,0 @@
-import {
-  __spreadProps,
-  __spreadValues
-} from "../chunk-G2ADBYYC.js";
-const computedCancel = ({ constants, props, t }) => () => props.cancelButton || t(constants.CANCEL_BUTTTON_TEXT);
-const computedconfirm = ({ constants, props, t }) => () => props.saveButton || t(constants.SAVE_BUTTON_TEXT);
-const computedSetLocalTips = ({ constants, props, t }) => () => props.tips || t(constants.LOCAL_TIPS);
-const computedSetValueTitle = ({ constants, props, t }) => () => props.valueTitle || t(constants.VALUE_TITLE);
-const computedSetLocalTitle = ({ constants, props, t }) => () => props.title || t(constants.LOCAL_TITLE);
-const computedSetLabelTitle = ({ constants, props, t }) => () => props.labelTitle || t(constants.LABEL_TITLE);
-const computedSetDialogTitle = ({ constants, props, t }) => () => props.dialogTitle || t(constants.DIALOG_TITLE);
-const showDialog = (state) => () => {
-  state.isShowDialog = true;
-  state.cloneValue = state.value.map((item) => {
-    if (item.hidden != void 0) {
-      return __spreadValues({}, item);
-    } else {
-      return __spreadProps(__spreadValues({}, item), { hidden: false });
-    }
-  });
-};
-const closeDialog = (state) => () => {
-  state.isShowDialog = false;
-};
-const checkAllHander = (state) => () => state.cloneValue = state.cloneValue.map((item) => __spreadProps(__spreadValues({}, item), {
-  hidden: state.checkAll
-}));
-const checkValueHiddenItem = (state) => (index) => {
-  let hiddenItemCount = 0;
-  if (typeof index === "number") {
-    state.cloneValue[index].hidden = !state.cloneValue[index].hidden;
-  }
-  state.cloneValue.forEach((item) => {
-    if (item.hidden) {
-      ++hiddenItemCount;
-    }
-  });
-  if (hiddenItemCount > 0 && hiddenItemCount < state.cloneValue.length) {
-    state.checkAll = false;
-    return true;
-  } else if (hiddenItemCount === 0) {
-    state.checkAll = false;
-    return false;
-  } else if (hiddenItemCount === state.cloneValue.length) {
-    state.checkAll = true;
-    return false;
-  }
-};
-const saveHandler = ({ emit, state, alert }) => () => {
-  if (state.checkAll) {
-    alert({ message: state.tips, title: "", status: "warning" });
-    emit("saveWarning");
-    return;
-  }
-  state.value = state.cloneValue;
-  state.isShowDialog = false;
-};
-const watchValue = (state) => (value) => {
-  state.value = value;
-};
-const watchTextSplit = (state) => (value) => {
-  state.textSplit = value;
-};
-export {
-  checkAllHander,
-  checkValueHiddenItem,
-  closeDialog,
-  computedCancel,
-  computedSetDialogTitle,
-  computedSetLabelTitle,
-  computedSetLocalTips,
-  computedSetLocalTitle,
-  computedSetValueTitle,
-  computedconfirm,
-  saveHandler,
-  showDialog,
-  watchTextSplit,
-  watchValue
-};

package/detail-page/vue.js

@@ -1,78 +0,0 @@
-import "../chunk-G2ADBYYC.js";
-import {
-  watchTextSplit,
-  watchValue,
-  showDialog,
-  saveHandler,
-  checkAllHander,
-  checkValueHiddenItem,
-  closeDialog,
-  computedCancel,
-  computedconfirm,
-  computedSetLocalTips,
-  computedSetValueTitle,
-  computedSetLocalTitle,
-  computedSetLabelTitle,
-  computedSetDialogTitle
-} from "./index";
-const api = [
-  "state",
-  "valueChange",
-  "showDialog",
-  "closeDialog",
-  "checkAllHander",
-  "saveHandler",
-  "checkValueHiddenItem"
-];
-const initState = ({ reactive, computed, api: api2, props }) => {
-  const state = reactive({
-    value: props.modelValue,
-    cloneValue: props.modelValue,
-    textSplit: props.textSplit,
-    isShowDialog: false,
-    checkAll: false,
-    indeterminate: computed(() => api2.checkValueHiddenItem()),
-    tips: computed(() => api2.computedSetLocalTips()),
-    saveButton: computed(() => api2.computedconfirm()),
-    cancelButton: computed(() => api2.computedCancel()),
-    title: computed(() => api2.computedSetLocalTitle()),
-    labelTitle: computed(() => api2.computedSetLabelTitle()),
-    valueTitle: computed(() => api2.computedSetValueTitle()),
-    dialogTitle: computed(() => api2.computedSetDialogTitle())
-  });
-  return state;
-};
-const initApi = ({ api: api2, state, emit, alert, constants, props, t }) => {
-  Object.assign(api2, {
-    state,
-    watchValue: watchValue(state),
-    showDialog: showDialog(state),
-    closeDialog: closeDialog(state),
-    watchTextSplit: watchTextSplit(state),
-    checkAllHander: checkAllHander(state),
-    saveHandler: saveHandler({ emit, state, alert }),
-    checkValueHiddenItem: checkValueHiddenItem(state),
-    computedCancel: computedCancel({ constants, props, t }),
-    computedconfirm: computedconfirm({ constants, props, t }),
-    computedSetLocalTips: computedSetLocalTips({ constants, props, t }),
-    computedSetValueTitle: computedSetValueTitle({ constants, props, t }),
-    computedSetLocalTitle: computedSetLocalTitle({ constants, props, t }),
-    computedSetLabelTitle: computedSetLabelTitle({ constants, props, t }),
-    computedSetDialogTitle: computedSetDialogTitle({ api: api2, constants, props, t })
-  });
-};
-const initWatch = ({ watch, props, api: api2 }) => {
-  watch(() => props.modelValue, api2.watchValue, { immediate: true });
-  watch(() => props.textSplit, api2.watchTextSplit, { immediate: true });
-};
-const renderless = (props, { computed, reactive, watch }, { t, emit, constants }, { alert }) => {
-  const api2 = {};
-  const state = initState({ reactive, computed, api: api2, props });
-  initApi({ api: api2, state, emit, alert, constants, props, t });
-  initWatch({ watch, props, api: api2 });
-  return api2;
-};
-export {
-  api,
-  renderless
-};

package/slide-bar/index.js

@@ -1,67 +0,0 @@
-import "../chunk-G2ADBYYC.js";
-import { emitEvent } from "../common/event";
-const leftClick = ({ api, props, vm, state }) => () => {
-  if (state.leftLength >= 0) {
-    return;
-  }
-  state.leftLength = state.leftLength + (state.blockWidth + state.blockMargin) * props.wheelBlocks;
-  vm.$refs.insider.style.left = state.leftLength + "px";
-  api.changeState();
-};
-const rightClick = ({ api, props, vm, state }) => () => {
-  if (state.blockWrapper < Math.abs(state.leftLength) + state.wrapperWidth) {
-    return;
-  }
-  state.leftLength = state.leftLength - (state.blockWidth + state.blockMargin) * props.wheelBlocks;
-  vm.$refs.insider.style.left = state.leftLength + "px";
-  api.changeState();
-};
-const blockClick = ({ emit, state }) => ({ item, index }) => {
-  if (!emitEvent(emit, "before-click")) {
-    return;
-  }
-  state.currentIndex = index;
-  emit("click", item, index);
-};
-const changeState = ({ state }) => () => {
-  const contentWidth = state.blockWrapper;
-  state.showLeft = !(parseInt(state.leftLength, 10) >= 0);
-  state.showRight = contentWidth <= Math.abs(state.leftLength) + state.wrapperWidth;
-};
-const mouseEvent = ({ api, state }) => (e) => {
-  if (e.wheelDelta >= 0) {
-    if (state.leftLength < 0) {
-      api.leftClick();
-    }
-  } else {
-    if (state.blockWrapper > Math.abs(state.leftLength) + state.wrapperWidth) {
-      api.rightClick();
-    }
-  }
-};
-const changeSize = ({ props, state, vm }) => () => {
-  state.wrapperWidth = vm.$refs.wrapper.offsetWidth;
-  state.blockWidth = parseInt((1 - (props.initBlocks - 1) * 0.02) / props.initBlocks * state.wrapperWidth, 10);
-  state.blockMargin = parseInt(state.wrapperWidth * 0.02, 10);
-  state.blockWrapper = props.modelValue.length * state.blockWidth + (props.modelValue.length - 1) * state.blockMargin;
-};
-const swipeleft = ({ api, state }) => () => {
-  if (state.blockWrapper > Math.abs(state.leftLength) + state.wrapperWidth) {
-    api.rightClick();
-  }
-};
-const swiperight = ({ api, state }) => () => {
-  if (state.leftLength < 0) {
-    api.leftClick();
-  }
-};
-export {
-  blockClick,
-  changeSize,
-  changeState,
-  leftClick,
-  mouseEvent,
-  rightClick,
-  swipeleft,
-  swiperight
-};

package/slide-bar/vue.js

@@ -1,32 +0,0 @@
-import "../chunk-G2ADBYYC.js";
-import { leftClick, rightClick, blockClick, changeState, changeSize, mouseEvent } from "./index";
-const api = ["state", "mouseEvent", "rightClick", "leftClick", "blockClick"];
-const renderless = (props, { onMounted, reactive }, { vm, parent, emit }) => {
-  const api2 = {};
-  const state = reactive({
-    leftLength: 0,
-    blockWidth: 0,
-    blockMargin: 0,
-    showLeft: false,
-    showRight: false,
-    blockWrapper: 0,
-    wrapperWidth: 0,
-    currentIndex: -1,
-    offsetWidth: 0
-  });
-  Object.assign(api2, {
-    state,
-    blockClick: blockClick({ emit, state }),
-    changeState: changeState({ props, state }),
-    changeSize: changeSize({ props, vm, state }),
-    leftClick: leftClick({ api: api2, props, vm, state }),
-    mouseEvent: mouseEvent({ api: api2, props, vm, state }),
-    rightClick: rightClick({ api: api2, parent, props, vm, state })
-  });
-  onMounted(api2.changeSize);
-  return api2;
-};
-export {
-  api,
-  renderless
-};