@mekari/pixel3-date-picker 0.0.1-dev.0

package/dist/chunk-EJCSF5VR.mjs

@@ -0,0 +1,492 @@
+import {
+  calendarPanelProps,
+  calendarPanelRangeProps
+} from "./chunk-Q3Z5ZITX.mjs";
+import {
+  TableDate
+} from "./chunk-LVCRFE25.mjs";
+import {
+  TableMonth
+} from "./chunk-5PISTT2K.mjs";
+import {
+  TableYear
+} from "./chunk-HJ4V3PM6.mjs";
+import {
+  useCalendar
+} from "./chunk-NVULZQVI.mjs";
+import {
+  useCalendarRange
+} from "./chunk-JZ2KFYWF.mjs";
+import {
+  useDatePickerContext
+} from "./chunk-VACMCDOZ.mjs";
+import {
+  addDays,
+  createDate,
+  isDateBetween,
+  startOfWeek
+} from "./chunk-26Y3AVJW.mjs";
+import {
+  getLocale
+} from "./chunk-OY5PVQH5.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/calendar-panel.tsx
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+import { defineComponent, ref, watch } from "vue";
+import { isToday, isEqual } from "date-fns";
+import { calendarPanelRangeRecipe } from "@mekari/pixel3-styled-system/recipes";
+var CalendarPanel = defineComponent({
+  name: "CalendarPanel",
+  props: calendarPanelProps,
+  emits: ["update:modelValue", "mouseEnter", "mouseLeave", "updateCalendar"],
+  setup(props, {
+    emit
+  }) {
+    const {
+      locale
+    } = useDatePickerContext();
+    const restValue = ref(props.modelValue);
+    const {
+      currentDate: currentPanelDate,
+      currentPanel,
+      changePanel,
+      getDates,
+      getMonths,
+      getYears,
+      nextMonth,
+      previousMonth,
+      nextYear,
+      previousYear,
+      getLabel,
+      changeMonth,
+      changeYear
+    } = useCalendar(props.modelValue || props.defaultValue, locale);
+    function onSelectDate(date) {
+      currentPanelDate.value = date;
+      restValue.value = date;
+      emit("update:modelValue", restValue.value);
+    }
+    __name(onSelectDate, "onSelectDate");
+    function onSelectMonth(value, year) {
+      if (props.type === "month") {
+        const day = 1;
+        const month = value;
+        const date = new Date(year, month, day);
+        restValue.value = date;
+        emit("update:modelValue", restValue.value);
+        return;
+      }
+      changeMonth(value);
+      changePanel("date");
+    }
+    __name(onSelectMonth, "onSelectMonth");
+    function onSelectYear(value) {
+      if (props.type === "year") {
+        const day = 1;
+        const month = currentPanelDate.value.getMonth();
+        const year = value;
+        const date = new Date(year, month, day);
+        restValue.value = date;
+        emit("update:modelValue", restValue.value);
+        return;
+      }
+      changeYear(value);
+      changePanel("month");
+    }
+    __name(onSelectYear, "onSelectYear");
+    function getDateStatus(date) {
+      let status = "default";
+      if (isToday(date))
+        status = "today";
+      if (isEqual(props.modelValue, date)) {
+        status = "selected";
+      }
+      const isCurrentMonth = currentPanelDate.value.getMonth() === date.getMonth();
+      if (!isCurrentMonth)
+        status = "notThisMonth";
+      if (props.getDateStatus && props.getDateStatus(date)) {
+        status = props.getDateStatus(date);
+        if (props.isHideNotThisMonthDate && !isCurrentMonth) {
+          status = "notThisMonth";
+        }
+      }
+      return {
+        status,
+        isDisabled: props.disabledDate ? props.disabledDate(date) : false,
+        // TODO : Handle show pin bar
+        isShowPinbar: false
+      };
+    }
+    __name(getDateStatus, "getDateStatus");
+    function getMonthStatus(month, year) {
+      let status = "default";
+      const isCurrentMonth = currentPanelDate.value.getMonth() === month && year === (/* @__PURE__ */ new Date()).getFullYear();
+      if (isCurrentMonth)
+        status = "today";
+      if (props.type === "month" && props.modelValue) {
+        const isMonthEqual = props.modelValue.getMonth() === month;
+        const isYearEqual = props.modelValue.getFullYear() === currentPanelDate.value.getFullYear();
+        const isSelected = isMonthEqual && isYearEqual;
+        if (isSelected)
+          status = "selected";
+      }
+      if (props.getMonthStatus && props.getMonthStatus(month, year)) {
+        status = props.getMonthStatus(month, year);
+      }
+      return {
+        status,
+        isDisabled: props.disabledMonth(month, year) || false
+      };
+    }
+    __name(getMonthStatus, "getMonthStatus");
+    function getYearStatus(year) {
+      var _a;
+      let status = "default";
+      const isCurrentYear = (/* @__PURE__ */ new Date()).getFullYear() === year;
+      if (isCurrentYear)
+        status = "today";
+      const isSelected = ((_a = props.modelValue) == null ? void 0 : _a.getFullYear()) === year;
+      if (isSelected)
+        status = "selected";
+      if (props.getYearStatus && props.getYearStatus(year)) {
+        status = props.getYearStatus(year);
+      }
+      return {
+        status,
+        isDisabled: props.disabledYear(year) || false
+      };
+    }
+    __name(getYearStatus, "getYearStatus");
+    function initCalendar() {
+      if (props.calendar) {
+        const calendarDate = props.calendar;
+        currentPanelDate.value = calendarDate;
+      }
+    }
+    __name(initCalendar, "initCalendar");
+    watch(() => props.modelValue, (newValue) => {
+      if (newValue)
+        restValue.value = newValue;
+    }, {
+      immediate: true
+    });
+    watch(() => props.type, (newValue) => {
+      if (newValue)
+        currentPanel.value = newValue;
+    }, {
+      immediate: true
+    });
+    watch(() => currentPanelDate.value, (newValue) => {
+      if (newValue) {
+        emit("updateCalendar", newValue);
+      }
+    });
+    watch(() => props.calendar, () => {
+      initCalendar();
+    }, {
+      immediate: true
+    });
+    return () => {
+      if (currentPanel.value === "date") {
+        return _createVNode(TableDate, {
+          "days": locale.value.days,
+          "dates": getDates.value,
+          "headerLabel": getLabel.value,
+          "shortcutLabel": locale.value.todayText,
+          "onNext": nextMonth,
+          "onPrevious": previousMonth,
+          "onClickHeaderLabel": () => changePanel("year"),
+          "onSelect": onSelectDate,
+          "getDateStatus": getDateStatus,
+          "isShowShortcut": props.isShowShortcut,
+          "onMouseEnter": (value) => emit("mouseEnter", value),
+          "onMouseLeave": () => emit("mouseLeave"),
+          "isHideNotThisMonthDate": props.isHideNotThisMonthDate
+        }, null);
+      }
+      if (currentPanel.value === "month") {
+        return _createVNode(TableMonth, {
+          "calendar": currentPanelDate.value,
+          "months": getMonths.value,
+          "headerLabel": getLabel.value,
+          "shortcutLabel": locale.value.thisMonthText,
+          "onNext": nextYear,
+          "onPrevious": previousYear,
+          "onClickHeaderLabel": () => changePanel("year"),
+          "onSelect": onSelectMonth,
+          "getMonthStatus": getMonthStatus,
+          "onMouseEnter": (value) => emit("mouseEnter", value),
+          "onMouseLeave": () => emit("mouseLeave"),
+          "isShowShortcut": props.isShowShortcut
+        }, null);
+      }
+      if (currentPanel.value === "year") {
+        return _createVNode(TableYear, {
+          "years": getYears.value,
+          "headerLabel": getLabel.value,
+          "shortcutLabel": locale.value.thisYearText,
+          "onNext": (year) => changeYear(year),
+          "onPrevious": (year) => changeYear(year),
+          "onSelect": onSelectYear,
+          "getYearStatus": getYearStatus,
+          "onMouseEnter": (value) => emit("mouseEnter", value),
+          "onMouseLeave": () => emit("mouseLeave"),
+          "isShowShortcut": props.isShowShortcut
+        }, null);
+      }
+    };
+  }
+});
+var CalendarPanelRange = defineComponent({
+  name: "CalendarPanelRange",
+  props: calendarPanelRangeProps,
+  emits: ["update:modelValue"],
+  setup(props, {
+    emit
+  }) {
+    var _a;
+    const {
+      startDate,
+      endDate,
+      hoveredDate,
+      calendars,
+      setStartDate,
+      setEndDate,
+      setHoveredDate,
+      getDateRangeStatus,
+      getCurrentDates,
+      updateStartCalendar,
+      updateEndCalendar
+    } = useCalendarRange(props);
+    if ((_a = props.modelValue) == null ? void 0 : _a.length) {
+      updateStartCalendar(props.modelValue[0]);
+      updateEndCalendar(props.modelValue[1]);
+    }
+    function onSelectDate(date) {
+      if (props.type === "week" || props.type === "biweek") {
+        const gap = {
+          week: 6,
+          biweek: 13
+        };
+        const startDate2 = startOfWeek(date, getLocale().formatLocale.firstDayOfWeek);
+        const endDate2 = addDays(startDate2, gap[props.type]);
+        setStartDate(startDate2);
+        setEndDate(endDate2);
+        emit("update:modelValue", getCurrentDates.value);
+        return;
+      }
+      if (startDate.value && endDate.value) {
+        setStartDate(void 0);
+        setEndDate(void 0);
+        setStartDate(date);
+        return;
+      }
+      if (startDate.value && !endDate.value) {
+        setEndDate(date);
+        if (startDate.value && endDate.value) {
+          emit("update:modelValue", getCurrentDates.value);
+        }
+        return;
+      }
+      if (!startDate.value && !endDate.value) {
+        setStartDate(date);
+        if (startDate.value && endDate.value) {
+          emit("update:modelValue", getCurrentDates.value);
+        }
+        return;
+      }
+    }
+    __name(onSelectDate, "onSelectDate");
+    function getDateStatus(date) {
+      var _a2, _b;
+      let status = "default";
+      if (isToday(date))
+        status = "today";
+      const {
+        inRange,
+        hoverInRange
+      } = getDateRangeStatus(date);
+      if (inRange || hoverInRange) {
+        status = "range";
+      }
+      if (startDate.value && !endDate.value && isEqual(hoveredDate.value, date)) {
+        status = "selected";
+      }
+      if (isEqual(startDate.value, date)) {
+        status = "selected";
+      }
+      if (isEqual(endDate.value, date)) {
+        status = "selected";
+      }
+      if (props.type === "week") {
+        if ((_a2 = props.modelValue) == null ? void 0 : _a2.length) {
+          const startDate2 = startOfWeek(props.modelValue[0], getLocale().formatLocale.firstDayOfWeek);
+          const endDate2 = addDays(startDate2, 6);
+          if (isDateBetween(date, startDate2, endDate2)) {
+            status = "weekSelectedMiddle";
+            if (isEqual(startDate2, date))
+              status = "weekSelectedStart";
+            if (isEqual(endDate2, date))
+              status = "weekSelectedEnd";
+          }
+        }
+        if (hoveredDate.value) {
+          const startDate2 = startOfWeek(hoveredDate.value, getLocale().formatLocale.firstDayOfWeek);
+          const endDate2 = addDays(startDate2, 6);
+          if (isDateBetween(date, startDate2, endDate2)) {
+            status = "weekHoveredMiddle";
+            if (isEqual(startDate2, date))
+              status = "weekHoveredStart";
+            if (isEqual(endDate2, date))
+              status = "weekHoveredEnd";
+          }
+        }
+      }
+      if (props.type === "biweek") {
+        const getBiweekDates = /* @__PURE__ */ __name((date2) => {
+          const firstWeekStartDate = startOfWeek(date2, getLocale().formatLocale.firstDayOfWeek);
+          const firstWeekEndDate = addDays(firstWeekStartDate, 6);
+          const secondWeekStartDate = startOfWeek(addDays(firstWeekStartDate, 7), getLocale().formatLocale.firstDayOfWeek);
+          const secondWeekEndDate = addDays(secondWeekStartDate, 6);
+          return {
+            firstWeekStartDate,
+            firstWeekEndDate,
+            secondWeekStartDate,
+            secondWeekEndDate
+          };
+        }, "getBiweekDates");
+        if ((_b = props.modelValue) == null ? void 0 : _b.length) {
+          const {
+            firstWeekStartDate,
+            firstWeekEndDate,
+            secondWeekStartDate,
+            secondWeekEndDate
+          } = getBiweekDates(props.modelValue[0]);
+          if (isDateBetween(date, firstWeekStartDate, secondWeekEndDate)) {
+            status = "weekSelectedMiddle";
+            if (isEqual(firstWeekStartDate, date))
+              status = "weekSelectedStart";
+            if (isEqual(firstWeekEndDate, date))
+              status = "weekSelectedEnd";
+            if (isEqual(secondWeekStartDate, date))
+              status = "weekSelectedStart";
+            if (isEqual(secondWeekEndDate, date))
+              status = "weekSelectedEnd";
+          }
+        }
+        if (hoveredDate.value) {
+          const {
+            firstWeekStartDate,
+            firstWeekEndDate,
+            secondWeekStartDate,
+            secondWeekEndDate
+          } = getBiweekDates(hoveredDate.value);
+          if (isDateBetween(date, firstWeekStartDate, secondWeekEndDate)) {
+            status = "weekHoveredMiddle";
+            if (isEqual(firstWeekStartDate, date))
+              status = "weekHoveredStart";
+            if (isEqual(firstWeekEndDate, date))
+              status = "weekHoveredEnd";
+            if (isEqual(secondWeekStartDate, date))
+              status = "weekHoveredStart";
+            if (isEqual(secondWeekEndDate, date))
+              status = "weekHoveredEnd";
+          }
+        }
+      }
+      return status;
+    }
+    __name(getDateStatus, "getDateStatus");
+    function getMonthStatus(month, year) {
+      let status = "default";
+      const parseToDate = createDate(year, month);
+      const {
+        inRange,
+        hoverInRange
+      } = getDateRangeStatus(parseToDate);
+      if (inRange || hoverInRange) {
+        status = "range";
+      }
+      if (startDate.value && !endDate.value && isEqual(hoveredDate.value, parseToDate)) {
+        status = "selected";
+      }
+      if (isEqual(startDate.value, parseToDate)) {
+        status = "selected";
+      }
+      if (isEqual(endDate.value, parseToDate)) {
+        status = "selected";
+      }
+      return status;
+    }
+    __name(getMonthStatus, "getMonthStatus");
+    function getYearStatus(year) {
+      var _a2, _b, _c;
+      let status = "default";
+      const parseToDate = createDate(year);
+      const {
+        inRange,
+        hoverInRange
+      } = getDateRangeStatus(parseToDate);
+      if (inRange || hoverInRange) {
+        status = "range";
+      }
+      if (startDate.value && !endDate.value && ((_a2 = hoveredDate.value) == null ? void 0 : _a2.getFullYear()) === parseToDate.getFullYear()) {
+        status = "selected";
+      }
+      if (((_b = startDate.value) == null ? void 0 : _b.getFullYear()) === parseToDate.getFullYear()) {
+        status = "selected";
+      }
+      if (((_c = endDate.value) == null ? void 0 : _c.getFullYear()) === parseToDate.getFullYear()) {
+        status = "selected";
+      }
+      return status;
+    }
+    __name(getYearStatus, "getYearStatus");
+    return () => {
+      const isWeekAndBiweek = props.type === "week" || props.type === "biweek";
+      const classes = isWeekAndBiweek ? "" : calendarPanelRangeRecipe();
+      const calendarPanelAttrs = {
+        isRange: true,
+        type: props.type,
+        isHideNotThisMonthDate: props.type === "week" || props.type === "biweek" ? false : true,
+        isShowShortcut: false,
+        getDateStatus,
+        getMonthStatus,
+        getYearStatus,
+        "onUpdate:modelValue": (date) => onSelectDate(date),
+        onMouseEnter: (date) => setHoveredDate(date),
+        onMouseLeave: () => setHoveredDate(void 0)
+      };
+      const leftNode = _createVNode(CalendarPanel, _mergeProps({
+        "data-pixel-parts": "CalendarPanelLeft"
+      }, calendarPanelAttrs, {
+        "onUpdateCalendar": (value) => updateStartCalendar(value),
+        "calendar": calendars.value[0]
+      }), null);
+      const rightNode = _createVNode(CalendarPanel, _mergeProps({
+        "data-pixel-parts": "CalendarPanelRight"
+      }, calendarPanelAttrs, {
+        "onUpdateCalendar": (value) => updateEndCalendar(value),
+        "calendar": calendars.value[1]
+      }), null);
+      const weekAndBiweekNode = _createVNode(CalendarPanel, _mergeProps({
+        "data-pixel-parts": "CalendarPanel"
+      }, calendarPanelAttrs, {
+        "onUpdateCalendar": (value) => updateStartCalendar(value),
+        "calendar": props.modelValue[0],
+        "type": "date"
+      }), null);
+      return _createVNode("div", {
+        "class": classes
+      }, [isWeekAndBiweek ? weekAndBiweekNode : [leftNode, rightNode]]);
+    };
+  }
+});
+
+export {
+  CalendarPanel,
+  CalendarPanelRange
+};

package/dist/chunk-EQWT6VDG.mjs

@@ -0,0 +1,34 @@
+// src/components/parts/year.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { yearItemRecipe } from "@mekari/pixel3-styled-system/recipes";
+var YearItem = defineComponent({
+  name: "YearItem",
+  props: {
+    status: {
+      type: String
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      const classes = yearItemRecipe({
+        status: props.status
+      });
+      return _createVNode("button", {
+        "disabled": props.isDisabled,
+        "data-status": props.status,
+        "class": classes
+      }, [slots.default()]);
+    };
+  }
+});
+
+export {
+  YearItem
+};

package/dist/chunk-HJ4V3PM6.mjs

@@ -0,0 +1,125 @@
+import {
+  YearItem
+} from "./chunk-EQWT6VDG.mjs";
+import {
+  createDate
+} from "./chunk-26Y3AVJW.mjs";
+import {
+  chunk
+} from "./chunk-NIUQXHGQ.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/components/calendar/table-year.tsx
+import { createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
+import { defineComponent, computed } from "vue";
+import { MpButton } from "@mekari/pixel3-button";
+import { tableYearSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
+var TableYear = defineComponent({
+  name: "TableYear",
+  props: {
+    years: {
+      type: Array,
+      default: () => []
+    },
+    headerLabel: {
+      type: String,
+      default: ""
+    },
+    shortcutLabel: {
+      type: String,
+      default: ""
+    },
+    getYearStatus: {
+      type: Function,
+      default: () => {
+      }
+    },
+    isShowShortcut: {
+      type: Boolean
+    }
+  },
+  emits: ["next", "previous", "select", "mouseEnter", "mouseLeave"],
+  setup(props, {
+    emit
+  }) {
+    const {
+      headerRoot,
+      headerLabel,
+      yearItemRoot,
+      yearItemWrapper,
+      shortcutLabelWrapper
+    } = tableYearSlotRecipe();
+    const getYears = computed(() => {
+      return chunk(props.years, 4);
+    });
+    function onNextButton() {
+      const lastYear = props.years[props.years.length - 1];
+      emit("next", lastYear + 1);
+    }
+    __name(onNextButton, "onNextButton");
+    function onPreviousButton() {
+      const firstYear = props.years[0];
+      emit("previous", firstYear - 1);
+    }
+    __name(onPreviousButton, "onPreviousButton");
+    function onSelectYear(year) {
+      emit("select", year);
+    }
+    __name(onSelectYear, "onSelectYear");
+    function getMonthAttrs(year) {
+      const {
+        status,
+        isDisabled
+      } = props.getYearStatus(year);
+      return {
+        status: isDisabled ? "disabled" : status,
+        isDisabled,
+        onClick: () => onSelectYear(year),
+        onMouseenter: () => {
+          emit("mouseEnter", createDate(year));
+        },
+        onMouseleave: () => {
+          emit("mouseLeave");
+        }
+      };
+    }
+    __name(getMonthAttrs, "getMonthAttrs");
+    return () => {
+      return _createVNode("div", null, [_createVNode("div", {
+        "data-pixel-parts": "Header",
+        "class": headerRoot
+      }, [_createVNode(MpButton, {
+        "left-icon": "chevrons-left",
+        "variant": "ghost",
+        "size": "sm",
+        "onClick": onPreviousButton
+      }, null), _createVNode("button", {
+        "class": headerLabel
+      }, [props.headerLabel]), _createVNode(MpButton, {
+        "right-icon": "chevrons-right",
+        "variant": "ghost",
+        "size": "sm",
+        "onClick": onNextButton
+      }, null)]), _createVNode("div", {
+        "class": yearItemRoot
+      }, [getYears.value.map((data) => _createVNode("div", {
+        "class": yearItemWrapper
+      }, [data.map((year) => _createVNode(YearItem, getMonthAttrs(year), {
+        default: () => [_createTextVNode(" "), year, _createTextVNode(" ")]
+      }))]))]), props.isShowShortcut && _createVNode("div", {
+        "class": shortcutLabelWrapper
+      }, [_createVNode(MpButton, {
+        "variant": "ghost",
+        "onClick": () => onSelectYear((/* @__PURE__ */ new Date()).getFullYear())
+      }, {
+        default: () => [props.shortcutLabel]
+      })])]);
+    };
+  }
+});
+
+export {
+  TableYear
+};

package/dist/chunk-J5BK7Z2U.mjs

@@ -0,0 +1,46 @@
+// src/components/parts/date.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { dateItemRecipe, pinbarSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
+var Date = defineComponent({
+  name: "Date",
+  props: {
+    status: {
+      type: String
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
+    },
+    isShowPinbar: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      const dateItemClasses = dateItemRecipe({
+        status: props.status
+      });
+      const {
+        root,
+        pinbar
+      } = pinbarSlotRecipe();
+      return _createVNode("button", {
+        "disabled": props.isDisabled,
+        "data-status": props.status,
+        "class": dateItemClasses
+      }, [slots.default(), props.isShowPinbar && _createVNode("div", {
+        "class": root
+      }, [_createVNode("div", {
+        "class": pinbar
+      }, null)])]);
+    };
+  }
+});
+
+export {
+  Date
+};