vft 0.0.70 → 0.0.72

package/es/components/time-picker/common/picker.vue2.js

@@ -0,0 +1,438 @@
+import { defineComponent as ye, ref as h, inject as qe, watch as He, nextTick as q, computed as i, unref as l, provide as Le, openBlock as c, createBlock as d, mergeProps as We, withCtx as k, normalizeClass as g, normalizeStyle as de, withModifiers as B, resolveDynamicComponent as H, createCommentVNode as L, createElementBlock as Je, createElementVNode as ae, renderSlot as fe, toDisplayString as Ge } from "vue";
+import { isEqual as Qe } from "lodash";
+import { onClickOutside as Xe } from "@vueuse/core";
+import { useNamespace as le } from "../../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "../../../hooks/use-z-index/index.js";
+import { isArray as I } from "@vft/utils";
+import { debugWarn as ve } from "../../../utils/error.js";
+import "../../../utils/ns-cover.js";
+import "../../form/index.js";
+import { VftInput as Ye } from "../../input/index.js";
+import { VftIcon as W } from "../../icon/index.js";
+import { VftTooltip as Ze } from "../../tooltip/index.js";
+import { EVENT_CODE as E } from "../../../constants/aria.js";
+import { valueEquals as me, parseDate as he, formatter as ge } from "../utils.js";
+import { timePickerDefaultProps as _e } from "./props.js";
+import { useFormItem as xe } from "../../form/hooks/use-form-item.js";
+import { useFormSize as ea } from "../../form/hooks/use-form-common-props.js";
+const aa = ["id", "name", "placeholder", "value", "disabled", "readonly"], la = ["id", "name", "placeholder", "value", "disabled", "readonly"], na = ye({
+  name: "Picker"
+}), Va = /* @__PURE__ */ ye({
+  ...na,
+  props: _e,
+  emits: [
+    "update:modelValue",
+    "change",
+    "focus",
+    "blur",
+    "calendar-change",
+    "panel-change",
+    "visible-change",
+    "keydown"
+  ],
+  setup(be, { expose: ke, emit: f }) {
+    const t = be, D = h("zh-cn"), y = le("date"), S = le("input"), b = le("range"), { form: J, formItem: C } = xe(), Ie = qe("ElPopperOptions", {}), G = h(), V = h(), u = h(!1), Q = h(!1), ne = h(null);
+    let X = !1, T = !1;
+    He(u, (e) => {
+      e ? q(() => {
+        e && (ne.value = t.modelValue);
+      }) : (n.value = null, q(() => {
+        Y(t.modelValue);
+      }));
+    });
+    const Y = (e, a) => {
+      (a || !me(e, ne.value)) && (f("change", e), t.validateEvent && (C == null || C.validate("change").catch((o) => ve(o))));
+    }, P = (e) => {
+      if (!me(t.modelValue, e)) {
+        let a;
+        I(e) ? a = e.map(
+          (o) => ge(o, t.valueFormat, D.value)
+        ) : e && (a = ge(e, t.valueFormat, D.value)), f("update:modelValue", e && a, D.value);
+      }
+    }, Ve = (e) => {
+      f("keydown", e);
+    }, R = i(() => {
+      if (V.value) {
+        const e = A.value ? V.value : V.value.$el;
+        return Array.from(e.querySelectorAll("input"));
+      }
+      return [];
+    }), Pe = (e, a, o) => {
+      const r = R.value;
+      r.length && (!o || o === "min" ? (r[0].setSelectionRange(e, a), r[0].focus()) : o === "max" && (r[1].setSelectionRange(e, a), r[1].focus()));
+    }, Ce = () => {
+      Z(!0, !0), q(() => {
+        T = !1;
+      });
+    }, oe = (e = "", a = !1) => {
+      a || (T = !0), u.value = a;
+      let o;
+      I(e) ? o = e.map((r) => r.toDate()) : o = e && e.toDate(), n.value = null, P(o);
+    }, we = () => {
+      Q.value = !0;
+    }, Ee = () => {
+      f("visible-change", !0);
+    }, De = (e) => {
+      (e == null ? void 0 : e.key) === E.esc && Z(!0, !0);
+    }, Se = () => {
+      Q.value = !1, u.value = !1, T = !1, f("visible-change", !1);
+    }, Te = () => {
+      u.value = !0;
+    }, Re = () => {
+      u.value = !1;
+    }, Z = (e = !0, a = !1) => {
+      T = a;
+      const [o, r] = l(R);
+      let m = o;
+      !e && A.value && (m = r), m && m.focus();
+    }, M = (e) => {
+      t.readonly || p.value || u.value || T || (u.value = !0, f("focus", e));
+    };
+    let te;
+    const $ = (e) => {
+      const a = async () => {
+        setTimeout(() => {
+          var o;
+          te === a && (!((o = G.value) != null && o.isFocusInsideContent() && !X) && R.value.filter((r) => r.contains(document.activeElement)).length === 0 && (x(), u.value = !1, f("blur", e), t.validateEvent && (C == null || C.validate("blur").catch((r) => ve(r)))), X = !1);
+        }, 0);
+      };
+      te = a, a();
+    }, p = i(() => t.disabled || (J == null ? void 0 : J.disabled)), O = i(() => {
+      let e;
+      if (z.value ? s.value.getDefaultValue && (e = s.value.getDefaultValue()) : I(t.modelValue) ? e = t.modelValue.map(
+        (a) => he(a, t.valueFormat, D.value)
+      ) : e = he(t.modelValue, t.valueFormat, D.value), s.value.getRangeAvailableTime) {
+        const a = s.value.getRangeAvailableTime(
+          e
+        );
+        Qe(a, e) || (e = a, P(
+          I(e) ? e.map((o) => o.toDate()) : e.toDate()
+        ));
+      }
+      return I(e) && e.some((a) => !a) && (e = []), e;
+    }), v = i(() => {
+      if (!s.value.panelReady)
+        return "";
+      const e = ee(O.value);
+      return I(n.value) ? [
+        n.value[0] || e && e[0] || "",
+        n.value[1] || e && e[1] || ""
+      ] : n.value !== null ? n.value : !Fe.value && z.value || !u.value && z.value ? "" : e ? ue.value ? e.join(", ") : e : "";
+    }), Me = i(() => t.type.includes("time")), Fe = i(() => t.type.startsWith("time")), ue = i(() => t.type === "dates"), K = i(
+      () => t.prefixIcon || (Me.value ? "ico-ep:clock" : "ico-ep:calendar")
+    ), w = h(!1), re = (e) => {
+      t.readonly || p.value || w.value && (e.stopPropagation(), Ce(), P(null), Y(null, !0), w.value = !1, u.value = !1, s.value.handleClear && s.value.handleClear());
+    }, z = i(() => {
+      const { modelValue: e } = t;
+      return !e || I(e) && !e.filter(Boolean).length;
+    }), F = async (e) => {
+      var a;
+      t.readonly || p.value || (((a = e.target) == null ? void 0 : a.tagName) !== "INPUT" || R.value.includes(document.activeElement)) && (u.value = !0);
+    }, se = () => {
+      t.readonly || p.value || !z.value && t.clearable && (w.value = !0);
+    }, ie = () => {
+      w.value = !1;
+    }, N = (e) => {
+      var a;
+      t.readonly || p.value || (((a = e.touches[0].target) == null ? void 0 : a.tagName) !== "INPUT" || R.value.includes(document.activeElement)) && (u.value = !0);
+    }, A = i(() => t.type.includes("range")), _ = ea(), Be = i(() => {
+      var e, a;
+      return (a = (e = l(G)) == null ? void 0 : e.popperRef) == null ? void 0 : a.contentRef;
+    }), ce = i(() => {
+      var e;
+      return l(A) ? l(V) : (e = l(V)) == null ? void 0 : e.$el;
+    });
+    Xe(ce, (e) => {
+      const a = l(Be), o = l(ce);
+      a && (e.target === a || e.composedPath().includes(a)) || e.target === o || e.composedPath().includes(o) || (u.value = !1);
+    });
+    const n = h(null), x = () => {
+      if (n.value) {
+        const e = U(v.value);
+        e && j(e) && (P(
+          I(e) ? e.map((a) => a.toDate()) : e.toDate()
+        ), n.value = null);
+      }
+      n.value === "" && (P(null), Y(null), n.value = null);
+    }, U = (e) => e ? s.value.parseUserInput(e) : null, ee = (e) => e ? s.value.formatToString(e) : null, j = (e) => s.value.isValidValue(e), pe = async (e) => {
+      if (t.readonly || p.value)
+        return;
+      const { code: a } = e;
+      if (Ve(e), a === E.esc) {
+        u.value === !0 && (u.value = !1, e.preventDefault(), e.stopPropagation());
+        return;
+      }
+      if (a === E.down && (s.value.handleFocusPicker && (e.preventDefault(), e.stopPropagation()), u.value === !1 && (u.value = !0, await q()), s.value.handleFocusPicker)) {
+        s.value.handleFocusPicker();
+        return;
+      }
+      if (a === E.tab) {
+        X = !0;
+        return;
+      }
+      if (a === E.enter || a === E.numpadEnter) {
+        (n.value === null || n.value === "" || j(U(v.value))) && (x(), u.value = !1), e.stopPropagation();
+        return;
+      }
+      if (n.value) {
+        e.stopPropagation();
+        return;
+      }
+      s.value.handleKeydownInput && s.value.handleKeydownInput(e);
+    }, $e = (e) => {
+      n.value = e, u.value || (u.value = !0);
+    }, Oe = (e) => {
+      const a = e.target;
+      n.value ? n.value = [a.value, n.value[1]] : n.value = [a.value, null];
+    }, Ke = (e) => {
+      const a = e.target;
+      n.value ? n.value = [n.value[0], a.value] : n.value = [null, a.value];
+    }, ze = () => {
+      var r;
+      const e = n.value, a = U(e && e[0]), o = l(O);
+      if (a && a.isValid()) {
+        n.value = [
+          ee(a),
+          ((r = v.value) == null ? void 0 : r[1]) || null
+        ];
+        const m = [a, o && (o[1] || null)];
+        j(m) && (P(m), n.value = null);
+      }
+    }, Ne = () => {
+      var r;
+      const e = l(n), a = U(e && e[1]), o = l(O);
+      if (a && a.isValid()) {
+        n.value = [
+          ((r = l(v)) == null ? void 0 : r[0]) || null,
+          ee(a)
+        ];
+        const m = [o && o[0], a];
+        j(m) && (P(m), n.value = null);
+      }
+    }, s = h({}), Ae = (e) => {
+      s.value[e[0]] = e[1], s.value.panelReady = !0;
+    }, Ue = (e) => {
+      f("calendar-change", e);
+    }, je = (e, a, o) => {
+      f("panel-change", e, a, o);
+    };
+    return Le("EP_PICKER_BASE", {
+      props: t
+    }), ke({
+      /**
+       * @description focus input box.
+       */
+      focus: Z,
+      /**
+       * @description emit focus event
+       */
+      handleFocusInput: M,
+      /**
+       * @description emit blur event
+       */
+      handleBlurInput: $,
+      /**
+       * @description opens picker
+       */
+      handleOpen: Te,
+      /**
+       * @description closes picker
+       */
+      handleClose: Re,
+      /**
+       * @description pick item manually
+       */
+      onPick: oe
+    }), (e, a) => (c(), d(l(Ze), We({
+      ref_key: "refPopper",
+      ref: G,
+      visible: u.value,
+      effect: "light",
+      pure: "",
+      trigger: "click"
+    }, e.$attrs, {
+      role: "dialog",
+      teleported: "",
+      transition: `${l(y).namespace.value}-zoom-in-top`,
+      "popper-class": [`${l(y).namespace.value}-picker__popper`, e.popperClass],
+      "popper-options": l(Ie),
+      "fallback-placements": ["bottom", "top", "right", "left"],
+      "gpu-acceleration": !1,
+      "stop-popper-mouse-event": !1,
+      "hide-after": 0,
+      persistent: "",
+      onBeforeShow: we,
+      onShow: Ee,
+      onHide: Se
+    }), {
+      default: k(() => [
+        l(A) ? (c(), Je("div", {
+          key: 1,
+          ref_key: "inputRef",
+          ref: V,
+          class: g([
+            l(y).b("editor"),
+            l(y).bm("editor", e.type),
+            l(S).e("wrapper"),
+            l(y).is("disabled", l(p)),
+            l(y).is("active", u.value),
+            l(b).b("editor"),
+            l(_) ? l(b).bm("editor", l(_)) : "",
+            e.$attrs.class
+          ]),
+          style: de(e.$attrs.style),
+          onClick: M,
+          onMouseenter: se,
+          onMouseleave: ie,
+          onTouchstart: N,
+          onKeydown: pe
+        }, [
+          l(K) ? (c(), d(l(W), {
+            key: 0,
+            class: g([l(S).e("icon"), l(b).e("icon")]),
+            onMousedown: B(F, ["prevent"]),
+            onTouchstart: N
+          }, {
+            default: k(() => [
+              (c(), d(H(l(K))))
+            ]),
+            _: 1
+          }, 8, ["class", "onMousedown"])) : L("", !0),
+          ae("input", {
+            id: e.id && e.id[0],
+            autocomplete: "off",
+            name: e.name && e.name[0],
+            placeholder: e.startPlaceholder,
+            value: l(v) && l(v)[0],
+            disabled: l(p),
+            readonly: !e.editable || e.readonly,
+            class: g(l(b).b("input")),
+            onMousedown: F,
+            onInput: Oe,
+            onChange: ze,
+            onFocus: M,
+            onBlur: $
+          }, null, 42, aa),
+          fe(e.$slots, "range-separator", {}, () => [
+            ae("span", {
+              class: g(l(b).b("separator"))
+            }, Ge(e.rangeSeparator), 3)
+          ]),
+          ae("input", {
+            id: e.id && e.id[1],
+            autocomplete: "off",
+            name: e.name && e.name[1],
+            placeholder: e.endPlaceholder,
+            value: l(v) && l(v)[1],
+            disabled: l(p),
+            readonly: !e.editable || e.readonly,
+            class: g(l(b).b("input")),
+            onMousedown: F,
+            onFocus: M,
+            onBlur: $,
+            onInput: Ke,
+            onChange: Ne
+          }, null, 42, la),
+          e.clearIcon ? (c(), d(l(W), {
+            key: 1,
+            class: g([
+              l(S).e("icon"),
+              l(b).e("close-icon"),
+              {
+                [l(b).e("close-icon--hidden")]: !w.value
+              }
+            ]),
+            onClick: re
+          }, {
+            default: k(() => [
+              (c(), d(H(e.clearIcon)))
+            ]),
+            _: 1
+          }, 8, ["class"])) : L("", !0)
+        ], 38)) : (c(), d(l(Ye), {
+          key: 0,
+          id: e.id,
+          ref_key: "inputRef",
+          ref: V,
+          "container-role": "combobox",
+          "model-value": l(v),
+          name: e.name,
+          size: l(_),
+          disabled: l(p),
+          placeholder: e.placeholder,
+          class: g([l(y).b("editor"), l(y).bm("editor", e.type), e.$attrs.class]),
+          style: de(e.$attrs.style),
+          readonly: !e.editable || e.readonly || l(ue) || e.type === "week",
+          label: e.label,
+          tabindex: e.tabindex,
+          "validate-event": !1,
+          onInput: $e,
+          onFocus: M,
+          onBlur: $,
+          onKeydown: (
+            //
+            pe
+          ),
+          onChange: x,
+          onMousedown: F,
+          onMouseenter: se,
+          onMouseleave: ie,
+          onTouchstart: N,
+          onClick: a[0] || (a[0] = B(() => {
+          }, ["stop"]))
+        }, {
+          prefix: k(() => [
+            l(K) ? (c(), d(l(W), {
+              key: 0,
+              class: g(l(S).e("icon")),
+              onMousedown: B(F, ["prevent"]),
+              onTouchstart: N
+            }, {
+              default: k(() => [
+                (c(), d(H(l(K))))
+              ]),
+              _: 1
+            }, 8, ["class", "onMousedown"])) : L("", !0)
+          ]),
+          suffix: k(() => [
+            w.value && e.clearIcon ? (c(), d(l(W), {
+              key: 0,
+              class: g(`${l(S).e("icon")} clear-icon`),
+              onClick: B(re, ["stop"])
+            }, {
+              default: k(() => [
+                (c(), d(H(e.clearIcon)))
+              ]),
+              _: 1
+            }, 8, ["class", "onClick"])) : L("", !0)
+          ]),
+          _: 1
+        }, 8, ["id", "model-value", "name", "size", "disabled", "placeholder", "class", "style", "readonly", "label", "tabindex", "onKeydown"]))
+      ]),
+      content: k(() => [
+        fe(e.$slots, "default", {
+          visible: u.value,
+          actualVisible: Q.value,
+          parsedValue: l(O),
+          format: e.format,
+          unlinkPanels: e.unlinkPanels,
+          type: e.type,
+          defaultValue: e.defaultValue,
+          onPick: oe,
+          onSelectRange: Pe,
+          onSetPickerOption: Ae,
+          onCalendarChange: Ue,
+          onPanelChange: je,
+          onKeydown: De,
+          onMousedown: a[1] || (a[1] = B(() => {
+          }, ["stop"]))
+        })
+      ]),
+      _: 3
+    }, 16, ["visible", "transition", "popper-class", "popper-options"]));
+  }
+});
+export {
+  Va as default
+};

package/es/components/time-picker/common/props.js

@@ -0,0 +1,201 @@
+import "@vft/utils";
+import "vue";
+import { buildProps as t, definePropType as e } from "../../../utils/vue/props/runtime.js";
+import "@vueuse/core";
+import "../../../utils/ns-cover.js";
+import "lodash";
+import { disabledTimeListsProps as a } from "../props/shared.js";
+const u = t({
+  /**
+   * @description same as `id` in native input
+   */
+  id: {
+    type: e([Array, String])
+  },
+  /**
+   * @description same as `name` in native input
+   */
+  name: {
+    type: e([Array, String]),
+    default: ""
+  },
+  /**
+   * @description custom class name for TimePicker's dropdown
+   */
+  popperClass: {
+    type: String,
+    default: ""
+  },
+  /**
+   * @description format of the displayed value in the input box
+   */
+  format: String,
+  /**
+   * @description optional, format of binding value. If not specified, the binding value will be a Date object
+   */
+  valueFormat: String,
+  /**
+   * @description type of the picker
+   */
+  type: {
+    type: String,
+    default: ""
+  },
+  /**
+   * @description whether to show clear button
+   */
+  clearable: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @description Custom clear icon component
+   */
+  clearIcon: {
+    type: e([String, Object])
+  },
+  /**
+   * @description whether the input is editable
+   */
+  editable: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @description Custom prefix icon component
+   */
+  prefixIcon: {
+    type: e([String, Object]),
+    default: ""
+  },
+  /**
+   * @description size of Input
+   */
+  size: {
+    type: Object
+  },
+  /**
+   * @description whether TimePicker is read only
+   */
+  readonly: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * @description whether TimePicker is disabled
+   */
+  disabled: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * @description placeholder in non-range mode
+   */
+  placeholder: {
+    type: String,
+    default: ""
+  },
+  /**
+   * @description [popper.js](https://popper.js.org/docs/v2/) parameters
+   */
+  popperOptions: {
+    type: e(Object),
+    default: () => ({})
+  },
+  /**
+   * @description binding value, if it is an array, the length should be 2
+   */
+  modelValue: {
+    type: e([Date, Array, String, Number]),
+    default: ""
+  },
+  /**
+   * @description range separator
+   */
+  rangeSeparator: {
+    type: String,
+    default: "-"
+  },
+  /**
+   * @description placeholder for the start date in range mode
+   */
+  startPlaceholder: String,
+  /**
+   * @description placeholder for the end date in range mode
+   */
+  endPlaceholder: String,
+  /**
+   * @description optional, default date of the calendar
+   */
+  defaultValue: {
+    type: e([Date, Array])
+  },
+  /**
+   * @description optional, the time value to use when selecting date range
+   */
+  defaultTime: {
+    type: e([Date, Array])
+  },
+  /**
+   * @description whether to pick a time range
+   */
+  isRange: {
+    type: Boolean,
+    default: !1
+  },
+  ...a,
+  /**
+   * @description a function determining if a date is disabled with that date as its parameter. Should return a Boolean
+   */
+  disabledDate: {
+    type: Function
+  },
+  /**
+   * @description set custom className
+   */
+  cellClassName: {
+    type: Function
+  },
+  /**
+   * @description an object array to set shortcut options
+   */
+  shortcuts: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * @description whether to pick time using arrow buttons
+   */
+  arrowControl: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * @description same as `aria-label` in native input
+   */
+  label: {
+    type: String,
+    default: void 0
+  },
+  /**
+   * @description input tabindex
+   */
+  tabindex: {
+    type: e([String, Number]),
+    default: 0
+  },
+  /**
+   * @description whether to trigger form validation
+   */
+  validateEvent: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @description unlink two date-panels in range-picker
+   */
+  unlinkPanels: Boolean
+});
+export {
+  u as timePickerDefaultProps
+};

package/es/components/time-picker/composables/use-time-panel.js

@@ -0,0 +1,60 @@
+const k = ({
+  getAvailableHours: h,
+  getAvailableMinutes: l,
+  getAvailableSeconds: a
+}) => {
+  const d = (s, t, m, i) => {
+    const r = {
+      hour: h,
+      minute: l,
+      second: a
+    };
+    let n = s;
+    return ["hour", "minute", "second"].forEach((o) => {
+      if (r[o]) {
+        let e;
+        const c = r[o];
+        switch (o) {
+          case "minute": {
+            e = c(
+              n.hour(),
+              t,
+              i
+            );
+            break;
+          }
+          case "second": {
+            e = c(
+              n.hour(),
+              n.minute(),
+              t,
+              i
+            );
+            break;
+          }
+          default: {
+            e = c(
+              t,
+              i
+            );
+            break;
+          }
+        }
+        if (e != null && e.length && !e.includes(n[o]())) {
+          const b = m ? 0 : e.length - 1;
+          n = n[o](e[b]);
+        }
+      }
+    }), n;
+  }, u = {};
+  return {
+    timePickerOptions: u,
+    getAvailableTime: d,
+    onSetOption: ([s, t]) => {
+      u[s] = t;
+    }
+  };
+};
+export {
+  k as useTimePanel
+};