@dataloop-ai/components 0.18.61 → 0.18.63

package/package.json

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

package/src/components/basic/DlButton/DlButton.vue

@@ -16,6 +16,8 @@
             @click="onClick"
             @dblclick="onDblClick"
             @mousedown="onMouseDown"
+            @mouseenter="mouseOver = true"
+            @mouseleave="mouseOver = false"
         >
             <dl-tooltip
                 v-if="!tooltip && overflow && isOverflowing && hasLabel"
@@ -182,6 +184,7 @@ export default defineComponent({
         const { active } = toRefs(props)
         const buttonLabelRef = ref(null)
         const { hasEllipsis } = useSizeObserver(buttonLabelRef)
+        const mouseOver = ref(false)
 
         const buttonClass = computed(() => {
             const classes = ['dl-button']
@@ -195,7 +198,8 @@ export default defineComponent({
             uuid: `dl-button-${v4()}`,
             buttonLabelRef,
             isOverflowing: hasEllipsis,
-            buttonClass
+            buttonClass,
+            mouseOver
         }
     },
     computed: {
@@ -206,6 +210,10 @@ export default defineComponent({
             ]
         },
         getIconColor(): string {
+            if (this.mouseOver) {
+                return 'dl-color-hover'
+            }
+
             if (this.iconColor) {
                 return this.iconColor
             }
@@ -464,6 +472,9 @@ export default defineComponent({
             transition: var(--dl-button-text-transition-duration);
             color: var(--dl-button-color-hover);
         }
+        .dl-icon {
+            color: var(--dl-button-text-color-hover) !important;
+        }
     }
 }
 

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

@@ -441,13 +441,7 @@ export default defineComponent({
             } else {
                 this.dateInterval = {
                     from: value.from,
-                    to: new Date(
-                        value.to.getFullYear(),
-                        value.to.getMonth(),
-                        value.to.getDate(),
-                        23,
-                        59
-                    )
+                    to: new Date(value.to)
                 }
             }
             this.$emit('update:model-value', value)

package/src/components/compound/DlDialogBox/DlDialogBox.vue

@@ -330,7 +330,7 @@ export default defineComponent({
     display: flex;
     padding: var(--dl-dialog-box-header-padding, 16px);
     border-bottom: var(--dl-dialog-separator);
-    height: var(--dl-dialog-box-header-height, 60px);
+    height: fit-content;
 }
 
 .content {
@@ -349,7 +349,7 @@ export default defineComponent({
 .footer {
     display: flex;
     padding: var(--dl-dialog-box-footer-padding, 20px 16px);
-    height: var(--dl-dialog-box-footer-height, 35px);
+    height: fit-content;
     border-top: var(--dl-dialog-separator);
 }
 

package/src/demos/DlButtonDemo.vue

@@ -287,13 +287,23 @@
         <div>
             <h3>Shaded and outlined</h3>
             <dl-button
-                :active="activeButtonState"
                 icon="icon-dl-search"
                 label="test me"
                 shaded
                 outlined
             />
         </div>
+        <div>
+            <h3>button with icon color</h3>
+            <dl-button
+                icon="icon-dl-search"
+                :icon-color="'red'"
+                label="test me"
+                size="s"
+                shaded
+                outlined
+            />
+        </div>
     </div>
 </template>
 

package/src/demos/DlDateTimeRangeDemo.vue

@@ -70,6 +70,9 @@
                 >
             </div>
         </div>
+        <div>
+            {{ date }}
+        </div>
         <div class="dl-dtr--input">
             <dl-date-time-range
                 v-model="date"