@dataloop-ai/components 0.17.128 → 0.17.130

package/package.json

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

package/src/components/basic/DlAccordion/components/AccordionHeader.vue

@@ -43,7 +43,8 @@
 </template>
 
 <script lang="ts">
-import { DlIcon, DlTooltip } from '../../../essential'
+import { DlTooltip } from '../../../shared'
+import { DlIcon } from '../../../essential'
 import { defineComponent, ref } from 'vue-demi'
 import { getColor } from '../../../../utils'
 import { useSizeObserver } from '../../../../hooks/use-size-observer'

package/src/components/basic/DlAvatar/DlAvatar.vue

@@ -19,7 +19,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlTooltip } from '../../essential'
+import { DlTooltip } from '../../shared'
 import { getColor } from '../../../utils'
 import { v4 } from 'uuid'
 

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

@@ -53,7 +53,8 @@
 </template>
 
 <script lang="ts">
-import { DlTooltip, DlIcon } from '../../essential'
+import { DlTooltip } from '../../shared'
+import { DlIcon } from '../../essential'
 import {
     setPadding,
     setFontSize,

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

@@ -50,7 +50,8 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue-demi'
-import { DlIcon, DlTooltip } from '../../essential'
+import { DlTooltip } from '../../shared'
+import { DlIcon } from '../../essential'
 import { useSizeObserver } from '../../../hooks/use-size-observer'
 import {
     setTextColor,

package/src/components/basic/DlGrid/DlGrid.vue

@@ -57,20 +57,21 @@ export default defineComponent({
     },
     watch: {
         modelValue: {
-            handler(val) {
+            handler(val, oldVal) {
                 this.$nextTick(() => {
-                    if (val) this.applyGridElementStyles()
+                    if (val) {
+                        if (val.length !== oldVal?.length) {
+                            this.applyIndexesForChildren()
+                        }
+                        this.applyGridElementStyles()
+                    }
                 })
             },
             immediate: true
         }
     },
     mounted() {
-        Array.from((this.$refs.grid as HTMLElement).children).forEach(
-            (element: Element, index: number) => {
-                (element as HTMLElement).dataset.index = `${index}`
-            }
-        )
+        this.applyIndexesForChildren()
     },
     methods: {
         applyGridElementStyles() {
@@ -135,6 +136,13 @@ export default defineComponent({
         },
         layoutChanged() {
             this.$emit('layout-changed', this.modelValue)
+        },
+        applyIndexesForChildren() {
+            Array.from((this.$refs.grid as HTMLElement).children).forEach(
+                (element: Element, index: number) => {
+                    (element as HTMLElement).dataset.index = `${index}`
+                }
+            )
         }
     }
 })

package/src/components/basic/DlKpi/components/KpiInfo.vue

@@ -18,7 +18,8 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed } from 'vue-demi'
-import { DlTooltip, DlIcon } from '../../../essential'
+import { DlIcon } from '../../../essential'
+import { DlTooltip } from '../../../shared'
 
 export default defineComponent({
     name: 'KpiInfo',

package/src/components/basic/DlPanelContainer/DlPanelContainer.vue

@@ -111,7 +111,8 @@
 <script lang="ts">
 import { v4 } from 'uuid'
 import { defineComponent } from 'vue-demi'
-import { DlIcon, DlTooltip } from '../../essential'
+import { DlIcon } from '../../essential'
+import { DlTooltip } from '../../shared'
 
 export default defineComponent({
     name: 'DlPanelContainer',

package/src/components/basic/DlPopup/components/PopupHeader.vue

@@ -12,7 +12,7 @@
             class="header-content"
         >
             <span class="title">
-                {{ title }}
+                <dl-ellipsis :text="title" />
                 <span class="info-icon">
                     <dl-icon
                         v-if="hasAdditionalInfo"
@@ -41,19 +41,23 @@
                     size="12px"
                 />
             </span>
-            <span class="subtitle">{{ subtitle }}</span>
+            <span class="subtitle">
+                <dl-ellipsis :text="subtitle" />
+            </span>
         </div>
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlTooltip, DlIcon } from '../../../essential'
+import { DlIcon, DlEllipsis } from '../../../essential'
+import { DlTooltip } from '../../../shared'
 
 export default defineComponent({
     components: {
         DlIcon,
-        DlTooltip
+        DlTooltip,
+        DlEllipsis
     },
     props: {
         title: { type: String, default: '' },

package/src/components/basic/DlProgressChart/DlProgressChart.vue

@@ -78,7 +78,8 @@ import { v4 } from 'uuid'
 import { defineComponent, isVue2 } from 'vue-demi'
 import { getColor } from '../../../utils'
 import { isEllipsisActive } from '../../../utils/is-ellipsis-active'
-import { DlTooltip, DlLink } from '../../essential'
+import { DlLink } from '../../essential'
+import { DlTooltip } from '../../shared'
 
 type ProgressChartOption = {
     name: string

package/src/components/basic/index.ts

@@ -9,7 +9,6 @@ export * from './DlWidget'
 export * from './DlPopup'
 export * from './DlPanelContainer'
 export * from './DlProgressChart'
-export * from './DlEllipsis'
 export * from './DlCard'
 export * from './DlGrid'
 export * from './DlMarkupTable'

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

@@ -170,7 +170,7 @@
 <script lang="ts">
 import { defineComponent, PropType, ref } from 'vue-demi'
 import DlBrush from '../../components/DlBrush.vue'
-import DlTooltip from '../../../../essential/DlTooltip/DlTooltip.vue'
+import { DlTooltip } from '../../../../shared'
 import {
     DlConfusionMatrixCell,
     DlConfusionMatrixLabel,

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

@@ -42,7 +42,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue-demi'
-import DlEllipsis from '../../../../../basic/DlEllipsis/DlEllipsis.vue'
+import { DlEllipsis } from '../../../../../essential'
 import { TDoughnutChartData } from '../types/TDoughnutChartData'
 
 enum EBadgeText {

package/src/components/compound/DlCharts/components/DlChartLabels.vue

@@ -82,7 +82,8 @@
 import { v4 } from 'uuid'
 import { defineComponent, PropType, isVue2 } from 'vue-demi'
 import { isEllipsisActive } from '../../../../utils/is-ellipsis-active'
-import { DlTooltip, DlTypography } from '../../../essential'
+import { DlTypography } from '../../../essential'
+import { DlTooltip } from '../../../shared'
 
 type ObserverRefs = {
     ref: 'resizeObserverTitle' | 'resizeObserverSubtitle'

package/src/components/compound/DlDialogBox/components/DlDialogBoxHeader.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="root-container">
-        <div>
+        <div style="width: 95%; height: 100%">
             <dl-button
                 v-if="hasBackButton"
                 dense
@@ -16,7 +16,7 @@
                 class="title"
             >
                 <slot name="title">
-                    {{ title }}
+                    <dl-ellipsis :text="title" />
                 </slot>
             </h2>
             <p
@@ -24,12 +24,13 @@
                 class="subtitle"
             >
                 <slot name="subtitle">
-                    {{ subtitle }}
+                    <dl-ellipsis :text="subtitle" />
                 </slot>
             </p>
         </div>
         <dl-button
             v-if="closeButton"
+            style="height: 100%; display: flex; align-items: start"
             class="close-button"
             icon="icon-dl-close"
             size="s"
@@ -43,11 +44,13 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue-demi'
 import { DlButton } from '../../../basic'
+import { DlEllipsis } from '../../../essential'
 
 export default defineComponent({
     name: 'DlDialogBoxHeader',
     components: {
-        DlButton
+        DlButton,
+        DlEllipsis
     },
     props: {
         title: { type: String, default: '' },

package/src/components/compound/DlInput/DlInput.vue

@@ -210,9 +210,9 @@
 <script lang="ts">
 import { debounce } from 'lodash'
 import { computed, defineComponent, PropType, ref } from 'vue-demi'
-import { DlInfoErrorMessage } from '../../shared'
+import { DlInfoErrorMessage, DlTooltip } from '../../shared'
 import { DlListItem } from '../../basic'
-import { DlMenu, DlIcon, DlList, DlTooltip } from '../../essential'
+import { DlMenu, DlIcon, DlList } from '../../essential'
 import { DlButton } from '../../basic'
 import { InputSizes, TInputSizes } from '../../../utils/input-sizes'
 import { v4 } from 'uuid'

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

@@ -60,7 +60,8 @@ import {
 } from './types'
 import { loggerFactory } from '../../../utils'
 import { v4 } from 'uuid'
-import { DlIcon, DlTooltip } from '../../essential'
+import { DlIcon } from '../../essential'
+import { DlTooltip } from '../../shared'
 
 export default defineComponent({
     name: 'DlOptionGroup',

package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue

@@ -136,7 +136,7 @@ import { isEllipsisActive } from '../../../../../utils/is-ellipsis-active'
 import { useSizeObserver } from '../../../../../hooks/use-size-observer'
 import { SearchStatus, SyntaxColorSchema } from '../types'
 import { debounce } from 'lodash'
-import { DlTooltip } from '../../../../essential'
+import { DlTooltip } from '../../../../shared'
 import DlSuggestionsDropdown from './DlSuggestionsDropdown.vue'
 import { DateInterval } from '../../../DlDateTime/types'
 import {

package/src/components/compound/DlSearches/DlSmartSearch/components/FiltersQuery.vue

@@ -34,7 +34,9 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlIcon, DlTooltip } from '../../../../essential'
+import { DlIcon } from '../../../../essential'
+import { DlTooltip } from '../../../../shared'
+
 export default defineComponent({
     components: {
         DlIcon,

package/src/components/compound/DlSelect/DlSelect.vue

@@ -321,7 +321,8 @@
 <script lang="ts">
 import { InputSizes, TInputSizes } from '../../../utils/input-sizes'
 import { DlListItem } from '../../basic'
-import { DlTooltip, DlList, DlIcon, DlMenu } from '../../essential'
+import { DlTooltip } from '../../shared'
+import { DlList, DlIcon, DlMenu } from '../../essential'
 import {
     DlInfoErrorMessage,
     DlItemSection,

package/src/components/compound/DlSlider/DlSlider.vue

@@ -98,7 +98,8 @@
 import { defineComponent } from 'vue-demi'
 import { DlSliderBase, DlSliderInput } from './components/'
 import { DlButton } from '../../basic'
-import { DlIcon, DlTooltip } from '../../essential'
+import { DlIcon } from '../../essential'
+import { DlTooltip } from '../../shared'
 import { getColor, between } from '../../../utils'
 import { v4 } from 'uuid'
 

package/src/components/compound/DlTable/components/DlTd.vue

@@ -18,7 +18,7 @@
 <script lang="ts">
 import { defineComponent, getCurrentInstance, computed, ref } from 'vue-demi'
 import { getColor } from '../../../../utils'
-import { DlTooltip } from '../../../essential'
+import { DlTooltip } from '../../../shared'
 import { useSizeObserver } from '../../../../hooks/use-size-observer'
 
 export default defineComponent({

package/src/components/compound/DlTable/components/DlTh.vue

@@ -29,7 +29,8 @@
 <script lang="ts">
 import { defineComponent, getCurrentInstance, computed, ref } from 'vue-demi'
 import { useSizeObserver } from '../../../../hooks/use-size-observer'
-import { DlIcon, DlTooltip } from '../../../essential'
+import { DlIcon } from '../../../essential'
+import { DlTooltip } from '../../../shared'
 
 export default defineComponent({
     name: 'DlTh',

package/src/components/compound/DlTabs/components/DlTab.vue

@@ -27,7 +27,8 @@
     </div>
 </template>
 <script lang="ts">
-import { DlTooltip, DlIcon } from '../../../essential'
+import { DlTooltip } from '../../../shared'
+import { DlIcon } from '../../../essential'
 import { defineComponent } from 'vue-demi'
 import { stopAndPrevent } from '../../../../utils'
 import { v4 } from 'uuid'

package/src/components/{basic → essential}/DlEllipsis/DlEllipsis.vue

@@ -30,7 +30,7 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed, toRef } from 'vue-demi'
-import DlTooltip from '../../essential/DlTooltip/DlTooltip.vue'
+import { DlTooltip } from '../../shared'
 import { useSizeObserver } from '../../../hooks/use-size-observer'
 
 export default defineComponent({
@@ -59,7 +59,7 @@ export default defineComponent({
         splitPosition: {
             type: Number,
             default: 0.5,
-            validator: (value) => value >= 0 && value <= 1
+            validator: (value: number) => value >= 0 && value <= 1
         },
         /**
          * Tooltip to be displayed when the text is truncated

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

@@ -112,7 +112,9 @@ import { v4 } from 'uuid'
 import { DlInfoErrorMessage } from '../../shared'
 import { defineComponent, computed, ref } from 'vue-demi'
 import { useSizeObserver } from '../../../hooks/use-size-observer'
-import { DlIcon, DlTooltip } from '../'
+//todo: this can cause issues
+import { DlIcon } from '../'
+import { DlTooltip } from '../../shared'
 import DlButton from '../../basic/DlButton/DlButton.vue'
 
 export default defineComponent({

package/src/components/essential/DlTextHolder/DlTextHolder.vue

@@ -15,7 +15,9 @@
 
 <script lang="ts">
 import { v4 } from 'uuid'
-import { DlEllipsis } from '../../basic/DlEllipsis'
+// todo: this causes an issue
+import { DlEllipsis } from '../../'
+
 import { defineComponent } from 'vue-demi'
 
 export default defineComponent({
@@ -88,3 +90,4 @@ export default defineComponent({
     white-space: nowrap;
 }
 </style>
+../DlEllipsis

package/src/components/essential/index.ts

@@ -7,9 +7,9 @@ export * from './DlProgressBar'
 export * from './DlRadio'
 export * from './DlSkeleton'
 export * from './DlSwitch'
+export * from './DlEllipsis'
 export * from './DlTextHolder'
 export * from './DlThemeProvider'
-export * from './DlTooltip'
 export * from './DlTrend'
 export * from './DlTypography'
 export * from './DlPanel'

package/src/components/shared/index.ts

@@ -1,3 +1,4 @@
 export * from './DlItemSection'
 export * from './DlInfoErrorMessage'
 export * from './DlVirtualScroll'
+export * from './DlTooltip'

package/src/demos/DlCheckboxDemo.vue

@@ -35,8 +35,8 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue-demi'
-import { DlCheckbox } from '../components'
-import DlTooltip from '../components/essential/DlTooltip/DlTooltip.vue'
+import { DlCheckbox, DlTooltip } from '../components'
+
 export default defineComponent({
     name: 'DlCheckboxDemo',
     components: {