@dataloop-ai/components 0.17.38 → 0.17.40

package/package.json

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

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

@@ -1,9 +1,9 @@
 <template>
-    <div class="dl-ellipsis">
-        <span
-            ref="dlEllipsisRef"
-            class="dl-ellipsis__left"
-        >
+    <div
+        ref="dlEllipsisRef"
+        class="dl-ellipsis"
+    >
+        <span class="dl-ellipsis__left">
             {{ leftText }}
         </span>
         <span
@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, toRef } from 'vue-demi'
+import { defineComponent, ref, computed } from 'vue-demi'
 import DlTooltip from '../../essential/DlTooltip/DlTooltip.vue'
 import { useSizeObserver } from '../../../hooks/use-size-observer'
 
@@ -65,11 +65,12 @@ export default defineComponent({
     setup(props) {
         const { text, split } = props
 
-        const splitPositionsRef = toRef(props, 'splitPosition')
-        splitPositionsRef.value = Math.min(
-            Math.max(splitPositionsRef.value, 1),
-            0
-        )
+        const splitPositionsRef = computed(() => {
+            return Math.min(
+                Math.max(props.splitPosition, 1),
+                props.splitPosition
+            )
+        })
 
         const dlEllipsisRef = ref(null)
         const splitIndex = computed(() =>

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/demos/DlDropdownButtonDemo.vue

@@ -260,7 +260,7 @@
                             <dl-item-section :no-wrap="true">
                                 <dl-ellipsis
                                     text="Very very very very long long long long text text text"
-                                    :middle-ellipsis="true"
+                                    split
                                 />
                             </dl-item-section>
                         </dl-list-item>