@dataloop-ai/components 0.17.39 → 0.17.41

package/package.json

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

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

@@ -267,7 +267,7 @@ export default defineComponent({
 }
 
 .content {
-    padding: var(--dl-dialog-box-content-padding, 10px 16px 30px 16px);
+    padding: var(--dl-dialog-box-content-padding, 20px 16px 30px 16px);
     overflow: auto;
     height: 100%;
 
@@ -281,7 +281,7 @@ export default defineComponent({
 
 .footer {
     display: flex;
-    padding: 16px;
+    padding: 20px 16px;
     border-top: var(--dl-dialog-separator);
 }
 

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

@@ -70,6 +70,7 @@ export default defineComponent({
     width: 100%;
     align-items: flex-start;
     justify-content: space-between;
+    padding-top: 20px;
 }
 
 .title {

package/src/components/essential/DlTextHolder/DlTextHolder.vue

@@ -4,31 +4,61 @@
         class="dl-text-holder"
     >
         <span v-if="prefix">{{ prefixPreview }}</span>
-        <span class="dl-text-holder--value">
-            <slot> {{ textPreview }} </slot>
-        </span>
+        <dl-ellipsis
+            :text="textPreview"
+            :split="split"
+            :split-position="splitPosition"
+        />
         <span v-if="suffix"> {{ suffixPreview }}</span>
     </span>
 </template>
 
 <script lang="ts">
 import { v4 } from 'uuid'
+import { DlEllipsis } from '../../basic/DlEllipsis'
 import { defineComponent } from 'vue-demi'
 
 export default defineComponent({
     name: 'DlTextHolder',
+    components: { DlEllipsis },
     props: {
+        /**
+         * Prefix to be displayed
+         */
         prefix: {
             type: String,
             default: null
         },
+        /**
+         * Suffix to be displayed
+         */
         suffix: {
             type: String,
             default: null
         },
+        /**
+         * Text to be displayed
+         */
         text: {
             type: String,
-            required: true
+            default: ''
+        },
+        /**
+         * 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
         }
     },
     data() {
@@ -44,7 +74,7 @@ export default defineComponent({
             return this.suffix?.trim() ?? ''
         },
         textPreview(): string {
-            return this.text
+            return this.text || ''
         }
     }
 })
@@ -55,11 +85,6 @@ export default defineComponent({
     display: flex;
     flex-wrap: nowrap;
     width: 100%;
-
-    &--value {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
+    white-space: nowrap;
 }
 </style>

package/src/demos/DlTextHolderDemo.vue

@@ -10,9 +10,17 @@
             <dl-text-holder
                 prefix="home/Desktop/"
                 suffix=".mp3"
-            >
-                very-loooooooooooong-named-song2
-            </dl-text-holder>
+                text="very-loooooooooooong-named-song"
+                split
+            />
+
+            <dl-text-holder
+                prefix="home/Desktop/"
+                suffix=".mp3"
+                text="very-loooooooooooong-named-song"
+                split
+                :split-position="0.7"
+            />
         </div>
     </div>
 </template>