@dataloop-ai/components 0.19.278 → 0.19.280

package/package.json

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

package/src/components/blocks/DlLabelPicker/DlLabelPicker.vue

@@ -7,6 +7,9 @@
             has-prepend
             padding-prop="0px 0px 0px 0px"
             :style="inputStyles"
+            @focus="onFocus"
+            @blur="onBlur"
+            @clear="onClear"
         >
             <template #prepend>
                 <dl-icon
@@ -34,6 +37,7 @@
             :empty-state-props="emptyStateProps"
             :hide-bottom="hideBottom"
             :hide-no-data="hideNoData"
+            identifier-as-tooltip
             @row-click="handleRowClick"
         >
             <template #body-cell-displayLabel="item">
@@ -41,6 +45,7 @@
                     :text="item.row.displayLabel"
                     :indicator-color="item.row.color"
                     class="dl-label-picker-item"
+                    :data-label-picker-identifier="item.row.identifier"
                 />
             </template>
         </dl-tree-table>
@@ -48,7 +53,15 @@
 </template>
 
 <script lang="ts">
-import { ref, PropType, defineComponent, computed, toRefs } from 'vue-demi'
+import {
+    ref,
+    PropType,
+    defineComponent,
+    computed,
+    toRefs,
+    onMounted,
+    nextTick
+} from 'vue-demi'
 import { DlLabel, DlIcon } from '../../essential'
 import { DlInput, DlTreeTable } from '../../compound'
 import { DlEmptyStateProps, DlTableColumn, DlTableRow } from '../../types'
@@ -94,7 +107,7 @@ export default defineComponent({
             default: false
         }
     },
-    emits: ['selected-label', 'click'],
+    emits: ['selected-label', 'click', 'focus', 'blur', 'clear'],
     setup(props, { emit, slots }) {
         const { items } = toRefs(props)
 
@@ -188,6 +201,26 @@ export default defineComponent({
             }
             return false
         }
+
+        onMounted(() => {
+            nextTick(() => {
+                if (items.value?.[0]?.identifier) {
+                    const target = table.value.$el.querySelector(
+                        `[data-label-picker-identifier="${items.value[0].identifier}"]`
+                    )
+                    target?.closest('tr')?.classList.add('selected')
+                }
+            })
+        })
+        const onFocus = (event: InputEvent) => {
+            emit('focus', event)
+        }
+        const onBlur = (event: InputEvent) => {
+            emit('blur', event)
+        }
+        const onClear = (event: InputEvent) => {
+            emit('clear', event)
+        }
         return {
             handleRowClick,
             inputValue,
@@ -196,7 +229,10 @@ export default defineComponent({
             inputStyles,
             rows,
             table,
-            isFilterString
+            isFilterString,
+            onClear,
+            onBlur,
+            onFocus
         }
     }
 })

package/src/components/compound/DlSearches/DlSmartSearch/utils/index.ts

@@ -1,6 +1,5 @@
 export * from './highlightSyntax'
 
-import { DateInterval } from '../../../DlDateTime/types'
 import { ColorSchema, SyntaxColorSchema, Filters } from '../types'
 import {
     operators,

package/src/components/compound/DlTreeTable/DlTreeTable.vue

@@ -165,6 +165,13 @@ export default defineComponent({
             type: Boolean,
             default: false
         },
+        /**
+         * identifier As Tooltip form row object
+         */
+        identifierAsTooltip: {
+            type: Boolean,
+            default: false
+        },
         /**
          * Function to generate the label visible when selecting rows
          */
@@ -530,6 +537,7 @@ export default defineComponent({
                 computedCols: tableRootRef.value.computedCols,
                 modelValue: isRowSelected(props.rowKey, getRowKey.value(row)),
                 scopedSlots: currentSlots,
+                tooltip: props.identifierAsTooltip ? row.identifier : null,
                 'onUpdate:modelValue': (adding: boolean, evt: Event) => {
                     updateSelectionHierarchy(adding, evt, row)
                 },

package/src/components/compound/DlTreeTable/components/DlTdTree.vue

@@ -6,7 +6,10 @@
         :data-col-index="colIndex"
     >
         <slot name="icon" />
-        <dl-tooltip v-if="hasEllipsis">
+        <dl-tooltip v-if="tooltip">
+            {{ tooltip }}
+        </dl-tooltip>
+        <dl-tooltip v-else-if="hasEllipsis">
             <slot />
         </dl-tooltip>
         <slot />
@@ -39,6 +42,10 @@ export default defineComponent({
         colIndex: {
             type: Number,
             default: null
+        },
+        tooltip: {
+            type: String,
+            default: null
         }
     },
     setup(props) {

package/src/components/compound/DlTreeTable/views/DlTrTreeView.vue

@@ -53,6 +53,7 @@
                     }px;`
             "
             :col-index="colIndex"
+            :tooltip="tooltip"
         >
             <template v-if="!hasSlotByName(`body-cell-${col.name}`)">
                 {{ getCellValue(col, row) }}
@@ -149,6 +150,10 @@ export default defineComponent({
         modelValue: {
             type: [String, Boolean],
             default: null
+        },
+        tooltip: {
+            type: String,
+            default: null
         }
     },
     emits: [

package/src/demos/DlLabelPickerDemo.vue

@@ -26,17 +26,17 @@ const rows: DlLabelPickerItem[] = [
         color: '#ff0000',
         children: [
             {
-                identifier: 'b',
+                identifier: 'a.a',
                 displayLabel: 'hello',
                 color: '#ffff00',
                 children: [
                     {
-                        identifier: 'c',
+                        identifier: 'a.a.a',
                         displayLabel: 'test 2',
                         color: '#00ff00',
                         children: [
                             {
-                                identifier: 'd',
+                                identifier: 'a.a.a.a',
                                 displayLabel: 'test 3',
                                 color: '#ff00aa',
                                 children: []
@@ -44,7 +44,7 @@ const rows: DlLabelPickerItem[] = [
                         ]
                     },
                     {
-                        identifier: 'd',
+                        identifier: 'a.a.b',
                         displayLabel: 'test 4',
                         color: '#ff00ff',
                         children: []