@dataloop-ai/components 0.19.45 → 0.19.47

package/package.json

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

package/src/components/compound/DlTable/DlTable.vue

@@ -132,6 +132,7 @@
                                     :key="col.name"
                                     :props="getHeaderScope({ col })"
                                     :col-index="colIndex"
+                                    :pagination="computedPagination"
                                 >
                                     <span class="inner-th">
                                         {{ col.label }}
@@ -480,6 +481,7 @@
                                     :key="col.name"
                                     :props="getHeaderScope({ col })"
                                     :col-index="colIndex"
+                                    :pagination="computedPagination"
                                     @click="onThClick($event, col.name)"
                                 >
                                     <span class="inner-th">
@@ -1925,7 +1927,8 @@ export default defineComponent({
             computedVisibleCols,
             totalItemsCount,
             showRowActions,
-            tableRef
+            tableRef,
+            computedPagination
         }
     }
 })

package/src/components/compound/DlTable/components/DlTh.vue

@@ -5,11 +5,18 @@
         :class="thClasses"
         :data-col-index="colIndex"
         @click="onClick"
+        @mouseenter="iconHover = true"
+        @mouseleave="iconHover = false"
     >
         <dl-icon
             v-if="isSortable && align === 'right'"
             :class="iconClass"
-            icon="icon-dl-arrow-up"
+            :icon="computedSortIcon"
+            :style="
+                !isCurrentlySorted && !iconHover
+                    ? 'display: none !important;'
+                    : ''
+            "
         />
         <dl-tooltip v-if="hasEllipsis">
             <slot />
@@ -33,7 +40,12 @@
                 v-if="isSortable && ['left', 'center'].includes(align)"
                 style="margin-top: 2px"
                 :class="iconClass"
-                icon="icon-dl-arrow-up"
+                :icon="computedSortIcon"
+                :style="
+                    !isCurrentlySorted && !iconHover
+                        ? 'display: none !important;'
+                        : ''
+                "
             />
         </span>
     </th>
@@ -41,13 +53,7 @@
 
 <script lang="ts">
 import { isString } from 'lodash'
-import {
-    defineComponent,
-    getCurrentInstance,
-    computed,
-    ref,
-    toRefs
-} from 'vue-demi'
+import { defineComponent, getCurrentInstance, computed, ref } from 'vue-demi'
 import { useSizeObserver } from '../../../../hooks/use-size-observer'
 import { stringStyleToRecord } from '../../../../utils'
 import { DlIcon } from '../../../essential'
@@ -65,6 +71,10 @@ export default defineComponent({
         colIndex: {
             type: Number,
             default: null
+        },
+        pagination: {
+            type: Object,
+            default: () => ({})
         }
     },
     emits: ['click'],
@@ -72,6 +82,7 @@ export default defineComponent({
     setup(props, { emit, attrs }) {
         const vm = getCurrentInstance()
         const tableTh = ref(null)
+        const iconHover = ref(false)
 
         const { hasEllipsis } = useSizeObserver(tableTh)
 
@@ -79,6 +90,16 @@ export default defineComponent({
             emit('click', event, name)
         }
 
+        const isCurrentlySorted = computed(() => {
+            return props.props?.col?.name === props.pagination.sortBy
+        })
+
+        const computedSortIcon = computed<string>(() => {
+            return props.pagination.descending
+                ? 'icon-dl-arrowdown'
+                : 'icon-dl-arrow-up'
+        })
+
         const hasOptionalProps = computed(() => {
             return !!Object.keys(props.props ?? {})
         })
@@ -163,7 +184,10 @@ export default defineComponent({
             tableTh,
             hasEllipsis,
             onClick,
-            column
+            column,
+            computedSortIcon,
+            isCurrentlySorted,
+            iconHover
         }
     }
 })

package/src/components/compound/DlTable/styles/dl-table-styles.scss

@@ -128,15 +128,7 @@
             }
         }
 
-        &.sorted .dl-table__sort-icon {
-            opacity: 0.86 !important;
-        }
 
-        &.sort-desc .dl-table__sort-icon {
-            &::v-deep .dl-icon {
-                transform: rotate(180deg) !important;
-            }
-        }
     }
 
     thead,
@@ -237,7 +229,7 @@
 
     &__sort-icon {
         transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-        opacity: 0;
+        opacity: 0.86;
 
         &--left,
         &--center {