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

package/dist/time-panel.js

@@ -0,0 +1,665 @@
+"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/time-panel.tsx
+var time_panel_exports = {};
+__export(time_panel_exports, {
+  TimePanel: () => TimePanel
+});
+module.exports = __toCommonJS(time_panel_exports);
+var import_vue12 = require("vue");
+var import_vue13 = require("vue");
+
+// 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/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/time-panel.tsx
+var import_css = require("@mekari/pixel3-styled-system/css");
+
+// 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
+  },
+  defaultValue: {
+    type: Date
+  },
+  type: {
+    type: String,
+    default: "date"
+  },
+  calendar: {
+    type: Date
+  },
+  isRange: {
+    type: Boolean,
+    default: false
+  },
+  isInline: {
+    type: Boolean,
+    default: false
+  },
+  isShowShortcut: {
+    type: Boolean,
+    default: true
+  },
+  disabledDate: {
+    type: Function,
+    default: () => {
+    }
+  },
+  disabledMonth: {
+    type: Function,
+    default: () => {
+    }
+  },
+  disabledYear: {
+    type: Function,
+    default: () => {
+    }
+  },
+  getDateStatus: {
+    type: Function,
+    default: void 0
+  },
+  getMonthStatus: {
+    type: Function,
+    default: void 0
+  },
+  getYearStatus: {
+    type: Function,
+    default: void 0
+  },
+  isHideNotThisMonthDate: {
+    type: Boolean
+  }
+};
+var calendarPanelRangeProps = {
+  ...calendarPanelProps,
+  modelValue: {
+    type: Array
+  }
+};
+var datePickerProps = {
+  ...timePanelProps,
+  id: {
+    type: String
+  },
+  modelValue: {
+    type: [String, Number, Date, Array]
+  },
+  type: calendarPanelProps.type,
+  valueType: {
+    type: String,
+    default: "date"
+  },
+  format: {
+    type: String
+  },
+  rangeSeparator: {
+    type: String,
+    default: " - "
+  },
+  placeholder: {
+    type: String,
+    default: ""
+  },
+  errorMessage: {
+    type: String,
+    default: "Format tanggal/waktu salah"
+  },
+  disabledMessage: {
+    type: String,
+    default: ""
+  },
+  lang: {
+    type: Object,
+    default: () => {
+    }
+  },
+  inputAttr: {
+    type: Object,
+    default: () => ({})
+  },
+  contentAttr: {
+    type: Object,
+    default: () => ({})
+  },
+  isRange: calendarPanelProps.isRange,
+  isReadOnly: {
+    type: Boolean,
+    default: false
+  },
+  isDisabled: {
+    type: Boolean,
+    default: false
+  },
+  isClearable: {
+    type: Boolean,
+    default: true
+  },
+  isInvalid: {
+    type: Boolean,
+    default: false
+  },
+  usePortal: {
+    type: Boolean,
+    default: false
+  },
+  isKeepAlive: {
+    type: Boolean,
+    default: false
+  },
+  isInline: {
+    type: Boolean,
+    default: false
+  },
+  isNotClickable: {
+    type: Boolean,
+    default: false
+  },
+  isDisableHeader: {
+    type: Boolean,
+    default: false
+  },
+  isShowShortcut: {
+    type: Boolean,
+    default: false
+  },
+  disabledDate: calendarPanelProps.disabledDate,
+  disabledMonth: calendarPanelProps.disabledMonth,
+  disabledYear: calendarPanelProps.disabledYear
+};
+
+// src/composables/useTime.ts
+var import_vue11 = require("vue");
+
+// src/utils/base.ts
+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/utils/date.ts
+var import_date_fns = require("date-fns");
+function isValidDate(date) {
+  return date instanceof Date && !isNaN(date);
+}
+__name(isValidDate, "isValidDate");
+
+// src/composables/useTime.ts
+function useTime(props) {
+  const innerValue = (0, import_vue11.ref)(props.modelValue);
+  const innerDateValue = (0, import_vue11.computed)(() => isValidDate(props.modelValue) ? props.modelValue : props.defaultDate);
+  const columns = (0, import_vue11.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_vue13.defineComponent)({
+  name: "MpTimePanel",
+  props: timePanelProps,
+  emits: ["update:modelValue"],
+  setup(props, {
+    emit
+  }) {
+    const columnNode = (0, import_vue13.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_vue13.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_vue13.onMounted)(() => {
+      (0, import_vue13.nextTick)(() => handleScrollToSelected(0));
+    });
+    return () => {
+      return (0, import_vue12.createVNode)("div", {
+        "ref": columnNode,
+        "class": (0, import_css.css)({
+          display: "flex",
+          flexDirection: "row",
+          gap: "0.5"
+        })
+      }, [columns.value.map((col, colIndex) => (0, import_vue12.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_vue12.createVNode)("li", {
+        "onClick": () => handleSelectTime(col, item)
+      }, [(0, import_vue12.createVNode)(TimeItem, (0, import_vue12.mergeProps)({
+        "data-index": itemIndex
+      }, getTimeAttrs(item.value, col.type)), {
+        default: () => [item.text]
+      })]))]))]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TimePanel
+});

package/dist/time-panel.mjs

@@ -0,0 +1,18 @@
+import {
+  TimePanel
+} from "./chunk-MO5D3TCF.mjs";
+import "./chunk-OYJNIILC.mjs";
+import "./chunk-5VRVDIXN.mjs";
+import "./chunk-MRP3X6QP.mjs";
+import "./chunk-EQWT6VDG.mjs";
+import "./chunk-J5BK7Z2U.mjs";
+import "./chunk-AGAA7XTC.mjs";
+import "./chunk-3VROFGJH.mjs";
+import "./chunk-KTYQJMW4.mjs";
+import "./chunk-IRNTTSB7.mjs";
+import "./chunk-E5BRVBZ2.mjs";
+import "./chunk-U7O52D6B.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  TimePanel
+};

package/dist/utils/base.d.mts

@@ -16,5 +16,7 @@ declare const pick: <T extends object, TKeys extends keyof T>(obj: T, keys: TKey
  * Recursion only applies to child object properties.
  */
 declare const assign: <X extends Record<string | number | symbol, any>>(initial: X, override: unknown) => X;
+declare function padNumber(value: any): string;
+declare function generateOptions(length: number, step: number): number[];
 
-export { assign, chunk, isObject, pick };
+export { assign, chunk, generateOptions, isObject, padNumber, pick };

package/dist/utils/base.d.ts

@@ -16,5 +16,7 @@ declare const pick: <T extends object, TKeys extends keyof T>(obj: T, keys: TKey
  * Recursion only applies to child object properties.
  */
 declare const assign: <X extends Record<string | number | symbol, any>>(initial: X, override: unknown) => X;
+declare function padNumber(value: any): string;
+declare function generateOptions(length: number, step: number): number[];
 
-export { assign, chunk, isObject, pick };
+export { assign, chunk, generateOptions, isObject, padNumber, pick };