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

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

@@ -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.js';
+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 };

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

@@ -0,0 +1,305 @@
+"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-date.tsx
+var table_date_exports = {};
+__export(table_date_exports, {
+  TableDate: () => TableDate
+});
+module.exports = __toCommonJS(table_date_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/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]
+      })])]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TableDate
+});

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

@@ -0,0 +1,13 @@
+import {
+  TableDate
+} from "../../chunk-LVCRFE25.mjs";
+import "../../chunk-FTR7OMCT.mjs";
+import "../../chunk-AGAA7XTC.mjs";
+import "../../chunk-3VROFGJH.mjs";
+import "../../chunk-EQWT6VDG.mjs";
+import "../../chunk-J5BK7Z2U.mjs";
+import "../../chunk-NIUQXHGQ.mjs";
+import "../../chunk-QZ7VFGWC.mjs";
+export {
+  TableDate
+};

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

@@ -0,0 +1,90 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import { MonthVariants } from '../parts/month.mjs';
+import '@mekari/pixel3-styled-system/types';
+import '@mekari/pixel3-styled-system/css';
+import '@mekari/pixel3-styled-system/recipes';
+
+declare const TableMonth: vue.DefineComponent<{
+    calendar: {
+        type: DateConstructor;
+        default: () => Date;
+    };
+    months: {
+        type: PropType<{
+            text: string;
+            month: number;
+        }[]>;
+        default: () => never[];
+    };
+    headerLabel: {
+        type: PropType<string>;
+        default: string;
+    };
+    shortcutLabel: {
+        type: PropType<string>;
+        default: string;
+    };
+    getMonthStatus: {
+        type: PropType<(date: number, year: number) => {
+            status: MonthVariants['status'];
+            isDisabled: boolean;
+        }>;
+        default: () => void;
+    };
+    isShowShortcut: {
+        type: PropType<boolean>;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("mouseEnter" | "mouseLeave" | "next" | "previous" | "select" | "clickHeaderLabel")[], "mouseEnter" | "mouseLeave" | "next" | "previous" | "select" | "clickHeaderLabel", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    calendar: {
+        type: DateConstructor;
+        default: () => Date;
+    };
+    months: {
+        type: PropType<{
+            text: string;
+            month: number;
+        }[]>;
+        default: () => never[];
+    };
+    headerLabel: {
+        type: PropType<string>;
+        default: string;
+    };
+    shortcutLabel: {
+        type: PropType<string>;
+        default: string;
+    };
+    getMonthStatus: {
+        type: PropType<(date: number, year: number) => {
+            status: MonthVariants['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;
+    onClickHeaderLabel?: ((...args: any[]) => any) | undefined;
+}, {
+    calendar: Date;
+    getMonthStatus: (date: number, year: number) => {
+        status: MonthVariants['status'];
+        isDisabled: boolean;
+    };
+    months: {
+        text: string;
+        month: number;
+    }[];
+    headerLabel: string;
+    shortcutLabel: string;
+}, {}>;
+
+export { TableMonth };

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

@@ -0,0 +1,90 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import { MonthVariants } from '../parts/month.js';
+import '@mekari/pixel3-styled-system/types';
+import '@mekari/pixel3-styled-system/css';
+import '@mekari/pixel3-styled-system/recipes';
+
+declare const TableMonth: vue.DefineComponent<{
+    calendar: {
+        type: DateConstructor;
+        default: () => Date;
+    };
+    months: {
+        type: PropType<{
+            text: string;
+            month: number;
+        }[]>;
+        default: () => never[];
+    };
+    headerLabel: {
+        type: PropType<string>;
+        default: string;
+    };
+    shortcutLabel: {
+        type: PropType<string>;
+        default: string;
+    };
+    getMonthStatus: {
+        type: PropType<(date: number, year: number) => {
+            status: MonthVariants['status'];
+            isDisabled: boolean;
+        }>;
+        default: () => void;
+    };
+    isShowShortcut: {
+        type: PropType<boolean>;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("mouseEnter" | "mouseLeave" | "next" | "previous" | "select" | "clickHeaderLabel")[], "mouseEnter" | "mouseLeave" | "next" | "previous" | "select" | "clickHeaderLabel", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    calendar: {
+        type: DateConstructor;
+        default: () => Date;
+    };
+    months: {
+        type: PropType<{
+            text: string;
+            month: number;
+        }[]>;
+        default: () => never[];
+    };
+    headerLabel: {
+        type: PropType<string>;
+        default: string;
+    };
+    shortcutLabel: {
+        type: PropType<string>;
+        default: string;
+    };
+    getMonthStatus: {
+        type: PropType<(date: number, year: number) => {
+            status: MonthVariants['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;
+    onClickHeaderLabel?: ((...args: any[]) => any) | undefined;
+}, {
+    calendar: Date;
+    getMonthStatus: (date: number, year: number) => {
+        status: MonthVariants['status'];
+        isDisabled: boolean;
+    };
+    months: {
+        text: string;
+        month: number;
+    }[];
+    headerLabel: string;
+    shortcutLabel: string;
+}, {}>;
+
+export { TableMonth };