vueless 0.0.164 → 0.0.166

package/ui.form-date-picker-range/index.vue

@@ -199,13 +199,9 @@ import UIService, { getRandomId } from "../service.ui";
 
 import {
   addDays,
-  gmtToUTC,
-  getUnixTimestampFromDate,
   addMonths,
   addYears,
-  getDateFromUnixTimestamp,
   getSortedLocale,
-  utcToGMT,
   getEndOfMonth,
   getEndOfQuarter,
   getEndOfWeek,
@@ -251,7 +247,7 @@ defineOptions({ name: "UDatePickerRange", inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Dater picker range value as object with from and to keys (timestamp).
+   * Datepicker value in JS Date Objects or Strings formatted in provided props.dateFormat.
    */
   modelValue: {
     type: Object,
@@ -267,7 +263,7 @@ const props = defineProps({
   customRangeButton: {
     type: Object,
     default: () => ({
-      range: { from: 0, to: 0 },
+      range: { from: null, to: null },
       label: "",
       description: "",
     }),
@@ -444,9 +440,32 @@ const {
 } = useAttrs(props, { isShownMenu, isTop, isRight });
 const { tm } = useLocale();
 
+const i18nGlobal = tm(UDatePickerRange);
+
+const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
+
+const locale = computed(() => {
+  const { months, weekdays } = currentLocale.value;
+
+  // formatted locale
+  return {
+    ...currentLocale.value,
+    months: {
+      shorthand: getSortedLocale(months.shorthand, LOCALE_TYPE.month),
+      longhand: getSortedLocale(months.longhand, LOCALE_TYPE.month),
+    },
+    weekdays: {
+      shorthand: getSortedLocale(weekdays.shorthand, LOCALE_TYPE.day),
+      longhand: getSortedLocale(weekdays.longhand, LOCALE_TYPE.day),
+    },
+  };
+});
+
 const calendarValue = ref(props.modelValue);
 const activeDate = ref(
-  props.modelValue.from !== null ? getDateFromUnixTimestamp(props.modelValue.from) : new Date(),
+  props.modelValue.from !== null
+    ? parseDate(props.modelValue.from, props.dateFormat, locale.value)
+    : new Date(),
 );
 const period = ref(PERIOD.ownRange);
 const rangeStart = ref("");
@@ -457,39 +476,39 @@ const isHoverEvent = ref(false);
 const periodDateList = ref(null);
 
 const { isMobileBreakpoint } = useBreakpoint();
-const i18nGlobal = tm(UDatePickerRange);
 
 const localValue = computed({
-  get: () => props.modelValue,
+  get: () => {
+    return {
+      from: parseDate(props.modelValue.from || null, props.dateFormat, locale.value),
+      to: parseDate(props.modelValue.to || null, props.dateFormat, locale.value),
+    };
+  },
   set: (value) => {
-    if (value.from && value.to) {
+    if (value.from && value.to && !props.dateFormat) {
       emit("update:modelValue", value);
     }
 
-    activeDate.value = getDateFromUnixTimestamp(value.from || new Date());
-  },
-});
+    const parsedDateFrom = parseDate(value.from || null, props.dateFormat, locale.value);
+    const parsedDateTo = parseDate(value.to || null, props.dateFormat, locale.value);
 
-const rangeInputName = computed(() => `rangeInput-${props.id}`);
-const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
+    if (value.from && value.to && props.dateFormat) {
+      const newValue = {
+        from: formatDate(parsedDateFrom, props.dateFormat, locale.value),
+        to: formatDate(parsedDateTo, props.dateFormat, locale.value),
+      };
 
-const locale = computed(() => {
-  const { months, weekdays } = currentLocale.value;
+      emit("update:modelValue", newValue);
+    }
 
-  // formatted locale
-  return {
-    ...currentLocale.value,
-    months: {
-      shorthand: getSortedLocale(months.shorthand, LOCALE_TYPE.month),
-      longhand: getSortedLocale(months.longhand, LOCALE_TYPE.month),
-    },
-    weekdays: {
-      shorthand: getSortedLocale(weekdays.shorthand, LOCALE_TYPE.day),
-      longhand: getSortedLocale(weekdays.longhand, LOCALE_TYPE.day),
-    },
-  };
+    activeDate.value = props.dateFormat
+      ? formatDate(parsedDateFrom || new Date(), props.dateFormat, locale.value)
+      : value.from || new Date();
+  },
 });
 
+const rangeInputName = computed(() => `rangeInput-${props.id}`);
+
 const userFormatLocale = computed(() => {
   const { months, weekdays } = currentLocale.value;
 
@@ -575,8 +594,8 @@ const userFormatDate = computed(() => {
 
   const isDefaultTitle = isPeriod.value.week || isPeriod.value.custom || isPeriod.value.ownRange;
 
-  const from = getDateFromUnixTimestamp(localValue.value.from);
-  const to = localValue.value.to !== null ? getDateFromUnixTimestamp(localValue.value.to) : null;
+  const from = localValue.value.from;
+  const to = localValue.value.to !== null ? localValue.value.to : null;
 
   if (isDefaultTitle) {
     let startMonthName = userFormatLocale.value.months.longhand[from.getMonth()];
@@ -637,14 +656,8 @@ watch(
   calendarValue,
   () => {
     localValue.value = {
-      from:
-        calendarValue.value.from === null
-          ? calendarValue.value.from
-          : getUnixTimestampFromDate(gmtToUTC(getDateFromUnixTimestamp(calendarValue.value.from))),
-      to:
-        calendarValue.value.to === null
-          ? calendarValue.value.to
-          : getUnixTimestampFromDate(gmtToUTC(getDateFromUnixTimestamp(calendarValue.value.to))),
+      from: calendarValue.value.from,
+      to: calendarValue.value.to,
     };
 
     nextTick(() => menuRef.value?.focus());
@@ -655,21 +668,22 @@ watch(
 watch(
   () => props.modelValue,
   () => {
-    if (props.modelValue.to !== calendarValue.value.to) {
+    if (String(props.modelValue.to) !== String(calendarValue.value.to)) {
       calendarValue.value.to = props.modelValue.to;
     }
 
-    if (props.modelValue.from !== calendarValue.value.from) {
+    if (String(props.modelValue.from) !== String(calendarValue.value.from)) {
       calendarValue.value.from = props.modelValue.from;
     }
 
+    const parsedDateFrom = parseDate(props.modelValue.from, props.dateFormat, locale.value);
+    const parsedDateTo = parseDate(props.modelValue.to, props.dateFormat, locale.value);
+
     rangeStart.value = props.modelValue.from
-      ? formatDate(getDateFromUnixTimestamp(props.modelValue.from), props.dateFormat, locale.value)
+      ? formatDate(parsedDateFrom, "d.m.Y", locale.value)
       : "";
 
-    rangeEnd.value = props.modelValue.to
-      ? formatDate(getDateFromUnixTimestamp(props.modelValue.to), props.dateFormat, locale.value)
-      : "";
+    rangeEnd.value = props.modelValue.to ? formatDate(parsedDateTo, "d.m.Y", locale.value) : "";
 
     inputRangeStartError.value = "";
     inputRangeEndError.value = "";
@@ -678,13 +692,11 @@ watch(
 );
 
 watch(period, () => {
-  activeDate.value =
-    localValue.value.from !== null ? getDateFromUnixTimestamp(localValue.value.from) : new Date();
+  activeDate.value = localValue.value.from !== null ? localValue.value.from : new Date();
 });
 
 function onClickPeriodButton(periodName) {
-  const localDate =
-    localValue.value.from !== null ? getDateFromUnixTimestamp(localValue.value.from) : new Date();
+  const localDate = localValue.value.from !== null ? localValue.value.from : new Date();
 
   if (periodName === PERIOD.week) {
     periodDateList.value = getWeekDateList(localDate, locale.value.months.shorthand);
@@ -736,37 +748,21 @@ function onClickCustomRangeButton() {
 }
 
 function selectCustomRange() {
-  const from =
-    typeof props.customRangeButton.range.from === "number"
-      ? getDateFromUnixTimestamp(props.customRangeButton.range.from)
-      : props.customRangeButton.range.from;
-
-  const to =
-    typeof props.customRangeButton.range.to === "number"
-      ? getDateFromUnixTimestamp(props.customRangeButton.range.to)
-      : props.customRangeButton.range.to;
-
   localValue.value = {
-    from: getUnixTimestampFromDate(gmtToUTC(from)),
-    to: getUnixTimestampFromDate(gmtToUTC(to)),
+    from: props.customRangeButton.range.from,
+    to: props.customRangeButton.range.to,
   };
 }
 
 function isDatePeriodOutOfRange(datePeriod) {
   return (
     dateIsOutOfRange(
-      getDateFromUnixTimestamp(datePeriod.startRange),
+      datePeriod.startRange,
       props.minDate,
       props.maxDate,
       locale.value,
       props.dateFormat,
-    ) ||
-    dateIsOutOfRange(
-      getDateFromUnixTimestamp(datePeriod.endRange),
-      props.minDate,
-      props.maxDate,
-      props.dateFormat,
-    )
+    ) || dateIsOutOfRange(datePeriod.endRange, props.minDate, props.maxDate, props.dateFormat)
   );
 }
 
@@ -874,8 +870,7 @@ function onInputRangeInput(value, type) {
     inputRangeEndError.value = error;
   }
 
-  const parsedValue = gmtToUTC(parseDate(value || new Date(), props.dateFormat, locale.value));
-  const unixTimeValue = getUnixTimestampFromDate(parsedValue);
+  const parsedValue = parseDate(value || new Date(), props.dateFormat, locale.value);
   const isOutOfRange = dateIsOutOfRange(
     parsedValue,
     props.minDate,
@@ -883,25 +878,25 @@ function onInputRangeInput(value, type) {
     locale.value,
     props.dateFormat,
   );
-  const isToLessThanFrom = unixTimeValue <= localValue.value.from;
+  const isToLessThanFrom = parsedValue <= localValue.value.from;
 
   if (type === INPUT_RANGE_TYPE.start && !error && !isOutOfRange) {
-    localValue.value.from = value ? unixTimeValue : "";
+    localValue.value.from = value ? parsedValue : "";
   }
 
   if (type === INPUT_RANGE_TYPE.end && !error && !isOutOfRange && !isToLessThanFrom) {
-    localValue.value.to = value ? unixTimeValue : "";
+    localValue.value.to = value ? parsedValue : "";
   }
 }
 
 setDefaultPeriodForButton();
 
 function setDefaultPeriodForButton() {
-  const from = utcToGMT(getDateFromUnixTimestamp(props.modelValue.from || new Date()));
-  const to = utcToGMT(getDateFromUnixTimestamp(props.modelValue.to || new Date()));
+  const from = props.modelValue.from || new Date();
+  const to = props.modelValue.to || new Date();
 
-  const customFrom = utcToGMT(getDateFromUnixTimestamp(props.customRangeButton.range.from));
-  const customTo = utcToGMT(getDateFromUnixTimestamp(props.customRangeButton.range.to));
+  const customFrom = props.customRangeButton.range.from || new Date();
+  const customTo = props.customRangeButton.range.to || new Date();
 
   const isWeekPeriod =
     String(from) === String(getStartOfWeek(from, { weekStartsOn: 1 })) &&
@@ -946,15 +941,15 @@ function onClickShiftRange(action) {
   const millisecondsPerDay =
     millisecondsPerSecond * secondsPerMinute * minutesPerHour * hoursPerDay;
 
-  const from = getDateFromUnixTimestamp(localValue.value.from);
-  const to = localValue.value.to ? getDateFromUnixTimestamp(localValue.value.to) : addDays(from, 1);
+  const from = localValue.value.from;
+  const to = localValue.value.to ? localValue.value.to : addDays(from, 1);
   const daysDifference = Math.ceil(Math.abs(getDatesDifference(from, to)) / millisecondsPerDay);
 
   if (action === "next") {
     if (isPeriod.value.ownRange) {
       const nextDate = {
-        to: getUnixTimestampFromDate(addDays(to, daysDifference)),
-        from: getUnixTimestampFromDate(addDays(from, daysDifference)),
+        to: addDays(to, daysDifference),
+        from: addDays(from, daysDifference),
       };
 
       if (isDatePeriodOutOfRange(nextDate)) return;
@@ -979,8 +974,8 @@ function onClickShiftRange(action) {
   } else {
     if (isPeriod.value.ownRange) {
       const previousDate = {
-        to: getUnixTimestampFromDate(gmtToUTC(addDays(to, daysDifference * -1))),
-        from: getUnixTimestampFromDate(gmtToUTC(addDays(from, daysDifference * -1))),
+        to: addDays(to, daysDifference * -1),
+        from: addDays(from, daysDifference * -1),
       };
 
       if (isDatePeriodOutOfRange(previousDate)) return;

package/ui.form-date-picker-range/services/dateRange.service.js

@@ -2,9 +2,7 @@ import {
   getWeeksInMonth,
   getStartOfWeek,
   getEndOfWeek,
-  gmtToUTC,
   addWeeks,
-  getUnixTimestampFromDate,
   getEndOfMonth,
   getStartOfMonth,
   getEndOfQuarter,
@@ -27,8 +25,8 @@ export function getYearDateList(date) {
 
     years.push({
       title: currentYear,
-      startRange: getUnixTimestampFromDate(gmtToUTC(getStartOfYear(new Date(currentYear, month)))),
-      endRange: getUnixTimestampFromDate(gmtToUTC(getEndOfYear(new Date(currentYear, month)))),
+      startRange: getStartOfYear(new Date(currentYear, month)),
+      endRange: getEndOfYear(new Date(currentYear, month)),
     });
   }
 
@@ -51,8 +49,8 @@ export function getQuartersDateList(date, quarterLocales = "") {
 
     quarters.push({
       title: `${currentQuarter} ${quarterLocales}`,
-      startRange: getUnixTimestampFromDate(gmtToUTC(getStartOfQuarter(newQuarter))),
-      endRange: getUnixTimestampFromDate(gmtToUTC(getEndOfQuarter(newQuarter))),
+      startRange: getStartOfQuarter(newQuarter),
+      endRange: getEndOfQuarter(newQuarter),
     });
   }
 
@@ -65,8 +63,8 @@ export function getMonthsDateList(date, monthLocales = []) {
   const months = monthLocales.map((item, index) => {
     return {
       title: item,
-      startRange: getUnixTimestampFromDate(gmtToUTC(getStartOfMonth(new Date(year, index)))),
-      endRange: getUnixTimestampFromDate(gmtToUTC(getEndOfMonth(new Date(year, index)))),
+      startRange: getStartOfMonth(new Date(year, index)),
+      endRange: getEndOfMonth(new Date(year, index)),
     };
   });
 
@@ -105,8 +103,8 @@ export function getWeekDateList(date, monthShortLocales = {}) {
 
     weeks.push({
       title,
-      startRange: getUnixTimestampFromDate(gmtToUTC(startOfWeekDate)),
-      endRange: getUnixTimestampFromDate(gmtToUTC(endOfWeekDate)),
+      startRange: startOfWeekDate,
+      endRange: endOfWeekDate,
     });
   }
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.164",
+  "version": "0.0.166",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -53,11 +53,11 @@
             },
             {
               "name": "dateFormat",
-              "required": true,
               "value": {
                 "kind": "expression",
                 "type": "string"
-              }
+              },
+              "default": "undefined"
             },
             {
               "name": "range",
@@ -701,10 +701,10 @@
           "attributes": [
             {
               "name": "modelValue",
-              "description": "Calendar value (timestamp).",
+              "description": "Calendar value in JS Date Object or String formatted in provided props.dateFormat.",
               "value": {
                 "kind": "expression",
-                "type": "number|object"
+                "type": "string|object"
               },
               "default": "null"
             },
@@ -741,8 +741,7 @@
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "Y-m-d"
+              }
             },
             {
               "name": "userFormat",
@@ -755,7 +754,7 @@
             },
             {
               "name": "minDate",
-              "description": "Min date in format date string or Date.",
+              "description": "Min date in JS Date Object or Date String formatted in provided props.dateFormat.",
               "value": {
                 "kind": "expression",
                 "type": "date|string"
@@ -763,7 +762,7 @@
             },
             {
               "name": "maxDate",
-              "description": "Max date in format date string or Date.",
+              "description": "Max date in JS Date Object or Date String formatted in provided props.dateFormat.",
               "value": {
                 "kind": "expression",
                 "type": "date|string"
@@ -1533,10 +1532,10 @@
             },
             {
               "name": "modelValue",
-              "description": "Datepicker value (timestamp).",
+              "description": "Datepicker value in JS Date Object or String formatted in provided props.dateFormat.",
               "value": {
                 "kind": "expression",
-                "type": "number"
+                "type": "object|string"
               },
               "default": "null"
             },
@@ -1625,8 +1624,7 @@
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "Y-m-d"
+              }
             },
             {
               "name": "userFormat",
@@ -1695,7 +1693,7 @@
           "attributes": [
             {
               "name": "modelValue",
-              "description": "Dater picker range value as object with from and to keys (timestamp).",
+              "description": "Datepicker value in JS Date Objects or Strings formatted in provided props.dateFormat.",
               "value": {
                 "kind": "expression",
                 "type": "object"
@@ -1709,7 +1707,7 @@
                 "kind": "expression",
                 "type": "object"
               },
-              "default": "{\n  range: { from: 0, to: 0 },\n  label: \"\",\n  description: \"\"\n}"
+              "default": "{\n  range: { from: null, to: null },\n  label: \"\",\n  description: \"\"\n}"
             },
             {
               "name": "openDirectionX",
@@ -1814,8 +1812,7 @@
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "d.m.Y"
+              }
             },
             {
               "name": "id",
@@ -6552,7 +6549,7 @@
             },
             {
               "name": "dateDivider",
-              "description": "Show/hide date divider or set label for specific date.",
+              "description": "Show date divider label.",
               "value": {
                 "kind": "expression",
                 "type": "array|boolean"
@@ -6650,19 +6647,20 @@
           ],
           "slots": [
             {
-              "name": "thead-actions",
-              "description": "Use it to add actions instead table head (it appears when you select rows in table)."
+              "name": "header-actions",
+              "description": "Use it to add action buttons instead of table row when some rows are selected."
             },
             {
-              "name": "`thead-${column.key}`",
+              "name": "`header-${column.key}`",
               "description": "Use it to customise table column."
             },
             {
-              "name": "`thead-${column.key}-after`",
+              "name": "`header-${column.key}-after`",
               "description": "Use it to add content after table column."
             },
             {
-              "name": "before-header-row"
+              "name": "before-header",
+              "description": "Use it to add something before header row."
             },
             {
               "name": "before-first-row",
@@ -6672,18 +6670,16 @@
               "name": "`cell-${key}`",
               "description": "Use it to customise table cell item (in whole column)."
             },
-            {
-              "name": "cell-other"
-            },
             {
               "name": "after-last-row",
               "description": "Use it to add something after last row."
             },
             {
-              "name": "empty-table-msg"
+              "name": "empty-state",
+              "description": "Use it to add custom empty state."
             },
             {
-              "name": "tfoot",
+              "name": "footer",
               "description": "Use it to add something in table footer."
             }
           ],