vueless 1.0.2-beta.7 → 1.0.2-beta.8

package/package.json

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

package/ui.form-calendar/UCalendarDayView.vue

@@ -151,7 +151,6 @@ function getDayState(day: Date) {
   const isCurrentDay = isToday(day);
   const isAnotherMonthDay = isAnotherMothDay(day, activeMonthDate.value);
   const isAnotherMonthDayInRange = isAnotherMonthDay && isDayInRange;
-  const isCurrentDayInRange = isCurrentDay && isDayInRange;
   const isFirstDayInRange = props.range && isSameDay(day, localSelectedDate.value);
   const isRangeSameDay =
     props.selectedDateTo &&
@@ -160,8 +159,6 @@ function getDayState(day: Date) {
     isSameDay(day, props.selectedDateTo);
   const isLastDayInRange =
     props.selectedDateTo && props.range && isSameDay(day, props.selectedDateTo);
-  const isCurrentFirstDayInRange = isFirstDayInRange && isCurrentDay;
-  const isCurrentLastDayInRange = isLastDayInRange && isCurrentDay;
   const isAnotherMonthFirstDayInRange = isFirstDayInRange && isAnotherMonthDay;
   const isAnotherMonthLastDayInRange = isLastDayInRange && isAnotherMonthDay;
   const isActiveDay = props.activeDate && isSameDay(props.activeDate, day) && !props.range;
@@ -179,11 +176,8 @@ function getDayState(day: Date) {
     isSelectedDay,
     isCurrentDay,
     isAnotherMonthDay,
-    isCurrentDayInRange,
     isFirstDayInRange,
     isLastDayInRange,
-    isCurrentFirstDayInRange,
-    isCurrentLastDayInRange,
     isAnotherMonthFirstDayInRange,
     isAnotherMonthLastDayInRange,
     isActiveDay,
@@ -238,8 +232,6 @@ const {
   anotherMonthLastDayInRangeAttrs,
   selectedDayAttrs,
   activeDayAttrs,
-  currentLastDayInRangeAttrs,
-  currentFirstDayInRangeAttrs,
   anotherMonthDayInRangeAttrs,
 } = useUI<Config>(defaultConfig);
 
@@ -274,50 +266,6 @@ defineExpose({
           @mouseover="onMouseoverDay(day)"
         />
 
-        <UButton
-          v-else-if="getDayState(day).isCurrentDay && !getDayState(day).isDayInRange"
-          tabindex="-1"
-          variant="ghost"
-          color="primary"
-          size="md"
-          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).isCurrentFirstDayInRange"
-          tabindex="-1"
-          variant="soft"
-          color="primary"
-          size="md"
-          square
-          v-bind="currentFirstDayInRangeAttrs"
-          :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
-          :label="formatDate(day, 'j', locale)"
-          @mousedown.prevent.capture
-          @click="onClickDay(day)"
-          @mouseover="onMouseoverDay(day)"
-        />
-
-        <UButton
-          v-else-if="getDayState(day).isCurrentLastDayInRange"
-          tabindex="-1"
-          variant="soft"
-          color="primary"
-          size="md"
-          square
-          v-bind="currentLastDayInRangeAttrs"
-          :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
-          :label="formatDate(day, 'j', locale)"
-          @mousedown.prevent.capture
-          @click="onClickDay(day)"
-          @mouseover="onMouseoverDay(day)"
-        />
-
         <UButton
           v-else-if="getDayState(day).isRangeSameDay"
           tabindex="-1"
@@ -394,13 +342,16 @@ defineExpose({
         />
 
         <UButton
-          v-else-if="getDayState(day).isDayInRange && getDayState(day).isCurrentDay"
+          v-else-if="
+            getDayState(day).isAnotherMonthDayInRange ||
+            getDayState(day).isInRangePreviewAnotherMonth
+          "
           tabindex="-1"
           variant="ghost"
           color="primary"
           size="md"
           square
-          v-bind="currentDayInRangeAttrs"
+          v-bind="anotherMonthDayInRangeAttrs"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
           :label="formatDate(day, 'j', locale)"
           @mousedown.prevent.capture
@@ -410,15 +361,15 @@ defineExpose({
 
         <UButton
           v-else-if="
-            getDayState(day).isAnotherMonthDayInRange ||
-            getDayState(day).isInRangePreviewAnotherMonth
+            getDayState(day).isCurrentDay &&
+            (getDayState(day).isDayInRange || getDayState(day).isInRangePreview)
           "
           tabindex="-1"
           variant="ghost"
           color="primary"
           size="md"
           square
-          v-bind="anotherMonthDayInRangeAttrs"
+          v-bind="currentDayInRangeAttrs"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
           :label="formatDate(day, 'j', locale)"
           @mousedown.prevent.capture
@@ -441,6 +392,21 @@ defineExpose({
           @mouseover="onMouseoverDay(day)"
         />
 
+        <UButton
+          v-else-if="getDayState(day).isCurrentDay && !getDayState(day).isDayInRange"
+          tabindex="-1"
+          variant="ghost"
+          color="primary"
+          size="md"
+          square
+          v-bind="currentDayAttrs"
+          :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
+          :label="formatDate(day, 'j', locale)"
+          @mousedown.prevent.capture
+          @click="onClickDay(day)"
+          @mouseover="onMouseoverDay(day)"
+        />
+
         <UButton
           v-else-if="getDayState(day).isActiveDay"
           tabindex="-1"

package/ui.form-calendar/config.ts

@@ -38,8 +38,6 @@ export default /*tw*/ {
   firstDayInRange: "{>day} {>edgeDateInRange} {>firstDateInRange}",
   anotherMonthFirstDayInRange: "{>day} {>anotherMonthDay} {>edgeDateInRange} {>firstDateInRange}",
   lastDayInRange: "{>day} {>edgeDateInRange} {>lastDateInRange}",
-  currentLastDayInRange: "{>day} {>edgeDateInRange} {>lastDateInRange} {>currentDate}",
-  currentFirstDayInRange: "{>day} {>edgeDateInRange} {>firstDateInRange} {>currentDate}",
   anotherMonthLastDayInRange: "{>day} {>anotherMonthDay} {>edgeDateInRange} {>lastDateInRange}",
   selectedDay: "{>day} {>selectedDate}",
   activeDay: "{>day} {>activeDate}",

package/ui.form-date-picker/storybook/stories.ts

@@ -38,6 +38,7 @@ export default {
   args: {
     label: "Select a date",
     modelValue: null,
+    openDirectionY: "bottom",
   },
   argTypes: {
     ...getArgTypes(COMPONENT_NAME),

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

@@ -224,16 +224,14 @@ const { userFormatDate } = useUserFormat(
   props.userDateFormat,
 );
 
-watch(
-  calendarValue,
-  () => {
+watch(calendarValue, () => {
+  if (calendarValue.value.from && calendarValue.value.to) {
     localValue.value = {
       from: calendarValue.value.from,
       to: calendarValue.value.to,
     };
-  },
-  { deep: true },
-);
+  }
+});
 
 watch(
   () => props.modelValue,

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

@@ -33,7 +33,9 @@ function isGraterThanTo(value: string) {
   const parsedValue = parseDate(value, INPUT_RANGE_FORMAT, props.locale);
   const parsedTo = parseDate(localValue.value.to, props.dateFormat, props.locale);
 
-  return parsedValue && parsedTo && parsedValue > parsedTo;
+  if (!parsedValue || !parsedTo) return false;
+
+  return parsedValue > parsedTo && !isSameDay(parsedValue, parsedTo);
 }
 
 function isSmallerThanFrom(value: string) {
@@ -42,7 +44,9 @@ function isSmallerThanFrom(value: string) {
   const parsedValue = parseDate(value, INPUT_RANGE_FORMAT, props.locale);
   const parsedFrom = parseDate(localValue.value.from, props.dateFormat, props.locale);
 
-  return parsedValue && parsedFrom && parsedValue < parsedFrom;
+  if (!parsedValue || !parsedFrom) return false;
+
+  return parsedValue < parsedFrom && !isSameDay(parsedValue, parsedFrom);
 }
 
 function validateInput(value: string, type: `${InputRangeType}`) {

package/ui.form-date-picker-range/storybook/stories.ts

@@ -44,6 +44,7 @@ export default {
       from: fromDate,
       to: toDate,
     },
+    openDirectionY: "bottom",
   },
   argTypes: {
     ...getArgTypes(COMPONENT_NAME),