ninemoon-ui 0.0.27 → 0.1.1

package/dist/js/date/datepicker.js

@@ -1,52 +1,64 @@
-import { defineComponent, defineAsyncComponent, computed, ref, openBlock, createBlock, unref, withCtx, createElementVNode, createElementBlock, createCommentVNode, toDisplayString, withDirectives, vShow, createVNode, TransitionGroup, Fragment, renderList, normalizeClass } from "vue";
-import { g as getNewArray } from "../index/index.js";
-import { a as addZero, g as getMonthDays } from "../getcalendar/getcalendar.js";
-const _hoisted_1 = { class: "tdd-flex tdd-items-center tdd-justify-between tdd-p-3" };
-const _hoisted_2 = { class: "tdd-flex-1 tdd-text-center tdd-text-sm tdd-font-medium" };
-const _hoisted_3 = { class: "tdd-relative tdd-overflow-hidden tdd-px-2 tdd-pt-3 tdd-pb-1" };
+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/index.js";
+import { g as getMonthDays, C as Calendar, A as Arrow, a as addZero } from "../calendar/calendar.js";
+import { A as ArrowPlug } from "../dateArrowplus/dateArrowplus.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: "tdd-w-full tdd-text-center tdd-table-fixed tdd-cursor-pointer tdd-text-word3",
+  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: "tdd-w-full tdd-text-center tdd-table-fixed tdd-cursor-pointer tdd-text-word3",
+  class: "w-full text-center table-fixed cursor-pointer text-word3",
   key: "monthmode"
 };
 const _hoisted_7 = ["onClick"];
-const _hoisted_8 = { class: "tdd-relative tdd-inline-flex tdd-h-full tdd-w-full tdd-items-center tdd-overflow-hidden tdd-rounded tdd-border tdd-border-solid" };
-const _hoisted_9 = ["value", "placeholder"];
+const _hoisted_8 = ["value", "placeholder"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "datepicker",
   props: {
     modelValue: {},
-    type: {}
+    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/popover.js"));
     const props = __props;
-    const placeholder = computed(() => {
-      if (props.type === "week") {
-        return "请选择周";
-      } else if (props.type === "month") {
-        return "请选择月份";
-      } else if (props.type === "quarter") {
-        return "请选择季度";
-      } else if (props.type === "year") {
-        return "请选择年份";
-      } else {
-        return "请选择日期";
-      }
-    });
+    const heightClass = computed(() => ({
+      "h-8": props.size === "large",
+      "h-7": props.size === "default",
+      "h-6": props.size === "small"
+    }));
     const emit = __emit;
     const dateChangeHandle = (e) => {
-      let target = e.target;
-      let year = new Date(target.value).getFullYear();
-      let month = new Date(target.value).getMonth() + 1;
-      let day = new Date(target.value).getDate();
-      emit("update:modelValue", `${year}-${addZero(month)}-${addZero(day)}`);
+      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 != "") {
@@ -59,7 +71,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           Month.value = new Date(props.modelValue).getMonth() + 1;
         }
       }
-      FullTableMonth(Year.value, Month.value);
+      showD.value = true;
+    };
+    const showHandle = () => {
+      if (props.disabled === true)
+        return;
       showD.value = true;
     };
     const hideDatePick = () => {
@@ -85,7 +101,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       let month = Month.value;
       Month.value = new Date(year, month - 1 + i).getMonth() + 1;
       Year.value = new Date(year, month - 1 + i).getFullYear();
-      FullTableMonth(Year.value, Month.value);
     };
     const YearPreHandle = () => {
       YearChangeHandle(-1);
@@ -95,7 +110,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const YearChangeHandle = (i) => {
       Year.value += i;
-      FullTableMonth(Year.value, Month.value);
     };
     const setMonthMode = () => {
       dayMode.value = false;
@@ -105,39 +119,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       Month.value = parseInt(i);
       monthMode.value = false;
       dayMode.value = true;
-      FullTableMonth(Year.value, Month.value);
-    };
-    const Year = ref((/* @__PURE__ */ new Date()).getFullYear());
-    const Month = ref(1 + (/* @__PURE__ */ new Date()).getMonth());
-    const thisMonth = ref([]);
-    const isChoosedDay = (date) => {
-      const [y, m, d] = props.modelValue.split("-").map((i) => parseInt(i));
-      if (y === date.y && m === date.m && d === date.d) {
-        return true;
-      } else {
-        return false;
-      }
     };
-    const FullTableMonth = (year, month) => {
+    const thisMonth = computed(() => {
       let preM = [];
       let thisM = [];
       let nextM = [];
       preM = getMonthDays(
-        new Date(year, month - 2).getFullYear(),
-        new Date(year, month - 2).getMonth() + 1,
+        new Date(Year.value, Month.value - 2).getFullYear(),
+        new Date(Year.value, Month.value - 2).getMonth() + 1,
         1
       );
       thisM = getMonthDays(
-        new Date(year, month - 1).getFullYear(),
-        new Date(year, month - 1).getMonth() + 1
+        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
       );
-      nextM = getMonthDays(new Date(year, month).getFullYear(), new Date(year, month).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) {
@@ -145,6 +154,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         } 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) {
@@ -152,23 +164,50 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         } 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)];
+      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)];
       }
-      thisMonth.value = [...tempArr];
+      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 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;
-        FullTableMonth(Year.value, Month.value);
       }
       let choosetime = `${Year.value}-${addZero(Month.value)}-${addZero(d.d)}`;
       emit("update:modelValue", choosetime);
@@ -177,75 +216,51 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Pop), {
         width: "288",
-        insertClass: "tdd-z-2000 !tdd-p-0",
+        insertClass: "!p-0",
         trigger: "native",
         modelValue: showD.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showD.value = $event),
-        placement: "bottomleft"
+        placement: "bottommiddle"
       }, {
         reference: withCtx(() => [
-          createElementVNode("div", _hoisted_8, [
+          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: "tdd-w-full tdd-p-2 tdd-outline-none",
-              placeholder: placeholder.value,
+              class: normalizeClass(["w-full px-2 outline-none text-sm text-word3 text-center", heightClass.value]),
+              placeholder: _ctx.placeholder,
               onFocus: showDatePick,
-              onChange: dateChangeHandle
-            }, null, 40, _hoisted_9)
+              onBlur: dateChangeHandle,
+              onKeydown: withKeys(dateChangeHandle, ["enter"])
+            }, null, 42, _hoisted_8)
           ])
         ]),
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1, [
             createElementVNode("button", {
               type: "button",
-              class: "tdd-h-4 tdd-w-4 tdd-appearance-none",
+              class: "h-4 w-4 appearance-none",
               onClick: YearPreHandle
-            }, _cache[1] || (_cache[1] = [
-              createElementVNode("svg", {
-                class: "tdd-h-4 tdd-w-4",
-                viewBox: "0 0 1024 1024",
-                version: "1.1",
-                xmlns: "http://www.w3.org/2000/svg",
-                "p-id": "669"
-              }, [
-                createElementVNode("path", {
-                  d: "M842.666667 864c-8.533333 0-14.933333-2.133333-21.333334-8.533333l-341.333333-309.333334c-6.4-6.4-10.666667-14.933333-10.666667-23.466666 0-8.533333 4.266667-17.066667 10.666667-23.466667l341.333333-309.333333c12.8-12.8 34.133333-10.666667 44.8 2.133333 12.8 12.8 10.666667 34.133333-2.133333 44.8L548.266667 522.666667l315.733333 285.866666c12.8 10.666667 14.933333 32 2.133333 44.8-6.4 6.4-14.933333 10.666667-23.466666 10.666667z",
-                  fill: "#666666",
-                  "p-id": "670"
-                }),
-                createElementVNode("path", {
-                  d: "M512 864c-8.533333 0-14.933333-2.133333-21.333333-8.533333L149.333333 546.133333c-6.4-6.4-10.666667-14.933333-10.666666-23.466666 0-8.533333 4.266667-17.066667 10.666666-23.466667L490.666667 189.866667c12.8-12.8 34.133333-10.666667 44.8 2.133333 12.8 12.8 10.666667 34.133333-2.133334 44.8L217.6 522.666667 533.333333 808.533333c12.8 12.8 14.933333 32 2.133334 44.8-6.4 6.4-14.933333 10.666667-23.466667 10.666667z",
-                  fill: "#666666",
-                  "p-id": "671"
-                })
-              ], -1)
-            ])),
+            }, [
+              createVNode(ArrowPlug, { class: "h-4 w-4" })
+            ]),
             dayMode.value ? (openBlock(), createElementBlock("button", {
               key: 0,
               type: "button",
-              class: "tdd-ml-1 tdd-h-4 tdd-w-4 tdd-appearance-none",
+              class: "ml-1 h-4 w-4 appearance-none",
               onClick: MonthPreHandle
-            }, _cache[2] || (_cache[2] = [
-              createElementVNode("svg", {
-                class: "tdd-h-4 tdd-w-4 tdd-rotate-180 tdd-transform",
-                viewBox: "0 0 1024 1024",
-                version: "1.1",
-                xmlns: "http://www.w3.org/2000/svg",
-                "p-id": "613"
-              }, [
-                createElementVNode("path", {
-                  d: "M320 885.333333c-8.533333 0-17.066667-4.266667-23.466667-10.666666-12.8-12.8-10.666667-34.133333 2.133334-44.8L654.933333 512 298.666667 194.133333c-12.8-10.666667-14.933333-32-2.133334-44.8 10.666667-12.8 32-14.933333 44.8-2.133333l384 341.333333c6.4 6.4 10.666667 14.933333 10.666667 23.466667 0 8.533333-4.266667 17.066667-10.666667 23.466667l-384 341.333333c-6.4 6.4-12.8 8.533333-21.333333 8.533333z",
-                  fill: "#666666",
-                  "p-id": "614"
-                })
-              ], -1)
-            ]))) : createCommentVNode("", true),
+            }, [
+              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: "tdd-w-10 tdd-appearance-none",
+                class: "w-10 appearance-none",
                 onClick: setMonthMode
               }, toDisplayString(Month.value) + "月 ", 513), [
                 [vShow, dayMode.value && !monthMode.value]
@@ -254,57 +269,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             dayMode.value ? (openBlock(), createElementBlock("button", {
               key: 1,
               type: "button",
-              class: "tdd-h-4 tdd-w-4 tdd-appearance-none",
+              class: "h-4 w-4 appearance-none",
               onClick: MonthNextHandle
-            }, _cache[3] || (_cache[3] = [
-              createElementVNode("svg", {
-                class: "tdd-h-4 tdd-w-4",
-                viewBox: "0 0 1024 1024",
-                version: "1.1",
-                xmlns: "http://www.w3.org/2000/svg",
-                "p-id": "613"
-              }, [
-                createElementVNode("path", {
-                  d: "M320 885.333333c-8.533333 0-17.066667-4.266667-23.466667-10.666666-12.8-12.8-10.666667-34.133333 2.133334-44.8L654.933333 512 298.666667 194.133333c-12.8-10.666667-14.933333-32-2.133334-44.8 10.666667-12.8 32-14.933333 44.8-2.133333l384 341.333333c6.4 6.4 10.666667 14.933333 10.666667 23.466667 0 8.533333-4.266667 17.066667-10.666667 23.466667l-384 341.333333c-6.4 6.4-12.8 8.533333-21.333333 8.533333z",
-                  fill: "#666666",
-                  "p-id": "614"
-                })
-              ], -1)
-            ]))) : createCommentVNode("", true),
+            }, [
+              createVNode(Arrow, { class: "h-4 w-4" })
+            ])) : createCommentVNode("", true),
             createElementVNode("button", {
               type: "button",
-              class: "tdd-h-4 tdd-w-4 tdd-appearance-none",
+              class: "h-4 w-4 appearance-none",
               onClick: YearNextHandle
-            }, _cache[4] || (_cache[4] = [
-              createElementVNode("svg", {
-                class: "tdd-h-4 tdd-w-4",
-                viewBox: "0 0 1024 1024",
-                version: "1.1",
-                xmlns: "http://www.w3.org/2000/svg",
-                "p-id": "693"
-              }, [
-                createElementVNode("path", {
-                  d: "M544 522.666667c0-8.533333-4.266667-17.066667-10.666667-23.466667L192 189.866667c-12.8-12.8-34.133333-10.666667-44.8 2.133333-12.8 12.8-10.666667 34.133333 2.133333 44.8l315.733334 285.866667L149.333333 808.533333c-12.8 12.8-14.933333 32-2.133333 44.8 6.4 6.4 14.933333 10.666667 23.466667 10.666667 8.533333 0 14.933333-2.133333 21.333333-8.533333l341.333333-309.333334c6.4-6.4 10.666667-14.933333 10.666667-23.466666z",
-                  fill: "#666666",
-                  "p-id": "694"
-                }),
-                createElementVNode("path", {
-                  d: "M864 499.2l-341.333333-309.333333c-12.8-12.8-34.133333-10.666667-44.8 2.133333-12.8 12.8-10.666667 34.133333 2.133333 44.8l315.733333 285.866667-315.733333 285.866666c-12.8 12.8-14.933333 32-2.133333 44.8 6.4 6.4 14.933333 10.666667 23.466666 10.666667 8.533333 0 14.933333-2.133333 21.333334-8.533333l341.333333-309.333334c6.4-6.4 10.666667-14.933333 10.666667-23.466666 0-8.533333-4.266667-17.066667-10.666667-23.466667z",
-                  fill: "#666666",
-                  "p-id": "695"
-                })
-              ], -1)
-            ]))
+            }, [
+              createVNode(ArrowPlug, { class: "h-4 w-4 rotate-180 transform" })
+            ])
           ]),
           createElementVNode("div", _hoisted_3, [
             createVNode(TransitionGroup, { name: "translate" }, {
               default: withCtx(() => [
-                dayMode.value ? (openBlock(), createElementBlock("table", _hoisted_4, [
+                withDirectives(createElementVNode("table", _hoisted_4, [
                   createElementVNode("thead", null, [
                     createElementVNode("tr", null, [
                       (openBlock(), createElementBlock(Fragment, null, renderList(WeekList, (i) => {
                         return createElementVNode("th", {
-                          class: "tdd-text-sm tdd-font-normal",
+                          class: "text-sm font-normal",
                           key: i
                         }, toDisplayString(i), 1);
                       }), 64))
@@ -316,33 +302,41 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         (openBlock(true), createElementBlock(Fragment, null, renderList(i, (j) => {
                           return openBlock(), createElementBlock("td", {
                             key: j.d,
-                            class: "tdd-py-1.5 tdd-relative tdd-overflow-hidden"
+                            class: normalizeClass(["py-1", { "cursor-not-allowed": j.disabled }])
                           }, [
                             createElementVNode("div", {
-                              class: normalizeClass(["tdd-text-sm tdd-w-6 tdd-h-6 tdd-leading-6 tdd-inline-block tdd-z-10 tdd-relative", {
-                                "tdd-text-word9": j.pred || j.nextd,
-                                "tdd-bg-blue-500 tdd-text-white": j.isChoosed,
-                                "hover:tdd-bg-gray-200": !j.isChoosed
+                              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)
-                            }, toDisplayString(j.d), 11, _hoisted_5)
-                          ]);
+                            }, [
+                              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))
                   ])
-                ])) : createCommentVNode("", true),
-                monthMode.value ? (openBlock(), createElementBlock("table", _hoisted_6, [
+                ], 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: "tdd-py-1.5"
+                            class: "py-1.5"
                           }, [
                             createElementVNode("div", {
-                              class: "tdd-cursor-pointer tdd-text-word3 tdd-text-sm tdd-w-6 tdd-h-6 tdd-leading-6 hover:tdd-bg-gray-200 tdd-inline-block",
+                              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)
                           ]);
@@ -350,7 +344,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       ]);
                     }), 64))
                   ])
-                ])) : createCommentVNode("", true)
+                ], 512), [
+                  [vShow, monthMode.value]
+                ])
               ]),
               _: 1
             })