vft 0.0.376 → 0.0.378

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

@@ -1,229 +1,318 @@
-import { defineComponent as de, inject as pe, ref as C, computed as k, unref as r, onMounted as he, nextTick as x, watch as fe, createElementBlock as a, openBlock as l, normalizeClass as m, createCommentVNode as I, Fragment as u, renderList as _, createBlock as be, withCtx as we, createTextVNode as D, toDisplayString as f, withDirectives as j, createElementVNode as ve, createVNode as U } from "vue";
-import { debounce as Se } from "lodash-es";
-import { vRepeatClick as q } from "@vft/directives";
-import { VftScrollbar as ge } from "../../scrollbar/index.js";
-import { VftIcon as z } from "../../icon/index.js";
+import { defineComponent, inject, ref, computed, unref, onMounted, nextTick, watch, createElementBlock, openBlock, normalizeClass, createCommentVNode, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString, withDirectives, createElementVNode, createVNode } from "vue";
+import { debounce } from "lodash-es";
+import { vRepeatClick } from "@vft/directives";
+import { VftScrollbar } from "../../scrollbar/index.js";
+import { VftIcon } from "../../icon/index.js";
 import "@vueuse/core";
-import { getStyle as Me, isNumber as Ce } from "@vft/utils";
+import { getStyle, isNumber } from "@vft/utils";
 import "../../config-provider/hooks/use-global-config.js";
-import { CHANGE_EVENT as K } from "../../../constants/event.js";
-import { useNamespace as ke } from "../../../hooks/use-namespace/index.js";
+import { CHANGE_EVENT } from "../../../constants/event.js";
+import { useNamespace } from "../../../hooks/use-namespace/index.js";
 import "../../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../../hooks/use-z-index/index.js";
-import { PICKER_BASE_INJECTION_KEY as _e, timeUnits as O, DEFAULT_FORMATS_TIME as De } from "../constants.js";
-import { buildTimeList as L } from "../utils.js";
-import { basicTimeSpinnerProps as Te } from "../props/basic-time-spinner.js";
-import { getTimeLists as $e } from "../composables/use-time-picker.js";
-const Ee = ["onClick"], Ne = ["onMouseenter"], Je = /* @__PURE__ */ de({
+import { PICKER_BASE_INJECTION_KEY, timeUnits, DEFAULT_FORMATS_TIME } from "../constants.js";
+import { buildTimeList } from "../utils.js";
+import { basicTimeSpinnerProps } from "../props/basic-time-spinner.js";
+import { getTimeLists } from "../composables/use-time-picker.js";
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = ["onMouseenter"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "basic-time-spinner",
-  props: Te,
-  emits: [K, "select-range", "set-option"],
-  setup(G, { emit: J }) {
-    const c = G, Y = pe(_e), { isRange: Q, format: A } = Y.props, v = J, i = ke("time"), { getHoursList: W, getMinutesList: X, getSecondsList: Z } = $e(
-      c.disabledHours,
-      c.disabledMinutes,
-      c.disabledSeconds
+  props: basicTimeSpinnerProps,
+  emits: [CHANGE_EVENT, "select-range", "set-option"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const pickerBase = inject(PICKER_BASE_INJECTION_KEY);
+    const { isRange, format } = pickerBase.props;
+    const emit = __emit;
+    const ns = useNamespace("time");
+    const { getHoursList, getMinutesList, getSecondsList } = getTimeLists(
+      props.disabledHours,
+      props.disabledMinutes,
+      props.disabledSeconds
     );
-    let T = !1;
-    const S = C(), y = C(), ee = C(), se = C(), h = {
-      hours: y,
-      minutes: ee,
-      seconds: se
-    }, F = k(() => c.showSeconds ? O : O.slice(0, 2)), d = k(() => {
-      const { spinnerDate: e } = c, o = e.hour(), s = e.minute(), n = e.second();
-      return { hours: o, minutes: s, seconds: n };
-    }), g = k(() => {
-      const { hours: e, minutes: o } = r(d), { role: s, spinnerDate: n } = c, t = Q ? void 0 : n;
+    let isScrolling = false;
+    const currentScrollbar = ref();
+    const listHoursRef = ref();
+    const listMinutesRef = ref();
+    const listSecondsRef = ref();
+    const listRefsMap = {
+      hours: listHoursRef,
+      minutes: listMinutesRef,
+      seconds: listSecondsRef
+    };
+    const spinnerItems = computed(() => {
+      return props.showSeconds ? timeUnits : timeUnits.slice(0, 2);
+    });
+    const timePartials = computed(() => {
+      const { spinnerDate } = props;
+      const hours = spinnerDate.hour();
+      const minutes = spinnerDate.minute();
+      const seconds = spinnerDate.second();
+      return { hours, minutes, seconds };
+    });
+    const timeList = computed(() => {
+      const { hours, minutes } = unref(timePartials);
+      const { role, spinnerDate } = props;
+      const compare = !isRange ? spinnerDate : void 0;
       return {
-        hours: W(s, t),
-        minutes: X(e, s, t),
-        seconds: Z(e, o, s, t)
+        hours: getHoursList(role, compare),
+        minutes: getMinutesList(hours, role, compare),
+        seconds: getSecondsList(hours, minutes, role, compare)
       };
-    }), oe = k(() => {
-      const { hours: e, minutes: o, seconds: s } = r(d);
+    });
+    const arrowControlTimeList = computed(() => {
+      const { hours, minutes, seconds } = unref(timePartials);
       return {
-        hours: L(e, 23),
-        minutes: L(o, 59),
-        seconds: L(s, 59)
+        hours: buildTimeList(hours, 23),
+        minutes: buildTimeList(minutes, 59),
+        seconds: buildTimeList(seconds, 59)
       };
-    }), ne = Se((e) => {
-      T = !1, b(e);
-    }, 200), H = (e) => {
-      if (!!!c.amPmMode) return "";
-      const s = c.amPmMode === "A";
-      let n = e < 12 ? " am" : " pm";
-      return s && (n = n.toUpperCase()), n;
-    }, p = (e) => {
-      let o = [0, 0];
-      if (!A || A === De)
-        switch (e) {
+    });
+    const debouncedResetScroll = debounce((type) => {
+      isScrolling = false;
+      adjustCurrentSpinner(type);
+    }, 200);
+    const getAmPmFlag = (hour) => {
+      const shouldShowAmPm = !!props.amPmMode;
+      if (!shouldShowAmPm) return "";
+      const isCapital = props.amPmMode === "A";
+      let content = hour < 12 ? " am" : " pm";
+      if (isCapital) content = content.toUpperCase();
+      return content;
+    };
+    const emitSelectRange = (type) => {
+      let range = [0, 0];
+      if (!format || format === DEFAULT_FORMATS_TIME) {
+        switch (type) {
           case "hours":
-            o = [0, 2];
+            range = [0, 2];
             break;
           case "minutes":
-            o = [3, 5];
+            range = [3, 5];
             break;
           case "seconds":
-            o = [6, 8];
+            range = [6, 8];
             break;
         }
-      const [s, n] = o;
-      v("select-range", s, n), S.value = e;
-    }, b = (e) => {
-      E(e, r(d)[e]);
-    }, V = () => {
-      b("hours"), b("minutes"), b("seconds");
-    }, $ = (e) => e.querySelector(`.${i.namespace.value}-scrollbar__wrap`), E = (e, o) => {
-      if (c.arrowControl) return;
-      const s = r(h[e]);
-      s && s.$el && ($(s.$el).scrollTop = Math.max(
-        0,
-        o * N(e)
-      ));
-    }, N = (e) => {
-      const s = r(h[e])?.$el.querySelector("li");
-      return s && Number.parseFloat(Me(s, "height")) || 0;
-    }, re = () => {
-      R(1);
-    }, te = () => {
-      R(-1);
-    }, R = (e) => {
-      S.value || p("hours");
-      const o = S.value, s = r(d)[o], n = S.value === "hours" ? 24 : 60, t = ce(o, s, e, n);
-      P(o, t), E(o, t), x(() => p(o));
-    }, ce = (e, o, s, n) => {
-      let t = (o + s + n) % n;
-      const w = r(g)[e];
-      for (; w[t] && t !== o; )
-        t = (t + s + n) % n;
-      return t;
-    }, P = (e, o) => {
-      if (r(g)[e][o]) return;
-      const { hours: t, minutes: w, seconds: B } = r(d);
-      let M;
-      switch (e) {
+      }
+      const [left, right] = range;
+      emit("select-range", left, right);
+      currentScrollbar.value = type;
+    };
+    const adjustCurrentSpinner = (type) => {
+      adjustSpinner(type, unref(timePartials)[type]);
+    };
+    const adjustSpinners = () => {
+      adjustCurrentSpinner("hours");
+      adjustCurrentSpinner("minutes");
+      adjustCurrentSpinner("seconds");
+    };
+    const getScrollbarElement = (el) => el.querySelector(`.${ns.namespace.value}-scrollbar__wrap`);
+    const adjustSpinner = (type, value) => {
+      if (props.arrowControl) return;
+      const scrollbar = unref(listRefsMap[type]);
+      if (scrollbar && scrollbar.$el) {
+        getScrollbarElement(scrollbar.$el).scrollTop = Math.max(
+          0,
+          value * typeItemHeight(type)
+        );
+      }
+    };
+    const typeItemHeight = (type) => {
+      const scrollbar = unref(listRefsMap[type]);
+      const listItem = scrollbar?.$el.querySelector("li");
+      if (listItem) {
+        return Number.parseFloat(getStyle(listItem, "height")) || 0;
+      }
+      return 0;
+    };
+    const onIncrement = () => {
+      scrollDown(1);
+    };
+    const onDecrement = () => {
+      scrollDown(-1);
+    };
+    const scrollDown = (step) => {
+      if (!currentScrollbar.value) {
+        emitSelectRange("hours");
+      }
+      const label = currentScrollbar.value;
+      const now = unref(timePartials)[label];
+      const total = currentScrollbar.value === "hours" ? 24 : 60;
+      const next = findNextUnDisabled(label, now, step, total);
+      modifyDateField(label, next);
+      adjustSpinner(label, next);
+      nextTick(() => emitSelectRange(label));
+    };
+    const findNextUnDisabled = (type, now, step, total) => {
+      let next = (now + step + total) % total;
+      const list = unref(timeList)[type];
+      while (list[next] && next !== now) {
+        next = (next + step + total) % total;
+      }
+      return next;
+    };
+    const modifyDateField = (type, value) => {
+      const list = unref(timeList)[type];
+      const isDisabled = list[value];
+      if (isDisabled) return;
+      const { hours, minutes, seconds } = unref(timePartials);
+      let changeTo;
+      switch (type) {
         case "hours":
-          M = c.spinnerDate.hour(o).minute(w).second(B);
+          changeTo = props.spinnerDate.hour(value).minute(minutes).second(seconds);
           break;
         case "minutes":
-          M = c.spinnerDate.hour(t).minute(o).second(B);
+          changeTo = props.spinnerDate.hour(hours).minute(value).second(seconds);
           break;
         case "seconds":
-          M = c.spinnerDate.hour(t).minute(w).second(o);
+          changeTo = props.spinnerDate.hour(hours).minute(minutes).second(value);
           break;
       }
-      v(K, M);
-    }, ie = (e, { value: o, disabled: s }) => {
-      s || (P(e, o), p(e), E(e, o));
-    }, le = (e) => {
-      const o = r(h[e]);
-      if (!o) return;
-      T = !0, ne(e);
-      const s = Math.min(
+      emit(CHANGE_EVENT, changeTo);
+    };
+    const handleClick = (type, { value, disabled }) => {
+      if (!disabled) {
+        modifyDateField(type, value);
+        emitSelectRange(type);
+        adjustSpinner(type, value);
+      }
+    };
+    const handleScroll = (type) => {
+      const scrollbar = unref(listRefsMap[type]);
+      if (!scrollbar) return;
+      isScrolling = true;
+      debouncedResetScroll(type);
+      const value = Math.min(
         Math.round(
-          ($(o.$el).scrollTop - (ae(e) * 0.5 - 10) / N(e) + 3) / N(e)
+          (getScrollbarElement(scrollbar.$el).scrollTop - (scrollBarHeight(type) * 0.5 - 10) / typeItemHeight(type) + 3) / typeItemHeight(type)
         ),
-        e === "hours" ? 23 : 59
+        type === "hours" ? 23 : 59
       );
-      P(e, s);
-    }, ae = (e) => r(h[e]).$el.offsetHeight, ue = () => {
-      const e = (o) => {
-        const s = r(h[o]);
-        s && s.$el && ($(s.$el).onscroll = () => {
-          le(o);
-        });
+      modifyDateField(type, value);
+    };
+    const scrollBarHeight = (type) => {
+      return unref(listRefsMap[type]).$el.offsetHeight;
+    };
+    const bindScrollEvent = () => {
+      const bindFunction = (type) => {
+        const scrollbar = unref(listRefsMap[type]);
+        if (scrollbar && scrollbar.$el) {
+          getScrollbarElement(scrollbar.$el).onscroll = () => {
+            handleScroll(type);
+          };
+        }
       };
-      e("hours"), e("minutes"), e("seconds");
+      bindFunction("hours");
+      bindFunction("minutes");
+      bindFunction("seconds");
     };
-    he(() => {
-      x(() => {
-        !c.arrowControl && ue(), V(), c.role === "start" && p("hours");
+    onMounted(() => {
+      nextTick(() => {
+        !props.arrowControl && bindScrollEvent();
+        adjustSpinners();
+        if (props.role === "start") emitSelectRange("hours");
       });
     });
-    const me = (e, o) => {
-      h[o].value = e ?? void 0;
+    const setRef = (scrollbar, type) => {
+      listRefsMap[type].value = scrollbar ?? void 0;
     };
-    return v("set-option", [`${c.role}_scrollDown`, R]), v("set-option", [`${c.role}_emitSelectRange`, p]), fe(
-      () => c.spinnerDate,
+    emit("set-option", [`${props.role}_scrollDown`, scrollDown]);
+    emit("set-option", [`${props.role}_emitSelectRange`, emitSelectRange]);
+    watch(
+      () => props.spinnerDate,
       () => {
-        T || V();
+        if (isScrolling) return;
+        adjustSpinners();
       }
-    ), (e, o) => (l(), a("div", {
-      class: m([r(i).b("spinner"), { "has-seconds": e.showSeconds }])
-    }, [
-      e.arrowControl ? I("", !0) : (l(!0), a(u, { key: 0 }, _(F.value, (s) => (l(), be(r(ge), {
-        key: s,
-        ref_for: !0,
-        ref: (n) => me(n, s),
-        class: m(r(i).be("spinner", "wrapper")),
-        "wrap-style": "max-height: inherit;",
-        "view-class": r(i).be("spinner", "list"),
-        noresize: "",
-        tag: "ul",
-        onMouseenter: (n) => p(s),
-        onMousemove: (n) => b(s)
-      }, {
-        default: we(() => [
-          (l(!0), a(u, null, _(g.value[s], (n, t) => (l(), a("li", {
-            key: t,
-            class: m([
-              r(i).be("spinner", "item"),
-              r(i).is("active", t === d.value[s]),
-              r(i).is("disabled", n)
-            ]),
-            onClick: (w) => ie(s, { value: t, disabled: n })
-          }, [
-            s === "hours" ? (l(), a(u, { key: 0 }, [
-              D(f(("0" + (e.amPmMode ? t % 12 || 12 : t)).slice(-2)) + f(H(t)), 1)
-            ], 64)) : (l(), a(u, { key: 1 }, [
-              D(f(("0" + t).slice(-2)), 1)
-            ], 64))
-          ], 10, Ee))), 128))
-        ]),
-        _: 2
-      }, 1032, ["class", "view-class", "onMouseenter", "onMousemove"]))), 128)),
-      e.arrowControl ? (l(!0), a(u, { key: 1 }, _(F.value, (s) => (l(), a("div", {
-        key: s,
-        class: m([r(i).be("spinner", "wrapper"), r(i).is("arrow")]),
-        onMouseenter: (n) => p(s)
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([unref(ns).b("spinner"), { "has-seconds": _ctx.showSeconds }])
       }, [
-        j(U(r(z), {
-          icon: "icon-arrow-up",
-          class: m(["arrow-up", r(i).be("spinner", "arrow")])
-        }, null, 8, ["class"]), [
-          [r(q), te]
-        ]),
-        j(U(r(z), {
-          icon: "icon-arrow-down",
-          class: m(["arrow-down", r(i).be("spinner", "arrow")])
-        }, null, 8, ["class"]), [
-          [r(q), re]
-        ]),
-        ve("ul", {
-          class: m(r(i).be("spinner", "list"))
-        }, [
-          (l(!0), a(u, null, _(oe.value[s], (n, t) => (l(), a("li", {
-            key: t,
-            class: m([
-              r(i).be("spinner", "item"),
-              r(i).is("active", n === d.value[s]),
-              r(i).is("disabled", g.value[s][n])
-            ])
+        !_ctx.arrowControl ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(spinnerItems.value, (item) => {
+          return openBlock(), createBlock(unref(VftScrollbar), {
+            key: item,
+            ref_for: true,
+            ref: (scrollbar) => setRef(scrollbar, item),
+            class: normalizeClass(unref(ns).be("spinner", "wrapper")),
+            "wrap-style": "max-height: inherit;",
+            "view-class": unref(ns).be("spinner", "list"),
+            noresize: "",
+            tag: "ul",
+            onMouseenter: ($event) => emitSelectRange(item),
+            onMousemove: ($event) => adjustCurrentSpinner(item)
+          }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(timeList.value[item], (disabled, key) => {
+                return openBlock(), createElementBlock("li", {
+                  key,
+                  class: normalizeClass([
+                    unref(ns).be("spinner", "item"),
+                    unref(ns).is("active", key === timePartials.value[item]),
+                    unref(ns).is("disabled", disabled)
+                  ]),
+                  onClick: ($event) => handleClick(item, { value: key, disabled })
+                }, [
+                  item === "hours" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                    createTextVNode(toDisplayString(("0" + (_ctx.amPmMode ? key % 12 || 12 : key)).slice(-2)) + toDisplayString(getAmPmFlag(key)), 1)
+                  ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                    createTextVNode(toDisplayString(("0" + key).slice(-2)), 1)
+                  ], 64))
+                ], 10, _hoisted_1);
+              }), 128))
+            ]),
+            _: 2
+          }, 1032, ["class", "view-class", "onMouseenter", "onMousemove"]);
+        }), 128)) : createCommentVNode("", true),
+        _ctx.arrowControl ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(spinnerItems.value, (item) => {
+          return openBlock(), createElementBlock("div", {
+            key: item,
+            class: normalizeClass([unref(ns).be("spinner", "wrapper"), unref(ns).is("arrow")]),
+            onMouseenter: ($event) => emitSelectRange(item)
           }, [
-            r(Ce)(n) ? (l(), a(u, { key: 0 }, [
-              s === "hours" ? (l(), a(u, { key: 0 }, [
-                D(f(("0" + (e.amPmMode ? n % 12 || 12 : n)).slice(-2)) + f(H(n)), 1)
-              ], 64)) : (l(), a(u, { key: 1 }, [
-                D(f(("0" + n).slice(-2)), 1)
-              ], 64))
-            ], 64)) : I("", !0)
-          ], 2))), 128))
-        ], 2)
-      ], 42, Ne))), 128)) : I("", !0)
-    ], 2));
+            withDirectives(createVNode(unref(VftIcon), {
+              icon: "icon-arrow-up",
+              class: normalizeClass(["arrow-up", unref(ns).be("spinner", "arrow")])
+            }, null, 8, ["class"]), [
+              [unref(vRepeatClick), onDecrement]
+            ]),
+            withDirectives(createVNode(unref(VftIcon), {
+              icon: "icon-arrow-down",
+              class: normalizeClass(["arrow-down", unref(ns).be("spinner", "arrow")])
+            }, null, 8, ["class"]), [
+              [unref(vRepeatClick), onIncrement]
+            ]),
+            createElementVNode("ul", {
+              class: normalizeClass(unref(ns).be("spinner", "list"))
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(arrowControlTimeList.value[item], (time, key) => {
+                return openBlock(), createElementBlock("li", {
+                  key,
+                  class: normalizeClass([
+                    unref(ns).be("spinner", "item"),
+                    unref(ns).is("active", time === timePartials.value[item]),
+                    unref(ns).is("disabled", timeList.value[item][time])
+                  ])
+                }, [
+                  unref(isNumber)(time) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                    item === "hours" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                      createTextVNode(toDisplayString(("0" + (_ctx.amPmMode ? time % 12 || 12 : time)).slice(-2)) + toDisplayString(getAmPmFlag(time)), 1)
+                    ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                      createTextVNode(toDisplayString(("0" + time).slice(-2)), 1)
+                    ], 64))
+                  ], 64)) : createCommentVNode("", true)
+                ], 2);
+              }), 128))
+            ], 2)
+          ], 42, _hoisted_2);
+        }), 128)) : createCommentVNode("", true)
+      ], 2);
+    };
   }
 });
 export {
-  Je as default
+  _sfc_main as default
 };

package/es/components/time-picker/time-picker-com/panel-time-pick.vue.js

@@ -1,4 +1,4 @@
-import f from "./panel-time-pick.vue2.js";
+import _sfc_main from "./panel-time-pick.vue2.js";
 export {
-  f as default
+  _sfc_main as default
 };