@mekari/pixel3-date-picker 0.0.3-dev.0 → 0.1.0

package/dist/index.js

@@ -26,19 +26,19 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/date-picker.tsx
-var import_vue20 = require("vue");
-var import_vue21 = require("vue");
+var import_vue25 = require("vue");
+var import_vue26 = require("vue");
 var import_pixel3_input = require("@mekari/pixel3-input");
 var import_pixel3_popover = require("@mekari/pixel3-popover");
 var import_pixel3_icon = require("@mekari/pixel3-icon");
 
 // src/calendar-panel.tsx
-var import_vue17 = require("vue");
-var import_vue18 = require("vue");
+var import_vue19 = require("vue");
+var import_vue20 = require("vue");
 
 // src/components/calendar/table-date.tsx
-var import_vue9 = require("vue");
-var import_vue10 = require("vue");
+var import_vue11 = require("vue");
+var import_vue12 = require("vue");
 var import_pixel3_button = require("@mekari/pixel3-button");
 
 // src/components/parts/date.tsx
@@ -163,6 +163,38 @@ var YearItem = (0, import_vue8.defineComponent)({
   }
 });
 
+// src/components/parts/time.tsx
+var import_vue9 = require("vue");
+var import_vue10 = require("vue");
+var import_recipes5 = require("@mekari/pixel3-styled-system/recipes");
+var TimeItem = (0, import_vue10.defineComponent)({
+  name: "TimeItem",
+  props: {
+    status: {
+      type: String,
+      default: "default"
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      const classes = (0, import_recipes5.timeItemRecipe)({
+        status: props.status
+      });
+      return (0, import_vue9.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)) {
@@ -199,10 +231,26 @@ var assign = /* @__PURE__ */ __name((initial, override) => {
     };
   }, {});
 }, "assign");
+function padNumber(value) {
+  value = parseInt(value, 10);
+  return value < 10 ? `0${value}` : `${value}`;
+}
+__name(padNumber, "padNumber");
+function generateOptions(length, step) {
+  if (step <= 0) {
+    step = 1;
+  }
+  const arr = [];
+  for (let i = 0; i < length; i += step) {
+    arr.push(i);
+  }
+  return arr;
+}
+__name(generateOptions, "generateOptions");
 
 // src/components/calendar/table-date.tsx
-var import_recipes5 = require("@mekari/pixel3-styled-system/recipes");
-var TableDate = (0, import_vue10.defineComponent)({
+var import_recipes6 = require("@mekari/pixel3-styled-system/recipes");
+var TableDate = (0, import_vue12.defineComponent)({
   name: "TableDate",
   props: {
     days: {
@@ -247,8 +295,8 @@ var TableDate = (0, import_vue10.defineComponent)({
       dateItemRoot,
       dateItemWrapper,
       shortcutLabelWrapper
-    } = (0, import_recipes5.tableDateSlotRecipe)();
-    const getDates = (0, import_vue10.computed)(() => {
+    } = (0, import_recipes6.tableDateSlotRecipe)();
+    const getDates = (0, import_vue12.computed)(() => {
       return chunk(props.dates, 7);
     });
     function onNextButton() {
@@ -292,39 +340,39 @@ var TableDate = (0, import_vue10.defineComponent)({
     }
     __name(getDateAttrs, "getDateAttrs");
     return () => {
-      return (0, import_vue9.createVNode)("div", null, [(0, import_vue9.createVNode)("div", {
+      return (0, import_vue11.createVNode)("div", null, [(0, import_vue11.createVNode)("div", {
         "data-pixel-parts": "Header",
         "class": headerRoot
-      }, [(0, import_vue9.createVNode)(import_pixel3_button.MpButton, {
+      }, [(0, import_vue11.createVNode)(import_pixel3_button.MpButton, {
         "left-icon": "chevrons-left",
         "variant": "ghost",
         "size": "sm",
         "onClick": onPreviousButton
-      }, null), (0, import_vue9.createVNode)("button", {
+      }, null), (0, import_vue11.createVNode)("button", {
         "class": headerLabel,
         "onClick": () => emit("clickHeaderLabel")
-      }, [props.headerLabel]), (0, import_vue9.createVNode)(import_pixel3_button.MpButton, {
+      }, [props.headerLabel]), (0, import_vue11.createVNode)(import_pixel3_button.MpButton, {
         "right-icon": "chevrons-right",
         "variant": "ghost",
         "size": "sm",
         "onClick": onNextButton
-      }, null)]), (0, import_vue9.createVNode)("div", {
+      }, null)]), (0, import_vue11.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", {
+      }, [props.days.map((day) => (0, import_vue11.createVNode)(Day, null, {
+        default: () => [(0, import_vue11.createTextVNode)(" "), day, (0, import_vue11.createTextVNode)(" ")]
+      }))]), (0, import_vue11.createVNode)("div", {
         "data-pixel-parts": "Content",
         "class": dateItemRoot
-      }, [getDates.value.map((dates, index) => (0, import_vue9.createVNode)("div", {
+      }, [getDates.value.map((dates, index) => (0, import_vue11.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", {
+      }, [dates.map((date) => (0, import_vue11.createVNode)(Date2, getDateAttrs(date), {
+        default: () => [(0, import_vue11.createTextVNode)(" "), date.getDate(), (0, import_vue11.createTextVNode)(" ")]
+      }))]))]), props.isShowShortcut && (0, import_vue11.createVNode)("div", {
         "data-pixel-parts": "Shortcut",
         "class": shortcutLabelWrapper
-      }, [(0, import_vue9.createVNode)(import_pixel3_button.MpButton, {
+      }, [(0, import_vue11.createVNode)(import_pixel3_button.MpButton, {
         "variant": "ghost",
         "onClick": onSelectToday
       }, {
@@ -335,8 +383,8 @@ var TableDate = (0, import_vue10.defineComponent)({
 });
 
 // src/components/calendar/table-month.tsx
-var import_vue11 = require("vue");
-var import_vue12 = require("vue");
+var import_vue13 = require("vue");
+var import_vue14 = require("vue");
 var import_pixel3_button2 = require("@mekari/pixel3-button");
 
 // src/utils/date.ts
@@ -424,8 +472,8 @@ function isDateBetween(date, min, max) {
 __name(isDateBetween, "isDateBetween");
 
 // src/components/calendar/table-month.tsx
-var import_recipes6 = require("@mekari/pixel3-styled-system/recipes");
-var TableMonth = (0, import_vue12.defineComponent)({
+var import_recipes7 = require("@mekari/pixel3-styled-system/recipes");
+var TableMonth = (0, import_vue14.defineComponent)({
   name: "TableMonth",
   props: {
     calendar: {
@@ -463,11 +511,11 @@ var TableMonth = (0, import_vue12.defineComponent)({
       monthItemRoot,
       monthItemWrapper,
       shortcutLabelWrapper
-    } = (0, import_recipes6.tableMonthSlotRecipe)();
-    const getMonths = (0, import_vue12.computed)(() => {
+    } = (0, import_recipes7.tableMonthSlotRecipe)();
+    const getMonths = (0, import_vue14.computed)(() => {
       return chunk(props.months, 3);
     });
-    const getCalendarYear = (0, import_vue12.computed)(() => props.calendar.getFullYear());
+    const getCalendarYear = (0, import_vue14.computed)(() => props.calendar.getFullYear());
     function onNextButton() {
       emit("next");
     }
@@ -499,33 +547,33 @@ var TableMonth = (0, import_vue12.defineComponent)({
     }
     __name(getMonthAttrs, "getMonthAttrs");
     return () => {
-      return (0, import_vue11.createVNode)("div", null, [(0, import_vue11.createVNode)("div", {
+      return (0, import_vue13.createVNode)("div", null, [(0, import_vue13.createVNode)("div", {
         "data-pixel-parts": "Header",
         "class": headerRoot
-      }, [(0, import_vue11.createVNode)(import_pixel3_button2.MpButton, {
+      }, [(0, import_vue13.createVNode)(import_pixel3_button2.MpButton, {
         "left-icon": "chevrons-left",
         "variant": "ghost",
         "size": "sm",
         "onClick": onPreviousButton
-      }, null), (0, import_vue11.createVNode)("button", {
+      }, null), (0, import_vue13.createVNode)("button", {
         "class": headerLabel,
         "onClick": () => emit("clickHeaderLabel")
-      }, [props.headerLabel]), (0, import_vue11.createVNode)(import_pixel3_button2.MpButton, {
+      }, [props.headerLabel]), (0, import_vue13.createVNode)(import_pixel3_button2.MpButton, {
         "right-icon": "chevrons-right",
         "variant": "ghost",
         "size": "sm",
         "onClick": onNextButton
-      }, null)]), (0, import_vue11.createVNode)("div", {
+      }, null)]), (0, import_vue13.createVNode)("div", {
         "data-pixel-parts": "Content",
         "class": monthItemRoot
-      }, [getMonths.value.map((data) => (0, import_vue11.createVNode)("div", {
+      }, [getMonths.value.map((data) => (0, import_vue13.createVNode)("div", {
         "class": monthItemWrapper
-      }, [data.map((month) => (0, import_vue11.createVNode)(Month, getMonthAttrs(month.month), {
+      }, [data.map((month) => (0, import_vue13.createVNode)(Month, getMonthAttrs(month.month), {
         default: () => [" ", month.text, " "]
-      }))]))]), props.isShowShortcut && (0, import_vue11.createVNode)("div", {
+      }))]))]), props.isShowShortcut && (0, import_vue13.createVNode)("div", {
         "data-pixel-parts": "Shortcut",
         "class": shortcutLabelWrapper
-      }, [(0, import_vue11.createVNode)(import_pixel3_button2.MpButton, {
+      }, [(0, import_vue13.createVNode)(import_pixel3_button2.MpButton, {
         "variant": "ghost",
         "onClick": () => onSelectMonth((/* @__PURE__ */ new Date()).getMonth(), getCalendarYear.value)
       }, {
@@ -536,11 +584,11 @@ var TableMonth = (0, import_vue12.defineComponent)({
 });
 
 // src/components/calendar/table-year.tsx
-var import_vue13 = require("vue");
-var import_vue14 = require("vue");
+var import_vue15 = require("vue");
+var import_vue16 = 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)({
+var import_recipes8 = require("@mekari/pixel3-styled-system/recipes");
+var TableYear = (0, import_vue16.defineComponent)({
   name: "TableYear",
   props: {
     years: {
@@ -574,8 +622,8 @@ var TableYear = (0, import_vue14.defineComponent)({
       yearItemRoot,
       yearItemWrapper,
       shortcutLabelWrapper
-    } = (0, import_recipes7.tableYearSlotRecipe)();
-    const getYears = (0, import_vue14.computed)(() => {
+    } = (0, import_recipes8.tableYearSlotRecipe)();
+    const getYears = (0, import_vue16.computed)(() => {
       return chunk(props.years, 4);
     });
     function onNextButton() {
@@ -611,30 +659,30 @@ var TableYear = (0, import_vue14.defineComponent)({
     }
     __name(getMonthAttrs, "getMonthAttrs");
     return () => {
-      return (0, import_vue13.createVNode)("div", null, [(0, import_vue13.createVNode)("div", {
+      return (0, import_vue15.createVNode)("div", null, [(0, import_vue15.createVNode)("div", {
         "data-pixel-parts": "Header",
         "class": headerRoot
-      }, [(0, import_vue13.createVNode)(import_pixel3_button3.MpButton, {
+      }, [(0, import_vue15.createVNode)(import_pixel3_button3.MpButton, {
         "left-icon": "chevrons-left",
         "variant": "ghost",
         "size": "sm",
         "onClick": onPreviousButton
-      }, null), (0, import_vue13.createVNode)("button", {
+      }, null), (0, import_vue15.createVNode)("button", {
         "class": headerLabel
-      }, [props.headerLabel]), (0, import_vue13.createVNode)(import_pixel3_button3.MpButton, {
+      }, [props.headerLabel]), (0, import_vue15.createVNode)(import_pixel3_button3.MpButton, {
         "right-icon": "chevrons-right",
         "variant": "ghost",
         "size": "sm",
         "onClick": onNextButton
-      }, null)]), (0, import_vue13.createVNode)("div", {
+      }, null)]), (0, import_vue15.createVNode)("div", {
         "class": yearItemRoot
-      }, [getYears.value.map((data) => (0, import_vue13.createVNode)("div", {
+      }, [getYears.value.map((data) => (0, import_vue15.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", {
+      }, [data.map((year) => (0, import_vue15.createVNode)(YearItem, getMonthAttrs(year), {
+        default: () => [(0, import_vue15.createTextVNode)(" "), year, (0, import_vue15.createTextVNode)(" ")]
+      }))]))]), props.isShowShortcut && (0, import_vue15.createVNode)("div", {
         "class": shortcutLabelWrapper
-      }, [(0, import_vue13.createVNode)(import_pixel3_button3.MpButton, {
+      }, [(0, import_vue15.createVNode)(import_pixel3_button3.MpButton, {
         "variant": "ghost",
         "onClick": () => onSelectYear((/* @__PURE__ */ new Date()).getFullYear())
       }, {
@@ -648,11 +696,11 @@ var TableYear = (0, import_vue14.defineComponent)({
 var import_date_fns3 = require("date-fns");
 
 // src/composables/useCalendar.ts
-var import_vue15 = require("vue");
+var import_vue17 = require("vue");
 var import_date_fns2 = require("date-fns");
 function useCalendar(date, locale2) {
-  const currentDate = (0, import_vue15.ref)(isValidDate(date) ? date : /* @__PURE__ */ new Date());
-  const currentPanel = (0, import_vue15.ref)("date");
+  const currentDate = (0, import_vue17.ref)(isValidDate(date) ? date : /* @__PURE__ */ new Date());
+  const currentPanel = (0, import_vue17.ref)("date");
   const nextMonth = /* @__PURE__ */ __name(() => {
     currentDate.value = getNextMonth(currentDate.value);
   }, "nextMonth");
@@ -671,7 +719,7 @@ function useCalendar(date, locale2) {
   const changeMonth = /* @__PURE__ */ __name((month) => {
     currentDate.value = (0, import_date_fns2.setMonth)(currentDate.value, month);
   }, "changeMonth");
-  const getSplitDates = (0, import_vue15.computed)(() => {
+  const getSplitDates = (0, import_vue17.computed)(() => {
     return {
       day: currentDate.value.getDay(),
       month: currentDate.value.getMonth(),
@@ -679,7 +727,7 @@ function useCalendar(date, locale2) {
       monthLabel: locale2.value.months[currentDate.value.getMonth()]
     };
   });
-  const getDates = (0, import_vue15.computed)(() => {
+  const getDates = (0, import_vue17.computed)(() => {
     const {
       year,
       month
@@ -691,7 +739,7 @@ function useCalendar(date, locale2) {
     });
     return arr;
   });
-  const getMonths = (0, import_vue15.computed)(() => {
+  const getMonths = (0, import_vue17.computed)(() => {
     const monthsLocale = locale2.value.formatLocale.monthsShort || locale2.value.months;
     const months = monthsLocale.map((text, month) => {
       return {
@@ -701,7 +749,7 @@ function useCalendar(date, locale2) {
     });
     return months;
   });
-  const getYears = (0, import_vue15.computed)(() => {
+  const getYears = (0, import_vue17.computed)(() => {
     const {
       year
     } = getSplitDates.value;
@@ -712,7 +760,7 @@ function useCalendar(date, locale2) {
     }
     return years;
   });
-  const getLabel = (0, import_vue15.computed)(() => {
+  const getLabel = (0, import_vue17.computed)(() => {
     const {
       year,
       monthLabel
@@ -754,22 +802,22 @@ function useCalendar(date, locale2) {
 __name(useCalendar, "useCalendar");
 
 // src/composables/useCalendarRange.ts
-var import_vue16 = require("vue");
+var import_vue18 = require("vue");
 function useCalendarRange(props) {
   const leftCalendar = startOfMonth(/* @__PURE__ */ new Date());
   const rightCalendar = startOfMonth(getNextMonth(/* @__PURE__ */ new Date()));
-  const startDate = (0, import_vue16.ref)(props.modelValue[0]);
-  const endDate = (0, import_vue16.ref)(props.modelValue[1]);
-  const hoveredDate = (0, import_vue16.ref)();
-  const calendars = (0, import_vue16.ref)([leftCalendar, rightCalendar]);
-  const getCurrentDates = (0, import_vue16.computed)(() => {
+  const startDate = (0, import_vue18.ref)(props.modelValue[0]);
+  const endDate = (0, import_vue18.ref)(props.modelValue[1]);
+  const hoveredDate = (0, import_vue18.ref)();
+  const calendars = (0, import_vue18.ref)([leftCalendar, rightCalendar]);
+  const getCurrentDates = (0, import_vue18.computed)(() => {
     if (startDate.value && !endDate.value)
       return [startDate.value];
     if (startDate.value && endDate.value)
       return [startDate.value, endDate.value];
     return [];
   });
-  const calendarMinDiff = (0, import_vue16.computed)(() => {
+  const calendarMinDiff = (0, import_vue18.computed)(() => {
     const map = {
       date: 1,
       // type:date  min 1 month
@@ -780,7 +828,7 @@ function useCalendarRange(props) {
     };
     return map[props.type] || map.date;
   });
-  const calendarMaxDiff = (0, import_vue16.computed)(() => Infinity);
+  const calendarMaxDiff = (0, import_vue18.computed)(() => Infinity);
   function setStartDate(date) {
     startDate.value = date;
   }
@@ -870,6 +918,51 @@ function useCalendarRange(props) {
 __name(useCalendarRange, "useCalendarRange");
 
 // src/modules/date-picker.props.ts
+var timePanelProps = {
+  modelValue: {
+    type: Date
+  },
+  defaultDate: {
+    type: Date,
+    default() {
+      const date = /* @__PURE__ */ new Date();
+      date.setHours(0, 0, 0, 0);
+      return date;
+    }
+  },
+  isShowHour: {
+    type: Boolean,
+    default: true
+  },
+  isShowMinute: {
+    type: Boolean,
+    default: true
+  },
+  isShowSecond: {
+    type: Boolean,
+    default: true
+  },
+  hourStep: {
+    type: Number,
+    default: 1
+  },
+  minuteStep: {
+    type: Number,
+    default: 1
+  },
+  secondStep: {
+    type: Number,
+    default: 1
+  },
+  isUse12h: {
+    type: Boolean,
+    default: false
+  },
+  disabledTime: {
+    type: Function,
+    default: () => false
+  }
+};
 var calendarPanelProps = {
   modelValue: {
     type: Date
@@ -934,6 +1027,7 @@ var calendarPanelRangeProps = {
   }
 };
 var datePickerProps = {
+  ...timePanelProps,
   id: {
     type: String
   },
@@ -1060,8 +1154,8 @@ function getLocale(config) {
 __name(getLocale, "getLocale");
 
 // src/calendar-panel.tsx
-var import_recipes8 = require("@mekari/pixel3-styled-system/recipes");
-var CalendarPanel = (0, import_vue18.defineComponent)({
+var import_recipes9 = require("@mekari/pixel3-styled-system/recipes");
+var CalendarPanel = (0, import_vue20.defineComponent)({
   name: "CalendarPanel",
   props: calendarPanelProps,
   emits: ["update:modelValue", "mouseEnter", "mouseLeave", "updateCalendar"],
@@ -1071,7 +1165,7 @@ var CalendarPanel = (0, import_vue18.defineComponent)({
     const {
       locale: locale2
     } = useDatePickerContext();
-    const restValue = (0, import_vue18.ref)(props.modelValue);
+    const restValue = (0, import_vue20.ref)(props.modelValue);
     const {
       currentDate: currentPanelDate,
       currentPanel,
@@ -1190,31 +1284,31 @@ var CalendarPanel = (0, import_vue18.defineComponent)({
       }
     }
     __name(initCalendar, "initCalendar");
-    (0, import_vue18.watch)(() => props.modelValue, (newValue) => {
+    (0, import_vue20.watch)(() => props.modelValue, (newValue) => {
       if (newValue)
         restValue.value = newValue;
     }, {
       immediate: true
     });
-    (0, import_vue18.watch)(() => props.type, (newValue) => {
+    (0, import_vue20.watch)(() => props.type, (newValue) => {
       if (newValue)
         currentPanel.value = newValue;
     }, {
       immediate: true
     });
-    (0, import_vue18.watch)(() => currentPanelDate.value, (newValue) => {
+    (0, import_vue20.watch)(() => currentPanelDate.value, (newValue) => {
       if (newValue) {
         emit("updateCalendar", newValue);
       }
     });
-    (0, import_vue18.watch)(() => props.calendar, () => {
+    (0, import_vue20.watch)(() => props.calendar, () => {
       initCalendar();
     }, {
       immediate: true
     });
     return () => {
       if (currentPanel.value === "date") {
-        return (0, import_vue17.createVNode)(TableDate, {
+        return (0, import_vue19.createVNode)(TableDate, {
           "days": locale2.value.days,
           "dates": getDates.value,
           "headerLabel": getLabel.value,
@@ -1231,7 +1325,7 @@ var CalendarPanel = (0, import_vue18.defineComponent)({
         }, null);
       }
       if (currentPanel.value === "month") {
-        return (0, import_vue17.createVNode)(TableMonth, {
+        return (0, import_vue19.createVNode)(TableMonth, {
           "calendar": currentPanelDate.value,
           "months": getMonths.value,
           "headerLabel": getLabel.value,
@@ -1247,7 +1341,7 @@ var CalendarPanel = (0, import_vue18.defineComponent)({
         }, null);
       }
       if (currentPanel.value === "year") {
-        return (0, import_vue17.createVNode)(TableYear, {
+        return (0, import_vue19.createVNode)(TableYear, {
           "years": getYears.value,
           "headerLabel": getLabel.value,
           "shortcutLabel": locale2.value.thisYearText,
@@ -1263,7 +1357,7 @@ var CalendarPanel = (0, import_vue18.defineComponent)({
     };
   }
 });
-var CalendarPanelRange = (0, import_vue18.defineComponent)({
+var CalendarPanelRange = (0, import_vue20.defineComponent)({
   name: "CalendarPanelRange",
   props: calendarPanelRangeProps,
   emits: ["update:modelValue"],
@@ -1470,7 +1564,7 @@ var CalendarPanelRange = (0, import_vue18.defineComponent)({
     __name(getYearStatus, "getYearStatus");
     return () => {
       const isWeekAndBiweek = props.type === "week" || props.type === "biweek";
-      const classes = isWeekAndBiweek ? "" : (0, import_recipes8.calendarPanelRangeRecipe)();
+      const classes = isWeekAndBiweek ? "" : (0, import_recipes9.calendarPanelRangeRecipe)();
       const calendarPanelAttrs = {
         isRange: true,
         type: props.type,
@@ -1483,51 +1577,305 @@ var CalendarPanelRange = (0, import_vue18.defineComponent)({
         onMouseEnter: (date) => setHoveredDate(date),
         onMouseLeave: () => setHoveredDate(void 0)
       };
-      const leftNode = (0, import_vue17.createVNode)(CalendarPanel, (0, import_vue17.mergeProps)({
+      const leftNode = (0, import_vue19.createVNode)(CalendarPanel, (0, import_vue19.mergeProps)({
         "data-pixel-parts": "CalendarPanelLeft"
       }, calendarPanelAttrs, {
         "onUpdateCalendar": (value) => updateStartCalendar(value),
         "calendar": calendars.value[0]
       }), null);
-      const rightNode = props.isInline ? "" : (0, import_vue17.createVNode)(CalendarPanel, (0, import_vue17.mergeProps)({
+      const rightNode = props.isInline ? "" : (0, import_vue19.createVNode)(CalendarPanel, (0, import_vue19.mergeProps)({
         "data-pixel-parts": "CalendarPanelRight"
       }, calendarPanelAttrs, {
         "style": "margin-left: 16px;",
         "onUpdateCalendar": (value) => updateEndCalendar(value),
         "calendar": calendars.value[1]
       }), null);
-      const weekAndBiweekNode = (0, import_vue17.createVNode)(CalendarPanel, (0, import_vue17.mergeProps)({
+      const weekAndBiweekNode = (0, import_vue19.createVNode)(CalendarPanel, (0, import_vue19.mergeProps)({
         "data-pixel-parts": "CalendarPanel"
       }, calendarPanelAttrs, {
         "onUpdateCalendar": (value) => updateStartCalendar(value),
         "calendar": props.modelValue[0],
         "type": "date"
       }), null);
-      return (0, import_vue17.createVNode)("div", {
+      return (0, import_vue19.createVNode)("div", {
         "class": classes
       }, [isWeekAndBiweek ? weekAndBiweekNode : [leftNode, rightNode]]);
     };
   }
 });
 
+// src/time-panel.tsx
+var import_vue22 = require("vue");
+var import_vue23 = require("vue");
+var import_css = require("@mekari/pixel3-styled-system/css");
+
+// src/composables/useTime.ts
+var import_vue21 = require("vue");
+function useTime(props) {
+  const innerValue = (0, import_vue21.ref)(props.modelValue);
+  const innerDateValue = (0, import_vue21.computed)(() => isValidDate(props.modelValue) ? props.modelValue : props.defaultDate);
+  const columns = (0, import_vue21.computed)(() => {
+    const cols = [];
+    if (props.isShowHour)
+      cols.push({
+        type: "hour",
+        list: getHoursList()
+      });
+    if (props.isShowMinute)
+      cols.push({
+        type: "minute",
+        list: getMinutesList()
+      });
+    if (props.isShowSecond)
+      cols.push({
+        type: "second",
+        list: getSecondsList()
+      });
+    if (props.isUse12h)
+      cols.push({
+        type: "ampm",
+        list: getAMPMList()
+      });
+    return cols.filter((v) => v.list.length > 0);
+  });
+  function getHoursList() {
+    return generateOptions(props.isUse12h ? 12 : 24, props.hourStep).map((num) => {
+      const innerDate = new Date(innerDateValue.value);
+      let text = padNumber(num);
+      if (props.isUse12h) {
+        if (num === 0) {
+          text = "12";
+        }
+        if (innerDate.getHours() >= 12) {
+          num += 12;
+        }
+      }
+      const value = innerDate.setHours(num);
+      return {
+        value,
+        text
+      };
+    });
+  }
+  __name(getHoursList, "getHoursList");
+  function getMinutesList() {
+    return generateOptions(60, props.minuteStep).map((num) => {
+      const value = new Date(innerDateValue.value).setMinutes(num);
+      return {
+        value,
+        text: padNumber(num)
+      };
+    });
+  }
+  __name(getMinutesList, "getMinutesList");
+  function getSecondsList() {
+    return generateOptions(60, props.secondStep).map((num) => {
+      const value = new Date(innerDateValue.value).setSeconds(num);
+      return {
+        value,
+        text: padNumber(num)
+      };
+    });
+  }
+  __name(getSecondsList, "getSecondsList");
+  function getAMPMList() {
+    return ["AM", "PM"].map((text, i) => {
+      const innerDate = new Date(innerDateValue.value);
+      const value = innerDate.setHours(innerDate.getHours() % 12 + i * 12);
+      return {
+        text,
+        value
+      };
+    });
+  }
+  __name(getAMPMList, "getAMPMList");
+  function isDisabledTime(value) {
+    return props.disabledTime(new Date(value));
+  }
+  __name(isDisabledTime, "isDisabledTime");
+  function isDisabledHour(date) {
+    const value = new Date(date);
+    return isDisabledTime(value) && isDisabledTime(value.setMinutes(0, 0, 0)) && isDisabledTime(value.setMinutes(59, 59, 999));
+  }
+  __name(isDisabledHour, "isDisabledHour");
+  function isDisabledMinute(date) {
+    const value = new Date(date);
+    return isDisabledTime(value) && isDisabledTime(value.setSeconds(0, 0)) && isDisabledTime(value.setSeconds(59, 999));
+  }
+  __name(isDisabledMinute, "isDisabledMinute");
+  function isDisabledAMPM(date) {
+    const value = new Date(date);
+    const minHour = value.getHours() < 12 ? 0 : 12;
+    const maxHour = minHour + 11;
+    return isDisabledTime(value) && isDisabledTime(value.setHours(minHour, 0, 0, 0)) && isDisabledTime(value.setHours(maxHour, 59, 59, 999));
+  }
+  __name(isDisabledAMPM, "isDisabledAMPM");
+  function isDisabled(date, type) {
+    if (type === "hour") {
+      return isDisabledHour(date);
+    }
+    if (type === "minute") {
+      return isDisabledMinute(date);
+    }
+    if (type === "ampm") {
+      return isDisabledAMPM(date);
+    }
+    return isDisabledTime(date);
+  }
+  __name(isDisabled, "isDisabled");
+  return {
+    innerValue,
+    columns,
+    getHoursList,
+    getMinutesList,
+    getSecondsList,
+    getAMPMList,
+    isDisabledTime,
+    isDisabledHour,
+    isDisabledMinute,
+    isDisabledAMPM,
+    isDisabled
+  };
+}
+__name(useTime, "useTime");
+
+// src/utils/dom.ts
+function getScrollParent(node, until = document.body) {
+  if (!node || node === until) {
+    return null;
+  }
+  const style = /* @__PURE__ */ __name((value, prop) => getComputedStyle(value, null).getPropertyValue(prop), "style");
+  const regex = /(auto|scroll)/;
+  const scroll = regex.test(style(node, "overflow") + style(node, "overflow-y") + style(node, "overflow-x"));
+  return scroll ? node : getScrollParent(node.parentElement, until);
+}
+__name(getScrollParent, "getScrollParent");
+function scrollTo(element, to, duration = 0) {
+  if (duration <= 0) {
+    requestAnimationFrame(() => {
+      element.scrollTop = to;
+    });
+    return;
+  }
+  const difference = to - element.scrollTop;
+  const tick = difference / duration * 10;
+  requestAnimationFrame(() => {
+    const scrollTop = element.scrollTop + tick;
+    if (scrollTop >= to) {
+      element.scrollTop = to;
+      return;
+    }
+    element.scrollTop = scrollTop;
+    scrollTo(element, to, duration - 10);
+  });
+}
+__name(scrollTo, "scrollTo");
+
+// src/time-panel.tsx
+var TimePanel = (0, import_vue23.defineComponent)({
+  name: "MpTimePanel",
+  props: timePanelProps,
+  emits: ["update:modelValue"],
+  setup(props, {
+    emit
+  }) {
+    const columnNode = (0, import_vue23.ref)();
+    const {
+      innerValue,
+      columns,
+      isDisabled
+    } = useTime(props);
+    function handleSelectTime(col, item) {
+      const date = new Date(item.value);
+      innerValue.value = date;
+      emit("update:modelValue", date);
+      (0, import_vue23.nextTick)(() => handleScrollToSelected());
+    }
+    __name(handleSelectTime, "handleSelectTime");
+    function getTimeStatus(value, type) {
+      var _a;
+      const cellDate = new Date(value);
+      if (isDisabled(value, type)) {
+        return "disabled";
+      }
+      if (cellDate.getTime() === ((_a = innerValue.value) == null ? void 0 : _a.getTime()) && isValidDate(innerValue.value)) {
+        return "selected";
+      }
+      return "default";
+    }
+    __name(getTimeStatus, "getTimeStatus");
+    function getTimeAttrs(value, type) {
+      const status = getTimeStatus(value, type);
+      return {
+        status,
+        isDisabled: status === "disabled" || void 0,
+        "data-selected": status === "selected" || void 0
+      };
+    }
+    __name(getTimeAttrs, "getTimeAttrs");
+    function handleScrollToSelected(duration = 0) {
+      var _a;
+      const elements = (_a = columnNode.value) == null ? void 0 : _a.querySelectorAll("[data-selected=true]");
+      elements == null ? void 0 : elements.forEach((element) => {
+        const scrollElement = getScrollParent(element, columnNode.value);
+        if (scrollElement) {
+          const to = element.offsetTop - 10;
+          scrollTo(scrollElement, to, duration);
+        }
+      });
+    }
+    __name(handleScrollToSelected, "handleScrollToSelected");
+    (0, import_vue23.onMounted)(() => {
+      (0, import_vue23.nextTick)(() => handleScrollToSelected(0));
+    });
+    return () => {
+      return (0, import_vue22.createVNode)("div", {
+        "ref": columnNode,
+        "class": (0, import_css.css)({
+          display: "flex",
+          flexDirection: "row",
+          gap: "0.5"
+        })
+      }, [columns.value.map((col, colIndex) => (0, import_vue22.createVNode)("ul", {
+        "data-index": colIndex,
+        "data-type": col.type,
+        "class": (0, import_css.css)({
+          display: "flex",
+          flexDirection: "column",
+          height: "224px",
+          overflowY: "scroll",
+          overflowX: "hidden",
+          py: "10px"
+        })
+      }, [col.list.map((item, itemIndex) => (0, import_vue22.createVNode)("li", {
+        "onClick": () => handleSelectTime(col, item)
+      }, [(0, import_vue22.createVNode)(TimeItem, (0, import_vue22.mergeProps)({
+        "data-index": itemIndex
+      }, getTimeAttrs(item.value, col.type)), {
+        default: () => [item.text]
+      })]))]))]);
+    };
+  }
+});
+
 // src/modules/date-picker.hooks.ts
-var import_vue19 = require("vue");
+var import_vue24 = require("vue");
 var import_pixel3_utils2 = require("@mekari/pixel3-utils");
 var import_date_format_parse = require("date-format-parse");
 function useDatePicker(props, emit) {
   const getId = props.id || (0, import_pixel3_utils2.getUniqueId)("", "datepicker").value;
-  const currentLabel = (0, import_vue19.ref)("");
-  const isOutside = (0, import_vue19.ref)(true);
-  const isPopoverOpen = (0, import_vue19.ref)(false);
-  const isInnerInvalid = (0, import_vue19.ref)(false);
-  const userInput = (0, import_vue19.ref)(null);
-  const innerValueDate = (0, import_vue19.ref)();
-  const isUseRange = (0, import_vue19.computed)(() => {
+  const currentLabel = (0, import_vue24.ref)("");
+  const isOutside = (0, import_vue24.ref)(true);
+  const isPopoverOpen = (0, import_vue24.ref)(false);
+  const isInnerInvalid = (0, import_vue24.ref)(false);
+  const userInput = (0, import_vue24.ref)(null);
+  const innerValueDate = (0, import_vue24.ref)();
+  const isUseRange = (0, import_vue24.computed)(() => {
     if (props.isRange || props.type === "biweek" || props.type === "week")
       return true;
     return false;
   });
-  const innerFormat = (0, import_vue19.computed)(() => {
+  const innerFormat = (0, import_vue24.computed)(() => {
     const format2 = {
       date: "DD-MM-YYYY",
       datetime: "DD-MM-YYYY HH:mm:ss",
@@ -1539,7 +1887,7 @@ function useDatePicker(props, emit) {
     };
     return props.format || format2[props.type] || format2.date;
   });
-  const innerValue = (0, import_vue19.computed)(() => {
+  const innerValue = (0, import_vue24.computed)(() => {
     if (isUseRange.value) {
       if (isValidRangeDate(props.modelValue)) {
         const startDate = valueToDate(props.modelValue[0]);
@@ -1550,7 +1898,7 @@ function useDatePicker(props, emit) {
     }
     return valueToDate(props.modelValue);
   });
-  const text = (0, import_vue19.computed)(() => {
+  const text = (0, import_vue24.computed)(() => {
     if (userInput.value !== null)
       return userInput.value;
     if (!innerValue.value)
@@ -1567,7 +1915,7 @@ function useDatePicker(props, emit) {
     }
     return formatDate(innerValue.value);
   });
-  const locale2 = (0, import_vue19.computed)(() => {
+  const locale2 = (0, import_vue24.computed)(() => {
     if (isObject(props.lang)) {
       return getLocale(props.lang);
     }
@@ -1626,7 +1974,8 @@ function useDatePicker(props, emit) {
       }
       if (isValidValueAndNotDisabled(date)) {
         innerValueDate.value = date;
-        (0, import_vue19.nextTick)(() => {
+        onEmitModelValue(innerValueDate.value);
+        (0, import_vue24.nextTick)(() => {
           isOutside.value = true;
           isInnerInvalid.value = false;
           onBlur();
@@ -1649,7 +1998,9 @@ function useDatePicker(props, emit) {
     } else {
       emit("update:modelValue", dateToValue(new Date(value)));
     }
-    (0, import_vue19.nextTick)(() => {
+    if (props.type === "time")
+      return;
+    (0, import_vue24.nextTick)(() => {
       isOutside.value = true;
       onBlur();
     });
@@ -1751,12 +2102,12 @@ function useDatePicker(props, emit) {
 __name(useDatePicker, "useDatePicker");
 
 // src/date-picker.tsx
-var import_recipes9 = require("@mekari/pixel3-styled-system/recipes");
+var import_recipes10 = require("@mekari/pixel3-styled-system/recipes");
 function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, import_vue20.isVNode)(s);
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, import_vue25.isVNode)(s);
 }
 __name(_isSlot, "_isSlot");
-var MpDatePicker = (0, import_vue21.defineComponent)({
+var MpDatePicker = (0, import_vue26.defineComponent)({
   name: "MpDatePicker",
   props: datePickerProps,
   emits: ["update:modelValue", "error"],
@@ -1776,7 +2127,8 @@ var MpDatePicker = (0, import_vue21.defineComponent)({
       onBlur,
       onClear,
       onInputChange,
-      onEmitModelValue
+      onEmitModelValue,
+      handleForceFocusToInput
     } = useDatePicker(props, emit);
     DatePickerProvider({
       rootProps: props,
@@ -1786,9 +2138,11 @@ var MpDatePicker = (0, import_vue21.defineComponent)({
       const {
         root,
         popoverContent
-      } = (0, import_recipes9.datePickerSlotRecipe)();
-      const inputNode = (0, import_vue20.createVNode)(import_pixel3_input.MpInputGroup, null, {
-        default: () => [(0, import_vue20.createVNode)(import_pixel3_input.MpInput, {
+      } = (0, import_recipes10.datePickerSlotRecipe)({
+        variant: props.type === "time" ? "time" : "date"
+      });
+      const inputNode = (0, import_vue25.createVNode)(import_pixel3_input.MpInputGroup, null, {
+        default: () => [(0, import_vue25.createVNode)(import_pixel3_input.MpInput, {
           "id": getId,
           "placeholder": props.placeholder,
           "isClearable": props.isClearable,
@@ -1807,10 +2161,12 @@ var MpDatePicker = (0, import_vue21.defineComponent)({
             const target = e.target;
             target.focus();
           }
-        }, null), (0, import_vue20.createVNode)(import_pixel3_input.MpInputRightAddon, null, {
-          default: () => [(0, import_vue20.createVNode)(import_pixel3_icon.MpIcon, {
-            "name": "calendar"
-          }, null)]
+        }, null), (0, import_vue25.createVNode)(import_pixel3_input.MpInputRightAddon, null, {
+          default: () => [(0, import_vue25.createVNode)("div", {
+            "onClick": () => handleForceFocusToInput()
+          }, [(0, import_vue25.createVNode)(import_pixel3_icon.MpIcon, {
+            "name": props.type === "time" ? "time" : "calendar"
+          }, null)])]
         })]
       });
       const calendarPanelAttrs = {
@@ -1821,21 +2177,34 @@ var MpDatePicker = (0, import_vue21.defineComponent)({
         disabledMonth: props.disabledMonth,
         disabledYear: props.disabledYear
       };
-      const panelNode = isUseRange.value ? (0, import_vue20.createVNode)(CalendarPanelRange, (0, import_vue20.mergeProps)(calendarPanelAttrs, {
+      const datePanelNode = isUseRange.value ? (0, import_vue25.createVNode)(CalendarPanelRange, (0, import_vue25.mergeProps)(calendarPanelAttrs, {
         "modelValue": innerValue.value
-      }), null) : (0, import_vue20.createVNode)(CalendarPanel, (0, import_vue20.mergeProps)(calendarPanelAttrs, {
+      }), null) : (0, import_vue25.createVNode)(CalendarPanel, (0, import_vue25.mergeProps)(calendarPanelAttrs, {
         "modelValue": innerValue.value
       }), null);
-      const withPopover = (0, import_vue20.createVNode)(import_pixel3_popover.MpPopover, {
+      const timePanelNode = (0, import_vue25.createVNode)(TimePanel, {
+        "modelValue": innerValue.value,
+        "onUpdate:modelValue": onEmitModelValue,
+        "disabledTime": props.disabledTime,
+        "isShowHour": props.isShowHour,
+        "isShowMinute": props.isShowMinute,
+        "isShowSecond": props.isShowSecond,
+        "hourStep": props.hourStep,
+        "minuteStep": props.minuteStep,
+        "secondStep": props.minuteStep,
+        "isUse12h": props.isUse12h
+      }, null);
+      const panelNode = props.type === "time" ? timePanelNode : datePanelNode;
+      const withPopover = (0, import_vue25.createVNode)(import_pixel3_popover.MpPopover, {
         "id": getId,
         "isManual": true,
         "isOpen": isPopoverOpen.value,
         "isKeepAlive": props.isKeepAlive,
         "usePortal": props.usePortal
       }, {
-        default: () => [(0, import_vue20.createVNode)(import_pixel3_popover.MpPopoverTrigger, null, _isSlot(inputNode) ? inputNode : {
+        default: () => [(0, import_vue25.createVNode)(import_pixel3_popover.MpPopoverTrigger, null, _isSlot(inputNode) ? inputNode : {
           default: () => [inputNode]
-        }), (0, import_vue20.createVNode)(import_pixel3_popover.MpPopoverContent, {
+        }), (0, import_vue25.createVNode)(import_pixel3_popover.MpPopoverContent, {
           "class": popoverContent,
           "style": {
             width: props.isRange ? "590px" : ""
@@ -1846,7 +2215,7 @@ var MpDatePicker = (0, import_vue21.defineComponent)({
           default: () => [panelNode]
         })]
       });
-      return (0, import_vue20.createVNode)("div", {
+      return (0, import_vue25.createVNode)("div", {
         "class": root,
         "onMouseenter": () => isOutside.value = false,
         "onMouseleave": () => isOutside.value = true