vueless 0.0.216 → 0.0.217

package/package.json

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

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

@@ -17,7 +17,7 @@
 <script setup>
 import { computed } from "vue";
 import { formatDate, dateIsOutOfRange } from "../services/calendar.service";
-import { isSameMonth, getDateWithoutTime } from "../services/date.service";
+import { isSameMonth, getDateWithoutTime, isCurrentMoth } from "../services/date.service";
 
 import useAttrs from "../composables/attrs.composable";
 
@@ -69,7 +69,8 @@ const props = defineProps({
 
 const emit = defineEmits(["input"]);
 
-const { monthViewAttrs, selectedMonthAttrs, activeMonthAttrs, monthAttrs } = useAttrs(props);
+const { monthViewAttrs, selectedMonthAttrs, activeMonthAttrs, monthAttrs, currentMothAttrs } =
+  useAttrs(props);
 
 const localSelectedDate = computed(() => {
   return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;
@@ -98,12 +99,19 @@ function getMonth(monthNumber) {
   return newDate;
 }
 
-function getMonthClasses(day) {
-  if (isSelectedMonth(day)) {
+function getMonthClasses(month) {
+  const isNotSelectedDate =
+    (!isSelectedMonth(month) && !isSelectedMonth(month)) || props.selectedDate === null;
+
+  if (isCurrentMoth(month) && isNotSelectedDate) {
+    return [currentMothAttrs.value.class];
+  }
+
+  if (isSelectedMonth(month)) {
     return [selectedMonthAttrs.value.class];
   }
 
-  if (isSameMonth(props.activeMonth, day)) {
+  if (isSameMonth(props.activeMonth, month)) {
     return [activeMonthAttrs.value.class];
   }
 }

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

@@ -17,7 +17,7 @@
 <script setup>
 import { computed } from "vue";
 import { formatDate, getYearsRange, dateIsOutOfRange } from "../services/calendar.service";
-import { isSameMonth, getDateWithoutTime } from "../services/date.service";
+import { isSameMonth, getDateWithoutTime, isCurrentYear } from "../services/date.service";
 
 import useAttrs from "../composables/attrs.composable";
 
@@ -69,7 +69,8 @@ const props = defineProps({
 
 const emit = defineEmits(["input"]);
 
-const { yearViewAttrs, selectedYearAttrs, activeYearAttrs, yearAttrs } = useAttrs(props);
+const { yearViewAttrs, selectedYearAttrs, activeYearAttrs, yearAttrs, currentYearAttrs } =
+  useAttrs(props);
 
 const localSelectedDate = computed(() => {
   return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;
@@ -102,12 +103,19 @@ function getYear(year) {
   return newDate;
 }
 
-function getYearClasses(day) {
-  if (isSelectedMonth(day)) {
+function getYearClasses(year) {
+  const isNotSelectedDate =
+    (!isSelectedMonth(year) && !isSelectedMonth(year)) || props.selectedDate === null;
+
+  if (isCurrentYear(year) && isNotSelectedDate) {
+    return [currentYearAttrs.value.class];
+  }
+
+  if (isSelectedMonth(year)) {
     return [selectedYearAttrs.value.class];
   }
 
-  if (isSameMonth(props.activeMonth, day)) {
+  if (isSameMonth(props.activeMonth, year)) {
     return [activeYearAttrs.value.class];
   }
 }

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

@@ -35,8 +35,10 @@ export default /*tw*/ {
   month: "{UButton} mx-auto flex h-12 w-full rounded-lg hover:!bg-brand-900 hover:text-white",
   selectedMonth: "bg-brand-900 hover:bg-brand-900 text-white",
   activeMonth: "bg-brand-100",
+  currentMoth: "border-2 border-brand-900",
   yearView: "grid grid-cols-4 items-center justify-center",
   year: "{UButton} mx-auto flex h-12 w-full rounded-lg hover:!bg-brand-900 hover:text-white",
+  currentYear: "border-2 border-brand-900",
   selectedYear: "bg-brand-900 hover:bg-brand-900 text-white",
   activeYear: "bg-brand-100",
   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/services/date.service.js

@@ -255,6 +255,14 @@ export function isToday(date) {
   return isSameDay(date, new Date());
 }
 
+export function isCurrentMoth(date) {
+  return isSameMonth(date, new Date());
+}
+
+export function isCurrentYear(date) {
+  return date.getFullYear() === new Date().getFullYear();
+}
+
 export function getLastDayOfMonth(date) {
   return new Date(date.getFullYear(), date.getMonth() + 1, 0);
 }

package/web-types.json

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