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