@dataloop-ai/components 0.18.19 → 0.18.20

package/package.json

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

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

@@ -53,6 +53,17 @@
                             :model-value="dateInterval"
                             @update:model-value="updateDateInterval"
                         />
+
+                        <dl-button
+                            size="s"
+                            outlined
+                            class="dl-date-time-range--button"
+                            @click="handleClearAction"
+                        >
+                            <span style="text-transform: capitalize">
+                                Clear
+                            </span>
+                        </dl-button>
                     </div>
                 </div>
             </dl-menu>
@@ -74,6 +85,7 @@ import DlDatePicker from '../DlDatePicker/DlDatePicker.vue'
 import { CalendarDate } from '../DlDatePicker/models/CalendarDate'
 import DateInput from './DateInput.vue'
 import { DlMenu } from '../../../essential'
+import { DlButton } from '../../../basic'
 import { defineComponent, PropType } from 'vue-demi'
 import { isInRange } from '../DlDatePicker/utils'
 import { v4 } from 'uuid'
@@ -84,7 +96,8 @@ export default defineComponent({
         DlDatePicker,
         DlTimePicker,
         DateInput,
-        DlMenu
+        DlMenu,
+        DlButton
     },
     model: {
         prop: 'modelValue',
@@ -407,6 +420,11 @@ export default defineComponent({
         }
     },
     methods: {
+        handleClearAction() {
+            this.currentSidebarOption = DAY_SIDEBAR_OPTION.custom
+            this.isInputDisabled = false
+            this.updateDateInterval(null)
+        },
         handleTypeChange(value: 'day' | 'month') {
             this.isInputDisabled = false
             this.currentSidebarOption =
@@ -418,15 +436,19 @@ export default defineComponent({
             this.$emit('set-type', value)
         },
         updateDateInterval(value: DateInterval | null) {
-            this.dateInterval = {
-                from: value.from,
-                to: new Date(
-                    value.from.getFullYear(),
-                    value.from.getMonth(),
-                    value.from.getDate(),
-                    23,
-                    59
-                )
+            if (value === null) {
+                this.dateInterval = null
+            } else {
+                this.dateInterval = {
+                    from: value.from,
+                    to: new Date(
+                        value.from.getFullYear(),
+                        value.from.getMonth(),
+                        value.from.getDate(),
+                        23,
+                        59
+                    )
+                }
             }
             this.$emit('update:model-value', value)
             this.$emit('change', value)
@@ -484,10 +506,19 @@ export default defineComponent({
         z-index: 1;
         display: flex;
         border-radius: 2px;
+        border-radius: 2px;
     }
 
     &--card_content {
         width: var(--card-content-width);
     }
+
+    &--button {
+        display: flex;
+        margin-left: auto;
+        width: fit-content;
+        margin-right: 16px;
+        margin-bottom: 16px;
+    }
 }
 </style>