vft 0.0.71 → 0.0.72

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
+};

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

@@ -0,0 +1,40 @@
+import { ref as A, watch as f } from "vue";
+import { makeList as l } from "../utils.js";
+const m = (t) => {
+  const e = (u, i) => u || i, r = (u) => u !== !0;
+  return t.map(e).filter(r);
+}, V = (t, e, r) => ({
+  getHoursList: (o, g) => l(24, t && (() => t == null ? void 0 : t(o, g))),
+  getMinutesList: (o, g, s) => l(
+    60,
+    e && (() => e == null ? void 0 : e(o, g, s))
+  ),
+  getSecondsList: (o, g, s, n) => l(
+    60,
+    r && (() => r == null ? void 0 : r(o, g, s, n))
+  )
+}), N = (t, e, r) => {
+  const { getHoursList: u, getMinutesList: i, getSecondsList: L } = V(
+    t,
+    e,
+    r
+  );
+  return {
+    getAvailableHours: (n, c) => m(u(n, c)),
+    getAvailableMinutes: (n, c, a) => m(i(n, c, a)),
+    getAvailableSeconds: (n, c, a, v) => m(L(n, c, a, v))
+  };
+}, O = (t) => {
+  const e = A(t.parsedValue);
+  return f(
+    () => t.visible,
+    (r) => {
+      r || (e.value = t.parsedValue);
+    }
+  ), e;
+};
+export {
+  N as buildAvailableTimeSlotGetter,
+  V as getTimeLists,
+  O as useOldValue
+};

package/es/components/time-picker/constants.js

@@ -0,0 +1,17 @@
+const Y = ["hours", "minutes", "seconds"], t = "HH:mm:ss", e = "YYYY-MM-DD", n = {
+  date: e,
+  dates: e,
+  week: "gggg[w]ww",
+  year: "YYYY",
+  month: "YYYY-MM",
+  datetime: `${e} ${t}`,
+  monthrange: "YYYY-MM",
+  daterange: e,
+  datetimerange: `${e} ${t}`
+};
+export {
+  e as DEFAULT_FORMATS_DATE,
+  n as DEFAULT_FORMATS_DATEPICKER,
+  t as DEFAULT_FORMATS_TIME,
+  Y as timeUnits
+};

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

@@ -0,0 +1,31 @@
+import r from "./time-picker.js";
+import { default as T } from "./common/picker.vue2.js";
+import { default as f } from "./time-picker-com/panel-time-pick.vue2.js";
+import { buildTimeList as l, dateEquals as n, extractDateFormat as p, extractTimeFormat as A, formatter as E, makeList as P, parseDate as u, rangeArr as x, valueEquals as D } from "./utils.js";
+import { DEFAULT_FORMATS_DATE as k, DEFAULT_FORMATS_DATEPICKER as _, DEFAULT_FORMATS_TIME as d, timeUnits as L } from "./constants.js";
+import { timePickerDefaultProps as R } from "./common/props.js";
+const e = r;
+e.install = (t) => {
+  t.component(e.name, e);
+};
+const m = e;
+export {
+  T as CommonPicker,
+  k as DEFAULT_FORMATS_DATE,
+  _ as DEFAULT_FORMATS_DATEPICKER,
+  d as DEFAULT_FORMATS_TIME,
+  f as TimePickPanel,
+  m as VftTimePicker,
+  l as buildTimeList,
+  n as dateEquals,
+  e as default,
+  p as extractDateFormat,
+  A as extractTimeFormat,
+  E as formatter,
+  P as makeList,
+  u as parseDate,
+  x as rangeArr,
+  R as timePickerDefaultProps,
+  L as timeUnits,
+  D as valueEquals
+};

package/es/components/time-picker/props/basic-time-spinner.js

@@ -0,0 +1,31 @@
+import "@vft/utils";
+import "vue";
+import { buildProps as r, definePropType as e } from "../../../utils/vue/props/runtime.js";
+import "@vueuse/core";
+import "../../../utils/ns-cover.js";
+import "lodash";
+import { disabledTimeListsProps as o } from "./shared.js";
+const a = r({
+  role: {
+    type: String,
+    required: !0
+  },
+  spinnerDate: {
+    type: e(Object),
+    required: !0
+  },
+  showSeconds: {
+    type: Boolean,
+    default: !0
+  },
+  arrowControl: Boolean,
+  amPmMode: {
+    // 'a': am/pm; 'A': AM/PM
+    type: e(String),
+    default: ""
+  },
+  ...o
+});
+export {
+  a as basicTimeSpinnerProps
+};

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

@@ -0,0 +1,17 @@
+import "@vft/utils";
+import "vue";
+import { buildProps as r, definePropType as e } from "../../../utils/vue/props/runtime.js";
+import "@vueuse/core";
+import "../../../utils/ns-cover.js";
+import "lodash";
+import { timePanelSharedProps as o } from "./shared.js";
+const l = r({
+  ...o,
+  datetimeRole: String,
+  parsedValue: {
+    type: e(Object)
+  }
+});
+export {
+  l as panelTimePickerProps
+};

package/es/components/time-picker/props/panel-time-range.js

@@ -0,0 +1,16 @@
+import "@vft/utils";
+import "vue";
+import { buildProps as r, definePropType as p } from "../../../utils/vue/props/runtime.js";
+import "@vueuse/core";
+import "../../../utils/ns-cover.js";
+import "lodash";
+import { timePanelSharedProps as o } from "./shared.js";
+const P = r({
+  ...o,
+  parsedValue: {
+    type: p(Array)
+  }
+});
+export {
+  P as panelTimeRangeProps
+};

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

@@ -0,0 +1,40 @@
+import "@vft/utils";
+import "vue";
+import { buildProps as i, definePropType as e } from "../../../utils/vue/props/runtime.js";
+import "@vueuse/core";
+import "../../../utils/ns-cover.js";
+import "lodash";
+const n = i({
+  /**
+   * @description To specify the array of hours that cannot be selected
+   */
+  disabledHours: {
+    type: e(Function)
+  },
+  /**
+   * @description To specify the array of minutes that cannot be selected
+   */
+  disabledMinutes: {
+    type: e(Function)
+  },
+  /**
+   * @description To specify the array of seconds that cannot be selected
+   */
+  disabledSeconds: {
+    type: e(Function)
+  }
+}), a = i({
+  visible: Boolean,
+  actualVisible: {
+    type: Boolean,
+    default: void 0
+  },
+  format: {
+    type: String,
+    default: ""
+  }
+});
+export {
+  n as disabledTimeListsProps,
+  a as timePanelSharedProps
+};

package/es/components/time-picker/style/css.js

@@ -0,0 +1,2 @@
+import "vft/theme-style/base.css";
+import "vft/theme-style/vft-time-picker.css";

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

@@ -0,0 +1,2 @@
+import "vft/theme-style/src/base.scss";
+import "vft/theme-style/src/time-picker.scss";

package/es/components/time-picker/time-picker-com/basic-time-spinner.vue.js

@@ -0,0 +1,4 @@
+import f from "./basic-time-spinner.vue2.js";
+export {
+  f as default
+};

package/es/components/time-picker/time-picker-com/basic-time-spinner.vue2.js

@@ -0,0 +1,227 @@
+import { defineComponent as ie, ref as k, computed as C, unref as n, onMounted as le, nextTick as F, watch as ae, openBlock as l, createElementBlock as a, normalizeClass as m, Fragment as u, renderList as D, createBlock as ue, withCtx as me, createTextVNode as $, toDisplayString as f, createCommentVNode as N, withDirectives as I, createVNode as j, createElementVNode as de } from "vue";
+import { debounce as pe } from "lodash";
+import { vRepeatClick as U } from "@vft/directives";
+import { VftScrollbar as he } from "../../scrollbar/index.js";
+import { VftIcon as q } from "../../icon/index.js";
+import { useNamespace as fe } from "../../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "../../../hooks/use-z-index/index.js";
+import "@vueuse/core";
+import "@vft/utils";
+import "../../../utils/ns-cover.js";
+import { timeUnits as z } from "../constants.js";
+import { buildTimeList as V } from "../utils.js";
+import { basicTimeSpinnerProps as be } from "../props/basic-time-spinner.js";
+import { getTimeLists as we } from "../composables/use-time-picker.js";
+const ge = ["onClick"], Se = ["onMouseenter"], Ae = /* @__PURE__ */ ie({
+  __name: "basic-time-spinner",
+  props: be,
+  emits: ["change", "select-range", "set-option"],
+  setup(G, { emit: g }) {
+    const c = G, i = fe("time"), { getHoursList: J, getMinutesList: K, getSecondsList: O } = we(
+      c.disabledHours,
+      c.disabledMinutes,
+      c.disabledSeconds
+    );
+    let _ = !1;
+    const S = k(), Q = k(), W = k(), X = k(), h = {
+      hours: Q,
+      minutes: W,
+      seconds: X
+    }, x = C(() => c.showSeconds ? z : z.slice(0, 2)), d = C(() => {
+      const { spinnerDate: e } = c, s = e.hour(), o = e.minute(), r = e.second();
+      return { hours: s, minutes: o, seconds: r };
+    }), v = C(() => {
+      const { hours: e, minutes: s } = n(d);
+      return {
+        hours: J(c.role),
+        minutes: K(e, c.role),
+        seconds: O(e, s, c.role)
+      };
+    }), Y = C(() => {
+      const { hours: e, minutes: s, seconds: o } = n(d);
+      return {
+        hours: V(e, 23),
+        minutes: V(s, 59),
+        seconds: V(o, 59)
+      };
+    }), Z = pe((e) => {
+      _ = !1, b(e);
+    }, 200), A = (e) => {
+      if (!!!c.amPmMode)
+        return "";
+      const o = c.amPmMode === "A";
+      let r = e < 12 ? " am" : " pm";
+      return o && (r = r.toUpperCase()), r;
+    }, p = (e) => {
+      let s;
+      switch (e) {
+        case "hours":
+          s = [0, 2];
+          break;
+        case "minutes":
+          s = [3, 5];
+          break;
+        case "seconds":
+          s = [6, 8];
+          break;
+      }
+      const [o, r] = s;
+      g("select-range", o, r), S.value = e;
+    }, b = (e) => {
+      R(e, n(d)[e]);
+    }, B = () => {
+      b("hours"), b("minutes"), b("seconds");
+    }, P = (e) => e.querySelector(`.${i.namespace.value}-scrollbar__wrap`), R = (e, s) => {
+      if (c.arrowControl)
+        return;
+      const o = n(h[e]);
+      o && o.$el && (P(o.$el).scrollTop = Math.max(
+        0,
+        s * T(e)
+      ));
+    }, T = (e) => {
+      const s = n(h[e]);
+      return (s == null ? void 0 : s.$el.querySelector("li").offsetHeight) || 0;
+    }, y = () => {
+      L(1);
+    }, ee = () => {
+      L(-1);
+    }, L = (e) => {
+      S.value || p("hours");
+      const s = S.value, o = n(d)[s], r = S.value === "hours" ? 24 : 60, t = se(s, o, e, r);
+      H(s, t), R(s, t), F(() => p(s));
+    }, se = (e, s, o, r) => {
+      let t = (s + o + r) % r;
+      const w = n(v)[e];
+      for (; w[t] && t !== s; )
+        t = (t + o + r) % r;
+      return t;
+    }, H = (e, s) => {
+      if (n(v)[e][s])
+        return;
+      const { hours: t, minutes: w, seconds: E } = n(d);
+      let M;
+      switch (e) {
+        case "hours":
+          M = c.spinnerDate.hour(s).minute(w).second(E);
+          break;
+        case "minutes":
+          M = c.spinnerDate.hour(t).minute(s).second(E);
+          break;
+        case "seconds":
+          M = c.spinnerDate.hour(t).minute(w).second(s);
+          break;
+      }
+      g("change", M);
+    }, oe = (e, { value: s, disabled: o }) => {
+      o || (H(e, s), p(e), R(e, s));
+    }, ne = (e) => {
+      _ = !0, Z(e);
+      const s = Math.min(
+        Math.round(
+          (P(n(h[e]).$el).scrollTop - (re(e) * 0.5 - 10) / T(e) + 3) / T(e)
+        ),
+        e === "hours" ? 23 : 59
+      );
+      H(e, s);
+    }, re = (e) => n(h[e]).$el.offsetHeight, te = () => {
+      const e = (s) => {
+        const o = n(h[s]);
+        o && o.$el && (P(o.$el).onscroll = () => {
+          ne(s);
+        });
+      };
+      e("hours"), e("minutes"), e("seconds");
+    };
+    le(() => {
+      F(() => {
+        !c.arrowControl && te(), B(), c.role === "start" && p("hours");
+      });
+    });
+    const ce = (e, s) => {
+      h[s].value = e;
+    };
+    return g("set-option", [`${c.role}_scrollDown`, L]), g("set-option", [`${c.role}_emitSelectRange`, p]), ae(
+      () => c.spinnerDate,
+      () => {
+        _ || B();
+      }
+    ), (e, s) => (l(), a("div", {
+      class: m([n(i).b("spinner"), { "has-seconds": e.showSeconds }])
+    }, [
+      e.arrowControl ? N("", !0) : (l(!0), a(u, { key: 0 }, D(n(x), (o) => (l(), ue(n(he), {
+        key: o,
+        ref_for: !0,
+        ref: (r) => ce(r, o),
+        class: m(n(i).be("spinner", "wrapper")),
+        "wrap-style": "max-height: inherit;",
+        "view-class": n(i).be("spinner", "list"),
+        noresize: "",
+        tag: "ul",
+        onMouseenter: (r) => p(o),
+        onMousemove: (r) => b(o)
+      }, {
+        default: me(() => [
+          (l(!0), a(u, null, D(n(v)[o], (r, t) => (l(), a("li", {
+            key: t,
+            class: m([
+              n(i).be("spinner", "item"),
+              n(i).is("active", t === n(d)[o]),
+              n(i).is("disabled", r)
+            ]),
+            onClick: (w) => oe(o, { value: t, disabled: r })
+          }, [
+            o === "hours" ? (l(), a(u, { key: 0 }, [
+              $(f(("0" + (e.amPmMode ? t % 12 || 12 : t)).slice(-2)) + f(A(t)), 1)
+            ], 64)) : (l(), a(u, { key: 1 }, [
+              $(f(("0" + t).slice(-2)), 1)
+            ], 64))
+          ], 10, ge))), 128))
+        ]),
+        _: 2
+      }, 1032, ["class", "view-class", "onMouseenter", "onMousemove"]))), 128)),
+      e.arrowControl ? (l(!0), a(u, { key: 1 }, D(n(x), (o) => (l(), a("div", {
+        key: o,
+        class: m([n(i).be("spinner", "wrapper"), n(i).is("arrow")]),
+        onMouseenter: (r) => p(o)
+      }, [
+        I(j(n(q), {
+          icon: "ico-ep:arrow-up",
+          class: m(["arrow-up", n(i).be("spinner", "arrow")])
+        }, null, 8, ["class"]), [
+          [n(U), ee]
+        ]),
+        I(j(n(q), {
+          icon: "ico-ep:arrow-down",
+          class: m(["arrow-down", n(i).be("spinner", "arrow")])
+        }, null, 8, ["class"]), [
+          [n(U), y]
+        ]),
+        de("ul", {
+          class: m(n(i).be("spinner", "list"))
+        }, [
+          (l(!0), a(u, null, D(n(Y)[o], (r, t) => (l(), a("li", {
+            key: t,
+            class: m([
+              n(i).be("spinner", "item"),
+              n(i).is("active", r === n(d)[o]),
+              n(i).is("disabled", n(v)[o][r])
+            ])
+          }, [
+            typeof r == "number" ? (l(), a(u, { key: 0 }, [
+              o === "hours" ? (l(), a(u, { key: 0 }, [
+                $(f(("0" + (e.amPmMode ? r % 12 || 12 : r)).slice(-2)) + f(A(r)), 1)
+              ], 64)) : (l(), a(u, { key: 1 }, [
+                $(f(("0" + r).slice(-2)), 1)
+              ], 64))
+            ], 64)) : N("", !0)
+          ], 2))), 128))
+        ], 2)
+      ], 42, Se))), 128)) : N("", !0)
+    ], 2));
+  }
+});
+export {
+  Ae as default
+};