@dataloop-ai/components 0.16.45 → 0.16.46

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

@@ -0,0 +1,90 @@
+<template>
+    <div class="dl-ellipsis">
+        <span
+            ref="dlEllipsisRef"
+            class="dl-ellipsis__left"
+        >
+            {{ leftText }}
+        </span>
+        <span
+            v-if="rightText"
+            class="dl-ellipsis__right"
+        >
+            {{ rightText }}
+        </span>
+        <dl-tooltip v-if="hasEllipsis && tooltip">
+            {{ fullText }}
+        </dl-tooltip>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed } from 'vue-demi'
+import DlTooltip from '../../essential/DlTooltip/DlTooltip.vue'
+import { useSizeObserver } from '../../../hooks/use-size-observer'
+
+export default defineComponent({
+    name: 'DlEllipsis',
+    components: {
+        DlTooltip
+    },
+    props: {
+        text: {
+            type: String,
+            required: true
+        },
+        middleEllipsis: {
+            type: Boolean,
+            default: false,
+            required: false
+        },
+        tooltip: {
+            type: Boolean,
+            default: true,
+            required: false
+        }
+    },
+    setup(props) {
+        const dlEllipsisRef = ref(null)
+        const leftText = ref('')
+        const rightText = ref('')
+        const { hasEllipsis } = useSizeObserver(dlEllipsisRef)
+
+        const splitIndex = computed(() =>
+            props.middleEllipsis
+                ? Math.round(props.text.length * 0.75)
+                : props.text.length
+        )
+
+        const fullText = computed(() => props.text)
+        leftText.value = props.text.slice(0, splitIndex.value)
+        rightText.value = props.text.slice(splitIndex.value)
+
+        return {
+            leftText,
+            rightText,
+            fullText,
+            dlEllipsisRef,
+            hasEllipsis
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.dl-ellipsis {
+    display: flex;
+    overflow: hidden;
+
+    &__left {
+        flex: 0 1 auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &__right {
+        flex: 1 0 auto;
+        overflow: hidden;
+    }
+}
+</style>

package/src/components/basic/DlEllipsis/index.ts

@@ -0,0 +1,2 @@
+import DlEllipsis from './DlEllipsis.vue'
+export { DlEllipsis }

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

@@ -93,14 +93,17 @@ export default defineComponent({
         },
         startIconSize: {
             type: String,
-            default: '12px'
+            default: '16px'
         },
         endIconSize: {
             type: String,
-            default: '12px'
+            default: '16px'
         },
         height: { type: String, default: null, required: false },
-        padding: { type: String, default: null, required: false }
+        padding: { type: String, default: null, required: false },
+        isHighlighted: {
+            type: Boolean
+        }
     },
     emits: ['click'],
     data() {
@@ -123,7 +126,10 @@ export default defineComponent({
                 '--dl-list-item-border': itemBorder(this.bordered),
                 '--dl-list-item-color': itemColor(this.disabled),
                 '--dl-list-item-height': this.height ?? '28px',
-                '--dl-list-item-padding': this.padding ?? '0px 10px'
+                '--dl-list-item-padding': this.padding ?? '0px 10px',
+                '--dl-list-item-bg-color': this.isHighlighted
+                    ? 'var(--dl-color-fill-hover)'
+                    : 'transparent'
             }
         }
     },
@@ -144,7 +150,7 @@ export default defineComponent({
 
 .dl-list-item {
     -webkit-tap-highlight-color: transparent;
-    background-color: transparent;
+    background-color: var(--dl-list-item-bg-color);
     outline: 0px;
     border: 0px;
     margin: 0px;

package/src/components/basic/index.ts

@@ -9,3 +9,5 @@ export * from './DlWidget'
 export * from './DlPopup'
 export * from './DlPanelContainer'
 export * from './DlProgressChart'
+export * from './DlEllipsis'
+export * from './DlCard'

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

@@ -16,10 +16,14 @@
             />
             <dl-chart-scroll-bar
                 v-if="maxItems > thisItemsInView"
+                :wrapper-styles="{
+                    marginTop: '10px'
+                }"
                 :height="wrapperHeight"
                 :item-count="maxItems"
                 :items-in-view="thisItemsInView"
                 :position="scrollPosition"
+                :scroll-deficit="50"
                 @position-update="handleScrollUpdate"
             />
         </div>
@@ -333,6 +337,9 @@ export default defineComponent({
                         scales: {
                             y: {
                                 max: thisItemsInView.value
+                            },
+                            x: {
+                                suggestedMax: chartData.value.labels.length
                             }
                         }
                     },
@@ -358,7 +365,7 @@ export default defineComponent({
 
         const maxItems = computed(() => chartData.value?.labels.length)
 
-        const handleScrollUpdate = (position: number) => {
+        const handleScrollUpdate = ({ position }: { position: number }) => {
             if (position >= maxItems.value - thisItemsInView.value) return
             chart.value.options.scales.y.min = position
             chart.value.options.scales.y.max = position + thisItemsInView.value

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

@@ -1,5 +1,8 @@
 <template>
-    <div :class="chartWrapperClasses">
+    <div
+        :style="cssVars"
+        :class="chartWrapperClasses"
+    >
         <Bar
             :id="id"
             ref="columnChart"
@@ -144,9 +147,10 @@ export default defineComponent({
             size: { height: number; width: number }
         ) => {
             if (chart?.scales?.x?.width) {
-                chartWidth.value = `${parseInt(
-                    chart.scales.x.width as unknown as string
-                )}px`
+                chartWidth.value = `${
+                    parseInt(chart.scales.x.width as unknown as string) -
+                    parseInt(brushProperties.value.thumbSize) / 4
+                }px`
             }
         }
 
@@ -389,7 +393,10 @@ export default defineComponent({
             () => chart.value?.scales?.x?.width,
             (val: string) => {
                 if (val) {
-                    chartWidth.value = `${parseInt(val as unknown as string)}px`
+                    chartWidth.value = `${
+                        parseInt(val as unknown as string) -
+                        parseInt(brushProperties.value.thumbSize) / 4
+                    }px`
                 }
             },
             { deep: true }
@@ -433,6 +440,13 @@ export default defineComponent({
             chart.value.update()
         }
 
+        const cssVars = computed(() => {
+            return {
+                '--dl-brush-thumb-size':
+                    parseInt(brushProperties.value.thumbSize) / 4 + 'px'
+            }
+        })
+
         const onLeaveLegend = (
             item: BarControllerDatasetOptions,
             index: number
@@ -532,7 +546,8 @@ export default defineComponent({
             onLeaveLegend,
             onChartLeave,
             chart,
-            labelStyles
+            labelStyles,
+            cssVars
         }
     },
     data() {
@@ -560,5 +575,6 @@ export default defineComponent({
 .dl-brush,
 .dl-legend {
     align-self: flex-end;
+    margin-right: var(--dl-brush-thumb-size);
 }
 </style>