vueless 0.0.32 → 0.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.form-calendar/components/DayView.vue

@@ -210,16 +210,25 @@ function getDay(date, dayNumber) {
 }
 
 function getDayClasses(day) {
-  if (isToday(day) && props.selectedDate === null) {
+  const isNotSelectedDate =
+    (!isSelectedDay(day) && !isSelectedToDay(day)) || props.selectedDate === null;
+
+  if (isToday(day) && isNotSelectedDate) {
     return [currentDayAttrs.value.class];
   }
 
   if (props.range && isSelectedDay(day)) {
-    return [inRangeFirstDayAttrs.value.class];
+    return [
+      inRangeFirstDayAttrs.value.class,
+      isAnotherMothDay(day, activeMonthDate.value) && anotherMonthDayAttrs.value.class,
+    ];
   }
 
   if (props.range && isSelectedToDay(day)) {
-    return [inRangeLastDayAttrs.value.class];
+    return [
+      inRangeLastDayAttrs.value.class,
+      isAnotherMothDay(day, activeMonthDate.value) && anotherMonthDayAttrs.value.class,
+    ];
   }
 
   if (

package/ui.form-calendar/configs/default.config.js

@@ -23,11 +23,11 @@ export default /*tw*/ {
   weekDaysWrapper: "grid grid-cols-7",
   weekDay: "flex size-8 items-center justify-center text-xs uppercase text-gray-500",
   daysWrapper: "grid grid-cols-7",
-  day: "mx-auto w-full h-8 rounded-lg text-sm hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed",
+  day: "mx-auto size-8 rounded-lg text-sm hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed",
   activeDay: "bg-gray-100 hover:bg-gray-100",
-  inRangeFirstDay: "rounded-none rounded-l-lg bg-gray-200 text-gray-900",
-  inRangeLastDay: "rounded-none rounded-r-lg bg-gray-200 text-gray-900",
-  inRangeDay: "bg-gray-100 text-gray-900 hover:bg-gray-100 rounded-none",
+  inRangeFirstDay: "rounded-none rounded-l-lg bg-gray-200 text-gray-900 hover:bg-gray-200",
+  inRangeLastDay: "rounded-none rounded-r-lg bg-gray-200 text-gray-900 hover:bg-gray-200",
+  inRangeDay: "bg-gray-100 text-gray-900 hover:!bg-gray-200 rounded-none",
   selectedDay: "bg-gray-900 text-white hover:bg-gray-900",
   currentDay: "hover:bg-gray-100 border-2 border-gray-900",
   anotherMonthDay: "hover:bg-gray-100 text-gray-400",
@@ -80,6 +80,15 @@ export default /*tw*/ {
         friday: "Friday",
         saturday: "Saturday",
       },
+      userFormat: {
+        sunday: "Sunday",
+        monday: "Monday",
+        tuesday: "Tuesday",
+        wednesday: "Wednesday",
+        thursday: "Thursday",
+        friday: "Friday",
+        saturday: "Saturday",
+      },
     },
     months: {
       shorthand: {
@@ -110,6 +119,20 @@ export default /*tw*/ {
         november: "November",
         december: "December",
       },
+      userFormat: {
+        january: "January",
+        february: "February",
+        march: "March",
+        april: "April",
+        may: "May",
+        june: "June",
+        july: "July",
+        august: "August",
+        september: "September",
+        october: "October",
+        november: "November",
+        december: "December",
+      },
     },
     timeLabel: "Time",
     okLabel: "Ok",

package/ui.form-calendar/index.vue

@@ -358,6 +358,24 @@ const locale = computed(() => {
   return formattedLocale;
 });
 
+const userFormatLocale = computed(() => {
+  const currentLocale = props.config.i18n || config.value.i18n;
+
+  const formattedLocale = {
+    ...currentLocale,
+    months: {
+      shorthand: getSortedLocale(currentLocale.months.shorthand, LOCALE_TYPE.month),
+      longhand: getSortedLocale(currentLocale.months.userFormat, LOCALE_TYPE.month),
+    },
+    weekdays: {
+      shorthand: getSortedLocale(currentLocale.weekdays.shorthand, LOCALE_TYPE.day),
+      longhand: getSortedLocale(currentLocale.weekdays.userFormat, LOCALE_TYPE.day),
+    },
+  };
+
+  return formattedLocale;
+});
+
 const isTimepickerEnabled = computed(() => {
   return props.timepicker && !props.range;
 });
@@ -448,9 +466,9 @@ const formattedTime = computed(() => {
 });
 
 const userFormattedDate = computed(() => {
-  const date = formatDate(selectedDate.value, props.userFormat, locale.value);
+  const date = formatDate(selectedDate.value, props.userFormat, userFormatLocale.value);
   const dateTo = props.range
-    ? formatDate(selectedDateTo.value, props.userFormat, locale.value)
+    ? formatDate(selectedDateTo.value, props.userFormat, userFormatLocale.value)
     : undefined;
 
   if (isTimepickerEnabled.value && selectedDate.value) {

package/ui.form-date-picker/composables/attrs.composable.js

@@ -1,7 +1,7 @@
 import useUI from "../../composable.ui";
 
 import defaultConfig from "../configs/default.config";
-import { computed } from "vue";
+import { computed, watchEffect } from "vue";
 
 export default function useAttrs(props, { isShownCalendar }) {
   const { config, getAttrs } = useUI(defaultConfig, () => props.config);
@@ -14,6 +14,40 @@ export default function useAttrs(props, { isShownCalendar }) {
     return isShownCalendar.value ? inputActiveAttrs.value : inputBlurAttrs.value;
   });
 
+  // This watcher rewrites default calendar locales with datepicker range locales
+  // Watcher will not rewrite custom calendar locales
+  watchEffect(() => {
+    if (!calendarAttrs.value.config) {
+      calendarAttrs.value.config = {};
+    }
+
+    if (calendarAttrs.value.config.i18n || !props.config.i18n) {
+      return;
+    }
+
+    calendarAttrs.value.config.i18n = {
+      ...config.value.i18n,
+      weekdays: {
+        shorthand: { ...config.value.i18n.weekdays.shorthand },
+        longhand: { ...config.value.i18n.weekdays.longhand },
+      },
+      months: {
+        shorthand: { ...config.value.i18n.months.shorthand },
+        longhand: { ...config.value.i18n.months.longhand },
+      },
+    };
+
+    if (props.config.i18n.weekdays.userFormat) {
+      calendarAttrs.value.config.i18n.userFormat = {
+        ...config.value.i18n.weekdays.userFormat,
+      };
+    }
+
+    if (props.config.i18n.months.userFormat) {
+      calendarAttrs.value.config.i18n.userFormat = { ...config.value.i18n.months.userFormat };
+    }
+  });
+
   return {
     config,
     calendarAttrs,

package/ui.form-date-picker/configs/default.config.js

@@ -14,6 +14,86 @@ export default /*tw*/ {
     leaveActiveClass: "transition transform ease-in duration-75",
     leaveToClass: "opacity-0 scale-95",
   },
+  i18n: {
+    today: "Today",
+    yesterday: "Yesterday",
+    tomorrow: "Tomorrow",
+    weekdays: {
+      shorthand: {
+        sunday: "Sun",
+        monday: "Mon",
+        tuesday: "Tue",
+        wednesday: "Wed",
+        thursday: "Thu",
+        friday: "Fri",
+        saturday: "Sat",
+      },
+      longhand: {
+        sunday: "Sunday",
+        monday: "Monday",
+        tuesday: "Tuesday",
+        wednesday: "Wednesday",
+        thursday: "Thursday",
+        friday: "Friday",
+        saturday: "Saturday",
+      },
+      userFormat: {
+        sunday: "Sunday",
+        monday: "Monday",
+        tuesday: "Tuesday",
+        wednesday: "Wednesday",
+        thursday: "Thursday",
+        friday: "Friday",
+        saturday: "Saturday",
+      },
+    },
+    months: {
+      shorthand: {
+        january: "Jan",
+        february: "Feb",
+        march: "Mar",
+        april: "Apr",
+        may: "May",
+        june: "Jun",
+        july: "Jul",
+        august: "Aug",
+        september: "Sep",
+        october: "Oct",
+        november: "Nov",
+        december: "Dec",
+      },
+      longhand: {
+        january: "January",
+        february: "February",
+        march: "March",
+        april: "April",
+        may: "May",
+        june: "June",
+        july: "July",
+        august: "August",
+        september: "September",
+        october: "October",
+        november: "November",
+        december: "December",
+      },
+      userFormat: {
+        january: "January",
+        february: "February",
+        march: "March",
+        april: "April",
+        may: "May",
+        june: "June",
+        july: "July",
+        august: "August",
+        september: "September",
+        october: "October",
+        november: "November",
+        december: "December",
+      },
+    },
+    timeLabel: "Time",
+    okLabel: "Ok",
+  },
   defaultVariants: {
     dateFormat: "Y-m-d",
     userFormat: "F j, Y",

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

@@ -60,6 +60,12 @@ import { VIEW } from "../ui.form-calendar/constants";
 
 import UIService, { getRandomId } from "../service.ui";
 
+import {
+  addDays,
+  isSameDay,
+  getDateFromUnixTimestamp,
+} from "../ui.form-calendar/services/date.service";
+
 import useAttrs from "./composables/attrs.composable";
 import defaultConfig from "./configs/default.config";
 import { UDatePicker } from "./constants";
@@ -193,6 +199,8 @@ const props = defineProps({
 
 const emit = defineEmits(["update:modelValue", "input"]);
 
+const STANDARD_USER_FORMAT = "l, j F, Y";
+
 const isShownCalendar = ref(false);
 const userFormatDate = ref("");
 const formattedDate = ref("");
@@ -216,7 +224,7 @@ const { config, inputAttrs, calendarAttrs } = useAttrs(props, { isShownCalendar
 function activate() {
   isShownCalendar.value = true;
 
-  nextTick(() => calendarRef.value.wrapperRef.focus());
+  nextTick(() => calendarRef.value?.wrapperRef?.focus());
 }
 
 function deactivate() {
@@ -226,7 +234,7 @@ function deactivate() {
 }
 
 function onUserFormatDateChange(value) {
-  userFormatDate.value = value || "";
+  userFormatDate.value = formatUserDate(value) || "";
 }
 
 function onFormattedDateChange(value) {
@@ -240,14 +248,45 @@ function onSubmit() {
 function onBlur(event) {
   const { relatedTarget } = event;
 
-  if (!calendarRef.value.wrapperRef.contains(relatedTarget)) deactivate();
+  if (!calendarRef?.value?.wrapperRef?.contains(relatedTarget)) deactivate();
+}
+
+function formatUserDate(data) {
+  if (props.dateFormat !== STANDARD_USER_FORMAT) return data;
+
+  const currentLocale = props.config.i18n || config.value.i18n;
+
+  let prefix = "";
+  const formattedDate = data.charAt(0).toUpperCase() + data.toLowerCase().slice(1);
+  const formattedDateWithoutDay = formattedDate.split(",").slice(1).join("").trim();
+
+  const selectedDate = getDateFromUnixTimestamp(localValue.value);
+  const today = new Date();
+
+  const isToday = isSameDay(today, selectedDate);
+  const isYesterday = isSameDay(addDays(today, -1), selectedDate);
+  const isTomorrow = isSameDay(addDays(today, 1), selectedDate);
+
+  if (isToday) {
+    prefix = currentLocale.today;
+  }
+
+  if (isYesterday) {
+    prefix = currentLocale.yesterday;
+  }
+
+  if (isTomorrow) {
+    prefix = currentLocale.tomorrow;
+  }
+
+  return prefix ? `${prefix}, ${formattedDateWithoutDay}` : formattedDate;
 }
 
 function onInput() {
   nextTick(() => {
-    calendarRef.value.wrapperRef.blur();
+    calendarRef.value?.wrapperRef?.blur();
     emit("input", {
-      userFormatDate: userFormatDate.value,
+      userFormatDate: formatUserDate(userFormatDate.value),
       value: localValue.value,
       formattedDate: formattedDate.value,
     });

package/ui.form-date-picker-range/composables/attrs.composable.js

@@ -25,11 +25,12 @@ export default function useAttrs(props, { isShownMenu }) {
       calendarAttrs.value.config = {};
     }
 
-    if (calendarAttrs.value.config.i18n) {
+    if (calendarAttrs.value.config.i18n || !props.config.i18n) {
       return;
     }
 
     calendarAttrs.value.config.i18n = {
+      ...config.value.i18n,
       weekdays: {
         shorthand: { ...config.value.i18n.weekdays.shorthand },
         longhand: { ...config.value.i18n.weekdays.longhand },
@@ -39,6 +40,16 @@ export default function useAttrs(props, { isShownMenu }) {
         longhand: { ...config.value.i18n.months.longhand },
       },
     };
+
+    if (props.config.i18n.weekdays.userFormat) {
+      calendarAttrs.value.config.i18n.userFormat = {
+        ...config.value.i18n.weekdays.userFormat,
+      };
+    }
+
+    if (props.config.i18n.months.userFormat) {
+      calendarAttrs.value.config.i18n.userFormat = { ...config.value.i18n.months.userFormat };
+    }
   });
 
   const inputAttrs = computed(() => {

package/ui.form-date-picker-range/configs/default.config.js

@@ -77,15 +77,18 @@ export default /*tw*/ {
     navigation: "px-0 w-full",
     nextIcon: {
       defaultVariants: {
-        variant: "dark",
+        variant: "grayscale",
+        size: "sm",
       },
     },
     prevIcon: {
       defaultVariants: {
-        variant: "dark",
+        variant: "grayscale",
+        size: "sm",
       },
     },
-    day: "font-medium w-full h-10 text-sm",
+    day: "font-medium w-full h-10 text-sm mb-0.5",
+    currentDay: "text-white bg-gray-900 hover:bg-gray-900 hover:text-white",
     weekDay: "text-sm size-10",
     month: "font-medium",
     selectedMonth: "bg-zinc-100 text-gray-900 hover:text-white",
@@ -121,6 +124,15 @@ export default /*tw*/ {
         friday: "Friday",
         saturday: "Saturday",
       },
+      userFormat: {
+        sunday: "Sunday",
+        monday: "Monday",
+        tuesday: "Tuesday",
+        wednesday: "Wednesday",
+        thursday: "Thursday",
+        friday: "Friday",
+        saturday: "Saturday",
+      },
     },
     months: {
       shorthand: {
@@ -151,6 +163,20 @@ export default /*tw*/ {
         november: "November",
         december: "December",
       },
+      userFormat: {
+        january: "January",
+        february: "February",
+        march: "March",
+        april: "April",
+        may: "May",
+        june: "June",
+        july: "July",
+        august: "August",
+        september: "September",
+        october: "October",
+        november: "November",
+        december: "December",
+      },
     },
   },
   defaultVariants: {

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

@@ -139,6 +139,7 @@
             ref="rangeInputStartRef"
             v-model="rangeStart"
             :error="inputRangeStartError"
+            size="sm"
             v-bind="rangeInputAttrs"
             :name="rangeInputName"
             @input="onInputRangeInput($event, INPUT_RANGE_TYPE.start)"
@@ -149,6 +150,7 @@
             ref="rangeInputEndRef"
             v-model="rangeEnd"
             :error="inputRangeEndError"
+            size="sm"
             v-bind="rangeInputAttrs"
             :name="rangeInputName"
             @input="onInputRangeInput($event, INPUT_RANGE_TYPE.end)"
@@ -205,6 +207,7 @@ import {
   getStartOfWeek,
   getStartOfYear,
   getDatesDifference,
+  isSameMonth,
 } from "../ui.form-calendar/services/date.service";
 
 import {
@@ -427,6 +430,24 @@ const locale = computed(() => {
   return formattedLocale;
 });
 
+const userFormatLocale = computed(() => {
+  const currentLocale = props.config.i18n || config.value.i18n;
+
+  const formattedLocale = {
+    ...currentLocale,
+    months: {
+      shorthand: getSortedLocale(currentLocale.months.shorthand, LOCALE_TYPE.month),
+      longhand: getSortedLocale(currentLocale.months.userFormat, LOCALE_TYPE.month),
+    },
+    weekdays: {
+      shorthand: getSortedLocale(currentLocale.weekdays.shorthand, LOCALE_TYPE.day),
+      longhand: getSortedLocale(currentLocale.weekdays.userFormat, LOCALE_TYPE.day),
+    },
+  };
+
+  return formattedLocale;
+});
+
 const periods = computed(() => [
   {
     name: PERIOD.week,
@@ -489,9 +510,9 @@ const userFormatDate = computed(() => {
   const to = localValue.value.to !== null ? getDateFromUnixTimestamp(localValue.value.to) : null;
 
   if (isDefaultTitle) {
-    let startMonthName = locale.value.months.longhand[from.getMonth()];
+    let startMonthName = userFormatLocale.value.months.longhand[from.getMonth()];
     let startYear = from.getFullYear();
-    let endMonthName = locale.value.months.longhand[to?.getMonth()];
+    let endMonthName = userFormatLocale.value.months.longhand[to?.getMonth()];
     let endYear = to?.getFullYear();
 
     if (startMonthName === endMonthName && endMonthName === endYear) {
@@ -502,22 +523,24 @@ const userFormatDate = computed(() => {
       startYear = "";
     }
 
-    const fromTitle = `${from.getDate()} ${startMonthName} ${startYear}`;
+    const fromTitle = isSameMonth(from, to)
+      ? from.getDate()
+      : `${from.getDate()} ${startMonthName} ${startYear}`;
     const toTitle = to ? `${to.getDate()} ${endMonthName} ${endYear}` : "";
 
     title = `${fromTitle} – ${toTitle}`;
   }
 
   if (isPeriod.value.month) {
-    const startMonthName = locale.value.months.longhand[from.getMonth()];
+    const startMonthName = userFormatLocale.value.months.longhand[from.getMonth()];
     const startYear = from.getFullYear();
 
     title = `${startMonthName} ${startYear}`;
   }
 
   if (isPeriod.value.quarter || isPeriod.value.year) {
-    const startMonthName = locale.value.months.longhand[from.getMonth()];
-    const endMonthName = locale.value.months.longhand[to?.getMonth()];
+    const startMonthName = userFormatLocale.value.months.longhand[from.getMonth()];
+    const endMonthName = userFormatLocale.value.months.longhand[to?.getMonth()];
     const endYear = to?.getFullYear();
 
     const fromTitle = `${from.getDate()} ${startMonthName}`;
@@ -745,8 +768,11 @@ function onBlur(event) {
 
 function onBlurRangeInput(event) {
   const { relatedTarget } = event;
+  const isRangeInputFocus = relatedTarget?.name === rangeInputName.value;
 
-  menuRef.value.focus();
+  if (!isRangeInputFocus) {
+    menuRef.value.focus();
+  }
 
   if (!menuRef.value.contains(relatedTarget) && !isHoverEvent.value) {
     deactivate();

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "contributions": {
     "html": {
       "description-markup": "markdown",