@nutui/nutui 3.1.22-beta.5 → 3.1.23-beta.1

package/dist/packages/_es/DatePicker.js

@@ -1,109 +1,326 @@
 /*!
-* @nutui/nutui v3.1.22-beta.5 Fri Jun 24 2022 15:10:09 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.1 Mon Jun 27 2022 21:39:05 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { reactive as e, computed as t, onBeforeMount as a, watch as n, toRefs as r, resolveComponent as o, openBlock as l, createBlock as u, withCtx as i, renderSlot as s } from "vue";
-import c from "./Picker.js";
-import { popupProps as m } from "./Popup.js";
-import { c as d } from "./component.js";
-import { _ as p } from "./plugin-vue_export-helper.js";
+import { reactive, computed, onBeforeMount, watch, toRefs, resolveComponent, openBlock, createBlock, withCtx, renderSlot } from "vue";
+import Picker from "./Picker.js";
+import { popupProps } from "./Popup.js";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "./OverLay.js";
 import "../locale/lang";
 import "./Icon.js";
 import "./pxCheck.js";
-function h(e2, t2 = 2) {
-  let a2 = e2 + "";
-  for (; a2.length < t2; )
-    a2 = "0" + a2;
-  return a2;
+function padZero(num, targetLength = 2) {
+  let str = num + "";
+  while (str.length < targetLength) {
+    str = "0" + str;
+  }
+  return str;
 }
-const { componentName: g, create: y, translate: D } = d("datepicker"), f = new Date().getFullYear();
-function x(e2) {
-  return Object.prototype.toString.call(e2) === "[object Date]" && !isNaN(e2.getTime());
+const { componentName, create, translate } = createComponent("datepicker");
+const currentYear = new Date().getFullYear();
+function isDate(val) {
+  return Object.prototype.toString.call(val) === "[object Date]" && !isNaN(val.getTime());
 }
-const b = { day: D("day"), year: D("year"), month: D("month"), hour: D("hour"), minute: D("minute"), seconds: D("seconds") }, v = y({ components: { [c.name]: c }, props: { ...m, modelValue: null, title: { type: String, default: "" }, okText: { type: String, default: "" }, cancelText: { type: String, default: "" }, type: { type: String, default: "date" }, isShowChinese: { type: Boolean, default: false }, minuteStep: { type: Number, default: 1 }, minDate: { type: Date, default: () => new Date(f - 10, 0, 1), validator: x }, maxDate: { type: Date, default: () => new Date(f + 10, 11, 31), validator: x }, formatter: { type: Function, default: null }, filter: Function }, emits: ["click", "update:visible", "change", "confirm", "update:moduleValue"], setup(o2, { emit: l2 }) {
-  const u2 = e({ show: o2.visible, currentDate: new Date(), title: o2.title, selectedValue: [] }), i2 = (e2) => {
-    x(e2) || (e2 = o2.minDate);
-    let t2 = Math.max(e2.getTime(), o2.minDate.getTime());
-    return t2 = Math.min(t2, o2.maxDate.getTime()), new Date(t2);
-  };
-  function s2(e2, t2) {
-    return 32 - new Date(e2, t2 - 1, 32).getDate();
-  }
-  const c2 = (e2, t2) => {
-    const a2 = o2[`${e2}Date`], n2 = a2.getFullYear();
-    let r2 = 1, l3 = 1, u3 = 0, i3 = 0;
-    e2 === "max" && (r2 = 12, l3 = s2(t2.getFullYear(), t2.getMonth() + 1), u3 = 23, i3 = 59);
-    const c3 = i3;
-    return t2.getFullYear() !== n2 ? { [`${e2}Year`]: n2, [`${e2}Month`]: r2, [`${e2}Day`]: l3, [`${e2}Hour`]: u3, [`${e2}Minute`]: i3, [`${e2}Seconds`]: c3 } : (r2 = a2.getMonth() + 1, t2.getMonth() + 1 === r2 && (l3 = a2.getDate(), t2.getDate() === l3 && (u3 = a2.getHours(), t2.getHours() === u3 && (i3 = a2.getMinutes()))), { [`${e2}Year`]: n2, [`${e2}Month`]: r2, [`${e2}Day`]: l3, [`${e2}Hour`]: u3, [`${e2}Minute`]: i3, [`${e2}Seconds`]: c3 });
-  }, m2 = t(() => {
-    const { maxYear: e2, maxDay: t2, maxMonth: a2, maxHour: n2, maxMinute: r2, maxSeconds: l3 } = c2("max", u2.currentDate), { minYear: i3, minDay: s3, minMonth: m3, minHour: d3, minMinute: p3, minSeconds: h2 } = c2("min", u2.currentDate);
-    let g3 = [{ type: "year", range: [i3, e2] }, { type: "month", range: [m3, a2] }, { type: "day", range: [s3, t2] }, { type: "hour", range: [d3, n2] }, { type: "minute", range: [p3, r2] }, { type: "seconds", range: [h2, l3] }];
-    switch (o2.type) {
-      case "date":
-        g3 = g3.slice(0, 3);
-        break;
-      case "datetime":
-        g3 = g3.slice(0, 5);
-        break;
-      case "time":
-        g3 = g3.slice(3, 6);
-        break;
-      case "year-month":
-        g3 = g3.slice(0, 2);
-        break;
-      case "month-day":
-        g3 = g3.slice(1, 3);
-        break;
-      case "datehour":
-        g3 = g3.slice(0, 4);
-    }
-    return g3;
-  }), d2 = t(() => m2.value.map((e2, t2) => g2(e2.range[0], e2.range[1], y2(e2.type), e2.type, t2))), p2 = (e2, t2) => {
-    const { formatter: a2, isShowChinese: n2 } = o2;
-    let r2 = null;
-    if (a2)
-      r2 = a2(e2, { text: h(t2, 2), value: h(t2, 2) });
-    else {
-      const a3 = h(t2, 2);
-      r2 = { text: a3 + (n2 ? b[e2] : ""), value: a3 };
+const zhCNType = {
+  day: translate("day"),
+  year: translate("year"),
+  month: translate("month"),
+  hour: translate("hour"),
+  minute: translate("minute"),
+  seconds: translate("seconds")
+};
+const _sfc_main = create({
+  components: {
+    [Picker.name]: Picker
+  },
+  props: {
+    ...popupProps,
+    modelValue: null,
+    title: {
+      type: String,
+      default: ""
+    },
+    okText: {
+      type: String,
+      default: ""
+    },
+    cancelText: {
+      type: String,
+      default: ""
+    },
+    type: {
+      type: String,
+      default: "date"
+    },
+    isShowChinese: {
+      type: Boolean,
+      default: false
+    },
+    minuteStep: {
+      type: Number,
+      default: 1
+    },
+    minDate: {
+      type: Date,
+      default: () => new Date(currentYear - 10, 0, 1),
+      validator: isDate
+    },
+    maxDate: {
+      type: Date,
+      default: () => new Date(currentYear + 10, 11, 31),
+      validator: isDate
+    },
+    formatter: {
+      type: Function,
+      default: null
+    },
+    filter: Function
+  },
+  emits: ["click", "update:visible", "change", "confirm", "update:moduleValue"],
+  setup(props, { emit }) {
+    const state = reactive({
+      show: props.visible,
+      currentDate: new Date(),
+      title: props.title,
+      selectedValue: []
+    });
+    const formatValue = (value) => {
+      if (!isDate(value)) {
+        value = props.minDate;
+      }
+      let timestmp = Math.max(value.getTime(), props.minDate.getTime());
+      timestmp = Math.min(timestmp, props.maxDate.getTime());
+      return new Date(timestmp);
+    };
+    function getMonthEndDay(year, month) {
+      return 32 - new Date(year, month - 1, 32).getDate();
     }
-    return r2;
-  }, g2 = (e2, t2, a2, n2, r2) => {
-    const l3 = [];
-    let i3 = 0;
-    for (; e2 <= t2; )
-      l3.push(p2(n2, e2)), n2 === "minute" ? e2 += o2.minuteStep : e2++, e2 <= a2 && i3++;
-    return u2.selectedValue[r2] = l3[i3].value, o2.filter ? o2.filter(n2, l3) : l3;
-  }, y2 = (e2) => e2 === "year" ? u2.currentDate.getFullYear() : e2 === "month" ? u2.currentDate.getMonth() + 1 : e2 === "day" ? u2.currentDate.getDate() : e2 === "hour" ? u2.currentDate.getHours() : e2 === "minute" ? u2.currentDate.getMinutes() : e2 === "seconds" ? u2.currentDate.getSeconds() : 0;
-  return a(() => {
-    u2.currentDate = i2(o2.modelValue);
-  }), n(() => o2.modelValue, (e2) => {
-    u2.currentDate = i2(e2);
-  }), n(() => o2.title, (e2) => {
-    u2.title = e2;
-  }), n(() => o2.visible, (e2) => {
-    u2.show = e2;
-  }), { ...r(u2), changeHandler: ({ columnIndex: e2, selectedValue: t2, selectedOptions: a2 }) => {
-    if (["date", "datetime", "datehour", "month-day"].includes(o2.type)) {
-      let e3 = [];
-      t2.forEach((t3) => {
-        e3.push(t3);
-      }), o2.type == "month-day" && e3.length < 3 && e3.unshift(new Date(o2.modelValue || o2.minDate || o2.maxDate).getFullYear());
-      const a3 = Number(e3[0]), n2 = Number(e3[1]) - 1, r2 = Math.min(Number(e3[2]), s2(Number(e3[0]), Number(e3[1])));
-      let l3 = null;
-      o2.type === "date" || o2.type === "month-day" ? l3 = new Date(a3, n2, r2) : o2.type === "datetime" ? l3 = new Date(a3, n2, r2, Number(e3[3]), Number(e3[4])) : o2.type === "datehour" && (l3 = new Date(a3, n2, r2, Number(e3[3]))), u2.currentDate = i2(l3);
-    }
-    l2("change", { columnIndex: e2, selectedValue: t2, selectedOptions: a2 });
-  }, closeHandler: () => {
-    l2("update:visible", false);
-  }, confirm: (e2) => {
-    l2("update:visible", false), l2("confirm", e2);
-  }, columns: d2 };
-} });
-var w = p(v, [["render", function(e2, t2, a2, n2, r2, c2) {
-  const m2 = o("nut-picker");
-  return l(), u(m2, { modelValue: e2.selectedValue, "onUpdate:modelValue": t2[0] || (t2[0] = (t3) => e2.selectedValue = t3), visible: e2.show, "onUpdate:visible": t2[1] || (t2[1] = (t3) => e2.show = t3), okText: e2.okText, cancelText: e2.cancelText, onClose: e2.closeHandler, columns: e2.columns, onChange: e2.changeHandler, title: e2.title, onConfirm: e2.confirm, isWrapTeleport: e2.isWrapTeleport }, { default: i(() => [s(e2.$slots, "default")]), _: 3 }, 8, ["modelValue", "visible", "okText", "cancelText", "onClose", "columns", "onChange", "title", "onConfirm", "isWrapTeleport"]);
-}]]);
-export { w as default };
+    const getBoundary = (type, value) => {
+      const boundary = props[`${type}Date`];
+      const year = boundary.getFullYear();
+      let month = 1;
+      let day = 1;
+      let hour = 0;
+      let minute = 0;
+      if (type === "max") {
+        month = 12;
+        day = getMonthEndDay(value.getFullYear(), value.getMonth() + 1);
+        hour = 23;
+        minute = 59;
+      }
+      const seconds = minute;
+      if (value.getFullYear() === year) {
+        month = boundary.getMonth() + 1;
+        if (value.getMonth() + 1 === month) {
+          day = boundary.getDate();
+          if (value.getDate() === day) {
+            hour = boundary.getHours();
+            if (value.getHours() === hour) {
+              minute = boundary.getMinutes();
+            }
+          }
+        }
+      } else {
+        return {
+          [`${type}Year`]: year,
+          [`${type}Month`]: month,
+          [`${type}Day`]: day,
+          [`${type}Hour`]: hour,
+          [`${type}Minute`]: minute,
+          [`${type}Seconds`]: seconds
+        };
+      }
+      return {
+        [`${type}Year`]: year,
+        [`${type}Month`]: month,
+        [`${type}Day`]: day,
+        [`${type}Hour`]: hour,
+        [`${type}Minute`]: minute,
+        [`${type}Seconds`]: seconds
+      };
+    };
+    const ranges = computed(() => {
+      const { maxYear, maxDay, maxMonth, maxHour, maxMinute, maxSeconds } = getBoundary("max", state.currentDate);
+      const { minYear, minDay, minMonth, minHour, minMinute, minSeconds } = getBoundary("min", state.currentDate);
+      let result = [
+        {
+          type: "year",
+          range: [minYear, maxYear]
+        },
+        {
+          type: "month",
+          range: [minMonth, maxMonth]
+        },
+        {
+          type: "day",
+          range: [minDay, maxDay]
+        },
+        {
+          type: "hour",
+          range: [minHour, maxHour]
+        },
+        {
+          type: "minute",
+          range: [minMinute, maxMinute]
+        },
+        {
+          type: "seconds",
+          range: [minSeconds, maxSeconds]
+        }
+      ];
+      switch (props.type) {
+        case "date":
+          result = result.slice(0, 3);
+          break;
+        case "datetime":
+          result = result.slice(0, 5);
+          break;
+        case "time":
+          result = result.slice(3, 6);
+          break;
+        case "year-month":
+          result = result.slice(0, 2);
+          break;
+        case "month-day":
+          result = result.slice(1, 3);
+          break;
+        case "datehour":
+          result = result.slice(0, 4);
+          break;
+      }
+      return result;
+    });
+    const columns = computed(() => {
+      const val = ranges.value.map((res, columnIndex) => {
+        return generateValue(res.range[0], res.range[1], getDateIndex(res.type), res.type, columnIndex);
+      });
+      return val;
+    });
+    const changeHandler = ({
+      columnIndex,
+      selectedValue,
+      selectedOptions
+    }) => {
+      if (["date", "datetime", "datehour", "month-day"].includes(props.type)) {
+        let formatDate = [];
+        selectedValue.forEach((item) => {
+          formatDate.push(item);
+        });
+        if (props.type == "month-day" && formatDate.length < 3) {
+          formatDate.unshift(new Date(props.modelValue || props.minDate || props.maxDate).getFullYear());
+        }
+        const year = Number(formatDate[0]);
+        const month = Number(formatDate[1]) - 1;
+        const day = Math.min(Number(formatDate[2]), getMonthEndDay(Number(formatDate[0]), Number(formatDate[1])));
+        let date = null;
+        if (props.type === "date" || props.type === "month-day") {
+          date = new Date(year, month, day);
+        } else if (props.type === "datetime") {
+          date = new Date(year, month, day, Number(formatDate[3]), Number(formatDate[4]));
+        } else if (props.type === "datehour") {
+          date = new Date(year, month, day, Number(formatDate[3]));
+        }
+        state.currentDate = formatValue(date);
+      }
+      emit("change", { columnIndex, selectedValue, selectedOptions });
+    };
+    const formatterOption = (type, value) => {
+      const { formatter, isShowChinese } = props;
+      let fOption = null;
+      if (formatter) {
+        fOption = formatter(type, { text: padZero(value, 2), value: padZero(value, 2) });
+      } else {
+        const padMin = padZero(value, 2);
+        const fatter = isShowChinese ? zhCNType[type] : "";
+        fOption = { text: padMin + fatter, value: padMin };
+      }
+      return fOption;
+    };
+    const generateValue = (min, max, val, type, columnIndex) => {
+      const arr = [];
+      let index2 = 0;
+      while (min <= max) {
+        arr.push(formatterOption(type, min));
+        if (type === "minute") {
+          min += props.minuteStep;
+        } else {
+          min++;
+        }
+        if (min <= val) {
+          index2++;
+        }
+      }
+      state.selectedValue[columnIndex] = arr[index2].value;
+      return props.filter ? props.filter(type, arr) : arr;
+    };
+    const getDateIndex = (type) => {
+      if (type === "year") {
+        return state.currentDate.getFullYear();
+      } else if (type === "month") {
+        return state.currentDate.getMonth() + 1;
+      } else if (type === "day") {
+        return state.currentDate.getDate();
+      } else if (type === "hour") {
+        return state.currentDate.getHours();
+      } else if (type === "minute") {
+        return state.currentDate.getMinutes();
+      } else if (type === "seconds") {
+        return state.currentDate.getSeconds();
+      }
+      return 0;
+    };
+    const closeHandler = () => {
+      emit("update:visible", false);
+    };
+    const confirm = (val) => {
+      emit("update:visible", false);
+      emit("confirm", val);
+    };
+    onBeforeMount(() => {
+      state.currentDate = formatValue(props.modelValue);
+    });
+    watch(() => props.modelValue, (value) => {
+      state.currentDate = formatValue(value);
+    });
+    watch(() => props.title, (val) => {
+      state.title = val;
+    });
+    watch(() => props.visible, (val) => {
+      state.show = val;
+    });
+    return {
+      ...toRefs(state),
+      changeHandler,
+      closeHandler,
+      confirm,
+      columns
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_picker = resolveComponent("nut-picker");
+  return openBlock(), createBlock(_component_nut_picker, {
+    modelValue: _ctx.selectedValue,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.selectedValue = $event),
+    visible: _ctx.show,
+    "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => _ctx.show = $event),
+    okText: _ctx.okText,
+    cancelText: _ctx.cancelText,
+    onClose: _ctx.closeHandler,
+    columns: _ctx.columns,
+    onChange: _ctx.changeHandler,
+    title: _ctx.title,
+    onConfirm: _ctx.confirm,
+    isWrapTeleport: _ctx.isWrapTeleport
+  }, {
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3
+  }, 8, ["modelValue", "visible", "okText", "cancelText", "onClose", "columns", "onChange", "title", "onConfirm", "isWrapTeleport"]);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };