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

package/dist/date-picker.js

@@ -1,9 +1,7 @@
 "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) => {
@@ -18,14 +16,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   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/date-picker.tsx
@@ -658,7 +648,7 @@ var import_date_fns3 = require("date-fns");
 // src/composables/useCalendar.ts
 var import_vue15 = require("vue");
 var import_date_fns2 = require("date-fns");
-function useCalendar(date, locale) {
+function useCalendar(date, locale2) {
   const currentDate = (0, import_vue15.ref)(isValidDate(date) ? date : /* @__PURE__ */ new Date());
   const currentPanel = (0, import_vue15.ref)("date");
   const nextMonth = /* @__PURE__ */ __name(() => {
@@ -684,7 +674,7 @@ function useCalendar(date, locale) {
       day: currentDate.value.getDay(),
       month: currentDate.value.getMonth(),
       year: currentDate.value.getFullYear(),
-      monthLabel: locale.value.months[currentDate.value.getMonth()]
+      monthLabel: locale2.value.months[currentDate.value.getMonth()]
     };
   });
   const getDates = (0, import_vue15.computed)(() => {
@@ -693,14 +683,14 @@ function useCalendar(date, locale) {
       month
     } = getSplitDates.value;
     const arr = getCalendar({
-      firstDayOfWeek: locale.value.formatLocale.firstDayOfWeek || 0,
+      firstDayOfWeek: locale2.value.formatLocale.firstDayOfWeek || 0,
       year,
       month
     });
     return arr;
   });
   const getMonths = (0, import_vue15.computed)(() => {
-    const monthsLocale = locale.value.formatLocale.monthsShort || locale.value.months;
+    const monthsLocale = locale2.value.formatLocale.monthsShort || locale2.value.months;
     const months = monthsLocale.map((text, month) => {
       return {
         text,
@@ -896,6 +886,10 @@ var calendarPanelProps = {
     type: Boolean,
     default: false
   },
+  isInline: {
+    type: Boolean,
+    default: false
+  },
   isShowShortcut: {
     type: Boolean,
     default: true
@@ -1031,12 +1025,23 @@ var datePickerProps = {
 var import_pixel3_utils = require("@mekari/pixel3-utils");
 var [DatePickerProvider, useDatePickerContext] = (0, import_pixel3_utils.usePixelCreateContext)("DatePickerContext");
 
+// src/utils/locale/en.ts
+var locale = {
+  months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+  monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+  weekdays: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+  weekdaysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+  weekdaysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
+  firstDayOfWeek: 0,
+  firstWeekContainsDate: 1
+};
+var en_default = locale;
+
 // src/modules/date-picker.locales.ts
-var import_en = __toESM(require("date-format-parse/lib/locale/en"));
 var locales = {
-  formatLocale: import_en.default,
-  days: import_en.default.weekdaysMin,
-  months: import_en.default.monthsShort,
+  formatLocale: en_default,
+  days: en_default.weekdaysMin,
+  months: en_default.monthsShort,
   yearFormat: "YYYY",
   monthFormat: "MMM",
   monthBeforeYear: true,
@@ -1062,7 +1067,7 @@ var CalendarPanel = (0, import_vue18.defineComponent)({
     emit
   }) {
     const {
-      locale
+      locale: locale2
     } = useDatePickerContext();
     const restValue = (0, import_vue18.ref)(props.modelValue);
     const {
@@ -1079,7 +1084,7 @@ var CalendarPanel = (0, import_vue18.defineComponent)({
       getLabel,
       changeMonth,
       changeYear
-    } = useCalendar(props.modelValue || props.defaultValue, locale);
+    } = useCalendar(props.modelValue || props.defaultValue, locale2);
     function onSelectDate(date) {
       currentPanelDate.value = date;
       restValue.value = date;
@@ -1208,10 +1213,10 @@ var CalendarPanel = (0, import_vue18.defineComponent)({
     return () => {
       if (currentPanel.value === "date") {
         return (0, import_vue17.createVNode)(TableDate, {
-          "days": locale.value.days,
+          "days": locale2.value.days,
           "dates": getDates.value,
           "headerLabel": getLabel.value,
-          "shortcutLabel": locale.value.todayText,
+          "shortcutLabel": locale2.value.todayText,
           "onNext": nextMonth,
           "onPrevious": previousMonth,
           "onClickHeaderLabel": () => changePanel("year"),
@@ -1228,7 +1233,7 @@ var CalendarPanel = (0, import_vue18.defineComponent)({
           "calendar": currentPanelDate.value,
           "months": getMonths.value,
           "headerLabel": getLabel.value,
-          "shortcutLabel": locale.value.thisMonthText,
+          "shortcutLabel": locale2.value.thisMonthText,
           "onNext": nextYear,
           "onPrevious": previousYear,
           "onClickHeaderLabel": () => changePanel("year"),
@@ -1243,7 +1248,7 @@ var CalendarPanel = (0, import_vue18.defineComponent)({
         return (0, import_vue17.createVNode)(TableYear, {
           "years": getYears.value,
           "headerLabel": getLabel.value,
-          "shortcutLabel": locale.value.thisYearText,
+          "shortcutLabel": locale2.value.thisYearText,
           "onNext": (year) => changeYear(year),
           "onPrevious": (year) => changeYear(year),
           "onSelect": onSelectYear,
@@ -1482,9 +1487,10 @@ var CalendarPanelRange = (0, import_vue18.defineComponent)({
         "onUpdateCalendar": (value) => updateStartCalendar(value),
         "calendar": calendars.value[0]
       }), null);
-      const rightNode = (0, import_vue17.createVNode)(CalendarPanel, (0, import_vue17.mergeProps)({
+      const rightNode = props.isInline ? "" : (0, import_vue17.createVNode)(CalendarPanel, (0, import_vue17.mergeProps)({
         "data-pixel-parts": "CalendarPanelRight"
       }, calendarPanelAttrs, {
+        "style": "margin-left: 16px;",
         "onUpdateCalendar": (value) => updateEndCalendar(value),
         "calendar": calendars.value[1]
       }), null);
@@ -1559,7 +1565,7 @@ function useDatePicker(props, emit) {
     }
     return formatDate(innerValue.value);
   });
-  const locale = (0, import_vue19.computed)(() => {
+  const locale2 = (0, import_vue19.computed)(() => {
     if (isObject(props.lang)) {
       return getLocale(props.lang);
     }
@@ -1650,14 +1656,14 @@ function useDatePicker(props, emit) {
   function parseDate(value) {
     const backupDate = /* @__PURE__ */ new Date();
     return (0, import_date_format_parse.parse)(value, innerFormat.value, {
-      locale: locale.value.formatLocale,
+      locale: locale2.value.formatLocale,
       backupDate
     });
   }
   __name(parseDate, "parseDate");
   function formatDate(date) {
     return (0, import_date_format_parse.format)(date, innerFormat.value, {
-      locale: locale.value.formatLocale
+      locale: locale2.value.formatLocale
     });
   }
   __name(formatDate, "formatDate");
@@ -1735,7 +1741,7 @@ function useDatePicker(props, emit) {
     onBlur,
     handleForceFocusToInput,
     text,
-    locale,
+    locale: locale2,
     isInnerInvalid,
     onEmitModelValue
   };
@@ -1759,7 +1765,7 @@ var MpDatePicker = (0, import_vue21.defineComponent)({
       text,
       getId,
       innerValue,
-      locale,
+      locale: locale2,
       isOutside,
       isPopoverOpen,
       isInnerInvalid,
@@ -1772,7 +1778,7 @@ var MpDatePicker = (0, import_vue21.defineComponent)({
     } = useDatePicker(props, emit);
     DatePickerProvider({
       rootProps: props,
-      locale
+      locale: locale2
     });
     return () => {
       const {
@@ -1807,6 +1813,7 @@ var MpDatePicker = (0, import_vue21.defineComponent)({
       });
       const calendarPanelAttrs = {
         type: props.type,
+        isInline: props.isInline,
         "onUpdate:modelValue": onEmitModelValue,
         disabledDate: props.disabledDate,
         disabledMonth: props.disabledMonth,

package/dist/date-picker.mjs

@@ -1,23 +1,24 @@
 import {
   MpDatePicker
-} from "./chunk-V36XV4LV.mjs";
-import "./chunk-EJCSF5VR.mjs";
-import "./chunk-Q3Z5ZITX.mjs";
+} from "./chunk-EYTJIMSM.mjs";
+import "./chunk-KTADGCWP.mjs";
+import "./chunk-XQLKPPRN.mjs";
 import "./chunk-V6D6W7RO.mjs";
-import "./chunk-LVCRFE25.mjs";
+import "./chunk-NU6HYEPT.mjs";
 import "./chunk-5PISTT2K.mjs";
 import "./chunk-HJ4V3PM6.mjs";
 import "./chunk-FTR7OMCT.mjs";
+import "./chunk-J5BK7Z2U.mjs";
 import "./chunk-AGAA7XTC.mjs";
 import "./chunk-3VROFGJH.mjs";
 import "./chunk-EQWT6VDG.mjs";
-import "./chunk-J5BK7Z2U.mjs";
 import "./chunk-NVULZQVI.mjs";
 import "./chunk-JZ2KFYWF.mjs";
 import "./chunk-VACMCDOZ.mjs";
-import "./chunk-3YYRUEIF.mjs";
+import "./chunk-3RCUXNBN.mjs";
 import "./chunk-26Y3AVJW.mjs";
-import "./chunk-OY5PVQH5.mjs";
+import "./chunk-ZS4JQRK3.mjs";
+import "./chunk-IZITNJFI.mjs";
 import "./chunk-NIUQXHGQ.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {

package/dist/index.js

@@ -1,9 +1,7 @@
 "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) => {
@@ -18,14 +16,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   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/index.ts
@@ -660,7 +650,7 @@ var import_date_fns3 = require("date-fns");
 // src/composables/useCalendar.ts
 var import_vue15 = require("vue");
 var import_date_fns2 = require("date-fns");
-function useCalendar(date, locale) {
+function useCalendar(date, locale2) {
   const currentDate = (0, import_vue15.ref)(isValidDate(date) ? date : /* @__PURE__ */ new Date());
   const currentPanel = (0, import_vue15.ref)("date");
   const nextMonth = /* @__PURE__ */ __name(() => {
@@ -686,7 +676,7 @@ function useCalendar(date, locale) {
       day: currentDate.value.getDay(),
       month: currentDate.value.getMonth(),
       year: currentDate.value.getFullYear(),
-      monthLabel: locale.value.months[currentDate.value.getMonth()]
+      monthLabel: locale2.value.months[currentDate.value.getMonth()]
     };
   });
   const getDates = (0, import_vue15.computed)(() => {
@@ -695,14 +685,14 @@ function useCalendar(date, locale) {
       month
     } = getSplitDates.value;
     const arr = getCalendar({
-      firstDayOfWeek: locale.value.formatLocale.firstDayOfWeek || 0,
+      firstDayOfWeek: locale2.value.formatLocale.firstDayOfWeek || 0,
       year,
       month
     });
     return arr;
   });
   const getMonths = (0, import_vue15.computed)(() => {
-    const monthsLocale = locale.value.formatLocale.monthsShort || locale.value.months;
+    const monthsLocale = locale2.value.formatLocale.monthsShort || locale2.value.months;
     const months = monthsLocale.map((text, month) => {
       return {
         text,
@@ -898,6 +888,10 @@ var calendarPanelProps = {
     type: Boolean,
     default: false
   },
+  isInline: {
+    type: Boolean,
+    default: false
+  },
   isShowShortcut: {
     type: Boolean,
     default: true
@@ -1033,12 +1027,23 @@ var datePickerProps = {
 var import_pixel3_utils = require("@mekari/pixel3-utils");
 var [DatePickerProvider, useDatePickerContext] = (0, import_pixel3_utils.usePixelCreateContext)("DatePickerContext");
 
+// src/utils/locale/en.ts
+var locale = {
+  months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+  monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+  weekdays: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+  weekdaysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+  weekdaysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
+  firstDayOfWeek: 0,
+  firstWeekContainsDate: 1
+};
+var en_default = locale;
+
 // src/modules/date-picker.locales.ts
-var import_en = __toESM(require("date-format-parse/lib/locale/en"));
 var locales = {
-  formatLocale: import_en.default,
-  days: import_en.default.weekdaysMin,
-  months: import_en.default.monthsShort,
+  formatLocale: en_default,
+  days: en_default.weekdaysMin,
+  months: en_default.monthsShort,
   yearFormat: "YYYY",
   monthFormat: "MMM",
   monthBeforeYear: true,
@@ -1064,7 +1069,7 @@ var CalendarPanel = (0, import_vue18.defineComponent)({
     emit
   }) {
     const {
-      locale
+      locale: locale2
     } = useDatePickerContext();
     const restValue = (0, import_vue18.ref)(props.modelValue);
     const {
@@ -1081,7 +1086,7 @@ var CalendarPanel = (0, import_vue18.defineComponent)({
       getLabel,
       changeMonth,
       changeYear
-    } = useCalendar(props.modelValue || props.defaultValue, locale);
+    } = useCalendar(props.modelValue || props.defaultValue, locale2);
     function onSelectDate(date) {
       currentPanelDate.value = date;
       restValue.value = date;
@@ -1210,10 +1215,10 @@ var CalendarPanel = (0, import_vue18.defineComponent)({
     return () => {
       if (currentPanel.value === "date") {
         return (0, import_vue17.createVNode)(TableDate, {
-          "days": locale.value.days,
+          "days": locale2.value.days,
           "dates": getDates.value,
           "headerLabel": getLabel.value,
-          "shortcutLabel": locale.value.todayText,
+          "shortcutLabel": locale2.value.todayText,
           "onNext": nextMonth,
           "onPrevious": previousMonth,
           "onClickHeaderLabel": () => changePanel("year"),
@@ -1230,7 +1235,7 @@ var CalendarPanel = (0, import_vue18.defineComponent)({
           "calendar": currentPanelDate.value,
           "months": getMonths.value,
           "headerLabel": getLabel.value,
-          "shortcutLabel": locale.value.thisMonthText,
+          "shortcutLabel": locale2.value.thisMonthText,
           "onNext": nextYear,
           "onPrevious": previousYear,
           "onClickHeaderLabel": () => changePanel("year"),
@@ -1245,7 +1250,7 @@ var CalendarPanel = (0, import_vue18.defineComponent)({
         return (0, import_vue17.createVNode)(TableYear, {
           "years": getYears.value,
           "headerLabel": getLabel.value,
-          "shortcutLabel": locale.value.thisYearText,
+          "shortcutLabel": locale2.value.thisYearText,
           "onNext": (year) => changeYear(year),
           "onPrevious": (year) => changeYear(year),
           "onSelect": onSelectYear,
@@ -1484,9 +1489,10 @@ var CalendarPanelRange = (0, import_vue18.defineComponent)({
         "onUpdateCalendar": (value) => updateStartCalendar(value),
         "calendar": calendars.value[0]
       }), null);
-      const rightNode = (0, import_vue17.createVNode)(CalendarPanel, (0, import_vue17.mergeProps)({
+      const rightNode = props.isInline ? "" : (0, import_vue17.createVNode)(CalendarPanel, (0, import_vue17.mergeProps)({
         "data-pixel-parts": "CalendarPanelRight"
       }, calendarPanelAttrs, {
+        "style": "margin-left: 16px;",
         "onUpdateCalendar": (value) => updateEndCalendar(value),
         "calendar": calendars.value[1]
       }), null);
@@ -1561,7 +1567,7 @@ function useDatePicker(props, emit) {
     }
     return formatDate(innerValue.value);
   });
-  const locale = (0, import_vue19.computed)(() => {
+  const locale2 = (0, import_vue19.computed)(() => {
     if (isObject(props.lang)) {
       return getLocale(props.lang);
     }
@@ -1652,14 +1658,14 @@ function useDatePicker(props, emit) {
   function parseDate(value) {
     const backupDate = /* @__PURE__ */ new Date();
     return (0, import_date_format_parse.parse)(value, innerFormat.value, {
-      locale: locale.value.formatLocale,
+      locale: locale2.value.formatLocale,
       backupDate
     });
   }
   __name(parseDate, "parseDate");
   function formatDate(date) {
     return (0, import_date_format_parse.format)(date, innerFormat.value, {
-      locale: locale.value.formatLocale
+      locale: locale2.value.formatLocale
     });
   }
   __name(formatDate, "formatDate");
@@ -1737,7 +1743,7 @@ function useDatePicker(props, emit) {
     onBlur,
     handleForceFocusToInput,
     text,
-    locale,
+    locale: locale2,
     isInnerInvalid,
     onEmitModelValue
   };
@@ -1761,7 +1767,7 @@ var MpDatePicker = (0, import_vue21.defineComponent)({
       text,
       getId,
       innerValue,
-      locale,
+      locale: locale2,
       isOutside,
       isPopoverOpen,
       isInnerInvalid,
@@ -1774,7 +1780,7 @@ var MpDatePicker = (0, import_vue21.defineComponent)({
     } = useDatePicker(props, emit);
     DatePickerProvider({
       rootProps: props,
-      locale
+      locale: locale2
     });
     return () => {
       const {
@@ -1809,6 +1815,7 @@ var MpDatePicker = (0, import_vue21.defineComponent)({
       });
       const calendarPanelAttrs = {
         type: props.type,
+        isInline: props.isInline,
         "onUpdate:modelValue": onEmitModelValue,
         disabledDate: props.disabledDate,
         disabledMonth: props.disabledMonth,

package/dist/index.mjs

@@ -1,23 +1,24 @@
 import {
   MpDatePicker
-} from "./chunk-V36XV4LV.mjs";
-import "./chunk-EJCSF5VR.mjs";
-import "./chunk-Q3Z5ZITX.mjs";
+} from "./chunk-EYTJIMSM.mjs";
+import "./chunk-KTADGCWP.mjs";
+import "./chunk-XQLKPPRN.mjs";
 import "./chunk-V6D6W7RO.mjs";
-import "./chunk-LVCRFE25.mjs";
+import "./chunk-NU6HYEPT.mjs";
 import "./chunk-5PISTT2K.mjs";
 import "./chunk-HJ4V3PM6.mjs";
 import "./chunk-FTR7OMCT.mjs";
+import "./chunk-J5BK7Z2U.mjs";
 import "./chunk-AGAA7XTC.mjs";
 import "./chunk-3VROFGJH.mjs";
 import "./chunk-EQWT6VDG.mjs";
-import "./chunk-J5BK7Z2U.mjs";
 import "./chunk-NVULZQVI.mjs";
 import "./chunk-JZ2KFYWF.mjs";
 import "./chunk-VACMCDOZ.mjs";
-import "./chunk-3YYRUEIF.mjs";
+import "./chunk-3RCUXNBN.mjs";
 import "./chunk-26Y3AVJW.mjs";
-import "./chunk-OY5PVQH5.mjs";
+import "./chunk-ZS4JQRK3.mjs";
+import "./chunk-IZITNJFI.mjs";
 import "./chunk-NIUQXHGQ.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {