@extclp/vexip-ui/es/components/calendar/calendar-cell.vue2.mjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

import { defineComponent as g, computed as $, openBlock as B, createElementBlock as h, normalizeClass as r, unref as t, renderSlot as c, createElementVNode as u, withKeys as m, withModifiers as v, toDisplayString as N } from "vue";
import { useNameHelper as D } from "@vexip-ui/config";
import { toAttrValue as b } from "@vexip-ui/utils";
const P = ["aria-selected", "aria-disabled"], R = ["aria-label", "aria-disabled"], C = /* @__PURE__ */ g({
  __name: "calendar-cell",
  props: {
    date: {
      type: Date,
      required: !0
    },
    locale: {
      type: Object,
      required: !0
    },
    selected: {
      type: Boolean,
      default: !1
    },
    hovered: {
      type: Boolean,
      default: !1
    },
    isPrev: {
      type: Boolean,
      default: !1
    },
    isNext: {
      type: Boolean,
      default: !1
    },
    isToday: {
      type: Boolean,
      default: !1
    },
    disabled: {
      type: Boolean,
      default: !1
    },
    inRange: {
      type: Boolean,
      default: !1
    }
  },
  emits: ["select", "hover"],
  setup(e, { emit: f }) {
    const d = e, s = f, l = D("calendar"), o = $(() => {
      const i = d.locale.ariaLabel, a = d.date.getFullYear(), n = d.date.getMonth() + 1, y = d.date.getDate(), x = d.date.getDay() || 7;
      return `${i[`week${x}`]}, ${i[`month${n}`]} ${y}, ${a}`;
    });
    return (i, a) => (B(), h("div", {
      class: r(t(l).be("cell")),
      role: "gridcell",
      "aria-selected": t(b)(e.selected),
      "aria-disabled": t(b)(e.disabled),
      onMouseenter: a[3] || (a[3] = (n) => s("hover", e.date))
    }, [
      c(i.$slots, "item", {
        date: e.date,
        label: o.value,
        selected: e.selected,
        hovered: e.hovered,
        isPrev: e.isPrev,
        isNext: e.isNext,
        isToday: e.isToday,
        disabled: e.disabled,
        inRange: e.inRange
      }, () => [
        u("div", {
          class: r({
            [t(l).be("index")]: !0,
            [t(l).bem("index", "selected")]: e.selected,
            [t(l).bem("index", "prev")]: e.isPrev,
            [t(l).bem("index", "next")]: e.isNext,
            [t(l).bem("index", "today")]: e.isToday,
            [t(l).bem("index", "disabled")]: e.disabled,
            [t(l).bem("index", "in-range")]: e.inRange
          }),
          tabindex: "0",
          role: "button",
          "aria-label": o.value,
          "aria-disabled": t(b)(e.disabled),
          onClick: a[0] || (a[0] = (n) => s("select", e.date)),
          onKeydown: [
            a[1] || (a[1] = m(v((n) => s("select", e.date), ["prevent"]), ["enter"])),
            a[2] || (a[2] = m(v((n) => s("select", e.date), ["prevent"]), ["space"]))
          ]
        }, [
          c(i.$slots, "default", {
            date: e.date,
            label: o.value,
            selected: e.selected,
            hovered: e.hovered,
            isPrev: e.isPrev,
            isNext: e.isNext,
            isToday: e.isToday,
            disabled: e.disabled,
            inRange: e.inRange
          }, () => [
            u("div", {
              class: r(t(l).be("index-inner"))
            }, N(e.date.getDate()), 3)
          ])
        ], 42, R)
      ])
    ], 42, P));
  }
});
export {
  C as default
};
//# sourceMappingURL=calendar-cell.vue2.mjs.map