@dataloop-ai/components 0.20.237 → 0.20.239

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.237",
+  "version": "0.20.239",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/compound/DlDateTime/DlDatePicker/DlDatePicker.vue

@@ -10,6 +10,7 @@
                     :available-range="availableRange"
                     :disabled="disabled"
                     :with-left-chevron="true"
+                    :is-first-click="isFirstClick"
                     @prev="handleDatePrev"
                     @update:model-value="updateDateInterval"
                     @mousedown="handleMousedown"
@@ -26,6 +27,7 @@
                     :disabled="disabled"
                     :with-left-chevron="singleCalendar"
                     :with-right-chevron="true"
+                    :is-first-click="isFirstClick"
                     @prev="handleDatePrev"
                     @next="handleDateNext"
                     @update:model-value="updateDateInterval"
@@ -113,6 +115,10 @@ export default defineComponent({
             type: Object as PropType<Partial<CalendarDate> | null>,
             default: null
         },
+        isFirstClick: {
+            type: Boolean,
+            default: true
+        },
         normalizeCalendars: Boolean,
         disabled: Boolean
     },
@@ -270,7 +276,10 @@ export default defineComponent({
 
             window.addEventListener('mouseup', this.handleMouseup)
 
-            this.dateInterval = { from: date, to: date }
+            this.dateInterval =
+                !this.dateInterval || this.type !== 'day' || this.isFirstClick
+                    ? { from: date, to: date }
+                    : this.dateInterval
 
             if (!this.singleSelection) {
                 this.isSelectionMode = true

package/src/components/compound/DlDateTime/DlDatePicker/components/DlCalendar.vue

@@ -88,6 +88,10 @@ export default defineComponent({
             type: Object as PropType<DateInterval | null>,
             default: null
         },
+        isFirstClick: {
+            type: Boolean,
+            default: true
+        },
         withLeftChevron: Boolean,
         withRightChevron: Boolean,
         disabled: Boolean
@@ -117,12 +121,31 @@ export default defineComponent({
         }
     },
     methods: {
+        getRange(
+            a: Date | Partial<CalendarDate> | Partial<CustomDate>,
+            b: Date | Partial<CalendarDate> | Partial<CustomDate>
+        ): { from: Date; to: Date } {
+            const dateA =
+                a instanceof Date
+                    ? new CalendarDate(a)
+                    : new CalendarDate((a as CustomDate).toDate())
+            const dateB =
+                b instanceof Date
+                    ? new CalendarDate(b)
+                    : new CalendarDate((b as CustomDate).toDate())
+            return dateA.isBefore(dateB, 'day')
+                ? { from: dateA.toDate(), to: dateB.toDate() }
+                : { from: dateB.toDate(), to: dateA.toDate() }
+        },
         handleClick(value: Partial<CustomDate>) {
             if (!isInRange(this.availableRange, value as CustomDate)) return
-            const newDate = {
-                from: value.toDate(),
-                to: value.toDate()
-            }
+            const newDate =
+                this.modelValue && !this.isFirstClick
+                    ? this.getRange(this.modelValue?.from, value)
+                    : {
+                          from: value.toDate(),
+                          to: value.toDate()
+                      }
 
             this.$emit('update:model-value', newDate)
             this.$emit('change', newDate)
@@ -189,10 +212,10 @@ export default defineComponent({
             ) {
                 style.cursor = 'not-allowed'
                 if (isToday && this.disabled) {
-                    style.color = 'var(--dl-color-secondary)'
+                    style.color = 'var(--dell-blue-500)'
                     style.opacity = disabledOpacity
                 } else if (isToday) {
-                    style.color = 'var(--dl-color-secondary)'
+                    style.color = 'var(--dell-blue-500)'
                 } else {
                     style.color = 'var(--dl-color-disabled)'
                 }
@@ -238,9 +261,13 @@ export default defineComponent({
                     // All other dates (including those outside range) should use dell-gray-800
                     style.color = 'var(--dell-gray-800)'
                 }
+                if (isToday) {
+                    if (!style.backgroundColor?.includes('blue'))
+                        style.color = 'var(--dell-blue-500)'
+                }
             } else {
                 if (isToday) {
-                    style.color = 'var(--dl-color-secondary)'
+                    style.color = 'var(--dell-blue-500)'
 
                     if (this.disabled) {
                         style.opacity = disabledOpacity

package/src/components/compound/DlDateTime/DlDateTimeRange/DateTimeRangeContent.vue

@@ -26,6 +26,7 @@
                 :normalize-calendars="normalizeCalendars"
                 :active-date-from="activeDateFrom"
                 :active-date-to="activeDateTo"
+                :is-first-click="isFirstClick"
                 @update:model-value="updateDateIntervalWithAutoClose"
                 @update:from-to-date="updateFromToDate"
             />
@@ -122,6 +123,10 @@ export default defineComponent({
         hideClearButton: {
             type: Boolean,
             default: false
+        },
+        isFirstClick: {
+            type: Boolean,
+            default: true
         }
     },
     emits: [

package/src/components/compound/DlDateTime/DlDateTimeRange/DlDateTimeRange.vue

@@ -13,9 +13,11 @@
                     self="top middle"
                     :offset="[0, 5]"
                     :disabled="disabled"
+                    menu-class="dl-date-time-range--menu"
                 >
                     <date-time-range-content
                         v-bind="dateTimeRangeContentProps"
+                        :is-first-click="isFirstClick"
                         @day-type-option-click="handleDayTypeOptionClick"
                         @month-type-option-click="handleMonthTypeOptionClick"
                         @update-date-interval="updateDateInterval"
@@ -31,6 +33,7 @@
         <template v-else>
             <date-time-range-content
                 v-bind="dateTimeRangeContentProps"
+                :is-first-click="isFirstClick"
                 @day-type-option-click="handleDayTypeOptionClick"
                 @month-type-option-click="handleMonthTypeOptionClick"
                 @update-date-interval="updateDateInterval"
@@ -58,6 +61,7 @@ import DateInput from './DateInput.vue'
 import DateTimeRangeContent from './DateTimeRangeContent.vue'
 import { DlMenu } from '../../../essential'
 import { defineComponent, PropType } from 'vue-demi'
+import { debounce } from 'lodash'
 import { isInRange } from '../DlDatePicker/utils'
 import { v4 } from 'uuid'
 
@@ -131,6 +135,10 @@ export default defineComponent({
         enabledWholePeriod: {
             type: Boolean,
             default: false
+        },
+        shouldSelectByClick: {
+            type: Boolean,
+            default: true
         }
     },
     emits: ['update:model-value', 'set-type', 'change'],
@@ -143,6 +151,8 @@ export default defineComponent({
         currentSidebarOption: DAY_SIDEBAR_OPTION | MONTH_SIDEBAR_OPTION
         activeDateTo: CalendarDate | null
         activeDateFrom: CalendarDate | null
+        isFirstClick: boolean
+        debouncedUpdateFromToDate: (() => void) & { cancel: () => void }
     } {
         let type: 'day' | 'month' = this.type
         if (this.disabledType === this.type) {
@@ -156,7 +166,11 @@ export default defineComponent({
             isInputDisabled: false,
             currentSidebarOption: DAY_SIDEBAR_OPTION.custom,
             activeDateTo: null,
-            activeDateFrom: null
+            activeDateFrom: null,
+            isFirstClick: true,
+            debouncedUpdateFromToDate: (() => {}) as (() => void) & {
+                cancel: () => void
+            }
         }
     },
     computed: {
@@ -508,6 +522,16 @@ export default defineComponent({
             this.dateInterval = value
         }
     },
+    created() {
+        this.debouncedUpdateFromToDate = debounce(() => {
+            if (this.shouldSelectByClick) {
+                this.isFirstClick = !this.isFirstClick
+            }
+        }, 100)
+    },
+    beforeUnmount() {
+        this.debouncedUpdateFromToDate?.cancel?.()
+    },
     methods: {
         handleClearAction() {
             this.updateFromToDate()
@@ -559,6 +583,7 @@ export default defineComponent({
         updateFromToDate(value?: { from: CalendarDate; to: CalendarDate }) {
             this.activeDateFrom = value?.from || null
             this.activeDateTo = value?.to || null
+            this.debouncedUpdateFromToDate()
         },
         updateDateIntervalWithAutoClose(
             value: DateInterval,
@@ -621,3 +646,9 @@ export default defineComponent({
     justify-content: center;
 }
 </style>
+<style lang="scss" global>
+div.dl-menu.dl-date-time-range--menu {
+    border: 1px solid var(--dell-gray-200);
+    box-shadow: 0 8px 8px 0 var(--dell-shadow, rgba(0, 0, 0, 0.14));
+}
+</style>

package/src/components/compound/DlDateTime/DlTimePicker/components/DlTimeCounter.vue

@@ -71,7 +71,10 @@ export default defineComponent({
         cursor: pointer;
         color: var(--dl-color-darker);
     }
-
+    &--item:not(&--item-active):hover {
+        background-color: var(--dell-blue-100);
+        border-radius: 11px;
+    }
     &--item-active {
         font-size: 12px;
         color: var(--dl-color-text-buttons);

package/src/components/compound/DlDateTime/DlTimePicker/components/DlTimePickerInput.vue

@@ -4,10 +4,7 @@
             class="dl-time-picker-input--clock_img"
             :class="{ 'dl-time-picker-input--clock_img-disabled': disabled }"
         >
-            <dl-icon
-                icon="icon-dl-time"
-                size="16px"
-            />
+            <dl-icon icon="icon-dl-time" size="16px" />
         </div>
         <div
             class="dl-time-picker-input--text"
@@ -61,9 +58,7 @@
                         @click="handleMinuteDownChevronClick"
                     />
                 </div>
-                <div class="dl-time-picker-input--dots">
-                    :
-                </div>
+                <div class="dl-time-picker-input--dots">:</div>
             </div>
         </dl-menu>
     </div>
@@ -310,5 +305,8 @@ export default defineComponent({
         top: 46%;
         left: 49%;
     }
+    &:hover {
+        border-color: var(--dell-gray-800);
+    }
 }
 </style>

package/src/demos/DlDateTimeRangeDemo.vue

@@ -109,6 +109,7 @@
                     :should-clear-select-first-option="
                         shouldClearSelectFirstOption
                     "
+                    should-select-by-click
                     @set-type="handleSetType"
                     @change="handleModelValueUpdate"
                 />