x-next 1.0.1 → 1.2.0

package/dist/es/components/date-picker/DatePanel.vue.js

@@ -0,0 +1,167 @@
+import p from "./DatePanel.vue2.js";
+import { openBlock as s, createElementBlock as n, withKeys as w, normalizeClass as l, createElementVNode as m, createCommentVNode as r, toDisplayString as i, Fragment as u, renderList as b, renderSlot as N, createTextVNode as v } from "vue";
+import $ from "../../_virtual/_plugin-vue_export-helper.js";
+const g = ["aria-label"], C = ["aria-label"], f = ["aria-label"], P = ["aria-label"], h = { key: 0 }, L = ["title", "aria-label", "role", "tabindex", "disabled", "aria-selected", "onMouseenter", "onFocus", "onKeydown", "onClick"], S = ["onClick"];
+function E(e, t, M, T, R, K) {
+  return s(), n("div", {
+    ref: "panelRef",
+    class: l([
+      e.className.element("panel"),
+      e.className.modifier(`mode-${e.mode}`),
+      { [e.className.is("show-lunar")]: e.showLunar && e.mode === "date" }
+    ]),
+    onKeydown: t[8] || (t[8] = w((o) => e.$emit("cancel"), ["esc"]))
+  }, [
+    m("div", {
+      class: l([e.className.element("header"), e.className.element(`header-${e.panelPosition}`)])
+    }, [
+      e.panelPosition !== "right" ? (s(), n("button", {
+        key: 0,
+        type: "button",
+        class: l(e.className.element("header-btn")),
+        "aria-label": e.t("datePicker.prevPage"),
+        onClick: t[0] || (t[0] = (o) => e.movePanel(-1, !0))
+      }, " « ", 10, g)) : r("", !0),
+      e.panelPosition !== "right" ? (s(), n("button", {
+        key: 1,
+        type: "button",
+        class: l(e.className.element("header-btn")),
+        "aria-label": e.t("datePicker.prevItem"),
+        onClick: t[1] || (t[1] = (o) => e.movePanel(-1))
+      }, " ‹ ", 10, C)) : r("", !0),
+      m("button", {
+        type: "button",
+        class: l(e.className.element("header-label")),
+        onClick: t[2] || (t[2] = (...o) => e.zoomHeader && e.zoomHeader(...o))
+      }, i(e.headerLabel), 3),
+      e.panelPosition !== "left" ? (s(), n("button", {
+        key: 2,
+        type: "button",
+        class: l(e.className.element("header-btn")),
+        "aria-label": e.t("datePicker.nextItem"),
+        onClick: t[3] || (t[3] = (o) => e.movePanel(1))
+      }, " › ", 10, f)) : r("", !0),
+      e.panelPosition !== "left" ? (s(), n("button", {
+        key: 3,
+        type: "button",
+        class: l(e.className.element("header-btn")),
+        "aria-label": e.t("datePicker.nextPage"),
+        onClick: t[4] || (t[4] = (o) => e.movePanel(1, !0))
+      }, " » ", 10, P)) : r("", !0)
+    ], 2),
+    e.mode === "date" || e.mode === "week" ? (s(), n("div", {
+      key: 0,
+      class: l([e.className.element("weekdays"), { [e.className.is("week-mode")]: e.mode === "week" }])
+    }, [
+      e.mode === "week" ? (s(), n("span", h, i(e.t("datePicker.weekColumn")), 1)) : r("", !0),
+      (s(!0), n(u, null, b(e.weekdayLabels, (o) => (s(), n("span", { key: o }, i(o), 1))), 128))
+    ], 2)) : r("", !0),
+    m("div", {
+      class: l([e.className.element("body"), e.className.element(`body-${e.mode}`)]),
+      role: "grid"
+    }, [
+      (s(!0), n(u, null, b(e.cellRows, (o, k) => (s(), n("div", {
+        key: k,
+        role: "row",
+        class: l(e.className.element("row"))
+      }, [
+        (s(!0), n(u, null, b(o, (a) => {
+          var y;
+          return s(), n("button", {
+            key: a.title,
+            type: "button",
+            title: a.title,
+            "aria-label": a.title,
+            role: a.isWeekLabel ? "rowheader" : "gridcell",
+            tabindex: a.title === ((y = e.activeCell) == null ? void 0 : y.title) ? 0 : -1,
+            disabled: a.isWeekLabel || a.disabled || !a.inView,
+            "aria-selected": !a.isWeekLabel && (a.selected || a.rangeStart || a.rangeEnd),
+            onMouseenter: (d) => e.handleCellMouseEnter(a),
+            onMouseleave: t[5] || (t[5] = (...d) => e.handleCellMouseLeave && e.handleCellMouseLeave(...d)),
+            onFocus: (d) => {
+              e.activeTitle = a.title, e.handleCellMouseEnter(a);
+            },
+            onKeydown: (d) => e.handleCellKeydown(d, a),
+            class: l([
+              e.className.element("cell"),
+              {
+                [e.className.is("out-view")]: a.outView,
+                [e.className.is("today")]: a.today,
+                [e.className.is("selected")]: a.selected,
+                [e.className.is("range-start")]: a.rangeStart,
+                [e.className.is("range-end")]: a.rangeEnd,
+                [e.className.is("in-range")]: a.inRange,
+                [e.className.is("preview-range-start")]: a.previewRangeStart,
+                [e.className.is("preview-range-end")]: a.previewRangeEnd,
+                [e.className.is("in-preview-range")]: a.inPreviewRange,
+                [e.className.is("disabled")]: a.disabled,
+                [e.className.is("week-label")]: a.isWeekLabel,
+                [e.className.is("week-start")]: a.weekStart,
+                [e.className.is("week-end")]: a.weekEnd,
+                [e.className.is("week-selected")]: a.weekSelected
+              }
+            ]),
+            onClick: (d) => e.handleSelect(a)
+          }, [
+            m("span", {
+              class: l(e.className.element("cell-date"))
+            }, [
+              m("span", {
+                class: l(e.className.element("cell-inner"))
+              }, [
+                N(e.$slots, "cell", {
+                  date: a.value.toDate(),
+                  label: a.label
+                }, () => [
+                  v(i(a.label), 1)
+                ])
+              ], 2)
+            ], 2),
+            a.lunar && !e.$slots.cell ? (s(), n("span", {
+              key: 0,
+              class: l(e.className.element("cell-lunar"))
+            }, i(a.lunar.displayText), 3)) : r("", !0)
+          ], 42, L);
+        }), 128))
+      ], 2))), 128))
+    ], 2),
+    e.shortcuts.length || e.$slots.extra ? (s(), n("div", {
+      key: 1,
+      class: l(e.className.element("shortcuts"))
+    }, [
+      (s(!0), n(u, null, b(e.shortcuts, (o) => (s(), n("button", {
+        key: String(o.label),
+        type: "button",
+        class: l(e.className.element("shortcut")),
+        onClick: (k) => e.$emit("shortcut", o)
+      }, i(o.label), 11, S))), 128)),
+      e.$slots.extra ? (s(), n("div", {
+        key: 0,
+        class: l(e.className.element("extra"))
+      }, [
+        N(e.$slots, "extra")
+      ], 2)) : r("", !0)
+    ], 2)) : r("", !0),
+    e.showToday || e.showConfirmBtn ? (s(), n("div", {
+      key: 2,
+      class: l(e.className.element("footer"))
+    }, [
+      e.showToday ? (s(), n("button", {
+        key: 0,
+        type: "button",
+        class: l([e.className.element("footer-btn"), e.className.element("today")]),
+        onClick: t[6] || (t[6] = (...o) => e.selectToday && e.selectToday(...o))
+      }, i(e.todayLabel), 3)) : r("", !0),
+      e.showConfirmBtn ? (s(), n("button", {
+        key: 1,
+        type: "button",
+        class: l([e.className.element("footer-btn"), e.className.element("confirm")]),
+        onClick: t[7] || (t[7] = (o) => e.$emit("confirm"))
+      }, i(e.t("datePicker.ok")), 3)) : r("", !0)
+    ], 2)) : r("", !0)
+  ], 34);
+}
+const z = /* @__PURE__ */ $(p, [["render", E]]);
+export {
+  z as default
+};

package/dist/es/components/date-picker/DatePanel.vue2.js

@@ -0,0 +1,189 @@
+import { defineComponent as K, ref as L, watch as B, computed as i, nextTick as F } from "vue";
+import { getClassNameMixin as Q } from "../../_utils/config.js";
+import { useLocale as Y } from "../../locale/index.js";
+import { getWeekdayLabels as G, getHeaderLabel as J, createDateCells as X, moveViewDate as M, normalizePanelValue as g } from "./utils.js";
+import { dayjs as R } from "../../_utils/date.js";
+const ne = K({
+  name: "DatePanel",
+  props: {
+    mode: {
+      type: String,
+      default: "date"
+    },
+    value: {
+      type: Object
+    },
+    rangeValue: {
+      type: Array,
+      default: () => []
+    },
+    previewRangeValue: {
+      type: Array,
+      default: () => []
+    },
+    isRange: {
+      type: Boolean,
+      default: !1
+    },
+    viewDate: {
+      type: Object
+    },
+    panelPosition: {
+      type: String,
+      default: "single"
+    },
+    dayStartOfWeek: {
+      type: Number,
+      default: 0
+    },
+    disabledDate: {
+      type: Function
+    },
+    showLunar: {
+      type: [Boolean, Object],
+      default: !1
+    },
+    hideNotInViewDates: {
+      type: Boolean,
+      default: !1
+    },
+    shortcuts: {
+      type: Array,
+      default: () => []
+    },
+    showToday: {
+      type: Boolean,
+      default: !0
+    },
+    showConfirmBtn: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: {
+    select: (e) => !0,
+    "view-date-change": (e) => !0,
+    "cell-mouse-enter": (e) => !0,
+    "cell-mouse-leave": () => !0,
+    shortcut: (e) => !0,
+    confirm: () => !0,
+    cancel: () => !0
+  },
+  setup(e, { emit: s }) {
+    const x = Q("date-picker"), { t: o, locale: P } = Y(), d = L(e.viewDate || e.value || e.rangeValue[0] || R()), W = L(), v = L("");
+    B(
+      () => e.viewDate,
+      (t) => {
+        t && (d.value = t);
+      }
+    ), B(
+      () => [e.value, e.rangeValue[0], e.rangeValue[1], e.mode],
+      () => {
+        if (e.viewDate) return;
+        const t = e.value || e.rangeValue[0] || e.rangeValue[1];
+        t && (d.value = t);
+      }
+    );
+    const H = i(
+      () => G(e.dayStartOfWeek, P.value.datePicker)
+    ), _ = i(() => J(d.value, e.mode)), N = i(() => e.mode === "month" ? o("datePicker.thisMonth") : e.mode === "year" ? o("datePicker.thisYear") : e.mode === "quarter" ? o("datePicker.thisQuarter") : e.mode === "week" ? o("datePicker.thisWeek") : o("datePicker.today")), r = i(
+      () => X({
+        mode: e.mode,
+        viewDate: d.value,
+        selectedValue: e.value,
+        rangeValue: e.rangeValue,
+        previewRangeValue: e.previewRangeValue,
+        dayStartOfWeek: e.dayStartOfWeek,
+        hideNotInViewDates: e.hideNotInViewDates,
+        disabledDate: e.disabledDate,
+        showLunar: e.showLunar,
+        locale: P.value.datePicker
+      })
+    ), c = i(
+      () => e.mode === "date" || e.mode === "week" ? 7 : e.mode === "quarter" ? 2 : 3
+    ), T = i(() => {
+      const t = e.mode === "week" ? 8 : c.value;
+      return Array.from(
+        { length: Math.ceil(r.value.length / t) },
+        (a, l) => r.value.slice(l * t, (l + 1) * t)
+      );
+    }), k = (t) => !t.isWeekLabel && !t.disabled && t.inView, U = i(() => {
+      const t = r.value.filter(k);
+      return t.find((a) => a.title === v.value) ?? t.find((a) => a.selected || a.rangeStart || a.rangeEnd) ?? t.find((a) => a.today && !a.outView) ?? t.find((a) => !a.outView) ?? t[0];
+    }), j = () => {
+      F(() => {
+        var t, a;
+        (a = (t = W.value) == null ? void 0 : t.querySelector('[role="gridcell"][tabindex="0"]')) == null || a.focus();
+      });
+    }, y = (t) => {
+      d.value = t, s("view-date-change", t);
+    }, q = (t, a = !1) => {
+      y(M(d.value, e.mode, t, a)), v.value = "";
+    }, E = (t, a) => {
+      var C;
+      if (!k(a)) return;
+      const l = t.key;
+      if (![
+        "ArrowLeft",
+        "ArrowRight",
+        "ArrowUp",
+        "ArrowDown",
+        "Home",
+        "End",
+        "PageUp",
+        "PageDown"
+      ].includes(l))
+        return;
+      t.preventDefault();
+      const m = e.mode === "date" || e.mode === "week" ? "day" : e.mode === "year" ? "year" : "month", S = e.mode === "quarter" ? 3 : 1;
+      let f = l === "ArrowLeft" ? -1 : l === "ArrowRight" ? 1 : l === "ArrowUp" ? -c.value : c.value, n = a.value, w;
+      if (l === "Home" || l === "End") {
+        const u = r.value.filter((D) => !D.isWeekLabel), b = u.findIndex((D) => D.title === a.title), V = Math.floor(b / c.value) * c.value, O = Math.min(V + c.value - 1, u.length - 1);
+        n = u[l === "Home" ? V : O].value, w = u[l === "Home" ? O : V].value, f = l === "Home" ? 1 : -1;
+      } else l === "PageUp" || l === "PageDown" ? (f = l === "PageUp" ? -1 : 1, n = M(a.value, e.mode, f, t.shiftKey)) : n = n.add(f * S, m);
+      for (let u = 0; u < 366; u++) {
+        const b = g(n, e.mode);
+        if (!((C = e.disabledDate) != null && C.call(e, b.toDate()))) break;
+        if (n = n.add(f * S, m), w && (f > 0 ? n.isAfter(w, m) : n.isBefore(w, m)) || u === 365) return;
+      }
+      y(n);
+      const h = r.value.find(
+        (u) => !u.isWeekLabel && u.value.isSame(n, m)
+      );
+      h && k(h) && (v.value = h.title, A(h), j());
+    }, I = () => {
+      e.mode === "date" && y(d.value.startOf("year"));
+    }, z = (t) => {
+      t.isWeekLabel || t.disabled || !t.inView || s("select", g(t.value, e.mode, e.dayStartOfWeek));
+    }, A = (t) => {
+      t.isWeekLabel || t.disabled || !t.inView || s("cell-mouse-enter", g(t.value, e.mode, e.dayStartOfWeek));
+    };
+    return {
+      t: o,
+      className: x,
+      cells: r,
+      cellRows: T,
+      panelRef: W,
+      activeTitle: v,
+      activeCell: U,
+      handleCellKeydown: E,
+      headerLabel: _,
+      todayLabel: N,
+      weekdayLabels: H,
+      movePanel: q,
+      zoomHeader: I,
+      handleSelect: z,
+      handleCellMouseEnter: A,
+      handleCellMouseLeave: () => {
+        s("cell-mouse-leave");
+      },
+      selectToday: () => {
+        const t = R();
+        s("select", g(t, e.mode, e.dayStartOfWeek)), y(t);
+      }
+    };
+  }
+});
+export {
+  ne as default
+};