@dataloop-ai/components 0.19.46 → 0.19.48

package/package.json

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

package/src/components/compound/DlPagination/components/PaginationLegend.vue

@@ -28,7 +28,7 @@ export default defineComponent({
         }
     },
     computed: {
-        paginationContent() {
+        paginationContent(): string {
             return (
                 `Showing ${this.from}-${this.to}` +
                 (this.total ? ` of ${this.total} ${this.itemsName}` : '')

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="computedSortIcon"
+            :style="
+                !isCurrentlySorted && !iconHover
+                    ? 'display: none !important;'
+                    : ''
+            "
         />
         <dl-tooltip v-if="hasEllipsis">
             <slot />
@@ -34,6 +41,11 @@
                 style="margin-top: 2px"
                 :class="iconClass"
                 :icon="computedSortIcon"
+                :style="
+                    !isCurrentlySorted && !iconHover
+                        ? 'display: none !important;'
+                        : ''
+                "
             />
         </span>
     </th>
@@ -70,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)
 
@@ -77,8 +90,11 @@ export default defineComponent({
             emit('click', event, name)
         }
 
-        const computedSortIcon = computed(() => {
-            if (props.props?.col?.name !== props.pagination.sortBy) return ''
+        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'
@@ -169,7 +185,9 @@ export default defineComponent({
             hasEllipsis,
             onClick,
             column,
-            computedSortIcon
+            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 {