x-next 1.1.0 → 1.3.0

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

@@ -1,10 +1,10 @@
 import L from "./DatePicker.vue2.js";
-import { resolveComponent as g, openBlock as o, createBlock as y, mergeProps as f, withCtx as t, withKeys as v, withModifiers as S, createSlots as h, renderSlot as u, createVNode as p, createElementVNode as i, normalizeClass as n, createElementBlock as s, createCommentVNode as d, Fragment as $, renderList as R, toDisplayString as m } from "vue";
+import { resolveComponent as g, openBlock as o, createBlock as P, mergeProps as f, withCtx as t, withKeys as v, withModifiers as R, createSlots as h, renderSlot as u, createVNode as p, createElementVNode as i, normalizeClass as l, createElementBlock as s, createCommentVNode as d, Fragment as S, renderList as $, toDisplayString as m } from "vue";
 import B from "../../_virtual/_plugin-vue_export-helper.js";
-const z = ["onClick"];
-function O(e, l, K, W, A, H) {
-  const w = g("IconCalendar"), M = g("DateRangeInput"), I = g("DateInput"), C = g("DatePanel"), P = g("TimePanel"), E = g("Trigger");
-  return o(), y(E, f({
+const K = ["id", "aria-label"], z = ["onClick"];
+function O(e, n, W, A, H, j) {
+  const y = g("IconCalendar"), I = g("DateRangeInput"), M = g("DateInput"), C = g("DatePanel"), b = g("TimePanel"), E = g("Trigger");
+  return o(), P(E, f({
     trigger: "click",
     "animation-name": "x-fade-in",
     "auto-fit-transform-origin": "",
@@ -19,10 +19,17 @@ function O(e, l, K, W, A, H) {
     "content-class": e.className.element("popup")
   }, e.triggerProps, { onPopupVisibleChange: e.handlePopupVisibleChange }), {
     content: t(() => {
-      var k, b, D;
+      var w, k, D;
       return [
         i("div", {
-          class: n([
+          ref: "popupRef",
+          id: e.panelId,
+          role: "dialog",
+          "aria-label": e.t("common.date"),
+          tabindex: "-1",
+          onKeydown: n[10] || (n[10] = (...a) => e.handlePanelKeydown && e.handlePanelKeydown(...a)),
+          onFocusout: n[11] || (n[11] = (...a) => e.handlePopupFocusout && e.handlePopupFocusout(...a)),
+          class: l([
             e.className.element("popup-inner"),
             {
               [e.className.modifier("popup-range")]: e.isRange,
@@ -32,7 +39,7 @@ function O(e, l, K, W, A, H) {
         }, [
           e.isRange && (!e.isDateTime || e.rangePanelMode === "date") ? (o(), s("div", {
             key: 0,
-            class: n(e.className.element("panels"))
+            class: l(e.className.element("panels"))
           }, [
             p(C, {
               mode: e.mode,
@@ -50,7 +57,7 @@ function O(e, l, K, W, A, H) {
               onSelect: e.handlePanelSelect,
               onCellMouseEnter: e.handlePanelCellMouseEnter,
               onCellMouseLeave: e.handlePanelCellMouseLeave,
-              onViewDateChange: l[0] || (l[0] = (a) => e.handleRangeViewDateChange(a, 0)),
+              onViewDateChange: n[0] || (n[0] = (a) => e.handleRangeViewDateChange(a, 0)),
               onCancel: e.handleEsc
             }, h({ _: 2 }, [
               e.$slots.cell ? {
@@ -80,7 +87,7 @@ function O(e, l, K, W, A, H) {
               onSelect: e.handlePanelSelect,
               onCellMouseEnter: e.handlePanelCellMouseEnter,
               onCellMouseLeave: e.handlePanelCellMouseLeave,
-              onViewDateChange: l[1] || (l[1] = (a) => e.handleRangeViewDateChange(a, 1)),
+              onViewDateChange: n[1] || (n[1] = (a) => e.handleRangeViewDateChange(a, 1)),
               onCancel: e.handleEsc
             }, h({ _: 2 }, [
               e.$slots.cell ? {
@@ -97,25 +104,25 @@ function O(e, l, K, W, A, H) {
           ], 2)) : d("", !0),
           e.isRange && e.isDateTime && e.rangePanelMode === "time" ? (o(), s("div", {
             key: 1,
-            class: n(e.className.element("range-time-panel"))
+            class: l(e.className.element("range-time-panel"))
           }, [
-            (o(), s($, null, R(2, (a, r) => {
-              var N, V, T;
+            (o(), s(S, null, $(2, (a, r) => {
+              var V, N, T;
               return i("div", {
                 key: r,
-                class: n([
+                class: l([
                   e.className.element("range-time-column"),
                   { [e.className.is("active")]: e.focusedIndex === r }
                 ])
               }, [
                 i("div", {
-                  class: n(e.className.element("time-title"))
+                  class: l(e.className.element("time-title"))
                 }, m(e.t("datePicker.selectTime")), 3),
-                p(P, f({
+                p(b, f({
                   value: e.rangePanelValue[r],
                   format: e.timeFormat,
-                  "use12-hours": (N = e.timePickerProps) == null ? void 0 : N.use12Hours,
-                  step: (V = e.timePickerProps) == null ? void 0 : V.step
+                  "use12-hours": (V = e.timePickerProps) == null ? void 0 : V.use12Hours,
+                  step: (N = e.timePickerProps) == null ? void 0 : N.step
                 }, { ref_for: !0 }, e.getDisabledTimeProps(e.rangePanelValue[r], r === 0 ? "start" : "end"), {
                   "hide-disabled-options": (T = e.timePickerProps) == null ? void 0 : T.hideDisabledOptions,
                   "hide-footer": "",
@@ -126,9 +133,7 @@ function O(e, l, K, W, A, H) {
           ], 2)) : d("", !0),
           e.isRange ? d("", !0) : (o(), s("div", {
             key: 2,
-            class: n([
-              { [e.className.element("datetime-body")]: e.isDateTime }
-            ])
+            class: l([{ [e.className.element("datetime-body")]: e.isDateTime }])
           }, [
             p(C, {
               mode: e.mode,
@@ -172,102 +177,102 @@ function O(e, l, K, W, A, H) {
             ]), 1032, ["mode", "value", "range-value", "preview-range-value", "is-range", "view-date", "day-start-of-week", "disabled-date", "show-lunar", "hide-not-in-view-dates", "shortcuts", "show-today", "show-confirm-btn", "onSelect", "onCellMouseEnter", "onCellMouseLeave", "onViewDateChange", "onShortcut", "onConfirm", "onCancel"]),
             e.isDateTime ? (o(), s("div", {
               key: 0,
-              class: n(e.className.element("time-side"))
+              class: l(e.className.element("time-side"))
             }, [
               i("div", {
-                class: n(e.className.element("time-title"))
+                class: l(e.className.element("time-title"))
               }, m(e.t("datePicker.selectTime")), 3),
-              p(P, f({
+              p(b, f({
                 value: e.singlePanelValue,
                 format: e.timeFormat,
-                "use12-hours": (k = e.timePickerProps) == null ? void 0 : k.use12Hours,
-                step: (b = e.timePickerProps) == null ? void 0 : b.step
+                "use12-hours": (w = e.timePickerProps) == null ? void 0 : w.use12Hours,
+                step: (k = e.timePickerProps) == null ? void 0 : k.step
               }, e.getDisabledTimeProps(e.singlePanelValue), {
                 "hide-disabled-options": (D = e.timePickerProps) == null ? void 0 : D.hideDisabledOptions,
                 "hide-footer": "",
-                onSelect: l[2] || (l[2] = (a) => e.handleTimeSelect(a))
+                onSelect: n[2] || (n[2] = (a) => e.handleTimeSelect(a))
               }), null, 16, ["value", "format", "use12-hours", "step", "hide-disabled-options"])
             ], 2)) : d("", !0)
           ], 2)),
           !e.isRange && e.isDateTime && (e.showToday || e.needConfirm) ? (o(), s("div", {
             key: 3,
-            class: n(e.className.element("datetime-footer"))
+            class: l(e.className.element("datetime-footer"))
           }, [
             e.showToday ? (o(), s("button", {
               key: 0,
               type: "button",
-              class: n([e.className.element("footer-btn"), e.className.element("today")]),
-              onClick: l[3] || (l[3] = (...a) => e.handleToday && e.handleToday(...a))
+              class: l([e.className.element("footer-btn"), e.className.element("today")]),
+              onClick: n[3] || (n[3] = (...a) => e.handleToday && e.handleToday(...a))
             }, m(e.t("datePicker.today")), 3)) : d("", !0),
             e.needConfirm ? (o(), s("button", {
               key: 1,
               type: "button",
-              class: n([e.className.element("footer-btn"), e.className.element("confirm")]),
-              onClick: l[4] || (l[4] = (...a) => e.handleConfirm && e.handleConfirm(...a))
+              class: l([e.className.element("footer-btn"), e.className.element("confirm")]),
+              onClick: n[4] || (n[4] = (...a) => e.handleConfirm && e.handleConfirm(...a))
             }, m(e.t("datePicker.ok")), 3)) : d("", !0)
           ], 2)) : d("", !0),
           e.isRange && e.isDateTime ? (o(), s("div", {
             key: 4,
-            class: n(e.className.element("range-datetime-footer"))
+            class: l(e.className.element("range-datetime-footer"))
           }, [
             i("button", {
               type: "button",
-              class: n([
+              class: l([
                 e.className.element("range-datetime-item"),
                 { [e.className.is("active")]: e.rangePanelMode === "date" }
               ]),
-              onClick: l[5] || (l[5] = (a) => e.openRangeDatePanel(0))
+              onClick: n[5] || (n[5] = (a) => e.openRangeDatePanel(0))
             }, [
               i("span", null, m(e.formatTimeDate(e.rangePanelValue[0])), 1)
             ], 2),
             i("button", {
               type: "button",
-              class: n([
+              class: l([
                 e.className.element("range-datetime-item"),
                 { [e.className.is("active")]: e.rangePanelMode === "time" }
               ]),
-              onClick: l[6] || (l[6] = (a) => e.openRangeTimePanel(0))
+              onClick: n[6] || (n[6] = (a) => e.openRangeTimePanel(0))
             }, [
               i("strong", null, m(e.formatTimeValue(e.rangePanelValue[0])), 1)
             ], 2),
             i("button", {
               type: "button",
-              class: n([
+              class: l([
                 e.className.element("range-datetime-item"),
                 { [e.className.is("active")]: e.rangePanelMode === "date" }
               ]),
-              onClick: l[7] || (l[7] = (a) => e.openRangeDatePanel(1))
+              onClick: n[7] || (n[7] = (a) => e.openRangeDatePanel(1))
             }, [
               i("span", null, m(e.formatTimeDate(e.rangePanelValue[1])), 1)
             ], 2),
             i("button", {
               type: "button",
-              class: n([
+              class: l([
                 e.className.element("range-datetime-item"),
                 { [e.className.is("active")]: e.rangePanelMode === "time" }
               ]),
-              onClick: l[8] || (l[8] = (a) => e.openRangeTimePanel(1))
+              onClick: n[8] || (n[8] = (a) => e.openRangeTimePanel(1))
             }, [
               i("strong", null, m(e.formatTimeValue(e.rangePanelValue[1])), 1)
             ], 2)
           ], 2)) : d("", !0),
           e.isRange && (e.shortcuts.length || e.$slots.extra || e.needConfirm) ? (o(), s("div", {
             key: 5,
-            class: n(e.className.element("range-footer"))
+            class: l(e.className.element("range-footer"))
           }, [
             e.shortcuts.length || e.$slots.extra ? (o(), s("div", {
               key: 0,
-              class: n(e.className.element("range-shortcuts"))
+              class: l(e.className.element("range-shortcuts"))
             }, [
-              (o(!0), s($, null, R(e.shortcuts, (a) => (o(), s("button", {
+              (o(!0), s(S, null, $(e.shortcuts, (a) => (o(), s("button", {
                 key: String(a.label),
                 type: "button",
-                class: n(e.className.element("shortcut")),
+                class: l(e.className.element("shortcut")),
                 onClick: (r) => e.handleShortcut(a)
               }, m(a.label), 11, z))), 128)),
               e.$slots.extra ? (o(), s("div", {
                 key: 0,
-                class: n(e.className.element("extra"))
+                class: l(e.className.element("extra"))
               }, [
                 u(e.$slots, "extra")
               ], 2)) : d("", !0)
@@ -275,18 +280,22 @@ function O(e, l, K, W, A, H) {
             e.needConfirm ? (o(), s("button", {
               key: 1,
               type: "button",
-              class: n([e.className.element("footer-btn"), e.className.element("confirm")]),
-              onClick: l[9] || (l[9] = (...a) => e.handleConfirm && e.handleConfirm(...a))
+              class: l([e.className.element("footer-btn"), e.className.element("confirm")]),
+              onClick: n[9] || (n[9] = (...a) => e.handleConfirm && e.handleConfirm(...a))
             }, m(e.t("datePicker.ok")), 3)) : d("", !0)
           ], 2)) : d("", !0)
-        ], 2)
+        ], 42, K)
       ];
     }),
     default: t(() => [
-      e.isRange ? (o(), y(M, f({
+      e.isRange ? (o(), P(I, f({
         key: 0,
         ref: "inputRef"
       }, e.inputAttrs, {
+        role: "combobox",
+        "aria-haspopup": "dialog",
+        "aria-expanded": e.mergedPopupVisible,
+        "aria-controls": e.mergedPopupVisible ? e.panelId : void 0,
         class: [
           e.className.block,
           e.className.modifier("range"),
@@ -314,12 +323,12 @@ function O(e, l, K, W, A, H) {
         onBlur: e.handleBlur,
         onKeydown: [
           v(e.handleEsc, ["esc"]),
-          v(S(e.openPanel, ["prevent"]), ["down"])
+          v(R(e.openPanel, ["prevent"]), ["down"])
         ]
       }), h({
         "suffix-icon": t(() => [
           u(e.$slots, "suffix-icon", {}, () => [
-            p(w)
+            p(y)
           ])
         ]),
         _: 2
@@ -338,10 +347,14 @@ function O(e, l, K, W, A, H) {
           ]),
           key: "1"
         } : void 0
-      ]), 1040, ["class", "style", "value", "input-value", "focused", "focused-index", "format", "size", "disabled", "readonly", "error", "allow-clear", "placeholder", "onFocusedIndexChange", "onChange", "onPressEnter", "onClear", "onFocus", "onBlur", "onKeydown"])) : (o(), y(I, f({
+      ]), 1040, ["aria-expanded", "aria-controls", "class", "style", "value", "input-value", "focused", "focused-index", "format", "size", "disabled", "readonly", "error", "allow-clear", "placeholder", "onFocusedIndexChange", "onChange", "onPressEnter", "onClear", "onFocus", "onBlur", "onKeydown"])) : (o(), P(M, f({
         key: 1,
         ref: "inputRef"
       }, e.inputAttrs, {
+        role: "combobox",
+        "aria-haspopup": "dialog",
+        "aria-expanded": e.mergedPopupVisible,
+        "aria-controls": e.mergedPopupVisible ? e.panelId : void 0,
         class: [e.className.block, e.attrs.class],
         style: e.attrs.style,
         value: e.singleInputValue,
@@ -362,12 +375,12 @@ function O(e, l, K, W, A, H) {
         onBlur: e.handleBlur,
         onKeydown: [
           v(e.handleEsc, ["esc"]),
-          v(S(e.openPanel, ["prevent"]), ["down"])
+          v(R(e.openPanel, ["prevent"]), ["down"])
         ]
       }), h({
         "suffix-icon": t(() => [
           u(e.$slots, "suffix-icon", {}, () => [
-            p(w)
+            p(y)
           ])
         ]),
         _: 2
@@ -379,12 +392,12 @@ function O(e, l, K, W, A, H) {
           ]),
           key: "0"
         } : void 0
-      ]), 1040, ["class", "style", "value", "input-value", "focused", "format", "size", "disabled", "readonly", "error", "allow-clear", "placeholder", "onChange", "onPressEnter", "onClear", "onFocus", "onBlur", "onKeydown"]))
+      ]), 1040, ["aria-expanded", "aria-controls", "class", "style", "value", "input-value", "focused", "format", "size", "disabled", "readonly", "error", "allow-clear", "placeholder", "onChange", "onPressEnter", "onClear", "onFocus", "onBlur", "onKeydown"]))
     ]),
     _: 3
   }, 16, ["position", "disabled", "popup-visible", "unmount-on-close", "popup-container", "content-class", "onPopupVisibleChange"]);
 }
-const J = /* @__PURE__ */ B(L, [["render", O]]);
+const Q = /* @__PURE__ */ B(L, [["render", O]]);
 export {
-  J as default
+  Q as default
 };