vueless 0.0.319 → 0.0.321

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.319",
+  "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",
@@ -119,10 +120,12 @@ export default /*tw*/ {
     okLabel: "Ok",
   },
   defaults: {
-    userFormat: "j F, Y",
+    userDateFormat: "j F, Y",
+    userDateTimeFormat: "j F, Y - H:i:S",
     range: false,
     timepicker: false,
     dateFormat: undefined,
+    dateTimeFormat: undefined,
     maxDate: undefined,
     minDate: undefined,
     /* icons */

package/ui.form-calendar/index.stories.js

@@ -68,4 +68,4 @@ MinMax.args = {
 };
 
 export const DateFormat = DefaultTemplate.bind({});
-DateFormat.args = { dateFormat: "d.m.Y", userFormat: "d.m.Y", value: "28.06.2024" };
+DateFormat.args = { dateFormat: "d.m.Y", userDateFormat: "d.m.Y", value: "28.06.2024" };

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"
@@ -60,7 +60,7 @@
       :active-date="activeDate"
       :min-date="minDate"
       :max-date="maxDate"
-      :date-format="dateFormat"
+      :date-format="actualDateFormat"
       :locale="locale"
       :config="config"
       @input="onInputDate"
@@ -69,11 +69,13 @@
     <MonthView
       v-if="isCurrentView.month"
       :selected-date="selectedDate"
+      :selected-date-to="selectedDateTo"
+      :range="range"
       :active-month="activeMonth"
       :active-date="activeDate"
       :min-date="minDate"
       :max-date="maxDate"
-      :date-format="dateFormat"
+      :date-format="actualDateFormat"
       :locale="locale"
       :config="config"
       @input="onInput"
@@ -82,11 +84,13 @@
     <YearView
       v-if="isCurrentView.year"
       :selected-date="selectedDate"
+      :selected-date-to="selectedDateTo"
+      :range="range"
       :active-month="activeMonth"
       :active-date="activeDate"
       :min-date="minDate"
       :max-date="maxDate"
-      :date-format="dateFormat"
+      :date-format="actualDateFormat"
       :locale="locale"
       :config="config"
       @input="onInput"
@@ -231,12 +235,28 @@ const props = defineProps({
     default: getDefault(defaultConfig, UCalendar).dateFormat,
   },
 
+  /**
+   * Same as date format, but used when timepicker is enabled.
+   */
+  dateTimeFormat: {
+    type: String,
+    default: getDefault(defaultConfig, UCalendar).dateTimeFormat,
+  },
+
   /**
    * User friendly date format.
    */
-  userFormat: {
+  userDateFormat: {
     type: String,
-    default: getDefault(defaultConfig, UCalendar).userFormat,
+    default: getDefault(defaultConfig, UCalendar).userDateFormat,
+  },
+
+  /**
+   * Same as user format, but used when timepicker is enabled.
+   */
+  userDateTimeFormat: {
+    type: String,
+    default: getDefault(defaultConfig, UCalendar).userDateTimeFormat,
   },
 
   /**
@@ -386,6 +406,18 @@ const locale = computed(() => {
   };
 });
 
+const isTimepickerEnabled = computed(() => {
+  return props.timepicker && !props.range;
+});
+
+const actualDateFormat = computed(() => {
+  return isTimepickerEnabled.value ? props.dateTimeFormat : props.dateFormat;
+});
+
+const actualUserFormat = computed(() => {
+  return isTimepickerEnabled.value ? props.userDateTimeFormat : props.userDateFormat;
+});
+
 const userFormatLocale = computed(() => {
   const { months, weekdays } = currentLocale.value;
 
@@ -413,10 +445,6 @@ const userFormatLocale = computed(() => {
   };
 });
 
-const isTimepickerEnabled = computed(() => {
-  return props.timepicker && !props.range;
-});
-
 const isModelRangeType = computed(() => {
   return (
     props.modelValue !== null &&
@@ -433,22 +461,26 @@ const localValue = computed({
       const to = isModelRangeType.value ? props.modelValue.to : null;
 
       return {
-        from: parseDate(from || null, props.dateFormat, locale.value),
-        to: parseDate(to || null, props.dateFormat, locale.value),
+        from: parseDate(from || null, actualDateFormat.value, locale.value),
+        to: parseDate(to || null, actualDateFormat.value, locale.value),
       };
     }
 
     return isModelRangeType.value
-      ? parseDate(props.modelValue.from || null, props.dateFormat, locale.value)
-      : parseDate(props.modelValue || null, props.dateFormat, locale.value);
+      ? parseDate(props.modelValue.from || null, actualDateFormat.value, locale.value)
+      : parseDate(props.modelValue || null, actualDateFormat.value, locale.value);
   },
   set(value) {
     value = getCurrentValueType(value);
 
-    const parsedDate = parseDate(props.range ? value.from : value, props.dateFormat, locale.value);
+    const parsedDate = parseDate(
+      props.range ? value.from : value,
+      actualDateFormat.value,
+      locale.value,
+    );
     const parsedDateTo =
       isModelRangeType.value && props.range
-        ? parseDate(value.to, props.dateFormat, locale.value)
+        ? parseDate(value.to, actualDateFormat.value, locale.value)
         : undefined;
 
     if (parsedDate && isTimepickerEnabled.value) {
@@ -462,19 +494,19 @@ const localValue = computed({
       props.minDate,
       props.maxDate,
       locale.value,
-      props.dateFormat,
+      actualDateFormat.value,
     );
 
     if (isOutOfRange) {
       return;
     }
 
-    const newDate = props.dateFormat
-      ? formatDate(parsedDate || null, props.dateFormat, locale.value)
+    const newDate = actualDateFormat.value
+      ? formatDate(parsedDate || null, actualDateFormat.value, locale.value)
       : parsedDate;
 
-    const newDateTo = props.dateFormat
-      ? formatDate(parsedDateTo || null, props.dateFormat, locale.value)
+    const newDateTo = actualDateFormat.value
+      ? formatDate(parsedDateTo || null, actualDateFormat.value, locale.value)
       : parsedDateTo;
 
     emit("update:modelValue", props.range ? { from: newDate, to: newDateTo } : newDate);
@@ -492,23 +524,25 @@ const localValue = computed({
 const selectedDate = computed(() => {
   return parseDate(
     props.range ? localValue.value.from : localValue.value,
-    props.dateFormat,
+    actualDateFormat.value,
     locale.value,
   );
 });
 
 const selectedDateTo = computed(() => {
-  return props.range ? parseDate(localValue.value.to, props.dateFormat, locale.value) : undefined;
+  return props.range
+    ? parseDate(localValue.value.to, actualDateFormat.value, locale.value)
+    : undefined;
 });
 
 const formattedDate = computed(() => {
-  return formatDate(selectedDate.value, props.dateFormat, locale.value);
+  return formatDate(selectedDate.value, actualDateFormat.value, locale.value);
 });
 
 const userFormattedDate = computed(() => {
-  const date = formatDate(selectedDate.value, props.userFormat, userFormatLocale.value);
+  const date = formatDate(selectedDate.value, actualUserFormat.value, userFormatLocale.value);
   const dateTo = props.range
-    ? formatDate(selectedDateTo.value, props.userFormat, userFormatLocale.value)
+    ? formatDate(selectedDateTo.value, actualUserFormat.value, userFormatLocale.value)
     : undefined;
 
   return props.range ? `${date} ${SEPARATOR} ${dateTo}` : date;
@@ -699,7 +733,7 @@ function arrowKeyHandler(event) {
     props.minDate,
     props.maxDate,
     locale.value,
-    props.dateFormat,
+    actualDateFormat.value,
   );
 
   if (newActiveDate && !isOutOfRange) {

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

@@ -108,7 +108,8 @@ export default /*tw*/ {
     okLabel: "Ok",
   },
   defaults: {
-    userFormat: "j F, Y",
+    userDateFormat: "j F, Y",
+    userDateTimeFormat: "j F, Y - H:i:S",
     size: "md",
     openDirectionX: "auto",
     openDirectionY: "auto",
@@ -116,6 +117,7 @@ export default /*tw*/ {
     timepicker: false,
     disabled: false,
     dateFormat: undefined,
+    dateTimeFormat: undefined,
     maxDate: undefined,
     minDate: undefined,
   },

package/ui.form-date-picker/index.stories.js

@@ -133,13 +133,13 @@ export const placeholder = DefaultTemplate.bind({});
 placeholder.args = { placeholder: "some placeholder" };
 
 export const DateFormat = DefaultTemplate.bind({});
-DateFormat.args = { dateFormat: "d.m.Y", userFormat: "d.m.Y", modelValue: "28.06.2024" };
+DateFormat.args = { dateFormat: "d.m.Y", userDateFormat: "d.m.Y", modelValue: "28.06.2024" };
 
 export const Timepicker = DefaultTemplate.bind({});
 Timepicker.args = {
   timepicker: true,
   modelValue: new Date(2024, 2, 14, 12, 24, 14),
-  userFormat: "j F, Y - H:i:S",
+  userDateFormat: "j F, Y - H:i:S",
 };
 
 export const MinMax = DefaultTemplate.bind({});

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

@@ -47,7 +47,9 @@
         tabindex="-1"
         :timepicker="timepicker"
         :date-format="dateFormat"
-        :user-format="userFormat"
+        :date-time-format="dateTimeFormat"
+        :user-date-format="userFormat"
+        :user-date-time-format="userDateTimeFormat"
         :max-date="maxDate"
         :min-date="minDate"
         v-bind="calendarAttrs"
@@ -217,12 +219,28 @@ const props = defineProps({
     default: getDefault(defaultConfig, UDatePicker).dateFormat,
   },
 
+  /**
+   * Same as date format, but used when timepicker is enabled.
+   */
+  dateTimeFormat: {
+    type: String,
+    default: getDefault(defaultConfig, UCalendar).dateTimeFormat,
+  },
+
   /**
    * User friendly date format.
    */
-  userFormat: {
+  userDateFormat: {
+    type: String,
+    default: getDefault(defaultConfig, UDatePicker).userDateFormat,
+  },
+
+  /**
+   * Same as user format, but used when timepicker is enabled.
+   */
+  userDateTimeFormat: {
     type: String,
-    default: getDefault(defaultConfig, UDatePicker).userFormat,
+    default: getDefault(defaultConfig, UCalendar).userDateTimeFormat,
   },
 
   /**
@@ -341,7 +359,7 @@ function onBlur(event) {
 }
 
 function formatUserDate(data) {
-  if (props.userFormat !== STANDARD_USER_FORMAT) return data;
+  if (props.userFormat !== STANDARD_USER_FORMAT || props.timepicker) return data;
 
   let prefix = "";
   const formattedDate = data.charAt(0).toUpperCase() + data.toLowerCase().slice(1);

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.stories.js

@@ -150,7 +150,7 @@ MinMax.args = {
 export const DateFormat = DefaultTemplate.bind({});
 DateFormat.args = {
   dateFormat: "d.m.Y",
-  userFormat: "d.m.Y",
+  userDateFormat: "d.m.Y",
   value: { from: "28.06.2024", to: "30.06.2024" },
 };
 

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.319",
+  "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",
@@ -1204,7 +1220,15 @@
               }
             },
             {
-              "name": "userFormat",
+              "name": "dateTimeFormat",
+              "description": "Same as date format, but used when timepicker is enabled.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "userDateFormat",
               "description": "User friendly date format.",
               "value": {
                 "kind": "expression",
@@ -1212,6 +1236,15 @@
               },
               "default": "j F, Y"
             },
+            {
+              "name": "userDateTimeFormat",
+              "description": "Same as user format, but used when timepicker is enabled.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "j F, Y - H:i:S"
+            },
             {
               "name": "minDate",
               "description": "Min date in JS Date Object or Date String formatted in provided props.dateFormat.",
@@ -2423,7 +2456,15 @@
               }
             },
             {
-              "name": "userFormat",
+              "name": "dateTimeFormat",
+              "description": "Same as date format, but used when timepicker is enabled.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "userDateFormat",
               "description": "User friendly date format.",
               "value": {
                 "kind": "expression",
@@ -2431,6 +2472,15 @@
               },
               "default": "j F, Y"
             },
+            {
+              "name": "userDateTimeFormat",
+              "description": "Same as user format, but used when timepicker is enabled.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "j F, Y - H:i:S"
+            },
             {
               "name": "id",
               "description": "@ignore: Unique element id.",
@@ -8757,6 +8807,14 @@
                 "type": "date|null"
               }
             },
+            {
+              "name": "selectedDateTo",
+              "value": {
+                "kind": "expression",
+                "type": "date|null"
+              },
+              "default": "undefined"
+            },
             {
               "name": "activeDate",
               "required": true,
@@ -8783,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",