x-next 1.0.1 → 1.1.0

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

@@ -0,0 +1,159 @@
+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({
+    trigger: "click",
+    "animation-name": "x-fade-in",
+    "auto-fit-transform-origin": "",
+    "click-to-close": !1,
+    "click-outside-to-close": !0,
+    position: e.position,
+    disabled: e.mergedDisabled || e.readonly,
+    "popup-offset": 4,
+    "popup-visible": e.mergedPopupVisible,
+    "unmount-on-close": e.unmountOnClose,
+    "popup-container": e.popupContainer,
+    "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"]))
+    ]),
+    default: o(() => [
+      e.isRange ? (a(), l(m, i({
+        key: 0,
+        ref: "inputRef"
+      }, e.inputAttrs, {
+        class: [e.className.block, e.className.modifier("range"), e.attrs.class],
+        style: e.attrs.style,
+        value: e.rangeInputValue,
+        "input-value": e.rangeInputText,
+        focused: e.mergedPopupVisible || e.focused,
+        "focused-index": e.focusedIndex,
+        format: e.computedFormat,
+        size: e.mergedSize,
+        disabled: e.mergedDisabled,
+        readonly: e.readonly,
+        error: e.mergedError,
+        "allow-clear": e.allowClear && !e.readonly,
+        "clear-target-key": "common.timeRange",
+        placeholder: e.rangePlaceholder,
+        onFocusedIndexChange: e.handleFocusedIndexChange,
+        onChange: e.handleInputChange,
+        onPressEnter: e.handleInputSubmit,
+        onClear: e.handleClear,
+        onFocus: e.handleFocus,
+        onBlur: e.handleBlur,
+        onKeydown: [
+          r(e.handleEsc, ["esc"]),
+          r(p(e.openPanel, ["prevent"]), ["down"])
+        ]
+      }), d({
+        "suffix-icon": o(() => [
+          s(e.$slots, "suffix-icon", {}, () => [
+            t(u)
+          ])
+        ]),
+        _: 2
+      }, [
+        e.$slots.prefix ? {
+          name: "prefix",
+          fn: o(() => [
+            s(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({
+        key: 1,
+        ref: "inputRef"
+      }, e.inputAttrs, {
+        class: [e.className.block, e.attrs.class],
+        style: e.attrs.style,
+        value: e.singleInputValue,
+        "input-value": e.singleInputText,
+        focused: e.mergedPopupVisible || e.focused,
+        format: e.computedFormat,
+        size: e.mergedSize,
+        disabled: e.mergedDisabled,
+        readonly: e.readonly,
+        error: e.mergedError,
+        "allow-clear": e.allowClear && !e.readonly,
+        "clear-target-key": "common.time",
+        placeholder: e.singlePlaceholder,
+        onChange: e.handleInputChange,
+        onPressEnter: e.handleInputSubmit,
+        onClear: e.handleClear,
+        onFocus: e.handleFocus,
+        onBlur: e.handleBlur,
+        onKeydown: [
+          r(e.handleEsc, ["esc"]),
+          r(p(e.openPanel, ["prevent"]), ["down"])
+        ]
+      }), d({
+        "suffix-icon": o(() => [
+          s(e.$slots, "suffix-icon", {}, () => [
+            t(u)
+          ])
+        ]),
+        _: 2
+      }, [
+        e.$slots.prefix ? {
+          name: "prefix",
+          fn: o(() => [
+            s(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"]))
+    ]),
+    _: 3
+  }, 16, ["position", "disabled", "popup-visible", "unmount-on-close", "popup-container", "content-class", "onPopupVisibleChange"]);
+}
+const T = /* @__PURE__ */ y(C, [["render", c]]);
+export {
+  T as default
+};

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

@@ -0,0 +1,279 @@
+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({
+  name: "TimePicker",
+  components: {
+    Trigger: fe,
+    DateInput: me,
+    DateRangeInput: ve,
+    IconTime: A,
+    TimePanel: Ie,
+    TimeRangePanel: Be
+  },
+  inheritAttrs: !1,
+  props: {
+    type: {
+      type: String,
+      default: "time",
+      validator: (l) => ["time", "time-range"].includes(l)
+    },
+    modelValue: {
+      type: [String, Number, Date, Array]
+    },
+    defaultValue: {
+      type: [String, Number, Date, Array]
+    },
+    placeholder: {
+      type: [String, Array]
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    readonly: {
+      type: Boolean,
+      default: !1
+    },
+    error: {
+      type: Boolean,
+      default: !1
+    },
+    allowClear: {
+      type: Boolean,
+      default: !0
+    },
+    format: {
+      type: String
+    },
+    size: {
+      type: String
+    },
+    popupVisible: {
+      type: Boolean,
+      default: void 0
+    },
+    defaultPopupVisible: {
+      type: Boolean,
+      default: !1
+    },
+    position: {
+      type: String,
+      default: "bl"
+    },
+    popupContainer: {
+      type: [String, Object]
+    },
+    triggerProps: {
+      type: Object
+    },
+    unmountOnClose: {
+      type: Boolean,
+      default: !1
+    },
+    step: {
+      type: Object
+    },
+    disabledHours: {
+      type: Function
+    },
+    disabledMinutes: {
+      type: Function
+    },
+    disabledSeconds: {
+      type: Function
+    },
+    hideDisabledOptions: {
+      type: Boolean,
+      default: !1
+    },
+    disableConfirm: {
+      type: Boolean,
+      default: !1
+    },
+    use12Hours: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  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
+  },
+  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
+    ), {
+      mergedSize: j,
+      mergedDisabled: b,
+      mergedError: M,
+      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 : []
+    ), G = r(
+      () => typeof o.value == "string" ? o.value : void 0
+    ), 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);
+    }, R = () => {
+      u.value = i(s.value) ? [...s.value] : s.value;
+    };
+    I(
+      () => C.value,
+      (e) => {
+        e && (R(), o.value = void 0);
+      }
+    ), I(
+      () => s.value,
+      () => {
+        C.value || R();
+      }
+    );
+    const k = (e) => {
+      n(
+        "select",
+        H(e, c.value),
+        O(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;
+      const a = e.target;
+      if (d.value) {
+        const z = i(o.value) ? [...o.value] : ["", ""];
+        z[v.value] = a.value, o.value = z;
+      } 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));
+      } else if (typeof o.value == "string") {
+        const e = D(o.value, c.value);
+        e && (u.value = e, h(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(() => {
+        var e, a;
+        (a = (e = P.value) == null ? void 0 : e.focus) == null || a.call(e, d.value ? v.value : void 0);
+      });
+    }, ie = () => {
+      var e, a;
+      (a = (e = P.value) == null ? void 0 : e.blur) == null || a.call(e);
+    };
+    return I(
+      () => l.type,
+      () => {
+        u.value = Te(l.modelValue, c.value, d.value), o.value = void 0;
+      }
+    ), {
+      attrs: B,
+      className: E,
+      IconTime: A,
+      inputRef: P,
+      inputAttrs: W,
+      singleInputValue: L,
+      rangeInputValue: q,
+      singleInputText: G,
+      rangeInputText: J,
+      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
+    };
+  }
+});
+export {
+  Ge as default
+};

package/dist/es/components/time-picker/TimeRangePanel.js

@@ -0,0 +1,129 @@
+import { defineComponent as h, ref as w, watch as S, createVNode as t, isVNode as k } from "vue";
+import { getClassNameMixin as x } from "../../_utils/config.js";
+import F from "./TimePanel.vue.js";
+import { getNowTime as p } from "./utils.js";
+import { Button as f } from "../button/index.js";
+import { useLocale as N } from "../../locale/index.js";
+function b(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !k(e);
+}
+const B = /* @__PURE__ */ h({
+  name: "TimeRangePanel",
+  props: {
+    value: {
+      type: Array,
+      default: () => [void 0, void 0]
+    },
+    format: {
+      type: String,
+      required: !0
+    },
+    use12Hours: {
+      type: Boolean
+    },
+    step: {
+      type: Object
+    },
+    disabledHours: {
+      type: Function
+    },
+    disabledMinutes: {
+      type: Function
+    },
+    disabledSeconds: {
+      type: Function
+    },
+    hideDisabledOptions: {
+      type: Boolean
+    },
+    hideFooter: {
+      type: Boolean
+    },
+    focusedIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+  slots: Object,
+  emits: {
+    select: (e, d) => !0,
+    confirm: () => !0
+  },
+  setup(e, {
+    emit: d,
+    slots: u
+  }) {
+    const n = x("time-picker"), {
+      t: r
+    } = N(), i = w(e.focusedIndex);
+    S(() => e.focusedIndex, (o) => {
+      i.value = o;
+    });
+    const c = (o, a) => {
+      const l = [...e.value];
+      l[a] = o, i.value = a, d("select", l, a);
+    }, v = () => {
+      c(p(), i.value);
+    };
+    return () => {
+      let o, a;
+      return t("div", {
+        class: n.element("range-panel"),
+        onMousedown: (l) => l.preventDefault()
+      }, [t("div", {
+        class: n.element("range-body")
+      }, [["start", "end"].map((l, s) => {
+        var m;
+        const y = r(l === "start" ? "timePicker.rangeStart" : "timePicker.rangeEnd");
+        return t("section", {
+          key: l,
+          class: [n.element("range-section"), {
+            [n.is("active")]: i.value === s
+          }],
+          onMousedown: () => {
+            i.value = s;
+          }
+        }, [t("div", {
+          class: n.element("range-header")
+        }, [t("span", null, [y]), t("strong", null, [((m = e.value[s]) == null ? void 0 : m.format(e.format)) ?? "--:--:--"])]), t(F, {
+          value: e.value[s],
+          format: e.format,
+          use12Hours: e.use12Hours,
+          step: e.step,
+          disabledHours: e.disabledHours,
+          disabledMinutes: e.disabledMinutes,
+          disabledSeconds: e.disabledSeconds,
+          hideDisabledOptions: e.hideDisabledOptions,
+          hideFooter: !0,
+          onSelect: (g) => c(g, s)
+        }, null)]);
+      })]), (!e.hideFooter || u.extra) && t("div", {
+        class: n.element("footer")
+      }, [t("div", {
+        class: n.element("footer-left")
+      }, [!e.hideFooter && t(f, {
+        type: "text",
+        size: "mini",
+        narrow: !0,
+        class: n.element("now"),
+        onClick: v
+      }, b(o = r("timePicker.now")) ? o : {
+        default: () => [o]
+      }), u.extra && t("div", {
+        class: n.element("extra")
+      }, [u.extra()])]), !e.hideFooter && t(f, {
+        type: "text",
+        status: "info",
+        size: "mini",
+        narrow: !0,
+        class: n.element("confirm"),
+        onClick: () => d("confirm")
+      }, b(a = r("timePicker.ok")) ? a : {
+        default: () => [a]
+      })])]);
+    };
+  }
+});
+export {
+  B as default
+};

package/dist/es/components/time-picker/hooks/use-time-format.js

@@ -0,0 +1,14 @@
+import { computed as e } from "vue";
+import { getDefaultFormat as u, isFormatUse12Hours as a } from "../utils.js";
+function l(m, t) {
+  const o = e(() => u(t.value, m.value)), r = e(
+    () => t.value || a(o.value)
+  );
+  return {
+    computedFormat: o,
+    computedUse12Hours: r
+  };
+}
+export {
+  l as default
+};

package/dist/es/components/time-picker/hooks/use-time-list.js

@@ -0,0 +1,46 @@
+import { computed as N } from "vue";
+import { get12HourValue as O, getMeridiem as V, normalizeStep as b, padTime as g } from "../utils.js";
+const M = (t, h, e, u = [], c = g) => {
+  const l = [];
+  for (let s = 0; s <= t; s += h) {
+    const d = u.includes(s);
+    l.push({
+      value: s,
+      label: c(s),
+      disabled: d,
+      selected: e === s
+    });
+  }
+  return l;
+};
+function q(t) {
+  return {
+    lists: N(() => {
+      var f, H, S, A, P, L;
+      const e = t.value.value, u = t.step.value ?? {}, c = e == null ? void 0 : e.hour(), l = e ? t.use12Hours.value ? O(e) : e.hour() : void 0, s = e == null ? void 0 : e.minute(), d = e == null ? void 0 : e.second(), r = e ? V(e) : void 0, a = ((H = (f = t.disabledHours).value) == null ? void 0 : H.call(f)) ?? [], F = ((A = (S = t.disabledMinutes).value) == null ? void 0 : A.call(S, c)) ?? [], T = ((L = (P = t.disabledSeconds).value) == null ? void 0 : L.call(P, c, s)) ?? [], v = b(u.hour, t.use12Hours.value ? 12 : 23), w = b(u.minute, 59), x = b(u.second, 59), m = {
+        hour: t.use12Hours.value ? Array.from({ length: 12 }, (i, n) => {
+          const o = n + 1, y = o === 12 ? 0 : o, z = o === 12 ? 12 : o + 12, D = r === "PM" ? a.includes(z) : a.includes(y);
+          return {
+            value: o,
+            label: g(o),
+            disabled: D,
+            selected: l === o
+          };
+        }).filter((i, n) => n % v === 0) : M(23, v, l, a),
+        minute: M(59, w, s, F),
+        second: M(59, x, d, T),
+        meridiem: [
+          { value: "AM", label: "AM", selected: r === "AM" },
+          { value: "PM", label: "PM", selected: r === "PM" }
+        ]
+      };
+      if (t.hideDisabledOptions.value)
+        for (const i of t.columns.value)
+          m[i] = m[i].filter((n) => !n.disabled);
+      return m;
+    })
+  };
+}
+export {
+  q as default
+};

package/dist/es/components/time-picker/hooks/use-time-state.js

@@ -0,0 +1,27 @@
+import { ref as n, computed as p, watch as d } from "vue";
+import { isArray as m } from "../../../_utils/is.js";
+import { parseModelValue as a } from "../utils.js";
+function V({
+  modelValue: t,
+  defaultValue: v,
+  format: e,
+  isRange: u
+}) {
+  const l = n(a(v.value, e.value, u.value)), r = p(
+    () => t.value !== void 0 ? a(t.value, e.value, u.value) : l.value
+  ), c = (o) => {
+    l.value = m(o) ? [...o] : o;
+  };
+  return d(
+    () => [e.value, u.value],
+    () => {
+      l.value = a(v.value, e.value, u.value);
+    }
+  ), {
+    computedValue: r,
+    setUncontrolledValue: c
+  };
+}
+export {
+  V as default
+};

package/dist/es/components/time-picker/index.js

@@ -0,0 +1,8 @@
+import e from "./TimePicker.vue.js";
+import { generateComponent as o } from "../../_utils/vue-eco.js";
+import { getComponentPrefix as r } from "../../_utils/config.js";
+const n = o(r("TimePicker"), e);
+export {
+  n as TimePicker,
+  n as default
+};