x-next 1.1.0 → 1.2.0

package/dist/es/components/time-picker/TimeColumn.vue2.js

@@ -1,10 +1,10 @@
-import { defineComponent as p, ref as b, onMounted as g, watch as y, nextTick as x } from "vue";
-import { getClassNameMixin as I } from "../../_utils/config.js";
-import { Scrollbar as S } from "../scrollbar-v2/index.js";
-const k = p({
+import { defineComponent as g, ref as y, useId as x, computed as S, onMounted as h, watch as _, nextTick as $ } from "vue";
+import { getClassNameMixin as k } from "../../_utils/config.js";
+import { Scrollbar as q } from "../scrollbar-v2/index.js";
+const M = g({
   name: "TimeColumn",
   components: {
-    Scrollbar: S
+    Scrollbar: q
   },
   props: {
     type: {
@@ -21,35 +21,44 @@ const k = p({
     }
   },
   emits: {
-    select: (n, c) => !0
+    select: (s, o) => !0
   },
-  setup(n, { emit: c }) {
-    const o = I("time-picker"), i = b(), r = () => {
-      x(() => {
-        var t, l;
-        const e = (t = i.value) == null ? void 0 : t.querySelector(`.${o.is("selected")}`);
-        (l = e == null ? void 0 : e.scrollIntoView) == null || l.call(e, { block: "nearest" });
+  setup(s, { emit: o }) {
+    const i = k("time-picker"), l = y(), m = `x-time-column-${x()}`, u = (e) => `${m}-${e.value}`, a = S(
+      () => s.items.find((e) => e.selected && !e.disabled) ?? s.items.find((e) => !e.disabled)
+    ), r = () => {
+      $(() => {
+        var t, n;
+        const e = (t = l.value) == null ? void 0 : t.querySelector(`.${i.is("selected")}`);
+        (n = e == null ? void 0 : e.scrollIntoView) == null || n.call(e, { block: "nearest" });
       });
-    }, a = () => n.items.filter((e) => !e.disabled), s = (e) => {
-      e.disabled || c("select", n.type, e.value);
-    }, d = (e) => {
-      const t = a();
+    }, d = () => s.items.filter((e) => !e.disabled), c = (e) => {
+      var t;
+      e.disabled || ((t = l.value) == null || t.focus(), o("select", s.type, e.value));
+    }, f = (e) => {
+      const t = d();
       if (t.length === 0) return;
-      const l = t.findIndex((f) => f.selected), u = l === -1 ? e > 0 ? 0 : t.length - 1 : (l + e + t.length) % t.length;
-      s(t[u]);
-    }, m = () => {
-      const e = n.items.find((t) => t.selected && !t.disabled);
-      e && s(e);
+      const n = t.findIndex((p) => p.selected), b = n === -1 ? e > 0 ? 0 : t.length - 1 : (n + e + t.length) % t.length;
+      c(t[b]);
+    }, v = () => {
+      const e = a.value;
+      e && c(e);
+    }, I = (e) => {
+      const t = d(), n = e ? t.at(-1) : t[0];
+      n && c(n);
     };
-    return g(r), y(() => n.items, r, { deep: !0 }), {
-      className: o,
-      columnRef: i,
-      handleSelect: s,
-      moveActive: d,
-      selectActive: m
+    return h(r), _(() => s.items, r, { deep: !0 }), {
+      className: i,
+      columnRef: l,
+      handleSelect: c,
+      moveActive: f,
+      selectActive: v,
+      activeItem: a,
+      getItemId: u,
+      moveBoundary: I
     };
   }
 });
 export {
-  k as default
+  M as default
 };

package/dist/es/components/time-picker/TimePicker.vue.js

@@ -1,9 +1,10 @@
 import C from "./TimePicker.vue2.js";
-import { resolveComponent as n, openBlock as a, createBlock as l, mergeProps as i, withCtx as o, withKeys as r, withModifiers as p, createSlots as d, renderSlot as s, createVNode as t } from "vue";
-import y from "../../_virtual/_plugin-vue_export-helper.js";
-function c(e, P, v, I, k, w) {
-  const u = n("IconTime"), m = n("DateRangeInput"), f = n("DateInput"), h = n("TimeRangePanel"), g = n("TimePanel"), b = n("Trigger");
-  return a(), l(b, i({
+import { resolveComponent as n, openBlock as s, createBlock as l, mergeProps as p, withCtx as o, withKeys as r, withModifiers as t, createSlots as i, renderSlot as a, createVNode as f, createElementVNode as v } from "vue";
+import I from "../../_virtual/_plugin-vue_export-helper.js";
+const k = ["id", "aria-label"];
+function w(e, d, c, F, V, S) {
+  const m = n("IconTime"), h = n("DateRangeInput"), b = n("DateInput"), g = n("TimeRangePanel"), y = n("TimePanel"), P = n("Trigger");
+  return s(), l(P, p({
     trigger: "click",
     "animation-name": "x-fade-in",
     "auto-fit-transform-origin": "",
@@ -18,56 +19,70 @@ function c(e, P, v, I, k, w) {
     "content-class": e.className.element("popup")
   }, e.triggerProps, { onPopupVisibleChange: e.handlePopupVisibleChange }), {
     content: o(() => [
-      e.isRange ? (a(), l(h, {
-        key: 0,
-        value: e.rangePanelValue,
-        format: e.computedFormat,
-        "use12-hours": e.computedUse12Hours,
-        step: e.step,
-        "disabled-hours": e.disabledHours,
-        "disabled-minutes": e.disabledMinutes,
-        "disabled-seconds": e.disabledSeconds,
-        "hide-disabled-options": e.hideDisabledOptions,
-        "hide-footer": e.disableConfirm,
-        "focused-index": e.focusedIndex,
-        onSelect: e.handleRangePanelSelect,
-        onConfirm: e.handleConfirm
-      }, d({ _: 2 }, [
-        e.$slots.extra ? {
-          name: "extra",
-          fn: o(() => [
-            s(e.$slots, "extra")
-          ]),
-          key: "0"
-        } : void 0
-      ]), 1032, ["value", "format", "use12-hours", "step", "disabled-hours", "disabled-minutes", "disabled-seconds", "hide-disabled-options", "hide-footer", "focused-index", "onSelect", "onConfirm"])) : (a(), l(g, {
-        key: 1,
-        value: e.singlePanelValue,
-        format: e.computedFormat,
-        "use12-hours": e.computedUse12Hours,
-        step: e.step,
-        "disabled-hours": e.disabledHours,
-        "disabled-minutes": e.disabledMinutes,
-        "disabled-seconds": e.disabledSeconds,
-        "hide-disabled-options": e.hideDisabledOptions,
-        "hide-footer": e.disableConfirm,
-        onSelect: e.handlePanelSelect,
-        onConfirm: e.handleConfirm
-      }, d({ _: 2 }, [
-        e.$slots.extra ? {
-          name: "extra",
-          fn: o(() => [
-            s(e.$slots, "extra")
-          ]),
-          key: "0"
-        } : void 0
-      ]), 1032, ["value", "format", "use12-hours", "step", "disabled-hours", "disabled-minutes", "disabled-seconds", "hide-disabled-options", "hide-footer", "onSelect", "onConfirm"]))
+      v("div", {
+        ref: "popupRef",
+        id: e.panelId,
+        role: "dialog",
+        "aria-label": e.t("common.time"),
+        tabindex: "-1",
+        onKeydown: d[0] || (d[0] = (...u) => e.handlePanelKeydown && e.handlePanelKeydown(...u)),
+        onFocusout: d[1] || (d[1] = (...u) => e.handlePopupFocusout && e.handlePopupFocusout(...u))
+      }, [
+        e.isRange ? (s(), l(g, {
+          key: 0,
+          value: e.rangePanelValue,
+          format: e.computedFormat,
+          "use12-hours": e.computedUse12Hours,
+          step: e.step,
+          "disabled-hours": e.disabledHours,
+          "disabled-minutes": e.disabledMinutes,
+          "disabled-seconds": e.disabledSeconds,
+          "hide-disabled-options": e.hideDisabledOptions,
+          "hide-footer": e.disableConfirm,
+          "focused-index": e.focusedIndex,
+          onSelect: e.handleRangePanelSelect,
+          onConfirm: e.handleConfirm
+        }, i({ _: 2 }, [
+          e.$slots.extra ? {
+            name: "extra",
+            fn: o(() => [
+              a(e.$slots, "extra")
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["value", "format", "use12-hours", "step", "disabled-hours", "disabled-minutes", "disabled-seconds", "hide-disabled-options", "hide-footer", "focused-index", "onSelect", "onConfirm"])) : (s(), l(y, {
+          key: 1,
+          value: e.singlePanelValue,
+          format: e.computedFormat,
+          "use12-hours": e.computedUse12Hours,
+          step: e.step,
+          "disabled-hours": e.disabledHours,
+          "disabled-minutes": e.disabledMinutes,
+          "disabled-seconds": e.disabledSeconds,
+          "hide-disabled-options": e.hideDisabledOptions,
+          "hide-footer": e.disableConfirm,
+          onSelect: e.handlePanelSelect,
+          onConfirm: e.handleConfirm
+        }, i({ _: 2 }, [
+          e.$slots.extra ? {
+            name: "extra",
+            fn: o(() => [
+              a(e.$slots, "extra")
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["value", "format", "use12-hours", "step", "disabled-hours", "disabled-minutes", "disabled-seconds", "hide-disabled-options", "hide-footer", "onSelect", "onConfirm"]))
+      ], 40, k)
     ]),
     default: o(() => [
-      e.isRange ? (a(), l(m, i({
+      e.isRange ? (s(), l(h, p({
         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"), e.attrs.class],
         style: e.attrs.style,
         value: e.rangeInputValue,
@@ -90,12 +105,12 @@ function c(e, P, v, I, k, w) {
         onBlur: e.handleBlur,
         onKeydown: [
           r(e.handleEsc, ["esc"]),
-          r(p(e.openPanel, ["prevent"]), ["down"])
+          r(t(e.openPanel, ["prevent"]), ["down"])
         ]
-      }), d({
+      }), i({
         "suffix-icon": o(() => [
-          s(e.$slots, "suffix-icon", {}, () => [
-            t(u)
+          a(e.$slots, "suffix-icon", {}, () => [
+            f(m)
           ])
         ]),
         _: 2
@@ -103,14 +118,18 @@ function c(e, P, v, I, k, w) {
         e.$slots.prefix ? {
           name: "prefix",
           fn: o(() => [
-            s(e.$slots, "prefix")
+            a(e.$slots, "prefix")
           ]),
           key: "0"
         } : 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"])) : (a(), l(f, i({
+      ]), 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"])) : (s(), l(b, p({
         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,
@@ -131,12 +150,12 @@ function c(e, P, v, I, k, w) {
         onBlur: e.handleBlur,
         onKeydown: [
           r(e.handleEsc, ["esc"]),
-          r(p(e.openPanel, ["prevent"]), ["down"])
+          r(t(e.openPanel, ["prevent"]), ["down"])
         ]
-      }), d({
+      }), i({
         "suffix-icon": o(() => [
-          s(e.$slots, "suffix-icon", {}, () => [
-            t(u)
+          a(e.$slots, "suffix-icon", {}, () => [
+            f(m)
           ])
         ]),
         _: 2
@@ -144,16 +163,16 @@ function c(e, P, v, I, k, w) {
         e.$slots.prefix ? {
           name: "prefix",
           fn: o(() => [
-            s(e.$slots, "prefix")
+            a(e.$slots, "prefix")
           ]),
           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 T = /* @__PURE__ */ y(C, [["render", c]]);
+const D = /* @__PURE__ */ I(C, [["render", w]]);
 export {
-  T as default
+  D as default
 };