@dataloop-ai/components 0.20.129 → 0.20.131

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.129",
+  "version": "0.20.131",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -23,7 +23,7 @@
     "check-only": "if grep -E -H -r --exclude-dir=.git --exclude-dir=node_modules --exclude=*.json --exclude=*.yml '^(describe|it).only' .; then echo 'Found only in test files' && exit 1; fi"
   },
   "dependencies": {
-    "@dataloop-ai/icons": "^3.1.22",
+    "@dataloop-ai/icons": "^3.1.23",
     "@types/flat": "^5.0.2",
     "@types/lodash": "^4.14.184",
     "@types/sortablejs": "^1.15.7",

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

@@ -192,6 +192,10 @@ export default defineComponent({
          * Overwrite default background color on hover
          */
         hoverBgColor: { type: String, default: null },
+        /**
+         * Overwrite default background color on mouse press
+         */
+        pressedBgColor: { type: String, default: null, required: false },
         /**
          * Overwrite default border color on hover
          */
@@ -404,10 +408,13 @@ export default defineComponent({
                         shaded: this.shaded,
                         outlined: this.shaded
                     }),
-                    '--dl-button-bg-pressed': setBgOnPressed({
-                        shaded: this.shaded,
-                        outlined: this.outlined
-                    }),
+                    '--dl-button-bg-pressed':
+                        this.pressedBgColor ??
+                        setBgOnPressed({
+                            shaded: this.shaded,
+                            outlined: this.outlined
+                        }),
+
                     '--dl-button-border-pressed': setBorderOnPressed({
                         shaded: this.shaded,
                         outlined: this.outlined

package/src/components/compound/DlTreeTable/views/DlTrTreeView.vue

@@ -16,7 +16,16 @@
                 isDragIconVisible || isRowHighlighted ? '1' : '0'
             }`"
         >
-            <dl-icon class="draggable-icon" icon="icon-dl-drag" size="12px" />
+            <dl-icon
+                class="draggable-icon"
+                icon="icon-dl-drag"
+                size="12px"
+                :color="
+                    isDragIconHovered ? 'dl-color-darker' : 'dl-color-lighter'
+                "
+                @mouseenter="isDragIconHovered = true"
+                @mouseleave="isDragIconHovered = false"
+            />
         </td>
         <td v-if="hasSelectionMode" class="dl-table--col-auto-width">
             <slot name="body-selection" v-bind="bindBodySelection">
@@ -233,7 +242,7 @@ export default defineComponent({
         const childrenCount = ref(0)
         const { row } = toRefs(props)
         const isDragIconVisible = ref(false)
-
+        const isDragIconHovered = ref(false)
         const vm = getCurrentInstance()
 
         const isCheckboxDisabled = computed(() => {
@@ -391,6 +400,7 @@ export default defineComponent({
             visibleChildren,
             childrenCount,
             isDragIconVisible,
+            isDragIconHovered,
             getRowKey,
             emitRowClick,
             onTrDoubleClick,