@opentiny/vue-renderless 3.12.1 → 3.13.0-alpha.0

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.ranged ? vm.$refs.reference.focus() : api.handleFocus();
+const focus = ({ api, props, vm }) => () => !props.isRange ? vm.$refs.reference.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;
@@ -724,7 +773,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 +788,7 @@ const initPopper = ({ props, hooks, vnode }) => {
       placement: placementMap[props.align] || placementMap.left
     }),
     toRefs,
-    refs,
+    vm,
     slots,
     nextTick,
     onBeforeUnmount,
@@ -795,6 +844,159 @@ 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) => {
+  if (props.autoFormat) {
+    const value = api.formatInputValue({ event, prevValue: state.displayValue });
+    state.userInput = value;
+  } else {
+    state.userInput = val;
+  }
+};
+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 +1011,8 @@ export {
   firstInputId,
   focus,
   formatAsFormatAndType,
+  formatInputValue,
+  formatText,
   formatToString,
   formatToValue,
   getMode,
@@ -826,6 +1030,7 @@ export {
   handleEnterDisplayOnlyContent,
   handleEnterPickerlabel,
   handleFocus,
+  handleInput,
   handleKeydown,
   handleMouseEnter,
   handlePick,

package/picker/mb.js

@@ -0,0 +1,42 @@
+import "../chunk-G2ADBYYC.js";
+const dateMobileToggle = ({ state, props }) => (visible) => {
+  if (props.readonly || state.pickerDisabled || state.dateMobileOption.visible === visible)
+    return;
+  if (visible) {
+    state.dateMobileOption.value = props.modelValue;
+  }
+  state.dateMobileOption.visible = visible;
+};
+const timeMobileToggle = ({ state, props, api }) => (visible) => {
+  if (props.readonly || state.pickerDisabled || state.timeMobileOption.visible === visible)
+    return;
+  if (visible) {
+    state.timeMobileOption.value = api.dateToTimeArray(props.modelValue);
+  }
+  state.timeMobileOption.visible = visible;
+};
+const timeMobileConfirm = ({ state, api }) => () => {
+  api.emitInput(api.timeArrayToDate(state.timeMobileOption.value));
+};
+const dateToTimeArray = (value) => {
+  const date = new Date(value);
+  return [date.getHours(), date.getMinutes(), date.getSeconds()];
+};
+const timeArrayToDate = ({ props }) => (value) => {
+  const timeArr = value;
+  let date = new Date(props.modelValue);
+  if (isNaN(date.getTime())) {
+    date = /* @__PURE__ */ new Date();
+  }
+  date.setHours(timeArr[0]);
+  date.setMinutes(timeArr[1]);
+  date.setSeconds(timeArr[2]);
+  return date;
+};
+export {
+  dateMobileToggle,
+  dateToTimeArray,
+  timeArrayToDate,
+  timeMobileConfirm,
+  timeMobileToggle
+};