@vueland/ui 0.0.1 → 0.0.3

package/dist/components/CDatePicker/CDatePicker.js

@@ -0,0 +1,324 @@
+import { defineComponent, shallowRef, computed, reactive, unref, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, Transition, withCtx, renderSlot, normalizeProps, mergeProps, createCommentVNode, createBlock, createTextVNode, createSlots, guardReactiveProps } from 'vue';
+import { isDef } from '../../helpers/index.js';
+import _sfc_main$4 from './CDatePickerDates.js';
+import _sfc_main$1 from './CDatePickerHeader.js';
+import _sfc_main$3 from './CDatePickerMonths.js';
+import _sfc_main$2 from './CDatePickerYears.js';
+import { parseDate } from './helpers.js';
+import { LOCALE } from './locales/index.js';
+
+const _hoisted_1 = { class: "c-date-picker" };
+const _hoisted_2 = { class: "c-date-picker__display" };
+const _hoisted_3 = { class: "c-date-picker__display-year" };
+const _hoisted_4 = { class: "c-date-picker__body" };
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "CDatePicker" },
+  __name: "CDatePicker",
+  props: {
+    modelValue: {},
+    lang: { default: "en" },
+    format: { default: "dd.MM.yyyy" },
+    mondayFirst: { type: Boolean },
+    disabledDates: {},
+    highlightedDates: {},
+    minDate: {},
+    maxDate: {}
+  },
+  emits: ["update:modelValue", "selected"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const picker = shallowRef(null);
+    const today = parseDate(/* @__PURE__ */ new Date());
+    const selected = computed(
+      () => props.modelValue ? parseDate(new Date(props.modelValue)) : today
+    );
+    const locale = computed(() => {
+      var _a;
+      return (_a = LOCALE[props.lang]) != null ? _a : LOCALE["en"];
+    });
+    const minDate = computed(() => props.minDate ? parseDate(new Date(props.minDate)) : null);
+    const maxDate = computed(() => props.maxDate ? parseDate(new Date(props.maxDate)) : null);
+    const state = reactive({
+      tableMonth: unref(selected).month,
+      tableYear: unref(selected).year,
+      view: 0 /* DATES */,
+      bodyTransition: "c-date-slide-left"
+    });
+    const headerValue = computed(() => {
+      if (state.view === 2 /* YEARS */) {
+        return `${state.tableYear}`;
+      }
+      if (state.view === 1 /* MONTHS */) {
+        return `${unref(locale).monthsAbbr[state.tableMonth]}`;
+      }
+      return `${unref(locale).monthsAbbr[state.tableMonth]} ${state.tableYear}`;
+    });
+    const displayYear = computed(() => selected.value.year);
+    const displayDate = computed(() => {
+      const {
+        month,
+        date,
+        day
+      } = unref(selected);
+      return `${locale.value.monthsAbbr[month]} ${date}, ${locale.value.week[day]}`;
+    });
+    const disablePrev = computed(() => {
+      if (!minDate.value) {
+        return false;
+      }
+      if (state.view === 2 /* YEARS */) {
+        return state.tableYear <= unref(minDate).year && state.tableMonth <= unref(minDate).month;
+      }
+      if (state.view === 1 /* MONTHS */) {
+        return state.tableYear <= unref(minDate).year;
+      }
+      return false;
+    });
+    const disableNext = computed(() => {
+      if (!maxDate.value) {
+        return false;
+      }
+      if (state.view === 0 /* DATES */) {
+        return state.tableYear >= unref(maxDate).year && state.tableMonth >= unref(maxDate).month;
+      }
+      if (state.view === 1 /* MONTHS */) {
+        return state.tableYear >= unref(maxDate).year;
+      }
+      return false;
+    });
+    const slotApi = computed(() => ({
+      view: state.view,
+      value: headerValue.value,
+      selected: selected.value,
+      disablePrev: disablePrev.value,
+      disableNext: disableNext.value,
+      onNext: () => {
+        var _a;
+        return (_a = unref(picker)) == null ? void 0 : _a.onNext();
+      },
+      onPrev: () => {
+        var _a;
+        return (_a = unref(picker)) == null ? void 0 : _a.onPrev();
+      },
+      onTable: onTogglePicker,
+      onToday
+    }));
+    function onTogglePicker() {
+      if (state.view === 0 /* DATES */) {
+        state.bodyTransition = "c-date-slide-up";
+        state.view = 1 /* MONTHS */;
+        return;
+      }
+      if (state.view === 1 /* MONTHS */) {
+        state.bodyTransition = "c-date-slide-up";
+        state.view = 2 /* YEARS */;
+        return;
+      }
+      if (state.view === 2 /* YEARS */) {
+        state.bodyTransition = "c-date-slide-down";
+        state.view = 1 /* MONTHS */;
+      }
+    }
+    function onYearUpdate(year) {
+      state.tableYear = year;
+      state.bodyTransition = "c-date-slide-down";
+      state.view = 1 /* MONTHS */;
+    }
+    function onMonthUpdate(month) {
+      state.tableMonth = month;
+      state.bodyTransition = "c-date-slide-down";
+      state.view = 0 /* DATES */;
+    }
+    function onMonthChange(params) {
+      state.tableMonth = params.month;
+      if (isDef(params.year)) state.tableYear = params.year;
+    }
+    function onDateSelect(date) {
+      state.tableMonth = date.month;
+      state.tableYear = date.year;
+      const value = new Date(date.year, date.month, date.date);
+      emit("update:modelValue", value);
+      emit("selected", value);
+    }
+    function onToday() {
+      state.tableMonth = today.month;
+      state.tableYear = today.year;
+      state.view = 0 /* DATES */;
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode(
+            "div",
+            _hoisted_3,
+            toDisplayString(displayYear.value),
+            1
+            /* TEXT */
+          ),
+          createVNode(Transition, {
+            name: "c-date-fade",
+            mode: "out-in"
+          }, {
+            default: withCtx(() => [
+              (openBlock(), createElementBlock(
+                "div",
+                {
+                  key: displayDate.value,
+                  class: "c-date-picker__display-date"
+                },
+                toDisplayString(displayDate.value),
+                1
+                /* TEXT */
+              ))
+            ]),
+            _: 1
+            /* STABLE */
+          })
+        ]),
+        _ctx.$slots["before-header"] ? renderSlot(_ctx.$slots, "before-header", normalizeProps(mergeProps({ key: 0 }, slotApi.value))) : createCommentVNode("v-if", true),
+        _ctx.$slots.header ? renderSlot(_ctx.$slots, "header", normalizeProps(mergeProps({ key: 1 }, slotApi.value))) : (openBlock(), createBlock(_sfc_main$1, {
+          key: 2,
+          "disable-prev": disablePrev.value,
+          "disable-next": disableNext.value,
+          onNext: _cache[0] || (_cache[0] = ($event) => {
+            var _a;
+            return (_a = picker.value) == null ? void 0 : _a.onNext();
+          }),
+          onPrev: _cache[1] || (_cache[1] = ($event) => {
+            var _a;
+            return (_a = picker.value) == null ? void 0 : _a.onPrev();
+          }),
+          onTable: onTogglePicker
+        }, {
+          default: withCtx(() => [
+            createTextVNode(
+              toDisplayString(headerValue.value),
+              1
+              /* TEXT */
+            )
+          ]),
+          _: 1
+          /* STABLE */
+        }, 8, ["disable-prev", "disable-next"])),
+        _ctx.$slots["before-body"] ? renderSlot(_ctx.$slots, "before-body", normalizeProps(mergeProps({ key: 3 }, slotApi.value))) : createCommentVNode("v-if", true),
+        createElementVNode("div", _hoisted_4, [
+          _ctx.$slots.body ? renderSlot(_ctx.$slots, "body", normalizeProps(mergeProps({ key: 0 }, slotApi.value))) : (openBlock(), createBlock(Transition, {
+            key: 1,
+            name: state.bodyTransition,
+            mode: "out-in"
+          }, {
+            default: withCtx(() => {
+              var _a, _b;
+              return [
+                state.view === 2 /* YEARS */ ? (openBlock(), createBlock(_sfc_main$2, {
+                  key: "years",
+                  ref_key: "picker",
+                  ref: picker,
+                  year: state.tableYear,
+                  "min-year": (_a = minDate.value) == null ? void 0 : _a.year,
+                  "max-year": (_b = maxDate.value) == null ? void 0 : _b.year,
+                  "onUpdate:year": onYearUpdate
+                }, createSlots({
+                  _: 2
+                  /* DYNAMIC */
+                }, [
+                  _ctx.$slots.years ? {
+                    name: "years",
+                    fn: withCtx((slotProps) => [
+                      renderSlot(_ctx.$slots, "years", normalizeProps(guardReactiveProps(slotProps)))
+                    ]),
+                    key: "0"
+                  } : void 0,
+                  _ctx.$slots.year ? {
+                    name: "year",
+                    fn: withCtx((slotProps) => [
+                      renderSlot(_ctx.$slots, "year", normalizeProps(guardReactiveProps(slotProps)))
+                    ]),
+                    key: "1"
+                  } : void 0
+                ]), 1032, ["year", "min-year", "max-year"])) : state.view === 1 /* MONTHS */ ? (openBlock(), createBlock(_sfc_main$3, {
+                  key: "months",
+                  ref_key: "picker",
+                  ref: picker,
+                  month: state.tableMonth,
+                  year: state.tableYear,
+                  locale: locale.value.monthsAbbr,
+                  "min-date": minDate.value,
+                  "max-date": maxDate.value,
+                  "onUpdate:month": onMonthUpdate,
+                  "onUpdate:year": _cache[2] || (_cache[2] = (y) => {
+                    state.tableYear = y;
+                  })
+                }, createSlots({
+                  _: 2
+                  /* DYNAMIC */
+                }, [
+                  _ctx.$slots.months ? {
+                    name: "months",
+                    fn: withCtx((slotProps) => [
+                      renderSlot(_ctx.$slots, "months", normalizeProps(guardReactiveProps(slotProps)))
+                    ]),
+                    key: "0"
+                  } : void 0,
+                  _ctx.$slots.month ? {
+                    name: "month",
+                    fn: withCtx((slotProps) => [
+                      renderSlot(_ctx.$slots, "month", normalizeProps(guardReactiveProps(slotProps)))
+                    ]),
+                    key: "1"
+                  } : void 0
+                ]), 1032, ["month", "year", "locale", "min-date", "max-date"])) : (openBlock(), createBlock(_sfc_main$4, {
+                  key: "dates",
+                  ref_key: "picker",
+                  ref: picker,
+                  year: state.tableYear,
+                  month: state.tableMonth,
+                  value: selected.value,
+                  locale: locale.value.week,
+                  "monday-first": __props.mondayFirst,
+                  "disabled-dates": __props.disabledDates,
+                  "highlighted-dates": __props.highlightedDates,
+                  "min-date": minDate.value,
+                  "max-date": maxDate.value,
+                  "onUpdate:value": onDateSelect,
+                  "onUpdate:month": onMonthChange
+                }, createSlots({
+                  _: 2
+                  /* DYNAMIC */
+                }, [
+                  _ctx.$slots.week ? {
+                    name: "week",
+                    fn: withCtx((slotProps) => [
+                      renderSlot(_ctx.$slots, "week", normalizeProps(guardReactiveProps(slotProps)))
+                    ]),
+                    key: "0"
+                  } : void 0,
+                  _ctx.$slots.dates ? {
+                    name: "dates",
+                    fn: withCtx((slotProps) => [
+                      renderSlot(_ctx.$slots, "dates", normalizeProps(guardReactiveProps(slotProps)))
+                    ]),
+                    key: "1"
+                  } : void 0,
+                  _ctx.$slots.date ? {
+                    name: "date",
+                    fn: withCtx((slotProps) => [
+                      renderSlot(_ctx.$slots, "date", normalizeProps(guardReactiveProps(slotProps)))
+                    ]),
+                    key: "2"
+                  } : void 0
+                ]), 1032, ["year", "month", "value", "locale", "monday-first", "disabled-dates", "highlighted-dates", "min-date", "max-date"]))
+              ];
+            }),
+            _: 3
+            /* FORWARDED */
+          }, 8, ["name"]))
+        ]),
+        _ctx.$slots.footer ? renderSlot(_ctx.$slots, "footer", normalizeProps(mergeProps({ key: 4 }, slotApi.value))) : createCommentVNode("v-if", true)
+      ]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/CDatePicker/CDatePickerDates.js

@@ -0,0 +1,300 @@
+import { defineComponent, shallowRef, computed, unref, watch, openBlock, createElementBlock, renderSlot, Fragment, renderList, toDisplayString, createBlock, Transition, withCtx, normalizeClass, mergeProps, createTextVNode } from 'vue';
+import { parseDate, toDateString } from './helpers.js';
+
+const _hoisted_1 = { class: "c-date-picker-dates" };
+const _hoisted_2 = {
+  key: 1,
+  class: "c-date-picker-dates__week"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "c-date-picker-dates__cell c-date-picker-dates__cell--empty"
+};
+const _hoisted_4 = ["onClick"];
+const FIRST_MONTH = 0;
+const LAST_MONTH = 11;
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "CDatePickerDates" },
+  __name: "CDatePickerDates",
+  props: {
+    locale: {},
+    year: {},
+    month: {},
+    value: {},
+    mondayFirst: { type: Boolean },
+    disabledDates: {},
+    highlightedDates: {},
+    minDate: {},
+    maxDate: {}
+  },
+  emits: ["update:value", "update:month"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const DAYS = [0, 1, 2, 3, 4, 5, 6];
+    const today = parseDate(/* @__PURE__ */ new Date());
+    const dates = shallowRef([]);
+    const transitionName = shallowRef("c-date-slide-left");
+    const days = computed(() => {
+      let days2 = DAYS;
+      if (props.mondayFirst) {
+        days2 = DAYS.slice(1);
+        days2.push(DAYS[0]);
+      }
+      return days2;
+    });
+    const daysInMonth = computed(() => new Date(props.year, props.month + 1, 0).getDate());
+    const weekDays = computed(() => unref(days).map((d) => {
+      var _a;
+      return {
+        day: d,
+        label: (_a = props.locale) == null ? void 0 : _a[d]
+      };
+    }));
+    function updateMonth(isNext) {
+      transitionName.value = isNext ? "c-date-slide-left" : "c-date-slide-right";
+      let month = props.month + (isNext ? 1 : -1);
+      let year;
+      if (!isNext && month < FIRST_MONTH) {
+        month = LAST_MONTH;
+        year = props.year - 1;
+      }
+      if (isNext && month > LAST_MONTH) {
+        month = FIRST_MONTH;
+        year = props.year + 1;
+      }
+      emit("update:month", {
+        month,
+        year
+      });
+    }
+    function genDateObject(day) {
+      return parseDate(new Date(props.year, props.month, day));
+    }
+    function buildDates() {
+      dates.value = [];
+      for (let i = 1; i <= daysInMonth.value; i++) {
+        const dateObj = genDateObject(i);
+        if (i === 1) {
+          const firstDayIndex = DAYS.indexOf(dateObj.day);
+          for (let j = 0; j < firstDayIndex; j++) dates.value.push({ date: null });
+        }
+        dates.value.push(dateObj);
+      }
+    }
+    function isEqualDates(a, b) {
+      if (!b) return false;
+      return a.date === b.date && a.month === b.month && a.year === b.year;
+    }
+    const parsedFromTo = computed(() => {
+      var _a, _b, _c;
+      const { from, to } = (_a = props.disabledDates) != null ? _a : {};
+      if (!from || !to) return null;
+      return {
+        f: (_b = parseDate(new Date(from)).mls) != null ? _b : 0,
+        t: (_c = parseDate(new Date(to)).mls) != null ? _c : 0
+      };
+    });
+    const parsedRanges = computed(
+      () => {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = props.disabledDates) == null ? void 0 : _a.ranges) == null ? void 0 : _b.map((r) => {
+          var _a2, _b2;
+          return {
+            f: (_a2 = parseDate(new Date(r.from)).mls) != null ? _a2 : 0,
+            t: (_b2 = parseDate(new Date(r.to)).mls) != null ? _b2 : 0
+          };
+        })) != null ? _c : [];
+      }
+    );
+    const parsedHighlighted = computed(
+      () => {
+        var _a, _b;
+        return (_b = (_a = props.highlightedDates) == null ? void 0 : _a.map((d) => parseDate(new Date(d)))) != null ? _b : [];
+      }
+    );
+    function isDisabled(date) {
+      var _a;
+      if (!date.date) return false;
+      const mls = (_a = date.mls) != null ? _a : 0;
+      const {
+        disabledDates: d,
+        minDate,
+        maxDate
+      } = props;
+      return [
+        () => {
+          var _a2;
+          return !!minDate && mls < ((_a2 = minDate.mls) != null ? _a2 : 0);
+        },
+        () => {
+          var _a2;
+          return !!maxDate && mls > ((_a2 = maxDate.mls) != null ? _a2 : 0);
+        },
+        () => {
+          var _a2;
+          return !!((_a2 = d == null ? void 0 : d.daysOfMonth) == null ? void 0 : _a2.includes(date.date));
+        },
+        () => {
+          var _a2;
+          return !!((_a2 = d == null ? void 0 : d.days) == null ? void 0 : _a2.includes(date.day));
+        },
+        () => {
+          var _a2;
+          return !!((_a2 = d == null ? void 0 : d.dates) == null ? void 0 : _a2.some((v) => `${new Date(v)}` === `${toDateString(date)}`));
+        },
+        () => !!parsedFromTo.value && mls >= parsedFromTo.value.f && mls <= parsedFromTo.value.t,
+        () => parsedRanges.value.some((r) => mls >= r.f && mls <= r.t),
+        () => {
+          var _a2;
+          return !!((_a2 = d == null ? void 0 : d.custom) == null ? void 0 : _a2.call(d, date));
+        }
+      ].some((check) => check());
+    }
+    function isHighlighted(date) {
+      return parsedHighlighted.value.some((d) => isEqualDates(date, d));
+    }
+    const enrichedDates = computed(
+      () => dates.value.map((dateObj) => {
+        if (!dateObj || !dateObj.date) return {
+          dateObj,
+          empty: true,
+          disabled: false,
+          highlighted: false,
+          isSelected: false,
+          isToday: false
+        };
+        const disabled = isDisabled(dateObj);
+        const highlighted = isHighlighted(dateObj);
+        dateObj.isHoliday = disabled;
+        dateObj.isHighlighted = highlighted;
+        return {
+          dateObj,
+          empty: false,
+          disabled,
+          highlighted,
+          isSelected: isEqualDates(dateObj, props.value),
+          isToday: isEqualDates(dateObj, today)
+        };
+      })
+    );
+    const rows = computed(() => {
+      const result = [];
+      for (let i = 0; i < enrichedDates.value.length; i += 7) {
+        result.push(enrichedDates.value.slice(i, i + 7));
+      }
+      return result;
+    });
+    watch(() => props.month, buildDates, { immediate: true });
+    __expose({
+      onNext: () => updateMonth(true),
+      onPrev: () => updateMonth(false)
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        _ctx.$slots.week ? renderSlot(_ctx.$slots, "week", {
+          key: 0,
+          days: weekDays.value
+        }) : (openBlock(), createElementBlock("div", _hoisted_2, [
+          (openBlock(true), createElementBlock(
+            Fragment,
+            null,
+            renderList(weekDays.value, (wd) => {
+              return openBlock(), createElementBlock(
+                "span",
+                {
+                  key: wd.day,
+                  class: "c-date-picker-dates__day"
+                },
+                toDisplayString(wd.label),
+                1
+                /* TEXT */
+              );
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ])),
+        _ctx.$slots.dates ? renderSlot(_ctx.$slots, "dates", {
+          key: 2,
+          dates: enrichedDates.value,
+          onSelect: (d) => !d.isHoliday && emit("update:value", d)
+        }) : (openBlock(), createBlock(Transition, {
+          key: 3,
+          name: transitionName.value,
+          mode: "out-in"
+        }, {
+          default: withCtx(() => [
+            (openBlock(), createElementBlock("div", {
+              key: `${__props.year}-${__props.month}`,
+              class: "c-date-picker-dates__dates"
+            }, [
+              (openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList(rows.value, (row, ri) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: ri,
+                    class: "c-date-picker-dates__row"
+                  }, [
+                    (openBlock(true), createElementBlock(
+                      Fragment,
+                      null,
+                      renderList(row, (item, ci) => {
+                        var _a;
+                        return openBlock(), createElementBlock(
+                          Fragment,
+                          { key: ci },
+                          [
+                            item.empty || !((_a = item.dateObj) == null ? void 0 : _a.date) ? (openBlock(), createElementBlock("div", _hoisted_3)) : (openBlock(), createElementBlock("div", {
+                              key: 1,
+                              class: normalizeClass([
+                                "c-date-picker-dates__cell",
+                                item.isSelected && "c-date-picker-dates__cell--selected",
+                                item.isToday && !item.isSelected && "c-date-picker-dates__cell--today",
+                                item.disabled && "c-date-picker-dates__cell--disabled",
+                                item.highlighted && "c-date-picker-dates__cell--highlighted"
+                              ]),
+                              onClick: ($event) => !item.disabled && emit("update:value", item.dateObj)
+                            }, [
+                              _ctx.$slots.date ? renderSlot(_ctx.$slots, "date", mergeProps({
+                                key: 0,
+                                ref_for: true
+                              }, { ...item.dateObj, isSelected: item.isSelected, isToday: item.isToday })) : (openBlock(), createElementBlock(
+                                Fragment,
+                                { key: 1 },
+                                [
+                                  createTextVNode(
+                                    toDisplayString(item.dateObj.date),
+                                    1
+                                    /* TEXT */
+                                  )
+                                ],
+                                64
+                                /* STABLE_FRAGMENT */
+                              ))
+                            ], 10, _hoisted_4))
+                          ],
+                          64
+                          /* STABLE_FRAGMENT */
+                        );
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ]);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ]))
+          ]),
+          _: 3
+          /* FORWARDED */
+        }, 8, ["name"]))
+      ]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/CDatePicker/CDatePickerHeader.js

@@ -0,0 +1,62 @@
+import { defineComponent, openBlock, createElementBlock, createElementVNode, createVNode, unref, normalizeClass, withCtx, renderSlot } from 'vue';
+import _sfc_main$1 from '../CBtn/CBtn.js';
+import _sfc_main$2 from '../CIcon/CIcon.js';
+import { IconAliases } from '../../enums/IconName.js';
+
+const _hoisted_1 = { class: "c-date-picker__header" };
+const _hoisted_2 = { class: "c-date-picker__header-nav" };
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "CDatePickerHeader" },
+  __name: "CDatePickerHeader",
+  props: {
+    disablePrev: { type: Boolean },
+    disableNext: { type: Boolean }
+  },
+  emits: ["next", "prev", "table"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createVNode(unref(_sfc_main$1), {
+            class: normalizeClass(["c-date-picker__header-btn", __props.disablePrev && "c-date-picker__header-btn--disabled"]),
+            disabled: __props.disablePrev,
+            onClick: _cache[0] || (_cache[0] = ($event) => emit("prev"))
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(_sfc_main$2), {
+                name: unref(IconAliases).CHEVRON_LEFT,
+                size: 20
+              }, null, 8, ["name"])
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["class", "disabled"]),
+          createElementVNode("div", {
+            class: "c-date-picker__header-display",
+            onClick: _cache[1] || (_cache[1] = ($event) => emit("table"))
+          }, [
+            renderSlot(_ctx.$slots, "default")
+          ]),
+          createVNode(unref(_sfc_main$1), {
+            class: normalizeClass(["c-date-picker__header-btn", __props.disableNext && "c-date-picker__header-btn--disabled"]),
+            disabled: __props.disableNext,
+            onClick: _cache[2] || (_cache[2] = ($event) => emit("next"))
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(_sfc_main$2), {
+                name: unref(IconAliases).CHEVRON_RIGHT,
+                size: 20
+              }, null, 8, ["name"])
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["class", "disabled"])
+        ]),
+        renderSlot(_ctx.$slots, "actions")
+      ]);
+    };
+  }
+});
+
+export { _sfc_main as default };