@maple-design/ui-vue 0.0.0-stage → 1.1.1

package/es/date/presentation/CalendarViewport.vue.mjs

@@ -0,0 +1,304 @@
+import { defineComponent, computed, ref, onMounted, onBeforeUnmount, watch, nextTick, openBlock, createElementBlock, Fragment, createElementVNode, createVNode, unref, toDisplayString, renderList, mergeProps, normalizeStyle } from "vue";
+import { IconChevronLeft, IconChevronRight } from "@maple-design/icons-vue";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc.js";
+import { injectLocaleProvider } from "../../locale-provider/provide.mjs";
+import { dateText } from "../../locale/date-text.mjs";
+import { createNamespace } from "../../utils/components.mjs";
+const _hoisted_1 = ["data-mode", "data-total-months", "data-rendered-months"];
+const _hoisted_2 = {
+  class: "mp-calendar-viewport__navigation",
+  "aria-label": "Calendar navigation"
+};
+const _hoisted_3 = ["aria-label", "disabled"];
+const _hoisted_4 = {
+  class: "mp-calendar-viewport__period",
+  "aria-live": "polite"
+};
+const _hoisted_5 = ["aria-label", "disabled"];
+const _hoisted_6 = {
+  class: "mp-calendar-viewport__weekdays",
+  "aria-hidden": "true"
+};
+const _hoisted_7 = { class: "mp-calendar-viewport__grid" };
+const _hoisted_8 = ["onClick"];
+const _hoisted_9 = { class: "mp-calendar-viewport__day-value" };
+const _hoisted_10 = ["data-month"];
+const _hoisted_11 = { class: "mp-calendar-viewport__grid" };
+const _hoisted_12 = ["onClick"];
+const _hoisted_13 = {
+  key: 1,
+  "aria-hidden": "true"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: createNamespace("calendar-viewport").name },
+  __name: "CalendarViewport",
+  props: {
+    locale: {},
+    mode: {},
+    useVirtualScroll: { type: Boolean },
+    modelValue: {},
+    pickerValue: {},
+    min: {},
+    max: {},
+    dayStartOfWeek: {},
+    readonly: { type: Boolean },
+    multiple: { type: Boolean },
+    rangeEndpoint: {},
+    range: { type: Boolean },
+    showTime: { type: Boolean },
+    showCurrent: { type: Boolean },
+    today: {},
+    disabledDate: { type: Function }
+  },
+  emits: ["select", "navigate"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    dayjs.extend(utc);
+    const props = __props;
+    const emit = __emit;
+    const civil = (value) => dayjs.utc((value || "").slice(0, 10)).locale(props.locale || "en");
+    const anchor = computed(() => {
+      const value = Array.isArray(props.pickerValue) ? props.pickerValue[0] : props.pickerValue;
+      const date = civil(value);
+      return date.isValid() ? date : dayjs.utc().startOf("day");
+    });
+    const initialAnchor = anchor.value;
+    const minimum = computed(
+      () => props.min && civil(props.min).isValid() ? civil(props.min) : initialAnchor.subtract(12, "month").startOf("month")
+    );
+    const maximum = computed(
+      () => props.max && civil(props.max).isValid() ? civil(props.max) : initialAnchor.add(12, "month").endOf("month")
+    );
+    const base = computed(() => minimum.value.startOf("month"));
+    const total = computed(() => Math.max(0, maximum.value.startOf("month").diff(base.value, "month") + 1));
+    const weekStartsOn = computed(() => props.dayStartOfWeek ?? 0);
+    const weekStart = computed(() => anchor.value.subtract((anchor.value.day() - weekStartsOn.value + 7) % 7, "day"));
+    const weekEnd = computed(() => weekStart.value.add(6, "day"));
+    const { t: provided } = injectLocaleProvider();
+    const translate = (key) => (provided ?? dateText)(key);
+    const weekCaption = computed(() => {
+      const start = weekStart.value;
+      const end = weekEnd.value;
+      const endFormat = start.year() !== end.year() ? "YYYY.MM.DD" : start.month() !== end.month() ? "MM.DD" : "DD";
+      return `${start.format("YYYY.MM.DD")} – ${end.format(endFormat)}`;
+    });
+    const week = computed(() => Array.from({ length: 7 }, (_, index) => weekStart.value.add(index, "day")));
+    const scroller = ref();
+    const monthHeight = ref(320);
+    const scrollTop = ref(0);
+    const viewportHeight = ref(320);
+    const first = computed(
+      () => props.useVirtualScroll === false ? 0 : Math.max(0, Math.floor(scrollTop.value / monthHeight.value) - 1)
+    );
+    const months = computed(() => {
+      const count = props.useVirtualScroll === false ? total.value : Math.ceil(viewportHeight.value / monthHeight.value) + 3;
+      return Array.from({ length: Math.min(count, Math.max(0, total.value - first.value)) }, (_, offset) => {
+        const index = first.value + offset;
+        const date = base.value.add(index, "month");
+        const start = date.subtract((date.day() - weekStartsOn.value + 7) % 7, "day");
+        return { index, date, days: Array.from({ length: 42 }, (_2, day) => start.add(day, "day")) };
+      });
+    });
+    const selected = computed(
+      () => (Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue]).filter(Boolean)
+    );
+    function dayAttrs(day) {
+      const text = day.format("YYYY-MM-DD");
+      const chosen = selected.value.some((value) => value.slice(0, 10) === text);
+      const between = props.range && selected.value.length === 2 && text > selected.value[0].slice(0, 10) && text < selected.value[1].slice(0, 10);
+      return {
+        "aria-label": text,
+        "aria-pressed": chosen,
+        "aria-current": props.showCurrent !== false && text === civil(props.today).format("YYYY-MM-DD") ? "date" : void 0,
+        "data-in-range": between || void 0,
+        disabled: props.readonly || day.isBefore(minimum.value, "day") || day.isAfter(maximum.value, "day") || props.disabledDate?.(text)
+      };
+    }
+    function choose(day) {
+      if (dayAttrs(day).disabled) {
+        return;
+      }
+      const text = day.format("YYYY-MM-DD");
+      const previous = selected.value[0];
+      const value = text + (props.showTime ? previous?.slice(10) || " 00:00:00" : "");
+      if (props.range && props.rangeEndpoint !== void 0) {
+        emit("select", text);
+      } else if (props.range) {
+        emit("select", selected.value.length === 1 ? [selected.value[0], value].sort() : [value]);
+      } else if (props.multiple) {
+        emit(
+          "select",
+          selected.value.some((part) => part.slice(0, 10) === text) ? selected.value.filter((part) => part.slice(0, 10) !== text) : [...selected.value, value]
+        );
+      } else {
+        emit("select", value);
+      }
+    }
+    function navigate(date) {
+      const first2 = date.format("YYYY-MM-DD");
+      emit("navigate", props.range ? [first2, date.add(1, "month").format("YYYY-MM-DD")] : first2);
+    }
+    function moveWeek(direction) {
+      const next = anchor.value.add(direction * 7, "day");
+      const bounded = next.isBefore(minimum.value) ? minimum.value : next.isAfter(maximum.value) ? maximum.value : next;
+      navigate(bounded);
+    }
+    let observedIndex = -1;
+    function onScroll() {
+      scrollTop.value = scroller.value?.scrollTop ?? 0;
+      const index = Math.min(total.value - 1, Math.max(0, Math.floor(scrollTop.value / monthHeight.value)));
+      if (index >= 0 && index !== observedIndex) {
+        observedIndex = index;
+        const date = base.value.add(index, "month");
+        navigate(date.isBefore(minimum.value) ? minimum.value : date);
+        void nextTick(locate);
+      }
+    }
+    function locate() {
+      if (!scroller.value) {
+        return;
+      }
+      const index = Math.max(0, Math.min(total.value - 1, anchor.value.startOf("month").diff(base.value, "month")));
+      if (observedIndex !== index) {
+        observedIndex = index;
+        scroller.value.scrollTop = index * monthHeight.value;
+        scrollTop.value = scroller.value.scrollTop;
+      }
+    }
+    let observer;
+    async function measure() {
+      await nextTick();
+      const row = scroller.value?.querySelector(".mp-calendar-viewport__month");
+      if (row?.offsetHeight) {
+        monthHeight.value = row.offsetHeight;
+      }
+      viewportHeight.value = scroller.value?.clientHeight || 320;
+      observedIndex = -1;
+      locate();
+    }
+    onMounted(() => {
+      void measure();
+      if (typeof ResizeObserver !== "undefined" && scroller.value) {
+        observer = new ResizeObserver(() => {
+          void measure();
+        });
+        observer.observe(scroller.value);
+      }
+    });
+    onBeforeUnmount(() => observer?.disconnect());
+    watch(
+      () => [props.pickerValue, props.min, props.max, props.mode],
+      () => {
+        void nextTick(locate);
+      }
+    );
+    watch(scroller, (element) => {
+      observer?.disconnect();
+      if (element) {
+        observer?.observe(element);
+        void measure();
+      }
+    });
+    __expose({ scrollToSelection: locate });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("section", {
+        class: "mp-calendar-viewport",
+        "data-mode": _ctx.mode,
+        "data-total-months": total.value,
+        "data-rendered-months": months.value.length
+      }, [
+        _ctx.mode === "line" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          createElementVNode("nav", _hoisted_2, [
+            createElementVNode("button", {
+              type: "button",
+              "aria-label": translate("datePickerPreviousWeek"),
+              disabled: weekEnd.value.subtract(7, "day").isBefore(minimum.value, "day"),
+              onClick: _cache[0] || (_cache[0] = ($event) => moveWeek(-1))
+            }, [
+              createVNode(unref(IconChevronLeft), { "aria-hidden": "true" })
+            ], 8, _hoisted_3),
+            createElementVNode("span", _hoisted_4, toDisplayString(weekCaption.value), 1),
+            createElementVNode("button", {
+              type: "button",
+              "aria-label": translate("datePickerNextWeek"),
+              disabled: weekStart.value.add(7, "day").isAfter(maximum.value, "day"),
+              onClick: _cache[1] || (_cache[1] = ($event) => moveWeek(1))
+            }, [
+              createVNode(unref(IconChevronRight), { "aria-hidden": "true" })
+            ], 8, _hoisted_5)
+          ]),
+          createElementVNode("div", _hoisted_6, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(week.value, (day) => {
+              return openBlock(), createElementBlock("span", {
+                key: day.day(),
+                class: "mp-calendar-viewport__weekday"
+              }, toDisplayString(day.format("dd")), 1);
+            }), 128))
+          ]),
+          createElementVNode("div", _hoisted_7, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(week.value, (day) => {
+              return openBlock(), createElementBlock("button", mergeProps({
+                key: day.format("YYYY-MM-DD"),
+                type: "button",
+                ref_for: true
+              }, dayAttrs(day), {
+                onClick: ($event) => choose(day)
+              }), [
+                createElementVNode("span", _hoisted_9, toDisplayString(day.date()), 1)
+              ], 16, _hoisted_8);
+            }), 128))
+          ])
+        ], 64)) : (openBlock(), createElementBlock("div", {
+          key: 1,
+          ref_key: "scroller",
+          ref: scroller,
+          class: "mp-calendar-viewport__scroll",
+          tabindex: "0",
+          onScroll
+        }, [
+          createElementVNode("div", {
+            style: normalizeStyle({ height: `${first.value * monthHeight.value}px` }),
+            "aria-hidden": "true"
+          }, null, 4),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(months.value, (month) => {
+            return openBlock(), createElementBlock("section", {
+              key: month.index,
+              class: "mp-calendar-viewport__month",
+              "data-month": month.date.format("YYYY-MM")
+            }, [
+              createElementVNode("h4", null, toDisplayString(month.date.format("YYYY-MM")), 1),
+              createElementVNode("div", _hoisted_11, [
+                (openBlock(), createElementBlock(Fragment, null, renderList(7, (index) => {
+                  return createElementVNode("span", {
+                    key: `label-${index}`,
+                    class: "mp-calendar-viewport__weekday"
+                  }, toDisplayString(month.date.day((weekStartsOn.value + index - 1) % 7).format("dd")), 1);
+                }), 64)),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(month.days, (day) => {
+                  return openBlock(), createElementBlock(Fragment, {
+                    key: day.format("YYYY-MM-DD")
+                  }, [
+                    day.month() === month.date.month() ? (openBlock(), createElementBlock("button", mergeProps({
+                      key: 0,
+                      type: "button",
+                      ref_for: true
+                    }, dayAttrs(day), {
+                      onClick: ($event) => choose(day)
+                    }), toDisplayString(day.date()), 17, _hoisted_12)) : (openBlock(), createElementBlock("span", _hoisted_13))
+                  ], 64);
+                }), 128))
+              ])
+            ], 8, _hoisted_10);
+          }), 128)),
+          createElementVNode("div", {
+            style: normalizeStyle({ height: `${Math.max(0, total.value - first.value - months.value.length) * monthHeight.value}px` }),
+            "aria-hidden": "true"
+          }, null, 4)
+        ], 544))
+      ], 8, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/date/presentation/CalendarViewport2.vue.mjs

@@ -0,0 +1,4 @@
+import _sfc_main from "./CalendarViewport.vue.mjs";
+export {
+  _sfc_main as default
+};

package/es/date/presentation/DateFieldContent.vue.mjs

@@ -0,0 +1,179 @@
+import { defineComponent, ref, provide, watch, useId, computed, useSlots, openBlock, createBlock, unref, mergeProps, withCtx, createElementVNode, createVNode, createSlots, renderList, renderSlot, normalizeProps, guardReactiveProps, createElementBlock, normalizeClass, createCommentVNode } from "vue";
+import { isFieldOpenClick } from "../../_components/picker-field/open-trigger.mjs";
+import _sfc_main$1 from "../../_components/picker-field/PickerField.vue.mjs";
+import { splitInputAttrs } from "../../input/native-attrs.mjs";
+import { useTriggerKeyboard } from "../../time/presentation/use-trigger-keyboard.mjs";
+import "../../trigger/index.mjs";
+import { createNamespace } from "../../utils/components.mjs";
+import _sfc_main$2 from "../DatePanel.vue.mjs";
+import { dateFieldPanelOptions } from "../field-panel-options.mjs";
+import { datePresentationOptions } from "../presentation-options.mjs";
+import { rangeQuickConfirmRequired } from "../range-quick-selection.mjs";
+import { useDateFieldLocale } from "./use-field-locale.mjs";
+import Trigger from "../../trigger/trigger.mjs";
+const _hoisted_1 = ["id", "aria-label"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: createNamespace("date-field-content").name, inheritAttrs: false },
+  __name: "DateFieldContent",
+  props: {
+    fieldProps: {},
+    range: { type: Boolean },
+    rootClass: {},
+    state: {}
+  },
+  emits: ["update:pickerValue", "picker-value-change", "select-shortcut"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const quickConfirmRequired = ref(false);
+    provide(rangeQuickConfirmRequired, quickConfirmRequired);
+    watch(props.state.open, (open) => {
+      if (!open) {
+        quickConfirmRequired.value = false;
+      }
+    });
+    const emit = __emit;
+    const popupId = useId();
+    const { n } = createNamespace("date");
+    const field = ref();
+    const locale = useDateFieldLocale();
+    const { handleKeydown, handleKeyup } = useTriggerKeyboard({
+      open: props.state.open,
+      blocked: () => props.state.disabled.value || props.state.readonly.value,
+      cancel: props.state.cancel,
+      beforeOpen: (event) => field.value?.commit(event)
+    });
+    const popupProps = computed(() => ({
+      placement: "bottom-start",
+      ...datePresentationOptions(props.fieldProps.popupProps),
+      popupContainer: props.fieldProps.popupContainer !== void 0 ? props.fieldProps.popupContainer : props.fieldProps.popupProps?.popupContainer
+    }));
+    const panelProps = computed(() => ({
+      ...dateFieldPanelOptions(props.fieldProps, props.range),
+      // Honor the field's content mode in inline popovers as well as hosted editors.
+      presentation: props.fieldProps.panelType ?? (props.fieldProps.showTime ? "calendarPicker" : "calendar"),
+      modelValue: props.state.draft.value,
+      defaultValue: void 0,
+      disableConfirm: props.fieldProps.disableConfirm,
+      disabled: props.range ? props.state.disabledParts.value : props.state.disabled.value,
+      readonly: props.state.readonly.value
+    }));
+    function click(event) {
+      props.state.click(event);
+      if (!isFieldOpenClick(event, props.fieldProps.openTriggerTarget)) {
+        return;
+      }
+      if (!props.state.disabled.value && !props.state.readonly.value) {
+        field.value?.commit(event);
+        props.state.setOpen(true);
+      }
+    }
+    const slots = useSlots();
+    const fieldNames = ["prefix", "selected", "separator", "clear-icon"];
+    const fieldSlots = computed(() => fieldNames.filter((name) => Boolean(slots[name])));
+    const panelSlots = computed(
+      () => Object.keys(slots).filter((name) => ![...fieldNames, "default", "suffix", "suffix-icon"].includes(name))
+    );
+    __expose({ focus: (index = 0) => field.value?.focus(index), blur: () => field.value?.blur() });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Trigger), mergeProps(popupProps.value, {
+        "popup-class": [_ctx.fieldProps.popupProps?.popupClass, "mp-date-field-popover"],
+        trigger: [],
+        "unmount-on-close": true,
+        open: _ctx.state.open.value,
+        disabled: _ctx.state.disabled.value || _ctx.state.readonly.value,
+        "close-on-click-reference": false,
+        "prevent-focus": true,
+        "popup-offset": 4,
+        "onUpdate:open": _ctx.state.setOpen
+      }), {
+        content: withCtx(() => [
+          _ctx.state.open.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            id: unref(popupId),
+            class: normalizeClass(["mp-date-field-panel", {
+              "mp-date-field-panel--time": panelProps.value.showTime
+            }]),
+            role: "dialog",
+            "aria-label": unref(locale).title()
+          }, [
+            createVNode(_sfc_main$2, {
+              "endpoint-editor": _ctx.range,
+              options: panelProps.value,
+              range: _ctx.range,
+              onDraftInitialize: _ctx.state.initialize,
+              onSelect: _cache[4] || (_cache[4] = (value) => _ctx.state.select(value, _ctx.fieldProps.disableConfirm && !quickConfirmRequired.value)),
+              onConfirm: _cache[5] || (_cache[5] = (value) => _ctx.state.confirm(value)),
+              "onUpdate:pickerValue": _cache[6] || (_cache[6] = ($event) => emit("update:pickerValue", $event)),
+              onPickerValueChange: _cache[7] || (_cache[7] = (value, dates, texts) => emit("picker-value-change", value, dates, texts)),
+              onSelectShortcut: _cache[8] || (_cache[8] = ($event) => emit("select-shortcut", $event))
+            }, createSlots({ _: 2 }, [
+              renderList(panelSlots.value, (name) => {
+                return {
+                  name,
+                  fn: withCtx((scope) => [
+                    renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(scope || {})))
+                  ])
+                };
+              })
+            ]), 1032, ["endpoint-editor", "options", "range", "onDraftInitialize"])
+          ], 10, _hoisted_1)) : createCommentVNode("", true)
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", mergeProps(unref(splitInputAttrs)(_ctx.$attrs).root, {
+            class: _ctx.rootClass,
+            tabindex: -1,
+            onFocus: _cache[0] || (_cache[0] = //@ts-ignore
+            (...args) => _ctx.state.focus && _ctx.state.focus(...args)),
+            onBlur: _cache[1] || (_cache[1] = //@ts-ignore
+            (...args) => _ctx.state.blur && _ctx.state.blur(...args)),
+            onKeydown: _cache[2] || (_cache[2] = //@ts-ignore
+            (...args) => unref(handleKeydown) && unref(handleKeydown)(...args)),
+            onKeyup: _cache[3] || (_cache[3] = //@ts-ignore
+            (...args) => unref(handleKeyup) && unref(handleKeyup)(...args))
+          }), [
+            createVNode(_sfc_main$1, mergeProps({ ...unref(splitInputAttrs)(_ctx.$attrs).native, ..._ctx.state.controlProps.value }, {
+              ref_key: "field",
+              ref: field,
+              loading: _ctx.fieldProps.loading,
+              "loading-mode": _ctx.fieldProps.loadingMode,
+              "aria-controls": _ctx.state.open.value ? unref(popupId) : void 0,
+              cursor: _ctx.state.disabled.value || _ctx.state.readonly.value || _ctx.state.controlProps.value.editable ? "" : "pointer",
+              onCommit: _ctx.state.commitText,
+              onClick: click,
+              onClear: _ctx.state.clear,
+              onFocus: _ctx.state.focus,
+              onBlur: _ctx.state.blur
+            }), createSlots({ _: 2 }, [
+              renderList(fieldSlots.value, (name) => {
+                return {
+                  name,
+                  fn: withCtx((scope) => [
+                    renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(scope || {})))
+                  ])
+                };
+              }),
+              _ctx.$slots["suffix-icon"] ? {
+                name: "arrow-icon",
+                fn: withCtx((scope) => [
+                  renderSlot(_ctx.$slots, "suffix-icon", normalizeProps(guardReactiveProps(scope)))
+                ]),
+                key: "0"
+              } : void 0,
+              _ctx.$slots.suffix ? {
+                name: "suffix",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "suffix")
+                ]),
+                key: "1"
+              } : void 0
+            ]), 1040, ["loading", "loading-mode", "aria-controls", "cursor", "onCommit", "onClear", "onFocus", "onBlur"])
+          ], 16)
+        ]),
+        _: 3
+      }, 16, ["popup-class", "open", "disabled", "onUpdate:open"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/date/presentation/DateFieldContent2.vue.mjs

@@ -0,0 +1,4 @@
+import _sfc_main from "./DateFieldContent.vue.mjs";
+export {
+  _sfc_main as default
+};

package/es/date/presentation/DatePanelContent.vue.mjs

@@ -0,0 +1,168 @@
+import { defineComponent, useSlots, computed, shallowRef, watch, openBlock, createBlock, mergeProps, unref, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps } from "vue";
+import { provideRangeDisabledParts, useRangeFieldIndex } from "../../_components/picker-field/mobile-range-field-context.mjs";
+import { props } from "../../date-range/presentation-props.mjs";
+import RangeContent from "../../date-range/presentation/RangeContent.vue.mjs";
+import { createNamespace } from "../../utils/components.mjs";
+import { toCalendarValue, fromCalendarValue } from "../calendar-value.mjs";
+import { dateLocaleName } from "../date-locale.mjs";
+import { isCalendarDateDisabled } from "../date-rules.mjs";
+import { dateTimeDisabledPredicates } from "../date-time-rules.mjs";
+import { dateValueFormat, parseDateValue } from "../date-value.mjs";
+import { datePresentationOptions } from "../presentation-options.mjs";
+import { props as props$1 } from "../presentation-props.mjs";
+import CalendarContent from "./CalendarContent.vue.mjs";
+import _sfc_main$1 from "./CalendarViewport.vue.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: createNamespace("date-panel-content").name, inheritAttrs: false },
+  __name: "DatePanelContent",
+  props: {
+    options: {},
+    value: {},
+    pickerValue: {},
+    range: { type: Boolean },
+    canConfirm: { type: Boolean },
+    endpointEditor: { type: Boolean }
+  },
+  emits: ["select", "confirm", "navigate"],
+  setup(__props, { emit: __emit }) {
+    const props$2 = __props;
+    const { n } = createNamespace("date-picker");
+    const slots = useSlots();
+    const forwardedSlots = computed(() => Object.keys(slots).filter((name) => name !== "actions"));
+    const emit = __emit;
+    const disabledParts = provideRangeDisabledParts(
+      () => (props$2.range || props$2.options.range) && Array.isArray(props$2.options.disabled) ? props$2.options.disabled : []
+    );
+    const activeIndex = useRangeFieldIndex(disabledParts);
+    const valueOptions = computed(() => ({
+      ...props$2.options,
+      format: void 0,
+      valueFormat: dateValueFormat(props$2.options)
+    }));
+    const calendarValue = computed(() => {
+      const value = toCalendarValue(props$2.value, valueOptions.value);
+      return Array.isArray(value) ? value.map((part) => part ?? "") : value;
+    });
+    const renderedCalendarValue = shallowRef(calendarValue.value);
+    watch(calendarValue, (value) => {
+      if (!(props$2.range || props$2.options.range) || !Array.isArray(value) || value.length === 0 || value.length === 2 && value.every(Boolean)) {
+        renderedCalendarValue.value = value;
+      }
+    });
+    const rangeValue = computed(
+      () => Array.isArray(calendarValue.value) ? calendarValue.value.map((value) => value ?? "") : []
+    );
+    const timeRules = computed(
+      () => [0, 1].map((index) => {
+        const options = props$2.options;
+        const current = Array.isArray(props$2.value) ? props$2.value[index] : props$2.value;
+        const date = parseDateValue(current, options)?.toDate() ?? /* @__PURE__ */ new Date();
+        return dateTimeDisabledPredicates(date, options, index === 1 ? "end" : "start");
+      })
+    );
+    const bindings = computed(() => {
+      const { modelValue: _model, defaultValue: _default, ...options } = props$2.options;
+      toCalendarValue(props$2.value, valueOptions.value);
+      const side = props$2.range && activeIndex.value === 1 ? "end" : "start";
+      const disabledDate = (text, endpoint) => {
+        if (options.readonly || (Array.isArray(options.disabled) ? options.disabled.every(Boolean) : options.disabled)) {
+          return true;
+        }
+        const precision = text.length === 4 ? "year" : text.length === 7 ? "month" : "date";
+        if (precision !== (options.type ?? "date")) {
+          return false;
+        }
+        const format = precision === "year" ? "YYYY" : precision === "month" ? "YYYY-MM" : text.length === 9 ? "YYYY-MM-D" : "YYYY-MM-DD";
+        const parsed = parseDateValue(text, { ...options, valueFormat: format });
+        return !parsed || isCalendarDateDisabled(parsed.toDate(), options, endpoint);
+      };
+      return {
+        ...Object.fromEntries(
+          Object.entries(options).filter(
+            ([key]) => key in (props$2.range && !props$2.options.range ? props : props$1)
+          )
+        ),
+        ...props$2.range && !props$2.options.range ? {
+          datePickerProps: datePresentationOptions(
+            "datePickerProps" in options ? options.datePickerProps : void 0
+          ),
+          pickerProps: datePresentationOptions(
+            "pickerProps" in options ? options.pickerProps : void 0
+          )
+        } : {},
+        pickerValue: (() => {
+          const viewport = toCalendarValue(props$2.pickerValue, valueOptions.value);
+          return Array.isArray(viewport) ? viewport.map((part) => part ?? "") : viewport;
+        })(),
+        dateFields: options.dateFields,
+        timeFields: options.timeFields,
+        calendarLocale: dateLocaleName(options),
+        currentDate: parseDateValue(/* @__PURE__ */ new Date(), options)?.format("YYYY-MM-D"),
+        type: options.type === "year" || options.type === "month" ? options.type : "date",
+        readonly: options.readonly || (Array.isArray(options.disabled) ? props$2.range && !props$2.options.range ? options.disabled.every(Boolean) : options.disabled[activeIndex.value] : options.disabled),
+        min: options.min === void 0 ? void 0 : parseDateValue(options.min, options)?.format("YYYY-MM-DD"),
+        max: options.max === void 0 ? void 0 : parseDateValue(options.max, options)?.format("YYYY-MM-DD"),
+        disabledDate: (text) => disabledDate(text, side),
+        ...props$2.range && !props$2.options.range ? {
+          rangeDisabledDate: ["start", "end"].map(
+            (endpoint) => (text) => disabledDate(text, endpoint)
+          ),
+          rangeDisabledTime: timeRules.value
+        } : {},
+        disabledTime: timeRules.value[props$2.range && activeIndex.value === 1 ? 1 : 0]
+      };
+    });
+    function navigate(value) {
+      emit("navigate", fromCalendarValue(value, valueOptions.value));
+    }
+    function select(value) {
+      emit("select", fromCalendarValue(value, valueOptions.value, props$2.value));
+    }
+    return (_ctx, _cache) => {
+      return !("presentation" in _ctx.options && _ctx.options.presentation === "picker") && _ctx.options.interactiveMode && _ctx.options.interactiveMode !== "page" && !_ctx.options.showTime && (_ctx.options.type ?? "date") === "date" && !_ctx.range && !_ctx.options.range ? (openBlock(), createBlock(_sfc_main$1, mergeProps({ key: 0 }, bindings.value, {
+        mode: _ctx.options.interactiveMode,
+        locale: unref(dateLocaleName)(_ctx.options),
+        "use-virtual-scroll": _ctx.options.useVirtualScroll,
+        "model-value": calendarValue.value,
+        "picker-value": bindings.value.pickerValue,
+        range: _ctx.range || _ctx.options.range,
+        multiple: _ctx.options.multiple,
+        "day-start-of-week": _ctx.options.dayStartOfWeek,
+        "show-current": _ctx.options.showCurrent,
+        today: unref(parseDateValue)(/* @__PURE__ */ new Date(), _ctx.options)?.format("YYYY-MM-DD"),
+        onSelect: select,
+        onNavigate: navigate
+      }), null, 16, ["mode", "locale", "use-virtual-scroll", "model-value", "picker-value", "range", "multiple", "day-start-of-week", "show-current", "today"])) : _ctx.range && !_ctx.options.range ? (openBlock(), createBlock(RangeContent, mergeProps({ key: 1 }, { ..._ctx.$attrs, ...bindings.value }, {
+        "endpoint-editor": _ctx.endpointEditor,
+        "model-value": rangeValue.value,
+        "onUpdate:modelValue": select,
+        "onUpdate:pickerValue": navigate
+      }), createSlots({ _: 2 }, [
+        renderList(forwardedSlots.value, (name) => {
+          return {
+            name,
+            fn: withCtx((scope) => [
+              renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(scope || {})))
+            ])
+          };
+        })
+      ]), 1040, ["endpoint-editor", "model-value"])) : (openBlock(), createBlock(CalendarContent, mergeProps({ key: 2 }, { ..._ctx.$attrs, ...bindings.value }, {
+        "model-value": renderedCalendarValue.value,
+        "onUpdate:modelValue": select,
+        "onUpdate:pickerValue": navigate
+      }), createSlots({ _: 2 }, [
+        renderList(_ctx.$slots, (_, name) => {
+          return {
+            name,
+            fn: withCtx((scope) => [
+              renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(scope || {})))
+            ])
+          };
+        })
+      ]), 1040, ["model-value"]));
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/date/presentation/DatePanelContent2.vue.mjs

@@ -0,0 +1,4 @@
+import _sfc_main from "./DatePanelContent.vue.mjs";
+export {
+  _sfc_main as default
+};

package/es/date/presentation/calendar-layout.mjs

@@ -0,0 +1,4 @@
+const simultaneousDateLayout = Symbol("simultaneous-date-layout");
+export {
+  simultaneousDateLayout
+};