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

package/dist/components/calendar/index.js

@@ -0,0 +1,548 @@
+"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/components/calendar/index.ts
+var calendar_exports = {};
+__export(calendar_exports, {
+  TableDate: () => TableDate,
+  TableMonth: () => TableMonth,
+  TableYear: () => TableYear
+});
+module.exports = __toCommonJS(calendar_exports);
+
+// src/components/calendar/table-date.tsx
+var import_vue9 = require("vue");
+var import_vue10 = require("vue");
+var import_pixel3_button = require("@mekari/pixel3-button");
+
+// src/components/parts/date.tsx
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+var Date2 = (0, import_vue2.defineComponent)({
+  name: "Date",
+  props: {
+    status: {
+      type: String
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
+    },
+    isShowPinbar: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      const dateItemClasses = (0, import_recipes.dateItemRecipe)({
+        status: props.status
+      });
+      const {
+        root,
+        pinbar
+      } = (0, import_recipes.pinbarSlotRecipe)();
+      return (0, import_vue.createVNode)("button", {
+        "disabled": props.isDisabled,
+        "data-status": props.status,
+        "class": dateItemClasses
+      }, [slots.default(), props.isShowPinbar && (0, import_vue.createVNode)("div", {
+        "class": root
+      }, [(0, import_vue.createVNode)("div", {
+        "class": pinbar
+      }, null)])]);
+    };
+  }
+});
+
+// src/components/parts/day.tsx
+var import_vue3 = require("vue");
+var import_vue4 = require("vue");
+var import_recipes2 = require("@mekari/pixel3-styled-system/recipes");
+var Day = (0, import_vue4.defineComponent)({
+  name: "Day",
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      return (0, import_vue3.createVNode)("div", {
+        "class": (0, import_recipes2.dayItemRecipe)()
+      }, [slots.default()]);
+    };
+  }
+});
+
+// src/components/parts/month.tsx
+var import_vue5 = require("vue");
+var import_vue6 = require("vue");
+var import_recipes3 = require("@mekari/pixel3-styled-system/recipes");
+var Month = (0, import_vue6.defineComponent)({
+  name: "Month",
+  props: {
+    status: {
+      type: String
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      const classes = (0, import_recipes3.monthItemRecipe)({
+        status: props.status
+      });
+      return (0, import_vue5.createVNode)("button", {
+        "disabled": props.isDisabled,
+        "data-status": props.status,
+        "class": classes
+      }, [slots.default()]);
+    };
+  }
+});
+
+// src/components/parts/year.tsx
+var import_vue7 = require("vue");
+var import_vue8 = require("vue");
+var import_recipes4 = require("@mekari/pixel3-styled-system/recipes");
+var YearItem = (0, import_vue8.defineComponent)({
+  name: "YearItem",
+  props: {
+    status: {
+      type: String
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      const classes = (0, import_recipes4.yearItemRecipe)({
+        status: props.status
+      });
+      return (0, import_vue7.createVNode)("button", {
+        "disabled": props.isDisabled,
+        "data-status": props.status,
+        "class": classes
+      }, [slots.default()]);
+    };
+  }
+});
+
+// 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");
+
+// src/components/calendar/table-date.tsx
+var import_recipes5 = require("@mekari/pixel3-styled-system/recipes");
+var TableDate = (0, import_vue10.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
+    } = (0, import_recipes5.tableDateSlotRecipe)();
+    const getDates = (0, import_vue10.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 (0, import_vue9.createVNode)("div", null, [(0, import_vue9.createVNode)("div", {
+        "data-pixel-parts": "Header",
+        "class": headerRoot
+      }, [(0, import_vue9.createVNode)(import_pixel3_button.MpButton, {
+        "left-icon": "chevrons-left",
+        "variant": "ghost",
+        "size": "sm",
+        "onClick": onPreviousButton
+      }, null), (0, import_vue9.createVNode)("button", {
+        "class": headerLabel,
+        "onClick": () => emit("clickHeaderLabel")
+      }, [props.headerLabel]), (0, import_vue9.createVNode)(import_pixel3_button.MpButton, {
+        "right-icon": "chevrons-right",
+        "variant": "ghost",
+        "size": "sm",
+        "onClick": onNextButton
+      }, null)]), (0, import_vue9.createVNode)("div", {
+        "data-pixel-parts": "Content",
+        "class": dayWrapper
+      }, [props.days.map((day) => (0, import_vue9.createVNode)(Day, null, {
+        default: () => [(0, import_vue9.createTextVNode)(" "), day, (0, import_vue9.createTextVNode)(" ")]
+      }))]), (0, import_vue9.createVNode)("div", {
+        "data-pixel-parts": "Content",
+        "class": dateItemRoot
+      }, [getDates.value.map((dates, index) => (0, import_vue9.createVNode)("div", {
+        "class": dateItemWrapper,
+        "data-row-index": index
+      }, [dates.map((date) => (0, import_vue9.createVNode)(Date2, getDateAttrs(date), {
+        default: () => [(0, import_vue9.createTextVNode)(" "), date.getDate(), (0, import_vue9.createTextVNode)(" ")]
+      }))]))]), props.isShowShortcut && (0, import_vue9.createVNode)("div", {
+        "data-pixel-parts": "Shortcut",
+        "class": shortcutLabelWrapper
+      }, [(0, import_vue9.createVNode)(import_pixel3_button.MpButton, {
+        "variant": "ghost",
+        "onClick": onSelectToday
+      }, {
+        default: () => [props.shortcutLabel]
+      })])]);
+    };
+  }
+});
+
+// src/components/calendar/table-month.tsx
+var import_vue11 = require("vue");
+var import_vue12 = require("vue");
+var import_pixel3_button2 = require("@mekari/pixel3-button");
+
+// 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");
+
+// src/components/calendar/table-month.tsx
+var import_recipes6 = require("@mekari/pixel3-styled-system/recipes");
+var TableMonth = (0, import_vue12.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
+    } = (0, import_recipes6.tableMonthSlotRecipe)();
+    const getMonths = (0, import_vue12.computed)(() => {
+      return chunk(props.months, 3);
+    });
+    const getCalendarYear = (0, import_vue12.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 (0, import_vue11.createVNode)("div", null, [(0, import_vue11.createVNode)("div", {
+        "data-pixel-parts": "Header",
+        "class": headerRoot
+      }, [(0, import_vue11.createVNode)(import_pixel3_button2.MpButton, {
+        "left-icon": "chevrons-left",
+        "variant": "ghost",
+        "size": "sm",
+        "onClick": onPreviousButton
+      }, null), (0, import_vue11.createVNode)("button", {
+        "class": headerLabel,
+        "onClick": () => emit("clickHeaderLabel")
+      }, [props.headerLabel]), (0, import_vue11.createVNode)(import_pixel3_button2.MpButton, {
+        "right-icon": "chevrons-right",
+        "variant": "ghost",
+        "size": "sm",
+        "onClick": onNextButton
+      }, null)]), (0, import_vue11.createVNode)("div", {
+        "data-pixel-parts": "Content",
+        "class": monthItemRoot
+      }, [getMonths.value.map((data) => (0, import_vue11.createVNode)("div", {
+        "class": monthItemWrapper
+      }, [data.map((month) => (0, import_vue11.createVNode)(Month, getMonthAttrs(month.month), {
+        default: () => [" ", month.text, " "]
+      }))]))]), props.isShowShortcut && (0, import_vue11.createVNode)("div", {
+        "data-pixel-parts": "Shortcut",
+        "class": shortcutLabelWrapper
+      }, [(0, import_vue11.createVNode)(import_pixel3_button2.MpButton, {
+        "variant": "ghost",
+        "onClick": () => onSelectMonth((/* @__PURE__ */ new Date()).getMonth(), getCalendarYear.value)
+      }, {
+        default: () => [props.shortcutLabel]
+      })])]);
+    };
+  }
+});
+
+// src/components/calendar/table-year.tsx
+var import_vue13 = require("vue");
+var import_vue14 = require("vue");
+var import_pixel3_button3 = require("@mekari/pixel3-button");
+var import_recipes7 = require("@mekari/pixel3-styled-system/recipes");
+var TableYear = (0, import_vue14.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
+    } = (0, import_recipes7.tableYearSlotRecipe)();
+    const getYears = (0, import_vue14.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 (0, import_vue13.createVNode)("div", null, [(0, import_vue13.createVNode)("div", {
+        "data-pixel-parts": "Header",
+        "class": headerRoot
+      }, [(0, import_vue13.createVNode)(import_pixel3_button3.MpButton, {
+        "left-icon": "chevrons-left",
+        "variant": "ghost",
+        "size": "sm",
+        "onClick": onPreviousButton
+      }, null), (0, import_vue13.createVNode)("button", {
+        "class": headerLabel
+      }, [props.headerLabel]), (0, import_vue13.createVNode)(import_pixel3_button3.MpButton, {
+        "right-icon": "chevrons-right",
+        "variant": "ghost",
+        "size": "sm",
+        "onClick": onNextButton
+      }, null)]), (0, import_vue13.createVNode)("div", {
+        "class": yearItemRoot
+      }, [getYears.value.map((data) => (0, import_vue13.createVNode)("div", {
+        "class": yearItemWrapper
+      }, [data.map((year) => (0, import_vue13.createVNode)(YearItem, getMonthAttrs(year), {
+        default: () => [(0, import_vue13.createTextVNode)(" "), year, (0, import_vue13.createTextVNode)(" ")]
+      }))]))]), props.isShowShortcut && (0, import_vue13.createVNode)("div", {
+        "class": shortcutLabelWrapper
+      }, [(0, import_vue13.createVNode)(import_pixel3_button3.MpButton, {
+        "variant": "ghost",
+        "onClick": () => onSelectYear((/* @__PURE__ */ new Date()).getFullYear())
+      }, {
+        default: () => [props.shortcutLabel]
+      })])]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TableDate,
+  TableMonth,
+  TableYear
+});

package/dist/components/calendar/index.mjs

@@ -0,0 +1,23 @@
+import "../../chunk-V6D6W7RO.mjs";
+import {
+  TableDate
+} from "../../chunk-LVCRFE25.mjs";
+import {
+  TableMonth
+} from "../../chunk-5PISTT2K.mjs";
+import {
+  TableYear
+} from "../../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-26Y3AVJW.mjs";
+import "../../chunk-NIUQXHGQ.mjs";
+import "../../chunk-QZ7VFGWC.mjs";
+export {
+  TableDate,
+  TableMonth,
+  TableYear
+};

package/dist/components/calendar/table-date.d.mts

@@ -0,0 +1,97 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import { DateVariants } from '../parts/date.mjs';
+import '@mekari/pixel3-styled-system/types';
+import '@mekari/pixel3-styled-system/css';
+import '@mekari/pixel3-styled-system/recipes';
+
+declare const TableDate: vue.DefineComponent<{
+    days: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    dates: {
+        type: PropType<Date[]>;
+        default: () => never[];
+    };
+    headerLabel: {
+        type: PropType<string>;
+        default: string;
+    };
+    shortcutLabel: {
+        type: PropType<string>;
+        default: string;
+    };
+    getDateStatus: {
+        type: PropType<(date: Date) => {
+            status: DateVariants['status'];
+            isDisabled: boolean;
+            isShowPinbar: boolean;
+        }>;
+        default: () => void;
+    };
+    isShowShortcut: {
+        type: PropType<boolean>;
+    };
+    isRange: {
+        type: PropType<boolean>;
+    };
+    isHideNotThisMonthDate: {
+        type: PropType<boolean>;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("mouseEnter" | "mouseLeave" | "changePanel" | "next" | "previous" | "select" | "clickHeaderLabel")[], "mouseEnter" | "mouseLeave" | "changePanel" | "next" | "previous" | "select" | "clickHeaderLabel", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    days: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    dates: {
+        type: PropType<Date[]>;
+        default: () => never[];
+    };
+    headerLabel: {
+        type: PropType<string>;
+        default: string;
+    };
+    shortcutLabel: {
+        type: PropType<string>;
+        default: string;
+    };
+    getDateStatus: {
+        type: PropType<(date: Date) => {
+            status: DateVariants['status'];
+            isDisabled: boolean;
+            isShowPinbar: boolean;
+        }>;
+        default: () => void;
+    };
+    isShowShortcut: {
+        type: PropType<boolean>;
+    };
+    isRange: {
+        type: PropType<boolean>;
+    };
+    isHideNotThisMonthDate: {
+        type: PropType<boolean>;
+    };
+}>> & {
+    onMouseEnter?: ((...args: any[]) => any) | undefined;
+    onMouseLeave?: ((...args: any[]) => any) | undefined;
+    onChangePanel?: ((...args: any[]) => any) | undefined;
+    onNext?: ((...args: any[]) => any) | undefined;
+    onPrevious?: ((...args: any[]) => any) | undefined;
+    onSelect?: ((...args: any[]) => any) | undefined;
+    onClickHeaderLabel?: ((...args: any[]) => any) | undefined;
+}, {
+    getDateStatus: (date: Date) => {
+        status: DateVariants['status'];
+        isDisabled: boolean;
+        isShowPinbar: boolean;
+    };
+    days: string[];
+    dates: Date[];
+    headerLabel: string;
+    shortcutLabel: string;
+}, {}>;
+
+export { TableDate };