@nutui/nutui 4.0.12-beta.1 → 4.0.12

package/dist/packages/_es/DatePicker.js

@@ -1,36 +1,45 @@
-var P = Object.defineProperty, R = Object.defineProperties;
-var U = Object.getOwnPropertyDescriptors;
-var p = Object.getOwnPropertySymbols;
-var Z = Object.prototype.hasOwnProperty, j = Object.prototype.propertyIsEnumerable;
-var M = (t, o, a) => o in t ? P(t, o, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[o] = a, V = (t, o) => {
-  for (var a in o || (o = {}))
-    Z.call(o, a) && M(t, a, o[a]);
-  if (p)
-    for (var a of p(o))
-      j.call(o, a) && M(t, a, o[a]);
-  return t;
-}, k = (t, o) => R(t, U(o));
-import { reactive as q, computed as T, onBeforeMount as A, watch as b, toRefs as G, resolveComponent as K, openBlock as Q, createBlock as W, withCtx as x, renderSlot as H } from "vue";
-import $ from "./Picker.js";
-import { c as X, a as _, p as S } from "./component-234624bc.js";
-import { _ as ee } from "./_plugin-vue_export-helper-dad06003.js";
-import "./pxCheck-38173291.js";
-import "./index-53ec2d4d.js";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { reactive, computed, onBeforeMount, watch, toRefs, resolveComponent, openBlock, createBlock, withCtx, renderSlot } from "vue";
+import Picker from "./Picker.js";
+import { c as createComponent, a as isDate$1, p as padZero } from "./component-81a4c1d0.js";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
+import "./pxCheck-c6b9f6b7.js";
+import "./index-7a7385e4.js";
 import "../locale/lang";
-const { componentName: ge, create: te, translate: s } = X("date-picker"), C = (/* @__PURE__ */ new Date()).getFullYear();
-function w(t) {
-  return _(t) && !isNaN(t.getTime());
+const { componentName, create, translate } = createComponent("date-picker");
+const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+function isDate(val) {
+  return isDate$1(val) && !isNaN(val.getTime());
 }
-const ne = {
-  day: s("day"),
-  year: s("year"),
-  month: s("month"),
-  hour: s("hour"),
-  minute: s("minute"),
-  seconds: s("seconds")
-}, ae = te({
+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: {
-    [$.name]: $
+    [Picker.name]: Picker
   },
   props: {
     modelValue: null,
@@ -52,7 +61,7 @@ const ne = {
     },
     isShowChinese: {
       type: Boolean,
-      default: !1
+      default: false
     },
     minuteStep: {
       type: Number,
@@ -60,13 +69,13 @@ const ne = {
     },
     minDate: {
       type: Date,
-      default: () => new Date(C - 10, 0, 1),
-      validator: w
+      default: () => new Date(currentYear - 10, 0, 1),
+      validator: isDate
     },
     maxDate: {
       type: Date,
-      default: () => new Date(C + 10, 11, 31),
-      validator: w
+      default: () => new Date(currentYear + 10, 11, 31),
+      validator: isDate
     },
     formatter: {
       type: Function,
@@ -75,7 +84,7 @@ const ne = {
     // 是否开启3D效果
     threeDimensional: {
       type: Boolean,
-      default: !0
+      default: true
     },
     // 惯性滚动 时长
     swipeDuration: {
@@ -85,7 +94,7 @@ const ne = {
     filter: Function,
     showToolbar: {
       type: Boolean,
-      default: !0
+      default: true
     },
     visibleOptionNum: {
       type: [Number, String],
@@ -97,185 +106,279 @@ const ne = {
     }
   },
   emits: ["click", "cancel", "change", "confirm", "update:modelValue"],
-  setup(t, { emit: o }) {
-    const a = q({
+  setup(props, { emit }) {
+    const state = reactive({
       currentDate: /* @__PURE__ */ new Date(),
-      title: t.title,
+      title: props.title,
       selectedValue: []
-    }), f = (e) => {
-      w(e) || (e = t.minDate);
-      let n = Math.max(e.getTime(), t.minDate.getTime());
-      return n = Math.min(n, t.maxDate.getTime()), new Date(n);
+    });
+    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 g(e, n) {
-      return 32 - new Date(e, n - 1, 32).getDate();
+    function getMonthEndDay(year, month) {
+      return 32 - new Date(year, month - 1, 32).getDate();
     }
-    const h = (e, n) => {
-      const u = e == "min" ? t.minDate : t.maxDate, r = u.getFullYear();
-      let l = 1, i = 1, c = 0, m = 0;
-      e === "max" && (l = 12, i = g(n.getFullYear(), n.getMonth() + 1), c = 23, m = 59);
-      const d = m;
-      return n.getFullYear() === r && (l = u.getMonth() + 1, n.getMonth() + 1 === l && (i = u.getDate(), n.getDate() === i && (c = u.getHours(), n.getHours() === c && (m = u.getMinutes())))), {
-        [`${e}Year`]: r,
-        [`${e}Month`]: l,
-        [`${e}Date`]: i,
-        [`${e}Hour`]: c,
-        [`${e}Minute`]: m,
-        [`${e}Seconds`]: d
+    const getBoundary = (type, value) => {
+      const boundary = type == "min" ? props.minDate : props.maxDate;
+      const year = boundary.getFullYear();
+      let month = 1;
+      let date = 1;
+      let hour = 0;
+      let minute = 0;
+      if (type === "max") {
+        month = 12;
+        date = 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) {
+          date = boundary.getDate();
+          if (value.getDate() === date) {
+            hour = boundary.getHours();
+            if (value.getHours() === hour) {
+              minute = boundary.getMinutes();
+            }
+          }
+        }
+      }
+      return {
+        [`${type}Year`]: year,
+        [`${type}Month`]: month,
+        [`${type}Date`]: date,
+        [`${type}Hour`]: hour,
+        [`${type}Minute`]: minute,
+        [`${type}Seconds`]: seconds
       };
-    }, D = T(() => {
-      const { maxYear: e, maxDate: n, maxMonth: u, maxHour: r, maxMinute: l, maxSeconds: i } = h("max", a.currentDate), { minYear: c, minDate: m, minMonth: d, minHour: z, minMinute: I, minSeconds: L } = h("min", a.currentDate);
-      return N([
+    };
+    const ranges = computed(() => {
+      const { maxYear, maxDate, maxMonth, maxHour, maxMinute, maxSeconds } = getBoundary("max", state.currentDate);
+      const { minYear, minDate, minMonth, minHour, minMinute, minSeconds } = getBoundary("min", state.currentDate);
+      let result = [
         {
           type: "year",
-          range: [c, e]
+          range: [minYear, maxYear]
         },
         {
           type: "month",
-          range: [d, u]
+          range: [minMonth, maxMonth]
         },
         {
           type: "day",
-          range: [m, n]
+          range: [minDate, maxDate]
         },
         {
           type: "hour",
-          range: [z, r]
+          range: [minHour, maxHour]
         },
         {
           type: "minute",
-          range: [I, l]
+          range: [minMinute, maxMinute]
         },
         {
           type: "seconds",
-          range: [L, i]
+          range: [minSeconds, maxSeconds]
         }
-      ]);
-    }), y = T(() => D.value.map((n, u) => F(n.range[0], n.range[1], B(n.type), n.type, u))), Y = ({
-      columnIndex: e,
-      selectedValue: n,
-      selectedOptions: u
+      ];
+      return generateList(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", "year-month"].includes(t.type)) {
-        let r = [];
-        n.forEach((d) => {
-          r.push(d);
-        }), t.type == "month-day" && r.length < 3 && r.unshift(new Date(a.currentDate || t.minDate || t.maxDate).getFullYear()), t.type == "year-month" && r.length < 3 && r.push(new Date(a.currentDate || t.minDate || t.maxDate).getDate());
-        const l = Number(r[0]), i = Number(r[1]) - 1, c = Math.min(Number(r[2]), g(Number(r[0]), Number(r[1])));
-        let m = null;
-        t.type === "date" || t.type === "month-day" || t.type === "year-month" ? m = new Date(l, i, c) : t.type === "datetime" ? m = new Date(l, i, c, Number(r[3]), Number(r[4])) : t.type === "datehour" && (m = new Date(l, i, c, Number(r[3]))), a.currentDate = f(m);
+      if (["date", "datetime", "datehour", "month-day", "year-month"].includes(props.type)) {
+        let formatDate = [];
+        selectedValue.forEach((item) => {
+          formatDate.push(item);
+        });
+        if (props.type == "month-day" && formatDate.length < 3) {
+          formatDate.unshift(new Date(state.currentDate || props.minDate || props.maxDate).getFullYear());
+        }
+        if (props.type == "year-month" && formatDate.length < 3) {
+          formatDate.push(new Date(state.currentDate || props.minDate || props.maxDate).getDate());
+        }
+        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" || props.type === "year-month") {
+          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);
       }
-      o("change", { columnIndex: e, selectedValue: n, selectedOptions: u });
-    }, O = (e, n) => {
-      const { formatter: u, isShowChinese: r } = t;
-      let l = null;
-      if (u)
-        l = u(e, { text: S(n, 2), value: S(n, 2) });
-      else {
-        const i = S(n, 2), c = r ? ne[e] : "";
-        l = { text: i + c, value: i };
+      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 l;
-    }, F = (e, n, u, r, l) => {
-      const i = [];
-      let c = 0;
-      for (; e <= n; )
-        i.push(O(r, e)), r === "minute" ? e += t.minuteStep : e++, e <= u && c++;
-      return a.selectedValue[l] = i[c].value, t.filter ? t.filter(r, i) : i;
-    }, B = (e) => e === "year" ? a.currentDate.getFullYear() : e === "month" ? a.currentDate.getMonth() + 1 : e === "day" ? a.currentDate.getDate() : e === "hour" ? a.currentDate.getHours() : e === "minute" ? a.currentDate.getMinutes() : e === "seconds" ? a.currentDate.getSeconds() : 0, v = (e) => {
-      o("cancel", e);
-    }, J = (e) => {
-      o("confirm", e);
-    }, N = (e) => {
-      switch (t.type) {
+      return 0;
+    };
+    const closeHandler = (val) => {
+      emit("cancel", val);
+    };
+    const confirm = (val) => {
+      emit("confirm", val);
+    };
+    const generateList = (list) => {
+      switch (props.type) {
         case "date":
-          e = e.slice(0, 3);
+          list = list.slice(0, 3);
           break;
         case "datetime":
-          e = e.slice(0, 5);
+          list = list.slice(0, 5);
           break;
         case "time":
-          e = e.slice(3, 6);
+          list = list.slice(3, 6);
           break;
         case "year-month":
-          e = e.slice(0, 2);
+          list = list.slice(0, 2);
           break;
         case "month-day":
-          e = e.slice(1, 3);
+          list = list.slice(1, 3);
           break;
         case "datehour":
-          e = e.slice(0, 4);
+          list = list.slice(0, 4);
           break;
         case "hour-minute":
-          e = e.slice(3, 5);
+          list = list.slice(3, 5);
           break;
       }
-      return e;
-    }, E = (e) => {
-      const n = [
-        e.getFullYear(),
-        e.getMonth() + 1,
-        e.getDate(),
-        e.getHours(),
-        e.getMinutes(),
-        e.getSeconds()
+      return list;
+    };
+    const getSelectedValue = (time) => {
+      const res = [
+        time.getFullYear(),
+        time.getMonth() + 1,
+        time.getDate(),
+        time.getHours(),
+        time.getMinutes(),
+        time.getSeconds()
       ];
-      return N(n.map((u) => String(u)));
+      return generateList(res.map((i) => String(i)));
     };
-    return A(() => {
-      a.currentDate = f(t.modelValue);
-    }), b(
-      () => t.modelValue,
-      (e) => {
-        const n = f(e);
-        JSON.stringify(n) === JSON.stringify(a.currentDate) || (a.currentDate = n, a.selectedValue = E(n));
+    onBeforeMount(() => {
+      state.currentDate = formatValue(props.modelValue);
+    });
+    watch(
+      () => props.modelValue,
+      (value) => {
+        const newValues = formatValue(value);
+        const isSameValue = JSON.stringify(newValues) === JSON.stringify(state.currentDate);
+        if (!isSameValue) {
+          state.currentDate = newValues;
+          state.selectedValue = getSelectedValue(newValues);
+        }
       }
-    ), b(
-      () => a.currentDate,
-      (e) => {
-        JSON.stringify(e) === JSON.stringify(t.modelValue) || o("update:modelValue", e);
+    );
+    watch(
+      () => state.currentDate,
+      (newValues) => {
+        const isSameValue = JSON.stringify(newValues) === JSON.stringify(props.modelValue);
+        if (!isSameValue) {
+          emit("update:modelValue", newValues);
+        }
       }
-    ), b(
-      () => t.title,
-      (e) => {
-        a.title = e;
+    );
+    watch(
+      () => props.title,
+      (val) => {
+        state.title = val;
       }
-    ), k(V({}, G(a)), {
-      changeHandler: Y,
-      closeHandler: v,
-      confirm: J,
-      columns: y
+    );
+    return __spreadProps(__spreadValues({}, toRefs(state)), {
+      changeHandler,
+      closeHandler,
+      confirm,
+      columns
     });
   }
 });
-function re(t, o, a, f, g, h) {
-  const D = K("nut-picker");
-  return Q(), W(D, {
-    modelValue: t.selectedValue,
-    "onUpdate:modelValue": o[0] || (o[0] = (y) => t.selectedValue = y),
-    okText: t.okText,
-    cancelText: t.cancelText,
-    onCancel: t.closeHandler,
-    columns: t.columns,
-    onChange: t.changeHandler,
-    title: t.title,
-    onConfirm: t.confirm,
-    threeDimensional: t.threeDimensional,
-    swipeDuration: t.swipeDuration,
-    showToolbar: t.showToolbar,
-    visibleOptionNum: t.visibleOptionNum,
-    optionHeight: t.optionHeight
+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),
+    okText: _ctx.okText,
+    cancelText: _ctx.cancelText,
+    onCancel: _ctx.closeHandler,
+    columns: _ctx.columns,
+    onChange: _ctx.changeHandler,
+    title: _ctx.title,
+    onConfirm: _ctx.confirm,
+    threeDimensional: _ctx.threeDimensional,
+    swipeDuration: _ctx.swipeDuration,
+    showToolbar: _ctx.showToolbar,
+    visibleOptionNum: _ctx.visibleOptionNum,
+    optionHeight: _ctx.optionHeight
   }, {
-    top: x(() => [
-      H(t.$slots, "top")
+    top: withCtx(() => [
+      renderSlot(_ctx.$slots, "top")
     ]),
-    default: x(() => [
-      H(t.$slots, "default")
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "default")
     ]),
     _: 3
   }, 8, ["modelValue", "okText", "cancelText", "onCancel", "columns", "onChange", "title", "onConfirm", "threeDimensional", "swipeDuration", "showToolbar", "visibleOptionNum", "optionHeight"]);
 }
-const he = /* @__PURE__ */ ee(ae, [["render", re]]);
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  he as default
+  index as default
 };