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

package/dist/{chunk-EYTJIMSM.mjs → chunk-26K3LMTE.mjs}

@@ -1,16 +1,19 @@
+import {
+  useDatePicker
+} from "./chunk-P7JOEQIL.mjs";
 import {
   CalendarPanel,
   CalendarPanelRange
-} from "./chunk-KTADGCWP.mjs";
+} from "./chunk-FPRON3EM.mjs";
+import {
+  TimePanel
+} from "./chunk-MO5D3TCF.mjs";
 import {
   datePickerProps
-} from "./chunk-XQLKPPRN.mjs";
+} from "./chunk-5VRVDIXN.mjs";
 import {
   DatePickerProvider
 } from "./chunk-VACMCDOZ.mjs";
-import {
-  useDatePicker
-} from "./chunk-3RCUXNBN.mjs";
 import {
   __name
 } from "./chunk-QZ7VFGWC.mjs";
@@ -46,7 +49,8 @@ var MpDatePicker = defineComponent({
       onBlur,
       onClear,
       onInputChange,
-      onEmitModelValue
+      onEmitModelValue,
+      handleForceFocusToInput
     } = useDatePicker(props, emit);
     DatePickerProvider({
       rootProps: props,
@@ -56,7 +60,9 @@ var MpDatePicker = defineComponent({
       const {
         root,
         popoverContent
-      } = datePickerSlotRecipe();
+      } = datePickerSlotRecipe({
+        variant: props.type === "time" ? "time" : "date"
+      });
       const inputNode = _createVNode(MpInputGroup, null, {
         default: () => [_createVNode(MpInput, {
           "id": getId,
@@ -78,9 +84,11 @@ var MpDatePicker = defineComponent({
             target.focus();
           }
         }, null), _createVNode(MpInputRightAddon, null, {
-          default: () => [_createVNode(MpIcon, {
-            "name": "calendar"
-          }, null)]
+          default: () => [_createVNode("div", {
+            "onClick": () => handleForceFocusToInput()
+          }, [_createVNode(MpIcon, {
+            "name": props.type === "time" ? "time" : "calendar"
+          }, null)])]
         })]
       });
       const calendarPanelAttrs = {
@@ -91,11 +99,24 @@ var MpDatePicker = defineComponent({
         disabledMonth: props.disabledMonth,
         disabledYear: props.disabledYear
       };
-      const panelNode = isUseRange.value ? _createVNode(CalendarPanelRange, _mergeProps(calendarPanelAttrs, {
+      const datePanelNode = isUseRange.value ? _createVNode(CalendarPanelRange, _mergeProps(calendarPanelAttrs, {
         "modelValue": innerValue.value
       }), null) : _createVNode(CalendarPanel, _mergeProps(calendarPanelAttrs, {
         "modelValue": innerValue.value
       }), null);
+      const timePanelNode = _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 = _createVNode(MpPopover, {
         "id": getId,
         "isManual": true,

package/dist/{chunk-5PISTT2K.mjs → chunk-5MFHZK63.mjs}

@@ -1,12 +1,12 @@
 import {
   Month
 } from "./chunk-3VROFGJH.mjs";
-import {
-  createDate
-} from "./chunk-26Y3AVJW.mjs";
 import {
   chunk
-} from "./chunk-NIUQXHGQ.mjs";
+} from "./chunk-E5BRVBZ2.mjs";
+import {
+  createDate
+} from "./chunk-U7O52D6B.mjs";
 import {
   __name
 } from "./chunk-QZ7VFGWC.mjs";

package/dist/{chunk-XQLKPPRN.mjs → chunk-5VRVDIXN.mjs}

@@ -1,4 +1,49 @@
 // 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
@@ -63,6 +108,7 @@ var calendarPanelRangeProps = {
   }
 };
 var datePickerProps = {
+  ...timePanelProps,
   id: {
     type: String
   },
@@ -153,6 +199,7 @@ var datePickerProps = {
 };
 
 export {
+  timePanelProps,
   calendarPanelProps,
   calendarPanelRangeProps,
   datePickerProps

package/dist/{chunk-NU6HYEPT.mjs → chunk-64EO4HV7.mjs}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-AGAA7XTC.mjs";
 import {
   chunk
-} from "./chunk-NIUQXHGQ.mjs";
+} from "./chunk-E5BRVBZ2.mjs";
 import {
   __name
 } from "./chunk-QZ7VFGWC.mjs";

package/dist/{chunk-ZS4JQRK3.mjs → chunk-7CLF67SP.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-IZITNJFI.mjs";
 import {
   assign
-} from "./chunk-NIUQXHGQ.mjs";
+} from "./chunk-E5BRVBZ2.mjs";
 import {
   __name
 } from "./chunk-QZ7VFGWC.mjs";

package/dist/{chunk-NIUQXHGQ.mjs → chunk-E5BRVBZ2.mjs}

@@ -47,10 +47,28 @@ 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");
 
 export {
   chunk,
   isObject,
   pick,
-  assign
+  assign,
+  padNumber,
+  generateOptions
 };

package/dist/{chunk-KTADGCWP.mjs → chunk-FPRON3EM.mjs}

@@ -1,34 +1,34 @@
 import {
-  calendarPanelProps,
-  calendarPanelRangeProps
-} from "./chunk-XQLKPPRN.mjs";
+  getLocale
+} from "./chunk-7CLF67SP.mjs";
 import {
   TableDate
-} from "./chunk-NU6HYEPT.mjs";
+} from "./chunk-64EO4HV7.mjs";
 import {
   TableMonth
-} from "./chunk-5PISTT2K.mjs";
+} from "./chunk-5MFHZK63.mjs";
 import {
   TableYear
-} from "./chunk-HJ4V3PM6.mjs";
+} from "./chunk-O43S64IA.mjs";
+import {
+  calendarPanelProps,
+  calendarPanelRangeProps
+} from "./chunk-5VRVDIXN.mjs";
 import {
   useCalendar
-} from "./chunk-NVULZQVI.mjs";
+} from "./chunk-OMV7LXBW.mjs";
 import {
   useCalendarRange
-} from "./chunk-JZ2KFYWF.mjs";
-import {
-  useDatePickerContext
-} from "./chunk-VACMCDOZ.mjs";
+} from "./chunk-WK62QUOT.mjs";
 import {
   addDays,
   createDate,
   isDateBetween,
   startOfWeek
-} from "./chunk-26Y3AVJW.mjs";
+} from "./chunk-U7O52D6B.mjs";
 import {
-  getLocale
-} from "./chunk-ZS4JQRK3.mjs";
+  useDatePickerContext
+} from "./chunk-VACMCDOZ.mjs";
 import {
   __name
 } from "./chunk-QZ7VFGWC.mjs";

package/dist/chunk-IRNTTSB7.mjs

@@ -0,0 +1,144 @@
+import {
+  generateOptions,
+  padNumber
+} from "./chunk-E5BRVBZ2.mjs";
+import {
+  isValidDate
+} from "./chunk-U7O52D6B.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/composables/useTime.ts
+import { computed, ref } from "vue";
+function useTime(props) {
+  const innerValue = ref(props.modelValue);
+  const innerDateValue = computed(() => isValidDate(props.modelValue) ? props.modelValue : props.defaultDate);
+  const columns = 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");
+
+export {
+  useTime
+};

package/dist/chunk-KTYQJMW4.mjs

@@ -0,0 +1,35 @@
+// src/components/parts/time.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { timeItemRecipe } from "@mekari/pixel3-styled-system/recipes";
+var TimeItem = defineComponent({
+  name: "TimeItem",
+  props: {
+    status: {
+      type: String,
+      default: "default"
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      const classes = timeItemRecipe({
+        status: props.status
+      });
+      return _createVNode("button", {
+        "disabled": props.isDisabled,
+        "data-status": props.status,
+        "class": classes
+      }, [slots.default()]);
+    };
+  }
+});
+
+export {
+  TimeItem
+};

package/dist/chunk-MO5D3TCF.mjs

@@ -0,0 +1,113 @@
+import {
+  getScrollParent,
+  scrollTo
+} from "./chunk-OYJNIILC.mjs";
+import {
+  timePanelProps
+} from "./chunk-5VRVDIXN.mjs";
+import {
+  TimeItem
+} from "./chunk-KTYQJMW4.mjs";
+import {
+  useTime
+} from "./chunk-IRNTTSB7.mjs";
+import {
+  isValidDate
+} from "./chunk-U7O52D6B.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/time-panel.tsx
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { defineComponent, nextTick, ref, onMounted } from "vue";
+import { css } from "@mekari/pixel3-styled-system/css";
+var TimePanel = defineComponent({
+  name: "MpTimePanel",
+  props: timePanelProps,
+  emits: ["update:modelValue"],
+  setup(props, {
+    emit
+  }) {
+    const columnNode = ref();
+    const {
+      innerValue,
+      columns,
+      isDisabled
+    } = useTime(props);
+    function handleSelectTime(col, item) {
+      const date = new Date(item.value);
+      innerValue.value = date;
+      emit("update:modelValue", date);
+      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");
+    onMounted(() => {
+      nextTick(() => handleScrollToSelected(0));
+    });
+    return () => {
+      return _createVNode("div", {
+        "ref": columnNode,
+        "class": css({
+          display: "flex",
+          flexDirection: "row",
+          gap: "0.5"
+        })
+      }, [columns.value.map((col, colIndex) => _createVNode("ul", {
+        "data-index": colIndex,
+        "data-type": col.type,
+        "class": css({
+          display: "flex",
+          flexDirection: "column",
+          height: "224px",
+          overflowY: "scroll",
+          overflowX: "hidden",
+          py: "10px"
+        })
+      }, [col.list.map((item, itemIndex) => _createVNode("li", {
+        "onClick": () => handleSelectTime(col, item)
+      }, [_createVNode(TimeItem, _mergeProps({
+        "data-index": itemIndex
+      }, getTimeAttrs(item.value, col.type)), {
+        default: () => [item.text]
+      })]))]))]);
+    };
+  }
+});
+
+export {
+  TimePanel
+};

package/dist/{chunk-HJ4V3PM6.mjs → chunk-O43S64IA.mjs}

@@ -1,12 +1,12 @@
 import {
   YearItem
 } from "./chunk-EQWT6VDG.mjs";
-import {
-  createDate
-} from "./chunk-26Y3AVJW.mjs";
 import {
   chunk
-} from "./chunk-NIUQXHGQ.mjs";
+} from "./chunk-E5BRVBZ2.mjs";
+import {
+  createDate
+} from "./chunk-U7O52D6B.mjs";
 import {
   __name
 } from "./chunk-QZ7VFGWC.mjs";

package/dist/{chunk-NVULZQVI.mjs → chunk-OMV7LXBW.mjs}

@@ -3,7 +3,7 @@ import {
   getNextMonth,
   getPreviousMonth,
   isValidDate
-} from "./chunk-26Y3AVJW.mjs";
+} from "./chunk-U7O52D6B.mjs";
 import {
   __name
 } from "./chunk-QZ7VFGWC.mjs";

package/dist/chunk-OYJNIILC.mjs

@@ -0,0 +1,40 @@
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// 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");
+
+export {
+  getScrollParent,
+  scrollTo
+};

package/dist/{chunk-3RCUXNBN.mjs → chunk-P7JOEQIL.mjs}

@@ -1,13 +1,13 @@
-import {
-  isValidDate,
-  isValidRangeDate
-} from "./chunk-26Y3AVJW.mjs";
 import {
   getLocale
-} from "./chunk-ZS4JQRK3.mjs";
+} from "./chunk-7CLF67SP.mjs";
 import {
   isObject
-} from "./chunk-NIUQXHGQ.mjs";
+} from "./chunk-E5BRVBZ2.mjs";
+import {
+  isValidDate,
+  isValidRangeDate
+} from "./chunk-U7O52D6B.mjs";
 import {
   __name
 } from "./chunk-QZ7VFGWC.mjs";
@@ -128,6 +128,7 @@ function useDatePicker(props, emit) {
       }
       if (isValidValueAndNotDisabled(date)) {
         innerValueDate.value = date;
+        onEmitModelValue(innerValueDate.value);
         nextTick(() => {
           isOutside.value = true;
           isInnerInvalid.value = false;
@@ -151,6 +152,8 @@ function useDatePicker(props, emit) {
     } else {
       emit("update:modelValue", dateToValue(new Date(value)));
     }
+    if (props.type === "time")
+      return;
     nextTick(() => {
       isOutside.value = true;
       onBlur();

package/dist/{chunk-26Y3AVJW.mjs → chunk-U7O52D6B.mjs}

@@ -98,6 +98,17 @@ function isDateBetween(date, min, max) {
   return _date.getTime() >= _min.getTime() && _date.getTime() <= _max.getTime();
 }
 __name(isDateBetween, "isDateBetween");
+function getValidDate(value, ...backup) {
+  const date = new Date(value);
+  if (isValidDate(date)) {
+    return date;
+  }
+  if (backup.length) {
+    return getValidDate(backup[0], ...backup.slice(1));
+  }
+  return /* @__PURE__ */ new Date();
+}
+__name(getValidDate, "getValidDate");
 
 export {
   createDate,
@@ -111,5 +122,6 @@ export {
   getNextMonth,
   getPreviousMonth,
   addDays,
-  isDateBetween
+  isDateBetween,
+  getValidDate
 };