maz-ui/dist/chunks/MazPickerHeader.BF3xmBsl.js

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import { defineComponent, computed, ref, watch, createElementBlock, openBlock, normalizeClass, createCommentVNode, createVNode, TransitionGroup, withCtx, Fragment, renderList, toDisplayString } from "vue";
import { r } from "./capitalize.CVQ1jDrh.js";
import { n } from "./MazDatePicker.BkBbJH6f.js";
import dayjs from "dayjs";
import { _ as _export_sfc } from "./_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazPickerHeader.D7JXgA3q.css';const _hoisted_1 = {
  key: 0,
  class: "m-date-picker-header__date"
}, _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "MazPickerHeader",
  props: {
    modelValue: {},
    color: {},
    locale: {},
    hideShortcuts: { type: Boolean },
    double: { type: Boolean },
    hasDate: { type: Boolean },
    hasTime: { type: Boolean },
    formatterOptions: {}
  },
  setup(__props) {
    const refDate = computed(
      () => typeof __props.modelValue == "string" ? __props.modelValue : __props.modelValue?.start
    ), transitionName = ref("maz-slidevnext"), year = computed(() => __props.modelValue && typeof __props.modelValue == "object" ? `${__props.modelValue.start ? n(__props.modelValue.start, __props.locale, {
      year: "numeric",
      timeZone: __props.formatterOptions.timeZone
    }) : "..."} - ${__props.modelValue.end ? n(__props.modelValue.end, __props.locale, {
      year: "numeric",
      timeZone: __props.formatterOptions.timeZone
    }) : "..."}` : typeof __props.modelValue == "string" ? n(__props.modelValue, __props.locale, {
      year: "numeric",
      timeZone: __props.formatterOptions.timeZone
    }) : "-"), yearArray = computed(() => __props.hasDate ? [year.value] : void 0), dateString = computed(() => {
      if (__props.modelValue && typeof __props.modelValue == "object" && (__props.modelValue.start || __props.modelValue.end)) {
        const dateOption = __props.hideShortcuts && !__props.double ? "short" : "long";
        return `${__props.modelValue.start ? r(
          n(__props.modelValue.start, __props.locale, {
            weekday: dateOption,
            month: dateOption,
            day: "numeric",
            timeZone: __props.formatterOptions.timeZone
          }) ?? __props.modelValue.start
        ) : "..."} - ${__props.modelValue.end ? r(
          n(__props.modelValue.end, __props.locale, {
            weekday: dateOption,
            month: dateOption,
            day: "numeric",
            timeZone: __props.formatterOptions.timeZone
          }) ?? __props.modelValue.end
        ) : "..."}`;
      } else if (typeof __props.modelValue == "string") {
        const formattedDate = n(__props.modelValue, __props.locale, {
          weekday: "long",
          month: "long",
          day: "numeric",
          timeZone: __props.formatterOptions.timeZone
        });
        return formattedDate ? r(formattedDate) : void 0;
      }
      return "-";
    }), dateStringArray = computed(() => __props.hasDate ? [dateString.value] : void 0), timeValue = computed(() => refDate.value ? n(refDate.value, __props.locale, {
      timeStyle: "short",
      timeZone: __props.formatterOptions.timeZone,
      hour12: __props.formatterOptions.hour12
    }) : void 0), timeArray = computed(() => __props.hasTime ? [timeValue.value] : void 0);
    return watch(
      () => __props.modelValue,
      (modelValue, oldModelValue) => {
        const currentValue = typeof modelValue == "object" ? modelValue.start : modelValue, oldValue = typeof oldModelValue == "object" ? oldModelValue.start : oldModelValue;
        transitionName.value = dayjs(currentValue).isAfter(oldValue, "date") || dayjs(currentValue).isSame(oldValue, "date") ? "maz-slidevnext" : "maz-slidevprev";
      }
    ), (_ctx, _cache) => (openBlock(), createElementBlock("div", {
      class: normalizeClass(["m-date-picker-header", [`--${_ctx.color}`]])
    }, [
      _ctx.hasDate ? (openBlock(), createElementBlock("div", _hoisted_1, [
        createVNode(TransitionGroup, {
          name: transitionName.value,
          tag: "div",
          class: "m-date-picker-header__year-transition"
        }, {
          default: withCtx(() => [
            (openBlock(!0), createElementBlock(Fragment, null, renderList(yearArray.value, (y, yi) => (openBlock(), createElementBlock("span", {
              key: `${y}-${yi}`,
              class: "m-date-picker-header__year-text"
            }, toDisplayString(y), 1))), 128))
          ]),
          _: 1
        }, 8, ["name"]),
        createVNode(TransitionGroup, {
          name: transitionName.value,
          tag: "div",
          class: "m-date-picker-header__date-transition"
        }, {
          default: withCtx(() => [
            (openBlock(!0), createElementBlock(Fragment, null, renderList(dateStringArray.value, (d, di) => (openBlock(), createElementBlock("span", {
              key: `${d}-${di}`,
              class: "m-date-picker-header__date-text"
            }, toDisplayString(d), 1))), 128))
          ]),
          _: 1
        }, 8, ["name"])
      ])) : createCommentVNode("", !0),
      timeArray.value ? (openBlock(), createElementBlock("div", {
        key: 1,
        class: normalizeClass(["m-date-picker-header__time", { "--has-date": _ctx.hasDate }])
      }, [
        createVNode(TransitionGroup, {
          name: transitionName.value,
          tag: "div",
          class: "m-date-picker-header__time-transition"
        }, {
          default: withCtx(() => [
            (openBlock(!0), createElementBlock(Fragment, null, renderList(timeArray.value, (t, ti) => (openBlock(), createElementBlock("span", {
              key: `${t}-${ti}`,
              class: "m-date-picker-header__time-text"
            }, toDisplayString(t), 1))), 128))
          ]),
          _: 1
        }, 8, ["name"])
      ], 2)) : createCommentVNode("", !0)
    ], 2));
  }
}), MazPickerHeader = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c4921fd7"]]);
export {
  MazPickerHeader as default
};