@dataloop-ai/components 0.19.46 → 0.19.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataloop-ai/components",
3
- "version": "0.19.46",
3
+ "version": "0.19.47",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
@@ -5,11 +5,18 @@
5
5
  :class="thClasses"
6
6
  :data-col-index="colIndex"
7
7
  @click="onClick"
8
+ @mouseenter="iconHover = true"
9
+ @mouseleave="iconHover = false"
8
10
  >
9
11
  <dl-icon
10
12
  v-if="isSortable && align === 'right'"
11
13
  :class="iconClass"
12
14
  :icon="computedSortIcon"
15
+ :style="
16
+ !isCurrentlySorted && !iconHover
17
+ ? 'display: none !important;'
18
+ : ''
19
+ "
13
20
  />
14
21
  <dl-tooltip v-if="hasEllipsis">
15
22
  <slot />
@@ -34,6 +41,11 @@
34
41
  style="margin-top: 2px"
35
42
  :class="iconClass"
36
43
  :icon="computedSortIcon"
44
+ :style="
45
+ !isCurrentlySorted && !iconHover
46
+ ? 'display: none !important;'
47
+ : ''
48
+ "
37
49
  />
38
50
  </span>
39
51
  </th>
@@ -70,6 +82,7 @@ export default defineComponent({
70
82
  setup(props, { emit, attrs }) {
71
83
  const vm = getCurrentInstance()
72
84
  const tableTh = ref(null)
85
+ const iconHover = ref(false)
73
86
 
74
87
  const { hasEllipsis } = useSizeObserver(tableTh)
75
88
 
@@ -77,8 +90,11 @@ export default defineComponent({
77
90
  emit('click', event, name)
78
91
  }
79
92
 
80
- const computedSortIcon = computed(() => {
81
- if (props.props?.col?.name !== props.pagination.sortBy) return ''
93
+ const isCurrentlySorted = computed(() => {
94
+ return props.props?.col?.name === props.pagination.sortBy
95
+ })
96
+
97
+ const computedSortIcon = computed<string>(() => {
82
98
  return props.pagination.descending
83
99
  ? 'icon-dl-arrowdown'
84
100
  : 'icon-dl-arrow-up'
@@ -169,7 +185,9 @@ export default defineComponent({
169
185
  hasEllipsis,
170
186
  onClick,
171
187
  column,
172
- computedSortIcon
188
+ computedSortIcon,
189
+ isCurrentlySorted,
190
+ iconHover
173
191
  }
174
192
  }
175
193
  })
@@ -128,15 +128,7 @@
128
128
  }
129
129
  }
130
130
 
131
- &.sorted .dl-table__sort-icon {
132
- opacity: 0.86 !important;
133
- }
134
131
 
135
- &.sort-desc .dl-table__sort-icon {
136
- &::v-deep .dl-icon {
137
- transform: rotate(180deg) !important;
138
- }
139
- }
140
132
  }
141
133
 
142
134
  thead,
@@ -237,7 +229,7 @@
237
229
 
238
230
  &__sort-icon {
239
231
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
240
- opacity: 0;
232
+ opacity: 0.86;
241
233
 
242
234
  &--left,
243
235
  &--center {