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

package/dist/composables/useCalendar.js

@@ -0,0 +1,184 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/composables/useCalendar.ts
+var useCalendar_exports = {};
+__export(useCalendar_exports, {
+  useCalendar: () => useCalendar
+});
+module.exports = __toCommonJS(useCalendar_exports);
+var import_vue = require("vue");
+
+// src/utils/date.ts
+var import_date_fns = require("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 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 (0, import_date_fns.addMonths)(date, 1);
+}
+__name(getNextMonth, "getNextMonth");
+function getPreviousMonth(date) {
+  return (0, import_date_fns.addMonths)(date, -1);
+}
+__name(getPreviousMonth, "getPreviousMonth");
+
+// src/composables/useCalendar.ts
+var import_date_fns2 = require("date-fns");
+function useCalendar(date, locale) {
+  const currentDate = (0, import_vue.ref)(isValidDate(date) ? date : /* @__PURE__ */ new Date());
+  const currentPanel = (0, import_vue.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 = (0, import_date_fns2.addYears)(currentDate.value, 1);
+  }, "nextYear");
+  const previousYear = /* @__PURE__ */ __name(() => {
+    currentDate.value = (0, import_date_fns2.addYears)(currentDate.value, -1);
+  }, "previousYear");
+  const changeYear = /* @__PURE__ */ __name((year) => {
+    currentDate.value = (0, import_date_fns2.setYear)(currentDate.value, year);
+  }, "changeYear");
+  const changeMonth = /* @__PURE__ */ __name((month) => {
+    currentDate.value = (0, import_date_fns2.setMonth)(currentDate.value, month);
+  }, "changeMonth");
+  const getSplitDates = (0, import_vue.computed)(() => {
+    return {
+      day: currentDate.value.getDay(),
+      month: currentDate.value.getMonth(),
+      year: currentDate.value.getFullYear(),
+      monthLabel: locale.value.months[currentDate.value.getMonth()]
+    };
+  });
+  const getDates = (0, import_vue.computed)(() => {
+    const {
+      year,
+      month
+    } = getSplitDates.value;
+    const arr = getCalendar({
+      firstDayOfWeek: locale.value.formatLocale.firstDayOfWeek || 0,
+      year,
+      month
+    });
+    return arr;
+  });
+  const getMonths = (0, import_vue.computed)(() => {
+    const monthsLocale = locale.value.formatLocale.monthsShort || locale.value.months;
+    const months = monthsLocale.map((text, month) => {
+      return {
+        text,
+        month
+      };
+    });
+    return months;
+  });
+  const getYears = (0, import_vue.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 = (0, import_vue.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");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useCalendar
+});

package/dist/composables/useCalendar.mjs

@@ -0,0 +1,8 @@
+import {
+  useCalendar
+} from "../chunk-NVULZQVI.mjs";
+import "../chunk-26Y3AVJW.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  useCalendar
+};

package/dist/composables/useCalendarRange.d.mts

@@ -0,0 +1,277 @@
+import * as vue from 'vue';
+import { CalendarPanelRangeProps } from '../modules/date-picker.props.mjs';
+import '../components/parts/date.mjs';
+import 'vue/jsx-runtime';
+import '@mekari/pixel3-styled-system/types';
+import '@mekari/pixel3-styled-system/css';
+import '@mekari/pixel3-styled-system/recipes';
+import '../components/parts/month.mjs';
+import '../components/parts/year.mjs';
+
+declare function useCalendarRange(props: CalendarPanelRangeProps): {
+    startDate: vue.Ref<{
+        toString: () => string;
+        toDateString: () => string;
+        toTimeString: () => string;
+        toLocaleString: {
+            (): string;
+            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+        };
+        toLocaleDateString: {
+            (): string;
+            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+        };
+        toLocaleTimeString: {
+            (): string;
+            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+        };
+        valueOf: () => number;
+        getTime: () => number;
+        getFullYear: () => number;
+        getUTCFullYear: () => number;
+        getMonth: () => number;
+        getUTCMonth: () => number;
+        getDate: () => number;
+        getUTCDate: () => number;
+        getDay: () => number;
+        getUTCDay: () => number;
+        getHours: () => number;
+        getUTCHours: () => number;
+        getMinutes: () => number;
+        getUTCMinutes: () => number;
+        getSeconds: () => number;
+        getUTCSeconds: () => number;
+        getMilliseconds: () => number;
+        getUTCMilliseconds: () => number;
+        getTimezoneOffset: () => number;
+        setTime: (time: number) => number;
+        setMilliseconds: (ms: number) => number;
+        setUTCMilliseconds: (ms: number) => number;
+        setSeconds: (sec: number, ms?: number | undefined) => number;
+        setUTCSeconds: (sec: number, ms?: number | undefined) => number;
+        setMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
+        setUTCMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
+        setHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
+        setUTCHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
+        setDate: (date: number) => number;
+        setUTCDate: (date: number) => number;
+        setMonth: (month: number, date?: number | undefined) => number;
+        setUTCMonth: (month: number, date?: number | undefined) => number;
+        setFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
+        setUTCFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
+        toUTCString: () => string;
+        toISOString: () => string;
+        toJSON: (key?: any) => string;
+        [Symbol.toPrimitive]: {
+            (hint: "default"): string;
+            (hint: "string"): string;
+            (hint: "number"): number;
+            (hint: string): string | number;
+        };
+    }>;
+    endDate: vue.Ref<{
+        toString: () => string;
+        toDateString: () => string;
+        toTimeString: () => string;
+        toLocaleString: {
+            (): string;
+            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+        };
+        toLocaleDateString: {
+            (): string;
+            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+        };
+        toLocaleTimeString: {
+            (): string;
+            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+        };
+        valueOf: () => number;
+        getTime: () => number;
+        getFullYear: () => number;
+        getUTCFullYear: () => number;
+        getMonth: () => number;
+        getUTCMonth: () => number;
+        getDate: () => number;
+        getUTCDate: () => number;
+        getDay: () => number;
+        getUTCDay: () => number;
+        getHours: () => number;
+        getUTCHours: () => number;
+        getMinutes: () => number;
+        getUTCMinutes: () => number;
+        getSeconds: () => number;
+        getUTCSeconds: () => number;
+        getMilliseconds: () => number;
+        getUTCMilliseconds: () => number;
+        getTimezoneOffset: () => number;
+        setTime: (time: number) => number;
+        setMilliseconds: (ms: number) => number;
+        setUTCMilliseconds: (ms: number) => number;
+        setSeconds: (sec: number, ms?: number | undefined) => number;
+        setUTCSeconds: (sec: number, ms?: number | undefined) => number;
+        setMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
+        setUTCMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
+        setHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
+        setUTCHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
+        setDate: (date: number) => number;
+        setUTCDate: (date: number) => number;
+        setMonth: (month: number, date?: number | undefined) => number;
+        setUTCMonth: (month: number, date?: number | undefined) => number;
+        setFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
+        setUTCFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
+        toUTCString: () => string;
+        toISOString: () => string;
+        toJSON: (key?: any) => string;
+        [Symbol.toPrimitive]: {
+            (hint: "default"): string;
+            (hint: "string"): string;
+            (hint: "number"): number;
+            (hint: string): string | number;
+        };
+    }>;
+    hoveredDate: vue.Ref<any>;
+    calendars: vue.Ref<{
+        toString: () => string;
+        toDateString: () => string;
+        toTimeString: () => string;
+        toLocaleString: {
+            (): string;
+            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+        };
+        toLocaleDateString: {
+            (): string;
+            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+        };
+        toLocaleTimeString: {
+            (): string;
+            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+        };
+        valueOf: () => number;
+        getTime: () => number;
+        getFullYear: () => number;
+        getUTCFullYear: () => number;
+        getMonth: () => number;
+        getUTCMonth: () => number;
+        getDate: () => number;
+        getUTCDate: () => number;
+        getDay: () => number;
+        getUTCDay: () => number;
+        getHours: () => number;
+        getUTCHours: () => number;
+        getMinutes: () => number;
+        getUTCMinutes: () => number;
+        getSeconds: () => number;
+        getUTCSeconds: () => number;
+        getMilliseconds: () => number;
+        getUTCMilliseconds: () => number;
+        getTimezoneOffset: () => number;
+        setTime: (time: number) => number;
+        setMilliseconds: (ms: number) => number;
+        setUTCMilliseconds: (ms: number) => number;
+        setSeconds: (sec: number, ms?: number | undefined) => number;
+        setUTCSeconds: (sec: number, ms?: number | undefined) => number;
+        setMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
+        setUTCMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
+        setHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
+        setUTCHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
+        setDate: (date: number) => number;
+        setUTCDate: (date: number) => number;
+        setMonth: (month: number, date?: number | undefined) => number;
+        setUTCMonth: (month: number, date?: number | undefined) => number;
+        setFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
+        setUTCFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
+        toUTCString: () => string;
+        toISOString: () => string;
+        toJSON: (key?: any) => string;
+        [Symbol.toPrimitive]: {
+            (hint: "default"): string;
+            (hint: "string"): string;
+            (hint: "number"): number;
+            (hint: string): string | number;
+        };
+    }[]>;
+    getCurrentDates: vue.ComputedRef<{
+        toString: () => string;
+        toDateString: () => string;
+        toTimeString: () => string;
+        toLocaleString: {
+            (): string;
+            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+        };
+        toLocaleDateString: {
+            (): string;
+            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+        };
+        toLocaleTimeString: {
+            (): string;
+            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+        };
+        valueOf: () => number;
+        getTime: () => number;
+        getFullYear: () => number;
+        getUTCFullYear: () => number;
+        getMonth: () => number;
+        getUTCMonth: () => number;
+        getDate: () => number;
+        getUTCDate: () => number;
+        getDay: () => number;
+        getUTCDay: () => number;
+        getHours: () => number;
+        getUTCHours: () => number;
+        getMinutes: () => number;
+        getUTCMinutes: () => number;
+        getSeconds: () => number;
+        getUTCSeconds: () => number;
+        getMilliseconds: () => number;
+        getUTCMilliseconds: () => number;
+        getTimezoneOffset: () => number;
+        setTime: (time: number) => number;
+        setMilliseconds: (ms: number) => number;
+        setUTCMilliseconds: (ms: number) => number;
+        setSeconds: (sec: number, ms?: number | undefined) => number;
+        setUTCSeconds: (sec: number, ms?: number | undefined) => number;
+        setMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
+        setUTCMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
+        setHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
+        setUTCHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
+        setDate: (date: number) => number;
+        setUTCDate: (date: number) => number;
+        setMonth: (month: number, date?: number | undefined) => number;
+        setUTCMonth: (month: number, date?: number | undefined) => number;
+        setFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
+        setUTCFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
+        toUTCString: () => string;
+        toISOString: () => string;
+        toJSON: (key?: any) => string;
+        [Symbol.toPrimitive]: {
+            (hint: "default"): string;
+            (hint: "string"): string;
+            (hint: "number"): number;
+            (hint: string): string | number;
+        };
+    }[]>;
+    setStartDate: (date: Date | undefined) => void;
+    setEndDate: (date: Date | undefined) => void;
+    setHoveredDate: (date: Date | undefined) => void;
+    getDateRangeStatus: (cellDate: any) => {
+        inRange: boolean;
+        hoverInRange: boolean;
+        activeDragRange: boolean;
+    };
+    updateStartCalendar: (value: Date) => void;
+    updateEndCalendar: (value: Date) => void;
+};
+
+export { useCalendarRange };