vueless 0.0.169 → 0.0.171

package/directive.clickOutside/index.js

@@ -1,14 +1,22 @@
 import { unref } from "vue";
 
 function clickOutside(target, handler, options) {
-  const { capture = true } = options;
+  const { capture = true, ignore = [] } = options;
 
   let shouldListen = true;
 
+  const ignoreList = unref(ignore).map((item) => unref(item));
   const el = unref(target);
 
   function onClick(event) {
-    if (!el || el === event.target || event.composedPath().includes(el)) return;
+    if (
+      !el ||
+      el === event.target ||
+      event.composedPath().includes(el) ||
+      ignoreList.includes(event.target)
+    ) {
+      return;
+    }
 
     if (!shouldListen) {
       shouldListen = true;

package/package.json

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

package/ui.data-table/composables/attrs.composable.js

@@ -8,7 +8,13 @@ export function useAttrs(
   { tableRows, isNesting, isShownActionsHeader, isHeaderSticky, isFooterSticky },
 ) {
   const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { stickyHeaderCell, headerCell } = config.value;
+  const { stickyHeaderCell, headerCell, footerRow, bodyCell, headerCellGeneral } = config.value;
+
+  const cvaHeaderCellGeneral = cva({
+    base: headerCellGeneral.base,
+    variants: headerCellGeneral.variants,
+    compoundVariants: headerCellGeneral.compoundVariants,
+  });
 
   const cvaCustomHeaderItem = cva({
     base: stickyHeaderCell.base,
@@ -22,9 +28,23 @@ export function useAttrs(
     compoundVariants: headerCell.compoundVariants,
   });
 
-  const stickyHeaderCellClasses = computed(() => cvaCustomHeaderItem({ compact: props.compact }));
+  const cvaFooterRow = cva({
+    base: footerRow.base,
+    variants: footerRow.variants,
+    compoundVariants: footerRow.compoundVariants,
+  });
+
+  const cvaBodyCell = cva({
+    base: bodyCell.base,
+    variants: bodyCell.variants,
+    compoundVariants: bodyCell.compoundVariants,
+  });
 
+  const stickyHeaderCellClasses = computed(() => cvaCustomHeaderItem({ compact: props.compact }));
   const headerCellClasses = computed(() => cvaHeaderCell({ compact: props.compact }));
+  const footerRowClasses = computed(() => cvaFooterRow({ compact: props.compact }));
+  const bodyCellClasses = computed(() => cvaBodyCell({ compact: props.compact }));
+  const headerCellGeneralClasses = computed(() => cvaHeaderCellGeneral({ compact: props.compact }));
 
   const wrapperAttrs = getAttrs("wrapper");
   const stickyHeaderAttrsRaw = getAttrs("stickyHeader");
@@ -53,7 +73,7 @@ export function useAttrs(
     isComponent: true,
   });
   const bodyAttrs = getAttrs("body");
-  const bodyCellAttrsRaw = getAttrs("bodyCell", { isComponent: true });
+  const bodyCellAttrsRaw = getAttrs("bodyCell", { classes: bodyCellClasses });
   const bodyCheckboxAttrs = getAttrs("bodyCheckbox", { isComponent: true });
   const bodyCellDateSeparatorAttrs = getAttrs("bodyCellDateSeparator");
   const bodyDateSeparatorAttrs = getAttrs("bodyDateSeparator", { isComponent: true });
@@ -61,14 +81,13 @@ export function useAttrs(
   const bodyCellSecondaryAttrs = getAttrs("bodyCellSecondary");
   const bodyCellSecondaryEmptyAttrs = getAttrs("bodyCellSecondaryEmpty");
   const footerAttrsRaw = getAttrs("footer");
-  const footerRowAttrs = getAttrs("footerRow");
-  const footerCellAttrs = getAttrs("footerCell", { isComponent: true });
+  const footerRowAttrs = getAttrs("footerRow", { classes: footerRowClasses });
   const stickyFooterRowAttrs = getAttrs("stickyFooterRow");
   const bodyEmptyStateAttrs = getAttrs("bodyEmptyState", { isComponent: true });
   const bodyRowBeforeAttrsRaw = getAttrs("bodyRowBefore");
-  const bodyRowBeforeCellAttrs = getAttrs("bodyRowBeforeCell", { isComponent: true });
+  const bodyRowBeforeCellAttrsRaw = getAttrs("bodyRowBeforeCell");
   const bodyRowAfterAttrs = getAttrs("bodyRowAfter");
-  const bodyRowAfterCellAttrs = getAttrs("bodyRowAfterCell", { isComponent: true });
+  const bodyRowAfterCellAttrsRaw = getAttrs("bodyRowAfterCell");
   const bodyCellNestedWrapperAttrsRaw = getAttrs("bodyCellNestedWrapper");
 
   const bodyRowAttrsRaw = getAttrs("bodyRow");
@@ -78,6 +97,16 @@ export function useAttrs(
     class: cx([bodyCellAttrsRaw.value.class, classes || ""]),
   }));
 
+  const bodyRowBeforeCellAttrs = computed(() => ({
+    ...bodyRowBeforeAttrsRaw.value,
+    class: cx([bodyCellAttrs.value().class, bodyRowBeforeCellAttrsRaw.value.class]),
+  }));
+
+  const bodyRowAfterCellAttrs = computed(() => ({
+    ...bodyRowAfterCellAttrsRaw.value,
+    class: cx([bodyCellAttrs.value().class, bodyRowAfterCellAttrsRaw.value.class]),
+  }));
+
   const bodyRowAttrs = computed(() => (row) => ({
     ...bodyRowAttrsRaw.value,
     class: cx([bodyRowAttrsRaw.value.class, row]),
@@ -85,7 +114,7 @@ export function useAttrs(
 
   const headerCellAttrs = computed(() => (classes) => ({
     ...headerCellAttrsRaw.value,
-    class: cx([config.value.headerCellGeneral, headerCellAttrsRaw.value.class, classes]),
+    class: cx([headerCellGeneralClasses.value, headerCellAttrsRaw.value.class, classes]),
   }));
 
   const stickyHeaderActionsCounterAttrs = computed(() => ({
@@ -151,7 +180,7 @@ export function useAttrs(
 
   const stickyHeaderCellAttrs = computed(() => (classes) => ({
     ...stickyHeaderCellAttrsRaw.value,
-    class: cx([config.value.headerCellGeneral, stickyHeaderCellAttrsRaw.value.class, classes]),
+    class: cx([headerCellGeneralClasses.value, stickyHeaderCellAttrsRaw.value.class, classes]),
   }));
 
   const bodyRowDateSeparatorAttrs = (rowIndex) => {
@@ -188,7 +217,6 @@ export function useAttrs(
     bodyRowDateSeparatorAttrs,
     bodyCellNestedWrapperAttrs,
     bodyCellAttrs,
-    footerCellAttrs,
     stickyHeaderCounterAttrs,
     stickyHeaderActionsCounterAttrs,
     headerCounterAttrs,

package/ui.data-table/configs/default.config.js

@@ -1,6 +1,13 @@
 export default /*tw*/ {
   wrapper: "relative",
-  headerCellGeneral: "p-4 text-sm font-normal text-gray-500 text-left",
+  headerCellGeneral: {
+    base: "p-4 first:p-5 text-sm font-normal text-gray-500 text-left",
+    variants: {
+      compact: {
+        true: "px-4 py-3 last:px-4 last:py-3 first:px-4 first:py-3",
+      },
+    },
+  },
   headerCounterGeneral: "mr-3 font-medium text-sm text-gray-900",
   stickyHeader: "fixed top-0 flex items-center z-30 overflow-hidden rounded-none border",
   stickyHeaderRow: "border-gray-200 bg-white",
@@ -28,7 +35,14 @@ export default /*tw*/ {
   bodyRowAfter: "!p-0",
   bodyRowAfterCell: "py-1",
   bodyRowDateSeparator: "",
-  bodyCell: "",
+  bodyCell: {
+    base: "p-[1.125rem] py-5 first:p-5 truncate align-top last:p-5",
+    variants: {
+      compact: {
+        true: "px-4 py-3 last:px-4 last:py-3 first:px-4 first:py-3",
+      },
+    },
+  },
   bodyCellSecondary: "mt-1 text-xs text-gray-500",
   bodyCellSecondaryEmpty: "inline-block",
   bodyCellCheckbox: "first:px-4", // try to remove first
@@ -43,8 +57,14 @@ export default /*tw*/ {
   bodyDateSeparator: "",
   bodyEmptyState: "my-8",
   footer: "group/footer border-t border-solid border-gray-200",
-  footerRow: "",
-  footerCell: "",
+  footerRow: {
+    base: "[&_td]:p-[1.125rem] [&_td]:py-5 first:[&_td]:p-5",
+    variants: {
+      compact: {
+        true: "[&_td]:p-4",
+      },
+    },
+  },
   stickyFooter: "relative group/footer-fixed",
   stickyFooterRow: `
     fixed bottom-0 -ml-px border border-b border-gray-200 bg-white

package/ui.data-table/index.stories.js

@@ -2,7 +2,6 @@ import { getArgTypes, getSlotNames } from "../service.storybook";
 import { getRandomId } from "../service.ui";
 
 import UTable from "../ui.data-table";
-import UTableCell from "../ui.data-table-cell";
 import UButton from "../ui.button";
 import ULink from "../ui.button-link";
 import UMoney from "../ui.text-money";
@@ -110,7 +109,7 @@ const EmptyTemplate = (args) => ({
 });
 
 const SlotTemplate = (args) => ({
-  components: { UTable, UButton, UTableCell, ULink, UMoney, UBadge, URow },
+  components: { UTable, UButton, ULink, UMoney, UBadge, URow },
   setup() {
     return { args };
   },
@@ -166,12 +165,12 @@ stickyFooter.args = {
   stickyFooter: true,
   slotTemplate: `
     <template #footer>
-      <UTableCell>
+      <td>
         <p>
           🤘🤘🤘
           Lorem ipsum dolor sit amet.
         </p>
-      </UTableCell>
+      </td>
     </template>
   `,
 };
@@ -201,8 +200,8 @@ slotDefault.args = {
   `,
 };
 
-export const slotTheadActions = SlotTemplate.bind({});
-slotTheadActions.args = {
+export const slotHeaderActions = SlotTemplate.bind({});
+slotHeaderActions.args = {
   numberOfRows: 50,
   stickyHeader: true,
   selectable: true,
@@ -227,8 +226,8 @@ slotTheadActions.args = {
   `,
 };
 
-export const slotbodyRowBefore = SlotTemplate.bind({});
-slotbodyRowBefore.args = {
+export const slotBeforeFirstRow = SlotTemplate.bind({});
+slotBeforeFirstRow.args = {
   slotTemplate: `
     <template #before-first-row>
       <p>
@@ -241,8 +240,8 @@ slotbodyRowBefore.args = {
   `,
 };
 
-export const slotbodyRowAfter = SlotTemplate.bind({});
-slotbodyRowAfter.args = {
+export const slotAfterLastRow = SlotTemplate.bind({});
+slotAfterLastRow.args = {
   slotTemplate: `
     <template #after-last-row>
       <p>
@@ -255,18 +254,18 @@ slotbodyRowAfter.args = {
   `,
 };
 
-export const slotTfoot = SlotTemplate.bind({});
-slotTfoot.args = {
+export const slotFooter = SlotTemplate.bind({});
+slotFooter.args = {
   slotTemplate: `
-    <template #tfoot>
-      <UTableCell>
+    <template #footer>
+      <td>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit,
           sed do eiusmod tempor incididunt ut labore et dolore magna
           aliqua. Ut enim ad minim veniam, quis nostrud exercitation
           ullamco laboris nisi ut aliquip ex ea commodo consequat.
         </p>
-      </UTableCell>
+      </td>
     </template>
   `,
 };

package/ui.data-table/index.vue

@@ -76,15 +76,14 @@
       <table v-bind="tableAttrs">
         <thead v-bind="headerAttrs" :style="tableRowWidthStyle">
           <tr v-if="hasSlotContent($slots['before-header'])" v-bind="headerRowAttrs">
-            <UTableCell
+            <td
               v-if="hasSlotContent($slots['before-header'])"
               :colspan="colsCount"
-              :compact="compact"
               v-bind="headerCellAttrs()"
             >
               <!-- @slot Use it to add something before header row. -->
               <slot name="before-header" :cols-count="colsCount" />
-            </UTableCell>
+            </td>
           </tr>
 
           <tr v-if="hasSlotContent($slots['before-header'])" v-bind="headerRowAttrs"></tr>
@@ -132,18 +131,14 @@
 
         <tbody v-if="tableRows.length" v-bind="bodyAttrs">
           <template v-for="(row, rowIndex) in tableRows" :key="row.id">
-            <tr v-if="rowIndex === firstRow" v-bind="bodyRowBeforeAttrs">
-              <UTableCell
-                v-if="hasSlotContent($slots['before-first-row'])"
-                :colspan="colsCount"
-                :compact="compact"
-                v-bind="bodyRowBeforeCellAttrs"
-              >
+            <tr
+              v-if="rowIndex === firstRow && hasSlotContent($slots['before-first-row'])"
+              v-bind="bodyRowBeforeAttrs"
+            >
+              <td :colspan="colsCount" v-bind="bodyRowBeforeCellAttrs">
                 <!-- @slot Use it to add something before first row. -->
                 <slot name="before-first-row" />
-              </UTableCell>
-
-              <td v-else :colspan="colsCount" v-bind="bodyRowBeforeCellAttrs" />
+              </td>
             </tr>
 
             <tr
@@ -165,11 +160,7 @@
               :data-cy="`${dataCy}-row`"
               @click="onClickRow(row)"
             >
-              <UTableCell
-                v-if="selectable"
-                :compact="compact"
-                v-bind="bodyCellAttrs(config.bodyCellCheckbox)"
-              >
+              <td v-if="selectable" v-bind="bodyCellAttrs(config.bodyCellCheckbox)">
                 <UCheckbox
                   v-model="selectedRows"
                   :data-id="row.id"
@@ -179,12 +170,11 @@
                   v-bind="bodyCheckboxAttrs"
                   @click.stop
                 />
-              </UTableCell>
+              </td>
 
-              <UTableCell
+              <td
                 v-for="(value, key, index) in TableService.getFilteredRow(row, columns)"
                 :key="index"
-                :compact="compact"
                 v-bind="bodyCellAttrs(getCellClasses(key))"
               >
                 <template v-if="hasSlotContent($slots[`cell-${key}`])">
@@ -245,21 +235,17 @@
                     {{ value || HYPHEN_SYMBOL }}
                   </div>
                 </template>
-              </UTableCell>
+              </td>
             </tr>
 
-            <tr v-if="rowIndex === lastRow" v-bind="bodyRowAfterAttrs">
-              <UTableCell
-                v-if="hasSlotContent($slots['after-last-row'])"
-                :compact="compact"
-                :colspan="colsCount"
-                v-bind="bodyRowAfterCellAttrs"
-              >
+            <tr
+              v-if="rowIndex === lastRow && hasSlotContent($slots['after-last-row'])"
+              v-bind="bodyRowAfterAttrs"
+            >
+              <td :colspan="colsCount" v-bind="bodyRowAfterCellAttrs">
                 <!-- @slot Use it to add something after last row. -->
                 <slot name="after-last-row" />
-              </UTableCell>
-
-              <td v-else :colspan="colsCount" v-bind="bodyRowAfterCellAttrs" />
+              </td>
             </tr>
           </template>
         </tbody>
@@ -282,14 +268,14 @@
 
         <tfoot v-if="hasSlotContent($slots['footer'])" v-bind="footerClassesAttrs">
           <tr ref="footerRowRef" v-bind="footerRowAttrs">
-            <UTableCell v-if="selectable" :compact="compact" v-bind="footerCellAttrs" />
+            <td v-if="selectable" />
 
             <!-- @slot Use it to add something in table footer. -->
             <slot name="footer" :cols-count="colsCount" />
           </tr>
 
           <tr ref="stickyFooterRowRef" :style="tableRowWidthStyle" v-bind="stickyFooterRowAttrs">
-            <UTableCell v-if="selectable" :compact="compact" v-bind="footerCellAttrs" />
+            <td v-if="selectable" />
 
             <!-- @slot Use it to add something in table footer. -->
             <slot name="footer" :cols-count="colsCount" />
@@ -319,7 +305,6 @@ import UEmpty from "../ui.text-empty";
 import UDivider from "../ui.container-divider";
 import UCheckbox from "../ui.form-checkbox";
 import ULoaderTop from "../ui.loader-top";
-import UTableCell from "../ui.data-table-cell";
 
 import UIService from "../service.ui";
 
@@ -523,7 +508,6 @@ const {
   bodyCellNestedWrapperAttrs,
   headerCellAttrs,
   bodyCellAttrs,
-  footerCellAttrs,
   stickyHeaderActionsCheckboxAttrs,
   stickyHeaderCheckboxAttrs,
   headerCheckboxAttrs,
@@ -595,7 +579,7 @@ onBeforeUnmount(() => {
 });
 
 function onWindowResize() {
-  tableWidth.value = tableWrapperRef.value.offsetWidth;
+  tableWidth.value = tableWrapperRef.value?.offsetWidth || 0;
 
   setHeaderCellWidth();
   setFooterCellWidth();

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

@@ -21,6 +21,7 @@
 <script setup>
 import { computed } from "vue";
 
+import { cx } from "../../service.ui";
 import { formatDate, dateIsOutOfRange } from "../services/calendar.service";
 import {
   isToday,
@@ -210,33 +211,40 @@ function getDay(date, dayNumber) {
 }
 
 function getDayClasses(day) {
+  const isDayInRange =
+    props.range &&
+    localSelectedDate.value &&
+    props.selectedDateTo &&
+    !dateIsOutOfRange(
+      day,
+      props.selectedDate,
+      props.selectedDateTo,
+      props.locale,
+      props.dateFormat,
+    );
+
   const isNotSelectedDate =
     (!isSelectedDay(day) && !isSelectedToDay(day)) || props.selectedDate === null;
 
   if (isToday(day) && isNotSelectedDate) {
-    return [currentDayAttrs.value.class];
+    return cx([isDayInRange && inRangeDayAttrs.value.class, currentDayAttrs.value.class]);
   }
 
   if (props.range && isSelectedDay(day)) {
-    return [
-      inRangeFirstDayAttrs.value.class,
+    return cx([
       isAnotherMothDay(day, activeMonthDate.value) && anotherMonthDayAttrs.value.class,
-    ];
+      inRangeFirstDayAttrs.value.class,
+    ]);
   }
 
   if (props.range && isSelectedToDay(day)) {
-    return [
-      inRangeLastDayAttrs.value.class,
+    return cx([
       isAnotherMothDay(day, activeMonthDate.value) && anotherMonthDayAttrs.value.class,
-    ];
+      inRangeLastDayAttrs.value.class,
+    ]);
   }
 
-  if (
-    props.range &&
-    localSelectedDate.value &&
-    props.selectedDateTo &&
-    !dateIsOutOfRange(day, props.selectedDate, props.selectedDateTo, props.locale, props.dateFormat)
-  ) {
+  if (isDayInRange) {
     return [inRangeDayAttrs.value.class];
   }
 

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

@@ -64,7 +64,7 @@ Timepicker.args = { value: new Date(2024, 2, 14, 12, 24, 14), timepicker: true }
 
 export const MinMax = DefaultTemplate.bind({});
 MinMax.args = {
-  minDate: "2022-02-22",
+  minDate: new Date(2022, 2, 22),
   maxDate: new Date(2022, 2, 26),
   value: new Date(2022, 2, 24),
 };

package/ui.form-calendar/index.vue

@@ -579,17 +579,23 @@ function onInputDate(newDate) {
     const isFullReset =
       localValue.value.to || !localValue.value.from || date <= localValue.value.from;
 
-    localValue.value = isFullReset
+    const updatedValue = isFullReset
       ? { from: date, to: null }
       : { from: localValue.value.from, to: date };
+
+    localValue.value = updatedValue;
+
+    emit("input", updatedValue);
   } else {
     localValue.value = date;
-  }
 
-  activeDate.value = null;
-  activeMonth.value = null;
+    emit("input", localValue.value);
+  }
 
-  emit("input", localValue.value);
+  if (!props.range) {
+    activeDate.value = null;
+    activeMonth.value = null;
+  }
 
   wrapperRef.value.focus();
 }

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

@@ -102,7 +102,6 @@ export default /*tw*/ {
       },
     },
     day: "font-medium w-full h-10 text-sm mb-0.5",
-    currentDay: "text-white bg-brand-900 hover:bg-brand-900 hover:text-white",
     weekDay: "text-sm size-10",
     month: "font-medium",
     selectedMonth: "bg-zinc-100 text-brand-900 hover:text-white",
@@ -119,6 +118,8 @@ export default /*tw*/ {
     dateFormatWithDot: "Date should be in format 'dd.mm.yyyy'.",
     notCorrectMonthNumber: "Wrong month number.",
     notCorrectDayNumber: "Wrong day in month.",
+    fromDateGraterThanSecond: "The first date should be less than the second.",
+    toDateSmallerThanFirst: "The second date should be greater than the first.",
     weekdays: {
       shorthand: {
         sunday: "Sun",

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

@@ -29,6 +29,7 @@
 
     <div v-if="isVariant.button" v-bind="buttonWrapperAttrs">
       <UButton
+        ref="buttonPrevRef"
         square
         :size="size"
         :disabled="disabled"
@@ -40,6 +41,7 @@
 
       <UButton
         :id="id"
+        ref="buttonRef"
         :size="size"
         :disabled="disabled"
         :label="userFormatDate"
@@ -48,6 +50,7 @@
       />
 
       <UButton
+        ref="buttonNextRef"
         square
         :size="size"
         :disabled="disabled"
@@ -62,11 +65,10 @@
       <div
         v-if="isShownMenu"
         ref="menuRef"
+        v-click-outside="[deactivate, clickOutsideOptions]"
         tabindex="-1"
         v-bind="menuAttrs"
-        @blur="onBlur"
         @keydown.esc="deactivate"
-        @mouseleave="onMouseoutMenu"
       >
         <div v-bind="periodsRowAttrs">
           <div
@@ -146,28 +148,26 @@
           <UInput
             ref="rangeInputStartRef"
             v-model="rangeStart"
-            :error="inputRangeStartError"
+            :error="inputRangeFromError"
             size="sm"
             v-bind="rangeInputAttrs"
             :name="rangeInputName"
             @input="onInputRangeInput($event, INPUT_RANGE_TYPE.start)"
-            @blur="onBlurRangeInput"
           />
 
           <UInput
             ref="rangeInputEndRef"
             v-model="rangeEnd"
-            :error="inputRangeEndError"
+            :error="inputRangeToError"
             size="sm"
             v-bind="rangeInputAttrs"
             :name="rangeInputName"
             @input="onInputRangeInput($event, INPUT_RANGE_TYPE.end)"
-            @blur="onBlurRangeInput"
           />
         </div>
 
         <div v-bind="inputRangeErrorAttrs">
-          {{ inputRangeEndError || inputRangeStartError }}
+          {{ inputRangeToError || inputRangeFromError }}
         </div>
 
         <UCalendar
@@ -179,6 +179,7 @@
           :date-format="dateFormat"
           range
           @mouseenter="onMouseoverCalendar"
+          @input="onInputCalendar"
         />
       </div>
     </Transition>
@@ -195,6 +196,8 @@ import UButton from "../ui.button";
 import UCalendar from "../ui.form-calendar";
 import { LOCALE_TYPE } from "../ui.form-calendar/constants";
 
+import vClickOutside from "../directive.clickOutside";
+
 import UIService, { getRandomId } from "../service.ui";
 
 import {
@@ -227,7 +230,11 @@ import {
   getMonthsDateList,
 } from "./services/dateRange.service";
 
-import { wrongDateFormat, wrongMonthNumber, wrongDayNumber } from "./services/validation.service";
+import {
+  isWrongDateFormat,
+  isWrongMonthNumber,
+  isWrongDayNumber,
+} from "./services/validation.service";
 import useAttrs from "./composables/attrs.composable";
 import { useLocale } from "../composable.locale";
 import useBreakpoint from "../composable.breakpoint";
@@ -395,6 +402,8 @@ const props = defineProps({
   },
 });
 
+const inputRangeFormat = "d.m.Y";
+
 const emit = defineEmits(["update:modelValue"]);
 
 const isShownMenu = ref(false);
@@ -402,6 +411,9 @@ const wrapperRef = ref(null);
 const menuRef = ref(null);
 const rangeInputStartRef = ref(null);
 const rangeInputEndRef = ref(null);
+const buttonRef = ref(null);
+const buttonPrevRef = ref(null);
+const buttonNextRef = ref(null);
 
 const { isTop, isRight, adjustPositionY, adjustPositionX } = useAdjustElementPosition(
   wrapperRef,
@@ -444,6 +456,10 @@ const i18nGlobal = tm(UDatePickerRange);
 
 const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
+const clickOutsideOptions = computed(() => ({
+  ignore: [buttonRef.value.buttonRef, buttonPrevRef.value.buttonRef, buttonNextRef.value.buttonRef],
+}));
+
 const locale = computed(() => {
   const { months, weekdays } = currentLocale.value;
 
@@ -470,9 +486,9 @@ const activeDate = ref(
 const period = ref(PERIOD.ownRange);
 const rangeStart = ref("");
 const rangeEnd = ref("");
-const inputRangeStartError = ref("");
-const inputRangeEndError = ref("");
-const isHoverEvent = ref(false);
+const inputRangeFromError = ref("");
+const inputRangeToError = ref("");
+const calendarInnerValue = ref({ from: "", to: "" });
 const periodDateList = ref(null);
 
 const { isMobileBreakpoint } = useBreakpoint();
@@ -611,9 +627,19 @@ const userFormatDate = computed(() => {
       startYear = "";
     }
 
-    const fromTitle = isSameMonth(from, to)
-      ? from.getDate()
-      : `${from.getDate()} ${startMonthName} ${startYear}`;
+    const isDatesToSameMonth = isSameMonth(from, to);
+    const isDatesToSameYear = from.getFullYear() === to.getFullYear();
+
+    let fromTitle = `${from.getDate()} ${startMonthName} ${startYear}`;
+
+    if (isDatesToSameMonth && isDatesToSameYear) {
+      fromTitle = from.getDate();
+    }
+
+    if (!isDatesToSameMonth && isDatesToSameYear) {
+      fromTitle = `${from.getDate()} ${startMonthName}`;
+    }
+
     const toTitle = to ? `${to.getDate()} ${endMonthName} ${endYear}` : "";
 
     title = `${fromTitle} – ${toTitle}`;
@@ -680,13 +706,15 @@ watch(
     const parsedDateTo = parseDate(props.modelValue.to, props.dateFormat, locale.value);
 
     rangeStart.value = props.modelValue.from
-      ? formatDate(parsedDateFrom, "d.m.Y", locale.value)
+      ? formatDate(parsedDateFrom, inputRangeFormat, locale.value)
       : "";
 
-    rangeEnd.value = props.modelValue.to ? formatDate(parsedDateTo, "d.m.Y", locale.value) : "";
+    rangeEnd.value = props.modelValue.to
+      ? formatDate(parsedDateTo, inputRangeFormat, locale.value)
+      : "";
 
-    inputRangeStartError.value = "";
-    inputRangeEndError.value = "";
+    inputRangeFromError.value = "";
+    inputRangeToError.value = "";
   },
   { deep: true, immediate: true },
 );
@@ -820,72 +848,75 @@ function activate() {
 
 function deactivate() {
   isShownMenu.value = false;
-
-  isHoverEvent.value = false;
 }
 
-function onBlur(event) {
-  const { relatedTarget } = event;
+function isGraterThanTo(value) {
+  if (!value) return false;
 
-  if (!menuRef.value?.contains(relatedTarget)) {
-    deactivate();
-  }
-}
+  const parsedValue = parseDate(value, inputRangeFormat, locale.value);
+  const parsedTo = parseDate(localValue.value.to, props.dateFormat, locale.value);
 
-function onBlurRangeInput(event) {
-  const { relatedTarget } = event;
-  const isRangeInputFocus = relatedTarget?.name === rangeInputName.value;
+  return parsedValue > parsedTo;
+}
 
-  if (!isRangeInputFocus) {
-    menuRef.value.focus();
-  }
+function isSmallerThanFrom(value) {
+  if (!value) return false;
 
-  if (!menuRef.value?.contains(relatedTarget) && !isHoverEvent.value) {
-    deactivate();
-  }
+  const parsedValue = parseDate(value, inputRangeFormat, locale.value);
+  const parsedFrom = parseDate(localValue.value.from, props.dateFormat, locale.value);
 
-  isHoverEvent.value = false;
+  return parsedValue < parsedFrom;
 }
 
 function onInputRangeInput(value, type) {
-  const isInvalidDateFormat = !wrongDateFormat(value);
-  const isInvalidMonthNumber = !wrongMonthNumber(value);
-  const isInvalidDayNumber = !wrongDayNumber(value);
+  const isInvalidDateFormat = isWrongDateFormat(value);
 
   let error = "";
 
   if (isInvalidDateFormat && value) {
     error = locale.value.dateFormatWithDot;
-  } else if (isInvalidMonthNumber && value) {
+  } else if (isWrongMonthNumber(value) && value) {
     error = locale.value.notCorrectMonthNumber;
-  } else if (isInvalidDayNumber && value) {
+  } else if (isWrongDayNumber(value) && value) {
     error = locale.value.notCorrectDayNumber;
+  } else if (isGraterThanTo(value) && type === INPUT_RANGE_TYPE.start) {
+    error = locale.value.fromDateGraterThanSecond;
+  } else if (isSmallerThanFrom(value) && type === INPUT_RANGE_TYPE.end) {
+    error = locale.value.toDateSmallerThanFirst;
   }
 
   if (type === INPUT_RANGE_TYPE.start) {
-    inputRangeStartError.value = error;
+    inputRangeFromError.value = error;
   }
 
   if (type === INPUT_RANGE_TYPE.end) {
-    inputRangeEndError.value = error;
+    inputRangeToError.value = error;
   }
 
-  const parsedValue = parseDate(value || new Date(), props.dateFormat, locale.value);
-  const isOutOfRange = dateIsOutOfRange(
-    parsedValue,
-    props.minDate,
-    props.maxDate,
-    locale.value,
-    props.dateFormat,
-  );
-  const isToLessThanFrom = parsedValue <= localValue.value.from;
+  if (!isInvalidDateFormat) {
+    const parsedValue = parseDate(value || new Date(), inputRangeFormat, locale.value);
 
-  if (type === INPUT_RANGE_TYPE.start && !error && !isOutOfRange) {
-    localValue.value.from = value ? parsedValue : "";
-  }
+    const isOutOfRange = dateIsOutOfRange(
+      parsedValue,
+      props.minDate,
+      props.maxDate,
+      locale.value,
+      props.dateFormat,
+    );
+
+    if (type === INPUT_RANGE_TYPE.start && !error && !isOutOfRange) {
+      localValue.value = {
+        from: value ? parsedValue : "",
+        to: localValue.value.to,
+      };
+    }
 
-  if (type === INPUT_RANGE_TYPE.end && !error && !isOutOfRange && !isToLessThanFrom) {
-    localValue.value.to = value ? parsedValue : "";
+    if (type === INPUT_RANGE_TYPE.end && !error && !isOutOfRange) {
+      localValue.value = {
+        from: localValue.value.from,
+        to: value ? parsedValue : "",
+      };
+    }
   }
 }
 
@@ -1009,26 +1040,25 @@ function onMouseoverCalendar() {
 
   if (isRangeInputFocus || !rangeInputStartRef.value || !rangeInputEndRef.value) return;
 
-  if ((rangeStart.value && rangeEnd.value && !inputRangeEndError.value) || !rangeStart.value) {
+  const hasValues =
+    calendarInnerValue.value.from && calendarInnerValue.value.to && !inputRangeToError.value;
+  const hasOnlyFromValue =
+    calendarInnerValue.value.from && !calendarInnerValue.value.to && !inputRangeFromError.value;
+
+  if (hasValues || !rangeStart.value) {
     rangeInputStartRef.value.input.focus();
 
     return;
   }
 
-  if (rangeStart.value && !rangeEnd.value && !inputRangeStartError.value) {
+  if (hasOnlyFromValue) {
     rangeInputEndRef.value.input.focus();
 
     return;
   }
 }
 
-function onMouseoutMenu() {
-  const isRangeInputFocus = document.activeElement.name === rangeInputName.value;
-
-  if (isRangeInputFocus) {
-    isHoverEvent.value = true;
-
-    document.activeElement.blur();
-  }
+function onInputCalendar(value) {
+  calendarInnerValue.value = value;
 }
 </script>

package/ui.form-date-picker-range/services/validation.service.js

@@ -1,22 +1,22 @@
 import { getDaysInMonth } from "../../ui.form-calendar/services/date.service";
 
-const DATE_WITH_DOT_FORMAT_REG_EXP = /^\d{2}([./-])\d{2}\1\d{4}$/;
+const datePattern = /^\d{1,2}\.\d{1,2}\.\d{4}$/;
 
-export function wrongDateFormat(value) {
-  return !!value.match(DATE_WITH_DOT_FORMAT_REG_EXP);
+export function isWrongDateFormat(value) {
+  return !datePattern.test(value);
 }
 
-export function wrongMonthNumber(value) {
+export function isWrongMonthNumber(value) {
   const splitDate = value.split(".");
   const month = splitDate[1];
 
-  return Number(month) >= 1 && Number(month) <= 12;
+  return !(Number(month) >= 1 && Number(month) <= 12);
 }
 
-export function wrongDayNumber(value) {
+export function isWrongDayNumber(value) {
   const [day, month, year] = value.split(".");
 
   const daysInMonth = getDaysInMonth(new Date(year, month - 1));
 
-  return Number(day) >= 1 && Number(day) <= Number(daysInMonth);
+  return !(Number(day) >= 1 && Number(day) <= Number(daysInMonth));
 }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.169",
+  "version": "0.0.171",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -6730,48 +6730,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "UTableCell",
-          "description": "",
-          "attributes": [
-            {
-              "name": "compact",
-              "description": "Makes the cell more narrow.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "config",
-              "description": "Sets component ui config object.",
-              "value": {
-                "kind": "expression",
-                "type": "object"
-              },
-              "default": "{}"
-            },
-            {
-              "name": "dataCy",
-              "description": "Sets data-cy attribute for automated testing.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"\""
-            }
-          ],
-          "slots": [
-            {
-              "name": "default"
-            }
-          ],
-          "source": {
-            "module": "./src/ui.data-table-cell/index.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "UTabs",
           "description": "",

package/ui.data-table-cell/composables/attrs.composable.js

@@ -1,24 +0,0 @@
-import useUI from "../../composable.ui";
-import { cva } from "../../service.ui";
-
-import defaultConfig from "../configs/default.config";
-import { computed } from "vue";
-
-export function useAttrs(props) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { tableCell } = config.value;
-
-  const cvaTableCell = cva({
-    base: tableCell.base,
-    variants: tableCell.variants,
-    compoundVariants: tableCell.compoundVariants,
-  });
-
-  const tableCellClasses = computed(() => cvaTableCell({ compact: props.compact }));
-
-  const tableCellAttrs = getAttrs("tableCell", { classes: tableCellClasses });
-
-  return {
-    tableCellAttrs,
-  };
-}

package/ui.data-table-cell/configs/default.config.js

@@ -1,19 +0,0 @@
-export default /*tw*/ {
-  tableCell: {
-    base: `
-      p-[1.125rem] py-5 first:p-5 group-[]/body:truncate group-[]/body:align-top
-      group-[]/body:last:p-5 !overflow-visible
-    `,
-    variants: {
-      compact: {
-        true: `
-          group-[]/body:px-4 group-[]/body:py-3 group-[]/body:last:px-4 group-[]/body:last:py-3
-          group-[]/body:first:px-4 group-[]/body:first:py-3 group-[]/footer:p-4:
-        `,
-      },
-    },
-  },
-  defaultVariants: {
-    compact: false,
-  },
-};

package/ui.data-table-cell/constants/index.js

@@ -1,5 +0,0 @@
-/*
-  This const is needed to prevent the issue in script setup:
- `defineProps` is referencing locally declared variables. (vue/valid-define-props)
- */
-export const UTableCell = "UTableCell";

package/ui.data-table-cell/index.vue

@@ -1,44 +0,0 @@
-<template>
-  <td :data-cy="dataCy" v-bind="tableCellAttrs">
-    <slot />
-  </td>
-</template>
-
-<script setup>
-import UIService from "../service.ui";
-
-import { UTableCell } from "./constants";
-import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
-
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UTableCell", inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Makes the cell more narrow.
-   */
-  compact: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UTableCell).default.compact,
-  },
-
-  /**
-   * Sets component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Sets data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const { tableCellAttrs } = useAttrs(props);
-</script>