vueless 0.0.320 → 0.0.321

package/package.json

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

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

@@ -99,9 +99,6 @@ const {
   currentDayAttrs,
   anotherMonthDayAttrs,
   dayAttrs,
-  inRangeFirstDayAttrs,
-  inRangeLastDayAttrs,
-  inRangeDayAttrs,
 } = useAttrs(props);
 
 const localSelectedDate = computed(() => {
@@ -227,25 +224,27 @@ function getDayClasses(day) {
     (!isSelectedDay(day) && !isSelectedToDay(day)) || props.selectedDate === null;
 
   if (isToday(day) && isNotSelectedDate) {
-    return cx([isDayInRange && inRangeDayAttrs.value.class, currentDayAttrs.value.class]);
+    return cx([isDayInRange && props.config.inRangeDate, currentDayAttrs.value.class]);
   }
 
   if (props.range && isSelectedDay(day)) {
     return cx([
       isAnotherMothDay(day, activeMonthDate.value) && anotherMonthDayAttrs.value.class,
-      inRangeFirstDayAttrs.value.class,
+      props.config.inRangeEdgeDate,
+      props.config.inRangeFirstDate,
     ]);
   }
 
   if (props.range && isSelectedToDay(day)) {
     return cx([
       isAnotherMothDay(day, activeMonthDate.value) && anotherMonthDayAttrs.value.class,
-      inRangeLastDayAttrs.value.class,
+      props.config.inRangeEdgeDate,
+      props.config.inRangeLastDate,
     ]);
   }
 
   if (isDayInRange) {
-    return inRangeDayAttrs.value.class;
+    return props.config.inRangeDate;
   }
 
   if (isSelectedDay(day)) {

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

@@ -17,8 +17,10 @@
 
 <script setup>
 import { computed } from "vue";
+
 import { formatDate, dateIsOutOfRange } from "../services/calendar.service";
 import { isSameMonth, getDateWithoutTime, isCurrentMoth } from "../services/date.service";
+import { cx } from "../../service.ui";
 
 import useAttrs from "../composables/attrs.composable";
 
@@ -32,6 +34,11 @@ const props = defineProps({
     required: true,
   },
 
+  selectedDateTo: {
+    type: [Date, null],
+    default: undefined,
+  },
+
   activeDate: {
     type: [Date, null],
     required: true,
@@ -49,7 +56,12 @@ const props = defineProps({
 
   dateFormat: {
     type: String,
-    required: true,
+    default: undefined,
+  },
+
+  range: {
+    type: Boolean,
+    default: false,
   },
 
   maxDate: {
@@ -101,26 +113,69 @@ function getMonth(monthNumber) {
 }
 
 function getMonthClasses(month) {
+  const isMonthInRange =
+    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);
+
   if (isCurrentMoth(month) && isNotSelectedDate) {
-    return [currentMothAttrs.value.class];
+    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];
+    return selectedMonthAttrs.value.class;
   }
 
-  if (isSameMonth(props.activeMonth, month)) {
-    return [activeMonthAttrs.value.class];
+  if (isSameMonth(props.activeMonth, month) && !props.range) {
+    return activeMonthAttrs.value.class;
   }
 }
 
+function isMoreThanOneMonthDiff(date, dateTo) {
+  const yearDiff = Math.abs(dateTo.getFullYear() - date.getFullYear());
+  const monthDiff = Math.abs(dateTo.getMonth() - date.getMonth());
+  const dayDiff = Math.abs(dateTo.getDate() - date.getDate());
+
+  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/components/YearView.vue

@@ -17,8 +17,10 @@
 
 <script setup>
 import { computed } from "vue";
+
 import { formatDate, getYearsRange, dateIsOutOfRange } from "../services/calendar.service";
 import { isSameMonth, getDateWithoutTime, isCurrentYear } from "../services/date.service";
+import { cx } from "../../service.ui";
 
 import useAttrs from "../composables/attrs.composable";
 
@@ -32,6 +34,11 @@ const props = defineProps({
     required: true,
   },
 
+  selectedDateTo: {
+    type: [Date, null],
+    default: undefined,
+  },
+
   activeDate: {
     type: [Date, null],
     required: true,
@@ -49,7 +56,12 @@ const props = defineProps({
 
   dateFormat: {
     type: String,
-    required: true,
+    default: undefined,
+  },
+
+  range: {
+    type: Boolean,
+    default: false,
   },
 
   maxDate: {
@@ -105,19 +117,55 @@ function getYear(year) {
 }
 
 function getYearClasses(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;
 
+  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();
+
   if (isCurrentYear(year) && isNotSelectedDate) {
-    return [currentYearAttrs.value.class];
+    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];
+    return selectedYearAttrs.value.class;
   }
 
-  if (isSameMonth(props.activeMonth, year)) {
-    return [activeYearAttrs.value.class];
+  if (isSameMonth(props.activeMonth, year) && !props.range) {
+    return activeYearAttrs.value.class;
   }
 }
 

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

@@ -17,15 +17,16 @@ export default /*tw*/ {
   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",
-  inRangeFirstDay: "rounded-dynamic rounded-r-none bg-brand-200 text-brand-900 hover:bg-brand-200",
-  inRangeLastDay: "rounded-dynamic rounded-l-none bg-brand-200 text-brand-900 hover:bg-brand-200",
-  inRangeDay: "bg-brand-100 text-brand-900 hover:!bg-brand-200 rounded-none",
+  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",
   monthView: "grid grid-cols-4 items-center justify-center",
   month: "{UButton} mx-auto flex h-12 w-full rounded-dynamic",
-  selectedMonth: "bg-brand-900 hover:bg-brand-900 text-white",
+  selectedMonth: "bg-brand-600 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",

package/ui.form-calendar/index.vue

@@ -11,7 +11,7 @@
           no-ring
           size="sm"
           variant="thirdary"
-          :right-icon="isCurrentView.day && config.defaults.viewSwitchIcon"
+          :right-icon="isCurrentView.day ? config.defaults.viewSwitchIcon : undefined"
           v-bind="viewSwitchButtonAttrs"
           @mousedown.prevent.capture
           @click="onClickViewSwitch"
@@ -69,6 +69,8 @@
     <MonthView
       v-if="isCurrentView.month"
       :selected-date="selectedDate"
+      :selected-date-to="selectedDateTo"
+      :range="range"
       :active-month="activeMonth"
       :active-date="activeDate"
       :min-date="minDate"
@@ -82,6 +84,8 @@
     <YearView
       v-if="isCurrentView.year"
       :selected-date="selectedDate"
+      :selected-date-to="selectedDateTo"
+      :range="range"
       :active-month="activeMonth"
       :active-date="activeDate"
       :min-date="minDate"

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

@@ -44,20 +44,28 @@ export default /*tw*/ {
   periodDateYearList: "grid grid-cols-3 grid-rows-1 gap-0.5",
   periodDateQuarterList: "",
   periodDate: "w-full",
+  periodDateInRange: "bg-brand-100 text-brand-900 hover:!bg-brand-200 rounded-none",
+  edgePeriodDate: "rounded-dynamic bg-brand-200 text-brand-900 hover:bg-brand-200",
+  firstPeriodGridDate: "rounded-r-none",
+  lastPeriodGridDate: "rounded-l-none",
+  firstPeriodListDate: "rounded-b-none",
+  lastPeriodListDate: "rounded-t-none",
   periodDateActive: "bg-gray-100",
-  rangeInputWrapper: "flex mt-4 -space-x-px",
+  rangeInputWrapper: "flex mt-4 -space-x-px group/range-input-wrapper",
+  rangeInputFirst: "group/range-input-first",
+  rangeInputLast: "group/range-input-last",
   rangeInput: {
     component: "{UInput}",
     label: {
       component: "{ULabel}",
-      wrapper: "group/range-input-wrapper w-full hover:z-10 focus:z-10",
+      wrapper: "w-full hover:z-10 focus:z-10",
       description: "hidden",
     },
     block: `
       focus-within:z-10 focus-within:ring-0
-      group-first/range-input-wrapper:rounded-r-none group-last/range-input-wrapper:rounded-l-none
+      group-[]/range-input-first:rounded-r-none group-[]/range-input-last:rounded-l-none
     `,
-    input: "group-first/range-input-wrapper:rounded-r-none group-last/range-input-wrapper:rounded-l-none",
+    input: "group-[]/range-input-first:rounded-r-none group-[]/range-input-last:rounded-l-none",
   },
   inputRangeError: "text-xs font-normal leading-none mt-2 text-center text-red-500",
   calendar: {

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

@@ -163,13 +163,13 @@
 
           <div v-bind="periodDateListAttrs(getPeriodDateListClasses())">
             <UButton
-              v-for="date in periodDateList"
+              v-for="(date, index) in periodDateList"
               :key="date.title"
               no-ring
               size="sm"
               variant="thirdary"
               :disabled="isDatePeriodOutOfRange(date)"
-              v-bind="periodDateAttrs(getPeriodDateClasses(date))"
+              v-bind="periodDateAttrs(getPeriodDateClasses(date, index))"
               :label="String(date.title)"
               @click="selectDate(date), toggleMenu()"
             />
@@ -183,6 +183,7 @@
             :error="inputRangeFromError"
             size="md"
             v-bind="rangeInputAttrs"
+            :class="cx([rangeInputAttrs.class, config.rangeInputFirst])"
             :name="rangeInputName"
             @input="onInputRangeInput($event, INPUT_RANGE_TYPE.start)"
           />
@@ -193,6 +194,7 @@
             :error="inputRangeToError"
             size="md"
             v-bind="rangeInputAttrs"
+            :class="cx([rangeInputAttrs.class, config.rangeInputLast])"
             :name="rangeInputName"
             @input="onInputRangeInput($event, INPUT_RANGE_TYPE.end)"
           />
@@ -229,7 +231,7 @@ import { LOCALE_TYPE } from "../ui.form-calendar/constants";
 
 import vClickOutside from "../directive.clickOutside";
 
-import { getRandomId, getDefault } from "../service.ui";
+import { getRandomId, getDefault, cx } from "../service.ui";
 
 import {
   addDays,
@@ -811,8 +813,6 @@ function onClickPeriodButton(periodName) {
 
     period.value = PERIOD.year;
   }
-
-  selectDate(periodDateList.value.at(0));
 }
 
 function onClickOwnRange() {
@@ -862,7 +862,7 @@ function onClickShiftDatesList(action) {
 
   if (isPeriod.value.week) {
     activeDate.value = addMonths(activeDate.value, defaultRange);
-    periodDateList.value = getWeekDateList(activeDate.value, config.value.i18n.months.shorthand);
+    periodDateList.value = getWeekDateList(activeDate.value, locale.value.months.shorthand);
   }
 
   if (isPeriod.value.month) {
@@ -885,7 +885,64 @@ function getPeriodButtonsClasses(periodName) {
   return period.value === periodName ? config.value.periodButtonActive : "";
 }
 
-function getPeriodDateClasses(date) {
+function getPeriodDateClasses(date, index) {
+  const localStart = new Date(localValue.value.from);
+  const localEnd = new Date(localValue.value.to);
+  const isListType = isPeriod.value.quarter || isPeriod.value.week;
+  const firstInRangeClasses = cx([
+    config.value.edgePeriodDate,
+    isListType ? config.value.firstPeriodListDate : config.value.firstPeriodGridDate,
+  ]);
+  const lastInRangeClasses = cx([
+    config.value.edgePeriodDate,
+    isListType ? config.value.lastPeriodListDate : config.value.lastPeriodGridDate,
+  ]);
+
+  if (isPeriod.value.year) {
+    localStart.setMonth(0, 1);
+    localEnd.setMonth(11, 31);
+  }
+
+  localStart.setHours(0, 0, 0, 0);
+  localEnd.setHours(23, 59, 59, 999);
+
+  const startDateInRangeIndex = periodDateList.value.findIndex((periodDate) => {
+    return localStart <= periodDate.endRange && localStart >= periodDate.startRange;
+  });
+
+  const endDateInRangeIndex = periodDateList.value.findIndex((periodDate) => {
+    return localEnd >= periodDate.startRange && localEnd <= periodDate.endRange;
+  });
+
+  let isInRange = index >= startDateInRangeIndex && index <= endDateInRangeIndex;
+
+  if (!~startDateInRangeIndex || !~endDateInRangeIndex) {
+    isInRange =
+      (index >= startDateInRangeIndex && startDateInRangeIndex > -1) ||
+      (index <= endDateInRangeIndex && endDateInRangeIndex > -1);
+  }
+
+  if (
+    !~startDateInRangeIndex &&
+    periodDateList.value.at(0).startRange > localStart &&
+    !~endDateInRangeIndex &&
+    periodDateList.value.at(0).endRange < localEnd
+  ) {
+    isInRange = true;
+  }
+
+  const isSingleItem =
+    startDateInRangeIndex === endDateInRangeIndex && ~endDateInRangeIndex && ~startDateInRangeIndex;
+
+  if (isInRange) {
+    return cx([
+      config.value.periodDateInRange,
+      startDateInRangeIndex === index && firstInRangeClasses,
+      endDateInRangeIndex === index && lastInRangeClasses,
+      isSingleItem && "rounded-dynamic",
+    ]);
+  }
+
   return localValue.value.from === date.startRange ? config.value.periodDateActive : "";
 }
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.320",
+  "version": "0.0.321",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -114,6 +114,14 @@
                 "type": "date|null"
               }
             },
+            {
+              "name": "selectedDateTo",
+              "value": {
+                "kind": "expression",
+                "type": "date|null"
+              },
+              "default": "undefined"
+            },
             {
               "name": "activeDate",
               "required": true,
@@ -140,11 +148,19 @@
             },
             {
               "name": "dateFormat",
-              "required": true,
               "value": {
                 "kind": "expression",
                 "type": "string"
-              }
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "range",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             },
             {
               "name": "maxDate",
@@ -8791,6 +8807,14 @@
                 "type": "date|null"
               }
             },
+            {
+              "name": "selectedDateTo",
+              "value": {
+                "kind": "expression",
+                "type": "date|null"
+              },
+              "default": "undefined"
+            },
             {
               "name": "activeDate",
               "required": true,
@@ -8817,11 +8841,19 @@
             },
             {
               "name": "dateFormat",
-              "required": true,
               "value": {
                 "kind": "expression",
                 "type": "string"
-              }
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "range",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             },
             {
               "name": "maxDate",