@dataloop-ai/components 0.17.65 → 0.17.67

package/package.json

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

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

@@ -1,10 +1,14 @@
 <template>
-    <div
-        ref="dlEllipsisRef"
-        class="dl-ellipsis"
-    >
-        <span class="dl-ellipsis__left">
-            {{ leftText }}
+    <div class="dl-ellipsis">
+        <span
+            ref="dlEllipsisRef"
+            class="dl-ellipsis__left"
+        >
+            <slot
+                v-if="hasDefaultSlot"
+                name="default"
+            />
+            <span v-else>{{ leftText }}</span>
         </span>
         <span
             v-if="rightText"
@@ -12,8 +16,18 @@
         >
             {{ rightText }}
         </span>
-        <dl-tooltip v-if="hasEllipsis && tooltip">
-            {{ fullText }}
+        <dl-tooltip
+            v-if="shouldShowTooltip"
+            :max-width="'max-content'"
+            :self="tooltipPosition"
+            :anchor="tooltipPosition"
+            :offset="tooltipOffset"
+        >
+            <slot
+                v-if="hasDefaultSlot"
+                name="default"
+            />
+            <span v-else>{{ fullText }}</span>
         </dl-tooltip>
     </div>
 </template>
@@ -34,63 +48,74 @@ export default defineComponent({
          */
         text: {
             type: String,
-            required: true
+            default: ''
         },
         /**
          * Allows to split the text in two parts
          */
         split: {
             type: Boolean,
-            default: false,
-            required: false
+            default: 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
+            validator: (value) => value >= 0 && value <= 1
         },
         /**
          * Tooltip to be displayed when the text is truncated
          */
         tooltip: {
             type: Boolean,
-            default: true,
-            required: false
+            default: true
+        },
+        tooltipPosition: {
+            type: String,
+            default: 'top middle'
+        },
+        tooltipOffset: {
+            type: Array,
+            default: () => [0, 25]
         }
     },
-    setup(props) {
-        const { text, split } = props
+    setup(props, ctx) {
+        const dlEllipsisRef = ref(null)
+        const { hasEllipsis } = useSizeObserver(dlEllipsisRef)
 
-        const splitPositionsRef = computed(() => {
-            return Math.min(
-                Math.max(props.splitPosition, 1),
-                props.splitPosition
-            )
+        const hasDefaultSlot = computed(() => !!ctx.slots.default)
+        const splitIndex = computed(() => {
+            if (!props.text.length) return null
+            return props.split
+                ? Math.round(props.text.length * props.splitPosition)
+                : props.text.length
         })
-
-        const dlEllipsisRef = ref(null)
-        const splitIndex = computed(() =>
-            split
-                ? Math.round(text.length * splitPositionsRef.value)
-                : text.length
+        const leftText = computed(() => {
+            if (splitIndex.value !== null) {
+                return props.text.slice(0, splitIndex.value)
+            }
+            return ''
+        })
+        const rightText = computed(() => {
+            if (splitIndex.value !== null) {
+                return props.text.slice(splitIndex.value)
+            }
+            return ''
+        })
+        const shouldShowTooltip = computed(
+            () => hasEllipsis.value && props.tooltip
         )
-
-        const leftText = computed(() => text.slice(0, splitIndex.value))
-        const rightText = computed(() => text.slice(splitIndex.value))
-
-        const { hasEllipsis } = useSizeObserver(dlEllipsisRef)
-        const fullText = computed(() => text)
+        const fullText = computed(() => props.text)
 
         return {
+            hasDefaultSlot,
             leftText,
             rightText,
+            shouldShowTooltip,
             fullText,
-            dlEllipsisRef,
-            hasEllipsis
+            dlEllipsisRef
         }
     }
 })

package/src/components/compound/DlCharts/charts/DlDoughnutChart/DlDoughnutChart.vue

@@ -269,6 +269,23 @@ export default defineComponent({
                     plugins: {
                         legend: {
                             display: false
+                        },
+                        tooltip: {
+                            yAlign: 'none',
+                            callbacks: {
+                                labelColor (
+                                    tooltipItem: { dataIndex: string | number },
+                                    chart: any
+                                ) {
+                                    return {
+                                        backgroundColor:
+                                            chartRefValue.value.data.datasets[0]
+                                                .hoverBackgroundColor[
+                                                tooltipItem.dataIndex
+                                            ]
+                                    }
+                                }
+                            }
                         }
                     }
                 },

package/src/components/compound/DlCharts/charts/DlDoughnutChart/components/DlDoughnutChartLegend.vue

@@ -15,12 +15,6 @@
                 @mouseenter="emitMouseOverLegend(index)"
                 @mouseleave="emitMouseLeaveLegend(index)"
             >
-                <dl-tooltip
-                    self="top middle"
-                    anchor="top middle"
-                >
-                    {{ data.labels[index] }}
-                </dl-tooltip>
                 <div class="wrapper__legend__item__label">
                     <div>
                         <div
@@ -28,14 +22,12 @@
                             :style="{ backgroundColor: getColor(index, badge) }"
                         />
                     </div>
-                    <dl-typography>
-                        <div
-                            :class="legendLabelClass"
-                            :style="{ color: getColor(index, text) }"
-                        >
-                            {{ data.labels[index] }}
-                        </div>
-                    </dl-typography>
+                    <div
+                        :class="legendLabelClass"
+                        :style="{ color: getColor(index, text) }"
+                    >
+                        <dl-ellipsis :text="data.labels[index]" />
+                    </div>
                 </div>
                 <div
                     class="wrapper__legend__item__counter truncate"
@@ -50,7 +42,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue-demi'
-import { DlTypography, DlTooltip } from '../../../../../essential'
+import DlEllipsis from '../../../../../basic/DlEllipsis/DlEllipsis.vue'
 import { TDoughnutChartData } from '../types/TDoughnutChartData'
 
 enum EBadgeText {
@@ -62,8 +54,7 @@ type TBadgeText = EBadgeText.badge | EBadgeText.text
 export default defineComponent({
     name: 'DlDoughnutChartLegend',
     components: {
-        DlTypography,
-        DlTooltip
+        DlEllipsis
     },
     props: {
         data: {

package/src/components/compound/DlOptionGroup/DlOptionGroup.vue

@@ -166,9 +166,11 @@ export default defineComponent({
     display: inline-flex;
     width: var(--option-group-width);
     max-width: var(--option-group-max-width);
+    gap: 20px;
 }
 .option-group-wrapper.column {
     flex-direction: column;
+    gap: 10px;
 }
 
 .option {
@@ -179,8 +181,7 @@ export default defineComponent({
     font-size: var(--dl-font-size-body);
     user-select: none;
     color: var(--dl-color-darker);
-    margin: 10px 5px;
-    gap: 5px;
+    gap: 10px;
 }
 
 .disabled {