its_ui_vite 1.0.17 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "its_ui_vite",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "main": "./src/libIndex.js",
   "module": "./src/libIndex.js",
   "files": [

package/src/components/CDatepicker.vue

@@ -36,10 +36,10 @@
     
     <div
       ref="time"
-      :class="['c-datepicker__hours_wrap', { open: isOpenTime }]"
+      :class="['c-datepicker__time_wrap', { open: isOpenTime }]"
     >
       <div
-        class="c-datepicker__hours_inps"
+        class="c-datepicker__time_inps"
         @click="isOpenTime = true"
       >
         <input
@@ -57,26 +57,27 @@
           v-model="modelMinute"
           @input="setTime('minute', ($event.target as HTMLInputElement).value)"
           @focus="isOpenTime = true"
-          @blur="isOpenTime = false"
+          @blur="setIsOpenTime(false)"
         />
       </div>
       <Teleport :to="teleportTo">
         <div
-          class="c-datepicker__hours_list-wrap"
+          class="c-datepicker__time_list-wrap"
           ref="timeContent"
           :data-c-datepicker-id="datePickerId"
           :style="timeStyle"
         >
           <div
             :style="`--transition: ${transition}ms; --picker-time-indent-y: ${pickerContentIndentY}px`"
-            :class="['c-datepicker__hours_list', pickerContentPosition, {open: isOpenTime}]"
+            :class="['c-datepicker__time_list', pickerContentPosition, {open: isOpenTime}]"
           >
-            <div class="c-datepicker__hours_list-content">
-              <CScroll class="c-datepicker__hours_list-scroll">
+            <div class="c-datepicker__time_list-content">
+              <CScroll class="c-datepicker__time_list-scroll">
                 <button
                   v-for="item in hoursOptions"
                   :key="item.value"
-                  :class="['c-datepicker__hours_btn', {
+                  :data-time-value="item.text"
+                  :class="['c-datepicker__time_btn', {
                     disable: isDisableTime('hour', item.value),
                     active: item.text === modelHour
                   }]"
@@ -86,12 +87,13 @@
                   {{ item.text }}
                 </button>
               </CScroll>
-              <div class="c-datepicker__hours_list-line"></div>
-              <CScroll class="c-datepicker__hours_list-scroll">
+              <div class="c-datepicker__time_list-line"></div>
+              <CScroll class="c-datepicker__time_list-scroll">
                 <button
                   v-for="item in minuteOptions"
                   :key="item.value"
-                  :class="['c-datepicker__hours_btn', {
+                  :data-time-value="item.text"
+                  :class="['c-datepicker__time_btn', {
                     disable: isDisableTime('minute', item.value),
                     active: item.text === modelMinute
                   }]"
@@ -494,7 +496,7 @@ function isCurrent(target: HTMLElement | null) {
 
 function handleClickTime(evt: MouseEvent) {
   const target = (evt.target as HTMLElement);
-  const classesStr = '.c-datepicker__hours_wrap, .c-datepicker__hours_list-wrap';
+  const classesStr = '.c-datepicker__time_wrap, .c-datepicker__time_list-wrap';
   const isTimeContent = target.closest(classesStr);
 
   const isTarget = isTimeContent === time.value;
@@ -502,7 +504,8 @@ function handleClickTime(evt: MouseEvent) {
 
   if (isTarget || isContent) return;
 
-  isOpenTime.value = false;
+  // isOpenTime.value = false;
+  setIsOpenTime(false);
 }
 
 function handleTime(positionInfo?: any) {
@@ -513,7 +516,8 @@ function handleTime(positionInfo?: any) {
 
   if (positionInfo.isVisible) return;
 
-  isOpenTime.value = false;
+  // isOpenTime.value = false;
+  setIsOpenTime(false);
 } 
 
 function setTeleportTo() {
@@ -574,7 +578,7 @@ function isDisableDay(ISO: string): boolean {
   const isMoreMax = maxDate.ts < currentDate.ts;
   const isLessMin = minDate.ts > currentDate.ts;
 
-  const isMaxDay = maxDate.day === currentDate.day  && maxDate.month === currentDate.month && maxDate.year === currentDate.year;
+  const isMaxDay = maxDate.day === currentDate.day && maxDate.month === currentDate.month && maxDate.year === currentDate.year;
   const isMinDay = minDate.day === currentDate.day && minDate.month === currentDate.month && minDate.year === currentDate.year;
   
   if (isMaxDay || isMinDay) return false;
@@ -582,15 +586,17 @@ function isDisableDay(ISO: string): boolean {
 }
 
 function setTime(name: 'hour' | 'minute', value: string) {
-  const numValue = value.replace(/[^0-9]/g, '');
+  const numValue = getTimeStr(value.replace(/[^0-9]/g, ''));
 
   const format = name === 'hour' ? 'HH' : 'mm';
 
   const maxDate = DateTime.fromISO(props?.max);
   const minDate = DateTime.fromISO(props?.min);
 
-  const isMismatchMaxDay = maxDate.isValid && maxDate.day === activeDate.value.day;
-  const isMismatchMinDay = minDate.isValid && minDate.day === activeDate.value.day;
+  // max Day
+  const isMismatchMaxDay = maxDate.isValid && (maxDate.day === activeDate.value.day && maxDate.month === activeDate.value.month && maxDate.year === activeDate.value.year);
+  // min Day
+  const isMismatchMinDay = minDate.isValid && (minDate.day === activeDate.value.day && minDate.month === activeDate.value.month && minDate.year === activeDate.value.year);
 
   const max = isMismatchMaxDay ? +maxDate?.toFormat(format) : (name === 'hour' ? 23 : 59);
   const min = isMismatchMinDay ? +minDate?.toFormat(format) : 0;
@@ -608,7 +614,7 @@ function setTime(name: 'hour' | 'minute', value: string) {
   dispatchEmit()
 }
 
-function getTimeStr(value: number) {
+function getTimeStr(value: number | string) {
   return `0${value}`.match(/.{2}$/)?.[0] || '00'
 }
 
@@ -616,8 +622,11 @@ function isDisableTime(name: 'hour' | 'minute', value: number) {
   const maxDate = DateTime.fromISO(props?.max);
   const minDate = DateTime.fromISO(props?.min);
 
-  const isMismatchMaxDay = maxDate.day !== activeDate.value.day;
-  const isMismatchMinDay = minDate.day !== activeDate.value.day;
+
+  // max Day
+  const isMismatchMaxDay = maxDate.day !== activeDate.value.day || maxDate.month !== activeDate.value.month || maxDate.year !== activeDate.value.year;
+  // min Day
+  const isMismatchMinDay = minDate.day !== activeDate.value.day || minDate.month !== activeDate.value.month || minDate.year !== activeDate.value.year;
   const isDisabled = maxDate.ts < activeDate.value.ts && minDate.ts > activeDate.value.ts;
 
   if (isMismatchMinDay && isMismatchMaxDay) return isDisabled;
@@ -630,6 +639,17 @@ function isDisableTime(name: 'hour' | 'minute', value: number) {
   return (!isMismatchMaxDay && max < value) || (!isMismatchMinDay && min > value);
 }
 
+function setIsOpenTime(value: boolean) {
+  if (value) {
+    isOpenTime.value = value;
+  } else {
+    // здесь setTimeout чтобы из-за blur на input name="minute" попап не закрывался раньше вреиени и клик роходил по попапу
+    setTimeout(() => {
+      isOpenTime.value = value;
+    }, 100);
+  }
+};
+
 function setIsOpen(value: boolean) {
   isOpenPicker.value = value;
   setOldDate(value);
@@ -776,7 +796,7 @@ $timeWidth: 54px;
     }
   }
 
-  &__hours {
+  &__time {
 
     &_inps {
       display: flex;
@@ -833,17 +853,18 @@ $timeWidth: 54px;
   }
 }
 
-.c-datepicker__hours_list-wrap {
+.c-datepicker__time_list-wrap {
   --max-height: 112px;
   --scroll-height: 100px;
 
   position: fixed;
   z-index: 999;
   transition: var(--transition);
+  // transform: translate(0, 50px);
   pointer-events: none;
 
   .c-datepicker {
-    &__hours {
+    &__time {
       &_list-content {
         box-sizing: border-box;
 
@@ -870,7 +891,7 @@ $timeWidth: 54px;
         background: var(--black-dark);
         box-shadow: var(--shadow);
 
-        transition: var(--transition);
+        transition: all var(--transition) ease 0s;
 
         opacity: 0;
         pointer-events: none;

package/src/pages/index.vue

@@ -677,7 +677,7 @@
               <CDatepicker
                 date="2025-10-10T00:00:00.000+03:00"
                 max="2025-10-10T04:04:00.000+03:00"
-                min="2025-10-07T05:05:00.000+03:00"
+                min="2025-01-07T01:01:00.000+03:00"
                 @change_cdatepicker="(e) => console.log(e)"
               />
             </div>