mine-h5-ui/es/MeCalendar/hooks.js

一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍

import { ref as M, computed as k, watch as j, useTemplateRef as Z, nextTick as _ } from "vue";
/*!
          * mine-h5-ui v2.16.0
          * Copyright (c) 2025 biaov
          * @license MIT
          */
const s = (l) => l < 10 ? `0${l}` : `${l}`, R = (l, i) => new Date(l, i, 0).getDate(), B = ({ visible: l }, i) => {
  const o = M(!1), $ = M(!1), f = Z("calendarRef");
  let D;
  const g = (y = 0) => new Promise((T, v) => {
    if (y > 50) {
      v(new Error("获取错误"));
      return;
    }
    clearTimeout(D), D = setTimeout(() => {
      f.value ? T(!0) : g(y + 1);
    }, 100);
  });
  return j(
    l,
    (y) => {
      y ? (i(), o.value = !0, g().then(() => {
        $.value = !0;
      })) : ($.value = !1, setTimeout(() => {
        o.value = !1;
      }, 300));
    },
    { immediate: !0 }
  ), { showAnimation: $, destroy: o, onClose: () => {
    l.value = !1;
  } };
}, G = ({ props: l, emit: i, modelValue: o, visible: $ }) => {
  const f = M({
    y: 0,
    m: 0,
    d: 0
  }), D = k(() => {
    const e = l.style || {};
    let a = {};
    return typeof e == "string" ? e.split(";").map((t) => {
      const [n, c] = t.split(":");
      n && (a[n] = c);
    }) : a = e, {
      ...a,
      "--theme": l.themeColor || "#409eff"
    };
  }), g = Object.freeze(["日", "一", "二", "三", "四", "五", "六"]), Y = Object.freeze(["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"]), y = k(() => ({
    y: f.value.y,
    m: Y[f.value.m - 1]
  })), T = 6 * 7, v = () => {
    const e = /* @__PURE__ */ new Date(), a = `${e.getFullYear()}-${s(e.getMonth() + 1)}-${s(e.getDate())}`, t = o.value ? new Date(o.value) : /* @__PURE__ */ new Date(), n = [], [c, u, A] = [t.getFullYear(), t.getMonth() + 1, t.getDate()];
    o.value && (o.value = `${c}-${s(u)}-${s(A)}`);
    const O = (/* @__PURE__ */ new Date(`${c}-${u}-1`)).getDay();
    let h = u - 1, w = c;
    h === 0 && (h = 12, w--);
    const S = R(w, h);
    Array.from({ length: O }, (I, m) => {
      const r = S - m, d = `${w}-${h}-${r}`;
      n.push({ y: w, m: h, d: r, value: s(r), disabled: !0, today: d === a });
    });
    const H = R(c, u);
    Array.from({ length: H }, (I, m) => {
      const r = m + 1, d = `${c}-${s(u)}-${s(r)}`, P = d === a, W = o.value ? d === o.value : !1;
      n.push({ y: c, m: u, d: r, value: s(r), today: P, selected: W });
    });
    let p = u + 1, C = c;
    p > 12 && (p = 1, C++), Array.from({ length: T - n.length }, (I, m) => {
      const r = m + 1, d = `${C}-${p}-${r}`;
      n.push({ y: C, m: p, d: r, value: s(r), disabled: !0, today: d === a });
    }), b.value = n, f.value = { y: c, m: u, d: A };
  }, b = M([]), x = (e, a, t) => {
    const n = R(e, a);
    t > n && (t = n), o.value = `${e}-${s(a)}-${s(t)}`, _(v);
  }, z = (e) => {
    const { y: a, m: t, d: n } = f.value, c = a + e;
    x(c, t, n);
  }, E = (e) => {
    let { y: a, m: t, d: n } = f.value;
    t += e, n = +n, t > 12 ? (t = 1, a++) : t === 0 && (t = 12, a--), x(a, t, n);
  }, F = (e, a) => {
    if (!e.selected) {
      if (o.value = `${e.y}-${s(e.m)}-${s(e.d)}`, l.closable && ($.value = !1), e.disabled) {
        _(v);
        return;
      }
      b.value.forEach((t, n) => {
        t.selected = n === a;
      });
    }
  };
  return j(o, (e) => {
    i("change", e);
  }), { getStyle: D, week: g, dateInfo: y, days: b, onYearItem: z, onMonthItem: E, onDayItem: F, initData: v };
};
export {
  G as useHandle,
  B as useShow
};