vueless 0.0.352 → 0.0.354

package/package.json

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

package/preset.tailwind.js

@@ -56,7 +56,6 @@ const grayColors = getPalette(GRAY_COLOR);
 export const vuelessTailwindConfig = {
   darkMode: DARK_MODE_SELECTOR,
   content: [...vuelessContent, ...vuelessContentVue, ...vuelessContentNuxt],
-  safelist,
   theme: {
     extend: {
       colors: {
@@ -94,9 +93,21 @@ export function vuelessPreset() {
   return {
     ...vuelessTailwindConfig,
     plugins: [forms],
+    safelist,
   };
 }
 
+/**
+ * Convert sting patterns to RegExp.
+ * @returns {Array} - TailwindCSS safelist.
+ */
+export function getSafelist() {
+  return JSON.parse(process.env.VUELESS_SAFELIST || "[]").map((rule) => ({
+    ...rule,
+    pattern: new RegExp(rule.pattern),
+  }));
+}
+
 /**
  * Transform CSS variable with RGB numbers into CSS color.
  * @param { String } variableName
@@ -122,14 +133,3 @@ function getPalette(color) {
 
   return palette;
 }
-
-/**
- * Convert sting patterns to RegExp.
- * @returns {Array} - TailwindCSS safelist.
- */
-function getSafelist() {
-  return JSON.parse(process.env.VUELESS_SAFELIST || "[]").map((rule) => ({
-    ...rule,
-    pattern: new RegExp(rule.pattern),
-  }));
-}

package/ui.form-calendar/UCalendarDayView.vue

@@ -4,16 +4,165 @@
       <span v-for="weekDay in weekdays" :key="weekDay" v-bind="weekDayAttrs" v-text="weekDay" />
     </div>
     <div v-bind="daysAttrs">
-      <button
-        v-for="day in days"
-        :key="day"
-        tabindex="-1"
-        :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
-        v-bind="dayAttrs(getDayClasses(day))"
-        @mousedown.prevent.capture
-        @click="onClickDay(day)"
-        v-text="formatDate(day, 'j', locale)"
-      />
+      <template v-for="day in days" :key="day">
+        <UButton
+          v-if="getDayState(day).isCurrentDay && !getDayState(day).isCurrentDayInRange"
+          tabindex="-1"
+          variant="thirdary"
+          color="brand"
+          no-ring
+          square
+          v-bind="currentDayAttrs"
+          :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
+          :label="formatDate(day, 'j', locale)"
+          @mousedown.prevent.capture
+          @click="onClickDay(day)"
+        />
+
+        <UButton
+          v-else-if="getDayState(day).isCurrentDayInRange"
+          tabindex="-1"
+          variant="thirdary"
+          color="brand"
+          no-ring
+          square
+          v-bind="currentDayInRangeAttrs"
+          :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
+          :label="formatDate(day, 'j', locale)"
+          @mousedown.prevent.capture
+          @click="onClickDay(day)"
+        />
+
+        <UButton
+          v-else-if="getDayState(day).isFirstDayInRange"
+          tabindex="-1"
+          variant="thirdary"
+          color="brand"
+          no-ring
+          square
+          filled
+          v-bind="firstDayInRangeAttrs"
+          :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
+          :label="formatDate(day, 'j', locale)"
+          @mousedown.prevent.capture
+          @click="onClickDay(day)"
+        />
+
+        <UButton
+          v-else-if="getDayState(day).isAnotherMonthFirstDayInRange"
+          tabindex="-1"
+          variant="thirdary"
+          color="brand"
+          no-ring
+          square
+          filled
+          v-bind="anotherMonthFirstDayInRangeAttrs"
+          :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
+          :label="formatDate(day, 'j', locale)"
+          @mousedown.prevent.capture
+          @click="onClickDay(day)"
+        />
+
+        <UButton
+          v-else-if="getDayState(day).isLastDayInRange"
+          tabindex="-1"
+          variant="thirdary"
+          color="brand"
+          no-ring
+          square
+          filled
+          v-bind="lastDayInRangeAttrs"
+          :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
+          :label="formatDate(day, 'j', locale)"
+          @mousedown.prevent.capture
+          @click="onClickDay(day)"
+        />
+
+        <UButton
+          v-else-if="getDayState(day).isAnotherMonthLastDayInRange"
+          tabindex="-1"
+          variant="thirdary"
+          color="brand"
+          no-ring
+          square
+          filled
+          v-bind="anotherMonthLastDayInRangeAttrs"
+          :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
+          :label="formatDate(day, 'j', locale)"
+          @mousedown.prevent.capture
+          @click="onClickDay(day)"
+        />
+
+        <UButton
+          v-else-if="getDayState(day).isSelectedDay"
+          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).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).isDayInRange"
+          tabindex="-1"
+          variant="thirdary"
+          color="brand"
+          no-ring
+          square
+          v-bind="dayInRangeAttrs"
+          :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"
+          variant="thirdary"
+          color="brand"
+          no-ring
+          square
+          v-bind="anotherMonthDayAttrs"
+          :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
+          :label="formatDate(day, 'j', locale)"
+          @mousedown.prevent.capture
+          @click="onClickDay(day)"
+        />
+
+        <UButton
+          v-else
+          tabindex="-1"
+          variant="thirdary"
+          color="brand"
+          no-ring
+          square
+          v-bind="dayAttrs"
+          :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
+          :label="formatDate(day, 'j', locale)"
+          @mousedown.prevent.capture
+          @click="onClickDay(day)"
+        />
+      </template>
     </div>
   </div>
 </template>
@@ -21,7 +170,6 @@
 <script setup>
 import { computed } from "vue";
 
-import { cx } from "../utils/utilUI.js";
 import { formatDate, dateIsOutOfRange } from "./utilCalendar.js";
 import {
   isToday,
@@ -35,6 +183,8 @@ import useAttrs from "./useAttrs.js";
 
 import { DAYS_IN_WEEK, START_WEEK } from "./constants.js";
 
+import UButton from "../ui.button/UButton.vue";
+
 const props = defineProps({
   selectedDate: {
     type: [Date, null],
@@ -94,11 +244,17 @@ const {
   weekDaysAttrs,
   weekDayAttrs,
   daysAttrs,
-  activeDayAttrs,
-  selectedDayAttrs,
+  dayAttrs,
   currentDayAttrs,
+  dayInRangeAttrs,
+  currentDayInRangeAttrs,
   anotherMonthDayAttrs,
-  dayAttrs,
+  firstDayInRangeAttrs,
+  anotherMonthFirstDayInRangeAttrs,
+  lastDayInRangeAttrs,
+  anotherMonthLastDayInRangeAttrs,
+  selectedDayAttrs,
+  activeDayAttrs,
 } = useAttrs(props);
 
 const localSelectedDate = computed(() => {
@@ -207,7 +363,7 @@ function getDay(date, dayNumber) {
   return day;
 }
 
-function getDayClasses(day) {
+function getDayState(day) {
   const isDayInRange =
     props.range &&
     localSelectedDate.value &&
@@ -221,59 +377,42 @@ function getDayClasses(day) {
     );
 
   const isNotSelectedDate =
-    (!isSelectedDay(day) && !isSelectedToDay(day)) || props.selectedDate === null;
-
-  if (isToday(day) && isNotSelectedDate) {
-    return cx([isDayInRange && props.config.inRangeDate, currentDayAttrs.value.class]);
-  }
-
-  if (props.range && isSelectedDay(day)) {
-    return cx([
-      isAnotherMothDay(day, activeMonthDate.value) && anotherMonthDayAttrs.value.class,
-      props.config.inRangeEdgeDate,
-      props.config.inRangeFirstDate,
-    ]);
-  }
-
-  if (props.range && isSelectedToDay(day)) {
-    return cx([
-      isAnotherMothDay(day, activeMonthDate.value) && anotherMonthDayAttrs.value.class,
-      props.config.inRangeEdgeDate,
-      props.config.inRangeLastDate,
-    ]);
-  }
-
-  if (isDayInRange) {
-    return props.config.inRangeDate;
-  }
-
-  if (isSelectedDay(day)) {
-    return selectedDayAttrs.value.class;
-  }
-
-  if (isSameDay(props.activeDate, day)) {
-    return activeDayAttrs.value.class;
-  }
-
-  if (isAnotherMothDay(day, activeMonthDate.value)) {
-    return anotherMonthDayAttrs.value.class;
-  }
-}
-
-function isSelectedDay(day) {
-  return isSameDay(day, localSelectedDate.value);
-}
-
-function isSelectedToDay(day) {
-  return isSameDay(day, props.selectedDateTo);
+    (!isSameDay(day, localSelectedDate.value) && !isSameDay(day, props.selectedDateTo)) ||
+    props.selectedDate === null;
+
+  const isCurrentDay = isToday(day) && isNotSelectedDate;
+  const isCurrentDayInRange = isCurrentDay && isDayInRange;
+  const isAnotherMonthDay = isAnotherMothDay(day, activeMonthDate.value);
+  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);
+
+  return {
+    isCurrentDay,
+    isCurrentDayInRange,
+    isFirstDayInRange,
+    isAnotherMonthFirstDayInRange,
+    isLastDayInRange,
+    isAnotherMonthLastDayInRange,
+    isDayInRange,
+    isSelectedDay,
+    isActiveDay,
+    isAnotherMonthDay,
+  };
 }
 
 function onClickDay(day) {
-  const isSameDay = isSelectedDay(day) && props.selectedDate !== null;
+  const isSameDate = isSameDay(day, localSelectedDate.value) && props.selectedDate !== null;
   const isSameDayInRange =
-    isSelectedDay(day) && props.selectedDate !== null && props.selectedDateTo && props.range;
+    isSameDay(day, localSelectedDate.value) &&
+    props.selectedDate !== null &&
+    props.selectedDateTo &&
+    props.range;
 
-  if (isSameDay || isSameDayInRange) {
+  if (isSameDate || isSameDayInRange) {
     emit("input", null);
 
     return;

package/ui.form-calendar/UCalendarMonthView.vue

@@ -1,17 +1,116 @@
 <template>
   <div v-bind="monthViewAttrs">
-    <UButton
-      v-for="month in months"
-      :key="month"
-      variant="thirdary"
-      color="brand"
-      no-ring
-      v-bind="monthAttrs(getMonthClasses(month))"
-      :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
-      :label="formatDate(month, 'M', props.locale)"
-      @click="onClickMonth(month)"
-      @mousedown.prevent.capture
-    />
+    <template v-for="month in months" :key="month">
+      <UButton
+        v-if="getMonthState(month).isCurrentMonth && !getMonthState(month).isCurrentMonthInRange"
+        variant="thirdary"
+        color="brand"
+        no-ring
+        v-bind="currentMonthAttrs"
+        :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).isCurrentMonthAndNotSelected"
+        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)"
+        @mousedown.prevent.capture
+      />
+
+      <UButton
+        v-else-if="getMonthState(month).isFirstMonthInRange"
+        variant="thirdary"
+        color="brand"
+        no-ring
+        filled
+        v-bind="firstMonthInRangeAttrs"
+        :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).isLastMonthInRange"
+        variant="thirdary"
+        color="brand"
+        no-ring
+        filled
+        v-bind="lastMonthInRangeAttrs"
+        :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).isSingleMonthInRange"
+        variant="thirdary"
+        color="brand"
+        no-ring
+        v-bind="singleMonthInRangeAttrs"
+        :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).isMonthInRange"
+        variant="thirdary"
+        color="brand"
+        no-ring
+        v-bind="monthInRangeAttrs"
+        :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).isSelectedMonth"
+        variant="thirdary"
+        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).isActiveMonth"
+        variant="thirdary"
+        color="brand"
+        no-ring
+        v-bind="activeMonthAttrs"
+        :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
+        :label="formatDate(month, 'M', props.locale)"
+        @click="onClickMonth(month)"
+        @mousedown.prevent.capture
+      />
+
+      <UButton
+        v-else
+        variant="thirdary"
+        color="brand"
+        no-ring
+        v-bind="monthAttrs"
+        :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
+        :label="formatDate(month, 'M', props.locale)"
+        @click="onClickMonth(month)"
+        @mousedown.prevent.capture
+      />
+    </template>
   </div>
 </template>
 
@@ -19,8 +118,7 @@
 import { computed } from "vue";
 
 import { formatDate, dateIsOutOfRange } from "./utilCalendar.js";
-import { isSameMonth, getDateWithoutTime, isCurrentMoth } from "./utilDate.js";
-import { cx } from "../utils/utilUI.js";
+import { isSameMonth, getDateWithoutTime, isCurrentMonth } from "./utilDate.js";
 
 import useAttrs from "./useAttrs.js";
 
@@ -82,8 +180,18 @@ const props = defineProps({
 
 const emit = defineEmits(["input"]);
 
-const { monthViewAttrs, selectedMonthAttrs, activeMonthAttrs, monthAttrs, currentMothAttrs } =
-  useAttrs(props);
+const {
+  monthViewAttrs,
+  monthAttrs,
+  currentMonthAttrs,
+  currentMonthInRangeAttrs,
+  lastMonthInRangeAttrs,
+  firstMonthInRangeAttrs,
+  singleMonthInRangeAttrs,
+  monthInRangeAttrs,
+  selectedMonthAttrs,
+  activeMonthAttrs,
+} = useAttrs(props);
 
 const localSelectedDate = computed(() => {
   return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;
@@ -112,7 +220,7 @@ function getMonth(monthNumber) {
   return newDate;
 }
 
-function getMonthClasses(month) {
+function getMonthState(month) {
   const isMonthInRange =
     props.range &&
     localSelectedDate.value &&
@@ -131,33 +239,24 @@ function getMonthClasses(month) {
   const isMoreThenOneMonthRange =
     props.selectedDateTo && isMoreThanOneMonthDiff(props.selectedDate, props.selectedDateTo);
 
-  if (isCurrentMoth(month) && isNotSelectedDate) {
-    return cx([currentMothAttrs.value.class, isMonthInRange && props.config.inRangeDate]);
-  }
-
-  if (props.range && isSelectedMonth(month) && isMoreThenOneMonthRange) {
-    return cx([props.config.inRangeEdgeDate, props.config.inRangeFirstDate]);
-  }
-
-  if (props.range && isSelectedToMonth(month) && isMoreThenOneMonthRange) {
-    return cx([props.config.inRangeEdgeDate, props.config.inRangeLastDate]);
-  }
-
-  if (props.range && isSelectedMonth(month) && !isMoreThenOneMonthRange) {
-    return cx([props.config.inRangeDate, "rounded-dynamic"]);
-  }
-
-  if (isMonthInRange) {
-    return props.config.inRangeDate;
-  }
-
-  if (isSelectedMonth(month)) {
-    return selectedMonthAttrs.value.class;
-  }
-
-  if (isSameMonth(props.activeMonth, month) && !props.range) {
-    return activeMonthAttrs.value.class;
-  }
+  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;
+  const isActiveMonth = isSameMonth(props.activeMonth, month) && !props.range;
+
+  return {
+    isCurrentMonthAndNotSelected,
+    isCurrentMonthInRange,
+    isLastMonthInRange,
+    isFirstMonthInRange,
+    isSingleMonthInRange,
+    isMonthInRange,
+    isSelectedMonth: isSelectedMonth(month),
+    isActiveMonth,
+  };
 }
 
 function isMoreThanOneMonthDiff(date, dateTo) {

package/ui.form-calendar/UCalendarYearView.vue

@@ -1,17 +1,116 @@
 <template>
   <div v-bind="yearViewAttrs">
-    <UButton
-      v-for="year in years"
-      :key="year"
-      no-ring
-      color="brand"
-      variant="thirdary"
-      :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
-      v-bind="yearAttrs(getYearClasses(year))"
-      :label="formatDate(year, 'Y', props.locale)"
-      @mousedown.prevent.capture
-      @click="onClickMonth(year)"
-    />
+    <template v-for="year in years" :key="year">
+      <UButton
+        v-if="getYearState(year).isCurrentYear && !getYearState(year).isCurrentYearInRange"
+        variant="thirdary"
+        color="brand"
+        no-ring
+        v-bind="currentYearAttrs"
+        :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).isCurrentYearInRange"
+        variant="thirdary"
+        color="brand"
+        no-ring
+        v-bind="currentYearInRangeAttrs"
+        :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).isFirstYearInRange"
+        variant="thirdary"
+        color="brand"
+        no-ring
+        filled
+        v-bind="firstYearInRangeAttrs"
+        :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).isLastYearInRange"
+        variant="thirdary"
+        color="brand"
+        no-ring
+        filled
+        v-bind="lastYearInRangeAttrs"
+        :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).isSingleYearInRange"
+        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)"
+        @mousedown.prevent.capture
+      />
+
+      <UButton
+        v-else-if="getYearState(year).isYearInRange"
+        variant="thirdary"
+        color="brand"
+        no-ring
+        v-bind="yearInRangeAttrs"
+        :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).isSelectedYear"
+        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).isActiveYear"
+        variant="thirdary"
+        color="brand"
+        no-ring
+        v-bind="activeYearAttrs"
+        :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
+        :label="formatDate(year, 'Y', props.locale)"
+        @click="onClickYear(year)"
+        @mousedown.prevent.capture
+      />
+
+      <UButton
+        v-else
+        variant="thirdary"
+        color="brand"
+        no-ring
+        v-bind="yearAttrs"
+        :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
+        :label="formatDate(year, 'Y', props.locale)"
+        @click="onClickYear(year)"
+        @mousedown.prevent.capture
+      />
+    </template>
   </div>
 </template>
 
@@ -20,7 +119,6 @@ import { computed } from "vue";
 
 import { formatDate, getYearsRange, dateIsOutOfRange } from "./utilCalendar.js";
 import { isSameMonth, getDateWithoutTime, isCurrentYear } from "./utilDate.js";
-import { cx } from "../utils/utilUI.js";
 
 import useAttrs from "./useAttrs.js";
 
@@ -82,8 +180,18 @@ const props = defineProps({
 
 const emit = defineEmits(["input"]);
 
-const { yearViewAttrs, selectedYearAttrs, activeYearAttrs, yearAttrs, currentYearAttrs } =
-  useAttrs(props);
+const {
+  yearViewAttrs,
+  yearAttrs,
+  currentYearAttrs,
+  currentYearInRangeAttrs,
+  firstYearInRangeAttrs,
+  lastYearInRangeAttrs,
+  yearInRangeAttrs,
+  singleYearInRangeAttrs,
+  selectedYearAttrs,
+  activeYearAttrs,
+} = useAttrs(props);
 
 const localSelectedDate = computed(() => {
   return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;
@@ -116,7 +224,7 @@ function getYear(year) {
   return newDate;
 }
 
-function getYearClasses(year) {
+function getYearState(year) {
   const isYearInRange =
     props.range &&
     localSelectedDate.value &&
@@ -140,40 +248,30 @@ function getYearClasses(year) {
   const isLastYear =
     props.selectedDateTo && year.getFullYear() === props.selectedDateTo.getFullYear();
 
-  if (isCurrentYear(year) && isNotSelectedDate) {
-    return cx([currentYearAttrs.value.class, isYearInRange && props.config.inRangeDate]);
-  }
-
-  if (props.range && isFirstYear && isMoreThanOneYearRange) {
-    return cx([props.config.inRangeEdgeDate, props.config.inRangeFirstDate]);
-  }
-
-  if (props.range && isLastYear && isMoreThanOneYearRange) {
-    return cx([props.config.inRangeEdgeDate, props.config.inRangeLastDate]);
-  }
-
-  if (props.range && isFirstYear && !isMoreThanOneYearRange) {
-    return cx([props.config.inRangeDate, "rounded-dynamic"]);
-  }
-
-  if (isYearInRange) {
-    return props.config.inRangeDate;
-  }
-
-  if (isSelectedMonth(year)) {
-    return selectedYearAttrs.value.class;
-  }
-
-  if (isSameMonth(props.activeMonth, year) && !props.range) {
-    return activeYearAttrs.value.class;
-  }
+  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;
+  const isActiveYear = isSameMonth(props.activeMonth, year) && !props.range;
+
+  return {
+    isCurrentYear: isCurrentDate,
+    isCurrentYearInRange,
+    isFirstYearInRange,
+    isLastYearInRange,
+    isYearInRange,
+    isSingleYearInRange,
+    isSelectedYear: isSelectedMonth(year),
+    isActiveYear,
+  };
 }
 
 function isSelectedMonth(month) {
   return isSameMonth(month, localSelectedDate.value);
 }
 
-function onClickMonth(month) {
-  emit("input", month);
+function onClickYear(year) {
+  emit("input", year);
 }
 </script>

package/ui.form-calendar/config.js

@@ -15,28 +15,45 @@ export default /*tw*/ {
   weekDays: "grid grid-cols-7",
   weekDay: "flex size-8 items-center justify-center text-xs uppercase text-gray-500",
   days: "grid grid-cols-7",
-  day: `
-    mx-auto size-8 rounded-dynamic text-sm hover:bg-brand-100 hover:text-brand-600
-    disabled:opacity-50 disabled:cursor-not-allowed
-  `,
-  activeDay: "bg-brand-100 hover:bg-brand-100",
-  inRangeDate: "bg-brand-100 text-brand-900 hover:!bg-brand-200 rounded-none",
-  inRangeEdgeDate: "rounded-dynamic bg-brand-200 text-brand-900 hover:bg-brand-200",
-  inRangeFirstDate: "rounded-r-none",
-  inRangeLastDate: "rounded-l-none",
-  selectedDay: "bg-brand-600 text-white hover:bg-brand-600 hover:text-white",
-  currentDay: "hover:bg-brand-100 border-2 border-brand-600",
-  anotherMonthDay: "hover:bg-brand-100 text-gray-400",
+  dateInRange: "bg-brand-100 text-brand-900 hover:!bg-brand-200 rounded-none",
+  edgeDateInRange: "",
+  firstDateInRange: "rounded-r-none",
+  lastDateInRange: "rounded-l-none",
+  anotherMonthDate: "text-gray-400",
+  activeDate: "bg-brand-100",
+  selectedDate: "",
+  currentDate: "border-2 border-brand-600",
+  day: `{UButton} size-9 w-auto`,
+  currentDay: "",
+  dayInRange: "",
+  currentDayInRange: "",
+  anotherMonthDay: "",
+  firstDayInRange: "",
+  anotherMonthFirstDayInRange: "",
+  lastDayInRange: "",
+  anotherMonthLastDayInRange: "",
+  selectedDay: "",
+  activeDay: "",
   monthView: "grid grid-cols-4 items-center justify-center",
-  month: "{UButton} mx-auto flex h-12 w-full rounded-dynamic",
-  selectedMonth: "bg-brand-600 hover:bg-brand-900 text-white",
-  activeMonth: "bg-brand-100",
-  currentMoth: "border-2 border-brand-900",
+  month: "{UButton} mx-auto flex h-12 w-full",
+  currentMonth: "",
+  currentMonthInRange: "",
+  lastMonthInRange: "",
+  firstMonthInRange: "",
+  singleMonthInRange: "rounded-dynamic",
+  monthInRange: "",
+  selectedMonth: "",
+  activeMonth: "",
   yearView: "grid grid-cols-4 items-center justify-center",
-  year: "{UButton} mx-auto flex h-12 w-full rounded-dynamic",
-  currentYear: "border-2 border-brand-900",
-  selectedYear: "bg-brand-600 hover:bg-brand-600 text-white",
-  activeYear: "bg-brand-100",
+  year: "{UButton} mx-auto flex h-12 w-full",
+  currentYear: "",
+  currentYearInRange: "",
+  firstYearInRange: "",
+  lastYearInRange: "",
+  yearInRange: "",
+  singleYearInRange: "rounded-dynamic",
+  selectedYear: "",
+  activeYear: "",
   timepicker: "mt-2 pl-1 pt-3 text-sm flex items-center justify-between gap-2 border-t border-brand-200",
   timepickerLabel: "w-full",
   timepickerInputWrapper: "flex items-center gap-px rounded-dynamic border border-brand-300",

package/ui.form-calendar/useAttrs.js

@@ -12,8 +12,51 @@ export default function useAttrs(props) {
   );
   const attrs = {};
 
+  const buttonVariantKeys = [
+    "firstDateInRange",
+    "lastDateInRange",
+    "anotherMonthDate",
+    "activeDate",
+    "selectedDate",
+    "currentDate",
+    "currentDay",
+    "currentDayInRange",
+    "anotherMonthDay",
+    "firstDayInRange",
+    "anotherMonthFirstDayInRange",
+    "lastDayInRange",
+    "anotherMonthLastDayInRange",
+    "selectedDay",
+    "activeDay",
+    "dayInRange",
+    "edgeDateInRange",
+    "dateInRange",
+    "currentMonth",
+    "currentMonthInRange",
+    "lastMonthInRange",
+    "firstMonthInRange",
+    "singleMonthInRange",
+    "monthInRange",
+    "selectedMonth",
+    "activeMonth",
+    "currentYear",
+    "currentYearInRange",
+    "firstYearInRange",
+    "lastYearInRange",
+    "yearInRange",
+    "singleYearInRange",
+    "selectedYear",
+    "activeYear",
+  ];
+
+  const timepickerInputKeys = [
+    "timepickerInputHours",
+    "timepickerInputMinutes",
+    "timepickerInputSeconds",
+  ];
+
   for (const key in defaultConfig) {
-    if (isSystemKey(key)) continue;
+    if (isSystemKey(key) || buttonVariantKeys.includes(key)) continue;
 
     const classes = computed(() => {
       let value = config.value[key];
@@ -29,8 +72,7 @@ export default function useAttrs(props) {
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
 
-    // eslint-disable-next-line prettier/prettier
-    if (["timepickerInputHours", "timepickerInputMinutes", "timepickerInputSeconds"].includes(key)) {
+    if (timepickerInputKeys.includes(key)) {
       const keyAttrs = attrs[`${key}Attrs`];
 
       attrs[`${key}Attrs`] = computed(() => ({
@@ -38,11 +80,290 @@ export default function useAttrs(props) {
         class: cx([config.value.timepickerInput, keyAttrs.value.class]),
       }));
     }
+  }
+
+  for (const key of buttonVariantKeys) {
+    if (key === "dayInRange") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.dayAttrs.value,
+        class: cx([attrs.dayAttrs.value.class, config.value.dateInRange, config.value.dayInRange]),
+      }));
+    }
+
+    if (key === "selectedDay") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.dayAttrs.value,
+        class: cx([
+          attrs.dayAttrs.value.class,
+          config.value.selectedDate,
+          config.value.selectedDay,
+        ]),
+      }));
+    }
+
+    if (key === "activeDay") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.dayAttrs.value,
+        class: cx([attrs.dayAttrs.value.class, config.value.activeDate, config.value.activeDay]),
+      }));
+    }
+
+    if (key === "anotherMonthDay") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.dayAttrs.value,
+        class: cx([
+          attrs.dayAttrs.value.class,
+          config.value.anotherMonthDate,
+          config.value.anotherMonthDay,
+        ]),
+      }));
+    }
+
+    if (key === "currentDay") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.dayAttrs.value,
+        class: cx([attrs.dayAttrs.value.class, config.value.currentDate, config.value.currentDay]),
+      }));
+    }
+
+    if (key === "currentDayInRange") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.dayAttrs.value,
+        class: cx([
+          attrs.dayAttrs.value.class,
+          config.value.dateInRange,
+          config.value.currentDate,
+          config.value.currentDayInRange,
+        ]),
+      }));
+    }
 
-    // TODO: Need to find other solution
-    // classes is not reactive here, which may cause problems in styling by `config` prop
-    if (key === "day" || key === "month" || key === "year") {
-      attrs[`${key}Attrs`] = (classes) => getAttrs(key, { classes }).value;
+    if (key === "firstDayInRange") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.dayAttrs.value,
+        class: cx([
+          attrs.dayAttrs.value.class,
+          config.value.edgeDateInRange,
+          config.value.firstDateInRange,
+          config.value.firstDayInRange,
+        ]),
+      }));
+    }
+
+    if (key === "lastDayInRange") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.dayAttrs.value,
+        class: cx([
+          attrs.dayAttrs.value.class,
+          config.value.edgeDateInRange,
+          config.value.lastDateInRange,
+          config.value.lastDayInRange,
+        ]),
+      }));
+    }
+
+    if (key === "anotherMonthLastDayInRange") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.dayAttrs.value,
+        class: cx([
+          attrs.dayAttrs.value.class,
+          config.value.anotherMonthDay,
+          config.value.edgeDateInRange,
+          config.value.lastDateInRange,
+          config.value.anotherMonthLastDayInRange,
+        ]),
+      }));
+    }
+
+    if (key === "anotherMonthFirstDayInRange") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.dayAttrs.value,
+        class: cx([
+          attrs.dayAttrs.value.class,
+          config.value.anotherMonthDay,
+          config.value.edgeDateInRange,
+          config.value.firstDateInRange,
+          config.value.anotherMonthFirstDayInRange,
+        ]),
+      }));
+    }
+
+    if (key === "currentMonth") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.monthAttrs.value,
+        class: cx([
+          attrs.monthAttrs.value.class,
+          config.value.currentDate,
+          config.value.currentMonth,
+        ]),
+      }));
+    }
+
+    if (key === "monthInRange") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.monthAttrs.value,
+        class: cx([
+          attrs.monthAttrs.value.class,
+          config.value.dateInRange,
+          config.value.monthInRange,
+        ]),
+      }));
+    }
+
+    if (key === "singleMonthInRange") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.monthAttrs.value,
+        class: cx([
+          attrs.monthAttrs.value.class,
+          config.value.dateInRange,
+          config.value.singleMonthInRange,
+        ]),
+      }));
+    }
+
+    if (key === "currentMonthInRange") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.monthAttrs.value,
+        class: cx([
+          attrs.monthAttrs.value.class,
+          config.value.currentDate,
+          config.value.dateInRange,
+          config.value.currentMonthInRange,
+        ]),
+      }));
+    }
+
+    if (key === "lastMonthInRange") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.monthAttrs.value,
+        class: cx([
+          attrs.monthAttrs.value.class,
+          config.value.edgeDateInRange,
+          config.value.lastDateInRange,
+          config.value.lastMonthInRange,
+        ]),
+      }));
+    }
+
+    if (key === "firstMonthInRange") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.monthAttrs.value,
+        class: cx([
+          attrs.monthAttrs.value.class,
+          config.value.edgeDateInRange,
+          config.value.firstDateInRange,
+          config.value.firstMonthInRange,
+        ]),
+      }));
+    }
+
+    if (key === "selectedMonth") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.monthAttrs.value,
+        class: cx([
+          attrs.monthAttrs.value.class,
+          config.value.selectedDate,
+          config.value.selectedMonth,
+        ]),
+      }));
+    }
+
+    if (key === "activeMonth") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.monthAttrs.value,
+        class: cx([
+          attrs.monthAttrs.value.class,
+          config.value.activeDate,
+          config.value.activeMonth,
+        ]),
+      }));
+    }
+
+    if (key === "currentYear") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.yearAttrs.value,
+        class: cx([
+          attrs.yearAttrs.value.class,
+          config.value.currentDate,
+          config.value.currentYear,
+        ]),
+      }));
+    }
+
+    if (key === "yearInRange") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.yearAttrs.value,
+        class: cx([
+          attrs.yearAttrs.value.class,
+          config.value.dateInRange,
+          config.value.yearInRange,
+        ]),
+      }));
+    }
+
+    if (key === "singleYearInRange") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.yearAttrs.value,
+        class: cx([
+          attrs.yearAttrs.value.class,
+          config.value.dateInRange,
+          config.value.singleYearInRange,
+        ]),
+      }));
+    }
+
+    if (key === "currentYearInRange") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.yearAttrs.value,
+        class: cx([
+          attrs.yearAttrs.value.class,
+          config.value.currentDate,
+          config.value.dateInRange,
+          config.value.currentYearInRange,
+        ]),
+      }));
+    }
+
+    if (key === "lastYearInRange") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.yearAttrs.value,
+        class: cx([
+          attrs.yearAttrs.value.class,
+          config.value.edgeDateInRange,
+          config.value.lastDateInRange,
+          config.value.lastYearInRange,
+        ]),
+      }));
+    }
+
+    if (key === "firstYearInRange") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.yearAttrs.value,
+        class: cx([
+          attrs.yearAttrs.value.class,
+          config.value.edgeDateInRange,
+          config.value.firstDateInRange,
+          config.value.firstYearInRange,
+        ]),
+      }));
+    }
+
+    if (key === "selectedYear") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.yearAttrs.value,
+        class: cx([
+          attrs.yearAttrs.value.class,
+          config.value.selectedDate,
+          config.value.selectedYear,
+        ]),
+      }));
+    }
+
+    if (key === "activeYear") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.yearAttrs.value,
+        class: cx([attrs.yearAttrs.value.class, config.value.activeDate, config.value.activeYear]),
+      }));
     }
   }
 

package/ui.form-calendar/utilDate.js

@@ -255,7 +255,7 @@ export function isToday(date) {
   return isSameDay(date, new Date());
 }
 
-export function isCurrentMoth(date) {
+export function isCurrentMonth(date) {
   return isSameMonth(date, new Date());
 }
 

package/utils/utilUI.js

@@ -49,7 +49,7 @@ const twMerge = extendTailwindMerge(
         },
       },
     },
-    vuelessConfig.tailwindMerge,
+    vuelessConfig?.tailwindMerge,
   ),
 );
 

package/web-types.json

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