@dataloop-ai/components 0.16.61 → 0.16.63

package/package.json

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

package/src/components/basic/DlEllipsis/DlEllipsis.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed } from 'vue-demi'
+import { defineComponent, ref, computed, toRef } from 'vue-demi'
 import DlTooltip from '../../essential/DlTooltip/DlTooltip.vue'
 import { useSizeObserver } from '../../../hooks/use-size-observer'
 
@@ -29,15 +29,33 @@ export default defineComponent({
         DlTooltip
     },
     props: {
+        /**
+         * Text to be displayed
+         */
         text: {
             type: String,
             required: true
         },
-        middleEllipsis: {
+        /**
+         * Allows to split the text in two parts
+         */
+        split: {
             type: Boolean,
             default: false,
             required: false
         },
+        /**
+         * Position of the split in the text, % of the text length
+         */
+        splitPosition: {
+            type: Number,
+            required: false,
+            default: 0.5,
+            validator: (value: number) => value >= 0 && value <= 1
+        },
+        /**
+         * Tooltip to be displayed when the text is truncated
+         */
         tooltip: {
             type: Boolean,
             default: true,
@@ -45,20 +63,26 @@ export default defineComponent({
         }
     },
     setup(props) {
-        const dlEllipsisRef = ref(null)
-        const leftText = ref('')
-        const rightText = ref('')
-        const { hasEllipsis } = useSizeObserver(dlEllipsisRef)
+        const { text, split } = props
+
+        const splitPositionsRef = toRef(props, 'splitPosition')
+        splitPositionsRef.value = Math.min(
+            Math.max(splitPositionsRef.value, 1),
+            0
+        )
 
+        const dlEllipsisRef = ref(null)
         const splitIndex = computed(() =>
-            props.middleEllipsis
-                ? Math.round(props.text.length * 0.75)
-                : props.text.length
+            split
+                ? Math.round(text.length * splitPositionsRef.value)
+                : text.length
         )
 
-        const fullText = computed(() => props.text)
-        leftText.value = props.text.slice(0, splitIndex.value)
-        rightText.value = props.text.slice(splitIndex.value)
+        const leftText = computed(() => text.slice(0, splitIndex.value))
+        const rightText = computed(() => text.slice(splitIndex.value))
+
+        const { hasEllipsis } = useSizeObserver(dlEllipsisRef)
+        const fullText = computed(() => text)
 
         return {
             leftText,

package/src/components/compound/DlDialogBox/DlDialogBox.vue

@@ -15,7 +15,8 @@
                 :style="{
                     width: Number(width) ? `${width}px` : width,
                     height: Number(height) ? `${height}px` : height,
-                    transform: `translate(${draggableOptions.draggableX}px, ${draggableOptions.draggableY}px)`
+                    transform: `translate(${draggableOptions.draggableX}px, ${draggableOptions.draggableY}px)`,
+                    maxHeight: !fullscreen && !fullHeight ? '90vh' : ''
                 }"
                 :class="{
                     'dialog-wrapper--fullscreen': fullscreen,
@@ -226,7 +227,6 @@ export default defineComponent({
     display: flex;
     flex-direction: column;
     z-index: var(--dl-z-index-menu);
-    max-height: 90vh;
 
     &--fullscreen {
         margin: 0;
@@ -267,7 +267,7 @@ export default defineComponent({
 }
 
 .content {
-    padding: 10px 16px 30px 16px;
+    padding: var(--dl-dialog-box-content-padding, 10px 16px 30px 16px);
     overflow: auto;
     height: 100%;
 

package/src/demos/DlDialogBoxDemo.vue

@@ -4,6 +4,14 @@
             v-model="draggable"
             left-label="Draggable"
         />
+        <dl-switch
+            v-model="fullscreen"
+            left-label="Full screen"
+        />
+        <dl-switch
+            v-model="fullHeight"
+            left-label="Full height"
+        />
         <dl-button @click="openModal">
             Open modal
         </dl-button>
@@ -11,6 +19,8 @@
             ref="modalOne"
             v-model="isOpenedFirstModal"
             :draggable="draggable"
+            :full-height="fullHeight"
+            :fullscreen="fullscreen"
         >
             <template #header>
                 <dl-dialog-box-header
@@ -136,6 +146,8 @@ export default defineComponent({
         const modalOne = ref<any>(null)
         const modalTwo = ref<any>(null)
         const draggable = ref(true)
+        const fullscreen = ref(false)
+        const fullHeight = ref(false)
         const isOpenedFirstModal = ref(false)
 
         const openModal = () => {
@@ -178,7 +190,9 @@ export default defineComponent({
             modalOne,
             modalTwo,
             isOpenedFirstModal,
-            draggable
+            draggable,
+            fullscreen,
+            fullHeight
         }
     }
 })

package/src/demos/DlEllipsisDemo.vue

@@ -14,7 +14,17 @@
             </p>
             <dl-ellipsis
                 text="Lorem ipsum dolor sit amet consectetur adipisicing elit. "
-                middle-ellipsis="true"
+                split
+            />
+        </div>
+        <div style="white-space: nowrap; width: 350px">
+            <p style="font-weight: bold">
+                Ellipsis at the 20%
+            </p>
+            <dl-ellipsis
+                text="Lorem ipsum dolor sit amet consectetur adipisicing elit. "
+                split
+                :split-position="0.2"
             />
         </div>
     </div>