x-next 1.1.0 → 1.2.0

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

@@ -1,35 +1,36 @@
-import { defineComponent as se, useAttrs as de, toRefs as ce, computed as r, ref as g, watch as I, nextTick as pe } from "vue";
-import { Trigger as fe } from "../trigger/index.js";
-import me from "../_components/picker/input.vue.js";
-import ve from "../_components/picker/input-range.vue.js";
-import A from "../../icons/_ui/time.js";
-import { getClassNameMixin as ge } from "../../_utils/config.js";
-import { omit as Ve } from "../../_utils/omit.js";
-import { isArray as i, isUndefined as ye } from "../../_utils/is.js";
-import { useFormItem as he } from "../../_hooks/use-form-item.js";
-import { useSize as be } from "../../_hooks/use-size.js";
-import { useLocale as Pe } from "../../locale/index.js";
-import Se from "./hooks/use-time-format.js";
-import Ce from "./hooks/use-time-state.js";
-import Ie from "./TimePanel.vue.js";
-import Be from "./TimeRangePanel.js";
-import { parseModelValue as Te, parseTimeValue as D, formatPanelValue as H, formatTimeValue as _e, isSamePanelValue as Fe, getDateValueFromPanel as O } from "./utils.js";
-const Ge = se({
+import { defineComponent as ge, useAttrs as Ve, toRefs as he, computed as r, ref as h, watch as F, nextTick as E } from "vue";
+import { Trigger as ye } from "../trigger/index.js";
+import be from "../_components/picker/input.vue.js";
+import Pe from "../_components/picker/input-range.vue.js";
+import H from "../../icons/_ui/time.js";
+import { getClassNameMixin as Se } from "../../_utils/config.js";
+import { omit as Ie } from "../../_utils/omit.js";
+import { isArray as s, isUndefined as Ce } from "../../_utils/is.js";
+import { useFormItem as Fe } from "../../_hooks/use-form-item.js";
+import { usePickerFocus as Be } from "../../_hooks/use-picker-focus.js";
+import { useSize as Te } from "../../_hooks/use-size.js";
+import { useLocale as _e } from "../../locale/index.js";
+import xe from "./hooks/use-time-format.js";
+import Re from "./hooks/use-time-state.js";
+import ke from "./TimePanel.vue.js";
+import ze from "./TimeRangePanel.js";
+import { parseModelValue as Ae, parseTimeValue as N, formatPanelValue as j, formatTimeValue as De, isSamePanelValue as Oe, getDateValueFromPanel as w } from "./utils.js";
+const Ze = ge({
   name: "TimePicker",
   components: {
-    Trigger: fe,
-    DateInput: me,
-    DateRangeInput: ve,
-    IconTime: A,
-    TimePanel: Ie,
-    TimeRangePanel: Be
+    Trigger: ye,
+    DateInput: be,
+    DateRangeInput: Pe,
+    IconTime: H,
+    TimePanel: ke,
+    TimeRangePanel: ze
   },
   inheritAttrs: !1,
   props: {
     type: {
       type: String,
       default: "time",
-      validator: (l) => ["time", "time-range"].includes(l)
+      validator: (t) => ["time", "time-range"].includes(t)
     },
     modelValue: {
       type: [String, Number, Date, Array]
@@ -110,170 +111,205 @@ const Ge = se({
     }
   },
   emits: {
-    "update:modelValue": (l) => !0,
-    "update:popupVisible": (l) => !0,
-    change: (l, n) => !0,
-    select: (l, n) => !0,
-    clear: (l) => !0,
-    "popup-visible-change": (l) => !0,
-    focus: (l) => !0,
-    blur: (l) => !0
+    "update:modelValue": (t) => !0,
+    "update:popupVisible": (t) => !0,
+    change: (t, i) => !0,
+    select: (t, i) => !0,
+    clear: (t) => !0,
+    "popup-visible-change": (t) => !0,
+    focus: (t) => !0,
+    blur: (t) => !0
   },
-  setup(l, { emit: n }) {
-    const B = de(), m = ce(l), E = ge("time-picker"), { t: V } = Pe(), d = r(() => l.type === "time-range"), { computedFormat: c, computedUse12Hours: N } = Se(
-      m.format,
-      m.use12Hours
+  setup(t, { emit: i }) {
+    const B = Ve(), v = he(t), M = Se("time-picker"), { t: g } = _e(), c = r(() => t.type === "time-range"), { computedFormat: f, computedUse12Hours: U } = xe(
+      v.format,
+      v.use12Hours
     ), {
-      mergedSize: j,
-      mergedDisabled: b,
-      mergedError: M,
+      mergedSize: K,
+      mergedDisabled: I,
+      mergedError: L,
       eventHandlers: y
-    } = he({
-      size: m.size,
-      disabled: m.disabled,
-      error: m.error
-    }), { mergedSize: U } = be(j), { computedValue: s, setUncontrolledValue: T } = Ce({
-      modelValue: m.modelValue,
-      defaultValue: m.defaultValue,
-      format: c,
-      isRange: d
-    }), P = g(), S = g(!1), v = g(0), _ = g(l.defaultPopupVisible), u = g(s.value), o = g(), C = r(() => l.popupVisible ?? _.value), w = r(() => i(u.value) ? void 0 : u.value), F = r(
-      () => i(u.value) ? u.value : [void 0, void 0]
-    ), L = r(
-      () => i(s.value) ? void 0 : s.value
-    ), q = r(
-      () => i(s.value) ? s.value : []
+    } = Fe({
+      size: v.size,
+      disabled: v.disabled,
+      error: v.error
+    }), { mergedSize: $ } = Te(K), { computedValue: d, setUncontrolledValue: T } = Re({
+      modelValue: v.modelValue,
+      defaultValue: v.defaultValue,
+      format: f,
+      isRange: c
+    }), V = h(), C = h(!1), p = h(0), _ = h(t.defaultPopupVisible), u = h(d.value), o = h(), b = r(() => t.popupVisible ?? _.value), q = r(
+      () => s(u.value) ? void 0 : u.value
+    ), x = r(
+      () => s(u.value) ? u.value : [void 0, void 0]
     ), G = r(
-      () => typeof o.value == "string" ? o.value : void 0
+      () => s(d.value) ? void 0 : d.value
     ), J = r(
-      () => i(o.value) ? o.value : void 0
-    ), K = r(() => i(l.placeholder) ? l.placeholder[0] : l.placeholder ?? V("timePicker.placeholder")), Q = r(() => d.value ? i(l.placeholder) ? l.placeholder : [
-      l.placeholder ?? V("timePicker.rangeStart"),
-      l.placeholder ?? V("timePicker.rangeEnd")
-    ] : [V("timePicker.rangeStart"), V("timePicker.rangeEnd")]), W = r(
-      () => Ve(B, ["class", "style"])
-    ), p = (e) => {
-      (b.value || l.readonly) && (e = !1), _.value = e, n("update:popupVisible", e), n("popup-visible-change", e);
+      () => s(d.value) ? d.value : []
+    ), Q = r(
+      () => typeof o.value == "string" ? o.value : void 0
+    ), W = r(
+      () => s(o.value) ? o.value : void 0
+    ), X = r(() => s(t.placeholder) ? t.placeholder[0] : t.placeholder ?? g("timePicker.placeholder")), Y = r(() => c.value ? s(t.placeholder) ? t.placeholder : [
+      t.placeholder ?? g("timePicker.rangeStart"),
+      t.placeholder ?? g("timePicker.rangeEnd")
+    ] : [g("timePicker.rangeStart"), g("timePicker.rangeEnd")]), Z = r(() => Ie(B, ["class", "style"])), m = (e) => {
+      var l;
+      (I.value || t.readonly) && (e = !1);
+      const a = !e && ((l = z.value) == null ? void 0 : l.contains(document.activeElement));
+      _.value = e, a && E(() => {
+        var n, S;
+        b.value || (S = (n = V.value) == null ? void 0 : n.focus) == null || S.call(n, c.value ? p.value : void 0);
+      }), i("update:popupVisible", e), i("popup-visible-change", e);
     }, R = () => {
-      u.value = i(s.value) ? [...s.value] : s.value;
+      u.value = s(d.value) ? [...d.value] : d.value;
     };
-    I(
-      () => C.value,
+    F(
+      () => b.value,
       (e) => {
         e && (R(), o.value = void 0);
       }
-    ), I(
-      () => s.value,
+    ), F(
+      () => d.value,
       () => {
-        C.value || R();
+        b.value || R();
       }
     );
     const k = (e) => {
-      n(
+      i(
         "select",
-        H(e, c.value),
-        O(e)
+        j(e, f.value),
+        w(e)
       );
-    }, h = (e) => {
-      var t, f;
-      const a = i(e) ? H(e, c.value) : _e(e, c.value);
-      Fe(e, s.value) || (T(e), n("update:modelValue", a), n("change", a, O(e)), (f = (t = y.value) == null ? void 0 : t.onChange) == null || f.call(t));
-    }, X = (e) => {
-      u.value = e, k(e), l.disableConfirm && (h(e), p(!1));
-    }, Y = (e, a) => {
-      u.value = [...e], ye(a) || (v.value = a), k(e), l.disableConfirm && e[0] && e[1] && (h(e), p(!1));
-    }, Z = () => {
-      h(u.value), p(!1);
-    }, $ = (e) => {
-      p(e);
-    }, ee = () => {
-      !b.value && !l.readonly && p(!0);
-    }, ae = (e) => {
-      var a, t, f;
-      (a = e == null ? void 0 : e.stopPropagation) == null || a.call(e), o.value = void 0, u.value = d.value ? [void 0, void 0] : void 0, T(u.value), n("update:modelValue", void 0), n("change", void 0, void 0), n("clear", e), (f = (t = y.value) == null ? void 0 : t.onChange) == null || f.call(t), p(!1);
-    }, le = (e) => {
-      var t, f;
+    }, P = (e) => {
+      var l, n;
+      const a = s(e) ? j(e, f.value) : De(e, f.value);
+      Oe(e, d.value) || (T(e), i("update:modelValue", a), i(
+        "change",
+        a,
+        w(e)
+      ), (n = (l = y.value) == null ? void 0 : l.onChange) == null || n.call(l));
+    }, ee = (e) => {
+      u.value = e, k(e), t.disableConfirm && (P(e), m(!1));
+    }, ae = (e, a) => {
+      u.value = [...e], Ce(a) || (p.value = a), k(e), t.disableConfirm && e[0] && e[1] && (P(e), m(!1));
+    }, le = () => {
+      P(u.value), m(!1);
+    }, te = (e) => {
+      m(e);
+    }, {
+      popupRef: z,
+      panelId: oe,
+      openPanel: ue,
+      handlePanelKeydown: ne,
+      isInternalFocus: ie,
+      handlePanelFocusout: re
+    } = Be({
+      visible: b,
+      canOpen: () => !I.value && !t.readonly,
+      setVisible: m,
+      focusInput: () => {
+        var e, a;
+        return (a = (e = V.value) == null ? void 0 : e.focus) == null ? void 0 : a.call(e, c.value ? p.value : void 0);
+      },
+      inputContains: (e) => {
+        var a, l;
+        return !!(e && ((l = (a = V.value) == null ? void 0 : a.$el) != null && l.contains(e)));
+      },
+      selector: '[role="listbox"][tabindex="0"]'
+    }), se = (e) => {
+      re(e, D);
+    }, ce = (e) => {
+      var a, l, n;
+      (a = e == null ? void 0 : e.stopPropagation) == null || a.call(e), o.value = void 0, u.value = c.value ? [void 0, void 0] : void 0, T(u.value), i("update:modelValue", void 0), i("change", void 0, void 0), i("clear", e), (n = (l = y.value) == null ? void 0 : l.onChange) == null || n.call(l), m(!1);
+    }, de = (e) => {
+      var l, n;
       const a = e.target;
-      if (d.value) {
-        const z = i(o.value) ? [...o.value] : ["", ""];
-        z[v.value] = a.value, o.value = z;
+      if (c.value) {
+        const S = s(o.value) ? [...o.value] : ["", ""];
+        S[p.value] = a.value, o.value = S;
       } else
         o.value = a.value;
-      (f = (t = y.value) == null ? void 0 : t.onInput) == null || f.call(t);
-    }, x = () => {
-      if (d.value) {
-        const e = i(o.value) ? o.value : [], a = [...F.value], t = D(e[v.value], c.value);
-        t && (a[v.value] = t, u.value = a, h(a));
+      (n = (l = y.value) == null ? void 0 : l.onInput) == null || n.call(l);
+    }, A = () => {
+      if (c.value) {
+        const e = s(o.value) ? o.value : [], a = [...x.value], l = N(e[p.value], f.value);
+        l && (a[p.value] = l, u.value = a, P(a));
       } else if (typeof o.value == "string") {
-        const e = D(o.value, c.value);
-        e && (u.value = e, h(e));
+        const e = N(o.value, f.value);
+        e && (u.value = e, P(e));
       }
-      o.value = void 0, p(!1);
-    }, te = (e) => {
-      var a, t;
-      S.value = !0, n("focus", e), (t = (a = y.value) == null ? void 0 : a.onFocus) == null || t.call(a, e);
-    }, oe = (e) => {
-      var a, t;
-      S.value = !1, x(), n("blur", e), (t = (a = y.value) == null ? void 0 : a.onBlur) == null || t.call(a, e);
-    }, ue = () => {
-      o.value = void 0, p(!1);
-    }, ne = (e) => {
-      v.value = e === 1 ? 1 : 0;
-    }, re = () => {
-      pe(() => {
+      o.value = void 0, m(!1);
+    }, pe = (e) => {
+      var a, l;
+      C.value = !0, i("focus", e), (l = (a = y.value) == null ? void 0 : a.onFocus) == null || l.call(a, e);
+    }, D = (e) => {
+      var a, l;
+      ie(e.relatedTarget) || (C.value = !1, A(), i("blur", e), (l = (a = y.value) == null ? void 0 : a.onBlur) == null || l.call(a, e));
+    }, fe = () => {
+      o.value = void 0, m(!1), O();
+    }, me = (e) => {
+      p.value = e === 1 ? 1 : 0;
+    }, O = () => {
+      E(() => {
         var e, a;
-        (a = (e = P.value) == null ? void 0 : e.focus) == null || a.call(e, d.value ? v.value : void 0);
+        (a = (e = V.value) == null ? void 0 : e.focus) == null || a.call(e, c.value ? p.value : void 0);
       });
-    }, ie = () => {
+    }, ve = () => {
       var e, a;
-      (a = (e = P.value) == null ? void 0 : e.blur) == null || a.call(e);
+      (a = (e = V.value) == null ? void 0 : e.blur) == null || a.call(e);
     };
-    return I(
-      () => l.type,
+    return F(
+      () => t.type,
       () => {
-        u.value = Te(l.modelValue, c.value, d.value), o.value = void 0;
+        u.value = Ae(t.modelValue, f.value, c.value), o.value = void 0;
       }
     ), {
+      t: g,
       attrs: B,
-      className: E,
-      IconTime: A,
-      inputRef: P,
-      inputAttrs: W,
-      singleInputValue: L,
-      rangeInputValue: q,
-      singleInputText: G,
-      rangeInputText: J,
+      className: M,
+      IconTime: H,
+      inputRef: V,
+      inputAttrs: Z,
+      singleInputValue: G,
+      rangeInputValue: J,
+      singleInputText: Q,
+      rangeInputText: W,
       inputValue: o,
-      isRange: d,
-      focused: S,
-      focusedIndex: v,
-      mergedSize: U,
-      mergedDisabled: b,
-      mergedError: M,
-      mergedPopupVisible: C,
-      computedFormat: c,
-      computedUse12Hours: N,
-      singlePlaceholder: K,
-      rangePlaceholder: Q,
-      singlePanelValue: w,
-      rangePanelValue: F,
-      handlePanelSelect: X,
-      handleRangePanelSelect: Y,
-      handleConfirm: Z,
-      handlePopupVisibleChange: $,
-      handleClear: ae,
-      handleInputChange: le,
-      handleInputSubmit: x,
-      handleFocus: te,
-      handleBlur: oe,
-      handleEsc: ue,
-      handleFocusedIndexChange: ne,
-      openPanel: ee,
-      focus: re,
-      blur: ie
+      isRange: c,
+      focused: C,
+      focusedIndex: p,
+      mergedSize: $,
+      mergedDisabled: I,
+      mergedError: L,
+      mergedPopupVisible: b,
+      computedFormat: f,
+      computedUse12Hours: U,
+      singlePlaceholder: X,
+      rangePlaceholder: Y,
+      singlePanelValue: q,
+      rangePanelValue: x,
+      handlePanelSelect: ee,
+      handleRangePanelSelect: ae,
+      handleConfirm: le,
+      handlePopupVisibleChange: te,
+      handleClear: ce,
+      handleInputChange: de,
+      handleInputSubmit: A,
+      handleFocus: pe,
+      handleBlur: D,
+      handleEsc: fe,
+      handleFocusedIndexChange: me,
+      openPanel: ue,
+      popupRef: z,
+      panelId: oe,
+      handlePanelKeydown: ne,
+      handlePopupFocusout: se,
+      focus: O,
+      blur: ve
     };
   }
 });
 export {
-  Ge as default
+  Ze as default
 };