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

package/dist/calendar-panel.mjs

@@ -0,0 +1,25 @@
+import {
+  CalendarPanel,
+  CalendarPanelRange
+} from "./chunk-EJCSF5VR.mjs";
+import "./chunk-Q3Z5ZITX.mjs";
+import "./chunk-V6D6W7RO.mjs";
+import "./chunk-LVCRFE25.mjs";
+import "./chunk-5PISTT2K.mjs";
+import "./chunk-HJ4V3PM6.mjs";
+import "./chunk-FTR7OMCT.mjs";
+import "./chunk-AGAA7XTC.mjs";
+import "./chunk-3VROFGJH.mjs";
+import "./chunk-EQWT6VDG.mjs";
+import "./chunk-J5BK7Z2U.mjs";
+import "./chunk-NVULZQVI.mjs";
+import "./chunk-JZ2KFYWF.mjs";
+import "./chunk-VACMCDOZ.mjs";
+import "./chunk-26Y3AVJW.mjs";
+import "./chunk-OY5PVQH5.mjs";
+import "./chunk-NIUQXHGQ.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  CalendarPanel,
+  CalendarPanelRange
+};

package/dist/chunk-26Y3AVJW.mjs

@@ -0,0 +1,115 @@
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/utils/date.ts
+import { addMonths } from "date-fns";
+function createDate(y, M = 0, d = 1, h = 0, m = 0, s = 0, ms = 0) {
+  const date = new Date(y, M, d, h, m, s, ms);
+  if (y < 100 && y >= 0) {
+    date.setFullYear(y);
+  }
+  return date;
+}
+__name(createDate, "createDate");
+function isValidDate(date) {
+  return date instanceof Date && !isNaN(date);
+}
+__name(isValidDate, "isValidDate");
+function isValidRangeDate(date) {
+  return Array.isArray(date) && date.length === 2 && date.every(isValidDate) && date[0] <= date[1];
+}
+__name(isValidRangeDate, "isValidRangeDate");
+function startOfYear(value) {
+  const date = new Date(value);
+  date.setMonth(0, 1);
+  date.setHours(0, 0, 0, 0);
+  return date;
+}
+__name(startOfYear, "startOfYear");
+function startOfMonth(value) {
+  const date = new Date(value);
+  date.setDate(1);
+  date.setHours(0, 0, 0, 0);
+  return date;
+}
+__name(startOfMonth, "startOfMonth");
+function startOfWeek(value, firstDayOfWeek = 0) {
+  if (!(firstDayOfWeek >= 0 && firstDayOfWeek <= 6)) {
+    throw new RangeError("weekStartsOn must be between 0 and 6");
+  }
+  const date = new Date(value);
+  const day = date.getDay();
+  const diff = (day + 7 - firstDayOfWeek) % 7;
+  date.setDate(date.getDate() - diff);
+  date.setHours(0, 0, 0, 0);
+  return date;
+}
+__name(startOfWeek, "startOfWeek");
+function startOfDay(value) {
+  const date = new Date(value);
+  date.setHours(0, 0, 0, 0);
+  return date;
+}
+__name(startOfDay, "startOfDay");
+function getCalendar({
+  firstDayOfWeek,
+  year,
+  month
+}) {
+  const arr = [];
+  const calendar = createDate(year, month, 0);
+  const lastDayInLastMonth = calendar.getDate();
+  const firstDayInLastMonth = lastDayInLastMonth - (calendar.getDay() + 7 - firstDayOfWeek) % 7;
+  for (let i = firstDayInLastMonth; i <= lastDayInLastMonth; i++) {
+    arr.push(createDate(year, month, i - lastDayInLastMonth));
+  }
+  calendar.setMonth(month + 1, 0);
+  const lastDayInCurrentMonth = calendar.getDate();
+  for (let i = 1; i <= lastDayInCurrentMonth; i++) {
+    arr.push(createDate(year, month, i));
+  }
+  const lastMonthLength = lastDayInLastMonth - firstDayInLastMonth + 1;
+  const nextMonthLength = 6 * 7 - lastMonthLength - lastDayInCurrentMonth;
+  for (let i = 1; i <= nextMonthLength; i++) {
+    arr.push(createDate(year, month, lastDayInCurrentMonth + i));
+  }
+  return arr;
+}
+__name(getCalendar, "getCalendar");
+function getNextMonth(date) {
+  return addMonths(date, 1);
+}
+__name(getNextMonth, "getNextMonth");
+function getPreviousMonth(date) {
+  return addMonths(date, -1);
+}
+__name(getPreviousMonth, "getPreviousMonth");
+function addDays(value, days) {
+  const date = new Date(value);
+  date.setDate(date.getDate() + days);
+  return date;
+}
+__name(addDays, "addDays");
+function isDateBetween(date, min, max) {
+  const _date = new Date(date);
+  const _min = new Date(min);
+  const _max = new Date(max);
+  return _date.getTime() >= _min.getTime() && _date.getTime() <= _max.getTime();
+}
+__name(isDateBetween, "isDateBetween");
+
+export {
+  createDate,
+  isValidDate,
+  isValidRangeDate,
+  startOfYear,
+  startOfMonth,
+  startOfWeek,
+  startOfDay,
+  getCalendar,
+  getNextMonth,
+  getPreviousMonth,
+  addDays,
+  isDateBetween
+};

package/dist/chunk-3VROFGJH.mjs

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

package/dist/chunk-3YYRUEIF.mjs

@@ -0,0 +1,257 @@
+import {
+  isValidDate,
+  isValidRangeDate
+} from "./chunk-26Y3AVJW.mjs";
+import {
+  getLocale
+} from "./chunk-OY5PVQH5.mjs";
+import {
+  isObject
+} from "./chunk-NIUQXHGQ.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/modules/date-picker.hooks.ts
+import { ref, computed, nextTick } from "vue";
+import { getUniqueId } from "@mekari/pixel3-utils";
+import { parse, format } from "date-format-parse";
+function useDatePicker(props, emit) {
+  const getId = props.id || getUniqueId("", "datepicker").value;
+  const currentLabel = ref("");
+  const isOutside = ref(true);
+  const isPopoverOpen = ref(false);
+  const isInnerInvalid = ref(false);
+  const userInput = ref(null);
+  const innerValueDate = ref();
+  const isUseRange = computed(() => {
+    if (props.isRange || props.type === "biweek" || props.type === "week")
+      return true;
+    return false;
+  });
+  const innerFormat = computed(() => {
+    const format2 = {
+      date: "DD-MM-YYYY",
+      datetime: "DD-MM-YYYY HH:mm:ss",
+      year: "YYYY",
+      month: "YYYY-MM",
+      time: "HH:mm:ss",
+      week: "DD-MM-YYYY",
+      biweek: "DD-MM-YYYY"
+    };
+    return props.format || format2[props.type] || format2.date;
+  });
+  const innerValue = computed(() => {
+    if (isUseRange.value) {
+      if (isValidRangeDate(props.modelValue)) {
+        const startDate = valueToDate(props.modelValue[0]);
+        const endDate = valueToDate(props.modelValue[1]);
+        return [startDate, endDate];
+      }
+      return [];
+    }
+    return valueToDate(props.modelValue);
+  });
+  const text = computed(() => {
+    if (userInput.value !== null)
+      return userInput.value;
+    if (!innerValue.value)
+      return "";
+    if (isUseRange.value) {
+      if (!isValidRangeDate(innerValue.value))
+        return "";
+    } else {
+      if (!isValidDate(innerValue.value))
+        return "";
+    }
+    if (Array.isArray(innerValue.value)) {
+      return innerValue.value.map((v) => formatDate(v)).join(props.rangeSeparator);
+    }
+    return formatDate(innerValue.value);
+  });
+  const locale = computed(() => {
+    if (isObject(props.lang)) {
+      return getLocale(props.lang);
+    }
+    return getLocale();
+  });
+  function onOpenPopover() {
+    if (props.isReadOnly)
+      return;
+    isPopoverOpen.value = true;
+  }
+  __name(onOpenPopover, "onOpenPopover");
+  function onClosePopover() {
+    isPopoverOpen.value = false;
+  }
+  __name(onClosePopover, "onClosePopover");
+  function onBlur() {
+    onClosePopover();
+    const inputEl = document.getElementById(`${getId}-control`);
+    inputEl == null ? void 0 : inputEl.blur();
+  }
+  __name(onBlur, "onBlur");
+  function handleForceFocusToInput() {
+    const inputEl = document.getElementById(`${getId}-control`);
+    inputEl == null ? void 0 : inputEl.focus();
+  }
+  __name(handleForceFocusToInput, "handleForceFocusToInput");
+  function onClear() {
+    isOutside.value = true;
+    userInput.value = null;
+    emit("update:modelValue", "");
+    onBlur();
+  }
+  __name(onClear, "onClear");
+  function onInputChange(e) {
+    var _a;
+    if (e) {
+      const target = e.target;
+      userInput.value = typeof e === "string" ? e : target.value;
+      if (userInput.value === null)
+        return;
+      const text2 = ((_a = userInput.value) == null ? void 0 : _a.trim()) || "";
+      if (text2 === "") {
+        onClear();
+        isInnerInvalid.value = false;
+        return;
+      }
+      let date;
+      if (isUseRange.value) {
+        let arr = text2.split(props.rangeSeparator);
+        if (arr.length !== 2) {
+          arr = text2.split(props.rangeSeparator.trim());
+        }
+        date = arr.map((v) => parseDate(v.trim()));
+      } else {
+        date = parseDate(text2);
+      }
+      if (isValidValueAndNotDisabled(date)) {
+        innerValueDate.value = date;
+        nextTick(() => {
+          isOutside.value = true;
+          isInnerInvalid.value = false;
+          onBlur();
+        });
+      } else {
+        isInnerInvalid.value = true;
+        emit("error", text2);
+      }
+    }
+  }
+  __name(onInputChange, "onInputChange");
+  function onEmitModelValue(value) {
+    userInput.value = null;
+    innerValueDate.value = value;
+    if (isUseRange.value) {
+      const dates = value;
+      const startDate = dateToValue(new Date(dates[0]));
+      const endDate = dateToValue(new Date(dates[1]));
+      emit("update:modelValue", [startDate, endDate]);
+    } else {
+      emit("update:modelValue", dateToValue(new Date(value)));
+    }
+    nextTick(() => {
+      isOutside.value = true;
+      onBlur();
+    });
+  }
+  __name(onEmitModelValue, "onEmitModelValue");
+  function parseDate(value) {
+    const backupDate = /* @__PURE__ */ new Date();
+    return parse(value, innerFormat.value, {
+      locale: locale.value.formatLocale,
+      backupDate
+    });
+  }
+  __name(parseDate, "parseDate");
+  function formatDate(date) {
+    return format(date, innerFormat.value, {
+      locale: locale.value.formatLocale
+    });
+  }
+  __name(formatDate, "formatDate");
+  function valueToDate(value) {
+    switch (props.valueType) {
+      case "date":
+        return value instanceof Date ? new Date(value.getTime()) : /* @__PURE__ */ new Date(NaN);
+      case "timestamp":
+        return typeof value === "number" ? new Date(value) : /* @__PURE__ */ new Date(NaN);
+      case "string":
+        return typeof value === "string" ? parseDate(value) : /* @__PURE__ */ new Date(NaN);
+      default:
+        return typeof value === "string" ? parseDate(value) : /* @__PURE__ */ new Date(NaN);
+    }
+  }
+  __name(valueToDate, "valueToDate");
+  function dateToValue(date) {
+    if (!isValidDate(date))
+      return null;
+    switch (props.valueType) {
+      case "date":
+        return date;
+      case "timestamp":
+        return date.getTime();
+      case "string":
+        return formatDate(date);
+      default:
+        return formatDate(date);
+    }
+  }
+  __name(dateToValue, "dateToValue");
+  function isValidValue(value) {
+    if (isUseRange.value)
+      return isValidRangeDate(value);
+    return isValidDate(value);
+  }
+  __name(isValidValue, "isValidValue");
+  function isValidValueAndNotDisabled(value) {
+    if (!isValidValue(value))
+      return false;
+    const disabledDate = typeof props.disabledDate === "function" ? props.disabledDate : () => false;
+    if (!Array.isArray(value)) {
+      value = [value];
+    }
+    return value.every((v) => !disabledDate(v));
+  }
+  __name(isValidValueAndNotDisabled, "isValidValueAndNotDisabled");
+  const rootAttrs = {
+    style: {
+      width: "100%",
+      position: "relative"
+    },
+    onMouseenter: () => {
+      isOutside.value = false;
+    },
+    onMouseleave: () => {
+      isOutside.value = true;
+    }
+  };
+  return {
+    rootAttrs,
+    isOutside,
+    isPopoverOpen,
+    currentLabel,
+    userInput,
+    innerFormat,
+    innerValueDate,
+    innerValue,
+    isUseRange,
+    onOpenPopover,
+    onClosePopover,
+    onClear,
+    onInputChange,
+    getId,
+    onBlur,
+    handleForceFocusToInput,
+    text,
+    locale,
+    isInnerInvalid,
+    onEmitModelValue
+  };
+}
+__name(useDatePicker, "useDatePicker");
+
+export {
+  useDatePicker
+};

package/dist/chunk-5PISTT2K.mjs

@@ -0,0 +1,131 @@
+import {
+  Month
+} from "./chunk-3VROFGJH.mjs";
+import {
+  createDate
+} from "./chunk-26Y3AVJW.mjs";
+import {
+  chunk
+} from "./chunk-NIUQXHGQ.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/components/calendar/table-month.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent, computed } from "vue";
+import { MpButton } from "@mekari/pixel3-button";
+import { tableMonthSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
+var TableMonth = defineComponent({
+  name: "TableMonth",
+  props: {
+    calendar: {
+      type: Date,
+      default: () => /* @__PURE__ */ new Date()
+    },
+    months: {
+      type: Array,
+      default: () => []
+    },
+    headerLabel: {
+      type: String,
+      default: ""
+    },
+    shortcutLabel: {
+      type: String,
+      default: ""
+    },
+    getMonthStatus: {
+      type: Function,
+      default: () => {
+      }
+    },
+    isShowShortcut: {
+      type: Boolean
+    }
+  },
+  emits: ["next", "previous", "select", "clickHeaderLabel", "mouseEnter", "mouseLeave"],
+  setup(props, {
+    emit
+  }) {
+    const {
+      headerRoot,
+      headerLabel,
+      monthItemRoot,
+      monthItemWrapper,
+      shortcutLabelWrapper
+    } = tableMonthSlotRecipe();
+    const getMonths = computed(() => {
+      return chunk(props.months, 3);
+    });
+    const getCalendarYear = computed(() => props.calendar.getFullYear());
+    function onNextButton() {
+      emit("next");
+    }
+    __name(onNextButton, "onNextButton");
+    function onPreviousButton() {
+      emit("previous", "previousMonth");
+    }
+    __name(onPreviousButton, "onPreviousButton");
+    function onSelectMonth(month, year) {
+      emit("select", month, year);
+    }
+    __name(onSelectMonth, "onSelectMonth");
+    function getMonthAttrs(month) {
+      const {
+        status,
+        isDisabled
+      } = props.getMonthStatus(month, getCalendarYear.value);
+      return {
+        status: isDisabled ? "disabled" : status,
+        isDisabled,
+        onClick: () => onSelectMonth(month, getCalendarYear.value),
+        onMouseenter: () => {
+          emit("mouseEnter", createDate(getCalendarYear.value, month));
+        },
+        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,
+        "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": monthItemRoot
+      }, [getMonths.value.map((data) => _createVNode("div", {
+        "class": monthItemWrapper
+      }, [data.map((month) => _createVNode(Month, getMonthAttrs(month.month), {
+        default: () => [" ", month.text, " "]
+      }))]))]), props.isShowShortcut && _createVNode("div", {
+        "data-pixel-parts": "Shortcut",
+        "class": shortcutLabelWrapper
+      }, [_createVNode(MpButton, {
+        "variant": "ghost",
+        "onClick": () => onSelectMonth((/* @__PURE__ */ new Date()).getMonth(), getCalendarYear.value)
+      }, {
+        default: () => [props.shortcutLabel]
+      })])]);
+    };
+  }
+});
+
+export {
+  TableMonth
+};

package/dist/chunk-AGAA7XTC.mjs

@@ -0,0 +1,20 @@
+// src/components/parts/day.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { dayItemRecipe } from "@mekari/pixel3-styled-system/recipes";
+var Day = defineComponent({
+  name: "Day",
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      return _createVNode("div", {
+        "class": dayItemRecipe()
+      }, [slots.default()]);
+    };
+  }
+});
+
+export {
+  Day
+};