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

package/dist/composables/useTime.js

@@ -0,0 +1,185 @@
+"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/composables/useTime.ts
+var useTime_exports = {};
+__export(useTime_exports, {
+  useTime: () => useTime
+});
+module.exports = __toCommonJS(useTime_exports);
+var import_vue = 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_vue.ref)(props.modelValue);
+  const innerDateValue = (0, import_vue.computed)(() => isValidDate(props.modelValue) ? props.modelValue : props.defaultDate);
+  const columns = (0, import_vue.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");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useTime
+});

package/dist/composables/useTime.mjs

@@ -0,0 +1,9 @@
+import {
+  useTime
+} from "../chunk-IRNTTSB7.mjs";
+import "../chunk-E5BRVBZ2.mjs";
+import "../chunk-U7O52D6B.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  useTime
+};

package/dist/date-picker.d.mts

@@ -1,5 +1,12 @@
 import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import { CalendarPanel } from './modules/date-picker.props.mjs';
 import * as vue from 'vue';
+import './components/parts/date.mjs';
+import '@mekari/pixel3-styled-system/types';
+import '@mekari/pixel3-styled-system/css';
+import '@mekari/pixel3-styled-system/recipes';
+import './components/parts/month.mjs';
+import './components/parts/year.mjs';
 
 declare const MpDatePicker: vue.DefineComponent<{
     id: {
@@ -9,7 +16,7 @@ declare const MpDatePicker: vue.DefineComponent<{
         type: vue.PropType<string | number | Date | Date[] | string[] | number[]>;
     };
     type: {
-        type: vue.PropType<"date" | "month" | "year" | "week" | "biweek">;
+        type: vue.PropType<CalendarPanel>;
         default: string;
     };
     valueType: {
@@ -103,6 +110,42 @@ declare const MpDatePicker: vue.DefineComponent<{
         type: vue.PropType<(year: number) => boolean>;
         default: () => void;
     };
+    defaultDate: {
+        type: DateConstructor;
+        default(): Date;
+    };
+    isShowHour: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowMinute: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowSecond: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    hourStep: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    minuteStep: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    secondStep: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    isUse12h: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    disabledTime: {
+        type: FunctionConstructor;
+        default: () => boolean;
+    };
 }, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:modelValue" | "error")[], "update:modelValue" | "error", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     id: {
         type: vue.PropType<string>;
@@ -111,7 +154,7 @@ declare const MpDatePicker: vue.DefineComponent<{
         type: vue.PropType<string | number | Date | Date[] | string[] | number[]>;
     };
     type: {
-        type: vue.PropType<"date" | "month" | "year" | "week" | "biweek">;
+        type: vue.PropType<CalendarPanel>;
         default: string;
     };
     valueType: {
@@ -205,11 +248,47 @@ declare const MpDatePicker: vue.DefineComponent<{
         type: vue.PropType<(year: number) => boolean>;
         default: () => void;
     };
+    defaultDate: {
+        type: DateConstructor;
+        default(): Date;
+    };
+    isShowHour: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowMinute: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowSecond: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    hourStep: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    minuteStep: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    secondStep: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    isUse12h: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    disabledTime: {
+        type: FunctionConstructor;
+        default: () => boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onError?: ((...args: any[]) => any) | undefined;
 }, {
-    type: "date" | "month" | "year" | "week" | "biweek";
+    type: CalendarPanel;
     valueType: "string" | "date" | "timestamp";
     rangeSeparator: string;
     placeholder: string;
@@ -232,6 +311,15 @@ declare const MpDatePicker: vue.DefineComponent<{
     disabledDate: (date: Date) => boolean;
     disabledMonth: (month: number, year: number) => boolean;
     disabledYear: (year: number) => boolean;
+    defaultDate: Date;
+    isShowHour: boolean;
+    isShowMinute: boolean;
+    isShowSecond: boolean;
+    hourStep: number;
+    minuteStep: number;
+    secondStep: number;
+    isUse12h: boolean;
+    disabledTime: Function;
 }, {}>;
 
 export { MpDatePicker };

package/dist/date-picker.d.ts

@@ -1,5 +1,12 @@
 import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import { CalendarPanel } from './modules/date-picker.props.js';
 import * as vue from 'vue';
+import './components/parts/date.js';
+import '@mekari/pixel3-styled-system/types';
+import '@mekari/pixel3-styled-system/css';
+import '@mekari/pixel3-styled-system/recipes';
+import './components/parts/month.js';
+import './components/parts/year.js';
 
 declare const MpDatePicker: vue.DefineComponent<{
     id: {
@@ -9,7 +16,7 @@ declare const MpDatePicker: vue.DefineComponent<{
         type: vue.PropType<string | number | Date | Date[] | string[] | number[]>;
     };
     type: {
-        type: vue.PropType<"date" | "month" | "year" | "week" | "biweek">;
+        type: vue.PropType<CalendarPanel>;
         default: string;
     };
     valueType: {
@@ -103,6 +110,42 @@ declare const MpDatePicker: vue.DefineComponent<{
         type: vue.PropType<(year: number) => boolean>;
         default: () => void;
     };
+    defaultDate: {
+        type: DateConstructor;
+        default(): Date;
+    };
+    isShowHour: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowMinute: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowSecond: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    hourStep: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    minuteStep: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    secondStep: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    isUse12h: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    disabledTime: {
+        type: FunctionConstructor;
+        default: () => boolean;
+    };
 }, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:modelValue" | "error")[], "update:modelValue" | "error", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     id: {
         type: vue.PropType<string>;
@@ -111,7 +154,7 @@ declare const MpDatePicker: vue.DefineComponent<{
         type: vue.PropType<string | number | Date | Date[] | string[] | number[]>;
     };
     type: {
-        type: vue.PropType<"date" | "month" | "year" | "week" | "biweek">;
+        type: vue.PropType<CalendarPanel>;
         default: string;
     };
     valueType: {
@@ -205,11 +248,47 @@ declare const MpDatePicker: vue.DefineComponent<{
         type: vue.PropType<(year: number) => boolean>;
         default: () => void;
     };
+    defaultDate: {
+        type: DateConstructor;
+        default(): Date;
+    };
+    isShowHour: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowMinute: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowSecond: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    hourStep: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    minuteStep: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    secondStep: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    isUse12h: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    disabledTime: {
+        type: FunctionConstructor;
+        default: () => boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onError?: ((...args: any[]) => any) | undefined;
 }, {
-    type: "date" | "month" | "year" | "week" | "biweek";
+    type: CalendarPanel;
     valueType: "string" | "date" | "timestamp";
     rangeSeparator: string;
     placeholder: string;
@@ -232,6 +311,15 @@ declare const MpDatePicker: vue.DefineComponent<{
     disabledDate: (date: Date) => boolean;
     disabledMonth: (month: number, year: number) => boolean;
     disabledYear: (year: number) => boolean;
+    defaultDate: Date;
+    isShowHour: boolean;
+    isShowMinute: boolean;
+    isShowSecond: boolean;
+    hourStep: number;
+    minuteStep: number;
+    secondStep: number;
+    isUse12h: boolean;
+    disabledTime: Function;
 }, {}>;
 
 export { MpDatePicker };