@layui/layui-vue/es/datePicker/component/common/Time.js

a component library for Vue 3 base on layui-vue

import { defineComponent as L, inject as C, ref as g, watch as V, openBlock as c, createElementBlock as h, createElementVNode as m, renderSlot as _, toDisplayString as k, unref as B, Fragment as T, renderList as D, normalizeClass as P, nextTick as A } from "vue";
import o from "dayjs";
import { useI18n as j } from "../../../language/index.js";
import { DATE_PICKER_CONTEXT as H } from "../../interface.js";
const O = { class: "layui-laydate-main laydate-time-show" }, R = { class: "layui-laydate-header" }, z = { class: "laydate-set-ym" }, F = { class: "laydate-time-text" }, K = { class: "layui-laydate-content", style: { height: "210px" } }, X = ["data-type"], $ = ["id", "data-value", "data-type"], Q = L({ name: "TimePanel", __name: "Time", props: { modelValue: {}, showDate: {}, dateType: {}, classes: {} }, emits: ["pick"], setup(N, { emit: x }) {
  const r = N, I = x, a = C(H), { t: S } = j(), b = [{ count: 24, type: "hh" }, { count: 60, type: "mm" }, { count: 60, type: "ss" }], n = g({ hh: null, mm: null, ss: null }), w = { hh: "hour", mm: "minute", ss: "second" };
  function y(l, i) {
    const e = i !== void 0, t = { hh: e ? n.value.hh : o().hour(), mm: e ? n.value.mm : o().minute(), ss: e ? n.value.ss : o().second() };
    e && (t[l] = i);
    const s = (r.modelValue || r.showDate).startOf("day").hour(t.hh).minute(t.mm).second(t.ss), u = w[l];
    return a.disabledDate ? a.disabledDate(s.toDate()) : !(!a.min || !s.isBefore(o(a.min, a.format), u)) || !(!a.max || !s.isAfter(o(a.max, a.format), u));
  }
  function E(l) {
    if (l.target && l.target.nodeName === "LI") {
      const { value: i, type: e } = l.target.dataset;
      if (y(e, Number.parseInt(i)))
        return;
      n.value[e] = Number.parseInt(i);
      let t = o({ hour: n.value.hh || 0, minute: n.value.mm || 0, second: n.value.ss || 0 });
      t.isBefore(o(a.min, a.format)) ? t = o(a.min, a.format) : t.isAfter(o(a.max, a.format)) && (t = o(a.max, a.format));
      const s = (r.modelValue || r.showDate).clone().set("hour", t.hour()).set("minute", t.minute()).set("second", t.second());
      I("pick", s);
    }
  }
  const p = g();
  return V(() => [r.modelValue, r.showDate], ([l, i]) => {
    const e = l || i;
    n.value = { hh: e ? e.hour() : null, mm: e ? e.minute() : null, ss: e ? e.second() : null }, A(() => {
      p.value.childNodes.forEach((t) => {
        if (t.nodeName === "LI") {
          let s = 0;
          const u = t.firstElementChild, v = u.childNodes;
          for (let f = 0; f < v.length; f++) {
            const d = v[f];
            if (d.nodeName === "LI" && d.classList && d.classList.contains("layui-this")) {
              s = d.offsetTop - (u.offsetHeight - d.offsetHeight) / 2, u.scrollTo(0, s);
              break;
            }
          }
        }
      });
    });
  }, { immediate: !0, flush: "post" }), (l, i) => (c(), h("div", O, [m("div", R, [m("div", z, [_(l.$slots, "header", {}, () => [m("span", F, k(B(S)("datePicker.selectTime")), 1)])])]), m("div", K, [m("ul", { ref_key: "timePanelRef", ref: p, class: "layui-laydate-list laydate-time-list" }, [(c(), h(T, null, D(b, (e) => m("li", { key: e.type, class: "num-list", "data-type": e.type }, [m("ol", { class: "scroll", onClick: E }, [(c(!0), h(T, null, D(e.count, (t, s) => (c(), h("li", { id: e.type + s.toString(), key: t, "data-value": s.toString().padStart(2, "0"), "data-type": e.type, class: P(["num", { "layui-this": s === n.value[e.type], "layui-disabled": y(e.type, s) }]) }, k(s.toString().padStart(2, "0")), 11, $))), 128))])], 8, X)), 64))], 512)])]));
} });
export {
  Q as default
};