@dataloop-ai/components 0.18.57 → 0.18.58

package/package.json

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

package/src/assets/globals.scss

@@ -327,4 +327,14 @@ html {
     flex-direction: row;
 }
 
+// maybe add later
+// .disabled, 
+// .disabled *, 
+[disabled], 
+[disabled] * {
+    opacity: 0.6 !important;
+    outline: 0 !important;
+    cursor: not-allowed !important;
+}
+
 @import 'grid';

package/src/components/basic/DlListItem/DlListItem.vue

@@ -24,7 +24,7 @@
                 >
                     <dl-icon
                         :icon="startIconData.icon"
-                        :color="startIconData.color"
+                        :color="getIconColor(startIconData.color)"
                         :size="startIconData.size"
                     />
                 </dl-item-section>
@@ -171,6 +171,9 @@ export default defineComponent({
             if (this.isClickable) {
                 this.$emit('click', e)
             }
+        },
+        getIconColor(color: string) {
+            return this.disabled ? 'dl-color-disabled' : color
         }
     }
 })

package/src/components/essential/DlLabel/DlLabel.vue

@@ -29,10 +29,14 @@
                 <slot name="default" />
             </dl-ellipsis>
             <span
-                v-if="suffix"
-                :class="fluid ? 'dl-label__fluid' : ''"
+                v-if="suffix || hasSuffixSlot"
+                class="dl-label__suffix-content"
+                :class="{ 'dl-label__fluid': fluid }"
             >
-                {{ suffixPreview }}</span>
+                <slot name="suffix">
+                    <dl-ellipsis :text="suffixPreview" />
+                </slot>
+            </span>
             <div class="dl-label__suffix">
                 <div class="dl-label__suffix-slot">
                     <slot
@@ -131,6 +135,9 @@ export default defineComponent({
             return !!slots['actions']
         })
 
+        const hasSuffixSlot = computed(() => {
+            return !!slots['suffix']
+        })
         const prefixPreview = computed(() => {
             return prefix.value?.trim() ?? ''
         })
@@ -143,6 +150,7 @@ export default defineComponent({
             mouseOver,
             styles,
             hasActions,
+            hasSuffixSlot,
             prefixPreview,
             suffixPreview
         }
@@ -172,6 +180,13 @@ export default defineComponent({
         &-icon {
             cursor: pointer;
         }
+        &-content {
+            max-width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            flex: 1 4 auto;
+        }
     }
     &__content {
         color: var(--dl-label-text-color);

package/src/demos/DlLabelDemo.vue

@@ -58,7 +58,7 @@
             <dl-label
                 label-color="dl-color-secondary"
                 hint="tooltip"
-                text="dl-labelaaaaaaaaaaaaaa"
+                text="dl-labelaaaaaaaaaaaaaadjsfskdlfjdslkfjskfljslkadjakldjdkljdkladjakldajdlkadsjakldaj"
                 prefix="%"
             >
                 <template #actions>
@@ -137,7 +137,7 @@
                 label-color="dl-color-secondary"
                 hint="tooltip"
                 text="dl-labelaaaaaaaaaaaaaa"
-                suffix=".mp3"
+                suffix=".mp3asdasdsfjksdhfjkdsfhkajshdsakjdhasjkdhaskjdhaskjdhaskjdhaskjfhdskjahrjkasdhjksadhasjkashjfg"
                 fluid
             >
                 <template #actions>
@@ -157,27 +157,34 @@
             </dl-label>
         </div>
         <div class="dl-text-holder-demo">
-            Label with suffix and fluid
+            Label with a big suffix
             <dl-label
                 label-color="dl-color-secondary"
                 hint="tooltip"
                 text="dl-labelaaaaaaaaaaaaaa"
-                suffix=".mp3"
-                fluid
+                suffix=".askdjhask jshadk jsah dajk dhsa djksahd ksaj dhajkd ah dkajsd haskd shds asd asd sadas "
+            />
+        </div>
+        <div class="dl-text-holder-demo">
+            Label with suffix and separator
+            <dl-label
+                id="show-both-ends"
+                text="I am a package name"
             >
-                <template #actions>
-                    <div
+                <template #suffix>
+                    <span
                         style="
-                            display: flex;
-                            gap: 5px;
-                            align-items: center;
-                            height: 100%;
-                            margin-right: 5px;
+                            width: 100%;
+                            display: inline-flex;
+                            gap: 2px;
+                            margin-left: 2px;
                         "
                     >
-                        <dl-icon icon="icon-dl-add" />
-                        <dl-icon icon="icon-dl-delete" />
-                    </div>
+                        <span style="color: var(--dl-color-lighter)">|</span>
+                        <dl-ellipsis
+                            text="I am a very long model name I am a very long model name"
+                        />
+                    </span>
                 </template>
             </dl-label>
         </div>
@@ -186,12 +193,13 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlLabel, DlIcon } from '../components'
+import { DlLabel, DlIcon, DlEllipsis } from '../components'
 
 export default defineComponent({
     components: {
         DlLabel,
-        DlIcon
+        DlIcon,
+        DlEllipsis
     }
 })
 </script>
@@ -201,8 +209,15 @@ export default defineComponent({
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
-    width: 200px;
+    width: 300px;
     padding: 5px;
     word-wrap: break-word;
 }
 </style>
+<style lang="scss">
+#show-both-ends {
+    .dl-label__suffix-content {
+        flex: 1 2 auto;
+    }
+}
+</style>