@dataloop-ai/components 0.18.129 → 0.18.130

package/package.json

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

package/src/components/essential/DlEllipsis/DlEllipsis.vue

@@ -1,6 +1,18 @@
 <template>
-    <div class="dl-ellipsis">
+    <div
+        class="dl-ellipsis"
+        :class="multiline ? 'dl-ellipsis__multiline' : ''"
+        :style="cssVars"
+    >
+        <p
+            v-if="multiline"
+            ref="dlEllipsisRef"
+            class="dl-ellipsis__multiline-text"
+        >
+            {{ fullText }}
+        </p>
         <span
+            v-if="!multiline"
             ref="dlEllipsisRef"
             class="dl-ellipsis__left"
         >
@@ -11,14 +23,14 @@
             <span v-else>{{ leftText }}</span>
         </span>
         <span
-            v-if="rightText"
+            v-if="!multiline && rightText"
             class="dl-ellipsis__right"
         >
             {{ rightText }}
         </span>
         <dl-tooltip
             v-if="shouldShowTooltip"
-            :max-width="'max-content'"
+            :max-width="'30vw'"
             :self="tooltipPosition"
             :anchor="tooltipPosition"
             :offset="tooltipOffset"
@@ -33,7 +45,13 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed } from 'vue-demi'
+import {
+    defineComponent,
+    ref,
+    computed,
+    onMounted,
+    getCurrentInstance
+} from 'vue-demi'
 import { DlTooltip } from '../../shared'
 import { useSizeObserver } from '../../../hooks/use-size-observer'
 
@@ -79,6 +97,21 @@ export default defineComponent({
         tooltipOffset: {
             type: Array,
             default: () => [0, 25]
+        },
+        /**
+         * Allows to display multiline text
+         */
+        multiline: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Number of lines to display
+         * must be used with multiline
+         */
+        maxLines: {
+            type: Number,
+            default: 3
         }
     },
     // TODO: fix type issue here
@@ -110,6 +143,18 @@ export default defineComponent({
         )
         const fullText = computed(() => props.text)
 
+        const cssVars = computed<Record<string, string | number>>(() => {
+            return {
+                '--max-lines': props.maxLines
+            }
+        })
+
+        onMounted(() => {
+            const vm = getCurrentInstance()
+            // @ts-ignore
+            window.vm = vm
+        })
+
         return {
             hasDefaultSlot,
             leftText,
@@ -117,7 +162,8 @@ export default defineComponent({
             shouldShowTooltip,
             fullText,
             dlEllipsisRef,
-            hasEllipsis
+            hasEllipsis,
+            cssVars
         }
     }
 })
@@ -138,5 +184,32 @@ export default defineComponent({
         flex: 1 0 auto;
         overflow: hidden;
     }
+
+    &__multiline {
+        /* Set the number of lines to display */
+        display: -webkit-box;
+        /* Enable text ellipsis */
+        overflow: hidden;
+        /* Allow text to break into multiple lines */
+        -webkit-box-orient: vertical;
+        /* Enable vertical scrolling if necessary */
+        overflow-y: auto;
+        /* Hide the horizontal scrollbar */
+        overflow-x: hidden;
+
+        &-text {
+            /* Set the number of lines to display */
+            display: -webkit-box;
+            -webkit-line-clamp: var(
+                --max-lines,
+                3
+            ); /* Adjust this value as needed */
+            /* Enable text ellipsis */
+            overflow: hidden;
+            /* Allow text to break into multiple lines */
+            -webkit-box-orient: vertical;
+            white-space: normal;
+        }
+    }
 }
 </style>

package/src/demos/DlEllipsisDemo.vue

@@ -27,6 +27,19 @@
                 :split-position="0.2"
             />
         </div>
+        <div style="white-space: nowrap; width: 350px; max-height: 600px">
+            <p style="font-weight: bold">
+                Ellipsis with paragraph
+            </p>
+            <dl-ellipsis
+                :text="`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. \
+Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. \
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. \
+Excepteur sint occaecat cupidatat non proident, \
+sunt in culpa qui officia deserunt mollit anim id est laborum.`"
+                multiline
+            />
+        </div>
     </div>
 </template>
 

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

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