@dataloop-ai/components 0.18.99 → 0.18.100

package/package.json

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

package/src/components/basic/DlChip/DlChip.vue

@@ -27,7 +27,7 @@
         >
             <div
                 ref="dlChipRef"
-                class="dl-chip--ellipsis"
+                :class="{ 'dl-chip--ellipsis': overflow }"
             >
                 <slot>
                     {{ hasLabel ? label : null }}
@@ -49,7 +49,7 @@
 </template>
 
 <script lang="ts">
-import { PropType, defineComponent, ref } from 'vue-demi'
+import { PropType, defineComponent, ref, watch } from 'vue-demi'
 import { DlTooltip } from '../../shared'
 import { DlIcon } from '../../essential'
 import { useSizeObserver } from '../../../hooks/use-size-observer'
@@ -92,11 +92,16 @@ export default defineComponent({
         overflow: { type: Boolean, default: false },
         fit: { type: Boolean, default: false }
     },
-    emits: ['remove'],
-    setup() {
+    emits: ['remove', 'ellipsis'],
+    setup(props, ctx) {
         const isVisible = ref(true)
         const dlChipRef = ref(null)
-        const { hasEllipsis } = useSizeObserver(dlChipRef)
+        const label = ref(props.label)
+        const { hasEllipsis } = useSizeObserver(dlChipRef, label)
+
+        watch(hasEllipsis, () => {
+            ctx.emit('ellipsis', hasEllipsis.value)
+        })
 
         return {
             isVisible,

package/src/hooks/use-size-observer.ts

@@ -1,22 +1,36 @@
-import { onBeforeUnmount, onMounted, ref, Ref } from 'vue-demi'
+import { onBeforeUnmount, onMounted, ref, Ref, watch } from 'vue-demi'
 import { isEllipsisActive } from '../utils/is-ellipsis-active'
 import { get } from 'lodash'
 
-export function useSizeObserver(elRef: Ref, entryLevel = 'target') {
+export function useSizeObserver(elRef: Ref, ...refsToWatch: any[]) {
+    const entryLevel = 'target'
     const widthRef = ref(0)
     const heightRef = ref(0)
     const hasEllipsis = ref(false)
     const borderBoxSize = ref(null)
-    const resizeObserver = new ResizeObserver((entries) => {
-        for (const entry of entries) {
-            hasEllipsis.value = isEllipsisActive(get(entry, entryLevel))
-            widthRef.value = entry.contentRect.width
-            heightRef.value = entry.contentRect.height
-            borderBoxSize.value = entry.borderBoxSize
+    const calcEllipsis = (el: HTMLElement) => {
+        hasEllipsis.value = isEllipsisActive(el)
+    }
+    const resizeObserver = new ResizeObserver(
+        (entries: ResizeObserverEntry[]) => {
+            for (const entry of entries) {
+                hasEllipsis.value = isEllipsisActive(get(entry, entryLevel))
+                widthRef.value = entry.contentRect.width
+                heightRef.value = entry.contentRect.height
+                borderBoxSize.value = entry.borderBoxSize
+            }
         }
-    })
+    )
 
     onMounted(() => elRef.value && resizeObserver.observe(elRef.value))
+    watch(elRef, () => {
+        elRef.value && calcEllipsis(elRef.value)
+    })
+    for (const ref of refsToWatch) {
+        watch(ref, () => {
+            elRef.value && calcEllipsis(elRef.value)
+        })
+    }
     onBeforeUnmount(() => elRef.value && resizeObserver.unobserve(elRef.value))
 
     return {

package/src/utils/is-ellipsis-active.ts

@@ -1,6 +1,3 @@
 export const isEllipsisActive = (e: Element) => {
-    return (
-        (e as HTMLElement).offsetWidth < e.scrollWidth ||
-        (e as HTMLElement).offsetHeight < e.scrollHeight
-    )
+    return (e as HTMLElement).offsetWidth < e.scrollWidth
 }