@dataloop-ai/components 0.20.236 → 0.20.238

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.236",
+  "version": "0.20.238",
   "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)

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

@@ -16,6 +16,7 @@
                 >
                     <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 +32,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 +60,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 +134,10 @@ export default defineComponent({
         enabledWholePeriod: {
             type: Boolean,
             default: false
+        },
+        shouldSelectByClick: {
+            type: Boolean,
+            default: true
         }
     },
     emits: ['update:model-value', 'set-type', 'change'],
@@ -143,6 +150,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 +165,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 +521,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 +582,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,

package/src/components/compound/DlSelect/DlSelect.vue

@@ -145,7 +145,7 @@
                 </div>
             </div>
             <dl-menu
-                v-if="!noOptions || !hideEmptyMenu"
+                v-if="!noOptions || !hideEmptyMenu || showAfterOptionsWhenEmpty"
                 ref="menu"
                 v-model="isExpanded"
                 fit-container
@@ -327,7 +327,7 @@
                     </div>
                 </dl-list>
                 <dl-list-item
-                    v-if="hasAfterOptions && !noOptions"
+                    v-if="hasAfterOptions && (!noOptions || showAfterOptionsWhenEmpty)"
                     :padding="afterOptionsPadding"
                 >
                     <dl-item-section>
@@ -531,6 +531,10 @@ export default defineComponent({
             type: Boolean,
             default: false
         },
+        showAfterOptionsWhenEmpty: {
+            type: Boolean,
+            default: false
+        },
         removeTabIndex: {
             type: Boolean,
             default: false

package/src/demos/DlDateTimeRangeDemo.vue

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