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

package/dist/modules/date-picker.hooks.js

@@ -0,0 +1,337 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/modules/date-picker.hooks.ts
+var date_picker_hooks_exports = {};
+__export(date_picker_hooks_exports, {
+  useDatePicker: () => useDatePicker
+});
+module.exports = __toCommonJS(date_picker_hooks_exports);
+var import_vue = require("vue");
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var import_date_format_parse = require("date-format-parse");
+
+// src/modules/date-picker.locales.ts
+var import_en = __toESM(require("date-format-parse/lib/locale/en"));
+
+// src/utils/base.ts
+var isObject = /* @__PURE__ */ __name((value) => {
+  return !!value && value.constructor === Object;
+}, "isObject");
+var assign = /* @__PURE__ */ __name((initial, override) => {
+  var _a;
+  if (!initial || !override)
+    return (_a = initial != null ? initial : override) != null ? _a : {};
+  return Object.entries({
+    ...initial,
+    ...override
+  }).reduce((acc, [key, value]) => {
+    return {
+      ...acc,
+      [key]: (() => {
+        if (isObject(initial[key]))
+          return assign(initial[key], value);
+        return value;
+      })()
+    };
+  }, {});
+}, "assign");
+
+// src/modules/date-picker.locales.ts
+var locales = {
+  formatLocale: import_en.default,
+  days: import_en.default.weekdaysMin,
+  months: import_en.default.monthsShort,
+  yearFormat: "YYYY",
+  monthFormat: "MMM",
+  monthBeforeYear: true,
+  todayText: "Today",
+  thisMonthText: "This Month",
+  thisYearText: "This Year"
+};
+function getLocale(config) {
+  if (!config) {
+    return locales;
+  }
+  return assign(locales, config);
+}
+__name(getLocale, "getLocale");
+
+// src/utils/date.ts
+var import_date_fns = require("date-fns");
+function isValidDate(date) {
+  return date instanceof Date && !isNaN(date);
+}
+__name(isValidDate, "isValidDate");
+function isValidRangeDate(date) {
+  return Array.isArray(date) && date.length === 2 && date.every(isValidDate) && date[0] <= date[1];
+}
+__name(isValidRangeDate, "isValidRangeDate");
+
+// src/modules/date-picker.hooks.ts
+function useDatePicker(props, emit) {
+  const getId = props.id || (0, import_pixel3_utils.getUniqueId)("", "datepicker").value;
+  const currentLabel = (0, import_vue.ref)("");
+  const isOutside = (0, import_vue.ref)(true);
+  const isPopoverOpen = (0, import_vue.ref)(false);
+  const isInnerInvalid = (0, import_vue.ref)(false);
+  const userInput = (0, import_vue.ref)(null);
+  const innerValueDate = (0, import_vue.ref)();
+  const isUseRange = (0, import_vue.computed)(() => {
+    if (props.isRange || props.type === "biweek" || props.type === "week")
+      return true;
+    return false;
+  });
+  const innerFormat = (0, import_vue.computed)(() => {
+    const format2 = {
+      date: "DD-MM-YYYY",
+      datetime: "DD-MM-YYYY HH:mm:ss",
+      year: "YYYY",
+      month: "YYYY-MM",
+      time: "HH:mm:ss",
+      week: "DD-MM-YYYY",
+      biweek: "DD-MM-YYYY"
+    };
+    return props.format || format2[props.type] || format2.date;
+  });
+  const innerValue = (0, import_vue.computed)(() => {
+    if (isUseRange.value) {
+      if (isValidRangeDate(props.modelValue)) {
+        const startDate = valueToDate(props.modelValue[0]);
+        const endDate = valueToDate(props.modelValue[1]);
+        return [startDate, endDate];
+      }
+      return [];
+    }
+    return valueToDate(props.modelValue);
+  });
+  const text = (0, import_vue.computed)(() => {
+    if (userInput.value !== null)
+      return userInput.value;
+    if (!innerValue.value)
+      return "";
+    if (isUseRange.value) {
+      if (!isValidRangeDate(innerValue.value))
+        return "";
+    } else {
+      if (!isValidDate(innerValue.value))
+        return "";
+    }
+    if (Array.isArray(innerValue.value)) {
+      return innerValue.value.map((v) => formatDate(v)).join(props.rangeSeparator);
+    }
+    return formatDate(innerValue.value);
+  });
+  const locale = (0, import_vue.computed)(() => {
+    if (isObject(props.lang)) {
+      return getLocale(props.lang);
+    }
+    return getLocale();
+  });
+  function onOpenPopover() {
+    if (props.isReadOnly)
+      return;
+    isPopoverOpen.value = true;
+  }
+  __name(onOpenPopover, "onOpenPopover");
+  function onClosePopover() {
+    isPopoverOpen.value = false;
+  }
+  __name(onClosePopover, "onClosePopover");
+  function onBlur() {
+    onClosePopover();
+    const inputEl = document.getElementById(`${getId}-control`);
+    inputEl == null ? void 0 : inputEl.blur();
+  }
+  __name(onBlur, "onBlur");
+  function handleForceFocusToInput() {
+    const inputEl = document.getElementById(`${getId}-control`);
+    inputEl == null ? void 0 : inputEl.focus();
+  }
+  __name(handleForceFocusToInput, "handleForceFocusToInput");
+  function onClear() {
+    isOutside.value = true;
+    userInput.value = null;
+    emit("update:modelValue", "");
+    onBlur();
+  }
+  __name(onClear, "onClear");
+  function onInputChange(e) {
+    var _a;
+    if (e) {
+      const target = e.target;
+      userInput.value = typeof e === "string" ? e : target.value;
+      if (userInput.value === null)
+        return;
+      const text2 = ((_a = userInput.value) == null ? void 0 : _a.trim()) || "";
+      if (text2 === "") {
+        onClear();
+        isInnerInvalid.value = false;
+        return;
+      }
+      let date;
+      if (isUseRange.value) {
+        let arr = text2.split(props.rangeSeparator);
+        if (arr.length !== 2) {
+          arr = text2.split(props.rangeSeparator.trim());
+        }
+        date = arr.map((v) => parseDate(v.trim()));
+      } else {
+        date = parseDate(text2);
+      }
+      if (isValidValueAndNotDisabled(date)) {
+        innerValueDate.value = date;
+        (0, import_vue.nextTick)(() => {
+          isOutside.value = true;
+          isInnerInvalid.value = false;
+          onBlur();
+        });
+      } else {
+        isInnerInvalid.value = true;
+        emit("error", text2);
+      }
+    }
+  }
+  __name(onInputChange, "onInputChange");
+  function onEmitModelValue(value) {
+    userInput.value = null;
+    innerValueDate.value = value;
+    if (isUseRange.value) {
+      const dates = value;
+      const startDate = dateToValue(new Date(dates[0]));
+      const endDate = dateToValue(new Date(dates[1]));
+      emit("update:modelValue", [startDate, endDate]);
+    } else {
+      emit("update:modelValue", dateToValue(new Date(value)));
+    }
+    (0, import_vue.nextTick)(() => {
+      isOutside.value = true;
+      onBlur();
+    });
+  }
+  __name(onEmitModelValue, "onEmitModelValue");
+  function parseDate(value) {
+    const backupDate = /* @__PURE__ */ new Date();
+    return (0, import_date_format_parse.parse)(value, innerFormat.value, {
+      locale: locale.value.formatLocale,
+      backupDate
+    });
+  }
+  __name(parseDate, "parseDate");
+  function formatDate(date) {
+    return (0, import_date_format_parse.format)(date, innerFormat.value, {
+      locale: locale.value.formatLocale
+    });
+  }
+  __name(formatDate, "formatDate");
+  function valueToDate(value) {
+    switch (props.valueType) {
+      case "date":
+        return value instanceof Date ? new Date(value.getTime()) : /* @__PURE__ */ new Date(NaN);
+      case "timestamp":
+        return typeof value === "number" ? new Date(value) : /* @__PURE__ */ new Date(NaN);
+      case "string":
+        return typeof value === "string" ? parseDate(value) : /* @__PURE__ */ new Date(NaN);
+      default:
+        return typeof value === "string" ? parseDate(value) : /* @__PURE__ */ new Date(NaN);
+    }
+  }
+  __name(valueToDate, "valueToDate");
+  function dateToValue(date) {
+    if (!isValidDate(date))
+      return null;
+    switch (props.valueType) {
+      case "date":
+        return date;
+      case "timestamp":
+        return date.getTime();
+      case "string":
+        return formatDate(date);
+      default:
+        return formatDate(date);
+    }
+  }
+  __name(dateToValue, "dateToValue");
+  function isValidValue(value) {
+    if (isUseRange.value)
+      return isValidRangeDate(value);
+    return isValidDate(value);
+  }
+  __name(isValidValue, "isValidValue");
+  function isValidValueAndNotDisabled(value) {
+    if (!isValidValue(value))
+      return false;
+    const disabledDate = typeof props.disabledDate === "function" ? props.disabledDate : () => false;
+    if (!Array.isArray(value)) {
+      value = [value];
+    }
+    return value.every((v) => !disabledDate(v));
+  }
+  __name(isValidValueAndNotDisabled, "isValidValueAndNotDisabled");
+  const rootAttrs = {
+    style: {
+      width: "100%",
+      position: "relative"
+    },
+    onMouseenter: () => {
+      isOutside.value = false;
+    },
+    onMouseleave: () => {
+      isOutside.value = true;
+    }
+  };
+  return {
+    rootAttrs,
+    isOutside,
+    isPopoverOpen,
+    currentLabel,
+    userInput,
+    innerFormat,
+    innerValueDate,
+    innerValue,
+    isUseRange,
+    onOpenPopover,
+    onClosePopover,
+    onClear,
+    onInputChange,
+    getId,
+    onBlur,
+    handleForceFocusToInput,
+    text,
+    locale,
+    isInnerInvalid,
+    onEmitModelValue
+  };
+}
+__name(useDatePicker, "useDatePicker");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useDatePicker
+});

package/dist/modules/date-picker.hooks.mjs

@@ -0,0 +1,10 @@
+import {
+  useDatePicker
+} from "../chunk-3YYRUEIF.mjs";
+import "../chunk-26Y3AVJW.mjs";
+import "../chunk-OY5PVQH5.mjs";
+import "../chunk-NIUQXHGQ.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  useDatePicker
+};

package/dist/modules/date-picker.locales.d.mts

@@ -0,0 +1,27 @@
+import * as date_format_parse_lib_locale from 'date-format-parse/lib/locale';
+
+declare const locales: {
+    formatLocale: date_format_parse_lib_locale.Locale;
+    days: string[];
+    months: string[];
+    yearFormat: string;
+    monthFormat: string;
+    monthBeforeYear: boolean;
+    todayText: string;
+    thisMonthText: string;
+    thisYearText: string;
+};
+type Locales = Partial<typeof locales>;
+declare function getLocale(config?: Locales): {
+    formatLocale: date_format_parse_lib_locale.Locale;
+    days: string[];
+    months: string[];
+    yearFormat: string;
+    monthFormat: string;
+    monthBeforeYear: boolean;
+    todayText: string;
+    thisMonthText: string;
+    thisYearText: string;
+};
+
+export { getLocale };

package/dist/modules/date-picker.locales.d.ts

@@ -0,0 +1,27 @@
+import * as date_format_parse_lib_locale from 'date-format-parse/lib/locale';
+
+declare const locales: {
+    formatLocale: date_format_parse_lib_locale.Locale;
+    days: string[];
+    months: string[];
+    yearFormat: string;
+    monthFormat: string;
+    monthBeforeYear: boolean;
+    todayText: string;
+    thisMonthText: string;
+    thisYearText: string;
+};
+type Locales = Partial<typeof locales>;
+declare function getLocale(config?: Locales): {
+    formatLocale: date_format_parse_lib_locale.Locale;
+    days: string[];
+    months: string[];
+    yearFormat: string;
+    monthFormat: string;
+    monthBeforeYear: boolean;
+    todayText: string;
+    thisMonthText: string;
+    thisYearText: string;
+};
+
+export { getLocale };

package/dist/modules/date-picker.locales.js

@@ -0,0 +1,84 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/modules/date-picker.locales.ts
+var date_picker_locales_exports = {};
+__export(date_picker_locales_exports, {
+  getLocale: () => getLocale
+});
+module.exports = __toCommonJS(date_picker_locales_exports);
+var import_en = __toESM(require("date-format-parse/lib/locale/en"));
+
+// src/utils/base.ts
+var isObject = /* @__PURE__ */ __name((value) => {
+  return !!value && value.constructor === Object;
+}, "isObject");
+var assign = /* @__PURE__ */ __name((initial, override) => {
+  var _a;
+  if (!initial || !override)
+    return (_a = initial != null ? initial : override) != null ? _a : {};
+  return Object.entries({
+    ...initial,
+    ...override
+  }).reduce((acc, [key, value]) => {
+    return {
+      ...acc,
+      [key]: (() => {
+        if (isObject(initial[key]))
+          return assign(initial[key], value);
+        return value;
+      })()
+    };
+  }, {});
+}, "assign");
+
+// src/modules/date-picker.locales.ts
+var locales = {
+  formatLocale: import_en.default,
+  days: import_en.default.weekdaysMin,
+  months: import_en.default.monthsShort,
+  yearFormat: "YYYY",
+  monthFormat: "MMM",
+  monthBeforeYear: true,
+  todayText: "Today",
+  thisMonthText: "This Month",
+  thisYearText: "This Year"
+};
+function getLocale(config) {
+  if (!config) {
+    return locales;
+  }
+  return assign(locales, config);
+}
+__name(getLocale, "getLocale");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getLocale
+});

package/dist/modules/date-picker.locales.mjs

@@ -0,0 +1,8 @@
+import {
+  getLocale
+} from "../chunk-OY5PVQH5.mjs";
+import "../chunk-NIUQXHGQ.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  getLocale
+};