@dataloop-ai/components 0.18.100 → 0.18.102

package/package.json

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

package/src/components/basic/DlButton/DlButton.vue

@@ -191,6 +191,9 @@ export default defineComponent({
             if (active.value) {
                 classes.push('active-class')
             }
+            if (props.dense) {
+                classes.push('dl-button--dense')
+            }
             return classes
         })
 
@@ -210,6 +213,9 @@ export default defineComponent({
             ]
         },
         getIconColor(): string {
+            if (this.disabled) {
+                return 'dl-color-disabled'
+            }
             if (this.mouseOver) {
                 return 'dl-color-hover'
             }
@@ -462,6 +468,11 @@ export default defineComponent({
         }
     }
 
+    &--dense {
+        border: none;
+        padding: 0;
+    }
+
     &:hover:enabled:not(:active) {
         transition: var(--dl-button-transition-duration);
         color: var(--dl-button-text-color-hover);

package/src/components/basic/DlChip/DlChip.vue

@@ -27,14 +27,17 @@
         >
             <div
                 ref="dlChipRef"
-                :class="{ 'dl-chip--ellipsis': overflow }"
+                :class="{
+                    'dl-chip--ellipsis': overflow,
+                    'dl-chip--no-overflow': !overflow
+                }"
             >
                 <slot>
                     {{ hasLabel ? label : null }}
                 </slot>
             </div>
         </div>
-
+        <slot name="suffix" />
         <span
             v-if="removable"
             class="dl-chip-remove-icon-container"
@@ -74,6 +77,7 @@ export default defineComponent({
     props: {
         disabled: Boolean,
         filled: { type: Boolean, default: true },
+        noBorder: { type: Boolean, default: false },
         outlined: Boolean,
         color: { type: String, default: 'dl-color-secondary' },
         textColor: { type: String, default: '' },
@@ -156,6 +160,7 @@ export default defineComponent({
                     color: this.color
                 }),
                 '--dl-chip-border': setBorder({
+                    noBorder: this.noBorder,
                     disabled: this.disabled,
                     color: this.color
                 }),
@@ -216,6 +221,10 @@ export default defineComponent({
         white-space: nowrap;
         overflow: hidden;
     }
+
+    &--no-overflow {
+        overflow-wrap: break-word;
+    }
 }
 
 .dl-chip-remove-icon-container {

package/src/components/basic/DlChip/utils.ts

@@ -9,6 +9,7 @@ export interface DlChipProps {
     filled: boolean
     color: string
     textColor: string
+    noBorder: boolean
 }
 
 export const setTextColor = ({
@@ -42,7 +43,14 @@ export const setBgColor = ({
     return getColor(color, 'dl-color-secondary')
 }
 
-export const setBorder = ({ disabled, color = '' }: Partial<DlChipProps>) => {
+export const setBorder = ({
+    noBorder,
+    disabled,
+    color = ''
+}: Partial<DlChipProps>) => {
+    if (noBorder) {
+        return 'none'
+    }
     if (disabled) {
         return `1px solid var(--dl-color-disabled)`
     }
@@ -59,17 +67,17 @@ export const setPadding = ({
     const right = removable ? 20 : 5
 
     if (hasLabel && (removable || hasIcon)) {
-        return `5px ${right}px 5px ${left}px`
+        return `3px ${right}px 3px ${left}px`
     }
 
     if (!hasLabel && hasIcon && removable) {
-        return `5px ${right}px 5px 0`
+        return `3px ${right}px 3px 0`
     }
     if (removable || hasIcon) {
-        return '5px 0'
+        return '3px 0'
     }
 
-    return '5px'
+    return '3px 5px'
 }
 
 export const setRemoveIconWidth = ({

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

@@ -37,7 +37,10 @@
                     <dl-ellipsis :text="suffixPreview" />
                 </slot>
             </span>
-            <div class="dl-label__suffix">
+            <div
+                v-if="hint || hasHintSlot || hasActions"
+                class="dl-label__suffix"
+            >
                 <div class="dl-label__suffix-slot">
                     <slot
                         v-if="mouseOver"
@@ -138,6 +141,11 @@ export default defineComponent({
         const hasSuffixSlot = computed(() => {
             return !!slots['suffix']
         })
+
+        const hasHintSlot = computed(() => {
+            return !!slots['hint']
+        })
+
         const prefixPreview = computed(() => {
             return prefix.value?.trim() ?? ''
         })
@@ -151,6 +159,7 @@ export default defineComponent({
             styles,
             hasActions,
             hasSuffixSlot,
+            hasHintSlot,
             prefixPreview,
             suffixPreview
         }

package/src/components/essential/DlTextArea/DlTextArea.vue

@@ -222,6 +222,10 @@ export default defineComponent({
         maxHeight: {
             type: String,
             default: '120px'
+        },
+        minHeight: {
+            type: String,
+            default: '80px'
         }
     },
     emits: ['input', 'focus', 'blur', 'clear', 'update:model-value', 'keydown'],
@@ -235,6 +239,7 @@ export default defineComponent({
             return {
                 '--dl-textarea-max-width': props.width || 'auto',
                 '--dl-textarea-max-height': props.maxHeight,
+                '--dl-textarea-min-height': props.minHeight,
                 '--dl-textarea-width':
                     borderBoxSize.value?.[0].inlineSize + 'px' || '100%'
             }
@@ -365,7 +370,7 @@ export default defineComponent({
     width: 100%;
     min-width: 100px;
     max-width: 100%;
-    min-height: 80px;
+    min-height: var(--dl-textarea-min-height);
     max-height: var(--dl-textarea-max-height);
     outline: none;
     color: var(--dl-color-darker);