@dataloop-ai/components 0.18.99 → 0.18.101

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.18.99",
+  "version": "0.18.101",
   "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
         })
 
@@ -462,6 +465,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"
+                :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"
@@ -49,7 +52,7 @@
 </template>
 
 <script lang="ts">
-import { PropType, defineComponent, ref } from 'vue-demi'
+import { PropType, defineComponent, ref, watch } from 'vue-demi'
 import { DlTooltip } from '../../shared'
 import { DlIcon } from '../../essential'
 import { useSizeObserver } from '../../../hooks/use-size-observer'
@@ -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: '' },
@@ -92,11 +96,16 @@ export default defineComponent({
         overflow: { type: Boolean, default: false },
         fit: { type: Boolean, default: false }
     },
-    emits: ['remove'],
-    setup() {
+    emits: ['remove', 'ellipsis'],
+    setup(props, ctx) {
         const isVisible = ref(true)
         const dlChipRef = ref(null)
-        const { hasEllipsis } = useSizeObserver(dlChipRef)
+        const label = ref(props.label)
+        const { hasEllipsis } = useSizeObserver(dlChipRef, label)
+
+        watch(hasEllipsis, () => {
+            ctx.emit('ellipsis', hasEllipsis.value)
+        })
 
         return {
             isVisible,
@@ -151,6 +160,7 @@ export default defineComponent({
                     color: this.color
                 }),
                 '--dl-chip-border': setBorder({
+                    noBorder: this.noBorder,
                     disabled: this.disabled,
                     color: this.color
                 }),
@@ -211,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/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);

package/src/hooks/use-size-observer.ts

@@ -1,22 +1,36 @@
-import { onBeforeUnmount, onMounted, ref, Ref } from 'vue-demi'
+import { onBeforeUnmount, onMounted, ref, Ref, watch } from 'vue-demi'
 import { isEllipsisActive } from '../utils/is-ellipsis-active'
 import { get } from 'lodash'
 
-export function useSizeObserver(elRef: Ref, entryLevel = 'target') {
+export function useSizeObserver(elRef: Ref, ...refsToWatch: any[]) {
+    const entryLevel = 'target'
     const widthRef = ref(0)
     const heightRef = ref(0)
     const hasEllipsis = ref(false)
     const borderBoxSize = ref(null)
-    const resizeObserver = new ResizeObserver((entries) => {
-        for (const entry of entries) {
-            hasEllipsis.value = isEllipsisActive(get(entry, entryLevel))
-            widthRef.value = entry.contentRect.width
-            heightRef.value = entry.contentRect.height
-            borderBoxSize.value = entry.borderBoxSize
+    const calcEllipsis = (el: HTMLElement) => {
+        hasEllipsis.value = isEllipsisActive(el)
+    }
+    const resizeObserver = new ResizeObserver(
+        (entries: ResizeObserverEntry[]) => {
+            for (const entry of entries) {
+                hasEllipsis.value = isEllipsisActive(get(entry, entryLevel))
+                widthRef.value = entry.contentRect.width
+                heightRef.value = entry.contentRect.height
+                borderBoxSize.value = entry.borderBoxSize
+            }
         }
-    })
+    )
 
     onMounted(() => elRef.value && resizeObserver.observe(elRef.value))
+    watch(elRef, () => {
+        elRef.value && calcEllipsis(elRef.value)
+    })
+    for (const ref of refsToWatch) {
+        watch(ref, () => {
+            elRef.value && calcEllipsis(elRef.value)
+        })
+    }
     onBeforeUnmount(() => elRef.value && resizeObserver.unobserve(elRef.value))
 
     return {

package/src/utils/is-ellipsis-active.ts

@@ -1,6 +1,3 @@
 export const isEllipsisActive = (e: Element) => {
-    return (
-        (e as HTMLElement).offsetWidth < e.scrollWidth ||
-        (e as HTMLElement).offsetHeight < e.scrollHeight
-    )
+    return (e as HTMLElement).offsetWidth < e.scrollWidth
 }