ninemoon-ui 0.0.26 → 0.1.0

package/dist/js/datepicker-ef8b7019.js

@@ -0,0 +1,362 @@
+import { defineComponent, defineAsyncComponent, computed, ref, openBlock, createBlock, unref, withCtx, createElementVNode, createVNode, normalizeClass, withKeys, createElementBlock, createCommentVNode, toDisplayString, withDirectives, vShow, TransitionGroup, Fragment, renderList, nextTick } from "vue";
+import { g as getNewArray, a as checkinputDate, f as formatDate } from "./index-b4e420ce.js";
+import { g as getMonthDays, C as Calendar, A as Arrow, a as addZero } from "./calendar-5c242731.js";
+import { A as ArrowPlug } from "./dateArrowplus-8181993f.js";
+const _hoisted_1 = { class: "flex items-center justify-between p-3" };
+const _hoisted_2 = { class: "flex-1 text-center text-sm font-medium" };
+const _hoisted_3 = { class: "relative overflow-hidden px-2 pt-3 pb-1" };
+const _hoisted_4 = {
+  class: "w-full text-center table-fixed cursor-pointer text-word3 select-none",
+  cellpadding: "0",
+  key: "daymode"
+};
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = {
+  class: "w-full text-center table-fixed cursor-pointer text-word3",
+  key: "monthmode"
+};
+const _hoisted_7 = ["onClick"];
+const _hoisted_8 = ["value", "placeholder"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "datepicker",
+  props: {
+    modelValue: {},
+    type: {},
+    disabled: { type: Boolean, default: false },
+    disabledDate: {},
+    placeholder: { default: "请选择日期" },
+    size: { default: "default" }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const Pop = defineAsyncComponent(() => import("./popover-45f75f86.js"));
+    const props = __props;
+    const heightClass = computed(() => ({
+      "h-8": props.size === "large",
+      "h-7": props.size === "default",
+      "h-6": props.size === "small"
+    }));
+    const emit = __emit;
+    const dateChangeHandle = (e) => {
+      const input = e.target.value;
+      if (input === props.modelValue || input === "")
+        return;
+      const lastValidValue = props.modelValue;
+      checkinputDate(
+        input,
+        (res) => {
+          emit("update:modelValue", res);
+          emit("change", res);
+        },
+        () => {
+          nextTick(() => {
+            if (e.target) {
+              e.target.value = lastValidValue ? formatDate(lastValidValue) : "";
+            }
+          });
+        }
+      );
+    };
+    const Year = ref((/* @__PURE__ */ new Date()).getFullYear());
+    const Month = ref(1 + (/* @__PURE__ */ new Date()).getMonth());
+    const showD = ref(false);
+    const showDatePick = () => {
+      if (props.modelValue != null && props.modelValue != "") {
+        if (typeof props.modelValue === "string") {
+          const [y, m] = props.modelValue.split("-").map((i) => parseInt(i));
+          Year.value = y;
+          Month.value = m;
+        } else if (props.modelValue instanceof Date) {
+          Year.value = new Date(props.modelValue).getFullYear();
+          Month.value = new Date(props.modelValue).getMonth() + 1;
+        }
+      }
+      showD.value = true;
+    };
+    const showHandle = () => {
+      if (props.disabled === true)
+        return;
+      showD.value = true;
+    };
+    const hideDatePick = () => {
+      showD.value = false;
+    };
+    const WeekList = ["一", "二", "三", "四", "五", "六", "日"];
+    const MonthList = [
+      ["1月", "2月", "3月"],
+      ["4月", "5月", "6月"],
+      ["7月", "8月", "9月"],
+      ["10月", "11月", "12月"]
+    ];
+    const dayMode = ref(true);
+    const monthMode = ref(false);
+    const MonthPreHandle = () => {
+      MonthChangeHandle(-1);
+    };
+    const MonthNextHandle = () => {
+      MonthChangeHandle(1);
+    };
+    const MonthChangeHandle = (i) => {
+      let year = Year.value;
+      let month = Month.value;
+      Month.value = new Date(year, month - 1 + i).getMonth() + 1;
+      Year.value = new Date(year, month - 1 + i).getFullYear();
+    };
+    const YearPreHandle = () => {
+      YearChangeHandle(-1);
+    };
+    const YearNextHandle = () => {
+      YearChangeHandle(1);
+    };
+    const YearChangeHandle = (i) => {
+      Year.value += i;
+    };
+    const setMonthMode = () => {
+      dayMode.value = false;
+      monthMode.value = true;
+    };
+    const getMonthHandle = (i) => {
+      Month.value = parseInt(i);
+      monthMode.value = false;
+      dayMode.value = true;
+    };
+    const thisMonth = computed(() => {
+      let preM = [];
+      let thisM = [];
+      let nextM = [];
+      preM = getMonthDays(
+        new Date(Year.value, Month.value - 2).getFullYear(),
+        new Date(Year.value, Month.value - 2).getMonth() + 1,
+        1
+      );
+      thisM = getMonthDays(
+        new Date(Year.value, Month.value - 1).getFullYear(),
+        new Date(Year.value, Month.value - 1).getMonth() + 1
+      );
+      nextM = getMonthDays(
+        new Date(Year.value, Month.value).getFullYear(),
+        new Date(Year.value, Month.value).getMonth() + 1,
+        2
+      );
+      preM.map((i) => {
+        if (isChoosedDay(i) === true) {
+          i.isChoosed = true;
+        } else {
+          i.isChoosed = false;
+        }
+        if (props.disabledDate && props.disabledDate(`${i.y}-${i.m}-${i.d}`)) {
+          i.disabled = true;
+        }
+      });
+      thisM.map((i) => {
+        if (isChoosedDay(i) === true) {
+          i.isChoosed = true;
+        } else {
+          i.isChoosed = false;
+        }
+        if (props.disabledDate && props.disabledDate(`${i.y}-${i.m}-${i.d}`)) {
+          i.disabled = true;
+        }
+      });
+      nextM.map((i) => {
+        if (isChoosedDay(i) === true) {
+          i.isChoosed = true;
+        } else {
+          i.isChoosed = false;
+        }
+        if (props.disabledDate && props.disabledDate(`${i.y}-${i.m}-${i.d}`)) {
+          i.disabled = true;
+        }
+      });
+      let start = WeekList.indexOf(thisM[0].week);
+      let end = WeekList.length - (WeekList.indexOf(thisM[thisM.length - 1].week) + 1);
+      let tempArr = [
+        ...preM.splice(preM.length - start, start),
+        ...thisM,
+        ...nextM.splice(0, end)
+      ];
+      if (tempArr.length === 28) {
+        tempArr = [...tempArr, ...nextM.splice(0, 14)];
+      } else if (tempArr.length === 35) {
+        tempArr = [...tempArr, ...nextM.splice(0, 7)];
+      }
+      return tempArr;
+    });
+    const isChoosedDay = (date) => {
+      let y, m, d;
+      if (typeof props.modelValue === "string") {
+        [y, m, d] = props.modelValue.split("-").map((i) => parseInt(i));
+      } else if (props.modelValue instanceof Date) {
+        y = props.modelValue.getFullYear();
+        m = props.modelValue.getMonth() + 1;
+        d = props.modelValue.getDate();
+      } else {
+        return false;
+      }
+      if (y === date.y && m === date.m && d === date.d) {
+        return true;
+      } else {
+        return false;
+      }
+    };
+    const RenderDaydata = computed(
+      () => getNewArray(thisMonth.value, 7)
+    );
+    const setAimdate = (d) => {
+      if (d.disabled)
+        return;
+      if (Year.value !== d.y || Month.value !== d.m) {
+        Year.value = d.y;
+        Month.value = d.m;
+      }
+      let choosetime = `${Year.value}-${addZero(Month.value)}-${addZero(d.d)}`;
+      emit("update:modelValue", choosetime);
+      hideDatePick();
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Pop), {
+        width: "288",
+        insertClass: "!p-0",
+        trigger: "native",
+        modelValue: showD.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showD.value = $event),
+        placement: "bottommiddle"
+      }, {
+        reference: withCtx(() => [
+          createElementVNode("div", {
+            onClick: showHandle,
+            class: "relative inline-flex h-full w-full items-center overflow-hidden rounded border border-solid"
+          }, [
+            createVNode(Calendar, { class: "ml-1" }),
+            createElementVNode("input", {
+              type: "text",
+              value: _ctx.modelValue,
+              class: normalizeClass(["w-full px-2 outline-none text-sm text-word3 text-center", heightClass.value]),
+              placeholder: _ctx.placeholder,
+              onFocus: showDatePick,
+              onBlur: dateChangeHandle,
+              onKeydown: withKeys(dateChangeHandle, ["enter"])
+            }, null, 42, _hoisted_8)
+          ])
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("button", {
+              type: "button",
+              class: "h-4 w-4 appearance-none",
+              onClick: YearPreHandle
+            }, [
+              createVNode(ArrowPlug, { class: "h-4 w-4" })
+            ]),
+            dayMode.value ? (openBlock(), createElementBlock("button", {
+              key: 0,
+              type: "button",
+              class: "ml-1 h-4 w-4 appearance-none",
+              onClick: MonthPreHandle
+            }, [
+              createVNode(Arrow, { class: "h-4 w-4 rotate-180 transform" })
+            ])) : createCommentVNode("", true),
+            createElementVNode("div", _hoisted_2, [
+              createElementVNode("span", null, toDisplayString(Year.value) + "年", 1),
+              withDirectives(createElementVNode("button", {
+                type: "button",
+                class: "w-10 appearance-none",
+                onClick: setMonthMode
+              }, toDisplayString(Month.value) + "月 ", 513), [
+                [vShow, dayMode.value && !monthMode.value]
+              ])
+            ]),
+            dayMode.value ? (openBlock(), createElementBlock("button", {
+              key: 1,
+              type: "button",
+              class: "h-4 w-4 appearance-none",
+              onClick: MonthNextHandle
+            }, [
+              createVNode(Arrow, { class: "h-4 w-4" })
+            ])) : createCommentVNode("", true),
+            createElementVNode("button", {
+              type: "button",
+              class: "h-4 w-4 appearance-none",
+              onClick: YearNextHandle
+            }, [
+              createVNode(ArrowPlug, { class: "h-4 w-4 rotate-180 transform" })
+            ])
+          ]),
+          createElementVNode("div", _hoisted_3, [
+            createVNode(TransitionGroup, { name: "translate" }, {
+              default: withCtx(() => [
+                withDirectives(createElementVNode("table", _hoisted_4, [
+                  createElementVNode("thead", null, [
+                    createElementVNode("tr", null, [
+                      (openBlock(), createElementBlock(Fragment, null, renderList(WeekList, (i) => {
+                        return createElementVNode("th", {
+                          class: "text-sm font-normal",
+                          key: i
+                        }, toDisplayString(i), 1);
+                      }), 64))
+                    ])
+                  ]),
+                  createElementVNode("tbody", null, [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(RenderDaydata.value, (i, d) => {
+                      return openBlock(), createElementBlock("tr", { key: d }, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(i, (j) => {
+                          return openBlock(), createElementBlock("td", {
+                            key: j.d,
+                            class: normalizeClass(["py-1", { "cursor-not-allowed": j.disabled }])
+                          }, [
+                            createElementVNode("div", {
+                              class: normalizeClass(["text-xs w-full h-7 leading-6 flex items-center justify-center", {
+                                "text-word9": j.pred || j.nextd,
+                                "bg-gray-100 text-word9": j.disabled
+                              }]),
+                              onClick: ($event) => setAimdate(j)
+                            }, [
+                              createElementVNode("span", {
+                                class: normalizeClass(["block h-6 w-6 rounded-full mx-auto", {
+                                  "bg-blue-500 text-white": j.isChoosed,
+                                  "hover:text-blue-400": !j.isChoosed && !j.disabled
+                                }])
+                              }, toDisplayString(j.d), 3)
+                            ], 10, _hoisted_5)
+                          ], 2);
+                        }), 128))
+                      ]);
+                    }), 128))
+                  ])
+                ], 512), [
+                  [vShow, dayMode.value]
+                ]),
+                withDirectives(createElementVNode("table", _hoisted_6, [
+                  createElementVNode("tbody", null, [
+                    (openBlock(), createElementBlock(Fragment, null, renderList(MonthList, (i, d) => {
+                      return createElementVNode("tr", { key: d }, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(i, (j) => {
+                          return openBlock(), createElementBlock("td", {
+                            key: j,
+                            class: "py-1.5"
+                          }, [
+                            createElementVNode("div", {
+                              class: "cursor-pointer text-word3 text-sm w-6 h-6 leading-6 hover:bg-gray-200 inline-block",
+                              onClick: ($event) => getMonthHandle(j)
+                            }, toDisplayString(j), 9, _hoisted_7)
+                          ]);
+                        }), 128))
+                      ]);
+                    }), 64))
+                  ])
+                ], 512), [
+                  [vShow, monthMode.value]
+                ])
+              ]),
+              _: 1
+            })
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};