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

package/dist/chunk-JZ2KFYWF.mjs

@@ -0,0 +1,127 @@
+import {
+  getNextMonth,
+  startOfMonth
+} from "./chunk-26Y3AVJW.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/composables/useCalendarRange.ts
+import { ref, computed } from "vue";
+function useCalendarRange(props) {
+  const leftCalendar = startOfMonth(/* @__PURE__ */ new Date());
+  const rightCalendar = startOfMonth(getNextMonth(/* @__PURE__ */ new Date()));
+  const startDate = ref(props.modelValue[0]);
+  const endDate = ref(props.modelValue[1]);
+  const hoveredDate = ref();
+  const calendars = ref([leftCalendar, rightCalendar]);
+  const getCurrentDates = computed(() => {
+    if (startDate.value && !endDate.value)
+      return [startDate.value];
+    if (startDate.value && endDate.value)
+      return [startDate.value, endDate.value];
+    return [];
+  });
+  const calendarMinDiff = computed(() => {
+    const map = {
+      date: 1,
+      // type:date  min 1 month
+      month: 1 * 12,
+      // type:month min 1 year
+      year: 10 * 12
+      // type:year  min 10 year
+    };
+    return map[props.type] || map.date;
+  });
+  const calendarMaxDiff = computed(() => Infinity);
+  function setStartDate(date) {
+    startDate.value = date;
+  }
+  __name(setStartDate, "setStartDate");
+  function setEndDate(date) {
+    endDate.value = date;
+  }
+  __name(setEndDate, "setEndDate");
+  function setHoveredDate(date) {
+    hoveredDate.value = date;
+  }
+  __name(setHoveredDate, "setHoveredDate");
+  function getDateRangeStatus(cellDate) {
+    const status = {
+      inRange: false,
+      hoverInRange: false,
+      activeDragRange: false
+    };
+    const isInRange = /* @__PURE__ */ __name((data, range, fn = (v) => v.getTime()) => {
+      const value = fn(data);
+      let [min, max] = range.map(fn);
+      if (min > max) {
+        [min, max] = [max, min];
+      }
+      return value > min && value < max;
+    }, "isInRange");
+    if (getCurrentDates.value.length === 2 && isInRange(cellDate, getCurrentDates.value)) {
+      status.inRange = true;
+    }
+    if (getCurrentDates.value.length === 1 && hoveredDate.value && isInRange(cellDate, [getCurrentDates.value[0], hoveredDate.value])) {
+      status.hoverInRange = true;
+    }
+    if (getCurrentDates.value[0]) {
+      status.activeDragRange = true;
+    }
+    return status;
+  }
+  __name(getDateRangeStatus, "getDateRangeStatus");
+  function updateStartCalendar(value) {
+    updateCalendars([value, calendars.value[1]], 1);
+  }
+  __name(updateStartCalendar, "updateStartCalendar");
+  function updateEndCalendar(value) {
+    updateCalendars([calendars.value[0], value], 0);
+  }
+  __name(updateEndCalendar, "updateEndCalendar");
+  function updateCalendars(value, adjustIndex = 1) {
+    const gap = getCalendarGap(value);
+    if (gap) {
+      const calendar = new Date(value[adjustIndex]);
+      calendar.setMonth(calendar.getMonth() + (adjustIndex === 0 ? -gap : gap));
+      value[adjustIndex] = calendar;
+    }
+    calendars.value = value;
+  }
+  __name(updateCalendars, "updateCalendars");
+  function getCalendarGap(calendars2) {
+    const [calendarLeft, calendarRight] = calendars2;
+    const yearDiff = calendarRight.getFullYear() - calendarLeft.getFullYear();
+    const monthDiff = calendarRight.getMonth() - calendarLeft.getMonth();
+    const diff = yearDiff * 12 + monthDiff;
+    const min = calendarMinDiff.value;
+    const max = calendarMaxDiff.value;
+    if (diff < min) {
+      return min - diff;
+    }
+    if (diff > max) {
+      return max - diff;
+    }
+    return 0;
+  }
+  __name(getCalendarGap, "getCalendarGap");
+  return {
+    startDate,
+    endDate,
+    hoveredDate,
+    calendars,
+    getCurrentDates,
+    setStartDate,
+    setEndDate,
+    setHoveredDate,
+    getDateRangeStatus,
+    updateStartCalendar,
+    updateEndCalendar
+  };
+}
+__name(useCalendarRange, "useCalendarRange");
+
+export {
+  useCalendarRange
+};

package/dist/chunk-LVCRFE25.mjs

@@ -0,0 +1,153 @@
+import {
+  Day
+} from "./chunk-AGAA7XTC.mjs";
+import {
+  Date as Date2
+} from "./chunk-J5BK7Z2U.mjs";
+import {
+  chunk
+} from "./chunk-NIUQXHGQ.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/components/calendar/table-date.tsx
+import { createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
+import { defineComponent, computed } from "vue";
+import { MpButton } from "@mekari/pixel3-button";
+import { tableDateSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
+var TableDate = defineComponent({
+  name: "TableDate",
+  props: {
+    days: {
+      type: Array,
+      default: () => []
+    },
+    dates: {
+      type: Array,
+      default: () => []
+    },
+    headerLabel: {
+      type: String,
+      default: ""
+    },
+    shortcutLabel: {
+      type: String,
+      default: ""
+    },
+    getDateStatus: {
+      type: Function,
+      default: () => {
+      }
+    },
+    isShowShortcut: {
+      type: Boolean
+    },
+    isRange: {
+      type: Boolean
+    },
+    isHideNotThisMonthDate: {
+      type: Boolean
+    }
+  },
+  emits: ["next", "previous", "changePanel", "select", "clickHeaderLabel", "mouseEnter", "mouseLeave"],
+  setup(props, {
+    emit
+  }) {
+    const {
+      headerRoot,
+      headerLabel,
+      dayWrapper,
+      dateItemRoot,
+      dateItemWrapper,
+      shortcutLabelWrapper
+    } = tableDateSlotRecipe();
+    const getDates = computed(() => {
+      return chunk(props.dates, 7);
+    });
+    function onNextButton() {
+      emit("next");
+    }
+    __name(onNextButton, "onNextButton");
+    function onPreviousButton() {
+      emit("previous");
+    }
+    __name(onPreviousButton, "onPreviousButton");
+    function onSelectDate(date) {
+      emit("select", date);
+    }
+    __name(onSelectDate, "onSelectDate");
+    function onSelectToday() {
+      const today = /* @__PURE__ */ new Date();
+      onSelectDate(today);
+    }
+    __name(onSelectToday, "onSelectToday");
+    function getDateAttrs(date) {
+      const {
+        status,
+        isDisabled,
+        isShowPinbar
+      } = props.getDateStatus(date);
+      return {
+        status: isDisabled ? "disabled" : status,
+        isDisabled,
+        isShowPinbar,
+        onClick: () => onSelectDate(date),
+        onMouseenter: () => {
+          emit("mouseEnter", date);
+        },
+        onMouseleave: () => {
+          emit("mouseLeave");
+        },
+        style: {
+          visibility: props.isHideNotThisMonthDate && status === "notThisMonth" ? "hidden" : ""
+        }
+      };
+    }
+    __name(getDateAttrs, "getDateAttrs");
+    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,
+        "onClick": () => emit("clickHeaderLabel")
+      }, [props.headerLabel]), _createVNode(MpButton, {
+        "right-icon": "chevrons-right",
+        "variant": "ghost",
+        "size": "sm",
+        "onClick": onNextButton
+      }, null)]), _createVNode("div", {
+        "data-pixel-parts": "Content",
+        "class": dayWrapper
+      }, [props.days.map((day) => _createVNode(Day, null, {
+        default: () => [_createTextVNode(" "), day, _createTextVNode(" ")]
+      }))]), _createVNode("div", {
+        "data-pixel-parts": "Content",
+        "class": dateItemRoot
+      }, [getDates.value.map((dates, index) => _createVNode("div", {
+        "class": dateItemWrapper,
+        "data-row-index": index
+      }, [dates.map((date) => _createVNode(Date2, getDateAttrs(date), {
+        default: () => [_createTextVNode(" "), date.getDate(), _createTextVNode(" ")]
+      }))]))]), props.isShowShortcut && _createVNode("div", {
+        "data-pixel-parts": "Shortcut",
+        "class": shortcutLabelWrapper
+      }, [_createVNode(MpButton, {
+        "variant": "ghost",
+        "onClick": onSelectToday
+      }, {
+        default: () => [props.shortcutLabel]
+      })])]);
+    };
+  }
+});
+
+export {
+  TableDate
+};

package/dist/chunk-NIUQXHGQ.mjs

@@ -0,0 +1,56 @@
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/utils/base.ts
+function chunk(arr, size) {
+  if (!Array.isArray(arr)) {
+    return [];
+  }
+  const result = [];
+  const len = arr.length;
+  let i = 0;
+  size = size || len;
+  while (i < len) {
+    result.push(arr.slice(i, i += size));
+  }
+  return result;
+}
+__name(chunk, "chunk");
+var isObject = /* @__PURE__ */ __name((value) => {
+  return !!value && value.constructor === Object;
+}, "isObject");
+var pick = /* @__PURE__ */ __name((obj, keys) => {
+  if (!obj)
+    return {};
+  return keys.reduce((acc, key) => {
+    if (Object.prototype.hasOwnProperty.call(obj, key))
+      acc[key] = obj[key];
+    return acc;
+  }, {});
+}, "pick");
+var assign = /* @__PURE__ */ __name((initial, override) => {
+  var _a;
+  if (!initial || !override)
+    return (_a = initial != null ? initial : override) != null ? _a : {};
+  return Object.entries({
+    ...initial,
+    ...override
+  }).reduce((acc, [key, value]) => {
+    return {
+      ...acc,
+      [key]: (() => {
+        if (isObject(initial[key]))
+          return assign(initial[key], value);
+        return value;
+      })()
+    };
+  }, {});
+}, "assign");
+
+export {
+  chunk,
+  isObject,
+  pick,
+  assign
+};

package/dist/chunk-NVULZQVI.mjs

@@ -0,0 +1,119 @@
+import {
+  getCalendar,
+  getNextMonth,
+  getPreviousMonth,
+  isValidDate
+} from "./chunk-26Y3AVJW.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/composables/useCalendar.ts
+import { computed, ref } from "vue";
+import { setYear, addYears, setMonth } from "date-fns";
+function useCalendar(date, locale) {
+  const currentDate = ref(isValidDate(date) ? date : /* @__PURE__ */ new Date());
+  const currentPanel = ref("date");
+  const nextMonth = /* @__PURE__ */ __name(() => {
+    currentDate.value = getNextMonth(currentDate.value);
+  }, "nextMonth");
+  const previousMonth = /* @__PURE__ */ __name(() => {
+    currentDate.value = getPreviousMonth(currentDate.value);
+  }, "previousMonth");
+  const nextYear = /* @__PURE__ */ __name(() => {
+    currentDate.value = addYears(currentDate.value, 1);
+  }, "nextYear");
+  const previousYear = /* @__PURE__ */ __name(() => {
+    currentDate.value = addYears(currentDate.value, -1);
+  }, "previousYear");
+  const changeYear = /* @__PURE__ */ __name((year) => {
+    currentDate.value = setYear(currentDate.value, year);
+  }, "changeYear");
+  const changeMonth = /* @__PURE__ */ __name((month) => {
+    currentDate.value = setMonth(currentDate.value, month);
+  }, "changeMonth");
+  const getSplitDates = computed(() => {
+    return {
+      day: currentDate.value.getDay(),
+      month: currentDate.value.getMonth(),
+      year: currentDate.value.getFullYear(),
+      monthLabel: locale.value.months[currentDate.value.getMonth()]
+    };
+  });
+  const getDates = computed(() => {
+    const {
+      year,
+      month
+    } = getSplitDates.value;
+    const arr = getCalendar({
+      firstDayOfWeek: locale.value.formatLocale.firstDayOfWeek || 0,
+      year,
+      month
+    });
+    return arr;
+  });
+  const getMonths = computed(() => {
+    const monthsLocale = locale.value.formatLocale.monthsShort || locale.value.months;
+    const months = monthsLocale.map((text, month) => {
+      return {
+        text,
+        month
+      };
+    });
+    return months;
+  });
+  const getYears = computed(() => {
+    const {
+      year
+    } = getSplitDates.value;
+    const firstYear = Math.floor(year / 10) * 10;
+    const years = [];
+    for (let i = 0; i < 10; i++) {
+      years.push(firstYear + i);
+    }
+    return years;
+  });
+  const getLabel = computed(() => {
+    const {
+      year,
+      monthLabel
+    } = getSplitDates.value;
+    if (currentPanel.value === "date")
+      return `${monthLabel} ${year}`;
+    if (currentPanel.value === "month")
+      return `${year}`;
+    if (currentPanel.value === "year")
+      return `${getYears.value[0]} - ${getYears.value[9]}`;
+    return "";
+  });
+  function changePanel(value) {
+    currentPanel.value = value;
+  }
+  __name(changePanel, "changePanel");
+  function setPanelDate(date2) {
+    currentDate.value = date2;
+  }
+  __name(setPanelDate, "setPanelDate");
+  return {
+    currentDate,
+    currentPanel,
+    nextMonth,
+    previousMonth,
+    nextYear,
+    previousYear,
+    changeYear,
+    changeMonth,
+    getDates,
+    getMonths,
+    getYears,
+    getLabel,
+    getSplitDates,
+    changePanel,
+    setPanelDate
+  };
+}
+__name(useCalendar, "useCalendar");
+
+export {
+  useCalendar
+};

package/dist/chunk-OY5PVQH5.mjs

@@ -0,0 +1,31 @@
+import {
+  assign
+} from "./chunk-NIUQXHGQ.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/modules/date-picker.locales.ts
+import en from "date-format-parse/lib/locale/en";
+var locales = {
+  formatLocale: en,
+  days: en.weekdaysMin,
+  months: en.monthsShort,
+  yearFormat: "YYYY",
+  monthFormat: "MMM",
+  monthBeforeYear: true,
+  todayText: "Today",
+  thisMonthText: "This Month",
+  thisYearText: "This Year"
+};
+function getLocale(config) {
+  if (!config) {
+    return locales;
+  }
+  return assign(locales, config);
+}
+__name(getLocale, "getLocale");
+
+export {
+  getLocale
+};

package/dist/chunk-Q3Z5ZITX.mjs

@@ -0,0 +1,155 @@
+// src/modules/date-picker.props.ts
+var calendarPanelProps = {
+  modelValue: {
+    type: Date
+  },
+  defaultValue: {
+    type: Date
+  },
+  type: {
+    type: String,
+    default: "date"
+  },
+  calendar: {
+    type: Date
+  },
+  isRange: {
+    type: Boolean,
+    default: false
+  },
+  isShowShortcut: {
+    type: Boolean,
+    default: true
+  },
+  disabledDate: {
+    type: Function,
+    default: () => {
+    }
+  },
+  disabledMonth: {
+    type: Function,
+    default: () => {
+    }
+  },
+  disabledYear: {
+    type: Function,
+    default: () => {
+    }
+  },
+  getDateStatus: {
+    type: Function,
+    default: void 0
+  },
+  getMonthStatus: {
+    type: Function,
+    default: void 0
+  },
+  getYearStatus: {
+    type: Function,
+    default: void 0
+  },
+  isHideNotThisMonthDate: {
+    type: Boolean
+  }
+};
+var calendarPanelRangeProps = {
+  ...calendarPanelProps,
+  modelValue: {
+    type: Array
+  }
+};
+var datePickerProps = {
+  id: {
+    type: String
+  },
+  modelValue: {
+    type: [String, Number, Date, Array]
+  },
+  type: calendarPanelProps.type,
+  valueType: {
+    type: String,
+    default: "date"
+  },
+  format: {
+    type: String
+  },
+  rangeSeparator: {
+    type: String,
+    default: " - "
+  },
+  placeholder: {
+    type: String,
+    default: ""
+  },
+  errorMessage: {
+    type: String,
+    default: "Format tanggal/waktu salah"
+  },
+  disabledMessage: {
+    type: String,
+    default: ""
+  },
+  lang: {
+    type: Object,
+    default: () => {
+    }
+  },
+  inputAttr: {
+    type: Object,
+    default: () => ({})
+  },
+  contentAttr: {
+    type: Object,
+    default: () => ({})
+  },
+  isRange: calendarPanelProps.isRange,
+  isReadOnly: {
+    type: Boolean,
+    default: false
+  },
+  isDisabled: {
+    type: Boolean,
+    default: false
+  },
+  isClearable: {
+    type: Boolean,
+    default: true
+  },
+  isInvalid: {
+    type: Boolean,
+    default: false
+  },
+  usePortal: {
+    type: Boolean,
+    default: false
+  },
+  isKeepAlive: {
+    type: Boolean,
+    default: false
+  },
+  isInline: {
+    type: Boolean,
+    default: false
+  },
+  isNotClickable: {
+    type: Boolean,
+    default: false
+  },
+  isDisableHeader: {
+    type: Boolean,
+    default: false
+  },
+  isShowShortcut: {
+    type: Boolean,
+    default: false
+  },
+  disabledDate: calendarPanelProps.disabledDate,
+  disabledMonth: calendarPanelProps.disabledMonth,
+  disabledYear: calendarPanelProps.disabledYear
+};
+
+export {
+  calendarPanelProps,
+  calendarPanelRangeProps,
+  datePickerProps
+};

package/dist/chunk-QZ7VFGWC.mjs

@@ -0,0 +1,6 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+export {
+  __name
+};