vueless 1.0.2-beta.52 → 1.0.2-beta.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.0.2-beta.52",
+  "version": "1.0.2-beta.54",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.form-calendar/UCalendar.vue

@@ -10,9 +10,9 @@ import UButton from "../ui.button/UButton.vue";
 import {
   parseDate,
   formatDate,
-  getYearsRange,
   dateIsOutOfRange,
   isNumeric,
+  getYearsRangeLabel,
 } from "./utilCalendar.ts";
 
 import { getDateWithoutTime, addMonths, addDays, addYears, getSortedLocale } from "./utilDate.ts";
@@ -39,7 +39,6 @@ import {
 import defaultConfig from "./config.ts";
 
 import type { Props, DateValue, RangeDate, Locale, Config } from "./types.ts";
-import type { Ref } from "vue";
 import type { DateLocale } from "./utilFormatting.ts";
 import type { ComponentExposed } from "../types.ts";
 
@@ -99,11 +98,12 @@ const minutesRef = useTemplateRef<HTMLInputElement>("minutes-input");
 const secondsRef = useTemplateRef<HTMLInputElement>("seconds-input");
 const okButton = useTemplateRef<ComponentExposed<typeof UButton>>("ok-button");
 const dayViewRef = useTemplateRef<ComponentExposed<typeof DayView>>("day-view");
+const yearViewRef = useTemplateRef<ComponentExposed<typeof YearView>>("year-view");
 
-const activeDate: Ref<Date | null> = ref(null);
-const activeMonth: Ref<Date | null> = ref(null);
+const activeDate = ref(getDateWithoutTime());
 
 const currentView = ref(props.view);
+const isArrowKeyDirty = ref(false);
 
 watch(
   () => props.view,
@@ -292,13 +292,10 @@ const userFormattedDate = computed(() => {
 });
 
 const viewSwitchLabel = computed(() => {
-  const localValue =
-    activeDate.value || activeMonth.value || selectedDate.value || getDateWithoutTime();
-
   return {
-    year: formatDate(localValue, "Y", locale.value),
-    month: formatDate(localValue, "F", locale.value),
-    yearsRange: getYearsRange(localValue || getDateWithoutTime()).join(` ${SEPARATOR} `),
+    year: formatDate(activeDate.value, "Y", locale.value),
+    month: formatDate(activeDate.value, "F", locale.value),
+    yearsRange: getYearsRangeLabel(yearViewRef.value?.years || []),
   };
 });
 
@@ -398,7 +395,7 @@ watch(
       );
 
       if (notInView) {
-        activeMonth.value = parsedNewDateTo;
+        activeDate.value = parsedNewDateTo;
       }
     }
 
@@ -412,7 +409,7 @@ watch(
       );
 
       if (notInView) {
-        activeMonth.value = parsedNewValueFrom;
+        activeDate.value = parsedNewValueFrom;
       }
     }
   },
@@ -439,8 +436,7 @@ function onInputDate(newDate: Date | null) {
   if (newDate === null) {
     localValue.value = newDate;
 
-    activeDate.value = null;
-    activeMonth.value = null;
+    activeDate.value = getDateWithoutTime();
 
     emit("input", localValue.value);
 
@@ -467,8 +463,7 @@ function onInputDate(newDate: Date | null) {
   }
 
   if (!props.range) {
-    activeDate.value = null;
-    activeMonth.value = null;
+    activeDate.value = newDate;
   }
 
   wrapperRef.value?.focus();
@@ -487,6 +482,8 @@ function onKeydown(event: KeyboardEvent) {
     minutesRef.value?.blur();
     hoursRef.value?.blur();
     secondsRef.value?.blur();
+
+    isArrowKeyDirty.value = true;
   }
 
   if (event.code === KeyCode.Enter) {
@@ -504,16 +501,14 @@ function onKeydown(event: KeyboardEvent) {
 }
 
 function onInput(date: Date | null): void {
-  activeDate.value = null;
-  activeMonth.value = date;
+  activeDate.value = date || getDateWithoutTime();
 
   if (isCurrentView.value.month) currentView.value = View.Day;
   if (isCurrentView.value.year) currentView.value = View.Month;
 }
 
 function arrowKeyHandler(event: KeyboardEvent) {
-  const currentActiveDate =
-    activeDate.value || activeMonth.value || selectedDate.value || getDateWithoutTime();
+  const currentActiveDate = activeDate.value || selectedDate.value || getDateWithoutTime();
 
   let newActiveDate;
 
@@ -561,57 +556,53 @@ function arrowKeyHandler(event: KeyboardEvent) {
 
   if (newActiveDate && !isOutOfRange) {
     activeDate.value = newActiveDate;
-    activeMonth.value = newActiveDate;
   }
 }
 
 function addActiveMonth(amount: number) {
-  const currentActiveMonth = activeMonth.value || selectedDate.value || getDateWithoutTime();
+  const currentActiveMonth = activeDate.value || selectedDate.value || getDateWithoutTime();
 
-  activeMonth.value = addMonths(currentActiveMonth, amount);
+  activeDate.value = addMonths(currentActiveMonth, amount);
 }
 
 function addActiveYear(amount: number) {
-  const currentActiveMonth = activeMonth.value || selectedDate.value || getDateWithoutTime();
+  const currentActiveMonth = activeDate.value || selectedDate.value || getDateWithoutTime();
 
-  activeMonth.value = addYears(currentActiveMonth, amount);
+  activeDate.value = addYears(currentActiveMonth, amount);
 }
 
 function onClickNextButton() {
-  activeDate.value = null;
-
   if (isCurrentView.value.day) addActiveMonth(1);
   if (isCurrentView.value.month) addActiveYear(1);
   if (isCurrentView.value.year) addActiveYear(YEARS_PER_VIEW);
+
+  isArrowKeyDirty.value = false;
 }
 
 function onClickNextYearButton() {
-  activeDate.value = null;
-
   addActiveYear(1);
+
+  isArrowKeyDirty.value = false;
 }
 
 function onClickPrevButton() {
-  activeDate.value = null;
-
   if (isCurrentView.value.day) addActiveMonth(-1);
   if (isCurrentView.value.month) addActiveYear(-1);
   if (isCurrentView.value.year) addActiveYear(YEARS_PER_VIEW * -1);
+
+  isArrowKeyDirty.value = false;
 }
 
 function onClickPrevYearButton() {
-  activeDate.value = null;
-
   addActiveYear(-1);
+
+  isArrowKeyDirty.value = false;
 }
 
 function enterKeyHandler() {
   if (activeDate.value !== null && isCurrentView.value.day) {
     localValue.value = activeDate.value;
 
-    activeDate.value = null;
-    activeMonth.value = null;
-
     emit("input", localValue.value);
     emit("submit");
   }
@@ -625,9 +616,11 @@ function onClickViewSwitch() {
   const currentViewIndex = views.indexOf(currentView.value);
   const nextViewIndex = currentViewIndex + 1;
 
-  activeDate.value = null;
-
   currentView.value = (views[nextViewIndex] || views.at(0)) as View;
+
+  nextTick(() => {
+    wrapperRef.value!.focus();
+  });
 }
 
 let lastValidHourValue: string | number = "";
@@ -636,7 +629,7 @@ let lastValidSecondValue: string | number = "";
 
 function onTimeKeydown(event: KeyboardEvent) {
   if (ARROW_KEYS.includes(event.code)) {
-    wrapperRef.value?.focus();
+    wrapperRef.value!.focus();
 
     return;
   }
@@ -822,6 +815,7 @@ const {
   >
     <div v-bind="navigationAttrs" :data-test="getDataTest('navigation')">
       <UButton
+        v-if="isCurrentView.day"
         square
         size="sm"
         color="grayscale"
@@ -871,6 +865,7 @@ const {
       />
 
       <UButton
+        v-if="isCurrentView.day"
         square
         size="sm"
         color="grayscale"
@@ -889,13 +884,13 @@ const {
       :selected-date="selectedDate"
       :selected-date-to="selectedDateTo"
       :range="range"
-      :active-month="activeMonth"
       :active-date="activeDate"
       :min-date="minDate"
       :max-date="maxDate"
       :date-format="actualDateFormat"
       :locale="locale"
       :config="config"
+      :is-arrow-key-dirty="isArrowKeyDirty"
       :data-test="getDataTest('day-view')"
       @input="onInputDate"
     />
@@ -905,29 +900,30 @@ const {
       :selected-date="selectedDate"
       :selected-date-to="selectedDateTo"
       :range="range"
-      :active-month="activeMonth"
       :active-date="activeDate"
       :min-date="minDate"
       :max-date="maxDate"
       :date-format="actualDateFormat"
       :locale="locale"
       :config="config"
+      :is-arrow-key-dirty="isArrowKeyDirty"
       :data-test="getDataTest('month-view')"
       @input="onInput"
     />
 
     <YearView
       v-if="isCurrentView.year"
+      ref="year-view"
       :selected-date="selectedDate"
       :selected-date-to="selectedDateTo"
       :range="range"
-      :active-month="activeMonth"
       :active-date="activeDate"
       :min-date="minDate"
       :max-date="maxDate"
       :date-format="actualDateFormat"
       :locale="locale"
       :config="config"
+      :is-arrow-key-dirty="isArrowKeyDirty"
       :data-test="getDataTest('year-view')"
       @input="onInput"
     />

package/ui.form-calendar/UCalendarDayView.vue

@@ -34,12 +34,8 @@ const localSelectedDate = computed(() => {
   return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;
 });
 
-const activeMonthDate = computed(() => {
-  return props.activeMonth || localSelectedDate.value;
-});
-
 const firstDayOfMonth = computed(() => {
-  const date = new Date(activeMonthDate.value.valueOf());
+  const date = new Date(props.activeDate.valueOf());
 
   date.setDate(1);
 
@@ -47,17 +43,17 @@ const firstDayOfMonth = computed(() => {
 });
 
 const lastDayOfMonth = computed(() => {
-  return getLastDayOfMonth(activeMonthDate.value);
+  return getLastDayOfMonth(props.activeDate);
 });
 
 const firstDayOfPrevMonth = computed(() => {
-  const prevMonth = activeMonthDate.value.getMonth() - 1;
+  const prevMonth = props.activeDate.getMonth() - 1;
 
-  return new Date(activeMonthDate.value.getFullYear(), prevMonth, 1);
+  return new Date(props.activeDate.getFullYear(), prevMonth, 1);
 });
 
 const lastDayOfPrevMonth = computed(() => {
-  const date = new Date(activeMonthDate.value.valueOf());
+  const date = new Date(props.activeDate.valueOf());
 
   date.setDate(0);
 
@@ -65,8 +61,8 @@ const lastDayOfPrevMonth = computed(() => {
 });
 
 const firstDayOfNextMonth = computed(() => {
-  const date = new Date(activeMonthDate.value.valueOf());
-  const nextMonth = activeMonthDate.value.getMonth() + 1;
+  const date = new Date(props.activeDate.valueOf());
+  const nextMonth = props.activeDate.getMonth() + 1;
 
   date.setDate(1);
   date.setMonth(nextMonth);
@@ -78,7 +74,7 @@ const monthDays = computed(() => {
   const dayNumber = lastDayOfMonth.value.getDate();
 
   return Array.from({ length: dayNumber }, (_, index) => dayNumber - index)
-    .map((day) => getDay(activeMonthDate.value, day))
+    .map((day) => getDay(props.activeDate, day))
     .reverse();
 });
 
@@ -152,7 +148,7 @@ function getDayState(day: Date) {
 
   const isSelectedDay = isSameDay(day, localSelectedDate.value) && props.selectedDate !== null;
   const isCurrentDay = isToday(day);
-  const isAnotherMonthDay = isAnotherMothDay(day, activeMonthDate.value);
+  const isAnotherMonthDay = isAnotherMothDay(day, props.activeDate);
   const isAnotherMonthDayInRange = isAnotherMonthDay && isDayInRange;
   const isFirstDayInRange = props.selectedDate && props.range && isSameDay(day, props.selectedDate);
   const isRangeSameDay =
@@ -164,7 +160,7 @@ function getDayState(day: Date) {
     props.selectedDateTo && props.range && isSameDay(day, props.selectedDateTo);
   const isAnotherMonthFirstDayInRange = isFirstDayInRange && isAnotherMonthDay;
   const isAnotherMonthLastDayInRange = isLastDayInRange && isAnotherMonthDay;
-  const isActiveDay = props.activeDate && isSameDay(props.activeDate, day) && !props.range;
+  const isActiveDay = props.isArrowKeyDirty && isSameDay(props.activeDate, day) && !props.range;
   const isInRangePreview =
     props.range &&
     props.selectedDate &&

package/ui.form-calendar/UCalendarMonthView.vue

@@ -4,7 +4,7 @@ import { computed } from "vue";
 import useUI from "../composables/useUI.ts";
 
 import { formatDate, dateIsOutOfRange } from "./utilCalendar.ts";
-import { isSameMonth, getDateWithoutTime, isCurrentMonth } from "./utilDate.ts";
+import { isSameMonth, isCurrentMonth } from "./utilDate.ts";
 
 import defaultConfig from "./config.ts";
 import { MONTHS_PER_VIEW } from "./constants.ts";
@@ -19,26 +19,18 @@ const props = defineProps<UCalendarViewProps>();
 
 const emit = defineEmits(["input"]);
 
-const localSelectedDate = computed(() => {
-  return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;
-});
-
-const localActiveMonth = computed(
-  () => props.activeMonth || props.activeDate || localSelectedDate.value,
-);
-
 const months = computed(() =>
   Array.from({ length: MONTHS_PER_VIEW }, (_, i) => i).map((monthNumber) => getMonth(monthNumber)),
 );
 
 function getMonth(monthNumber: number) {
-  let newDate = new Date(localActiveMonth.value.valueOf());
+  let newDate = new Date(props.activeDate.valueOf());
 
   newDate.setMonth(monthNumber);
 
   // Means the current day has less days so the extra month is
   // in the following month
-  if (newDate.getDate() !== localActiveMonth.value.getDate()) {
+  if (newDate.getDate() !== props.activeDate.getDate()) {
     // Assign the last day of previous month
     newDate = new Date(newDate.getFullYear(), newDate.getMonth(), 0);
   }
@@ -47,8 +39,7 @@ function getMonth(monthNumber: number) {
 }
 
 function getMonthState(month: Date) {
-  const isSelectedMonth =
-    isSameMonth(month, localSelectedDate.value) && props.selectedDate !== null;
+  const isSelectedMonth = props.selectedDate && isSameMonth(month, props.selectedDate);
   const isPresentMonth = isCurrentMonth(month);
   const isMoreThanOneMonthRange =
     props.range &&
@@ -57,8 +48,8 @@ function getMonthState(month: Date) {
     isMoreThanOneMonthDiff(props.selectedDate, props.selectedDateTo);
 
   const isActiveMonth =
-    props.activeMonth &&
-    isSameMonth(props.activeMonth, month) &&
+    props.isArrowKeyDirty &&
+    isSameMonth(props.activeDate, month) &&
     !props.range &&
     !dateIsOutOfRange(month, props.minDate, props.maxDate, props.locale, props.dateFormat);
 

package/ui.form-calendar/UCalendarYearView.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { computed, ref, watch } from "vue";
+import { ref, watch } from "vue";
 
 import useUI from "../composables/useUI.ts";
 
-import { formatDate, getYearsRange, dateIsOutOfRange } from "./utilCalendar.ts";
-import { isSameMonth, getDateWithoutTime, isCurrentYear } from "./utilDate.ts";
+import { formatDate, dateIsOutOfRange } from "./utilCalendar.ts";
+import { isSameMonth, isCurrentYear } from "./utilDate.ts";
 
 import defaultConfig from "./config.ts";
 import { YEARS_PER_VIEW } from "./constants.ts";
@@ -19,32 +19,10 @@ const props = defineProps<UCalendarViewProps>();
 
 const emit = defineEmits(["input"]);
 
-const isFirstRender = ref(true);
 const years = ref<Date[]>([]);
 
-const localSelectedDate = computed(() => {
-  return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;
-});
-
-const localActiveMonth = computed(
-  () => props.activeMonth || props.activeDate || localSelectedDate.value,
-);
-
-// Initialize years on component creation
-updateYears();
-
 // Watch for changes to active month and update years when needed
-watch(
-  localActiveMonth,
-  () => {
-    if (isFirstRender.value) {
-      isFirstRender.value = false;
-    }
-
-    updateYears();
-  },
-  { deep: true },
-);
+watch(() => props.activeDate, updateYears, { deep: true, immediate: true });
 
 // Update years array based on active date;
 function updateYears() {
@@ -58,11 +36,11 @@ function updateYears() {
 }
 
 function isActiveDateWithinCurrentRange(): boolean {
-  if (isFirstRender.value || !years.value.length) {
+  if (!years.value.length) {
     return false;
   }
 
-  const activeYear = localActiveMonth.value.getFullYear();
+  const activeYear = props.activeDate.getFullYear();
   const firstYear = years.value.at(0)!.getFullYear();
   const lastYear = years.value.at(-1)!.getFullYear();
 
@@ -70,35 +48,25 @@ function isActiveDateWithinCurrentRange(): boolean {
 }
 
 function calculateInitialYear() {
-  const activeYear = localActiveMonth.value.getFullYear();
+  const activeYear = props.activeDate.getFullYear();
 
   // First render - position selected date as the 5th element
-  if (isFirstRender.value) {
+  if (!years.value.length) {
     const selectedYear = props.selectedDate?.getFullYear() || activeYear;
 
     return selectedYear - 4;
   }
 
   // If we have existing years, check if we need to adjust the range
-  if (years.value.length > 0) {
-    const firstYear = years.value.at(1)!.getFullYear();
-    const lastYear = years.value.at(1)!.getFullYear();
-
-    // Active year before range - position at end
-    if (activeYear < firstYear) {
-      return activeYear - (YEARS_PER_VIEW - 1);
-    }
-
-    // Active year after range - position at beginning
-    if (activeYear > lastYear) {
-      return activeYear;
-    }
-  }
-
-  // Default calculation for initial render or when range is empty
-  const [standardInitialYear] = getYearsRange(localActiveMonth.value);
+  const firstYear = years.value.at(0)!.getFullYear();
+  const lastYear = years.value.at(-1)!.getFullYear();
 
-  return standardInitialYear;
+  // Active year before range - position at end
+  if (activeYear < firstYear) {
+    return firstYear - YEARS_PER_VIEW;
+  } else {
+    return lastYear + 1;
+  }
 }
 
 function getYears(initialYear: number): Date[] {
@@ -106,13 +74,13 @@ function getYears(initialYear: number): Date[] {
 }
 
 function getYear(year: number) {
-  let newDate = new Date(localActiveMonth.value.valueOf());
+  let newDate = new Date(props.activeDate.valueOf());
 
   newDate.setFullYear(year);
 
   // Means the current day has less days so the extra month is
   // in the following month
-  if (newDate.getDate() !== localActiveMonth.value.getDate()) {
+  if (newDate.getDate() !== props.activeDate.getDate()) {
     // Assign the last day of previous month
     newDate = new Date(newDate.getFullYear(), newDate.getMonth(), 0);
   }
@@ -121,7 +89,7 @@ function getYear(year: number) {
 }
 
 function getYearState(year: Date) {
-  const isSelectedYear = isSameMonth(year, localSelectedDate.value) && props.selectedDate !== null;
+  const isSelectedYear = props.selectedDate && isSameMonth(year, props.selectedDate);
   const isPresentYear = isCurrentYear(year);
   const isMoreThanOneYearRange =
     props.selectedDateTo &&
@@ -129,8 +97,8 @@ function getYearState(year: Date) {
     props.selectedDateTo.getFullYear() - props.selectedDate.getFullYear() >= 1;
 
   const isActiveYear =
-    props.activeMonth &&
-    isSameMonth(props.activeMonth, year) &&
+    props.isArrowKeyDirty &&
+    isSameMonth(props.activeDate, year) &&
     !props.range &&
     !dateIsOutOfRange(year, props.minDate, props.maxDate, props.locale, props.dateFormat);
 
@@ -152,6 +120,14 @@ function onClickYear(year: Date) {
  */
 const { yearViewAttrs, yearAttrs, currentYearAttrs, selectedYearAttrs, activeYearAttrs } =
   useUI<Config>(defaultConfig);
+
+defineExpose({
+  /**
+   * List of years to display in the calendar view.
+   * @property {Date[]}
+   */
+  years,
+});
 </script>
 
 <template>

package/ui.form-calendar/types.ts

@@ -86,11 +86,11 @@ export interface Props<TModelValue extends DateValue> {
 export interface UCalendarViewProps {
   selectedDate: Date | null;
   selectedDateTo: Date | null;
-  activeDate: Date | null;
-  activeMonth: Date | null;
+  activeDate: Date;
   locale: DateLocale;
   dateFormat?: string;
   range: boolean;
+  isArrowKeyDirty: boolean;
   maxDate?: Date | string;
   minDate?: Date | string;
   config: Config;

package/ui.form-calendar/utilCalendar.ts

@@ -1,7 +1,7 @@
 import { revFormat, formats } from "./utilFormatting.ts";
 import { getDateFromUnixTimestamp } from "./utilDate.ts";
 
-import { TOKEN_REG_EXP, YEARS_PER_VIEW } from "./constants.ts";
+import { SEPARATOR, TOKEN_REG_EXP } from "./constants.ts";
 
 import type { DateLocale } from "./utilFormatting.ts";
 
@@ -182,10 +182,6 @@ export function dateIsOutOfRange<TLocale extends DateLocale>(
   return false;
 }
 
-export function getYearsRange(date: Date) {
-  const currentYear = date.getFullYear();
-  const from = currentYear - Math.floor(currentYear % YEARS_PER_VIEW);
-  const to = from + YEARS_PER_VIEW - 1;
-
-  return [from, to];
+export function getYearsRangeLabel(years: Date[]) {
+  return `${years.at(0)?.getFullYear()} ${SEPARATOR} ${years.at(-1)?.getFullYear()}`;
 }

package/ui.image-icon/storybook/stories.ts

@@ -18,7 +18,7 @@ interface UIconArgs extends Props {
 }
 
 /*
- * This needs for icon auto-caching, please keep it,
+ * This is needed for icon auto-caching, please keep it,
  * an object key which contains the `icon` word is required.
  */
 const icons = {