@opentiny/vue-renderless 3.13.1 → 3.14.0

package/pager/index.js

@@ -34,11 +34,11 @@ const computedTotalText = ({ props, t }) => () => {
   const HUNDRED_THOUSAND = 1e5;
   const MILLION = 1e6;
   const TEN_MILLION = 1e7;
-  if (totals <= HUNDRED_THOUSAND) {
+  if (totals < HUNDRED_THOUSAND) {
     return String(totals);
-  } else if (totals <= MILLION) {
+  } else if (totals < MILLION) {
     return t("ui.page.hundredThousand");
-  } else if (totals <= TEN_MILLION) {
+  } else if (totals < TEN_MILLION) {
     return t("ui.page.million");
   } else {
     return t("ui.page.tenMillion");
@@ -61,7 +61,7 @@ const watchInternalCurrentPage = ({ state, emit }) => (currentPage) => {
   if (state.jumperValue !== value) {
     state.jumperValue = value;
   }
-  emit("update:currentPage", currentPage);
+  emit("update:current-page", currentPage);
   emit("current-change", currentPage);
   state.lastEmittedPage = -1;
 };
@@ -89,6 +89,17 @@ const watchPageSize = ({ state }) => (pageSize) => {
 const watchTotal = ({ state }) => (total) => {
   state.internalTotal = total;
 };
+const watchShowSizes = ({ nextTick, vm }) => (newVal) => {
+  if (newVal) {
+    nextTick(() => {
+      const width = vm.$refs.pageSize[0].getBoundingClientRect().width;
+      const popover = document.querySelectorAll(".tiny-pager__selector");
+      Array.from(popover).forEach((ele) => {
+        ele.style.width = width + "px";
+      });
+    });
+  }
+};
 const handleSizeChange = ({ props, state, api, emit, vm }) => (val) => {
   val = Number(val);
   if (val !== state.internalPageSize) {
@@ -322,6 +333,7 @@ const emitChange = ({ state, nextTick, emit }) => () => {
 const setTotal = ({ state }) => (val) => {
   state.internalTotal = val;
 };
+const clickSizes = () => (e) => e.stopPropagation();
 export {
   beforeChangeHandler,
   beforeJumperChangeHandler,
@@ -329,6 +341,7 @@ export {
   beforeSizeChangeHandler,
   buildBeforePageChangeParam,
   canJumperGo,
+  clickSizes,
   computedInternalLayout,
   computedInternalPageCount,
   computedShowPager,
@@ -354,5 +367,6 @@ export {
   watchInternalPageCount,
   watchPageSize,
   watchPageSizes,
+  watchShowSizes,
   watchTotal
 };

package/pager/vue.js

@@ -25,12 +25,14 @@ import {
   getValidCurrentPage,
   emitChange,
   setTotal,
+  clickSizes,
   watchInternalCurrentPage,
   watchPageSizes,
   watchCurrentPage,
   watchInternalPageCount,
   watchPageSize,
-  watchTotal
+  watchTotal,
+  watchShowSizes
 } from "./index";
 const api = [
   "state",
@@ -54,9 +56,11 @@ const api = [
   "buildBeforePageChangeParam",
   "getValidCurrentPage",
   "emitChange",
-  "setTotal"
+  "setTotal",
+  "clickSizes"
 ];
-const renderless = (props, { reactive, computed, watch }, { emit, vm, nextTick, t }) => {
+const renderless = (props, { reactive, computed, watch }, { emit, vm, nextTick, t, designConfig }) => {
+  var _a, _b, _c, _d, _e, _f, _g;
   const api2 = {};
   const state = reactive({
     showSizes: false,
@@ -70,7 +74,11 @@ const renderless = (props, { reactive, computed, watch }, { emit, vm, nextTick,
     showPager: computed(() => api2.computedShowPager()),
     internalLayout: computed(() => api2.computedInternalLayout()),
     totalText: computed(() => api2.computedTotalText()),
-    internalPageCount: computed(() => api2.computedInternalPageCount())
+    internalPageCount: computed(() => api2.computedInternalPageCount()),
+    showJumperSufix: (_b = (_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.showJumperSufix) != null ? _b : true,
+    align: props.align || ((_c = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _c.align) || "left",
+    totalI18n: ((_d = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _d.totalI18n) || "totals",
+    totalFixedLeft: (_g = (_f = props.totalFixedLeft) != null ? _f : (_e = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _e.totalFixedLeft) != null ? _g : false
   });
   Object.assign(api2, {
     state,
@@ -99,13 +107,15 @@ const renderless = (props, { reactive, computed, watch }, { emit, vm, nextTick,
     buildBeforePageChangeParam: buildBeforePageChangeParam({ state }),
     emitChange: emitChange({ state, nextTick, emit }),
     setTotal: setTotal({ state }),
+    clickSizes: clickSizes(),
     // watch
     watchInternalCurrentPage: watchInternalCurrentPage({ state, emit }),
     watchPageSizes: watchPageSizes({ state, props }),
     watchCurrentPage: watchCurrentPage({ state, api: api2 }),
     watchInternalPageCount: watchInternalPageCount({ state, api: api2 }),
     watchPageSize: watchPageSize({ state }),
-    watchTotal: watchTotal({ state })
+    watchTotal: watchTotal({ state }),
+    watchShowSizes: watchShowSizes({ nextTick, vm })
   });
   state.internalCurrentPage = api2.getValidCurrentPage(props.currentPage);
   watch(() => state.internalCurrentPage, api2.watchInternalCurrentPage);
@@ -114,6 +124,7 @@ const renderless = (props, { reactive, computed, watch }, { emit, vm, nextTick,
   watch(() => state.internalPageCount, api2.watchInternalPageCount);
   watch(() => props.pageSize, api2.watchPageSize, { immediate: true });
   watch(() => props.total, api2.watchTotal);
+  watch(() => state.showSizes, api2.watchShowSizes);
   return api2;
 };
 export {

package/picker/index.js

@@ -6,7 +6,7 @@ import { toDate, getDateWithNewTimezone, getStrTimezone, getLocalTimezone } from
 import { isNumber, isDate } from "../common/type";
 import userPopper from "../common/deps/vue-popper";
 import { DATEPICKER } from "../common";
-import { formatDate, parseDate, isDateObject, getWeekNumber } from "../common/deps/date-util";
+import { formatDate, parseDate, isDateObject, getWeekNumber, prevDate, nextDate } from "../common/deps/date-util";
 import { extend } from "../common/object";
 import { isFunction } from "../common/type";
 import globalTimezone from "./timezone";
@@ -28,9 +28,8 @@ const getPanel = ({ DatePanel, DateRangePanel, MonthRangePanel, YearRangePanel,
   return DatePanel;
 };
 const watchPickerVisible = ({ api, vm, dispatch, emit, props, state }) => (value) => {
-  if (props.readonly || state.pickerDisabled) {
+  if (props.readonly || state.pickerDisabled || state.isMobileScreen)
     return;
-  }
   if (value) {
     api.showPicker();
     state.valueOnOpen = Array.isArray(props.modelValue) ? [...props.modelValue] : props.modelValue;
@@ -41,6 +40,9 @@ const watchPickerVisible = ({ api, vm, dispatch, emit, props, state }) => (value
     if (props.validateEvent) {
       dispatch("FormItem", "form.blur");
     }
+    if (props.changeOnConfirm && !valueEquals(props.modelValue, state.oldValue)) {
+      emit("update:modelValue", state.oldValue);
+    }
     emit("blur", vm);
     api.blur();
   }
@@ -72,16 +74,24 @@ const getMode = ({ state }) => () => {
   }
   return DATEPICKER.Day;
 };
-const formatAsFormatAndType = ({ api }) => (value, customFormat, type) => {
-  if (!value) {
+const formatAsFormatAndType = ({ api }) => (value, customFormat, type, formatObj) => {
+  if (!value)
     return null;
-  }
   const formatter = (api.typeValueResolveMap()[type] || api.typeValueResolveMap().default).formatter;
   const format = customFormat || DATEPICKER.DateFormats[type];
-  return formatter(value, format);
+  return formatter(value, format, formatObj);
 };
 const displayValue = ({ api, props, state }) => () => {
-  const formattedValue = api.formatAsFormatAndType(state.parsedValue, state.format, state.type, props.rangeSeparator);
+  const formatObj = {
+    rangeSeparator: props.rangeSeparator
+  };
+  const formattedValue = api.formatAsFormatAndType(
+    state.parsedValue,
+    state.format,
+    state.type,
+    props.rangeSeparator,
+    formatObj
+  );
   if (Array.isArray(state.userInput)) {
     return [
       state.userInput[0] || formattedValue && formattedValue[0] || "",
@@ -110,7 +120,7 @@ const parsedValue = ({ api, props, state, t }) => () => {
     return props.modelValue;
   }
   const valueIsDateObject = isDateObject(props.modelValue) || Array.isArray(props.modelValue) && props.modelValue.every(isDateObject);
-  const { from, to, isServiceTimezone } = state.timezone;
+  const { from, to, isServiceTimezone, timezoneOffset } = state.timezone;
   if (valueIsDateObject && !isServiceTimezone) {
     return props.modelValue;
   }
@@ -125,18 +135,18 @@ const parsedValue = ({ api, props, state, t }) => () => {
     }
     const result = api.parseAsFormatAndType(date, state.valueFormat, state.type, props.rangeSeparator);
     if (Array.isArray(result)) {
-      return result.map((date2) => getDateWithNewTimezone(date2, from, to));
+      return result.map((date2) => getDateWithNewTimezone(date2, from, to, timezoneOffset));
     }
-    return getDateWithNewTimezone(result || props.modelValue, from, to);
+    return getDateWithNewTimezone(result || props.modelValue, from, to, timezoneOffset);
   }
   const trans = (value) => typeof value === "string" || isNumber(value) ? toDate(value) : value;
-  const values = [].concat(props.modelValue).map((val) => getDateWithNewTimezone(trans(val), from, to));
+  const values = [].concat(props.modelValue).map((val) => getDateWithNewTimezone(trans(val), from, to, timezoneOffset));
   return values.length > 1 ? values : values[0];
 };
 const getTimezone = ({ props, utils }) => () => {
-  const { dbTimezone, timezone, isutc8, type = "date", iso8601 } = props;
+  const { dbTimezone, timezone, isutc8, type = "date", iso8601, timezoneOffset } = props;
   const setting = utils.getDateFormat && utils.getDateFormat();
-  const { DbTimezone, Timezone } = setting || {};
+  const { DbTimezone, Timezone, TimezoneOffset } = setting || {};
   const cur = getLocalTimezone();
   const isTzNumber = (z) => typeof z === "number" && z >= -12 && z <= 12;
   if (!~type.indexOf("datetime")) {
@@ -144,6 +154,7 @@ const getTimezone = ({ props, utils }) => () => {
   }
   let serveTimezone = isTzNumber(dbTimezone) ? dbTimezone : isTzNumber(DbTimezone) ? DbTimezone : cur;
   let clientTimezone = isTzNumber(timezone) ? timezone : isTzNumber(Timezone) ? Timezone : cur;
+  let clientTimezoneOffset = isNumber(timezoneOffset) ? timezoneOffset : isNumber(TimezoneOffset) ? TimezoneOffset : 0;
   const value = props.modelValue;
   const str = (Array.isArray(value) ? value[0] : value) || "";
   const match = typeof str === "string" && str.match(/(-|\+)(\d{2}):?(\d{2})$/);
@@ -153,7 +164,8 @@ const getTimezone = ({ props, utils }) => () => {
   return {
     from: serveTimezone,
     to: isutc8 ? 8 : clientTimezone,
-    isServiceTimezone: !!setting
+    isServiceTimezone: !!setting,
+    timezoneOffset: clientTimezoneOffset
   };
 };
 const nullOrString = (value) => {
@@ -182,11 +194,12 @@ const dateFormatter = ({ t }) => (value, format) => {
   }
   return formatDate(value, format, t);
 };
-const dateParser = ({ t }) => (text, format) => {
+const dateParser = ({ t, props }) => (text, format) => {
   if (format === DATEPICKER.TimesTamp) {
     return new Date(Number(text));
   }
-  return parseDate(text, format, t);
+  const value = props.autoFormat ? formatText({ text, format }) : text;
+  return parseDate(value, format, t);
 };
 const rangeFormatter = (api) => (value, format) => {
   if (Array.isArray(value) && value.length === 2) {
@@ -227,24 +240,43 @@ const getDefaultOfTypeValueResolveMap = () => ({
     return text === void 0 || text === "" ? null : text;
   }
 });
-const getWeekOfTypeValueResolveMap = ({ t, api }) => ({
-  formatter(value, format) {
+const getWeekOfTypeValueResolveMap = ({ t, props, api }) => ({
+  formatter(value, format, formatObj) {
     const weekDate = getWeekData(value);
     let week = getWeekNumber(weekDate);
     let month = weekDate.getMonth();
     const trueDate = new Date(weekDate);
+    const { rangeSeparator = "-", type = "format" } = formatObj;
     if (week === 1 && month === 11) {
       trueDate.setHours(0, 0, 0, 0);
       trueDate.setDate(trueDate.getDate() + 3 - (trueDate.getDay() + 6) % 7);
     }
-    let date = formatDate(trueDate, format, t);
-    date = /WW/.test(date) ? date.replace(/WW/, week < 10 ? "0" + week : week) : date.replace(/W/, week);
+    let date;
+    if (type === "format" && !/W/.test(format)) {
+      const { start, end } = getWeekRange(value, format, t, props.pickerOptions);
+      date = `${start} ${rangeSeparator} ${end}`;
+    } else {
+      date = formatDate(trueDate, format, t);
+      date = /WW/.test(date) ? date.replace(/WW/, week < 10 ? "0" + week : week) : date.replace(/W/, week);
+    }
     return date;
   },
   parser(text, format) {
     return api.typeValueResolveMap().date.parser(text, format);
   }
 });
+const getWeekRange = (value, format, t, pickerOptions) => {
+  const firstDayOfWeek = pickerOptions && pickerOptions.firstDayOfWeek ? pickerOptions.firstDayOfWeek : 7;
+  const dayOffset = (value.getDay() - firstDayOfWeek + 7) % 7;
+  const startDate = prevDate(value, dayOffset);
+  const endDate = nextDate(startDate, 6);
+  const start = formatDate(startDate, format, t);
+  const end = formatDate(endDate, format, t);
+  return {
+    start,
+    end
+  };
+};
 const getNumberOfTypeValueResolveMap = () => ({
   formatter(value) {
     return value ? String(value) : "";
@@ -264,9 +296,9 @@ const getDatesOfTypeValueResolveMap = (api) => ({
     );
   }
 });
-const typeValueResolveMap = ({ api, t }) => () => ({
+const typeValueResolveMap = ({ api, props, t }) => () => ({
   default: getDefaultOfTypeValueResolveMap(),
-  week: getWeekOfTypeValueResolveMap({ t, api }),
+  week: getWeekOfTypeValueResolveMap({ t, props, api }),
   date: { formatter: api.dateFormatter, parser: api.dateParser },
   datetime: { formatter: api.dateFormatter, parser: api.dateParser },
   daterange: { formatter: api.rangeFormatter, parser: api.rangeParser },
@@ -305,7 +337,7 @@ const secondInputId = ({ props, state }) => () => {
   }
   return obj;
 };
-const focus = ({ api, props, vm }) => () => !props.isRange ? vm.$refs.reference.focus() : api.handleFocus();
+const focus = ({ api, props, vm }) => () => !props.isRange ? vm.$refs.reference.querySelector("input").focus() : api.handleFocus();
 const blur = (state) => () => state.refInput.forEach((input) => input.blur());
 const parseValue = ({ api, props, state }) => (value) => {
   const isParsed = isDateObject(value) || Array.isArray(value) && value.every(isDateObject);
@@ -314,10 +346,12 @@ const parseValue = ({ api, props, state }) => (value) => {
   }
   return value;
 };
-const formatToValue = ({ api, props, state }) => (date) => {
+const formatToValue = ({ api, state }) => (date) => {
   const isFormattable = isDateObject(date) || Array.isArray(date) && date.every(isDateObject);
   if (state.valueFormat && isFormattable) {
-    return api.formatAsFormatAndType(date, state.valueFormat, state.type, props.rangeSeparator);
+    return api.formatAsFormatAndType(date, state.valueFormat, state.type, {
+      type: "value-format"
+    });
   }
   return date;
 };
@@ -354,18 +388,20 @@ const handleChange = ({ api, state }) => () => {
     state.userInput = null;
   }
 };
-const handleStartInput = (state) => (event) => {
+const handleStartInput = ({ state, props, api }) => (event) => {
+  const value = props.autoFormat ? api.formatInputValue({ event, prevValue: state.displayValue[0] }) : event.target.value;
   if (state.userInput) {
-    state.userInput = [event.target.value, state.userInput[1]];
+    state.userInput = [value, state.userInput[1]];
   } else {
-    state.userInput = [event.target.value, null];
+    state.userInput = [value, null];
   }
 };
-const handleEndInput = (state) => (event) => {
+const handleEndInput = ({ state, props, api }) => (event) => {
+  const value = props.autoFormat ? api.formatInputValue({ event, prevValue: state.displayValue[1] }) : event.target.value;
   if (state.userInput) {
-    state.userInput = [state.userInput[0], event.target.value];
+    state.userInput = [state.userInput[0], value];
   } else {
-    state.userInput = [null, event.target.value];
+    state.userInput = [null, value];
   }
 };
 const handleStartChange = ({ api, state }) => () => {
@@ -463,13 +499,19 @@ const handleClose = ({ api, props, state }) => () => {
   state.pickerVisible = false;
   if (state.type === DATEPICKER.Dates) {
     const oldValue = api.parseAsFormatAndType(state.valueOnOpen, state.valueFormat, state.type, props.rangeSeparator) || state.valueOnOpen;
-    api.emitInput(oldValue);
+    api.emitInput(oldValue, true);
   }
 };
-const handleFocus = ({ emit, vm, state }) => () => {
+const handleFocus = ({ emit, vm, state, api }) => () => {
   const type = state.type;
-  if (DATEPICKER.TriggerTypes.includes(type) && !state.pickerVisible) {
-    state.pickerVisible = true;
+  if (DATEPICKER.TriggerTypes.includes(type)) {
+    if (state.isMobileScreen && state.isDateMobileComponent) {
+      api.dateMobileToggle(true);
+    } else if (state.isMobileScreen && state.isTimeMobileComponent) {
+      api.timeMobileToggle(true);
+    } else {
+      state.pickerVisible = true;
+    }
   }
   emit("focus", vm.$refs.reference);
 };
@@ -533,13 +575,17 @@ const showPicker = ({ api, nextTick, updatePopper, state }) => () => {
   state.pickerVisible = state.picker.state.visible = true;
   state.picker.state.value = state.parsedValue;
   state.picker.resetView && state.picker.resetView();
-  updatePopper(state.picker.$el);
-  state.picker.adjustSpinners && state.picker.adjustSpinners();
+  nextTick(() => {
+    updatePopper(state.picker.$el);
+    state.picker.adjustSpinners && state.picker.adjustSpinners();
+  });
 };
 const handlePick = ({ state, api }) => (date = "", visible = false) => {
+  if (!state.picker)
+    return;
   state.userInput = null;
   state.pickerVisible = state.picker.state.visible = visible;
-  api.emitInput(date);
+  api.emitInput(date, visible);
   state.date = date;
   state.picker.resetView && state.picker.resetView();
 };
@@ -659,18 +705,21 @@ const emitChange = ({ api, dispatch, emit, props, state }) => (val) => {
     api.emitDbTime(props.value);
   }
 };
-const emitInput = ({ api, emit, props, state }) => (val) => {
+const emitInput = ({ api, emit, props, state }) => (val, visible = false) => {
   let value = val;
-  const { from, to } = state.timezone;
+  const { from, to, timezoneOffset } = state.timezone;
   if (props.type === "datetime") {
-    value = getDateWithNewTimezone(value, to, from);
+    value = getDateWithNewTimezone(value, to, from, -timezoneOffset);
   } else if (props.type === "datetimerange" && Array.isArray(value)) {
-    value = value.map((val2) => getDateWithNewTimezone(val2, to, from));
+    value = value.map((val2) => getDateWithNewTimezone(val2, to, from, -timezoneOffset));
   }
   const formatted = api.formatToValue(value) || val;
   if (!valueEquals(props.modelValue, formatted)) {
     emit("update:modelValue", formatted);
   }
+  if (!visible && !valueEquals(state.oldValue, formatted)) {
+    state.oldValue = formatted;
+  }
 };
 const isValidValue = ({ api, state }) => (value) => {
   if (!state.picker) {
@@ -686,10 +735,10 @@ const watchIsRange = ({ api, state, TimePanel, TimeRangePanel }) => (value) => {
   state.panel = value ? TimeRangePanel : TimePanel;
   api.mountPicker();
 };
-const getType = ({ props }) => () => {
-  if (props.componentName === DATEPICKER.DatePicker) {
+const getType = ({ parent, props }) => () => {
+  if (parent.componentName === DATEPICKER.DatePicker) {
     return props.type;
-  } else if (props.componentName === DATEPICKER.TimePicker) {
+  } else if (parent.componentName === DATEPICKER.TimePicker) {
     return props.isRange ? DATEPICKER.TimeRange : DATEPICKER.Time;
   }
   return DATEPICKER.TimeSelect;
@@ -702,7 +751,9 @@ const watchModelValue = ({ api, props, state, dispatch }) => (value, oldValue) =
       api.parseString(state.historyInput && state.historyInput[1])
     ];
   }
-  api.emitChange(props.modelValue);
+  if (props.changeCompat) {
+    api.emitChange(props.modelValue);
+  }
   if (!valueEquals(value, oldValue) && !state.pickerVisible && props.validateEvent) {
     dispatch("FormItem", "form.change", value);
   }
@@ -724,7 +775,7 @@ const computedTriggerClass = ({ props, state }) => () => props.suffixIcon || pro
 const computedHaveTrigger = ({ props }) => () => typeof props.showTrigger !== "undefined" ? props.showTrigger : DATEPICKER.TriggerTypes.includes(props.type);
 const initPopper = ({ props, hooks, vnode }) => {
   const { reactive, watch, toRefs, onBeforeUnmount, onDeactivated } = hooks;
-  const { emit, refs, slots, nextTick } = vnode;
+  const { emit, vm, slots, nextTick } = vnode;
   const placementMap = DATEPICKER.PlacementMap;
   return userPopper({
     reactive,
@@ -739,7 +790,7 @@ const initPopper = ({ props, hooks, vnode }) => {
       placement: placementMap[props.align] || placementMap.left
     }),
     toRefs,
-    refs,
+    vm,
     slots,
     nextTick,
     onBeforeUnmount,
@@ -795,6 +846,161 @@ const setInputPaddingLeft = ({ props, state, vm, nextTick }) => () => {
     });
   }
 };
+const getSelectionStart = ({ value, format, regx, event }) => {
+  const formatMatchArr = format.match(regx);
+  let selectionStart = getSelectionStartIndex(event);
+  let I = 0;
+  if (value !== "") {
+    const match = value.match(/[0-9]/g);
+    I = match === null ? 0 : match.length;
+    for (let i = 0; i < formatMatchArr.length; i++) {
+      I -= Math.max(formatMatchArr[i].length, 2);
+    }
+    I = I >= 0 ? 1 : 0;
+    I === 1 && selectionStart >= value.length && (selectionStart = value.length - 1);
+  }
+  return { selectionStart, I };
+};
+const getNum = (value, format, regx) => {
+  let len = value.length;
+  if (format && regx) {
+    const formatMatchArr = format.match(regx);
+    len = Math.max(len, formatMatchArr.join("").length);
+  }
+  let num = { str: "", arr: [] };
+  for (let i = 0; i < len; i++) {
+    let char = value.charAt(i) ? value.charAt(i) : "00";
+    if (/[0-9]/.test(char)) {
+      num.str += char;
+    } else {
+      num.arr[i] = 1;
+    }
+  }
+  return num;
+};
+const getSelectionStartIndex = (event) => {
+  const inputElem = event.target;
+  return inputElem.selectionStart - (event.data ? event.data.length : 0);
+};
+const getNumAndSelectionStart = ({ value, format, regx, event, needSelectionStart }) => {
+  if (needSelectionStart) {
+    let { selectionStart, I } = getSelectionStart({ value, format, regx, event });
+    let valueStr;
+    if (event.data) {
+      valueStr = value.substring(0, selectionStart) + event.data + value.substring(selectionStart + I);
+      selectionStart++;
+    } else {
+      valueStr = value;
+    }
+    const numStr = getNum(valueStr);
+    return { numStr, selectionStart };
+  } else {
+    const numStr = getNum(value, format, regx);
+    return { numStr };
+  }
+};
+const checkFormat = ({ value, format, startIndex, selectionStart, regx, needSelectionStart }) => {
+  if (!needSelectionStart && regx.lastIndex === 0 || needSelectionStart && regx.lastIndex === 0 && selectionStart >= startIndex) {
+    const subFormat = `(?<=${format.substring(0, startIndex)})(\\s*\\S*\\s*)+`;
+    const pattern = new RegExp(subFormat, "g");
+    const res = format.match(pattern);
+    if (res) {
+      value += res[0];
+      selectionStart = value.length;
+    }
+  }
+  return { value, selectionStart };
+};
+const moveStart = (inputElem, moveStartIndex) => {
+  if (inputElem.setSelectionRange) {
+    inputElem.focus();
+    setTimeout(() => {
+      inputElem.setSelectionRange(moveStartIndex, moveStartIndex);
+    }, 0);
+  }
+};
+const handleInput = ({ state, props, api }) => (val, event) => {
+  event = val.target ? val : event;
+  if (props.autoFormat) {
+    const value = api.formatInputValue({ event, prevValue: state.displayValue });
+    state.userInput = value;
+  } else {
+    const val2 = event.target.value;
+    state.userInput = val2;
+  }
+};
+const formatInputValue = ({ props, state }) => ({ event, prevValue = "" }) => {
+  const val = event.target.value;
+  const inputData = event.data;
+  const format = state.type === "time-select" ? "HH:mm" : props.format || DATEPICKER.DateFormats[state.type];
+  if (inputData && inputData.charCodeAt() >= 48 && inputData.charCodeAt() <= 57) {
+    return formatText({ event, format, text: prevValue, needSelectionStart: true });
+  } else {
+    return val;
+  }
+};
+const formatText = ({ event, text, format, needSelectionStart = false }) => {
+  if (!format)
+    return text;
+  let cursorOffset = 0;
+  let value = "";
+  let regx = /yyyy|yyy|yy|y|MM|M|dd|d|HH|hh|H|h|mm|m|ss|s|WW|W|w/g;
+  let startIndex = 0;
+  let { numStr, selectionStart } = getNumAndSelectionStart({
+    value: text,
+    format,
+    regx,
+    event,
+    needSelectionStart
+  });
+  let matchResult = regx.exec(format);
+  while (numStr.str !== "" && matchResult !== null) {
+    let subStr;
+    let newNum;
+    let subLen;
+    const endIndex = matchResult.index;
+    if (startIndex >= 0) {
+      value += format.substring(startIndex, endIndex);
+    }
+    selectionStart >= startIndex + cursorOffset && selectionStart <= endIndex + cursorOffset && (selectionStart = selectionStart + endIndex - startIndex);
+    startIndex = regx.lastIndex;
+    subLen = startIndex - endIndex;
+    subStr = numStr.str.substring(0, subLen);
+    const firstMatchChar = matchResult[0].charAt(0);
+    const firstChar = parseInt(subStr.charAt(0), 10);
+    if (numStr.str.length > 1) {
+      const secondChar = numStr.str.charAt(1);
+      newNum = 10 * firstChar + parseInt(secondChar, 10);
+    } else {
+      newNum = firstChar;
+    }
+    if (numStr.arr[endIndex + 1] || firstMatchChar === "M" && newNum > 12 || firstMatchChar === "d" && newNum > 31 || ["H", "h"].includes(firstMatchChar) && newNum > 23 || "ms".includes(firstMatchChar) && newNum > 59) {
+      subStr = matchResult[0].length === 2 ? "0" + firstChar : firstChar;
+      selectionStart++;
+    } else {
+      if (subLen === 1) {
+        subStr = String(newNum);
+        subLen++;
+        cursorOffset++;
+      }
+    }
+    value += subStr;
+    numStr.str = numStr.str.substring(subLen);
+    matchResult = regx.exec(format);
+  }
+  const { value: val, selectionStart: cursorPos } = checkFormat({
+    value,
+    format,
+    startIndex,
+    selectionStart,
+    regx,
+    needSelectionStart
+  });
+  value = val;
+  selectionStart = cursorPos;
+  needSelectionStart && moveStart(event.target, selectionStart);
+  return value;
+};
 export {
   blur,
   computedFormat,
@@ -809,6 +1015,8 @@ export {
   firstInputId,
   focus,
   formatAsFormatAndType,
+  formatInputValue,
+  formatText,
   formatToString,
   formatToValue,
   getMode,
@@ -826,6 +1034,7 @@ export {
   handleEnterDisplayOnlyContent,
   handleEnterPickerlabel,
   handleFocus,
+  handleInput,
   handleKeydown,
   handleMouseEnter,
   handlePick,