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

package/dist/components/calendar/table-month.js

@@ -0,0 +1,294 @@
+"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/table-month.tsx
+var table_month_exports = {};
+__export(table_month_exports, {
+  TableMonth: () => TableMonth
+});
+module.exports = __toCommonJS(table_month_exports);
+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/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_recipes5 = require("@mekari/pixel3-styled-system/recipes");
+var TableMonth = (0, import_vue10.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_recipes5.tableMonthSlotRecipe)();
+    const getMonths = (0, import_vue10.computed)(() => {
+      return chunk(props.months, 3);
+    });
+    const getCalendarYear = (0, import_vue10.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_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": monthItemRoot
+      }, [getMonths.value.map((data) => (0, import_vue9.createVNode)("div", {
+        "class": monthItemWrapper
+      }, [data.map((month) => (0, import_vue9.createVNode)(Month, getMonthAttrs(month.month), {
+        default: () => [" ", month.text, " "]
+      }))]))]), props.isShowShortcut && (0, import_vue9.createVNode)("div", {
+        "data-pixel-parts": "Shortcut",
+        "class": shortcutLabelWrapper
+      }, [(0, import_vue9.createVNode)(import_pixel3_button.MpButton, {
+        "variant": "ghost",
+        "onClick": () => onSelectMonth((/* @__PURE__ */ new Date()).getMonth(), getCalendarYear.value)
+      }, {
+        default: () => [props.shortcutLabel]
+      })])]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TableMonth
+});

package/dist/components/calendar/table-month.mjs

@@ -0,0 +1,14 @@
+import {
+  TableMonth
+} from "../../chunk-5PISTT2K.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 {
+  TableMonth
+};

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

@@ -0,0 +1,71 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import { YearVariants } from '../parts/year.mjs';
+import '@mekari/pixel3-styled-system/types';
+import '@mekari/pixel3-styled-system/css';
+import '@mekari/pixel3-styled-system/recipes';
+
+declare const TableYear: vue.DefineComponent<{
+    years: {
+        type: PropType<number[]>;
+        default: () => never[];
+    };
+    headerLabel: {
+        type: PropType<string>;
+        default: string;
+    };
+    shortcutLabel: {
+        type: PropType<string>;
+        default: string;
+    };
+    getYearStatus: {
+        type: PropType<(date: number) => {
+            status: YearVariants['status'];
+            isDisabled: boolean;
+        }>;
+        default: () => void;
+    };
+    isShowShortcut: {
+        type: PropType<boolean>;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("mouseEnter" | "mouseLeave" | "next" | "previous" | "select")[], "mouseEnter" | "mouseLeave" | "next" | "previous" | "select", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    years: {
+        type: PropType<number[]>;
+        default: () => never[];
+    };
+    headerLabel: {
+        type: PropType<string>;
+        default: string;
+    };
+    shortcutLabel: {
+        type: PropType<string>;
+        default: string;
+    };
+    getYearStatus: {
+        type: PropType<(date: number) => {
+            status: YearVariants['status'];
+            isDisabled: boolean;
+        }>;
+        default: () => void;
+    };
+    isShowShortcut: {
+        type: PropType<boolean>;
+    };
+}>> & {
+    onMouseEnter?: ((...args: any[]) => any) | undefined;
+    onMouseLeave?: ((...args: any[]) => any) | undefined;
+    onNext?: ((...args: any[]) => any) | undefined;
+    onPrevious?: ((...args: any[]) => any) | undefined;
+    onSelect?: ((...args: any[]) => any) | undefined;
+}, {
+    getYearStatus: (date: number) => {
+        status: YearVariants['status'];
+        isDisabled: boolean;
+    };
+    headerLabel: string;
+    shortcutLabel: string;
+    years: number[];
+}, {}>;
+
+export { TableYear };

package/dist/components/calendar/table-year.d.ts

@@ -0,0 +1,71 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import { YearVariants } from '../parts/year.js';
+import '@mekari/pixel3-styled-system/types';
+import '@mekari/pixel3-styled-system/css';
+import '@mekari/pixel3-styled-system/recipes';
+
+declare const TableYear: vue.DefineComponent<{
+    years: {
+        type: PropType<number[]>;
+        default: () => never[];
+    };
+    headerLabel: {
+        type: PropType<string>;
+        default: string;
+    };
+    shortcutLabel: {
+        type: PropType<string>;
+        default: string;
+    };
+    getYearStatus: {
+        type: PropType<(date: number) => {
+            status: YearVariants['status'];
+            isDisabled: boolean;
+        }>;
+        default: () => void;
+    };
+    isShowShortcut: {
+        type: PropType<boolean>;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("mouseEnter" | "mouseLeave" | "next" | "previous" | "select")[], "mouseEnter" | "mouseLeave" | "next" | "previous" | "select", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    years: {
+        type: PropType<number[]>;
+        default: () => never[];
+    };
+    headerLabel: {
+        type: PropType<string>;
+        default: string;
+    };
+    shortcutLabel: {
+        type: PropType<string>;
+        default: string;
+    };
+    getYearStatus: {
+        type: PropType<(date: number) => {
+            status: YearVariants['status'];
+            isDisabled: boolean;
+        }>;
+        default: () => void;
+    };
+    isShowShortcut: {
+        type: PropType<boolean>;
+    };
+}>> & {
+    onMouseEnter?: ((...args: any[]) => any) | undefined;
+    onMouseLeave?: ((...args: any[]) => any) | undefined;
+    onNext?: ((...args: any[]) => any) | undefined;
+    onPrevious?: ((...args: any[]) => any) | undefined;
+    onSelect?: ((...args: any[]) => any) | undefined;
+}, {
+    getYearStatus: (date: number) => {
+        status: YearVariants['status'];
+        isDisabled: boolean;
+    };
+    headerLabel: string;
+    shortcutLabel: string;
+    years: number[];
+}, {}>;
+
+export { TableYear };