@dataloop-ai/components 0.17.93 → 0.17.94
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
|
@@ -4,11 +4,9 @@
|
|
|
4
4
|
ref="dlEllipsisRef"
|
|
5
5
|
class="dl-ellipsis__left"
|
|
6
6
|
>
|
|
7
|
-
<slot
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
/>
|
|
11
|
-
<span v-else>{{ leftText }}</span>
|
|
7
|
+
<slot>
|
|
8
|
+
<span>{{ leftText }}</span>
|
|
9
|
+
</slot>
|
|
12
10
|
</span>
|
|
13
11
|
<span
|
|
14
12
|
v-if="rightText"
|
|
@@ -23,17 +21,15 @@
|
|
|
23
21
|
:anchor="tooltipPosition"
|
|
24
22
|
:offset="tooltipOffset"
|
|
25
23
|
>
|
|
26
|
-
<slot
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
/>
|
|
30
|
-
<span v-else>{{ fullText }}</span>
|
|
24
|
+
<slot>
|
|
25
|
+
<span>{{ fullText }}</span>
|
|
26
|
+
</slot>
|
|
31
27
|
</dl-tooltip>
|
|
32
28
|
</div>
|
|
33
29
|
</template>
|
|
34
30
|
|
|
35
31
|
<script lang="ts">
|
|
36
|
-
import { defineComponent, ref, computed } from 'vue-demi'
|
|
32
|
+
import { defineComponent, ref, computed, toRef } from 'vue-demi'
|
|
37
33
|
import DlTooltip from '../../essential/DlTooltip/DlTooltip.vue'
|
|
38
34
|
import { useSizeObserver } from '../../../hooks/use-size-observer'
|
|
39
35
|
|
|
@@ -84,31 +80,31 @@ export default defineComponent({
|
|
|
84
80
|
// TODO: fix type issue here
|
|
85
81
|
setup(props: any, { slots }: any) {
|
|
86
82
|
const dlEllipsisRef = ref(null)
|
|
83
|
+
const textRef = toRef(props, 'text')
|
|
87
84
|
const { hasEllipsis } = useSizeObserver(dlEllipsisRef)
|
|
88
|
-
|
|
89
85
|
const hasDefaultSlot = computed(() => !!slots.default)
|
|
90
86
|
const splitIndex = computed(() => {
|
|
91
|
-
if (!
|
|
87
|
+
if (!textRef.value.length) return null
|
|
92
88
|
return props.split
|
|
93
|
-
? Math.round(
|
|
94
|
-
:
|
|
89
|
+
? Math.round(textRef.value.length * props.splitPosition)
|
|
90
|
+
: textRef.value.length
|
|
95
91
|
})
|
|
96
92
|
const leftText = computed(() => {
|
|
97
93
|
if (splitIndex.value !== null) {
|
|
98
|
-
return
|
|
94
|
+
return textRef.value.slice(0, splitIndex.value)
|
|
99
95
|
}
|
|
100
96
|
return ''
|
|
101
97
|
})
|
|
102
98
|
const rightText = computed(() => {
|
|
103
99
|
if (splitIndex.value !== null) {
|
|
104
|
-
return
|
|
100
|
+
return textRef.value.slice(splitIndex.value)
|
|
105
101
|
}
|
|
106
102
|
return ''
|
|
107
103
|
})
|
|
108
104
|
const shouldShowTooltip = computed(
|
|
109
105
|
() => hasEllipsis.value && props.tooltip
|
|
110
106
|
)
|
|
111
|
-
const fullText = computed(() =>
|
|
107
|
+
const fullText = computed(() => textRef.value)
|
|
112
108
|
|
|
113
109
|
return {
|
|
114
110
|
hasDefaultSlot,
|