vueless 0.0.384 → 0.0.386

package/package.json

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

package/ui.form-calendar/UCalendarDayView.vue

@@ -6,7 +6,21 @@
     <div v-bind="daysAttrs">
       <template v-for="day in days" :key="day">
         <UButton
-          v-if="getDayState(day).isCurrentDay && !getDayState(day).isCurrentDayInRange"
+          v-if="getDayState(day).isSelectedDay && !props.range"
+          tabindex="-1"
+          variant="primary"
+          color="brand"
+          no-ring
+          square
+          v-bind="selectedDayAttrs"
+          :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
+          :label="formatDate(day, 'j', locale)"
+          @mousedown.prevent.capture
+          @click="onClickDay(day)"
+        />
+
+        <UButton
+          v-else-if="getDayState(day).isCurrentDay && !getDayState(day).isDayInRange"
           tabindex="-1"
           variant="thirdary"
           color="brand"
@@ -20,13 +34,14 @@
         />
 
         <UButton
-          v-else-if="getDayState(day).isCurrentDayInRange"
+          v-else-if="getDayState(day).isCurrentFirstDayInRange"
           tabindex="-1"
           variant="thirdary"
           color="brand"
           no-ring
           square
-          v-bind="currentDayInRangeAttrs"
+          filled
+          v-bind="currentFirstDayInRangeAttrs"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
           :label="formatDate(day, 'j', locale)"
           @mousedown.prevent.capture
@@ -34,14 +49,14 @@
         />
 
         <UButton
-          v-else-if="getDayState(day).isFirstDayInRange"
+          v-else-if="getDayState(day).isCurrentLastDayInRange"
           tabindex="-1"
           variant="thirdary"
           color="brand"
           no-ring
           square
           filled
-          v-bind="firstDayInRangeAttrs"
+          v-bind="currentLastDayInRangeAttrs"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
           :label="formatDate(day, 'j', locale)"
           @mousedown.prevent.capture
@@ -49,14 +64,14 @@
         />
 
         <UButton
-          v-else-if="getDayState(day).isAnotherMonthFirstDayInRange"
+          v-else-if="getDayState(day).isFirstDayInRange"
           tabindex="-1"
           variant="thirdary"
           color="brand"
           no-ring
           square
           filled
-          v-bind="anotherMonthFirstDayInRangeAttrs"
+          v-bind="firstDayInRangeAttrs"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
           :label="formatDate(day, 'j', locale)"
           @mousedown.prevent.capture
@@ -79,14 +94,14 @@
         />
 
         <UButton
-          v-else-if="getDayState(day).isAnotherMonthLastDayInRange"
+          v-else-if="getDayState(day).isAnotherMonthFirstDayInRange"
           tabindex="-1"
           variant="thirdary"
           color="brand"
           no-ring
           square
           filled
-          v-bind="anotherMonthLastDayInRangeAttrs"
+          v-bind="anotherMonthFirstDayInRangeAttrs"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
           :label="formatDate(day, 'j', locale)"
           @mousedown.prevent.capture
@@ -94,13 +109,14 @@
         />
 
         <UButton
-          v-else-if="getDayState(day).isSelectedDay"
+          v-else-if="getDayState(day).isAnotherMonthLastDayInRange"
           tabindex="-1"
-          variant="primary"
+          variant="thirdary"
           color="brand"
           no-ring
           square
-          v-bind="selectedDayAttrs"
+          filled
+          v-bind="anotherMonthLastDayInRangeAttrs"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
           :label="formatDate(day, 'j', locale)"
           @mousedown.prevent.capture
@@ -108,13 +124,13 @@
         />
 
         <UButton
-          v-else-if="getDayState(day).isActiveDay"
+          v-else-if="getDayState(day).isDayInRange && getDayState(day).isCurrentDay"
           tabindex="-1"
           variant="thirdary"
           color="brand"
           no-ring
           square
-          v-bind="activeDayAttrs"
+          v-bind="currentDayInRangeAttrs"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
           :label="formatDate(day, 'j', locale)"
           @mousedown.prevent.capture
@@ -135,6 +151,20 @@
           @click="onClickDay(day)"
         />
 
+        <UButton
+          v-else-if="getDayState(day).isActiveDay"
+          tabindex="-1"
+          variant="thirdary"
+          color="brand"
+          no-ring
+          square
+          v-bind="activeDayAttrs"
+          :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
+          :label="formatDate(day, 'j', locale)"
+          @mousedown.prevent.capture
+          @click="onClickDay(day)"
+        />
+
         <UButton
           v-else-if="getDayState(day).isAnotherMonthDay"
           tabindex="-1"
@@ -150,7 +180,7 @@
         />
 
         <UButton
-          v-else
+          v-else-if="!getDayState(day).isSelectedDay"
           tabindex="-1"
           variant="thirdary"
           color="brand"
@@ -255,6 +285,8 @@ const {
   anotherMonthLastDayInRangeAttrs,
   selectedDayAttrs,
   activeDayAttrs,
+  currentLastDayInRangeAttrs,
+  currentFirstDayInRangeAttrs,
 } = useAttrs(props);
 
 const localSelectedDate = computed(() => {
@@ -376,31 +408,31 @@ function getDayState(day) {
       props.dateFormat,
     );
 
-  const isNotSelectedDate =
-    (!isSameDay(day, localSelectedDate.value) && !isSameDay(day, props.selectedDateTo)) ||
-    props.selectedDate === null;
-
-  const isCurrentDay = isToday(day) && isNotSelectedDate;
-  const isCurrentDayInRange = isCurrentDay && isDayInRange;
+  const isSelectedDay = isSameDay(day, localSelectedDate.value) && props.selectedDate !== null;
+  const isCurrentDay = isToday(day);
   const isAnotherMonthDay = isAnotherMothDay(day, activeMonthDate.value);
+  const isCurrentDayInRange = isCurrentDay && isDayInRange;
   const isFirstDayInRange = props.range && isSameDay(day, localSelectedDate.value);
-  const isAnotherMonthFirstDayInRange = isFirstDayInRange && isAnotherMonthDay;
   const isLastDayInRange = props.range && isSameDay(day, props.selectedDateTo);
-  const isAnotherMonthLastDayInRange = isLastDayInRange && isLastDayInRange;
-  const isSelectedDay = isSameDay(day, localSelectedDate.value);
-  const isActiveDay = isSameDay(props.activeDate, day);
+  const isCurrentFirstDayInRange = isFirstDayInRange && isCurrentDay;
+  const isCurrentLastDayInRange = isLastDayInRange && isCurrentDay;
+  const isAnotherMonthFirstDayInRange = isFirstDayInRange && isAnotherMonthDay;
+  const isAnotherMonthLastDayInRange = isLastDayInRange && isAnotherMonthDay;
+  const isActiveDay = isSameDay(props.activeDate, day) && !props.range;
 
   return {
+    isDayInRange,
+    isSelectedDay,
     isCurrentDay,
+    isAnotherMonthDay,
     isCurrentDayInRange,
     isFirstDayInRange,
-    isAnotherMonthFirstDayInRange,
     isLastDayInRange,
+    isCurrentFirstDayInRange,
+    isCurrentLastDayInRange,
+    isAnotherMonthFirstDayInRange,
     isAnotherMonthLastDayInRange,
-    isDayInRange,
-    isSelectedDay,
     isActiveDay,
-    isAnotherMonthDay,
   };
 }
 

package/ui.form-calendar/UCalendarMonthView.vue

@@ -1,8 +1,22 @@
 <template>
   <div v-bind="monthViewAttrs">
-    <template v-for="month in months" :key="month">
+    <template v-for="(month, idx) in months" :key="month">
       <UButton
-        v-if="getMonthState(month).isCurrentMonth && !getMonthState(month).isCurrentMonthInRange"
+        v-if="getMonthState(month, idx).isSelectedMonth && !props.range"
+        variant="primary"
+        color="brand"
+        no-ring
+        v-bind="selectedMonthAttrs"
+        :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
+        :label="formatDate(month, 'M', props.locale)"
+        @click="onClickMonth(month)"
+        @mousedown.prevent.capture
+      />
+
+      <UButton
+        v-else-if="
+          getMonthState(month, idx).isCurrentMonth && !getMonthState(month, idx).isMonthInRange
+        "
         variant="thirdary"
         color="brand"
         no-ring
@@ -14,11 +28,25 @@
       />
 
       <UButton
-        v-else-if="getMonthState(month).isCurrentMonthAndNotSelected"
-        variant="primary"
+        v-else-if="getMonthState(month, idx).isCurrentFirstMonthInRange"
+        variant="thirdary"
         color="brand"
         no-ring
-        v-bind="currentMonthInRangeAttrs"
+        filled
+        v-bind="currentFirstMonthInRangeAttrs"
+        :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
+        :label="formatDate(month, 'M', props.locale)"
+        @click="onClickMonth(month)"
+        @mousedown.prevent.capture
+      />
+
+      <UButton
+        v-else-if="getMonthState(month, idx).isCurrentLastMonthInRange"
+        variant="thirdary"
+        color="brand"
+        no-ring
+        filled
+        v-bind="currentLastMonthInRangeAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(month, 'M', props.locale)"
         @click="onClickMonth(month)"
@@ -26,7 +54,7 @@
       />
 
       <UButton
-        v-else-if="getMonthState(month).isFirstMonthInRange"
+        v-else-if="getMonthState(month, idx).isFirstMonthInRange"
         variant="thirdary"
         color="brand"
         no-ring
@@ -39,7 +67,7 @@
       />
 
       <UButton
-        v-else-if="getMonthState(month).isLastMonthInRange"
+        v-else-if="getMonthState(month, idx).isLastMonthInRange"
         variant="thirdary"
         color="brand"
         no-ring
@@ -52,11 +80,26 @@
       />
 
       <UButton
-        v-else-if="getMonthState(month).isSingleMonthInRange"
-        variant="thirdary"
+        v-else-if="
+          getMonthState(month, idx).isCurrentMonthInRange &&
+          !getMonthState(month, idx).isMoreThanOneMonthRange
+        "
+        variant="primary"
         color="brand"
         no-ring
-        v-bind="singleMonthInRangeAttrs"
+        v-bind="singleCurrentMonthInRangeAttrs"
+        :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
+        :label="formatDate(month, 'M', props.locale)"
+        @click="onClickMonth(month)"
+        @mousedown.prevent.capture
+      />
+
+      <UButton
+        v-else-if="getMonthState(month, idx).isCurrentMonthInRange"
+        variant="primary"
+        color="brand"
+        no-ring
+        v-bind="currentMonthInRangeAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(month, 'M', props.locale)"
         @click="onClickMonth(month)"
@@ -64,11 +107,14 @@
       />
 
       <UButton
-        v-else-if="getMonthState(month).isMonthInRange"
+        v-else-if="
+          !getMonthState(month, idx).isMoreThanOneMonthRange &&
+          getMonthState(month, idx).isMonthInRange
+        "
         variant="thirdary"
         color="brand"
         no-ring
-        v-bind="monthInRangeAttrs"
+        v-bind="singleMonthInRangeAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(month, 'M', props.locale)"
         @click="onClickMonth(month)"
@@ -76,11 +122,14 @@
       />
 
       <UButton
-        v-else-if="getMonthState(month).isSelectedMonth"
+        v-else-if="
+          getMonthState(month, idx).isMonthInRange &&
+          getMonthState(month, idx).isMoreThanOneMonthRange
+        "
         variant="thirdary"
         color="brand"
         no-ring
-        v-bind="selectedMonthAttrs"
+        v-bind="monthInRangeAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(month, 'M', props.locale)"
         @click="onClickMonth(month)"
@@ -88,7 +137,7 @@
       />
 
       <UButton
-        v-else-if="getMonthState(month).isActiveMonth"
+        v-else-if="getMonthState(month, idx).isActiveMonth"
         variant="thirdary"
         color="brand"
         no-ring
@@ -191,6 +240,9 @@ const {
   monthInRangeAttrs,
   selectedMonthAttrs,
   activeMonthAttrs,
+  currentLastMonthInRangeAttrs,
+  currentFirstMonthInRangeAttrs,
+  singleCurrentMonthInRangeAttrs,
 } = useAttrs(props);
 
 const localSelectedDate = computed(() => {
@@ -220,42 +272,43 @@ function getMonth(monthNumber) {
   return newDate;
 }
 
-function getMonthState(month) {
-  const isMonthInRange =
+function getMonthState(month, index) {
+  const startRangeIndex = months.value.findIndex((month) => {
+    return isSameMonth(month, localSelectedDate.value);
+  });
+
+  const endRangeIndex = months.value.findIndex((month) => {
+    return isSameMonth(month, props.selectedDateTo);
+  });
+
+  const isMonthInRange = index >= startRangeIndex && index <= endRangeIndex;
+  const isSelectedMonth =
+    isSameMonth(month, localSelectedDate.value) && props.selectedDate !== null;
+  const isPresentMonth = isCurrentMonth(month);
+  const isMoreThanOneMonthRange =
     props.range &&
-    localSelectedDate.value &&
     props.selectedDateTo &&
-    !dateIsOutOfRange(
-      month,
-      props.selectedDate,
-      props.selectedDateTo,
-      props.locale,
-      props.dateFormat,
-    );
-
-  const isNotSelectedDate =
-    (!isSelectedMonth(month) && !isSelectedMonth(month)) || props.selectedDate === null;
-
-  const isMoreThenOneMonthRange =
-    props.selectedDateTo && isMoreThanOneMonthDiff(props.selectedDate, props.selectedDateTo);
-
-  const isCurrentMonthAndNotSelected = isCurrentMonth(month) && isNotSelectedDate;
-  const isCurrentMonthInRange =
-    isMonthInRange && isCurrentMonthAndNotSelected && props.selectedDateTo;
-  const isLastMonthInRange = props.range && isSelectedToMonth(month) && isMoreThenOneMonthRange;
-  const isFirstMonthInRange = props.range && isSelectedMonth(month) && isMoreThenOneMonthRange;
-  const isSingleMonthInRange = props.range && isSelectedMonth(month) && !isMoreThenOneMonthRange;
+    isMoreThanOneMonthDiff(props.selectedDate, props.selectedDateTo);
   const isActiveMonth = isSameMonth(props.activeMonth, month) && !props.range;
+  const isCurrentMonthInRange = isMonthInRange && isPresentMonth;
+  const isLastMonthInRange =
+    props.range && isSameMonth(month, props.selectedDateTo) && isMoreThanOneMonthRange;
+  const isFirstMonthInRange =
+    props.range && isSameMonth(month, localSelectedDate.value) && isMoreThanOneMonthRange;
+  const isCurrentFirstMonthInRange = props.range && isFirstMonthInRange && isPresentMonth;
+  const isCurrentLastMonthInRange = props.range && isLastMonthInRange && isPresentMonth;
 
   return {
-    isCurrentMonthAndNotSelected,
+    isSelectedMonth,
+    isCurrentMonth: isPresentMonth,
+    isMoreThanOneMonthRange,
+    isActiveMonth,
     isCurrentMonthInRange,
     isLastMonthInRange,
     isFirstMonthInRange,
-    isSingleMonthInRange,
+    isCurrentFirstMonthInRange,
+    isCurrentLastMonthInRange,
     isMonthInRange,
-    isSelectedMonth: isSelectedMonth(month),
-    isActiveMonth,
   };
 }
 
@@ -267,14 +320,6 @@ function isMoreThanOneMonthDiff(date, dateTo) {
   return yearDiff > 0 || monthDiff > 1 || (monthDiff === 1 && dayDiff > 0);
 }
 
-function isSelectedMonth(month) {
-  return isSameMonth(month, localSelectedDate.value);
-}
-
-function isSelectedToMonth(month) {
-  return isSameMonth(month, props.selectedDateTo);
-}
-
 function onClickMonth(month) {
   emit("input", month);
 }

package/ui.form-calendar/UCalendarYearView.vue

@@ -1,8 +1,20 @@
 <template>
   <div v-bind="yearViewAttrs">
-    <template v-for="year in years" :key="year">
+    <template v-for="(year, idx) in years" :key="year">
       <UButton
-        v-if="getYearState(year).isCurrentYear && !getYearState(year).isCurrentYearInRange"
+        v-if="getYearState(year, idx).isSelectedYear && !props.range"
+        variant="primary"
+        color="brand"
+        no-ring
+        v-bind="selectedYearAttrs"
+        :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
+        :label="formatDate(year, 'Y', props.locale)"
+        @click="onClickYear(year)"
+        @mousedown.prevent.capture
+      />
+
+      <UButton
+        v-else-if="getYearState(year, idx).isCurrentYear && !getYearState(year, idx).isYearInRange"
         variant="thirdary"
         color="brand"
         no-ring
@@ -14,11 +26,12 @@
       />
 
       <UButton
-        v-else-if="getYearState(year).isCurrentYearInRange"
+        v-else-if="getYearState(year, idx).isCurrentFirstYearInRange"
         variant="thirdary"
         color="brand"
         no-ring
-        v-bind="currentYearInRangeAttrs"
+        filled
+        v-bind="currentFirstYearInRangeAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(year, 'Y', props.locale)"
         @click="onClickYear(year)"
@@ -26,7 +39,20 @@
       />
 
       <UButton
-        v-else-if="getYearState(year).isFirstYearInRange"
+        v-else-if="getYearState(year, idx).isCurrentLastYearInRange"
+        variant="thirdary"
+        color="brand"
+        no-ring
+        filled
+        v-bind="currentLastYearInRangeAttrs"
+        :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
+        :label="formatDate(year, 'Y', props.locale)"
+        @click="onClickYear(year)"
+        @mousedown.prevent.capture
+      />
+
+      <UButton
+        v-else-if="getYearState(year, idx).isFirstYearInRange"
         variant="thirdary"
         color="brand"
         no-ring
@@ -39,7 +65,7 @@
       />
 
       <UButton
-        v-else-if="getYearState(year).isLastYearInRange"
+        v-else-if="getYearState(year, idx).isLastYearInRange"
         variant="thirdary"
         color="brand"
         no-ring
@@ -52,11 +78,14 @@
       />
 
       <UButton
-        v-else-if="getYearState(year).isSingleYearInRange"
+        v-else-if="
+          getYearState(year, idx).isCurrentYearInRange &&
+          !getYearState(year, idx).isMoreThanOneYearRange
+        "
         variant="thirdary"
         color="brand"
         no-ring
-        v-bind="singleYearInRangeAttrs"
+        v-bind="singleCurrentYearInRangeAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(year, 'Y', props.locale)"
         @click="onClickYear(year)"
@@ -64,11 +93,25 @@
       />
 
       <UButton
-        v-else-if="getYearState(year).isYearInRange"
+        v-else-if="getYearState(year, idx).isCurrentYearInRange"
         variant="thirdary"
         color="brand"
         no-ring
-        v-bind="yearInRangeAttrs"
+        v-bind="currentYearInRangeAttrs"
+        :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
+        :label="formatDate(year, 'Y', props.locale) + 'sd'"
+        @click="onClickYear(year)"
+        @mousedown.prevent.capture
+      />
+
+      <UButton
+        v-else-if="
+          !getYearState(year, idx).isMoreThanOneYearRange && getYearState(year, idx).isYearInRange
+        "
+        variant="thirdary"
+        color="brand"
+        no-ring
+        v-bind="singleYearInRangeAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(year, 'Y', props.locale)"
         @click="onClickYear(year)"
@@ -76,11 +119,13 @@
       />
 
       <UButton
-        v-else-if="getYearState(year).isSelectedYear"
-        variant="primary"
+        v-else-if="
+          getYearState(year, idx).isMoreThanOneYearRange && getYearState(year, idx).isYearInRange
+        "
+        variant="thirdary"
         color="brand"
         no-ring
-        v-bind="selectedYearAttrs"
+        v-bind="yearInRangeAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(year, 'Y', props.locale)"
         @click="onClickYear(year)"
@@ -88,7 +133,7 @@
       />
 
       <UButton
-        v-else-if="getYearState(year).isActiveYear"
+        v-else-if="getYearState(year, idx).isActiveYear"
         variant="thirdary"
         color="brand"
         no-ring
@@ -191,6 +236,9 @@ const {
   singleYearInRangeAttrs,
   selectedYearAttrs,
   activeYearAttrs,
+  singleCurrentYearInRangeAttrs,
+  currentLastYearInRangeAttrs,
+  currentFirstYearInRangeAttrs,
 } = useAttrs(props);
 
 const localSelectedDate = computed(() => {
@@ -224,53 +272,50 @@ function getYear(year) {
   return newDate;
 }
 
-function getYearState(year) {
-  const isYearInRange =
-    props.range &&
-    localSelectedDate.value &&
-    props.selectedDateTo &&
-    !dateIsOutOfRange(
-      year,
-      props.selectedDate,
-      props.selectedDateTo,
-      props.locale,
-      props.dateFormat,
-    );
-
-  const isNotSelectedDate =
-    (!isSelectedMonth(year) && !isSelectedMonth(year)) || props.selectedDate === null;
+function getYearState(year, index) {
+  const startRangeIndex = years.value.findIndex((year) => {
+    return year.getFullYear() === localSelectedDate.value?.getFullYear();
+  });
+
+  const endRangeIndex = years.value.findIndex((year) => {
+    return year.getFullYear() === props.selectedDateTo?.getFullYear();
+  });
 
+  const isYearInRange = index >= startRangeIndex && index <= endRangeIndex;
+  const isSelectedYear = isSameMonth(year, localSelectedDate.value) && props.selectedDate !== null;
+  const isPresentYear = isCurrentYear(year);
   const isMoreThanOneYearRange =
-    props.selectedDateTo &&
-    props.selectedDateTo.getFullYear() - props.selectedDate.getFullYear() > 1;
-
-  const isFirstYear = year.getFullYear() === props.selectedDate.getFullYear();
-  const isLastYear =
-    props.selectedDateTo && year.getFullYear() === props.selectedDateTo.getFullYear();
-
-  const isCurrentDate = isCurrentYear(year) && isNotSelectedDate;
-  const isCurrentYearInRange = isCurrentDate && isYearInRange;
-  const isFirstYearInRange = props.range && isFirstYear && isMoreThanOneYearRange;
-  const isLastYearInRange = props.range && isLastYear && isMoreThanOneYearRange;
-  const isSingleYearInRange = props.range && isFirstYear && !isMoreThanOneYearRange;
+    props.selectedDateTo?.getFullYear() - props.selectedDate?.getFullYear() >= 1;
   const isActiveYear = isSameMonth(props.activeMonth, year) && !props.range;
+  const isCurrentYearInRange = isYearInRange && isPresentYear;
+
+  const isLastYearInRange =
+    props.range &&
+    year.getFullYear() === props.selectedDateTo?.getFullYear() &&
+    isMoreThanOneYearRange;
+
+  const isFirstYearInRange =
+    props.range &&
+    year.getFullYear() === localSelectedDate.value?.getFullYear() &&
+    isMoreThanOneYearRange;
+
+  const isCurrentFirstYearInRange = props.range && isFirstYearInRange && isPresentYear;
+  const isCurrentLastYearInRange = props.range && isLastYearInRange && isPresentYear;
 
   return {
-    isCurrentYear: isCurrentDate,
+    isSelectedYear,
+    isCurrentYear: isPresentYear,
+    isMoreThanOneYearRange,
+    isActiveYear,
     isCurrentYearInRange,
-    isFirstYearInRange,
     isLastYearInRange,
+    isFirstYearInRange,
+    isCurrentFirstYearInRange,
+    isCurrentLastYearInRange,
     isYearInRange,
-    isSingleYearInRange,
-    isSelectedYear: isSelectedMonth(year),
-    isActiveYear,
   };
 }
 
-function isSelectedMonth(month) {
-  return isSameMonth(month, localSelectedDate.value);
-}
-
 function onClickYear(year) {
   emit("input", year);
 }

package/ui.form-calendar/config.js

@@ -31,6 +31,8 @@ export default /*tw*/ {
   firstDayInRange: "",
   anotherMonthFirstDayInRange: "",
   lastDayInRange: "",
+  currentLastDayInRange: "",
+  currentFirstDayInRange: "",
   anotherMonthLastDayInRange: "",
   selectedDay: "",
   activeDay: "",
@@ -38,9 +40,12 @@ export default /*tw*/ {
   month: "{UButton} mx-auto flex h-12 w-full",
   currentMonth: "",
   currentMonthInRange: "",
+  currentLastMonthInRange: "",
+  currentFirstMonthInRange: "",
   lastMonthInRange: "",
   firstMonthInRange: "",
   singleMonthInRange: "rounded-dynamic",
+  singleCurrentMonthInRange: "rounded-dynamic",
   monthInRange: "",
   selectedMonth: "",
   activeMonth: "",
@@ -52,6 +57,9 @@ export default /*tw*/ {
   lastYearInRange: "",
   yearInRange: "",
   singleYearInRange: "rounded-dynamic",
+  singleCurrentYearInRange: "rounded-dynamic",
+  currentLastYearInRange: "",
+  currentFirstYearInRange: "",
   selectedYear: "",
   activeYear: "",
   timepicker: "mt-2 pl-1 pt-3 text-sm flex items-center justify-between gap-2 border-t border-brand-200",

package/ui.form-calendar/useAttrs.js

@@ -67,6 +67,22 @@ export default function useAttrs(props) {
         extendingKeysClasses.currentDate.value,
       ]),
     },
+    currentFirstDayInRange: {
+      base: computed(() => [
+        extendingKeysClasses.day.value,
+        extendingKeysClasses.edgeDateInRange.value,
+        extendingKeysClasses.firstDateInRange.value,
+        extendingKeysClasses.currentDate.value,
+      ]),
+    },
+    currentLastDayInRange: {
+      base: computed(() => [
+        extendingKeysClasses.day.value,
+        extendingKeysClasses.edgeDateInRange.value,
+        extendingKeysClasses.lastDateInRange.value,
+        extendingKeysClasses.currentDate.value,
+      ]),
+    },
     firstDayInRange: {
       base: computed(() => [
         extendingKeysClasses.day.value,
@@ -115,6 +131,29 @@ export default function useAttrs(props) {
         extendingKeysClasses.dateInRange.value,
       ]),
     },
+    singleCurrentMonthInRange: {
+      base: computed(() => [
+        extendingKeysClasses.year.value,
+        extendingKeysClasses.dateInRange.value,
+        extendingKeysClasses.currentDate.value,
+      ]),
+    },
+    currentFirstYearInRange: {
+      base: computed(() => [
+        extendingKeysClasses.year.value,
+        extendingKeysClasses.edgeDateInRange.value,
+        extendingKeysClasses.firstDateInRange.value,
+        extendingKeysClasses.currentDate.value,
+      ]),
+    },
+    currentLastYearInRange: {
+      base: computed(() => [
+        extendingKeysClasses.year.value,
+        extendingKeysClasses.edgeDateInRange.value,
+        extendingKeysClasses.lastDateInRange.value,
+        extendingKeysClasses.currentDate.value,
+      ]),
+    },
     currentMonthInRange: {
       base: computed(() => [
         extendingKeysClasses.month.value,
@@ -129,6 +168,22 @@ export default function useAttrs(props) {
         extendingKeysClasses.lastDateInRange.value,
       ]),
     },
+    currentFirstMonthInRange: {
+      base: computed(() => [
+        extendingKeysClasses.month.value,
+        extendingKeysClasses.edgeDateInRange.value,
+        extendingKeysClasses.firstDateInRange.value,
+        extendingKeysClasses.currentDate.value,
+      ]),
+    },
+    currentLastMonthInRange: {
+      base: computed(() => [
+        extendingKeysClasses.month.value,
+        extendingKeysClasses.edgeDateInRange.value,
+        extendingKeysClasses.lastDateInRange.value,
+        extendingKeysClasses.currentDate.value,
+      ]),
+    },
     firstMonthInRange: {
       base: computed(() => [
         extendingKeysClasses.month.value,
@@ -160,6 +215,13 @@ export default function useAttrs(props) {
         extendingKeysClasses.dateInRange.value,
       ]),
     },
+    singleCurrentYearInRange: {
+      base: computed(() => [
+        extendingKeysClasses.year.value,
+        extendingKeysClasses.dateInRange.value,
+        extendingKeysClasses.currentDate.value,
+      ]),
+    },
     singleYearInRange: {
       base: computed(() => [
         extendingKeysClasses.year.value,

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

@@ -10,8 +10,8 @@ export default /*tw*/ {
     base: "absolute mb-3 z-40",
     variants: {
       openDirectionX: {
-        left: "right-0",
-        right: "left-0",
+        left: "left-0 right-auto",
+        right: "right-0 left-auto",
       },
       openDirectionY: {
         top: "bottom-full mt-0",

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

@@ -19,11 +19,12 @@ export default /*tw*/ {
     `,
     variants: {
       openDirectionX: {
-        left: "right-0",
-        right: "left-0",
+        left: "left-0 right-auto",
+        right: "right-0 left-auto",
       },
       openDirectionY: {
         top: "bottom-full mt-0",
+        bottom: "top-full mb-0",
       },
     },
     compoundVariants: [

package/ui.image-avatar/UAvatar.vue

@@ -17,12 +17,12 @@
       <slot
         v-else
         name="placeholder"
-        :icon-name="placeholderIcon"
+        :icon-name="placeholderIcon || config.defaults.placeholderIcon"
         :icon-color="componentColor"
         :icon-size="size"
       >
         <UIcon
-          :name="placeholderIcon"
+          :name="placeholderIcon || config.defaults.placeholderIcon"
           :color="componentColor"
           :size="size"
           v-bind="placeholderIconAttrs"
@@ -54,7 +54,7 @@ const props = defineProps({
   },
 
   /**
-   * Avatar label (user name, nickname, etc.).
+   * Avatar label (username, nickname, etc.).
    */
   label: {
     type: String,
@@ -62,7 +62,7 @@ const props = defineProps({
   },
 
   /**
-   * Avatar icon placeholder.
+   * Avatar placeholder icon.
    */
   placeholderIcon: {
     type: String,

package/ui.image-icon/UIcon.vue

@@ -23,19 +23,19 @@ defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Icon SVG data source (svg as a vue component).
+   * Icon name.
    */
-  src: {
-    type: [String, Object],
+  name: {
+    type: String,
     default: "",
   },
 
   /**
-   * Name of the icon.
+   * Icon source (svg as a vue component).
    */
-  name: {
-    type: String,
-    default: "",
+  src: {
+    type: Object,
+    default: () => {},
   },
 
   /**
@@ -66,7 +66,7 @@ const props = defineProps({
   },
 
   /**
-   * Add interactive states to the icon (hover, clicked).
+   * Make the icon interactive (cursor pointer, etc.).
    */
   interactive: {
     type: Boolean,

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.384",
+  "version": "0.0.386",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -339,7 +339,7 @@
             },
             {
               "name": "label",
-              "description": "Avatar label (user name, nickname, etc.).",
+              "description": "Avatar label (username, nickname, etc.).",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -348,7 +348,7 @@
             },
             {
               "name": "placeholderIcon",
-              "description": "Avatar icon placeholder.",
+              "description": "Avatar placeholder icon.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -4253,22 +4253,22 @@
           "description": "",
           "attributes": [
             {
-              "name": "src",
-              "description": "Icon SVG data source (svg as a vue component).",
+              "name": "name",
+              "description": "Icon name.",
               "value": {
                 "kind": "expression",
-                "type": "string|object"
+                "type": "string"
               },
               "default": "\"\""
             },
             {
-              "name": "name",
-              "description": "Name of the icon.",
+              "name": "src",
+              "description": "Icon source (svg as a vue component).",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "object"
               },
-              "default": "\"\""
+              "default": "() => {}"
             },
             {
               "name": "color",
@@ -4299,7 +4299,7 @@
             },
             {
               "name": "interactive",
-              "description": "Add interactive states to the icon (hover, clicked).",
+              "description": "Make the icon interactive (cursor pointer, etc.).",
               "value": {
                 "kind": "expression",
                 "type": "boolean"